@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
body {
    /* padding-top: 5em; */
    /* background-color: #ddd; */
  }
  .starter-template {
    padding: 3rem 1.5rem;
    text-align: center;
  }
  .filepond--credits{
      visibility: hidden;
  }
  .result-containter{
      visibility: visible;
  }
  .prompt-input{
    margin-bottom: 10px;
  }
  .dropdown-style{
    float: left;
    margin: 10px 10px 10px 0px;
    border-radius: 30px !important;
  }
  .dropdown-style .btn{
    border-radius: 30px !important;
  }

  .link-style{
    float:left;
    margin: 10px 10px 10px 0px;
  }
  .hidden{
    display: none !important;
  }

  .filepond--root .filepond--drop-label{
    height: 6.50em;
    display: none;
  }
  .affix{
    position: sticky;
  }

  .app-header{
    border-bottom: 1px solid rgb(229,234,239);
  }

  .app-header.matter-style{
    border-bottom: 0px;
  }

  .container-fluid.matter-style{
    padding-top: 70px !important;
  }

  .bd-content{
    position: relative;
    /* top: 4rem!important; */

  }

  .bd-sidebar{
    position: fixed;    
    bottom: 0px;
    right: 20px;
    z-index: 100;
    width: 350px;
    height: 300px;
    
    border-radius: 10px 10px 0px 0px;
    overflow: hidden;
    background: #f1f0ef;
    display: none;
  }

  /* Sorting cursor for matters table headers */
  th.sortable-header {
    cursor: pointer;
    /* Keep the label and sort arrow on one row at every screen size so the
       arrow never wraps below the header text when the column gets narrow. */
    white-space: nowrap;
  }

  th.sortable-header .sort-indicator {
    margin-left: 0.25rem;
    font-size: 0.85em;
    opacity: 0.35;
    vertical-align: baseline;
  }

  th.sortable-header.sorted-asc .sort-indicator,
  th.sortable-header.sorted-desc .sort-indicator {
    opacity: 1;
  }

  .sidebar-header{
    width:100%;
    display: flex;
    justify-content: space-between;
    padding: 12px 15px;
    background: #e1e9f6;
    line-height: 28px;
    color: #111;
  }
  .sidebar-header-title{
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
  }

  .file-process-icon-loading{
    margin-left: 5px;
    display: none;
  }
  

  .sidebar-header-buttons{
    border: none;
    border-radius: 50%;
    width:30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    /* margin-left: 2px; */
    background: none;

  }

  #sidebar-header-close{
    display: none;
  }

  .sidebar-header-buttons:hover{
    background: #eee;
  }
  .sidebar-header-buttons i{
    margin-left: auto;
    margin-right: auto;
    padding-right: 0;
    font-size: 18px;
    font-weight: bold;
  }

  .sidebar-warning{
    position: absolute;
    bottom: 0px;
    width: 100%;
    background: #eee;
    padding: 5px 10px;
    font-size: 14px;
    pointer-events: none;
    display: none;
  }

  .sidebar-warning .alert-warning{
    display: flex;
  }

  .sidebar-warning .alert-warning i{
    font-size: 22px;
    margin-right: 10px;
  }
  .sidebar-warning p{
    margin-top: 0;
    margin-bottom: 0;
  }

  .filepond--root .filepond--list-scroller{
    margin-top: 0;
    margin-bottom: 0;
  }

  #filepond-form{
    /* padding-top: 4em; */
    height: calc(100% - 55px);
    /* height:100%; */
    padding-top: 15px;
    padding-bottom: 5px;
  }

  .filepond--root {
    position: -webkit-sticky;
    position: sticky;
    /* height: calc(100% - 65px); */
    height:100%;
    

  } 
  .sidebar-error{
    text-align: center;
    padding: 15px;
    display: none;
  }

  .sidebar-alert{
    text-align: center;
    font-size: 16px;
    color: #fa896b;
  }
  .sidebar-alert i{
    font-size: 40px;
  }

  .column-dropdown{
    /* visibility: hidden; */
  }
  .column-dropdown-menu{
    padding: 15px;
  }
  .action-dropdown-menu{
    position: relative;
    z-index: 100;
  }
  .jsgrid{
    overflow: visible;
  }

  .margin-right-15{
    margin-right: 15px;
  }

  .margin-right-5{
    margin-right: 5px;
  }

  .navbar-brand{
    margin-left: 20px;
  }

  .btn.active{
    box-shadow: none;
  }

  .row-group-toggle, .row-toggle{
    margin: 3px 5px;
  }

  .rowRadio{
    display: none;
  }

  .rowRadioBtn{
    text-wrap: nowrap;
  }

  .rowRadioBtn.active{
    background: #e3e3e3;
    border: none;
  }

  .radio-orientation, .radio-orientation-word, .radio-orientation-pdf{
    border: 1px solid #ddd !important;
  }

  .radio-orientation.active, .radio-orientation-word.active, .radio-orientation-pdf.active{
    background: #e3e3e3 !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
  }

  .download-radio-orientation{
    height: 30px;
    font-size: 12px;
    line-height: 28px;
    padding: 0px 10px 0px 10px;
  }

  .orientation-toggle{
    margin: 0px;
    /* border: 1px solid #ddd !important; */
  }
  .download-orientation-toggle{
    padding: 0px;
  }

  .padding-left-5{
    padding-left: 5px;
  }

  .padding-right-5{
    padding-right: 5px;;
  }

  .dup-dropdown{
    display: none;
  }

  .low-conf-dropdown{
    display: none;
  }

  .exclusion-dropdown{
    display: none;
  }




  .dropdown-style .btn.remove-dups-btn{
    width:100%;
    margin-top: 10px;
    font-size: 12px !important;
    padding-left: 2px;
    padding-right: 2px;
    border-radius: 7px !important;
  }
  .dropdown-style .btn.remove-exclusions-btn{
    width:100%;
    margin-top: 10px;
    font-size: 12px !important;
    padding-left: 2px;
    padding-right: 2px;
    border-radius: 7px !important;
  }
  .amend-checkbox-label{
    font-weight: 600;
  }
  .inputAmendDateFormDropdown{
    margin-top: 10px;
  }

  .amend-alert, .lowConf-alert{
    min-width: 250px;
    margin-bottom: 5px;
  }

  .highlight .jsgrid-cell{
    background: #FFEFD2 !important;
    color: #996813 !important;
  }

  .highlight-red .jsgrid-cell{
    background: #FEE7E1 !important;
    color: #C86F57 !important;
  }

  .highlight-purple .jsgrid-cell{
    background: #DDEBFF !important;
    color: #315D99 !important;
  }

  .jsgrid-cell{
    overflow-wrap: break-word;
  }

  .padding-10{
      padding-left: 20px;
      padding-right: 20px;
  }
  #jsGrid{
      font-size: 14px;
      margin-top: 10px;
      width: calc(100% - 30px) !important;
      margin-left: 15px;
      margin-right: 15px;
  }

  .table-options .download-btn{
      margin-right: 0px;
  }

  .delete-btn{
    float:left;
  }

  button i, .btn i{
    padding-right: 5px;
  }

  .download-btn{
    float:right;
  }

  .rename-btn{
    margin-right: 0px;
    /* border-radius: 30px; */
  }

  .matter-actions-dropdown{
    float:right !important;
  }

  .new-file-btn{
    margin-right: 0px;
    /* border-radius: 30px; */
    float: right;
  }

  .input-search{
    width: 130px;
    float: right;
    border-radius: 30px;
    margin-top: 9px;
    padding: 8px 15px 8px 30px;
    background: #f7f9fc;
    transition: all 0.3s ease-in-out;
    margin-right: -5px;
  }

  .input-search:focus{
    background: #fbfcfd !important;
  }

  .search-bar{
    width: 230px;
    float: right;
  }

  .search-bar-icon{
    position: relative;
    float: right;
    right: 113px;
    top: 16px;
    color:#333;
    transition: all 0.3s ease-in-out;
  }
  
  .table-options .btn{
    font-size: 13px;
    font-weight: 500;
    /* background: none !important; */
  }

  .form-check-label{
    text-wrap:nowrap;
  }

  .table-options{
    padding: 0px 15px;
    background: #E9EFF8;
    border-radius: 30px;
    margin-bottom: 10px;
    /* Sticky, not fixed: it takes the content column's width, so it moves
       with the sidebar like every other page. top = the fixed header. */
    position: sticky;
    top: 70px;
    display: flow-root; /* contain the floated buttons (fixed used to) */
    z-index:9;
  }
  /* On a full-height table page nothing scrolls past the bar, so it must not
     be offset by the header height (it used to cover the column headers). */
  .container-fluid.page-shell .table-options{
    top: 0;
  }


  .margin15{
    margin: 15px;
  }

  .profile-dropdown{
    margin-left: -75px;
  }

  .skeleton {
    float:left;
    width: calc(100% - 30px);
    border-radius: 5px;
    margin: -2px 15px 0px 15px;
    -webkit-animation: skeleton-loading 1s linear infinite alternate;
    animation: skeleton-loading 1s linear infinite alternate;
    height: 45px;
    border-radius: 3px;
    display: none;
  }

  @-webkit-keyframes skeleton-loading {
      0% {
          background-color: #c2cfd6;
      }
      100% {
          background-color: #f0f3f5;
      }
  }

  @keyframes skeleton-loading {
      0% {
          background-color: #c2cfd6;
      }
      100% {
          background-color: #f0f3f5;
      }
  }

  .invisible{
    visibility: hidden;
  }

  .modal-export{
    width: 900px;
  }
  @media (min-width: 992px) {
    .modal-lg, .modal-xl {
        --bs-modal-width: 900px !important;
    }
  }

  .img-size{
    /* 	padding: 0;
      margin: 0; */
      /* height: 450px;
      width: 700px; */
      background-size: cover;
      overflow: hidden;
    }
    .modal-export-options{
      margin-top: 20px;
    }
    .modal-content {
       /* width: 700px; */
      border:none;
    }
    .modal-header{
      padding-bottom: 0px;
    }
    .modal-header2{
      padding: 0px 0px 0px 0px;
    }
    .modal-body {
       padding: 20px 20px 0px 20px;
    }
    .modal-header{
      align-items: start;
    }
    .modal-close{
      padding-right: 20px !important;
      margin-top: 10px !important;
    }

    .carousel-item{
      height:533px;
    }

    .preview{
      width:100%;
      min-height: 750px;
      background-color: #EBEBEB;
      text-align: center;
    }

    .preview img{
      width: 95%;
      padding-top: 10px;
    }

    .download-options{
      display: flex;
      justify-content: flex-end;
      width:535px;
      line-height: 35px;
    }

    .wait-time-msg, .wait-time-msg2{
      margin-right: 15px;
      display: none;
    }
    

    .carousel-inner{
      /* overflow-y:scroll; */

    }

    .download-button{
      margin-right: 8px;
    }

    .export-format-title{
      font-weight: 600;
      font-size: 16px;
      padding-right: 10px;
    }

    .card-body-icon{
      display: flex;
      align-items: top;
      font-size: 26px;
      margin-right: 20px;
      color: #5D87FF;
    }

    .download-format-body{
      text-align: center;
    }

    .card-body-icon.card-body-icon-list{
      font-size: 22px;
      padding-left: 2px;
    }
    .download-format-card{
      padding: 15px;
    }
    .download-format-icon{
      text-align: center;
      margin-bottom: 5px;;
    }

    .icon-excel i{
      color: #17a652;
    }
    .icon-word i{
      color: #5d87ff;
    }
    .icon-pdf i{
      color: #f14343;
    }

    .center{
      text-align: center;
    }
    .download-format-icon i{
      font-size: 40px;
    }
    .download-format-title{
      text-align: center;
    }
    .download-format-options{
      height: 40px;
      margin-top: 30px;
      text-align: center;
      display: flex;
      align-items: flex-start;
      align-content: flex-start;
    }

    .card-body-arrow{
      display: flex;
      align-items: center;
      font-size: 24px;
      color: #ccc;
    }

    .card-body-flex{
      display: flex;
      justify-content: space-between;
    }

    .card-body-left{
      display: flex;
      justify-content:flex-start;
      width: 85%;
    }

    .card-body-text{
      min-width:200px;
      width: 85%;
    }

    .export-modal-footer{
      -webkit-box-pack: space-between;
      -ms-flex-pack: space-between;
      justify-content: space-between;
      padding: 15px 20px 15px 27px;
      background: #f5f5f5;
      border-radius: 0 0 20px 20px;
    }

    .rename-modal-footer{
      -webkit-box-pack: flex-end;
      -ms-flex-pack: flex-end;
      justify-content: flex-end;
      padding: 15px 20px 15px 27px;
      background: #f5f5f5;
      border-radius: 0 0 20px 20px;
    }


    .carousel-item-body input.form-control{
      font-weight: 600;
    }

    .modal-export-options{
      height:450px;
    }
    .modal-download-options{
      height: 400px !important;
    }

    .modal-rename-options{
      /* margin-top: 20px; */
      height: 400px;
    }

    .modal-share{
      /* height:200px; */
    }

    .modal-subtitle2{
      /* font-style: italic; */
      /* text-align: center; */
      font-weight: bold;
    }

    .modal-body-share{
      padding:20px 20px 30px 20px;
      border-top: 1px solid #eee;
    }

    .card-body-padding{
      padding:15px;
    }

    .export-option-btn{
      /* width: 100px; */
      /* display: flex; */
      /* align-items: center; */
      /* justify-content: center; */
      cursor: pointer;
    }

    .export-option-btn:hover{
      /* border-color: #ccc; */
      box-shadow: rgba(68, 76, 83, 0.2) 0px 0px 2px 0px,rgba(109, 119, 129, 0.12) 0px 12px 24px -4px;
    }

    .export-option-btn:hover .card-body-arrow{
      color:#999;
    }

    .card.active{
      border: 1px solid #5d87ff;
    }

    .app-header .navbar .navbar-nav .nav-item .nav-link.sidebartoggler{
      padding: 8px;
      margin-left: 12px;
    }

    .folder-3-dots{
      font-size: 20px;
      margin-left: 10px;
      margin-right: 10px;
    }

    .nav-item{
      display: flex;
      align-items: center;
    }
    .nav-item i{
      font-size: 20px;
      font-weight: 800;
    }
    .text-bold{
      font-weight: 600;
    }
    .cursor-default{
      cursor: default !important;
    }
    .cursor-default:hover{
      color:#333;
    }
    .app-header{
      padding: 0px !important;
      position: fixed;
      z-index: 10 !important;
    }

    .sidebartoggler-x{
      font-size: 22px;
      display: none;
    }

    .transition100{
      transition: 0.1s ease-in;
    }
    .transition200{
      transition: 0.2s ease-in;
    }
    .padding-left-0{
      padding-left: 0px !important;
    }

    .header-title2{
      /* margin-right: 10px; */
      margin-bottom: 0px;
    }

    /* Keep every breadcrumb segment the same font-size and baseline so the
       crumbs line up on one row. The current folder is an <h3> (larger by
       default), which otherwise sat lower than the sibling links; it stays
       distinguished via .text-bold instead of a bigger size. */
    .nav-item .header-title2{
      font-size: 1rem;
      line-height: 1.5;
      margin-top: 0;
    }

    /* Breadcrumb truncation – keep long matter / folder / file names from
       breaking the fixed-header layout. Each segment gets its own max-width
       and an ellipsis; the full name is available on hover via the title
       attribute set in the template. */
    .nav-item .matter-name-truncate,
    .nav-item .breadcrumb-truncate{
      display: inline-block;
      max-width: min(46vw, 640px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      vertical-align: middle;
    }

    @media (max-width: 1200px){
      .nav-item .matter-name-truncate,
      .nav-item .breadcrumb-truncate{
        max-width: 200px;
      }
    }

    @media (max-width: 768px){
      .nav-item .matter-name-truncate,
      .nav-item .breadcrumb-truncate{
        max-width: 120px;
      }
    }

    .header-title h3{
      font-size: 20px;
      line-height: 20px;
      margin-bottom: 0px;
    }

    .header-title h3.modal-title{
      font-size:22px;
      margin-bottom: 5px;
    }
    
    .sidebartoggler-x {
        display: block !important;
    }
    

    .app-header .navbar .navbar-nav .nav-item .nav-link.header-title{
      cursor: default;
      padding: 8px;
      width: auto;
    }
    
    .rename-icon-loading{
      display: none;
    }

    @media (min-width: 1800px) {
      .d-xl-none {
          display: block !important;
      }
    }

    .jsgrid .jsgrid-mode-button{
      display: none !important;
    }

    .matter_delete_icon{
      color: #bbb;
    }
    .matter_delete_icon:hover{
      color: #e03333;
    }
    .edit-matter-btn{
      cursor: pointer;
      margin-right: 5px;
      color: #bbb;
    }

  .gg-spinner {
      transform: scale(var(--ggs,1))
  }
  .gg-spinner,
  .gg-spinner::after,
  .gg-spinner::before {
      box-sizing: border-box;
      position: relative;
      /* display: block; */
      margin-right: 20px;
      width: 20px;
      height: 20px
  }
  .gg-spinner::after,
  .gg-spinner::before {
      content: "";
      position: absolute;
      border-radius: 100px
  }
  .gg-spinner::before {
      animation: spinner 1s
      cubic-bezier(.6,0,.4,1) infinite;
      border: 3px solid transparent;
      border-top-color: currentColor
  }
  .gg-spinner::after {
      border: 3px solid;
      opacity: .2
  }
  @keyframes spinner {
      0% { transform: rotate(0deg) }
      to { transform: rotate(359deg) }
  }

  @keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 0.7; }
  }



  .modal-title2{
    padding-left: 10px;
    padding-top: 5px;
  }
  .modal-subtitle{
    padding-left:10px;
    font-size: 15px;
    display: block;
    width: 100%;
  }
  h3.modal-title2.modal-title-lg{
    font-size: 22px;
    margin-bottom: 8px;
  }

  .modal-header3 .modal-title2, .modal-header3 .modal-subtitle{
    padding-left: 0px;
  }

  .rename-preview-card{
    max-height: 250px;
    overflow-y: scroll;
  }
  .preview-label{
    margin-top: 15px;
  }
 .jsgrid-edit-button{
  display: none;
 }
 .jsgrid-delete-button{
  display: none;
  /* opacity: 0; */
  /* transition: all 0.2s ease-in; */
 }
 .jsgrid-delete-button:hover{
  /* display: none; */
  /* opacity: 1!important; */
  /* transition: all 0.2s ease-in; */
 }

.jsgrid-alt-row:hover .jsgrid-delete-button, .jsgrid-row:hover .jsgrid-delete-button{
  animation: fadeIn 0.3s;
  opacity: 0.7;

}
.jsgrid-grid-body{
  overflow-y: auto;
}
.jsgrid-header-scrollbar{
  overflow-y: auto;
}
.attached-orientation-title{
  margin-top: 20px;
}
.download-orientation-title{
  padding: 0px;
  margin-top: 10px;
  margin-bottom: 5px;
}
.underline{
  text-decoration: underline !important;
}

/* The gap a dragged-in file will land in.

   This replaces the full-page "drop your files here" overlay. The overlay
   said a drop would be accepted but not where it would go, which is the only
   question worth answering once a list has been put in an order. Fixed
   positioning because the line is measured against the viewport, the same
   rectangles the drop is resolved against. */
#drop-insert-line {
  position: fixed;
  display: none;
  height: 0;
  z-index: 9999;
  pointer-events: none;
  border-top: 3px solid #0d6efd;
  /* The line sits ON the boundary rather than below it, so the gap it names
     is the gap the eye reads. */
  transform: translateY(-2px);
}

/* A cap at each end: three pixels of blue across a wide table reads as a
   border the table always had. */
#drop-insert-line::before,
#drop-insert-line::after {
  content: '';
  position: absolute;
  top: -4px;
  width: 5px;
  height: 11px;
  border-radius: 2px;
  background-color: #0d6efd;
}

#drop-insert-line::before { left: 0; }
#drop-insert-line::after { right: 0; }

.filepond--drop-label label .upload-icon{
  font-size: 30px;
}


.filepond--file-action-button {
  display: none;
}

.filepond--item[data-filepond-item-state="load-invalid"] .filepond--file-wrapper .filepond--file .filepond--file-action-button{
  display: block;
}

.initial-bg-show, .initial-bg-show2{
  text-align: center;
  /* margin-left: -70px; */
  /* margin-top: -30px; */
}

.initial-bg-show img{
  max-width: 500px;
  margin-left: -30px;
  padding-top: 2%;
}

.initial-bg-show2 img{
  max-width: 400px;
  margin-left: -30px;
  padding-top: 4%;
}


.initial-bg{
  text-align: center;
  display: none;
}

.initial-bg img{
  max-width: 400px;
  padding-left: 20px;
  padding-top: 4%;
}

.initial-title{
  font-size: 22px;
}
.initial-title .subtitle {
  font-size: 16px;
}

.initial-subtitle{
  display: block !important;
}

.spacer{
  height:50px;
}

/* Matter */
.matter-file-retention-switch{
  margin-top: 15px;
}
.file-retention-toggle{
  margin: 3px 5px;
}
.matter-file-retention-switch label{
  font-weight: 600;
  color: #2a3547;
}
.auto-delete-label{
  font-weight: 400;
  margin-top: 5px;
}
.auto-delete-radios{
  padding-top: 5px;
  display: none;
}
.btn.auto-delete-radio-btn{
  padding: 4px 16px;
}

/* Create / Edit Matter modals */
@media (min-width: 680px){
  .matter-modal .modal-dialog{
    max-width: 640px;
  }
}
/* The form wraps modal-body + modal-footer inside the flex modal-content;
   without this it won't shrink, so modal-dialog-scrollable clips the footer
   instead of scrolling the body. */
.matter-modal .modal-content > form{
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.matter-modal .form-group{
  margin-bottom: 14px;
}
.matter-modal .modal-body .form-group:last-child{
  margin-bottom: 0;
}
.matter-modal .col-form-label{
  padding-top: 0;
  padding-bottom: 4px;
  font-weight: 500;
  color: #2a3547;
}
.matter-form-section{
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #ebf1f6;
}
.matter-modal .modal-body > .matter-form-section:first-child{
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.matter-form-section-title{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #5a6a85;
  margin-bottom: 10px;
}
.matter-form-section-hint{
  font-size: 12px;
  color: #5a6a85;
  margin: -4px 0 12px;
}
.matter-label-optional{
  font-size: 11px;
  font-weight: 400;
  color: #5a6a85;
  margin-left: 2px;
}
.matter-form-section .matter-file-retention-switch{
  margin-top: 0;
}

#id_password1_helptext{
  display: none !important;
}

p.sign-up-subtitle{
  font-size: 18px;
  color: #0c0c0c;
  margin-bottom: 2px;
}

p.sign-up-subtitle2{
  font-size: 14px;
  margin-bottom: 25px;
}

p.disclaimer{
  margin-top: 10px;
}
.padding-40{
  padding: 40px;
}

.padding-top-20{
  padding: 20px 5px;
}

.jsgrid-header-sort:before{
  float:right;
  margin-top: 10px;
}

.options-multi-select{
  display: none;
}

.dropdown-multi-select{
  cursor: pointer;
  /* width: 0px; */
  margin: 10px 0px 10px 0px;
}

.dropdown-multi-select-show{
  display: block;
  width: 111px;
  transition:all 0.4s ease 0s;
  margin: 10px 10px 10px 0px;
}

.dropdown-multi-select-show.dropdown-multi-select-downloading{
  width: 135px;
}

.download-icon-loading{
  display: none;
}

/* action-dropdown */
.action-dropdown{
  width:80px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
}

.action-dropdown .view-btn, .action-dropdown .edit-row-btn-dropdown{
  /* float: left; */
  padding: 5px 7px 5px 7px;
  border: 1px solid #ccc;
  font-size: 12px;
  border-radius: 5px 0px 0px 5px;
  border-right: 0;
}

.btn-action{
  border: 1px solid #ccc !important;
  padding: 5px 7px 5px 5px;
  font-size: 12px;
  text-align: center;
  border-radius: 0px 5px 5px 0px;
  color:#000 !important;
}

.btn-action:hover{
  text-decoration: none !important;
}


.delete-row-btn, .preview-delete, .delete-multi-row-btn{
  color: #e84b4b !important;
}
.delete-row-btn:hover, .preview-delete:hover, .delete-multi-row-btn:hover{
  color: #a73232 !important;
  text-decoration: none !important;
}

.preview-delete p{
  margin: 0px;
}

.preview-rename p{
  margin: 0px;
}

.docPreview{
  width: 100%;
  height: 500px;
}

#previewContainer{
  margin: 0;
  padding: 0;
  height: 100%;
  /* background-color: #eee; */
}

/*
 * Document-card previews (text / CSV / email) render as centered cards on the grey
 * backdrop. Let the container grow with the card and establish a block formatting
 * context so the card's top AND bottom margins are contained — otherwise the scroll
 * container drops the bottom margin and the card glues to the bottom edge.
 * Full-bleed content (PDF/doc/video iframes, images, audio) is left untouched.
 */
#previewContainer:has(> .text-preview),
#previewContainer:has(> .csv-preview-wrap),
#previewContainer:has(> .email_preview){
  height: auto;
  min-height: 100%;
  display: flow-root;
}

.email_preview{
  margin: 25px auto;
  max-width: 900px;
  width: calc(100% - 70px);
  padding: 35px 50px;
  background-color: #fff;
  font-size: 14px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.email_preview .header{
  margin-bottom: 10px;
}

.no-overflow-y{
  overflow-y: hidden;
}

.text-preview{
  margin: 25px auto;
  max-width: 860px;
  width: calc(100% - 70px);
  padding: 25px 30px;
  background-color: #fff;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.csv-preview-wrap{
  margin: 25px auto;
  max-width: 1100px;
  width: calc(100% - 70px);
  overflow-x: auto;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.csv-preview{
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}

.csv-preview th,
.csv-preview td{
  border: 1px solid #e0e0e0;
  padding: 6px 10px;
  text-align: left;
  white-space: nowrap;
}

.csv-preview thead th{
  position: sticky;
  top: 0;
  background-color: #f5f5f5;
  font-weight: 600;
}

.csv-preview tbody tr:nth-child(even){
  background-color: #fafafa;
}

/* Spreadsheet (xlsx) grid: Excel-style column letters and row numbers. */
.sheet-preview .sheet-col-label,
.sheet-preview .sheet-corner{
  position: sticky;
  top: 0;
  background-color: #f5f5f5;
  font-weight: 600;
  text-align: center;
  color: #888;
  z-index: 2;
}

.sheet-preview .sheet-row-label{
  position: sticky;
  left: 0;
  background-color: #f5f5f5;
  font-weight: 600;
  text-align: center;
  color: #888;
  z-index: 1;
}

.sheet-preview .sheet-corner{
  left: 0;
  z-index: 3;
}

#previewContainer img{
  width: 100%;
  display: block;
  margin: 0 auto;
}

.preview-spinner-cont{
  margin-left: auto;
  margin-right: auto;
  width: 70px;
  display: block;
  margin-top: 20%;
}

.preview-spinner-cont .gg-spinner,
.preview-spinner-cont .gg-spinner::after,
.preview-spinner-cont .gg-spinner::before{
  width: 70px;
  height: 70px;
  color: #777;
}

/* .preview-spinner-cont .gg-spinner::before {
  border: 4px solid transparent;
} */
.preview-spinner-cont .gg-spinner::after {
  border: 5px solid;
}

/*
 * File previewer header. The global `.modal-header` rules (padding-bottom:0,
 * align-items:start) are meant for the app's other modals; override them here so
 * the title bar is vertically centered with balanced padding, and drop the modal
 * border the old offcanvas panel never had.
 */
.file-previewer .modal-header{
  padding: 1rem;
  align-items: center;
  border-bottom: none;
}

/* File previewer modal body (full-screen preview surface) */
.file-previewer .modal-body{
  padding: 0;
  background-color: #eee;
  /* Let zoomed-in content scroll horizontally as well as vertically. */
  overflow-x: auto;
}

/*
 * Floating zoom toolbar. Pinned to the bottom-centre of the preview surface with
 * position:fixed so it stays put while the (scrollable) modal-body scrolls. It only
 * renders while the fullscreen modal is open, so fixed positioning is safe here.
 * Hidden by default; page JS adds .is-visible for zoomable content types.
 */
.preview-toolbar{
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  display: none;
  align-items: center;
  gap: 4px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 40px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.08);
  z-index: 1090;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.preview-toolbar.is-visible{
  display: flex;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.preview-tool-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #444;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.preview-tool-btn:hover:not(:disabled){
  background: rgba(93, 135, 255, 0.12);
  color: #5D87FF;
}

.preview-tool-btn:active:not(:disabled){
  transform: scale(0.92);
}

.preview-tool-btn:disabled{
  color: #c2c2c2;
  cursor: default;
}

.preview-zoom-level{
  min-width: 58px;
  height: 34px;
  padding: 0 10px;
  border: none;
  border-radius: 20px;
  background: transparent;
  color: #333;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.preview-zoom-level:hover{
  background: rgba(0, 0, 0, 0.05);
}

#myGrid{
  /* The folder page is a table shell, so the grid is handed the leftover page
     height (see static/css/table-shell.css). This is only the floor. */
  min-height: 300px;
}

.sidebar-nav ul .sidebar-item .sidebar-link i{
  font-size: 17px;
}

/* .sidebar-nav ul .sidebar-item > .sidebar-link, .sidebar-nav ul .sidebar-item > .sidebar-link, .sidebar-nav ul .sidebar-item > .sidebar-link {
  background-color: #ffffff !important;
  color: #2a3547 !important;
} */
/* Slider CSS */
/* Container */
#sliderContainer {
  width: 100%;
  height: 50px;
  background-color: #f7f7f7;
  border-radius: 30px;
  position: relative;
  overflow: hidden;
  margin: 25px auto 20px auto;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.15);
}

/* Background text */
#sliderBackground {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: #777;
  z-index: 1;
}

/* Draggable slider */
#slider {
  width: 80px;
  height: 100%;
  background-color: #5D87FF;
  border-radius: 30px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  cursor: pointer;
  display: flex;
  justify-content: center;
  font-size: 26px;
  align-items: center;
  color: #fff;
  font-weight: bold;
  user-select: none;
  box-shadow: 0 0 30px rgba(0,0,0,0.3);
  transition: left 0.3s ease; /* Adding easing effect for smooth return */
}

/* Success state */
#sliderContainer.unlocked #slider {
  background-color: #5D87FF;
  cursor: default;
}

#sliderContainer.unlocked #sliderBackground {
  color: #5D87FF;
  font-weight: bold;
}

.sign-up-spinner{
  margin-right: 0px;
}

.col-max-width{
  max-width: 450px !important;
}

/* Offcanvas */
.offcanvas-left-btn, .offcanvas-right-btn{
    position: absolute;
    top: 50%;
    width: 40px;
    height: 40px;
    border-radius: 30px;
    background: rgba(255,255,255,0.7);
    width:40px;
    height:40px;
    line-height: 40px;
    text-align: center;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    font-size: 20px;
    z-index: 100;
    cursor: pointer;
    font-weight: bold;
}

.offcanvas-left-btn:hover, .offcanvas-right-btn:hover{
  background: rgba(245, 245, 245, 0.7);
  box-shadow: 0 0 15px rgba(0,0,0,0.15);
  font-size: 24px;
}

.offcanvas-left-btn:active, .offcanvas-right-btn:active{
  background: rgba(245, 245, 245, 0.7);
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
  font-size: 22px;
}

.offcanvas-left-btn{
  left: 25px;
}

.offcanvas-right-btn{
  right: 25px;
}

.offcanvas-buttons{
  display: flex;

}

.offcanvas-title-bar{
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
}

.preview-download-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  margin-right: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  color: #444;
  font-size: 15px;
}

.preview-download-btn:hover{
  background: rgba(93, 135, 255, 0.12);
  color: #5D87FF;
}

.offcanvas-title-bar .btn-action{
  margin-left: 15px;
  border-radius: 5px;
  max-height: 30px;
}

.offcanvas-title-bar h5{
  line-height: 28px;
  margin-bottom: 0px;
}

.offcanvas-title-input {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 1.1rem;
  font-weight: 500;
  min-width: 80px;
  max-width: calc(100% - 160px);
  width: 80px; /* overridden by JS */
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: #f6f6f6;
}
.offcanvas-title-input:hover {
  border-color: #dee2e6;
  background-color: transparent;
}
.offcanvas-title-input:focus {
  background: #fff;
  border-color: #0d6efd;
  box-shadow: 0 0 0 2px rgba(13,110,253,.15);
  outline: none;
  cursor: text;
}

.offcanvas-title-ext {
  font-size: 1.1rem;
  font-weight: 500;
  color: #888;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.4;
  padding: 2px 0;
  pointer-events: none;
  user-select: none;
}

#offcanvasRightLabel-number{
  padding: 4px 12px;
  background: #eee;
  font-size: 14px;
  border-radius: 30px;
  margin-right: 10px;
  font-weight: bold;
}

.share-link-sect{
  display: none;
  padding: 15px;
  background: #f6f6f6;
  border-radius: 10px;
}

.copy-share-link{
  float: right;
}

.share-modal{
  height: 450px;
  transition:all 0.4s ease 0s;
}

/* Room for the folder/matter scope choice on the regular-folder page. */
.share-modal--scoped{
  height: 560px;
}

.share-cont{
  height: 170px;
  transition:all 0.4s ease 0s;
  display: block;
}

.share-doc-cont{
  border: 1px solid #eee;
  padding: 25px;
  margin: 20px 0px;
  display: none;
}

.share-doc-cont h3{
  font-size: 16px;
  margin-bottom: 40px;
}

.btn-share-dl{
  margin-bottom: 10px;
  width:100%;
  border: 1px solid #e3e3e3;
}
.sharelink-error{
  display: none;
}

.sharelink-error .alert i{
  padding-right: 5px;
}

.sharelink-error-show{
  display: block !important;
  margin-top: 20px;
}

.form-label-share-code.error{
  color: #e84b4b;
}

.sharelink-animate{
  display: inline-block;
  animation: headShake; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 1s; /* don't forget to set a duration! */
}

.form-label-share{
  padding-top: 15px;
  padding-bottom: 5px;
}

.form-label-share2{
  padding-bottom: 10px;
}

.form-label-share3{
  padding-top: 20px;
  
}

.form-label-share3 .form-label{
  font-weight: 400;
}

.nav-user{
  cursor: pointer;
}

.dropdown-item{
  cursor: pointer;
}

.profile-circle{
  background: #5d87ff;
  width: 35px;
  height: 35px;
  padding: 0;
  margin: 0;
  text-align: center;
  line-height: 35px;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
}

.button-row{
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
}
.edit-pass-button{
  margin-right: 10px;
}

.password-sect{
  display:none;
}

.bg_grey{
  /* background: #f3f3f3; */
}

.mr10{
  margin-right: 10px;
}
.ml10{
  margin-left: 10px;
}
.ag-root-wrapper{
  border: 0;
}

.ag-row .ag-cell {
  display: flex;
  /* justify-content: center; align horizontal */
  align-items: center;
  /* font-size: 14px; */
}

.file-icon{
  font-size: 20px;
  color: #5D87FF;
  width: 20px;
  text-align: center;
}

.file-link{
  font-weight: 600;
}

/* Folder file search bar */
.folder-search-wrapper {
  position: relative;
  min-width: 220px;
  max-width: 320px;
}

.matter-search-wrapper {
  min-width: 340px;
  max-width: 420px;
}
.folder-search-wrapper .folder-file-search {
  padding-left: 36px;
  padding-right: 12px;
  height: 38px;
  border-radius: 6px;
  border: 1px solid #dee2e6;
}
.folder-search-wrapper .folder-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #6c757d;
  font-size: 1rem;
  pointer-events: none;
}

.matter-search-results-section {
  margin-top: 1rem;
}

.matter-search-no-results,
.folder-search-no-results {
  padding: 2rem;
  text-align: center;
  background: var(--bs-gray-100, #f8f9fa);
  border-radius: 6px;
}

/* Tags and Tags Modal */

.badge.tag-badge{
    /* background-color: #007bff; */
    /* color: #fff; */
    font-size: 0.85em;
    margin-right: 0px;
    margin-bottom: 4px;
    border-radius: 30px;
}

.tag-list-vertical {
    max-height: 315px;
    overflow-y: auto;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 10px;
    background: #fafbfc;
}

.tag-list-vertical .form-check {
    display: block;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}

.tag-list-vertical .form-check:last-child {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.tag-row .dropdown {
    margin-left: 8px;
}
#tagModal .dropdown-menu, #tagModal .dropup .dropdown-menu {
  position: absolute;
  z-index: 9999;
}
#tagModal .tag-list-vertical {
  position: relative;
}
.tag-menu-btn {
    color: #888;
}
.tag-menu-btn:focus {
    outline: none;
    box-shadow: none;
}


/* Manage Headings Modal */

#manageHeadingsModal .tags-list {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 20px;
}

#manageHeadingsModal .tag-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

#manageHeadingsModal .tag-item:last-child {
    border-bottom: none;
}

#manageHeadingsModal .tag-checkbox-heading {
    margin-right: 10px;
}

/* ── Row reordering ───────────────────────────────────────────────────────── */

/* Rows drag from anywhere, but only where a drag can actually start: the
   class goes on the tbody in setupRowReordering, so read-only and filtered
   views keep an ordinary cursor. The action menu is a menu, not a grip. */
/* Written through #jsGrid to outweigh the cursor: default the grid's own
   cells already carry. */
#jsGrid tbody.rows-draggable > tr[data-row-id] > td {
  cursor: grab;
}

#jsGrid tbody.rows-draggable > tr[data-row-id] > td.jsgrid-control-field,
#jsGrid tbody.rows-draggable > tr[data-row-id] a,
#jsGrid tbody.rows-draggable > tr[data-row-id] input {
  cursor: pointer;
}

#jsGrid tbody.rows-draggable > tr.jsgrid-edit-row > td,
#jsGrid tbody.rows-draggable > tr.jsgrid-edit-row input {
  cursor: auto;
}

/* The grip that marks a row as draggable. Kept faint until the row is hovered
   so a dense list does not gain a column of visual noise — the row itself is
   the drag target, so this only has to be seen, not aimed at. */
.reorder-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 28px;
  margin-right: 2px;
  color: #ced4da;
  cursor: grab;
  vertical-align: middle;
  /* Dragging a row must not paint the table's text blue on the way. */
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transition: color 0.12s ease-in-out;
}

.jsgrid-row:hover .reorder-handle,
.jsgrid-alt-row:hover .reorder-handle,
.heading-row:hover .reorder-handle {
  color: #6c757d;
}

.reorder-handle:active {
  cursor: grabbing;
}

/* Where the row will land. */
tr.reorder-placeholder {
  background-color: #e7f1ff;
  outline: 2px dashed #86b7fe;
  outline-offset: -2px;
  visibility: visible !important;
}

/* Except while the cursor is over a heading, when the heading is the answer
   instead. The row keeps its height so nothing jumps as the drag passes over. */
tr.reorder-placeholder.is-idle {
  visibility: hidden !important;
  background-color: transparent;
  outline: none;
}

/* The section a document will be filed into: hovering a heading files the row
   under it, whichever direction the drag arrived from. */
tr.heading-row.section-drop-target > td {
  background-color: #cfe2ff !important;
  outline: 2px solid #0d6efd;
  outline-offset: -2px;
}

/* The documents of a section being dragged: they are not moving on screen
   yet, so say plainly that they are coming along. */
tr.reorder-travelling td {
  opacity: 0.45;
}

/* jQuery UI clones the dragged row into a floating helper. */
tr.ui-sortable-helper {
  display: table;
  background-color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

/* The right-click menu on a heading row. Positioned against the viewport, so
   it closes on any scroll rather than drifting away from the row it belongs
   to. z-index clears jsGrid's sticky header and the table shell above it. */
.heading-context-menu {
  position: fixed;
  z-index: 2000;
  min-width: 190px;
  padding: 4px 0;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  font-weight: normal;
}

.heading-context-menu__item {
  display: block;
  width: 100%;
  padding: 6px 16px;
  border: 0;
  background: none;
  text-align: left;
  font-size: 0.9rem;
  color: #212529;
  white-space: nowrap;
  cursor: pointer;
}

.heading-context-menu__item:hover:not(:disabled),
.heading-context-menu__item:focus:not(:disabled) {
  background-color: #e9ecef;
  outline: none;
}

.heading-context-menu__item:disabled {
  color: #adb5bd;
  cursor: default;
}

.heading-context-menu__item--danger:not(:disabled) {
  color: #dc3545;
}

.heading-context-menu__item--danger:hover:not(:disabled),
.heading-context-menu__item--danger:focus:not(:disabled) {
  background-color: #f8d7da;
}

/* Style for heading rows */
.heading-row {
  background-color: #f8f9fa !important;
  font-weight: bold;
}

.heading-row td {
  padding: 12px 8px !important;
  border-top: 2px solid #dee2e6 !important;
  border-bottom: 2px solid #dee2e6 !important;
}

.heading-row td:first-child {
  padding-left: 16px !important;
}

/* Column widths are declared once, in a <colgroup> on both the header and the
   body table (src/modules/columnResize.js). Fixed layout is what makes the
   browser obey them — and what stops a full-width section heading in the first
   row from deciding the layout for every row under it. */
#jsGrid .jsgrid-table {
    table-layout: fixed;
}

/* Drag the right edge of a header cell to resize the column. The handle is a
   hit area rather than a line: 10px straddling the border is what the hand
   aims at, the rule inside it is what the eye follows. */
#jsGrid .jsgrid-header-row th {
    position: relative;
}

.col-resize-handle {
    position: absolute;
    top: 0;
    right: -5px;
    width: 10px;
    height: 100%;
    cursor: col-resize;
    z-index: 2;
    user-select: none;
    touch-action: none;
}

.col-resize-handle::after {
    content: '';
    position: absolute;
    top: 20%;
    left: 4px;
    width: 2px;
    height: 60%;
    background: #adb5bd;
}

#jsGrid .jsgrid-row .jsgrid-cell, #jsGrid .jsgrid-alt-row .jsgrid-cell{ 
  cursor: default;
}

/* ── Contact dashboard ─────────────────────────────────────────────────────
   The page is two weighted columns (see contact_dashboard.html): a wide one
   for the blocks that grow without a ceiling, and a rail of short reference
   cards. These rules give the rail rows a common shape and stop any one list
   from running the rail off the page. */

.contact-dashboard-header {
  row-gap: 0.5rem;
}

.contact-dashboard-header .contact-avatar {
  color: #7b8697;
}

/* Card titles that carry a count or an action sit on their own row so the
   heading keeps its baseline whatever is beside it. */
.contact-dashboard .card-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.contact-dashboard .contact-count {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #5a6472;
  background: #eef0f4;
  border-radius: 10px;
  padding: 0.05rem 0.45rem;
}

/* Contact-information sections: the label is scaffolding, the value is the
   content, so the label goes small and quiet. */
.contact-dashboard .contact-section-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a94a6;
  margin-bottom: 0.35rem;
}

.contact-dashboard .contact-lines {
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact-dashboard .contact-lines > li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.3rem 0;
  min-width: 0;
}

.contact-dashboard .contact-lines > li + li {
  border-top: 1px dashed #eceff3;
}

.contact-dashboard .contact-value {
  max-width: 100%;
}

/* The type of a phone or email is metadata, not part of the value: without a
   weight and colour break "604-555-0100 Mobile" reads as one string. */
.contact-dashboard .contact-meta {
  font-size: 0.8125rem;
  color: #8a94a6;
}

.contact-dashboard .contact-pill {
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.5;
  padding: 0.05rem 0.4rem;
  border-radius: 6px;
  background: #eef3fb;
  color: #2c4a76;
  white-space: nowrap;
}

.contact-dashboard .contact-pill-strong {
  background: #dbe7fb;
  color: #1c3d6f;
}

/* Rail lists have no upper bound in the view — a company with forty people,
   a contact on thirty matters — so cap them and let the list scroll rather
   than the cards below it disappear. */
.contact-dashboard .rail-list {
  max-height: 19rem;
  overflow-y: auto;
  margin: 0 -0.5rem;
  padding: 0 0.5rem;
  scrollbar-width: thin;
  /* macOS draws overlay scrollbars, so a capped list reads as a clipped one
     until you happen to scroll it. These four layers are the standard
     scroll-shadow trick: the two `local` white covers ride with the content
     and mask the two fixed shadows, so an edge shadow shows exactly when
     there is more list past that edge — and never on a list that fits. */
  background:
    linear-gradient(#fff 30%, rgba(255, 255, 255, 0)) top / 100% 14px no-repeat local,
    linear-gradient(rgba(255, 255, 255, 0), #fff 70%) bottom / 100% 14px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(38, 50, 71, 0.16), rgba(38, 50, 71, 0)) top / 100% 6px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(38, 50, 71, 0.16), rgba(38, 50, 71, 0)) bottom / 100% 6px no-repeat scroll;
}

.contact-dashboard .rail-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  margin: 0 -0.5rem;
  border-radius: 8px;
}

.contact-dashboard .rail-row:hover {
  background: #f5f7fa;
}

.contact-dashboard .rail-row-main {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1 1 auto;
}

.contact-dashboard .rail-row-name {
  overflow-wrap: anywhere;
}

.contact-dashboard .rail-row-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.contact-dashboard .rail-row-status {
  flex-shrink: 0;
  margin-top: 0.1rem;
}

/* Remove control: always present so it stays discoverable (and reachable on
   touch), but quiet until the row is hovered or it takes focus. */
.contact-dashboard .rail-remove {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: #b6bdc8;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.1rem 0.35rem;
  border-radius: 6px;
  cursor: pointer;
}

.contact-dashboard .rail-row:hover .rail-remove,
.contact-dashboard .rail-remove:hover,
.contact-dashboard .rail-remove:focus-visible {
  color: #d1495b;
  background: #fdeef0;
}

/* The note feed is the tall block in the wide column; give its rows room. */
.contact-dashboard .note-feed .note-item {
  padding-top: 0.75rem;
  margin-top: 0.75rem;
}

.contact-dashboard .note-feed .note-body {
  color: #3c4657;
}

/* ---------------------------------------------------------------------------
   Placeholders must not read as saved values.

   The theme paints placeholders in the body colour at 75% opacity, which on
   this palette is close enough to real text that a box showing an example
   ("Doe" under a First name label) looks like a contact that already has a
   name. Everything gets a distinctly lighter grey; boxes whose placeholder is
   only an example — they carry a visible <label> too, and are tagged
   `placeholder-example` by the form — also clear it on focus, so the box you
   are about to type in is unmistakably empty.

   Rows whose placeholder IS the label (the contact method rows, the picker's
   inline create fields) deliberately keep theirs on focus: dropping it would
   leave an unlabelled box.
   -------------------------------------------------------------------------*/
.form-control::placeholder,
.form-select::placeholder {
  color: #98a2b3;
  opacity: 1;
}

.placeholder-example:focus::placeholder {
  color: transparent;
}

/* Users-with-access avatar stack (_access_avatars.html) — matter list + matter header */
.user-access-stack {
  display: inline-flex;
  align-items: center;
}
.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  border: 2px solid #fff;
  flex-shrink: 0;
  cursor: default;
  user-select: none;
}
.user-access-stack .user-avatar + .user-avatar {
  margin-left: -10px;
}
.user-avatar.av-owner { background: #dbeafe; color: #1d4ed8; }
.user-avatar.av-collab { background: #d1fae5; color: #047857; }
.user-avatar.av-viewer { background: #f3f4f6; color: #4b5563; }
.user-avatar-more {
  background: #e5e7eb;
  color: #374151;
  cursor: pointer;
}
.popover-user {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 3px 0;
}
.popover-initials {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  flex-shrink: 0;
}
.popover-initials.av-owner { background: #dbeafe; color: #1d4ed8; }
.popover-initials.av-collab { background: #d1fae5; color: #047857; }
.popover-initials.av-viewer { background: #f3f4f6; color: #4b5563; }
.popover-manage {
  display: inline-block;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #eee;
  font-size: 13px;
  width: 100%;
}

/* ---- Responsive sidebar ----------------------------------------------
   >=1200px: full sidebar, the toggle collapses it (styles.new.css).
   768-1199px: always an icon rail; hovering expands it over the content.
   <768px: off-canvas drawer, opened by the header toggle (.mobile-open,
   set in base.html) with a backdrop. The desktop show/mini classes are
   ignored below 1200px so a collapsed desktop state can't leak in. */
@media (max-width: 1199.98px) {
  #main-wrapper[data-sidebar-show="True"] .left-sidebar {
    overflow: hidden;
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  #main-wrapper[data-sidebar-show="True"] .left-sidebar {
    left: 0 !important;
    width: 72px;
  }
  #main-wrapper[data-sidebar-show="True"] .left-sidebar:hover {
    width: 250px;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.12);
  }
  #main-wrapper[data-sidebar-show="True"] .left-sidebar .scroll-sidebar {
    padding: 0 12px;
  }
  #main-wrapper[data-sidebar-show="True"] .left-sidebar:not(:hover) .hide-menu,
  #main-wrapper[data-sidebar-show="True"] .left-sidebar:not(:hover) .logo-img,
  #main-wrapper[data-sidebar-show="True"] .sidebartoggler-x,
  #main-wrapper[data-sidebar-show="True"] #headerCollapse {
    display: none !important;
  }
  #main-wrapper[data-sidebar-show="True"] .body-wrapper {
    margin-left: 72px;
  }
  #main-wrapper[data-sidebar-show="True"] .app-header {
    width: calc(100% - 72px);
  }
}

@media (max-width: 767.98px) {
  #main-wrapper[data-sidebar-show="True"] .left-sidebar {
    left: -250px !important;
  }
  #main-wrapper[data-sidebar-show="True"].mobile-open .left-sidebar {
    left: 0 !important;
    z-index: 1040;
  }
  #main-wrapper[data-sidebar-show="True"].mobile-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1039;
  }
}

.email_preview .email-body{
  display: block;
  width: 100%;
  border: 0;
}

/* ── AI list toolbar (index.html) ─────────────────────────────────────────────
   One row: view tools on the left, search + Add files, then the list's own
   actions (Share, Edit document, Create list) on the right. Every control is
   the same 32px button; the float/pill rules above are for the older bars. */
.table-options.ai-list-toolbar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--ml-soft, #f8f9fb);
  border: 1px solid var(--ml-line, #e5e7eb);
}
.ai-list-toolbar > .options-hideable,
.ai-list-toolbar > .options-page{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.ai-list-toolbar > .options-hideable{ flex: 1 1 auto; min-width: 0; }
/* On a narrower screen the actions wrap to a second row, still at the right. */
.ai-list-toolbar > .options-page{ margin-left: auto; }
/* Selection mode: "N selected" and "Clear selection" side by side. */
.ai-list-toolbar > .options-multi-select{ flex: 1 1 auto; }
.ai-list-toolbar > .options-multi-select > *{ display: inline-flex; vertical-align: middle; margin-right: 8px; }
.ai-list-toolbar .dropdown-multi-select-show,
.ai-list-toolbar .dropdown-multi-select-show.dropdown-multi-select-downloading{ width: auto; }
.ai-list-toolbar .ai-list-toolbar-spacer{ flex: 1 1 0; }
.ai-list-toolbar .dropdown-style,
.ai-list-toolbar .link-style,
.ai-list-toolbar .dropdown-multi-select,
.ai-list-toolbar .dropdown-multi-select-show{
  float: none;
  margin: 0;
}
.ai-list-toolbar .btn,
.ai-list-toolbar .dropdown-style .btn{
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 6px !important;
  white-space: nowrap;
}
.ai-list-toolbar .btn i{ padding-right: 0; }
.ai-list-toolbar .btn-light{
  background: #fff;
  border: 1px solid var(--ml-line, #e5e7eb);
}
.ai-list-toolbar .btn-light:hover{ background: var(--ml-grey-bg, #f3f4f6); }
/* Dropdown panels keep their own (full-width, 7px) buttons. */
.ai-list-toolbar .dropdown-menu .btn{ height: auto; display: block; padding: 4px 2px; }
.ai-list-toolbar .btn[aria-label="More actions"]{ padding: 0 10px; }
/* The box follows the input, which main.js widens 130 → 200px on focus. */
.ai-list-toolbar .search-bar{ float: none; width: auto; position: relative; }
.ai-list-toolbar .search-bar .input-search{
  float: none; height: 32px; margin: 0;
  border-radius: 6px; padding: 0 10px 0 30px; background: #fff;
}
.ai-list-toolbar .search-bar-icon{
  /* main.js nudges `right` inline on focus/blur for the old floated bar. */
  float: none; position: absolute; left: 10px; right: auto !important; top: 50%;
  transform: translateY(-50%); z-index: 1; color: var(--ml-muted, #6b7280);
}