@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
/* @import "../../node_modules/bootstrap/scss/bootstrap.scss";*/
:root {
  --font-primary: "Roboto", Helvetica, Arial, sans-serif;
  --color-light: #ffffff;
  --color-dark: #212529;
}

body {
  padding: 25px;
  font-family: var(--font-primary);
  background: -webkit-gradient(linear, left top, right top, from(#003366), to(#005693));
  background: linear-gradient(to right, #003366 0%, #005693 100%);
  color: var(--color-light);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100vh;
}

.auth-loading {
  position: relative;
  padding: 0;
  background: -webkit-gradient(linear, left top, right top, from(rgba(0, 51, 102, 0.92)), to(rgba(0, 86, 147, 0.92)));
  background: linear-gradient(to right, rgba(0, 51, 102, 0.92) 0%, rgba(0, 86, 147, 0.92) 100%);
  color: var(--color-light);
  overflow: hidden;
}

.auth-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/public/images/ji-logo.png") center/45% no-repeat;
  opacity: 0.65;
  pointer-events: none;
}

.auth-loading > * {
  position: relative;
}

.auth-loading__logo {
  position: absolute;
  inset: 50% auto auto 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: min(38vw, 360px);
  opacity: 0.22;
  pointer-events: none;
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
}

p {
  font-size: 18px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: inherit;
  text-wrap: balance;
}

h1,
h2 {
  font-size: 18px;
}

h3 {
  font-size: 14px;
}

h5 {
  font-size: 12px;
}

pre {
  font-size: 20px;
}

.loading-page-p {
  color: var(--color-light);
}

.home-container {
  margin-top: 40px;
}

.announcement-modal-header {
  color: var(--color-dark);
}

.footer-text {
  font-size: 10px;
  color: var(--color-dark);
}

.login-card {
  /* box-shadow: 2px 2px 5px lightgray; */
  width: 400px;
  padding: 15px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  margin: 0 15px 0 0;
  background-color: #ffffff;
  color: var(--color-dark);
}

.card {
  /* box-shadow: 2px 2px 5px lightgray; */
  width: 100%;
  padding: 15px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  margin: 0 15px 0 0;
  background-color: #ffffff;
  color: var(--color-dark);
}

.home-card {
  /* box-shadow: 2px 2px 5px lightgray; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  width: 250px;
  border-color: rgba(255, 255, 255, 0.4);
  margin: 0 5px 0 0;
  color: var(--color-light);
}

.home-card h2 {
  font-size: 18px;
  color: inherit;
  text-align: center;
}

.weather-widget {
  background-color: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 16px;
  color: var(--color-light);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.8rem;
  padding: 1rem;
  margin-bottom: 1rem;
  -webkit-box-shadow: 0 14px 24px rgba(0, 0, 0, 0.16);
          box-shadow: 0 14px 24px rgba(0, 0, 0, 0.16);
  min-width: 0;
  max-width: 100%;
}

.weather-widget__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.65rem;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  width: 100%;
}

.weather-widget__current-section {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 210px;
          flex: 0 1 210px;
  min-width: 190px;
}

.weather-widget__forecast-section {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 300px;
          flex: 1 1 300px;
  min-width: 220px;
  max-width: 100%;
}

.weather-widget__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
}

.weather-widget__current {
  display: grid;
  grid-template-columns: minmax(72px, auto) 1fr;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.65rem;
}

.weather-widget__title-wrap {
  grid-column: 1/-1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.2rem;
}

.weather-widget__current-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.weather-widget__current-temp {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.16rem;
  font-size: 1.9rem;
  font-weight: 600;
}

.weather-widget__current-temp-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25rem;
}

.weather-widget__current-meta {
  display: grid;
  gap: 0.5rem;
  width: 100%;
}

.weather-widget__temp-unit {
  font-size: 0.85rem;
  opacity: 0.85;
  margin-top: 0.3rem;
}

.weather-widget__current-details {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.25rem 0.75rem;
}

.weather-widget__current-details li {
  display: grid;
  grid-template-columns: -webkit-max-content auto;
  grid-template-columns: max-content auto;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 0.18rem;
     -moz-column-gap: 0.18rem;
          column-gap: 0.18rem;
  font-size: 0.65rem;
}

.weather-widget__current-details .label {
  color: rgba(255, 255, 255, 0.7);
}

.weather-widget__current-details .value {
  justify-self: start;
}

.weather-widget__summary {
  font-size: 0.72rem;
  font-weight: 500;
  margin: 0;
}

.weather-widget__forecast {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.55rem;
  height: 100%;
  width: 100%;
}

.weather-widget__forecast-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.45rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  width: 100%;
  min-width: 0;
}

.weather-widget__forecast-item {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.35rem;
  font-size: 0.68rem;
  padding: 0.6rem;
  border-radius: 9px;
  background-color: rgba(255, 255, 255, 0.08);
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 70px;
}

.weather-widget__forecast-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.weather-widget__forecast-item:last-child {
  border-bottom: none;
}

.weather-widget__forecast-date {
  font-weight: 600;
  font-size: 0.78rem;
}

.weather-widget__forecast-summary {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.3;
}

.weather-widget__forecast-temps {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.2rem;
  font-weight: 600;
  white-space: nowrap;
}

.weather-widget__forecast-temps .high {
  color: #f6c445;
}

.weather-widget__forecast-temps .low {
  color: rgba(255, 255, 255, 0.65);
}

.weather-widget__forecast-precip {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.7);
  grid-column: 1/-1;
}

.weather-widget__error {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.7);
}

.weather-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 56px;
  height: 56px;
}

.weather-icon svg {
  width: 100%;
  height: 100%;
}

.weather-icon--clear,
.weather-icon--partly-cloudy {
  color: #ffd166;
}

.weather-icon--cloudy {
  color: #f1f1f1;
}

.weather-icon--rain {
  color: #4dabf7;
}

.weather-icon--snow {
  color: #9be7ff;
}

.weather-icon--storm {
  color: #ffb347;
}

.weather-icon--fog {
  color: #cbd5f5;
}

.weather-icon--unknown {
  color: rgba(255, 255, 255, 0.75);
}

.weather-widget__forecast-icon .weather-icon {
  width: 26px;
  height: 26px;
}

@media (max-width: 768px) {
  .weather-widget {
    padding: 0.85rem;
  }
  .weather-widget__body {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .weather-widget__current-section,
  .weather-widget__forecast-section {
    min-width: 0;
  }
  .weather-widget__forecast-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
  .weather-widget__forecast-item {
    width: 100%;
    max-width: none;
    min-width: 0;
  }
  .weather-widget__forecast-temps {
    font-size: 0.78rem;
  }
  .weather-widget__current {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .weather-widget__current-meta {
    justify-items: center;
  }
  .weather-widget__current-details li {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .weather-widget__current-details {
    grid-template-columns: 1fr;
  }
  .weather-widget__forecast-icon .weather-icon {
    width: 24px;
    height: 24px;
  }
  .weather-widget__forecast-summary,
  .weather-widget__forecast-date,
  .weather-widget__forecast-icon {
    grid-column: 1/-1;
  }
}
.report-card {
  /* box-shadow: 2px 2px 5px lightgray; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  width: 200px;
  padding: 15px;
  border-color: rgba(255, 255, 255, 0.4);
  margin: 0 0 0 0;
  background-color: rgba(0, 0, 0, 0.35);
  color: var(--color-light);
}

.home-card--reports {
  background-color: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 16px;
  padding: 1rem;
  gap: 0.75rem;
  -webkit-box-shadow: 0 14px 24px rgba(0, 0, 0, 0.16);
          box-shadow: 0 14px 24px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(8px);
}

.home-card__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-light);
  text-align: left;
}

.home-card__links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.6rem;
}

.report-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  color: var(--color-light);
  text-decoration: none;
  -webkit-transition: background-color 150ms ease, border-color 150ms ease, -webkit-box-shadow 150ms ease, -webkit-transform 150ms ease;
  transition: background-color 150ms ease, border-color 150ms ease, -webkit-box-shadow 150ms ease, -webkit-transform 150ms ease;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease, -webkit-box-shadow 150ms ease, -webkit-transform 150ms ease;
  backdrop-filter: blur(6px);
}

.report-link:hover,
.report-link:focus {
  background-color: rgba(0, 0, 0, 0.45);
  border-color: rgba(255, 255, 255, 0.45);
  -webkit-box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
          box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
  color: var(--color-light);
  text-decoration: none;
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
}

.report-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 3px;
}

.report-link:active {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16);
          box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16);
}

.report-link__text {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.35;
  text-wrap: balance;
}

.ji-label {
  font-size: 14px;
  color: var(--color-light);
  text-wrap: balance;
}

.ji-toggle-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  text-wrap: balance;
  margin: 0;
}

.ji-toggle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: left;
      -ms-flex-align: left;
          align-items: left;
  margin: 0;
}

.navbar-nav {
  font-size: 14px;
}

.navbar-nav .form-check {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.btn-primary {
  background-color: #003366;
  border-color: #003366;
}

.embed-container {
  position: relative;
  padding-bottom: 1em;
  overflow: hidden;
  margin-top: 40px;
  /* max-width: 100%; */
  height: 95vh;
}

footer {
  background-color: #f8f9fa;
  padding: 0.5rem 0;
  margin-top: auto;
  color: var(--color-dark);
}

.modal-lg-custom {
  max-width: 85% !important;
  background-color: #003366;
}

.sidebar {
  background-color: #f8f9fa;
  padding: 15px;
  border-left: 1px solid #dee2e6;
  height: 100%;
  overflow-y: auto;
  color: var(--color-dark);
}

.d-none {
  display: none !important;
}

.report-table {
  background-color: rgba(0, 0, 0, 0.5);
  color: var(--color-light);
  font-family: var(--font-primary);
}
.report-table table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: none;
  background-color: rgba(0, 0, 0, 0.5);
}
.report-table th {
  color: var(--color-light);
  font-weight: bold;
  background-color: rgba(0, 0, 0, 0);
}
.report-table tr td {
  background-color: rgba(0, 0, 0, 0);
  color: var(--color-light);
}
.report-table tr:hover {
  background-color: rgb(39, 39, 39);
}
.report-table .form-control-plaintext {
  color: var(--color-light);
}

.report-title-banner {
  padding: 5px;
  text-align: left;
  margin-left: 10px;
}
.report-title-banner h1 {
  font-size: 24px;
}

.report-title {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 0.1rem;
  margin-bottom: 0;
}
.report-title h1 {
  font-size: 10px;
}

@media only screen and (max-width: 600px) {
  h1 {
    font-size: 24px;
  }
  h2 {
    font-size: 18px;
  }
  h3 {
    font-size: 14px;
  }
  pre {
    font-size: 16px;
  }
}
/* Users page: Subscriptions UI overrides */
#sharepoint-subscription-form label.form-label,
#sharepoint-subscription-form .form-label,
#sharepoint-subscription-form .form-text,
#sharepoint-subscription-form .form-select,
#sharepoint-subscription-form .form-control {
  color: white !important;
}

#sharepoint-subscription-form .form-control {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: var(--color-light) !important;
}

/* Ensure help text below Frequency is white */
#sharepoint-subscription-form .col-12 .form-text {
  color: white !important;
}

#subscriptions-list .list-group-item {
  color: white !important;
  background-color: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.2);
}

#subscriptions-list .btn-outline-danger {
  color: white !important;
  border-color: white !important;
}

#subscriptions-list .btn-outline-danger:hover {
  color: white !important;
  background-color: transparent !important;
  border-color: white !important;
}

/* Improve readability for dropdown (select) text */
#sharepoint-subscription-form .form-select,
#sharepoint-subscription-form select.form-select {
  color: #212529 !important; /* dark text for contrast */
  background-color: #ffffff !important; /* white background for the closed control */
  border-color: #ced4da !important; /* neutral bootstrap-like border */
}

/* Try to ensure options in the native dropdown are dark-on-light where supported */
#sharepoint-subscription-form .form-select option {
  color: #212529 !important;
  background-color: #ffffff !important;
}

/* Style date and time on home page for readability */
#home-local-date-time {
  color: #ffffff !important;
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* Admin pages: account for fixed navbar */
.admin-page {
  padding-top: 4.5rem;
  padding-bottom: 1.5rem;
}

/* Admin Landing: ensure card text is dark for readability */
.admin-landing .card,
.admin-landing .card p,
.admin-landing .card small,
.admin-landing .card label,
.admin-landing .card a,
.admin-landing .card h1,
.admin-landing .card h2,
.admin-landing .card h3,
.admin-landing .card h4,
.admin-landing .card h5,
.admin-landing .card h6 {
  color: #212529 !important;
}

/* Admin Email Tools: diagnostics card readability and width control */
.admin-email .card p,
.admin-email .card label,
.admin-email .card h3 {
  color: #212529 !important;
}

.admin-email .template-card-col {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  max-width: 100%;
}

@media (min-width: 992px) {
  .admin-email .template-card-col {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 60%;
            flex: 0 0 60%;
    max-width: 60%;
  }
}
.template-card {
  color: #000 !important;
  stroke: #000 !important;
  width: 100% !important;
}

.admin-email .template-card,
.admin-email .card {
  width: 100% !important;
}

.admin-email .ql-editor,
.admin-email .ql-editor * {
  color: #000 !important;
}

.admin-email .ql-toolbar button,
.admin-email .ql-toolbar .ql-picker,
.admin-email .ql-toolbar .ql-stroke {
  color: #000 !important;
  stroke: #000 !important;
}

.admin-email .table-responsive {
  overflow-x: auto;
}

.admin-email .report-table {
  width: 100%;
}

.admin-email .report-table th,
.admin-email .report-table td {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Keep button text white on Admin Landing cards */
.admin-landing .card .btn,
.admin-landing .card a.btn {
  color: #ffffff !important;
}

/* Quill content rendering styles */
.ql-editor {
  line-height: 1.6;
  font-size: 1rem;
  color: #212529;
  word-break: break-word;
}

.ql-editor p {
  margin: 0 0 0.75rem;
}

.ql-editor h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.ql-editor h2 {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}

.ql-editor h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.ql-editor h4 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.ql-editor h5 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.ql-editor h6 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.ql-editor ol,
.ql-editor ul {
  padding-left: 1.5em;
  margin: 0 0 0.75rem;
}

.ql-editor ol li {
  list-style-type: decimal;
}

.ql-editor ul li {
  list-style-type: disc;
}

.ql-editor li + li {
  margin-top: 0.35rem;
}

.ql-editor a {
  color: #0d6efd;
  text-decoration: underline;
}

.ql-editor blockquote {
  border-left: 4px solid rgba(0, 0, 0, 0.1);
  margin: 0 0 0.75rem;
  padding-left: 1rem;
  color: #6c757d;
}

.ql-editor pre,
.ql-editor code {
  background-color: rgba(27, 31, 35, 0.05);
  border-radius: 4px;
  font-family: "Courier New", Courier, monospace;
  padding: 0.4rem 0.6rem;
  display: block;
  overflow-x: auto;
}

.ql-editor .ql-align-left {
  text-align: left;
}

.ql-editor .ql-align-center {
  text-align: center;
}

.ql-editor .ql-align-right {
  text-align: right;
}

.ql-editor .ql-align-justify {
  text-align: justify;
}

.ql-editor .ql-direction-rtl {
  direction: rtl;
  text-align: right;
}

.ql-editor .ql-indent-1 {
  padding-left: 3em;
}

.ql-editor .ql-indent-2 {
  padding-left: 6em;
}

.ql-editor .ql-indent-3 {
  padding-left: 9em;
}

.ql-editor .ql-indent-4 {
  padding-left: 12em;
}

.ql-editor .ql-indent-5 {
  padding-left: 15em;
}

.ql-editor .ql-indent-6 {
  padding-left: 18em;
}

.ql-editor .ql-indent-7 {
  padding-left: 21em;
}

.ql-editor .ql-indent-8 {
  padding-left: 24em;
}

.ql-editor .ql-font-serif {
  font-family: "Georgia", "Times New Roman", serif;
}

.ql-editor .ql-font-monospace {
  font-family: "Courier New", Courier, monospace;
}

.ql-editor .ql-size-small {
  font-size: 0.75em;
}

.ql-editor .ql-size-large {
  font-size: 1.5em;
}

.ql-editor .ql-size-huge {
  font-size: 2.5em;
}

.ql-editor .ql-color-white {
  color: #ffffff;
}

.ql-editor .ql-color-red {
  color: #e60000;
}

.ql-editor .ql-color-orange {
  color: #ff9900;
}

.ql-editor .ql-color-yellow {
  color: #ffff00;
}

.ql-editor .ql-color-green {
  color: #008a00;
}

.ql-editor .ql-color-blue {
  color: #0066cc;
}

.ql-editor .ql-color-purple {
  color: #993399;
}

.ql-editor .ql-color-pink {
  color: #ff66cc;
}

.ql-editor .ql-color-brown {
  color: #b45f06;
}

.ql-editor .ql-color-grey {
  color: #999999;
}

.ql-editor .ql-color-black {
  color: #000000;
}

.ql-editor .ql-background-white {
  background-color: #ffffff;
}

.ql-editor .ql-background-red {
  background-color: #f8d7da;
}

.ql-editor .ql-background-orange {
  background-color: #ffe5b4;
}

.ql-editor .ql-background-yellow {
  background-color: #fff3cd;
}

.ql-editor .ql-background-green {
  background-color: #d1e7dd;
}

.ql-editor .ql-background-blue {
  background-color: #cfe2ff;
}

.ql-editor .ql-background-purple {
  background-color: #e2d9f3;
}

.ql-editor .ql-background-pink {
  background-color: #f8d3e0;
}

.ql-editor .ql-background-brown {
  background-color: #e5d5c3;
}

.ql-editor .ql-background-grey {
  background-color: #f1f3f5;
}

.ql-editor .ql-background-black {
  background-color: #212529;
  color: #ffffff;
}

.ql-editor .ql-background-white,
.ql-editor .ql-background-red,
.ql-editor .ql-background-orange,
.ql-editor .ql-background-yellow,
.ql-editor .ql-background-green,
.ql-editor .ql-background-blue,
.ql-editor .ql-background-purple,
.ql-editor .ql-background-pink,
.ql-editor .ql-background-brown,
.ql-editor .ql-background-grey,
.ql-editor .ql-background-black {
  padding: 0.1rem 0.2rem;
  border-radius: 0.25rem;
}

.ql-editor .ql-direction-rtl .ql-align-left {
  text-align: right;
}

.weather-widget__title {
  font-size: 13px;
  margin: 0;
}

.weather-widget__updated {
  margin: 0;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.65);
}

.welcome-widget__current {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
}

.welcome-widget {
  background-color: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 16px;
  color: var(--color-light);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.8rem;
  padding: 1rem;
  margin-bottom: 1rem;
  -webkit-box-shadow: 0 14px 24px rgba(0, 0, 0, 0.16);
          box-shadow: 0 14px 24px rgba(0, 0, 0, 0.16);
}

.welcome-widget__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.6rem;
  height: 100%;
}

.welcome-widget__current-section {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.welcome-widget__current {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.6rem;
  width: 100%;
}

.welcome-widget__title-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.3rem;
}

.welcome-widget__title {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.15;
  text-wrap: normal;
}

.welcome-widget__timestamp {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
}

.welcome-widget__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.35rem;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

.welcome-widget__greeting {
  margin: 0;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.92);
}

.welcome-widget__subtext,
.welcome-widget__last-login {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.72);
}