admin-lte
Version:
Responsive open source admin dashboard and control panel.
1,175 lines (897 loc) • 130 kB
CSS
/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
/** 1. Change the default font family in all browsers (opinionated). 2. Prevent adjustments of font size after orientation changes in IE and iOS. */
html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ }
/** Remove the margin in all browsers (opinionated). */
body { margin: 0; }
/* HTML5 display definitions ========================================================================== */
/** Add the correct display in IE 9-. 1. Add the correct display in Edge, IE, and Firefox. 2. Add the correct display in IE. */
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section { /* 1 */ display: block; }
summary { display: list-item; }
/** Add the correct display in IE 9-. */
audio, canvas, progress, video { display: inline-block; }
/** Add the correct display in iOS 4-7. */
audio:not([controls]) { display: none; height: 0; }
/** Add the correct vertical alignment in Chrome, Firefox, and Opera. */
progress { vertical-align: baseline; }
/** Add the correct display in IE 10-. 1. Add the correct display in IE. */
template, [hidden] { display: none; }
/* Links ========================================================================== */
/** Remove the gray background on active links in IE 10. */
a { background-color: transparent; /* 1 */ }
/** Remove the outline on focused links when they are also active or hovered in all browsers (opinionated). */
a:active, a:hover { outline-width: 0; }
/* Text-level semantics ========================================================================== */
/** 1. Remove the bottom border in Firefox 39-. 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */
abbr[title] { border-bottom: 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; }
/** Add the correct font style in Android 4.3-. */
dfn { font-style: italic; }
/** Correct the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Firefox, and Safari. */
h1 { font-size: 2em; margin: 0.67em 0; }
/** 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 ========================================================================== */
/** Remove the border on images inside links in IE 10-. */
img { border-style: none; }
/** Hide the overflow in IE. */
svg:not(:root) { overflow: hidden; }
/* Grouping content ========================================================================== */
/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */
code, kbd, pre, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }
/** Add the correct margin in IE 8. */
figure { margin: 1em 40px; }
/** 1. Add the correct box sizing in Firefox. 2. Show the overflow in Edge and IE. */
hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ }
/* Forms ========================================================================== */
/** 1. Change font properties to `inherit` in all browsers (opinionated). 2. Remove the margin in Firefox and Safari. */
button, input, select, textarea { font: inherit; /* 1 */ margin: 0; /* 2 */ }
/** Restore the font weight unset by the previous rule. */
optgroup { font-weight: bold; }
/** Show the overflow in IE. 1. Show the overflow in Edge. */
button, input { /* 1 */ overflow: visible; }
/** Remove the inheritance of text transform in Edge, Firefox, and IE. 1. Remove the inheritance of text transform in Firefox. */
button, select { /* 1 */ text-transform: none; }
/** 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` controls in Android 4. 2. Correct the inability to style clickable types in iOS and Safari. */
button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ }
/** Remove the inner border and padding in Firefox. */
button::-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 { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ }
/** Remove the default vertical scrollbar in IE. */
textarea { overflow: auto; }
/** 1. Add the correct box sizing in IE 10-. 2. Remove the padding in IE 10-. */
[type="checkbox"], [type="radio"] { 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; }
/** Correct the text style of placeholders in Chrome, Edge, and Safari. */
::-webkit-input-placeholder { color: inherit; opacity: 0.54; }
/** 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */
::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ }
* { box-sizing: border-box; }
input, select, textarea, button { font-family: inherit; font-size: inherit; line-height: inherit; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 14px; line-height: 1.5; color: #24292e; background-color: #fff; }
a { color: #0366d6; text-decoration: none; }
a:hover { text-decoration: underline; }
b, strong { font-weight: 600; }
hr, .rule { height: 0; margin: 15px 0; overflow: hidden; background: transparent; border: 0; border-bottom: 1px solid #dfe2e5; }
hr::before, .rule::before { display: table; content: ""; }
hr::after, .rule::after { display: table; clear: both; content: ""; }
table { border-spacing: 0; border-collapse: collapse; }
td, th { padding: 0; }
button { cursor: pointer; border-radius: 0; }
details summary { cursor: pointer; }
details:not([open]) > *:not(summary) { display: none !important; }
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0; }
h1 { font-size: 32px; font-weight: 600; }
h2 { font-size: 24px; font-weight: 600; }
h3 { font-size: 20px; font-weight: 600; }
h4 { font-size: 16px; font-weight: 600; }
h5 { font-size: 14px; font-weight: 600; }
h6 { font-size: 12px; font-weight: 600; }
p { margin-top: 0; margin-bottom: 10px; }
small { font-size: 90%; }
blockquote { margin: 0; }
ul, ol { padding-left: 0; margin-top: 0; margin-bottom: 0; }
ol ol, ul ol { list-style-type: lower-roman; }
ul ul ol, ul ol ol, ol ul ol, ol ol ol { list-style-type: lower-alpha; }
dd { margin-left: 0; }
tt, code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; }
pre { margin-top: 0; margin-bottom: 0; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; }
.octicon { vertical-align: text-bottom; }
/* Fade in an element */
.anim-fade-in { animation-name: fade-in; animation-duration: 1s; animation-timing-function: ease-in-out; }
.anim-fade-in.fast { animation-duration: 300ms; }
@keyframes fade-in { 0% { opacity: 0; }
100% { opacity: 1; } }
/* Fade out an element */
.anim-fade-out { animation-name: fade-out; animation-duration: 1s; animation-timing-function: ease-out; }
.anim-fade-out.fast { animation-duration: 0.3s; }
@keyframes fade-out { 0% { opacity: 1; }
100% { opacity: 0; } }
/* Fade in and slide up an element */
.anim-fade-up { opacity: 0; animation-name: fade-up; animation-duration: 0.3s; animation-fill-mode: forwards; animation-timing-function: ease-out; animation-delay: 1s; }
@keyframes fade-up { 0% { opacity: 0.8; transform: translateY(100%); }
100% { opacity: 1; transform: translateY(0); } }
/* Fade an element out and slide down */
.anim-fade-down { animation-name: fade-down; animation-duration: 0.3s; animation-fill-mode: forwards; animation-timing-function: ease-in; }
@keyframes fade-down { 0% { opacity: 1; transform: translateY(0); }
100% { opacity: 0.5; transform: translateY(100%); } }
/* Grow an element width from 0 to 100% */
.anim-grow-x { width: 0%; animation-name: grow-x; animation-duration: 0.3s; animation-fill-mode: forwards; animation-timing-function: ease; animation-delay: 0.5s; }
@keyframes grow-x { to { width: 100%; } }
/* Shrink an element from 100% to 0% */
.anim-shrink-x { animation-name: shrink-x; animation-duration: 0.3s; animation-fill-mode: forwards; animation-timing-function: ease-in-out; animation-delay: 0.5s; }
@keyframes shrink-x { to { width: 0%; } }
/* Fade in an element and scale it fast */
.anim-scale-in { animation-name: scale-in; animation-duration: 0.15s; animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5); }
@keyframes scale-in { 0% { opacity: 0; transform: scale(0.5); }
100% { opacity: 1; transform: scale(1); } }
/* Pulse an element's opacity */
.anim-pulse { animation-name: pulse; animation-duration: 2s; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes pulse { 0% { opacity: 0.3; }
10% { opacity: 1; }
100% { opacity: 0.3; } }
/* Pulse in an element */
.anim-pulse-in { animation-name: pulse-in; animation-duration: 0.5s; }
@keyframes pulse-in { 0% { transform: scale3d(1, 1, 1); }
50% { transform: scale3d(1.1, 1.1, 1.1); }
100% { transform: scale3d(1, 1, 1); } }
/* Increase scale of an element on hover */
.hover-grow { transition: transform 0.3s; }
.hover-grow:hover { transform: scale(1.025); }
/* Add a gray border */
.border { border: 1px #e1e4e8 solid !important; }
/* Add a gray border to the top */
.border-top { border-top: 1px #e1e4e8 solid !important; }
/* Add a gray border to the right */
.border-right { border-right: 1px #e1e4e8 solid !important; }
/* Add a gray border to the bottom */
.border-bottom { border-bottom: 1px #e1e4e8 solid !important; }
/* Add a gray border to the left */
.border-left { border-left: 1px #e1e4e8 solid !important; }
/* Add a gray border to the left and right */
.border-y { border-top: 1px #e1e4e8 solid !important; border-bottom: 1px #e1e4e8 solid !important; }
.border-dashed { border-style: dashed !important; }
/* Use with .border to turn the border blue */
.border-blue { border-color: #0366d6 !important; }
/* Use with .border to turn the border blue-light */
.border-blue-light { border-color: #c8e1ff !important; }
/* Use with .border to turn the border green */
.border-green { border-color: #34d058 !important; }
/* Use with .border to turn the border green light */
.border-green-light { border-color: #a2cbac !important; }
/* Use with .border to turn the border red */
.border-red { border-color: #d73a49 !important; }
/* Use with .border to turn the border red-light */
.border-red-light { border-color: #cea0a5 !important; }
/* Use with .border to turn the border purple */
.border-purple { border-color: #6f42c1 !important; }
/* Use with .border to turn the border yellow */
.border-yellow { border-color: #d9d0a5 !important; }
/* Use with .border to turn the border gray-light */
.border-gray-light { border-color: #eaecef !important; }
/* Use with .border to turn the border gray-dark */
.border-gray-dark { border-color: #d1d5da !important; }
/* Use with .border to turn the border rgba black 0.15 */
.border-black-fade { border-color: rgba(27, 31, 35, 0.15) !important; }
/* Remove all borders */
.border-0 { border: 0 !important; }
/* Remove the top border */
.border-top-0 { border-top: 0 !important; }
/* Remove the right border */
.border-right-0 { border-right: 0 !important; }
/* Remove the bottom border */
.border-bottom-0 { border-bottom: 0 !important; }
/* Remove the left border */
.border-left-0 { border-left: 0 !important; }
/* Remove the border-radius */
.rounded-0 { border-radius: 0 !important; }
/* Add a border-radius to all corners */
.rounded-1 { border-radius: 3px !important; }
/* Add a 2x border-radius to all corners */
.rounded-2 { border-radius: 6px !important; }
/* Add a 50% border-radius to make something into a circle */
.circle { border-radius: 50% !important; }
.box-shadow { box-shadow: 0 1px 1px rgba(27, 31, 35, 0.1) !important; }
.box-shadow-medium { box-shadow: 0 1px 5px rgba(27, 31, 35, 0.15) !important; }
.box-shadow-large { box-shadow: 0 1px 15px rgba(27, 31, 35, 0.15) !important; }
.box-shadow-extra-large { box-shadow: 0 10px 50px rgba(27, 31, 35, 0.07) !important; }
.box-shadow-none { box-shadow: none !important; }
/* Set the background to $bg-white */
.bg-white { background-color: #fff !important; }
/* Set the background to $bg-blue */
.bg-blue { background-color: #0366d6 !important; }
/* Set the background to $bg-blue-light */
.bg-blue-light { background-color: #f1f8ff !important; }
/* Set the background to $bg-gray-dark */
.bg-gray-dark { background-color: #24292e !important; }
/* Set the background to $bg-gray */
.bg-gray { background-color: #f6f8fa !important; }
/* Set the background to $bg-gray-light */
.bg-gray-light { background-color: #fafbfc !important; }
/* Set the background to $bg-green */
.bg-green { background-color: #28a745 !important; }
/* Set the background to $bg-green-light */
.bg-green-light { background-color: #dcffe4 !important; }
/* Set the background to $bg-red */
.bg-red { background-color: #d73a49 !important; }
/* Set the background to $bg-red-light */
.bg-red-light { background-color: #ffdce0 !important; }
/* Set the background to $bg-yellow */
.bg-yellow { background-color: #ffd33d !important; }
/* Set the background to $bg-yellow-light */
.bg-yellow-light { background-color: #fff5b1 !important; }
/* Set the background to $bg-purple */
.bg-purple { background-color: #6f42c1 !important; }
/* Set the background to $bg-purple-light */
.bg-purple-light { background-color: #f5f0ff !important; }
.bg-shade-gradient { background-image: linear-gradient(180deg, rgba(27, 31, 35, 0.065), rgba(27, 31, 35, 0)) !important; background-repeat: no-repeat !important; background-size: 100% 200px !important; }
/* Set the text color to $text-blue */
.text-blue { color: #0366d6 !important; }
/* Set the text color to $text-red */
.text-red { color: #cb2431 !important; }
/* Set the text color to $text-gray-light */
.text-gray-light { color: #6a737d !important; }
/* Set the text color to $text-gray */
.text-gray { color: #586069 !important; }
/* Set the text color to $text-gray-dark */
.text-gray-dark { color: #24292e !important; }
/* Set the text color to $text-green */
.text-green { color: #28a745 !important; }
/* Set the text color to $text-orange */
.text-orange { color: #a04100 !important; }
/* Set the text color to $text-orange-light */
.text-orange-light { color: #e36209 !important; }
/* Set the text color to $text-purple */
.text-purple { color: #6f42c1 !important; }
/* Set the text color to $text-white */
.text-white { color: #fff !important; }
/* Set the text color to inherit */
.text-inherit { color: inherit !important; }
.text-pending { color: #b08800 !important; }
.bg-pending { color: #dbab09 !important; }
.link-gray { color: #586069 !important; }
.link-gray:hover { color: #0366d6 !important; }
.link-gray-dark { color: #24292e !important; }
.link-gray-dark:hover { color: #0366d6 !important; }
/* Set the link color to $text-blue on hover Useful when you want only part of a link to turn blue on hover */
.link-hover-blue:hover { color: #0366d6 !important; }
/* Make a link $text-gray, then $text-blue on hover and removes the underline */
.muted-link { color: #586069 !important; }
.muted-link:hover { color: #0366d6 !important; text-decoration: none; }
.flex-row { flex-direction: row !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-justify-start { justify-content: flex-start !important; }
.flex-justify-end { justify-content: flex-end !important; }
.flex-justify-center { justify-content: center !important; }
.flex-justify-between { justify-content: space-between !important; }
.flex-justify-around { justify-content: space-around !important; }
.flex-items-start { align-items: flex-start !important; }
.flex-items-end { align-items: flex-end !important; }
.flex-items-center { align-items: center !important; }
.flex-items-baseline { align-items: baseline !important; }
.flex-items-stretch { align-items: stretch !important; }
.flex-content-start { align-content: flex-start !important; }
.flex-content-end { align-content: flex-end !important; }
.flex-content-center { align-content: center !important; }
.flex-content-between { align-content: space-between !important; }
.flex-content-around { align-content: space-around !important; }
.flex-content-stretch { align-content: stretch !important; }
.flex-auto { flex: 1 1 auto !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-self-auto { align-self: auto !important; }
.flex-self-start { align-self: flex-start !important; }
.flex-self-end { align-self: flex-end !important; }
.flex-self-center { align-self: center !important; }
.flex-self-baseline { align-self: baseline !important; }
.flex-self-stretch { align-self: stretch !important; }
.flex-item-equal { flex-grow: 1; flex-basis: 0; }
@media (min-width: 544px) { .flex-sm-row { flex-direction: row !important; }
.flex-sm-row-reverse { flex-direction: row-reverse !important; }
.flex-sm-column { flex-direction: column !important; }
.flex-sm-wrap { flex-wrap: wrap !important; }
.flex-sm-nowrap { flex-wrap: nowrap !important; }
.flex-sm-justify-start { justify-content: flex-start !important; }
.flex-sm-justify-end { justify-content: flex-end !important; }
.flex-sm-justify-center { justify-content: center !important; }
.flex-sm-justify-between { justify-content: space-between !important; }
.flex-sm-justify-around { justify-content: space-around !important; }
.flex-sm-items-start { align-items: flex-start !important; }
.flex-sm-items-end { align-items: flex-end !important; }
.flex-sm-items-center { align-items: center !important; }
.flex-sm-items-baseline { align-items: baseline !important; }
.flex-sm-items-stretch { align-items: stretch !important; }
.flex-sm-content-start { align-content: flex-start !important; }
.flex-sm-content-end { align-content: flex-end !important; }
.flex-sm-content-center { align-content: center !important; }
.flex-sm-content-between { align-content: space-between !important; }
.flex-sm-content-around { align-content: space-around !important; }
.flex-sm-content-stretch { align-content: stretch !important; }
.flex-sm-auto { flex: 1 1 auto !important; }
.flex-sm-shrink-0 { flex-shrink: 0 !important; }
.flex-sm-self-auto { align-self: auto !important; }
.flex-sm-self-start { align-self: flex-start !important; }
.flex-sm-self-end { align-self: flex-end !important; }
.flex-sm-self-center { align-self: center !important; }
.flex-sm-self-baseline { align-self: baseline !important; }
.flex-sm-self-stretch { align-self: stretch !important; }
.flex-sm-item-equal { flex-grow: 1; flex-basis: 0; } }
@media (min-width: 768px) { .flex-md-row { flex-direction: row !important; }
.flex-md-row-reverse { flex-direction: row-reverse !important; }
.flex-md-column { flex-direction: column !important; }
.flex-md-wrap { flex-wrap: wrap !important; }
.flex-md-nowrap { flex-wrap: nowrap !important; }
.flex-md-justify-start { justify-content: flex-start !important; }
.flex-md-justify-end { justify-content: flex-end !important; }
.flex-md-justify-center { justify-content: center !important; }
.flex-md-justify-between { justify-content: space-between !important; }
.flex-md-justify-around { justify-content: space-around !important; }
.flex-md-items-start { align-items: flex-start !important; }
.flex-md-items-end { align-items: flex-end !important; }
.flex-md-items-center { align-items: center !important; }
.flex-md-items-baseline { align-items: baseline !important; }
.flex-md-items-stretch { align-items: stretch !important; }
.flex-md-content-start { align-content: flex-start !important; }
.flex-md-content-end { align-content: flex-end !important; }
.flex-md-content-center { align-content: center !important; }
.flex-md-content-between { align-content: space-between !important; }
.flex-md-content-around { align-content: space-around !important; }
.flex-md-content-stretch { align-content: stretch !important; }
.flex-md-auto { flex: 1 1 auto !important; }
.flex-md-shrink-0 { flex-shrink: 0 !important; }
.flex-md-self-auto { align-self: auto !important; }
.flex-md-self-start { align-self: flex-start !important; }
.flex-md-self-end { align-self: flex-end !important; }
.flex-md-self-center { align-self: center !important; }
.flex-md-self-baseline { align-self: baseline !important; }
.flex-md-self-stretch { align-self: stretch !important; }
.flex-md-item-equal { flex-grow: 1; flex-basis: 0; } }
@media (min-width: 1012px) { .flex-lg-row { flex-direction: row !important; }
.flex-lg-row-reverse { flex-direction: row-reverse !important; }
.flex-lg-column { flex-direction: column !important; }
.flex-lg-wrap { flex-wrap: wrap !important; }
.flex-lg-nowrap { flex-wrap: nowrap !important; }
.flex-lg-justify-start { justify-content: flex-start !important; }
.flex-lg-justify-end { justify-content: flex-end !important; }
.flex-lg-justify-center { justify-content: center !important; }
.flex-lg-justify-between { justify-content: space-between !important; }
.flex-lg-justify-around { justify-content: space-around !important; }
.flex-lg-items-start { align-items: flex-start !important; }
.flex-lg-items-end { align-items: flex-end !important; }
.flex-lg-items-center { align-items: center !important; }
.flex-lg-items-baseline { align-items: baseline !important; }
.flex-lg-items-stretch { align-items: stretch !important; }
.flex-lg-content-start { align-content: flex-start !important; }
.flex-lg-content-end { align-content: flex-end !important; }
.flex-lg-content-center { align-content: center !important; }
.flex-lg-content-between { align-content: space-between !important; }
.flex-lg-content-around { align-content: space-around !important; }
.flex-lg-content-stretch { align-content: stretch !important; }
.flex-lg-auto { flex: 1 1 auto !important; }
.flex-lg-shrink-0 { flex-shrink: 0 !important; }
.flex-lg-self-auto { align-self: auto !important; }
.flex-lg-self-start { align-self: flex-start !important; }
.flex-lg-self-end { align-self: flex-end !important; }
.flex-lg-self-center { align-self: center !important; }
.flex-lg-self-baseline { align-self: baseline !important; }
.flex-lg-self-stretch { align-self: stretch !important; }
.flex-lg-item-equal { flex-grow: 1; flex-basis: 0; } }
@media (min-width: 1280px) { .flex-xl-row { flex-direction: row !important; }
.flex-xl-row-reverse { flex-direction: row-reverse !important; }
.flex-xl-column { flex-direction: column !important; }
.flex-xl-wrap { flex-wrap: wrap !important; }
.flex-xl-nowrap { flex-wrap: nowrap !important; }
.flex-xl-justify-start { justify-content: flex-start !important; }
.flex-xl-justify-end { justify-content: flex-end !important; }
.flex-xl-justify-center { justify-content: center !important; }
.flex-xl-justify-between { justify-content: space-between !important; }
.flex-xl-justify-around { justify-content: space-around !important; }
.flex-xl-items-start { align-items: flex-start !important; }
.flex-xl-items-end { align-items: flex-end !important; }
.flex-xl-items-center { align-items: center !important; }
.flex-xl-items-baseline { align-items: baseline !important; }
.flex-xl-items-stretch { align-items: stretch !important; }
.flex-xl-content-start { align-content: flex-start !important; }
.flex-xl-content-end { align-content: flex-end !important; }
.flex-xl-content-center { align-content: center !important; }
.flex-xl-content-between { align-content: space-between !important; }
.flex-xl-content-around { align-content: space-around !important; }
.flex-xl-content-stretch { align-content: stretch !important; }
.flex-xl-auto { flex: 1 1 auto !important; }
.flex-xl-shrink-0 { flex-shrink: 0 !important; }
.flex-xl-self-auto { align-self: auto !important; }
.flex-xl-self-start { align-self: flex-start !important; }
.flex-xl-self-end { align-self: flex-end !important; }
.flex-xl-self-center { align-self: center !important; }
.flex-xl-self-baseline { align-self: baseline !important; }
.flex-xl-self-stretch { align-self: stretch !important; }
.flex-xl-item-equal { flex-grow: 1; flex-basis: 0; } }
/* Set position to static */
.position-static { position: static !important; }
/* Set position to relative */
.position-relative { position: relative !important; }
/* Set position to absolute */
.position-absolute { position: absolute !important; }
/* Set position to fixed */
.position-fixed { position: fixed !important; }
/* Set top 0 */
.top-0 { top: 0 !important; }
/* Set right 0 */
.right-0 { right: 0 !important; }
/* Set bottom 0 */
.bottom-0 { bottom: 0 !important; }
/* Set left 0 */
.left-0 { left: 0 !important; }
/* Vertical align middle */
.v-align-middle { vertical-align: middle !important; }
/* Vertical align top */
.v-align-top { vertical-align: top !important; }
/* Vertical align bottom */
.v-align-bottom { vertical-align: bottom !important; }
/* Vertical align to the top of the text */
.v-align-text-top { vertical-align: text-top !important; }
/* Vertical align to the bottom of the text */
.v-align-text-bottom { vertical-align: text-bottom !important; }
/* Vertical align to the parent's baseline */
.v-align-baseline { vertical-align: baseline !important; }
/* Set the overflow hidden */
.overflow-hidden { overflow: hidden !important; }
/* Set the overflow scroll */
.overflow-scroll { overflow: scroll !important; }
/* Set the overflow auto */
.overflow-auto { overflow: auto !important; }
/* Clear floats around the element */
.clearfix::before { display: table; content: ""; }
.clearfix::after { display: table; clear: both; content: ""; }
/* Float to the right */
.float-right { float: right !important; }
/* Float to the left */
.float-left { float: left !important; }
/* Don't float left or right */
.float-none { float: none !important; }
@media (min-width: 544px) { /* Float to the left at the sm breakpoint */
.float-sm-left { float: left !important; }
/* Float to the right at the sm breakpoint */
.float-sm-right { float: right !important; }
/* No float at the sm breakpoint */
.float-sm-none { float: none !important; } }
@media (min-width: 768px) { /* Float to the left at the md breakpoint */
.float-md-left { float: left !important; }
/* Float to the right at the md breakpoint */
.float-md-right { float: right !important; }
/* No float at the md breakpoint */
.float-md-none { float: none !important; } }
@media (min-width: 1012px) { /* Float to the left at the lg breakpoint */
.float-lg-left { float: left !important; }
/* Float to the right at the lg breakpoint */
.float-lg-right { float: right !important; }
/* No float at the lg breakpoint */
.float-lg-none { float: none !important; } }
@media (min-width: 1280px) { /* Float to the left at the xl breakpoint */
.float-xl-left { float: left !important; }
/* Float to the right at the xl breakpoint */
.float-xl-right { float: right !important; }
/* No float at the xl breakpoint */
.float-xl-none { float: none !important; } }
/* Max width 100% */
.width-fit { max-width: 100% !important; }
/* Set the width to 100% */
.width-full { width: 100% !important; }
/* Max height 100% */
.height-fit { max-height: 100% !important; }
/* Set the height to 100% */
.height-full { height: 100% !important; }
/* Remove min-width from element */
.min-width-0 { min-width: 0 !important; }
/* Set the direction to rtl */
.direction-rtl { direction: rtl !important; }
/* Set the direction to ltr */
.direction-ltr { direction: ltr !important; }
@media (min-width: 544px) { /* Set the direction to rtl at the sm breakpoint */
.direction-sm-rtl { direction: rtl !important; }
/* Set the direction to ltr at the sm breakpoint */
.direction-sm-ltr { direction: ltr !important; } }
@media (min-width: 768px) { /* Set the direction to rtl at the md breakpoint */
.direction-md-rtl { direction: rtl !important; }
/* Set the direction to ltr at the md breakpoint */
.direction-md-ltr { direction: ltr !important; } }
@media (min-width: 1012px) { /* Set the direction to rtl at the lg breakpoint */
.direction-lg-rtl { direction: rtl !important; }
/* Set the direction to ltr at the lg breakpoint */
.direction-lg-ltr { direction: ltr !important; } }
@media (min-width: 1280px) { /* Set the direction to rtl at the xl breakpoint */
.direction-xl-rtl { direction: rtl !important; }
/* Set the direction to ltr at the xl breakpoint */
.direction-xl-ltr { direction: ltr !important; } }
/* Set a 0 margin to all sides */
.m-0 { margin: 0 !important; }
/* Set a 0 margin on the top */
.mt-0 { margin-top: 0 !important; }
/* Set a 0 margin on the right */
.mr-0 { margin-right: 0 !important; }
/* Set a 0 margin on the bottom */
.mb-0 { margin-bottom: 0 !important; }
/* Set a 0 margin on the left */
.ml-0 { margin-left: 0 !important; }
/* Set a negative 0 margin on top */
.mt-n0 { margin-top: -0 !important; }
/* Set a negative 0 margin on the right */
.mr-n0 { margin-right: -0 !important; }
/* Set a negative 0 margin on the bottom */
.mb-n0 { margin-bottom: -0 !important; }
/* Set a negative 0 margin on the left */
.ml-n0 { margin-left: -0 !important; }
/* Set a 0 margin on the left & right */
.mx-0 { margin-right: 0 !important; margin-left: 0 !important; }
/* Set a 0 margin on the top & bottom */
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
/* Set a 4px margin to all sides */
.m-1 { margin: 4px !important; }
/* Set a 4px margin on the top */
.mt-1 { margin-top: 4px !important; }
/* Set a 4px margin on the right */
.mr-1 { margin-right: 4px !important; }
/* Set a 4px margin on the bottom */
.mb-1 { margin-bottom: 4px !important; }
/* Set a 4px margin on the left */
.ml-1 { margin-left: 4px !important; }
/* Set a negative 4px margin on top */
.mt-n1 { margin-top: -4px !important; }
/* Set a negative 4px margin on the right */
.mr-n1 { margin-right: -4px !important; }
/* Set a negative 4px margin on the bottom */
.mb-n1 { margin-bottom: -4px !important; }
/* Set a negative 4px margin on the left */
.ml-n1 { margin-left: -4px !important; }
/* Set a 4px margin on the left & right */
.mx-1 { margin-right: 4px !important; margin-left: 4px !important; }
/* Set a 4px margin on the top & bottom */
.my-1 { margin-top: 4px !important; margin-bottom: 4px !important; }
/* Set a 8px margin to all sides */
.m-2 { margin: 8px !important; }
/* Set a 8px margin on the top */
.mt-2 { margin-top: 8px !important; }
/* Set a 8px margin on the right */
.mr-2 { margin-right: 8px !important; }
/* Set a 8px margin on the bottom */
.mb-2 { margin-bottom: 8px !important; }
/* Set a 8px margin on the left */
.ml-2 { margin-left: 8px !important; }
/* Set a negative 8px margin on top */
.mt-n2 { margin-top: -8px !important; }
/* Set a negative 8px margin on the right */
.mr-n2 { margin-right: -8px !important; }
/* Set a negative 8px margin on the bottom */
.mb-n2 { margin-bottom: -8px !important; }
/* Set a negative 8px margin on the left */
.ml-n2 { margin-left: -8px !important; }
/* Set a 8px margin on the left & right */
.mx-2 { margin-right: 8px !important; margin-left: 8px !important; }
/* Set a 8px margin on the top & bottom */
.my-2 { margin-top: 8px !important; margin-bottom: 8px !important; }
/* Set a 16px margin to all sides */
.m-3 { margin: 16px !important; }
/* Set a 16px margin on the top */
.mt-3 { margin-top: 16px !important; }
/* Set a 16px margin on the right */
.mr-3 { margin-right: 16px !important; }
/* Set a 16px margin on the bottom */
.mb-3 { margin-bottom: 16px !important; }
/* Set a 16px margin on the left */
.ml-3 { margin-left: 16px !important; }
/* Set a negative 16px margin on top */
.mt-n3 { margin-top: -16px !important; }
/* Set a negative 16px margin on the right */
.mr-n3 { margin-right: -16px !important; }
/* Set a negative 16px margin on the bottom */
.mb-n3 { margin-bottom: -16px !important; }
/* Set a negative 16px margin on the left */
.ml-n3 { margin-left: -16px !important; }
/* Set a 16px margin on the left & right */
.mx-3 { margin-right: 16px !important; margin-left: 16px !important; }
/* Set a 16px margin on the top & bottom */
.my-3 { margin-top: 16px !important; margin-bottom: 16px !important; }
/* Set a 24px margin to all sides */
.m-4 { margin: 24px !important; }
/* Set a 24px margin on the top */
.mt-4 { margin-top: 24px !important; }
/* Set a 24px margin on the right */
.mr-4 { margin-right: 24px !important; }
/* Set a 24px margin on the bottom */
.mb-4 { margin-bottom: 24px !important; }
/* Set a 24px margin on the left */
.ml-4 { margin-left: 24px !important; }
/* Set a negative 24px margin on top */
.mt-n4 { margin-top: -24px !important; }
/* Set a negative 24px margin on the right */
.mr-n4 { margin-right: -24px !important; }
/* Set a negative 24px margin on the bottom */
.mb-n4 { margin-bottom: -24px !important; }
/* Set a negative 24px margin on the left */
.ml-n4 { margin-left: -24px !important; }
/* Set a 24px margin on the left & right */
.mx-4 { margin-right: 24px !important; margin-left: 24px !important; }
/* Set a 24px margin on the top & bottom */
.my-4 { margin-top: 24px !important; margin-bottom: 24px !important; }
/* Set a 32px margin to all sides */
.m-5 { margin: 32px !important; }
/* Set a 32px margin on the top */
.mt-5 { margin-top: 32px !important; }
/* Set a 32px margin on the right */
.mr-5 { margin-right: 32px !important; }
/* Set a 32px margin on the bottom */
.mb-5 { margin-bottom: 32px !important; }
/* Set a 32px margin on the left */
.ml-5 { margin-left: 32px !important; }
/* Set a negative 32px margin on top */
.mt-n5 { margin-top: -32px !important; }
/* Set a negative 32px margin on the right */
.mr-n5 { margin-right: -32px !important; }
/* Set a negative 32px margin on the bottom */
.mb-n5 { margin-bottom: -32px !important; }
/* Set a negative 32px margin on the left */
.ml-n5 { margin-left: -32px !important; }
/* Set a 32px margin on the left & right */
.mx-5 { margin-right: 32px !important; margin-left: 32px !important; }
/* Set a 32px margin on the top & bottom */
.my-5 { margin-top: 32px !important; margin-bottom: 32px !important; }
/* Set a 40px margin to all sides */
.m-6 { margin: 40px !important; }
/* Set a 40px margin on the top */
.mt-6 { margin-top: 40px !important; }
/* Set a 40px margin on the right */
.mr-6 { margin-right: 40px !important; }
/* Set a 40px margin on the bottom */
.mb-6 { margin-bottom: 40px !important; }
/* Set a 40px margin on the left */
.ml-6 { margin-left: 40px !important; }
/* Set a negative 40px margin on top */
.mt-n6 { margin-top: -40px !important; }
/* Set a negative 40px margin on the right */
.mr-n6 { margin-right: -40px !important; }
/* Set a negative 40px margin on the bottom */
.mb-n6 { margin-bottom: -40px !important; }
/* Set a negative 40px margin on the left */
.ml-n6 { margin-left: -40px !important; }
/* Set a 40px margin on the left & right */
.mx-6 { margin-right: 40px !important; margin-left: 40px !important; }
/* Set a 40px margin on the top & bottom */
.my-6 { margin-top: 40px !important; margin-bottom: 40px !important; }
/* Set an auto margin on left & right */
.mx-auto { margin-right: auto !important; margin-left: auto !important; }
@media (min-width: 544px) { /* Set a 0 margin to all sides at the breakpoint sm */
.m-sm-0 { margin: 0 !important; }
/* Set a 0 margin on the top at the breakpoint sm */
.mt-sm-0 { margin-top: 0 !important; }
/* Set a 0 margin on the right at the breakpoint sm */
.mr-sm-0 { margin-right: 0 !important; }
/* Set a 0 margin on the bottom at the breakpoint sm */
.mb-sm-0 { margin-bottom: 0 !important; }
/* Set a 0 margin on the left at the breakpoint sm */
.ml-sm-0 { margin-left: 0 !important; }
/* Set a negative 0 margin on top at the breakpoint sm */
.mt-sm-n0 { margin-top: -0 !important; }
/* Set a negative 0 margin on the right at the breakpoint sm */
.mr-sm-n0 { margin-right: -0 !important; }
/* Set a negative 0 margin on the bottom at the breakpoint sm */
.mb-sm-n0 { margin-bottom: -0 !important; }
/* Set a negative 0 margin on the left at the breakpoint sm */
.ml-sm-n0 { margin-left: -0 !important; }
/* Set a 0 margin on the left & right at the breakpoint sm */
.mx-sm-0 { margin-right: 0 !important; margin-left: 0 !important; }
/* Set a 0 margin on the top & bottom at the breakpoint sm */
.my-sm-0 { margin-top: 0 !important; margin-bottom: 0 !important; } }
@media (min-width: 544px) { /* Set a 4px margin to all sides at the breakpoint sm */
.m-sm-1 { margin: 4px !important; }
/* Set a 4px margin on the top at the breakpoint sm */
.mt-sm-1 { margin-top: 4px !important; }
/* Set a 4px margin on the right at the breakpoint sm */
.mr-sm-1 { margin-right: 4px !important; }
/* Set a 4px margin on the bottom at the breakpoint sm */
.mb-sm-1 { margin-bottom: 4px !important; }
/* Set a 4px margin on the left at the breakpoint sm */
.ml-sm-1 { margin-left: 4px !important; }
/* Set a negative 4px margin on top at the breakpoint sm */
.mt-sm-n1 { margin-top: -4px !important; }
/* Set a negative 4px margin on the right at the breakpoint sm */
.mr-sm-n1 { margin-right: -4px !important; }
/* Set a negative 4px margin on the bottom at the breakpoint sm */
.mb-sm-n1 { margin-bottom: -4px !important; }
/* Set a negative 4px margin on the left at the breakpoint sm */
.ml-sm-n1 { margin-left: -4px !important; }
/* Set a 4px margin on the left & right at the breakpoint sm */
.mx-sm-1 { margin-right: 4px !important; margin-left: 4px !important; }
/* Set a 4px margin on the top & bottom at the breakpoint sm */
.my-sm-1 { margin-top: 4px !important; margin-bottom: 4px !important; } }
@media (min-width: 544px) { /* Set a 8px margin to all sides at the breakpoint sm */
.m-sm-2 { margin: 8px !important; }
/* Set a 8px margin on the top at the breakpoint sm */
.mt-sm-2 { margin-top: 8px !important; }
/* Set a 8px margin on the right at the breakpoint sm */
.mr-sm-2 { margin-right: 8px !important; }
/* Set a 8px margin on the bottom at the breakpoint sm */
.mb-sm-2 { margin-bottom: 8px !important; }
/* Set a 8px margin on the left at the breakpoint sm */
.ml-sm-2 { margin-left: 8px !important; }
/* Set a negative 8px margin on top at the breakpoint sm */
.mt-sm-n2 { margin-top: -8px !important; }
/* Set a negative 8px margin on the right at the breakpoint sm */
.mr-sm-n2 { margin-right: -8px !important; }
/* Set a negative 8px margin on the bottom at the breakpoint sm */
.mb-sm-n2 { margin-bottom: -8px !important; }
/* Set a negative 8px margin on the left at the breakpoint sm */
.ml-sm-n2 { margin-left: -8px !important; }
/* Set a 8px margin on the left & right at the breakpoint sm */
.mx-sm-2 { margin-right: 8px !important; margin-left: 8px !important; }
/* Set a 8px margin on the top & bottom at the breakpoint sm */
.my-sm-2 { margin-top: 8px !important; margin-bottom: 8px !important; } }
@media (min-width: 544px) { /* Set a 16px margin to all sides at the breakpoint sm */
.m-sm-3 { margin: 16px !important; }
/* Set a 16px margin on the top at the breakpoint sm */
.mt-sm-3 { margin-top: 16px !important; }
/* Set a 16px margin on the right at the breakpoint sm */
.mr-sm-3 { margin-right: 16px !important; }
/* Set a 16px margin on the bottom at the breakpoint sm */
.mb-sm-3 { margin-bottom: 16px !important; }
/* Set a 16px margin on the left at the breakpoint sm */
.ml-sm-3 { margin-left: 16px !important; }
/* Set a negative 16px margin on top at the breakpoint sm */
.mt-sm-n3 { margin-top: -16px !important; }
/* Set a negative 16px margin on the right at the breakpoint sm */
.mr-sm-n3 { margin-right: -16px !important; }
/* Set a negative 16px margin on the bottom at the breakpoint sm */
.mb-sm-n3 { margin-bottom: -16px !important; }
/* Set a negative 16px margin on the left at the breakpoint sm */
.ml-sm-n3 { margin-left: -16px !important; }
/* Set a 16px margin on the left & right at the breakpoint sm */
.mx-sm-3 { margin-right: 16px !important; margin-left: 16px !important; }
/* Set a 16px margin on the top & bottom at the breakpoint sm */
.my-sm-3 { margin-top: 16px !important; margin-bottom: 16px !important; } }
@media (min-width: 544px) { /* Set a 24px margin to all sides at the breakpoint sm */
.m-sm-4 { margin: 24px !important; }
/* Set a 24px margin on the top at the breakpoint sm */
.mt-sm-4 { margin-top: 24px !important; }
/* Set a 24px margin on the right at the breakpoint sm */
.mr-sm-4 { margin-right: 24px !important; }
/* Set a 24px margin on the bottom at the breakpoint sm */
.mb-sm-4 { margin-bottom: 24px !important; }
/* Set a 24px margin on the left at the breakpoint sm */
.ml-sm-4 { margin-left: 24px !important; }
/* Set a negative 24px margin on top at the breakpoint sm */
.mt-sm-n4 { margin-top: -24px !important; }
/* Set a negative 24px margin on the right at the breakpoint sm */
.mr-sm-n4 { margin-right: -24px !important; }
/* Set a negative 24px margin on the bottom at the breakpoint sm */
.mb-sm-n4 { margin-bottom: -24px !important; }
/* Set a negative 24px margin on the left at the breakpoint sm */
.ml-sm-n4 { margin-left: -24px !important; }
/* Set a 24px margin on the left & right at the breakpoint sm */
.mx-sm-4 { margin-right: 24px !important; margin-left: 24px !important; }
/* Set a 24px margin on the top & bottom at the breakpoint sm */
.my-sm-4 { margin-top: 24px !important; margin-bottom: 24px !important; } }
@media (min-width: 544px) { /* Set a 32px margin to all sides at the breakpoint sm */
.m-sm-5 { margin: 32px !important; }
/* Set a 32px margin on the top at the breakpoint sm */
.mt-sm-5 { margin-top: 32px !important; }
/* Set a 32px margin on the right at the breakpoint sm */
.mr-sm-5 { margin-right: 32px !important; }
/* Set a 32px margin on the bottom at the breakpoint sm */
.mb-sm-5 { margin-bottom: 32px !important; }
/* Set a 32px margin on the left at the breakpoint sm */
.ml-sm-5 { margin-left: 32px !important; }
/* Set a negative 32px margin on top at the breakpoint sm */
.mt-sm-n5 { margin-top: -32px !important; }
/* Set a negative 32px margin on the right at the breakpoint sm */
.mr-sm-n5 { margin-right: -32px !important; }
/* Set a negative 32px margin on the bottom at the breakpoint sm */
.mb-sm-n5 { margin-bottom: -32px !important; }
/* Set a negative 32px margin on the left at the breakpoint sm */
.ml-sm-n5 { margin-left: -32px !important; }
/* Set a 32px margin on the left & right at the breakpoint sm */
.mx-sm-5 { margin-right: 32px !important; margin-left: 32px !important; }
/* Set a 32px margin on the top & bottom at the breakpoint sm */
.my-sm-5 { margin-top: 32px !important; margin-bottom: 32px !important; } }
@media (min-width: 544px) { /* Set a 40px margin to all sides at the breakpoint sm */
.m-sm-6 { margin: 40px !important; }
/* Set a 40px margin on the top at the breakpoint sm */
.mt-sm-6 { margin-top: 40px !important; }
/* Set a 40px margin on the right at the breakpoint sm */
.mr-sm-6 { margin-right: 40px !important; }
/* Set a 40px margin on the bottom at the breakpoint sm */
.mb-sm-6 { margin-bottom: 40px !important; }
/* Set a 40px margin on the left at the breakpoint sm */
.ml-sm-6 { margin-left: 40px !important; }
/* Set a negative 40px margin on top at the breakpoint sm */
.mt-sm-n6 { margin-top: -40px !important; }
/* Set a negative 40px margin on the right at the breakpoint sm */
.mr-sm-n6 { margin-right: -40px !important; }
/* Set a negative 40px margin on the bottom at the breakpoint sm */
.mb-sm-n6 { margin-bottom: -40px !important; }
/* Set a negative 40px margin on the left at the breakpoint sm */
.ml-sm-n6 { margin-left: -40px !important; }
/* Set a 40px margin on the left & right at the breakpoint sm */
.mx-sm-6 { margin-right: 40px !important; margin-left: 40px !important; }
/* Set a 40px margin on the top & bottom at the breakpoint sm */
.my-sm-6 { margin-top: 40px !important; margin-bottom: 40px !important; } }
@media (min-width: 768px) { /* Set a 0 margin to all sides at the breakpoint md */
.m-md-0 { margin: 0 !important; }
/* Set a 0 margin on the top at the breakpoint md */
.mt-md-0 { margin-top: 0 !important; }
/* Set a 0 margin on the right at the breakpoint md */
.mr-md-0 { margin-right: 0 !important; }
/* Set a 0 margin on the bottom at the breakpoint md */
.mb-md-0 { margin-bottom: 0 !important; }
/* Set a 0 margin on the left at the breakpoint md */
.ml-md-0 { margin-left: 0 !important; }
/* Set a negative 0 margin on top at the breakpoint md */
.mt-md-n0 { margin-top: -0 !important; }
/* Set a negative 0 margin on the right at the breakpoint md */
.mr-md-n0 { margin-right: -0 !important; }
/* Set a negative 0 margin on the bottom at the breakpoint md */
.mb-md-n0 { margin-bottom: -0 !important; }
/* Set a negative 0 margin on the left at the breakpoint md */
.ml-md-n0 { margin-left: -0 !important; }
/* Set a 0 margin on the left & right at the breakpoint md */
.mx-md-0 { margin-right: 0 !important; margin-left: 0 !important; }
/* Set a 0 margin on the top & bottom at the breakpoint md */
.my-md-0 { margin-top: 0 !important; margin-bottom: 0 !important; } }
@media (min-width: 768px) { /* Set a 4px margin to all sides at the breakpoint md */
.m-md-1 { margin: 4px !important; }
/* Set a 4px margin on the top at the breakpoint md */
.mt-md-1 { margin-top: 4px !important; }
/* Set a 4px margin on the right at the breakpoint md */
.mr-md-1 { margin-right: 4px !important; }
/* Set a 4px margin on the bottom at the breakpoint md */
.mb-md-1 { margin-bottom: 4px !important; }
/* Set a 4px margin on the left at the breakpoint md */
.ml-md-1 { margin-left: 4px !important; }
/* Set a negative 4px margin on top at the breakpoint md */
.mt-md-n1 { margin-top: -4px !important; }
/* Set a negative 4px margin on the right at the breakpoint md */
.mr-md-n1 { margin-right: -4px !important; }
/* Set a negative 4px margin on the bottom at the breakpoint md */
.mb-md-n1 { margin-bottom: -4px !important; }
/* Set a negative 4px margin on the left at the breakpoint md */
.ml-md-n1 { margin-left: -4px !important; }
/* Set a 4px margin on the left & right at the breakpoint md */
.mx-md-1 { margin-right: 4px !important; margin-left: 4px !important; }
/* Set a 4px margin on the top & bottom at the breakpoint md */
.my-md-1 { margin-top: 4px !important; margin-bottom: 4px !important; } }
@media (min-width: 768px) { /* Set a 8px margin to all sides at the breakpoint md */
.m-md-2 { margin: 8px !important; }
/* Set a 8px margin on the top at the breakpoint md */
.mt-md-2 { margin-top: 8px !important; }
/* Set a 8px margin on the right at the breakpoint md */
.mr-md-2 { margin-right: 8px !important; }
/* Set a 8px margin on the bottom at the breakpoint md */
.mb-md-2 { margin-bottom: 8px !important; }
/* Set a 8px margin on the left at the breakpoint md */
.ml-md-2 { margin-left: 8px !important; }
/* Set a negative 8px margin on top at the breakpoint md */
.mt-md-n2 { margin-top: -8px !important; }
/* Set a negative 8px margin on the right at the breakpoint md */
.mr-md-n2 { margin-right: -8px !important; }
/* Set a negative 8px margin on the bottom at the breakpoint md */
.mb-md-n2 { margin-bottom: -8px !important; }
/* Set a negative 8px margin on the left at the breakpoint md */
.ml-md-n2 { margin-left: -8