ul {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  font-family: "Inter", sans-serif;
  text-align: center;
  padding: 1em;
  background: var(--light-grey);
  height: 100%;
}

.notification {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  background: var(--violet);
}

.headline {
  font-size: 3em;
  position: relative;
  top: 20vh;
  font-weight: bold;
  transition: opacity 1s;
  opacity: 1;
  display: block;
}

.headline.big {
  color: #07575B88;
}

.container:has(> .nav > input:checked) .headline {
  opacity: 0;
}

/* MAIN STYLES
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
.nav {
  position: absolute;
  display: flex;
  justify-content: center;
  width: 15vh;
  left: calc(50% - 7.5vh);
  border-radius: 5px 5px 25px 25px;
  margin: auto;
  bottom: 0;
  background: transparent;
}

.nav [type="checkbox"] {
  position: absolute;
  left: -9999px;
}

.nav [type="checkbox"]+label {
  position: relative;
  width: 12vh;
  height: 12vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  z-index: 1;
  background: var(--violet);
  border-radius: 50%;
  transform: translateY(-50%);
  transition: all 0.2s;
}

.nav [type="checkbox"]+label:hover {
  background: var(--dark-violet);
}

.menu li,
.p-menu li {
  position: absolute;
  top: -5vh;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.4s;
}

.menu li:nth-child(1),
.p-menu li:nth-child(1) {
  transition-delay: 0.2s;
}

.menu li:nth-child(2),
.p-menu li:nth-child(2) {
  transition-delay: 0.15s;
}

.menu li:nth-child(3),
.p-menu li:nth-child(3) {
  transition-delay: 0.1s;
}

.menu li:nth-child(4),
.p-menu li:nth-child(4) {
  transition-delay: 0.05s;
}

.menu li:nth-child(5),
.p-menu li:nth-child(5) {
  transition-delay: 0.05s;
}

.menu li:nth-child(6) {
  transition-delay: 0.02s;
}

.menu li:nth-child(7) {
  transition-delay: 0.05s;
}

.menu li:nth-child(8) {
  transition-delay: 0.02s;
}

.menu li:nth-child(9) {
  transition-delay: 0.05s;
}

.menu li a,
.p-menu li a {
  width: 10vh;
  height: 10vh;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--violet);
  background-position: center;
  background-repeat: no-repeat;
  transition: all 0.3s;
}

.menu li a:hover,
.p-menu li a:hover {
  background: var(--dark-violet);
  background-repeat: no-repeat;
  background-position: center;
}

.menu li a:hover span,
.p-menu li a:hover span {
  color: #808080;
}

.menu li:nth-child(1) a {
  background-size: 75% 75%;
  background-image: url(/booking.svg);
}

.menu li:nth-child(1) a:hover {
  background-size: 65% 65%;
}

.menu li:nth-child(2) a {
  background-size: 80% 80%;
  background-image: url(/patient.svg);
}

.menu li:nth-child(2) a:hover {
  background-size: 70% 70%;
}

.menu li:nth-child(3) a {
  background-image: url(/staff.svg);
  background-size: 70% 70%;
}

.menu li:nth-child(3) a:hover {
  background-size: 60% 60%;
}

.menu li:nth-child(4) a {
  background-image: url(/attendance.svg);
  background-size: 65% 65%;
}

.menu li:nth-child(4) a:hover {
  background-size: 55% 55%;
}

.menu li:nth-child(5) a {
  background-image: url(/report.svg);
  background-size: 80% 80%;
}

.menu li:nth-child(5) a:hover {
  background-size: 70% 70%;
}

.menu li:nth-child(6) a {
  background-image: url(/settings.svg);
  background-size: 80% 80%;
}

.menu li:nth-child(6) a:hover {
  background-size: 70% 70%;
}

.menu li:nth-child(7) a {
  background-size: 75% 75%;
  background-image: url(/broadcast.svg);
}

.menu li:nth-child(7) a:hover {
  background-size: 65% 65%;
}

.menu li:nth-child(8) a {
  background-size: 75% 75%;
  background-image: url(/notification.svg);
}

.menu li:nth-child(8) a:hover {
  background-size: 65% 65%;
}

.menu li:nth-child(9) a {
  background-size: 75% 75%;
  background-image: url(/email-white.svg);
}

.menu li:nth-child(9) a:hover {
  background-size: 65% 65%;
}

.p-menu li:nth-child(1) a {
  background-size: 75% 75%;
  background-image: url(/booking.svg);
}

.p-menu li:nth-child(1) a:hover {
  background-size: 65% 65%;
}

.p-menu li:nth-child(2) a {
  background-size: 80% 80%;
  background-image: url(/report.svg);
}

.p-menu li:nth-child(2) a:hover {
  background-size: 70% 70%;
}

.p-menu li:nth-child(3) a {
  background-image: url(/rupee.svg);
  background-size: 70% 70%;
}

.p-menu li:nth-child(3) a:hover {
  background-size: 60% 60%;
}

.p-menu li:nth-child(4) a {
  background-image: url(/attendance.svg);
  background-size: 65% 65%;
}

.p-menu li:nth-child(4) a:hover {
  background-size: 55% 55%;
}

.p-menu li:nth-child(5) a {
  background-image: url(/report.svg);
  background-size: 80% 80%;
}

.p-menu li:nth-child(5) a:hover {
  background-size: 70% 70%;
}

.menu li a span,
.p-menu li a span {
  position: absolute;
  top: 0;
  transform: translateY(calc(-100% - 5px));
  width: 100%;
  font-size: 13px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  color: var(--black);
  font-weight: bold;
  width: fit-content;
}

.nav input:checked+label {
  background: var(--black);
  transform: translateY(calc(-50% + 4px));
  color: var(--grey);
}

.nav input:checked~.menu li:nth-child(1) {
  top: -70vh;
  transition-delay: 0.1s;
}

.nav input:checked~.menu li:nth-child(2) {
  top: -60vh;
  left: calc(50% - 10vw);
  transition-delay: 0.2s;
}

.nav input:checked~.menu li:nth-child(3) {
  top: -60vh;
  left: calc(50% + 10vw);
  transition-delay: 0.3s;
}

.nav input:checked~.menu li:nth-child(4) {
  top: -45vh;
  left: calc(50% - 15vw);
  transition-delay: 0.4s;
}

.nav input:checked~.menu li:nth-child(5) {
  top: -45vh;
  left: calc(50% + 15vw);
  transition-delay: 0.4s;
}

.nav input:checked~.menu li:nth-child(6) {
  top: -30vh;
  left: calc(50% - 10vw);
  transition-delay: 0.4s;
}

.nav input:checked~.menu li:nth-child(7) {
  top: -20vh;
  transition-delay: 0.4s;
}

.nav input:checked~.menu li:nth-child(8) {
  top: -30vh;
  left: calc(50% + 10vw);
  transition-delay: 0.4s;
}

.nav input:checked~.menu li:nth-child(9) {
  top: -45vh;
  transition-delay: 0.4s;
}

.nav input:checked~.p-menu li:nth-child(1) {
  top: -60vh;
  transition-delay: 0.1s;
}

.nav input:checked~.p-menu li:nth-child(2) {
  top: -50vh;
  left: calc(50% - 10vw);
  transition-delay: 0.2s;
}

.nav input:checked~.p-menu li:nth-child(3) {
  top: -50vh;
  left: calc(50% + 10vw);
  transition-delay: 0.3s;
}

.nav input:checked~.p-menu li:nth-child(4) {
  top: -35vh;
  left: calc(50% - 15vw);
  transition-delay: 0.4s;
}

.nav input:checked~.p-menu li:nth-child(5) {
  top: -35vh;
  left: calc(50% + 15vw);
  transition-delay: 0.4s;
}

.nav input:checked~.menu li a span,
.nav input:checked~.p-menu li a span {
  opacity: 1;
  transition-delay: 0.9s;
}

@media screen and (min-width: 481px) {

  .container:has(> .nav > input:checked) .email-container,
  .container:has(> .nav > input:checked) .bookings-container {
    display: block;
  }
}

@media screen and (max-width: 480px) {
  .nav input:checked~.menu li:nth-child(1) {
    top: -63vh;
  }

  .nav input:checked~.menu li:nth-child(2) {
    top: -53vh;
    left: calc(50% - 13vh);
  }

  .nav input:checked~.menu li:nth-child(3) {
    top: -53vh;
    left: calc(50% + 13vh);
  }

  .nav input:checked~.menu li:nth-child(4) {
    top: -38vh;
    left: calc(50% - 18vh);
  }

  .nav input:checked~.menu li:nth-child(5) {
    top: -38vh;
    left: calc(50% + 18vh);
  }

  .nav input:checked~.menu li:nth-child(6) {
    top: -23vh;
    left: calc(50% - 13vh);
  }

  .nav input:checked~.menu li:nth-child(7) {
    top: -13vh;
  }

  .nav input:checked~.menu li:nth-child(8) {
    top: -23vh;
    left: calc(50% + 13vh);
  }

  .nav input:checked~.menu li:nth-child(9) {
    top: -38vh;
  }

  .nav input:checked~.p-menu li:nth-child(1) {
    top: -43vh;
  }

  .nav input:checked~.p-menu li:nth-child(2) {
    top: -33vh;
    left: calc(50% - 13vh);
  }

  .nav input:checked~.p-menu li:nth-child(3) {
    top: -33vh;
    left: calc(50% + 13vh);
  }

  .nav input:checked~.p-menu li:nth-child(4) {
    top: -18vh;
    left: calc(50% - 18vh);
  }

  .nav input:checked~.p-menu li:nth-child(5) {
    top: -18vh;
    left: calc(50% + 18vh);
  }

  .headline {
    top: 20vh;
    font-size: 1.5em;
  }

  .menu li a {
    width: 7vh;
    height: 7vh;
  }

  .container .profile-div {
    height: 2em;
    width: 2em;
  }

  .container .profile-div .profile-span {
    font-size: 1em;
  }

  .container #profile-menu {
    height: 7em;
    width: 12em;
  }

  .container #profile-menu>div:nth-child(1)>div:nth-child(2)>span {
    font-size: 1em;
    border: 0.5px solid grey;
    border-radius: 0.1em;
  }

  .container #profile-menu>div:nth-child(1)>div:nth-child(1) {
    padding: 0.3em;
    grid-template-columns: [col] 35% [col] 75%;
  }

  .container #profile-menu>div:nth-child(1)>div:nth-child(1)>span {
    font-size: 0.4em;
  }
}

/* FOOTER STYLES
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
  position: fixed;
  right: 0;
  bottom: 60px;
  display: flex;
  align-items: center;
  padding: 5px;
  color: var(--black);
}

.page-footer a {
  display: flex;
  margin-left: 4px;
}

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

.card p {
  margin: 0;
}

.card p:not(:last-child) {
  margin-bottom: 0.5em;
  font-size: 0.8em;

  & strong {
    font-size: 0.8em;
  }
}

.card {
  width: 100%;
  height: 5em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.5em;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(15px);
  text-align: left;
  margin-bottom: 0.5em;
  cursor: pointer;
}

.card-footer {
  font-size: 0.6em;
  color: #446;
}

.email-container,
.bookings-container {
  width: 30%;
  max-width: 25vw;
  background: transparent;
  text-align: left;
  font-size: 0.8em;
  display: none;
  transition: all 0.5s;
}

.bookings-container {
  float: right;
}

.email-container #card-container,
.bookings-container #card-container {
  overflow-y: auto;
  width: 100%;
  min-height: 5em;
  max-height: 25em;
  padding: 1em;
  background: transparent;
  background-position: center;
  background-repeat: no-repeat;
}

.container .popup {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: transparent;
  backdrop-filter: blur(10px);
  z-index: 9999;
  display: none;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  align-items: center;
  justify-content: center;
}

.container .popup:target {
  opacity: 1;
  visibility: visible;
}

.container .mail-popup-content {
  background-color: white;
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  overflow: hidden;
  background: white;
  width: 80%;
  padding: 1em;
  height: 90%;
  justify-content: center;
  align-items: center;
}

.container .mail-popup-content * {
  user-select: text;
}

.container .mail-popup-content header {
  display: grid;
  grid-template-columns: [col] 10% [col] 90%;
  grid-template-rows: auto;
  max-height: 20%;
  border-bottom: 0.5px solid grey;
  text-align: left;
  overflow-y: auto;
}

.container .mail-popup-content header span {
  font-size: 0.8em;
  font-family: 'Courier New', Courier, monospace;
}

iframe.body {
  height: calc(80% - 2em);
  width: 100%;
  outline: none;
  border: none;
}

.menu-show {
  z-index: 100000;
  position: absolute;
  background-color: white;
  border: 1px solid lightgrey;
  padding: 2px;
  margin: 0;
  list-style-type: none;
  list-style: none;
  display: grid;
  grid-template-columns: [col] 100%;
  grid-template-rows: auto;
  border-radius: 5px;
  width: 10em;
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
}

.menu-hide {
  display: none;
  z-index: 100000;
}

.rmenu-list {
  font-size: 0.8em;
  text-align: justify;
  padding: 0.5em;
}

.profile-div {
  background-color: white;
  border-radius: 50%;
  border: 1px solid grey;
  height: 4em;
  width: 4em;
  position: absolute;
  right: 1em;
  top: 1em;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  transition: all 0.3s;
}

.container .profile-menu {
  height: 10em;
  width: 20em;
  display: block;
  z-index: 100000;
  position: absolute;
  background-color: white;
  padding: 2px;
  margin: 0;
  border-radius: 5px;
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
}

.container .profile-menu>div:nth-child(1) {
  height: 80%;
  width: 100%;
  display: grid;
  grid-template-columns: [col] 65% [col] 35%;
  grid-template-rows: [row] 100%;
}

.container .profile-menu>div:nth-child(1)>div:nth-child(2) {
  padding: 0.5em;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80% 80%;
  transition: all 0.3s;
}

.container .profile-menu>div:nth-child(1)>div:nth-child(2)>span {
  height: 100%;
  width: 100%;
  display: flex;
  font-size: 2em;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  border: 1px solid grey;
  border-radius: 0.2em;
}

.container .profile-menu>div:nth-child(1)>div:nth-child(1) {
  display: grid;
  grid-template-columns: [col] 30% [col] 70%;
  grid-template-rows: auto;
  padding: 0.5em;
}

.container .profile-menu>div:nth-child(1)>div:nth-child(1)>span {
  font-size: 0.7em;
  text-align: left;
  font-family: 'Fira Code', monospace;
  word-wrap: break-word;
}

.container .profile-menu>div:nth-child(2) {
  height: 20%;
  width: 100%;
  border-top: 0.5px solid #808080;
  display: flex;
  align-items: center;
}

.container .profile-menu>div:nth-child(2)>a {
  position: absolute;
  font-size: 70%;
  color: #3366cc;
  cursor: pointer;
}

.container .profile-menu>div:nth-child(2)>a:hover {
  text-decoration: underline;
}

.container .profile-menu>div:nth-child(2)>a:nth-child(1) {
  left: 0.5em;
}

.container .profile-menu>div:nth-child(2)>a:nth-child(2) {
  right: 0.5em;
}

.container .profile-menu>div:nth-child(2)>span:hover {
  text-decoration: underline;
}

.profile-div:hover {
  box-shadow: 2px 4px 6px rgba(49, 49, 49, 0.8);
}

.profile-div .profile-span {
  height: 100%;
  width: 100%;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- DETAIL MODAL SPECIFIC STYLES --- */

/* Style for read-only fields */
.display-field {
  padding: 10px 0;
  font-size: 16px;
  color: #333;
}

.modal-content[data-mode="display"] input[readonly],
.modal-content[data-mode="display"] textarea[readonly] {
  /* Visual distinction for read-only inputs */
  background-color: #f7f7f7;
  border: 1px solid #ddd;
  color: #555;
  cursor: default;
}

/* Button Container for Actions */
.modal-button-container.detail-actions {
  justify-content: space-between;
  gap: 10px;
  margin-top: 30px;
}

.modal-button-container.detail-actions button {
  flex: 1;
  padding: 10px 15px;
  font-size: 14px;
}

/* Specific button colors */
.control-btn.delete {
  background-color: #dc3545;
}

.control-btn.edit {
  background-color: #ffc107;
  color: #333;
}

.control-btn.reply {
  background-color: #17a2b8;
}

.control-btn.forward {
  background-color: #6c757d;
}

/* Hover effects */
.control-btn.delete:hover {
  background-color: #c82333;
}

.control-btn.edit:hover {
  background-color: #e0a800;
}

.control-btn.reply:hover {
  background-color: #138496;
}

.control-btn.forward:hover {
  background-color: #5a6268;
}

/* --- Media Queries (Mobile Adjustments) --- */
@media (min-width: 769px) {
  .mobile-booking-modal-header .close-button {
    position: absolute;
    right: 25px;
    top: 15px;
    transform: none;
  }

  .mobile-booking-modal-header {
    display: block;
    position: static;
  }

  .mobile-booking-modal-header h1 {
    text-align: center;
  }
}

@media (max-width: 768px) {
  .modal-content {
    width: 98vw !important;
    padding: 10px 5vw 10px 5vw !important;
  }

  .mobile-booking-modal-hr {
    display: block;
    border: none;
    border-top: 1.5px solid #e0e0e0;
    margin: 0.5em 0 1em 0;
  }

  /* Simple two-column layout for detail action buttons on mobile */
  .modal-button-container.detail-actions {
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .modal-button-container.detail-actions button {
    width: 48%;
    margin-bottom: 10px;
  }
}

.mail-popup-content div.home-menu {
  display: flex;
  width: 100%;
  border-radius: 0.2em;
  border-bottom: 1px solid #919191;
  margin-bottom: 0.5em;
  align-items: center;
  justify-content: center;
  height: 2.5em;
}

.home-menu {
  display: none;
}

.home-menu>div.create-new-button {
  width: 10em;
  border-radius: 0.3em;
  position: relative;
}

.home-menu>div.create-new-button>div {
  width: 100%;
  border-radius: 0.3em;
  display: flex;
  align-items: center;
  height: 100%;
}

.home-menu>div.create-new-button>ul,
.home-menu>.move-to>ul {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  width: 10em;
  max-height: 0;
  display: none;
  position: absolute;
  top: 105%;
  margin-block-start: 0;
  margin-block-end: 0;
  padding-block-start: 0;
  padding-block-end: 0;
  padding-inline-start: 0;
  padding-inline-end: 0;
  background-color: white;
  border: none;
  z-index: 1000;
  transition: 0.3s all;
}

.home-menu>.move-to>ul {
  border-radius: 0.2em;
}

.home-menu>div.create-new-button>ul.show,
.home-menu>.move-to>ul.show,
.home-menu>div.category-button>ul.show {
  display: block;
  max-height: 15em;
  border-bottom-left-radius: 0.2em;
  border-bottom-right-radius: 0.2em;
  padding-block-start: 0.5em;
  padding-block-end: 0.5em;
  padding-inline-start: 10px;
  padding-inline-end: 10px;
  border: 0.5px solid #808080;
  overflow-y: auto;
}

.home-menu>div.create-new-button>ul li,
.home-menu>.move-to>ul>li {
  height: 1.5em;
  padding: 0.2em;
  font-family: math;
  display: flex;
  cursor: pointer;
}

.home-menu>.move-to>ul>li[disabled] {
  cursor: not-allowed;
}

.home-menu>div.create-new-button>ul li:hover,
.home-menu>.move-to>ul>li:not([disabled]):hover {
  background-color: #0000001a;
}

.home-menu>div.create-new-button>ul li:before,
.home-menu>.move-to>ul>li:not(:last-child):before {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1em 1em;
  content: '';
  display: block;
  height: 1em;
  width: 1em;
  margin-right: 1em;
  cursor: default;
  background-color: transparent;
}

.home-menu>.move-to>ul>li:last-child>form {
  width: 100%;
}

.home-menu>.move-to>ul>li:last-child>form>input {
  border: none;
  background: transparent;
  outline: none;
  max-width: calc(100% - 2em);
}

.home-menu>.move-to>ul>li:last-child>form>button {
  border: none;
  background: transparent;
  outline: none;
  max-width: 1.5em;
  font-size: 0.6em;
  color: rgba(5, 121, 255, 0.87);
  cursor: pointer;
}

.home-menu>.move-to>ul>li:last-child>form>button:hover {
  text-decoration: underline;
  font-weight: bold;
}

.home-menu>.move-to>ul>li[data-text=INBOX]:before {
  background-image: url(/inbox-blue.svg);
}

.home-menu>.move-to>ul>li[data-text=Sent]:before {
  background-image: url(/sent-blue.svg);
}

.home-menu>.move-to>ul>li[data-text=Drafts]:before {
  background-image: url(/draft-blue.svg);
}

.home-menu>.move-to>ul>li[data-text=Trash]:before {
  background-image: url(/delete-blue.svg);
}

.home-menu>.move-to>ul>li[data-text=Junk]:before {
  background-image: url(/junk-email-blue.svg);
}

.home-menu>.move-to>ul>li[data-text=Notes]:before {
  background-image: url(/notes-blue.svg);
}

.home-menu>.move-to>ul>li[data-text=Archive]:before {
  background-image: url(/archive-blue.svg);
}

.home-menu>.move-to>ul>li[data-text=Spam]:before {
  background-image: url(/spam-blue.svg);
}

.home-menu>div.create-new-button>ul li:first-child:before {
  background-image: url(/email.svg);
}

.home-menu>div.create-new-button>ul li:nth-child(2):before {
  background-image: url(/event.svg);
}

.home-menu>div.create-new-button>ul li:nth-child(3):before {
  background-image: url(/task.svg);
}

.home-menu>div.create-new-button>ul li:nth-child(4):before {
  background-image: url(/group.svg);
}

.home-menu>div.create-new-button>ul>li:not(:last-child),
.home-menu>.move-to>ul>li:not(:last-child) {
  border-bottom: 0.5px solid #808080;
}

.home-menu>div.category-button,
.home-menu>div.flag-button,
.home-menu>div.sig-button {
  width: max-content;
  border-radius: 0.3em;
  display: flex;
  align-items: center;
  margin-left: 1em;
  border-radius: 0.2em;
  cursor: pointer;
  position: relative;
}

.home-menu>div.category-button>ul {
  width: 13em;
  max-height: 10em;
  overflow-y: auto;
  position: absolute;
  background-color: white;
  border: 0.5px solid lightgrey;
  border-radius: 0.2em;
  top: 100%;
  z-index: 100000;
  margin-block-start: 1em;
  margin-block-end: 1em;
  padding-inline-start: 10px;
  display: none;
}

.home-menu>div.category-button>ul>li {
  padding: 0.2em;
  display: flex;
}

.home-menu>div.category-button>ul>li>span {
  margin-left: 0.5em;
  display: flex;
  align-items: center;
  transition: all 0.3s;
}

.home-menu>div.category-button>ul>li>span:hover {
  font-weight: bold;
}

.home-menu>div.category-button>ul>li>i {
  width: 1.5em;
}

.home-menu>div.category-button {
  width: 3em;
  padding: 0.3em;
}

.home-menu>div.category-button i:not(:first-child),
.home-menu>div.flag-button i:not(:first-child),
.home-menu>div.sig-button i:not(:first-child) {
  width: 1em;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-right-radius: 0.3em;
  border-bottom-right-radius: 0.3em;
}

.home-menu>div.create-new-button>div>button {
  background: transparent;
  background-color: rgba(43, 43, 225, 0.7);
  border: none;
  outline: none;
  height: 100%;
  cursor: pointer;
}

.home-menu>div.create-new-button>div>button:nth-child(1) {
  width: 80%;
  color: white;
  font-size: 1em;
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  border-top-left-radius: 0.3em;
  border-bottom-left-radius: 0.3em;
  border-right: 1px solid white;
}

.home-menu>div.create-new-button>div>button:nth-child(2) {
  width: 20%;
  border-top-right-radius: 0.3em;
  border-bottom-right-radius: 0.3em;

}

.home-menu>div.create-new-button>div>button:hover {
  background-color: rgba(43, 43, 225, 0.85);
}

.home-menu>.delete-button,
.home-menu>.archive-button,
.home-menu>.report-spam-button,
.home-menu>.move-to>button,
.home-menu>.reply-button,
.home-menu>.reply-with-meeting-button,
.home-menu>.reply-all-button,
.home-menu>.forward-button,
.home-menu>div.read-unread,
.home-menu>div.flag-button>button,
.home-menu>div.sig-button>i:first-child,
.home-menu>.pin-button,
.home-menu>.print-button,
.home-menu>.block-button {
  border: none;
  outline: none;
  height: 100%;
  cursor: pointer;
  background: transparent;
  width: 2em;
  padding: 0;
  margin-left: 1em;
  border-radius: 0.2em;
}

.home-menu>div.sig-button>i:first-child {
  width: 1.2em;
  margin-left: 0;
  display: flex;
}

.home-menu>div.flag-button>button,
.home-menu>div.sig-button>button {
  margin-left: 0;
  border-top-left-radius: 0.3em;
  border-bottom-left-radius: 0.3em;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.home-menu>div.read-unread {
  width: 10em;
  height: 2em;
  display: flex;
  align-items: center;
  justify-content: end;
}

.home-menu>div.read-unread span {
  width: 80%;
  font-size: 0.9em;
  padding-right: 0.5em;
  text-align: right;
}

.home-menu>div.read-unread:before {
  content: '';
  background-repeat: no-repeat;
  background-position: center;
  width: 15%;
  height: 1.5em;
  background-size: 70% 70%;
}

.home-menu>div.read-unread:before {
  background-image: url(/mark-as-read-blue.svg);
  background-size: 100%;
}

.home-menu>div.flag-button>button:hover,
.home-menu>div.flag-button>i:hover,
.home-menu>div.sig-button>button:hover,
.home-menu>div.sig-button>i:hover {
  background-color: #ffffff;
}

.home-menu>.move-to>button {
  margin-left: 0;
}

.home-menu>.move-to {
  width: 3em;
  border-radius: 0.2em;
  margin-left: 1em;
  transition: all 0.3s;
  display: flex;
  cursor: pointer;
  position: relative;
}

.home-menu>.move-to>div {
  width: 1em;
  align-items: center;
  justify-content: center;
  display: flex;
}

.home-menu button {
  transition: all 0.3s;
}

.home-menu>button.delete-button:not([disabled]):hover,
.home-menu>button.archive-button:not([disabled]):hover,
.home-menu>button.report-spam-button:not([disabled]):hover,
.home-menu>.move-to:not([disabled]):hover,
.home-menu>.reply-button:not([disabled]):hover,
.home-menu>.reply-with-meeting-button:not([disabled]):hover,
.home-menu>.reply-all-button:not([disabled]):hover,
.home-menu>button.forward-button:not([disabled]):hover,
.home-menu>div.read-unread:not([disabled]):hover,
.home-menu>div.category-button:not([disabled]):hover,
.home-menu>div.flag-button:not([disabled]):hover,
.home-menu>div.sig-button:not([disabled]):hover,
.home-menu>.pin-button:not([disabled]):hover,
.home-menu>.print-button:not([disabled]):hover,
.home-menu>.block-button:not([disabled]):hover {
  background-color: #efefef;
  border: 0.5px solid #d4d4d4;
}

.home-menu>button.delete-button[disabled],
.home-menu>button.archive-button[disabled],
.home-menu>button.report-spam-button[disabled],
.home-menu>.move-to[disabled],
.home-menu>.move-to[disabled]>button,
.home-menu>.move-to[disabled]>div,
.home-menu>.reply-button[disabled],
.home-menu>.reply-with-meeting-button[disabled],
.home-menu>.reply-all-button[disabled],
.home-menu>button.forward-button[disabled],
.home-menu>div.read-unread[disabled],
.home-menu>div.category-button[disabled],
.home-menu>div.flag-button[disabled],
.home-menu>div.flag-button[disabled]>button,
.home-menu>div.sig-button[disabled],
.home-menu>div.sig-button[disabled]>i,
.home-menu>.pin-button[disabled],
.home-menu>.print-button[disabled],
.home-menu>.block-button[disabled] {
  cursor: not-allowed;
}

.home-menu>.delete-button:hover svg>g>path,
.home-menu>.archive-button:hover svg>g>path,
.home-menu>.report-spam-button:hover svg>g>path,
.home-menu>.report-spam-button:hover svg>g>polygon,
.home-menu>.move-to:hover button svg>g>path,
.home-menu>.forward-button:hover svg g>path,
.home-menu>div.category-button:hover>svg,
.home-menu>div.flag-button:hover svg,
.home-menu>div.sig-button:hover svg,
.home-menu>button.pin-button:hover svg {
  stroke-width: 1.5;
}

.home-menu>button.print-button:hover svg path,
.home-menu>button.print-button:hover svg rect,
.home-menu>button.print-button:hover svg polyline {
  stroke-width: 2.5;
}

.home-menu>button.reply-with-meeting-button:hover svg {
  stroke-width: 5;
}

.home-menu>button.print-button:hover svg circle {
  r: 1.25;
}

.home-menu>div.category-button:hover>i>svg,
.home-menu>div.flag-button:hover i>svg {
  stroke-width: 50;
}

.home-menu>.reply-button:hover svg>g>path,
.home-menu>.reply-all-button:hover svg>g>path {
  stroke-width: 2;
}

.home-menu>.move-to:hover>div>svg {
  stroke-width: 20;
}
#login-content #app {
    width: 50vh;
    height: 98%;
    background: white;
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1);
    left: 50px;
    position:relative;
}

#login-content #app > .app-view > footer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 1vh;
    position: absolute;
}

#login-content #app > .app-view > footer > a, 
#login-content #app > .app-view > footer > label {
    color: #3366cc;
    cursor: pointer;
    transition: all 1s;
}

#login-content #app > .app-view > footer > a:hover, 
#login-content #app > .app-view > footer > label:hover {
    text-decoration: underline;
    font-weight: bold;
}

#login-content #app > .app-view > footer > label.contact-us{
    display: none;
}

#login-content:has(#app > .app-view > footer > #contact-us:checked) #contact-us-popup {
    display: flex;
}

#login-content .app-view div:has(input[for=password]){
    display:flex;
    top: 7.5vh;
    height: 7.5vh;
    width: calc(100% - 13vh);
    position: absolute;
    left: 6.5vh;
    box-shadow: inset 0 -0.5vh rgba(0, 0, 0, 0.1);
}
  
#login-content .app-view, #login-content .app-view-signup {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    position: absolute;
    opacity: 1;
}

#login-content .app-view-signup div:has(input[type=file]){
    height: 20vh;
    width:20vh;
    border:1px solid lightgrey;
    border-radius: 50%;
    font-size: 2vh;
    justify-content: center;
    align-items: center;
    display: flex;
    color: #00000060;
    cursor: pointer;
    z-index: 1;
    padding: 0.2em;
    left: 15vh;
    
    &:not(:has(> img[src])):before {
        content: 'Add account picture\a(Double click to add)';
        text-align: center;
    }

    & > img {
        border-radius: 50%;
    }

    & > layer {
        position:absolute;
        height:100%;
        width:100%;
        top:0;
        left:0;
        z-index:10;
        border-radius:0.2em;
        background: rgba(0,0,0,0.15);
        box-shadow: 0 3px 5px 0 rgba(31,38,135,0.37);
        backdrop-filter: blur(5px);
        border: 1px solid rgba(255,255,255,0.18);
        background-image: url(/delete-white.svg);
        background-size: 2em;
        background-position: center;
        background-repeat: no-repeat;
        cursor:pointer;
        max-height: 0;
        max-width: 0;
        transition: all 0.2s ease-out;

        & > button {
          float: right;
          background: transparent;
          outline: none;
          border: none;
          cursor: pointer;
          padding: 0;
          max-height: 0;
          max-width: 0;
  
          &:hover > svg > path{
            stroke-width: 5;
          }
        }
    }
}



#login-content .app-view-signup {
    opacity: 0;
    top: -100%;
}

#login-content .app-view-signup div:has(> input:not([type=file])){
    height: 7.5vh;
    top: 10%;

    & > input:focus {
        animation: box-shadow-anim 1s forwards;
    }

    &:before {
        content: '';
        height: 3vh;
        width: 3vh;
        display: block;
        top: 30%;
        left: 3%;
    }
}

#login-content .app-view-signup > form > div.custom-select-country::before,
#login-content .app-view-signup > form > div.custom-select-states::before {
    top: -10%;
    left: -7%;
}

@keyframes box-shadow-anim {
    from {
        box-shadow: inset 0 -0.5vh rgba(0, 0, 0, 0.1);
    } to {
        box-shadow: inset 0 -0.5vh #0F9EDE;
    }
}

@keyframes box-shadow-anim-reverse {
    from {
        box-shadow: inset 0 -0.5vh #0F9EDE;
    } to {
        box-shadow: inset 0 -0.5vh rgba(0, 0, 0, 0.1);
    }
}

#login-content .app-view-signup div:has(> input[type=email]){
    &:before {
        background: url(/email.svg) no-repeat center center / cover;
    }
}

#login-content .app-view-signup div:has(> input[for=password]),
#login-content .app-view-signup div:has(> input[for=confirm_password]) {
    &:before {
        background: url(/password.svg) no-repeat center center / cover;
    }
}

#login-content .app-view-signup div:has(> input[for=name]) {
    &:before {
        background: url(/name.svg) no-repeat center center / cover;
    }
}

#login-content .app-view-signup div:has(> input[type=tel]) {
    &:before {
        background: url(/phone.svg) no-repeat center center / cover;
    }
}

#login-content .app-view-signup > header > .back-button {
    background-image:url(/back-arrow.svg);
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    outline: none;
    height: 3vh;
    width: 3vh;
    background-color: transparent;
    cursor: pointer;
    float: left;

    &:hover{
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        border-radius: 50%;
    }
}

#login-content .app-view-signup > header > h2{
    flex-grow: 1;
    text-align: center;
    margin-block-start: 0;
    margin-block-end: 0;
    color: #3366cc;
}

#login-content .app-view-signup > header {
    padding: 3vh;
    display: flex;
    align-items: center;
}

#login-content .app-view-signup form > button {
    border: none;
    width: 90%;
    height: 5vh;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #99ccff;
    color: #fff;
    text-transform: uppercase;
    font-size: 15px;
    letter-spacing: 2px;
    transition: all 0.5s;
    position: absolute;
    overflow: hidden;
    bottom: 5%;
    left: 5%;

    &:before, &:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-color: rgba(52, 152, 253, 0.25);
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
        -webkit-transform: translate(-100%, 0);
        transform: translate(-100%, 0);
        -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
        transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
    }

    &:hover:before, &:hover:after {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    & > span {
        position: relative;
        z-index: 2;
    }
}
  
#login-content .app-header {
    padding: 6vh;
}

#login-content .app-header, #login-content .app-header > * {
    font-family: system-ui;
    font-size: 1.5em;
    margin: 0;
    font-weight: 300;
}

#login-content .app-header > h1 {
    font-size: 4.8vh;
    font-weight: 400;
    margin-bottom: 4.8vh;
}

#login-content .app-header > h2 {
    font-size: 3vh;
}
  
#login-content .app-subheading {
    color: rgba(0, 0, 0, 0.45);
}
  
#login-content .app-register {
    position: relative;
    bottom: 1em;
    color: rgba(0, 0, 0, 0.45);
    display:flex;
    align-items: center;
    justify-content: center;
}

#login-content .app-register > a {
    font-weight: 400;
}

#login-content input:not([for=password]) {
    width: calc(100% - 13vh);
    height: 7.5vh;
    left: 6.5vh;
    box-shadow: inset 0 -0.5vh rgba(0, 0, 0, 0.1);
}

#login-content input[for=password]::-ms-reveal,
#login-content input[for=password]::-ms-clear,
#login-content input[for=confirm_password]::-ms-reveal,
#login-content input[for=confirm_password]::-ms-clear{
    display: none;
}
  
#login-content input {
    font-size: 2.5vh;
    margin-bottom: 2vh;
    background: transparent;
    position: absolute;
    top: 0;
    z-index: 2;
    border: none;
    outline: none;

    &::placeholder {
        color: #808080a5;
    }
}

#login-content .app-view-signup input {
    margin-bottom: 0;
}

#login-content input:not([type=password]):focus {
    outline: none;
    box-shadow: inset 0 -0.5vh transparent;
}

/* #login-content .app-view input[type=email] {
    top: 40%;
} */

/* #login-content .app-view input[type=password] {
    top: calc(40% + 7.5vh);
} */
  
#login-content .app-view form:has(input[type=email]:valid) ~ * .st1,
#login-content form:has(div > input[type=email]:valid) ~ * .st1 {
    transition-timing-function: ease-in-out;
    stroke-dasharray: 50, 153;
    stroke-dashoffset: 25;
}

#login-content form:has(> input[type=email]:focus) ~ * .st0 {
    stroke-dasharray: 210, 900;
    stroke-dashoffset: 0;
}
  
#login-content .app-view form:has(div > input[type=password]:focus) ~ * .st0,
#login-content .app-view form:has(div > input[type=password]:valid) ~ * .st0,
#login-content .app-button:focus ~ * .st0 {
    stroke-dasharray: 210, 900;
    stroke-dashoffset: -305;
}
  
#login-content form:has(> input:not(:valid)) ~ * .app-button,
#login-content form:has(div > input:placeholder-shown) ~ * .app-button {
    pointer-events: none;
    opacity: 0.6;
}
  
#login-content .app-button {
    text-decoration: none;
    color: #3366cc;
    font-size: 4.8vh;
    padding: 0 6vh;
    position: absolute;
    font-weight: 400;
    border: none;
    outline: none;
    background: transparent;
    cursor: pointer;
}

#login-content .app-button:focus {
    outline: none;
}
  
@-webkit-keyframes button-press {
    from, 20% {
      opacity: 1;
    }
    10% {
      opacity: 0.4;
    }
    40%, to {
      opacity: 0;
    }
}
  
@keyframes button-press {
    from, 20% {
      opacity: 1;
    }
    10% {
      opacity: 0.4;
    }
    40%, to {
      opacity: 0;
    }
}

#login-content #welcome ~ * .app-button {
    -webkit-animation: button-press 2s cubic-bezier(0.77, 0, 0.175, 1) both;
            animation: button-press 2s cubic-bezier(0.77, 0, 0.175, 1) both;
}

#login-content #welcome ~ * .st0 {
    stroke-dashoffset: -760;
    stroke-dasharray: 140, 900;
    transition-duration: 1.2s;
    /*-webkit-animation: disappear 0s 1.3s both;
            animation: disappear 0s 1.3s both;*/
}

#login-content #welcome ~ * .st1 {
    transition-duration: 0.3s;
    opacity: 0;
}

#login-content #welcome ~ * .app-graphic {
    transform: translate(0, 0);
    opacity: 1;
}

#login-content #welcome ~ * #svg-lines {
    -webkit-animation: pulse 0.5833333333s 1.2s ease-in-out both;
            animation: pulse 0.5833333333s 1.2s ease-in-out both;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
}

#login-content #welcome ~ * .svg-loader {
    -webkit-animation: appear 0s 1.2s both;
            animation: appear 0s 1.2s both;
}

#login-content #welcome ~ * .svg-loader-segment {
    transition-delay: 3.75s;
    opacity: 0;
}

#login-content #welcome ~ * .svg-loader-segment.-cal {
    transform: translateX(4vh) translateY(-4vh);
    stroke: #08B5CF;
}

#login-content #welcome ~ * .svg-loader-segment.-heart {
    transform: translateX(3.5vh) translateY(6.7vh);
    stroke: #9965AA;
}

#login-content #welcome ~ * .svg-loader-segment.-steps {
    transform: translateX(-6.9vh) translateY(5.2vh);
    stroke: #0F9EDE;
}

#login-content #welcome ~ * .svg-loader-segment.-temp {
    transform: translateX(-14vh) translateY(-4vh);
    stroke: #F4814B;
}

#login-content #welcome ~ * .svg-data {
    opacity: 1;
    transform: translate(0, 0);
    transition: transform 0.6s 4.95s, opacity 0.6s 4.95s, stroke-dasharray 0.6s 4.95s, stroke-dashoffset 0.6s 4.95s;
}

#login-content #welcome ~ * .svg-data.-temp {
    stroke-dasharray: 118;
}

#login-content #welcome ~ * .svg-data.-cal {
    stroke-dasharray: 113;
}

#login-content #welcome ~ * .svg-data.-steps-bg, #welcome ~ * .svg-data.-steps {
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
}

#login-content #welcome ~ * .svg-data.-heart {
    stroke-dasharray: 200;
    stroke-dashoffset: 0;
}

#login-content #welcome ~ * .svg-activity-fill,
#login-content #welcome ~ * .svg-activity-line {
    transform: translateY(0);
    opacity: 1;
    transition-duration: 1.2s;
    transition-delay: 4.95s;
}

#login-content #welcome ~ * .app-view:nth-child(1) > :not(svg),
#login-content #welcome ~ * *[class^=app-view]:nth-child(2) > :not(svg) {
    opacity: 0;
    pointer-events: none;
}

#login-content #welcome ~ * .app-view:nth-child(2) {
    opacity: 1;
    pointer-events: auto;
}

#login-content #welcome ~ * .app-view:nth-child(2) > .app-header > *,
#login-content #welcome ~ * .app-view:nth-child(2) > .app-content,
#login-content #welcome ~ * .app-view:nth-child(2) > .app-activity,
#login-content #welcome ~ * .app-view:nth-child(2) .app-item,
#login-content #welcome ~ * .app-view:nth-child(2) .app-item > *:not(.app-graphic) {
    transform: translateY(0);
    transition-delay: 4.95s;
    opacity: 1;
}

#login-content #welcome ~ * .app-view:nth-child(2) > .app-activity {
    opacity: 1;
}

#login-content #welcome ~ * .app-view:nth-child(2) .app-item, #welcome ~ * .app-view:nth-child(2) > .app-content {
    border-color: #E3E3E3;
}
  
#login-content #welcome:not(:target) ~ * .app-graphic {
    transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}
  
@-webkit-keyframes pulse {
    from, to {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
}
  
@keyframes pulse {
    from, to {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
}

@-webkit-keyframes disappear {
    to {
      opacity: 0;
    }
}

@keyframes disappear {
    to {
      opacity: 0;
    }
}

@-webkit-keyframes appear {
    to {
      opacity: 1;
    }
}

@keyframes appear {
    to {
      opacity: 1;
    }
}

#login-content .app-view:nth-child(2) {
    display: flex;
    flex-direction: column;
    pointer-events: none;
}

#login-content .app-view:nth-child(2) > .app-header {
    font-size: 1rem;
    flex-basis: 25%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 4vh;
    padding-bottom: 1rem;
}

#login-content .app-view:nth-child(2) > .app-header > h2 {
    transform: translateY(1rem);
}

#login-content .app-view:nth-child(2) > .app-header > h2 > em {
    color: #0F9EDE;
    font-style: normal;
}

#login-content .app-view:nth-child(2) > .app-header > h2,
#login-content .app-view:nth-child(2) .app-item > *:not(.app-graphic) {
    transition-duration: 0.9s;
    opacity: 0;
}

#login-content .app-view:nth-child(2) > .app-content {
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    flex-wrap: wrap;
    flex-basis: 40%;
    border: 1px solid transparent;
    border-left: none;
    border-right: none;
}

#login-content .app-view:nth-child(2) > .app-activity {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    opacity: 0;
}

#login-content .app-view:nth-child(2) > .app-activity > .app-header {
    padding: 4vh;
    display: flex;
    flex-direction: row;
    align-items: center;
}

#login-content .app-view:nth-child(2) > .app-activity > .app-header > h2 {
    flex-grow: 1;
}

#login-content .app-view:nth-child(2) > .app-activity > .app-graph {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
  
#login-content .app-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    opacity: 0;
}
  
#login-content .app-item {
    flex-basis: 50%;
    flex-grow: 0;
    flex-shrink: 0;
    border: 1px solid transparent;
    padding: 2vh 4vh;
    padding-bottom: 0;
}

#login-content .app-item > *:not(.app-graphic) {
    transform: translateY(1rem);
}

#login-content .app-item:nth-child(1) .app-graphic {
    transform: translateX(17vh) translateY(5vh);
}

#login-content .app-item:nth-child(2) .app-graphic {
    transform: translateX(-4vh) translateY(4vh);
}

#login-content .app-item:nth-child(3) .app-graphic {
    transform: translateX(6vh) translateY(-7vh);
}

.app-item:nth-child(4) .app-graphic {
    transform: translateY(-8vh) translateX(-4vh);
}
  
#login-content .app-graphic {
    transition: transform 1.2s 3.75s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.6s 4.35s cubic-bezier(0.77, 0, 0.175, 1);
    margin-top: 1rem;
    opacity: 0;
}
  
#login-content .app-data {
    font-size: 2rem;
}
  
#login-content .app-unit {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.45);
}
  
#login-content .app-label {
    font-size: 0.8rem;
    color: rgba(0, 0, 0, 0.45);
}
  
#login-content .app-menu-icon {
    width: 1.5rem;
    height: 2px;
    background: #D0DFF0;
    margin-top: 0.5rem;
}

#login-content .app-menu-icon:before, .app-menu-icon:after {
    content: "";
    display: block;
    position: absolute;
    width: 1rem;
    height: 100%;
    background: #D0DFF0;
}

#login-content .app-menu-icon:before {
    top: -0.5rem;
    right: 0.1rem;
}

#login-content .app-menu-icon:after {
    top: 0.5rem;
    left: 0.1rem;
}
  
#login-content .app-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 1.25rem;
}
  
#login-content .app-tag {
    font-size: 0.8rem;
    color: rgba(0, 0, 0, 0.45);
}

#login-content .app-tag + .app-tag {
    margin-left: 1rem;
}

#login-content .app-tag:before {
    content: "";
    display: inline-block;
    margin-right: 0.5rem;
    height: 0.5rem;
    width: 0.5rem;
    border-radius: 50%;
    background: #D0DFF0;
}

#login-content .app-tag.-active:before {
    background: #0F9EDE;
}
  
#login-content {
    font-family: Montserrat, sans-serif;;
    font-weight: 300;
    display: flex;
    flex-direction: row;
    /*justify-content: space-around;*/
    align-items: center;
    background: #f8f8f8;
    font-size: 2.5vh;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    user-select: none;
}
  
#login-content .st0, .st1, #login-content .svg-loader-segment {
    fill: none;
    stroke: #0F9EDE;
    stroke-width: 0.5vh;
    stroke-alignment: inside;
    opacity: 1;
    transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}
  
#login-content .svg-loader {
    opacity: 0;
}
  
#login-content .st0 {
    stroke-dasharray: 0, 900;
    stroke-dashoffset: 0;
}
  
#login-content .st1 {
    transition-delay: 0.3s;
    stroke-dasharray: 50, 153;
    stroke-dashoffset: -153;
}
  
#login-content .svg-loader-segment {
    transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.85s cubic-bezier(0.77, 0, 0.175, 1), stroke 0.85s cubic-bezier(0.77, 0, 0.175, 1);
}
  
#login-content .app-view #svg-lines, #login-content .app-view-signup #svg-lines {
    left: 0;
    width: 100%;
    z-index: 0;
    overflow: visible;
    transform-origin: center 4vh;
}

#login-content .app-view-signup #svg-lines {
    position: absolute;
    top: 18.5%;
}

#login-content .app-view #svg-lines {
    position: relative;
    top: -61.5vh;
}
  
#login-content .svg-data {
    fill: none;
    stroke-width: 0.5vh;
}

#login-content .svg-data.-temp {
    stroke: #F4814B;
    stroke-dasharray: 20, 118;
}

#login-content .svg-data.-cal {
    stroke: #08B5CF;
    stroke-dasharray: 20, 113;
}

#login-content .svg-data.-steps-bg {
    stroke: #E0E1E0;
    stroke-dasharray: 40, 100;
    stroke-dashoffset: -60;
}
  
#login-content .svg-data.-steps {
    stroke: #0F9EDE;
    stroke-dasharray: 20, 73;
    stroke-dashoffset: -53;
}

.svg-data.-heart {
    stroke: #9965AA;
    stroke-dasharray: 50, 200;
    stroke-dashoffset: -150;
}
  
.svg-activity-fill {
    fill: #C4E4F8;
}
  
#login-content .svg-activity-line {
    fill: none;
    stroke: #65BCEA;
    stroke-miterlimit: 10;
    stroke-width: 0.25vh;
}
  
#login-content .svg-activity-avg, #login-content .svg-activity-indicator {
    fill: none;
    stroke: #D0DFF0;
    stroke-width: 0.25vh;
    mix-blend-mode: multiply;
}
  
#login-content .svg-activity-fill, #login-content .svg-activity-line {
    transform: translateY(10vh);
    opacity: 0;
}
  
#login-content > .meta-container {
    left: 10%;
}
  
#login-content .meta {
    flex-basis: calc(80% - 50vh);
    display: inline-block;
    animation: inner-left-visible 1s 0.5s ease both;
}
  
#login-content .meta > * {
    transition: none !important;
}

#login-content .meta h1 {
    font-weight: 300;
    font-size: 4em;
    color: #333;
    animation: text-clip 1s 0s cubic-bezier(0.5, 0, 0.1, 1) both;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
}

#login-content .meta p {
    line-height: 1.3;
    font-size: 1.5vw;
    color: #3366cc;
    animation: text-clip 1s 0s cubic-bezier(0.5, 0, 0.1, 1) both;
}

#login-content .meta a {
    color:rgba(192, 8, 125, 0.29);
}

#login-content .meta a:hover {
    color:rgb(192, 8, 125);
}

#login-content .welcome_span{
    display: none;
}
  
#login-content .route {
    display: none;
}
  
#login-content *, #login-content *:before, #login-content *:after {
    box-sizing: border-box;
    position: relative;
}
  
@keyframes inner-left-visible {
    from {
      transform: translateX(50%);
      opacity: 0;
      display: none;
    }
    to {
      transform: none;
      opacity: 1;
      display: inline-block;
    }
}
  
@keyframes text-clip {
    from {
      clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
    }
    to {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

.google_icon {
    background-image: url(/google-icon.svg);
}

.facebook_icon {
    background-image: url(/facebook.svg);
}

.instagram_icon {
    background-image: url(/instagram.svg);
}

.icon-button {
    background-position: center;
    background-repeat: no-repeat;
    height: 5vh;
    width: 5vh;
    background-color: white;
    border: none;
    outline: none;
    cursor:pointer;

    &:hover {
        border-radius: 0.2em;
        border: 1px solid lightgrey;
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
    }
}

#login-content .signup {
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    color: #3366cc;
    font-weight: bold;

    &:hover {
        text-decoration: underline;
    }
}

@keyframes element-invisible {
    from {
        top: 0;
        opacity: 1;
    }
   to {
        top: -100%;
        opacity: 0;
    }
}

@keyframes element-visible {
    from {
        top: -100%;
        opacity: 0;
    }
    to {
        top: 0;
        opacity: 1;
    }
}

.invisible {
    animation: element-invisible 0.3s ease both;
}

.visible {
    animation: element-visible 0.3s 0.3s ease both;
}

@media screen and (max-width: 750px){
    #login-content .meta-container {
        display: none;
    }
    
    #login-content #app {
        left: 0;
        position: relative;
        width: 100%;
    }
      
    #login-content .app-view #svg-lines {
          top: -60.5vh;
    }
  
    #login-content .app-view-signup #svg-lines {
          top: 18.5%;
    }
  
    #login-content #app .welcome_span{
          display: block;
    }

    #login-content #app > .app-view > footer > label.contact-us {
        display: block;
    }

    #login-content .app-register {
        bottom: 0.5em;
    }
}

#login-content .app-view-signup .custom-select-country,
#login-content .app-view-signup .custom-select-states {
    position: relative;
    top: 10%;
    height: 7.5vh;
    align-items: center;
    display: flex;
    justify-content: center;

    &:before {
        content: '';
        height: 3vh;
        width: 3vh;
        display: block;
        left: -6.5%;
        top: -10%;
    }
}

#login-content .app-view-signup .custom-select-country:before {
    background: url(/flag.svg) no-repeat center center / cover;
}

#login-content .app-view-signup .custom-select-states:before {
    background: url(/states.svg) no-repeat center center / cover;
}
  
#login-content .app-view-signup .custom-select-country select,
#login-content .app-view-signup .custom-select-states select {
    display: none; /*hide original SELECT element:*/
}
  
#login-content .app-view-signup .select-selected-country,
#login-content .app-view-signup .select-selected-states {
    background-color: transparent;
    padding: 0;
    width: calc(100% - 13vh);
    border: none;
    align-items: center;
    display: flex;
    outline: none;
    padding-bottom: 0.5em;
    left: -2.5%;
    color: #00000060;

    &:focus {
        border-bottom: 0.5px solid lightgrey;
    }
}

#login-content .app-view-signup .select-selected-country:empty:not(:focus):before,
#login-content .app-view-signup .select-selected-states:empty:not(:focus):before {
    content: attr(data-text);
}
  
  /*style the arrow inside the select element:*/
#login-content .app-view-signup .select-selected-country:after,
#login-content .app-view-signup .select-selected-states:after {
    position: absolute;
    content: "";
    right: 1vh;
    width: 0.7em;
    height: 0.7em;
    background: url(/right-triangle.svg);
    background-position: center;
    background-repeat: no-repeat;
    transition-duration: 1s;
    transition-property: transform;
}
  
  /*point the arrow upwards when the select box is open (active):*/
#login-content .app-view-signup .select-selected-country.select-arrow-active:after,
#login-content .app-view-signup .select-selected-states.select-arrow-active:after {
    transform: rotate(90deg);
}
  
  /*style the items (options), including the selected item:*/
#login-content .app-view-signup .select-items-country div, 
#login-content .app-view-signup .select-items-states div {
    color: #ffffff;
    padding: 1vh;
    border: 1px solid transparent;
    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
    cursor: pointer;
    user-select: none;
    color: black;
    font-size: 0.8em;
    background-color: #46464614;

    &:hover {
        color:white;
        font-weight: bold;
        background-color: #464646;
        animation: mousein-list-item 1s;
    }
}

@keyframes mousein-list-item {
    from {
        background-color: #46464614;
        color: black;
        font-weight: normal;
    }
    to {
        color:white;
        background-color: #464646;
        font-weight: bold;
    }
}
  
  /*style items (options):*/
#login-content .app-view-signup .select-items-country,
#login-content .app-view-signup .select-items-states {
    position: absolute;
    background-color: white;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    overflow-y: auto;
    transition: max-height 1s cubic-bezier(0, 1, 0, 1);
    max-height: 18vh;
    justify-self: center;
    width: 70%;
    box-shadow: 1px 1px 1px 1px #808080;
    border-radius: 0.2em;
}
  
  /*hide the items when the select box is closed:*/
#login-content .app-view-signup .select-hide {
    max-height: 0;
    box-shadow: none;
}
  
.select-items-country div:hover, .select-items-states div:hover, .same-as-selected-country, .same-as-selected-states {
    background-color: rgba(213, 220, 220, 0.2);
}

#login-content .meta .whatsapp, 
#login-content .meta .call, 
#login-content .meta .email {
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    width: 5em;
    display: block;
    height: 5em;
    bottom: -3em;
}

#login-content .contact-us-popup-content .whatsapp, 
#login-content .contact-us-popup-content .call, 
#login-content .contact-us-popup-content .email {
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    width: 3em;
    display: block;
    height: 3em;
}

#login-content .contact-us-popup-content .email {
    background-image: url(/email-contact.svg);
    margin-left: 2em;
}

#login-content .contact-us-popup-content .whatsapp {
    background-image: url(/whatsapp.svg);
}

#login-content .contact-us-popup-content .call {
    background-image: url(/call.svg);
    margin-left: 2em;
}

#login-content .meta .email {
    background-image: url(/email-contact.svg);
    justify-self: center;
    position: relative;
}

#login-content .meta .whatsapp {
    background-image: url(/whatsapp.svg);
    right: 2em;
}

#login-content .meta .call {
    background-image: url(/call.svg);
    left: 2em;
    width: 4em;
    height: 4em;
}

#login-content .popup {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: transparent;
    backdrop-filter: blur(10px);
    z-index: 9999;
    display: none;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    align-items: center;
    justify-content: center;
}

#login-content .popup:target {
    opacity: 1;
    visibility: visible;
}

#login-content .popup .contact-us-popup-content {
    background-color: white;
    box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    overflow: hidden;
    background: white;
    width: max-content;
    padding: 0 1em;
    height: 5em;
    display: flex;
    justify-content: center;
    align-items: center;
}
div.rtf-div table td[rowspan] > div.first div.second, div.rtf-div table td > div.first:has(> div.first > br) div.second {
                align-items: start;
}

div.rtf-div table th > div > div, div.rtf-div table td > div > div {
    outline: none;
    overflow: hidden;
    border: none;
}

div.rtf-div table th, div.rtf-div table td {
    position: relative;
    word-wrap: break-word;
    max-width: 100%;
}

div.rtf-div table {
    table-layout: fixed;
    position: relative;
}

div.rtf-div table th.fixed, div.rtf-div table td.fixed {
    background: rgba(228, 228, 228, 0.6);
    position: sticky;
}

div.rtf-div table th.fixed, div.rtf-div table td.fixed {
    background: rgba(228, 228, 228, 0.6);
    position: sticky;
}

div.rtf-div table th.fixed {
    top: 0;
}

div.rtf-div table td.fixed {
    left: 0;
}

div.rtf-div table th > div.first, div.rtf-div table td > div.first {
    min-width: 3em;
    height: 100%;
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    width: 100%;
}

div.rtf-div table th > div.first div.first,
div.rtf-div table td > div.first div.first {
    flex-grow: 1;
    width: 100%;
}

div.rtf-div table, div.rtf-div table th, div.rtf-div table td {
    border: 1px solid lightgrey;
    border-collapse: collapse;
    max-width: 100%;
    font-size: 1em;
}

div.rtf-div ul, div.rtf-div ol {
    margin-left: 5em;
    overflow-x: auto;
}

.editable-code.active {
    border: 1px solid #388bff;
}

.editable-code label {
    width: 100%;
    height: 1.5em;
    text-align: center;
    font-size: 0.7em;
    padding: 0.2em;
    background: linear-gradient(to bottom, #ffffff, lightgrey);
    color: black; 
}

.editable-code code {
    display: flex;
    font-size: 1em;
    position: relative;
    margin-left: 3.5em;
}

.editable-code code:before {
    counter-increment: line;
    content: counter(line) ". ";
    display: inline-block;
    padding-left: 0.2em;
    width: 3em;
    min-width: 3em;
    background-color: #d4d4d4;  
    position: absolute;
    top: 0;
    bottom: 0;
    left: -3.5em;
    text-align: center;
}

.editable-code code * {
    font-family: monospace;
}

div:has(> .editable-code) {
    max-width: 90%; 
    min-width: 90%; 
    margin: auto; 
    overflow: auto;
}

.editable-code {
    counter-reset: line;
    height: 100%;
    border: 0.5px solid #9898989d;
    background-color: #f5f5f563;
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word; 
    padding-right: 0.2em; 
    outline: none;
}

.no-border {
    width: 100%; 
    border: none; 
    outline: none;
}
.mail-header {
    display: flex;
    height: 3em;
    background-color: #d5e4ef;
    align-items: center;
}

.search-container {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-flex: 1;
    align-items: center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-color: white;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    height: 70%;
    overflow: hidden;
    width: 50%;
    justify-self: center;
    border: 1px solid lightgrey;
    border-left: none;
    border-right: none;
    outline: none;
    display: table-cell;
    vertical-align: middle;
    transition: 0.3s all;
}

.search-mail {
    border-top-right-radius: 0.2em;
    border-bottom-right-radius: 0.2em;
    outline: none;
    background: white;
    height: 70%;
    width: 1.5em;
    border: 1px solid lightgrey;
    border-left: none;
    padding: 0.2em;
    cursor: pointer;
}

.search-mail:hover {
    background-color: #e7e7e7;
}

.search-container input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
}

.search-container:not(:has(input:focus)) {
    width: 30%;
}

header:has(> .search-container > input:not(:focus)) .search-cancel {
    margin-left: calc(30% - 4.5em);
}

.search-cancel {
    background: white;
    height: 70%;
    width: 1.5em;
    outline: none;
    border: none;
    border: 1px solid lightgrey;
    border-top-left-radius: 0.2em;
    border-bottom-left-radius: 0.2em;
    border-right: none;
    cursor: pointer;
    margin-left: calc(25% - 4.5em);
    transition: 0.3s all;
}

.search-cancel:hover {
    background-color: #e7e7e7;
}

.mail-container {
    display: flex;
    height: calc(100% - 3em);
    width: 100%;
}

.left-side-menus {
    height: 100%;
    width: 3em;
    background-color: #d5e4ef;
    display: grid;
    grid-template-columns: [col] 100%;
    grid-template-rows: [row] 2em [row] 2em [row] 2em [row] 2em [row] 2em;
    row-gap: 0.5em;
}

.left-side-menus a {
    background: transparent;
    height: max-content;
    border: none;
    outline: none;
    cursor: pointer;
}

.left-side-menus div:nth-child(1),
.left-side-menus div:nth-child(2) {
    padding: 0.8em;
}

.left-side-menus div:nth-child(3) {
    padding: 0.5em;
}

.left-side-menus div:nth-child(4) {
    padding: 0.3em;
}

.left-side-menus div:nth-child(5) {
    padding: 0.6em;
}

.mail-content {
    width: calc(100% - 3em);
    height: 100%;
}

.menu-header {
    height: 5em;
    width: 100%;
    background-color: #c7c7c742;
}

.mail-list.resizing,
.mail-content .folder-drawer.resizing {
    transition: none !important;
}

.mail-content .folder-drawer {
    height: 100%;
    width: 0;
    opacity: 0;
    border: 1px solid lightgrey;
    background-color: white;
    transition: 0.3s all;
    position: relative;
    box-sizing: border-box;
    flex-shrink: 0;
}

.mail-content .folder-drawer>.folding-container {
    width: 100%;
    height: 2em;
    display: flex;
    align-items: center;
    background-color: #a1a1a11e;
    position: relative;
}

.mail-content .folder-drawer>.folding-container+ul {
    list-style-type: none;
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
    height: 0;
    opacity: 0;
    transition: 0.3s all;
}

.mail-content .folder-drawer>.folding-container+ul li {
    height: 2em;
    padding: 0.5em;
    font-weight: 200;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: 0.3s all;
    position: relative;
}

.mail-content .folder-drawer>.folding-container+ul li:has(input[type=radio]:checked) {
    background-color: #ffb6b6;
    color: white;
    border-left: 5px solid rgba(0, 123, 211, 0.505);
}

.mail-content .folder-drawer>.folding-container:nth-child(1):has(> input:checked)+ul {
    margin-bottom: 1em;
}

.mail-content .folder-drawer>.folding-container+ul li:hover {
    background-color: #ffb6b6;
    color: white;
}

.mail-content .folder-drawer>.folding-container+ul li:hover>.folder-menu {
    display: block;
}

.mail-content .folder-drawer>.folding-container+ul li label {
    margin-left: 0.5em;
    cursor: pointer;
}

.mail-content .folder-drawer>.folding-container+ul li:before {
    content: '';
    width: 1em;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    height: 100%;
}

.mail-content .folder-drawer>.folding-container+ul li[data-text=INBOX]:before {
    background-image: url(/inbox-blue.svg);
}

.mail-content .folder-drawer>.folding-container+ul li[data-text=Sent]:before {
    background-image: url(/sent-blue.svg);
}

.mail-content .folder-drawer>.folding-container+ul li[data-text=Drafts]:before {
    background-image: url(/draft-blue.svg);
}

.mail-content .folder-drawer>.folding-container+ul li[data-text=Trash]:before {
    background-image: url(/delete-blue.svg);
}

.mail-content .folder-drawer>.folding-container+ul li[data-text=Junk]:before {
    background-image: url(/junk-email-blue.svg);
}

.mail-content .folder-drawer>.folding-container+ul li[data-text=Notes]:before {
    background-image: url(/notes-blue.svg);
}

.mail-content .folder-drawer>.folding-container+ul li[data-text=Archive]:before {
    background-image: url(/archive-blue.svg);
}

.mail-content .folder-drawer>.folding-container+ul li[data-text=Spam]:before {
    background-image: url(/spam-blue.svg);
}

.mail-content .folder-drawer>.folding-container:before {
    content: '';
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid #808080;
    position: absolute;
    left: 1em;
    transition: 0.3s all;
}

.mail-content .folder-drawer>.folding-container:has(input:checked):before {
    rotate: 90deg;
}

.mail-content .folder-drawer>.folding-container:has(input:checked)+ul {
    height: max-content;
    opacity: 1;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
}

.mail-content .folder-drawer>.folding-container label {
    font-size: 0.9em;
    cursor: pointer;
    position: absolute;
    left: 2em;
}

.mail-content .details-container {
    height: calc(100% - 5em);
    width: 100%;
    background-color: #b8ebf46c;
    display: flex;
    padding: 0.2em;
}

.mail-content .details-container>div:nth-child(3) {
    height: 100%;
    width: 70%;
    margin-left: 0.5%;
    flex-grow: 1;
}

.mail-content .details-container>div:nth-child(3)>div:nth-child(2)>div:nth-child(1) {
    display: flex;
    border-bottom: 0.5px solid lightgrey;
    background-color: white;
    border-top-left-radius: 0.2em;
    border-top-right-radius: 0.2em;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14);
    min-height: 2em;
    max-height: 4em;
}

.mail-content .details-container>div:nth-child(3)>#subject-div {
    height: 2em;
    width: 100%;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14);
    background-color: white;
    border-radius: 0.2em;
    display: flex;
    justify-content: start;
    align-items: center;
    font-weight: bold;
    padding: 0.3em;
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    text-overflow: ellipsis;
}

.mail-content .details-container .mail-list {
    height: 100%;
    width: 30%;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14);
    background-color: white;
    border-radius: 0.2em;
    position: relative;
    flex-shrink: 0;
}

.mail-content .details-container .mail-list::after,
.mail-content .folder-drawer::after {
    content: "";
    position: absolute;
    top: 0;
    right: -1px;
    bottom: 0;
    width: 2px;
    cursor: ew-resize;
    background-color: transparent;
    border-top-right-radius: 0.2em;
    border-bottom-right-radius: 0.2em;
    transition: background 0.2s;
}

.mail-content .details-container .mail-list:hover::after,
.mail-content .folder-drawer:hover::after {
    background-color: #0076d7;
}

.mail-content .details-container .mail-list:active::after,
.mail-content .folder-drawer:active::after {
    background-color: #0078d7;
    width: 4px;
}

.mail-content .details-container .mail-list .mail-options {
    height: 2em;
    width: 100%;
    border-bottom: 1px solid lightgrey;
    border-radius: 0.2em;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    display: flex;
    justify-content: end;
    align-items: center;
    padding: 0.5em;
}

.mail-content .details-container .mail-list .mail-list-container {
    width: 100%;
    height: calc(100% - 2em);
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul {
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
    width: 100%;
    height: calc(100% - 1em);
    overflow-y: auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20% 20%;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>span {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #808080;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul.full_length {
    height: 100%;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul+div {
    display: flex;
    justify-content: center;
    height: 1em;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul+div>button.see_more {
    background: transparent;
    border: none;
    outline: none;
    font-size: 0.8em;
    color: rgba(4, 134, 255, 0.546);
    cursor: pointer;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul+div>button.see_more:hover {
    text-decoration: underline;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul+div.remove {
    display: none;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul+div.loading,
.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul.loading {
    background-image: url(/loading.svg);
    background-position: center;
    background-repeat: no-repeat;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li {
    height: 5em;
    width: 100%;
    border-bottom: 0.5px solid lightgrey;
    transition: background-color 0.5s;
    position: relative;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li.delete {
    animation-name: delete-list-item;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes delete-list-item {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    25% {
        transform: translateX(-25%);
        opacity: 0.75;
    }

    50% {
        transform: translateX(-50%);
        opacity: 0.5;
    }

    75% {
        transform: translateX(-75%);
        opacity: 0.25;
    }

    100% {
        transform: translateX(-100%);
        opacity: 0;
    }
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li:hover {
    background-color: #e8e8e8;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li:hover>.list-item-container>div>.pic-div {
    display: none;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li:hover>.list-item-container>div>.checkbox-div {
    display: flex;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container {
    height: 100%;
    flex-grow: 1;
    margin-left: 0.2em;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div>div.pic-div,
.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div>div.checkbox-div {
    height: 100%;
    width: 100%;
    cursor: pointer;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div>div.checkbox-div {
    padding: 0.5em;
    display: none;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div>input:checked+div.checkbox-div {
    display: flex;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div>div.pic-div:has(+ input:checked) {
    display: none;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div>input+div.checkbox-div>svg>g>path {
    display: none;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div>input:checked+div.checkbox-div>svg>g>path {
    display: block;
}

@keyframes rotate-div-90deg {
    from {
        display: flex;
        transform: rotateY(0deg);
    }

    to {
        display: none;
        transform: rotateY(90deg);
    }
}

@keyframes rotate-div-0deg {
    from {
        transform: rotateY(-90deg);
        display: none;
    }

    to {
        transform: rotateY(0deg);
        display: flex;
    }
}

.pic-div {
    border-radius: 50%;
    background-color: #808080a7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container {
    height: 100%;
    width: 100%;
    padding: 0.2em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>header {
    width: 100%;
    height: 35%;
    display: flex;
    position: relative;
    padding: 0.1em;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>div {
    width: 100%;
    height: 65%;
    position: relative;
    padding: 0.1em;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>header>span,
.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>div>div.mail-item-subject-div>span.subject-name-span,
.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>div>div.mail-item-body-div>span.body-span,
.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>header>strong:has(span),
.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>div>div.mail-item-subject-div>strong:has(span.subject-name-span) {
    position: absolute;
    font-size: 1em;
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: calc(100% - 8em);
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>div>div.mail-item-body-div>span.body-span {
    color: #808080;
    font-family: "monospace";
    width: 100%;
    max-width: 95%;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>div>div.mail-item-subject-div>span.subject-name-span,
.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>div>div.mail-item-subject-div>strong:has(span.subject-name-span) {
    max-width: calc(100% - 6.5em);
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>header:has(.attachments-button)>strong:has(span) {
    max-width: calc(100% - 4.5em);
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>div>div.mail-item-subject-div>span,
.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>div>div.mail-item-subject-div>strong:has(span) {
    color: #13779e;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>div>div.mail-item-subject-div>span.date-span,
.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>div>div.mail-item-subject-div>strong:has(span.date-span) {
    font-size: 0.5em;
    position: absolute;
    right: 0;
}

span.bold {
    font-weight: bold;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options {
    position: absolute;
    right: 0;
    height: 100%;
    width: max-content;
    display: none;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>button {
    border: none;
    outline: none;
    background-color: transparent;
    height: 1.5em;
    width: 2em;
    padding-block: 0;
    padding-inline: 0;
    cursor: pointer;
    display: flex;
}

.mail-content .details-container .mail-list .mail-options div {
    width: 1.8em;
    height: max-content;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0.3em;
}

.mail-content .details-container .mail-list .mail-options div:nth-child(3),
.mail-content .details-container .mail-list .mail-options div:nth-child(4) {
    margin-left: 1em;
}

.mail-content .details-container .mail-list .mail-options div:nth-child(3):hover,
.mail-content .details-container .mail-list .mail-options div:nth-child(4):hover {
    background-color: #efefef;
    border-radius: 0.2em;
}

.mail-content .details-container .mail-list .mail-options div:nth-child(4)>input:checked+svg {
    display: block;
}

.mail-content .details-container .mail-list .mail-options div:nth-child(4)>input:not(:checked)+svg {
    display: none;
}

.mail-content .details-container .mail-list .mail-options div:nth-child(4)>input+svg+svg {
    display: none;
}

.mail-content .details-container .mail-list .mail-options div:nth-child(4)>input:not(:checked)+svg+svg {
    display: block;
}

.mail-content .details-container .mail-list .mail-options div:nth-child(2) svg g path {
    display: none;
}

.mail-content .details-container .mail-list .mail-options:has(> input:checked) div:nth-child(2) svg g path {
    display: block;
}

.mail-content .details-container .mail-list .mail-options div:nth-child(5) {
    width: 5em;
    justify-content: center;
    border-radius: 0.2em;
}

.mail-content .details-container .mail-list .mail-options div:nth-child(5):hover {
    background-color: #efefef;
    border: 0.5px solid #d4d4d4;
}

.mail-content .details-container .mail-list .mail-options div:nth-child(5) span {
    font-size: 0.8em;
}

.mail-content .details-container .mail-detailed-view {
    flex: 1 1 auto;
    width: 100%;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14);
    background-color: white;
    border-bottom-left-radius: 0.2em;
    border-bottom-right-radius: 0.2em;
    font-family: "Roboto", monospace;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    color: #808080;
    padding: 0.5em;
    position: relative;
}

.mail-content .details-container .mail-detailed-view .iframe-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mail-content .details-container .mail-detailed-view>div:nth-child(1) {
    float: right;
    position: absolute;
    width: max-content;
    height: 2em;
    max-height: 0;
    top: 0;
    right: 1em;
    z-index: 10000;
    background: white;
    transition: all 0.3s;
    border-radius: 0.2em;
    display: flex;
}

.mail-content .details-container .mail-detailed-view>div:nth-child(1)>* {
    transition: 0.3s all;
}

.mail-content .details-container .mail-detailed-view>div>div.move-to {
    width: max-content;
    border-radius: 0.2em;
    margin-left: 1em;
    transition: all 0.3s;
    display: none;
    cursor: pointer;
    position: relative;
}

.mail-content .details-container .mail-detailed-view>div>div.move-to>button {
    border-radius: 0.2em;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border: none;
    outline: none;
    height: 100%;
    cursor: pointer;
    background: transparent;
    width: 2em;
    padding: 0;
}

.mail-content .details-container .mail-detailed-view>div>div.move-to>div {
    border-radius: 0.2em;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.mail-content .details-container .mail-detailed-view>div>button.forward-button {
    margin-left: 0;
    border: none;
    outline: none;
    height: 100%;
    cursor: pointer;
    background: transparent;
    width: 2em;
    padding: 0;
    border-radius: 0.2em;
}

/* .mail-content .details-container .mail-detailed-view > div > div.forward-button > button:nth-child(1) {
    width: 2em;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.mail-content .details-container .mail-detailed-view > div > div.forward-button > button:nth-child(2) {
    border-radius: 0.2em;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.mail-content .details-container .mail-detailed-view > div > div.forward-button > button:nth-child(2) {
    width: 1em;
} */

.day-button {
    padding: 8px 10px;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    cursor: pointer;
    border-radius: 4px;
    margin-right: 5px;
}

.day-button.selected {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

.mail-content .details-container .mail-detailed-view>div>.delete-button {
    border: none;
    outline: none;
    height: 100%;
    cursor: pointer;
    background: transparent;
    width: 2em;
    padding: 0;
    border-radius: 0.2em;
}

.mail-content .details-container .mail-detailed-view>div>button.forward-button {
    width: max-content;
    margin-left: 1em;
    border-radius: 0.2em;
}

.mail-content .details-container .mail-detailed-view>div>.delete-button,
.mail-content .details-container .mail-detailed-view>div>.archive-button,
.mail-content .details-container .mail-detailed-view>div>.report-spam-button,
.mail-content .details-container .mail-detailed-view>div>.move-to,
.mail-content .details-container .mail-detailed-view>div>.move-to+div,
.mail-content .details-container .mail-detailed-view>div>.reply-button,
.mail-content .details-container .mail-detailed-view>div>.reply-with-meeting-button,
.mail-content .details-container .mail-detailed-view>div>.reply-all-button,
.mail-content .details-container .mail-detailed-view>div>.forward-button {
    display: none;
}

.mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered]):hover>div>.delete-button,
.mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered]):hover>div>.archive-button,
.mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered]):hover>div>.report-spam-button,
.mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered]):hover>div>.move-to+div,
.mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered]):hover>div>.reply-button,
.mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered]):hover>div>.reply-with-meeting-button,
.mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered]):hover>div>.reply-all-button,
.mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered]):hover>div>.forward-button {
    display: inherit;
}

.mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered]):hover>div>.move-to {
    display: flex;
}

.mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered]):hover>div:nth-child(1) {
    max-height: 2em;
    box-shadow: 2px 2px #808080;
    border: 0.5px solid lightgrey;
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-top: 0.1em;
    padding-bottom: 0.1em;
}

.mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered]):hover>div:nth-child(1)>button:hover,
.mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered]):hover>div:nth-child(1)>div:hover {
    background-color: #cacaca;
    border: 0.5px solid #808080;
}

.mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered]):hover>div:nth-child(1) button:hover>svg g path,
.mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered]):hover>div:nth-child(1) div:hover>svg g path,
.mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered]):hover>div:nth-child(1)>button:hover>svg>g>polygon,
.mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered]):hover>div:nth-child(1)>button:hover>svg>g>line {
    stroke-width: 1.5;
}

.mail-content .details-container .mail-detailed-view>div>div.move-to>div {
    width: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mail-content .details-container .receipent-details {
    width: calc(100% - 2.5em);
    display: flex;
    flex-flow: column;
}

.mail-content .details-container .from-pic {
    width: 2.5em;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.2em;
}

.mail-content .details-container .from-pic .pic-div {
    width: 1.9em;
    height: 1.9em;
}

.mail-content .details-container .receipent-details>div {
    width: 100%;
    min-height: 0.5em;
    font-family: 'Courier New', Courier, monospace;
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 0.5em;
    font-size: 0.8em;
    user-select: text;
}

.mail-content .details-container .receipent-details>div.from-div::before {
    content: 'From: ';
}

.mail-content .details-container .receipent-details>div.to-div::before {
    content: 'To: ';
}

.mail-content .details-container .receipent-details>div.cc-div::before {
    content: 'Cc: ';
}

.mail-content .details-container .receipent-details>div.bcc-div::before {
    content: 'Bcc: ';
}

.mail-content .details-container .mail-detailed-view iframe {
    width: 100%;
    max-height: 100%;
    min-height: 100%;
    outline: none;
    border: none;
}

.menu-header>div {
    height: 50%;
    width: 100%;
    display: flex;
    position: relative;
}

.menu-header>div:nth-child(1) {
    height: 40%;
}

.menu-header>div:nth-child(2) {
    height: 60%;
    padding: 0.1em;
    padding-left: 0.3em;
    padding-right: 0.3em;
    justify-content: center;
    display: flex;
}

.menu-header>div:nth-child(2)>div {
    width: calc(100% - 0.4em);
    height: calc(100% - 0.4em);
    background-color: white;
    border-radius: 0.2em;
    box-shadow: 3px 3px lightblue;
    padding: 0.2em;
}

.menu-header>div:nth-child(2)>div>div.home-menu,
.menu-header>div:nth-child(2)>div>div.view-menu {
    display: flex;
    width: 100%;
    height: 100%;
    border-radius: 0.2em;
}

.menu-header:has(#home-menu-button:not(:checked)) .home-menu {
    display: none;
}

.menu-header:has(#view-menu-button:not(:checked)) .view-menu {
    display: none;
}

.menu-header svg,
.menu-header svg g path {
    transition: 0.3s all;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.create-new-button {
    width: 10em;
    border-radius: 0.3em;
    position: relative;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.create-new-button>div {
    width: 100%;
    border-radius: 0.3em;
    display: flex;
    align-items: center;
    height: 100%;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.create-new-button>ul,
.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>ul,
.mail-content .details-container .mail-detailed-view>div>div.move-to>ul {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    width: 10em;
    max-height: 0;
    display: none;
    position: absolute;
    top: 105%;
    margin-block-start: 0;
    margin-block-end: 0;
    padding-block-start: 0;
    padding-block-end: 0;
    padding-inline-start: 0;
    padding-inline-end: 0;
    background-color: white;
    border: none;
    z-index: 1000;
    transition: 0.3s all;
}

.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>ul {
    border-radius: 0.2em;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.create-new-button>ul.show,
.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>ul.show,
.menu-header>div:nth-child(2)>div>div.home-menu>div.category-button>ul.show,
.mail-content .details-container .mail-detailed-view>div>div.move-to>ul.show {
    display: block;
    max-height: 15em;
    border-bottom-left-radius: 0.2em;
    border-bottom-right-radius: 0.2em;
    padding-block-start: 0.5em;
    padding-block-end: 0.5em;
    padding-inline-start: 10px;
    padding-inline-end: 10px;
    border: 0.5px solid #808080;
    overflow-y: auto;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.create-new-button>ul li,
.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>ul>li,
.mail-content .details-container .mail-detailed-view>div>div.move-to>ul>li {
    height: 1.5em;
    padding: 0.2em;
    font-family: math;
    display: flex;
    cursor: pointer;
}

.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>ul>li[disabled],
.mail-content .details-container .mail-detailed-view>div>div.move-to>ul>li[disabled] {
    cursor: not-allowed;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.create-new-button>ul li:hover,
.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>ul>li:not([disabled]):hover,
.mail-content .details-container .mail-detailed-view>div>div.move-to>ul>li:not([disabled]):hover {
    background-color: #0000001a;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.create-new-button>ul li:before,
.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>ul>li:not(:last-child):before,
.mail-content .details-container .mail-detailed-view>div>div.move-to>ul>li:not(:last-child):before {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1em 1em;
    content: '';
    display: block;
    height: 1em;
    width: 1em;
    margin-right: 1em;
    cursor: default;
    background-color: transparent;
}

.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>ul>li:last-child>form,
.mail-content .details-container .mail-detailed-view>div>div.move-to>ul>li:last-child>form {
    width: 100%;
}

.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>ul>li:last-child>form>input,
.mail-content .details-container .mail-detailed-view>div>div.move-to>ul>li:last-child>form>input {
    border: none;
    background: transparent;
    outline: none;
    max-width: calc(100% - 2em);
}

.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>ul>li:last-child>form>button,
.mail-content .details-container .mail-detailed-view>div>div.move-to>ul>li:last-child>form>button {
    border: none;
    background: transparent;
    outline: none;
    max-width: 1.5em;
    font-size: 0.6em;
    color: rgba(5, 121, 255, 0.87);
    cursor: pointer;
}

.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>ul>li:last-child>form>button:hover,
.mail-content .details-container .mail-detailed-view>div>div.move-to>ul>li:last-child>form>button:hover {
    text-decoration: underline;
    font-weight: bold;
}

.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>ul>li[data-text=INBOX]:before,
.mail-content .details-container .mail-detailed-view>div>div.move-to>ul>li[data-text=INBOX]:before {
    background-image: url(/inbox-blue.svg);
}

.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>ul>li[data-text=Sent]:before,
.mail-content .details-container .mail-detailed-view>div>div.move-to>ul>li[data-text=Sent]:before {
    background-image: url(/sent-blue.svg);
}

.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>ul>li[data-text=Drafts]:before,
.mail-content .details-container .mail-detailed-view>div>div.move-to>ul>li[data-text=Drafts]:before {
    background-image: url(/draft-blue.svg);
}

.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>ul>li[data-text=Trash]:before,
.mail-content .details-container .mail-detailed-view>div>div.move-to>ul>li[data-text=Trash]:before {
    background-image: url(/delete-blue.svg);
}

.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>ul>li[data-text=Junk]:before,
.mail-content .details-container .mail-detailed-view>div>div.move-to>ul>li[data-text=Junk]:before {
    background-image: url(/junk-email-blue.svg);
}

.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>ul>li[data-text=Notes]:before,
.mail-content .details-container .mail-detailed-view>div>div.move-to>ul>li[data-text=Notes]:before {
    background-image: url(/notes-blue.svg);
}

.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>ul>li[data-text=Archive]:before,
.mail-content .details-container .mail-detailed-view>div>div.move-to>ul>li[data-text=Archive]:before {
    background-image: url(/archive-blue.svg);
}

.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>ul>li[data-text=Spam]:before,
.mail-content .details-container .mail-detailed-view>div>div.move-to>ul>li[data-text=Spam]:before {
    background-image: url(/spam-blue.svg);
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.create-new-button>ul li:first-child:before {
    background-image: url(/email.svg);
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.create-new-button>ul li:nth-child(2):before {
    background-image: url(/event.svg);
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.create-new-button>ul li:nth-child(3):before {
    background-image: url(/task.svg);
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.create-new-button>ul li:nth-child(4):before {
    background-image: url(/group.svg);
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.create-new-button>ul>li:not(:last-child),
.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>ul>li:not(:last-child),
.mail-content .details-container .mail-detailed-view>div>div.move-to>ul>li:not(:last-child) {
    border-bottom: 0.5px solid #808080;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.category-button,
.menu-header>div:nth-child(2)>div>div.home-menu>div.flag-button,
.menu-header>div:nth-child(2)>div>div.home-menu>div.sig-button {
    width: max-content;
    border-radius: 0.3em;
    display: flex;
    align-items: center;
    margin-left: 1em;
    border-radius: 0.2em;
    cursor: pointer;
    position: relative;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.category-button>ul {
    width: 13em;
    max-height: 10em;
    overflow-y: auto;
    position: absolute;
    background-color: white;
    border: 0.5px solid lightgrey;
    border-radius: 0.2em;
    top: 100%;
    z-index: 100000;
    margin-block-start: 1em;
    margin-block-end: 1em;
    padding-inline-start: 10px;
    display: none;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.category-button>ul>li {
    padding: 0.2em;
    display: flex;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.category-button>ul>li>span {
    margin-left: 0.5em;
    display: flex;
    align-items: center;
    transition: all 0.3s;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.category-button>ul>li>span:hover {
    font-weight: bold;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.category-button>ul>li>i {
    width: 1.5em;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.category-button {
    width: 3em;
    padding: 0.3em;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.category-button i:not(:first-child),
.menu-header>div:nth-child(2)>div>div.home-menu>div.flag-button i:not(:first-child),
.menu-header>div:nth-child(2)>div>div.home-menu>div.sig-button i:not(:first-child) {
    width: 1em;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-right-radius: 0.3em;
    border-bottom-right-radius: 0.3em;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.create-new-button>div>button {
    background: transparent;
    background-color: rgba(43, 43, 225, 0.7);
    border: none;
    outline: none;
    height: 100%;
    cursor: pointer;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.create-new-button>div>button:nth-child(1) {
    width: 80%;
    color: white;
    font-size: 1em;
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    border-top-left-radius: 0.3em;
    border-bottom-left-radius: 0.3em;
    border-right: 1px solid white;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.create-new-button>div>button:nth-child(2) {
    width: 20%;
    border-top-right-radius: 0.3em;
    border-bottom-right-radius: 0.3em;

}

.menu-header>div:nth-child(2)>div>div.home-menu>div.create-new-button>div>button:hover {
    background-color: rgba(43, 43, 225, 0.85);
}

.menu-header>div:nth-child(2)>div>div.home-menu>.delete-button,
.menu-header>div:nth-child(2)>div>div.home-menu>.archive-button,
.mail-content .details-container .mail-detailed-view>div>.archive-button,
.menu-header>div:nth-child(2)>div>div.home-menu>.report-spam-button,
.mail-content .details-container .mail-detailed-view>div>.report-spam-button,
.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>button,
.menu-header>div:nth-child(2)>div>div.home-menu>.reply-button,
.mail-content .details-container .mail-detailed-view>div>.reply-button,
.menu-header>div:nth-child(2)>div>div.home-menu>.reply-with-meeting-button,
.mail-content .details-container .mail-detailed-view>div>.reply-with-meeting-button,
.menu-header>div:nth-child(2)>div>div.home-menu>.reply-all-button,
.mail-content .details-container .mail-detailed-view>div>.reply-all-button,
.menu-header>div:nth-child(2)>div>div.home-menu>.forward-button,
.menu-header>div:nth-child(2)>div>div.home-menu>div.read-unread,
.menu-header>div:nth-child(2)>div>div.home-menu>div.flag-button>button,
.menu-header>div:nth-child(2)>div>div.home-menu>div.sig-button>i:first-child,
.menu-header>div:nth-child(2)>div>div.home-menu>.pin-button,
.menu-header>div:nth-child(2)>div>div.home-menu>.print-button,
.menu-header>div:nth-child(2)>div>div.home-menu>.block-button,
.menu-header>div:nth-child(2)>div>div.view-menu>div.settings-button,
.menu-header>div:nth-child(2)>div>div.view-menu>div.zoom-button,
.menu-header>div:nth-child(2)>div>div.view-menu>div.sync-button {
    border: none;
    outline: none;
    height: 100%;
    cursor: pointer;
    background: transparent;
    width: 2em;
    padding: 0;
    margin-left: 1em;
    border-radius: 0.2em;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.sig-button>i:first-child {
    width: 1.2em;
    margin-left: 0;
    display: flex;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.flag-button>button,
.menu-header>div:nth-child(2)>div>div.home-menu>div.sig-button>button {
    margin-left: 0;
    border-top-left-radius: 0.3em;
    border-bottom-left-radius: 0.3em;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.read-unread,
.menu-header>div:nth-child(2)>div>div.view-menu>div.settings-button,
.menu-header>div:nth-child(2)>div>div.view-menu>div.zoom-button,
.menu-header>div:nth-child(2)>div>div.view-menu>div.sync-button {
    width: 10em;
    display: flex;
    align-items: center;
    justify-content: end;
}

.menu-header>div:nth-child(2)>div>div.view-menu>div.zoom-button {
    width: 4em;
}

.menu-header>div:nth-child(2)>div>div.view-menu>div.sync-button {
    width: 4em;
}

.menu-header>div:nth-child(2)>div>div.view-menu>div.settings-button {
    width: 9em;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.read-unread span,
.menu-header>div:nth-child(2)>div>div.view-menu>div.settings-button span,
.menu-header>div:nth-child(2)>div>div.view-menu>div.zoom-button span,
.menu-header>div:nth-child(2)>div>div.view-menu>div.sync-button span {
    width: 80%;
    font-size: 0.9em;
    padding-right: 0.5em;
    text-align: right;
}

.menu-header>div:nth-child(2)>div>div.view-menu>div.settings-button span,
.menu-header>div:nth-child(2)>div>div.view-menu>div.zoom-button span,
.menu-header>div:nth-child(2)>div>div.view-menu>div.sync-button span {
    text-align: left;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.read-unread:before,
.menu-header>div:nth-child(2)>div>div.view-menu>div.settings-button:before,
.menu-header>div:nth-child(2)>div>div.view-menu>div.zoom-button:before,
.menu-header>div:nth-child(2)>div>div.view-menu>div.sync-button:before {
    content: '';
    background-repeat: no-repeat;
    background-position: center;
    width: 15%;
    height: 100%;
    background-size: 70% 70%;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.read-unread:before {
    background-image: url(/mark-as-read-blue.svg);
    background-size: 100%;
}

.menu-header>div:nth-child(2)>div>div.view-menu>div.settings-button:before {
    background-image: url(/settings-blue.svg);
    width: 30%;
}

.menu-header>div:nth-child(2)>div>div.view-menu>div.zoom-button:before {
    background-image: url(/zoom-blue.svg);
    width: 40%;
}

.menu-header>div:nth-child(2)>div>div.view-menu>div.sync-button:before {
    background-image: url(/sync-blue.svg);
    width: 40%;
}

/* .menu-header>div:nth-child(2)>div>div.home-menu>div.forward-button>button:nth-child(1) {
    margin-left: 0;
    border-top-left-radius: 0.3em;
    border-bottom-left-radius: 0.3em;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    width: 2em;
} */

.menu-header>div:nth-child(2)>div>div.home-menu>div.flag-button>button:hover,
.menu-header>div:nth-child(2)>div>div.home-menu>div.flag-button>i:hover,
.menu-header>div:nth-child(2)>div>div.home-menu>div.sig-button>button:hover,
.menu-header>div:nth-child(2)>div>div.home-menu>div.sig-button>i:hover {
    background-color: #ffffff;
}

/* .menu-header>div:nth-child(2)>div>div.home-menu>div.forward-button>button:nth-child(2) {
    width: 1em;
    margin-left: 0;
    border-top-right-radius: 0.3em;
    border-bottom-right-radius: 0.3em;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
} */

.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>button {
    margin-left: 0;
}

.menu-header>div:nth-child(2)>div>div.home-menu>.move-to {
    width: 3em;
    border-radius: 0.2em;
    margin-left: 1em;
    transition: all 0.3s;
    display: flex;
    cursor: pointer;
    position: relative;
}

.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>div {
    width: 1em;
    align-items: center;
    justify-content: center;
    display: flex;
}

.menu-header>div:nth-child(2)>div>div.home-menu button {
    transition: all 0.3s;
}

.menu-header>div:nth-child(2)>div>div.home-menu>button.delete-button:not([disabled]):hover,
.menu-header>div:nth-child(2)>div>div.home-menu>button.archive-button:not([disabled]):hover,
.menu-header>div:nth-child(2)>div>div.home-menu>button.report-spam-button:not([disabled]):hover,
.menu-header>div:nth-child(2)>div>div.home-menu>.move-to:not([disabled]):hover,
.menu-header>div:nth-child(2)>div>div.home-menu>.reply-button:not([disabled]):hover,
.menu-header>div:nth-child(2)>div>div.home-menu>.reply-with-meeting-button:not([disabled]):hover,
.menu-header>div:nth-child(2)>div>div.home-menu>.reply-all-button:not([disabled]):hover,
.menu-header>div:nth-child(2)>div>div.home-menu>button.forward-button:not([disabled]):hover,
.menu-header>div:nth-child(2)>div>div.home-menu>div.read-unread:not([disabled]):hover,
.menu-header>div:nth-child(2)>div>div.home-menu>div.category-button:not([disabled]):hover,
.menu-header>div:nth-child(2)>div>div.home-menu>div.flag-button:not([disabled]):hover,
.menu-header>div:nth-child(2)>div>div.home-menu>div.sig-button:not([disabled]):hover,
.menu-header>div:nth-child(2)>div>div.home-menu>.pin-button:not([disabled]):hover,
.menu-header>div:nth-child(2)>div>div.home-menu>.print-button:not([disabled]):hover,
.menu-header>div:nth-child(2)>div>div.home-menu>.block-button:not([disabled]):hover,
.menu-header>div:nth-child(2)>div>div.view-menu>div.settings-button:not([disabled]):hover,
.menu-header>div:nth-child(2)>div>div.view-menu>div.zoom-button:not([disabled]):hover,
.menu-header>div:nth-child(2)>div>div.view-menu>div.sync-button:not([disabled]):hover {
    background-color: #efefef;
    border: 0.5px solid #d4d4d4;
}

.menu-header>div:nth-child(2)>div>div.home-menu>button.delete-button[disabled],
.menu-header>div:nth-child(2)>div>div.home-menu>button.archive-button[disabled],
.menu-header>div:nth-child(2)>div>div.home-menu>button.report-spam-button[disabled],
.menu-header>div:nth-child(2)>div>div.home-menu>.move-to[disabled],
.menu-header>div:nth-child(2)>div>div.home-menu>.move-to[disabled]>button,
.menu-header>div:nth-child(2)>div>div.home-menu>.move-to[disabled]>div,
.menu-header>div:nth-child(2)>div>div.home-menu>.reply-button[disabled],
.menu-header>div:nth-child(2)>div>div.home-menu>.reply-with-meeting-button[disabled],
.menu-header>div:nth-child(2)>div>div.home-menu>.reply-all-button[disabled],
.menu-header>div:nth-child(2)>div>div.home-menu>button.forward-button[disabled],
.menu-header>div:nth-child(2)>div>div.home-menu>div.read-unread[disabled],
.menu-header>div:nth-child(2)>div>div.home-menu>div.category-button[disabled],
.menu-header>div:nth-child(2)>div>div.home-menu>div.flag-button[disabled],
.menu-header>div:nth-child(2)>div>div.home-menu>div.flag-button[disabled]>button,
.menu-header>div:nth-child(2)>div>div.home-menu>div.sig-button[disabled],
.menu-header>div:nth-child(2)>div>div.home-menu>div.sig-button[disabled]>i,
.menu-header>div:nth-child(2)>div>div.home-menu>.pin-button[disabled],
.menu-header>div:nth-child(2)>div>div.home-menu>.print-button[disabled],
.menu-header>div:nth-child(2)>div>div.home-menu>.block-button[disabled],
.menu-header>div:nth-child(2)>div>div.view-menu>div.settings-button[disabled],
.menu-header>div:nth-child(2)>div>div.view-menu>div.zoom-button[disabled],
.menu-header>div:nth-child(2)>div>div.view-menu>div.sync-button[disabled] {
    cursor: not-allowed;
}

.menu-header>div:nth-child(2)>div>div.home-menu>.delete-button:hover svg>g>path,
.menu-header>div:nth-child(2)>div>div.home-menu>.archive-button:hover svg>g>path,
.menu-header>div:nth-child(2)>div>div.home-menu>.report-spam-button:hover svg>g>path,
.menu-header>div:nth-child(2)>div>div.home-menu>.report-spam-button:hover svg>g>polygon,
.menu-header>div:nth-child(2)>div>div.home-menu>.move-to:hover button svg>g>path,
.menu-header>div:nth-child(2)>div>div.home-menu>.forward-button:hover svg g>path,
.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>.mark-as-read:hover svg g>path,
.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>.delete-mail:hover svg g>path,
.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>.flag-email:hover svg g>path,
.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>.pin-email:hover svg g>path,
.menu-header>div:nth-child(2)>div>div.home-menu>div.category-button:hover>svg,
.menu-header>div:nth-child(2)>div>div.home-menu>div.flag-button:hover svg,
.menu-header>div:nth-child(2)>div>div.home-menu>div.sig-button:hover svg,
.menu-header>div:nth-child(2)>div>div.home-menu>button.pin-button:hover svg {
    stroke-width: 1.5;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>.mark-as-read:hover svg g {
    stroke: #5b74ca;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>.mark-as-unread:hover svg g {
    fill: #5b74ca;
    stroke: #5b74ca;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>.mark-as-unread:hover svg g>path {
    stroke-width: 10;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>.attachments-button {
    padding: 0.2em;
    cursor: default;
}

.menu-header>div:nth-child(2)>div>div.home-menu>button.print-button:hover svg path,
.menu-header>div:nth-child(2)>div>div.home-menu>button.print-button:hover svg rect,
.menu-header>div:nth-child(2)>div>div.home-menu>button.print-button:hover svg polyline {
    stroke-width: 2.5;
}

.menu-header>div:nth-child(2)>div>div.home-menu>button.reply-with-meeting-button:hover svg {
    stroke-width: 5;
}

.menu-header>div:nth-child(2)>div>div.home-menu>button.print-button:hover svg circle {
    r: 1.25;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.category-button:hover>i>svg,
.menu-header>div:nth-child(2)>div>div.home-menu>div.flag-button:hover i>svg {
    stroke-width: 50;
}

.menu-header>div:nth-child(2)>div>div.home-menu>.reply-button:hover svg>g>path,
.menu-header>div:nth-child(2)>div>div.home-menu>.reply-all-button:hover svg>g>path {
    stroke-width: 2;
}

.menu-header>div:nth-child(2)>div>div.home-menu>.move-to:hover>div>svg {
    stroke-width: 20;
}

.menu-header>div:nth-child(1)>button,
.menu-header>div:nth-child(1)>label {
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    height: 2.5em;
    width: 2.5em;
    padding: 0;
}

.menu-header>div:nth-child(1)>label.folder-drawer-menu {
    padding: 0.3em;
}

.mail-content>.menu-header:has(> .navigation-div > input:nth-child(1):checked)+.details-container>.folder-drawer {
    width: 15%;
    opacity: 1;
    margin-right: 0.5em;
}

.menu-header>div:nth-child(1)>button:nth-child(4),
.menu-header>div:nth-child(1)>button:nth-child(6) {
    width: 5em;
    transition: all 0.3s;
    position: relative;
}

.menu-header>div:nth-child(1)>button:nth-child(4) label,
.menu-header>div:nth-child(1)>button:nth-child(6) label {
    cursor: pointer;
}

.menu-header>div:nth-child(1)>input:checked+button:nth-child(4):after,
.menu-header>div:nth-child(1)>input:checked+button:nth-child(6):after {
    content: '';
    width: 50%;
    height: 3px;
    background-color: #808080;
    display: block;
    justify-self: center;
    transition: all 0.3s;
    border-radius: 0.2em;
    top: 2em;
    position: absolute;
    left: 25%;
}

.menu-header>div:nth-child(1)>input:checked+button:nth-child(4):hover:after,
.menu-header>div:nth-child(1)>input:checked+button:nth-child(6):hover:after {
    width: 90%;
    left: 5%;
}

.mail-container .folder-drawer ul li .folder-menu {
    right: 0.2em;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/three-dots-white.svg);
    outline: none;
    border: none;
    width: 1em;
    height: 1em;
    position: absolute;
    background-color: transparent;
    cursor: pointer;
    display: none;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li:hover>div.list-item-container>div.mail-item-container>header>.options {
    display: flex;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li:hover>div.list-item-container>div.mail-item-container>header>span {
    max-width: calc(100% - 9em);
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>div>div.mail-item-subject-div,
.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>div>div.mail-item-body-div {
    display: flex;
    width: 100%;
    height: 50%;
    align-items: center;
}

.category-card {
    background: white;
    z-index: 1;
    position: relative;
    padding: 0.2em;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
    border-width: 1px;
}

.category-card:hover:before {
    border-width: 1.5px;
}

.category-card:before {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    content: '';
    border-radius: 0.2em;
    cursor: pointer;
    transition: all 0.2s;
}

.category-card.red {
    color: #b60404;
}

.category-card.red:before {
    background: rgba(255, 0, 0, 0.356);
    border-color: rgba(255, 0, 0, 0.356);
}

.category-card.red:hover:before {
    background: rgba(255, 0, 0, 0.356);
    border-color: rgba(255, 0, 0, 0.555);
}

.category-card.blue {
    color: #0a04b6;
}

.category-card.blue:before {
    background: rgba(0, 0, 255, 0.356);
    border-color: rgba(0, 0, 255, 0.356);
}

.category-card.blue:hover:before {
    background: rgba(0, 0, 255, 0.308);
    border-color: rgba(0, 0, 255, 0.555);
}

.category-card.green {
    color: #04b610;
}

.category-card.green:before {
    background: rgba(0, 255, 0, 0.356);
    border-color: rgba(0, 255, 0, 0.356);
}

.category-card.green:hover:before {
    background: rgba(0, 255, 0, 0.308);
    border-color: rgba(0, 255, 0, 0.555);
}

.category-card.orange {
    color: #FF7F50;
}

.category-card.orange:before {
    background: rgba(255, 127, 80, 0.356);
    border-color: rgba(255, 127, 80, 0.356);
}

.category-card.orange:hover:before {
    background: rgba(255, 127, 80, 0.308);
    border-color: rgba(255, 127, 80, 0.555);
}

.category-card.purple {
    color: #A020F0;
}

.category-card.purple:before {
    background: rgba(160, 32, 250, 0.356);
    border: 1px solid rgba(160, 32, 250, 0.356);
}

.category-card.purple:hover:before {
    background: rgba(160, 32, 250, 0.308);
    border: 2px solid rgba(160, 32, 250, 0.555);
}

.category-card.yellow {
    color: #6d6d00;
}

.category-card.yellow:before {
    background: rgba(255, 255, 0, 0.356);
    border: 1px solid rgba(255, 255, 0, 0.356);
}

.category-card.yellow:hover:before {
    background: rgba(255, 255, 0, 0.308);
    border: 2px solid rgba(255, 255, 0, 0.555);
}

.category-card:not(:first-child) {
    margin-left: 0.3em;
}

#print-choice-modal.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    align-items: center;
    justify-content: center;
}

/* Modal content box */
#print-choice-modal .modal-content,
#print-choice-modal>div {
    background: #fff;
    border-radius: 8px;
    padding: 2em;
    min-width: 300px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
    position: relative;
    animation: modal-fade-in 0.2s;
}

.modal-content {
    background-color: #fff;
    padding: 25px 40px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    width: 70%;
    position: relative;
    animation: fadeIn 0.3s ease-out;
    max-height: 90%;
    overflow-y: auto;
}

/* Close button */
#print-choice-modal #close-print-choice-modal {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 1.5em;
    cursor: pointer;
    color: #888;
    transition: color 0.2s;
}

#print-choice-modal #close-print-choice-modal:hover {
    color: #333;
}

/* Modal heading and text */
#print-choice-modal h2 {
    margin-bottom: 1em;
    font-size: 1.3em;
    color: #6574ba;
}

#print-choice-modal p {
    margin-bottom: 2em;
    color: #444;
}

/* Modal buttons */
#print-choice-modal button {
    padding: 0.7em 1.5em;
    border: none;
    border-radius: 5px;
    background: #6574ba;
    color: #fff;
    font-size: 1em;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 4px rgba(101, 116, 186, 0.08);
}

#print-choice-modal button:hover {
    background: #4956a2;
}

/* Button group */
#print-choice-modal .modal-content>div,
#print-choice-modal>div>div {
    display: flex;
    gap: 1em;
    justify-content: center;
}

/* Fade-in animation */
@keyframes modal-fade-in {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media print {
    body * {
        visibility: hidden;
    }

    .mail-container>.mail-content>.details-container>.mail-list+div,
    .mail-container>.mail-content>.details-container>.mail-list+div * {
        visibility: visible;
    }

    .mail-container>.mail-content>.details-container>.mail-list+div {
        position: absolute;
        left: 0;
        top: 0;
    }
}

#open-new-mail-btn.open-new-mail-trigger {
    padding: 0.6em 1.2em;
    background: #19bebb;
    color: #fff;
    border: none;
    border-radius: 4px;
    font: 600 0.9rem/1 'Inter', sans-serif;
    cursor: pointer;
}

.new-mail-dialog {
    width: min(900px, 92vw);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
    border: 1px solid #ececec;
}

#compose-mail-form {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.rtf-editor-wrapper {
    flex: 1;
    padding: 0 1.2em 0.75em;
    display: flex;
    flex-direction: column;
    min-height: 280px;
}

.btn.secondary {
    background: #e9ecef;
    color: #333;
}

.btn.secondary:hover {
    background: #d8dde1;
}

.btn.primary {
    background: #19bebb;
    color: #fff;
}

.btn.primary:hover {
    background: #118d8b;
}

@media (max-width: 640px) {

    .attachments-row {
        grid-template-columns: 55px 1fr;
    }

    .new-mail-dialog {
        width: 96vw;
    }
}

/* Modal Core */
.spam-modern-modal {
    border: none;
    border-radius: 12px;
    padding: 0;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    animation: modalIn 0.2s ease-out;
    user-select: none;
    height: 90%;
    padding: 1em;
}

.spam-modern-modal::backdrop {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
}

.spam-modern-modal .spam-modal-content {
    overflow-y: auto;
    height: 100%;
}

.spam-modern-modal header h2 {
    margin: 0 0 8px 0;
    font-size: 1.5rem;
    color: #1a1a1b;
    text-align: center;
}

.spam-modern-modal header p {
    font-size: 0.9rem;
    color: #65676b;
    margin-bottom: 24px;
}

/* Scrollable List */
.spam-modern-modal .section-title {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #65676b;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.spam-modern-modal .section-title+p {
    font-size: 0.5rem;
    color: #65676b;
    margin-bottom: 2px;
    font-weight: 500;
}

.spam-modern-modal .section-title+p+hr {
    margin-bottom: 12px;
}

.spam-modern-modal .checkbox-list {
    display: grid;
    gap: 8px;
    max-height: 80%;
    overflow-y: auto;
    margin-bottom: 0.4em;
    padding-right: 4px;
    outline: none;
}

.spam-modern-modal .checkbox-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border: 1px solid #e4e6eb;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.spam-modern-modal .checkbox-card:hover {
    background: #f8f9fa;
}

.spam-modern-modal .checkbox-card input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #e53935;
    margin-top: 2px;
}

.spam-modern-modal .email-addr {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
    font-size: 0.95rem;
}

.spam-modern-modal .meta {
    font-size: 0.7rem;
    color: #65676b;
    line-height: 1.2;
    display: inline-block;
}

/* Footer & Buttons */
.spam-modern-modal .modal-footer {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 8px;
}

.spam-modern-modal .switch-container {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
}

.spam-modern-modal .actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.spam-modern-modal .btn-primary,
.spam-modern-modal .btn-secondary {
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.spam-modern-modal .btn-primary {
    background: #e53935;
    color: white;
}

.spam-modern-modal .btn-primary:hover {
    background: #c62828;
}

.spam-modern-modal .btn-secondary {
    background: #f0f2f5;
    color: #1a1a1b;
}

.spam-modern-modal .btn-secondary:hover {
    background: #e4e6eb;
}

/* Animations */
@keyframes modalIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.container .patient-header {
    height: 10em;
    width: 100%;
    background: transparent;
    border-radius: 0.5em;
    display: flex;
    align-items: center;
    position: relative;
}

.container .patient-body>.patient-details-table,
.container .patient-body>.patient-details-table table {
    width: 100%;
    background-color: white;
    border: 0.5px solid black;
    height: max-content;
}

.container .patient-body>.patient-details-table {
    padding: 1em;
    page-break-inside: auto;
    box-shadow: rgb(40 110 255 / 74%) 3px 3px;
    border: 1px solid #006eff87;
}

.container .patient-body>.patient-details-table>tbody {
    display: inline-table;
    width: calc(100% - 1em);
}

.container .patient-body>.patient-details-table>tbody>tr {
    height: 2em;
}

.container .patient-body>.patient-details-table>tbody .dropdown {
    background-color: white;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
    width: 100%;
    border-radius: 0.2em;
    max-height: 0;
    transition: all 0.3s;
    position: absolute;
    overflow-y: auto;
    z-index: 1000;
}

.container .patient-body>.patient-details-table table {
    border: none;
}

.container .patient-body>.patient-details-table>tbody .dropdown>.dropdown-item {
    width: 100%;
    display: none;
    cursor: pointer;
}

.container .patient-body>.patient-details-table>tbody .dropdown>.dropdown-item:hover {
    text-decoration: underline;
    font-weight: bold;
    background-color: #00000045;
}

.container .patient-body>.patient-details-table>tbody .dropdown.shown {
    max-height: 10em;
}

.container .patient-body>.patient-details-table>tbody .dropdown.shown>.dropdown-item {
    padding: 0.5em;
    display: block;
}

.container .patient-body>.patient-details-table>tbody .dropdown>.dropdown-item:not(:last-child) {
    border-bottom: 0.5px solid lightgrey;
}

.container .patient-body>.patient-details-table input[disabled] {
    cursor: not-allowed;
}

.container .patient-body>.patient-details-table .rating-circle {
    border-radius: 50%;
    width: 2em;
    height: 2em;
    margin-left: 1em;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s all;
}

.container .patient-body>.patient-details-table .rating-circle:first-child {
    background-color: #026602;
}

.container .patient-body>.patient-details-table .rating-circle:nth-child(2) {
    background-color: #009200;
}

.container .patient-body>.patient-details-table .rating-circle:nth-child(3) {
    background-color: #02c702;
}

.container .patient-body>.patient-details-table .rating-circle:nth-child(4) {
    background-color: #86c705;
}

.container .patient-body>.patient-details-table .rating-circle:nth-child(5) {
    background-color: #e1db06;
}

.container .patient-body>.patient-details-table .rating-circle:nth-child(6) {
    background-color: #ffc201;
}

.container .patient-body>.patient-details-table .rating-circle:nth-child(7) {
    background-color: #ff6a00cc;
}

.container .patient-body>.patient-details-table .rating-circle:nth-child(8) {
    background-color: #ff4909cc;
}

.container .patient-body>.patient-details-table .rating-circle:nth-child(9) {
    background-color: #ff3405;
}

.container .patient-body>.patient-details-table .rating-circle:last-child {
    background-color: #ff0000;
}

.container .patient-body>.patient-details-table tr:not([disabled]) .rating-circle {
    cursor: pointer;
}

.container .patient-body>.patient-details-table tr[disabled],
.container .patient-body>.patient-details-table tr[disabled] * {
    cursor: not-allowed;
}

.container .patient-body>.patient-details-table tr[disabled] {
    background-color: #00000025;
}

.container .patient-body>.patient-details-table tr[disabled] td:has(> .rating-circle) {
    padding: 0.5em;
}

.container .patient-body>.patient-details-table tr {
    transition: all 0.3s;
}

.container .patient-body>.patient-details-table input:not([type=radio]),
.container .patient-body>.patient-details-table div[type=placeholder],
.container .patient-body>.patient-details-table textarea[placeholder] {
    border: none;
    outline: none;
    height: 95%;
    align-self: center;
    border-bottom: 0.5px solid lightgrey;
    padding: 0.2em;
}

.container .patient-body>.patient-details-table div[type=placeholder],
.container .patient-body>.patient-details-table input[type=date],
.container .patient-body>.patient-details-table input[type=tel],
.container .patient-body>.patient-details-table input[type=email],
.container .patient-body>.patient-details-table input#addr_line_1,
.container .patient-body>.patient-details-table input#addr_line_2 {
    width: 100%;
}

.container .patient-body>.header-button-container,
.container .patient-body>.footer-button-container {
    padding: 1em;
    margin-top: 1em;
}

.container .patient-header img {
    height: 100%;
}

.container .patient-header .headline {
    height: 100%;
    flex-grow: 1;
    top: 0;
}

.container .patient-header .headline>h1 {
    font-size: 1em;
    width: 90%;
    justify-self: center;
}

.container .patient-header .headline>span {
    justify-self: center;
}

.container .patient-header .contact-details {
    min-width: 15em;
    padding: 0.5em;
    border: 1px solid grey;
    border-radius: 0.5em;
    margin-top: 0.2em;
}

.container .patient-header .contact-details .email,
.container .patient-header .contact-details .phone,
.container .patient-header .contact-details .whatsapp,
.container .patient-header .contact-details .web {
    width: 100%;
    height: 2em;
    display: flex;
    align-items: center;
    width: 100%;
}

.container .patient-header .contact-details .email>i,
.container .patient-header .contact-details .phone>i,
.container .patient-header .contact-details .whatsapp>i,
.container .patient-header .contact-details .web>i {
    content: '';
    height: 1.5em;
    width: 1.5em;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    background-size: 1.5em 1.5em;
    margin-right: 1em;
    display: flex;
    justify-content: center;
}

/* .container .patient-body > .header-button-container > .button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
} */

.container .patient-body>.header-button-container #reset,
.container .patient-body>.header-button-container #edit,
.container .patient-body>.header-button-container #delete {
    float: right;
    background: transparent;
    border: none;
    outline: none;
    top: 50%;
    position: relative;
}

.container .patient-body>.header-button-container #edit,
.container .patient-body>.header-button-container #delete {
    margin-right: 1em;
}

.container .patient-body>.header-button-container #reset:disabled,
.container .patient-body>.header-button-container #edit:disabled,
.container .patient-body>.header-button-container #delete:disabled {
    color: #808080;
}

.container .patient-body>.header-button-container #reset:not([disabled]),
.container .patient-body>.header-button-container #edit:not([disabled]),
.container .patient-body>.header-button-container #delete:not([disabled]) {
    cursor: pointer;
}

.container .patient-body>.header-button-container #reset:not([disabled]):hover,
.container .patient-body>.header-button-container #edit:not([disabled]):hover,
.container .patient-body>.header-button-container #delete:not([disabled]):hover {
    color: blue;
    text-decoration: underline;
}

.container .patient-body>.header-button-container>.button-container>.button.after,
.container .patient-body>.footer-button-container>.button-container>.button.after {
    position: relative;
    z-index: 0;
    border: 1px solid #3247cf;
    border-radius: 8px;
    padding: 8px 16px;
    min-width: 8em;
    background-image: linear-gradient(180deg, #4098ff, #4058ff 62%, #4075ff);
    box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.2), inset 0 -1px 0px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2);
    font-family: "Roobert", sans-serif;
    font-weight: 500;
    text-align: center;
    color: #fff;
    text-shadow: 0 1px rgba(0, 0, 0, 0.2);
    transition-property: border-color, transform;
    transition-duration: 0.2s;
    will-change: transform;
    cursor: pointer;
}

#error-modal-table {
    padding: 1em;
    border-collapse: separate;
}

#error-modal-table tbody {
    overflow-y: auto;
}

body {
    counter-reset: Serial;
}

#error-modal-table tbody tr td:first-child:before {
    counter-increment: Serial;
    content: counter(Serial);
}

#error-modal-table,
#error-modal-table tbody tr,
#error-modal-table tbody tr td,
#error-modal-table tbody tr td span {
    width: 100%;
}

#error-modal-table tbody tr td {
    display: flex;
    justify-content: left;
}

#error-modal-table tbody tr td:before {
    margin-right: 1em;
}

#error-modal-table tbody tr td span {
    color: red;
    text-align: left;
}

.checkups,
.visit,
.reports,
.prescriptions,
.receipts {
    margin-bottom: 2em;
}

/* Container that handles the scrolling */
.table-scroll-container {
    max-height: 15em;
    overflow-y: auto;
    box-shadow: rgb(40 110 255 / 74%) 3px 3px;
    border-radius: 0.2em;
    border: 1px solid #006eff87;
    border-collapse: separate;
    border-spacing: 0;
}

.checkup-list-table,
.visit-list-table,
.report-list-table,
.prescription-list-table,
.receipt-list-table {
    width: 100%;
    background: white;
}

.checkup-list-table>thead,
.visit-list-table>thead,
.report-list-table>thead,
.prescription-list-table>thead,
.receipt-list-table>thead {
    position: sticky;
    top: 0;
    /* Sticks to the top of the parent scrolling container */
    z-index: 1;
    /* Ensures it stays above the body content */
    background: white;
    /* Prevents rows from showing through on scroll */
}

.checkup-list-table>tbody,
.visit-list-table>tbody,
.report-list-table>tbody,
.prescription-list-table>tbody,
.receipt-list-table>tbody {
    min-height: 3em;
    width: 100%;
}

.checkup-list-table>tbody>.empty-row,
.report-list-table>tbody>.empty-row,
.visit-list-table>tbody>.empty-row,
.prescription-list-table>tbody>.empty-row,
.receipt-list-table>tbody>.empty-row {
    width: 100%;
    height: 2em;
}

.checkup-list-table>thead>tr>th,
.visit-list-table>thead>tr>th,
.report-list-table>thead>tr>th,
.prescription-list-table>thead>tr>th,
.receipt-list-table>thead>tr>th {
    border-bottom: 0.5px solid black;
}

.checkup-list-table th,
.checkup-list-table td,
.visit-list-table th,
.visit-list-table td,
.report-list-table th,
.report-list-table td,
.prescription-list-table th,
.prescription-list-table td,
.receipt-list-table th,
.receipt-list-table td {
    padding: 0.2em;
}

.checkup-list-table th:not(:first-child),
.checkup-list-table td:not(:first-child),
.visit-list-table th:not(:first-child),
.visit-list-table td:not(:first-child),
.report-list-table th:not(:first-child),
.report-list-table td:not(:first-child),
.prescription-list-table th:not(:first-child),
.prescription-list-table td:not(:first-child),
.receipt-list-table th:not(:first-child),
.receipt-list-table td:not(:first-child) {
    border-left: 0.5px solid black;
}

.checkup-list-table>tbody,
.visit-list-table>tbody,
.report-list-table>tbody,
.prescription-list-table>tbody,
.receipt-list-table>tbody {
    max-height: 10em;
    overflow-y: auto;
}

.checkup-list-table>tbody>tr:nth-child(even),
.visit-list-table>tbody>tr:nth-child(even),
.report-list-table>tbody>tr:nth-child(even),
.prescription-list-table>tbody>tr:nth-child(even),
.receipt-list-table>tbody>tr:nth-child(even) {
    background-color: #f2f2f2;
}

.checkup-list-table>tbody>tr:not(.empty-row, #loading-row),
.prescription-list-table>tbody>tr:not(.empty-row, #loading-row)>td:has(> .prescription-name-td-action-div)>span,
.receipt-list-table>tbody>tr:not(.empty-row, #loading-row)>td:has(> .receipt-name-td-action-div)>span,
.visit-list-table>tbody>tr:not(.empty-row, #loading-row)>td:nth-child(2)>span {
    cursor: pointer;
}

.report-list-table>tbody>tr:not(.empty-row, #loading-row) a:hover {
    text-decoration: underline;
}

.checkup-list-table>tbody>tr:not(.empty-row, #loading-row):hover,
.prescription-list-table>tbody>tr:not(.empty-row, #loading-row)>td:has(> .prescription-name-td-action-div)>span:hover,
.receipt-list-table>tbody>tr:not(.empty-row, #loading-row)>td:has(> .receipt-name-td-action-div)>span:hover,
.visit-list-table>tbody>tr:not(.empty-row, #loading-row)>td:nth-child(2)>span:hover {
    font-weight: bold;
    text-decoration: underline;
}

.prescription-list-table>tbody>tr:not(.empty-row, #loading-row):has(a.download:not([disabled]):hover),
.prescription-list-table>tbody>tr:not(.empty-row, #loading-row):has(a.send:hover) {
    font-weight: normal;
    text-decoration: none;
}

.patient-id-div {
    min-width: 25em;
    justify-self: center;
    border: 0.5px solid lightgrey;
    padding: 0.5em;
    height: 2em;
    display: flex;
    align-items: center;
    position: relative;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    border-radius: 0.5em;
    justify-content: center;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

@media (hover: hover) {
    .button.after:hover {
        transform: scale(1.04);
        font-weight: bold;
    }
}

.container .patient-body>.header-button-container>.button-container>.button.after:active {
    border-color: #192ba1;
    transform: scale(0.98);
}

.container .patient-body>.header-button-container>.button-container>.button.after::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: 7px;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.2s;
}

.container .patient-body>.header-button-container>.button-container>.button.after::before {
    background-image: linear-gradient(180deg, #40a6ff, #4058ff 62%, #4075ff);
    box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.2), inset 0 -1px 0px rgba(0, 0, 0, 0.2);
}

.container .patient-body>.header-button-container>.button-container>.button.after::after {
    background-image: linear-gradient(180deg, #0a40ce, #4058ff 38%, #40a0ff);
    box-shadow: inset 0 1px 1px #0b1c95;
}

.container .patient-body>.header-button-container>.button-container>.button.after:active::after {
    opacity: 1;
}

.modal {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #000000aa;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.truncate-text {
    /* Required for ellipsis */
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.name-cell-wrap {
    word-break: break-all;
}

#report-upload-modal .report-upload-view,
.new-assessment-modal,
.create-prescription-modal {
    height: 10em;
}

.new-assessment-modal-table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 2em;
}

.equilibrium-test-grade {
    outline: none;
    border: none;
    border-radius: 0.2em;
}

.equilibrium-test-grade:not([disabled]) {
    cursor: pointer;
}

.left-align-table-sub-header {
    float: left;
    text-align: left;
}

.circle-shadow {
    background-color: rgba(0, 0, 0, 0.6);
    stroke: none;
    position: absolute;
    z-index: 10000;
    border-radius: 50%;
    display: block;
    width: 0.5em;
    height: 0.5em;
}

.long-arrow {
    margin-left: 1em;
    margin-right: 1em;
    display: block;
    width: 10px;
    height: 10px;
    border-top: 2px solid #000;
    border-left: 2px solid #000;
    transform: rotate(45deg);

}

.long-arrow:after {
    content: "";
    display: block;
    width: 2px;
    height: 20px;
    background-color: black;
    transform: rotate(-45deg) translate(6px, 2px);
}

.human-figure {
    height: 100%;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100%;
    position: relative;
}

.human-figure[face=front-face] {
    background-image: url(/male-front-face-color.png);
}

.human-figure[face=back-face] {
    background-image: url(/male-back-face-color.png);
}

.human-figure[face=left-face] {
    background-image: url(/male-left-face-color.png);
}

.human-figure[face=right-face] {
    background-image: url(/male-right-face-color.png);
}

.human-figure[face=skeletal-front-face] {
    background-image: url(/skeletal-front-face.png);
}

.human-figure[face=skeletal-back-face] {
    background-image: url(/skeletal-back-face.png);
}

.equilibrium-test-grade:not([disabled]):hover {
    background-color: #00000025;
}

.new-assessment-modal-table .comments {
    width: 90%;
    border: none;
    border-bottom: 1px solid lightgrey;
    outline: none;
    resize: none;
}

.new-assessment-modal-body {
    padding: 1em;
    overflow-y: auto;
    height: calc(100% - 6em);
}

.new-assessment-modal-table th.top-cell {
    border-top: 1px solid black;
}

.new-assessment-modal-table th.black-border-header-cell {
    border-bottom: 1px solid black;
}

.new-assessment-modal-table td.left-cell,
.new-assessment-modal-table th.left-cell {
    border-left: 1px solid black;
}

.new-assessment-modal-table td.right-cell,
.new-assessment-modal-table th.right-cell {
    border-right: 1px solid black;
}

.new-assessment-modal-table td.bottom-cell,
.new-assessment-modal-table th.bottom-cell {
    border-bottom: 1px solid black;
}

.new-assessment-modal-table td.top-cell,
.new-assessment-modal-table th.top-cell {
    border-top: 1px solid black;
}

.new-assessment-modal-table th.non-right-border,
.new-assessment-modal-table td.non-right-border {
    border-right: none;
}

.new-assessment-modal-table th.non-left-border,
.new-assessment-modal-table td.non-left-border {
    border-left: none;
}

.new-assessment-modal-table th.non-top-border,
.new-assessment-modal-table td.non-top-border {
    border-top: none;
}

.new-assessment-modal-table th.non-bottom-border,
.new-assessment-modal-table td.non-bottom-border {
    border-bottom: none;
}

#range-of-motion input[type=number],
#range-of-motion input.comments[type=text] {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.new-assessment-modal-body .assessment-type-dropdown {
    width: 80%;
    height: 2em;
    border: 0.5px solid lightgrey;
    justify-self: center;
    border-radius: 0.2em;
    position: relative;
    display: flex;
}

.new-assessment-modal-body .assessment-type-dropdown:not([disabled]) {
    transition: all 0.2s;
    cursor: pointer;
}

.new-assessment-modal-body .assessment-type-dropdown[disabled] {
    cursor: not-allowed;
}

.new-assessment-modal-body .assessment-type-dropdown:not([disabled]):after {
    content: '';
    border-left: 0.5px solid lightgrey;
    right: 10%;
    position: absolute;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid grey;
    top: calc(50% - 5px);
    right: 0.5em;
    transition: all 0.1s;
}

.new-assessment-modal-body .assessment-type-dropdown:hover:after,
.new-assessment-modal-body .assessment-type-dropdown:has(> input[type=checkbox]:checked):after {
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid rgb(75, 75, 75);
    top: calc(50% - 7px);
}

.new-assessment-modal-body .assessment-type-dropdown:has(> input[type=checkbox]:checked):after {
    rotate: 90deg;
}

.new-assessment-modal-body .assessment-type-dropdown:not([disabled]):hover,
.new-assessment-modal-body .assessment-type-dropdown:not([disabled]):has(> input[type=checkbox]:checked) {
    box-shadow: 3px 3px 3px lightgrey;
}

.new-assessment-modal-body>div>footer {
    cursor: pointer;
    padding-left: 1em;
    padding-right: 1em;
    width: max-content;
    height: 2em;
    border-radius: 0.2em;
    display: flex;
    align-items: center;
    transition: all 0.2s;
    position: relative;
}

.new-assessment-modal-body>div>footer:not([disabled]) {
    border: 0.5px solid #006eff;
}

.new-assessment-modal-body>div>footer[disabled] {
    border: 0.5px solid #808080;
    cursor: not-allowed;
}

.new-assessment-modal-body>div>footer:not([disabled]):after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #006eff;
    top: calc(50% - 5px);
    right: 0.5em;
    transition: all 0.1s;
    rotate: 90deg;
}

.new-assessment-modal-body>div>footer>span {
    margin-left: 0.5em;
    transition: all 0.2s;
    margin-right: 1em;
    font-weight: bold;
}

.new-assessment-modal-body>div>footer:not([disabled])>span {
    color: #006eff;
}

.new-assessment-modal-body>div>footer[disabled]>span {
    color: #808080;
}

.new-assessment-modal-body>div>footer:not([disabled])>i>svg,
.new-assessment-modal-body>div>footer:not([disabled])>i>svg line {
    fill: #006eff;
    stroke: #006eff;
}

.new-assessment-modal-body>div>footer[disabled]>i>svg,
.new-assessment-modal-body>div>footer[disabled]>i>svg line {
    fill: #808080;
    stroke: #808080;
}

.new-assessment-modal-body>div>footer:not([disabled]):hover>span {
    text-decoration: underline;
}

.new-assessment-modal-body>div>footer:not([disabled]):hover>i>svg {
    transition: all 0.2s;
}

.new-assessment-modal-body>div>footer:not([disabled]):hover>i>svg line {
    stroke-width: 3;
}

.new-assessment-modal-body>div>footer:not([disabled]):hover {
    box-shadow: 3px 3px 3px #006eff73;
}

.new-assessment-modal-body .assessment-type-dropdown .assessment-type-dropdown-items,
.new-assessment-modal-body #new-assessment-body+footer .assessment-type-dropdown-items {
    max-height: 0;
    height: 0;
    border-radius: 0.2em;
    background-color: white;
    top: 100%;
    position: absolute;
    width: 100%;
    box-shadow: 3px 3px 3px lightgrey;
    transition: all 0.2s;
    margin-top: 0.3em;
    overflow-y: auto;
}

.new-assessment-modal-body .assessment-type-dropdown .assessment-type-dropdown-items .item,
.new-assessment-modal-body #new-assessment-body+footer .assessment-type-dropdown-items .item {
    position: relative;
    height: 2em;
    display: none;
    justify-content: left;
    align-items: center;
    background-color: white;
    transition: background-color 0.2s ease;
}

.new-assessment-modal-body .assessment-type-dropdown .assessment-type-dropdown-items .item:hover {
    background-color: #80808041;
}

.new-assessment-modal-body #new-assessment-body+footer .assessment-type-dropdown-items .item:hover {
    background-color: #006eff41;
}

.new-assessment-modal-body .assessment-type-dropdown .assessment-type-dropdown-items .item span,
.new-assessment-modal-body #new-assessment-body+footer .assessment-type-dropdown-items .item span {
    margin-left: 10%;
}

.new-assessment-modal-body .assessment-type-dropdown .assessment-type-dropdown-items .item:has(> input[type=radio]:checked) span {
    margin-left: 0;
}

.new-assessment-modal-body .assessment-type-dropdown .assessment-type-dropdown-items .item:has(> input[type=radio]:checked):before {
    content: '';
    width: 10%;
    background-image: url(/green-tick.svg);
    background-position: center;
    background-repeat: no-repeat;
    height: 100%;
    background-size: 50%;
}

.new-assessment-modal-body .assessment-type-dropdown:has(> input[type=checkbox]:checked) .item,
.new-assessment-modal-body #new-assessment-body+footer:has(> input[type=checkbox]:checked) .assessment-type-dropdown-items .item {
    display: flex;
}

.new-assessment-modal-body .assessment-type-dropdown .assessment-type-dropdown-items .item:not(:last-child) {
    border-bottom: 0.5px solid lightgrey;
}

.new-assessment-modal-body .assessment-type-dropdown:has(> input[type=checkbox]:checked) .assessment-type-dropdown-items {
    max-height: 6em;
    height: 6em;
    border: 0.5px solid grey;
}

.new-assessment-modal-body #new-assessment-body+footer:has(> input[type=checkbox]:checked) .assessment-type-dropdown-items {
    max-height: 6em;
    height: 6em;
    border: 0.5px solid #006eff;
}

h2.section-header {
    text-decoration: underline;
    margin-bottom: 1em;
    text-align: left;
    font-weight: bold;
}

h2.section-header:hover>button {
    display: inline;
}

h2.section-header>button {
    margin-left: 1em;
    outline: none;
    background: none;
    border: none;
    background-image: url(/delete-blue.svg);
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    height: 100%;
    width: 3em;
    display: none;
}

div[of=checkup-tables]+hr {
    margin-bottom: 1em;
}

.new-assessment-modal-table th,
.new-assessment-modal-table td {
    border: 1px solid lightgrey;
    padding: 0.2em;
}

.modal .patient-search-view,
.modal .error-view,
.modal .report-upload-view,
.new-assessment-modal-view,
.prescription-body-view,
.receipt-modal-content,
.patient-visit-modal-content {
    background: white;
    box-shadow: 2px 4px 6px rgba(49, 49, 49, 0.8);
    width: 70%;
    height: 70%;
    border-radius: 0.5em;
    position: relative;
    z-index: 1000;
    padding: 0.5em;
}

.patient-visit-modal-content+.modal>.patient-visit-modal-warning-content {
    background-color: #fefefe;
    padding: 1em;
    border: 1px solid #888;
    border-radius: 8px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
    position: relative;
}

.patient-visit-modal-content+.modal>.patient-visit-modal-warning-content .modal-actions {
    justify-content: center;
    gap: 15px;
    padding-top: 0.5em;
    border-top: 1px solid lightgrey;
}

.patient-visit-modal-content+.modal>.patient-visit-modal-warning-content h2 {
    color: #dc3545;
    /* Red for warning */
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.8em;
}

.patient-visit-modal-content+.modal>.patient-visit-modal-warning-content .btn {
    padding: 5px 25px;
    font-size: 1em;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    min-width: 80px;
}

.patient-visit-modal-content+.modal>.patient-visit-modal-warning-content .btn-yes {
    background-color: #28a745;
    color: white;
}

.patient-visit-modal-content+.modal>.patient-visit-modal-warning-content .btn-yes:hover {
    background-color: #218838;
}

.patient-visit-modal-content+.modal>.patient-visit-modal-warning-content .btn-no {
    background-color: #6c757d;
    color: white;
}

.patient-visit-modal-content+.modal>.patient-visit-modal-warning-content .btn-ok {
    background-color: #0052a982;
    color: white;
}

.patient-visit-modal-content+.modal>.patient-visit-modal-warning-content .btn-set-credit {
    background-color: #4901bdec;
    color: white;
    margin-top: 0.5em;
    width: 100%;
}

.patient-visit-modal-content+.modal>.patient-visit-modal-warning-content .btn-ok:hover {
    background-color: #0052a9;
}

.patient-visit-modal-content+.modal>.patient-visit-modal-warning-content .btn-no:hover {
    background-color: #5a6268;
}

.patient-visit-modal-content+.modal>.patient-visit-modal-warning-content .btn-set-credit:hover {
    background-color: #2f007aec;
    color: white;
}

.prescription-body-view {
    height: 90%;
    width: 90%;
}

.new-assessment-modal-view {
    width: 95%;
    height: 95%;
}

.modal .patient-search-view>header,
.modal .error-view>header,
.modal .report-upload-view>header,
.modal .error-view>header,
.modal .new-assessment-modal-view>header {
    height: 3em;
    width: 100%;
    border-bottom: 0.5px solid grey;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal .new-assessment-modal-view>header {
    position: relative;
}

.modal .new-assessment-modal-view>header>button[type=button],
.receipt-modal-content>header>button,
.patient-visit-modal-content>header>button {
    right: 1em;
    position: absolute;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    color: #0095ff;
}

.modal .new-assessment-modal-view>header>button[type=button]:hover,
.receipt-modal-content>header>button:hover,
.patient-visit-modal-content>header>button:hover {
    text-decoration: underline;
}

.modal .patient-search-view>header>h1,
.modal .error-view>header>h1,
.modal .report-upload-view>header>h1,
.modal .new-assessment-modal-view>header>h2 {
    font-weight: bold;
    color: #3366cc;
    font-size: 1.5em;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.modal .patient-search-view>.patient-search-view-body {
    padding: 0.5em;
    height: calc(100% - 6em);
}

.modal .patient-search-view>.patient-search-view-body>.search-box {
    width: 95%;
    height: 2em;
    justify-self: center;
    border: 0.5px solid black;
    border-radius: 0.2em;
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 0.5em;
    padding-left: 1em;
}

.modal .patient-search-view>.patient-search-view-body>.search-box>div {
    width: calc(100% - 6em);
    height: 100%;
    display: grid;
    grid-template-columns: 30% [col] 5% [col] 30% [col] 5% [col] 30% [col];
    grid-template-rows: 100% [row];
    align-items: center;
    justify-content: center;
}

.modal .patient-search-view>.patient-search-view-body>.search-box>button {
    position: absolute;
    right: 1em;
    height: 1.5em;
    width: 5em;
    color: white;
    background-color: #3366cc;
    border: none;
    outline: none;
    border-radius: 0.5em;
    cursor: pointer;
    transition: all 0.3s;
}

.modal .patient-search-view>.patient-search-view-body>div>table {
    width: 100%;
    height: calc(100% - 2em);
    border-collapse: collapse;
}

.modal .patient-search-view>.patient-search-view-body>div>table>thead {
    height: 1.5em;
}

.modal .patient-search-view>.patient-search-view-body>div>table>tbody {
    height: calc(100% - 1.5em);
    overflow: auto;
}

.modal .patient-search-view>.patient-search-view-body>div>table>tbody>tr>td {
    font-size: 0.8em;
}

.modal .patient-search-view>.patient-search-view-body>div>table>thead>tr>th {
    background: #727272;
    color: white;
    border: 1px solid white;
    font-weight: normal;
}

.modal .patient-search-view>.patient-search-view-body>.search-box>button:hover {
    box-shadow: 2px 4px 6px rgba(49, 49, 49, 0.8);
}

.modal .patient-search-view>.patient-search-view-body>.search-box>div>input {
    border: none;
    border-bottom: 0.5px solid grey;
    height: 70%;
    outline: none;
    padding-left: 0.2em;
    margin-right: 1em;
}

.modal .patient-search-view>.patient-search-view-body>.search-box>div>span {
    font-size: 0.5em;
    color: grey;
    margin-right: 1em;
}

.modal .patient-search-view>footer,
.modal .error-view>footer,
.modal .report-upload-view>footer,
.modal .new-assessment-modal-view>footer {
    height: 3em;
    width: 100%;
    border-top: 0.5px solid grey;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0;
}

.modal .patient-search-view>footer>button,
.modal .error-view>footer>button,
.modal .report-upload-view>footer>button,
.modal .new-assessment-modal-view>footer>button {
    height: 2em;
    width: 5em;
    color: white;
    background-color: #3366cc;
    border: none;
    outline: none;
    border-radius: 0.5em;
    cursor: pointer;
    transition: all 0.3s;
}

.modal .new-assessment-modal-view>footer>button[disabled] {
    cursor: not-allowed;
    background-color: grey;
}

.modal .patient-search-view>footer>button:hover,
.modal .error-view>footer>button:not([disabled]):hover,
.modal .report-upload-view>footer>button:hover,
.modal .new-assessment-modal-view>footer>button:not([disabled]):hover {
    box-shadow: 2px 4px 6px rgba(49, 49, 49, 0.8);
}

*[disable-item][disabled] {
    cursor: not-allowed;
}

.container .patient-body button[disabled] {
    cursor: not-allowed;
}

.container .patient-body>.header-button-container>.button-container>.button.after[disabled],
.container .patient-body>.footer-button-container>.button-container>.button.after[disabled] {
    background-image: linear-gradient(180deg, #cccccc, #737373 62%, #5e5e5e);
    border: none;
    cursor: not-allowed;
}

.red-star {
    color: red;
    font-size: 0.5em;
    float: left;
    align-self: center;
    width: 2em;
}

.add-new-checkup,
.add-new-report,
.delete-report,
.delete-checkup,
.add-new-prescription,
.delete-prescription,
.download-prescription,
.send-prescription,
.add-new-receipt,
.delete-receipt,
.download-receipt,
.send-receipt,
.add-new-visit,
.delete-visit {
    outline: none;
    background: none;
    cursor: pointer;
    border: none;
    margin-left: 1em;
    width: 1.5em;
    display: flex;
    align-items: center;
}

.add-new-prescription:not([disabled]):hover>svg line {
    stroke-width: 2.5;
}

.delete-prescription:not([disabled]):hover>svg {
    stroke-width: 20;
}

.download-prescription:not([disabled]):hover>svg path {
    stroke-width: 2.5;
}

.send-prescription:not([disabled]):hover>svg path {
    stroke-width: 2.5;
}

.add-new-checkup:not([disabled]):hover>svg line,
.add-new-report:not([disabled]):hover>svg line {
    stroke-width: 3;
}

.delete-report:not([disabled]):hover>svg path,
.delete-checkup:not([disabled]):hover>svg path {
    stroke-width: 20;
}

.marker {
    position: absolute;
    width: 15px;
    /* Adjust size as needed */
    height: 15px;
    /* Adjust size as needed */
    background-color: #888888b4;
    /* Grey color */
    border-radius: 50%;
    transform: translate(-50%, -50%);
    /* Center the circle on the click point */
}

.functional-evaluation-checkbox-label {
    font-weight: bold;
    margin-left: 0.2em;
}

.prescription-name-td {
    text-align: left;
    display: flex;
    position: relative;
    align-items: center;
}

.prescription-name-td-action-div,
.receipt-name-td-action-div,
.visit-name-td-action-div {
    right: 0.5em;
    position: absolute;
    display: flex;
}

.prescription-name-td-action-div>a.download,
.prescription-name-td-action-div>button.send,
.receipt-name-td-action-div>a.download,
.receipt-name-td-action-div>button.send,
.visit-name-td-action-div>button.send {
    height: 100%;
    width: 1em;
    display: block;
    width: 1em;
    height: 1em;
    margin-left: 0.5em;
    cursor: pointer;
}

.prescription-name-td-action-div>a.download:disabled path,
.receipt-name-td-action-div>a.download:disabled path {
    stroke: #808080;
}

.prescription-name-td-action-div>a.download:disabled,
.receipt-name-td-action-div>a.download:disabled {
    cursor: not-allowed;
}

.prescription-name-td-action-div>a.download:not([disabled]):hover>svg path,
.prescription-name-td-action-div>button.send:hover>svg path,
.receipt-name-td-action-div>a.download:not([disabled]):hover>svg path,
.receipt-name-td-action-div>button.send:hover>svg path,
.visit-name-td-action-div>button.send:hover>svg path {
    stroke-width: 2.5;
}

.open-modal-button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    background-color: #007bff;
    color: white;
    border-radius: 5px;
}

.send-modal-content,
.receipt-modal-content,
.patient-visit-modal-content {
    background-color: #fff;
    padding: 1em;
    padding-left: 2em;
    padding-right: 2em;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 90%;
    position: relative;
    flex-direction: column;
    height: 90%;
}

.send-modal-content h1,
.receipt-modal-content h1,
.patient-visit-modal-content h1 {
    text-align: center;
    color: #333;
    margin-top: 0;
}

.receipt-modal-content>header,
.patient-visit-modal-content>header {
    height: 2em;
    border-bottom: 0.5px solid lightgrey;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.send-modal-content label,
.receipt-modal-content label,
.patient-visit-modal-content label {
    margin-top: 10px;
    font-weight: bold;
    color: #555;
    width: 100%;
    text-align: left;
    display: block;
}

.send-modal-content input[type="text"],
.send-modal-content input[type="email"] {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

.send-modal-content .send-button,
.receipt-modal-content .create-button,
.patient-visit-modal-content .create-button {
    background-color: #28a745;
    color: white;
    padding: 5px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

.receipt-modal-content .create-button:disabled,
.patient-visit-modal-content .create-button:disabled {
    cursor: not-allowed;
    background-color: #909090;
}

.send-modal-content .send-button:hover,
.receipt-modal-content .create-button:not([disabled]):hover,
.patient-visit-modal-content .create-button:not([disabled]):hover {
    background-color: #218838;
}

.hidden-element {
    opacity: 0;
    visibility: hidden;
}

.visible-element {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.receipt-modal-content .date-section {
    text-align: left;
    font-size: 14px;
    margin-bottom: 10px;
}

.receipt-modal-content .patient-details,
.patient-visit-modal-content .patient-details {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
    margin-bottom: 20px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
}

.receipt-modal-content .patient-details div,
.patient-visit-modal-content .patient-details div {
    flex-basis: 30%;
}

.receipt-modal-content .patient-details span.header,
.patient-visit-modal-content .patient-details span.header {
    font-weight: bold;
}

.receipt-modal-content .invoice-table {
    width: 100%;
    border-collapse: collapse;
}

.receipt-modal-content .invoice-table th,
.receipt-modal-content .invoice-table td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
    font-size: 14px;
}

.receipt-modal-content .invoice-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.receipt-modal-content .total-row td {
    font-weight: bold;
}

.receipt-modal-content .total-row .total-label {
    text-align: right;
}

table.invoice-table td[rowspan]>div:nth-child(1) div:nth-child(2),
table.invoice-table td>div:nth-child(1):has(> div:nth-child(1) > br) div:nth-child(2) {
    align-items: start;
}

table.invoice-table div[contentEditable="true"] {
    outline: none;
    overflow: hidden;
    border: none;
}

table.invoice-table th,
table.invoice-table td {
    word-wrap: break-word;
    max-width: 100%;
}

table.invoice-table {
    table-layout: fixed;
    position: relative;
}

table.invoice-table th>div:nth-child(1) div:nth-child(2),
table.invoice-table td>div:nth-child(1) div:nth-child(2) {
    display: none;
    cursor: pointer;
    position: relative;
    height: auto;
    width: 0.5em;
    border-color: transparent;
    border-style: solid;
    border-width: .31em 0 .31em .5em;
    border-top-color: transparent;
    border-left-color: #808080;
    right: 0.2em;
    margin-left: 0.2em;
}

table.invoice-table th>div:nth-child(1),
table.invoice-table td>div:nth-child(1) {
    min-width: 3em;
    height: 100%;
    display: flex;
    align-items: center;
}

table.invoice-table th>div:nth-child(1) div:nth-child(1),
table.invoice-table td>div:nth-child(1) div:nth-child(1) {
    flex-grow: 1;
}

table.invoice-table th>div:nth-child(1):has(> div[contenteditable=true]):hover div:nth-child(2),
table.invoice-table td>div:nth-child(1):has(> div[contenteditable=true]):hover div:nth-child(2) {
    display: block;
}

table.invoice-table td input[type=number],
table.invoice-table td textarea {
    width: 100%;
    height: 100%;
    outline: none;
    border: none;
    border-bottom: 0.5px solid lightgrey;
    padding: 0.5em;
}

/* .table-menu-list */
.table-menu-list {
    font-size: 0.8em;
    text-align: justify;
    padding: 0.5em;
    cursor: pointer;
}

.table-menu-list:hover {
    background-color: #0000005e;
}

.table-menu-list[disabled] {
    cursor: not-allowed;
    color: lightgrey;
}

.red-round-border {
    border: 1.5px solid red;
}

.patient-visit-modal-content .form-group {
    margin-bottom: 15px;
}

.patient-visit-modal-content .form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

.patient-visit-modal-content .form-group input,
.patient-visit-modal-content .form-group textarea,
.patient-visit-modal-content .form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1em;
}

@media print {
    body * {
        visibility: hidden;
    }

    #content,
    #content * {
        visibility: visible;
    }

    .container .header-button-container,
    .container .footer-button-container {
        display: none;
    }
}

@media print and (orientation: portrait) {

    .container .patient-header .contact-details .email>i,
    .container .patient-header .contact-details .phone>i,
    .container .patient-header .contact-details .whatsapp>i,
    .container .patient-header .contact-details .web>i {
        visibility: visible;
    }

    .container .patient-header .contact-details .email,
    .container .patient-header .contact-details .phone,
    .container .patient-header .contact-details .whatsapp,
    .container .patient-header .contact-details .web {
        justify-content: center;
    }

    .container .patient-header .contact-details {
        max-width: 10em;
        min-width: 10em;
        padding: 0.1em;
    }

    .container .patient-header .contact-details * {
        font-size: 0.7em;
    }

    .container .patient-header img {
        height: 70%;
    }

    .container .patient-header .headline>h1 {
        font-size: 0.5em;
        align-self: center;
    }

    .container .patient-header .headline>span {
        align-self: center;
        margin-top: auto;
    }
}

@media (max-width: 1024px) {
    .modal .patient-search-view>.patient-search-view-body>.search-box {
        height: max-content;
        padding: 1em;
    }

    .modal .patient-search-view>.patient-search-view-body>.search-box>div {
        display: block;
    }
}

@page {
    size: auto;
    margin: 0mm;
}
/* Styles for RTF container and related components */

/* .rtf-container */
div.rtf-container .link-container-div  div:not(:has(button)) {
  display: grid;
  grid-template-rows: [row] 45% [row] 45%;
  grid-gap: 0.5em;
  height: 80%;
}

div.rtf-container .link-container-div  div:not(:has(button)) fieldset {
  border: none;
  text-align: left;
  height: 100%;
  font-size: 0.5em;
  color: var(--universal-blue);
}

div.rtf-container .link-container-div  div:not(:has(button)) fieldset  input {
  width: 100%;
  border: none;
  outline: none;
  box-shadow: 0 0 2px rgb(204, 204, 204);
  padding: 0.2em;
  color: #4e4e4e;
  font-size: 1.5em;
}

div.rtf-container .link-container-div div:has(button) {
  height: 20%;
  display:flex;
  align-items: center;
  justify-content: center;
}

div.rtf-container .link-container-div div:has(button) > button, & > input {
  height: 80%;
  width: 20%;
  border-radius: 0.2em;
  display:flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7em;
  background: none;
  border: none;
  cursor: pointer;
}

div.rtf-container .link-container-div div:has(button) > button, & > input:not([disabled]):hover {
  background-color: lightgray;
}

div.rtf-container .link-container-div {
  position: relative; 
  display: none;
  background-color: #fff;
  border-radius: 0.2em;
  border: 1px solid lightgrey;
  width: 15em;
  height: 6.5em;
  padding: 0.2em;
  z-index: 10000;
  -o-transition: .6s ease opacity,.6s ease transform;
  -moz-transition: .6s ease opacity,.6s ease transform;
  -webkit-transition: .6s ease opacity,.6s ease transform;
  transition: .6s ease opacity,.6s ease transform;
}

div.rtf-container .formatter-option-divider {
  position:relative;
  height:70%;
  border-left: 1px solid lightgrey;
}

div.rtf-container div:has(> .font-size) .font-size {
  height:100%;
  width:100%;
  display:flex;
  border-radius: 0.2em;
  cursor: pointer;
}

div.rtf-container div:has(> .font-size) .font-size:not([disabled]):hover {
  background-color: lightgrey;
}

div.rtf-container div:has(> .font-size) .font-size[disabled] {
  cursor: default;
}

div.rtf-container div:has(> .font-size)  #font-size-input {
  outline:none;
  width: 100%;
  font-size: 0.7em;
  -moz-appearance:textfield;
}

div.rtf-container div:has(> .font-size)  #font-size-input::-webkit-inner-spin-button,
div.rtf-container div:has(> .font-size)  #font-size-input::-webkit-outer-spin-button {
  -moz-appearance: none;
  appearance: none;
  margin: 0; 
}

div.rtf-container div:has(> .font-size) {
  display:grid;
  grid-template-columns: [col] 20% [col] 60% [col] 20%;
  grid-gap: 5%;
  width: 10%;
  min-width: 3.5em;
  padding-left:0.2em;
  padding-right:0.5em;
  align-items: center;
}

div.rtf-container div:has(> .text-decoration) .text-decoration,
div.rtf-container div:has(> .text-decoration) > div > .text-decoration {
  border-radius: 0.2em;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-self: center;
}

div.rtf-container div:has(> .text-decoration) .text-decoration:not([disabled]).active, &:not([disabled]):hover {
  background-color: lightgray;
}

div.rtf-container div:has(> .text-decoration) .text-decoration[disabled]{
  cursor: default;
}

div.rtf-container div:has(> .text-decoration) .bold {
  font-weight: bold;
}

div.rtf-container div:has(> .text-decoration) .italics {
  font-style: italic;
}

div.rtf-container div:has(> .text-decoration) .underline {
  text-decoration: underline;
}

div.rtf-container div:has(> .text-decoration) .line-through {
  text-decoration: line-through;
}

div.rtf-container div:has(> .text-decoration) .text-color {
  font-size: x-small;
  --background-color: var(--skipped);
}

div.rtf-container div:has(> .text-decoration) .text-color::after {
  content: '';
  position: relative;
  left: 15%;
  display: block;
  width: 70%;
  height: 3px;
  background-color: var(--background-color);
}

div:has(div.rtf-container div:has(> .text-decoration) .text-color).active {
  background-color: lightgray;
}

div.rtf-container div:has(> .text-decoration) .background-color {
  background-image: url(/fill.svg);
  background-position: center;
  background-repeat: no-repeat;
  --background-color: var(--skipped);
} 

div.rtf-container div:has(> .text-decoration) .background-color::after {
  content: '';
  position: relative;
  display: flex;
  width: 80%;
  height: 3px;
  background-color: var(--background-color);
  top: 30%;
  left: 10%;
}

div:has(div.rtf-container div:has(> .text-decoration) .background-color).active {
  background-color: lightgray;
}

div.rtf-container div:has(> .text-decoration) {
  display:grid;
  grid-template-columns: [col] 15% [col] 15% [col] 15% [col] 15% [col] 15% [col] 15%;
  width: 20%;
  max-height: 1.7em;
  grid-gap: 1%;
  align-items: center;
  justify-content: center;
}

div.rtf-container div:has(> .attachment) .attachment[disabled]{
  cursor: default;
}

div.rtf-container div:has(> .attachment) .attachment:not([disabled]).active, div.rtf-container div:has(> .attachment) .attachment:not([disabled]):hover {
  background-color: lightgray;
}

div.rtf-container div:has(> .attachment) .attachment.link {
  background-image: url(/link.svg);
}

div.rtf-container div:has(> .attachment) .attachment.comment {
  background-image: url(/comment.svg);
}

div.rtf-container div:has(> .attachment) .attachment.file {
  background-image: url(/attachment.svg);
}

div.rtf-container div:has(> .attachment) .attachment.table {
  background-image: url(/table.svg);
}

div.rtf-container div:has(> .attachment) .attachment.code {
  background-image: url(/code.svg);
}

div.rtf-container div:has(> .attachment) .attachment {
  height: 100%;
  width: 100%;
  border-radius: 0.2em;
  background-position: center;
  background-repeat: no-repeat;
}

div.rtf-container div:has(> .attachment) {
  display:grid;
  grid-template-columns: [col] 25% [col] 25% [col] 25% [col] 25%;
  width: 15%;
  align-items: center;
  justify-content: center;
  height: 100%;
}

div.rtf-container div:not([class]):has(> .text-alignment-container) > .text-alignment-container:not([disabled]):hover, &.active {
  background-color: lightgray;
}

div.rtf-container div:not([class]):has(> .text-alignment-container) > .text-alignment-container .alignment {
  height: 100%;
  width: 80%;
  padding: 0.2em;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(/text-alignment-left.svg);
}

div.rtf-container div:not([class]):has(> .text-alignment-container) > .text-alignment-container .alignment + div {
  background-image:url(/arrow-down.svg);
  background-position: center;
  background-repeat: no-repeat;
  height:100%;
  width:20%
}

div.rtf-container div:not([class]):has(> .text-alignment-container) > .text-alignment-container {
  border-radius: 0.2em;
  display:flex;
  width:100%;
  padding:0.2em;
  cursor: pointer;
  height: 80%;
}

div.rtf-container div:not([class]):has(> .text-alignment-container) .checkbox-container {
  border-radius: 0.2em;
  display:flex;
  justify-content: center;
  align-items: center;
  width:100%;
  cursor: pointer;
  height: 80%;
}

div.rtf-container div:not([class]):has(> .text-alignment-container) .checkbox-container:not([disabled]):hover, &.active {
  background-color: lightgray;
}

div.rtf-container div:not([class]):has(> .text-alignment-container) .checkbox-container .checkbox {
  cursor: pointer;
  height: 100%;
  width: 80%;
  padding: 0.2em;
}

div.rtf-container div:not([class]):has(> .text-alignment-container) .checkbox-container .checkbox:hover {
  border-color: rgba(118, 118, 118, 0.8);
}

div.rtf-container div:not([class]):has(> .text-alignment-container) > div:has(> .bullets) {
  border-radius: 0.2em;
  display:flex;
  width:100%;
  padding:0.2em;
  cursor: pointer;
  height: 80%;
}

div.rtf-container div:not([class]):has(> .text-alignment-container) > div:has(> .bullets):not([disabled]):hover {
  background-color: lightgray;
}

div.rtf-container div:not([class]):has(> .text-alignment-container) > div:has(> .bullets) .bullets {
  background-image:url(/bullets.svg);
  background-position: center;
  background-repeat: no-repeat;
  height:100%;
  width:100%
}

div.rtf-container div:not([class]):has(> .text-alignment-container) > div:has(> .ordered-list) {
  border-radius: 0.2em;
  display:flex;
  width:100%;
  padding:0.2em;
  cursor: pointer;
  height: 80%;
}

div.rtf-container div:not([class]):has(> .text-alignment-container) > div:has(> .ordered-list):not([disabled]):hover {
  background-color: lightgray;
}

div.rtf-container div:not([class]):has(> .text-alignment-container) > div:has(> .ordered-list) .ordered-list {
  background-image:url(/ordered-list.svg);
  background-position: center;
  background-repeat: no-repeat;
  height:100%;
  width:100%
}

div.rtf-container div:not([class]):has(> .text-alignment-container) .text-styling-list > div > input[type="radio"]:checked + button {
  background-color: lightgray;
}

div.rtf-container div:not([class]):has(> .text-alignment-container) .text-styling-list > div > button {
  height: 100%;
  width: 80%;
  padding: 0.2em;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0.2em;
}

div.rtf-container div:not([class]):has(> .text-alignment-container) .text-styling-list > div > button:not([disabled]):hover {
  background-color: lightgray;
}

div.rtf-container div:not([class]):has(> .text-alignment-container) .text-styling-list > div {
  width:100%;
  height: 100%;
  display:grid;
  grid-template-columns: [col] 25% [col] 25% [col] 25% [col] 25%;
  justify-content:center;
  align-items:center;
  font-size: 0.7em;
  padding: 0.2em;
}

div.rtf-container div:not([class]):has(> .text-alignment-container) .text-styling-list {
  position: absolute; 
  top: 100%; 
  left: 0px;
  background-color: #fff;
  border-radius: 0.2em;
  border: 1px solid lightgrey;
  width: 7em;
  height: 2em;
  z-index: 10000;
}

div.rtf-container div:not([class]):has(> .text-alignment-container) .spacing-options ul input[type="radio"]:checked + li div {
  background-image: url(/tick.svg);
}

div.rtf-container div:not([class]):has(> .text-alignment-container) .spacing-options ul li div {
  background-position: center;
  background-repeat: no-repeat;
  width:10%;
  height:inherit;
}

div.rtf-container div:not([class]):has(> .text-alignment-container) .spacing-options ul li span {
  width:80%;
  height:100%;
  margin-left: 5%;
}

div.rtf-container div:not([class]):has(> .text-alignment-container) .spacing-options ul li:not([disabled]):hover {
  background-color: lightgrey;
}

div.rtf-container div:not([class]):has(> .text-alignment-container) .spacing-options ul li {
  padding: 0.2em;
  width: 100%;
  display:flex;
  cursor: pointer;
}

div.rtf-container div:not([class]):has(> .text-alignment-container) .spacing-options ul {
  height: 100%;
  width: 100%;
  font-size: 0.8em;
  margin-block-start: 0;
  margin-block-end: 0;
  padding:0.5em;
}

div.rtf-container div:not([class]):has(> .text-alignment-container) .spacing-options {
  display:none;
  position: absolute;
  top: 100%;
  left: -100%;
  background-color: #fff;
  border-radius: 0.2em;
  border: 1px solid lightgrey;
  min-width: 10em;
  height: 10em;
}

div.rtf-container div:not([class]):has(> .text-alignment-container) {
  display:grid;
  grid-template-columns: [col] 25% [col] 25% [col] 25% [col] 25%;
  width: 15%;
  align-items: center;
  height: 100%;
  position: relative;
  padding-left:0.2em;
  padding-right: 0.2em;
  grid-gap: 1%;
}

div.rtf-container {
  height:auto;
  max-height: 22em;
  width:100%;
  border:1px solid lightgrey;
  padding: 0.5em;
  border-radius:0.2em;
  display: grid;
  grid-template-rows: [rows] auto [row] auto [row] auto;
  grid-template-columns: [col] 100%;
  grid-gap: 1em;
}

div.rtf-container > footer > div > div:not(last-child):not([disabled]):hover {
  background-color: #929292b6;
}

div.rtf-container > footer > div > div:not(last-child) span:not([type=filename]) {
  width:auto;
  height:80%;
  background-color: var(--universal-blue);
  font-weight:bold;
  color:white;
  text-align:center;
  display:flex;
  align-items:center;
  border-radius:0.2em;
  padding:0.1em;
  font-size:0.5em;
}

div.rtf-container > footer > div > div:not(last-child) span[type=filename] {
  color: #0d2a57;
  font-size: 0.6em;
  margin-left: 0.5em;
}

div.rtf-container > footer > div > div:not(last-child).active {
  border: 0.5px solid var(--universal-blue);
}

div.rtf-container > footer > div > div:not(last-child):not(:first-child) {
  margin-left: 1em;
}

div.rtf-container > footer > div > div:not(last-child) {
  width: fit-content;
  min-width:10em;
  height:1.5em;
  background: #fff;
  border: 0.5px solid rgba(228, 228, 228, 0.7);
  box-shadow: 3px 3px 0 0 rgba(228, 228, 228, 0.7);
  border-radius: 5px;
  display: flex;
  align-items: center;
  padding: 0.2em;
  background-color: #92929250;
  cursor: pointer;
}

div.rtf-container > footer > div {
  max-width: 100%;
  height: auto;
  display:grid;
  grid-auto-flow: column;
  overflow-y:auto;
  padding: 0.5em;
  width: fit-content;
}

div.rtf-container > footer #attachment-menu button {
  background-position: center;
  background-repeat: no-repeat;
  background-color: white;
  padding: 0.2em;
}

div.rtf-container > footer #attachment-menu button:hover {
  background-color: lightgrey;
}

div.rtf-container > footer #attachment-menu {
  display:none; 
  grid-template-columns: [col] 47.5% [col] 47.5%;
  position:relative;
  padding:0.2em;
  width: 5em;
  height: 1.5em;
  z-index: 100000;
  border: 1px solid lightgrey;
  background-color: white;
  grid-gap: 5%;
}

div.rtf-container > footer {
  background-color:transparent;
  max-height: 3em;
}

div.rtf-container div[contentEditable="true"][type="rtf-div"] {
  min-height: 15em;
  max-height: 15em;
  height: 80%;
  outline: none;
  border-top: 1px solid lightgrey;
  padding:0.2em;
  font-size:80%;
  color: var(--skipped);
  overflow: auto;
  text-align: left;
}

div.rtf-container div[contentEditable="true"][type="rtf-div"] table td[rowspan] > div:nth-child(1) div:nth-child(2), & td > div:nth-child(1):has(> div:nth-child(1) > br) div:nth-child(2) {
  align-items: start;
}

div.rtf-container div[contentEditable="true"][type="rtf-div"] table div[contentEditable="true"] {
  outline: none;
  overflow: hidden;
  border: none;
}

div.rtf-container div[contentEditable="true"][type="rtf-div"] table th, 
div.rtf-container div[contentEditable="true"][type="rtf-div"] table td {
  word-wrap: break-word;
  max-width: 100%;
}

div.rtf-container div[contentEditable="true"][type="rtf-div"] table {
  table-layout: fixed;
  position: relative;
}

div.rtf-container div[contentEditable="true"][type="rtf-div"] table th.fixed, 
div.rtf-container div[contentEditable="true"][type="rtf-div"] table td.fixed {
  background: rgba(228, 228, 228, 0.6);
  position: sticky;
}

div.rtf-container div[contentEditable="true"][type="rtf-div"] table th.fixed, 
div.rtf-container div[contentEditable="true"][type="rtf-div"] table td.fixed {
  background: rgba(228, 228, 228, 0.6);
  position: sticky;
}

div.rtf-container div[contentEditable="true"][type="rtf-div"] table th.fixed {
  top: 0;
}

div.rtf-container div[contentEditable="true"][type="rtf-div"] table td.fixed {
  left: 0;
}

div.rtf-container div[contentEditable="true"][type="rtf-div"] table th > div:nth-child(1) div:nth-child(2), 
div.rtf-container div[contentEditable="true"][type="rtf-div"] table td > div:nth-child(1) div:nth-child(2) {
  display: none;
  cursor: pointer;
  position:relative;
  height: auto;
  width: 0.5em;
  border-color: transparent;
  border-style: solid;
  border-width: .31em 0 .31em .5em;
  border-top-color: transparent;
  border-left-color: #808080;
  right: 0.2em;
  margin-left: 0.2em;
}

div.rtf-container div[contentEditable="true"][type="rtf-div"] table th > div:nth-child(1), 
div.rtf-container div[contentEditable="true"][type="rtf-div"] table td > div:nth-child(1) {
  min-width: 3em;
  height: 100%;
  display: flex;
  align-items: center;
}

div.rtf-container div[contentEditable="true"][type="rtf-div"] table th > div:nth-child(1) div:nth-child(1),
div.rtf-container div[contentEditable="true"][type="rtf-div"] table td > div:nth-child(1) div:nth-child(1) {
  flex-grow: 1;
}

div.rtf-container div[contentEditable="true"][type="rtf-div"] table th > div:nth-child(1):hover  div:nth-child(2),
div.rtf-container div[contentEditable="true"][type="rtf-div"] table td > div:nth-child(1):hover div:nth-child(2) {
  display: block;
}

div.rtf-container div[contentEditable="true"][type="rtf-div"] span::selection {
  color: var(--selection-color);
  background: #ADD8E6;
}

div.rtf-container div[contentEditable="true"][type="rtf-div"] span {
  --selection-color: #fff;
}

div.rtf-container div[contentEditable="true"][type="rtf-div"] table, 
div.rtf-container div[contentEditable="true"][type="rtf-div"] table th, 
div.rtf-container div[contentEditable="true"][type="rtf-div"] table td {
  border: 1px solid lightgrey;
  border-collapse: collapse;
  max-width: 100%;
  font-size: 1em;
}

div.rtf-container div[contentEditable="true"][type="rtf-div"]::selection {
  background: #ADD8E6;
}

div.rtf-container div[contentEditable="true"][type="rtf-div"] ul,
div.rtf-container div[contentEditable="true"][type="rtf-div"] ol {
  margin-left: 5em;
}

.editable-code.active {
  border: 1px solid #388bff;
}

.editable-code label {
  width: 100%;
  height: 1.5em;
  text-align: center;
  font-size: 0.7em;
  padding: 0.2em;
  background: linear-gradient(to bottom, #ffffff, lightgrey);
  color: black; 
}

.editable-code code {
  display: flex;
  font-size: 1em;
  position: relative;
  margin-left: 3.5em;
}

.editable-code code:before {
  counter-increment: line;
  content: counter(line) ". ";
  display: inline-block;
  padding-left: 0.2em;
  width: 3em;
  min-width: 3em;
  background-color: #d4d4d4;  
  position: absolute;
  top: 0;
  bottom: 0;
  left: -3.5em;
  text-align: center;
}

.editable-code code * {
  font-family: monospace;
}

div:has(> .editable-code) {
  max-width: 90%; 
  min-width: 90%; 
  margin: auto; 
  overflow: auto;
}

.editable-code {
  counter-reset: line;
  width: 100%;
  height: 100%;
  border: 0.5px solid #9898989d;
  background-color: #f5f5f563;
  white-space: pre-wrap;       /* Since CSS 2.1 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word; 
  padding-right: 0.2em; 
  outline: none;
}

.no-border {
  width: 100%; 
  border: none; 
  outline: none;
}

.round-buttons {
  border-radius: 50%;
  box-shadow: rgba(255, 255, 255, .4) 1px 1px 1px 1px inset;
  flex-grow: 1;
}

/* .formatter-option, .shadow, .formatter-option-divider */
.formatter-option {
    width: 100%;
    height: 1.7em;
    display: flex;
    justify-content: center;
    align-items: center;
}
.shadow {
    background: #fff;
    border-radius: 5px;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
}

#font-size-input {
    min-width: 0;
    max-width: 200px;
    width: auto;
    /* Disabled and novalidate are attributes, not styles */
}

/* .comment-box */
.comment-box label {
  text-align: center;
  color: var(--universal-blue);
  height: 100%;
  width: 90%;
  border-bottom: 1px solid lightgrey;
  font-size: 0.7em;
  left: 5%;
  position: relative;
}

/* .menu-show, .remove-style-div, .remove-style-buttons */
.menu-show {
  z-index: 100000;
  position: absolute;
  background-color: white;
  border: 1px solid lightgrey;
  padding: 2px;
  margin: 0;
  list-style-type: none;
  list-style: none;
  display: grid;
  grid-template-columns:[col] 100%;
  grid-template-rows:auto;
  border-radius:5px;
  width:10em;
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
}

.remove-style-div button.remove-style-buttons {
  background-position: center;
  background-repeat: no-repeat;
  background-color: white;
}

.remove-style-div  button.remove-style-buttons:not([disabled]):hover {
  background-color: lightgray;
} 

.remove-style-div  button.remove-style-buttons[disabled] {
  cursor: default;
}

.remove-style-div {
  z-index: 100000;
  position: relative;
  background-color: white;
  border: 1px solid lightgrey;
  padding: 2px;
  margin: 0;
  list-style-type: none;
  list-style: none;
  display: grid;
  grid-template-columns:[col] 30% [col] 30% [col] 30%;
  grid-gap: 5%;
  border-radius:5px;
  width:5em;
  height: 2em;
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
}

.menu-hide {
  display: none;
  z-index: 100000;
}

div.arrow-right {
  display: none;
  position: absolute;
  border-color: transparent;
  border-style: solid;
  border-width: .5em .31em 0;
  width: 0;
  height: 0;
  border-width: .31em 0 .31em .5em;
  border-top-color: transparent;
  border-left-color: #808;
  right: 5px;
  rotate: 45deg;
}

/* .table-menu-list */
.table-menu-list {
  font-size:0.8em;
  text-align:justify;
  padding:0.5em;
  cursor: pointer;
}

.table-menu-list:hover {
  background-color: #0000005e;
}

.table-menu-list[disabled]{
  cursor: not-allowed;
  color: lightgrey;
}


/* Inline styles for SVG icons and buttons */
#reduce-font-size svg,
#increase-font-size svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
}

.text-styling-list button[style] {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

/* Inline styles for color input */
input[type="color"] {
    height: 0px;
    width: 0px;
    inline-size: 0px;
    block-size: 0px;
    border-width: 0px;
    padding: 0px;
}

/* Inline styles for hidden file input */
div.rtf-container input[type="file"] {
    display: none;
}


/* Inline styles for form buttons */
.link-container-div input[type="button"],
.comment-container-div input[type="button"] {
    width: auto;
}

/* Inline styles for form divs */
.comment-container-div > div {
    width: 20%;
}

.link-container-div > div {
  width: 100%;
}

/* Add any additional referenced styles as needed */
select[name="select-font-family"],  select[name="code-type"]{
  outline: none;
  border: none;
  padding: 0.1em;
  cursor: pointer;
  font-size: 0.8em;
  text-align: center;
  background-color: transparent;

  &:active {
    background-color: lightgrey;
  }

  & option {
    border-radius: 0.2em;
  }

  &.active {
    border: 0.5px solid var(--universal-blue);
    border-radius: 0.2em;
  }
}
.profile-container {
    display: grid;
    grid-template-columns: [col] 30% [col] 70%;
    grid-template-rows: [row] 100%;
}

.form-control:focus {
    box-shadow: none;
    border-color: #BA68C8
}

.back:hover {
    color: #682773;
    cursor: pointer
}

.labels {
    font-size: 11px
}

.add-experience:hover {
    background: #BA68C8;
    color: #fff;
    cursor: pointer;
    border: solid 1px #BA68C8
}

.picture-div span {
    width: 100%;
    height: 100%;
    display: flex;
    font-size: 20vh;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.picture-div {
    width: 30vh;
    height: 30vh;
    background-repeat: no-repeat;
    background-position: center;
    border: 0.5px solid grey;
    border-radius: 3vh;
    background-size: 100% 100%;
    cursor: pointer;
}

.picture-div img {
    width: 100%;
    height: 100%;
    border-radius: 3vh;
}

.p-3 {
    padding: 1rem !important;
}

.py-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

.align-items-center {
    align-items: center !important;
}

.justify-content-between {
    justify-content: space-between !important;
}

.d-flex {
    display: flex !important;
}

.text-right {
    text-align: right !important;
}

.h4, h4 {
    font-size: calc(1.275rem + .3vw);
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
}

.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex: 1 0 100%;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y)* -1);
    margin-right: calc(var(--bs-gutter-x) / -2);
    margin-left: calc(var(--bs-gutter-x) / -2);
}

.mt-2 {
    margin-top: .5rem !important;
}

.row>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) / 2);
    padding-left: calc(var(--bs-gutter-x) / 2);
    margin-top: var(--bs-gutter-y);
}

@media (max-width: 480px) {
    .profile-container {
        display: block;
    }

    .profile-container > div:nth-child(1) {
        width: 25vh;
        height: 25vh;
        justify-self: center;
        position: relative;
    }

    .profile-container .col-md-5 {
        width: 100%;
    }

    a.back-button:nth-child(1){
        display:none;
    }

    a.back-button:nth-child(2){
        display:block;
    }

    .picture-div {
        height: 25vh;
        width: 25vh;
    }

    .picture-div span {
        font-size: 15vh;
    }
}

.col-md-5 {
    flex: 0 0 auto;
    width: 41.666667%;
}

.col-md-6 {
    flex: 0 0 auto;
    width: 50%;
}

.col-md-12 {
    flex: 0 0 auto;
    width: 100%;
    position: relative;
}

.col-md-12:not(:first-child){
    margin-top: 1em;
}

.labels {
    font-size: 11px;
    display: inline-block;
    margin-bottom: 0.5em;
}

.form-control {
    display: block;
    width: 100%;
    min-height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.mt-3 {
    margin-top: 1rem !important;
}

.mt-5 {
    margin-top: 3rem !important;
}

.btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.btn-primary {
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.profile-button {
    background: rgb(99, 39, 120);
    box-shadow: none;
    border: none;
    cursor: pointer;
}


.profile-button:hover {
    background: #682773
}

.profile-button:focus {
    background: #682773;
    box-shadow: none
}

.profile-button:active {
    background: #682773;
    box-shadow: none
}

.dpdn-mnu {
    position: absolute;
    background-color: #fff;
    margin-top: 1px;
    box-shadow: 0 1px 2px rgb(204, 204, 204);
    border-radius: 0 1px 2px 2px;
    display: block;
    max-height: 0em;
    overflow-y: auto;
    z-index: 9;
    padding: 0;
    width: calc(100% - var(--bs-gutter-x));
    transition: max-height 0.3s;
}

.dpdn-mnu.active {
    max-height: 10em;
}
.dpdn-mnu li {
    padding: 10px;
    transition: all .2s ease-in-out;
    cursor: pointer
} 

.dpdn-mnu li:hover {
    background-color: #f2f2f2
}
.dpdn-mnu li:active {
    background-color: #e2e2e2
}

.back-button {
    display: flex;
    font-size: 3vh;
}

.back-button:nth-child(2){
    display:none;
}

.back-button:hover {
    text-decoration: underline;
}

.back-button::before {
    content: '';
    background-image:url(/back-arrow.svg);
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    outline: none;
    height: 3vh;
    width: 3vh;
    background-color: transparent;
    cursor: pointer;
    float: left;
    align-self: center;
    margin-right:0.5em;
}

.dpdn:has(li.visible) li:not([class=visible]){
    display:none;
}

.dropdown[disabled] {
    cursor: not-allowed;
}

.loader-anim-div {
    background-image:url(/loading.gif);
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    height:100%;
    width:100%;
    top:0;
    left:0;
    background-color: rgba(255,255,255,0.8);
    z-index: 100000;
}
  
.message-translucent {
    position: absolute;
    height:100%;
    width:100%;
    top:0;
    left:0;
    background-color: rgba(255,255,255,0.8);
    z-index: 100000;
    display:flex;
    justify-content:center;
    align-items:center;
  
    & span {
      font-weight: bold;
      letter-spacing: 0.1em;
      opacity: 1;
      -webkit-animation: fadeInFromNone 2s ease-out, fadeOutFromIn 1s eas;
      -moz-animation: fadeInFromNone 2s ease-out;
      -o-animation: fadeInFromNone 2s ease-out;
      animation: fadeInFromNone 2s ease-out;
    }
}

@-webkit-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }
  
    1% {
        display: block;
        opacity: 0;
    }
  
    100% {
        display: block;
        opacity: 1;
    }
}
  
@-moz-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }
  
    1% {
        display: block;
        opacity: 0;
    }
  
    100% {
        display: block;
        opacity: 1;
    }
}
  
@-o-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }
  
    1% {
        display: block;
        opacity: 0;
    }
  
    100% {
        display: block;
        opacity: 1;
    }
}
  
@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }
  
    1% {
        display: block;
        opacity: 0;
    }
  
    100% {
        display: block;
        opacity: 1;
    }
}

layer {
    position:absolute;
    height:100%;
    width:0;
    top:0;
    left:0;
    z-index:10;
    border-radius:3vh;
    background: rgba(0,0,0,0.15);
    box-shadow: 0 3px 5px 0 rgba(31,38,135,0.37);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255,255,255,0.18);
    background-size: 2em;
    background-position: center;
    background-repeat: no-repeat;
    cursor:pointer;
    transition: all 0.3s;
    opacity: 0;
}

.picture-div:has(span) layer {
    background-image: url(/add-white.svg);
}

.picture-div:not(:has(span)) layer {
    background-image: url(/delete-white.svg);
}

layer.active {
    width: 100%;
    opacity:1;
}

layer > button {
    right: 0.2em;
    position: absolute;
    background-color: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: ease filter, transform 0.3s;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

.google-visualization-tooltip {
  pointer-events: none;
}

html,
body,
#content {
  min-height: 100% !important;
  height: 100%;
}

#content {
  transition: margin-left 0.5s;
  padding: 0.5em;
  overflow-y: auto;
}

* {
  scroll-behavior: smooth;
  font-family: Arial, sans-serif;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

:root {
  --grey: #808080;
  --universal-blue: #3366cc;
  --white: #ffffff;
  --light-grey: #edf0f1;
  --violet: #655be1;
  --dark-violet: #5146e1;
  --black: black;
}

.no-user-select {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.popup {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: transparent;
  backdrop-filter: blur(10px);
  z-index: 9999;
  display: none;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  align-items: center;
  justify-content: center;
}

.popup:target {
  opacity: 1;
  visibility: visible;
}

.popup__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
  height: 30em;
  padding: 20px;
  background-color: white;
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  overflow: hidden;
  background: white;
}

.popup-content {
  background-color: white;
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  overflow: hidden;
  background: white;
  width: max-content;
  padding: 0 1em;
  height: 5em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.home-white {
  background-image: url(/home-white.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 70% 70%;
}

/* Message Box styles */
#message-box {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: #28a745;
  color: white;
  padding: 15px 25px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  z-index: 90000;
  display: none;
  animation: slideIn 0.5s ease-out;
}

@keyframes slideIn {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(-50px);
    opacity: 0;
  }
}

.error {
  color: red;
  font-size: 0.9em;
  margin-top: 5px;
}

::-webkit-scrollbar {
  /* Set a moderately small width for the entire area */
  width: 12px;
}

::-webkit-scrollbar-track {
  /* The track itself is the background. By default, it has no border.
      If a browser adds one, setting border: transparent ensures it's invisible. */
  border: transparent;

  /* Simulate a 1px wide line centered in the 12px area */
  background: linear-gradient(to right, transparent 5.5px, #ccc 5.5px, #ccc 6.5px, transparent 6.5px);

  /* Remove any inner shadow (box-shadow is often used for borders/depth) */
  box-shadow: none;
  border-radius: 0;
}

::-webkit-scrollbar-thumb {
  /* Solid color for the square */
  background-color: #333;
  border-radius: 0;
  height: 2em;

  /* The border creates space, making the thumb appear smaller/square.
      Setting it to transparent is essential to prevent a visible outline. */
  border: 3px solid transparent;

  /* Ensures the background color doesn't bleed into the border area */
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

/* Time Picker CSS */
.tp-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 40000;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(2px);
}

.tp-modal {
  background: #fff;
  width: 280px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  animation: tp-fade-in 0.2s ease-out;
}

@keyframes tp-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Header Section */
.tp-header {
  background: #007bff;
  /* Primary Brand Color */
  padding: 24px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  user-select: none;
}

.tp-time-group {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.tp-display-val {
  font-size: 48px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: color 0.2s;
  line-height: 1;
}

.tp-display-val.active {
  color: #fff;
}

.tp-colon {
  font-size: 48px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 0.9;
}

.tp-ampm-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-left: 12px;
}

.tp-ampm-btn {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  padding: 2px 6px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
}

.tp-ampm-btn.active {
  background: #fff;
  color: #007bff;
  border-color: #fff;
}

/* Body / List Section */
.tp-body {
  height: 300px;
  overflow-y: auto;
  position: relative;
  scrollbar-width: thin;
}

.tp-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
  /* Hidden by default, toggled via JS */
}

.tp-list.active {
  display: block;
}

.tp-item {
  padding: 12px;
  text-align: center;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.1s;
}

.tp-item:hover {
  background: #f5f5f5;
}

.tp-item.selected {
  background: #e6f2ff;
  color: #007bff;
  font-weight: 600;
}

/* Footer Section */
.tp-footer {
  padding: 16px 24px;
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  border-top: 1px solid #eee;
}

.tp-btn {
  background: none;
  border: none;
  color: #007bff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background 0.2s;
}

.tp-btn:hover {
  background: #e6f2ff;
}

input.time-picker[type="number"]::-webkit-inner-spin-button,
input.time-picker[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.clock-icon {
  cursor: pointer;
  position: absolute;
  right: 0.2em;
  width: 1em;
}

.input-container:has(.clock-icon):not([disabled])>svg {
  transition: stroke-width 0.1s;
}

.input-container:has(.clock-icon):not([disabled])>svg:hover {
  stroke-width: 2.5;
}

.input-container[disabled]:has(.clock-icon)>div:has(> svg) {
  cursor: not-allowed;
}