@import url("https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Mulish", sans-serif;
}
/* login css */

.banner {
  background-image: url("../images/login.png");
  background-size: 100% 100%;
  padding: 20px;
  color: white;
  background-repeat: no-repeat;
  font-weight: bold;
  display: flex;
  font-size: 24px;
  height: 100vh;
}

.right-panel {
  flex: 1.2;
  padding: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.login-box {
  width: 100%;
  max-width: 491px;
  height: 452px;
  text-align: center;
  background: white;
  padding: 32px 50px 32px 50px;
  border-radius: 28px;
  box-shadow: 0px 15px 43.55px 0px #00000014;
}

.login-box h2 {
  font-size: 30px;
  margin-bottom: 10px;
  font-weight: 700;
  color: #141921;
}

.login-box p {
  font-size: 18px;
  margin-bottom: 34px;
  color: #14192199;
  font-weight: 600;
}
.input-group {
  width: 100%;
  margin-bottom: 15px;
  position: relative;
}

.input-group label {
  display: block;
  font-size: 16px;
  margin-bottom: 9px;
  font-weight: 600;
  color: #141921;
  text-align: start;
}

.input-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #00000024;
  border-radius: 5px;
  font-weight: 600;
  font-size: 14px;
  color: #1419218c;
}

.input-group .icon {
  position: absolute;
  right: 10px;
  top: 38px;
  font-size: 16px;
  color: gray;
}

.remember-me {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 15px;
  color: #141921;
}

.remember-me input {
  margin-right: 5px;
}

.login {
  width: 100%;
  padding: 13px 14px 13px 14px;
  border: none;
  border-radius: 5px;
  background: #008080;
  color: white;
  font-size: 16px;
  cursor: pointer;
  margin-top: 20px;
}

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }

  .left-panel {
    height: 200px;
    justify-content: center;
    font-size: 20px;
  }
}

/* login css */

/* sidebar css */

.fa-2x {
  font-size: 2em;
}
.fa {
  position: relative;
  display: table-cell;
  width: 60px;
  height: 36px;
  text-align: center;
  vertical-align: middle;
  font-size: 20px;
}

.main-menu:hover,
nav.main-menu.expanded {
  width: 250px;
  overflow: visible;
}

.main-menu {
  background: #027273;
  border-right: 1px solid #e5e5e5;
  position: fixed;
  top: 0;
  bottom: 0;
  height: 100%;
  left: 0;
  width: 60px;
  overflow: hidden;
  -webkit-transition: width 0.05s linear;
  transition: width 0.05s linear;
  -webkit-transform: translateZ(0) scale(1, 1);
  z-index: 1000;
}

.main-menu > ul {
  margin: 7px 0;
}

.main-menu li {
  position: relative;
  display: block;
  width: 250px;
}

.main-menu li > a {
  position: relative;
  display: table;
  border-collapse: collapse;
  border-spacing: 0;
  color: #999;
  font-size: 14px;
  text-decoration: none;
  -webkit-transform: translateZ(0) scale(1, 1);
  -webkit-transition: all 0.1s linear;
  transition: all 0.1s linear;
}

.main-menu .nav-icon {
  position: relative;
  display: table-cell;
  width: 60px;
  height: 36px;
  text-align: center;
  vertical-align: middle;
  font-size: 18px;
}

.main-menu .nav-text {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  width: 190px;
  color: White;
  height: 54px;
}

.main-menu > ul.logout {
  position: absolute;
  left: 0;
  bottom: 0;
}

.no-touch .scrollable.hover {
  overflow-y: hidden;
}

.no-touch .scrollable.hover:hover {
  overflow-y: auto;
  overflow: visible;
}

a:hover,
a:focus {
  text-decoration: none;
}

nav {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

nav ul,
nav li {
  outline: 0;
  margin: 0;
  padding: 0;
}
.main-menu li:hover > a,
nav.main-menu li.active > a,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus,
.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,
.dashboard-page nav.dashboard-menu ul li.active a {
  color: #fff;
  background-color: #005051 !important;
  /*padding:  20px 12px 20px; */
}
.area {
  float: left;
  background: #e2e2e2;
  width: 100%;
  height: 100%;
}

/* sidebar css */
.header {
  position: fixed;
  top: 0;
  padding-left: 90px;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
  width: 100%;
  height: 83px;
  background: white;
  z-index: 999;

}
.mainLayout {
  padding-left: 90px;
  padding-top: 100px;
}

/* dashbord page */

.heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: white;
  border-radius: 8px;
}

.header h2 {
  font-size: 30px;
  font-weight: 700;
  width: 30%;
  color: #141921;
}

.search-box {
  padding: 8px 0px 8px 24px;
  border: 1px solid #ccc;
  border-radius: 19px;
  border: 1px solid #d5d5d5;
  box-shadow: 0px 2px 4px 0px #00000014;
}

.table-container {
  background: white;
  border-radius: 8px;
  width: 98%;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  border: 1px solid #ededed;
}

table thead {
  background: #e9ecef;
}

table th {
  padding: 12px 21px;
  text-align: left;
  border-bottom: 1px solid #dee2e6;
  color: #141921;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
table td {
  padding: 12px 21px;
  text-align: left;
  border-bottom: 1px solid #dee2e6;
  color: #141921e5;
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
}

.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  width: 98%;
}

li.page-item.active a {
  padding: 8px 12px;
  margin: 0 5px;
  border: none;
  background: #008080 !important;
  color: white !important;
  border-radius: 33px !important;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border: 1px solid #008080 !important;
  text-align: center;
}
.pagination li a {
  padding: 8px 12px;
  margin: 0 5px;
  border: none;
  background: white;
  color: #00000099;
  border-radius: 33px !important;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border: 1px solid #f1f1f1;
  text-align: center;
}

.pagination button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: auto;
}
h2.headingintro {
  font-size: 38px;
  font-weight: 900;
  color: #027273;
  margin: 0;
}
.username {
  font-size: 26px;
  font-weight: 700;
  color: #027273;
}
.search svg {
  position: relative;
  left: 8px;
  top: 29px;
}
.sort {
  display: flex;
}
.search {
  width: 0;
  margin-bottom: 12px;
}
.page-count {
  background: white;
  border: 1px solid #d5d5d5;
  border-radius: 8px;
  box-shadow: 0px 2px 4px 0px #00000014;
  padding: 0px 3px 1px 3px;
  margin: 0px 3px;
  height: 40px;
}
.add {
  width: 188px;
  border-radius: 8px;
  padding: 7px;
  background-color: #027273;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  height: 39px;
  align-items: center;
  border: 0;
  margin: 2px;
}
li.export {
  border-bottom: 1px solid #00000017;
  height: 49px;
  align-items: center;
  /* place-items: center; */
  display: flex;
}
li.export:hover {
  background-color: #027273 !important;
  color: #ffffff !important;
}
li.export a span:hover {
  background-color: #027273 !important;
  color: #ffffff !important;
}
li.export button span:hover {
    background-color: #027273 !important;
    color: #ffffff !important;
  }
  li.export:hover .view {
    color: #ffffff !important;
}
span.view {
  font-size: 14px;
  font-weight: 400;
  color: #141921;
  margin: 10px 6px;
}
span.view:hover {
  color: #ffffff !important;
}
.count a.dropdown-toggle::after {
  display: none !important;
}
p.member-title {
  color: #141921;
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 7px;
}
.household {
  background-color: #027273;
  color: white;
  border-radius: 6px;
  padding: 6px 9px 6px 9px;
  font-size: 12px;
  font-weight: 600;
  height: 25px;
  align-items: center;
}
p.member-info {
  font-size: 14px;
  font-weight: 500;
  color: #141921b2;
}
.member {
  margin: 19px 0px;
}
h5.modal-title {
  font-size: 22px;
  font-weight: 800;
  color: #027273;
}

/* dashbord page */
/* add-household */
.tabletag {
  background-color: white;
  border-radius: 16px;
  padding: 22px 24px 22px 24px;
  box-shadow: 0px 4px 18px 0px #00000014;
  width: 97.6% !important;
}

input.form-control {
  border: 1px solid #00000029 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #000 !important;
  padding: 8px 14px 8px 14px !important;
  height: 46px !important;
  box-shadow: 0px 1px 2px 0px #1a19190d !important;
}

select.form-select {
  border: 1px solid #00000029 !important;
  /* border: none!important; */
  /* padding: 8px 28px 8px 14px !important; */
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #000000 !important;
  padding: 8px 14px 8px 14px !important;
  height: 38px !important;
  box-shadow: 0px 1px 2px 0px #1a19190d !important;
}
label.form-label {
  color: #141921 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}
label.form-check-label {
  color: #000000 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

label.premises {
  color: #141921 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  margin-bottom: 0.5rem !important;
}
.form-check-input:checked {
  background-color: #027273;
  border-color: #027273;
}
.mainheading {
  color: #0e0e10;
  font-size: 18px;
  font-weight: 600;
  margin: 12px 5px;
}
.mainheading a {
  color: #0e0e10;
  font-size: 18px;
  font-weight: 600;
  margin: 12px 5px;
  text-decoration: none;
}
button.save {
  background: #027273;
  border: 0;
  color: white;
  width: 86px;
  border-radius: 6px;
  padding: 6px 16px 6px 16px;
  margin: 2px 12px;
}
.Addtag {
  display: flex;
  justify-content: space-between;
}
span.tag {
  color: #027273;
  font-size: 14px;
  font-weight: 700;
  margin: 0px 8px;
}
.modal-content {
  border-radius: 16px;
}

.form-view-detail {
  background: #0272730f;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
  padding: 20px;
}
.user-form-view-detail {
  background-color: white;
  padding: 20px;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}
p.status {
  color: #000000;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 0;
  padding: 1rem 0px;
  border-bottom: 1px solid transparent;
}
p.view-detail {
  color: #000000cc;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 0;
  padding: 1rem 0px;
}
p.view-detail span {
  background-color: #027273;
  border-radius: 4.62px;
  padding: 2.31px 6.15px 2.31px 6.15px;
  color: #ffffff;
  font-weight: 600;
  font-size: 12px;
  margin: 0px 5px 0px 0px;
  align-items: center;
}
span.holder {
  font-size: 14px;
  font-weight: 600;
  color: #43474d;
}

.change {
  color: #027273;
  font-size: 22px;
  font-weight: 800;
  padding: 20px 0px;
  border-bottom: 1px solid #00000029;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: #027273;
  border-color: transparent;
  border-bottom: 2px solid #027273;
}

.nav-tabs .nav-link {
  color: #0e0e10;
}
.Cancel {
  background-color: #fff;
  border: 1px solid #00000029;
  border-radius: 6px;
  width: auto;
  padding: 6px 16px 6px 16px;
}
.header-data {
  display: flex;
  justify-content: end;
  width: 87%;
  align-items: center;
  padding: 15px 36px;
}
.headerMain {
  display: flex;
  align-items: center;
}
.user-update {
  margin-bottom: 0px;
  font-size: 14px;
  color: #141921;
  font-weight: 700;
}

.user-Updates {
  margin-bottom: 0px;
  font-size: 12px;
  color: #141921b2;
  font-weight: 600;
}
li.upload {
  list-style: none;
}

.userprofile {
  margin: 0px 16px;
}

.upload-box {
  width: 100%;
  padding: 20px;
  border: 2px dashed #0084ff;
  text-align: center;
  border-radius: 10px;
  background-color: #f8fafa;
  margin: 20px auto;
  cursor: pointer;
}
.upload-box:hover {
  border-color: #0084ff;
}
span.browse-text {
  color: #0084ff;
  text-decoration: underline;
}
input.file-upload {
  opacity: 0;
  top: -21px;
  width: 84px;
  right: 4px;
}

.client-name {
  font-size: 20px;
  font-weight: 700;
  color: #141921;
  padding: 10px 0px;
}
.client-email {
  font-size: 18px;
  font-weight: 600;
  color: #141921;
  padding: 1px 0px;
}
.uploadupdate {
  width: 100px;
  margin: 10px;
}
.upload-text {
  font-size: 16px;
  color: #333;
}
.browse-link {
  color: #0084ff;
  cursor: pointer;
  text-decoration: none;
}

.avatar-wrapper {
  position: relative;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 1px 1px 15px -5px black;
  transition: all 0.3s ease;
}

.avatar-wrapper:hover .profile-pic {
  opacity: 0.5;
}
.avatar-wrapper .profile-pic {
  height: 100%;
  width: 100%;
  transition: all 0.3s ease;
}
.avatar-wrapper .profile-pic:after {
  font-family: FontAwesome;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  font-size: 80px;
  background: #ecf0f1;
  color: #34495e;
  text-align: center;
}
.avatar-wrapper .upload-button {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.avatar-wrapper .upload-button .fa-arrow-circle-up {
  position: absolute;
  font-size: 234px;
  top: -17px;
  left: 0;
  text-align: center;
  opacity: 0;
  transition: all 0.3s ease;
  color: #34495e;
}
/* .avatar-wrapper .upload-button:hover .fa-arrow-circle-up {
  opacity: 0.9;
} */
.avatar {
  display: flex;
}
.left-panel {
  font-size: 36px;
  font-weight: 800;
  width: 14px;
}
/* add-household */

img.profile_img {
  width: 40px;
  height: 40px !important;
  border-radius: 36px;
}

select.form-select:placeholder {
  color: #1419218c !important;
}
.form-check {
  margin-right: 23px;
}
.dropdown-item:focus,
.dropdown-item:hover {
  color: #1e2125;
  background-color: transparent !important;
}
img.profile_image {
  width: 70px;
  height: 70px;
  border-radius: 93px;
}

#sortSelect {
  border: none !important;
  padding: 8px 28px 8px 14px !important;
}

a.page-link {
  align-items: center;
  text-align: center;
  display: flex;
}

li.page-item.active a {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pagination li a {
  display: flex;
  justify-content: center;
}
span.excel {
  margin: 10px !important;
}





.login-page.alert.alert-success.alert-dismissible.fade.show  {
  position: absolute;
  top: 86px;
  z-index: 99999999;
  right: 38px;
  background-color: lightblue;
  width: 191px;
  height: 40px;
  text-align: center;
  padding-top: 8px;
}

.login-page.alert.alert-danger.alert-dismissible.fade.show  {
  position: absolute;
  top: 86px;
  z-index: 99999999;
  right: 38px;
  background-color: #f9b1b1;
  width: 260px;
  height: 53px;
  text-align: center;
  padding-top: 8px;
}

.main-menu li:hover > span,
nav.main-menu li.active > span,
.dropdown-menu > li > span:hover,
.dropdown-menu > li > span:focus,
.dropdown-menu > .active > span,
.dropdown-menu > .active > span:hover,
.dropdown-menu > .active > span:focus,
.no-touch .dashboard-page nav.dashboard-menu ul li:hover span,
.dashboard-page nav.dashboard-menu ul li.active span {
  color: #fff;
  background-color: #005051 !important;
  /*padding:  20px 12px 20px; */
}

ul.dropdown-menu.show {
  z-index: 0 !important;
}

.fill{
  box-shadow: 0px 0px 7px #ccc;
  border-radius: 8px;
  margin: 15px 0px 15px 0;
}