.db-button.db-button-primary.ms-1.box-shadow.w-inline-block {
    background-color: #6366F1;
    box-shadow: 0px 1px 2px 0px rgba(99, 102, 241, 0.15), 0px 2px 4px 0px rgba(99, 102, 241, 0.20);
}
.db-button.db-button-primary.ms-1.box-shadow.w-inline-block:hover {
    box-shadow: none;
}
a.db-button.db-button-primary.ms-1.box-shadow.w-inline-block.switch-account {
    background-color: #3898ec;
    box-shadow: 0px 1px 2px 0px rgba(56, 152, 236, 0.15), 0px 2px 4px 0px rgba(56, 152, 236, 0.20);
}
a.db-button.db-button-primary.ms-1.box-shadow.w-inline-block.switch-account:hover {
    box-shadow: none;
}
.top-panel-user-name {
    font-size: 12px;
}

.db-mail-single-item > img,
.db-add-link-modal-block .db-primary-text > img {
    width: 32px;
    border-radius: 4px;
    overflow: hidden;
    height: 32px;
    object-fit: cover;
    object-position: center center;
}
.bb-modal-icons-wrapper {
    display: flex;
}
.bb-panel-block-categories {
    width: 150px;
    padding: 0;
    margin: 0;
    list-style: none;
    max-height: 500px;
    overflow: auto;
}
.bb-panel-block-categories {
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-y: scroll; 
}
.bb-panel-block-categories::-webkit-scrollbar {
    display: none;
}

.bb-panel-block-cat-item {
    display: block;
    margin-bottom: 1em;
    padding: 0;
}
.bb-panel-block-cat-item-link {
    font-size: 12px;
    font-weight: 400;
    display: block;
}
.bb-panel-block-cat-item-link.active{
    font-weight: 600;
    color: #0099FF;
}
.bb-icons-catname {
    font-size: 12px;
    font-weight: 600;
    background-color: transparent;
    color: #222;
}
.db-modal-input-field::placeholder {
    color: #999;
}
.db-modal-text,
.db-modal-text * {
    font-family: 'Inter', sans-serif;
}
.db-panel-item-block {
    padding-top: 10px;
    padding-bottom: 10px;
}
.db-panel-item-block.add-extra-padding {
    padding-bottom: 10px;
}

.db-details-block.my-block {
    padding: 15px 0px;
    margin-top: 20px;
    margin-bottom: 0px;
    max-width: 600px;
    width: 100%;
    border-radius: 0px;
    border: none;
    background: transparent;
    box-shadow: none;
}
.db-details-block.my-block .db-page-top-block {
    border: none;
    margin-bottom: 0px;
    padding-bottom: 0px;
    gap: 20px;
}
.bb-section-wrapper.my-block {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}
.db-details-block.my-block .db-field-label-text {
    margin-bottom: 0px;
    font-weight: normal;
    text-align: right;
    max-width: 40%;
}
.db-dropdown-link-text {
    white-space: nowrap;
}
.meg-controls-dropdown-list {
    width: auto;
}
.meg-controls-dropdown-list a[data-src="#db-delete-modal"]:hover {
    background-color: #f36;
    color: var(--white);
}

.w-100px {
    width: 100px;
}
.text-center {
    text-align: center;
}
.template-meg-item:hover .meg-template-hover-wrapper,
.old-email-item:hover .old-email-hover-wrapper {
    opacity: 1;
}
.meg-template-hover-wrapper,
.old-email-hover-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(255, 255, 255, 1);
    z-index: 2;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    transition: opacity 300ms ease;
    opacity: 0;
}

.template-meg-item .db-button,
.old-email-item .db-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px !important;
}

.meg-template-hover-grid,
.old-email-hover-grid {
    padding: 20px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.template-meg-item .meg-img-wrapper,
.template-meg-item .meg-img-block,
.old-email-item .meg-img-wrapper,
.old-email-item .meg-img-block {
    position: relative;
    display: block;
    overflow: hidden;
}

.old-email-hover-text {
    padding: 0px 5px 10px 5px; 
    text-align: center; 
    font-size: 12px;
}


.user-avatar.what-s-new {
    background: linear-gradient(180deg, #8170EF, #29379E);
    transition: background 0.3s ease-in-out;
  }
  
  .what-s-new-link:hover .user-avatar.what-s-new {
    background: linear-gradient(0deg, #8170EF, #29379E);
  }


  .db-book-panel {
    height: 50px;
    background: linear-gradient(269deg, var(--Brillian-Persian, #8170EF) 2.05%, var(--Strong-Saphire, #29379E) 50.62%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0px 10px;
  }
  .db-book-panel .db-book-panel-text {
    color: #fff;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 15px;
  }
  .db-book-panel-button {
    text-decoration: none;
    color: #333;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 24px;
    padding: 0px 11px;
    border-radius: 6.4px;
    background: #F3F3F3;
  }

  .db-button.db-button-grey {
    color: #333;
    background-color: #F3F3F3;
    transition: all 300ms ease;
  }
  .db-button.db-button-grey:hover {
    background-color: #E0E0E0;
  }

/* School Newsletter logo, for school accounts (include/top_panel.php).

   Sized here rather than on the element because this stylesheet loads on every page, while the
   school ones only load inside the School section - an inline width would be the only thing
   holding the logo up on the dashboard.

   The artwork is 468x50 against Mailerly's 144x33, so it needs its own width: at 260px it stands
   about 28px tall, which sits right next to the header's other items. */
.dashboard-logo-img.is-school {
    width: 260px;
    max-width: 100%;
    height: auto;
}

/* ---------------------------------------------------------------------------
   Side panel: collapse/expand by hand (include/left.php, button #db-nav-toggle).

   Only above 991px. Below that Webflow's own data-collapse turns the panel into
   a menu button, and a second mechanism fighting it would be two ways to open
   the same thing.

   Collapsed leaves a 24px rail rather than nothing: it keeps the button clear of
   the page content instead of floating it over the first column, and it reads as
   an edge you can bring back.

   The nav is hidden with visibility, not display, so the width transition still
   runs and the button - a sibling, not a child of the nav - stays put.
   --------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .db-navbar-left-panel {
    transition: width 200ms ease;
  }
  .db-nav-toggle {
    position: absolute;
    top: 14px;
    right: -11px;
    z-index: 5;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    background-color: #fff;
    color: #666;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 150ms ease, border-color 150ms ease, right 200ms ease;
  }
  .db-nav-toggle:hover {
    border-color: #09f;
    color: #09f;
  }
  .db-nav-toggle:focus-visible {
    outline: 2px solid #09f;
    outline-offset: 2px;
  }
  .db-nav-toggle-icon {
    display: flex;
    transition: transform 200ms ease;
  }

  html.nav-collapsed .db-navbar-left-panel {
    width: 24px;
    min-width: 24px;
  }
  html.nav-collapsed .db-navbar-block {
    visibility: hidden;
    opacity: 0;
  }
  html.nav-collapsed .db-nav-toggle {
    right: -12px;
  }
  /* Points the way it will move: left to close, right to reopen. */
  html.nav-collapsed .db-nav-toggle-icon {
    transform: rotate(180deg);
  }
}

/* No manual collapse below the breakpoint - Webflow's menu button owns it there. */
@media (max-width: 991px) {
  .db-nav-toggle { display: none; }
}