:root {
  background: #f5f6fa;
  color: #9c9c9c;
  font: 1rem "PT Sans", sans-serif;
}

html,
body {
  margin: 0;
  padding: 0;
}

.cnt-icon {
  position: relative;
}

.cnt-icon i {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  pointer-events: none;
}

.cnt-icon input {
  padding-right: 35px;
  /* space for icon */
}

.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 3;
  gap: 0;
  font-size: small;
  /* background: #fbfaee; */
  /* border: 1px solid #803535; */
}

.cell {
  /* border: 1px dashed #ececec; */
  text-align: center;
  /* align-content: flex-end; */
}

.cststlit {
  display: none;
  padding: 2px;
  margin: 0 auto;
  width: auto;
  /* size of active list box */
  /* border: 1px solid transparent;
  padding: auto;
  border-radius: 1px;
  box-shadow: #c4e0fb 2px 2px 11px; */
  /* display: block; */
}

.cststlit.show {
  display: block;
  /* or block */
}

.cnt-icon i {
  pointer-events: auto;
  /* allow click */
  cursor: pointer;
}


h1 {
  text-align: center;
  align-content: center;
  align-self: center;
  font-size: 1.4rem;
  background: linear-gradient(141.27deg,
      #62469b -4.24%,
      #25a264 -21.25%,
      #ec68f4 44.33%,
      #79e2ff 83.46%);
  background-size: 220%;
  width: 550px;
  /*height: 200px;*/
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-animation: gradient-data-v-66b40ddc 10s ease infinite;
  animation: gradient-data 10s ease infinite;
  -webkit-text-fill-color: transparent;
}

@-webkit-keyframes gradient-data {
  0% {
    background-position: 0 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  to {
    background-position: 0 50%;
  }
}

@keyframes gradient-data {
  0% {
    background-position: 0 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}

/* .cnt-icon i.clickable {
pointer-events: auto;
cursor: pointer;
} */
.txttitle {
  font-size: xx-small;
  font-weight: 500;
  padding: 5px;
  color: #757575;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-family: sans-serif;
}

.txth2 {
  font-size: xx-small;
  font-weight: 500;
  padding: 5px;
  color: #094b21;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  font-family: sans-serif;
}

.container {
  height: 95%;
}

a {
  color: inherit;
}

a:hover {
  color: #7f8ff4;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center;*/
}

.btn {
  display: inline-block;
  background: transparent;
  color: inherit;
  font: inherit;
  border: 0;
  outline: 0;
  padding: 0;
  transition: all 200ms ease-in;
  cursor: pointer;
  width: 99%;

}

.btn--danger {
  background: linear-gradient(0deg, rgb(147, 81, 14) 0%, rgb(200, 97, 1) 100%);
  color: #fff;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  padding: 10px 30px;
  gap: 2px;
  text-align: center;
  width: 60%;
}

.btn--danger:hover {
  transform: translateY(-3px);
  background: linear-gradient(to bottom, #b88f83 0, #834425 100%);
}

.btn--primary {
  background: linear-gradient(0deg, rgb(103, 138, 233) 0%, rgba(2, 126, 251, 1) 100%);
  color: #fff;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  padding: 10px 30px;
  gap: 2px;
  background: rgb(64, 191, 246);
    background: linear-gradient(90deg, rgba(64, 191, 246, 1) 0%, rgba(110, 102, 224, 1) 100%);
    border: none;
}

.ubtn--primary {
  background: #7fa4f4;
  color: #fff;
  box-shadow: 0 0 10px px rgba(0, 0, 0, 0.1);
  border-radius: 3px 3px 3px 3px;
  padding: 8px 36px;
}

.ubtn--primary:hover,
.btn--primary:hover {
  background: #364181;
  transform: translateY(-3px);
  background: linear-gradient(90deg, rgb(68, 61, 158) 0%, rgb(41, 149, 196) 100%);
}

.btn--primary:active {
  background: #365381;
  box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.2);
}

.btn--inside {
  margin-left: -96px;
}

.form__field {
  width: 360px;
  background: #fff;
  color: #a3a3a3;
  font: inherit;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1);
  border: 0;
  outline: 0;
  padding: 22px 18px;
}

.toast {
  width: 300px;
  outline: 0;
  background: #fff;
  color: #f5f5f5;
  padding: 1rem 2rem 1rem 3rem;
  text-align: center;
  border-radius: 1rem;
  position: relative;
  font-weight: 300;
  margin: 1rem 0;
  text-align: left;
  max-width: 16rem;
  opacity: 1;
  border: 0.15rem solid #fff2;
}

.toast:before {
  content: "";
  position: absolute;
  width: 44px;
  height: 44px;
  top: 20px;
  left: 20px;
  z-index: 0;
  border-radius: 50%;
  background: rgb(86, 174, 237);
}

.toast h3 {
  font-size: 1rem;
  margin: 10px;
  line-height: 1.35rem;
  font-weight: 600;
  position: relative;
  color: rgb(41, 113, 165);
}

/* === BASE HEADING === */
h1 {
  position: relative;
  padding: 0;
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}

.twelve h1 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  width: 160px;
  text-align: center;
  margin: auto;
  white-space: nowrap;
  padding-bottom: 13px;
}

.twelve h1:before {
  background-color: #c50000;
  content: "";
  display: block;
  height: 3px;
  width: 75px;
  margin-bottom: 5px;
  animation: linex 1s;
}

@keyframes linex {
  0% {
    width: 75px;
  }

  50% {
    width: 155px;
  }

  100% {
    width: 75px;
  }
}

.twelve h1:after {
  background-color: #c50000;
  content: "";
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  height: 3px;
  width: 75px;
  margin-bottom: 0.25em;
  animation: linex 1s;
}

.ReEdtxt {
  width: 360px;
  background: #fff;
  color: #a3a3a3;
  font: inherit;
  box-shadow: 0 1px 1px 0 rgba(80, 80, 80, 0.1);
  border: 0;
  outline: 0;
  padding: 15px 12px;
}

.bouncingball {
  background: #d6d6d6;
  color: rgb(255, 255, 255);
  padding: 12px;
  font-weight: bold;
  justify-items: center;
  border: 1px #d6d6d6 solid;
  justify-content: center;
  animation: bounce 5s;
  transform: translateY(0px);
  animation-iteration-count: infinite;
  position: absolute;
  margin: auto;
  width: auto;
  height: auto;
  border-radius: 100%;
  align-content: center;
  justify-content: center;
  box-shadow: #757575 3px 3px 5px;
}

@keyframes bounce {
  0% {
    top: 60px;
    -webkit-animation-timing-function: ease-in;
  }

  50% {
    top: 103px;
    height: auto;
    -webkit-animation-timing-function: ease-out;
    box-shadow: #ffffff 1px 1px 1px;
  }

  100% {
    top: 60px;
    -webkit-animation-timing-function: ease-in;
  }
}

.no-data {
  font-family: Helvetica;
  text-align: center;
  font-size: small;
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 15px;
  width: 280px;
  border-color: #ac5454 3px solid;
  border-left: #f18e6f 7px solid;
  color: #ffffff;
  text-shadow: 5px #080808;
  background: linear-gradient(to right, #5a5a5a 0%, #363636 100%);
  animation: bounce 2s;
  transform: translateY(0px);
  animation-iteration-count: infinite;
  position: absolute;
  margin: auto;
  width: auto;
  height: auto;
  align-content: center;
  justify-content: center;
  box-shadow: #757575 3px 9px 15px;
}

@keyframes bounce {
  0% {
    top: 60px;
    -webkit-animation-timing-function: ease-in;
  }

  50% {
    top: 65px;
    height: auto;
    -webkit-animation-timing-function: ease-out;
    box-shadow: #ffffff 1px 1px 1px;
    border-left: #ffffff 7px solid;
  }

  100% {
    top: 60px;
    -webkit-animation-timing-function: ease-in;
  }
}

h2 {
  color: #2559a1;
  text-align: center;
  margin-bottom: 25px;
}

.logbox {
  display: flex;
  justify-content: left;
  background: transparent;
  color: #fff;
  border-radius: 44px;
  /* box-shadow: 0 2px 2px rgba(82, 82, 82, 0.1); */
  padding: 10px;
  width: auto;
}

.logbox0 {
  font-family: Helvetica;
  font-size: 12px;
  font-weight: bold;
  padding: 5px;
  color: #979797;
  background: #e3e3e3;
  text-decoration: none;
  border: 0;
  width: 100px;
  justify-items: center;
  justify-content: center;
  margin-left: 1px;
  align-content: center;
  text-align: center;
  border-radius: 10px 0 0 10px;
  text-shadow: 1px 1px 5px #ffffff;
  gap: 10px;
}

.logboxR {
  border: 0;
  color: #8cb7e2;
  border-radius: 5%;
  font-weight: bold;
  font-size: xx-small;
  font-size: 10px;
  padding: 2px 9px 2px 9px;
  /* box-shadow: 0px 0px 9px   #96c0e8; */
  /* display: none; */
}

.logbox1 {
  font-family: Helvetica;
  font-size: 14px;
  font-weight: bold;
  padding: 7px;
  color: #979797;
  background: #e3e3e3;
  text-decoration: none;
  border: 0;
  width: 70px;
  justify-items: center;
  justify-content: center;
  margin-left: 1px;
  align-content: center;
  text-align: center;
}

.logbox1:hover {
  color: #ffffff;
  background: #88bafb;
}

.big-icon {
  font-size: 25px;
  /* or any size you want */
  font: weight 900px;
  color: #ffffff;
}

.big-icon2 {
  font-size: 25px;
  text-align: center;
  color: #759eec;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.card {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  width: 180px;
  text-align: left;
  transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
  transform: translateY(-3px);
  background: linear-gradient(to right, #dff2f9, #f4fafc 30%);
}

.card span {
  color: #2e61b4;
  font-weight: 500;
  font-size: 18px;
}

.CIstyle {
  display: inline-block;
  text-align: center;
  font-weight: bold;
  border-radius: 50%;
  background-color: #e7e6e6;
  color: #ffffff;
  height: 23px;
  width: 23px;
}

.btnBack:hover {
  background-color: #91b1d3;
}

/* === BASE HEADING === */
h1 {
  position: relative;
  padding: 0;
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}

h1 span {
  display: block;
  font-size: 0.5em;
  line-height: 1.3;
}

h1 em {
  font-style: normal;
  font-weight: 600;
}

/* === HEADING STYLE #1 === */
.one h1 {
  text-align: center;
  text-transform: uppercase;
  padding-bottom: 5px;
}

.one h1:before {
  width: 28px;
  height: 5px;
  display: block;
  content: "";
  position: absolute;
  bottom: 3px;
  left: 50%;
  margin-left: -14px;
  background-color: #b80000;
}

.one h1:after {
  width: 100px;
  height: 1px;
  display: block;
  content: "";
  position: relative;
  margin-top: 25px;
  left: 50%;
  margin-left: -50px;
  background-color: #b80000;
}

.hover-link {
  display: contents;
  /* VERY IMPORTANT */
}

/* Icon base style */
.icon {
  margin-bottom: -10px;
  font-size: 25px;
  color: transparent;
  float: right;
  transition: 0.3s ease;
  /* smooth hover */
  padding-left: 197px;
  margin-left: -193px;
  /* background: #365381; */
}

/* Hover effect */
.hover-link:hover .icon {
  color: #4f8ed1;
  /* change color */
  transform: scale(1.0);
  /* enlarge */
}

.Topid {
  padding: 10px;
  text-align: center;
  /* background: #baddf9; */
  font-weight: bold;
  text-decoration: none;
  color: #fff;
  margin: -20px;
  border-radius: 10px 0px 10px 0;
  display: flex;
  width: 32px;
}

.imgcc {
  height: 55px;
  width: 55px;
  margin: -40px;
  border-radius: 50%;
  margin-left: 120px;
  margin-top: -2px;
  /* box-shadow: 2px 3px 3px 1px rgba(181, 182, 183, 0.225); */
  border: 2px solid #d9d9d9;
}

.imgc2 {
  display: flex;
  height: 27px;
  width: 27px;
  border-radius: 50%;
  box-shadow: 2px 3px 3px 1px rgba(181, 182, 183, 0.225);
  border: 2px solid #02fc24;
}

.btnBack {
  color: #ffffff;
  padding: 10px 18px;
  border-radius: 4px;
  text-decoration: none;
  text-align: center;
  justify-content: center;
  align-items: center;
  margin: 25px auto;
  display: block;
  width: fit-content;
  font-weight: bolder;
  border: #9d9b9b 0.41px solid;
  background: linear-gradient(to right, #6b99e8 10%, #2d60ba 90%);
  text-shadow: 12px 12xp 20xp #010101;
}

.btnBack:hover {
  border: #ffffff 0.41px solid;
  box-shadow: #8f8f8f 3px 3px 13px;
  background: linear-gradient(to right, #595d75 10%, #bcbec4 70%);
}

.no-data {
  font-family: Helvetica;
  text-align: center;
  font-size: small;
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 15px;
  width: 280px;
  border-color: #ac5454 3px solid;
  border-left: #f18e6f 7px solid;
  color: #ffffff;
  text-shadow: 5px #080808;
  background: linear-gradient(to right, #5a5a5a 0%, #363636 100%);
  animation: bounce 2s;
  transform: translateY(0px);
  animation-iteration-count: infinite;
  position: absolute;
  margin: auto;
  width: auto;
  height: auto;
  align-content: center;
  justify-content: center;
  box-shadow: #757575 3px 9px 15px;
}

@keyframes bounce {
  0% {
    top: 60px;
    -webkit-animation-timing-function: ease-in;
  }

  50% {
    top: 65px;
    height: auto;
    -webkit-animation-timing-function: ease-out;
    box-shadow: #ffffff 1px 1px 1px;
    border-left: #ffffff 7px solid;
  }

  100% {
    top: 60px;
    -webkit-animation-timing-function: ease-in;
  }
}

.loginstat {
  display: flex;
  font-family: Helvetica;
  font-size: 14px;
  font-weight: bold;
  padding: 12px;
  color: #5d5d5d;
  background: #e3e3e3;
  border-radius: 5px;
  animation: rbounce 2s;
  animation-iteration-count: 2;
  margin: -10px;
  position: absolute;
  border: 1px #fff;
}

@keyframes rbounce {
  0% {
    font-size: 14px;
  }

  50% {
    font-size: 15px;
  }

  100% {
    font-size: 14px;
  }
}

.blink-red-border {
  padding: 5px;
  animation: blinkBorder 2s;
  animation-iteration-count: 5;
  border-radius: 6px;
}

@keyframes blinkBorder {
  0% {
    font-size: x-small;
  }

  50% {
    font-size: xx-small;
    color: #ff0000;
  }

  100% {
    font-size: x-small;
  }
}

.notauthorized {
  font-size: x-small;
  text-transform: uppercase;
  color: rgb(255, 130, 130);
  text-align: center;
  background-color: #fff;
  padding: 20px;
  box-shadow: 0px 2px 1px #b0b0b0;
}

.gridview-style {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  text-align: left;
  font-size: x-small;
  margin-left: -0px;
  margin-right: 330px;
  text-indent: 5%;
  text-transform: uppercase;
  color: rgb(66, 66, 66);
}

.gridview-style th {
  /* Table Title */
  display: none;
  background-color: #e0e0e0;
  padding: 8px;
  font-size: xx-small;
  text-align: center;
  text-transform: capitalize;
  border: 1px solid #ffffff;
  text-shadow: 1px 0px 1px #ffffff;
  letter-spacing: 1px;
}

.gridview-style td {
  padding: 9px;
  background-color: transparent;
  border-bottom: 1px solid #d8d8d8;
}

.gridview-style tr:nth-child(even) {
  /* background-color: #fafafa; */
  color: #6b6b6b;
}

/* Disable hover on the first column */
.gridview-style td:nth-child(1):hover,
.gridview-style th:nth-child(1):hover {
  background-color: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  cursor: default !important;
}

.gvCellTitle {
  font-family: Helvetica;
  color: #8c8c8c;
  font-size: 11px;
  margin-top: 7px;
  padding: 0;
  text-align: left;
  font-weight: 500;
}

.gridview-style td:hover .gvemail,
.gridview-style td:hover,
.gridview-style td:hover .gvCellTitle,
.gridview-style th:hover {
  background-color: #8cc0fa !important;
  color: #ffffff !important;
  transition: all 0.1s ease;
  /* box-shadow: 5px 5px 14px #828282; */
}

.gridview-style td:hover .gvuid {
  background-color: #ffffff !important;
  color: #737373 !important;
  font-weight: bold;
}

.gridview-style td:hover .tag4,
.gridview-style td:hover .tag2,
.gridview-style td:hover .tag {
  background-color: #abd3fb !important;
  /* background: linear-gradient(to right, #cfe2f7 40%, #abd3fb 60%); */
  border: 0;
  color: #ffffff;
}

/* .gridview-style td:hover .gvemail { */
/* background-color: #71a3dd !important; */
/* color: #0088ff; */
/* } */
.gvimage {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  box-shadow: 1px 1px 3px rgb(68, 68, 68);
  border: 1px solid rgb(203, 203, 203);
}

.tag {
  font-size: 12px;
  padding: 5px 10px;
  background-color: #028600;
  border-radius: 5px;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0px 2px 5px -2px rgba(0, 0, 0, 0.1);
}

.tag2 {
  font-size: 12px;
  padding: 5px 10px;
  background-color: #b92929;
  border-radius: 5px;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0px 2px 5px -2px rgba(0, 0, 0, 0.1);
}

.tag3 {
  font-size: 12px;
  padding: 10px;
  background-color: #86afe9;
  border-radius: 4px;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0px 2px 5px -2px rgba(0, 0, 0, 0.1);
}

.tag4 {
  font-size: 12px;
  padding: 5px 10px;
  border: 1px solid #c7c7c7;
  background-color: transparent;
  border-radius: 5px;
  color: #909090;
  cursor: pointer;
  box-shadow: 0px 2px 5px -2px rgba(0, 0, 0, 0.1);
}

.gvuid {
  background-color: #898989;
  border-radius: 4px;
  color: #ffffff;
  padding: 5px;
  text-align: center;
  font-weight: bold;
  align-content: center;
  align-items: center;
  vertical-align: middle;
  alignment-baseline: middle;
}

.gvemail {
  font-size: 8px;
  color: #717171;
  letter-spacing: 1px;
  margin-left: 25px;
}

.gvuname {
  margin-left: 10px;
  cursor: pointer;
}

.Utxttitle {
  display: inline-block;
  width: 140px;
  font-size: xx-small;
  font-weight: 500;
  padding: 0px 12px;
  color: #454545;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: sans-serif;
  height: 23px;
}

.uReEdtxt,
.uReEdtxtid {
  display: inline-flexbox;
  /* margin-top: -50px; */
  width: 120px;
  height: 13px;
  background: #e1e1e1;
  color: #363636;
  font-weight: bold;
  font: inherit;
  box-shadow: 0 1px 1px 0 rgba(80, 80, 80, 0.1);
  border: 0;
  outline: 0;
  padding: 15px 9px;
}

.uReEdtxt2 {
  font-family: Roboto, 'Helvetica Neue', sans-serif;
  width: 120px;
  height: 11px;
  background: #ebebeb;
  color: #ffffff;
  font-weight: bold;
  font: inherit;
  padding: 15px 0px;
  border: 1px dashed #fff;
  text-align: center;
  cursor: pointer;
  display: block;
  margin: 0 auto;
}

.uReEdtxt2:hover {
  background: #cfe5fb;
  background: linear-gradient(to right, #dde9f6 40%, #c5dff9 10%);
  background-image: linear-gradient(to right, #294a7e 11%, #0f2e56 31%, #a1c4fd 100%);
  border: 1px solid #c5dff9;
  font-size: smaller;
}

.uReEdtxt2::backdrop {
  background: #c0e0ff;
  border: 1px solid #ffffff;
  color: #691d6c;
}

.uReEdtxtid {
  width: 40px;
  display: none;
}

.uline {
  width: 100%;
  border-collapse: collapse;
  margin-left: -10px;
  margin-right: 330px;
  margin-top: 13px;
  border: .1px solid #dbdbdb;
  background: #fdfff3;
  box-shadow: 1px #010101;
}

.GVClient {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* padding: 1px; */
  width: 90%;
  justify-self: center;
  --border-width: 0px;
  --border-style: solid;
  --border-color: #c02e2e;
  background: transparent;
}

.gv {
  border: var(--border-width) var(--border-style) #d8c9f8;
  //  text-align: center;
  width: auto;
}

.gv2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: var(--border-width) solid #baf203ff;
  width: 10%;
  height: 33px;
}

.GVClient5 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  display: none;
  border: var(--border-width) solid #59a881;
}

.GVClient2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 1px;
  width: auto;
  justify-self: center;
  color: transparent;
  border: var(--border-width) solid #a8a359;
  outline: 0;
}

.gv2 {
  position: relative;
  border: var(--border-width) var(--border-style) #f9caca;
  width: auto;
  text-align: left;
  padding: 2px;
}

.gv2a {
  grid-column: 1/3;
}

.GVClient3 {
  display: grid;
  grid-template-columns: 1fr;
  width: auto;
  justify-self: center;
  color: #ecf4ff;
  grid-column: 1 / -1;
  /* 👈 span entire parent grid */
  width: 100%;
  border: var(--border-width) solid #a87d59;
}

.CliEdtxt {
  font-family: Tahoma, sans-serif;
  width: auto;
  background: #fff;
  color: #a3a3a3;
  font: 14px;
  box-shadow: 0 2px 1px 0 rgba(167, 167, 167, 0.2);
  border: 0;
  outline: 0;
  padding: 8px;
  border-radius: 2%;
  text-indent: 1%;
}

.CliEdtxt3 {
  font-family: Tahoma, sans-serif;
  width: 100%;
  background: #fff;
  color: #a3a3a3;
  font: 14px;
  box-shadow: 0 2px 1px 0 rgba(167, 167, 167, 0.2);
  border: 0;
  outline: 0;
  padding: 8px 0;
  border-radius: 2%;
  text-indent: 2%;
}

.CliEdLb {
  font-size: 12px;
  font-weight: 500;
  font-family: Tahoma, sans-serif;
  color: rgb(132, 132, 132);
  padding: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.P2color {
  // background: linear-gradient(180deg, rgba(242, 249, 255, 1),transparent);
  //   border: 1px solid   rgba(221, 240, 255, 1) ;
  //   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  // border-radius: 2%;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 20px;
}

.iconin {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #6c757d;
  cursor: pointer;
}

.GVcliN {
  padding: 7px 0 7px 0;
}

.GVcliN1 {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
  font-weight: 400;
  padding: 1px;
  color: #3a3b3b;
  text-align: start;
  text-indent: 7px;
  margin-right: 15px;
  width: max-content;
}

.GVcliN2 {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 11px;
  color: #3571ad;
  text-align: start;
  padding: 1px;
  text-indent: 7px;
  margin-right: 15px;
  margin-bottom: 4px;
  width: max-content;
  /* border-bottom: .1px solid #bcbcbc; */
}

td:hover {
  background: #e0effd;
  background: rgba(231, 245, 255, 1.9);
  color: #ffffff;
  /* padding: 5px 0 5px 0; */
  border-radius: 7%;
  border: #d1e6f9 2px solid;
  cursor: pointer;
  transform: scale(1.01);
  transition: background-color 0.2s ease-in-out;
}

tr:hover td * {
  color: #686868;
  border-bottom: 0px solid #bcbcbc;
}

td:hover .GVClient5 {
  display: grid;
  border: var(--border-width) solid #a87d59;
  text-align: center;
}

.iconGVC {
  color: #74a2f8;
  font-size: 15px;
}

.GVCLIline {
  width: auto;
  margin-top: 13px;
  border-bottom: 1.1px solid #c0c0c0;
  /* box-shadow: 1px 1px 9px #78b5db; */
}

.GVCell {
  display: flex;
  align-items: center;
  gap: 1px;
  padding-left: 7px;
  padding-right: 3px;
  padding-top: 7px;
  border: var(--border-width) solid #c1c9d1;
  text-align: center;
}

.GVText {
  display: flex;
  flex-direction: column;
  border: var(--border-width) solid #c1c9d1;
}

/* Image */
.GVClinIMG {
  border-radius: 50%;
  width: 30px;
  height: 30px;
  object-fit: cover;
  border: 1px solid #fff;
  box-shadow: 0px 0px 3px #a8a8a8;
  transition: all 0.2s ease-in-out;
}

/* Hover both cell + image */
tr:hover .GVClinIMG {
  transform: scale(1.1);
  box-shadow: 0 0 1px #ffffff;
  /* padding-left: 5px; */
}

.lblinf,
.lblinf2 {
  font-size: 9px;
  font-weight: bold;
  background: transparent;
  color: #808080ff;
  text-transform: capitalize;
  padding-left: 66px;
  outline: 0;
  border: 0;
}

.lblinf2 {
  display: none;
  color: red;
}

.CliFndtxt {
  display: relative;
  border-radius: 3px;
  border: 1px solid #d4d4d4ff;
  padding: 11px;
  color: #848484ff;
  background: transparent;
  width: auto;
  font-size: 13px;
  box-shadow: 0 2px 1px 0 rgba(167, 167, 167, 0.2);
  outline: 0;
  margin-left: 50px;
  padding-left: 15px;
  border-radius: 0 12px 12px 0;
  border-radius: 22px;
}

.bi-search {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: -37px;
  margin-top: 2px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #b7b7b7;
  color: #fff;
  text-decoration: none;
}

.bi-search:hover {
  color: #fff;
  background: #88bafb;
}

.panel {
  max-width: 300px;
  margin: 20px auto;
  /* Center the panel on the page */
  max-height: 630px;
  overflow-y: auto;
  /* Adds a vertical scrollbar if content exceeds max-height */
}

/* ======================================= */
/*            MOBILE RESPONSIVE            */
/* ======================================= */
@media (max-width: 600px) {}