/**
 * @file
 * Module default styling.
 */

/**
 * Color variables
 * ---------------
 * This styling mostly avoids choosing colors for anything, leaving that
 * to the site theme. In a few cases this is not possible. For these
 * cases, styling uses the following CSS variables and default colors.
 * You can override any of these.
 *
 * In each case, CSS refers to a variable NAME. If that variable has not
 * been defined, it falls back to a variable NAME-default. The defaults
 * are defined here.
 *
 * Folder browser background:
 * - "--foldershare-folder-region-background-color" = the color for the
 *   region behind the folder browser's sidebar and table. This is normally
 *   only visible when the sidebar is shown AND the browser's table is
 *   shorter than the sidebar (e.g. an empty folder). The region background
 *   shows up then below the bottom of the browser's table.
 *
 * Folder browser header variables:
 * - "--foldershare-folder-list-header-background-color" = the color for the
 *   folder browser's table header.
 *
 * - "--foldershare-folder-list-header-padding" = the padding for items in
 *   the table header.
 *
 * - "--foldershare-folder-list-header-border-width" = the width of the
 *   table border (used for highlighting during drag-and-drop).
 *
 * Folder browser footer variables:
 * - "--foldershare-folder-list-footer-top-background-color" = the top color
 *   for a color gradient for the folder browser's table footer.
 *
 * - "--foldershare-folder-list-footer-bottom-background-color" = the bottom
 *   color for a color gradient for the folder browser's table footer.
 *
 * - "--foldershare-folder-list-footer-margins-default" = the margins for
 *   the table footer.
 *
 * Folder browser body variables:
 * - "--foldershare-folder-list-border-color" = the color for the
 *   folder browser's table border.
 *
 * - "--foldershare-folder-list-background-color" = the color for the
 *   folder browser's table background.
 *
 * - "--foldershare-folder-list-border-width" = the width of the
 *   table border.
 *
 * - "--foldershare-folder-list-row-border-color" = the color for the
 *   folder browser's row borders.
 *
 * - "--foldershare-folder-list-row-odd-background-color" = the color for the
 *   folder browser's odd table rows.
 *
 * - "--foldershare-folder-list-row-even-background-color" = the color for the
 *   folder browser's even table rows.
 *
 * - "--foldershare-folder-list-line-height" = the line height for folder
 *   browser rows.
 *
 * - "--foldershare-folder-list-radius" = the radius for the corners of the
 *   folder browser.
 *
 * - "--foldershare-folder-list-shadow" = the drop shadow color for the
 *   folder browser.
 *
 * - "--foldershare-folder-list-margins" = the margins for the folder browser.
 *
 * - "--foldershare-folder-list-max-height" = the maximum height of the
 *   folder browser.
 *
 * - "--foldershare-select-color" = the color for folder browser rows when
 *   selected. This defaults to #ffc, the same default used by
 *   Drupal's "tableselect.css" for selected rows.
 *
 * - "--foldershare-folder-list-draghover-border-color" = the color for the
 *   folder browser's outline during a drag-and-drop from the desktop.
 *
 * - "--foldershare-folder-list-draghover-border-width" = the width for the
 *   folder browser's outline during a drag-and-drop from the desktop.
 *
 * - "--foldershare-folder-list-draghover-row-border-color" = the color for the
 *   folder browser's row outline during a drag-and-drop from the desktop.
 *
 * - "--foldershare-folder-list-draghover-row-border-width" = the width for the
 *   folder browser's row outline during a drag-and-drop from the desktop.
 *
 * Folder browser toolbar:
 * - "--foldershare-toolbar-top-background-color" = the top color for the
 *   gradient for the toolbar of the folder browser.
 *
 * - "--foldershare-toolbar-bottom-background-color" = the bottom color for
 *   the gradient for the toolbar of the folder browser.
 *
 * - "--foldershare-toolbar-margins" = the toolbar's margins.
 *
 * - "--foldershare-toolbar-item-spacing" = the spacing between items on
 *   the toolbar.
 *
 * Folder browser menus:
 * - "--foldershare-menu-border-color" = the color for the border of menus.
 *
 * - "--foldershare-menu-shadow-color" = the color for the menu drop shadow.
 *
 * - "--foldershare-menu-shadow-size" = the size of the menu drop shadow.
 *
 * Folder browser sidebar:
 * - "--foldershare-sidebar-background-color" = the background color for the
 *   folder browser sidebar.
 *
 * - "--foldershare-sidebar-width" = the width of the folder browser sidebar.
 *
 * - "--foldershare-sidebar-padding" = the padding within the folder browser
 *   sidebar.
 *
 * - "--foldershare-sidebar-block-separator-color" = the color of a separator
 *   line between blocks.
 */
:root {
  /*
   * Default values. Normally do not change these. Instead, copy the
   * variables below that DO NOT end in -default, put them in a CSS
   * file loaded after the module, then modify their values. These
   * defaults are used only if you do not provide explicit color choices.
   */
  --foldershare-select-color-default: #ffc;
  --foldershare-toolbar-top-background-color-default: #f4f4f4;
  --foldershare-toolbar-bottom-background-color-default: #ececec;
  --foldershare-toolbar-margins-default: 2px;
  --foldershare-toolbar-item-spacing-default: 4px;
  --foldershare-folder-list-footer-top-background-color-default: #f4f4f4;
  --foldershare-folder-list-footer-bottom-background-color-default: #ececec;
  --foldershare-folder-list-footer-margins-default: 2px;
  --foldershare-folder-list-header-background-color-default: #ececec;
  --foldershare-folder-list-header-padding-default: 4px;
  --foldershare-folder-list-header-border-width-default: 2px;
  --foldershare-folder-list-border-color-default: #ececec;
  --foldershare-folder-list-border-width-default: 1px;
  --foldershare-folder-list-background-color-default: #ffffff;
  --foldershare-folder-list-row-border-color-default: #eee;
  --foldershare-folder-list-row-border-width-default: 1px;
  --foldershare-folder-list-row-even-background-color-default: rgb(0,0,0,0.03);
  --foldershare-folder-list-row-odd-background-color-default: rgb(0,0,0,0.00);
  --foldershare-folder-list-line-height-default: 1.75em;
  --foldershare-folder-list-radius-default: 4px;
  --foldershare-folder-list-shadow-default: rgba(0,0,0,0.1);
  --foldershare-folder-list-margins-default: 0.5em;
  --foldershare-folder-list-max-height-default: none;
  --foldershare-folder-list-draghover-border-color-default: #000;
  --foldershare-folder-list-draghover-border-width-default: 2px;
  --foldershare-folder-list-draghover-row-border-color-default: #000;
  --foldershare-folder-list-draghover-row-border-width-default: 2px;
  --foldershare-menu-border-color-default: #ccc;
  --foldershare-menu-shadow-color-default: rgba(0,0,0,0.15);
  --foldershare-menu-shadow-size-default: 4px;
  --foldershare-folder-region-background-color-default: #f8f8f8;
  --foldershare-sidebar-background-color-default: #f8f8f8;
  --foldershare-sidebar-width-default: 10em;
  --foldershare-sidebar-padding-default: 10px;
  --foldershare-sidebar-block-seprator-color-default: #e8e8e8;
}

/*
 * Themes and "fixes"
 * ------------------
 * Most themes are focused on presenting content, not user interfaces.
 * Because we are primarily styling a user interface, we are forced to
 * "fix" the work of themes that style content in a way that looks odd
 * for a user interface. Examples are themes that add big margins or
 * borders around forms, which causes odd formatting for dialogs and
 * the largely hidden forms that back up the user interface. Leaving a
 * theme's content-focused styling in place creates a messy jumbled
 * user interface spread across a page or dialog. It looks unprofessional
 * and is harder to use. To make the user interface look and work well,
 * we have to override the theme.
 *
 * Most themes extend Drupal core's "Classy" theme, which applies
 * straight-foward templates and styles. Themes then largely apply their
 * own CSS to tweak colors and shading. There is very little to override
 * for these themes. An example is core's "Bartik".
 *
 * Two main classes of themes do not extend "Classy" and instead build
 * their own templates: Bootstrap and W3.CSS frameworks like d8w3css.
 * These have very different templates and often significantly different
 * CSS approaches. These also may add special features, such as Bootstrap's
 * way of coloring buttons automatically based on their labels, or
 * Bootstrap's styling of file links to include file sizes and its own
 * set of file icons. For content, these themes can look quite nice and
 * the extra features are handy. But in a user interface, this creates a
 * jumbled mess. These things need to be "fixed".
 *
 * So, this CSS file aims to style user interface components, but not
 * content. Search results, the usage table, and the entity page are
 * largely left up to the theme to style. The focus here is on styling the
 * folder browser, its toolbar, and assorted dialogs. For all of
 * these, the CSS below does basic styling that works for most themes,
 * and then sometimes includes "fix" styling to override Bootstrap, W3CSS,
 * or other problematic theme practices so that we get a nice user interface.
 */

/*-----------------------------------------------------------------------
 *
 * Generic.
 *
 *-----------------------------------------------------------------------*/
/*
 * When Javascript is not enabled in the browser, a noscript tag contains
 * a message. Make it stand out.
 */
noscript.foldershare-noscript {
  display: block;
  font-weight: bold;
  text-align: center;
  margin: 2em;
}

/*-----------------------------------------------------------------------
 *
 * Error messages.
 *
 *-----------------------------------------------------------------------*/
/*
 * Formatted messages, such as those used in error dialogs, have a body
 * and details.
 */
.foldershare-message-body {
  margin: 0;
  padding: 0;
}
.foldershare-message-details {
  margin: 0.5em 0 0.5em 0;
  font-size: 0.9em;
  line-height: 1.3em;
}
.foldershare-message-details p {
  padding: 0.5em;
  margin: 0;
}

.foldershare-error-dialog-body .foldershare-message-summary {
  font-weight: bold;
}

/*
 * Drupal core's "Classy" theme message area styling is used by most themes.
 * It creates a colored background, border, and left-side icon for a message
 * area. This works fine on a page, but it is rather heavy-weight for a
 * dialog. Remove the background color, border, box shadow, icon, and
 * left-icon padding if present.
 *
 * Some themes (e.g. Bartik) also add additional margins above and below
 * the messages. But for a dialog, such margins are already handled by
 * the wrapper, so this is redundant.
 */
.foldershare-ui-dialog .messages__wrapper {
  /* Classy fix. */
  padding: 0;
  font: inherit;
}
.foldershare-ui-dialog .messages {
  /* Classy fix. */
  background-color: transparent !important;
  background-position: 0 0 !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  margin: 1em 0 0 0;
  padding: 0;
}
.foldershare-ui-dialog .messages:last-child,
.foldershare-ui-dialog .messages:first-child {
  /* Bartik fix. */
  margin-top: 0;
  margin-bottom: 0;
}
.foldershare-ui-dialog .messages__wrapper {
  margin-top: 1em;
}

/*
 * Some themes (e.g. Bootstrap) add a message wrapper and an inner div,
 * and style those with a colored background, etc. A "close" button is
 * also included to close the error message. But for a dialog, there is
 * little value in closing a dialog error because the error persists
 * and prevents the dialog from being finished. So, remove the button,
 * and remove the background color, border, and box shadow.
 */
.foldershare-ui-dialog .messages__wrapper .alert {
  /* Bootstrap fix. */
  background-color: transparent !important;
  background-position: 0 0 !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  margin: 1em 0 0 0;
  padding: 0;
}
.foldershare-ui-dialog .messages__wrapper .alert-dismissable button.close {
  /* Bootstrap fix. */
  display: none;
}

/*-----------------------------------------------------------------------
 *
 * Folder browser toolbar.
 *
 * The folder browser is preceded by a toolbar that contains
 * standard widgets for acting upon files and folders in the list:
 * - A main menu button with commands to open, create, delete, copy, etc.
 * - An ancestor menu button to jump up through the folder tree.
 * - A search box to search down through the folder tree.
 *
 *-----------------------------------------------------------------------*/
.foldershare-toolbar.form-group,
.foldershare-toolbar {
  /* Display the toolbar as a flex box with left-to-right flow. */
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  margin: 0;
  line-height: 1em;
  padding: var(--foldershare-toolbar-margins,var(--foldershare-toolbar-margins-default,2px));
  /* Add border width to bottom padding to help visual centering. */
  padding-bottom: calc(var(--foldershare-toolbar-margins,var(--foldershare-toolbar-margins-default,2px) + var(--foldershare-folder-list-border-width,var(--foldershare-folder-list-border-width-default,2px))));
  border-top-left-radius: var(--foldershare-folder-list-radius,var(--foldershare-folder-list-radius-default,4px));
  border-top-right-radius: var(--foldershare-folder-list-radius,var(--foldershare-folder-list-radius-default,4px));
  /* Shade the toolbar background. */
  background: linear-gradient(var(--foldershare-toolbar-top-background-color, var(--foldershare-toolbar-top-background-color-default, #f8f8f8)), var(--foldershare-toolbar-bottom-background-color, var(--foldershare-toolbar-bottom-background-color-default, #e8e8e8)));
  background-color: var(--foldershare-toolbar-top-background-color, var(--foldershare-toolbar-top-background-color-default, #f8f8f8));
}

/*
 * When the toolbar is on a non-folder page, there is no folder browser
 * below the toolbar, so remove the toolbar shading, borders, etc.
 */
.foldershare-nonfolder-browser .foldershare-toolbar-and-folder-browser {
  border: none;
  box-shadow: none;
}
.foldershare-nonfolder-browser .foldershare-toolbar {
  background: none;
}

/*
 * Remove all spacing inherent in the embedded forms and divs used for
 * the individual toolbar items.
 *
 * Some themes (e.g. W3CSS frameworks like d8w3css) add large padding/margins
 * to forms, form items, and <div>s used to group form elements. This creates
 * a jumbled toolbar. One theme uses !important to insist on its
 * padding/margins, so below we must use !important to insist otherwise.
 */
.foldershare-folder-browser-menu-form,
.foldershare-ancestormenu {
  display: inline;
  margin: 0;
  padding: 0;
}
.foldershare-folder-browser-menu-form.w3-padding-large,
.foldershare-folder-browser-menu-form.w3-margin-top {
  /* d8w3css fix. */
  margin: 0 !important;
  padding: 0 !important;
}
.foldershare-folder-browser-menu.form-group,
.foldershare-folder-browser-menu {
  /* d8w3css fix. */
  margin: 0 !important;
  padding: 0 !important;
}
.foldershare-folder-browser-menu-form div.w3-section,
.foldershare-searchbox-form div.w3-section {
  /* d8w3css fix. */
  margin: 0 !important;
  padding: 0 !important;
}

/*
 * Position menu buttons at the left, and the search box at the right.
 */
.foldershare-toolbar > * {
  display: inline;
  flex-grow: 0;
  flex-shrink: 0;
  margin: 0;
  padding-right: var(--foldershare-toolbar-item-spacing,var(--foldershare-toolbar-item-spacing-default,4px));
}
.foldershare-toolbar > *:last-child {
  padding-right: 0;
}

.foldershare-toolbar .foldershare-sidebar-button {
  order: 1;
  margin-right: calc(2*var(--foldershare-toolbar-item-spacing,var(--foldershare-toolbar-item-spacing-default,4px))) !important;
  padding-right: 0;
}
.foldershare-toolbar .foldershare-folder-browser-menu-form {
  order: 2;
}
.foldershare-toolbar .foldershare-ancestormenu {
  order: 3;
}
.foldershare-toolbar .foldershare-searchbox-form {
  order: 4;
  margin: 0 0 0 auto;
}

/*
 * Some themes (e.g. W3CSS frameworks like d8w3css) add large padding/margins
 * to form items, like the search box. Since we want the search box to line up
 * beside the buttons and fit within a toolbar, the padding/margin must be
 * very limited.
 */
.foldershare-searchbox-form.w3-padding-large,
.foldershare-searchbox-form.w3-margin-top {
  /* d8w3css fix. */
  margin: 0 var(--foldershare-toolbar-item-spacing,var(--foldershare-toolbar-item-spacing-default,2px)) 0 auto !important;
  padding: 0 !important;
}

/*-----------------------------------------------------------------------
 *
 * Folder browser exposed filters.
 *
 * The default views for folder lists do not include exposed filters.
 * But if a site adds them, style the background and padding to help them
 * visually integrate into the folder listing.
 *
 *-----------------------------------------------------------------------*/
.foldershare-folder-selection-table .views-exposed-form,
.foldershare-folder-browser .views-exposed-form {
  background: var(--foldershare-folder-list-header-background-color, var(--foldershare-folder-list-header-background-color-default, #e8e8e8));
  padding: var(--foldershare-toolbar-margins,var(--foldershare-toolbar-margins-default,2px));;
}
/*
 * Some themes (e.g. Bootstrap) add big margins on all forms. Suppress them.
 */
.foldershare-folder-selection-table .view-filters.form-group,
.foldershare-folder-browser .view-filters.form-group {
  /* Bootstrap fix. */
  margin: 0;
}
/*
 * Some themes (e.g. W3CSS frameworks like d8w3css) add large padding/margins
 * around the exposed filter form. to make the filter form visually integrate
 * with the toolbar above and file/folder list below, reduce these
 * padding/margins. Because one theme uses !important to set these, we have
 * to use !important to override them.
 */
.foldershare-folder-selection-table .views-exposed-form.w3-padding-large,
.foldershare-folder-selection-table .views-exposed-form.w3-margin-top,
.foldershare-folder-browser .views-exposed-form.w3-padding-large,
.foldershare-folder-browser .views-exposed-form.w3-margin-top {
  /* d8w3css fix. */
  padding: 6px !important;
  margin: 0 !important;
}
/*
 * Drupal's base styling for form items adds bigger margins than we'd prefer.
 * Reduce them.
 */
.foldershare-folder-selection-table .views-exposed-form .form-item,
.foldershare-folder-selection-table .views-exposed-form .form-actions,
.foldershare-folder-browser .views-exposed-form .form-item,
.foldershare-folder-browser .views-exposed-form .form-actions {
  margin-right: var(--foldershare-toolbar-item-spacing,var(--foldershare-toolbar-item-spacing-default,2px));
  margin-top: 0;
  margin-bottom: 0;
}
/*
 * Some themes (e.g. W3CSS frameworks like d8w3css) interpret <div>s as
 * section breaks and add large margins. The <div>s here, though, are just
 * used to group form items, so these margins need to be suppressed.
 * Since one theme uses !important to set thes, we have to use !important
 * to override them.
 */
.foldershare-folder-selection-table .views-exposed-form .w3-section,
.foldershare-folder-browser .views-exposed-form .w3-section {
  /* d8w3css fix. */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/*-----------------------------------------------------------------------
 *
 * Folder browser pager below the list but above the footer.
 *
 *-----------------------------------------------------------------------*/
/*
 * Shade the pager background to match the top of the footer so that it
 * blends into the footer seamlessly.
 */
.foldershare-folder-selection-table .pager,
.foldershare-folder-browser .pager {
  width: 100%;
  margin: 0;
  padding: 1px 0 1px 0;
  text-align: center;
  background: var(--foldershare-folder-list-header-background-color, var(--foldershare-folder-list-header-background-color-default, #e8e8e8));
}
.foldershare-folder-selection-table .pager ul,
.foldershare-folder-browser .pager ul {
  padding: 0;
  text-align: center;
  margin: 0;
}

/*-----------------------------------------------------------------------
 *
 * Folder browser footer.
 *
 * The footer below the folder browser shows information about the
 * list. The footer is created as a view footer.
 *
 * For themes based upon Drupal core's "Classy", a footer on a view is
 * marked with the ".view-footer" class. For other themes, the element has no
 * well-known class and we must rely upon a nesting order.
 *
 * The footer is styled to be similar to the toolbar above the list.
 *
 *-----------------------------------------------------------------------*/
.foldershare-folder-selection-table footer.view-footer,
.foldershare-folder-selection-table div.view-footer,
.foldershare-folder-selection-table footer,
.foldershare-folder-selection-table > footer,
.foldershare-folder-browser footer.view-footer,
.foldershare-folder-browser div.view-footer,
.foldershare-folder-browser footer,
.foldershare-folder-browser > footer {
  margin: 0;
  padding: var(--foldershare-folder-list-footer-margins,var(--foldershare-folder-list-footer-margins-default,2px));
  text-align: center;
  line-height: 1em;
  border-bottom-left-radius: var(--foldershare-folder-list-radius,var(--foldershare-folder-list-radius-default,4px));
  border-bottom-right-radius: var(--foldershare-folder-list-radius,var(--foldershare-folder-list-radius-default,4px));
  /* Shade the footer background. */
  background: linear-gradient(var(--foldershare-folder-list-footer-top-background-color, var(--foldershare-folder-list-footer-top-background-color-default, #f8f8f8)), var(--foldershare-folder-list-footer-bottom-background-color, var(--foldershare-folder-list-footer-bottom-background-color-default, #e8e8e8)));
  background-color: var(--foldershare-folder-list-footer-top-background-color, var(--foldershare-folder-list-footer-top-background-color-default, #f8f8f8));
}

/*-----------------------------------------------------------------------
 *
 * Folder browser UI.
 *
 * The folder browser is a Views table. Each row in the table lists
 * a single file or folder. A similar list style is used in these cases:
 * - User interfaces:
 *   - The main folder browser on an entity page.
 *   - A folder browser in a selection dialog.
 * - Listings:
 *   - A folder browser on a search results page.
 *
 * The UI cases have a toolbar above them and are indicated by the
 * "foldershare-toolbar-and-folder-browser" class. These have fairly fixed
 * styling so that the UI looks like a UI and is less dependent on
 * theme styling.
 *
 * The non-UI case (search results) does not have a toolbar  and are
 * indicated by the "foldershare-search-results" class. This has weak
 * styling here so that the theme can take over.
 *
 *-----------------------------------------------------------------------*/
/*
 * When showing non-folder entities, there are no children to list in the
 * table, but the table's header is still needed for the UI it provides.
 * So, hide the table and the responsive columns message.
 */
.foldershare-nonfolder-browser .views-element-container {
  display: none;
}

/*
 * Folder browser UI.
 *
 * The table has a border with a default background color that switches to
 * a highlight color during file drag to indicate the table is a valid
 * drop destination.
 */
.foldershare-toolbar-and-folder-browser,
.foldershare-folder-selection {
  /* Outline the entire thing. */
  border-radius: var(--foldershare-folder-list-radius,var(--foldershare-folder-list-radius-default,4px));
  border: var(--foldershare-folder-list-border-width, var(--foldershare-folder-list-border-width-default, 2px)) solid var(--foldershare-folder-list-border-color, var(--foldershare-folder-list-border-color-default, #eee));
  box-shadow: 1px 1px 2px 0px var(--foldershare-folder-list-shadow,var(--foldershare-folder-list-shadow-default,rgba(0,0,0,0.15)));
}
.foldershare-toolbar-and-folder-browser {
  clear: both;
  margin-left: 0;
  margin-right: 0;
  margin-top: var(--foldershare-folder-list-margins,var(--foldershare-folder-list-margins-default,1em));
  margin-bottom: var(--foldershare-folder-list-margins,var(--foldershare-folder-list-margins-default,1em));
  padding: 0;
}
.foldershare-sidebar-and-folder-browser {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  border-radius: var(--foldershare-folder-list-radius,var(--foldershare-folder-list-radius-default,4px));
  background-color: var(--foldershare-folder-region-background-color, var(--foldershare-folder-region-background-color-default, #f8f8f8));
}

/*
 * Sidebar is to the left of the file/folder list.
 */
.foldershare-toolbar-and-folder-browser .foldershare-sidebar {
  order: 0;
  flex-grow: 0;
  flex-shrink: 0;
  width: var(--foldershare-sidebar-width,var(--foldershare-sidebar-width-default,15em));;
  height: 100%;
  border-bottom-left-radius: var(--foldershare-folder-list-radius,var(--foldershare-folder-list-radius-default,4px));
  background-color: var(--foldershare-sidebar-background-color, var(--foldershare-sidebar-background-color-default, #e8e8e8));
  align-self: flex-start;
  padding: var(--foldershare-sidebar-padding,var(--foldershare-sidebar-padding-default,10px));
}
.foldershare-toolbar-and-folder-browser .foldershare-sidebar .foldershare-sidebar-link-block .foldershare-sidebar-link-block-title {
  /*
   * Use the table header style's top padding to align the title with the
   * adjacent folder browser heading.
   */
  padding-top: 0;
  margin: 0;
  margin-top: calc(var(--foldershare-folder-list-header-padding,var(--foldershare-folder-list-header-padding-default,2px)) + var(--foldershare-folder-list-border-width,var(--foldershare-folder-list-border-width-default,1px)) + var(--foldershare-folder-list-header-border-width,var(--foldershare-folder-list-header-border-width-default,2px)) - var(--foldershare-sidebar-padding,var(--foldershare-sidebar-padding-default,10px)));
}
.foldershare-toolbar-and-folder-browser .foldershare-sidebar .foldershare-sidebar-link-block .foldershare-sidebar-favorites-links {
  list-style: none;
  padding-left: 0;
}

.foldershare-toolbar-and-folder-browser .foldershare-sidebar .foldershare-sidebar-link-block .foldershare-sidebar-additional-links {
  list-style: none;
  padding-left: 0;
  margin-top: 0;
  padding-top: 0;
  border-top: 1px solid var(--foldershare-sidebar-block-separator-color,var(--foldershare-sidebar-block-separator-color-default,#ccc));
}

@media screen and (max-width: 640px) {
  /*
   * Hide the sidebar on narrow screens. Setting the width to 0 is a flag to
   * the page's Javascript to leave the sidebar hidden regardless of the user's
   * sidebar visibility preference.
   */
  .foldershare-toolbar-and-folder-browser .foldershare-sidebar {
    display: none;
    width: 0;
  }
}

.foldershare-toolbar-and-folder-browser .foldershare-folder-browser {
  order: 1;
  flex-grow: 1;
  flex-shrink: 1;
  overflow-x: scroll;
}
.foldershare-toolbar-and-folder-browser .foldershare-folder-browser .view-content {
  overflow-y: scroll;
  max-height: var(--foldershare-folder-list-max-height,var(--foldershare-folder-list-max-height-default,none));
}
.foldershare-toolbar-and-folder-browser table {
  /* Let table scroll horizontally. */
  min-width: 100%;
  width: auto;
  table-layout: fixed;
  border-collapse: collapse;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  /*
   * Add a border around the table that highlights during drags.
   * Use the header background color so that the
   * border doesn't stand out until highlighting is needing.
   */
  border: var(--foldershare-folder-list-header-border-width, var(--foldershare-folder-list-header-border-width-default, 2px)) solid var(--foldershare-folder-list-header-background-color, var(--foldershare-folder-list-header-background-color-default, #e8e8e8));
  background-color: var(--foldershare-folder-list-background-color, var(--foldershare-folder-list-background-color-default, #f8f8f8));
}

.foldershare-toolbar-and-folder-browser table > thead > tr {
  border-bottom: 1px solid var(--foldershare-folder-list-row-border-color, var(--foldershare-folder-list-row-border-color-default, #eee));
}

.foldershare-toolbar-and-folder-browser table > thead > tr > th {
  border: none;
  border-right: 1px solid var(--foldershare-folder-list-row-border-color, var(--foldershare-folder-list-row-border-color-default, #eee));
  background: transparent;
}
.foldershare-toolbar-and-folder-browser table > thead > tr > th:last-child {
  border-right: none;
}

/*
 * Some themes (e.g. Bartik) style content table headers with a custom
 * background color, associated text/link color, and sort up/down icons.
 * While this may look nice for content tables, it looks odd within the
 * context of a user interface. Suppress this header background color
 * and anchor color change, where possible.
 *
 * Some themes also use a different font for tables. This may look
 * nice for content tables, it leaves a user interface with a jumble of
 * different fonts. Suppress this change where possible.
 *
 * Some themes (e.g. Bartik) add large padding for table headers. This may
 * work for content tables, but it is odd in a user interface. Suppress it.
 */
.foldershare-toolbar-and-folder-browser table {
  font: inherit;
}
.foldershare-toolbar-and-folder-browser table > thead > tr {
  background-color: var(--foldershare-folder-list-header-background-color, var(--foldershare-folder-list-header-background-color-default, #e8e8e8));
  font-family: inherit;
}
.foldershare-toolbar-and-folder-browser table > thead > tr > th {
  /* Bartik et al fix. */
  color: inherit;
  font: inherit;
  /* Bartik and Bootstrap fix. */
  padding-top: var(--foldershare-folder-list-header-padding,var(--foldershare-folder-list-header-padding-default,2px));
  padding-bottom: 0;
  /* Use list margins, not header padding, so headings line up with content. */
  padding-left: var(--foldershare-folder-list-margins,var(--foldershare-folder-list-margins-default,1em));
  padding-right: var(--foldershare-folder-list-margins,var(--foldershare-folder-list-margins-default,1em));
}
.foldershare-toolbar-and-folder-browser table > thead > tr > th:first-child {
  /* Use header padding for first and last children. */
  padding-left: var(--foldershare-folder-list-header-padding,var(--foldershare-folder-list-header-padding-default,2px));
}
.foldershare-toolbar-and-folder-browser table > thead > tr > th:last-child {
  padding-right: var(--foldershare-folder-list-header-padding,var(--foldershare-folder-list-header-padding-default,2px));
}
.foldershare-toolbar-and-folder-browser table > thead > tr > th a,
.foldershare-toolbar-and-folder-browser table > thead > tr > th a:hover,
.foldershare-toolbar-and-folder-browser table > thead > tr > th a:focus {
  /* Bartik et al fix. */
  color: inherit;
  font: inherit;
  /* Bartik and Bootstrap fix. */
  padding: 0;
}
.foldershare-toolbar-and-folder-browser table > thead .tablesort--desc {
  /* Bartik et al fix. */
  background-image: url("../images/twistie-up.svg");
  vertical-align: middle;
}
.foldershare-toolbar-and-folder-browser table > thead .tablesort--asc {
  /* Bartik et al fix. */
  background-image: url("../images/twistie-down.svg");
  vertical-align: middle;
}

/*
 * Many themes style content tables with tall rows, lots of padding,
 * cell borders, dramatic zebra striping, and strong row borders. Drupal's
 * own default styling does this. This can be nice in a content table,
 * but in a user interface this is too dramatic. Simplify.
 */
.foldershare-toolbar-and-folder-browser table > tbody > tr {
  padding: 0;
  text-align: left;
  border: var(--foldershare-folder-list-row-border-width, var(--foldershare-folder-list-row-border-width-default, 2px)) solid var(--foldershare-folder-list-row-border-color, var(--foldershare-folder-list-row-border-color-default, #ccc));
}

.foldershare-toolbar-and-folder-browser table > tbody > tr > td {
  border: 0;
  vertical-align: middle;
  height: var(--foldershare-folder-list-line-height,var(--foldershare-folder-list-line-height-default,1.75em));
  min-height: var(--foldershare-folder-list-line-height,var(--foldershare-folder-list-line-height-default,1.75em));
  padding-top: 0;
  padding-bottom: 0;
  padding-left: var(--foldershare-folder-list-margins,var(--foldershare-folder-list-margins-default,2px));
  padding-right: var(--foldershare-folder-list-margins,var(--foldershare-folder-list-margins-default,2px));
}
.foldershare-toolbar-and-folder-browser table > tbody > tr > td:first-child {
  /* Use header padding for first and last children. */
  padding-left: var(--foldershare-folder-list-header-padding,var(--foldershare-folder-list-header-padding-default,2px));
}
.foldershare-toolbar-and-folder-browser table > tbody > tr > td:last-child {
  padding-right: var(--foldershare-folder-list-header-padding,var(--foldershare-folder-list-header-padding-default,2px));
}

/*
 * Zebra stripe the rows.
 */
.foldershare-toolbar-and-folder-browser table > tbody > tr:nth-child(odd),
.foldershare-toolbar-and-folder-browser table > tbody > tr.odd {
  background: var(--foldershare-folder-list-row-odd-background-color, var(--foldershare-folder-list-row-odd-background-color-default, rgba(0,0,0,0.03)));
}
.foldershare-toolbar-and-folder-browser table > tbody > tr:nth-child(even),
.foldershare-toolbar-and-folder-browser table > tbody > tr.even {
  background: var(--foldershare-folder-list-row-even-background-color, var(--foldershare-folder-list-row-even-background-color-default, rgba(0,0,0,0.00)));
}

/*
 * Many themes inherit Drupal's default styling that gives a dark background
 * color to the column used for sorting. The merits of this can be argued,
 * given the sort up/down icons already present in the table header. But for
 * a user interface, this looks odd. Suppress it.
 */
.foldershare-toolbar-and-folder-browser table > tbody > tr:not(.selected) > td.is-active {
  background: transparent;
}

/*
 * Some themes (e.g. Adminimal) also style the background and border of
 * the header's cell to indicate the column used for sorting. This is also
 * awkward here. Suppress it.
 */
.foldershare-toolbar-and-folder-browser table > thead > tr > th.is-active {
  /* Adminimal fix. */
  background: transparent;
  border: none;
}

/*
 * Some themes (e.g. Bootstrap and W3CSS frameworks like d8w3css) do not extend
 * Drupal's core themes (e.g. "classy" or "stable") and therefore do not get
 * the default table row selection color set in "tableselect.css". We are
 * forced to define it ourselves.
 */
.foldershare-folder-selection-table table > tbody > tr.selected > td,
.foldershare-folder-selection-table table > tbody > tr.selected > td.is-active,
.foldershare-toolbar-and-folder-browser table > tbody > tr.selected > td,
.foldershare-toolbar-and-folder-browser table > tbody > tr.selected > td.is-active {
  /* Bootstrap fix. */
  /* d8w3css fix. */
  background: var(--foldershare-select-color, var(--foldershare-select-color-default, #ffc));
}

/*
 * During a drag, the table's outline is colored, along with table rows.
 */
.foldershare-toolbar-and-folder-browser table.foldershare-draghover {
  border: var(--foldershare-folder-list-draghover-border-width,var(--foldershare-folder-list-draghover-border-width-default,2px)) dashed var(--foldershare-folder-list-draghover-border-color, var(--foldershare-folder-list-draghover-border-color-default, #ffc));
}
.foldershare-toolbar-and-folder-browser table > tbody > tr.foldershare-draghover {
  outline: var(--foldershare-folder-list-draghover-row-border-width,var(--foldershare-folder-list-draghover-row-border-width-default,2px)) dashed var(--foldershare-folder-list-draghover-row-border-color, var(--foldershare-folder-list-draghover-row-border-color-default, #000));
}

/*
 * Simplify the styling on the ghost table during a drag.
 */
table.foldershare-drag-image {
  width: auto;
  border: none;
}
table.foldershare-drag-image tr {
  background-color: transparent;
  border: none;
}
table.foldershare-drag-image tr td {
  background-color: transparent;
  border: none;
}

/*
 * Prevent odd column wrapping.
 */
.foldershare-toolbar-and-folder-browser td,
.foldershare-toolbar-and-folder-browser th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
 * Folder browser tables default to these columns:
 * - Name.
 * - Modified date.
 * - Size.
 * - Owner.
 *
 * A site may change this by editing the view, and responsiveness may remove
 * columns up to but not including the name.
 */
.foldershare-toolbar-and-folder-browser .views-field-name {
  width: 100%;
  min-width: 10em;
  max-width: 0;
}
.foldershare-toolbar-and-folder-browser .views-field-size {
  width: 6em;
  min-width: 6em;
}
.foldershare-toolbar-and-folder-browser .views-field-created,
.foldershare-toolbar-and-folder-browser .views-field-changed {
  width: 9em;
  min-width: 9em;
}
.foldershare-toolbar-and-folder-browser .views-field-uid {
  /*
   * File/folder owner needs enough room for long names, but there is no way
   * to know a fixed maximum. If we don't set this, the column will go from
   * narrow to wide depending on what names are shown. To have some
   * page-to-page continuity, we set a minimum width sufficient for simple
   * names.
   */
  width: 12em;
  min-width: 6em;
}

/*
 * Some themes (e.g. Bootstrap), style "file" links with more than just
 * a MIME-type-based file icon. They do the following:
 * - Change display to "table" instead of "inline-block".
 * - Reduce the font size.
 * - Add big vertical margins.
 * - Set the width to 100%.
 *
 * Setting the width to 100% is particularly problematic in a folder
 * browser since it makes the entire table cell containing the file name into
 * an anchor. Insteasd, we need clicks outside of the file name to select
 * the row, so a width of 100% is not usable. Fix this.
 *
 * A <span> is typically within the <a> to provide the file name. Padding
 * on this makes room for the icon. But some themes (e.g. Bootstrap) add
 * extra borders and backgrounds. Suppres this.
 */
.foldershare-toolbar-and-folder-browser .file {
  /* Bootstrap fix. */
  display: inline-block;
  border: none;
  font-size: 100%;
  margin: 0;
  width: auto;
  /* Leave room for the file icon at the left. */
  padding: 0 0 0 1.75em;
  background-repeat: no-repeat;
  background-position: left center;
}
.foldershare-toolbar-and-folder-browser .file > span:first-child,
.foldershare-toolbar-and-folder-browser .file > span:last-child,
.foldershare-toolbar-and-folder-browser .file > span {
  /* Bootstrap fix. */
  background: transparent;
  border: none;
  color: inherit;
}

/*-----------------------------------------------------------------------
 *
 * Search results.
 *
 * The search results list is not a user interface. Let it be styled by
 * the theme. Override only a little to keep the list tight and show
 * nice file icons.
 *
 *-----------------------------------------------------------------------*/
.foldershare-search-results table {
  font-family: inherit;
  width: 100%;
}
.foldershare-search-results td,
.foldershare-search-results th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: var(--foldershare-folder-list-line-height,var(--foldershare-folder-list-line-height-default,1.75em));
  min-height: var(--foldershare-folder-list-line-height,var(--foldershare-folder-list-line-height-default,1.75em));
  padding-left: var(--foldershare-folder-list-margins,var(--foldershare-folder-list-margins-default,2px));
  padding-right: var(--foldershare-folder-list-margins,var(--foldershare-folder-list-margins-default,2px));
  padding-top: 0;
  padding-bottom: 0;
}
.foldershare-search-results .views-field-name {
  width: 100%;
  min-width: 10em;
  max-width: 0;
}
.foldershare-search-results .views-field-size {
  width: 6em;
  min-width: 6em;
}
.foldershare-search-results .views-field-created,
.foldershare-search-results .views-field-changed {
  width: 11em;
  min-width: 11em;
}
.foldershare-search-results .views-field-uid {
  width: 11em;
  min-width: 8em;
}

/*
 * Some themes (e.g. Bootstrap) alter the style of "file" links. They
 * reduce the font size to 75%, add an extra top/bottom margin, and change
 * the display type to "table". This makes file items look odd in lists
 * and the "table" display style confuses placement of the file icon to
 * the left of the name. Fix this.
 */
.foldershare-search-results .file {
  /* Bootstrap fix. */
  display: inline-block;
  font-size: 1em;
  margin: 0;
}

/*-----------------------------------------------------------------------
 *
 * Responsive browser. Themes may override this.
 *
 * Common width breakpoints are:
 * - min-width: 300px       Smartphones, portrait
 * - min-width: 480px       Smartphones, landscape
 * - min-width: 768px       Tablets, portrait
 * - min-width: 1024px      Tablets, landscape, and desktops
 *
 *-----------------------------------------------------------------------*/
@media screen and (max-width: 640px) {
  /*
   * Narrow screens are probably touch devices, so make rows taller so
   * that they are easier to select.
   */
  .foldershare-toolbar-and-folder-browser table > thead > tr,
  .foldershare-toolbar-and-folder-browser table > tbody > tr {
    line-height: 3em;
  }
}

/*
 * Remove the button added by tableresponsive.js to show/hide columns
 * when the page is narrow and columns have been hidden. This button
 * doesn't fit in the folder contents table's styling and provides
 * functionality that interferes with the smooth presentation of content.
 * We'd prefer to remove tableresponsive.js entirely, but this is added
 * automatically by the Views module.
 */
.foldershare-toolbar-and-folder-browser .tableresponsive-toggle-columns {
  display: none;
}

/*-----------------------------------------------------------------------
 *
 * File and folder names.
 *
 * Each viewable file/folder has an anchor. When clicked, this opens that
 * item on a new page.
 *
 * Hidden files and folders are normally not shown and do not have anchors.
 *
 * Disabled items are shown, but without an anchor because they are currently
 * unviewable while a background task is doing something with them.
 *
 *-----------------------------------------------------------------------*/
.foldershare-hidden-entity,
a.foldershare-hidden-entity,
a.foldershare-hidden-entity:link,
a.foldershare-hidden-entity:visited,
a.foldershare-hidden-entity:hover,
a.foldershare-hidden-entity:active,
a.foldershare-hidden-entity:focus {
  /* Use the theme's text color. */
  color: inherit;
  /* Dim hidden items and use a strike-through. Discourage clicking. */
  opacity: 0.5;
  text-decoration: line-through;
  border: none;
  /* Hint that these are not click/touch-able. */
  cursor: default;
}

/*
 * Disabled files and folders are normally visible, but they are
 * not click/touch-able or selectable. A spinner GIF is inserted before
 * the file/folder name to indicate that the item is in use elsewhere.
 */
.foldershare-disabled-entity,
a.foldershare-disabled-entity:link,
a.foldershare-disabled-entity:visited,
a.foldershare-disabled-entity:hover,
a.foldershare-disabled-entity:active,
a.foldershare-disabled-entity:focus {
  /* Use the theme's text color. */
  color: inherit;
  /* Dim disabled items. Discourage clicking. */
  opacity: 0.5;
  text-decoration: none;
  border: none;
  /* Hint that these are not click/touch-able. */
  cursor: default;
}

.foldershare-toolbar-and-folder-browser .foldershare-disabled-entity span.foldershare-entity-name {
  /* Slide the name over and insert a spinner GIF. */
  padding-left: 22px;
  background-image: url("../images/disabled-throbber.gif");
  background-position: left center;
  background-repeat: no-repeat;
}

/*-----------------------------------------------------------------------
 *
 * Toolbar buttons.
 *
 * The main and ancestor menu buttons present a drow-down menu. Both have
 * custom icons. Otherwise they should be styled the same.
 *
 * The sidebar button is just a button, with no menu.
 *
 *-----------------------------------------------------------------------*/
.foldershare-sidebar-button,
.foldershare-sidebar-button.ui-button,
.foldershare-folder-browser-mainmenu-button,
.foldershare-folder-browser-mainmenu-button.ui-button,
.foldershare-ancestormenu-menu-button,
.foldershare-ancestormenu-menu-button.btn {
  display: inline-block;
  box-sizing: content-box;
  padding: 2px 6px 2px 6px;
  /* No margin or text height for image-only buttons. */
  margin: 0;
  line-height: 0;
}

.foldershare-sidebar-button:focus,
.foldershare-folder-browser-mainmenu-button:focus,
.foldershare-ancestormenu-menu-button:focus {
  /* Disable the focus outline on menu buttons. */
  outline: 0;
}

@media screen and (max-width: 640px) {
  /*
   * Use a larger finger-sized button on smaller screens.
   */
  .foldershare-toolbar button.foldershare-folder-browser-mainmenu-button,
  .foldershare-toolbar button.foldershare-ancestormenu-menu-button {
    padding: 8px;
  }

  /*
   * Hide the sidebar button on narrow screens.
   */
  .foldershare-toolbar > .foldershare-sidebar-button {
    display: none;
  }
}

/*-----------------------------------------------------------------------
 *
 * Command and ancestor menus.
 *
 * The main command menu pops-up from the command menu button. A second
 * similar menu is available as a context menu from a right-click on a row.
 *
 * The ancestor menu pops-up from the ancestor menu button.
 *
 * All menus are styled the same.
 *
 *-----------------------------------------------------------------------*/
.foldershare-folder-browser-mainmenu,
.foldershare-folder-browser-mainmenu.ui-menu,
.foldershare-folder-browser-mainmenu.ui-widget,
.foldershare-folder-browser-mainmenu.ui-widget-content,
.foldershare-folder-browser-contextmenu,
.foldershare-folder-browser-contextmenu.ui-menu,
.foldershare-folder-browser-contextmenu.ui-widget,
.foldershare-folder-browser-contextmenu.ui-widget-content,
.foldershare-ancestormenu-menu,
.foldershare-ancestormenu-menu .ui-menu,
.foldershare-ancestormenu-menu .ui-widget,
.foldershare-ancestormenu-menu .ui-widget-content,
.foldershare-ancestormenu-menu.ui-menu,
.foldershare-ancestormenu-menu.ui-widget,
.foldershare-ancestormenu-menu.ui-widget-content {
  /*
   * Drupal core's theme.css changes menus and other jQuery.UI widgets to
   * use a custom font and font size. This makes dialogs look different
   * from the rest of the site's content. Revert the font.
   */
  /* Drupal fix. */
  font: inherit;
  font-family: inherit;
  font-size: inherit;
  /*
   * Drupal core's theme.css removes borders on menus. While it is better
   * for a theme to set these, some themes do not because they do not expect
   * a site to be using jQuery.UI elements. So, set a border for our menus.
   */
  /* Drupal fix. */
  border: 1px solid var(--foldershare-menu-border-color, var(--foldershare-menu-border-color-default, #ccc));
  border-radius: var(--foldershare-folder-list-radius,var(--foldershare-folder-list-radius-default,4px));
  box-shadow: var(--foldershare-menu-shadow-size,var(--foldershare-menu-shadow-size-default,4px)) 1px var(--foldershare-menu-shadow-size,var(--foldershare-menu-shadow-size-default,4px)) 0px var(--foldershare-menu-shadow-color,var(--foldershare-menu-shadow-color-default,rgba(0,0,0,0.15)));
  /*
   * Override Drupal's theme.css and give menus a background color.
   * Most themes load a jQuery.UI theme that sets this, or they set it
   * directly, but minimalist themes (e.g. Adminimal) don't set it,
   * leaving menus with a transparent background.
   */
  /* Drupal fix. */
  background: #fff;
  /* Override Drupal's style.css to get rid of huge padding. */
  padding: 0;
}

.foldershare-folder-browser-mainmenu,
.foldershare-folder-browser-contextmenu,
.foldershare-ancestormenu-menu {
  /* Prepare the menu for positioning relative to the menu button */
  position: absolute;
  z-index: 1000;
}

/*
 * Override menu.css so that menu items don't change their margins
 * and borders when they get the focus, which causes the menu to
 * jump about in an odd way.
 */
.foldershare-folder-browser-mainmenu .ui-state-focus,
.foldershare-folder-browser-mainmenu .ui-state-active,
.foldershare-folder-browser-contextmenu .ui-state-focus,
.foldershare-folder-browser-contextmenu .ui-state-active,
.foldershare-ancestormenu-menu .ui-state-focus,
.foldershare-ancestormenu-menu .ui-state-active {
  /* Drupal fix. */
  margin: 0;
  border: none;
}

/*
 * Clean up menu item spacing by getting rid of list icons, padding,
 * and borders.
 */
.foldershare-folder-browser-mainmenu .ui-menu-item,
.foldershare-folder-browser-contextmenu .ui-menu-item,
.foldershare-ancestormenu-menu .ui-menu-item {
  border: none;
  white-space: nowrap;
  list-style: none;
  list-style-image: none;
  padding: 0;
}
.foldershare-folder-browser-mainmenu .ui-menu-item-wrapper,
.foldershare-folder-browser-contextmenu .ui-menu-item-wrapper,
.foldershare-ancestormenu-menu .ui-menu-item-wrapper {
  padding-left: 10px;
  /* Leave room on the right for a submenu icon. */
  padding-right: 22px;
}
.foldershare-ancestormenu-menu .ui-menu-item-wrapper {
  /* Leave room vertically for file icons. */
  min-height: 16px;
}
.foldershare-ancestormenu-menu .ui-menu-item-wrapper .file {
  /* Include the file icon. */
  width: 1.75em;
  padding: 0;
  background-position: left center;
  display: inline-block;
}

@media screen and (max-width: 640px) {
  /*
   * Use a larger finger-sized menu items on smaller screens.
   */
  .foldershare-folder-browser-mainmenu .ui-menu-item-wrapper,
  .foldershare-folder-browser-contextmenu .ui-menu-item-wrapper,
  .foldershare-ancestormenu-menu .ui-menu-item-wrapper {
    line-height: 2em;
  }
}

/*-----------------------------------------------------------------------
 *
 * Search box on the toolbar.
 *
 *-----------------------------------------------------------------------*/
/*
 * Some themes (e.g. Bootstrap and W3CSS frameworks like d8w3cs) add
 * margins, padding, borders, etc. on everything... including hidden inputs.
 * But since hidden inputs are *hidden*, they shouldn't be styled. But
 * even when hidden, if they've got margins, padding, or borders, those
 * show up and affect the layout in unexpected ways. Suppress these.
 */
.foldershare-searchbox-form input[type="hidden"],
.foldershare-searchbox-form input[type="hidden"].form-control {
  /* Bootstrap fix. */
  /* d8w3css fix. */
  display: none !important;
  height: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

.foldershare-searchbox-keywords.form-control {
  display: inline-block;
}
.foldershare-searchbox label.control-label,
.foldershare-searchbox label {
  display: none;
  height: 0;
  font-size: 0;
  line-height: 0;
  padding: 0;
  margin: 0;
  position: relative;
}

.foldershare-searchbox {
  display: inline;
}

.foldershare-searchbox-submit.button,
.foldershare-searchbox .form-item-foldershare-searchbox-submit {
  /* The search form's submit button should never be shown. */
  display: none;
  height: 0;
  font-size: 0;
  line-height: 0;
  padding: 0;
}

.foldershare-searchbox .form-item-foldershare-searchbox-keywords {
  display: inline-block;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 4px;
  margin-right: 0;
  color: #000;
  font-style: normal;
  font-weight: normal;
}

.foldershare-searchbox input[type="search"] {
  /* This may be overridden by browser-specific search field styling. */
  border-radius: 4px 4px 4px 4px;
  appearance: searchfield;
  -webkit-appearance: searchfield;
  -moz-appearance: searchfield;
  box-sizing: border-box;
  font-family: inherit;
  /*
   * There is a problem when setting the left padding to leave room for
   * a magnifying glass icon.
   *
   * For Safari, this padding is ignored and Safari handles the internal
   * layout of the search box.
   *
   * For Firefox, this padding is used but the magnifying glass size is
   * not known and varies with the search box size.
   *
   * For Chrome, the browser doesn't add a magnifying glass icon. If we
   * set any padding, it looks odd.
   */
  padding: 2px 2px 2px 0.25em;
  margin: 0;
  font-weight: normal;
  /*
   * Some themes use hard-coded field heights. This might look OK on a big
   * page of form fields, but it looks odd in a user interface. Revert to
   * an automatic height.
   */
  height: auto;
  /*
   * Some themes assume that a text field should be full width, so they set
   * it to 100%.  This tends to look good in big form layouts, but it
   * does not make sense for a search box on a toolbar. It also conflicts
   * with the toolbar's flex layout. Revert to an automatic width.
   */
  width: auto;
}

/*
 * Some themes (e.g. bootstrap) add a search box description that is
 * redundant. Few modern users don't know what a search box is for.
 * Suppress it.
 */
.foldershare-searchbox .form-item div.description {
  /* Bootstrap fix. */
  margin: 0;
  display: none;
}

/*
 * Drupal's "normalize.css" suppresses browser-specific search field
 * appearance. But we want search fields to look like search fields.
 * Users are familiar with their browser and OS look and a web page
 * should not needlessly differ.
 */
.foldershare-searchbox input[type="search"]::-webkit-search-decoration {
  /* On Safari, this restores the spelling suggestion menu. */
  /* Drupal fix. */
  -webkit-appearance: searchfield-decoration;
}
.foldershare-searchbox input[type="search"]::-webkit-search-cancel-button {
  /*
   * On Safari and Chrome, this restores the (x) cancel button after
   * has been entered.
   */
  /* Drupal fix. */
  -webkit-appearance: searchfield-cancel-button;
}

@media screen and (max-width: 640px) {
  /*
   * Increase the search box height on narrow screens.
   */
  .foldershare-searchbox input[type="search"] {
    line-height: 2em;
    /* Disable native searchbox styling so that a taller line height works. */
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
  }
}

/*-----------------------------------------------------------------------
 *
 * Dialogs.
 *
 * FolderShare presents several dialogs.
 *
 *-----------------------------------------------------------------------*/
.foldershare-ui-dialog {
  padding: 0;
}
/*
 * Some themes (e.g. Bootstrap) rely upon a generic jQuery.UI "dialog.css"
 * file that doesn't set the dialog's background color. This leaves it
 * transparent, which needs to be fixed.
 */
.foldershare-ui-dialog {
  /* Bootstrap fix. */
  background: #fff;
}
/*
 * Some themes (e.g. Adminimal) extend core's Seven theme which sets the
 * background color of dialogs to be transparent. Fix it.
 */
.foldershare-ui-dialog.ui-dialog {
  /* Seven fix. */
  background: #fff;
}
.foldershare-ui-dialog .ui-dialog-content {
  /*
   * Give the dialog margins so content doesn't hug the dialog edge. Use
   * a right margin that matches the default right margin for the action
   * button panel at the bottom. This makes dialog body content edges
   * line up with button edges, unless a theme overrides things.
   */
  margin: 1em 1.4em 1em 1em;
  padding: 0;
  /*
   * Drupal core's "dialog.css" sets the dialog position to be relative.
   * Unfortunately, if the dialog has a pull-down menu (such as for
   * autocomplete), and that menu has an absolute position, the menu is
   * cropped by the content <div> instead of continuing out and above it.
   * We have to set the content position to static to make it work as
   * it should.
   */
  position: static;
  /*
   * jQuery.UI loads a default theme file that resets the dialog font and
   * size to a hardcoded sans-serif font that may or may not match the
   * body font. While a theme can (and should) fix this, most do not.
   * This leaves dialogs with a different font. This is a problem for
   * FolderShare because we are sometimes presenting complex content in
   * a dialog and it needs to be styled the same way as equivalent page
   * content. We'd like our dialogs to use the page font.
   *
   * For Webkit and Webkit-compatible browsers (e.g. Safari, Chrome, Edge),
   * using "-webkit-body" reverts to the body font.
   */
  font: inherit;
  font-family: -webkit-body;
}

/*
 * Some themes (e.g. W3CSS frameworks like d8w3css) use large paddings/margins
 * on forms. This adds a lot of wasted space around a dialog's form. Since
 * the theme uses !important to set these, we have to use !important to
 * override them.
 */
form.foldershare-dialog.w3-padding-large,
form.foldershare-dialog.w3-margin-top {
  /* d8w3css fix. */
  margin: 0 !important;
  padding: 0 !important;
}

/*-----------------------------------------------------------------------
 *
 * Command forms (a.k.a. dialogs).
 *
 * Several menu commands display forms to confirm an action or prompt for
 * additional information. These are either presented on a stand-alone
 * page or in a dialog, but always managed as a "command form wrapper".
 *
 * As a dialog, the wrapper always includes a dialog window title bar with
 * an (x) button at the right to close the dialog (some themes hide the (x)).
 * At the bottom, one or more buttons provide actions to take (e.g. "Save",
 * "Change", "Delete", "Cancel").
 *
 * Some dialogs include an intro paragraph at the top that explains the dialog.
 *
 * All dialogs include one or more form elements. Some elements may include
 * a description below them.
 *
 * Because the same command forms, and command form wrapper, are used for
 * stand-alone pages (legacy mode) and dialogs, any styling that is
 * dialog-specific uses the dialog class first.
 *
 *-----------------------------------------------------------------------*/
#foldershare_command_form_wrapper form {
  margin: 0;
  padding: 0;
}

/*
 * Some themes like to add a border around forms. On a page, this might make
 * sense. But within a dialog it adds visual clutter. The dialog's outline
 * already provides equivalent visual grouping of form elements.
 */
.foldershare-ui-dialog form {
  border: none;
  box-shadow: none;
}

/*
 * The intro text (if any) needs a margin below it and before the form's
 * fields. Some of this module's dialog usage removes this margin if there
 * are no form fields below (e.g. for confirmation dialogs).
 *
 * The primary (1st paragraph) and secondary (2nd paragraph) descriptions
 * intentionally hug each other. The first is made bold by some dialogs.
 */
.foldershare-intro-description {
  margin-bottom: 1em;
}
.foldershare-primary-description,
.foldershare-secondary-description {
  margin-top: 0;
  margin-bottom: 0;
}

form.drupal-foldershare-form-commandformwrapper .edit-description,
form.drupal-foldershare-form-commandformwrapper .description {
  /* Descriptions that follow a field are italic by default. */
  font-style: italic;
}

/*
 * The form actions (button panel) is normally hidden as Drupal/jQuery.UI
 * moves the buttons to a special section at the bottom of the panel.
 * Insure there is no lingering styling left by themes that forgot this.
 */
.foldershare-ui-dialog .form-actions {
  border: none;
  box-shadow: none;
  background: none;
}

/*
 * Some themes (e.g. W3CSS frameworks like d8w3css) add large padding/margins
 * to form inputs, like buttons. Drupal's dialog code copies these buttons
 * to a special section at the bottom of a dialog, then sets the previous
 * buttons to have a zero size and zero padding because they are intended to
 * be hidden. Unfortunately, Drupal's defaults do not set the margins for
 * these hidden buttons to be zero. When W3CSS sets these to have big margins,
 * this affects the layout even though the buttons are supposed to be
 * hidden. Suppress this. But since the theme uses !important to set them,
 * we have to use !important to suppress them.
 */
.foldershare-ui-dialog .form-actions input {
  /* d8w3css fix. */
  margin: 0 !important;
  border: none !important;
}

/*-----------------------------------------------------------------------
 *
 * Change owner and rename forms.
 *
 * These forms have a similar structure containing:
 * - Optional intro text.
 * - A text field with a label.
 *
 * The change owner form also may have:
 * - A checkbox to change all descendants if the item is a folder.
 *
 *-----------------------------------------------------------------------*/
.foldershare-change-owner .form-item,
.foldershare-rename .form-item {
  margin: 0;
}
/*
 * Some themes (e.g. W3CSS frameworks like d8w3css) set large padding and
 * margins on forms and form elements. These are not needed here. Since the
 * theme uses !important to set them, we have to use !important to
 * suppress them.
 */
.foldershare-rename.w3-padding-large,
.foldershare-rename.w3-margin-top,
.foldershare-change-owner.w3-padding-large,
.foldershare-change-owner.w3-margin-top {
  /* d8w3css fix. */
  margin: 0 !important;
  padding: 0 !important;
}
.foldershare-rename .form-item.w3-section,
.foldershare-change-owner .form-item.w3-section {
  /* d8w3css fix. */
  margin: 0 !important;
}

/**
 * Bootstrap themes wrap some <input> text fields that auto-complete with
 * a form group, then adds a throbber after the input. Suppress the
 * margin and below we'll suppress the throbber too.
 */
.foldershare-change-owner .form-item.form-group,
.foldershare-rename .form-item.form-group {
  /* Bootstrap fix. */
  margin: 0;
}

.foldershare-change-owner .form-item-foldershare-new-owner label,
.foldershare-rename .form-item-foldershare-replacement label {
  /*
   * Make the text field's label a block, forcing it to be above the field.
   * This allows for a longer, more descriptive label that still works on
   * narrow displays.
   */
  display: block;
}
.foldershare-change-owner input[type="text"],
.foldershare-rename input[type="text"] {
  /*
   * Let the text field take up all available width to allow for longer
   * text entry.
   */
  width: 100%;
}

/*
 * Some themes use large text field padding and/or hard-coded tall
 * text field heights. This can add uniformity to a large form, but it
 * wastes a lot of space in a dialog. Suppress this.
 */
.foldershare-ui-dialog .foldershare-change-owner input[type="text"],
.foldershare-ui-dialog .foldershare-rename input[type="text"] {
  padding: 4px;
  height: auto;
}

.foldershare-change-owner .form-item-foldershare-change-descendants {
  margin: 0.5em 0 0 0;
}
.foldershare-change-owner .form-item-foldershare-change-descendants input,
.foldershare-change-owner .form-item-foldershare-change-descendants label {
  margin: 0;
}
/*
 * Some themes force all labels to be blocks, which pushes them onto a
 * row by themselves. This works OK for labels beside text fields, but
 * for checkboxes and radio buttons the label immediately *follows* the
 * widget and is expected to be on the same line. Forcing it to be
 * a block pushes it onto the next line, after the checkbox or radio
 * button. This is non-standard formatting for these widgets. Fix it.
 */
.foldershare-change-owner .form-item-foldershare-change-descendants label {
  display: inline;
}

/*
 * Bootstrap-based themes change auto-complete text fields to add a large
 * progress throbber to the right. This is redundant and it confuses
 * form layouts. Adding this throbber also adds a <div> input group
 * that adds more margins, etc. Suppress the throbber and all styling of
 * the input group.
 */
.foldershare-change-owner .form-item-foldershare-new-owner .input-group {
  /* Bootstrap fix. */
  position: inherit;
  float: inherit;
  display: inline-block;
  border-collapse: collapse;
  border: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
.foldershare-change-owner .form-item-foldershare-new-owner .input-group-addon {
  /* Bootstrap fix. */
  display: none;
}

/*-----------------------------------------------------------------------
 *
 * Delete and Release share forms.
 *
 * These forms are very similar. They only include an intro message.
 *
 *-----------------------------------------------------------------------*/
.foldershare-delete .foldershare-intro-description,
.foldershare-release-share .foldershare-intro-description {
  margin-bottom: 0;
}

/*-----------------------------------------------------------------------
 *
 * Copy and move forms.
 *
 * These are basically the same form, differing only in the dialog title,
 * intro text, and action button (e.g. "Move" or "Copy"). Style them the
 * same.
 *
 * These dialogs show a Views table of files and folders. A toolbar is
 * included above the list (without a command menu button or search box),
 * and a footer below. This keeps the list style similar to that for
 * an entity page.
 *
 *-----------------------------------------------------------------------*/
.foldersharecommand_move .foldershare-intro-description,
.foldersharecommand_move_on_root_list .foldershare-itnro-description,
.foldersharecommand_move_as_admin .foldershare-itnro-description {
  margin-bottom: 1em;
}
.foldershare-folder-selection-title {
  display: block;
  margin: 0;
}
.foldershare-folder-selection {
  margin: 0;
}

/*
 * Some themes (e.g. Bootstrap) alter the style of "file" links. They
 * reduce the font size to 75%, add an extra top/bottom margin, and change
 * the display type to "table". This makes file items look odd in lists.
 */
.foldershare-folder-selection-table .file {
  /* Bootstrap fix. */
  display: inline-block;
  font-size: 1em;
  margin: 0;
}

/*-----------------------------------------------------------------------
 *
 * Share form.
 *
 * The share form presents a table of users with access to a shared
 * file or folder. Radio buttons grant or remove view and author grants.
 *
 * Below the table, a text field and button add an auto-completed user
 * to the table.
 *
 * Let the table be styled by the current theme as "content", with whatever
 * header styling the theme wants.
 *
 *-----------------------------------------------------------------------*/
.foldershare-dialog.foldersharecommand_share {
  overflow: auto;
  /* Set a maximum dialog height. Without this, a large share form can
   * create a very tall dialog that requires scrolling the page. But
   * setting this to a maximum instead makes the dialog a reasonable
   * size and makes the content inside it scroll, which is much better.
   */
  max-height: 500px !important;
}
.foldershare-ui-dialog .foldershare-share .foldershare-primary-description {
  font-weight: normal;
}

/*
 * Let the theme style the table, but impose a little bit of styling
 * to keep the row height tight.
 */
table.foldershare_share_table {
  /*
   * Some themes set the table font family and size to be different from
   * the page body. This may highlight table content, but it looks odd here.
   * Try to revert it to the dialog body font.
   */
  margin-top: 1em;
  margin-bottom: 0;
  border: 1px solid var(--foldershare-folder-list-border-color, var(--foldershare-folder-list-border-color-default, #eee));
  font: inherit;
  font-family: inherit;
  font-size: 1em;
  table-layout: auto;
}
.foldershare_share_table tr th,
.foldershare_share_table tr.odd td,
.foldershare_share_table tr.even td {
  vertical-align: middle;
  height: var(--foldershare-folder-list-line-height,var(--foldershare-folder-list-line-height-default,1.75em));
  min-height: var(--foldershare-folder-list-line-height,var(--foldershare-folder-list-line-height-default,1.75em));
  padding-top: 0;
  padding-bottom: 0;
  padding-left: var(--foldershare-folder-list-margins,var(--foldershare-folder-list-margins-default,2px));
  padding-right: var(--foldershare-folder-list-margins,var(--foldershare-folder-list-margins-default,2px));
}

/*
 * Bootstrap-based themes wrap every form element in a <div>.  Unfortunately,
 * when creating horizontal rows of radio buttons, like in this form, each of
 * those <div>s become blocks and the radio buttons end up lined up
 * vertically, not horizontally. Fix this.
 */
.foldershare_share_table td div.form-item,
.foldershare_share_table td div.radio {
  /* Bootstrap fix. */
  display: inline-block;
  position: static;
  margin-top: 0.4em;
  margin-bottom: 0.4em;
  min-width: 3em;
  text-align: center;
}
.foldershare_share_table tr.foldershare_share_table_row td div.form-item label,
.foldershare_share_table tr.foldershare_share_table_row td div.radio label {
  display: inline;
}
.foldershare_share_table tr.foldershare_share_table_row td div.form-item input,
.foldershare_share_table tr.foldershare_share_table_row td div.radio input {
  position: static;
  margin-right: 1em;
}

/* User column */
.foldershare_share_table thead tr th:nth-child(1),
.foldershare_share_table tbody tr td:nth-child(1) {
  width: 100%;
  padding: 0 0.5em 0 0.5em;
}
/* Access column */
.foldershare_share_table thead tr th:nth-child(2),
.foldershare_share_table tbody tr td:nth-child(2) {
  white-space: nowrap;
  padding: 0 0.5em 0 0.5em;
}
.foldershare_share_table tr > th span,
.foldershare_share_table .foldershare_share_table_row .form-radios .form-item {
  display: inline-block;
  min-width: 3em;
}

/*
 * Some themes (e.g. Bootstrap) replace the .form-radios wrapper and add a
 * <div> and even a <label> around each radio button. This adds a lot of
 * extra padding/margins. Reduce this.
 */
.foldershare_share_table tbody > tr > td:nth-child(2) .radio {
  display: inline-block;
  min-width: 3em;
}
.foldershare_share_table tbody > tr > td:nth-child(2) .radio label {
  /* Bootstrap fix. */
  min-height: inherit;
  padding: 0;
  margin: 0;
}
.foldershare_share_table tbody > tr > td:nth-child(2) .radio input[type="radio"] {
  /* Bootstrap fix. */
  margin-left: 0;
}

p.foldershare_share_table_description.description {
  margin-top: 0;
  margin-bottom: 1.5em;
}

/*
 * Add user subform.
 *
 * The form contains:
 * - A text field with a label.
 * - An "Add" button that we want to the right, beside the field.
 * - Error messages.
 */
.foldershare_share_form .foldershare_share_add_sharer_form {
  margin-top: 1em;
  margin-bottom: 0;
}
.foldershare_share_form .foldershare_share_add_sharer_and_button {
  /*
   * The flex box parent here has two children:
   * - The text field with its label above.
   * - The "Add" button.
   */
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-end;
}
.foldershare_share_form .foldershare_share_add_sharer_and_button label {
  /*
   * Make the text field's label a block, forcing it to be above the field.
   * This allows for a longer, more descriptive label that still works on
   * narrow displays.
   */
  display: block;
  margin: 0;
  padding: 0;
}
.foldershare_share_form .foldershare_share_add_sharer_and_button > *:nth-child(1) {
  display: inline-block;
  margin: 0;
  /* Text field for a user name grows to take up the full width. */
  order: 1;
  flex-grow: 1;
  flex-shrink: 1;
  align-self: flex-end;
}
.foldershare_share_form .form-item-foldershare-share-add-sharer input[type="text"] {
  display: inline-block;
  width: 100%;
  /*
   * Some themes use large text field padding/margins. This may work for large
   * page forms, but it wastes a lot of space in a dialog. It also confuses
   * the layout's efforts to put the "Add" button to the right of the text
   * field. Reduce the padding/margins.
   */
  padding: 4px 4px 4px 4px;
  margin: 0;
  /*
   * Some themes use hard-coded field heights. This is not appropriate in
   * a dialog.
   */
  height: auto;
}
.foldershare_share_form .foldershare_share_add_sharer_and_button > *:nth-child(2) {
  /* Add button. */
  display: inline-block;
  margin-left: 1em;
  margin-right: 0;
  min-width: 5em;
  order: 2;
  flex-grow: 0;
  flex-shrink: 0;
  align-self: flex-end;
  /*
   * Some themes (e.g. Bootstrap) set a vertical alignment on buttons by
   * default. This can confuse flex layouts.
   */
  /* Bootstrap fix. */
  vertical-align: inherit;
  /*
   * Some themes make the submit button huge on a form. Perhaps this style
   * makes sense on a large confusing form, but in a dialog this is odd.
   * Reduce the button's padding to something reasonable.
   */
  padding: 4px;
}
.foldershare_share_form .foldershare_share_add_sharer_and_button button,
.foldershare_share_form .foldershare_share_add_sharer_and_button input[type="submit"] {
  display: inline-block;
}
.foldershare_share_form .foldershare_share_add_sharer_and_button input[type="submit"]:disabled {
  color: graytext;
}
/*
 * Some themes (e.g. W3CSS frameworks like d8w3css) assume that all <div>s
 * mark new form sections and that they deserve huge margins. This wastes
 * a lot of space in a dialog.
 *
 * These same themes default to giving all buttons large margins. This messes
 * up dialog layouts.
 *
 * Since these themes use !important to set their values, we have to use
 * !important to override them.
 */
.foldershare_share_form .foldershare_share_add_sharer_and_button .form-item-foldershare-share-add-sharer.w3-section {
  /* d8w3css fix. */
  margin: 0 !important;
}
.foldershare_share_form .foldershare_share_add_sharer_and_button button.w3-margin-top,
.foldershare_share_form .foldershare_share_add_sharer_and_button button.w3-margin-bottom,
.foldershare_share_form .foldershare_share_add_sharer_and_button input[type="submit"].w3-margin-top,
.foldershare_share_form .foldershare_share_add_sharer_and_button input[type="submit"].w3-margin-bottom {
  /* d8w3css fix. */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/*
 * Bootstrap-based themes change auto-complete text fields to add a large
 * progress throbber to the right. This is redundant and wastes dialog space.
 */
.foldershare_share_form .form-item-foldershare-share-add-sharer .input-group {
  /* Bootstrap fix. */
  position: inherit;
  float: inherit;
  border-collapse: collapse;
  width: 100%;
}
.foldershare_share_form .form-item-foldershare-share-add-sharer .input-group-addon {
  /* Bootstrap fix. */
  display: none;
}
.foldershare_share_form .form-item-foldershare-share-add-sharer.form-group label {
  /* Bootstrap fix. */
  padding-top: 4px;
  margin-bottom: 0;
}

/**
 * Some themes (e.g. Bootstrap) use big margins under form elements. This
 * is not necessary in tightly controlled dialog forms. Suppress it so that
 * the field description hugs the bottom of the input field.
 */
.foldershare_share_form .foldershare_share_add_sharer_and_button.form-group {
  /* Bootstrap fix. */
  margin-bottom: 0;
}

/*-----------------------------------------------------------------------
 *
 * File and folder entity page.
 *
 * The entity page primarily shows a list of children files and folders.
 * The page may be configured to include entity fields, such the sharing
 * status, size, dates, descirption, etc.
 *
 * For files, there are no children and thus the folder browser
 * is not shown. Links may be shown to downloadable files, etc.
 *
 *-----------------------------------------------------------------------*/
.foldershare-sharing-status {
  /*
   * The sharing status pseudo-field is intended to work as a subtitle
   * when placed at the top of the page's content.
   */
  font-style: italic;
}

.foldershare-folder-path,
.foldershare-folder-path .form-item {
  /*
   * The path pseudo-field is intended to be breadcrumb like and is often
   * placed directly above the folder browser.
   */
  margin: 0;
}

/*
 * File download links on FolderShare entity view pages can use any field
 * formatter the site chooses. The default is "Generic file", which uses
 * the "file_link" theme. This shows a file link as:
 *   <span class="file...">
 *     <a...>
 *   </span>
 *
 * Some themes (e.g. Bootstrap) alter the "file_link" template to add
 * more structure, and then style it specially.  The link becomes:
 *   <span class="file...">
 *     <span class="file-icon">
 *       <span clas="glyphicon...">
 *       </span>
 *     </span>
 *     <span class="file-link">
 *       <a...>
 *     </span>
 *     <span class="file-size">
 *       SIZE
 *     </span>
 *   </span>
 *
 * This is styled so that the file reference link becomes a one-row table
 * with three cells:
 * - A glyphicon font file type icon.
 * - The file link.
 * - The file's size.
 *
 * If a site wants to use Bootstrap, this is what they get and, presumably,
 * they want it. But this approach ends up showing TWO file icons: one from
 * Bootstrap's glyphicon, and one from FolderShare using the "file" class.
 * One of these icons has to go. To retain consistency with FolderShare's
 * other folder browser items, it is the Bootstrap icon that has to go.
 *
 * The file size can be useful, but the table layout used by Bootstrap
 * throws it far to the right, which looks odd when only a single file is
 * listed on a FolderShare entity page.
 *
 * In addition to all this, Bootstrap reduces the font size to 75% and adds
 * an extra top/bottom margin.
 *
 * To fix all this, remove the redundant Bootstrap icon, revert back to an
 * inline layout instead of a one-row table, get rid of the table border,
 * and restore the font size and margins to normal.
 */
.foldershare-view .file {
  /* Bootstrap fix. */
  display: inline-block;
  font-size: 1em;
  margin: 0;
}
.foldershare-view .file .file-icon {
  /* Bootstrap fix. */
  display: none;
}
.foldershare-view .file .file-link {
  /* Bootstrap fix. */
  display: inline;
  border: none;
}
.foldershare-view .file .file-size {
  /* Bootstrap fix. */
  display: inline;
  border: none;
}