body {
  color: #153b62;
}
* {
  font-family: "Roboto";
  font-weight: 300;
  user-select: none;
  -webkit-user-select: none;
}
div {
  box-sizing: border-box;
  display: block;
}
input,
input:focus,
select:focus,
textarea {
  font-size: 16px;
  outline: none;
  user-select: initial !important;
  -webkit-user-select: initial !important;
}
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

.app-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-image: url("/static/bg.png");
  background-repeat: no-repeat;
  background-size: cover;
}

#myapp {
  width: 100%;
  height: 100vh;
  max-width: 480px;
  position: relative;
  background-color: white;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

/* Media query for larger screens */
@media screen and (min-width: 481px) {
  #myapp {
    height: 95vh;
    border-radius: 20px;
  }
}

/* Login screen */
.login-screen {
  width: 100%;
  height: 100%;
  position: relative;
  left: 0;
  top: 0;
  /* user-select: none;
     */
  opacity: 0;
  transition: 0.6s;
  margin-top: 20px;
}
.login-screen.shown {
  opacity: 1;
}
.login-screen img {
  width: 72px;
  max-width: min(100%, 329px);
  left: 60px;
  transform: translate(-50%, -10px);
  position: absolute;
  top: 6px;
  transition: 0.3s;
}
.login-screen img.euroadvance {
  width: 72px;
  max-width: min(100%, 329px);
  left: 145px;
  transform: translate(-50%, -10px);
  position: absolute;
  top: 6px;
  transition: 0.3s;
}
.login-screen img.consulting {
  width: 72px;
  max-width: min(100%, 329px);
  left: 145px;
  transform: translate(-50%, -10px);
  position: absolute;
  top: 20px;
  transition: 0.3s;
}

.login-screen  .goto-login-btn {
  background-color: #1D3557;
  color: #fff;
  font-size: 13px;
  border-radius: 50px;
  position: absolute;
  right: 30px;
  top: -1px;
  font-weight: bold;
  padding: 8px;
  z-index: 5;
}

.login-screen img.profile-pic {
  border-radius: 50%;
  width: 80px;
  height: 80px;
  left: 50%;
  object-fit: cover;
  border: 1px solid #2f7b69;
  padding: 6px;
  margin-top: 15px;
}
.login-screen.shown img {
  transform: translate(-50%, 0);
}
.login-screen .login-content {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin-top: 240px;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 30px;
  padding-bottom: 60px;
  box-sizing: border-box;
  background-color: #1d3557; /* Dark blue background */
  border-radius: 20px; /* Rounded corners */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}
.login-screen .login-content .registered {
  font-weight: 500;
  font-size: large;
  color: #fff;
  display: flex;
  justify-content: center;
}
.login-screen .forgot-password {
  position: absolute;
  top: 250px;
  text-align: center;
  color: white;
  width: 85%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.login-screen .forgot-password a {
  text-decoration: none !important;
  color: inherit;
}

.login-screen .forgot-password span {
  font-weight: 400;
  letter-spacing: 1px;
  font-size: 87%;
}
.login-screen .fp-title {
  position: absolute;
  top: 10px;
  text-align: center;
  font-weight: 400;
  font-size: x-large;
  color: #1d3557;
  width: 85%;
}
.login-screen .fp-forgot-password {
  position: absolute;
  top: 294px;
  text-align: center;
  color: #1d3557;
  width: 100%;
}
.login-screen .fp-forgot-password a {
  text-decoration: none !important;
  color: inherit;
}

.login-screen .fp-forgot-password span {
  font-weight: 400;
  letter-spacing: 1px;
  font-size: 87%;
}
.login-screen .content {
  position: absolute;
  top: 164px;
  transform: translate(0, -50%);
  width: 100%;
  padding: 23px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.login-screen .content.profile {
  top: 291px;
  display: flex;
  align-items: stretch;
}
.login-screen .title {
  text-align: center;
  font-size: 10px; /* Adjust font size to match */
  font-weight: 500;
  letter-spacing: 1px;
  margin-bottom: 12px;
  transform: translateY(-15px);
  transition: 0.3s;
  opacity: 0;
  transition-delay: 0.1s;
  background-color: #003366; /* Background color */
  color: #ffffff; /* Text color */
  padding: 6px 10px; /* Padding to match size */
  border-radius: 20px; /* Rounded corners */
  display: inline-block; /* Ensure it fits content */
  border: none; /* Remove border if any */
  cursor: pointer; /* Pointer cursor to indicate clickable */
  margin-top: 8px; /* Space from top */
  margin-left: 70%;
}

.login-screen.shown .title {
  transform: translateY(0);
  opacity: 1;
}
.login-screen .vl {
  border-left: 1px solid #003366;
  height: 24px;
  position: absolute;
  top: 4px;
  left: 101px;
}

.login-screen .content .login-news .hr {
  color: #003366;
  width: 100%;
  text-align: left;
  margin-left: 0;
  margin-top: 48px;
}

.login-screen .content p {
  margin-top: 40px;
}

.login-screen .content .input-row {
  margin-bottom: 22px;
  display: block;
}

.login-screen .content .input-row.langs {
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-screen .content .input-row.langs .lang {
  border: 1px solid #ddd;
  border-radius: 4px;
  margin: 0 10px;
  padding: 6px;
  font-weight: 500;
}
.login-screen .content .input-row.langs .lang.active {
  background-color: rgba(67, 95, 124, 1);
  color: #fff;
}
.login-screen .content input {
  width: 100%;
  display: block;
  padding: 8px 12px;
  box-sizing: border-box;
  border: none;
  background-color: #eeeeee !important;
  border-radius: 4px;
  transition: 0.2s;
  /* box-shadow: 0px 0 20px rgb(0 0 0 / 8%); */
}
.login-screen .content .input-row.first {
  display: flex;
  align-items: center;
  transition-delay: 0.2s;
  transition: 0.3s;
  opacity: 0;
  transform: translateY(-10px);
  margin-top: 24px;
}
.login-screen.shown .content .input-row.first {
  transform: translateY(0);
  opacity: 1;
}
.login-screen .content .input-row.second {
  display: flex;
  align-items: center;
  transition-delay: 0.3s;
  transition: 0.3s;
  opacity: 0;
  transform: translateY(-10px);
}
.login-screen.shown .content .input-row.second {
  transform: translateY(0);
  opacity: 1;
}
.login-screen .content .input-row label {
  display: block;
  font-weight: 400;
  margin-bottom: 5px;
  letter-spacing: 1px;
  color: white;
  flex: 0 0 auto;
  margin-right: 10px;
}

.login-screen .content .input-row .lbl {
  display: block;
  font-weight: 400;
  margin-bottom: 5px;
  letter-spacing: 1px;
  color: #007aff;
}
.login-screen .content button {
  border: none;
  background: #007aff;
  color: #fff;
  padding: 10px 30px; /* Adjust padding for the pill shape */
  border-radius: 25px; /* Increase border-radius for the pill shape */
  font-weight: 400;
  letter-spacing: 1px;
  font-size: 15px;
  opacity: 0;
  transition: 0.3s;
  transition-delay: 0.25s;
  transform: translateY(-15px);
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.login-screen .content button.secondary-button {
  background: none;
  border: 2px solid #153b62;
  color: #153b62;
  margin-top: 20px;
}
.login-screen.shown .content button {
  opacity: 1;
  transform: translateY(0);
  margin-top: 6px;
}
.login-screen .back-button {
  background: none;
  border: 2px solid #153b62;
  color: #153b62;
  width: 100%;
  box-sizing: border-box;
  padding: 3px;
  border-radius: 4px;
  font-weight: 400;
  letter-spacing: 1px;
  font-size: 15px;
  transition: 0.3s;
  cursor: pointer;
  margin-top: 20px;
  margin-left: 5%;
}

.login-screen .back-button:hover {
  background: rgb(67, 95, 124);
  background: linear-gradient(
    90deg,
    rgba(67, 95, 124, 1) 0%,
    rgba(43, 128, 101, 1) 100%
  );
  color: #fff;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  input[type="password"] {
    font-family: Verdana;
    letter-spacing: 0.2em;
  }
}

.login-screen .error {
  color: #c3186b;
  width: calc(100% - 10px);
  position: absolute;
  left: 5px;
  background-color: #fff;
  padding: 2px;
  display: block;
  top: 5px;
  z-index: 6;
  box-sizing: border-box;
  padding: 21px;
  letter-spacing: 1px;
  border-radius: 6px;
  font-size: 90%;
  box-shadow: 0 0 12px #0000000d;
  opacity: 0.95;
  transform: translateY(calc(-100% - 26px));
  transition: 0.4s;
  opacity: 0;
}

.login-screen .error.shown {
  opacity: 0.95;
  transform: translateY(0);
}

.login-screen .success {
  color: #2b8065;
  font-size: 110%;
  width: calc(100% - 10px);
  position: absolute;
  left: 5px;
  background-color: #fff;
  padding: 2px;
  display: block;
  top: 5px;
  z-index: 6;
  box-sizing: border-box;
  padding: 21px;
  letter-spacing: 1px;
  border-radius: 6px;
  font-size: 90%;
  box-shadow: 0 0 12px #0000000d;
  opacity: 0.95;
  transform: translateY(calc(-100% - 26px));
  transition: 0.4s;
  opacity: 0;
}

.login-screen .success.shown {
  opacity: 0.95;
  transform: translateY(0);
}

.login-screen p {
  font-size: 85%;
  letter-spacing: 1px;
}

/* Dashboard */

.dashboard {
  display: block;
  width: 100%;
  top: 0;
  height: 100%;
  left: 0; /* background-color: #fff; */
  position: absolute;
  z-index: 5;
}

.dashboard .content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% - 66px);
  overflow-y: auto;
}

.dashboard-profile img {
  width: 98px;
  max-width: min(100%, 329px);
  left: 90%;
  transform: translate(-50%, -10px);
  position: absolute;
  top: 10px;
  transition: 0.3s;
}

.dashboard-profile img.profile-pic {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  object-fit: cover;
  padding: 6px;
}
.dashboard-profile img {
  transform: translate(-50%, 0);
}

#menu {
  background-color: rgb(255 255 255 / 36%);
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex; /* padding: 12px 0; */ /* box-shadow: 1px 1px #ddd; */ /* border-top: 1px solid #153B62; */
  opacity: 0;
  transform: translateY(70px);
  transition: 0.3s;
}

#menu .bubble {
  background-color: #d03535;
  width: 15px;
  height: 15px;
  line-height: 15px;
  display: inline-block;
  color: #fff;
  position: absolute;
  border-radius: 50%;
  font-size: 70%;
  right: 12px;
  top: 9px;
}

#menu.shown {
  opacity: 1;
  transform: translateY(0);
  /* visibility: visible; */
}

#menu .item {
  width: 20%;
  text-align: center;
  padding: 10px 0;
  display: block;
  text-decoration: none;
  color: inherit; /* color: #ddd; */
  position: relative;
}

#menu .item .icon {
  opacity: 1;
  font-size: 134%;
  display: block;
  margin-bottom: 5px;
  color: #878787;
}

#menu .item .caption {
  font-size: 79%; /* font-weight: 600; */
  color: #878787;
}

#menu .item.active .icon {
  opacity: 1;
  color: #153b62;
}

#menu .item.active .caption {
  font-weight: 400;
  color: #153b62;
}

#menu .item.active::before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: #153b62;
  position: absolute;
  top: 0;
  left: 0;
}

/* Container for news items */
.news-container {
  display: flex;
  overflow-x: auto;
  gap: 20px;
  padding-left: 20px;
  padding-right: 20px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.news-item-projects {
  flex: 0 0 100%;
  width: 320px;
  height: 220px;
  box-sizing: border-box;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: white;
  scroll-snap-align: start;
}

.news-item-projects .photo {
  width: 100%;
  display: block;
  padding-bottom: 33.33%;
  position: relative;
  background-color: #eff4f3;
}

.news-item-projects .photo img {
  background-color: #ddd;
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  height: 100%;
  object-fit: cover;
}

.news-item-projects .photo .new {
  position: absolute;
  right: 0;
  top: 0;
  background-color: #d03535;
  text-transform: uppercase;
  color: #fff;
  font-weight: 400;
  letter-spacing: 1px;
  padding: 3px 6px;
  font-size: 69%;
  border-radius: 4px;
}

.news-item-projects .photo .date-label {
  position: absolute;
  left: 10px;
  top: 10px;
  background-color: #2e5988;
  color: #fff;
  padding: 5px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

.news-item-projects .content {
  padding: 15px;
}

.news-item-projects .content::-webkit-scrollbar {
  display: none;
}

.news-item-projects .content .title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.news-item-projects .content .lead {
  color: #333;
  font-size: 14px;
  line-height: 1.4;
  overflow: visible; /* Ensures overflow content is visible */
  white-space: normal;
  padding-bottom: 10px;
  text-align: justify;
}

.news-item-projects .content .arrow {
  color: #153b62;
  display: flex;
  justify-content: flex-end;
  padding-bottom: 36px;
}

.news-container::-webkit-scrollbar {
  display: none;
}

.news-item {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: white;
  margin-bottom: 20px;
}

.news-item .photo {
  width: 100%;
  display: block;
  padding-bottom: 33.33%;
  position: relative;
  background-color: #eff4f3;
}

.news-item .photo img {
  background-color: #ddd;
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  height: 100%;
  object-fit: cover;
}

.news-item .photo .new {
  position: absolute;
  right: 0;
  top: 0;
  background-color: #d03535;
  text-transform: uppercase;
  color: #fff;
  font-weight: 400;
  letter-spacing: 1px;
  padding: 3px 6px;
  font-size: 69%;
  border-radius: 4px;
}

.news-item .photo .date-label {
  position: absolute;
  left: 10px;
  top: 10px;
  background-color: #2e5988;
  color: #fff;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: bold;
}

.news-item .content {
  padding: 15px;
}

.news-item .content .title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.news-item .content .lead {
  color: #333;
  font-size: 14px;
  line-height: 1.4;
  text-align: justify;
}

.news-item .content .arrow {
  color: #153b62;
  display: flex;
  justify-content: flex-end;
}

.news-screen {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  overflow-y: auto;
  height: calc(100% - 65px);
}

.news-screen.without-menu {
  height: 100%;
  padding: 23px;
}

.news-screen.without-menu .main-title img {
  width: 72px;
  max-width: min(100%, 329px);
  left: 60px;
  transform: translate(-50%, -10px);
  position: absolute;
  top: 36px;
  transition: 0.3s;
}
.news-screen.without-menu .main-title img.euroadvance {
  width: 72px;
  max-width: min(100%, 329px);
  left: 145px;
  transform: translate(-50%, -10px);
  position: absolute;
  top: 36px;
  transition: 0.3s;
}
.news-screen.without-menu .main-title img.consulting {
  width: 72px;
  max-width: min(100%, 329px);
  left: 145px;
  transform: translate(-50%, -10px);
  position: absolute;
  top: 50px;
  transition: 0.3s;
}

.news-screen.without-menu .main-title .goto-login-btn {
  background-color: #1D3557;
  color: #fff;
  font-size: 13px;
  border-radius: 50px;
  position: absolute;
  right: 30px;
  top: 19px;
  font-weight: bold;
  padding: 8px;
}

.news-screen .categories {
  display: flex;
  flex-wrap: wrap;
  padding-top: 6px;
  padding-bottom: 18px;
  justify-content: center;
  margin: -2px;
}

.news-screen .categories .badge {
  background-color: #007bff;
  color: white;
  text-align: center;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid rgb(200, 200, 200);
}

.news-screen .categories .badge.active {
  background-color: #ff9500 !important;
}

.news-screen .inner-content {
  padding: 15px;
}

.news-screen.without-menu .inner-content {
  padding: 10px;
  padding-top: 34px;
}

.news-screen .inner-content .lead {
  text-align: justify;
}

.news-screen .separator {
  background-color: #ddd;
  height: 5px;
  width: 80px;
  margin: 41px auto;
}

.news-screen .separator:last-child {
  display: none;
}

.news-screen .no-news-notification {
  text-align: center;
  font-size: 16px;
  margin-top: 20px;
}

.main-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 12px;
}

.full-screen-news {
  transition: 0.4s;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% - 60px); /* background-color: #fff; */
  background-color: #f1f1f1;
  visibility: hidden;
  opacity: 0;
  overflow-y: auto;
  transform: scale(0.95) translateY(-20px);
}

.full-screen-news.without-menu {
  height: 100%;
}

.full-screen-news.shown {
  opacity: 1;
  transform: none;
  visibility: visible;
}
/*
.full-screen-news .photo {
  width: 100%;
  display: block;
  position: relative;
  background-color: #000000;
}

.full-screen-news .photo img {
  width: 100%;
  background-color: #ddd;
  width: 100%;
}
*/
.full-screen-news .photo {
  width: 100%;
  height: 260px;
  display: block;
  position: relative;
  background-color: transparent;
  padding: 12px; /* Add padding */
  border-radius: 15px; /* Add curved edges */
}

.full-screen-news .photo img {
  width: 100%;
  height: 100%; /* Ensure the image maintains its aspect ratio */
  display: block;
  border-radius: 10px; /* Add curved edges to the image */
}

.full-screen-news .photo .new {
  position: absolute;
  right: 0;
  top: 0;
  background-color: #d03535;
  text-transform: uppercase;
  color: #fff;
  font-weight: 400;
  letter-spacing: 1px;
  padding: 3px 6px;
  font-size: 69%;
  border-radius: 4px;
  margin: 12px;
}

.full-screen-news .title {
  font-size: 24px;
  font-weight: bold;
  /* margin-bottom: 10px; */
  display: block;
  padding: 8px 12px; /* position: sticky; */ /* top: 0; */ /* background-color: #fff; */ /* z-index: 5; */
}

.full-screen-news .date {
  font-size: 80%;
  opacity: 0.85; /* margin-bottom: 16px; */
  padding: 12px;
  margin-bottom: 12px;
  /* padding-top: 0; */
}

.full-screen-news .lead {
  line-height: 132%;
  padding: 12px;
  text-align: justify;
}

.full-screen-news hr {
  /* margin: 20px 12px; */
  margin: 12px 12px;
  border: none;
  border-top: 1px solid #ddd;
}

.full-screen-news .back {
  /* padding: 5px 13px; */ /* padding-top: 16px; */
  margin-left: 6px; /* margin-top: 10px; */
  font-size: 113%;
  position: sticky;
  top: 10px;
  margin-bottom: 10px;
  background-color: rgb(241 241 241 / 88%);
  z-index: 5;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  text-align: center;
  line-height: 37px;
}

.notifications-screen {
  padding: 15px;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% - 65px);
  overflow-y: auto;
}

.notifications-screen .inner-content {
}

.notifications-screen .show-more {
  display: block;
  width: 100%;
  padding: 10px 15px;
  margin-top: 15px;
  background-color: #dbdbdb;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  color: #333;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.notifications-screen .separator:first-child {
  margin-top: 0;
}
.notifications-screen .separator {
  text-align: center;
  font-weight: 400;
  margin-bottom: 11px;
  margin-top: 30px;
  font-size: 83%;
}

.notifications-screen .date {
  color: #ababab;
  font-weight: 400;
  margin-top: 8px;
  font-size: 83%;
}

.notifications-screen .notification {
  background-color: #fff;
  border-radius: 8px;
  padding: 13px;
  box-shadow: 0px 2px 12px 3px #00000014;
  margin-bottom: 10px;
}

.notifications-screen .notification.not-seen {
  font-weight: 400;
}

.notifications-screen .notification .time {
  font-size: 79%;
  position: relative;
  top: -1px;
  margin-right: 3px;
  display: inline-block;
  font-weight: 400;
}
.notifications-screen .notification.not-seen .time {
  font-weight: 400;
}

.chat-screen {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% - 65px);
  overflow-y: auto;
}

.chat-screen .inner-content {
}

.chat-screen .search {
  padding: 15px;
  position: relative;
}
.chat-screen .search .icon {
  position: absolute;
  left: 27px;
  top: 25px;
  font-size: 15px;
  pointer-events: none;
}
.chat-screen .search input {
  width: 100%;
  border-radius: 37px;
  border: none;
  display: block;
  box-sizing: border-box;
  padding: 7px 34px;
  box-shadow: 1px 4px 6px rgb(0 0 0 / 9%);
}
.chat-screen .search .close {
  position: absolute;
  right: 23px;
  top: 23px;
  width: 20px;
  height: 20px;
  background-color: #153b62;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: 20px;
  transform: scale(0.8);
}
.chat-screen .rooms {
  padding: 16px;
  box-sizing: border-box;
  width: 100%;
  padding-top: 0;
  margin-top: 19px;
}
.chat-screen .room {
  border-bottom: 1px solid #d7d7d7;
  display: flex;
  padding-bottom: 11px;
  margin-bottom: 17px;
}
.chat-screen .room .photo {
  width: 50px;
  position: relative;
  text-align: center;
}
.chat-screen .room .photo img {
  width: 100%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}
.chat-screen .room .photo .bubble {
  position: absolute;
  right: 0;
  top: 0;
  width: 15px;
  height: 15px;
  background-color: #d03535;
  color: #fff;
  text-align: center;
  font-size: 71%;
  border-radius: 50%;
  font-weight: 400;
}
.chat-screen .room .photo .group {
  width: 50px;
  height: 50px;
  background-color: #ddd;
  border-radius: 50%;
  padding-top: 10px;
}
.chat-screen .room .photo .group .icon {
  margin-bottom: 2px;
  color: #153b62;
  font-size: 92%;
}
.chat-screen .room .photo .group .caption {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 43%;
  font-weight: 400;
}
.chat-screen .room .name-and-last-message {
  width: calc(100% - 50px);
  padding-left: 15px;
  padding-top: 2px;
}

.chat-screen .room .name-and-last-message .name {
  font-weight: 400;
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-screen .room .name-and-last-message .last-message {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 90%;
}

.chat-screen .room:last-child {
  border: none;
}

.chat-screen .room.not-seen {
}

.chat-screen .room.not-seen .name {
  font-weight: 600;
}

.chat-screen .room.not-seen .last-message {
  font-weight: 600;
}

.room-screen {
  transition: 0.25s;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% - 65px);
  overflow-y: auto;
  display: flex;
  flex-direction: column; /* height: 100%; */
  z-index: 5;
}

.room-screen.focused {
  height: 100%;
}

.room-screen .messages small {
  display: block;
  margin-bottom: 6px;
}

.room-screen .messages small b {
  font-weight: 400;
}

.room-screen .messages .separator {
  font-weight: 400;
  text-align: center;
  margin: 19px 0;
  font-size: 80%;
}

.room-screen .messages {
  /* padding-bottom: 65px; */
  padding: 14px; /* padding-bottom: 63px; */
  height: 100%;
  overflow-y: scroll;
}

.room-screen .input-row {
  width: 100%;
  display: flex;
  padding: 15px;
  background-color: rgb(227 234 235);
  align-items: end; /* background-color: #eff4f3; */
}

.room-screen .input-row .send-icon {
  width: 34px;
  height: 34px;
  background-color: #153b62;
  color: #ffffff;
  border-radius: 50%;
  text-align: center;
  line-height: 34px;
  font-size: 82%;
  background: linear-gradient(
    90deg,
    rgba(67, 95, 124, 1) 0%,
    rgba(43, 128, 101, 1) 100%
  ); /* margin-left: 8px; */
  box-shadow: 0px 0px 15px #0000001a;
}

.room-screen .input-row .input {
  width: calc(100% - 34px);
  padding-right: 10px;
}

.room-screen .input-row textarea {
  width: 100%;
  border: none;
  border-radius: 31px;
  padding: 10px 13px;
  display: block;
  box-sizing: border-box;
  font-size: 85%;
  box-shadow: 0px 0px 15px #0000001a;
}

.room-screen .messages .my-message {
  /* width: 50%; */
  /* margin-bottom: 18px; */
  text-align: right;
  margin-bottom: 6px;
}

.room-screen .messages .my-message .bubble {
  display: inline-block;
  background-color: #153b62;
  width: auto;
  max-width: 68%;
  /* padding-left: 13px; */
  display: inline-block;
  border: 1px solid #153b62;
  padding: 8px;
  border-radius: 11px;
  border-bottom-right-radius: 7px;
  border-top-right-radius: 15px;
  font-size: 85%;
  color: #fff;
  text-align: left;
}
.room-screen .messages .other-message {
  margin-bottom: 16px;
  max-width: 70%;
  display: flex;
  align-items: end;
}

.room-screen .messages .other-message .photo {
  width: 40px;
  height: 33px;
}
.room-screen .messages .other-message .photo img {
  width: 33px;
  height: 33px;
  border-radius: 50%;
}

.room-screen .messages .other-message .text {
  width: auto;
  max-width: calc(100% - 40px);
  display: inline-block;
  background-color: #eeeeee; /* background color to match the second image */
  border: none; /* remove border */
  padding: 8px;
  border-radius: 20px; /* general border radius */
  border-bottom-left-radius: 20px; /* rounded bottom left corner */
  border-top-left-radius: 20px; /* rounded top left corner */
  font-size: 100%; /* adjust font size to match the second image */
  color: #000; /* change font color to black */
}

.room-screen .room-name {
  display: flex;
  padding: 10px 16px;
  background-color: rgb(227 234 235);
  background-color: #eff4f3; /* backdrop-filter: blur(2px); */
  box-shadow: -1px 4px 15px #0000000d;
}

.room-screen .room-name .back {
}

.room-screen .room-name .back a {
  color: inherit;
}

.room-screen .room-name .name {
  padding-left: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 76%;
  position: relative;
  top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.projects-screen {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% - 65px);
  display: flex;
  flex-direction: column;
}

.projects-screen .search {
  padding: 15px;
  position: relative;
  height: 65px;
}
.projects-screen .search .icon {
  position: absolute;
  left: 27px;
  top: 25px;
  font-size: 15px;
  pointer-events: none;
}
.projects-screen .search input {
  width: 100%;
  border-radius: 37px;
  border: none;
  display: block;
  box-sizing: border-box;
  padding: 7px 34px;
  box-shadow: 1px 4px 6px rgb(0 0 0 / 9%);
}
.projects-screen .search .close {
  position: absolute;
  right: 23px;
  top: 23px;
  width: 20px;
  height: 20px;
  background-color: #153b62;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: 20px;
  transform: scale(0.8);
}
.projects-screen .content {
  height: calc(100% - 65px);
  overflow-y: auto;
}
.projects-screen .content .inner-content {
  padding: 16px;
}

.projects-screen .section {
  margin-bottom: 35px;
}

.projects-screen .separator {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 81%;
  padding-left: 11px;
  margin-bottom: 9px;
}
.projects-screen .separator .nr {
  background-color: rgb(207 216 217);
  padding: 1px 7px;
  border-radius: 15px;
  font-size: 79%;
  position: relative;
  top: -1px;
  margin-left: 3px;
  display: inline-block;
  font-weight: 400;
}

.projects-screen .table {
  /* background-color: rgb(247 250 249 / 69%); */
  border-radius: 8px;
  overflow: hidden; /* box-shadow: 0px 0 20px rgb(0 0 0 / 8%); */
}

.projects-screen .row {
  display: flex;
  padding: 10px 11px;
  margin-bottom: 2px;
  background-color: #eeeeee;
  align-items: center;
}

.projects-screen .row.no-left-icon {
}
.projects-screen .row.no-left-icon .left-icon {
}
.projects-screen .row .left-icon {
  width: 25px;
  text-align: center;
}
.projects-screen .row .text {
  width: calc(100% - 65px);
  padding-left: 6px;
  white-space: nowrap;
  overflow: hidden; /* padding-right: 3px; */
  text-overflow: ellipsis;
}
.projects-screen .row .right-icon {
  color: #ababab;
  width: 40px;
  text-align: left;
  font-size: 78%;
  white-space: nowrap;
  margin-right: 6px;
}

.projects-screen .row.no-left-icon .left-icon {
}
.projects-screen .row.no-left-icon .text {
  width: calc(100% - 25px);
  padding-left: 0;
}
.projects-screen .row.no-left-icon .text-next {
  width: calc(100% - 25px);
  padding-left: 0;
  color: #ff0000;
}
.projects-screen .row.no-left-icon .right-icon-next {
  width: 25px;
  opacity: 0.75;
  color: #ff0000;
}
.projects-screen .row.no-left-icon .right-icon {
  width: 25px;
  margin-right: 8px;
}

.projects-screen .check {
  border: 1px solid #153b62;
  border-radius: 50%;
  width: 21px;
  height: 21px;
  display: inline-block;
  line-height: 23px;
  font-size: 79%;
  opacity: 0.75;
}

.projects-screen .row.checked .check {
  background-color: #91f5d7;
  border-color: #91f5d7;
  color: #115e47;
}

.projects-screen .row.checked .text {
  text-decoration: line-through;
  opacity: 0.6;
}

.projects-screen .no-content {
  padding-left: 10px;
  font-size: 84%; /* font-style: italic; */
}

.search-results {
  padding: 16px;
}

.search-results .project-tag {
  padding: 2px 4px;
  display: inline-block;
  background-color: #b145a6;
  color: #fff; /* text-transform: uppercase; */ /* letter-spacing: 1px; */
  font-size: 74%;
  border-radius: 3px;
  font-weight: 400;
  position: relative;
  top: -1px;
  margin-right: 6px;
}

.search-results .file-tag {
  /* padding: 16px; */
  /* padding: 16px; */
  padding: 2px 4px;
  display: inline-block;
  background-color: #b14545;
  color: #fff;
  /* text-transform: uppercase; */
  /* letter-spacing: 1px; */
  font-size: 74%;
  border-radius: 3px;
  font-weight: 400;
  position: relative;
  top: -1px;
  margin-right: 6px;
}

.search-results .task-tag {
  /* padding: 16px; */
  padding: 2px 4px;
  display: inline-block;
  background-color: #45b1a0;
  color: #fff;
  /* text-transform: uppercase; */
  /* letter-spacing: 1px; */
  font-size: 74%;
  border-radius: 3px;
  font-weight: 400;
  position: relative;
  top: -1px;
  margin-right: 6px;
}

.search-results .table {
  box-shadow: 0px 0 20px rgb(0 0 0 / 8%);
}

.search-results .table.no-shadow {
  box-shadow: none;
}

.projects-screen .row:last-child {
  margin-bottom: 0;
}

.file-view {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  background-color: rgb(167 167 167 / 91%); /* color: #fff; */
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  transform: translateX(-100%);
  display: flex;
  flex-direction: column;
  z-index: 50;
}

.file-view.shown {
  opacity: 100%;
  visibility: visible;

  transform: translateX(0);
}

.file-view .top {
  /* height: 30px; */
  display: flex;
  align-items: center;
  padding: 12px;
  background-color: #eff4f3;
  /* backdrop-filter: blur(2px); */
  box-shadow: 0px 3px 15px #00000024;
}

.fa-file:before {
  margin-right: 6px;
  margin-left: 6px;
}

.file-view .top .filename {
  width: calc(100% - 50px); /* padding: 13px; */
  font-weight: 400;
  font-size: 82%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.file-view .top .size {
  width: 50px;
  text-align: right;
  font-size: 80%;
  white-space: nowrap;
}

.file-view .content {
  position: relative;
  height: calc(100% - 95px);
}

.file-view .content img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.file-view .content iframe {
  /* position: absolute; */
  /* left: 0; */
  /* top: 0; */
  /* width: 100%; */
  /* height: 100%; */
  /* object-fit: contain; */
  /* border: none; */
  width: 100%; /* height: 1050px; */
  flex: 1 1 auto;
  min-height: 640px;
}

.file-view .bottom {
  height: 65px;
  display: flex;
  align-items: center;
  /* padding: 12px; */
  background-color: #eff4f3;
  /* backdrop-filter: blur(2px); */
  box-shadow: 1px -4px 15px #0000000d;
  justify-content: space-between;
}

.file-view .bottom .left {
}

.file-view .bottom .right {
}

.file-view .menu {
}

.file-view .bottom .item {
  width: 16.66%;
  text-align: center;
  padding: 0px 0;
  display: block;
  text-decoration: none;
  color: inherit; /* color: #ddd; */
  position: relative;
  top: 1px;
}

.file-view .bottom .item .icon {
  opacity: 1;
  font-size: 116%;
  display: block;
  margin-bottom: 5px;
  color: #153b62;
}

.file-view .bottom .item .caption {
  font-size: 68%; /* font-weight: 600; */
  color: #153b62;
}

.project-view {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% - 65px);
  display: flex;
  flex-direction: column;
}

.project-view .content {
  /* padding: 16px; */
  height: calc(100% - 39px);
  overflow-y: auto;
}

.project-view .inner-content {
  padding: 16px;
}

.project-view .tabs {
  display: flex;
  margin-bottom: 8px;
  margin-top: 0px;
  overflow-y: auto;
  background-color: #eff4f3;
  box-shadow: -1px 4px 15px #0000000d; /* position: absolute; */ /* left: 0; */
  position: sticky;
  top: 0;
  z-index: 5;
}

.project-view .tabs .tab {
  /* background-color: #eff4f3; */ /* border-radius: 36px; */
  text-align: center;
  padding: 10px 0; /* margin-right: 10px; */
  width: 33.33%;
  border-bottom: 3px solid #ddd;
  font-size: 80%; /* text-transform: uppercase; */ /* letter-spacing: 1px; */ /* border-right: 1px solid #ddd; */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.project-view .tabs .tab.active {
  /* background-color: #153b62; */ /* color: #fff; */
  font-weight: 400;
  border-bottom: 3px solid rgba(43, 128, 101, 1);
  color: rgba(43, 128, 101, 1);
}

.project-view .tasks {
}

.project-view .project-name {
  display: flex;
  padding: 10px 16px;
  background-color: rgb(227 234 235);
  background-color: #eff4f3; /* backdrop-filter: blur(2px); */
  box-shadow: -1px 4px 15px #0000000d;
}

.project-view .project-name .back {
}

.project-view .project-name .back a {
  color: inherit;
}
.project-view .project-name .name {
  padding-left: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 89%;
  position: relative;
  top: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-view .table {
  /* background-color: rgb(247 250 249 / 69%); */
  border-radius: 8px;
  overflow: hidden; /* box-shadow: 0px 0 20px rgb(0 0 0 / 8%); */
}

.project-view .row {
  display: flex;
  padding: 10px 11px;
  margin-bottom: 2px;
  background-color: #eeeeee;
  align-items: center;
}

.project-view .row.no-left-icon {
}
.project-view .row.no-left-icon .left-icon {
}
.project-view .row .left-icon {
  width: 25px;
  text-align: center;
}
.project-view .row .text {
  width: calc(100% - 74px);
  padding-left: 6px;
  white-space: nowrap;
  overflow: hidden; /* padding-right: 3px; */
  text-overflow: ellipsis;
}
.project-view .row .right-icon {
  color: #ababab;
  width: 49px;
  text-align: right;
  font-size: 78%;
  white-space: nowrap; /* overflow: hidden; */ /* text-overflow: ellipsis; */
}

.project-view .row.no-left-icon .left-icon {
}
.project-view .row.no-left-icon .text {
  width: calc(100% - 25px);
  padding-left: 0;
}
.project-view .row.no-left-icon .right-icon {
  width: 25px;
}

.project-view .check {
  border: 1px solid #153b62;
  border-radius: 50%;
  width: 21px;
  height: 21px;
  display: inline-block;
  line-height: 23px;
  font-size: 79%;
  opacity: 0.75;
}

.project-view .row.checked .check {
  background-color: #91f5d7;
  border-color: #91f5d7;
  color: #115e47;
}

.project-view .row.checked .text {
  text-decoration: line-through;
  opacity: 0.6;
}

.project-view .no-content {
  padding-left: 10px;
  font-size: 84%; /* font-style: italic; */
}

.project-view .row:last-child {
  margin-bottom: 0;
}

.project-view .file-upload {
  border: 2px dashed #d3d3d3;
  text-align: center;
  padding: 22px;
  border-radius: 14px;
  margin-top: 35px;
}

.project-view .file-upload .icon {
  font-size: 171%;
  margin-bottom: 7px;
}

.project-view .file-upload .caption {
  text-transform: uppercase;
  left: 1px;
  font-size: 82%;
  font-weight: 400;
}

.milestones {
}

.milestone {
  /* margin-bottom: 19px; */ /* background-color: #f6f9f8; */
  border-left: 3px solid #ddd;
  padding-left: 18px;
  padding-bottom: 12px;
  padding-top: 13px;
}

.milestone .date {
  margin-bottom: 6px;
  font-size: 84%;
  font-weight: 400;
  position: relative;
  padding-bottom: 3px;
  padding-left: 11px;
}

.milestone .dot {
  width: 17px;
  height: 17px;
  background-color: #2b8065;
  border-radius: 50%;
  position: absolute;
  left: -28px;
  top: 1px; /* box-shadow: 0 0 3px #0000001c; */
  border: 4px solid #e2e7ea;
}

.milestone .box {
  background-color: #fff;
  border-radius: 7px;
  padding: 11px;
  background-color: #f6f9f8;
  box-shadow: 0px 0 20px rgb(0 0 0 / 8%);
}

.milestone .title {
  font-weight: 400;
  font-size: 100%;
}

.milestone .description {
  font-size: 90%;
  margin-top: 8px;
}

.task-view {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% - 65px);
  z-index: 5;
  background-color: rgb(167 167 167 / 91%); /* color: #fff; */
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  transform: translateX(-100%);
  display: flex;
  flex-direction: column;
  background-image: url(/static/bg.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.task-view.shown {
  opacity: 100%;
  visibility: visible;

  transform: translateX(0);
}

.task-view .task-name {
  display: flex;
  padding: 15px;
  background-color: #eff4f3;
  backdrop-filter: blur(2px);
  box-shadow: -1px 4px 15px #0000000d;
  border-bottom: 1px solid #d7d7d7; /* width: calc(100% - 30px); */ /* margin-left: 14px; */
}

.task-view .task-name .check {
  border: 1px solid #153b62;
  border-radius: 50%;
  width: 21px;
  height: 21px;
  display: inline-block;
  line-height: 23px;
  font-size: 79%;
  opacity: 0.75;
  text-align: center;
}

.task-view .task-name.checked .check {
  background-color: #91f5d7;
  border-color: #91f5d7;
  color: #115e47;
}

.task-view .task-name .name {
  padding-left: 9px;
  padding-top: 2px;
  width: calc(100% - 43px);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.task-view .task-name.checked .name {
  text-decoration: line-through;
  opacity: 0.6;
}

.task-view .task-name.close {
}

.task-view .content {
  height: calc(100% - 116px);
  overflow-y: auto;
  display: block;
  box-sizing: border-box;
  padding: 16px;
  padding-top: 25px;
}

.task-view .close {
  width: 20px;
  text-align: right;
  font-size: 29px;
  line-height: 20px;
  opacity: 0.65;
}

.task-view .input-row {
  width: 100%;
  display: flex;
  padding: 15px;
  background-color: rgb(227 234 235 / 56%);
  align-items: center;
}

.task-view .input-row .send-icon {
  width: 34px;
  height: 34px;
  background-color: #153b62;
  color: #ffffff;
  border-radius: 50%;
  text-align: center;
  line-height: 36px;
  font-size: 82%;
  background: linear-gradient(
    90deg,
    rgba(67, 95, 124, 1) 0%,
    rgba(43, 128, 101, 1) 100%
  ); /* margin-left: 8px; */
  box-shadow: 0px 0px 15px #0000001a;
}

.task-view .input-row .input {
  width: calc(100% - 34px);
  padding-right: 10px;
}

.task-view .input-row textarea {
  width: 100%;
  border: none;
  border-radius: 31px;
  padding: 10px 13px;
  display: block;
  box-sizing: border-box;
  font-size: 85%;
  box-shadow: 0px 0px 15px #0000001a;
}

.task-view .details {
}

.task-view .detail {
  display: flex;
  margin-bottom: 18px;
}

.task-view .detail .name {
  width: 110px;
  font-weight: 400;
  font-size: 83%;
  position: relative;
  top: 2px;
  opacity: 0.5;
}

.task-view .detail .value {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.task-view .detail .assignee {
  display: flex;
  align-items: center;
}

.task-view .detail .assignee img {
  width: 20px;
  height: 20px;
  object-fit: cover;
  border-radius: 50%;
  margin-right: 5px;
}

.task-view .detail .priority {
  border-radius: 11px;
  padding: 2px 9px;
  font-size: 83%;
  background-color: #eff4f3 !important; /* box-shadow: 0 2px 3px #0000000d; */
}

.task-view .table {
  /* background-color: rgb(247 250 249 / 69%); */
  border-radius: 8px;
  overflow: hidden; /* box-shadow: 0px 0 20px rgb(0 0 0 / 8%); */
}

.task-view .row {
  display: flex;
  padding: 10px 11px;
  margin-bottom: 2px;
  background-color: #f6f9f8;
  align-items: center;
}

.task-view .row.no-left-icon {
}
.task-view .row.no-left-icon .left-icon {
}
.task-view .row .left-icon {
  width: 25px;
  text-align: center;
}
.task-view .row .text {
  width: calc(100% - 65px);
  padding-left: 6px;
  white-space: nowrap;
  overflow: hidden; /* padding-right: 3px; */
  text-overflow: ellipsis;
}
.task-view .row .right-icon {
  color: #ababab;
  width: 40px;
  text-align: right;
  font-size: 78%;
  white-space: nowrap; /* overflow: hidden; */ /* text-overflow: ellipsis; */
}

.task-view .row.no-left-icon .left-icon {
}
.task-view .row.no-left-icon .text {
  width: calc(100% - 25px);
  padding-left: 0;
}
.task-view .row.no-left-icon .right-icon {
  width: 25px;
}

.task-view .check {
  border: 1px solid #153b62;
  border-radius: 50%;
  width: 21px;
  height: 21px;
  display: inline-block;
  line-height: 23px;
  font-size: 79%;
  opacity: 0.75;
}

.task-view .row.checked .check {
  background-color: #91f5d7;
  border-color: #91f5d7;
  color: #115e47;
}

.task-view .row.checked .text {
  text-decoration: line-through;
  opacity: 0.6;
}

.file-view .no-preview {
  text-align: center;
  top: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-shadow: 0px 3px 11px #00000040;
}

.file-view .no-preview .icon {
  font-size: 254%;
}

.file-view .no-preview .text {
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 13px;
}

.task-view .comments {
}

.task-view .comments .comment {
  border-bottom: 1px solid #ddd;
  padding: 12px 0;
}

.task-view .comments .comment:last-child {
  border-bottom: 0;
}

.task-view .comments .comment .author {
  margin-bottom: 8px;
  font-size: 91%;
  font-weight: 400;
}

.task-view .comments .comment .author img {
  width: 16px;
  height: 16px;
  object-fit: cover;
  border-radius: 50%;
  position: relative;
  top: 2px;
}

.task-view .comments .comment .author .date {
  font-size: 71%;
  margin-left: 4px;
  position: relative;
  top: -1px;
}

.task-view .section {
  margin-bottom: 25px;
}

.task-view .section-title {
  font-size: 83%;
  font-weight: 400;
  margin-bottom: 11px;
  opacity: 0.5;
}

.iframe-wrap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}

.project-badge {
  background-color: #153b62;
  color: #fff !important;
  text-decoration: none;
  font-size: 85%;
  padding: 2px 5px;
  display: inline-block;
  border-radius: 4px;
}