#mobileHeaderBar,
#mobileHeaderMenu{
  display:none !important;
}

html, body{
  max-width:100%;
  overflow-x:hidden;
}

*{
  box-sizing:border-box;
}

img, iframe, embed, object, canvas, svg, video{
  max-width:100%;
}

@media (max-width: 900px){
  #mobileHeaderBar{
    display:flex !important;
  }

  #mobileHeaderMenu{
    display:block !important;
  }

  #mobileHeaderMenu.hidden{
    display:none !important;
  }
}

@media (max-width: 900px){
  body{
    font-size:15px;
  }

  .topbar{
    position:sticky !important;
    top:0 !important;
    z-index:100 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
    padding:10px 12px !important;
  }

  .brand{
    width:100% !important;
    font-size:18px !important;
    line-height:1.2 !important;
  }

  .topbar .tabs,
  .tabs,
  .pfeHeaderRow,
  .pfeHeaderLeft,
  .pfeHeaderCenter,
  .pfeHeaderRight{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:8px !important;
    width:100% !important;
    min-width:0 !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
  }

  .topbar .tabs::-webkit-scrollbar,
  .tabs::-webkit-scrollbar,
  .pfeHeaderRow::-webkit-scrollbar,
  .pfeHeaderLeft::-webkit-scrollbar,
  .pfeHeaderCenter::-webkit-scrollbar,
  .pfeHeaderRight::-webkit-scrollbar{
    display:none !important;
  }

  .topbar .tabs .tab,
  .tabs .tab,
  .tab,
  .topbar .tabs #headerSignedInPill,
  .topbar .tabs #pfeUserGlow,
  #headerSignedInPill,
  #pfeUserGlow{
    flex:0 0 auto !important;
    white-space:nowrap !important;
  }

  .topbar .tabs .tab[data-tab="knowledge"]{
    margin-left:0 !important;
  }

  #headerSignedInPill,
  #pfeUserGlow,
  .headerSignedInPill,
  .pfeUserGlow{
    position:static !important;
    top:auto !important;
    right:auto !important;
    margin-left:0 !important;
    pointer-events:auto !important;
  }

  .container{
    padding:12px !important;
  }

  .card{
    margin-top:12px !important;
    padding:12px !important;
    border-radius:12px !important;
  }

  .belowGrid,
  .pfePricingGrid,
  .pfePricingMiniStack{
    grid-template-columns:1fr !important;
  }

  .dropzone{
    padding:14px !important;
  }

  .dropTitle{
    font-size:16px !important;
  }

  .dropSub,
  .muted{
    font-size:13px !important;
  }

  input,
  select,
  textarea,
  button,
  .downloadBtn,
  .actionBtn,
  .encryptTab,
  .miniTab,
  .vaultActionTab{
    min-height:44px !important;
  }

  button,
  .downloadBtn{
    width:100% !important;
  }

  .encryptActionRow,
  .encryptTabsRow,
  .miniTabBar,
  .vaultActions,
  .modalFooter{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:8px !important;
  }

  .encryptActionRow > *,
  .encryptTabsRow > *,
  .miniTabBar > *,
  .vaultActions > *,
  .modalFooter > *{
    width:100% !important;
  }

  .fileitem,
  .vaultRow,
  .unlockVaultImportRow,
  .vaultMoveRow{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:8px !important;
  }

  .fileitem .name,
  .vaultName,
  .unlockVaultImportName,
  .vaultMoveName{
    max-width:100% !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }

  .fileitem .size,
  .vaultActions,
  .unlockVaultImportActions,
  .vaultMoveActions{
    justify-content:flex-start !important;
  }

  .modalOverlay{
    padding:8px !important;
    align-items:flex-end !important;
  }

  .modalCard,
  .modalCard.modalLarge,
  .unlockVaultImportCard,
  .vaultMoveModalCard,
  .confirmModalCard{
    width:calc(100vw - 16px) !important;
    max-width:calc(100vw - 16px) !important;
    max-height:88vh !important;
    border-radius:14px !important;
  }

  .modalHeader,
  .modalBody,
  .modalFooter{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .modalBody{
    overflow:auto !important;
  }

  .vaultPreviewBox{
    height:56vh !important;
  }

  pre.out,
  .out,
  .filelist,
  .unlockVaultImportList,
  .vaultMoveList{
    max-height:220px !important;
  }
}

@media (max-width: 640px){
  body{
    font-size:14px;
  }

  .topbar{
    padding:8px 10px !important;
  }

  .container{
    padding:10px !important;
  }

  .card{
    padding:10px !important;
  }

  .tab{
    padding:8px 10px !important;
    font-size:13px !important;
  }

  .brand{
    font-size:17px !important;
  }

  .pfePricingPrice{
    font-size:26px !important;
  }

  .vaultPreviewBox{
    height:50vh !important;
  }
}


@media (max-width: 900px){
  .mobileHeaderBar{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    width:100% !important;
  }

  .mobileHeaderBar .brand{
    min-width:0 !important;
    flex:1 1 auto !important;
  }

  .mobileHeaderToolsToggle{
    flex:0 0 auto !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:8px !important;
    min-height:42px !important;
    padding:10px 14px !important;
    border-radius:999px !important;
    border:1px solid rgba(91,140,255,.45) !important;
    background:linear-gradient(180deg, rgba(16,27,52,.96), rgba(10,18,38,.96)) !important;
    color:#f5f8ff !important;
    box-shadow:0 10px 28px rgba(0,0,0,.18), 0 0 0 1px rgba(91,140,255,.08) inset !important;
    white-space:nowrap !important;
    width:auto !important;
  }

  .mobileHeaderToolsToggle .mobileHeaderToolsLabel{
    font-weight:800 !important;
    font-size:14px !important;
    line-height:1 !important;
  }

  .mobileHeaderToolsToggle .mobileHeaderToolsChevron{
    font-size:16px !important;
    line-height:1 !important;
    opacity:.9 !important;
  }

  .mobileHeaderMenu{
    display:block !important;
    width:100% !important;
    margin-top:8px !important;
    padding:12px !important;
    border-radius:16px !important;
    border:1px solid rgba(91,140,255,.22) !important;
    background:linear-gradient(180deg, rgba(11,18,34,.985), rgba(8,14,28,.985)) !important;
    box-shadow:0 18px 40px rgba(0,0,0,.28) !important;
  }

  .mobileHeaderMenu.hidden{
    display:none !important;
  }

  .mobileHeaderMenuTop{
    display:grid !important;
    gap:10px !important;
    margin-bottom:12px !important;
  }

  .mobileHeaderMenuTitle{
    font-size:16px !important;
    font-weight:900 !important;
    color:#ffffff !important;
  }

  .mobileHeaderMenuSubtitle{
    font-size:12px !important;
    line-height:1.45 !important;
    color:#adc0eb !important;
  }

  .mobileHeaderCurrentTab{
    display:inline-flex !important;
    align-items:center !important;
    width:max-content !important;
    max-width:100% !important;
    padding:6px 10px !important;
    border-radius:999px !important;
    background:rgba(91,140,255,.12) !important;
    border:1px solid rgba(91,140,255,.22) !important;
    color:#eaf1ff !important;
    font-size:12px !important;
    font-weight:700 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .mobileHeaderStatus{
    margin-bottom:12px !important;
    padding:10px 12px !important;
    border-radius:12px !important;
    font-size:13px !important;
    font-weight:700 !important;
  }

  .mobileHeaderStatus.is-signed-in{
    background:rgba(46, 204, 113, .10) !important;
    border:1px solid rgba(46, 204, 113, .22) !important;
    color:#d9ffeb !important;
  }

  .mobileHeaderStatus.is-signed-out{
    background:rgba(255,255,255,.05) !important;
    border:1px solid rgba(255,255,255,.08) !important;
    color:#e6eefc !important;
  }

  .mobileHeaderSection{
    margin-top:12px !important;
  }

  .mobileHeaderSectionTitle{
    margin-bottom:8px !important;
    font-size:11px !important;
    font-weight:900 !important;
    letter-spacing:.12em !important;
    text-transform:uppercase !important;
    color:#8fa6d8 !important;
  }

  .mobileHeaderSectionBody{
    display:grid !important;
    gap:8px !important;
  }

  .mobileHeaderMenuBtn{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    width:100% !important;
    min-height:46px !important;
    padding:12px 14px !important;
    border-radius:14px !important;
    border:1px solid rgba(124,145,182,.18) !important;
    background:rgba(255,255,255,.035) !important;
    color:#ffffff !important;
    text-align:left !important;
    box-shadow:none !important;
  }

  .mobileHeaderMenuBtn.is-active{
    background:rgba(91,140,255,.12) !important;
    border-color:rgba(91,140,255,.35) !important;
  }

  .mobileHeaderMenuBtnText{
    font-size:14px !important;
    font-weight:800 !important;
    line-height:1.2 !important;
  }

  .mobileHeaderMenuBtnArrow{
    font-size:18px !important;
    opacity:.75 !important;
    flex:0 0 auto !important;
  }

  .topbar .tabs,
  .tabs.pfeHeaderRow,
  .pfeHeaderLeft,
  .pfeHeaderCenter,
  .pfeHeaderRight{
    display:none !important;
  }

  #headerSignedInPill,
  #pfeUserGlow,
  .headerSignedInPill,
  .pfeUserGlow{
    display:none !important;
  }
}