@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
    
    * {
      font-family: "Poppins", sans-serif;
    }

li.services_container {
	display: flex;
    flex-direction: column;
    justify-content: space-between;
}
    body{
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background: #80808038;
}
::selection{
  color:var(--white-color);
  background: var(--black-color);
}

/* bootstrap things  */


.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: -10px; 
}

.col-md-12, .col-md-6 {
  box-sizing: border-box;
  padding: 10px; 
}

.col-md-12 {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0;
}

.col-md-6 {
  flex: 0 0 50%;
  max-width: 50%;
}


/* end of bootstrap things */


.sidebar{
  position: absolute;
  top: 0px;
  left: -12px;
  width:78px;
  background: white;
  padding:6px 14px;
  z-index:99;
  transition:all 0.5s ease;
  right: 0;
  height: 1000px;
}
.sidebar.active{
  width: 200px;
}
.sidebar .logo_content .logo{
  color:var(--white-color);
  display: flex;
  height:50px;
  width:100%;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition:all 0.5s ease;
}
.sidebar.active .logo_content .logo{
  opacity:1;
  pointer-events: none;
}
.logo_content .logo .logo_name{
  font-size: 20px;
  font-weight: 400;
}
.sidebar #btn{
  position:absolute;
  color:var(--white-color);
  top:6px;
  left:50%;
  font-size: 22px;
  height: 30px;
  width:50px;
  text-align: center;
  line-height: 50px;
  transform: translateX(-50%);
  cursor: pointer;
}
.sidebar.active #btn{
  left:90%;
}
.sidebar ul{
  margin-top: 75px;
  padding: 0 0 0 20px;
}
.sidebar ul li{
  position:relative;
  height: 60px;
  width:100%;
  margin: 14px 0px;
  list-style: none;
  line-height: 50px;
}
.sidebar ul li .tooltip{
  position:absolute;
  left: 135px;
  top:0;
  transform: translate(-30%, -70%);
  border-radius: 6px;
  height:35px;
  width: max-content;
  background: var(--white-color);
  line-height: 35px;
  text-align: center;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  transition:0s;
  opacity:0;
  pointer-events: none;
  display:block;
  padding: 0 10px 0 10px;
}
.sidebar ul li .tooltip::before{
  content:'';
  width:0;
  height:0;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  border-right:10px solid var(--white-color);
  position:absolute;
  left:-8px;
  top:7px;
}
.sidebar.active ul li .tooltip{
  display:none;
}
.sidebar ul li:hover .tooltip{
  transition:all 0.5s ease;
  opacity:1;
  top:50%;
}
.sidebar ul li input{
  position:absolute;
  height:100%;
  width:100%;
  left:0;
  top:0;
  border-radius: 12px;
  outline:none;
  border:none;
  background: #1d1b31;
  padding-left:50px;
  font-size: 18px;
  color:var(--white-color);
}
.sidebar ul li .bx-search{
  position:relative;
  z-index: 99;
  color:var(--white-color);
  font-size: 22px;
  transition:all 0.5s ease;
}
.sidebar ul li .bx-search:hover{
  background:var(--white-color);
  color:#1d1b31;
}
.sidebar ul li a{
  color:var(--white-color);
  display:flex;
  align-items:center;
  text-decoration: none;
  border-radius: 12px;
  white-space: nowrap;
  transition:all 0.4s ease;
}

.sidebar ul li i{
  font-size: 18px;
  font-weight: 400;
  height:50px;
  min-width: 50px;
  border-radius: 12px;
  line-height: 50px;
  text-align: center;
}
.sidebar .links_name{
  font-size: 15px;
  font-weight: 600;
  opacity:0;
  pointer-events: none;
  transition:all 0.3s ease;
  text-transform: capitalize;
}
.sidebar.active .links_name{
  transition:0s;
  opacity:1;
  pointer-events: auto;
  color: black;
}
.sidebar .content{
  position:absolute;
  color:var(--white-color);
  bottom:0;
  left:0;
  width:100%;
}
.sidebar .content .user{
  position:relative;
  padding:10px 6px;
  height:60px;
  background: none;
  transition:all 0.4s ease;
}
.sidebar.active .content .user{
  background:var(--light-black);
}
.content .user .user_details{
  display:flex;
  align-items:center;
  opacity:0;
  pointer-events: none;
  white-space: nowrap;
  transition:all 0.4s ease;
}
.sidebar.active .user .user_details{
  opacity:1;
  pointer-events: auto;
}
.content .user .user_details img{
  height:45px;
  width:45px;
  object-fit: cover;
  border-radius: 12px;
}
.name_job{
  margin-left:10px;
}
 .user_details .name{
  font-size: 15px;
  font-weight: 400;
}
 .user_details .job{
  font-size: 12px; 
}
 #log_out{
  position:absolute;
  bottom:5px;
  left:50%;
  transform:translateX(-50%);
  min-width: 50px;
  line-height: 50px;
  font-size: 20px;
  border-radius: 12px;
  text-align: center;
  transition:all 0.4s ease;
}
.sidebar.active .user #log_out{
  left:80%;
  background:none;
}
.home_content{
/*  position:absolute;*/
  width: 100% !important;
  
  right: unset;
  background:var(--sky-color);
  padding: 0px;
/*  box-shadow: 0 5px 10px rgba(0,0,0,0.2);*/
  transition:all 0.5s ease;
  height: auto;
  left: 0 !important;
}
.sidebar.active ~ .home_content{
  z-index:100;
}        
.sidebar.active ul.nav_list li a {
  flex-direction: row-reverse;
  gap: 16px;
  transition: 1s ease;
}
.sidebar ul li a:hover img {
  /* filter: invert(1); */
}
.header .main_upper_header {
  background: #01051D;
  padding: 10px 20px;
}

.header .main_upper_header ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header .main_upper_header ul li button.btn.main_header_btn {
  border-radius: 10px;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  border: none;
  padding: 2px 10px 2px 5px;
}

.home_content.active {
/*  width: calc(100% - 200px);*/
/*  left: 200px;*/
}

.sidebar.active ul.nav_list li a {
  display: flex;
  flex-direction: row;
  transition: 1s ease;
}
.sidebar ul li a img {
  width: 20px;
  height: 20px;
}
.main_upper_header {
  display: none;
}

   section.all-locations {
    padding: 60px 0;
}

.main-locations-list h3 {
    font-size: 39px;
    font-family: sans-serif;
    font-weight: 700;
}

.main-locations-list .all-location-box {
    background: white;
    padding: 20px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.main-locations-list .all-location-box .first-card-box {
    border-radius: 20px;
    border: 3px solid black;
    /* padding: 20px; */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 330px;
	flex-direction: column;
}

.main-locations-list .all-location-box .first-card-box .upper-first-box {
    flex: 0 0 100%;
	width: 100%;
    display: flex;
    justify-content: end;
    background: black;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    padding: 5px 0;
}

.main-locations-list .all-location-box .first-card-box .upper-first-box button.review-btn {
    background: blue;
    border: none;
    color: white;
    width: 70px;
    padding: 6px 0;
    border-radius: 20px;
    font-size: 11px;
}

a.review-btn {
    background: blue;
    border: none;
    color: white;
    width: 70px;
    padding: 6px 0;
    border-radius: 20px;
    font-size: 11px;
    text-align: center;
    text-decoration: none !important;
}

.main-locations-list .all-location-box .first-card-box .icon img {
    width: 30px;
    height: 30px;
}

.main-locations-list .all-location-box .first-card-box .icon {
    border: 2px solid black;
    border-radius: 50%;
    height: 60px;
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 0 20px;
}

.main-locations-list .all-location-box .first-card-box .icon-content {
    margin: 20px 0 20px 20px;
}

.main-locations-list .all-location-box .first-card-box .icon-content h4 {
    margin: 0 0 0;
    font-size: 21px;
}

.main-locations-list .all-location-box .first-card-box .icon-content p {
    margin: 7px 0 10px 0;
}

.main-locations-list .all-location-box .second-card-box {
    display: flex;
    flex-wrap: wrap;
    padding: 0 30px 0 30px;
}

.main-locations-list .all-location-box .second-card-box .second-fist-outer {
    gap: 40px;
}

.main-locations-list .all-location-box .second-card-box .second-fist-outer {
    display: flex;
    align-items: center;
}

.main-locations-list .all-location-box .second-card-box .second-fist-outer .starss {
    display: flex;
    gap: 5px;
}

.main-locations-list .all-location-box .second-card-box .second-fist-outer .starss span.color {
    color: #ffb600;
    font-size: 28px;
}

.main-locations-list .all-location-box .second-card-box .second-fist-outer .starss span {
    color: gray;
    font-size: 28px;
}


.main-locations-list .all-location-box .second-card-box .second-fist-outer .see-all button {
    background: lightblue;
    border: 0;
    width: 109px;
    padding: 7px 0;
    border-radius: 20px;
    font-size: 15px;
}

.main-locations-list .all-location-box .second-card-box p {
    width: 610px;
    font-size: 18px;
}


.main-locations-list .all-location-box .third-card-box button.see.provider {
    background: transparent;
    width: 210px;
    padding: 10px 0;
    border-radius: 20px;
    font-size: 18px;
    margin: 10px 0 0 0;
}

    input::-moz-selection { /* Code for Firefox */
      color: white;
      background: blue;
    }

    input::selection {
      color: white;
      background: blue;
    }
    /* Home Page css file  */

    input[type="submit"] {
      width: 100%;
      background-color: black;
      border: 1px solid black;
      color: white;
    }

    input[type="submit"]:hover {
      width: 100%;
      background-color: white;
      border: 1px solid black;
      color: black;
    }

    .popup-content .popop_body form .pop_field {
      display: flex;
      flex-direction: column;
      width: 100%;
      padding: 0;
      margin: 0;
    }

    .popup-content .popop_body form .pop_field input,.popup-content .popop_body form .pop_field select {
      width: 100%;
      border: 1px solid black;
      height: 44px;
      padding: 0 0 0 10px;
      border-radius: 10px;
      font-size: 17px;
    }

    .popup-content .popop_body form .pop_field label {
      font-size: 19px;
      margin: 0 0 5px 0;
    }
    .popup-content .popop_body form .pop_field.new-radio {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }

    .popup-content .popop_body form .pop_field.new-radio h3 {
      flex: 0 0 100%;
      padding: 0 0 0 20px;
      font-size: 21px;
      font-weight: 500;
    }
    .popup-content .popop_body form .pop_field.new-radio .radio {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;
      text-align: start;
      margin: 0 40px 0 0px;
    }

    .popup-content .popop_body form .pop_field.new-radio .radio input {
      width: auto;
      margin: 0 0 0 20px;
    }

    section.sec_1 .main_dashbord_sec_1 ul {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      list-style: none;
    }

    section.sec_1 .main_dashbord_sec_1 ul li {
      border-radius: 20px;
      flex: 0 0 21.33%;
      margin: 10px 0 0 46px;
      padding: 20px 10px 20px 10px;
      height: auto;
    }

    section.sec_1 .main_dashbord_sec_1 ul li .dashbord_content h3 {
      color: black;
      font-size: 20px;
      font-weight: 800;
      margin: 1px 0 3px 0;
    }

    section.sec_1 .main_dashbord_sec_1 ul li .dashbord_content p {
      font-size: 17px;
      text-transform: capitalize;
      font-weight: 500;
    }

    section.sec_1 .main_dashbord_sec_1 ul li:nth-child(1) {
      background: #F9F8C7;
    }

    section.sec_1 .main_dashbord_sec_1 ul li:nth-child(2) {
      background: #0B5D8B;
    }

    section.sec_1 .main_dashbord_sec_1 ul li:nth-child(3) {
      background: #63BCB7;
    }

    section.sec_1 .main_dashbord_sec_1 ul li:nth-child(4) {
      background: #67686d;
    }

    section.sec_1 .main_dashbord_sec_1 ul li .icon_img img {
      filter: invert(1);
    }

    section.sec_1 {
      padding: 0px 0;
    }


    section.sec_2 .top_cruse {
      padding: 30px 10px 20px 10px;
      background: #F1F1F1;
      border-radius: 20px;
    }

    section.sec_2 .top_cruse h2 {
      font-size: 35px;
      text-align: center;
      text-transform: capitalize;
      font-weight: 700;
      margin: 0 0 20px 0;
    }

    section.sec_2 .top_cruse ul {
      display: flex;
      justify-content: start;
      align-items: center;
      list-style: none;
      margin: 20px 0 20px 0;
    }

    section.sec_2 .top_cruse ul li {
      flex: 0 0 20%;
      background: #63BCB7;
      margin: 0 0 0 20px;
      padding: 15px 0 15px 0;
      border-radius: 20px;
      text-align: center;
    }

    section.sec_2 .top_cruse ul li h4 {
      font-size: 18px;
      font-weight: 500;
      margin: 10px 0 10px 0;
    }

    section.sec_2 .top_cruse ul li p {
      margin: 0 0 10px 0;
    }

    section.sec_2 .leading_donor {
      margin: 20px 0 0 0;
      background: #01051D;
      border-radius: 20px;
      padding: 20px 0 20px 0;
    }

    section.sec_2 .leading_donor h2 {
      font-size: 35px;
      text-align: center;
      text-transform: capitalize;
      font-weight: 700;
      margin: 0 0 20px 0;
      color: white;
    }

    section.sec_2 .leading_donor ul {
      display: flex;
      align-items: center;
      list-style: none;
      flex-wrap: wrap;
      justify-content: center;
    }

    section.sec_2 .leading_donor ul li {
      flex: 0 0 45%;
      display: flex;
      justify-content: space-between;
      margin: 0 0 20px 20px;
      background: white;
      border-radius: 20px;
      padding: 15px 20px 15px 20px;
    }


    .current_collection section.sec_2 {
      background: white;
    }

    section.sec_2 .current_collection {
      background: white;
      padding: 34px 20px 34px 20px;
      border-radius: 20px;
    }

    section.sec_2 .current_collection h2 {
      font-size: 35px;
      text-align: center;
      text-transform: capitalize;
      font-weight: 700;
      margin: 0 0 40px 0;
    }

    section.sec_2 .current_collection ul {
      display: flex;
      flex-wrap: wrap;
      list-style: none;
    }

    section.sec_2 .current_collection ul li {
      flex: 0 0 100%;
      display: flex;
      justify-content: space-between;
      background: #F2F2F2;
      padding: 23px 5px 23px 8px;
      border-radius: 20px;
      margin: 0 0 15px 0;
      align-items: center;
    }

    section.sec_2 .current_collection ul li:last-child {
      background: #01051D;
      color: white;
    }

    section.sec_2 .current_collection ul li span h3 {
      font-size: 20px;
    }

    section.sec_2 .current_collection ul li span p {
      font-size: 18px;
      text-transform: capitalize;
    }

    .recent_expense h2 {
      font-size: 35px;
      text-align: center;
      text-transform: capitalize;
      font-weight: 700;
      margin: 0px 0 20px 0;
    }

    section.sec_3 .recent_expense {
      background: white;
      border-radius: 20px;
      padding: 20px 10px 20px 10px;
    }

    section.sec_3 .recent_expense ul {
      display: flex;
      list-style: none;
      flex-wrap: wrap;
    }

    section.sec_3 .recent_expense ul li {
      flex: 0 0 48%;
      background: #F2F2F2;
      border-radius: 20px;
      margin: 0 0 20px 10px;
      display: flex;
      justify-content: space-between;
      padding: 15px 10px 15px 20px;
    }



    /* end of home page file  */




    /* start of managing-guys page  */


    .row.first_sec {
      background: #01051D;
      border-radius: 25px;
    }

    .guys_management1 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding: 15px 20px;
    }

    .guys_management1 button.btn.btn_add_new_guy {
      background: #F9F8C7;
      border-radius: 20px;
      padding: 12px 20px 12px 20px;
      font-size: 18px;
      font-weight: 700;
      border: none;
    }

    .guys_management1 form.search-box {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .guys_management1 form.search-box button img {
      width: 24px;
      height: 24px;
      margin: 0 0px 0 0;
      position: relative;
      left: 19px;
    }


    .guys_management1 form.search-box input#search-input, .guys_management1 form.search-box input#service-search-input {
      background: transparent;
      border: none;
      border-bottom: 2px solid white;
      padding: 0px 20px 0 30px;
      font-size: 22px;
      color: white;
    }

    .guys_managemen2 {
      display: flex;
      justify-content: end;
      align-items: center;
    }

    .guys_managemen2 button.btn.btn_add_new_guy {
      display: flex;
      align-items: center;
      background: white;
      border-radius: 20px;
      padding: 8px 20px 8px 20px;
      font-size: 18px;
      font-weight: 700;
      border: none;
      margin: 0 0 0 20px;
    }

    .guys_managemen2 button.btn.btn_add_new_guy img {
      padding: 0 10px 0 0px;
    }

    .details_list table tbody tr {
      background: white;
      display: flex;
      align-items: center;
      padding: 15px 5px 15px 5px;
      border-radius: 30px;
      width: 100%;
      justify-content: space-around;
      margin: 0 0 11px 0;
      flex-wrap: wrap;
      flex-direction: row;
    }

    .details_list table tbody tr th {
      font-size: 13px;
      margin: 0 0 0 8px;
      font-weight: 400;
    }

    .details_list table tbody tr th b {
      font-size: 13px;
    }

    .details_list table tbody tr th button.btn.btn_full_details {
      background: #F9F8C7;
      border-radius: 20px;
      padding: 12px 20px 12px 20px;
      font-size: 18px;
      font-weight: 700;
      border: none;
    }


    .details_list table {
      width: 100%;
      text-align: center;
    }


    /* popop css  */

    .popup {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      overflow-y: auto;
      z-index: 999;
    }

    .popup-content {
      position: absolute;
      top: 25%;
      left: 0;
      background-color: #fff;
      padding: 20px;
      border-radius: 15px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      right: 0;
      max-width: 850px;
      width: 100%;
      margin: 0 auto;
      height: auto;
    }

    .close {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 27px;
      cursor: pointer;
      font-weight: 600;
    }

    .popup-content .popop_body {
      padding: 50px 20px 10px 20px;
    }

    .popup-content .popop_body h2 {
      color: #01051D;
      text-transform: capitalize;
      margin: 0 0 40px 0;
      text-align: start;
    }

    .popup-content .popop_body form input {
      border: none;
      border-bottom: 1px solid black;
      width: 100%;
      text-align: start;
      padding: 14px 11px 16px 0px;
      display: flex;
      justify-content: start;
      font-size: 16px;
      font-weight: 600;
      color: gray;
    }

    .popup-content .popop_body form input.submit_btn {
      border: none;
      background: #01051D;
      color: white;
      padding: 15px 15px 15px 15px;
      border-radius: 20px;
      width: auto;
    }


    input:focus-visible {
      outline: none;
    }

    .submit_btn {
      display: flex;
      justify-content: start;
      margin: 10px 0 10px 0;
    }



    /* popop end hoghay hai  */


    /* managing guys details page  */


    /* graph css */
    .animate {
      animation: p 1s .5s both;
    }

    .pie:before,
    .pie:after {
      content: "";
      position: absolute;
      border-radius: 50%;
    }

    .pie:before {
      inset: 0;
      background:
        radial-gradient(farthest-side, var(--c) 98%, #0000) top/var(--b) var(--b) no-repeat,
        conic-gradient(var(--c) calc(var(--p)*1%), #0000 0);
      -webkit-mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));
      mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));
    }

    .pie:after {
      inset: calc(50% - var(--b)/2);
      background: var(--c);
      transform: rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
    }

    .pie {
      --p: 20;
      --b: 22px;
      --c: darkred;
      --w: 150px;

      width: var(--w);
      aspect-ratio: 1;
      position: relative;
      display: inline-grid;
      margin: 5px;
      place-content: center;
      font-size: 25px;
      font-weight: bold;
      font-family: sans-serif;
    }

    .no-round:before {
      background-size: 0 0, auto;
    }

    .no-round:after {
      content: none;
    }

    /* end of graph css  */





    section.guys_details {
      padding: 22px;
      background: #EFEFEF;
      margin: 25px;
      border-radius: 10px;
    }

    section.guys_details .recent_contri .contributions_inner h2 {
      font-size: 30px;
      text-transform: capitalize;
      margin: 10px 0 15px 0;
    }

    section.guys_details .recent_contri .contributions_inner ul {
      display: flex;
      flex-wrap: wrap;
      margin: 0 0 30px 0;
      list-style: none;
    }

    section.guys_details .recent_contri .contributions_inner ul li {
      flex: 0 0 26.33%;
      margin: 0 10px 10px 20px;
      background: #F9F8C7;
      padding: 30px 0 30px 0px;
      text-align: center;
      border-radius: 20px;
      display: block;
    }

    section.guys_details .recent_contri .contributions_inner ul li h3 {
      font-size: 19px;
      margin: 0 0 11px 0;
    }

    section.guys_details .recent_contri .contributions_inner {
      background: #F8F8F8;
      border-radius: 30px;
      padding: 20px 20px 0px 20px;
    }

    .recent_contri ul {
      display: flex;
      align-items: center;
      list-style: none;
      flex-wrap: wrap;
    }

    .recent_contri ul li {
      flex: 0 0 100%;
      display: flex;
      align-items: center;
      background: white;
      border-radius: 20px;
      padding: 10px 10px 10px 10px;
      margin: 0 0 10px 0;
    }

    section.guys_details .complete_details .first_inner h2 {
      font-size: 30px;
      margin: 0px 0 20px 0;
      text-transform: capitalize;
    }

    section.guys_details .complete_details .first_inner ul {
      display: flex;
      flex-direction: column;
      list-style: none;
      padding: 12px;
    }

    section.guys_details .complete_details .first_inner ul li p b {
      margin: 0 10px 0 0px;
    }

    section.guys_details .complete_details .first_inner ul li {
      margin: 10px 0 10px 0;
    }

    section.guys_details .complete_details .first_inner {
      background: white;
      padding: 30px 10px 15px 10px;
      border-radius: 20px;
      margin: 0 0 20px 0;
    }

    section.guys_details .complete_details .second_inner {
      background: #BC9B63;
      border-radius: 20px;
      padding: 20px 10px 10px 30px;
    }

    section.guys_details .complete_details .second_inner h2 {
      font-size: 30px;
      margin: 0 0 30px 0;
    }

    section.guys_details .complete_details .second_inner ul {
      display: flex;
      list-style: none;
      align-items: center;
      justify-content: space-between;
    }

    section.guys_details .complete_details .second_inner ul li h2 {
      margin: 0 0 11px 0;
    }



    /* other popop css */

    .popup-content .popop_body button img {
      filter: invert(1);
    }

    .popup-content .popop_body .search_box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-direction: row-reverse;
    }

    .popup-content .popop_body .search_box input#search-input, .popup-content .popop_body .search_box input#service-search-input {
      width: 100% !important;
      padding: 10px 0 20px 20px;
    }


    .popup-content .popop_body .search_box .search-input {
      width: 100%;
      margin: 0px 0 -10px 0;
    }

    .popup-content .popop_body .search_box .search-input label {
      font-size: 22px;
      font-weight: 600;
    }


    /* other popop css end  */


    /* donar detail page css start  */

    section.donar_details {
      background: #EFEFEF;
      margin: 22px;
      border-radius: 20px;
      padding: 22px;
    }

    section.donar_details .donar_recent_contri {
      background: #F8F8F8;
      padding: 12px 10px 10px 10px;
      border-radius: 20px;
    }

    section.donar_details .donar_recent_contri h2 {
      font-size: 30px;
      text-transform: capitalize;
      margin: 10px 0 30px 0;
    }

    section.donar_details .donar_recent_contri ul {
      display: flex;
      flex-wrap: wrap;
      list-style: none;
    }

    section.donar_details .donar_recent_contri ul li {
      flex: 0 0 100%;
      display: flex;
      justify-content: space-between;
      margin: 0 0 20px 0;
      background: #F9F8C7;
      padding: 22px 10px 22px 10px;
      border-radius: 20px;
    }

    section.donar_details .donar_recent_contri h4 {
      margin: 0 0 20px 20px;
      font-size: 20px;
      font-weight: 800;
    }

    section.donar_details .full_donar_details {
      background: white;
      padding: 22px 20px 17px 30px;
      border-radius: 20px;
    }

    section.donar_details .full_donar_details h2 {
      font-size: 30px;
      text-transform: capitalize;
      margin: 0 0 40px 0;
    }

    section.donar_details .full_donar_details ul {
      display: flex;
      list-style: none;
      flex-wrap: wrap;
    }

    section.donar_details .full_donar_details ul li {
      flex: 0 0 100%;
      margin: 0 0 18px 0;
    }

    section.donar_details .full_donar_details ul li p b {
      font-size: 19px;
      font-weight: 700;
    }



    /* end of donar details page end  */



    /* patrol management page css  */

    .guys_management1.patrol_management {
      justify-content: space-between;
      padding: 0 20px 0 20px;
    }

    section.patrol_management_2 .main_inner_section ul {
      display: flex;
      list-style: none;
      flex-wrap: wrap;
    }

    section.patrol_management_2 .main_inner_section ul li {
      flex: 0 0 27%;
      background: white;
      border-radius: 30px;
      text-align: center;
      margin: 0 30px 20px 30px;
      padding: 20px 10px 20px 10px;
    }

    section.patrol_management_2 .main_inner_section ul li .box-inner {
      display: flex;
      align-items: center;
      background: #CBCBCB;
      border-radius: 20px;
      padding: 25px 15px 25px 15px;
    }

    section.patrol_management_2 .main_inner_section ul li .box-inner .icon img {
      width: 64px;
      filter: invert(1);
    }

    section.patrol_management_2 .main_inner_section ul li .box-inner .content {
      text-align: start;
    }

    section.patrol_management_2 .main_inner_section ul li .box-inner .content h4 {
      font-size: 15px;
      margin: 5px 0 5px 0;
    }

    section.patrol_management_2 .main_inner_section ul li .\32 box-inner {
      padding: 20px 10px 20px 10px;
    }

    section.patrol_management_2 .main_inner_section ul li .\32 box-inner p {
      padding: 5px 0 10px 0;
      text-align: start;
    }

    section.patrol_management_2 .main_inner_section ul li .\32 box-inner .box_btn {
      margin: 20px 0 -10px 0;
    }

    section.patrol_management_2 .main_inner_section ul li .\32 box-inner .box_btn button.btn.full_details_btn {
      background: #01051D;
      border-radius: 20px;
      padding: 12px 30px 12px 30px;
      font-size: 18px;
      font-weight: 700;
      border: none;
      color: white;
    }

    /* end of patrol management page  */


    /* third popop section start  */
    .popup-content .popop_body .increament_sec {
      background: #E4E4E4;
      width: 100%;
      padding: 20px 10px 10px 10px;
      border-radius: 20px;
      margin: 10px 0 0 0;
    }

    .popup-content .popop_body .increament_sec h3 {
      font-size: 20px;
      margin: 0 0 20px 0;
    }

    .popup-content .popop_body .increament_sec div#inputSection {
      display: flex;
      flex-wrap: wrap;
    }

    .popup-content .popop_body .increament_sec div#inputSection input {
      flex: 0 0 45%;
      background: white;
      border-radius: 25px;
      border: none;
      margin: 0 10px 20px 10px;
      padding: 20px 0 20px 10px;
    }

    .popup-content .popop_body .increament_sec button {
      border: none;
      background: #01051D;
      color: white;
      padding: 15px 15px 15px 15px;
      border-radius: 20px;
      width: auto;
    }

    .input-container {
      flex: 0 0 45%;
      margin: 0 0 0 10px;
      position: relative;
      left: -8px;
    }

    .popup-content .popop_body form .general_pickup {
      background: #F9F8C7;
      padding: 32px 10px 32px 10px;
      border-radius: 20px;
    }

    .popup-content .popop_body form .general_pickup h3 {
      font-size: 18px;
      margin: 0px 0 20px 0;
    }

    .popup-content .popop_body form .general_pickup input {
      width: 100%;
      border: none;
      padding: 30px 0px 30px 0;
      text-align: center;
      border-radius: 30px;
    }


    /* third popop section end  */

    /* start cruiser detail page css  */
    section.cruiser_details {
      background: #EFEFEF;
      margin: 22px;
      border-radius: 20px;
    }

    .cruiser_target {
      background: #BC9B63;
      padding: 20px 20px 20px 20px;
      border-radius: 20px;
    }

    .cruiser_target h2 {
      font-size: 25px;
      margin: 0 0 15px 0;
    }

    .cruiser_target ul {
      display: flex;
      justify-content: space-between;
      list-style: none;
      align-items: center;
    }


    .cruiser_comp.det {
      background: white;
      padding: 20px 10px 20px 10px;
      border-radius: 20px;
    }

    .cruiser_comp.det h2 {
      font-size: 25px;
      margin: 0 0 10px 0;
    }

    .cruiser_comp.det ul {
      display: flex;
      list-style: none;
      flex-wrap: wrap;
    }

    .cruiser_comp.det ul li {
      flex: 0 0 100%;
      margin: 0px 0 15px 10px;
    }

    .details_list.\31 4th_patrol h2 {
      font-size: 30px;
      margin: 0 0 20px 10px;
      font-weight: 800;
    }

    .details_list.\31 4th_patrol {
      background: white;
      padding: 20px 10px 20px 10px;
      border-radius: 20px;
    }

    .details_list.\31 4th_patrol table tbody tr {
      background: #F9F8C7;
    }

    .details_list.\31 4th_patrol table tbody tr th button.btn.btn_full_details {
      background: #01051D;
      color: white;
    }


    .details_list.\31 4th_patrol tr.change_donor {
      margin: -32px 0 7px 0;
      border-radius: 0;
      border-bottom-left-radius: 22px;
      border-bottom-right-radius: 22px;
      display: none;
    }

    .details_list.\31 4th_patrol tr.change_donor td button.btn.btn_full_details.replace_donor {
      background: #BC9B63;
      border-radius: 20px;
      padding: 12px 20px 12px 20px;
      font-size: 18px;
      font-weight: 700;
      border: none;
    }

    .details_list.\31 4th_patrol tr.change_donor td form.search-box {
      display: flex;
      align-items: center;
      margin: 0 0 0 50px;
    }

    .details_list.\31 4th_patrol tr.change_donor td form.search-box button img {
      filter: invert(1);
      position: relative;
      left: 50px;
    }

    .details_list.\31 4th_patrol tr.change_donor td form.search-box input#search-input, .details_list.\31 4th_patrol tr.change_donor td form.search-box input#service-search-input {
      border: none;
      background: white;
      padding: 20px 20px 20px 20px;
      border-radius: 20px;
      text-align: center;
      font-size: 19px;
    }

    .details_list.\31 4th_patrol.addresses tr:nth-child(1) {
      background: #BC9B63;
      padding: 20px 0 20px 0;
    }

    .details_list.\31 4th_patrol.addresses tr {
      background: #F8F8F8;
    }

    th.hidden_gem .hello {
      display: flex;
      margin: 20px 0 0 0;
    }

    th.hidden_gem .hello form.search-box button img {
      filter: invert(1);
      position: relative;
      left: 50px;
      top: 6px;
    }

    th.hidden_gem .hello form.search-box input#search-input, th.hidden_gem .hello form.search-box input#service-search-input {
      border: none;
      padding: 15px 0 15px 0;
      text-align: center;
      border-radius: 21px;
      font-size: 19px;
    }

    th.hidden_gem {
      opacity: 0;
      display: none;
    }

    th.hidden_gem.active {
      opacity: 1;
      display: block;
    }


    /* now expense management page csss  */

    section.bar_graph_sec {
      background: url(../images/Chart.png);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      margin: 40px 0 20px 0;
    }

    canvas#barChart {
      position: relative;
      left: 24px !important;
      top: -6px;
    }

    .\32 nd_first_inner_expense_list ul {
      display: flex;
      flex-wrap: wrap;
      list-style: none;
    }

    .\32 nd_first_inner_expense_list ul li {
      flex: 0 0 43%;
      margin: 0px 10px 10px 10px;
      padding: 20px 10px 20px 10px;
      border-radius: 25px;
    }

    .\32 nd_first_inner_expense_list ul li:nth-child(1) {
      background: #63BCB7;
    }

    .\32 nd_first_inner_expense_list ul li:nth-child(2) {
      background: #F9F8C7;
    }

    .\32 nd_first_inner_expense_list ul li:nth-child(3) {
      background: #BC9B63;
    }

    .\32 nd_first_inner_expense_list ul li:nth-child(4) {
      background: #0B5D8B;
    }

    .\32 nd_first_inner_expense_list ul li h4 {
      text-align: center;
      margin: 0 0 20px 0;
    }

    .\32 nd_first_inner_expense_list ul li p {
      text-align: center;
      margin: 0 0 10px 0;
    }

    .\32 nd_first_inner_expense_list .adding_new_expense {
      background: white;
      padding: 30px 20px 40px 20px;
      border-radius: 20px;
    }

    .\32 nd_first_inner_expense_list .adding_new_expense h2 {
      text-align: center;
      margin: 0 0 20px 0;
    }

    .\32 nd_first_inner_expense_list .adding_new_expense form input {
      width: 100%;
      border: none;
      background: #E4E4E4;
      padding: 15px 0 15px 4px;
      border-radius: 20px;
    }

    .fisrt_inner_epense_list table tbody tr th {
      display: inline-block;
      border: none;
      border-radius: 20px;
      font-size: 13px;
      margin: 0 0 0 8px;
      font-weight: 400;
    }

    .fisrt_inner_epense_list table tbody tr {
      background: white;
      display: flex;
      align-items: center;
      padding: 15px 5px 15px 5px;
      border-radius: 30px;
      width: 100%;
      justify-content: center;
      margin: 0 0 11px 0;
      flex-wrap: wrap;
    }

    .fisrt_inner_epense_list {
      height: 550px;
      overflow-y: scroll;
    }

    .\32 nd_first_inner_expense_list .adding_new_expense form input[type="submit"] {
      background: #01051D;
      color: white;
      width: 50%;
    }

    .\32 nd_first_inner_expense_list .adding_new_expense form .submit_bt {
      display: flex;
    }


    /* end of the page  */


    /* adding donation page css start  */


    section.adding_donations {
      background: white;
      margin: 22px;
      border-radius: 30px;
    }

    section.adding_donations .form_adding_donations .search_box {
      border-bottom: 2px solid black;
      position: relative;
    }

    section.adding_donations .form_adding_donations .search_box button img {
      filter: invert(1);
    }

    section.adding_donations .form_adding_donations .search_box img {}

    button {}

    section.adding_donations .form_adding_donations .search_box .search-input {
      display: flex;
      flex-direction: column;
    }

    section.adding_donations .form_adding_donations .search_box .search-input input {
      border: none;
      text-align: start;
      padding: 20px 0 10px 0;
    }

    section.adding_donations .form_adding_donations .search_box button {
      position: absolute;
      left: unset;
      right: 30px;
      top: 23px;
    }

    section.adding_donations .form_adding_donations .search_box .search-input label {
      font-size: 23px;
      font-weight: 500;
    }

    section.adding_donations .form_adding_donations {
      padding: 50px 10px 50px 10px;
    }

    section.adding_donations .form_adding_donations .Input {
      display: flex;
      flex-direction: column;
    }

    section.adding_donations .form_adding_donations .Input label {
      font-size: 23px;
      font-weight: 500;
    }

    section.adding_donations .form_adding_donations .Input input {
      width: 100%;
      border: none;
      border-bottom: 2px solid black;
      padding: 10px 0 10px 0;
    }

    .form_adding_donations .inner_flex p {
      position: absolute;
      top: 30px;
      left: unset;
      right: 0;
      font-size: 26px;
    }

    .form_adding_donations .inner_flex {
      position: relative;
    }

    section.adding_donations .form_adding_donations .select_box h3 {
      font-size: 24px;
      font-weight: 700;
    }

    section.adding_donations .form_adding_donations .select_box ul {
      display: flex;
      list-style: none;
      margin: 20px 0 30px 0;
    }

    section.adding_donations .form_adding_donations .select_box ul li {
      background: #01051d;
      border-radius: 20px;
      flex: 0 0 20%;
      margin: 0 0 0 20px;
      height: 90px;
    }

    .select_box ul li input {
      width: 100%;
      display: none;
    }

    .select_box ul li.step-label {
      width: calc(100% + 12px);
      height: calc(100% - 20px);
      background: #fff;
      box-shadow: 1px 1px 5px rgba(0, 0, 0, .4);
      position: relative;
      cursor: pointer;
      font-size: 11px;
      text-align: center;
      margin: 0 -5px;
      margin-bottom: 20px;
      transition: all .3s;
    }

    .select_box ul li label.step-label {
      /* box-shadow: 1px 1px 5px rgba(0,0,0,.4); */
      position: relative;
      cursor: pointer;
      font-size: 11px;
      text-align: center;
      /* margin: 0 -5px; */
      margin-bottom: 20px;
      transition: all .3s;
      background: #01051d;
      height: 90px;
      display: block;
      border-radius: 30px;
    }

    .select_box ul li label.step-label h3.step-label-heading {
      margin: 0;
      font-weight: 600;
      text-align: center;
      font-size: 22px;
      padding: 10px 10px;
      color: #000;
      position: relative;
      line-height: 1.2;
      margin: 30px 0 0 0;
    }

    .step-label:before {
      content: "";
      background: #3640e4;
      top: 9px;
      left: unset;
      right: 10px;
      transform: scale(0);
      color: #fff;
      display: block;
      border-radius: 50%;
      position: absolute;
      width: 26px;
      height: 26px;
      text-align: center;
      line-height: 28px;
      transition-duration: .1s;
      font-weight: 900;
      font-size: 14px;
      z-index: 1;
    }

    :checked+label:before {
      transform: scale(1);
    }


    section.adding_donations .form_adding_donations .select_box {
      margin: 0 0 50px 0;
    }


    section.adding_donations .form_adding_donations .select_box ul li:nth-child(2) {
      background: #63BCB7;
    }

    section.adding_donations .form_adding_donations .select_box ul li:nth-child(2) label.step-label {
      background: #63bbb6;
      margin: -30px 0 0 0;
      height: 120px;
    }

    section.adding_donations .form_adding_donations .select_box ul li:nth-child(2) label.step-label,
    section.adding_donations .form_adding_donations .select_box ul li:nth-child(1) label.step-label,
    section.adding_donations .form_adding_donations .select_box ul li:nth-child(3) label.step-label {
      margin: -30px 0 0 0;
      height: 120px;
    }

    section.adding_donations .form_adding_donations .select_box ul li:nth-child(2) label.step-label h3.step-label-heading,
    section.adding_donations .form_adding_donations .select_box ul li:nth-child(1) label.step-label h3.step-label-heading,
    section.adding_donations .form_adding_donations .select_box ul li:nth-child(3) label.step-label h3.step-label-heading {
      padding: 40px 0 0 0;
    }

    section.adding_donations .form_adding_donations .select_box ul li:nth-child(3) {
      background: #F9F8C7;
    }

    section.adding_donations .form_adding_donations .select_box ul li:nth-child(3) label.step-label {
      background: #f9f8c7;
    }

    section.adding_donations .form_adding_donations .select_box ul li:first-child label.step-label h3.step-label-heading {
      color: white;
    }

    section.adding_donations .form_adding_donations .subnmits_btn_ {
      display: flex;
    }

    section.adding_donations .form_adding_donations .subnmits_btn_ button.add_dontaion_btn1 {
      background: #01051D;
      padding: 20px 10px 20px 10px;
      border-radius: 20px;
      margin: 0 30px 0 0px;
      color: white;
      font-size: 17px;
      border: none;
    }

    section.adding_donations .form_adding_donations .subnmits_btn_ button.add_dontaion_btn1.btn2 {
      background: #F9F8C7;
      color: black;
      padding: 20px 30px 20px 30px;
    }


    /* and of the page  */


    /* stattics page css :start  */
    .main_dashbord_sec_2_other ul {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      list-style: none;
      flex-wrap: wrap;
    }

    .main_dashbord_sec_2_other ul li {
      border-radius: 20px;
      flex: 0 0 20.33%;
      margin: 10px 0 10px 46px;
      padding: 20px 10px 20px 10px;
      height: auto;
    }

    .main_dashbord_sec_2_other ul li .icon_img img {
      filter: invert(1);
      margin: 0 0 10px 0;
    }

    .main_dashbord_sec_2_other ul li .dashbord_content h3 {
      color: black;
      font-size: 20px;
      font-weight: 800;
      margin: 1px 0 3px 0;
    }

    .main_dashbord_sec_2_other ul li .dashbord_content p {
      margin: 10px 0 0 0;
    }

    .main_dashbord_sec_2_other ul li:nth-child(1) {
      background: #9D0000;
      color: white;
    }

    .main_dashbord_sec_2_other ul li:nth-child(1) .icon_img img {
      filter: invert(1) brightness(60.5);
    }

    li {}

    .main_dashbord_sec_2_other ul li:nth-child(1) .dashbord_content h3 {
      color: white;
    }

    .main_dashbord_sec_2_other ul li:nth-child(2) {
      background: #BC9B63;
    }

    .main_dashbord_sec_2_other ul li:nth-child(3) {
      background: #F9F8C7;
    }

    .main_dashbord_sec_2_other ul li:nth-child(4) {
      background: #63BCB7;
    }

    .main_dashbord_sec_2_other ul li:nth-child(5),
    .main_dashbord_sec_2_other ul li:nth-child(6),
    .main_dashbord_sec_2_other ul li:nth-child(7),
    .main_dashbord_sec_2_other ul li:nth-child(8) {
      background: white;
    }

    .purim_tax {
      background: white;
      padding: 10px 20px 20px 10px;
      align-items: center;
      text-align: center;
      border-radius: 30px;
    }

    .purim_tax ul {
      display: flex;
      list-style: none;
      justify-content: end;
      align-items: center;
    }

    .purim_tax ul li {
      margin: 0 0px 0 20px;
    }

    .purim_tax ul li:nth-child(1) {
      background: #63BCB7;
      padding: 6px 3px 5px 4px;
      border-radius: 20px;
    }

    .purim_tax ul li:nth-child(2) {
      background: #E4E4E4;
      padding: 6px 23px 5px 24px;
      border-radius: 20px;
    }

    .purim_tax h2 {
      text-align: center;
      margin: 20px 0 20px 0;
    }

    .purim_tax .total_amount {
      background: #63BCB7;
      border-radius: 20px;
      padding: 20px 0 20px 0;
      width: 231px;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto;
    }

    .list_of_collection ul {
      display: flex;
      width: 100%;
      overflow-x: auto;
      flex-wrap: nowrap;
      list-style: none;
    }

    .list_of_collection ul li {
      background: #E4E4E4;
      padding: 20px 20px 30px 20px;
      border-radius: 20px;
      flex: 0 0 20%;
      margin: 0 70px 30px 0;
      text-align: center;
      position: relative;
    }

    .list_of_collection ul li img {
      filter: invert(1);
      margin: 0 0 10px 0;
    }

    .list_of_collection ul li h3 {
      font-size: 22px;
      font-weight: 700;
      margin: 0 0 20px 0;
    }

    .list_of_collection ul li .icon_img {
      background: white;
      width: 50px;
      height: auto;
      border-radius: 20px;
      padding: 10px 0 0 0;
      position: absolute;
      top: 10px;
      left: unset;
      right: 10px;
    }

    .list_of_collection ul li .icon_img img {
      height: 30px;
      width: 30px;
      filter: none;
    }

    .list_of_collection {
      background: white;
      padding: 30px 15px 30px 15px;
      border-radius: 22px;
    }

    .list_of_collection h5 {
      font-size: 16px;
      margin: 0 0 20px 0;
    }


    /* and of the section  */


    /* start of online mode section  */


    .previous_back h2 {
      font-size: 32px;
      font-weight: 700;
      margin: 0 0 30px 0;
    }

    .previous_back ul {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      list-style: none;
    }

    .previous_back ul li {
      background: #FFFFFF;
      margin: 0 30px 0 0;
      padding: 10px 30px 10px 30px;
      border-radius: 20px;
      height: 235px;
    }

    .previous_back ul li h2 {
      font-size: 25px;
      margin: 20px 0 0px 0;
      text-align: center;
    }

    .previous_back ul li .inner {
      text-align: center;
      background: #F9F8C7;
      margin: 10px 0 7px 0;
      padding: 0px 0 5px 0;
      border-radius: 20px;
    }

    .previous_back ul li .inner img {
      filter: invert(1);
      margin: 10px 0 10px 0;
    }

    .previous_back ul li .inner h4 {
      margin: 0 0 10px 0;
    }

    .previous_back ul li .inner p {
      background: #01051D;
      color: white;
      width: 77%;
      margin: 0 auto 10px;
      border-radius: 12px;
      padding: 2px 0 3px 0;
    }


    .previous_back ul li:last-child h2 {
      padding: 60px 0 0 0;
    }

    .previous_back ul li:last-child .inner_empty {
      text-align: center;
      margin: 10px 0 0 0;
      background: white;
    }

    .previous_back ul li:last-child .inner_empty p {
      font-size: 22px;
      font-weight: 800;
    }

    section.online_sec_2 .openeing_a_wiper {
      background: #EFEFEF;
      padding: 30px 10px 30px 10px;
      border-radius: 20px;
    }

    section.online_sec_2 .openeing_a_wiper h2 {
      font-size: 30px;
      margin: 0 0 30px 0;
    }

    section.online_sec_2 .openeing_a_wiper form input {
      width: 100%;
      border: none;
      padding: 20px 10px 20px 20px;
      border-radius: 20px;
      font-size: 20px;
    }


    section.online_sec_2 .openeing_a_wiper form .lesson_obj {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: nowrap;
    }

    section.online_sec_2 .openeing_a_wiper form .lesson_obj input {
      margin: 0 20px 0 10px;
    }

    section.online_sec_2 .openeing_a_wiper form .file_upload {
      background: white;
      padding: 40px 0 40px 0;
      text-align: center;
      border-radius: 30px;
      margin: 0 10px 0 10px;
    }

    section.online_sec_2 .openeing_a_wiper form .file_upload label.btn-up {
      font-size: 22px;
      font-weight: 500;
      color: gray;
    }

    section.online_sec_2 .openeing_a_wiper form .file_upload .submit_btn button.add_wiper_btn {
      background: #01051D;
    }

    section.online_sec_2 .openeing_a_wiper form .submit_btn {
      justify-content: center;
    }

    section.online_sec_2 .openeing_a_wiper form .submit_btn button.add_wiper_btn {
      background: #01051D;
      color: white;
      padding: 20px 40px 20px 40px;
      font-size: 23px;
      border: none;
      border-radius: 20px;
    }

    .col-md-8 {
      width: 66.66667%;
      /* 8 out of 12 columns */
      float: left;
    }

    .col-md-4 {
      width: 33.33333%;
      /* 4 out of 12 columns */
      float: left;
    }

    /* last page csss  */

    .row.first_sec.donation_manang_1 {
      padding: 20px 20px 20px 10px;
      display: flex;
      justify-content: space-between;
      color: white;
    }

    .custom-select select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background: transparent;
      border: none;
      padding: 8px;
      font-size: 16px;
      width: 200px;
      /* Adjust as needed */
    }

    /* Style the arrow icon */
    .custom-select::after {
      content: '\25BC';
      /* Unicode character for down arrow */
      position: absolute;
      top: 50%;
      right: 10px;
      transform: translateY(-50%);
    }

    /* Style the container to create a border */
    .custom-select {
      position: relative;
      display: inline-block;
      border: 1px solid #ccc;
      border-radius: 4px;
      overflow: hidden;
      display: flex;
      margin: 0px 0 0 20px;
    }

    /* Style option on hover */
    .custom-select option:hover {
      background-color: #f5f5f5;
    }

    /* Style selected option */
    .custom-select option:checked {
      background-color: #e0e0e0;
    }

    .last_edit {
      display: flex;
      flex-direction: column;
    }

    .last_edit label {
      font-size: 18px;
      margin: -10px 0 0px 0;
    }

    .last_edit input#\34 50NIS {
      width: 100%;
      border: none;
      background: lightgray;
      padding: 16px 10px 17px 10px;
      font-size: 16px;
      border-radius: 20px;
      margin: 9px 0 0 0;
    }

    form.search-box input#search-input, form.search-box input#service-search-input {
      background: lightgray;
    }

    th.hidden_gem.active form.search-box {
      margin: 10px 10px 0 9px;
    }

    .custom-select {
      border-radius: 20px;
      height: 50px;
      margin: 11px 0px 0 30px;
      background: lightgray;
      border: none;
    }

    button.btn.btn_full_details.delete_donate {
      background: #9d0000 !important;
      color: white;
    }

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

    /* Track */
    ::-webkit-scrollbar-track {
      background: #f1f1f1;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
      background: #888;
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
      background: #555;
    }






body{
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background: #80808038;
}
::selection{
  color:var(--white-color);
  background: var(--black-color);
}

/* bootstrap things  */


.container {
  max-width: 100% !important;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: -10px; 
}

.col-md-12, .col-md-6 {
  box-sizing: border-box;
  padding: 10px; 
}

.col-md-12 {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0;
}

.col-md-6 {
  flex: 0 0 50%;
  max-width: 50%;
}


/* end of bootstrap things */

.sidebar.active{
  width: 200px;
}
.sidebar .logo_content .logo{
  color:var(--white-color);
  display: flex;
  height:50px;
  width:100%;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition:all 0.5s ease;
}
.sidebar.active .logo_content .logo{
  opacity:1;
  pointer-events: none;
}
.logo_content .logo .logo_name{
  font-size: 20px;
  font-weight: 400;
}
.sidebar #btn{
  top: 20px !important;
  position:absolute;
  color:var(--white-color);
  top:6px;
  left:50%;
  font-size: 22px;
  height: 30px;
  width:50px;
  text-align: center;
  line-height: 50px;
  transform: translateX(-50%);
  cursor: pointer;
}
.sidebar.active #btn{
  left:90%;
}
.sidebar ul{
  margin-top: 75px;
  padding: 0 0 0 20px;
}
.sidebar ul li{
  position:relative;
  height: 60px;
  width:100%;
  margin: 14px 0px;
  list-style: none;
  line-height: 50px;
}
.sidebar ul li .tooltip{
  position:absolute;
  left: 135px;
  top:0;
  transform: translate(-30%, -70%);
  border-radius: 6px;
  height:35px;
  width: max-content;
  background: var(--white-color);
  line-height: 35px;
  text-align: center;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  transition:0s;
  opacity:0;
  pointer-events: none;
  display:block;
  padding: 0 10px 0 10px;
}
.sidebar ul li .tooltip::before{
  content:'';
  width:0;
  height:0;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  border-right:10px solid var(--white-color);
  position:absolute;
  left:-8px;
  top:7px;
}
.sidebar.active ul li .tooltip{
  display:none;
}
.sidebar ul li:hover .tooltip{
  transition:all 0.5s ease;
  opacity:1;
  top:50%;
}
.sidebar ul li input{
  position:absolute;
  height:100%;
  width:100%;
  left:0;
  top:0;
  border-radius: 12px;
  outline:none;
  border:none;
  background: #1d1b31;
  padding-left:50px;
  font-size: 18px;
  color:var(--white-color);
}
.sidebar ul li .bx-search{
  position:relative;
  z-index: 99;
  color:var(--white-color);
  font-size: 22px;
  transition:all 0.5s ease;
}
.sidebar ul li .bx-search:hover{
  background:var(--white-color);
  color:#1d1b31;
}
.sidebar ul li a{
  color:var(--white-color);
  display:flex;
  align-items:center;
  text-decoration: none;
  border-radius: 12px;
  white-space: nowrap;
  transition:all 0.4s ease;
}

.sidebar ul li a:hover{
  /* color:var(--black-color); */
  /* background:var(--white-color); */
}
.sidebar ul li i{
  font-size: 18px;
  font-weight: 400;
  height:50px;
  min-width: 50px;
  border-radius: 12px;
  line-height: 50px;
  text-align: center;
}
.sidebar .links_name{
  font-size: 15px;
  font-weight: 600;
  opacity:0;
  pointer-events: none;
  transition:all 0.3s ease;
  text-transform: capitalize;
}
.sidebar.active .links_name{
  transition:0s;
  opacity:1;
  pointer-events: auto;
  color: black;
}
.sidebar .content{
  position:absolute;
  color:var(--white-color);
  bottom:0;
  left:0;
  width:100%;
}
.sidebar .content .user{
  position:relative;
  padding:10px 6px;
  height:60px;
  background: none;
  transition:all 0.4s ease;
}
.sidebar.active .content .user{
  background:var(--light-black);
}
.content .user .user_details{
  display:flex;
  align-items:center;
  opacity:0;
  pointer-events: none;
  white-space: nowrap;
  transition:all 0.4s ease;
}
.sidebar.active .user .user_details{
  opacity:1;
  pointer-events: auto;
}
.content .user .user_details img{
  height:45px;
  width:45px;
  object-fit: cover;
  border-radius: 12px;
}
.name_job{
  margin-left:10px;
}
 .user_details .name{
  font-size: 15px;
  font-weight: 400;
}
 .user_details .job{
  font-size: 12px; 
}
 #log_out{
  position:absolute;
  bottom:5px;
  left:50%;
  transform:translateX(-50%);
  min-width: 50px;
  line-height: 50px;
  font-size: 20px;
  border-radius: 12px;
  text-align: center;
  transition:all 0.4s ease;
}
.sidebar.active .user #log_out{
  left:80%;
  background:none;
}
.sidebar.active ~ .home_content{
  z-index:100;
  width:100%;
  left:0;
}        
.sidebar.active ul.nav_list li a {
  flex-direction: row-reverse;
  gap: 16px;
  transition: 1s ease;
}
.sidebar ul li a:hover img {
  /* filter: invert(1); */
}
.header .main_upper_header {
  background: #01051D;
  padding: 10px 20px;
}

.header .main_upper_header ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header .main_upper_header ul li button.btn.main_header_btn {
  border-radius: 10px;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  border: none;
  padding: 2px 10px 2px 5px;
}

.home_content.active {
  /*width: calc(100% - 200px);
  left: 200px;*/
}

.sidebar.active ul.nav_list li a {
  display: flex;
  flex-direction: row;
  transition: 1s ease;
}
.sidebar ul li a img {
  width: 100%;
  height: 100%;
}

.active ul li a img {
  width: 20%;
  height: 100%;
}
.main_upper_header {
  display: none;
}


/* end of of header section  */


/* Doctor Panel Section  */

section.dashboard_sec1 {
  padding: 40px 0;
}

.doctor_pane ul {
  display: flex;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}

.doctor_pane ul li {
  flex: 0 0 30%;
  margin: 0 30px 20px 0px;
}

.doctor_pane ul li .doctor_panel_box {
  background: white;
  display: flex;
  align-items: center;
  width: 100%;
  border: 1px solid grey;
  border-radius: 10px;
  padding: 10px;
  flex-direction: row;
}

.doctor_details_wrapper {

}

.doctor_pane ul li .doctor_panel_box .panel_box_icon {
  background: #6777f1;
  display: flex;
  width: 30%;
  border-radius: 10px;
  padding: 10px;
  height: 60px;
  align-items: center;
  justify-content: center;
}

.doctor_pane ul li .doctor_panel_box .panel_box_icon img {
  width: 25px;
  filter: invert(1);
  height: 25px;
}
.doctor_pane ul li .doctor_panel_box .panel_box_content {
  flex: 0 0 65%;
  padding: 0 0 0 10px;
}

.doctor_pane ul li .doctor_panel_box .panel_box_content h6 {
    font-size: 15px;
    margin: 20px 0 10px 0;
    color: black;
}

.donation_manang_1 {
  display: flex;
  align-items: center;
}
.panel_box_icon.green {
  background: #42c25f !important;
}

.panel_box_icon.red {
  background: #ff544c !important;
}
.home_content {
  padding: 60px;
  height: 100vh;
/*  position: fixed;*/
  top: 0;
  overflow-y: scroll;
/*  display: flex;*/
  align-items: flex-start;
  justify-content: center;
}

.form_wrapper {
  min-width: 400px;
}

label strong {
  color: red;
}
/* widthrawal back sec  */

.main_earning_sec h2 {
  font-size: 40px;
  font-family: sans-serif;
}

.main_earning_sec ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0;
}

.main_earning_sec ul li {
  flex: 0 0 45%;
}


.main_earning_sec ul li .earning_box_outer h4 {
  font-size: 23px;
  font-weight: 500;
  font-family: sans-serif;
  margin: 0 0 8px 10px;
}

.main_earning_sec ul li .earning_box_outer .earning_box_inner {
  border: 1px solid #e4e5e7;
  background: white;
  padding: 15px;
  border-radius: 10px;
  height: 270px;
}

.main_earning_sec ul li .earning_box_outer .earning_box_inner h6 {
  margin: 0;
  font-size: 20px;
  font-family: sans-serif;
}

.main_earning_sec ul li .earning_box_outer .earning_box_inner h1 strong {
  color: rgb(0, 143, 83);
  font-size: 40px;
  font-family: sans-serif;
}

.main_earning_sec ul li .earning_box_outer .earning_box_inner p {
  font-size: 19px;
  font-family: sans-serif;
  margin: 10px 0 20px 0;
}

.main_earning_sec ul li .earning_box_outer .earning_box_inner .payoverdraft {
  display: flex;
}

.main_earning_sec ul li .earning_box_outer .earning_box_inner .payoverdraft button {
  border: 1px solid #e4e5e7;
  background: transparent;
  width: auto;
  padding: 10px 40px 10px 30px;
  font-size: 19px;
  border-radius: 10px;
}

.main_table_secc .table-body.table-body-border {
/*  border: 1px solid #dadbdd;*/
  border-radius: 6px;
  overflow: hidden;
  margin-top: 24px;
}

.main_table_secc .table-body.table-body-border table.table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  color: #404145;
  font-size: 14px;
}

.main_table_secc .table-body.table-body-border table.table thead.table-thead {
  background: #fafafa;
}

.main_table_secc .table-body.table-body-border table.table thead.table-thead tr.table-tr th.table-th {
  /* padding-left: 24px; */
  height: 44px;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  vertical-align: middle;
  /* padding-left: 12px; */
  padding-right: 12px;
  font-weight: 700;
}

.main_table_secc .table-body.table-body-border table.table tbody.table-tbody tr {
  border: 1px solid #dadbdd;
}

.main_table_secc .table-body.table-body-border table.table tbody.table-tbody tr.table-tr td {
  height: 88px;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  vertical-align: middle;
  padding-left: 12px;
  padding-right: 12px;
}


.sm-earnings-hidden {
  display: none;
}

.main_table_secc .table-body.table-body-border table.table tbody.table-tbody tr.table-tr td.table-td div .earnings-hidden.sm-earnings-visible.sm-earnings-flex.sm-earnings-flex-items-center.earnings-gap-8 {
  display: flex;
  visibility: visible;
  align-items: center;
}


#site-header, .page-header, #site-footer {
  display: none !important;
  opacity: 0 !important;
}

.message {
  display: none;
}

.message.error {
  color: red;
}

.message.success {
  color: green;
}
          .col-md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-md-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }

body {
    background: white;
}

.main_profile_sec {
    border: 1px solid gray;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    height: 100%;
    border-radius: 10px;
}

.main_profile_sec .user_icon img {
    width: 50px;
}

.profle_row {
      align-items: stretch;
}

.main_profile_sec h2.name {
    margin: 10px 0 0 0;
    font-size: 30px;
    font-weight: 600;
    font-family: sans-serif;
}

.main_profile_sec p a,.main_profile_sec p {
    color: black;
    text-decoration: none;
    font-size: 19px;
    margin: 10px 0 0 0;
}

.main_profile_sec .glob_btn {
    margin: 20px 0 10px 0;
    display: flex;
}

.main_profile_sec .glob_btn button.change_password {
    background: #F9F8C7;
    border-radius: 20px;
    padding: 12px 20px 12px 20px;
    font-size: 18px;
    font-weight: 700;
    border: none;
}

.main_profile_details_sec {
    border: 1px solid gray;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    padding: 10px;
    border-radius: 10px;
}

.main_profile_details_sec h5 {
    margin: 0 0 10px 0;
    font-family: sans-serif;
    font-size: 20px;
}

.main_profile_details_sec p {
    margin: 10px 0 10px 0;
    font-size: 18px;
}

.show {
  opacity: 1 !important;
  z-index: 9999 !important;
}

.new_popup {
  opacity: 0;
  z-index: -9999;
  position: absolute;
  width: 98%;
  height: auto;
  top: 5%;
  left: 1%;
  border-radius: 15px;
    padding: 50px;
    background: white;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);

}

.new_popup_close {
      color: black;
    font-size: 22px;
    font-weight: bold;
    position: absolute;
    right: 1%;
    top: 1%;
    font-family: cursive;
    cursor: pointer;
}

.details_list tr {
      background: #F2F2F2;
      border: 1px solid hsla(0, 0%, 50.2%, .5019607843);
}

.details_list tr th {
  background-color: transparent !important;
  border:  none;
}

.edit_button {
  cursor: pointer;
}

.popup_action_wrapper {
  display: flex;
    gap: 20px;
}


/*===== GOOGLE FONTS =====*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");

/*===== VARIABLES CSS =====*/
:root {
  --dark-color-lighten: #f2f5ff;
  --red-card: #a62121;
  --blue-card: #4bb7e6;
  --btn: #141414;
  --btn-hover: #3a3a3a;
  --text: #fbf7f7;
}



.subscriptions button {
  font-family: "Montserrat", sans-serif;
  display: inline-block;
  border: none;
  outline: none;
  border-radius: 0.2rem;
  color: var(--text);
  cursor: pointer;
}

.subscriptions a {
  text-decoration: none;
}

.subscriptions img {
  max-width: 100%;
  height: 100%;
  user-select: none;
}

/*===== CARD =====*/
.subscriptions .container {
  height: 100%;
  width: 100%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.subscriptions .card {
  position: relative;
  padding: 1rem;
  width: 350px;
  height: auto;
  box-shadow: -1px 15px 30px -12px rgb(32, 32, 32);
  border-radius: 0.9rem;
  background-color: black;
  color: var(--text);
  cursor: pointer;
  padding: 50px 0px;
}

.product-image {
  display: none;
}

.subscriptions .card-blue {
  background: var(--blue-card);
}

.subscriptions .product-image {
  height: 230px;
  width: 100%;
  transform: translate(0, -1.5rem);
  transition: transform 500ms ease-in-out;
  filter: drop-shadow(5px 10px 15px rgba(8, 9, 13, 0.4));
}
.subscriptions .product-info {
  text-align: center;
}

.subscriptions .product-info h2 {
  font-size: 1.4rem;
  font-weight: 600;
}
.subscriptions .product-info p {
  margin: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
}
.subscriptions .price {
  font-size: 1.2rem;
  font-weight: 500;
}
.subscriptions .btn {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-top: 0.8rem;
}
.subscriptions .buy-btn {
  background-color: var(--btn);
  padding: 0.6rem 3.5rem;
  font-weight: 600;
  font-size: 1rem;
  transition: 300ms ease;
}
.subscriptions .buy-btn:hover {
  background-color: var(--btn-hover);
}
.subscriptions .fav {
  box-sizing: border-box;
  background: #fff;
  padding: 0.5rem 0.5rem;
  border: 1px solid#000;
  display: grid;
  place-items: center;
}

.subscriptions .svg {
  height: 25px;
  width: 25px;
  fill: #fff;
  transition: all 500ms ease;
}

.subscriptions .fav:hover .svg {
  fill: #000;
}

@media screen and (max-width: 800px) {
  
  .subscriptions .container {
    padding: 2rem 0;
    width: 100%;
    flex-direction: column;
    gap: 3rem;
  }
}


.profile_popup {
    opacity: 0;
    z-index: -9999;
    position: fixed;
    overflow: scroll;
    width: 93%;
    height: 100vh;
    top: 5%;
    left:6%;
    border-radius: 15px;
    padding: 50px;
    background: white;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.profile_popup_close {
    color: black;
    font-size: 22px;
    font-weight: bold;
    position: absolute;
    right: 1%;
    top: 1%;
    font-family: cursive;
    cursor: pointer;
}









/*User css*/


 .main_users-appointment ul {
    display: flex;
    list-style: none;
    padding: 0;
    flex-wrap: wrap;
}


.main_users-appointment ul li .box_inner {
    background: #CBCBCB;
    padding: 25px 15px 25px 15px;
}

.main_users-appointment ul li .box_inner .icoon img {
    width: 64px;
}

.main_users-appointment ul li .box_inner .boxx_inner_content h2 {
    margin: 0 0 0 20px;
    font-size: 20px;
    font-family: sans-serif;
}

.main_users-appointment ul li .box_inner2 {
    text-align: start;
    padding: 0 0 0 19px;
    font-family: sans-serif;
}
section.sec_1 .main_dashbord_sec_1 ul {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  list-style: none;
}

section.sec_1 .main_dashbord_sec_1 ul li {
  border-radius: 20px;
  flex: 0 0 21.33%;
  margin: 10px 0 0 46px;
  padding: 20px 10px 20px 10px;
  height: auto;
}

section.sec_1 .main_dashbord_sec_1 ul li .dashbord_content h3 {
  color: black;
  font-size: 20px;
  font-weight: 800;
  margin: 1px 0 3px 0;
}

section.sec_1 .main_dashbord_sec_1 ul li .dashbord_content p {
  font-size: 17px;
  text-transform: capitalize;
  font-weight: 500;
}

section.sec_1 .main_dashbord_sec_1 ul li:nth-child(1) {
  background: #F9F8C7;
}

section.sec_1 .main_dashbord_sec_1 ul li:nth-child(2) {
  background: #0B5D8B;
}

section.sec_1 .main_dashbord_sec_1 ul li:nth-child(3) {
  background: #63BCB7;
}

section.sec_1 .main_dashbord_sec_1 ul li:nth-child(4) {
  background: #67686d;
}

section.sec_1 .main_dashbord_sec_1 ul li .icon_img img {
  filter: invert(1);
}
section.sec_1 {
  padding: 0px 0;
}


section.sec_2 .top_cruse {
  padding: 30px 10px 20px 10px;
  background: #F1F1F1;
  border-radius: 20px;
}

section.sec_2 .top_cruse h2 {
  font-size: 35px;
  text-align: center;
  text-transform: capitalize;
  font-weight: 700;
  margin: 0 0 20px 0;
}

section.sec_2 .top_cruse ul {
  display: flex;
  justify-content: start;
  align-items: center;
  list-style: none;
  margin: 20px 0 20px 0;
}

section.sec_2 .top_cruse ul li {
  flex: 0 0 20%;
  background: #63BCB7;
  margin: 0 0 0 20px;
  padding: 15px 0 15px 0;
  border-radius: 20px;
  text-align: center;
}

section.sec_2 .top_cruse ul li h4 {
  font-size: 18px;
  font-weight: 500;
  margin: 10px 0 10px 0;
}

section.sec_2 .top_cruse ul li p {
  margin: 0 0 10px 0;
}

section.sec_2 .leading_donor {
  margin: 20px 0 0 0;
  background: #01051D;
  border-radius: 20px;
  padding: 20px 0 20px 0;
}

section.sec_2 .leading_donor h2 {
  font-size: 35px;
  text-align: center;
  text-transform: capitalize;
  font-weight: 700;
  margin: 0 0 20px 0;
  color: white;
}

section.sec_2 .leading_donor ul {
  display: flex;
  align-items: center;
  list-style: none;
  flex-wrap: wrap;
  justify-content: center;
}

section.sec_2 .leading_donor ul li {
  flex: 0 0 45%;
  display: flex;
  justify-content: space-between;
  margin: 0 0 20px 20px;
  background: white;
  border-radius: 20px;
  padding: 15px 20px 15px 20px;
}


.current_collection section.sec_2 {
  background: white;
}

section.sec_2 .current_collection {
  background: white;
  padding: 34px 20px 34px 20px;
  border-radius: 20px;
}

section.sec_2 .current_collection h2 {
  font-size: 35px;
  text-align: center;
  text-transform: capitalize;
  font-weight: 700;
  margin: 0 0 40px 0;
}

section.sec_2 .current_collection ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}

section.sec_2 .current_collection ul li {
  flex: 0 0 100%;
  display: flex;
  justify-content: space-between;
  background: #F2F2F2;
  padding: 23px 5px 23px 8px;
  border-radius: 20px;
  margin: 0 0 15px 0;
  align-items: center;
}

section.sec_2 .current_collection ul li:last-child {
  background: #01051D;
  color: white;
}

section.sec_2 .current_collection ul li span h3 {
  font-size: 20px;
}

section.sec_2 .current_collection ul li span p {
  font-size: 18px;
  text-transform: capitalize;
}
.recent_expense h2 {
  font-size: 35px;
  text-align: center;
  text-transform: capitalize;
  font-weight: 700;
  margin: 0px 0 20px 0;
}

section.sec_3 .recent_expense {
  background: white;
  border-radius: 20px;
  padding: 20px 10px 20px 10px;
}

section.sec_3 .recent_expense ul {
  display: flex;
  list-style: none;
  flex-wrap: wrap;
}

section.sec_3 .recent_expense ul li {
  flex: 0 0 48%;
  background: #F2F2F2;
  border-radius: 20px;
  margin: 0 0 20px 10px;
  display: flex;
  justify-content: space-between;
  padding: 15px 10px 15px 20px;
}



/* end of home page file  */




/* start of managing-guys page  */


.row.first_sec {
background: #01051D;
border-radius: 25px;
}

.service-result tbody tr th:nth-child(2) {
  width: 5%;
}
.guys_management1 {
display: flex;
justify-content: space-between;
align-items: center;
}

.guys_management1 button.btn.btn_add_new_guy {
display: flex;
    align-items: center;
    background: white;
    border-radius: 20px;
    padding: 8px 20px 8px 20px;
    font-size: 18px;
    font-weight: 700;
    border: none;
    margin: 0 0 0 20px;
}

.guys_management1 form.search-box {
display: flex;
align-items: center;
justify-content: center;
}

.guys_management1 form.search-box button img {width: 24px;height: 24px;margin: 0 0px 0 0;position: relative;left: 19px;}


.guys_management1 form.search-box input#search-input {
background: transparent;
border: none;
border-bottom: 2px solid white;
padding: 0px 20px 0 30px;
font-size: 22px;
color: white;
}

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

.guys_managemen2 button.btn.btn_add_new_guy {
display: flex;
align-items: center;
background: white;
border-radius: 20px;
padding: 8px 20px 8px 20px;
font-size: 18px;
font-weight: 700;
border: none;
margin: 0 0 0 20px;
}

.guys_managemen2 button.btn.btn_add_new_guy img {
padding: 0 10px 0 0px;
}

.details_list table tbody tr th button.btn.btn_full_details {
  background: #F9F8C7;
  border-radius: 20px;
  padding: 12px 20px 12px 20px;
  font-size: 18px;
  font-weight: 700;
  border: none;
}


.details_list table {
  width: 100%;
  text-align: center;
}


/* popop css  */

.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  overflow-y: auto;
  z-index: 999;
}

.popup-content {
  position: absolute;
  top: 20px;
  left: 0;
  background-color: #fff;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  right: 0;
  max-width: 850px;
  width: 100%;
  margin: 0 auto;
  height: auto;
}

.close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 27px;
  cursor: pointer;
  font-weight: 600;
}
.popup-content .popop_body {
  padding: 50px 20px 10px 20px;
}

.popup-content .popop_body h2 {
  color: #01051D;
  text-transform: capitalize;
  margin: 0 0 40px 0;
  text-align: start;
}

.popup-content .popop_body form input {
  border: none;
  border-bottom: 1px solid black;
  width: 100%;
  text-align: start;
  padding: 14px 11px 16px 0px;
  display: flex;
  justify-content: start;
  font-size: 16px;
  font-weight: 600;
  color: gray;
}

.popup-content .popop_body form input.submit_btn {
  border: none;
  background: #01051D;
  color: white;
  padding: 15px 15px 15px 15px;
  border-radius: 20px;
  width: auto;
}


input:focus-visible {
  outline: none;
}
.submit_btn {
  display: flex;
  justify-content: start;
  margin: 10px 0 10px 0;
}



/* popop end hoghay hai  */


/* managing guys details page  */


/* graph css */
.animate {
  animation:p 1s .5s both;
}
.pie:before,
.pie:after {
  content:"";
  position:absolute;
  border-radius:50%;
}
.pie:before {
  inset:0;
  background:
    radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
    conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
          mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}
.pie:after {
  inset:calc(50% - var(--b)/2);
  background:var(--c);
  transform:rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
}
.pie {
  --p:20;
  --b:22px;
  --c:darkred;
  --w:150px;
  
  width:var(--w);
  aspect-ratio:1;
  position:relative;
  display:inline-grid;
  margin:5px;
  place-content:center;
  font-size:25px;
  font-weight:bold;
  font-family:sans-serif;
}
.no-round:before {
  background-size:0 0,auto;
}
.no-round:after {
  content:none;
}

/* end of graph css  */





section.guys_details {
    padding: 22px;
    background: #EFEFEF;
    margin: 25px;
    border-radius: 10px;
}

section.guys_details .recent_contri .contributions_inner h2 {
    font-size: 30px;
    text-transform: capitalize;
    margin: 10px 0 15px 0;
}

section.guys_details .recent_contri .contributions_inner ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 30px 0;
    list-style: none;
}

section.guys_details .recent_contri .contributions_inner ul li {
    flex: 0 0 26.33%;
    margin: 0 10px 10px 20px;
    background: #F9F8C7;
    padding: 30px 0 30px 0px;
    text-align: center;
    border-radius: 20px;
    display: block;
}

section.guys_details .recent_contri .contributions_inner ul li h3 {
    font-size: 19px;
    margin: 0 0 11px 0;
}

section.guys_details .recent_contri .contributions_inner {
    background: #F8F8F8;
    border-radius: 30px;
    padding: 20px 20px 0px 20px;
}

.recent_contri ul {
    display: flex;
    align-items: center;
    list-style: none;
    flex-wrap: wrap;
}

.recent_contri ul li {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    background: white;
    border-radius: 20px;
    padding: 10px 10px 10px 10px;
    margin: 0 0 10px 0;
}

section.guys_details .complete_details .first_inner h2 {
  font-size: 30px;
  margin: 0px 0 20px 0;
  text-transform: capitalize;
}

section.guys_details .complete_details .first_inner ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 12px;
}

section.guys_details .complete_details .first_inner ul li p b {
  margin: 0 10px 0 0px;
}

section.guys_details .complete_details .first_inner ul li {
  margin: 10px 0 10px 0;
}

section.guys_details .complete_details .first_inner {
  background: white;
  padding: 30px 10px 15px 10px;
  border-radius: 20px;
  margin: 0 0 20px 0;
}

section.guys_details .complete_details .second_inner {
  background: #BC9B63;
  border-radius: 20px;
  padding: 20px 10px 10px 30px;
}

section.guys_details .complete_details .second_inner h2 {
  font-size: 30px;
  margin: 0 0 30px 0;
}

section.guys_details .complete_details .second_inner ul {
  display: flex;
  list-style: none;
  align-items: center;
  justify-content: space-between;
}

section.guys_details .complete_details .second_inner ul li h2 {
  margin: 0 0 11px 0;
}



/* other popop css */

.popup-content .popop_body button img {
  filter: invert(1);
}
.popup-content .popop_body  .search_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row-reverse;
}

.popup-content .popop_body .search_box input#search-input {
  width: 100% !important;
  padding: 10px 0 20px 20px;
}


.popup-content .popop_body  .search_box .search-input {
  width: 100%;
  margin: 0px 0 -10px 0;
}

.popup-content .popop_body .search_box .search-input label {
  font-size: 22px;
  font-weight: 600;
}


/* other popop css end  */


/* donar detail page css start  */

section.donar_details {
  background: #EFEFEF;
  margin: 22px;
  border-radius: 20px;
  padding: 22px;
}

section.donar_details .donar_recent_contri {
  background: #F8F8F8;
  padding: 12px 10px 10px 10px;
  border-radius: 20px;
}

section.donar_details .donar_recent_contri h2 {
  font-size: 30px;
  text-transform: capitalize;
  margin: 10px 0 30px 0;
}

section.donar_details .donar_recent_contri ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}

section.donar_details .donar_recent_contri ul li {
  flex: 0 0 100%;
  display: flex;
  justify-content: space-between;
  margin: 0 0 20px 0;
  background: #F9F8C7;
  padding: 22px 10px 22px 10px;
  border-radius: 20px;
}

section.donar_details .donar_recent_contri h4 {
  margin: 0 0 20px 20px;
  font-size: 20px;
  font-weight: 800;
}

section.donar_details .full_donar_details {
  background: white;
  padding: 22px 20px 17px 30px;
  border-radius: 20px;
}

section.donar_details .full_donar_details h2 {
  font-size: 30px;
  text-transform: capitalize;
  margin: 0 0 40px 0;
}

section.donar_details .full_donar_details ul {
  display: flex;
  list-style: none;
  flex-wrap: wrap;
}

section.donar_details .full_donar_details ul li {
  flex: 0 0 100%;
  margin: 0 0 18px 0;
}

section.donar_details .full_donar_details ul li p b {
  font-size: 19px;
  font-weight: 700;
}



/* end of donar details page end  */



/* patrol management page css  */

.guys_management1.patrol_management {
  justify-content: space-between;
  padding: 0 20px 0 20px;
}
section.patrol_management_2 .main_inner_section ul {
  display: flex;
  list-style: none;
  flex-wrap: wrap;
}

section.patrol_management_2 .main_inner_section ul li {
  flex: 0 0 27%;
  background: white;
  border-radius: 30px;
  text-align: center;
  margin: 0 30px 20px 30px;
  padding: 20px 10px 20px 10px;
}

section.patrol_management_2 .main_inner_section ul li .box-inner {
  display: flex;
  align-items: center;
  background: #CBCBCB;
  border-radius: 20px;
  padding: 25px 15px 25px 15px;
}

section.patrol_management_2 .main_inner_section ul li .box-inner .icon img {
  width: 64px;
  filter: invert(1);
}

section.patrol_management_2 .main_inner_section ul li .box-inner .content {
  text-align: start;
}

section.patrol_management_2 .main_inner_section ul li .box-inner .content h4 {
  font-size: 15px;
  margin: 5px 0 5px 0;
}

section.patrol_management_2 .main_inner_section ul li .\32 box-inner {
  padding: 20px 10px 20px 10px;
}

section.patrol_management_2 .main_inner_section ul li .\32 box-inner p {
  padding: 5px 0 10px 0;
  text-align: start;
}

section.patrol_management_2 .main_inner_section ul li .\32 box-inner .box_btn {
  margin: 20px 0 -10px 0;
}

section.patrol_management_2 .main_inner_section ul li .\32 box-inner .box_btn button.btn.full_details_btn {
  background: #01051D;
  border-radius: 20px;
  padding: 12px 30px 12px 30px;
  font-size: 18px;
  font-weight: 700;
  border: none;
  color: white;
}

/* end of patrol management page  */


/* third popop section start  */
.popup-content .popop_body .increament_sec {
  background: #E4E4E4;
  width: 100%;
  padding: 20px 10px 10px 10px;
  border-radius: 20px;
  margin: 10px 0 0 0;
}

.popup-content .popop_body .increament_sec h3 {
  font-size: 20px;
  margin: 0 0 20px 0;
}

.popup-content .popop_body .increament_sec div#inputSection {display: flex;flex-wrap: wrap;}

.popup-content .popop_body .increament_sec div#inputSection input {
  flex: 0 0 45%;
  background: white;
  border-radius: 25px;
  border: none;
  margin: 0 10px 20px 10px;
  padding: 20px 0 20px 10px;
}

.popup-content .popop_body .increament_sec button {
  border: none;
  background: #01051D;
  color: white;
  padding: 15px 15px 15px 15px;
  border-radius: 20px;
  width: auto;
}

.input-container {
  flex: 0 0 45%;
  margin: 0 0 0 10px;
  position: relative;
  left: -8px;
}
.popup-content .popop_body form .general_pickup {
  background: #F9F8C7;
  padding: 32px 10px 32px 10px;
  border-radius: 20px;
}

.popup-content .popop_body form .general_pickup h3 {
  font-size: 18px;
  margin: 0px 0 20px 0;
}

.popup-content .popop_body form .general_pickup input {
  width: 100%;
  border: none;
  padding: 30px 0px 30px 0;
  text-align: center;
  border-radius: 30px;
}


/* third popop section end  */

/* start cruiser detail page css  */
section.cruiser_details {
  background: #EFEFEF;
  margin: 22px;
  border-radius: 20px;
}

.cruiser_target {
  background: #BC9B63;
  padding: 20px 20px 20px 20px;
  border-radius: 20px;
}

.cruiser_target h2 {
  font-size: 25px;
  margin: 0 0 15px 0;
}

.cruiser_target ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  align-items: center;
}


.cruiser_comp.det {
  background: white;
  padding: 20px 10px 20px 10px;
  border-radius: 20px;
}

.cruiser_comp.det h2 {
  font-size: 25px;
  margin: 0 0 10px 0;
}

.cruiser_comp.det ul {
  display: flex;
  list-style: none;
  flex-wrap: wrap;
}

.cruiser_comp.det ul li {
  flex: 0 0 100%;
  margin: 0px 0 15px 10px;
}
.details_list.\31 4th_patrol h2 {
  font-size: 30px;
  margin: 0 0 20px 10px;
  font-weight: 800;
}

.details_list.\31 4th_patrol {
  background: white;
  padding: 20px 10px 20px 10px;
  border-radius: 20px;
}

.details_list.\31 4th_patrol table tbody tr {
  background: #F9F8C7;
}

.details_list.\31 4th_patrol table tbody tr th button.btn.btn_full_details {
  background: #01051D;
  color: white;
}


.details_list.\31 4th_patrol tr.change_donor {
  margin: -32px 0 7px 0;
  border-radius: 0;
  border-bottom-left-radius: 22px;
  border-bottom-right-radius: 22px;
  display: none;
}

.details_list.\31 4th_patrol tr.change_donor td button.btn.btn_full_details.replace_donor {
  background: #BC9B63;
  border-radius: 20px;
  padding: 12px 20px 12px 20px;
  font-size: 18px;
  font-weight: 700;
  border: none;
}

.details_list.\31 4th_patrol tr.change_donor td form.search-box {
  display: flex;
  align-items: center;
  margin: 0 0 0 50px;
}

.details_list.\31 4th_patrol tr.change_donor td form.search-box button img {
  filter: invert(1);
  position: relative;
  left: 50px;
}

.details_list.\31 4th_patrol tr.change_donor td form.search-box input#search-input {
  border: none;
  background: white;
  padding: 20px 20px 20px 20px;
  border-radius: 20px;
  text-align: center;
  font-size: 19px;
}
.details_list.\31 4th_patrol.addresses tr:nth-child(1) {
  background: #BC9B63;
  padding: 20px 0 20px 0;
}

.details_list.\31 4th_patrol.addresses tr {
  background: #F8F8F8;
}
th.hidden_gem .hello {
  display: flex;
  margin: 20px 0 0 0;
}

th.hidden_gem .hello form.search-box button img {
  filter: invert(1);
  position: relative;
  left: 50px;
  top: 6px;
}

th.hidden_gem .hello form.search-box input#search-input {
  border: none;
  padding: 15px 0 15px 0;
  text-align: center;
  border-radius: 21px;
  font-size: 19px;
}

th.hidden_gem {
  opacity: 0;
  display: none;
}
th.hidden_gem.active {
  opacity: 1;
  display: block;
}


/* now expense management page csss  */

section.bar_graph_sec {
  background: url(../images/Chart.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin: 40px 0 20px 0;
}
canvas#barChart {
  position: relative;
  left: 24px !important;
  top: -6px;
}

.\32 nd_first_inner_expense_list ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}

.\32 nd_first_inner_expense_list ul li {
  flex: 0 0 43%;
  margin: 0px 10px 10px 10px;
  padding: 20px 10px 20px 10px;
  border-radius: 25px;
}

.\32 nd_first_inner_expense_list ul li:nth-child(1) {
  background: #63BCB7;
}

.\32 nd_first_inner_expense_list ul li:nth-child(2) {
  background: #F9F8C7;
}

.\32 nd_first_inner_expense_list ul li:nth-child(3) {
  background: #BC9B63;
}

.\32 nd_first_inner_expense_list ul li:nth-child(4) {
  background: #0B5D8B;
}

.\32 nd_first_inner_expense_list ul li h4 {
  text-align: center;
  margin: 0 0 20px 0;
}

.\32 nd_first_inner_expense_list ul li p {
  text-align: center;
  margin: 0 0 10px 0;
}

.\32 nd_first_inner_expense_list .adding_new_expense {
  background: white;
  padding: 30px 20px 40px 20px;
  border-radius: 20px;
}

.\32 nd_first_inner_expense_list .adding_new_expense h2 {
  text-align: center;
  margin: 0 0 20px 0;
}

.\32 nd_first_inner_expense_list .adding_new_expense form input {
  width: 100%;
  border: none;
  background: #E4E4E4;
  padding: 15px 0 15px 4px;
  border-radius: 20px;
}

.fisrt_inner_epense_list table tbody tr th {
  display: inline-block;
  border: none;
  border-radius: 20px;
  font-size: 13px;
  margin: 0 0 0 8px;
  font-weight: 400;
}

.fisrt_inner_epense_list table tbody tr {background: white;display: flex;align-items: center;padding: 15px 5px 15px 5px;border-radius: 30px;width: 100%;justify-content: center;margin: 0 0 11px 0;flex-wrap: wrap;}

.fisrt_inner_epense_list {
  height: 550px;
  overflow-y: scroll;
}

.\32 nd_first_inner_expense_list .adding_new_expense form input[type="submit"] {
  background: #01051D;
  color: white;
  width: 50%;
}

.\32 nd_first_inner_expense_list .adding_new_expense form .submit_bt {
  display: flex;
}


/* end of the page  */


/* adding donation page css start  */


section.adding_donations {
  background: white;
  margin: 22px;
  border-radius: 30px;
}

section.adding_donations .form_adding_donations .search_box {
  border-bottom: 2px solid black;
  position: relative;
}

section.adding_donations .form_adding_donations .search_box button img {
  filter: invert(1);
}

section.adding_donations .form_adding_donations .search_box img {}

button {}

section.adding_donations .form_adding_donations .search_box .search-input {
  display: flex;
  flex-direction: column;
}

section.adding_donations .form_adding_donations .search_box .search-input input {
  border: none;
  text-align: start;
  padding: 20px 0 10px 0;
}

section.adding_donations .form_adding_donations .search_box button {
  position: absolute;
  left: unset;
  right: 30px;
  top: 23px;
}

section.adding_donations .form_adding_donations .search_box .search-input label {
  font-size: 23px;
  font-weight: 500;
}

section.adding_donations .form_adding_donations {
  padding: 50px 10px 50px 10px;
}
section.adding_donations .form_adding_donations .Input {
  display: flex;
  flex-direction: column;
}

section.adding_donations .form_adding_donations .Input label {
  font-size: 23px;
  font-weight: 500;
}

section.adding_donations .form_adding_donations .Input input {
  width: 100%;
  border: none;
  border-bottom: 2px solid black;
  padding: 10px 0 10px 0;
}

.form_adding_donations .inner_flex p {
  position: absolute;
  top: 30px;
  left: unset;
  right: 0;
  font-size: 26px;
}

.form_adding_donations .inner_flex {
  position: relative;
}

section.adding_donations .form_adding_donations .select_box h3 {
  font-size: 24px;
  font-weight: 700;
}

section.adding_donations .form_adding_donations .select_box ul {
  display: flex;
  list-style: none;
  margin: 20px 0 30px 0;
}

section.adding_donations .form_adding_donations .select_box ul li {
  background: #01051d;
  border-radius: 20px;
  flex: 0 0 20%;
  margin: 0 0 0 20px;
  height: 90px;
}

.select_box ul li input {
  width: 100%;
  display: none;
}

.select_box ul li.step-label {
  width: calc(100% + 12px);
  height: calc(100% - 20px);
  background: #fff;
  box-shadow: 1px 1px 5px rgba(0,0,0,.4);
  position: relative;
  cursor: pointer;
  font-size: 11px;
  text-align: center;
  margin: 0 -5px;
  margin-bottom: 20px;
  transition: all .3s;
}

.select_box ul li label.step-label {
  /* box-shadow: 1px 1px 5px rgba(0,0,0,.4); */
  position: relative;
  cursor: pointer;
  font-size: 11px;
  text-align: center;
  /* margin: 0 -5px; */
  margin-bottom: 20px;
  transition: all .3s;
  background: #01051d;
  height: 90px;
  display: block;
  border-radius: 30px;
}

.select_box ul li label.step-label h3.step-label-heading {
  margin: 0;
  font-weight: 600;
  text-align: center;
  font-size: 22px;
  padding: 10px 10px;
  color: #000;
  position: relative;
  line-height: 1.2;
  margin: 30px 0 0 0;
}

.step-label:before {
  content: "";
  background: #3640e4;
  top: 9px;
  left: unset;
  right: 10px;
  transform: scale(0);
  color: #fff;
  display: block;
  border-radius: 50%;
  position: absolute;
  width: 26px;
  height: 26px;
  text-align: center;
  line-height: 28px;
  transition-duration: .1s;
  font-weight: 900;
  font-size: 14px;
  z-index: 1;
}

:checked+label:before {
  transform: scale(1);
}


section.adding_donations .form_adding_donations .select_box {
  margin: 0 0 50px 0;
}


section.adding_donations .form_adding_donations .select_box ul li:nth-child(2) {
    background: #63BCB7;
}

section.adding_donations .form_adding_donations .select_box ul li:nth-child(2) label.step-label {
    background: #63bbb6;
    margin: -30px 0 0 0;
    height: 120px;
}
section.adding_donations .form_adding_donations .select_box ul li:nth-child(2) label.step-label,section.adding_donations .form_adding_donations .select_box ul li:nth-child(1) label.step-label, section.adding_donations .form_adding_donations .select_box ul li:nth-child(3) label.step-label {
  margin: -30px 0 0 0;
  height: 120px;
}

section.adding_donations .form_adding_donations .select_box ul li:nth-child(2) label.step-label h3.step-label-heading,section.adding_donations .form_adding_donations .select_box ul li:nth-child(1) label.step-label h3.step-label-heading,section.adding_donations .form_adding_donations .select_box ul li:nth-child(3) label.step-label h3.step-label-heading {
    padding: 40px 0 0 0;
}

section.adding_donations .form_adding_donations .select_box ul li:nth-child(3) {
    background: #F9F8C7;
}

section.adding_donations .form_adding_donations .select_box ul li:nth-child(3) label.step-label {
  background: #f9f8c7;
}
section.adding_donations .form_adding_donations .select_box ul li:first-child label.step-label h3.step-label-heading {
  color: white;
}
section.adding_donations .form_adding_donations .subnmits_btn_ {
  display: flex;
}

section.adding_donations .form_adding_donations .subnmits_btn_ button.add_dontaion_btn1 {
  background: #01051D;
  padding: 20px 10px 20px 10px;
  border-radius: 20px;
  margin: 0 30px 0 0px;
  color: white;
  font-size: 17px;
  border: none;
}

section.adding_donations .form_adding_donations .subnmits_btn_ button.add_dontaion_btn1.btn2 {
  background: #F9F8C7;
  color: black;
  padding: 20px 30px 20px 30px;
}


/* and of the page  */


/* stattics page css :start  */
.main_dashbord_sec_2_other ul {display: flex;justify-content: center;align-items: center;text-align: center;list-style: none;flex-wrap: wrap;}

.main_dashbord_sec_2_other ul li {
    border-radius: 20px;
    flex: 0 0 20.33%;
    margin: 10px 0 10px 46px;
    padding: 20px 10px 20px 10px;
    height: auto;
}

.main_dashbord_sec_2_other ul li .icon_img img {
    filter: invert(1);
    margin: 0 0 10px 0;
}

.main_dashbord_sec_2_other ul li .dashbord_content h3 {
    color: black;
    font-size: 20px;
    font-weight: 800;
    margin: 1px 0 3px 0;
}

.main_dashbord_sec_2_other ul li .dashbord_content p {
    margin: 10px 0 0 0;
}

.main_dashbord_sec_2_other ul li:nth-child(1) {
    background: #9D0000;
    color: white;
}

.main_dashbord_sec_2_other ul li:nth-child(1) .icon_img img {
    filter: invert(1) brightness(60.5);
}

li {}

.main_dashbord_sec_2_other ul li:nth-child(1) .dashbord_content h3 {
    color: white;
}

.main_dashbord_sec_2_other ul li:nth-child(2) {
    background: #BC9B63;
}

.main_dashbord_sec_2_other ul li:nth-child(3) {
    background: #F9F8C7;
}

.main_dashbord_sec_2_other ul li:nth-child(4) {
    background: #63BCB7;
}

.main_dashbord_sec_2_other ul li:nth-child(5),.main_dashbord_sec_2_other ul li:nth-child(6),.main_dashbord_sec_2_other ul li:nth-child(7),.main_dashbord_sec_2_other ul li:nth-child(8) {
    background: white;
}
.purim_tax {
    background: white;
    padding: 10px 20px 20px 10px;
    align-items: center;
    text-align: center;
    border-radius: 30px;
}

.purim_tax ul {
    display: flex;
    list-style: none;
    justify-content: end;
    align-items: center;
}

.purim_tax ul li {margin: 0 0px 0 20px;}

.purim_tax ul li:nth-child(1) {
    background: #63BCB7;
    padding: 6px 3px 5px 4px;
    border-radius: 20px;
}

.purim_tax ul li:nth-child(2) {
    background: #E4E4E4;
    padding: 6px 23px 5px 24px;
    border-radius: 20px;
}

.purim_tax h2 {
    text-align: center;
    margin: 20px 0 20px 0;
}

.purim_tax .total_amount {
    background: #63BCB7;
    border-radius: 20px;
    padding: 20px 0 20px 0;
    width: 231px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}
.list_of_collection ul {
  display: flex;
  width: 100%;
  overflow-x: auto;
  flex-wrap: nowrap;
  list-style: none;
}

.list_of_collection ul li {
  background: #E4E4E4;
  padding: 20px 20px 30px 20px;
  border-radius: 20px;
  flex: 0 0 20%;
  margin: 0 70px 30px 0;
  text-align: center;
  position: relative;
}

.list_of_collection ul li img {
  filter: invert(1);
  margin: 0 0 10px 0;
}

.list_of_collection ul li h3 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 20px 0;
}

.list_of_collection ul li .icon_img {
  background: white;
  width: 50px;
  height: auto;
  border-radius: 20px;
  padding: 10px 0 0 0;
  position: absolute;
  top: 10px;
  left: unset;
  right: 10px;
}

.list_of_collection ul li .icon_img img {
  height: 30px;
  width: 30px;
  filter: none;
}

.list_of_collection {
  background: white;
  padding: 30px 15px 30px 15px;
  border-radius: 22px;
}
.list_of_collection h5 {
  font-size: 16px;
  margin: 0 0 20px 0;
}


/* and of the section  */


/* start of online mode section  */


.previous_back h2 {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 30px 0;
}

.previous_back ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
}

.previous_back ul li {
  background: #FFFFFF;
  margin: 0 30px 0 0;
  padding: 10px 30px 10px 30px;
  border-radius: 20px;
  height: 235px;
}

.previous_back ul li h2 {
  font-size: 25px;
  margin: 20px 0 0px 0;
  text-align: center;
}

.previous_back ul li .inner {
  text-align: center;
  background: #F9F8C7;
  margin: 10px 0 7px 0;
  padding: 0px 0 5px 0;
  border-radius: 20px;
}

.previous_back ul li .inner img {
  filter: invert(1);
  margin: 10px 0 10px 0;
}

.previous_back ul li .inner h4 {margin: 0 0 10px 0;}

.previous_back ul li .inner p {
  background: #01051D;
  color: white;
  width: 77%;
  margin: 0 auto 10px;
  border-radius: 12px;
  padding: 2px 0 3px 0;
}


.previous_back ul li:last-child h2 {
  padding: 60px 0 0 0;
}

.previous_back ul li:last-child .inner_empty {
  text-align: center;
  margin: 10px 0 0 0;
  background: white;
}

.previous_back ul li:last-child .inner_empty p {
  font-size: 22px;
  font-weight: 800;
}
section.online_sec_2 .openeing_a_wiper {
  background: #EFEFEF;
  padding: 30px 10px 30px 10px;
  border-radius: 20px;
}

section.online_sec_2 .openeing_a_wiper h2 {
  font-size: 30px;
  margin: 0 0 30px 0;
}

section.online_sec_2 .openeing_a_wiper form input {
  width: 100%;
  border: none;
  padding: 20px 10px 20px 20px;
  border-radius: 20px;
  font-size: 20px;
}


section.online_sec_2 .openeing_a_wiper form .lesson_obj {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}

section.online_sec_2 .openeing_a_wiper form .lesson_obj input {
  margin: 0 20px 0 10px;
}
section.online_sec_2 .openeing_a_wiper form .file_upload {
  background: white;
  padding: 40px 0 40px 0;
  text-align: center;
  border-radius: 30px;
  margin: 0 10px 0 10px;
}

section.online_sec_2 .openeing_a_wiper form .file_upload label.btn-up {
  font-size: 22px;
  font-weight: 500;
  color: gray;
}

section.online_sec_2 .openeing_a_wiper form .file_upload .submit_btn button.add_wiper_btn {
  background: #01051D;
}

section.online_sec_2 .openeing_a_wiper form .submit_btn {
  justify-content: center;
}

section.online_sec_2 .openeing_a_wiper form .submit_btn button.add_wiper_btn {
  background: #01051D;
  color: white;
  padding: 20px 40px 20px 40px;
  font-size: 23px;
  border: none;
  border-radius: 20px;
}
.col-md-8 {
  width: 66.66667%; /* 8 out of 12 columns */
  float: left;
}
.col-md-4 {
  width: 33.33333%; /* 4 out of 12 columns */
  float: left;
}

/* last page csss  */

.row.first_sec.donation_manang_1 {
  padding: 20px 20px 20px 10px;
}
.custom-select select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  border: none;
  padding: 8px;
  font-size: 16px;
  width: 200px; /* Adjust as needed */
}

/* Style the arrow icon */
.custom-select::after {
  content: '\25BC'; /* Unicode character for down arrow */
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

/* Style the container to create a border */
.custom-select {
  position: relative;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  margin: 0px 0 0 20px;
}

/* Style option on hover */
.custom-select option:hover {
  background-color: #f5f5f5;
}

/* Style selected option */
.custom-select option:checked {
  background-color: #e0e0e0;
}
.last_edit {
  display: flex;
  flex-direction: column;
}

.last_edit label {
  font-size: 18px;
  margin: -10px 0 0px 0;
}

.last_edit input#\34 50NIS {
  width: 100%;
  border: none;
  background: lightgray;
  padding: 16px 10px 17px 10px;
  font-size: 16px;
  border-radius: 20px;
  margin: 9px 0 0 0;
}

form.search-box input#search-input {
  background: lightgray;
}

th.hidden_gem.active form.search-box {
  margin: 10px 10px 0 9px;
}

.custom-select {
  border-radius: 20px;
  height: 50px;
  margin: 11px 0px 0 30px;
  background: lightgray;
  border: none;
}
button.btn.btn_full_details.delete_donate {
  background: #9d0000 !important;
  color: white;
}
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
.filters {
  width: 20%;
  height: 100%;
}

.services_content {
  width: 100%;
  height: 100%;
}

.services_content form button {
     background: none;
    border: none;
    padding: 0;
    vertical-align: -15px;
    width: 50px;
    margin-left: 0px;
    position: absolute;
    left: 3px;
}


.services_content form #search-input {
  vertical-align: 4px !important;
    width: 70% !important;
    border: 2px solid white !important;
    border-radius: 10px !important;
    padding: 10px 50px 10px 50px !important;
}

.services_content form .search_button {
      width: 30%;
    border: 7px solid white;
    border-radius: 10px;
    padding: 10px 0px 10px 0px;
    background: white;
    color: black;
}


.main_users-appointment li {
  border: 2px solid black;
    border-radius: 10px;
}

.main_users-appointment li .box_inner {
  border-radius: 10px;                                         
    display: flex;
    align-items: center;
}


.main_users-appointment li .box_inner .icoon {
    border: 2px solid black;
    border-radius: 50%;
    overflow: hidden;
    padding: 0px;
    width: 120px;
    height: 100px;                                                   
}

.main_users-appointment li .box_inner .boxx_inner_content {
    width: 75%;
}

.profile_pic img {
    width: 150px;
    border-radius: 50%;
    border: 1px solid black;
    margin-right: 50px;
    height: 150px;
    object-fit: cover;
}

.banner_pic img { 
    width: 300px;
    border-radius: 10px;
    margin-right: 50px;
}

.profile_content {
  display: flex;
  justify-content: center;
}
.profilepage {
  max-width: 1100px;
}

.profilepage_banner {
    display: flex;
    justify-content: center;
}



.profilepage_banner img {
    width: 100%;
    border-radius: 10px;
}

.profilepage_profile {
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 50px;
    margin-top: 30px;
}

.profilepage_profile img {
    width: 150px;
    object-fit: contain;
    height: 150px;
    border-radius: 50%;
    border: 2px solid black;
}

.doctor_navbar {
    padding: 20px 0px;
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

.doctor_navbar a {
    text-decoration: none;
    color: white;
    background: black;
    padding: 12px 30px;
    border-radius: 10px;
}

.doctor_navbar a:hover {
    color: white;
}


.profile_about, .profile_location {
  margin-top: 30px;
}


.services_content .search-container {
display: flex;
    border: 5px solid #007bff;
    border-radius: 24px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: white;
    justify-content: space-between;
    align-items: center;
    padding-left: 5px;
}

.services_content .first-input {
  width: 55%;
  border-right: 1px solid black;


}

.services_content .first-input input {
  height: 26px;
  border: 0px;
  border-radius: 0px;
}

.services_content .second-input {
  width: 40%;
} 

.services_content .second-input input {
  border: none !important;
  height: 26px;
}

.services_content .button_wrapper {
  height: 100%;
}


.services_content .second-input .select2-container {
  width: 100% !important;
  height: 45px;
}

.services_content .second-input .select2-container .selection {
  height: 45px;
}


.services_content .second-input .select2-container .selection .select2-selection {
  display: flex;
  align-items: center;
  height: 45px;
  border: 0px;
}

.select2-selection__arrow {
  display: none;
}
.services_content .button_wrapper {
  width: 15%;
}

.services_content .button_wrapper input {
  background-color: #007bff;
    height: 61px;
    margin-top: -17px;
    margin-bottom: -17px;
    margin-left: 8px;
border-radius: 0px 24px 24px 0px;
  border:1px solid #007bff;
}

.services_content .button_wrapper label {
  visibility: hidden;
}

.services_content .input_wrapper {
  display: flex;
  justify-content: space-between;
}


.search--bar {
  width: 90%;
}

.services_content label {
  font-size: 14px;
}


body{
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background: #80808038;
}
::selection{
  color:var(--white-color);
  background: var(--black-color);
}

/* bootstrap things  */


.row {
  display: flex;
  flex-wrap: wrap;
  margin: -10px; 
}

.col-md-12, .col-md-6 {
  box-sizing: border-box;
  padding: 10px; 
}

.col-md-12 {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0;
}

.col-md-6 {
  flex: 0 0 50%;
  max-width: 50%;
}


/* end of bootstrap things */

.sidebar.active{
  width: 200px;
}
.sidebar .logo_content .logo{
  color:var(--white-color);
  display: flex;
  height:50px;
  width:100%;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition:all 0.5s ease;
}
.sidebar.active .logo_content .logo{
  opacity:1;
  pointer-events: none;
}
.logo_content .logo .logo_name{
  font-size: 20px;
  font-weight: 400;
}
.sidebar #btn{
  position:absolute;
  color:var(--white-color);
  top:6px;
  left:50%;
  font-size: 22px;
  height: 30px;
  width:50px;
  text-align: center;
  line-height: 50px;
  transform: translateX(-50%);
  cursor: pointer;
}
.sidebar.active #btn{
  left:90%;
}
.sidebar ul{
  margin-top: 75px;
  padding: 0 0 0 20px;
}
.sidebar ul li{
  position:relative;
  height: 60px;
  width:100%;
  margin: 14px 0px;
  list-style: none;
  line-height: 50px;
}
.sidebar ul li .tooltip{
  position:absolute;
  left: 135px;
  top:0;
  transform: translate(-30%, -70%);
  border-radius: 6px;
  height:35px;
  width: max-content;
  background: var(--white-color);
  line-height: 35px;
  text-align: center;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  transition:0s;
  opacity:0;
  pointer-events: none;
  display:block;
  padding: 0 10px 0 10px;
}
.sidebar ul li .tooltip::before{
  content:'';
  width:0;
  height:0;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  border-right:10px solid var(--white-color);
  position:absolute;
  left:-8px;
  top:7px;
}
.sidebar.active ul li .tooltip{
  display:none;
}
.sidebar ul li:hover .tooltip{
  transition:all 0.5s ease;
  opacity:1;
  top:50%;
}
.sidebar ul li input{
  position:absolute;
  height:100%;
  width:100%;
  left:0;
  top:0;
  border-radius: 12px;
  outline:none;
  border:none;
  background: #1d1b31;
  padding-left:50px;
  font-size: 18px;
  color:var(--white-color);
}
.sidebar ul li .bx-search{
  position:relative;
  z-index: 99;
  color:var(--white-color);
  font-size: 22px;
  transition:all 0.5s ease;
}
.sidebar ul li .bx-search:hover{
  background:var(--white-color);
  color:#1d1b31;
}
.sidebar ul li a{
  color:var(--white-color);
  display:flex;
  align-items:center;
  text-decoration: none;
  border-radius: 12px;
  white-space: nowrap;
  transition:all 0.4s ease;
}

.sidebar ul li i{
  font-size: 18px;
  font-weight: 400;
  height:50px;
  min-width: 50px;
  border-radius: 12px;
  line-height: 50px;
  text-align: center;
}
.sidebar .links_name{
  font-size: 15px;
  font-weight: 600;
  opacity:0;
  pointer-events: none;
  transition:all 0.3s ease;
  text-transform: capitalize;
}
.sidebar.active .links_name{
  transition:0s;
  opacity:1;
  pointer-events: auto;
  color: black;
}
.sidebar .content{
  position:absolute;
  color:var(--white-color);
  bottom:0;
  left:0;
  width:100%;
}
.sidebar .content .user{
  position:relative;
  padding:10px 6px;
  height:60px;
  background: none;
  transition:all 0.4s ease;
}
.sidebar.active .content .user{
  background:var(--light-black);
}
.content .user .user_details{
  display:flex;
  align-items:center;
  opacity:0;
  pointer-events: none;
  white-space: nowrap;
  transition:all 0.4s ease;
}
.sidebar.active .user .user_details{
  opacity:1;
  pointer-events: auto;
}
.content .user .user_details img{
  height:45px;
  width:45px;
  object-fit: cover;
  border-radius: 12px;
}
.name_job{
  margin-left:10px;
}
 .user_details .name{
  font-size: 15px;
  font-weight: 400;
}
 .user_details .job{
  font-size: 12px; 
}
 #log_out{
  position:absolute;
  bottom:5px;
  left:50%;
  transform:translateX(-50%);
  min-width: 50px;
  line-height: 50px;
  font-size: 20px;
  border-radius: 12px;
  text-align: center;
  transition:all 0.4s ease;
}
.sidebar.active .user #log_out{
  left:80%;
  background:none;
}
.home_content{
/*  position:fixed;*/
  height: 100%;
  right: unset;
  background:var(--sky-color);
  padding: 0px;
/*  box-shadow: 0 5px 10px rgba(0,0,0,0.2);*/
  transition:all 0.5s ease;
  overflow-y: auto; 
  padding: 0px;
  overflow-x: hidden;
}

.sub_status {
      border: 1px solid black;
    padding: 20px;
    border-radius: 10px;
    width: 96%;
    left: 23px;
    position: relative;
}

table tbody tr td {
  background: none !important;
  border: none !important;
  width: 100% !important;
  padding: 5px !important;
}
table tbody tr td input {
  width: 100% !important;
}
table tbody tr td label {
  padding-top: 10px !important;
}
/*table tbody tr {
    display: flex;
    flex-direction: column;
}*/


.sidebar.active ~ .home_content{
  z-index:100;
/*   width:calc(100% - 240px);
  left:240px; */
}        
.sidebar.active ul.nav_list li a {
  flex-direction: row-reverse;
  gap: 16px;
  transition: 1s ease;
}
.sidebar ul li a:hover img {
  /* filter: invert(1); */
}
.header .main_upper_header {
  background: #01051D;
  padding: 10px 20px;
}

.header .main_upper_header ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header .main_upper_header ul li button.btn.main_header_btn {
  border-radius: 10px;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  border: none;
  padding: 2px 10px 2px 5px;
}

.home_content.active {
/*   width: calc(100% - 200px);
  left: 200px; */
}

.sidebar.active ul.nav_list li a {
  display: flex;
  flex-direction: row;
  transition: 1s ease;
}
.sidebar ul li a img {
  width: 20px;
  height: 20px;
}
.main_upper_header {
  display: none;
}

.main_users-appointment ul {
    display: flex;
    list-style: none;
    padding: 0;
    flex-wrap: wrap;
    gap: 5%;
}

.main_users-appointment ul li {
  background: white;
  border-radius: 30px;
  text-align: center;
  margin: 0 0px 20px 0px;
  padding: 20px 10px 20px 10px; 
  width: 30%;
}

        .main_users-appointment ul li .box_inner {
            display: flex;
            align-items: start;
            background: #CBCBCB;
            align-items: center;
            border-radius: 20px;
            padding: 25px 15px 25px 15px;
        }

        .main_users-appointment ul li .box_inner .icoon img {
            width: 100px;
            height: 100px;
        }

        .main_users-appointment ul li .box_inner .boxx_inner_content h2 {
            margin: 0 0 0 20px;
            font-size: 20px;
            font-family: sans-serif;
        }

        .main_users-appointment ul li .box_inner2 {
            text-align: start;
            padding: 0 0 0 19px;
            margin-top: 20px;
            font-family: sans-serif;
        }

        section.sec_1 .main_dashbord_sec_1 ul {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            list-style: none;
        }

        section.sec_1 .main_dashbord_sec_1 ul li {
            border-radius: 20px;
            flex: 0 0 21.33%;
            margin: 10px 0 0 46px;
            padding: 20px 10px 20px 10px;
            height: auto;
        }

        section.sec_1 .main_dashbord_sec_1 ul li .dashbord_content h3 {
            color: black;
            font-size: 20px;
            font-weight: 800;
            margin: 1px 0 3px 0;
        }

        section.sec_1 .main_dashbord_sec_1 ul li .dashbord_content p {
            font-size: 17px;
            text-transform: capitalize;
            font-weight: 500;
        }

        section.sec_1 .main_dashbord_sec_1 ul li:nth-child(1) {
            background: #F9F8C7;
        }

        section.sec_1 .main_dashbord_sec_1 ul li:nth-child(2) {
            background: #0B5D8B;
        }

        section.sec_1 .main_dashbord_sec_1 ul li:nth-child(3) {
            background: #63BCB7;
        }

        section.sec_1 .main_dashbord_sec_1 ul li:nth-child(4) {
            background: #67686d;
        }

        section.sec_1 .main_dashbord_sec_1 ul li .icon_img img {
            filter: invert(1);
        }

        section.sec_1 {
            padding: 0px 0;
        }
        section.doc-services {
    padding: 60px 0;
}

/*.main-docc-profile h2 {
    font-size: 50px;
    margin: 0 0 20px 0;
    font-family: sans-serif;
    font-weight: 700;
}*/

.main-docc-profile .doc-pro-box {
    display: flex;
    align-items: center;
    background: white;
    padding: 10px;
    border-radius: 10px;
    gap: 30px;
    margin-bottom: 20px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.main-docc-profile .doc-pro-box .doc-pro-img {
    width: 250px;
    object-fit: cover;
    height: 200px;
}

.main-docc-profile .doc-pro-box .doc-pro-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-docc-profile .doc-pro-box .doc-pro-content h5 {
    font-size: 35px;
    width: 340px;
    text-transform: capitalize;
    font-family: sans-serif;
    font-weight: 600;
}
.main-docc-profile .doc-pro-box .doc-pro-price-book {
display: flex;
    flex-direction: column;
    align-items: center;
}

.main-docc-profile .doc-pro-box .doc-pro-price-book h4 {
    font-size: 40px;
    margin: 0 0 20px 0;
    font-weight: bolder;
    font-family: sans-serif;
}

.main-docc-profile .doc-pro-box .doc-pro-price-book .btn {
    display: flex;
    justify-content: center;
}

.main-docc-profile .doc-pro-box .doc-pro-price-book .btn button.book-now-service {
    border: 1px solid black;
    width: 160px;
    height: auto;
    padding: 13px 0;
    border-radius: 40px;
    background: transparent;
    font-size: 18px;
}
.review_rating_sec ul {
  display: flex;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
  justify-content: space-around;
}

.review_rating_sec ul li {
  flex: 0 0 45%;
}

.review_rating_sec ul li .rating_boxx {
  display: flex;
  background: white;
  border-radius: 20px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 25px;
  margin: 0px;
}

.review_rating_sec ul li .rating_boxx .icon img {
  width: 40px;
}


.rating_content {
  width: 100%;
}


.review_rating_sec ul li .rating_boxx .rating_content h2 {
  margin: 10px 0 2px 0;
}

.review_rating_sec ul li .rating_boxx .rating_content .rating span {
  color: orange;
  font-size: 25px;
}

.review_rating_sec ul li .rating_boxx .rating_content p {
  font-size: 20px;
  width: 90%;
  margin: 0 auto;
}
.review_rating_sec ul li .rating_boxx .rating_content .glob_review_btn {
  display: flex;
  justify-content: center;
  margin: 11px 0 0 0;
}

.review_rating_sec ul li .rating_boxx .rating_content .glob_review_btn button {
  background: #F9F8C7;
  border-radius: 20px;
  padding: 12px 20px 12px 20px;
  font-size: 18px;
  font-weight: 700;
  border: none;
  margin: 0 15px 0 15px;
}
 .bttn_submit {
    display: flex;
    justify-content: center;
}

.bttn_submit button {
  background: #F9F8C7;
    border-radius: 20px;
    padding: 12px 20px 12px 20px;
    font-size: 18px;
    font-weight: 700;
    border: none;
}


.swpm-active-subs-table {
  width: 0%;
  height: 0%;
  position: absolute;
  visibility: hidden;
}

.Widthraw_page table tbody tr td {
  background-color: hsla(0, 0%, 50.2%, .0705882353) !important;
  height: 88px !important;
  font-size: 14px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: left !important;
  vertical-align: middle !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  border: 1px solid hsla(0, 0%, 50.2%, .5019607843) !important;

}

/*.Widthraw_page table tbody tr {
  display: contents !important;
}*/

.category_inner_wrapper {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 10px;
}

.category_inner_wrapper label {
  margin: 0;
}

.location_inner_wrapper {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 10px;
}

.location_inner_wrapper label {
  margin: 0;
}

#wpadminbar {
  display: none !important;
}

.swpm-registration-membership-level-row {
  display: none;
}

.category_text {
  font-size: 30px !important;
  font-weight: 500;
}

.update_profile {
    width: 100%;
    background-color: black;
    border: 1px solid black;
    color: white;
  }

.update_profile:hover {
  background-color: white;
  color: black;
}

.managing_guys {
  width: 100%;
}

.user_appointment {
  width: 100%;
}

section.search--bar {
  width: 100%;
}

.review_button {
    background-color: black !important;
    border: 1px solid black !important;
    color: white !important;
    text-decoration: none !important;
    padding: 8px 50px;
    width: 100%;
    margin-top: 40px;
    border-radius: 5px;
}


body{
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background: #80808038;
}
::selection{
  color:var(--white-color);
  background: var(--black-color);
}

/* bootstrap things  */


.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: -10px; 
}

.col-md-12, .col-md-6 {
  box-sizing: border-box;
  padding: 10px; 
}

.col-md-12 {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0;
}

.col-md-6 {
  flex: 0 0 50%;
  max-width: 50%;
}


/* end of bootstrap things */


.sidebar{
  position: absolute;
  top: 0px;
  left: -12px;
  width:78px;
  background: white;
  padding:6px 14px;
  z-index:99;
  transition:all 0.5s ease;
  right: 0;
  height: 90vh;
}
.sidebar.active{
  width: 200px;
}
.sidebar .logo_content .logo{
  color:var(--white-color);
  display: flex;
  height:50px;
  width:100%;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition:all 0.5s ease;
}
.sidebar.active .logo_content .logo{
  opacity:1;
  pointer-events: none;
}
.logo_content .logo .logo_name{
  font-size: 20px;
  font-weight: 400;
}
.sidebar #btn{
  position:absolute;
  color:var(--white-color);
  top:6px;
  left:50%;
  font-size: 22px;
  height: 30px;
  width:50px;
  text-align: center;
  line-height: 50px;
  transform: translateX(-50%);
  cursor: pointer;
}
.sidebar.active #btn{
  left:90%;
}
.sidebar ul{
  margin-top: 75px;
  padding: 0 0 0 20px;
}
.sidebar ul li{
  position:relative;
  height: 60px;
  width:100%;
  margin: 14px 0px;
  list-style: none;
  line-height: 50px;
}
.sidebar ul li .tooltip{
  position:absolute;
  left: 135px;
  top:0;
  transform: translate(-30%, -70%);
  border-radius: 6px;
  height:35px;
  width: max-content;
  background: var(--white-color);
  line-height: 35px;
  text-align: center;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  transition:0s;
  opacity:0;
  pointer-events: none;
  display:block;
  padding: 0 10px 0 10px;
}
.sidebar ul li .tooltip::before{
  content:'';
  width:0;
  height:0;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  border-right:10px solid var(--white-color);
  position:absolute;
  left:-8px;
  top:7px;
}
.sidebar.active ul li .tooltip{
  display:none;
}
.sidebar ul li:hover .tooltip{
  transition:all 0.5s ease;
  opacity:1;
  top:50%;
}
.sidebar ul li input{
  position:absolute;
  height:100%;
  width:100%;
  left:0;
  top:0;
  border-radius: 12px;
  outline:none;
  border:none;
  background: #1d1b31;
  padding-left:50px;
  font-size: 18px;
  color:var(--white-color);
}
.sidebar ul li .bx-search{
  position:relative;
  z-index: 99;
  color:var(--white-color);
  font-size: 22px;
  transition:all 0.5s ease;
}
.sidebar ul li .bx-search:hover{
  background:var(--white-color);
  color:#1d1b31;
}
.sidebar ul li a{
  color:var(--white-color);
  display:flex;
  align-items:center;
  text-decoration: none;
  border-radius: 12px;
  white-space: nowrap;
  transition:all 0.4s ease;
}

.sidebar ul li i{
  font-size: 18px;
  font-weight: 400;
  height:50px;
  min-width: 50px;
  border-radius: 12px;
  line-height: 50px;
  text-align: center;
}
.sidebar .links_name{
  font-size: 15px;
  font-weight: 600;
  opacity:0;
  pointer-events: none;
  transition:all 0.3s ease;
  text-transform: capitalize;
}
.sidebar.active .links_name{
  transition:0s;
  opacity:1;
  pointer-events: auto;
  color: black;
}
.sidebar .content{
  position:absolute;
  color:var(--white-color);
  bottom:0;
  left:0;
  width:100%;
}
.sidebar .content .user{
  position:relative;
  padding:10px 6px;
  height:60px;
  background: none;
  transition:all 0.4s ease;
}
.sidebar.active .content .user{
  background:var(--light-black);
}
.content .user .user_details{
  display:flex;
  align-items:center;
  opacity:0;
  pointer-events: none;
  white-space: nowrap;
  transition:all 0.4s ease;
}
.sidebar.active .user .user_details{
  opacity:1;
  pointer-events: auto;
}
.content .user .user_details img{
  height:45px;
  width:45px;
  object-fit: cover;
  border-radius: 12px;
}
.name_job{
  margin-left:10px;
}
 .user_details .name{
  font-size: 15px;
  font-weight: 400;
}
 .user_details .job{
  font-size: 12px; 
}
 #log_out{
  position:absolute;
  bottom:5px;
  left:50%;
  transform:translateX(-50%);
  min-width: 50px;
  line-height: 50px;
  font-size: 20px;
  border-radius: 12px;
  text-align: center;
  transition:all 0.4s ease;
}
.sidebar.active .user #log_out{
  left:80%;
  background:none;
}
.sidebar.active ~ .home_content{
  z-index:100;
/*   width:calc(100% - 240px);
  left:240px; */
}        
.sidebar.active ul.nav_list li a {
  flex-direction: row-reverse;
  gap: 16px;
  transition: 1s ease;
}
.sidebar ul li a:hover img {
  /* filter: invert(1); */
}
.header .main_upper_header {
  background: #01051D;
  padding: 10px 20px;
}

.header .main_upper_header ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header .main_upper_header ul li button.btn.main_header_btn {
  border-radius: 10px;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  border: none;
  padding: 2px 10px 2px 5px;
}

.home_content.active {
/*  width: calc(100% - 200px);*/
/*  left: 200px;*/
}

.sidebar.active ul.nav_list li a {
  display: flex;
  flex-direction: row;
  transition: 1s ease;
}
.sidebar ul li a img {
  width: 20px;
  height: 20px;
}
.main_upper_header {
  display: none;
}

    .rate {
    float: left;
    height: 46px;
    padding: 0 10px;
}
.rate:not(:checked) > input {
    position:absolute;
    top:-9999px;
}
.rate:not(:checked) > label {
    float:right;
    width:1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:30px;
    color:#ccc;
}
.rate:not(:checked) > label:before {
    content: '★ ';
}
.rate > input:checked ~ label {
    color: #ffc700;    
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
    color: #deb217;  
}
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
    color: #c59b08;
}
section.review-for-locat {
    padding: 60px 0;
}

.main_reviews-for-lacation {
    background: white;
    padding: 20px;
    border-radius: 25px;
    max-width: 750px;
    margin: 0 auto;
}

.main_reviews-for-lacation h2 {
    text-align: center;
    font-size: 35px;
    font-family: sans-serif;
    margin: 10px 0 30px 0;
}

.main_reviews-for-lacation .input-fields-question {
    display: flex;
    justify-content: space-between;
    padding: 0px 50px;
}

.main_reviews-for-lacation .input-fields-question .first-label p {
    font-size: 20px;
    font-weight: 500;
}

.main_reviews-for-lacation .para-p {
    display: flex;
    justify-content: space-around;
}

.main_reviews-for-lacation .para-p p {
    font-size: 24px;
    font-weight: 600;
    font-family: sans-serif;
}

.main_reviews-for-lacation .second-input-field {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 54px;
    margin: 0 0 20px 0;
}

.main_reviews-for-lacation .second-input-field label {
    font-size: 18px;
    margin: 0 0 5px 0;
}

.main_reviews-for-lacation .second-input-field input,.main_reviews-for-lacation .second-input-field select {
    width: 100%;
    height: 42px;
    border: 1px solid lightgray;
    padding: 5px 0 5px 10px;
    border-radius: 20px;
}

.main_reviews-for-lacation .checkboox {
    padding: 0 54px;
    margin: 0 0 20px 0;
}

.main_reviews-for-lacation .submit-btn {
    display: flex;
    justify-content: center;
    margin: 0 0 10px 0;
}

.main_reviews-for-lacation .submit-btn button {
    border: 1px solid gray;
    background: white;
    width: 200px;
    padding: 10px 0;
    border-radius: 20px;
    font-size: 18px;
    transition: .5s ease;
}

.main_reviews-for-lacation .submit-btn button:hover {
    background: black;
    border: 1px solid black;
    color: white;
    transition: .5s ease;
}


.rating {
        unicode-bidi: bidi-override;
        direction: rtl;
        text-align: center;
    }
    .rating > label {
        display: inline-block;
        position: relative;
        width: 1.1em;
        font-size: 30px;
        color: #ccc;
        cursor: pointer;
    }
    .rating > label:hover,
    .rating > input:focus ~ label {
        color: #fdd835;
    }
    .rating > input:checked ~ label,
    .rating:not(:checked) > label:hover,
    .rating:not(:checked) > label:hover ~ label {
        color: #fdd835 !important;
    }
    .rating > input:checked ~ label:hover,
    .rating > input:checked ~ label:hover ~ label,
    .rating > input:checked ~ label:hover ~ label:hover,
    .rating > label:hover ~ input:checked ~ label {
        color: #fdd835;
    }
    .rating > input:checked ~ label:hover ~ label {
        color: #ccc;
    }

    .rating_form input[type="radio"] {
      width: 0;
      height: 0;
    }

    .main_reviews-for-lacation {
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    }

    textarea {
      resize: none !important;
    }

.review_rating_sec li {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.review_form_buttons {
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 20px;
}

.loader {
  display: flex;
  justify-content: center;
}

.upcoming {
  border: 2px solid grey;
    padding: 20px;
    border-radius: 15px;
}

.upcoming .upcoming_title {
  margin-bottom: 40px !important;
}
h2 {
  margin: 0 !important;
}

.result {
  margin: 0 auto !important;
}

label {
  color: black !important;
}

.all_services {
  width: 95% !important;
}

.page_title {
  color: white;
}

.all-locations {
  width: 100%;
}

@media only screen and (max-width: 992px) {

  .search_icon {
      position: absolute;
      top: 2px !important;
      left: 40% !important;
      cursor: pointer;
  }

  .services_content .button_wrapper input {
    margin: 0 !important;
    border-radius: 24px !important;
    height: auto !important;
  }

  .first-input {
    border: none !important;
  } 
  .all-location-wrapper {
/*    width: calc(100% - 78px) !important;*/
width: 100%;
  }

  .all-locations {
    width: 100% !important;
  }
  .filters_main_wrapper {
    display: flex;
    width: 100%;
    flex-direction: column;
    max-width: 100% !important;
  }

  .locations_sidebar {
    width: 100% !important;
  }

  
  .main-locations-list {
    width: 100% !important;
    margin-top: 20px !important;
  }

  .all-location-box {
    display: flex;
    flex-direction: column;
  }

  .first-card-box {
    width: 100% !important;
    padding-bottom: 20px;
  }
  .second-card-box {
    width: 100% !important;
    margin-top: 20px !important;
    padding: 0px !important;
  }
  .third-card-box {
    width: 100% !important;
  }

  .review_popup {
    width: 86% !important;
    left: 14% !important;
  }


  .home_content {
    margin-top: 80px;
    padding: 10px;
  }

  .doctor_pane ul li {
    flex: unset !important;
    margin: 0px 0px 20px 0px;
    width: 100%;
  }

  .sidebar.active {
    width: 100%;
  }

  .sidebar {
    top: 0px;
    left: 0;
    overflow: hidden;
    height: 100vh;
    position: fixed;
  }

  .upcoming_title {
    font-size: 18px;
  }
  .main_users-appointment ul li {
    width: 100%;
  }

  .all-services-wrapper {
    width: 100% !important;
  }

  .services_content .search-container {
    flex-direction: column;
  }
  .services_content .input_wrapper {
    flex-direction: column;
  }

  .services_content .first-input {
    width: 100%;
  }
  .divider {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid black;
  }

  .services_content .second-input {
    padding-top: 10px;
    width: 100%;
  }
  .services_content .first-input input {
    border: none;
  }

  .button_wrapper {
    margin-top: 10px;
    width: 100% !important;
  }

  .appointments_wrapper {

  }

  .cus_col {
    max-width: 100% !important;
    width: 100% !important;
    flex: 0 0 100%;
  }

  .cus_col h2 {
    font-size: 18px;
    text-align: center;
  }

  .cus_col .guys_management1 {
    padding: 15px 0px;
  }

  .rating_wrapper .guys_management1 {
    flex-direction: column;
  }

  .review_rating_sec ul li {
    flex: unset;
    width: 100%;
  }

  .profle_row {
    flex-direction: column;
  }
  .profle_row .cus_col {
    margin-bottom: 20px;
  }

  .main_profile_details_sec p {
    font-size: 14px;
  }

  .main_reviews-for-lacation .input-fields-question {
    display: flex;
    justify-content: space-between;
    padding: 30px 0px;
    flex-direction: column;
    font-size: 14px;
  }

  .para-p {
    display: none !important;
  }
  .main_reviews-for-lacation .input-fields-question p {
    font-size: 14px !important;
  }

  .main_reviews-for-lacation .second-input-field, .checkboox {
    padding: 30px 0px !important;
  }

  .checkboox input {
    width: 10%;
  }

  .checkboox label {
    width: 87%;
  }

  .profile_wrapper .box_inner2 p {
    text-align: left;
    margin-bottom: 40px;
  }

  .profile_wrapper .box_inner2 {
    text-align: center !important;
    padding: 10px !important;
  }

  .main-docc-profile h2 , .review_rating_sec h2 {
    margin-bottom: 40px !important;
  }

  .main-docc-profile .doc-pro-box {
    flex-direction: column;
  }

  .doc-pro-content {
    width: 100%;
    text-align: center;
  }

  .doc-pro-content h5 {
    width: 100% !important;
  }

  .profile_popup {
    opacity: 0;
    z-index: -9999;
    position: fixed;
    overflow: scroll;
    width: 90%;
    height: 100vh;
    top: 0;
    left: 10%;
    border-radius: 15px;
    padding: 50px;
    background: white;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  }

  .profile_popup .form_wrapper {
    min-width: 100% !important;
    width: 100%;
  }

  .details_list table tbody tr {
    flex-direction: column;
  }

  .appoint_wrapper .guys_managemen2 {
    flex-direction: column;
  }

  .appoint_wrapper .guys_managemen2 button, .appoint_wrapper .guys_managemen2 select {
    width: 100%;
    margin-bottom: 20px !important; 
  }

  .appoint_wrapper form, .appoint_wrapper form input {
    width: 100% !important;
  }

  .location-result tr {
    gap: 20px;
  }

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

  #openPopupBtn {
    width: 100%;
    text-align: center;
    justify-content: center;
    margin: 0;
  }

  .guys_management1 form input {
    width: 100% !important;
  }

  .doc_location_wrapper .popup-content {
    width: 80%;
    left: 80px;
  }

  .doc_sevices_wrapper .popup {
    width: 80%;
    left: 98px;
  }

  .doc_sevices_wrapper .popup form .row {
    flex-direction: column;
  }
  .doc_sevices_wrapper .popup form .row .col-md-6 {
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  .rating_filter_by_status {
    display: flex;
    font-weight: 700;
    align-items: center;
    background: white;
    border-radius: 20px;
    padding: 8px 20px 8px 20px;
    font-size: 18px;
    border: none;
    margin: 0 0 0 20px;
    width: 100%;
  }

  .doc_rating .rating_filter_by_status {
    width: 100% !important;
    margin-top: 20px;
  }

  .main_earning_sec ul {
    flex-direction: column;
  }
  .main_earning_sec ul li {
    margin-top: 20px;
  }


  .sub_status {
    width: 89%;
  }


}

.earning_box_inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.earning_box_inner hr {
  width: 100%;
  border-bottom: 1px solid black;
}

.rating_filter_by_status {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 20px;
  padding: 8px 20px 8px 20px;
  font-size: 18px;
  font-weight: 700;
  border: none;
  margin: 0 0 0 20px;
  width: 35%;
}


.reported {
 width: 100%;
 text-align: center;
}
.filter_by_status {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 20px;
  padding: 8px 20px 8px 20px;
  font-size: 18px;
  font-weight: 700;
  border: none;
  margin: 0 0 0 20px;
  width: 30%;
}

button::focus {
  color: black !important;
}

.location-result form button {
  border: none !important;
}

.location_addres {
    width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.location_link a {
    width: 100%;
    background-color: black;
    border: 1px solid black;
    color: white;
    text-decoration: none !important;
    padding: 12px 20px;
    margin-left: 20px;
    border-radius: 5px;
}

.location_link a:hover {
  color: white;
}

#swpm-registration-form tr {
  display: flex;
  flex-direction: column;
}

.swpm-registration-membership-level-row {
  display: none !important;
}

.swpm-active-subs-table-wrap {
  display: none !important;
}

.all-location-wrapper .filters_main_wrapper {
    display: flex;
    width: 100%;
    max-width: 100%;
}

.all-location-wrapper .filters_main_wrapper .locations_sidebar {
   width: 20%;
    border: 1px solid grey;
    border-radius: 10px;
    padding: 10px;
    margin: 2px;
}


.all-location-wrapper .filters_main_wrapper .main-locations-list {
  width: 80%;
    border: 1px solid grey;
    border-radius: 10px;
    padding: 10px;
    margin: 2px;
}

.all-location-wrapper .filters_main_wrapper .filter_wrapper {
  display: flex;
  flex-direction: column;
}


.all-location-wrapper .filters_main_wrapper .filter_wrapper .filter_wrapper_inner { 
      display: flex;
    align-items: center;
    gap: 10px;
    margin: 5px;
}

.all-location-wrapper .filters_main_wrapper .filter_wrapper .filter_wrapper_inner label {
  margin: 0;
}

.visi_hide {
  height: 0px;
  width: 100%;
  visibility: hidden;
}

.button {
	text-decoration: none !important;
	padding: 16px 0px !important;
    width: 100%;
    background-color: black;
    border: 1px solid black;
    color: white;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    padding: .5rem 1rem;
    font-size: 1rem;
    border-radius: 3px;
    transition: all .3s;
}

  .button:hover {
    width: 100%;
    background-color: white;
    border: 1px solid black;
    color: black;
  }

  .first-card-box {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .first-card-box .icon {
    margin: 20px 0 0 0 !important;
  }

  .first-card-box .icon-content {
    text-align: center;
    margin: 10px !important;
  }

  .third-card-box {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .all-location-box {
    margin-top: 20px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  }

  .reviews_wrapper {
        border-radius: 10px;
    padding: 26px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    margin-top: 20px;
  }

  .reviews_header {
        display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
  }

  .review_prof {
        display: flex;
    align-items: center;
    gap: 20px;
  }

  .review_prof img {
width: 10%;
    border: 1px solid black;
    border-radius: 50%;
  }

  .reviews_star span {
    color: #ffb600;
    font-size: 25px;
  }

.button_wrapper {
  position: relative;
}

.search_icon {
    position: absolute;
    top: -6px;
    left: 63px;
    cursor: pointer;
}
a.login-button {
    border: 1px solid black;
    padding: 5px;
    background-color: black;
    color: white;
    border-radius: 5px;
}
a.login-button:hover {
    background-color: transparent;
    color: black;
}
a.login-button.book-now-service {
    text-decoration: none;
    padding: 10px 25px 10px 25px;
}

button.btn.btn-primary.updte-pymnt {
    position: absolute;
    left: 80%;
    top: 5%;
}