*
* Demo: jsfiddle.net/inuitcss/E26Yd
*
*/
.text-cols--2, .text-cols--3, .text-cols--4, .text-cols--5 {
-webkit-column-gap: 23px;
-moz-column-gap: 23px;
-ms-column-gap: 23px;
-o-column-gap: 23px;
column-gap: 23px; }
.text-cols--2 {
-webkit-column-count: 2;
-moz-column-count: 2;
-ms-column-count: 2;
-o-column-count: 2;
column-count: 2; }
.text-cols--3 {
-webkit-column-count: 3;
-moz-column-count: 3;
-ms-column-count: 3;
-o-column-count: 3;
column-count: 3; }
.text-cols--4 {
-webkit-column-count: 4;
-moz-column-count: 4;
-ms-column-count: 4;
-o-column-count: 4;
column-count: 4; }
.text-cols--5 {
-webkit-column-count: 5;
-moz-column-count: 5;
-ms-column-count: 5;
-o-column-count: 5;
column-count: 5; }
/*------------------------------------*\
$NAV
\*------------------------------------*/
/**
* Nav abstraction as per: csswizardry.com/2011/09/the-nav-abstraction
* When used on an `ol` or `ul`, this class throws the list into horizontal mode
* e.g.:
*
li:last-child:after {
display: none; }
/*------------------------------------*\
$PAGINATION
\*------------------------------------*/
/**
* Basic pagination object, extends `.nav`.
* Requires some funky commenting to collapse any white-space caused by the
* `display:inline-block;` rules.
*
*
* Demo: jsfiddle.net/inuitcss/9Y6PU
*
*/
.pagination {
text-align: center;
/**
* Remove whitespace caused by `inline-block`.
*/
letter-spacing: -0.31em;
word-spacing: -0.43em; }
.pagination > li {
padding: 11.5px;
letter-spacing: normal;
word-spacing: normal; }
.pagination > li > a {
padding: 11.5px;
margin: -11.5px; }
.pagination__first a:before {
content: "\00AB" "\00A0"; }
.pagination__last a:after {
content: "\00A0" "\00BB"; }
/*------------------------------------*\
$MEDIA
\*------------------------------------*/
/**
* Place any image- and text-like content side-by-side, as per:
* stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
* E.g.:
*
*
* Demo: jsfiddle.net/inuitcss/cf4Qs
*
*/
.media {
display: block; }
.media__img {
float: left;
margin-right: 23px; }
/**
* Reversed image location (right instead of left).
*/
.media__img--rev {
float: right;
margin-left: 23px; }
.media__img img,
.media__img--rev img {
display: block; }
.media__body {
overflow: hidden; }
.media__body,
.media__body > :last-child {
margin-bottom: 0; }
/**
* `.img`s in `.islet`s need an appropriately sized margin.
*/
.islet .media__img {
margin-right: 11.5px; }
.islet .media__img--rev {
margin-left: 11.5px; }
/*------------------------------------*\
$ISLAND
\*------------------------------------*/
/**
* Simple, boxed off content, as per: csswizardry.com/2011/10/the-island-object
* E.g.:
*
I am boxed off.
*
* Demo: jsfiddle.net/inuitcss/u8pV3
*
*/
.island,
.islet {
display: block; }
.island {
padding: 23px; }
.island > :last-child,
.islet > :last-child {
margin-bottom: 0; }
/**
* Just like `.island`, only smaller.
*/
.islet {
padding: 11.5px; }
/*------------------------------------*\
$BLOCK-LIST
\*------------------------------------*/
/**
* Create big blocky lists of content, e.g.:
*
*
* Extend this object in your theme stylesheet.
*
* Demo: jsfiddle.net/inuitcss/hR57q
*
*/
.block-list,
.block-list > li {
border: 0 solid #ccc; }
.block-list {
list-style: none;
margin-left: 0;
border-top-width: 1px; }
.block-list > li {
border-bottom-width: 1px;
padding: 11.5px; }
.block-list__link {
display: block;
padding: 11.5px;
margin: -11.5px; }
/*------------------------------------*\
$FLYOUT
\*------------------------------------*/
/**
* Flyouts are pieces of content that fly out of a parent when said parent is
* hovered. They typically appear bottom-left of the parent.
*
*
* Extend these objects in your theme stylesheet.
*
* Demo: jsfiddle.net/inuitcss/B52HG
*
*/
.flyout,
.flyout--alt {
position: relative;
overflow: hidden; }
.flyout__content {
/**
* Position the flyouts off-screen. This is typically better than
* `display:none;`.
*/
position: absolute;
top: 100%;
left: -99999px; }
/**
* Bring the flyouts into view when you hover their parents.
* Two different types of flyout; 'regular' (`.flyout`) and 'alternative'
* (`.flyout--alt`).
*/
.flyout:hover,
.flyout--alt:hover {
overflow: visible; }
/**
* Regular flyouts sit all the way from the top, flush left.
*/
.flyout:hover > .flyout__content {
left: 0; }
/**
* Alternative flyouts sit all the way from the left, flush top.
*/
.flyout--alt:hover > .flyout__content {
top: 0;
left: 100%; }
/*------------------------------------*\
$ARROWS
\*------------------------------------*/
/**
* It is a common design treatment to give an element a triangular points-out
* arrow, we typically build these with CSS. These following classes allow us to
* generate these arbitrarily with a mixin, `@arrow()`.
*/
/**
* Forms the basis for any/all CSS arrows.
*/
.form-field__errors > ul {
position: relative; }
.form-field__errors > ul:before, .form-field__errors > ul:after {
content: "";
position: absolute;
border-collapse: separate; }
.form-field__errors > ul:before {
border: 11.5px solid transparent; }
.form-field__errors > ul:after {
border: 10.5px solid transparent; }
/**
* Define individual edges so we can combine what we need, when we need.
*/
.form-field__errors > ul:before, .form-field__errors > ul:after {
bottom: 100%; }
.form-field__errors > ul:before {
right: 10.5px; }
.form-field__errors > ul:after {
right: 11.5px; }
/*------------------------------------*\
$BEAUTONS.CSS
\*------------------------------------*/
/**
* beautons is a beautifully simple button toolkit.
*
* LICENSE
*
* Copyright 2013 Harry Roberts
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/
/*!*
*
* @csswizardry -- csswizardry.com/beautons
*
*/
/*------------------------------------*\
$BASE
\*------------------------------------*/
/**
* Base button styles.
*
* 1. Allow us to better style box model properties.
* 2. Line different sized buttons up a little nicer.
* 3. Stop buttons wrapping and looking broken.
* 4. Make buttons inherit font styles.
* 5. Force all elements using beautons to appear clickable.
* 6. Normalise box model styles.
* 7. If the button's text is 1em, and the button is (3 * font-size) tall, then
* there is 1em of space above and below that text. We therefore apply 1em
* of space to the left and right, as padding, to keep consistent spacing.
* 8. Basic cosmetics for default buttons. Change or override at will.
* 9. Don't allow buttons to have underlines; it kinda ruins the illusion.
*/
.btn {
display: inline-block;
/* [1] */
vertical-align: middle;
/* [2] */
white-space: nowrap;
/* [3] */
font-family: inherit;
/* [4] */
font-size: 100%;
/* [4] */
cursor: pointer;
/* [5] */
border: none;
/* [6] */
margin: 0;
/* [6] */
padding-top: 0;
/* [6] */
padding-bottom: 0;
/* [6] */
line-height: 3;
/* [7] */
padding-right: 1em;
/* [7] */
padding-left: 1em;
/* [7] */
border-radius: 4px;
/* [8] */ }
.btn, .btn:hover {
text-decoration: none;
/* [9] */ }
.btn:active, .btn:focus {
outline: none; }
/*------------------------------------*\
$SIZES
\*------------------------------------*/
/**
* Button size modifiers.
*
* These all follow the same sizing rules as above; text is 1em, space around it
* remains uniform.
*/
.btn--small {
padding-right: 0.5em;
padding-left: 0.5em;
line-height: 2; }
.btn--large {
padding-right: 1.5em;
padding-left: 1.5em;
line-height: 4; }
.btn--huge {
padding-right: 2em;
padding-left: 2em;
line-height: 5; }
/**
* These buttons will fill the entirety of their container.
*
* 1. Remove padding so that widths and paddings don't conflict.
*/
.btn--full {
width: 100%;
padding-right: 0;
/* [1] */
padding-left: 0;
/* [1] */
text-align: center; }
/*------------------------------------*\
$FONT-SIZES
\*------------------------------------*/
/**
* Button font-size modifiers.
*/
.btn--alpha {
font-size: 3rem; }
.btn--beta {
font-size: 2rem; }
.btn--gamma {
font-size: 1rem; }
/**
* Make the button inherit sizing from its parent.
*/
.btn--natural {
vertical-align: baseline;
font-size: inherit;
line-height: inherit;
padding-right: 0.5em;
padding-left: 0.5em; }
/*------------------------------------*\
$FUNCTIONS
\*------------------------------------*/
/**
* Button function modifiers.
*/
/**
* Positive actions; e.g. sign in, purchase, submit, etc.
*/
.btn--positive {
background-color: #4A993E;
color: #fff; }
/**
* Negative actions; e.g. close account, delete photo, remove friend, etc.
*/
.btn--negative {
background-color: #b33630;
color: #fff; }
/**
* Inactive, disabled buttons.
*
* 1. Make the button look like normal text when hovered.
*/
.btn--inactive,
.btn--inactive:hover,
.btn--inactive:active,
.btn--inactive:focus {
background-color: #ddd;
color: #777;
cursor: text;
/* [1] */ }
/*------------------------------------*\
$STYLES
\*------------------------------------*/
/**
* Button style modifiers.
*
* 1. Use an overly-large number to ensure completely rounded, pill-like ends.
*/
.btn--soft {
border-radius: 200px;
/* [1] */ }
.btn--hard {
border-radius: 0; }
/*------------------------------------*\
$LOZENGES
\*------------------------------------*/
/**
* Create pill- and lozenge-like runs of text, e.g.:
*
This here is a pill!
*
This here is also a lozenge!
*
* Pills have fully rounded ends, lozenges have only their corners rounded.
*
* Demo: jsfiddle.net/inuitcss/N3pGm
*
*/
.pill, .loz {
display: inline-block;
/**
* These numbers set in ems mean that, at its narrowest, a lozenge will be
* the same width as the `line-height` set on the `html` element.
* This allows us to use the `.loz` in almost any `font-size` we wish.
*/
min-width: 1.09524em;
padding-right: 0.27381em;
padding-left: 0.27381em;
/* =1.50em */
text-align: center;
background-color: #ccc;
color: #fff;
/* Override this color in your theme stylesheet */
/**
* Normally we'd use border-radius:100%; but instead here we just use an
* overly large number; `border-radius:100%;` would create an oval on
* non-square elements whereas we just want to round the ends of an element.
*/
border-radius: 100px; }
.loz {
border-radius: 4px; }
/*------------------------------------*\
$RULES
\*------------------------------------*/
/**
* Horizontal rules, extend `hr`.
*
* Demo: jsfiddle.net/inuitcss/L6GuZ
*
*/
.rule {
color: #ccc;
border: none;
border-bottom-width: 1px;
border-bottom-style: solid;
margin-bottom: 22px;
margin-bottom: 1.57143rem; }
/**
* Dotted rules
*/
.rule--dotted {
border-bottom-style: dotted; }
/**
* Dashed rules
*/
.rule--dashed {
border-bottom-style: dashed; }
/**
* Ornamental rules. Places a § over the rule.
*/
.rule--ornament {
position: relative;
/**
* Pass in an arbitrary ornament though a data attribute, e.g.:
*
*
*/ }
.rule--ornament:after {
content: "\00A7";
position: absolute;
top: 0;
right: 0;
left: 0;
line-height: 0;
text-align: center; }
.rule--ornament[data-ornament]:after {
content: attr(data-ornament); }
/*------------------------------------*\
$GREYBOX
\*------------------------------------*/
/**
* Quickly throw together greybox wireframes. Use in conjunction with other
* inuit.css objects to create simple greybox prototypes, e.g.:
*
Header
*
* The beauty of combining the greyboxing with inuit.css objects is that any
* prototyping can quickly be converted into/used as production code.
*
* For a more complete prototyping framework, consider Adam Whitcroft's Proto:
* adamwhitcroft.com/proto
*
* Demo: jsfiddle.net/inuitcss/qCXfh/
*
*/
.greybox,
.graybox {
font-size: 12px;
font-size: 0.85714rem;
line-height: 1.91667;
font-family: sans-serif;
text-align: center;
background-color: rgba(0, 0, 0, 0.2);
color: #fff; }
.greybox a,
.graybox a {
color: #fff;
text-decoration: underline; }
/**
* All greyboxes will occupy 100% of their parent's width, but to alter their
* heights we apply incrementally larger line-heights:
*/
.greybox--small,
.graybox--small {
line-height: 46px; }
.greybox--medium,
.graybox--medium {
line-height: 92px; }
.greybox--large,
.graybox--large {
line-height: 184px; }
.greybox--huge,
.graybox--huge {
line-height: 368px; }
.greybox--gigantic,
.graybox--gigantic {
line-height: 736px; }
/**
* Style trumps; helper and brand classes
*/
/*------------------------------------*\
$WIDTHS
\*------------------------------------*/
/**
* Sizes in human readable format. These are used in conjunction with other
* objects and abstractions found in inuit.css, most commonly the grid system
* and faux flexbox.
*
* We have a mixin to generate our widths and their breakpoint-specific
* variations.
*/
/**
* Whole
*/
.one-whole, .date-picker-wrapper input, .time-picker-wrapper input {
width: 100%; }
/**
* Halves
*/
.one-half, .two-quarters, .three-sixths, .four-eighths, .five-tenths, .six-twelfths, .date-picker-wrapper, .time-picker-wrapper {
width: 50%; }
/**
* Thirds
*/
.one-third, .two-sixths, .four-twelfths {
width: 33.333%; }
.two-thirds, .four-sixths, .eight-twelfths {
width: 66.666%; }
/**
* Quarters
*/
.one-quarter, .two-eighths, .three-twelfths, ul.thumbnails.image_picker_selector li {
width: 25%; }
.three-quarters, .six-eighths, .nine-twelfths {
width: 75%; }
/**
* 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%; }
/**
* Sixths
*/
.one-sixth, .two-twelfths {
width: 16.666%; }
.five-sixths, .ten-twelfths {
width: 83.333%; }
/**
* Eighths
*/
.one-eighth {
width: 12.5%; }
.three-eighths {
width: 37.5%; }
.five-eighths {
width: 62.5%; }
.seven-eighths {
width: 87.5%; }
/**
* Tenths
*/
.one-tenth {
width: 10%; }
.three-tenths {
width: 30%; }
.seven-tenths {
width: 70%; }
.nine-tenths {
width: 90%; }
/**
* Twelfths
*/
.one-twelfth {
width: 8.333%; }
.five-twelfths {
width: 41.666%; }
.seven-twelfths {
width: 58.333%; }
.eleven-twelfths {
width: 91.666%; }
/**
* If you have set `$responsive` to 'true' in `_vars.scss` then you now have
* access to these classes. You can define at which breakpoint you'd like an
* element to be a certain size, e.g.:
*
* ` ...
`
*
* This would create a `div` that, at 'desktop' sizes, takes up a quarter of the
* horizontal space, a half of that space at 'tablet' sizes, and goes full width
* at 'mobile' sizes.
*
* Demo: jsfiddle.net/inuitcss/WS4Ge
*
*/
@media only screen and (max-width: 480px) {
/**
* Whole
*/
.palm-one-whole {
width: 100%; }
/**
* Halves
*/
.palm-one-half, .palm-two-quarters, .palm-three-sixths, .palm-four-eighths, .palm-five-tenths, .palm-six-twelfths {
width: 50%; }
/**
* Thirds
*/
.palm-one-third, .palm-two-sixths, .palm-four-twelfths {
width: 33.333%; }
.palm-two-thirds, .palm-four-sixths, .palm-eight-twelfths {
width: 66.666%; }
/**
* Quarters
*/
.palm-one-quarter, .palm-two-eighths, .palm-three-twelfths {
width: 25%; }
.palm-three-quarters, .palm-six-eighths, .palm-nine-twelfths {
width: 75%; }
/**
* Fifths
*/
.palm-one-fifth, .palm-two-tenths {
width: 20%; }
.palm-two-fifths, .palm-four-tenths {
width: 40%; }
.palm-three-fifths, .palm-six-tenths {
width: 60%; }
.palm-four-fifths, .palm-eight-tenths {
width: 80%; }
/**
* Sixths
*/
.palm-one-sixth, .palm-two-twelfths {
width: 16.666%; }
.palm-five-sixths, .palm-ten-twelfths {
width: 83.333%; }
/**
* Eighths
*/
.palm-one-eighth {
width: 12.5%; }
.palm-three-eighths {
width: 37.5%; }
.palm-five-eighths {
width: 62.5%; }
.palm-seven-eighths {
width: 87.5%; }
/**
* Tenths
*/
.palm-one-tenth {
width: 10%; }
.palm-three-tenths {
width: 30%; }
.palm-seven-tenths {
width: 70%; }
.palm-nine-tenths {
width: 90%; }
/**
* Twelfths
*/
.palm-one-twelfth {
width: 8.333%; }
.palm-five-twelfths {
width: 41.666%; }
.palm-seven-twelfths {
width: 58.333%; }
.palm-eleven-twelfths {
width: 91.666%; } }
@media only screen and (min-width: 481px) and (max-width: 1023px) {
/**
* Whole
*/
.lap-one-whole {
width: 100%; }
/**
* Halves
*/
.lap-one-half, .lap-two-quarters, .lap-three-sixths, .lap-four-eighths, .lap-five-tenths, .lap-six-twelfths {
width: 50%; }
/**
* Thirds
*/
.lap-one-third, .lap-two-sixths, .lap-four-twelfths {
width: 33.333%; }
.lap-two-thirds, .lap-four-sixths, .lap-eight-twelfths {
width: 66.666%; }
/**
* Quarters
*/
.lap-one-quarter, .lap-two-eighths, .lap-three-twelfths {
width: 25%; }
.lap-three-quarters, .lap-six-eighths, .lap-nine-twelfths {
width: 75%; }
/**
* Fifths
*/
.lap-one-fifth, .lap-two-tenths {
width: 20%; }
.lap-two-fifths, .lap-four-tenths {
width: 40%; }
.lap-three-fifths, .lap-six-tenths {
width: 60%; }
.lap-four-fifths, .lap-eight-tenths {
width: 80%; }
/**
* Sixths
*/
.lap-one-sixth, .lap-two-twelfths {
width: 16.666%; }
.lap-five-sixths, .lap-ten-twelfths {
width: 83.333%; }
/**
* Eighths
*/
.lap-one-eighth {
width: 12.5%; }
.lap-three-eighths {
width: 37.5%; }
.lap-five-eighths {
width: 62.5%; }
.lap-seven-eighths {
width: 87.5%; }
/**
* Tenths
*/
.lap-one-tenth {
width: 10%; }
.lap-three-tenths {
width: 30%; }
.lap-seven-tenths {
width: 70%; }
.lap-nine-tenths {
width: 90%; }
/**
* Twelfths
*/
.lap-one-twelfth {
width: 8.333%; }
.lap-five-twelfths {
width: 41.666%; }
.lap-seven-twelfths {
width: 58.333%; }
.lap-eleven-twelfths {
width: 91.666%; } }
@media only screen and (min-width: 481px) {
/**
* Whole
*/
.lap-and-up-one-whole {
width: 100%; }
/**
* Halves
*/
.lap-and-up-one-half, .lap-and-up-two-quarters, .lap-and-up-three-sixths, .lap-and-up-four-eighths, .lap-and-up-five-tenths, .lap-and-up-six-twelfths {
width: 50%; }
/**
* Thirds
*/
.lap-and-up-one-third, .lap-and-up-two-sixths, .lap-and-up-four-twelfths {
width: 33.333%; }
.lap-and-up-two-thirds, .lap-and-up-four-sixths, .lap-and-up-eight-twelfths {
width: 66.666%; }
/**
* Quarters
*/
.lap-and-up-one-quarter, .lap-and-up-two-eighths, .lap-and-up-three-twelfths {
width: 25%; }
.lap-and-up-three-quarters, .lap-and-up-six-eighths, .lap-and-up-nine-twelfths {
width: 75%; }
/**
* Fifths
*/
.lap-and-up-one-fifth, .lap-and-up-two-tenths {
width: 20%; }
.lap-and-up-two-fifths, .lap-and-up-four-tenths {
width: 40%; }
.lap-and-up-three-fifths, .lap-and-up-six-tenths {
width: 60%; }
.lap-and-up-four-fifths, .lap-and-up-eight-tenths {
width: 80%; }
/**
* Sixths
*/
.lap-and-up-one-sixth, .lap-and-up-two-twelfths {
width: 16.666%; }
.lap-and-up-five-sixths, .lap-and-up-ten-twelfths {
width: 83.333%; }
/**
* Eighths
*/
.lap-and-up-one-eighth {
width: 12.5%; }
.lap-and-up-three-eighths {
width: 37.5%; }
.lap-and-up-five-eighths {
width: 62.5%; }
.lap-and-up-seven-eighths {
width: 87.5%; }
/**
* Tenths
*/
.lap-and-up-one-tenth {
width: 10%; }
.lap-and-up-three-tenths {
width: 30%; }
.lap-and-up-seven-tenths {
width: 70%; }
.lap-and-up-nine-tenths {
width: 90%; }
/**
* Twelfths
*/
.lap-and-up-one-twelfth {
width: 8.333%; }
.lap-and-up-five-twelfths {
width: 41.666%; }
.lap-and-up-seven-twelfths {
width: 58.333%; }
.lap-and-up-eleven-twelfths {
width: 91.666%; } }
@media only screen and (max-width: 1023px) {
/**
* Whole
*/
.portable-one-whole {
width: 100%; }
/**
* Halves
*/
.portable-one-half, .portable-two-quarters, .portable-three-sixths, .portable-four-eighths, .portable-five-tenths, .portable-six-twelfths {
width: 50%; }
/**
* Thirds
*/
.portable-one-third, .portable-two-sixths, .portable-four-twelfths {
width: 33.333%; }
.portable-two-thirds, .portable-four-sixths, .portable-eight-twelfths {
width: 66.666%; }
/**
* Quarters
*/
.portable-one-quarter, .portable-two-eighths, .portable-three-twelfths {
width: 25%; }
.portable-three-quarters, .portable-six-eighths, .portable-nine-twelfths {
width: 75%; }
/**
* Fifths
*/
.portable-one-fifth, .portable-two-tenths {
width: 20%; }
.portable-two-fifths, .portable-four-tenths {
width: 40%; }
.portable-three-fifths, .portable-six-tenths {
width: 60%; }
.portable-four-fifths, .portable-eight-tenths {
width: 80%; }
/**
* Sixths
*/
.portable-one-sixth, .portable-two-twelfths {
width: 16.666%; }
.portable-five-sixths, .portable-ten-twelfths {
width: 83.333%; }
/**
* Eighths
*/
.portable-one-eighth {
width: 12.5%; }
.portable-three-eighths {
width: 37.5%; }
.portable-five-eighths {
width: 62.5%; }
.portable-seven-eighths {
width: 87.5%; }
/**
* Tenths
*/
.portable-one-tenth {
width: 10%; }
.portable-three-tenths {
width: 30%; }
.portable-seven-tenths {
width: 70%; }
.portable-nine-tenths {
width: 90%; }
/**
* Twelfths
*/
.portable-one-twelfth {
width: 8.333%; }
.portable-five-twelfths {
width: 41.666%; }
.portable-seven-twelfths {
width: 58.333%; }
.portable-eleven-twelfths {
width: 91.666%; } }
@media only screen and (min-width: 1024px) {
/**
* Whole
*/
.desk-one-whole {
width: 100%; }
/**
* Halves
*/
.desk-one-half, .desk-two-quarters, .desk-three-sixths, .desk-four-eighths, .desk-five-tenths, .desk-six-twelfths {
width: 50%; }
/**
* Thirds
*/
.desk-one-third, .desk-two-sixths, .desk-four-twelfths {
width: 33.333%; }
.desk-two-thirds, .desk-four-sixths, .desk-eight-twelfths {
width: 66.666%; }
/**
* Quarters
*/
.desk-one-quarter, .desk-two-eighths, .desk-three-twelfths {
width: 25%; }
.desk-three-quarters, .desk-six-eighths, .desk-nine-twelfths {
width: 75%; }
/**
* Fifths
*/
.desk-one-fifth, .desk-two-tenths {
width: 20%; }
.desk-two-fifths, .desk-four-tenths {
width: 40%; }
.desk-three-fifths, .desk-six-tenths {
width: 60%; }
.desk-four-fifths, .desk-eight-tenths {
width: 80%; }
/**
* Sixths
*/
.desk-one-sixth, .desk-two-twelfths {
width: 16.666%; }
.desk-five-sixths, .desk-ten-twelfths {
width: 83.333%; }
/**
* Eighths
*/
.desk-one-eighth {
width: 12.5%; }
.desk-three-eighths {
width: 37.5%; }
.desk-five-eighths {
width: 62.5%; }
.desk-seven-eighths {
width: 87.5%; }
/**
* Tenths
*/
.desk-one-tenth {
width: 10%; }
.desk-three-tenths {
width: 30%; }
.desk-seven-tenths {
width: 70%; }
.desk-nine-tenths {
width: 90%; }
/**
* Twelfths
*/
.desk-one-twelfth {
width: 8.333%; }
.desk-five-twelfths {
width: 41.666%; }
.desk-seven-twelfths {
width: 58.333%; }
.desk-eleven-twelfths {
width: 91.666%; } }
/**
* If you have set the additional `$responsive-extra` variable to 'true' in
* `_vars.scss` then you now have access to the following class available to
* accomodate much larger screen resolutions.
*/
/* endif */
/*------------------------------------*\
$PUSH
\*------------------------------------*/
/**
* Push classes, to move grid items over to the right by certain amounts.
*/
/**
* Whole
*/
.push--one-whole {
left: 100%; }
/**
* Halves
*/
.push--one-half, .push--two-quarters, .push--three-sixths, .push--four-eighths, .push--five-tenths, .push--six-twelfths {
left: 50%; }
/**
* Thirds
*/
.push--one-third, .push--two-sixths, .push--four-twelfths {
left: 33.333%; }
.push--two-thirds, .push--four-sixths, .push--eight-twelfths {
left: 66.666%; }
/**
* Quarters
*/
.push--one-quarter, .push--two-eighths, .push--three-twelfths {
left: 25%; }
.push--three-quarters, .push--six-eighths, .push--nine-twelfths {
left: 75%; }
/**
* Fifths
*/
.push--one-fifth, .push--two-tenths {
left: 20%; }
.push--two-fifths, .push--four-tenths {
left: 40%; }
.push--three-fifths, .push--six-tenths {
left: 60%; }
.push--four-fifths, .push--eight-tenths {
left: 80%; }
/**
* Sixths
*/
.push--one-sixth, .push--two-twelfths {
left: 16.666%; }
.push--five-sixths, .push--ten-twelfths {
left: 83.333%; }
/**
* Eighths
*/
.push--one-eighth {
left: 12.5%; }
.push--three-eighths {
left: 37.5%; }
.push--five-eighths {
left: 62.5%; }
.push--seven-eighths {
left: 87.5%; }
/**
* Tenths
*/
.push--one-tenth {
left: 10%; }
.push--three-tenths {
left: 30%; }
.push--seven-tenths {
left: 70%; }
.push--nine-tenths {
left: 90%; }
/**
* Twelfths
*/
.push--one-twelfth {
left: 8.333%; }
.push--five-twelfths {
left: 41.666%; }
.push--seven-twelfths {
left: 58.333%; }
.push--eleven-twelfths {
left: 91.666%; }
/**
* Not a particularly great selector, but the DRYest way to do things.
*/
[class*="push--"] {
position: relative; }
/*------------------------------------*\
$PULL
\*------------------------------------*/
/**
* Pull classes, to move grid items over to the right by certain amounts.
*/
/*------------------------------------*\
$BRAND
\*------------------------------------*/
/**
* `.brand` is a quick and simple way to apply your brand face and/or color to
* any element using a handy helper class.
*/
.brand {
font-family: Helvetica Neue, sans-serif!important;
color: #4a8ec2!important; }
.brand-face {
font-family: Helvetica Neue, sans-serif!important; }
.brand-color,
.brand-colour {
color: #4a8ec2!important; }
/*------------------------------------*\
$HELPER
\*------------------------------------*/
/**
* A series of helper classes to use arbitrarily. Only use a helper class if an
* element/component doesn't already have a class to which you could apply this
* styling, e.g. if you need to float `.main-nav` left then add `float:left;` to
* that ruleset as opposed to adding the `.float--left` class to the markup.
*
* A lot of these classes carry `!important` as you will always want them to win
* out over other selectors.
*/
/**
* Add/remove floats
*/
.float--right {
float: right !important; }
.float--left {
float: left !important; }
.float--none {
float: none !important; }
/**
* Text alignment
*/
.text--left {
text-align: left !important; }
.text--center {
text-align: center !important; }
.text--right {
text-align: right !important; }
/**
* Font weights
*/
.weight--light {
font-weight: 300 !important; }
.weight--normal, .header__nav .a-current-page a, .header__nav .a-ancestor a {
font-weight: 400 !important; }
.weight--semibold, label {
font-weight: 600 !important; }
/**
* Add/remove margins
*/
.push {
margin: 23px !important; }
.push--top {
margin-top: 23px !important; }
.push--right {
margin-right: 23px !important; }
.push--bottom {
margin-bottom: 23px !important; }
.push--left {
margin-left: 23px !important; }
.push--ends {
margin-top: 23px !important;
margin-bottom: 23px !important; }
.push--sides {
margin-right: 23px !important;
margin-left: 23px !important; }
.push-half {
margin: 11.5px !important; }
.push-half--top, .active .social-account__links {
margin-top: 11.5px !important; }
.push-half--right, .separator--vertical {
margin-right: 11.5px !important; }
.push-half--bottom, .active .social-account__links {
margin-bottom: 11.5px !important; }
.push-half--left, .separator--vertical {
margin-left: 11.5px !important; }
.push-half--ends {
margin-top: 11.5px !important;
margin-bottom: 11.5px !important; }
.push-half--sides {
margin-right: 11.5px !important;
margin-left: 11.5px !important; }
.flush {
margin: 0 !important; }
.flush--top {
margin-top: 0 !important; }
.flush--right {
margin-right: 0 !important; }
.flush--bottom {
margin-bottom: 0 !important; }
.flush--left {
margin-left: 0 !important; }
.flush--ends {
margin-top: 0 !important;
margin-bottom: 0 !important; }
.flush--sides {
margin-right: 0 !important;
margin-left: 0 !important; }
/**
* Add/remove paddings
*/
.soft {
padding: 23px !important; }
.soft--top, .separator--top {
padding-top: 23px !important; }
.soft--right {
padding-right: 23px !important; }
.soft--bottom {
padding-bottom: 23px !important; }
.soft--left {
padding-left: 23px !important; }
.soft--ends {
padding-top: 23px !important;
padding-bottom: 23px !important; }
.soft--sides {
padding-right: 23px !important;
padding-left: 23px !important; }
.soft-half {
padding: 11.5px !important; }
.soft-half--top {
padding-top: 11.5px !important; }
.soft-half--right {
padding-right: 11.5px !important; }
.soft-half--bottom {
padding-bottom: 11.5px !important; }
.soft-half--left {
padding-left: 11.5px !important; }
.soft-half--ends {
padding-top: 11.5px !important;
padding-bottom: 11.5px !important; }
.soft-half--sides {
padding-right: 11.5px !important;
padding-left: 11.5px !important; }
.hard {
padding: 0 !important; }
.hard--top {
padding-top: 0 !important; }
.hard--right {
padding-right: 0 !important; }
.hard--bottom {
padding-bottom: 0 !important; }
.hard--left {
padding-left: 0 !important; }
.hard--ends {
padding-top: 0 !important;
padding-bottom: 0 !important; }
.hard--sides {
padding-right: 0 !important;
padding-left: 0 !important; }
/**
* Pull items full width of `.island` parents.
*/
.full-bleed {
margin-right: -23px !important;
margin-left: -23px !important; }
.islet .full-bleed {
margin-right: -11.5px !important;
margin-left: -11.5px !important; }
/**
* Add a help cursor to any element that gives the user extra information on
* `:hover`.
*/
.informative {
cursor: help !important; }
/**
* Mute an object by reducing its opacity.
*/
.muted {
opacity: 0.5 !important;
filter: alpha(opacity=50) !important; }
/**
* Align items to the right where they imply progression/movement forward, e.g.:
*
Read more...
*
*/
.proceed {
text-align: right !important; }
/**
* Add a right-angled quote to links that imply movement, e.g.:
*
Read more
*
*/
.go:after {
content: " " "»" !important; }
/**
* Apply capital case to an element (usually a `strong`).
*/
.caps {
text-transform: uppercase !important; }
/**
* Hide content off-screen without resorting to `display:none;`, also provide
* breakpoint specific hidden elements.
*/
.accessibility,
.visuallyhidden {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important; }
@media only screen and (max-width: 480px) {
.accessibility--palm,
.visuallyhidden--palm {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important; } }
@media only screen and (min-width: 481px) and (max-width: 1023px) {
.accessibility--lap,
.visuallyhidden--lap {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important; } }
@media only screen and (min-width: 481px) {
.accessibility--lap-and-up,
.visuallyhidden--lap-and-up {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important; } }
@media only screen and (max-width: 1023px) {
.accessibility--portable,
.visuallyhidden--portable {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important; } }
@media only screen and (min-width: 1024px) {
.accessibility--desk,
.visuallyhidden--desk {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important; } }
@media only screen and (min-width: 1200px) {
.accessibility--desk-wide,
.visuallyhidden--desk-wide {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important; } }
/* endif */
@font-face {
font-family: "sobuzz-applications";
src: url("../font/sobuzz-applications_1d6a59d03d155fb88a88e9bacaa3fcec.eot");
src: url("../font/sobuzz-applications_1d6a59d03d155fb88a88e9bacaa3fcec.eot?#iefix") format("embedded-opentype"), url("../font/sobuzz-applications_1d6a59d03d155fb88a88e9bacaa3fcec.woff") format("woff"), url("../font/sobuzz-applications_1d6a59d03d155fb88a88e9bacaa3fcec.ttf") format("truetype"), url("../font/sobuzz-applications_1d6a59d03d155fb88a88e9bacaa3fcec.svg#sobuzz-applications") format("svg");
font-weight: normal;
font-style: normal; }
@media screen and (-webkit-min-device-pixel-ratio: 0) {
@font-face {
font-family: "sobuzz-applications";
src: url("../font/sobuzz-applications_1d6a59d03d155fb88a88e9bacaa3fcec.svg#sobuzz-applications") format("svg"); } }
[data-icon]:before {
content: attr(data-icon); }
[data-icon]:before,
.application-icon-bingo:before,
.application-icon-brainstorming:before,
.application-icon-contest:before,
.application-icon-coupon:before,
.application-icon-custom:before,
.application-icon-dailymotion:before,
.application-icon-html:before,
.application-icon-instagram:before,
.application-icon-instant:before,
.application-icon-instant2:before,
.application-icon-mail:before,
.application-icon-memory:before,
.application-icon-mysterious_word:before,
.application-icon-personality:before,
.application-icon-photos_battle:before,
.application-icon-poll:before,
.application-icon-poll2:before,
.application-icon-prescribing:before,
.application-icon-profilepic:before,
.application-icon-quizz:before,
.application-icon-quizz2:before,
.application-icon-quote:before,
.application-icon-rss:before,
.application-icon-slider:before,
.application-icon-sponsoring:before,
.application-icon-sweepstakes:before,
.application-icon-twitter:before,
.application-icon-twittersweepstakes:before,
.application-icon-welcome:before,
.application-icon-youtube:before {
display: inline-block;
font-family: "sobuzz-applications";
font-style: normal;
font-weight: normal;
font-variant: normal;
line-height: 1;
text-decoration: inherit;
text-transform: none;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; }
.application-icon-bingo:before {
content: "\f100"; }
.application-icon-brainstorming:before {
content: "\f101"; }
.application-icon-contest:before {
content: "\f102"; }
.application-icon-coupon:before {
content: "\f103"; }
.application-icon-custom:before {
content: "\f104"; }
.application-icon-dailymotion:before {
content: "\f105"; }
.application-icon-html:before {
content: "\f106"; }
.application-icon-instagram:before {
content: "\f107"; }
.application-icon-instant:before {
content: "\f108"; }
.application-icon-instant2:before {
content: "\f109"; }
.application-icon-mail:before {
content: "\f10a"; }
.application-icon-memory:before {
content: "\f10b"; }
.application-icon-mysterious_word:before {
content: "\f10c"; }
.application-icon-personality:before {
content: "\f10d"; }
.application-icon-photos_battle:before {
content: "\f10e"; }
.application-icon-poll:before {
content: "\f10f"; }
.application-icon-poll2:before {
content: "\f110"; }
.application-icon-prescribing:before {
content: "\f111"; }
.application-icon-profilepic:before {
content: "\f112"; }
.application-icon-quizz:before {
content: "\f113"; }
.application-icon-quizz2:before {
content: "\f114"; }
.application-icon-quote:before {
content: "\f115"; }
.application-icon-rss:before {
content: "\f116"; }
.application-icon-slider:before {
content: "\f117"; }
.application-icon-sponsoring:before {
content: "\f118"; }
.application-icon-sweepstakes:before {
content: "\f119"; }
.application-icon-twitter:before {
content: "\f11a"; }
.application-icon-twittersweepstakes:before {
content: "\f11b"; }
.application-icon-welcome:before {
content: "\f11c"; }
.application-icon-youtube:before {
content: "\f11d"; }
/*------------------------------------*\
@VARS
\*------------------------------------*/
/*------------------------------------*\
@MIXINS
\*------------------------------------*/
/*------------------------------------*\
@COLORS
\*------------------------------------*/
.bg--blue-light {
background-color: #249fc6; }
.bg--blue {
background-color: #35495d; }
.bg--blue-dark {
background-color: #2e3d4c; }
.bg--orange-light {
background-color: #ff9e3c; }
.bg--orange {
background-color: #fb8950; }
.bg--orange-dark {
background-color: #e97750; }
.bg--white {
background-color: #ffffff; }
.bg--gray-lighter {
background-color: #f3f3f3; }
.bg--gray-light {
background-color: #e5e5e5; }
.bg--gray {
background-color: #5b5b5b; }
.bg--gray-dark {
background-color: #303538; }
.bg--gray-darker {
background-color: #1e272a; }
.bg--black {
background-color: #172023; }
.bg--red {
background-color: #de594b; }
.bg--red-dark {
background-color: #bf4032; }
.border--blue-light {
background-color: #249fc6; }
.border--blue {
border-color: #35495d; }
.border--blue-dark {
border-color: #2e3d4c; }
.border--orange-light {
border-color: #ff9e3c; }
.border--orange {
border-color: #fb8950; }
.border--orange-dark {
border-color: #e97750; }
.border--white {
border-color: #ffffff; }
.border--gray-lighter {
border-color: #f3f3f3; }
.border--gray-light {
border-color: #e5e5e5; }
.border--gray {
border-color: #5b5b5b; }
.border--gray-dark {
border-color: #303538; }
.border--gray-darker {
border-color: #1e272a; }
.border--black {
border-color: #172023; }
.font--blue-light {
background-color: #249fc6; }
.font--blue {
color: #35495d; }
.font--blue:visited {
color: #35495d; }
.font--blue:hover {
color: #35495d; }
.font--blue-dark {
color: #2e3d4c; }
.font--blue-dark:visited {
color: #2e3d4c; }
.font--blue-dark:hover {
color: #2e3d4c; }
.font--orange-light {
color: #ff9e3c; }
.font--orange-light:visited {
color: #ff9e3c; }
.font--orange-light:hover {
color: #ff9e3c; }
.font--orange {
color: #fb8950; }
.font--orange:visited {
color: #fb8950; }
.font--orange:hover {
color: #fb8950; }
.font--orange-dark {
color: #e97750; }
.font--orange-dark:visited {
color: #e97750; }
.font--orange-dark:hover {
color: #e97750; }
.font--white {
color: #ffffff; }
.font--white:visited {
color: #ffffff; }
.font--white:hover {
color: #ffffff; }
.font--gray-lighter {
color: #f3f3f3; }
.font--gray-lighter:visited {
color: #f3f3f3; }
.font--gray-lighter:hover {
color: #f3f3f3; }
.font--gray-light {
color: #e5e5e5; }
.font--gray-light:visited {
color: #e5e5e5; }
.font--gray-light:hover {
color: #e5e5e5; }
.font--gray-semi-light {
color: #7e7e7e; }
.font--gray-semi-light:visited {
color: #7e7e7e; }
.font--gray-semi-light:hover {
color: #7e7e7e; }
.font--gray {
color: #5b5b5b; }
.font--gray:visited {
color: #5b5b5b; }
.font--gray:hover {
color: #5b5b5b; }
.font--gray-dark {
color: #303538; }
.font--gray-dark:visited {
color: #303538; }
.font--gray-dark:hover {
color: #303538; }
.font--gray-darker {
color: #1e272a; }
.font--gray-darker:visited {
color: #1e272a; }
.font--gray-darker:hover {
color: #1e272a; }
.font--black {
color: #172023; }
.font--black:visited {
color: #172023; }
.font--black:hover {
color: #172023; }
.font--red {
color: #de594b; }
.font--red:visited {
color: #de594b; }
.font--red:hover {
color: #de594b; }
.font--green {
color: #66bb6a; }
.font--green:visited {
color: #66bb6a; }
.font--green:hover {
color: #66bb6a; }
.font--fb-blue {
color: #2b69b2; }
.font--fb-blue:visited {
color: #2b69b2; }
.font--fb-blue:hover {
color: #2b69b2; }
.font--fb-blue-dark {
color: #1a57a0; }
.font--fb-blue-dark:visited {
color: #1a57a0; }
.font--fb-blue-dark:hover {
color: #1a57a0; }
.font--tw-blue {
color: #00acee; }
.font--tw-blue:visited {
color: #00acee; }
.font--tw-blue:hover {
color: #00acee; }
.font--tw-blue-dark {
color: #0589bd; }
.font--tw-blue-dark:visited {
color: #0589bd; }
.font--tw-blue-dark:hover {
color: #0589bd; }
.font--gplus-red {
color: #de594b; }
.font--gplus-red:visited {
color: #de594b; }
.font--gplus-red:hover {
color: #de594b; }
.font--gplus-red-dark {
color: #c74234; }
.font--gplus-red-dark:visited {
color: #c74234; }
.font--gplus-red-dark:hover {
color: #c74234; }
.font--li-blue {
color: #4A98BD; }
.font--li-blue:visited {
color: #4A98BD; }
.font--li-blue:hover {
color: #4A98BD; }
.font--light-shadow {
text-shadow: 1px 1px 1px #ffffff; }
.font--dark-shadow {
text-shadow: 1px 1px 1px #5b5b5b; }
[class*=hover--] {
-webkit-transition: background-color 0.3s;
-moz-transition: background-color 0.3s;
-ms-transition: background-color 0.3s;
-o-transition: background-color 0.3s;
transition: background-color 0.3s; }
.hover--blue-light:hover {
background-color: #249fc6; }
.hover--blue:hover {
background-color: #35495d; }
.hover--blue-dark:hover {
background-color: #2e3d4c; }
.hover--orange-light:hover {
background-color: #ff9e3c; }
.hover--orange:hover {
background-color: #fb8950; }
.hover--orange-dark:hover {
background-color: #e97750; }
.hover--white:hover {
background-color: #ffffff; }
.hover--gray-lighter:hover {
background-color: #f3f3f3; }
.hover--gray-light:hover {
background-color: #e5e5e5; }
.hover--gray:hover {
background-color: #5b5b5b; }
.hover--gray2:hover {
background-color: #b1b1b1; }
.hover--gray3:hover {
background-color: #7e7e7e; }
.hover--gray-dark:hover {
background-color: #303538; }
.hover--gray-darker:hover {
background-color: #1e272a; }
.hover--black:hover {
background-color: #172023; }
.box-shadow {
-webkit-box-shadow: 0px 2px 6px -3px #5b5b5b;
-moz-box-shadow: 0px 2px 6px -3px #5b5b5b;
-ms-box-shadow: 0px 2px 6px -3px #5b5b5b;
-o-box-shadow: 0px 2px 6px -3px #5b5b5b;
box-shadow: 0px 2px 6px -3px #5b5b5b; }
/*------------------------------------*\
@INUIT OVERRIDE
\*------------------------------------*/
.nav__subnav {
display: none;
list-style: none; }
.active .nav__subnav {
display: block; }
.nav > li > a, .nav__subnav > li > a {
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s; }
.nav > .active > a {
background-color: #e5e5e5; }
/*------------------------------------*\
@BASE
\*------------------------------------*/
html {
background-color: #172023; }
body {
background-color: #ffffff; }
a {
cursor: pointer;
text-decoration: none; }
*::selection {
background: #35495d;
color: #ffffff;
text-shadow: none; }
/*------------------------------------*\
@FONTS
\*------------------------------------*/
html {
font-family: 'Proxima Nova', Calibri, Arial, sans-serif;
font-weight: 400;
color: #303538; }
.weight--light {
font-weight: 300 !important; }
.weight--normal, .header__nav .a-current-page a, .header__nav .a-ancestor a {
font-weight: 400 !important; }
.weight--semibold, label {
font-weight: 700 !important; }
.handwriting {
font-family: 'Pacifico', cursive;
font-weight: 400; }
.typewriting {
font-family: "Courier New", Courier, monospace;
font-weight: 400; }
a {
color: #303538; }
a:hover {
color: #303538; }
a:active {
color: #303538; }
a:visited {
color: #303538; }
.wrap--nowrap {
white-space: nowrap; }
.wrap--break {
word-wrap: break-word;
word-break: break-all; }
.text--ellipsis, .second-level-nav .application-item__title, .second-level-nav .application-item__subtitle, .second-level-nav .application-item__date {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden; }
.underline {
text-decoration: underline; }
.show-loader:after, .show-loader--animate-out:after, .show-loader::after, .show-loader--animate-out::after, .btn--fb:before, .btn--tw:before, .notifications-container > li .noty_bar .noty_icon, .notifications-container > li .noty_bar .noty_close {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
*margin-right: .3em; }
i[class^="icon-"], i[class*="icon-"] {
margin-right: 5.75px; }
.icon--action {
margin-right: 5.75px; }
.icon--action:before, .icon--action::before {
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
-ms-transition: color 0.3s;
-o-transition: color 0.3s;
transition: color 0.3s; }
.icon--action:after, .icon--action::after {
content: " ";
display: inline-block;
width: 11px;
height: 11px;
margin-left: -11px;
opacity: 0;
background: transparent url(../img/loader_font.gif) center no-repeat;
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-ms-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s; }
.icon--action.loading:before, .icon--action.loading::before {
color: transparent; }
.icon--action.loading:after, .icon--action.loading::after {
opacity: 1; }
.icon-football {
font-family: FontAwesome !important; }
.icon-football:before {
content: "\f1e3"; }
.icon-dom, .icon-ext {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; }
.icon-dom:before {
content: "Dom"; }
.icon-ext:before {
content: "Ext"; }
/*------------------------------------*\
@HELPERS
\*------------------------------------*/
.full-height {
height: 100%; }
.full-width {
width: 100%; }
.border--top {
border-top-width: 1px;
border-top-style: solid; }
.border--right {
border-right-width: 1px;
border-right-style: solid; }
.border--bottom {
border-bottom-width: 1px;
border-bottom-style: solid; }
.border--left {
border-left-width: 1px;
border-left-style: solid; }
.border--radius {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px; }
.cursor--pointer, .toggle-switch, ul.thumbnails.image_picker_selector li .thumbnail {
cursor: pointer; }
.cursor--default {
cursor: default; }
.font--italic {
font-style: italic; }
.unselectable, .toggle-switch {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: moz-none;
-ms-user-select: none;
user-select: none; }
.dropshadow {
-webkit-box-shadow: 0px 8px 25px -19px #555;
-moz-box-shadow: 0px 8px 25px -19px #555;
-ms-box-shadow: 0px 8px 25px -19px #555;
-o-box-shadow: 0px 8px 25px -19px #555;
box-shadow: 0px 8px 25px -19px #555; }
.one-line {
max-height: 23px; }
.two-lines {
max-height: 46px; }
.three-lines {
max-height: 69px; }
.four-lines {
max-height: 92px; }
.five-lines {
max-height: 115px; }
/**
* Loader
*/
.show-loader, .show-loader--animate-out {
position: relative;
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-ms-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s; }
.show-loader:after, .show-loader--animate-out:after, .show-loader::after, .show-loader--animate-out::after {
content: ' ';
display: block;
position: absolute;
top: 10px;
right: 10px;
width: 20px;
height: 20px;
background: transparent url(../img/loader.gif) center no-repeat;
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-ms-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px; }
.show-loader--center:after, .show-loader--center::after {
right: 50%;
margin-right: -10px; }
.show-loader--animate-in:after, .show-loader--animate-in::after {
opacity: 0; }
.show-loader--animate-in.show-loader--animate-in-active:after, .show-loader--animate-in.show-loader--animate-in-active::after {
opacity: 1; }
.show-loader--animate-out:after, .show-loader--animate-out::after {
opacity: 1; }
.show-loader--animate-out.show-loader--animate-out-active:after, .show-loader--animate-out.show-loader--animate-out-active::after {
opacity: 0; }
.loader--white:after, .loader--white::after {
color: #ffffff; }
.clear:after {
content: " ";
display: block;
width: 100%;
height: 0;
clear: both; }
/*------------------------------------*\
@ANIMATIONS
\*------------------------------------*/
.animation--fade-in,
.animation--fade-out,
.animation--view-enter {
-webkit-transition: 0.3s ease-in opacity;
-moz-transition: 0.3s ease-in opacity;
-ms-transition: 0.3s ease-in opacity;
-o-transition: 0.3s ease-in opacity;
transition: 0.3s ease-in opacity; }
.animation--fade-in-fast,
.animation--fade-out-fast,
.animation--view-enter-fast {
-webkit-transition: 0.1s ease-in opacity;
-moz-transition: 0.1s ease-in opacity;
-ms-transition: 0.1s ease-in opacity;
-o-transition: 0.1s ease-in opacity;
transition: 0.1s ease-in opacity; }
.animation--fade-in-slow,
.animation--fade-out-slow,
.animation--view-enter-slow {
-webkit-transition: 0.5s ease-in opacity;
-moz-transition: 0.5s ease-in opacity;
-ms-transition: 0.5s ease-in opacity;
-o-transition: 0.5s ease-in opacity;
transition: 0.5s ease-in opacity; }
.animation--fade-in,
.animation--fade-in-fast,
.animation--fade-in-slow {
opacity: 0; }
.animation--fade-in.animation--fade-in-active,
.animation--fade-in-fast.animation--fade-in-fast-active,
.animation--fade-in-slow.animation--fade-in-slow-active {
opacity: 1; }
.animation--fade-out, .animation--fade-out-slow {
opacity: 1; }
.animation--fade-out.animation--fade-out-active, .animation--fade-out-slow.animation--fade-out-slow-active {
opacity: 0; }
.animation--view-enter, .animation--view-enter-slow {
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
transition-delay: 0.3s;
opacity: 0; }
.animation--view-enter.animation--view-enter-active, .animation--view-enter-slow.animation--view-enter-slow-active {
opacity: 1; }
.animation--slide-in {
opacity: 0;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-animation: openSpace 400ms ease forwards, slideIn 400ms 400ms ease forwards;
-moz-animation: openSpace 400ms ease forwards, slideIn 400ms 400ms ease forwards;
-ms-animation: openSpace 400ms ease forwards, slideIn 400ms 400ms ease forwards;
-o-animation: openSpace 400ms ease forwards, slideIn 400ms 400ms ease forwards;
animation: openSpace 400ms ease forwards, slideIn 400ms 400ms ease forwards; }
.animation--slide-out {
position: relative;
-webkit-animation: slideOut 400ms ease forwards, closeSpace 400ms 400ms ease forwards;
-moz-animation: slideOut 400ms ease forwards, closeSpace 400ms 400ms ease forwards;
-ms-animation: slideOut 400ms ease forwards, closeSpace 400ms 400ms ease forwards;
-o-animation: slideOut 400ms ease forwards, closeSpace 400ms 400ms ease forwards;
animation: slideOut 400ms ease forwards, closeSpace 400ms 400ms ease forwards; }
@-webkit-keyframes openSpace {
from {
max-height: 0px; }
to {
max-height: 75px; } }
@-moz-keyframes openSpace {
from {
max-height: 0px; }
to {
max-height: 75px; } }
@-ms-keyframes openSpace {
from {
max-height: 0px; }
to {
max-height: 75px; } }
@-o-keyframes openSpace {
from {
max-height: 0px; }
to {
max-height: 75px; } }
@keyframes openSpace {
from {
max-height: 0px; }
to {
max-height: 75px; } }
@-webkit-keyframes slideIn {
to {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0); } }
@-moz-keyframes slideIn {
to {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0); } }
@-ms-keyframes slideIn {
to {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0); } }
@-o-keyframes slideIn {
to {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0); } }
@keyframes slideIn {
to {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0); } }
@-webkit-keyframes slideOut {
from {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0); }
to {
opacity: 0;
-webkit-transform: translateX(-345px);
-moz-transform: translateX(-345px);
-ms-transform: translateX(-345px);
-o-transform: translateX(-345px);
transform: translateX(-345px); } }
@-moz-keyframes slideOut {
from {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0); }
to {
opacity: 0;
-webkit-transform: translateX(-345px);
-moz-transform: translateX(-345px);
-ms-transform: translateX(-345px);
-o-transform: translateX(-345px);
transform: translateX(-345px); } }
@-ms-keyframes slideOut {
from {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0); }
to {
opacity: 0;
-webkit-transform: translateX(-345px);
-moz-transform: translateX(-345px);
-ms-transform: translateX(-345px);
-o-transform: translateX(-345px);
transform: translateX(-345px); } }
@-o-keyframes slideOut {
from {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0); }
to {
opacity: 0;
-webkit-transform: translateX(-345px);
-moz-transform: translateX(-345px);
-ms-transform: translateX(-345px);
-o-transform: translateX(-345px);
transform: translateX(-345px); } }
@keyframes slideOut {
from {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0); }
to {
opacity: 0;
-webkit-transform: translateX(-345px);
-moz-transform: translateX(-345px);
-ms-transform: translateX(-345px);
-o-transform: translateX(-345px);
transform: translateX(-345px); } }
@-webkit-keyframes closeSpace {
from {
max-height: 50px; }
to {
max-height: 0px; } }
@-moz-keyframes closeSpace {
from {
max-height: 50px; }
to {
max-height: 0px; } }
@-ms-keyframes closeSpace {
from {
max-height: 50px; }
to {
max-height: 0px; } }
@-o-keyframes closeSpace {
from {
max-height: 50px; }
to {
max-height: 0px; } }
@keyframes closeSpace {
from {
max-height: 50px; }
to {
max-height: 0px; } }
/*
// New animations
// fade-in
.animation--fade-in {
&.ng-enter,
&.ng-show-add,
&.ng-hide-remove {
@include vendor(transition, .3s linear opacity);
opacity: 0;
}
&.ng-hide-remove {
display: block!important;
}
&.ng-enter.ng-enter-active,
&.ng-show-add.ng-show-add-active,
&.ng-hide-remove.ng-hide-remove-active {
opacity: 1;
}
}
.animation--fade-in.animation--fade-in--fast {
&.ng-enter,
&.ng-show-add,
&.ng-hide-remove {
@include vendor(transition-duration, .1s);
}
}
// fade-out
.animation--fade-out {
&.ng-enter,
&.ng-show-remove,
&.ng-hide-add {
@include vendor(transition, .3s linear opacity);
opacity: 1;
}
&.ng-enter.ng-enter-active,
&.ng-show-remove.ng-show-remove-active,
&.ng-hide-add.ng-hide-add-active {
opacity: 0;
}
}
// view-enter
.animation--view-enter {
&.ng-enter, &.ng-show-add, &.ng-hide-remove {
@include vendor(transition, .3s .3s linear opacity);
opacity: 0;
}
&.ng-enter.ng-enter-active, &.ng-show-add.ng-show-add-active, &.ng-hide-remove.ng-hide-remove-active {
opacity: 1;
}
}
// slide-in
.animation--slide-in {
position: relative;
&.ng-enter {
@include vendor(animation, left .4s .4s ease);
opacity: 0;
max-height: 0;
left: -100%;
}
&.ng-enter-active {
opacity: 1;
max-height: 50px;
left: 0;
}
}
// slide-out
.animation--slide-out {
position: relative;
&.ng-leave {
@include vendor(animation, left .4s ease forwards);
opacity: 1;
max-height: 50px;
left: 0;
}
&.ng-leave-active {
opacity: 0;
max-height: 0;
left: -100%;
}
}
*/
/*------------------------------------*\
@IMPORTS
\*------------------------------------*/
.separator--top {
position: relative;
border-top: 2px solid #5b5b5b; }
.separator--top legend {
position: absolute;
top: -16px;
left: 50%;
width: 30px;
margin-left: -15px;
background-color: #f3f3f3;
color: #5b5b5b; }
.separator--vertical {
display: inline;
border-left: 1px solid #e5e5e5; }
.btn--primary {
color: #fb8950;
border: 3px solid #fb8950;
border-radius: 0;
background-color: transparent;
-webkit-transition: all 150ms ease-in;
-moz-transition: all 150ms ease-in;
-ms-transition: all 150ms ease-in;
-o-transition: all 150ms ease-in;
transition: all 150ms ease-in; }
.btn--primary:before {
right: -50px !important;
border-right: 30px solid transparent;
border-bottom: 65px solid #fb8950;
transform: translateX(-100%); }
.btn--primary:after {
left: -50px !important;
border-left: 30px solid transparent;
border-top: 65px solid #fb8950;
transform: translateX(100%); }
.btn--primary:hover, .btn--primary.active {
color: #ffffff !important;
border: 3px solid #fb8950; }
.btn--primary:hover:before, .btn--primary.active:before {
transform: translateX(-49%); }
.btn--primary:hover:after, .btn--primary.active:after {
transform: translateX(49%); }
.btn--primary:visited {
color: #fb8950;
border: 3px solid #fb8950;
background-color: #fb8950; }
.btn--secondary {
color: #249fc6;
border: 3px solid #249fc6;
border-radius: 0;
background-color: transparent;
-webkit-transition: all 150ms ease-in;
-moz-transition: all 150ms ease-in;
-ms-transition: all 150ms ease-in;
-o-transition: all 150ms ease-in;
transition: all 150ms ease-in; }
.btn--secondary:before {
right: -50px !important;
border-right: 30px solid transparent;
border-bottom: 65px solid #249fc6;
transform: translateX(-100%); }
.btn--secondary:after {
left: -50px !important;
border-left: 30px solid transparent;
border-top: 65px solid #249fc6;
transform: translateX(100%); }
.btn--secondary:hover, .btn--secondary.active {
color: #ffffff !important;
border: 3px solid #249fc6; }
.btn--secondary:hover:before, .btn--secondary.active:before {
transform: translateX(-49%); }
.btn--secondary:hover:after, .btn--secondary.active:after {
transform: translateX(49%); }
.btn--secondary:visited {
color: #249fc6;
border: 3px solid #249fc6;
background-color: #249fc6; }
.btn--tertiary {
color: #66bb6a;
border: 3px solid #66bb6a;
border-radius: 0;
background-color: transparent;
-webkit-transition: all 150ms ease-in;
-moz-transition: all 150ms ease-in;
-ms-transition: all 150ms ease-in;
-o-transition: all 150ms ease-in;
transition: all 150ms ease-in; }
.btn--tertiary:before {
right: -50px !important;
border-right: 30px solid transparent;
border-bottom: 65px solid #66bb6a;
transform: translateX(-100%); }
.btn--tertiary:after {
left: -50px !important;
border-left: 30px solid transparent;
border-top: 65px solid #66bb6a;
transform: translateX(100%); }
.btn--tertiary:hover, .btn--tertiary.active {
color: #ffffff !important;
border: 3px solid #66bb6a; }
.btn--tertiary:hover:before, .btn--tertiary.active:before {
transform: translateX(-49%); }
.btn--tertiary:hover:after, .btn--tertiary.active:after {
transform: translateX(49%); }
.btn--tertiary:visited {
color: #66bb6a;
border: 3px solid #66bb6a;
background-color: #66bb6a; }
.btn--danger {
color: #de594b;
border: 3px solid #de594b;
border-radius: 0;
background-color: transparent;
-webkit-transition: all 150ms ease-in;
-moz-transition: all 150ms ease-in;
-ms-transition: all 150ms ease-in;
-o-transition: all 150ms ease-in;
transition: all 150ms ease-in; }
.btn--danger:before {
right: -50px !important;
border-right: 30px solid transparent;
border-bottom: 65px solid #de594b;
transform: translateX(-100%); }
.btn--danger:after {
left: -50px !important;
border-left: 30px solid transparent;
border-top: 65px solid #de594b;
transform: translateX(100%); }
.btn--danger:hover, .btn--danger.active {
color: #ffffff !important;
border: 3px solid #de594b; }
.btn--danger:hover:before, .btn--danger.active:before {
transform: translateX(-49%); }
.btn--danger:hover:after, .btn--danger.active:after {
transform: translateX(49%); }
.btn--danger:visited {
color: #de594b;
border: 3px solid #de594b;
background-color: #de594b; }
.btn--discrete {
color: #ffffff;
border: 3px solid #ffffff;
border-radius: 0;
background-color: transparent;
-webkit-transition: all 150ms ease-in;
-moz-transition: all 150ms ease-in;
-ms-transition: all 150ms ease-in;
-o-transition: all 150ms ease-in;
transition: all 150ms ease-in; }
.btn--discrete:before {
right: -50px !important;
border-right: 30px solid transparent;
border-bottom: 65px solid #ffffff;
transform: translateX(-100%); }
.btn--discrete:after {
left: -50px !important;
border-left: 30px solid transparent;
border-top: 65px solid #ffffff;
transform: translateX(100%); }
.btn--discrete:hover, .btn--discrete.active {
color: #172023 !important;
border: 3px solid #ffffff; }
.btn--discrete:hover:before, .btn--discrete.active:before {
transform: translateX(-49%); }
.btn--discrete:hover:after, .btn--discrete.active:after {
transform: translateX(49%); }
.btn--discrete:visited {
color: #ffffff;
border: 3px solid #ffffff;
background-color: #ffffff; }
.btn--default {
color: #b1b1b1;
border: 3px solid #b1b1b1;
border-radius: 0;
background-color: transparent;
-webkit-transition: all 150ms ease-in;
-moz-transition: all 150ms ease-in;
-ms-transition: all 150ms ease-in;
-o-transition: all 150ms ease-in;
transition: all 150ms ease-in; }
.btn--default:before {
right: -50px !important;
border-right: 30px solid transparent;
border-bottom: 65px solid #b1b1b1;
transform: translateX(-100%); }
.btn--default:after {
left: -50px !important;
border-left: 30px solid transparent;
border-top: 65px solid #b1b1b1;
transform: translateX(100%); }
.btn--default:hover, .btn--default.active {
color: #172023 !important;
border: 3px solid #b1b1b1; }
.btn--default:hover:before, .btn--default.active:before {
transform: translateX(-49%); }
.btn--default:hover:after, .btn--default.active:after {
transform: translateX(49%); }
.btn--default:visited {
color: #b1b1b1;
border: 3px solid #b1b1b1;
background-color: #b1b1b1; }
.btn--fb {
color: #2b69b2;
border: 3px solid #2b69b2;
border-radius: 0;
background-color: transparent;
-webkit-transition: all 150ms ease-in;
-moz-transition: all 150ms ease-in;
-ms-transition: all 150ms ease-in;
-o-transition: all 150ms ease-in;
transition: all 150ms ease-in;
padding-left: 50px; }
.btn--fb:before {
right: -50px !important;
border-right: 30px solid transparent;
border-bottom: 65px solid #2b69b2;
transform: translateX(-100%); }
.btn--fb:after {
left: -50px !important;
border-left: 30px solid transparent;
border-top: 65px solid #2b69b2;
transform: translateX(100%); }
.btn--fb:hover, .btn--fb.active {
color: #ffffff !important;
border: 3px solid #2b69b2; }
.btn--fb:hover:before, .btn--fb.active:before {
transform: translateX(-49%); }
.btn--fb:hover:after, .btn--fb.active:after {
transform: translateX(49%); }
.btn--fb:visited {
color: #2b69b2;
border: 3px solid #2b69b2;
background-color: #2b69b2; }
.btn--fb:before {
content: "\f09a";
display: block;
position: absolute;
left: 15px;
bottom: -3px;
font-size: 40px;
line-height: 40px;
opacity: 1;
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-ms-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear; }
.btn--fb.loading:before {
opacity: 0; }
.btn--tw {
color: #00acee;
border: 3px solid #00acee;
border-radius: 0;
background-color: transparent;
-webkit-transition: all 150ms ease-in;
-moz-transition: all 150ms ease-in;
-ms-transition: all 150ms ease-in;
-o-transition: all 150ms ease-in;
transition: all 150ms ease-in;
padding-left: 50px; }
.btn--tw:before {
right: -50px !important;
border-right: 30px solid transparent;
border-bottom: 65px solid #00acee;
transform: translateX(-100%); }
.btn--tw:after {
left: -50px !important;
border-left: 30px solid transparent;
border-top: 65px solid #00acee;
transform: translateX(100%); }
.btn--tw:hover, .btn--tw.active {
color: #ffffff !important;
border: 3px solid #00acee; }
.btn--tw:hover:before, .btn--tw.active:before {
transform: translateX(-49%); }
.btn--tw:hover:after, .btn--tw.active:after {
transform: translateX(49%); }
.btn--tw:visited {
color: #00acee;
border: 3px solid #00acee;
background-color: #00acee; }
.btn--tw:before {
content: "\f099";
display: block;
position: absolute;
left: 8px;
font-size: 40px;
line-height: 40px; }
.btn--disabled, .loading-form .btn, .btn.loading {
color: #b1b1b1;
border: 3px solid #b1b1b1;
border-radius: 0;
background-color: transparent;
cursor: not-allowed; }
.btn--disabled:hover, .loading-form .btn:hover, .btn.loading:hover {
color: #b1b1b1; }
.btn--disabled:before, .loading-form .btn:before, .btn.loading:before, .btn--disabled:after, .loading-form .btn:after, .btn.loading:after {
display: none; }
.btn {
position: relative;
z-index: 1; }
.btn, .btn:before, .btn:after {
box-sizing: border-box;
transition: 0.2s ease-in-out;
overflow: hidden; }
.btn:before, .btn:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1; }
.loading-form .btn, .btn.loading {
cursor: progress;
color: #ffffff !important;
background-color: #b1b1b1; }
.loading-form .btn i[class^="icon"]:before, .btn.loading i[class^="icon"]:before {
content: "\f110";
animation: spinLoader 1.2s linear infinite;
display: inline-block; }
.btn-save-settings {
position: fixed;
bottom: 55px;
right: 32px;
padding: 0;
transition-duration: 0.5s; }
.btn-save-settings .btn {
float: right;
font-size: 17px;
font-weight: bold;
text-transform: uppercase;
background: #66bb6a;
color: #ffffff;
width: 55px;
height: 55px;
border-radius: 50px; }
.btn-save-settings .btn:hover, .loading-form .btn-save-settings .btn {
width: 100%; }
.btn-save-settings .btn:hover .icon, .loading-form .btn-save-settings .btn .icon {
margin-right: 6px; }
.btn-save-settings .btn .icon {
font-size: 25px;
vertical-align: text-bottom;
margin-bottom: -2px;
display: inline-block;
transition-delay: 0.1s;
margin-right: 14px; }
.loading-form .btn-save-settings .btn {
border: none; }
@keyframes spinLoader {
from {
transform: rotate(0deg); }
to {
transform: rotate(360deg); } }
@-webkit-keyframes spinLoader {
from {
transform: rotate(0deg); }
to {
transform: rotate(360deg); } }
@media (max-width: 768px) {
.btn-save-settings {
right: -60px;
bottom: 16px; }
.navbar-close .btn-save-settings {
bottom: 16px;
right: 16px; } }
.dropdown {
position: relative;
height: 46px; }
.dropdown--split, .dropdown--split-rev {
position: relative; }
.dropdown--split .dropdown-text, .dropdown--split .dropdown-icon, .dropdown--split-rev .dropdown-text, .dropdown--split-rev .dropdown-icon {
display: block;
vertical-align: middle;
white-space: nowrap;
line-height: 46px; }
.dropdown--split .dropdown-text, .dropdown--split-rev .dropdown-text {
width: 100%;
height: 100%;
margin: 0;
padding: 0 1em; }
.dropdown--split .dropdown-text.dropdown, .dropdown--split-rev .dropdown-text.dropdown {
padding: 0; }
.dropdown--split .dropdown-icon, .dropdown--split-rev .dropdown-icon {
position: absolute;
top: 0;
text-align: center;
padding: 0;
width: 46px; }
.dropdown--header {
position: relative;
float: left;
height: 70px; }
.dropdown--header .dropdown-text {
display: block;
height: 70px;
text-align: left;
line-height: 70px; }
.dropdown--header .dropdown-text .dropdown--name {
vertical-align: top;
padding: 0 8px; }
.dropdown--header .dropdown-text .dropdown-caret {
margin-left: 5px;
line-height: 62px; }
.dropdown--header .dropdown-caret {
display: block;
margin-right: 5px;
height: 70px;
line-height: 70px; }
.dropdown--header .dropdown-menu {
right: 0;
left: -1px;
width: auto;
border-width: 1px 0 1px 1px;
border-style: solid;
min-width: 155px; }
.dropdown--header.open .dropdown-menu {
border-color: #e5e5e5;
border-top-color: #ffffff;
white-space: normal; }
.dropdown--notifications {
border-left: 1px solid transparent;
border-right: 1px solid transparent; }
.dropdown--notifications.open {
border-color: #e5e5e5; }
.dropdown--notifications .dropdown-menu {
left: 0;
width: 260px; }
.dropdown--notifications__icon {
line-height: 0;
width: 40px;
height: 40px;
vertical-align: middle;
margin-top: -2px;
color: #35495d;
font-size: 54px; }
.dropdown--user {
padding: 0 10px;
min-width: 155px;
border-left: 1px solid transparent;
border-right: 1px solid transparent; }
.dropdown--user.open {
border-color: #e5e5e5; }
.dropdown--split {
padding-left: 46px; }
.dropdown--split .dropdown-icon {
left: 0; }
.dropdown--split-rev {
padding-right: 46px; }
.dropdown--split-rev .dropdown-icon {
right: 0; }
.dropdown-caret {
float: right; }
.dropdown-menu {
display: block;
opacity: 0;
visibility: hidden;
position: absolute;
top: 80%;
left: 0;
width: 100%;
max-height: 365px;
overflow-y: auto;
padding: 5px 0;
margin: 0;
background-color: #ffffff;
list-style: none;
z-index: 200; }
.dropdown-menu li {
line-height: 23px; }
.open > .dropdown-menu {
top: 100%;
opacity: 1;
visibility: visible; }
.dropdown-menu--animate {
-webkit-transition: 0.15s top linear, 0.15s opacity linear, 0s visibility linear 0.15s;
-moz-transition: 0.15s top linear, 0.15s opacity linear, 0s visibility linear 0.15s;
-ms-transition: 0.15s top linear, 0.15s opacity linear, 0s visibility linear 0.15s;
-o-transition: 0.15s top linear, 0.15s opacity linear, 0s visibility linear 0.15s;
transition: 0.15s top linear, 0.15s opacity linear, 0s visibility linear 0.15s; }
.open > .dropdown-menu--animate {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.fullscreen {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
overflow-y: scroll;
z-index: 400;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0; }
.loading-cover {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
visibility: hidden;
opacity: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1000; }
.loading-active .loading-cover {
visibility: visible;
opacity: 1; }
.loading-loader {
visibility: visible;
opacity: 1;
position: absolute;
width: 20px;
height: 20px;
top: 50%;
left: 50%;
margin: -10px 0 0 -10px;
background: transparent url(../img/loader.gif) center no-repeat; }
.animation--loading {
position: relative; }
.animation--loading > * {
opacity: 0;
-webkit-transition: 0.3s linear opacity;
-moz-transition: 0.3s linear opacity;
-ms-transition: 0.3s linear opacity;
-o-transition: 0.3s linear opacity;
transition: 0.3s linear opacity; }
.animation--loading:before {
position: absolute;
top: 0;
left: 50%;
width: 20px;
height: 20px;
margin: 0 -10px;
content: url("../img/loader.gif");
opacity: 1; }
.animation--load-out > * {
opacity: 1; }
.animation--load-out:before {
opacity: 0; }
/*------------------------------------*\
* Inspired by : avgrund 0.1
* http://lab.hakim.se/avgrund
\*------------------------------------*/
.modal-active body {
/*-webkit-transform: scale( 0.9 );*/
/*-moz-transform: scale( 0.9 );*/
/*-ms-transform: scale( 0.9 );*/
/*-o-transform: scale( 0.9 );*/
/*transform: scale( 0.9 );*/ }
.modal-active .modal-contents {
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-ms-filter: blur(2px);
-o-filter: blur(2px);
filter: blur(2px); }
.no-blur.modal-active .modal-contents {
-webkit-filter: none;
-moz-filter: none;
-ms-filter: none;
-o-filter: none;
filter: none; }
.modal-ready body,
.modal-ready .modal-contents,
.modal-ready .modal,
.modal-ready .modal__content {
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transition: 0.3s all cubic-bezier(0.25, 0.46, 0.45, 0.94);
-moz-transition: 0.3s all cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: 0.3s all cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: 0.3s all cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: 0.3s all cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.modal-ready .modal__content.no-transition {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none; }
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
visibility: hidden;
opacity: 0;
overflow: auto;
overflow-y: scroll;
z-index: 9999; }
.modal-active .modal {
visibility: visible;
opacity: 1; }
.modal__loader {
position: absolute;
width: 20px;
height: 20px;
top: 150px;
left: 50%;
visibility: hidden;
opacity: 0;
margin-left: -10px;
background: transparent url(../img/loader.gif) center no-repeat; }
.modal-loading .modal__loader {
visibility: visible;
opacity: 1; }
.modal__dialog {
position: absolute;
left: 50%;
top: 100px;
padding-bottom: 100px;
width: 800px;
margin-left: -400px; }
.modal__content {
visibility: hidden;
opacity: 0;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.6);
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8); }
.modal-active .modal-animate .modal__content {
visibility: visible;
opacity: 1;
/*-webkit-transform: scale( 1.1 );*/
/*-moz-transform: scale( 1.1 );*/
/*-ms-transform: scale( 1.1 );*/
/*-o-transform: scale( 1.1 );*/
/*transform: scale( 1.1 );*/
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1); }
.modal.stack .modal__content {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5); }
.modal-active .modal.stack .modal__content {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1); }
.modal__header {
width: 100%;
height: 40px;
padding: 0 40px 0 15px;
overflow: hidden;
line-height: 40px;
white-space: nowrap;
text-overflow: ellipsis;
text-overflow-ellipsis: '...';
color: #ffffff;
background-color: #35495d;
z-index: 100; }
.modal__close {
position: absolute;
top: 0;
right: 0;
height: 40px;
width: 40px;
line-height: 40px;
vertical-align: middle;
text-align: center;
color: #ffffff;
background-color: #2e3d4c;
cursor: pointer;
z-index: 100;
-webkit-transition: color 0.2s;
-moz-transition: color 0.2s;
-ms-transition: color 0.2s;
-o-transition: color 0.2s;
transition: color 0.2s; }
.modal__close:hover {
color: #e5e5e5; }
.modal__body {
padding: 23px;
min-height: 160px;
background-color: #ffffff; }
.soft-scroll {
overflow-y: auto; }
.scroll-container:focus {
outline: none; }
.jspContainer {
overflow: hidden;
position: relative; }
.jspPane {
position: absolute; }
.jspVerticalBar {
position: absolute;
top: 0;
right: 3px;
width: 5px;
height: 0; }
.jspHorizontalBar {
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 5px; }
.jspVerticalBar *,
.jspHorizontalBar * {
margin: 0;
padding: 0; }
.jspCap {
display: none; }
.jspHorizontalBar .jspCap {
float: left; }
.jspTrack {
background: transparent;
position: relative;
height: 0 !important; }
.jspDrag {
background: #5b5b5b;
position: relative;
top: 0;
left: 0;
cursor: pointer;
opacity: 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-transition: 0.3s opacity 1s;
-moz-transition: 0.3s opacity 1s;
-ms-transition: 0.3s opacity 1s;
-o-transition: 0.3s opacity 1s;
transition: 0.3s opacity 1s; }
.jspScrollable:hover .jspDrag {
opacity: .8;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.scroll-light .jspDrag {
background: #e5e5e5; }
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag {
float: left;
height: 100%; }
.jspArrow {
background: #e5e5e5;
text-indent: -20000px;
display: block;
cursor: pointer; }
.jspArrow.jspDisabled {
cursor: default;
background: #5b5b5b; }
.jspVerticalBar .jspArrow {
height: 5px; }
.jspHorizontalBar .jspArrow {
width: 5px;
float: left;
height: 100%; }
.jspVerticalBar .jspArrow:focus {
outline: none; }
.jspCorner {
float: left;
height: 100%; }
/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner {
margin: 0 -3px 0 0; }
.pagination > li > a {
font-weight: bold;
padding: 0px 4px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none; }
.pagination > li > a:hover {
color: #35495d; }
.pagination > li.disabled > a {
color: #e5e5e5;
cursor: default; }
.pagination > li.current > a {
color: #ffffff;
background-color: #35495d; }
.nav--tabs .active > a {
background-color: #ffffff; }
.tab-content .tab-pane {
display: none; }
.tab-content .tab-pane.active {
display: block; }
.img--circle, .img--circle-border, .social-account__img {
display: inline-block;
border-radius: 50%;
overflow: hidden; }
.img--circle-border {
border: 3px solid #35495d;
-webkit-box-shadow: 0 0 1px 1px #ffffff inset;
-moz-box-shadow: 0 0 1px 1px #ffffff inset;
-ms-box-shadow: 0 0 1px 1px #ffffff inset;
-o-box-shadow: 0 0 1px 1px #ffffff inset;
box-shadow: 0 0 1px 1px #ffffff inset;
/* Chrome Aliasing Fix */ }
.notifications-container {
display: block;
width: 400px;
height: auto;
margin: 0;
margin-left: -200px;
padding: 0;
list-style: none;
position: fixed;
top: 0px;
left: 50%;
z-index: 9999; }
.notifications-container > li {
margin: 5px 0;
position: relative;
top: 50px;
opacity: 0;
max-height: 200px; }
.notifications-container > li .noty_bar {
position: relative;
overflow: hidden;
background-color: #f3f3f3;
box-shadow: 0px 0px 5px #5b5b5b; }
.notifications-container > li .noty_bar .noty_message {
padding: 12px 10px 14px 60px; }
.notifications-container > li .noty_bar .noty_sidebar {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 50px;
color: #ffffff;
text-align: center;
line-height: 50px;
vertical-align: middle; }
.notifications-container > li .noty_bar .noty_icon {
display: block;
position: absolute;
width: 100%;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none; }
.notifications-container > li .noty_bar .noty_close {
display: block;
position: absolute;
width: 100%;
opacity: 0;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease; }
.notifications-container > li .noty_bar .noty_close:after {
content: ""; }
.notifications-container > li .noty_bar:hover .noty_close {
opacity: 1;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none; }
.notifications-container > li .noty_bar:hover .noty_icon {
opacity: 0;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5); }
.notifications-container > li.noty_alert .noty_sidebar, .notifications-container > li.noty_notification .noty_sidebar, .notifications-container > li.noty_warning .noty_sidebar {
background-color: #ff9e3c; }
.notifications-container > li.noty_alert .noty_icon, .notifications-container > li.noty_notification .noty_icon, .notifications-container > li.noty_warning .noty_icon {
-webkit-animation: bounce 2s ease infinite;
-moz-animation: bounce 2s ease infinite;
-ms-animation: bounce 2s ease infinite;
-o-animation: bounce 2s ease infinite;
animation: bounce 2s ease infinite; }
.notifications-container > li.noty_alert .noty_icon:after, .notifications-container > li.noty_notification .noty_icon:after, .notifications-container > li.noty_warning .noty_icon:after {
content: "\f071"; }
.notifications-container > li.noty_error .noty_sidebar {
background-color: #de594b; }
.notifications-container > li.noty_error .noty_icon {
-webkit-animation: bounce 2s ease infinite;
-moz-animation: bounce 2s ease infinite;
-ms-animation: bounce 2s ease infinite;
-o-animation: bounce 2s ease infinite;
animation: bounce 2s ease infinite; }
.notifications-container > li.noty_error .noty_icon:after {
content: "\f06a"; }
.notifications-container > li.noty_info .noty_sidebar {
background-color: #35495d; }
.notifications-container > li.noty_info .noty_icon:after {
content: "\f05A"; }
.notifications-container > li.noty_success .noty_sidebar {
background-color: #66bb6a; }
.notifications-container > li.noty_success .noty_icon:after {
content: "\f14a"; }
@-webkit-keyframes bounce {
from {
text-indent: 0px; }
35% {
text-indent: 0px; }
40% {
text-indent: 4px; }
45% {
text-indent: -4px; }
50% {
text-indent: 4px; }
55% {
text-indent: -4px; }
60% {
text-indent: 4px; }
65% {
text-indent: 0px; }
to {
text-indent: 0px; } }
@-moz-keyframes bounce {
from {
text-indent: 0px; }
35% {
text-indent: 0px; }
40% {
text-indent: 4px; }
45% {
text-indent: -4px; }
50% {
text-indent: 4px; }
55% {
text-indent: -4px; }
60% {
text-indent: 4px; }
65% {
text-indent: 0px; }
to {
text-indent: 0px; } }
@-ms-keyframes bounce {
from {
text-indent: 0px; }
35% {
text-indent: 0px; }
40% {
text-indent: 4px; }
45% {
text-indent: -4px; }
50% {
text-indent: 4px; }
55% {
text-indent: -4px; }
60% {
text-indent: 4px; }
65% {
text-indent: 0px; }
to {
text-indent: 0px; } }
@-o-keyframes bounce {
from {
text-indent: 0px; }
35% {
text-indent: 0px; }
40% {
text-indent: 4px; }
45% {
text-indent: -4px; }
50% {
text-indent: 4px; }
55% {
text-indent: -4px; }
60% {
text-indent: 4px; }
65% {
text-indent: 0px; }
to {
text-indent: 0px; } }
@keyframes bounce {
from {
text-indent: 0px; }
35% {
text-indent: 0px; }
40% {
text-indent: 4px; }
45% {
text-indent: -4px; }
50% {
text-indent: 4px; }
55% {
text-indent: -4px; }
60% {
text-indent: 4px; }
65% {
text-indent: 0px; }
to {
text-indent: 0px; } }
@media (max-width: 420px) {
.notifications-container {
width: 98%;
margin-left: -49%; } }
.toggle-switch {
display: inline-block;
position: relative;
min-width: 50px;
padding: 2px;
background-color: #e5e5e5;
overflow: hidden;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
margin-left: 100px;
margin-right: 12px; }
.toggle-switch input {
position: absolute;
top: -9999px;
left: -9999px;
opacity: 0; }
.toggle-switch__toggles {
position: relative;
height: 100%;
z-index: 1;
transition-duration: 1s; }
.toggle-switch__toggles span {
display: inline-block;
position: absolute;
height: 100%;
font-weight: bold;
color: #5b5b5b;
line-height: 13px;
-webkit-transition: color 0.2s;
-moz-transition: color 0.2s;
-ms-transition: color 0.2s;
-o-transition: color 0.2s;
transition: color 0.2s; }
.toggle-switch__toggles span.on {
left: -75px; }
.on .toggle-switch__toggles span.on {
color: #66bb6a; }
.toggle-switch__toggles span.on:after {
content: "/";
color: #5b5b5b !important;
margin-left: 4px; }
.toggle-switch__toggles span.off {
left: -42px; }
.off .toggle-switch__toggles span.off {
color: #de594b; }
.toggle-switch__slider {
display: block;
position: absolute;
bottom: 100%;
left: -10px;
padding: 0;
transition-duration: 1s;
background: #ffffff;
width: 30px;
height: 30px;
box-shadow: 0px 0px 8px #555;
top: -7px;
opacity: 1;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
-webkit-transition: opacity 0.2s, left 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-moz-transition: opacity 0.2s, left 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: opacity 0.2s, left 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: opacity 0.2s, left 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: opacity 0.2s, left 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.on .toggle-switch__slider {
left: 50%; }
@keyframes slide-left-right {
0% {
left: 5px; }
100% {
left: 58%; } }
.toggle-switch {
vertical-align: bottom;
overflow: visible;
height: 17px; }
.toggle-switch.on {
background-color: #66bb6a; }
.toggle-switch.disabled {
cursor: not-allowed;
background-color: #5b5b5b; }
.content__header__switch {
line-height: 42px; }
.form-field--invalid > label, .form-field--invalid > additional {
color: #de594b; }
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
border: 2px solid #e5e5e5;
padding: 8px 10px 9px 10px;
margin: -1px;
background-color: #ffffff;
color: #303538;
text-indent: 1px;
vertical-align: middle;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-ms-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s; }
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
outline: 0;
outline: thin dotted \9;
border-color: #35495d;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-ms-box-shadow: none;
-o-box-shadow: none;
box-shadow: none; }
textarea:-moz-placeholder, textarea:-ms-input-placeholder, textarea::-webkit-input-placeholder, textarea.placeholder,
input[type="text"]:-moz-placeholder,
input[type="text"]:-ms-input-placeholder,
input[type="text"]::-webkit-input-placeholder,
input[type="text"].placeholder,
input[type="password"]:-moz-placeholder,
input[type="password"]:-ms-input-placeholder,
input[type="password"]::-webkit-input-placeholder,
input[type="password"].placeholder,
input[type="datetime"]:-moz-placeholder,
input[type="datetime"]:-ms-input-placeholder,
input[type="datetime"]::-webkit-input-placeholder,
input[type="datetime"].placeholder,
input[type="datetime-local"]:-moz-placeholder,
input[type="datetime-local"]:-ms-input-placeholder,
input[type="datetime-local"]::-webkit-input-placeholder,
input[type="datetime-local"].placeholder,
input[type="date"]:-moz-placeholder,
input[type="date"]:-ms-input-placeholder,
input[type="date"]::-webkit-input-placeholder,
input[type="date"].placeholder,
input[type="month"]:-moz-placeholder,
input[type="month"]:-ms-input-placeholder,
input[type="month"]::-webkit-input-placeholder,
input[type="month"].placeholder,
input[type="time"]:-moz-placeholder,
input[type="time"]:-ms-input-placeholder,
input[type="time"]::-webkit-input-placeholder,
input[type="time"].placeholder,
input[type="week"]:-moz-placeholder,
input[type="week"]:-ms-input-placeholder,
input[type="week"]::-webkit-input-placeholder,
input[type="week"].placeholder,
input[type="number"]:-moz-placeholder,
input[type="number"]:-ms-input-placeholder,
input[type="number"]::-webkit-input-placeholder,
input[type="number"].placeholder,
input[type="email"]:-moz-placeholder,
input[type="email"]:-ms-input-placeholder,
input[type="email"]::-webkit-input-placeholder,
input[type="email"].placeholder,
input[type="url"]:-moz-placeholder,
input[type="url"]:-ms-input-placeholder,
input[type="url"]::-webkit-input-placeholder,
input[type="url"].placeholder,
input[type="search"]:-moz-placeholder,
input[type="search"]:-ms-input-placeholder,
input[type="search"]::-webkit-input-placeholder,
input[type="search"].placeholder,
input[type="tel"]:-moz-placeholder,
input[type="tel"]:-ms-input-placeholder,
input[type="tel"]::-webkit-input-placeholder,
input[type="tel"].placeholder,
input[type="color"]:-moz-placeholder,
input[type="color"]:-ms-input-placeholder,
input[type="color"]::-webkit-input-placeholder,
input[type="color"].placeholder,
.uneditable-input:-moz-placeholder,
.uneditable-input:-ms-input-placeholder,
.uneditable-input::-webkit-input-placeholder,
.uneditable-input.placeholder {
color: #5b5b5b; }
textarea.no-error,
input[type="text"].no-error,
input[type="password"].no-error,
input[type="datetime"].no-error,
input[type="datetime-local"].no-error,
input[type="date"].no-error,
input[type="month"].no-error,
input[type="time"].no-error,
input[type="week"].no-error,
input[type="number"].no-error,
input[type="email"].no-error,
input[type="url"].no-error,
input[type="search"].no-error,
input[type="tel"].no-error,
input[type="color"].no-error,
.uneditable-input.no-error {
border-color: #e5e5e5 !important;
color: #303538 !important; }
textarea.no-error:focus,
input[type="text"].no-error:focus,
input[type="password"].no-error:focus,
input[type="datetime"].no-error:focus,
input[type="datetime-local"].no-error:focus,
input[type="date"].no-error:focus,
input[type="month"].no-error:focus,
input[type="time"].no-error:focus,
input[type="week"].no-error:focus,
input[type="number"].no-error:focus,
input[type="email"].no-error:focus,
input[type="url"].no-error:focus,
input[type="search"].no-error:focus,
input[type="tel"].no-error:focus,
input[type="color"].no-error:focus,
.uneditable-input.no-error:focus {
border-color: #35495d !important; }
textarea.error, .error textarea, textarea.ng-invalid.ng-dirty, textarea.ng-invalid-required.ng-dirty,
input[type="text"].error, .error
input[type="text"],
input[type="text"].ng-invalid.ng-dirty,
input[type="text"].ng-invalid-required.ng-dirty,
input[type="password"].error, .error
input[type="password"],
input[type="password"].ng-invalid.ng-dirty,
input[type="password"].ng-invalid-required.ng-dirty,
input[type="datetime"].error, .error
input[type="datetime"],
input[type="datetime"].ng-invalid.ng-dirty,
input[type="datetime"].ng-invalid-required.ng-dirty,
input[type="datetime-local"].error, .error
input[type="datetime-local"],
input[type="datetime-local"].ng-invalid.ng-dirty,
input[type="datetime-local"].ng-invalid-required.ng-dirty,
input[type="date"].error, .error
input[type="date"],
input[type="date"].ng-invalid.ng-dirty,
input[type="date"].ng-invalid-required.ng-dirty,
input[type="month"].error, .error
input[type="month"],
input[type="month"].ng-invalid.ng-dirty,
input[type="month"].ng-invalid-required.ng-dirty,
input[type="time"].error, .error
input[type="time"],
input[type="time"].ng-invalid.ng-dirty,
input[type="time"].ng-invalid-required.ng-dirty,
input[type="week"].error, .error
input[type="week"],
input[type="week"].ng-invalid.ng-dirty,
input[type="week"].ng-invalid-required.ng-dirty,
input[type="number"].error, .error
input[type="number"],
input[type="number"].ng-invalid.ng-dirty,
input[type="number"].ng-invalid-required.ng-dirty,
input[type="email"].error, .error
input[type="email"],
input[type="email"].ng-invalid.ng-dirty,
input[type="email"].ng-invalid-required.ng-dirty,
input[type="url"].error, .error
input[type="url"],
input[type="url"].ng-invalid.ng-dirty,
input[type="url"].ng-invalid-required.ng-dirty,
input[type="search"].error, .error
input[type="search"],
input[type="search"].ng-invalid.ng-dirty,
input[type="search"].ng-invalid-required.ng-dirty,
input[type="tel"].error, .error
input[type="tel"],
input[type="tel"].ng-invalid.ng-dirty,
input[type="tel"].ng-invalid-required.ng-dirty,
input[type="color"].error, .error
input[type="color"],
input[type="color"].ng-invalid.ng-dirty,
input[type="color"].ng-invalid-required.ng-dirty,
.uneditable-input.error, .error
.uneditable-input,
.uneditable-input.ng-invalid.ng-dirty,
.uneditable-input.ng-invalid-required.ng-dirty {
border-color: #de594b;
color: #de594b; }
textarea.success,
input[type="text"].success,
input[type="password"].success,
input[type="datetime"].success,
input[type="datetime-local"].success,
input[type="date"].success,
input[type="month"].success,
input[type="time"].success,
input[type="week"].success,
input[type="number"].success,
input[type="email"].success,
input[type="url"].success,
input[type="search"].success,
input[type="tel"].success,
input[type="color"].success,
.uneditable-input.success {
border-color: #2ecc71;
color: #2ecc71; }
textarea.warning,
input[type="text"].warning,
input[type="password"].warning,
input[type="datetime"].warning,
input[type="datetime-local"].warning,
input[type="date"].warning,
input[type="month"].warning,
input[type="time"].warning,
input[type="week"].warning,
input[type="number"].warning,
input[type="email"].warning,
input[type="url"].warning,
input[type="search"].warning,
input[type="tel"].warning,
input[type="color"].warning,
.uneditable-input.warning {
border-color: #ff9e3c;
color: #ff9e3c; }
textarea.info,
input[type="text"].info,
input[type="password"].info,
input[type="datetime"].info,
input[type="datetime-local"].info,
input[type="date"].info,
input[type="month"].info,
input[type="time"].info,
input[type="week"].info,
input[type="number"].info,
input[type="email"].info,
input[type="url"].info,
input[type="search"].info,
input[type="tel"].info,
input[type="color"].info,
.uneditable-input.info {
border-color: #35495d;
color: #35495d; }
textarea {
resize: none;
height: 69px; }
input[disabled],
input[readonly],
textarea[disabled],
textarea[readonly] {
overflow: hidden;
white-space: nowrap;
cursor: not-allowed;
background-color: #f3f3f3;
border-color: transparent;
color: #5b5b5b;
cursor: default; }
.form-field__errors {
display: none;
position: relative;
width: 95%;
height: 0;
padding: 0;
margin: 0; }
.ng-invalid:focus + .form-field__errors {
display: block; }
.form-field__errors > ul {
position: relative;
top: 3px;
padding: 2px 10px;
background-color: #bf4032;
color: #ffffff;
list-style: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px; }
.form-field__errors > ul:before {
border-bottom-color: #bf4032 !important; }
.form-field__errors > ul:after {
border-bottom-color: #bf4032 !important; }
.input--icon, .input--icon--rev {
display: inline-block;
position: relative; }
.input--icon [class^="icon-"], .input--icon--rev [class^="icon-"] {
display: block;
position: absolute;
top: 50%;
left: 10px;
font-size: 20px;
font-weight: normal;
margin-top: -10px;
color: #e5e5e5;
-webkit-transition: color 0.2s;
-moz-transition: color 0.2s;
-ms-transition: color 0.2s;
-o-transition: color 0.2s;
transition: color 0.2s; }
.input--icon input, .input--icon--rev input {
padding-left: 30px; }
.input--icon input:focus + [class^="icon-"], .input--icon--rev input:focus + [class^="icon-"] {
color: #35495d; }
.input--icon input.error + [class^="icon-"], .input--icon--rev input.error + [class^="icon-"], .input--icon input.ng-dirty.ng-invalid + [class^="icon-"], .input--icon--rev input.ng-dirty.ng-invalid + [class^="icon-"] {
color: #de594b; }
.input--icon--rev [class*="icon-"]:before {
left: auto;
right: 10px; }
.input--icon--rev input {
padding-left: 0;
padding-right: 30px; }
.input--loading {
position: relative; }
.input--loading:after {
position: absolute;
top: 5px;
right: 5px;
z-index: 9999;
content: url("../img/loader_form.gif"); }
/**
* Image Picker
*/
ul.thumbnails.image_picker_selector {
list-style-image: none;
list-style-position: outside;
list-style-type: none;
padding: 0px;
margin: 0px;
max-width: 1200px; }
ul.thumbnails.image_picker_selector li {
margin-top: 10px; }
ul.thumbnails.image_picker_selector li .thumbnail {
padding: 6px;
border: 1px solid #e5e5e5; }
ul.thumbnails.image_picker_selector li .thumbnail img {
display: block; }
ul.thumbnails.image_picker_selector li .thumbnail.selected {
background: #35495d; }
.selectize-control.default.multi .selectize-input > div {
background-color: #e5e5e5;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px; }
.selectize-control.default.multi .selectize-input > div.active {
color: #ffffff;
background-color: #5b5b5b; }
.selectize-control.default.multi .selectize-input.disabled > div {
border-color: #d8d8d8;
background: #fafafa;
color: #808080; }
.selectize-input, .selectize-control.single .selectize-input.focus {
border: 2px solid #e5e5e5;
padding: 5px 30px 5px 10px;
background-color: #ffffff;
text-indent: 1px;
vertical-align: middle;
cursor: text;
display: inline-block;
width: 100%;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px; }
.selectize-input.focus {
border-color: #35495d !important; }
.selectize-input.dropdown-active {
-webkit-border-radius: 4px 4px 0 0 !important;
-moz-border-radius: 4px 4px 0 0 !important;
-ms-border-radius: 4px 4px 0 0 !important;
-o-border-radius: 4px 4px 0 0 !important;
border-radius: 4px 4px 0 0 !important; }
.selectize-input.dropdown-active::before {
content: ' ';
display: block;
position: absolute;
background: #f3f3f3;
height: 1px;
bottom: 0;
left: 0;
right: 0; }
.selectize-control.multi .selectize-input.has-items {
padding-top: 4px !important;
padding-bottom: 1px !important;
padding-left: 3px !important; }
.selectize-control.multi .selectize-input > div {
cursor: pointer;
margin: 0 5px 3px 0;
padding: 1px 5px; }
.selectize-input > div:last-child {
margin-right: 5px; }
.selectize-input > input {
margin-right: 2px !important;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none; }
.selectize-dropdown, .selectize-input, .selectize-control.single .selectize-input.dropdown-active {
border: 2px solid #e5e5e5; }
.selectize-dropdown {
max-height: 200px;
overflow-y: auto;
overflow-x: hidden;
background: #ffffff;
margin-top: -1px;
border: 2px solid #35495d;
border-top: 0 none;
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
-ms-border-radius: 0 0 4px 4px;
-o-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px; }
.selectize-dropdown [data-selectable],
.selectize-dropdown .optgroup-header {
padding: 6px 9px; }
.selectize-dropdown .optgroup:first-child .optgroup-header {
border-top: 0 none; }
.selectize-dropdown .optgroup-header {
background: #f3f3f3;
border-bottom: 2px solid #e5e5e5;
border-top: 2px solid #e5e5e5;
font-weight: bold;
font-size: 0.8em;
cursor: default; }
.selectize-dropdown .create {
color: #5b5b5b; }
.selectize-dropdown .active {
background-color: #f3f3f3; }
.selectize-dropdown [data-selectable] .highlight {
background: #f3f3f3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px; }
.selectize-input.disabled, .selectize-input.disabled * {
cursor: default !important; }
.selectize-control.single .selectize-input {
cursor: pointer;
border-color: #e5e5e5; }
.selectize-control.single .selectize-input::after {
content: ' ';
display: block;
position: absolute;
top: 50%;
right: 15px;
margin-top: -2px;
width: 0;
height: 0;
border-style: solid;
border-width: 5px 5px 0 5px;
border-color: #5b5b5b transparent transparent transparent; }
.selectize-control.single .selectize-input.dropdown-active::after {
margin-top: -3px;
border-width: 0 5px 5px 5px;
border-color: transparent transparent #5b5b5b transparent; }
.selectize-control.single .selectize-input.disabled {
opacity: 0.5; }
.selectize-control.multi .selectize-input.disabled {
background-color: #f3f3f3; }
.selectize-control {
position: relative; }
.selectize-input {
overflow: hidden;
position: relative;
z-index: 1; }
.selectize-input:after {
content: ' ';
display: block;
clear: left; }
.selectize-input .items {
display: inline; }
.selectize-input > * {
vertical-align: baseline;
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline; }
.selectize-input > input {
max-width: 100% !important;
text-indent: 0 !important;
border: 0 none !important;
background: none !important;
padding: 0 !important;
margin: 0;
line-height: inherit !important;
-webkit-user-select: auto !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important; }
.selectize-input > input:focus {
outline: none !important; }
.selectize-dropdown {
position: absolute;
z-index: 2; }
.selectize-dropdown > * {
cursor: pointer;
overflow: hidden; }
.selectize-input, .selectize-dropdown {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
/* --- file: "src/plugins/drag_drop/plugin.css" --- */
.selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder {
visibility: visible !important;
background: #f2f2f2 !important;
background: rgba(0, 0, 0, 0.06) !important;
border: 0 none !important;
-webkit-box-shadow: inset 0 0 12px 4px #fff;
-moz-box-shadow: inset 0 0 12px 4px #fff;
box-shadow: inset 0 0 12px 4px #fff; }
.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after {
content: '!';
visibility: hidden; }
.selectize-control.plugin-drag_drop .ui-sortable-helper {
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important; }
/* --- file: "src/plugins/optgroup_columns/plugin.css" --- */
.selectize-control.plugin-optgroup_columns .optgroup {
border-right: 1px solid #f2f2f2;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.selectize-control.plugin-optgroup_columns .optgroup:last-child {
border-right: 0 none; }
.selectize-control.plugin-optgroup_columns .optgroup-header {
border-top: 0 none; }
/* --- file: "src/plugins/remove_button/plugin.css" --- */
.selectize-control.plugin-remove_button .item {
position: relative;
padding-right: 24px !important; }
.selectize-control.plugin-remove_button .item .remove {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 17px;
-moz-sizing: border-box;
-webkit-sizing: border-box;
box-sizing: border-box;
text-align: center;
font-size: 12px;
font-weight: bold;
color: inherit;
vertical-align: middle;
display: inline-block;
padding: 7px 0 0 0;
line-height: 8px;
-webkit-border-radius: 0 2px 2px 0;
-moz-border-radius: 0 2px 2px 0;
border-radius: 0 2px 2px 0;
border-left: 1px solid #74b21e; }
.selectize-control.plugin-remove_button .item .remove:hover {
border-left-color: #5e8f1a;
background: rgba(50, 90, 0, 0.15); }
.icheckbox,
.iradio {
display: block;
margin: 0;
padding: 0;
width: 22px;
height: 22px;
background: url(../img/icheck.png) no-repeat;
border: none;
cursor: pointer; }
.icheckbox {
background-position: 0 0; }
.icheckbox.checked {
background-position: -22px 0; }
.icheckbox.disabled {
background-position: -44px 0;
cursor: default; }
.icheckbox.checked.disabled {
background-position: -66px 0; }
.iradio {
background-position: -88px 0; }
.iradio.checked {
background-position: -110px 0; }
.iradio.disabled {
background-position: -132px 0;
cursor: default; }
.iradio.checked.disabled {
background-position: -154px 0; }
/* Retina support */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3 / 2), only screen and (min-device-pixel-ratio: 1.5) {
.icheckbox,
.iradio {
background-image: url(../img/icheck@2x.png);
-webkit-background-size: 176px 22px;
background-size: 176px 22px; } }
.date-picker-wrapper [class^="icon-"], .time-picker-wrapper [class^="icon-"] {
color: #303538;
left: 33px; }
.date-picker-wrapper input, .time-picker-wrapper input {
cursor: pointer; }
.picker {
font-size: 16px;
text-align: left;
line-height: 1.2;
color: #303538;
position: absolute;
z-index: 10000; }
/**
* The picker input element.
*/
.picker__input {
cursor: default; }
/**
* When the picker is opened, the input element is "activated".
*/
.picker__input.picker__input--active {
border-color: #35495d; }
/**
* The holder is the only "scrollable" top-level container element.
*/
.picker__holder {
width: 90%;
overflow-y: auto;
-webkit-overflow-scrolling: touch; }
/**
* Note: the root picker element should __NOT__ be styled
* more than what's here. Style the `.picker__holder` instead.
*/
.picker {
width: 100%; }
/**
* The holder is the base of the picker.
*/
.picker__holder {
position: absolute;
background: #ffffff;
border: 1px solid #5b5b5b;
font-size: 14px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
min-width: 256px;
max-width: 466px;
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
max-height: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
-webkit-transform: translateY(-1em) perspective(600px) rotateX(10deg);
-moz-transform: translateY(-1em) perspective(600px) rotateX(10deg);
transform: translateY(-1em) perspective(600px) rotateX(10deg);
-webkit-transition: all 0.15s ease-out, max-height 0 0.15s;
-moz-transition: all 0.15s ease-out, max-height 0 0.15s;
transition: all 0.15s ease-out, max-height 0 0.15s; }
/**
* When the picker opens...
*/
.picker--opened .picker__holder {
max-height: 25em;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
-webkit-transform: translateY(0) perspective(600px) rotateX(0);
-moz-transform: translateY(0) perspective(600px) rotateX(0);
transform: translateY(0) perspective(600px) rotateX(0);
-webkit-transition: all 0.15s ease-out, max-height 0;
-moz-transition: all 0.15s ease-out, max-height 0;
transition: all 0.15s ease-out, max-height 0;
-webkit-box-shadow: 0 6px 18px 1px rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 6px 18px 1px rgba(0, 0, 0, 0.12);
box-shadow: 0 6px 18px 1px rgba(0, 0, 0, 0.12); }
/**
* == Date Picker ==
*/
/**
* The picker box.
*/
.picker__box {
padding: 0 1em; }
/**
* The header containing the month and year stuff.
*/
.picker__header {
text-align: center;
position: relative;
margin-top: .75em; }
/**
* The month and year labels.
*/
.picker__month,
.picker__year {
font-weight: 500;
display: inline-block;
margin-left: .25em;
margin-right: .25em; }
.picker__year {
color: #5b5b5b;
font-size: .8em;
font-style: italic; }
/**
* The month and year selectors.
*/
.picker__select--month,
.picker__select--year {
font-size: .8em;
border: 1px solid #e5e5e5;
height: 2.5em;
padding: .66em .25em;
margin-left: .25em;
margin-right: .25em;
margin-top: -0.5em; }
.picker__select--month {
width: 35%; }
.picker__select--year {
width: 22.5%; }
.picker__select--month:focus,
.picker__select--year:focus {
border-color: #35495d; }
/**
* The month navigation buttons.
*/
.picker__nav--prev,
.picker__nav--next {
position: absolute;
top: -0.33em;
padding: .5em 1.33em;
width: 1em;
height: 1em; }
.picker__nav--prev {
left: -1em;
padding-right: 1.5em; }
.picker__nav--next {
right: -1em;
padding-left: 1.5em; }
.picker__nav--prev:before,
.picker__nav--next:before {
content: " ";
border-top: .5em solid transparent;
border-bottom: .5em solid transparent;
border-right: 0.75em solid #1e272a;
width: 0;
height: 0;
display: block;
margin: 0 auto; }
.picker__nav--next:before {
border-right: 0;
border-left: 0.75em solid #1e272a; }
.picker__nav--prev:hover,
.picker__nav--next:hover {
cursor: pointer;
color: #1e272a; }
.picker__nav--disabled,
.picker__nav--disabled:hover,
.picker__nav--disabled:before,
.picker__nav--disabled:before:hover {
cursor: default;
background: none;
border-right-color: #f3f3f3;
border-left-color: #f3f3f3; }
/**
* The calendar table of dates
*/
.picker__table {
text-align: center;
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
font-size: inherit;
width: 100%;
margin-top: .75em;
margin-bottom: .5em; }
@media (min-height: 33.875em) {
.picker__table {
margin-bottom: .75em; } }
.picker__table td {
margin: 0;
padding: 0; }
/**
* The weekday labels
*/
.picker__weekday {
width: 14.285714286%;
font-size: .75em;
padding-bottom: .25em;
color: #5b5b5b;
font-weight: 500;
/* Increase the spacing a tad */ }
@media (min-height: 33.875em) {
.picker__weekday {
padding-bottom: .5em; } }
/**
* The days on the calendar
*/
.picker__day {
padding: .3125em 0;
font-weight: 200;
border: 1px solid transparent; }
.picker__day--today {
color: #35495d;
position: relative; }
.picker__day--today:before {
content: " ";
position: absolute;
top: 2px;
right: 2px;
width: 0;
height: 0;
border-top: 0.5em solid #5b5b5b;
border-left: .5em solid transparent; }
.picker__day--selected,
.picker__day--selected:hover {
border-color: #35495d; }
.picker__day--selected:before {
border-top: 0.5em solid #ffffff; }
.picker__day--highlighted {
background: #bac9d7; }
.picker__day--disabled:before {
border-top-color: #e5e5e5; }
.picker__day--outfocus {
color: #5b5b5b;
background: #f3f3f3;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=66)";
filter: alpha(opacity=66);
-moz-opacity: 0.66;
opacity: 0.66; }
.picker__day--infocus:hover,
.picker__day--outfocus:hover {
cursor: pointer;
color: #1e272a;
background: #bac9d7; }
.picker__day--highlighted:hover,
.picker--focused .picker__day--highlighted {
background: #35495d;
color: #f3f3f3; }
.picker__day--disabled,
.picker__day--disabled:hover {
background: #f3f3f3;
border-color: #f3f3f3;
color: #f3f3f3;
cursor: default; }
.picker__day--highlighted.picker__day--disabled,
.picker__day--highlighted.picker__day--disabled:hover {
background: #e5e5e5; }
/**
* The footer containing the "today" and "clear" buttons.
*/
.picker__footer {
text-align: center; }
.picker__button--today,
.picker__button--clear {
border: 1px solid #ffffff;
background: #ffffff;
font-size: .8em;
padding: .66em 0;
font-weight: bold;
width: 50%;
display: inline-block;
vertical-align: bottom; }
.picker__button--today:hover,
.picker__button--clear:hover {
cursor: pointer;
color: #1e272a;
background: #bac9d7;
border-bottom-color: #bac9d7; }
.picker__button--today:focus,
.picker__button--clear:focus {
background: #bac9d7;
border-color: #35495d;
outline: none; }
.picker__button--today:before,
.picker__button--clear:before {
position: relative;
display: inline-block;
height: 0; }
.picker__button--today:before {
content: " ";
margin-right: .45em;
top: -0.05em;
width: 0;
border-top: 0.66em solid #35495d;
border-left: .66em solid transparent; }
.picker__button--clear:before {
content: "\D7";
margin-right: .35em;
top: -0.1em;
color: #de594b;
vertical-align: top;
font-size: 1.1em; }
.picker__button--clear:hover {
background: #eea8a1;
border-bottom-color: #eea8a1; }
/**
* == Time Picker ==
*/
/**
* The list of times.
*/
.picker__list {
list-style: none;
padding: 0.75em 0 4.2em;
margin: 0; }
/**
* The times on the clock.
*/
.picker__list-item {
border-bottom: 1px solid #f3f3f3;
border-top: 1px solid #f3f3f3;
margin-bottom: -1px;
position: relative;
background: #ffffff;
padding: .75em 1.25em; }
@media (min-height: 46.75em) {
.picker__list-item {
padding: .5em 1em; } }
/* Hovered time */
.picker__list-item:hover {
cursor: pointer;
color: #1e272a;
background: #bac9d7;
border-color: #35495d;
z-index: 10; }
/* Selected time */
.picker__list-item--selected,
.picker__list-item--selected:hover {
border-color: #35495d;
z-index: 10; }
/* Highlighted time */
.picker__list-item--highlighted {
background: #bac9d7; }
/* Highlighted and hovered/focused time */
.picker__list-item--highlighted:hover,
.picker--focused .picker__list-item--highlighted {
background: #35495d;
color: #ffffff; }
/* Disabled time */
.picker__list-item--disabled,
.picker__list-item--disabled:hover {
background: #f3f3f3;
border-color: #f3f3f3;
color: #e5e5e5;
cursor: default;
border-color: #e5e5e5;
z-index: auto; }
/**
* The clear button
*/
.picker--time .picker__button--clear {
display: block;
width: 80%;
margin: 1em auto 0;
padding: 1em 1.25em;
background: none;
border: 0;
font-weight: 500;
font-size: .67em;
text-align: center;
text-transform: uppercase;
color: #5b5b5b; }
.picker--time .picker__button--clear:hover,
.picker--time .picker__button--clear:focus {
color: #1e272a;
background: #bac9d7;
background: #de594b;
border-color: #de594b;
cursor: pointer;
color: #ffffff;
outline: none; }
.picker--time .picker__button--clear:before {
top: -0.25em;
color: #666;
font-size: 1.25em;
font-weight: bold; }
.picker--time .picker__button--clear:hover:before,
.picker--time .picker__button--clear:focus:before {
color: #ffffff; }
/**
* Note: the root picker element should __NOT__ be styled
* more than what's here. Style the `.picker__holder` instead.
*/
.picker--time {
min-width: 70px;
max-width: 320px; }
.picker--time .picker__holder {
min-width: 70px; }
/**
* The holder is the base of the picker.
*/
.picker--time .picker__holder {
background: #f3f3f3; }
@media (min-height: 40.125em) {
.picker--time .picker__holder {
font-size: .875em; } }
/**
* The box contains the list of times.
*/
.picker--time .picker__box {
padding: 0; }
.file-upload-wrapper {
text-align: center; }
.file-upload-preview {
text-align: left; }
.file-upload-preview.loading {
position: relative;
min-height: 50px; }
.file-upload-preview.loading:after, .file-upload-preview.loading::after {
content: "";
display: block;
width: 20px;
height: 20px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -10px;
margin-top: -10px;
background: transparent url(../img/loader.gif) center no-repeat;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px; }
.file-upload-preview img {
max-width: 100%;
max-height: 300px; }
.file-upload-input {
width: 100%; }
input[type=color] {
height: 38px;
padding: 0px; }
pre {
background-color: #e5e5e5;
padding: 5px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px; }
.pricing-table {
text-align: center;
color: #ffffff;
background-color: #303538;
border: 5px solid transparent;
cursor: pointer;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-transition: border-color ease 0.2s;
-moz-transition: border-color ease 0.2s;
-ms-transition: border-color ease 0.2s;
-o-transition: border-color ease 0.2s;
transition: border-color ease 0.2s; }
.pricing-table:hover {
border-color: #35495d; }
.pricing-table__title {
padding: 11.5px 0;
font-weight: bold;
text-transform: uppercase; }
.pricing-table__options {
padding: 11.5px 0;
border-top: 1px solid #5b5b5b; }
.pricing-table__options--disabled {
color: #5b5b5b;
text-decoration: line-through; }
.pricing-table__price {
padding: 23px 0;
background-color: #5b5b5b; }
.pricing-table__price-tag {
font-weight: bold; }
.pricing-table__price-currency {
font-style: italic; }
.pricing-table--current {
background-color: #2e3d4c; }
.pricing-table--current .pricing-table__options {
border-top: 1px solid #35495d; }
.pricing-table--current .pricing-table__price {
background-color: #35495d; }
.pricing-form {
text-align: center;
background-color: #e5e5e5;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px; }
.pricing-form__close {
position: absolute;
top: 6px;
right: 6px;
cursor: pointer; }
/* entire container, keeps perspective */
.flip-animation {
perspective: 1000;
-webkit-perspective: 1000; }
/* flip the pane */
.flip-animation--turn .flip-animation__container, .flip-animation--turn .flip-animation__container {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg); }
/* flip speed goes here */
.flip-animation__container {
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-ms-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative; }
/* hide back of pane during swap */
.flip-animation__front, .flip-animation__back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden; }
/* front pane, placed above back */
.flip-animation__front {
z-index: 2; }
/* back, initially hidden pane */
.flip-animation__back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
width: 100%;
position: absolute;
top: 0;
bottom: 0;
right: 0; }
.progress {
overflow: hidden; }
.progress__container {
overflow: hidden;
height: 23px;
background-color: #e5e5e5; }
.progress__bar {
height: 100%;
position: relative;
background-color: #35495d;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
transition: all ease 0.3s; }
.progress__bar--full {
background-color: #fb8950; }
.progress__count {
position: absolute;
right: 0;
color: #ffffff;
white-space: nowrap; }
.progress__count--right {
right: auto;
left: 100%;
color: #5b5b5b; }
.progress__total {
float: right; }
.progress__count, .progress__total {
padding: 0 3px; }
.header__nav {
padding-top: 10px; }
.header__nav a {
color: #5b5b5b; }
.header__nav a:visited {
color: #5b5b5b; }
.header__nav a:hover {
color: #5b5b5b; }
.header__nav li {
border-bottom: 0px solid #fb8950;
-webkit-transition: border-width 0.2s;
-moz-transition: border-width 0.2s;
-ms-transition: border-width 0.2s;
-o-transition: border-width 0.2s;
transition: border-width 0.2s; }
.header__nav li.a-current-page, .header__nav li.a-ancestor, .header__nav li:hover {
border-bottom-width: 2px; }
.ie-error {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 200; }
.ie-error--close {
position: absolute;
top: 5px;
right: 5px; }
.ie-error--background {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #5b5b5b;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7; }
.ie-error--message {
position: absolute;
top: 200px;
left: 50%;
width: 700px;
margin-left: -350px;
padding: 23px;
background-color: #ffffff;
border: 1px solid #5b5b5b; }
.bg--blue-dark th {
border-right: 1px solid white; }
.table-responsive {
overflow-x: auto;
min-height: 0.01%; }
@media (max-width: 767px) {
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #dddddd; }
.table-responsive > .table {
margin-bottom: 0; }
.table-responsive > .table > thead > tr > th,
.table-responsive > .table > tbody > tr > th,
.table-responsive > .table > tfoot > tr > th,
.table-responsive > .table > thead > tr > td,
.table-responsive > .table > tbody > tr > td,
.table-responsive > .table > tfoot > tr > td {
white-space: nowrap; } }
/*------------------------------------*\
@LAYOUT
\*------------------------------------*/
body {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow-x: auto; }
.first-level-nav, .second-level-nav, .content {
transition-duration: 0.5s; }
.navbar-close .header {
transition-duration: 0.3s; }
.header__contact-help > div {
font-size: 16px;
line-height: 30px;
border-right: 1px solid #5b5b5b;
margin-top: 20px;
padding-right: 20px;
margin-right: 7px;
cursor: pointer; }
.header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
min-width: inherit;
background-color: #ffffff;
padding-left: 230px;
z-index: 100;
transition-duration: 0.5s; }
.header .header__plan > a {
padding: 1px 15px; }
.header .dropdown--header .dropdown--name {
font-size: 16px; }
.header .dropdown--header .dropdown-caret {
line-height: 68px; }
.logo {
display: inline-block;
width: 170px;
height: 50px;
margin-top: 10px;
transition-duration: 0.3s;
background-repeat: no-repeat; }
.container-logo {
height: 70px; }
.header__plan {
line-height: 70px; }
.header__plan * {
line-height: 23px; }
.header__plan .time-remaining {
margin-right: 5px; }
.wrapper {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: auto;
min-width: inherit;
margin: 0;
padding: 0;
overflow: hidden; }
.wrapper--center {
max-width: 1900px;
margin: 0 auto;
overflow: scroll; }
.first-level-nav .media, .second-level-nav .media {
margin: 0; }
.first-level-nav .nav-header, .second-level-nav .nav-header {
display: block;
width: 100%;
height: 72px; }
.first-level-nav .nav-footer, .second-level-nav .nav-footer {
display: block;
width: 100%;
height: 46px;
position: absolute;
bottom: 0; }
.story__photo-account {
width: 40px; }
.story__name-account {
display: inline-block;
vertical-align: text-bottom;
padding-bottom: 13px;
margin-bottom: 0;
margin-left: 5px; }
.first-level-nav {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 230px;
background-color: #35495d;
z-index: 101; }
.first-level-nav .a-logo {
margin-left: auto;
margin-right: auto;
display: table; }
.first-level-nav a, .first-level-nav a:hover, .first-level-nav a:visited {
color: #ffffff;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden; }
.first-level-nav .btn--discrete {
min-width: 175px; }
.first-level-nav .btn--discrete:hover, .first-level-nav .btn--discrete:visited {
color: #172023 !important; }
.first-level-nav .dropdown-menu {
background-color: #172023;
color: #ffffff; }
.first-level-nav .dropdown--split-rev {
height: 72px;
transition-duration: 0.3s; }
.first-level-nav .dropdown--split-rev .dropdown-text {
background-color: #253341;
line-height: 72px; }
.first-level-nav .dropdown--split-rev .dropdown-icon {
background: #1a242e;
line-height: 72px; }
.first-level-nav .dropdown--split-rev .dropdown-menu {
background: #1a242e; }
.first-level-nav .scroll-container {
position: absolute;
top: 142px;
right: 0;
bottom: 0;
left: 0;
padding-bottom: 30px; }
.first-level-nav .scroll-container hr {
width: 70%;
margin: 0 auto 2.64286rem auto;
border: 1px solid #293948;
border-top: none; }
.first-level-nav .nav-footer {
background-color: #1e272a; }
.social-account__name {
display: block;
position: relative;
padding: 15px 0px; }
.nav > .active > .social-account__name {
background-color: #2e3d4c;
color: #ffffff; }
.nav > .active > .social-account__name .social-account__img {
border-color: #ffffff; }
.social-account__name__text {
display: inline-block;
padding-left: 10px;
padding-right: 0;
width: unset;
height: 46px;
overflow: hidden;
vertical-align: middle;
line-height: 46px;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 140px; }
.social-account__img {
display: inline-block;
border: none;
vertical-align: middle;
width: 40px;
height: 40px;
margin-left: 8px; }
.social-account__icon {
position: absolute;
right: 10px;
line-height: 46px;
width: 23px;
text-align: center; }
.social-account__links {
display: block;
height: 0;
overflow: hidden;
margin-left: 23px;
padding-left: 3px;
text-transform: uppercase;
font-size: 13px;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
-ms-transition: height 0.3s;
-o-transition: height 0.3s;
transition: height 0.3s; }
.active .social-account__links {
height: 84px; }
.social-account__links li a {
margin: 3px 0;
padding-left: 5px; }
.social-account__links li a:hover {
color: #fb8950; }
.social-account__links li a i {
margin-right: 8px;
width: 20px;
display: inline-block; }
.social-account__links li.active > a {
color: #fb8950;
font-weight: 500; }
.second-level-nav {
position: absolute;
top: 70px;
right: 0;
bottom: 0;
left: 230px;
width: 345px;
background-color: #f3f3f3;
box-shadow: inset -1px 0px #e5e5e5; }
.second-level-nav .nav-header {
background-color: #249fc6;
height: 72px;
overflow: hidden; }
.second-level-nav .nav-header .btn--disabled, .second-level-nav .nav-header .loading-form .btn, .loading-form .second-level-nav .nav-header .btn, .second-level-nav .nav-header .btn.loading {
color: #fff;
border-color: #fff;
opacity: 0.7; }
.second-level-nav .nav-filter {
height: 55px;
position: relative; }
.second-level-nav .nav-filter input {
width: 100%;
margin: 0;
height: 55px;
border-radius: 0;
font-size: 16px; }
.second-level-nav .nav-filter > span, .second-level-nav .nav-filter > a {
position: absolute;
right: 10px;
top: 9px;
background-color: white;
width: 23px;
height: 42px;
display: block;
padding: 6px;
font-size: 15px; }
.second-level-nav .label-radio-filter {
display: inline-block;
padding: 9px;
width: 49%;
text-align: center;
margin: auto; }
.navbar-close .second-level-nav .label-radio-filter {
display: none; }
.second-level-nav .radio-input-filterApp {
display: none; }
.second-level-nav .scroll-container {
position: absolute;
top: 127px;
right: 0;
bottom: 0;
left: 0; }
.second-level-nav li > a {
border-bottom: 1px solid #e5e5e5; }
.second-level-nav li:first-child > a {
border-top: 1px solid #e5e5e5; }
.second-level-nav .application-item {
position: relative;
overflow: hidden;
-webkit-box-shadow: inset 4px 0 0 0 #5b5b5b;
-moz-box-shadow: inset 4px 0 0 0 #5b5b5b;
-ms-box-shadow: inset 4px 0 0 0 #5b5b5b;
-o-box-shadow: inset 4px 0 0 0 #5b5b5b;
box-shadow: inset 4px 0 0 0 #5b5b5b; }
.second-level-nav .application-item.active {
-webkit-box-shadow: inset 400px 0 0 0 #5b5b5b;
-moz-box-shadow: inset 400px 0 0 0 #5b5b5b;
-ms-box-shadow: inset 400px 0 0 0 #5b5b5b;
-o-box-shadow: inset 400px 0 0 0 #5b5b5b;
box-shadow: inset 400px 0 0 0 #5b5b5b;
color: #ffffff; }
.second-level-nav .application-item.active .application-item__subtitle {
color: #ffffff; }
.second-level-nav .application-item.active .application-item__date {
color: #ffffff; }
.second-level-nav .application-item.beginned {
-webkit-box-shadow: inset 4px 0 0 0 #66bb6a;
-moz-box-shadow: inset 4px 0 0 0 #66bb6a;
-ms-box-shadow: inset 4px 0 0 0 #66bb6a;
-o-box-shadow: inset 4px 0 0 0 #66bb6a;
box-shadow: inset 4px 0 0 0 #66bb6a; }
.second-level-nav .application-item.beginned.active {
-webkit-box-shadow: inset 400px 0 0 0 #66bb6a;
-moz-box-shadow: inset 400px 0 0 0 #66bb6a;
-ms-box-shadow: inset 400px 0 0 0 #66bb6a;
-o-box-shadow: inset 400px 0 0 0 #66bb6a;
box-shadow: inset 400px 0 0 0 #66bb6a; }
.second-level-nav .application-item.beginned:not(.active):hover {
-webkit-box-shadow: inset 7px 0 0 0 #66bb6a;
-moz-box-shadow: inset 7px 0 0 0 #66bb6a;
-ms-box-shadow: inset 7px 0 0 0 #66bb6a;
-o-box-shadow: inset 7px 0 0 0 #66bb6a;
box-shadow: inset 7px 0 0 0 #66bb6a; }
.second-level-nav .application-item.finished {
-webkit-box-shadow: inset 4px 0 0 0 #de594b;
-moz-box-shadow: inset 4px 0 0 0 #de594b;
-ms-box-shadow: inset 4px 0 0 0 #de594b;
-o-box-shadow: inset 4px 0 0 0 #de594b;
box-shadow: inset 4px 0 0 0 #de594b; }
.second-level-nav .application-item.finished.active {
-webkit-box-shadow: inset 400px 0 0 0 #de594b;
-moz-box-shadow: inset 400px 0 0 0 #de594b;
-ms-box-shadow: inset 400px 0 0 0 #de594b;
-o-box-shadow: inset 400px 0 0 0 #de594b;
box-shadow: inset 400px 0 0 0 #de594b; }
.second-level-nav .application-item.finished:not(.active):hover {
-webkit-box-shadow: inset 7px 0 0 0 #de594b;
-moz-box-shadow: inset 7px 0 0 0 #de594b;
-ms-box-shadow: inset 7px 0 0 0 #de594b;
-o-box-shadow: inset 7px 0 0 0 #de594b;
box-shadow: inset 7px 0 0 0 #de594b; }
.second-level-nav .application-item.come-up {
-webkit-box-shadow: inset 4px 0 0 0 #fb8950;
-moz-box-shadow: inset 4px 0 0 0 #fb8950;
-ms-box-shadow: inset 4px 0 0 0 #fb8950;
-o-box-shadow: inset 4px 0 0 0 #fb8950;
box-shadow: inset 4px 0 0 0 #fb8950; }
.second-level-nav .application-item.come-up.active {
-webkit-box-shadow: inset 400px 0 0 0 #fb8950;
-moz-box-shadow: inset 400px 0 0 0 #fb8950;
-ms-box-shadow: inset 400px 0 0 0 #fb8950;
-o-box-shadow: inset 400px 0 0 0 #fb8950;
box-shadow: inset 400px 0 0 0 #fb8950; }
.second-level-nav .application-item.come-up:not(.active):hover {
-webkit-box-shadow: inset 7px 0 0 0 #fb8950;
-moz-box-shadow: inset 7px 0 0 0 #fb8950;
-ms-box-shadow: inset 7px 0 0 0 #fb8950;
-o-box-shadow: inset 7px 0 0 0 #fb8950;
box-shadow: inset 7px 0 0 0 #fb8950; }
.second-level-nav .application-item.no-config {
-webkit-box-shadow: inset 4px 0 0 0 #5b5b5b;
-moz-box-shadow: inset 4px 0 0 0 #5b5b5b;
-ms-box-shadow: inset 4px 0 0 0 #5b5b5b;
-o-box-shadow: inset 4px 0 0 0 #5b5b5b;
box-shadow: inset 4px 0 0 0 #5b5b5b; }
.second-level-nav .application-item.no-config.active {
-webkit-box-shadow: inset 400px 0 0 0 #5b5b5b;
-moz-box-shadow: inset 400px 0 0 0 #5b5b5b;
-ms-box-shadow: inset 400px 0 0 0 #5b5b5b;
-o-box-shadow: inset 400px 0 0 0 #5b5b5b;
box-shadow: inset 400px 0 0 0 #5b5b5b; }
.second-level-nav .application-item.no-config:not(.active):hover {
-webkit-box-shadow: inset 7px 0 0 0 #5b5b5b;
-moz-box-shadow: inset 7px 0 0 0 #5b5b5b;
-ms-box-shadow: inset 7px 0 0 0 #5b5b5b;
-o-box-shadow: inset 7px 0 0 0 #5b5b5b;
box-shadow: inset 7px 0 0 0 #5b5b5b; }
.second-level-nav .application-item__icon {
display: block;
position: absolute;
top: 16px;
left: 15px;
line-height: 40px;
width: 40px; }
.second-level-nav .application-item__body {
display: block;
width: 100%;
height: 74px;
padding-left: 61px;
padding-top: 7px; }
.second-level-nav .application-item__title {
display: block;
width: 100%; }
.second-level-nav .application-item__subtitle {
display: block;
width: 100%;
color: #5b5b5b;
font-style: italic;
line-height: 11.5px;
margin-top: -3px;
opacity: .8; }
.second-level-nav .application-item__date {
color: #5b5b5b;
line-height: 11.5px;
margin-right: 12px;
opacity: .8;
float: right; }
.second-level-nav .caret {
float: right; }
.second-level-nav .third-level-nav {
border-bottom: 1px solid #e5e5e5;
transform: translateY(-1px);
margin-bottom: -1px !important; }
.second-level-nav .third-level-nav li a .application-item__icon {
width: 30px;
margin-top: 4px; }
.second-level-nav .third-level-nav .subapplication--add {
background-color: #5B5B5B;
overflow: hidden; }
.second-level-nav .third-level-nav .subapplication--add a {
color: #FFFFFF; }
.second-level-nav .third-level-nav .subapplication--add hr {
margin: 0 auto;
width: 70%;
border: none;
border-bottom: 1px solid #e5e5e5; }
.second-level-nav .third-level-nav .application-item__icon {
top: 1px; }
.second-level-nav .third-level-nav .application-item__body {
height: 40px;
line-height: 22px; }
.second-level-nav .third-level-nav .application-item__date {
margin-top: -8px; }
.content {
border-top: 4px solid #249fc6;
position: absolute;
top: 70px;
right: 0;
bottom: 0;
left: 575px; }
.content:after, .content::after {
top: 122px; }
.content__loading {
visibility: hidden;
opacity: 0;
position: absolute;
width: 50px;
height: 50px;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
background: transparent url(../img/loader.gif) center no-repeat;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px; }
.content.loading .content__loading {
visibility: visible;
opacity: 1; }
.content__header {
position: absolute;
top: 0;
right: 0;
left: 0; }
.content__header .nav {
margin-bottom: 0; }
.content__header hr {
border: none;
border-bottom: 1px solid #e5e5e5;
margin: 0 auto;
width: 90%; }
.content__header__first-line {
height: 68px;
background-color: #ffffff; }
.content__header__first-line .content__header__switch {
margin-right: 30px; }
.content__header__first-line .content__header__switch .toggle-switch {
line-height: 30px;
text-transform: uppercase;
font-size: 16px;
transition-duration: 1s; }
.content__header__first-line .content__header__switch .toggle-switch.off .toggle-switch__slider:after {
top: 6px;
left: 7px; }
.content__header__first-line .float--right .content__header__title.delta.float--right:hover, .content__header__first-line .float--right .separator--top legend.content__header__title.float--right:hover, .separator--top .content__header__first-line .float--right legend.content__header__title.float--right:hover, .content__header__first-line .float--right .content__header__title.float--right.modal__header:hover, .content__header__first-line .float--right .content__header__title.float--right.content__header__switch:hover, .content__header__first-line .float--right .content__header__title.float--right.pricing-table__price-tag:hover {
color: #249fc6; }
.content__header__title {
margin: 0 10px 0 0;
padding: 0 10px;
height: 100%;
max-width: 43%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 68px;
vertical-align: middle; }
.content__header__title .icon-chevron-right {
opacity: 0.5; }
.content__header__title.float--left.delta i, .separator--top legend.content__header__title.float--left i, .content__header__title.float--left.modal__header i, .content__header__title.float--left.content__header__switch i, .content__header__title.float--left.pricing-table__price-tag i {
font-size: 15px; }
.content__header__second-line {
background-color: #ffffff;
padding-top: 8px; }
.content__header__second-line .nav {
margin-bottom: 0; }
.content__header__second-line .nav a {
height: 45px;
text-transform: uppercase;
font-weight: bold;
padding-left: 0;
padding-right: 0;
margin-right: 35px; }
.content__header__second-line .nav a:hover {
box-shadow: inset 0px -4px 0 0 #fb8950; }
.content__header__second-line .nav .active a {
box-shadow: inset 0px -4px 0 0 #fb8950;
background: transparent; }
.content__body {
position: absolute;
top: 123px;
right: 0;
bottom: 0;
left: 0; }
/*------------------------------------*\
@SPLASHSCREEN
\*------------------------------------*/
.splashscreen {
background-color: #ffffff;
overflow: hidden;
z-index: 9999; }
.splashscreen__content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); }
.splashscreen__loading {
font-weight: 500;
font-size: 37px;
text-transform: uppercase;
color: #2e3d4c;
text-align: center; }
.splashscreen__loader {
text-align: center;
display: flex; }
.splashscreen__loader .main-loader {
--path: #2e3d4c;
--dot: #e97750;
--duration: 3s;
width: 44px;
height: 44px;
position: relative;
margin: 0 20px; }
.splashscreen__loader .main-loader:before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
position: absolute;
display: block;
background: var(--dot);
top: 37px;
left: 19px;
transform: translate(-18px, -18px);
animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite; }
.splashscreen__loader .main-loader svg {
display: block;
width: 100%;
height: 100%; }
.splashscreen__loader .main-loader svg rect,
.splashscreen__loader .main-loader svg polygon,
.splashscreen__loader .main-loader svg circle {
fill: none;
stroke: var(--path);
stroke-width: 10px;
stroke-linejoin: round;
stroke-linecap: round; }
.splashscreen__loader .main-loader svg polygon {
stroke-dasharray: 145 76 145 76;
stroke-dashoffset: 0;
animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite; }
.splashscreen__loader .main-loader svg rect {
stroke-dasharray: 192 64 192 64;
stroke-dashoffset: 0;
animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite; }
.splashscreen__loader .main-loader svg circle {
stroke-dasharray: 150 50 150 50;
stroke-dashoffset: 75;
animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite; }
.splashscreen__loader .main-loader.triangle {
width: 48px; }
.splashscreen__loader .main-loader.triangle:before {
left: 21px;
transform: translate(-10px, -18px);
animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite; }
@keyframes pathTriangle {
33% {
stroke-dashoffset: 74; }
66% {
stroke-dashoffset: 147; }
100% {
stroke-dashoffset: 221; } }
@keyframes dotTriangle {
33% {
transform: translate(0, 0); }
66% {
transform: translate(10px, -18px); }
100% {
transform: translate(-10px, -18px); } }
@keyframes pathRect {
25% {
stroke-dashoffset: 64; }
50% {
stroke-dashoffset: 128; }
75% {
stroke-dashoffset: 192; }
100% {
stroke-dashoffset: 256; } }
@keyframes dotRect {
25% {
transform: translate(0, 0); }
50% {
transform: translate(18px, -18px); }
75% {
transform: translate(0, -36px); }
100% {
transform: translate(-18px, -18px); } }
@keyframes pathCircle {
25% {
stroke-dashoffset: 125; }
50% {
stroke-dashoffset: 175; }
75% {
stroke-dashoffset: 225; }
100% {
stroke-dashoffset: 275; } }
.splashscreen__loader .loader {
display: inline-block;
margin: 0 16px; }
.splashscreen__loader html {
-webkit-font-smoothing: antialiased; }
.splashscreen__loader * {
box-sizing: border-box; }
.splashscreen__loader *:before, .splashscreen__loader *:after {
box-sizing: border-box; }
.splashscreen__loader body {
min-height: 100vh;
background: #F5F9FF;
display: flex;
justify-content: center;
align-items: center; }
.splashscreen__loader body .dribbble {
position: fixed;
display: block;
right: 20px;
bottom: 20px; }
.splashscreen__loader body .dribbble img {
display: block;
height: 28px; }
/*------------------------------------*\
@LOGIN
\*------------------------------------*/
.login-container {
background-image: linear-gradient(40deg, #fc6076 0%, #ff9a44 100%);
display: flex;
padding: 15px; }
.login-container.fullscreen {
overflow: auto; }
.login-container .login-block,
.login-container .register-block {
vertical-align: middle;
display: block;
padding: 40px;
margin: auto;
position: relative;
border-radius: 4px;
background-color: #ffffff; }
.login-container .login-block .login-logo,
.login-container .register-block .login-logo {
width: 150px;
margin: auto;
display: flex;
margin-top: -35px; }
.login-container .login-block .register-logo,
.login-container .register-block .register-logo {
width: 150px;
margin: -12px 0 0 -16px; }
.login-container .login-block .loginLanguage,
.login-container .register-block .loginLanguage {
top: 5px;
right: -2px;
position: absolute; }
.login-container .login-block .btn,
.login-container .register-block .btn {
margin-top: 5px;
color: #fff;
font-size: 16px;
line-height: 24px;
padding: 10px 15px;
text-overflow: ellipsis;
max-width: 314px;
margin: auto;
display: block; }
.login-container .login-block hr,
.login-container .register-block hr {
width: 140px;
border: 1px solid #e9e9e9;
margin: 20px auto; }
.login-container .login-block h2,
.login-container .register-block h2 {
color: #fb8950;
font-size: 18px;
font-weight: 700;
line-height: 28px;
text-transform: uppercase; }
.login-container .login-block form .btn,
.login-container .register-block form .btn {
background: #fb8950;
margin-bottom: 20px;
margin-top: 40px;
transition-duration: 0.5s; }
.login-container .login-block form .btn:hover,
.login-container .register-block form .btn:hover {
background: #e97750; }
.login-container .login-block form .btn .icon,
.login-container .register-block form .btn .icon {
font-family: FontAwesomeOld;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased; }
.login-container .login-block .loading-form .btn,
.login-container .login-block .btn .loading,
.login-container .register-block .loading-form .btn,
.login-container .register-block .btn .loading {
border: none;
border-radius: 4px;
background: #e97750;
opacity: 0.7; }
.login-container .login-block p,
.login-container .register-block p {
margin-bottom: 0; }
.login-container .login-block p.small,
.login-container .register-block p.small {
line-height: 13px;
margin-bottom: 5px; }
.login-container .login-block .grid, .login-container .login-block ul.thumbnails.image_picker_selector, .login-container .login-block .datetime-wrapper,
.login-container .register-block .grid,
.login-container .register-block ul.thumbnails.image_picker_selector,
.login-container .register-block .datetime-wrapper {
display: inline; }
.login-container .login-block {
width: 396px; }
.login-container .register-block {
width: 900px; }
.login-container .form-group > label,
.login-container .form-group .control-label {
font-size: 12px;
opacity: 0.5;
margin-bottom: 0; }
.login-container .form .form-group > label,
.login-container .form-inline .form-group > label {
position: absolute;
top: 0;
left: 0; }
.login-container .form-control-static {
font-size: 16px; }
.login-container .has-feedback label ~ .form-control-feedback,
.login-container .form-control-feedback {
top: auto;
bottom: 0; }
.login-container .form-control,
.login-container .selectize-input {
padding: 0;
height: 37px;
border-left: none;
border-right: none;
border-top: none;
border-bottom-color: rgba(12, 12, 12, 0.12);
background: transparent;
color: #333;
font-size: 16px;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0; }
.login-container .form-control.placeholder,
.login-container .selectize-input.placeholder {
color: #969c9c; }
.login-container .form-control.placeholder option,
.login-container .selectize-input.placeholder option {
color: #0c0c0c; }
.login-container .form-control[disabled],
.login-container .form-control[readonly],
.login-container fieldset[disabled] .form-control,
.login-container .selectize-input[disabled],
.login-container .selectize-input[readonly],
.login-container fieldset[disabled] .selectize-input {
background-color: transparent;
border-bottom-color: rgba(12, 12, 12, 0.2);
border-bottom-style: dashed; }
.login-container .form-control[disabled]::-moz-placeholder,
.login-container .form-control[readonly]::-moz-placeholder,
.login-container fieldset[disabled] .form-control::-moz-placeholder,
.login-container .selectize-input[disabled]::-moz-placeholder,
.login-container .selectize-input[readonly]::-moz-placeholder,
.login-container fieldset[disabled] .selectize-input::-moz-placeholder {
color: #b0b5b4;
opacity: 1; }
.login-container .form-control[disabled]:-ms-input-placeholder,
.login-container .form-control[readonly]:-ms-input-placeholder,
.login-container fieldset[disabled] .form-control:-ms-input-placeholder,
.login-container .selectize-input[disabled]:-ms-input-placeholder,
.login-container .selectize-input[readonly]:-ms-input-placeholder,
.login-container fieldset[disabled] .selectize-input:-ms-input-placeholder {
color: #b0b5b4; }
.login-container .form-control[disabled]::-webkit-input-placeholder,
.login-container .form-control[readonly]::-webkit-input-placeholder,
.login-container fieldset[disabled] .form-control::-webkit-input-placeholder,
.login-container .selectize-input[disabled]::-webkit-input-placeholder,
.login-container .selectize-input[readonly]::-webkit-input-placeholder,
.login-container fieldset[disabled] .selectize-input::-webkit-input-placeholder {
color: #b0b5b4; }
.login-container .form-control[disabled] ~ label:after,
.login-container .form-control[readonly] ~ label:after,
.login-container fieldset[disabled] .form-control ~ label:after,
.login-container .form-control[disabled] ~ .form-control-line:after,
.login-container .form-control[readonly] ~ .form-control-line:after,
.login-container fieldset[disabled] .form-control ~ .form-control-line:after,
.login-container .selectize-input[disabled] ~ label:after,
.login-container .selectize-input[readonly] ~ label:after,
.login-container fieldset[disabled] .selectize-input ~ label:after,
.login-container .selectize-input[disabled] ~ .form-control-line:after,
.login-container .selectize-input[readonly] ~ .form-control-line:after,
.login-container fieldset[disabled] .selectize-input ~ .form-control-line:after {
display: none; }
.login-container textarea.form-control,
.login-container textarea.selectize-input {
padding: 4px 0 4px 0; }
.login-container textarea.autosize {
min-height: 38px; }
.login-container .form .form-group,
.login-container .form-inline .form-group {
padding-top: 16px; }
.login-container .form-group {
position: relative;
margin-bottom: 19px; }
.login-container .form-group .form-control:not(.static) ~ label,
.login-container .form-group .form-control:not(.static) ~ .form-control-line,
.login-container .form-group .selectize-input:not(.static) ~ label,
.login-container .form-group .selectize-input:not(.static) ~ .form-control-line {
-webkit-transition: 0.2s ease all;
-o-transition: 0.2s ease all;
transition: 0.2s ease all; }
.login-container .form-group .form-control ~ label,
.login-container .form-group .form-control ~ .form-control-line,
.login-container .form-group .selectize-input ~ label,
.login-container .form-group .selectize-input ~ .form-control-line {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
pointer-events: none; }
.login-container .form-group .form-control ~ label:after,
.login-container .form-group .form-control ~ .form-control-line:after,
.login-container .form-group .selectize-input ~ label:after,
.login-container .form-group .selectize-input ~ .form-control-line:after {
content: '';
position: absolute;
bottom: 0;
left: 45%;
height: 2px;
width: 10px;
visibility: hidden;
background-color: #fb8950;
-webkit-transition: 0.2s ease all;
-o-transition: 0.2s ease all;
transition: 0.2s ease all; }
.login-container .form-group .form-control ~ label,
.login-container .form-group .selectize-input ~ label {
top: 0;
margin-bottom: 0;
font-size: 12px;
opacity: 0.5; }
.login-container .form-group .form-control:focus,
.login-container .form-group .form-control.focus {
border-color: transparent;
box-shadow: none; }
.login-container .form-group .form-control:focus ~ label,
.login-container .form-group .form-control.focus ~ label {
color: #fb8950;
opacity: 1; }
.login-container .form-group .form-control:focus ~ label:after,
.login-container .form-group .form-control:focus ~ .form-control-line:after,
.login-container .form-group .form-control.focus ~ label:after,
.login-container .form-group .form-control.focus ~ .form-control-line:after {
visibility: visible;
width: 100%;
left: 0; }
.login-container .floating-label.form-group {
margin-bottom: 30px; }
.login-container .floating-label .form-control ~ label,
.login-container .floating-label .form-control ~ label {
top: 19px;
font-size: 16px;
margin-top: -12px; }
.login-container .floating-label .form-control:focus ~ label,
.login-container .floating-label .form-control.dirty ~ label,
.login-container .floating-label .form-control.focus ~ label {
top: 0px;
font-size: 12px !important; }
.login-container .floating-label .control-label {
font-weight: 500 !important; }
.login-container .selectize-control .selectize-dropdown {
border-color: #fb8950; }
.login-container .selectize-control .selectize-input:not(.focus) {
line-height: 36px;
height: 50px; }
.login-container .selectize-control .selectize-input.focus {
border-radius: 0;
border: none;
border-bottom: 2px solid #fb8950;
border-color: #fb8950 !important;
/*background: none;*/
padding-left: 0;
/*height: 35px;*/
margin-top: 2px;
height: 48px; }
.login-container .selectize-control .selectize-input.focus:before {
content: "Pays*";
top: 5px;
font-size: 12px;
color: #fb8950; }
.login-container .selectize-control .selectize-input {
padding-top: 20px !important;
padding-bottom: 0;
top: -14px;
z-index: 99; }
.login-container .selectize-control .selectize-input:after {
top: 70%; }
.login-container label.control-label[for="signup_country"] {
transition-duration: 0s !important; }
.login-container .intl-tel-input {
display: block; }
.login-container .intl-tel-input .form-control:not(:focus):not(.dirty) ~ label.control-label {
padding-left: 50px; }
input[readonly] {
background-color: #e5e5e5;
border-color: transparent; }
input[readonly][id*=date-picker].picker__input {
background-color: #ffffff;
border-color: #e5e5e5; }
input[readonly][id*=date-picker].picker__input:focus {
background-color: #ffffff;
border-color: #35495d; }
select {
border: 2px solid #e5e5e5;
padding: 8px 10px 9px 10px;
margin: -1px;
background-color: #ffffff;
color: #303538;
text-indent: 1px;
vertical-align: middle;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-ms-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s; }
select:focus {
outline: 0;
border-color: #35495d;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-ms-box-shadow: none;
-o-box-shadow: none;
box-shadow: none; }
@media (max-width: 396px) {
.login-container .login-block {
width: 100%; } }
/*------------------------------------*\
@MODAL_APPLICATION
\*------------------------------------*/
.app {
height: 50px; }
/*------------------------------------*\
@SOCIAL_FEED
\*------------------------------------*/
.feed {
position: relative; }
.feed__timeline-container {
position: absolute;
top: 20px;
bottom: 0;
left: 19px;
width: 20px;
text-align: center;
margin: 0 auto;
cursor: none; }
.feed__timeline {
margin: 0 auto;
display: block;
height: 100%;
width: 0;
border-right: 3px solid #35495d; }
.feed__timeline--end {
height: 30px;
border-right: 3px dotted #35495d; }
.feed__story-container {
margin-top: 20px; }
.feed__story {
position: relative;
border: 2px solid #e5e5e5;
overflow: hidden;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px; }
.story__picture {
position: relative;
float: left;
margin-top: 10px; }
.story__picture img {
width: 56px;
height: 56px; }
.story__headline {
display: inline-block;
padding: 15px 15px 0; }
.story__actions {
position: absolute;
top: 15px;
right: 15px; }
.story__message {
padding: 15px; }
.story__attachments {
padding: 15px; }
.story__external-image {
display: block;
float: left;
width: 112px;
height: 112px;
margin-right: 10px;
line-height: 115px;
vertical-align: middle;
text-align: center;
overflow: hidden; }
.story__external-image--scaled {
float: none;
width: 100%;
height: auto;
max-height: 300px;
line-height: inherit; }
.story__external-image--scaled img {
height: auto; }
.story__attachment-wrapper {
height: 112px;
overflow: hidden; }
.story__attachment-title {
font-size: 12px;
line-height: 16px; }
.story__attachment-caption {
font-style: italic;
font-size: 10px;
line-height: 14px; }
.story__attachment-description {
font-size: 12px;
line-height: 16px; }
.story__footer {
font-size: 12px;
line-height: 16px;
clear: both;
padding: 5.75px; }
/*------------------------------------*\
@APPLICATION_SETTINGS
\*------------------------------------*/
.application__admin-panel__data img {
max-width: 100px;
max-height: 100px; }
.application-form__embedded .embedded-field, .application-form__embedded .embedded-field fieldset {
position: relative; }
.application-form__embedded .grid__item.three-eighths .block-list, .application-form__embedded ul.thumbnails.image_picker_selector li.three-eighths .block-list, ul.thumbnails.image_picker_selector .application-form__embedded li.three-eighths .block-list, .application-form__embedded .three-eighths.date-picker-wrapper .block-list, .application-form__embedded .three-eighths.time-picker-wrapper .block-list {
overflow-y: scroll;
max-height: 800px; }
.embedded-field__icons {
position: absolute;
top: 5px;
right: 10px; }
.text-or-file {
height: 37px;
position: relative; }
.text-or-file-container {
width: 20px;
height: 20px;
position: absolute;
top: -1px;
right: 7px;
font-size: 20px; }
/*------------------------------------*\
@GOOGLE_TRANSLATE
\*------------------------------------*/
#google_translate_element {
position: absolute;
bottom: 0;
right: 0;
z-index: 9999; }
/*------------------------------------*\
@LANGUAGE_SELECTOR
\*------------------------------------*/
.loginLanguage {
display: inline-block;
padding-top: 19px; }
.headerLanguage {
margin-left: 30px;
margin-right: 0;
padding-top: 34px; }
.language-selector {
position: relative;
bottom: 10px;
right: 15px;
z-index: 900; }
.language-selector a {
transition: all 0.2s ease-in-out; }
.language-selector .language-selector__current {
display: block;
padding: 0 6px;
text-decoration: none; }
.language-selector .language-selector__container {
display: none;
position: absolute;
top: 100%;
left: 0px;
width: 100%;
border: 1px solid #ccc;
background: #ffffff;
overflow-x: auto; }
.language-selector .language-selector__container a {
display: block;
padding: 2px 5px; }
.language-selector .language-selector__container a:hover {
background-color: #f5f5f5; }
.language-selector .language-selector__container .language-selector__selected {
display: none; }
.language-selector:hover .language-selector__container {
display: block; }
/*------------------------------------*\
@CONTACT_US
\*------------------------------------*/
.contact-us {
position: fixed;
bottom: 0;
right: 200px;
width: 200px; }
.contact-us__content {
overflow: hidden;
width: 100%;
max-height: 0;
-webkit-transition: max-height ease-in 0.5s;
-moz-transition: max-height ease-in 0.5s;
-ms-transition: max-height ease-in 0.5s;
-o-transition: max-height ease-in 0.5s;
transition: max-height ease-in 0.5s; }
.contact-us__content--open {
max-height: 150px; }
/*------------------------------------*\
@TOGGLE NAVBAR
\*------------------------------------*/
.toggle-navbar {
height: 70px;
width: 45px;
display: inline-block;
padding: 5px 10px;
font-size: 2em; }
.navbar-close .first-level-nav {
width: 55px;
-webkit-transition: 0.3s all cubic-bezier(0.25, 0.46, 0.45, 0.94);
-moz-transition: 0.3s all cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: 0.3s all cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: 0.3s all cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: 0.3s all cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.navbar-close .first-level-nav .container-logo .logo {
margin-left: -2px;
width: 55px;
transform: scale(0.8); }
.navbar-close .first-level-nav .btn.btn--discrete {
padding: 0 8px;
line-height: 28px;
min-width: unset; }
.navbar-close .first-level-nav .dropdown--split-rev .dropdown-icon {
width: 55px; }
.navbar-close .second-level-nav {
left: 55px;
width: 55px;
-webkit-transition: 0.3s all cubic-bezier(0.25, 0.46, 0.45, 0.94);
-moz-transition: 0.3s all cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: 0.3s all cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: 0.3s all cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: 0.3s all cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.navbar-close .content {
left: 110px;
-webkit-transition: 0.3s all cubic-bezier(0.25, 0.46, 0.45, 0.94);
-moz-transition: 0.3s all cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: 0.3s all cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: 0.3s all cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: 0.3s all cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.navbar-close .header {
padding-left: 55px; }
.navbar-close .first-level-nav .dropdown-menu {
min-width: 200px; }
.navbar-close .first-level-nav .social-account__icon {
text-shadow: 0px 0px 2px #0d7090;
width: 10px;
line-height: 85px;
height: 48px;
text-align: right;
position: absolute;
top: -18px;
right: 5px;
margin-right: 2px;
font-size: 15px; }
.navbar-close .application-item__body {
opacity: 0; }
.navbar-close .hidden-close {
display: none; }
.navbar-close .social-account__links {
margin-left: 13px; }
.navbar-close .social-account__img {
margin-left: 7px; }
.navbar-close .nav-filter > span, .navbar-close .nav-filter > a {
/*position: absolute;
right: 2px;
top: 2px;*/
background-color: white;
width: 40px;
height: 36px;
display: block;
padding: 6px 14px; }
i[class^="icon-"], i[class*="icon-"] {
margin-right: 0; }
.content__header__first-line .toggle-switch .on {
left: -85px; }
.content__header__first-line .toggle-switch .off {
left: -50px; }
@media (max-width: 895px) {
.time-remaining {
display: none; } }
@media (max-height: 800px) {
.content__header .content__header__first-line {
height: 51px; }
.content__header .content__header__first-line .content__header__title {
line-height: 51px !important; }
.content__header .content__header__first-line .content__header__switch {
line-height: 46px; }
.content__header .content__header__second-line .nav li a {
height: 40px; }
.content__body {
top: 92px !important; }
.first-level-nav .dropdown {
height: 55px; }
.first-level-nav .dropdown .dropdown-text,
.first-level-nav .dropdown .dropdown-icon {
line-height: 55px; }
.first-level-nav .scroll-container {
top: 125px; }
.second-level-nav .nav-header {
height: 55px; }
.second-level-nav .scroll-container {
top: 110px; }
.second-level-nav .btn {
padding-right: 0.5em;
padding-left: 0.5em;
line-height: 2; } }
@media (max-width: 1400px) {
.btn--max-width {
max-width: 120px;
text-overflow: ellipsis; } }
@media (max-width: 1300px) {
.content__header__first-line .content__header__title {
margin: 0; }
.content__header__first-line .margin-right-header {
margin-right: 0; } }
@media (min-width: 768px) {
.content__header__second-line .nav .hidden-lg {
display: none; }
.navbar-close .toggle-navbar.hamburger {
padding-left: 17px; } }
@media (max-width: 365px) {
.headerLanguage {
margin-left: 0px; }
.headerLanguage .language-selector {
right: 0px; }
.logo {
width: 150px;
background-size: 150px;
margin-top: 12px; }
.second-level-nav .nav-header .btn {
width: 90%; }
.second-level-nav .nav-header .btn i.icon-plus {
position: absolute;
left: 8px;
top: 7px; }
.second-level-nav .nav-header .btn span {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: block;
padding-left: 18px; }
.float--right.dropdown--header .dropdown--user .dropdown-menu {
transform: translateX(-59px) !important; } }
@media (max-width: 767px) {
.navbar-close .first-level-nav .container-logo .logo {
width: 0px; }
.navbar-close .first-level-nav .dropdown--split-rev {
opacity: 0; }
.first-level-nav {
width: 50%; }
.first-level-nav .social-account__name__text {
max-width: 53%; }
.first-level-nav .scroll-container .nav--stacked, .first-level-nav .scroll-container .dropdown-menu {
margin-bottom: 10px; }
.second-level-nav {
left: 50%;
width: 50%; }
.navbar-close .second-level-nav .nav-header .btn.btn--discrete,
.navbar-close .second-level-nav .nav-header .btn.btn--disabled,
.navbar-close .second-level-nav .nav-header .loading-form .btn,
.loading-form .navbar-close .second-level-nav .nav-header .btn,
.navbar-close .second-level-nav .nav-header .btn.loading {
opacity: 0; }
.header {
padding-left: 50%; }
.navbar-close .header {
padding-left: 2px; }
.float--right.dropdown--header .dropdown--user {
min-width: 40px; }
.float--right.dropdown--header .dropdown--user .dropdown-menu {
transform: translateX(-17px); }
.float--right.dropdown--header .dropdown--user .dropdown--name {
display: none; }
.float--right.dropdown--header .dropdown--user .dropdown-caret {
display: none; }
.content__header__first-line {
height: 40px; }
.content__header__first-line .toggle-switch__toggles {
line-height: 20px; }
.content__header__first-line .toggle-switch__toggles span {
display: none; }
.content__header__first-line .toggle-switch {
margin-left: 13px;
vertical-align: middle; }
.content__header__second-line {
padding-top: 0; }
.content__header__second-line .nav li a {
height: 37px;
margin-right: 10px;
padding-left: 10px;
padding-right: 10px; }
.content__header__title {
height: 40px;
line-height: 40px; }
a.content__header__title {
margin-right: 0; }
.content__header__switch {
margin-right: 0 !important; }
.content__body {
top: 78px; }
.modal__dialog {
left: 0;
width: 100%;
margin-left: 0; }
/**
* Whole
*/
.one-whole, .date-picker-wrapper input, .time-picker-wrapper input,
.one-half,
.two-quarters,
.three-sixths,
.four-eighths,
.five-tenths,
.six-twelfths,
.date-picker-wrapper,
.time-picker-wrapper, .two-quarters, .three-sixths, .four-eighths, .five-tenths, .six-twelfths,
.one-third,
.two-sixths,
.four-twelfths, .two-sixths, .four-twelfths,
.two-thirds,
.four-sixths,
.eight-twelfths, .four-sixths, .eight-twelfths,
.one-quarter,
.two-eighths,
.three-twelfths,
ul.thumbnails.image_picker_selector li, .two-eighths, .three-twelfths,
.three-quarters,
.six-eighths,
.nine-twelfths, .six-eighths, .nine-twelfths,
.one-fifth,
.two-tenths, .two-tenths,
.two-fifths,
.four-tenths, .four-tenths,
.three-fifths,
.six-tenths, .six-tenths,
.four-fifths,
.eight-tenths, .eight-tenths,
.one-sixth,
.two-twelfths, .two-twelfths,
.five-sixths,
.ten-twelfths, .ten-twelfths,
.one-eighth,
.three-eighths,
.five-eighths,
.seven-eighths,
.one-tenth,
.three-tenths,
.seven-tenths,
.nine-tenths,
.one-twelfth,
.five-twelfths,
.seven-twelfths,
.eleven-twelfths {
width: 100%;
left: 0; }
.hidden-xs {
display: none; }
.navbar-close .first-level-nav {
width: 0; }
.navbar-close .second-level-nav {
left: 0;
width: 0; }
.navbar-close .second-level-nav .nav-filter {
display: none; }
.content {
left: 100%;
min-width: 100%; }
.navbar-close .content {
left: 0; }
.island {
padding: 24px 10px; }
.margin-right-header {
margin-right: 0px; } }
@media (min-width: 768px) and (max-height: 800px) {
.content__body {
top: 102px !important; }
.content__header__switch {
line-height: 33px !important; } }
@media (max-width: 767px) and (min-height: 801px) {
.content__header__switch {
line-height: 36px !important; } }
@media (max-width: 385px) {
.content__header__title {
max-width: 38% !important; } }
@media (min-width: 768px) {
.content {
min-width: 678px; }
.visible-xs {
display: none; }
.navbar-close .second-level-nav .soft-scroll {
overflow: visible; }
.navbar-close .second-level-nav .application-item .application-item__icon {
left: 10px; }
.navbar-close .second-level-nav .third-level-nav .application-item:hover .application-item__icon {
width: 30px;
top: 3px; }
.navbar-close .second-level-nav .application-item:hover {
width: 300px;
z-index: 2;
-webkit-box-shadow: inset 7px 0 0 0 #5b5b5b, 1px 0 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 7px 0 0 0 #5b5b5b, 1px 0 2px rgba(0, 0, 0, 0.3);
-ms-box-shadow: inset 7px 0 0 0 #5b5b5b, 1px 0 2px rgba(0, 0, 0, 0.3);
-o-box-shadow: inset 7px 0 0 0 #5b5b5b, 1px 0 2px rgba(0, 0, 0, 0.3);
box-shadow: inset 7px 0 0 0 #5b5b5b, 1px 0 2px rgba(0, 0, 0, 0.3); }
.navbar-close .second-level-nav .application-item:hover .application-item__icon {
width: 40px;
top: 16px;
left: 15px; }
.navbar-close .second-level-nav .application-item:hover.active {
-webkit-box-shadow: inset 400px 0 0 0 #5b5b5b, 1px 0 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 400px 0 0 0 #5b5b5b, 1px 0 2px rgba(0, 0, 0, 0.3);
-ms-box-shadow: inset 400px 0 0 0 #5b5b5b, 1px 0 2px rgba(0, 0, 0, 0.3);
-o-box-shadow: inset 400px 0 0 0 #5b5b5b, 1px 0 2px rgba(0, 0, 0, 0.3);
box-shadow: inset 400px 0 0 0 #5b5b5b, 1px 0 2px rgba(0, 0, 0, 0.3); }
.navbar-close .second-level-nav .application-item:hover.beginned {
-webkit-box-shadow: inset 7px 0 0 0 #66bb6a, 1px 0 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 7px 0 0 0 #66bb6a, 1px 0 2px rgba(0, 0, 0, 0.3);
-ms-box-shadow: inset 7px 0 0 0 #66bb6a, 1px 0 2px rgba(0, 0, 0, 0.3);
-o-box-shadow: inset 7px 0 0 0 #66bb6a, 1px 0 2px rgba(0, 0, 0, 0.3);
box-shadow: inset 7px 0 0 0 #66bb6a, 1px 0 2px rgba(0, 0, 0, 0.3); }
.navbar-close .second-level-nav .application-item:hover.beginned.active {
-webkit-box-shadow: inset 400px 0 0 0 #66bb6a, 1px 0 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 400px 0 0 0 #66bb6a, 1px 0 2px rgba(0, 0, 0, 0.3);
-ms-box-shadow: inset 400px 0 0 0 #66bb6a, 1px 0 2px rgba(0, 0, 0, 0.3);
-o-box-shadow: inset 400px 0 0 0 #66bb6a, 1px 0 2px rgba(0, 0, 0, 0.3);
box-shadow: inset 400px 0 0 0 #66bb6a, 1px 0 2px rgba(0, 0, 0, 0.3); }
.navbar-close .second-level-nav .application-item:hover.finished {
-webkit-box-shadow: inset 7px 0 0 0 #de594b, 1px 0 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 7px 0 0 0 #de594b, 1px 0 2px rgba(0, 0, 0, 0.3);
-ms-box-shadow: inset 7px 0 0 0 #de594b, 1px 0 2px rgba(0, 0, 0, 0.3);
-o-box-shadow: inset 7px 0 0 0 #de594b, 1px 0 2px rgba(0, 0, 0, 0.3);
box-shadow: inset 7px 0 0 0 #de594b, 1px 0 2px rgba(0, 0, 0, 0.3); }
.navbar-close .second-level-nav .application-item:hover.finished.active {
-webkit-box-shadow: inset 400px 0 0 0 #de594b, 1px 0 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 400px 0 0 0 #de594b, 1px 0 2px rgba(0, 0, 0, 0.3);
-ms-box-shadow: inset 400px 0 0 0 #de594b, 1px 0 2px rgba(0, 0, 0, 0.3);
-o-box-shadow: inset 400px 0 0 0 #de594b, 1px 0 2px rgba(0, 0, 0, 0.3);
box-shadow: inset 400px 0 0 0 #de594b, 1px 0 2px rgba(0, 0, 0, 0.3); }
.navbar-close .second-level-nav .application-item:hover.come-up {
-webkit-box-shadow: inset 7px 0 0 0 #fb8950, 1px 0 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 7px 0 0 0 #fb8950, 1px 0 2px rgba(0, 0, 0, 0.3);
-ms-box-shadow: inset 7px 0 0 0 #fb8950, 1px 0 2px rgba(0, 0, 0, 0.3);
-o-box-shadow: inset 7px 0 0 0 #fb8950, 1px 0 2px rgba(0, 0, 0, 0.3);
box-shadow: inset 7px 0 0 0 #fb8950, 1px 0 2px rgba(0, 0, 0, 0.3); }
.navbar-close .second-level-nav .application-item:hover.come-up.active {
-webkit-box-shadow: inset 400px 0 0 0 #fb8950, 1px 0 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 400px 0 0 0 #fb8950, 1px 0 2px rgba(0, 0, 0, 0.3);
-ms-box-shadow: inset 400px 0 0 0 #fb8950, 1px 0 2px rgba(0, 0, 0, 0.3);
-o-box-shadow: inset 400px 0 0 0 #fb8950, 1px 0 2px rgba(0, 0, 0, 0.3);
box-shadow: inset 400px 0 0 0 #fb8950, 1px 0 2px rgba(0, 0, 0, 0.3); }
.navbar-close .second-level-nav .application-item:hover.no-config {
-webkit-box-shadow: inset 7px 0 0 0 #5b5b5b, 1px 0 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 7px 0 0 0 #5b5b5b, 1px 0 2px rgba(0, 0, 0, 0.3);
-ms-box-shadow: inset 7px 0 0 0 #5b5b5b, 1px 0 2px rgba(0, 0, 0, 0.3);
-o-box-shadow: inset 7px 0 0 0 #5b5b5b, 1px 0 2px rgba(0, 0, 0, 0.3);
box-shadow: inset 7px 0 0 0 #5b5b5b, 1px 0 2px rgba(0, 0, 0, 0.3); }
.navbar-close .second-level-nav .application-item:hover.no-config.active {
-webkit-box-shadow: inset 400px 0 0 0 #5b5b5b, 1px 0 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 400px 0 0 0 #5b5b5b, 1px 0 2px rgba(0, 0, 0, 0.3);
-ms-box-shadow: inset 400px 0 0 0 #5b5b5b, 1px 0 2px rgba(0, 0, 0, 0.3);
-o-box-shadow: inset 400px 0 0 0 #5b5b5b, 1px 0 2px rgba(0, 0, 0, 0.3);
box-shadow: inset 400px 0 0 0 #5b5b5b, 1px 0 2px rgba(0, 0, 0, 0.3); }
.navbar-close .second-level-nav .application-item:hover .application-item__body {
opacity: 1; } }
.toggle-sort .icon-sort-up,
.toggle-sort .icon-sort-down {
display: none; }
.toggle-sort.asc .icon-sort-up {
display: inline; }
.toggle-sort.asc .icon-sort {
display: none; }
.toggle-sort.desc .icon-sort-down {
display: inline; }
.toggle-sort.desc .icon-sort {
display: none; }
/*----------------------------------------*/
/* Instant win modal slider */
/*----------------------------------------*/
#probabilityTable {
text-align: center;
margin-bottom: 25px;
height: auto;
padding-bottom: 16px;
padding-left: 60px;
overflow: hidden;
transition: all 1.5s ease-in-out; }
#probabilityTable label {
margin-left: -107px;
margin-bottom: 16px;
opacity: 1;
transition: opacity 1s ease-in-out 1s; }
#probabilityTable li {
list-style: none;
display: inline-block;
height: 150px; }
#probabilityTable li input[type=range] {
-webkit-appearance: none;
-webkit-transform: rotate(-90deg);
margin-top: 55px;
margin-left: -104px;
width: 128px;
transition: width 1.5s ease-in-out; }
#probabilityTable li input[type=range]::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background: #dddddd;
border: none;
border-radius: 3px; }
#probabilityTable li input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #fa6e28;
margin-top: -5px;
opacity: 1;
transition: opacity 1s ease-in-out 1s; }
#probabilityTable li input[type=range]:focus {
outline: none; }
#probabilityTable li input[type=range]:focus::-webkit-slider-runnable-track {
background: #cccccc; }
#url-input {
padding-left: 55px !important; }
label[for="url-input"] {
position: absolute;
padding-left: 12px;
padding-top: 6px;
font-weight: 500 !important; }
.proba-wrapper {
height: 0px;
transition: height 0.5s ease-in-out; }
.proba-wrapper .animation--fade-in {
transition: opacity 0.3s ease-in-out .5s !important; }
.proba-wrapper.animation--height {
height: 202px;
transition: height 0.5s ease-in-out; }
.applications-archived .check-list > li {
display: list-item; }
.applications-archived .check-list label.container {
width: 100%; }
.applications-archived .check-list label.container:hover {
background-color: #e5e5e5; }
.applications-archived .check-list input[type=checkbox] {
display: none; }
.applications-archived .check-list label.container .grid, .applications-archived .check-list label.container ul.thumbnails.image_picker_selector, .applications-archived .check-list label.container .datetime-wrapper {
display: flex;
font-weight: 500;
margin: auto;
height: 100%; }
.applications-archived .check-list label.container .grid .icon, .applications-archived .check-list label.container ul.thumbnails.image_picker_selector .icon, .applications-archived .check-list label.container .datetime-wrapper .icon {
max-height: 45px;
vertical-align: middle; }
.applications-archived .check-list label.container .grid .grid__item, .applications-archived .check-list label.container ul.thumbnails.image_picker_selector .grid__item, .applications-archived .check-list label.container .datetime-wrapper .grid__item, ul.thumbnails.image_picker_selector .applications-archived .check-list label.container .grid li, .applications-archived .check-list label.container ul.thumbnails.image_picker_selector li, ul.thumbnails.image_picker_selector .applications-archived .check-list label.container .datetime-wrapper li, .applications-archived .check-list label.container .grid .date-picker-wrapper, .applications-archived .check-list label.container ul.thumbnails.image_picker_selector .date-picker-wrapper, .applications-archived .check-list label.container .datetime-wrapper .date-picker-wrapper, .applications-archived .check-list label.container .grid .time-picker-wrapper, .applications-archived .check-list label.container ul.thumbnails.image_picker_selector .time-picker-wrapper, .applications-archived .check-list label.container .datetime-wrapper .time-picker-wrapper {
margin: auto; }
.applications-archived .check-list label.container .grid .grid__item.one-twelfth, .applications-archived .check-list label.container ul.thumbnails.image_picker_selector .grid__item.one-twelfth, .applications-archived .check-list label.container .datetime-wrapper .grid__item.one-twelfth, ul.thumbnails.image_picker_selector .applications-archived .check-list label.container .grid li.one-twelfth, .applications-archived .check-list label.container ul.thumbnails.image_picker_selector li.one-twelfth, ul.thumbnails.image_picker_selector .applications-archived .check-list label.container .datetime-wrapper li.one-twelfth, .applications-archived .check-list label.container .grid .one-twelfth.date-picker-wrapper, .applications-archived .check-list label.container ul.thumbnails.image_picker_selector .one-twelfth.date-picker-wrapper, .applications-archived .check-list label.container .datetime-wrapper .one-twelfth.date-picker-wrapper, .applications-archived .check-list label.container .grid .one-twelfth.time-picker-wrapper, .applications-archived .check-list label.container ul.thumbnails.image_picker_selector .one-twelfth.time-picker-wrapper, .applications-archived .check-list label.container .datetime-wrapper .one-twelfth.time-picker-wrapper {
padding-left: 15px; }
.applications-archived .check-list label {
transition-duration: 0.3s;
-webkit-box-shadow: inset 4px 0 0 0 #66bb6a;
-moz-box-shadow: inset 4px 0 0 0 #66bb6a;
-ms-box-shadow: inset 4px 0 0 0 #66bb6a;
-o-box-shadow: inset 4px 0 0 0 #66bb6a;
box-shadow: inset 4px 0 0 0 #66bb6a; }
.applications-archived .check-list > li:first-child > label {
border-top: 1px solid #e5e5e5; }
.applications-archived .check-list > li > label {
height: 70px;
border-bottom: 1px solid #e5e5e5; }
.applications-archived .check-list input:checked ~ .container {
transition-duration: 0.3s;
-webkit-box-shadow: inset 20px 0 0 0 #66bb6a;
-moz-box-shadow: inset 20px 0 0 0 #66bb6a;
-ms-box-shadow: inset 20px 0 0 0 #66bb6a;
-o-box-shadow: inset 20px 0 0 0 #66bb6a;
box-shadow: inset 20px 0 0 0 #66bb6a; }
@media (max-width: 767px) {
.applications-archived .check-list .portable-icon {
width: 10%;
padding-left: 8px; }
.applications-archived .check-list .portable-name {
width: 45%;
padding-left: 13px; }
.applications-archived .check-list .portable-date {
width: 52%;
padding-left: 5px;
font-size: 11px; } }
/*----------------------------------------*/
/* Instant win modal slider Media Query */
/* Instant win modal slider Media Query */
/*----------------------------------------*/
@media (max-width: 767px) {
#probabilityTable li {
width: 4%; }
li input[type=range]::-webkit-slider-thumb {
height: 10px;
width: 10px;
margin-left: 8px; } }
/*----------------------------------------*/
/* PEPPER */
/*----------------------------------------*/
.pepper {
position: fixed;
top: 90px;
right: 0px;
height: 85%; }
.message {
position: absolute;
right: 20px;
padding-bottom: 10px;
padding-top: 10px;
width: 260px;
background-color: white;
box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.3);
border-radius: 5px;
max-height: 100%;
overflow-y: scroll; }
.message ul {
margin: 0;
padding: 0; }
.message ul li {
display: block;
list-style: none;
margin: 0;
padding: 0;
overflow: hidden; }
.message ul li i {
font-size: 20px; }
.message .icon-data {
margin-top: -24px;
display: inline-block;
height: 20px;
width: 20%;
text-align: center;
vertical-align: middle; }
.data-descr {
display: inline-block;
width: 70%;
text-align: left;
vertical-align: middle;
font-size: 12px; }
.message ul li .label {
margin-bottom: 0;
font-weight: 700;
text-transform: uppercase; }
.message .to-cut {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
.anime_contact_leave {
transition: transform 0.3s ease-in-out;
transform: translateX(300px); }
.anime_contact_enter {
transition: transform 0.3s ease-in-out; }
.message .icon-data .icon-image {
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
width: 20px;
display: inline-block;
width: 20px;
height: 20px;
padding-bottom: 20px; }
.facebook-icon {
background-image: url(https://pepper.swat.io/assets/icons/facebook.svg); }
.twitter-icon {
background-image: url("https://pepper.swat.io/assets/icons/twitter.svg"); }
.linkedin-icon {
background-image: url("https://pepper.swat.io/assets/icons/linkedin.svg"); }
.messenger-icon {
background-image: url("https://pepper.swat.io/assets/icons/messenger.svg"); }
.instagram-icon {
background-image: url("https://pepper.swat.io/assets/icons/instagram.svg"); }
@media (max-width: 767px) {
.pepper {
display: none !important; } }
/*--------- Preview ------------*/
div[ng-controller=ApplicationAddController] {
min-height: 700px; }
div[ng-controller=ApplicationAddController] label {
display: inline-block;
margin-left: 5px;
margin-right: 5px;
text-transform: capitalize; }
div[ng-controller=ApplicationAddController] label input[type=radio] {
display: none; }
div[ng-controller=ApplicationAddController] div[loading=applicationsLoading] {
text-align: left; }
.preview-card {
background-color: #e5e5e5;
overflow: hidden;
margin-top: 10px;
margin-bottom: 10px; }
.preview-card .preview-text-wrapper {
min-height: 169px; }
.preview-card .preview-text-wrapper .top-card {
width: 66%;
display: inline-block;
vertical-align: middle;
padding: 20px; }
.preview-card .preview-text-wrapper .button-wrapper {
width: 32%;
display: inline-block;
vertical-align: middle; }
.preview-card .preview-text-wrapper .button-wrapper button {
width: 103px; }
.preview-card .preview-text-wrapper .button-wrapper button img {
vertical-align: middle; }
.preview-card .preview-text-wrapper .button-wrapper button i {
padding-right: 7px;
/*padding-left: 7px;*/ }
.preview-card .application__description {
padding: 20px;
padding-top: 10px; }
/*----------------------------------------*/
/* Slider Pub */
/*----------------------------------------*/
.carousel {
position: relative;
height: 200px;
margin-left: 24px;
margin-bottom: 30px;
overflow: hidden; }
.carousel .slide {
top: 0;
left: 100%;
opacity: 0;
padding-left: 5%;
background-color: lightgrey;
color: white;
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-position: 100% 0;
text-align: left; }
.carousel .slide .inside-slide {
display: table;
width: 100%;
height: 200px; }
.carousel .slide .inside-slide div {
display: table-cell;
vertical-align: middle; }
.carousel .slide .inside-slide div h3 {
margin-bottom: 10px;
font-family: inherit;
font-weight: 400; }
.carousel .slide .inside-slide div p {
line-height: 20px;
font-family: inherit;
font-weight: 400; }
.carousel .slide .inside-slide div a {
background-color: transparent;
border: 1px solid white;
color: white;
border-radius: 0;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease; }
.carousel .slide .inside-slide div a:hover {
background-color: white;
color: #303538; }
.carousel .nav {
color: white;
width: 100%;
height: 20px; }
.carousel .nav .dots {
text-align: center; }
.carousel .nav .dots .dots-link {
text-align: center;
display: inline-block;
position: relative;
z-index: 4;
height: 10px;
width: 10px;
border: 1px solid white;
top: 150px;
border-radius: 50%;
margin-left: 5px;
margin-right: 5px;
cursor: pointer;
transition: background-color 0.3s ease; }
.carousel .nav .dots .active {
background-color: white; }
.frontSlide {
top: 0;
left: 100%;
opacity: 0; }
.animation--slide-out-ads {
animation: slide-out-ads 0.8s ease-out forwards; }
.animation--slide-in-ads {
animation: slide-in-ads 0.8s ease-out forwards; }
@keyframes slide-out-ads {
0% {
left: 0;
opacity: 1; }
99% {
left: -100%;
opacity: 1; }
100% {
opacity: 0;
left: 100%; } }
@keyframes slide-in-ads {
0% {
left: 100%;
opacity: 0; }
1% {
left: 100%;
opacity: 1; }
100% {
opacity: 1;
left: 0; } }
@media (max-width: 767px) {
.carousel {
display: none !important; } }
/*********** MARGIN BOOTSTRAP 4 **************/
.mt-0,
.my-0 {
margin-top: 0 !important; }
.mr-0,
.mx-0 {
margin-right: 0 !important; }
.mb-0,
.my-0 {
margin-bottom: 0 !important; }
.ml-0,
.mx-0 {
margin-left: 0 !important; }
.m-1 {
margin: 0.25rem !important; }
.mt-1,
.my-1 {
margin-top: 0.25rem !important; }
.mr-1,
.mx-1 {
margin-right: 0.25rem !important; }
.mb-1,
.my-1 {
margin-bottom: 0.25rem !important; }
.ml-1,
.mx-1 {
margin-left: 0.25rem !important; }
.m-2 {
margin: 0.5rem !important; }
.mt-2,
.my-2 {
margin-top: 0.5rem !important; }
.mr-2,
.mx-2 {
margin-right: 0.5rem !important; }
.mb-2,
.my-2 {
margin-bottom: 0.5rem !important; }
.ml-2,
.mx-2 {
margin-left: 0.5rem !important; }
.m-3 {
margin: 1rem !important; }
.mt-3,
.my-3 {
margin-top: 1rem !important; }
.mr-3,
.mx-3 {
margin-right: 1rem !important; }
.mb-3,
.my-3 {
margin-bottom: 1rem !important; }
.ml-3,
.mx-3 {
margin-left: 1rem !important; }
.m-4 {
margin: 1.5rem !important; }
.mt-4,
.my-4 {
margin-top: 1.5rem !important; }
.mr-4,
.mx-4 {
margin-right: 1.5rem !important; }
.mb-4,
.my-4 {
margin-bottom: 1.5rem !important; }
.ml-4,
.mx-4 {
margin-left: 1.5rem !important; }
.m-5 {
margin: 3rem !important; }
.mt-5,
.my-5 {
margin-top: 3rem !important; }
.mr-5,
.mx-5 {
margin-right: 3rem !important; }
.mb-5,
.my-5 {
margin-bottom: 3rem !important; }
.ml-5,
.mx-5 {
margin-left: 3rem !important; }
.w-50 {
width: 50% !important; }
.margin-header {
margin-top: 60px; }
.margin-right-header {
margin-right: 15px; }
