/* TO MINIFY USE: */
/* https://www.cleancss.com/css-minify/ (Dan's tools, verified) */

/* SERVE FONTS LOCALLY: ROBOTO MONO */

/* roboto-mono-regular - vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Mono'), local('RobotoMono-Regular'),
       url('fonts/roboto-mono-v7-all-regular.woff2') format('woff2'); /* Chrome 26+, Opera 23+, Firefox 39+ */
}

html, body {
  font-family: 'Roboto',sans-serif;
  font-size: 14px;
  margin: 0;
  width: 100%;
  min-height: 100%;
  height: 100%;
  line-height: 150%;
  font-weight: 400;
  /* background-color: #fff; */
  /* background-color: #f9f9f9; */
  background-color: #f9fafd; /* f8fafd */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  /* display: flex; */
  justify-content: center;
}

.bs {
  font-weight: 500;
}

#c3 {
  display: flex;
  font-size: 12px;
  width: 100%;
  color: #5f6368;
  height: 16px;
  align-items: center;
  justify-content: center;
  letter-spacing: 1.0px;
  margin-bottom: 4px;
  cursor: default;
}
/* HAS MOBILE MEDIA QUERY */

.topBanner {
  display: block;
  min-width: 300px;
  /* max-width: 1000px; */
  /* width: 970px; */
  width: 100%;
  min-height: 90px;
  max-height: 90px;
  height: 90px;
  margin-bottom: 28px;
  text-align: center;
}
/* HAS MOBILE MEDIA QUERY */

.topBannerIns {
  display: block;
  width: 100%;
  height: 100%;
}
/* HAS MOBILE MEDIA QUERY */

img {
  vertical-align: middle;
}

a {
 color: #1a73e8;
 font-weight: 500;
}

#dn {
  color: #1a73e8;
  padding-left: 8px;
  font-size: 14px;
}

#dn a {
  font-size: 16px;
  text-decoration: none;
}

#dn a:hover {
  text-decoration: underline;
}

#iJ a {
  text-decoration: none;
}

#iJ a:hover {
  text-decoration: underline;
}

#iJ {
  display: flex;
  font-size: 16px;
  line-height: 150%;
}

#iD {
  width: 40px;
  height: 40px;
  position: relative;
  margin-right: 16px;
  margin-top: 2px;
  flex: 0 0 40px;        /* don't grow or shrink in a flex row */
}

#iD .a3 {
  position: absolute;
  inset: 0;
}

.a4 {
  flex: 1;
}

#dB {
  /* height: 44px; */
  display: flex;
  align-items: center;
}

#it {
  min-height: 56px;
}
/* HAS MOBILE MEDIA QUERY */

#dC {
  flex: 1;
  font-size: 16px;
  color: #1a73e8;
  /* font-style: italic; */
  line-height: 130%;
  /* margin-left: 16px; */
  padding-top: 12px;
}

#dE {
  display: flex;
  height: 100% !important;
  width: 100%;
}

/* New MainWrapper style computation: 970+16+16+18+480 = 1500. 1540 is common browser size, so we can say 1520 and allow for gap. */
#fP {
  height: 100% !important;
  /* max-width: 1440px; */
  min-width: 0;
  /* width: 1520px; */
  width: 100%;
}

#de {
  height: 100% !important;
  display: flex;
  /* flex-direction: row-reverse; */
  margin-top: 12px;
  margin-left: 16px; /* Offset more from left, with left ad */
  margin-right: 16px;
  justify-content: center;
}
/* HAS MOBILE MEDIA QUERY */

#ff {
  flex: 1;
  min-width: 328px; /* Specifically chosen to allow full width on 360px viewports -16px -16px margins */
  /* width: 1000px; */
  /* max-width: 1000px; */
  height: 100% !important;
}
/* Allow 20px for scroll bar plus 8px buffer while still allowing full 970 banner */

#i7 {
  /* height: calc(100% - 205px); */
  overflow-y: hidden;
  overflow-x: hidden;
  background-color: #fff;
  flex: 1;
  display: flex;
  flex-direction: column;
}

#i8 {
  position: relative; /* for right-aligned context menu */
}

#i9 {
  display: flex;
}

#ja {
  flex: 1;

  /* Let children shrink */
  min-width: 0;
}

#fk {
  flex: 0;
  display: flex;
  /* flex-direction: column; */
  /* margin-right: 10px; */
  background-image: linear-gradient(to right, white 1%, #FFFFBE);
  will-change: transform;
  transition: transform 0.4s ease-out;
  border-left: #ccc 1px solid;
  padding-left: 18px;
}

.br {
  transform: translateX(350px);
}

#fg {
  display: flex;
  height: 44px;
  /* margin-left: 12px; */
  padding-left: 2px;
  margin-right: 10px;
  justify-content: right;
  align-items: center;
  margin-bottom: 4px;
  margin-top: 4px;
}

#du {
  width: 40px;
  height: 40px;
  /* color: #1a73e8; */
  /* margin-left: 4px; */
  /* margin-right: 4px; */
}

#dp {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: right;
  margin-right: 10px;
}

#dy {
  margin-right: 12px;
}

.zebib {
  border-radius: 50%;
  background-color: #fff;
}

/* BEGIN MAIN BUTTON STYLES */
.zeb {
  display: inline-block;
  font-family: 'Roboto',sans-serif;
  text-transform: none;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .25px;

  background: 0 0;
  border: none;
  border-radius: 4px;
  color: rgba(0, 0, 0, 0.54);
  position: relative;
  height: 36px;
  margin: 0;
  min-width: 64px;
  overflow: hidden;
  outline: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  line-height: 36px;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: rgba(255,255,255,0);
  vertical-align: middle;

  will-change: box-shadow, color;

  /* Backgroudn color moving OUT of transition because we use the custom background signature gradient which cannot be animated */
  /* background-color .2s cubic-bezier(.4,0,.2,1); */
  transition: box-shadow .2s cubic-bezier(.4,0,1,1), color .2s cubic-bezier(.4,0,.2,1)
}
/* HAS MOBILE MEDIA QUERY */
/* Needs to go here manually for complicated overrides on mid-wdith */
@media (max-width: 639px) { .zeb { min-width: 44px; padding-left: 6px; padding-right: 6px;} }

/* These go right after zeb to overide e.g. transition */
.zeib {
  color: rgb(33,150,243);
  border-radius: 50%;
  height: 36px;
  width: 36px;
  margin-left: 0;
  margin-right: 0;
  min-width: 32px;
  padding: 0;
  overflow: hidden;
  line-height: normal;

  /* FIXME */
  transition: background-color .2s cubic-bezier(.4,0,.2,1), color .2s cubic-bezier(.4,0,.2,1);
}

.zeib:hover, .zeib:focus {
  background-color: rgba(158,158,158, .2);
  color: #1a73e8;
}

.zebi {
  vertical-align: middle;
  width: 20px;
  height: 20px;
  font-size: 20px;
  margin-right: 6px;
}
/* HAS MOBILE MEDIA QUERY */

.zebi-right {
  padding-left: 4px;
  padding-right: 2px;
}

/* This is for icons for buttons like 'convert action' and is used for better alignment */
.zebie {
  margin-bottom: 3px;
}

.zebil {
  vertical-align: middle;
  width: 24px;
  height: 24px;
  font-size: 24px;
  margin-right: 6px;
}
/* HAS MOBILE MEDIA QUERY */

.zeibi {
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-12px,-12px);
  line-height: 24px;
  width: 24px;
}

.zeibi-blue {
  color: #1a73e8 !important;
}

.zeibil {
  font-size: 24px;
}

.zeibxl {
  font-size: 36px;
  transform: translate(-18px, -18px);
}

.ba {
  margin-right: 8px !important; /* override zebil margin */
}

.ao {
  padding-top: 2px;
}

.zeb:disabled {
  color: rgba(0,0,0,.25);
  cursor: default;
  pointer-events: none;
}

/* NOTE I think we can further consolidate these box shadows between zebr and zebrc */

.zebr {
  background: rgba(158,158,158,.2);
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 6px 0 rgba(0,0,0,.12);
  color: rgb(255,255,255);

  /* box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15) */
}

.zebr:disabled {
  box-shadow: 0 0 0 0 rgba(0,0,0,.2), 0 0 0 0 rgba(0,0,0,.14), 0 0 0 0 rgba(0,0,0,.12);
  background: rgba(0,0,0,.12);
  color: rgba(0,0,0,.37);
  cursor: default;
  pointer-events: none;
}

.zebrc {
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
  background: rgb(33,150,243);
  color: rgb(255,255,255);
}

.zebrc:disabled {
  box-shadow: 0 0 0 0 rgba(0,0,0,.2), 0 0 0 0 rgba(0,0,0,.14), 0 0 0 0 rgba(0,0,0,.12);
  background: rgba(0,0,0,.12);
  color: rgba(0,0,0,.37);
  cursor: default;
  pointer-events: none;
}

.zeb:not(.zebrc):hover {
  background: rgba(158,158,158, .2);
}

/* TODO: Box shadows can be consolidated here with zebr */
/* NEW: Also adding a special case here where we apply this hover tag when #ep is hovered */
.zebc:focus, .zebc:hover, .zebr:hover, .zebr:focus, #em:hover > #en, #gM:hover > #gp {
  opacity: 0.92;


  /* box-shadow: 1px 3px 5px 0 rgba(60, 64, 67, .3), 1px 2px 4px 2px rgba(60, 64, 67, .15) */

  /* old-style box shadow */
  /* box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); */

  /* New style box-shadow */
  box-shadow: 0 1px 3px 0 rgba(60,64,67,.3),0 4px 8px 3px rgba(60,64,67,.15);
}

.zebc:hover, #em:hover > #en, #gM:hover > #gp {
  background: rgba(158,158,158, .2);
  color: #1a73e8;
}

.zebc:focus {
  /* background: linear-gradient(135deg, #217bfe, #078efb 60%, #ac87eb); */
  background: linear-gradient(135deg, #217bfe40, #078efb40 33%, #ac87eb80);
}

.zebrc:hover, .zebrc:focus {
  box-shadow: 0px 3px 5px -2px rgba(0, 0, 0, 0.2), 0px 6px 7px 1px rgba(0, 0, 0, 0.14), 0px 2px 12px 1px rgba(0, 0, 0, 0.12);
  opacity: 0.92;
}

.zebrc:focus {
  background: linear-gradient(135deg, #217bfe, #078efb 60%, #ac87eb);
}

/* TODO I THink we can consolidate these with with .ZEMS too! */
.zebrc:active, .zebr:active {
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}

/* Focus + Hover together — make primary button feel “extra active” */
.zebrc:hover:focus {
  /* Lighten the primary blue without changing the base color token */
  background:
    linear-gradient(0deg, rgba(255,255,255,.10), rgba(255,255,255,.10)),
    rgb(33,150,243);

  /* Slightly stronger lift than your current :hover/:focus shadow */
  box-shadow:
    0px 4px 6px -2px rgba(0,0,0,0.20),
    0px 6px 8px  1px rgba(0,0,0,0.14),
    0px  4px 8px  2px rgba(0,0,0,0.12);

  /* Make it pop a touch more than the 0.92 you use elsewhere */
  opacity: 0.95;
}


/* Keep focus-alone flatter than hover (does not affect :hover:focus) */
.zebrc:focus:not(:hover) {
  /* back to base shadow to de-emphasize plain focus */
  /* MJP: Commenting this out to still show focus when focused not hovered */
  /* box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12); */
}

.zebr:hover, .zebr:active {
  color: #1a73e8;
}

.zebr:focus {
  /* background: linear-gradient(135deg, #217bfe, #078efb 33%, #ac87eb); */
  background: linear-gradient(135deg, #217bfe40, #078efb40 33%, #ac87eb80);
}

.zebc {
  color: rgb(33,150,243);
  transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);
}

.zebc:disabled {
  box-shadow: 0 0 0 0 rgba(0,0,0,.2), 0 0 0 0 rgba(0,0,0,.14), 0 0 0 0 rgba(0,0,0,.12);
  background: rgba(0,0,0,.12);
    color: rgba(0,0,0,.37);
    cursor: default;
    pointer-events: none;
}

.zebrt {
  margin-left: 12px;
}

.zebl {
  margin-left: 12px;
}
/* HAS MOBILE MEDIA QUERY */

#hI {
  max-width: 24px;
  margin-right: 14px;
  cursor: default;
  user-select: none;
}
/* HAS MOBILE MEDIA QUERY */

#hK {
  width: 22px;
  height: 22px;
  padding-left: 2px;
}

#hJ {
  color: #1a73e8;
  opacity: 0.8;
  font-size: 20px;
}

#hL {
  margin-right: 2px;
  /* margin-top: 4px; */
}

.bG {
  display: flex;
  align-items: center;
  max-width: 24px;
  margin-right: 3px;
  cursor: default;

  /* Manual height to ensure row height is fixed even when swapping in delete icons in Edit Zip mode. */
  width: 34px;
  height: 34px;
}

.bh .bG {
  margin-right: 8px;
}

.bh .bk {
  margin-left: 9px;
  margin-top: 2px;
}

.bH {
  width: 20px;
  height: 20px;
}

.b0 {
  color: #1a73e8;
  opacity: 0.8;
  font-size: 20px !important;
}

.bb {
  margin-top: 6px;
}

.bn {

}

/* show indents in tree view but not list or grid view */
.bi .bn, .bh .bn {
  display: none !important;
}

.bk {
  /* display: flex; */
}

.bd {
  font-weight: 500;
}

.bC {
  max-width: 68px;
  min-width: 68px;
  text-align: right;
  color: #5f6368;
  font-size: 13px;
  justify-content: right;
  padding-right: 12px;
  margin-right: 8px;
}
/* HAS MOBILE MEDIA QUERY */

.bp {
  max-width: 106px;
  min-width: 106px;
  width: 106px;
  padding-right: 16px;
  color: #5f6368;
  font-size: 13px;
  /* text-overflow: ellipsis; */

  /* Initially hidden unless toggled */
  /* display: none !important; */

  justify-content: right;
}

.b1 {
  flex: 1;
  display: flex;
  align-items: center;
  height: 100%;
  min-width: 0;
}

.bf {
  cursor: default;
}

/* Hide directories in list and grid views. Only shown in tree view. */
.bi .bf, .bh .bf {
  display: none !important;
}


.bj .b3, .bi .b3 {
  display: flex;
  border-bottom: 1px solid #eee;
  align-items: center;
  padding-left: 14px;
  padding-right: 8px;
  /* transition: background-color .2s cubic-bezier(.4,0,.2,1); */
  cursor: pointer;
}

.bh .b3 {
  display: flex;

  /* ONLY SET WIDTH - HEIGHT WILL BE SET AUTOMATICALLY */
  /* UPDATE: WIDTH will be set automatically by display: grid */
  /* width: 200px; */

  /* Placeholder background */
  /* background-color: #f0f0f0; */

  /* NEW: Flex-direction is column to support primary and thumbnail sections now. */
  flex-direction: column;

  /* border-radius: 20px 20px 0px 0px; */
  border-radius: 12px;

  background-color: #F1F4F8;

  cursor: pointer;
}

/* Set a row height specifically on primarySection. This height may differ from the row height we ultimately show for the primary section on the grid view.*/
.bj .by, .bi .by {
  height: 38px;
  min-height: 38px;
  max-height: 38px;
}

/* Set a row height specifically on primarySection. The grid item needs to be 100%, but the primary section is the row height in each case */
.bh .by {
  height: 38px;
  min-height: 38px;
  max-height: 38px;

  /* Ensure focus outline does not overhang */
  margin-right: 0;
  margin-left: 0;

  /* Better vertical alignment of text w/r/t thumbnail */
  margin-top: 2px;
}

/* Currently applies to rows regardless of view */
.b3:hover {
  background-color: #E0E3E7;
}


.bj {

}

.bi {

}

#eY .bj, #eY .bi {
  border-bottom: 2px solid rgba(33,150,243, 0.8);
}

.by {
  display: flex;
  /* height: 44px; */
  align-items: center;
  margin-right: 2px;
  margin-left: 2px;
  width: 100%;
  min-width: 0; /* required to fix ellipsis overflow expansion bug */
  height: 100%;
}

.bO {
  height: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* border: 2px red solid; */

  /* Reduced top margin to vertical align label */
  margin-top: 4px;
  margin-left: 10px;
  margin-bottom: 10px;
  margin-right: 10px;

  /* Initially hidden unless toggled on in Grid View. */
  display: none !important;
}

.bL {
  display: flex !important;
  align-items: center;
  justify-content: center;

  font-size: 100px;


  /* NOTE: Do not set width 100%, flex handles this */
  /* width: 100%; */

  /* border: 1px #ccc solid; */
  /* use margin on thumbnail section instead. */
  /* margin: 0 8px 8px; */

  object-fit: contain;

  /* White background should generally only appear for fallback thumbnails */
  background-color: white;

  /* NEW: Adding this gives Drive-like semantics where the thumbnails remain square and the height dynamically changes */
  aspect-ratio: 1 / 1;
  height: 100%;
}

/* TODO: This needs to be on the parent cell perhaps? It applies to both iconimg and image */
.bN {
  /* any specific customizations vs. base class of cell can go here. */
  /* Important to be able to make it fit. */
  /* height: 100%; */

  /* New approach: flex 1 and object-fit */
  /* flex: 1; */
  /* object-fit: cover; */

  /* New approach from img tag on Drive */
  /* height: auto; */
  /* width: 100%; */

  /* That didn't seem to work, but this did */
  height: 100%;
  object-fit: cover;
  width: 100%;

  object-position: center; /* default, overridden for text and PDF */

  transition: opacity 0.5s linear;

  /* Disable drag and drop of the thumbnail image itself, which is natively permitted */
  -webkit-user-drag: none; /* Chrome/Safari */
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;          /* Not yet widely supported */
  pointer-events: auto;     /* Keep clickable */

  /* NOTE: Do not use will-change here. Too CPU intensive for many thumbnails. */
}

/* Applied to thumbnailImg for text and PDF */
.bP {
    /* Ensures top-center-zoom without ever cropping the top */
  object-position: top center;
}

/* Specific customizations tfor thumbnailIconImg vs. base class thumbnail cell. */
.bM {
  /* color: black; */
  /* color: #757575; */
  color: 	#808080;
  opacity: 0.9;
}

.bY {
  opacity: 0.9;
  margin-top: 4px;
  height: 34px;
  width: 34px;
  margin-left: -6px;
}

.aw {
  color: #5f6368;
  opacity: 0.8;

  /* margin-top: -2px; */

  /* Right margin on buttons Now handled by searchIcon margin-left */
  /* margin-right: 8px; */
}

.aw:hover {
  color: #1a73e8;
}

#ea {
  margin-top: 0 !important;
  margin-right: 4px;
}

#d7 {
  color: #5f6368;
}

#d7:hover {
  color: #1a73e8;
}

#c4 {
  flex: 1;
  align-items: center;
  padding-left: 8px;
}

#dD {
  color: RGBA(0, 0, 0, 0.54);
  margin-right: 4px;
}

#gq {
  color: RGBA(0, 0, 0, 0.54);
  margin-right: 4px;
}

#hH {
  color: #5f6368;
  margin-right: 4px;
}

#hH:hover, #hH:focus {
  color: #1a73e8;
}

#hF {
  background-color: green;
}

#eV {
  font-size: 14px;
  margin-right: 17px;
  /* margin-left: 26px; */
  max-width: 60px;
  min-width: 60px;
  text-align: right;
  user-select: none;
}
/* HAS MOBILE MEDIA QUERY */

#eP {
  font-size: 14px;
  /* margin-right: 18px; */
  margin-left: 16px;
  margin-right: 26px;
  text-align: right;
  user-select: none;
}

#eO {
  font-size: 18px;
  min-height: 32px;
  cursor: default;
  color: #1a73e8;
  padding-bottom: 4px;
  padding-top: 6px;
  display: flex;
  border-bottom: 1px solid rgba(33,150,243, 0.8);
  /* margin-top: 4px; */
  /* margin-bottom: 4px; */
  align-items: center;
  height: 36px;
  padding-right: 2px;
  /* background-color: #fff; */
  /* background-color: #f0f4f9d0 */
  background-color: #f0f4f955;
}
/* HAS MOBILE MEDIA QUERY */

#eH {
  display: flex;
  align-items: center;
  /* height: 34px; */
  font-size: 14px;
  font-weight: 500;
  min-height: 30px;
  letter-spacing: .2px;

  border-bottom: 1px solid rgba(33,150,243, 0.8);
  /* margin-top: 4px; */
  /* margin-bottom: 4px; */

  color: #1a73e8;
  /* background-color: #fff; */
  /* background-color: #f0f4f9d0 */
  background-color: #eee;

  cursor: default;

  user-select: none; /* Prevent text selection */
}

.ar {
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 16px;
  padding-right: 16px;
  display: flex;
  align-items: center;
  height: 38px;

  /* color .1s cubic-bezier(.4,0,.2,1); */
  transition: background-color .2s cubic-bezier(.4,0,.2,1)
}

.ar:hover {
  /* override seleted column sort */
  /* background-color: lightyellow !important; */
  /* background-color: rgb(221 234 244) !important; */
  background-color: #C9E6FC !important;
}

#eD {
  flex: 1;
  /* margin-left: 50px; */
}

#eB {
  /* margin-right: 54px; */
  width: 88px;
  border-left: 1px solid #ccc;
}

#eF {
  /* margin-right: 26px; */
  /* margin-left: 26px; */
  /* max-width: 72px; */
  /* min-width: 72px; */
  /* text-align: right; */
  width: 92px;
  border-left: 1px #ccc solid;
  padding-left: 16px;
  padding-right: 16px;
}

.a2 {
  margin-left: 12px;
  /* font-weight: 500; */
  font-size: 16px;
}

#h1 {
  opacity: 0.9;
  margin-left: -5px;
  margin-top: -2px;
}

.bW {
  padding-top: 4px;
  padding-bottom: 4px;
}

.bX {
  /* font-weight: 500; */
  font-size: 16px;
  /* color: #222; */
  color: maroon;

  /* padding-top: 5px; */
  /* padding-bottom: 5px; */
}

#e1 {
  display: flex;
  align-items: center;
  justify-content: center;

  /* includes padding */
  max-height: 171px;
  min-height: 26px;

  font-size: 14px;
  padding-left: 16px;
  padding-top: 6px;
  padding-bottom: 6px;
  background-color: lightyellow;

  border-bottom: 1px #ccc solid;
  overflow-y: auto;
}
/* HAS MOBILE MEDIA QUERY */

#e2 {
  padding-right: 14px;
  cursor: default;
  color: #5f6368;
  font-size: 20px !important;
  width: 20px;
  height: 20px;
  opacity: 0.9;
}
/* HAS MOBILE MEDIA QUERY */

#e3 {
  flex: 1;
  white-space: normal;
  color: #5f6368;
  /* font-style: italic; */
  padding-right: 8px;
  max-height: 171px;
}

#e0 {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0px;
}


#eT {
  display: flex;
  flex: 1;
  margin: 0;
  margin-left: 10px;
  width: fit-content;
  align-items: center;
  gap: 4px;
  margin-left: 14px;
}

#eS {
  font-weight: 500;
  /* white-space: nowrap; */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-inline-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
/* HAS MOBILE MEDIA QUERY */

#eU {
  font-size: 14px;
  font-weight: 400;
  /* color: #777; */
  padding-left: 8px;
  /* letter-spacing: 0.025em; */
  white-space: nowrap;
  user-select: none;
}
/* HAS MOBILE MEDIA QUERY */

.bJ {
  font-size: 20px;
  max-width: 20px;
  max-height: 20px;
  width: 20px;
  height: 20px;
  /* color: black; */
  /* color: #757575; */
  color: 	#808080;
  opacity: 0.9;
}

.bK {
  padding-left: 12px;
  padding-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 8px;
}
/* HAS MOBILE MEDIA QUERY */

#gE {
  cursor: default;
  font-size: 96px;
  display: inline-block;
  margin-bottom: 32px;
  color: #d00000;
}
/* HAS MOBILE MEDIA QUERY */

#fS {
  cursor: default;
  font-size: 96px;
  display: block !important;

  /* Don't set icon
  /* color: #1a73e8; */
  opacity: 0.9;
  margin-bottom: 32px;
  color: 	#808080;
}
/* HAS MOBILE MEDIA QUERY */

#fR p {
  font-size: 16px;
  margin-top: 8px;
  color: #5f6368;
}

#ed {
  cursor: default;
  width: 96px;
  height: 96px;
  margin-bottom: 32px;
}
/* HAS MOBILE MEDIA QUERY */

#eb p {
  font-size: 16px;
  margin-top: 8px;
  color: #5f6368;
}

#ec {
  font-size: 20px;
  color: #222;
  margin-bottom: 20px;
}

.aK {
  cursor: default;
  width: 96px;
  /* height: 64px; */
  display: inline-block;
  margin-bottom: 32px;
  color: #1a73e8;
  opacity: 0.8;
}
/* HAS MOBILE MEDIA QUERY */

.aL {
  opacity: 1.0;
}

#hl {
  font-size: 18px;
  color: #222
}

#hj {
  font-size: 16px;
  margin-top: 16px;
  color: #5f6368;
}

#hk {
  font-size: 14px;
  margin-top: 6px;
  color: #5f6368;
  /* font-style: italic; */
}

#gF {
  font-size: 18px;
  color: #222
}

#fT {
  font-size: 20px;
  color: #222;
  margin-bottom: 20px;
}
/* HAS MOBILE MEDIA QUERY */

#gB {
  font-size: 16px;
  margin-top: 16px;
  color: #5f6368;
}
/* HAS MOBILE MEDIA QUERY */

#gD {
  font-size: 14px;
  margin-top: 6px;
  color: #5f6368;
  /* font-style: italic; */
}

#he {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0); /* Transparent background. Adjust if needed */
  z-index: 10; /* Ensure it's on top */
  display: flex; /* Use flexbox for centering */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */

   /* Let clicks pass through to video/controls & nav columns */
  /* pointer-events: none; */
}


#hf {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  /* font-size: 108px; */
  font-size: 10vw; /* Scale font size with viewport width */
  font-weight: bold;
  color: rgba(255, 0, 0, 0.6);
  text-align: center;
  white-space: nowrap;
  letter-spacing: 8px;
  cursor: default; /* Default cursor */
  user-select: none; /* Prevent text selection */
}

#gi {
  height: 100%;
  overflow-y: hidden;
  background-color: #fff;
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.bx {
  height: 100% !important;
}

/* ============================================================
   PREVIEW NAV OVERLAYS — LEFT / RIGHT NAVIGATION COLUMNS
   Driven by CSS hover; JS manages inactivity gating & feature toggle
   ============================================================ */

/* ---- Overlay zones ----
   Absolute-positioned columns on left/right sides of preview.
   Initially hidden via opacity/visibility/pointer-events.
   Hovering #gs (when NOT .overlay-idle) reveals them. */
.aO {
  position: absolute;
  top: 0;
  /* bottom: 0; */               /* replaced by fixed-height to leave controls clickable */
  height: calc(100% - 100px);    /* fixed 100px pass-through for native video controls */
  width: 120px;                 /* Adjust column width as needed */
  display: flex;
  align-items: center;

  opacity: 0;                  /* Animated fade in/out */
  visibility: hidden;          /* Prevent hover/focus when hidden */
  pointer-events: none;        /* No hit-testing when hidden */

  transition: opacity 0.25s ease;
  z-index: 2000;               /* Above preview tools (z-index 1000) */

  /* Pointer appears only on buttons */
  /* cursor: default; */
  cursor: pointer;             /* was: default */

  /* prevent icon, events etc. for panzoom */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* ---- Column positioning ---- */
/* INSETTING 15px on right to accommodate scrollbar */
/* --- Fix flex alignment keywords (standards-compliant) --- */
#gY  {
  left: 16px;
  justify-content: flex-start;   /* was: left */
}

#g1 {
  right: 16px;
  justify-content: flex-end;     /* was: right */
}

/* Keep chevrons visually centered relative to full preview height.
   We reduced column height by 100px; push chevrons down by half (50px). */
#g0,
#g2 {
  margin-top: 50px;            /* 100px / 2 */
}

/* ---- Hover-driven visibility ----
   Shown only when:
   - previewContent is hovered
   - AND it's not idle (idle class toggled by JS)
   Pointer-events restored so user can reach buttons inside columns. */
#gs:not(.overlay-idle):hover .aO {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ---- Hard hide for feature OFF ----
   Applied by JS when ENABLE_PREVIEW_NAV_HOVER_OVERLAY is false. */
.aO[hidden] {
  display: none !important;
}

/* ============================================================
   PREVIEW NAV BUTTONS — CIRCULAR ICON BUTTONS INSIDE COLUMNS
   ============================================================ */

/* ---- Button base ----
   Circular hit target, icon centered with flexbox.
   Background appears only on hover (column or button).
   Default background is transparent. */
.aP {
  display: inline-flex;        /* Perfect icon centering */
  align-items: center;
  justify-content: center;

  height: 44px;                /* Comfortable hit area */
  width: 44px;
  padding: 0;                  /* Avoid icon offset */
  box-sizing: border-box;

  border: none;
  border-radius: 9999px;       /* Full circle */
  background: transparent;     /* Circle appears only on hover */
  color: #fff;

  cursor: pointer;
  pointer-events: auto;        /* Enable clicking */
  -webkit-tap-highlight-color: transparent; /* Mobile tap UX */

  background: rgba(0, 0, 0, 0.05); /* faint halo */

  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}


/* ---- Column hover discoverability ----
   When hovering over the overlay column (but NOT the button),
   lightly tint the button background to aid discoverability. */
.aO:hover .aP:not(:hover) {
  background: rgba(0, 0, 0, 0.10); /* lighter tint than direct hover */

  /* Important: must specify style; base is `border: none` */
  border: 1px solid #eee;          /* was only width+color */
  box-sizing: border-box;           /* keep circle size constant */
}

/* ---- Button hover ----
   Show a darker circle background, change icon color to blue,
   and add a light border for contrast on dark backgrounds. */
.aP:hover {
  background: rgba(0, 0, 0, 0.2);
  /* CAPTION_BLUE */
  /* color: #1a73e8; */
  border: 1px solid #eee;      /* Light outline for contrast */
  box-sizing: border-box;      /* Keep circle size consistent */
}

/* ---- Button active ----
   Slight scale down for press feedback. */
.aP:active {
  transform: scale(0.98);
}

/* ---- Icon inside button ----
   Material icon font, scaled to fit comfortably within circle. */
.aP .zm {
  font-size: 36px;
  line-height: 1;
  display: inline-block;
}

/* ---- Icon inside button ----
   Material icon font, scaled to fit comfortably within circle. */
.aQ .zm {
  font-size: 20px;
  line-height: 1;
  display: inline-block;
}

.aQ {
  width: 32px;
  height: 32px;
}

/* --- Right overlay internal layout --- */
/* Container that holds the centered chevron AND the absolute top buttons */
#g3 {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;                  /* This container itself is centered vertically by the overlay */
  align-items: center;            /* vertical centering for the chevron inside this container */
  justify-content: flex-end;      /* keep content at the right edge of the column */
}

/* Top buttons live in an absolute layer at the top-right; they don't affect centering */
#g4 {
  position: absolute;
  /* top: 8px; */
  /* Offset a little from the top so we don't obscure PDF top-aligned toolbar buttons. */
  top: 64px;
  right: 2px;
  display: flex;
  flex-direction: column;
  gap: 8px;                       /* vertical spacing you mentioned */
  pointer-events: none;           /* container ignores hits; buttons re-enable */
}

/* Re-enable pointer events on the actual buttons inside the top container */
#g4 .aP {
  pointer-events: auto;
}


/* ============================================================
   END PREVIEW NAV OVERLAYS — LEFT / RIGHT NAVIGATION COLUMNS
   ============================================================ */


#iW {
  background: url(images/zip.png) no-repeat center 30px;
  background-repeat: no-repeat;
  background-size: 80px 80px;
  background-attachment: fixed;
  background-position: center center;
  background-color: #e9f0fd;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #555;
  font-size: 36px;
  font-weight: 400;
  text-align: center;
  opacity: 0;
  vertical-align: middle;
  box-sizing: border-box;
  cursor: default;
  height: calc(100% - 206px);
  z-index: 50;
  border: 5px dashed #ccc;
  border-radius: 20px;
  will-change: opacity;
  transition: opacity .25s linear;
}

#iW:before {
   content: "Drop ZIP file here";
}

#iW:hover{
  color:#00f
}

#eJ {
  display: flex;
  height: calc(100% - 36px);

  opacity: 0;

  /* color: #777; */
  color: #5f6368;
  font-size: 26px;
  font-weight: normal;
  text-align: center;
  opacity: 0.5;
  vertical-align: middle;
  box-sizing: border-box;

  cursor: default;

  /* Full width (cover the whole page) */
  /* width: calc(100% - 24px); */


  /* Full height (cover the whole page) */
  /*  height: calc(100% - 108px); */

  /*
  margin-left: 12px;
  margin-top: 12px;
  margin-bottom: 12px;
  margin-right: 12px;
  */

  margin: 18px;

  /*
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  */

  z-index: 50;

  /* margin-bottom: 8px; */

  /* position: relative; */
  /* position: absolute; */

  border: 6px dashed #ccc;

  border-radius: 20px;

  /* background-color: rgb(233, 240, 253); */
  background-color: #ebf0f9;
  /* transition: background-color .3s ease-out; */
  will-change: opacity, background-color;
  transition: opacity .3s ease-out, background-color .3s ease-out;

  /* flex: 1; */
  min-height: 103px;


  flex-direction: column;
  /* flex-wrap: wrap; */
  /* flex-shrink: 1; */
  flex-shrink: 0;
  /* max-height: 100px; */
  justify-content: center;
  align-items: center;
  /* flex-flow: row; */
  flex-wrap: nowrap;
}

#eL {
  margin-bottom: 6px;
  padding-left: 6px;
  padding-right: 6px;
  pointer-events: none;
}

#eM {
  margin-top: 16px;
}

#eN {
  height: 64px;
  width: 64px;
}

.ae {
  border: 1px solid rgba(0,0,0,0.12);
  /* border-radius: 16px; */

  border-top-left-radius: 16px;
  border-top-right-radius: 16px;

  /* box-shadow: 0 2px 8px rgba(0,0,0,0.1), 0 0 6px rgba(0,0,0,0.1); */

  /* margin-bottom: 12px; */
  /* margin-top: 4px; */
  box-sizing: border-box;
  /* width: calc(100% - 24px); */
  /* max-width: 970px; */
}
/* HAS MOBILE MEDIA QUERY */
/* On true mobile, remove shadow / border (leave margins alone) */


.a6 {
  padding-top: 6px;
  margin-bottom: 32px;
}

#iL {
  margin-top: 36px;
}

#gs {
  width: 100%;

  /* This causes issues in full screen mode, do we need to have this?
  /* height: calc(100% - 106px); */
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;

  background-color: #fff;
  position: relative; /* to support restricted preview overlay */
  overflow: hidden; /* prevent scrolling from watermark */
}

/* Special styling for these buttons -- slower hover */
/* TODO: Align these with zebc etc. */
#gp, #gr, #d3 {
  /* will-change: box-shadow, background-color, color; */
  transition: box-shadow .2s cubic-bezier(.4,0,1,1), background-color .2s cubic-bezier(.4,0,.2,1), color .2s cubic-bezier(.4,0,.2,1);
}

#gp {
  margin-left: 8px;
}
/* HAS MOBILE MEDIA QUERY */

.aN:hover, .aa:hover {
  color: #1a73e8;
}

.aN, .aa {
  color: #5f6368;
  opacity: 0.8;
}

.aM:hover {
  color: #1a73e8;
}

.aM {
  color: #5f6368;
  opacity: 0.8;
  margin-left: 8px;
  width: 36px;
  height: 36px;
}
/* HAS MOBILE MEDIA QUERY */

.bw {
  font-size: 14px;
  /* color: #777; */
  padding-left: 8px;
  /* letter-spacing: 0.025em; */
}

.aT:hover {
  color: #1a73e8;
}

.aT {
  color: #5f6368;
  opacity: 0.8;
}

#eo {
  display: flex;
  flex: 1;
  white-space: normal;
  align-items: center;
}

#em {
  display: flex;
  /* flex: 1; */
  color: #202124;
  margin-left: 16px;
  white-space: normal;
  align-items: center;

  min-height: 44px;
  height: 44px;
  max-height: 44px;
  /* padding-bottom: 8px; */
  margin-left: 14px;
  margin-right: 10px;
}

#ep {
  flex: 1;
  cursor: default;
  margin-left: 4px;
  font-size: 16px;
  cursor: pointer;
}

#en {
  width: 32px;
  height: 32px;
}

#d3, #if, #hO, #iK {
  color: #5f6368;
  opacity: 0.8;
  margin-left: 4px;
}

#iK {
  margin-right: 2px;
}

#h2 {
  margin-right: 9px;
}

#hO {
  /* slightly smaller */
  height: 30px;
  width: 30px;
}

#d3:hover, #d3:focus, #hN:hover, #hN:focus, #if:hover, #if:focus, #hO:hover, #hO:focus, #iK:focus {
  color: #1a73e8;
}

#fe {
  color: #5f6368;
  opacity: 0.8;
}

#fe:hover {
  color: #1a73e8;
}

#hN {
  color: #5f6368;
  /* color: #1a73e8; */
  opacity: 0.7;
  min-width: 32px;
  height: 32px;
  width: 32px;
  margin-right: 16px;
  margin-left: 8px;
}

#hy {
  height: 28px;
  line-height: 28px;
  color: #555;
}

#hy:hover, #hy:focus {
  color: #1a73e8;
}

.ax {
  color: #5f6368;
  opacity: 0.8;
  margin-left: 12px;
  width: 36px;
  height: 36px;
}
/* HAS MOBILE MEDIA QUERY */

.ax:hover {
  color: #1a73e8;
}

.aH {
  margin-right: 8px;
}

.ab {
  margin-right: 4px;
}

#hp {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  height: 48px;
  padding-top: 6px;
  user-select: none;
}
/* HAS MOBILE MEDIA QUERY */

#gX {
  margin-left: 29px;
  /* margin-right: 2px; */
  white-space: nowrap;
  margin-right: 10px;
}
/* HAS MOBILE MEDIA QUERY */

#gL {
  display: flex;
  flex-wrap: wrap;
  cursor: default;
  height: 48px;
  align-items: center;
}
/* HAS MOBILE MEDIA QUERY */

#gK {
  background-color: #fff;
  position: relative;
}

#ho {
  margin-right: 2px;
  white-space: nowrap;
}

#e4 {
  display: flex;
  flex-wrap: nowrap;
  justify-content: right;
  margin-right: 6px;
  align-items: center;
  flex: 0 0 auto;
}

/* Every direct child of the toolbar is a fixed-size flex item */
#ft > * {
  flex: 0 0 auto;
  min-width: max-content;     /* keep each button on one line (no squeezing text) */
}

#jc {
  /* margin-left: 4px; */
}

#jd {

}

#jb { }

.a9 {
  color: #5f6368;
  /* color: #1a73e8; */
  opacity: 0.7;
  min-width: 32px;
  height: 32px;
  width: 32px;
  margin-left: 4px;
}

.aS {
  color: #5f6368;
  /* color: #1a73e8; */
  opacity: 0.8;
  min-width: 48px;
  margin-right: 2px;
  margin-left: 6px;
}

#hu {
  /* toggled on by default */
  background-color: #d7e3fb;
}

#gj {
  margin-right: 10px;
  white-space: nowrap;
  user-select: none;
}
/* HAS MOBILE MEDIA QUERY */

#gN {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-width: 0;             /* allow this block to shrink */
}

#gM {
  display: flex;
  /* align-items: center; */
  align-items: stretch;   /* let children fill the row height */
  gap: 6px;
  min-width: 0;             /* allow children to shrink */
}

#hw {
  margin-left: 0;
  flex: 1 1 0%;
  min-width: 0;
  align-self: stretch;     /* fill the row height */
  display: flex;           /* center the inner clamped text */
  align-items: center;     /* ← vertical centering */
  cursor: pointer;
}

/* Inner wrapper keeps the 2-line clamp intact */
#hv {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
  width: 100%;             /* correct ellipsis width */
  font-size: 16px;
  color: #5f6368;
  user-select: none;
}

#gU {
  cursor: default;
  color: #1a73e8;
  display: flex;
  align-items: center;
  flex: 1;
  margin-left: 14px;
  overflow: hidden;
  /* white-space: nowrap; */
}
/* HAS MOBILE MEDIA QUERY */

#gR {
  font-size: 18px;
  margin-left: 12px;
  text-overflow: ellipsis;
  overflow: hidden;
  padding-right: 8px;
  font-family: 'Roboto', sans-serif;
  max-height: 42px;
}
/* HAS MOBILE MEDIA QUERY */

#gV {
  font-size: 14px;
  margin-left: 8px;
}

#gS {
  color: #1a73e8; /* default if not otherwise colorized, but could be grey */
  cursor: default;
  max-height: 24px;
  max-width: 24px;
  opacity: 0.9;
  user-select: none;
}

#gT {
  font-size: 24px;
  /* Put color on parent, so iconImg colorization overrides can have an effect */
}

#hm {
  cursor: default;
  margin-left: 14px;
  margin-right: 7px;
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
}
/* HAS MOBILE MEDIA QUERY */

#gQ {
  width: 100%;
  height: 100%;
  min-width: 300px; /* Nears max out on mobile @ 360px screen size */
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* transition: transform 0.03s linear, transform 0.12s cubic-bezier(0, 0, 0.2, 1), transform 0.12s cubic-bezier(0, 0, 0.2, 1); */
  transition: transform 0.1s linear;
  filter: drop-shadow(0px 0px 3px rgba(0,0,0,.3))
          drop-shadow(0px 0px 10px rgba(0,0,0,.3));
}


#ht {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
}

#go {
  width: 100%;
  height: 100%;
  text-align: center;
  margin-top: 32px;
}

#hs {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.aI {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Set dynamically from app code */
.bv {
  width: 100%;
  height: 100%;
  border: none;
}

#gO {
  /* MAR 2025: No longeer need any styling here */

  /* max-width: 100%; */
  /* max-height: 100%; */
  /*  display: flex; */
  /* height: 100%; */
  /* justify-content: center; */
  text-align: center;
  height: 100%;
  width: 100%;

  /* !important because imageTools removes this. Maybe put image tools on a delay? */
  will-change: opacity;
  transition: opacity .15s linear !important;
}

#g9 {
  width: 100%;
  height: 100%;
}

#ha {
  width: 100%;
  height: 100%;
}

#hn {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: auto;
  font-family: 'Roboto Mono', monospace;
  font-size: 14px;
}

#gC {
  will-change: opacity;
  transition: opacity 0.25s linear !important;
}

#gl {
  width: 100%;
  height: 100%;
}

#dk {
  overflow-y: scroll;
  height: calc(100% - 68px);
}

#dm {
  font-family: 'Roboto Mono', monospace;
  font-size: 14px;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  /*
  overflow-y: auto;
  overflow-x: auto;
  */
  white-space: pre-wrap;
  overflow-wrap: break-word;
  cursor: text;
}

pre {
  border: none !important;
  white-space: pre-wrap;
  margin: 4px;
  cursor: text;
  overflow-wrap: break-word;
  font-family: 'Roboto Mono', monospace;
  font-size: 14px;
}
/* HAS MOBILE MEDIA QUERY */

#hq {
  white-space: pre-wrap;
  margin: 8px;
  cursor: text;
  overflow-wrap: break-word;

  /* prevent any pretty-print padding to be applied, it does 2px for some reason */
  padding: 0 !important;
}

.aJ {
  justify-content: center;
  text-align: center;
  margin-right: 16px;
  margin-left: 16px;
  margin-top: -32px;
}

.bV {
  background: linear-gradient(17deg, #4285f4 12%, #9b72cb 40%, #d96570 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.bU {
  background: linear-gradient(135deg, #217bfe, #078efb 33%, #ac87eb);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.bT {
  background: linear-gradient(90deg, #3186ff, #346bf1 50%, #4fa0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-size: 100% 200%;
}

/* Apply this to your existing content element */
.bR {
  position: relative;     /* anchor for ::before */
  overflow: hidden;
  background: transparent;
  border-radius: inherit;  /* auto-match container radius */
}

/*
  PARAMETERS (edit in the ::before rule below):

  - Image URL:            background-image: url("https://persistent.oaistatic.com/burrito-nux/640.webp");
  - Blur radius:          filter: blur(28px);
  - Scale/Zoom:           transform: translate(0px, -20px) scale(1.02);
  - Offset:               translate(Xpx, Ypx) inside transform (e.g., 0px, -20px)
  - Opacity:              opacity: 0.60;
  - Bleed (edge hiding):  left/top/right/bottom: -80px;
  - Fade mask:            -webkit-mask-image / mask-image linear-gradient(...)
*/

.bR::before {
  content: "";
  position: absolute;

  /* No bleed; don't expand scroll area */
  inset: 0;

  /* Bleed to hide blur edges (increase if you see edges) */
  /* left: -80px; */
  /* right: -80px; */
  /* top: -80px; */
  /* bottom: -80px; */

  /* IMAGE + COVER */
  /* background-image: url("https://persistent.oaistatic.com/burrito-nux/640.webp"); */
  background-image: url("images/ze_signature_background_640.webp");
  background-size: cover;
  background-position: center;

  /* Zoom + offset + blur */
  /* transform: translate(0px, -20px) scale(1.02); */

  /* Oversize via transform so it won't affect scrollbars */
  /* transform: translate(0px, -30px) scale(1.08); */

  /* This is the correct transform that seems to work w/ no scrollbars */
  /* but doesn't look like we need it. */
  /* transform: translate(0px, 0px) scale(1.00); */

  filter: blur(25px);

  /* Opacity + gentle fade-out */
  opacity: 0.35;
  -webkit-mask-image: linear-gradient(to bottom, #fff, #0000);
          mask-image: linear-gradient(to bottom, #fff, #0000);

  pointer-events: none;
  z-index: 0;
  will-change: transform, filter;
  backface-visibility: hidden;
  border-radius: inherit;  /* clip to same roundness */
}

/* Ensure your real content sits above the background layer */
.bR > * {
  position: relative;
  background: transparent;
  /* Let .ae (or whatever) control the element’s radius */
  /* Optional: create a stacking context so ::before sits behind cleanly */
  isolation: isolate;
}

.bS::before {
  opacity: 0.15;
}

/* Invisible by default; becomes visible when selected */
.bo {
  color: white;      /* hidden but selectable */
  white-space: nowrap;     /* avoid awkward wraps */
}

/* Make it readable when user selects text */
.bo::selection,
.bo::-moz-selection {
  color: inherit;          /* use surrounding text color on selection */
}

#fs {
  /* background: linear-gradient(135deg, #217bfe, #078efb 33%, #ac87eb); */
  /* background: linear-gradient(17deg, #4285f4 12%, #9b72cb 40%, #d96570 70%); */
  font-size: 26px;
  font-weight: normal;
  /* font-weight: 500; */
  /* color: #c00000; */
  /* color: #5f6368; */
  margin: 0;
  white-space: nowrap;
  padding-left: 14px;
  padding-right: 20px;
  /* letter-spacing: -.25px; */
}
/* HAS MOBILE MEDIA QUERY */

h1 {
  padding: 0;
  margin: 0;
  cursor: default;
  font-size: 18px;
  font-weight: normal;
  color: #5f6368;
  line-height: normal;
}
/* HAS MOBILE MEDIA QUERY */

#fr {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* HAS MOBILE MEDIA QUERY */
/* Hide subtitle on true mobile */


#fE {
  line-height: normal;
  font-weight: normal;
  cursor: default;
  font-size: 20px;
  /* color: #5f6368; */
  color: #202124;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-inline-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
/* HAS MOBILE MEDIA QUERY */
/* Reduce font size for main label on mobile */

#fF {
  display: flex;
  flex: 1;
  margin: 0;
  margin-left: 10px;
  width: fit-content;

  flex: 1 1 auto;             /* the part that should yield space */
  min-width: 0;               /* allow ellipsis inside */
  overflow: hidden;
}

#hW {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  align-items: center;
  padding-left: 8px;

  /* Let children shrink */
  min-width: 0;
}

#hV {
  min-height: 48px;
  height: 48px;
  max-height: 48px;
  display: flex;
  align-items: center;
  padding-bottom: 8px;
  margin-left: 10px;
  margin-right: 10px;
  font-size: 16px;
  margin-left: 8px;
  user-select: none;
  min-width: 0;              /* allow left cluster to shrink */
}
/* HAS MOBILE MEDIA QUERY */
/* Reduce secondary text font size on mobile. */

#hU {
  padding-right: 12px;
  display: flex;
  align-items: center;
  margin: 0;
  line-height: normal;
  font-weight: normal;
  cursor: default;
  color: #5f6368;

  display: -webkit-inline-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  word-break: break-all;
  user-select: text;
}

h2 {
  font-family: 'Roboto', sans-serif;
  padding: 0;
  margin: 0;
  line-height: normal;
  font-weight: normal;
  /* color: #202124; */
  color: #5f6368;
  /* color: #4d5055; */
  font-size: 24px;
  padding-top: 2px;
  margin-bottom: 8px;
  width: fit-content;
}
/* HAS MOBILE MEDIA QUERY */
/* Reduce h2 font on mobile. */
/* TODO: This is causing screen shortening */


h3 {
  font-family: 'Roboto', sans-serif;
  padding: 0;
  margin: 0;
  line-height: normal;
  font-weight: normal;
  /* color: #202124; */
  color: #5f6368;
  /* color: #4d5055; */
  font-size: 20px;
  padding-top: 10px;
  margin-bottom: 6px;
}
/* HAS MOBILE MEDIA QUERY */
/* Reduce h2 font on mobile. */
/* TODO: This is causing screen shortening */


#iu {
  margin-bottom: 16px;
}
/* Reduce bottom margin for start card on mobile */
/* @media ( max-width: 639px ) { .startCard { margin-bottom: 16px; } } */
/* Also reduce height for smaller vertical screens. */
/* @media ( max-height: 655px ) { .startCard { margin-bottom: 16px; } } */

.bc {
  height: calc(100% - 68px) !important;
}
/* HAS MOBILE MEDIA QUERY */

#ee {
  display: block;
  /* color: #454545; */
  background-color: #fff;
  font-size: 16px;
  overflow-y: auto;
  height: calc(100% - 206px);
  overflow-x: hidden;
  margin-top: 4px;
  padding: 12px;
}
/* HAS MOBILE MEDIA QUERY */

#eg {
  display: flex;
  align-items: center;
  flex-flow: wrap;
}

#eh {
  width: 290px;
  height: 54px;
  margin-bottom: 16px;
  margin-top: 4px;
}

.an {
  box-shadow: 0 2px 8px rgb(0 0 0 / 10%), 0 0 6px rgb(0 0 0 / 10%);
}

#ei {
  width: 390px;
  height: 320px;
  margin-right: 16px;
  margin-bottom: 4px;
  margin-top: 4px;
}

#ej {
  width: 390px;
  height: 320px;
  margin-bottom: 4px;
  margin-top: 4px;
}

#df {
  display: block;
  /* color: #454545; */
  background-color: #fff;
  font-size: 16px;
  overflow-y: auto;
  height: calc(100% - 206px);
  overflow-x: hidden;
  margin-top: 4px;
  padding: 12px;
}
/* HAS MOBILE MEDIA QUERY */

#dg {
  color: maroon;
  font-family: 'Roboto Mono', monospace;
  font-size: 16px;
  margin-left: 16px;
  white-space: pre-line;
  margin-bottom: 64px; /* ensure we can scroll past and copy/paste error */
}

#fK {
  display: block;
  height: calc(100% - 206px);
  /* color: #454545; */
  background-color: #fff;
  font-size: 16px;
  padding-top: 12px;
  z-index: 1000; /* higher than any child like zipDropArea or mainScrollContentSubContainer */
}
/* HAS MOBILE MEDIA QUERY */


#fJ {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;

  padding-left: 12px;
  padding-right: 12px;

  /* Experimental, to support zip Drag and Drop overlay */
  position: relative;
}
/* HAS MOBILE MEDIA QUERY */

#fL {
  /* drop area will overlay and then underlay at opacity 0 */
  z-index: 100;
  position: relative;
}

#fJ p {
  margin-bottom: 12px;
}

li {
   font-family: 'Roboto', sans-serif;
   margin-bottom: 6px;
   line-height: 140%;
   font-size: 18px;
   padding-right: 16px;
   padding-left: 8px;
}
/* HAS MOBILE MEDIA QUERY */
/* Reduce padding for mobile with no indent. */

ul,ol {
  margin-top: 4px;
  margin-bottom: 20px;
  font-size: 18px;
  margin-left: 4px;
}
/* HAS MOBILE MEDIA QUERY */
/* Hide indent when in mobile mode, as well as in shortened desktop mode */

.ac {
  font-weight: 500;
  margin-bottom: 0 !important;
}


p {
  color: #202124;
  font-size: 18px;
  font-family: 'Roboto', sans-serif;
  margin: 0 0 12px;
  padding: 0;
  font-weight: normal;
  line-height: 150%;
  letter-spacing: 0;
  padding-right: 16px;
}
/* HAS MOBILE MEDIA QUERY */
/* Reduce padding for mobile since no scroll bar. */

/* hideOnMobileOrDisplayInline */
.bm {
  display: inline;
}
/* HAS MOBILE MEDIA QUERY */

/* hideOnMobileOrDisplayBlock */
.homodb {
  display: block;
}
/* HAS MOBILE MEDIA QUERY */

/* hideOnDesktopOrDisplayInline */
.hododi {
  display: inline;
}
/* HAS MOBILE MEDIA QUERY */

/* hideOnDesktopOrDisplayInherit */
.homodinh {
  display: inherit;
}
/* HAS MOBILE MEDIA QUERY */

/* Unused */
/*
.as {
  display: block;
}
@media (min-width: 640px) { .as { display: none !important; } }
*/

#fv {
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  cursor: default;
  padding-bottom: 6px;
  background-color: #fff;
  padding-left: 14px;
  padding-right: 10px;

  border: 1px solid rgba(0,0,0,0.12);
  /* border-radius: 8px; */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1), 0 0 6px rgba(0,0,0,0.1);
  /* margin-bottom: 12px; */
}
/* Reduce margins for mobile */

#fy {
  display: flex;
  /* margin-left: 8px; */
  margin-right: 8px;
  padding-top: 8px;
  /* max-width: 1370px; */
}
/* HAS MOBILE MEDIA QUERY */

#fA {
  /* flex: 1; */
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  padding-right: 12px;
}

#hD {
  color: #5f6368;
  font-size: 16px;
  padding-right: 12px;
  font-family: 'Roboto', sans-serif;
}
/* HAS MOBILE MEDIA QUERY */

#hB {
  align-items: center;
  display: flex;
  flex: 1;
  justify-content: flex-end;
}

#hC {
  cursor: pointer;
  white-space: pre-line;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  /* padding-top: 2px; */
  background-color: #ddd;
  margin-left: 12px;
}
/* HAS MOBILE MEDIA QUERY */


#hE {
  width: 100%;
  box-shadow: 0 1px 2px 0 rgb(60 64 67 / 30%);
}

#hd {
  margin-top: 8px;
  box-shadow: 0 1px 2px 0 rgb(60 64 67 / 30%);
}

#hc {
  width: 100%;
  height: 5px !important;
}

#e7 {
  margin-top: 4px;
  margin-bottom: 8px;
}

#c2 {
  font-size: 16px;
  border-top: 1px solid #ddd;
  text-align: center;
  margin-top: 12px;
  padding-top: 20px;
  /* padding-bottom: 8px; */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* margin-bottom: 4px; */
}

#d5 {
  color: #5f6368;
  margin-bottom: 4px;
}

#ft {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  user-select: none;
  gap: 8px;
  margin-left: auto;          /* push toolbar to the right */
  flex: 0 0 auto;             /* do not grow */
  flex-shrink: 0;             /* do not shrink */
}

#fD {
  min-height: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  margin-left: 14px;
  margin-right: 10px;
  padding-top: 6px;
  min-width: 0;               /* critical so left side can compress */
}
/* HAS MOBILE MEDIA QUERY */

#fB {
  cursor: default;
  color: #5f6368;
  font-size: 24px !important;
  width: 24px;
  height: 24px;
  user-select: none;
}

#fO {
  margin-right: 2px;
}

#fm {
  display: flex;
  margin-right: 18px;
  height: 84px;
}
/* Has mobile media query to force hide */

#fo {
  display: block;        /* Valid for images */
  width: auto;           /* Maintain aspect ratio */
  object-fit: cover;
  aspect-ratio: 1 / 1;   /* Make it square — optional if width is auto */
  flex: 0 0 auto;        /* Don't let it grow or shrink */
  background-color: transparent;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  border-radius: 8px;  /* Optional, for soft corners */
}

#fn {
  display: flex;
  align-items: center;
}

#fl {
  display: flex;
  flex: 1;
  align-items: center;
  flex-direction: row;
}

#fi {
  height: 40px;
  background-color: transparent;
  width: 320px;
  margin-right: 8px;
 }

audio::-webkit-media-controls-panel {
 background-color: #e8f1fd;
}

#dW {
  /* color: maroon; */
  /* color: #5f6368; */
  color: #1a73e8;
  font-size: 16px;
  width: 100%;
  /* margin-top: 10px; */
  margin-bottom: 6px;
  /* min-width: 200px; */
  max-width: 1024px;
  /* width: 90%; */
  text-align: center;
}

#dS {
  margin-top: 8px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  /* margin-bottom: 8px; */
}

.bI {
  font-weight: 500;
}

#il {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 12px;
}

#ii {
  margin-top: 4px;
}

#ih {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 20px;
  /* min-height: 32px; */
  cursor: default;
  /* color: #1a73e8; */
  /* padding-bottom: 4px; */
  /* display: flex; */
  /* border-bottom: 1px solid rgb(33,150,243, 0.8); */
  /* margin-top: 4px; */
  padding-top: 6px;
  /* margin-bottom: 4px; */
  align-items: center;
  /* height: 36px; */
  /* padding-right: 2px; */
  padding-left: 12px;
  padding-right: 12px;

  margin-left: 12px;
  margin-right: 12px;
  will-change: opacity;
  transition: opacity 1.2s linear;
}
/* background-color: #fff; */


#dM {
  /* color: #222; */
  flex: 1;
}

#dN {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  color: #1a73e8;
  font-size: 18px;
  /* margin-bottom: 6px; */
}

#dV {
  margin-bottom: 4px;
  /* display: flex; */
  /* margin-top: 8px; */
  font-size: 16px;
  /* color: #222; */
  /* color: #5f6368; */
  /* color: #202124; */
  color: #747775;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

#eA {
  /* Important here. Dynamically expanded for media player. */
  height: calc(100% - 102px);
  display: flex;
  flex-direction: column; /* support file header stack */
}

#hA {
    height: calc(100% - 206px);
    overflow-y: hidden;
    /* background-color: #fff; */
    display: flex;
    flex-direction: row;
    gap: 16px;
}
/* HAS MOBILE MEDIA QUERY */

#iq {
  display: flex;
  gap: 16px;
  width: 100%;
}

#io {
  margin-bottom: 6px;
}

#ip {
  font-weight: normal;
  font-size: 18px;
  margin-bottom: 4px;
}

#hx {
  display: flex;
  flex: 1;
  overflow-y: hidden;
}

#iP {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}

.a7 {
  background: linear-gradient(135deg, #217bfe, #078efb 33%, #ac87eb);
}

.a8 {
  margin-bottom: 8px;
}

.a0 {
  font-size: 14px;
  border: 1px solid rgba(0,0,0,0.12);
  /* border-radius: 8px; */
  /* box-shadow: 0 2px 8px rgba(0,0,0,0.1), 0 0 6px rgba(0,0,0,0.1); */
  /* margin-bottom: 12px; */
  /* margin-top: 4px; */
  box-sizing: border-box;
  border-radius: 16px;
  /* width: calc(100% - 24px); */
  /* max-width: 970px; */

  /* background-color: #edf3fe; */
  background-color: #f3f6fc;


  padding-left: 16px;
  padding-right: 16px;
  padding-top: 10px;
  padding-bottom: 6px;

  margin-left: 16px;
  margin-right: 16px;
  /* margin-top: 10px; */
  /* margin-bottom: 10px; */

  display: flex;
  flex-direction: column;
  align-items: center;
  will-change: opacity;
  transition: opacity 0.8s linear;
}

.a1 {
  width: 100%;
}

.aY {
  display: flex;
  font-size: 18px;
  margin-bottom: 12px;
  margin-top: 4px;
  align-items: center;
  gap: 12px;
}

.aU {
  width: fit-content;
  text-align: center;
  background: linear-gradient(135deg, #217bfe, #078efb 33%, #ac87eb);
  display: -webkit-inline-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: 500;
  letter-spacing: -.50px;
  /* margin-bottom: 8px; */
}

.aV {
  flex: 1;
}

.aW {
  flex: 1;
}

#id {
  width: 100%;
  display: -webkit-inline-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -.75px;
  margin-bottom: 8px;
  line-height: 125%;
}

#ie {
  display: flex;
  align-items: right;
  width: 100%;
  text-align: center;
}

.aX {
  /* background: linear-gradient(135deg, #217bfe, #078efb 33%, #ac87eb); */
  display: -webkit-inline-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
  -webkit-background-clip: text;
  background-clip: text;
  /* background-clip: text; */
  color: transparent;
  /* -webkit-text-fill-color: transparent; */
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -.25px;
  margin-bottom: 8px;
  line-height: 125%;
  color: #747775;
  text-align: center;

  /* old items */
  /* color: #c00000; */
  /* color: #5f6368; */
  /* color: maroon; */
  /* margin: 0; */
  /* padding-left: 12px;
  /* font-weight: 500; */
}

.am {
  margin-bottom: 10px;
}

.aj {
  margin-left: 24px;
  margin-right: 24px;
}

.ai {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.25px;
  color: #202124;
  /* color: rgb(26, 115, 232); */
  /* color: #1f1f1f; */
  display: inline;
  margin-right: 3px;
}

.ak {
  display: inline;

  /* color: #747775; */
  /* color: #5f6368; */
  color: #202124;
  line-height: 120%;
  margin-bottom: 10px;
  margin-right: 3px;
}

.ah {
  color: #747775;
  font-size: 12px;
  display: block; /* needed to correctly set the line height */
  margin-bottom: 16px;
}

.af {
  text-align: center;
  padding-top: 8px;
}


.ag {
  margin-bottom: 10px;
}


#fN {
  display: flex;
  /* border-radius: 16px; */
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;

  background-color: white;
  /* padding-left: 12px; */
  /* padding-right: 12px; */
  padding-top: 4px;

  border: 1px solid rgba(0,0,0,0.12);
  box-sizing: border-box;

  /* Flex grow set to 0 initially, then to '1' to make it slide in 50% of the window */
  /* flex-basis: 0; */
  /* flex-grow: 0; */

  flex: 1;
  will-change: flex-grow;
  transition: flex-grow 0.7s ease-out;
}


#fM {
  /* background-color: #f2f6fc; */
  /* background-color: white; */

  display: flex;
  flex-direction: column;

  /* height: 100%; */
  /* padding-left: 8px; */
  /* padding-right: 8px; */

  flex: 1;
  /* height: calc(100% - 106px); */

  /* overflow-y: auto; */
  font-size: 14px;
  color: #202124;
  font-weight: normal;
  /* letter-spacing: .2px; */
  /* text-overflow: ellipsis; */
  /* white-space: nowrap; */
  /* margin-bottom: 4px; */
  font-family: 'Roboto', sans-serif;

  /* overflow-x: hidden; */
  /* background-color: #fbfbfb; */
  /* border-left: 1px solid #ccc; */

  gap: 8px;
}

#eI {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  font-size: 14px;
  color: #202124;
  font-weight: normal;
  /* letter-spacing: .2px; */
  text-overflow: ellipsis;
  white-space: nowrap;
  /* margin-bottom: 4px; */
  font-family: 'Roboto', sans-serif;
  overflow-x: hidden; /* precautionary */
  background-color: #fbfbfb;
}

#eX {
  flex: 1;
  font-family: 'Roboto', sans-serif;
  letter-spacing: .2px;
  background-color: #fff;

  /* NEW: Disable selection here, it's an interaction surface, not a text selection surface */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* sorted column background colors */
#eX.bE .bk {
  background-color: #f9f9f9;
}

#eX.bF .bC {
  background-color: #f9f9f9;
}

#eX.bD .bp {
  background-color: #f9f9f9;
}

/* Override sorted column cell background on row select */
#eX.bE .b4 .bk,
#eX.bF .b4 .bC,
#eX.bD .b4 .bp,
#eX .b4 .b1 {
  background-color: #C9E6FC !important;
}

/* Override sorted column cell background on row hover */
#eX.bE .b3:hover .bk,
#eX.bF .b3:hover .bC,
#eX.bD .b3:hover .bp,
#eX .b3:hover .b1 {
  background-color: #E0E3E7 !important;
}

/* IMPORTANT: The order here is important, needs to come *after the sorted-name definitions * */
.b3:hover {
  background-color: #E0E3E7 !important; /* Overrides the ziptable item selected */
}

/* IMPORTANT: The order here is important, needs to come *after the sorted-name definitions * */
.b4 {
  /* MARCH 2025: Use new background color ROW_SELECTED */
  /* background-color: #e8f1fd !important; */
  background-color: #C9E6FC !important;
}

.bj {
  /* List does not flex its items. */
  /* display: flex; */
}

/* Added when in grid mode. */
/* Important: Update the manual parameters in Core for computing # columns if this changes */
.bh {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
  /* margin: 16px; */
  /* using padding, not margin, for better scroll-to-selected-item behavior to remove jank */
  padding: 16px;
  background-color: inherit !important;

  /* Update: Not changing the font from its default in grid view. */
  /* This matches Drive behavior. */
  /* font-weight: 500; */
  /* font-size: 16px; */
}

#dG {
  font-size: 18px;
  font-family: 'Roboto', sans-serif;
  color: #202124;
  margin-top: 22px;
  height: 34px;
}
/* HAS MOBILE MEDIA QUERY */

.al {
  margin-bottom: 4px;
  margin-left: 12px;
}

#dA {
  height: 44px;
  font-size: 16px;
  padding-left: 18px;
  padding-right: 18px;
  margin-top: 12px;
  margin-right: 16px;
  /* background-color: green; */
}

.aB {
  margin-right: 10px;
}

.ay {
  font-size: 16px;
  padding-left: 12px;
  padding-right: 12px;
  height: 44px;
  margin-top: 12px;
}
/* HAS MOBILE MEDIA QUERY */

.aA {
  width: auto;
}
/* HAS MOBILE MEDIA QUERY */
/* Make first button 100% width on mobile. */

.aC {
  width: auto;
}
/* HAS MOBILE MEDIA QUERY */

#iY {
  display: flex;
  margin-left: 10px;
  flex: 1;
  align-items: center;
  white-space: nowrap;
}
/* HAS MOBILE MEDIA QUERY */

#iX {
  /* color: #1a73e8; */
  /* color: #202124; */
  color: #1a73e8;
  /* color: #0b57d0; */
  font-family: 'Roboto', sans-serif;
  width: 100%;
  /* padding-bottom: 10px; */
  font-size: 18px;
  font-weight: 500;
  border: none;
  height: 24px;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 4px;
  padding-right: 0;
  background-color: inherit;
  cursor: pointer;
}
/* HAS MOBILE MEDIA QUERY */
/* Reduce zip filename input font size on mobile */

#iX::placeholder {
  font-weight: normal !important;
  color: #5f6368;
}

/* NOTE: The styles below are order-critical and very sensitive */
#iX:hover {
  border: 1px solid rgba(33,150,243, 0.3);
  /* padding-left: 2px; */
  padding-left: 3px;
  background-color: #FFFFF0;
}

#iX:focus {
  background-color: lightyellow;
  /* padding-left: 4px; */
  padding-left: 4px;
  padding-top: 3px;
  padding-bottom: 3px;
  cursor: text;
}

#iX:hover:focus {
  background-color: lightyellow;
  /* padding-left: 4px; */
  padding-left: 3px;
  padding-top: 3px;
  padding-bottom: 3px;
  cursor: text;
}

/* ITEM FILENAME FOR INLINE RENAME */
#fd {
  display: flex;
  margin-left: 10px;
  flex: 1;
  align-items: center;
  white-space: nowrap;
}
/* HAS MOBILE MEDIA QUERY */


/* Allow caret & selection during inline rename */
#fc,
#fd {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
  pointer-events: auto;         /* just in case */
  position: relative;           /* optional: ensures sane stacking */
  z-index: 1;                   /* optional: above row bg */
}


#fc {
  /* color: #1a73e8; */
  /* color: #202124; */
  /* color: #1a73e8; */
  color: #0b57d0;
  font-family: 'Roboto', sans-serif;
  width: 100%;
  /* padding-bottom: 10px; */
  font-size: 14px;
  letter-spacing: .2px;
  border: none;
  height: 24px;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 4px;
  padding-right: 0;
  background-color: inherit;
  cursor: pointer;
}
/* HAS MOBILE MEDIA QUERY */
/* Reduce zip filename input font size on mobile */

#fc::placeholder {
  font-weight: normal !important;
  color: #5f6368;
}

/* NOTE: The styles below are order-critical and very sensitive */
#fc:hover {
  border: 1px solid rgba(33,150,243, 0.3);
  /* padding-left: 2px; */
  padding-left: 3px;
  background-color: #FFFFF0;
}

#fc:focus {
  background-color: lightyellow;
  /* padding-left: 4px; */
  padding-left: 4px;
  padding-top: 3px;
  padding-bottom: 3px;
  cursor: text;
}

#fc:hover:focus {
  background-color: lightyellow;
  /* padding-left: 4px; */
  padding-left: 3px;
  padding-top: 3px;
  padding-bottom: 3px;
  cursor: text;
}

#ia {
  resize: none;
  width: 100%;
  height: 120px;
  max-width: 100%;
  max-height: 120px;
  box-sizing: border-box;
  /* color: rgb(26, 115, 232); */
  color: #0b57d0;
  padding: 8px;
}


#gy {
  height: calc(100% - 5px);
  width: calc(100% - 5px);
}

#gx {
  display: flex;
  resize: none;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  color: #0b57d0;
  padding: 8px;

  /* from PRE */
  border: none !important;
  /* margin: 4px; */
  cursor: text;
  font-family: 'Roboto Mono', monospace;
  font-size: 14px;

  line-height: 150%;
  font-weight: 400;

  background-color: #FFFFF4;
}

#i0 {
  opacity: 0.5;
  cursor: default;
  padding-left: 3px;
  padding-right: 0;
  margin-right: 7px;
}

#i3 {
  min-height: 52px;
  height: 52px;
  max-height: 52px;
  /* padding-bottom: 8px; */
  margin-left: 14px;
  margin-right: 10px;
  font-size: 18px;
  display: flex;
  align-items: center;
  color: maroon;
}

#i4 {
  flex: 4;
  margin-right: 12px;
  display: flex;
  flex-direction: column;
}

#i6 {
  display: -webkit-inline-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  text-overflow: ellipsis;
  overflow: hidden;
}

#i5 {
  font-size: 14px;
  color: #5f6368;
  line-height: 125%;
  margin-top: 4px;
}

.ap {
  color: maroon;
}

#paypalButtonContainer {
  /* min-width: 200px; */
  max-width: 1024px;
  width: 90%;
  /* height: 34px; */
  /* margin-left: 12px; */
  /* flex: 3; */
}
/* HAS MOBILE MEDIA QUERY */

#gf {
  padding-bottom: 18px;
}

#hP {
  display: flex;
  flex: 1;
  align-items: center;
}

#hR {
  flex: 1;
  display: flex;
  align-items: center;
  max-width: 300px;
  white-space: nowrap;
  padding-right: 8px;
  margin-right: 10px;
  min-height: 40px;
  height: 40px;
  max-height: 40px;
  background-color: #E9EEF6;
  border-radius: 24px;
  transition: background-color 0.3s ease;
}

#hR:focus-within {
  background-color: lightyellow;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1), 0 0 6px rgba(0,0,0,0.1);
}

#hQ {
  color: #222;
  display: flex;
  flex: 1;
  align-items: center;
  font-family: 'Roboto',sans-serif;
  /* padding-bottom: 10px; */
  font-size: 16px;
  border: none;
  /* padding: 4px; */
  background-color: inherit;
  margin-right: 8px;
  transition: background-color 0.3s ease;
}
/* HAS MOBILE MEDIA QUERY */
/* Reduce width and font size  for password input on mobile */

#hQ:focus {
  outline: 0 !important;
  background-color: lightyellow;
  padding-left: 1px;
}

#hS {
  opacity: 0.5;
  cursor: default;
  padding-left: 4px;
  margin-left: 4px;
  margin-right: 5px;
  font-size: 24px;
  width: 24px;
  height: 24px;
}

.bA {
  /* background-color: lightyellow; */
  background-color: ivory;
}

.bB {
  /* Keep */
  /* background-color: rgb(253, 214, 99); */

  /* Gmail */
  background-color: rgb(253,226,147);
  font-weight: 500;
}

#i2 {
  flex: 1;
  align-items: center;
  white-space: nowrap;
  min-height: 48px;
  height: 48px;
  max-height: 48px;
  padding-bottom: 8px;
  margin-left: 14px;
  margin-right: 10px;
  font-size: 18px;
  display: flex;
}
/* Reduce left margin for password input on mobile */

#i1 {
  font-family: 'Roboto',sans-serif;
  width: 160px !important;
  padding-bottom: 10px;
  font-size: 18px;
  border: none;
  border-bottom: 1px solid rgba(0,0,0,.12);
  height: 26px;
  padding: 4px;
  background-color: inherit;
  margin-right: 8px;
}
/* HAS MOBILE MEDIA QUERY */
/* Reduce width and font size  for password input on mobile */



/* NEW: FOLDER CHIP LOCATION STYLES */
#es {
  display: flex;
  align-items: center;
  font-size: 14px;
  gap: 12px;

  /* Share row space and allow shrink */
  flex: 1 1 auto;
  min-width: 0;
}

#eu {
  /* display: inline-flex; */
  display: flex;
  align-items: center;
  justify-content: flex-start;

  background: #f5f5f5;
  color: #555;
  border: 1px solid #ccc;
  border-radius: 12px;
  height: 28px;
  font-size: 13px;
  letter-spacing: 0.25px;
  cursor: pointer;
  will-change: background;
  transition: background 0.2s, box-shadow 0.2s, color 0.2s;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.14),
              0 2px 1px -2px rgba(0, 0, 0, 0.2),
              0 1px 3px rgba(0, 0, 0, 0.12);

  /* Remove from button */
  /* white-space: nowrap; */

  outline: none;
  -webkit-tap-highlight-color: transparent;

  margin-top: 3px;
  margin-bottom: 3px;
  margin-left: -2px;

  /* Constrain to parent and allow shrink */
  max-width: 100%;
  min-width: 0;
}

#eu:hover {
  background: #e0e0e0;
  /* color: #1a73e8;  */
}

#eu:hover .aq {
  color: #333;
}

.aq {
  /* display: inline-block; */
  display: inline-flex;
  width: 20px;
  height: 20px;

  color: #555;
  font-size: 16px;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  line-height: 1;
  opacity: 0.8;

   /* icons don’t flex */
  flex: 0 0 auto;
}

#ev {
  display: flex;
}

#et {
  display: flex;
}

#ew {
  /* display: inline-block; */
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 4px;
  margin-right: 8px;

   white-space: nowrap;       /* keep nowrap only here */

  /*   max-width: 240px; */

  display: block;                /* simpler with flex sibling icons */
  flex: 1 1 auto;                /* label takes remaining space */
  min-width: 0;                  /* allow ellipsis to actually happen */
}

.aF {
  height: 635px !important;
}

.aG {
  height: 624px !important;
}

.at {
  /* 25% alpha is 40 in hex */
  /* background-color: rgb(33,150,243, 0.25); */
  background: linear-gradient(135deg, #2179fe20 25%, #078efb20 50%, #ac87eb20);
  /* background: linear-gradient(135deg, #217bfe, #078efb 33%, #ac87eb); */
  display: block;
  position: relative;
  height: 5px;
  max-width: 100%;
}

.at > .av {
  width: 100%;

  /* 0.7 is B3 */
  /* background-color: rgb(33,150,243,0.7); */
  /* Was: 88 */
  /* Now gradually gets darker as it gets more purple. */
  background: linear-gradient(135deg, #217bfe48 20%, #078efb88 40%, #ac87ebc8);
  /* background-color: linear-gradient(135deg, #217bfe, #078efb 33%, #ac87eb); */
  /* background: linear-gradient(135deg, #217bfe, #078efb 33%, #ac87eb); */

  z-index: 1;
  left: 0;
}

.at > .au {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0%;
  transition: width 240ms linear;   /* animation for normal increments */
  will-change: width;
}

/* When this class is present, snaps instantly (no animation) */
.at > .au.bt {
  transition: none !important;
}

/* Special style for Material Image -- like a material icon, but styled as an image */
/* Specifically used for the new drive icon SVG in context menu */
/* Shrink to 20px but add padding on either side, opacity 50% since other filters don't seem to work */
.mimg {
  opacity: 0.5;
  width: 20px !important;
  padding: 0 2px 0 2px;
}

/* MDC MENU STYLES */
/* NOTE I think we can consolidate this box shadow */

.zems {
  display: none;
  position: absolute;
  box-sizing: border-box;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  margin: 0;
  padding: 0;
  transform: scale(1);
  transform-origin: top left;
  opacity: 0;
  overflow: auto;
  will-change: transform, opacity;
  z-index: 8;
  transition: opacity 0.03s linear, transform 0.12s cubic-bezier(0, 0, 0.2, 1);
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  background-color: #fff;
  color: #000;
  border-radius: 4px;
}

.zems:focus {
  outline: none;
}

.zemso {
  display: inline-block;
  transform: scale(1);
  opacity: 1;
}

.zem {
  min-width: 112px;
}

.zem .zelim {
  color: rgba(0, 0, 0, 0.87);
}

.zem .zelig {
  color: rgba(0, 0, 0, 0.50);
}

.zem .zel {
  color: rgba(0, 0, 0, 0.87);
}

.zem .zeld {
  margin: 6px 0;
}

.zem .zeli {
  user-select: none;
}

/* Selected */
.zem--selected {
  /* background-color: #f5f5f5; */
  background-color: #eee;
}

.zem .zeli--disabled {
  /* cursor: auto; */
  cursor: default;
  color: black;
  opacity: 0.45;
  pointer-events: none;
}

.zem a.zeli .zeli__text,
.zem a.zeli .zelig {
  pointer-events: none;
}

#fu {
  position: absolute;
  z-index: 100;
  right: 12px;
  top: 90px;
  will-change: opacity;
  transition: opacity .125s linear;
}

#gt {
  position: absolute;
  z-index: 3000; /* above preview overlay */
  right: 12px;
  margin-top: -24px;
  will-change: opacity;
  transition: opacity .125s linear;
}

#fb {
  position: absolute;
  z-index: 110;
  will-change: opacity;
  transition: opacity .125s linear;
}

/* FROM APP CSS */
.zel {
  font-family: Roboto, sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-size: 1rem;
  line-height: 1.75rem;
  font-weight: 400;
  letter-spacing: 0.009375em;
  text-decoration: inherit;
  text-transform: inherit;
  /* @alternate */
  line-height: 1.5rem;
  margin: 0;
  padding: 8px 0;
  list-style-type: none;
  color: rgba(0, 0, 0, 0.87);
}

.zel:focus {
  outline: none;
}

.zeli:hover {
  background-color: #f5f5f5;
}

.zelig {
  background-color: transparent;
}

.zelig {
  color: rgba(0, 0, 0, 0.38);
}

.zeli {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: flex-start;
  padding: 0 16px;
  overflow: hidden;
  height: 38px;
  font-size: 14px;
  margin-bottom: 0;
  color: #202124;
}

.zeli:focus {
  outline: none;
}

.zeli--selected,
.zeli--activated {
 color: #6200ee;
}
.zeli--selected .zelig,
.zeli--activated .zelig {
  color: #6200ee;
}

.zelig {
  /* @noflip */
  margin-left: 0;
  /* @noflip */
  margin-right: 10px;
  width: 24px;
  height: 24px;
  font-size: 20px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  fill: currentColor;
}

.zel .zelig {
  display: inline-flex;
}

.zelim {
  /* @noflip */
  margin-left: auto;
  /* @noflip */
  margin-right: 0;
}

:not(.zel--non-interactive) > :not(.zelid).zeli {
  cursor: pointer;
}

.zeld {
  height: 0;
  margin: 0;
  border: none;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgba(0, 0, 0, 0.12);
}

.zelish {
  font-weight: 500;
  /* color: #555; */
  /* color: #626262; */
  color: #999;
  pointer-events: none;
  cursor: default;
  height: 30px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.0178571429em;
  text-transform: uppercase;
}

/* ======================================= */
/* ZIP ICON COLORS - TO COLORIZE ICONS     */
/* ======================================= */
/* Core visual mappings from Google Drive style */
.zip-icon-document     { color: #4385F5; }  /* Blue (Docs), WAS:  #1a73e8*/
.zip-icon-spreadsheet  { color: #35A853; }  /* Green (Sheets) WAS:  #188038 */
.zip-icon-presentation { color: #FBBD01; }  /* Orange (Slides) WAS:  #ea8600 */
.zip-icon-form         { color: #673ab7; }  /* Purple (Forms) */

.zip-icon-text         { color: #4385F5; }  /* Gray (Plain Text), UPDATE, blue, WAS:  #1a73e8*/
.zip-icon-code         { color: #4385F5; }  /* Gray (Source code), UPDATE, blue, WAS: #1a73e8*/
.zip-icon-markup       { color: #4385F5; }  /*UPDATE: Going with blue, to match the other 'text' doc colors.  WAS: #8e24aa UPDATE: Going with Magenta. Also was good, Google Forms Purple, but we'll save that. */

.zip-icon-image        { color: #EA4336; }  /* Red (Images) WAS: #d93025*/
.zip-icon-pdf          { color: #EA4336; }  /* Red (PDFs) WAS: #d93025 */
.zip-icon-video        { color: #EA4336; }  /* Red (Videos) WAS: #d93025 */
.zip-icon-audio        { color: #EA4336; }  /* Red (Audio) WAS: #d93025 */
.zip-icon-drawing      { color: #EA4336; }  /* Red (Drawings) WAS: #d93025 */

.zip-icon-csv          { color: #35A853; }  /* Gray (Tables), UPDATE, green, WAS: #188038*/
.zip-icon-font         { color: #673ab7; }  /* Gray, UPDATE, purpole */

/* NOTE: Don't colorize anything that would be grey, leave as default, so can comment out until we have a color */
/* This grey is too dark, we use 757575 or 808080 */
.zip-icon-executable   { color: #5f6368; }  /* Gray */
.zip-icon-archive      { color: #F3B613; }  /* "ZIP Yellow"; WAS: #5f6368 Gray (Archives). WAS: #CABC63, WAS: #F4DD60, WAS: #F4C431 */
.zip-icon-ebook        { color: #8e24aa; }  /* WAS: #5867d6 UPDATE: "Light indigo with modern feel" */

/* Other colors in the pallette: also consider: #5e4eb7 (Google Sites), #5867d6, #7e57c2, #8e24aa */
/*
#5867d6 (light indigo with modern feel)
#7e57c2 (material design’s "Deep Purple 400")
#8e24aa (Material Deep Purple A700 — used in G Suite UI variants)
#5f6368 Previous dark grey
*/


/* ====================================== */
/* MEDIA QUERIES FOR SMALLER SCREEN SIZES */
/* ====================================== */
@media (max-width: 760px) { ul,ol { margin-left: -16px; } }
@media (min-width: 640px) { .hododi { display: none !important; } }

/* Also reduce top margin for smaller vertical screens. */
/* @media ( max-height: 659px ) { .appContent { margin-top: 24px; } } */

/* Hide the start page icon not just on mobile, but on slightly larger for button display spacing. */
@media (max-width: 844px) { #iD { display: none; } }

@media (max-width: 479px) { .ae { border: none;} }

@media (max-width: 479px) { #fr { display: none; } }

@media (max-width: 325px) { #hD { display: none; } }

@media (max-width: 639px) {

  /* Reduce top margin on mobile by 6 */
  #de { margin-left: 0; margin-right: 0; margin-top: 6px }
  /* Reduce margins on mobile */
  /* NEW: No longer doing this */
  /* .appContent { margin-left: 12px; margin-right: 12px; margin-top: 20px; } } */

  /* Also reduce top margin for smaller vertical screens. */
  /* @media ( max-height: 659px ) { .appContent { margin-top: 24px; } } */

  #hA { height: calc(100% - 192px); }

  #it { min-height: 114px; } /* prevent jank during loading on mobile */

  .zebi { margin-right: 0;}

  .zebil { margin-right: 0;}

  .zebl { margin-left: 8px;}

  #hI { margin-right: 8px; }

  .bC { margin-right: 12px; }

  #h1 { margin-left: -11px; }

  #eV { margin-right: 14px; }

  /* Reduce file table header font size on mobile. */
  #eO { font-size: 16px; }

  #e1 { padding-left: 10px }

  #e2 { padding-right: 8px }

  #eS { margin-left: 10px; }

  #eU { display: none; }

  .bK { padding-left: 8px;}

  #gE { margin-bottom: 24px; }

  #fS { margin-bottom: 24px; }

  #ed { margin-bottom: 24px; }

  #ec { margin-bottom: 12px; }

  .aK { margin-bottom: 24px; }

  #fT { margin-bottom: 12px; }

  #gB { margin-top: 12px; }

  #gp { margin-left: 0px; }

  .aM { margin-left: 4px; }

  .ax {margin-left: 7px; }

  #hp { margin-left: 2px; margin-right: 2px; }

  #gX { margin-right: 4px; margin-left: 4px; }

  #gj { margin-right: 4px; }

  #hv { font-size: 14px; margin-left: 2px; }

  #gU { margin-left: 6px; }

  #gR { font-size: 16px; margin-left: 8px;}

  #hm { margin-left: 6px; }

  pre { font-size: 13px; }

  #fs { font-size: 24px; }

  h1 { font-size: 16px; }

  #fE { font-size: 16px; }

  #hV { font-size: 14px; margin-left: 4px; margin-right: 6px; }

  h2 { font-size: 18px; margin-bottom: 4px; }

  h2 { font-size: 18px; margin-bottom: 4px; }

  .bc { height: calc(100% - 52px) !important; }

  #ee { height: calc(100% - 74px); }

  li { font-size: 16px; padding-left: 4px; padding-right: 8px; line-height: 140%;}

  p { font-size: 16px; padding-right: 8px; line-height: 140%; }

  .bm { display: none; }

  .homodb { display: none; }

  .homodinh { display: inherit; }

  #fv { height: 40px; min-height: 40px; max-height: 40px; padding-left: 10px; padding-right: 4px; }

  #fy { padding-top: 5px; }

  #hC { height: 36px; width: 36px; }

  #fx { height: 36px; width: 36px; }

  #fD { margin-left: 10px;  margin-right: 4px;  }

  #ep { font-size: 14px; }

  #dG { font-size: 16px; }

  .ay { padding-left: 10px; padding-right: 10px }

  .aA { width: calc(100% - 2px) }

  .aC { width: calc(100% - 133px) }

  #iY { margin-left: 6px; }

  #iX { font-size: 16px; }

  #i1 { font-size: 16px; width: 80px !important; } /* Accommodate placeholder. */

  #df { height: calc(100% - 192px); }

  #fK { height: calc(100% - 192px); }

  #i4 { font-size: 14px; line-height: 100%; }

  #paypalButtonContainer { }

  #fm {
    display: none;
  }
}