@layer utilities {
  .scrollbar-hidden {
    -ms-overflow-style: none; /* IE aur Edge ke liye */
    scrollbar-width: none; /* Firefox ke liye */
  }

  .scrollbar-hidden::-webkit-scrollbar {
    display: none; /* Chrome, Safari aur Opera ke liye */
  }
}

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

/* Modal body */
.modal-main-notification {
  max-height: 420px;
}
.modal-dialog-notify {
  width: 375px;
  top: 62px;
  right: 156px;
}
.modal-header-notify {
  padding: 11px !important;
  line-height: 1px;
  height: 40px;
}
.modal-header-notify .modal-title span {
  color: rgba(87, 91, 108, 1);
  font-size: 15px;
  font-weight: 700;
}
.modal-body-notification {
  margin: 0;
  max-height: 380px;
  padding: 108px 29px;
}
.modal-body-notification .notify-values {
  flex-direction: column;
  gap: 12px;
}
.modal-body-notification .notify-bell-bgCircle {
  width: 55px;
  height: 55px;
  background: hsla(221, 67%, 54%, 0.1);
  border-radius: 50%;
}
.modal-body-notification .notify-values .notify-wel {
  flex-direction: column;
  text-align: center;
  gap: 6px;
}
.modal-body-notification .notify-values .notify-wel h4 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  color: rgba(0, 0, 0, 1);
  line-height: 100%;
}
.modal-body-notification .notify-values .notify-wel p {
  font-size: 13px;
  font-weight: 400;
  margin: 0;
  line-height: 1.2;
  color: rgba(0, 0, 0, 1);
}

/* Modal body-two*/

.modal-body-notifyParent {
  margin: 0;
  padding: 12px 11px;
  min-height: 380px;
}
.modal-body-notifyParent .notify-secondParent .notify-container {
  width: 351px;
  border: 1px solid rgba(125, 129, 144, 0.25);
  padding: 9px;
  gap: 3px;
  flex-direction: column;
  border-radius: 12px;
}

.modal-body-notifyParent .notify-secondParent .notify-container.inAct {
  background: linear-gradient(
      0deg,
      rgba(125, 129, 144, 0.05) 0%,
      rgba(125, 129, 144, 0.05) 100%
    ),
    #fff;
}

.modal-body-notifyParent .notify-secondParent .notify-container.act {
  background: linear-gradient(
      0deg,
      rgba(59, 108, 216, 0.05) 0%,
      rgba(59, 108, 216, 0.05) 100%
    ),
    #fff;
}

.notify-secondParent .notify-container .notify-content {
  justify-content: space-between;
}

.notify-secondParent .notify-container .notify-content h5 {
  font-size: 12px;
  font-weight: 600;
  line-height: 100%;
  margin: 0;
  color: rgba(0, 0, 0, 0.85);
}
.notify-content .head {
  gap: 6px;
}
.notify-content .head .blue-dot {
  width: 7px;
  height: 7px;
  background-color: rgba(59, 108, 216, 1);
  border-radius: 50%;
}
.notify-content p {
  margin: 0;
  color: rgba(87, 91, 108, 1);
  font-size: 8px;
  font-weight: 600;
  line-height: 100%;
}
.notify-secondParent .notify-container .notify-twoContent {
  gap: 7px;
}
.notify-twoContent p {
  font-size: 11px;
  font-weight: 400;
  margin: 0;
  width: 243px;
  line-height: 150%;
  color: rgba(0, 0, 0, 1);
}
.notify-twoContent .notifyImg {
  width: 80px;
  height: 51px;
  overflow: hidden;
  background: #d9d9d980;
  border-radius: 8px;
}
.notify-twoContent .notifyImg .pdf,
.notify-twoContent .notifyImg .file,
.notify-twoContent .notifyImg .word,
.notify-twoContent .notifyImg .excel {
  font-size: 8px;
  font-weight: 700;
  line-height: 100%;
  color: #575b6c;
}
.notify-twoContent .notifyImg img {
  width: 100%;
  object-fit: cover;
  object-position: center;
  height: 100%;
}
a.notify-btn {
  width: 76px;
  height: 20px;
  margin-top: 3px;
  font-weight: 500;
  border: 1px solid #7d819040;
  border-radius: 6px;
  background-color: rgba(59, 108, 216, 1);
  font-size: 11.5px;
  color: rgba(255, 255, 255, 1);
  line-height: 100%;
  padding: 3px 6px;
}
a.notify-btn :hover {
  color: hsla(0, 0%, 100%, 1);
}
/*----------- SearchBar Popup ---------------*/

.modal-dialog-search {
  height: 450px;
  border-radius: 12px;
  border: 1px solid rgba(125, 129, 144, 0.5);
  top: 48px;
  left: 0px;
  border-radius: 12px;
  background: #fff;
  filter: drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.05));
}
.modal-body-search {
  padding: 0;
}
.modal-body-search .search-Container,
.search-main-contact {
  padding: 7px;
}
.modal-header-search {
  height: 33px;
  border-bottom: 1px solid rgba(125, 129, 144, 0.2);
}

.modal-header-search.top {
  border-top: 1px solid rgba(125, 129, 144, 0.2);
}
.modal-title-search {
  gap: 6px;
}
.modal-title-search .apps {
  color: #575b6c;
  font-size: 12px;
  line-height: 100%;
  font-weight: 700;
}
.viewCsrBtns .search-para {
  color: #575b6c;
  font-size: 12px;
  font-weight: 500;
  line-height: 100%;
}
.search-main .search-content {
  height: 48px;
  padding: 5px;
  border-radius: 10px;
  gap: 10px;
}

.search-main .search-content.inActive {
  pointer-events: none;
  opacity: 0.75;
}
.search-main .search-content.active:hover {
  background-color: #3b6cd80d;
}

.search-main .search-content .search-left {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(125, 129, 144, 0.1);
}

.search-main .search-content .search-left img {
  width: 24px;
  height: 24px;
}
.search-main .search-content .search-right h5 {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: #000000;
  margin: 0;
}
.search-main .search-content .search-right p {
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
  color: #575b6c;
  margin: 0;
}
.bg-clac {
  background: linear-gradient(#ffffff, #e01d5a0d);
}
.bg-log {
  background: linear-gradient(#ffffff, #704b370d);
}
.bg-conSix {
  background: linear-gradient(#ffffff, #098bf50d);
}
.bg-gift {
  background: linear-gradient(#ffffff, #9162f90d);
}
.bg-user {
  background: linear-gradient(#ffffff, #7d81900d);
}
.bg-cashbook {
  background: linear-gradient(#ffffff, #10c27b0d);
}
.bg-cctv {
  background: linear-gradient(#ffffff, #06908f0d);
}
.bg-compliance {
  background: linear-gradient(#ffffff, #10c27b0d);
}
.bg-custom {
  background: linear-gradient(#ffffff, #4b144b0d);
}
.bg-fields {
  background: linear-gradient(#ffffff, #704b370d);
}
.bg-calendar {
  background: linear-gradient(#ffffff, #e01d5a0d);
}
.bg-chat {
  background: linear-gradient(#ffffff, #2726350d);
}
.bg-contact {
  background: linear-gradient(#ffffff, #098bf50d);
}
.bg-domain {
  background: linear-gradient(#ffffff, #704b370d);
}

/*----------*/

.search-banner {
  width: 100%;
  height: 33px;
  border-bottom: 1px solid rgba(125, 129, 144, 0.2);
  background-color: rgba(87, 91, 108, 0.05);
  pointer-events: auto;
}
.search-banner .banner-item {
  gap: 6px;
}
.search-banner .banner-item h5 {
  font-size: 12px;
  font-weight: 700;
  line-height: 100%;
  margin: 0;
  color: #575b6c;
}
.search-banner p {
  font-size: 12px;
  font-weight: 500;
  line-height: 100%;
  margin: 0;
  color: #575b6c;
}

.search-contacts .search-contact-list {
  height: 44px;
  padding: 6px 5px;
  border-radius: 10px;
}
.search-contacts .search-contact-list:hover {
  background-color: #3b6cd80d;
}
.search-contacts .search-contact-list .search-img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #7d81901a;
}

.search-contacts .search-contact-list .search-name {
  width: calc(100% - 44px);
}
.search-contacts .search-contact-list .search-name h5 {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: #000000;
}
.search-contacts .search-contact-list .search-name p {
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.2;
  color: #575b6c;
}
.search-result .search-view {
  border-radius: 6px;
  height: 33px;
  border: 1px solid rgba(59, 108, 216, 0.25);
  background: rgba(59, 108, 216, 0.05);
  padding: 8px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(59, 108, 216, 0.85);
}

/*-------------*/
/* .model-search {
  max-height: calc(100% - 33px);
} */

.user-result .user-content {
  padding: 6px 5px;
  border-radius: 10px;
}

.user-result .user-content:hover {
  background: rgba(59, 108, 216, 0.05);
}
.user-result .user-content .user-img {
  width: 34px;
  height: 34px;
  border: 1px solid #7d81901a;
  border-radius: 25px;
}
/* .user-result .user-content .user-name {
  gap: 2px;
} */
.user-result .user-content .user-name h5 {
  font-size: 13px;
  font-weight: 600;
  color: #000000;
}
.user-result .user-content .user-name h5 span {
  font-size: 11.5px;
  font-weight: 500;
  color: #575b6c;
}
.user-result .user-content .user-name p {
  font-size: 11.5px;
  font-weight: 500;
  color: #575b6c;
}

.user-result .user-content .user-name p span {
  color: #000000;
}
/*-----------------*/
.clear-all {
  font-size: 12px;
  font-weight: 500;
  color: #ec0000;
  background: linear-gradient(
      0deg,
      rgba(236, 0, 0, 0.05) 0%,
      rgba(236, 0, 0, 0.05) 100%
    ),
    #fff;
  width: 63px;
  height: 21px;
  border-radius: 10px;
  border: 1px solid rgba(236, 0, 0, 0.1);
}
.search-history {
  height: calc(100% - 33px);
  max-height: calc(100% - 33px);
  pointer-events: auto;
  padding: 7px;
}
.search-history .history-inner {
  width: 486px;
  height: 36px;
  border-radius: 10px;
  display: flex;

  align-items: center;
  justify-content: space-between;
  padding: 5px;
}
.search-history .history-inner:hover {
  background-color: rgba(59, 108, 216, 0.05);
}
.search-history .history-inner .history-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.search-history .history-inner .history-left h5 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  gap: 5px;
  line-height: 100%;
  color: rgba(0, 0, 0, 1);
}
.search-history .history-inner .history-left h5 span {
  font-size: 12px;
  font-weight: 500;
  line-height: 100%;
  color: rgba(87, 91, 108, 1);
}
.search-history .history-img {
  width: 26px;
  border: 1px solid rgba(125, 129, 144, 0.1);
  height: 26px;
  border-radius: 8px;
}

.search-history .history-img img {
  width: 16px;
  height: 16px;
}
/* ------ Help Page --------*/

.modal-content-help {
  height: 680px;
}
.modal-dialog-help {
  max-width: 700px !important;
  width: 700px;
  height: 680px;
}
.modal-header-help {
  width: 698px;
  height: 50px;
  padding: 14px;
}
.modal-header-help .modal-title-help {
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  line-height: 100%;
  color: #575b6c;
}
.help-parent {
  margin: 0;
}
.help-content {
  border: 1px solid;
  height: 43px;
  padding: 8px 8px;
  gap: 9px;
  background-color: #f7f7f9;
  border-radius: 12px;
  border-color: #7d819026;
  justify-content: stretch;
}

.help-content.wid100 {
  width: 100%;
}

.help-content.widCust {
  width: calc(100% - 53px);
}
.help-content input {
  width: 595px;
  border: none;
  font-size: 14px;
  outline: none;
  font-weight: 500;
  line-height: 100%;
  background-color: transparent;
}
.help-content input::placeholder {
  font-size: 14px;
  font-weight: 500;
  color: #00000080;
  line-height: 100%;
}
.slash-parent button {
  width: 25px;
  height: 25px;
  border-radius: 9px;
  background-color: #ffffff80;
  border: 1px solid #7d819040;
}
/* ---------------------- */
/* .modal-searched {
  height: calc(100% - 50px);
} */

.modal-searched .mainBody {
  height: 500px;
}
.binary p {
  font-size: 14px;
  font-weight: 500;
  line-height: 100%;
  color: rgba(125, 129, 144, 1);
}
/*----------------------*/
.article-content {
  height: 248px;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}

.article-content .article-box {
  padding: 10px;
  height: 76px;
  width: calc(50% - 5px);
  border-radius: 20px;
  background: linear-gradient(
      0deg,
      rgba(145, 98, 249, 0.02) 0%,
      rgba(145, 98, 249, 0.02) 100%
    ),
    #fff;
  border: 1px solid rgba(125, 129, 144, 0.25);
}
.article-content .article-box.pur:hover {
  background: linear-gradient(
      0deg,
      rgba(145, 98, 249, 0.1) 0%,
      rgba(145, 98, 249, 0.1) 100%
    ),
    #fff;
}

.article-content .article-box.yel:hover {
  background: linear-gradient(
      0deg,
      rgba(249, 154, 11, 0.1) 0%,
      rgba(249, 154, 11, 0.1) 100%
    ),
    #fff;
}
.article-content .article-box .article-left {
  width: 56px;
  min-width: 56px;
  border-radius: 12px;
  height: 56px;
  padding: 15px;
  border: 1px solid #7d819040;
}

.article-content .article-box.pur .article-left {
  background: rgb(145, 98, 249, 0.05);
}

.article-content .article-box.yel .article-left {
  background: rgb(249, 154, 11, 0.05);
}
.article-content .article-box .article-right {
  gap: 3px;
}
.article-content .article-box .article-right h5 {
  line-height: 1;
}
.article-content .article-box .article-right p {
  line-height: 140%;
}

/*----------------help footer-----------------------*/

.help-foot {
  width: 100%;
  height: 54px;
  padding: 0px 20px;
  border-top: 1px solid #7d819026;
}
.help-foot .btnCust {
  height: 34px;
  padding: 0px 12px;
  gap: 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 13px;
  color: #575b6c;
  font-weight: 500;
}

.help-foot .btnCust .imgAct,
.help-foot .btnCust:hover .imgInAct {
  display: block;
}

.help-foot .btnCust .imgInAct,
.help-foot .btnCust:hover .imgAct {
  display: none;
}

.help-foot .btnCust:hover {
  border: 1px solid rgba(125, 129, 144, 0.15);
  color: #3b6cd8;
  background: rgba(59, 108, 216, 0.1);
}

/*---------------help page two--------------------*/

.help-main-container .search-btn {
  width: 43px;
  height: 43px;
  border-radius: 12px;
  border: 1px solid #7d819026;
  background-color: #ec00000d;
}
.help-content-search {
  width: 617px;
}
.help-center-main .exit-btn {
  width: 68px;
  height: 28px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(236, 0, 0, 1);
  border-radius: 8px;
  background: rgba(236, 0, 0, 0.1);
  border: 1px solid rgba(125, 129, 144, 0.15);
}
.help-center-main .share-btn {
  width: 85px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(125, 129, 144, 0.15);
  background-color: rgba(125, 129, 144, 0.1);
  font-size: 13px;
  gap: 4px;
  line-height: 100%;
  margin: 0;
  color: rgba(125, 129, 144, 1);
  font-weight: 600;
}
.help-center-main .center-image {
  width: 56px;
  border-radius: 12px;
  border: 1px solid rgba(125, 129, 144, 0.25);
  height: 56px;
  background: linear-gradient(rgba(249, 154, 11, 0.05), rgba(255, 255, 255, 1));
}
.help-center {
  gap: 12px;
  padding: 15px;
  border-bottom: 1px solid rgba(125, 129, 144, 0.25);
}
.help-center-adding h4 {
  font-size: 16px;
  font-weight: 600;
  line-height: 100%;
  margin: 0;
  color: rgba(0, 0, 0, 1);
}
.help-center-adding p {
  font-size: 13px;
  font-weight: 400;
  margin: 0;
  line-height: 100%;
  color: rgba(0, 0, 0, 1);
}
.help-center-adding {
  gap: 5px;
}
/* --------------------------------------------------------- */
.help-center-content {
  padding: 25px 25px 161px 25px;
  gap: 15px;
}

.help-center-content .help-span {
  font-size: 12px;
  font-weight: 700;
  color: rgba(59, 108, 216, 1);
  line-height: 100%;
}
.help-center-content p span {
  color: rgba(0, 0, 0, 0.5);
  font-size: 12px;
  font-weight: 700;
  line-height: 100%;
}
.help-center-content .help-center-image {
  height: 100px;
  border-radius: 12px;
  border: 1px solid rgba(125, 129, 144, 0.15);
  background: rgba(247, 247, 249, 1);
}
.help-center-content .help-center-image img {
  width: 230px;
}
.help-center-content .help-center-locate {
  gap: 8px;
}
.help-center-content .help-center-locate h5 {
  font-size: 14px;
  font-weight: 600;
  line-height: 100%;
  color: rgba(0, 0, 0, 1);
}
.help-center-content .help-center-locate p {
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
}
.help-footer {
  height: 70px;
  padding: 15px;
  border-top: 1px solid rgba(125, 129, 144, 0.15);
}
.help-footer button {
  width: 86px;
  height: 40px;
  border-radius: 12px;
  font-size: 15px;
  color: rgba(59, 108, 216, 1);
  font-weight: 600;
  line-height: 100%;
  float: right;
  border: 1px solid rgba(59, 108, 216, 0.25);
  background-color: rgba(59, 108, 216, 0.1);
}
/* ----------------------------------------------------------- */
.help-center-bussiness {
  width: 100%;

  border-radius: 12px;
  border: 1px solid rgba(125, 129, 144, 0.15);
  background: rgba(247, 247, 249, 1);
  height: 220px;
}
.help-center-bussiness img {
  width: 267px;
}
.help-center-cont {
  padding: 25px 25px 41px 25px;
  gap: 15px;
}
.help-center-cont .help-span {
  font-size: 12px;
  font-weight: 700;
  color: rgba(59, 108, 216, 1);
  line-height: 100%;
}
.help-center-cont p span {
  color: rgba(0, 0, 0, 0.5);
  font-size: 12px;
  font-weight: 700;
  line-height: 100%;
}
.help-center-cont .help-center-image {
  width: 100%;
  height: 100px;
  border-radius: 12px;
  border: 1px solid rgba(125, 129, 144, 0.15);
  background: rgba(247, 247, 249, 1);
}
.help-center-cont .help-center-image img {
  width: 230px;
}
.help-center-cont .help-center-locate {
  gap: 8px;
}
.help-center-cont .help-center-locate h5 {
  font-size: 14px;
  font-weight: 600;
  line-height: 100%;
  color: rgba(0, 0, 0, 1);
}
.help-center-cont .help-center-locate p {
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
}
.footer-help {
  height: 70px;
  padding: 15px;
  justify-content: space-between;
  border-top: 1px solid rgba(125, 129, 144, 0.15);
}
.footer-help button {
  width: 86px;
  height: 40px;
  border-radius: 12px;
  font-size: 15px;
  color: rgba(59, 108, 216, 1);
  font-weight: 600;
  line-height: 100%;
  border: 1px solid rgba(59, 108, 216, 0.25);
  background-color: rgba(59, 108, 216, 0.1);
}
/* ----------------------------------------------------------- */
.help-center-three {
  padding: 25px 25px 15px 25px;
  gap: 15px;
}

.help-center-three .help-span {
  font-size: 12px;
  font-weight: 700;
  color: rgba(59, 108, 216, 1);
  line-height: 100%;
}
.help-center-three p span {
  color: rgba(0, 0, 0, 0.5);
  font-size: 12px;
  font-weight: 700;
  line-height: 100%;
}
.help-center-three .help-center-image {
  width: 100%;
  height: 100px;
  border-radius: 12px;
  border: 1px solid rgba(125, 129, 144, 0.15);
  background: rgba(247, 247, 249, 1);
}
.help-center-three .help-center-image img {
  width: 230px;
}
.help-center-three .help-center-locate {
  gap: 8px;
  padding-bottom: 212px;
}
.help-center-three .help-center-locate h5 {
  font-size: 14px;
  font-weight: 600;
  line-height: 100%;
  color: rgba(0, 0, 0, 1);
}
.help-center-three .help-center-locate p {
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
}
.help-center-three .help-happy {
  gap: 15px;
}
.help-center-three .help-happy p {
  font-size: 13px;
  font-weight: 500;
  color: rgba(0, 0, 0, 1);
  line-height: 100%;
}
.help-center-three .help-happy button {
  width: 65px;
  height: 40px;
  background-color: rgba(5, 195, 104, 0.05);
  border: 1px solid rgba(5, 195, 104, 0.15);
  color: rgba(5, 195, 104, 1);
  font-size: 15px;
  font-weight: 600;
  line-height: 100%;
  gap: 4px;
  border-radius: 12px;
}
.help-center-three .help-happy .blank-help {
  width: 65px;
  height: 40px;
  border: none;
  font-size: 15px;
  color: rgba(87, 91, 108, 1);
  background-color: transparent;
  font-weight: 600;
  line-height: 100%;
}
.help-footer {
  height: 70px;
  padding: 15px;
  border-top: 1px solid rgba(125, 129, 144, 0.15);
}
.help-footer button {
  width: 86px;
  height: 40px;
  border-radius: 12px;
  font-size: 15px;
  color: rgba(59, 108, 216, 1);
  font-weight: 600;
  line-height: 100%;
  float: right;
  border: 1px solid rgba(59, 108, 216, 0.25);
  background-color: rgba(59, 108, 216, 0.1);
}
/* ----------------------------------------------------- */
.widget-container {
  height: 500px;
  max-height: 500px;
}
.widget-container .widget-main-container {
  gap: 25px;
  padding: 24px;
}
.widget-container .widget-content {
  gap: 10px;
}
.widget-container .widget-content .wid-image {
  width: 650px;
  height: 240px;
  border-radius: 12px;
  border: 1px solid rgba(125, 129, 144, 0.15);
  background-color: rgba(247, 247, 249, 1);
}
.widget-container .widget-content p {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: rgba(0, 0, 0, 1);
}
.widget-container .widget-content p span {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0px;
  line-height: 150%;
  color: rgba(0, 0, 0, 1);
}
.widget-container .widget-content .wid-image .help-view {
  width: 390px;
}
.widget-container .wid-hero {
  width: 650px;
  height: 320px;
  border-radius: 12px;
  border: 1px solid rgba(125, 129, 144, 0.15);
  background-color: rgba(247, 247, 249, 1);
}
.widget-container .wid-hero .help-hero {
  width: 99px;
}
.widget-container .widget-main-container .widget-master {
  gap: 10px;
}
.widget-container .widget-main-container .widget-master ol {
  margin: 0;
  padding-left: 21px;
}

.widget-container .widget-main-container .widget-master p {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: rgba(0, 0, 0, 1);
}
.widget-container .widget-main-container .widget-master h5 {
  font-size: 14px;
  font-weight: 600;
  line-height: 100%;
  color: rgba(0, 0, 0, 1);
  margin: 0;
}
.widget-container .widget-main-container .widget-master ol li {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 150%;
  color: rgba(0, 0, 0, 1);
}
.widget-container .widget-main-container .widget-main-panel {
  gap: 10px;
}
.widget-container .widget-main-container .main-panel {
  width: 650px;
  height: 280px;
  border-radius: 12px;
  border: 1px solid rgba(125, 129, 144, 0.15);
  background-color: rgba(247, 247, 249, 1);
}
.widget-container .widget-main-container .main-panel img {
  width: 444px;
}
.widget-container .widget-main-container .widget-main-panel h5 {
  font-size: 14px;
  font-weight: 600;
  line-height: 100%;
  color: rgba(0, 0, 0, 1);
  margin: 0;
}
.widget-container .widget-main-container .widget-main-panel p {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: rgba(0, 0, 0, 1);
}
/* ---------------------------------------------- */
.widget-container .widget-main-container .widget-main-header {
  gap: 10px;
}
.widget-container .widget-main-container .main-header {
  width: 650px;
  height: 68px;
  border-radius: 12px;
  border: 1px solid rgba(125, 129, 144, 0.15);
  background-color: rgba(247, 247, 249, 1);
}
.widget-container .widget-main-container .main-header img {
  width: 610px;
}
.widget-container .widget-main-container .widget-main-header h5 {
  font-size: 14px;
  font-weight: 600;
  line-height: 100%;
  color: rgba(0, 0, 0, 1);
  margin: 0;
}
.widget-container .widget-main-container .widget-main-header p {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: rgba(0, 0, 0, 1);
}
.widget-container .navigate-foot {
  border: 1px solid rgba(125, 129, 144, 0.15);
  width: 100%;

  padding: 24px;
  height: 70px;
  gap: 15px;
}
.widget-container .navigate-foot .navigate-content {
  gap: 13px;
}
.widget-container .navigate-foot p {
  font-size: 13px;
  font-weight: 500;
  line-height: 100%;

  color: rgba(0, 0, 0, 1);
}
.widget-container .navigate-foot .navigate-btn-green {
  width: 65px;
  height: 40px;
  gap: 4px;
  border-radius: 12px;
  border: 1px solid transparent;
  color: #575b6c;
  background-color: transparent;
}
.widget-container .navigate-foot .navigate-btn-green .green-img,
.widget-container .navigate-foot .navigate-btn-green:hover .black-img {
  display: none;
}

.widget-container .navigate-foot .navigate-btn-green:hover {
  background: linear-gradient(#ffffff, #05c3680d);
  border: 1px solid #05c36826;
  color: #05c368;
  border-radius: 12px;
}
.widget-container .navigate-foot .navigate-btn-green .black-img,
.widget-container .navigate-foot .navigate-btn-green:hover .green-img {
  display: block;
}
/* --------------------------------------------------------------------------- */
.widget-container .navigate-foot .navigate-btn-red {
  width: 65px;
  height: 40px;
  border-radius: 12px;
  gap: 4px;
  border: 1px solid transparent;
  color: #575b6c;
  background-color: transparent;
}
.widget-container .navigate-foot .navigate-btn-red .red-img,
.widget-container .navigate-foot .navigate-btn-red:hover .black-img {
  display: none;
}

.widget-container .navigate-foot .navigate-btn-red:hover {
  background: linear-gradient(#ffffff, #ec00000d);
  border: 1px solid #ec000026;
  color: #ec0000;
  border-radius: 12px;
}
.widget-container .navigate-foot .navigate-btn-red .black-img,
.widget-container .navigate-foot .navigate-btn-red:hover .red-img {
  display: block;
}

/* .help-foot .btnCust {
  height: 34px;
  padding: 0px 12px;
  gap: 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 13px;
  color: #575b6c;
  font-weight: 500;
}

.help-foot .btnCust .imgAct,
.help-foot .btnCust:hover .imgInAct {
  display: block;
}

.help-foot .btnCust .imgInAct,
.help-foot .btnCust:hover .imgAct {
  display: none;
} */

/* -------------------------ViewUser Page---------------------- */

.modal-dialog-view {
  width: 850px !important;
}

.view-edit {
  width: 69px;
  height: 34px;
  background-color: #704b370d;
  border: 1px solid #704b3726;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  line-height: 100%;
  gap: 5px;
  letter-spacing: 0px;
  color: #704b37;
}
.view-edit:hover {
  background-color: #704b37;
  color: #fff;
}
.viewCsrBtns {
  gap: 8px;
}
.view-deactive {
  width: 119px;
  font-size: 15px;
  font-weight: 500;
  line-height: 100%;
  letter-spacing: 0px;
  gap: 5px;
  color: #ec0000;
  height: 34px;
  background-color: #ec00000d;
  border: 1px solid #ec000026;
  border-radius: 10px;
}
.view-deactive:hover {
  background-color: #ec0000;
  color: #fff;
}

/* test */
.view-user-left {
  width: 300px;
  padding: 15px;
  border-right: 1px solid #7d819040;
}
.modal-title-view {
  gap: 10px !important;
}
.modal-title-view span {
  font-size: 18px;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: 0px;
  color: #575b6c;
}
.view-user-content {
  gap: 15px;
}
.view-user-left .view-upper {
  gap: 6px;
}
.view-user-left .view-upper .profile {
  font-size: 13px;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0px;
  color: rgba(87, 91, 108, 1);
}
.online {
  justify-content: space-between;
}
.online .blank-div {
  width: 80px;
  height: 80px;
  background-color: rgba(125, 129, 144, 0.1);
  border: 1px solid rgba(125, 129, 144, 0.15);
  border-radius: 10px;
}
.online-para {
  font-size: 13px;
  font-weight: 500;
  line-height: 100%;
  justify-content: flex-end;
  letter-spacing: 0px;
  color: rgba(5, 195, 104, 1);
}
form {
  gap: 15px;
}
form label {
  font-size: 13px;
  line-height: 100%;
  letter-spacing: 0px;
  font-weight: 600;
  color: rgba(87, 91, 108, 1);
}
form input {
  border: 1px solid rgba(125, 129, 144, 0.15);
  border-radius: 8px;
  outline: none;
  padding: 9px;
  font-weight: 500;
  font-size: 14px;
  color: #000000;
  /* line-height: 100%; */
  letter-spacing: 0px;
  background: linear-gradient(
    rgba(125, 129, 144, 0.05),
    rgba(255, 255, 255, 1)
  );
  height: 35px;
}
.view-form {
  gap: 6px;
}
.form-data {
  gap: 10px;
}
.user-name input {
  width: 160px;
}
.user-tag input {
  width: 100px;
}
.view-end {
  height: 35px;
}
.view-end input.two-FA {
  width: 226px;
  border-right: none;
  border-radius: 8px 0px 0px 8px;
  height: 100%;
}
.view-end button {
  width: 44px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  height: 100%;
  line-height: 100%;
  border: 1px solid rgba(125, 129, 144, 0.15);
  border-radius: 0px 8px 8px 0px;
  background: linear-gradient(#ffffff, #ec00000d);
  color: #ec0000;
  letter-spacing: 0px;
}
.last-view p {
  font-size: 12px;
  line-height: 150%;
  font-weight: 500;
  color: #575b6c;
  padding-top: 9px;
  letter-spacing: 0px;
}
.last-view p span {
  font-size: 12px;
  line-height: 150%;
  font-weight: 600;
  color: #000000;
  letter-spacing: 0px;
}
.view-user-right {
  width: 100%;
  height: calc(100% - 50px);
}
.upper-view {
  padding: 8px;
  height: 50px;
  border: 1px solid #7d819026;
  border: none;
  gap: 11px;
}
.upper-view .activity {
  border-radius: 10px;
  gap: 6px;
  color: #3b6cd8;
  padding: 9px;
  border: 1px solid #7d819026;
  background-color: #3b6cd81a;
}
.upper-view button {
  font-size: 13px;
  line-height: 100%;
  letter-spacing: 0px;
  font-weight: 600;
}
.upper-view button:hover {
  border-radius: 10px;
  color: #3b6cd8;
  padding: 9px;
  border: 1px solid #7d819026;
  background-color: #3b6cd81a;
}
.upper-view .device {
  gap: 6px;
  background-color: transparent;
  color: #575b6c;
  border-radius: 10px;
  border: 1px solid transparent;
  padding: 9px;
}
.upper-view .pass {
  gap: 6px;
  background-color: transparent;
  color: #575b6c;
  border-radius: 10px;
  border: 1px solid transparent;
  padding: 9px;
}
.upper-view .trouble {
  gap: 6px;
  background-color: transparent;
  color: #575b6c;
  border-radius: 10px;
  border: 1px solid transparent;
  padding: 9px;
}
.view-right {
  height: 34px;
  border-right: none;
  border-left: none;
  border-bottom: 1px solid #7d819040;
  background: linear-gradient(
      0deg,
      rgba(59, 108, 216, 0.03) 0%,
      rgba(59, 108, 216, 0.03) 100%
    ),
    #fff;
}
.view-right p {
  font-size: 14px;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0px;
}
.view-right .view-hash {
  width: 50px;
}
.view-right .view-section {
  width: 120px;
}
.view-right .view-action {
  width: 120px;
}
.view-right .view-app {
  width: 120px;
}
.view-right .view-status {
  width: 80px;
}
.last-view-section {
  padding: 10px;
  height: calc(100% - 34px);
  background: linear-gradient(#ffffff, #704b3708);
  gap: 10px;
}
.last-view-section .last-view-content {
  gap: 10px;
}
.last-view-section .last-view-content p {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0px;
}
.view-num {
  font-size: 14px;
  font-weight: 500;
  line-height: 100%;
  width: 50px;
  letter-spacing: 0px;
  color: #3b6cd8;
  text-decoration: underline;
}
.section-content {
  width: 120px;
  color: #000000;
}
.app-content {
  width: 120px;
  color: #000000;
}
.action-content {
  width: 120px;
  color: #000000;
}
.status-content {
  width: 80px;
  color: #05c368;
}
.three-btn {
  gap: 20px;
}
.status-success {
  color: #05c368;
  font-weight: 500;
}

.status-failed {
  color: #ec0000;
  font-weight: 500;
}

/* --------------------------EditUserDetails---------------------- */

.modal-dialog-edit {
  width: 400px;
}
.modal-header-edit {
  width: 100%;
  padding: 14px;
  background: linear-gradient(#575b6c0d, #ffffff);
  height: 50px;
}
.modal-title-edit {
  gap: 10px !important;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0px;
  line-height: 100%;
  color: #575b6c;
}
.edit-user-main {
  padding: 15px 15px;
  gap: 15px;
}
.edit-upper {
  gap: 6px;
}
.edit-upper p {
  font-size: 13px;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0px;
  color: #575b6c;
}
.edit-profile {
  gap: 10px;
}
.edit-profile .edit-picture {
  width: 80px;
  height: 80px;
  border: 1px solid #7d819026;
  border-radius: 10px;
  overflow: hidden;
}
.edit-profile .edit-picture img {
  object-fit: cover;
  object-position: center;
}
.edit-btn {
  gap: 5px;
}
.edit-btn button {
  width: 68px;
  height: 30px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0px;
  line-height: 100%;
  border-radius: 10px;
  border: none;
}
.edit-btn .edit-blue {
  color: #3b6cd8;
  background-color: #3b6cd81a;
}
.edit-btn .edit-red {
  color: #ec0000;
  background-color: #ec00001a;
}

.form-edit {
  gap: 15px;
}
.form-edit input {
  height: 45px;
  border-radius: 12px;
}
.form-edit label {
  font-size: 13px;
  font-weight: 600;
  line-height: 100%;
  color: #575b6c;
}
.edit-names {
  gap: 10px;
}
.edit-first-name,
.edit-last-name {
  gap: 6px;
}
.edit-first-name input {
  width: 180px;
  height: 45px;
  background-color: #ffffff;
  border: 1px solid #7d819026;
  font-size: 14px;
  font-weight: 500;

  color: #000000;
}
.edit-last-name input {
  width: 180px;
  height: 45px;
  background-color: #ffffff;
  border: 1px solid #7d819026;
  font-size: 14px;
  font-weight: 500;
  color: #000000;
}
.edit-mail {
  gap: 6px;
}
.edit-Users {
  gap: 10px;
}
.edit-admin {
  width: 180px;
  height: 45px;
  border: 1px solid #7d819026;
  background-color: #ffffff;
  font-size: 14px;
  line-height: 100%;
  color: #000000;
  gap: 6px;
  letter-spacing: 0px;
  padding: 14px 15px;
  border-radius: 12px;
  font-weight: 500;
}
.edit-male {
  width: 180px;
  height: 45px;
  border: 1px solid #7d819026;
  background-color: #ffffff;
  font-size: 14px;
  line-height: 100%;
  gap: 6px;
  color: #000000;
  padding: 14px 15px;
  letter-spacing: 0px;
  border-radius: 12px;
  font-weight: 500;
}
.edit-role,
.edit-gender {
  gap: 6px;
}
.edit-save {
  width: 100%;
  height: 46px;
  border: 1px solid #7d819040;
  background-color: #3b6cd8;
  font-weight: 600;
  font-size: 15px;
  border-radius: 12px;
  letter-spacing: 0px;
  margin-top: 10px;
  color: #ffffff;
  line-height: 100%;
}
/* --------------------Roles----------------------------- */
.viewrole-body {
  gap: 15px;
}
.roles-heading {
  border: none;
}
.roles-body-main {
  height: 630px;
  gap: 15px;
}
.roles-body-content,
.rolesLeft-body {
  width: 400px;
}
.rolesLeft-body {
  border: none;
}
.roles-body-content {
  background-color: #ffffff;
  border: 1px solid #7d819040;
  border-radius: 15px;
}
.roles-right-body {
  gap: 15px;
  border-radius: 15px;
  background: linear-gradient(#ffffff, #704b370d);
  border: 1px solid #7d819040;
}
.roles-right-body p {
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0px;
  width: 207px;
  text-align: center;
  color: #704b37bf;
}
.role-main-content {
  gap: 388px;
}
.input-group input {
  border-radius: 15px;
}
.roles-content ul {
  gap: 15px;
}
.roles-content ul li {
  list-style-type: none;
  font-size: 15px;
  line-height: 100%;
  letter-spacing: 0px;
  font-weight: 500;
  color: #575b6c;
}
.down-role {
  height: 61px;
  border-top: 1px solid #7d819040;
  gap: 10px;
  padding: 14px;
}
.down-role .down-left-btn {
  border: 1px solid #3b6cd880;
  height: 38px;
  width: 145px;
  font-size: 14px;
  font-weight: 500;
  line-height: 100%;
  color: #3b6cd8;
  gap: 8px;
  letter-spacing: 0px;
  border-radius: 12px;
  background: linear-gradient(#3b6cd80d, #ffffff);
}
.down-role .down-right-btn {
  border: 1px solid #3b6cd880;
  height: 38px;
  width: 164px;
  font-weight: 500;
  gap: 8px;
  line-height: 100%;
  letter-spacing: 0px;
  border-radius: 12px;
  font-size: 14px;
  background: #3b6cd8;
  color: #ffffff;
}

/* ----------------------------------- */

.roles-list-content ul li {
  border-radius: 12px;
  padding: 5px;
  list-style-type: none;
  font-size: 15px;
  line-height: 100%;
  letter-spacing: 0px;
  font-weight: 500;
  position: relative;
  color: #575b6c;
  height: 38px;
  width: 100%;
}
.default-content {
  display: block;
}
.roles-list-content ul li .hover-content {
  display: none;
  justify-content: center;
  align-items: center;
}
/* .roles-list-content ul li:hover .default-content {
  display: none;
} */

.roles-list-content ul li:hover .hover-content {
  display: block;
}
/* ------------------------------------------------------ */

.roles-list-content ul {
  gap: 5px;
}
.roles-list-content ul .list-role:hover {
  color: #3b6cd8;
  padding: 5px;
  height: 38px;
  border-radius: 12px;
  width: 100%;
  background-color: #3b6cd81a;
}

.roles-list-content {
  height: 520px;
  gap: 1px;
}
.roles-content-body {
  gap: 15px;
  border-radius: 15px;
  background: linear-gradient(#ffffff, #704b370d);
  border: 1px solid #7d819040;
  overflow: hidden;
}
.roles-content-body .role-head {
  height: 47px;
  background: linear-gradient(#575b6c0d, #ffffff);
  width: 100%;
  border-bottom: 1px solid #7d819040;
}
.roles-content-body .role-head p {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0px;
  color: #575b6c;
  padding: 14px;
  line-height: 100%;
}
.role-text p {
  font-size: 13px;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0px;
  color: #3b6cd8;
}
.role-rightMain {
  gap: 20px;
}
.role-text h5 {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  gap: 8px;
  color: #000000;
}
.role-text .role-left-text,
.role-right-text {
  gap: 4px;
}
.role-two-btns {
  gap: 8px;
}
.role-two-btns .roles-btns {
  gap: 8px;
}
/* ------------------------------------- */
.role-up-page {
  gap: 10px;
}
.role-up-page p {
  font-size: 13px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #575b6c;
  font-weight: 600;
}
.role-up-page .role-up-left input {
  height: 45px;
  border: 1px solid #7d819026;
  background-color: #ffffff;
  width: 290px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 100%;
  color: #000000;
}
.role-up-page .role-up-left {
  gap: 5px;
}
.role-up-page .role-up-right {
  gap: 5px;
}
.role-up-page .role-up-right .permission-btns {
  width: 477px;
  height: 45px;
  border: 1px solid #7d819026;
  background-color: #ffffff;
  border-radius: 12px;
  gap: 5px;
  padding: 10px;
}
.role-up-page .role-up-right .permission-btns button {
  height: 26px;
  padding: 4px 6px;
  font-size: 14px;
  font-weight: 500;
  line-height: 100%;
  letter-spacing: 0%;
  border-radius: 8px;
  color: #3b6cd8;
  background-color: #3b6cd80d;
  border: 1px solid #3b6cd826;
}
.role-update {
  gap: 15px;
  width: 100%;
}

/*-------------------------- Attendence Page ---------------------------------*/

.atend-bg-blue {
  background: linear-gradient(
    0deg,
    rgba(20, 68, 150, 0.03) 0%,
    rgba(20, 68, 150, 0.03) 100%,
    #ffffff
  );
}
.atend-bg-green {
  background: linear-gradient(
    0deg,
    rgba(5, 195, 104, 0.03) 0%,
    rgba(5, 195, 104, 0.03) 100%,
    #ffffff
  );
}
.atend-bg-yellow {
  background: linear-gradient(
    0deg,
    rgba(249, 154, 11, 0.03) 0%,
    rgba(249, 154, 11, 0.03) 100%,
    #ffffff
  );
}
.atend-bg-red {
  background: linear-gradient(
    0deg,
    rgba(236, 0, 0, 0.03) 0%,
    rgba(236, 0, 0, 0.03) 100%,
    #ffffff
  );
}
.atend-img-blue {
  background: #14449626;
}
.atend-img-green {
  background-color: #05c36826;
}
.atend-img-yellow {
  background: #f99a0b26;
}
.atend-img-red {
  background: #ec000026;
}
.attend-main {
  width: 191px;
  height: 83px;
  padding: 10px 10px 10px 15px;
  border: 1px solid rgba(125, 129, 144, 0.25);
  border-radius: 12px;
}
.attend-main h1 {
  font-size: 28px;
  font-weight: 700;
  line-height: 100%;
  color: #575b6c;
}
.attend-main .attend-upper h5 {
  font-size: 13px;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0%;
  color: #575b6c;
}
.attend-main .attend-upper .attend-img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

/* ----------------- */
.contLeft-one {
  width: calc(100% - 411px);
}
.atend-container {
  width: 100%;
  border: 1px solid rgba(125, 129, 144, 0.25);
  border-radius: 15px;
  background-color: rgba(255, 255, 255, 1);
  overflow: hidden;
}
.main-container {
  height: 469px;
}
.attend-content {
  width: 100%;
}
.attend-content .live-attend {
  height: 42px;
  width: 100%;
  padding: 8px 10px 8px 14px;
  background: linear-gradient(
    0deg,
    rgba(87, 91, 108, 0.05) 0%,
    rgba(87, 91, 108, 0.05) 100%,
    rgba(255, 255, 255, 1)
  );
}
.live-attend .live-img p {
  font-size: 15px;
  font-weight: 600;
  line-height: 100%;
  color: #575b6c;
}
.atend-btns .atend-today {
  width: 168px;
  height: 26px;
  border: 1px solid rgba(59, 108, 216, 0.1);
  padding: 4px 8px;
  background: linear-gradient(
    0deg,
    rgba(59, 108, 216, 0.05) 0%,
    rgba(59, 108, 216, 0.05) 100%,
    #ffffff
  );
  border-radius: 8px;
}
.atend-btns .atend-today p {
  font-size: 14px;
  line-height: 100%;
  font-weight: 500;
  color: #575b6c;
}
.atend-today-red {
  width: 135px;
  height: 26px;
  border: 1px solid #ec00001a;
  background: linear-gradient(
    0deg,
    rgba(236, 0, 0, 0.05) 0%,
    rgba(236, 0, 0, 0.05) 100%,
    #ffffff
  );
  border-radius: 8px;
}
.atend-today-red p {
  width: 50%;
  font-size: 13px;
  text-align: center;
  height: 100%;
  padding: 5px 8px;
  font-weight: 600;
  border-right: 1px solid #ec00001a;
  line-height: 100%;
  color: rgba(87, 91, 108, 1);
}
.atend-today-red .left-right {
  border-right: none;
  color: #ec0000;
}

.atend-employee {
  height: 33px;
  width: 100%;
  padding: 8px 14px;
  border: 1px solid #7d819026;
  background: linear-gradient(
    0deg,
    rgba(59, 108, 216, 0.2) 0%,
    rgba(59, 108, 216, 0.2) 100%,
    #ffffff
  );
}
.atend-employee p {
  font-size: 15px;
  font-weight: 600;
  line-height: 100%;
  color: #000000;
}
.atend-outer {
  width: 100%;
  height: 64px;
  padding: 5px 7px;
  border-bottom: 1px solid #7d819026;
}
.atend-inner {
  width: 793px;
  gap: 15px;
  padding: 5px 7px;
}

.hello-con:hover {
  background-color: rgba(59, 108, 216, 0.05);
  border-radius: 8px;
}
.atend-inner p {
  font-size: 15px;
  font-weight: 500;
  line-height: 100%;
  color: #000000;
}
.atend-inner .arena {
  font-size: 15px;
  font-weight: 400;
  line-height: 100%;
  color: #000000;
}
.atend-inner .content-img {
  width: 44px;
  height: 44px;
  background: #3b6cd81a;
  border-radius: 50%;
}
.atend-inner .content-img h4 {
  font-size: 15px;
  font-weight: 700;
  line-height: 100%;
  color: #3b6cd8;
}
.atend-all-content {
  height: calc(100vh - 333px);
}
.main-right-content {
  width: 396px !important;
}
.attend-cards {
  margin-bottom: 15px;
}
/* ----------------------------------------------- */
.devices {
  width: 396px;
  height: 42px;
  padding: 12px 14px;
  border: 1px solid rgba(125, 129, 144, 0.15);
  background: linear-gradient(
    0deg,
    rgba(87, 91, 108, 0.05) 0%,
    rgba(87, 91, 108, 0.05) 100%,
    rgba(255, 255, 255, 1)
  );
  border-radius: 14px;
}
.devices p {
  font-size: 15px;
  font-weight: 600;
  line-height: 100%;
  color: rgba(87, 91, 108, 1);
}
.device-right .device-img {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: linear-gradient(
    0deg,
    rgba(236, 0, 0, 0.05) 0%,
    rgba(236, 0, 0, 0.05),
    100%,
    rgba(255, 255, 255, 1)
  );
}
.show-device {
  height: 179px;
  border-radius: 0px 0px 15px 15px;
  width: 396px;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(125, 129, 144, 0.25);
}
.face-scan {
  width: 50%;
  height: 83px;
  padding: 10px 10px 10px 15px;
  border: 1px solid rgba(125, 129, 144, 0.15);
}
.face-scan h5 {
  font-size: 28px;
  font-weight: 700;
  line-height: 100%;
  color: rgba(87, 91, 108, 1);
}
.face-scan .face-inner p {
  font-size: 13px;
  font-weight: 600;
  line-height: 100%;
  color: rgba(87, 91, 108, 1);
}
.face-inner .face-image {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(20, 68, 150, 0.1);
}
.show-device .metric {
  border-left: none;
  border-right: none;
  border-top: none;
}
.show-device .bio-scan {
  border-right: none;
  border-top: none;
}
.devices-btns {
  height: 42px;
}
.online-btn .green-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(5, 195, 104, 1);
}
.online-btn .red-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(236, 0, 0, 1);
}
.online-btn {
  width: 86px;
  gap: 4px;
  height: 26px;
  border: 1px solid rgba(125, 129, 144, 0.15);
  border-radius: 8px;
  background: linear-gradient(
    rgba(5, 195, 104, 0.03) 0%,
    rgba(5, 195, 104, 0.03) 100%,
    rgba(255, 255, 255, 1)
  );
}
.online-btn p {
  font-size: 13px;
  font-weight: 400;
  line-height: 100%;
  color: rgba(0, 0, 0, 1);
}
.online-btn h5 {
  font-size: 15px;
  font-weight: 500;
  line-height: 100%;
  color: rgba(0, 0, 0, 1);
}
.online-red {
  width: 86px;
  height: 26px;
  border: 1px solid rgba(125, 129, 144, 0.15);
  border-radius: 8px;
  background: linear-gradient(
    rgba(236, 0, 0, 0.03) 0%,
    rgba(236, 0, 0, 0.03) 100%,
    rgba(255, 255, 255, 1)
  );
}

.online-two-btns {
  width: 50%;
  gap: 7px;
}
.online-right {
  border-left: 1px solid rgba(125, 129, 144, 0.15);
}
.manage-btns {
  height: 54px;

  border-top: 1px solid rgba(125, 129, 144, 0.15);
}

.manage-btns button {
  width: 119px;
  height: 34px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  line-height: 100%;
  background-color: transparent;
  border-radius: 10px;
  gap: 6px;
  color: rgba(87, 91, 108, 1);
}
.manage-btns button:hover {
  width: 119px;
  height: 34px;
  background-color: rgba(59, 108, 216, 0.05);
  border: 1px solid rgba(125, 129, 144, 0.15);
  font-size: 13px;
  font-weight: 600;
  gap: 6px;
  border-radius: 10px;
  line-height: 100%;
  color: rgba(59, 108, 216, 1);
}
.attend-right-part {
  gap: 17px;
}

.attend-right-down {
  width: 100%;
  gap: 10px;
  flex-wrap: wrap;
}
.attend-right-down button {
  height: 48px;
  border-radius: 15px;
  font-size: 15px;
  font-weight: 500;
  gap: 10px;
  line-height: 100%;
  border: 1px solid rgba(125, 129, 144, 0.25);
  background-color: rgba(255, 255, 255, 1);
  color: rgba(87, 91, 108, 1);
}
.attend-right-down button:hover {
  height: 48px;
  border-radius: 15px;
  font-size: 15px;
  line-height: 100%;
  font-weight: 500;
  border: 1px solid rgba(125, 129, 144, 0.25);
  background: linear-gradient(
    0deg,
    rgba(59, 108, 216, 0.1) 0%,
    rgba(59, 108, 216, 0.1) 100%
  );
  color: rgba(59, 108, 216, 1);
}
.attend-right-down button .act,
.attend-right-down button:hover .inAct {
  display: none;
}

.attend-right-down button:hover .act {
  transition: 1s ease-in;
  display: block;
}
.attend-right-down button img {
  color: red;
}
.attend-right-down .lookup {
  width: 193px;
}
.attend-right-down .logs {
  width: 188px;
}
.attend-right-down .request {
  width: 240px;
}
.attend-right-down .Analytics {
  width: 133px;
}
.attend-right-down .Policies,
.attend-right-down .Policies {
  width: 122px;
}
.attend-right-down .setting {
  width: 126px;
}
.attendence-right {
  gap: 16px;
}
.atend-hover {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}
.atend-hover:hover {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background-color: rgba(59, 108, 216, 0.1);
}
.no-bottom-radius {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.no-border-top {
  border-top: none !important;
}