//vendor imports first
/* import bootstrap SASS first, since some variables are reused in _component-variables.scss */
/* Override your bootstrap variables here */

$font-family-sans-serif: "Open Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,sans-serif;

$border-radius-base: 2px;
$border-radius-large: 2px;
$border-radius-small: 2px;

/* This is needed for the glyphicons to work */

$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/" !default;

/* This is for enhancing the refresh glyph with animation */

.glyphicon-refresh-animate {
    -animation: spin .7s infinite linear;
    -ms-animation: spin .7s infinite linear;
    -webkit-animation: spinw .7s infinite linear;
    -moz-animation: spinm .7s infinite linear;
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg);}
    to { transform: scale(1) rotate(360deg);}
}

@-webkit-keyframes spinw {
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg);}
}

@-moz-keyframes spinm {
    from { -moz-transform: rotate(0deg);}
    to { -moz-transform: rotate(360deg);}
}

/* custom class to modify cursor on hover event */
.custom-pointer {
    cursor: pointer;
}

.input-group-addon {
    &.btn-effect:hover {
        background-color: #ddd;
        cursor: pointer;
    }
}

/*!
 * Bootstrap v3.4.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

// Core variables and mixins
$bootstrap-sass-asset-helper: false !default;
//
// Variables
// --------------------------------------------------


//== Colors
//
//## Gray and brand colors for use across Bootstrap.

$gray-base:              #000 !default;
$gray-darker:            lighten($gray-base, 13.5%) !default; // #222
$gray-dark:              lighten($gray-base, 20%) !default;   // #333
$gray:                   lighten($gray-base, 33.5%) !default; // #555
$gray-light:             lighten($gray-base, 46.7%) !default; // #777
$gray-lighter:           lighten($gray-base, 93.5%) !default; // #eee

$brand-primary:         darken(#428bca, 6.5%) !default; // #337ab7
$brand-success:         #5cb85c !default;
$brand-info:            #5bc0de !default;
$brand-warning:         #f0ad4e !default;
$brand-danger:          #d9534f !default;


//== Scaffolding
//
//## Settings for some of the most global styles.

//** Background color for `<body>`.
$body-bg:               #fff !default;
//** Global text color on `<body>`.
$text-color:            $gray-dark !default;

//** Global textual link color.
$link-color:            $brand-primary !default;
//** Link hover color set via `darken()` function.
$link-hover-color:      darken($link-color, 15%) !default;
//** Link hover decoration.
$link-hover-decoration: underline !default;


//== Typography
//
//## Font, line-height, and color for body text, headings, and more.

$font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$font-family-serif:       Georgia, "Times New Roman", Times, serif !default;
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
$font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace !default;
$font-family-base:        $font-family-sans-serif !default;

$font-size-base:          14px !default;
$font-size-large:         ceil(($font-size-base * 1.25)) !default; // ~18px
$font-size-small:         ceil(($font-size-base * .85)) !default; // ~12px

$font-size-h1:            floor(($font-size-base * 2.6)) !default; // ~36px
$font-size-h2:            floor(($font-size-base * 2.15)) !default; // ~30px
$font-size-h3:            ceil(($font-size-base * 1.7)) !default; // ~24px
$font-size-h4:            ceil(($font-size-base * 1.25)) !default; // ~18px
$font-size-h5:            $font-size-base !default;
$font-size-h6:            ceil(($font-size-base * .85)) !default; // ~12px

//** Unit-less `line-height` for use in components like buttons.
$line-height-base:        1.428571429 !default; // 20/14
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
$line-height-computed:    floor(($font-size-base * $line-height-base)) !default; // ~20px

//** By default, this inherits from the `<body>`.
$headings-font-family:    inherit !default;
$headings-font-weight:    500 !default;
$headings-line-height:    1.1 !default;
$headings-color:          inherit !default;


//== Iconography
//
//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.

//** Load fonts from this directory.

// [converter] If $bootstrap-sass-asset-helper if used, provide path relative to the assets load path.
// [converter] This is because some asset helpers, such as Sprockets, do not work with file-relative paths.
$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;

//** File name for all font files.
$icon-font-name:          "glyphicons-halflings-regular" !default;
//** Element ID within SVG icon file.
$icon-font-svg-id:        "glyphicons_halflingsregular" !default;


//== Components
//
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).

$padding-base-vertical:     6px !default;
$padding-base-horizontal:   12px !default;

$padding-large-vertical:    10px !default;
$padding-large-horizontal:  16px !default;

$padding-small-vertical:    5px !default;
$padding-small-horizontal:  10px !default;

$padding-xs-vertical:       1px !default;
$padding-xs-horizontal:     5px !default;

$line-height-large:         1.3333333 !default; // extra decimals for Win 8.1 Chrome
$line-height-small:         1.5 !default;

$border-radius-base:        4px !default;
$border-radius-large:       6px !default;
$border-radius-small:       3px !default;

//** Global color for active items (e.g., navs or dropdowns).
$component-active-color:    #fff !default;
//** Global background color for active items (e.g., navs or dropdowns).
$component-active-bg:       $brand-primary !default;

//** Width of the `border` for generating carets that indicate dropdowns.
$caret-width-base:          4px !default;
//** Carets increase slightly in size for larger components.
$caret-width-large:         5px !default;


//== Tables
//
//## Customizes the `.table` component with basic values, each used across all table variations.

//** Padding for `<th>`s and `<td>`s.
$table-cell-padding:            8px !default;
//** Padding for cells in `.table-condensed`.
$table-condensed-cell-padding:  5px !default;

//** Default background color used for all tables.
$table-bg:                      transparent !default;
//** Background color used for `.table-striped`.
$table-bg-accent:               #f9f9f9 !default;
//** Background color used for `.table-hover`.
$table-bg-hover:                #f5f5f5 !default;
$table-bg-active:               $table-bg-hover !default;

//** Border color for table and cell borders.
$table-border-color:            #ddd !default;


//== Buttons
//
//## For each of Bootstrap's buttons, define text, background and border color.

$btn-font-weight:                normal !default;

$btn-default-color:              #333 !default;
$btn-default-bg:                 #fff !default;
$btn-default-border:             #ccc !default;

$btn-primary-color:              #fff !default;
$btn-primary-bg:                 $brand-primary !default;
$btn-primary-border:             darken($btn-primary-bg, 5%) !default;

$btn-success-color:              #fff !default;
$btn-success-bg:                 $brand-success !default;
$btn-success-border:             darken($btn-success-bg, 5%) !default;

$btn-info-color:                 #fff !default;
$btn-info-bg:                    $brand-info !default;
$btn-info-border:                darken($btn-info-bg, 5%) !default;

$btn-warning-color:              #fff !default;
$btn-warning-bg:                 $brand-warning !default;
$btn-warning-border:             darken($btn-warning-bg, 5%) !default;

$btn-danger-color:               #fff !default;
$btn-danger-bg:                  $brand-danger !default;
$btn-danger-border:              darken($btn-danger-bg, 5%) !default;

$btn-link-disabled-color:        $gray-light !default;

// Allows for customizing button radius independently from global border radius
$btn-border-radius-base:         $border-radius-base !default;
$btn-border-radius-large:        $border-radius-large !default;
$btn-border-radius-small:        $border-radius-small !default;


//== Forms
//
//##

//** `<input>` background color
$input-bg:                       #fff !default;
//** `<input disabled>` background color
$input-bg-disabled:              $gray-lighter !default;

//** Text color for `<input>`s
$input-color:                    $gray !default;
//** `<input>` border color
$input-border:                   #ccc !default;

// TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4
//** Default `.form-control` border radius
// This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS.
$input-border-radius:            $border-radius-base !default;
//** Large `.form-control` border radius
$input-border-radius-large:      $border-radius-large !default;
//** Small `.form-control` border radius
$input-border-radius-small:      $border-radius-small !default;

//** Border color for inputs on focus
$input-border-focus:             #66afe9 !default;

//** Placeholder text color
$input-color-placeholder:        #999 !default;

//** Default `.form-control` height
$input-height-base:              ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
//** Large `.form-control` height
$input-height-large:             (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
//** Small `.form-control` height
$input-height-small:             (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;

//** `.form-group` margin
$form-group-margin-bottom:       15px !default;

$legend-color:                   $gray-dark !default;
$legend-border-color:            #e5e5e5 !default;

//** Background color for textual input addons
$input-group-addon-bg:           $gray-lighter !default;
//** Border color for textual input addons
$input-group-addon-border-color: $input-border !default;

//** Disabled cursor for form controls and buttons.
$cursor-disabled:                not-allowed !default;


//== Dropdowns
//
//## Dropdown menu container and contents.

//** Background for the dropdown menu.
$dropdown-bg:                    #fff !default;
//** Dropdown menu `border-color`.
$dropdown-border:                rgba(0, 0, 0, .15) !default;
//** Dropdown menu `border-color` **for IE8**.
$dropdown-fallback-border:       #ccc !default;
//** Divider color for between dropdown items.
$dropdown-divider-bg:            #e5e5e5 !default;

//** Dropdown link text color.
$dropdown-link-color:            $gray-dark !default;
//** Hover color for dropdown links.
$dropdown-link-hover-color:      darken($gray-dark, 5%) !default;
//** Hover background for dropdown links.
$dropdown-link-hover-bg:         #f5f5f5 !default;

//** Active dropdown menu item text color.
$dropdown-link-active-color:     $component-active-color !default;
//** Active dropdown menu item background color.
$dropdown-link-active-bg:        $component-active-bg !default;

//** Disabled dropdown menu item background color.
$dropdown-link-disabled-color:   $gray-light !default;

//** Text color for headers within dropdown menus.
$dropdown-header-color:          $gray-light !default;

//** Deprecated `$dropdown-caret-color` as of v3.1.0
$dropdown-caret-color:           #000 !default;


//-- Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.
//
// Note: These variables are not generated into the Customizer.

$zindex-navbar:            1000 !default;
$zindex-dropdown:          1000 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;
$zindex-navbar-fixed:      1030 !default;
$zindex-modal-background:  1040 !default;
$zindex-modal:             1050 !default;


//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

// Extra small screen / phone
//** Deprecated `$screen-xs` as of v3.0.1
$screen-xs:                  480px !default;
//** Deprecated `$screen-xs-min` as of v3.2.0
$screen-xs-min:              $screen-xs !default;
//** Deprecated `$screen-phone` as of v3.0.1
$screen-phone:               $screen-xs-min !default;

// Small screen / tablet
//** Deprecated `$screen-sm` as of v3.0.1
$screen-sm:                  768px !default;
$screen-sm-min:              $screen-sm !default;
//** Deprecated `$screen-tablet` as of v3.0.1
$screen-tablet:              $screen-sm-min !default;

// Medium screen / desktop
//** Deprecated `$screen-md` as of v3.0.1
$screen-md:                  992px !default;
$screen-md-min:              $screen-md !default;
//** Deprecated `$screen-desktop` as of v3.0.1
$screen-desktop:             $screen-md-min !default;

// Large screen / wide desktop
//** Deprecated `$screen-lg` as of v3.0.1
$screen-lg:                  1200px !default;
$screen-lg-min:              $screen-lg !default;
//** Deprecated `$screen-lg-desktop` as of v3.0.1
$screen-lg-desktop:          $screen-lg-min !default;

// So media queries don't overlap when required, provide a maximum
$screen-xs-max:              ($screen-sm-min - 1) !default;
$screen-sm-max:              ($screen-md-min - 1) !default;
$screen-md-max:              ($screen-lg-min - 1) !default;


//== Grid system
//
//## Define your custom responsive grid.

//** Number of columns in the grid.
$grid-columns:              12 !default;
//** Padding between columns. Gets divided in half for the left and right.
$grid-gutter-width:         30px !default;
// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
$grid-float-breakpoint:     $screen-sm-min !default;
//** Point at which the navbar begins collapsing.
$grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;


//== Container sizes
//
//## Define the maximum width of `.container` for different screen sizes.

// Small screen / tablet
$container-tablet:             (720px + $grid-gutter-width) !default;
//** For `$screen-sm-min` and up.
$container-sm:                 $container-tablet !default;

// Medium screen / desktop
$container-desktop:            (940px + $grid-gutter-width) !default;
//** For `$screen-md-min` and up.
$container-md:                 $container-desktop !default;

// Large screen / wide desktop
$container-large-desktop:      (1140px + $grid-gutter-width) !default;
//** For `$screen-lg-min` and up.
$container-lg:                 $container-large-desktop !default;


//== Navbar
//
//##

// Basics of a navbar
$navbar-height:                    50px !default;
$navbar-margin-bottom:             $line-height-computed !default;
$navbar-border-radius:             $border-radius-base !default;
$navbar-padding-horizontal:        floor(($grid-gutter-width / 2)) !default;
$navbar-padding-vertical:          (($navbar-height - $line-height-computed) / 2) !default;
$navbar-collapse-max-height:       340px !default;

$navbar-default-color:             #777 !default;
$navbar-default-bg:                #f8f8f8 !default;
$navbar-default-border:            darken($navbar-default-bg, 6.5%) !default;

// Navbar links
$navbar-default-link-color:                #777 !default;
$navbar-default-link-hover-color:          #333 !default;
$navbar-default-link-hover-bg:             transparent !default;
$navbar-default-link-active-color:         #555 !default;
$navbar-default-link-active-bg:            darken($navbar-default-bg, 6.5%) !default;
$navbar-default-link-disabled-color:       #ccc !default;
$navbar-default-link-disabled-bg:          transparent !default;

// Navbar brand label
$navbar-default-brand-color:               $navbar-default-link-color !default;
$navbar-default-brand-hover-color:         darken($navbar-default-brand-color, 10%) !default;
$navbar-default-brand-hover-bg:            transparent !default;

// Navbar toggle
$navbar-default-toggle-hover-bg:           #ddd !default;
$navbar-default-toggle-icon-bar-bg:        #888 !default;
$navbar-default-toggle-border-color:       #ddd !default;


//=== Inverted navbar
// Reset inverted navbar basics
$navbar-inverse-color:                      lighten($gray-light, 15%) !default;
$navbar-inverse-bg:                         #222 !default;
$navbar-inverse-border:                     darken($navbar-inverse-bg, 10%) !default;

// Inverted navbar links
$navbar-inverse-link-color:                 lighten($gray-light, 15%) !default;
$navbar-inverse-link-hover-color:           #fff !default;
$navbar-inverse-link-hover-bg:              transparent !default;
$navbar-inverse-link-active-color:          $navbar-inverse-link-hover-color !default;
$navbar-inverse-link-active-bg:             darken($navbar-inverse-bg, 10%) !default;
$navbar-inverse-link-disabled-color:        #444 !default;
$navbar-inverse-link-disabled-bg:           transparent !default;

// Inverted navbar brand label
$navbar-inverse-brand-color:                $navbar-inverse-link-color !default;
$navbar-inverse-brand-hover-color:          #fff !default;
$navbar-inverse-brand-hover-bg:             transparent !default;

// Inverted navbar toggle
$navbar-inverse-toggle-hover-bg:            #333 !default;
$navbar-inverse-toggle-icon-bar-bg:         #fff !default;
$navbar-inverse-toggle-border-color:        #333 !default;


//== Navs
//
//##

//=== Shared nav styles
$nav-link-padding:                          10px 15px !default;
$nav-link-hover-bg:                         $gray-lighter !default;

$nav-disabled-link-color:                   $gray-light !default;
$nav-disabled-link-hover-color:             $gray-light !default;

//== Tabs
$nav-tabs-border-color:                     #ddd !default;

$nav-tabs-link-hover-border-color:          $gray-lighter !default;

$nav-tabs-active-link-hover-bg:             $body-bg !default;
$nav-tabs-active-link-hover-color:          $gray !default;
$nav-tabs-active-link-hover-border-color:   #ddd !default;

$nav-tabs-justified-link-border-color:            #ddd !default;
$nav-tabs-justified-active-link-border-color:     $body-bg !default;

//== Pills
$nav-pills-border-radius:                   $border-radius-base !default;
$nav-pills-active-link-hover-bg:            $component-active-bg !default;
$nav-pills-active-link-hover-color:         $component-active-color !default;


//== Pagination
//
//##

$pagination-color:                     $link-color !default;
$pagination-bg:                        #fff !default;
$pagination-border:                    #ddd !default;

$pagination-hover-color:               $link-hover-color !default;
$pagination-hover-bg:                  $gray-lighter !default;
$pagination-hover-border:              #ddd !default;

$pagination-active-color:              #fff !default;
$pagination-active-bg:                 $brand-primary !default;
$pagination-active-border:             $brand-primary !default;

$pagination-disabled-color:            $gray-light !default;
$pagination-disabled-bg:               #fff !default;
$pagination-disabled-border:           #ddd !default;


//== Pager
//
//##

$pager-bg:                             $pagination-bg !default;
$pager-border:                         $pagination-border !default;
$pager-border-radius:                  15px !default;

$pager-hover-bg:                       $pagination-hover-bg !default;

$pager-active-bg:                      $pagination-active-bg !default;
$pager-active-color:                   $pagination-active-color !default;

$pager-disabled-color:                 $pagination-disabled-color !default;


//== Jumbotron
//
//##

$jumbotron-padding:              30px !default;
$jumbotron-color:                inherit !default;
$jumbotron-bg:                   $gray-lighter !default;
$jumbotron-heading-color:        inherit !default;
$jumbotron-font-size:            ceil(($font-size-base * 1.5)) !default;
$jumbotron-heading-font-size:    ceil(($font-size-base * 4.5)) !default;


//== Form states and alerts
//
//## Define colors for form feedback states and, by default, alerts.

$state-success-text:             #3c763d !default;
$state-success-bg:               #dff0d8 !default;
$state-success-border:           darken(adjust-hue($state-success-bg, -10), 5%) !default;

$state-info-text:                #31708f !default;
$state-info-bg:                  #d9edf7 !default;
$state-info-border:              darken(adjust-hue($state-info-bg, -10), 7%) !default;

$state-warning-text:             #8a6d3b !default;
$state-warning-bg:               #fcf8e3 !default;
$state-warning-border:           darken(adjust-hue($state-warning-bg, -10), 5%) !default;

$state-danger-text:              #a94442 !default;
$state-danger-bg:                #f2dede !default;
$state-danger-border:            darken(adjust-hue($state-danger-bg, -10), 5%) !default;


//== Tooltips
//
//##

//** Tooltip max width
$tooltip-max-width:           200px !default;
//** Tooltip text color
$tooltip-color:               #fff !default;
//** Tooltip background color
$tooltip-bg:                  #000 !default;
$tooltip-opacity:             .9 !default;

//** Tooltip arrow width
$tooltip-arrow-width:         5px !default;
//** Tooltip arrow color
$tooltip-arrow-color:         $tooltip-bg !default;


//== Popovers
//
//##

//** Popover body background color
$popover-bg:                          #fff !default;
//** Popover maximum width
$popover-max-width:                   276px !default;
//** Popover border color
$popover-border-color:                rgba(0, 0, 0, .2) !default;
//** Popover fallback border color
$popover-fallback-border-color:       #ccc !default;

//** Popover title background color
$popover-title-bg:                    darken($popover-bg, 3%) !default;

//** Popover arrow width
$popover-arrow-width:                 10px !default;
//** Popover arrow color
$popover-arrow-color:                 $popover-bg !default;

//** Popover outer arrow width
$popover-arrow-outer-width:           ($popover-arrow-width + 1) !default;
//** Popover outer arrow color
$popover-arrow-outer-color:           fade_in($popover-border-color, 0.05) !default;
//** Popover outer arrow fallback color
$popover-arrow-outer-fallback-color:  darken($popover-fallback-border-color, 20%) !default;


//== Labels
//
//##

//** Default label background color
$label-default-bg:            $gray-light !default;
//** Primary label background color
$label-primary-bg:            $brand-primary !default;
//** Success label background color
$label-success-bg:            $brand-success !default;
//** Info label background color
$label-info-bg:               $brand-info !default;
//** Warning label background color
$label-warning-bg:            $brand-warning !default;
//** Danger label background color
$label-danger-bg:             $brand-danger !default;

//** Default label text color
$label-color:                 #fff !default;
//** Default text color of a linked label
$label-link-hover-color:      #fff !default;


//== Modals
//
//##

//** Padding applied to the modal body
$modal-inner-padding:         15px !default;

//** Padding applied to the modal title
$modal-title-padding:         15px !default;
//** Modal title line-height
$modal-title-line-height:     $line-height-base !default;

//** Background color of modal content area
$modal-content-bg:                             #fff !default;
//** Modal content border color
$modal-content-border-color:                   rgba(0, 0, 0, .2) !default;
//** Modal content border color **for IE8**
$modal-content-fallback-border-color:          #999 !default;

//** Modal backdrop background color
$modal-backdrop-bg:           #000 !default;
//** Modal backdrop opacity
$modal-backdrop-opacity:      .5 !default;
//** Modal header border color
$modal-header-border-color:   #e5e5e5 !default;
//** Modal footer border color
$modal-footer-border-color:   $modal-header-border-color !default;

$modal-lg:                    900px !default;
$modal-md:                    600px !default;
$modal-sm:                    300px !default;


//== Alerts
//
//## Define alert colors, border radius, and padding.

$alert-padding:               15px !default;
$alert-border-radius:         $border-radius-base !default;
$alert-link-font-weight:      bold !default;

$alert-success-bg:            $state-success-bg !default;
$alert-success-text:          $state-success-text !default;
$alert-success-border:        $state-success-border !default;

$alert-info-bg:               $state-info-bg !default;
$alert-info-text:             $state-info-text !default;
$alert-info-border:           $state-info-border !default;

$alert-warning-bg:            $state-warning-bg !default;
$alert-warning-text:          $state-warning-text !default;
$alert-warning-border:        $state-warning-border !default;

$alert-danger-bg:             $state-danger-bg !default;
$alert-danger-text:           $state-danger-text !default;
$alert-danger-border:         $state-danger-border !default;


//== Progress bars
//
//##

//** Background color of the whole progress component
$progress-bg:                 #f5f5f5 !default;
//** Progress bar text color
$progress-bar-color:          #fff !default;
//** Variable for setting rounded corners on progress bar.
$progress-border-radius:      $border-radius-base !default;

//** Default progress bar color
$progress-bar-bg:             $brand-primary !default;
//** Success progress bar color
$progress-bar-success-bg:     $brand-success !default;
//** Warning progress bar color
$progress-bar-warning-bg:     $brand-warning !default;
//** Danger progress bar color
$progress-bar-danger-bg:      $brand-danger !default;
//** Info progress bar color
$progress-bar-info-bg:        $brand-info !default;


//== List group
//
//##

//** Background color on `.list-group-item`
$list-group-bg:                 #fff !default;
//** `.list-group-item` border color
$list-group-border:             #ddd !default;
//** List group border radius
$list-group-border-radius:      $border-radius-base !default;

//** Background color of single list items on hover
$list-group-hover-bg:           #f5f5f5 !default;
//** Text color of active list items
$list-group-active-color:       $component-active-color !default;
//** Background color of active list items
$list-group-active-bg:          $component-active-bg !default;
//** Border color of active list elements
$list-group-active-border:      $list-group-active-bg !default;
//** Text color for content within active list items
$list-group-active-text-color:  lighten($list-group-active-bg, 40%) !default;

//** Text color of disabled list items
$list-group-disabled-color:      $gray-light !default;
//** Background color of disabled list items
$list-group-disabled-bg:         $gray-lighter !default;
//** Text color for content within disabled list items
$list-group-disabled-text-color: $list-group-disabled-color !default;

$list-group-link-color:         #555 !default;
$list-group-link-hover-color:   $list-group-link-color !default;
$list-group-link-heading-color: #333 !default;


//== Panels
//
//##

$panel-bg:                    #fff !default;
$panel-body-padding:          15px !default;
$panel-heading-padding:       10px 15px !default;
$panel-footer-padding:        $panel-heading-padding !default;
$panel-border-radius:         $border-radius-base !default;

//** Border color for elements within panels
$panel-inner-border:          #ddd !default;
$panel-footer-bg:             #f5f5f5 !default;

$panel-default-text:          $gray-dark !default;
$panel-default-border:        #ddd !default;
$panel-default-heading-bg:    #f5f5f5 !default;

$panel-primary-text:          #fff !default;
$panel-primary-border:        $brand-primary !default;
$panel-primary-heading-bg:    $brand-primary !default;

$panel-success-text:          $state-success-text !default;
$panel-success-border:        $state-success-border !default;
$panel-success-heading-bg:    $state-success-bg !default;

$panel-info-text:             $state-info-text !default;
$panel-info-border:           $state-info-border !default;
$panel-info-heading-bg:       $state-info-bg !default;

$panel-warning-text:          $state-warning-text !default;
$panel-warning-border:        $state-warning-border !default;
$panel-warning-heading-bg:    $state-warning-bg !default;

$panel-danger-text:           $state-danger-text !default;
$panel-danger-border:         $state-danger-border !default;
$panel-danger-heading-bg:     $state-danger-bg !default;


//== Thumbnails
//
//##

//** Padding around the thumbnail image
$thumbnail-padding:           4px !default;
//** Thumbnail background color
$thumbnail-bg:                $body-bg !default;
//** Thumbnail border color
$thumbnail-border:            #ddd !default;
//** Thumbnail border radius
$thumbnail-border-radius:     $border-radius-base !default;

//** Custom text color for thumbnail captions
$thumbnail-caption-color:     $text-color !default;
//** Padding around the thumbnail caption
$thumbnail-caption-padding:   9px !default;


//== Wells
//
//##

$well-bg:                     #f5f5f5 !default;
$well-border:                 darken($well-bg, 7%) !default;


//== Badges
//
//##

$badge-color:                 #fff !default;
//** Linked badge text color on hover
$badge-link-hover-color:      #fff !default;
$badge-bg:                    $gray-light !default;

//** Badge text color in active nav link
$badge-active-color:          $link-color !default;
//** Badge background color in active nav link
$badge-active-bg:             #fff !default;

$badge-font-weight:           bold !default;
$badge-line-height:           1 !default;
$badge-border-radius:         10px !default;


//== Breadcrumbs
//
//##

$breadcrumb-padding-vertical:   8px !default;
$breadcrumb-padding-horizontal: 15px !default;
//** Breadcrumb background color
$breadcrumb-bg:                 #f5f5f5 !default;
//** Breadcrumb text color
$breadcrumb-color:              #ccc !default;
//** Text color of current page in the breadcrumb
$breadcrumb-active-color:       $gray-light !default;
//** Textual separator for between breadcrumb elements
$breadcrumb-separator:          "/" !default;


//== Carousel
//
//##

$carousel-text-shadow:                        0 1px 2px rgba(0, 0, 0, .6) !default;

$carousel-control-color:                      #fff !default;
$carousel-control-width:                      15% !default;
$carousel-control-opacity:                    .5 !default;
$carousel-control-font-size:                  20px !default;

$carousel-indicator-active-bg:                #fff !default;
$carousel-indicator-border-color:             #fff !default;

$carousel-caption-color:                      #fff !default;


//== Close
//
//##

$close-font-weight:           bold !default;
$close-color:                 #000 !default;
$close-text-shadow:           0 1px 0 #fff !default;


//== Code
//
//##

$code-color:                  #c7254e !default;
$code-bg:                     #f9f2f4 !default;

$kbd-color:                   #fff !default;
$kbd-bg:                      #333 !default;

$pre-bg:                      #f5f5f5 !default;
$pre-color:                   $gray-dark !default;
$pre-border-color:            #ccc !default;
$pre-scrollable-max-height:   340px !default;


//== Type
//
//##

//** Horizontal offset for forms and lists.
$component-offset-horizontal: 180px !default;
//** Text muted color
$text-muted:                  $gray-light !default;
//** Abbreviations and acronyms border color
$abbr-border-color:           $gray-light !default;
//** Headings small color
$headings-small-color:        $gray-light !default;
//** Blockquote small color
$blockquote-small-color:      $gray-light !default;
//** Blockquote font size
$blockquote-font-size:        ($font-size-base * 1.25) !default;
//** Blockquote border color
$blockquote-border-color:     $gray-lighter !default;
//** Page header border color
$page-header-border-color:    $gray-lighter !default;
//** Width of horizontal description list titles
$dl-horizontal-offset:        $component-offset-horizontal !default;
//** Point at which .dl-horizontal becomes horizontal
$dl-horizontal-breakpoint:    $grid-float-breakpoint !default;
//** Horizontal line color.
$hr-border:                   $gray-lighter !default;

// Mixins
// --------------------------------------------------

// Utilities
// CSS image replacement
//
// Heads up! v3 launched with only `.hide-text()`, but per our pattern for
// mixins being reused as classes with the same name, this doesn't hold up. As
// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`.
//
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757

// Deprecated as of v3.0.1 (has been removed in v4)
@mixin hide-text() {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

// New mixin to use as of v3.0.1
@mixin text-hide() {
  @include hide-text;
}

// Opacity

@mixin opacity($opacity) {
  $opacity-ie: ($opacity * 100);  // IE8 filter
  filter: alpha(opacity=$opacity-ie);
  opacity: $opacity;
}

// Responsive image
//
// Keep images from scaling beyond the width of their parents.
@mixin img-responsive($display: block) {
  display: $display;
  max-width: 100%; // Part 1: Set a maximum relative to the parent
  height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
}


// Retina image
//
// Short retina mixin for setting background-image and -size. Note that the
// spelling of `min--moz-device-pixel-ratio` is intentional.
@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
  background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-1x}"), "#{$file-1x}"));

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and ( min--moz-device-pixel-ratio: 2),
  only screen and ( -o-min-device-pixel-ratio: 2/1),
  only screen and ( min-device-pixel-ratio: 2),
  only screen and ( min-resolution: 192dpi),
  only screen and ( min-resolution: 2dppx) {
    background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-2x}"), "#{$file-2x}"));
    background-size: $width-1x $height-1x;
  }
}

// Labels

@mixin label-variant($color) {
  background-color: $color;

  &[href] {
    &:hover,
    &:focus {
      background-color: darken($color, 10%);
    }
  }
}

// Reset filters for IE
//
// When you need to remove a gradient background, do not forget to use this to reset
// the IE filter for IE9 and below.

@mixin reset-filter() {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}

// Resize anything

@mixin resizable($direction) {
  overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
  resize: $direction; // Options: horizontal, vertical, both
}

// [converter] $parent hack
@mixin responsive-visibility($parent) {
  #{$parent} {
    display: block !important;
  }
  table#{$parent}  { display: table !important; }
  tr#{$parent}     { display: table-row !important; }
  th#{$parent},
  td#{$parent}     { display: table-cell !important; }
}

// [converter] $parent hack
@mixin responsive-invisibility($parent) {
  #{$parent} {
    display: none !important;
  }
}

// Sizing shortcuts

@mixin size($width, $height) {
  width: $width;
  height: $height;
}

@mixin square($size) {
  @include size($size, $size);
}

// WebKit-style focus

@mixin tab-focus() {
  // WebKit-specific. Other browsers will keep their default outline style.
  // (Initially tried to also force default via `outline: initial`,
  // but that seems to erroneously remove the outline in Firefox altogether.)
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

@mixin reset-text() {
  font-family: $font-family-base;
  // We deliberately do NOT reset font-size.
  font-style: normal;
  font-weight: 400;
  line-height: $line-height-base;
  line-break: auto;
  text-align: left; // Fallback for where `start` is not supported
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  white-space: normal;
}

// Typography

// [converter] $parent hack
@mixin text-emphasis-variant($parent, $color) {
  #{$parent} {
    color: $color;
  }
  a#{$parent}:hover,
  a#{$parent}:focus {
    color: darken($color, 10%);
  }
}

// Text overflow
// Requires inline-block or block for proper styling

@mixin text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Vendor Prefixes
//
// All vendor mixins are deprecated as of v3.2.0 due to the introduction of
// Autoprefixer in our Gruntfile. They have been removed in v4.

// - Animations
// - Backface visibility
// - Box shadow
// - Box sizing
// - Content columns
// - Hyphens
// - Placeholder text
// - Transformations
// - Transitions
// - User Select


// Animations
@mixin animation($animation) {
  -webkit-animation: $animation;
       -o-animation: $animation;
          animation: $animation;
}
@mixin animation-name($name) {
  -webkit-animation-name: $name;
          animation-name: $name;
}
@mixin animation-duration($duration) {
  -webkit-animation-duration: $duration;
          animation-duration: $duration;
}
@mixin animation-timing-function($timing-function) {
  -webkit-animation-timing-function: $timing-function;
          animation-timing-function: $timing-function;
}
@mixin animation-delay($delay) {
  -webkit-animation-delay: $delay;
          animation-delay: $delay;
}
@mixin animation-iteration-count($iteration-count) {
  -webkit-animation-iteration-count: $iteration-count;
          animation-iteration-count: $iteration-count;
}
@mixin animation-direction($direction) {
  -webkit-animation-direction: $direction;
          animation-direction: $direction;
}
@mixin animation-fill-mode($fill-mode) {
  -webkit-animation-fill-mode: $fill-mode;
          animation-fill-mode: $fill-mode;
}

// Backface visibility
// Prevent browsers from flickering when using CSS 3D transforms.
// Default value is `visible`, but can be changed to `hidden`

@mixin backface-visibility($visibility) {
  -webkit-backface-visibility: $visibility;
     -moz-backface-visibility: $visibility;
          backface-visibility: $visibility;
}

// Drop shadows
//
// Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's
// supported browsers that have box shadow capabilities now support it.

@mixin box-shadow($shadow...) {
  -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
          box-shadow: $shadow;
}

// Box sizing
@mixin box-sizing($boxmodel) {
  -webkit-box-sizing: $boxmodel;
     -moz-box-sizing: $boxmodel;
          box-sizing: $boxmodel;
}

// CSS3 Content Columns
@mixin content-columns($column-count, $column-gap: $grid-gutter-width) {
  -webkit-column-count: $column-count;
     -moz-column-count: $column-count;
          column-count: $column-count;
  -webkit-column-gap: $column-gap;
     -moz-column-gap: $column-gap;
          column-gap: $column-gap;
}

// Optional hyphenation
@mixin hyphens($mode: auto) {
  -webkit-hyphens: $mode;
     -moz-hyphens: $mode;
      -ms-hyphens: $mode; // IE10+
       -o-hyphens: $mode;
          hyphens: $mode;
  word-wrap: break-word;
}

// Placeholder text
@mixin placeholder($color: $input-color-placeholder) {
  // Firefox
  &::-moz-placeholder {
    color: $color;
    opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
  }
  &:-ms-input-placeholder { color: $color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: $color; } // Safari and Chrome
}

// Transformations
@mixin scale($ratio...) {
  -webkit-transform: scale($ratio);
      -ms-transform: scale($ratio); // IE9 only
       -o-transform: scale($ratio);
          transform: scale($ratio);
}

@mixin scaleX($ratio) {
  -webkit-transform: scaleX($ratio);
      -ms-transform: scaleX($ratio); // IE9 only
       -o-transform: scaleX($ratio);
          transform: scaleX($ratio);
}
@mixin scaleY($ratio) {
  -webkit-transform: scaleY($ratio);
      -ms-transform: scaleY($ratio); // IE9 only
       -o-transform: scaleY($ratio);
          transform: scaleY($ratio);
}
@mixin skew($x, $y) {
  -webkit-transform: skewX($x) skewY($y);
      -ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
       -o-transform: skewX($x) skewY($y);
          transform: skewX($x) skewY($y);
}
@mixin translate($x, $y) {
  -webkit-transform: translate($x, $y);
      -ms-transform: translate($x, $y); // IE9 only
       -o-transform: translate($x, $y);
          transform: translate($x, $y);
}
@mixin translate3d($x, $y, $z) {
  -webkit-transform: translate3d($x, $y, $z);
          transform: translate3d($x, $y, $z);
}
@mixin rotate($degrees) {
  -webkit-transform: rotate($degrees);
      -ms-transform: rotate($degrees); // IE9 only
       -o-transform: rotate($degrees);
          transform: rotate($degrees);
}
@mixin rotateX($degrees) {
  -webkit-transform: rotateX($degrees);
      -ms-transform: rotateX($degrees); // IE9 only
       -o-transform: rotateX($degrees);
          transform: rotateX($degrees);
}
@mixin rotateY($degrees) {
  -webkit-transform: rotateY($degrees);
      -ms-transform: rotateY($degrees); // IE9 only
       -o-transform: rotateY($degrees);
          transform: rotateY($degrees);
}
@mixin perspective($perspective) {
  -webkit-perspective: $perspective;
     -moz-perspective: $perspective;
          perspective: $perspective;
}
@mixin perspective-origin($perspective) {
  -webkit-perspective-origin: $perspective;
     -moz-perspective-origin: $perspective;
          perspective-origin: $perspective;
}
@mixin transform-origin($origin) {
  -webkit-transform-origin: $origin;
     -moz-transform-origin: $origin;
      -ms-transform-origin: $origin; // IE9 only
          transform-origin: $origin;
}


// Transitions

@mixin transition($transition...) {
  -webkit-transition: $transition;
       -o-transition: $transition;
          transition: $transition;
}
@mixin transition-property($transition-property...) {
  -webkit-transition-property: $transition-property;
          transition-property: $transition-property;
}
@mixin transition-delay($transition-delay) {
  -webkit-transition-delay: $transition-delay;
          transition-delay: $transition-delay;
}
@mixin transition-duration($transition-duration...) {
  -webkit-transition-duration: $transition-duration;
          transition-duration: $transition-duration;
}
@mixin transition-timing-function($timing-function) {
  -webkit-transition-timing-function: $timing-function;
          transition-timing-function: $timing-function;
}
@mixin transition-transform($transition...) {
  -webkit-transition: -webkit-transform $transition;
     -moz-transition: -moz-transform $transition;
       -o-transition: -o-transform $transition;
          transition: transform $transition;
}


// User select
// For selecting text on the page

@mixin user-select($select) {
  -webkit-user-select: $select;
     -moz-user-select: $select;
      -ms-user-select: $select; // IE10+
          user-select: $select;
}


// Components
// Alerts

@mixin alert-variant($background, $border, $text-color) {
  color: $text-color;
  background-color: $background;
  border-color: $border;

  hr {
    border-top-color: darken($border, 5%);
  }

  .alert-link {
    color: darken($text-color, 10%);
  }
}

// Button variants
//
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons

@mixin button-variant($color, $background, $border) {
  color: $color;
  background-color: $background;
  border-color: $border;

  &:focus,
  &.focus {
    color: $color;
    background-color: darken($background, 10%);
    border-color: darken($border, 25%);
  }
  &:hover {
    color: $color;
    background-color: darken($background, 10%);
    border-color: darken($border, 12%);
  }
  &:active,
  &.active,
  .open > &.dropdown-toggle {
    color: $color;
    background-color: darken($background, 10%);
    background-image: none;
    border-color: darken($border, 12%);

    &:hover,
    &:focus,
    &.focus {
      color: $color;
      background-color: darken($background, 17%);
      border-color: darken($border, 25%);
    }
  }
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &:hover,
    &:focus,
    &.focus {
      background-color: $background;
      border-color: $border;
    }
  }

  .badge {
    color: $background;
    background-color: $color;
  }
}

// Button sizes
@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
  padding: $padding-vertical $padding-horizontal;
  font-size: $font-size;
  line-height: $line-height;
  border-radius: $border-radius;
}

// Panels

@mixin panel-variant($border, $heading-text-color, $heading-bg-color, $heading-border) {
  border-color: $border;

  & > .panel-heading {
    color: $heading-text-color;
    background-color: $heading-bg-color;
    border-color: $heading-border;

    + .panel-collapse > .panel-body {
      border-top-color: $border;
    }
    .badge {
      color: $heading-bg-color;
      background-color: $heading-text-color;
    }
  }
  & > .panel-footer {
    + .panel-collapse > .panel-body {
      border-bottom-color: $border;
    }
  }
}

// Pagination

@mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
  > li {
    > a,
    > span {
      padding: $padding-vertical $padding-horizontal;
      font-size: $font-size;
      line-height: $line-height;
    }
    &:first-child {
      > a,
      > span {
        @include border-left-radius($border-radius);
      }
    }
    &:last-child {
      > a,
      > span {
        @include border-right-radius($border-radius);
      }
    }
  }
}

// List Groups

@mixin list-group-item-variant($state, $background, $color) {
  .list-group-item-#{$state} {
    color: $color;
    background-color: $background;

    // [converter] extracted a&, button& to a.list-group-item-#{$state}, button.list-group-item-#{$state}
  }

  a.list-group-item-#{$state},
  button.list-group-item-#{$state} {
    color: $color;

    .list-group-item-heading {
      color: inherit;
    }

    &:hover,
    &:focus {
      color: $color;
      background-color: darken($background, 5%);
    }
    &.active,
    &.active:hover,
    &.active:focus {
      color: #fff;
      background-color: $color;
      border-color: $color;
    }
  }
}

// Horizontal dividers
//
// Dividers (basically an hr) within dropdowns and nav lists

@mixin nav-divider($color: #e5e5e5) {
  height: 1px;
  margin: (($line-height-computed / 2) - 1) 0;
  overflow: hidden;
  background-color: $color;
}

// Form validation states
//
// Used in forms.less to generate the form validation CSS for warnings, errors,
// and successes.

@mixin form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) {
  // Color the label and help text
  .help-block,
  .control-label,
  .radio,
  .checkbox,
  .radio-inline,
  .checkbox-inline,
  &.radio label,
  &.checkbox label,
  &.radio-inline label,
  &.checkbox-inline label  {
    color: $text-color;
  }
  // Set the border and box shadow on specific inputs to match
  .form-control {
    border-color: $border-color;
    @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075)); // Redeclare so transitions work
    &:focus {
      border-color: darken($border-color, 10%);
      $shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px lighten($border-color, 20%);
      @include box-shadow($shadow);
    }
  }
  // Set validation states also for addons
  .input-group-addon {
    color: $text-color;
    background-color: $background-color;
    border-color: $border-color;
  }
  // Optional feedback icon
  .form-control-feedback {
    color: $text-color;
  }
}


// Form control focus state
//
// Generate a customized focus state and for any input with the specified color,
// which defaults to the `$input-border-focus` variable.
//
// We highly encourage you to not customize the default value, but instead use
// this to tweak colors on an as-needed basis. This aesthetic change is based on
// WebKit's default styles, but applicable to a wider range of browsers. Its
// usability and accessibility should be taken into account with any change.
//
// Example usage: change the default blue border and shadow to white for better
// contrast against a dark gray background.
@mixin form-control-focus($color: $input-border-focus) {
  $color-rgba: rgba(red($color), green($color), blue($color), .6);
  &:focus {
    border-color: $color;
    outline: 0;
    @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px $color-rgba);
  }
}

// Form control sizing
//
// Relative text size, padding, and border-radii changes for form controls. For
// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
// element gets special love because it's special, and that's a fact!
// [converter] $parent hack
@mixin input-size($parent, $input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
  #{$parent} {
    height: $input-height;
    padding: $padding-vertical $padding-horizontal;
    font-size: $font-size;
    line-height: $line-height;
    border-radius: $border-radius;
  }

  select#{$parent} {
    height: $input-height;
    line-height: $input-height;
  }

  textarea#{$parent},
  select[multiple]#{$parent} {
    height: auto;
  }
}

// Progress bars

@mixin progress-bar-variant($color) {
  background-color: $color;

  // Deprecated parent class requirement as of v3.2.0
  .progress-striped & {
    @include gradient-striped;
  }
}

// Tables

@mixin table-row-variant($state, $background) {
  // Exact selectors below required to override `.table-striped` and prevent
  // inheritance to nested tables.
  .table > thead > tr,
  .table > tbody > tr,
  .table > tfoot > tr {
    > td.#{$state},
    > th.#{$state},
    &.#{$state} > td,
    &.#{$state} > th {
      background-color: $background;
    }
  }

  // Hover states for `.table-hover`
  // Note: this is not available for cells or rows within `thead` or `tfoot`.
  .table-hover > tbody > tr {
    > td.#{$state}:hover,
    > th.#{$state}:hover,
    &.#{$state}:hover > td,
    &:hover > .#{$state},
    &.#{$state}:hover > th {
      background-color: darken($background, 5%);
    }
  }
}


// Skins
// Contextual backgrounds

// [converter] $parent hack
@mixin bg-variant($parent, $color) {
  #{$parent} {
    background-color: $color;
  }
  a#{$parent}:hover,
  a#{$parent}:focus {
    background-color: darken($color, 10%);
  }
}

// Single side border-radius

@mixin border-top-radius($radius) {
  border-top-left-radius: $radius;
  border-top-right-radius: $radius;
}
@mixin border-right-radius($radius) {
  border-top-right-radius: $radius;
  border-bottom-right-radius: $radius;
}
@mixin border-bottom-radius($radius) {
  border-bottom-right-radius: $radius;
  border-bottom-left-radius: $radius;
}
@mixin border-left-radius($radius) {
  border-top-left-radius: $radius;
  border-bottom-left-radius: $radius;
}



// Horizontal gradient, from left to right
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9 and below.
@mixin gradient-horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
  background-image: -webkit-linear-gradient(left, $start-color $start-percent, $end-color $end-percent); // Safari 5.1-6, Chrome 10+
  background-image: -o-linear-gradient(left, $start-color $start-percent, $end-color $end-percent); // Opera 12
  background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down
  background-repeat: repeat-x;
}

// Vertical gradient, from top to bottom
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9 and below.
@mixin gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
  background-image: -webkit-linear-gradient(top, $start-color $start-percent, $end-color $end-percent);  // Safari 5.1-6, Chrome 10+
  background-image: -o-linear-gradient(top, $start-color $start-percent, $end-color $end-percent);  // Opera 12
  background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down
  background-repeat: repeat-x;
}

@mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
  background-image: -webkit-linear-gradient($deg, $start-color, $end-color); // Safari 5.1-6, Chrome 10+
  background-image: -o-linear-gradient($deg, $start-color, $end-color); // Opera 12
  background-image: linear-gradient($deg, $start-color, $end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
  background-repeat: repeat-x;
}
@mixin gradient-horizontal-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
  background-image: -webkit-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);
  background-image: -o-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);
  background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down, gets no color-stop at all for proper fallback
  background-repeat: no-repeat;
}
@mixin gradient-vertical-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
  background-image: -webkit-linear-gradient($start-color, $mid-color $color-stop, $end-color);
  background-image: -o-linear-gradient($start-color, $mid-color $color-stop, $end-color);
  background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
  background-repeat: no-repeat;
}
@mixin gradient-radial($inner-color: #555, $outer-color: #333) {
  background-image: -webkit-radial-gradient(circle, $inner-color, $outer-color);
  background-image: radial-gradient(circle, $inner-color, $outer-color);
  background-repeat: no-repeat;
}
@mixin gradient-striped($color: rgba(255, 255, 255, .15), $angle: 45deg) {
  background-image: -webkit-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
  background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
}


// Layout
// Clearfix
//
// For modern browsers
// 1. The space content is one way to avoid an Opera bug when the
//    contenteditable attribute is included anywhere else in the document.
//    Otherwise it causes space to appear at the top and bottom of elements
//    that are clearfixed.
// 2. The use of `table` rather than `block` is only necessary if using
//    `:before` to contain the top-margins of child elements.
//
// Source: http://nicolasgallagher.com/micro-clearfix-hack/

@mixin clearfix() {
  &:before,
  &:after {
    display: table; // 2
    content: " "; // 1
  }
  &:after {
    clear: both;
  }
}

// Center-align a block level element

@mixin center-block() {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

// Navbar vertical align
//
// Vertically center elements in the navbar.
// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.

@mixin navbar-vertical-align($element-height) {
  margin-top: (($navbar-height - $element-height) / 2);
  margin-bottom: (($navbar-height - $element-height) / 2);
}

// Framework grid generation
//
// Used only by Bootstrap to generate the correct number of grid classes given
// any value of `$grid-columns`.

// [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") {
  @for $i from (1 + 1) through $grid-columns {
    $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
  }
  #{$list} {
    position: relative;
    // Prevent columns from collapsing when empty
    min-height: 1px;
    // Inner gutter via padding
    padding-right: floor(($grid-gutter-width / 2));
    padding-left: ceil(($grid-gutter-width / 2));
  }
}


// [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") {
  @for $i from (1 + 1) through $grid-columns {
    $list: "#{$list}, .col-#{$class}-#{$i}";
  }
  #{$list} {
    float: left;
  }
}


@mixin calc-grid-column($index, $class, $type) {
  @if ($type == width) and ($index > 0) {
    .col-#{$class}-#{$index} {
      width: percentage(($index / $grid-columns));
    }
  }
  @if ($type == push) and ($index > 0) {
    .col-#{$class}-push-#{$index} {
      left: percentage(($index / $grid-columns));
    }
  }
  @if ($type == push) and ($index == 0) {
    .col-#{$class}-push-0 {
      left: auto;
    }
  }
  @if ($type == pull) and ($index > 0) {
    .col-#{$class}-pull-#{$index} {
      right: percentage(($index / $grid-columns));
    }
  }
  @if ($type == pull) and ($index == 0) {
    .col-#{$class}-pull-0 {
      right: auto;
    }
  }
  @if ($type == offset) {
    .col-#{$class}-offset-#{$index} {
      margin-left: percentage(($index / $grid-columns));
    }
  }
}

// [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin loop-grid-columns($columns, $class, $type) {
  @for $i from 0 through $columns {
    @include calc-grid-column($i, $class, $type);
  }
}


// Create grid for specific class
@mixin make-grid($class) {
  @include float-grid-columns($class);
  @include loop-grid-columns($grid-columns, $class, width);
  @include loop-grid-columns($grid-columns, $class, pull);
  @include loop-grid-columns($grid-columns, $class, push);
  @include loop-grid-columns($grid-columns, $class, offset);
}

// Grid system
//
// Generate semantic grid columns with these mixins.

// Centered container element
@mixin container-fixed($gutter: $grid-gutter-width) {
  padding-right: ceil(($gutter / 2));
  padding-left: floor(($gutter / 2));
  margin-right: auto;
  margin-left: auto;
  @include clearfix;
}

// Creates a wrapper for a series of columns
@mixin make-row($gutter: $grid-gutter-width) {
  margin-right: floor(($gutter / -2));
  margin-left: ceil(($gutter / -2));
  @include clearfix;
}

// Generate the extra small columns
@mixin make-xs-column($columns, $gutter: $grid-gutter-width) {
  position: relative;
  float: left;
  width: percentage(($columns / $grid-columns));
  min-height: 1px;
  padding-right: ($gutter / 2);
  padding-left: ($gutter / 2);
}
@mixin make-xs-column-offset($columns) {
  margin-left: percentage(($columns / $grid-columns));
}
@mixin make-xs-column-push($columns) {
  left: percentage(($columns / $grid-columns));
}
@mixin make-xs-column-pull($columns) {
  right: percentage(($columns / $grid-columns));
}

// Generate the small columns
@mixin make-sm-column($columns, $gutter: $grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-right: ($gutter / 2);
  padding-left: ($gutter / 2);

  @media (min-width: $screen-sm-min) {
    float: left;
    width: percentage(($columns / $grid-columns));
  }
}
@mixin make-sm-column-offset($columns) {
  @media (min-width: $screen-sm-min) {
    margin-left: percentage(($columns / $grid-columns));
  }
}
@mixin make-sm-column-push($columns) {
  @media (min-width: $screen-sm-min) {
    left: percentage(($columns / $grid-columns));
  }
}
@mixin make-sm-column-pull($columns) {
  @media (min-width: $screen-sm-min) {
    right: percentage(($columns / $grid-columns));
  }
}

// Generate the medium columns
@mixin make-md-column($columns, $gutter: $grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-right: ($gutter / 2);
  padding-left: ($gutter / 2);

  @media (min-width: $screen-md-min) {
    float: left;
    width: percentage(($columns / $grid-columns));
  }
}
@mixin make-md-column-offset($columns) {
  @media (min-width: $screen-md-min) {
    margin-left: percentage(($columns / $grid-columns));
  }
}
@mixin make-md-column-push($columns) {
  @media (min-width: $screen-md-min) {
    left: percentage(($columns / $grid-columns));
  }
}
@mixin make-md-column-pull($columns) {
  @media (min-width: $screen-md-min) {
    right: percentage(($columns / $grid-columns));
  }
}

// Generate the large columns
@mixin make-lg-column($columns, $gutter: $grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-right: ($gutter / 2);
  padding-left: ($gutter / 2);

  @media (min-width: $screen-lg-min) {
    float: left;
    width: percentage(($columns / $grid-columns));
  }
}
@mixin make-lg-column-offset($columns) {
  @media (min-width: $screen-lg-min) {
    margin-left: percentage(($columns / $grid-columns));
  }
}
@mixin make-lg-column-push($columns) {
  @media (min-width: $screen-lg-min) {
    left: percentage(($columns / $grid-columns));
  }
}
@mixin make-lg-column-pull($columns) {
  @media (min-width: $screen-lg-min) {
    right: percentage(($columns / $grid-columns));
  }
}



// Reset and dependencies
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

//
// 1. Set default font family to sans-serif.
// 2. Prevent iOS and IE text size adjust after device orientation change,
//    without disabling user zoom.
//

html {
  font-family: sans-serif; // 1
  -ms-text-size-adjust: 100%; // 2
  -webkit-text-size-adjust: 100%; // 2
}

//
// Remove default margin.
//

body {
  margin: 0;
}

// HTML5 display definitions
// ==========================================================================

//
// Correct `block` display not defined for any HTML5 element in IE 8/9.
// Correct `block` display not defined for `details` or `summary` in IE 10/11
// and Firefox.
// Correct `block` display not defined for `main` in IE 11.
//

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

//
// 1. Correct `inline-block` display not defined in IE 8/9.
// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
//

audio,
canvas,
progress,
video {
  display: inline-block; // 1
  vertical-align: baseline; // 2
}

//
// Prevent modern browsers from displaying `audio` without controls.
// Remove excess height in iOS 5 devices.
//

audio:not([controls]) {
  display: none;
  height: 0;
}

//
// Address `[hidden]` styling not present in IE 8/9/10.
// Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
//

[hidden],
template {
  display: none;
}

// Links
// ==========================================================================

//
// Remove the gray background color from active links in IE 10.
//

a {
  background-color: transparent;
}

//
// Improve readability of focused elements when they are also in an
// active/hover state.
//

a:active,
a:hover {
  outline: 0;
}

// Text-level semantics
// ==========================================================================

//
// 1. Remove the bottom border in Chrome 57- and Firefox 39-.
// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
//

abbr[title] {
  border-bottom: none; // 1
  text-decoration: underline; // 2
  text-decoration: underline dotted; // 2
}

//
// Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
//

b,
strong {
  font-weight: bold;
}

//
// Address styling not present in Safari and Chrome.
//

dfn {
  font-style: italic;
}

//
// Address variable `h1` font-size and margin within `section` and `article`
// contexts in Firefox 4+, Safari, and Chrome.
//

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

//
// Address styling not present in IE 8/9.
//

mark {
  background: #ff0;
  color: #000;
}

//
// Address inconsistent and variable font size in all browsers.
//

small {
  font-size: 80%;
}

//
// Prevent `sub` and `sup` affecting `line-height` in all browsers.
//

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

// Embedded content
// ==========================================================================

//
// Remove border when inside `a` element in IE 8/9/10.
//

img {
  border: 0;
}

//
// Correct overflow not hidden in IE 9/10/11.
//

svg:not(:root) {
  overflow: hidden;
}

// Grouping content
// ==========================================================================

//
// Address margin not present in IE 8/9 and Safari.
//

figure {
  margin: 1em 40px;
}

//
// Address differences between Firefox and other browsers.
//

hr {
  box-sizing: content-box;
  height: 0;
}

//
// Contain overflow in all browsers.
//

pre {
  overflow: auto;
}

//
// Address odd `em`-unit font size rendering in all browsers.
//

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

// Forms
// ==========================================================================

//
// Known limitation: by default, Chrome and Safari on OS X allow very limited
// styling of `select`, unless a `border` property is set.
//

//
// 1. Correct color not being inherited.
//    Known issue: affects color of disabled elements.
// 2. Correct font properties not being inherited.
// 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
//

button,
input,
optgroup,
select,
textarea {
  color: inherit; // 1
  font: inherit; // 2
  margin: 0; // 3
}

//
// Address `overflow` set to `hidden` in IE 8/9/10/11.
//

button {
  overflow: visible;
}

//
// Address inconsistent `text-transform` inheritance for `button` and `select`.
// All other form control elements do not inherit `text-transform` values.
// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
// Correct `select` style inheritance in Firefox.
//

button,
select {
  text-transform: none;
}

//
// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
//    and `video` controls.
// 2. Correct inability to style clickable `input` types in iOS.
// 3. Improve usability and consistency of cursor style between image-type
//    `input` and others.
//

button,
html input[type="button"], // 1
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; // 2
  cursor: pointer; // 3
}

//
// Re-set default cursor for disabled elements.
//

button[disabled],
html input[disabled] {
  cursor: default;
}

//
// Remove inner padding and border in Firefox 4+.
//

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

//
// Address Firefox 4+ setting `line-height` on `input` using `!important` in
// the UA stylesheet.
//

input {
  line-height: normal;
}

//
// It's recommended that you don't attempt to style these elements.
// Firefox's implementation doesn't respect box-sizing, padding, or width.
//
// 1. Address box sizing set to `content-box` in IE 8/9/10.
// 2. Remove excess padding in IE 8/9/10.
//

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; // 1
  padding: 0; // 2
}

//
// Fix the cursor style for Chrome's increment/decrement buttons. For certain
// `font-size` values of the `input`, it causes the cursor style of the
// decrement button to change from `default` to `text`.
//

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

//
// 1. Address `appearance` set to `searchfield` in Safari and Chrome.
// 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
//

input[type="search"] {
  -webkit-appearance: textfield; // 1
  box-sizing: content-box; //2
}

//
// Remove inner padding and search cancel button in Safari and Chrome on OS X.
// Safari (but not Chrome) clips the cancel button when the search input has
// padding (and `textfield` appearance).
//

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

//
// Define consistent border, margin, and padding.
//

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

//
// 1. Correct `color` not being inherited in IE 8/9/10/11.
// 2. Remove padding so people aren't caught out if they zero out fieldsets.
//

legend {
  border: 0; // 1
  padding: 0; // 2
}

//
// Remove default vertical scrollbar in IE 8/9/10/11.
//

textarea {
  overflow: auto;
}

//
// Don't inherit the `font-weight` (applied by a rule above).
// NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
//

optgroup {
  font-weight: bold;
}

// Tables
// ==========================================================================

//
// Remove most spacing between table cells.
//

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */

// ==========================================================================
// Print styles.
// Inlined to avoid the additional HTTP request: h5bp.com/r
// ==========================================================================

@media print {
  *,
  *:before,
  *:after {
    color: #000 !important; // Black prints faster: h5bp.com/s
    text-shadow: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }

  abbr[title]:after {
    content: " (" attr(title) ")";
  }

  // Don't show links that are fragment identifiers,
  // or use the `javascript:` pseudo protocol
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group; // h5bp.com/t
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }

  // Bootstrap specific changes start

  // Bootstrap components
  .navbar {
    display: none;
  }
  .btn,
  .dropup > .btn {
    > .caret {
      border-top-color: #000 !important;
    }
  }
  .label {
    border: 1px solid #000;
  }

  .table {
    border-collapse: collapse !important;

    td,
    th {
      background-color: #fff !important;
    }
  }
  .table-bordered {
    th,
    td {
      border: 1px solid #ddd !important;
    }
  }
}

//
// Glyphicons for Bootstrap
//
// Since icons are fonts, they can be placed anywhere text is placed and are
// thus automatically sized to match the surrounding child. To use, create an
// inline element with the appropriate classes, like so:
//
// <a href="#"><span class="glyphicon glyphicon-star"></span> Star</a>

@at-root {
  // Import the fonts
  @font-face {
    font-family: "Glyphicons Halflings";
    src: url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$icon-font-path}#{$icon-font-name}.eot"), "#{$icon-font-path}#{$icon-font-name}.eot"));
    src: url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$icon-font-path}#{$icon-font-name}.eot?#iefix"), "#{$icon-font-path}#{$icon-font-name}.eot?#iefix")) format("embedded-opentype"),
         url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$icon-font-path}#{$icon-font-name}.woff2"), "#{$icon-font-path}#{$icon-font-name}.woff2")) format("woff2"),
         url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$icon-font-path}#{$icon-font-name}.woff"), "#{$icon-font-path}#{$icon-font-name}.woff")) format("woff"),
         url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$icon-font-path}#{$icon-font-name}.ttf"), "#{$icon-font-path}#{$icon-font-name}.ttf")) format("truetype"),
         url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}"), "#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}")) format("svg");
  }
}

// Catchall baseclass
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: "Glyphicons Halflings";
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// Individual icons
.glyphicon-asterisk               { &:before { content: "\002a"; } }
.glyphicon-plus                   { &:before { content: "\002b"; } }
.glyphicon-euro,
.glyphicon-eur                    { &:before { content: "\20ac"; } }
.glyphicon-minus                  { &:before { content: "\2212"; } }
.glyphicon-cloud                  { &:before { content: "\2601"; } }
.glyphicon-envelope               { &:before { content: "\2709"; } }
.glyphicon-pencil                 { &:before { content: "\270f"; } }
.glyphicon-glass                  { &:before { content: "\e001"; } }
.glyphicon-music                  { &:before { content: "\e002"; } }
.glyphicon-search                 { &:before { content: "\e003"; } }
.glyphicon-heart                  { &:before { content: "\e005"; } }
.glyphicon-star                   { &:before { content: "\e006"; } }
.glyphicon-star-empty             { &:before { content: "\e007"; } }
.glyphicon-user                   { &:before { content: "\e008"; } }
.glyphicon-film                   { &:before { content: "\e009"; } }
.glyphicon-th-large               { &:before { content: "\e010"; } }
.glyphicon-th                     { &:before { content: "\e011"; } }
.glyphicon-th-list                { &:before { content: "\e012"; } }
.glyphicon-ok                     { &:before { content: "\e013"; } }
.glyphicon-remove                 { &:before { content: "\e014"; } }
.glyphicon-zoom-in                { &:before { content: "\e015"; } }
.glyphicon-zoom-out               { &:before { content: "\e016"; } }
.glyphicon-off                    { &:before { content: "\e017"; } }
.glyphicon-signal                 { &:before { content: "\e018"; } }
.glyphicon-cog                    { &:before { content: "\e019"; } }
.glyphicon-trash                  { &:before { content: "\e020"; } }
.glyphicon-home                   { &:before { content: "\e021"; } }
.glyphicon-file                   { &:before { content: "\e022"; } }
.glyphicon-time                   { &:before { content: "\e023"; } }
.glyphicon-road                   { &:before { content: "\e024"; } }
.glyphicon-download-alt           { &:before { content: "\e025"; } }
.glyphicon-download               { &:before { content: "\e026"; } }
.glyphicon-upload                 { &:before { content: "\e027"; } }
.glyphicon-inbox                  { &:before { content: "\e028"; } }
.glyphicon-play-circle            { &:before { content: "\e029"; } }
.glyphicon-repeat                 { &:before { content: "\e030"; } }
.glyphicon-refresh                { &:before { content: "\e031"; } }
.glyphicon-list-alt               { &:before { content: "\e032"; } }
.glyphicon-lock                   { &:before { content: "\e033"; } }
.glyphicon-flag                   { &:before { content: "\e034"; } }
.glyphicon-headphones             { &:before { content: "\e035"; } }
.glyphicon-volume-off             { &:before { content: "\e036"; } }
.glyphicon-volume-down            { &:before { content: "\e037"; } }
.glyphicon-volume-up              { &:before { content: "\e038"; } }
.glyphicon-qrcode                 { &:before { content: "\e039"; } }
.glyphicon-barcode                { &:before { content: "\e040"; } }
.glyphicon-tag                    { &:before { content: "\e041"; } }
.glyphicon-tags                   { &:before { content: "\e042"; } }
.glyphicon-book                   { &:before { content: "\e043"; } }
.glyphicon-bookmark               { &:before { content: "\e044"; } }
.glyphicon-print                  { &:before { content: "\e045"; } }
.glyphicon-camera                 { &:before { content: "\e046"; } }
.glyphicon-font                   { &:before { content: "\e047"; } }
.glyphicon-bold                   { &:before { content: "\e048"; } }
.glyphicon-italic                 { &:before { content: "\e049"; } }
.glyphicon-text-height            { &:before { content: "\e050"; } }
.glyphicon-text-width             { &:before { content: "\e051"; } }
.glyphicon-align-left             { &:before { content: "\e052"; } }
.glyphicon-align-center           { &:before { content: "\e053"; } }
.glyphicon-align-right            { &:before { content: "\e054"; } }
.glyphicon-align-justify          { &:before { content: "\e055"; } }
.glyphicon-list                   { &:before { content: "\e056"; } }
.glyphicon-indent-left            { &:before { content: "\e057"; } }
.glyphicon-indent-right           { &:before { content: "\e058"; } }
.glyphicon-facetime-video         { &:before { content: "\e059"; } }
.glyphicon-picture                { &:before { content: "\e060"; } }
.glyphicon-map-marker             { &:before { content: "\e062"; } }
.glyphicon-adjust                 { &:before { content: "\e063"; } }
.glyphicon-tint                   { &:before { content: "\e064"; } }
.glyphicon-edit                   { &:before { content: "\e065"; } }
.glyphicon-share                  { &:before { content: "\e066"; } }
.glyphicon-check                  { &:before { content: "\e067"; } }
.glyphicon-move                   { &:before { content: "\e068"; } }
.glyphicon-step-backward          { &:before { content: "\e069"; } }
.glyphicon-fast-backward          { &:before { content: "\e070"; } }
.glyphicon-backward               { &:before { content: "\e071"; } }
.glyphicon-play                   { &:before { content: "\e072"; } }
.glyphicon-pause                  { &:before { content: "\e073"; } }
.glyphicon-stop                   { &:before { content: "\e074"; } }
.glyphicon-forward                { &:before { content: "\e075"; } }
.glyphicon-fast-forward           { &:before { content: "\e076"; } }
.glyphicon-step-forward           { &:before { content: "\e077"; } }
.glyphicon-eject                  { &:before { content: "\e078"; } }
.glyphicon-chevron-left           { &:before { content: "\e079"; } }
.glyphicon-chevron-right          { &:before { content: "\e080"; } }
.glyphicon-plus-sign              { &:before { content: "\e081"; } }
.glyphicon-minus-sign             { &:before { content: "\e082"; } }
.glyphicon-remove-sign            { &:before { content: "\e083"; } }
.glyphicon-ok-sign                { &:before { content: "\e084"; } }
.glyphicon-question-sign          { &:before { content: "\e085"; } }
.glyphicon-info-sign              { &:before { content: "\e086"; } }
.glyphicon-screenshot             { &:before { content: "\e087"; } }
.glyphicon-remove-circle          { &:before { content: "\e088"; } }
.glyphicon-ok-circle              { &:before { content: "\e089"; } }
.glyphicon-ban-circle             { &:before { content: "\e090"; } }
.glyphicon-arrow-left             { &:before { content: "\e091"; } }
.glyphicon-arrow-right            { &:before { content: "\e092"; } }
.glyphicon-arrow-up               { &:before { content: "\e093"; } }
.glyphicon-arrow-down             { &:before { content: "\e094"; } }
.glyphicon-share-alt              { &:before { content: "\e095"; } }
.glyphicon-resize-full            { &:before { content: "\e096"; } }
.glyphicon-resize-small           { &:before { content: "\e097"; } }
.glyphicon-exclamation-sign       { &:before { content: "\e101"; } }
.glyphicon-gift                   { &:before { content: "\e102"; } }
.glyphicon-leaf                   { &:before { content: "\e103"; } }
.glyphicon-fire                   { &:before { content: "\e104"; } }
.glyphicon-eye-open               { &:before { content: "\e105"; } }
.glyphicon-eye-close              { &:before { content: "\e106"; } }
.glyphicon-warning-sign           { &:before { content: "\e107"; } }
.glyphicon-plane                  { &:before { content: "\e108"; } }
.glyphicon-calendar               { &:before { content: "\e109"; } }
.glyphicon-random                 { &:before { content: "\e110"; } }
.glyphicon-comment                { &:before { content: "\e111"; } }
.glyphicon-magnet                 { &:before { content: "\e112"; } }
.glyphicon-chevron-up             { &:before { content: "\e113"; } }
.glyphicon-chevron-down           { &:before { content: "\e114"; } }
.glyphicon-retweet                { &:before { content: "\e115"; } }
.glyphicon-shopping-cart          { &:before { content: "\e116"; } }
.glyphicon-folder-close           { &:before { content: "\e117"; } }
.glyphicon-folder-open            { &:before { content: "\e118"; } }
.glyphicon-resize-vertical        { &:before { content: "\e119"; } }
.glyphicon-resize-horizontal      { &:before { content: "\e120"; } }
.glyphicon-hdd                    { &:before { content: "\e121"; } }
.glyphicon-bullhorn               { &:before { content: "\e122"; } }
.glyphicon-bell                   { &:before { content: "\e123"; } }
.glyphicon-certificate            { &:before { content: "\e124"; } }
.glyphicon-thumbs-up              { &:before { content: "\e125"; } }
.glyphicon-thumbs-down            { &:before { content: "\e126"; } }
.glyphicon-hand-right             { &:before { content: "\e127"; } }
.glyphicon-hand-left              { &:before { content: "\e128"; } }
.glyphicon-hand-up                { &:before { content: "\e129"; } }
.glyphicon-hand-down              { &:before { content: "\e130"; } }
.glyphicon-circle-arrow-right     { &:before { content: "\e131"; } }
.glyphicon-circle-arrow-left      { &:before { content: "\e132"; } }
.glyphicon-circle-arrow-up        { &:before { content: "\e133"; } }
.glyphicon-circle-arrow-down      { &:before { content: "\e134"; } }
.glyphicon-globe                  { &:before { content: "\e135"; } }
.glyphicon-wrench                 { &:before { content: "\e136"; } }
.glyphicon-tasks                  { &:before { content: "\e137"; } }
.glyphicon-filter                 { &:before { content: "\e138"; } }
.glyphicon-briefcase              { &:before { content: "\e139"; } }
.glyphicon-fullscreen             { &:before { content: "\e140"; } }
.glyphicon-dashboard              { &:before { content: "\e141"; } }
.glyphicon-paperclip              { &:before { content: "\e142"; } }
.glyphicon-heart-empty            { &:before { content: "\e143"; } }
.glyphicon-link                   { &:before { content: "\e144"; } }
.glyphicon-phone                  { &:before { content: "\e145"; } }
.glyphicon-pushpin                { &:before { content: "\e146"; } }
.glyphicon-usd                    { &:before { content: "\e148"; } }
.glyphicon-gbp                    { &:before { content: "\e149"; } }
.glyphicon-sort                   { &:before { content: "\e150"; } }
.glyphicon-sort-by-alphabet       { &:before { content: "\e151"; } }
.glyphicon-sort-by-alphabet-alt   { &:before { content: "\e152"; } }
.glyphicon-sort-by-order          { &:before { content: "\e153"; } }
.glyphicon-sort-by-order-alt      { &:before { content: "\e154"; } }
.glyphicon-sort-by-attributes     { &:before { content: "\e155"; } }
.glyphicon-sort-by-attributes-alt { &:before { content: "\e156"; } }
.glyphicon-unchecked              { &:before { content: "\e157"; } }
.glyphicon-expand                 { &:before { content: "\e158"; } }
.glyphicon-collapse-down          { &:before { content: "\e159"; } }
.glyphicon-collapse-up            { &:before { content: "\e160"; } }
.glyphicon-log-in                 { &:before { content: "\e161"; } }
.glyphicon-flash                  { &:before { content: "\e162"; } }
.glyphicon-log-out                { &:before { content: "\e163"; } }
.glyphicon-new-window             { &:before { content: "\e164"; } }
.glyphicon-record                 { &:before { content: "\e165"; } }
.glyphicon-save                   { &:before { content: "\e166"; } }
.glyphicon-open                   { &:before { content: "\e167"; } }
.glyphicon-saved                  { &:before { content: "\e168"; } }
.glyphicon-import                 { &:before { content: "\e169"; } }
.glyphicon-export                 { &:before { content: "\e170"; } }
.glyphicon-send                   { &:before { content: "\e171"; } }
.glyphicon-floppy-disk            { &:before { content: "\e172"; } }
.glyphicon-floppy-saved           { &:before { content: "\e173"; } }
.glyphicon-floppy-remove          { &:before { content: "\e174"; } }
.glyphicon-floppy-save            { &:before { content: "\e175"; } }
.glyphicon-floppy-open            { &:before { content: "\e176"; } }
.glyphicon-credit-card            { &:before { content: "\e177"; } }
.glyphicon-transfer               { &:before { content: "\e178"; } }
.glyphicon-cutlery                { &:before { content: "\e179"; } }
.glyphicon-header                 { &:before { content: "\e180"; } }
.glyphicon-compressed             { &:before { content: "\e181"; } }
.glyphicon-earphone               { &:before { content: "\e182"; } }
.glyphicon-phone-alt              { &:before { content: "\e183"; } }
.glyphicon-tower                  { &:before { content: "\e184"; } }
.glyphicon-stats                  { &:before { content: "\e185"; } }
.glyphicon-sd-video               { &:before { content: "\e186"; } }
.glyphicon-hd-video               { &:before { content: "\e187"; } }
.glyphicon-subtitles              { &:before { content: "\e188"; } }
.glyphicon-sound-stereo           { &:before { content: "\e189"; } }
.glyphicon-sound-dolby            { &:before { content: "\e190"; } }
.glyphicon-sound-5-1              { &:before { content: "\e191"; } }
.glyphicon-sound-6-1              { &:before { content: "\e192"; } }
.glyphicon-sound-7-1              { &:before { content: "\e193"; } }
.glyphicon-copyright-mark         { &:before { content: "\e194"; } }
.glyphicon-registration-mark      { &:before { content: "\e195"; } }
.glyphicon-cloud-download         { &:before { content: "\e197"; } }
.glyphicon-cloud-upload           { &:before { content: "\e198"; } }
.glyphicon-tree-conifer           { &:before { content: "\e199"; } }
.glyphicon-tree-deciduous         { &:before { content: "\e200"; } }
.glyphicon-cd                     { &:before { content: "\e201"; } }
.glyphicon-save-file              { &:before { content: "\e202"; } }
.glyphicon-open-file              { &:before { content: "\e203"; } }
.glyphicon-level-up               { &:before { content: "\e204"; } }
.glyphicon-copy                   { &:before { content: "\e205"; } }
.glyphicon-paste                  { &:before { content: "\e206"; } }
// The following 2 Glyphicons are omitted for the time being because
// they currently use Unicode codepoints that are outside the
// Basic Multilingual Plane (BMP). Older buggy versions of WebKit can't handle
// non-BMP codepoints in CSS string escapes, and thus can't display these two icons.
// Notably, the bug affects some older versions of the Android Browser.
// More info: https://github.com/twbs/bootstrap/issues/10106
// .glyphicon-door                   { &:before { content: "\1f6aa"; } }
// .glyphicon-key                    { &:before { content: "\1f511"; } }
.glyphicon-alert                  { &:before { content: "\e209"; } }
.glyphicon-equalizer              { &:before { content: "\e210"; } }
.glyphicon-king                   { &:before { content: "\e211"; } }
.glyphicon-queen                  { &:before { content: "\e212"; } }
.glyphicon-pawn                   { &:before { content: "\e213"; } }
.glyphicon-bishop                 { &:before { content: "\e214"; } }
.glyphicon-knight                 { &:before { content: "\e215"; } }
.glyphicon-baby-formula           { &:before { content: "\e216"; } }
.glyphicon-tent                   { &:before { content: "\26fa"; } }
.glyphicon-blackboard             { &:before { content: "\e218"; } }
.glyphicon-bed                    { &:before { content: "\e219"; } }
.glyphicon-apple                  { &:before { content: "\f8ff"; } }
.glyphicon-erase                  { &:before { content: "\e221"; } }
.glyphicon-hourglass              { &:before { content: "\231b"; } }
.glyphicon-lamp                   { &:before { content: "\e223"; } }
.glyphicon-duplicate              { &:before { content: "\e224"; } }
.glyphicon-piggy-bank             { &:before { content: "\e225"; } }
.glyphicon-scissors               { &:before { content: "\e226"; } }
.glyphicon-bitcoin                { &:before { content: "\e227"; } }
.glyphicon-btc                    { &:before { content: "\e227"; } }
.glyphicon-xbt                    { &:before { content: "\e227"; } }
.glyphicon-yen                    { &:before { content: "\00a5"; } }
.glyphicon-jpy                    { &:before { content: "\00a5"; } }
.glyphicon-ruble                  { &:before { content: "\20bd"; } }
.glyphicon-rub                    { &:before { content: "\20bd"; } }
.glyphicon-scale                  { &:before { content: "\e230"; } }
.glyphicon-ice-lolly              { &:before { content: "\e231"; } }
.glyphicon-ice-lolly-tasted       { &:before { content: "\e232"; } }
.glyphicon-education              { &:before { content: "\e233"; } }
.glyphicon-option-horizontal      { &:before { content: "\e234"; } }
.glyphicon-option-vertical        { &:before { content: "\e235"; } }
.glyphicon-menu-hamburger         { &:before { content: "\e236"; } }
.glyphicon-modal-window           { &:before { content: "\e237"; } }
.glyphicon-oil                    { &:before { content: "\e238"; } }
.glyphicon-grain                  { &:before { content: "\e239"; } }
.glyphicon-sunglasses             { &:before { content: "\e240"; } }
.glyphicon-text-size              { &:before { content: "\e241"; } }
.glyphicon-text-color             { &:before { content: "\e242"; } }
.glyphicon-text-background        { &:before { content: "\e243"; } }
.glyphicon-object-align-top       { &:before { content: "\e244"; } }
.glyphicon-object-align-bottom    { &:before { content: "\e245"; } }
.glyphicon-object-align-horizontal{ &:before { content: "\e246"; } }
.glyphicon-object-align-left      { &:before { content: "\e247"; } }
.glyphicon-object-align-vertical  { &:before { content: "\e248"; } }
.glyphicon-object-align-right     { &:before { content: "\e249"; } }
.glyphicon-triangle-right         { &:before { content: "\e250"; } }
.glyphicon-triangle-left          { &:before { content: "\e251"; } }
.glyphicon-triangle-bottom        { &:before { content: "\e252"; } }
.glyphicon-triangle-top           { &:before { content: "\e253"; } }
.glyphicon-console                { &:before { content: "\e254"; } }
.glyphicon-superscript            { &:before { content: "\e255"; } }
.glyphicon-subscript              { &:before { content: "\e256"; } }
.glyphicon-menu-left              { &:before { content: "\e257"; } }
.glyphicon-menu-right             { &:before { content: "\e258"; } }
.glyphicon-menu-down              { &:before { content: "\e259"; } }
.glyphicon-menu-up                { &:before { content: "\e260"; } }


// Core CSS
//
// Scaffolding
// --------------------------------------------------


// Reset the box-sizing
//
// Heads up! This reset may cause conflicts with some third-party widgets.
// For recommendations on resolving such conflicts, see
// https://getbootstrap.com/docs/3.4/getting-started/#third-box-sizing
* {
  @include box-sizing(border-box);
}
*:before,
*:after {
  @include box-sizing(border-box);
}


// Body reset

html {
  font-size: 10px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  font-family: $font-family-base;
  font-size: $font-size-base;
  line-height: $line-height-base;
  color: $text-color;
  background-color: $body-bg;
}

// Reset fonts for relevant elements
input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}


// Links

a {
  color: $link-color;
  text-decoration: none;

  &:hover,
  &:focus {
    color: $link-hover-color;
    text-decoration: $link-hover-decoration;
  }

  &:focus {
    @include tab-focus;
  }
}


// Figures
//
// We reset this here because previously Normalize had no `figure` margins. This
// ensures we don't break anyone's use of the element.

figure {
  margin: 0;
}


// Images

img {
  vertical-align: middle;
}

// Responsive images (ensure images don't scale beyond their parents)
.img-responsive {
  @include img-responsive;
}

// Rounded corners
.img-rounded {
  border-radius: $border-radius-large;
}

// Image thumbnails
//
// Heads up! This is mixin-ed into thumbnails.less for `.thumbnail`.
.img-thumbnail {
  padding: $thumbnail-padding;
  line-height: $line-height-base;
  background-color: $thumbnail-bg;
  border: 1px solid $thumbnail-border;
  border-radius: $thumbnail-border-radius;
  @include transition(all .2s ease-in-out);

  // Keep them at most 100% wide
  @include img-responsive(inline-block);
}

// Perfect circle
.img-circle {
  border-radius: 50%; // set radius in percents
}


// Horizontal rules

hr {
  margin-top: $line-height-computed;
  margin-bottom: $line-height-computed;
  border: 0;
  border-top: 1px solid $hr-border;
}


// Only display content to screen readers
//
// See: https://a11yproject.com/posts/how-to-hide-content

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

// Use in conjunction with .sr-only to only display content when it's focused.
// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
// Credit: HTML5 Boilerplate

.sr-only-focusable {
  &:active,
  &:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
  }
}


// iOS "clickable elements" fix for role="button"
//
// Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
// for traditionally non-focusable elements with role="button"
// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile

[role="button"] {
  cursor: pointer;
}

//
// Typography
// --------------------------------------------------


// Headings
// -------------------------

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: $headings-font-family;
  font-weight: $headings-font-weight;
  line-height: $headings-line-height;
  color: $headings-color;

  small,
  .small {
    font-weight: 400;
    line-height: 1;
    color: $headings-small-color;
  }
}

h1, .h1,
h2, .h2,
h3, .h3 {
  margin-top: $line-height-computed;
  margin-bottom: ($line-height-computed / 2);

  small,
  .small {
    font-size: 65%;
  }
}
h4, .h4,
h5, .h5,
h6, .h6 {
  margin-top: ($line-height-computed / 2);
  margin-bottom: ($line-height-computed / 2);

  small,
  .small {
    font-size: 75%;
  }
}

h1, .h1 { font-size: $font-size-h1; }
h2, .h2 { font-size: $font-size-h2; }
h3, .h3 { font-size: $font-size-h3; }
h4, .h4 { font-size: $font-size-h4; }
h5, .h5 { font-size: $font-size-h5; }
h6, .h6 { font-size: $font-size-h6; }


// Body text
// -------------------------

p {
  margin: 0 0 ($line-height-computed / 2);
}

.lead {
  margin-bottom: $line-height-computed;
  font-size: floor(($font-size-base * 1.15));
  font-weight: 300;
  line-height: 1.4;

  @media (min-width: $screen-sm-min) {
    font-size: ($font-size-base * 1.5);
  }
}


// Emphasis & misc
// -------------------------

// Ex: (12px small font / 14px base font) * 100% = about 85%
small,
.small {
  font-size: floor((100% * $font-size-small / $font-size-base));
}

mark,
.mark {
  padding: .2em;
  background-color: $state-warning-bg;
}

// Alignment
.text-left           { text-align: left; }
.text-right          { text-align: right; }
.text-center         { text-align: center; }
.text-justify        { text-align: justify; }
.text-nowrap         { white-space: nowrap; }

// Transformation
.text-lowercase      { text-transform: lowercase; }
.text-uppercase      { text-transform: uppercase; }
.text-capitalize     { text-transform: capitalize; }

// Contextual colors
.text-muted {
  color: $text-muted;
}

@include text-emphasis-variant('.text-primary', $brand-primary);

@include text-emphasis-variant('.text-success', $state-success-text);

@include text-emphasis-variant('.text-info', $state-info-text);

@include text-emphasis-variant('.text-warning', $state-warning-text);

@include text-emphasis-variant('.text-danger', $state-danger-text);

// Contextual backgrounds
// For now we'll leave these alongside the text classes until v4 when we can
// safely shift things around (per SemVer rules).
.bg-primary {
  // Given the contrast here, this is the only class to have its color inverted
  // automatically.
  color: #fff;
}
@include bg-variant('.bg-primary', $brand-primary);

@include bg-variant('.bg-success', $state-success-bg);

@include bg-variant('.bg-info', $state-info-bg);

@include bg-variant('.bg-warning', $state-warning-bg);

@include bg-variant('.bg-danger', $state-danger-bg);


// Page header
// -------------------------

.page-header {
  padding-bottom: (($line-height-computed / 2) - 1);
  margin: ($line-height-computed * 2) 0 $line-height-computed;
  border-bottom: 1px solid $page-header-border-color;
}


// Lists
// -------------------------

// Unordered and Ordered lists
ul,
ol {
  margin-top: 0;
  margin-bottom: ($line-height-computed / 2);
  ul,
  ol {
    margin-bottom: 0;
  }
}

// List options

// [converter] extracted from `.list-unstyled` for libsass compatibility
@mixin list-unstyled {
  padding-left: 0;
  list-style: none;
}
// [converter] extracted as `@mixin list-unstyled` for libsass compatibility
.list-unstyled {
  @include list-unstyled;
}


// Inline turns list items into inline-block
.list-inline {
  @include list-unstyled;
  margin-left: -5px;

  > li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
  }
}

// Description Lists
dl {
  margin-top: 0; // Remove browser default
  margin-bottom: $line-height-computed;
}
dt,
dd {
  line-height: $line-height-base;
}
dt {
  font-weight: 700;
}
dd {
  margin-left: 0; // Undo browser default
}

// Horizontal description lists
//
// Defaults to being stacked without any of the below styles applied, until the
// grid breakpoint is reached (default of ~768px).

.dl-horizontal {
  dd {
    @include clearfix; // Clear the floated `dt` if an empty `dd` is present
  }

  @media (min-width: $dl-horizontal-breakpoint) {
    dt {
      float: left;
      width: ($dl-horizontal-offset - 20);
      clear: left;
      text-align: right;
      @include text-overflow;
    }
    dd {
      margin-left: $dl-horizontal-offset;
    }
  }
}


// Misc
// -------------------------

// Abbreviations and acronyms
// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
abbr[title],
abbr[data-original-title] {
  cursor: help;
}

.initialism {
  font-size: 90%;
  @extend .text-uppercase;
}

// Blockquotes
blockquote {
  padding: ($line-height-computed / 2) $line-height-computed;
  margin: 0 0 $line-height-computed;
  font-size: $blockquote-font-size;
  border-left: 5px solid $blockquote-border-color;

  p,
  ul,
  ol {
    &:last-child {
      margin-bottom: 0;
    }
  }

  // Note: Deprecated small and .small as of v3.1.0
  // Context: https://github.com/twbs/bootstrap/issues/11660
  footer,
  small,
  .small {
    display: block;
    font-size: 80%; // back to default font-size
    line-height: $line-height-base;
    color: $blockquote-small-color;

    &:before {
      content: "\2014 \00A0"; // em dash, nbsp
    }
  }
}

// Opposite alignment of blockquote
//
// Heads up: `blockquote.pull-right` has been deprecated as of v3.1.0.
.blockquote-reverse,
blockquote.pull-right {
  padding-right: 15px;
  padding-left: 0;
  text-align: right;
  border-right: 5px solid $blockquote-border-color;
  border-left: 0;

  // Account for citation
  footer,
  small,
  .small {
    &:before { content: ""; }
    &:after {
      content: "\00A0 \2014"; // nbsp, em dash
    }
  }
}

// Addresses
address {
  margin-bottom: $line-height-computed;
  font-style: normal;
  line-height: $line-height-base;
}

//
// Code (inline and block)
// --------------------------------------------------


// Inline and block code styles
code,
kbd,
pre,
samp {
  font-family: $font-family-monospace;
}

// Inline code
code {
  padding: 2px 4px;
  font-size: 90%;
  color: $code-color;
  background-color: $code-bg;
  border-radius: $border-radius-base;
}

// User input typically entered via keyboard
kbd {
  padding: 2px 4px;
  font-size: 90%;
  color: $kbd-color;
  background-color: $kbd-bg;
  border-radius: $border-radius-small;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);

  kbd {
    padding: 0;
    font-size: 100%;
    font-weight: 700;
    box-shadow: none;
  }
}

// Blocks of code
pre {
  display: block;
  padding: (($line-height-computed - 1) / 2);
  margin: 0 0 ($line-height-computed / 2);
  font-size: ($font-size-base - 1); // 14px to 13px
  line-height: $line-height-base;
  color: $pre-color;
  word-break: break-all;
  word-wrap: break-word;
  background-color: $pre-bg;
  border: 1px solid $pre-border-color;
  border-radius: $border-radius-base;

  // Account for some code outputs that place code tags in pre tags
  code {
    padding: 0;
    font-size: inherit;
    color: inherit;
    white-space: pre-wrap;
    background-color: transparent;
    border-radius: 0;
  }
}

// Enable scrollable blocks of code
.pre-scrollable {
  max-height: $pre-scrollable-max-height;
  overflow-y: scroll;
}

//
// Grid system
// --------------------------------------------------


// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.

.container {
  @include container-fixed;

  @media (min-width: $screen-sm-min) {
    width: $container-sm;
  }
  @media (min-width: $screen-md-min) {
    width: $container-md;
  }
  @media (min-width: $screen-lg-min) {
    width: $container-lg;
  }
}


// Fluid container
//
// Utilizes the mixin meant for fixed width containers, but without any defined
// width for fluid, full width layouts.

.container-fluid {
  @include container-fixed;
}


// Row
//
// Rows contain and clear the floats of your columns.

.row {
  @include make-row;
}

.row-no-gutters {
  margin-right: 0;
  margin-left: 0;

  [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}


// Columns
//
// Common styles for small and large grid columns

@include make-grid-columns;


// Extra small grid
//
// Columns, offsets, pushes, and pulls for extra small devices like
// smartphones.

@include make-grid(xs);


// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.

@media (min-width: $screen-sm-min) {
  @include make-grid(sm);
}


// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.

@media (min-width: $screen-md-min) {
  @include make-grid(md);
}


// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.

@media (min-width: $screen-lg-min) {
  @include make-grid(lg);
}

//
// Tables
// --------------------------------------------------


table {
  background-color: $table-bg;

  // Table cell sizing
  //
  // Reset default table behavior

  col[class*="col-"] {
    position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623)
    display: table-column;
    float: none;
  }

  td,
  th {
    &[class*="col-"] {
      position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623)
      display: table-cell;
      float: none;
    }
  }
}

caption {
  padding-top: $table-cell-padding;
  padding-bottom: $table-cell-padding;
  color: $text-muted;
  text-align: left;
}

th {
  text-align: left;
}


// Baseline styles

.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: $line-height-computed;
  // Cells
  > thead,
  > tbody,
  > tfoot {
    > tr {
      > th,
      > td {
        padding: $table-cell-padding;
        line-height: $line-height-base;
        vertical-align: top;
        border-top: 1px solid $table-border-color;
      }
    }
  }
  // Bottom align for column headings
  > thead > tr > th {
    vertical-align: bottom;
    border-bottom: 2px solid $table-border-color;
  }
  // Remove top border from thead by default
  > caption + thead,
  > colgroup + thead,
  > thead:first-child {
    > tr:first-child {
      > th,
      > td {
        border-top: 0;
      }
    }
  }
  // Account for multiple tbody instances
  > tbody + tbody {
    border-top: 2px solid $table-border-color;
  }

  // Nesting
  .table {
    background-color: $body-bg;
  }
}


// Condensed table w/ half padding

.table-condensed {
  > thead,
  > tbody,
  > tfoot {
    > tr {
      > th,
      > td {
        padding: $table-condensed-cell-padding;
      }
    }
  }
}


// Bordered version
//
// Add borders all around the table and between all the columns.

.table-bordered {
  border: 1px solid $table-border-color;
  > thead,
  > tbody,
  > tfoot {
    > tr {
      > th,
      > td {
        border: 1px solid $table-border-color;
      }
    }
  }
  > thead > tr {
    > th,
    > td {
      border-bottom-width: 2px;
    }
  }
}


// Zebra-striping
//
// Default zebra-stripe styles (alternating gray and transparent backgrounds)

.table-striped {
  > tbody > tr:nth-of-type(odd) {
    background-color: $table-bg-accent;
  }
}


// Hover effect
//
// Placed here since it has to come after the potential zebra striping

.table-hover {
  > tbody > tr:hover {
    background-color: $table-bg-hover;
  }
}


// Table backgrounds
//
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.

// Generate the contextual variants
@include table-row-variant('active', $table-bg-active);
@include table-row-variant('success', $state-success-bg);
@include table-row-variant('info', $state-info-bg);
@include table-row-variant('warning', $state-warning-bg);
@include table-row-variant('danger', $state-danger-bg);


// Responsive tables
//
// Wrap your tables in `.table-responsive` and we'll make them mobile friendly
// by enabling horizontal scrolling. Only applies <768px. Everything above that
// will display normally.

.table-responsive {
  min-height: .01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
  overflow-x: auto;

  @media screen and (max-width: $screen-xs-max) {
    width: 100%;
    margin-bottom: ($line-height-computed * .75);
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid $table-border-color;

    // Tighten up spacing
    > .table {
      margin-bottom: 0;

      // Ensure the content doesn't wrap
      > thead,
      > tbody,
      > tfoot {
        > tr {
          > th,
          > td {
            white-space: nowrap;
          }
        }
      }
    }

    // Special overrides for the bordered tables
    > .table-bordered {
      border: 0;

      // Nuke the appropriate borders so that the parent can handle them
      > thead,
      > tbody,
      > tfoot {
        > tr {
          > th:first-child,
          > td:first-child {
            border-left: 0;
          }
          > th:last-child,
          > td:last-child {
            border-right: 0;
          }
        }
      }

      // Only nuke the last row's bottom-border in `tbody` and `tfoot` since
      // chances are there will be only one `tr` in a `thead` and that would
      // remove the border altogether.
      > tbody,
      > tfoot {
        > tr:last-child {
          > th,
          > td {
            border-bottom: 0;
          }
        }
      }

    }
  }
}

//
// Forms
// --------------------------------------------------


// Normalize non-controls
//
// Restyle and baseline non-control form elements.

fieldset {
  // Chrome and Firefox set a `min-width: min-content;` on fieldsets,
  // so we reset that to ensure it behaves more like a standard block element.
  // See https://github.com/twbs/bootstrap/issues/12359.
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: $line-height-computed;
  font-size: ($font-size-base * 1.5);
  line-height: inherit;
  color: $legend-color;
  border: 0;
  border-bottom: 1px solid $legend-border-color;
}

label {
  display: inline-block;
  max-width: 100%; // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141)
  margin-bottom: 5px;
  font-weight: 700;
}


// Normalize form controls
//
// While most of our form styles require extra classes, some basic normalization
// is required to ensure optimum display with or without those classes to better
// address browser inconsistencies.

input[type="search"] {
  // Override content-box in Normalize (* isn't specific enough)
  @include box-sizing(border-box);

  // Search inputs in iOS
  //
  // This overrides the extra rounded corners on search inputs in iOS so that our
  // `.form-control` class can properly style them. Note that this cannot simply
  // be added to `.form-control` as it's not specific enough. For details, see
  // https://github.com/twbs/bootstrap/issues/11586.
  -webkit-appearance: none;
  appearance: none;
}

// Position radios and checkboxes better
input[type="radio"],
input[type="checkbox"] {
  margin: 4px 0 0;
  margin-top: 1px \9; // IE8-9
  line-height: normal;

  // Apply same disabled cursor tweak as for inputs
  // Some special care is needed because <label>s don't inherit their parent's `cursor`.
  //
  // Note: Neither radios nor checkboxes can be readonly.
  &[disabled],
  &.disabled,
  fieldset[disabled] & {
    cursor: $cursor-disabled;
  }
}

input[type="file"] {
  display: block;
}

// Make range inputs behave like textual form controls
input[type="range"] {
  display: block;
  width: 100%;
}

// Make multiple select elements height not fixed
select[multiple],
select[size] {
  height: auto;
}

// Focus for file, radio, and checkbox
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  @include tab-focus;
}

// Adjust output element
output {
  display: block;
  padding-top: ($padding-base-vertical + 1);
  font-size: $font-size-base;
  line-height: $line-height-base;
  color: $input-color;
}


// Common form controls
//
// Shared size and type resets for form controls. Apply `.form-control` to any
// of the following form controls:
//
// select
// textarea
// input[type="text"]
// input[type="password"]
// input[type="datetime"]
// input[type="datetime-local"]
// input[type="date"]
// input[type="month"]
// input[type="time"]
// input[type="week"]
// input[type="number"]
// input[type="email"]
// input[type="url"]
// input[type="search"]
// input[type="tel"]
// input[type="color"]

.form-control {
  display: block;
  width: 100%;
  height: $input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
  padding: $padding-base-vertical $padding-base-horizontal;
  font-size: $font-size-base;
  line-height: $line-height-base;
  color: $input-color;
  background-color: $input-bg;
  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
  border: 1px solid $input-border;
  border-radius: $input-border-radius; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS.
  @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075));
  @include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);

  // Customize the `:focus` state to imitate native WebKit styles.
  @include form-control-focus;

  // Placeholder
  @include placeholder;

  // Unstyle the caret on `<select>`s in IE10+.
  &::-ms-expand {
    background-color: transparent;
    border: 0;
  }

  // Disabled and read-only inputs
  //
  // HTML5 says that controls under a fieldset > legend:first-child won't be
  // disabled if the fieldset is disabled. Due to implementation difficulty, we
  // don't honor that edge case; we style them as disabled anyway.
  &[disabled],
  &[readonly],
  fieldset[disabled] & {
    background-color: $input-bg-disabled;
    opacity: 1; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655
  }

  &[disabled],
  fieldset[disabled] & {
    cursor: $cursor-disabled;
  }

  // [converter] extracted textarea& to textarea.form-control
}

// Reset height for `textarea`s
textarea.form-control {
  height: auto;
}


// Special styles for iOS temporal inputs
//
// In Mobile Safari, setting `display: block` on temporal inputs causes the
// text within the input to become vertically misaligned. As a workaround, we
// set a pixel line-height that matches the given height of the input, but only
// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
//
// Note that as of 9.3, iOS doesn't support `week`.

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"] {
    &.form-control {
      line-height: $input-height-base;
    }

    &.input-sm,
    .input-group-sm & {
      line-height: $input-height-small;
    }

    &.input-lg,
    .input-group-lg & {
      line-height: $input-height-large;
    }
  }
}


// Form groups
//
// Designed to help with the organization and spacing of vertical forms. For
// horizontal forms, use the predefined grid classes.

.form-group {
  margin-bottom: $form-group-margin-bottom;
}


// Checkboxes and radios
//
// Indent the labels to position radios/checkboxes as hanging controls.

.radio,
.checkbox {
  position: relative;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;

  // These are used on elements with <label> descendants
  &.disabled,
  fieldset[disabled] & {
    label {
      cursor: $cursor-disabled;
    }
  }

  label {
    min-height: $line-height-computed; // Ensure the input doesn't jump when there is no text
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer;
  }
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
  position: absolute;
  margin-top: 4px \9;
  margin-left: -20px;
}

.radio + .radio,
.checkbox + .checkbox {
  margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
}

// Radios and checkboxes on same line
.radio-inline,
.checkbox-inline {
  position: relative;
  display: inline-block;
  padding-left: 20px;
  margin-bottom: 0;
  font-weight: 400;
  vertical-align: middle;
  cursor: pointer;

  // These are used directly on <label>s
  &.disabled,
  fieldset[disabled] & {
    cursor: $cursor-disabled;
  }
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
  margin-top: 0;
  margin-left: 10px; // space out consecutive inline controls
}


// Static form control text
//
// Apply class to a `p` element to make any string of text align with labels in
// a horizontal form layout.

.form-control-static {
  min-height: ($line-height-computed + $font-size-base);
  // Size it appropriately next to real form controls
  padding-top: ($padding-base-vertical + 1);
  padding-bottom: ($padding-base-vertical + 1);
  // Remove default margin from `p`
  margin-bottom: 0;

  &.input-lg,
  &.input-sm {
    padding-right: 0;
    padding-left: 0;
  }
}


// Form control sizing
//
// Build on `.form-control` with modifier classes to decrease or increase the
// height and font-size of form controls.
//
// The `.form-group-* form-control` variations are sadly duplicated to avoid the
// issue documented in https://github.com/twbs/bootstrap/issues/15074.

@include input-size('.input-sm', $input-height-small, $padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $input-border-radius-small);
.form-group-sm {
  .form-control {
    height: $input-height-small;
    padding: $padding-small-vertical $padding-small-horizontal;
    font-size: $font-size-small;
    line-height: $line-height-small;
    border-radius: $input-border-radius-small;
  }
  select.form-control {
    height: $input-height-small;
    line-height: $input-height-small;
  }
  textarea.form-control,
  select[multiple].form-control {
    height: auto;
  }
  .form-control-static {
    height: $input-height-small;
    min-height: ($line-height-computed + $font-size-small);
    padding: ($padding-small-vertical + 1) $padding-small-horizontal;
    font-size: $font-size-small;
    line-height: $line-height-small;
  }
}

@include input-size('.input-lg', $input-height-large, $padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $input-border-radius-large);
.form-group-lg {
  .form-control {
    height: $input-height-large;
    padding: $padding-large-vertical $padding-large-horizontal;
    font-size: $font-size-large;
    line-height: $line-height-large;
    border-radius: $input-border-radius-large;
  }
  select.form-control {
    height: $input-height-large;
    line-height: $input-height-large;
  }
  textarea.form-control,
  select[multiple].form-control {
    height: auto;
  }
  .form-control-static {
    height: $input-height-large;
    min-height: ($line-height-computed + $font-size-large);
    padding: ($padding-large-vertical + 1) $padding-large-horizontal;
    font-size: $font-size-large;
    line-height: $line-height-large;
  }
}


// Form control feedback states
//
// Apply contextual and semantic states to individual form controls.

.has-feedback {
  // Enable absolute positioning
  position: relative;

  // Ensure icons don't overlap text
  .form-control {
    padding-right: ($input-height-base * 1.25);
  }
}
// Feedback icon (requires .glyphicon classes)
.form-control-feedback {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2; // Ensure icon is above input groups
  display: block;
  width: $input-height-base;
  height: $input-height-base;
  line-height: $input-height-base;
  text-align: center;
  pointer-events: none;
}
.input-lg + .form-control-feedback,
.input-group-lg + .form-control-feedback,
.form-group-lg .form-control + .form-control-feedback {
  width: $input-height-large;
  height: $input-height-large;
  line-height: $input-height-large;
}
.input-sm + .form-control-feedback,
.input-group-sm + .form-control-feedback,
.form-group-sm .form-control + .form-control-feedback {
  width: $input-height-small;
  height: $input-height-small;
  line-height: $input-height-small;
}

// Feedback states
.has-success {
  @include form-control-validation($state-success-text, $state-success-text, $state-success-bg);
}
.has-warning {
  @include form-control-validation($state-warning-text, $state-warning-text, $state-warning-bg);
}
.has-error {
  @include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg);
}

// Reposition feedback icon if input has visible label above
.has-feedback label {

  & ~ .form-control-feedback {
    top: ($line-height-computed + 5); // Height of the `label` and its margin
  }
  &.sr-only ~ .form-control-feedback {
    top: 0;
  }
}


// Help text
//
// Apply to any element you wish to create light text for placement immediately
// below a form control. Use for general help, formatting, or instructional text.

.help-block {
  display: block; // account for any element using help-block
  margin-top: 5px;
  margin-bottom: 10px;
  color: lighten($text-color, 25%); // lighten the text some for contrast
}


// Inline forms
//
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
// forms begin stacked on extra small (mobile) devices and then go inline when
// viewports reach <768px.
//
// Requires wrapping inputs and labels with `.form-group` for proper display of
// default HTML form controls and our custom form controls (e.g., input groups).
//
// Heads up! This is mixin-ed into `.navbar-form` in navbars.less.

// [converter] extracted from `.form-inline` for libsass compatibility
@mixin form-inline {

  // Kick in the inline
  @media (min-width: $screen-sm-min) {
    // Inline-block all the things for "inline"
    .form-group {
      display: inline-block;
      margin-bottom: 0;
      vertical-align: middle;
    }

    // In navbar-form, allow folks to *not* use `.form-group`
    .form-control {
      display: inline-block;
      width: auto; // Prevent labels from stacking above inputs in `.form-group`
      vertical-align: middle;
    }

    // Make static controls behave like regular ones
    .form-control-static {
      display: inline-block;
    }

    .input-group {
      display: inline-table;
      vertical-align: middle;

      .input-group-addon,
      .input-group-btn,
      .form-control {
        width: auto;
      }
    }

    // Input groups need that 100% width though
    .input-group > .form-control {
      width: 100%;
    }

    .control-label {
      margin-bottom: 0;
      vertical-align: middle;
    }

    // Remove default margin on radios/checkboxes that were used for stacking, and
    // then undo the floating of radios and checkboxes to match.
    .radio,
    .checkbox {
      display: inline-block;
      margin-top: 0;
      margin-bottom: 0;
      vertical-align: middle;

      label {
        padding-left: 0;
      }
    }
    .radio input[type="radio"],
    .checkbox input[type="checkbox"] {
      position: relative;
      margin-left: 0;
    }

    // Re-override the feedback icon.
    .has-feedback .form-control-feedback {
      top: 0;
    }
  }
}
// [converter] extracted as `@mixin form-inline` for libsass compatibility
.form-inline {
  @include form-inline;
}



// Horizontal forms
//
// Horizontal forms are built on grid classes and allow you to create forms with
// labels on the left and inputs on the right.

.form-horizontal {

  // Consistent vertical alignment of radios and checkboxes
  //
  // Labels also get some reset styles, but that is scoped to a media query below.
  .radio,
  .checkbox,
  .radio-inline,
  .checkbox-inline {
    padding-top: ($padding-base-vertical + 1); // Default padding plus a border
    margin-top: 0;
    margin-bottom: 0;
  }
  // Account for padding we're adding to ensure the alignment and of help text
  // and other content below items
  .radio,
  .checkbox {
    min-height: ($line-height-computed + ($padding-base-vertical + 1));
  }

  // Make form groups behave like rows
  .form-group {
    @include make-row;
  }

  // Reset spacing and right align labels, but scope to media queries so that
  // labels on narrow viewports stack the same as a default form example.
  @media (min-width: $screen-sm-min) {
    .control-label {
      padding-top: ($padding-base-vertical + 1); // Default padding plus a border
      margin-bottom: 0;
      text-align: right;
    }
  }

  // Validation states
  //
  // Reposition the icon because it's now within a grid column and columns have
  // `position: relative;` on them. Also accounts for the grid gutter padding.
  .has-feedback .form-control-feedback {
    right: floor(($grid-gutter-width / 2));
  }

  // Form group sizes
  //
  // Quick utility class for applying `.input-lg` and `.input-sm` styles to the
  // inputs and labels within a `.form-group`.
  .form-group-lg {
    @media (min-width: $screen-sm-min) {
      .control-label {
        padding-top: ($padding-large-vertical + 1);
        font-size: $font-size-large;
      }
    }
  }
  .form-group-sm {
    @media (min-width: $screen-sm-min) {
      .control-label {
        padding-top: ($padding-small-vertical + 1);
        font-size: $font-size-small;
      }
    }
  }
}

//
// Buttons
// --------------------------------------------------


// Base styles
// --------------------------------------------------

.btn {
  display: inline-block;
  margin-bottom: 0; // For input.btn
  font-weight: $btn-font-weight;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
  border: 1px solid transparent;
  @include button-size($padding-base-vertical, $padding-base-horizontal, $font-size-base, $line-height-base, $btn-border-radius-base);
  @include user-select(none);

  &,
  &:active,
  &.active {
    &:focus,
    &.focus {
      @include tab-focus;
    }
  }

  &:hover,
  &:focus,
  &.focus {
    color: $btn-default-color;
    text-decoration: none;
  }

  &:active,
  &.active {
    background-image: none;
    outline: 0;
    @include box-shadow(inset 0 3px 5px rgba(0, 0, 0, .125));
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    cursor: $cursor-disabled;
    @include opacity(.65);
    @include box-shadow(none);
  }

  // [converter] extracted a& to a.btn
}

a.btn {
  &.disabled,
  fieldset[disabled] & {
    pointer-events: none; // Future-proof disabling of clicks on `<a>` elements
  }
}


// Alternate buttons
// --------------------------------------------------

.btn-default {
  @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
}
.btn-primary {
  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
}
// Success appears as green
.btn-success {
  @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
}
// Info appears as blue-green
.btn-info {
  @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
}
// Warning appears as orange
.btn-warning {
  @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
}
// Danger and error appear as red
.btn-danger {
  @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
}


// Link buttons
// -------------------------

// Make a button look and behave like a link
.btn-link {
  font-weight: 400;
  color: $link-color;
  border-radius: 0;

  &,
  &:active,
  &.active,
  &[disabled],
  fieldset[disabled] & {
    background-color: transparent;
    @include box-shadow(none);
  }
  &,
  &:hover,
  &:focus,
  &:active {
    border-color: transparent;
  }
  &:hover,
  &:focus {
    color: $link-hover-color;
    text-decoration: $link-hover-decoration;
    background-color: transparent;
  }
  &[disabled],
  fieldset[disabled] & {
    &:hover,
    &:focus {
      color: $btn-link-disabled-color;
      text-decoration: none;
    }
  }
}


// Button Sizes
// --------------------------------------------------

.btn-lg {
  // line-height: ensure even-numbered height of button next to large input
  @include button-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $btn-border-radius-large);
}
.btn-sm {
  // line-height: ensure proper height of button next to small input
  @include button-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $btn-border-radius-small);
}
.btn-xs {
  @include button-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-small, $line-height-small, $btn-border-radius-small);
}


// Block button
// --------------------------------------------------

.btn-block {
  display: block;
  width: 100%;
}

// Vertically space out multiple block buttons
.btn-block + .btn-block {
  margin-top: 5px;
}

// Specificity overrides
input[type="submit"],
input[type="reset"],
input[type="button"] {
  &.btn-block {
    width: 100%;
  }
}


// Components
//
// Component animations
// --------------------------------------------------

// Heads up!
//
// We don't use the `.opacity()` mixin here since it causes a bug with text
// fields in IE7-8. Source: https://github.com/twbs/bootstrap/pull/3552.

.fade {
  opacity: 0;
  @include transition(opacity .15s linear);

  &.in {
    opacity: 1;
  }
}

.collapse {
  display: none;

  &.in      { display: block; }
  // [converter] extracted tr&.in to tr.collapse.in
  // [converter] extracted tbody&.in to tbody.collapse.in
}

tr.collapse.in    { display: table-row; }

tbody.collapse.in { display: table-row-group; }

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  @include transition-property(height, visibility);
  @include transition-duration(.35s);
  @include transition-timing-function(ease);
}

//
// Dropdown menus
// --------------------------------------------------


// Dropdown arrow/caret
.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: $caret-width-base dashed;
  border-top: $caret-width-base solid \9; // IE8
  border-right: $caret-width-base solid transparent;
  border-left: $caret-width-base solid transparent;
}

// The dropdown wrapper (div)
.dropup,
.dropdown {
  position: relative;
}

// Prevent the focus on the dropdown toggle when closing dropdowns
.dropdown-toggle:focus {
  outline: 0;
}

// The dropdown menu (ul)
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: $zindex-dropdown;
  display: none; // none by default, but block on "open" of the menu
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0; // override default ul
  font-size: $font-size-base;
  text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
  list-style: none;
  background-color: $dropdown-bg;
  background-clip: padding-box;
  border: 1px solid $dropdown-fallback-border; // IE8 fallback
  border: 1px solid $dropdown-border;
  border-radius: $border-radius-base;
  @include box-shadow(0 6px 12px rgba(0, 0, 0, .175));

  // Aligns the dropdown menu to right
  //
  // Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]`
  &.pull-right {
    right: 0;
    left: auto;
  }

  // Dividers (basically an hr) within the dropdown
  .divider {
    @include nav-divider($dropdown-divider-bg);
  }

  // Links within the dropdown menu
  > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: $line-height-base;
    color: $dropdown-link-color;
    white-space: nowrap; // prevent links from randomly breaking onto new lines

    &:hover,
    &:focus {
      color: $dropdown-link-hover-color;
      text-decoration: none;
      background-color: $dropdown-link-hover-bg;
    }
  }
}

// Active state
.dropdown-menu > .active > a {
  &,
  &:hover,
  &:focus {
    color: $dropdown-link-active-color;
    text-decoration: none;
    background-color: $dropdown-link-active-bg;
    outline: 0;
  }
}

// Disabled state
//
// Gray out text and ensure the hover/focus state remains gray

.dropdown-menu > .disabled > a {
  &,
  &:hover,
  &:focus {
    color: $dropdown-link-disabled-color;
  }

  // Nuke hover/focus effects
  &:hover,
  &:focus {
    text-decoration: none;
    cursor: $cursor-disabled;
    background-color: transparent;
    background-image: none; // Remove CSS gradient
    @include reset-filter;
  }
}

// Open state for the dropdown
.open {
  // Show the menu
  > .dropdown-menu {
    display: block;
  }

  // Remove the outline when :focus is triggered
  > a {
    outline: 0;
  }
}

// Menu positioning
//
// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
// menu with the parent.
.dropdown-menu-right {
  right: 0;
  left: auto; // Reset the default from `.dropdown-menu`
}
// With v3, we enabled auto-flipping if you have a dropdown within a right
// aligned nav component. To enable the undoing of that, we provide an override
// to restore the default dropdown menu alignment.
//
// This is only for left-aligning a dropdown menu within a `.navbar-right` or
// `.pull-right` nav component.
.dropdown-menu-left {
  right: auto;
  left: 0;
}

// Dropdown section headers
.dropdown-header {
  display: block;
  padding: 3px 20px;
  font-size: $font-size-small;
  line-height: $line-height-base;
  color: $dropdown-header-color;
  white-space: nowrap; // as with > li > a
}

// Backdrop to catch body clicks on mobile, etc.
.dropdown-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: ($zindex-dropdown - 10);
}

// Right aligned dropdowns
.pull-right > .dropdown-menu {
  right: 0;
  left: auto;
}

// Allow for dropdowns to go bottom up (aka, dropup-menu)
//
// Just add .dropup after the standard .dropdown class and you're set, bro.
// TODO: abstract this so that the navbar fixed styles are not placed here?

.dropup,
.navbar-fixed-bottom .dropdown {
  // Reverse the caret
  .caret {
    content: "";
    border-top: 0;
    border-bottom: $caret-width-base dashed;
    border-bottom: $caret-width-base solid \9; // IE8
  }
  // Different positioning for bottom up menu
  .dropdown-menu {
    top: auto;
    bottom: 100%;
    margin-bottom: 2px;
  }
}


// Component alignment
//
// Reiterate per navbar.less and the modified component alignment there.

@media (min-width: $grid-float-breakpoint) {
  .navbar-right {
    .dropdown-menu {
      right: 0; left: auto;
    }
    // Necessary for overrides of the default right aligned menu.
    // Will remove come v4 in all likelihood.
    .dropdown-menu-left {
      left: 0; right: auto;
    }
  }
}

//
// Button groups
// --------------------------------------------------

// Make the div behave like a button
.btn-group,
.btn-group-vertical {
  position: relative;
  display: inline-block;
  vertical-align: middle; // match .btn alignment given font-size hack above
  > .btn {
    position: relative;
    float: left;
    // Bring the "active" button to the front
    &:hover,
    &:focus,
    &:active,
    &.active {
      z-index: 2;
    }
  }
}

// Prevent double borders when buttons are next to each other
.btn-group {
  .btn + .btn,
  .btn + .btn-group,
  .btn-group + .btn,
  .btn-group + .btn-group {
    margin-left: -1px;
  }
}

// Optional: Group multiple button groups together for a toolbar
.btn-toolbar {
  margin-left: -5px; // Offset the first child's margin
  @include clearfix;

  .btn,
  .btn-group,
  .input-group {
    float: left;
  }
  > .btn,
  > .btn-group,
  > .input-group {
    margin-left: 5px;
  }
}

.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
  border-radius: 0;
}

// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
.btn-group > .btn:first-child {
  margin-left: 0;
  &:not(:last-child):not(.dropdown-toggle) {
    @include border-right-radius(0);
  }
}
// Need .dropdown-toggle since :last-child doesn't apply, given that a .dropdown-menu is used immediately after it
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
  @include border-left-radius(0);
}

// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
.btn-group > .btn-group {
  float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
  border-radius: 0;
}
.btn-group > .btn-group:first-child:not(:last-child) {
  > .btn:last-child,
  > .dropdown-toggle {
    @include border-right-radius(0);
  }
}
.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
  @include border-left-radius(0);
}

// On active and open, don't show outline
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
  outline: 0;
}


// Sizing
//
// Remix the default button sizing classes into new ones for easier manipulation.

.btn-group-xs > .btn { @extend .btn-xs; }
.btn-group-sm > .btn { @extend .btn-sm; }
.btn-group-lg > .btn { @extend .btn-lg; }


// Split button dropdowns
// ----------------------

// Give the line between buttons some depth
.btn-group > .btn + .dropdown-toggle {
  padding-right: 8px;
  padding-left: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle {
  padding-right: 12px;
  padding-left: 12px;
}

// The clickable button for toggling the menu
// Remove the gradient and set the same inset shadow as the :active state
.btn-group.open .dropdown-toggle {
  @include box-shadow(inset 0 3px 5px rgba(0, 0, 0, .125));

  // Show no shadow for `.btn-link` since it has no other button styles.
  &.btn-link {
    @include box-shadow(none);
  }
}


// Reposition the caret
.btn .caret {
  margin-left: 0;
}
// Carets in other button sizes
.btn-lg .caret {
  border-width: $caret-width-large $caret-width-large 0;
  border-bottom-width: 0;
}
// Upside down carets for .dropup
.dropup .btn-lg .caret {
  border-width: 0 $caret-width-large $caret-width-large;
}


// Vertical button groups
// ----------------------

.btn-group-vertical {
  > .btn,
  > .btn-group,
  > .btn-group > .btn {
    display: block;
    float: none;
    width: 100%;
    max-width: 100%;
  }

  // Clear floats so dropdown menus can be properly placed
  > .btn-group {
    @include clearfix;
    > .btn {
      float: none;
    }
  }

  > .btn + .btn,
  > .btn + .btn-group,
  > .btn-group + .btn,
  > .btn-group + .btn-group {
    margin-top: -1px;
    margin-left: 0;
  }
}

.btn-group-vertical > .btn {
  &:not(:first-child):not(:last-child) {
    border-radius: 0;
  }
  &:first-child:not(:last-child) {
    @include border-top-radius($btn-border-radius-base);
    @include border-bottom-radius(0);
  }
  &:last-child:not(:first-child) {
    @include border-top-radius(0);
    @include border-bottom-radius($btn-border-radius-base);
  }
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
  border-radius: 0;
}
.btn-group-vertical > .btn-group:first-child:not(:last-child) {
  > .btn:last-child,
  > .dropdown-toggle {
    @include border-bottom-radius(0);
  }
}
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
  @include border-top-radius(0);
}


// Justified button groups
// ----------------------

.btn-group-justified {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  > .btn,
  > .btn-group {
    display: table-cell;
    float: none;
    width: 1%;
  }
  > .btn-group .btn {
    width: 100%;
  }

  > .btn-group .dropdown-menu {
    left: auto;
  }
}


// Checkbox and radio options
//
// In order to support the browser's form validation feedback, powered by the
// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
// `display: none;` or `visibility: hidden;` as that also hides the popover.
// Simply visually hiding the inputs via `opacity` would leave them clickable in
// certain cases which is prevented by using `clip` and `pointer-events`.
// This way, we ensure a DOM element is visible to position the popover from.
//
// See https://github.com/twbs/bootstrap/pull/12794 and
// https://github.com/twbs/bootstrap/pull/14559 for more information.

[data-toggle="buttons"] {
  > .btn,
  > .btn-group > .btn {
    input[type="radio"],
    input[type="checkbox"] {
      position: absolute;
      clip: rect(0, 0, 0, 0);
      pointer-events: none;
    }
  }
}

//
// Input groups
// --------------------------------------------------

// Base styles
// -------------------------
.input-group {
  position: relative; // For dropdowns
  display: table;
  border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table

  // Undo padding and float of grid classes
  &[class*="col-"] {
    float: none;
    padding-right: 0;
    padding-left: 0;
  }

  .form-control {
    // Ensure that the input is always above the *appended* addon button for
    // proper border colors.
    position: relative;
    z-index: 2;

    // IE9 fubars the placeholder attribute in text inputs and the arrows on
    // select elements in input groups. To fix it, we float the input. Details:
    // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
    float: left;

    width: 100%;
    margin-bottom: 0;

    &:focus {
      z-index: 3;
    }
  }
}

// Sizing options
//
// Remix the default form control sizing classes into new ones for easier
// manipulation.

.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
  @extend .input-lg;
}
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn {
  @extend .input-sm;
}


// Display as table-cell
// -------------------------
.input-group-addon,
.input-group-btn,
.input-group .form-control {
  display: table-cell;

  &:not(:first-child):not(:last-child) {
    border-radius: 0;
  }
}
// Addon and addon wrapper for buttons
.input-group-addon,
.input-group-btn {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle; // Match the inputs
}

// Text input groups
// -------------------------
.input-group-addon {
  padding: $padding-base-vertical $padding-base-horizontal;
  font-size: $font-size-base;
  font-weight: 400;
  line-height: 1;
  color: $input-color;
  text-align: center;
  background-color: $input-group-addon-bg;
  border: 1px solid $input-group-addon-border-color;
  border-radius: $input-border-radius;

  // Sizing
  &.input-sm {
    padding: $padding-small-vertical $padding-small-horizontal;
    font-size: $font-size-small;
    border-radius: $input-border-radius-small;
  }
  &.input-lg {
    padding: $padding-large-vertical $padding-large-horizontal;
    font-size: $font-size-large;
    border-radius: $input-border-radius-large;
  }

  // Nuke default margins from checkboxes and radios to vertically center within.
  input[type="radio"],
  input[type="checkbox"] {
    margin-top: 0;
  }
}

// Reset rounded corners
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
  @include border-right-radius(0);
}
.input-group-addon:first-child {
  border-right: 0;
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child),
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
  @include border-left-radius(0);
}
.input-group-addon:last-child {
  border-left: 0;
}

// Button input groups
// -------------------------
.input-group-btn {
  position: relative;
  // Jankily prevent input button groups from wrapping with `white-space` and
  // `font-size` in combination with `inline-block` on buttons.
  font-size: 0;
  white-space: nowrap;

  // Negative margin for spacing, position for bringing hovered/focused/actived
  // element above the siblings.
  > .btn {
    position: relative;
    + .btn {
      margin-left: -1px;
    }
    // Bring the "active" button to the front
    &:hover,
    &:focus,
    &:active {
      z-index: 2;
    }
  }

  // Negative margin to only have a 1px border between the two
  &:first-child {
    > .btn,
    > .btn-group {
      margin-right: -1px;
    }
  }
  &:last-child {
    > .btn,
    > .btn-group {
      z-index: 2;
      margin-left: -1px;
    }
  }
}

//
// Navs
// --------------------------------------------------


// Base class
// --------------------------------------------------

.nav {
  padding-left: 0; // Override default ul/ol
  margin-bottom: 0;
  list-style: none;
  @include clearfix;

  > li {
    position: relative;
    display: block;

    > a {
      position: relative;
      display: block;
      padding: $nav-link-padding;
      &:hover,
      &:focus {
        text-decoration: none;
        background-color: $nav-link-hover-bg;
      }
    }

    // Disabled state sets text to gray and nukes hover/tab effects
    &.disabled > a {
      color: $nav-disabled-link-color;

      &:hover,
      &:focus {
        color: $nav-disabled-link-hover-color;
        text-decoration: none;
        cursor: $cursor-disabled;
        background-color: transparent;
      }
    }
  }

  // Open dropdowns
  .open > a {
    &,
    &:hover,
    &:focus {
      background-color: $nav-link-hover-bg;
      border-color: $link-color;
    }
  }

  // Nav dividers (deprecated with v3.0.1)
  //
  // This should have been removed in v3 with the dropping of `.nav-list`, but
  // we missed it. We don't currently support this anywhere, but in the interest
  // of maintaining backward compatibility in case you use it, it's deprecated.
  .nav-divider {
    @include nav-divider;
  }

  // Prevent IE8 from misplacing imgs
  //
  // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
  > li > a > img {
    max-width: none;
  }
}


// Tabs
// -------------------------

// Give the tabs something to sit on
.nav-tabs {
  border-bottom: 1px solid $nav-tabs-border-color;
  > li {
    float: left;
    // Make the list-items overlay the bottom border
    margin-bottom: -1px;

    // Actual tabs (as links)
    > a {
      margin-right: 2px;
      line-height: $line-height-base;
      border: 1px solid transparent;
      border-radius: $border-radius-base $border-radius-base 0 0;
      &:hover {
        border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
      }
    }

    // Active state, and its :hover to override normal :hover
    &.active > a {
      &,
      &:hover,
      &:focus {
        color: $nav-tabs-active-link-hover-color;
        cursor: default;
        background-color: $nav-tabs-active-link-hover-bg;
        border: 1px solid $nav-tabs-active-link-hover-border-color;
        border-bottom-color: transparent;
      }
    }
  }
  // pulling this in mainly for less shorthand
  &.nav-justified {
    @extend .nav-justified;
    @extend .nav-tabs-justified;
  }
}


// Pills
// -------------------------
.nav-pills {
  > li {
    float: left;

    // Links rendered as pills
    > a {
      border-radius: $nav-pills-border-radius;
    }
    + li {
      margin-left: 2px;
    }

    // Active state
    &.active > a {
      &,
      &:hover,
      &:focus {
        color: $nav-pills-active-link-hover-color;
        background-color: $nav-pills-active-link-hover-bg;
      }
    }
  }
}


// Stacked pills
.nav-stacked {
  > li {
    float: none;
    + li {
      margin-top: 2px;
      margin-left: 0; // no need for this gap between nav items
    }
  }
}


// Nav variations
// --------------------------------------------------

// Justified nav links
// -------------------------

.nav-justified {
  width: 100%;

  > li {
    float: none;
    > a {
      margin-bottom: 5px;
      text-align: center;
    }
  }

  > .dropdown .dropdown-menu {
    top: auto;
    left: auto;
  }

  @media (min-width: $screen-sm-min) {
    > li {
      display: table-cell;
      width: 1%;
      > a {
        margin-bottom: 0;
      }
    }
  }
}

// Move borders to anchors instead of bottom of list
//
// Mixin for adding on top the shared `.nav-justified` styles for our tabs
.nav-tabs-justified {
  border-bottom: 0;

  > li > a {
    // Override margin from .nav-tabs
    margin-right: 0;
    border-radius: $border-radius-base;
  }

  > .active > a,
  > .active > a:hover,
  > .active > a:focus {
    border: 1px solid $nav-tabs-justified-link-border-color;
  }

  @media (min-width: $screen-sm-min) {
    > li > a {
      border-bottom: 1px solid $nav-tabs-justified-link-border-color;
      border-radius: $border-radius-base $border-radius-base 0 0;
    }
    > .active > a,
    > .active > a:hover,
    > .active > a:focus {
      border-bottom-color: $nav-tabs-justified-active-link-border-color;
    }
  }
}


// Tabbable tabs
// -------------------------

// Hide tabbable panes to start, show them when `.active`
.tab-content {
  > .tab-pane {
    display: none;
  }
  > .active {
    display: block;
  }
}


// Dropdowns
// -------------------------

// Specific dropdowns
.nav-tabs .dropdown-menu {
  // make dropdown border overlap tab border
  margin-top: -1px;
  // Remove the top rounded corners here since there is a hard edge above the menu
  @include border-top-radius(0);
}

//
// Navbars
// --------------------------------------------------


// Wrapper and base class
//
// Provide a static navbar from which we expand to create full-width, fixed, and
// other navbar variations.

.navbar {
  position: relative;
  min-height: $navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
  margin-bottom: $navbar-margin-bottom;
  border: 1px solid transparent;

  // Prevent floats from breaking the navbar
  @include clearfix;

  @media (min-width: $grid-float-breakpoint) {
    border-radius: $navbar-border-radius;
  }
}


// Navbar heading
//
// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
// styling of responsive aspects.

.navbar-header {
  @include clearfix;

  @media (min-width: $grid-float-breakpoint) {
    float: left;
  }
}


// Navbar collapse (body)
//
// Group your navbar content into this for easy collapsing and expanding across
// various device sizes. By default, this content is collapsed when <768px, but
// will expand past that for a horizontal display.
//
// To start (on mobile devices) the navbar links, forms, and buttons are stacked
// vertically and include a `max-height` to overflow in case you have too much
// content for the user's viewport.

.navbar-collapse {
  padding-right: $navbar-padding-horizontal;
  padding-left: $navbar-padding-horizontal;
  overflow-x: visible;
  border-top: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  @include clearfix;
  -webkit-overflow-scrolling: touch;

  &.in {
    overflow-y: auto;
  }

  @media (min-width: $grid-float-breakpoint) {
    width: auto;
    border-top: 0;
    box-shadow: none;

    &.collapse {
      display: block !important;
      height: auto !important;
      padding-bottom: 0; // Override default setting
      overflow: visible !important;
    }

    &.in {
      overflow-y: visible;
    }

    // Undo the collapse side padding for navbars with containers to ensure
    // alignment of right-aligned contents.
    .navbar-fixed-top &,
    .navbar-static-top &,
    .navbar-fixed-bottom & {
      padding-right: 0;
      padding-left: 0;
    }
  }
}

.navbar-fixed-top,
.navbar-fixed-bottom {
  .navbar-collapse {
    max-height: $navbar-collapse-max-height;

    @media (max-device-width: $screen-xs-min) and (orientation: landscape) {
      max-height: 200px;
    }
  }

  // Fix the top/bottom navbars when screen real estate supports it
  position: fixed;
  right: 0;
  left: 0;
  z-index: $zindex-navbar-fixed;

  // Undo the rounded corners
  @media (min-width: $grid-float-breakpoint) {
    border-radius: 0;
  }
}

.navbar-fixed-top {
  top: 0;
  border-width: 0 0 1px;
}
.navbar-fixed-bottom {
  bottom: 0;
  margin-bottom: 0; // override .navbar defaults
  border-width: 1px 0 0;
}


// Both navbar header and collapse
//
// When a container is present, change the behavior of the header and collapse.

.container,
.container-fluid {
  > .navbar-header,
  > .navbar-collapse {
    margin-right: -$navbar-padding-horizontal;
    margin-left: -$navbar-padding-horizontal;

    @media (min-width: $grid-float-breakpoint) {
      margin-right: 0;
      margin-left: 0;
    }
  }
}


//
// Navbar alignment options
//
// Display the navbar across the entirety of the page or fixed it to the top or
// bottom of the page.

// Static top (unfixed, but 100% wide) navbar
.navbar-static-top {
  z-index: $zindex-navbar;
  border-width: 0 0 1px;

  @media (min-width: $grid-float-breakpoint) {
    border-radius: 0;
  }
}


// Brand/project name

.navbar-brand {
  float: left;
  height: $navbar-height;
  padding: $navbar-padding-vertical $navbar-padding-horizontal;
  font-size: $font-size-large;
  line-height: $line-height-computed;

  &:hover,
  &:focus {
    text-decoration: none;
  }

  > img {
    display: block;
  }

  @media (min-width: $grid-float-breakpoint) {
    .navbar > .container &,
    .navbar > .container-fluid & {
      margin-left: -$navbar-padding-horizontal;
    }
  }
}


// Navbar toggle
//
// Custom button for toggling the `.navbar-collapse`, powered by the collapse
// JavaScript plugin.

.navbar-toggle {
  position: relative;
  float: right;
  padding: 9px 10px;
  margin-right: $navbar-padding-horizontal;
  @include navbar-vertical-align(34px);
  background-color: transparent;
  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
  border: 1px solid transparent;
  border-radius: $border-radius-base;

  // We remove the `outline` here, but later compensate by attaching `:hover`
  // styles to `:focus`.
  &:focus {
    outline: 0;
  }

  // Bars
  .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
  }
  .icon-bar + .icon-bar {
    margin-top: 4px;
  }

  @media (min-width: $grid-float-breakpoint) {
    display: none;
  }
}


// Navbar nav links
//
// Builds on top of the `.nav` components with its own modifier class to make
// the nav the full height of the horizontal nav (above 768px).

.navbar-nav {
  margin: ($navbar-padding-vertical / 2) (-$navbar-padding-horizontal);

  > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: $line-height-computed;
  }

  @media (max-width: $grid-float-breakpoint-max) {
    // Dropdowns get custom display when collapsed
    .open .dropdown-menu {
      position: static;
      float: none;
      width: auto;
      margin-top: 0;
      background-color: transparent;
      border: 0;
      box-shadow: none;
      > li > a,
      .dropdown-header {
        padding: 5px 15px 5px 25px;
      }
      > li > a {
        line-height: $line-height-computed;
        &:hover,
        &:focus {
          background-image: none;
        }
      }
    }
  }

  // Uncollapse the nav
  @media (min-width: $grid-float-breakpoint) {
    float: left;
    margin: 0;

    > li {
      float: left;
      > a {
        padding-top: $navbar-padding-vertical;
        padding-bottom: $navbar-padding-vertical;
      }
    }
  }
}


// Navbar form
//
// Extension of the `.form-inline` with some extra flavor for optimum display in
// our navbars.

.navbar-form {
  padding: 10px $navbar-padding-horizontal;
  margin-right: -$navbar-padding-horizontal;
  margin-left: -$navbar-padding-horizontal;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  $shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
  @include box-shadow($shadow);

  // Mixin behavior for optimum display
  @include form-inline;

  .form-group {
    @media (max-width: $grid-float-breakpoint-max) {
      margin-bottom: 5px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  // Vertically center in expanded, horizontal navbar
  @include navbar-vertical-align($input-height-base);

  // Undo 100% width for pull classes
  @media (min-width: $grid-float-breakpoint) {
    width: auto;
    padding-top: 0;
    padding-bottom: 0;
    margin-right: 0;
    margin-left: 0;
    border: 0;
    @include box-shadow(none);
  }
}


// Dropdown menus

// Menu position and menu carets
.navbar-nav > li > .dropdown-menu {
  margin-top: 0;
  @include border-top-radius(0);
}
// Menu position and menu caret support for dropups via extra dropup class
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
  margin-bottom: 0;
  @include border-top-radius($navbar-border-radius);
  @include border-bottom-radius(0);
}


// Buttons in navbars
//
// Vertically center a button within a navbar (when *not* in a form).

.navbar-btn {
  @include navbar-vertical-align($input-height-base);

  &.btn-sm {
    @include navbar-vertical-align($input-height-small);
  }
  &.btn-xs {
    @include navbar-vertical-align(22);
  }
}


// Text in navbars
//
// Add a class to make any element properly align itself vertically within the navbars.

.navbar-text {
  @include navbar-vertical-align($line-height-computed);

  @media (min-width: $grid-float-breakpoint) {
    float: left;
    margin-right: $navbar-padding-horizontal;
    margin-left: $navbar-padding-horizontal;
  }
}


// Component alignment
//
// Repurpose the pull utilities as their own navbar utilities to avoid specificity
// issues with parents and chaining. Only do this when the navbar is uncollapsed
// though so that navbar contents properly stack and align in mobile.
//
// Declared after the navbar components to ensure more specificity on the margins.

@media (min-width: $grid-float-breakpoint) {
  .navbar-left {
    float: left !important;
  }
  .navbar-right {
    float: right !important;
  margin-right: -$navbar-padding-horizontal;

    ~ .navbar-right {
      margin-right: 0;
    }
  }
}


// Alternate navbars
// --------------------------------------------------

// Default navbar
.navbar-default {
  background-color: $navbar-default-bg;
  border-color: $navbar-default-border;

  .navbar-brand {
    color: $navbar-default-brand-color;
    &:hover,
    &:focus {
      color: $navbar-default-brand-hover-color;
      background-color: $navbar-default-brand-hover-bg;
    }
  }

  .navbar-text {
    color: $navbar-default-color;
  }

  .navbar-nav {
    > li > a {
      color: $navbar-default-link-color;

      &:hover,
      &:focus {
        color: $navbar-default-link-hover-color;
        background-color: $navbar-default-link-hover-bg;
      }
    }
    > .active > a {
      &,
      &:hover,
      &:focus {
        color: $navbar-default-link-active-color;
        background-color: $navbar-default-link-active-bg;
      }
    }
    > .disabled > a {
      &,
      &:hover,
      &:focus {
        color: $navbar-default-link-disabled-color;
        background-color: $navbar-default-link-disabled-bg;
      }
    }

    // Dropdown menu items
    // Remove background color from open dropdown
    > .open > a {
      &,
      &:hover,
      &:focus {
        color: $navbar-default-link-active-color;
        background-color: $navbar-default-link-active-bg;
      }
    }

    @media (max-width: $grid-float-breakpoint-max) {
      // Dropdowns get custom display when collapsed
      .open .dropdown-menu {
        > li > a {
          color: $navbar-default-link-color;
          &:hover,
          &:focus {
            color: $navbar-default-link-hover-color;
            background-color: $navbar-default-link-hover-bg;
          }
        }
        > .active > a {
          &,
          &:hover,
          &:focus {
            color: $navbar-default-link-active-color;
            background-color: $navbar-default-link-active-bg;
          }
        }
        > .disabled > a {
          &,
          &:hover,
          &:focus {
            color: $navbar-default-link-disabled-color;
            background-color: $navbar-default-link-disabled-bg;
          }
        }
      }
    }
  }

  .navbar-toggle {
    border-color: $navbar-default-toggle-border-color;
    &:hover,
    &:focus {
      background-color: $navbar-default-toggle-hover-bg;
    }
    .icon-bar {
      background-color: $navbar-default-toggle-icon-bar-bg;
    }
  }

  .navbar-collapse,
  .navbar-form {
    border-color: $navbar-default-border;
  }


  // Links in navbars
  //
  // Add a class to ensure links outside the navbar nav are colored correctly.

  .navbar-link {
    color: $navbar-default-link-color;
    &:hover {
      color: $navbar-default-link-hover-color;
    }
  }

  .btn-link {
    color: $navbar-default-link-color;
    &:hover,
    &:focus {
      color: $navbar-default-link-hover-color;
    }
    &[disabled],
    fieldset[disabled] & {
      &:hover,
      &:focus {
        color: $navbar-default-link-disabled-color;
      }
    }
  }
}

// Inverse navbar

.navbar-inverse {
  background-color: $navbar-inverse-bg;
  border-color: $navbar-inverse-border;

  .navbar-brand {
    color: $navbar-inverse-brand-color;
    &:hover,
    &:focus {
      color: $navbar-inverse-brand-hover-color;
      background-color: $navbar-inverse-brand-hover-bg;
    }
  }

  .navbar-text {
    color: $navbar-inverse-color;
  }

  .navbar-nav {
    > li > a {
      color: $navbar-inverse-link-color;

      &:hover,
      &:focus {
        color: $navbar-inverse-link-hover-color;
        background-color: $navbar-inverse-link-hover-bg;
      }
    }
    > .active > a {
      &,
      &:hover,
      &:focus {
        color: $navbar-inverse-link-active-color;
        background-color: $navbar-inverse-link-active-bg;
      }
    }
    > .disabled > a {
      &,
      &:hover,
      &:focus {
        color: $navbar-inverse-link-disabled-color;
        background-color: $navbar-inverse-link-disabled-bg;
      }
    }

    // Dropdowns
    > .open > a {
      &,
      &:hover,
      &:focus {
        color: $navbar-inverse-link-active-color;
        background-color: $navbar-inverse-link-active-bg;
      }
    }

    @media (max-width: $grid-float-breakpoint-max) {
      // Dropdowns get custom display
      .open .dropdown-menu {
        > .dropdown-header {
          border-color: $navbar-inverse-border;
        }
        .divider {
          background-color: $navbar-inverse-border;
        }
        > li > a {
          color: $navbar-inverse-link-color;
          &:hover,
          &:focus {
            color: $navbar-inverse-link-hover-color;
            background-color: $navbar-inverse-link-hover-bg;
          }
        }
        > .active > a {
          &,
          &:hover,
          &:focus {
            color: $navbar-inverse-link-active-color;
            background-color: $navbar-inverse-link-active-bg;
          }
        }
        > .disabled > a {
          &,
          &:hover,
          &:focus {
            color: $navbar-inverse-link-disabled-color;
            background-color: $navbar-inverse-link-disabled-bg;
          }
        }
      }
    }
  }

  // Darken the responsive nav toggle
  .navbar-toggle {
    border-color: $navbar-inverse-toggle-border-color;
    &:hover,
    &:focus {
      background-color: $navbar-inverse-toggle-hover-bg;
    }
    .icon-bar {
      background-color: $navbar-inverse-toggle-icon-bar-bg;
    }
  }

  .navbar-collapse,
  .navbar-form {
    border-color: darken($navbar-inverse-bg, 7%);
  }

  .navbar-link {
    color: $navbar-inverse-link-color;
    &:hover {
      color: $navbar-inverse-link-hover-color;
    }
  }

  .btn-link {
    color: $navbar-inverse-link-color;
    &:hover,
    &:focus {
      color: $navbar-inverse-link-hover-color;
    }
    &[disabled],
    fieldset[disabled] & {
      &:hover,
      &:focus {
        color: $navbar-inverse-link-disabled-color;
      }
    }
  }
}

//
// Breadcrumbs
// --------------------------------------------------


.breadcrumb {
  padding: $breadcrumb-padding-vertical $breadcrumb-padding-horizontal;
  margin-bottom: $line-height-computed;
  list-style: none;
  background-color: $breadcrumb-bg;
  border-radius: $border-radius-base;

  > li {
    display: inline-block;

    + li:before {
      padding: 0 5px;
      color: $breadcrumb-color;
      // [converter] Workaround for https://github.com/sass/libsass/issues/1115
      $nbsp: "\00a0";
      content: "#{$breadcrumb-separator}#{$nbsp}"; // Unicode space added since inline-block means non-collapsing white-space
    }
  }

  > .active {
    color: $breadcrumb-active-color;
  }
}

//
// Pagination (multiple pages)
// --------------------------------------------------
.pagination {
  display: inline-block;
  padding-left: 0;
  margin: $line-height-computed 0;
  border-radius: $border-radius-base;

  > li {
    display: inline; // Remove list-style and block-level defaults
    > a,
    > span {
      position: relative;
      float: left; // Collapse white-space
      padding: $padding-base-vertical $padding-base-horizontal;
      margin-left: -1px;
      line-height: $line-height-base;
      color: $pagination-color;
      text-decoration: none;
      background-color: $pagination-bg;
      border: 1px solid $pagination-border;

      &:hover,
      &:focus {
        z-index: 2;
        color: $pagination-hover-color;
        background-color: $pagination-hover-bg;
        border-color: $pagination-hover-border;
      }
    }
    &:first-child {
      > a,
      > span {
        margin-left: 0;
        @include border-left-radius($border-radius-base);
      }
    }
    &:last-child {
      > a,
      > span {
        @include border-right-radius($border-radius-base);
      }
    }
  }

  > .active > a,
  > .active > span {
    &,
    &:hover,
    &:focus {
      z-index: 3;
      color: $pagination-active-color;
      cursor: default;
      background-color: $pagination-active-bg;
      border-color: $pagination-active-border;
    }
  }

  > .disabled {
    > span,
    > span:hover,
    > span:focus,
    > a,
    > a:hover,
    > a:focus {
      color: $pagination-disabled-color;
      cursor: $cursor-disabled;
      background-color: $pagination-disabled-bg;
      border-color: $pagination-disabled-border;
    }
  }
}

// Sizing
// --------------------------------------------------

// Large
.pagination-lg {
  @include pagination-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large);
}

// Small
.pagination-sm {
  @include pagination-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small);
}

//
// Pager pagination
// --------------------------------------------------


.pager {
  padding-left: 0;
  margin: $line-height-computed 0;
  text-align: center;
  list-style: none;
  @include clearfix;
  li {
    display: inline;
    > a,
    > span {
      display: inline-block;
      padding: 5px 14px;
      background-color: $pager-bg;
      border: 1px solid $pager-border;
      border-radius: $pager-border-radius;
    }

    > a:hover,
    > a:focus {
      text-decoration: none;
      background-color: $pager-hover-bg;
    }
  }

  .next {
    > a,
    > span {
      float: right;
    }
  }

  .previous {
    > a,
    > span {
      float: left;
    }
  }

  .disabled {
    > a,
    > a:hover,
    > a:focus,
    > span {
      color: $pager-disabled-color;
      cursor: $cursor-disabled;
      background-color: $pager-bg;
    }
  }
}

//
// Labels
// --------------------------------------------------

.label {
  display: inline;
  padding: .2em .6em .3em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  color: $label-color;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;

  // [converter] extracted a& to a.label

  // Empty labels collapse automatically (not available in IE8)
  &:empty {
    display: none;
  }

  // Quick fix for labels in buttons
  .btn & {
    position: relative;
    top: -1px;
  }
}

// Add hover effects, but only for links
a.label {
  &:hover,
  &:focus {
    color: $label-link-hover-color;
    text-decoration: none;
    cursor: pointer;
  }
}

// Colors
// Contextual variations (linked labels get darker on :hover)

.label-default {
  @include label-variant($label-default-bg);
}

.label-primary {
  @include label-variant($label-primary-bg);
}

.label-success {
  @include label-variant($label-success-bg);
}

.label-info {
  @include label-variant($label-info-bg);
}

.label-warning {
  @include label-variant($label-warning-bg);
}

.label-danger {
  @include label-variant($label-danger-bg);
}

//
// Badges
// --------------------------------------------------


// Base class
.badge {
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: $font-size-small;
  font-weight: $badge-font-weight;
  line-height: $badge-line-height;
  color: $badge-color;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-color: $badge-bg;
  border-radius: $badge-border-radius;

  // Empty badges collapse automatically (not available in IE8)
  &:empty {
    display: none;
  }

  // Quick fix for badges in buttons
  .btn & {
    position: relative;
    top: -1px;
  }

  .btn-xs &,
  .btn-group-xs > .btn & {
    top: 0;
    padding: 1px 5px;
  }

  // [converter] extracted a& to a.badge

  // Account for badges in navs
  .list-group-item.active > &,
  .nav-pills > .active > a > & {
    color: $badge-active-color;
    background-color: $badge-active-bg;
  }

  .list-group-item > & {
    float: right;
  }

  .list-group-item > & + & {
    margin-right: 5px;
  }

  .nav-pills > li > a > & {
    margin-left: 3px;
  }
}

// Hover state, but only for links
a.badge {
  &:hover,
  &:focus {
    color: $badge-link-hover-color;
    text-decoration: none;
    cursor: pointer;
  }
}

//
// Jumbotron
// --------------------------------------------------


.jumbotron {
  padding-top: $jumbotron-padding;
  padding-bottom: $jumbotron-padding;
  margin-bottom: $jumbotron-padding;
  color: $jumbotron-color;
  background-color: $jumbotron-bg;

  h1,
  .h1 {
    color: $jumbotron-heading-color;
  }

  p {
    margin-bottom: ($jumbotron-padding / 2);
    font-size: $jumbotron-font-size;
    font-weight: 200;
  }

  > hr {
    border-top-color: darken($jumbotron-bg, 10%);
  }

  .container &,
  .container-fluid & {
    padding-right: ($grid-gutter-width / 2);
    padding-left: ($grid-gutter-width / 2);
    border-radius: $border-radius-large; // Only round corners at higher resolutions if contained in a container
  }

  .container {
    max-width: 100%;
  }

  @media screen and (min-width: $screen-sm-min) {
    padding-top: ($jumbotron-padding * 1.6);
    padding-bottom: ($jumbotron-padding * 1.6);

    .container &,
    .container-fluid & {
      padding-right: ($jumbotron-padding * 2);
      padding-left: ($jumbotron-padding * 2);
    }

    h1,
    .h1 {
      font-size: $jumbotron-heading-font-size;
    }
  }
}

//
// Thumbnails
// --------------------------------------------------


// Mixin and adjust the regular image class
.thumbnail {
  display: block;
  padding: $thumbnail-padding;
  margin-bottom: $line-height-computed;
  line-height: $line-height-base;
  background-color: $thumbnail-bg;
  border: 1px solid $thumbnail-border;
  border-radius: $thumbnail-border-radius;
  @include transition(border .2s ease-in-out);

  > img,
  a > img {
    @include img-responsive;
    margin-right: auto;
    margin-left: auto;
  }

  // [converter] extracted a&:hover, a&:focus, a&.active to a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active

  // Image captions
  .caption {
    padding: $thumbnail-caption-padding;
    color: $thumbnail-caption-color;
  }
}

// Add a hover state for linked versions only
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
  border-color: $link-color;
}

//
// Alerts
// --------------------------------------------------


// Base styles
// -------------------------

.alert {
  padding: $alert-padding;
  margin-bottom: $line-height-computed;
  border: 1px solid transparent;
  border-radius: $alert-border-radius;

  // Headings for larger alerts
  h4 {
    margin-top: 0;
    color: inherit; // Specified for the h4 to prevent conflicts of changing $headings-color
  }

  // Provide class for links that match alerts
  .alert-link {
    font-weight: $alert-link-font-weight;
  }

  // Improve alignment and spacing of inner content
  > p,
  > ul {
    margin-bottom: 0;
  }

  > p + p {
    margin-top: 5px;
  }
}

// Dismissible alerts
//
// Expand the right padding and account for the close button's positioning.

// The misspelled .alert-dismissable was deprecated in 3.2.0.
.alert-dismissable,
.alert-dismissible {
  padding-right: ($alert-padding + 20);

  // Adjust close link position
  .close {
    position: relative;
    top: -2px;
    right: -21px;
    color: inherit;
  }
}

// Alternate styles
//
// Generate contextual modifier classes for colorizing the alert.

.alert-success {
  @include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text);
}

.alert-info {
  @include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text);
}

.alert-warning {
  @include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text);
}

.alert-danger {
  @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);
}

//
// Progress bars
// --------------------------------------------------


// Bar animations
// -------------------------

// WebKit
@-webkit-keyframes progress-bar-stripes {
  from  { background-position: 40px 0; }
  to    { background-position: 0 0; }
}

// Spec and IE10+
@keyframes progress-bar-stripes {
  from  { background-position: 40px 0; }
  to    { background-position: 0 0; }
}


// Bar itself
// -------------------------

// Outer container
.progress {
  height: $line-height-computed;
  margin-bottom: $line-height-computed;
  overflow: hidden;
  background-color: $progress-bg;
  border-radius: $progress-border-radius;
  @include box-shadow(inset 0 1px 2px rgba(0, 0, 0, .1));
}

// Bar of progress
.progress-bar {
  float: left;
  width: 0%;
  height: 100%;
  font-size: $font-size-small;
  line-height: $line-height-computed;
  color: $progress-bar-color;
  text-align: center;
  background-color: $progress-bar-bg;
  @include box-shadow(inset 0 -1px 0 rgba(0, 0, 0, .15));
  @include transition(width .6s ease);
}

// Striped bars
//
// `.progress-striped .progress-bar` is deprecated as of v3.2.0 in favor of the
// `.progress-bar-striped` class, which you just add to an existing
// `.progress-bar`.
.progress-striped .progress-bar,
.progress-bar-striped {
  @include gradient-striped;
  background-size: 40px 40px;
}

// Call animation for the active one
//
// `.progress.active .progress-bar` is deprecated as of v3.2.0 in favor of the
// `.progress-bar.active` approach.
.progress.active .progress-bar,
.progress-bar.active {
  @include animation(progress-bar-stripes 2s linear infinite);
}


// Variations
// -------------------------

.progress-bar-success {
  @include progress-bar-variant($progress-bar-success-bg);
}

.progress-bar-info {
  @include progress-bar-variant($progress-bar-info-bg);
}

.progress-bar-warning {
  @include progress-bar-variant($progress-bar-warning-bg);
}

.progress-bar-danger {
  @include progress-bar-variant($progress-bar-danger-bg);
}

.media {
  // Proper spacing between instances of .media
  margin-top: 15px;

  &:first-child {
    margin-top: 0;
  }
}

.media,
.media-body {
  overflow: hidden;
  zoom: 1;
}

.media-body {
  width: 10000px;
}

.media-object {
  display: block;

  // Fix collapse in webkit from max-width: 100% and display: table-cell.
  &.img-thumbnail {
    max-width: none;
  }
}

.media-right,
.media > .pull-right {
  padding-left: 10px;
}

.media-left,
.media > .pull-left {
  padding-right: 10px;
}

.media-left,
.media-right,
.media-body {
  display: table-cell;
  vertical-align: top;
}

.media-middle {
  vertical-align: middle;
}

.media-bottom {
  vertical-align: bottom;
}

// Reset margins on headings for tighter default spacing
.media-heading {
  margin-top: 0;
  margin-bottom: 5px;
}

// Media list variation
//
// Undo default ul/ol styles
.media-list {
  padding-left: 0;
  list-style: none;
}

//
// List groups
// --------------------------------------------------


// Base class
//
// Easily usable on <ul>, <ol>, or <div>.

.list-group {
  // No need to set list-style: none; since .list-group-item is block level
  padding-left: 0; // reset padding because ul and ol
  margin-bottom: 20px;
}


// Individual list items
//
// Use on `li`s or `div`s within the `.list-group` parent.

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  // Place the border on the list items and negative margin up for better styling
  margin-bottom: -1px;
  background-color: $list-group-bg;
  border: 1px solid $list-group-border;

  // Round the first and last items
  &:first-child {
    @include border-top-radius($list-group-border-radius);
  }
  &:last-child {
    margin-bottom: 0;
    @include border-bottom-radius($list-group-border-radius);
  }

  // Disabled state
  &.disabled,
  &.disabled:hover,
  &.disabled:focus {
    color: $list-group-disabled-color;
    cursor: $cursor-disabled;
    background-color: $list-group-disabled-bg;

    // Force color to inherit for custom content
    .list-group-item-heading {
      color: inherit;
    }
    .list-group-item-text {
      color: $list-group-disabled-text-color;
    }
  }

  // Active class on item itself, not parent
  &.active,
  &.active:hover,
  &.active:focus {
    z-index: 2; // Place active items above their siblings for proper border styling
    color: $list-group-active-color;
    background-color: $list-group-active-bg;
    border-color: $list-group-active-border;

    // Force color to inherit for custom content
    .list-group-item-heading,
    .list-group-item-heading > small,
    .list-group-item-heading > .small {
      color: inherit;
    }
    .list-group-item-text {
      color: $list-group-active-text-color;
    }
  }
}


// Interactive list items
//
// Use anchor or button elements instead of `li`s or `div`s to create interactive items.
// Includes an extra `.active` modifier class for showing selected items.

a.list-group-item,
button.list-group-item {
  color: $list-group-link-color;

  .list-group-item-heading {
    color: $list-group-link-heading-color;
  }

  // Hover state
  &:hover,
  &:focus {
    color: $list-group-link-hover-color;
    text-decoration: none;
    background-color: $list-group-hover-bg;
  }
}

button.list-group-item {
  width: 100%;
  text-align: left;
}


// Contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

@include list-group-item-variant(success, $state-success-bg, $state-success-text);
@include list-group-item-variant(info, $state-info-bg, $state-info-text);
@include list-group-item-variant(warning, $state-warning-bg, $state-warning-text);
@include list-group-item-variant(danger, $state-danger-bg, $state-danger-text);


// Custom content options
//
// Extra classes for creating well-formatted content within `.list-group-item`s.

.list-group-item-heading {
  margin-top: 0;
  margin-bottom: 5px;
}
.list-group-item-text {
  margin-bottom: 0;
  line-height: 1.3;
}

//
// Panels
// --------------------------------------------------


// Base class
.panel {
  margin-bottom: $line-height-computed;
  background-color: $panel-bg;
  border: 1px solid transparent;
  border-radius: $panel-border-radius;
  @include box-shadow(0 1px 1px rgba(0, 0, 0, .05));
}

// Panel contents
.panel-body {
  padding: $panel-body-padding;
  @include clearfix;
}

// Optional heading
.panel-heading {
  padding: $panel-heading-padding;
  border-bottom: 1px solid transparent;
  @include border-top-radius(($panel-border-radius - 1));

  > .dropdown .dropdown-toggle {
    color: inherit;
  }
}

// Within heading, strip any `h*` tag of its default margins for spacing.
.panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: ceil(($font-size-base * 1.125));
  color: inherit;

  > a,
  > small,
  > .small,
  > small > a,
  > .small > a {
    color: inherit;
  }
}

// Optional footer (stays gray in every modifier class)
.panel-footer {
  padding: $panel-footer-padding;
  background-color: $panel-footer-bg;
  border-top: 1px solid $panel-inner-border;
  @include border-bottom-radius(($panel-border-radius - 1));
}


// List groups in panels
//
// By default, space out list group content from panel headings to account for
// any kind of custom content between the two.

.panel {
  > .list-group,
  > .panel-collapse > .list-group {
    margin-bottom: 0;

    .list-group-item {
      border-width: 1px 0;
      border-radius: 0;
    }

    // Add border top radius for first one
    &:first-child {
      .list-group-item:first-child {
        border-top: 0;
        @include border-top-radius(($panel-border-radius - 1));
      }
    }

    // Add border bottom radius for last one
    &:last-child {
      .list-group-item:last-child {
        border-bottom: 0;
        @include border-bottom-radius(($panel-border-radius - 1));
      }
    }
  }
  > .panel-heading + .panel-collapse > .list-group {
    .list-group-item:first-child {
      @include border-top-radius(0);
    }
  }
}
// Collapse space between when there's no additional content.
.panel-heading + .list-group {
  .list-group-item:first-child {
    border-top-width: 0;
  }
}
.list-group + .panel-footer {
  border-top-width: 0;
}

// Tables in panels
//
// Place a non-bordered `.table` within a panel (not within a `.panel-body`) and
// watch it go full width.

.panel {
  > .table,
  > .table-responsive > .table,
  > .panel-collapse > .table {
    margin-bottom: 0;

    caption {
      padding-right: $panel-body-padding;
      padding-left: $panel-body-padding;
    }
  }
  // Add border top radius for first one
  > .table:first-child,
  > .table-responsive:first-child > .table:first-child {
    @include border-top-radius(($panel-border-radius - 1));

    > thead:first-child,
    > tbody:first-child {
      > tr:first-child {
        border-top-left-radius: ($panel-border-radius - 1);
        border-top-right-radius: ($panel-border-radius - 1);

        td:first-child,
        th:first-child {
          border-top-left-radius: ($panel-border-radius - 1);
        }
        td:last-child,
        th:last-child {
          border-top-right-radius: ($panel-border-radius - 1);
        }
      }
    }
  }
  // Add border bottom radius for last one
  > .table:last-child,
  > .table-responsive:last-child > .table:last-child {
    @include border-bottom-radius(($panel-border-radius - 1));

    > tbody:last-child,
    > tfoot:last-child {
      > tr:last-child {
        border-bottom-right-radius: ($panel-border-radius - 1);
        border-bottom-left-radius: ($panel-border-radius - 1);

        td:first-child,
        th:first-child {
          border-bottom-left-radius: ($panel-border-radius - 1);
        }
        td:last-child,
        th:last-child {
          border-bottom-right-radius: ($panel-border-radius - 1);
        }
      }
    }
  }
  > .panel-body + .table,
  > .panel-body + .table-responsive,
  > .table + .panel-body,
  > .table-responsive + .panel-body {
    border-top: 1px solid $table-border-color;
  }
  > .table > tbody:first-child > tr:first-child th,
  > .table > tbody:first-child > tr:first-child td {
    border-top: 0;
  }
  > .table-bordered,
  > .table-responsive > .table-bordered {
    border: 0;
    > thead,
    > tbody,
    > tfoot {
      > tr {
        > th:first-child,
        > td:first-child {
          border-left: 0;
        }
        > th:last-child,
        > td:last-child {
          border-right: 0;
        }
      }
    }
    > thead,
    > tbody {
      > tr:first-child {
        > td,
        > th {
          border-bottom: 0;
        }
      }
    }
    > tbody,
    > tfoot {
      > tr:last-child {
        > td,
        > th {
          border-bottom: 0;
        }
      }
    }
  }
  > .table-responsive {
    margin-bottom: 0;
    border: 0;
  }
}


// Collapsible panels (aka, accordion)
//
// Wrap a series of panels in `.panel-group` to turn them into an accordion with
// the help of our collapse JavaScript plugin.

.panel-group {
  margin-bottom: $line-height-computed;

  // Tighten up margin so it's only between panels
  .panel {
    margin-bottom: 0;
    border-radius: $panel-border-radius;

    + .panel {
      margin-top: 5px;
    }
  }

  .panel-heading {
    border-bottom: 0;

    + .panel-collapse > .panel-body,
    + .panel-collapse > .list-group {
      border-top: 1px solid $panel-inner-border;
    }
  }

  .panel-footer {
    border-top: 0;
    + .panel-collapse .panel-body {
      border-bottom: 1px solid $panel-inner-border;
    }
  }
}


// Contextual variations
.panel-default {
  @include panel-variant($panel-default-border, $panel-default-text, $panel-default-heading-bg, $panel-default-border);
}
.panel-primary {
  @include panel-variant($panel-primary-border, $panel-primary-text, $panel-primary-heading-bg, $panel-primary-border);
}
.panel-success {
  @include panel-variant($panel-success-border, $panel-success-text, $panel-success-heading-bg, $panel-success-border);
}
.panel-info {
  @include panel-variant($panel-info-border, $panel-info-text, $panel-info-heading-bg, $panel-info-border);
}
.panel-warning {
  @include panel-variant($panel-warning-border, $panel-warning-text, $panel-warning-heading-bg, $panel-warning-border);
}
.panel-danger {
  @include panel-variant($panel-danger-border, $panel-danger-text, $panel-danger-heading-bg, $panel-danger-border);
}

// Embeds responsive
//
// Credit: Nicolas Gallagher and SUIT CSS.

.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;

  .embed-responsive-item,
  iframe,
  embed,
  object,
  video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
}

// Modifier class for 16:9 aspect ratio
.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}

// Modifier class for 4:3 aspect ratio
.embed-responsive-4by3 {
  padding-bottom: 75%;
}

//
// Wells
// --------------------------------------------------


// Base class
.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: $well-bg;
  border: 1px solid $well-border;
  border-radius: $border-radius-base;
  @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .05));
  blockquote {
    border-color: #ddd;
    border-color: rgba(0, 0, 0, .15);
  }
}

// Sizes
.well-lg {
  padding: 24px;
  border-radius: $border-radius-large;
}
.well-sm {
  padding: 9px;
  border-radius: $border-radius-small;
}

//
// Close icons
// --------------------------------------------------


.close {
  float: right;
  font-size: ($font-size-base * 1.5);
  font-weight: $close-font-weight;
  line-height: 1;
  color: $close-color;
  text-shadow: $close-text-shadow;
  @include opacity(.2);

  &:hover,
  &:focus {
    color: $close-color;
    text-decoration: none;
    cursor: pointer;
    @include opacity(.5);
  }

  // [converter] extracted button& to button.close
}

// Additional properties for button version
// iOS requires the button element instead of an anchor tag.
// If you want the anchor version, it requires `href="#"`.
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
button.close {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
}


// Components w/ JavaScript
//
// Modals
// --------------------------------------------------

// .modal-open      - body class for killing the scroll
// .modal           - container to scroll within
// .modal-dialog    - positioning shell for the actual modal
// .modal-content   - actual modal w/ bg and corners and shit

// Kill the scroll on the body
.modal-open {
  overflow: hidden;
}

// Container that the modal scrolls within
.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $zindex-modal;
  display: none;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;

  // Prevent Chrome on Windows from adding a focus outline. For details, see
  // https://github.com/twbs/bootstrap/pull/10951.
  outline: 0;

  // When fading in the modal, animate it to slide down
  &.fade .modal-dialog {
    @include translate(0, -25%);
    @include transition-transform(0.3s ease-out);
  }
  &.in .modal-dialog { @include translate(0, 0); }
}
.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

// Shell div to position the modal with bottom padding
.modal-dialog {
  position: relative;
  width: auto;
  margin: 10px;
}

// Actual modal
.modal-content {
  position: relative;
  background-color: $modal-content-bg;
  background-clip: padding-box;
  border: 1px solid $modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
  border: 1px solid $modal-content-border-color;
  border-radius: $border-radius-large;
  @include box-shadow(0 3px 9px rgba(0, 0, 0, .5));
  // Remove focus outline from opened modal
  outline: 0;
}

// Modal background
.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $zindex-modal-background;
  background-color: $modal-backdrop-bg;
  // Fade for backdrop
  &.fade { @include opacity(0); }
  &.in { @include opacity($modal-backdrop-opacity); }
}

// Modal header
// Top section of the modal w/ title and dismiss
.modal-header {
  padding: $modal-title-padding;
  border-bottom: 1px solid $modal-header-border-color;
  @include clearfix;
}
// Close icon
.modal-header .close {
  margin-top: -2px;
}

// Title text within header
.modal-title {
  margin: 0;
  line-height: $modal-title-line-height;
}

// Modal body
// Where all modal content resides (sibling of .modal-header and .modal-footer)
.modal-body {
  position: relative;
  padding: $modal-inner-padding;
}

// Footer (for actions)
.modal-footer {
  padding: $modal-inner-padding;
  text-align: right; // right align buttons
  border-top: 1px solid $modal-footer-border-color;
  @include clearfix; // clear it in case folks use .pull-* classes on buttons

  // Properly space out buttons
  .btn + .btn {
    margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
    margin-left: 5px;
  }
  // but override that for button groups
  .btn-group .btn + .btn {
    margin-left: -1px;
  }
  // and override it for block buttons as well
  .btn-block + .btn-block {
    margin-left: 0;
  }
}

// Measure scrollbar width for padding body during modal show/hide
.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

// Scale up the modal
@media (min-width: $screen-sm-min) {
  // Automatically set modal's width for larger viewports
  .modal-dialog {
    width: $modal-md;
    margin: 30px auto;
  }
  .modal-content {
    @include box-shadow(0 5px 15px rgba(0, 0, 0, .5));
  }

  // Modal sizes
  .modal-sm { width: $modal-sm; }
}

@media (min-width: $screen-md-min) {
  .modal-lg { width: $modal-lg; }
}

//
// Tooltips
// --------------------------------------------------


// Base class
.tooltip {
  position: absolute;
  z-index: $zindex-tooltip;
  display: block;
  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
  // So reset our font and text properties to avoid inheriting weird values.
  @include reset-text;
  font-size: $font-size-small;

  @include opacity(0);

  &.in { @include opacity($tooltip-opacity); }
  &.top {
    padding: $tooltip-arrow-width 0;
    margin-top: -3px;
  }
  &.right {
    padding: 0 $tooltip-arrow-width;
    margin-left: 3px;
  }
  &.bottom {
    padding: $tooltip-arrow-width 0;
    margin-top: 3px;
  }
  &.left {
    padding: 0 $tooltip-arrow-width;
    margin-left: -3px;
  }

  // Note: Deprecated .top-left, .top-right, .bottom-left, and .bottom-right as of v3.3.1
  &.top .tooltip-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -$tooltip-arrow-width;
    border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
    border-top-color: $tooltip-arrow-color;
  }
  &.top-left .tooltip-arrow {
    right: $tooltip-arrow-width;
    bottom: 0;
    margin-bottom: -$tooltip-arrow-width;
    border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
    border-top-color: $tooltip-arrow-color;
  }
  &.top-right .tooltip-arrow {
    bottom: 0;
    left: $tooltip-arrow-width;
    margin-bottom: -$tooltip-arrow-width;
    border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
    border-top-color: $tooltip-arrow-color;
  }
  &.right .tooltip-arrow {
    top: 50%;
    left: 0;
    margin-top: -$tooltip-arrow-width;
    border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
    border-right-color: $tooltip-arrow-color;
  }
  &.left .tooltip-arrow {
    top: 50%;
    right: 0;
    margin-top: -$tooltip-arrow-width;
    border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
    border-left-color: $tooltip-arrow-color;
  }
  &.bottom .tooltip-arrow {
    top: 0;
    left: 50%;
    margin-left: -$tooltip-arrow-width;
    border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
    border-bottom-color: $tooltip-arrow-color;
  }
  &.bottom-left .tooltip-arrow {
    top: 0;
    right: $tooltip-arrow-width;
    margin-top: -$tooltip-arrow-width;
    border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
    border-bottom-color: $tooltip-arrow-color;
  }
  &.bottom-right .tooltip-arrow {
    top: 0;
    left: $tooltip-arrow-width;
    margin-top: -$tooltip-arrow-width;
    border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
    border-bottom-color: $tooltip-arrow-color;
  }
}

// Wrapper for the tooltip content
.tooltip-inner {
  max-width: $tooltip-max-width;
  padding: 3px 8px;
  color: $tooltip-color;
  text-align: center;
  background-color: $tooltip-bg;
  border-radius: $border-radius-base;
}

// Arrows
.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

//
// Popovers
// --------------------------------------------------


.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: $zindex-popover;
  display: none;
  max-width: $popover-max-width;
  padding: 1px;
  // Our parent element can be arbitrary since popovers are by default inserted as a sibling of their target element.
  // So reset our font and text properties to avoid inheriting weird values.
  @include reset-text;
  font-size: $font-size-base;
  background-color: $popover-bg;
  background-clip: padding-box;
  border: 1px solid $popover-fallback-border-color;
  border: 1px solid $popover-border-color;
  border-radius: $border-radius-large;
  @include box-shadow(0 5px 10px rgba(0, 0, 0, .2));

  // Offset the popover to account for the popover arrow
  &.top { margin-top: -$popover-arrow-width; }
  &.right { margin-left: $popover-arrow-width; }
  &.bottom { margin-top: $popover-arrow-width; }
  &.left { margin-left: -$popover-arrow-width; }

  // Arrows
  // .arrow is outer, .arrow:after is inner
  > .arrow {
    border-width: $popover-arrow-outer-width;

    &,
    &:after {
      position: absolute;
      display: block;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
    }

    &:after {
      content: "";
      border-width: $popover-arrow-width;
    }
  }

  &.top > .arrow {
    bottom: -$popover-arrow-outer-width;
    left: 50%;
    margin-left: -$popover-arrow-outer-width;
    border-top-color: $popover-arrow-outer-fallback-color; // IE8 fallback
    border-top-color: $popover-arrow-outer-color;
    border-bottom-width: 0;
    &:after {
      bottom: 1px;
      margin-left: -$popover-arrow-width;
      content: " ";
      border-top-color: $popover-arrow-color;
      border-bottom-width: 0;
    }
  }
  &.right > .arrow {
    top: 50%;
    left: -$popover-arrow-outer-width;
    margin-top: -$popover-arrow-outer-width;
    border-right-color: $popover-arrow-outer-fallback-color; // IE8 fallback
    border-right-color: $popover-arrow-outer-color;
    border-left-width: 0;
    &:after {
      bottom: -$popover-arrow-width;
      left: 1px;
      content: " ";
      border-right-color: $popover-arrow-color;
      border-left-width: 0;
    }
  }
  &.bottom > .arrow {
    top: -$popover-arrow-outer-width;
    left: 50%;
    margin-left: -$popover-arrow-outer-width;
    border-top-width: 0;
    border-bottom-color: $popover-arrow-outer-fallback-color; // IE8 fallback
    border-bottom-color: $popover-arrow-outer-color;
    &:after {
      top: 1px;
      margin-left: -$popover-arrow-width;
      content: " ";
      border-top-width: 0;
      border-bottom-color: $popover-arrow-color;
    }
  }

  &.left > .arrow {
    top: 50%;
    right: -$popover-arrow-outer-width;
    margin-top: -$popover-arrow-outer-width;
    border-right-width: 0;
    border-left-color: $popover-arrow-outer-fallback-color; // IE8 fallback
    border-left-color: $popover-arrow-outer-color;
    &:after {
      right: 1px;
      bottom: -$popover-arrow-width;
      content: " ";
      border-right-width: 0;
      border-left-color: $popover-arrow-color;
    }
  }
}

.popover-title {
  padding: 8px 14px;
  margin: 0; // reset heading margin
  font-size: $font-size-base;
  background-color: $popover-title-bg;
  border-bottom: 1px solid darken($popover-title-bg, 5%);
  border-radius: ($border-radius-large - 1) ($border-radius-large - 1) 0 0;
}

.popover-content {
  padding: 9px 14px;
}

//
// Carousel
// --------------------------------------------------


// Wrapper for the slide container and indicators
.carousel {
  position: relative;
}

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;

  > .item {
    position: relative;
    display: none;
    @include transition(.6s ease-in-out left);

    // Account for jankitude on images
    > img,
    > a > img {
      @include img-responsive;
      line-height: 1;
    }

    // WebKit CSS3 transforms for supported devices
    @media all and (transform-3d), (-webkit-transform-3d) {
      @include transition-transform(0.6s ease-in-out);
      @include backface-visibility(hidden);
      @include perspective(1000px);

      &.next,
      &.active.right {
        @include translate3d(100%, 0, 0);
        left: 0;
      }
      &.prev,
      &.active.left {
        @include translate3d(-100%, 0, 0);
        left: 0;
      }
      &.next.left,
      &.prev.right,
      &.active {
        @include translate3d(0, 0, 0);
        left: 0;
      }
    }
  }

  > .active,
  > .next,
  > .prev {
    display: block;
  }

  > .active {
    left: 0;
  }

  > .next,
  > .prev {
    position: absolute;
    top: 0;
    width: 100%;
  }

  > .next {
    left: 100%;
  }
  > .prev {
    left: -100%;
  }
  > .next.left,
  > .prev.right {
    left: 0;
  }

  > .active.left {
    left: -100%;
  }
  > .active.right {
    left: 100%;
  }

}

// Left/right controls for nav
// ---------------------------

.carousel-control {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: $carousel-control-width;
  font-size: $carousel-control-font-size;
  color: $carousel-control-color;
  text-align: center;
  text-shadow: $carousel-text-shadow;
  background-color: rgba(0, 0, 0, 0); // Fix IE9 click-thru bug
  @include opacity($carousel-control-opacity);
  // We can't have this transition here because WebKit cancels the carousel
  // animation if you trip this while in the middle of another animation.

  // Set gradients for backgrounds
  &.left {
    @include gradient-horizontal($start-color: rgba(0, 0, 0, .5), $end-color: rgba(0, 0, 0, .0001));
  }
  &.right {
    right: 0;
    left: auto;
    @include gradient-horizontal($start-color: rgba(0, 0, 0, .0001), $end-color: rgba(0, 0, 0, .5));
  }

  // Hover/focus state
  &:hover,
  &:focus {
    color: $carousel-control-color;
    text-decoration: none;
    outline: 0;
    @include opacity(.9);
  }

  // Toggles
  .icon-prev,
  .icon-next,
  .glyphicon-chevron-left,
  .glyphicon-chevron-right {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: inline-block;
    margin-top: -10px;
  }
  .icon-prev,
  .glyphicon-chevron-left {
    left: 50%;
    margin-left: -10px;
  }
  .icon-next,
  .glyphicon-chevron-right {
    right: 50%;
    margin-right: -10px;
  }
  .icon-prev,
  .icon-next {
    width: 20px;
    height: 20px;
    font-family: serif;
    line-height: 1;
  }

  .icon-prev {
    &:before {
      content: "\2039";// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
    }
  }
  .icon-next {
    &:before {
      content: "\203a";// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
    }
  }
}

// Optional indicator pips
//
// Add an unordered list with the following class and add a list item for each
// slide your carousel holds.

.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 15;
  width: 60%;
  padding-left: 0;
  margin-left: -30%;
  text-align: center;
  list-style: none;

  li {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 1px;
    text-indent: -999px;
    cursor: pointer;
    // IE8-9 hack for event handling
    //
    // Internet Explorer 8-9 does not support clicks on elements without a set
    // `background-color`. We cannot use `filter` since that's not viewed as a
    // background color by the browser. Thus, a hack is needed.
    // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer
    //
    // For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we
    // set alpha transparency for the best results possible.
    background-color: #000 \9; // IE8
    background-color: rgba(0, 0, 0, 0); // IE9

    border: 1px solid $carousel-indicator-border-color;
    border-radius: 10px;
  }

  .active {
    width: 12px;
    height: 12px;
    margin: 0;
    background-color: $carousel-indicator-active-bg;
  }
}

// Optional captions
// -----------------------------
// Hidden by default for smaller viewports
.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 20px;
  left: 15%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: $carousel-caption-color;
  text-align: center;
  text-shadow: $carousel-text-shadow;

  & .btn {
    text-shadow: none; // No shadow for button elements in carousel-caption
  }
}


// Scale up controls for tablets and up
@media screen and (min-width: $screen-sm-min) {

  // Scale up the controls a smidge
  .carousel-control {
    .glyphicon-chevron-left,
    .glyphicon-chevron-right,
    .icon-prev,
    .icon-next {
      width: ($carousel-control-font-size * 1.5);
      height: ($carousel-control-font-size * 1.5);
      margin-top: ($carousel-control-font-size / -2);
      font-size: ($carousel-control-font-size * 1.5);
    }
    .glyphicon-chevron-left,
    .icon-prev {
      margin-left: ($carousel-control-font-size / -2);
    }
    .glyphicon-chevron-right,
    .icon-next {
      margin-right: ($carousel-control-font-size / -2);
    }
  }

  // Show and left align the captions
  .carousel-caption {
    right: 20%;
    left: 20%;
    padding-bottom: 30px;
  }

  // Move up the indicators
  .carousel-indicators {
    bottom: 20px;
  }
}


// Utility classes
//
// Utility classes
// --------------------------------------------------


// Floats
// -------------------------

.clearfix {
  @include clearfix;
}
.center-block {
  @include center-block;
}
.pull-right {
  float: right !important;
}
.pull-left {
  float: left !important;
}


// Toggling content
// -------------------------

// Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1
.hide {
  display: none !important;
}
.show {
  display: block !important;
}
.invisible {
  visibility: hidden;
}
.text-hide {
  @include text-hide;
}


// Hide from screenreaders and browsers
//
// Credit: HTML5 Boilerplate

.hidden {
  display: none !important;
}


// For Affix plugin
// -------------------------

.affix {
  position: fixed;
}

//
// Responsive: Utility classes
// --------------------------------------------------


// IE10 in Windows (Phone) 8
//
// Support for responsive views via media queries is kind of borked in IE10, for
// Surface/desktop in split view and for Windows Phone 8. This particular fix
// must be accompanied by a snippet of JavaScript to sniff the user agent and
// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
// our Getting Started page for more information on this bug.
//
// For more information, see the following:
//
// Issue: https://github.com/twbs/bootstrap/issues/10497
// Docs: https://getbootstrap.com/docs/3.4/getting-started/#support-ie10-width
// Source: https://timkadlec.com/2013/01/windows-phone-8-and-device-width/
// Source: https://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/

@at-root {
  @-ms-viewport {
    width: device-width;
  }
}


// Visibility utilities
// Note: Deprecated .visible-xs, .visible-sm, .visible-md, and .visible-lg as of v3.2.0

@include responsive-invisibility('.visible-xs');
@include responsive-invisibility('.visible-sm');
@include responsive-invisibility('.visible-md');
@include responsive-invisibility('.visible-lg');

.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
  display: none !important;
}

@media (max-width: $screen-xs-max) {
  @include responsive-visibility('.visible-xs');
}
.visible-xs-block {
  @media (max-width: $screen-xs-max) {
    display: block !important;
  }
}
.visible-xs-inline {
  @media (max-width: $screen-xs-max) {
    display: inline !important;
  }
}
.visible-xs-inline-block {
  @media (max-width: $screen-xs-max) {
    display: inline-block !important;
  }
}

@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
  @include responsive-visibility('.visible-sm');
}
.visible-sm-block {
  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
    display: block !important;
  }
}
.visible-sm-inline {
  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
    display: inline !important;
  }
}
.visible-sm-inline-block {
  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
    display: inline-block !important;
  }
}

@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
  @include responsive-visibility('.visible-md');
}
.visible-md-block {
  @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
    display: block !important;
  }
}
.visible-md-inline {
  @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
    display: inline !important;
  }
}
.visible-md-inline-block {
  @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
    display: inline-block !important;
  }
}

@media (min-width: $screen-lg-min) {
  @include responsive-visibility('.visible-lg');
}
.visible-lg-block {
  @media (min-width: $screen-lg-min) {
    display: block !important;
  }
}
.visible-lg-inline {
  @media (min-width: $screen-lg-min) {
    display: inline !important;
  }
}
.visible-lg-inline-block {
  @media (min-width: $screen-lg-min) {
    display: inline-block !important;
  }
}

@media (max-width: $screen-xs-max) {
  @include responsive-invisibility('.hidden-xs');
}

@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
  @include responsive-invisibility('.hidden-sm');
}

@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
  @include responsive-invisibility('.hidden-md');
}

@media (min-width: $screen-lg-min) {
  @include responsive-invisibility('.hidden-lg');
}


// Print utilities
//
// Media queries are placed on the inside to be mixin-friendly.

// Note: Deprecated .visible-print as of v3.2.0

@include responsive-invisibility('.visible-print');

@media print {
  @include responsive-visibility('.visible-print');
}
.visible-print-block {
  display: none !important;

  @media print {
    display: block !important;
  }
}
.visible-print-inline {
  display: none !important;

  @media print {
    display: inline !important;
  }
}
.visible-print-inline-block {
  display: none !important;

  @media print {
    display: inline-block !important;
  }
}

@media print {
  @include responsive-invisibility('.hidden-print');
}



/* import React add-ons */

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow {
  margin-left: -8px;
  position: absolute;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before {
  box-sizing: content-box;
  position: absolute;
  border: 8px solid transparent;
  height: 0;
  width: 1px;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before {
  content: "";
  z-index: -1;
  border-width: 8px;
  left: -8px;
  border-bottom-color: #aeaeae;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle {
  top: 0;
  margin-top: -8px;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before {
  border-top: none;
  border-bottom-color: #f0f0f0;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before {
  top: -1px;
  border-bottom-color: #aeaeae;
}

.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow {
  bottom: 0;
  margin-bottom: -8px;
}

.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before {
  border-bottom: none;
  border-top-color: #fff;
}

.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before {
  bottom: -1px;
  border-top-color: #aeaeae;
}

.react-datepicker-wrapper {
  display: inline-block;
}

.react-datepicker {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  background-color: #fff;
  color: #000;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  display: inline-block;
  position: relative;
  width:20rem;
  height:21rem;
}

.react-datepicker__triangle {
  position: absolute;
  left: 50px;
}

.react-datepicker-popper {
  z-index: 10;
}

.react-datepicker-popper[data-placement^="bottom"] {
  margin-top: 10px;
  width: 20rem;
height:20rem;
}

.react-datepicker-popper[data-placement^="top"] {
  margin-bottom: 6px;
}

.react-datepicker-popper[data-placement^="right"] {
  margin-left: 8px;
}

.react-datepicker-popper[data-placement^="right"] .react-datepicker__triangle {
  left: auto;
  right: 42px;
}

.react-datepicker-popper[data-placement^="left"] {
  margin-right: 8px;
}

.react-datepicker-popper[data-placement^="left"] .react-datepicker__triangle {
  left: 42px;
  right: auto;
}

.react-datepicker__header {
  text-align: center;
  background-color: #f0f0f0;
  border-bottom: 1px solid #aeaeae;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
  padding-top: 8px;
  position: relative;
  width:20rem;
  font-size:1.2rem;
}

.react-datepicker__year-dropdown-container--select,
.react-datepicker__month-dropdown-container--select,
.react-datepicker__year-dropdown-container--scroll,
.react-datepicker__month-dropdown-container--scroll {
  display: inline-block;
  margin: 0 2px;
}

.react-datepicker__current-month {
  margin-top: 0;
  color: #000;
  font-weight: bold;
  font-size: 1.2rem;

}

.react-datepicker__navigation {
  line-height: 1.7rem;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 10px;
  width: 0;
  border: 0.55rem solid transparent;
  z-index: 1;
}

.react-datepicker__navigation--previous {
  left: 10px;
  border-right-color: #ccc;
}

.react-datepicker__navigation--previous:hover {
  border-right-color: #b3b2b2;
}

.react-datepicker__navigation--next {
  right: 10px;
  border-left-color: #ccc;
}

.react-datepicker__navigation--next:hover {
  border-left-color: #b3b2b2;
}

.react-datepicker__navigation--years {
  position: relative;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.react-datepicker__navigation--years-previous {
  top: 4px;
  border-top-color: #ccc;
}

.react-datepicker__navigation--years-previous:hover {
  border-top-color: #b3b2b2;
}

.react-datepicker__navigation--years-upcoming {
  top: -4px;
  border-bottom-color: #ccc;
}

.react-datepicker__navigation--years-upcoming:hover {
  border-bottom-color: #b3b2b2;
}

.react-datepicker__month-container {
  display: inline;
  float: left;
  width:20rem;
  height:20rem;
}

.react-datepicker__month {
  margin: 0.4rem;
  text-align: center;
}

.react-datepicker__week-number {
  color: #ccc;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}

.react-datepicker__week-number.react-datepicker__week-number--clickable {
  cursor: pointer;
}

.react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}

.react-datepicker__day-name,
.react-datepicker__day {
  color: #000;
  display: inline-block;
  width: 2.2rem;
  height:2rem;
  line-height: 1.9rem;
  text-align: center;
  margin: 0.166rem;
}

.react-datepicker__day {
  cursor: pointer;
}

.react-datepicker__day:hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}

.react-datepicker__day--today {
  font-weight: bold;
}

.react-datepicker__day--highlighted {
  border-radius: 0.3rem;
  background-color: #3dcc4a;
  color: #fff;
}

.react-datepicker__day--highlighted:hover {
  background-color: #32be3f;
}

.react-datepicker__day--highlighted-custom-1 {
  color: magenta;
}

.react-datepicker__day--highlighted-custom-2 {
  color: green;
}

.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}

.react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover {
  background-color: #1d5d90;
}

.react-datepicker__day--keyboard-selected {
  border-radius: 0.3rem;
  background-color: #2a87d0;
  color: #fff;
}

.react-datepicker__day--keyboard-selected:hover {
  background-color: #1d5d90;
}

.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) {
  background-color: rgba(33, 107, 165, 0.5);
}

.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range) {
  background-color: #f0f0f0;
  color: #000;
}

.react-datepicker__day--disabled {
  cursor: default;
  color: #ccc;
}

.react-datepicker__day--disabled:hover {
  background-color: transparent;
}

.react-datepicker__input-container {
  position: relative;
  display: inline-block;
  margin-left: 2px;
  .fa {
    position: absolute;
    top: 0;
    right: 6px;
    z-index: -1;
  }
  input {
    background: none;
    &:disabled {
      opacity: .6;
    }
  }
}

.react-datepicker__year-read-view,
.react-datepicker__month-read-view {
  border: 1px solid transparent;
  border-radius: 0.3rem;
}

.react-datepicker__year-read-view:hover,
.react-datepicker__month-read-view:hover {
  cursor: pointer;
}

.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow {
  border-top-color: #b3b2b2;
}

.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow {
  border-top-color: #ccc;
  float: right;
  margin-left: 20px;
  top: 8px;
  position: relative;
  border-width: 0.55rem;
}

.react-datepicker__year-dropdown,
.react-datepicker__month-dropdown {
  background-color: #f0f0f0;
  position: absolute;
  width: 50%;
  left: 25%;
  top: 30px;
  z-index: 1;
  text-align: center;
  border-radius: 0.3rem;
  border: 1px solid #aeaeae;
}

.react-datepicker__year-dropdown:hover,
.react-datepicker__month-dropdown:hover {
  cursor: pointer;
}

.react-datepicker__year-dropdown--scrollable,
.react-datepicker__month-dropdown--scrollable {
  height: 150px;
  overflow-y: scroll;
}

.react-datepicker__year-option,
.react-datepicker__month-option {
  line-height: 20px;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.react-datepicker__year-option:first-of-type,
.react-datepicker__month-option:first-of-type {
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}

.react-datepicker__year-option:last-of-type,
.react-datepicker__month-option:last-of-type {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}

.react-datepicker__year-option:hover,
.react-datepicker__month-option:hover {
  background-color: #ccc;
}

.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming {
  border-bottom-color: #b3b2b2;
}

.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous {
  border-top-color: #b3b2b2;
}

.react-datepicker__year-option--selected,
.react-datepicker__month-option--selected {
  position: absolute;
  left: 15px;
}

.react-datepicker__close-icon {
  background-color: transparent;
  border: 0;
  cursor: pointer;
  display: inline-block;
  height: 0;
  outline: 0;
  padding: 0;
  vertical-align: middle;
}

.react-datepicker__close-icon::after {
  background-color: #216ba5;
  border-radius: 50%;
  bottom: 0;
  box-sizing: border-box;
  color: #fff;
  content: "\00d7";
  cursor: pointer;
  font-size: 12px;
  height: 16px;
  width: 16px;
  line-height: 1;
  margin: -8px auto 0;
  padding: 2px;
  position: absolute;
  right: 7px;
  text-align: center;
  top: 50%;
}

.react-datepicker__today-button {
  background: #f0f0f0;
  border-top: 1px solid #aeaeae;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  padding: 5px 0;
  clear: left;
}

.react-datepicker__portal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  left: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 2147483647;
}

.react-datepicker__portal .react-datepicker__day-name,
.react-datepicker__portal .react-datepicker__day {
  width: 3rem;
  line-height: 3rem;
}

@media (max-width: 400px), (max-height: 550px) {
  .react-datepicker__portal .react-datepicker__day-name,
  .react-datepicker__portal .react-datepicker__day {
    width: 2rem;
    line-height: 2rem;
  }
}

.react-datepicker__portal .react-datepicker__current-month {
  font-size: 1.44rem;
}

.react-datepicker__portal .react-datepicker__navigation {
  border: 0.81rem solid transparent;
}

.react-datepicker__portal .react-datepicker__navigation--previous {
  border-right-color: #ccc;
}

.react-datepicker__portal .react-datepicker__navigation--previous:hover {
  border-right-color: #b3b2b2;
}

.react-datepicker__portal .react-datepicker__navigation--next {
  border-left-color: #ccc;
}

.react-datepicker__portal .react-datepicker__navigation--next:hover {
  border-left-color: #b3b2b2;
}

.date-picker-container {
  position: relative;
  .fa {
    position: absolute;
    top: 9px;
    right: 6px;
    z-index: -1;
  }
}
.react-autosuggest__suggestions-container {
  display: none;
}

.react-autosuggest__suggestions-container--open {
  display: block;
  border: 1px solid #ccc;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  background-color: #fff;
  font-weight: 300;
  font-size: 16px;
  max-height: 31rem;
  overflow-y: auto;
  position: absolute;
  width: 100%;
  z-index: 2;

  ul.react-autosuggest__suggestions-list {
    li.react-autosuggest__suggestion {
      cursor: pointer;
      padding: 8px 20px;
    }
  }
}

.react-autosuggest__suggestion--highlighted {
  background-color: #f8f8f8;
}

.react-autosuggest__suggestions-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.react-autosuggest__container {
  position: relative;
}

.react-autosuggest__input {
  width: 100%;
  height: 30px;
  padding: 10px;
  font-family: Helvetica, sans-serif;
  font-weight: 300;
  font-size: 16px;
  border: 1px solid #aaa;
  border-radius: 4px;
}

.react-autosuggest__input--focused {
  outline: none;
}

.react-autosuggest__input--open {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.PowerSelect{cursor:pointer;border:1px solid #ccc;border-radius:4px;background-color:#fff}.PowerSelect:focus{outline:none}.PowerSelect--focused{border-color:#66afe9}.PowerSelect--disabled{background-color:#eee;cursor:not-allowed}.PowerSelect--disabled .PowerSelect__Trigger{pointer-events:none}.PowerSelect--disabled .PowerSelect__TriggerInput{background-color:#eee}.PowerSelect--open.tether-target-attached-top{border-top-right-radius:0;border-top-left-radius:0;border-top:0}.PowerSelect--open.tether-target-attached-bottom{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom:0}.PowerSelect--open .PowerSelect__TriggerStatus:before{transform:rotate(-180deg)}.PowerSelect__Trigger{position:relative;height:34px;overflow:hidden;white-space:nowrap}.PowerSelect__Menu{background-color:#fff;border:1px solid #ccc}.PowerSelect__Menu:focus{outline:none}.PowerSelect__Options{position:relative;max-height:238px;overflow:auto}.PowerSelect__OptGroup{padding-left:8px}.PowerSelect__OptGroup__Label{font-weight:700;font-size:.9em;color:#666;padding:8px 0 4px}.PowerSelect__Option{cursor:pointer;padding:8px 12px}.PowerSelect__Option:not(.PowerSelect__Option--disabled):hover{background-color:#fbfbfb}.PowerSelect__Option--disabled{color:#999;cursor:not-allowed}.PowerSelect__Option--highlighted{background-color:#f1f1f1}.PowerSelect__BeforeOptions{padding:8px 12px}.PowerSelect__Placeholder{color:#ccc;font-size:14px}.PowerSelect__SearchInputContainer{padding:8px}.PowerSelect__SearchInput{display:block;width:100%;height:34px;padding:4px 8px;line-height:1.4;font-size:inherit;border:1px solid #ccc;border-radius:2px;cursor:pointer}.PowerSelect__SearchInput:focus{border-color:#66afe9;outline:none}.PowerSelect__TriggerInput{display:inline-block;width:100%;height:34px;border:none;cursor:pointer;padding:4px 8px;font-size:inherit;border-top-left-radius:4px;border-bottom-left-radius:4px}.PowerSelect__TriggerInput:focus{outline:none}.PowerSelect__Trigger__LHS,.PowerSelect__Trigger__RHS{display:table-cell;vertical-align:middle;white-space:nowrap}.PowerSelect__TriggerLabel{padding:6px 8px;overflow:hidden;max-width:0;text-overflow:ellipsis}.PowerSelect__Trigger__LHS+.PowerSelect__TriggerLabel{padding-left:4px}.PowerSelect__TriggerStatus{padding-top:2px;padding-right:8px;padding-left:4px}.PowerSelect__TriggerStatus:before{content:"";display:block;border-top:4px solid #ccc;border-left:4px solid transparent;border-right:4px solid transparent}.PowerSelect__Clear{padding:4px;color:#888}.PowerSelect__Clear:hover{color:#333}.PowerSelect__Clear:before{content:"\D7"}.PowerSelect__Trigger--empty .PowerSelect__Clear{visibility:hidden}.PowerSelect__Clear,.PowerSelect__TriggerInputContainer,.PowerSelect__TriggerLabel,.PowerSelect__TriggerStatus,.PowerSelectMultiple__OptionsContainer{display:table-cell;width:100%;vertical-align:middle;height:34px}.PowerSelectMultiple__OptionsContainer{padding-top:2px;padding-bottom:2px}.PowerSelectMultiple__SelectedOptions{list-style:none;padding-left:0;display:block}.PowerSelectMultiple__SelectedOptions:after{content:"";display:table;clear:both}.PowerSelectMultiple__SelectedOptions>li{display:block;float:left;margin-top:2px;margin-bottom:2px}.PowerSelect__Trigger--empty .PowerSelectMultiple_TriggerInputContainer{float:none;margin-left:4px}.PowerSelectMultiple__SelectedOption{line-height:24px;margin-left:4px;background-color:#ebeeff;border:1px solid #c6cfff}.PowerSelectMultiple__SelectedOption__Close,.PowerSelectMultiple__SelectedOption__Label{padding:0 6px;display:block;float:left}.PowerSelectMultiple__SelectedOption__Close{border-left:1px solid #c6cfff;cursor:pointer}.PowerSelectMultiple__SelectedOption__Close:hover{background-color:#dce1ff}.PowerSelectMultiple .PowerSelect__Trigger{white-space:normal;height:auto}.PowerSelectMultiple .PowerSelect__TriggerInput{display:inline-block;width:auto;padding:0;height:26px;margin-left:4px}.PowerSelectMultiple .PowerSelect__Trigger--empty .PowerSelect__TriggerInput{width:100%}
.PowerSelect__Tether {
  z-index: 99999;
}

//then import the component variables that are exposed for clients importing the scss version of this library
/*
	Main variables of the component library.

	Client applications are invited to override these by using SASS.

	These clients should not use the prepackaged labo-components.css, but should generate their own CSS based on:
	- bootstrap-sass/assets/stylesheets/bootstrap (after npm install bootstrap-sass)
	- _bootstrap-overrides.scss
	- _components-scss
*/

/* ---- Spacing variables ---- */

$default-margin: 10px !default;
$box-shadow-base: 5px 5px 5px !default;
$border-radius: $border-radius-base; /* applying bootstrap variable */

/* ---- Global colors (hopefully with useful semantic designations) ---- */

$hover-color: #3173ad !default;
$highlight-color: #f26c50 !default;
$highlight-color-snippets: #f26c50;
$subdued-color: #888 !default;
$subdued-hover-color: #efefef !default;
$subdued-bg: #f8f8f8 !default;
$fill-color: #468dcb !default;
$border-color: #e3e3e3 !default;
$dark-text: #333 !default;
$list-item-color: #333 !default;
$visited-item: #6e7476;

/* ---- Box shadow colors ---- */

$shadow-subdued: $subdued-color !default;
$shadow-active: $fill-color !default;

/* ---- Annotation ---- */

$annotation-label-color: $dark-text !default;
$annotation-frag-info-color: $fill-color !default;
$annotation-prov-info-color: $dark-text !default;

$image-overlay-bg: rgba(255, 250, 205, 0.2) !default;
$image-overlay-bg-active: rgba(178, 34, 34, 0.2) !default;

$image-overlay-border: 1px solid $subdued-color !default;
$image-overlay-border-active: 1px solid $highlight-color !default;

$image-overlay-border-radius: $border-radius !default;
$image-overlay-border-radius-active: $border-radius !default;

/* ---- Item details ---- */

$metadata-table-label-color: $dark-text;
$metadata-table-first-column-width: 125px !default;

/* ---- Timeline ---- */

$timeline-bg: black !default;

/* ---- Modal ---- */

$modal-backdrop-bg: transparant; /* overriding bootstrap variable */

/* Media Suite specific */

$clOrange: #f26c50;
$clBlue: #468dcb;
$clLightBlue: #9fbdd7;
$clDark: #2d343a;
$clDarkGrey: #9e9290;
$clMediumGrey: #e3d1ce;
$clGreyTint: #eee3e1;
$clGrey: #faf6f6;
$clWhite: #ffffff;
$clRed: desaturate(#f25050, 30%);

$randomColor: rgb(random(255), random(255), random(255));

$clError: $clRed;
$clWarning: #f29650;
$clConfirm: #50f27a;

$clPrimary: $clBlue;
$clPrimaryAlt: $clLightBlue;
$clSecondary: $clOrange;

/* Font */

$fontHeading: 'Maven Pro', sans-serif;
$fontBody: 'Open Sans', sans-serif;

/* Animation */

$transition: 0.2s ease-out;

/* Media Queries */
$break-large: 1340px;
$break-medium: 1290px;
$break-medium-result-list: 991px;
$break-small: 940px;

/* Page */

$maxPageWidth: 1200px;
$maxTextBodyWidth: 800px;
$contentPadding: 40px;

$resourceViewerTabHeight: 50px;


// import image urls
/* Logo */
$logoUrl: url('data:image/svg+xml;base64, ');
$logoDarkUrl: url('data:image/svg+xml;base64, ');

/* Arrows */
$arrowLeftDarkUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjEyLjcyOCIgd2lkdGg9IjYuNzAyNyIgdmVyc2lvbj0iMS4xIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDYuNzAyNjkwMSAxMi43Mjc3Ij4KIDx0aXRsZT5hcnJvdzwvdGl0bGU+CiA8ZGVzYz5DcmVhdGVkIHVzaW5nIEZpZ21hPC9kZXNjPgogPGcgaWQ9IkNhbnZhcyIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgODg4Ljc2IC01NzAzLjMpIj4KICA8ZyBpZD0iYXJyb3ciPgogICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoMF9maWxsIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4ODIuMDYsNTcwMy4zKSIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSIgeT0iMCIgeD0iMCIgZmlsbD0iIzg4N2M3YSIvPgogIDwvZz4KIDwvZz4KIDxkZWZzPgogIDxwYXRoIGlkPSJwYXRoMF9maWxsIiBkPSJtMCAxMC4xODcgNC4wMjY2LTMuODIzMi00LjAyNjYtMy44MjMydi0yLjU0MDZsNi43MDI3IDYuMzYzOC02LjcwMjcgNi4zNjQyeiIvPgogPC9kZWZzPgo8L3N2Zz4K');
$arrowRightUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTIuNzI4IiB3aWR0aD0iNi43MDI3IiB2ZXJzaW9uPSIxLjEiIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNi43MDI2OTAxIDEyLjcyNzciIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyI+CiA8bWV0YWRhdGE+CiAgPHJkZjpSREY+CiAgIDxjYzpXb3JrIHJkZjphYm91dD0iIj4KICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgPGRjOnR5cGUgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIvPgogICAgPGRjOnRpdGxlPmFycm93PC9kYzp0aXRsZT4KICAgPC9jYzpXb3JrPgogIDwvcmRmOlJERj4KIDwvbWV0YWRhdGE+CiA8dGl0bGU+YXJyb3c8L3RpdGxlPgogPGRlc2M+Q3JlYXRlZCB1c2luZyBGaWdtYTwvZGVzYz4KIDxnIGlkPSJDYW52YXMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC04ODIuMDYgLTU3MDMuMykiPgogIDxnIGlkPSJhcnJvdyI+CiAgIDx1c2UgeGxpbms6aHJlZj0iI3BhdGgwX2ZpbGwiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg4Mi4wNiA1NzAzLjMpIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiB5PSIwIiB4PSIwIiBmaWxsPSIjZTNkMWNlIi8+CiAgPC9nPgogPC9nPgogPGRlZnM+CiAgPHBhdGggaWQ9InBhdGgwX2ZpbGwiIGQ9Im0wIDEwLjE4NyA0LjAyNjYtMy44MjMyLTQuMDI2Ni0zLjgyMzJ2LTIuNTQwNmw2LjcwMjcgNi4zNjM4LTYuNzAyNyA2LjM2NDJ6Ii8+CiA8L2RlZnM+Cjwvc3ZnPgo=');
$arrowRightDarkUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjEyLjcyOCIgd2lkdGg9IjYuNzAyNyIgdmVyc2lvbj0iMS4xIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDYuNzAyNjkwMSAxMi43Mjc3Ij4KIDx0aXRsZT5hcnJvdzwvdGl0bGU+CiA8ZGVzYz5DcmVhdGVkIHVzaW5nIEZpZ21hPC9kZXNjPgogPGcgaWQ9IkNhbnZhcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTg4Mi4wNiAtNTcwMy4zKSI+CiAgPGcgaWQ9ImFycm93Ij4KICAgPHVzZSB4bGluazpocmVmPSIjcGF0aDBfZmlsbCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODgyLjA2IDU3MDMuMykiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiIHk9IjAiIHg9IjAiIGZpbGw9IiM4ODdjN2EiLz4KICA8L2c+CiA8L2c+CiA8ZGVmcz4KICA8cGF0aCBpZD0icGF0aDBfZmlsbCIgZD0ibTAgMTAuMTg3IDQuMDI2Ni0zLjgyMzItNC4wMjY2LTMuODIzMnYtMi41NDA2bDYuNzAyNyA2LjM2MzgtNi43MDI3IDYuMzY0MnoiLz4KIDwvZGVmcz4KPC9zdmc+Cg==');
$arrowRightWhite40Url: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjEyLjcyOCIgd2lkdGg9IjYuNzAyNyIgdmVyc2lvbj0iMS4xIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDYuNzAyNjkwMSAxMi43Mjc3Ij4KIDx0aXRsZT5hcnJvdzwvdGl0bGU+CiA8ZGVzYz5DcmVhdGVkIHVzaW5nIEZpZ21hPC9kZXNjPgogPGcgaWQ9IkNhbnZhcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTg4Mi4wNiAtNTcwMy4zKSI+CiAgPGcgaWQ9ImFycm93Ij4KICAgPHVzZSBvcGFjaXR5PSIuNCIgeGxpbms6aHJlZj0iI3BhdGgwX2ZpbGwiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg4Mi4wNiA1NzAzLjMpIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiB5PSIwIiB4PSIwIiBmaWxsPSIjZmZmZmZmIi8+CiAgPC9nPgogPC9nPgogPGRlZnM+CiAgPHBhdGggaWQ9InBhdGgwX2ZpbGwiIGQ9Im0wIDEwLjE4NyA0LjAyNjYtMy44MjMyLTQuMDI2Ni0zLjgyMzJ2LTIuNTQwNmw2LjcwMjcgNi4zNjM4LTYuNzAyNyA2LjM2NDJ6Ii8+CiA8L2RlZnM+Cjwvc3ZnPgo=');
$arrowDownUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNi43MDI3IiB3aWR0aD0iMTIuNzI4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTIuNzI4IDYuNzAyNTUyMyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIj4KIDxtZXRhZGF0YT4KICA8cmRmOlJERj4KICAgPGNjOldvcmsgcmRmOmFib3V0PSIiPgogICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICA8ZGM6dHlwZSByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIi8+CiAgICA8ZGM6dGl0bGU+YXJyb3c8L2RjOnRpdGxlPgogICA8L2NjOldvcms+CiAgPC9yZGY6UkRGPgogPC9tZXRhZGF0YT4KIDx0aXRsZT5hcnJvdzwvdGl0bGU+CiA8ZGVzYz5DcmVhdGVkIHVzaW5nIEZpZ21hPC9kZXNjPgogPGcgaWQ9IkNhbnZhcyIgdHJhbnNmb3JtPSJyb3RhdGUoOTAgMzI5OSAyNDE3KSI+CiAgPGcgaWQ9ImFycm93Ij4KICAgPHVzZSB4bGluazpocmVmPSIjcGF0aDBfZmlsbCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODgyLjA2LDU3MDMuMykiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiIHk9IjAiIHg9IjAiIGZpbGw9IiNlM2QxY2UiLz4KICA8L2c+CiA8L2c+CiA8ZGVmcz4KICA8cGF0aCBpZD0icGF0aDBfZmlsbCIgZD0ibTAgMTAuMTg3IDQuMDI2Ni0zLjgyMzItNC4wMjY2LTMuODIzMnYtMi41NDA2bDYuNzAyNyA2LjM2MzgtNi43MDI3IDYuMzY0MnoiLz4KIDwvZGVmcz4KPC9zdmc+Cg==');
$arrowDownDarkUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjYuNzAyNyIgd2lkdGg9IjEyLjcyOCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTIuNzI4IDYuNzAyNTUxOCI+CiA8dGl0bGU+YXJyb3c8L3RpdGxlPgogPGRlc2M+Q3JlYXRlZCB1c2luZyBGaWdtYTwvZGVzYz4KIDxnIGlkPSJDYW52YXMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0uMTE5MjQgLS4xNzc1NCkiPgogIDxnIGlkPSJhcnJvdyI+CiAgIDxwYXRoIGQ9Im0yLjY2MDIgMC4xNzc0NyAzLjgyMzIgNC4wMjY2IDMuODIzMi00LjAyNjZoMi41NDA2bC02LjM2MzggNi43MDI3LTYuMzY0Mi02LjcwMjd6IiBmaWxsPSIjODg3YzdhIi8+CiAgPC9nPgogPC9nPgo8L3N2Zz4K');
$arrowUpUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNi43MDI3IiB3aWR0aD0iMTIuNzI4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTIuNzI4IDYuNzAyNTUyMyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIj4KIDxtZXRhZGF0YT4KICA8cmRmOlJERj4KICAgPGNjOldvcmsgcmRmOmFib3V0PSIiPgogICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICA8ZGM6dHlwZSByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIi8+CiAgICA8ZGM6dGl0bGU+YXJyb3c8L2RjOnRpdGxlPgogICA8L2NjOldvcms+CiAgPC9yZGY6UkRGPgogPC9tZXRhZGF0YT4KIDx0aXRsZT5hcnJvdzwvdGl0bGU+CiA8ZGVzYz5DcmVhdGVkIHVzaW5nIEZpZ21hPC9kZXNjPgogPGcgaWQ9IkNhbnZhcyIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIC0yNDA3LjMgMzI5NikiPgogIDxnIGlkPSJhcnJvdyI+CiAgIDx1c2UgeGxpbms6aHJlZj0iI3BhdGgwX2ZpbGwiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg4Mi4wNiw1NzAzLjMpIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiB5PSIwIiB4PSIwIiBmaWxsPSIjZTNkMWNlIi8+CiAgPC9nPgogPC9nPgogPGRlZnM+CiAgPHBhdGggaWQ9InBhdGgwX2ZpbGwiIGQ9Im0wIDEwLjE4NyA0LjAyNjYtMy44MjMyLTQuMDI2Ni0zLjgyMzJ2LTIuNTQwNmw2LjcwMjcgNi4zNjM4LTYuNzAyNyA2LjM2NDJ6Ii8+CiA8L2RlZnM+Cjwvc3ZnPgo=');
$arrowUpDarkUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjYuNzAyNyIgd2lkdGg9IjEyLjcyOCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTIuNzI4IDYuNzAyNTUxOCI+CiA8dGl0bGU+YXJyb3c8L3RpdGxlPgogPGRlc2M+Q3JlYXRlZCB1c2luZyBGaWdtYTwvZGVzYz4KIDxnIGlkPSJDYW52YXMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0uMTE5MjQgLS4xNzc1NCkiPgogIDxnIGlkPSJhcnJvdyI+CiAgIDxwYXRoIGQ9Im0xMC4zMDYgNi44ODAyLTMuODIzMi00LjAyNjYtMy44MjMyIDQuMDI2NmgtMi41NDA2bDYuMzYzOC02LjcwMjcgNi4zNjQyIDYuNzAyN3oiIGZpbGw9IiM4ODdjN2EiLz4KICA8L2c+CiA8L2c+Cjwvc3ZnPgo=');

/* Icons */
$iconPersonUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjMuMTU0IiB3aWR0aD0iMTcuOTAzIiB2ZXJzaW9uPSIxLjEiIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTcuOTAzNCAyMy4xNTM5OTkiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyI+CiA8bWV0YWRhdGE+CiAgPHJkZjpSREY+CiAgIDxjYzpXb3JrIHJkZjphYm91dD0iIj4KICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgPGRjOnR5cGUgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIvPgogICAgPGRjOnRpdGxlPlBlcnNvbjwvZGM6dGl0bGU+CiAgIDwvY2M6V29yaz4KICA8L3JkZjpSREY+CiA8L21ldGFkYXRhPgogPHRpdGxlPlBlcnNvbjwvdGl0bGU+CiA8ZGVzYz5DcmVhdGVkIHVzaW5nIEZpZ21hPC9kZXNjPgogPGcgaWQ9IkNhbnZhcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTgyNy45NyAtNTY5OC4xKSI+CiAgPGcgaWQ9IlBlcnNvbiI+CiAgIDx1c2UgeGxpbms6aHJlZj0iI3BhdGgwX2ZpbGwiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDgyNy45NyA1Njk4LjEpIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiB5PSIwIiB4PSIwIiBmaWxsPSIjZTNkMWNlIi8+CiAgPC9nPgogPC9nPgogPGRlZnM+CiAgPHBhdGggaWQ9InBhdGgwX2ZpbGwiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0ibTguOTUxNiA3LjkzN2MxLjg5NTUgMCAzLjQ0MjItMS41NDczIDMuNDQyMi0zLjQ2ODVzLTEuNTQ3LTMuNDY4NS0zLjQ0MjQtMy40Njg1Yy0xLjg5NTUgMC0zLjQ0MjIgMS41NDczLTMuNDQyMiAzLjQ2ODVzMS41NDY3IDMuNDY4NSAzLjQ0MjIgMy40Njg1em0tNC42Nzg5IDQuMDkxYy0xLjk4NTEgMS40NDgtMy4yNzI3IDMuNzkyLTMuMjcyNyA2LjQzNS0wLjAwNDQyMyAwLjkzODcgMC4xMzkzNCAxLjc3MzYgMC40Mjg3OSAyLjU5NDcgMi4zOTg2IDAuNzIyOSA0Ljg4MjEgMS4wOTkyIDcuNTIyOCAxLjA5NjIgMi42NDA4IDAuMDAzIDUuMTI0My0wLjM3MzMgNy41MjMxLTEuMDk2MiAwLjI4OTQtMC44MjExIDAuNDMzMi0xLjY1NiAwLjQyODctMi41OTQ3IDAtMi42NDMxLTEuMjg3Ny00Ljk4NzMtMy4yNzMtNi40MzU1LTEuMzg5MiAwLjcwNjctMy4wMzU5IDEuMTM0OS00LjY3OSAxLjE0NC0xLjY0MzEtMC4wMDkxLTMuMjg5OC0wLjQzNzMtNC42Nzg3LTEuMTQ0em0tMC4wNTMtMS4xNzAyYy0yLjUzMzggMS41ODEtNC4yMTk3IDQuMzk3LTQuMjE5NyA3LjYwNSAwIDEuMjA1MSAwLjIzODA0IDIuMzU1NyAwLjY2OTQyIDMuNDA1NyAyLjYxMTMgMC44MzUyIDUuMzk0MSAxLjI4NTIgOC4yODIyIDEuMjg1MnM1LjY3MDktMC40NSA4LjI4MjQtMS4yODUyYzAuNDMxNC0xLjA1IDAuNjY5NC0yLjIwMDYgMC42Njk0LTMuNDA1NyAwLTMuMjA4LTEuNjg2MS02LjAyMzktNC4yMi03LjYwNTctMS4zODM0IDAuODMzNS0zLjAwMiAxLjMxNDItNC43MzIgMS4zMTQycy0zLjM0ODYtMC40ODA3LTQuNzMxNy0xLjMxNDJ6bTQuNzMxOS0xLjkyMWMyLjQ1MzQgMCA0LjQ0MjItMi4wMDA2IDQuNDQyMi00LjQ2ODVzLTEuOTg5LTQuNDY4NS00LjQ0MjQtNC40Njg1Yy0yLjQ1MzMgMC00LjQ0MjIgMi4wMDA2LTQuNDQyMiA0LjQ2ODVzMS45ODg4IDQuNDY4NSA0LjQ0MjIgNC40Njg1eiIvPgogPC9kZWZzPgo8L3N2Zz4K');
$iconWorkspaceUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTYuNTA0IiB3aWR0aD0iMjAuMjM2IiB2ZXJzaW9uPSIxLjEiIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjAuMjM2MyAxNi41MDM5MDEiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyI+IAogIDxnIGlkPSJpY29uLXdvcmtzcGFjZSI+CiAgIDx1c2UgeGxpbms6aHJlZj0iI3BhdGgwX2ZpbGwiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiIHk9IjAiIHg9IjAiIGZpbGw9IiNlM2QxY2UiLz4KICA8L2c+CiA8ZGVmcz4KICA8cGF0aCBpZD0icGF0aDBfZmlsbCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJtMS4wMDc1IDMuOTIzMS0wLjAwNTggMC4wNzU5Yy0wLjAwMTgzIDAuMDIwMy0wLjAwMTg2IDAuMDIyOC0wLjAwMTcgMC4wNDU5djEwLjg0OWMwIDAuMzM2MiAwLjI3Mjc5IDAuNjA5NCAwLjYwOTg2IDAuNjA5NGgxNy4wMTZjMC4zMzcgMCAwLjYwOTgtMC4yNzMyIDAuNjA5OC0wLjYwOTR2LTEwLjg0OWMwLTAuMzM2MTktMC4yNzI4LTAuNjA5MzctMC42MDk4LTAuNjA5MzdoLTExLjMyNHYtMS44MjYyYy0wLjAwMDUtMC4zMzYzLTAuMjczNC0wLjYwOTQtMC42MTAxLTAuNjA5NGgtNS4wODE4Yy0wLjMzNzEgMC0wLjYwOTkgMC4yNzMyLTAuNjA5OSAwLjYwOTR2Mi4xOTM0Yy0wLjAwMDE3IDAuMDIyMjgtMC4wMDAxMSAwLjAyMzk0IDAuMDAxNiAwLjA0NDM1em0tMS4wMDI5LTAuMDAxMmMtMC4wMDMxNzM5IDAuMDQxLTAuMDA0NjM4NyAwLjA4Mi0wLjAwNDYzODcgMC4xMjN2MTAuODQ5YzAgMC44ODg3IDAuNzIwNyAxLjYwOTQgMS42MDk5IDEuNjA5NGgxNy4wMTZjMC44ODkxIDAgMS42MDk4LTAuNzIwNyAxLjYwOTgtMS42MDk0di0xMC44NDljMC0wLjg4ODY3LTAuNzIwNy0xLjYwOTQtMS42MDk4LTEuNjA5NGgtMTAuMzI0di0wLjgyNjJjLTAuMDAwNS0wLjg4ODctMC43MjEyLTEuNjA5NC0xLjYxMDEtMS42MDk0aC01LjA4MThjLTAuODg5MTUgMC0xLjYwOTkgMC43MjA3LTEuNjA5OSAxLjYwOTR2Mi4xOTM0YzAgMC4wNDEwMiAwLjAwMTQ2NDggMC4wODAwOCAwLjAwNDM5NDUgMC4xMTkxNXoiLz4KIDwvZGVmcz4KPC9zdmc+Cg==');
$iconSearchUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjEzLjY4OSIgd2lkdGg9IjEzLjkxOCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTMuOTE4Mzg3IDEzLjY4OTg0Ij4KIDx0aXRsZT5WZWN0b3I8L3RpdGxlPgogPGRlc2M+Q3JlYXRlZCB1c2luZyBGaWdtYTwvZGVzYz4KIDxnIGlkPSJWZWN0b3IiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0uNzAwMzggLS4yMDExNykiPgogIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZmlsbD0iIzg4N2M3YSIgZD0ibTUuODY3MiAwLjIwMTE3Yy0xLjMyMjIgMC0yLjY0NTMgMC41MDMyMi0zLjY1NDMgMS41MTE3LTIuMDE3IDIuMDE4LTIuMDE3IDUuMjg4NiAwIDcuMzA2NiAxLjc4MzggMS43ODI5IDQuNTQ1NiAxLjk4ODMgNi41NTY2IDAuNjE5MTRsNC4yNTE1IDQuMjUyNCAxLjU5OC0xLjYwMi00LjMwNS00LjMwNDZjMS4xNjctMS45ODA4IDAuOTA2LTQuNTcwMi0wLjc5NDUtNi4yNzE1LTEuMDA5LTEuMDA4NS0yLjMzMDEtMS41MTE3LTMuNjUyMy0xLjUxMTd6bTAgMS4xMDE2YzEuMDQgMCAyLjA3OTUgMC4zOTU5NSAyLjg3MyAxLjE4OTUgMS41ODcgMS41ODcgMS41ODcgNC4xNjEgMCA1Ljc0OHMtNC4xNjEgMS41ODctNS43NDggMC0xLjU4Ny00LjE2MSAwLTUuNzQ4YzAuNzkzNS0wLjc5MzUgMS44MzUtMS4xODk1IDIuODc1LTEuMTg5NXoiLz4KIDwvZz4KPC9zdmc+Cg==');
$iconSearchWhiteUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjE5LjY2MSIgd2lkdGg9IjE5LjcwNiIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNS4yMTM4OTYzIDUuMjAxOTAwNSI+CiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMzkuMDkgLTM2LjAwOCkiPgogIDxwYXRoIGQ9Im0zOS42OCAzNi41OThhMi4wMTQxIDIuMDE0MSAwIDAgMCAtMC4wMDAwMDEgMi44NDg0IDIuMDE0MSAyLjAxNDEgMCAwIDAgMi41Nzc5IDAuMjI2MjhjMC4wMDg5IDAuMDkxNjUgMC4wNDg5MiAwLjE4MDkyIDAuMTIwMjIgMC4yNTE0bDEuMTc5IDEuMTY1M2MwLjE2Mjg5IDAuMTYwOTggMC40MjUxNSAwLjE2MDg5IDAuNTg4MDMtMC4wMDAwOTFsMC4wMzY3My0wLjAzNjE3YzAuMTYyODktMC4xNjA5OCAwLjE2Mjg4LTAuNDIwMiAwLjAwMDAwMS0wLjU4MTE4bC0xLjE3OS0xLjE2NmMtMC4wNzIzNi0wLjA3MTUxLTAuMTY0MzctMC4xMTExNS0wLjI1ODUyLTAuMTE5MTJhMi4wMTQxIDIuMDE0MSAwIDAgMCAtMC4yMTU5NiAtMi41ODk1IDIuMDE0MSAyLjAxNDEgMCAwIDAgLTIuODQ4NCAwem0wLjMwMDczIDAuMzAwNzNhMS41ODg5IDEuNTg4OSAwIDAgMSAyLjI0NyAtMC4wMDAwOTEgMS41ODg5IDEuNTg4OSAwIDAgMSAtMC4wMDAwMDEgMi4yNDcxIDEuNTg4OSAxLjU4ODkgMCAwIDEgLTIuMjQ3MSAwIDEuNTg4OSAxLjU4ODkgMCAwIDEgMC4wMDAwOTEgLTIuMjQ3eiIgZmlsbD0iI2ZmZiIvPgogPC9nPgo8L3N2Zz4K');
$iconHomeUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjMuMjY2bW0iIHdpZHRoPSIzLjU4MDFtbSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMy41ODAxMzAxIDMuMjY1OTYzMSI+CiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTYuMzUzIC0yNC43MzYpIj4KICA8cGF0aCBkPSJtMTguMTQzIDI0LjczNi0xLjc5MDEgMS44MjczaDAuMzYwNzF2MS40Mzg3aDIuODU4MnYtMS40Mzg3aDAuMzYxMjF6bTAgMC4zNzk4MSAxLjE2NjMgMS4xODI5djEuNDM4MWgtMi4zMjdsLTAuMDAzMi0xLjQzODF6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiM0NjhkY2IiLz4KIDwvZz4KPC9zdmc+Cg==');
$iconHelpUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjQuNDY0OG1tIiB3aWR0aD0iMi41MDY5bW0iIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDIuNTA2OTI3IDQuNDY0ODM5OSI+CiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtODIuNjU3IC04NC42MTMpIj4KICA8cGF0aCBzdHJva2Utd2lkdGg9Ii4yNjQ1OCIgZmlsbD0iI2ZmZiIgZD0ibTgzLjI3OSA4Ny43MjJjMC0wLjIyMDQ4IDAuMDI4NjYtMC40MTAxIDAuMDg1OTktMC41Njg4NSAwLjA2MTczLTAuMTU4NzUgMC4xMzQ1LTAuMjg2NjMgMC4yMTgyOC0wLjM4MzY1IDAuMDgzNzktMC4xMDE0MiAwLjE4OTYyLTAuMjA5NDYgMC4zMTc1LTAuMzI0MTEgMC4xMjM0Ny0wLjExNDY1IDAuMjExNjctMC4yMDk0NiAwLjI2NDU4LTAuMjg0NDMgMC4wNTczMy0wLjA3OTM3IDAuMDg1OTktMC4xNjk3OCAwLjA4NTk5LTAuMjcxMiAwLTAuMTg1MjEtMC4wNTUxMi0wLjMwNjQ4LTAuMTY1MzYtMC4zNjM4LTAuMTEwMjQtMC4wNTczMy0wLjI1NTc2LTAuMDg1OTktMC40MzY1Ni0wLjA4NTk5LTAuMTY3NTcgMC0wLjM0MTc2IDAuMDI4NjYtMC41MjI1NSAwLjA4NTk5LTAuMTgwOCAwLjA1NzMzLTAuMzM3MzQgMC4xMzg5MS0wLjQ2OTY0IDAuMjQ0NzR2LTAuODQ2NjdjMC4xMjc4OC0wLjA4ODE5IDAuMjk1NDUtMC4xNjA5NiAwLjUwMjcxLTAuMjE4MjggMC4yMDcyNi0wLjA2MTc0IDAuNDE4OTItMC4wOTI2IDAuNjM1LTAuMDkyNiAwLjQ3NjI1IDAgMC44MjI0MSAwLjEyMzQ3IDEuMDM4NSAwLjM3MDQyIDAuMjIwNDggMC4yNDY5NCAwLjMzMDczIDAuNTUxMjEgMC4zMzA3MyAwLjkxMjgxIDAgMC4yMTYwOC0wLjA0MTg5IDAuMzkwMjYtMC4xMjU2OCAwLjUyMjU1cy0wLjIwOTQ2IDAuMjc1NjEtMC4zNzcwMyAwLjQyOTk1Yy0wLjE1ODc1IDAuMTQ5OTMtMC4yNzc4MSAwLjI4NjYzLTAuMzU3MTkgMC40MTAxLTAuMDc5MzcgMC4xMjM0OC0wLjExOTA2IDAuMjg0NDMtMC4xMTkwNiAwLjQ4Mjg2djAuMDY2MTVoLTAuOTA2MnptLTAuMDU5NTMgMC41MDkzMmgxLjAyNTN2MC44NDdoLTEuMDI1eiIvPgogPC9nPgo8L3N2Zz4K');
$iconCrossUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9Ii42MTg2M21tIiB3aWR0aD0iLjYxODk5bW0iIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDAuNjE4OTkwMDkgMC42MTg2MzM1NyI+CiA8ZyB0cmFuc2Zvcm09InJvdGF0ZSg0NSAxODQuNzQgLTcuNTA1MSkiPgogIDxwYXRoIGQ9Im01OS43OSAxMjguMDZ2MC4zMDk1NGgtMC4zMDk1NHYwLjEyODE1aDAuMzF2MC4zMDkwM2gwLjEyODE2di0wLjMwOTAzaDAuMzA5MDJ2LTAuMTI4MTVoLTAuMzA5di0wLjMxeiIgZmlsbD0iI2ZmZiIvPgogPC9nPgo8L3N2Zz4K');
$iconPlusUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9Ii43NDY3Mm1tIiB3aWR0aD0iLjc0NjczbW0iIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDAuNzQ2NzI1MDMgMC43NDY3MjAwMiI+CiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNTkuNDggLTEyOC4wNikiPgogIDxwYXRoIG9wYWNpdHk9Ii40IiBkPSJtNTkuNzkgMTI4LjA2djAuMzA5NTRoLTAuMzA5NTR2MC4xMjgxNWgwLjMwOTU0djAuMzA5MDNoMC4xMjgxNnYtMC4zMDkwM2gwLjMwOTAydi0wLjEyODE1aC0wLjMwOTAydi0wLjMwOTU0eiIgZmlsbD0iI2ZmZiIvPgogPC9nPgo8L3N2Zz4K');
$iconLinkWhiteUrl: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC44MzY1OSAxLjQ5NjA5SDE0LjQ5MzRWNy4xNTI5NUwxMi4zNDQ2IDUuMDA0MTNMNi42ODc3NyAxMC42NjFDNi4zMTI0MyAxMS4wMzYzIDUuNzAzODkgMTEuMDM2MyA1LjMyODU1IDEwLjY2MUM0Ljk1MzIyIDEwLjI4NTYgNC45NTMyMiA5LjY3NzExIDUuMzI4NTUgOS4zMDE3N0wxMC45ODU0IDMuNjQ0OTJMOC44MzY1OSAxLjQ5NjA5WiIgZmlsbD0id2hpdGUiLz48cGF0aCBkPSJNMS45NjI4OSAzLjg0NjJINy43ODUyQzguMDYxMzUgMy44NDYyIDguMjg1MiAzLjYyMjM0IDguMjg1MiAzLjM0NjJDOC4yODUyIDMuMDcwMDYgOC4wNjEzNSAyLjg0NjIgNy43ODUyIDIuODQ2MkgxLjk1NzIyQzEuNDA4MDcgMi44NDYyIDAuOTYyODkxIDMuMjkxMzggMC45NjI4OTEgMy44NDA1M1YxMi45OTM5QzAuOTYyODkxIDEzLjU0MzEgMS40MDgwNyAxMy45ODgyIDEuOTU3MjIgMTMuOTg4MkgxMi4wMzI2QzEyLjU4MTggMTMuOTg4MiAxMy4wMjY5IDEzLjU0MzEgMTMuMDI2OSAxMi45OTM5VjguMDI3MTVDMTMuMDI2OSA3Ljc1MSAxMi44MDMxIDcuNTI3MTUgMTIuNTI2OSA3LjUyNzE1QzEyLjI1MDggNy41MjcxNSAxMi4wMjY5IDcuNzUxIDEyLjAyNjkgOC4wMjcxNVYxMi45ODgySDEuOTYyODlWMy44NDYyWiIgZmlsbD0id2hpdGUiLz48L3N2Zz4=);
$iconLinkUrl: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC44MzY1OSAxLjQ5NjA5SDE0LjQ5MzRWNy4xNTI5NUwxMi4zNDQ2IDUuMDA0MTNMNi42ODc3NyAxMC42NjFDNi4zMTI0MyAxMS4wMzYzIDUuNzAzODkgMTEuMDM2MyA1LjMyODU1IDEwLjY2MUM0Ljk1MzIyIDEwLjI4NTYgNC45NTMyMiA5LjY3NzExIDUuMzI4NTUgOS4zMDE3N0wxMC45ODU0IDMuNjQ0OTJMOC44MzY1OSAxLjQ5NjA5WiIgZmlsbD0iIzJEMzQzQSIvPjxwYXRoIGQ9Ik0xLjk2Mjg5IDMuODQ2Mkg3Ljc4NTJDOC4wNjEzNSAzLjg0NjIgOC4yODUyIDMuNjIyMzQgOC4yODUyIDMuMzQ2MkM4LjI4NTIgMy4wNzAwNiA4LjA2MTM1IDIuODQ2MiA3Ljc4NTIgMi44NDYySDEuOTU3MjJDMS40MDgwNyAyLjg0NjIgMC45NjI4OTEgMy4yOTEzOCAwLjk2Mjg5MSAzLjg0MDUzVjEyLjk5MzlDMC45NjI4OTEgMTMuNTQzMSAxLjQwODA3IDEzLjk4ODIgMS45NTcyMiAxMy45ODgySDEyLjAzMjZDMTIuNTgxOCAxMy45ODgyIDEzLjAyNjkgMTMuNTQzMSAxMy4wMjY5IDEyLjk5MzlWOC4wMjcxNUMxMy4wMjY5IDcuNzUxIDEyLjgwMzEgNy41MjcxNSAxMi41MjY5IDcuNTI3MTVDMTIuMjUwOCA3LjUyNzE1IDEyLjAyNjkgNy43NTEgMTIuMDI2OSA4LjAyNzE1VjEyLjk4ODJIMS45NjI4OVYzLjg0NjJaIiBmaWxsPSIjMkQzNDNBIi8+PC9zdmc+);

$iconProjectUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjkiIHdpZHRoPSIyMS43IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1Ljc0MTI1MzkgNy42NzI5MTY5Ij4gPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTk5LjIgLTM5LjkpIj4gIDxwYXRoIGQ9Im0yIDBjLTEuMSAwLTIgMC44OTUtMiAydjI1YzAgMS4xIDAuODk1IDIgMiAyaDE3LjdjMS4xIDAgMi0wLjkgMi0ydi0xOC45bC04LjEtOC4xaC0xMS42em0wIDFoMTEuMXY0LjA2aC0xMC41bDAuMDEgMi4wOWgxMC43YzAuNCAwLjg3IDEuMyAxLjQ3IDIuMyAxLjQ3aDUuMXYxOC40YzAgMC42LTAuNSAxLTEgMWgtMTcuN2MtMC41NSAwLTEtMC40LTEtMXYtMjVjMC0wLjU1IDAuNDUtMSAxLTF6bTEyLjEgMC45MWw1LjcgNS43MWgtNC4yYy0wLjkgMC0xLjUtMC42Ny0xLjUtMS41di00LjIxem0tMTEuMiA4LjI5djFoMTUuOXYtMWgtMTUuOXptMCAyLjd2MWgxNS45di0xaC0xNS45em0wIDIuN3YxaDE1Ljl2LTFoLTE1Ljl6bTAgMi43djFoMTUuOXYtMWgtMTUuOXptMCAyLjZ2MWgxNS45di0xaC0xNS45em0tMC4wMyAyLjd2MWgxMXYtMWgtMTF6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0ibWF0cml4KC4yNjUgMCAwIC4yNjUgOTkuMiAzOS45KSIgZmlsbD0iIzllOTI5MCIvPiA8L2c+PC9zdmc+');
$iconBookmarkUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNzc1cHgiIGhlaWdodD0iOTgwcHgiIHZpZXdCb3g9IjAgMCA3NzUgOTgwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA1Mi41ICg2NzQ2OSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+U2hhcGU8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iY2IzZmRlZjlkMDhlMmJlZTc0NjVkYmFjZWNiZjljMTMiIGZpbGw9IiM5QjlCOUIiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik03NDEuNSw5ODAgQzczNCw5ODAgNzI2LjYsOTc3LjUgNzIwLjUsOTcyLjYgTDM5MCw3MDcuNCBMNTUuMyw5NzIuNyBDNDUuMiw5ODAuNyAzMS40LDk4Mi4yIDE5LjgsOTc2LjYgQzguMiw5NzEgMC44LDk1OS4zIDAuOCw5NDYuNCBMMC44LDMzLjYgQzAuOCwxNS4xIDE1LjgsMCAzNC40LDAgTDc0MS40LDAgQzc1OS45LDAgNzc1LDE1IDc3NSwzMy42IEw3NzUsOTQ2LjUgQzc3NSw5NTkuNCA3NjcuNiw5NzEuMiA3NTYsOTc2LjggQzc1MS40LDk3OC45IDc0Ni41LDk4MCA3NDEuNSw5ODAgWiBNNjgsNjcuMSBMNjgsODc3IEwzNjkuMiw2MzguMiBDMzgxLjUsNjI4LjUgMzk4LjgsNjI4LjUgNDExLjEsNjM4LjMgTDcwOCw4NzYuNSBMNzA4LDY3LjEgTDY4LDY3LjEgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=');
$iconBookmarkWhiteUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNzc1cHgiIGhlaWdodD0iOTgwcHgiIHZpZXdCb3g9IjAgMCA3NzUgOTgwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA1Mi41ICg2NzQ2OSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+U2hhcGU8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iY2IzZmRlZjlkMDhlMmJlZTc0NjVkYmFjZWNiZjljMTMiIGZpbGw9IiM5QjlCOUIiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik03NDEuNSw5ODAgQzczNCw5ODAgNzI2LjYsOTc3LjUgNzIwLjUsOTcyLjYgTDM5MCw3MDcuNCBMNTUuMyw5NzIuNyBDNDUuMiw5ODAuNyAzMS40LDk4Mi4yIDE5LjgsOTc2LjYgQzguMiw5NzEgMC44LDk1OS4zIDAuOCw5NDYuNCBMMC44LDMzLjYgQzAuOCwxNS4xIDE1LjgsMCAzNC40LDAgTDc0MS40LDAgQzc1OS45LDAgNzc1LDE1IDc3NSwzMy42IEw3NzUsOTQ2LjUgQzc3NSw5NTkuNCA3NjcuNiw5NzEuMiA3NTYsOTc2LjggQzc1MS40LDk3OC45IDc0Ni41LDk4MCA3NDEuNSw5ODAgWiBNNjgsNjcuMSBMNjgsODc3IEwzNjkuMiw2MzguMiBDMzgxLjUsNjI4LjUgMzk4LjgsNjI4LjUgNDExLjEsNjM4LjMgTDcwOCw4NzYuNSBMNzA4LDY3LjEgTDY4LDY3LjEgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=');
$iconBookmarkSolidWhiteUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjQuMjg0MW1tIiB3aWR0aD0iNC40ODQ4bW0iIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDQuNDg0ODQ5OSA0LjI4NDEwMDEiPgogPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIxMi40NSAtMTU4LjAzKSI+CiAgPHBhdGggZD0ibTIxNS4zNCAxNTkuNS0wLjY1MTM2LTEuNDY3Ny0wLjY1MTM3IDEuNDY3Ny0xLjU5MSAwLjE2ODY3IDEuMTg4NSAxLjA3NTgtMC4zMzE5NSAxLjU3MiAxLjM4NTktMC44MDI4NSAxLjM4NTkgMC44MDI4NS0wLjMzMTk0LTEuNTcyIDEuMTg4NS0xLjA3NTh6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS13aWR0aD0iLjI2NDU4IiBmaWxsPSIjZmZmIi8+CiA8L2c+Cjwvc3ZnPgo=');
$iconMenuUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjUuMjkxN21tIiB3aWR0aD0iNS4zNzg1bW0iIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDUuMzc4NDggNS4yOTE2Njk4Ij4KIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNzcuNzcgLTEyMy41MSkiPgogIDxwYXRoIGQ9Im0yNzguMjUgMTIzLjUxYy0wLjI2ODM3IDAtMC40ODQyMSAwLjIxNTg0LTAuNDg0MjEgMC40ODQyMXMwLjIxNTg0IDAuNDg0MjEgMC40ODQyMSAwLjQ4NDIxaDQuNDEwMWMwLjI2ODM3IDAgMC40ODQyLTAuMjE1ODQgMC40ODQyLTAuNDg0MjFzLTAuMjE1ODMtMC40ODQyMS0wLjQ4NDItMC40ODQyMXptMCAyLjE2MTFjLTAuMjY4MzcgMC0wLjQ4NDIxIDAuMjE2MzUtMC40ODQyMSAwLjQ4NDcyczAuMjE1ODQgMC40ODQyMSAwLjQ4NDIxIDAuNDg0MjFoNC40MTAxYzAuMjY4MzcgMCAwLjQ4NDItMC4yMTU4NCAwLjQ4NDItMC40ODQyMXMtMC4yMTU4My0wLjQ4NDcyLTAuNDg0Mi0wLjQ4NDcyem0wIDIuMTYxNmMtMC4yNjgzNyAwLTAuNDg0MjEgMC4yMTYzNS0wLjQ4NDIxIDAuNDg0NzMgMCAwLjI2ODM3IDAuMjE1ODQgMC40ODQyMSAwLjQ4NDIxIDAuNDg0MjFoNC40MTAxYzAuMjY4MzcgMCAwLjQ4NDItMC4yMTU4NCAwLjQ4NDItMC40ODQyMSAwLTAuMjY4MzgtMC4yMTU4My0wLjQ4NDczLTAuNDg0Mi0wLjQ4NDczeiIgZmlsbD0iI2ZmZiIvPgogPC9nPgo8L3N2Zz4K');
$iconCollaboratorUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjQwLjQ2MiIgd2lkdGg9IjQwLjQ2MiIgdmVyc2lvbj0iMS4xIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDQwLjQ2MjM5OSA0MC40NjIzOTkiPgogPHRpdGxlPmljb24tY29sbGFib3JhdG9yPC90aXRsZT4KIDxkZXNjPkNyZWF0ZWQgdXNpbmcgRmlnbWE8L2Rlc2M+CiA8ZyBpZD0iQ2FudmFzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNTkzNi42IC0xMzY0MCkiPgogIDxnIGlkPSJpY29uLWNvbGxhYm9yYXRvciI+CiAgIDxnIGlkPSJFbGxpcHNlIj4KICAgIDx1c2UgeGxpbms6aHJlZj0iI3BhdGgwX2ZpbGwiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDU5MzYuNiAxMzY0MCkiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiIHk9IjAiIHg9IjAiIGZpbGw9IiNmYWY2ZjYiLz4KICAgPC9nPgogICA8ZyBpZD0iaWNvbi1QZXJzb24iIGZpbGw9IiNmZmZmZmYiPgogICAgPHVzZSB4bGluazpocmVmPSIjcGF0aDFfZmlsbCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTk0Ny45IDEzNjQ5KSIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSIgeT0iMCIgeD0iMCIvPgogICAgPHVzZSB4bGluazpocmVmPSIjcGF0aDJfZmlsbCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTk0Ny45IDEzNjQ5KSIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSIgeT0iMCIgeD0iMCIvPgogICA8L2c+CiAgIDxnIGlkPSJpY29uLVBlcnNvbiAoU3Ryb2tlKSI+CiAgICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoM19maWxsIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1OTQ3LjkgMTM2NDkpIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiB5PSIwIiB4PSIwIiBmaWxsPSIjOWU5MjkwIi8+CiAgIDwvZz4KICA8L2c+CiA8L2c+CiA8ZGVmcz4KICA8cGF0aCBpZD0icGF0aDBfZmlsbCIgZD0ibTQwLjQ2MiAyMC4yMzFjMCAxMS4xNzMtOS4wNTc4IDIwLjIzMS0yMC4yMzEgMjAuMjMxcy0yMC4yMzEtOS4wNTctMjAuMjMxLTIwLjIzMWMwLTExLjE3MyA5LjA1NzgtMjAuMjMxIDIwLjIzMS0yMC4yMzEgMTEuMTc0IDAgMjAuMjMxIDkuMDU3OCAyMC4yMzEgMjAuMjMxeiIvPgogIDxwYXRoIGlkPSJwYXRoMV9maWxsIiBkPSJtMTMuMzk0IDQuNDY4NWMwIDIuNDY3OS0xLjk4ODggNC40Njg1LTQuNDQyMiA0LjQ2ODUtMi40NTMzIDAtNC40NDIyLTIuMDAwNi00LjQ0MjItNC40Njg1LTAuMDAwMi0yLjQ2NzkgMS45ODg3LTQuNDY4NSA0LjQ0Mi00LjQ2ODUgMi40NTM0IDAgNC40NDI0IDIuMDAwNiA0LjQ0MjQgNC40Njg1eiIvPgogIDxwYXRoIGlkPSJwYXRoMl9maWxsIiBkPSJtNC4yMTk3IDEwLjg1N2MtMi41MzM4IDEuNTgyLTQuMjE5NyA0LjM5OC00LjIxOTcgNy42MDYgMCAxLjIwNTEgMC4yMzgwNCAyLjM1NTcgMC42Njk0MiAzLjQwNTcgMi42MTEzIDAuODM1MiA1LjM5NDEgMS4yODUyIDguMjgyMiAxLjI4NTJzNS42NzA5LTAuNDUgOC4yODI0LTEuMjg1MmMwLjQzMTQtMS4wNSAwLjY2OTQtMi4yMDA2IDAuNjY5NC0zLjQwNTcgMC0zLjIwOC0xLjY4NjEtNi4wMjM5LTQuMjItNy42MDU3LTEuMzgzNCAwLjgzMzUtMy4wMDIgMS4zMTQyLTQuNzMyIDEuMzE0MnMtMy4zNDg2LTAuNDgwNy00LjczMTctMS4zMTQyeiIvPgogIDxwYXRoIGlkPSJwYXRoM19maWxsIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Im04Ljk1MTYgNy45MzdjMS44OTU1IDAgMy40NDIyLTEuNTQ3MyAzLjQ0MjItMy40Njg1cy0xLjU0Ny0zLjQ2ODUtMy40NDI0LTMuNDY4NWMtMS44OTU1IDAtMy40NDIyIDEuNTQ3My0zLjQ0MjIgMy40Njg1czEuNTQ2NyAzLjQ2ODUgMy40NDIyIDMuNDY4NXptLTQuNjc4OSA0LjA5MWMtMS45ODUxIDEuNDQ4LTMuMjcyNyAzLjc5Mi0zLjI3MjcgNi40MzUtMC4wMDQ0MjMgMC45Mzg3IDAuMTM5MzQgMS43NzM2IDAuNDI4NzkgMi41OTQ3IDIuMzk4NiAwLjcyMjkgNC44ODIxIDEuMDk5MiA3LjUyMjggMS4wOTYyIDIuNjQwOCAwLjAwMyA1LjEyNDMtMC4zNzMzIDcuNTIzMS0xLjA5NjIgMC4yODk0LTAuODIxMSAwLjQzMzItMS42NTYgMC40Mjg3LTIuNTk0NyAwLTIuNjQzMS0xLjI4NzctNC45ODczLTMuMjczLTYuNDM1NS0xLjM4OTIgMC43MDY3LTMuMDM1OSAxLjEzNDktNC42NzkgMS4xNDQtMS42NDMxLTAuMDA5MS0zLjI4OTgtMC40MzczLTQuNjc4Ny0xLjE0NHptLTAuMDUzLTEuMTcwMmMtMi41MzM4IDEuNTgxLTQuMjE5NyA0LjM5Ny00LjIxOTcgNy42MDUgMCAxLjIwNTEgMC4yMzgwNCAyLjM1NTcgMC42Njk0MiAzLjQwNTcgMi42MTEzIDAuODM1MiA1LjM5NDEgMS4yODUyIDguMjgyMiAxLjI4NTJzNS42NzA5LTAuNDUgOC4yODI0LTEuMjg1MmMwLjQzMTQtMS4wNSAwLjY2OTQtMi4yMDA2IDAuNjY5NC0zLjQwNTcgMC0zLjIwOC0xLjY4NjEtNi4wMjM5LTQuMjItNy42MDU3LTEuMzgzNCAwLjgzMzUtMy4wMDIgMS4zMTQyLTQuNzMyIDEuMzE0MnMtMy4zNDg2LTAuNDgwNy00LjczMTctMS4zMTQyem00LjczMTktMS45MjFjMi40NTM0IDAgNC40NDIyLTIuMDAwNiA0LjQ0MjItNC40Njg1cy0xLjk4OS00LjQ2ODUtNC40NDI0LTQuNDY4NWMtMi40NTMzIDAtNC40NDIyIDIuMDAwNi00LjQ0MjIgNC40Njg1czEuOTg4OCA0LjQ2ODUgNC40NDIyIDQuNDY4NXoiLz4KIDwvZGVmcz4KPC9zdmc+Cg==');
$iconPlusGreyUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9Ii43NDY3Mm1tIiB3aWR0aD0iLjc0NjczbW0iIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDAuNzQ2NzI1MDMgMC43NDY3MjAwMiI+CiA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNTkuNDggLTEyOC4wNikiPgogIDxwYXRoIGQ9Im01OS43OSAxMjguMDZ2MC4zMDk1NGgtMC4zMDk1NHYwLjEyODE1aDAuMzA5NTR2MC4zMDkwM2gwLjEyODE2di0wLjMwOTAzaDAuMzA5MDJ2LTAuMTI4MTVoLTAuMzA5MDJ2LTAuMzA5NTR6IiBmaWxsPSIjOWU5MjkwIi8+CiA8L2c+Cjwvc3ZnPgo=');
$iconAppUrl: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjMiIHZpZXdCb3g9IjAgMCAzMCAyMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB4PSIxIiB5PSIwLjcwMTE3MiIgd2lkdGg9IjI3Ljc5NjIiIGhlaWdodD0iMjAuOTMzOCIgcng9IjAuNDk0MzI3IiBzdHJva2U9IiMyRDM0M0EiLz48cGF0aCBkPSJNMjguNDk2NiA1LjQ2Mjg5TDEgNS40NjI4OSIgc3Ryb2tlPSIjMkQzNDNBIi8+PC9zdmc+);
$iconRecipeUrl: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyNiAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC45MDAzNCAxMS41OTI3QzMuNjE0MjMgMTAuMzA2NiAzLjIxOTEzIDguNDY2OSAzLjcxNTAyIDYuODQwNjVMNi42MTc1NyA5Ljc0MzIxQzYuNjE3NTcgOS43NDMyMSA3LjYzNjggOS45ODg3OCA4Ljg1MzU5IDguNzg2NzRDMTAuMDcwNCA3LjU4NDcxIDkuNzk3NDkgNi41NjMyOSA5Ljc5NzQ5IDYuNTYzMjlMNi45MDc4IDMuNjczNkM4LjUyNDk0IDMuMTk0NzggMTAuMzQ2NyAzLjU5MzU2IDExLjYyMzEgNC44Njk5OEMxMi44OTk1IDYuMTQ2MzkgMTMuMjk4MyA3Ljk2ODA5IDEyLjgxOTUgOS41ODUyM0wyMS4wMjU1IDE3Ljc5MTNDMjEuOTAzNiAxOC42Njk0IDIxLjkwMzYgMjAuMDkzMSAyMS4wMjU1IDIwLjk3MTJDMjAuMTQ3NCAyMS44NDkzIDE4LjcyMzcgMjEuODQ5MyAxNy44NDU2IDIwLjk3MTJMOS42NTI0MSAxMi43NzhDOC4wMjYxNiAxMy4yNzM5IDYuMTg2NDUgMTIuODc4OCA0LjkwMDM0IDExLjU5MjdaIiBzdHJva2U9IiMyRDM0M0EiLz48L3N2Zz4=);
$iconAnnotationUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNSAyNSI+CiA8ZyBmaWxsPSIjOUU5MjkwIiBjbGlwLXBhdGg9InVybCgjY2xpcDApIj4KICA8cGF0aCBkPSJtMTguNCA4Ljc2YzEuNCAwIDIuNi0xLjE0IDIuNi0yLjU0IDAtMS40MS0xLjItMi41NC0yLjYtMi41NHMtMi41IDEuMTMtMi41IDIuNTRjMCAxLjQgMS4xIDIuNTQgMi41IDIuNTR6bTAtMWMwLjkgMCAxLjYtMC42OSAxLjYtMS41NHMtMC43LTEuNTQtMS42LTEuNTRjLTAuOCAwLTEuNSAwLjY5LTEuNSAxLjU0czAuNyAxLjU0IDEuNSAxLjU0eiIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDYuMjgpIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4KICA8cGF0aCBkPSJtMy4xOCAzLjAzYy0wLjI3IDAtMC41IDAuMjItMC41IDAuNSAwIDAuMjcgMC4yMyAwLjUgMC41IDAuNWgxMC41YzAuMyAwIDAuNS0wLjIzIDAuNS0wLjUgMC0wLjI4LTAuMi0wLjUtMC41LTAuNWgtMTAuNXoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgNi4yOCkiLz4KICA8cGF0aCBkPSJtMi42OCA2LjA3YzAtMC4yNyAwLjIzLTAuNSAwLjUtMC41aDEwLjVjMC4zIDAgMC41IDAuMjMgMC41IDAuNSAwIDAuMjgtMC4yIDAuNS0wLjUgMC41aC0xMC41Yy0wLjI5IDAtMC41Mi0wLjIyLTAuNTItMC41eiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCA2LjI4KSIvPgogIDxwYXRoIGQ9Im0zLjE4IDguMTJjLTAuMjcgMC0wLjUgMC4yMi0wLjUgMC41czAuMjMgMC41IDAuNSAwLjVoOC4yMmMwLjMgMCAwLjUtMC4yMiAwLjUtMC41cy0wLjItMC41LTAuNS0wLjVoLTguMjJ6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDYuMjgpIi8+CiAgPHBhdGggZD0ibTI0LjUgNy42YzAuNy0wLjc3IDAuNy0xLjk5IDAtMi43N2wtNC4xLTQuMjJjLTAuNC0wLjM4OC0wLjktMC42MS0xLjQtMC42MWgtMTdjLTEuMSAwLTIgMC44OTYtMiAydjguNGMwIDEuMSAwLjg5NiAyIDIgMmgxN2MwLjUgMCAxLTAuMiAxLjQtMC42bDQuMS00LjJ6bS0wLjgtMC42OWwtNCA0LjE5Yy0wLjIgMC4yLTAuNSAwLjMtMC43IDAuM2gtMTdjLTAuNTUgMC0xLTAuNC0xLTF2LTguNGMwLTAuNTUgMC40NS0xIDEtMWgxN2MwLjIgMCAwLjUgMC4xMSAwLjcgMC4zMWw0IDQuMjFjMC40IDAuMzkgMC40IDEgMCAxLjM5eiIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDYuMjgpIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4KIDwvZz4KIDxkZWZzPgogIDxjbGlwUGF0aCBpZD0iY2xpcDAiPgogICA8cmVjdCB3aWR0aD0iMjUiIGZpbGw9IiNmZmYiIGhlaWdodD0iMjUiLz4KICA8L2NsaXBQYXRoPgogPC9kZWZzPgo8L3N2Zz4K');
$iconAnnotateAltUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNSAyNiI+CiA8ZyBmaWxsPSIjOUU5MjkwIj4KICA8cGF0aCBkPSJtMjQuOSAxLjkxbC0xLjktMS45MS05LjYgOS41NS0wLjcgMi41NSAyLjYtMC42IDkuNi05LjU5eiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLjA2NTkgMy41NikiLz4KICA8cGF0aCBkPSJtMTUuNyAzLjI5YzAuNyAwIDEuMyAwLjIyIDEuOCAwLjU4bC0wLjggMC43MmMtMC4zLTAuMTktMC42LTAuMy0xLTAuM2gtMTIuN2MtMS4xIDAtMiAwLjktMiAydjcuMDFjMCAxLjEgMC45IDIgMiAyaDYuNzNjMS4zNyAwIDIuNjcgMC43IDMuMzcgMS44bDAuMSAwLjJjMC0xLjEgMC45LTIgMi0yaDAuNWMxLjEgMCAyLTAuOSAyLTJ2LTMuMWwxLTEuMDF2NC4xMWMwIDEuNy0xLjMgMy0zIDNoLTAuNWMtMC41IDAtMSAwLjQtMSAxdjEuN2MwIDAuNS0wLjYgMC43LTAuOSAwLjNsLTEtMS42Yy0wLjYtMC45LTEuNS0xLjQtMi41Ny0xLjRoLTYuNzNjLTEuNjYgMC0zLTEuMy0zLTN2LTcuMDFjMC0xLjY2IDEuMzQtMyAzLTNoMTIuN3oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC4wNjU5IDMuNTYpIi8+CiAgPHBhdGggZD0ibTMuMjUgNi44NmgxMS4ybC0wLjkgMWgtMTAuMmMtMC4zMyAwLTAuNTUtMC4yMy0wLjU1LTAuNSAwLTAuMjggMC4yMi0wLjUgMC41LTAuNXoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC4wNjU5IDMuNTYpIi8+CiAgPHBhdGggZD0ibTEyLjIgOS4yOWgtOC45NWMtMC4yOCAwLTAuNSAwLjIzLTAuNSAwLjUgMCAwLjMxIDAuMjIgMC41MSAwLjUgMC41MWg4Ljc1YzAuMS0wLjQzIDAuMi0wLjc5IDAuMi0xLjAxeiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLjA2NTkgMy41NikiLz4KICA8cGF0aCBkPSJtMy4yNSAxMS43Yy0wLjI4IDAtMC41IDAuMy0wLjUgMC41IDAgMC4zIDAuMjIgMC41IDAuNSAwLjVoNy42NWMwLjIgMCAwLjUtMC4yIDAuNS0wLjUgMC0wLjItMC4zLTAuNS0wLjUtMC41aC03LjY1eiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLjA2NTkgMy41NikiLz4KIDwvZz4KPC9zdmc+Cg==');
$iconSegmentUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxNiAxNSI+CiA8cGF0aCBmaWxsPSIjOTU5NDk1IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Im00LjIgMTRoNy42di0xM2gtNy42djEzem0tMSAxdi0xLjFoLTEuODd2MS4xaC0xLjMzdi0xNWgxLjMzdjEuMDdoMS44N3YtMS4wN2g5LjZ2MS4wN2gxLjl2LTEuMDdoMS4zdjE1aC0xLjN2LTEuMWgtMS45djEuMWgtOS42em0wLTEyLjl2MS44OGgtMS44N3YtMS44OGgxLjg3em0wIDIuOTV2MS44N2gtMS44N3YtMS44N2gxLjg3em0tMS44NyAyLjk1djEuODdoMS44N3YtMS44N2gtMS44N3ptMS44NyAyLjk2djEuOWgtMS44N3YtMS45aDEuODd6bTkuNi04Ljg2djEuODhoMS45di0xLjg4aC0xLjl6bTAgMi45NXYxLjg3aDEuOXYtMS44N2gtMS45em0xLjkgMi45NXYxLjg3aC0xLjl2LTEuODdoMS45em0tMS45IDIuOTZ2MS45aDEuOXYtMS45aC0xLjl6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4KPC9zdmc+Cg==');
$iconDeleteUrl: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyMSAyMSI+CiA8ZyBmaWxsPSIjOWU5MjkwIj4KICA8cGF0aCBkPSJtNC40NiAwYy0wLjI3IDAtMC41IDAuMjI0LTAuNSAwLjUgMCAwLjEyOSAwLjA1IDAuMjQ3IDAuMTMgMC4zMzVoLTMuNTljLTAuMjc2IDAtMC41IDAuMjI1LTAuNSAwLjUwNSAwIDAuMjcgMC4yMjQgMC41IDAuNSAwLjVoMTIuNmMwLjMgMCAwLjUtMC4yMyAwLjUtMC41IDAtMC4yOC0wLjItMC41MDUtMC41LTAuNTA1aC0zLjU2YzAuMDgtMC4wODggMC4xMy0wLjIwNiAwLjEzLTAuMzM1IDAtMC4yNzYtMC4yMi0wLjUtMC41LTAuNWgtNC43MXoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMuNjggMS41KSIvPgogIDxwYXRoIGQ9Im0zLjc3IDUuMDNjMC4yOCAwIDAuNSAwLjIzIDAuNSAwLjV2OS43N2MwIDAuMy0wLjIyIDAuNS0wLjUgMC41cy0wLjUtMC4yLTAuNS0wLjV2LTkuNzdjMC0wLjI3IDAuMjItMC41IDAuNS0wLjV6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzLjY4IDEuNSkiLz4KICA8cGF0aCBkPSJtNi42OCA1LjAzYzAuMjggMCAwLjUgMC4yMyAwLjUgMC41djkuNzdjMCAwLjMtMC4yMiAwLjUtMC41IDAuNS0wLjI3IDAtMC41LTAuMi0wLjUtMC41di05Ljc3YzAtMC4yNyAwLjIzLTAuNSAwLjUtMC41eiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMy42OCAxLjUpIi8+CiAgPHBhdGggZD0ibTkuNTkgNS4wM2MwLjI4IDAgMC41MSAwLjIzIDAuNTEgMC41djkuNzdjMCAwLjMtMC4yMyAwLjUtMC41MSAwLjUtMC4yNyAwLTAuNS0wLjItMC41LTAuNXYtOS43N2MwLTAuMjcgMC4yMy0wLjUgMC41LTAuNXoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMuNjggMS41KSIvPgogIDxwYXRoIGQ9Im0wLjUxMSAyLjg1djEyLjRjMCAxLjYgMS4zNCAzIDMgM2g2LjU5YzEuNyAwIDMtMS40IDMtM3YtMTIuNGgtMTIuNnptMTEuNiAxaC0xMC42djExLjRjMC4wMSAxLjEgMC45MSAyIDIuMDEgMmg2LjU5YzEuMSAwIDItMC45IDItMnYtMTEuNHoiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMy42OCAxLjUpIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4KIDwvZz4KPC9zdmc+Cg==');
$iconDataSetUrl: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjciIHZpZXdCb3g9IjAgMCAyMiAyNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuNjUyNyAzLjIwMTczQzIwLjY1MjcgMy4yMDkgMjAuNjUxNyAzLjI1NTczIDIwLjU3IDMuMzQ3OThDMjAuNDg1NiAzLjQ0MzM2IDIwLjMzODMgMy41NTkyNyAyMC4xMDc2IDMuNjg1NDFDMTkuNjQ2NyAzLjkzNzQzIDE4Ljk0NjcgNC4xODAyNiAxOC4wMzkgNC4zOTAyQzE2LjIzMTYgNC44MDgyMSAxMy43MDk3IDUuMDcxNCAxMC45MDY3IDUuMDcxNFY2LjA3MTRDMTMuNzYyNCA2LjA3MTQgMTYuMzYzNCA1LjgwNDExIDE4LjI2NDQgNS4zNjQ0OEMxOS4yMTA4IDUuMTQ1NTkgMjAuMDExMyA0Ljg3NzggMjAuNTg3NCA0LjU2MjgxQzIwLjg3NTIgNC40MDU0NCAyMS4xMzA0IDQuMjIzNzYgMjEuMzE5IDQuMDEwNjJDMjEuNTEwMyAzLjc5NDM1IDIxLjY1MjcgMy41MjE2NCAyMS42NTI3IDMuMjAxNzNIMjAuNjUyN1pNMTAuOTA2NyA1LjA3MTRDOC4xMDM2NCA1LjA3MTQgNS41ODE3MiA0LjgwODIxIDMuNzc0MyA0LjM5MDJDMi44NjY1OSA0LjE4MDI2IDIuMTY2NiAzLjkzNzQzIDEuNzA1NzEgMy42ODU0MUMxLjQ3NTAzIDMuNTU5MjcgMS4zMjc2NyAzLjQ0MzM2IDEuMjQzMjggMy4zNDc5OEMxLjE2MTY1IDMuMjU1NzMgMS4xNjA2NCAzLjIwOSAxLjE2MDY0IDMuMjAxNzNIMC4xNjA2NDVDMC4xNjA2NDUgMy41MjE2NCAwLjMwMjk4OSAzLjc5NDM1IDAuNDk0MzQgNC4wMTA2MkMwLjY4MjkxOCA0LjIyMzc2IDAuOTM4MTUxIDQuNDA1NDQgMS4yMjU5NSA0LjU2MjgxQzEuODAyMDEgNC44Nzc4IDIuNjAyNTIgNS4xNDU1OSAzLjU0ODk3IDUuMzY0NDhDNS40NDk4OCA1LjgwNDExIDguMDUwOTcgNi4wNzE0IDEwLjkwNjcgNi4wNzE0VjUuMDcxNFpNMS4xNjA2NCAzLjIwMTczQzEuMTYwNjQgMy4xOTQ0NSAxLjE2MTY1IDMuMTQ3NzIgMS4yNDMyOCAzLjA1NTQ3QzEuMzI3NjcgMi45NjAwOSAxLjQ3NTAzIDIuODQ0MTcgMS43MDU3MSAyLjcxODA0QzIuMTY2NiAyLjQ2NjAyIDIuODY2NTkgMi4yMjMxOCAzLjc3NDMgMi4wMTMyNEM1LjU4MTcyIDEuNTk1MjIgOC4xMDM2NCAxLjMzMjAzIDEwLjkwNjcgMS4zMzIwM1YwLjMzMjAzMUM4LjA1MDk3IDAuMzMyMDMxIDUuNDQ5ODggMC41OTkzMTkgMy41NDg5NyAxLjAzODk2QzIuNjAyNTIgMS4yNTc4NiAxLjgwMjAxIDEuNTI1NjQgMS4yMjU5NSAxLjg0MDY0QzAuOTM4MTUgMS45OTgwMSAwLjY4MjkxNiAyLjE3OTcgMC40OTQzMzkgMi4zOTI4M0MwLjMwMjk4OCAyLjYwOTEgMC4xNjA2NDUgMi44ODE4MiAwLjE2MDY0NSAzLjIwMTczSDEuMTYwNjRaTTEwLjkwNjcgMS4zMzIwM0MxMy43MDk3IDEuMzMyMDMgMTYuMjMxNiAxLjU5NTIyIDE4LjAzOSAyLjAxMzI0QzE4Ljk0NjcgMi4yMjMxOCAxOS42NDY3IDIuNDY2MDIgMjAuMTA3NiAyLjcxODA0QzIwLjMzODMgMi44NDQxNyAyMC40ODU2IDIuOTYwMDkgMjAuNTcgMy4wNTU0N0MyMC42NTE3IDMuMTQ3NzIgMjAuNjUyNyAzLjE5NDQ1IDIwLjY1MjcgMy4yMDE3M0gyMS42NTI3QzIxLjY1MjcgMi44ODE4MiAyMS41MTAzIDIuNjA5MSAyMS4zMTkgMi4zOTI4M0MyMS4xMzA0IDIuMTc5NyAyMC44NzUyIDEuOTk4MDEgMjAuNTg3NCAxLjg0MDY0QzIwLjAxMTMgMS41MjU2NCAxOS4yMTA4IDEuMjU3ODYgMTguMjY0NCAxLjAzODk2QzE2LjM2MzQgMC41OTkzMTkgMTMuNzYyNCAwLjMzMjAzMSAxMC45MDY3IDAuMzMyMDMxVjEuMzMyMDNaIiBmaWxsPSIjMkQzNDNBIi8+PHBhdGggZD0iTTIwLjY2NzcgMy45MzIxNVYyMi4zNzg1TDIwLjY2ODcgMjIuNDEwMkwyMC42Njg0IDIyLjkwMDhDMjAuNjYyMyAyMi45OTM2IDIwLjU3MTcgMjMuMjA2NCAyMC4xMzA4IDIzLjQ5MjdDMTkuNjY5NCAyMy43NzIxIDE4Ljk2ODkgMjQuMDQxMyAxOC4wNTk1IDI0LjI3NDNDMTYuMjQ4MyAyNC43MzgyIDEzLjcxOTQgMjUuMDMwNyAxMC45MDcyIDI1LjAzMDdDOC4wOTQ4OSAyNS4wMzA4IDUuNTY1NjkgMjQuNzM4MyAzLjc1NDI2IDI0LjI3NDRDMi44NDQ3OSAyNC4wNDE0IDIuMTQ0MTUgMjMuNzcyMiAxLjY4Mjc1IDIzLjQ5MjhDMS4yMTAwOSAyMy4yMDY1IDEuMTUxMDMgMjMuMDA5OCAxLjE0NDg1IDIyLjkxN0wxLjE0NDg2IDIyLjQxMDRMMS4xNDU4OCAyMi40MTA0VjMuOTE2NjVDMC44Mzc3MTIgMy42OTExIDAuNjcxNTAzIDMuNDUwOTYgMC42NzE1MDMgMy4yMDE4NUMwLjY3MTUwMyAzLjA3MTI4IDAuNzE3MTU5IDIuOTQzMTggMC44MDQ5OCAyLjgxODM2QzAuNjk2MTk1IDIuODQ5MzIgMC41OTI2OTEgMi44OTcyNCAwLjUwMDQgMi45NjI1M0MwLjMyMzY0MyAzLjA4NzU4IDAuMTU1Njc5IDMuMzA1NjMgMC4xNTU2NzkgMy41OTlWMjIuMzYyNUwwLjE1NTMxOSAyMi44NzQ2TDAuMTU0MjkyIDIyLjkwNjVDMC4xNTQyMjIgMjMuNTQ3NiAwLjYxOTcyNyAyNC4wMDY2IDEuMTY5ODIgMjQuMzM5OEMxLjc0OTc1IDI0LjY5MDkgMi41NTU5OCAyNC45ODk2IDMuNTA4NTcgMjUuMjMzNkM1LjQyMTIzIDI1LjcyMzUgOC4wMzY4NyAyNi4wMjEgMTAuOTA3MyAyNi4wMjA5QzEzLjc3NzQgMjYuMDIwOSAxNi4zOTI4IDI1LjcyMzQgMTguMzA1MiAyNS4yMzM1QzE5LjI1NzcgMjQuOTg5NSAyMC4wNjM5IDI0LjY5MDkgMjAuNjQzNyAyNC4zMzk3QzIxLjE5MzcgMjQuMDA2NiAyMS42NTkgMjMuNTMxNCAyMS42NTg5IDIyLjg5MDNMMjEuNjU3OSAyMi44NTg3VjIyLjM2MjZWMy41OTlDMjEuNjU3OSAzLjMwNTUxIDIxLjQ4OTggMy4wODc0NSAyMS4zMTMxIDIuOTYyNDVDMjEuMjI4NSAyLjkwMjY0IDIxLjEzNDUgMi44NTc0MSAyMS4wMzU3IDIuODI2NDVDMjEuMTE5OCAyLjk0ODcyIDIxLjE2MzUgMy4wNzQxIDIxLjE2MzUgMy4yMDE4NUMyMS4xNjM1IDMuNDU2NjggMjAuOTg5NiAzLjcwMjExIDIwLjY2NzcgMy45MzIxNVoiIGZpbGw9IiMyRDM0M0EiLz48L3N2Zz4=);
$iconInfoUrl: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNy42MDQyOSAzLjkzMjRIOS44NTEyNlY1LjYxMDMzSDcuNjA0MjlWMy45MzI0Wk03LjY0ODA2IDYuNzE5MjNIOS44MjIwOEw5LjgzNjY3IDE0SDcuNjQ4MDZWNi43MTkyM1oiIGZpbGw9IndoaXRlIi8+PC9zdmc+);
$iconTimeUrl: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxMC41IiBjeT0iMTAuNSIgcj0iOS41IiBzdHJva2U9IiMyRDM0M0EiLz48cGF0aCBkPSJNMTAuNSAyLjVWMTAuNUwxNSAxNSIgc3Ryb2tlPSJibGFjayIvPjwvc3ZnPg==);

$iconMetadataWhiteUrl: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHZpZXdCb3g9IjAgMCA1MCA1MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTYuOTMyOSAxOC41MjQ1QzE3LjM3OCAxOC4wNjMyIDE3LjM3OCAxNy4zMzIyIDE2LjkzMjkgMTYuODcwOVYxNi44NzA5QzE2LjQ2NDYgMTYuMzg1NiAxNS42ODczIDE2LjM4NTYgMTUuMjE5IDE2Ljg3MDlMNy44MDIyNSAyNC41NTc0TDE1LjIxOSAzMi4yNDM5QzE1LjY4NzMgMzIuNzI5MSAxNi40NjQ2IDMyLjcyOTEgMTYuOTMyOSAzMi4yNDM5VjMyLjI0MzlDMTcuMzc4IDMxLjc4MjUgMTcuMzc4IDMxLjA1MTUgMTYuOTMyOSAzMC41OTAyTDExLjExMTcgMjQuNTU3NEwxNi45MzI5IDE4LjUyNDVaIiBmaWxsPSJ3aGl0ZSIvPjxwYXRoIGQ9Ik0zMi4wNjcxIDE4LjUyNDVDMzEuNjIyIDE4LjA2MzIgMzEuNjIyIDE3LjMzMjIgMzIuMDY3MSAxNi44NzA5VjE2Ljg3MDlDMzIuNTM1NCAxNi4zODU2IDMzLjMxMjcgMTYuMzg1NiAzMy43ODEgMTYuODcwOUw0MS4xOTc4IDI0LjU1NzRMMzMuNzgxIDMyLjI0MzlDMzMuMzEyNyAzMi43MjkxIDMyLjUzNTQgMzIuNzI5MSAzMi4wNjcxIDMyLjI0MzlWMzIuMjQzOUMzMS42MjIgMzEuNzgyNSAzMS42MjIgMzEuMDUxNSAzMi4wNjcxIDMwLjU5MDJMMzcuODg4MyAyNC41NTc0TDMyLjA2NzEgMTguNTI0NVoiIGZpbGw9IndoaXRlIi8+PHBhdGggZD0iTTI1LjU0OTUgMTUuMzE0QzI1LjcxNzcgMTQuNjg2NCAyNi4zNjI4IDE0LjMxMzkgMjYuOTkwNCAxNC40ODIxVjE0LjQ4MjFDMjcuNjE4MSAxNC42NTAzIDI3Ljk5MDUgMTUuMjk1NCAyNy44MjI0IDE1LjkyMzFMMjIuNzQ3MyAzNC44NjM2QzIyLjU3OTEgMzUuNDkxMiAyMS45MzQgMzUuODYzNyAyMS4zMDYzIDM1LjY5NTVWMzUuNjk1NUMyMC42Nzg3IDM1LjUyNzMgMjAuMzA2MiAzNC44ODIyIDIwLjQ3NDQgMzQuMjU0NkwyNS41NDk1IDE1LjMxNFoiIGZpbGw9IndoaXRlIi8+PC9zdmc+);
$iconAnnotationWhiteUrl: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHZpZXdCb3g9IjAgMCA1MCA1MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDApIj48bWFzayBpZD0icGF0aC0xLWluc2lkZS0xIiBmaWxsPSJ3aGl0ZSI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMC43MiAxNi41NDQzQzkuMjE3NzkgMTYuNTQ0MyA4IDE3Ljc2MjEgOCAxOS4yNjQzVjMwLjczNkM4IDMyLjIzODIgOS4yMTc3OSAzMy40NTYgMTAuNzIgMzMuNDU2SDMzLjc4OTZDMzQuNTI5NCAzMy40NTYgMzUuMjM3MyAzMy4xNTQ2IDM1Ljc1MDEgMzIuNjIxNEw0MS4yNjYyIDI2Ljg4NTVDNDIuMjc4OCAyNS44MzI2IDQyLjI3ODggMjQuMTY3NyA0MS4yNjYyIDIzLjExNDdMMzUuNzUwMSAxNy4zNzg5QzM1LjIzNzMgMTYuODQ1NyAzNC41Mjk0IDE2LjU0NDMgMzMuNzg5NiAxNi41NDQzSDEwLjcyWk0zMy4wNjAxIDI3LjA5MzlDMzQuMjE2NiAyNy4wOTM5IDM1LjE1NDIgMjYuMTU2MyAzNS4xNTQyIDI0Ljk5OThDMzUuMTU0MiAyMy44NDMyIDM0LjIxNjYgMjIuOTA1NiAzMy4wNjAxIDIyLjkwNTZDMzEuOTAzNSAyMi45MDU2IDMwLjk2NTkgMjMuODQzMiAzMC45NjU5IDI0Ljk5OThDMzAuOTY1OSAyNi4xNTYzIDMxLjkwMzUgMjcuMDkzOSAzMy4wNjAxIDI3LjA5MzlaIi8+PC9tYXNrPjxwYXRoIGQ9Ik0zNS43NTAxIDMyLjYyMTRMMzYuNzMwMyAzMy41NjQxTDM2LjczMDMgMzMuNTY0MUwzNS43NTAxIDMyLjYyMTRaTTQxLjI2NjIgMjYuODg1NUw0MC4yODU5IDI1Ljk0MjhMNDAuMjg1OSAyNS45NDI4TDQxLjI2NjIgMjYuODg1NVpNNDEuMjY2MiAyMy4xMTQ3TDQwLjI4NTkgMjQuMDU3NEw0MC4yODU5IDI0LjA1NzRMNDEuMjY2MiAyMy4xMTQ3Wk0zNS43NTAxIDE3LjM3ODlMMzQuNzY5OCAxOC4zMjE2TDM0Ljc2OTggMTguMzIxNkwzNS43NTAxIDE3LjM3ODlaTTkuMzYgMTkuMjY0M0M5LjM2IDE4LjUxMzIgOS45Njg4OSAxNy45MDQzIDEwLjcyIDE3LjkwNDNWMTUuMTg0M0M4LjQ2NjY4IDE1LjE4NDMgNi42NCAxNy4wMTEgNi42NCAxOS4yNjQzSDkuMzZaTTkuMzYgMzAuNzM2VjE5LjI2NDNINi42NFYzMC43MzZIOS4zNlpNMTAuNzIgMzIuMDk2QzkuOTY4ODkgMzIuMDk2IDkuMzYgMzEuNDg3MSA5LjM2IDMwLjczNkg2LjY0QzYuNjQgMzIuOTg5MyA4LjQ2NjY4IDM0LjgxNiAxMC43MiAzNC44MTZWMzIuMDk2Wk0zMy43ODk2IDMyLjA5NkgxMC43MlYzNC44MTZIMzMuNzg5NlYzMi4wOTZaTTM0Ljc2OTggMzEuNjc4N0MzNC41MTM0IDMxLjk0NTMgMzQuMTU5NSAzMi4wOTYgMzMuNzg5NiAzMi4wOTZWMzQuODE2QzM0Ljg5OTMgMzQuODE2IDM1Ljk2MTEgMzQuMzYzOSAzNi43MzAzIDMzLjU2NDFMMzQuNzY5OCAzMS42Nzg3Wk00MC4yODU5IDI1Ljk0MjhMMzQuNzY5OCAzMS42Nzg3TDM2LjczMDMgMzMuNTY0MUw0Mi4yNDY0IDI3LjgyODNMNDAuMjg1OSAyNS45NDI4Wk00MC4yODU5IDI0LjA1NzRDNDAuNzkyMiAyNC41ODM5IDQwLjc5MjIgMjUuNDE2MyA0MC4yODU5IDI1Ljk0MjhMNDIuMjQ2NCAyNy44MjgzQzQzLjc2NTQgMjYuMjQ4OCA0My43NjU0IDIzLjc1MTUgNDIuMjQ2NCAyMi4xNzJMNDAuMjg1OSAyNC4wNTc0Wk0zNC43Njk4IDE4LjMyMTZMNDAuMjg1OSAyNC4wNTc0TDQyLjI0NjQgMjIuMTcyTDM2LjczMDMgMTYuNDM2MkwzNC43Njk4IDE4LjMyMTZaTTMzLjc4OTYgMTcuOTA0M0MzNC4xNTk1IDE3LjkwNDMgMzQuNTEzNCAxOC4wNTUgMzQuNzY5OCAxOC4zMjE2TDM2LjczMDMgMTYuNDM2MkMzNS45NjExIDE1LjYzNjMgMzQuODk5MyAxNS4xODQzIDMzLjc4OTYgMTUuMTg0M1YxNy45MDQzWk0xMC43MiAxNy45MDQzSDMzLjc4OTZWMTUuMTg0M0gxMC43MlYxNy45MDQzWk0zMy43OTQyIDI0Ljk5OThDMzMuNzk0MiAyNS40MDUyIDMzLjQ2NTUgMjUuNzMzOSAzMy4wNjAxIDI1LjczMzlWMjguNDUzOUMzNC45Njc3IDI4LjQ1MzkgMzYuNTE0MiAyNi45MDc0IDM2LjUxNDIgMjQuOTk5OEgzMy43OTQyWk0zMy4wNjAxIDI0LjI2NTZDMzMuNDY1NSAyNC4yNjU2IDMzLjc5NDIgMjQuNTk0MyAzMy43OTQyIDI0Ljk5OThIMzYuNTE0MkMzNi41MTQyIDIzLjA5MjEgMzQuOTY3NyAyMS41NDU2IDMzLjA2MDEgMjEuNTQ1NlYyNC4yNjU2Wk0zMi4zMjU5IDI0Ljk5OThDMzIuMzI1OSAyNC41OTQzIDMyLjY1NDYgMjQuMjY1NiAzMy4wNjAxIDI0LjI2NTZWMjEuNTQ1NkMzMS4xNTI0IDIxLjU0NTYgMjkuNjA1OSAyMy4wOTIxIDI5LjYwNTkgMjQuOTk5OEgzMi4zMjU5Wk0zMy4wNjAxIDI1LjczMzlDMzIuNjU0NiAyNS43MzM5IDMyLjMyNTkgMjUuNDA1MiAzMi4zMjU5IDI0Ljk5OThIMjkuNjA1OUMyOS42MDU5IDI2LjkwNzQgMzEuMTUyNCAyOC40NTM5IDMzLjA2MDEgMjguNDUzOVYyNS43MzM5WiIgZmlsbD0id2hpdGUiIG1hc2s9InVybCgjcGF0aC0xLWluc2lkZS0xKSIvPjxwYXRoIGQ9Ik0xMi4zMjgxIDIxLjM0MjhIMjYuNjAwMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjM2IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48cGF0aCBkPSJNMTIuMzI4MSAyNC44MDU1SDI2LjYwMDMiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS4zNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PHBhdGggZD0iTTEyLjMyODEgMjguMjY4MUgyMy41NjEyIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEuMzYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImNsaXAwIj48cmVjdCB3aWR0aD0iMzQiIGhlaWdodD0iMzQiIGZpbGw9IndoaXRlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4IDgpIi8+PC9jbGlwUGF0aD48L2RlZnM+PC9zdmc+);
$iconLockWhiteUrl: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzEiIGhlaWdodD0iMzEiIHZpZXdCb3g9IjAgMCAzMSAzMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB4PSI4IiB5PSIxMS4xODE2IiB3aWR0aD0iMTUiIGhlaWdodD0iMTIuODE4IiByeD0iMS4wOTk1OCIgZmlsbD0id2hpdGUiIGZpbGwtb3BhY2l0eT0iMC4yIiBzdHJva2U9IndoaXRlIi8+PHBhdGggZD0iTTE5LjQ2NzUgMTEuMTgzNkwxOS40Njc1IDguMzEyNUMxOS40Njc1IDYuMTIxNTggMTcuNjkxMiA0LjM0NTIxIDE1LjUwMDIgNC4zNDUyMUMxMy4zMDkzIDQuMzQ1MjEgMTEuNTMzMiA2LjEyMTU4IDExLjUzMzIgOC4zMTI1TDExLjUzMzIgMTEuMTgzNkgxMC41MzMyVjguMzEyNUMxMC41MzMyIDUuNTY4ODUgMTIuNzU3MSAzLjM0NTIxIDE1LjUwMDIgMy4zNDUyMUMxOC4yNDM3IDMuMzQ1MjEgMjAuNDY3NSA1LjU2ODg1IDIwLjQ2NzUgOC4zMTI1TDIwLjQ2NzUgMTEuMTgzNkgxOS40Njc1WiIgZmlsbD0id2hpdGUiLz48bWFzayBpZD0icGF0aC0zLWluc2lkZS0xIiBmaWxsPSJ3aGl0ZSI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNi41MDEgMTcuNDA1NUMxNy4wMDIxIDE3LjA4NjUgMTcuMzMzMyAxNi41MzQ5IDE3LjMzMzMgMTUuOTA3OUMxNy4zMzMzIDE0LjkyMDggMTYuNTEyNSAxNC4xMjA2IDE1LjQ5OTkgMTQuMTIwNkMxNC40ODczIDE0LjEyMDYgMTMuNjY2NSAxNC45MjA4IDEzLjY2NjUgMTUuOTA3OUMxMy42NjY1IDE2LjUzNSAxMy45OTc4IDE3LjA4NjcgMTQuNDk5IDE3LjQwNTZWMjAuMTIyNkMxNC40OTkgMjAuNjc1NCAxNC45NDcyIDIxLjEyMzYgMTUuNSAyMS4xMjM2QzE2LjA1MjggMjEuMTIzNiAxNi41MDEgMjAuNjc1NCAxNi41MDEgMjAuMTIyNlYxNy40MDU1WiIvPjwvbWFzaz48cGF0aCBkPSJNMTYuNTAxIDE3LjQwNTVMMTUuOTY0IDE2LjU2MTlMMTUuNTAxIDE2Ljg1NjdWMTcuNDA1NUgxNi41MDFaTTE0LjQ5OSAxNy40MDU2SDE1LjQ5OVYxNi44NTY3TDE1LjAzNTkgMTYuNTYyTDE0LjQ5OSAxNy40MDU2Wk0xNi4zMzMzIDE1LjkwNzlDMTYuMzMzMyAxNi4xNzE0IDE2LjE5NTUgMTYuNDE0NiAxNS45NjQgMTYuNTYxOUwxNy4wMzggMTguMjQ5MUMxNy44MDg3IDE3Ljc1ODUgMTguMzMzMyAxNi44OTg0IDE4LjMzMzMgMTUuOTA3OUgxNi4zMzMzWk0xNS40OTk5IDE1LjEyMDZDMTUuOTg0NCAxNS4xMjA2IDE2LjMzMzMgMTUuNDk3IDE2LjMzMzMgMTUuOTA3OUgxOC4zMzMzQzE4LjMzMzMgMTQuMzQ0NyAxNy4wNDA2IDEzLjEyMDYgMTUuNDk5OSAxMy4xMjA2VjE1LjEyMDZaTTE0LjY2NjUgMTUuOTA3OUMxNC42NjY1IDE1LjQ5NyAxNS4wMTU1IDE1LjEyMDYgMTUuNDk5OSAxNS4xMjA2VjEzLjEyMDZDMTMuOTU5MiAxMy4xMjA2IDEyLjY2NjUgMTQuMzQ0NyAxMi42NjY1IDE1LjkwNzlIMTQuNjY2NVpNMTUuMDM1OSAxNi41NjJDMTQuODA0MyAxNi40MTQ2IDE0LjY2NjUgMTYuMTcxNCAxNC42NjY1IDE1LjkwNzlIMTIuNjY2NUMxMi42NjY1IDE2Ljg5ODYgMTMuMTkxMiAxNy43NTg3IDEzLjk2MjEgMTguMjQ5M0wxNS4wMzU5IDE2LjU2MlpNMTUuNDk5IDIwLjEyMjZWMTcuNDA1NkgxMy40OTlWMjAuMTIyNkgxNS40OTlaTTE1LjUgMjAuMTIzNkMxNS40OTg2IDIwLjEyMzYgMTUuNDk4MyAyMC4xMjM1IDE1LjQ5ODcgMjAuMTIzNUMxNS40OTkxIDIwLjEyMzYgMTUuNDk5NiAyMC4xMjM4IDE1LjQ5OTkgMjAuMTIzOUMxNS41MDA1IDIwLjEyNDIgMTUuNTAwMSAyMC4xMjQxIDE1LjQ5OTMgMjAuMTIzM0MxNS40OTg1IDIwLjEyMjUgMTUuNDk4NCAyMC4xMjIxIDE1LjQ5ODcgMjAuMTIyN0MxNS40OTg4IDIwLjEyMyAxNS40OTkgMjAuMTIzNSAxNS40OTkxIDIwLjEyMzlDMTUuNDk5MSAyMC4xMjQzIDE1LjQ5OSAyMC4xMjQgMTUuNDk5IDIwLjEyMjZIMTMuNDk5QzEzLjQ5OSAyMS4yMjc3IDE0LjM5NDkgMjIuMTIzNiAxNS41IDIyLjEyMzZWMjAuMTIzNlpNMTUuNTAxIDIwLjEyMjZDMTUuNTAxIDIwLjEyNCAxNS41MDA5IDIwLjEyNDMgMTUuNTAxIDIwLjEyMzlDMTUuNTAxIDIwLjEyMzUgMTUuNTAxMiAyMC4xMjMgMTUuNTAxMyAyMC4xMjI3QzE1LjUwMTYgMjAuMTIyMSAxNS41MDE1IDIwLjEyMjUgMTUuNTAwNyAyMC4xMjMzQzE1LjQ5OTkgMjAuMTI0MSAxNS40OTk1IDIwLjEyNDIgMTUuNTAwMSAyMC4xMjM5QzE1LjUwMDQgMjAuMTIzOCAxNS41MDA5IDIwLjEyMzYgMTUuNTAxMyAyMC4xMjM1QzE1LjUwMTcgMjAuMTIzNSAxNS41MDE0IDIwLjEyMzYgMTUuNSAyMC4xMjM2VjIyLjEyMzZDMTYuNjA1MSAyMi4xMjM2IDE3LjUwMSAyMS4yMjc3IDE3LjUwMSAyMC4xMjI2SDE1LjUwMVpNMTUuNTAxIDE3LjQwNTVWMjAuMTIyNkgxNy41MDFWMTcuNDA1NUgxNS41MDFaIiBmaWxsPSJ3aGl0ZSIgbWFzaz0idXJsKCNwYXRoLTMtaW5zaWRlLTEpIi8+PC9zdmc+);

/* Textures */
$texturePlaceholderUrl: repeating-linear-gradient(
    -45deg,
    $clGreyTint,
    $clGreyTint 10px,
    darken($clGreyTint, 3) 10px,
    darken($clGreyTint, 3) 20px
);


//import mixins, containing generic all purpose small elements
@mixin spinner() {
	@keyframes spinner {
		to {transform: rotate(360deg);}
	}

	.spinner {
		position: fixed; /* Sit on top of the page content */
		width: 100%; /* Full width (cover the whole page) */
		height: 100%; /* Full height (cover the whole page) */
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 22334; /* Specify a stack order in case you're using a different order for other elements */
		cursor: pointer; /* Add a pointer on hover */
		opacity: .6;

		&::after {
			content: '';
			box-sizing: border-box;
			position: fixed;
			top: 50%;
			left: 50%;
			width: 45px;
			height: 45px;
			margin-top: -10px;
			margin-left: -10px;
			border-radius: 50%;
			border: 8px solid #ccc;
			border-top-color: #333;
			animation: spinner .6s linear infinite;
		}
	}
}

@mixin checkbox() {
	font-family: "Verdana", sans-serif;
	padding: 0px 15px;
	font-size: 22px;
	float:left;
	line-height:1;
	div {
		margin-bottom: 1em;
	}
	input[type="checkbox"], input[type="radio"] {
		display: none;
	}
	label {
		cursor:pointer;
		color: #555;
	}
	input[type="checkbox"]:checked + label {
		color: $highlight-color;
	}
	input[type="checkbox"] + label span {
		display: inline-block;
		vertical-align: middle;
		width: 20px;
		height: 20px;
		border: 1px solid $clGreyTint;
		border-radius: 2px;
	}
	input[type="checkbox"] + label span::before {
		content: "";
		display: block;
	}

	input[type="checkbox"]:checked + label span::before {
		content: "✓";
		color: $highlight-color;
		text-align: center;
		font-size: 18px;
	}
}

@mixin switchButton($transition-time : 1s, $backColorBtnActive : #468dcb, $backColorBtnInactive :#7aabd6, $widthBtn:100, $marginLeftBtn: 67) {
	input.checkbox-toggle {
		position: absolute;
		left: -9999px;
		opacity: 0;
	}

	.checkbox-toggle + label {
		display: block;
		position: relative;
		cursor: pointer;
		outline: none;
		user-select: none;
		font-family: 'helvetica';
		font-size: 13px;
		margin: 0;
	}

	input.checkbox-toggle:checked + label:before {
		text-align: center;
		content: attr(data-on);
		padding: 3px 30px 0px 0;
	}

	input.checkbox-toggle:not(:checked) + label:before {
		text-align: center;
		content: attr(data-off);
		padding: 3px 0 0px 30px;
	}

	input.checkbox-toggle-round + label {
		padding: 2px;
		width: $widthBtn;
		height: 25px;
		background-color: #dddddd;
		border-radius: 5px;
	}

	input.checkbox-toggle-round + label:before,
	input.checkbox-toggle-round + label:after {
		display: block;
		position: absolute;
		top: 1px;
		left: 1px;
		bottom: 1px;
		content: '';
	}

	input.checkbox-toggle-round + label:before {
		right: 1px;
		border-radius: 5px;
		transition: background $transition-time;
	}

	input.checkbox-toggle-round + label:after {
		width: 30px;
		background-color: #fff;
		border-radius: 10%;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
		transition: margin $transition-time;
	}

	input.checkbox-toggle-round:checked + label:after {
		margin-left: $marginLeftBtn;
	}

	input.checkbox-toggle-round:checked + label:before {
		background-color: #7aabd6;
		color: white;
	}

	input.checkbox-toggle-round:not(:checked) + label:before {
		background-color: #468dcb;
		color: white;
	}

	input.checkbox-toggle-round-flat + label {
		padding: 2px;
		width: 100px;
		height: 25px;
		background-color: #dddddd;
		border-radius: 35px;
		transition: background $transition-time;
	}

	input.checkbox-toggle-round-flat + label:before,
	input.checkbox-toggle-round-flat + label:after {
		display: block;
		position: absolute;
		content: "";
	}

	input.checkbox-toggle-round-flat + label:before {
		top: 2px;
		left: 2px;
		bottom: 2px;
		right: 2px;
		background-color: #fff;
		border-radius: 25px;
		transition: background $transition-time;
	}

	input.checkbox-toggle-round-flat + label:after {
		top: 4px;
		left: 4px;
		bottom: 4px;
		width: 27px;
		background-color: #bbb;
		border-radius: 35px;
		transition: margin $transition-time, background $transition-time;
	}

	input.checkbox-toggle-round-flat:checked + label {
		background-color: #7aabd6;
	}

	input.checkbox-toggle-round-flat:checked + label:after {
		margin-left: 42px;
		background-color: #7aabd6;
	}
}

@mixin chartBase() {
	.ms_toggle_btn {
		@include switchButton();
	}

	.ms__custom-tooltip {
		background-color: rgba(0, 0, 0, 0.8);
		border-radius: 8px;
		box-shadow: 4px 4px 10px 1px rgba(0, 0, 0, .8);
		color: #f3f3f3;

		display: flex;
		flex-direction: column;
		justify-content: space-around;
		min-width: 280px;
		padding: 1rem 3rem;
		text-transform: capitalize;

		p {
			.rightAlign {
				float: right;
			}
		}
	}
}

@mixin lineChartBase() {
	.axis path,	.axis line { /* overridden d3 class */
		fill: none;
		stroke: #e3e3e3;
		shape-rendering: crispEdges;
	}

	.x.axis path { /* overridden d3 class */
		display: none;
	}

	h4 {
		text-align: center;
	}

	@include chartBase();
}

@mixin ellipses($widthSubst : '50px') {
	display: inline-block;
	max-width: calc(100% - #{$widthSubst});
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

//imports from our very own component library (clients can override the exposed variables)
.bg__bookmark-selector {

    > .user-input {
        display:flex;
        justify-content: space-between;

        .bg__bms__bgroup-form {

            /* bootstrap class override */
            .list-group-item {
                background-color: white;
                font-weight: bold;

                &:hover {
                    background-color: $clGrey;
                }
                &:focus,
                &:active {
                    background-color: white;
                }

                > .member-count {
                    float: right;
                    vertical-align: middle;
                    font-size: 14px;
                    line-height: 14px;
                    color: white;
                    background-color: $clSecondary;
                    border-radius: 15px;
                    padding: 2px 8px;
                    min-width: 20px;
                    text-align: center;
                }
                > .fa {
                    margin-right: 10px;
                }

                &.selected {
                    background-color: mix(white, $clSecondary, 75%);
                    border-left: 5px solid $clSecondary;
                    > .fa {
                        color: $clSecondary;
                    }
                }
            }

            .bg__bms__new-bgroup {
                display: flex;
                input {
                    margin: 0px;
                }
            }

        }
    }

    > .save-btn {
        button {
            float: right;
        }
        margin-top: 10px;
        height: 40px;
    }

    > .validation-error {
        background-color: #f26c50;
        color: #fff;
        height: 3.3rem;
        margin-bottom: 6px;
        padding: 6px 10px;
    }

}

.bg__collection-analyser {
	cursor: default;
	.current_field{
		margin-top: 10px;
		padding-top: 10px;
		border-top: 1px solid #aaa;
		table{
			font-size: 0.9em;
			background-color: white;
			width: 100%;
			td, th{
				border-bottom: 1px solid #eee;
				padding: 5px;
				vertical-align: top;
			}

			.title{
				font-weight: bold;
			}

			.total{
				float: right;
				color: #aaa;
				font-size: 0.8em;
			}
		}
	}
}
.bg__collection-selector {
	.bg__collection-wrapper {
        border-bottom: 1px solid #d3d3d3;
		border-radius: $border-radius;
		float: left;
		height: 260px;
		margin: 1% 1% 1% 1%;
		overflow: hidden;
		padding: 10px;
		position: relative;
		text-align: center;
		width: 30%;	

		&:hover {
			color: $highlight-color;
		}

		.bg__cls__collection {
			padding: 10px;
			border-top: 1px solid white;
			img {
				width: 50%;
			}
			&:hover {
				cursor: pointer;				
			}
			.bg__cls__caption {
				h4 {
					margin-top: 0;
				}
			}
		}
	}
	
}
.bg__collection-stats {}

.bg__field-analysis-stats {
	table {
		font-size :95%;
	}

	.align-right {
		text-align : right;
	}
}
.bg__field-selector{
	position: fixed;
	cursor: default;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.6);
	z-index:9999;

	.container{
		background-color: #fff;
		padding: 30px;
		max-height: calc(100% - 150px);
		position: relative;

		.close{
			position: absolute;
			top: -40px;
			height: 40px;
			line-height: 40px;
			font-size: 1.2em;
			display: block;
			color: white;
			right: 0px;
			opacity: 1;
			padding: 0 10px;
			text-shadow: none;
		}

		.row{
			max-height: calc(100% - 150px);
			table{
				width: 100%;

				thead, tbody tr {
				    width:100%;
				    display: table;
				}

				tbody{
					display: block;
					width: 100%;
					height: calc(100vh - 280px);
					overflow-y: auto;
				}

				tr:nth-child(odd) {
		   			background-color: $clGrey;
				}

				tr{
					border-left: 3px solid transparent;

					&.current{
						border-left: 3px solid $clPrimary;
					}

					&:hover{
						background-color: $clGreyTint;
						border-left: 3px solid $clSecondary;
						&.current{
							border-left: 3px solid $clPrimary;
						}
					}
				}

				th{
					cursor: pointer;
					border-bottom: 1px solid #ddd;
					font-size: 0.9em;

					padding: 5px 10px;

					&:hover{
						background-color: $clGreyTint;
						border-bottom: 3px solid $clSecondary;
					}

					i{
						float:right;
						&.fa-sort-asc{
							margin-top: 5px;
						}
					}
					&.title{
						width: 34%;
					}
					&.level{
						width: 80px;
					}

					&.completeness{
						width: 140px;
					}

					&.active{
						border-bottom: 3px solid $clSecondary;
					}

					&.select{
						width: 110px; // +30px scrollbar
					}

					&.type{
						width: 80px;
					}
				}

				td{
					font-size: 0.8em;
					padding: 5px 10px;
					vertical-align: top;

					&.title{
						font-weight: bold;
						width: 35%;
					}

					&.level{
						width: 80px;
					}

					&.completeness{
						text-align: right;
						span{
							font-weight: bold;
							font-size: 0.8em;
							display: inline-block;
							padding: 5px;
							border-radius: 10px;
							&.total{
								font-size: 0.8em;
								color: #aaa;
								font-weight: normal;
								padding: 0 5px;
							}
						}
						width: 140px;
					}

					&.description{
						// auto width
					}

					&.select{
						width: 80px;
					}

					&.type{
						width: 80px;
					}
				}
			}
		}
	}
}
.bg__flex-box {

	.box-toggle {
		width:100%;
		height:40px;
		cursor: pointer;
		padding: $default-margin $default-margin 0px 0px;

		label {
			cursor: pointer;
			float:right;
		}

		&:hover {
			background-color: $fill-color;
		}

		&.closed {
			label {
				&:after {
					content: "\25BC";
				}
			}
		}
		&.open {
			label {
				&:after {
					content: "\25B2";
				}
			}
		}
	}

}
.bg__flex-component-info {}
.bg__flex-modal {
	background-color: rgba(black, 0.7);
	.bg__fm__custom {
		width: 55%;
	}

	.highLightText {
		color: $highlight-color-snippets;
		font-weight: bold;
		font-size: 97%;
	}

	& > .modal-dialog > .modal-content {
		box-shadow: 0 3px 10px rgba(black, 0.4);
		cursor: grab;

		& > .modal-header {
			background-color: black;
			color: white;
			padding: 0;
			font-family: $fontHeading;
			border-top: 1px solid lighten(black, 20%);

			& > h4 {
				padding: 10px 20px;
				font-size: 20px;
			}

			& > button {
				display: inline-block;
				width: 50px;
				height: 50px;
				background-color: $clDarkGrey;
				color: white;
				background-repeat: no-repeat;
				background-position: center center;
				opacity: 1;
				transition: background-color $transition;

				&:hover {
					background-color: darken($clDarkGrey, 8%);
				}

				&.close {
					background-image: $iconCrossUrl;
					background-size: 16px;
				}
			}
		}
	}
}

.bg__read-more-link {
    font-size: 14px;

    img {
        margin-left: 8px;
    }
    a {
        color: #000;
        text-decoration: underline;
    }
}

.page-loader {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2000; //1030
    display: block;
    text-align: center;
    width: 100%;
    padding-top: 25%;
    background-color: rgba(255, 255, 255, 0.8);
}
//this mixin is "local", since it's never re-used in any other component. Load it first, so the FlexPlayerControls component knows it's there (see below)
/*
    TODO style the sliders better, SEE TIPS:
        http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html
        https://www.cssportal.com/style-input-range/
    FIXME
        webkit & moz don't support separate colors for lower/upper (https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/)
*/
@mixin playerSlider(
    $sliderHeight: 7px,
    $sliderColor: #888,
    $sliderProgressColor: white,
    $sliderBorderColor: #888,
    $thumbWidth: 14px,
    $thumbHeight: 14px,
    $thumbColor: white,
    $thumbBorderColor: #888
) {
    input[type='range'] {
        -webkit-appearance: none;
        border: 1px solid $sliderBorderColor;
        height: $sliderHeight;
    }
    input[type='range']::-webkit-slider-runnable-track {
        height: $sliderHeight;
        background: $sliderColor;
        border: none;
        border-radius: 3px;
    }
    input[type='range']::-webkit-slider-thumb {
        -webkit-appearance: none;
        border: 1px solid $thumbBorderColor;
        height: $thumbHeight;
        width: $thumbWidth;
        border-radius: 50%;
        background: $thumbColor;
        margin-top: -5px;
    }
    input[type='range']:focus {
        outline: none;
    }
    input[type='range']:focus::-webkit-slider-runnable-track {
        background: $sliderColor;
    }

    input[type='range']::-moz-range-track {
        height: $sliderHeight;
        background: $sliderColor;
        border: 1px solid $sliderBorderColor;
        border-radius: 3px;
    }
    input[type='range']::-moz-range-thumb {
        border: 1px solid $thumbBorderColor;
        height: $thumbHeight;
        width: $thumbWidth;
        border-radius: 50%;
        background: $thumbColor;
    }

    /*hide the outline behind the border*/
    input[type='range']:-moz-focusring {
        outline: 1px solid $sliderBorderColor;
        outline-offset: -1px;
    }

    input[type='range']::-ms-track {
        height: $sliderHeight;

        /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
        background: transparent;

        /*leave room for the larger thumb to overflow with a transparent border */
        border-color: transparent;
        border-width: 6px 0;

        /*remove default tick marks*/
        color: transparent;
    }
    input[type='range']::-ms-fill-lower {
        background: $sliderProgressColor;
        border-radius: 10px;
    }
    input[type='range']::-ms-fill-upper {
        background: $sliderColor;
        border-radius: 10px;
    }
    input[type='range']::-ms-thumb {
        border: 1px solid $thumbBorderColor;
        height: $thumbHeight;
        width: $thumbWidth;
        border-radius: 50%;
        background: $thumbColor;
    }
    input[type='range']:focus::-ms-fill-lower {
        background: $sliderProgressColor;
    }
    input[type='range']:focus::-ms-fill-upper {
        background: $sliderColor;
    }
}

.bg__flex-controls {
    @include playerSlider();

    position: absolute;
    z-index: 800; /* below the nav, but on top of anything else*/
    top: 0%;
    width: 100%;
    height: 100%;

    .toggle-play-overlay {
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;

        &:hover {
            button {
                display: block;
            }
        }

        button {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -50px;
            margin-top: -50px;
            color: white;
            background-color: $clPrimary;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
            border: none;
            height: 100px;
            width: 100px;
            border-radius: 100%;
            font-size: 2em;
            outline: none;
            transition: background-color $transition;
            &:hover {
                background-color: mix(white, $clPrimary, 15%);
            }
        }
    }

    .buttons {
        position: absolute;
        bottom: 22px;
        right: 1%;
        display: flex;

        .volume {
            background-color: transparent;
            border: 0;
            height: 25px;
            width: 100px;
            margin: 0 10px 0;
            cursor: pointer;
        }

        button {
            background-color: transparent;
            border: none;
            color: white;
            cursor: pointer;
            height: 25px;
            font-size: 1.4em;
            text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);
        }
    }

    input[type='range'].seekbar {
        position: absolute;
        bottom: 0px;
        width: 98%;
        left: 1%;
        background-color: transparent;
        border: 0;
        height: 20px;
        cursor: pointer;
    }
}

.bg__playlist {
    .bg__playlist-item-num-matches {
        color: crimson;
    }

    .bg__playlist-items {
        .bg__playlist-item {
            background-color: white;
            border-bottom: 1px solid #ccc;

            transition: background-color $transition;

            .bg__segment {
                padding: 7px 10px 7px 5px;
                cursor: pointer;
                color: black;
                border-left: 5px solid transparent;

                &:hover {
                    background-color: mix(white, $clPrimary, 90%);
                }

                &.main {
                    color: $clDark;
                }

                &.active {
                    border-left: 5px solid $clPrimary;
                    background-color: mix(white, $clPrimary, 80%);
                    &:hover {
                        background-color: mix(white, $clPrimary, 80%);
                    }
                }

                .bg__segment-title {
                    cursor: pointer;
                }

                .bg__segment-duration {
                    background-color: $clPrimary;
                    border-radius: 4px;
                    color: #fff;
                    display: inline-block;
                    font-size: 1rem;
                    padding: 1px 6px;
                }
            }
        }
    }

    .bg__playlist-items-raw {
        margin-top: 2px;
        padding: 10px;
        label {
            font-weight: bold;
        }
        .bg__playlist-item-raw {
            color: #888;
            padding: 5px;
        }
    }
}


.bg__html5-audio-player {
    width: 100%;
}


//https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp
.bg__html5-video-player {
    position: relative;
    overflow-y: hidden;

    .default {
        /* no default stuff yet */
    }

    .full-screen {
        height: 100%;
        width: 100%;
        position: fixed;
        display: flex;
        left: 0;
        top: 0;
        background-color: rgb(0, 0, 0); /* Black fallback color */
        background-color: rgba(0, 0, 0, 0.9); /* Black w/opacity */
        overflow-x: hidden; /* Disable horizontal scroll */
        overflow-y: hidden; /* Disable horizontal scroll */
        transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
        z-index: 2000; /*crank up that z-index so this video conquers all! */
        video {
            object-fit: contain;
        }
    }
}

.bg__jw-player {}
.bg__vimeo-player {}
.bg__youtube-player {}



.bg__project-selector {
	.bg__select-project {
		border-bottom: 1px solid #e5e5e5;
		padding-bottom: 15px;
	}

	.bg__project-form  {
		margin-top: 4rem;
		padding-bottom: 3rem;
		&::before {
			content: 'Create a new project';
			font-size: 16px;
			font-weight: 600;
			margin-top: 3rem;
		}

		.new-project-container {
			padding-top: 3rem;
			.bg__new-project-wrapper{
				display: flex;
				flex-wrap: wrap;
				margin: 0;
				padding: 0;
				.project-modal-right {
					margin-left: 15px;
					width: 80%;
				}
				.project-modal-left {
					font-weight: 600;
					width: 16.3332%;
				}
				label {
					color: #000;
					text-align: left;
					text-transform: none;
				}
			}
		}
		.actions {
			margin-top: 3rem;
		}
	}

}
$columnWidth: 350px;

.bg__annotation-column {
    position: relative;

    /* General */
    > .column-content {
        > .warning {
            padding: 10px;
            margin: 10px;
            border: 1px solid $clPrimary;
            border-radius: 10px;
            background-color: mix($clPrimary, white, 15%);
            font-size: 13px;
            padding-left: 30px;

            i {
                color: $clPrimary;
                margin-left: -20px;
                display: inline-block;
                margin-right: 10px;
            }

            .action {
                text-decoration: underline;
                cursor: pointer;
                font-weight: bold;
                &:hover {
                    opacity: 0.8;
                }
            }
        }
    }
}

.bg__base-column {
    border: 1px solid $clMediumGrey;
    border-right: 0;
    width: 100%;
    transition: width $transition;
    overflow: hidden;
    position: relative;

    &:first-child {
        border-left: 0;
    }

    &.active {
        & > * {
            width: $columnWidth;
        }
    }

    &.inactive {
        width: 50px !important;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        cursor: pointer;
        transition: background-color $transition, width $transition;

        &:hover {
            background-color: mix(white, $clGrey, 50);
        }

        & > div {
            width: 100%;
            height: 100%;

            > .icon {
                width: 50px;
                height: 50px;
                background-color: $clDark;

                animation-name: fadeIn;
                animation-duration: 0.2s;
                animation-delay: 0s;
                animation-fill-mode: both;

                background-position: center center;
                background-size: contain;

                transition: opacity $transition;

                &:hover {
                    opacity: 0.8;
                }
            }

            > .title {
                position: absolute;
                top: 70px;
                left: 13px;
                font-family: $fontHeading;
                font-size: 15px;

                white-space: nowrap;
                transform-origin: top left;
                transform: rotate(-90deg) translateX(-100%);

                animation-name: fadeIn;
                animation-duration: 0.2s;
                animation-delay: 0.3s;
                animation-fill-mode: both;
            }
        }
    }

    // Column specific
    &.bg__static-column.inactive {
        > div > .icon {
            background-color: $clPrimary;
            background-image: $iconMetadataWhiteUrl;
        }
    }

    &.bg__annotation-column.inactive {
        > div > .icon {
            background-color: $clSecondary;
            background-image: $iconAnnotationWhiteUrl;
        }
    }

    // make the column-content scroll when content doesn't fit in screen
    > div > .column-content {
        position: relative;
        overflow-y: auto;
        overflow-x: hidden;
        max-height: calc(100% - 50px);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.bg__column-header {
    height: $resourceViewerTabHeight;
    border-bottom: 1px solid $clMediumGrey;
    background-color: $clGrey;
    box-sizing: border-box;

    > .close-button {
        width: $resourceViewerTabHeight;
        height: $resourceViewerTabHeight;
        position: absolute;
        right: 0;
        top: 0;
        cursor: pointer;

        transition: background-color $transition;
        &:hover {
            background-color: rgba(white, 0.25);
            &::after,
            &::before {
                border-color: $clDarkGrey;
            }
        }

        // close cross
        $crossSize: 15px;
        &::after,
        &::before {
            content: '';
            display: block;
            position: absolute;
            width: $crossSize;
            left: 50%;
            top: 50%;
            margin-left: $crossSize / -2;
            border-bottom: 2px solid $clMediumGrey;
            transform: rotate(-45deg);
            transition: border-color $transition;
        }

        &::before {
            transform: rotate(45deg);
        }
    }
}

.bg__content-annotations-column {
    > .type-selector,
    > .filter {
        position: relative;
        padding: 10px 10px 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        > strong {
            width: 50px;
        }

        > select {
            width: 100%;
            margin: 0 10px;
            border-color: $clGreyTint;
            border-radius: 2px;
            background-color: white;
            padding: 3px 5px;
        }

        > input {
            padding: 3px;
            border: 1px solid $clGreyTint;
            border-radius: 2px;
            padding: 3px 5px;
        }

        > .clear {
            position: absolute;
            right: 9px;
            top: 4px;
            width: 30px;
            height: 30px;
            opacity: 0.6;
            cursor: pointer;

            &:hover {
                opacity: 1;
            }
            // clear cross
            $crossSize: 15px;
            &::after,
            &::before {
                content: '';
                display: block;
                position: absolute;
                width: $crossSize;
                left: 50%;
                top: 50%;
                margin-left: $crossSize / -2;
                border-bottom: 2px solid $clDarkGrey;
                transform: rotate(-45deg);
                transition: border-color $transition;
            }

            &::before {
                transform: rotate(45deg);
            }
        }
    }

    > .filter {
        padding-top: 5px;
    }

    > .error-message {
        padding: 10px;
    }
}

.bg__viewer-column {
    overflow-y:auto;
    > .bg__column-header {
        z-index: 2;
        display: flex;
        justify-content: space-between;

        > .playlist {
            padding-left: 10px;

            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: calc(100% - 80px);

            > strong {
                margin-right: 10px;
                padding-top: 15px;
                display: inline-block;
            }

            > .active {
                cursor: pointer;
                margin: 4px 0;
                border-radius: 2px;
                padding: 11px 30px 11px 10px;
                background-color: rgba(white, 0.3);
                border: 1px solid $clGreyTint;
                background-image: $arrowDownDarkUrl;
                background-repeat: no-repeat;
                background-position: center right 10px;

                &:hover {
                    background-color: white;
                }

                &.down {
                    background-image: $arrowUpDarkUrl;
                }
            }
        }

        > .actions {
            > .btn {
                margin-left: 0;
                background-image: none;
                margin-top: 5px;
                padding-left: 15px;
                padding-right: 15px;

                &.prev,
                &.next {
                    padding: 10px 15px;
                    font-size: 0;
                    background-position: center;
                    background-repeat: no-repeat;
                }

                &.prev {
                    background-image: $arrowLeftDarkUrl;
                }

                &.next {
                    background-image: $arrowRightDarkUrl;
                }
            }
        }
    }

    // Main column content
    > .column-content {
        // Media player
        > .player {
            position: relative;
            background-color: $clDark;
            color: white;

            > .error {
                padding: 15px 20px;
                border: 1px solid $clRed;
                background-color: mix($clRed, white, 60%);
                color: $clDark;
                text-align: center;
            }

            &.locked > .bg__audio-playout > .bg__flex-player,
            &.locked > .bg__video-playout > .bg__flex-player {
                position: relative;
                &::before,
                &::after {
                    content: '';
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    left: 0;
                    top: 0;
                    z-index: 1;
                }

                &::before {
                    // striped pattern
                    background: repeating-linear-gradient(
                        45deg,
                        rgba(white, 0.2),
                        rgba(white, 0.2) 20px,
                        rgba(white, 0.4) 20px,
                        rgba(white, 0.4) 40px
                    );
                }

                &::after {
                    // lock icon
                    background-image: $iconLockWhiteUrl;
                    background-repeat: no-repeat;
                    background-position: center center;
                    background-size: 10%;
                }
            }
        }
    }
}

.bg__metadata-column {
    padding: 10px;
    > .fields {
        padding-bottom: 10px;
        border-bottom: 1px solid $clGreyTint;
        margin-bottom: 10px;
        > div {
            > .title {
                font-size: 15px;
                font-weight: bold;
                text-transform: capitalize;
            }

            > p {
                margin: 4px 0 8px;
                font-size: 14px;
            }
        }
    }

    > .actions {
        padding-top: 10px;
        .btn {
            padding-left: 15px;
            margin: 0 10px 0 0;

            &.link {
                background-image: $iconLinkUrl;
            }
        }
    }
}

.actions .bg__viewer-paging,
.bg__viewer-paging {
    white-space: nowrap;
    > .btn {
        margin-left: 0;
        background-image: none;
        padding-left: 15px;
        padding-right: 15px;

        &:disabled {
            opacity: 0.2 !important;
            cursor: default;
        }

        &.prev,
        &.next {
            padding: 10px 15px;
            font-size: 0;
            background-position: center;
            background-repeat: no-repeat;
        }

        &.prev {
            background-image: $arrowLeftDarkUrl;
        }

        &.next {
            background-image: $arrowRightDarkUrl;
        }
    }
}

// make the container full width, always
body.resource-viewer {
    min-height: calc(100vh - 95px);

    > .container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
    }

    &.noHeader {
        height: 100%;
        .bg__tool-header {
            margin-top: 10px;
        }

        > .container {
            height: 100%;
        }

        .bg__viewer-base > .columns {
            height: calc(100vh - 130px);
        }
    }
}

.bg__resource-viewer {
    .bg__RV__not-found {
        padding: 10px 20px;
        margin: 100px auto;
        border-radius: 5px;
        max-width: 800px;
        border: 1px solid $clRed;
        background-color: mix($clRed, white, 60%);
        text-align: center;
    }
}

// Tabs
.bg__viewer-tabs {
    display: flex;

    > .tab {
        cursor: pointer;
        font-size: 15px;
        font-family: $fontHeading;
        border-bottom: 5px solid transparent;
        padding: 13px 8px 12px 15px;
        transition: background-color $transition, border-color $transition;

        &:hover {
            background-color: rgba($clGreyTint, 0.25);
            border-bottom: 5px solid rgba($clPrimary, 0.5);
        }

        &.active {
            border-bottom: 5px solid $clPrimary;
            &:hover {
                background-color: transparent;
            }
        }

        &.secondary {
            &:hover {
                border-bottom: 5px solid $clSecondary;
            }

            &.active {
                border-bottom: 5px solid $clSecondary;
            }
        }
    }
}

.bg__viewer-base {
    max-height: 100vh;
    overflow: hidden;

    > .columns {
        display: flex;
        justify-content: stretch;

        // TODO: update height after full resource header is implemented
        height: calc(100vh - 215px);
        overflow-y: hidden;

        // Here we define column layout
        > .bg__viewer-column {
            width: 100%;
        }

        > .bg__static-column,
        > .bg__annotation-column {
            width: $columnWidth;
            flex-shrink: 0;
        }
    }
}

.bg__viewer-header {
    padding: 0 10px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1390px;

    display: flex;
    flex-direction: column;

    > .resource-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;

        > .title {
            margin: 0;
            padding: 10px 0 10px;
            font-size: 17px;
            max-width: calc(100% - 350px);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            > span {
                margin-right: 10px;
            }
        }

        > .actions {
            display: flex;
            > .btn.bookmark {
                margin-left: 0px;
                background-color: $clSecondary;
                background-image: none;
                color: white;
                padding-right: 15px;
                padding-left: 13px;
                > i {
                    margin-right: 7px;
                }
            }
        }
    }
}


// Media Column
.bg__image-viewer {

	.bg__imv__overlay {
		background-color: $image-overlay-bg;
		border-radius: $image-overlay-border-radius;
		box-shadow: $box-shadow-base $shadow-subdued;
		cursor: pointer;
		outline: $image-overlay-border;
		padding:10px;
		&.active { /* possibly change this into .bg__flex-image-viewer--active (BEM style) */
			background-color: $image-overlay-bg-active;
			border-radius: $image-overlay-border-radius-active;
			box-shadow: $box-shadow-base $shadow-active;
			outline: $image-overlay-border-active;
		}
		button {
			color:black;
			border-radius: 2px;
		}
	}
	.bg__imv__highlight {
		background-color: $highlight-color;
		opacity: 0.4;
	}
}
.bg__playlist-dropdown {
    z-index: 1000;
    position: absolute;
    width: auto;
    max-width: 60vw;
    top: 46px;
    max-height: 50vh;
    overflow-y: auto;
    box-shadow: 2px 5px 10px rgba($clDark, 0.2);
    user-select: none;

    // may change if playlist label changes
    left: 90px;
}

.bg__playlist-dropdown-row {
    background-color: white;
    border-bottom: 1px solid #ccc;

    transition: background-color $transition;

    padding: 7px 10px 7px 5px;
    cursor: pointer;
    color: $clDark;
    border-left: 5px solid transparent;

    &:hover {
        background-color: mix(white, $clPrimary, 90%);
    }

    &.active {
        border-left: 5px solid $clPrimary;
        background-color: mix(white, $clPrimary, 80%);
        &:hover {
            background-color: mix(white, $clPrimary, 80%);
        }
    }

    > .count {
        background: $clPrimary;
        color: white;
        margin-left: 5px;
        padding: 2px 3px;
        min-width: 20px;
        text-align: center;
        border-radius: 50%;
        font-size: 11px;
        font-weight: bold;
        float: right;
    }
}

/* Timeline specific variables */

$tlLayerHeight: 40px;
$tlHeaderHeight: 40px;
$tlLeftWidth: 250px;

.bg__tl-actions {
    padding: 10px;
    background-color: $clGrey;
    border-bottom: 1px solid $clGreyTint;
    > input {
        padding: 5px 25px 5px 5px;
        border-radius: 2px;
        border: 1px solid $clGreyTint;
        width: $tlLeftWidth - 20px;
        box-sizing: border-box;

        background-image: $iconSearchUrl;
        background-position: center right 5px;
        background-size: 18px;
        background-repeat: no-repeat;
    }

    > .right {
        user-select: none;
        float: right;
        > div {
            padding: 5px 10px;
            display: inline-block;
            margin-right: 5px;
            background-color: mix($clGrey, $clGreyTint, 50%);
            border-radius: 2px;
            text-transform: uppercase;
            height: 30px;
            min-width: 30px;
            vertical-align: top;
            cursor: pointer;
            font-size: 13px;
            font-weight: 500;
            &:hover {
                background-color: mix($clGrey, $clGreyTint, 80%);
            }

            // Zoom to selected
            &.zoom-selected {
                font-family: $fontHeading;
            }

            // Zoom in/out
            $tlZoomIconSize: 12px;
            &.zoom-out,
            &.zoom-in {
                position: relative;
                font-size: 0;
                &:before,
                &:after {
                    content: '';
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    margin-left: -$tlZoomIconSize/2;
                    width: $tlZoomIconSize;
                    margin-top: -1px;
                    height: 2px;
                    background-color: $clDarkGrey;
                }
            }
            &.zoom-in {
                &:before {
                    transform: rotate(90deg);
                }
            }

            // Previous/Next
            &.next,
            &.prev {
                background-image: $arrowRightDarkUrl;
                background-position: center center;
                background-repeat: no-repeat;
                font-size: 0;
            }

            &.prev {
                transform: rotate(180deg);
            }
        }
    }
}

.bg__tl-time {
    position: relative;
    height: $tlHeaderHeight;
    background-color: $clDark;
    overflow: hidden;
}

.bg__tl-cursor {
    user-select: none;
    position: absolute;
    z-index: 2;
    width: 1px;
    background-color: $clPrimary;
    height: 100%;
    top: 0;
    pointer-events: none;

    span {
        position: absolute;
        font-size: 12px;
        padding: 1.5px 4px;
        background-color: $clPrimary;
        color: white;
    }

    &.end {
        span {
            position: absolute;
            top: 0;
            right: 0;
        }
    }
}

.bg__tl-layer-headers {
    > .tl-layer-header {
        cursor: pointer;
        box-sizing: border-box;
        border-bottom: 1px solid $clGreyTint;
        min-height: $tlLayerHeight;

        font-size: 13px;
        font-weight: bold;
        line-height: 40px;
        padding: 0 10px 0 7px;
        text-overflow: ellipsis;
        white-space: nowrap;
        border-left: 3px solid transparent;
        transition: background-color 0.2s ease-out, border-color 0.2s ease-out;

        &:hover {
            border-left: 3px solid mix(white, $clPrimary, 50%);
            background-color: mix(white, $clPrimary, 85%);
        }

        &.active {
            border-left: 3px solid $clPrimary;
            background-color: mix(white, $clPrimary, 75%);
        }
    }
}

.bg__tl-layers {
    > .bg__tl-layer {
        min-height: $tlLayerHeight;
        box-sizing: border-box;
        border-bottom: 1px solid $clGreyTint;
        position: relative;
        width: 100%;
        user-select: none;
        padding: 2px 0;
        &:hover {
            z-index: 1;
        }
    }
}

// include a tl-layer rootclass - as that holds the layer specific class
.bg__tl-layer {
    // default section
    > .bg__tl-section {
        overflow: hidden;
        position: absolute;
        top: 0px;
        height: 40px;
        box-sizing: border-box;
        font-size: 12px;
        cursor: pointer;
        transition: outline 0.2s ease-out, opacity 0.2 ease-out;
        outline: 1px solid transparent;

        &:hover {
            outline: 1px solid white;
            z-index: 2;
            opacity: 0.8;
        }

        &.match {
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        }

        &.no-match {
            opacity: 0.3;
        }

        &.active {
            outline: 3px solid white;
            z-index: 3;
        }
    }

    &.segment {
        > .bg__tl-section {
            background-color: mix(white, $clPrimary, 75%);
            border-left: 2px solid mix(white, $clPrimary, 50%);
            border-right: 2px solid mix(white, $clPrimary, 50%);
            white-space: nowrap;
            text-overflow: ellipsis;
            padding: 0 5px;
            line-height: 40px;
            &.small {
                span {
                    display: none;
                }
            }
        }
    }

    &.asr-sentence {
        > .bg__tl-section {
            > div {
                width: 100%;
                height: 100%;
                background: $clDark;
            }
        }
    }

    &.asr-words {
        > .bg__tl-section {
            background-color: mix(white, $clPrimary, 90%);
            border-left: 1px solid mix(white, $clPrimary, 50%);
            border-right: 1px solid mix(white, $clPrimary, 50%);
            padding: 0px;
            height: 100%;
            &.small {
                div {
                    display: none;
                }
            }
        }
    }

    &.images {
        > .bg__tl-section {
            height: 80px;
            > div {
                width: 100%;
                height: 100%;
                background-size: cover;
                background-position: center center;
                background-repeat: no-repeat;
            }
        }
    }
}

.bg__timeline {
    margin-bottom: 20px;
    > .tl-row {
        display: flex;
        justify-content: stretch;
        width: 100%;

        > .tl-left {
            flex-grow: 0;
            flex-shrink: 0;
            width: $tlLeftWidth;

            > .tl-annotation-actions {
                height: $tlHeaderHeight;
                border-bottom: 1px solid $clDarkGrey;
                box-sizing: border-box;
            }
        }

        > .tl-right {
            border-left: 1px solid $clDark;
            flex-grow: 1;
            position: relative;
            overflow: hidden;
        }
    }
}

 // timeline
.bg__simple-word-cloud {
    font-size: 13px;
    padding: 5px;
    text-align: center;

    > div {
        display: inline-block;
        padding: 2px 5px;
        user-select: none;
    }
}

.bg__segment-actions {
    > .row {
        margin: 0;
        display: flex;
        justify-content: flex-start;

        > button {
            background-color: $clGrey;
            text-transform: uppercase;
            font-family: $fontHeading;
            border: 0;
            padding: 5px 10px;
            border-radius: 2px;
            box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
            margin: 5px 5px;
            transition: opacity 0.3s ease-out;

            &:hover {
                opacity: 0.8;
            }

            &.btn-primary {
                background-color: $clSecondary;
            }
        }

        > span {
            line-height: 40px;
            display: inline-block;
            margin: 0 10px;
        }
    }
}


// Content Annotations Column
.bg__timed-list {
    position: relative;
    max-height: calc(100% - 139px);
    display: flex;
    flex-direction: column;
    border-top: 1px solid $clGreyTint;

    > .filter-results {
        background: $clGrey;
        border-bottom: 1px solid $clGreyTint;
        padding: 5px 10px;
        font-size: 13px;
    }

    > .list-container {
        list-style: none;
        padding: 0;
        margin: 0;
        overflow-y: auto;
        max-height: 100%;

        > li {
            cursor: pointer;
            padding: 5px 10px;
            border-bottom: 1px solid $clGreyTint;
            display: flex;
            font-size: 13px;
            line-height: 16px;
            transition: background-color $transition;

            &:hover {
                background-color: $clGrey;
                border-right: 3px solid $clGreyTint;
                padding-right: 7px;
            }

            &.current {
                background-color: mix($clPrimary, white, 25%);
                border-right: 3px solid $clPrimary;
                padding-right: 7px;
            }

            > .start-time {
                font-size: 11.5px;
                line-height: 16px;
                font-weight: bold;
                padding-right: 10px;
                white-space: nowrap;
            }

            > span > .highLight-text {
                background-color: mix($clPrimary, white, 25%);
                border-bottom: 1px dotted $clPrimary;
            }

            &.current {
                > span > .highLight-text {
                    background-color: mix($clPrimary, white, 50%);
                }
            }
        }
    }
}

.bg__word-cloud {
    position: relative;
    max-height: calc(100% - 139px);
    border-top: 1px solid $clGreyTint;
    font-size: 13px;
    padding: 5px;
    text-align: center;

    > div {
        display: inline-block;
        padding: 2px 5px;
        margin-right: 5px;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color $transition;
        user-select: none;

        &:hover {
            background-color: mix($clPrimary, white, 25%);
        }
    }
}


// Annotation Column
.bg__classification-form {
    > form > .filter {
        padding: 0 0 5px;
        display: flex;
        justify-content: start;
        align-items: center;
        select {
            margin-left: 10px;
        }
    }

    .react-autosuggest__input {
        font-size: 13px;
    }

    .react-autosuggest__suggestion {
        font-size: 12px;
        padding: 2px 10px !important;
        border-bottom: 1px solid #eee;
        position: relative;

        > * .label {
            color: #fff;
            position: absolute;
            right: 5px;
            top: 2px;
            margin-bottom: 0;
            padding: 2px 5px 3px;
            font-size: 11px;
            margin-top: 2px;
            &.label-info {
                background-color: #5bc0de;
            }
            &.label-warning {
                background-color: #f0ad4e;
            }
            &.label-success {
                background-color: #5cb85c;
            }
            &.label-danger {
                background-color: #d9534f;
            }
        }
    }
}

.bg__comment-form {
    > form {
        display: flex;
        align-items: flex-end;
        flex-direction: column;

        textarea {
            width: 100%;
            min-height: 30px;
            min-width: auto;
            max-width: 100%;
            padding: 10px;
            // overflow is hidden because we use the autosize textarea component
            overflow: hidden;
            font-size: 12px;
        }

        button {
            background-color: $clSecondary;
            color: white;
            font-family: $fontHeading;
            border: 0;
            padding: 6px 15px;
            font-size: 1.2em;
            text-transform: uppercase;
            border-radius: 2px;
            transition: opacity 0.3s ease-out;
            &:hover {
                opacity: 0.8;
            }
        }
    }
}

.bg__link-form {
    > .btn-primary {
        background-color: #468dcb;
        color: #fff;
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
        border-radius: 2px;
        cursor: pointer;
        display: inline-block;
        text-transform: uppercase;
        padding: 3px 7px;
        line-height: 20px;
        margin-top: 5px;
        float: right;
    }

    > .filter {
        padding: 0 0 5px;
        display: flex;
        justify-content: start;
        align-items: center;
        margin-bottom: 5px;
        border-bottom: 1px solid $clGreyTint;
        select {
            margin-left: 10px;
        }
    }

    > .link-form {
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        .link-row {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-bottom: 5px;

            &.input-row {
                position: relative;
            }

            strong {
                white-space: nowrap;
            }

            input {
                flex-grow: 1;
                min-width: 40px;
                width: 100%;
                margin: 0 0 0 15px;
                border: 1px solid $clGreyTint;
                border-radius: 2px;
                padding: 0 5px;
                line-height: 30px;
            }

            .clear {
                display: block;
                width: 30px;
                height: 30px;
                position: absolute;
                right: 0px;
                top: 0px;
                &:after {
                    content: '+';
                    color: $clDark;
                    font-weight: bold;
                    transform: rotate(45deg);
                    display: block;
                    font-size: 24px;
                    position: absolute;
                    right: 6px;
                    top: -1px;
                    opacity: 0.6;
                    transition: opacity 0.3s ease-out;
                    cursor: pointer;
                }
                &:hover {
                    &:after {
                        opacity: 1;
                    }
                }
            }
        }
    }

    > .link-search-results {
        width: 100%;
        display: flex;
        flex-direction: column;

        .clear {
            margin-top: 5px;
            cursor: pointer;
            display: block;
            padding: 5px;
            text-align: center;
            font-weight: bold;
            text-transform: uppercase;

            opacity: 0.7;
            transition: opacity 0.3s ease-out, color 0.3s ease-out;
            &:hover {
                color: $clPrimary;
                opacity: 1;
            }
        }

        .link-result-list {
            width: 100%;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            max-height: 35vh;
            min-height: 200px;
            overflow-y: auto;

            .link-result {
                user-select: none;
                cursor: pointer;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: space-evenly;
                border-bottom: 1px solid $clGreyTint;
                padding: 5px 5px 5px 10px;
                border-left: 3px solid $clGreyTint;
                transition: background-color 0.3s ease-out,
                    border-color 0.3s ease-out;
                &:hover {
                    background-color: white;
                    border-left: 3px solid $clPrimary;
                }
            }
        }
    }
}

.bg__metadata-form {
    .card-form {
        width: 100%;
        display: flex;
        flex-direction: column;

        > .filter {
            padding: 0px 0px 5px;
            display: flex;
            justify-content: start;
            align-items: center;
            margin-bottom: 10px;
            border-bottom: 1px solid $clGreyTint;
            select {
                width: 100%;
                margin: 0 10px;
                border-color: $clGreyTint;
                border-radius: 2px;
                background-color: white;
                padding: 3px 5px;
            }
        }

        .card-fields {
            width: 100%;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            .card-row {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: start;
                .card-key,
                .card-value {
                    input {
                        min-width: 40px;
                        width: 98%;
                        margin: 2px 0px;
                        padding: 3px;
                        border: 1px solid $clGreyTint;
                        border-radius: 2px;
                        padding: 3px 5px;
                    }
                }
                .card-key {
                    font-weight: bold;
                }
            }
        }

        > .actions {
            display: flex;
            justify-content: space-between;
            margin-top: 5px;
            .add-property {
                cursor: pointer;
                padding: 3px 7px;
                line-height: 20px;
                font-weight: bold;
                text-transform: uppercase;
                opacity: 0.7;
                transition: opacity 0.3s ease-out, color 0.3s ease-out;
                flex-grow: 2;
                &:hover {
                    color: $clPrimary;
                    opacity: 1;
                }
            }

            .save-button,
            .cancel-button {
                border-radius: 2px;
                border: 0;
                padding: 8px 20px;
                font-size: 14px;
                line-height: 17px;
                text-transform: uppercase;
                cursor: pointer;
                transition: background-color 0.3s ease-out;
                font-family: $fontHeading;
            }

            .save-button {
                background-color: $clPrimary;
                color: white;

                &:hover {
                    background-color: lighten($clPrimary, 10%);
                }
            }

            .cancel-button {
                margin-right: 10px;
                background-color: $clGreyTint;
                color: $clDark;

                &:hover {
                    background-color: lighten($clGreyTint, 50%);
                }
            }
        }
    }
}


$annotationColumnFilterHeight: 40px;
.bg__annotation-list {
    position: relative;
    height: calc(100% - #{$resourceViewerTabHeight});

    > .targets {
        position: relative;
        min-height: calc(100% - #{$annotationColumnFilterHeight});
        max-height: calc(100% - #{$annotationColumnFilterHeight});
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* Filter */
    .annotation-filter {
        background: $clGrey;
        box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: $annotationColumnFilterHeight;
        display: flex;
        justify-content: space-around;
        padding: 0 10px;

        input {
            margin: 0;
            vertical-align: middle;
        }

        label {
            padding-left: 5px;
            line-height: $annotationColumnFilterHeight;
            font-size: 12px;
            font-weight: 600;
        }
    }
}

.bg__target-header {
    border-left: 3px solid $clGreyTint;
    padding: 10px 30px 10px 7px;
    font-size: 14px;
    font-weight: bold;
    font-family: $fontHeading;
    cursor: pointer;
    transition: background-color 0.3s ease-out, border-color 0.3s ease-out;

    background-image: $arrowDownDarkUrl;
    background-position: right 9px center;
    background-repeat: no-repeat;
    background-size: 12px;

    &:hover {
        background-color: $clGrey;
    }

    &.active {
        background-color: $clGrey;
        background-image: $arrowUpDarkUrl;
        border-left: 3px solid $clPrimary;
        &:hover {
            background-color: white;
        }
    }

    > .left {
        > .title {
            text-transform: uppercase;
        }
        .fa {
            width: 20px;
            margin-right: 0px;
            padding-right: 10px;
            padding-left: 0;
            box-sizing: border-box;
        }

        .bg__info {
            padding-right: 0;
        }
    }

    > .count {
        float: right;
        vertical-align: middle;
        font-size: 12px;
        line-height: 12px;
        color: white;
        background-color: $clPrimary;
        border-radius: 15px;
        padding: 3px;
        min-width: 18px;
        text-align: center;
    }
}

.bg__single-annotation-target {
    margin-top: 1px;

    .annotations {
        padding-left: 10px;
    }
}

.bg__type-header {
    display: block;
    height: 30px;
    padding-left: 4px;
    font-weight: 600;
    font-size: 13px;
    line-height: 33px;
    cursor: pointer;

    > .title {
        text-transform: capitalize;
        cursor: pointer;
    }

    .fa {
        width: 20px;
        margin-right: 0px;
        padding-right: 0px;
        padding-left: 0;
        box-sizing: border-box;
    }

    .bg__info {
        padding-right: 0;
        &.left {
            padding-right: 0;
        }
    }

    .edit {
        color: $clSecondary;
        position: absolute;
        right: 0;
        padding: 0px 10px;
        width: 30px;
        text-align: center;
        transition: background-color 0.3s ease-out;
        cursor: pointer;
        font-size: 19px;
        &:hover {
            background-color: $clGrey;
        }

        &.active:after {
            transform: rotate(45deg);
        }

        &:after {
            display: inline-block;
            transition: transform 0.3s ease-out;
            content: '+';
        }
    }

    &:hover {
        .edit {
            background-color: $clGrey;
        }
    }
}

.bg__annotation-type {
    border-bottom: 1px solid $clGreyTint;
    min-height: 35px;

    &.has-content {
        padding-bottom: 5px;
        margin-bottom: 5px;
        > .type-header {
            margin-bottom: 5px;
        }
    }

    > .annotation-form {
        background-color: $clGrey;
        padding: 10px;
        font-size: 0.8em;
        margin-bottom: 10px;

        input,
        form {
            margin: 0;
            margin-block-end: 0;
        }
        textarea {
            margin-bottom: 5px;
        }
    }

    > ul {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-left: 15px;

        > li {
            padding: 0;
            margin: 0;
        }

        &.type-view-classification {
            li {
                display: inline-block;
            }
        }
    }
}


.bg__segment-annotations {
    margin-top: 1px;

    > .actions {
        position: relative;
        height: 30px;

        span {
            line-height: 30px;
            padding-left: 10px;
            font-size: 13px;
            display: inline-block;
        }

        > .add {
            color: $clPrimary;
            position: absolute;
            right: 0;
            top: 0;
            width: 30px;
            height: 33px;
            text-align: center;
            transition: background-color 0.3s ease-out;
            cursor: pointer;
            font-size: 19px;
            line-height: 33px;

            &:hover {
                background-color: $clGrey;
            }

            &.active:after {
                transform: rotate(45deg);
            }

            &:after {
                display: inline-block;
                transition: transform 0.3s ease-out;
                content: '+';
            }
        }
    }

    > .segments {
        padding-left: 10px;
    }
}

.bg__segment-header {
    border-left: 3px solid transparent;
    padding: 10px 30px 10px 7px;
    font-size: 12px;
    font-family: $fontHeading;
    cursor: pointer;
    transition: background-color 0.3s ease-out, border-color 0.3s ease-out;

    background-image: $arrowDownDarkUrl;
    background-position: right 9px center;
    background-repeat: no-repeat;
    background-size: 12px;

    &:hover {
        background-color: $clGrey;
    }

    &.active {
        background-color: $clGrey;
        background-image: $arrowUpDarkUrl;
        &:hover {
            background-color: mix($clGrey, white, 50%);
        }
    }

    &.highlight {
        border-left: 3px solid $clPrimary;
        background-color: mix($clPrimary, white, 15%) !important;
    }

    .title {
        display: inline-block;
        user-select: none;
        cursor: pointer;
        transition: opacity 0.3s ease-out;
        white-space: nowrap;
        max-width: calc(100% - 25px);
        text-overflow: ellipsis;
        overflow: hidden;

        &:hover {
            opacity: 0.8;
        }
    }

    .form {
        display: inline-block;
        // negative margins keep the segment line height intact
        margin-top: -5px;
        margin-left: -5px;
        margin-bottom: -5px;

        .delete {
            display: inline-block;
            padding: 5px 10px;
            color: $clPrimary;
            &:hover {
                text-decoration: underline;
            }
        }

        &.spatial {
            input {
                display: inline-block;
                margin-left: 5px;
                margin-right: 5px;
                max-width: 40px;
                border: 1px solid $clGreyTint;
                border-radius: 3px;
                padding: 4px;
                font-size: 13px;

                &:focus {
                    border-bottom: 1px dotted $clPrimary;
                    border-left: 0;
                }

                // hide arrow buttons
                /* Chrome, Safari, Edge, Opera */
                &::-webkit-outer-spin-button,
                &::-webkit-inner-spin-button {
                    -webkit-appearance: none;
                    margin: 0;
                }
                // FireFox
                -moz-appearance: textfield;
            }
        }
    }

    > .count {
        float: right;
        vertical-align: middle;
        font-size: 12px;
        line-height: 12px;
        color: $clDark;
        background-color: $clGrey;
        border-radius: 15px;
        padding: 3px;
        min-width: 18px;
        text-align: center;
    }
}

.bg__segment {
    margin-top: 1px;
    padding-left: 4px;

    .annotations {
        padding-left: 6px;
    }
}

.bg__time-input {
    display: inline-block;
    border: 1px solid $clGreyTint;
    border-radius: 5px;
    background: white;

    input[type='text'] {
        width: 27px;
        display: inline-block;
        border: 0;
        border-bottom: 1px dotted $clGreyTint;
        text-align: center;
        padding: 5px;
        outline: none;
        min-width: 0;
        margin: 0;
        &:focus {
            border-left: 0;
            border-bottom: 1px dotted $clPrimary;
        }
    }
}

.bg__selection-temporal-form {
    background: $clGrey;
    padding: 5px 10px;
    label {
        font-size: 12px;
    }

    // local changes to time-input
    .bg__time-input {
        margin-left: 5px;
        margin-right: 5px;
    }

    .btn {
        margin: 0;
        vertical-align: top;
        padding: 4px 12px;
        margin-left: 5px;
        text-transform: uppercase;
        font-family: $fontHeading;
    }
}

.bg__selection-spatial-form {
    background: $clGrey;
    padding: 5px 10px;
    label {
        font-size: 12px;
    }

    input {
        display: inline-block;
        margin-left: 5px;
        margin-right: 5px;
        max-width: 40px;
        border: 1px solid $clGreyTint;
        border-radius: 3px;
        padding: 4px;
        font-size: 13px;

        &:focus {
            border-bottom: 1px dotted $clPrimary;
            border-left: 0;
        }

        // hide arrow buttons
        /* Chrome, Safari, Edge, Opera */
        &::-webkit-outer-spin-button,
        &::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        // FireFox
        -moz-appearance: textfield;
    }

    .btn {
        margin: 0;
        vertical-align: top;
        padding: 4px 12px;
        margin-left: 5px;
        text-transform: uppercase;
        font-family: $fontHeading;
    }
}


// Annotation Column types
@mixin deleteButton() {
    display: none;
    position: absolute;
    z-index: 10;
    right: 0px;
    top: 0;
    width: 22px;
    height: 22px;
    background-color: rgba($clDark, 0.8);
    background-image: $iconCrossUrl;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 10px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    cursor: pointer;
}


.bg__classification-type {
    display: inline-block;
    background-color: $clGreyTint;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 12px;
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
    position: relative;
    min-width: 40px;

    &:hover {
        > .delete {
            display: block;
        }
    }

    &.vocabulary-gtaa {
        background-color: #ccdae7;
    }

    &.vocabulary-dbpedia {
        background-color: #e7ccda;
    }

    &.vocabulary-unesco {
        background-color: #dae7cc;
    }

    > .delete {
        @include deleteButton();
    }
}

@mixin deleteButton() {
    display: none;
    position: absolute;
    z-index: 10;
    right: 0px;
    top: 0;
    width: 22px;
    height: 22px;
    background-color: rgba($clDark, 0.8);
    background-image: $iconCrossUrl;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 10px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    cursor: pointer;
}


.bg__comment-type {
    position: relative;
    padding-right: 10px;
    font-size: 0.9em;
    text-align: right;
    padding-bottom: 5px;

    &:hover {
        > .delete {
            display: block;
        }
    }

    > pre {
        background: white;
        font-family: $fontBody;
        display: block;
        border: 0;
        border-bottom: 1px solid $clGreyTint;
        padding: 5px;
        text-align: left;
        margin-bottom: 3px;
    }

    > textarea {
        min-width: 100%;
        min-height: 30px;
        // text-overflow is hidden because we use the autogrow textarea component
        text-overflow: hidden;
    }

    > .user,
    .created {
        text-align: right;
        font-size: 0.8em;
        text-transform: uppercase;
        margin-left: 10px;
    }

    > .delete {
        @include deleteButton();
        right: 9px;
        border-radius: 2px;
    }
}

@mixin deleteButton() {
    display: none;
    position: absolute;
    z-index: 10;
    right: 0px;
    top: 0;
    width: 22px;
    height: 22px;
    background-color: rgba($clDark, 0.8);
    background-image: $iconCrossUrl;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 10px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    cursor: pointer;
}


$linkColor: $clGreyTint;

.bg__link-type {
    position: relative;
    display: inline-block;
    background-color: $linkColor;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 12px;
    display: inline-block;
    text-decoration: none;
    color: $clDark;
    margin-right: 5px;
    margin-bottom: 5px;
    min-width: 40px;

    &:hover {
        > .delete {
            display: block;
        }
    }

    transition: background-color 0.3s ease-out;

    &:hover,
    &:focus,
    &:active {
        background-color: mix($linkColor, white, 50%);
        color: $clDark;
        text-decoration: none;
    }

    > .delete {
        @include deleteButton();
    }
}

@mixin deleteButton() {
    display: none;
    position: absolute;
    z-index: 10;
    right: 0px;
    top: 0;
    width: 22px;
    height: 22px;
    background-color: rgba($clDark, 0.8);
    background-image: $iconCrossUrl;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 10px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    cursor: pointer;
}


.bg__metadata-type {
    position: relative;
    padding-right: 10px;
    font-size: 0.9em;
    padding-bottom: 5px;
    text-align: right;

    &:hover {
        > .delete {
            display: block;
        }
    }

    &.edit {
        text-align: left;
        background-color: $clGrey;
        padding: 10px;
        font-size: 0.8em;
        margin-bottom: 10px;

        input,
        form {
            margin: 0;
            margin-block-end: 0;
        }
        textarea {
            margin-bottom: 5px;
        }
    }

    > ul {
        background: white;
        font-family: $fontBody;
        display: block;
        border: 0;
        border-bottom: 1px solid $clGreyTint;
        padding: 5px;
        text-align: left;
        margin-bottom: 3px;
        list-style: none;
        > li {
            display: flex;
            justify-content: stretch;

            > strong {
                min-width: 100px;
                flex-grow: 0;
            }
        }
    }

    > .template,
    > .created {
        text-align: right;
        font-size: 0.8em;
        text-transform: uppercase;
        margin-left: 10px;
    }

    > .delete {
        @include deleteButton();
        right: 9px;
        border-radius: 2px;
    }
}


.bg__annotation { /* Annotation.jsx */
	span {
		padding-right: 5px;
	}
	.bg__an__label {
		color: $annotation-label-color;
	}
	.bg__an__fragment-info {
		color: $annotation-frag-info-color;
	}
	.bg__an__prov-info {
		color: $annotation-prov-info-color;
		font-weight: bold;
	}
}
.bg__annotation-box {} /* AnnotationBox.jsx */
.bg__annotation-list {

	.bg__anl__list {
		margin-top: 10px;
	}

	.btn-danger { /*FIXME ugly override of bootstrap class*/
		background-color: #f26c50;
	}

} /* AnnotationList.jsx */
.bg__annotation-summary { /* AnnotationSummary.jsx */
	.bg__ans__card-list {
		border:1px solid white;
		list-style: none;
		margin: 0px;
		margin-bottom:5px;
		padding: 10px;
		.key {
			font-weight: bold;
		}
		li {
			border-bottom:1px dotted $border-color;
			word-break: break-word;
		}
		&:hover {
			background-color: $subdued-hover-color;
			border: 1px solid $fill-color;
		}
	}
}
.bg__classification { /* Classification.jsx */
	display: inline-block !important;
	font-size: 100% !important;
	margin: 0px 5px 5px 0px;
	&.ms_custom {
		color: $subdued-bg;
	}
}
.bg__classify-form {

    .react-autosuggest__suggestion {
        >  * .label {
            color: #fff;
            display: inline;
            float: right;
            margin-bottom: 0;
            padding:  2px 8px 3px;

            &.label-info {
                background-color: #5bc0de;
            }
            &.label-warning {
                background-color: #f0ad4e;
            }
            &.label-success {
                background-color: #5cb85c;
            }
            &.label-danger {
                background-color: #d9534f;
            }
        }
    }

}
.bg__comment-form {}  /* CommentingForm.jsx */
.bg__link-form { /* LinkingForm.jsx */
	.bg__lf__result-list {
		height: 400px;
		overflow: auto;
	}
}
.bg__information-card-form { /* MetadataForm.jsx */
	.bg__icf__card-table {
		margin-bottom: $default-margin;
		width: 100%;
	}

	.bg__icf__card-table-row {
		border-bottom:5px solid transparent;
		vertical-align: top;
		.bg__icf__key {
			padding-right:1%;
			width:25%;
		}
		.bg__icf__value {
			padding-right:1%;
			width:65%;
		}
		.bg__icf__icon {
			width:6%;
		}
	}
}
.bg__segmentation-controls {
	input[type=text] {
		min-width: 60px;
	}
}

.bg__ld-resource-viewer {
	overflow-x : auto;
	max-height: 620px;
	.bg__ldrv__property-list {
		font-family: monospace;
		list-style : none;
		.property {
			margin-top:5px;
			.predicate {
				font-weight: bold;
			}
			.value {
				margin-left: 20px;
			}
		}
		.keyword {
			.predicate {
				font-weight:bold;
			}
			.value {
				color: blue;
				cursor:pointer;
				text-decoration:underline;
				&:hover {
					text-decoration:none;
				}
			}
		}
	}
	.bg__ldrv__info {
		margin:10px 0px;
	}
}

.bg__flex-image-viewer {
	.bg__fiv__overlay {
		background-color: $image-overlay-bg;
		border-radius: $image-overlay-border-radius;
		box-shadow: $box-shadow-base $shadow-subdued;
		cursor: pointer;
		outline: $image-overlay-border;
		padding:10px;
		&.active { /* possibly change this into .bg__flex-image-viewer--active (BEM style) */
			background-color: $image-overlay-bg-active;
			border-radius: $image-overlay-border-radius-active;
			box-shadow: $box-shadow-base $shadow-active;
			outline: $image-overlay-border-active;
		}
	}
	.bg__fiv__highlight {
		background-color: $highlight-color;
		opacity: 0.4;
	}
}
.bg__flex-player {
    .flex-container {
        display: flex;
        width: 100%;
    }

    .player-container {
        width: 100%;
        margin: auto;
        video {
            max-height: 50vh;
        }

        .full-screen {
            video {
                max-height: 100vh;
            }
        }
    }

    .player-tabs {
        overflow-y: auto;
        overflow-x: hidden;
        padding: 10px;
        width: 40%;
        margin-left: 2%;
        max-height: 562px;
    }
}


.bg__annotation-timeline {
	background-color: $timeline-bg;
	cursor: crosshair;
	display:block;
	height:50px;
	margin-top:10px;
	position:relative;
	width:100%;
}
.bg__segmentation-timeline {
	background-color: $timeline-bg;
	cursor: crosshair;
	display:block;
	height:50px;
	margin-top:10px;
	position:relative;
	width:100%;
}

.bg__transcriber {
	@import url("https://fonts.googleapis.com/css?family=BenchNine");
	background-color: $timeline-bg;
	border: 1px solid $subdued-hover-color;
	color: #9493a1;
	font-family: "BenchNine";
	font-size: 1.5rem;
	letter-spacing: .3px;
	margin-bottom: 2rem;
	margin-top: 10px;
	padding: 1rem 0;
	position: relative;

	.transcript-line {
		position: relative;
		padding: .5rem;
		&:hover {
			color: white;
		}

		&.current-line {
			color: white;

			&:hover {
				color: white;
			}
		}

		.line-start-time {
			background-color: $fill-color;
			border-radius: 4px;
			color: white;
			display: inline-block;
			font-family: Curier;
			font-size: 1rem;
			margin: 0 10px 0 0;
			min-width: 40px;
			padding: 1px 6px;
		}
	}

	.transcriber-search-bar {
		position: absolute;
		top:0;
		z-index: 10;
		background-color: white;
		width: 100%;

		.glyphicon.glyphicon-search {
			position: absolute;
			top: 7px;
			left: 7px;
			font-size: 12px;
		}

		.transcriber-search-input {
			width: 92%;
			box-sizing: border-box;
			border: none;
			font-size: 1rem;
			background-color: white;
			background-position: 10px 10px;
			background-repeat: no-repeat;
			padding: 6px 10px 6px 30px;
			margin-bottom: 0;
		}

		.numberOfMatches {
			background-color: #eee;
			border: 1px solid #e3e3e3;
			border-radius: 4px;
			bottom: 2px;
			display: inline-block;
			float: right;
			font-size: 12px;
			padding: 2px 4px;
			position: absolute;
			right: 0;
			text-align: center;
			.glyphicon {
				border: none;
				background-color: inherit;
			}
		}
	}

	.transcript-container {
		overflow-y: scroll;
		height: 200px;
		margin-top:20px;
		.highLightText {
			color:#e02717;
		}
	}

} //TODO remove the whole thing after the new RV has been accepted
.bg__aggregation-box { /* AggregationBox.jsx */

	margin-bottom: 30px;

	/* hamburger menu containing extra options */
	.bg__agb__facet-header {
		border-bottom: 1px solid $clGreyTint;
		background-color: $clGrey;
		border-radius: 2px 2px 0 0;
		position: relative;
		color: black;
		&:hover {
			background-color: mix($clGrey, $clGreyTint, 50%);
		}

		.bg__agb__facet-title-bar {
			padding: 8px 10px 9px 10px;
			cursor: pointer;

			.bg__agb__menu-icon {
				position: absolute;
				right: 0;
				top: 2px;
				padding: 7px 6px;
				margin: 0;
				font-weight: bold;
				font-size: 16px;
			}

			.bg__agb__facet-title {
				color: black;
				font-size: 16px;
				font-family: $fontHeading;
				overflow: hidden;
				font-weight: normal;
				display: inline-block;
				text-overflow: ellipsis;
				white-space: nowrap;
				max-width: calc(100% - 5px);

				.fa-info-circle {
					font-size: 13px;
					padding-top: 6px;
					margin-left: 0px;
					margin-right: 6px;
				}
			}
		}

		ul {
			display: none;
		}

		input:checked ~ ul {
			border-top: 1px solid #d3d3d3;
			display: flex;
			width: 100%;
		}

		.bg__agb__extra-options {
			display: flex;
			color: black;
			padding: 10px 5px;
			background-color: $clGreyTint;

			.bg__agb__exclude-btn {
				cursor: pointer;
				display:flex;
				font-size: 13px;
				margin-top: 3px;
				margin-right: 7px;

				& > input {
					vertical-align: middle;
				}
				& > label {
					font-weight: normal;
					margin:0px;
					text-transform: uppercase;
					font-family: $fontHeading;
					&:hover {
						color: $clPrimary;
					}
				}
			}
			.bg__agb__sort-btn-wrapper {
				flex-grow: 2;
				display: flex;
				margin-top: 3px;
				flex-direction: row-reverse;
				.bg__agb__sort-btn {
					cursor: pointer;
					color: $clDarkGrey;
					padding: 3px 5px;
					.bg__agb__sort-active {
						color: black;
						&:hover {
							opacity: 0.7;
						}
					}
					&:hover {
						color: black;
					}
				}
			}
		}
		label {
			display: inline;
		}
		.bg__agb__remove-button {
			border-left: 1px solid $clDarkGrey;
			padding: 2px 7px;
			background-color: transparent;
			text-transform: uppercase;

			&:hover {
				color: $clPrimary;
			}
		}
	}

	/* search box on top of the list of facets*/
	.bg__agb__search-box {
	  border: 1px solid #f3f3f3;
	  display: flex;
	  justify-content: space-between;

	  .bg__agb__search-input {
	    background-color: #fdfdfd;
	    border: 0;
	    border-left-width: 2px;
	    border-radius: 2px;
	    margin-bottom: 0;
        min-width: 100px;
	    outline: 0;
	    padding: 6px 10px;
		width: 60%;

	    &::placeholder {
	      font-size: 12px;
	    }
	  }
	  .bg__agb__search-count {
	    color: #666;
	    font-size: 80%;
	    padding-top: 10px;
		margin-right: 5px;
		text-align: right;
	  }
	}

	/* ul containing all sorted facets */
	.bg__agb__facet-list {
		margin: 0;
		max-height: 560px;
		overflow: auto;
		padding-left: 0;

		.bg__agb__facet-list-item {
			transition: background-color $transition;
			background-color: $clGrey;
			word-wrap: break-word;
			font-size: 1.3rem;
			list-style-type: none;
			padding: 8px 6px 8px 8px;
			cursor: pointer;
			color: $list-item-color;
			position: relative;
			margin: 0;

			&.disabled {
				padding-left: 26px;
				cursor: default;
			}
			.elem-label {
				@include ellipses($widthSubst : '70px');
			}

			&.selected {
				background-color: mix($clPrimary, $clGrey, 25%);
				border-left: 3px solid $clPrimary;
				font-weight: 600;
				&:hover {
					background-color: mix(
						mix($clPrimary, $clGrey, 25%),
						$clGrey,
						50%
					);
					.bg__agb__checkbox {
						background-color: rgba($clPrimary, 0.4);
					}
				}
				span {
					font-weight: normal;
				}
				.bg__agb__checkbox {
					background-color: $clPrimary;
					border-color: darken($clPrimary, 10%);
				}
			}

			&:hover:not(.disabled) {
				background-color: mix($clGrey, $clGreyTint, 50%);
				.bg__agb__checkbox {
					background-color: $clPrimary;
					border-color: darken($clPrimary, 10%);
				}
			}

			// Make color red, to indicate elements will be excluded
			&.exclude {
				&.selected {
					border-color: $clRed;
					background-color: mix($clRed, $clGrey, 25%);
					&:hover {
						background-color: mix(
							mix($clRed, $clGrey, 25%),
							$clGrey,
							50%
						);
						.bg__agb__checkbox {
							background-color: rgba($clRed, 0.4);
						}
					}
					.bg__agb__checkbox {
						background-color: $clRed;
						border-color: darken($clRed, 10%);
					}
				}
				&:hover {
					.bg__agb__checkbox {
						background-color: $clRed;
						border-color: darken($clRed, 10%);
					}
				}
			}

			&.exclude {
			}

			.bg__agb__checkbox {
				transition: background-color $transition;
				display: inline-block;
				width: 12px;
				height: 12px;
				border: 1px solid $clGreyTint;
				margin-right: 6px;
				margin-top: 3px;
				vertical-align: top;
			}
		}
	}

	/* Show more/less button */
	.bg__agb__switch-view {
		background-color: $clGrey;
		border-radius: 0 0 2px 2px;
		color: $clPrimary;
		display: block;
		border-top: 1px solid mix($clGrey, $clGreyTint, 50%);
		padding: 5px 8px 5px 5px;
		text-align: right;
		cursor: pointer;
		text-decoration: none;
		&:hover {
			color: darken($clPrimary, 8%);
		}

		& > .switchViewText {
			font-family: $fontHeading;
			font-size: 12px;
			padding-left: 1rem;
			text-transform: uppercase;
		}
		& > .switchIcon {
			font-size: 1rem;
			margin-left: 0.5rem;
		}
	}

	/* count per facet */
	.bg__agb__count {
		background-color: white;
		font-size: 0.9em;
		border-radius: 25px;
		display: inline-block;
		padding: 2px 4px;
		min-width: 15px;
		vertical-align: middle;
		font-family: $fontHeading;
		float: right;
	}


}
.bg__aggregation-creator {} /* AggregationCreator.jsx */
.bg__aggregation-list {

	.bg__agl__tab-new {
		margin-bottom: 1rem;
		& > button {
			color: $clPrimary;
			background-color: white;
			transition: background-color $transition;
			&:hover {
				color: darken($clPrimary, 8%);
			}
		}
	}

	/* for the selected facets above the AggregationBoxes */

	.bg__agl__selected-facets {
		margin-bottom: 10px;

		.bg__agl__selected-item {
			border: 1px solid $clGreyTint;
			border-radius: 2px;
			border-left: 3px solid $clPrimary;
			margin-bottom: 3px;
			padding: 6px 2px 6px 1rem;
			word-wrap: break-word;
			text-overflow: ellipsis;

			.elem-label {
				@include ellipses($widthSubst : '70px');
			}

			.fa-remove {
				cursor: pointer;
				float: right;
				padding: 4px 5px;
				&:hover {
					opacity: 0.8;
				}
			}
			.bg__agl__count {
				margin-right: 2px;
				background-color: $clGrey;
				font-size: 0.9em;
				border-radius: 25px;
				display: inline-block;
				padding: 2px 4px;
				min-width: 15px;
				vertical-align: middle;
				font-family: $fontHeading;
				float: right;
			}

			&.exclude {
				border-left: 3px solid $clRed;
			}
		}
	}

	/* for empty facets blocks */
	.bg__agl__empty-facet-block {
		margin-bottom: 15px;
		background-color: $clGrey;
		color: black;
		border: 1px solid $clGreyTint;
		border-radius: 0;

		.bg__agl__title-wrapper {
			display: flex;
			padding: 8px 10px 9px;
			.fa-info-circle {
				padding-top:6px;
				font-size: 13px;
			}

			.bg__agl__facet-title {
				padding:0px 5px;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 16px;
				font-family: $fontHeading;
				overflow: hidden;
				font-weight: normal;
			}

			.fa-remove {
				padding-top:6px;
				cursor: pointer;
			}
		}
	}
}


.bg__single-search-collection-bar {
	background-image: $iconDataSetUrl;
	background-repeat: no-repeat;
	background-position: 5px center;
	background-size: 18px;
	padding-left: 35px;
	min-height: 40px;
	margin-bottom: 20px;
	display: flex;

	.btn-default {
		border: 0;
		background-color: $clGrey;
		color: black;
		&:hover {
			background-color: darken($clGrey, 4%);
		}
	}

	.btn-primary{
		margin-top: 2px;
	}

	.bg__scb__active {
		display: flex;
		justify-content: stretch;
		width: 100%;
		@media screen and (max-width: $break-small) {
			flex-wrap: wrap;
		}

		.bg__scb__collection-info {
			flex-grow: 1;
			h2 {
				font-size: 1.2em;
				line-height: 30px;
				display: inline-block;
				margin: 0;
				cursor: pointer;
				background-image: $arrowDownDarkUrl;
				background-position: right 10px center;
				background-repeat: no-repeat;
				padding: 3px 30px 3px 5px;

				&:hover {
					background-color: $clGrey;
				}
			}
		}
		.bg__scb__buttons {
			flex-grow: 1;
			button {
				margin-top: 2px;
				float: right;
				margin-left: 15px;
				border:0;
			}
		}
	}

	.bg__scb__link {
		display: inline-block;
		font-size: 0;
		color: white;
		border-radius: 2px;
		min-width: 30px;
		height: 28px;
		vertical-align: top;
		background-image: $iconLinkUrl;
		background-position: center;
		background-repeat: no-repeat;
		margin-left: 10px;
		margin-top: 3px;
		transition: opacity $transition;
		background-size: 18px;
		opacity: 0.7;
		&:hover {
			opacity: 1.0;
		}
	}

	.bg__scb__count {
		margin-top: 5px;
		margin-left: 5px;
		background-color: $clGrey;
		font-size: 1em;
		border-radius: 25px;
		display: inline-block;
		padding: 2px 8px;
		min-width: 20px;
		vertical-align: top;
		font-family: $fontHeading;
	}
}


.bg__dps__date-picker-selector {
	display: flex;
	input[type=text]{
		max-width: 100px;
		min-width: auto;
		border-radius: 5px;
	}

	i{
		pointer-events: none;
		display: inline-block;
		width: 30px;
		background-color: yellow;
		line-height: 34px;
	}

	&>div{
		margin-left: 10px;
		margin-right: 5px;
	}

	.react-datepicker{
		font-size: 13px;
		min-height: 21.5rem;
	    height: auto;
		.react-datepicker__navigation{
			// somehow the prev/next buttons don't render correctly
			// apply some quick fixes
			font-size: 0;
			height: 10px;
			margin-top: 6px;
			background-color: transparent;
		}

		.react-datepicker__month-container{
			height: auto;
		}

		.react-datepicker__day--outside-month{
			color: $clDarkGrey;
		}
	}
	.remove-date-filter {
		cursor: pointer;

		i {
			background-color: transparent;
		}
	}
} /* DateRangeSelector.jsx */
.bg__drs__date-range-select {
	display: flex;
} /* DateRangeSelector.jsx */

.bg__field-category-creator {
	* {
		border: 0;
		margin: 0;
		padding: 0;
	}

	input {
		box-sizing: border-box;
		height: 3.3rem;
		margin: 6px 0;
		padding: 2px 10px;
	}

	.bg__fcc__search-box {
		width: 100%;
	}

	.bg__fcc__selection-wrapper {
		border: 1px solid #fefefe;
		margin-bottom: 10px;

		select {
			width: 50%;

			&#source-opts {
				border: 1px solid #dedede;
				position: relative;
			}

			&#selected-opts {
				border: 1px solid #dedede;
				position: relative;
			}

			option {
				cursor: pointer;
				align-items: center;
				border-bottom: 1px solid $clGreyTint;
				font-size: 12px;
				padding: 10px;
				&:hover {
					background-color: rgba(153, 153, 153, 0.26);
				}

				&.bg__fcc__left {
					&:after {
						color: #333;
						content: " ▶ ";
						float:right;
					}
				}

				&.bg__fcc__right {
					padding-left: 10px;

					&:before {
						color: #333;
						content: " ◀ ";
						margin-right: 10px;
						display: inline-block;
					}
				}
			}

		}
	}

	.bg__fcc__name {
		width: 80%;
	}

	button {
		background-color: $clPrimary;
		color: #fff;
		height: 3.3rem;
		margin: 6px 0;
		padding: 2px 10px;
		width: calc(20% - 10px);
		margin-left: 10px;
		font-family: $fontHeading;
		text-transform: uppercase;
		border-radius: 2px;
		&:hover {
			background-color: darken($clPrimary, 8%);
		}
	}

	.bg__fcc__validation-error {
		background-color: #f26c50;
		color: #fff;
		font-size: 12px;
		height: 3.3rem;
		margin-bottom: 6px;
		padding: 6px 10px;
	}

}
.bg__field-category-selector {
	width: 100%;
	.PowerSelect{
		border-color: $clGreyTint;

		.PowerSelect__Clear{
			font-size: 1.3em;
			font-weight: bold;
		}

		.PowerSelectMultiple__SelectedOptions {
			margin: 0;

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

			.PowerSelectMultiple__SelectedOption {
				background-color: $fill-color;
				border-radius: 5px;
				border: 0;
				color: white;
				.bg__ul-selectedOption {
					list-style-type: none;
					padding-left: 0;
					-moz-padding-start: 0;
					-webkit-padding-start: 0;
				}
			}

			.PowerSelectMultiple__SelectedOption__Close {
				border-left: 1px solid mix($fill-color, white, 50%);
				font-weight: bold;
				font-size: 1.2em;
				padding-right: 7px;
				&:hover {
					background-color: $hover-color;
					border-radius: 0 5px 5px 0;
				}
			}
		}
	}
}

/*
	Style defined outside bg__field-category-selector
	cause the options are loaded outside the container.
 */
.PowerSelect__Options {
	max-height: 538px;
}
.bg__fcs__option-create {
	margin-top: 8px;
	padding: 0 5px 5px 10px;
	button{
		text-transform: uppercase;
		font-family: $fontHeading;
		font-size: 0.9em;
	}
} /* NOTE: Also in FieldCategorySelector.jsx */

.bg__field-category-creator {
  select {
    height: 200px;
  }
  label {
    margin: 15px 0px 5px 0px;
    &:first-child {
      margin: 0px 0px 5px 0px;
    }
  }
}

.bg__highlight-overview {
	table > tbody > tr > td {
		padding-left:10px;
	}
}

.bg__metadata-table {
	.table {
		table-layout:fixed;
		word-wrap: break-word;
		tr {
			td {
				white-space:pre-wrap;
				&:first-child {
					width: $metadata-table-first-column-width;
				}
			}
		}
		label {
			color: $metadata-table-label-color;
		}
		.bg__mdt__id {}
		.bg__mdt__index {}
		.bg__mdt__title {}
		.bg__mdt__date {}
		.bg__mdt__description {}
		.bg__mdt__source {}
		.bg__mdt__poster {}
		.bg__mdt__special-props {}
		.bg__mdt__search-refs {}
		.bg__mdt__raw-data {
			height: 400px;
			overflow:auto;
		}
	}
}

.bg__paging {}

//media queries to handle paging issues when too many page numbers are displayed.
@media screen and (max-width: 662px) {
	.bg__paging {
		.btn-default:nth-of-type(n + 5):not(.next-last-page) {
			display:none;
		}
	}
}
@media screen and (max-width: 710px) {
	.bg__paging {
		.btn-default:nth-of-type(n + 6):not(.next-last-page) {
			display:none;
		}
	}
}
@media screen and (max-width: 1201px) {
	.bg__paging {
		.btn-default:nth-of-type(n + 7):not(.next-last-page) {
			display:none;
		}
	}
}
@media screen and (min-width: 1202px) {
	.bg__paging {
		.btn-default:nth-of-type(n + 10):not(.next-last-page) {
			display:none;
		}
	}
}

.bg__query-factory {
	padding: 0px 20px;
	.bg__qf__scrollwindow {
		margin-top:10px;
		overflow-x: auto;
		.bg__qf__grid {
			width: max-content;
			.bg__qf__cell {
				background-color: $subdued-bg;
				border-radius: $border-radius;
				display:inline-block;
				float:left;
				overflow-y: auto;
				overflow-x: hidden;
				margin-right: 20px;
				padding: 3px 8px;
				width:600px;

				.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
					background-color: $subdued-bg;
				}
			}
		}
	}
}
.bg__query-builder {
	clear:both;

	.separator {
		height: 1em;
	}

	.bg__tooltip {
		width: 400px;
	}

	.bg__qb__breadcrumbs {
		padding: 0px 10px 10px 10px;
		text-align: center;

		.bg__qb__crumb {
			display: inline-block;
			margin: 0px 5px 5px 0px;
			i {
				cursor: pointer;
				&:hover {
					text-decoration: underline;
				}
			}
		}
	}

	.bg__qb__graph > button {
		float: right;
		position: relative;
		right: 12px;
		z-index: 10;
	}
	.bg__clear-query-btn {
		margin-left: 12px;
	}

	.bg__qb__input-search {
		border-radius: 5px 0 0 5px;
		color: black;
	}

	.bg__qb__count {
		margin-top: 5px;
		background-color: $clGrey;
		font-size: 1em;
		border-radius: 25px;
		display: inline-block;
		padding: 2px 8px;
		min-width: 20px;
		vertical-align: top;
		font-family: $fontHeading;
	}

	.bg__qb__total-count {
		margin-left: 3%;
		font-family: $fontHeading;
		font-size: 16px;
		line-height: 20px;
		margin-top: 5px;
		display: inline-block;
		.bg__qb__count {
			background-color: $clPrimary;
			color: white;
			margin-top: 0;
			vertical-align: middle;
			margin-left: 10px;
		}
	}

	.bg__qb__query-row {
		display: flex;
		justify-content: stretch;

		.bg__qb__search-holder {
			display: flex;
			flex-grow: 1;
			& > span {
				cursor: pointer;
				background-color: $clPrimary;
				color: white;
				border-radius: 0 5px 5px 0;
				display: inline-block;
				width: 50px;
				height: 34px;
				text-align: center;
				line-height: 34px;
				& > i,
				& > span {
					line-height: 34px;
				}
			}
		}

		.bg__qb__selector-holder {
			flex-grow: 1;
			display: flex;
			.bg__qb__in-label {
				margin: 0 10px;
				line-height: 35px;
			}
		}
	}

	.bg__qb__date-count {
		margin: 7px 10px 0 5px;
		background-color: $clGreyTint;
		font-size: 1em;
		border-radius: 25px;
		display: inline-block;
		padding: 2px 8px;
		min-width: 20px;
		line-height: 17px;
		vertical-align: top;
		font-family: $fontHeading;
	}

	.bg__qb__no-results-message{
		margin: 20px;
		width: 70%;
		box-sizing: border-box;
		margin-left: calc(25% + 20px);
	}

	.bg__qb__result-dates {
		border-radius: 5px;
		border: 1px solid $clGreyTint;
		background-color: $clGrey;
		margin-bottom: 20px;

		.bg__qb__result-dates-header {
			display: flex;
			flex-wrap: wrap;
			line-height: 34px;
			border-bottom: 1px solid $clGreyTint;

			.__react_component_tooltip {
				line-height: 16px;
			}

			.bg__qb__date-field {
				display: flex;
				padding: 8px 0px 8px 7px;
				& > div {
					margin-right: 10px;
				}

				i {
					display: inline-block;
					width: 20px;
					line-height: 34px;
				}
				& > i {
					text-align: center;
					margin-right: 10px;
				}

				.bg__dfs__date-field-selector {
					position: relative;

					&:after {
						color:#aaa;
						content:"\f073";
						font-family: "FontAwesome";
						font-size: 16px;
						padding:0 0 2px;
						position:absolute;
						pointer-events:none;
						right:8px;
						top:0;
					}
					&:before {
						background:#fff;
						content:'';
						display:block;
						height:25px;
						position:absolute;
						pointer-events:none;
						right:4px;
						top:6px;
						width:23px;
					}
				}
			}

			.bg__qb__date-range {
				flex-grow: 1;
				border-left: 1px solid $clGreyTint;
				line-height: 34px;
				padding: 5px 10px 5px 10px;
				display: flex;
				margin: 3px 0;

				input {
					background-color: white;
				}

				.bg__qb__date-range-stats {
					margin-left: 5px;
				}
			}

			& > button {
				height: 28px;
				line-height: 16px;
				padding: 5px 10px;
				box-sizing: border-box;
				margin: 10px;
				background-color: $clGreyTint;
				transition: background-color $transition;
				&:hover {
					background-color: darken($clGreyTint, 5%);
				}
			}
		}

		.bg__qb__result-dates-content {
			background-color: mix($clGreyTint, $clGrey, 50%);
			.bg__qb__date-graph {
				padding: 20px 10px 0 10px;
				position: relative;
    			border-bottom: 1px solid $clGreyTint;
    			margin-bottom: 10px;
				.page-loader {
					padding-top: 10%;
					position: absolute;
				}
			}
		}

		input[type="text"] {
			margin-bottom: 0;
		}
	}
}

$font-size: 20px;
$padding-bottom: 12px;
$font-weight: bold;

.bg__query-editor {

	form {
		input {
			padding: 4px 10px 8px;
		}
	}

	.bg__qed__table {
		padding: 15px;
	}

	.bg__qed__query-params {
		padding: 20px;
		background-color: mix($clGreyTint, $clGrey, 50%);
		border: 1px solid $clGreyTint;
		margin-bottom:10px;
	}

	.bg__qed__validation-error {
		background-color: #f26c50;
		color: #fff;
		height: 3.3rem;
		margin-bottom: 6px;
		padding: 6px 10px;
	}

}
.bg__quick-viewer { /* QuickViewer.jsx */

}

.bg__search-hit {
	border-bottom: 1px solid $clGreyTint;
	margin: 0 0 0 5px;
	padding: 0px;
	padding-right: 70px;
	position: relative;
	display:block;
	min-height: 50px;

	.bg__sh__quickview {
		position: absolute;
		bottom: 10px;
		right: 10px;
		button {
			transition: background-color;
			height: 35px;
			width: 35px;
			border: 1px solid $clGreyTint;
			background-color: $clGrey;
			background-color: darken($clGrey, 4%);
		}
	}

	.bg__sh__select {
		@include checkbox();
		margin-top: 25px;
		input[type="checkbox"] + label span {
			border-color: darken($clGreyTint, 8%);
		}
	}

	.bg__sh__bookmarked {
		background-color: $clSecondary;
		border: 0;
		color: white;
		text-align: center;
		width: 35px;
		height: 35px;
		position: absolute;
		right: 0;
		top: 0;
		i {
			line-height: 35px;
		}
	}

	&.fragment {
		border-right: 1px solid $highlight-color;
		margin: 5px;
		padding: $default-margin;
	}

	&.visitedItem {
		opacity: 0.9;
	}

	.bg__sh__visited-icon{
		background-image: $iconTimeUrl;
		position: absolute;
		right: 50px;
		bottom: 10px;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 15px;
		width: 35px;
		height: 35px;
	}

	&.bookmarked {
		border-left: 3px solid $clSecondary;
		background-color: mix(white, $clSecondary, 90%);
		margin-left: 2px;
		.bg__sh__select input[type="checkbox"] + label span {
			border-color: mix(white, $clSecondary, 60%);
			background-color: mix(white, $clSecondary, 95%);
		}
		.bg__sh__quickview {
			button {
				background-color: $clGreyTint;
				&:hover {
					background-color: darken($clGreyTint, 4%);
				}
			}
		}
	}

	.__react_component_tooltip {
		text-align: left;
		ul {
			padding-left: 20px;
		}
	}
}

.bg__search-snippet {
	display: flex;
	padding: 20px 10px 20px 10px;
	cursor: pointer;
	&:hover {
		.bg__ss__title {
			text-decoration: underline;
		}
	}

	.bg__ss__poster {
		padding-right: 20px;
		img {
			width: 200px;
			max-width: 200px;
			max-height: 200px;
		}
	}

	.bg__ss__media-body {

		.bg__ss__title {
			margin-top: 0;
			padding-top: 0;
			font-size: 20px;
			line-height: 1.35em;

			.bg__ss__icon-access{
				span{
					color: black;
					border: 0;
					margin-left: 5px;
					padding-left: 10px;
					border-left: 1px solid black;
					border-radius: 0;
				}
			}
		}

		.highLightText {
			color: $highlight-color-snippets;
			font-weight: bold;
			font-size: 97%;
		}

		.bg__ss__snippet-description {
			cursor: pointer;
			font-style: italic;
			font-size: 14px;
		}

		.bg__ss__info {
			display: flex;
			margin: 10px 0;
			font-size: 12px;
			line-height: 26px;
			color: lighten(black, 50%);


			& > div {
				margin-right: 10px;
				i {
					font-size: 13px;
					display: inline-block;
					margin-right: 10px;
					font-style: normal;
					color: black;
				}
			}

			.bg__ss__icon-type {
				span {
					color: black;
					font-size: 18px;
					border: 0;
				}
			}
		}

		.label-success {
			background-color: $clDarkGrey;
			color: white;
		}

		.bg__ss__fragment {
			color: dimgray;
			font-style: italic;
			margin-top: 5px;
		}
	}
}

.bg__simple-paging {
	float:left;
	margin: 0px 10px 20px 0px;
	&> .checkbox, button {
		margin-right:10px;
	}
	.checkbox {
		display: inline-block;
	}
}
.bg__sorting {} /* Sorting.jsx */

.bg__md-completeness-chart {
	margin-top: 30px;
	@include lineChartBase();

	.bg__mdc__no-data {
		margin-top: 12px;
	}

	.bg__mdc__percentage {
		font-size: 90%;
		font-weight: bold;
		margin-right: 12px;

	}
}
.bg__query-comparison-histogram {
    @include chartBase();
    position: relative;
    .recharts-responsive-container {
        margin-top: 20px
    }
    .page-loader {
        padding-top: 10%;
        position: absolute;
        text-align: center;
    }
}
.bg__custom-tooltip {
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 8px;
    box-shadow: 4px 4px 10px 1px rgba(0, 0, 0, .8);
    color: #f3f3f3;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    min-width: 280px;
    padding: 1rem 3rem;
    text-transform: capitalize;

    p {
        .rightAlign {
            float: right;
            min-width: 120px;
            text-align: right;

            .bg__tooltip-spaceBetween {
                justify-content: space-between;
            }
        }
    }
}
.bg__histogram {
	@include chartBase();

	.recharts-responsive-container {
		margin-top: 20px
	}
}
@include spinner();

.bg__query-comparison-line-chart {
	@include lineChartBase();
	position: relative;

	.recharts-responsive-container {
		margin-top: 20px;
	}
	.page-loader {
		padding-top: 10%;
		position: absolute;
	}
}
.bg__query-info-block {
	display: flex;
	flex-wrap: wrap;
	font-family: Maven Pro,sans-serif;
	margin: 4rem 0;
	padding: 1rem 0;
	text-transform: capitalize;

	label {
		font-weight: normal;
		text-transform: uppercase;
	}

	.bg__qib__block {
		background-color: #faf6f6;
		border-radius: 5px;
		border: 1px solid #eee3e1;
		display: flex;
		flex: 2 2 30em;
		flex-wrap: wrap;
		margin: 10px 0 0 10px;

		.bg__qib__query {
			background-color: #faf6f6;
			color: black;
			overflow-y: auto;
			padding:10px;
			vertical-align: top;

			h4 {
				margin-bottom: 20px;
				padding:0;
				text-align: center;
			}
			ul {
				padding-left: 20px;

				li {
					color: #2D343A;
					list-style-type: none;
				}
			}

		}

		.bg__qib__error {
			align-self: flex-end;
			background-color: #f26c50;
			color: white;
			padding: 6px 10px;
			width: 100%;
		}
		@media screen and (min-width: $break-medium-result-list) {
			max-width: 48%;
		}
		@media screen and (min-width: $break-large) {
			max-width: 32%;
		}
	}

	.bg__qib__value {
	    display: inline-block;
	    width:100%;

	    label {
	    	width:40%;
	    }
	    span {
			border-left: 1px solid grey;
	    	float:right;
    		padding-left: 5px;
			width:60%;
	    }
	}

	.bg__qib__count {
		background-color: #fff;
		border-radius: 25px;
		display: inline-block;
		font-family: Maven Pro,sans-serif;
	    font-size: .9em;
		float: right;
		min-width: 15px;
	    padding: 2px 4px;
	    vertical-align: middle;
	}

	.bg__qib__color {
		border: 1px solid #eee3e1;
		display: inline-block;
		height: 12px;
		margin-left:5px;
		width: 12px;
	}
}
.bg__query-line-chart {
	@include lineChartBase();
}
@include spinner();

.bg__query-timeline-plotter {

  margin-bottom: 8rem;
  position: relative;

  .ms_toggle_btn .checkbox-toggle-round {
    &:checked+label:after {
      margin-left:68px;
    }
    &+ label {
      font-size: 13px;
      font-weight: normal;
      width: 100px;
    }
  }

  > .switch-view-btn {
    position: absolute;
    right: 0;
    z-index: 999;
    color: #fff;
    background-color: #468dcb;
    border-color: #3680c1;
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
  }

  .bg__project-queries-table {
    margin-bottom: 3rem;
  }

}
.bg__info {
    display: inline-block;
    color: mix($clMediumGrey, $clDark, 80%);
    padding-left: 7px;
    font-weight: normal !important;
    transition: color $transition;

    &:hover {
        color: mix($clMediumGrey, $clDark, 50%);
    }

    > .fa {
        font-size: 13px;
    }

    &.primary {
        color: $clPrimary;
        &:hover {
            color: rgba($clPrimary, 0.8);
        }
    }
    &.secondary {
        color: $clSecondary;
        &:hover {
            color: rgba($clSecondary, 0.8);
        }
    }
    &.black {
        color: $clDark;
        &:hover {
            color: rgba($clDark, 0.8);
        }
    }
    &.grey {
        color: $clDarkGrey;
    }
    &.white {
        color: white;
    }

    // if placed left of an title, change padding
    &.left {
        padding-left: 0;
        padding-right: 7px;
    }
}

.bg__loading {
    font-size: 0;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(white, 0.4);
    z-index: 9999;
    pointer-events: none;

    .bg__spinner,
    .bg__spinner:after {
        border-radius: 50%;
        width: 80px;
        height: 80px;
    }
    .bg__spinner {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -40px;
        margin-left: -40px;
        border: 5px solid rgba($clDark, 0.5);
        border-left: 5px solid rgba($clDark, 0.1);
        transform: translateZ(0);
        animation: loadingSpin 0.7s infinite linear,
            loadingColors 5.1s infinite linear;
    }
}

@keyframes loadingSpin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes loadingColors {
    0% {
        border-color: rgba($clDark, 0.5);
        border-left-color: rgba($clDark, 0.1);
    }
    33% {
        border-color: rgba($clPrimary, 0.5);
        border-left-color: rgba($clPrimary, 0.1);
    }
    66% {
        border-color: rgba($clSecondary, 0.5);
        border-left-color: rgba($clSecondary, 0.1);
    }
}

.bg__project-list {
    display: inline-block;
    position: relative;
    margin-bottom: 0;

    > .select {
        margin-right: 20px;
        background: $clSecondary;
        font-size: $fontHeading;
        color: white;
        border-radius: 2px;
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
        cursor: pointer;
        display: inline-block;
        font-size: 0.96em;
        height: 35px;
        line-height: 35px;
        padding: 0 15px 0 15px;
        text-decoration: none;
        text-transform: uppercase;
    }

    .active-project {
        > .title {
            position: relative;
            font-family: $fontHeading;
            font-weight: normal;
            display: inline-block;
            padding: 0px 30px 0 35px;
            line-height: 41px;
            background-color: white;
            cursor: pointer;
            white-space: nowrap;
            border-bottom: 2px solid $clSecondary;

            background-image: $iconProjectUrl;
            background-repeat: no-repeat;
            background-position: 7px center;
            background-size: 17px;

            &:after {
                content: '';
                position: absolute;
                top: 50%;
                margin-top: -5px;
                right: 10px;
                transform: rotate(45deg);
                width: 8px;
                height: 8px;
                border-bottom: 2px solid $clDarkGrey;
                border-right: 2px solid $clDarkGrey;
            }

            &:hover {
                background-color: $clGrey;
            }
        }

        & > a {
            cursor: pointer;
            float: right;
            font-size: 0;
            color: white;
            border-radius: 2px;
            min-width: 30px;
            height: 28px;
            vertical-align: top;
            background-image: $iconLinkUrl;
            background-position: center;
            background-repeat: no-repeat;
            margin-left: 0;
            margin-top: 6px;
            transition: opacity $transition;
            background-size: 18px;
            opacity: 0.7;
            &:hover {
                opacity: 1;
            }
        }
    }

    .bg__prl__checkbox {
        display: none;
    }

    .bg__prl__checkbox + .bg__prl__menu {
        display: none;
    }

    .bg__prl__checkbox:hover + .bg__prl__menu {
        display: block;
        z-index: 9999;
    }

    .bg__prl__menu {
        position: absolute;
        top: 100%;
        border: 1px solid $clGreyTint;
        border-radius: 4px;
        padding: 0;
        box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
        background-color: #fff;
        list-style-type: none;
        right: 0;
        min-width: 360px;
        max-height: 360px;
        overflow: hidden;
        overflow-y: auto;

        > li:hover {
            background-color: mix(white, $clSecondary, 75%);
        }

        > input {
            font-weight: normal;
            background-color: $clGrey;
            margin-bottom: 0;
            padding: 10px 20px;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

        > li {
            padding: 10px 20px;
            cursor: pointer;
            white-space: nowrap;
            border-top: 1px solid $clGreyTint;

            &.divider {
                padding: 0;
                border-bottom: 1px solid #ccc;
            }

            a {
                display: block;
                margin: -10px -20px;
                padding: 10px 20px;
            }
        }
    }

    .bg__prl__new {
        position: sticky;
        width: 100%;
        padding: 10px;
        background-color: $clSecondary;
        color: white;
        border: 0;
        border-radius: 2px;
    }

    .bg__prl__filter-list {
        position: sticky;
        top: 0;
        width: 100%;
    }

    /*overriding the child component ProjectForm.scss */

    .bg__project-form {
        z-index:9999;
        padding: 10px;
        background-color: white;
        position:absolute;
        right:0;
        border: 1px solid $clGreyTint;
        border-radius: 4px;
        box-shadow: 0 0 6px 0 rgba(0,0,0,.1);

        .new-project-container {
            display: flex;
            flex-direction: column;
            .bg__new-project-wrapper {
                background-image: none;
                display: flex;
                flex-direction: row;
                textarea {
                    min-height: 60px;
                    font-weight: normal;
                }
                input {
                    font-weight: normal;
                }
                .label.project-modal-left {
                    flex-basis: 100px;
                    text-align: left;
                }
            }
        }
    }

}

.bg__tool-header {
    width: 100%;
    margin: 45px 0 10px;
    border-bottom: 1px solid #eee;

    .bg__th__title {
        display: inline-block;
        margin: 0;
        padding: 10px 0 10px 38px;
        font-size: 1.5em;
        background-image: $iconRecipeUrl;
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 27px;
    }

    // project info/selector
    & > .bg__th__project {
        float: right;
    }
}



//import the "recipes": apps (top level components) that use the component library
.bg__collection-recipe {
	.bg__rcp__cl__input-area {
		background-color: $subdued-bg;
		border-radius: 6px;
		box-shadow: 1px 2px 2px 2px #999;
		margin-top:5px;
		padding: 3rem;
		.btn-primary {
			border-radius: 6px;
		}
		.list-group-item{
			border-radius: 6px;
		}
	}
	.list-group-item {
		.bg__read-more-link {
			float: right;
		}

		&.active {
			.bg__link-tag {
				color: #fff;
			}
		}
	}
	.fieldAnalysisStats {
		background-color: $subdued-bg;
		border-radius: 6px;
		box-shadow: 1px 2px 2px 2px #999;
		margin: 3rem 0;
		padding: 4rem;
	}
	.ms_toggle_btn {
		display: none;
	}

	.box{
		background-color: $subdued-bg;
	    border-radius: 6px;
	    box-shadow: 1px 2px 2px 2px #999;
	    margin-top: 5px;
	    padding: 2rem;
	    margin-right: 5px;
	}
}
.bg__item-details-recipe {

	button {
		text-transform: uppercase;
		font-family: Maven Pro,sans-serif;
	}

	.bg__rcp__id__project-buttons {
		float:right;
		margin-right:35px;
		button {
			margin-top: 2px;
    		float: right;
			margin-left: 15px;
			border: 0;
			background-color: #f26c50;
			color: #fff;
		}

		.bg__rcp__id__bookmarked {
		    background-color: #f26c50;
		    border: 0;
		    color: #fff;
		    text-align: center;
		    width: 35px;
		    height: 35px;
		    position: absolute;
		    right: 0;
		    top: 0;
		    i {
		    	line-height: 35px;
		    }
		}

	}

	.bg__rcp__id__media-player {}

	.bg__rcp__id__keyword-browser {
		margin: 10px;
		padding: 5px;
		.property-list {
	    	overflow-y: auto;
			.keyword {
				margin :0 0 5px 0;
				padding :5px;
				border-radius:3px;
				background-color: $clBlue;
				color: white;
				cursor:pointer;
				&:hover {
					background-color: #666;
				}
			}
		}
		h4 {
			border-bottom: 1px solid #eee;
			padding-bottom: 5px;
		}
	}

	.cl_table {
		display: flex;
		flex-wrap: wrap;
		margin: 0;
		padding: 0;
	}

	.cl_table-cell {
		box-sizing: border-box;
		flex-grow: 1;
		width: 100%;
		padding: 8px 0;
		overflow: hidden;
		list-style: none;
		border: solid 3px white;

		p {
			margin: 0;
		}
		ul {
			padding-left: 15px;
		}

		&.left-cell {
			font-size: 16px;
			font-weight: 700;
		}

		b {
			color: #666;
		}
	}

	.cl_table--2cols > .cl_table-cell  {
		border-bottom: 1px solid #eee;
		width: 50%;

	}

	.cl_table--2cols > .left-cell  {
		width: 60%;
	}

	.cl_table--2cols > .right-cell  {
		width: 40%;
	}
	// overwrites background visibility for annotation modal only.
	#annotation__modal {
		&.bg__flex-modal {
			background: none;
		}
	}
}
.bg__comparative-search-recipe {
	padding-top:20px;

	/* required for properly rendering the Frontwise components */
	> .workspace-components {
		// General styling
$colors: "primary" $clPrimary, "primary-alt" $clPrimaryAlt, "secondary" $clSecondary, "dark" $clDark, "dark-grey" $clDarkGrey, "grey" $clGrey, "grey-tint" $clGreyTint, "white" $clWhite;


@each $color in $colors {
  .background-color-#{nth($color, 1)}{
      background-color: nth($color, 2);
  }
}


// Maven Pro: Medium
@import url('https://fonts.googleapis.com/css?family=Maven+Pro:500,700');

// Open Sans: Regular/Bold
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');


div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  //font: inherit;
  vertical-align: middle;
  text-align: inherit;
  border-radius: 0;
}

// HTML5 display-role reset for older browsers
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote {
  &:before, &:after {
    content: "";
    content: none;
  }
}

q {
  &:before, &:after {
    content: "";
    content: none;
  }
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

input, input[type=checkbox], input[type=radio]{
  vertical-align: middle;
}


body{
  padding:0;
  margin:0;
  font-family: $fontBody;
  font-size: 13.5px;
}

/**
* Content
*/

h1,h2,h3,h4,h5{
 font-family: $fontHeading;
 font-weight: 500;
 line-height: 1.1em;
}

h1{
  font-size: 25px;
}

h2{
  font-size: 20px;
}

h3{
  font-size: 15px;
}

h4{
  font-size: 13px;
}

p{
  line-height: 1.5em;
}

/**
* Links
*/

.link, .link:visited{
   color: $clPrimary;
}

.link:hover{
  color: lighten($clPrimary, 10);
}

.link:active{
   color: $clPrimaryAlt;
}


/**
* Buttons
*/

.btn{
  border-radius: 2px;
  cursor: pointer;
  display: inline-block;
  font-family: $fontHeading;
  font-size: 0.96em;
  text-transform: uppercase;
  text-decoration: none;
  height: 35px;
  padding: 0 45px 0 30px;
  box-sizing: border-box;
  line-height: 35px;
  box-shadow: 0 2px 2px rgba(0,0,0,0.1);
  background-image: $arrowRightDarkUrl;
  background-position: center right 10px;
  background-repeat: no-repeat;
  margin: 10px;
  background-color: $clGrey;
  color: $clDark;
  border-width: 0;

  &:hover{
    background-color: lighten($clGrey, 5);
    box-shadow: 0 3px 3px rgba(0,0,0,0.1);
  }

  &.primary{
    background-color: $clPrimary;
    color: $clWhite;
    background-image: $arrowRightWhite40Url;
    box-shadow: 0 2px 2px rgba(0,0,0,0.2);

    &:hover{
      background-color: lighten($clPrimary, 5);
    }

    &.plus{
      background-image: $iconPlusUrl;
      background-size: 12px;
    }

  }

  &.plus{
    background-image: $iconPlusGreyUrl;
    background-size: 12px;
  }

  &.white{
    background-color: $clWhite;
    &:hover{
      background-color: $clWhite;
      opacity: 0.9;
    }
  }

  &.blank{
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    padding: 0 30px;

    &:hover{
      background-color: transparent;
      opacity: 0.9;
    }

    &.warning:hover{
      color: $clSecondary;
      opacity: 1;
    }
  }
}

/**
* Forms
*/

.label{
  color: $clPrimary;
  text-transform: uppercase;
  display: block;
  font-size: 0.96em;
  font-family: $fontHeading;
  font-weight: 500;
  margin-bottom: 10px;
}

input[type=text], textarea{
  border: 1px solid $clGreyTint;
  border-left-width: 2px;
  padding: 6px 10px;
  border-radius: 2px;
  font-family: $fontBody;
  min-width: 200px;
  margin-bottom: 15px;
  transition: border $transition;

  &:focus{
    border-left: 2px solid $clPrimary;
  }
}


input, textarea, select{
  outline-color: $clPrimary;
}


textarea{
  min-width: 400px;
  min-height: 200px;
}

/* Page layout */

.content{
  position: relative;
  max-width: $maxPageWidth;
  margin: auto;
  padding: $contentPadding;
  box-sizing: border-box;

  .text-body{
    max-width: $maxTextBodyWidth;
    margin: auto;

    p{
      max-width: 500px;
    }
  }

}

@mixin infoBanner() {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  max-width: $maxTextBodyWidth;
  padding: 0;
  
  // Hide animation
  overflow: hidden;
  &.hidden {
    animation: infobanner-content-hide 0.4s forwards ease-out;
  }
  
  > img {
    width: 176px;
    margin: 30px;
  }
  
  .info {
    margin: 30px;
    flex: 1;
    min-width: 250px;
    max-width: 100vw;
  }
  
  .actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
}

@keyframes infobanner-content-hide {
    0% {
      max-height: 400px;
    }
    100% {
      max-height: 0px;
      opacity: 0;
      display: none;
    }
}

@mixin image-wrap-shadow() {
  position: relative;
  
  // Shadow
  &::before {
    content: '';
    position: absolute;
    width: 70%;
    left: 15%;
    height: 20%;
    bottom: 5px;
    border-radius: 100%;
    box-shadow: 0 10px 40px rgba(0,0,0, 0.15);
  }
  
  img {
    position: relative;
    width: 100%;
  }
}

// Workspace -- General
.bg__sort-table{

  table{
    margin: 0;
    padding:0;
    border: 0;
    border-collapse: collapse;
    min-width: 100%;

    input[type=checkbox]{
      margin-left: 10px;
    }

    thead{
      th{
        text-align: left;
        background-color: $clDark;
         border-bottom: 2px solid $clDark;
        padding: 10px 5px;
        padding-right: 15px;
        color: $clWhite;
        font-family: $fontHeading;
        font-size: 15px;
        font-weight: 400;

        &.sortable{
          cursor: pointer;
          &:hover{
            border-bottom: 2px solid $clDarkGrey;
          }

        }

        &.active{
          position: relative;
          padding-right: 15px;
          border-bottom: 2px solid $clSecondary;

          &:hover{
            border-bottom: 2px solid $clSecondary;
          }

          &:after{
            content: "";
            position: absolute;
            right: 5px;
            border-bottom: 7px solid $clWhite;
            border-left: 7px solid transparent;
            transform: rotate(45deg);
            margin-top: 5px;
          }

          &.desc:after{
            margin-top: 8px;
            transform: rotate(-135deg);
          }
        }
      }
    }


    tbody{
      &.loading{
        opacity: 0.3;
      }

      tr:nth-child(even) {
        background-color: $clGrey;
      }

      td{
        padding: 10px 5px;
        border-bottom: 1px solid $clGreyTint;
        max-width: 20%;
        max-width: 600px;
        /*white-space: nowrap;*/
        overflow: hidden;
        text-overflow: ellipsis;

        &.primary{
          a{
            font-weight: 600;
            text-decoration: none;
            color: $clDark;
            &:hover{
              text-decoration: underline;
            }
          }
        }

        &.number{
          text-align: right;
          padding-right: 8px;
        }

        &.smaller{
          font-size: 0.8em;
          color: $clDarkGrey;
        }

        .btn{
          margin: 0;
          &.blank{
            padding-left: 15px;
            padding-right: 15px;
          }
        }
      }

      .bg__copy-to-clipboard {
        background-image: none;
        border-radius: 6px;
        box-shadow: 0 1px 0px rgba(0, 0, 0, .1);
        padding: 0 0 0 14px;
      }

      .bg__copyToClipboardMSN {
        bottom: 0;
        color: $clOrange;
        font-weight: bold;
        margin-top: 30px;
        position: relative;
        text-align: center;
      }

      .bg__searchTerm {
        margin-left: 10px;
      }
    }
  }
}

// Workspace -- Projects
.bg__project-list-view {
  .info-bar{
  background-image: $iconProjectUrl;
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 40px;
  margin-bottom: 20px;
  h1{
    max-width: calc(100% - 150px);
    padding-top: 10px;
    margin: 0;
    margin-bottom: 5px;      
  }
  p{
    margin: 0;      
    display: inline-block;
  }
  .btn{
    float:right;
  }
}
}
.bg__project-edit, .bg__project-create{

  .info-bar{
  background-image: $iconProjectUrl;
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 40px;
  margin-bottom: 20px;
  h1{
    max-width: calc(100% - 150px);
    padding-top: 10px;
    margin: 0;
    margin-bottom: 5px;      
  }
  p{
    margin: 0;      
    display: inline-block;
  }
  .btn{
    float:right;
  }
}
   
  form{
    margin-left: 40px;

    input[type=text], textarea{
      display:block;
      min-width: 400px;
      max-width: 100%;
    }

    .actions{
      margin-top: 20px;
      margin-left: 160px;
    }

    input[type=checkbox]{
      margin-right: 10px;
    }
  }
}
.bg__project-view-wrapper{

  .info-bar{
  background-image: $iconProjectUrl;
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 40px;
  margin-bottom: 20px;
  h1{
    max-width: calc(100% - 150px);
    padding-top: 10px;
    margin: 0;
    margin-bottom: 5px;      
  }
  p{
    margin: 0;      
    display: inline-block;
  }
  .btn{
    float:right;
  }
}

  .info-bar{
    h2, p{
      max-width: 800px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .submenu{
    border-bottom: 1px solid $clGreyTint;
    margin-bottom: 20px;
    padding-left: 20px;

    a{
      font-size: 15px;
      font-family: $fontHeading;
      color: $clDark;
      padding: 10px 20px;
      display: inline-block;
      border-bottom: 3px solid white;
      margin-right: 1px;
      &:hover{
        background-color: $clGrey;
        border-bottom-color: $clDarkGrey;
        text-decoration: none;
      }

      &.active, &.active:hover{
        border-bottom-color: $clSecondary;
        background-color: $clGrey;
      }

      .count{
    display: inline-block;
    font-family: $fontHeading;
    float: right;
    margin-left: 15px;
    background-color: $clSecondary;
    color: $clWhite;
    border-radius: 25px;
    font-size: 0.8em;
    font-weight: bold;
    padding: 2px 4px 3px 4px;
    line-height: 13px;
    min-width: 18px;
    text-align: center;
    margin-top: 1px;
}
    }
  }


}
.bg__project-details-view{

  h2{
    margin: 40px 0;
  }

  .btn{
    float: right;
    margin-top: -60px;
  }

  ul.details{
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    li{
      padding-right: 10px;
      padding-bottom: 10px;
      min-width: 150px;
      max-width: 600px;
    }
  }
}
.bg__project-table{

   .tools{
    background-color: $clGrey;
    padding: 0px 10px;
    display: flex;

    &:after{
      clear:both;
      content: "";
      display: table;
    }
    
    .left{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      flex-wrap: wrap;
      float:left;
      flex: 1 1 0;
    }    

    .filter-container{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      align-items: center;      
    }

    h3{
      display: inline-block;
      padding-right: 10px;
      padding-top: 7px;
      padding-bottom: 7px;
      border-right: 1px solid $clDarkGrey;
      position: relative;
      margin: 10px 0;
      min-width: 60px;

      &:after{
        content:"";
        position:absolute;
        right: -8px;
        top: 50%;
        margin-top: -3px;
        border: 4px solid transparent;
        border-left: 4px solid $clDarkGrey;
      }
    }

    label{
      vertical-align: middle;
      padding: 10px 10px 10px 5px;
    }

    input, input[type=checkbox], select{
      vertical-align: middle;
      margin-left: 20px;
    }

    input[type="text"]{
      border-radius: 2px;
      padding: 5px;
      margin-bottom: 0px;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
    }

    input.search{
      background-image: $iconSearchUrl;
      background-position: center right 10px;
      background-repeat: no-repeat;
      padding-right: 30px;
    }

   select{
    // webkit only
    @media screen and (-webkit-min-device-pixel-ratio:0) {  
      border-color: $clGreyTint;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
      border-radius: 2px;
      background-color: #fff;  
      &:disabled{
        background-color: $clGrey;
      }
    }
    max-width: 160px;
    
    padding: 5px;
  }
}

  .error{
    padding:10px;
  }

  table{
    .description{
      a{
        text-decoration: none;
        color: black;
      }
      max-width: 270px;
      white-space: normal;
    }

    .bookmark-icon{
      background-image: $iconBookmarkWhiteUrl;
      background-repeat: no-repeat;
      background-position: center left;
      background-size: 15px;
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-right: 4px;
    }

    .collaborators{
      display: block;
      color: $clPrimaryAlt;
      text-transform: uppercase;
      font-size: 12px;
      font-family: $fontHeading;
    }

    .access{
      text-transform: uppercase;
    }

    .actions{
      width: 130px;
      .btn{
        padding-left: 15px;
        padding-right: 35px;
      }
    }
  }
}

.bg__project-session-view{

   .tools{
    background-color: $clGrey;
    padding: 0px 10px;
    display: flex;

    &:after{
      clear:both;
      content: "";
      display: table;
    }
    
    .left{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      flex-wrap: wrap;
      float:left;
      flex: 1 1 0;
    }    

    .filter-container{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      align-items: center;      
    }

    h3{
      display: inline-block;
      padding-right: 10px;
      padding-top: 7px;
      padding-bottom: 7px;
      border-right: 1px solid $clDarkGrey;
      position: relative;
      margin: 10px 0;
      min-width: 60px;

      &:after{
        content:"";
        position:absolute;
        right: -8px;
        top: 50%;
        margin-top: -3px;
        border: 4px solid transparent;
        border-left: 4px solid $clDarkGrey;
      }
    }

    label{
      vertical-align: middle;
      padding: 10px 10px 10px 5px;
    }

    input, input[type=checkbox], select{
      vertical-align: middle;
      margin-left: 20px;
    }

    input[type="text"]{
      border-radius: 2px;
      padding: 5px;
      margin-bottom: 0px;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
    }

    input.search{
      background-image: $iconSearchUrl;
      background-position: center right 10px;
      background-repeat: no-repeat;
      padding-right: 30px;
    }

   select{
    // webkit only
    @media screen and (-webkit-min-device-pixel-ratio:0) {  
      border-color: $clGreyTint;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
      border-radius: 2px;
      background-color: #fff;  
      &:disabled{
        background-color: $clGrey;
      }
    }
    max-width: 160px;
    
    padding: 5px;
  }
}

  .error{
    padding:10px;
  }

}
.bg__project-session-create{
  .info-bar{
  background-image: $iconProjectUrl;
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 40px;
  margin-bottom: 20px;
  h1{
    max-width: calc(100% - 150px);
    padding-top: 10px;
    margin: 0;
    margin-bottom: 5px;      
  }
  p{
    margin: 0;      
    display: inline-block;
  }
  .btn{
    float:right;
  }
}
   .tools{
    background-color: $clGrey;
    padding: 0px 10px;
    display: flex;

    &:after{
      clear:both;
      content: "";
      display: table;
    }
    
    .left{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      flex-wrap: wrap;
      float:left;
      flex: 1 1 0;
    }    

    .filter-container{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      align-items: center;      
    }

    h3{
      display: inline-block;
      padding-right: 10px;
      padding-top: 7px;
      padding-bottom: 7px;
      border-right: 1px solid $clDarkGrey;
      position: relative;
      margin: 10px 0;
      min-width: 60px;

      &:after{
        content:"";
        position:absolute;
        right: -8px;
        top: 50%;
        margin-top: -3px;
        border: 4px solid transparent;
        border-left: 4px solid $clDarkGrey;
      }
    }

    label{
      vertical-align: middle;
      padding: 10px 10px 10px 5px;
    }

    input, input[type=checkbox], select{
      vertical-align: middle;
      margin-left: 20px;
    }

    input[type="text"]{
      border-radius: 2px;
      padding: 5px;
      margin-bottom: 0px;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
    }

    input.search{
      background-image: $iconSearchUrl;
      background-position: center right 10px;
      background-repeat: no-repeat;
      padding-right: 30px;
    }

   select{
    // webkit only
    @media screen and (-webkit-min-device-pixel-ratio:0) {  
      border-color: $clGreyTint;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
      border-radius: 2px;
      background-color: #fff;  
      &:disabled{
        background-color: $clGrey;
      }
    }
    max-width: 160px;
    
    padding: 5px;
  }
}

  .btn{
    margin-left: 0;
  }

}

.bg__project-queries-view {

}
.bg__project-queries-table{

   .tools{
    background-color: $clGrey;
    padding: 0px 10px;
    display: flex;

    &:after{
      clear:both;
      content: "";
      display: table;
    }
    
    .left{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      flex-wrap: wrap;
      float:left;
      flex: 1 1 0;
    }    

    .filter-container{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      align-items: center;      
    }

    h3{
      display: inline-block;
      padding-right: 10px;
      padding-top: 7px;
      padding-bottom: 7px;
      border-right: 1px solid $clDarkGrey;
      position: relative;
      margin: 10px 0;
      min-width: 60px;

      &:after{
        content:"";
        position:absolute;
        right: -8px;
        top: 50%;
        margin-top: -3px;
        border: 4px solid transparent;
        border-left: 4px solid $clDarkGrey;
      }
    }

    label{
      vertical-align: middle;
      padding: 10px 10px 10px 5px;
    }

    input, input[type=checkbox], select{
      vertical-align: middle;
      margin-left: 20px;
    }

    input[type="text"]{
      border-radius: 2px;
      padding: 5px;
      margin-bottom: 0px;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
    }

    input.search{
      background-image: $iconSearchUrl;
      background-position: center right 10px;
      background-repeat: no-repeat;
      padding-right: 30px;
    }

   select{
    // webkit only
    @media screen and (-webkit-min-device-pixel-ratio:0) {  
      border-color: $clGreyTint;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
      border-radius: 2px;
      background-color: #fff;  
      &:disabled{
        background-color: $clGrey;
      }
    }
    max-width: 160px;
    
    padding: 5px;
  }
}

  .error{
    padding:10px;
  }

}

.bg__project-data-view{
   .tools{
    background-color: $clGrey;
    padding: 0px 10px;
    display: flex;

    &:after{
      clear:both;
      content: "";
      display: table;
    }
    
    .left{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      flex-wrap: wrap;
      float:left;
      flex: 1 1 0;
    }    

    .filter-container{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      align-items: center;      
    }

    h3{
      display: inline-block;
      padding-right: 10px;
      padding-top: 7px;
      padding-bottom: 7px;
      border-right: 1px solid $clDarkGrey;
      position: relative;
      margin: 10px 0;
      min-width: 60px;

      &:after{
        content:"";
        position:absolute;
        right: -8px;
        top: 50%;
        margin-top: -3px;
        border: 4px solid transparent;
        border-left: 4px solid $clDarkGrey;
      }
    }

    label{
      vertical-align: middle;
      padding: 10px 10px 10px 5px;
    }

    input, input[type=checkbox], select{
      vertical-align: middle;
      margin-left: 20px;
    }

    input[type="text"]{
      border-radius: 2px;
      padding: 5px;
      margin-bottom: 0px;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
    }

    input.search{
      background-image: $iconSearchUrl;
      background-position: center right 10px;
      background-repeat: no-repeat;
      padding-right: 30px;
    }

   select{
    // webkit only
    @media screen and (-webkit-min-device-pixel-ratio:0) {  
      border-color: $clGreyTint;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
      border-radius: 2px;
      background-color: #fff;  
      &:disabled{
        background-color: $clGrey;
      }
    }
    max-width: 160px;
    
    padding: 5px;
  }
}

  .tools{
    background-color: $clWhite;

    .radiogroup{
      display: inline-block;
      label,input{
        cursor: pointer;
      }
    }

    .view{
      margin-bottom: 5px;
    }

    .export-button{
      float:right;
      margin-top: -45px;
      margin-right: 0;
      margin-bottom: 0;
    }

    .type-label{
      padding-left: 10px;
    }

    .type-select{
      margin-left: 0px;
    }
  }
}
.bg__nested-table{
  
  h2{
    padding-bottom: 30px;
    padding-top: 15px;

    .fold{      
      margin-left: 20px;
      margin-top: -2px;
      display: inline-block;
      font-size: 13px;
      
      .filter{
        float: right;
        padding: 10px;      

        span{
          text-decoration: underline;
          &:hover{
            cursor: pointer;
            opacity: 0.8;
          }
        }
      }

      select{
        font-family: $fontBody;
        float:right;
        margin-top: 5px;
        font-weight: normal;
        font-size: 14px;
        padding: 6px 10px;

        // webkit only
        @media screen and (-webkit-min-device-pixel-ratio:0) {  
          border-color: $clGreyTint;
          box-shadow: 0 2px 2px rgba(0,0,0,0.1);
          border-radius: 2px;
          background-color: #fff;  
          &:disabled{
            background-color: $clGrey;
          }
        }
      }
      
    }
  }

  .item-row{
    margin: 10px 0;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    border-radius: 2px;
    border: 1px solid $clGreyTint;

    &:first-child{
      .item{
        .info{
          &>li{
            .label{
              margin-top: -26px;
              display: block;
              @media screen and (max-width: $break-small) {
                margin-top: 0px;
              }

            }
          }
        }
      }
    }

    .item{
      width: 100%;
      list-style: none;
      position: relative;
      
      display: flex;
      justify-content: flex-start;
      align-items: stretch;
      align-content: stretch;


      .selector{
        flex-shrink: 0;
        flex-basis: 30px;
        input{
          margin-left: 10px;
        }

        .delete{
          background-image: $iconDeleteUrl;
          background-repeat: no-repeat;
          background-position: center center;
          background-size: 18px;
          position: absolute;
          left: 0;
          bottom: 0;
          width: 30px;
          height: 30px;
          cursor: pointer;
          &:hover{
            opacity: 0.8;
          }
        }
      }



      .info{
        max-width: calc(100% - 130px);
        display: flex;
        flex-grow:2;
        box-sizing: border-box;
        vertical-align: top;
        padding-left: 10px;    
        @media screen and (max-width: $break-small) {
          flex-wrap: wrap;          
        }

        li{
          padding: 5px 10px 10px 10px;
          min-height: 50px;
          min-width: 120px;
          flex: 1 1 0;          
          
          .label{
            display: none;
            @media screen and (max-width: $break-small) {
              display: block;
            }
          }
          p{
            overflow-wrap: break-word;
            word-wrap: break-word;
          }
          
          &.primary{
            p{
              font-weight: bold;
            }
          }
        }

      }

      .actions{
        min-width:100px;
        min-height: 65px;
        flex-shrink: 0;

        .btn.primary{
          margin: 7px;
          padding-left: 17px;
          padding-right: 30px;
          margin-right: 0px;
        }

        .row-menu{
          margin-top: 7px;          
        }
        .sublevel-button-container{
          position: absolute;
          right: 0;
          bottom: 0;

          .sublevel-button{
            display: inline-block;
            float:right;  
            background-color: $clGreyTint;
            color: $clDark;
            text-transform: uppercase;
            font-family: $fontHeading;
            padding: 0px 30px 0px 0px;
            background-position: center right 10px;
            background-repeat: no-repeat;
            background-image: $arrowDownDarkUrl;
            cursor: pointer;
            box-sizing: border-box;
            transition: background-color 0.2s ease-out;

            &.lowered{
              background-color: darken($clGreyTint, 10);
              &.facet:before{
                border-right: 15px solid darken($clGreyTint, 10);
                border-bottom: 15px solid darken($clGreyTint, 10);
              }
            }

            &:hover{
              background-color: darken($clGreyTint, 5);
              &.facet:before{
                border-right: 15px solid darken($clGreyTint, 5);
                border-bottom: 15px solid darken($clGreyTint, 5);
              }
            }

             &.active{
              background-color: $clGreyTint;
              &.facet:before{
                border-right: 15px solid $clGreyTint;
                border-bottom: 15px solid $clGreyTint;
              }
            }
            
            &.facet:before{
              content: " ";
              position:absolute;
              left: -30px;
              top: 0px;
              border-top: 15px solid transparent;
              border-left: 15px solid transparent;
              border-right: 15px solid $clGreyTint;
              border-bottom: 15px solid $clGreyTint;
              transition: border-color 0.2s ease-out;
            }

            &.active{
              background-image: $arrowUpDarkUrl;
              &:hover{
                background-color: darken($clGreyTint, 3);
                &.facet:before{
                  border-right: 15px solid darken($clGreyTint, 3);
                  border-bottom: 15px solid darken($clGreyTint, 3);
                }
              }
            }

            .icon{
              display: inline-block;
              background-repeat: no-repeat;
              background-position: center center;          
              
              height: 30px;
            }
            .count{
    display: inline-block;
    font-family: $fontHeading;
    float: right;
    margin-left: 15px;
    background-color: $clSecondary;
    color: $clWhite;
    border-radius: 25px;
    font-size: 0.8em;
    font-weight: bold;
    padding: 2px 4px 3px 4px;
    line-height: 13px;
    min-width: 18px;
    text-align: center;
    margin-top: 1px;
}

            .count{
              margin-left: 8px;
              margin-top: 6px;
            }
            
            &.zero {
              &.lowered{
                background-color: $clGreyTint;
              }
              opacity:0.3;

              &.active{
                opacity: 1;
              }

              .count{
                background-color: $clDarkGrey;        
              }
            }
          }
        }
      }
    }

    .sublevel{
      background-color: $clGreyTint;
      padding: 10px 20px;
      table{
        width: 100%;
        max-width: 100%;
        th{
          text-transform: uppercase;
          font-family: $fontHeading;
          padding: 5px 5px 10px 0;
        }

        td{
          padding: 5px 5px 5px 0;
          border-top: 1px solid darken($clGreyTint,3);
          max-width: 200px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          &.bold{
            font-weight: bold;
          }
        }

      }
    }
  }

  .groups{
    span{
      display: inline-block;
      background-color: $clGrey;
      text-transform: uppercase;
      font-size: 11px;
      margin: 3px;
      border-radius: 2px;          
      padding: 1px 4px; 
    }
  }
}
.bg__bookmark-table{
  .results{
  .sort{
    margin-top: 10px;
    float:right;
    display: flex;
    align-items: center;
    h3{
      margin-right: 10px;
    }
    select{
      padding: 6px 10px;
      // webkit only
      @media screen and (-webkit-min-device-pixel-ratio:0) {  
        border-color: $clGreyTint;
        box-shadow: 0 2px 2px rgba(0,0,0,0.1);
        border-radius: 2px;
        background-color: #fff;  
        &:disabled{
          background-color: $clGrey;
        }
      }
    }
  }


  h2,h3{
    text-transform: capitalize;
    margin: 20px 0;    
    input{
      margin-left: 10px;
      margin-right: 10px;
      vertical-align: middle;
      margin-top: 0;
    }

    .count{
    display: inline-block;
    font-family: $fontHeading;
    float: right;
    margin-left: 15px;
    background-color: $clSecondary;
    color: $clWhite;
    border-radius: 25px;
    font-size: 0.8em;
    font-weight: bold;
    padding: 2px 4px 3px 4px;
    line-height: 13px;
    min-width: 18px;
    text-align: center;
    margin-top: 1px;
}
    .count{
      background-color: $clPrimary;
      float: none;
      margin-left: 3px;
      font-size: 12px;
    }
  }

  h2{
    font-size: 18px;    
  }

  h3{
    font-size: 15px;
  }

}

  .modal{
  background-color: rgba($clDark,0.8);
  display: block;
  height: 100%;
  left: 0;
  overflow-y: scroll;
  position: fixed;
  top: 0;
  width: 100%;

  .container{
    position: relative;
    background-color: $clWhite;
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
    margin: 40px auto;
    padding: 30px;
    height: calc(100% - 80px);
    box-sizing: border-box;
    padding: 0;

    iframe{
      width: 100%;
      height: 100%;        
    }

    .close{
      background-color: rgba($clDark, 0.5);
      background-image: $iconCrossUrl;
      background-position: center right 15px;
      background-repeat: no-repeat;
      background-size: 20px;
      color: $clWhite;
      font-family: $fontHeading;
      cursor: pointer;    
      display: block;
      height: 40px;
      line-height: 40px;
      opacity: 0.8;
      position: absolute;
      right: 0;
      text-shadow: none;
      text-transform: uppercase;
      top: -40px;
      width: 90px;
      font-size: 15px;
      
      &:hover{
        opacity: 1.0;
      }
    }

  }

}

  &.loading{
    .bg__nested-table{
      opacity: 0.5;
    }
  }
}
.bookmarks-custom-styles {
  margin: 0 ;
  padding: 30% ;
  text-align: center ;

  h3 {
    font-size: 26px;
  }
}
.bg__bookmark-row.item-row{
  .item{
    .image{
      flex-basis: 132px;
      height: 88px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      flex-shrink: 0;
      cursor: pointer;
    }

    .info {
      flex-wrap: wrap;
      li{
        &.primary p{
          cursor: pointer;
          &:hover{
            text-decoration: underline;
          }
        }

        &.content-date{
          min-width: 100px;
          max-width: 100px;
        }

        &.content-media{
          min-width: 100px;
          max-width: 100px;
        }
      }
    }

    .actions {
      .sublevel-button-container .sublevel-button{
        padding-left: 15px;
        border-left: 1px solid rgba(0,0,0,0.3);
        &.facet{
          padding-left: 0;
          border-left: 0;
        }

        .icon.annotation{
          width: 28px;
          background-size: 28px;
          background-image: $iconAnnotationUrl;
        }

        .icon.segment{
          margin-right: 3px;
          width: 20px;
          background-size: 20px;
          background-image: $iconSegmentUrl;
        }
      }
    }
  }

  .sublevel{
    table{
      width: 100%;
      tr{
          .time{
            width: 20%;
          }
          .type{
            width: 20%;       
            a{
              color: black;
            }
          }
          .details{
            width: 30%;
          }

          td{
            vertical-align: top;
            &.time{
              font-weight: bold;
            } 
            table{
              tr{
                &:first-child{
                  td{
                  border: 0;
                }
              }
            }
          }
        }
      }
    }
  }
}
.bg__annotation-table{
  .results{
  .sort{
    margin-top: 10px;
    float:right;
    display: flex;
    align-items: center;
    h3{
      margin-right: 10px;
    }
    select{
      padding: 6px 10px;
      // webkit only
      @media screen and (-webkit-min-device-pixel-ratio:0) {  
        border-color: $clGreyTint;
        box-shadow: 0 2px 2px rgba(0,0,0,0.1);
        border-radius: 2px;
        background-color: #fff;  
        &:disabled{
          background-color: $clGrey;
        }
      }
    }
  }


  h2,h3{
    text-transform: capitalize;
    margin: 20px 0;    
    input{
      margin-left: 10px;
      margin-right: 10px;
      vertical-align: middle;
      margin-top: 0;
    }

    .count{
    display: inline-block;
    font-family: $fontHeading;
    float: right;
    margin-left: 15px;
    background-color: $clSecondary;
    color: $clWhite;
    border-radius: 25px;
    font-size: 0.8em;
    font-weight: bold;
    padding: 2px 4px 3px 4px;
    line-height: 13px;
    min-width: 18px;
    text-align: center;
    margin-top: 1px;
}
    .count{
      background-color: $clPrimary;
      float: none;
      margin-left: 3px;
      font-size: 12px;
    }
  }

  h2{
    font-size: 18px;    
  }

  h3{
    font-size: 15px;
  }

}

  .type-list{
    margin-top: 10px;
    border-top: 2px solid $clGreyTint;
  }

  .modal{
  background-color: rgba($clDark,0.8);
  display: block;
  height: 100%;
  left: 0;
  overflow-y: scroll;
  position: fixed;
  top: 0;
  width: 100%;

  .container{
    position: relative;
    background-color: $clWhite;
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
    margin: 40px auto;
    padding: 30px;
    height: calc(100% - 80px);
    box-sizing: border-box;
    padding: 0;

    iframe{
      width: 100%;
      height: 100%;        
    }

    .close{
      background-color: rgba($clDark, 0.5);
      background-image: $iconCrossUrl;
      background-position: center right 15px;
      background-repeat: no-repeat;
      background-size: 20px;
      color: $clWhite;
      font-family: $fontHeading;
      cursor: pointer;    
      display: block;
      height: 40px;
      line-height: 40px;
      opacity: 0.8;
      position: absolute;
      right: 0;
      text-shadow: none;
      text-transform: uppercase;
      top: -40px;
      width: 90px;
      font-size: 15px;
      
      &:hover{
        opacity: 1.0;
      }
    }

  }

}

  &.loading{
    .bg__nested-table{
      opacity: 0.5;
    }
  }

  .type{
    font-weight: bold;
  }
}
.bg__annotation-row.item-row{
  .item{
    .classification{
      .vocabulary{
        width: 150px;
      }
    }

    .metadata{
      .template{
        width: 100px;
      }
    }

    .created{
      width: 100px;
    }  

    .actions{
      .row-menu{
        margin-top: 0px;          
      }
    }
    
    .icon.bookmark{
      width: 20px;
      background-size: 14px;
      background-image: $iconBookmarkUrl;
    }
  }

  .sublevel{
    td.actions{
      text-align: right;
      .btn{
        margin: 0;
      }
    }
  }
}

.row-menu{
  float:right;
  display: inline-block;
  width: 25px;
  height: 35px;
  cursor: pointer;
  text-align: center;
  cursor: pointer;
  z-index: 10;
  
  span{
    line-height: 35px;
    font-size: 1.1em;          
    font-weight: bold;    
  }

  ul{
    z-index: 10;
    display: none;
    margin-left: -40px;
    position: absolute;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    li{
      cursor: pointer;
      background-color: #fff;
      padding: 10px 15px;
      border-bottom: 1px solid #aaa;

      &:hover{
        background-color: $clPrimary;
        color: white;
      }

      &::last-child{
        border-bottom: 0;
      }
    }
  }

  &:hover{
    ul{
      display: block;
    }
  }
}

// Workspace -- Personal collections
.bg__collection-create {
	.info-bar{
  background-image: $iconProjectUrl;
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 40px;
  margin-bottom: 20px;
  h1{
    max-width: calc(100% - 150px);
    padding-top: 10px;
    margin: 0;
    margin-bottom: 5px;      
  }
  p{
    margin: 0;      
    display: inline-block;
  }
  .btn{
    float:right;
  }
}
}
.bg__collection-edit {
	.info-bar{
  background-image: $iconProjectUrl;
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 40px;
  margin-bottom: 20px;
  h1{
    max-width: calc(100% - 150px);
    padding-top: 10px;
    margin: 0;
    margin-bottom: 5px;      
  }
  p{
    margin: 0;      
    display: inline-block;
  }
  .btn{
    float:right;
  }
}
}
.bg__collection-form {
	
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow {
  margin-left: -8px;
  position: absolute;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before {
  box-sizing: content-box;
  position: absolute;
  border: 8px solid transparent;
  height: 0;
  width: 1px;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before {
  content: "";
  z-index: -1;
  border-width: 8px;
  left: -8px;
  border-bottom-color: #aeaeae;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle {
  top: 0;
  margin-top: -8px;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before {
  border-top: none;
  border-bottom-color: #f0f0f0;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before {
  top: -1px;
  border-bottom-color: #aeaeae;
}

.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow {
  bottom: 0;
  margin-bottom: -8px;
}

.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before {
  border-bottom: none;
  border-top-color: #fff;
}

.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before {
  bottom: -1px;
  border-top-color: #aeaeae;
}

.react-datepicker-wrapper {
  display: inline-block;
}

.react-datepicker {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  background-color: #fff;
  color: #000;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  display: inline-block;
  position: relative;
  width:20rem;
  height:21rem;
}

.react-datepicker__triangle {
  position: absolute;
  left: 50px;
}

.react-datepicker-popper {
  z-index: 10;
}

.react-datepicker-popper[data-placement^="bottom"] {
  margin-top: 10px;
  width: 20rem;
height:20rem;
}

.react-datepicker-popper[data-placement^="top"] {
  margin-bottom: 6px;
}

.react-datepicker-popper[data-placement^="right"] {
  margin-left: 8px;
}

.react-datepicker-popper[data-placement^="right"] .react-datepicker__triangle {
  left: auto;
  right: 42px;
}

.react-datepicker-popper[data-placement^="left"] {
  margin-right: 8px;
}

.react-datepicker-popper[data-placement^="left"] .react-datepicker__triangle {
  left: 42px;
  right: auto;
}

.react-datepicker__header {
  text-align: center;
  background-color: #f0f0f0;
  border-bottom: 1px solid #aeaeae;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
  padding-top: 8px;
  position: relative;
  width:20rem;
  font-size:1.2rem;
}

.react-datepicker__year-dropdown-container--select,
.react-datepicker__month-dropdown-container--select,
.react-datepicker__year-dropdown-container--scroll,
.react-datepicker__month-dropdown-container--scroll {
  display: inline-block;
  margin: 0 2px;
}

.react-datepicker__current-month {
  margin-top: 0;
  color: #000;
  font-weight: bold;
  font-size: 1.2rem;

}

.react-datepicker__navigation {
  line-height: 1.7rem;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 10px;
  width: 0;
  border: 0.55rem solid transparent;
  z-index: 1;
}

.react-datepicker__navigation--previous {
  left: 10px;
  border-right-color: #ccc;
}

.react-datepicker__navigation--previous:hover {
  border-right-color: #b3b2b2;
}

.react-datepicker__navigation--next {
  right: 10px;
  border-left-color: #ccc;
}

.react-datepicker__navigation--next:hover {
  border-left-color: #b3b2b2;
}

.react-datepicker__navigation--years {
  position: relative;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.react-datepicker__navigation--years-previous {
  top: 4px;
  border-top-color: #ccc;
}

.react-datepicker__navigation--years-previous:hover {
  border-top-color: #b3b2b2;
}

.react-datepicker__navigation--years-upcoming {
  top: -4px;
  border-bottom-color: #ccc;
}

.react-datepicker__navigation--years-upcoming:hover {
  border-bottom-color: #b3b2b2;
}

.react-datepicker__month-container {
  display: inline;
  float: left;
  width:20rem;
  height:20rem;
}

.react-datepicker__month {
  margin: 0.4rem;
  text-align: center;
}

.react-datepicker__week-number {
  color: #ccc;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}

.react-datepicker__week-number.react-datepicker__week-number--clickable {
  cursor: pointer;
}

.react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}

.react-datepicker__day-name,
.react-datepicker__day {
  color: #000;
  display: inline-block;
  width: 2.2rem;
  height:2rem;
  line-height: 1.9rem;
  text-align: center;
  margin: 0.166rem;
}

.react-datepicker__day {
  cursor: pointer;
}

.react-datepicker__day:hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}

.react-datepicker__day--today {
  font-weight: bold;
}

.react-datepicker__day--highlighted {
  border-radius: 0.3rem;
  background-color: #3dcc4a;
  color: #fff;
}

.react-datepicker__day--highlighted:hover {
  background-color: #32be3f;
}

.react-datepicker__day--highlighted-custom-1 {
  color: magenta;
}

.react-datepicker__day--highlighted-custom-2 {
  color: green;
}

.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}

.react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover {
  background-color: #1d5d90;
}

.react-datepicker__day--keyboard-selected {
  border-radius: 0.3rem;
  background-color: #2a87d0;
  color: #fff;
}

.react-datepicker__day--keyboard-selected:hover {
  background-color: #1d5d90;
}

.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) {
  background-color: rgba(33, 107, 165, 0.5);
}

.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range) {
  background-color: #f0f0f0;
  color: #000;
}

.react-datepicker__day--disabled {
  cursor: default;
  color: #ccc;
}

.react-datepicker__day--disabled:hover {
  background-color: transparent;
}

.react-datepicker__input-container {
  position: relative;
  display: inline-block;
  margin-left: 2px;
  .fa {
    position: absolute;
    top: 0;
    right: 6px;
    z-index: -1;
  }
  input {
    background: none;
    &:disabled {
      opacity: .6;
    }
  }
}

.react-datepicker__year-read-view,
.react-datepicker__month-read-view {
  border: 1px solid transparent;
  border-radius: 0.3rem;
}

.react-datepicker__year-read-view:hover,
.react-datepicker__month-read-view:hover {
  cursor: pointer;
}

.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow {
  border-top-color: #b3b2b2;
}

.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow {
  border-top-color: #ccc;
  float: right;
  margin-left: 20px;
  top: 8px;
  position: relative;
  border-width: 0.55rem;
}

.react-datepicker__year-dropdown,
.react-datepicker__month-dropdown {
  background-color: #f0f0f0;
  position: absolute;
  width: 50%;
  left: 25%;
  top: 30px;
  z-index: 1;
  text-align: center;
  border-radius: 0.3rem;
  border: 1px solid #aeaeae;
}

.react-datepicker__year-dropdown:hover,
.react-datepicker__month-dropdown:hover {
  cursor: pointer;
}

.react-datepicker__year-dropdown--scrollable,
.react-datepicker__month-dropdown--scrollable {
  height: 150px;
  overflow-y: scroll;
}

.react-datepicker__year-option,
.react-datepicker__month-option {
  line-height: 20px;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.react-datepicker__year-option:first-of-type,
.react-datepicker__month-option:first-of-type {
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}

.react-datepicker__year-option:last-of-type,
.react-datepicker__month-option:last-of-type {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}

.react-datepicker__year-option:hover,
.react-datepicker__month-option:hover {
  background-color: #ccc;
}

.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming {
  border-bottom-color: #b3b2b2;
}

.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous {
  border-top-color: #b3b2b2;
}

.react-datepicker__year-option--selected,
.react-datepicker__month-option--selected {
  position: absolute;
  left: 15px;
}

.react-datepicker__close-icon {
  background-color: transparent;
  border: 0;
  cursor: pointer;
  display: inline-block;
  height: 0;
  outline: 0;
  padding: 0;
  vertical-align: middle;
}

.react-datepicker__close-icon::after {
  background-color: #216ba5;
  border-radius: 50%;
  bottom: 0;
  box-sizing: border-box;
  color: #fff;
  content: "\00d7";
  cursor: pointer;
  font-size: 12px;
  height: 16px;
  width: 16px;
  line-height: 1;
  margin: -8px auto 0;
  padding: 2px;
  position: absolute;
  right: 7px;
  text-align: center;
  top: 50%;
}

.react-datepicker__today-button {
  background: #f0f0f0;
  border-top: 1px solid #aeaeae;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  padding: 5px 0;
  clear: left;
}

.react-datepicker__portal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  left: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 2147483647;
}

.react-datepicker__portal .react-datepicker__day-name,
.react-datepicker__portal .react-datepicker__day {
  width: 3rem;
  line-height: 3rem;
}

@media (max-width: 400px), (max-height: 550px) {
  .react-datepicker__portal .react-datepicker__day-name,
  .react-datepicker__portal .react-datepicker__day {
    width: 2rem;
    line-height: 2rem;
  }
}

.react-datepicker__portal .react-datepicker__current-month {
  font-size: 1.44rem;
}

.react-datepicker__portal .react-datepicker__navigation {
  border: 0.81rem solid transparent;
}

.react-datepicker__portal .react-datepicker__navigation--previous {
  border-right-color: #ccc;
}

.react-datepicker__portal .react-datepicker__navigation--previous:hover {
  border-right-color: #b3b2b2;
}

.react-datepicker__portal .react-datepicker__navigation--next {
  border-left-color: #ccc;
}

.react-datepicker__portal .react-datepicker__navigation--next:hover {
  border-left-color: #b3b2b2;
}

.date-picker-container {
  position: relative;
  .fa {
    position: absolute;
    top: 9px;
    right: 6px;
    z-index: -1;
  }
}

	input[type=text], textarea {
		display:block;
		min-width: 400px;
		max-width: 100%;
	}

	.bg__cf__actions {
		margin-top: 20px;
		margin-left: 130px;
	}

	.bg__cf__validation-error {
		background-color: #f26c50;
		color: #fff;
		height: 3.3rem;
		margin-bottom: 6px;
		padding: 6px 10px;
	}

	.react-datepicker__navigation {
		background: none;
		line-height: 1.7rem;
		text-align: center;
		cursor: pointer;
		position: absolute;
		top: 10px;
		width: 0;
		padding: 0;
		border: 0.45rem solid transparent;
		z-index: 1;
		height: 10px;
		width: 10px;
		text-indent: -999em;
		overflow: hidden;
		&--previous {
			left: 10px;
			border-right-color: #ccc;
		}
		&--next {
			right: 10px;
			border-left-color: #ccc;
		}
	}
}
.bg__collection-list-view {
  .info-bar{
  background-image: $iconProjectUrl;
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 40px;
  margin-bottom: 20px;
  h1{
    max-width: calc(100% - 150px);
    padding-top: 10px;
    margin: 0;
    margin-bottom: 5px;      
  }
  p{
    margin: 0;      
    display: inline-block;
  }
  .btn{
    float:right;
  }
}
}
.bg__collection-table{

   .tools{
    background-color: $clGrey;
    padding: 0px 10px;
    display: flex;

    &:after{
      clear:both;
      content: "";
      display: table;
    }
    
    .left{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      flex-wrap: wrap;
      float:left;
      flex: 1 1 0;
    }    

    .filter-container{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      align-items: center;      
    }

    h3{
      display: inline-block;
      padding-right: 10px;
      padding-top: 7px;
      padding-bottom: 7px;
      border-right: 1px solid $clDarkGrey;
      position: relative;
      margin: 10px 0;
      min-width: 60px;

      &:after{
        content:"";
        position:absolute;
        right: -8px;
        top: 50%;
        margin-top: -3px;
        border: 4px solid transparent;
        border-left: 4px solid $clDarkGrey;
      }
    }

    label{
      vertical-align: middle;
      padding: 10px 10px 10px 5px;
    }

    input, input[type=checkbox], select{
      vertical-align: middle;
      margin-left: 20px;
    }

    input[type="text"]{
      border-radius: 2px;
      padding: 5px;
      margin-bottom: 0px;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
    }

    input.search{
      background-image: $iconSearchUrl;
      background-position: center right 10px;
      background-repeat: no-repeat;
      padding-right: 30px;
    }

   select{
    // webkit only
    @media screen and (-webkit-min-device-pixel-ratio:0) {  
      border-color: $clGreyTint;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
      border-radius: 2px;
      background-color: #fff;  
      &:disabled{
        background-color: $clGrey;
      }
    }
    max-width: 160px;
    
    padding: 5px;
  }
}

  .error{
    padding:10px;
  }

  table{

    &.access{
      text-transform: capitalize;
    }
  }
}
.bg__data-entry-form {
	
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow {
  margin-left: -8px;
  position: absolute;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before {
  box-sizing: content-box;
  position: absolute;
  border: 8px solid transparent;
  height: 0;
  width: 1px;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before {
  content: "";
  z-index: -1;
  border-width: 8px;
  left: -8px;
  border-bottom-color: #aeaeae;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle {
  top: 0;
  margin-top: -8px;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before {
  border-top: none;
  border-bottom-color: #f0f0f0;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before {
  top: -1px;
  border-bottom-color: #aeaeae;
}

.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow {
  bottom: 0;
  margin-bottom: -8px;
}

.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before {
  border-bottom: none;
  border-top-color: #fff;
}

.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before {
  bottom: -1px;
  border-top-color: #aeaeae;
}

.react-datepicker-wrapper {
  display: inline-block;
}

.react-datepicker {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  background-color: #fff;
  color: #000;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  display: inline-block;
  position: relative;
  width:20rem;
  height:21rem;
}

.react-datepicker__triangle {
  position: absolute;
  left: 50px;
}

.react-datepicker-popper {
  z-index: 10;
}

.react-datepicker-popper[data-placement^="bottom"] {
  margin-top: 10px;
  width: 20rem;
height:20rem;
}

.react-datepicker-popper[data-placement^="top"] {
  margin-bottom: 6px;
}

.react-datepicker-popper[data-placement^="right"] {
  margin-left: 8px;
}

.react-datepicker-popper[data-placement^="right"] .react-datepicker__triangle {
  left: auto;
  right: 42px;
}

.react-datepicker-popper[data-placement^="left"] {
  margin-right: 8px;
}

.react-datepicker-popper[data-placement^="left"] .react-datepicker__triangle {
  left: 42px;
  right: auto;
}

.react-datepicker__header {
  text-align: center;
  background-color: #f0f0f0;
  border-bottom: 1px solid #aeaeae;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
  padding-top: 8px;
  position: relative;
  width:20rem;
  font-size:1.2rem;
}

.react-datepicker__year-dropdown-container--select,
.react-datepicker__month-dropdown-container--select,
.react-datepicker__year-dropdown-container--scroll,
.react-datepicker__month-dropdown-container--scroll {
  display: inline-block;
  margin: 0 2px;
}

.react-datepicker__current-month {
  margin-top: 0;
  color: #000;
  font-weight: bold;
  font-size: 1.2rem;

}

.react-datepicker__navigation {
  line-height: 1.7rem;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 10px;
  width: 0;
  border: 0.55rem solid transparent;
  z-index: 1;
}

.react-datepicker__navigation--previous {
  left: 10px;
  border-right-color: #ccc;
}

.react-datepicker__navigation--previous:hover {
  border-right-color: #b3b2b2;
}

.react-datepicker__navigation--next {
  right: 10px;
  border-left-color: #ccc;
}

.react-datepicker__navigation--next:hover {
  border-left-color: #b3b2b2;
}

.react-datepicker__navigation--years {
  position: relative;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.react-datepicker__navigation--years-previous {
  top: 4px;
  border-top-color: #ccc;
}

.react-datepicker__navigation--years-previous:hover {
  border-top-color: #b3b2b2;
}

.react-datepicker__navigation--years-upcoming {
  top: -4px;
  border-bottom-color: #ccc;
}

.react-datepicker__navigation--years-upcoming:hover {
  border-bottom-color: #b3b2b2;
}

.react-datepicker__month-container {
  display: inline;
  float: left;
  width:20rem;
  height:20rem;
}

.react-datepicker__month {
  margin: 0.4rem;
  text-align: center;
}

.react-datepicker__week-number {
  color: #ccc;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}

.react-datepicker__week-number.react-datepicker__week-number--clickable {
  cursor: pointer;
}

.react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}

.react-datepicker__day-name,
.react-datepicker__day {
  color: #000;
  display: inline-block;
  width: 2.2rem;
  height:2rem;
  line-height: 1.9rem;
  text-align: center;
  margin: 0.166rem;
}

.react-datepicker__day {
  cursor: pointer;
}

.react-datepicker__day:hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}

.react-datepicker__day--today {
  font-weight: bold;
}

.react-datepicker__day--highlighted {
  border-radius: 0.3rem;
  background-color: #3dcc4a;
  color: #fff;
}

.react-datepicker__day--highlighted:hover {
  background-color: #32be3f;
}

.react-datepicker__day--highlighted-custom-1 {
  color: magenta;
}

.react-datepicker__day--highlighted-custom-2 {
  color: green;
}

.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}

.react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover {
  background-color: #1d5d90;
}

.react-datepicker__day--keyboard-selected {
  border-radius: 0.3rem;
  background-color: #2a87d0;
  color: #fff;
}

.react-datepicker__day--keyboard-selected:hover {
  background-color: #1d5d90;
}

.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) {
  background-color: rgba(33, 107, 165, 0.5);
}

.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range) {
  background-color: #f0f0f0;
  color: #000;
}

.react-datepicker__day--disabled {
  cursor: default;
  color: #ccc;
}

.react-datepicker__day--disabled:hover {
  background-color: transparent;
}

.react-datepicker__input-container {
  position: relative;
  display: inline-block;
  margin-left: 2px;
  .fa {
    position: absolute;
    top: 0;
    right: 6px;
    z-index: -1;
  }
  input {
    background: none;
    &:disabled {
      opacity: .6;
    }
  }
}

.react-datepicker__year-read-view,
.react-datepicker__month-read-view {
  border: 1px solid transparent;
  border-radius: 0.3rem;
}

.react-datepicker__year-read-view:hover,
.react-datepicker__month-read-view:hover {
  cursor: pointer;
}

.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow {
  border-top-color: #b3b2b2;
}

.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow {
  border-top-color: #ccc;
  float: right;
  margin-left: 20px;
  top: 8px;
  position: relative;
  border-width: 0.55rem;
}

.react-datepicker__year-dropdown,
.react-datepicker__month-dropdown {
  background-color: #f0f0f0;
  position: absolute;
  width: 50%;
  left: 25%;
  top: 30px;
  z-index: 1;
  text-align: center;
  border-radius: 0.3rem;
  border: 1px solid #aeaeae;
}

.react-datepicker__year-dropdown:hover,
.react-datepicker__month-dropdown:hover {
  cursor: pointer;
}

.react-datepicker__year-dropdown--scrollable,
.react-datepicker__month-dropdown--scrollable {
  height: 150px;
  overflow-y: scroll;
}

.react-datepicker__year-option,
.react-datepicker__month-option {
  line-height: 20px;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.react-datepicker__year-option:first-of-type,
.react-datepicker__month-option:first-of-type {
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}

.react-datepicker__year-option:last-of-type,
.react-datepicker__month-option:last-of-type {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}

.react-datepicker__year-option:hover,
.react-datepicker__month-option:hover {
  background-color: #ccc;
}

.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming {
  border-bottom-color: #b3b2b2;
}

.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous {
  border-top-color: #b3b2b2;
}

.react-datepicker__year-option--selected,
.react-datepicker__month-option--selected {
  position: absolute;
  left: 15px;
}

.react-datepicker__close-icon {
  background-color: transparent;
  border: 0;
  cursor: pointer;
  display: inline-block;
  height: 0;
  outline: 0;
  padding: 0;
  vertical-align: middle;
}

.react-datepicker__close-icon::after {
  background-color: #216ba5;
  border-radius: 50%;
  bottom: 0;
  box-sizing: border-box;
  color: #fff;
  content: "\00d7";
  cursor: pointer;
  font-size: 12px;
  height: 16px;
  width: 16px;
  line-height: 1;
  margin: -8px auto 0;
  padding: 2px;
  position: absolute;
  right: 7px;
  text-align: center;
  top: 50%;
}

.react-datepicker__today-button {
  background: #f0f0f0;
  border-top: 1px solid #aeaeae;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  padding: 5px 0;
  clear: left;
}

.react-datepicker__portal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  left: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 2147483647;
}

.react-datepicker__portal .react-datepicker__day-name,
.react-datepicker__portal .react-datepicker__day {
  width: 3rem;
  line-height: 3rem;
}

@media (max-width: 400px), (max-height: 550px) {
  .react-datepicker__portal .react-datepicker__day-name,
  .react-datepicker__portal .react-datepicker__day {
    width: 2rem;
    line-height: 2rem;
  }
}

.react-datepicker__portal .react-datepicker__current-month {
  font-size: 1.44rem;
}

.react-datepicker__portal .react-datepicker__navigation {
  border: 0.81rem solid transparent;
}

.react-datepicker__portal .react-datepicker__navigation--previous {
  border-right-color: #ccc;
}

.react-datepicker__portal .react-datepicker__navigation--previous:hover {
  border-right-color: #b3b2b2;
}

.react-datepicker__portal .react-datepicker__navigation--next {
  border-left-color: #ccc;
}

.react-datepicker__portal .react-datepicker__navigation--next:hover {
  border-left-color: #b3b2b2;
}

.date-picker-container {
  position: relative;
  .fa {
    position: absolute;
    top: 9px;
    right: 6px;
    z-index: -1;
  }
}

	padding:40px;

	input[type=text], textarea {
		display:block;
		min-width: 400px;
		max-width: 100%;
	}

	.bg__def__actions {
		margin-top: 20px;
		margin-left: 130px;
	}

	.bg__def__validation-error {
		background-color: #f26c50;
		color: #fff;
		height: 3.3rem;
		margin-bottom: 6px;
		padding: 6px 10px;
	}

	.react-datepicker__navigation {
		background: none;
		line-height: 1.7rem;
		text-align: center;
		cursor: pointer;
		position: absolute;
		top: 10px;
		width: 0;
		padding: 0;
		border: 0.45rem solid transparent;
		z-index: 1;
		height: 10px;
		width: 10px;
		text-indent: -999em;
		overflow: hidden;
		&--previous {
			left: 10px;
			border-right-color: #ccc;
		}
		&--next {
			right: 10px;
			border-left-color: #ccc;
		}
	}
}
.bg__entry-table{

   .tools{
    background-color: $clGrey;
    padding: 0px 10px;
    display: flex;

    &:after{
      clear:both;
      content: "";
      display: table;
    }
    
    .left{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      flex-wrap: wrap;
      float:left;
      flex: 1 1 0;
    }    

    .filter-container{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      align-items: center;      
    }

    h3{
      display: inline-block;
      padding-right: 10px;
      padding-top: 7px;
      padding-bottom: 7px;
      border-right: 1px solid $clDarkGrey;
      position: relative;
      margin: 10px 0;
      min-width: 60px;

      &:after{
        content:"";
        position:absolute;
        right: -8px;
        top: 50%;
        margin-top: -3px;
        border: 4px solid transparent;
        border-left: 4px solid $clDarkGrey;
      }
    }

    label{
      vertical-align: middle;
      padding: 10px 10px 10px 5px;
    }

    input, input[type=checkbox], select{
      vertical-align: middle;
      margin-left: 20px;
    }

    input[type="text"]{
      border-radius: 2px;
      padding: 5px;
      margin-bottom: 0px;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
    }

    input.search{
      background-image: $iconSearchUrl;
      background-position: center right 10px;
      background-repeat: no-repeat;
      padding-right: 30px;
    }

   select{
    // webkit only
    @media screen and (-webkit-min-device-pixel-ratio:0) {  
      border-color: $clGreyTint;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
      border-radius: 2px;
      background-color: #fff;  
      &:disabled{
        background-color: $clGrey;
      }
    }
    max-width: 160px;
    
    padding: 5px;
  }
}

  .modal{
  background-color: rgba($clDark,0.8);
  display: block;
  height: 100%;
  left: 0;
  overflow-y: scroll;
  position: fixed;
  top: 0;
  width: 100%;

  .container{
    position: relative;
    background-color: $clWhite;
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
    margin: 40px auto;
    padding: 30px;
    height: calc(100% - 80px);
    box-sizing: border-box;
    padding: 0;

    iframe{
      width: 100%;
      height: 100%;        
    }

    .close{
      background-color: rgba($clDark, 0.5);
      background-image: $iconCrossUrl;
      background-position: center right 15px;
      background-repeat: no-repeat;
      background-size: 20px;
      color: $clWhite;
      font-family: $fontHeading;
      cursor: pointer;    
      display: block;
      height: 40px;
      line-height: 40px;
      opacity: 0.8;
      position: absolute;
      right: 0;
      text-shadow: none;
      text-transform: uppercase;
      top: -40px;
      width: 90px;
      font-size: 15px;
      
      &:hover{
        opacity: 1.0;
      }
    }

  }

}

  .error{
    padding:10px;
  }

  table{

    &.access{
      text-transform: capitalize;
    }
  }
}

// Helpers
.bg__bulk-actions{
  position: fixed;
  bottom: -45px;
  left: 0;
  width: 100%;
  height: 45px;
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
  background-color: white;
  padding: 5px 10px;
  box-sizing: border-box;
  z-index: 10;

  .btn{
    margin: 0 0 0 10px;
  }

  animation: slide 0.5s forwards;
}

@keyframes slide {
    0% { bottom: -45px; }
}

@keyframes slide {
    100% { bottom: 0; }
}
.bg__pagination{
  text-align: center;
  list-style: none;
  user-select: none;
  padding: 0;
  margin-top: 20px;
  li{
    display: inline-block;
    min-width: 40px;
    height: 40px;
    line-height: 40px;
    margin: 0 2px;
    cursor: pointer;
    transition: background-color 0.2s ease-out;
    text-align: center;
    background-color: $clGrey;
    border-radius: 2px;

    &.active,&.active:hover{
      background-color: $clGreyTint;
    }

    &:hover{
      background-color: $clGreyTint;
    }

    &.prev, &.next{
      font-size: 0;
      background-position: center;
      background-repeat: no-repeat;
    }

    &.prev{
      background-image: $arrowLeftDarkUrl;
    }

    &.next{
      background-image: $arrowRightDarkUrl;
    }
  }
}
// Nasty use of !important but necessary to customize the tooltip
// https://www.npmjs.com/package/react-tooltip
.bg__custom-queryTooltip {
  z-index: 9999 !important;

  h3 {
    font-size: 20px !important;
    padding-bottom: 10px !important;
  }
  padding: 30px !important;
  background-color: rgba(0,0,0, .9) !important;

  ul {
    li {
      padding-left: 20px !important;
    }
  }
  .bg__selectedFacet-list {
    padding-left: 10px;
  }
  .bg_queryDetails-wrapper {
    padding: 10px 0;
  }
}

.fa-info-query {
  content: $iconAnnotateAltUrl !important;
  width: 30px;
  height: 30px;
  margin-right: 10px;
}
	}

}
@keyframes slideInFromLeft {
	0% {
		transform: translateY(100%);
	}
	100% {
		transform: translateY(0);
	}
}

.bg__single-search-recipe {
	/* Restyle buttons to new format */
	.btn {
		text-transform: uppercase;
		font-weight: 400px;
		font-size: 0.96em;
		font-family: $fontHeading;
		transition: background-color $transition;

		&.btn-secondary {
			background-color: $clSecondary;
			color: white;

			&:hover {
				background-color: darken($clSecondary, 8%);
			}
		}
	}

	.select-all {
		@include checkbox();
		margin-top: 6px;
		margin-left: 3px;
	}

	.table-actions-header {
		background-color: white;
		border-top: 1px solid $clGreyTint;
		border-bottom: 1px solid $clGreyTint;
		margin: 5px 0 0 2px;
		min-height: 53px;
		padding: 10px 5px 10px 0;

		.table-actions {
			float: left;
			.btn {
				margin-right: 2px;
				.fa-bookmark {
					font-weight: bold;
					&:before {
						margin-right: 6px;
					}
				}
			}
		}

		&.bookmarked-results {
			background-color: transparent;
			margin: 0 0 0 6px;
			padding: 0;
			animation: 0.6s ease-in 0s 1 slideInFromLeft;
			.header-selected-items {
				background-color: $clPrimary;
				color: white;
				margin: 0;
				padding: 7px 7px 7px 20px;
				.fa-remove {
					float: right;
					padding: 0 10px;
				}
				.fa-remove:hover {
					cursor: pointer;
				}
			}
		}

		.btn-default:hover {
			background-color: $clGreyTint;
		}

		.btn-default.active {
			background-color: $clGrey;
		}
	}

	.bg__paging {
		.btn-default.active {
			background-color: $clPrimary;
			color: white;
		}
	}

	.alert {
		margin-top: 10px;
	}

	.table-actions-footer {
		padding: 10px;
		text-align: center;
	}
	.bg__ssr__result-list {
		margin-top: 13px;
		width: 72%;
		margin-left: 28%;
		@media screen and (max-width: $break-medium-result-list) {
			width: 100%;
			margin-left: 0;
		}
	}
	.table-actions > .bookmark-dropdown-menu {
		display: inline-block;
		margin-right: 5px;

		.dropdown-toggle {
			color: white;
			font-family: $fontHeading;
			font-weight: bold;
			background-color: $clPrimary;
			span {
				margin-left: 4px;
				margin-right: 4px;
			}
		}

		.dropdown-menu {
			min-width: 200px;
			padding:0;
			border: 1px solid $clGreyTint;
			button {
				background-color: white;
				text-align: left;
				width: 100%;
				border: 0;
				color: black;
				padding: 10px;
				border-bottom: 1px solid $clGreyTint;
				&:hover {
					background-color: $clGrey;
				}
			}
		}
	}
	.selected-items {
		background-color: $clGrey;
		border-radius: 5px;
		margin-bottom: 12px;
		max-height: 1000px;
		position: relative;
		overflow-y: auto;

		h4 {
			font-size: 14px;
		}
		.snippet_description {
			display: none;
		}
	}

	.bg__ssr__tutorial {
		margin-top: 15px;
		margin-bottom: 10px;
		border-radius: 5px;
		border: 1px solid mix(white, $clPrimary, 70%);
		background-color: mix(white, $clPrimary, 90%);
		padding: 10px;
		text-align: center;
		line-height: 25px;
		span {
			cursor: pointer;
			margin-left: 10px;
			background-color: $clPrimary;
			display: inline-block;
			vertical-align: top;
			width: 25px;
			height: 25px;
			line-height: 24px;
			color: white;
			font-weight: bold;
			font-family: $fontHeading;
			vertical-align: center;
			font-size: 1.3em;
		}
	}

	#query-saved__modal {
		.bg__workspace-queries-link {
			border-radius: 2px;
			min-width: 30px;
			height: 28px;
			vertical-align: top;
			background-image: $iconLinkUrl;
			background-repeat: no-repeat;
			margin-top: 6px;
			padding-left: 30px;
			transition: opacity $transition;
			background-size: 18px;
			opacity: 0.7;
			&:hover {
				opacity: 1.0;
			}
		}
	}
}


//import the workspace, which overrides the bootstrap styling
.bg__no-bootstrap-custom-styling {
    // General styling
$colors: "primary" $clPrimary, "primary-alt" $clPrimaryAlt, "secondary" $clSecondary, "dark" $clDark, "dark-grey" $clDarkGrey, "grey" $clGrey, "grey-tint" $clGreyTint, "white" $clWhite;


@each $color in $colors {
  .background-color-#{nth($color, 1)}{
      background-color: nth($color, 2);
  }
}


// Maven Pro: Medium
@import url('https://fonts.googleapis.com/css?family=Maven+Pro:500,700');

// Open Sans: Regular/Bold
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');


div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  //font: inherit;
  vertical-align: middle;
  text-align: inherit;
  border-radius: 0;
}

// HTML5 display-role reset for older browsers
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote {
  &:before, &:after {
    content: "";
    content: none;
  }
}

q {
  &:before, &:after {
    content: "";
    content: none;
  }
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

input, input[type=checkbox], input[type=radio]{
  vertical-align: middle;
}


body{
  padding:0;
  margin:0;
  font-family: $fontBody;
  font-size: 13.5px;
}

/**
* Content
*/

h1,h2,h3,h4,h5{
 font-family: $fontHeading;
 font-weight: 500;
 line-height: 1.1em;
}

h1{
  font-size: 25px;
}

h2{
  font-size: 20px;
}

h3{
  font-size: 15px;
}

h4{
  font-size: 13px;
}

p{
  line-height: 1.5em;
}

/**
* Links
*/

.link, .link:visited{
   color: $clPrimary;
}

.link:hover{
  color: lighten($clPrimary, 10);
}

.link:active{
   color: $clPrimaryAlt;
}


/**
* Buttons
*/

.btn{
  border-radius: 2px;
  cursor: pointer;
  display: inline-block;
  font-family: $fontHeading;
  font-size: 0.96em;
  text-transform: uppercase;
  text-decoration: none;
  height: 35px;
  padding: 0 45px 0 30px;
  box-sizing: border-box;
  line-height: 35px;
  box-shadow: 0 2px 2px rgba(0,0,0,0.1);
  background-image: $arrowRightDarkUrl;
  background-position: center right 10px;
  background-repeat: no-repeat;
  margin: 10px;
  background-color: $clGrey;
  color: $clDark;
  border-width: 0;

  &:hover{
    background-color: lighten($clGrey, 5);
    box-shadow: 0 3px 3px rgba(0,0,0,0.1);
  }

  &.primary{
    background-color: $clPrimary;
    color: $clWhite;
    background-image: $arrowRightWhite40Url;
    box-shadow: 0 2px 2px rgba(0,0,0,0.2);

    &:hover{
      background-color: lighten($clPrimary, 5);
    }

    &.plus{
      background-image: $iconPlusUrl;
      background-size: 12px;
    }

  }

  &.plus{
    background-image: $iconPlusGreyUrl;
    background-size: 12px;
  }

  &.white{
    background-color: $clWhite;
    &:hover{
      background-color: $clWhite;
      opacity: 0.9;
    }
  }

  &.blank{
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    padding: 0 30px;

    &:hover{
      background-color: transparent;
      opacity: 0.9;
    }

    &.warning:hover{
      color: $clSecondary;
      opacity: 1;
    }
  }
}

/**
* Forms
*/

.label{
  color: $clPrimary;
  text-transform: uppercase;
  display: block;
  font-size: 0.96em;
  font-family: $fontHeading;
  font-weight: 500;
  margin-bottom: 10px;
}

input[type=text], textarea{
  border: 1px solid $clGreyTint;
  border-left-width: 2px;
  padding: 6px 10px;
  border-radius: 2px;
  font-family: $fontBody;
  min-width: 200px;
  margin-bottom: 15px;
  transition: border $transition;

  &:focus{
    border-left: 2px solid $clPrimary;
  }
}


input, textarea, select{
  outline-color: $clPrimary;
}


textarea{
  min-width: 400px;
  min-height: 200px;
}

/* Page layout */

.content{
  position: relative;
  max-width: $maxPageWidth;
  margin: auto;
  padding: $contentPadding;
  box-sizing: border-box;

  .text-body{
    max-width: $maxTextBodyWidth;
    margin: auto;

    p{
      max-width: 500px;
    }
  }

}

@mixin infoBanner() {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  max-width: $maxTextBodyWidth;
  padding: 0;
  
  // Hide animation
  overflow: hidden;
  &.hidden {
    animation: infobanner-content-hide 0.4s forwards ease-out;
  }
  
  > img {
    width: 176px;
    margin: 30px;
  }
  
  .info {
    margin: 30px;
    flex: 1;
    min-width: 250px;
    max-width: 100vw;
  }
  
  .actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
}

@keyframes infobanner-content-hide {
    0% {
      max-height: 400px;
    }
    100% {
      max-height: 0px;
      opacity: 0;
      display: none;
    }
}

@mixin image-wrap-shadow() {
  position: relative;
  
  // Shadow
  &::before {
    content: '';
    position: absolute;
    width: 70%;
    left: 15%;
    height: 20%;
    bottom: 5px;
    border-radius: 100%;
    box-shadow: 0 10px 40px rgba(0,0,0, 0.15);
  }
  
  img {
    position: relative;
    width: 100%;
  }
}

// Workspace -- General
.bg__sort-table{

  table{
    margin: 0;
    padding:0;
    border: 0;
    border-collapse: collapse;
    min-width: 100%;

    input[type=checkbox]{
      margin-left: 10px;
    }

    thead{
      th{
        text-align: left;
        background-color: $clDark;
         border-bottom: 2px solid $clDark;
        padding: 10px 5px;
        padding-right: 15px;
        color: $clWhite;
        font-family: $fontHeading;
        font-size: 15px;
        font-weight: 400;

        &.sortable{
          cursor: pointer;
          &:hover{
            border-bottom: 2px solid $clDarkGrey;
          }

        }

        &.active{
          position: relative;
          padding-right: 15px;
          border-bottom: 2px solid $clSecondary;

          &:hover{
            border-bottom: 2px solid $clSecondary;
          }

          &:after{
            content: "";
            position: absolute;
            right: 5px;
            border-bottom: 7px solid $clWhite;
            border-left: 7px solid transparent;
            transform: rotate(45deg);
            margin-top: 5px;
          }

          &.desc:after{
            margin-top: 8px;
            transform: rotate(-135deg);
          }
        }
      }
    }


    tbody{
      &.loading{
        opacity: 0.3;
      }

      tr:nth-child(even) {
        background-color: $clGrey;
      }

      td{
        padding: 10px 5px;
        border-bottom: 1px solid $clGreyTint;
        max-width: 20%;
        max-width: 600px;
        /*white-space: nowrap;*/
        overflow: hidden;
        text-overflow: ellipsis;

        &.primary{
          a{
            font-weight: 600;
            text-decoration: none;
            color: $clDark;
            &:hover{
              text-decoration: underline;
            }
          }
        }

        &.number{
          text-align: right;
          padding-right: 8px;
        }

        &.smaller{
          font-size: 0.8em;
          color: $clDarkGrey;
        }

        .btn{
          margin: 0;
          &.blank{
            padding-left: 15px;
            padding-right: 15px;
          }
        }
      }

      .bg__copy-to-clipboard {
        background-image: none;
        border-radius: 6px;
        box-shadow: 0 1px 0px rgba(0, 0, 0, .1);
        padding: 0 0 0 14px;
      }

      .bg__copyToClipboardMSN {
        bottom: 0;
        color: $clOrange;
        font-weight: bold;
        margin-top: 30px;
        position: relative;
        text-align: center;
      }

      .bg__searchTerm {
        margin-left: 10px;
      }
    }
  }
}

// Workspace -- Projects
.bg__project-list-view {
  .info-bar{
  background-image: $iconProjectUrl;
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 40px;
  margin-bottom: 20px;
  h1{
    max-width: calc(100% - 150px);
    padding-top: 10px;
    margin: 0;
    margin-bottom: 5px;      
  }
  p{
    margin: 0;      
    display: inline-block;
  }
  .btn{
    float:right;
  }
}
}
.bg__project-edit, .bg__project-create{

  .info-bar{
  background-image: $iconProjectUrl;
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 40px;
  margin-bottom: 20px;
  h1{
    max-width: calc(100% - 150px);
    padding-top: 10px;
    margin: 0;
    margin-bottom: 5px;      
  }
  p{
    margin: 0;      
    display: inline-block;
  }
  .btn{
    float:right;
  }
}
   
  form{
    margin-left: 40px;

    input[type=text], textarea{
      display:block;
      min-width: 400px;
      max-width: 100%;
    }

    .actions{
      margin-top: 20px;
      margin-left: 160px;
    }

    input[type=checkbox]{
      margin-right: 10px;
    }
  }
}
.bg__project-view-wrapper{

  .info-bar{
  background-image: $iconProjectUrl;
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 40px;
  margin-bottom: 20px;
  h1{
    max-width: calc(100% - 150px);
    padding-top: 10px;
    margin: 0;
    margin-bottom: 5px;      
  }
  p{
    margin: 0;      
    display: inline-block;
  }
  .btn{
    float:right;
  }
}

  .info-bar{
    h2, p{
      max-width: 800px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .submenu{
    border-bottom: 1px solid $clGreyTint;
    margin-bottom: 20px;
    padding-left: 20px;

    a{
      font-size: 15px;
      font-family: $fontHeading;
      color: $clDark;
      padding: 10px 20px;
      display: inline-block;
      border-bottom: 3px solid white;
      margin-right: 1px;
      &:hover{
        background-color: $clGrey;
        border-bottom-color: $clDarkGrey;
        text-decoration: none;
      }

      &.active, &.active:hover{
        border-bottom-color: $clSecondary;
        background-color: $clGrey;
      }

      .count{
    display: inline-block;
    font-family: $fontHeading;
    float: right;
    margin-left: 15px;
    background-color: $clSecondary;
    color: $clWhite;
    border-radius: 25px;
    font-size: 0.8em;
    font-weight: bold;
    padding: 2px 4px 3px 4px;
    line-height: 13px;
    min-width: 18px;
    text-align: center;
    margin-top: 1px;
}
    }
  }


}
.bg__project-details-view{

  h2{
    margin: 40px 0;
  }

  .btn{
    float: right;
    margin-top: -60px;
  }

  ul.details{
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    li{
      padding-right: 10px;
      padding-bottom: 10px;
      min-width: 150px;
      max-width: 600px;
    }
  }
}
.bg__project-table{

   .tools{
    background-color: $clGrey;
    padding: 0px 10px;
    display: flex;

    &:after{
      clear:both;
      content: "";
      display: table;
    }
    
    .left{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      flex-wrap: wrap;
      float:left;
      flex: 1 1 0;
    }    

    .filter-container{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      align-items: center;      
    }

    h3{
      display: inline-block;
      padding-right: 10px;
      padding-top: 7px;
      padding-bottom: 7px;
      border-right: 1px solid $clDarkGrey;
      position: relative;
      margin: 10px 0;
      min-width: 60px;

      &:after{
        content:"";
        position:absolute;
        right: -8px;
        top: 50%;
        margin-top: -3px;
        border: 4px solid transparent;
        border-left: 4px solid $clDarkGrey;
      }
    }

    label{
      vertical-align: middle;
      padding: 10px 10px 10px 5px;
    }

    input, input[type=checkbox], select{
      vertical-align: middle;
      margin-left: 20px;
    }

    input[type="text"]{
      border-radius: 2px;
      padding: 5px;
      margin-bottom: 0px;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
    }

    input.search{
      background-image: $iconSearchUrl;
      background-position: center right 10px;
      background-repeat: no-repeat;
      padding-right: 30px;
    }

   select{
    // webkit only
    @media screen and (-webkit-min-device-pixel-ratio:0) {  
      border-color: $clGreyTint;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
      border-radius: 2px;
      background-color: #fff;  
      &:disabled{
        background-color: $clGrey;
      }
    }
    max-width: 160px;
    
    padding: 5px;
  }
}

  .error{
    padding:10px;
  }

  table{
    .description{
      a{
        text-decoration: none;
        color: black;
      }
      max-width: 270px;
      white-space: normal;
    }

    .bookmark-icon{
      background-image: $iconBookmarkWhiteUrl;
      background-repeat: no-repeat;
      background-position: center left;
      background-size: 15px;
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-right: 4px;
    }

    .collaborators{
      display: block;
      color: $clPrimaryAlt;
      text-transform: uppercase;
      font-size: 12px;
      font-family: $fontHeading;
    }

    .access{
      text-transform: uppercase;
    }

    .actions{
      width: 130px;
      .btn{
        padding-left: 15px;
        padding-right: 35px;
      }
    }
  }
}

.bg__project-session-view{

   .tools{
    background-color: $clGrey;
    padding: 0px 10px;
    display: flex;

    &:after{
      clear:both;
      content: "";
      display: table;
    }
    
    .left{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      flex-wrap: wrap;
      float:left;
      flex: 1 1 0;
    }    

    .filter-container{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      align-items: center;      
    }

    h3{
      display: inline-block;
      padding-right: 10px;
      padding-top: 7px;
      padding-bottom: 7px;
      border-right: 1px solid $clDarkGrey;
      position: relative;
      margin: 10px 0;
      min-width: 60px;

      &:after{
        content:"";
        position:absolute;
        right: -8px;
        top: 50%;
        margin-top: -3px;
        border: 4px solid transparent;
        border-left: 4px solid $clDarkGrey;
      }
    }

    label{
      vertical-align: middle;
      padding: 10px 10px 10px 5px;
    }

    input, input[type=checkbox], select{
      vertical-align: middle;
      margin-left: 20px;
    }

    input[type="text"]{
      border-radius: 2px;
      padding: 5px;
      margin-bottom: 0px;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
    }

    input.search{
      background-image: $iconSearchUrl;
      background-position: center right 10px;
      background-repeat: no-repeat;
      padding-right: 30px;
    }

   select{
    // webkit only
    @media screen and (-webkit-min-device-pixel-ratio:0) {  
      border-color: $clGreyTint;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
      border-radius: 2px;
      background-color: #fff;  
      &:disabled{
        background-color: $clGrey;
      }
    }
    max-width: 160px;
    
    padding: 5px;
  }
}

  .error{
    padding:10px;
  }

}
.bg__project-session-create{
  .info-bar{
  background-image: $iconProjectUrl;
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 40px;
  margin-bottom: 20px;
  h1{
    max-width: calc(100% - 150px);
    padding-top: 10px;
    margin: 0;
    margin-bottom: 5px;      
  }
  p{
    margin: 0;      
    display: inline-block;
  }
  .btn{
    float:right;
  }
}
   .tools{
    background-color: $clGrey;
    padding: 0px 10px;
    display: flex;

    &:after{
      clear:both;
      content: "";
      display: table;
    }
    
    .left{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      flex-wrap: wrap;
      float:left;
      flex: 1 1 0;
    }    

    .filter-container{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      align-items: center;      
    }

    h3{
      display: inline-block;
      padding-right: 10px;
      padding-top: 7px;
      padding-bottom: 7px;
      border-right: 1px solid $clDarkGrey;
      position: relative;
      margin: 10px 0;
      min-width: 60px;

      &:after{
        content:"";
        position:absolute;
        right: -8px;
        top: 50%;
        margin-top: -3px;
        border: 4px solid transparent;
        border-left: 4px solid $clDarkGrey;
      }
    }

    label{
      vertical-align: middle;
      padding: 10px 10px 10px 5px;
    }

    input, input[type=checkbox], select{
      vertical-align: middle;
      margin-left: 20px;
    }

    input[type="text"]{
      border-radius: 2px;
      padding: 5px;
      margin-bottom: 0px;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
    }

    input.search{
      background-image: $iconSearchUrl;
      background-position: center right 10px;
      background-repeat: no-repeat;
      padding-right: 30px;
    }

   select{
    // webkit only
    @media screen and (-webkit-min-device-pixel-ratio:0) {  
      border-color: $clGreyTint;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
      border-radius: 2px;
      background-color: #fff;  
      &:disabled{
        background-color: $clGrey;
      }
    }
    max-width: 160px;
    
    padding: 5px;
  }
}

  .btn{
    margin-left: 0;
  }

}

.bg__project-queries-view {

}
.bg__project-queries-table{

   .tools{
    background-color: $clGrey;
    padding: 0px 10px;
    display: flex;

    &:after{
      clear:both;
      content: "";
      display: table;
    }
    
    .left{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      flex-wrap: wrap;
      float:left;
      flex: 1 1 0;
    }    

    .filter-container{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      align-items: center;      
    }

    h3{
      display: inline-block;
      padding-right: 10px;
      padding-top: 7px;
      padding-bottom: 7px;
      border-right: 1px solid $clDarkGrey;
      position: relative;
      margin: 10px 0;
      min-width: 60px;

      &:after{
        content:"";
        position:absolute;
        right: -8px;
        top: 50%;
        margin-top: -3px;
        border: 4px solid transparent;
        border-left: 4px solid $clDarkGrey;
      }
    }

    label{
      vertical-align: middle;
      padding: 10px 10px 10px 5px;
    }

    input, input[type=checkbox], select{
      vertical-align: middle;
      margin-left: 20px;
    }

    input[type="text"]{
      border-radius: 2px;
      padding: 5px;
      margin-bottom: 0px;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
    }

    input.search{
      background-image: $iconSearchUrl;
      background-position: center right 10px;
      background-repeat: no-repeat;
      padding-right: 30px;
    }

   select{
    // webkit only
    @media screen and (-webkit-min-device-pixel-ratio:0) {  
      border-color: $clGreyTint;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
      border-radius: 2px;
      background-color: #fff;  
      &:disabled{
        background-color: $clGrey;
      }
    }
    max-width: 160px;
    
    padding: 5px;
  }
}

  .error{
    padding:10px;
  }

}

.bg__project-data-view{
   .tools{
    background-color: $clGrey;
    padding: 0px 10px;
    display: flex;

    &:after{
      clear:both;
      content: "";
      display: table;
    }
    
    .left{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      flex-wrap: wrap;
      float:left;
      flex: 1 1 0;
    }    

    .filter-container{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      align-items: center;      
    }

    h3{
      display: inline-block;
      padding-right: 10px;
      padding-top: 7px;
      padding-bottom: 7px;
      border-right: 1px solid $clDarkGrey;
      position: relative;
      margin: 10px 0;
      min-width: 60px;

      &:after{
        content:"";
        position:absolute;
        right: -8px;
        top: 50%;
        margin-top: -3px;
        border: 4px solid transparent;
        border-left: 4px solid $clDarkGrey;
      }
    }

    label{
      vertical-align: middle;
      padding: 10px 10px 10px 5px;
    }

    input, input[type=checkbox], select{
      vertical-align: middle;
      margin-left: 20px;
    }

    input[type="text"]{
      border-radius: 2px;
      padding: 5px;
      margin-bottom: 0px;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
    }

    input.search{
      background-image: $iconSearchUrl;
      background-position: center right 10px;
      background-repeat: no-repeat;
      padding-right: 30px;
    }

   select{
    // webkit only
    @media screen and (-webkit-min-device-pixel-ratio:0) {  
      border-color: $clGreyTint;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
      border-radius: 2px;
      background-color: #fff;  
      &:disabled{
        background-color: $clGrey;
      }
    }
    max-width: 160px;
    
    padding: 5px;
  }
}

  .tools{
    background-color: $clWhite;

    .radiogroup{
      display: inline-block;
      label,input{
        cursor: pointer;
      }
    }

    .view{
      margin-bottom: 5px;
    }

    .export-button{
      float:right;
      margin-top: -45px;
      margin-right: 0;
      margin-bottom: 0;
    }

    .type-label{
      padding-left: 10px;
    }

    .type-select{
      margin-left: 0px;
    }
  }
}
.bg__nested-table{
  
  h2{
    padding-bottom: 30px;
    padding-top: 15px;

    .fold{      
      margin-left: 20px;
      margin-top: -2px;
      display: inline-block;
      font-size: 13px;
      
      .filter{
        float: right;
        padding: 10px;      

        span{
          text-decoration: underline;
          &:hover{
            cursor: pointer;
            opacity: 0.8;
          }
        }
      }

      select{
        font-family: $fontBody;
        float:right;
        margin-top: 5px;
        font-weight: normal;
        font-size: 14px;
        padding: 6px 10px;

        // webkit only
        @media screen and (-webkit-min-device-pixel-ratio:0) {  
          border-color: $clGreyTint;
          box-shadow: 0 2px 2px rgba(0,0,0,0.1);
          border-radius: 2px;
          background-color: #fff;  
          &:disabled{
            background-color: $clGrey;
          }
        }
      }
      
    }
  }

  .item-row{
    margin: 10px 0;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    border-radius: 2px;
    border: 1px solid $clGreyTint;

    &:first-child{
      .item{
        .info{
          &>li{
            .label{
              margin-top: -26px;
              display: block;
              @media screen and (max-width: $break-small) {
                margin-top: 0px;
              }

            }
          }
        }
      }
    }

    .item{
      width: 100%;
      list-style: none;
      position: relative;
      
      display: flex;
      justify-content: flex-start;
      align-items: stretch;
      align-content: stretch;


      .selector{
        flex-shrink: 0;
        flex-basis: 30px;
        input{
          margin-left: 10px;
        }

        .delete{
          background-image: $iconDeleteUrl;
          background-repeat: no-repeat;
          background-position: center center;
          background-size: 18px;
          position: absolute;
          left: 0;
          bottom: 0;
          width: 30px;
          height: 30px;
          cursor: pointer;
          &:hover{
            opacity: 0.8;
          }
        }
      }



      .info{
        max-width: calc(100% - 130px);
        display: flex;
        flex-grow:2;
        box-sizing: border-box;
        vertical-align: top;
        padding-left: 10px;    
        @media screen and (max-width: $break-small) {
          flex-wrap: wrap;          
        }

        li{
          padding: 5px 10px 10px 10px;
          min-height: 50px;
          min-width: 120px;
          flex: 1 1 0;          
          
          .label{
            display: none;
            @media screen and (max-width: $break-small) {
              display: block;
            }
          }
          p{
            overflow-wrap: break-word;
            word-wrap: break-word;
          }
          
          &.primary{
            p{
              font-weight: bold;
            }
          }
        }

      }

      .actions{
        min-width:100px;
        min-height: 65px;
        flex-shrink: 0;

        .btn.primary{
          margin: 7px;
          padding-left: 17px;
          padding-right: 30px;
          margin-right: 0px;
        }

        .row-menu{
          margin-top: 7px;          
        }
        .sublevel-button-container{
          position: absolute;
          right: 0;
          bottom: 0;

          .sublevel-button{
            display: inline-block;
            float:right;  
            background-color: $clGreyTint;
            color: $clDark;
            text-transform: uppercase;
            font-family: $fontHeading;
            padding: 0px 30px 0px 0px;
            background-position: center right 10px;
            background-repeat: no-repeat;
            background-image: $arrowDownDarkUrl;
            cursor: pointer;
            box-sizing: border-box;
            transition: background-color 0.2s ease-out;

            &.lowered{
              background-color: darken($clGreyTint, 10);
              &.facet:before{
                border-right: 15px solid darken($clGreyTint, 10);
                border-bottom: 15px solid darken($clGreyTint, 10);
              }
            }

            &:hover{
              background-color: darken($clGreyTint, 5);
              &.facet:before{
                border-right: 15px solid darken($clGreyTint, 5);
                border-bottom: 15px solid darken($clGreyTint, 5);
              }
            }

             &.active{
              background-color: $clGreyTint;
              &.facet:before{
                border-right: 15px solid $clGreyTint;
                border-bottom: 15px solid $clGreyTint;
              }
            }
            
            &.facet:before{
              content: " ";
              position:absolute;
              left: -30px;
              top: 0px;
              border-top: 15px solid transparent;
              border-left: 15px solid transparent;
              border-right: 15px solid $clGreyTint;
              border-bottom: 15px solid $clGreyTint;
              transition: border-color 0.2s ease-out;
            }

            &.active{
              background-image: $arrowUpDarkUrl;
              &:hover{
                background-color: darken($clGreyTint, 3);
                &.facet:before{
                  border-right: 15px solid darken($clGreyTint, 3);
                  border-bottom: 15px solid darken($clGreyTint, 3);
                }
              }
            }

            .icon{
              display: inline-block;
              background-repeat: no-repeat;
              background-position: center center;          
              
              height: 30px;
            }
            .count{
    display: inline-block;
    font-family: $fontHeading;
    float: right;
    margin-left: 15px;
    background-color: $clSecondary;
    color: $clWhite;
    border-radius: 25px;
    font-size: 0.8em;
    font-weight: bold;
    padding: 2px 4px 3px 4px;
    line-height: 13px;
    min-width: 18px;
    text-align: center;
    margin-top: 1px;
}

            .count{
              margin-left: 8px;
              margin-top: 6px;
            }
            
            &.zero {
              &.lowered{
                background-color: $clGreyTint;
              }
              opacity:0.3;

              &.active{
                opacity: 1;
              }

              .count{
                background-color: $clDarkGrey;        
              }
            }
          }
        }
      }
    }

    .sublevel{
      background-color: $clGreyTint;
      padding: 10px 20px;
      table{
        width: 100%;
        max-width: 100%;
        th{
          text-transform: uppercase;
          font-family: $fontHeading;
          padding: 5px 5px 10px 0;
        }

        td{
          padding: 5px 5px 5px 0;
          border-top: 1px solid darken($clGreyTint,3);
          max-width: 200px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          &.bold{
            font-weight: bold;
          }
        }

      }
    }
  }

  .groups{
    span{
      display: inline-block;
      background-color: $clGrey;
      text-transform: uppercase;
      font-size: 11px;
      margin: 3px;
      border-radius: 2px;          
      padding: 1px 4px; 
    }
  }
}
.bg__bookmark-table{
  .results{
  .sort{
    margin-top: 10px;
    float:right;
    display: flex;
    align-items: center;
    h3{
      margin-right: 10px;
    }
    select{
      padding: 6px 10px;
      // webkit only
      @media screen and (-webkit-min-device-pixel-ratio:0) {  
        border-color: $clGreyTint;
        box-shadow: 0 2px 2px rgba(0,0,0,0.1);
        border-radius: 2px;
        background-color: #fff;  
        &:disabled{
          background-color: $clGrey;
        }
      }
    }
  }


  h2,h3{
    text-transform: capitalize;
    margin: 20px 0;    
    input{
      margin-left: 10px;
      margin-right: 10px;
      vertical-align: middle;
      margin-top: 0;
    }

    .count{
    display: inline-block;
    font-family: $fontHeading;
    float: right;
    margin-left: 15px;
    background-color: $clSecondary;
    color: $clWhite;
    border-radius: 25px;
    font-size: 0.8em;
    font-weight: bold;
    padding: 2px 4px 3px 4px;
    line-height: 13px;
    min-width: 18px;
    text-align: center;
    margin-top: 1px;
}
    .count{
      background-color: $clPrimary;
      float: none;
      margin-left: 3px;
      font-size: 12px;
    }
  }

  h2{
    font-size: 18px;    
  }

  h3{
    font-size: 15px;
  }

}

  .modal{
  background-color: rgba($clDark,0.8);
  display: block;
  height: 100%;
  left: 0;
  overflow-y: scroll;
  position: fixed;
  top: 0;
  width: 100%;

  .container{
    position: relative;
    background-color: $clWhite;
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
    margin: 40px auto;
    padding: 30px;
    height: calc(100% - 80px);
    box-sizing: border-box;
    padding: 0;

    iframe{
      width: 100%;
      height: 100%;        
    }

    .close{
      background-color: rgba($clDark, 0.5);
      background-image: $iconCrossUrl;
      background-position: center right 15px;
      background-repeat: no-repeat;
      background-size: 20px;
      color: $clWhite;
      font-family: $fontHeading;
      cursor: pointer;    
      display: block;
      height: 40px;
      line-height: 40px;
      opacity: 0.8;
      position: absolute;
      right: 0;
      text-shadow: none;
      text-transform: uppercase;
      top: -40px;
      width: 90px;
      font-size: 15px;
      
      &:hover{
        opacity: 1.0;
      }
    }

  }

}

  &.loading{
    .bg__nested-table{
      opacity: 0.5;
    }
  }
}
.bookmarks-custom-styles {
  margin: 0 ;
  padding: 30% ;
  text-align: center ;

  h3 {
    font-size: 26px;
  }
}
.bg__bookmark-row.item-row{
  .item{
    .image{
      flex-basis: 132px;
      height: 88px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      flex-shrink: 0;
      cursor: pointer;
    }

    .info {
      flex-wrap: wrap;
      li{
        &.primary p{
          cursor: pointer;
          &:hover{
            text-decoration: underline;
          }
        }

        &.content-date{
          min-width: 100px;
          max-width: 100px;
        }

        &.content-media{
          min-width: 100px;
          max-width: 100px;
        }
      }
    }

    .actions {
      .sublevel-button-container .sublevel-button{
        padding-left: 15px;
        border-left: 1px solid rgba(0,0,0,0.3);
        &.facet{
          padding-left: 0;
          border-left: 0;
        }

        .icon.annotation{
          width: 28px;
          background-size: 28px;
          background-image: $iconAnnotationUrl;
        }

        .icon.segment{
          margin-right: 3px;
          width: 20px;
          background-size: 20px;
          background-image: $iconSegmentUrl;
        }
      }
    }
  }

  .sublevel{
    table{
      width: 100%;
      tr{
          .time{
            width: 20%;
          }
          .type{
            width: 20%;       
            a{
              color: black;
            }
          }
          .details{
            width: 30%;
          }

          td{
            vertical-align: top;
            &.time{
              font-weight: bold;
            } 
            table{
              tr{
                &:first-child{
                  td{
                  border: 0;
                }
              }
            }
          }
        }
      }
    }
  }
}
.bg__annotation-table{
  .results{
  .sort{
    margin-top: 10px;
    float:right;
    display: flex;
    align-items: center;
    h3{
      margin-right: 10px;
    }
    select{
      padding: 6px 10px;
      // webkit only
      @media screen and (-webkit-min-device-pixel-ratio:0) {  
        border-color: $clGreyTint;
        box-shadow: 0 2px 2px rgba(0,0,0,0.1);
        border-radius: 2px;
        background-color: #fff;  
        &:disabled{
          background-color: $clGrey;
        }
      }
    }
  }


  h2,h3{
    text-transform: capitalize;
    margin: 20px 0;    
    input{
      margin-left: 10px;
      margin-right: 10px;
      vertical-align: middle;
      margin-top: 0;
    }

    .count{
    display: inline-block;
    font-family: $fontHeading;
    float: right;
    margin-left: 15px;
    background-color: $clSecondary;
    color: $clWhite;
    border-radius: 25px;
    font-size: 0.8em;
    font-weight: bold;
    padding: 2px 4px 3px 4px;
    line-height: 13px;
    min-width: 18px;
    text-align: center;
    margin-top: 1px;
}
    .count{
      background-color: $clPrimary;
      float: none;
      margin-left: 3px;
      font-size: 12px;
    }
  }

  h2{
    font-size: 18px;    
  }

  h3{
    font-size: 15px;
  }

}

  .type-list{
    margin-top: 10px;
    border-top: 2px solid $clGreyTint;
  }

  .modal{
  background-color: rgba($clDark,0.8);
  display: block;
  height: 100%;
  left: 0;
  overflow-y: scroll;
  position: fixed;
  top: 0;
  width: 100%;

  .container{
    position: relative;
    background-color: $clWhite;
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
    margin: 40px auto;
    padding: 30px;
    height: calc(100% - 80px);
    box-sizing: border-box;
    padding: 0;

    iframe{
      width: 100%;
      height: 100%;        
    }

    .close{
      background-color: rgba($clDark, 0.5);
      background-image: $iconCrossUrl;
      background-position: center right 15px;
      background-repeat: no-repeat;
      background-size: 20px;
      color: $clWhite;
      font-family: $fontHeading;
      cursor: pointer;    
      display: block;
      height: 40px;
      line-height: 40px;
      opacity: 0.8;
      position: absolute;
      right: 0;
      text-shadow: none;
      text-transform: uppercase;
      top: -40px;
      width: 90px;
      font-size: 15px;
      
      &:hover{
        opacity: 1.0;
      }
    }

  }

}

  &.loading{
    .bg__nested-table{
      opacity: 0.5;
    }
  }

  .type{
    font-weight: bold;
  }
}
.bg__annotation-row.item-row{
  .item{
    .classification{
      .vocabulary{
        width: 150px;
      }
    }

    .metadata{
      .template{
        width: 100px;
      }
    }

    .created{
      width: 100px;
    }  

    .actions{
      .row-menu{
        margin-top: 0px;          
      }
    }
    
    .icon.bookmark{
      width: 20px;
      background-size: 14px;
      background-image: $iconBookmarkUrl;
    }
  }

  .sublevel{
    td.actions{
      text-align: right;
      .btn{
        margin: 0;
      }
    }
  }
}

.row-menu{
  float:right;
  display: inline-block;
  width: 25px;
  height: 35px;
  cursor: pointer;
  text-align: center;
  cursor: pointer;
  z-index: 10;
  
  span{
    line-height: 35px;
    font-size: 1.1em;          
    font-weight: bold;    
  }

  ul{
    z-index: 10;
    display: none;
    margin-left: -40px;
    position: absolute;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    li{
      cursor: pointer;
      background-color: #fff;
      padding: 10px 15px;
      border-bottom: 1px solid #aaa;

      &:hover{
        background-color: $clPrimary;
        color: white;
      }

      &::last-child{
        border-bottom: 0;
      }
    }
  }

  &:hover{
    ul{
      display: block;
    }
  }
}

// Workspace -- Personal collections
.bg__collection-create {
	.info-bar{
  background-image: $iconProjectUrl;
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 40px;
  margin-bottom: 20px;
  h1{
    max-width: calc(100% - 150px);
    padding-top: 10px;
    margin: 0;
    margin-bottom: 5px;      
  }
  p{
    margin: 0;      
    display: inline-block;
  }
  .btn{
    float:right;
  }
}
}
.bg__collection-edit {
	.info-bar{
  background-image: $iconProjectUrl;
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 40px;
  margin-bottom: 20px;
  h1{
    max-width: calc(100% - 150px);
    padding-top: 10px;
    margin: 0;
    margin-bottom: 5px;      
  }
  p{
    margin: 0;      
    display: inline-block;
  }
  .btn{
    float:right;
  }
}
}
.bg__collection-form {
	
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow {
  margin-left: -8px;
  position: absolute;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before {
  box-sizing: content-box;
  position: absolute;
  border: 8px solid transparent;
  height: 0;
  width: 1px;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before {
  content: "";
  z-index: -1;
  border-width: 8px;
  left: -8px;
  border-bottom-color: #aeaeae;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle {
  top: 0;
  margin-top: -8px;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before {
  border-top: none;
  border-bottom-color: #f0f0f0;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before {
  top: -1px;
  border-bottom-color: #aeaeae;
}

.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow {
  bottom: 0;
  margin-bottom: -8px;
}

.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before {
  border-bottom: none;
  border-top-color: #fff;
}

.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before {
  bottom: -1px;
  border-top-color: #aeaeae;
}

.react-datepicker-wrapper {
  display: inline-block;
}

.react-datepicker {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  background-color: #fff;
  color: #000;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  display: inline-block;
  position: relative;
  width:20rem;
  height:21rem;
}

.react-datepicker__triangle {
  position: absolute;
  left: 50px;
}

.react-datepicker-popper {
  z-index: 10;
}

.react-datepicker-popper[data-placement^="bottom"] {
  margin-top: 10px;
  width: 20rem;
height:20rem;
}

.react-datepicker-popper[data-placement^="top"] {
  margin-bottom: 6px;
}

.react-datepicker-popper[data-placement^="right"] {
  margin-left: 8px;
}

.react-datepicker-popper[data-placement^="right"] .react-datepicker__triangle {
  left: auto;
  right: 42px;
}

.react-datepicker-popper[data-placement^="left"] {
  margin-right: 8px;
}

.react-datepicker-popper[data-placement^="left"] .react-datepicker__triangle {
  left: 42px;
  right: auto;
}

.react-datepicker__header {
  text-align: center;
  background-color: #f0f0f0;
  border-bottom: 1px solid #aeaeae;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
  padding-top: 8px;
  position: relative;
  width:20rem;
  font-size:1.2rem;
}

.react-datepicker__year-dropdown-container--select,
.react-datepicker__month-dropdown-container--select,
.react-datepicker__year-dropdown-container--scroll,
.react-datepicker__month-dropdown-container--scroll {
  display: inline-block;
  margin: 0 2px;
}

.react-datepicker__current-month {
  margin-top: 0;
  color: #000;
  font-weight: bold;
  font-size: 1.2rem;

}

.react-datepicker__navigation {
  line-height: 1.7rem;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 10px;
  width: 0;
  border: 0.55rem solid transparent;
  z-index: 1;
}

.react-datepicker__navigation--previous {
  left: 10px;
  border-right-color: #ccc;
}

.react-datepicker__navigation--previous:hover {
  border-right-color: #b3b2b2;
}

.react-datepicker__navigation--next {
  right: 10px;
  border-left-color: #ccc;
}

.react-datepicker__navigation--next:hover {
  border-left-color: #b3b2b2;
}

.react-datepicker__navigation--years {
  position: relative;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.react-datepicker__navigation--years-previous {
  top: 4px;
  border-top-color: #ccc;
}

.react-datepicker__navigation--years-previous:hover {
  border-top-color: #b3b2b2;
}

.react-datepicker__navigation--years-upcoming {
  top: -4px;
  border-bottom-color: #ccc;
}

.react-datepicker__navigation--years-upcoming:hover {
  border-bottom-color: #b3b2b2;
}

.react-datepicker__month-container {
  display: inline;
  float: left;
  width:20rem;
  height:20rem;
}

.react-datepicker__month {
  margin: 0.4rem;
  text-align: center;
}

.react-datepicker__week-number {
  color: #ccc;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}

.react-datepicker__week-number.react-datepicker__week-number--clickable {
  cursor: pointer;
}

.react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}

.react-datepicker__day-name,
.react-datepicker__day {
  color: #000;
  display: inline-block;
  width: 2.2rem;
  height:2rem;
  line-height: 1.9rem;
  text-align: center;
  margin: 0.166rem;
}

.react-datepicker__day {
  cursor: pointer;
}

.react-datepicker__day:hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}

.react-datepicker__day--today {
  font-weight: bold;
}

.react-datepicker__day--highlighted {
  border-radius: 0.3rem;
  background-color: #3dcc4a;
  color: #fff;
}

.react-datepicker__day--highlighted:hover {
  background-color: #32be3f;
}

.react-datepicker__day--highlighted-custom-1 {
  color: magenta;
}

.react-datepicker__day--highlighted-custom-2 {
  color: green;
}

.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}

.react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover {
  background-color: #1d5d90;
}

.react-datepicker__day--keyboard-selected {
  border-radius: 0.3rem;
  background-color: #2a87d0;
  color: #fff;
}

.react-datepicker__day--keyboard-selected:hover {
  background-color: #1d5d90;
}

.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) {
  background-color: rgba(33, 107, 165, 0.5);
}

.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range) {
  background-color: #f0f0f0;
  color: #000;
}

.react-datepicker__day--disabled {
  cursor: default;
  color: #ccc;
}

.react-datepicker__day--disabled:hover {
  background-color: transparent;
}

.react-datepicker__input-container {
  position: relative;
  display: inline-block;
  margin-left: 2px;
  .fa {
    position: absolute;
    top: 0;
    right: 6px;
    z-index: -1;
  }
  input {
    background: none;
    &:disabled {
      opacity: .6;
    }
  }
}

.react-datepicker__year-read-view,
.react-datepicker__month-read-view {
  border: 1px solid transparent;
  border-radius: 0.3rem;
}

.react-datepicker__year-read-view:hover,
.react-datepicker__month-read-view:hover {
  cursor: pointer;
}

.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow {
  border-top-color: #b3b2b2;
}

.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow {
  border-top-color: #ccc;
  float: right;
  margin-left: 20px;
  top: 8px;
  position: relative;
  border-width: 0.55rem;
}

.react-datepicker__year-dropdown,
.react-datepicker__month-dropdown {
  background-color: #f0f0f0;
  position: absolute;
  width: 50%;
  left: 25%;
  top: 30px;
  z-index: 1;
  text-align: center;
  border-radius: 0.3rem;
  border: 1px solid #aeaeae;
}

.react-datepicker__year-dropdown:hover,
.react-datepicker__month-dropdown:hover {
  cursor: pointer;
}

.react-datepicker__year-dropdown--scrollable,
.react-datepicker__month-dropdown--scrollable {
  height: 150px;
  overflow-y: scroll;
}

.react-datepicker__year-option,
.react-datepicker__month-option {
  line-height: 20px;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.react-datepicker__year-option:first-of-type,
.react-datepicker__month-option:first-of-type {
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}

.react-datepicker__year-option:last-of-type,
.react-datepicker__month-option:last-of-type {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}

.react-datepicker__year-option:hover,
.react-datepicker__month-option:hover {
  background-color: #ccc;
}

.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming {
  border-bottom-color: #b3b2b2;
}

.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous {
  border-top-color: #b3b2b2;
}

.react-datepicker__year-option--selected,
.react-datepicker__month-option--selected {
  position: absolute;
  left: 15px;
}

.react-datepicker__close-icon {
  background-color: transparent;
  border: 0;
  cursor: pointer;
  display: inline-block;
  height: 0;
  outline: 0;
  padding: 0;
  vertical-align: middle;
}

.react-datepicker__close-icon::after {
  background-color: #216ba5;
  border-radius: 50%;
  bottom: 0;
  box-sizing: border-box;
  color: #fff;
  content: "\00d7";
  cursor: pointer;
  font-size: 12px;
  height: 16px;
  width: 16px;
  line-height: 1;
  margin: -8px auto 0;
  padding: 2px;
  position: absolute;
  right: 7px;
  text-align: center;
  top: 50%;
}

.react-datepicker__today-button {
  background: #f0f0f0;
  border-top: 1px solid #aeaeae;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  padding: 5px 0;
  clear: left;
}

.react-datepicker__portal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  left: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 2147483647;
}

.react-datepicker__portal .react-datepicker__day-name,
.react-datepicker__portal .react-datepicker__day {
  width: 3rem;
  line-height: 3rem;
}

@media (max-width: 400px), (max-height: 550px) {
  .react-datepicker__portal .react-datepicker__day-name,
  .react-datepicker__portal .react-datepicker__day {
    width: 2rem;
    line-height: 2rem;
  }
}

.react-datepicker__portal .react-datepicker__current-month {
  font-size: 1.44rem;
}

.react-datepicker__portal .react-datepicker__navigation {
  border: 0.81rem solid transparent;
}

.react-datepicker__portal .react-datepicker__navigation--previous {
  border-right-color: #ccc;
}

.react-datepicker__portal .react-datepicker__navigation--previous:hover {
  border-right-color: #b3b2b2;
}

.react-datepicker__portal .react-datepicker__navigation--next {
  border-left-color: #ccc;
}

.react-datepicker__portal .react-datepicker__navigation--next:hover {
  border-left-color: #b3b2b2;
}

.date-picker-container {
  position: relative;
  .fa {
    position: absolute;
    top: 9px;
    right: 6px;
    z-index: -1;
  }
}

	input[type=text], textarea {
		display:block;
		min-width: 400px;
		max-width: 100%;
	}

	.bg__cf__actions {
		margin-top: 20px;
		margin-left: 130px;
	}

	.bg__cf__validation-error {
		background-color: #f26c50;
		color: #fff;
		height: 3.3rem;
		margin-bottom: 6px;
		padding: 6px 10px;
	}

	.react-datepicker__navigation {
		background: none;
		line-height: 1.7rem;
		text-align: center;
		cursor: pointer;
		position: absolute;
		top: 10px;
		width: 0;
		padding: 0;
		border: 0.45rem solid transparent;
		z-index: 1;
		height: 10px;
		width: 10px;
		text-indent: -999em;
		overflow: hidden;
		&--previous {
			left: 10px;
			border-right-color: #ccc;
		}
		&--next {
			right: 10px;
			border-left-color: #ccc;
		}
	}
}
.bg__collection-list-view {
  .info-bar{
  background-image: $iconProjectUrl;
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 40px;
  margin-bottom: 20px;
  h1{
    max-width: calc(100% - 150px);
    padding-top: 10px;
    margin: 0;
    margin-bottom: 5px;      
  }
  p{
    margin: 0;      
    display: inline-block;
  }
  .btn{
    float:right;
  }
}
}
.bg__collection-table{

   .tools{
    background-color: $clGrey;
    padding: 0px 10px;
    display: flex;

    &:after{
      clear:both;
      content: "";
      display: table;
    }
    
    .left{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      flex-wrap: wrap;
      float:left;
      flex: 1 1 0;
    }    

    .filter-container{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      align-items: center;      
    }

    h3{
      display: inline-block;
      padding-right: 10px;
      padding-top: 7px;
      padding-bottom: 7px;
      border-right: 1px solid $clDarkGrey;
      position: relative;
      margin: 10px 0;
      min-width: 60px;

      &:after{
        content:"";
        position:absolute;
        right: -8px;
        top: 50%;
        margin-top: -3px;
        border: 4px solid transparent;
        border-left: 4px solid $clDarkGrey;
      }
    }

    label{
      vertical-align: middle;
      padding: 10px 10px 10px 5px;
    }

    input, input[type=checkbox], select{
      vertical-align: middle;
      margin-left: 20px;
    }

    input[type="text"]{
      border-radius: 2px;
      padding: 5px;
      margin-bottom: 0px;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
    }

    input.search{
      background-image: $iconSearchUrl;
      background-position: center right 10px;
      background-repeat: no-repeat;
      padding-right: 30px;
    }

   select{
    // webkit only
    @media screen and (-webkit-min-device-pixel-ratio:0) {  
      border-color: $clGreyTint;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
      border-radius: 2px;
      background-color: #fff;  
      &:disabled{
        background-color: $clGrey;
      }
    }
    max-width: 160px;
    
    padding: 5px;
  }
}

  .error{
    padding:10px;
  }

  table{

    &.access{
      text-transform: capitalize;
    }
  }
}
.bg__data-entry-form {
	
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow {
  margin-left: -8px;
  position: absolute;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before {
  box-sizing: content-box;
  position: absolute;
  border: 8px solid transparent;
  height: 0;
  width: 1px;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before {
  content: "";
  z-index: -1;
  border-width: 8px;
  left: -8px;
  border-bottom-color: #aeaeae;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle {
  top: 0;
  margin-top: -8px;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before {
  border-top: none;
  border-bottom-color: #f0f0f0;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before {
  top: -1px;
  border-bottom-color: #aeaeae;
}

.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow {
  bottom: 0;
  margin-bottom: -8px;
}

.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before {
  border-bottom: none;
  border-top-color: #fff;
}

.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before {
  bottom: -1px;
  border-top-color: #aeaeae;
}

.react-datepicker-wrapper {
  display: inline-block;
}

.react-datepicker {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  background-color: #fff;
  color: #000;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  display: inline-block;
  position: relative;
  width:20rem;
  height:21rem;
}

.react-datepicker__triangle {
  position: absolute;
  left: 50px;
}

.react-datepicker-popper {
  z-index: 10;
}

.react-datepicker-popper[data-placement^="bottom"] {
  margin-top: 10px;
  width: 20rem;
height:20rem;
}

.react-datepicker-popper[data-placement^="top"] {
  margin-bottom: 6px;
}

.react-datepicker-popper[data-placement^="right"] {
  margin-left: 8px;
}

.react-datepicker-popper[data-placement^="right"] .react-datepicker__triangle {
  left: auto;
  right: 42px;
}

.react-datepicker-popper[data-placement^="left"] {
  margin-right: 8px;
}

.react-datepicker-popper[data-placement^="left"] .react-datepicker__triangle {
  left: 42px;
  right: auto;
}

.react-datepicker__header {
  text-align: center;
  background-color: #f0f0f0;
  border-bottom: 1px solid #aeaeae;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
  padding-top: 8px;
  position: relative;
  width:20rem;
  font-size:1.2rem;
}

.react-datepicker__year-dropdown-container--select,
.react-datepicker__month-dropdown-container--select,
.react-datepicker__year-dropdown-container--scroll,
.react-datepicker__month-dropdown-container--scroll {
  display: inline-block;
  margin: 0 2px;
}

.react-datepicker__current-month {
  margin-top: 0;
  color: #000;
  font-weight: bold;
  font-size: 1.2rem;

}

.react-datepicker__navigation {
  line-height: 1.7rem;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 10px;
  width: 0;
  border: 0.55rem solid transparent;
  z-index: 1;
}

.react-datepicker__navigation--previous {
  left: 10px;
  border-right-color: #ccc;
}

.react-datepicker__navigation--previous:hover {
  border-right-color: #b3b2b2;
}

.react-datepicker__navigation--next {
  right: 10px;
  border-left-color: #ccc;
}

.react-datepicker__navigation--next:hover {
  border-left-color: #b3b2b2;
}

.react-datepicker__navigation--years {
  position: relative;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.react-datepicker__navigation--years-previous {
  top: 4px;
  border-top-color: #ccc;
}

.react-datepicker__navigation--years-previous:hover {
  border-top-color: #b3b2b2;
}

.react-datepicker__navigation--years-upcoming {
  top: -4px;
  border-bottom-color: #ccc;
}

.react-datepicker__navigation--years-upcoming:hover {
  border-bottom-color: #b3b2b2;
}

.react-datepicker__month-container {
  display: inline;
  float: left;
  width:20rem;
  height:20rem;
}

.react-datepicker__month {
  margin: 0.4rem;
  text-align: center;
}

.react-datepicker__week-number {
  color: #ccc;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}

.react-datepicker__week-number.react-datepicker__week-number--clickable {
  cursor: pointer;
}

.react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}

.react-datepicker__day-name,
.react-datepicker__day {
  color: #000;
  display: inline-block;
  width: 2.2rem;
  height:2rem;
  line-height: 1.9rem;
  text-align: center;
  margin: 0.166rem;
}

.react-datepicker__day {
  cursor: pointer;
}

.react-datepicker__day:hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}

.react-datepicker__day--today {
  font-weight: bold;
}

.react-datepicker__day--highlighted {
  border-radius: 0.3rem;
  background-color: #3dcc4a;
  color: #fff;
}

.react-datepicker__day--highlighted:hover {
  background-color: #32be3f;
}

.react-datepicker__day--highlighted-custom-1 {
  color: magenta;
}

.react-datepicker__day--highlighted-custom-2 {
  color: green;
}

.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}

.react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover {
  background-color: #1d5d90;
}

.react-datepicker__day--keyboard-selected {
  border-radius: 0.3rem;
  background-color: #2a87d0;
  color: #fff;
}

.react-datepicker__day--keyboard-selected:hover {
  background-color: #1d5d90;
}

.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) {
  background-color: rgba(33, 107, 165, 0.5);
}

.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range) {
  background-color: #f0f0f0;
  color: #000;
}

.react-datepicker__day--disabled {
  cursor: default;
  color: #ccc;
}

.react-datepicker__day--disabled:hover {
  background-color: transparent;
}

.react-datepicker__input-container {
  position: relative;
  display: inline-block;
  margin-left: 2px;
  .fa {
    position: absolute;
    top: 0;
    right: 6px;
    z-index: -1;
  }
  input {
    background: none;
    &:disabled {
      opacity: .6;
    }
  }
}

.react-datepicker__year-read-view,
.react-datepicker__month-read-view {
  border: 1px solid transparent;
  border-radius: 0.3rem;
}

.react-datepicker__year-read-view:hover,
.react-datepicker__month-read-view:hover {
  cursor: pointer;
}

.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow {
  border-top-color: #b3b2b2;
}

.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow {
  border-top-color: #ccc;
  float: right;
  margin-left: 20px;
  top: 8px;
  position: relative;
  border-width: 0.55rem;
}

.react-datepicker__year-dropdown,
.react-datepicker__month-dropdown {
  background-color: #f0f0f0;
  position: absolute;
  width: 50%;
  left: 25%;
  top: 30px;
  z-index: 1;
  text-align: center;
  border-radius: 0.3rem;
  border: 1px solid #aeaeae;
}

.react-datepicker__year-dropdown:hover,
.react-datepicker__month-dropdown:hover {
  cursor: pointer;
}

.react-datepicker__year-dropdown--scrollable,
.react-datepicker__month-dropdown--scrollable {
  height: 150px;
  overflow-y: scroll;
}

.react-datepicker__year-option,
.react-datepicker__month-option {
  line-height: 20px;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.react-datepicker__year-option:first-of-type,
.react-datepicker__month-option:first-of-type {
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}

.react-datepicker__year-option:last-of-type,
.react-datepicker__month-option:last-of-type {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}

.react-datepicker__year-option:hover,
.react-datepicker__month-option:hover {
  background-color: #ccc;
}

.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming {
  border-bottom-color: #b3b2b2;
}

.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous {
  border-top-color: #b3b2b2;
}

.react-datepicker__year-option--selected,
.react-datepicker__month-option--selected {
  position: absolute;
  left: 15px;
}

.react-datepicker__close-icon {
  background-color: transparent;
  border: 0;
  cursor: pointer;
  display: inline-block;
  height: 0;
  outline: 0;
  padding: 0;
  vertical-align: middle;
}

.react-datepicker__close-icon::after {
  background-color: #216ba5;
  border-radius: 50%;
  bottom: 0;
  box-sizing: border-box;
  color: #fff;
  content: "\00d7";
  cursor: pointer;
  font-size: 12px;
  height: 16px;
  width: 16px;
  line-height: 1;
  margin: -8px auto 0;
  padding: 2px;
  position: absolute;
  right: 7px;
  text-align: center;
  top: 50%;
}

.react-datepicker__today-button {
  background: #f0f0f0;
  border-top: 1px solid #aeaeae;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  padding: 5px 0;
  clear: left;
}

.react-datepicker__portal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  left: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 2147483647;
}

.react-datepicker__portal .react-datepicker__day-name,
.react-datepicker__portal .react-datepicker__day {
  width: 3rem;
  line-height: 3rem;
}

@media (max-width: 400px), (max-height: 550px) {
  .react-datepicker__portal .react-datepicker__day-name,
  .react-datepicker__portal .react-datepicker__day {
    width: 2rem;
    line-height: 2rem;
  }
}

.react-datepicker__portal .react-datepicker__current-month {
  font-size: 1.44rem;
}

.react-datepicker__portal .react-datepicker__navigation {
  border: 0.81rem solid transparent;
}

.react-datepicker__portal .react-datepicker__navigation--previous {
  border-right-color: #ccc;
}

.react-datepicker__portal .react-datepicker__navigation--previous:hover {
  border-right-color: #b3b2b2;
}

.react-datepicker__portal .react-datepicker__navigation--next {
  border-left-color: #ccc;
}

.react-datepicker__portal .react-datepicker__navigation--next:hover {
  border-left-color: #b3b2b2;
}

.date-picker-container {
  position: relative;
  .fa {
    position: absolute;
    top: 9px;
    right: 6px;
    z-index: -1;
  }
}

	padding:40px;

	input[type=text], textarea {
		display:block;
		min-width: 400px;
		max-width: 100%;
	}

	.bg__def__actions {
		margin-top: 20px;
		margin-left: 130px;
	}

	.bg__def__validation-error {
		background-color: #f26c50;
		color: #fff;
		height: 3.3rem;
		margin-bottom: 6px;
		padding: 6px 10px;
	}

	.react-datepicker__navigation {
		background: none;
		line-height: 1.7rem;
		text-align: center;
		cursor: pointer;
		position: absolute;
		top: 10px;
		width: 0;
		padding: 0;
		border: 0.45rem solid transparent;
		z-index: 1;
		height: 10px;
		width: 10px;
		text-indent: -999em;
		overflow: hidden;
		&--previous {
			left: 10px;
			border-right-color: #ccc;
		}
		&--next {
			right: 10px;
			border-left-color: #ccc;
		}
	}
}
.bg__entry-table{

   .tools{
    background-color: $clGrey;
    padding: 0px 10px;
    display: flex;

    &:after{
      clear:both;
      content: "";
      display: table;
    }
    
    .left{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      flex-wrap: wrap;
      float:left;
      flex: 1 1 0;
    }    

    .filter-container{
      display: flex;
      align-content: flex-start;
      justify-content: flex-start;
      align-items: center;      
    }

    h3{
      display: inline-block;
      padding-right: 10px;
      padding-top: 7px;
      padding-bottom: 7px;
      border-right: 1px solid $clDarkGrey;
      position: relative;
      margin: 10px 0;
      min-width: 60px;

      &:after{
        content:"";
        position:absolute;
        right: -8px;
        top: 50%;
        margin-top: -3px;
        border: 4px solid transparent;
        border-left: 4px solid $clDarkGrey;
      }
    }

    label{
      vertical-align: middle;
      padding: 10px 10px 10px 5px;
    }

    input, input[type=checkbox], select{
      vertical-align: middle;
      margin-left: 20px;
    }

    input[type="text"]{
      border-radius: 2px;
      padding: 5px;
      margin-bottom: 0px;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
    }

    input.search{
      background-image: $iconSearchUrl;
      background-position: center right 10px;
      background-repeat: no-repeat;
      padding-right: 30px;
    }

   select{
    // webkit only
    @media screen and (-webkit-min-device-pixel-ratio:0) {  
      border-color: $clGreyTint;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
      border-radius: 2px;
      background-color: #fff;  
      &:disabled{
        background-color: $clGrey;
      }
    }
    max-width: 160px;
    
    padding: 5px;
  }
}

  .modal{
  background-color: rgba($clDark,0.8);
  display: block;
  height: 100%;
  left: 0;
  overflow-y: scroll;
  position: fixed;
  top: 0;
  width: 100%;

  .container{
    position: relative;
    background-color: $clWhite;
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
    margin: 40px auto;
    padding: 30px;
    height: calc(100% - 80px);
    box-sizing: border-box;
    padding: 0;

    iframe{
      width: 100%;
      height: 100%;        
    }

    .close{
      background-color: rgba($clDark, 0.5);
      background-image: $iconCrossUrl;
      background-position: center right 15px;
      background-repeat: no-repeat;
      background-size: 20px;
      color: $clWhite;
      font-family: $fontHeading;
      cursor: pointer;    
      display: block;
      height: 40px;
      line-height: 40px;
      opacity: 0.8;
      position: absolute;
      right: 0;
      text-shadow: none;
      text-transform: uppercase;
      top: -40px;
      width: 90px;
      font-size: 15px;
      
      &:hover{
        opacity: 1.0;
      }
    }

  }

}

  .error{
    padding:10px;
  }

  table{

    &.access{
      text-transform: capitalize;
    }
  }
}

// Helpers
.bg__bulk-actions{
  position: fixed;
  bottom: -45px;
  left: 0;
  width: 100%;
  height: 45px;
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
  background-color: white;
  padding: 5px 10px;
  box-sizing: border-box;
  z-index: 10;

  .btn{
    margin: 0 0 0 10px;
  }

  animation: slide 0.5s forwards;
}

@keyframes slide {
    0% { bottom: -45px; }
}

@keyframes slide {
    100% { bottom: 0; }
}
.bg__pagination{
  text-align: center;
  list-style: none;
  user-select: none;
  padding: 0;
  margin-top: 20px;
  li{
    display: inline-block;
    min-width: 40px;
    height: 40px;
    line-height: 40px;
    margin: 0 2px;
    cursor: pointer;
    transition: background-color 0.2s ease-out;
    text-align: center;
    background-color: $clGrey;
    border-radius: 2px;

    &.active,&.active:hover{
      background-color: $clGreyTint;
    }

    &:hover{
      background-color: $clGreyTint;
    }

    &.prev, &.next{
      font-size: 0;
      background-position: center;
      background-repeat: no-repeat;
    }

    &.prev{
      background-image: $arrowLeftDarkUrl;
    }

    &.next{
      background-image: $arrowRightDarkUrl;
    }
  }
}
// Nasty use of !important but necessary to customize the tooltip
// https://www.npmjs.com/package/react-tooltip
.bg__custom-queryTooltip {
  z-index: 9999 !important;

  h3 {
    font-size: 20px !important;
    padding-bottom: 10px !important;
  }
  padding: 30px !important;
  background-color: rgba(0,0,0, .9) !important;

  ul {
    li {
      padding-left: 20px !important;
    }
  }
  .bg__selectedFacet-list {
    padding-left: 10px;
  }
  .bg_queryDetails-wrapper {
    padding: 10px 0;
  }
}

.fa-info-query {
  content: $iconAnnotateAltUrl !important;
  width: 30px;
  height: 30px;
  margin-right: 10px;
}
}
