/**
 * TOMM tablet + laptop overlay
 *
 * Physical targets (landscape 16:10):
 *   Tab S10 Lite  2112x1320  → CSS ~1056x660 (@2x) or ~1408x880 (@1.5x)
 *   Tab S10 FE    2304x1440  → CSS ~1152x720 (@2x) or ~1536x960 (@1.5x)
 *   Slightly lower 10" / 16:10 and laptops 1366–1680
 *
 * Scoped to Login, Search & Add, Notes Portal, Assessment.
 * Desktop composition is kept; spacing and overflow are tightened.
 */

/* ==========================================================================
   1. Tablet landscape + slightly smaller 10" / 16:10
   ========================================================================== */
@media screen and (min-width: 980px) and (max-width: 1400px) {

  /* ----- Login ----- */
  body.login #login {
    width: 40% !important;
    top: 7% !important;
    max-width: 560px !important;
  }

  body.login .background {
    height: 64% !important;
  }

  body.login .loginnav {
    bottom: 63.5% !important;
    max-height: 56px !important;
    height: 56px !important;
  }

  body.login .loginlogo {
    height: 8.5vh !important;
  }

  body.login .loginlabel {
    top: calc(5.5vh + 88px) !important;
    font-size: 16px !important;
  }

  body.login .forgotpassword {
    top: calc(5.5vh + 112px) !important;
  }

  body.login #loginform p label input,
  body.login #lostpasswordform p label input,
  body.login #resetpassform p label input {
    height: 5.4vh !important;
    padding: 8px 24px !important;
    font-size: 13px !important;
  }

  body.login .login form {
    margin-top: 4vh !important;
  }

  body.login #login .submit,
  body.login #lostpasswordform .submit,
  body.login #resetpassform .submit {
    width: 84px !important;
    height: 84px !important;
  }

  body.login .halfcircle {
    width: 101% !important;
  }

  body.login .browsersupport {
    right: 12px !important;
    bottom: 8px !important;
    transform: scale(0.78) !important;
    transform-origin: bottom right !important;
  }

  body.login .notif-wrapper {
    width: 580px !important;
    padding: 10px !important;
  }

  body.login .person-ico {
    width: 72px !important;
    height: 72px !important;
  }

  body.login .tomminfo {
    top: 36% !important;
  }

  body.login .copyright-login {
    width: 90% !important;
  }

  /* ----- Search & Add ----- */
  /* Clear/edit hang at right:100% of the first cell — keep a left gutter.
     Result rows (.hoverstate) are in the same table as the form; they were
     painting below the fold and getting clipped by .pt-page overflow:hidden. */
  .pt-page.pt-page-1 {
    overflow: hidden !important;
  }

  .pt-page.pt-page-1 #entry_container .container {
    padding-top: 12px !important;
  }

  #entry_container {
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
    width: 100% !important;
    position: relative !important;
  }

  #entry_container .background {
    z-index: 0 !important;
    pointer-events: none !important;
  }

  #entry_container .container {
    position: relative !important;
    z-index: 2 !important;
    width: 75% !important;
    max-width: none !important;
    margin: 12px auto 8px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  #entry_container .indicatorsearch .maintitle,
  #entry_container h2.maintitle {
    font-size: 18px !important;
    margin-bottom: 0.4em !important;
  }

  #entry_container .alert-new {
    width: 100% !important;
    max-width: 100% !important;
    gap: 10px !important;
    padding: 8px 12px !important;
    flex-wrap: wrap !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    align-items: center !important;
    margin-bottom: 8px !important;
  }

  #entry_container .alert-new img {
    scale: 1 !important;
    max-height: 36px !important;
    max-width: 36px !important;
    flex-shrink: 0 !important;
  }

  #entry_container .alert-new-header {
    width: auto !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    height: auto !important;
  }

  .searchpage #formentries,
  #entry_container #formentries {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /* Thead + form always fit; only scroll once result rows exist. */
  #entry_container .resultsscroll {
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    padding-left: 0 !important;
    position: relative !important;
    z-index: 3 !important;
  }

  #entry_container .resultsscroll:has(.hoverstate) {
    max-height: calc(100vh - 160px) !important;
    min-height: 0 !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #entry_container .hoverstate,
  #entry_container tbody tr.hoverstate {
    display: table-row !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    position: relative !important;
    z-index: 2 !important;
  }

  #entry_container .hoverstate td {
    height: auto !important;
    line-height: 1.3 !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  #entry_container #clear-btn-entry.edit,
  #entry_container #edit-btn-entry.edit {
    transform: translateX(18%) !important;
    -webkit-transform: translateX(18%) !important;
  }

  #entry_container #entry_result_table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  #entry_container .table thead th {
    font-size: 12px !important;
    padding-top: 10px !important;
    padding-bottom: 8px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #entry_container #formEntry input,
  #entry_container #formEntry select,
  #entry_container .formrow input,
  #entry_container .formrow select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #entry_container .formrow td:first-child {
    padding-left: 8px !important;
  }

  #entry_container .adminbar,
  .pt-page-1 .adminbar {
    right: 28px !important;
  }

  /* ----- Notes Portal ----- */
  .notespopup .notescontainer,
  .notescontainer {
    margin-left: 1.5% !important;
    width: 97% !important;
    top: 16px !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    padding-bottom: 0 !important;
    max-height: calc(100vh - 24px) !important;
    overscroll-behavior-x: none !important;
  }

  .notespopup {
    overflow: hidden !important;
    overflow-x: hidden !important;
    overscroll-behavior-x: none !important;
  }

  .notespopup .closenotes.closingnotes {
    top: 30px !important;
    right: 2% !important;
    width: 28px !important;
    z-index: 20 !important;
  }

  .notespopup .notescontainer .delete-draft-btn {
    top: 8px !important;
    right: calc(1.5% + 36px) !important;
  }

  /* Overlapping 70% cards. Tap the peeking pane or swipe to pull it forward. */
  .notespopup .note-wrapper,
  .notescontainer .note-wrapper {
    position: relative !important;
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
    height: calc(100vh - 52px) !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    gap: 0 !important;
    touch-action: manipulation !important;
    overscroll-behavior-x: none !important;
  }

  .notespopup .note-wrapper > .left-block,
  .notespopup .note-wrapper > .right-block,
  .notescontainer .note-wrapper > .left-block,
  .notescontainer .note-wrapper > .right-block {
    position: absolute !important;
    top: 8px !important;
    bottom: 8px !important;
    width: 70% !important;
    max-width: 70% !important;
    flex: none !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px !important;
    border-radius: 18px !important;
    background-color: #fff !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    touch-action: manipulation !important;
    transform-origin: center center;
    transition:
      transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
      box-shadow 0.35s ease,
      filter 0.35s ease;
  }

  .notespopup .note-wrapper > .left-block,
  .notescontainer .note-wrapper > .left-block {
    left: 0 !important;
    right: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    background-clip: padding-box !important;
  }

  .notespopup .note-wrapper > .left-block .left-top,
  .notescontainer .note-wrapper > .left-block .left-top {
    border-radius: 18px 18px 0 0 !important;
  }

  .notespopup .note-wrapper > .left-block .scroll-block,
  .notescontainer .note-wrapper > .left-block .scroll-block {
    overflow-x: hidden !important;
    padding: 28px 10px 8px !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  .notespopup .note-wrapper > .left-block .simplebar-wrapper,
  .notespopup .note-wrapper > .left-block .simplebar-mask,
  .notespopup .note-wrapper > .left-block .simplebar-content-wrapper,
  .notescontainer .note-wrapper > .left-block .simplebar-wrapper,
  .notescontainer .note-wrapper > .left-block .simplebar-mask,
  .notescontainer .note-wrapper > .left-block .simplebar-content-wrapper {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  .notespopup .note-wrapper > .left-block .button-wrapper,
  .notescontainer .note-wrapper > .left-block .button-wrapper {
    padding: 0 10px 10px !important;
    box-sizing: border-box !important;
    border-radius: 0 0 18px 18px !important;
  }

  .notespopup .note-wrapper > .right-block,
  .notescontainer .note-wrapper > .right-block {
    left: auto !important;
    right: 0 !important;
    padding: 12px 10px 10px 12px !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .notespopup .note-wrapper > .right-block > .accordion,
  .notescontainer .note-wrapper > .right-block > .accordion {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 88px !important;
    box-sizing: border-box !important;
  }

  /* Pin upload/save to the card (transform on the pane makes fixed = card-local). */
  .notespopup .note-wrapper > .right-block .form-wrap.attach-to-dd-wrapper,
  .notescontainer .note-wrapper > .right-block .form-wrap.attach-to-dd-wrapper,
  .notespopup .note-wrapper > .right-block .safety-column .form-wrap.form-bdr,
  .notescontainer .note-wrapper > .right-block .safety-column .form-wrap.form-bdr {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 8px !important;
    width: auto !important;
    z-index: 16 !important;
    background: #fff !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    box-shadow: 0 -10px 16px rgba(255, 255, 255, 0.95) !important;
  }

  .notespopup .note-wrapper > .right-block .flex-align-bottom,
  .notescontainer .note-wrapper > .right-block .flex-align-bottom {
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: flex-end !important;
  }

  .notespopup .note-wrapper:not(.notes-front-right) > .left-block,
  .notescontainer .note-wrapper:not(.notes-front-right) > .left-block,
  .notespopup .note-wrapper.notes-front-right > .right-block,
  .notescontainer .note-wrapper.notes-front-right > .right-block {
    z-index: 5 !important;
    transform: translate3d(0, 0, 0) scale(1);
    box-shadow: 8px 10px 22px rgba(0, 0, 0, 0.16) !important;
    filter: none;
    cursor: default !important;
  }

  .notespopup .note-wrapper:not(.notes-front-right) > .right-block,
  .notescontainer .note-wrapper:not(.notes-front-right) > .right-block,
  .notespopup .note-wrapper.notes-front-right > .left-block,
  .notescontainer .note-wrapper.notes-front-right > .left-block {
    z-index: 2 !important;
    transform: translate3d(0, 0, 0) scale(0.985);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    filter: brightness(0.96);
    cursor: pointer !important;
  }

  .notespopup .note-wrapper.notes-card-anim > .left-block,
  .notespopup .note-wrapper.notes-card-anim > .right-block,
  .notescontainer .note-wrapper.notes-card-anim > .left-block,
  .notescontainer .note-wrapper.notes-card-anim > .right-block {
    animation: none;
  }

  .notespopup .note-wrapper:not(:has(> .right-block)) > .left-block,
  .notescontainer .note-wrapper:not(:has(> .right-block)) > .left-block {
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
    cursor: default !important;
  }

  /*
    Presenting factors (.pres-drop) is position:fixed, but the compose card's
    transform makes "fixed" mean "this 70% pane". While open, drop the transform
    so the picker covers the whole notes page.
  */
  .notespopup.pres-drop-open .note-wrapper,
  .notescontainer.pres-drop-open .note-wrapper {
    overflow: visible !important;
    z-index: 30 !important;
  }

  .notespopup.pres-drop-open .note-wrapper > .left-block,
  .notespopup.pres-drop-open .note-wrapper > .right-block,
  .notescontainer.pres-drop-open .note-wrapper > .left-block,
  .notescontainer.pres-drop-open .note-wrapper > .right-block {
    transform: none !important;
    filter: none !important;
    overflow: visible !important;
  }

  .notespopup.pres-drop-open .note-wrapper > .right-block,
  .notescontainer.pres-drop-open .note-wrapper > .right-block {
    z-index: 32 !important;
  }

  .notespopup.pres-drop-open .pres-drop,
  .notescontainer.pres-drop-open .pres-drop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 40 !important;
  }

  .notespopup.pres-drop-open .pres-drop .faded-bg,
  .notescontainer.pres-drop-open .pres-drop .faded-bg {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
  }

  .notespopup.pres-drop-open .pres-drop .pres-section,
  .notescontainer.pres-drop-open .pres-drop .pres-section {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
  }

  .notespopup.pres-drop-open .pres-drop .pres-display,
  .notescontainer.pres-drop-open .pres-drop .pres-display {
    width: 100% !important;
    height: 100% !important;
    padding: 24px !important;
    box-sizing: border-box !important;
  }

  .note-wrapper .followup-actions {
    min-width: 0 !important;
    width: 160px !important;
    margin-left: 4px !important;
    flex-shrink: 1 !important;
  }

  .note-wrapper .followup-actions .action-wrapper {
    height: 40px !important;
    padding: 6px 0 6px 8px !important;
  }

  .notescontainer .left-block .scroll-block,
  .note-wrapper .left-block .scroll-block {
    max-height: calc(100vh - 220px) !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .notes-filters {
    height: auto !important;
    min-height: 48px !important;
    padding-left: 56px !important;
    padding-right: 8px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    overflow: visible !important;
  }

  .filter-title {
    font-size: 15px !important;
    margin-right: 8px !important;
  }

  .filter-ico {
    width: 42px !important;
    height: 28px !important;
  }

  .filter-input input {
    width: 118px !important;
    height: 28px !important;
  }

  input.filter-search-input {
    width: 108px !important;
    margin-right: 6px !important;
  }

  .filter-right {
    position: relative !important;
    right: auto !important;
    margin-left: auto !important;
  }

  .note-wrapper .left-block .filter-info,
  .note-wrapper .left-block .view-preference {
    width: auto !important;
    min-width: 88px !important;
  }

  .notescontainer li[data-field="presenting-factors"] .ts-dropdown .ts-dd-content,
  .notescontainer .left-block .filter-content .ts-dropdown.filter-presenting-factors-dropdown .ts-dd-content {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }

  /* ----- Assessment ----- */
  /* Use most of the tablet width, but keep domain tabs and score circles
     on one shared column size so the grid stays aligned. Do not wrap the
     SAVE row or shrink the left-hand question labels. */
  .pt-page.pt-page-2 {
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .assess .nav .stripe,
  .assess .nav .assessment-filter,
  .assess .nav .goal-filter,
  .assess .nav .search,
  .assess .nav .search.showbuttons,
  .assess .nav .report-left,
  .assess .nav .bottom {
    display: none !important;
  }

  #assessment-container,
  .assess .fixedelements {
    --ass-col: 52px;
  }

  #assessment-container {
    overflow: visible !important;
    height: auto !important;
    min-height: 100% !important;
  }

  #assessment-container .container {
    width: calc(100% - 84px) !important;
    max-width: none !important;
    margin: -43px 8px 38px 63px !important;
    overflow-x: auto !important;
    padding-left: 46px !important;
  }

  .pt-page-2 h2,
  #assessment-container .maintitle,
  #assessment-container h2.maintitle {
    right: 96px !important;
    top: 12px !important;
    font-size: 18px !important;
  }

  #assessment-container .details {
    width: 100% !important;
    float: none !important;
    box-sizing: border-box !important;
  }

  #assessment-container .details .yp-info,
  .details .yp-info {
    width: 50% !important;
    float: left !important;
    height: 250px !important;
    padding-top: 60px !important;
  }

  #assessment-container .assessment-header-table,
  .assess .fixedelements .assessment-header-table,
  .assess .fixedelements .assessment-header-table.popup {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: calc(var(--ass-col) * 19) !important;
    max-width: none !important;
    margin: 20px 0 12px !important;
    float: none !important;
  }

  .assess .fixedelements .assessment-header-table,
  .assess .fixedelements .assessment-header-table.popup {
    position: fixed !important;
    top: 0 !important;
    left: 109px !important;
    margin-top: 0 !important;
    z-index: 9999 !important;
  }

  #assessment-container .count-1,
  .assess .fixedelements .assessment-header-table .count-1 {
    flex: none !important;
    width: var(--ass-col) !important;
  }

  #assessment-container .count-2,
  .assess .fixedelements .assessment-header-table .count-2 {
    flex: none !important;
    width: calc(var(--ass-col) * 2) !important;
  }

  #assessment-container .count-3,
  .assess .fixedelements .assessment-header-table .count-3 {
    flex: none !important;
    width: calc(var(--ass-col) * 3) !important;
  }

  #assessment-container .count-4,
  .assess .fixedelements .assessment-header-table .count-4 {
    flex: none !important;
    width: calc(var(--ass-col) * 4) !important;
  }

  #assessment-container .count-overall,
  .assess .fixedelements .assessment-header-table .count-overall {
    flex: 0 0 var(--ass-col) !important;
    width: var(--ass-col) !important;
    margin-left: auto !important;
    order: 20 !important;
  }

  #assessment-container .count-overall .ass-children .childrenspan,
  .assess .fixedelements .assessment-header-table .count-overall .ass-children .childrenspan {
    width: 100% !important;
    flex: 1 1 auto !important;
    max-width: none !important;
  }

  #assessment-container .tabledomain .ass-children .childrenspan,
  #assessment-container .ass-children .childrenspan,
  .assess .fixedelements .assessment-header-table .ass-children .childrenspan {
    width: var(--ass-col) !important;
    flex: 0 0 var(--ass-col) !important;
    max-width: var(--ass-col) !important;
  }

  #assessment-container .assessment-header-table .ass-children img,
  .assess .fixedelements .assessment-header-table .ass-children img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
  }

  #assessment-container .assessmentcolours {
    width: calc(var(--ass-col) * 19) !important;
    max-width: none !important;
    transform: translateY(-50%) !important;
    -webkit-transform: translateY(-50%) !important;
  }

  #assessment-container .risk-block {
    width: var(--ass-col) !important;
  }

  #assessment-container .assessmentcolours .overall-risk-block {
    margin-left: auto !important;
    flex: 0 0 var(--ass-col) !important;
    width: var(--ass-col) !important;
  }
}

/* ==========================================================================
   2. Short landscape — Tab Lite/FE @2x and 16:10 laptops
   ========================================================================== */
@media screen and (min-width: 980px) and (max-width: 1600px) and (max-height: 900px) {

  body.login #login {
    top: 5% !important;
  }

  body.login .background {
    height: 60% !important;
  }

  body.login .loginnav {
    bottom: 60% !important;
  }

  body.login .loginlogo {
    height: 7vh !important;
  }

  body.login #loginform p label input,
  body.login #lostpasswordform p label input,
  body.login #resetpassform p label input {
    height: 44px !important;
    min-height: 40px !important;
  }

  body.login #login .submit,
  body.login #lostpasswordform .submit,
  body.login #resetpassform .submit {
    width: 76px !important;
    height: 76px !important;
  }

  body.login .loginlabel {
    top: calc(4.5vh + 78px) !important;
  }

  body.login .forgotpassword {
    top: calc(4.5vh + 100px) !important;
  }

  #entry_container .indicatorsearch .maintitle,
  #entry_container h2.maintitle {
    font-size: 17px !important;
    margin-bottom: 0.4em !important;
  }

  #entry_container .table thead th {
    padding-top: 8px !important;
    padding-bottom: 6px !important;
  }

  .pt-page.pt-page-1 #entry_container .container {
    padding-top: 8px !important;
  }

  #entry_container .resultsscroll:has(.hoverstate) {
    max-height: calc(100vh - 130px) !important;
    overflow-y: auto !important;
  }

  .notescontainer .left-block .scroll-block,
  .note-wrapper .left-block .scroll-block {
    max-height: calc(100vh - 190px) !important;
    min-height: 0 !important;
  }

  .note-wrapper .left-block .left-top {
    height: 68px !important;
    padding: 8px 12px !important;
  }

}

/* ==========================================================================
   3. Laptop tightening below full 1920 desktop
   ========================================================================== */
@media screen and (min-width: 1401px) and (max-width: 1680px) {

  body.login #login {
    width: 38% !important;
    max-width: 600px !important;
  }

  body.login .notif-wrapper {
    width: 640px !important;
  }

  #entry_container .container {
    width: 75% !important;
    margin: 16px auto !important;
  }

  #entry_container .resultsscroll:has(.hoverstate) {
    overflow-x: auto !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 180px) !important;
  }

  #entry_container #entry_result_table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .notespopup .notescontainer,
  .notescontainer {
    margin-left: 2% !important;
    width: 96% !important;
  }

  .note-wrapper .followup-actions {
    min-width: 0 !important;
    width: 220px !important;
  }

  .note-wrapper .left-block,
  .note-wrapper .right-block {
    min-width: 0 !important;
  }

  .notescontainer .left-block .scroll-block,
  .note-wrapper .left-block .scroll-block {
    max-height: calc(100vh - 200px) !important;
  }

}

/* Tighter Tab Lite @2x band — 1056x660 class devices */
@media screen and (min-width: 980px) and (max-width: 1100px) {

  body.login #login {
    width: 44% !important;
  }

  #entry_container .container {
    width: 75% !important;
    margin: 12px auto 16px !important;
  }

  #entry_container .resultsscroll:has(.hoverstate) {
    overflow-x: auto !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 140px) !important;
  }

  .note-wrapper .followup-actions {
    width: 140px !important;
  }

  .filter-title {
    font-size: 13px !important;
    max-width: 70px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .filter-input input {
    width: 100px !important;
  }

  input.filter-search-input {
    width: 92px !important;
  }
}

@media screen and (min-width: 980px) and (max-width: 1400px) and (max-height: 900px) {
  .notespopup .note-wrapper,
  .notescontainer .note-wrapper {
    height: calc(100vh - 36px) !important;
  }
}

@keyframes notes-card-pull-from-right {
  0% {
    transform: translate3d(0, 0, 0) scale(0.985);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes notes-card-pull-from-left {
  0% {
    transform: translate3d(0, 0, 0) scale(0.985);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes notes-card-send-back {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(0.985);
  }
}

@media screen and (min-width: 980px) and (max-width: 1400px) and (prefers-reduced-motion: reduce) {
  .notespopup .note-wrapper > .left-block,
  .notespopup .note-wrapper > .right-block,
  .notescontainer .note-wrapper > .left-block,
  .notescontainer .note-wrapper > .right-block {
    transition: box-shadow 0.2s ease, filter 0.2s ease !important;
    animation: none !important;
  }
}