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

body {
  font-family: "IBM Plex Sans", sans-serif !important;
  font-weight: 700 !important;
}

/* profile */

input#company_logo_file {
    visibility: hidden;
}

input#avatar_file {
    visibility: hidden;
}

.register-form-container .login {
    margin-top: 15px;
}

details.user-dd {
  position: relative;
  display: inline-block;
}

.user-dd>summary {
  list-style: none;
  cursor: pointer;
}

.user-dd>summary::-webkit-details-marker {
  display: none;
}

.user-dd .menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0px);
  /* min-width: 141px; */
  background: #e9e9e9;
  border-radius: 10px;
  /* box-shadow: 0 10px 25px rgb(173 173 173 / 66%); */
  padding: 12px 15px 25px 15px;
  z-index: 1000;
  border: 1px solid #0000004d;
}

span#notifDot {
  right: -2px !important;
  top: -3px !important;
}

.user-dd:not([open]) .menu {
  display: none;
}

.user-dd a {
  color: #0a58ca;
  text-decoration: none;
}

.user-dd a:hover {
  text-decoration: underline;
}

.user-dd button {
  width: 100%;
  margin-top: 8px;
  padding: 8px 10px;
  background: #6693a1;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  color: white;
  font-family: "IBM Plex Sans", sans-serif;
}

.user-dd button:hover {
  background: #eee;
  color: black;
  border: 1px solid black;
}


.img-profile .profile-img {
  height: 27px;
  width: 27px;
  filter: brightness(0) invert(0);
}

a.img-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  color: white;
}

.menu p {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 16px;
  color: black;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(90deg, #507b87 0%, #8bbccc 100%);
  position: sticky;
  top: 0;
  z-index: 999;
}

header .rentoimg {
  display: flex;
  justify-content: center;
  width: 256.35px;

}

header .rentoimg img {
  height: 50px;
}

header .righthead {
  padding-right: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.banner .bannermain {
  display: flex;
}

.banner .bannermain .leftbanner {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #507b87 0%, #8bbccc 100%);
  border-top: 1px solid white;
  width: 256.35px;
  min-width: 256.35px;
  position: sticky;
  top: 51px;
  box-sizing: border-box;
}

.banner .bannermain .leftbanner .leftlist1 {
  margin-top: 20px;
  margin-left: 25px;
  margin-right: 25px;
  display: flex;
  flex-direction: column;
}

.banner .bannermain .leftbanner .leftlist {
  display: flex;
  align-items: center;
  width: 100%;
}

.leftupbox1>.leftupbox:nth-child(2) {
  background: #d9dbdb !important;
}

.leftupbox1>.leftupbox:nth-child(2) p {
  color: black !important;
}

.leftupbox1>.leftupbox:nth-child(2) h6 {
  color: black !important;
}


.leftdownbox2>.leftdownbox:nth-child(2) {
  background: linear-gradient(90deg, #507b87 0%, #8bbccc 100%) !important;
}

.leftdownbox2>.leftdownbox:nth-child(2) h5 {
  color: white !important;
}

.leftdownbox2>.leftdownbox:nth-child(2) p {
  color: white;
}

.leftdownbox2>.leftdownbox:nth-child(2) h6 {
  color: white;
}

.rightmidbanner1>.rightbox:nth-child(2) {
  background: #d9dbdb !important;
}

.rightmidbanner1>.rightbox:nth-child(2) h6 {
  color: black;
}

.rightmidbanner1>.rightbox:nth-child(2) p {
  color: black;
}

.banner .bannermain .leftbanner .leftlist img {
  height: 22px;
  filter: brightness(0) invert(1);
}

.banner .bannermain .leftbanner .leftlist1 a {
  text-decoration: none;
}

.banner .bannermain .leftbanner .leftlist p {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  color: white;
}

a.leftlist.active img {
  filter: brightness(0) invert(0) !important;
}


a.leftlist.active p {
  color: black !important;
}

/* a.active {
    width: 100%;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 20px;
    letter-spacing: 0%;
    vertical-align: middle;
    color: #000000;
    max-width: 208px !important;
    display: flex;
    align-items: center;
} */

.extra {
  display: flex;
  align-items: center;
  /* background-color: #f4f4f4; */
  padding: 12px 24px 12px 16px;
  gap: 15px;
  border-radius: 16px;
  justify-content: left !important;
}


img.icons {
  width: 15px;
  height: 15px !important;
}

/* .banner .bannermain .leftbanner .leftlist .extra {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: none;
  border-radius: 15px;
  padding: 10px 15px;
  padding-left: 5px;
} */

/* .banner .bannermain .leftbanner .leftlist .extra p {
  color: black;
} */


.leftlist.active {
  background: white;
  border-radius: 18px;
  color: black;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #000000 !important;
  max-width: 208px !important;
}



.banner .bannermain .leftbanner .leftlist p span {
  color: black;
  border: 1px solid black;
}

.banner .bannermain .leftbanner .listbutton {
  display: flex;
  padding-left: 30px;
  margin-top: 170px;
  margin-bottom: 30px;
}

.banner .bannermain .leftbanner .listbutton img {
  padding-right: 10px;
}

.banner .bannermain .leftbanner .listbutton p {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  color: white;
}

/* welcome page */

.Welcome-page-cls {
    background: rgba(255, 255, 255, 0.85);
    padding: 40px 30px;
    max-width: 500px;
    margin: 50px auto;
    border-radius: 25px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/*dashboard css start(index1.html) */
.banner .bannermain .rightbanner {
  padding-left: 20px;
  padding-right: 20px;
  background-color: #f3f3f3;
  width: 100%;
  max-width: calc(100% - 256.56px);
}

.banner .bannermain .rightbanner h1 {
  font-weight: 400;
  font-size: 30px;
  vertical-align: middle;
  margin-top: 35px;
  margin-bottom: 35px;
  text-align: center;
}


.alert.alert-danger {
  margin: 20px 0 10px 31px;
}

.alert.alert-danger ul li {
  color: #e50c0c;
}

.alert.alert-danger ul {
  margin-top: 10px;
}


.leftupbanner {
  gap: 20px;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.banner .bannermain .rightbanner .rightupbanner {
  display: flex;
  gap: 20px;
  width: 100%;
}

button.btn.btn-danger {
  border: none;
  background: transparent;
  text-align: center;
  color: white;
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
  align-items: end;
  width: 100%;
  font-size: 20px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  gap: 5px;
}

.banner .bannermain .rightbanner .rightupbanner .leftupbanner .leftupbox1 {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}


.leftupbox .main-leftupbox {
  display: flex;
  text-align: center;
  justify-content: space-between;
  align-items: center;
}

.leftupbox1 .leftupbox .this-month h6 {
  font-size: 22px;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  text-align: center;
  color: white;
  padding-bottom: 10px;
}

.banner .bannermain .rightbanner .rightupbanner .leftupbanner .leftupbox1 .leftupbox {
  border: 1px solid black;
  border: none;
  border-radius: 10px;
  width: 100%;
  max-width: 450px;
  background: linear-gradient(90deg, #507b87 0%, #8bbccc 100%);
}

.banner .bannermain .rightbanner .rightupbanner .leftupbanner .leftupbox1 .leftupbox .upboxcontent p {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 40px;
  letter-spacing: 0%;
  vertical-align: middle;
  color: white;
  padding-top: 20px;
  padding-bottom: 35px;
  padding-left: 20px;
  text-align: left;
}

.banner .bannermain .rightbanner .rightupbanner .leftupbanner .leftupbox1 .leftupbox .upboxcontent h6 {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  text-align: center;
  color: white;
  padding-bottom: 10px;
}

.btn.btn-danger img {
  height: 25px;
  object-fit: cover;
  color: white;
}

.banner .bannermain .rightbanner .rightupbanner .leftupbanner .leftupbox1 .leftupbox .imgupbox img {
  margin-right: 10px;
}

.banner .bannermain .rightbanner .rightupbanner .leftupbanner .leftdownbox2 {
  display: flex;
  gap: 20px;
}

.banner .bannermain .rightbanner .rightupbanner .leftupbanner .leftdownbox2 .leftdownbox {
  background: #d9dbdb;
  border: 1px solid black;
  border: none;
  border-radius: 10px;
  width: 100%;
  max-width: 450px;
  justify-content: space-between;
}

.banner .bannermain .rightbanner .rightupbanner .leftupbanner .leftdownbox2 .leftdownbox .downboxcontent .people {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
}

.leftdownbox .month h6 {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  padding-bottom: 9px;
}

.leftupbanner .leftdownbox2 .leftdownbox .mainleftdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  margin-left: 20px;
}

.banner .bannermain .rightbanner .rightupbanner .leftupbanner .leftdownbox2 .leftdownbox .downboxcontent .people img {
  padding-right: 5px;
}

.banner .bannermain .rightbanner .rightupbanner .leftupbanner .leftdownbox2 .leftdownbox p {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  padding-bottom: 36px;
}

.banner .bannermain .rightbanner .rightupbanner .leftupbanner .leftdownbox2 .leftdownbox p span {
  padding-right: 60px;
}

.leftdownbox2 .leftdownbox .mainleftdown .imgdownbox img {
  margin-right: 20px;
}

.banner .bannermain .rightbanner .rightupbanner .leftupbanner .leftdownbox2 .leftdownbox h6 {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  padding-bottom: 13px;
  text-align: center;
}

.text-wrap {
  display: flex;
  width: 100%;
  gap: 20px;
}

.content-wrap {
  width: 100%;
  max-width: 100%;
  gap: 20px;
  display: flex;
  flex-direction: column;
}

.banner .bannermain .rightbanner .rightupbanner .rightupbanner1 {
  background: #d9dbdb;
  border: none;
  border-radius: 10px;
  position: relative;
  max-width: 684px;
  width: 100%;
}

.banner .bannermain .rightbanner .rightupbanner .rightupbanner1 p {
  padding-top: 15px;
  padding-left: 10px;
  padding-bottom: 20px;
}

.banner .bannermain .rightbanner .rightupbanner .rightupbanner1 .list1 ul {
  list-style: none;
  padding-left: 10px;
  line-height: 30px;
  padding-bottom: 5px;
}

.banner .bannermain .rightbanner .rightupbanner .rightupbanner1 .list2 ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding-left: 10px;
}

.banner .bannermain .rightbanner .rightupbanner .rightupbanner1 .list2 ul li {
  padding-right: 57.6px;
}

.banner .bannermain .rightbanner .rightupbanner .rightupbanner1 .graphing img {
  position: absolute;
  bottom: 25px;
  width: 650px;
  padding-left: 20px;
}

.banner .bannermain .rightbanner .rightmidbanner {
  display: flex;
  align-items: center;
  gap: 20px;
}

.rightmidbanner .right {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(90deg, #507b87 0%, #8bbccc 100%);
  color: #fffefe;
  width: 100%;
  max-width: 450px;
  border-radius: 10px;
  padding: 20px 0 54px 20px;
}

.right .leftcontent h6 {
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  padding-bottom: 45px;
}

.right .leftcontent p {
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
}


.banner .bannermain .rightbanner .rightmidbanner .leftmidbanner {
  display: flex;
  align-items: center;
  border: 1px solid;
  background: #d9dbdb;
  border: none;
  border-radius: 10px;
  padding: 20px 0 20px 20px;
  width: 100%;
  max-width: 450px;
  justify-content: space-between;
}

.listmid2 {
    margin-right: 20px;
}

.rightbanner1 .rightmidbanner1 {
  display: flex;
  gap: 20px;
}

.banner .bannermain .rightbanner .rightmidbanner .leftmidbanner p {
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  padding-bottom: 45px;
}

.leftmidcontent {
    width: 100%;
}

.banner .bannermain .rightbanner .rightmidbanner .leftmidbanner .leftmidcontent .listmid {
  display: flex;
  justify-content: space-between;
}


.banner .bannermain .rightbanner .rightmidbanner .leftmidbanner .leftmidcontent .listmid .listmid1 ul li {
  margin-bottom: 20px;
}

.banner .bannermain .rightbanner .rightmidbanner .leftmidbanner .leftmidcontent .listmid .listmid1 ul {
  font-weight: 400;
  font-size: 20px;
  list-style: none;
}

.banner .bannermain .rightbanner .rightmidbanner .leftmidbanner .leftmidcontent .listmid .listmid2 ul {
  list-style: none;
}

.banner .bannermain .rightbanner .rightmidbanner .leftmidbanner .leftmidcontent .listmid .listmid2 ul li {
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  margin-bottom: 20px;
}

.banner .bannermain .rightbanner .rightmidbanner .leftmidbanner .rightmidcontent img {
  padding-right: 20px;
}

.banner .bannermain .rightbanner .rightmidbanner .rightmidbanner1 {
  display: fleX;
  gap: 20px;
  width: 100%;
}

.banner .bannermain .rightbanner .rightmidbanner1 .rightbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(90deg, #507b87 0%, #8bbccc 100%);
  color: #fffefe;
  width: 100%;
  max-width: 425px;
  border-radius: 10px;
  padding: 30px 0 30px 20px;

}


.overdue {
  margin-bottom: 35px;
}

.borrowed {
  margin-bottom: 0 !important;
}

.banner .bannermain .rightbanner .rightmidbanner1 .rightbox .leftcontent h6 {
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  padding-bottom: 55px;

}

.banner .bannermain .rightbanner .rightmidbanner1 .rightbox .leftcontent p {
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
}

.banner .bannermain .rightbanner .rightmidbanner1 .rightbox .rightcontent img {
  height: 50px;
  padding-right: 20px;
}

.banner .bannermain .rightbanner .lastbanner .lastleft {
  display: flex;
  justify-content: space-between;
  background: #d9dbdb;
  align-items: center;
  border: none;
  border-radius: 10px;
  padding: 30px 0 30px 20px;
}

.rightmidbanner1 .lastbanner {
  width: 100%;
  max-width: 445px;
}

.banner .bannermain .rightbanner .lastbanner .lastleft .anotherflex {
  display: flex;
  flex-direction: column;
  gap: 55px;
}

.banner .bannermain .rightbanner .lastbanner .lastleft .anotherflex p {
  font-weight: 400;

  font-size: 20px;

  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
}

.banner .bannermain .rightbanner .lastbanner .lastleft .anotherflex .flex {
  display: flex;
  justify-content: space-between;
  gap: 35px;
  flex-direction: column;
}

.banner .bannermain .rightbanner .lastbanner .lastleft .lastright img {
  height: 50px;
  padding-right: 20px;
}

.banner .bannermain .rightbanner .endbanner {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-direction: column;
  width: 100%;
  max-width: 684px;
}

.banner .bannermain .rightbanner .endbanner .endbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid black;
  background: white;
  border-radius: 10px;
  border: none;
  padding: 30px 20px;
 
}

.banner .bannermain .rightbanner .endbanner .endbox .endleftbox h6 {
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  padding-bottom: 41px;
}

.banner .bannermain .rightbanner .endbanner .endbox .endleftbox p {
  font-weight: 400;
  font-size: 19px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
}

.banner .bannermain .rightbanner .endbanner .endbox .endrightbox img {
  height: 50px;
}

.banner .bannermain .rightbanner .endbanner .endbox .endrightbox h5 {
  font-weight: 400;

  font-size: 20px;
  line-height: 0px;
  letter-spacing: 0%;
  vertical-align: middle;
}

.notif-dropdown {
    background-color: #E9E9E9 !important;
    border-radius: 20px;
    border-color: #A3A3A3 !important;
    width: 270px !important;
    text-align: center;
    margin-top: 5px;
}

.people h5 {
  font-size: 20px;
}



/*dashboard css end(index1.html) */

/*contracts css start(index2.html)*/
.banner .bannermain .rightbanner1 {
  width: 100%;
  background: transparent !important;
  display: flex;
  flex-direction: column;
  gap: 20px;
}



.banner .bannermain .rightbanner1 .contracts {
  margin: 30px 25px;
  background: #ffffff;
  border-radius: 20px;
  padding: 20px;
}

.banner .bannermain .rightbanner1 .contracts .rightup1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 3px solid #eaeaea;
}

.banner .bannermain .rightbanner1 .contracts .rightup1 h1 {
  font-weight: 400;
  font-size: 48px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  padding-top: 20px;
  padding-bottom: 30px;
}

.banner .bannermain .rightbanner1 .contracts .rightup1 p {
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  cursor: pointer;
}

.banner .bannermain .rightbanner1 .contracts .rightup2 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.banner .bannermain .rightbanner1 .contracts .rightup2 h4 {
  font-weight: 600;
  font-size: 28px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  padding-top: 25px;
  padding-bottom: 60px;
}

.banner .bannermain .rightbanner1 .contracts .rightup2 .search {
  display: flex;
  align-items: flex-end;
}

.banner .bannermain .rightbanner1 .contracts .rightup2 .search p {
  font-weight: 500;
  font-style: Medium;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  padding-right: 5px;
}

.search-btn1 form input {
  font-size: 17px;
  border-radius: 10px;
  border: none;
}

.search-btn1 {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-bottom: 20px;
  margin-top: 20px;
  gap: 10px;
}

.action-icons .btn.btn-warning.btn-sm i {
  color: black;
}

.action-icons .btn.btn-info.btn-sm i {
  color: black;
}

button.btn.btn-danger.btn-sm i {
  color: #000000;
}

button.btn.btn-danger.btn-sm i {
  cursor: pointer;
}

.banner .bannermain .rightbanner1 .contracts .rightup2 .search form input {
  border: 3px solid #eaeaea;
  height: 20px;
}

.banner .bannermain .rightbanner1 .contracts .rightup3 table {
  border-collapse: collapse;
}

.banner .bannermain .rightbanner1 .contracts .rightup3 table,
th,
td {
  border: 3px solid #eaeaea;
  border-collapse: collapse;
}

.banner .bannermain .rightbanner1 .contracts .rightup3 table th {
  font-weight: 700;
  font-style: Bold;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #507b87;
  padding-left: 15px;
}

.banner .bannermain .rightbanner1 .contracts .rightup3 table th i {
  height: 23px;
  padding-left: 12.7px;
  padding-right: 15px;
}

.banner .bannermain .rightbanner1 .contracts .rightup3 table td {
  font-weight: 500;
  font-style: Medium;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 5px;
  padding-right: 5px;
}

.banner .bannermain .rightbanner1 .contracts .rightup3 table td span {
  color: #507b87;
}

.banner .bannermain .rightbanner1 .contracts .rightup3 table td button {
  font-weight: 500;
  font-style: Medium;
  font-size: 18px;

  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  background-color: lightgreen;
  border: none;
  border-radius: 50px;
  padding: 10px 10px;
  cursor: pointer;
  margin-left: 20px;
}

.banner .bannermain .rightbanner1 .contracts .rightup4 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 20px;
}

.banner .bannermain .rightbanner1 .contracts .rightup4 .rightup4left h5 {
  font-weight: 600;
  font-size: 22px;
  line-height: 40px;
  letter-spacing: 0%;
  vertical-align: middle;
}

.banner .bannermain .rightbanner1 .contracts .rightup4 .rightup4right {
  display: flex;
  align-items: center;
}

.banner .bannermain .rightbanner1 .contracts .rightup4 .rightup4right p {
  font-weight: 600;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  border: 3px solid #eaeaea;
  padding: 5px 10px;
}

.banner .bannermain .rightbanner1 .contracts .rightup4 .rightup4right p a {
  text-decoration: none;
  color: black;
}

.banner .bannermain .rightbanner1 .contracts .rightup4 .rightup4right h6 {
  font-weight: 600;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  border: 3px solid #eaeaea;
  padding: 5px 10px;
  background: #507b87;
}

.banner .bannermain .rightbanner1 .contracts .rightup4 .rightup4right h6 a {
  text-decoration: none;
  color: #ffffff;
}

.banner .bannermain .rightbanner1 .contracts .rightup4 .rightup4right h5 {
  font-weight: 600;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  border: 3px solid #eaeaea;
  padding: 5px 10px;
}

.banner .bannermain .rightbanner1 .contracts .rightup4 .rightup4right h5 a {
  text-decoration: none;
  color: black;
}

.banner .bannermain .rightbanner1 .contracts .rightup5 .rightupper5 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.banner .bannermain .rightbanner1 .contracts .rightup5 .rightupper5 h3 {
  font-weight: 600;
  font-size: 28px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  padding-bottom: 70px;
}

.banner .bannermain .rightbanner1 .contracts .rightup5 .rightupper5 .search5 {
  display: flex;
  align-items: flex-end;
}

.banner .bannermain .rightbanner1 .contracts .rightup5 .rightupper5 .search5 p {
  font-weight: 500;
  font-style: Medium;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  padding-right: 5px;
}

.banner .bannermain .rightbanner1 .contracts .rightup5 .rightupper5 .search5 input {
  border: 3px solid #eaeaea;
  height: 20px;
}

.banner .bannermain .rightbanner1 .contracts .rightup5 .rightdown5 table,
th,
td {
  border: 3px solid #eaeaea;
  border-collapse: collapse;
}

.banner .bannermain .rightbanner1 .contracts .rightup5 .rightdown5 table th {
  font-weight: 700;
  font-style: Bold;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #507b87;
  padding-left: 15px;
  padding-right: 5px;
}

.banner .bannermain .rightbanner1 .contracts .rightup5 .rightdown5 table th i {
  height: 23px;
  padding-left: 28px;
}

.banner .bannermain .rightbanner1 .contracts .rightup5 .rightdown5 table td {
  font-weight: 600;
  font-size: 22px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  padding-top: 20px;
  padding-bottom: 20px;
  border: none;
  text-align: center;
}

.banner .bannermain .rightbanner1 .contracts .rightup6 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 20px;
}

.banner .bannermain .rightbanner1 .contracts .rightup6 .rightup6left h5 {
  font-weight: 600;
  font-size: 22px;
  line-height: 40px;
  letter-spacing: 0%;
  vertical-align: middle;
}

.banner .bannermain .rightbanner1 .contracts .rightup6 .rightup6right {
  display: flex;
  align-items: center;
}

.banner .bannermain .rightbanner1 .contracts .rightup6 .rightup6right p {
  font-weight: 600;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  border: 3px solid #eaeaea;
  padding: 5px 10px;
}

.banner .bannermain .rightbanner1 .contracts .rightup6 .rightup6right p a {
  text-decoration: none;
  color: black;
}

.banner .bannermain .rightbanner1 .contracts .rightup6 .rightup6right h5 {
  font-weight: 600;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  border: 3px solid #eaeaea;
  padding: 5px 10px;
}

.banner .bannermain .rightbanner1 .contracts .rightup6 .rightup6right h5 a {
  text-decoration: none;
  color: black;
}

.banner .bannermain .rightbanner1 .contracts .rightup7 .rightupper7 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.banner .bannermain .rightbanner1 .contracts .rightup7 .rightupper7 h3 {
  font-weight: 600;
  font-size: 28px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  padding-bottom: 70px;
}

.banner .bannermain .rightbanner1 .contracts .rightup7 .rightupper7 .search7 {
  display: flex;
  align-items: flex-end;
}

.banner .bannermain .rightbanner1 .contracts .rightup7 .rightupper7 .search7 p {
  font-weight: 500;
  font-style: Medium;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  padding-right: 5px;
}

.banner .bannermain .rightbanner1 .contracts .rightup7 .rightupper7 .search7 input {
  border: 3px solid #eaeaea;
  height: 20px;
}

.banner .bannermain .rightbanner1 .contracts .rightup7 .rightdown7 table,
th,
td {
  border: 3px solid #eaeaea;
  border-collapse: collapse;
}

.banner .bannermain .rightbanner1 .contracts .rightup7 .rightdown7 table th {
  font-weight: 700;
  font-style: Bold;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #507b87;
  padding-left: 15px;
  padding-right: 5px;
}

.banner .bannermain .rightbanner1 .contracts .rightup7 .rightdown7 table th i {
  height: 23px;
  padding-left: 28px;
}

.banner .bannermain .rightbanner1 .contracts .rightup7 .rightdown7 table td {
  font-weight: 600;
  font-size: 22px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  padding-top: 20px;
  padding-bottom: 20px;
  border: none;
  text-align: center;
}

/*contracts css end(index2.html)*/

/*form css start(index3.html)*/
.banner .bannermain .rightbanner2 {
  width: 100%;
}

.banner .bannermain .rightbanner2 .vechile {
  margin-top: 20px;
  border: 1px solid #AFAEAE;
  border-radius: 10px;
  background-color: white;
}

.banner .bannermain .rightbanner2 .vechile h1 {
  font-weight: 400;
  font-size: 30px;
  line-height: 25px;
  margin-top: 0;
  margin-bottom: 0;
}

.file2 {
  border: 1px solid #d9dbdb;
  width: 100% !important;
  display: flex;
  justify-content: space-between;
  border-radius: 8px;
  align-items: center;
  padding-left: 5px;
}

.banner .bannermain .rightbanner2 .vechile .formmain {
  border-radius: 10px;
}

.formmain h2 {
  padding: 22px 25px;
  border-bottom: 1px solid #D9DBDB;
}

.formmain form {
  padding: 20px 24px;
}

.banner .bannermain .rightbanner .rightmainbanner .formmain h2 {
  font-weight: 400;
  font-size: 24px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  padding-top: 10px;
  padding-bottom: 20px;
  border-bottom: 1px solid #d9dbdb;
  margin-bottom: 20px;
}

.banner .bannermain .rightbanner2 .vechile .formmain .formbutton {
  display: flex;
  justify-content: end;
  gap: 30px;
}

.banner .bannermain .rightbanner2 .vechile .formmain .formbutton button {
  background: linear-gradient(270deg, #8bbccc 0%, #507b87 100%);
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  padding: 15px 30px;
  border: none;
  border-radius: 10px;
  color: #ffffff;
  cursor: pointer;
}

.banner .bannermain .rightbanner2 .vechile .formmain .form .form1 {
  display: flex;
  margin-bottom: 20px;
  gap: 30px;
  width: 100%;
}

.banner .bannermain .rightbanner2 .vechile .formmain .form .form1 p {
  font-weight: 400;
  font-size: 18px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  margin-bottom: 10px;
}

.banner .bannermain .rightbanner2 .vechile .formmain .form .form1 .formleft input {
  width: 100%;
  height: 50px;
  border: 1px solid #d9dbdb;
  display: flex;
  border-radius: 10px;
  padding-left: 5px;
  background-color: white;
}

.banner .bannermain .rightbanner2 .vechile .formmain .form .form1 .formleft {
  width: 50%;
}

.banner .bannermain .rightbanner2 .vechile .formmain .form .form1 .formright {
  width: 50%;
}

.banner .bannermain .rightbanner2 .vechile .formmain .form .form1 .formright input {
  width: 100%;
  height: 50px;
  border: 1px solid #d9dbdb;
  border-radius: 10px;
  padding-left: 5px;
  background-color: white;
}

.formbutton {
  display: flex;
  justify-content: end;
  gap: 30px;
}

.file1 {
  border: 1px solid #d9dbdb;
  width: 100% !important;
  display: flex;
  justify-content: end;
  border-radius: 8px;
}

.formryt {
  display: flex;
  width: 50%;
  gap: 20px;
}

.formleft1 {
  width: 50%;
}

.formright1 {
  width: 50%;
}

.formleft1 input {
  width: 100%;
  height: 50px;
  border: 1px solid #d9dbdb;
  padding-left: 5px;
  border-radius: 8px;
}

.formright1 input {
  width: 100%;
  height: 50px;
  border: 1px solid #d9dbdb;
  border-radius: 8px;
  padding-left: 5px;
}

.banner .bannermain .rightbanner2 .vechile.formmain .form .form1 .formright .formright0 {
  display: flex;

}

.banner .bannermain .rightbanner2 .vechile .formmain .form .form1 .formright .formright0 .formright1 {
  width: 50%;
}

.banner .bannermain .rightbanner2 .vechile .formmain .form .form1 .formright .formright0 .formright1 input {
  width: 90%;
}

.banner .bannermain .rightbanner2 .vechile .formmain .form .form1 .formright .formright0 .formright2 {
  width: 50%;
}

.banner .bannermain .rightbanner2 .vechile .formmain .form .form1 .formright .formright0 .formright2 input {
  width: 90%;
}

/*form css end(index3.html)*/

/* Show vehicle */


.main {
    display: flex;
    justify-content: space-between;
}
.image img {
  width: 100%;
  max-width: 600px;
  border: 1px solid #d5d5d5;
  object-fit: cover;
  border-radius: 10px;
  height: 100%;
}

.wrap h2 {
  margin-bottom: 10px;
}

.wrap {
  padding: 30px;
}

.image {
  width: 40%;
}



.left {
  display: flex;
}

.tab-container {
    width: 100%;
    margin-top: 20px;
}

/* Tab buttons style */
.tabs {
    display: flex;
    border-bottom: 2px solid #ddd;
    padding-bottom: 20px;
    gap: 20px;
}

.tab {
    padding: 14px 20px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s;
    font-size: 18px;
    border: 1px solid #d9dbdb;
    border-radius: 10px;
    font-family: "IBM Plex Sans", sans-serif;
}

.tab:hover {
  background-color: #ddd;
}


tr.show_row th{
    font-weight: 600;
    font-size: 18px;
    line-height: 20px;
    letter-spacing: 0%;
    padding: 20px 15px;
}

tr.show_row td{
    font-weight:500;
    font-size: 18px;
    line-height: 20px;
    letter-spacing: 0%;
    padding: 20px 15px;
}

/* Active tab style */
.tab.active {
    background: linear-gradient(90deg, #507B87 0%, #8BBCCC 100%);
    color: white;
    font-weight: bold;
    border-radius: 10px;
    font-size: 18px;
    border: 1px solid #d9dbdb;
    font-family: "IBM Plex Sans", sans-serif;
}

/* Tab content style */
.tab-content {
  padding-top: 20px;
  display: none;
}

.tab-content.active {
  display: block;
}

.pricing {
    background: #f7fafc;
    color: #2f6f7f;
    font-weight: 700;
    padding: 20px 15px;
    border-bottom: 1px solid #e7e7e7;
    text-align: left;
    font-size: 20px;
}

.heading_btn h2 {
  font-weight: 400;
    font-size: 30px;
    line-height: 25px;
    margin: 0 auto;
}

.heading_btn {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #EAEAEA;
    align-items: center;
    padding: 37px 25px;
}

button.edit_btn {
    background: linear-gradient(90deg, #507B87 0%, #8BBCCC 100%);
    font-weight: bold;
    border-radius: 10px;
    font-size: 18px;
    border: 1px solid #d9dbdb;
    font-family: "IBM Plex Sans", sans-serif;
    padding: 16px 40px;
}

button.edit_btn a {
    color: white;
    text-decoration: none;
    font-family: "IBM Plex Sans", sans-serif;
}


form.search-form {
    display: flex;
    align-items: center;
    border: 3px solid #EAEAEA;
    border-radius: 10px;
    padding: 10px 8px;
}


/* End show vehicle */


/*invoices css start(index4.html)*/
.banner .bannermain .rightbanner {
  background: #eaeaea;
  width: 100%;
}





input[type="file"]::-webkit-file-upload-button {
  visibility: hidden;
}

input[type="file"]::file-selector-button {
  visibility: hidden;
}


.ffile {
  border: 1px solid #d9dbdb;
    width: 100% !important;
    display: flex;
    justify-content: end;
    border-radius: 8px;
}


.ffile input {
  border:none;
  display: flex;
  align-items: center;
  justify-content: start;
  text-align: left;
}

#vehicle_image{
  flex: 1;
  text-align: left !important;   /* center text */
  font-size: 14px;
  color: #000000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.add-vehicles {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-btn {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-bottom: 20px;
  margin-top: 20px;
  gap: 10px;
}

.banner .bannermain .rightbanner .invoices {
  background: #ffffff;
  padding: 20px;
  margin: 0 !important;
  margin-top: 20px !important;
  border: 1px solid #AFAEAE;
  border-radius: 10px;
}

.banner .bannermain .rightbanner .invoices .right1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 3px solid #EAEAEA;
  margin-bottom: 20px;
}

.banner .bannermain .rightbanner .invoices .right1 h1 {
  font-weight: 400;
  font-size: 51px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  margin-top: 20px;
  margin-bottom: 20px;

}

.banner .bannermain .rightbanner .invoices .right1 button {
  font-weight: 600;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  padding: 20px;
  color: #ffffff;
  background: linear-gradient(90deg, #507B87 0%, #8BBCCC 100%);
  border: none;
  border-radius: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
  cursor: pointer;

}

.banner .bannermain .rightbanner .invoices .right2 {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.banner .bannermain .rightbanner .invoices .right2 .form {
  width: 40%;
}

.banner .bannermain .rightbanner .invoices .right2 .form p {
  font-weight: 600;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  padding-bottom: 10px;
}

.banner .bannermain .rightbanner .invoices .right2 .form form input {
  width: 90%;
  height: 50px;
  border: 3px solid #EAEAEA;
  padding-left: 10px;

}

.banner .bannermain .rightbanner .invoices .right2 .form form input::placeholder {
  font-weight: 600;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
}

.banner .bannermain .rightbanner .invoices .right3 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

.banner .bannermain .rightbanner .invoices .right3 button {
  padding: 12px 17px;
  font-weight: 500;
  font-style: Medium;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  border: none;
  border-radius: 10px;
  background: linear-gradient(90deg, #507B87 0%, #8BBCCC 100%);
  color: #ffffff;
  margin-bottom: 70px;
  cursor: pointer;
}

.banner .bannermain .rightbanner .invoices .right3 .search {
  display: flex;
  align-items: end;
}

.banner .bannermain .rightbanner .invoices .right3 .search p {
  font-weight: 500;
  font-style: Medium;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  padding-right: 5px;

}

.banner .bannermain .rightbanner .invoices .right3 .search form input {
  border: 3px solid #EAEAEA;
  width: 201px;
  height: 20px;


}

.banner .bannermain .rightbanner .invoices .right4 {
  margin-bottom: 20px;
  overflow-x: auto;
}

.banner .bannermain .rightbanner .invoices .right4 table,
th,
td {
  border: 2px solid #EAEAEA;
  border-collapse: collapse;
}

.banner .bannermain .rightbanner .invoices .right4 table th {
  font-weight: 700;
  font-style: Bold;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #507B87;
  padding: 15px;
  text-align: left;

}

.banner .bannermain .rightbanner .invoices .right4 table th i {
  height: 23px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
}

.banner .bannermain .rightbanner .invoices .right4 table td {
  font-weight: 500;
  font-style: Medium;
  font-size: 18px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  padding: 20px 15px;

}

.banner .bannermain .rightbanner .invoices .right4 table td span {
  color: #507B87;
}

.banner .bannermain .rightbanner .invoices .right4 table td i {
  padding-right: 10px;
  filter: invert(1) grayscale(100%) contrast(100%) brightness(0);
  cursor: pointer;
}

.banner .bannermain .rightbanner .invoices .right5 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.banner .bannermain .rightbanner .invoices .right5 .pahragraph p {

  font-weight: 600;
  font-size: 22px;
  line-height: 40px;
  letter-spacing: 0%;
  vertical-align: middle;

}

.banner .bannermain .rightbanner .invoices .right5 .previous {
  display: flex;
  margin-bottom: 20px;
}

.banner .bannermain .rightbanner .invoices .right5 .previous p {
  font-weight: 600;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  border: 3px solid #EAEAEA;
  padding: 8px 5px;

}

.banner .bannermain .rightbanner .invoices .right5 .previous p a {
  text-decoration: none;
  color: black;
}

.banner .bannermain .rightbanner .invoices .right5 .previous h6 {
  font-weight: 600;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  border: 3px solid #EAEAEA;
  padding: 8px 10px;
  background: #507B87;
}

.banner .bannermain .rightbanner .invoices .right5 .previous h6 a {
  text-decoration: none;
  background: #507B87;
  color: #ffffff;
}

.banner .bannermain .rightbanner .invoices .right5 .previous h5 {
  font-weight: 600;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  border: 3px solid #EAEAEA;
  padding: 8px 5px;

}

.banner .bannermain .rightbanner .invoices .right5 .previous h5 a {
  text-decoration: none;
  color: black;
}

.input-with-icon {
  position: relative;
  display: inline-block;
  width: 100%;

}

input-with-icon input {
  width: 100%;
  padding-right: 3px;
  box-sizing: border-box;

}

.input-with-icon .icon {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  color: #888;
  color: #000000;
  cursor: pointer;
}

/* Table container */
.invoices .right4 {
  overflow-x: auto;
}

/* Base table look */
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  /* equal column widths distributed across table */
  background: #fff;
  box-shadow: 0 0 0 1px #e6e6e6 inset;
  font-family: "Inter", Arial, sans-serif;
  font-size: 14px;
  border-bottom: 1px solid;
}

/* Head */
table thead th {
  background: #f7fafc;
  color: #2f6f7f;
  font-weight: 700;
  padding: 14px 12px;
  border-bottom: 1px solid #e7e7e7;
  text-align: left;
}

/* Cells */
table td {
  padding: 18px 12px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* truncate long text */
}

/* Fix equal heights and set min height for rows */
table tbody tr {
  min-height: 84px;
  /* adjust to taste */
}

/* Make image column centered and image sized consistently */
.table-img-cell {
  text-align: center;
  width: 140px;
  /* reserve slightly wider column for images */
}

.table-img-cell img {
  width: 180px;
  height: 95px;
  object-fit: cover;
  /* crop to fit while preserving aspect */
  display: inline-block;
  border-radius: 6px;
  /* box-shadow: 0 2px 6px rgba(0,0,0,0.08); */
}

/* Action icons column */
.action-icons {
  width: 120px;
  /* keep it narrow */
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 14px;
  align-items: center;
  padding: 18px 8px;
}


/* Icon sizing */
.action-icons a,
.action-icons button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
}

/* Hover states */
.action-icons a:hover,
.action-icons button:hover {
  background: rgba(0, 0, 0, 0.04);
}

th.id {
  width: 55px;
}

.add-vehicles a {
  text-decoration: none;
  color: #ffffff;
  background: linear-gradient(90deg, #507b87 0%, #8bbccc 100%);
  font-weight: 400;
  padding: 15px 28px;
  font-size: 20px;
  border-radius: 10px;
  line-height: 20px;
  font-family: "IBM Plex Sans", sans-serif;
}

.add-vehicles h2 {
  margin: 20px auto;
  font-weight: 400;
  font-size: 30px;
  vertical-align: middle;
}

.add-vehicles .all {
    width: 100%;
    text-align: center;
}

.add-vehicles .add {
    width: 25%;
    display: flex;
    justify-content: end;
}

.left .image {
    width: 100%;
    max-width: 600px;
}
.left .formmain {
    width: 62%;
}

.main form {
    padding: 0;
}



/*invoices css end(index4.html)*/



/*booking css start(index5.html)*/


.rightbook1 .button button {
  padding: 15px 28px;
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
  background: linear-gradient(90deg, #507b87 0%, #8bbccc 100%);
  border-radius: 10px;
  color: #ffffff;
  border: none;
  margin-left: 30px;
  cursor: pointer;
}

.banner .bannermain .rightbanner {
  background: #eaeaea;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
}

.banner .bannermain .rightbanner .booking {
  border: 1px solid #afaeae;
  padding: 20px;
  border-radius: 20px;
  background: #ffffff;
  margin-top: 20px;
}

.banner .bannermain .rightbanner .booking .rightbook1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.banner .bannermain .rightbanner .booking .rightbook1 h1 {
  font-weight: 400;
  font-size: 48px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  padding-top: 35px;
  padding-bottom: 35px;
}

.banner .bannermain .rightbanner .booking .rightbook1 .search {
  display: flex;
}

.banner .bannermain .rightbanner .booking .rightbook1 .search i {
  font-size: 30px;
  padding-right: 6px;
}

.banner .bannermain .rightbanner .booking .rightbook1 .search form input {
  width: 250px;
  height: 35px;
  border-width: 3px;
  border: 3px solid #eaeaea;
  padding-left: 10px;
}

.banner .bannermain .rightbanner .booking .rightbook1 .search form input::placeholder {
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #000000;
}

.banner .bannermain .rightbanner .booking .rightbook2 .upperrightbook table,
th,
td {
  border-collapse: collapse;
}

.banner .bannermain .rightbanner .booking .rightbook2 .upperrightbook table tbody tr {
  border-collapse: collapse;
}

.banner .bannermain .rightbanner .booking .rightbook2 .downrightbook table tbody tr:nth-child(odd) {
  background: #eaeaea;
}

.banner .bannermain .rightbanner .booking .rightbook2 .upperrightbook table tr th {
  font-weight: 700;
  font-style: Bold;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #507b87;
  padding-top: 25px;
  padding-bottom: 25px;
  border: 3px solid #eaeaea;
}

.banner .bannermain .rightbanner .booking .rightbook2 .upperrightbook table tbody tr td input {
  width: 80%;
  height: 25px;
  border-radius: 20px;
  border-width: 2px;
  opacity: 1;
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 10px;
  padding-left: 5px;
  padding-right: 5px;
  margin-right: 10px;
}

.banner .bannermain .rightbanner .booking .rightbook2 .upperrightbook table tbody tr td input::placeholder {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
}

.banner .bannermain .rightbanner .booking .rightbook2 .downrightbook {
  max-width: 100%;
  /* overflow-x: auto; */
}

.banner .bannermain .rightbanner .booking .rightbook2 .downrightbook table {
  width: 100%;
}

.banner .bannermain .rightbanner .booking .rightbook2 .downrightbook table,
th,
td {
  border-collapse: collapse;
}

.banner .bannermain .rightbanner .booking .rightbook2 .downrightbook table tbody tr {
  border-collapse: collapse;
}

.banner .bannermain .rightbanner .booking .rightbook2 .downrightbook table tbody tr td {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  padding-top: 25px;
  padding-bottom: 25px;
  padding-left: 20px;
  width: 211.8px;
}

.banner .bannermain .rightbanner .booking .rightbook2 .downrightbook table tbody tr td span {
  font-weight: 400;
  font-size: 6px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
}

.banner .bannermain .rightbanner .booking .rightbook2 .downrightbook table tbody tr td button {
  padding: 6px 7px;
  font-weight: 500;
  font-style: Medium;
  font-size: 18px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  background: #8cb189;
  color: #ffffff;
  border-radius: 20px;
  border: none;
  cursor: pointer;
}

.banner .bannermain .rightbanner .booking .rightbook3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 30px;
}

.banner .bannermain .rightbanner .booking .rightbook3 .button button {
  padding: 20px 24px;
  font-weight: 600;
  font-size: 24px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  background: linear-gradient(90deg, #507b87 0%, #8bbccc 100%);
  border-radius: 10px;
  color: #ffffff;
  border: none;
  margin-left: 30px;
  cursor: pointer;
}

.banner .bannermain .rightbanner .booking .rightbook3 .previous {
  display: flex;
  margin-right: 30px;
}

.banner .bannermain .rightbanner .booking .rightbook3 .previous p {
  font-weight: 600;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  border: 3px solid #eaeaea;
  padding: 8px 5px;
}

.banner .bannermain .rightbanner .booking .rightbook3 .previous p a {
  text-decoration: none;
  color: #000000;
}

.banner .bannermain .rightbanner .booking .rightbook3 .previous h6 {
  font-weight: 600;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  border: 3px solid #eaeaea;
  padding: 8px 10px;
  background: #507b87;
}

.banner .bannermain .rightbanner .booking .rightbook3 .previous h6 a {
  text-decoration: none;
  color: #ffffff;
}

.banner .bannermain .rightbanner .booking .rightbook3 .previous h5 {
  font-weight: 600;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  border: 3px solid #eaeaea;
  padding: 8px 5px;
}

.banner .bannermain .rightbanner .booking .rightbook3 .previous h5 a {
  text-decoration: none;
  color: #000000;
}

/*booking css end(index5.html)*/


/*createbooking css start(index6.html)*/

.banner .bannermain .rightbanner6 {
  background: #EAEAEA;
  width: 100%;
}

.banner .bannermain .rightbanner6 .createbooking {
  border: 1px solid #AFAEAE;
  background: #FFFFFF;
  margin: 20px;
  padding: 20px;
  border-radius: 20px;
}

.banner .bannermain .rightbanner6 .createbooking .right1 {
  border-bottom: 3px solid #EAEAEA;
  margin-bottom: 50px;

}

.banner .bannermain .rightbanner6 .createbooking .right1 h1 {
  font-weight: 400;
  font-size: 51px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  padding-top: 30px;
  padding-bottom: 30px;
}

.banner .bannermain .rightbanner6 .createbooking .right2 {
  position: relative;
  border: 4px solid #EAEAEA;
  margin-bottom: 40px;

}

.banner .bannermain .rightbanner6 .createbooking .right2 h2 {
  position: absolute;
  top: -20px;
  background: #FFFFFF;
  left: 20px;
  font-weight: 600;
  font-size: 30px;
  line-height: 40px;
  letter-spacing: 2%;
  vertical-align: middle;
  color: #507b87;
  padding: 0px 20px;
}

.banner .bannermain .rightbanner6 .createbooking .right2 .right2class {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  margin-bottom: 30px;
  margin-left: 10px;
  margin-right: 10px;
}

.banner .bannermain .rightbanner6 .createbooking .right2 .right2class .right2content p {
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 2%;
  vertical-align: middle;
  padding-bottom: 25px;
}

.banner .bannermain .rightbanner6 .createbooking .right2 .right2class .right2content p span {
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 2%;
  vertical-align: middle;
  color: red;
}

.banner .bannermain .rightbanner6 .createbooking .right2 .right2class .right2content form input {
  width: 315px;
  height: 39px;
  border-radius: 20px;
  border: 3px solid #EAEAEA;
  padding-left: 10px;
}

.banner .bannermain .rightbanner6 .createbooking .right2 .right2class .right2content form input::placeholder {
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 2%;
  vertical-align: middle;
  color: #000000;
}

.input-with-icon {
  position: relative;
  display: inline-block;
  width: 100%;
}

input-with-icon input {
  width: 100%;
  padding-right: 3px;
  box-sizing: border-box;
}

.input-with-icon .icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #888;
  color: #000000;
  cursor: pointer;
}


.banner .bannermain .rightbanner6 .createbooking .right3 {
  position: relative;
  border: 4px solid #EAEAEA;
  margin-bottom: 40px;

}

.banner .bannermain .rightbanner6 .createbooking .right3 h2 {
  position: absolute;
  top: -20px;
  background: #FFFFFF;
  left: 20px;
  font-weight: 600;
  font-size: 30px;
  line-height: 40px;
  letter-spacing: 2%;
  vertical-align: middle;
  color: #507b87;
  padding: 0px 20px;
}

.banner .bannermain .rightbanner6 .createbooking .right3 .right3class {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  margin-bottom: 30px;
  margin-left: 10px;
  margin-right: 10px;
}

.banner .bannermain .rightbanner6 .createbooking .right3 .right3class .right3content p {
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 2%;
  vertical-align: middle;
  padding-bottom: 25px;
}

.banner .bannermain .rightbanner6 .createbooking .right3 .right3class .right3content form input {
  width: 425px;
  height: 39px;
  border-radius: 20px;
  border: 3px solid #EAEAEA;
  padding-left: 10px;
}

.banner .bannermain .rightbanner6 .createbooking .right3 .right3class .right3content form input::placeholder {
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 2%;
  vertical-align: middle;
  color: #000000;
}

.banner .bannermain .rightbanner6 .createbooking .right4 {
  position: relative;
  border: 4px solid #EAEAEA;
  margin-bottom: 40px;

}

.banner .bannermain .rightbanner6 .createbooking .right4 h2 {
  position: absolute;
  top: -20px;
  background: #FFFFFF;
  left: 20px;
  font-weight: 600;
  font-size: 30px;
  line-height: 40px;
  letter-spacing: 2%;
  vertical-align: middle;
  color: #507b87;
  padding: 0px 20px;
}

.banner .bannermain .rightbanner6 .createbooking .right4 .right4class {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  margin-bottom: 30px;
  margin-left: 10px;
  margin-right: 10px;
}

.banner .bannermain .rightbanner6 .createbooking .right4 .right4class .right4content p {
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 2%;
  vertical-align: middle;
  padding-bottom: 25px;
}

.banner .bannermain .rightbanner6 .createbooking .right4 .right4class .right4content p span {
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 2%;
  vertical-align: middle;
  color: red;
}

.banner .bannermain .rightbanner6 .createbooking .right4 .right4class .right4content form input {
  width: 315px;
  height: 39px;
  border-radius: 20px;
  border: 3px solid #EAEAEA;
  padding-left: 10px;
}

.banner .bannermain .rightbanner6 .createbooking .right4 .right4class .right4content form input::placeholder {
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 2%;
  vertical-align: middle;
  color: #000000;
  ;
}

.banner .bannermain .rightbanner6 .createbooking .right5 {
  position: relative;
  border: 4px solid #EAEAEA;
  margin-bottom: 40px;
  width: 50%;

}

.banner .bannermain .rightbanner6 .createbooking .right5 h2 {
  position: absolute;
  top: -20px;
  background: #FFFFFF;
  left: 20px;
  font-weight: 600;
  font-size: 30px;
  line-height: 40px;
  letter-spacing: 2%;
  vertical-align: middle;
  color: #507b87;
  padding: 0px 20px;
}

.banner .bannermain .rightbanner6 .createbooking .right5 .right5class {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  margin-bottom: 30px;
  margin-left: 10px;
  margin-right: 10px;
}

.banner .bannermain .rightbanner6 .createbooking .right5 .right5class .right5content p {
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 2%;
  vertical-align: middle;
  padding-bottom: 25px;
}

.banner .bannermain .rightbanner6 .createbooking .right5 .right5class .right5content p span {
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 2%;
  vertical-align: middle;
  color: red;
}

.banner .bannermain .rightbanner6 .createbooking .right5 .right5class .right5content form input {
  width: 315px;
  height: 39px;
  border-radius: 20px;
  border: 3px solid #EAEAEA;
  padding-left: 10px;
}

.banner .bannermain .rightbanner6 .createbooking .right5 .right5class .right5content form input::placeholder {
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 2%;
  vertical-align: middle;
  color: #000000;
  ;
}

.banner .bannermain .rightbanner6 .createbooking .right6 {
  display: flex;
  justify-content: end;
  margin-bottom: 10px;
}

.banner .bannermain .rightbanner6 .createbooking .right6 button {
  padding: 20px 50px;
  background: linear-gradient(90deg, #507B87 0%, #8BBCCC 100%);
  font-weight: 600;
  font-size: 24px;
  line-height: 20px;
  letter-spacing: 2%;
  vertical-align: middle;
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

/*createbooking css end(index6.html)*/



/*confirmation css start(index6.html)*/
.banner .bannermain .rightbanner7 {
  background: #EAEAEA;
  width: 100%;
}

.banner .bannermain .rightbanner7 .confirmation {
  background: #FFFFFF;
  border: 3px solid;
  border-image-source: linear-gradient(180deg, #507B87 0%, #8BBCCC 100%);
  margin: 100px;
  border-radius: 20px;
  text-align: center;
  padding: 200px 100px;
}

.banner .bannermain .rightbanner7 .confirmation img {

  margin-bottom: 60px;
}

.banner .bannermain .rightbanner7 .confirmation h1 {
  font-weight: 500;
  font-style: Medium;
  font-size: 65px;
  line-height: 20px;
  letter-spacing: 2%;
  vertical-align: middle;
  margin-bottom: 60px;
}

.banner .bannermain .rightbanner7 .confirmation p {
  font-weight: 500;
  font-style: Medium;
  font-size: 30px;
  line-height: 20px;
  letter-spacing: 2%;
  vertical-align: middle;
  margin-bottom: 60px;
}

.banner .bannermain .rightbanner7 .confirmation button {
  padding: 20px 30px;
  font-weight: 500;
  font-style: Medium;
  font-size: 30px;
  line-height: 20px;
  letter-spacing: 2%;
  vertical-align: middle;
  background: linear-gradient(90deg, #507B87 0%, #8BBCCC 100%);
  border: none;
  color: #FFFFFF;
  cursor: pointer;
}

/*confirmation css end(index7.html)*/
/* vehicles css start */
html body section.banner div.bannermain div.rightbanner div.invoices div.search div.search-btn i.fa-solid.fa-magnifying-glass {
  font-size: 20px;
}

.search-btn form input {
  font-size: 17px;
  border: none;
}

html body section.banner div.bannermain div.rightbanner div.invoices div.search div.right4 {
  margin-bottom: 20px;
  overflow-x: auto;
}

html body section.banner div.bannermain div.rightbanner div.invoices div.search div.right4 table {
  width: 100%;
}

label.custom-file-upload {
  padding: 14px;
  background: #D9D9D9;
  font-size: 18px;
  font-weight: 400;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  cursor: pointer;
}

label.custom-file-upload.disabled {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}

.file {
  border: 1px solid #d9dbdb;
  width: 100% !important;
  display: flex;
  justify-content: end;
  border-radius: 8px;
}

/* vehicles css end */

/* customers css start */
html body section.banner div.bannermain div.leftbanner {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #507b87 0%, #8bbccc 100%);
  width: 256.35px;
  min-width: 256.35px;
  position: sticky;
  top: 51px;
  box-sizing: border-box;
  height: 1000px;
  justify-content: space-between;
}

html body section.banner div.bannermain div.rightbanner a.btn.btn-primary.mb-3 {
  padding: 15px 28px;
  background: linear-gradient(90deg, #507B87 0%, #8BBCCC 73.56%);
  border-radius: 10px;
  color: white;
  text-decoration: none;
  font-size: 20px;
  line-height: 20px;

}

html body section.banner div.bannermain div.rightbanner table.table.table-bordered {
  border: 2px solid #EAEAEA;
  border-collapse: collapse;
  width: 100%;

}

html body section.banner div.bannermain div.rightbanner table.table.table-bordered thead tr th {
  border-collapse: collapse;
  border: 2px solid #EAEAEA;
  font-size: 20px;
  text-align: left;
  color: #507B87;
  /* padding-top: 10px;
	padding-bottom: 10px;
  padding-left: 20px; */
  padding: 15px;
}

.action-icons {
  display: flex;
  gap: 10px;
  border-bottom: 0 !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;

}

/* html body section.banner div.bannermain div.rightbanner table.table.table-bordered tbody tr td a.btn.btn-info.btn-sm{
	padding: 10px;
	background: linear-gradient(90deg, #507B87 0%, #8BBCCC 100%);
	color: white;
	text-decoration: none;
	border-radius: 10px;
  margin:5px;
} */
/* html body section.banner div.bannermain div.rightbanner table.table.table-bordered tbody tr td a.btn.btn-warning.btn-sm{
padding: 10px;
	background: linear-gradient(90deg, #507B87 0%, #8BBCCC 100%);
	color: white;
	text-decoration: none;
	border-radius: 10px;
  margin:5px;
} */

/* customers css end */

/* bookings css Start */
html body section.banner div.bannermain div.rightbanner div.booking div.rightbook2 {
  margin-bottom: 30px;
}

html body section.banner div.bannermain div.rightbanner div.booking div.rightbook1 h1 {
  font-weight: 400;
  font-size: 40px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
}


html body section.banner div.bannermain div.rightbanner div.booking div.rightbook1 div.search {
  display: flex;
  align-items: center;
}

html body section.banner div.bannermain div.rightbanner div.booking div.rightbook2 {
  margin-bottom: 30px;
}

/* html body section.banner div.bannermain div.rightbanner div.booking div.rightbook2 div.upperrightbook{
  overflow-x: auto;
} */
html body section.banner div.bannermain div.rightbanner div.booking div.rightbook2 div.upperrightbook table thead tr th {
  font-weight: 700;
  font-style: Bold;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #507b87;
  padding-top: 25px;
  padding-bottom: 25px;
  border: 3px solid #eaeaea;
}

html body section.banner div.bannermain div.rightbanner div.booking div.rightbook2 div.upperrightbook table thead tr td input {
  font-size: 14px;
  padding-left: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 20px;
  border: 2px solid #EAEAEA;
  margin-top: 22px;
  margin-bottom: 22px;
  margin-left: 14px;
  margin-right: 14px;
}

html body section.banner div.bannermain div.rightbanner div.booking div.rightbook2 div.downrightbook table tbody tr td small {
  font-size: 18px;
}

/* bookings css end */



/* edit profile header start */

html body section.banner div.bannermain div.rightbanner div.container.mt-5 h2 {
  font-size: 48px;
  margin: 20px 0px;
}

html body section.banner div.bannermain div.rightbanner div.container.mt-5 form div.mb-3 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  gap: 30px;
}

html body section.banner div.bannermain div.rightbanner div.container.mt-5 form div.mb-3 label.form-label {

  width: 50%;
  text-align: center;
  font-size: 20px;
  border: 1px solid #d9dbdb;
  padding: 10px 0px;
  border-radius: 8px;
  font-weight: 400;
}

.avatar {
  margin-top: 20px;
  align-items: center;
  justify-content: center;
  display: flex;
  position: relative;
}

html body section.banner div.bannermain div.rightbanner div.container.mt-5 form div.mb-3 input.form-control {
  width: 50%;
  border: 1px solid #d9dbdb;
  padding: 10px 0px;
  font-size: 20px;
  text-align: center;
  border-radius: 8px;
}

html body section.banner div.bannermain div.rightbanner div.container.mt-5 form button.btn.btn-primary {
  background: linear-gradient(270deg, #8bbccc 0%, #507b87 100%);
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  padding: 15px 30px;
  border: none;
  border-radius: 10px;
  color: #ffffff;
  cursor: pointer;
}

.edit-icon {
  position: absolute;
  top: 74px;
  right: 47%;
  cursor: pointer;
  background: white;
  padding: 4px;
}

/*  edit profile header end */

/* edit vehicle css start */

html body section.banner div.bannermain div.rightbanner div.container h2 {

  font-size: 48px;
  margin: 10px 0px;
}

html body section.banner div.bannermain div.rightbanner div.container form {
  padding: 30px;
  border-radius: 10px;
  background: white;
}

html body section.banner div.bannermain div.rightbanner div.container form div.form-group {
  display: flex;
  margin-bottom: 20px;
}

html body section.banner div.bannermain div.rightbanner div.container form div.form-group div.leftform {
  display: flex;
  flex-direction: column;
  width: 50%;
}

html body section.banner div.bannermain div.rightbanner div.container form div.form-group div.leftform label {
  font-weight: 400;
  font-size: 18px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  margin-bottom: 10px;

}

html body section.banner div.bannermain div.rightbanner div.container form div.form-group div.leftform input.form-control {
  width: 90%;
  width: 95%;
  height: 50px;
  border: 1px solid #d9dbdb;
  padding-left: 10px;
  display: flex;
}

html body section.banner div.bannermain div.rightbanner div.container form div.form-group div.rightform {


  display: flex;
  flex-direction: column;
  width: 50%;
}

html body section.banner div.bannermain div.rightbanner div.container form div.form-group div.rightform label {
  font-weight: 400;
  font-size: 18px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  margin-bottom: 10px;

}

html body section.banner div.bannermain div.rightbanner div.container form div.form-group div.rightform input.form-control {
  width: 90%;
  width: 95%;
  height: 50px;
  border: 1px solid #d9dbdb;
  padding-left: 10px;
  display: flex;
}

html body section.banner div.bannermain div.rightbanner div.container form div.form-group div.leftform input.form-control-file {
  height: 50px;
  border: 1px solid #d9dbdb;
  width: 95%;
}

html body section.banner div.bannermain div.rightbanner div.container form button.btn.btn-success.mt-3 {
  background: linear-gradient(270deg, #8bbccc 0%, #507b87 100%);
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  padding: 15px 30px;
  border: none;
  border-radius: 30px;
  color: #ffffff;
  margin-right: 30px;
  cursor: pointer;
}

html body section.banner div.bannermain div.rightbanner div.container form a.btn.btn-secondary.mt-3 {
  background: linear-gradient(270deg, #8bbccc 0%, #507b87 100%);
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  padding: 15px 30px;
  border: none;
  border-radius: 30px;
  color: #ffffff;
  margin-right: 30px;
  cursor: pointer;
  text-decoration: none;
}

html body section.banner div.bannermain div.rightbanner div.container form div.form-group div.rightform img {
  width: 97%;
  height: 100%;
  text-align: end;
  align-items: center;
  align-content: center;
  border: 1px solid #d9dbdb;
  text-align: end;
}

.form1 img {
  width: 60px;
  height: 49px;
  object-fit: contain;
}

.file3 {
  border: 1px solid #d9dbdb;
  width: 100% !important;
  display: flex;
  justify-content: space-between;
  border-radius: 8px;
  align-items: center;
  padding-left: 5px;
}

/* edit vehicle css end */

/* vechile detail css start */


html body section.banner div.bannermain div.rightbanner div.container h2 {

  font-size: 48px;
  margin: 10px 0px;
}

html body section.banner div.bannermain div.rightbanner div.container div.card div.card-body table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 50px;
}

html body section.banner div.bannermain div.rightbanner div.container div.card div.card-body table tbody tr th {

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

html body section.banner div.bannermain div.rightbanner div.container div.card div.card-body table tbody tr th p strong {
  font-size: 20px;
}


html body section.banner div.bannermain div.rightbanner div.container div.card div.card-body table tbody tr td {
  width: 50%;
  padding: 10px;
  font-size: 20px;

}

html body section.banner div.bannermain div.rightbanner div.container div.card div.card-body a.btn.btn-secondary {
  background: linear-gradient(270deg, #8bbccc 0%, #507b87 100%);
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  padding: 15px 30px;
  border: none;
  border-radius: 30px;
  color: #ffffff;
  margin-right: 30px;
  cursor: pointer;
  text-decoration: none;

}

html body section.banner div.bannermain div.rightbanner div.container div.card div.card-body a.btn.btn-primary {
  background: linear-gradient(270deg, #8bbccc 0%, #507b87 100%);
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  padding: 15px 30px;
  border: none;
  border-radius: 30px;
  color: #ffffff;
  margin-right: 30px;
  cursor: pointer;
  text-decoration: none;

}





/* vechile detail css end */

/* customers detail css start */


html body section.banner div.bannermain div.rightbanner table.table.table-bordered tbody tr th {
  width: 50%;
  font-size: 20px;
  padding: 10px 0px;
  border: 2px solid #EAEAEA;
  border-collapse: collapse;
  text-align: left;
  padding-left: 20px;
}

html body section.banner div.bannermain div.rightbanner table.table.table-bordered tbody tr td {
  border-collapse: collapse;
  border: 2px solid #EAEAEA;
  font-size: 20px;
  text-align: center;
  color: black;
  text-align: left;
  padding: 15px;
  font-weight: 500;
}

/* customers detail css end */


/* edit customer css start */

html body section.banner div.bannermain div.rightbanner form.editcustomer {
  padding: 30px;
  border-radius: 10px;
}

html body section.banner div.bannermain div.rightbanner form.editcustomer div.row {
  margin-bottom: 30px;
}

html body section.banner div.bannermain div.rightbanner form div.row div.col-md-6.mb-3 {
  display: flex;
  margin-bottom: 20px;

}

html body section.banner div.bannermain div.rightbanner form div.row div.col-md-6.mb-3 div.lefteditbanner {
  width: 50%;
  flex-direction: column;
  display: flex;

}

html body section.banner div.bannermain div.rightbanner form div.row div.col-md-6.mb-3 div.lefteditbanner label {
  font-weight: 400;
  font-size: 18px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  margin-bottom: 10px;

}

html body section.banner div.bannermain div.rightbanner form div.row div.col-md-6.mb-3 div.lefteditbanner input.form-control {
  width: 100%;
  height: 50px;
  border: 1px solid #d9dbdb;
  padding-left: 5px;
  display: flex;
  border-radius: 8px;
}

html body section.banner div.bannermain div.rightbanner form div.row div.col-md-6.mb-3 div.righteditbanner {
  width: 50%;
  display: flex;
  flex-direction: column;
}

html body section.banner div.bannermain div.rightbanner form div.row div.col-md-6.mb-3 div.righteditbanner label {
  font-weight: 400;
  font-size: 18px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  margin-bottom: 10px;
}

html body section.banner div.bannermain div.rightbanner form div.row div.col-md-6.mb-3 div.righteditbanner input.form-control {
  width: 100%;
  height: 50px;
  border: 1px solid #d9dbdb;
  padding-left: 5px;
  display: flex;
  border-radius: 8px;
}

html body section.banner div.bannermain div.rightbanner form button.btn.btn-success {
  background: linear-gradient(270deg, #8bbccc 0%, #507b87 100%);
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  padding: 15px 30px;
  border: none;
  border-radius: 10px;
  color: #ffffff;
  cursor: pointer;
}

html body section.banner div.bannermain div.rightbanner form a.btn.btn-secondary {
  background: linear-gradient(270deg, #8bbccc 0%, #507b87 100%);
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  padding: 15px 30px;
  border: none;
  border-radius: 10px;
  color: #ffffff;

  cursor: pointer;
  text-decoration: none;
}

html body section.banner div.bannermain div.rightbanner form div.row div.col-md-6.mb-3 div.lefteditbanner select.form-control {
  width: 100%;
  height: 100%;
  background: white;
  border: 1px solid #d9dbdb;
  padding-left: 5px;
  border-radius: 8px;
}

html body section.banner div.bannermain div.rightbanner form div.row div.col-md-6.mb-3 div.righteditbanner textarea.form-control {
  height: 100%;
  width: 100%;
  border-radius: 8px;
  border-color: #d9dbdb;
}

html body section.banner div.bannermain div.rightbanner form.editcustomer div.row div.col-md-12.mb-3 {
  width: 50%;
}

html body section.banner div.bannermain div.rightbanner form.editcustomer div.row div.col-md-12.mb-3 div.lefteditbanner {
  display: flex;
  flex-direction: column;
}

html body section.banner div.bannermain div.rightbanner form.editcustomer div.row div.col-md-12.mb-3 div.lefteditbanner label {
  font-weight: 400;
  font-size: 18px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  margin-bottom: 10px;
}

html body section.banner div.bannermain div.rightbanner form.editcustomer div.row div.col-md-12.mb-3 div.lefteditbanner textarea.form-control {
  width: 98%;
  height: 100%;
  border-radius: 8px;
  padding: 15px 0 15px 5px;
  border-color: #d9dbdb;
}

/* edit customer css end */

/* add new customer start */

/* html body section.banner div.bannermain div.rightbanner h1{
  margin-top: 20px;
  margin-bottom: 25px;
  font-weight: 400;
  font-size: 48px;
} */
html body section.banner div.bannermain div.rightbanner form.addcustomer {
  padding: 30px;
  border-radius: 10px;
}

html body section.banner div.bannermain div.rightbanner form.addcustomer div.row {
  margin-bottom: 30px;
}

html body section.banner div.bannermain div.rightbanner form div.row div.col-md-6.mb-3 {
  display: flex;
  margin-bottom: 20px;
  gap: 30px;
}

html body section.banner div.bannermain div.rightbanner form div.row div.col-md-6.mb-3 div.leftaddbanner {
  width: 50%;
  display: flex;
  flex-direction: column;
}

html body section.banner div.bannermain div.rightbanner form div.row div.col-md-6.mb-3 div.leftaddbanner label {
  font-weight: 400;
  font-size: 18px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  margin-bottom: 10px;
}

html body section.banner div.bannermain div.rightbanner form div.row div.col-md-6.mb-3 div.leftaddbanner input.form-control {
  width: 100%;
  height: 50px;
  border: 1px solid #d9dbdb;
  padding-left: 5px;
  display: flex;
  border-radius: 8px;
}

html body section.banner div.bannermain div.rightbanner form div.row div.col-md-6.mb-3 div.rightaddbanner {
  width: 50%;
  display: flex;
  flex-direction: column;
}

html body section.banner div.bannermain div.rightbanner form div.row div.col-md-6.mb-3 div.rightaddbanner label {
  font-weight: 400;
  font-size: 18px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  margin-bottom: 10px;
}

html body section.banner div.bannermain div.rightbanner form div.row div.col-md-6.mb-3 div.rightaddbanner input.form-control {
  width: 100%;
  height: 50px;
  border: 1px solid #d9dbdb;
  padding-left: 5px;
  display: flex;
  border-radius: 8px;
}

html body section.banner div.bannermain div.rightbanner form button.btn.btn-primary {
  background: linear-gradient(270deg, #8bbccc 0%, #507b87 100%);
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  padding: 15px 30px;
  border: none;
  border-radius: 10px;
  color: #ffffff;
  cursor: pointer;
  text-decoration: none;
}

html body section.banner div.bannermain div.rightbanner form div.row div.col-md-6.mb-3 div.leftaddbanner select.form-control {
  width: 100%;
  height: 100%;
  background: white;
  border: 1px solid #d9dbdb;
  border-radius: 8px;
}

html body section.banner div.bannermain div.rightbanner form div.row div.col-md-6.mb-3 div.rightaddbanner textarea.form-control {
  height: 100%;
  width: 97%;
  border-radius: 8px;
  border-color: #d9dbdb;
}

html body section.banner div.bannermain div.rightbanner form.addcustomer div.row div.col-md-12.mb-3 {
  width: 50%;
  display: flex;
  gap: 30px;
}

html body section.banner div.bannermain div.rightbanner form.addcustomer div.row div.col-md-12.mb-3 div.leftaddbanner {
  width: 100%;
  display: flex;
  flex-direction: column;
}

html body section.banner div.bannermain div.rightbanner form.addcustomer div.row div.col-md-12.mb-3 div.leftaddbanner label {
  font-weight: 400;
  font-size: 18px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  margin-bottom: 10px;

}

html body section.banner div.bannermain div.rightbanner form.addcustomer div.row div.col-md-12.mb-3 div.leftaddbanner textarea.form-control {
  width: 100%;
  height: 100%;
  padding: 30px 0 30px 0;
  border-radius: 8px;
  border-color: #d9dbdb;
  padding-left: 15px;
  font-size: 14px;
}

/* add new customer end */

/* create booking css start */
html body section.banner div.bannermain div.rightbanner div.container form.createbook div.form-group {
  width: 100%;
  margin-bottom: 20px;
}

.createbook {
  padding: 20px 24px;
}

.form-group .rightcreatebooking {
  display: flex;
  flex-direction: column;
  width: 50%;

}

form.createbook .form-group {
  display: flex;
  gap: 30px;
}

.leftcreatebooking label {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 400;
}

.rightcreatebooking label {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 400;
}

.form-group .leftcreatebooking {
  display: flex;
  flex-direction: column;
  width: 50%;
}

select.form-control {
  height: 50px;
}

html body section.banner div.bannermain div.rightbanner div.container form.createbook div.form-group div.leftcreatebooking {
  display: flex;
  flex-direction: column;
  width: 50%;
}

html body section.banner div.bannermain div.rightbanner div.container form.createbook div.form-group div.leftcreatebooking label {
  font-weight: 400;
  font-size: 18px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  margin-bottom: 10px;
}

html body section.banner div.bannermain div.rightbanner div.container form.createbook div.form-group div.leftcreatebooking select.form-control {
  width: 95%;
  height: 50px;
  border: 1px solid #d9dbdb;
  padding-left: 10px;
  display: flex;
}

html body section.banner div.bannermain div.rightbanner div.container form.createbook div.form-group div.rightcreatebooking {
  display: flex;
  flex-direction: column;
  width: 50%;
}

html body section.banner div.bannermain div.rightbanner div.container form.createbook div.form-group div.rightcreatebooking label {
  font-weight: 400;
  font-size: 18px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  margin-bottom: 10px;
}

html body section.banner div.bannermain div.rightbanner div.container form.createbook div.form-group div.rightcreatebooking select.form-control {
  width: 95%;
  height: 50px;
  border: 1px solid #d9dbdb;
  padding-left: 10px;
  display: flex;
}

html body section.banner div.bannermain div.rightbanner div.container form.createbook div.form-group div.leftcreatebooking input.form-control {
  width: 95%;
  height: 50px;
  border: 1px solid #d9dbdb;
  padding-left: 10px;
  display: flex;
}

html body section.banner div.bannermain div.rightbanner div.container form.createbook div.form-group div.rightcreatebooking input.form-control {
  width: 95%;
  height: 50px;
  border: 1px solid #d9dbdb;
  padding-left: 10px;
  display: flex;
}

/* create booking css end */

.righthead div button img {
  width: 30px;
  filter: invert(1);
}

summary img {
  width: 36px;
  margin: 5px;
  border-radius: 50%;
}

/* modal overlay */
.custom-modal {
  display: none;
  /* hidden by default */
  position: fixed;
  z-index: 9999;
  inset: 0;
  /* top:0; left:0; right:0; bottom:0; */
  background: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  padding: 20px;
}

/* modal box */
.custom-modal-content {
  background: #fff;
  width: 380px;
  max-width: calc(100% - 40px);
  border-radius: 8px;
  padding: 22px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  text-align: center;
  animation: modalPop .16s ease-out;
}

/* small animation */
@keyframes modalPop {
  from {
    transform: translateY(6px) scale(.98);
    opacity: 0;
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.custom-modal h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: #222;
}

.custom-modal p {
  margin: 0 0 18px;
  color: #444;
  font-size: 14px;
}

/* action buttons row */
.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

/* button base */
.modal-btn {
  padding: 8px 14px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-weight: 600;
}

/* cancel vs delete look */
.modal-btn.cancel {
  background: #e0e0e0;
  color: #222;
}

.modal-btn.delete {
  background: #d9534f;
  color: #fff;
}

/* make sure your existing .btn.btn-danger.btn-sm still looks the same */
.btn.btn-danger.btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 4px;
  border: none;
}

/* small screens */
@media (max-width:420px) {
  .custom-modal-content {
    width: 100%;
    padding: 18px;
  }

  .modal-actions {
    flex-direction: column-reverse;
    gap: 8px;
  }

  .modal-btn {
    width: 100%;
  }
}

/* ACTION ICONS — FLEX ROW */
.action-icons {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  height: 100%;
  white-space: nowrap;
  /* prevent wrapping */
  vertical-align: middle !important;
}

/* RESET BOOTSTRAP BUTTON LOOK */
.action-icons .btn,
.action-icons button {
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
}

/* Remove clickable outline borders */
.action-icons .btn:focus,
.action-icons button:focus,
.action-icons .btn:active,
.action-icons button:active {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* ICON SIZE ALIGNMENT */
.action-icons i {
  font-size: 18px;
  line-height: 1;
}

/* Remove underline from action icon links */
.action-icons a {
  text-decoration: none !important;
}

.action-icons a:hover,
.action-icons a:focus {
  text-decoration: none !important;
}

/* IMAGE PREVIEW POPUP */
.custom-modal {
  display: none;
  position: fixed;
  z-index: 999999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
}

.custom-modal-content img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

#closeImagePreview {
  width: 120px;
}

.currency-settings-wrap {
  margin-top: 16px;
  display: flex;
  justify-content: left;
  /* move it to the right; use center if you prefer */
}

.currency-settings-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #6f9dab;
  /* same teal as your theme */
  color: #ffffff;
  border-radius: 999px;
  /* pill shape */
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: all 0.15s ease-in-out;
}

.currency-settings-btn img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
  /* make icon white-like if it's dark */
}

.currency-settings-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.currency-settings-btn:active {
  transform: translateY(0);
}