Update Flatly theme 3.0.3 to 3.1.1

Update Flatly theme 3.0.3 to 3.1.1

// Flatly 3.1.1
// Variables
// --------------------------------------------------

#footer {
  color: #fff;
  background-color: @navbar-default-bg;
  border-top: 1px solid @navbar-default-border;
}

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

@gray-darker:            lighten(#000, 13.5%); // #222
@gray-dark: #7b8a8b;
// #333
@gray: #95a5a6;
// #555
@gray-light: #b4bcc2;
// #999
@gray-lighter: #ecf0f1;
// #eee

@brand-primary:         #2C3E50;
@brand-success:         #18BC9C;
@brand-info: #3498DB;
@brand-warning:         #F39C12;
@brand-danger:          #E74C3C;

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

//** Background color for `<body>`.
@body-bg:               #fff;
//** Global text color on `<body>`.
@text-color:            @brand-primary;

//** Global textual link color.
@link-color:            @brand-success;
//** Link hover color set via `darken()` function.
@link-hover-color:      @link-color;

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

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

@font-size-base:          15px;
@font-size-large: ceil((@font-size-base * 1.25));
// ~18px
@font-size-small: ceil((@font-size-base * 0.85));
// ~12px

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

//** Unit-less `line-height` for use in components like buttons.
@line-height-base:        1.428571429; // 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));
// ~20px

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

//-- Iconography
//
//## Specify custom locations of the include Glyphicons icon font. Useful for those including Bootstrap via Bower.

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";
@icon-font-svg-id: "glyphicons_halflingsregular";

//== 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: 10px;
@padding-base-horizontal: 15px;

@padding-large-vertical: 18px;
@padding-large-horizontal: 27px;

@padding-small-vertical: 6px;
@padding-small-horizontal: 9px;

@padding-xs-vertical: 1px;
@padding-xs-horizontal: 5px;

@line-height-large: 1.33;
@line-height-small: 1.5;

@border-radius-base: 4px;
@border-radius-large: 6px;
@border-radius-small: 3px;

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

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

//== 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;
//** Padding for cells in `.table-condensed`.
@table-condensed-cell-padding: 5px;

//** Default background color used for all tables.
@table-bg: transparent;
//** Background color used for `.table-striped`.
@table-bg-accent: #f9f9f9;
//** Background color used for `.table-hover`.
@table-bg-hover: @gray-lighter;
@table-bg-active: @table-bg-hover;

//** Border color for table and cell borders.
@table-border-color: @gray-lighter;

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

@btn-font-weight:                normal;

@btn-default-color:              #fff;
@btn-default-bg:                 @gray;
@btn-default-border:             @btn-default-bg;

@btn-primary-color:              @btn-default-color;
@btn-primary-bg:                 @brand-primary;
@btn-primary-border:             @btn-primary-bg;

@btn-success-color:              @btn-default-color;
@btn-success-bg:                 @brand-success;
@btn-success-border:             @btn-success-bg;

@btn-info-color: @btn-default-color;
@btn-info-bg: @brand-info;
@btn-info-border: @btn-info-bg;

@btn-warning-color:              @btn-default-color;
@btn-warning-bg:                 @brand-warning;
@btn-warning-border:             @btn-warning-bg;

@btn-danger-color:               @btn-default-color;
@btn-danger-bg:                  @brand-danger;
@btn-danger-border:              @btn-danger-bg;

@btn-link-disabled-color:        @gray-light;

//== Forms
//
//##

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

//** Text color for `<input>`s
@input-color:                    @text-color;
//** `<input>` border color
@input-border:                   #dce4ec;
//** `<input>` border radius
@input-border-radius:            @border-radius-base;
//** Border color for inputs on focus
@input-border-focus:             #1abc9c;

//** Placeholder text color
@input-color-placeholder:        #acb6c0;

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

@legend-color:                   @text-color;
@legend-border-color:            #e5e5e5;

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

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

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

//** Dropdown link text color.
@dropdown-link-color:            @gray-dark;
//** Hover color for dropdown links.
@dropdown-link-hover-color:      #fff;
//** Hover background for dropdown links.
@dropdown-link-hover-bg:         @dropdown-link-active-bg;

//** Active dropdown menu item text color.
@dropdown-link-active-color:     #fff;
//** Active dropdown menu item background color.
@dropdown-link-active-bg:        @component-active-bg;

//** Disabled dropdown menu item background color.
@dropdown-link-disabled-color:   @text-muted;

//** Text color for headers within dropdown menus.
@dropdown-header-color:          @text-muted;

// Note: Deprecated @dropdown-caret-color as of v3.1.0
@dropdown-caret-color: #000;

//-- 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;
@zindex-dropdown:          1000;
@zindex-popover:           1010;
@zindex-tooltip:           1030;
@zindex-navbar-fixed:      1030;
@zindex-modal-background:  1040;
@zindex-modal:             1050;

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

// Extra small screen / phone
// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
@screen-xs:                  480px;
@screen-xs-min:              @screen-xs;
@screen-phone:               @screen-xs-min;

// Small screen / tablet
// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
@screen-sm:                  768px;
@screen-sm-min:              @screen-sm;
@screen-tablet:              @screen-sm-min;

// Medium screen / desktop
// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
@screen-md:                  992px;
@screen-md-min:              @screen-md;
@screen-desktop:             @screen-md-min;

// Large screen / wide desktop
// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
@screen-lg:                  1200px;
@screen-lg-min:              @screen-lg;
@screen-lg-desktop:          @screen-lg-min;

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

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

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

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

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

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

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

//== Navbar
//
//##

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

@navbar-default-color:             #777;
@navbar-default-bg:                @brand-primary;
@navbar-default-border:            darken(@navbar-default-bg, 6.5%);

// Navbar links
@navbar-default-link-color:                #fff;
@navbar-default-link-hover-color:          @brand-success;
@navbar-default-link-hover-bg:             transparent;
@navbar-default-link-active-color:         #fff;
@navbar-default-link-active-bg:            darken(@navbar-default-bg, 10%);
@navbar-default-link-disabled-color:       #ccc;
@navbar-default-link-disabled-bg:          transparent;

// Navbar brand label
@navbar-default-brand-color:               @navbar-default-link-color;
@navbar-default-brand-hover-color:         @navbar-default-link-hover-color;
@navbar-default-brand-hover-bg:            transparent;

// Navbar toggle
@navbar-default-toggle-hover-bg:           darken(@navbar-default-bg, 10%);
@navbar-default-toggle-icon-bar-bg:        #fff;
@navbar-default-toggle-border-color:       darken(@navbar-default-bg, 10%);

// Inverted navbar
// Reset inverted navbar basics
@navbar-inverse-color:                      #fff;
@navbar-inverse-bg:                         @brand-success;
@navbar-inverse-border:                     darken(@navbar-inverse-bg, 10%);

// Inverted navbar links
@navbar-inverse-link-color:                 #fff;
@navbar-inverse-link-hover-color:           @brand-primary;
@navbar-inverse-link-hover-bg:              transparent;
@navbar-inverse-link-active-color:          #fff;
@navbar-inverse-link-active-bg:             darken(@navbar-inverse-bg, 5%);
@navbar-inverse-link-disabled-color:        #ccc;
@navbar-inverse-link-disabled-bg:           transparent;

// Inverted navbar brand label
@navbar-inverse-brand-color:                @navbar-inverse-link-color;
@navbar-inverse-brand-hover-color:          @navbar-inverse-link-hover-color;
@navbar-inverse-brand-hover-bg:             transparent;

// Inverted navbar toggle
@navbar-inverse-toggle-hover-bg:            darken(@navbar-inverse-bg, 10%);
@navbar-inverse-toggle-icon-bar-bg:         #fff;
@navbar-inverse-toggle-border-color:        darken(@navbar-inverse-bg, 10%);

//== Navs
//
//##

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

@nav-disabled-link-color:                   @gray-light;
@nav-disabled-link-hover-color:             @gray-light;

@nav-open-link-hover-color:                 #fff;

//== Tabs
@nav-tabs-border-color:                     @gray-lighter;

@nav-tabs-link-hover-border-color:          @gray-lighter;

@nav-tabs-active-link-hover-bg:             @body-bg;
@nav-tabs-active-link-hover-color:          @brand-primary;
@nav-tabs-active-link-hover-border-color:   @gray-lighter;

@nav-tabs-justified-link-border-color:            @gray-lighter;
@nav-tabs-justified-active-link-border-color:     @body-bg;

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

//== Pagination
//
//##

@pagination-color: #fff;
@pagination-bg:                        @brand-success;
@pagination-border:                    transparent;

@pagination-hover-color: #fff;
@pagination-hover-bg:                  darken(@brand-success, 15%);
@pagination-hover-border: transparent;

@pagination-active-color:              #fff;
@pagination-active-bg: darken(@brand-success, 15%);
@pagination-active-border: transparent;

@pagination-disabled-color:            @gray-lighter;
@pagination-disabled-bg: lighten(@brand-success, 15%);
;
@pagination-disabled-border: transparent;

//== Pager
//
//##

@pager-bg: @pagination-bg;
@pager-border: @pagination-border;
@pager-border-radius:                  15px;

@pager-hover-bg: @pagination-hover-bg;

@pager-active-bg: @pagination-active-bg;
@pager-active-color: @pagination-active-color;

@pager-disabled-color:                 #fff;

//== Jumbotron
//
//##

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

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

@state-success-text:             #fff;
@state-success-bg:               @brand-success;
@state-success-border:           @brand-success;

@state-info-text:                #fff;
@state-info-bg:                  @brand-info;
@state-info-border:              @brand-info;

@state-warning-text:             #fff;
@state-warning-bg:               @brand-warning;
@state-warning-border:           @brand-warning;

@state-danger-text:              #fff;
@state-danger-bg:                @brand-danger;
@state-danger-border:            @brand-danger;

//== Tooltips
//
//##

//** Tooltip max width
@tooltip-max-width:           200px;
//** Tooltip text color
@tooltip-color:               #fff;
//** Tooltip background color
@tooltip-bg:                  rgba(0,0,0,.9);
@tooltip-opacity: .9;

//** Tooltip arrow width
@tooltip-arrow-width:         5px;
//** Tooltip arrow color
@tooltip-arrow-color:         @tooltip-bg;

//== Popovers
//
//##

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

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

//** Popover arrow width
@popover-arrow-width:                 10px;
//** Popover arrow color
@popover-arrow-color:                 #fff;

//** Popover outer arrow width
@popover-arrow-outer-width:           (@popover-arrow-width + 1);
//** Popover outer arrow color
@popover-arrow-outer-color: fadein(@popover-border-color, 5%);
//** Popover outer arrow fallback color
@popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%);

//== Labels
//
//##

//** Default label background color
@label-default-bg:            @btn-default-bg;
//** Primary label background color
@label-primary-bg:            @brand-primary;
//** Success label background color
@label-success-bg:            @brand-success;
//** Info label background color
@label-info-bg:               @brand-info;
//** Warning label background color
@label-warning-bg:            @brand-warning;
//** Danger label background color
@label-danger-bg:             @brand-danger;

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

//== Modals
//
//##

//** Padding applied to the modal body
@modal-inner-padding:         20px;

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

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

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

@modal-lg: 900px;
@modal-md: 600px;
@modal-sm: 300px;

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

@alert-padding:               15px;
@alert-border-radius:         @border-radius-base;
@alert-link-font-weight:      bold;

@alert-success-bg:            @state-success-bg;
@alert-success-text:          @state-success-text;
@alert-success-border:        @state-success-border;

@alert-info-bg:               @state-info-bg;
@alert-info-text:             @state-info-text;
@alert-info-border:           @state-info-border;

@alert-warning-bg:            @state-warning-bg;
@alert-warning-text:          @state-warning-text;
@alert-warning-border:        @state-warning-border;

@alert-danger-bg:             @state-danger-bg;
@alert-danger-text:           @state-danger-text;
@alert-danger-border:         @state-danger-border;

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

//** Background color of the whole progress component
@progress-bg:                 @gray-lighter;
//** Progress bar text color
@progress-bar-color:          #fff;

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

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

//** Background color on `.list-group-item`
@list-group-bg: #fff;
//** `.list-group-item` border color
@list-group-border: @gray-lighter;
//** List group border radius
@list-group-border-radius: @border-radius-base;

//** Background color of single list elements on hover
@list-group-hover-bg: @gray-lighter;
//** Text color of active list elements
@list-group-active-color: @component-active-color;
//** Background color of active list elements
@list-group-active-bg: @component-active-bg;
//** Border color of active list elements
@list-group-active-border: @list-group-active-bg;
@list-group-active-text-color: lighten(@list-group-active-bg, 40%);

@list-group-link-color: #555;
@list-group-link-heading-color: #333;

//== Panels
//
//##

@panel-bg:                    #fff;
@panel-body-padding: 15px;
@panel-border-radius:         @border-radius-base;

//** Border color for elements within panels
@panel-inner-border: @gray-lighter;
@panel-footer-bg:             @gray-lighter;

@panel-default-text:          @text-color;
@panel-default-border:        @gray-lighter;
@panel-default-heading-bg:    @gray-lighter;

@panel-primary-text:          #fff;
@panel-primary-border:        @brand-primary;
@panel-primary-heading-bg:    @brand-primary;

@panel-success-text:          @state-success-text;
@panel-success-border:        @state-success-border;
@panel-success-heading-bg:    @state-success-bg;

@panel-info-text: @state-info-text;
@panel-info-border: @state-info-border;
@panel-info-heading-bg: @state-info-bg;

@panel-warning-text:          @state-warning-text;
@panel-warning-border:        @state-warning-border;
@panel-warning-heading-bg:    @state-warning-bg;

@panel-danger-text:           @state-danger-text;
@panel-danger-border:         @state-danger-border;
@panel-danger-heading-bg:     @state-danger-bg;

//== Thumbnails
//
//##

//** Padding around the thumbnail image
@thumbnail-padding:           4px;
//** Thumbnail background color
@thumbnail-bg:                @body-bg;
//** Thumbnail border color
@thumbnail-border:            @gray-lighter;
//** Thumbnail border radius
@thumbnail-border-radius:     @border-radius-base;

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

//== Wells
//
//##

@well-bg:                     @gray-lighter;
@well-border: transparent;

//== Badges
//
//##

@badge-color:                 #fff;
//** Linked badge text color on hover
@badge-link-hover-color:      #fff;
@badge-bg:                    @gray;

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

@badge-font-weight:           bold;
@badge-line-height:           1;
@badge-border-radius:         10px;

//== Breadcrumbs
//
//##

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

//== Carousel
//
//##

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

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

@carousel-indicator-active-bg:                #fff;
@carousel-indicator-border-color:             #fff;

@carousel-caption-color:                      #fff;

//== Close
//
//##

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

//== Code
//
//##

@code-color:                  #c7254e;
@code-bg:                     #f9f2f4;

@kbd-color: #fff;
@kbd-bg: #333;

@pre-bg:                      @gray-lighter;
@pre-color:                   @gray-dark;
@pre-border-color:            #ccc;
@pre-scrollable-max-height:   340px;

//== Type
//
//##

//** Text muted color
@text-muted:                  @gray-light;
//** Abbreviations and acronyms border color
@abbr-border-color:           @gray-light;
//** Headings small color
@headings-small-color:        @gray-light;
//** Blockquote small color
@blockquote-small-color:      @gray-light;
//** Blockquote font size
@blockquote-font-size: (@font-size-base * 1.25);
//** Blockquote border color
@blockquote-border-color:     @gray-lighter;
//** Page header border color
@page-header-border-color:    @gray-lighter;

//== Miscellaneous
//
//##

//** Horizontal line color.
@hr-border:                   @gray-lighter;

//** Horizontal offset for forms and lists.
@component-offset-horizontal: 180px;

@import url("//fonts.googleapis.com/css?family=Lato:400,700,400italic");

// Navbar =====================================================================

// Buttons ====================================================================

.btn:active {
  .box-shadow(none);
}

.btn-group.open .dropdown-toggle {
  .box-shadow(none);
}

// Typography =================================================================

.text-primary,
.text-primary:hover {
  color: @brand-primary;
}

.text-success,
.text-success:hover {
  color: @brand-success;
}

.text-danger,
.text-danger:hover {
  color: @brand-danger;
}

.text-warning,
.text-warning:hover {
  color: @brand-warning;
}

.text-info,
.text-info:hover {
  color: @brand-info;
}

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

.table {

  tr.success,
  tr.warning,
  tr.danger {
    color: #fff;
  }

  > thead > tr > th,
  > tbody > tr > th,
  > tfoot > tr > th,
  > thead > tr > td,
  > tbody > tr > td,
  > tfoot > tr > td {
    border: none;
  }

  &-bordered > thead > tr > th,
  &-bordered > tbody > tr > th,
  &-bordered > tfoot > tr > th,
  &-bordered > thead > tr > td,
  &-bordered > tbody > tr > td,
  &-bordered > tfoot > tr > td {
    border: 1px solid @table-border-color;
  }
}

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

.form-control,textarea.form-control,
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"],
.uneditable-input {
  border-width: 2px;
  .box-shadow(none);

  &:focus {
    .box-shadow(none);
  }
}

.has-warning {
  .help-block,
  .control-label {
    color: @brand-warning;
  }

  .form-control,
  .form-control:focus {
    border: 2px solid @brand-warning;
  }
}

.has-error {
  .help-block,
  .control-label {
    color: @brand-danger;
  }

  .form-control,
  .form-control:focus {
    border: 2px solid @brand-danger;
  }
}

.has-success {
  .help-block,
  .control-label {
    color: @brand-success;
  }

  .form-control,
  .form-control:focus {
    border: 2px solid @brand-success;
  }
}

// Navs =======================================================================

.nav {
  .open > a,
  .open > a:hover,
  .open > a:focus {
    border-color: transparent;
  }
}

.pager {
  a,
  a:hover {
    color: #fff;
  }

  .disabled {
    &>a,
    &>a:hover,
    &>a:focus,
    &>span {
      background-color: @pagination-disabled-bg;
    }
  }
}

// Indicators =================================================================

.alert {

  a,
  .alert-link {
    color: #fff;
    text-decoration: underline;
  }
}

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

.progress {
  height: 10px;
  .box-shadow(none);
}

// Containers =================================================================

.well {
  .box-shadow(none);
}

// Flatly 3.0.3
// --------------------------------------------------

// Global values
// --------------------------------------------------

#footer {
  color: #fff;
  background-color: @navbar-default-bg;
  border-top: 1px solid @navbar-default-border;
}

// Grays
// -------------------------

@gray-darker:            lighten(#000, 13.5%); // #222
@gray-dark:              #7b8a8b;
@gray:                   #95a5a6;
@gray-light:             #b4bcc2;
@gray-lighter:           #ecf0f1;

// Brand colors
// -------------------------

@brand-primary:         #2C3E50;
@brand-success:         #18BC9C;
@brand-warning:         #F39C12;
@brand-danger:          #E74C3C;
@brand-info:            #3498DB;

// Scaffolding
// -------------------------

@body-bg:               #fff;
@text-color:            @brand-primary;

// Links
// -------------------------

@link-color:            @brand-success;
@link-hover-color:      @link-color;

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

@font-family-sans-serif:  "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          15px;
@font-size-large:         ceil(@font-size-base * 1.25); // ~18px
@font-size-small:         ceil(@font-size-base * 0.85); // ~12px

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

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor(@font-size-base * @line-height-base); // ~20px

@headings-font-family:    @font-family-base;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

// Iconography
// -------------------------

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

// Components
// -------------------------
// Based on 14px font-size and 1.428 line-height (~20px to start)

@padding-base-vertical:          10px;
@padding-base-horizontal:        15px;

@padding-large-vertical:         18px;
@padding-large-horizontal:       27px;

@padding-small-vertical:         6px;
@padding-small-horizontal:       9px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

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

@table-cell-padding:                 8px;
@table-condensed-cell-padding:       5px;

@table-bg:                           transparent; // overall background-color
@table-bg-accent:                    #f9f9f9; // for striping
@table-bg-hover:                     @gray-lighter;
@table-bg-active:                    @table-bg-hover;

@table-border-color:                 @gray-lighter; // table and cell border

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

@btn-font-weight:                normal;

@btn-default-color:              #fff;
@btn-default-bg:                 @gray;
@btn-default-border:             @btn-default-bg;

@btn-primary-color:              @btn-default-color;
@btn-primary-bg:                 @brand-primary;
@btn-primary-border:             @btn-primary-bg;

@btn-success-color:              @btn-default-color;
@btn-success-bg:                 @brand-success;
@btn-success-border:             @btn-success-bg;

@btn-warning-color:              @btn-default-color;
@btn-warning-bg:                 @brand-warning;
@btn-warning-border:             @btn-warning-bg;

@btn-danger-color:               @btn-default-color;
@btn-danger-bg:                  @brand-danger;
@btn-danger-border:              @btn-danger-bg;

@btn-info-color:                 @btn-default-color;
@btn-info-bg:                    @brand-info;
@btn-info-border:                @btn-info-bg;

@btn-link-disabled-color:        @gray-light;

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

@input-bg:                       #fff;
@input-bg-disabled:              @gray-lighter;

@input-color:                    @text-color;
@input-border:                   #dce4ec;
@input-border-radius:            @border-radius-base;
@input-border-focus:             #1abc9c;

@input-color-placeholder:        #acb6c0;

@input-height-base:              (@line-height-computed + (@padding-base-vertical * 2) + 2);
@input-height-large:             (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
@input-height-small:             (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);

@legend-color:                   @text-color;
@legend-border-color:            #e5e5e5;

@input-group-addon-bg:           @gray-lighter;
@input-group-addon-border-color: @input-border;

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

@dropdown-bg:                    #fff;
@dropdown-border:                rgba(0,0,0,.15);
@dropdown-fallback-border:       #ccc;
@dropdown-divider-bg:            #e5e5e5;

@dropdown-link-color:            @gray-dark;
@dropdown-link-hover-color:      #fff;
@dropdown-link-hover-bg:         @dropdown-link-active-bg;

@dropdown-link-active-color:     #fff;
@dropdown-link-active-bg:        @component-active-bg;

@dropdown-link-disabled-color:   @text-muted;

@dropdown-header-color:          @text-muted;

// COMPONENT VARIABLES
// --------------------------------------------------

// Z-index master list
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)

@zindex-navbar:            1000;
@zindex-dropdown:          1000;
@zindex-popover:           1010;
@zindex-tooltip:           1030;
@zindex-navbar-fixed:      1030;
@zindex-modal-background:  1040;
@zindex-modal:             1050;

// Media queries breakpoints
// --------------------------------------------------

// Extra small screen / phone
// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
@screen-xs:                  480px;
@screen-xs-min:              @screen-xs;
@screen-phone:               @screen-xs-min;

// Small screen / tablet
// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
@screen-sm:                  768px;
@screen-sm-min:              @screen-sm;
@screen-tablet:              @screen-sm-min;

// Medium screen / desktop
// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
@screen-md:                  992px;
@screen-md-min:              @screen-md;
@screen-desktop:             @screen-md-min;

// Large screen / wide desktop
// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
@screen-lg:                  1200px;
@screen-lg-min:              @screen-lg;
@screen-lg-desktop:          @screen-lg-min;

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

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

// Number of columns in the grid system
@grid-columns:              12;
// Padding, to be divided by two and applied to the left and right of all columns
@grid-gutter-width:         30px;

// Navbar collapse

// Point at which the navbar becomes uncollapsed
@grid-float-breakpoint:     @screen-sm-min;
// Point at which the navbar begins collapsing
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);

// Navbar
// -------------------------

// Basics of a navbar
@navbar-height:                    60px;
@navbar-margin-bottom:             @line-height-computed;
@navbar-border-radius:             @border-radius-base;
@navbar-padding-horizontal:        floor(@grid-gutter-width / 2);  // ~15px
@navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);

@navbar-default-color:             #777;
@navbar-default-bg:                @brand-primary;
@navbar-default-border:            darken(@navbar-default-bg, 6.5%);

// Navbar links
@navbar-default-link-color:                #fff;
@navbar-default-link-hover-color:          @brand-success;
@navbar-default-link-hover-bg:             transparent;
@navbar-default-link-active-color:         #fff;
@navbar-default-link-active-bg:            darken(@navbar-default-bg, 10%);
@navbar-default-link-disabled-color:       #ccc;
@navbar-default-link-disabled-bg:          transparent;

// Navbar brand label
@navbar-default-brand-color:               @navbar-default-link-color;
@navbar-default-brand-hover-color:         @navbar-default-link-hover-color;
@navbar-default-brand-hover-bg:            transparent;

// Navbar toggle
@navbar-default-toggle-hover-bg:           darken(@navbar-default-bg, 10%);
@navbar-default-toggle-icon-bar-bg:        #fff;
@navbar-default-toggle-border-color:       darken(@navbar-default-bg, 10%);

// Inverted navbar
//
// Reset inverted navbar basics
@navbar-inverse-color:                      #fff;
@navbar-inverse-bg:                         @brand-success;
@navbar-inverse-border:                     darken(@navbar-inverse-bg, 10%);

// Inverted navbar links
@navbar-inverse-link-color:                 #fff;
@navbar-inverse-link-hover-color:           @brand-primary;
@navbar-inverse-link-hover-bg:              transparent;
@navbar-inverse-link-active-color:          #fff;
@navbar-inverse-link-active-bg:             darken(@navbar-inverse-bg, 5%);
@navbar-inverse-link-disabled-color:        #ccc;
@navbar-inverse-link-disabled-bg:           transparent;

// Inverted navbar brand label
@navbar-inverse-brand-color:                @navbar-inverse-link-color;
@navbar-inverse-brand-hover-color:          @navbar-inverse-link-hover-color;
@navbar-inverse-brand-hover-bg:             transparent;

// Inverted navbar toggle
@navbar-inverse-toggle-hover-bg:            darken(@navbar-inverse-bg, 10%);
@navbar-inverse-toggle-icon-bar-bg:         #fff;
@navbar-inverse-toggle-border-color:        darken(@navbar-inverse-bg, 10%);

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

@nav-link-padding:                          10px 15px;
@nav-link-hover-bg:                         @gray-lighter;

@nav-disabled-link-color:                   @gray-light;
@nav-disabled-link-hover-color:             @gray-light;

@nav-open-link-hover-color:                 #fff;

// Tabs
@nav-tabs-border-color:                     @gray-lighter;

@nav-tabs-link-hover-border-color:          @gray-lighter;

@nav-tabs-active-link-hover-bg:             @body-bg;
@nav-tabs-active-link-hover-color:          @brand-primary;
@nav-tabs-active-link-hover-border-color:   @gray-lighter;

@nav-tabs-justified-link-border-color:            @gray-lighter;
@nav-tabs-justified-active-link-border-color:     @body-bg;

// Pills
@nav-pills-border-radius:                   @border-radius-base;
@nav-pills-active-link-hover-bg:            @component-active-bg;
@nav-pills-active-link-hover-color:         @component-active-color;

// Pagination
// -------------------------

@pagination-bg:                        @brand-success;
@pagination-border:                    transparent;

@pagination-hover-bg:                  darken(@brand-success, 15%);

@pagination-active-bg:                 darken(@brand-success, 15%);
@pagination-active-color:              #fff;

@pagination-disabled-color:            @gray-lighter;

// Pager
// -------------------------

@pager-border-radius:                  15px;
@pager-disabled-color:                 #fff;

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

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

// Form states and alerts
// -------------------------

@state-success-text:             #fff;
@state-success-bg:               @brand-success;
@state-success-border:           @brand-success;

@state-info-text:                #fff;
@state-info-bg:                  @brand-info;
@state-info-border:              @brand-info;

@state-warning-text:             #fff;
@state-warning-bg:               @brand-warning;
@state-warning-border:           @brand-warning;

@state-danger-text:              #fff;
@state-danger-bg:                @brand-danger;
@state-danger-border:            @brand-danger;

// Tooltips
// -------------------------
@tooltip-max-width:           200px;
@tooltip-color:               #fff;
@tooltip-bg:                  rgba(0,0,0,.9);

@tooltip-arrow-width:         5px;
@tooltip-arrow-color:         @tooltip-bg;

// Popovers
// -------------------------
@popover-bg:                          #fff;
@popover-max-width:                   276px;
@popover-border-color:                rgba(0,0,0,.2);
@popover-fallback-border-color:       #ccc;

@popover-title-bg:                    darken(@popover-bg, 3%);

@popover-arrow-width:                 10px;
@popover-arrow-color:                 #fff;

@popover-arrow-outer-width:           (@popover-arrow-width + 1);
@popover-arrow-outer-color:           rgba(0,0,0,.25);
@popover-arrow-outer-fallback-color:  #999;

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

@label-default-bg:            @btn-default-bg;
@label-primary-bg:            @brand-primary;
@label-success-bg:            @brand-success;
@label-info-bg:               @brand-info;
@label-warning-bg:            @brand-warning;
@label-danger-bg:             @brand-danger;

@label-color:                 #fff;
@label-link-hover-color:      #fff;

// Modals
// -------------------------
@modal-inner-padding:         20px;

@modal-title-padding:         15px;
@modal-title-line-height:     @line-height-base;

@modal-content-bg:                             #fff;
@modal-content-border-color:                   rgba(0,0,0,.2);
@modal-content-fallback-border-color:          #999;

@modal-backdrop-bg:           #000;
@modal-header-border-color:   #e5e5e5;
@modal-footer-border-color:   @modal-header-border-color;

// Alerts
// -------------------------
@alert-padding:               15px;
@alert-border-radius:         @border-radius-base;
@alert-link-font-weight:      bold;

@alert-success-bg:            @state-success-bg;
@alert-success-text:          @state-success-text;
@alert-success-border:        @state-success-border;

@alert-info-bg:               @state-info-bg;
@alert-info-text:             @state-info-text;
@alert-info-border:           @state-info-border;

@alert-warning-bg:            @state-warning-bg;
@alert-warning-text:          @state-warning-text;
@alert-warning-border:        @state-warning-border;

@alert-danger-bg:             @state-danger-bg;
@alert-danger-text:           @state-danger-text;
@alert-danger-border:         @state-danger-border;

// Progress bars
// -------------------------
@progress-bg:                 @gray-lighter;
@progress-bar-color:          #fff;

@progress-bar-bg:             @brand-primary;
@progress-bar-success-bg:     @brand-success;
@progress-bar-warning-bg:     @brand-warning;
@progress-bar-danger-bg:      @brand-danger;
@progress-bar-info-bg:        @brand-info;

// List group
// -------------------------
@list-group-bg:               #fff;
@list-group-border:           @gray-lighter;
@list-group-border-radius:    @border-radius-base;

@list-group-hover-bg:         @gray-lighter;
@list-group-active-color:     @component-active-color;
@list-group-active-bg:        @component-active-bg;
@list-group-active-border:    @list-group-active-bg;

@list-group-link-color:          #555;
@list-group-link-heading-color:  #333;

// Panels
// -------------------------
@panel-bg:                    #fff;
@panel-inner-border:          @gray-lighter;
@panel-border-radius:         @border-radius-base;
@panel-footer-bg:             @gray-lighter;

@panel-default-text:          @text-color;
@panel-default-border:        @gray-lighter;
@panel-default-heading-bg:    @gray-lighter;

@panel-primary-text:          #fff;
@panel-primary-border:        @brand-primary;
@panel-primary-heading-bg:    @brand-primary;

@panel-success-text:          @state-success-text;
@panel-success-border:        @state-success-border;
@panel-success-heading-bg:    @state-success-bg;

@panel-warning-text:          @state-warning-text;
@panel-warning-border:        @state-warning-border;
@panel-warning-heading-bg:    @state-warning-bg;

@panel-danger-text:           @state-danger-text;
@panel-danger-border:         @state-danger-border;
@panel-danger-heading-bg:     @state-danger-bg;

@panel-info-text:             @state-info-text;
@panel-info-border:           @state-info-border;
@panel-info-heading-bg:       @state-info-bg;

// Thumbnails
// -------------------------
@thumbnail-padding:           4px;
@thumbnail-bg:                @body-bg;
@thumbnail-border:            @gray-lighter;
@thumbnail-border-radius:     @border-radius-base;

@thumbnail-caption-color:     @text-color;
@thumbnail-caption-padding:   9px;

// Wells
// -------------------------
@well-bg:                     @gray-lighter;

// Badges
// -------------------------
@badge-color:                 #fff;
@badge-link-hover-color:      #fff;
@badge-bg:                    @gray;

@badge-active-color:          @link-color;
@badge-active-bg:             #fff;

@badge-font-weight:           bold;
@badge-line-height:           1;
@badge-border-radius:         10px;

// Breadcrumbs
// -------------------------
@breadcrumb-bg:               @gray-lighter;
@breadcrumb-color:            #ccc;
@breadcrumb-active-color:     @gray;
@breadcrumb-separator:        "/";

// Carousel
// ------------------------

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

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

@carousel-indicator-active-bg:                #fff;
@carousel-indicator-border-color:             #fff;

@carousel-caption-color:                      #fff;

// Close
// ------------------------
@close-font-weight:           bold;
@close-color:                 #000;
@close-text-shadow:           0 1px 0 #fff;

// Code
// ------------------------
@code-color:                  #c7254e;
@code-bg:                     #f9f2f4;

@pre-bg:                      @gray-lighter;
@pre-color:                   @gray-dark;
@pre-border-color:            #ccc;
@pre-scrollable-max-height:   340px;

// Type
// ------------------------
@text-muted:                  @gray-light;
@abbr-border-color:           @gray-light;
@headings-small-color:        @gray-light;
@blockquote-small-color:      @gray-light;
@blockquote-border-color:     @gray-lighter;
@page-header-border-color:    @gray-lighter;

// Miscellaneous
// -------------------------

// Hr border color
@hr-border:                   @gray-lighter;

// Horizontal forms & lists
@component-offset-horizontal: 180px;

// Container sizes
// --------------------------------------------------

// Small screen / tablet
@container-tablet:             ((720px + @grid-gutter-width));
@container-sm:                 @container-tablet;

// Medium screen / desktop
@container-desktop:            ((940px + @grid-gutter-width));
@container-md:                 @container-desktop;

// Large screen / wide desktop
@container-large-desktop:      ((1140px + @grid-gutter-width));
@container-lg:                 @container-large-desktop;

// Flatly 3.0.3
// Bootswatch
// -----------------------------------------------------

@import url("//fonts.googleapis.com/css?family=Lato:400,700,900,400italic");

// Navbar =====================================================================

// Buttons ====================================================================

.btn:active {
  .box-shadow(none);
}

.btn-group.open .dropdown-toggle {
  .box-shadow(none);
}

// Typography =================================================================

.text-primary,
.text-primary:hover {
  color: @brand-primary;
}

.text-success,
.text-success:hover {
  color: @brand-success;
}

.text-danger,
.text-danger:hover {
  color: @brand-danger;
}

.text-warning,
.text-warning:hover {
  color: @brand-warning;
}

.text-info,
.text-info:hover {
  color: @brand-info;
}

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

.table {

  tr.success,
  tr.warning,
  tr.danger {
    color: #fff;
  }
}

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

.form-control,textarea.form-control,
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"],
.uneditable-input {
  border-width: 2px;
  .box-shadow(none);

  &:focus {
    .box-shadow(none);
  }
}

.has-warning {
  .help-block,
  .control-label {
    color: @brand-warning;
  }

  .form-control,
  .form-control:focus {
    border: 2px solid @brand-warning;
  }
}

.has-error {
  .help-block,
  .control-label {
    color: @brand-danger;
  }

  .form-control,
  .form-control:focus {
    border: 2px solid @brand-danger;
  }
}

.has-success {
  .help-block,
  .control-label {
    color: @brand-success;
  }

  .form-control,
  .form-control:focus {
    border: 2px solid @brand-success;
  }
}

// Navs =======================================================================

.nav {
  .open > a,
  .open > a:hover,
  .open > a:focus {
    border-color: transparent;
  }
}

.pagination {

  a,
  a:hover {
    color: #fff;
  }

  .disabled {
    &>a,
    &>a:hover,
    &>a:focus,
    &>span {
      background-color: lighten(@brand-success, 15%);
    }
  }
}

.pager {
  a,
  a:hover {
    color: #fff;
  }

  .disabled {
    &>a,
    &>a:hover,
    &>a:focus,
    &>span {
      background-color: lighten(@brand-success, 15%);
    }
  }
}

// Indicators =================================================================

.alert {

  a,
  .alert-link {
    color: #fff;
    text-decoration: underline;
  }
}

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

.progress {
  height: 10px;
  .box-shadow(none);
}

// Containers =================================================================

.well {
  .box-shadow(none);
  border-width: 0;
}


[IMP] web: force form view label font-size

Some labels may now be placed in a <h1,2,3> tag in some circumstances

// ------------------------------------------------------------------
// Odoo
// ------------------------------------------------------------------

// This file is necessary to make the community edition of the Odoo web
// client compatible with the enterprise edition.

// The problem is that we have two web clients in parallel, and every
// addons should behave properly with both.

@odoo-brand-optional-disabled: #6ED0BC; // Specifically used for status bar status arrows
@odoo-brand-primary: #337ab7;
@odoo-brand-optional: @odoo-brand-primary;
@odoo-brand-secondary: #8f8f8f;
@odoo-form-group-cols: 12;
@odoo-horizontal-padding: 16px;
@odoo-list-grey: #e2e2e0;  // FIXME: listview thead background color
@odoo-main-color-muted: #a8a8a8;
@odoo-main-text-color: #666666;
@odoo-webclient-background-color: @odoo-brand-secondary;
@odoo-view-background-color: white;
@odoo-shadow-color: #303030;
@brand-primary: @odoo-brand-primary;

.oe-view-manager {
    background-color: #f0eeee !important;
}

.o_kanban_view {
    background-color: #f0eeee;
    .o_kanban_header {
        color: black !important;
    }

    .o_kanban_config i, .o_kanban_quick_add i {
        color: #555 !important;
        &:hover {
            background-color: darken(#f0eeee, 10%) !important;
        }
    }

    .o_column_folded {
        background-color: #f0eeee !important;
        border: none !important;
        span.o_column_title, span.o_column_unfold {
            // color: white !important;
        }
    }

    .o_column_quick_create {
        background-color: #f0eeee !important;
        .o_kanban_add_column, .o_kanban_title {
            color: black !important;
        }

    }
}

.oe_list {
    background-color: white !important;
}

.btn-icon {
    .btn-default;
}

.openerp .oe_avatar {
    float: left;
}

.openerp .oe_button_box {
    float: right;
}

@grid-gutter-width: 0;

.oe-control-panel .row {
    margin-left: 15px;
    margin-right: 15px;
}

// Pager input (to edit pager values)
.o_pager_value > input {
    width: 60px;
    text-align: right;
    &:focus {
        outline: none;
    }
}

.oe_form_field_one2many, .oe_form_field_many2many {
    .oe-view-manager {
        background-color: white;

        .o_kanban_view {
            background-color: white;

            .o_kanban_record {
                box-shadow: none;
            }
        }
    }
}

// Buttons containing only an icon
.o_icon_button {
    background-color: transparent;
    border: 0;
    padding: 0;
    outline: none;
}

// Stars
.o_priority {
    display: inline-block;
    padding: 0;
    margin: 0;
    > a {
        display: inline-block;
    }
    .o_star_on, .o_star_off {
        color: @odoo-main-color-muted !important;
        &:hover {
            text-decoration: none;
        }
    }
    .o_star_on {
        color: gold !important;
    }
}

.o_text_overflow {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top; // To update display context changed by overflow:hidden
}

.oe-x2m-control-panel {
    background-color: white;
}

div.o_checkbox {
    display: inline-block;
    vertical-align: sub;
    > input + span {
        display: none;
    }
}

.openerp .oe_formview {
   .oe_button_box {
        .oe_stat_button {
            .stat_button_icon {
                display: inline-block;
            }

            // padding: @odoo-statbutton-vpadding @odoo-statbutton-spacing @odoo-statbutton-vpadding 0px;
            text-align: left;

            .o_button_icon {
                // margin-left: @odoo-statbutton-spacing; // To create the button padding left (firefox bug)
                display: inline-block;
                vertical-align: middle;
                &:before {
                    font-size: x-large;
                    vertical-align: middle;
                }

                width: 30%;
            }

            // .o_form_field_percent_pie {
            //     margin-left: @odoo-statbutton-spacing; // To create the button padding left (firefox bug)
            // }

            .o_stat_info { // contains the value and text
                display: inline-block;
                vertical-align: middle;

                max-width: 70%;
                // padding-right: @odoo-statbutton-spacing;
                line-height: 1.2;

                .o_stat_value {
                    .o_text_overflow;
                    font-weight: 700;
                    color: @odoo-brand-primary;
                }
                .o_stat_text {
                    .o_text_overflow;
                    font-size: small;

                    .o_stat_value {
                        display: inline;
                    }
                }
            }

            // Some buttons only display text and directly use the WidgetButton template instead of StatInfo
            > span {
                .o_stat_info; // layout
                font-size: small;
                white-space: normal; // text on several lines if needed
            }
        }

        + .oe_title {
            width: 400px;
        }

        + .oe_avatar {
            > img {
                max-width: 90px;
                max-height: 90px;
            }

            + .oe_title {
                width: 400px;
                padding-left: 95px;
            }
        }
    }

    .o_row > * {
        width: auto!important; // oe_inline
    }

    .oe_form label {
        font-size: 13px;
    }

    .o_form_field_many2manytags {
        .o-inline-flex-display();
        .o-flex-flow(row, wrap);
        .o-align-items(flex-start);

        .badge {
            .o-flex(0, 0, auto);
            margin: 0 3px 3px 0;
            .o_delete {
                cursor: pointer;
            }
        }

        padding: 0;
        > .oe_form_field_many2one {
            padding: 0;
        }
    }

    &.oe_form_editable .o_form_field_many2manytags {
        border: 1px solid #CCC;
        border-radius: 3px;

        &.o_form_field_empty {
            display: none;
        }

        > .oe_form_field {
            .o-flex(1, 0, 100px);

            input {
                border: none;
            }
        }
    }

    .o_address_format {
        width: 100%;

        > .oe_form_field {
            width: auto;
            display: block;
        }

        > .o_address_street, > .o_address_country {
            clear: left;
            width: 100%;
        }
        > .o_address_city, > .o_address_state, > .o_address_zip {
            float: left;
            margin-right: 2%;
        }
        > .o_address_zip {
            margin-right: 0;
        }
    }
    &.oe_form_editable .o_address_format {
        > .o_address_city {
            width: 38%;
        }
        > .o_address_state {
            width: 33%;
        }
        > .o_address_zip {
            width: 25%;
        }
    }
}

// Search options dropdowns
.o-search-options-dropdown-custom-li() {
    margin: 3px 25px;
    width: auto;
    max-width: 250px;

}
// Open and closed carets in dropdowns
.o_closed_menu {
    position: relative;
    a:before {
        .o-caret-right;
        .o-position-absolute(@top: 50%, @left: 12px);
        margin-top: (-@caret-width-base);
    }
}
.o_open_menu {
    position: relative;
    a:before {
        .o-caret-down;
        .o-position-absolute(@top: 50%, @left: 9px);
        margin-top: (-@caret-width-base);
    }
}

// Favorites Menu -> Add to my dashboard
.o_favorites_menu {
    .o_add_to_dashboard_input {
        .form-control();
    }
    .o_add_to_dashboard_button {
        .btn();
        .btn-default();
    }
}

// Because the `web_planner` module has to work with Odoo community and enterprise without
// code duplication, fine-tune the display of it in the community webclient here
#PlannerDialog {
    top: 35px;
    -webkit-box-shadow: 0 3px 9px #666666;
    box-shadow: 0 3px 9px #666666;
}

// ------------------------------------------------------------------
// Odoo
// ------------------------------------------------------------------

// This file is necessary to make the community edition of the Odoo web
// client compatible with the enterprise edition.

// The problem is that we have two web clients in parallel, and every
// addons should behave properly with both.

@odoo-brand-optional-disabled: #6ED0BC; // Specifically used for status bar status arrows
@odoo-brand-primary: #337ab7;
@odoo-brand-optional: @odoo-brand-primary;
@odoo-brand-secondary: #8f8f8f;
@odoo-form-group-cols: 12;
@odoo-horizontal-padding: 16px;
@odoo-list-grey: #e2e2e0;  // FIXME: listview thead background color
@odoo-main-color-muted: #a8a8a8;
@odoo-main-text-color: #666666;
@odoo-webclient-background-color: @odoo-brand-secondary;
@odoo-view-background-color: white;
@odoo-shadow-color: #303030;
@brand-primary: @odoo-brand-primary;

.oe-view-manager {
    background-color: #f0eeee !important;
}

.o_kanban_view {
    background-color: #f0eeee;
    .o_kanban_header {
        color: black !important;
    }

    .o_kanban_config i, .o_kanban_quick_add i {
        color: #555 !important;
        &:hover {
            background-color: darken(#f0eeee, 10%) !important;
        }
    }

    .o_column_folded {
        background-color: #f0eeee !important;
        border: none !important;
        span.o_column_title, span.o_column_unfold {
            // color: white !important;
        }
    }

    .o_column_quick_create {
        background-color: #f0eeee !important;
        .o_kanban_add_column, .o_kanban_title {
            color: black !important;
        }

    }
}

.oe_list {
    background-color: white !important;
}

.btn-icon {
    .btn-default;
}

.openerp .oe_avatar {
    float: left;
}

.openerp .oe_button_box {
    float: right;
}

@grid-gutter-width: 0;

.oe-control-panel .row {
    margin-left: 15px;
    margin-right: 15px;
}

// Pager input (to edit pager values)
.o_pager_value > input {
    width: 60px;
    text-align: right;
    &:focus {
        outline: none;
    }
}

.oe_form_field_one2many, .oe_form_field_many2many {
    .oe-view-manager {
        background-color: white;

        .o_kanban_view {
            background-color: white;

            .o_kanban_record {
                box-shadow: none;
            }
        }
    }
}

// Buttons containing only an icon
.o_icon_button {
    background-color: transparent;
    border: 0;
    padding: 0;
    outline: none;
}

// Stars
.o_priority {
    display: inline-block;
    padding: 0;
    margin: 0;
    > a {
        display: inline-block;
    }
    .o_star_on, .o_star_off {
        color: @odoo-main-color-muted !important;
        &:hover {
            text-decoration: none;
        }
    }
    .o_star_on {
        color: gold !important;
    }
}

.o_text_overflow {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top; // To update display context changed by overflow:hidden
}

.oe-x2m-control-panel {
    background-color: white;
}

div.o_checkbox {
    display: inline-block;
    vertical-align: sub;
    > input + span {
        display: none;
    }
}

.openerp .oe_formview {
   .oe_button_box {
        .oe_stat_button {
            .stat_button_icon {
                display: inline-block;
            }

            // padding: @odoo-statbutton-vpadding @odoo-statbutton-spacing @odoo-statbutton-vpadding 0px;
            text-align: left;

            .o_button_icon {
                // margin-left: @odoo-statbutton-spacing; // To create the button padding left (firefox bug)
                display: inline-block;
                vertical-align: middle;
                &:before {
                    font-size: x-large;
                    vertical-align: middle;
                }

                width: 30%;
            }

            // .o_form_field_percent_pie {
            //     margin-left: @odoo-statbutton-spacing; // To create the button padding left (firefox bug)
            // }

            .o_stat_info { // contains the value and text
                display: inline-block;
                vertical-align: middle;

                max-width: 70%;
                // padding-right: @odoo-statbutton-spacing;
                line-height: 1.2;

                .o_stat_value {
                    .o_text_overflow;
                    font-weight: 700;
                    color: @odoo-brand-primary;
                }
                .o_stat_text {
                    .o_text_overflow;
                    font-size: small;

                    .o_stat_value {
                        display: inline;
                    }
                }
            }

            // Some buttons only display text and directly use the WidgetButton template instead of StatInfo
            > span {
                .o_stat_info; // layout
                font-size: small;
                white-space: normal; // text on several lines if needed
            }
        }

        + .oe_title {
            width: 400px;
        }

        + .oe_avatar {
            > img {
                max-width: 90px;
                max-height: 90px;
            }

            + .oe_title {
                width: 400px;
                padding-left: 95px;
            }
        }
    }

    .o_row > * {
        width: auto!important; // oe_inline
    }

    .o_form_field_many2manytags {
        .o-inline-flex-display();
        .o-flex-flow(row, wrap);
        .o-align-items(flex-start);

        .badge {
            .o-flex(0, 0, auto);
            margin: 0 3px 3px 0;
            .o_delete {
                cursor: pointer;
            }
        }

        padding: 0;
        > .oe_form_field_many2one {
            padding: 0;
        }
    }

    &.oe_form_editable .o_form_field_many2manytags {
        border: 1px solid #CCC;
        border-radius: 3px;

        &.o_form_field_empty {
            display: none;
        }

        > .oe_form_field {
            .o-flex(1, 0, 100px);

            input {
                border: none;
            }
        }
    }

    .o_address_format {
        width: 100%;

        > .oe_form_field {
            width: auto;
            display: block;
        }

        > .o_address_street, > .o_address_country {
            clear: left;
            width: 100%;
        }
        > .o_address_city, > .o_address_state, > .o_address_zip {
            float: left;
            margin-right: 2%;
        }
        > .o_address_zip {
            margin-right: 0;
        }
    }
    &.oe_form_editable .o_address_format {
        > .o_address_city {
            width: 38%;
        }
        > .o_address_state {
            width: 33%;
        }
        > .o_address_zip {
            width: 25%;
        }
    }
}

// Search options dropdowns
.o-search-options-dropdown-custom-li() {
    margin: 3px 25px;
    width: auto;
    max-width: 250px;

}
// Open and closed carets in dropdowns
.o_closed_menu {
    position: relative;
    a:before {
        .o-caret-right;
        .o-position-absolute(@top: 50%, @left: 12px);
        margin-top: (-@caret-width-base);
    }
}
.o_open_menu {
    position: relative;
    a:before {
        .o-caret-down;
        .o-position-absolute(@top: 50%, @left: 9px);
        margin-top: (-@caret-width-base);
    }
}

// Favorites Menu -> Add to my dashboard
.o_favorites_menu {
    .o_add_to_dashboard_input {
        .form-control();
    }
    .o_add_to_dashboard_button {
        .btn();
        .btn-default();
    }
}

// Because the `web_planner` module has to work with Odoo community and enterprise without
// code duplication, fine-tune the display of it in the community webclient here
#PlannerDialog {
    top: 35px;
    -webkit-box-shadow: 0 3px 9px #666666;
    box-shadow: 0 3px 9px #666666;
}


Fixed build issues.

Fixed build issues.

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/JeevanJames/angular-template-shared.git/'


make ugly "Submit a Review" link less ugly (bug @krupa)

@import 'lib';

// On page load this gets transformed by JS into a star picker.
select[name=rating] {
    display: none;
}

li a.delete {
    color: @red;
    &:hover {
        color: @maroon;
    }
}

.detail {
    .reviews {
        margin-bottom: 15px;
        > div {
            float: left;
            width: 50%;
        }
    }
    #submit-review {
        bottom: 15px;
    }
}

section.replies .review.reply {
    display: block;
}

.listing {
    header img {
        float: left;
        margin-right: 10px;
    }
    .reviews {
        margin-bottom: 5px;
        figure,
        figure + div {
            float: left;
        }
        figure {
            width: 40%;
            + div {
                width: 25%;
            }
        }
        #submit-review {
            bottom: 20px;
        }
    }
    #review-list + .paginator {
        margin-top: 15px;
    }
}

#reviews-info {
    margin-top: 20px;
    position: relative;
}

#reviews {
    position: relative;
    > div {
        .border-box;
    }
    ul {
        margin: 0;
        padding: 0;
    }
    #submit-review {
        position: absolute;
        margin: 10px 0;
    }
    .not-rated {
        margin-bottom: 5px;
        + p a {
            padding: 5px 20px 5px 0;
        }
    }
}

#review-list {
    background: lighten(@bg-lite, 2%);
    border-top: 1px solid darken(@light-gray, 2%);
    border-bottom: 1px solid lighten(@faint-gray, 4%);
}

.review {
    .transition(~'.3s all');
    border: 1px solid darken(@light-gray, 2%);
    border-width: 0 1px;
    border-bottom: 1px solid darken(@light-gray, 2%);
    list-style-type: none;
    padding: 10px;
    position: relative;
    + .review {
        border-top: 1px solid @white;
    }
    &.reply {
        background: url(../../img/mkt/icons/reply.png) 10px 15px no-repeat;
        display: none;
        padding-left: 35px;
    }
    &.deleting {
        background: fade(@red, 40%);
    }
    &.deleted {
        border: 0;
        height: 0;
        overflow: hidden;
        padding: 0;
        + .review {
            border-top: 0;
        }
    }
    .byline, .timestamp {
        font-size: 12px;
    }
    .byline {
        color: @medium-gray;
        b {
            color: @gray;
        }
    }
    .timestamp {
        color: @note-gray;
        float: right;
        &:hover {
            color: @gray;
        }
    }
    .body {
        margin: 10px 0;
    }
    .view-reply {
        font-size: 12px;
        font-weight: 600;
        padding: 5px 10px;
    }
    ul {
        float: left;
        list-style: none;
    }
    li {
        display: inline-block;
        &.hidden {
            display: none;
        }
        &:not(.hidden) + li:before,
        + li.hidden + li:before {
            color: @note-gray;
            content: "\00a0\2022\00a0\00a0";
        }
    }
}

#review-list .review:nth-of-type(2n) {
    background-color: lighten(@bg, 5%);
    + .replies .review {
        background-color: lighten(@bg, 5%);
    }
}

.overlay {
    form {
        margin: 0;
    }
    h2, .char-count {
        margin-bottom: 10px;
    }
    .req-error {
        float: left;
        font-size: 13px;
        line-height: 18px;
        margin-top: 5px;
    }
}

header.product {
    margin-bottom: 15px;
    position: relative;
    .visual {
        margin-right: 15px;
        height: 64px;
        width: 64px;
        + div {
            float: left;
            max-width: 905px;
        }
    }
    h1 {
        color: @navy-gray;
        font-size: 22px;
        font-weight: 400;
        line-height: 1.2;
        &.multi {
            font-size: 22px;
            small, span {
                .ellipsis;
                display: block;
                margin-bottom: -8px;
                padding-bottom: 6px;
            }
            small {
                color: lighten(@navy-gray, 10%);
                display: block;
                font-size: 14px;
                font-weight: 600;
            }
        }
    }
    p {
        font-size: 14px;
        line-height: 1;
        margin: 5px 0;
    }
}

#submit-review {
    header.product .simple-field,
    &.friendly header .errorlist {
        margin: 5px 0 0;
    }
    h2 {
        font-size: 18px;
        font-weight: 400;
    }
    .req,
    label[for=id_rating] {
        display: none;
    }
}

.stars {
    background: url(../../img/mkt/stars/sprite-medium.png) no-repeat;
    display: inline-block;
    height: 14px;
    margin-right: 4px;
    text-indent: -9999px;
    vertical-align: middle;
    width: 64px;
    &.stars-4 { background-position: -13px 0; }
    &.stars-3 { background-position: -26px 0; }
    &.stars-2 { background-position: -39px 0; }
    &.stars-1 { background-position: -52px 0; }
    &.stars-0 { background-position: -65px 0; }
    &.ratingwidget {
        background: url(../../img/mkt/stars/32.png) repeat-x;
        background-repeat: repeat-x 5px 0;
        height: 32px;
        width: 200px;
        // Yeah, maybe I should just set a class in JS. I thought I was being clever.
        &.stars-1 label[data-stars="1"], &.stars-2 label[data-stars="1"], &.stars-2 label[data-stars="2"],
        &.stars-3 label[data-stars="1"], &.stars-3 label[data-stars="2"], &.stars-3 label[data-stars="3"],
        &.stars-4 label[data-stars="1"], &.stars-4 label[data-stars="2"], &.stars-4 label[data-stars="3"], &.stars-4 label[data-stars="4"],
        &.stars-5 label[data-stars="1"], &.stars-5 label[data-stars="2"], &.stars-5 label[data-stars="3"], &.stars-5 label[data-stars="4"], &.stars-5 label[data-stars="5"] {
            background: url(../../img/mkt/stars/32.png) 100% 100%;
        }
        label {
            height: 32px;
            width: 40px;
        }
    }
}

.html-rtl .stars {
    margin: 0 0 0 4px;
}

.featured .stars {
    background-image: url(../../img/mkt/stars/sprite-tiny.png);
    height: 9px;
    width: 45px;
    &.stars-4 { background-position: -9px 0; }
    &.stars-3 { background-position: -18px 0; }
    &.stars-2 { background-position: -27px 0; }
    &.stars-1 { background-position: -36px 0; }
    &.stars-0 { background-position: -45px 0; }
}

.featured .rating .cnt {
    display: none;
}

.no-rating strong {
    font-size: 12px;
    font-weight: 700;
}

.average-rating {
    // Clicking on this will expose the rating breakdown.
    cursor: pointer;
    strong {
        display: none;
    }
    span {
        color: @green;
        vertical-align: middle;
    }
    &:hover span {
        text-decoration: none;
    }
}

.simple-field.rating {
    .border-radius(4px);
    .box-shadow(inset 0 1px 4px rgba(0,0,0,.25),
                inset 0 1px 0 fade(@white, 80%),
                0 1px 0 fade(@white, 80%));
    background: rgba(200,200,200,.2);
    margin-bottom: 15px;
    padding: 20px 10px;
    .ratingwidget {
        margin: 0 auto;
    }
    .errorlist {
        margin-top: 10px;
        text-align: center;
    }
}

.ratingwidget {
    display: block;
    float: none;
    width: 65px;
    input {
        display: none;
    }
    label {
        cursor: pointer;
        display: block;
        float: left;
        margin: 0;
        text-indent: -9999px;
        width: 13px;
    }
}

.grouped-ratings {
    .border-box;
    .border-radius(4px);
    background: rgb(226,230,233);
    border: 1px solid @bg-gray;
    color: @medium-gray;
    display: none;
    padding: 17px 15px;
    position: relative;
    top: -5px;
    width: 100%;
    z-index: 0;
    // The arrow.
    &:before {
        .transform(~'rotate(45deg)');
        background: rgb(226,230,233);
        border: 1px solid @bg-gray;
        border-width: 1px 0 0 1px;
        content: "";
        height: 12px;
        position: absolute;
        top: -8px;
        left: 116px;
        right: 22px;
        width: 12px;
        z-index: 0;
    }
    .rating-bar {
        height: 22px;
        float: left;
        overflow: visible;
        width: 96px;
        // OMFG.
        &:before {
            .box-shadow(0 3px 6px @dark-gray);
            content: "";
            display: block;
            height: 22px;
            position: absolute;
            top: 0;
            left: 71px;  /* old stars: 96px */
            width: 2px;
            z-index: 0;
        }
        &:after {
            content: "";
            background: rgb(226,230,233);
            height: 36px;
            position: absolute;
            top: -5px;
            left: 64px;  /* old stars: 89px */
            width: 9px;
            z-index: 1;
        }
        .bar {
            background: rgb(205,210,214);
            border-top: rgb(183,188,192) 1px solid;
            border-bottom: rgb(234,238,239) 1px solid;
            display: block;
            height: 4px;
            position: relative;
            margin: 10px 10px 0 3px;
            &:before {
                background: @barely-gray;
                content: "";
                display: block;
                height: 22px;
                position: absolute;
                top: -11px;
                left: -2px;
                width: 1px;
            }
        }
    }
    li {
        position: relative;
        &:first-child,
        &:last-child {
            .rating-bar:before {
                .box-shadow(0 3px 6px @medium-gray);
            }
            .bar:before {
                height: 26px;
            }
        }
        &:first-child .bar:before {
            top: -10px;
        }
    }
    .num-ratings {
        color: lighten(@navy-gray, 10%);
        font-size: 11px;
        line-height: 8px;
        position: absolute;
        top: -2px;
        right: -5px;
        width: 1px;
        word-wrap: normal;
    }
    .stars {
        float: left;
        margin: 7px 8px 0 0;  /* old stars: 4px 8px 0 0 */
    }
}

@media (max-width: @4col) {
    #submit-review p.reminder {
        display: none;
    }
    #reviews #review-list {
        margin: 0 -10px -5px;
        .review {
            border-left: 0;
            border-right: 0;
            .byline, .timestamp {
                font-size: 12px;
            }
            .body {
                font-size: 14px;
                line-height: 1.2;
            }
        }
        .review:nth-child(5) ~ .review {
            display: none;
        }
    }
}

.items-profile {
    padding: 0;

    .review {
        background: @white;
    }
    .review:first-child {
        border-top: 1px solid @light-gray;
    }

    .review-inner {
        padding: 0 10px 0 95px;
    }
    h3 {
        font-size: 18px;
    }
    .icon-profile {
        position: absolute;
        left: 10px;
        max-height: 64px;
        max-width: 64px;
    }
    .byline {
        display: none;
    }
    .body {
        margin: 5px 0;
    }
    .timestamp {
        position: absolute;
        top: 10px;
        right: 10px;
    }
    .actions {
        position: absolute;
        bottom: 15px;
        right: 10px;
    }
}

.submit-review {
    float: left;
}
p.support-link {
    float: right;
    font-size: 13px;
    margin-top: 48px;
}

@media (max-width: @7col) {
    header.product .visual + div {
        max-width: 615px;
    }
}

@media (max-width: @4col) {
    .support-link {
        clear: left;
        float: none;
        margin-top: 0;
    }
    #reviews-detail {
        .view-more-reviews,
        .add-edit-review {
            display: none;
        }
    }
    header.product .visual + div {
        max-width: 206px;
    }
}

@import 'lib';

// On page load this gets transformed by JS into a star picker.
select[name=rating] {
    display: none;
}

li a.delete {
    color: @red;
    &:hover {
        color: @maroon;
    }
}

.detail {
    .reviews {
        margin-bottom: 15px;
        > div {
            float: left;
            width: 50%;
        }
    }
    #submit-review {
        bottom: 15px;
    }
}

section.replies .review.reply {
    display: block;
}

.listing {
    header img {
        float: left;
        margin-right: 10px;
    }
    .reviews {
        margin-bottom: 5px;
        figure,
        figure + div {
            float: left;
        }
        figure {
            width: 40%;
            + div {
                width: 25%;
            }
        }
        #submit-review {
            bottom: 20px;
        }
    }
    #review-list + .paginator {
        margin-top: 15px;
    }
}

#reviews-info {
    margin-top: 20px;
    position: relative;
}

#reviews {
    position: relative;
    > div {
        .border-box;
    }
    ul {
        margin: 0;
        padding: 0;
    }
    #submit-review {
        position: absolute;
        margin: 10px 0;
    }
}

#review-list {
    background: lighten(@bg-lite, 2%);
    border-top: 1px solid darken(@light-gray, 2%);
    border-bottom: 1px solid lighten(@faint-gray, 4%);
}

.review {
    .transition(~'.3s all');
    border: 1px solid darken(@light-gray, 2%);
    border-width: 0 1px;
    border-bottom: 1px solid darken(@light-gray, 2%);
    list-style-type: none;
    padding: 10px;
    position: relative;
    + .review {
        border-top: 1px solid @white;
    }
    &.reply {
        background: url(../../img/mkt/icons/reply.png) 10px 15px no-repeat;
        display: none;
        padding-left: 35px;
    }
    &.deleting {
        background: fade(@red, 40%);
    }
    &.deleted {
        border: 0;
        height: 0;
        overflow: hidden;
        padding: 0;
        + .review {
            border-top: 0;
        }
    }
    .byline, .timestamp {
        font-size: 12px;
    }
    .byline {
        color: @medium-gray;
        b {
            color: @gray;
        }
    }
    .timestamp {
        color: @note-gray;
        float: right;
        &:hover {
            color: @gray;
        }
    }
    .body {
        margin: 10px 0;
    }
    .view-reply {
        font-size: 12px;
        font-weight: 600;
        padding: 5px 10px;
    }
    ul {
        float: left;
        list-style: none;
    }
    li {
        display: inline-block;
        &.hidden {
            display: none;
        }
        &:not(.hidden) + li:before,
        + li.hidden + li:before {
            color: @note-gray;
            content: "\00a0\2022\00a0\00a0";
        }
    }
}

#review-list .review:nth-of-type(2n) {
    background-color: lighten(@bg, 5%);
    + .replies .review {
        background-color: lighten(@bg, 5%);
    }
}

.overlay {
    form {
        margin: 0;
    }
    h2, .char-count {
        margin-bottom: 10px;
    }
    .req-error {
        float: left;
        font-size: 13px;
        line-height: 18px;
        margin-top: 5px;
    }
}

header.product {
    margin-bottom: 15px;
    position: relative;
    .visual {
        margin-right: 15px;
        height: 64px;
        width: 64px;
        + div {
            float: left;
            max-width: 905px;
        }
    }
    h1 {
        color: @navy-gray;
        font-size: 22px;
        font-weight: 400;
        line-height: 1.2;
        &.multi {
            font-size: 22px;
            small, span {
                .ellipsis;
                display: block;
                margin-bottom: -8px;
                padding-bottom: 6px;
            }
            small {
                color: lighten(@navy-gray, 10%);
                display: block;
                font-size: 14px;
                font-weight: 600;
            }
        }
    }
    p {
        font-size: 14px;
        line-height: 1;
        margin: 5px 0;
    }
}

#submit-review {
    header.product .simple-field,
    &.friendly header .errorlist {
        margin: 5px 0 0;
    }
    h2 {
        font-size: 18px;
        font-weight: 400;
    }
    .req,
    label[for=id_rating] {
        display: none;
    }
}

.stars {
    background: url(../../img/mkt/stars/sprite-medium.png) no-repeat;
    display: inline-block;
    height: 14px;
    margin-right: 4px;
    text-indent: -9999px;
    vertical-align: middle;
    width: 64px;
    &.stars-4 { background-position: -13px 0; }
    &.stars-3 { background-position: -26px 0; }
    &.stars-2 { background-position: -39px 0; }
    &.stars-1 { background-position: -52px 0; }
    &.stars-0 { background-position: -65px 0; }
    &.ratingwidget {
        background: url(../../img/mkt/stars/32.png) repeat-x;
        background-repeat: repeat-x 5px 0;
        height: 32px;
        width: 200px;
        // Yeah, maybe I should just set a class in JS. I thought I was being clever.
        &.stars-1 label[data-stars="1"], &.stars-2 label[data-stars="1"], &.stars-2 label[data-stars="2"],
        &.stars-3 label[data-stars="1"], &.stars-3 label[data-stars="2"], &.stars-3 label[data-stars="3"],
        &.stars-4 label[data-stars="1"], &.stars-4 label[data-stars="2"], &.stars-4 label[data-stars="3"], &.stars-4 label[data-stars="4"],
        &.stars-5 label[data-stars="1"], &.stars-5 label[data-stars="2"], &.stars-5 label[data-stars="3"], &.stars-5 label[data-stars="4"], &.stars-5 label[data-stars="5"] {
            background: url(../../img/mkt/stars/32.png) 100% 100%;
        }
        label {
            height: 32px;
            width: 40px;
        }
    }
}

.html-rtl .stars {
    margin: 0 0 0 4px;
}

.featured .stars {
    background-image: url(../../img/mkt/stars/sprite-tiny.png);
    height: 9px;
    width: 45px;
    &.stars-4 { background-position: -9px 0; }
    &.stars-3 { background-position: -18px 0; }
    &.stars-2 { background-position: -27px 0; }
    &.stars-1 { background-position: -36px 0; }
    &.stars-0 { background-position: -45px 0; }
}

.featured .rating .cnt {
    display: none;
}

.no-rating strong {
    font-size: 12px;
    font-weight: 700;
}

.average-rating {
    // Clicking on this will expose the rating breakdown.
    cursor: pointer;
    strong {
        display: none;
    }
    span {
        color: @green;
        vertical-align: middle;
    }
    &:hover span {
        text-decoration: none;
    }
}

.simple-field.rating {
    .border-radius(4px);
    .box-shadow(inset 0 1px 4px rgba(0,0,0,.25),
                inset 0 1px 0 fade(@white, 80%),
                0 1px 0 fade(@white, 80%));
    background: rgba(200,200,200,.2);
    margin-bottom: 15px;
    padding: 20px 10px;
    .ratingwidget {
        margin: 0 auto;
    }
    .errorlist {
        margin-top: 10px;
        text-align: center;
    }
}

.ratingwidget {
    display: block;
    float: none;
    width: 65px;
    input {
        display: none;
    }
    label {
        cursor: pointer;
        display: block;
        float: left;
        margin: 0;
        text-indent: -9999px;
        width: 13px;
    }
}

.grouped-ratings {
    .border-box;
    .border-radius(4px);
    background: rgb(226,230,233);
    border: 1px solid @bg-gray;
    color: @medium-gray;
    display: none;
    padding: 17px 15px;
    position: relative;
    top: -5px;
    width: 100%;
    z-index: 0;
    // The arrow.
    &:before {
        .transform(~'rotate(45deg)');
        background: rgb(226,230,233);
        border: 1px solid @bg-gray;
        border-width: 1px 0 0 1px;
        content: "";
        height: 12px;
        position: absolute;
        top: -8px;
        left: 116px;
        right: 22px;
        width: 12px;
        z-index: 0;
    }
    .rating-bar {
        height: 22px;
        float: left;
        overflow: visible;
        width: 96px;
        // OMFG.
        &:before {
            .box-shadow(0 3px 6px @dark-gray);
            content: "";
            display: block;
            height: 22px;
            position: absolute;
            top: 0;
            left: 71px;  /* old stars: 96px */
            width: 2px;
            z-index: 0;
        }
        &:after {
            content: "";
            background: rgb(226,230,233);
            height: 36px;
            position: absolute;
            top: -5px;
            left: 64px;  /* old stars: 89px */
            width: 9px;
            z-index: 1;
        }
        .bar {
            background: rgb(205,210,214);
            border-top: rgb(183,188,192) 1px solid;
            border-bottom: rgb(234,238,239) 1px solid;
            display: block;
            height: 4px;
            position: relative;
            margin: 10px 10px 0 3px;
            &:before {
                background: @barely-gray;
                content: "";
                display: block;
                height: 22px;
                position: absolute;
                top: -11px;
                left: -2px;
                width: 1px;
            }
        }
    }
    li {
        position: relative;
        &:first-child,
        &:last-child {
            .rating-bar:before {
                .box-shadow(0 3px 6px @medium-gray);
            }
            .bar:before {
                height: 26px;
            }
        }
        &:first-child .bar:before {
            top: -10px;
        }
    }
    .num-ratings {
        color: lighten(@navy-gray, 10%);
        font-size: 11px;
        line-height: 8px;
        position: absolute;
        top: -2px;
        right: -5px;
        width: 1px;
        word-wrap: normal;
    }
    .stars {
        float: left;
        margin: 7px 8px 0 0;  /* old stars: 4px 8px 0 0 */
    }
}

@media (max-width: @4col) {
    #submit-review p.reminder {
        display: none;
    }
    #reviews #review-list {
        margin: 0 -10px -5px;
        .review {
            border-left: 0;
            border-right: 0;
            .byline, .timestamp {
                font-size: 12px;
            }
            .body {
                font-size: 14px;
                line-height: 1.2;
            }
        }
        .review:nth-child(5) ~ .review {
            display: none;
        }
    }
}

.items-profile {
    padding: 0;

    .review {
        background: @white;
    }
    .review:first-child {
        border-top: 1px solid @light-gray;
    }

    .review-inner {
        padding: 0 10px 0 95px;
    }
    h3 {
        font-size: 18px;
    }
    .icon-profile {
        position: absolute;
        left: 10px;
        max-height: 64px;
        max-width: 64px;
    }
    .byline {
        display: none;
    }
    .body {
        margin: 5px 0;
    }
    .timestamp {
        position: absolute;
        top: 10px;
        right: 10px;
    }
    .actions {
        position: absolute;
        bottom: 15px;
        right: 10px;
    }
}

.submit-review {
    float: left;
}
p.support-link {
    float: right;
    font-size: 13px;
    margin-top: 48px;
}

@media (max-width: @7col) {
    header.product .visual + div {
        max-width: 615px;
    }
}

@media (max-width: @4col) {
    .support-link {
        clear: left;
        float: none;
        margin-top: 0;
    }
    #reviews-detail {
        .view-more-reviews,
        .add-edit-review {
            display: none;
        }
    }
    header.product .visual + div {
        max-width: 206px;
    }
}


newline at end of start.less

newline at end of start.less

fatal: unable to access 'https://github.com/pcoughlin/appmaker.git/': The requested URL returned error: 403


Tweak links

Tweak links

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/metao1/chat.git/'