@charset "UTF-8";
/** -------------------------------------------
    Project Styles
    ------------------------------------------- **/
/**
 * First Import Settings
 * These settings are defines simple color and sizes for Melange defaults
 * Also some settings such as `$support-for-ie8` etc. are used in Caffeine mixins
 * You are free to extend the settings for system wide use.
 */
/**
 * System wide settings
 *
 * All the imported values are set to "null" if they have a default value.
 * So if you want to use them as default, do not change to null value.
 */
/** -------------------------------------------
    Settings for default overwrites and
    GUI related variables
    ------------------------------------------- **/
/** -------------------------------------------
    System supports
    ------------------------------------------- **/
/** -------------------------------------------
    Default class/definition names
    ------------------------------------------- **/
/**
 * Name space prefix
 * Adds a defined namespace prefix to generated class names
 */
/**
 * Class names for grid
 * @default $row-name: 'row'
 * @default $column-name: 'column'
 * @default $column-name-plural: 'columns'
 */
/**
 * Button names for action
 *
 * @default $action-button: '-action'; // only used for similar class selector
 * @default $primary-button: 'primary-action';
 * @default $secondary-button: 'secondary-action';
 * @default $tertiary-button: 'tertiary-action';
 * @default $cancel-button: 'cancel-action';
 */
/**
 * Folders
 * Not actually a namespace but folder names also have different preferences
 * @default $images: '../images/'; relative to styles folder
 * @default $retina-suffix: '@2x'
 */
/** -------------------------------------------
    Animation Related Variables
    ------------------------------------------- **/
/**
 * Duration
 * 
 * Duration time for transition animations
 * @default .4s
 */
/**
 * Easing
 *
 * Easing style
 * @default ease
 */
/** -------------------------------------------
    Size Definitions
    ------------------------------------------- **/
/**
 * Spacing in element
 *
 * Sets the padding sizes for an element
 * @default $base-spacing 1em
 * @default $base-input-spacing 5px
 */
/**
 * Grid gutter and columns
 *
 * Defines the grid gutter size and column count in a row
 * Grid columns floated by default. But it is optional whether float or not
 * for percentage widths.
 * @default $base-gutter: 20px
 * @default $base-grid-columns: 18
 * @default $base-float-widths: true
 */
/**
 * Border Widths
 *
 * Applied border with for input fields and table borders
 * @default $base-border-width: 1px;
 */
/* Site size*/
/** -------------------------------------------
    Fonts
    ------------------------------------------- **/
/**
 * Global font definitions
 * @default $base-font-size: 16px
 * @default $base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
 * @default $base-line-height: 1.5
 * @default $base-font-icon: null
 */
/** -------------------------------------------
    Colors
    ------------------------------------------- **/
/**
 * Named Colors
 *
 * Some named colors for inheriting colors over different variables
 * @default $color-primary    : #009bdc;
 * @default $color-secondary  : #67af00;
 * @default $color-tertiary   : #ffa900;
 * @default $color-cancel     : #e87352;
 * @default $color-error      : $color-cancel;
 * @default $color-text       : #222;
 * @default $color-light-gray : #e5e5e5;
 * @default $color-gray       : #c6c6c6;
 * @default $color-dark-gray  : #a6a6a6;
 * @default $color-white      : #fff;
 * @default $color-black      : #000;
 */
/**
 * Simple colors for general styling
 * @default $base-color: #222
 */
/**
 * Border Colors
 *
 * Colors applied to border in focus, disabled, readonly and stationary state
 * @default $base-border-color: #c6c6c6;
 * @default $base-border-highlight: #a6a6a6;
 * @default $base-border-disabled: #e9e9e9;
 * @default $base-border-readonly: #c6c6c6;
 */
/**
 * Field Background Colors
 *
 * Color applied to field background in focus, disabled, readonly and stationary state
 * @default $base-field-background: #fff;
 * @default $base-field-highlight: #fff;
 * @default $base-field-disabled: #c6c6c6;
 * @default $base-field-readonly: #e5e5e5;
 */
/**
 * Button colors
 */
/**
 * Default Button
 *
 * Unstyled, normal button
 * @default $base-button-color: #e5e5e5;
 * @default $base-button-text-color: #222;
 */
/**
 * Primary Action Button
 *
 * Maybe used for call-to-action button or/and save/submit buttons in forms
 * @default $base-primary-color: #009bdc;
 * @default $base-primary-text-color: #fff;
 */
/**
 * Secondary Action Button
 *
 * Useful for indication secondary action in a form near the primary action button
 * @default $base-secondary-color: #67af00;
 * @default $base-secondary-text-color: #fff;
 */
/**
 * Tertiary Action Button
 *
 * Useful for actions whether they are not fit for primary or secondary
 * @default $base-tertiary-color: #ffa900;
 * @default $base-tertiary-text-color: #fff;
 */
/**
 * Cancel Action Button
 *
 * Simply used for cancel button for a form or call-to-action, confirmation etc.
 * @default $base-cancel-color: #e87352;
 * @default $base-cancel-text-color: #fff;
 */
/**
 * Second Import Caffeine
 * Caffeine is a Sass based mixin/function library (see: https://github.com/bcinarli/caffeine)
 * Mostly Melange is not depended on Caffeine.
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Caffeine 
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    System Functions for internal usage
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    Generic Functions
    ------------------------------------------- **/
/**
  * Remove units
  */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Text Related Functions
    ------------------------------------------- **/
/**
  * Rem to PX
  */
/**
 * REM converter
 * in style's config, we hope to have a base-font-size variable,
 * if not, we define it according to standart html font-size
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    String Manipulation Functions
    ------------------------------------------- **/
/**
  * String Replacement
  * Mimics the PHP's str_replace function
  * @param {string} $search   The value being searched for, otherwise known as the needle
  * @param {string} $replace  The replacement value that replaces found search values
  * @param {string} $subject  The string being searched and replaced on, otherwise known as the haystack.
  */
/**
  * Case insensitive String Replacement
  * Mimics the PHP's str_ireplace function
  * @param {string} $search   The value being searched for, otherwise known as the needle
  * @param {string} $replace  The replacement value that replaces found search values
  * @param {string} $subject  The string being searched and replaced on, otherwise known as the haystack.
  */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Mixins for Internal Melange Usage
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    Generic Mixins
    ------------------------------------------- **/
/**
 * Adds prefixed version of a property according to listed vendors
 */
/**
 * Adds prefixed version of values in a property
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Text Related Mixins
    ------------------------------------------- **/
/**
 * Fontface
 *
 * http://caniuse.com/#search=font-face
 * https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
 * For modern approach, woff and ttf format is supported all major browsers. If you need to support
 * Internet Explorer 8, with setting "$support-for-ie8" variable to "true", the eot file format
 * also added to mixin output. You also need to provide related file formats in your fonts folder.
 *
 * @font-face {
              [ font-family: <family-name>; ]?
           || [ src: [ <uri> [format(<string>#)]? | <font-face-name> ]#; ]?
           || [ unicode-range: <urange>#; ]?
           || [ font-variant: <font-variant>; ]?
           || [ font-feature-settings: normal|<feature-tag-value>#; ]?
           || [ font-stretch: <font-stretch>; ]?
           || [ font-weight: <weight>; ]?
           || [ font-style: <style>; ]?
   }
 */
/**
 * fontface
 * This mixin is a callback support for very early versions of Caffeine
 */
/**
  * Font Icon
  *
  * Outputs an icon font definition with supporting class attribute selectors.
  * For preventing font misuse for the element, the class selector applied to :before pseuode element
  * instead of the element itself.
  */
/**
 * Font-Size callback
 * 
 * For modern usage, converts and output font-size with rem units.
 */
/**
 * Disable Select
 * It is useful for mobil applications
 * Prevents text selection when swipe or double click
 * http://caniuse.com/#search=user-select
 * https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
 * Formal syntax: none | text | all | element
 * Current spec, all vendors need prefixing
 */
/**
 * Selection
 *
 * The ::selection CSS pseudo-element applies rules to the portion of a document 
 * that has been highlighted (e.g., selected with the mouse or another pointing device) by the user.
 * http://caniuse.com/#search=selection
 * https://developer.mozilla.org/en-US/docs/Web/CSS/::selection
 * Formal syntax: content
 * Only a small part of text related properties supports. You can change the following properties in selectionsİ
 * color, background-color, cursor, outline, text-decoration, text-emphasis-color and text-shadow.
 *
 * Notes:
 * text-shadow in ::selection is supported by Chrome, Safari and Firefox 17+.
 *
 * The ::selection CSS pseudo-element was drafted for CSS Selectors Level 3 
 * but removed before it reached the Recommendation status. It was readded as part of the Pseudo-Elements Level 4 draft.
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Size Related Mixins
    ------------------------------------------- **/
/**
 * Square or desired width-height for an element
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    CSS3 Related Mixins
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    Background Gradient Mixins
    ------------------------------------------- **/
/**
 * Simple Linear gradient
 * Gets the linear gradient content as a parameter and outputs the prefixed version.
 * For old browsers do not forget to add fallback color/image before mixin
 * Uses new linear gradient version. Not supporting Safari 5 or older and IE9 and older versions
 *
 * @param string $content
 */
/**
 * Simple Radial gradient
 * Gets the radial gradient content as a parameter and outputs the prefixed version.
 * For old browsers do not forget to add fallback color/image before mixin
 * Uses new linear gradient version. Not supporting Safari 5 or older and IE9 and older versions
 *
 * @param $content
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Text Gradient
    ------------------------------------------- **/
/**
 * Gradient Text Color
 * Add a gradient color to the text
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Box Shadow
    ------------------------------------------- **/
/**
 * Simple Box shadow
 *
 * @param $content: box-shadow content
 * http://caniuse.com/#search=box-shadow 
 * current spec, only Android browser 2.3 need -webkit prefix
 * You can use standart CSS box shadow definition
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Transition Related Mixins
    ------------------------------------------- **/
/**
 * CSS Transition
 *
 * Outputs CSS3 transition code with defined prefixes
 * http://caniuse.com/#search=transition
 * https://developer.mozilla.org/en-US/docs/Web/CSS/transition
 * Formal syntax: [ none | <single-transition-property> ] || <time> || <timing-function> || <time>
 * current spec, older Android browsers and Safari 5.1 need -webkit
 */
/**
 * CSS Transition Delay
 * Outputs CSS3 transition-delay code with defined pferixes
 * https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay
 * Formal syntax: <time>#
 */
/**
 * CSS Transition Duration
 * Outputs CSS3 transition-duration code with defined pferixes
 * https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration
 * Formal syntax: <time>#
 */
/**
 * CSS Transition Property
 * Outputs CSS3 transition-property code with defined pferixes
 * https://developer.mozilla.org/en-US/docs/Web/CSS/transition-property
 * Formal syntax: none | <single-transition-property>#  [ ‘,’ <single-transition-property># ]*
 */
/**
 * CSS Transition Timing
 * Outputs CSS3 transition-timing-function code with defined pferixes
 * https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function
 * Formal syntax: <timing-function>#
 */
/**
 * App Transition
 *
 * General transition definition for app
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Transform Related Mixins
    ------------------------------------------- **/
/**
 * CSS Transform
 *
 * Outputs CSS3 tranform code with defined prefixes
 * http://caniuse.com/#search=transform
 * https://developer.mozilla.org/en-US/docs/Web/CSS/transform
 * Formal syntax: none | <transform-function>+
 * For transform functions see: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function
 * current spec, Safari, Android browser and IE9 need vendor prefix
 */
/**
 * CSS Transform Origin
 *
 * Outputs CSS3 tranform-origin code with defined prefixes
 * http://caniuse.com/#search=transform
 * https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
 * Formal syntax: [ <percentage> | <length> | left | center | right | top | bottom] | [ [ <percentage> | <length> | left | center | right ] && [ <percentage> | <length> | top | center | bottom ] ] <length>?
 * current spec, Safari, Android browser and IE9 need vendor prefix
 */
/**
 * CSS Transform Style
 *
 * Outputs CSS3 tranform-style code with defined prefixes
 * http://caniuse.com/#search=transform
 * https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style
 * Formal syntax: flat | preserve-3d | inherit
 * current spec, IE is not supported, webkit browsers need prefixing
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Animation Related Mixins
    ------------------------------------------- **/
/**
 * CSS Animation
 *
 * Outputs CSS3 animation code with defined prefixes
 * http://caniuse.com/#search=css3%20animation
 * https://developer.mozilla.org/en-US/docs/Web/CSS/animation
 * Formal syntax: <single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>
 * current spec, webkit browsers need prefixing
 */
/**
 * CSS Animation Delay
 *
 * Outputs CSS3 animation-delay code with defined prefixes
 * http://caniuse.com/#search=css3%20animation
 * https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay
 * Formal syntax: <time>#
 * current spec, webkit browsers need prefixing
 */
/**
 * CSS Animation Direction
 *
 * Outputs CSS3 animation-direction code with defined prefixes
 * http://caniuse.com/#search=css3%20animation
 * https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction
 * Formal syntax: <single-animation-direction>#
 * current spec, webkit browsers need prefixing
 */
/**
 * CSS Animation Duration
 *
 * Outputs CSS3 animation-duration code with defined prefixes
 * http://caniuse.com/#search=css3%20animation
 * https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration
 * Formal syntax: <time>#
 * current spec, webkit browsers need prefixing
 */
/**
 * CSS Animation Fill Mode
 *
 * Outputs CSS3 animation-fill-mode code with defined prefixes
 * http://caniuse.com/#search=css3%20animation
 * https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
 * Formal syntax: <single-animation-fill-mode>#
 * current spec, webkit browsers need prefixing
 */
/**
 * CSS Animation Iteration Count
 *
 * Outputs CSS3 animation-iteration-count code with defined prefixes
 * http://caniuse.com/#search=css3%20animation
 * https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count
 * Formal syntax: <single-animation-iteration-count>#
 * current spec, webkit browsers need prefixing
 */
/**
 * CSS Animation Name
 *
 * Outputs CSS3 animation-name code with defined prefixes
 * http://caniuse.com/#search=css3%20animation
 * https://developer.mozilla.org/en-US/docs/Web/CSS/animation-name
 * Formal syntax: <single-animation-name>#
 * current spec, webkit browsers need prefixing
 */
/**
 * CSS Animation Play State
 *
 * Outputs CSS3 animation-play-state code with defined prefixes
 * http://caniuse.com/#search=css3%20animation
 * https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state
 * Formal syntax: <single-animation-play-state>#
 * current spec, webkit browsers need prefixing
 */
/**
 * CSS Animation Timing Function
 *
 * Outputs CSS3 animation-timing-function code with defined prefixes
 * http://caniuse.com/#search=css3%20animation
 * https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function
 * Formal syntax: <single-animation-timing-function>#
 * current spec, webkit browsers need prefixing
 */
/**
 * CSS Keyframes
 *
 * Outputs CSS3 keyframes code with defined prefixes
 * http://caniuse.com/#search=keyframes
 * https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
 * @keyframes <identifier> {
 * 	[ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*
 * }
 * current spec, webkit browsers need prefixing
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Columns Related Mixins
    ------------------------------------------- **/
/**
 * CSS Columns
 *
 * Outputs CSS3 Columns with defined prefixes
 * http://caniuse.com/#search=column
 * https://developer.mozilla.org/en-US/docs/Web/CSS/columns
 * Formal syntax: <'column-width'> || <'column-count'>
 * current spec, except IE, all browsers need vendor prefix either -moz or -webkit
 */
/**
 * CSS Column Count
 *
 * Outputs CSS3 Column Count
 * http://caniuse.com/#search=column
 * https://developer.mozilla.org/en-US/docs/Web/CSS/column-count
 * Formal syntax: <number> | auto
 * current spec, except IE, all browsers need vendor prefix either -moz or -webkit
 */
/**
 * CSS Column Width
 *
 * Outputs CSS3 Column Width
 * http://caniuse.com/#search=column
 * https://developer.mozilla.org/en-US/docs/Web/CSS/column-width
 * Formal syntax: <length> | auto
 * current spec, except IE, all browsers need vendor prefix either -moz or -webkit
 */
/**
 * CSS Column Gap
 *
 * Outputs CSS3 Column Gap
 * http://caniuse.com/#search=column
 * https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap
 * Formal syntax: <length> | normal
 * current spec, except IE, all browsers need vendor prefix either -moz or -webkit
 */
/**
 * CSS Column Rule
 *
 * Outputs CSS3 Column Rule, shorthand definition for column rule styles
 * http://caniuse.com/#search=column
 * https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule
 * Formal syntax: <'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>
 * current spec, except IE, all browsers need vendor prefix either -moz or -webkit
 */
/**
 * CSS Column Rule Color
 *
 * Outputs CSS3 Column Rule Color
 * http://caniuse.com/#search=column
 * https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-color
 * Formal syntax: <color>
 * current spec, except IE, all browsers need vendor prefix either -moz or -webkit
 */
/**
 * CSS Column Rule Style
 *
 * Outputs CSS3 Column Rule Style
 * http://caniuse.com/#search=column
 * https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-style
 * Formal syntax: <style>
 * current spec, except IE, all browsers need vendor prefix either -moz or -webkit
 */
/**
 * CSS Column Rule Width
 *
 * Outputs CSS3 Column Rule Width
 * http://caniuse.com/#search=column
 * https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-width
 * Formal syntax: <br-width>
 * Available values: thin || medium || thick || number px || number em
 * current spec, except IE, all browsers need vendor prefix either -moz or -webkit
 */
/**
 * CSS Column Span
 *
 * Outputs CSS3 Column Span
 * http://caniuse.com/#search=column
 * https://developer.mozilla.org/en-US/docs/Web/CSS/column-span
 * Formal syntax: none | all
 * Currently, except firefox, all vendors supporting this feature. Webkit browsers need prefix
 */
/**
 * CSS Column Fill
 *
 * Outputs CSS3 Column Fill
 * https://developer.mozilla.org/en-US/docs/Web/CSS/column-fill
 * Formal syntax: auto | balance
 * Currently only firefox supports
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Flex Mixins
    ------------------------------------------- **/
/**
 * CSS Flex
 *
 * Outputs Flex code with defined prefixes
 * http://caniuse.com/#search=flex
 * https://developer.mozilla.org/en-US/docs/Web/CSS/flex
 * Formal syntax: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
 * current spec, webkit browsers need prefixing
 */
/**
 * CSS Flex Basis
 *
 * Outputs Flex-Basis code with defined prefixes
 * http://caniuse.com/#search=flex
 * https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
 * Formal syntax: content | <'width'>
 * Initial Value: auto
 * current spec, webkit browsers need prefixing, however Safari is not supporting this feature
 *
 * Notes
 * When a non-auto flex-basis is specified, Internet Explorer 10-11 (but not 12+) always 
 * uses a content-box box model to calculate the size of a flex item, even if 
 * box-sizing: border-box is applied to the element.
 *
 */
/**
 * CSS Flex Direction
 *
 * Outputs Flex-Direction code with defined prefixes
 * http://caniuse.com/#search=flex
 * https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
 * Formal syntax: content | [row | row-reverse | column | column-reverse]
 * current spec, webkit browsers need prefixing, however Safari is not supporting this feature
 */
/**
 * CSS Flex Grow
 *
 * Outputs Flex-Grow code with defined prefixes
 * http://caniuse.com/#search=flex
 * https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow
 * Formal syntax: <number>
 * Initial Value: 0
 * Negative values are invalid.
 * current spec, webkit browsers need prefixing, Internet explorer and Safari is 
 * not supporting this feature
 */
/**
 * CSS Flex Shrink
 *
 * Outputs Flex-Shrink code with defined prefixes
 * http://caniuse.com/#search=flex
 * https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink
 * Formal syntax: <number>
 * Initial Value: 1
 * Negative values are invalid.
 * current spec, webkit browsers need prefixing, Internet explorer and Safari is 
 * not supporting this feature
 *
 * Notes:
 * Internet Explorer 10 uses 0 instead of 1 as the initial value for the flex-shrink property. 
 * A workaround is to always set an explicit value for flex-shrink.
 */
/**
 * CSS Flex Wrap
 *
 * Outputs Flex-Wrap code with defined prefixes
 * http://caniuse.com/#search=flex
 * https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
 * Formal syntax: content | [nowrap | wrap | wrap-reverse]
 * Initial Value: nowrap
 * current spec, webkit browsers need prefixing
 */
/**
 * CSS Flex Align Content
 *
 * Outputs align-content code with defined prefixes
 * http://caniuse.com/#search=flex
 * https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
 * Formal syntax: content | [flex-start | flex-end | center | space-between | space-around | stretch]
 * Initial Value: strecth
 * current spec, webkit browsers need prefixing
 *
 * Notes:
 * Internet Explorer and Safari are not supporting this feature yet even with vendor prefix
 */
/**
 * CSS Flex Align Items
 *
 * Outputs align-items code with defined prefixes
 * http://caniuse.com/#search=flex
 * https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
 * Formal syntax: content | [flex-start | flex-end | center | baseline | stretch]
 * Initial Value: strecth
 * current spec, webkit browsers need prefixing
 */
/**
 * CSS Flex Align Self
 *
 * Outputs align-self code with defined prefixes
 * http://caniuse.com/#search=flex
 * https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
 * Formal syntax: content | [auto | flex-start | flex-end | center | baseline | stretch]
 * Initial Value: auto
 * current spec, webkit browsers need prefixing
 *
 * Notes:
 * Safari is not supporting this feature yet even with vendor prefix
 */
/*
 * CSS Justify Content
 *
 */
/**
 * Order
 *
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Media Query Mixins
    ------------------------------------------- **/
/**
 * Retina Image
 */
/**
 * Retina
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Arrow
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    Placeholder
    ------------------------------------------- **/
/**
  * Styles input elements' placeholder. 
  * @param $self: true, if it is true, styles applied to class itself
  *			if false, styles applied to the child elements
  */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Positions
    ------------------------------------------- **/
/**
  * Center
  * Applied to absolute positioned elements, and sets position to absolute.
  * Element is centered both vertically and horizontally
  * Dimension declarations (width, height) are not necessary
  * If any other transform methods applied, may not work as expected
  */
/**
  * Vertical Center
  * Centers the element vertically. Do not interfere with its horizontal position
  * If any other transform methods applied, may not work as expected
  */
/**
 * Horizontal Center
 * Centers the element horizontally 
 * Uses margin: 0 auto; when $type defined as "static"
 * By default it uses the transform approach
 * If any other transform methods applied, may not work as expected in transform approach
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Common Break Points
    ------------------------------------------- **/
/**
 * Mobile phones / smaller screens portrait mode
 *
 */
/**
 * Mobile phones / smaller screens landscape mode
 *
 */
/**
 * Tablets / medium sized screens portrait mode
 *
 */
/**
 * Tablets / medium sized screens landscape mode
 *
 */
/**
 * Common desktop/laptops
 */
/**
 * Widescreens
 *
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Appearance Mixin
    ------------------------------------------- **/
/**
 * CSS Appearance
 *
 * Outputs appearance with defined prefixes
 * http://caniuse.com/#search=appearance
 * https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance
 * Formal syntax: value | [ various variable can defined like button, caret, checkbox, progressbar etc. ]
 * All browsers need vendor prefixing
 * 
 * Notes:
 * This is an unofficial feature and not included in the spec. Aside from Internet Explorer, all browsers
 * need their vendor prexing.
 * However for the Internet Explorer, -webkit-appearance with value none is supported on IE11 Mobile 
 * for phones with "Windows Phone 8.1 Update", and in EdgeHTML.dll
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Scrollbar Styles
    ------------------------------------------- **/
/**
  * Scrollbar
  * Styles the scrollbars for supported browsers
  * Both vertical and horizontal scrolls styled together
  * The invisible OSX scrolls will be visible when applied
  */
/**
 * Third Import Melange Core
 * Melange Core is a super set of normalize library.
 * It has general definitions of certain elements such as labels, form fields, buttons, media object without
 * any predefined templates. Main purpose of the Melange is never overwrite any framework definitions
 * during coding. Every definition, class names can change via settings and merges itself with your GUI.
 * Also, Melange has two sets for width definitions.
 * One is a simple grid system with gutter added between columns as paddings. Using a padding gutter and box-sizing: border-box
 * definition, adds more control over responsive designs. These columns floated by default and support up to 18-column grids.
 * This grid system is a fluid grid. You need to add breakpoint definitions for responsive designs.
 * Other width types are fragmented widths such as .one-half, .two-thirds, .three-quarters etc. These are defined by percentages and
 * missing the 100% fragment except in .one-whole definitions. Simply, there are no .two-halves, .three-thirds, .four-quarters classes
 * which are equal to .one-whole :)
 */
/*! melange.css | @author Bilal Cinarli | melange.io */
/**
 * Loads the main containers. Each folder has _*.scss container file with the same name.
 * This container files imports all other files in the same folder.
 */
/** -------------------------------------------
    General Settings
    ------------------------------------------- **/
/** -------------------------------------------
    Internal Variables
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    Variables Container
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    Internal Variables
    ------------------------------------------- **/
/**
  * Here are some internal variables that are not used in styling
  * but for optimization calculations or controlling certain options
  */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Predefined Classes
    ------------------------------------------- **/
/*
 * In somecases predefined classes can stay only as placeholder
 * If set `false` there will be no output for these placeholder classess unless
 * @extend method used. Otherwise both a placeholder version and @extended version will be
 * availabled.
 *
 * e.g.
 * `false` case;
 * %group {} placeholder is available for extending.
 *
 * `true` case;
 * %group {} placeholder is available for extending. and
 * .group {} class will also available for direct usage
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    System supports
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    Default class/definition names
    ------------------------------------------- **/
/**
 * Name space prefix
 * Adds a defined namespace prefix to generated class names
 */
/**
 *  Text field lists
 */
/**
 * Class names for grid
 */
/**
 * Class names for forms
 */
/**
 * Button names for action
 */
/**
 * Folders
 * Not actually a namespace but folder names also have different preferences
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Number to Name Conversions
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    Animation Related Variables
    ------------------------------------------- **/
/**
 * Duration
 *
 * Duration time for transition animations
 */
/**
 * Easing
 *
 * Easing style
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Default size definitions
    ------------------------------------------- **/
/**
 * Spacing in element
 * Sets the padding sizes for an element
 */
/**
 * Grid gutter and columns
 * Defines the grid gutter size and column count in a row
 * Non-grid columns are not floated by default. But it is optional whether float or not
 * for percentage widths.
 */
/**
 * Border Widths
 *
 * Applied border with for input fields and table borders
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Breakpoint Variables
    ------------------------------------------- **/
/**
 * Rather then using device specific breakpoints, width breakpoints are more 
 * appropriate for wider range of devices.
 */
/**
 * Wide Screen
 */
/**
 * Desktop / Laptop
 */
/**
 * Tablet
 */
/**
 * Phone
 */
/**
 * Breakpoint Map
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Fonts
    ------------------------------------------- **/
/**
 * Default font definitions
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Colors
    ------------------------------------------- **/
/**
 * Named Colors
 *
 * Some named colors for inheriting colors over different variables
 */
/**
 * Simple colors for general styling
 */
/**
 * Border Colors
 *
 * Colors applied to border in focus, disabled, readonly and stationary state
 * @default $base-border-color: #ccc;
 */
/**
 * Field Background Colors
 *
 * Color applied to field background in focus, disabled, readonly and stationary state
 */
/**
 * Button colors
 */
/**
 * Default Button
 *
 * Unstyled, normal button
 */
/**
 * Disabled Button
 */
/**
 * Primary Action Button
 *
 * Maybe used for call-to-action button or/and save/submit buttons in forms
 */
/**
 * Secondary Action Button
 *
 * Useful for indication secondary action in a form near the primary action button
 */
/**
 * Tertiary Action Button
 *
 * Useful for actions whether they are not fit for primary or secondary
 */
/**
 * Cancel Action Button
 *
 * Simply used for cancel button for a form or call-to-action, confirmation etc.
 */
/**
 * Color maps
 */
/** -------------------------------------------
    Melange Internal Methods
    ------------------------------------------- **/
/** -------------------------------------------
    Global Styles
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    Global Styles Container
    ------------------------------------------- **/
/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  /* 1 */
  display: block;
}

/**
 * Add the correct display in IE 9-.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Add the correct display in IE 10-.
 * 1. Add the correct display in IE.
 */
template,
[hidden] {
  display: none;
}

/* Links
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */
  /**
     * Remove the outline on focused links when they are also active or hovered
     * in all browsers (opinionated).
     */
}

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

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: 0;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  margin: .67em 0;
  font-size: 2em;
}

/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
  box-sizing: content-box;
  /* 1 */
}

/* Forms
   ========================================================================== */
/**
 * 1. Change font properties to `inherit` in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
select,
textarea {
  margin: 0;
  /* 2 */
  font: inherit;
  /* 1 */
}

/**
 * Restore the font weight unset by the previous rule.
 */
optgroup {
  font-weight: bold;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
  /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */
button [type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */
fieldset {
  margin: 0 2px;
  padding: .35em .625em .75em;
  border: 1px solid #c0c0c0;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  color: inherit;
  /* 2 */
  white-space: normal;
  /* 1 */
  box-sizing: border-box;
  /* 1 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type='checkbox'],
[type='radio'] {
  padding: 0;
  /* 2 */
  box-sizing: border-box;
  /* 1 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type='search'] {
  outline-offset: -2px;
  /* 2 */
  -webkit-appearance: textfield;
  /* 1 */
  /**
     * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
    */
}

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

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */
::-webkit-input-placeholder {
  color: inherit;
  opacity: .54;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  font: inherit;
  /* 2 */
  -webkit-appearance: button;
  /* 1 */
}

/* @author Bilal Cinarli */
/** -------------------------------------------
    Generic Styles
    ------------------------------------------- **/
/**
 * More proper width calculation and better grid,
 * all elements' box-sizing set to border-box
 */
html {
  box-sizing: border-box;
}

*, *::after, *::before {
  box-sizing: inherit;
}

/**
 * Overwrite normalize.css's box-sizing definitions
 */
hr {
  box-sizing: inherit;
}

input[type='search'] {
  box-sizing: inherit;
}

/**
 * Set html and body sizes to 100% for better wrapping
 * Remove margins and padding to use all viewport
 */
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

/**
 * Remove top margin and padding from certain elements
 * generally we never use top margin anyway
 */
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
table,
th,
td {
  margin-top: 0;
  padding: 0;
}

/**
 * And good-ol friend clearfix
 * For a meaningful name our clearfix class named as group
 */
.group::after {
  display: table;
  clear: both;
  content: '';
}

/* @author Bilal Cinarli */
/**
 * Not real functions of mixins but set of definitions for resetting or reformatting an element
 */
/** -------------------------------------------
    Helper Definitions
    ------------------------------------------- **/
/**
 * Hard reset for an element
 */
fieldset, .form-elements {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  list-style: none;
}

/**
 * Vertical Center
 */
/**
 * Horizontal Center
 */
/**
 * Center Alignment
 */
/**
 * Floats
 */
/* @author Bilal Cinarli */
/**
 * Position related definition
 */
/** -------------------------------------------
    Positions
    ------------------------------------------- **/
/**
 * Floats
 */
.move-to-start, [dir='rtl'] .move-to-end, .column, [class*='-column'] {
  float: left;
}

.move-to-end, [dir='rtl'] .move-to-start, [class*='column-reverse'] {
  float: right;
}

/**
 * Aligns
 * start and end values for text-aligns are direction safe.
 * no need to additional definition for rtl/ltr differences.
 */
.align-start {
  text-align: start;
}

.align-end {
  text-align: end;
}

/** -------------------------------------------
    Layout Definitions
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    Layouts Container
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    Widths for General Usage
    ------------------------------------------- **/
/**
 * Mixin for width calculations
 *
 * @param $fragment: defines how many fragments in one row and calculates the fragment width
 * @param $namespace prefix for classes in order to use different names for different parts
 *
 * @depends $numbers: number-to-name conversion list for human readable class names
 * @depends $ordinals: defines the human reader total chunks
 */
/**
    * Whole
    */
.one-whole {
  width: 100%;
}

/**
     * Half
     */
.one-half, .two-quarters, .four-eighths, .five-tenths, .six-twelfths {
  width: 50%;
}

/**
     * Thirds
     */
.one-thirds, .one-third, .four-twelfths {
  width: 33.33333%;
}

.two-thirds, .eight-twelfths {
  width: 66.66667%;
}

/**
     * Quarters
     */
.one-quarters, .one-quarter, .two-eighths, .three-twelfths {
  width: 25%;
}

.three-quarters, .six-eighths, .nine-twelfths {
  width: 75%;
}

/**
     * Fifths
     */
.one-fifths, .one-fifth, .two-tenths {
  width: 20%;
}

.two-fifths, .four-tenths {
  width: 40%;
}

.three-fifths, .six-tenths {
  width: 60%;
}

.four-fifths, .eight-tenths {
  width: 80%;
}

/**
     * Eights
     */
.one-eighths, .one-eighth {
  width: 12.5%;
}

.three-eighths {
  width: 37.5%;
}

.five-eighths {
  width: 62.5%;
}

.seven-eighths {
  width: 87.5%;
}

/**
     * Tenths
     */
.one-tenths, .one-tenth {
  width: 10%;
}

.three-tenths {
  width: 30%;
}

.seven-tenths {
  width: 70%;
}

.nine-tenths {
  width: 90%;
}

/**
     * Twelfths
     */
.one-twelfths, .one-twelfth {
  width: 8.33333%;
}

.two-twelfths {
  width: 16.66667%;
}

.five-twelfths {
  width: 41.66667%;
}

.seven-twelfths {
  width: 58.33333%;
}

.ten-twelfths {
  width: 83.33333%;
}

.eleven-twelfths {
  width: 91.66667%;
}

/* @author Bilal Cinarli */
/** -------------------------------------------
    Grid Columns
    ------------------------------------------- **/
/**
 * Mixin for grid columns
 *
 * Apart from our generic widths, columns have gutter for spacing and they are floated by default.
 */
/**
 * Offset settings for grid columns
 *
 * When you need much larger spacing between grid columns, you can offset a column by one or more column widths
 */
/**
 * Row
 * Row encapsulation for columns
 */
.pull {
  margin-left: -15px;
}

.push {
  margin-right: -15px;
}

.pull-push {
  margin-right: -15px;
  margin-left: -15px;
}

.row::after {
  display: table;
  clear: both;
  content: '';
}

/**
 * Columns
 * Better controlling the width, gutter defined as right & left padding
 */
[class*='-column'] {
  position: relative;
  padding: 0 15px;
}

.column-parent {
  padding: 0;
}

/**
 * Grid Columns
 * Sets the grid columns according to column number defined in $base-grid-columns
 * @see melange/variables/_sizes.scss
 * @see settings/_sizes.scss
 */
.one-column,
.one-columns {
  width: 8.33333%;
}

.two-column,
.two-columns {
  width: 16.66667%;
}

.three-column,
.three-columns {
  width: 25%;
}

.four-column,
.four-columns {
  width: 33.33333%;
}

.five-column,
.five-columns {
  width: 41.66667%;
}

.six-column,
.six-columns {
  width: 50%;
}

.seven-column,
.seven-columns {
  width: 58.33333%;
}

.eight-column,
.eight-columns {
  width: 66.66667%;
}

.nine-column,
.nine-columns {
  width: 75%;
}

.ten-column,
.ten-columns {
  width: 83.33333%;
}

.eleven-column,
.eleven-columns {
  width: 91.66667%;
}

.twelve-column,
.twelve-columns {
  width: 100%;
}

/**
 * Offsets
 * Sets the offsets classes according to column number defined in $base-grid-columns
 */
.offset-by-one {
  margin-left: 8.33333%;
}

.offset-by-two {
  margin-left: 16.66667%;
}

.offset-by-three {
  margin-left: 25%;
}

.offset-by-four {
  margin-left: 33.33333%;
}

.offset-by-five {
  margin-left: 41.66667%;
}

.offset-by-six {
  margin-left: 50%;
}

.offset-by-seven {
  margin-left: 58.33333%;
}

.offset-by-eight {
  margin-left: 66.66667%;
}

.offset-by-nine {
  margin-left: 75%;
}

.offset-by-ten {
  margin-left: 83.33333%;
}

.offset-by-eleven {
  margin-left: 91.66667%;
}

/** -------------------------------------------
    Base Element Styles
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    Elements Container
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    Text Styles
    ------------------------------------------- **/
/**
 * Body base font and color definitions
 */
html {
  font-size: 16px;
}

body {
  color: #4d4d4d;
  font: 16px/1.25 "TurkcellSatura", helvetica, arial, sans-serif;
}

/* @author Bilal Cinarli */
/** -------------------------------------------
    Form Elements Container
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    Field Wrappers
    ------------------------------------------- **/
/**
 * Fieldset for field wrappers
 */
/**
 * Form Elements Holder
 * A list or a div for group form elements
 */
.form-elements {
  /**
     * Forms mostly build with unordered list.

        <ul class="form-elements group">
            <li class="group">
                <label class="item-field">
                    <span class="item-name">Label</span>
                    <input />
                </label>
            </li>
        </ul>
     */
}

.form-elements li {
  position: relative;
  margin-bottom: 1em;
}

/**
 * Legend
 *
 * Make the legend as a block for better styling and control
 */
legend {
  display: block;
  width: 100%;
  margin-bottom: 1em;
}

/* @author Bilal Cinarli */
/** -------------------------------------------
    Label Styles
    ------------------------------------------- **/
/**
 * Labels
 *
 * Fields should always wrapped with a label.
 * Helper .label class is used for applying label styles for other text elements
 *
    <label class="item-field">
        <span class="item-label"></span>
        <input type="text" />
    </label>
 *
 */
label,
.label {
  display: inline-block;
  position: relative;
}

/**
 * Item positions
 * In most cases, 
 * item-field is for showing label name and field in same line
 * item-stacked is for showing label name and field in rows
 * item-row is however, stacking the label wrappers together
 */
.item-field {
  margin-right: 1em;
}

.item-stacked:not(:only-child) {
  margin-bottom: 1em;
}

.item-row + .item-row {
  margin-top: 1em;
}

.item-error {
  color: #e87352;
}

/**
 * Label texts
 */
.item-label {
  display: inline-block;
  position: relative;
  cursor: pointer;
  /**
     * When item is stacked, label text will be over the label input
     */
  /**
     * Required field has a star at the beginning of label
     */
}

.item-stacked .item-label {
  display: block;
}

.item-label .item-required::before, .is-required .item-label::before {
  position: absolute;
  left: -10px;
  content: '*';
}

/**
 * Field Help
 *
 * Although this is not an actual label, it can be used as helper text for the field
 */
.item-help {
  font-size: .8em;
  font-style: italic;
}

/* @author Bilal Cinarli */
/** -------------------------------------------
    Input Fields
    ------------------------------------------- **/
/**
 * Text based (input[type=text] etc.) field styles
 *
 * .text-field class is added in order to styling other elements like a text field
 */
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"],
textarea,
.text-field {
  padding: 5px;
  border: 1px solid #a9b0b8;
  outline: 0;
  background: #eceff1;
  color: inherit;
  font-size: 1rem;
  font-weight: normal;
}

input:focus[type="text"], input:focus[type="password"], input:focus[type="datetime"], input:focus[type="datetime-local"], input:focus[type="date"], input:focus[type="month"], input:focus[type="time"], input:focus[type="week"], input:focus[type="number"], input:focus[type="email"], input:focus[type="url"], input:focus[type="search"], input:focus[type="tel"], input:focus[type="color"],
textarea:focus,
.text-field:focus, input:active[type="text"], input:active[type="password"], input:active[type="datetime"], input:active[type="datetime-local"], input:active[type="date"], input:active[type="month"], input:active[type="time"], input:active[type="week"], input:active[type="number"], input:active[type="email"], input:active[type="url"], input:active[type="search"], input:active[type="tel"], input:active[type="color"],
textarea:active,
.text-field:active {
  border-color: #242a32;
  background: #eceff1;
}

input[readonly][type="text"], input[readonly][type="password"], input[readonly][type="datetime"], input[readonly][type="datetime-local"], input[readonly][type="date"], input[readonly][type="month"], input[readonly][type="time"], input[readonly][type="week"], input[readonly][type="number"], input[readonly][type="email"], input[readonly][type="url"], input[readonly][type="search"], input[readonly][type="tel"], input[readonly][type="color"],
textarea[readonly],
.text-field[readonly], input.readonly[type="text"], input.readonly[type="password"], input.readonly[type="datetime"], input.readonly[type="datetime-local"], input.readonly[type="date"], input.readonly[type="month"], input.readonly[type="time"], input.readonly[type="week"], input.readonly[type="number"], input.readonly[type="email"], input.readonly[type="url"], input.readonly[type="search"], input.readonly[type="tel"], input.readonly[type="color"],
textarea.readonly,
.readonly.text-field {
  border-color: #a9b0b8;
  background-color: #eceff1;
  cursor: default;
}

input[disabled][type="text"], input[disabled][type="password"], input[disabled][type="datetime"], input[disabled][type="datetime-local"], input[disabled][type="date"], input[disabled][type="month"], input[disabled][type="time"], input[disabled][type="week"], input[disabled][type="number"], input[disabled][type="email"], input[disabled][type="url"], input[disabled][type="search"], input[disabled][type="tel"], input[disabled][type="color"],
textarea[disabled],
.text-field[disabled], input.disabled[type="text"], input.disabled[type="password"], input.disabled[type="datetime"], input.disabled[type="datetime-local"], input.disabled[type="date"], input.disabled[type="month"], input.disabled[type="time"], input.disabled[type="week"], input.disabled[type="number"], input.disabled[type="email"], input.disabled[type="url"], input.disabled[type="search"], input.disabled[type="tel"], input.disabled[type="color"],
textarea.disabled,
.disabled.text-field {
  border-color: #eceff1;
  background-color: #a9b0b8;
  cursor: default;
}

input.item-error[type="text"], input.item-error[type="password"], input.item-error[type="datetime"], input.item-error[type="datetime-local"], input.item-error[type="date"], input.item-error[type="month"], input.item-error[type="time"], input.item-error[type="week"], input.item-error[type="number"], input.item-error[type="email"], input.item-error[type="url"], input.item-error[type="search"], input.item-error[type="tel"], input.item-error[type="color"],
textarea.item-error,
.item-error.text-field {
  border-color: #e87352;
}

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"],
textarea,
.text-field {
  -webkit-appearance: none;
}

/**
 * Checkable (checkbox, radio) field styles
 */
input[type="checkbox"], input[type="radio"] {
  vertical-align: middle;
  /**
         * Fields and labels together
         *
            <label class="item-field">
                <input type="checkbox" />
                <span class="item-label">Label</span>
            </label>
         */
}

input[type="checkbox"] + .item-label, input[type="radio"] + .item-label {
  margin-left: .25em;
  font-weight: normal;
  vertical-align: middle;
}

/**
 * Other input types
 */
/**
 * Textarea
 *
 * Textareas are like input text fields in most cases, but they need additional styling
 * since they are resizable and allows multiple lines
 */
textarea {
  min-height: 3em;
  resize: vertical;
}

/* @author Bilal Cinarli */
/** -------------------------------------------
    Button Styles
    ------------------------------------------- **/
/**
 * Button colors
 */
/**
 * In most cases, using buttons with button tag allows more styling options
 * it is cross browser and meaningful. Also '.button' class is added in order to
 * get button-like elements
 */
button, input[type='submit'], input[type='reset'], input.button, .button, [class*='-action']:not([class*='-actions']), .media {
  -webkit-apperance: none;
  -moz-apperance: none;
  apperance: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  display: inline-block;
  padding: 5px 15px;
  border: transparent;
  line-height: normal;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0px;
  background-color: #eceff1;
  color: #242a32;
}

button:hover, input:hover[type='submit'], input:hover[type='reset'], .button:hover, :hover[class*='-action']:not([class*='-actions']), .media:hover {
  background-color: #d6dce1;
  color: #242a32;
}

button:disabled, input:disabled[type='submit'], input:disabled[type='reset'], .button:disabled, :disabled[class*='-action']:not([class*='-actions']), .media:disabled, button.disabled, input.disabled[type='submit'], input.disabled[type='reset'], .disabled.button, .disabled[class*='-action']:not([class*='-actions']), .disabled.media {
  cursor: default;
  background-color: #eceff1;
  color: #242a32;
}

button:disabled:hover, input:disabled:hover[type='submit'], input:disabled:hover[type='reset'], .button:disabled:hover, :disabled:hover[class*='-action']:not([class*='-actions']), .media:disabled:hover, button.disabled:hover, input.disabled:hover[type='submit'], input.disabled:hover[type='reset'], .disabled.button:hover, .disabled:hover[class*='-action']:not([class*='-actions']), .disabled.media:hover {
  background-color: #eceff1;
  color: #242a32;
}

button:active, input:active[type='submit'], input:active[type='reset'], .button:active, :active[class*='-action']:not([class*='-actions']), .media:active {
  -webkit-box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.3);
}

/**
 * Native button elements
 * Input button elements
 */
/**
 * Anchor and other elements
 */
.button {
  text-align: center;
}

.button, .button:hover, .button:focus, .button:active {
  text-decoration: none;
}

/**
 * Action Buttons
 * specificity increased in order to overwrite [class*='-action']:not([class*='-actions'])
 * without using !important rule. By this, it can easily modified `.some-class .primary-action` selector
 */
.primary-action.primary-action {
  background-color: #ffcb00;
  color: #02459d;
}

.primary-action.primary-action:hover {
  background-color: #d9ad00;
  color: #02459d;
}

.secondary-action.secondary-action {
  background-color: #02459d;
  color: #242a32;
}

.secondary-action.secondary-action:hover {
  background-color: #023477;
  color: #242a32;
}

.tertiary-action.tertiary-action {
  background-color: #242a32;
  color: #fff;
}

.tertiary-action.tertiary-action:hover {
  background-color: #14171c;
  color: #fff;
}

.cancel-action.cancel-action {
  background-color: #e87352;
  color: #fff;
}

.cancel-action.cancel-action:hover {
  background-color: #e45830;
  color: #fff;
}

/* @author Bilal Cinarli */
/** -------------------------------------------
    Table Styles
    ------------------------------------------- **/
/**
 * Table
 */
table {
  width: 100%;
}

/**
 * TFoot
 */
tfoot td:only-child {
  text-align: end;
}

/**
 * Cells
 */
th,
td {
  padding: 0.5em;
  text-align: start;
}

/* @author Bilal Cinarli */
/** -------------------------------------------
    Link & Nav Styles
    ------------------------------------------- **/
/**
 * Links
 *
 * Basic anchor styling
 */
a {
  display: inline-block;
  padding: 2px;
}

nav a {
  text-decoration: none;
}

/**
 * Nav
 *
 * Navigation items
 */
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* @author Bilal Cinarli */
/** -------------------------------------------
    Heading Styles
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    Lists
    ------------------------------------------- **/
ol,
ul {
  padding-left: 15px;
  list-style-position: outside;
}

dl {
  padding-left: 15px;
}

dl dt {
  font-weight: bold;
}

/* @author Bilal Cinarli */
/** -------------------------------------------
    Inline elements
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    Block Styles
    ------------------------------------------- **/
/** -------------------------------------------
    Default Components
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    Components Container
    ------------------------------------------- **/
/**
 * Media Component
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Media Component
    ------------------------------------------- **/
/**
 * Media Item
 *
 * A media item indicates a block consists with a media item (image, flash, video etc.) and a text content
 */
.media-visual {
  display: block;
  margin-right: 1em;
  float: left;
}

.media-text + .media-visual {
  margin-right: auto;
  margin-left: 1em;
  float: right;
}

/**
 * GUI Styles
 * Your gui related definitions.
 * Only add the main GUI file in the styles.scss. Other gui styles will be added in gui/gui.scss
 */
/** -------------------------------------------
    GUI Related Styles
    ------------------------------------------- **/
/**
  * GUI Definitions
  * Only import the directories main files. No need the add other partials. In import order, each categorized partial
  * imported in the main file of the category
  */
/**
 * Externals
 */
/**
 * Swiper 3.4.2
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * 
 * http://www.idangero.us/swiper/
 * 
 * Copyright 2017, Vladimir Kharlampidi
 * The iDangero.us
 * http://www.idangero.us/
 * 
 * Licensed under MIT
 * 
 * Released on: March 10, 2017
 */
.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  /* Fix of Webkit flickering */
  z-index: 1;
}

.swiper-container-no-flexbox .swiper-slide {
  float: left;
}

.swiper-container-vertical > .swiper-wrapper {
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  -ms-transition-property: -ms-transform;
  transition-property: transform;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.swiper-container-android .swiper-slide,
.swiper-wrapper {
  -webkit-transform: translate3d(0px, 0, 0);
  -moz-transform: translate3d(0px, 0, 0);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate3d(0px, 0, 0);
  transform: translate3d(0px, 0, 0);
}

.swiper-container-multirow > .swiper-wrapper {
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.swiper-container-free-mode > .swiper-wrapper {
  -webkit-transition-timing-function: ease-out;
  -moz-transition-timing-function: ease-out;
  -ms-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  margin: 0 auto;
}

.swiper-slide {
  -webkit-flex-shrink: 0;
  -ms-flex: 0 0 auto;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
}

/* Auto Height */
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
  height: auto;
}

.swiper-container-autoheight .swiper-wrapper {
  -webkit-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-transition-property: -webkit-transform, height;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  -ms-transition-property: -ms-transform;
  transition-property: transform, height;
}

/* a11y */
.swiper-container .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}

/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}

.swiper-wp8-vertical {
  -ms-touch-action: pan-x;
  touch-action: pan-x;
}

/* Arrows */
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  width: 27px;
  height: 44px;
  margin-top: -22px;
  z-index: 10;
  cursor: pointer;
  -moz-background-size: 27px 44px;
  -webkit-background-size: 27px 44px;
  background-size: 27px 44px;
  background-position: center;
  background-repeat: no-repeat;
}

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
  left: 10px;
  right: auto;
}

.swiper-button-prev.swiper-button-black,
.swiper-container-rtl .swiper-button-next.swiper-button-black {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}

.swiper-button-prev.swiper-button-white,
.swiper-container-rtl .swiper-button-next.swiper-button-white {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
  right: 10px;
  left: auto;
}

.swiper-button-next.swiper-button-black,
.swiper-container-rtl .swiper-button-prev.swiper-button-black {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}

.swiper-button-next.swiper-button-white,
.swiper-container-rtl .swiper-button-prev.swiper-button-white {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}

/* Pagination Styles */
.swiper-pagination {
  position: absolute;
  text-align: center;
  -webkit-transition: 300ms;
  -moz-transition: 300ms;
  -o-transition: 300ms;
  transition: 300ms;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  z-index: 10;
}

.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}

/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 10px;
  left: 0;
  width: 100%;
}

/* Bullets */
.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 100%;
  background: #000;
  opacity: 0.2;
}

button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}

.swiper-pagination-white .swiper-pagination-bullet {
  background: #fff;
}

.swiper-pagination-bullet-active {
  opacity: 1;
  background: #007aff;
}

.swiper-pagination-white .swiper-pagination-bullet-active {
  background: #fff;
}

.swiper-pagination-black .swiper-pagination-bullet-active {
  background: #000;
}

.swiper-container-vertical > .swiper-pagination-bullets {
  right: 10px;
  top: 50%;
  -webkit-transform: translate3d(0px, -50%, 0);
  -moz-transform: translate3d(0px, -50%, 0);
  -o-transform: translate(0px, -50%);
  -ms-transform: translate3d(0px, -50%, 0);
  transform: translate3d(0px, -50%, 0);
}

.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 5px 0;
  display: block;
}

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 5px;
}

/* Progress */
.swiper-pagination-progress {
  background: rgba(0, 0, 0, 0.25);
  position: absolute;
}

.swiper-pagination-progress .swiper-pagination-progressbar {
  background: #007aff;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: left top;
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -o-transform-origin: left top;
  transform-origin: left top;
}

.swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar {
  -webkit-transform-origin: right top;
  -moz-transform-origin: right top;
  -ms-transform-origin: right top;
  -o-transform-origin: right top;
  transform-origin: right top;
}

.swiper-container-horizontal > .swiper-pagination-progress {
  width: 100%;
  height: 4px;
  left: 0;
  top: 0;
}

.swiper-container-vertical > .swiper-pagination-progress {
  width: 4px;
  height: 100%;
  left: 0;
  top: 0;
}

.swiper-pagination-progress.swiper-pagination-white {
  background: rgba(255, 255, 255, 0.5);
}

.swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar {
  background: #fff;
}

.swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar {
  background: #000;
}

/* 3D Container */
.swiper-container-3d {
  -webkit-perspective: 1200px;
  -moz-perspective: 1200px;
  -o-perspective: 1200px;
  perspective: 1200px;
}

.swiper-container-3d .swiper-wrapper,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-cube-shadow {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.swiper-container-3d .swiper-slide-shadow-left {
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  /* Safari 4+, Chrome */
  background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  /* Chrome 10+, Safari 5.1+, iOS 5+ */
  background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  /* Firefox 3.6-15 */
  background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  /* Opera 11.10-12.00 */
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  /* Firefox 16+, IE10, Opera 12.50+ */
}

.swiper-container-3d .swiper-slide-shadow-right {
  background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  /* Safari 4+, Chrome */
  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  /* Chrome 10+, Safari 5.1+, iOS 5+ */
  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  /* Firefox 3.6-15 */
  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  /* Opera 11.10-12.00 */
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  /* Firefox 16+, IE10, Opera 12.50+ */
}

.swiper-container-3d .swiper-slide-shadow-top {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  /* Safari 4+, Chrome */
  background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  /* Chrome 10+, Safari 5.1+, iOS 5+ */
  background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  /* Firefox 3.6-15 */
  background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  /* Opera 11.10-12.00 */
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  /* Firefox 16+, IE10, Opera 12.50+ */
}

.swiper-container-3d .swiper-slide-shadow-bottom {
  background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  /* Safari 4+, Chrome */
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  /* Chrome 10+, Safari 5.1+, iOS 5+ */
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  /* Firefox 3.6-15 */
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  /* Opera 11.10-12.00 */
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  /* Firefox 16+, IE10, Opera 12.50+ */
}

/* Coverflow */
.swiper-container-coverflow .swiper-wrapper,
.swiper-container-flip .swiper-wrapper {
  /* Windows 8 IE 10 fix */
  -ms-perspective: 1200px;
}

/* Cube + Flip */
.swiper-container-cube,
.swiper-container-flip {
  overflow: visible;
}

.swiper-container-cube .swiper-slide,
.swiper-container-flip .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
}

.swiper-container-cube .swiper-slide .swiper-slide,
.swiper-container-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-container-cube .swiper-slide-active,
.swiper-container-flip .swiper-slide-active,
.swiper-container-cube .swiper-slide-active .swiper-slide-active,
.swiper-container-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-container-cube .swiper-slide-shadow-top,
.swiper-container-flip .swiper-slide-shadow-top,
.swiper-container-cube .swiper-slide-shadow-bottom,
.swiper-container-flip .swiper-slide-shadow-bottom,
.swiper-container-cube .swiper-slide-shadow-left,
.swiper-container-flip .swiper-slide-shadow-left,
.swiper-container-cube .swiper-slide-shadow-right,
.swiper-container-flip .swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Cube */
.swiper-container-cube .swiper-slide {
  visibility: hidden;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
}

.swiper-container-cube.swiper-container-rtl .swiper-slide {
  -webkit-transform-origin: 100% 0;
  -moz-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
}

.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-prev,
.swiper-container-cube .swiper-slide-next + .swiper-slide {
  pointer-events: auto;
  visibility: visible;
}

.swiper-container-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.6;
  -webkit-filter: blur(50px);
  filter: blur(50px);
  z-index: 0;
}

/* Fade */
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
  -webkit-transition-timing-function: ease-out;
  -moz-transition-timing-function: ease-out;
  -ms-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.swiper-container-fade .swiper-slide {
  pointer-events: none;
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
}

.swiper-container-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  text-align: center;
}

.swiper-zoom-container > img,
.swiper-zoom-container > svg,
.swiper-zoom-container > canvas {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Scrollbar */
.swiper-scrollbar {
  border-radius: 10px;
  position: relative;
  -ms-touch-action: none;
  background: rgba(0, 0, 0, 0.1);
}

.swiper-container-horizontal > .swiper-scrollbar {
  position: absolute;
  left: 1%;
  bottom: 3px;
  z-index: 50;
  height: 5px;
  width: 98%;
}

.swiper-container-vertical > .swiper-scrollbar {
  position: absolute;
  right: 3px;
  top: 1%;
  z-index: 50;
  width: 5px;
  height: 98%;
}

.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  left: 0;
  top: 0;
}

.swiper-scrollbar-cursor-drag {
  cursor: move;
}

/* Preloader */
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  -webkit-transform-origin: 50%;
  -moz-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
  -moz-animation: swiper-preloader-spin 1s steps(12, end) infinite;
  animation: swiper-preloader-spin 1s steps(12, end) infinite;
}

.swiper-lazy-preloader:after {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-position: 50%;
  -webkit-background-size: 100%;
  background-size: 100%;
  background-repeat: no-repeat;
}

.swiper-lazy-preloader-white:after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

@-webkit-keyframes swiper-preloader-spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes swiper-preloader-spin {
  100% {
    transform: rotate(360deg);
  }
}

/* @author Bilal Cinarli */
/** -------------------------------------------
    Accordion
    ------------------------------------------- **/
.uxr-collapsible-header {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
}

.uxr-collapsible-animateCSS > .uxr-collapsible-content {
  height: 0;
  overflow: hidden;
  transition: all 0.3s;
}

.uxr-collapsible-current.uxr-collapsible-animateCSS > .uxr-collapsible-content {
  overflow: visible;
  height: auto;
  padding: 15px 0;
}

.uxr-collapsible-animateJS > .uxr-collapsible-content {
  display: none;
}

.uxr-collapsible-current.uxr-collapsible-animateJS > .uxr-collapsible-content {
  display: block;
}

/* @author Bilal Cinarli */
/** -------------------------------------------
    Modal
    ------------------------------------------- **/
#uxr-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #000;
  opacity: .4;
}

.uxr-modal-container {
  position: absolute;
  z-index: 10000;
  top: 50%;
  left: 50%;
  -ms-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  min-width: 50px;
  min-height: 50px;
  padding: 20px;
  border-radius: 3px;
  background-color: #fff;
  box-sizing: border-box;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  transition: all ease .3s;
}

.uxr-modal-drag {
  position: absolute;
  top: 0;
  left: 0;
  cursor: move;
  width: calc(100% - 40px);
  height: 24px;
  z-index: 1;
}

.uxr-modal-loaded-content, .uxr-modal-content {
  position: relative;
}

.uxr-modal-title {
  position: absolute;
  top: 5px;
  left: 0;
  width: calc(100% - 27px);
  line-height: 1.5;
  z-index: 10;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: white;
  padding-left: 10px;
}

.uxr-modal-title ~ .uxr-modal-content {
  margin-top: 20px;
}

.uxr-modal-content {
  width: 100%;
  max-height: 100%;
}

.uxr-modal-loading:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 2px dashed #777;
  border-radius: 50%;
  box-sizing: border-box;
  animation: uxr-modal-loading 2s infinite linear;
}

.uxr-modal-close {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ccc;
  color: #fff;
  font-family: sans-serif;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.uxr-modal-close:before {
  content: "X";
  font-size: .8em;
  line-height: 22px;
}

.uxr-modal-hide {
  display: none;
}

@keyframes uxr-modal-loading {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* @author Kursad Yildirmak */
.tab-view .tab-view-button {
  display: inline-block;
}

.tab-view .tab-view-content {
  display: none;
}

.tab-view .tab-view-content.current {
  display: block;
}

.tab-view:before {
  content: '';
  position: absolute;
  display: inline-block;
  width: 100%;
  height: 40px;
  box-shadow: 0 6px 20px 4px #0347A2;
}

.tab-view-buttons {
  position: relative;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  background: #0347A2;
}

.tab-view-button {
  font-size: 1rem;
  position: relative;
  width: 100%;
  margin: 10px 0;
  padding: 4px 40px;
  color: rgba(255, 255, 255, 0.4);
  border-right: 1px solid rgba(255, 203, 0, 0.2);
  font-weight: 300;
  text-decoration: none;
  text-align: center;
}

.tab-view-button.current {
  color: #fff;
}

.tab-view-button.current::after {
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 100%;
  height: 5px;
  background: #FFCB00;
  content: '';
}

.tab-view-button:last-child {
  border: none;
}

.tab-view-content {
  padding: 20px;
  background: #fff;
}

.datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- {
  color: #dedede;
}

.datepicker--cell-day.-other-month-:hover, .datepicker--cell-year.-other-decade-:hover {
  color: #c5c5c5;
}

.-disabled-.-focus-.datepicker--cell-day.-other-month-, .-disabled-.-focus-.datepicker--cell-year.-other-decade- {
  color: #dedede;
}

.-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
  color: #fff;
  background: #a2ddf6;
}

.-selected-.-focus-.datepicker--cell-day.-other-month-, .-selected-.-focus-.datepicker--cell-year.-other-decade- {
  background: #8ad5f4;
}

.-in-range-.datepicker--cell-day.-other-month-, .-in-range-.datepicker--cell-year.-other-decade- {
  background-color: rgba(92, 196, 239, 0.1);
  color: #cccccc;
}

.-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- {
  background-color: rgba(92, 196, 239, 0.2);
}

.datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
  background: none;
  border: none;
}

/* -------------------------------------------------
    Datepicker cells
   ------------------------------------------------- */
.datepicker--cells {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.datepicker--cell {
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 32px;
  z-index: 1;
}

.datepicker--cell.-focus- {
  background: #f0f0f0;
}

.datepicker--cell.-current- {
  color: #4EB5E6;
}

.datepicker--cell.-current-.-focus- {
  color: #4a4a4a;
}

.datepicker--cell.-current-.-in-range- {
  color: #4EB5E6;
}

.datepicker--cell.-in-range- {
  background: rgba(92, 196, 239, 0.1);
  color: #4a4a4a;
  border-radius: 0;
}

.datepicker--cell.-in-range-.-focus- {
  background-color: rgba(92, 196, 239, 0.2);
}

.datepicker--cell.-disabled- {
  cursor: default;
  color: #aeaeae;
}

.datepicker--cell.-disabled-.-focus- {
  color: #aeaeae;
}

.datepicker--cell.-disabled-.-in-range- {
  color: #a1a1a1;
}

.datepicker--cell.-disabled-.-current-.-focus- {
  color: #aeaeae;
}

.datepicker--cell.-range-from- {
  border: 1px solid rgba(92, 196, 239, 0.5);
  background-color: rgba(92, 196, 239, 0.1);
  border-radius: 4px 0 0 4px;
}

.datepicker--cell.-range-to- {
  border: 1px solid rgba(92, 196, 239, 0.5);
  background-color: rgba(92, 196, 239, 0.1);
  border-radius: 0 4px 4px 0;
}

.datepicker--cell.-range-from-.-range-to- {
  border-radius: 4px;
}

.datepicker--cell.-selected- {
  color: #fff;
  border: none;
  background: #5cc4ef;
}

.datepicker--cell.-selected-.-current- {
  color: #fff;
  background: #5cc4ef;
}

.datepicker--cell.-selected-.-focus- {
  background: #45bced;
}

.datepicker--cell:empty {
  cursor: default;
}

.datepicker--days-names {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 8px 0 3px;
}

.datepicker--day-name {
  color: #FF9A19;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: center;
  text-transform: uppercase;
  font-size: .8em;
}

.datepicker--cell-day {
  width: 14.28571%;
}

.datepicker--cells-months {
  height: 170px;
}

.datepicker--cell-month {
  width: 33.33%;
  height: 25%;
}

.datepicker--years {
  height: 170px;
}

.datepicker--cells-years {
  height: 170px;
}

.datepicker--cell-year {
  width: 25%;
  height: 33.33%;
}

.datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- {
  color: #dedede;
}

.datepicker--cell-day.-other-month-:hover, .datepicker--cell-year.-other-decade-:hover {
  color: #c5c5c5;
}

.-disabled-.-focus-.datepicker--cell-day.-other-month-, .-disabled-.-focus-.datepicker--cell-year.-other-decade- {
  color: #dedede;
}

.-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
  color: #fff;
  background: #a2ddf6;
}

.-selected-.-focus-.datepicker--cell-day.-other-month-, .-selected-.-focus-.datepicker--cell-year.-other-decade- {
  background: #8ad5f4;
}

.-in-range-.datepicker--cell-day.-other-month-, .-in-range-.datepicker--cell-year.-other-decade- {
  background-color: rgba(92, 196, 239, 0.1);
  color: #cccccc;
}

.-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- {
  background-color: rgba(92, 196, 239, 0.2);
}

.datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
  background: none;
  border: none;
}

/* -------------------------------------------------
    Datepicker
   ------------------------------------------------- */
.datepickers-container {
  position: absolute;
  left: 0;
  top: 0;
}

@media print {
  .datepickers-container {
    display: none;
  }
}

.datepicker {
  background: #fff;
  border: 1px solid #dbdbdb;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  box-sizing: content-box;
  font-family: Tahoma, sans-serif;
  font-size: 14px;
  color: #4a4a4a;
  width: 250px;
  position: absolute;
  left: -100000px;
  opacity: 0;
  transition: opacity 0.3s ease, left 0s 0.3s, -webkit-transform 0.3s ease;
  transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0.3s;
  transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0.3s, -webkit-transform 0.3s ease;
  z-index: 100;
}

.datepicker.-from-top- {
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}

.datepicker.-from-right- {
  -webkit-transform: translateX(8px);
  transform: translateX(8px);
}

.datepicker.-from-bottom- {
  -webkit-transform: translateY(8px);
  transform: translateY(8px);
}

.datepicker.-from-left- {
  -webkit-transform: translateX(-8px);
  transform: translateX(-8px);
}

.datepicker.active {
  opacity: 1;
  -webkit-transform: translate(0);
  transform: translate(0);
  transition: opacity 0.3s ease, left 0s 0s, -webkit-transform 0.3s ease;
  transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0s;
  transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0s, -webkit-transform 0.3s ease;
}

.datepicker-inline .datepicker {
  border-color: #d7d7d7;
  box-shadow: none;
  position: static;
  left: auto;
  right: auto;
  opacity: 1;
  -webkit-transform: none;
  transform: none;
}

.datepicker-inline .datepicker--pointer {
  display: none;
}

.datepicker--content {
  box-sizing: content-box;
  padding: 4px;
}

.-only-timepicker- .datepicker--content {
  display: none;
}

.datepicker--pointer {
  position: absolute;
  background: #fff;
  border-top: 1px solid #dbdbdb;
  border-right: 1px solid #dbdbdb;
  width: 10px;
  height: 10px;
  z-index: -1;
}

.-top-left- .datepicker--pointer, .-top-center- .datepicker--pointer, .-top-right- .datepicker--pointer {
  top: calc(100% - 4px);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

.-right-top- .datepicker--pointer, .-right-center- .datepicker--pointer, .-right-bottom- .datepicker--pointer {
  right: calc(100% - 4px);
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
}

.-bottom-left- .datepicker--pointer, .-bottom-center- .datepicker--pointer, .-bottom-right- .datepicker--pointer {
  bottom: calc(100% - 4px);
  -webkit-transform: rotate(315deg);
  transform: rotate(315deg);
}

.-left-top- .datepicker--pointer, .-left-center- .datepicker--pointer, .-left-bottom- .datepicker--pointer {
  left: calc(100% - 4px);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.-top-left- .datepicker--pointer, .-bottom-left- .datepicker--pointer {
  left: 10px;
}

.-top-right- .datepicker--pointer, .-bottom-right- .datepicker--pointer {
  right: 10px;
}

.-top-center- .datepicker--pointer, .-bottom-center- .datepicker--pointer {
  left: calc(50% - 10px / 2);
}

.-left-top- .datepicker--pointer, .-right-top- .datepicker--pointer {
  top: 10px;
}

.-left-bottom- .datepicker--pointer, .-right-bottom- .datepicker--pointer {
  bottom: 10px;
}

.-left-center- .datepicker--pointer, .-right-center- .datepicker--pointer {
  top: calc(50% - 10px / 2);
}

.datepicker--body {
  display: none;
}

.datepicker--body.active {
  display: block;
}

.datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- {
  color: #dedede;
}

.datepicker--cell-day.-other-month-:hover, .datepicker--cell-year.-other-decade-:hover {
  color: #c5c5c5;
}

.-disabled-.-focus-.datepicker--cell-day.-other-month-, .-disabled-.-focus-.datepicker--cell-year.-other-decade- {
  color: #dedede;
}

.-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
  color: #fff;
  background: #a2ddf6;
}

.-selected-.-focus-.datepicker--cell-day.-other-month-, .-selected-.-focus-.datepicker--cell-year.-other-decade- {
  background: #8ad5f4;
}

.-in-range-.datepicker--cell-day.-other-month-, .-in-range-.datepicker--cell-year.-other-decade- {
  background-color: rgba(92, 196, 239, 0.1);
  color: #cccccc;
}

.-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- {
  background-color: rgba(92, 196, 239, 0.2);
}

.datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
  background: none;
  border: none;
}

/* -------------------------------------------------
    Navigation
   ------------------------------------------------- */
.datepicker--nav {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  border-bottom: 1px solid #efefef;
  min-height: 32px;
  padding: 4px;
}

.-only-timepicker- .datepicker--nav {
  display: none;
}

.datepicker--nav-title,
.datepicker--nav-action {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.datepicker--nav-action {
  width: 32px;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.datepicker--nav-action:hover {
  background: #f0f0f0;
}

.datepicker--nav-action.-disabled- {
  visibility: hidden;
}

.datepicker--nav-action svg {
  width: 32px;
  height: 32px;
}

.datepicker--nav-action path {
  fill: none;
  stroke: #9c9c9c;
  stroke-width: 2px;
}

.datepicker--nav-title {
  border-radius: 4px;
  padding: 0 8px;
}

.datepicker--nav-title i {
  font-style: normal;
  color: #9c9c9c;
  margin-left: 5px;
}

.datepicker--nav-title:hover {
  background: #f0f0f0;
}

.datepicker--nav-title.-disabled- {
  cursor: default;
  background: none;
}

.datepicker--buttons {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 4px;
  border-top: 1px solid #efefef;
}

.datepicker--button {
  color: #4EB5E6;
  cursor: pointer;
  border-radius: 4px;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  height: 32px;
}

.datepicker--button:hover {
  color: #4a4a4a;
  background: #f0f0f0;
}

.datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- {
  color: #dedede;
}

.datepicker--cell-day.-other-month-:hover, .datepicker--cell-year.-other-decade-:hover {
  color: #c5c5c5;
}

.-disabled-.-focus-.datepicker--cell-day.-other-month-, .-disabled-.-focus-.datepicker--cell-year.-other-decade- {
  color: #dedede;
}

.-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
  color: #fff;
  background: #a2ddf6;
}

.-selected-.-focus-.datepicker--cell-day.-other-month-, .-selected-.-focus-.datepicker--cell-year.-other-decade- {
  background: #8ad5f4;
}

.-in-range-.datepicker--cell-day.-other-month-, .-in-range-.datepicker--cell-year.-other-decade- {
  background-color: rgba(92, 196, 239, 0.1);
  color: #cccccc;
}

.-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- {
  background-color: rgba(92, 196, 239, 0.2);
}

.datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
  background: none;
  border: none;
}

/* -------------------------------------------------
    Timepicker
   ------------------------------------------------- */
.datepicker--time {
  border-top: 1px solid #efefef;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 4px;
  position: relative;
}

.datepicker--time.-am-pm- .datepicker--time-sliders {
  -webkit-flex: 0 1 138px;
  -ms-flex: 0 1 138px;
  flex: 0 1 138px;
  max-width: 138px;
}

.-only-timepicker- .datepicker--time {
  border-top: none;
}

.datepicker--time-sliders {
  -webkit-flex: 0 1 153px;
  -ms-flex: 0 1 153px;
  flex: 0 1 153px;
  margin-right: 10px;
  max-width: 153px;
}

.datepicker--time-label {
  display: none;
  font-size: 12px;
}

.datepicker--time-current {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-size: 14px;
  text-align: center;
  margin: 0 0 0 10px;
}

.datepicker--time-current-colon {
  margin: 0 2px 3px;
  line-height: 1;
}

.datepicker--time-current-hours,
.datepicker--time-current-minutes {
  line-height: 1;
  font-size: 19px;
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  position: relative;
  z-index: 1;
}

.datepicker--time-current-hours:after,
.datepicker--time-current-minutes:after {
  content: '';
  background: #f0f0f0;
  border-radius: 4px;
  position: absolute;
  left: -2px;
  top: -3px;
  right: -2px;
  bottom: -2px;
  z-index: -1;
  opacity: 0;
}

.datepicker--time-current-hours.-focus-:after,
.datepicker--time-current-minutes.-focus-:after {
  opacity: 1;
}

.datepicker--time-current-ampm {
  text-transform: uppercase;
  -webkit-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end;
  color: #9c9c9c;
  margin-left: 6px;
  font-size: 11px;
  margin-bottom: 1px;
}

.datepicker--time-row {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 11px;
  height: 17px;
  background: linear-gradient(to right, #dedede, #dedede) left 50%/100% 1px no-repeat;
}

.datepicker--time-row:first-child {
  margin-bottom: 4px;
}

.datepicker--time-row input[type='range'] {
  background: none;
  cursor: pointer;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 100%;
  padding: 0;
  margin: 0;
  -webkit-appearance: none;
}

.datepicker--time-row input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
}

.datepicker--time-row input[type='range']::-ms-tooltip {
  display: none;
}

.datepicker--time-row input[type='range']:hover::-webkit-slider-thumb {
  border-color: #b8b8b8;
}

.datepicker--time-row input[type='range']:hover::-moz-range-thumb {
  border-color: #b8b8b8;
}

.datepicker--time-row input[type='range']:hover::-ms-thumb {
  border-color: #b8b8b8;
}

.datepicker--time-row input[type='range']:focus {
  outline: none;
}

.datepicker--time-row input[type='range']:focus::-webkit-slider-thumb {
  background: #5cc4ef;
  border-color: #5cc4ef;
}

.datepicker--time-row input[type='range']:focus::-moz-range-thumb {
  background: #5cc4ef;
  border-color: #5cc4ef;
}

.datepicker--time-row input[type='range']:focus::-ms-thumb {
  background: #5cc4ef;
  border-color: #5cc4ef;
}

.datepicker--time-row input[type='range']::-webkit-slider-thumb {
  box-sizing: border-box;
  height: 12px;
  width: 12px;
  border-radius: 3px;
  border: 1px solid #dedede;
  background: #fff;
  cursor: pointer;
  transition: background .2s;
}

.datepicker--time-row input[type='range']::-moz-range-thumb {
  box-sizing: border-box;
  height: 12px;
  width: 12px;
  border-radius: 3px;
  border: 1px solid #dedede;
  background: #fff;
  cursor: pointer;
  transition: background .2s;
}

.datepicker--time-row input[type='range']::-ms-thumb {
  box-sizing: border-box;
  height: 12px;
  width: 12px;
  border-radius: 3px;
  border: 1px solid #dedede;
  background: #fff;
  cursor: pointer;
  transition: background .2s;
}

.datepicker--time-row input[type='range']::-webkit-slider-thumb {
  margin-top: -6px;
}

.datepicker--time-row input[type='range']::-webkit-slider-runnable-track {
  border: none;
  height: 1px;
  cursor: pointer;
  color: transparent;
  background: transparent;
}

.datepicker--time-row input[type='range']::-moz-range-track {
  border: none;
  height: 1px;
  cursor: pointer;
  color: transparent;
  background: transparent;
}

.datepicker--time-row input[type='range']::-ms-track {
  border: none;
  height: 1px;
  cursor: pointer;
  color: transparent;
  background: transparent;
}

.datepicker--time-row input[type='range']::-ms-fill-lower {
  background: transparent;
}

.datepicker--time-row input[type='range']::-ms-fill-upper {
  background: transparent;
}

.datepicker--time-row span {
  padding: 0 12px;
}

.datepicker--time-icon {
  color: #9c9c9c;
  border: 1px solid;
  border-radius: 50%;
  font-size: 16px;
  position: relative;
  margin: 0 5px -1px 0;
  width: 1em;
  height: 1em;
}

.datepicker--time-icon:after, .datepicker--time-icon:before {
  content: '';
  background: currentColor;
  position: absolute;
}

.datepicker--time-icon:after {
  height: .4em;
  width: 1px;
  left: calc(50% - 1px);
  top: calc(50% + 1px);
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}

.datepicker--time-icon:before {
  width: .4em;
  height: 1px;
  top: calc(50% + 1px);
  left: calc(50% - 1px);
}

.datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- {
  color: #dedede;
}

.datepicker--cell-day.-other-month-:hover, .datepicker--cell-year.-other-decade-:hover {
  color: #c5c5c5;
}

.-disabled-.-focus-.datepicker--cell-day.-other-month-, .-disabled-.-focus-.datepicker--cell-year.-other-decade- {
  color: #dedede;
}

.-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
  color: #fff;
  background: #a2ddf6;
}

.-selected-.-focus-.datepicker--cell-day.-other-month-, .-selected-.-focus-.datepicker--cell-year.-other-decade- {
  background: #8ad5f4;
}

.-in-range-.datepicker--cell-day.-other-month-, .-in-range-.datepicker--cell-year.-other-decade- {
  background-color: rgba(92, 196, 239, 0.1);
  color: #cccccc;
}

.-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- {
  background-color: rgba(92, 196, 239, 0.2);
}

.datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
  background: none;
  border: none;
}


/***************************/
.select2-container {
  width: 100% !important;
  z-index: 999999;
}

.select2-container--default .select2-selection--single {
  height: 38px !important;
  padding: 4px;
  font-size: 14px !important;
  border-radius: inherit !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #0347a2 !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered:before {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  pointer-events: none;
  color: #000;
  font-size: 0.875rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  display: none !important;
}

.select2-container--default .select2-selection--multiple {
  padding-top: 4px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  margin-top: 2px !important;
}
/***************************/

/**
 * Global Styles
 */
/** -------------------------------------------
 
    ------------------------------------------- **/
/** -------------------------------------------
 
    ------------------------------------------- **/
@font-face {
  font-family: "TurkcellSatura";
  src:   url("../fonts/greycliffcf-medium.woff?caffeine") format("woff"), url("../fonts/greycliffcf-medium.ttf?caffeine") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "TurkcellSatura";
  src:   url("../fonts/greycliffcf-light.woff?caffeine") format("woff"), url("../fonts/greycliffcf-light.ttf?caffeine") format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "TurkcellSatura";
  src:   url("../fonts/greycliffcf-demibold.woff?caffeine") format("woff"), url("../fonts/greycliffcf-demibold.ttf?caffeine") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "TurkcellSatura";
  src:   url("../fonts/greycliffcf-bold.woff?caffeine") format("woff"), url("../fonts/greycliffcf-bold.ttf?caffeine") format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "TurkcellSatura";
  src:   url("../fonts/greycliffcf-heavy.woff?caffeine") format("woff"), url("../fonts/greycliffcf-heavy.ttf?caffeine") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "ekip-mobil";
  src:   url("../fonts/ekip-mobil.woff?caffeine") format("woff"), url("../fonts/ekip-mobil.ttf?caffeine") format("truetype");
  font-weight: normal;
  font-style: normal;
}

.select2-container--default .select2-selection--single .select2-selection__rendered:before, [class^="icon-"]:before, [class*=" icon-"]:before, .login-link:before, input[type="radio"]:checked + label span::before, input[type="checkbox"]:checked + label span::before, .form-select:after, .dropdownCheckboxes button:after, .sidebar-box-search:before, .sidebar-box-accordion .sidebar-collapsible.uxr-collapsible-current .collapsible-header:after, .sidebar-box-accordion .sidebar-collapsible .collapsible-header:after, .uxr-modal-close:before, .modal-header .form-select:after, .modal-content-top-search:before, .modal-content-top-select:after, .help-modal-container:before {
  font-family: "ekip-mobil";
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/**
 * Layout
 * In layout component, there lays the general position of the main elements like page-wrap, header, footer, content etc.
 * Keep in mind, the layout components should only contain the position or size of these wrappers
 * the other elements  like logo in the header, menu in the footer should defined in the components or particules or other
 * appropriate folder to their definitions fit in.
 */
html,
body {
  overflow: hidden;
}

.page-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #fafafa;
}

.page-wrap .page-header a {
  text-decoration: none;
}

.container {
  display: block;
  width: 980px;
  margin: 0 auto;
}

@media screen and (max-width: 1024px) {
  .container {
    width: 100%;
  }
}

.page-main {
  position: relative;
  display: inline-block;
  width: 100%;
  height: calc(100% - 100px);
}

.login {
  height: initial;
}

.login .header {
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.login-main {
  display: inline-block;
  width: 100%;
  padding-top: 45px;
  background-color: #FFF;
}

@media screen and (max-width: 769px) {
  .login-main {
    padding-top: 25px;
  }
}

.login-title {
  position: relative;
  display: inline-block;
  width: 100%;
  margin: 0;
  padding-bottom: 45px;
  font-size: 2rem;
  color: #3fb0e8;
  font-weight: 400;
  text-align: center;
}

@media screen and (max-width: 769px) {
  .login-title {
    padding-bottom: 25px;
  }
}

.login-title:after {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  background: url(../images/sprite-shadows.png) center -61px;
  height: 18px;
  width: 100%;
  content: '';
}

@media screen and (max-width: 769px) {
  .login-title:after {
    top: 60px;
  }
}

.login-content {
  position: relative;
  margin-top: 40px;
}

@media screen and (max-width: 769px) {
  .login-content {
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 20px;
  }
}

.login-promo {
  display: inline-block;
  width: 60%;
  padding-right: 40px;
  text-align: center;
  float: left;
  border-right: 1px solid #e5e5e5;
}

@media screen and (max-width: 769px) {
  .login-promo {
    width: 100%;
    padding: 40px 30px;
    border-right: 0;
    border-top: 1px solid #e5e5e5;
  }
}

.login-promo-img {
  margin-bottom: 20px;
}

.login-promo-img img {
  max-width: 100%;
}

.login-promo-text {
  font-size: 1rem;
  margin: 30px 0 30px;
  color: #9D9D9D;
  font-weight: 300;
}

.login-user {
  display: inline-block;
  width: 40%;
  padding-left: 40px;
  text-align: left;
}

@media screen and (max-width: 769px) {
  .login-user {
    width: 100%;
    margin-bottom: 30px;
    padding: 0 30px;
    order: -1;
  }
}

.login-user-title {
  font-size: 1.875rem;
  margin-bottom: 50px;
}

@media screen and (max-width: 769px) {
  .login-user-title {
    margin-bottom: 20px;
  }
}

.login-user input[type="checkbox"] + label {
  font-style: normal;
  font-size: 1rem;
}

.login-user input[type="checkbox"] + label span {
  margin-top: 0px !important;
}

.login-user .tab-view:before {
  display: none;
}

.login-user .tab-view .tab-view-buttons {
  background: #fff;
}

.login-user .tab-view .tab-view-button {
  width: 140px;
  height: 83px;
  font-size: 9px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 700;
  color: #9d9d9d;
  border-right: 1px solid #eee;
  white-space: nowrap;
}

.login-user .tab-view .tab-view-button.fast-login {
  background: url(../images/fast-passive.png) center no-repeat;
  padding-top: 56px;
  border: 0;
  box-shadow: inset 9px -7px 20px 0px #f7f7f7;
}

.login-user .tab-view .tab-view-button.fast-login.current {
  background: url(../images/fast-active.png) center  no-repeat;
  box-shadow: none;
}

.login-user .tab-view .tab-view-button.login {
  background: url(../images/login-passive.png) center 16px no-repeat;
  padding-top: 56px;
  box-shadow: inset -9px -7px 20px 0px #f7f7f7;
}

.login-user .tab-view .tab-view-button.login.current {
  background: url(../images/login-active.png) center 16px no-repeat;
  box-shadow: none;
}

.login-user .tab-view .tab-view-button.current {
  color: #4d4d4d;
}

.login-user .tab-view .tab-view-button.current:after {
  display: none;
}

.login-form {
  display: inline-block;
  width: 90%;
}

@media screen and (max-width: 769px) {
  .login-form {
    width: 100%;
  }
}

.login-form li {
  margin-bottom: 15px;
}

.login-links {
  margin-top: 30px;
}

.login-link {
  position: relative;
  display: inline-block;
  margin-right: 15px;
  padding-left: 12px;
  font-size: 0.8125rem;
  color: #9d9d9d;
  text-decoration: none;
}

.login-link:hover {
  color: #3fb0e8;
  text-decoration: underline;
}

.login-link:before {
  position: absolute;
  top: 4px;
  left: 0;
  margin-right: 5px;
  font-size: 0.625rem;
  color: #3fb0e8;
}

.login-link.disable {
  color: #ccc;
  pointer-events: none;
}

.login-error {
  color: #db2133;
  font-size: 0.8125rem;
}

.login-secure {
  margin-top: 40px;
}

@media screen and (max-width: 769px) {
  .login-secure {
    margin-top: 30px;
  }
}

.login-secure-img {
  float: left;
}

.login-secure-text {
  font-size: 0.75rem;
  color: #a6a6a6;
  letter-spacing: .1px;
}

.login-fast {
  margin-top: 30px;
}

@media screen and (max-width: 769px) {
  .login-fast {
    margin-top: 20px;
  }
}

.login-fast-title {
  font-size: 0.875rem;
  color: #9d9d9d;
  font-weight: 700;
  margin-bottom: 10px;
}

.login-fast-text {
  font-size: 0.75rem;
  color: #a6a6a6;
  letter-spacing: .1px;
  line-height: 1.25;
}

.login-fast-iframe {
  margin-bottom: 5px;
}

.login-browser-text {
  display: inline-block;
  width: 100%;
  margin-top: 100px;
  font-size: 0.75rem;
  color: #999;
  text-align: center;
}

/**
 * Elements
 */
/** -------------------------------------------
    Elements
    ------------------------------------------- **/
.select2-container--default .select2-selection--single .select2-selection__rendered:before, .icon-arrow-down::before, .form-select:after, .dropdownCheckboxes button:after, .sidebar-box-accordion .sidebar-collapsible .collapsible-header:after, .modal-header .form-select:after, .modal-content-top-select:after {
  content: "\EA01";
}

.login-link:before, .icon-arrow-right::before {
  content: "\EA02";
}

.icon-arrow-up::before, .sidebar-box-accordion .sidebar-collapsible.uxr-collapsible-current .collapsible-header:after {
  content: "\EA03";
}

.icon-calendar::before {
  content: "\EA04";
}

.icon-choose-round::before {
  content: "\EA05";
}

.icon-circle-select::before {
  content: "\EA06";
}

.icon-close::before, .uxr-modal-close:before {
  content: "\EA07";
}

.icon-copy::before {
  content: "\EA08";
}

.icon-delete::before {
  content: "\EA09";
}

.icon-device::before {
  content: "\EA0A";
}

.icon-device2::before {
  content: "\EA0B";
}

.icon-edit::before {
  content: "\EA0C";
}

.icon-home::before {
  content: "\EA0D";
}

.icon-location::before, .help-modal-container:before {
  content: "\EA0E";
}

.icon-location2::before {
  content: "\EA0F";
}

.icon-logo::before {
  content: "\EA10";
}

.icon-map::before {
  content: "\EA11";
}

.icon-menu::before {
  content: "\EA12";
}

.icon-minus::before {
  content: "\EA13";
}

.icon-pin::before {
  content: "\EA14";
}

.icon-pin2::before {
  content: "\EA15";
}

.icon-pin3::before {
  content: "\EA16";
}

.icon-plus::before {
  content: "\EA17";
}

.icon-plus1::before {
  content: "\EA18";
}

.icon-point-pin::before {
  content: "\EA19";
}

.icon-polygon::before {
  content: "\EA1A";
}

.icon-question-mark::before {
  content: "\EA1B";
}

.icon-reload::before {
  content: "\EA1C";
}

.icon-road::before {
  content: "\EA1D";
}

.icon-ruler::before {
  content: "\EA1E";
}

.icon-screen::before {
  content: "\EA1F";
}

.icon-search::before, .sidebar-box-search:before, .modal-content-top-search:before {
  content: "\EA20";
}

.icon-select::before {
  content: "\EA21";
}

.icon-setting::before {
  content: "\EA22";
}

.icon-setting2::before {
  content: "\EA23";
}

.icon-sms::before {
  content: "\EA24";
}

.icon-success::before, input[type="radio"]:checked + label span::before, input[type="checkbox"]:checked + label span::before {
  content: "\EA25";
}

.icon-traffic::before {
  content: "\EA26";
}

.icon-user-pin::before {
  content: "\EA27";
}

/** -------------------------------------------
    Icons Extend
    ------------------------------------------- **/
[class*="icon-"] {
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  vertical-align: middle;
}

.icon-05x {
  font-size: .5rem;
}

.icon-075x {
  font-size: .75rem;
}

.icon-1--5x {
  font-size: 1.5rem;
}

.icon-2x {
  font-size: 2rem;
}

.icon-3x {
  font-size: 3rem;
}

.icon-4x {
  font-size: 4rem;
}

.icon-5x {
  font-size: 5rem;
}

.icon-6x {
  font-size: 6rem;
}

.icon-7x {
  font-size: 7rem;
}

/** -------------------------------------------
    Form
    ------------------------------------------- **/
label {
  margin-bottom: 4px;
}

.form-line {
  display: inline-block;
  width: 100%;
  margin-bottom: 10px;
}

.form-line-text {
  display: inline-block;
  width: 100%;
  margin-bottom: 10px;
  font-size: 0.875rem;
  color: #4d4d4d;
}

.form-counter {
  margin-top: 3px;
  float: right;
  font-size: 0.9375rem;
}

.form-label {
  display: inline-block;
  width: 100%;
  margin-bottom: 3px;
  font-size: 0.8125rem;
  color: #fff;
}

.form-box-col {
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.form-box-col .form-line {
  width: 49%;
}

input[type="radio"], input[type="checkbox"] {
  display: none;
}

input[type="radio"] + label {
  padding-left: 25px;
  color: #4d4d4d;
  font-size: 1.125rem;
}

input[type="checkbox"] + label,
input .custom-second + label {
  color: #979797;
  font-size: 1.125rem;
  font-style: italic;
}

@media screen and (max-width: 420px) {
  input[type="checkbox"] + label,
  input .custom-second + label {
    color: #4a4a4a;
    font-size: 1rem;
    font-style: normal;
  }
}

input[type="radio"] + label span {
  display: inline-block;
  position: relative;
  width: 25px;
  height: 25px;
  margin: -3px 5px 0 0;
  border: 2px solid #fff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  background: transparent;
  cursor: pointer;
  vertical-align: middle;
  box-sizing: border-box;
}

@media screen and (max-width: 420px) {
  input[type="radio"] + label span {
    width: 18px;
    height: 18px;
  }
}

input[type="radio"]:checked + label span::before {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 0.8125rem;
  transform: translate(-50%, -50%);
  color: #fff;
}

@media screen and (max-width: 420px) {
  input[type="radio"]:checked + label span::before {
    font-size: 0.625rem;
  }
}

input[type="checkbox"] + label span {
  display: inline-block;
  position: relative;
  width: 25px;
  height: 25px;
  margin: -3px 5px 0 0;
  border: 2px solid #fff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  background: transparent;
  cursor: pointer;
  vertical-align: middle;
  box-sizing: border-box;
}

@media screen and (max-width: 420px) {
  input[type="checkbox"] + label span {
    width: 18px;
    height: 18px;
  }
}

input[type="checkbox"]:checked + label span::before {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 0.8125rem;
  transform: translate(-50%, -50%);
  color: #fff;
}

@media screen and (max-width: 420px) {
  input[type="checkbox"]:checked + label span::before {
    font-size: 0.625rem;
  }
}

input[type="text"].search-input, input[type="password"].search-input, textarea.search-input, select.search-input {
  display: inline-block;
  width: 100%;
  height: 45px;
  padding: 0 40px 0 15px;
  background: rgba(255, 255, 255, 0.3);
  border: 2px solid #ffcb00;
  color: #fff;
  font-size: 1.125rem;
  font-weight: 300;
  border-radius: 6px;
}

input[type="text"].form-input, input[type="password"].form-input, textarea.form-input, select.form-input {
  display: inline-block;
  width: 100%;
  padding: 7px 5px;
  background: #fff;
  border: 0;
}

input[type="text"].form-input:disabled, input[type="password"].form-input:disabled, textarea.form-input:disabled, select.form-input:disabled {
  color: #c1c1c1 !important;
}

input[type="text"].login-input, input[type="password"].login-input, textarea.login-input, select.login-input {
  display: inline-block;
  width: 100%;
  padding: 11px 5px;
  -webkit-box-shadow: inset 0 1px 3px -2px black;
  -moz-box-shadow: inset 0 1px 3px -2px black;
  box-shadow: inset 0 1px 3px -2px black;
  background-color: #f6f6f6;
  border: 1px solid #e2e2e2;
  border-top: 1px solid #cdcdcd;
  border-bottom: 1px solid #efefef;
}

input[type="text"].login-input:focus, input[type="password"].login-input:focus, textarea.login-input:focus, select.login-input:focus {
  background-color: #fff;
  outline: 0;
}

input[type="text"].login-input.error, input[type="password"].login-input.error, textarea.login-input.error, select.login-input.error {
  border: 1px solid #db2133;
}

.form-select {
  position: relative;
}

.form-select select {
  display: inline-block;
  width: 100%;
  padding: 7px 10px;
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-image: none;
  -webkit-appearance: none;
  outline: none;
}

.form-select select::-ms-expand {
  display: none;
}

.form-select:after {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  pointer-events: none;
  color: #000;
  font-size: 0.875rem;
}

.point-select {
  display: inline-block;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: #133B70;
  border-radius: 4px;
  font-size: 1.0625rem;
  color: #fff;
  font-weight: 300;
  text-align: center;
  cursor: pointer;
}

.point-select .icon-pin {
  margin: 0 5px;
  font-size: 1.25rem;
}

.point-select.uxr-active {
  background: #FFCB00;
  color: #4d4d4d;
}

.form-file {
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  height: 34px;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.form-file-input {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 34px;
  margin: 0;
  padding: 0;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity=0);
  text-align: center;
}

.form-file-text {
  height: 34px;
  border: none;
  padding: 4px 10px;
  font-size: 0.75rem;
}

.form-file-btn {
  height: 34px;
  line-height: 25px;
  padding: 4px 10px;
  background: #024195;
  color: #fff;
  font-size: 0.6875rem;
}

.table-check input[type="checkbox"] + label span {
  border: 1px solid #4d4d4d;
  box-shadow: none;
}

.table-check input[type="checkbox"]:checked + label span::before {
  color: #4d4d4d;
}

.header-check input[type="checkbox"] + label span {
  margin-top: 3px;
  border: 2px solid #0347A2;
  box-shadow: none;
}

.header-check input[type="checkbox"]:checked + label span::before {
  color: #0347A2;
}

.login-check input[type="checkbox"] + label span {
  margin-top: 3px;
  background: #f6f6f6;
  border: 1px solid #e2e2e2;
  border-bottom: 1px solid #eee;
  border-top: 1px solid #cfcfcf;
  border-radius: 0;
  box-shadow: none;
}

.login-check input[type="checkbox"] + label span:hover {
  background: #e5e5e5;
}

.login-check input[type="checkbox"]:checked + label span::before {
  color: #3fb0e8;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: '';
}

.uxr-disabled {
  opacity: 0.5;
  cursor: none;
  background: #ccc;
}

select::-ms-expand {
  display: none !important;
}

.message-select-all {
  float: right;
  text-decoration: underline;
  cursor: pointer;
}

/** -------------------------------------------
 
    ------------------------------------------- **/
.save-device-button.secondary-action {
  display: inline-block;
  font-size: 1.25rem;
  padding: 10px 30px;
  opacity: .3;
}

.save-device-button.secondary-action.selected {
  opacity: 1;
}

.secondary-action.secondary-action {
  font-size: 1.25rem;
  padding: 10px 30px;
}

.primary-action {
  padding: 12px 30px;
  color: #000;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .primary-action {
    padding: 12px 30px 6px;
  }
}

@media screen and (max-width: 420px) {
  .primary-action {
    padding: 10px 30px;
  }
}

@media screen and (max-width: 420px) and (-webkit-min-device-pixel-ratio: 2), screen and (max-width: 420px) and (min-resolution: 192dpi) {
  .primary-action {
    padding: 10px 30px 8px;
  }
}

.primary-action:hover {
  color: #fff;
}

.primary-action:focus {
  outline: 0;
}

.reverse-action {
  background: #fff;
  color: #ffcb00;
}

.reverse-action:hover {
  background: #fff;
  color: #ffcb00;
  opacity: .8;
}

.secondary-action {
  background: #02459d;
  color: #fff;
}

.secondary-action:hover {
  opacity: .7;
}

.white-action {
  background: #fff;
  color: #ec2b83;
}

.white-action:hover {
  background: #fff;
  color: #ec2b83;
  opacity: .8;
}

.gray-action {
  background: #4d4d4d;
  color: #fff;
}

.tertiary-action {
  background: #242a32;
  color: #fff;
}

.tertiary-action:hover {
  background: #ec2b83;
  color: #fff;
  opacity: .8;
}

.bip-logo {
  display: inline-block;
  width: 25px;
  height: 25px;
  margin-left: 5px;
  background: url(../images/bip-logo.png) no-repeat center center;
  background-size: contain !important;
}

.sms-logo {
  margin-left: 5px;
  font-size: 1.5625rem;
}

.sms-logo:before {
  float: left;
}

.primary-action.logo-button,
.logo-button {
  -webkit-display: inline-flex;
  -moz-display: inline-flex;
  display: inline-flex;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.primary-action.logo-button .bip-logo,
.logo-button .bip-logo {
  width: 20px;
  height: 20px;
}

.primary-action.logo-button .sms-logo,
.logo-button .sms-logo {
  font-size: 1.25rem;
}

form label {
  width: 100%;
}

.dropdownCheckboxes .btn-default {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdownCheckboxes {
  position: relative;
}

.dropdownCheckboxes button {
  display: inline-block;
  width: 100%;
  padding: 11px 15px;
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-image: none;
  -webkit-appearance: none;
  outline: none;
  text-align: left;
  padding-right: 30px;
  position: relative;
}

.dropdownCheckboxes button .caret {
  display: none;
}

.dropdownCheckboxes button:after {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  color: #0347A2;
  font-size: 0.6875rem;
}

.dropdownCheckboxes.open .dropdown-menu {
  display: block;
}

.dropdownCheckboxes .dropdown-menu {
  display: none;
  background-color: #FFF;
  font-size: 12px;
  color: #4D4D4D;
  line-height: 1.4;
  padding-bottom: 5px;
  position: absolute;
  width: auto;
  min-width: 100%;
  max-height: 150px;
  overflow-y: auto;
  z-index: 9;
}

.dropdownCheckboxes .dropdown-menu.relative {
  position: relative;
}

.dropdownCheckboxes .dropdown-menu li {
  white-space: nowrap;
  padding-right: 15px;
}

.dropdownCheckboxes .dropdown-menu li label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.dropdownCheckboxes .dropdown-menu input:checked + span {
  background-color: #0347A2;
}

.dropdownCheckboxes .dropdown-menu input + span {
  height: 8px;
  width: 8px;
  box-sizing: border-box;
  border: 1px solid #0347A2;
  margin: 0px;
  margin-right: 10px;
  margin-left: 13px;
}

.dropdownCheckboxes.theme2:after {
  content: '';
  position: absolute;
  width: 40px;
  height: calc(100% - 4px);
  background: #f6f6f6;
  right: 2px;
  top: 2px;
  border-radius: 4px;
}

.dropdownCheckboxes.theme2 button {
  font-size: 0.875rem;
  border: 2px solid #0347A2;
  padding: 7px 35px 7px 10px;
  border-radius: 6px;
  background: transparent;
  white-space: nowrap;
  overflow: hidden;
}

.dropdownCheckboxes.theme2 button:after {
  display: none;
}

.select-all {
  padding-left: 12px;
  color: #0347A2;
  padding-top: 6px;
  padding-bottom: 6px;
  cursor: pointer;
}

#mvinfodiv1 td, #mvinfodiv1 th {
  padding: 0px;
}

#mvinfodiv1 td img, #mvinfodiv1 th img {
  float: right;
}

a {
  text-decoration: none;
}

.primary-action {
  display: inline-block;
  margin: 0 5px;
  padding: 8px 12px !important;
  background: #FFCB00 !important;
  font-size: 0.875rem;
  color: #4D4D4D !important;
  border-radius: 4px !important;
  text-align: center;
}

.gray-action {
  display: inline-block;
  margin: 0;
  padding: 10px 20px !important;
  background: #4d4d4d !important;
  font-size: 0.8125rem;
  color: #fff !important;
  border-radius: 4px !important;
  text-align: center;
}

.login-button {
  display: inline-block;
  line-height: 34px;
  margin: 0;
  padding: 10px 25px !important;
  color: #333 !important;
  background-color: #ffcb00;
  font-size: 1.0625rem;
  box-shadow: 0 1px 2px #ccc;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.section {
  margin: 0;
}

/** -------------------------------------------

    ------------------------------------------- **/
.flexible-row {
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

.flexible-row.column {
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.flexible-row.space-around {
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}

.flexible-row.space-between {
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.flexible-row.flex-end {
  -ms-flex-pack: end;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}

.flexible-row.flex-start {
  -ms-flex-pack: start;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}

.flexible-row.vertical-center {
  -ms-flex-align: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.flexible-row.horizontal-center {
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.flexible-row.vertical-end {
  -ms-flex-align: end;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
}

.flexible-row.vertical-start {
  -ms-flex-align: start;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}

.flexible-row.direction-column {
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.flexible-row.flex-wrap {
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

@media screen and (max-width: 420px) {
  .flexible-row.mobile-wrap {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}

/**
 * Particules
 */
/**
 * Components
 */
.header {
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -ms-flex-align: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  width: 100%;
  height: 60px;
  background: #0347a2;
  padding: 0 15px;
}

.header .logo img {
  float: left;
}

.header-right {
  color: #fff;
  font-size: 0.9375rem;
}

.header-right .settings-button {
  position: relative;
  top: -1px;
  display: inline-block;
  margin-right: 5px;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.header .logout-btn {
  font-size: 0.8125rem;
  color: #FFEC00;
  text-decoration: none;
}

[class^="tooltip"] {
  position: relative;
}

[class^="tooltip"]:after {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  content: attr(data-tooltip);
  padding: 6px 10px;
  top: 1.4em;
  left: 50%;
  font-size: 14px;
  transform: translateX(-100%);
  background: #000;
  border-radius: 3px;
  color: #fff;
  white-space: nowrap;
  z-index: 2;
}

[class^="tooltip"]:hover:before {
  display: block;
  opacity: 1;
  visibility: visible;
}

[class^="tooltip"]:hover:after {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translateX(-100%) translateY(0);
}

.tooltip-left span {
  padding: 5px;
}

.tooltip-left.active span {
  background-color: #ffcb00;
  border-radius: 25px;
}

.tooltip-left:before {
  content: '';
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #000;
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transform: translateX(0) translateY(-80%);
  top: 1.1em;
  left: -14px;
  z-index: 3;
}

.tooltip-left:after {
  top: -4px;
  left: -10px;
}

.tooltip-left:hover:after {
  transform: translateX(-100%) translateY(0);
  left: -10px;
}

.tooltip-left span:before {
  float: left;
}

.tooltip-right:before {
  content: '';
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #000;
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transform: translateX(0) translateY(-70%);
  top: 1.1em;
  right: -14px;
  z-index: 3;
}

.tooltip-right:after {
  top: -4px;
  left: 100%;
  transform: translateX(12%) translateY(0);
}

.tooltip-right:hover:after {
  transform: translateX(10%) translateY(0);
}

.tooltip-bottom:after {
  top: 30px;
  left: -50%;
  transform: translateX(0%) translateY(0);
}

.tooltip-bottom:hover:after {
  transform: translateX(10%) translateY(0);
}

.tooltip-triangle:before {
  content: '';
  width: 0;
  height: 0;
  border-left: solid 5px transparent;
  border-right: solid 5px transparent;
  border-bottom: solid 5px grey;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  transform: translateX(-50%) translateY(-2px);
  top: 1.1em;
  left: 50%;
  transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
  z-index: 3;
}

.tooltip-triangle:hover:before {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.menus {
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  height: 40px;
  background: #0657C5;
}

.menu li {
  position: relative;
  float: left;
}

.menu li:hover ul {
  display: block;
}

.menu li a {
  display: inline-block;
  margin: 0 40px;
  height: 40px;
  line-height: 37px;
  font-size: 1.125rem;
  color: #fff;
}

.menu li a.home-nav {
  margin: 0;
}

.menu li a.home-nav .icon {
  font-size: 1.25rem;
}

.menu li .submenu {
  position: absolute;
  display: none;
  width: 100%;
  margin-top: 15px;
  padding: 15px 0;
  background: rgba(3, 71, 162, 0.9);
  z-index: 99;
  border-radius: 10px;
  box-shadow: 0 1px 5px rgba(3, 71, 162, 0.7);
}

.menu li .submenu:before {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  margin-top: -25px;
  width: 0;
  height: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-bottom: 10px solid #0347A2;
  opacity: .9;
  content: '';
}

.menu li .submenu:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 25px;
  margin-top: -15px;
  content: '';
}

.menu li .submenu li {
  display: inline-block;
  width: 100%;
  text-align: center;
}

.menu li .submenu li a {
  margin: 5px 0;
  font-size: 0.9375rem;
  line-height: initial;
  height: auto;
}

.panel {
  position: absolute;
  top: 40%;
  right: 0;
  display: inline-block;
  width: 40px;
  padding: 15px 0;
  transform: translateY(-50%);
  background: rgba(6, 87, 197, 0.9);
  text-align: center;
  border-radius: 10px 0 0 10px;
  z-index: 1000;
}

.panel-list {
  cursor: pointer;
}

.panel-list li {
  width: 100%;
  float: left;
  margin-bottom: 10px;
}

.panel-list li:last-child {
  margin-bottom: 0;
}

.panel-list li span {
  color: #fff;
  font-size: 20px;
}

.sidebar {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 40px;
  height: 100%;
  padding: 5px 0;
  background: rgba(6, 87, 197, 0.9);
  text-align: center;
  z-index: 10000;
}

.sidebar-button {
  display: inline-block;
  margin-top: 10px;
  font-size: 22px !important;
  color: #FFCB00;
  cursor: pointer;
}

.sidebar .form-input,
.sidebar .form-select select,
.sidebar .dropdownCheckboxes button {
  padding: 10px !important;
  color: #0347a2 !important;
  font-size: 14px !important;
}

.sidebar.open {
  width: 320px;
}

.sidebar.open .sidebar-button {
  display: none;
}

.sidebar.open .sidebar-box {
  display: inline-block;
}

.sidebar.start {
  -webkit-transition-duration: .5s;
  -moz-transition-duration: .5s;
  transition-duration: .5s;
}

.sidebar-box {
  display: none;
  width: 100%;
  height: 100%;
}

.sidebar-box .select-all-sidebar label {
  color: #FFF;
  text-align: right;
  font-size: 0.6875rem;
  padding-bottom: 12px;
  cursor: pointer;
  width: 100%;
  font-style: normal;
}

.sidebar-box .select-all-sidebar label span {
  margin-left: 4px;
}

.sidebar-box-container {
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.sidebar-box-search {
  position: relative;
}

.sidebar-box-search:before {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  color: #dadada;
}

.sidebar-box-search .search-result {
  display: none;
  position: absolute;
  background: #0656c5;
  border: 2px solid #ffcb02;
  top: 43px;
  width: 100%;
  text-align: left;
  color: #fff;
  line-height: 1.6;
  max-height: 200px;
  padding-top: 10px;
  padding-bottom: 10px;
  overflow: scroll;
  z-index: 999999999;
}

.sidebar-box-search .search-result-title {
  color: #6493dc;
  padding-left: 15px;
  font-weight: 600;
  font-size: 1.25rem;
  margin-top: 10px;
}

.sidebar-box-search .search-result ul {
  border-bottom: 2px solid #2b6ed0;
  padding: 5px 10px 10px 15px;
}

.sidebar-box-search .search-result li {
  cursor: pointer;
  line-height: .9;
  margin-bottom: 10px;
}

.sidebar-box-close {
  display: inline-block;
  width: 100%;
  margin: 5px 0;
  color: #ffcb00;
  cursor: pointer;
}

.sidebar-box-header {
  display: inline-block;
  width: 100%;
  padding: 0 15px;
  text-align: right;
}

.sidebar-box-footer {
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  min-height: 40px;
}

.sidebar-box-footer .primary-action {
  width: 100%;
}

.sidebar-box-accordion {
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 20px 0;
  text-align: left;
  overflow-y: auto;
}

.sidebar-box-accordion .sidebar-collapsible {
  position: relative;
  display: inline-block;
  width: 100%;
  border-top: 1px solid rgba(255, 203, 0, 0.6);
  float: left;
  overflow: hidden;
}

.sidebar-box-accordion .sidebar-collapsible:last-child {
  border-bottom: 1px solid rgba(255, 203, 0, 0.6);
}

.sidebar-box-accordion .sidebar-collapsible .collapsible-header {
  display: inline-block;
  width: 100%;
  padding: 12px 5px 12px 20px;
  font-size: 1.1875rem;
  color: #fff;
  font-weight: 500;
}

.sidebar-box-accordion .sidebar-collapsible .collapsible-header:after {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 1rem;
}

.sidebar-box-accordion .sidebar-collapsible .collapsible-header .label {
  display: inline-block;
  margin-left: 15px;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 300;
}

.sidebar-box-accordion .sidebar-collapsible .collapsible-content {
  position: relative;
  width: 86%;
  margin-left: 7%;
}

.sidebar-box-accordion .sidebar-collapsible .collapsible-content .primary-action {
  margin: 0;
}

.sidebar-box-accordion .sidebar-collapsible .collapsible-content .letter-list {
  position: absolute;
  top: 5px;
  right: -9px;
  width: 1px;
  word-wrap: break-word;
  color: #fff;
  font-size: 0.625rem;
  font-weight: 300;
}

.sidebar-box-accordion .sidebar-collapsible .collapsible-content .letter-list span {
  cursor: pointer;
}

.sidebar-user-list {
  display: inline-block;
  width: 100%;
  max-height: 350px;
  margin-right: 10px;
  overflow-y: auto;
}

.sidebar-user-list li {
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -ms-flex-align: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  width: 100%;
  padding: 6px 5px;
  border-top: 1px solid rgba(255, 203, 0, 0.6);
  cursor: pointer;
}

.sidebar-user-list li:hover {
  background: rgba(255, 255, 255, 0.35);
}

.sidebar-user-list li:hover > .infobox {
  display: block;
}

.sidebar-user-list-profile {
  display: inline-block;
  width: 34px;
  min-width: 34px;
  height: 34px;
  line-height: 34px;
  border-radius: 50%;
  background: #fff;
  font-size: 1.0625rem;
  color: #0061f5;
  text-align: center;
  font-weight: 600;
  letter-spacing: 1px;
}

.sidebar-user-list-device {
  display: inline-block;
  height: 34px;
  line-height: 34px;
  border-radius: 50%;
  text-align: center;
  font-weight: 600;
  letter-spacing: 1px;
}

.sidebar-user-list-device .icon {
  color: #fff;
  font-size: 1.75rem;
}

.sidebar-user-list-content {
  display: inline-block;
  width: 100%;
  max-width: 180px;
  margin: 0 15px;
  font-size: 0.8125rem;
  color: #fff;
  overflow: hidden;
}

.sidebar .area-type {
  background-color: #FFF;
  padding: 19px 10px;
  display: flex;
  justify-content: space-between;
}

.sidebar .area-type > div {
  text-align: center;
}

.sidebar .area-type > div label {
  cursor: pointer;
}

.sidebar .area-type > div input:checked + .icon {
  color: #ffcb00;
}

.sidebar .area-type > div input:checked + .icon + p {
  color: #ffcb00;
}

.sidebar .area-type p {
  line-height: 12px;
  font-size: 13px;
  text-align: center;
  color: #0348A5;
  margin: 0;
}

.sidebar .area-type .icon {
  font-size: 26px;
  color: #0346A1;
  margin-bottom: 5px;
}

.primary-action.nav-modal {
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.map {
  display: inline-block;
  width: calc(100% - 40px);
  height: calc(100% - -20px);
  margin-left: 40px;
}

.map-control {
  position: absolute;
  bottom: 40px;
  right: 40px;
  display: inline-block;
  width: 26px;
  z-index: 1000;
}

.map-control-list li {
  width: 26px;
  height: 26px;
  line-height: 24px;
  float: left;
  margin-bottom: 10px;
  background: rgba(6, 87, 197, 0.9);
  text-align: center;
  border-radius: 3px;
  cursor: pointer;
}

.map-control-list li:last-child {
  margin-bottom: 0;
}

.map-control-list li span {
  color: #ffcb00;
  font-size: 12px;
}

.map-control-list li span:before {
  float: left;
}

.map-control-list li span.icon-question-mark {
  font-size: 16px;
}

.legend {
  position: absolute;
  right: 35px;
  bottom: 73px;
  display: none;
  width: 350px;
  padding: 15px 20px;
  background: rgba(6, 87, 197, 0.9);
  color: #fff;
  border-radius: 5px;
}

.legend.open {
  display: block;
}

.legend:after {
  content: '';
  clear: both;
}

.legend-close {
  position: absolute;
  top: 5px;
  left: 7px;
  color: #fff;
  cursor: pointer;
}

.legend-close span {
  font-size: 0.6875rem;
}

.legend li {
  margin: 3px 0 4px 0;
  font-size: 0.75rem;
  font-weight: 300;
  float: left;
  width: 50%;
}

.legend li div {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 8px;
}

.legend li.traffic-light {
  padding-top: 5px;
  padding-bottom: 5px;
}

.legend li .icon {
  margin-right: 7px;
  font-size: 1.125rem;
}

.legend li.location .icon {
  color: #52A3FF;
}

.legend li.location-gps .icon {
  color: #A8C047;
}

.legend li.device .icon {
  color: #CB8D57;
}

.legend li.customer-point .icon {
  color: #5E745E;
}

.legend li.critical-point .icon {
  color: #B34443;
}

.legend-list {
  display: block;
  margin-top: 5px;
}

.legend-list img {
  margin-right: 7px;
}

.legend-list .color {
  display: inline-block;
  width: 40px;
  height: 10px;
  margin-right: 7px;
}

.legend-list .color.light-green {
  background: #03F704;
}

.legend-list .color.green {
  background: #9DD145;
}

.legend-list .color.orange {
  background: #FEB13B;
}

.legend-list .color.red {
  background: #F80205;
}

#uxr-modal-overlay {
  opacity: .7;
  z-index: 99999;
}

.uxr-modal-container {
  width: 85%;
  z-index: 100000;
}

.uxr-modal-container.settings {
  width: 950px;
}

.uxr-modal-drag {
  display: none;
}

.uxr-modal-container {
  padding: 0;
  border-radius: 5px;
}

.uxr-modal-container.portfoy {
  width: 900px;
  height: 65%;
}

.uxr-modal-content {
  border-radius: 5px;
  overflow: hidden;
}

.uxr-modal-close {
  width: 40px;
  height: 40px;
  background: #fc0;
  line-height: 38px;
  text-align: center;
  top: -20px;
  right: -20px;
}

.uxr-modal-close:before {
  color: #022759;
}

.modal-header {
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  width: 100%;
  margin-bottom: 15px;
  padding: 10px;
  background: #F6F6F6;
}

.modal-header.file {
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.modal-header-col {
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

.modal-header-col .modal-header-item {
  width: auto;
  min-width: 140px;
}

.modal-header-col .auto {
  width: auto;
  min-width: initial;
}

.modal-header-col .select2-title {
  display: block;
  margin: 6px 0;
  font-size: 0.75rem;
}

.modal-header-col.select2 {
  display: block;
  width: 100%;
}

.modal-header-col .select2 {
  width: 100%;
}

.modal-header-item {
  display: inline-block;
  width: 100%;
  margin-right: 10px;
  font-size: 0.625rem;
  color: #4D4D4D;
}

.modal-header-item span {
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  margin-bottom: 5px;
  height: 20px;
  line-height: 1;
}

.modal-header-item-double {
  flex: 0 0 150px;
}

.modal-header-item-double .form-double-select {
  display: flex;
  justify-content: space-between;
}

.modal-header-item-double .form-double-select .form-select {
  width: calc(50% - 5px);
}

.modal-header-item.time {
  min-width: 120px;
}

.modal-header-button {
  min-width: max-content;
}

.modal-header-button span {
  display: block;
  margin-bottom: 5px;
  height: 20px;
}

.modal-header-button a {
  display: inline-block;
  height: 34px;
  line-height: 34px;
  margin: 0;
  padding: 8px 12px !important;
  font-size: 0.875rem;
  box-shadow: 0 1px 2px #ccc;
  white-space: nowrap;
}

.modal-header .form-input {
  font-size: 0.6875rem;
  height: 34px;
  line-height: 34px;
}

.modal-header .form-select {
  position: relative;
}

.modal-header .form-select select {
  display: inline-block;
  width: 100%;
  padding: 11px 5px;
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-image: none;
  -webkit-appearance: none;
  outline: none;
}

.modal-header .form-select:after {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  color: #0347A2;
  font-size: 0.6875rem;
}

.modal-button {
  display: inline-block;
  height: 34px;
  line-height: 34px;
  margin: 0;
  padding: 8px 12px !important;
  font-size: 0.875rem;
  box-shadow: 0 1px 2px #ccc;
}

.modal-content {
  display: inline-block;
  width: 100%;
  height: 100%;
  padding: 10px 0;
  background: #f0f0f0;
}

.modal-content-box {
  padding: 30px;
  background: #f0f0f0;
}

.modal-content-box .form-line-input {
  height: 35px !important;
  background: #fff;
  border-color: #0347A2 !important;
  color: #333 !important;
}

.modal-content-footer {
  display: inline-block;
  width: 100%;
  padding-top: 10px;
  text-align: right;
}

.modal-content-top-search {
  position: relative;
  display: inline-block;
  width: 25%;
  margin-left: 10px;
}

.modal-content-top-search input[type="text"].search-input {
  height: 35px;
  font-size: 1rem;
  border-color: #0347A2;
  color: rgba(77, 77, 77, 0.4);
}

.modal-content-top-search:before {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  color: #dadada;
}

.modal-content-top-datepicker {
  position: relative;
  display: inline-block;
  margin-right: 10px;
  float: right;
}

.modal-content-top-datepicker.full {
  width: calc(100% - 10px);
}

.modal-content-top-datepicker.full input[type="text"] {
  width: 100%;
  color: #000;
  font-size: 0.875rem;
  padding: 0px;
  text-indent: 10px;
}

.modal-content-top-datepicker.full input[type="text"]::-webkit-input-placeholder {
  color: #000;
  opacity: 1;
}

.modal-content-top-datepicker.full input[type="text"]::-moz-placeholder {
  color: #000;
  opacity: 1;
}

.modal-content-top-datepicker.full input[type="text"]:-ms-input-placeholder {
  color: #000;
  opacity: 1;
}

.modal-content-top-datepicker input[type="text"] {
  height: 35px;
  font-size: 1rem;
  border: 2px solid #0347A2;
  background: transparent;
  color: rgba(77, 77, 77, 0.4);
  border-radius: 6px;
  text-indent: 15px;
}

.modal-content-top-datepicker input[type="text"]:disabled {
  border-color: #ccc;
}

.modal-content-top-text {
  position: relative;
  display: inline-block;
  margin-right: 20px;
  float: right;
  color: rgba(77, 77, 77, 0.4);
}

.modal-content-top-select {
  position: relative;
  float: right;
  margin-right: 10px;
}

.modal-content-top-select.full {
  width: calc(100% - 10px);
}

.modal-content-top-select.full select {
  width: 100%;
}

.modal-content-top-select.filter {
  width: 200px;
  margin-left: 10px;
  float: left;
}

.modal-content-top-select.filter select {
  width: 100%;
}

.modal-content-top-select select {
  display: inline-block;
  padding: 7px 35px 7px 10px;
  border: 2px solid #0347A2;
  font-size: 0.875rem;
  background: transparent;
  box-shadow: none;
  border-radius: 6px;
  background-image: none;
  -webkit-appearance: none;
  outline: none;
  text-align: left;
}

.modal-content-top-select:after {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  color: #0347A2;
  font-size: 0.875rem;
}

.modal-content-top-button {
  display: inline-block;
  float: right;
  margin-right: 10px;
}

.modal-content-top-button a {
  display: inline-block;
  margin: 0;
  padding: 9px 30px !important;
  background: #02459D !important;
  color: #fff !important;
  font-size: 0.875rem;
  box-shadow: 0 1px 2px #ccc;
}

.modal-content-table {
  position: relative;
  display: inline-block;
  width: 100%;
  margin-top: 10px;
  padding-top: 45px;
  font-size: 0.75rem;
  overflow: hidden;
}

.modal-content-table-container {
  height: auto;
  max-height: 300px;
  overflow-y: auto;
}

.modal-content-table-container.jobs {
  height: 160px;
  margin-bottom: 10px;
}

.modal-content-table-container.customer-list {
  height: auto;
  max-height: 260px;
  margin-bottom: 10px;
}

.modal-content-table-container.report {
  min-height: 200px;
}

.modal-content-table .report-explanation {
  padding: 20px;
  font-size: 16px;
  line-height: 22px;
}

.modal-content-table thead th {
  height: 0;
  max-width: 100px;
  line-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  word-wrap: break-word;
}

.modal-content-table thead th .table-number {
  width: 80px;
  color: rgba(77, 77, 77, 0.4);
}

.modal-content-table thead th div {
  position: absolute;
  top: 0;
  margin-left: -5px;
  word-wrap: break-word;
  color: #4D4D4D;
  padding: 14px 5px;
  background: transparent;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1;
}

.modal-content-table thead th:first-child div {
  width: 100%;
  border-top: 1px solid rgba(151, 151, 151, 0.5);
  border-bottom: 1px solid rgba(151, 151, 151, 0.5);
}

.modal-content-table tbody tr:nth-child(odd) {
  background: #f6f6f6;
}

.modal-content-table tbody td {
  max-width: 100px;
  word-wrap: break-word;
}

.modal-content-table tbody td:first-child {
  text-align: center;
}

.modal-content-table tbody td .icon-arrow-down {
  font-size: 0.6875rem;
  color: #0347A2;
}

.modal-content-table tbody td .user-profile {
  display: inline-block;
  width: 34px;
  min-width: 34px;
  height: 34px;
  line-height: 34px;
  border-radius: 50%;
  background: #fff;
  font-size: 1.0625rem;
  color: #0061f5;
  font-weight: 600;
  letter-spacing: 1px;
  text-align: center;
}

.modal-content-table tbody td.actions {
  text-align: left;
}

.modal-content-table tbody td.actions a {
  font-size: 1.25rem;
  color: rgba(0, 0, 0, 0.3);
}

.modal-content-table tbody td.actions a:hover {
  color: #0347A2;
}

.modal-content-table tbody td .table-pin.purple {
  color: purple;
}

.modal-content-table tbody td .table-pin.red {
  color: red;
}

.modal-content-table tbody td .table-pin.green {
  color: green;
}

.modal-content-table tbody td .table-pin.blue {
  color: blue;
}

.modal-content-table tbody td .table-pin.orange {
  color: orange;
}

.modal-content-table tbody td .table-pin.yellow {
  color: yellow;
}

.modal-content-table tbody td .table-pin.gray {
  color: gray;
}

.modal-content-table tbody td .table-pin.brown {
  color: brown;
}

.modal-content-table tbody td .table-pin.darkGreen {
  color: darkGreen;
}

.modal-content-table tbody td .table-pin.black {
  color: black;
}

.modal-content-table tbody td .table-pin.softPink {
  color: #ff85b4;
}

.modal-content-table tbody td .table-pin.copper {
  color: #b58b73;
}

.modal-content-table tbody td .table-pin.lilac {
  color: #cfa2d9;
}

.modal-content-table tbody td .table-pin.kingBlue {
  color: #3e4981;
}

.modal-content-table tbody td .table-pin.pink {
  color: #e44386;
}

.modal-content-table tbody td .table-pin.mint {
  color: #6be1cb;
}

.modal-content-table tbody td .table-pin.violet {
  color: #765991;
}

.modal-content-table tbody td .table-pin.iceBlue {
  color: #62b1e9;
}

.modal-content-table tbody td .table-pin.beige {
  color: #e3ccaa;
}

.modal-content-table tbody td .table-pin.darkRed {
  color: #ab5055;
}

.modal-content-table-footer {
  padding: 0 10px;
  text-align: right;
}

.modal-content-table-pagination {
  display: flex;
  justify-content: center;
  padding-top: 15px;
}

.modal-content-table-pagination span {
  cursor: pointer;
  width: 18px;
  height: 18px;
  background: rgba(3, 71, 162, 0.4);
  border-radius: 20px;
  margin: 0 3px;
  font-weight: bold;
  font-size: 0.625rem;
  color: #FFF;
  line-height: 18px;
  text-align: center;
}

.modal-content-table-pagination span.active {
  background: #0347a2;
}

.custom-modal {
  display: inline-block;
  padding: 40px;
  border-radius: 10px;
  font-size: 0.875rem;
}

.custom-modal-container {
  border-radius: 10px;
  box-shadow: 0 0 30px -5px #333;
  z-index: 1000000;
}

.custom-modal-title {
  display: block;
  font-weight: 500;
  margin-bottom: 5px;
}

.custom-modal-header {
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.custom-modal-text {
  display: block;
  margin-bottom: 20px;
}

.custom-modal-buttons {
  display: inline-block;
  width: 100%;
  text-align: right;
}

.custom-modal-buttons a {
  margin: 0 0 0 10px;
}

.edit-modal {
  border-radius: 10px;
  box-shadow: 0 0 30px -5px #333;
  width: 92%;
  max-width: 1050px !important;
  min-height: 230px;
  z-index: 1000000;
}

.edit-modal .modal-container {
  width: 100%;
  padding: 20px;
}

.info-modal {
  z-index: 10000000;
}

.info-modal-message {
  width: 400px;
  z-index: 10000000;
}

.info-modal-message .jobs {
  height: 250px;
}

.company-content {
  position: relative;
  display: inline-block;
  width: 100%;
}

.company-content-left {
  display: inline-block;
  float: left;
}

.company-content h2 {
  font-size: 1.125rem;
  font-weight: 400;
}

.company-card {
  display: inline-block;
  padding: 30px;
  background: #0347A2;
  border-radius: 10px;
  float: right;
}

.company-card-title {
  display: inline-block;
  width: 50%;
  margin-bottom: 15px;
  padding-bottom: 7px;
  border-bottom: 1px solid #fff;
  color: #fff;
  font-size: 0.9375rem;
}

.company-card-text {
  display: inline-block;
  width: 100%;
  color: #fff;
  font-size: 1.0625rem;
}

.password-reminder {
  width: 400px;
}

.password-reminder .custom-modal-title {
  font-size: 1.25rem;
  text-align: center;
}

.password-reminder .custom-modal-title h3 {
  font-weight: 500;
}

.password-reminder .custom-modal-text {
  text-align: center;
  margin-bottom: 0;
}

.password-reminder .login-form {
  width: 100%;
  text-align: left;
}

.map-link {
  display: none;
  margin-top: 20px;
  font-size: 18px;
  padding-left: 2px;
  padding-bottom: 10px;
}

.map-link a {
  font-size: 12px;
  color: #0347A2;
  margin-left: 10px;
}

.divided-form-input {
  display: table;
  width: 100%;
}

.divided-form-input > div {
  display: table-cell;
}

.divided-form-input > div:nth-child(2) {
  padding: 2px;
  text-align: center;
}

.modal-header .divided-form-input .form-select:after {
  right: 5px;
}

.modal-header .divided-form-input .form-select select {
  padding: 11px 5px 11px 2px;
}

.uxr-plus-text {
  font-size: 20px;
  line-height: 0;
}

.kullaniciler-btn {
  padding: 5px;
  cursor: pointer;
}

.responseCoords-text {
  float: left;
}

.short-td {
  width: 10px;
}

.modal-search-result {
  display: none;
  position: absolute;
  background: #0656c5;
  border: 2px solid #ffcb02;
  top: 35px;
  width: 100%;
  text-align: left;
  color: #fff;
  line-height: 1.6;
  max-height: 200px;
  padding-top: 10px;
  padding-bottom: 10px;
  overflow: scroll;
  z-index: 999999999;
}

.modal-search-result-title {
  color: #6493dc;
  padding-left: 15px;
  font-weight: 600;
  font-size: 1.25rem;
  margin-top: 10px;
}

.modal-search-result ul {
  border-bottom: 2px solid #2b6ed0;
  padding: 5px 10px 10px 15px;
}

.modal-search-result li {
  cursor: pointer;
  line-height: .9;
  margin-bottom: 10px;
}

.delete-tooltip,
.islemler-tooltip,
.kullanicilar-tooltip {
  position: absolute;
  background-color: #FFF;
  border-radius: 20px;
  padding: 20px;
  z-index: 9999999;
  top: 0;
  display: none;
}

.delete-tooltip:after,
.islemler-tooltip:after,
.kullanicilar-tooltip:after {
  content: '';
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 19px solid #fff;
  bottom: -19px;
  position: absolute;
  left: calc(50% - 20px);
}

.delete-tooltip p,
.islemler-tooltip p,
.kullanicilar-tooltip p {
  word-wrap: break-word;
}

.delete-tooltip p:first-child,
.islemler-tooltip p:first-child,
.kullanicilar-tooltip p:first-child {
  display: block;
}

.delete-tooltip p:nth-child(2),
.islemler-tooltip p:nth-child(2),
.kullanicilar-tooltip p:nth-child(2) {
  display: none;
}

.delete-tooltip.baslat-tooltip p:first-child,
.islemler-tooltip.baslat-tooltip p:first-child,
.kullanicilar-tooltip.baslat-tooltip p:first-child {
  display: none;
}

.delete-tooltip.baslat-tooltip p:nth-child(2),
.islemler-tooltip.baslat-tooltip p:nth-child(2),
.kullanicilar-tooltip.baslat-tooltip p:nth-child(2) {
  display: block;
}

.islemler-tooltip,
.kullanicilar-tooltip {
  max-width: 300px;
  padding: 20px 25px;
  font-size: 13px;
}

#error-tab {
  display: block;
  width: 400px;
  text-align: center;
}

#error-tab .message {
  background-color: #F0F0F0;
  box-sizing: border-box;
  padding: 15px 15px;
  min-height: 150px;
}

.mini-box {
  min-width: 250px;
  min-height: 200px;
  background-color: #FFF;
  top: 0;
  left: 0;
  z-index: 999999;
}

.mini-box .content {
  padding: 25px 15px 15px 15px;
}

.mini-box .content a {
  color: #0347a2;
  padding: 0;
  text-decoration: none;
}

.mini-box .content table {
  font-size: 14px;
  border-collapse: collapse;
  margin-top: 15px;
  margin-bottom: 15px;
}

.mini-box .content table thead th {
  color: #4D4D4D;
  font-weight: normal;
}

.mini-box .content table th {
  background-color: #f0f0f0;
}

.mini-box .content table td {
  border: 1px solid #f0f0f0;
}

.infobox {
  width: 275px;
  font-size: 0.8125rem;
  background: #fff;
  box-shadow: 0 25px 25px rgba(0, 0, 0, 0.2);
  z-index: 9999;
}

.infobox.side {
  display: none;
  position: fixed !important;
  left: 281px;
}

.infobox.side:before {
  position: absolute;
  left: -10px;
  top: 5px;
  content: '';
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 15px solid #fff;
}

.infobox.side.open {
  display: block;
  position: fixed;
  top: 53%;
  left: 26%;
}

.infobox-header {
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  width: 100%;
  height: 50px;
  padding: 0 15px;
  background: #F0F0F0;
  font-weight: 600;
  border-bottom: 1px solid #979797;
}

.infobox-footer {
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  width: 100%;
  height: 50px;
  padding: 0 10px;
  background: #F0F0F0;
  border-bottom: 1px solid #979797;
}

.infobox-footer-content {
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.infobox-footer .bip-button {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url(../images/bip-logo.png) no-repeat center center;
}

.infobox-footer .icon {
  margin: 0 3px;
  color: #0061F5;
  font-size: 1.25rem;
}

.infobox-close {
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-right: -8px;
  background: #FFCC00;
  color: #022759;
  line-height: 1.6;
  border-radius: 50px;
  text-align: center;
}

.infobox-close .icon {
  font-size: 0.75rem;
}

.infobox-close .icon:before {
  float: left;
}

.infobox-line {
  display: inline-block;
  width: 100%;
  padding: 10px 15px;
  color: rgba(71, 71, 71, 0.6);
  border-bottom: 1px solid rgba(151, 151, 151, 0.5);
}

.infobox-line span {
  display: inline-block;
  width: 100%;
  margin: 3px 0;
  color: #4D4D4D;
  font-weight: 600;
}

.infobox-line a {
  color: #0347A2;
  font-weight: 600;
  text-decoration: underline;
}

.infobox-line.history-location {
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -ms-flex-align: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.infobox-line.full {
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.infobox-line.full .infobox-subline {
  display: inline-block;
  margin-bottom: 10px;
}

.infobox-line.full .infobox-subline:last-child {
  margin: 0;
}

.infobox-line.location-info .infobox-subline {
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.infobox-line.location-info .infobox-subline .icon {
  width: initial;
  margin: 0 0 0 5px;
}

.infobox-line.location-info .infobox-subline .icon:before {
  float: left;
}

.infobox-line.location-info .infobox-subline .distance {
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -ms-flex-align: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  white-space: nowrap;
}

.infobox-line.coordinat {
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.infobox-line.coordinat span {
  width: initial;
  margin-right: 5px;
}

.infobox-line .icon {
  color: #0061F5;
  font-size: 1.25rem;
}

.infobox-subline {
  display: inline-block;
}

.infobox-subline:last-child {
  margin: 0;
}

.infobox-subline.time span {
  display: inline;
  font-weight: 600;
  font-size: 1.625rem;
}

.infobox-subline.arrows {
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

.infobox-subline.arrows a {
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  width: 30px;
  height: 30px;
  margin: 0 0 0 5px;
}

.infobox-subline.arrows a:first-child .icon {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.infobox-subline.arrows a .icon {
  width: 20px;
  height: 20px;
  font-size: 18px;
  color: #4d4d4d;
}

.popup .page-main {
  padding: 30px 70px;
}

.popup .infobox {
  position: static;
  transform: none;
  margin: 0 20px 20px 0;
  float: left;
}

.help-modal {
  width: 900px;
}

.help-modal-container {
  display: inline-block;
  width: 50%;
  margin: 80px 10% 140px 32%;
}

.help-modal-container:before {
  position: absolute;
  left: -13%;
  color: rgba(24, 86, 169, 0.3);
  font-size: 21.875rem;
}

.help-modal-title {
  display: inline-block;
  margin-bottom: 30px;
  font-weight: 600;
  font-size: 2.8125rem;
  line-height: 1.2;
}

.help-modal-text {
  display: inline-block;
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.help-modal-footer {
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -ms-flex-pack: end;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -ms-flex-align: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: #0347A2;
}

.help-modal-nav {
  display: inline-block;
}

.help-modal-nav li {
  float: left;
}

.help-modal-nav li a {
  display: inline-block;
  padding: 0 20px;
  color: rgba(255, 255, 255, 0.4);
  border-right: 1px solid rgba(255, 203, 0, 0.2);
}

.help-modal-nav li:last-child a {
  border: 0;
}

.past-location-filter {
  width: 100%;
}

.past-location-col {
  position: relative;
  width: 49%;
}

.past-location-col .icon {
  position: absolute;
  right: 5px;
  bottom: 8px;
  color: #0347a2;
}

.past-location-bottom {
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  width: 100%;
}

.past-location-list {
  max-height: 300px;
  overflow: hidden;
}

.past-location-list-header {
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  width: 86%;
  margin: 10px 0 5px 7%;
  font-size: 0.875rem;
  color: #fff;
}

.past-location-datepicker {
  position: relative;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.past-location-action {
  display: inline-block;
  width: 48% !important;
  padding: 0 !important;
  height: inherit !important;
  background: transparent !important;
  border: 1px solid #fff !important;
}

.past-location-action input[type="checkbox"] + label {
  width: 100%;
  margin: 0;
  padding: 8px 5px;
  font-style: normal;
  color: #fff;
  font-size: 0.6875rem;
  text-align: center;
  line-height: 1.6;
  cursor: pointer;
}

.past-location-action input[type="checkbox"] + label span {
  width: 20px;
  height: 20px;
  margin-top: -2px;
  float: right;
}

.past-location-action input[type="checkbox"] + label span:before {
  font-size: 0.5625rem;
}

.loader {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.75);
  z-index: 99999999999999;
}

.loader-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: url(../images/loader.svg) center center;
  background-size: contain;
}

.loader-new {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.75);
  z-index: 99999999999999;
}

.loader-icon-new {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: url(../images/loader.svg) center center;
  background-size: contain;
}

/**
 * Auxiliary
 */
.datepicker {
  z-index: 100000000;
}

.left {
  float: left;
}

.right {
  float: right;
}

/**
 * Lastly, import Melange Auxiliary
 * For auxiliary usages, the final visibility or behaviour states of the elements, add the auxiliary definitions at last.
 * The auxiliary definitions are such as `.is-hidden`, `.has-action`
 */
/* @author Bilal Cinarli */
/** -------------------------------------------
    Auxiliary Definitions
    ------------------------------------------- **/
/* @author Bilal Cinarli */
/** -------------------------------------------
    Visibility Related
    ------------------------------------------- **/
/*
 * Hide element
 */
.is-hidden,
.hide {
  display: none;
}

/*
 * Sometimes you do not hide the element
 * `for-screenreader-only` the element will not hidden but
 * visually invisible for accessibility 
 */
.for-screenreader-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip: rect(0, 0, 0, 0);
}

/**
 * Device visibility
 */
@media screen and (max-width: 1223px) {
  .desktop-visible {
    display: none;
  }
}

@media screen and (min-width: 1224px) {
  .desktop-hidden,
  .tablet-visible {
    display: none;
  }
}

@media screen and (min-width: 421px) and (max-width: 1024px) {
  .tablet-hidden {
    display: none;
  }
}

@media screen and (min-width: 421px) {
  .mobile-visible {
    display: none;
  }
}

@media screen and (max-width: 420px) {
  .mobile-hidden,
  .tablet-visible {
    display: none;
  }
}

.fastLoginButton {
width: 220px;
height: 35px;
cursor: pointer;
}


.loadingDiv{width:100%; height:100%; position: fixed; background: rgba(255,255,255,.7); display: none; top:0; left:0; z-index: 300000; }
.loadingDiv img{display: block; margin: 0 auto; width:100px; height: 100px; position: absolute; top:50%; margin-top: -50px; left:50%; margin-left: -50px;}

.checklistnamesfilter {border-radius: 5px;margin: 2px 10px;width: 85%;}