/* 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 {
  /* max-height: 380px; */
  padding: 0px 28px;
}
.modal-body-notification .notify-bell-bgCircle {
  width: 55px;
  height: 55px;
  background: hsla(221, 67%, 54%, 0.1);
  border-radius: 50%;
}

/* Modal body-two*/

.modal-body-notifyParent {
  margin: 0;
  padding: 12px 11px;
  min-height: 380px;
  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;
}
.search-main .search-content {
  height: 48px;
  border-radius: 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;
}

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

.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-dialog-help {
  max-width: 700px !important;
  width: 700px;
  height: 696px;
}
.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;
}

.slash-parent button {
  width: 25px;
  height: 25px;
  border-radius: 9px;
  background-color: #ffffff80;
  border: 1px solid #7d819040;
}
/* ---------------------- */

.modalBody-sp {
  height: calc(100% - 50px);
}

.cmnSp-body {
  height: calc(100% - 54px);
}

.helpSp-body .mainBody {
  height: calc(100% - 33px);
}
/*----------------------*/
.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 {
  height: 54px;
  border-top: 1px solid #7d819026;
}
.help-foot .btnCust {
  height: 34px;
  background: transparent;
  border: 1px solid transparent;
  color: #575b6c;
}

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

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

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

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

.help-main-container .search-btn {
  width: 43px;
  height: 43px;
  min-width: 43px;
  background: rgba(255, 47, 47, 0.02);
}
.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-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;
}
/* ------------------------------10 May 2025----------------------------- */

/* ----------------------------------------------------------- */
.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%;
}

/* test */

/* 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;
  letter-spacing: 0px;
  background: linear-gradient(
    rgba(125, 129, 144, 0.05),
    rgba(255, 255, 255, 1)
  );
  height: 35px;
} */

.user-name input {
  width: 160px;
}

.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);
}
.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;
}

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

.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;
}

/*-------------------------- 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;
}

/* Help Center, Support, Shortcuts */

.supprtSp-body .card {
  height: 128px;
  width: calc(50% - 8px);
  padding: 18px;
}

.supprtSp-body .head .imgBx {
  height: 32px;
}
.supprtSp-body .cardExp {
  height: 75px;
  padding: 18px;
  background: linear-gradient(
      0deg,
      rgba(255, 249, 229, 0.25) 0%,
      rgba(255, 249, 229, 0.25) 100%
    ),
    #fff;
}

.supprtSp-body .cardExp:hover,
.supprtSp-body .cardExp.active {
  border: 1px solid #ffcb1e;
  background: linear-gradient(
      0deg,
      rgba(255, 249, 229, 0.5) 0%,
      rgba(255, 249, 229, 0.5) 100%
    ),
    #fff;
}
.supprtSp-body .card.crt {
  background: linear-gradient(
      0deg,
      rgba(240, 249, 255, 0.25) 0%,
      rgba(240, 249, 255, 0.25) 100%
    ),
    #fff;
}

.supprtSp-body .card.crt:hover,
.supprtSp-body .card.crt.active {
  border: 1px solid #2baaff;
  background: linear-gradient(
      0deg,
      rgba(240, 249, 255, 0.5) 0%,
      rgba(240, 249, 255, 0.5) 100%
    ),
    #fff;
}

.supprtSp-body .card.mTkt {
  background: linear-gradient(
      0deg,
      rgba(244, 236, 255, 0.25) 0%,
      rgba(244, 236, 255, 0.25) 100%
    ),
    #fff;
}

.supprtSp-body .card.mTkt:hover,
.supprtSp-body .card.mTkt.active {
  border: 1px solid #9e58ff;
  background: linear-gradient(
      0deg,
      rgba(244, 236, 255, 0.5) 0%,
      rgba(244, 236, 255, 0.5) 100%
    ),
    #fff;
}

.supprtSp-body .card.callUs {
  background: linear-gradient(
      0deg,
      rgba(232, 248, 242, 0.25) 0%,
      rgba(232, 248, 242, 0.25) 100%
    ),
    #fff;
}

.supprtSp-body .card.chat {
  background: linear-gradient(
      0deg,
      rgba(255, 240, 243, 0.25) 0%,
      rgba(255, 240, 243, 0.25) 100%
    ),
    #fff;
}

.supprtSp-body .card .spanTg {
  background: #fff;
  height: 23px;
}

.supprtSp-body .card .spanTg p {
  color: #888;
}
.supprtSp-body .card .spanTg p span {
  color: #252525;
}

.supprtSp-body .card .spanTg.disabled {
  background: #f5f5f5;
}

.commonTktSp-body .mBody {
  background: linear-gradient(
      0deg,
      rgba(80, 80, 80, 0.02) 0%,
      rgba(80, 80, 80, 0.02) 100%
    ),
    #fff;
}

.commonTktSp-body .mBody.mh-54 {
  height: calc(100% - 54px);
}

.commonTktSp-body .mBody .item-p {
  padding: 18px;
}

.commonTktSp-body .mBody .uploadBtn {
  top: 0;
}
.commonTktSp-body .mBody .img-mh100 {
  max-height: 100%;
}

.commonTktSp-body .mBody .w-rgt265 {
  width: calc(100% - 265px);
}

.mtTktSp-body .body {
  height: calc(100% - 77px);
}

.mtTktList .card {
  height: 140px;
  width: 198px;
}

.mtTktList .card .top {
  height: 48px;
  border-bottom: linear-gradient(
      0deg,
      rgba(209, 213, 219, 0.5) 0%,
      rgba(209, 213, 219, 0.5) 100%
    ),
    #fff;
}

.mtTktList .card .body {
  height: calc(100% - 48px);
}

.mtTkt-chat {
  background: linear-gradient(
      0deg,
      rgba(80, 80, 80, 0.02) 0%,
      rgba(80, 80, 80, 0.02) 100%
    ),
    #fff;
}

.mtTkt-chat .head {
  height: 55px;
}

.mtTkt-chat .body {
  height: calc(100% - 55px);
}

.mtTkt-chat .sendBox {
  bottom: 0px;
  left: 0;
  height: 70px;
}

.mtTkt-chat .sendBox .fileUpl {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(209, 213, 219, 0.5);
}

.mtTkt-chat .sendBox .fileUpl .uploadBtn {
  top: 0px;
}

.mtTkt-chat .sendBox .fileUpl:hover,
.mtTkt-chat .sendBox .fileUpl.active {
  border: 1px solid rgba(59, 108, 216, 0.5);
}

.mtTkt-chat .sendBox .fileUpl .imgAct,
.mtTkt-chat .sendBox .fileUpl:hover .imgInAct,
.mtTkt-chat .sendBox .fileUpl.active .imgInAct,
.chatEnd-btm .btnBc .sBtn .imgAct,
.chatEnd-btm .btnBc .sBtn:hover .imgInAct,
.chatEnd-btm .btnBc .sBtn.active .imgInAct {
  display: none;
}

.mtTkt-chat .sendBox .fileUpl:hover .imgAct,
.mtTkt-chat .sendBox .fileUpl.active .imgAct,
.chatEnd-btm .btnBc .sBtn:hover .imgAct,
.chatEnd-btm .btnBc .sBtn.active .imgAct {
  display: block;
}

.mtTkt-chat .sendBox .custTextar {
  width: calc(100% - 120px);
  resize: none;
}

.chatBody-tkt {
  height: calc(100% - 70px);
}

.chatBody-tkt .msgBox .item {
  width: 420px;
}

.chatBody-tkt .msgBox .imgBx {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  outline: 1px solid #d1d5db80;
  background: #3b6cd8;
}

.chatBody-tkt .msgBox .imgBx-em {
  width: 23px;
  height: 23px;
}

.chatBody-tkt .dtBox {
  height: 25px;
  border: 1px solid rgba(125, 129, 144, 0.25);
  background: linear-gradient(
      0deg,
      rgba(125, 129, 144, 0.02) 0%,
      rgba(125, 129, 144, 0.02) 100%
    ),
    #fff;
}

.chatBody-tkt .msgBox .fileBox {
  max-width: 110px;
  /* min-width: 52px; */
  height: 60px;
  border: 1px solid rgba(209, 213, 219, 0.5);
  background: #f7f7f9;
}

.chatBody-tkt .msgBox .fileBox.mw-80 {
  max-width: 80px;
}

.chatBody-tkt .msgBox .fileBox img {
  max-height: 100%;
}

.chatBody-tkt .msgBox .fileBox.file {
  width: 60px;
}

.chatEnd-btm .lineBr::before,
.chatEnd-btm .lineBr::after {
  content: "";
  height: 1px; /* line thickness */
  background: rgba(87, 91, 108, 0.25);
  flex: 1; /* lines stretch equally */
  min-width: 40px; /* keep a minimum line length */
}

.chatEnd-btm .lineBr span {
  white-space: nowrap; /* keep text on one line */
}

.chatEnd-btm .btnBc .sBtn {
  height: 40px;
  border: 1px solid transparent;
}

.chatEnd-btm .btnBc .sBtn {
  color: #575b6c;
}

.chatEnd-btm .btnBc .sBtn.poor:hover,
.chatEnd-btm .btnBc .sBtn.poor.active {
  border: 1px solid rgba(236, 0, 0, 0.15);
  background: linear-gradient(
      0deg,
      rgba(236, 0, 0, 0.05) 0%,
      rgba(236, 0, 0, 0.05) 100%
    ),
    #fff;
}

.chatEnd-btm .btnBc .sBtn.good:hover,
.chatEnd-btm .btnBc .sBtn.good.active {
  border: 1px solid rgba(255, 149, 2, 0.15);
  background: rgba(255, 149, 2, 0.1);
}

.chatEnd-btm .btnBc .sBtn.excelnt:hover,
.chatEnd-btm .btnBc .sBtn.excelnt.active {
  border: 1px solid rgba(5, 195, 104, 0.15);
  background: rgba(5, 195, 104, 0.05);
}

.chatEnd-btm .btnBc .sBtn.poor:hover span,
.chatEnd-btm .btnBc .sBtn.poor.active span {
  color: #ec0000;
}

.chatEnd-btm .btnBc .sBtn.good:hover span,
.chatEnd-btm .btnBc .sBtn.good.active span {
  color: #ff9502;
}

.chatEnd-btm .btnBc .sBtn.excelnt:hover span,
.chatEnd-btm .btnBc .sBtn.excelnt.active span {
  color: #05c368;
}

.shortcut-body .body {
  height: calc(100% - 63px);
}

.shortcut-body .body .item {
  height: 30px;
}

.shortcut-body .body .item .key {
  height: 25px;
  min-width: 25px;
  border: 1px solid rgba(125, 129, 144, 0.25);
}

.shortcut-body .body .item:hover {
  height: 31px;
  transition: all 0.4s ease;
  background: rgba(59, 108, 216, 0.08);
}

.ldWelcome .head {
  height: 200px;
  background: #f7f7f9;
}

.ldCompilance .tblBox {
  border: 1px solid #d1d5db;
}

.ldCompilance .tblBox .t-head {
  height: 30px;
  background: linear-gradient(
      0deg,
      rgba(75, 85, 99, 0.02) 0%,
      rgba(75, 85, 99, 0.02) 100%
    ),
    #fff;
}

.ldCompilance .tblBox .lft {
  width: 205px;
  border-right: 1px solid #d1d5db;
}

.ldCompilance .tblBox .rgt {
  width: calc(100% - 205px);
}

.mBody-tetInfo {
  height: 606px;
  min-height: 606px;
}

.mBody-tetInfo ul {
  margin-left: 25px;
}

.mBody-tetInfo ul li {
  list-style-type: disc;
}