.mainAppToolbar {
  height: 64px;
  /* background-color: #fff; */
  border-bottom: 2px solid rgb(33,150,243, 0.8);
}

.mainEditorContainer {
  height: calc(100% - 101px);
  overflow-y: hidden;
}

img {
  vertical-align: middle;
}

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

.startPageText a {
  text-decoration: none;
}

.startPageText a:hover {
  text-decoration: underline;
}


.startPageIcon {
  margin-right: 14px;
  width: 40px;
  height: 40px;
  /* margin-left: 8px; */
  padding-top: 2px;
}
/* Hide the start page icon not just on mobile, but on slightly larger for button display spacing. */
@media (max-width: 732px) { .startPageIcon { display: none; } }

.startPageIconImg {
  width: 40px;
  height: 40px;
}


.buttonPara {
  padding-bottom: 0px !important;
  margin-bottom: 12px !important;
}

.authButtonContainer {
  /* height: 44px; */
  display: flex;
  align-items: center;
  /* white-space: nowrap; */
  /* flex: 1; */
  /* margin-left: 52px; */
  margin-bottom: 40px;

}
/* @media (max-width: 760px) { .authButtonContainer { margin-left: 32px; } } */

.generalButtonContainer {
  /*
  height: 56px;
  margin-left: 8px;
  */
  /* white-space: nowrap; */
  /* flex: 1; */
  margin-bottom: 20px;
  /* margin-left: 52px; */

}
/* Hide indent when in mobile mode, as well as in shortened desktop mode */
/* @media (max-width: 760px) { .generalButtonContainer { margin-left: 32px; } } */

.centeredBodyContent {
  display: flex;
  /* justify-content: center; */
  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. */
.mainWrapper {
  height: 100% !important;
  /* max-width: 1440px; */
  min-width: 0;
  /* width: 1520px; */
  width: 100%;
}

.appContent {
  height: 100% !important;
  display: flex;
  margin-top: 20px;
  margin-left: 16px; /* Offset more from left, with left ad */
  margin-right: 16px;
  /* justify-content: center; */
}
/* Reduce margins on mobile */
/* NEW: No longer doing this */
/* @media (max-width: 639px) { .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; } } */

.mainApp {
  flex: 1;
  min-width: 328px; /* Specifically chosen to allow full width on 360px viewports -16px -16px margins */

  /* Allow 20px for scroll bar plus 8px buffer while still allowing full 970 banner */
  /* width: 1000px; */
  /* max-width: 1000px; */

  height: 100% !important;
}

.rightBannerContainer {
  /*
  display: flex;
  flex-direction: column;
  align-items: center;
  */
}

/* Start high: Up to 340px, down to 250px */
/* NEW: Right Banner Top is Responsive. Accommodates down to 250px x 250px */
/* Target 336x280 max large rect, accept 300x250 rect, go down to 250x250 */
/* NEW: Changing to one ad, 600px max height, with variable targets */
.rightBanner {
  /* flex: 1; */
  display: block;
  min-width: 120px; /* Allows 120x600 */
  max-width: 300px; /* Settled on max fixed width of 300
  /* width: 100%; */
  /* width: 480px; */
  width: 100%;
  min-height: 250px; /* Allow 300x250 medium rectangle */
  max-height: 600px; /* Caps out to 300x600 half page skyscraper */
  /* height: 100%; */
  margin-right: 28px;
  /* margin-left: 24px; */
  /* padding-left: 24px; */
  text-align: center;
  /* background-color: lightskyblue; */
}
/* Less than 120 (minus another 130 which is 250 - 120), hide. */
@media (max-width: 1179px) { .rightBanner { display: none; } }

/* Less than 680, cut another 16px off the top to ensure a full 600px ad can be shown without clipping. */
@media ( max-height: 689px ) { .rightBanner { margin-top: -22px; } }
@media ( max-height: 675px ) { .rightBanner { margin-top: -22px; } }
@media ( max-height: 669px ) { .rightBanner { margin-top: -30px; } }
@media ( max-height: 659px ) { .rightBanner { margin-top: -22px; } }

/* Here, to ensure full view in common 660px browser height, move up a bit earler and then correct at 659. */
/* @media ( max-height: 659px ) { .rightBanner { margin-top: -22px; } } */


/* Start high: Up to 340px, down to 250px */
.rightBannerIns {
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
}
/* Ensure no ad is loaded for screen sizes below a specific width which would mean less than 120 or 160 or 250px. */
@media (max-width: 1179px) { .rightBannerIns { display: none; } }


.mainAppHeaderContainer {
  height: calc(100% - 75px) !important;
  /*
  overflow-y: hidden;
  background-color: #fff;
  */
}
/* On shorter non-mobile sreens, shrink. NOTE: Order is important here. */
/* @media (max-height: 700px) { .zipTable { height: calc(100% - 324px) !important; } } */
/* Updated height on Mobile, use full screen. TODO: May need an AND query here. */
/* @media (max-width: 639px) { .mainAppHeaderContainer { height: calc(100% - 194px) !important; } } */

.mainAppHeader {
  font-size: 16px;
  height: 93px;
  min-height: 93px;
  max-height: 93px;
  margin-bottom: 8px;
  background-color: #fff;
}

.editorToolbar {
  flex: 1;
}

.ze-button-icon-background {
  border-radius: 50%;
  background-color: #fff;
}

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

  background: 0 0;
  border: none;
  border-radius: 4px;
  color: rgba(0, 0, 0, 0.54);
  position: relative;
  height: 40px;
  margin: 0;
  min-width: 64px;
  display: inline-block;
  overflow: hidden;
  will-change: box-shadow;
  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);
  outline: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  line-height: 40px;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: rgba(255,255,255,0);
  vertical-align: middle;
}

.ze-button-icon {
  vertical-align: middle;
  width: 20px;
  height: 20px;
  font-size: 20px;
  margin-right: 5px;
}

.ze-button-icon-right {
  padding-left: 4px;
  padding-right: 2px;
}

.ze-button-icon-elevated {
  /* vertical-align: text-bottom !important; */
}

.ze-button-icon-large {
  vertical-align: middle;
  width: 24px;
  height: 24px;
  font-size: 24px;
  margin-right: 6px;
}

.ze-icon-button {
  color: rgb(33,150,243);
  border-radius: 50%;
  height: 32px;
  margin-left: 0;
  margin-right: 0;
  min-width: 32px;
  width: 32px;
  padding: 0;
  overflow: hidden;
  line-height: normal;
}

.ze-icon-button:hover {
  background-color: rgba(158,158,158, .2);
}

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

.ze-icon-button-icon-large {
  font-size: 24px;
}

.ze-checkbox-buton {
  padding-top: 2px;
}

.ze-create-button-icon {
  margin-right: 8px;
}

.ze-button--raised {
  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 1px 5px 0 rgba(0,0,0,.12);
  color: rgb(255,255,255);
}

.ze-button--raised:disabled {
  -webkit-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);
  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-color: rgba(0,0,0,.12);
    color: rgba(0,0,0,.37);
    cursor: default;
    pointer-events: none;
}

.ze-button--raised--colored {
  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);
  transition: opacity 0.2s ease-out;
}

.ze-button--raised--colored:disabled {
  -webkit-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);
  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-color: rgba(0,0,0,.12);
    color: rgba(0,0,0,.37);
    cursor: default;
    pointer-events: none;
}

.ze-button:not(.ze-button--raised--colored):hover {
  background-color: rgba(158,158,158, .2);
}

.ze-button--raised--colored:hover, .ze-button--raised--colored:focus {
  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);
  opacity: 0.92;
}

.ze-button--raised--colored: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);
}

.ze-button--colored {
  color: rgb(33,150,243);
}

.ze-button-right {
  margin-left: 10px;
}

.ze-button-left {
  margin-left: 16px;
}



/* BEGIN MAIN BUTTON STYLES */
.ze-select {

  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;
  display: inline-block;
  overflow: hidden;
  will-change: box-shadow;
  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);
  outline: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  line-height: 36px;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: rgba(255,255,255,0);
  vertical-align: middle;

  /* color: rgb(33,150,243); */
  border-radius: 50%;
  height: 32px;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  overflow: hidden;
  line-height: normal;
}

.ze-select:hover {
  background-color: rgba(158,158,158, .2);
}

.saveToDriveButton_OLD {
  height: 32px;
  line-height: 32px;
  margin-right: 32px;
}

.rootStatus {
  max-width: 24px;
  margin-right: 12px;
  cursor: default;
}
/* @media (max-width: 639px) { .rootStatus { margin-right: 12px; } } */

.rootStatusIconContainer {
  width: 20px;
  height: 20px;
  padding-right: 4px;
}

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

.rootStatusSpinner {
  margin-right: 4px;
  margin-top: 4px;
}

.statusCell {
  max-width: 24px;
  padding-right: 8px;
  cursor: default;
}

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

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

.zipStatusSpinner {
  margin-top: 6px;
}

.filenameCell {
  display: flex;
  align-items: center;
  min-width: 0;
}

.directoryCell {
  font-weight: 500;
}

.sizeCell {
  color: #5f6368;
  max-width: 60px;
  margin-right: 16px;
  text-align: right;
  font-size: 13px;
}
@media (max-width: 639px) { .sizeCell { margin-right: 12px; } }

.toolbarIcon {
  cursor: pointer;
  color: #1a73e8;
  opacity: 0.9;
  font-size: 20px !important;
  margin-left: 8px;
}

.zipTableCell {
  flex: 1;
}

.lastZipTableRow {
  border-bottom: 2px solid rgb(33,150,243, 0.8) !important;
}

.zipTableRow {
  font-family: 'Roboto', sans-serif;
  display: flex;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  align-items: center;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  padding-left: 12px;
  padding-right: 4px;
  letter-spacing: .2px;
}
/* @media (max-width: 639px) { .zipTableRow { padding-right: 4px; } } */

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

.zipEntryCheckbox {
  opacity: 0.9;
  height: 24px;
  width: 24px;
}

.zipEntryCheckboxButton {
  opacity: 0.9;
}

.editZipFileButton {
  color: #5f6368;
  opacity: 0.8;
  margin-top: -2px;
  margin-right: 8px;
}

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

.doneEditingZipButton {
  color: #5f6368;
  opacity: 0.8;
  height: 32px;
  margin-top: -4px;
  padding-right: 0;
}

.doneEditingZipButtonIcon {
  margin-top: -4px;
  padding-left: 2px;
}

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


.addFilesButtonContainer {
  align-items: center;
  flex: 1;
}

.cancelButton {
  color: black !important;
  opacity: 0.54;
}

.retryButton {
  color: #e00000;
}

.primaryButton {
  /* background-color: green !important; */
}

.setLocationButton {
  margin-left: auto;
  color: black !important;
  opacity: 0.54;
}

.fileTableHeaderSize {
  font-size: 14px;
  margin-right: 16px;
  margin-left: 16px;
}
@media (max-width: 639px) { .fileTableHeaderSize { margin-right: 12px; } }

.fileTableHeader {
  font-size: 18px;
  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;
  margin-bottom: 4px;
  align-items: center;
}
/* Reduce file table header font size on mobile. */
@media (max-width: 639px) { .fileTableHeader { font-size: 16px; } }

.hideOnMobileOrDisplayInline {
  display: inline;
}
@media (max-width: 639px) { .hideOnMobileOrDisplayInline { display: none; } }

.hideOnMobileOrDisplayBlock {
  display: block;
}
@media (max-width: 639px) { .hideOnMobileOrDisplayBlock { display: none; } }

.optionallyDisplayedSecondaryIntoText {
  display: block;
  margin-bottom: 12px;
}
/* Hide for very short height desktop screens. OK to display on mobile */
/* @media (max-width: 639px) { .optionallyDisplayedSecondaryIntoText { display: none; } } */
@media (max-height: 645px) { .optionallyDisplayedSecondaryIntoText { display: none; } }

.selectAllCheckbox {
  opacity: 0.9;
}

.fileTableSubHeader {
  font-size: 16px;
  color: #5f6368;
  font-style: italic;
  padding-left: 12px;
  padding-top: 8px;
  padding-bottom: 8px;
  background-color: lightyellow;
}

.fileTableHeaderLabel {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  margin-left: 12px;
}

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

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

buttonContainer > button {
  font-size: 20px;
}

.cardShadow {
  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; */
  box-sizing: border-box;
  /* width: calc(100% - 24px); */
  /* max-width: 970px; */
}
/* On true mobile, remove shadow and expand margins */
@media (max-width: 479px) { .cardShadow { border: none; /* box-shadow: none; */ margin-left: -16px; margin-right: -16px; } }


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

.textBlockHowToUse {
  margin-top: 36px;
}


.renameButton {
  color: #5f6368;
  opacity: 0.6;
  margin-left: 12px;
}

.renameButton:hover {
  color: #1a73e8;
  opacity: 0.8;
}

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

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

.editorToolbarButton {
  margin-left: 2px;
  margin-right: 2px;
  color: #5f6368;
  opacity: 0.8;
  border: 1px #ccc solid;
  border-radius: 4px;
}

.editorToolbarButtonLeftSpace {
  margin-left: 16px;
}

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


.mainAppTitle {
  font-size: 26px;
  font-weight: normal;
  /* color: #c00000; */
  color: #5f6368;
  margin: 0;
  white-space: nowrap;
  padding-left: 14px;
  padding-right: 20px;
}
@media (max-width: 639px) { .mainAppTitle { font-size: 24px; } }

h1 {
  padding: 0;
  margin: 0;
  cursor: default;
  font-size: 18px;
  font-weight: normal;
  color: #5f6368;
  line-height: normal;
}
@media (max-width: 639px) { h1 { font-size: 16px; } }

.mainAppSubtitle {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Hide subtitle on true mobile */
@media (max-width: 479px) { .mainAppSubtitle { display: none; } }

.mainLabelNameContainer {
  display: flex;
  flex: 1;
  margin-left: 8px;
  align-items: center;
}


.mainLabel {
  margin: 0;
  line-height: normal;
  font-weight: normal;
  cursor: default;
  font-size: 20px;
  /* color: #5f6368; */
  color: #202124;

  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 4px;
}
/* Reduce font size for main label on mobile */
@media (max-width: 639px) { .mainLabel { font-size: 16px; } }


.actionBar {
  min-height: 44px;
  height: 44px;
  max-height: 44px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 10px;
  margin-left: 12px;
  margin-right: 12px;
  font-size: 16px;
}
/* Reduce secondary text font size on mobile. */
@media (max-width: 639px) { .actionBar { font-size: 14px; } }

.actionButtonContainer {
  /* flex: 1; */
  /*
  display: flex;
  justify-content: flex-end;
  */
  white-space: nowrap;
}

.saveStatusLabel {
  font-size: 16px;
  color: #5f6368;
  margin: 0;
  margin-left: 16px;
  margin-right: 24px;
  cursor: default;
}

.secondaryLabel {
  padding-right: 20px;
  display: flex;
  align-items: center;
  margin: 0;
  line-height: 140%;
  font-weight: normal;
  cursor: default;
  color: #5f6368;
  flex: 1;
}

.secondaryLabelLink:hover {
  text-decoration: underline;
}

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;
  margin-top: 24px;
}
/* Reduce h2 font on mobile. */
@media (max-width: 639px) { h2 { font-size: 22px; margin-bottom: 8px; } }

h2.h2top {
  margin-top: 0;
}


h3 {
  padding: 0;
  margin: 0;
  line-height: normal;
  font-weight: normal;
  color: #5f6368;
  font-size: 18px;
  margin-bottom: 4px;
  padding-top: 8px;
}

.startPageAd {
  margin-top: 4px;
  margin-bottom: 20px;
}

.welcomeHeader {
  margin-right: 12px;
}

.welcomeContainer {
  /*
  display: flex;
  align-items: center;
  */
}

.checkingAuthSpinner {
  margin-left: 12px;
}

.welcomeSpinner {
  margin-left: 8px;
}

.startCard {
  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; } }


li {
  font-size: 16px;
  color: #202124;
  font-family: 'Roboto', sans-serif;
  margin-bottom: 6px;
  line-height: 140%;
  padding-right: 16px;
  padding-left: 8px;
}
/* Reduce padding for mobile with no indent. */
@media (max-width: 639px) { li { font-size: 14px; padding-left: 4px; padding-right: 8px; line-height: 140%;} }

ul, ol {
  margin-top: 4px;
  margin-bottom: 20px;
  margin-left: 4px;
  font-size: 16px;
}
/* Hide indent when in mobile mode, as well as in shortened desktop mode */
@media (max-width: 760px) { ul,ol { margin-left: -16px; } }

ul.ulGettingStarted {
  margin-bottom: 8px;
}

.mainScrollableContent p {
  margin-bottom: 12px;
}

.startPage p {
  font-size: 18px;
}

.startPage {
  font-size: 16px;
  padding: 12px;
  height: calc(100% - 25px);
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #fff;
}


.callToActionPara {
  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;
}
/* Reduce padding for mobile since no scroll bar. */
@media (max-width: 639px) { p { font-size: 16px; padding-right: 8px; line-height: 140%; } }


.header {
  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 */
@media (max-width: 639px) { .header { height: 40px; min-height: 40px; max-height: 40px; padding-left: 10px; padding-right: 4px; } }


.headerInfo {
  display: flex;
  /* margin-left: 8px; */
  margin-right: 8px;
  padding-top: 8px;
  /* max-width: 1370px; */
}
@media (max-width: 639px) { .headerInfo { padding-top: 5px; } }


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

.profileName {
  color: #5f6368;
  font-size: 16px;
  padding-right: 12px;
  font-family: 'Roboto', sans-serif;
}
@media (max-width: 325px) { .profileName { display: none; } }

.profileImageDiv {
  align-items: center;
  display: flex;
  flex: 1;
  justify-content: flex-end;
}

.profileImageImg {
  cursor: pointer;
  white-space: pre-line;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  /* padding-top: 2px; */
  background-color: #ddd;
}
@media (max-width: 639px) { .profileImageImg { height: 36px; width: 36px; } }

.headerIconImg {
  height: 40px;
  width: 40px;
}
@media (max-width: 639px) { .headerIconImg { height: 36px; width: 36px; } }

.aboveFoldBottomBanner {
  min-width: 250px;
  max-width: 970px;
  /* margin-top: 8px; */
  /* margin-bottom: 36px; */
  width: 100%;
  /* width: 970px; */
  text-align: left;
   /* Move left 12px to allow margin for scrollbar, and adchoices click region. */
  /* margin-left: -8px; */

  /* Try to accommodate a larger rectangle. We can use media queries to control this better. */
  min-height: 90px; /* Set to prevent judder in many/most cases */
  /* max-height: 200px; */
  max-height: 90px;
  height: 90px;
  /* height: 200px; */

  /* Don't specify height here */
  /* height: 280px; */
  /* height: 100%; */

  /* Match Start Page Icon Offset: NEW Not doing this any more w/ 970 ad */
  /* margin-left: 54px; */
  margin-top: 48px;
}
@media (max-height: 639px) { .aboveFoldBottomBanner { margin-top: 36px; } }
@media (max-height: 623px) { .aboveFoldBottomBanner { margin-top: 24px; } }

/* Tighten margin on tablet/large mobile, and remove left negative margin */
@media (max-width: 639px) { .aboveFoldBottomBanner { margin-bottom: 20px; } }

/* Hide on true mobile */
@media (max-width: 479px) { .aboveFoldBottomBanner { display: none; } }

.aboveFoldBottomBannerIns {
  display: block;
  text-align: left;
  /*
  min-width: 250px;
  max-width: 970px;
  */
  width: 100%;
  /* height: 100%; */
  height: 90px;
}
/* Hide on true mobile. */
@media (max-width: 479px) { .aboveFoldBottomBannerIns { display: none; } }


.topBanner {
  display: block;
  min-width: 300px;
  /* max-width: 1000px; */
  /* width: 970px; */
  width: 100%;
  min-height: 90px;
  max-height: 90px;
  height: 90px;
  margin-bottom: 20px;
  text-align: center;
  /* background-color: lightyellow; */
}
/* Reduce bottom for smaller vertical screens and on mobile. */
/* @media ( max-height: 659px ) { .topBanner { margin-bottom: 24px; } } */

/* On mobile, load a mobile optimized 320x100 ad. allow for 100px height and cap to varying sizes. Don't specify width. */
@media ( max-width: 639px ) { .topBanner { max-height: 100px; height: 100px; } }


.topBannerIns {
  /* Allow full responsive */
  display: block;
  width: 100%;
  height: 100%;
}

.mainProgressBarContainer {
  width: 100%;
}

.mainProgressBar {

}

.previewProgressBarContainer {
  margin-top: 10px;
}

.previewProgressBar {
  width: 100%;
  height: 3px !important;
}


.zipTableBanner {
  display: block;
  min-width: 300px;
  max-width: 1000px; /* Match ZipTable / MainContent wrapper  */
  /* width: 1000px; */ /* Match ZipTable / MainContent wrapper */
  width: 100%;
  max-height: 90px;
  min-height: 90px;
  height: 90px;
  margin-bottom: 36px;
  margin-top: 14px;
  text-align: center;
}
@media (max-width: 639px) { .zipTableBanner { display: none; } }

.zipTableBannerIns {
  text-align: center;
  display: block;
  width: 100%;
  height: 90px;
}
@media (max-width: 639px) { .zipTableBannerIns { display: none; } }

.footer {
  margin-top: 4px;
  margin-bottom: 8px;
}

.about {
  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; */
}

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

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


.applinks a {
  font-size: 16px;
  text-decoration: none;
}

.applinks a:hover {
  text-decoration: underline;
}

.startPage a {
  text-decoration: none;
}

.startPage a:hover {
  text-decoration: underline;
}

li a {
  text-decoration: none;
}

li a:hover {
  text-decoration: underline;
}


.subTitleAndLinksContainer {
  display: flex;
}

.headerLinks {
  color: #1a73e8;
  padding-left: 32px;
  font-size: 14px;
  font-size: 16px;
}

.headerLinks a {
  font-size: 16px;
  text-decoration: none;
}

.headerLinks a:hover {
  text-decoration: underline;
}

.authButtonDetails {
  flex: 1;
  font-size: 16px;
  color: #1a73e8;
  font-style: italic;
  line-height: 140%;
  margin-left: 16px;
}

.authButtonLogoIconContainer {
  padding: 8px;
  display: inline-block;
}

.authButtonLogoSvg {
  /* display: block; */
}

.authButtonLogoIcon {
  width: 18px;
  height: 18px;
  background-color: #fff;
  border-radius: 1px;
}

.authButtonWrapper {
  text-align: center;
}

.buttonContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.info-content {
  margin-left: 16px;
  margin-right: 32px;
}

.mainLabelContainer {
  min-height: 44px;
  display: flex;
  align-items: center;
  margin-left: 10px;
  margin-right: 8px;
  /* padding-top: 2px; */
  white-space: nowrap;
}

.mainIconContainer {
  display: flex;
}

.mainIcon {
  cursor: default;
  color: #5f6368;
  font-size: 24px !important;
  width: 24px;
  height: 24px;
}

.mainSpinner {
  margin-right: 4px;
}

.fileTableItems {
  flex: 1;
}

.checkingAuthSpinnerContainer {
  font-size: 18px;
  font-family: 'Roboto', sans-serif;
  color: #202124;
  margin-top: 16px;
  height: 34px;
}
@media (max-width: 639px) { .checkingAuthSpinnerContainer { font-size: 16px; } }

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


.openButtonLeft {
  margin-right: 10px;
}

.openButton {
  font-size: 16px;
  padding-left: 12px;
  padding-right: 12px;
  height: 44px;
  margin-bottom: 12px;
}
@media (max-width: 639px) { .openButton { padding-left: 10px; padding-right: 10px } }

.openButtonFirstLine {
  width: auto;
}
/* Make first button 100% width on mobile. */
@media (max-width: 639px) { .openButtonFirstLine { width: calc(100% - 2px) } }

.openButtonSecondLine {
  width: auto;
}
@media (max-width: 639px) { .openButtonSecondLine { width: calc(100% - 130px) } }


.imageFilenameCaptionIcon {
  opacity: 0.5;
  margin-right: 12px;
  cursor: default;
}

.imageFilenameInputContainer {
  /* margin-left: 4px; */
  flex: 1;
  display: flex;
  align-items: center;
  white-space: nowrap;
  margin-right: 12px;
  /* box-sizing: border-box; */
  /* border: 1px solid rgb(33,150,243, 0.3);; */
}

.imageFilenameInput {
  /* color: #1a73e8; */
  color: #202124;
  font-family: 'Roboto', sans-serif;
  width: 100%;
  /* padding-bottom: 10px; */
  font-size: 20px;
  border: none;
  height: 24px;
  padding: 4px;
  background-color: inherit;
  cursor: pointer;
  /* box-sizing: border-box; */
}
/* Reduce zip filename input font size on mobile */
@media (max-width: 639px) { .imageFilenameInput { font-size: 16px; } }


.imageFilenameInput:hover {
  border: 1px solid rgb(33,150,243, 0.3);
  padding-left: 3px;
}

.imageFilenameInput:focus {
  background-color: lightyellow;
  /* padding-left: 3px; */
}


.zipPasswordCaptionIcon {
  opacity: 0.5;
  margin-right: 12px;
  cursor: default;
}

.zipPasswordInputContainer {
  margin-left: 34px;
  flex: 1;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
/* Reduce left margin for password input on mobile */
@media (max-width: 639px) { .zipPasswordInputContainer { margin-left: 4px; } }


.zipPasswordInput {
  width: 150px !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;
}
/* Reduce width and font size  for password input on mobile */
@media (max-width: 639px) { .zipPasswordInput { font-size: 16px; width: 110px !important; } }


.picker-dialog-content {
  height: 630px !important;
}

.spinner {
  animation: rotator 1.4s linear infinite;
}

@keyframes rotator {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(270deg); }
}

.spinnerSvgPath {
  stroke-dasharray: 187;
  stroke-dashoffset: 0;
  transform-origin: center;
  animation:
    dash 1.4s ease-in-out infinite,
    colors 5.6s ease-in-out infinite;
}

@keyframes colors {
  0% { stroke: #4285F4; }
  25% { stroke: #DE3E35; }
  50% { stroke: #F7C223; }
  75% { stroke: #1B9A59; }
  100% { stroke: #4285F4; }
}

@keyframes dash {
  0% { stroke-dashoffset: 187; }
  50% {
    stroke-dashoffset: 46.75;
    transform:rotate(135deg);
  }
  100% {
    stroke-dashoffset: 187;
    transform:rotate(450deg);
  }
}

.linear-progress {
  background-color: rgb(33,150,243, 0.3);
  display: block;
  position: relative;
  height: 3px;
  max-width: 100%;
}

.linear-progress > .linear-progressbar {
  background-color: rgb(33,150,243);
  z-index: 1;
  left: 0;
}

.linear-progress > .linear-progress-bar {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0%;
  /* transition: width .2s linear; */
}