:root {
   --color-sky: #007bff;
   --color-green: #3ac977;
   --color-orange: orange;
   --color-gray: #808080;
   --color-white: #fff;
   --color-transparent: transparent;
   --color-l-white: #fdfafa30;
   --color-l-blue: #e0efff;
   --color-l-green: #3ac97745;
   --color-l-red: #fb170040;
   --color-l-pink: #fec5bf;
   --color-r-red: #ff000014;
   --color-r-green: #00ffa129;
   --color-r-blue: #645df6;
   --color-r-gray: #dee1e7;
   --color-s-blue: #0408499e;
   --color-s-red: #e9594d;
   --color-s-white: #f0f5ff;
   --color-d-blue: #040849;
   --color-l-orange: #f48d3478;
   --color-x-blue: #63668e59;
   --color-t-blue: #04084954;
   --color-gradient-orange: linear-gradient(90deg, #f39034 0.56%, #ff2727 98.89%);
   --color-gradient-green: linear-gradient(270deg, #00a843 0.69%, #1fd071 99.31%);
   --color-gradient-blue: linear-gradient(269.93deg, #003ad2 0.61%, #0097ec 99.25%);
   --color-gradient-purple: linear-gradient(90deg, #9852f0 2.22%, #5900c9 97.78%);
   --color-gradient-red: linear-gradient(90deg, #ee1d4a 0.56%, #d60c60 98.89%);
   --color-gradient-pink: linear-gradient(90deg, #d548da 0.56%, #da1ac0 98.89%);
   --color-gradient-1: linear-gradient(90deg, #daac30 0.56%, #ce9e1bd3 98.89%);
   --color-gradient-2: linear-gradient(90deg, #426d1d 0.56%, #539718 98.89%);
   --color-gradient-3: linear-gradient(90deg, #03d3fc 0.56%, #0398fc 98.89%);
   --color-gradient-4: linear-gradient(90deg, #382858 0.56%, #7032eb 98.89%);
   --color-gradient-5: linear-gradient(90deg, #179c93 0.56%, #14ddd0 98.89%);
   --color-gradient-6: linear-gradient(90deg, #b5610d 0.56%, #814509 98.89%);
   --color-gradient-img: url(https://www.transparenttextures.com/patterns/cubes.png), linear-gradient(to right top, #cf4af3, #e73bd7, #f631bc, #fd31a2, #ff3a8b, #ff4b78, #ff5e68, #ff705c, #ff8c51, #ffaa49, #ffc848, #ffe652);
   --color-off-white: #ffffffb8;
   --color-off-gray: #f8f9fb;

   --box-sd-gray: 0px 8px 18px -6px rgb(24 39 75 / 12%), 0px 6px 18px -4px rgb(24 39 75 / 12%);
   --box-sd-l-gray: 0 5px 5px -5px #333, -5px 0 5px -5px #333, 5px 0 5px -5px #333;
}

* {
   padding: 0;
   margin: 0;
}

body {
   background-color: var(--color-s-white) !important;
   scroll-behavior: smooth;
   font-family: "Source Sans Pro", sans-serif !important;
}

/*-----------------typefprm-css-start-----------------*/

.min-w-85 {
   min-width: 85px !important;
}

.w-9 {
   width: 90px !important;
}

.w-12 {
   width: 120px !important;
}

.w-15 {
   width: 150px !important;
}

.w-20 {
   width: 250px !important;
}

.w-30 {
   width: 300px;
}

.w-35 {
   width: 350px;
}

.w-40 {
   width: 40% !important;
}

.w-60 {
   width: 60% !important;
}
.w-80{
   width: 80%;
}

.w-xl-20 {
   width: 20%;
}

.w-xl-25{
   width: 25%;
}

.w-xl-75{
   width: 75%;
}

.w-xl-85 {
   width: 85%;
}

.w-xl-40{
   width: 40%;
}

.w-xl-60{
   width: 60%;
}

.pt-30 {
   padding-top: 30px;
}

.bg-sky {
   background-color: var(--color-sky) !important;
}

.bg-green {
   background-color: var(--color-green) !important;
}

.bg-orange {
   background-color: var(--color-orange);
}

.bg-gray {
   background-color: var(--color-gray);
}

.bg-l-blue {
   background: var(--color-l-blue) !important;
}

.bg-l-green {
   background: var(--color-l-green);
}

.bg-l-red {
   background: var(--color-l-red);
}

.bg-r-red {
   background-color: var(--color-r-red);
}

.bg-r-green {
   background: var(--color-r-green) !important;
}

.bg-r-blue {
   background: var(--color-r-blue);
}

.bg-r-gray {
   background: var(--color-r-gray);
}

.bg-s-blue {
   background: var(--color-s-blue);
}

.bg-s-red {
   background: var(--color-s-red);
}

.bg-d-blue {
   background-color: var(--color-d-blue) !important;
}

.bg-l-orange {
   background-color: var(--color-l-orange);
}

.bg-title {
   background: var(--color-l-blue) !important;
}

.bg-gradient-orange {
   background: var(--color-gradient-orange) !important;
}

.bg-gradient-green {
   background: var(--color-gradient-green);
}

.bg-gradient-blue {
   background: var(--color-gradient-blue);
}

.bg-gradient-purple {
   background: var(--color-gradient-purple);
}

.bg-gradient-red {
   background: var(--color-gradient-red);
}

.bg-gradient-pink {
   background: var(--color-gradient-pink);
}

.bg-gradient-1 {
   background: var(--color-gradient-1);
}

.bg-gradient-2 {
   background: var(--color-gradient-2);
}

.bg-gradient-3 {
   background: var(--color-gradient-3);
}

.bg-gradient-4 {
   background: var(--color-gradient-4);
}

.bg-gradient-5 {
   background: var(--color-gradient-5);
}

.bg-gradient-6 {
   background: var(--color-gradient-6);
}

.bg-g-img{
   background-image: var(--color-gradient-img);
}
.br-l-20 {
   border-radius: 20px 0 0 20px !important;
}

.br-r-20 {
   border-radius: 0 20px 20px 0;
}

.br-20 {
   border-radius: 20px;
}

.br-l-blue {
   border-radius: 8px;
   border: 1px solid #0408491c;
}

.flex-box-2 {
   display: flex !important;
   flex-direction: row;
   justify-content: space-between;
}

.flex-box {
   display: flex !important;
   flex-direction: column;
   justify-content: center;
}

.card-company{
   padding: 5px;
   background: #e0efff3d;
   position: relative;
   border-radius: 5px;
   margin: 10px 0 !important;
   border: 1px solid #e9ecf0;
}

.card-company i{
      position: absolute;
      color: #fff;
      right: 12px;
      top: 12px;
      background: #040849;
      outline: 1px solid #040849;
      font-size: 25px;
      border-radius: 50%;
      z-index: 9;
      cursor: pointer;
}
 .s-btn:hover{
      color: #1f1d1f;
      text-decoration: none;
}
.b-btn:hover {
   color: #1f1d1f;
   text-decoration: none;
}
.b-btn{
   background-color: #00a843;
   border-radius: 5px;
   padding: 3px 5px;
   color: #fff;
}
.s-btn {
   background-color: #007bff;
   border-radius: 5px;
   padding: 3px 5px;
   color: #fff;
}

.scroll-to-top.rounded{
   position: absolute;
   right: 50px;
   bottom: 30px;
   padding: 6px 12px;
   color: white;
   z-index: 9;
   background: #645df6;
   border-radius: 50% !important;
   box-shadow: 0 4px 10px rgb(0 0 0 / 30%), 0 4px 8px rgb(0 0 0 / 38%);

}

/*-----------------typefprm-css-end----------------*/

/*-----------------sidebar-css-start----------------*/

.sidebar {
   background-color: var(--color-d-blue);
   width: 250px;
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   overflow-x: hidden;
   overflow-y: auto;

}

.sidebar .navbar-brand {
   color: var(--color-off-white) !important;
   font-size: 1.875rem;
   width: inherit;
   padding: 20px;
   
}

.sidebar .navbar-brand i {
   padding: 0 4px;
}

.portfolio {
   background-color: var(--color-off-gray);
   position: absolute;
   top: 0;
   left: 250px;
   right: 0;
   z-index: 1;
   bottom: 0;
   overflow-y: auto;
   -moz-transition: left 0.5s ease;
   transition: left 0.5s ease;
}

#slide-sidebar[type="checkbox"] {
   display: none;
}

#slide-sidebar:checked ~ .portfolio {
   left: 78px;
}

#slide-sidebar:checked ~ label {
   left: 60px;
}

#slide-sidebar:checked ~ label i {
   transform: rotate(180deg);
   transition: 0.5s;
}

.sidebar ul {
   padding: 0px 0px;
   /* padding: 50px 0px; */
   list-style: none;
   /* margin-bottom: 90px !important; */
}
/* .sidebar ul ul {
   display: none;
   transition: 1s;
} */

.sidebar .dd-c{
   display: none;
   right: 0;
   opacity: 0;
   width: 100%;
   /* margin: 10px 0; */
   /* position: absolute; */
   /* bottom: -200px; */
   background: var(--color-d-blue);
   height:0px;
   /* transform: scaleY(0);
   transform-origin: top left;
   transition-duration: 0.2s;
   -webkit-transform: scaleY(0);
   -webkit-transform-origin: top left;
   -webkit-transition-duration: 0.2s; */
}


 .sidebar .sub-menu {
   top:0;
   opacity:0;
   display:block;
   padding:0;
   margin:0;
   cursor: pointer;
   border:0;
   position:absolute;
   height:100%;
   width:100%;
 }
/* .sidebar ul li:hover ul {
   display: block;
   transition: 1s;
} */
.sidebar ul li {
   /* padding: 10px 0px; */
   position: relative;
   cursor: pointer;
   z-index: 1;
}
.sidebar ul li .fa-angle-down{
   background-color: transparent;
    position: absolute;
    right: 10px;
    top: 13px;
}
.sidebar ul ul{
   /* margin-bottom: -10px; */
   padding: 10px 0 10px 15px;
   background: #282789;
   /* border: 1px solid red; */
}
.sidebar ul ul li{
   /* padding: 8px 0 */
}

.sidebar .sub-menu:checked ~ .dd-c{
   height: fit-content !important;
   display: block;
   opacity: 1;
   margin: 10px 0 0 0;
}



/* .sidebar .sub-menu:checked:after {
   transform: scaleX(1);
   height: 100%;
   -webkit-transform: scaleX(1);
 }
 .sidebar .sub-menu:checked ~ .dd-c {
   transform: scaleY(1);
   height: 100%;
   -webkit-transform: scaleY(1);
 } */

.sidebar ul li::before,
.sidebar ul li::after {
   background-color: #ffffff2e;
   content: '';
   position: absolute;
   z-index: -1;
   transition: all 0.3s;   
}


.sidebar ul li::after{
   height: 100%;
   left: 0;
   top: 0;
   width: 0;
}

.sidebar ul li:hover:after {
   width: 100%;
 }

.sidebar ul li a {
   width: 100%;
   padding: 10px 20px;
   display: inline-block;
   white-space: nowrap;
   color: var(--color-off-white);
}

.sidebar ul li a:hover {
   text-decoration: none;
}

.sidebar ul li i {
   font-size: 1.25rem;
   background: var(--color-l-white);
   padding: 7px;
   color: var(--color-off-white);
   border-radius: 4px;
   width: 2.375rem;
   text-align: center;
}

.slide-btn {
   z-index: 2;
   position: absolute;
   bottom: 61px;
   left: 235px;
   border-radius: 50%;
   color: var(--color-white);
   border: 3px solid #eceef2;
   padding: 2px 10px;
   background-color: var(--color-r-blue);
   -moz-transition: left 0.5s ease;
   transition: left 0.5s ease;
}

/*-----------------sidebar-css-end----------------*/

.user-id {
   position: fixed;
   bottom: 0;
   display: flex;
   padding: 0 18px;
   background: #040849;
   width: inherit;
   /* margin-right: 14px; */
   z-index: 1;
}

.user-id .fa-user {
   padding: 8px 29px;
   margin-right: 22px;
   background: var(--color-white);
   border-radius: 0 30px 30px 0;
   line-height: unset !important;
   position: unset !important;
   right: auto !important;
   width: 57px !important;
   margin-left: -18px;
   cursor: pointer;
   background: #c6c7d6;
}

.user-id .dropdown-toggle {
   background-color: transparent !important;
   padding: 10px 0 !important;
   border: none !important;
}

.user-id .dropdown-item {
   display: flex;
   color: var(--color-d-blue);
}

.user-id .dropdown-item p {
   color: var(--color-d-blue);
   margin-left: 15px;
}

.user-id p {
   margin: 0;
   width: 100%;
   line-height: 36px;
   color: var(--color-off-white);
   cursor: pointer;
   font-size: large;
   max-width: 12ch;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
}

.user-id .dropdown-menu {
   background-color: var(--color-l-blue) !important;
}

.ab-btn:focus {
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) !important;
}

.ab-btn a:hover {
   box-shadow: 0 1px 4px rgb(0 0 0 / 30%), 0 0 40px rgb(0 0 0 / 10%) !important;
   text-decoration: none;
   color: var(--color-white);
   background: #040849d6 !important;
}

.logout-btn:hover {
   cursor: pointer;
}

.logout-btn {
   margin: 0 8px;
   background: var(--color-d-blue);
   padding: 10px;
   width: 92%;
   border: none;
   border-radius: 6px;
   color: var(--color-white);
}

.ab-btn i {
   font-size: 1rem;
   height: 24px;
   width: 24px;
   text-align: center;
   line-height: 23px;
   margin-right: 5px;
   border-radius: 8px;
}

.tx-hidden  h6 {
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 100%;
}

.tx-hidden  h6 {
   color: #525252;
}

.form-control:focus {
   box-shadow: none !important;
}

.box-design {
   margin: 1rem;
   background: var(--color-white);
   box-shadow: 0px 8px 18px -6px rgb(24 39 75 / 12%), 0px 12px 42px -4px rgb(24 39 75 / 12%);
   border-radius: 10px;
}

.us-filter-header h3 {
   font-size: 1.188rem;
   margin: 0;
   color: #505050;
}

.us-filter-grid{
   -webkit-column-count: 1;
   -moz-column-count:1;
   column-count: 1;
   -webkit-column-gap: 1em;
   -moz-column-gap: 1em;
   column-gap: 1em;
    margin: 1.5em;
     padding: 0;
     -moz-column-gap: 1.5em;
     -webkit-column-gap: 1.5em;
     column-gap: 1.5em;
     font-size: .85em;
}

.inner-grid{
   display: inline-block;
   background: #fff;
   /* padding: 1em; */
   margin: 0 0 1.5em;
   width: 100%;
  -webkit-transition:1s ease all;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   /* background: var(--color-white); */
   box-shadow: 0px 8px 18px -6px rgb(24 39 75 / 12%), 0px 12px 42px -4px rgb(24 39 75 / 12%);
   border-radius: 10px;
   /* border: 1px solid #040849; */
   overflow: hidden;
   color: var(--color-white);
}

.inner-grid-body .badge{
   margin: 0 4px 4px 0;
}

.inner-grid-header{
   display: flex;
   justify-content: space-between;
   padding: 0.7em;
   /* background-color: var(--color-d-blue); */
   border-bottom: 1px solid #e1e4e9;
}

.inner-grid-header .a-btn{
   padding: 0px 10px !important;
   height: fit-content;
}

.inner-grid-body{
   padding: 1em;
}
.inner-grid-header  p{
   font-size: 16px;
   color: var(--color-d-blue);
}
.inner-grid-header .a-btn{
   background-color: transparent !important;
}

.inner-grid-header .a-btn i{
   color: var(--color-d-blue) !important;
}

.ab-btn a {
   padding: 7px 15px 7px 12px !important;
   white-space: nowrap;
   font-size: 0.75rem !important;
   margin: 15px 0 !important;
   color: var(--color-white) !important;
   border-radius: 20px;
   background: var(--color-d-blue) !important;
}

.us-filter-header button:hover {
   box-shadow: var(--box-sd-l-gray);
}

.us-filter-header button:focus {
   box-shadow: var(--box-sd-l-gray);
}

.us-filter-header {
   padding: 20px 25px 15px;
   border-radius: 10px 10px 0 0;
   display: flex;
   flex-direction: revert;
   justify-content: space-between;
}

.us-filter-wrapper {
   padding: 20px ;
   /* background-image:var(--color-gradient-img); */
   background: var(--color-s-white);
   border: 1px solid var(--color-l-blue);
   position: relative;
   margin: 0 20px;
   border-radius: 10px;
}

.sp-box {
   display: inline-block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.us-data p,
.ms-data p {
   border-radius: 5px;
   width: fit-content;
   font-size: 0.875rem;
   line-height: 19px;
   margin: 0 5px 5px 0;
   float: left;
   padding: 4px 8px;
   color: var(--color-d-blue);
}

.dropdown-toggle {
   width: 100%;
   text-align: left !important;
   font-size: 0.813rem !important;
   padding: 9px 9px !important;
   margin-bottom: 12px !important;
   background: var(--color-s-white) !important;
   border: 1px solid #80808069 !important;
   color: #5c5c5c !important;
}

/* .dropdown-menu {
   width: 100% !important;
} */

.dropdown-toggle::after {
   display: none !important;
}

.dropdown-toggle:focus {
   box-shadow: none !important;
}

.ft-box label {
   font-size: 1rem;
   line-height: 19px;
   text-transform: capitalize;
   font-weight: 600;
   color: var(--color-d-blue);
   /* color: #555e77; */
}

.ft-box input {
   font-size: 0.875rem;
   padding: 9px;
   background: var(--color-s-white) !important;
   /* margin-bottom: 12px !important; */
   color: #5c5c5c !important;
   border: 1px solid #80808069 !important;
}

.ft-box input::placeholder {
   color: #5c5c5c !important;
   font-size: 0.938rem;
}

.cnt-btn {
   font-size: 0.875rem !important;
   letter-spacing: 1px !important;
   border-radius: 20px !important;
   padding: 6px 20px !important;
   color: var(--color-white) !important;
   margin: 0 5px;
}

.cnt-btn:focus {
   box-shadow: none !important;
}

.cnt-btn:hover {
   box-shadow: var(--box-sd-l-gray);
}
.roles-board{
   overflow-x: auto;
}
.roles-board .slide-switch label{
   /* line-height: 26px; */
   width: 50px;
   height: 26px;
}

.roles-board .slide-switch label:after{
   width: 26px;
   height: 22px;
   border: 1px solid #04084963;
}
.roles-board .slide-switch label{
   
   background-color: var(--color-l-blue);
   border: 1px solid #04084963;
}
.roles-board .table tbody .slide-switch label{
   margin: -15px 8px 7px !important;
}

.roles-board .table thead .slide-switch label{
   margin: -20px auto -5px !important;
}

.roles-board .toggle-trip label{
   margin: -13px auto 8px !important;
}

.roles-board .toggle-trips label {
   margin: -16px auto 0px !important;
}

.roles-board table td{
padding: 0 10px !important;
}

.roles-board table td span {
   white-space: nowrap;
}

.us-d-table {
   padding: 20px;
}

.roles-tages tr:nth-child(even) {
   background-color: #d8dae163;
}

.schedule-box .card-header{
   background-color: var(--color-l-blue);
}

.schedule-box .card-body .card-header{
   background-color: var(--color-l-green);
   border-bottom: none;
}
.schedule-box .exe-day{
   --auto-grid-min-size: 20rem;
  
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
   grid-gap: 1rem;
}

.schedule-box .exe-set{
   height: fit-content;
   border-radius: 10px;
   overflow: hidden;
}

.schedule-box .card{
   box-shadow: var(--box-sd-gray);
}

.schedule-box .table{
   max-width: 100% !important;
}
.set-box{
   border-left: 2px solid #040849;
   border-radius: 5px;
}
 .inner-card{
   background-color: var(--color-l-blue);
}
.us-d-table table thead {
   background: var(--color-l-blue) !important;
   border-radius: 5px;
   word-wrap: break-word   ;
}

.user-img {
   width: 65px;
   height: 65px;
   display: flex;
   justify-content: center;
   border-radius: 50%;
   box-shadow: 0 1px 8px rgb(0 0 0 / 30%), 0 0px 6px rgb(0 0 0 / 22%);
   overflow: auto;
}

.trainer-box img {
   max-width: 40px;
}

.table-bordered td,
.table-bordered th,
.table-bordered {
   border: none !important;
}

.table tr th {
   font-size: 1rem;
   line-height: 19px;
   text-transform: capitalize;
   white-space: nowrap;
   font-weight: 600;
   margin-bottom: 5px;
   text-align: center;
}

.table tr th,
.table tr td {
   display: table-cell;
}

/*----------table-scrolling-css-start----------*/

.user-profile-img {
   max-width: 350px;
   margin: auto;
   padding: 0 20px 20px;
}

.user-profile-img p {
   margin: 10px 0 0;
   text-align: center;
   background: #f8f9fb;
   border: none;
   border-radius: 10px;

}

.user-profile-img img {
   border-radius: 50%;
   box-shadow: var(--box-sd-gray);
}

.upcoming-us-d-table tbody {
   display: block;
   max-height: 300px;
   overflow-y: auto;
}

.upcoming-us-d-table table thead {
   background: var(--color-d-blue);
   border-radius: 5px;
}

.upcoming-us-d-table thead,
.upcoming-us-d-table tbody tr {
   display: table;
   width: 100%;
   table-layout: fixed;
}

.upcoming-us-d-table .table thead tr th {
   padding: 15px 15px !important;
   color: var(--color-s-white);
}

.upcoming-us-d-table .table thead tr th:nth-child(1) {
   padding: 15px 25px !important;
}
.upcoming-us-d-table{
   overflow-x: auto;
}
/*----------table-scrolling-css-end----------*/
.onoffswitch {
   position: relative;
   width: 70px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
}

.onoffswitch-checkbox {
   display: none;
}

.onoffswitch-label {
   display: block;
   overflow: hidden;
   cursor: pointer;
   border: 1px solid #04084963;
   border-radius: 20px;
}

.onoffswitch-inner {
   display: block;
   width: 200%;
   margin-left: -100%;
   transition: margin 0.3s ease-in 0s;
}

.onoffswitch-inner:before,
.onoffswitch-inner:after {
      display: block;
         float: left;
         width: 50%;
         height: 25px;
         padding: 0;
         line-height: 25px;
         font-size: 11px;
         color: white;
         font-family: Trebuchet, Arial, sans-serif;
         /* font-weight: bold; */
         box-sizing: border-box;
}

.onoffswitch-inner:before {
   content: "Allow";
   padding-left: 10px;
   text-align: left;
   font-weight: 6 00;
   background-color: var(--color-d-blue);
   color: var(--color-white);
}

.onoffswitch-inner:after {
   content: "Deny";
   padding-right: 10px;
   background-color: var(--color-l-blue);
   color: var(--color-d-blue);
   text-align: right;
}

.onoffswitch-switch {
   display: block;
   width: 26px;
   margin: 2px;
   background: #FFFFFF;
   position: absolute;
   top: 0;
   bottom: 0;
   right: 40px;
   border: 1px solid #04084963;
   border-radius: 20px;
   transition: all 0.3s ease-in 0s;
}

.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
   margin-left: 0;
}

.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
   right: 0px;
}
.slide-switch input[type="checkbox"] {
   height: 0;
   width: 0;
   visibility: hidden;
}

.new-slide-switch input[type="checkbox"] {
   height: 0;
   width: 0;
   visibility: hidden;
}

.slide-switch label {
   cursor: pointer;
   text-indent: -9999px;
   width: 35px;
   height: 21px;
   background: grey;
   display: block;
   border-radius: 100px;
   position: relative;
   margin: auto auto 1.5rem auto;
}

.new-slide-switch label {
   cursor: pointer;
   text-indent: -9999px;
   width: 40px;
   height: 20px;
   background: grey;
   display: block;
   border-radius: 100px;
   position: relative;
   margin: auto auto 0.7rem auto;
}

.table tbody tr td {
   vertical-align: middle;
   word-break: break-all;
   color: #00000091;
}

.table tbody tr th {
   margin: auto;
}

.table tbody tr .tag {
   margin: 5px 0;
}

.table .tag {
   margin: 0;
   padding: 0 5px;
   color: var(--color-white);
   border-radius: 15px;
   text-align: center;
}

.table .tag p {
   font-size: 0.688rem;
}

.slide-switch label:after {
   content: "";
   position: absolute;
   top: 1px;
   left: 1px;
   width: 19px;
   height: 19px;
   background: var(--color-white);
   border-radius: 90px;
   transition: 0.3s;
}

.new-slide-switch label:after {
   content: "";
   position: absolute;
   top: 1px;
   left: 1px;
   width: 19px;
   height: 17px;
   background: var(--color-white);
   border-radius: 90px;
   transition: 0.3s;
}

.slide-switch input:checked + label {
   background-color: var(--color-d-blue) !important;
}

.new-slide-switch input:checked + label {
   background-color: #ff2727 !important;
}

.slide-switch input:checked + label:after {
   left: calc(100% - 1px);
   transform: translateX(-100%);
}

.new-slide-switch input:checked + label:after {
   left: calc(100% - 1px);
   transform: translateX(-100%);
}

.slide-switch label:active:after {
   width: 35px;
}

.new-slide-switch label:active:after {
   width: 35px;
}

.one-btn .a-btn{
   padding: 4px 15px !important;
   border-radius: 20px !important;
}

.action-block {
   display: flex;
   justify-content: center;
}

.action-block .a-btn {
   /* width: 15%; */
   padding: 6px 10px;
   color: var(--color-l-blue);
   background-color: var(--color-l-orange);
   border-radius: 0;
   transition: 0.1s;
   margin: 0 2px;
}

.action-block .dropdown:only-child .a-btn{
   padding: 4px 15px !important;
   border-radius: 20px !important;
}

.user-img-fh {
   display: flex;
   position: relative;
   border: 1px solid #70d79e;
   padding: 20px 30px;
   overflow: hidden;
   border-radius: 10px;
   box-shadow: 0px 8px 18px -6px rgb(240 240 242), 0px 6px 18px -4px rgb(4 8 73 / 46%);
}

.fh-shap {
   content: "";
   position: absolute;
   left: 0px;
   top: 0;
   width: 100px;
   transform: rotate(180deg);
   height: 0;
   border-right: 0px solid transparent;
   border-bottom: 141px solid var(--color-d-blue);
   border-left: 53px solid transparent;
}
.user-img-fh .tx-hidden  {
   padding: 0 20px;
}

.user-img-fh .tx-hidden  h6 {
   color: var(--color-d-blue);
   font-size: 1.875rem;
}
.img-fh {
   display: flex;
   z-index: 4;
   width: 100px;
   overflow: auto;
   border-radius: 50%;
   height: 100px;
   outline: 5px solid #70d79e;
   justify-content: center;
   background: #caf0da;
}

.text-left.user-wrapper.p3 {
   width: 40%;
}

.action-block form:hover {
   transform: scale(1.2);
}
.action-block .a-btn:nth-child(1) {
   border-radius: 20px 0 0 20px;
}

.action-block .a-btn:nth-last-child(1) {
   border-radius: 0 20px 20px 0;
}

.action-block .a-btn:hover {
   transform: scale(1.2);
}

.action-block .a-btn:hover i {
   color: var(--color-sky);
}

.action-block .a-btn:focus {
   box-shadow: none !important;
}

.action-block .a-btn i {
   color: #09343c;
   font-size: 0.938rem;
}
.action-block button {
   opacity: 1 !important;
}

/*----------------dashboard-css-start--------------*/

.bd-title {
   padding: 20px;
   display: flex;
   color: var(--color-d-blue);
   box-shadow: var(--box-sd-gray);
}

.bd-title i {
   line-height: unset !important;
}

.md-board {
   display: grid;
   /* grid-gap: 1rem; */
   grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
   margin: 20px 20px;
}

.md-board .d-board {
   /* width: 25%; */
   position: relative;
   border-radius: 8px;
   margin: 10px;
   overflow: hidden;
}

.md-board .d-board a {
   color: var(--color-white);
   padding: 25px;
   display: flex;
   justify-content: space-between;
   box-shadow: var(--box-sd-gray);
}

.md-board .d-board a:hover {
   text-decoration: none;
}
.md-board .d-board::after{
   top: -34px;
   left: 30%;
   transform: rotate(21deg);
}

.md-board .d-board::before{
   bottom: -35px;
   left: 39%;
   transform: rotate(-158deg);
}

.md-board .d-board::after,
.md-board .d-board::before{
   content: "";
   position: absolute;
   box-shadow: 0px 0px 10px #04084982;
   height: 60px;
   border: 10px solid #e0efff;
   border-bottom: solid 31px rgb(224 239 255 / 44%);
   border-right: solid 96px rgb(224 239 255 / 44%);
   border-left: solid 79px transparent;
   border-top: solid 37px transparent;
}

.up-db-header.collapsed .coll-btn i {
   transform: rotate(0deg);
   transition: 0.3s;
}

.eye-icon, .eye-icon-slash {
   position: absolute;
   margin-top: 15px !important;
   font-size: 16px !important;
   margin-left: 24px !important;
   color: white;
   cursor: grabbing;
}

.coll-btn {
   padding: 5px 10px;
   color: var(--color-off-gray);
   border-radius: 5px;
   white-space: nowrap;
   height: fit-content;
   margin: -5px 0;
}

.coll-btn i {
   margin: 2px 5px;
   font-size: 0.938rem;
   transform: rotate(180deg);
   transition: 0.3s;
}

.d-board i {
   font-size: 1.875rem;
   margin: auto 0;
   z-index: 4;
}

.d-board p {
   font-size: 2.5rem;
   margin: 0;
}

.up-db {
   box-shadow: 0px 8px 18px -6px rgb(24 39 75 / 12%), 0px 12px 42px -4px rgb(24 39 75 / 12%);
   border-radius: 8px;
   overflow: hidden;
}

.up-db h5 {
   font-size: 18px;
}

.upcoming-us-d-table {
   padding: 20px;
   /* max-height: 0;
   overflow: hidden;
   transition: max-height 0.2s ease-out; */
}

/* .accordion {

   transition: 0.4s;
 } */

.up-db-header {
   display: flex;
   justify-content: space-between;
   padding: 20px;
   box-shadow: 0px 15px 12px -15px #11111170;
   background: var(--color-l-blue);
   border-radius: 8px 8px 0 0;
}

.up-db-header:hover {
   cursor: pointer;
}

.mg-table{
   width: -webkit-fill-available !important;
   margin: 0 20px;
}

.no-data {
   width: 100%;
   padding: 45px 0;
   text-align: center;
}

.no-data p {
   color: var(--color-d-blue);
   margin: 0;
}

.pending-amount p::after {
   content: "";
   position: absolute;
   right: -2px;
   bottom: -2px;
   width: 7px;
   height: 7px;
   border: 1px solid var(--color-white);
   border-radius: 50%;
   background-color: red;
   animation: blink 1.5s infinite;
}

@keyframes blink {
   0%,
   100% {
       opacity: 0;
   }

   50% {
       opacity: 1;
   }
}

/*----------------dashboard-css-end--------------*/

/*----------------Add-New-member-css-start--------------*/

.gender-box {
   display: flex;
}

.gender {
   margin-right: 15px;
}

.gender input[type="radio"] {
   appearance: none;
}

.gender input[type="radio"] + label {
   cursor: pointer;
   position: relative;
   padding-left: 30px;
   line-height: 20px;
}

.gender input[type="radio"] + label::before {
   content: "";
   display: inline-block;
   width: 20px;
   aspect-ratio: 1;
   border: 1px solid var(--color-d-blue);
   border-radius: 50%;
   position: absolute;
   top: 50%;
   left: 0;
   transform: translateY(-50%);
   opacity: 1;
   transition: all 0.3s;
}

.gender input[type="radio"] + label::after {
   content: "";
   display: inline-block;
   width: 10px;
   aspect-ratio: 1;
   border: 1px solid var(--color-d-blue);
   background: var(--color-d-blue);
   border-radius: 50%;
   position: absolute;
   left: 5px;
   top: 50%;
   transform: translateY(-50%);
   opacity: 0;
   transition: all 0.3s;
}

.gender input[type="radio"]:checked + label::after {
   opacity: 1;
}

.data-form {
   margin-bottom: 14px;
   position: relative;
   display: -ms-inline-grid;
}

.data-form .error-msg {
   position: absolute;
   bottom: -18px;
   left: 4px;
   display: none;
   margin: 0;
   font-weight: 100;
   font-size: 0.875rem;
   color: red;
}

.data-form input {
   background-color: var(--color-transperent);
   padding: 8px 15px;
   font-size: 0.875rem;
}

.data-form input:focus {
   background-color: var(--color-transperent);
}

.data-form input::placeholder {
   font-size: 0.875rem;
   font-weight: 100;
}

.data-form label {
   color: #33356a;
}

.data-form textarea {
   padding: 15px;
   font-size: 0.875rem;
   background-color: var(--color-transperent);
}

.data-form textarea:focus {
   background-color: var(--color-transperent);
}

.data-form .custom-file .custom-file-label::after {
   line-height: unset !important;
}

.data-form .custom-file label {
   color: var(--color-gray);
   font-size: 0.875rem;
   font-weight: 100;
   line-height: 24px;
   background: var(--color-transperent);
}

.data-form .dropdown-toggle {
   background-color: var(--color-transperent) !important;
}

.ms-d-bar {
   border-radius: 8px;
   box-shadow: 0 1px 2px rgb(0 0 0 / 15%), 0 0px 10px rgb(0 0 0 / 9%);
}

.ms-d-bar .slide-switch {
   background: var(--color-l-blue);
   line-height: 0px;
   padding: 15px 20px;
   margin: 0 0 20px 0;
   border-radius: 8px 8px;
   /* margin-bottom: 30px; */
}

/*----------------Add-New-member-css-end--------------*/

/*----------------Fees-css-stsrt--------------*/

.note-bar {
   padding: 5px 0 5px 50px !important;
}

.bg-r-red .note-bar {
   background: var(--color-l-pink);
}

.bg-r-green .note-bar {
   background: #3ac97785;
}

.note-bar p {
   margin: 0;
   padding: 5px 0;
   color: var();
}

.amount-d-box {
   width: 520px;
   border-radius: 5px;
   padding: 20px 0;
   color: var();
   margin-left: 20px;
}

.bg-r-red .amount-d-box {
   background: var(--color-l-pink);
}

.bg-r-green .amount-d-box {
   background: #3ac97785;
}

.amount.us-data p {
   font-size: 1rem;
}

.accordion-toggle.collapsed .hiddenRow {
   padding: 0rem !important;
}

.user-tag {
   position: relative;
}

.user-tag::after {
   content: "";
   position: absolute;
   left: 0;
   transform: rotate(90deg);
   top: 0;
   border-bottom: 35px solid var(--color-d-blue);
   border-right: 35px solid #fec5bf00;
   border-left: 0px solid var(--color-l-pink);
}

.table-deep {
   width: 75%;
   border-bottom: 1px solid var(--color-gray);
}

.table-deep thead {
   border-bottom: 1px solid var(--color-gray);
}

.table-deep th,
.table-deep td {
   text-align: center;
}

.amount-box p:first-child {
   width: 200px;
}

.amount-box p:last-child {
   width: auto;
}

.amount-d p {
   margin: 5px 5px 5px 30px;
}

.amount-box {
   display: flex;
}

/*----------------Fees-css-end--------------*/

/*----------------Fees-card-css-start--------------*/

.us-data-card-wrapper {
   padding: 20px;
   border-radius: 5px;
   border: 1px solid #d7d8db;
   box-shadow: var(--box-sd-gray);
}

.us-data-card-wrapper:hover {
   cursor: pointer;
}

.user_dp{
   display: flex;
}

@keyframes zoom {
   0% {
       transform: scale(1, 1);
   }

   50% {
       transform: scale(1.1, 1.1);
   }

   100% {
       transform: scale(1, 1);
   }
}

.us-data-card {
   position: relative;
   display: flex;
   justify-content: flex-start;
}

.user-wrapper {
   width: 16%;
   position: relative;
}

.user-wrapper h6 {
   max-width: 100%;
   margin: 10px 0;
}

/* .ms-box-wrapper {
   width: 76%;
   display: flex;
} */

.ms-box-wrapper-history {
   width: 100%;
   max-width: 90%;
   display: flex;
}

.ms-box-deep {
   margin: 0 10px;
   box-shadow: var(--box-sd-gray);
   border-radius: 4px;
}

.ms-box-deep {
   width: 50%;
}

.ms-box-header {
   padding: 5px 10px;
   margin: 0;
   border-radius: 4px 4px 0 0;
}

.ms-box-header h6 {
   margin: 0;
   color: white;
   font-size: 0.875rem;
}

.ms-box-header p {
   margin: 0;
   font-size: 0.875rem;
   position: relative;
   color: #ededed;
   background: var(--color-d-blue);
   border-radius: 0 4px 4px 0;
   padding: 0 8px;
}

.ms-box-header p::after {
   content: "";
   position: absolute;
   left: -14px;
   top: 0;
   height: 0;
   border-bottom: 21px solid var(--color-d-blue);
   border-left: 15px solid transparent;
}

.ms-box {
   padding: 10px;
}

.dropleft .action-pluse {
   background-color: var(--color-white) !important;
   border: 1px solid rgb(233, 226, 226) !important;
   box-shadow: var(--box-sd-gray);
   border-radius: 20%;
   width: fit-content;
   margin: auto;
   margin-bottom: 10px !important;
   font-size: 14px !important;
   padding: 4px 8px !important;
}

.action-box .btn {
   background-color: var(--color-transperent) !important;
   border-radius: 40%;
}

.dropleft .action-box-wrapper {
   display: none;
}
.dropleft {
   position: relative;
   width: 100px;
}

.dropleft:hover .action-box-wrapper {
   position: absolute;
   right: 75px;
   top: 2px;
   z-index: 4;
   background-color: var(--color-white);
   display: block;
   max-width: fit-content;
   padding: 0 10px;
   border-radius: 20px;
   border: none;
   box-shadow: var(--box-sd-gray);
   backdrop-filter: blur(20px);
   background: bisque;
}

.action-box button:hover i {
   transform: scale(1.2);
   color: var(--color-sky);
}

.notes-box {
   margin-bottom: 5px;
}

.notes-box .pop-btn {
   text-align: center;
   width: 100%;
   margin: auto;
   padding: 2px 2px !important;
   background: var(--color-d-blue);
   border-radius: 6px;
   color: var(--color-white) !important;
}

@keyframes colorchange {
   0% {
       background: red;
       color: cyan;
   }

   33% {
       background: green;
       color: magenta;
   }

   66% {
       background: blue;
       color: yellow;
   }

   100% {
       background: red;
       color: cyan;
   }
}

.pop-btn:hover {
   text-decoration: none;
}

.wdp-ribbon {
   position: absolute;
   left: -4px;
   top: 6px;
   line-height: 28px;
   height: 28px;
   border-radius: 0 20px 20px 0px !important;
   padding: 0 10px;
   white-space: nowrap;
   vertical-align: baseline;
   color: var(--color-white);
}

.ribbon:before {
   display: inline-block;
   content: "";
   position: absolute;
   left: -14px;
   top: 0;
   border: 9px solid transparent;
   border-width: 14px 8px;
   border-left-color: var(--color-transperent) !important;
   left: -9px;
}

.ribbon.bg-s-red::before {
   border-color:  var(--color-s-red);
}

.ribbon.bg-d-blue::before {
   border-color:  var(--color-d-blue);
}

.ribbon.bg-green::before {
   border-color:  var(--color-green);
}

.ribbon.bg-l-orange::before {
   border-color:  #f48d34;
}

.ribbon.bg-gray::before {
   border-color:  #808080;
}

/*----------------Fees-card-css-end--------------*/

/*----------------Fees-card--ua-data-css-start--------------*/

.ua-data {
   padding: 0 !important;
}

.ua-data:hover {
   box-shadow: 0px 0px 0px 1px var(--color-d-blue);
   transition: 0.1s;
}

.ua-data .user-wrapper {
   padding: 20px 10px 0 0;
}

.uw-box {
   padding: 22px 0;
   background: var(--color-s-white);
   border-radius: 5px;
   min-height: 163px;
   border: 1px solid #d7d8db;
   position: relative;
   overflow: hidden;
   z-index: 0;
}

.uw-box::after {
   content: "";
   position: absolute;
   left: 50px;
   top: -3%;
   height: 350px;
   width: 351px;
   border: 1px solid #6fcc92;
   z-index: -1;
   box-shadow: inset 0 0 5px 5px #0408490f;
   border-radius: 50%;
   height: 350px;
   background-color: var(--color-white);
}

.ua-data .mwb-main {
   width: 100%;
   position: relative;
}

.mwb-main-wrapper {
   padding: 50px 15px 15px;
   margin: 20px 0 20px 5px;
   border-radius: 7px;
   background-color: var(--color-s-white);
   border: 1px solid #d7d8db;
   position: relative;
}

.current-fees-mwb-main-wrapper {
   padding: 10px 5px 15px !important;
}

.mwb-header .action-pluse {
   margin: 0 !important;
}

.mwb-main-deep {
   display: flex;
}

.ua-data .us-data-card {
   padding: 0 10px;
}

.ua-data .user-wrapper .tx-hidden  h6 {
   overflow: hidden;
   text-overflow: ellipsis;
   min-width: 1em;
   max-width: unset;
}

.ua-data .ms-box-header span {
   margin: 0 5px;
   padding: 0 7px;
   border-radius: 3px;
}

.ua-data .ms-box-wrapper {
   width: 100%;
   display: flex;
}

.ua-data .dropleft {
   width: auto;
}

.ua-data .action-box {
   background: transparent;
   display: flex;
}

.abw-main {
   width: 10%;
   padding: 0 10px;
}

.ua-data .action-box-wrapper {
   right: 88% !important;
}

.ua-data .action-box a {
   color: var(--color-d-blue);
}

.ua-data .bg-l-green {
   background: #3ac977b5;
}

.ua-data .bg-l-orange {
   background-color: #f48d34;
}

.ua-data .ms-box-deep {
   z-index: 1;
   background: var(--color-white);
   backdrop-filter: blur(5px);
   border: 1px solid #d7d8db;
}

.ua-data .ms-box-header h6 {
   padding: 10px;
   color: #f0f5ff;
   margin-left: -22px;
   margin-top: -16px;
   width: 50%;
   border-radius: 5px 0 0 5px;
   background-color: var(--color-d-blue);
   position: relative;
}

.ua-data .ms-box-header h6::after {
   content: "";
   position: absolute;
   right: -25px;
   top: 0;
   height: 0;
   border-top: 36px solid var(--color-d-blue);
   border-right: 25px solid transparent;
}

.mwb-header {
   background: #645df659;
   display: flex;
   border-radius: 5px 5px 0 0;
   justify-content: space-between;
}

.mwb-header h5 {
   margin: 0;
}

.ua-data-2 .mwb-main-wrapper {
   padding: 0 !important;
}

.ua-data-2 .mwb-main-deep {
   padding: 20px;
}

.mwb-header h5 {
   padding: 10px 40px 10px 10px;
   color: var(--color-white);
   box-shadow: 18px 0px 26px -16px #111;
   border-radius: 5px 10px 39px 0px;
}

/*----------------Fees-card--ua-data-css-end--------------*/

/*----------------Modal-css-start--------------*/

.modal-header {
   padding: 10px 20px !important;
   border-radius: 3px 3px 0 0 !important;
}

.modal-title {
   line-height: 20px !important;
   color: var(--color-white);
   font-size: 22px;
}

.close {
   color: var(--color-white) !important;
   opacity: 1 !important;
}

.close:focus {
   outline: none !important;
}

.content ul {
   list-style: none;
   margin: 0;
}

.content ul li {
   counter-increment: step-counter;
   margin-bottom: 8px;
}

.content ul li::before {
   content: counter(step-counter);
   margin-right: 5px;
   font-size: 80%;
   background-color: var(--color-green);
   color: var(--color-white);
   font-weight: bold;
   padding: 3px 8px;
   border-radius: 3px;
}

.content table th,
.content table td {
   padding: 6px 0;
   text-align: center;
}

.content table thead {
   border-bottom: 1px solid var(--color-x-blue);
}

.content table {
   border: 1px solid var(--color-x-blue);
   border-radius: 4px;
}

/*----------------Modal-css-end--------------*/

/*----------------update-css-start--------------*/

.update .bg-l-red {
   background: #fb1700ad !important;
}

.update .bg-l-orange {
   background-color: #f48d34;
}

.update .bg-l-green {
   background: #3ac977b5;
}

.update {
   position: relative;
}

.update .action-box a {
   color: var(--color-d-blue);
}

.update .ms-box-header {
   padding: 0;
}

.update .ms-box-header p {
   margin: auto 5px auto auto;
}

.update .ms-box-header h6 {
   padding: 10px;
   color: #f0f5ff;
   margin-left: -10px;
   margin-top: -10px;
   width: 50%;
   border-radius: 5px 0 0 5px;
   background-color: var(--color-d-blue);
   position: relative;
}

.update .ms-box-header h6::after {
   content: "";
   position: absolute;
   right: -25px;
   top: 0;
   height: 0;
   border-top: 36px solid var(--color-d-blue);
   border-right: 25px solid transparent;
}

.update .action-box {
   background: transparent;
   display: flex;
}

.update .fa-pluse {
   color: var(--color-white) !important;
}

.update .ms-box-deep {
   z-index: 1;
   background: rgb(224 239 255 / 28%);
   backdrop-filter: blur(5px);
   box-shadow: 0px 2px 14px -6px rgb(4 8 73), 0px 10px 18px -4px rgb(24 39 75 / 12%);
}

.update .ms-box-header h6.bg-s-red::after {
   border-bottom: 27px solid var(--color-s-red);
   border-right: 15px solid transparent;
}

/*----------------update-css-end--------------*/

/*----------------update-2-css-start--------------*/

.update-2 .ms-box-deep {
   box-shadow: none !important;
}

.update-2 .ms-box-header {
   padding: 0px 10px;
}

.update-2 .ms-box-header h6 {
   padding: 10px;
   color: #f0f5ff;
   width: 45%;
   border-radius: 8px;
   background-color: var(--color-d-blue);
   position: relative;
}

.update-2 .ms-box {
   border-left: 2px solid var(--color-l-blue);
   margin: 0 25px;
}

.update-2 .ms-box h6 {
   margin: 10px 0;
   position: relative;
}

.update-2 .sp-box {
   margin: 10px 0;
   position: relative;
}
/* 
.update-2 .ms-box h6::after {
  content: "";
  position: absolute;
  left: -15px;
  top: 33%;
  width: 8px;
  height: 8px;
  background-color: var(--color-d-blue);
  border-radius: 50%;
}

.update-2 .ms-box .sp-box::after {
  content: "";
  position: absolute;
  left: -15px;
  top: 33%;
  width: 8px;
  height: 8px;
  background-color: var(--color-d-blue);
  border-radius: 50%;
} */

/*----------------update-2-css-end--------------*/

/*----------------show-user-css-start--------------*/

.us-l-data {
   padding: 0 20px;
}

.user-ids {
   /* padding: 20px; */
   background: transparent;
   border-radius: 8px;
   overflow: hidden;
   margin-bottom: 20px;
   /* outline: 1px solid var(--color-t-blue); */
   box-shadow: 0 14px 28px rgb(0 0 0 / 25%), 0 10px 10px rgb(0 0 0 / 22%);
}
.pr-img {
   /* width: 50%; */
   display: flex;
   height: 200px;
   padding: 20px;
}
.user-ids-header {
   background-color: var(--color-l-blue);
   box-shadow: 0 7px 7px -4px #bfc1c3;
   /* box-shadow: 0px 15px 12px -15px #11111170; */
}
.user-ids h6 {
   /* background: #040849; */
   color: var(--color-d-blue);
   /* width: auto; */
   margin: 0 !important;
   padding: 20px;
   /* border-radius: 4px; */
}
.user-photo {
   padding: 0 10px;
}
.pm-0 p {
   margin: 0 !important;
}
.pr-img img {
   height: auto;
}
.user-photo img {
   height: auto;
}
.hf-content {
   height: fit-content;
}
.close-btn button {
   color: var(--color-white);
   border-radius: 20px;
   background: var(--color-d-blue);
   font-size: 0.75rem;
   cursor: pointer;
   padding: 5px 11px;
}
.c-card {
   border-radius: 8px !important;
   overflow: hidden;
}
.us-db:nth-child(3) .user-details-right {
   width: auto !important;
}
.us-db:nth-child(3) .user-details-left {
   width: 25% !important;
}
.us-db {
   width: 32.5%;
   padding: 10px 0;
   margin: 0 0 auto;
   border-radius: 8px;
}
.user-ids h6 {
   margin: 0 0 8px 0;
}

.user-ids h6 span {
   color: var(--color-gray);
   margin-left: 8px;
}
.user-details-left {
   width: 25%;
}

.us-db-wrapper {
   display: flex;
   justify-content: space-between;
   padding: 10px 20px;
   background: #e0efff;
   border-radius: 8px;
   overflow: hidden;
   margin-bottom: 20px;
   /* outline: 1px solid var(--color-t-blue); */
   /* box-shadow: 0 14px 28px rgb(0 0 0 / 25%), 0 10px 10px rgb(0 0 0 / 22%); */
}

.us-db .user-details {
   background: #fefefe;
   /* color: #fff; */
   /* color: var(--color-d-blue); */
   display: flex;
   margin: 18px 0px;
   border-radius: 25px;
   /* border: 1px solid #040849; */
   padding: 6px 15px;
   box-shadow: var(--box-sd-gray);
}
.no-proof {
   padding: 20px;
   height: 100%;
   margin: auto auto auto 10px;
   color: var(--color-gray);
}
.us-db .user-details h6 {
   margin: auto auto auto 0;
   border-radius: 5px;
   color: #fff;
   /* color: var(--color-d-blue); */
}

.user-details-right {
   /* padding: 5px 20px; */
   border-radius: 9px;
   display: flex;
   margin: 0 0;
   justify-content: flex-start;
   width: 45%;
}
.user-details-right p {
   margin: 0;
}

.detas {
   display: inline-block;
   overflow: hidden;
   padding-left: 8px;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.detas p {
   float: left;
}

/*----------------show-user-css-end--------------*/

/*----------------show-user-dm-one-css-start--------------*/

.dm-one {
   display: block;
   background-color: transparent;
   padding: 0;
}

.dm-one .us-data p,
.dm-one .ms-data p {
   padding: 6px 25px;
   font-size: 1rem;
}

.dm-one .sp-box {
   padding: 20px;
}

/*----------------show-user-dm-one-css-end--------------*/

/*----------------show-user-dm-two-w-g-start--------------*/

.dm-two-g .user-details::after {
   border-right: 150px solid #7edca5 !important;
}
.dm-two-g .user-details::before {
   border-left: 268px solid #3ac97799 !important;
}

.dm-two-g .user-details {
   background-color: #3ac87724 !important;
   border: 1px solid #7edca559 !important;
}

.dm-two-g .user-details-right p {
   text-shadow: none !important;
}

.dm-two-g .us-db-wrapper-deep {
   position: relative;
}

.dm-two-g .us-db-wrapper-deep {
   overflow: hidden;
}

.bubble {
   position: absolute;
   bottom: -100px;
   width: 40px;
   height: 40px;
   /* background:red; */
   border-radius: 50%;
   opacity: 0.2;
   animation: rise 10s infinite ease-in;
}
.bubble:nth-child(1) {
   width: 80px;
   height: 80px;
   left: 10%;
   animation-duration: 8s;
}
.bubble:nth-child(2) {
   width: 40px;
   height: 40px;
   left: 20%;
   animation-duration: 5s;
   animation-delay: 1s;
}
.bubble:nth-child(3) {
   width: 50px;
   height: 50px;
   left: 35%;
   animation-duration: 7s;
   animation-delay: 2s;
}
.bubble:nth-child(4) {
   width: 80px;
   height: 80px;
   left: 50%;
   animation-duration: 11s;
   animation-delay: 0s;
}
.bubble:nth-child(5) {
   width: 120px;
   height: 120px;
   left: 15%;
   animation-duration: 6s;
   animation-delay: 1s;
}
.bubble:nth-child(6) {
   width: 45px;
   height: 45px;
   left: 65%;
   animation-duration: 8s;
   animation-delay: 3s;
}
.bubble:nth-child(7) {
   width: 90px;
   height: 90px;
   left: 70%;
   animation-duration: 12s;
   animation-delay: 2s;
   animation: rise-2 12s infinite ease-in;
}
.bubble:nth-child(8) {
   width: 200px;
   height: 200px;
   right: 40%;
   animation-duration: 6s;
   animation-delay: 2s;
   animation: rise-2 10s infinite ease-in;
}
.bubble:nth-child(9) {
   width: 15px;
   height: 15px;
   left: 70%;
   animation-duration: 5s;
   animation-delay: 1s;
}
.bubble:nth-child(10) {
   width: 90px;
   height: 90px;
   left: 7%;
   animation-duration: 10s;
   animation-delay: 4s;
}
@keyframes rise {
   0% {
       bottom: -100px;
       transform: translateX(0);
   }
   50% {
       transform: translate(300px);
   }
   100% {
       bottom: 1080px;
       transform: translateX(-400px);
   }
}
@keyframes rise-2 {
   0% {
       bottom: -100px;
       transform: translateX(0);
   }
   50% {
       transform: translate(-300px);
   }
   100% {
       bottom: 1080px;
       transform: translateX(400px);
   }
}

/*----------------show-user-dm-two-w-g-end--------------*/

/*----------------show-user-dm-two-css-start--------------*/

.dm-two .user-details {
   background-color: #dda0dd45;
   box-shadow: none;
   display: block;
   padding: 20px;
   margin: 10px;
   position: relative;
   border: 1px solid #dda0dd52;
   overflow: hidden;
   z-index: 1;
   backdrop-filter: blur(10px);
   border-radius: 5px;
   transition: 0.3s;
}
.dm-two .user-details:hover::before {
   transition: 0.3s;
   border-left: 387px solid plum;
   border-bottom: 110px solid transparent;
}

.dm-two .user-details::before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   z-index: -1;
   border-right: none;
   border-top: none;
   border-left: 268px solid plum;
   border-bottom: 132px solid transparent;
}
.dm-two .user-details::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   z-index: -1;
   transform: rotate(180deg);
   border-top: none;
   border-left: none;
   border-right: 150px solid #dda0dd;
   border-bottom: 100px solid transparent;
}

.dm-two .user-details-right p {
   margin: 0 10px;
   color: var(--color-d-blue);
   text-shadow: 0px 4px 3px rgb(221 160 221), 0px 8px 13px rgb(0 0 0 / 10%), 0px 18px 23px rgb(0 0 0 / 10%);
}

.dm-two .user-details-left h6 {
   font-size: 22px;
   color: var(--color-white);
   margin: 0 !important;
   text-shadow: 0px 4px 3px rgb(0 0 0 / 40%), 0px 8px 13px rgb(0 0 0 / 10%), 0px 18px 23px rgb(0 0 0 / 10%);
}
.dm-two .user-details-left {
   width: auto;
}

.dm-two {
   display: block;
   padding: 0;
   background-color: transparent;
}

.dm-two .us-db-wrapper-deep {
   display: flex;
   justify-content: center;
}

/*----------------show-user-dm-two-css-end--------------*/

/*----------------show-user-dm-three-css-start--------------*/

.dm-three {
   display: block;
   padding: 0;
}

.dm-three.us-db-wrapper {
   background-color: transparent;
}

.dm-three .us-db-wrpper-deep {
   display: grid;
   grid-gap: 15px;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   padding: 20px;
   /* box-shadow: inset 0px 6px 11px 0px #a5a5a585; */
   /* justify-content: center; */
}

.dm-three .us-db {
   border: 1px solid #645df63d;
   width: 100%;
   padding: 0;
   background-color: var(--color-d-blue);
   /* background: #645df60d; */
   margin: 0  !important;
}

.dm-three .us-db .user-details {
   margin: 5px 0;
}

.dm-three .user-details {
   background: transparent;
   border-radius: 0;
   box-shadow: none;
}

.md-boards{
   padding: 20px;
   background-color: var(--color-d-blue);
}

.md-boards-wrapper{
   box-shadow: 0 14px 28px rgb(0 0 0 / 25%), 0 10px 10px rgb(0 0 0 / 22%);
   /* padding: 20px; */
   border-radius: 8px;
   border: 1px solid #04084933;
   overflow: hidden;
}
.md-name{
   padding: 12px 20px;
   max-width: 38ch;
}
.md-name h3{
   padding: 0 10px;
   color: #eeeff1;
   font-family: sans-serif;
   font-weight: 100;
   font-size: 24px;
   text-transform: capitalize;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.dm-sec .us-db-wrpper-deep{
   padding: 75px 20px 20px;
}

.dm-sec .u-main-box {
   padding: 15px;
   background: var(--color-d-blue);
   border-radius: 8px;
   margin-bottom: -76px;
   width: 100%;
   max-width: 450px;
}

.dm-sec .chart-box {
   padding-top: 1rem;
   background-color: #ffffff;
}

.up-db .u-main-box{
   padding: 15px;
   background: var(--color-d-blue);
   border-radius: 8px;
   display: flex;
   /* margin-bottom: -76px; */
   width: 100%;
   max-width: 450px;
}

.dm-sec .md-boards{
   background-color: transparent;
   /* border-bottom: 1px solid #04084933; */
}

.dm-sec-two .us-db-wrpper-deep{
   grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));

}

.dm-sec-two .us-db {
   border: 1px solid var(--color-x-blue);
   box-shadow: unset !important;
   border-radius: 0 !important;
}

.dm-sec-three .us-db-wrpper-deep{
   grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));

}

.dm-sec-three .content table tbody td{
   border: 1px solid #c8c9cb;
   padding: 6px !important;
   color: #040849;
   background: #e8e9eda6;
}
.dm-sec-three .content table tbody td:nth-child(2){
   text-align: left !important;
   color: #5c5c5c;
   background: transparent;

}

/*----------------show-user-dm-three-css-end--------------*/

/*----------------scrollbar-css-start--------------*/

/* ::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgb(4 8 73 / 38%);
   background-color: #fdfdfd;
}

::-webkit-scrollbar {
   width: 4px;
   height: 7px;
   background-color: #620ccf !important;
}

::-webkit-scrollbar-thumb { 
   background-color: #645df6 !important;
   border: 0px solid #040849;
} */
/* ::-webkit-scrollbar {
   display: none; 
 } */
/*----------------scrollbar-css-end--------------*/

/*----------------- Extra CSS ------------------*/

.pd-img {
   width: 100px;
   height: 100px;
   display: flex;
   margin: auto;
   justify-content: center;
   box-shadow: 0 1px 8px rgb(0 0 0 / 30%), 0 0px 6px rgb(0 0 0 / 22%);
}

.tooltip-inner {
   color: var(--color-white) !important;
   font-weight: 500;
}

.sidebar .active {
   background-color: #645df65e;
   font-size: unset;
}

.sidebar .fa-chevron-down{
   position: absolute;
   right: 15px;
   top: 12px;
   background: none !important;
}

.user-id .profile-btn {
   background-color: transparent;
   position: unset !important;
   right: unset !important;
   width: unset !important;
   padding: 0;
   color: var(--color-d-blue) !important;
}

.user-id .logout-btn i {
   color: var(--color-white) !important;
}

.user-id i {
   padding: 8px 13px;
   margin-right: 17px;
   background: var(--color-white);
   border-radius: 50%;
   line-height: unset !important;
}

/* .invalid-feedback {
   position: absolute;
   bottom: -18px;
} */

.ft-box {
   position: relative;
}

.ft-box i {
   position: absolute;
   right: 10px;
   width: 15px;
   bottom: 13px;
   z-index: 9;
   color: #5c5c5c !important;
}

.data-form i {
   position: absolute;
   right: 16px;
   bottom: 13px;
   color: #5c5c5c;
   z-index: 2;
}

/* .select2-container{
   width: 100% !important;
} */

.select2-container .select2-selection--single {
   height: auto !important;
}

.select2-container--default .select2-selection--single {
   /* background-color: transparent !important; */
   background-color: #f0f5ff !important;
   border: 1px solid #80808069 !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
   font-size: 0.875rem !important;
   color: #5c5c5c !important;
   padding: 6px 10px !important;
}

.select2-selection__arrow {
   display: none;
}

.data-form select {
   background-color: transparent;
   padding: 8px 15px;
   font-size: 0.875rem;
   appearance: none;
}

.data-form select:focus {
   background-color: transparent;
}

.data-form select::placeholder {
   font-size: 0.875rem;
   font-weight: 100;
}

.ms-d-bar .select2 {
   width: 100% !important;
}

/*----------------------------------*/
.cm-border {
   border-bottom: 1px solid #e0efff;
}

.alert-dismissible .close {
   color: inherit !important;
}

.pagination {
   justify-content: center !important;
   /* margin-right: 100px !important; */
}

.pagination .page-item.active .page-link {
   z-index: 1 !important;
   color: #e0efff !important;
   background-color: #040c54 !important;
   border-color: var(--color-d-blue) !important;
}

.page-link:hover {
   color: #e0efff !important;
   text-decoration: none !important;
   background-color: #040c54 !important;
   border-color: #040c54 !important;
}

.pagination .page-link {
   position: relative !important;
   display: block !important;
   padding: 0.5rem 0.75rem !important;
   margin-left: -1px !important;
   line-height: 1.25 !important;
   color: var(--color-d-blue) !important;
   background-color: #e0efff !important;
   border: 1px solid var(--color-d-blue) !important;
}

.selection .select2-selection--multiple {
   min-height: 40px !important;
   max-height: fit-content !important;
   border: 1px solid #ced4da !important;
   background-color: var(--color-transperent) !important;
}
.select2-container .select2-search--inline .select2-search__field{
   font-size: 0.875rem !important;
   margin-top: 9px !important;
   margin-left: 10px !important;
   font-family: unset !important;
}
/* .select2-selection--multiple {
   height: 39px !important;
   border: 1px solid #ced4da !important;
   background-color: var(--color-transperent) !important;
} */

.pay-table {
   background-color: var(--color-l-blue) !important;
   color: var(--color-d-blue) !important;
}
.pay-table tr td {
   color: var(--color-d-blue) !important;
}
.pay-table-border {
   padding: 10px !important;
   margin-bottom: 20px !important;
   border-bottom: 1px solid var(--color-d-blue) !important;
}
.product-buy-sell-img-div {
   margin: 0 !important;
   padding: 0 !important;
}
.product-buy-sell-img {
   border-radius: 0% !important;
}

.admin-badge .badge{
   font-size: 1rem;
}

/*-----------------css-for-fees-history-----------------*/

.d-tag {
   padding: 10px 15px;
   border-radius: 8px 0 0 8px;
   color: var(--color-white);
   position: relative;
}
.d-tag::after {
   content: "";
   position: absolute;
   right: -25px;
   top: 0;
   height: 0;
   border-top: 45px solid var(--color-green);
   border-right: 25px solid transparent;
}
.fh-box .up-db-header {
   padding: 0;
   background-color: var(--color-l-green);
}
.fh-box .ab-btn {
   padding: 8px 25px;
}
.fh-box .ab-btn a {
   padding: 7px 15px !important;
   letter-spacing: 0.5px;
   margin: 0 5px !important;
}
.fh-membership-wrapper {
   padding: 20px;
   display: flex;
}
.fh-membership {
   width: 50%;
   margin: 0 10px;
 
}
.fh-membership-header {
   display: flex;
}
.fh-membership-header p {
   /* background: var(--color-d-blue); */
   margin: 0 10px 0 0 !important;
   color: var(--color-white);
   padding: 2px 10px;
   border-radius: 4px;
}
.fh-membership-header h5 {
   padding: 3px;
}
.fh-membership .sp-box {
   padding: 15px 15px 5px 15px;
}

.fh-box .d-tag.bg-l-orange::after {
   border-top: 45px solid var(--color-l-orange);
}

.fh-box .d-tag.bg-s-red::after {
   border-top: 45px solid var(--color-s-red);
}

.fh-box .d-tag.bg-green::after {
   border-top: 45px solid var(--color-green);
}

.fh-box .d-tag.bg-gray::after {
   border-top: 45px solid var(--color-gray);
}

.fh-box .d-tag.bg-white::after {
   border-top: 45px solid var(--color-white);
}


.uf-header{
   justify-content: space-between;
   padding: 10px 20px 0 10px;
}

.uf-header .notes-box .pop-btn{
   text-align: center;
   width: fit-content;
   margin: auto 5px;
   padding: 1px 1px !important;
   background: transparent;
   /* border: 1px solid var(--color-d-blue); */
   border-radius: 4px;
   color: var(--color-white) !important;
}

.uf-header .notes-box .pop-btn:hover{
   cursor: pointer;
   transition: 0.1s;
   letter-spacing: 1px;
}

.uf-header h5{
   margin-top: -45px;
   margin-left: -11px;
   width: 110px;
   text-align: center;
   background: #e0efff;
   padding: 10px 10px 0;
   color: #fff;
   border: 1px solid #0408496b;
   border-bottom: none;
   position: relative;
   border-radius: 6px 6px 0 0;
}

.uf-header h5::after{
   content: "";
   position: absolute;
   left: 0;
   width: 200px;
   height: 40px;
   bottom: -15px;
   border-left: 55px solid transparent;
   border-right: 55px solid transparent;
   height: 0;
   z-index: -1;
   transform: rotate(180deg);
   width: 100%;
}

.uf-header .notes-box{
   float: right;
   position: absolute;
   right: 20px;
}

.uf-history{
   padding: 55px 0 0 70px;
   position: relative;
}

.uf-history:hover .uf-header h5::after{
   border-left: 20px solid transparent;
   border-right: 90px solid transparent;
   transition: 0.2s;
}

.uf-header .notes-box .pop-btn{
   padding: 0px 10px !important;
}

.uf-history-wrapper.sd-bar,
.uf-history-wrapper.sp-bar{
   border-left: 3px solid var(--color-d-blue);
   margin-left: 20px;
}

.uf-history-wrapper.sp-bar .uf-history::after{
   height: 50%;
    border-top: 3px solid #040849;
    background-color: #fff;
    margin-left: -1px;
}

.uf-history::after{
   content: "";
   position: absolute;
   left: -3px;
   top: 50%;
   width: 100%;
   height: 3px;
   background-color: var(--color-d-blue);
}

.uf-history::before{
   content: "";
   position: absolute;
   left: -9px;
   bottom: 46%;
   z-index: 9;
   width: 15px;
   height: 15px;
   border-radius: 50%;
   border: 2px solid var(--color-d-blue);
}

.uf-history .fh-membership-wrapper{
   width: 100%;
   padding: 20px 10px 0;
}


.uf-history-bar{
   border: 1px solid #0408496b;
   z-index: 9;
   border-radius: 0 4px 4px;
   position: relative;
   background: var(--color-white);
}

.uf-g-valid .uf-history::before{
   background: #70d79e !important;
}

.uf-g-valid .uf-header h5{
   background: #70d79e !important;
}

.uf-g-valid .uf-header h5::after{
   border-bottom: 16px solid #70d79e;
}

.uf-g-valid .fh-membership{
   background: #70d79e26 !important;
   padding: 5px;
   border-radius: 4px;
   margin-bottom: 6px;
}

.uf-g-valid .fh-membership-header p{
   background-color:#70d79e !important;
}

.uf-r-valid .uf-header h5::after{
   border-bottom: 16px solid var(--color-s-red) !important;
}

.uf-r-valid .uf-history::before{
   background: var(--color-s-red) !important;
}

.uf-r-valid .uf-header h5{
   background: var(--color-s-red);
}

.uf-r-valid .fh-membership{
   background: #e9594d14;
   padding: 5px;
   border-radius: 4px;
   margin-bottom: 6px;
}
.uf-r-valid .fh-membership-header p{
   background: var(--color-s-red);
}

.uf-o-valid .uf-header h5::after{
   border-bottom: 16px solid var(--color-orange);
}

.uf-o-valid .uf-history::before{
   background: var(--color-orange) !important;
}

.uf-o-valid .uf-header h5{
   background: var(--color-orange);
}

.uf-o-valid .fh-membership{
   background: #ffa50026;
   padding: 5px;
   border-radius: 4px;
   margin-bottom: 6px;
}

.uf-o-valid .uf-header h5::after{
   border-bottom: 16px solid var(--color-orange);
}
.uf-o-valid .fh-membership-header p{
   background: var(--color-orange);
}

.uf-expired .uf-history::before{
   background: var(--color-gray) !important;
}

.uf-expired .uf-header h5{
   background: var(--color-gray);
}

.uf-expired .uf-header h5::after{
   border-bottom: 16px solid var(--color-gray);
}

.uf-expired .fh-membership{
   background: #8080802e;
   padding: 5px;
   border-radius: 4px;
   margin-bottom: 6px;
}
.uf-expired .fh-membership-header p{
   background: var(--color-gray);
}

/*-----------------css-for-fees-history-----------------*/

.pay_type_message,
.pay_amount_message,
.personal_start_date_message {
   margin-bottom: -20px;
}

.notesDiv {
   padding-top: 20px;
}
/*-----------------fees-history-2-css-start-----------------*/

.fh-box-2 {
   width: 100%;
   display: grid;
   margin: 30px 0;
   grid-auto-rows: 410px;
   grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
   grid-gap: 1em;
}

.fh-card {
   box-shadow: 0px 8px 18px -6px rgb(24 39 75 / 12%), 0px 12px 42px -4px rgb(24 39 75 / 12%);
   border-radius: 10px;
   border: 1px solid #cdcdcd;
   transition: 0.4s;
   position: relative;
   overflow: hidden;
}

.fh-card:hover {
   box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
   font-size: 30px;
}

.fh-history-2 {
   padding: 20px;
}

.fh-history-2 p {
   margin: 10px;
}

.fh-history-2 p span {
   float: right;
   padding: 0 5px 2px 5px;
   background: #caf0da;
   border: 1px solid #3ac97754;
   color: var(--color-d-blue);
   border-radius: 3px;
}

.fh-history-2 i {
   font-size: 0.813rem;
}

.fh-data {
   padding: 10px;
   border: 1px solid #8080804f;
   border-radius: 6px;
}

.fh-data p {
   margin: 0;
   color: #686868;
}

.fh-card-header {
   display: flex;
   justify-content: space-between;
   background: var(--color-d-blue);
   padding: 5px 15px;
   margin: 25px 0 0;
}

.fh-card-header h3 {
   color: #eff1f3;
}

.fhh-btn {
   padding: 4px 0;
}

.fhh-btn a {
   margin: 0 3px;
   padding: 3px 8px;
   letter-spacing: 0.8px;
   background-color: #645df691;
   border-radius: 4px;
   color: var(--color-white);
}

.fhh-btn a:hover {
   text-decoration: none;
   box-shadow: 0px 0px 1px 1px;
   color: var(--color-white);
}

/*-----------------fees-history-2-css-end-----------------*/

.content-wrapper {
   margin-top: 30px;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(48%, 1fr));
   grid-gap: 1em;
}

.content-wrapper .content {
   padding: 10px;
   border: 1px solid #c9cad8;
   border-radius: 6px;
   overflow: auto;
}
.content-wrapper table {
   padding: 10px;
}
.content-wrapper .content-header {
   display: flex;
   justify-content: space-between;
   margin: -10px -10px 10px -10px;
   background: var(--color-d-blue);
   padding: 0 15px;
}

.fht-btn {
   display: flex;
   padding: 5px 0;
}

.fht-btn a {
   background: #3b38ab;
   padding: 2px 10px;
   border-radius: 3px;
   margin: 0 3px;
   color: var(--color-white);
}

.fht-btn a:hover {
   text-decoration: none;
   box-shadow: 0px 0px 1px 1px;
   color: var(--color-white);
}

.content-header h4 {
   margin: 0;
   color: var(--color-white);
   padding: 5px 0;
}

.content-wrapper .content table th,
.content-wrapper .content table td {
   padding: 6px 10px;
   vertical-align: baseline;
   text-align: left;
}
.content-wrapper .fh-data {
   padding: 0;
   border: none;
}
.content-wrapper .fh-data p {
   margin: 7px;
}
.content-wrapper tbody tr td:nth-child(1) {
   border-right: 1px solid #c9cad8;
}

.content-wrapper thead tr th:nth-child(1) {
   border-right: 1px solid #c9cad8;
}

.content-wrapper span {
   float: right;
   padding: 0 5px 2px 5px;
   background: #caf0da;
   border: 1px solid #3ac97754;
   color: var(--color-d-blue);
   border-radius: 3px;
}

/*-----------------fees-history-3-css-end-----------------*/

/*-----------------sell-buy-product-css-start-----------------*/

.bg-effect {
   position: relative;
   overflow: hidden;
   z-index: 0;
}
.bg-effect .total {
   width: fit-content;
   background: #645df6;
   padding: 2px 8px;
   border-radius: 4px;
   color: var(--color-white);
}
.bg-effect .total-wrapper {
   padding: 5px 0;
   border: 1px solid #645df654;
   background: #645df61f;
   border-radius: 5px;
}
.shap-r-1 {
   position: absolute;
   width: 200px;
   height: 200px;
   left: 10%;
   top: -40%;
   border-radius: 50%;
   z-index: 0;
   opacity: 0.2;
}
.shap-r-2 {
   position: absolute;
   width: 100px;
   height: 100px;
   bottom: 40px;
   right: -40px;
   border-radius: 50%;
   z-index: 0;
   opacity: 0.2;
}
.shap-r-3 {
   position: absolute;
   width: 130px;
   height: 130px;
   bottom: -57px;
   left: -11px;
   border-radius: 50%;
   z-index: 0;
   opacity: 0.2;
}
.shap-r-4 {
   position: absolute;
   width: 140px;
   height: 140px;
   bottom: -15px;
   left: 40%;
   border-radius: 50%;
   z-index: 0;
   opacity: 0.2;
}

.shaps-box .shap-r-1 {
   position: absolute;
   width: 180px;
   height: 180px;
   left: -12%;
   background-color: transparent;
   border: 30px solid #e0efff59;
   top: -17%;
   border-radius: 50%;
   z-index: 0;
   opacity: 0.2;
}

.shaps-box .shap-r-2{
   position: absolute;
   width: 200px;
   height: 200px;
   bottom: -24%;
   right: -40px;
   border-radius: unset;
   border: 40px solid #e0efff59;
   background-color: transparent;
   z-index: 0;
   opacity: 0.2; 
}

.shaps-box-2 {
   /* background-image: url(../img/bg-box.jpg); */
   background-size: cover;
   background-repeat: no-repeat;
}

.shaps-box-2 .us-db{
   background: rgba( 255, 255, 255, 0.25 );
   box-shadow: 0 2px 13px 0 rgb(195 195 195);
   backdrop-filter: blur( 6px );
}



.us-d-box .us-d-box-details{
   padding: 20px 20px 0 20px;
  
}
.us-d-box .us-d-box-details h2{
   display: flex;
   padding: 20px;
   /* background: rgba( 255, 255, 255, 0.25 ); */
   box-shadow: 0 12px 56px 0 rgb(31 38 135 / 37%);
   backdrop-filter: blur( 6px );
   width: fit-content;
   color: #fff;
   border-radius: 0px 40px 40px 0px;
   outline: 1px solid #04084930;
   text-transform: uppercase;
}

.sb-text .us-db .user-details h6{
   color: var(--color-d-blue);
}

.sb-text .user-details-right p{
   color: var(--color-d-blue);
}
.shap-box-wrapper .us-db{
   background: rgb(4 8 73 / 45%);
   /* border: 1px solid #6b68cb; */
   outline: 1px solid #4b4ec6;
   /* box-shadow: 0 12px 56px 0 rgb(31 38 135 / 37%); */
   backdrop-filter: blur( 6px );
}

.shap-box-wrapper .user-details h6{
   color: #27f724;
}

.shap-box-3{

   grid-template-columns: repeat(auto-fit, minmax(600px, 1fr)) !important;
   /* margin: 30px 0; */
}



.shap-box-wrapper{
   /* background-image: url(../img/bg-box-2.svg); */
   background: linear-gradient(rgb(100 93 246 / 71%), rgb(4 8 73 / 70%)), url(../img/bg-box-2.svg);
   background-size: cover;
}
.pd-table {
   padding: 6px 10px;
   border-radius: 6px;
   color: var(--color-d-blue);
   background: #ecebfe;
   border: 1px solid #645df6;
}

.pd-div {
   width: 40% ;
   display: flex;
   /* background: #e0efff; */
   padding: 20px;
   border: 1px solid #645df6;
   box-shadow: 0 0px 1px rgb(0 0 0 / 25%), 0 2px 10px rgb(0 0 0 / 22%);
   /* box-shadow: 0 14px 28px rgb(0 0 0 / 25%), 0 10px 10px rgb(100 93 246); */
   border-radius: 10px;
   margin-bottom: 40px;
}

.cp-box {
   border-radius: 5px 5px 0 0;
   padding: 0 20px 20px;
}

.cp-box h5 {
   background-color: var(--color-d-blue);
   padding: 15px;
   width: fit-content;
   border-radius: 6px 6px 0 0;
   color: var(--color-white);
}

.cp-box .table {
   width: auto !important;
   margin: 11px;
   outline: 1px solid #645df6;
   outline-offset: 10px;
   /* border-radius: 0 0px 6px 6px;*/
}

.cp-box .table thead {
   background: #645df6;

   border-radius: 5px;
}
.cp-box table th,
.cp-box table td {
   text-align: center !important;
}

.pd-div .pd-table {
   width: 100%;
   z-index: 2;
   margin: 0 0 auto 10px;
}

.pd-div .product-buy-sell-img-div {
   z-index: 2;
}

.pd-details-wrapper {
   display: flex;
}
.pd-details-l {
   width: 40%;
   padding: 3px;
}
.pd-details-r {

   width: 50%;
   padding: 3px;
   padding-left: 10px;
   text-align: left;
}

/*-----------------sell-buy-product-css-end-----------------*/

/*-----------------report-chart-css-start-----------------*/

.chart-lable-wrapper{
   padding: 6px 10px;
   border-radius: 6px;
   color: var(--color-d-blue);
   background: #ecebfe;
}

.chart-lable-wrapper{
   height: fit-content;
}

.chart-lable-wrapper div{
   list-style: none;
   padding: 8px;
   display: flex;
}

.chart-lable-wrapper div h6{
   margin: 0;
   width: 100%;
}

.chart-lable-wrapper div{
   padding: 10px;
   /* background: #ecebfe; */
   border-radius: 4px;
}

.chart-lable-wrapper div span{
   background: #007bff;
   padding: 0 7px;
   float: right;
   border-radius: 3px;
   color: var(--color-white);
}

.re-chart{
   display: flex;
}

.membership-chart {
   display: block;
}

.re-chart .chart-wrapper{
   width: 75%;
   margin-right: 50px;
   height: 300px;
}

.re-chart .membership-chart-wrapper {
   width: 100%;
   margin-right: 50px;
   height: 300px;
}

.re-chart .chart-lable-wrapper{
   width: 25%;
}

.re-chart #membership_data {
   width: 100%;
}


/*-----------------report-chart-css-end-----------------*/


/*-----------------remove-record-modal-css-start-----------------*/

.modal-backdrop{
   z-index: 0 !important;
}

.modal{
   background-color: #00000085 !important;
}

.swal-modal{
   border: 1px solid rgba(255,255,255,0.1);
   border-radius: 15px;
   padding: 32px;
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(13px);
}

.swal-title{
   color: black;
}

.swal-text{
   color: var(--color-d-blue);
   background: wheat;
   padding: 10px 30px;
   border-radius: 25px;
}

.swal-button--cancel {
   color: #fff;
   padding: 5px 20px;
   background-color: #02052c3b;
   font-size: 18px;
}

.swal-button--danger {
   padding: 5px 20px;
   background-color: #e64942;
   font-size: 18px;
}



/*-----------------remove-record=modal-css-end-----------------*/

.invalid-margin {
   margin-bottom: -20px !important;
}

.popover-body {
   font-weight: bolder;
   font-family: 'Times New Roman', Times, serif;
}

.accordion .panel-heading:after {
   font-family: 'FontAwesome';
   font-weight: bold;
   content: "\f077";
   float: right;
   background-color: var(--color-r-blue);
   color: #fff;
   padding-left: 6px;
   padding-right: 6px;
   border-radius: 20%;
}
.accordion .panel-heading.collapsed:after {
   content: "\f078"; 
}

.sidebar_scrollable {
   margin-bottom: 68px;
}

.shift_members_data_scrollable {
   max-height: 600px;
   overflow-y: auto;
}

.calender_table tbody tr td {
   word-break: normal;
}

.member_navbar {
   background-color: var(--color-d-blue);
}

.member_navbar .navbar-nav .nav-item {
   padding: 10px 0 !important;
}

.memberNavbar-overlay {
   height: 100%;
   width: 0%;
   position: fixed;
   z-index: 3;
   top: 0;
   left: 0;
   background-color: rgba(21, 15, 39, 96%);
   overflow-x: hidden;
   transition: 0.2s;
}
 
.memberNavbar-overlay-content {
   position: relative;
   top: 10%;
   width: 100%;
   text-align: center;
}

.memberNavbar-overlay a {
   padding: 8px;
   text-decoration: none;
   font-size: 20px;
   display: block;
}

.memberNavbar-overlay a:hover, .memberNavbar-overlay a:focus, .memberNavbar-overlay a.active {
   text-decoration: none;
   color: #007bff;
}

.memberNavbar-overlay .closebtn {
   font-size: 40px;
   top: 15px;
   right: 35px;
}

.text-dark-blue {
   color: var(--color-d-blue);
}

.card-gray {
   background-color: var(--color-r-gray) !important;
}

.card-red {
   background-color: var(--color-s-red) !important;
}

.card-orange {
   background-color: var(--color-orange) !important;
}

.card-green {
   background-color: var(--color-green) !important;
}

.notification_icon {
   position: relative;
   display: inline-block;
   border-radius: 50%;
   font-size: 10px;
   height: 20px;
   background: none !important;
}

.notification-count {
   position: absolute;
   top: -3px;
   right: -5px;
   background: red;
   color: white;
   font-size: 10px;
   font-weight: bold;
   border-radius: 50%;
   padding: 2px 7px;
}

.notification_menu {
   top: 10px !important;
   right: 0 !important;
   left: auto !important;
   padding: 0 0 !important;
   width: 21rem !important;
   height: 20rem !important;
   min-width: 15rem;
   overflow-y: auto;
   z-index: 1050;
}

.dropdown-menu .dropdown-notifications-header {
   background-color: #0061f2;
   color: #fff !important;
   padding-top: 1rem;
   padding-bottom: 1rem;
   padding-left: 0.5rem;
   line-height: 1;
   font-size: 0.9rem;
   font-weight: 700;
   display: flex;
   align-items: center;
}

.notification_menu .dropdown-item {
   display: block;
   width: 100%;
   padding: 0.25rem 1rem;
   clear: both;
   font-weight: 400;
   color: #212832;
   text-align: inherit;
   white-space: nowrap;
   background-color: transparent;
   border: 0;
   padding-top: 1rem;
   padding-bottom: 1rem;
   border-bottom: 1px solid #e0e5ec;
}

.dropdown-notifications-item .dropdown-notifications-item-content .dropdown-notifications-item-content-details {
   color: #a7aeb8;
   font-size: 0.7rem;
}

.dropdown-notifications-item .dropdown-notifications-item-content .dropdown-notifications-item-content-text {
   font-size: 0.9rem;
   max-width: calc(100vw - 8.5rem);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.dropdown-menu .dropdown-notifications-footer {
   justify-content: center;
   font-size: 0.8rem;
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
   color: #a7aeb8;
   cursor: pointer;
}

.dropdown-menu .dropdown-notifications-footer:active {
   color: #fff;
}