at-ui
Version:
A UI Component Library with Vue.js
2,636 lines (2,431 loc) • 405 kB
CSS
@charset "UTF-8";
/**
* AT-UI
*/
/* Mixin */
/**
* Mixins
*/
/* library */
/**
* BEM Mixins
* From https://github.com/alphasights/paint/blob/812fb33c54a50277071f547a3e191cf5fe4fcb3f/styles/tools/_bem.scss
*/
/**
* @example scss
*
* .element {
* @include clearfix;
* }
*
* // CSS Output
* .element::after {
* clear: both;
* content: '';
* display: block;
* }
*/
/**
* Truncate text and add an ellipsis to represent overflow
*
* @param {number} $width [Default 100%]
* @param {string} $display [Default inline-block] [Sets the display-value of the element]
*/
/**
* Hides text to show a background image(a logo, for example)
*
* @example
* .element {
* @include hide-text;
* }
*
* // CSS Output
* .element {
* overflow: hidden;
* text-indent: 101%;
* white-space: nowrap;
* }
*/
/**
* Set width and height in a single statement
*
* @param {number (with unit) | string} $width
* @param {number (with unit) | string} $height [default $width]
*/
/**
* Mixes a color with white. It's different from lighten()
*
* @param {color} $color
* @param {number (percentage)} $percent [The amout of white to be mixed in]
* @return {color}
*
* @example
* .element {
* background-color: tint(#6ecaa6 , 40%);
* }
*
* // CSS Output
* .element {
* background-color: #a8dfc9;
* }
*/
/**
* Mixes a color with black. It's different from darken()
*
* @param {color} $color
* @param {number (percentage)} $percent [The amount of black to be mixed in]
* @return {color}
*
* @example
* .element {
* background-color: shade(#ffbb52, 60%);
* }
*
* // CSS Output
* .element {
* background-color: #664a20;
* }
*/
/* Variables */
/**
* Variables
*/
/**
* Default Variables
*/
/**
* Mixins
*/
/* library */
/**
* BEM Mixins
* From https://github.com/alphasights/paint/blob/812fb33c54a50277071f547a3e191cf5fe4fcb3f/styles/tools/_bem.scss
*/
/**
* @example scss
*
* .element {
* @include clearfix;
* }
*
* // CSS Output
* .element::after {
* clear: both;
* content: '';
* display: block;
* }
*/
/**
* Truncate text and add an ellipsis to represent overflow
*
* @param {number} $width [Default 100%]
* @param {string} $display [Default inline-block] [Sets the display-value of the element]
*/
/**
* Hides text to show a background image(a logo, for example)
*
* @example
* .element {
* @include hide-text;
* }
*
* // CSS Output
* .element {
* overflow: hidden;
* text-indent: 101%;
* white-space: nowrap;
* }
*/
/**
* Set width and height in a single statement
*
* @param {number (with unit) | string} $width
* @param {number (with unit) | string} $height [default $width]
*/
/**
* Mixes a color with white. It's different from lighten()
*
* @param {color} $color
* @param {number (percentage)} $percent [The amout of white to be mixed in]
* @return {color}
*
* @example
* .element {
* background-color: tint(#6ecaa6 , 40%);
* }
*
* // CSS Output
* .element {
* background-color: #a8dfc9;
* }
*/
/**
* Mixes a color with black. It's different from darken()
*
* @param {color} $color
* @param {number (percentage)} $percent [The amount of black to be mixed in]
* @return {color}
*
* @example
* .element {
* background-color: shade(#ffbb52, 60%);
* }
*
* // CSS Output
* .element {
* background-color: #664a20;
* }
*/
/* Prefix */
/* The Color of O2Team Brand */
/* Color */
/* Color PalettC */
/* Assistant Color */
/* Border */
/* Font */
/* Link */
/* Disabled cursor */
/* Shadow */
/* Button */
/* Tag */
/* Checkbox */
/* Input */
/* InputNumber */
/* Switch */
/* Slider */
/* Textarea */
/* Alert */
/* Badge */
/* Card */
/* Collapse */
/* Loading Bar */
/* Modal */
/* Message */
/* Radio */
/* Rate */
/* Select */
/* Select Dropdown */
/* Notification */
/* Popover */
/* Progress */
/* Timeline */
/* Tooltip */
/* Table */
/* Breadcrumb */
/* Dropdown */
/* Menu */
/* Pagination */
/* Tabs */
/* Steps */
/**
* Media queries
*/
/* Extra small screen / Mobile */
/* Small screen / Tablet */
/* Medium screen / Desktop */
/* Large screen / Wide Desktop */
/**
* Grid system
*/
/* Container sizes */
/* z-index list */
/**
* CSS cubic-bezier timing functions
* http://bourbon.io/docs/#timing-functions
*/
/* Core */
/**
* Core
*/
/*! normalize.css v4.2.0 | MIT License | github.com/necolas/normalize.css */
/**
* 1. Change the default font family in all browsers (opinionated).
* 2. Correct the line height in all browsers.
* 3. Prevent adjustments of font size after orientation changes in IE and iOS.
*/
/* Document
========================================================================== */
html {
font-family: sans-serif;
/* 1 */
line-height: 1.15;
/* 2 */
-ms-text-size-adjust: 100%;
/* 3 */
-webkit-text-size-adjust: 100%;
/* 3 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0;
}
/**
* Add the correct display in IE 9-.
*/
article,
aside,
footer,
header,
nav,
section {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in IE.
*/
figcaption,
figure,
main {
/* 1 */
display: block;
}
/**
* Add the correct margin in IE 8.
*/
figure {
margin: 1em 40px;
}
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
-webkit-box-sizing: content-box;
box-sizing: content-box;
/* 1 */
height: 0;
/* 1 */
overflow: visible;
/* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
background-color: transparent;
/* 1 */
-webkit-text-decoration-skip: objects;
/* 2 */
}
/**
* Remove the outline on focused links when they are also active or hovered
* in all browsers (opinionated).
*/
a:active,
a:hover {
outline-width: 0;
}
/**
* 1. Remove the bottom border in Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
text-decoration: underline dotted;
/* 2 */
}
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
font-weight: inherit;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/**
* Add the correct font style in Android 4.3-.
*/
dfn {
font-style: italic;
}
/**
* Add the correct background and color in IE 9-.
*/
mark {
background-color: #ff0;
color: #000;
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
audio,
video {
display: inline-block;
}
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none;
}
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: sans-serif;
/* 1 */
font-size: 100%;
/* 1 */
line-height: 1.15;
/* 1 */
margin: 0;
/* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
/* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
/* 1 */
text-transform: none;
}
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
/* 2 */
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Change the border, margin, and padding in all browsers (opinionated).
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* 1 */
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding: 0;
/* 3 */
white-space: normal;
/* 1 */
}
/**
* 1. Add the correct display in IE 9-.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */
}
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
*/
details,
menu {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Scripting
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
canvas {
display: inline-block;
}
/**
* Add the correct display in IE.
*/
template {
display: none;
}
/* Hidden
========================================================================== */
/**
* Add the correct display in IE 10-.
*/
[hidden] {
display: none;
}
/**
* AT-Desktop UI Base Stylesheet
*/
/**
* Variables
*/
/**
* Default Variables
*/
/**
* Mixins
*/
/* library */
/**
* BEM Mixins
* From https://github.com/alphasights/paint/blob/812fb33c54a50277071f547a3e191cf5fe4fcb3f/styles/tools/_bem.scss
*/
/**
* @example scss
*
* .element {
* @include clearfix;
* }
*
* // CSS Output
* .element::after {
* clear: both;
* content: '';
* display: block;
* }
*/
/**
* Truncate text and add an ellipsis to represent overflow
*
* @param {number} $width [Default 100%]
* @param {string} $display [Default inline-block] [Sets the display-value of the element]
*/
/**
* Hides text to show a background image(a logo, for example)
*
* @example
* .element {
* @include hide-text;
* }
*
* // CSS Output
* .element {
* overflow: hidden;
* text-indent: 101%;
* white-space: nowrap;
* }
*/
/**
* Set width and height in a single statement
*
* @param {number (with unit) | string} $width
* @param {number (with unit) | string} $height [default $width]
*/
/**
* Mixes a color with white. It's different from lighten()
*
* @param {color} $color
* @param {number (percentage)} $percent [The amout of white to be mixed in]
* @return {color}
*
* @example
* .element {
* background-color: tint(#6ecaa6 , 40%);
* }
*
* // CSS Output
* .element {
* background-color: #a8dfc9;
* }
*/
/**
* Mixes a color with black. It's different from darken()
*
* @param {color} $color
* @param {number (percentage)} $percent [The amount of black to be mixed in]
* @return {color}
*
* @example
* .element {
* background-color: shade(#ffbb52, 60%);
* }
*
* // CSS Output
* .element {
* background-color: #664a20;
* }
*/
/* Prefix */
/* The Color of O2Team Brand */
/* Color */
/* Color PalettC */
/* Assistant Color */
/* Border */
/* Font */
/* Link */
/* Disabled cursor */
/* Shadow */
/* Button */
/* Tag */
/* Checkbox */
/* Input */
/* InputNumber */
/* Switch */
/* Slider */
/* Textarea */
/* Alert */
/* Badge */
/* Card */
/* Collapse */
/* Loading Bar */
/* Modal */
/* Message */
/* Radio */
/* Rate */
/* Select */
/* Select Dropdown */
/* Notification */
/* Popover */
/* Progress */
/* Timeline */
/* Tooltip */
/* Table */
/* Breadcrumb */
/* Dropdown */
/* Menu */
/* Pagination */
/* Tabs */
/* Steps */
/**
* Media queries
*/
/* Extra small screen / Mobile */
/* Small screen / Tablet */
/* Medium screen / Desktop */
/* Large screen / Wide Desktop */
/**
* Grid system
*/
/* Container sizes */
/* z-index list */
/**
* CSS cubic-bezier timing functions
* http://bourbon.io/docs/#timing-functions
*/
/**
* Mixins
*/
/* library */
/**
* BEM Mixins
* From https://github.com/alphasights/paint/blob/812fb33c54a50277071f547a3e191cf5fe4fcb3f/styles/tools/_bem.scss
*/
/**
* @example scss
*
* .element {
* @include clearfix;
* }
*
* // CSS Output
* .element::after {
* clear: both;
* content: '';
* display: block;
* }
*/
/**
* Truncate text and add an ellipsis to represent overflow
*
* @param {number} $width [Default 100%]
* @param {string} $display [Default inline-block] [Sets the display-value of the element]
*/
/**
* Hides text to show a background image(a logo, for example)
*
* @example
* .element {
* @include hide-text;
* }
*
* // CSS Output
* .element {
* overflow: hidden;
* text-indent: 101%;
* white-space: nowrap;
* }
*/
/**
* Set width and height in a single statement
*
* @param {number (with unit) | string} $width
* @param {number (with unit) | string} $height [default $width]
*/
/**
* Mixes a color with white. It's different from lighten()
*
* @param {color} $color
* @param {number (percentage)} $percent [The amout of white to be mixed in]
* @return {color}
*
* @example
* .element {
* background-color: tint(#6ecaa6 , 40%);
* }
*
* // CSS Output
* .element {
* background-color: #a8dfc9;
* }
*/
/**
* Mixes a color with black. It's different from darken()
*
* @param {color} $color
* @param {number (percentage)} $percent [The amount of black to be mixed in]
* @return {color}
*
* @example
* .element {
* background-color: shade(#ffbb52, 60%);
* }
*
* // CSS Output
* .element {
* background-color: #664a20;
* }
*/
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
*:before, *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* HTML & Body reset */
html, body {
width: 100%;
height: 100%;
}
body {
background-color: #FFF;
color: #3F536E;
line-height: 1.5;
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
font-size: 14px;
-webkit-font-smoothing: antialiased;
}
/* Unify the margin and padding */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
margin: 0;
padding: 0;
}
/* Reset fonts for relevant elements */
button, input, select, textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
}
ul, ol {
list-style: none;
}
/* Remove the clear button of a text input control in IE10+ */
input::-ms-clear, input::-ms-reveal {
display: none;
}
::-moz-selection {
background: #6190E8;
color: #fff;
}
::selection {
background: #6190E8;
color: #fff;
}
/* Link */
a {
color: #6190E8;
background: transparent;
text-decoration: none;
outline: none;
cursor: pointer;
-webkit-transition: color .3s ease;
transition: color .3s ease;
}
a:hover {
color: #79A1EB;
}
a:active {
color: #4F7DE2;
}
a:hover, a:active {
outline: 0;
text-decoration: none;
}
a[disabled] {
color: #BFBFBF;
cursor: not-allowed;
pointer-events: none;
}
/* Code Block */
code, kbd, pre, samp {
font-family: Consolas, Menlo, Courier, monospace;
}
/* Utility classes */
.clearfix::after {
clear: both;
content: '';
display: block;
}
.show {
display: block !important;
}
.hide {
display: none !important;
}
.invisible {
visibility: hidden !important;
}
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
/* Title */
h1, h2, h3, h4, h5, h6 {
color: #2C405A;
}
h1 {
font-size: 20px;
}
h2 {
font-size: 18px;
}
h3 {
font-size: 16px;
}
h4, h5, h6 {
font-size: 14px;
}
hr {
margin: 1.2em 0 1.5em;
}
/* Text */
p {
color: #3F536E;
font-size: 14px;
}
.text-smallest {
font-size: 11px;
}
.text-smaller {
font-size: 12px;
}
.text-small {
font-size: 13px;
}
.text-base {
font-size: 14px;
}
.text-normal {
font-size: 16px;
}
.text-large {
font-size: 18px;
}
.text-larger {
font-size: 20px;
}
/*// Color
$normal-color : #6190E8;
$primary-color : #6190E8;
$success-color : #13CE66;
$error-color : #FF4949;
$warning-color : #FFC82C;
$info-color : #78A4FA;
.normal-color {
color:
}*/
/* Font */
.typo-pingfang {
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', Arial, sans-serif;
}
.typo-dongqing {
font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;
}
.typo-yahei {
font-family: 'Helvetica Neue', Helvetica, 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}
.typo-helvetica-neue {
font-family: 'Helvetica Neue', "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif;
}
.typo-helvetica {
font-family: Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif;
}
.typo-arial {
font-family: Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif;
}
/**
* Grid System
*/
/**
* Default Variables
*/
/**
* Mixins
*/
/* library */
/**
* BEM Mixins
* From https://github.com/alphasights/paint/blob/812fb33c54a50277071f547a3e191cf5fe4fcb3f/styles/tools/_bem.scss
*/
/**
* @example scss
*
* .element {
* @include clearfix;
* }
*
* // CSS Output
* .element::after {
* clear: both;
* content: '';
* display: block;
* }
*/
/**
* Truncate text and add an ellipsis to represent overflow
*
* @param {number} $width [Default 100%]
* @param {string} $display [Default inline-block] [Sets the display-value of the element]
*/
/**
* Hides text to show a background image(a logo, for example)
*
* @example
* .element {
* @include hide-text;
* }
*
* // CSS Output
* .element {
* overflow: hidden;
* text-indent: 101%;
* white-space: nowrap;
* }
*/
/**
* Set width and height in a single statement
*
* @param {number (with unit) | string} $width
* @param {number (with unit) | string} $height [default $width]
*/
/**
* Mixes a color with white. It's different from lighten()
*
* @param {color} $color
* @param {number (percentage)} $percent [The amout of white to be mixed in]
* @return {color}
*
* @example
* .element {
* background-color: tint(#6ecaa6 , 40%);
* }
*
* // CSS Output
* .element {
* background-color: #a8dfc9;
* }
*/
/**
* Mixes a color with black. It's different from darken()
*
* @param {color} $color
* @param {number (percentage)} $percent [The amount of black to be mixed in]
* @return {color}
*
* @example
* .element {
* background-color: shade(#ffbb52, 60%);
* }
*
* // CSS Output
* .element {
* background-color: #664a20;
* }
*/
/* Prefix */
/* The Color of O2Team Brand */
/* Color */
/* Color PalettC */
/* Assistant Color */
/* Border */
/* Font */
/* Link */
/* Disabled cursor */
/* Shadow */
/* Button */
/* Tag */
/* Checkbox */
/* Input */
/* InputNumber */
/* Switch */
/* Slider */
/* Textarea */
/* Alert */
/* Badge */
/* Card */
/* Collapse */
/* Loading Bar */
/* Modal */
/* Message */
/* Radio */
/* Rate */
/* Select */
/* Select Dropdown */
/* Notification */
/* Popover */
/* Progress */
/* Timeline */
/* Tooltip */
/* Table */
/* Breadcrumb */
/* Dropdown */
/* Menu */
/* Pagination */
/* Tabs */
/* Steps */
/**
* Media queries
*/
/* Extra small screen / Mobile */
/* Small screen / Tablet */
/* Medium screen / Desktop */
/* Large screen / Wide Desktop */
/**
* Grid system
*/
/* Container sizes */
/* z-index list */
/* variables */
/* Extra small screen / Mobile */
/* Small screen / Tablet */
/* Medium screen / Desktop */
/* Large screen / Wide Desktop */
/**
* Make Grid
* Use for column 24
* $baseWidth: 4.166667%;
*/
.container-fluid, .container {
margin-left: auto;
margin-right: auto;
}
.container-fluid {
padding-left: 24px;
padding-right: 24px;
}
.no-gutter {
padding-left: 0;
padding-right: 0;
}
.row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-left: -4px;
margin-right: -4px;
}
.row.reverse {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.col.reverse {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
/* Flex justify content */
.flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.flex-start {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
text-align: start;
}
.flex-center {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
}
.flex-end {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
text-align: end;
}
.flex-around {
-ms-flex-pack: distribute;
justify-content: space-around;
}
.flex-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.flex-top {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.flex-middle {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.flex-bottom {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.flex-first {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
}
.flex-last {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
/* normal */
.container {
width: 100%;
}
.col, .col-offset-0 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.col-1, .col-offset-1 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-1, .no-gutter .col-offset-1 {
padding-left: 0;
padding-right: 0;
}
.col-2, .col-offset-2 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-2, .no-gutter .col-offset-2 {
padding-left: 0;
padding-right: 0;
}
.col-3, .col-offset-3 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-3, .no-gutter .col-offset-3 {
padding-left: 0;
padding-right: 0;
}
.col-4, .col-offset-4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-4, .no-gutter .col-offset-4 {
padding-left: 0;
padding-right: 0;
}
.col-5, .col-offset-5 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-5, .no-gutter .col-offset-5 {
padding-left: 0;
padding-right: 0;
}
.col-6, .col-offset-6 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-6, .no-gutter .col-offset-6 {
padding-left: 0;
padding-right: 0;
}
.col-7, .col-offset-7 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-7, .no-gutter .col-offset-7 {
padding-left: 0;
padding-right: 0;
}
.col-8, .col-offset-8 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-8, .no-gutter .col-offset-8 {
padding-left: 0;
padding-right: 0;
}
.col-9, .col-offset-9 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-9, .no-gutter .col-offset-9 {
padding-left: 0;
padding-right: 0;
}
.col-10, .col-offset-10 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-10, .no-gutter .col-offset-10 {
padding-left: 0;
padding-right: 0;
}
.col-11, .col-offset-11 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-11, .no-gutter .col-offset-11 {
padding-left: 0;
padding-right: 0;
}
.col-12, .col-offset-12 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-12, .no-gutter .col-offset-12 {
padding-left: 0;
padding-right: 0;
}
.col-13, .col-offset-13 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-13, .no-gutter .col-offset-13 {
padding-left: 0;
padding-right: 0;
}
.col-14, .col-offset-14 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-14, .no-gutter .col-offset-14 {
padding-left: 0;
padding-right: 0;
}
.col-15, .col-offset-15 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-15, .no-gutter .col-offset-15 {
padding-left: 0;
padding-right: 0;
}
.col-16, .col-offset-16 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-16, .no-gutter .col-offset-16 {
padding-left: 0;
padding-right: 0;
}
.col-17, .col-offset-17 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-17, .no-gutter .col-offset-17 {
padding-left: 0;
padding-right: 0;
}
.col-18, .col-offset-18 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-18, .no-gutter .col-offset-18 {
padding-left: 0;
padding-right: 0;
}
.col-19, .col-offset-19 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-19, .no-gutter .col-offset-19 {
padding-left: 0;
padding-right: 0;
}
.col-20, .col-offset-20 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-20, .no-gutter .col-offset-20 {
padding-left: 0;
padding-right: 0;
}
.col-21, .col-offset-21 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-21, .no-gutter .col-offset-21 {
padding-left: 0;
padding-right: 0;
}
.col-22, .col-offset-22 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-22, .no-gutter .col-offset-22 {
padding-left: 0;
padding-right: 0;
}
.col-23, .col-offset-23 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-23, .no-gutter .col-offset-23 {
padding-left: 0;
padding-right: 0;
}
.col-24, .col-offset-24 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-24, .no-gutter .col-offset-24 {
padding-left: 0;
padding-right: 0;
}
.col {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-preferred-size: 0;
flex-basis: 0;
max-width: 100%;
}
.col-offset-0 {
margin-left: 0;
}
.col-1 {
-ms-flex-preferred-size: 4.16667%;
flex-basis: 4.16667%;
max-width: 4.16667%;
}
.col-offset-1 {
margin-left: 4.16667%;
}
.col-2 {
-ms-flex-preferred-size: 8.33333%;
flex-basis: 8.33333%;
max-width: 8.33333%;
}
.col-offset-2 {
margin-left: 8.33333%;
}
.col-3 {
-ms-flex-preferred-size: 12.5%;
flex-basis: 12.5%;
max-width: 12.5%;
}
.col-offset-3 {
margin-left: 12.5%;
}
.col-4 {
-ms-flex-preferred-size: 16.66667%;
flex-basis: 16.66667%;
max-width: 16.66667%;
}
.col-offset-4 {
margin-left: 16.66667%;
}
.col-5 {
-ms-flex-preferred-size: 20.83334%;
flex-basis: 20.83334%;
max-width: 20.83334%;
}
.col-offset-5 {
margin-left: 20.83334%;
}
.col-6 {
-ms-flex-preferred-size: 25.0%;
flex-basis: 25.0%;
max-width: 25.0%;
}
.col-offset-6 {
margin-left: 25.0%;
}
.col-7 {
-ms-flex-preferred-size: 29.16667%;
flex-basis: 29.16667%;
max-width: 29.16667%;
}
.col-offset-7 {
margin-left: 29.16667%;
}
.col-8 {
-ms-flex-preferred-size: 33.33334%;
flex-basis: 33.33334%;
max-width: 33.33334%;
}
.col-offset-8 {
margin-left: 33.33334%;
}
.col-9 {
-ms-flex-preferred-size: 37.5%;
flex-basis: 37.5%;
max-width: 37.5%;
}
.col-offset-9 {
margin-left: 37.5%;
}
.col-10 {
-ms-flex-preferred-size: 41.66667%;
flex-basis: 41.66667%;
max-width: 41.66667%;
}
.col-offset-10 {
margin-left: 41.66667%;
}
.col-11 {
-ms-flex-preferred-size: 45.83334%;
flex-basis: 45.83334%;
max-width: 45.83334%;
}
.col-offset-11 {
margin-left: 45.83334%;
}
.col-12 {
-ms-flex-preferred-size: 50.0%;
flex-basis: 50.0%;
max-width: 50.0%;
}
.col-offset-12 {
margin-left: 50.0%;
}
.col-13 {
-ms-flex-preferred-size: 54.16667%;
flex-basis: 54.16667%;
max-width: 54.16667%;
}
.col-offset-13 {
margin-left: 54.16667%;
}
.col-14 {
-ms-flex-preferred-size: 58.33334%;
flex-basis: 58.33334%;
max-width: 58.33334%;
}
.col-offset-14 {
margin-left: 58.33334%;
}
.col-15 {
-ms-flex-preferred-size: 62.50001%;
flex-basis: 62.50001%;
max-width: 62.50001%;
}
.col-offset-15 {
margin-left: 62.50001%;
}
.col-16 {
-ms-flex-preferred-size: 66.66667%;
flex-basis: 66.66667%;
max-width: 66.66667%;
}
.col-offset-16 {
margin-left: 66.66667%;
}
.col-17 {
-ms-flex-preferred-size: 70.83334%;
flex-basis: 70.83334%;
max-width: 70.83334%;
}
.col-offset-17 {
margin-left: 70.83334%;
}
.col-18 {
-ms-flex-preferred-size: 75.00001%;
flex-basis: 75.00001%;
max-width: 75.00001%;
}
.col-offset-18 {
margin-left: 75.00001%;
}
.col-19 {
-ms-flex-preferred-size: 79.16667%;
flex-basis: 79.16667%;
max-width: 79.16667%;
}
.col-offset-19 {
margin-left: 79.16667%;
}
.col-20 {
-ms-flex-preferred-size: 83.33334%;
flex-basis: 83.33334%;
max-width: 83.33334%;
}
.col-offset-20 {
margin-left: 83.33334%;
}
.col-21 {
-ms-flex-preferred-size: 87.50001%;
flex-basis: 87.50001%;
max-width: 87.50001%;
}
.col-offset-21 {
margin-left: 87.50001%;
}
.col-22 {
-ms-flex-preferred-size: 91.66667%;
flex-basis: 91.66667%;
max-width: 91.66667%;
}
.col-offset-22 {
margin-left: 91.66667%;
}
.col-23 {
-ms-flex-preferred-size: 95.83334%;
flex-basis: 95.83334%;
max-width: 95.83334%;
}
.col-offset-23 {
margin-left: 95.83334%;
}
.col-24 {
-ms-flex-preferred-size: 100.00001%;
flex-basis: 100.00001%;
max-width: 100.00001%;
}
.col-offset-24 {
margin-left: 100.00001%;
}
/* screen xs */
@media screen and (max-width: 991px) {
.col-xs, .col-xs-offset-0 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.col-xs-1, .col-xs-offset-1 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-xs-1, .no-gutter .col-xs-offset-1 {
padding-left: 0;
padding-right: 0;
}
.col-xs-2, .col-xs-offset-2 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-xs-2, .no-gutter .col-xs-offset-2 {
padding-left: 0;
padding-right: 0;
}
.col-xs-3, .col-xs-offset-3 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-xs-3, .no-gutter .col-xs-offset-3 {
padding-left: 0;
padding-right: 0;
}
.col-xs-4, .col-xs-offset-4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-xs-4, .no-gutter .col-xs-offset-4 {
padding-left: 0;
padding-right: 0;
}
.col-xs-5, .col-xs-offset-5 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-xs-5, .no-gutter .col-xs-offset-5 {
padding-left: 0;
padding-right: 0;
}
.col-xs-6, .col-xs-offset-6 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-xs-6, .no-gutter .col-xs-offset-6 {
padding-left: 0;
padding-right: 0;
}
.col-xs-7, .col-xs-offset-7 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-xs-7, .no-gutter .col-xs-offset-7 {
padding-left: 0;
padding-right: 0;
}
.col-xs-8, .col-xs-offset-8 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-xs-8, .no-gutter .col-xs-offset-8 {
padding-left: 0;
padding-right: 0;
}
.col-xs-9, .col-xs-offset-9 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-xs-9, .no-gutter .col-xs-offset-9 {
padding-left: 0;
padding-right: 0;
}
.col-xs-10, .col-xs-offset-10 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-xs-10, .no-gutter .col-xs-offset-10 {
padding-left: 0;
padding-right: 0;
}
.col-xs-11, .col-xs-offset-11 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-xs-11, .no-gutter .col-xs-offset-11 {
padding-left: 0;
padding-right: 0;
}
.col-xs-12, .col-xs-offset-12 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-xs-12, .no-gutter .col-xs-offset-12 {
padding-left: 0;
padding-right: 0;
}
.col-xs-13, .col-xs-offset-13 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-xs-13, .no-gutter .col-xs-offset-13 {
padding-left: 0;
padding-right: 0;
}
.col-xs-14, .col-xs-offset-14 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-xs-14, .no-gutter .col-xs-offset-14 {
padding-left: 0;
padding-right: 0;
}
.col-xs-15, .col-xs-offset-15 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-xs-15, .no-gutter .col-xs-offset-15 {
padding-left: 0;
padding-right: 0;
}
.col-xs-16, .col-xs-offset-16 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-xs-16, .no-gutter .col-xs-offset-16 {
padding-left: 0;
padding-right: 0;
}
.col-xs-17, .col-xs-offset-17 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-xs-17, .no-gutter .col-xs-offset-17 {
padding-left: 0;
padding-right: 0;
}
.col-xs-18, .col-xs-offset-18 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-xs-18, .no-gutter .col-xs-offset-18 {
padding-left: 0;
padding-right: 0;
}
.col-xs-19, .col-xs-offset-19 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-xs-19, .no-gutter .col-xs-offset-19 {
padding-left: 0;
padding-right: 0;
}
.col-xs-20, .col-xs-offset-20 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-xs-20, .no-gutter .col-xs-offset-20 {
padding-left: 0;
padding-right: 0;
}
.col-xs-21, .col-xs-offset-21 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-xs-21, .no-gutter .col-xs-offset-21 {
padding-left: 0;
padding-right: 0;
}
.col-xs-22, .col-xs-offset-22 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-xs-22, .no-gutter .col-xs-offset-22 {
padding-left: 0;
padding-right: 0;
}
.col-xs-23, .col-xs-offset-23 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-xs-23, .no-gutter .col-xs-offset-23 {
padding-left: 0;
padding-right: 0;
}
.col-xs-24, .col-xs-offset-24 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-xs-24, .no-gutter .col-xs-offset-24 {
padding-left: 0;
padding-right: 0;
}
.col-xs {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-preferred-size: 0;
flex-basis: 0;
max-width: 100%;
}
.col-xs-offset-0 {
margin-left: 0;
}
.col-xs-1 {
-ms-flex-preferred-size: 4.16667%;
flex-basis: 4.16667%;
max-width: 4.16667%;
}
.col-xs-offset-1 {
margin-left: 4.16667%;
}
.col-xs-2 {
-ms-flex-preferred-size: 8.33333%;
flex-basis: 8.33333%;
max-width: 8.33333%;
}
.col-xs-offset-2 {
margin-left: 8.33333%;
}
.col-xs-3 {
-ms-flex-preferred-size: 12.5%;
flex-basis: 12.5%;
max-width: 12.5%;
}
.col-xs-offset-3 {
margin-left: 12.5%;
}
.col-xs-4 {
-ms-flex-preferred-size: 16.66667%;
flex-basis: 16.66667%;
max-width: 16.66667%;
}
.col-xs-offset-4 {
margin-left: 16.66667%;
}
.col-xs-5 {
-ms-flex-preferred-size: 20.83334%;
flex-basis: 20.83334%;
max-width: 20.83334%;
}
.col-xs-offset-5 {
margin-left: 20.83334%;
}
.col-xs-6 {
-ms-flex-preferred-size: 25.0%;
flex-basis: 25.0%;
max-width: 25.0%;
}
.col-xs-offset-6 {
margin-left: 25.0%;
}
.col-xs-7 {
-ms-flex-preferred-size: 29.16667%;
flex-basis: 29.16667%;
max-width: 29.16667%;
}
.col-xs-offset-7 {
margin-left: 29.16667%;
}
.col-xs-8 {
-ms-flex-preferred-size: 33.33334%;
flex-basis: 33.33334%;
max-width: 33.33334%;
}
.col-xs-offset-8 {
margin-left: 33.33334%;
}
.col-xs-9 {
-ms-flex-preferred-size: 37.5%;
flex-basis: 37.5%;
max-width: 37.5%;
}
.col-xs-offset-9 {
margin-left: 37.5%;
}
.col-xs-10 {
-ms-flex-preferred-size: 41.66667%;
flex-basis: 41.66667%;
max-width: 41.66667%;
}
.col-xs-offset-10 {
margin-left: 41.66667%;
}
.col-xs-11 {
-ms-flex-preferred-size: 45.83334%;
flex-basis: 45.83334%;
max-width: 45.83334%;
}
.col-xs-offset-11 {
margin-left: 45.83334%;
}
.col-xs-12 {
-ms-flex-preferred-size: 50.0%;
flex-basis: 50.0%;
max-width: 50.0%;
}
.col-xs-offset-12 {
margin-left: 50.0%;
}
.col-xs-13 {
-ms-flex-preferred-size: 54.16667%;
flex-basis: 54.16667%;
max-width: 54.16667%;
}
.col-xs-offset-13 {
margin-left: 54.16667%;
}
.col-xs-14 {
-ms-flex-preferred-size: 58.33334%;
flex-basis: 58.33334%;
max-width: 58.33334%;
}
.col-xs-offset-14 {
margin-left: 58.33334%;
}
.col-xs-15 {
-ms-flex-preferred-size: 62.50001%;
flex-basis: 62.50001%;
max-width: 62.50001%;
}
.col-xs-offset-15 {
margin-left: 62.50001%;
}
.col-xs-16 {
-ms-flex-preferred-size: 66.66667%;
flex-basis: 66.66667%;
max-width: 66.66667%;
}
.col-xs-offset-16 {
margin-left: 66.66667%;
}
.col-xs-17 {
-ms-flex-preferred-size: 70.83334%;
flex-basis: 70.83334%;
max-width: 70.83334%;
}
.col-xs-offset-17 {
margin-left: 70.83334%;
}
.col-xs-18 {
-ms-flex-preferred-size: 75.00001%;
flex-basis: 75.00001%;
max-width: 75.00001%;
}
.col-xs-offset-18 {
margin-left: 75.00001%;
}
.col-xs-19 {
-ms-flex-preferred-size: 79.16667%;
flex-basis: 79.16667%;
max-width: 79.16667%;
}
.col-xs-offset-19 {
margin-left: 79.16667%;
}
.col-xs-20 {
-ms-flex-preferred-size: 83.33334%;
flex-basis: 83.33334%;
max-width: 83.33334%;
}
.col-xs-offset-20 {
margin-left: 83.33334%;
}
.col-xs-21 {
-ms-flex-preferred-size: 87.50001%;
flex-basis: 87.50001%;
max-width: 87.50001%;
}
.col-xs-offset-21 {
margin-left: 87.50001%;
}
.col-xs-22 {
-ms-flex-preferred-size: 91.66667%;
flex-basis: 91.66667%;
max-width: 91.66667%;
}
.col-xs-offset-22 {
margin-left: 91.66667%;
}
.col-xs-23 {
-ms-flex-preferred-size: 95.83334%;
flex-basis: 95.83334%;
max-width: 95.83334%;
}
.col-xs-offset-23 {
margin-left: 95.83334%;
}
.col-xs-24 {
-ms-flex-preferred-size: 100.00001%;
flex-basis: 100.00001%;
max-width: 100.00001%;
}
.col-xs-offset-24 {
margin-left: 100.00001%;
}
}
/* screen sm */
@media screen and (min-width: 768px) {
.container {
width: 728px;
}
.col-sm, .col-sm-offset-0 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.col-sm-1, .col-sm-offset-1 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-sm-1, .no-gutter .col-sm-offset-1 {
padding-left: 0;
padding-right: 0;
}
.col-sm-2, .col-sm-offset-2 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-sm-2, .no-gutter .col-sm-offset-2 {
padding-left: 0;
padding-right: 0;
}
.col-sm-3, .col-sm-offset-3 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-sm-3, .no-gutter .col-sm-offset-3 {
padding-left: 0;
padding-right: 0;
}
.col-sm-4, .col-sm-offset-4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-sm-4, .no-gutter .col-sm-offset-4 {
padding-left: 0;
padding-right: 0;
}
.col-sm-5, .col-sm-offset-5 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-sm-5, .no-gutter .col-sm-offset-5 {
padding-left: 0;
padding-right: 0;
}
.col-sm-6, .col-sm-offset-6 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-sm-6, .no-gutter .col-sm-offset-6 {
padding-left: 0;
padding-right: 0;
}
.col-sm-7, .col-sm-offset-7 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-sm-7, .no-gutter .col-sm-offset-7 {
padding-left: 0;
padding-right: 0;
}
.col-sm-8, .col-sm-offset-8 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-sm-8, .no-gutter .col-sm-offset-8 {
padding-left: 0;
padding-right: 0;
}
.col-sm-9, .col-sm-offset-9 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-sm-9, .no-gutter .col-sm-offset-9 {
padding-left: 0;
padding-right: 0;
}
.col-sm-10, .col-sm-offset-10 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-sm-10, .no-gutter .col-sm-offset-10 {
padding-left: 0;
padding-right: 0;
}
.col-sm-11, .col-sm-offset-11 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-sm-11, .no-gutter .col-sm-offset-11 {
padding-left: 0;
padding-right: 0;
}
.col-sm-12, .col-sm-offset-12 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-sm-12, .no-gutter .col-sm-offset-12 {
padding-left: 0;
padding-right: 0;
}
.col-sm-13, .col-sm-offset-13 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-sm-13, .no-gutter .col-sm-offset-13 {
padding-left: 0;
padding-right: 0;
}
.col-sm-14, .col-sm-offset-14 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-sm-14, .no-gutter .col-sm-offset-14 {
padding-left: 0;
padding-right: 0;
}
.col-sm-15, .col-sm-offset-15 {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 4px;
padding-right: 4px;
}
.no-gutter .col-sm-15, .no-gutter .col-sm-offset-15 {
padding-left: 0;
padding-right: 0;
}
.col-sm-16, .col-sm-offset-16 {
-webkit-box-flex: 0;