@font-face {
  font-family: "work-sans";
  src: url(./fonts/work-sans.regular.ttf);
}

@font-face {
  font-family: "batangas";
  src: url("./fonts/Batangas Bold 700.otf") format("truetype"); /* or 'woff'/'woff2' */
  font-weight: normal;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  font-family: "work-sans";
  box-sizing: border-box;
  list-style-type: none;
  text-decoration: none;
  user-select: none;
}

.picker span {
  font-size: 1em !important;
  color: white;
}

.sidebar {
  width: 80px;
  position: fixed;
  left: 0;
  top: 0;
  border-right: 1px solid #e1e6f0;
  overflow: hidden;
  overflow-y: auto;
  transition: width 0.3s;
  height: 100%;
  background-color: #fff;
  z-index: 1000;
}

.sidebar::-webkit-scrollbar {
  width: 0;
  background-color: #01b9e2;
}

.sidebar i {
  float: right;
  margin: 0.5rem 1rem 0.5rem 0.5rem;
  font-size: 1em;
  cursor: pointer;
  visibility: hidden;
}

.sidebar.open-bar {
  width: 300px;
}

.sidebar #none {
  display: none;
}

.sidebar.open-bar #none {
  display: inline;
}

.sidebar-brand {
  height: 78px;
  padding: 1.5rem 0rem 0rem 2rem;
}

.sidebar-brand .logo-1 {
  width: 130px;
  display: none;
  cursor: pointer;
}

.sidebar.open-bar .logo-1 {
  display: inline;
  transition: 0ms;
}

.sidebar-brand .logo-2 {
  margin-left: -0.5rem;
  margin-top: -0.3rem;
  cursor: pointer;
}

.sidebar.open-bar .logo-2 {
  display: none;
  transition: 0ms;
}

.sidebar-menu {
  margin-top: 2rem;
}

.sidebar-menu li {
  width: 100%;
  margin-bottom: 0.5rem;
}

.sidebar-menu li a {
  position: relative;
  padding: 0.7rem 0rem 0.7rem 2rem;
  display: block;
  color: #080d1b;
  font-size: 1.2em;
  z-index: 0;
}

.sidebar-menu li a::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  background: linear-gradient(
    90deg,
    #c9c5ea 42.71%,
    rgba(255, 255, 255, 0) 100%
  );
  opacity: 0.2;
  z-index: -1;
  transform: scale(0);
  transition: transform 0.3s ease-out;
}

.sidebar-menu li a:hover::before,
.sidebar-menu li a:focus::before {
  transform: scale(1);
}

.sidebar-menu li .active {
  color: #080d1b;
  font-weight: 600;
  background: linear-gradient(
    90deg,
    #01b9e2 42.71%,
    rgba(255, 255, 255, 0) 100%
  );
  opacity: 1;
  z-index: -1;
  transform: scale(1);
  transition: transform 0.3s ease-out;
}

.sidebar-menu li .active > #icon {
  display: inline;
}

.sidebar-menu li .active > #symbol {
  display: none;
}

.sidebar-menu a span:first-child {
  font-size: 1.5rem;
  padding-right: 0.5rem;
  vertical-align: middle;
}

.sidebar-menu a span {
  font-size: 1.5rem;
  padding-right: 0.5rem;
  vertical-align: middle;
}

.sidebar-menu a:hover #symbol,
a #icon {
  display: none;
}

.sidebar-menu a:hover #icon,
a:focus #icon,
a:active #icon {
  display: inline;
}

.sidebar-menu a:hover #symbol,
a:focus #symbol,
a:active #symbol {
  display: none;
}

.sidebar-menu #none {
  font-size: 1em;
}

.sidebar-menu a:hover,
a:active,
a:focus {
  font-weight: 600;
}

.sidebar-menu .sidebar-sub-menu {
  display: none;
  position: relative;
}

.sidebar-menu .sidebar-sub-menu .sub-item {
  position: relative;
  font-size: 1em;
  display: flex;
  align-items: center;
  padding-left: 5rem;
}

.sidebar-menu .sidebar-sub-menu .sub-item:after {
  position: absolute;
  content: "";
  display: inline-block;
  width: 25px;
  height: 1px;
  background: #c3c5c8;
  left: 43px;
}

.sidebar-menu .sidebar-sub-menu:before {
  position: absolute;
  content: "";
  width: 1px;
  height: calc(100% - 20px);
  background-color: #c3c5c8;
  left: 43px;
}

.sidebar.open-bar .sidebar-menu ul li .dropdown {
  display: inline;
}

.sidebar-menu .dropdown {
  position: absolute;
  font-size: 1em;
  right: 20px;
  top: 15px;
  transition: 0.6s;
  display: none;
}

.sidebar-menu .rotate {
  transform: rotate(180deg);
  right: 28px;
  transition: 0.6s;
}

.sidebar-menu .sidebar-sub-menu .sub-item span {
  font-size: 1em;
  color: #999ba1;
}

.sidebar-menu .sidebar-sub-menu .sub-item h6 {
  color: #888a91;
}

.main {
  margin-left: 80px;
  transition: margin-left 0.3s;
}

.main.open-bar2 {
  margin-left: 300px;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem 1rem 1rem;
  border-bottom: 1px solid rgb(226, 226, 226);
}

header #bell {
  font-size: 1.4em;
  font-weight: 600;
  cursor: pointer;
  padding: 0rem 1rem 0rem 2rem;
}

header #bell:hover {
  color: #999ba1;
  transition: 0.3s;
}

header #info {
  font-size: 1.4em;
  color: #999ba1;
  cursor: pointer;
  padding: 0rem 2rem 0rem 1rem;
}

header #info:hover {
  color: #000000;
  transition: 0.3s;
}

.page-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-info span {
  font-size: 2rem;
  color: #999ba1;
  cursor: default;
}

.page-info span:hover {
  color: #01b9e2;
  transition: 0.6s;
  cursor: pointer;
}

.page-info h3 {
  font-size: 1.5rem;
  margin-left: 0.5rem;
  font-weight: 900;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 500px;
}

.main .nav .notification {
  position: absolute;
  background-color: #fff;
  width: 500px;
  right: 0;
  z-index: 1000;
  top: 5rem;
  display: none;
  box-shadow: 0px 0px 30px #e7e7e7;
}

.main .nav .activities {
  position: absolute;
  background-color: #fff;
  width: 500px;
  right: 0;
  z-index: 1000;
  top: 5rem;
  display: none;
  box-shadow: 0px 0px 30px #e7e7e7;
}

.main .nav .notification hr {
  height: 0;
  border: 1px solid #eeeeef;
}

.main .nav .activities hr {
  height: 0;
  border: 1px solid #eeeeef;
}

.main .nav .notification .heading {
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.main .nav .activities .heading {
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.main .nav .notification .heading h4 {
  font-size: 1.1em;
}

.main .nav .activities .heading h4 {
  font-size: 1.1em;
}

.main .nav .notification .heading button {
  background: none;
  border: none;
  outline: none;
  text-decoration: underline;
  color: #888a91;
  cursor: pointer;
}

.main .nav .activities .heading button {
  background: none;
  border: none;
  outline: none;
  text-decoration: underline;
  color: #888a91;
  cursor: pointer;
}

.main .nav .notification .heading button span {
  vertical-align: middle;
  font-size: 1.4em;
  text-decoration: none;
}

.main .nav .activities .heading button span {
  vertical-align: middle;
  font-size: 1.4em;
  text-decoration: none;
}

.main .nav .notification .tabs {
  border-bottom: 1px solid #eeeeef;
}

.main .nav .activities .tabs {
  border-bottom: 1px solid #eeeeef;
}

.main .nav .notification .tabs div {
  display: flex;
  gap: 0.3rem;
  padding-left: 1rem;
}

.main .nav .activities .tabs div {
  display: flex;
  gap: 0.3rem;
  padding-left: 1rem;
}

.main .nav .notification .tabs div .tab {
  padding: 1rem;
  color: #999ba1;
  cursor: pointer;
}

.main .nav .activities .tabs div .tab {
  padding: 1rem;
  color: #999ba1;
  cursor: pointer;
}

.main .nav .notification .tabs div .tab h5 {
  font-weight: 100;
}

.main .nav .activities .tabs div .tab h5 {
  font-weight: 100;
}

.main .nav .notification .tabs div .tab h5 span {
  padding: 0.1rem 0.2rem;
  background-color: #eeeeef;
  border-radius: 4px;
  color: #767982;
  font-size: 0.8em;
  vertical-align: top;
}

.main .nav .activities .tabs div .tab h5 span {
  padding: 0.1rem 0.2rem;
  background-color: #eeeeef;
  border-radius: 4px;
  color: #767982;
  font-size: 0.8em;
  vertical-align: top;
}

.main .nav .notification .tabs div #tab1 {
  border-bottom: 2px solid #080d1b;
  color: #000000;
}

.main .nav .activities .tabs div #tab1 {
  border-bottom: 2px solid #080d1b;
  color: #000000;
}

.main .nav .notification .tabs div #tab1 h5 {
  font-weight: 600;
}

.main .nav .activities .tabs div #tab1 h5 {
  font-weight: 600;
}

.main .nav .notification .tabs div #tab1 h5 span {
  background: linear-gradient(to left, #01bde5 0%, #02508d 100%) !important;
  color: #fff;
  font-weight: 100;
}

.main .nav .activities .tabs div #tab1 h5 span {
  background: linear-gradient(to left, #01bde5 0%, #02508d 100%) !important;
  color: #fff;
  font-weight: 100;
}

.main .nav .notification .notify .noti {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1rem 0.5rem;
}

.main .nav .activities .notify .noti {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1rem 0.5rem;
}

.main .nav .notification .notify .noti:hover {
  background-color: #f7f8fa;
}

.main .nav .activities .notify .noti:hover {
  background-color: #f7f8fa;
}

.main .nav .notification .notify .noti .img-txt {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
}

.main .nav .activities .notify .noti .img-txt {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
}

.main .nav .notification .notify .noti .img-txt img {
  align-self: flex-start;
}

.main .nav .activities .notify .noti .img-txt img {
  align-self: flex-start;
}

.main .nav .notification .notify .noti .img-txt .txt h5 span {
  text-decoration: underline;
}

.main .nav .activities .notify .noti .img-txt .txt h5 span {
  text-decoration: underline;
}

.main .nav .notification .notify .noti .img-txt .txt p {
  font-size: 0.65em;
  color: #767982;
  line-height: 2em;
}

.main .nav .activities .notify .noti .img-txt .txt p {
  font-size: 0.65em;
  color: #767982;
  line-height: 2em;
}

.main .nav .notification .notify .noti .img-txt .txt .msg {
  margin-top: 0.5rem;
  padding: 0.5rem;
  background-color: #eeeeef;
  border-radius: 8px;
}

.main .nav .activities .notify .noti .img-txt .txt .msg {
  margin-top: 0.5rem;
  padding: 0.5rem;
  background-color: #eeeeef;
  border-radius: 8px;
}

.main .nav .notification .notify .noti .img-txt .txt .msg1 {
  display: flex;
  align-items: center;
  margin-top: 1rem;
  background-color: #eeeeef;
  padding: 0.3rem;
  border-radius: 8px;
  gap: 0.7rem;
}

.main .nav .activities .notify .noti .img-txt .txt .msg1 {
  display: flex;
  align-items: center;
  margin-top: 1rem;
  background-color: #eeeeef;
  padding: 0.3rem;
  border-radius: 8px;
  gap: 0.7rem;
}

.main .nav .notification .notify .noti .img-txt .txt .msg1 span {
  vertical-align: top;
  color: #01b9e2;
  padding-right: 0.5rem;
  cursor: pointer;
}

.main .nav .activities .notify .noti .img-txt .txt .msg1 span {
  vertical-align: top;
  color: #01b9e2;
  padding-right: 0.5rem;
  cursor: pointer;
}

.main .nav .notification .notify .noti .img-txt .txt .msg h6 {
  font-weight: 600;
  line-height: 1.5em;
  font-size: 0.7em;
}

.main .nav .activities .notify .noti .img-txt .txt .msg h6 {
  font-weight: 600;
  line-height: 1.5em;
  font-size: 0.7em;
}

.main .nav .notification .notify .noti .img-txt .txt .msg button {
  margin-top: 0.5rem;
  background: none;
  outline: none;
  border: none;
  color: #01b9e2;
  font-weight: 600;
  cursor: pointer;
}

.main .nav .activities .notify .noti .img-txt .txt .msg button {
  margin-top: 0.5rem;
  background: none;
  outline: none;
  border: none;
  color: #01b9e2;
  font-weight: 600;
  cursor: pointer;
}

.main .nav .notification .notify .noti .img-txt .txt .msg button span {
  vertical-align: bottom;
  font-size: 1.4em;
}

.main .nav .activities .notify .noti .img-txt .txt .msg button span {
  vertical-align: bottom;
  font-size: 1.4em;
}

.main .nav .notification .settings {
  background-color: #fff;
  border-top: 1px solid #eeeeef;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.main .nav .notification .settings .set {
  background: none;
  outline: none;
  border: none;
  color: #767982;
  cursor: pointer;
}

.main .nav .notification .settings .set:hover {
  color: #01b9e2;
  transition: 0.3s;
}

.main .nav .notification .settings .set span {
  vertical-align: middle;
  font-size: 1.4em;
}

.main .nav .notification .settings .view {
  background: none;
  border: 1px solid #080d1b;
  border-radius: 5px;
  padding: 0.5rem 1rem;
  font-weight: 600;
}

.main .nav .notification .settings .view:hover {
  color: #fff;
  background-color: #080d1b;
  transition: 0.6s;
}

.search-wrapper {
  max-width: 11em;
  border: 1px solid #ccc;
  background-color: #edf1f4;
  border: none;
  border-radius: 6px;
  height: 45px;
  display: flex;
  align-items: center;
  overflow-x: hidden;
}

.search-wrapper input {
  background-color: #edf1f4;
  font-size: 0.9rem;
  padding: 0.5rem 0rem 0.5rem 0.7rem;
  border: none;
  outline: none;
  width: 140px;
}

.search-wrapper span {
  display: inline-block;
  color: gray;
  margin-right: 1rem;
  font-size: 1.4rem;
  cursor: pointer;
}

.search-wrapper span:hover {
  color: #01b9e2;
  transition: 0.3s;
}

.user-wrapper {
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 1em;
}

.user-wrapper .user-name {
  text-align: end;
  margin-right: 0.5rem;
}

.user-wrapper small {
  font-size: 0.7rem;
  color: #a8a8b0;
  font-weight: 600;
}

.user-wrapper img {
  border-radius: 50%;
  cursor: pointer;
}

.user-wrapper h5 {
  font-size: 1em;
  white-space: nowrap;
  font-weight: 600;
}

.sub-menu-wrapper {
  position: absolute;
  top: 9%;
  right: 1%;
  background-color: rgb(255, 255, 255);
  width: 230px;
  border-radius: 10px;
  overflow: hidden;
  max-height: 0px;
  transition: max-height 0.5s;
  z-index: 10;
}

.sub-menu-wrapper .sub-menu {
  padding: 1rem;
  width: 100%;
}

.sub-menu-wrapper .sub-menu .name-img {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.sub-menu-wrapper .sub-menu .name-img h6 {
  color: #999ba1;
  font-size: 0.8em;
  font-weight: 100;
}

.sub-menu-wrapper .sub-menu p {
  margin-top: 0.5rem;
  font-size: 0.7em;
  color: #999ba1;
}

.sub-menu-wrapper .sub-menu span {
  vertical-align: top;
  font-size: 1.2em;
}

.sub-menu-wrapper.open-menu {
  max-height: 250px;
  border: 1px solid rgb(209, 209, 209);
}

.sub-menu-wrapper .sub-menu hr {
  margin-top: 1rem;
  height: 0px;
  border: 1px solid #eeeeef;
}

.sub-menu-wrapper .sub-menu .user-info {
  display: flex;
  flex-direction: column;
}

.sub-menu-wrapper .sub-menu .user-info a {
  font-size: 1.2em;
  margin-top: 0.5rem;
  padding: 0px 4px 4px 4px;
  border-radius: 4px;
}

.sub-menu-wrapper .sub-menu .user-info p {
  color: #080d1b;
}

.sub-menu-wrapper .sub-menu .user-info a:hover {
  background-color: #eeeeef;
  transition: 0.3s;
}

.dashbtn {
  position: relative;
  z-index: 1000;
}

.dashbtn b {
  position: fixed;
  top: 119px;
  left: 63px;
  padding: 0.1rem;
  border: 1px solid #e1e6f0;
  border-radius: 50%;
  background-color: #fff;
  font-size: 1.5em;
  box-shadow: 0px 4px 4px rgba(201, 197, 234, 0.25);
  cursor: pointer;
  user-select: none;
  transform: rotate(180deg);
}

.dashbtn b:hover {
  background-color: #000000;
  transition: 0.3s;
  color: #fff;
}

.drp-dwn-toggle {
  position: absolute;
  width: 200px;
  top: 165px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  box-shadow: 0px 0px 30px #e7e7e7;
  display: none;
}

.drp-dwn-toggle hr {
  height: 0;
  border: 1px solid #eeeeef;
}

.drp-dwn-toggle a {
  display: flex;
  align-items: center;
  padding: 0.8rem;
  color: #080d1b;
  font-size: 0.9em;
  font-weight: 600;
}

.drp-dwn-toggle a span {
  color: #c3c5c8;
  padding-right: 0.3rem;
  font-size: 1.2em;
}

.drp-dwn-toggle a h6 {
  font-size: 0.9em;
  color: #767982;
}

.drp-dwn-toggle a:hover {
  background-color: #eeeeef;
}

.drp-dwn-toggle2 {
  position: absolute;
  width: 200px;
  top: 220px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  box-shadow: 0px 0px 30px #e7e7e7;
  display: none;
}

.drp-dwn-toggle2 hr {
  height: 0;
  border: 1px solid #eeeeef;
}

.drp-dwn-toggle2 a {
  display: flex;
  align-items: center;
  padding: 0.8rem;
  color: #080d1b;
  font-size: 0.9em;
  font-weight: 600;
}

.drp-dwn-toggle2 a span {
  color: #c3c5c8;
  padding-right: 0.3rem;
  font-size: 1.2em;
}

.drp-dwn-toggle2 a h6 {
  font-size: 0.9em;
  color: #767982;
}

.drp-dwn-toggle2 a:hover {
  background-color: #eeeeef;
}

.panel {
  background-color: white;
  color: #080d1b;
}

.faq-head {
  color: black;
}

.modal1 {
  background-color: white;
  color: #000000;
}

/* ------------------ PAGE-1 ------------------*/

/* ----------------- MAIN COL1 ----------------- */

body {
  margin: 0;
  padding: 0;
  background-color: #f7f8fa !important;
  width: 100%;
  height: 100%;
}

.main-grid {
  padding: 1rem;
  background-color: #f7f8fa;
  display: grid;
  grid-template-columns: 70% 1fr;
  gap: 1rem;
}

.main-grid .main-col1 .col1-child1 {
  width: 100%;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding: 1rem;
}

.main-grid .main-col1 .col1-child1 img {
  border-radius: 50%;
}

.main-grid .main-col1 .col1-child1 .message {
  padding-left: 1rem;
}

.main-grid .main-col1 .col1-child1 .message h3 {
  font-size: 1.3em;
  font-weight: 100;
}

.main-grid .main-col1 .col1-child1 .message h3 span {
  font-weight: 600;
}

.main-grid .main-col1 .col1-child1 .message p {
  font-size: 0.85em;
  color: #a8a8b0;
}

.main-grid .main-col1 .col1-child1 .message p span {
  text-decoration: underline;
  cursor: pointer;
}

.main-grid .main-col1 .col1-child1 .buttons {
  margin-left: auto;
  margin-right: 1rem;
}

.main-grid .main-col1 .col1-child1 .buttons span {
  font-size: 1.2em;
  padding: 0.7rem;
  background: linear-gradient(
    90deg,
    #f1efff 42.71%,
    rgba(255, 255, 255, 0) 100%
  );
  border-radius: 50%;
  margin-right: 0.5rem;
  vertical-align: middle;
  cursor: pointer;
}

.main-grid .main-col1 .col1-child1 .buttons span:hover {
  background: black;
  color: #fff;
  transition: 0.3s;
}

.main-grid .main-col1 .col1-child2-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

.main-grid .main-col1 .col1-child2-cards .card {
  width: 100%;
  background-color: #fff;
  border-radius: 10px;
  padding: 0.8rem 1rem 0.8rem 1rem;
}

.main-grid .main-col1 .col1-child2-cards .card h5 {
  color: #767982;
  font-size: 1em;
}

.main-grid .main-col1 .col1-child2-cards .card h2 {
  font-size: 1.5em;
}

.main-grid .main-col1 .col1-child2-cards .card .line {
  display: flex;
  margin-top: 1rem;
  justify-content: space-between;
}

.main-grid .main-col1 .col1-child2-cards .card .line p {
  font-weight: 600;
  color: #3bb347;
  text-align: left;
  font-size: 0.85em;
  line-height: 2.5em;
  white-space: nowrap;
}

.main-grid .main-col1 .col1-child2-cards .card .line p span {
  vertical-align: middle;
  font-size: 1.2em;
}

.main-grid .main-col1 .col1-child2-cards .card .line #down {
  color: #f23434;
}

.main-grid .main-col1 .col1-child2-cards .card .line img {
  margin-left: 0.5rem;
  max-width: 65%;
}

/* -------------- CHILD GRID ------------- */

.main-grid .main-col1 .col1-child3-grid {
  display: grid;
  grid-template-columns: 40% 1fr;
  grid-template-rows: 470px 1fr;
  margin-top: 1rem;
  gap: 1rem;
}

.main-grid .main-col1 .col1-child3-grid .child-col1 {
  grid-row: span 2;
  padding: 1rem;
  background-color: #fff;
  border-radius: 10px;
}

.main-grid .main-col1 .col1-child3-grid .child-col1 h3 {
  padding: 0.5rem 0rem 0.5rem 0rem;
}

.main-grid .main-col1 .col1-child3-grid .child-col1 h3 span {
  vertical-align: middle;
  color: #c3c5c8;
  cursor: pointer;
}

.main-grid .main-col1 .col1-child3-grid .child-col1 h3 span:hover {
  color: #000000;
  transition: 0.3s;
}

.main-grid .main-col1 .col1-child3-grid .child-col1 .schedule {
  display: flex;
  padding: 1rem 0rem 1rem 0rem;
  gap: 0.8rem;
}

.main-grid .main-col1 .col1-child3-grid .child-col1 .schedule h4 {
  line-height: 2em;
}

.main-grid .main-col1 .col1-child3-grid .child-col1 .schedule p {
  color: #767982;
}

.main-grid .main-col1 .col1-child3-grid .child-col1 .schedule span {
  color: #c3c5c8;
  line-height: 2.3em;
}

.main-grid .main-col1 .col1-child3-grid .child-col1 .schedule a {
  color: #01b9e2;
}

.main-grid .main-col1 .col1-child3-grid .child-col1 .schedule a:hover {
  text-decoration: underline;
}

.main-grid .main-col1 .col1-child3-grid .child-col1 hr {
  height: 0px;
  border: 1px solid #eeeeef;
}

/* --------- MINI GRID --------- */

.main-grid .main-col1 .col1-child3-grid .child-col2 {
  padding: 1rem;
  background-color: #fff;
  border-radius: 10px;
  height: fit-content;
}

.main-grid .main-col1 .col1-child3-grid .child-col2 h3 {
  padding: 0.5rem 0rem 0.5rem 0rem;
}

.main-grid .main-col1 .col1-child3-grid .child-col2 h3 span {
  vertical-align: middle;
  color: #c3c5c8;
  cursor: pointer;
}

.main-grid .main-col1 .col1-child3-grid .child-col2 h3 span:hover {
  color: #000000;
  transition: 0.3s;
}

.main-grid .main-col1 .col1-child3-grid .child-col2 .mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 0;
  place-items: center;
  height: 400px;
}

.main-grid .main-col1 .col1-child3-grid .child-col2 .mini-grid .meetings {
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  width: 100%;
  height: 100%;
  border: 1px solid #e1e6f0;
  cursor: pointer;
}

.main-grid .main-col1 .col1-child3-grid .child-col2 .mini-grid .meetings:hover {
  background-color: #f7f8fa;
}

.main-grid
  .main-col1
  .col1-child3-grid
  .child-col2
  .mini-grid
  .meetings:hover
  p {
  text-decoration: underline;
}

.main-grid
  .main-col1
  .col1-child3-grid
  .child-col2
  .mini-grid
  .meetings:hover
  span {
  color: #01b9e2;
  transition: 0.3s;
}

.main-grid .main-col1 .col1-child3-grid .child-col2 .mini-grid .meetings h4 {
  line-height: 2em;
  font-size: 1.3em;
}

.main-grid .main-col1 .col1-child3-grid .child-col2 .mini-grid .meetings div {
  width: 85px;
}

.main-grid .main-col1 .col1-child3-grid .child-col2 .mini-grid .meetings span {
  color: #c3c5c8;
  font-size: 2em;
}

.main-grid .main-col1 .col1-child3-grid .child-col2 .mini-grid #one {
  border-left: none;
  border-top: none;
}

.main-grid .main-col1 .col1-child3-grid .child-col2 .mini-grid #two {
  border-top: none;
}

.main-grid .main-col1 .col1-child3-grid .child-col2 .mini-grid #three {
  border-top: none;
  border-right: none;
}

.main-grid .main-col1 .col1-child3-grid .child-col2 .mini-grid #four {
  border-left: none;
}

.main-grid .main-col1 .col1-child3-grid .child-col2 .mini-grid #six {
  border-right: none;
}

.main-grid .main-col1 .col1-child3-grid .child-col2 .mini-grid #seven {
  border-left: none;
  border-bottom: none;
}

.main-grid .main-col1 .col1-child3-grid .child-col2 .mini-grid #eight {
  border-bottom: none;
}

.main-grid .main-col1 .col1-child3-grid .child-col2 .mini-grid #nine {
  border-bottom: none;
  border-right: none;
}

.main-grid .main-col1 .col1-child3-grid .child-col2 .mini-grid .meetings p {
  font-size: 0.8em;
  color: #767982;
}

/* ----------- CHILD COL-3 ------------ */

.main-grid .main-col1 .col1-child3-grid .child-col3 {
  grid-column-start: 2;
  padding: 1rem;
  background-color: #fff;
  border-radius: 10px;
}

.main-grid .main-col1 .col1-child3-grid .child-col3 h3 {
  padding: 0.5rem 0rem 0.5rem 0rem;
}

.main-grid .main-col1 .col1-child3-grid .child-col3 h3 span {
  vertical-align: middle;
  color: #c3c5c8;
  cursor: pointer;
}

.main-grid .main-col1 .col1-child3-grid .child-col3 hr {
  height: 0;
  border: 1px solid #eeeeef;
}

.main-grid .main-col1 .col1-child3-grid .child-col3 h3 span:hover {
  color: #000000;
  transition: 0.3s;
}

.main-grid .main-col1 .col1-child3-grid .child-col3 .buttons {
  padding: 1rem;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.main-grid .main-col1 .col1-child3-grid .child-col3 .buttons div {
  padding: 1rem 0rem 1rem 0rem;
  line-height: 1.5em;
}

.main-grid .main-col1 .col1-child3-grid .child-col3 .buttons div p {
  font-size: 0.9em;
  color: #767982;
}

.main-grid .main-col1 .col1-child3-grid .child-col3 .buttons .switch {
  position: relative;
  display: inline-block;
  width: 45px;
  height: 25px;
}

.main-grid .main-col1 .col1-child3-grid .child-col3 .buttons .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.main-grid .main-col1 .col1-child3-grid .child-col3 .buttons .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.main-grid .main-col1 .col1-child3-grid .child-col3 .buttons .slider:before {
  position: absolute;
  content: "";
  height: 23px;
  width: 23px;
  left: -1px;
  bottom: 1px;
  background-color: #888a91;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.main-grid
  .main-col1
  .col1-child3-grid
  .child-col3
  .buttons
  input:checked
  + .slider {
  background-color: #e1ecf3;
}

.main-grid
  .main-col1
  .col1-child3-grid
  .child-col3
  .buttons
  input:checked
  + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
  background: linear-gradient(to left, #01bde5 0%, #02508d 100%) !important;
}

.main-grid .main-col1 .col1-child3-grid .child-col3 .buttons .slider.round {
  border-radius: 34px;
}

.main-grid
  .main-col1
  .col1-child3-grid
  .child-col3
  .buttons
  .slider.round:before {
  border-radius: 50%;
}

/* --------------- MAIN COL 2 -------------- */

.main-grid .main-col2 {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.main-grid .main-col2 .card {
  position: relative;
  background-color: #fff;
  border-radius: 10px;
}

.main-grid .main-col2 .card hr {
  height: 0;
  border: 1px solid #eeeeef;
}

.main-grid .main-col2 .card .company {
  padding: 2rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-image: url(./images/bg1.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 10px 10px 0px 0px;
}

.main-grid .main-col2 .card .company h3 {
  margin-left: 1rem;
}

.main-grid .main-col2 .card .company h3 span {
  vertical-align: middle;
  color: #01b9e2;
}

.main-grid .main-col2 .card .company p {
  margin-left: 0.7rem;
  line-height: 2em;
  font-size: 0.8em;
  color: #767982;
}

.main-grid .main-col2 .card .company p span {
  vertical-align: top;
  font-size: 1.5em;
}

/* -------- PAGE2 QUERIES ------- */

.main-grid .main-col2 .card .company2 {
  padding: 2rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-image: url(./images/bg2.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 10px 10px 0px 0px;
}

.main-grid .main-col2 .card .company2 h3 {
  color: #fff;
  margin-left: 1rem;
}

.main-grid .main-col2 .card .company2 h3 span {
  vertical-align: middle;
  color: #01b9e2;
}

.main-grid .main-col2 .card .company2 p {
  margin-left: 0.7rem;
  line-height: 2em;
  font-size: 0.8em;
  color: #767982;
}

.main-grid .main-col2 .card .company2 p span {
  vertical-align: top;
  font-size: 1.5em;
}

.main-grid .main-col2 .card .details {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.main-grid .main-col2 .card .details p span {
  vertical-align: middle;
  color: #767982;
  font-size: 1.3em;
}

.main-grid .main-col2 .card .details p {
  margin-left: 1rem;
}

.main-grid .main-col2 .card .details a {
  margin-left: 1rem;
  color: #01b9e2;
  text-decoration: underline;
}

.main-grid .main-col2 .card .details a span {
  color: #767982;
  vertical-align: middle;
  font-size: 1.3em;
}

.main-grid .main-col2 .card .details button {
  margin: 1rem 0rem 0rem 1rem;
  width: fit-content;
  padding: 0.7rem 1rem 0.7rem 1rem;
  background: none;
  border: 1px solid #080d1b;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}

.main-grid .main-col2 .card .details button:hover {
  color: #fff;
  background-color: #080d1b;
  transition: 0.3s;
}

.main-grid .main-col2 .card .details button span {
  vertical-align: middle;
  font-size: 1.3em;
}

.main-grid .main-col2 .card #store {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  font-size: 3rem;
  color: #aaacb0;
  padding: 1rem;
  background-color: #f7f8fa;
  border-radius: 50%;
  cursor: pointer;
}

.main-grid .main-col2 .guide {
  margin-top: 1rem;
  padding: 2rem;
  background-color: #fff;
  border-radius: 10px;
}

.main-grid .main-col2 .guide button {
  background: none;
  outline: none;
  border: none;
  text-decoration: underline;
  color: #01b9e2;
  float: right;
  cursor: pointer;
}

.main-grid .main-col2 .guide button span {
  font-size: 1.2em;
  vertical-align: middle;
  margin-left: 0.5rem;
  color: #767982;
}

.main-grid .main-col2 .guide h3 {
  font-size: 1.2em;
  margin-bottom: 0.5rem;
}

.main-grid .main-col2 .guide p {
  color: #767982;
  font-size: 0.9em;
}

.main-grid .main-col2 .activity {
  margin-top: 1rem;
  padding: 2rem;
  background-color: #fff;
  border-radius: 10px;
  height: 100%;
}

.main-grid .main-col2 .activity #vert {
  float: right;
  font-weight: 600;
  vertical-align: middle;
  color: #767982;
  cursor: pointer;
}

.main-grid .main-col2 .activity #span {
  vertical-align: middle;
  color: #767982;
  cursor: pointer;
}

.main-grid .main-col2 .activity #span:hover {
  color: #080d1b;
  transition: 0.3s;
}

.main-grid .main-col2 .activity #vert:hover {
  color: #080d1b;
  transition: 0.3s;
}

.main-grid .main-col2 .activity ul {
  margin-left: 1rem;
  list-style-image: url(./images/dot.png);
}

.main-grid .main-col2 .activity li::before {
  position: absolute;
  content: "";
  width: 1px;
  height: calc(100% - -35px);
  background-color: #e3e8f1;
  top: 15px;
  left: -15px;
}

.main-grid .main-col2 .activity li {
  padding-left: 1em;
  font-size: 0.9em;
  white-space: break-spaces;
  font-weight: 600;
  margin-top: 1rem;
  position: relative;
}

.main-grid .main-col2 .activity li span {
  text-decoration: underline;
  cursor: pointer;
}

.main-grid .main-col2 .activity h6 {
  margin-left: 1.2em;
  font-weight: 300;
  font-size: 0.8em;
  line-height: 2.5em;
  color: #888a91;
}

/* -------------- PAGE 3 -------------- */

.page3 {
  padding: 1rem;
  background-color: #f7f8fa;
}

.page3 .child1 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page3 .organize {
  padding: 1rem;
}

.page3 .organize p {
  margin-top: 0.3rem;
  font-size: 0.9em;
  color: #888a91;
}

.page3 .organize p span {
  vertical-align: middle;
  font-size: 1.1em;
  font-weight: 600;
  color: #080d1b;
}

.page3 .buttons {
  margin-left: auto;
  margin-right: 0;
}

.page3 .buttons button {
  margin-right: 0.5rem;
}

.page3 .buttons #bttn span {
  vertical-align: bottom;
  font-size: 1.2em;
  font-weight: 600;
}

.page3 .buttons #bttn {
  background-color: #fff;
  border: none;
  outline: none;
  padding: 0.7rem 1rem 0.7rem 1rem;
  font-weight: 600;
  border-radius: 6px;
}

.page3 .buttons #bttn:hover {
  color: #fff;
  background-color: #080d1b;
  transition: 0.6s;
}

.page3 .buttons #bttn #list {
  border-left: 2px solid #bec1cc;
  color: #888a91;
  padding-left: 0.3rem;
  font-weight: 100;
}

.page3 .buttons #bttn2 span {
  vertical-align: middle;
  font-size: 1.2em;
}

.page3 .buttons #bttn2 {
  padding: 0.7rem 1rem 0.6rem 1rem;
  border: none;
  background: none;
  outline: 1px solid #080d1b;
  border-radius: 6px;
  font-weight: 600;
}

.page3 .buttons #bttn2:hover {
  color: #fff;
  background: linear-gradient(to left, #01bde5 0%, #02508d 100%) !important;
  outline: 1px solid #01b9e2;
  transition: 0.6s;
}

.page3 .buttons #bttn3 {
  padding: 0.7rem 1rem 0.7rem 1rem;
  background: linear-gradient(to left, #01bde5 0%, #02508d 100%) !important;
  border: none;
  border-radius: 6px;
  color: #fff;
  font-weight: 600;
}

.page3 .buttons #bttn3:hover {
  color: #080d1b;
  background: none;
  outline: 1px solid #080d1b;
  transition: 0.6s;
}

.page3 .buttons #bttn3 span {
  vertical-align: bottom;
  font-size: 1.2em;
}

/*---------- MAIN GRID 2 --------*/

.page3 .main-grid2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding: 0.5rem;
}

.page3 .main-grid2 .card {
  border: 8px solid #fff;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page3 .main-grid2 .card img {
  margin-top: 3rem;
}

.page3 .main-grid2 .card h4 {
  font-size: 0.9em;
  margin-top: 1rem;
}

.page3 .main-grid2 .card h5 {
  margin-top: 0.5rem;
  font-weight: 100;
  color: #888a91;
}

.page3 .main-grid2 .card p {
  margin-top: 1rem;
  font-size: 1em;
  color: #aaacb0;
}

.page3 .main-grid2 .card p span {
  vertical-align: bottom;
  font-size: 1.3em;
  color: #aaacb0;
}

.page3 .main-grid2 .card p #yellow {
  color: #fab505;
}

.page3 .main-grid2 .card div {
  display: flex;
  margin-top: 1.5rem;
  gap: 1rem;
  padding-bottom: 1.5rem;
}

.page3 .main-grid2 .card div h6 {
  font-size: 0.8em;
  font-weight: 300;
  color: #888a91;
}

.page3 .main-grid2 .card div h6 span {
  vertical-align: bottom;
  font-size: 1.2em;
}

.page3 .main-grid2 #card1 {
  /* background-image: url(./images/frame1.png); */
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top fixed;
}

.page3 .main-grid2 #card2 {
  /* background-image: url(./images/frame2.png); */
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top fixed;
}

.page3 .main-grid2 #card3 {
  /* background-image: url(./images/frame3.png); */
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top fixed;
}

.page3 .main-grid2 #card4 {
  /* background-image: url(./images/frame4.png); */
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top fixed;
}

.page3 .main-grid2 #card5 {
  /* background-image: url(./images/frame5.png); */
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top fixed;
}

.page3 .main-grid2 #card6 {
  /* background-image: url(./images/frame6.png); */
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top fixed;
}

.page3 .main-grid2 #card7 {
  /* background-image: url(./images/frame7.png); */
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top fixed;
}

.page3 .main-grid2 #card8 {
  /* background-image: url(./images/frame8.png); */
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top fixed;
}

.page3 .main-grid2 #card9 {
  /* background-image: url(./images/frame9.png); */
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top fixed;
}

.page3 .main-grid2 #card10 {
  /* background-image: url(./images/frame10.png); */
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top fixed;
}

.page3 .main-grid2 #card11 {
  /* background-image: url(./images/frame11.png); */
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top fixed;
}

.page3 .main-grid2 #card12 {
  /* background-image: url(./images/frame12.png); */
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top fixed;
}

/* ----------- PAGE 4 QUERIES -------------- */

.page3 .msg {
  display: flex;
  width: 100%;
  background-color: #fff8db;
  padding: 0.5rem 1rem 0.5rem 1rem;
}

.page3 .msg span {
  vertical-align: bottom;
  color: #888a91;
  font-size: 1.2em;
}

.page3 .msg #close {
  margin-left: auto;
  margin-right: 0;
  cursor: pointer;
}

/* ---------------- PAGE 5 --------------- */

.page5 {
  padding: 1rem;
  background-color: #f7f8fa;
}

.page5 .child1 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page5 .organize {
  padding: 1rem;
}

.page5 .organize p {
  margin-top: 0.3rem;
  font-size: 0.9em;
  color: #888a91;
}

.page5 .organize p span {
  vertical-align: middle;
  font-size: 1.1em;
  font-weight: 600;
  color: #080d1b;
}

.page5 .buttons {
  margin-left: auto;
  margin-right: 0;
}

.page5 .buttons button {
  margin-right: 0.5rem;
}

.page5 .buttons .bttn span {
  vertical-align: bottom;
  font-size: 1.2em;
  font-weight: 600;
}

.page5 .buttons .bttn {
  background-color: #fff;
  border: none;
  outline: none;
  padding: 0.7rem 1rem 0.7rem 1rem;
  font-weight: 600;
  border-radius: 5px;
}

.page5 .buttons .bttn:hover {
  color: #fff;
  background-color: #080d1b;
  transition: 0.6s;
}

.page5 .buttons .bttn #grid {
  border-right: 2px solid #bec1cc;
  color: #888a91;
  padding-right: 0.3rem;
  font-weight: 100;
}

.page5 .buttons #bttn2 span {
  vertical-align: middle;
  font-size: 1.2em;
}

.page5 .buttons #bttn2 {
  padding: 0.7rem 1rem 0.6rem 1rem;
  border: none;
  background: none;
  outline: 1px solid #080d1b;
  border-radius: 5px;
  font-weight: 600;
}

.page5 .buttons #bttn2:hover {
  color: #fff;
  background: linear-gradient(to left, #01bde5 0%, #02508d 100%) !important;
  outline: 1px solid #01b9e2;
  transition: 0.6s;
}

.page5 .buttons .bttn3 {
  padding: 0.7rem 1rem 0.7rem 1rem;
  background: linear-gradient(to left, #01bde5 0%, #02508d 100%) !important;
  border: none;
  border-radius: 5px;
  color: #fff;
  font-weight: 600;
}

.page5 .buttons .bttn3:hover {
  color: #080d1b;
  background: none;
  outline: 1px solid #080d1b;
  transition: 0.6s;
}

.page5 .buttons .bttn3 span {
  vertical-align: bottom;
  font-size: 1.2em;
}

.page5 .childd-2 {
  background-color: #fff;
  border-radius: 10px;
  display: none;
}

.page5 .childd-2 h3 {
  padding: 1rem;
}

.page5 .childd-2 hr {
  height: 0;
  border: 1px solid #eeeeef;
}

.page5 .childd-2 .input1 {
  width: 100%;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page5 .childd-2 label {
  width: 100%;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.page5 .childd-2 label h4 {
  width: 100px;
}

.page5 .childd-2 input {
  width: 70%;
  padding: 1rem 1rem;
  border-radius: 5px;
  border: none;
  background-color: #f6f7f7;
}

.page5 .childd-2 input::-webkit-calendar-picker-indicator {
  opacity: 100;
  font-size: 0.7em;
  color: #999ba1;
}

.page5 .childd-2 input:focus {
  background-color: #fff;
  outline-color: #01b9e2;
  box-shadow: 0px 0px 0px 6px rgba(59, 178, 71, 0.07);
}

.page5 .childd-2 .input2 {
  width: 100%;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page5 .childd-2 .input2 .bttns {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.page5 .childd-2 .input2 .bttns #btttn {
  padding: 0.7rem 1.5rem;
  border-radius: 5px;
  border: none;
  font-weight: 600;
  background-color: #f7f8fa;
}

.page5 .childd-2 .input2 .bttns #btttn:hover {
  background-color: #080d1b;
  color: #fff;
  transition: 0.6s;
}

.page5 .childd-2 .input2 .bttns #btttn1 {
  border: 1px solid #080d1b;
  background: none;
  border-radius: 5px;
  padding: 0.6rem 1.8rem;
  font-weight: 600;
}

.page5 .childd-2 .input2 .bttns #btttn1 span {
  vertical-align: middle;
  font-size: 1.3em;
}

.page5 .childd-2 .input2 .bttns #btttn1:hover {
  border-color: #01b9e2;
  background: linear-gradient(to left, #01bde5 0%, #02508d 100%) !important;
  transition: 0.6s;
  color: #fff;
}

.page5 .table {
  margin-top: 1rem;
}

.page5 .table1 {
  width: 100%;
  background-color: #fff;
  border-radius: 10px;
  text-align: left;
  padding: 0;
  box-shadow: 0px 0px 10px rgba(231, 231, 231, 0.6);
  white-space: nowrap;
}

.page5 .table1 th {
  padding: 1.5rem;
  background-color: #fff;
  border-radius: 10px 10px 0px 0px;
}

.page5 .table1 th input[type="checkbox"] {
  accent-color: #01b9e2;
}

.page5 .table1 th span {
  vertical-align: bottom;
  margin-left: 1rem;
  color: #999ba1;
}

.page5 .table1 td {
  padding: 1rem 1rem;
  font-size: 0.7em;
  color: #999ba1;
}

.page5 .table1 tr:hover td {
  background-color: #eeeeef;
}

.page5 .table1 .rcrds {
  padding: 0;
  font-size: 0.7em;
  color: #999ba1;
  border-radius: 0px 0px 10px 10px;
}

.page5 .table1 tr:hover .rcrds {
  background-color: #fff;
}

.page5 .table1 td span {
  vertical-align: middle;
  font-size: 1.5em;
  margin-right: 0.2rem;
}

.page5 .table1 td .options {
  position: relative;
}

.page5 .table1 td #yellow {
  color: #fab505;
}

.page5 .table1 td img {
  margin-left: 1.3rem;
}

.page5 .table1 #td-flex {
  display: flex;
  align-items: center;
}

.page5 .table1 #td-flex img {
  margin-left: 0.5rem;
}

.page5 .table1 #td-flex div {
  margin-left: 0.5rem;
}

.page5 .table1 #td-flex div h4 {
  font-size: 1.2em;
  color: #080d1b;
}

.page5 .table1 #td-flex div h5 {
  color: #999ba1;
  font-weight: 100;
  font-size: 1em;
  line-height: 2em;
}

.page5 .table1 .country-flag {
  padding: 0rem 3rem;
}

.page5 .table1 #attendees {
  text-decoration: underline;
  cursor: pointer;
}

.page5 .table1 #attendees:hover {
  color: #080d1b;
}

.page5 .table1 #bttns span {
  cursor: pointer;
  padding: 0.3rem 0.3rem 0.2rem 0.3rem;
  border-radius: 50%;
}

.page5 .table1 #bttns span:hover {
  color: #fff;
  background-color: #080d1b;
  transition: 0.3s;
}

.page5 .table1 td input[type="checkbox"] {
  accent-color: #01b9e2;
}

.page5 .table1 td #star {
  vertical-align: bottom;
  margin-left: 1rem;
  color: #999ba1;
  font-size: 1.9em;
}

.page5 .table1 tr:nth-child(even) {
  background-color: #f7f8fa;
}

.page5 .table hr {
  height: 0;
  border: 1px solid #eeeeef;
}

.page5 .table1 .child-row {
  position: relative;
  background-color: #fff;
  display: none;
  overflow: hidden;
}

.page5 .table1 .child-row td {
  background-color: #fff;
}

.page5 .table1 .child-row:hover td {
  background-color: #fff;
}

.page5 .table1 .child-row:before {
  position: absolute;
  left: 110px;
  content: "";
  width: 1px;
  height: 100%;
  background-color: #d4d5d8;
}

.page5 .table1 .child-row h4 {
  color: #080d1b;
  font-size: 0.85;
}

.page5 .table1 .child-row p {
  font-size: 1em;
}

.page5 .table1 .child-row #child-data {
  display: flex;
  align-items: center;
  /* height: 65px; */
  gap: 0.5rem;
}

.page5 .table1 .child-row #child-data .img-txt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 6.5rem;
}

.page5 .table1 .child-row #child-data .img-txt p {
  white-space: normal;
}

.page5 .table1 .child-row #child-data button {
  margin-left: 1.5rem;
  background: none;
  border: none;
  outline: none;
  color: #01b9e2;
  text-decoration: underline;
  cursor: pointer;
}

.page5 .table1 .child-row #child-data:before {
  position: absolute;
  left: 110px;
  content: "";
  width: 25px;
  height: 1px;
  background-color: #d4d5d8;
}

.page5 .table1 #book {
  width: 220px;
  background: none;
  border: 1px solid #080d1b;
  padding: 0.5rem 1rem 0.5rem 1rem;
  border-radius: 5px;
  font-weight: 600;
  cursor: pointer;
}

.page5 .table1 #book:hover {
  color: #fff;
  background: linear-gradient(to left, #01bde5 0%, #02508d 100%) !important;
  border-color: #01b9e2;
  transition: 0.6s;
}

.page5 .records {
  display: flex;
  justify-content: space-between;
  padding: 1.5rem;
  background-color: #fff;
  border-radius: 0px 0px 10px 10px;
  font-size: 1.3em;
  color: #525560;
  overflow-x: auto;
}

.page5 .records div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.page5 .records #arrow {
  margin-left: 0.2rem;
  padding: 0.3rem;
  border-radius: 50%;
  cursor: pointer;
}

.page5 .records #arrow:hover {
  background-color: #eeeeef;
  transition: 0.3s;
}

.page5 .records div #pages {
  background-color: #eeeeef;
  border-radius: 5px;
  padding: 0.2rem 0.3rem 0rem 0.3rem;
  cursor: pointer;
}

.page5 .records span {
  vertical-align: middle;
}

.page5 .table1 tr td .options {
  position: relative;
}

.page5 .info {
  right: 40px;
  top: 320px;
  width: 170px;
  position: absolute;
  background-color: #fff;
  border-radius: 8px;
  z-index: 100;
  box-shadow: 0px 0px 30px #e7e7e7;
  display: none;
}

.page5 .info p {
  padding: 1rem 1rem;
  font-size: 0.9em;
  font-weight: 600;
  color: #080d1b;
}

.page5 .info a:hover p {
  background-color: #f1f1f2;
}

/*---------------- POPUP1 ---------------- */

.page5 .modal1 {
  width: 70%;
  margin-left: auto;
  margin-right: 0;
  border: none;
  height: 100%;
  max-height: 100%;
}

.page5 .modal1 .popup hr {
  height: 0px;
  border: 1px solid #eeeeef;
}

.page5 .modal1 .popup .heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 1.5rem;
}

.page5 .modal1 .popup .heading .child-1 p {
  color: #999ba1;
  font-size: 0.9em;
}

.page5 .modal1 .popup .heading .child-1 h3 {
  margin-top: 0.3rem;
}

.page5 .modal1 .popup .heading .child-2 #bttn-close {
  border: none;
  background-color: #f7f8fa;
  font-weight: 600;
  padding: 0.7rem 1.5rem;
  border-radius: 5px;
}

.page5 .modal1 .popup .heading .child-2 #bttn-close:hover {
  color: #fff;
  background-color: #080d1b;
  transition: 0.6s;
}

.page5 .modal1 .popup .heading .child-2 #bttn-open {
  border: 1px solid #01b9e2;
  background: none;
  font-weight: 600;
  color: #01b9e2;
  padding: 0.7rem 1.5rem;
  border-radius: 5px;
}

.page5 .modal1 .popup .heading .child-2 #bttn-open:hover {
  color: #fff;
  background: linear-gradient(to left, #01bde5 0%, #02508d 100%) !important;
  transition: 0.6s;
}

.page5 .modal1 .popup .heading .child-2 #bttn-open span {
  vertical-align: top;
  font-size: 1.2em;
}

.page5 .modal1 .popup .buttons {
  display: flex;
  gap: 2.5rem;
  padding: 0.6rem 2.5rem;
  color: #999ba1;
  font-size: 1em;
}

.page5 .modal1 .popup .buttons h5 {
  font-weight: 100;
}

.page5 .modal1 .popup .buttons #black {
  color: #080d1b;
  font-weight: 600;
  border-bottom: 2px solid #080d1b;
}

.page5 .modal1 .popup .form {
  padding: 1rem 2rem;
}

.page5 .modal1 .popup .form .message {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: #fff8db;
  padding: 0.7rem 1rem;
  border-radius: 6px;
}

.page5 .modal1 .popup .form .message #info-logo {
  vertical-align: middle;
  color: #999ba1;
  font-size: 1.3em;
}

.page5 .modal1 .popup .form .message p {
  font-size: 0.8em;
  font-weight: 600;
}

.page5 .modal1 .popup .form .message .button2 {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.page5 .modal1 .popup .form .message .button2 #bttn1 {
  background: none;
  border: none;
  outline: none;
  text-decoration: underline;
  cursor: pointer;
}

.page5 .modal1 .popup .form .message .button2 #bttn2 {
  background: none;
  border: none;
  outline: none;
}

.page5 .modal1 .popup .form .message .button2 #bttn2 span {
  vertical-align: bottom;
  font-size: 1.5em;
  cursor: pointer;
}

.page5 .modal1 .popup .form .form1 {
  margin: 2rem auto;
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page5 .modal1 .popup .form .form1 .name h4 span {
  color: #f23434;
}

.page5 .modal1 .popup .form .form1 .name p {
  color: #999ba1;
  font-size: 0.8em;
  margin-top: 0.3rem;
}

.page5 .modal1 .popup .form .form1 .field {
  width: 65%;
}

.page5 .modal1 .popup .form .form1 .field input {
  background-color: #f6f7f7;
  border-radius: 5px;
  border: none;
  padding: 1rem 0.5rem;
  width: 100%;
  font-weight: 600;
}

.page5 .modal1 .popup .form .form1 .field select {
  background-color: #f6f7f7;
  border-radius: 5px;
  border: none;
  padding: 1rem 0.5rem;
  width: 100%;
  font-weight: 600;
}

.page5 .modal1 .popup .form .form1 .field input::placeholder {
  font-weight: 100;
}

.page5 .modal1 .popup .form .form1 .field select::placeholder {
  font-weight: 100;
}

.page5 .modal1 .popup .form .form1 .field input:focus {
  outline-color: #01b9e2;
  box-shadow: 0px 0px 0px 6px rgba(59, 178, 71, 0.07);
  background-color: #fff;
}

.page5 .modal1 .popup .form .form1 .field select:focus {
  outline-color: #01b9e2;
  box-shadow: 0px 0px 0px 6px rgba(59, 178, 71, 0.07);
  background-color: #fff;
}

.page5 .modal1 .popup .form .form1 .field textarea {
  width: 100%;
  border: none;
  border-radius: 5px;
  background-color: #f6f7f7;
  padding: 0.5rem;
}

.page5 .modal1 .popup .form .form1 .field textarea:focus {
  outline-color: #01b9e2;
  box-shadow: 0px 0px 0px 6px rgba(59, 178, 71, 0.07);
  background-color: #fff;
}

.page5 .modal1 #fields {
  color: #999ba1;
  margin-top: 2rem;
}

/*-------------- FORM2 ----------------- */

.page5 .modal1 .popup .form .form2 {
  margin: 2rem auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.page5 .modal1 .popup .form .form2 .name {
  width: 20%;
}

.page5 .modal1 .popup .form .form2 .name h4 span {
  color: #f23434;
}

.page5 .modal1 .popup .form .form2 .name p {
  color: #999ba1;
  font-size: 0.8em;
  margin-top: 0.3rem;
}

.page5 .modal1 .popup .form .form2 .field {
  width: 50%;
}

.page5 .modal1 .popup .form .form2 .field input {
  background-color: #f6f7f7;
  border-radius: 5px;
  border: none;
  padding: 1rem 0.5rem;
  width: 100%;
  font-weight: 600;
}

.page5 .modal1 .popup .form .form2 .field input::placeholder {
  font-weight: 100;
}

.page5
  .modal1
  .popup
  .form
  .form2
  .field
  #countries::-webkit-calendar-picker-indicator {
  opacity: 100;
  font-size: 0.8em;
  color: #999ba1;
}

.page5 .modal1 .popup .form .form2 .field input:focus {
  outline-color: #01b9e2;
  box-shadow: 0px 0px 0px 6px rgba(59, 178, 71, 0.07);
  background-color: #fff;
}

.page5 .modal1 .popup .form .form2 .field textarea {
  width: 100%;
  border: none;
  border-radius: 5px;
  background-color: #f6f7f7;
  padding: 0.5rem;
}

.page5 .modal1 .popup .form .form2 .field textarea:focus {
  outline-color: #01b9e2;
  box-shadow: 0px 0px 0px 6px rgba(59, 178, 71, 0.07);
  background-color: #fff;
}

.page5 .modal1 .popup .form .form2 .name h5 {
  font-size: 1em;
  font-weight: 100;
}

.page5 .modal1 .popup .form .form2 .switch {
  position: relative;
  display: inline-block;
  width: 35px;
  height: 20px;
}

.page5 .modal1 .popup .form .form2 .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.page5 .modal1 .popup .form .form2 .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e5e6e7;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.page5 .modal1 .popup .form .form2 .slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: -1px;
  bottom: 1px;
  background-color: #888a91;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.page5 .modal1 .popup .form .form2 input:checked + .slider {
  background-color: #e1ecf3;
}

.page5 .modal1 .popup .form .form2 input:checked + .slider:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
  background: linear-gradient(to left, #01bde5 0%, #02508d 100%) !important;
}

.page5 .modal1 .popup .form .form2 .slider.round {
  border-radius: 34px;
}

.page5 .modal1 .popup .form .form2 .slider.round:before {
  border-radius: 50%;
}

/*------------------- FORM3 ----------------------*/

.page5 .modal1 .popup .form .multi-forms {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  gap: 3rem;
}

.page5 .modal1 .popup .form .multi-forms .multi-form1 {
  width: 100%;
}

.page5 .modal1 .popup .form .multi-forms .multi-form2 {
  width: 100%;
}

.page5 .modal1 .popup .form .multi-forms .form3 {
  margin: 2rem auto;
  width: 100%;
  display: flex;
  align-items: center;
  padding-left: 1rem;
  padding-right: 1rem;
  justify-content: space-between;
}

.page5 .modal1 .popup .form .multi-forms .form3 .name h4 {
  color: #999ba1;
  font-weight: 100;
}

.page5 .modal1 .popup .form .multi-forms .form3 .name {
  width: 50%;
}

.page5 .modal1 .popup .form .multi-forms .form3 .name .bolder {
  color: #080d1b;
  font-weight: 600;
}

.page5 .modal1 .popup .form .multi-forms .form3 label {
  align-items: center;
  font-size: 0.9em;
}

.page5 .modal1 .popup .form .multi-forms .form3 input[type="checkbox"] {
  accent-color: #01b9e2;
  vertical-align: middle;
}

.page5
  .modal1
  .popup
  .form
  .multi-forms
  .form3
  input[type="checkbox"]:checked
  + label {
  font-weight: 600;
}

.page5 .modal1 .popup .form .form4 {
  margin-top: 1rem;
}

.page5 .modal1 .popup .form .form4 .table2 {
  padding: 1rem;
  width: 100%;
  text-align: left;
}

.page5 .modal1 .popup .form .form4 .table2 thead tr th {
  color: #999ba1;
  font-size: 0.9em;
}

.page5 .modal1 .popup .form .form4 .table2 tbody tr td {
  padding: 1.5rem 0rem;
  border-bottom: 2px solid #eeeeef;
}

.page5 .modal1 .popup .form .form4 .table2 tbody tr td .opt {
  font-weight: 900;
  padding: 0.1rem;
  border-radius: 50%;
  color: #999ba1;
}

.page5 .modal1 .popup .form .form4 .table2 tbody tr td .opt:hover {
  background-color: #e5e6e7;
  color: #080d1b;
}

.page5 .modal1 .popup .form .form4 .table2 tbody tr td .duplicate {
  right: 40px;
  top: 720px;
  width: 170px;
  position: absolute;
  background-color: #fff;
  border-radius: 8px;
  z-index: 100;
  box-shadow: 0px 0px 30px #e7e7e7;
  display: none;
}

.page5 .modal1 .popup .form .form4 .table2 tbody tr td .duplicate div {
  border-radius: 8px;
}

.page5 .modal1 .popup .form .form4 .table2 tbody tr td .duplicate p {
  padding: 1rem 1rem;
  font-size: 0.9em;
  font-weight: 600;
  color: #080d1b;
}

.page5 .modal1 .popup .form .form4 .table2 tbody tr td .duplicate p:hover {
  background-color: #f1f1f2;
}

.page5 .modal1 .popup .form .form4 .table2 tbody tr td input[type="date"],
input[type="time"] {
  width: 60%;
  padding: 0.5rem 0.5rem;
  border: 1px solid #aaacb0;
  border-radius: 5px;
  position: relative;
}

.page5
  .modal1
  .popup
  .form
  .form4
  .table2
  tbody
  tr
  td
  input[type="time"]:focus {
  border-color: #01b9e2;
  outline: 1px solid #01b9e2;
  box-shadow: 0px 0px 0px 6px rgba(59, 178, 71, 0.07);
}

.page5
  .modal1
  .popup
  .form
  .form4
  .table2
  tbody
  tr
  td
  input[type="date"]:focus {
  border-color: #01b9e2;
  outline: 1px solid #01b9e2;
  box-shadow: 0px 0px 0px 6px rgba(59, 178, 71, 0.07);
}

.page5 .modal1 .popup .form .form4 .table2 tbody tr td input[type="checkbox"] {
  accent-color: #01b9e2;
  vertical-align: middle;
}

.page5 .modal1 .popup .form .form4 .table2 tbody tr td label {
  font-size: 0.8em;
}

.page5
  .modal1
  .popup
  .form
  .form4
  .table2
  tbody
  tr
  td
  input[type="checkbox"]:checked
  + label {
  font-weight: 600;
}

.page5 .modal1 .popup .form .form4 .table2 tbody tr td button {
  padding: 12rem 1rem;
  border-radius: 10px;
  border: none;
  position: absolute;
  top: 270px;
  right: 150px;
  font-weight: 600;
  cursor: pointer;
}

.page5 .modal1 .popup .form .form4 .table2 tbody tr td button:hover {
  background: linear-gradient(to left, #01bde5 0%, #02508d 100%) !important;
  color: #fff;
  transition: 0.6s;
  outline: 1px solid #080d1b;
}

.dtpicker input {
  background-color: #f6f7f7;
  border-radius: 5px;
  border: none;
  padding: 1rem 0.5rem;
  width: 100%;
  font-weight: 600;
  color: black;
}

.formPageBack {
  background-color: white;
}

.period-control__button {
  padding: 0 !important;
  position: unset !important;
}

.open-bar .logoBig {
  /* content: url('../assets/images/new\ logo.png') !important; */
}

.picker button:hover {
  background-color: transparent !important;
  outline: none !important;
  color: #000000 !important;
}

.picker button {
  color: #000000 !important;
}

.dtpicker .ngx-picker button {
  position: absolute;
  right: 0.6em;
  top: 0.7em;
}

.dtpicker .calendar {
  border: 1px solid #01b9e2;
  position: absolute;
  z-index: 1000000;
  background: white;
  border-radius: 7px;
  /* padding-left: 0.3em; */
  padding: 0.3em 0em 0.3em 0.3em;
}

.dtpicker .calendar .calendar--previous-and-next {
  display: flex;
}

.dtpicker .calendar .calendar--previous-and-next:hover {
  background-color: transparent !important;
  border: none !important;
}

.dtpicker .calendar .calendar--days-select {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 0.2em;
}

.dtpicker .calendar .calendar--days-of-week {
  display: flex;
  justify-content: space-evenly;
}

.dtpicker .calendar button {
  position: unset !important;
  background: linear-gradient(to left, #01bde5 0%, #02508d 100%) !important;
  color: white;
  padding: 0.4rem 0.6rem;
  border-radius: 10px;
  width: 49%;
}

.dtpicker .time--values {
  display: flex;
  justify-content: space-evenly;
  cursor: pointer;
}

.dtpicker .calendar .time-picker button {
  position: unset !important;
  background: linear-gradient(to left, #01bde5 0%, #02508d 100%) !important;
  color: white;
  padding: 0.4rem 0.6rem;
  width: 49%;
  border-radius: 10px;
}

.dtpicker .time--periods {
  width: 100%;
}

.picker div {
  border-bottom: none !important;
}

.picker button:hover span {
  color: #3bb347 !important;
}

.page5 .modal1 .popup .form .form4 .table2 tbody tr td button:hover span {
  color: black;
  transition: 0.6s;
}

.page5 .modal1 .popup .form .form4 .table2 tbody tr td button span {
  color: #01b9e2;
  font-size: 1.5em;
}

.page5 .modal1 .popup .form #add-row {
  background: none;
  border: 1px solid #080d1b;
  margin-left: 1rem;
  border-radius: 5px;
  padding: 0.5rem 1.5rem;
  font-weight: 600;
  cursor: pointer;
}

.page5 .modal1 .popup .form #add-row:hover {
  background-color: #080d1b;
  color: #fff;
  transition: 0.6s;
}

.page5 .modal1 .popup .form #add-row span {
  vertical-align: middle;
  font-size: 1.4em;
}

/* -------------- FORM 5 ---------------*/

.page5 .modal1 .popup .form .form5 {
  margin-top: 2rem;
  margin-left: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 2rem;
  border-bottom: 2px solid #eeeeef;
}

.page5 .modal1 .popup .form .form5 .meet {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 30%;
  padding-right: 1rem;
}

.page5 .modal1 .popup .form .form5 .meet span {
  font-weight: 600;
  color: #999ba1;
  border-radius: 50%;
  padding: 0.2rem;
  cursor: pointer;
}

.page5 .modal1 .popup .form .form5 .meet span:hover {
  background-color: #e5e6e7;
  color: #080d1b;
}

.page5 .modal1 .popup .form .form5 .location p {
  color: #999ba1;
  font-size: 0.8em;
  margin-top: 0.3rem;
}

.page5 .modal1 .popup .form .form5 .location .pop2 {
  position: relative;
}

.page5 .modal1 .popup .form .form5 .location .pop {
  position: absolute;
  padding: 1rem;
  width: 190px;
  top: 10px;
  left: 400px;
  box-shadow: 0px 0px 30px #e7e7e7;
  border-radius: 5px;
  visibility: hidden;
}

.page5 .modal1 .popup .form .form5 .location .pop:after {
  content: "";
  position: absolute;
  top: 12px;
  left: -20px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent #fff transparent transparent;
}

.page5 .modal1 .popup .form .form5 .location .pop.show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
  background-color: #fff;
}

.page5 .modal1 .popup .form .form5 .location .pop h4 {
  font-size: 0.9em;
  margin-bottom: 0.5rem;
}

.page5 .modal1 .popup .form .form5 .location .pop p {
  color: #888a91;
  font-size: 0.8em;
  font-weight: 100;
  line-height: 1.2rem;
}

.page5 .modal1 .popup .form .form5 .location p a {
  color: #01b9e2;
  text-decoration: underline;
}

.page5 .modal1 .popup .form .bttn {
  margin-top: 1rem;
  margin-bottom: 2rem;
}

.page5 .modal1 .popup .form .form5 .switch {
  position: relative;
  display: inline-block;
  width: 35px;
  height: 20px;
}

.page5 .modal1 .popup .form .form5 .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.page5 .modal1 .popup .form .form5 .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e5e6e7;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.page5 .modal1 .popup .form .form5 .slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: -1px;
  bottom: 1px;
  background-color: #888a91;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.page5 .modal1 .popup .form .form5 input:checked + .slider {
  background-color: #e1ecf3;
}

.page5 .modal1 .popup .form .form5 input:checked + .slider:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
  background: linear-gradient(to left, #01bde5 0%, #02508d 100%) !important;
}

.page5 .modal1 .popup .form .form5 .slider.round {
  border-radius: 34px;
}

.page5 .modal1 .popup .form .form5 .slider.round:before {
  border-radius: 50%;
}

/* -------- POPUP7 ------- */

.modal2 {
  margin: 5rem auto;
  border: none;
  border-radius: 5px;
  width: 46%;
}

.modal2 .bttn1 {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 1.1em;
  color: #525560;
}

.modal2 .created {
  text-align: center;
}

.modal2 .created span {
  font-size: 3em;
  margin-top: 3rem;
  color: #01b9e2;
}

.modal2 .created h3 {
  margin-top: 1rem;
}

.modal2 .created p {
  color: #999ba1;
  font-size: 0.9em;
  margin-top: 0.5rem;
}

.modal2 .created hr {
  margin-top: 2rem;
  height: 0;
  border: 1px solid #eeeeef;
}

.modal2 .bttns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
}

.modal2 .bttns .bttn2 {
  border: none;
  padding: 0.7rem 2rem;
  border-radius: 5px;
  font-weight: 600;
}

.modal2 .bttns .bttn2:hover {
  background: linear-gradient(to left, #01bde5 0%, #02508d 100%) !important;
  color: #fff;
  transition: 0.6s;
}

.modal2 .bttns #bttn3 {
  border: 1px solid #080d1b;
  background: none;
  border-radius: 5px;
  padding: 0.6rem 1rem;
  font-size: 0.75em;
  font-weight: 600;
}

.modal2 .bttns #bttn3:hover {
  background-color: #080d1b;
  color: #fff;
  transition: 0.6s;
}

.modal2 .bttns #bttn3 span {
  vertical-align: middle;
  font-size: 1.2em;
  font-weight: 600;
}
.modal4 {
  margin: 5rem auto;
  border: none;
  border-radius: 5px;
  width: 30%;
  height: 30%;
}

.modal4 .bttn1 {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 1.1em;
  color: #525560;
}

.modal4 .created {
  text-align: center;
}

.modal4 .created span {
  font-size: 3em;
  margin-top: 3rem;
  color: #01b9e2;
}

.modal4 .created h3 {
  margin-top: 1rem;
}

.modal4 .created p {
  color: #999ba1;
  font-size: 0.9em;
  margin-top: 0.5rem;
}

.modal4 .created hr {
  margin-top: 2rem;
  height: 0;
  border: 1px solid #eeeeef;
}

.modal4 .bttns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
}

.modal4 .bttns .bttn2 {
  border: none;
  padding: 0.7rem 2rem;
  border-radius: 5px;
  font-weight: 600;
}

.modal4 .bttns .bttn2:hover {
  background: linear-gradient(to left, #01bde5 0%, #02508d 100%) !important;
  color: #fff;
  transition: 0.6s;
}

.modal4 .bttns #bttn3 {
  border: 1px solid #080d1b;
  background: none;
  border-radius: 5px;
  padding: 0.6rem 1rem;
  font-size: 0.75em;
  font-weight: 600;
}

.modal4 .bttns #bttn3:hover {
  background-color: #080d1b;
  color: #fff;
  transition: 0.6s;
}

.modal4 .bttns #bttn3 span {
  vertical-align: middle;
  font-size: 1.2em;
  font-weight: 600;
}

/*------------- FILTER POPUP ----------------*/

.page5 .modal1 .formm {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.page5 .modal1 .formm label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2rem;
  font-weight: 600;
}

.page5 .modal1 .formm label h5 {
  font-size: 1em;
}

.page5 .modal1 .formm label h5 span {
  vertical-align: top;
  font-size: 1.2em;
  color: #999ba1;
  cursor: pointer;
}

.page5 .modal1 .formm label h5 span:hover {
  color: #01b9e2;
}

.page5 .modal1 .formm label .pop1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: relative;
}

.page5 .modal1 .formm label .pop {
  position: absolute;
  padding: 1rem;
  width: 190px;
  top: 0;
  left: 90px;
  box-shadow: 0px 0px 30px #e7e7e7;
  border-radius: 5px;
  visibility: hidden;
}

.page5 .modal1 .formm label .pop:after {
  content: "";
  position: absolute;
  top: 12px;
  left: -20px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent #fff transparent transparent;
}

.page5 .modal1 .formm label .pop.show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
  background-color: #fff;
}

.page5 .modal1 .formm label .pop h4 {
  font-size: 0.8em;
  margin-bottom: 0.5rem;
}

.page5 .modal1 .formm label .pop p {
  color: #888a91;
  font-size: 0.7em;
  font-weight: 100;
  line-height: 1.2rem;
}

.page5 .modal1 .formm label input {
  width: 70%;
  padding: 1rem 1rem;
  border-radius: 5px;
  border: none;
  background-color: #f6f7f7;
}

.page5 .modal1 .formm label input::-webkit-calendar-picker-indicator {
  opacity: 100;
  font-size: 0.7em;
  color: #999ba1;
}

.page5 .modal1 .formm label input:focus {
  background-color: #fff;
  outline-color: #01b9e2;
  box-shadow: 0px 0px 0px 6px rgba(59, 178, 71, 0.07);
}

#booktext {
  position: relative;
  display: flex;
  border-radius: 5px;
  margin-top: 1rem;
  width: 100%;
  padding: 1rem 1rem;
  border: none;
  background-color: #f6f7f7;
}

#booktext:focus {
  background-color: #fff;
  outline-color: #01b9e2;
  box-shadow: 0px 0px 0px 6px rgba(59, 178, 71, 0.07);
}

/*---------- PAGE 6 ----------*/

.page5 .child2 {
  background-color: #fff;
  border-radius: 10px;
  padding: 1rem;
  /* background-image: url(./images/company-bg.png); */
  background-repeat: no-repeat;
  background-position: top;
  background-size: contain;
  border: 10px solid #fff;
}

.page5 .child2 .intro {
  display: flex;
  align-items: flex-end;
  margin-left: 2rem;
}

.page5 .child2 .intro div {
  margin-left: 1rem;
}

.page5 .child2 .intro div img {
  vertical-align: middle;
}

.page5 .child2 .intro div h3 span {
  vertical-align: middle;
  color: #999ba1;
}

.page5 .child2 .intro div h3 #num {
  font-size: 0.9em;
  font-weight: 100;
}

.page5 .child2 .intro div p {
  font-size: 0.8em;
  color: #999ba1;
  margin-top: 0.5rem;
}

.page5 .child2 .intro div p span {
  vertical-align: top;
  font-size: 1.2em;
}

.page5 .table .search {
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page5 .table .search h3 {
  white-space: nowrap;
  font-size: 1.8em;
  color: #080d1b;
}

.page5 .table .search .flex {
  width: 100%;
  display: flex;
  gap: 1rem;
  justify-content: end;
  align-items: center;
}

.page5 .table .search .searcher {
  width: 35%;
  display: flex;
  align-items: center;
  background-color: #f6f7f7;
  border-radius: 6px;
}

.page5 .table .search .searcher input {
  background: none;
  outline: none;
  border: none;
  width: 100%;
  padding: 0.7rem;
}

.page5 .table .search .searcher span {
  font-size: 1.8em;
  color: #888a91;
  margin-right: 0.5rem;
}

.page5 .table .search .searcher span:hover {
  color: #01b9e2;
  transition: 0.3s;
  cursor: pointer;
}

.page5 .table .search .flex #bttn {
  padding: 0.7rem 1rem 0.7rem 1rem;
  background: linear-gradient(to left, #01bde5 0%, #02508d 100%) !important;
  border: none;
  border-radius: 6px;
  color: #fff;
  font-weight: 600;
}

.page5 .table .search .flex #bttn span {
  vertical-align: bottom;
  font-size: 1.2em;
}

.page5 .table .search .flex #bttn:hover {
  color: #080d1b;
  background: none;
  outline: 1px solid #080d1b;
  transition: 0.6s;
}

.page5 .table .search2 {
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page5 .table .search2 h3 {
  white-space: nowrap;
  font-size: 1.8em;
  color: #080d1b;
}

.page5 .table .search2 .flex {
  width: 100%;
  display: flex;
  gap: 1rem;
  justify-content: end;
  align-items: center;
}

.page5 .table .search2 .searcher {
  width: 35%;
  display: flex;
  align-items: center;
  background-color: #f6f7f7;
  border-radius: 6px;
}

.page5 .table .search2 .searcher input {
  background: none;
  outline: none;
  border: none;
  width: 100%;
  padding: 0.7rem;
}

.page5 .table .search2 .searcher span {
  font-size: 1.8em;
  color: #888a91;
  margin-right: 0.5rem;
}

.page5 .table .search2 .searcher span:hover {
  color: #01b9e2;
  transition: 0.3s;
  cursor: pointer;
}

.page5 .table .search2 .flex #bttn {
  padding: 0.7rem 1rem 0.7rem 1rem;
  background: linear-gradient(to left, #01bde5 0%, #02508d 100%) !important;
  border: none;
  border-radius: 6px;
  color: #fff;
  font-weight: 600;
}

.page5 .table .search2 .flex #bttn span {
  vertical-align: bottom;
  font-size: 1.2em;
}

.page5 .table .search2 .flex #bttn:hover {
  color: #080d1b;
  background: none;
  outline: 1px solid #080d1b;
  transition: 0.6s;
}

/*------------------- PAGE-7 --------------------*/

.grid2 {
  display: grid;
  grid-template-columns: 65% 1fr;
  margin: 1rem;
  gap: 1rem;
}

.grid2 .grid-col-1 {
  grid-column: span 2;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  padding: 4rem 4rem 2rem 4rem;
}

.grid2 .grid-col-1 .conference .heading h1 {
  font-size: 3em;
}

.grid2 .grid-col-1 .conference .heading h3 {
  font-size: 1.5em;
  font-weight: 100;
}

.grid2 .grid-col-1 .conference .heading h3 span {
  font-weight: 600;
}

.grid2 .grid-col-1 .conference .heading p {
  margin-top: 2rem;
  color: #898c93;
  font-size: 0.9em;
  line-height: 1.5rem;
}

.grid2 .grid-col-1 .conference .imgs {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.grid2 .grid-col-1 .conference .imgs #more {
  padding: 0.85rem 0.9rem;
  border-radius: 14px;
  border: 1px solid #e5e6e7;
  background: none;
  color: #767982;
}

.grid2 .grid-col-1 .conference .imgs #more span {
  font-size: 1.5em;
  font-weight: 600;
  color: #555862;
}

.grid2 .grid-col-1 .map {
  width: 30%;
}

.grid2 .grid-col-2 {
  background-color: #fff;
  padding: 1rem 0rem;
  border-radius: 10px;
}

.grid2 .grid-col-2 h4 {
  margin-left: 1rem;
  font-size: 1.3em;
  font-weight: 100;
}

.grid2 .grid-col-2 h4 span {
  font-weight: 600;
}

.grid2 .grid-col-2 .dates {
  margin-top: 1.5rem;
  padding-left: 2rem;
  border-bottom: 2px solid #e3e8f1;
  display: flex;
  text-align: center;
}

.grid2 .grid-col-2 .dates .date {
  padding: 0.6rem 1rem;
}

.grid2 .grid-col-2 .dates .date h5 {
  color: #767982;
  font-weight: 100;
  font-size: 1em;
}

.grid2 .grid-col-2 .dates .date p {
  font-size: 0.8em;
  color: #999ba1;
  margin-top: 0.2rem;
}

.grid2 .grid-col-2 .dates .date:focus {
  border-bottom: 2px solid #080d1b;
}

.grid2 .grid-col-2 .dates .date:focus h5 {
  color: #080d1b;
  font-weight: 900;
}

.grid2 .grid-col-2 .dates .date:focus p {
  color: #01b9e2;
  font-weight: 600;
}

.grid2 .grid-col-2 .upcoming hr {
  height: 0;
  border: 1px solid #e3e8f1;
}

.grid2 .grid-col-2 .upcoming .upcoming1 {
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.grid2 .grid-col-2 .upcoming .upcoming1:hover {
  background-color: #f7f8fa;
}

.grid2 .grid-col-2 .upcoming .upcoming1 .text1 p {
  color: #767982;
  font-size: 0.9em;
  margin-top: 0.5rem;
}

.grid2 .grid-col-2 .upcoming .upcoming1 .text1 p span {
  vertical-align: middle;
  font-size: 1.3em;
}

.grid2 .grid-col-2 .upcoming .upcoming1 .bttn {
  background: none;
  border: 1px solid #080d1b;
  border-radius: 5px;
  padding: 0.5rem 1.5rem;
  font-weight: 600;
}

.grid2 .grid-col-2 .upcoming .upcoming1 .bttn:hover {
  background-color: #080d1b;
  color: #fff;
  transition: 0.6s;
}

.grid2 .grid-col-2 .upcoming .upcoming1 .bttn span {
  vertical-align: middle;
  font-size: 1.1em;
  font-weight: 600;
}

.grid2 .grid-col-3 {
  background-color: #fff;
  border-radius: 10px;
  padding: 2rem;
}

.grid2 .grid-col-3 .activity #vert {
  float: right;
  font-weight: 600;
  vertical-align: middle;
  color: #767982;
  cursor: pointer;
}

.grid2 .grid-col-3 .activity #span {
  vertical-align: middle;
  color: #767982;
  cursor: pointer;
}

.grid2 .grid-col-3 .activity #span:hover {
  color: #080d1b;
  transition: 0.3s;
}

.grid2 .grid-col-3 .activity #vert:hover {
  color: #080d1b;
  transition: 0.3s;
}

.grid2 .grid-col-3 .activity ul {
  margin-left: 1rem;
  list-style-image: url(./images/dot.png);
}

.grid2 .grid-col-3 .activity li::before {
  position: absolute;
  content: "";
  width: 1px;
  height: calc(100% - -35px);
  background-color: #e3e8f1;
  top: 15px;
  left: -15px;
}

.grid2 .grid-col-3 .activity li {
  position: relative;
  padding-left: 1em;
  font-size: 0.9em;
  white-space: nowrap;
  font-weight: 600;
  margin-top: 1rem;
}

.grid2 .grid-col-3 .activity h6 {
  margin-left: 1.2em;
  font-weight: 300;
  font-size: 0.8em;
  line-height: 2.5em;
  color: #888a91;
}

/*---------- GRID-3----------------*/

.grid3 {
  margin: 1rem;
  display: grid;
  grid-template-columns: 25% 1fr;
  gap: 1rem;
}

.grid3 .grid-col-1 {
  background-color: #fff;
  border-radius: 10px;
}

.grid3 .grid-col-1 .inbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 1rem;
}

.grid3 .grid-col-1 .inbox h4 {
  font-size: 1.2em;
  letter-spacing: -0.02em;
}

.grid3 .grid-col-1 .searcher {
  background-color: #f6f7f7;
  border-radius: 5px;
  margin: 1rem;
}

.grid3 .grid-col-1 .searcher input {
  background: none;
  border: none;
  padding: 0.6rem;
  width: 92%;
  outline: none;
}

.grid3 .grid-col-1 .searcher span {
  vertical-align: middle;
  font-size: 1.2em;
  color: #888a91;
}

.grid3 .grid-col-1 .pinned h5 {
  margin: 1rem;
  font-size: 0.9em;
  color: #888a91;
}

.grid3 .grid-col-1 .pinned h5 span {
  vertical-align: top;
  font-size: 1.3em;
}

.grid3 .grid-col-1 .chatter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.grid3 .grid-col-1 .chatter:hover {
  background-color: #f7f8fa;
}

.grid3 .grid-col-1 hr {
  height: 0;
  border: 1px solid #eeeeef;
}

.grid3 .grid-col-1 .chatter .txt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.grid3 .grid-col-1 .chatter .txt div {
  line-height: 1.2em;
}

.grid3 .grid-col-1 .chatter .txt h6 {
  font-size: 0.9em;
}

.grid3 .grid-col-1 .pinned .chatter .txt h6 span {
  font-size: 1.2em;
  color: #fab505;
  vertical-align: top;
}

.grid3 .grid-col-1 .chatter .txt #typing {
  font-size: 0.7em;
  color: #01b9e2;
}

.grid3 .grid-col-1 .pinned .chatter .txt #msg {
  font-size: 0.8em;
}

.grid3 .grid-col-1 .chatter .time {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.3rem;
}

.grid3 .grid-col-1 .chatter .time p {
  font-size: 0.75em;
  color: #888a91;
  white-space: nowrap;
}

.grid3 .grid-col-1 .chatter .time span {
  border-radius: 50%;
  background-color: #f23434;
  color: #fff;
  font-size: 0.8em;
  font-weight: 600;
  padding: 0.15rem 0.4rem;
  align-self: flex-end;
}

.grid3 .grid-col-1 .all-messages h5 {
  margin: 2rem 1rem 1rem 1rem;
  font-size: 0.9em;
  color: #888a91;
}

.grid3 .grid-col-1 .all-messages h5 span {
  vertical-align: top;
  font-size: 1.3em;
}

.grid3 .grid-col-1 .all-messages .chatter .txt #msg {
  font-size: 0.8em;
  color: #888a91;
}

.grid3 .grid-col-1 .all-messages .chatter .txt h6 span {
  font-size: 1.2em;
  color: #aaacb0;
  vertical-align: top;
}

.grid3 .grid-col-2 {
  background-color: #fff;
  border-radius: 10px;
}

.grid3 #flex-col {
  display: flex;
}

.grid3 .child-col-1 {
  width: 100%;
  transition: 0.3s;
}

.grid3 .child-col-1.open-chat {
  width: 70%;
}

.grid3 .grid-col-2 hr {
  height: 0;
  border: 1px solid #eeeeef;
}

.grid3 .grid-col-2 .display {
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.grid3 .grid-col-2 .display .dp {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  line-height: 1.2em;
}

.grid3 .grid-col-2 .display .dp .txt h6 {
  font-size: 1em;
}

.grid3 .grid-col-2 .display .dp .txt h6 span {
  vertical-align: bottom;
  color: #fab505;
  font-size: 1.2em;
}

.grid3 .grid-col-2 .display .dp .txt p {
  color: #999ba1;
  font-size: 0.8em;
}

.grid3 .grid-col-2 .display .buttons {
  display: flex;
  gap: 0.7rem;
}

.grid3 .grid-col-2 .display .buttons .btn1 {
  background: linear-gradient(
    90deg,
    #eeecfc 42.71%,
    rgba(255, 255, 255, 0) 100%
  );
  outline: none;
  border: none;
  border-radius: 50%;
  padding: 0.5rem 0.6rem;
}

.grid3 .grid-col-2 .display .buttons .btn1:hover {
  color: #fff;
  background: none;
  background-color: #080d1b;
  transition: 0.6s;
}

.grid3 .grid-col-2 .display .buttons .btn1 span {
  font-size: 1.2em;
  font-weight: 600;
  vertical-align: middle;
}

.grid3 .grid-col-2 .child-col-2 {
  width: 0;
  display: none;
  border-left: 2px solid #eeeeef;
  padding: 1rem 0.5rem 1rem 0.5rem;
  transition: 0.6s;
}

.grid3 .grid-col-2 .child-col-2.open-media {
  width: 30%;
  display: block;
}

.grid3 .grid-col-2 .child-col-2 #btn-close {
  float: right;
}

.grid3 .grid-col-2 .child-col-2 #btn-close:hover {
  color: #01b9e2;
}

.grid3 .grid-col-2 .child-col-2 h4 {
  margin-top: 0.2rem;
  font-size: 1.2em;
}

.grid3 .grid-col-2 .child-col-2 .user {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.grid3 .grid-col-2 .child-col-2 .user h3 {
  margin-top: 0.7rem;
}

.grid3 .grid-col-2 .child-col-2 .user h3 span {
  vertical-align: bottom;
  color: #fab505;
  font-size: 1.1em;
}

.grid3 .grid-col-2 .child-col-2 .user p {
  margin-top: 0.3rem;
  color: #999ba1;
  font-size: 0.9em;
}

.grid3 .grid-col-2 .child-col-2 .user button {
  margin-top: 1rem;
  border: none;
  outline: none;
  background-color: #f7f8fa;
  padding: 0.7rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
}

.grid3 .grid-col-2 .child-col-2 .user button:hover {
  background-color: #080d1b;
  color: #fff;
  transition: 0.6s;
}

.grid3 .grid-col-2 .child-col-2 .user button span {
  vertical-align: middle;
  font-size: 1.2em;
  font-weight: 600;
}

.grid3 .grid-col-2 .child-col-2 .media {
  margin-top: 2rem;
  width: 100%;
}

.grid3 .grid-col-2 .child-col-2 .media .images {
  width: 100%;
  margin-top: 0.5rem;
}

.grid3 .grid-col-2 .child-col-2 .media h3 {
  font-size: 1em;
  color: #767982;
}

.grid3 .grid-col-2 .child-col-2 .media h3 span {
  vertical-align: bottom;
  font-size: 1.2em;
}

.grid3 .grid-col-2 .child-col-2 .media .show-all {
  float: right;
  background: none;
  border: none;
  outline: none;
  color: #01b9e2;
  text-decoration: underline;
  cursor: pointer;
}

.grid3 .grid-col-2 .child-col-2 .files {
  margin-top: 2rem;
}

.grid3 .grid-col-2 .child-col-2 .files h3 {
  font-size: 1em;
  color: #767982;
  margin-bottom: 0.7rem;
}

.grid3 .grid-col-2 .child-col-2 .files h3 span {
  vertical-align: bottom;
  font-size: 1.2em;
}

.grid3 .grid-col-2 .child-col-2 .files .show-all {
  float: right;
  background: none;
  border: none;
  outline: none;
  color: #01b9e2;
  text-decoration: underline;
  cursor: pointer;
}

.grid3 .grid-col-2 .child-col-2 .files .file {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 0.5rem;
}

.grid3 .grid-col-2 .child-col-2 .files .file #arrow {
  color: #01b9e2;
}

.grid3 .grid-col-2 .child-col-2 .files .file:hover {
  background-color: #eeeeef;
}

.grid3 .grid-col-2 .child-col-2 .files .file .bttn {
  padding: 0.8rem;
  background-color: #f7f8fa;
  border-radius: 50%;
  border: none;
}

.grid3 .grid-col-2 .child-col-2 .files .file .bttn span {
  vertical-align: middle;
  font-size: 1.4em;
  font-weight: 600;
}

.grid3 .grid-col-2 .child-col-2 .files .file .txt h5 {
  font-size: 0.9em;
}

.grid3 .grid-col-2 .child-col-2 .files .file .txt h5 span {
  vertical-align: top;
  font-size: 1.1em;
  color: #888a91;
}

.grid3 .grid-col-2 .child-col-2 .files .file .txt p {
  margin-top: 0.3rem;
  color: #888a91;
  font-size: 0.8em;
}

/*-------------MODAL-0-------------*/

.modal0 {
  margin: 5rem auto;
  border: none;
  border-radius: 10px;
  width: 35%;
}

.modal0 #close1 {
  float: right;
  color: #888a91;
  font-size: 1.2em;
  margin: 1rem 1rem 0rem 0rem;
}

.modal0 #close1:hover {
  color: #01b9e2;
  cursor: pointer;
}

.modal0 #heading {
  margin: 1rem 0rem 0rem 1rem;
}

.modal0 .searcher {
  margin: 1rem 1rem 1rem 1rem;
  background-color: #f7f8fa;
  border-radius: 5px;
}

.modal0 .searcher span {
  vertical-align: middle;
  font-size: 1.2em;
}

.modal0 .searcher span:hover {
  color: #01b9e2;
}

.modal0 .searcher input {
  width: 95%;
  padding: 1rem 0.5rem;
  background: none;
  border: none;
  outline: none;
}

.modal0 .attendees {
  margin-top: 1rem;
}

.modal0 .attendees .attendee {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.modal0 .attendee:nth-child(even) {
  background-color: #f7f8fa;
}

.modal0 .attendees .attendee .start-convo {
  padding: 0.4rem 0.7rem;
  background: none;
  outline: none;
  border: 1px solid #080d1b;
  border-radius: 5px;
  font-weight: 600;
  cursor: pointer;
}

.modal0 .attendees .attendee .start-convo:hover {
  color: #fff;
  background-color: #080d1b;
  transition: 0.6s;
}

.modal0 .attendees .attendee .content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.modal0 .attendees .attendee .content .txt h4 {
  font-size: 0.9em;
}

.modal0 .attendees .attendee .content .txt p {
  margin-top: 0.1rem;
  color: #888a91;
  font-size: 0.8em;
}

.modal0 .attendees .attendee .content .txt p span {
  vertical-align: bottom;
  font-size: 1em;
}

/*---------------GRID-4 ------------------*/

.grid4 {
  display: grid;
  grid-template-columns: 25% 1fr;
  gap: 1rem;
  margin: 1rem;
}

.grid4 .grid-col-1 {
  background-color: #fff;
  border-radius: 10px;
  padding: 1rem;
}

.grid4 .grid-col-1 .bttn {
  float: right;
  border: none;
  background: none;
  outline: none;
  text-decoration: underline;
  color: #01b9e2;
  margin-top: 0.5rem;
}

.grid4 .grid-col-1 h3 {
  margin-top: 0.4rem;
}

.grid4 .grid-col-1 .custom {
  position: relative;
  margin-top: 1rem;
}

.grid4 .grid-col-1 .custom select {
  display: none;
}

.grid4 .grid-col-1 .custom .select-selected {
  background-color: #f7f8fa;
  border-radius: 6px;
  padding: 0.7rem 1rem 0.7rem 1rem;
  color: #080d1b;
  font-size: 0.9em;
  border-bottom: none;
}

.grid4 .grid-col-1 .custom .select-selected:after {
  position: absolute;
  font-family: "Material Icons";
  content: "\e5cf";
  font-size: 18px;
  top: 10px;
  right: 30px;
  width: 0;
  height: 0;
}

.grid4 .grid-col-1 .custom .select-selected.select-arrow-active:after {
  font-family: "Material Icons";
  content: "\e5ce";
  top: 10px;
}

.grid4 .grid-col-1 .custom .select-items div,
.select-selected {
  color: #080d1b;
  font-size: 0.8em;
  user-select: none;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent #3bb347 transparent;
  cursor: pointer;
}

.grid4 .grid-col-1 .custom .select-items {
  position: absolute;
  background-color: #ffffff;
  border: 1px solid #dddee0;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  border-radius: 5px;
}

.grid4 .grid-col-1 .custom .select-hide {
  display: none;
}

.grid4 .grid-col-1 .custom .select-items div:hover,
.same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}

.grid4 .grid-col-1 .index {
  margin-top: 1rem;
}

.grid4 .grid-col-1 .index h5 {
  font-size: 0.9em;
}

.grid4 .grid-col-1 .index .nested-btns {
  margin-top: 0.7rem;
}

.grid4 .grid-col-1 .index .nested-btns button {
  padding: 0.5rem 0.5rem;
  width: 35px;
  margin: 0.3rem;
  border-radius: 50%;
  background: none;
  border: 1px solid #eeeeef;
}

.grid4 .grid-col-1 .index .nested-btns .green {
  border-color: #01b9e2;
  background-color: #f0f9f1;
  font-weight: 600;
}

.grid4 .grid-col-1 .all-countries {
  margin-top: 1rem;
}

.grid4 .grid-col-1 .all-countries h5 {
  font-size: 0.9em;
  margin-bottom: 0.7rem;
}

.grid4 .grid-col-1 .all-countries hr {
  height: 0;
  border: 1px solid #eeeeef;
}

.grid4 .grid-col-1 .all-countries .country {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem;
}

.grid4 .grid-col-1 .all-countries .country span {
  color: #01b9e2;
}

.grid4 .grid-col-1 .all-countries .country .flag {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.grid4 .grid-col-1 .all-countries .country .flag p {
  font-size: 0.9em;
}

.grid4 .grid-col-1 .all-countries .country .flag .bold {
  font-weight: 600;
}

.grid4 .grid-col-2 {
  background-color: #fff;
  border-radius: 10px;
}

.grid4 .grid-col-2 .custom2 {
  position: relative;
}

.grid4 .grid-col-2 .custom2 select {
  display: none;
}

.grid4 .grid-col-2 .custom2 .select-selected {
  background: none;
  border: 1px solid #080d1b;
  border-radius: 6px;
  padding: 0.7rem 1rem 0.7rem 1rem;
  color: #080d1b;
  font-size: 0.9em;
  font-weight: 600;
}

.grid4 .grid-col-2 .custom2 .select-selected:after {
  position: absolute;
  font-family: "Material Icons";
  content: "\e5cf";
  top: 12px;
  right: 30px;
  font-size: 16px;
  width: 0;
  height: 0;
}

.grid4 .grid-col-2 .custom2 .select-selected.select-arrow-active:after {
  font-family: "Material Icons";
  content: "\e5ce";
  top: 12px;
}

.grid4 .grid-col-2 .custom2 .select-items div,
.select-selected {
  color: #080d1b;
  font-size: 0.8em;
  user-select: none;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent #080d1b transparent;
  cursor: pointer;
}

.grid4 .grid-col-2 .custom2 .select-items {
  position: absolute;
  background-color: #ffffff;
  border: 1px solid #dddee0;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  border-radius: 5px;
}

.grid4 .grid-col-2 .custom2 .select-hide {
  display: none;
}

.grid4 .grid-col-2 .custom2 .select-items div:hover,
.same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}

.grid4 .grid-col-2 .section-top {
  padding: 1rem 1rem 0rem 1rem;
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid #eeeeef;
}

.grid4 .grid-col-2 .section-top .headings {
  display: flex;
  align-items: flex-end;
  gap: 2rem;
  white-space: nowrap;
}

.grid4 .grid-col-2 .section-top .headings .border {
  border-bottom: 2px solid #080d1b;
  padding: 0rem 1rem;
}

.grid4 .grid-col-2 .section-top .headings h3 {
  font-size: 1.4em;
  line-height: 4.2rem;
}

.grid4 .grid-col-2 .section-top .headings .bold {
  font-size: 1em;
  line-height: 3.5rem;
}

.grid4 .grid-col-2 .section-top .headings .no-bold {
  font-size: 1em;
  font-weight: 100;
  line-height: 3.8rem;
}

.grid4 .grid-col-2 .section-top .headings .bold span {
  font-size: 0.7em;
  background: linear-gradient(to left, #01bde5 0%, #02508d 100%) !important;
  padding: 0.2rem;
  border-radius: 5px;
  vertical-align: middle;
  color: #fff;
}

.grid4 .grid-col-2 .section-top .headings .no-bold span {
  font-size: 0.7em;
  background-color: #eeeeef;
  padding: 0.2rem;
  border-radius: 5px;
  vertical-align: middle;
  color: #767982;
}

.grid4 .grid-col-2 .section-top .drpdwn-searcher {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.grid4 .grid-col-2 .section-top .drpdwn-searcher .searcher {
  background-color: #f7f8fa;
  border-radius: 5px;
  padding: 0.3rem;
}

.grid4 .grid-col-2 .section-top .drpdwn-searcher .searcher span {
  vertical-align: middle;
  color: #888a91;
}

.grid4 .grid-col-2 .section-top .drpdwn-searcher .searcher span:hover {
  color: #01b9e2;
}

.grid4 .grid-col-2 .section-top .drpdwn-searcher .searcher input {
  padding: 0.5rem 1rem;
  background: none;
  border: none;
  outline: none;
}

.grid4 .grid-col-2 .main-section {
  padding: 1rem;
}

.grid4 .grid-col-2 .main-section hr {
  height: 0;
  border: 1px solid #eeeeef;
}

.grid4 .grid-col-2 .main-section .companies {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1rem 0rem;
}

.grid4 .grid-col-2 .main-section .companies .company {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.grid4 .grid-col-2 .main-section .companies .company .txt p {
  margin-top: 0.3rem;
  font-size: 0.8em;
  color: #888a91;
}

.grid4 .grid-col-2 .main-section .companies .company .txt p span {
  vertical-align: bottom;
  font-size: 1.3em;
}

.grid4 .grid-col-2 .main-section .companies .buttons .btn1 {
  border-radius: 50%;
  border: none;
  padding: 0.6rem;
  background-color: #f7f8fa;
  margin-right: 1rem;
}

.grid4 .grid-col-2 .main-section .companies .buttons .btn1:hover {
  color: #fff;
  background: linear-gradient(to left, #01bde5 0%, #02508d 100%) !important;
  transition: 0.3s;
}

.grid4 .grid-col-2 .main-section .companies .buttons .activebtn {
  color: #fff;
  background: linear-gradient(to left, #01bde5 0%, #02508d 100%) !important;
  /* transition: 0.3s; */
}

.grid4 .grid-col-2 .main-section .companies .buttons .btn1 span {
  vertical-align: middle;
}

.grid4 .grid-col-2 .main-section .companies .buttons .btn2 {
  padding: 0.5rem 1.2rem;
  border-radius: 5px;
  border: 1px solid #080d1b;
  background: none;
  font-size: 0.9em;
}

.grid4 .grid-col-2 .main-section .companies .buttons .btn2:hover {
  color: #fff;
  background-color: #080d1b;
  transition: 0.3s;
}

.grid4 .grid-col-2 .main-section .companies .buttons .btn2 span {
  vertical-align: middle;
  font-size: 1.5em;
  font-weight: 600;
}

.grid4 .grid-col-2 .main-section .records {
  display: flex;
  justify-content: space-between;
  padding: 1.5rem;
  background-color: #fff;
  border-radius: 0px 0px 10px 10px;
  font-size: 0.9em;
  color: #525560;
}

.grid4 .grid-col-2 .main-section .records div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.grid4 .grid-col-2 .main-section .records #arrow {
  margin-left: 0.2rem;
  padding: 0.3rem;
  border-radius: 50%;
  cursor: pointer;
}

.grid4 .grid-col-2 .main-section .records #arrow:hover {
  background-color: #eeeeef;
  transition: 0.3s;
}

.grid4 .grid-col-2 .main-section .records div #pages {
  background-color: #eeeeef;
  border-radius: 5px;
  padding: 0.2rem 0.3rem 0rem 0.3rem;
  cursor: pointer;
}

.grid4 .grid-col-2 .main-section .records span {
  vertical-align: middle;
}

/*-------------- POPUP-9 ---------------*/

.grid4 .modal1 {
  width: 70%;
  margin-left: auto;
  margin-right: 0;
  border: none;
  height: 100%;
  max-height: 100%;
}

.grid4 .modal1 .popup hr {
  height: 0px;
  border: 1px solid #e3e8f1;
}

.grid4 .modal1 .popup .heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 1.5rem;
}

.grid4 .modal1 .popup .heading .child-1 p {
  color: #999ba1;
  font-size: 0.9em;
}

.grid4 .modal1 .popup .heading .child-1 h3 {
  margin-top: 0.3rem;
}

.grid4 .modal1 .popup .heading .child-2 .bttn-close {
  border: none;
  background-color: #f7f8fa;
  font-weight: 600;
  padding: 0.7rem 1.5rem;
  border-radius: 5px;
}

.grid4 .modal1 .popup .heading .child-2 .bttn-close:hover {
  color: #fff;
  background-color: #080d1b;
  transition: 0.6s;
}

.grid4 .modal1 .popup .heading .child-2 .bttn-open {
  border: 1px solid #01b9e2;
  background: none;
  font-weight: 600;
  color: #01b9e2;
  padding: 0.7rem 1.5rem;
  border-radius: 5px;
}

.grid4 .modal1 .popup .heading .child-2 .bttn-open:hover {
  color: #fff;
  background: linear-gradient(to left, #01bde5 0%, #02508d 100%) !important;
  transition: 0.6s;
}

.grid4 .modal1 .popup .heading .child-2 #bttn-open1 {
  border-color: #080d1b;
  color: #080d1b;
}

.grid4 .modal1 .popup .heading .child-2 #bttn-open1:hover {
  background-color: #080d1b;
  color: #fff;
}

.grid4 .modal1 .popup .heading .child-2 #bttn-open1 span {
  font-weight: 600;
}

.grid4 .modal1 .popup .heading .child-2 .bttn-open span {
  vertical-align: top;
  font-size: 1.2em;
}

.grid4 .modal1 .company-name {
  padding: 1rem;
  background-color: #f7f8fa;
}

.grid4 .modal1 .company-name .company {
  background-color: #f7f8fa;
  border-radius: 10px;
  padding: 1rem;
  /* background-image: url(./images/company-bg.png); */
  background-repeat: no-repeat;
  background-position: top;
  background-size: contain;
}

.grid4 .modal1 .company-name .company .intro {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 4rem 0rem 0rem 1rem;
}

.grid4 .modal1 .company-name .company .intro div img {
  vertical-align: middle;
}

.grid4 .modal1 .company-name .company .intro div h3 span {
  vertical-align: middle;
  color: #999ba1;
}

.grid4 .modal1 .company-name .company .intro div h3 #num {
  font-size: 0.9em;
  font-weight: 100;
}

.grid4 .modal1 .company-name .company .intro div p {
  font-size: 0.9em;
  color: #999ba1;
  margin-top: 0.5rem;
}

.grid4 .modal1 .company-name .company .intro div p span {
  vertical-align: bottom;
  font-size: 1.2em;
  font-weight: 600;
}

.grid4 .modal1 .popup .message {
  margin: 1rem 2rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: #dcf4ff;
  padding: 0.7rem 1rem;
  border-radius: 6px;
}

.grid4 .modal1 .popup .message p span {
  vertical-align: middle;
  color: #999ba1;
  font-size: 1.5em;
  margin-bottom: 0.1rem;
}

.grid4 .modal1 .popup .message p {
  font-size: 0.9em;
  font-weight: 600;
}

.grid4 .modal1 .popup .message p a {
  color: #080d1b;
  text-decoration: underline;
}

.grid4 .modal1 .popup .message .bttn1 {
  background: none;
  border: none;
  outline: none;
}

.grid4 .modal1 .popup .message .bttn1 span {
  vertical-align: bottom;
  font-size: 1.5em;
  cursor: pointer;
  color: #888a91;
}

.grid4 .modal1 .popup .table3 {
  padding: 1rem;
  width: 100%;
  text-align: left;
}

.grid4 .modal1 .popup .table3 tr th {
  color: #888a91;
  padding-bottom: 1rem;
}

.grid4 .modal1 .popup .table3 tr td {
  padding: 1rem 1rem 1rem 0rem;
  border-bottom: 1px solid #eeeeef;
}

.grid4 .modal1 .popup .table3 tr .col-1 {
  width: 15%;
}

.grid4 .modal1 .popup .table3 tr .col-2 {
  width: 30%;
}

.grid4 .modal1 .popup .table3 tr .col-2 .flex {
  display: flex;
  justify-content: space-between;
  padding: 0rem 1rem;
}

.grid4 .modal1 .popup .table3 tr .col-2 .flex a {
  text-decoration: underline;
  color: #080d1b;
}

.grid4 .modal1 .popup .table3 tr .col-2 .flex span {
  vertical-align: middle;
  color: #888a91;
  font-size: 1em;
}

.grid4 .modal1 .popup .table3 tr .col-3 {
  padding: 0rem 1rem;
  background-color: #f0f9f1;
  font-weight: 600;
}

.grid4 .modal1 .popup .table3 tr .col-3 span {
  vertical-align: middle;
  color: #01b9e2;
}

/*------------- MODAL-10 -------------*/

.grid4 .modal1 .popup .main-section2 {
  margin-top: 4rem;
  padding: 0rem 6rem;
}

.grid4 .modal1 .popup .main-section2 .hr {
  margin-top: 4rem;
}

.grid4 .modal1 .popup .main-section2 .hurray {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.grid4 .modal1 .popup .main-section2 .hurray h1 {
  line-height: 3rem;
}

.grid4 .modal1 .popup .main-section2 .meeting-stat {
  display: flex;
  align-items: center;
  gap: 6rem;
}

.grid4 .modal1 .popup .main-section2 .meeting-stat .meeting {
  margin-top: 3rem;
  width: 100%;
}

.grid4 .modal1 .popup .main-section2 .meeting-stat .meeting .status {
  display: flex;
  align-items: center;
  padding: 1rem 0rem;
}

.grid4 .modal1 .popup .main-section2 .meeting-stat .meeting .status .txt1 {
  width: 30%;
  color: #525560;
}

.grid4 .modal1 .popup .main-section2 .meeting-stat .meeting .status .txt2 {
  width: 70%;
}

.grid4 .modal1 .popup .main-section2 .meeting-stat .meeting .status .txt2 img {
  vertical-align: middle;
}

.grid4 .modal1 .popup .main-section2 .meeting-stat .meeting .status .txt2 h5 {
  font-size: 1em;
}

.grid4
  .modal1
  .popup
  .main-section2
  .meeting-stat
  .meeting
  .status
  .txt2
  h5
  span {
  vertical-align: middle;
  color: #01b9e2;
}

.grid4 .modal1 .popup .main-section2 .meeting-stat .meeting .status .txt2 h5 a {
  color: #01b9e2;
  text-decoration: underline;
}

.grid4 .modal1 .popup .main-section2 .meeting-stat .meeting .status textarea {
  width: 100%;
  border: none;
  padding: 1rem;
  background-color: #f7f8fa;
  border-radius: 10px;
}

/*------------- POP-UP-11 ---------------*/

.grid4 .modal2 {
  margin: 5rem auto;
  border: none;
  border-radius: 5px;
  width: 25%;
}

.grid4 .modal2::backdrop {
  opacity: 1;
}

.grid4 .modal2 .bttn1 {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 1.1em;
  color: #525560;
}

.grid4 .modal2 .created {
  text-align: center;
}

.grid4 .modal2 .created span {
  font-size: 3em;
  margin-top: 3rem;
  color: #01b9e2;
}

.grid4 .modal2 .created h3 {
  margin-top: 1rem;
}

.grid4 .modal2 .created p {
  color: #999ba1;
  font-size: 0.9em;
  margin-top: 0.5rem;
}

.grid4 .modal2 .created hr {
  margin-top: 2rem;
  height: 0;
  border: 1px solid #eeeeef;
}

.grid4 .modal2 .bttns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
}

.grid4 .modal2 .bttns .bttn2 {
  border: none;
  padding: 0.7rem 2rem;
  border-radius: 5px;
  font-weight: 600;
}

.grid4 .modal2 .bttns .bttn2:hover {
  background: linear-gradient(to left, #01bde5 0%, #02508d 100%) !important;
  color: #fff;
  transition: 0.6s;
}

.grid4 .modal2 .bttns #bttn3 {
  border: 1px solid #080d1b;
  background: none;
  border-radius: 5px;
  padding: 0.6rem 1rem;
  font-size: 0.75em;
  font-weight: 600;
}

.grid4 .modal2 .bttns #bttn3:hover {
  background-color: #080d1b;
  color: #fff;
  transition: 0.6s;
}

.grid4 .modal2 .bttns #bttn3 span {
  vertical-align: middle;
  font-size: 1.2em;
  font-weight: 600;
}

/* ---------- Conference-new ------------ */

.grid5 {
  background-color: #f7f8fa;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 1rem;
  gap: 1rem;
}

.grid5 .grid-col-1 {
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2rem;
}

.grid5 .grid-col-1 .conference .heading h1 {
  font-size: 3em;
}

.grid5 .grid-col-1 .conference .heading h3 {
  font-size: 1.5em;
  font-weight: 100;
}

.grid5 .grid-col-1 .conference .heading h3 span {
  font-weight: 600;
}

.grid5 .grid-col-1 .conference .heading p {
  margin-top: 1rem;
  color: #898c93;
  font-size: 0.9em;
  line-height: 1.5rem;
}

.grid5 .grid-col-1 .conference .imgs {
  margin-top: 2.5rem;
  position: relative;
}

.grid5 .grid-col-1 .conference .imgs img {
  margin-right: 0.2rem;
  margin-top: 0.2rem;
}

.grid5 .grid-col-1 .conference .imgs .more-imgs {
  padding: 0.85rem 0.9rem;
  border-radius: 14px;
  border: 1px solid #e5e6e7;
  background: none;
  color: #767982;
  position: absolute;
  /* margin-left: 0.35rem; */
  margin-top: 0.3rem;
}

@media (max-width: 470) {
}

.grid5 .grid-col-1 .conference .imgs .more-imgs:hover {
  background: linear-gradient(to left, #01bde5 0%, #02508d 100%) !important;
  transition: 0.3s ease;
  border-color: #080d1b;
  color: #fff;
}

.grid5 .grid-col-1 .conference .imgs .more-imgs:hover span {
  color: #fff;
  transition: 0.3s ease;
}

.grid5 .grid-col-1 .conference .imgs .more-imgs span {
  font-size: 1.5em;
  font-weight: 600;
  color: #555862;
}

.grid5 .grid-col-1 .map {
  width: 100%;
}

.grid5 .grid-col-2 {
  background-color: #fff;
  padding: 1rem 0rem;
  border-radius: 10px;
  overflow: hidden;
  overflow-y: scroll;
  /* height: 1389px; */
}

.grid5 .grid-col-2::-webkit-scrollbar {
  width: 1vw;
}

.grid5 .grid-col-2::-webkit-scrollbar-thumb {
  border: 6px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
  border-radius: 9999px;
  background-color: #33333322;
}

.grid5 .grid-col-2::-webkit-scrollbar-track {
  margin: 5rem 0 5rem 0;
  width: 0.2vw;
}

.grid5 .grid-col-2 h4 {
  margin-left: 1rem;
  font-size: 1.3em;
  font-weight: 100;
}

.grid5 .grid-col-2 h4 span {
  font-weight: 600;
}

.grid5 .grid-col-2 .dates {
  margin-top: 1.5rem;
  padding-left: 2rem;
  border-bottom: 2px solid #e3e8f1;
  display: flex;
  text-align: center;
}

.grid5 .grid-col-2 .dates .date {
  padding: 0.6rem 1rem;
}

.grid5 .grid-col-2 .dates .date h5 {
  color: #767982;
  font-weight: 100;
  font-size: 1em;
}

.grid5 .grid-col-2 .dates .date p {
  font-size: 0.8em;
  color: #999ba1;
  margin-top: 0.2rem;
}

.grid5 .grid-col-2 .dates .date:hover {
  border-color: #080d1b;
}

.grid5 .grid-col-2 .dates .date:hover h5 {
  color: #080d1b;
  font-weight: 900;
}

.grid5 .grid-col-2 .dates .date:hover p {
  color: #01b9e2;
  font-weight: 600;
}

[data-tab-content] {
  display: none;
}

.active1[data-tab-content] {
  display: block;
}

.grid5 .grid-col-2 .dates .date.active1 {
  border-color: #080d1b;
}

.grid5 .grid-col-2 .dates .date.active1 h5 {
  color: #080d1b;
  font-weight: 900;
}

.grid5 .grid-col-2 .dates .date.active1 p {
  color: #01b9e2;
  font-weight: 600;
}

.grid5 .grid-col-2 .upcoming hr {
  height: 0;
  border: 1px solid #e3e8f1;
}

.grid5 .grid-col-2 .upcoming .upcoming1 {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.grid5 .grid-col-2 .upcoming .upcoming1:hover {
  background-color: #f7f8fa;
}

.grid5 .grid-col-2 .upcoming .upcoming1 .text1 p {
  color: #767982;
  font-size: 0.9em;
  margin-top: 0.5rem;
}

.grid5 .grid-col-2 .upcoming .upcoming1 .text1 p span {
  vertical-align: middle;
  font-size: 1.3em;
}

.grid5 .grid-col-2 .upcoming .upcoming1 .bttn {
  background: none;
  border: 1px solid #080d1b;
  border-radius: 5px;
  margin-top: 1.3rem;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  width: 160px;
}

.grid5 .grid-col-2 .upcoming .upcoming1 .bttn:hover {
  background-color: #080d1b;
  color: #fff;
  transition: 0.6s;
}

.grid5 .grid-col-2 .upcoming .upcoming1 .bttn span {
  vertical-align: middle;
  font-size: 1.1em;
  font-weight: 600;
}

.grid5 .grid-col-3 .activity {
  background-color: #fff;
  border-radius: 10px;
  padding: 2rem;
  overflow: hidden;
  overflow-y: scroll;
  height: 922px;
}

.grid5 .grid-col-3 .activity::-webkit-scrollbar {
  width: 1vw;
}

.grid5 .grid-col-3 .activity::-webkit-scrollbar-thumb {
  border: 6px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
  border-radius: 9999px;
  background-color: #33333322;
}

.grid5 .grid-col-3 .activity::-webkit-scrollbar-track {
  margin: 5rem 0 5rem 0;
  width: 0.2vw;
}

.grid5 .grid-col-3 .activity #vert {
  float: right;
  font-weight: 600;
  vertical-align: middle;
  color: #767982;
  cursor: pointer;
}

.grid5 .grid-col-3 .activity #span {
  vertical-align: middle;
  color: #767982;
  cursor: pointer;
}

.grid5 .grid-col-3 .activity #span:hover {
  color: #080d1b;
  transition: 0.3s;
}

.grid5 .grid-col-3 .activity #vert:hover {
  color: #080d1b;
  transition: 0.3s;
}

.grid5 .grid-col-3 .activity ul {
  margin-left: 1rem;
  list-style-image: url(./images/dot.png);
}

.grid5 .grid-col-3 .activity li::before {
  position: absolute;
  content: "";
  width: 1px;
  height: calc(100% - -35px);
  background-color: #e3e8f1;
  top: 15px;
  left: -15px;
}

#contact-form input,
#contact-form textarea {
  background-color: #f6f7f7;
}

#contact-form input:focus,
#contact-form textarea:focus {
  background-color: #fff;
  outline-color: #01b9e2;
  box-shadow: 0px 0px 0px 6px rgba(59, 178, 71, 0.07);
}

.contact-header {
  color: black;
}

.grid5 .grid-col-3 .activity li {
  position: relative;
  padding-left: 1em;
  font-size: 0.9em;
  white-space: nowrap;
  font-weight: 600;
  margin-top: 1rem;
  color: #444752;
}

.grid5 .grid-col-3 .activity li span {
  text-decoration: underline;
  text-underline-offset: 0.1rem;
}

.grid5 .grid-col-3 .activity h6 {
  margin-left: 1.2em;
  font-weight: 300;
  font-size: 0.8em;
  line-height: 2.5em;
  color: #888a91;
}

.grid5 .grid-col-4 {
  background-color: #ffffff;
  border-radius: 10px;
  margin-top: 1rem;
  padding: 1.5rem;
}

.grid5 .grid-col-4 span {
  vertical-align: middle;
  color: #767982;
  cursor: pointer;
}

.grid5 .grid-col-4 span:hover {
  color: #080d1b;
  transition: 0.3s;
}

.grid5 .grid-col-4 .col-4-flex {
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  align-items: center;
}

.grid5 .grid-col-4 .col-4-flex div {
  text-align: center;
  background-color: #f7f8fa;
  padding: 2rem;
  width: 30%;
  border-radius: 10px;
  margin-top: 1rem;
}

.grid5 .grid-col-4 .col-4-flex div span {
  color: #01b9e2;
  font-size: 2.5rem;
  font-weight: 900;
}

.grid5 .grid-col-4 .col-4-flex div h5 {
  font-size: 1em;
  letter-spacing: 1px;
}

.grid5 .grid-col-5 {
  grid-column: span 3;
  background-color: #fff;
  padding: 1rem 0rem;
  border-radius: 10px;
}

.grid5 .grid-col-5 h4 {
  margin-left: 1rem;
  font-size: 1.3em;
  font-weight: 100;
}

.grid5 .grid-col-5 h4 span {
  font-weight: 600;
}

.grid5 .grid-col-5 .dates {
  margin-top: 1.5rem;
  padding-left: 2rem;
  border-bottom: 2px solid #e3e8f1;
  display: flex;
  text-align: center;
  flex-wrap: nowrap;
  overflow: hidden;
  overflow-x: scroll;
}

.grid5 .grid-col-5 .dates::-webkit-scrollbar {
  height: 10px;
}

.grid5 .grid-col-5::-webkit-scrollbar-thumb {
  border: 6px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
  border-radius: 9999px;
  background-color: #33333322;
}

.grid5 .grid-col-5::-webkit-scrollbar-track {
  margin: 5rem 0 5rem 0;
  width: 0.2vw;
}

.grid5 .grid-col-5 .dates .date {
  padding: 0.6rem 1rem;
  white-space: nowrap;
  border-bottom: 2px solid #ffffff;
}

.grid5 .grid-col-5 .dates .date h5 {
  color: #767982;
  font-weight: 100;
  font-size: 1em;
}

.grid5 .grid-col-5 .dates .date p {
  font-size: 0.8em;
  color: #999ba1;
  margin-top: 0.2rem;
}

.grid5 .grid-col-5 .dates .date:hover {
  border-color: #080d1b;
}

.grid5 .grid-col-5 .dates .date:hover h5 {
  color: #080d1b;
  font-weight: 900;
}

.grid5 .grid-col-5 .dates .date:hover p {
  color: #01b9e2;
  font-weight: 600;
}

[data-tab-content] {
  display: none;
}

.active[data-tab-content] {
  display: block;
}

.grid5 .grid-col-5 .dates .date.active {
  border-color: #080d1b;
}

.grid5 .grid-col-5 .dates .date.active h5 {
  color: #080d1b;
  font-weight: 900;
}

.grid5 .grid-col-5 .dates .date.active p {
  color: #01b9e2;
  font-weight: 600;
}

.grid5 .grid-col-5 .upcoming hr {
  height: 0;
  border: 1px solid #e3e8f1;
}

.grid5 .grid-col-5 .upcoming .upcoming1 {
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.grid5 .grid-col-5 .upcoming .upcoming1:hover {
  background-color: #f7f8fa;
}

.grid5 .grid-col-5 .upcoming .upcoming1 .text1 p {
  color: #767982;
  font-size: 0.9em;
  margin-top: 0.5rem;
}

.grid5 .grid-col-5 .upcoming .upcoming1 .text1 p span {
  vertical-align: middle;
  font-size: 1.3em;
}

.grid5 .grid-col-5 .upcoming .upcoming1 .bttn {
  background: none;
  border: 1px solid #080d1b;
  border-radius: 5px;
  padding: 0.5rem 1.5rem;
  font-weight: 600;
}

.grid5 .grid-col-5 .upcoming .upcoming1 .bttn:hover {
  background-color: #080d1b;
  color: #fff;
  transition: 0.6s;
}

.grid5 .grid-col-5 .upcoming .upcoming1 .bttn span {
  vertical-align: middle;
  font-size: 1.1em;
  font-weight: 600;
}

/* ---------- Schedule ------------ */

.grid4 {
  background-color: #f7f8fa;
}

.grid6 {
  background-color: #f7f8fa;
  grid-template-columns: 25% 1fr;
  gap: 1rem;
  padding: 1rem;
}

.grid6 .grid-col-1 {
  background-color: #fff;
  border-radius: 10px;
  padding: 1rem;
}

.grid6 .grid-col-1 button {
  /* width: 100%; */
  text-align: left;
  margin-top: 0.7rem;
  padding: 0.8rem;
  border-radius: 5px;
  border: none;
  background-color: #f7f8fa;
  font-weight: 600;
  font-size: 0.9em;
  cursor: pointer;
}

.grid6 .grid-col-1 button:hover {
  background-color: #edf5ec;
  transition: 0.3s;
}

.grid6 .grid-col-1 button span {
  vertical-align: middle;
  font-size: 1.5em;
}

.grid6 .grid-col-1 .connect {
  margin-top: 2.5rem;
}

.grid6 .grid-col-1 .connect .google {
  display: flex;
  align-items: center;
  /* width: 100%; */
  justify-content: space-between;
  margin-top: 0.5rem;
  padding: 0.5rem;
  background-color: #f7f8fa;
  border-radius: 5px;
  cursor: pointer;
}

.grid6 .grid-col-1 .connect .google:hover {
  background-color: #edf5ec;
  transition: 0.3s;
}

.grid6 .grid-col-1 .connect .google h5 {
  font-size: 0.9em;
}

.grid6 .grid-col-1 .connect .google h5 img {
  vertical-align: middle;
  width: 30px;
}

.grid6 .grid-col-1 .connect .google span {
  font-size: 1.3em;
}

.grid6 .grid-col-1 .meeting {
  margin-top: 1.5rem;
}

.grid6 .grid-col-1 .meeting .meetings {
  margin: 1rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  gap: 10px;
}

.grid6 .grid-col-1 .meeting .meetings h4 {
  border-bottom: 2px solid #e3e8f1;
  padding-bottom: 0.5rem;
  font-weight: 400;
  margin-top: 0.7rem;
  /* cursor: pointer; */
}

.grid6 .grid-col-1 .meeting .meetings h4:hover {
  /* font-weight: 600; */
}

.grid6 .grid-col-2 {
  background-color: #fff;
  border-radius: 10px;
}

.grid6 .grid-col-2 .custom2 {
  position: relative;
}

.grid6 .grid-col-2 .custom2 select {
  display: none;
}

.grid6 .grid-col-2 .custom2 .select-selected {
  background: none;
  border: 1px solid #080d1b;
  border-radius: 6px;
  padding: 0.7rem 1rem 0.7rem 1rem;
  color: #080d1b;
  font-size: 0.9em;
  font-weight: 600;
}

.grid6 .grid-col-2 .custom2 .select-selected:after {
  position: absolute;
  font-family: "Material Icons";
  content: "\e5cf";
  top: 12px;
  right: 30px;
  font-size: 16px;
  width: 0;
  height: 0;
}

.grid6 .grid-col-2 .custom2 .select-selected.select-arrow-active:after {
  font-family: "Material Icons";
  content: "\e5ce";
  top: 12px;
}

.grid6 .grid-col-2 .custom2 .select-items div,
.select-selected {
  color: #080d1b;
  font-size: 0.8em;
  user-select: none;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent #080d1b transparent;
  cursor: pointer;
}

.grid6 .grid-col-2 .custom2 .select-items {
  position: absolute;
  background-color: #ffffff;
  border: 1px solid #dddee0;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  border-radius: 5px;
}

.grid6 .grid-col-2 .custom2 .select-hide {
  display: none;
}

.grid6 .grid-col-2 .custom2 .select-items div:hover,
.same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}

.grid6 .grid-col-2 .section-top {
  padding: 1rem 1rem 0rem 1rem;
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid #eeeeef;
}

.grid6 .grid-col-2 .section-top .headings {
  display: flex;
  align-items: flex-end;
  gap: 2rem;
  white-space: nowrap;
}

.grid6 .grid-col-2 .section-top .headings .border {
  border-bottom: 2px solid #080d1b;
  padding: 0rem 1rem;
}

.grid6 .grid-col-2 .section-top .headings h3 {
  font-size: 1.4em;
  line-height: 4.2rem;
}

.grid6 .grid-col-2 .section-top .headings .bold {
  font-size: 1em;
  line-height: 3.5rem;
}

.grid6 .grid-col-2 .section-top .headings .no-bold {
  font-size: 1em;
  font-weight: 100;
  line-height: 3.8rem;
}

.grid6 .grid-col-2 .section-top .headings .bold span {
  font-size: 0.7em;
  background: linear-gradient(to left, #01bde5 0%, #02508d 100%) !important;
  padding: 0.2rem;
  border-radius: 5px;
  vertical-align: middle;
  color: #fff;
}

.grid6 .grid-col-2 .section-top .headings .no-bold span {
  font-size: 0.7em;
  background-color: #eeeeef;
  padding: 0.2rem;
  border-radius: 5px;
  vertical-align: middle;
  color: #767982;
}

.grid6 .grid-col-2 .section-top .drpdwn-searcher {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.grid6 .grid-col-2 .section-top .drpdwn-searcher .searcher {
  background-color: #f7f8fa;
  border-radius: 5px;
  padding: 0.3rem;
}

.grid6 .grid-col-2 .section-top .drpdwn-searcher .searcher span {
  vertical-align: middle;
  color: #888a91;
}

.grid6 .grid-col-2 .section-top .drpdwn-searcher .searcher span:hover {
  color: #01b9e2;
}

.grid6 .grid-col-2 .section-top .drpdwn-searcher .searcher input {
  padding: 0.5rem 1rem;
  background: none;
  border: none;
  outline: none;
}

.grid6 .grid-col-2 .main-section .table4 {
  width: 100%;
  text-align: left;
}

.grid6 .grid-col-2 .main-section .table4 tr th {
  color: #999ba1;
  padding: 1rem 1.5rem;
  background-color: #f7f8fa;
  border-bottom: 2px solid #eeeeef;
  letter-spacing: 1px;
  white-space: nowrap;
}

.grid6 .grid-col-2 .main-section .table4 tr td {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #eeeeef;
}

.grid6 .grid-col-2 .main-section .table4 tr .col-1 {
  width: 18%;
  vertical-align: top;
  white-space: nowrap;
}

.grid6 .grid-col-2 .main-section .table4 tr .col-2 {
  width: 60%;
}

.grid6 .grid-col-2 .main-section .table4 tr .col-2 .flex {
  display: flex;
  justify-content: space-between;
}

.grid6 .grid-col-2 .main-section .table4 tr .col-2 .flex h5 {
  font-size: 1em;
  color: #777981;
  font-weight: 300;
}

.grid6 .grid-col-2 .main-section .table4 tr .col-2 .flex h6 {
  color: #777981;
  font-size: 1em;
  font-weight: 100;
  text-decoration: underline;
  cursor: pointer;
}

.grid6 .grid-col-2 .main-section .table4 tr .col-2 .flex h6 span {
  vertical-align: bottom;
  font-weight: 100;
  font-size: 1.2em;
}

.grid6 .grid-col-2 .main-section .table4 tr .col-2 .flex button {
  color: #01b9e2;
  font-size: 0.8em;
  font-weight: 300;
  background: none;
  outline: none;
  border: none;
  cursor: pointer;
}

.grid6 .grid-col-2 .main-section .table4 tr .col-2 .flex button span {
  vertical-align: middle;
  color: #01b9e2;
  font-size: 1.3em;
  font-weight: 600;
}

.grid6 .grid-col-2 .main-section .table4 tr .col-2 .flex2 div {
  display: flex;
  justify-content: space-between;
}

.grid6 .grid-col-2 .main-section .table4 tr .col-2 .flex2 div h5 {
  font-size: 1em;
  color: #777981;
  font-weight: 300;
}

.grid6 .grid-col-2 .main-section .table4 tr .col-2 .flex2 div button {
  color: #01b9e2;
  font-size: 0.8em;
  font-weight: 300;
  background: none;
  outline: none;
  border: none;
  cursor: pointer;
}

.grid6 .grid-col-2 .main-section .table4 tr .col-2 .flex2 div button span {
  vertical-align: bottom;
  color: #01b9e2;
  font-size: 1.3em;
  font-weight: 600;
  margin-bottom: 0.05rem;
}

.grid6 .grid-col-2 .main-section .table4 tr .col-2 .flex2 textarea {
  margin-top: 0.5rem;
  width: 100%;
  border: none;
  background-color: #f7f8fa;
  border-radius: 10px;
  padding: 1rem;
}

.grid6 .grid-col-2 .main-section .table4 tr .col-2 .flex2 .confirm {
  margin-top: 1rem;
}

.grid6 .grid-col-2 .main-section .table4 tr .col-2 .flex2 .confirm .name {
  display: flex;
  flex-direction: column;
}

.grid6 .grid-col-2 .main-section .table4 tr .col-2 .flex2 .confirm .name h6 {
  color: #666971;
  font-weight: 100;
  font-size: 0.9em;
  margin-top: 0.4rem;
}

.grid6
  .grid-col-2
  .main-section
  .table4
  tr
  .col-2
  .flex2
  .confirm
  .name
  h6
  span {
  vertical-align: bottom;
  color: #666971;
  font-size: 1.1em;
  font-weight: 400;
}

.grid6 .grid-col-2 .main-section .table4 tr .col-2 .flex2 .confirm button {
  border: 1px solid #080d1b;
  border-radius: 8px;
  padding: 0 1rem;
  font-size: 0.9em;
  color: #080d1b;
  font-weight: 600;
  line-height: 20px;
}

.grid6 .grid-col-2 .main-section .table4 tr .col-2 .flex2 .confirm button span {
  vertical-align: middle;
  color: #080d1b;
}

.grid6
  .grid-col-2
  .main-section
  .table4
  tr
  .col-2
  .flex2
  .confirm
  button:hover {
  background-color: #080d1b;
  color: #fff;
  transition: 0.3s;
}

.grid6
  .grid-col-2
  .main-section
  .table4
  tr
  .col-2
  .flex2
  .confirm
  button:hover
  span {
  color: #fff;
  transition: 0.3s;
}

.grid6 .grid-col-2 .main-section .table4 tr .col-3 {
  padding: 1rem 0;
  vertical-align: top;
}

.grid6 .grid-col-2 .main-section .table4 tr .col-3 h6 {
  color: #666971;
  font-weight: 100;
  font-size: 0.7em;
  margin-top: 0.4rem;
}

.grid6 .grid-col-2 .main-section .table4 tr .col-3 h6 span {
  vertical-align: bottom;
  color: #666971;
  font-size: 1.3em;
  font-weight: 400;
}

.grid6 .grid-col-2 .main-section .table4 tr .col-3 .flex2 textarea {
  margin-top: 0.5rem;
  width: 100%;
  border: none;
  background-color: #f7f8fa;
  border-radius: 10px;
  padding: 1rem;
}

.grid6 .grid-col-2 .main-section .table4 tr .col-3 .flex2 .confirm button {
  border: 1px solid #080d1b;
  border-radius: 8px;
  padding: 0 1rem;
  font-size: 0.9em;
  color: #080d1b;
  font-weight: 600;
  line-height: 20px;
}

.grid6 .grid-col-2 .main-section .table4 tr .col-3 .flex2 .confirm button span {
  vertical-align: middle;
  color: #080d1b;
}

.grid6
  .grid-col-2
  .main-section
  .table4
  tr
  .col-3
  .flex2
  .confirm
  button:hover {
  background-color: #080d1b;
  color: #fff;
  transition: 0.3s;
}

.grid6
  .grid-col-2
  .main-section
  .table4
  tr
  .col-3
  .flex2
  .confirm
  button:hover
  span {
  color: #fff;
  transition: 0.3s;
}

.grid6 .grid-col-2 .main-section .records {
  display: flex;
  justify-content: space-between;
  padding: 1.5rem;
  background-color: #fff;
  border-radius: 0px 0px 10px 10px;
  font-size: 0.9em;
  color: #525560;
}

.grid6 .grid-col-2 .main-section .records div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.grid6 .grid-col-2 .main-section .records #arrow {
  margin-left: 0.2rem;
  padding: 0.3rem;
  border-radius: 50%;
  cursor: pointer;
}

.grid6 .grid-col-2 .main-section .records #arrow:hover {
  background-color: #eeeeef;
  transition: 0.3s;
}

.grid6 .grid-col-2 .main-section .records div #pages {
  background-color: #eeeeef;
  border-radius: 5px;
  padding: 0.2rem 0.3rem 0rem 0.3rem;
  cursor: pointer;
}

.grid6 .grid-col-2 .main-section .records span {
  vertical-align: middle;
}

.selected {
  background: #c7f9c7 !important;
}

.searcher {
  background-color: white;
}

main {
  height: 90.5vh;
  background-color: #f7f8fa;
}

.main {
  background-color: #f7f8fa;
}

.select {
  background-color: #f6f7f7;
  border-radius: 5px;
  border: none;
  padding: 1rem 0.5rem;
  width: 100%;
  font-weight: 600;
  color: #000000;
}

/*--------------CHAT------------*/

.grid3 .grid-col-2 .chatntime {
  padding: 1rem;
}

.grid3 .grid-col-2 .chat .main-time {
  margin: 1rem auto;
  width: fit-content;
  padding: 0.5rem;
  background-color: #f7f8fa;
  border-radius: 5px;
  color: #767982;
  font-size: 0.8em;
}

.darker {
  margin: 2rem 0rem 2rem 0rem;
  display: flex;
  flex-direction: row;
  column-gap: 0.5rem;
  justify-content: end;
}

.darker div {
  display: flex;
  flex-direction: column;
  align-self: flex-end;
}

.darker span {
  align-self: flex-end;
  font-size: 0.7em;
  color: #82818e;
  padding-top: 0.8rem;
}

.darker img {
  align-self: start;
}

.darker #all-text {
  margin-left: auto;
  margin-right: 0;
  margin-top: 0.5rem;
  color: #080d1b;
  font-size: 0.8em;
  background-color: #e4fae6;
  padding: 1rem 3rem 1rem 0.5rem;
  border-radius: 12px 0px 12px 12px;
  width: fit-content;
  /* max-width: 70%; */
}

.darker #all-image {
  margin-top: 0.5rem;
}

.chatntime .darker .time {
  font-weight: 600;
}

.darker p span {
  color: #080d1b;
  font-size: 1em;
  font-weight: 600;
}

.chatntime .container2 {
  margin-top: 2rem;
}

.chatntime .container2 .voice span {
  font-size: 1.2em;
  color: #080d1b;
  font-weight: 600;
  vertical-align: bottom;
}

.chatntime .container2 .voice {
  display: flex;
  align-items: center;
  background-color: #edf1f4;
  margin-top: 0.5rem;
  max-width: 30%;
  padding: 1rem;
  border-radius: 0px 12px 12px 12px;
  gap: 0.5rem;
}

.chatntime .container2 .voice .audio {
  width: 100%;
}

.chatntime .container2 .voice #duration {
  font-size: 0.75em;
}

.chatntime .container2 .time {
  font-size: 0.7em;
  color: #82818e;
  font-weight: 600;
}

.chatntime .container .time {
  font-size: 0.7em;
  color: #82818e;
  font-weight: 600;
}

.chatntime .container .txxt {
  background-color: #edf1f4;
  margin-top: 0.5rem;
  width: fit-content;
  padding: 1rem 3rem 1rem 1rem;
  border-radius: 0px 12px 12px 12px;
  font-size: 0.8em;
  /* max-width: 70%; */
  position: relative;
}

.chatntime .container h4 {
  position: absolute;
  font-size: 1.1em;
  border: 1px solid #eeeeef;
  top: 37px;
  padding: 0.1rem 0.7rem;
  border-radius: 30px;
  background-color: #fff;
}

.chatntime .container p span {
  color: #080d1b;
  font-size: 1em;
  font-weight: 600;
}

.chatntime hr {
  margin-top: 1rem;
}

.chatntime .message {
  padding: 0.5rem;
  border-radius: 10px;
  margin-top: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  margin-bottom: 0;
  background-color: #f7f8fa;
  outline: 2px solid #3bb347;
  box-shadow: 0px 0px 0px 8px rgba(59, 178, 71, 0.07);
  position: sticky;
}

.chatntime .message input {
  width: 100%;
  padding: 0.5rem 0rem 0.5rem 0rem;
  margin-left: 1rem;
  margin-right: 1rem;
  border: none;
  outline: none;
  background: none;
  font-size: 1em;
}

.chatntime .message div {
  display: flex;
  gap: 0.5rem;
}

.chatntime .message span {
  cursor: pointer;
  color: #999ba1;
}

.chatntime .message div span {
  margin-right: 0.7rem;
}

.chatntime .message div #green {
  color: #01b9e2;
}

.chatntime .message span:hover {
  color: #01b9e2;
  transition: 0.3s;
}

.completed {
  color: black;
}

.period-selector__button {
  position: inherit !important;
  padding: 0 16px !important;
}

.searchBtn {
  color: #191e2b;
  background-color: #fff;
  border: 1px solid #191e2b;
  border-radius: 6px;

  font-size: 1em;
  width: 100%;
  padding: 0.7em;
  /* box-shadow: 0px 4px 4px rgba(47, 42, 87, 0.25); */
  cursor: pointer;
}

.searchBtn:hover {
  color: white;
  background: linear-gradient(to left, #01bde5 0%, #02508d 100%) !important;
}

.companyInfo {
  color: #191e2b;
}

/* -------------------- MEDIA QUERIES ------------------- */

@media (max-width: 1820px) {
  .page5 .modal1 .popup .form .form4 .table2 tbody tr td button {
    right: 130px;
  }
}

@media (max-width: 1700px) {
  .page5 .modal1 .popup .form .form4 .table2 tbody tr td button {
    right: 110px;
  }

  .grid6 .grid-col-1 {
    font-size: 0.85em;
  }
}

@media (max-width: 1560px) {
  .page5 .modal1 .popup .buttons {
    font-size: 0.8em;
  }

  .page5 .modal1 .popup .form .form4 .table2 tbody tr td button {
    right: 100px;
  }

  .grid6 .grid-col-2 {
    font-size: 0.8em;
  }
}

@media (max-width: 1516px) {
  .grid4 .modal1 .company-name .company .intro {
    margin-top: 3rem;
  }

  .page5 .modal1 .popup .form .form4 .table2 tbody tr td button {
    position: unset;
    padding: 0.5rem 0.7rem;
  }
}

@media (max-width: 1500px) {
  .main-grid .main-col1 .col1-child2-cards .card .line img {
    max-width: 58%;
  }

  .main-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (max-width: 1430px) {
  .grid4 .modal1 .popup .table3 tr .col-3 {
    font-size: 0.8em;
  }

  .grid4 .modal1 .popup .table3 tr .col-3 span {
    font-size: 1.2em;
  }

  .grid3 .grid-col-1 .pinned .chatter .txt h6 {
    font-size: 0.8em;
  }

  .grid3 .grid-col-1 .all-messages .chatter .txt h6 {
    font-size: 0.8em;
  }

  .page5 .modal1 .popup .buttons {
    padding: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.7rem;
  }
}

@media (max-width: 1380px) {
  .grid3 .grid-col-2 .child-col-2.open-media {
    width: 40%;
    display: block;
  }

  .modal2 {
    width: 60%;
  }
}

@media (max-width: 1350px) {
  .grid4 {
    grid-template-columns: repeat(1, 1fr);
  }

  .grid4 .modal1 .company-name .company .intro div h3 {
    font-size: 1.1em;
  }

  .grid4 .modal1 .company-name .company .intro div h3 span {
    font-size: 1em;
  }

  .grid4 .modal1 .company-name .company .intro div p {
    font-size: 0.7em;
  }

  .grid4 .modal1 .company-name .company .intro {
    margin-top: 2.5rem;
  }

  .grid4 .modal1 .company-name .company .intro div img {
    width: 5%;
  }

  .grid3 {
    grid-template-columns: 300px 1fr;
  }
}

@media (max-width: 1320px) {
  .main-grid .main-col1 .col1-child2-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .page3 .main-grid2 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1250px) {
  .grid6 .grid-col-2 .custom2 {
    display: none;
  }
}

@media (max-width: 1200px) {
  .main-grid .main-col1 .col1-child2-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid4 .modal1 .company-name .company .intro .main-img {
    width: 15%;
  }

  .grid4 .modal1 .company-name .company .intro {
    margin-top: 1.5rem;
  }

  .grid2 .grid-col-2 {
    grid-column: span 2;
  }

  .grid2 .grid-col-3 {
    grid-column: span 2;
  }

  .grid2 .grid-col-1 {
    flex-wrap: wrap;
    gap: 2rem;
  }

  .grid2 .grid-col-1 .map {
    width: 100%;
  }

  .grid3 .grid-col-2 .child-col-2.open-media {
    width: 56%;
    display: block;
  }

  .modal1 .popup .heading {
    flex-wrap: wrap;
    gap: 1rem;
  }
}

@media (max-width: 1100px) {
  .grid6 {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (max-width: 1000px) {
  .page3 .main-grid2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid4 .grid-col-2 .section-top .drpdwn-searcher {
    flex-wrap: wrap;
  }

  .grid4 .grid-col-2 .section-top .drpdwn-searcher .searcher {
    display: inline-block;
  }

  .grid4 .grid-col-2 .main-section .companies .company .txt h3 {
    font-size: 1.1em;
  }

  .grid4 .grid-col-2 .main-section .companies .company .txt p {
    font-size: 0.8em;
  }

  .grid4 .modal1 .popup .table3 thead {
    /* display: none; */
  }

  .grid4 .modal1 .popup .table3,
  .table3 tbody,
  .table3 tr,
  .table3 td {
    /* display: block; */
    width: 100% !important;
  }

  .grid4 .modal1 .popup .table3 tr td {
    text-align: right;
    position: relative;
  }

  .grid4 .modal1 .popup .table3 tr td:before {
    /* content: attr(title); */
    position: absolute;
    left: 0;
    padding-left: 1rem;
    color: #888a91;
    font-weight: 600;
  }

  .grid4 .modal1 .popup .table3 tr .col-1 {
    width: 100%;
  }

  .grid4 .modal1 .popup .table3 tr .col-2 {
    width: 100% !important;
  }

  .grid4 .modal1 .popup .table3 tr .col-2 .flex {
    display: inline-block;
    padding-right: 0;
    font-size: 0.8em;
  }

  .grid4 .modal1 .popup .table3 tr .col-3 {
    padding: 1rem 1rem;
    font-size: 0.8em;
    width: 100% !important;
  }

  .grid4 .modal1 .popup .table3 tr .col-3 span {
    font-size: 1.5em;
  }

  .grid4 .modal1 .company-name .company .intro {
    margin-top: 1.5rem;
  }

  .grid4 .modal1 .popup .main-section2 {
    padding: 1rem;
  }

  .grid4 .modal1 .popup .main-section2 .meeting-stat {
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    margin-top: 2rem;
  }

  .grid4 .modal2 {
    width: 65%;
  }

  .page5 .child2 .intro {
    align-items: center;
    margin-top: 1rem;
    margin-left: 1rem;
  }

  .page5 .child2 .intro .main-img2 {
    width: 20%;
  }

  .grid2 .grid-col-1 .conference .imgs {
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }

  .grid3 {
    grid-template-columns: repeat(1, 1fr);
  }

  header .search-wrapper {
    display: none;
  }

  header #bell {
    display: none;
  }

  header #info {
    display: none;
  }

  .page-info {
    white-space: nowrap;
  }

  .user-wrapper {
    margin-left: auto;
    margin-right: 0;
    width: 170px;
  }

  .modal0 {
    width: 80%;
  }

  .page5 .childd-2 {
    margin-top: 1rem;
  }

  .page5 .childd-2 .input1 {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .page5 .childd-2 .input2 {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .page5 .childd-2 .input2 .bttns {
    justify-content: flex-end;
  }

  .page5 #modal8 {
    width: 70%;
  }

  .page5 .modal1 .popup .heading {
    padding: 0.5rem;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .page5 .modal1 .popup .form {
    padding: 1rem;
  }

  .page5 .modal1 {
    width: 90%;
  }

  .page5 .modal1 .popup .form .message .button2 #bttn1 {
    font-size: 0.7em;
    white-space: nowrap;
    padding-left: 1rem;
  }

  .page5 .modal1 .popup .form .form1 {
    width: 100%;
  }

  .chatntime .container2 .voice {
    max-width: 60%;
  }
}

@media (max-width: 870px) {
  header .page-info h3 {
    font-size: 1.2em;
  }

  .main-grid .main-col1 .col1-child3-grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .main-grid .main-col1 .col1-child3-grid .child-col2 {
    grid-column: 1;
    grid-row: 3;
  }

  .main-grid .main-col1 .col1-child3-grid .child-col3 {
    grid-column: 1;
    grid-row: 4;
  }

  .main-grid .main-col1 .col1-child1 .buttons {
    margin-right: -1rem;
  }

  .main-grid .main-col1 .col1-child1 .buttons span {
    margin-top: 0.5rem;
  }

  .sidebar i {
    visibility: visible;
  }

  .main.open-bar2 {
    margin-left: 0px;
  }

  .main {
    margin-left: 0px;
  }

  .sidebar {
    width: 0px;
  }

  .sidebar.open-bar {
    width: 300px;
  }

  .dashbtn {
    display: none;
  }

  .page3 .child1 {
    flex-wrap: wrap;
  }

  .page3 .child1 .organize {
    white-space: nowrap;
  }

  .page3 .child1 .buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .page5 .child1 {
    flex-wrap: wrap;
  }

  .page5 .child1 .organize {
    white-space: nowrap;
  }

  .page5 .child1 .buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .grid4 .modal1 .company-name .company .intro {
    margin-top: 1.3rem;
    margin-left: -0.5rem;
  }
}

@media (max-width: 804px) {
  .page3 .child1 .buttons {
    margin-left: 0.7rem;
  }

  .page5 .child1 .buttons {
    margin-left: 0.7rem;
  }
}

@media (max-width: 750px) {
  .main-grid .main-col1 .col1-child1 {
    flex-wrap: wrap;
  }

  .main-grid .main-col1 .col1-child1 .message h3 {
    font-size: 1em;
    font-weight: 100;
  }

  .main-grid .main-col1 .col1-child1 .message h3 span {
    font-weight: 600;
  }

  .main-grid .main-col1 .col1-child1 .message p {
    font-size: 0.7em;
    color: #a8a8b0;
  }

  .page3 .main-grid2 {
    grid-template-columns: repeat(1, 1fr);
  }

  .page5 .modal1 .popup .form .form4 .table2 thead {
    display: none;
  }

  .page5 .modal1 .popup .form .form4 .table2,
  .table2 tbody,
  .table2 tr,
  .table2 td {
    display: block;
    width: 100%;
  }

  .page5 .modal1 .popup .form .form4 .table2 tr td {
    text-align: right;
    position: relative;
  }

  .page5 .modal1 .popup .form .form4 .table2 tr td:before {
    /* content: attr(title); */
    position: absolute;
    left: 0;
    padding-left: 1rem;
    color: #888a91;
    font-size: 0.8em;
    font-weight: 600;
    margin-top: 0.5rem;
  }

  .page5 .modal1 .popup .form .form4 .table2 {
    padding: 0rem;
  }

  .page5 .modal1 .popup .form .form4 .table2 tbody tr td input[type="date"],
  input[type="time"] {
    width: 40%;
  }
}

@media (max-width: 480px) {
  .main-grid
    .main-col1
    .col1-child3-grid
    .child-col2
    .mini-grid
    .meetings
    span {
    font-size: 1.5em;
  }

  .main-grid .main-col1 .col1-child3-grid .child-col2 .mini-grid .meetings h4 {
    font-size: 1em;
  }

  .main-grid .main-col1 .col1-child3-grid .child-col2 .mini-grid .meetings p {
    font-size: 0.7em;
  }

  .main-grid .main-col1 .col1-child3-grid .child-col2 .mini-grid {
    grid-template-columns: repeat(2, 1fr);
    height: 650px;
  }

  .main-grid .main-col1 .col1-child3-grid .child-col2 .mini-grid .meetings {
    border: none;
  }

  .main .page-info h3 {
    font-size: 1em;
    white-space: nowrap;
  }

  .user-wrapper {
    width: 130px;
  }

  .user-wrapper h5 {
    font-size: 0.7em;
  }

  .user-wrapper small {
    font-size: 0.5em;
  }

  .main-grid .main-col1 .col1-child2-cards {
    grid-template-columns: repeat(1, 1fr);
  }

  .main-grid .main-col2 .card .details {
    padding-left: 0rem;
  }

  .main-grid .main-col2 .card .company h3 {
    font-size: 0.95em;
    margin-left: 0;
  }

  .main-grid .main-col2 .card .company p {
    font-size: 0.65em;
    margin-left: 0;
  }

  .main-grid .main-col2 .card .company2 h3 {
    font-size: 0.95em;
    margin-left: 0;
  }

  .main-grid .main-col2 .card .company2 p {
    font-size: 0.65em;
    margin-left: 0;
  }

  .main-grid .main-col2 .activity ul {
    margin-left: 0;
  }

  .main-grid .main-col2 .activity li {
    font-size: 0.75em;
  }

  .main-grid .main-col2 .activity h6 {
    font-size: 0.7em;
  }

  .main-grid .main-col2 .guide {
    padding: 1rem;
  }

  .main-grid .main-col2 .guide h3 {
    font-size: 1em;
  }

  .main-grid .main-col2 .guide p {
    font-size: 0.75em;
  }

  .main-grid .main-col1 .col1-child1 .buttons {
    margin-right: 0rem;
  }

  .main-grid .main-col1 .col1-child3-grid .child-col3 .buttons div h4 {
    font-size: 0.9em;
  }

  .main-grid .main-col1 .col1-child3-grid .child-col3 .buttons div p {
    font-size: 0.7em;
  }

  .grid4 .grid-col-2 .section-top .drpdwn-searcher {
    display: block;
  }

  .grid4 .grid-col-2 .main-section .companies {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .grid4 .grid-col-2 .main-section .companies .buttons {
    margin-left: 0.6rem;
  }

  .grid4 .grid-col-2 .section-top .headings {
    flex-wrap: wrap;
  }

  .grid4 .grid-col-2 .main-section .companies .company .txt h3 {
    font-size: 0.9em;
  }

  .grid4 .grid-col-2 .main-section .companies .company .txt p {
    font-size: 0.6em;
  }

  .grid4 .grid-col-1 .index .nested-btns button {
    width: 28px;
    padding: 0.4rem 0.4rem;
  }

  .grid4 .grid-col-2 .main-section .records {
    flex-wrap: wrap;
    padding: 0.5rem 0rem;
    margin-left: 0.2rem;
  }

  .grid4 .modal1 {
    width: 100%;
  }

  .modal1 .popup .heading {
    flex-wrap: wrap;
    gap: 1rem;
    padding-left: 0.5rem;
  }

  .grid4 .modal1 .company-name .company {
    /* background-image: url(./images/frame1.png); */
  }

  .grid4 .modal1 .company-name .company .intro div h3 {
    font-size: 0.9em;
  }

  .grid4 .modal1 .company-name .company .intro div h3 span {
    font-size: 1em;
  }

  .grid4 .modal1 .company-name .company .intro div p {
    font-size: 0.7em;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }

  .grid4 .modal1 .company-name .company .intro {
    flex-wrap: wrap;
    margin-top: 2rem;
  }

  .grid4 .modal1 .company-name .company .intro div img {
    width: 10%;
  }

  .grid4 .modal1 .company-name .company .intro .main-img {
    width: 30%;
  }

  .grid4 .modal1 .popup .message .bttn1 span {
    font-size: 1em;
  }

  .grid4 .modal1 .popup .message {
    margin: 1rem 0.5rem;
    padding: 0.5rem;
  }

  .grid4 .modal1 .popup .message p {
    font-size: 0.6em;
  }

  .grid4 .modal1 .popup .table3 tr .col-3 {
    padding-top: 2rem;
    text-align: left;
  }

  .grid4 .modal1 .popup .table3 tr .col-3:before {
    top: 5px;
  }

  .grid4 .modal1 .popup .main-section2 .hurray {
    flex-wrap: wrap;
    font-size: 0.8em;
    justify-content: center;
  }

  .grid4 .modal1 .popup .main-section2 .meeting-stat .clock {
    width: 100%;
  }

  .grid4 .modal1 .popup .main-section2 .meeting-stat .meeting .status .txt1 {
    font-size: 0.8em;
  }

  .grid4 .modal1 .popup .main-section2 .meeting-stat .meeting .status .txt2 {
    font-size: 0.8em;
  }

  .grid4 .modal2 {
    width: 100%;
  }

  .page5 .child2 {
    /* background-image: url(./images/frame1.png); */
    margin-top: 1rem;
  }

  .page5 .child2 .intro {
    flex-wrap: wrap;
    align-items: center;
    margin-top: 2rem;
    margin-left: -0.5rem;
  }

  .page5 .child2 .intro .main-img2 {
    width: 30%;
  }

  .page5 .child2 .intro div p {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.7em;
  }

  .page5 .child2 .intro div h3 {
    font-size: 1.1em;
  }

  .grid2 .grid-col-1 {
    padding: 1rem;
  }

  .grid2 .grid-col-1 .conference .heading p {
    font-size: 0.75em;
  }

  .grid2 .grid-col-2 .dates {
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
  }

  .grid2 .grid-col-2 .upcoming .upcoming1 {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .grid2 .grid-col-2 .upcoming .upcoming1 .text1 h3 {
    font-size: 1em;
  }

  .grid2 .grid-col-2 .upcoming .upcoming1 .text1 p {
    font-size: 0.7em;
  }

  .grid2 .grid-col-3 .activity ul {
    margin-left: 0;
  }

  .grid2 .grid-col-3 .activity li {
    font-size: 0.75em;
  }

  .grid2 .grid-col-3 .activity h6 {
    font-size: 0.7em;
  }

  .grid3 .grid-col-2 .display .dp .txt h6 {
    font-size: 0.8em;
  }

  .grid3 .grid-col-2 .display .dp .txt p {
    font-size: 0.65em;
  }

  .chatntime .container h4 {
    top: 80px;
  }

  .chatntime .darker .right {
    width: 7%;
  }

  .darker #all-text {
    padding: 1rem;
  }

  .modal0 {
    width: 100%;
  }

  .modal0 .attendees .attendee .content .txt h4 {
    font-size: 0.8em;
  }

  .modal0 .attendees .attendee .content .txt p {
    font-size: 0.7em;
  }

  .modal0 .attendees .attendee .start-convo {
    font-size: 0.6em;
  }

  .modal0 .searcher input {
    width: 90%;
  }

  .grid3 .child-col-1.open-chat {
    width: 0;
    display: none;
  }

  .grid3 .grid-col-2 .child-col-2 {
    border-left: none;
  }

  .grid3 .grid-col-2 .child-col-2.open-media {
    width: 100%;
    display: block;
  }

  .page5 #modal8 {
    width: 100%;
  }

  .page5 .modal1 .formm {
    padding: 0.5rem;
  }

  .page5 .modal1 .formm label {
    font-size: 0.85em;
  }

  .page5 .modal1 .popup .buttons {
    flex-direction: column;
  }

  .page5 .modal1 {
    width: 100%;
  }

  .page5 .modal1 .popup .form .form1 {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .page5 .modal1 .popup .form .form1 .name h4 {
    font-size: 0.8em;
  }

  .page5 .modal1 .popup .form .form1 .field {
    width: 100%;
  }

  .page5 .modal1 .popup .form .form2 {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.3rem;
  }

  .page5 .modal1 .popup .form .form2 .field {
    width: 100%;
  }

  .page5 .modal1 .popup .form .form2 .name {
    width: 50%;
  }

  .page5 .modal1 .popup .form .multi-forms {
    flex-direction: column;
  }

  .page5 .modal1 .popup .form #add-row {
    margin-top: 1rem;
  }

  .page5 .modal1 .popup .form .form5 {
    margin: 1rem 0rem;
    padding: 0.5rem 0rem;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 2rem;
  }

  .page5 .modal1 .popup .form .form5 .meet {
    width: 100%;
  }

  .modal2 {
    width: 100%;
  }

  .page5 .modal1 .popup .form .form5 .location .pop {
    left: 90px;
    top: 25px;
  }

  .chatntime .container2 .voice {
    max-width: 70%;
  }
}

.participantBox {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.nameTag {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white !important;
  margin-top: 0px !important;
  font-size: 15px !important;
}