@charset "UTF-8"; /*! * www.KNACSS.com v7.1.2 (january, 30 2019) @author: Alsacreations, Raphael Goetter * Licence WTFPL http://www.wtfpl.net/ */ /* ----------------------------- */ /* ==Table Of Content */ /* ----------------------------- */ /* 1- Reboot (basic reset) 2- Base : - Reset - Print - Layout (alignment, modules, positionning) - Utilities (width and spacers helpers) - Responsive helpers - WordPress reset (disabled by default) - Grillade (Grid System) 3- Components : - Media object - Skip Links for accessibility - Tables - Forms - Buttons - Checkbox - Tabs - Tags - Badges - Alerts */ /* ----------------------------- */ /* ==Reset (global) */ /* ----------------------------- */ /** * disable animations styles when reduced motion is enabled */ @media (prefers-reduced-motion: reduce) { * { -webkit-animation: none !important; animation: none !important; -webkit-transition: none !important; transition: none !important; } } /** * 1. switch to border-box model for all elements * 2. avoid min-width: auto and min-height: auto on flex and grid children */ *, *::before, *::after { box-sizing: border-box; /* 1 */ min-width: 0; /* 2 */ min-height: 0; /* 2 */ } /** * 1. remove the grey highlight on links in iOS * 2. prevent orientation font changes in iOS * 3. set base font-size to equiv "10px", which is adapted to rem unit */ html { -webkit-tap-highlight-color: transparent; /* 1 */ -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; /* 2 */ font-size: calc(1em * 0.625); /* 3 */ } body { margin: 0; font-size: 1.4rem; background-color: #fff; color: #212529; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; line-height: 1.5; } @media (min-width: 576px) { body { font-size: 1.6rem; } } /** * links */ a { color: #333; text-decoration: underline; } a:focus, a:hover, a:active { color: #0d0d0d; text-decoration: underline; } /** * headings */ h1, .h1-like { font-size: 2.8rem; font-family: sans-serif; font-weight: 500; } @media (min-width: 576px) { h1, .h1-like { font-size: 3.2rem; } } h2, .h2-like { font-size: 2.4rem; font-family: sans-serif; font-weight: 500; } @media (min-width: 576px) { h2, .h2-like { font-size: 2.8rem; } } h3, .h3-like { font-size: 2rem; font-weight: 500; } @media (min-width: 576px) { h3, .h3-like { font-size: 2.4rem; } } h4, .h4-like { font-size: 1.8rem; font-weight: 500; } @media (min-width: 576px) { h4, .h4-like { font-size: 2rem; } } h5, .h5-like { font-size: 1.6rem; font-weight: 500; } @media (min-width: 576px) { h5, .h5-like { font-size: 1.8rem; } } h6, .h6-like { font-size: 1.4rem; font-weight: 500; } @media (min-width: 576px) { h6, .h6-like { font-size: 1.6rem; } } /** * vertical rythm */ h1, h2, h3, h4, h5, h6, dd { margin-top: 0; margin-bottom: 0.5rem; } p, address, ol, ul, dl, blockquote, pre { margin-top: 0; margin-bottom: 1rem; } /** * avoid margin on nested elements */ li p, li .p-like, li ul, li ol, ol ol, ul ul { margin-top: 0; margin-bottom: 0; } /* ----------------------------- */ /* ==Reset (common styling) */ /* ----------------------------- */ a, area, button, [role="button"], .btn, .button, [type="button"] input:not([type="range"]), label, select, summary, textarea { touch-action: manipulation; } img, table, td, blockquote, code, pre, textarea, input, video, svg { max-width: 100%; } img { height: auto; vertical-align: middle; border-style: none; } /** * fill color matching to text color */ svg:not([fill]) { fill: currentColor; } ul, ol { padding-left: 2em; } b, strong { font-weight: bolder; } em, .italic, address, cite, i, var { font-style: italic; } /* ----------------------------- */ /* ==Reset (buttons) */ /* ----------------------------- */ input, button, select, optgroup, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; } /** * 1. show overflow in IE/Edge */ button, input { overflow: visible; /* 1 */ } /** * 1. remove the inheritance of text transform in Firefox */ button, select { text-transform: none; /* 1 */ } /** * 1. correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; -moz-appearance: button; appearance: button; /* 1 */ } /** * 1. 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; /* 1 */ padding: 0; } /** * 1. 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; /* 1 */ } /* ----------------------------- */ /* ==Reset (forms) */ /* ----------------------------- */ form, fieldset { border: none; } fieldset { padding: 2rem; } legend { padding: 0 0.5rem; border: 0; white-space: normal; } label { display: inline-block; cursor: pointer; } textarea { overflow: auto; min-height: 5em; vertical-align: top; resize: vertical; white-space: pre-wrap; } progress { display: inline-block; width: 100%; vertical-align: baseline; } /* ----------------------------- */ /* ==Reset (inputs) */ /* ----------------------------- */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [type="search"] { outline-offset: -2px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } ::-webkit-search-cancel-button, ::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } ::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; appearance: button; } output { display: inline-block; } summary { display: list-item; } template { display: none; } /* ----------------------------- */ /* ==Reset (misc styling) */ /* ----------------------------- */ pre, code, kbd, samp { font-family: monospace, monospace; font-size: 1em; white-space: pre-wrap; line-height: normal; } pre { overflow: auto; -moz-tab-size: 2; tab-size: 2; } code, kbd, mark { border-radius: 2px; } kbd { padding: 0 2px; border: 1px solid #999; } code { padding: 2px 4px; background: rgba(0, 0, 0, 0.04); color: #b11; } pre code { padding: 0; background: none; color: inherit; border-radius: 0; } mark { padding: 2px 4px; } sup, sub { vertical-align: 0; } sup { bottom: 1ex; } sub { top: 0.5ex; } /** * quotes, blockquote and hr styling */ blockquote { position: relative; padding-left: 3em; min-height: 2em; } blockquote::before { content: "\201C"; position: absolute; left: 0; top: 0; font-family: georgia, serif; font-size: 5em; height: .4em; line-height: .9; color: #e7e9ed; } blockquote > footer { margin-top: .75em; font-size: 0.9em; color: rgba(0, 0, 0, 0.7); } blockquote > footer::before { content: "\2014 \0020"; } q { font-style: normal; } q, .q { quotes: "“" "”" "‘" "’"; } q:lang(fr), .q:lang(fr) { quotes: "«\00a0" "\00a0»" "“" "”"; } hr { display: block; clear: both; height: 1px; margin: 1em 0 2em; padding: 0; border: 0; color: #ccc; background-color: #ccc; } blockquote, figure { margin-left: 0; margin-right: 0; } @media (max-width: 575px) { body, div, p, textarea, table, td, th, code, pre, samp { word-wrap: break-word; overflow-wrap: break-word; } } /* ----------------------------- */ /* ==Reset (IE rules) */ /* ----------------------------- */ @-ms-viewport { width: device-width; } @viewport { width: device-width; } article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; } /** * hide overflow in IE */ svg:not(:root) { overflow: hidden; } /* ----------------------------- */ /* ==Print (quick print reset) */ /* ----------------------------- */ @media print { * { background: transparent !important; box-shadow: none !important; text-shadow: none !important; } body { width: auto; margin: auto; font-family: serif; font-size: 12pt; } p, .p-like, h1, .h1-like, h2, .h2-like, h3, .h3-like, h4, .h4-like, h5, .h5-like, h6, .h6-like, blockquote, label, ul, ol { color: #000; margin: auto; } .print { display: block; } .no-print { display: none; } /* no orphans, no widows */ p, .p-like, blockquote { orphans: 3; widows: 3; } /* no breaks inside these elements */ blockquote, ul, ol { page-break-inside: avoid; } /* page break before main headers h1, .h1-like { page-break-before: always; } */ /* no breaks after these elements */ h1, .h1-like, h2, .h2-like, h3, .h3-like, caption { page-break-after: avoid; } a { color: #000; } /* displaying URLs a[href]::after { content: " (" attr(href) ")"; } */ a[href^="javascript:"]::after, a[href^="#"]::after { content: ""; } } /* ----------------------------- */ /* ==Global Micro Layout */ /* ----------------------------- */ /* Flexbox layout is KNACSS choice http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html */ .flex-container, .flex-container--row, .flex-row, .flex-container--column, .flex-column, .flex-container--row-reverse, .flex-row-reverse, .flex-container--column-reverse, .flex-column-reverse, .d-flex { display: -webkit-box; display: flex; flex-wrap: wrap; } .flex-container--row, .flex-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; } .flex-container--column, .flex-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; } .flex-container--row-reverse, .flex-row-reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; flex-direction: row-reverse; -webkit-box-pack: end; justify-content: flex-end; } .flex-container--column-reverse, .flex-column-reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; flex-direction: column-reverse; -webkit-box-pack: end; justify-content: flex-end; } .flex-item-fluid, .item-fluid { -webkit-box-flex: 1; flex: 1 1; } .flex-item-first, .item-first { -webkit-box-ordinal-group: 0; order: -1; } .flex-item-medium, .item-medium { -webkit-box-ordinal-group: 1; order: 0; } .flex-item-last, .item-last { -webkit-box-ordinal-group: 2; order: 1; } .flex-item-center, .item-center, .mr-auto { margin: auto; } /* --------------------------------------- */ /* ==Grillade : ultra light Grid System */ /* --------------------------------------- */ @media (min-width: 480px) { [class*=" grillade-"], [class^="grillade-"] { display: -ms-grid; display: grid; } [class*=" grillade-"].has-gutter, [class^="grillade-"].has-gutter { grid-gap: 1rem; } [class*=" grillade-"].has-gutter-l, [class^="grillade-"].has-gutter-l { grid-gap: 2rem; } [class*=" grillade-"].has-gutter-xl, [class^="grillade-"].has-gutter-xl { grid-gap: 4rem; } } @media (min-width: 480px) { .autogrillade, .grillade { display: -ms-grid; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; } .autogrillade.has-gutter, .grillade.has-gutter { grid-column-gap: 1rem; } .autogrillade.has-gutter-l, .grillade.has-gutter-l { grid-column-gap: 2rem; } .autogrillade.has-gutter-xl, .grillade.has-gutter-xl { grid-column-gap: 4rem; } } [class*="grillade-2"] { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); } [class*="grillade-3"] { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); } [class*="grillade-4"] { -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); } [class*="grillade-5"] { -ms-grid-columns: (1fr)[5]; grid-template-columns: repeat(5, 1fr); } [class*="grillade-6"] { -ms-grid-columns: (1fr)[6]; grid-template-columns: repeat(6, 1fr); } [class*="grillade-7"] { -ms-grid-columns: (1fr)[7]; grid-template-columns: repeat(7, 1fr); } [class*="grillade-8"] { -ms-grid-columns: (1fr)[8]; grid-template-columns: repeat(8, 1fr); } [class*="grillade-9"] { -ms-grid-columns: (1fr)[9]; grid-template-columns: repeat(9, 1fr); } [class*="grillade-10"] { -ms-grid-columns: (1fr)[10]; grid-template-columns: repeat(10, 1fr); } [class*="grillade-11"] { -ms-grid-columns: (1fr)[11]; grid-template-columns: repeat(11, 1fr); } [class*="grillade-12"] { -ms-grid-columns: (1fr)[12]; grid-template-columns: repeat(12, 1fr); } [class*="col-1"] { grid-column: auto/span 1; } [class*="row-1"] { grid-row: auto/span 1; } [class*="col-2"] { grid-column: auto/span 2; } [class*="row-2"] { grid-row: auto/span 2; } [class*="col-3"] { grid-column: auto/span 3; } [class*="row-3"] { grid-row: auto/span 3; } [class*="col-4"] { grid-column: auto/span 4; } [class*="row-4"] { grid-row: auto/span 4; } [class*="col-5"] { grid-column: auto/span 5; } [class*="row-5"] { grid-row: auto/span 5; } [class*="col-6"] { grid-column: auto/span 6; } [class*="row-6"] { grid-row: auto/span 6; } [class*="col-7"] { grid-column: auto/span 7; } [class*="row-7"] { grid-row: auto/span 7; } [class*="col-8"] { grid-column: auto/span 8; } [class*="row-8"] { grid-row: auto/span 8; } [class*="col-9"] { grid-column: auto/span 9; } [class*="row-9"] { grid-row: auto/span 9; } [class*="col-10"] { grid-column: auto/span 10; } [class*="row-10"] { grid-row: auto/span 10; } [class*="col-11"] { grid-column: auto/span 11; } [class*="row-11"] { grid-row: auto/span 11; } [class*="col-12"] { grid-column: auto/span 12; } [class*="row-12"] { grid-row: auto/span 12; } /* medium intermediate breakpoints */ @media (min-width: 480px) and (max-width: 991px) { [class*="grillade-"][class*="-medium-1"] { -ms-grid-columns: (1fr)[1]; grid-template-columns: repeat(1, 1fr); } [class*="col-"][class*="-medium-1"] { grid-column: auto/span 1; } [class*="grillade-"][class*="-medium-2"] { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); } [class*="col-"][class*="-medium-2"] { grid-column: auto/span 2; } [class*="grillade-"][class*="-medium-3"] { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); } [class*="col-"][class*="-medium-3"] { grid-column: auto/span 3; } [class*="grillade-"][class*="-medium-4"] { -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); } [class*="col-"][class*="-medium-4"] { grid-column: auto/span 4; } [class*="-medium-all"] { grid-column: 1 / -1; } } /* small intermediate breakpoints */ @media (min-width: 480px) and (max-width: 767px) { [class*="grillade-"][class*="-small-1"] { -ms-grid-columns: (1fr)[1]; grid-template-columns: repeat(1, 1fr); } [class*="col-"][class*="-small-1"] { grid-column: auto/span 1; } [class*="grillade-"][class*="-small-2"] { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); } [class*="col-"][class*="-small-2"] { grid-column: auto/span 2; } [class*="grillade-"][class*="-small-3"] { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); } [class*="col-"][class*="-small-3"] { grid-column: auto/span 3; } [class*="grillade-"][class*="-small-4"] { -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); } [class*="col-"][class*="-small-4"] { grid-column: auto/span 4; } [class*="-small-all"] { grid-column: 1 / -1; } } [class*="-start"] { -webkit-box-pack: start; justify-content: start; } [class*="-end"] { -webkit-box-pack: end; justify-content: end; } [class*="-center"] { -webkit-box-pack: center; justify-content: center; } [class*="-space-between"] { -webkit-box-pack: justify; justify-content: space-between; } [class*="-space-around"] { justify-content: space-around; } [class*="-space-evenly"] { -webkit-box-pack: space-evenly; justify-content: space-evenly; } .item-first { -webkit-box-ordinal-group: 0; order: -1; } .item-last { -webkit-box-ordinal-group: 2; order: 1; } .grid-offset { visibility: hidden; } .col-all { grid-column: 1 / -1; } .row-all { grid-row: 1 / -1; } /* ----------------------------- */ /* ==Alerts */ /* ----------------------------- */ /* use .alert-- classes for variants */ .alert, .alert--primary, .alert--success, .alert--info, .alert--warning, .alert--danger, .alert--inverse, .alert--ghost { padding: 1rem 1rem; margin-top: 0.75em; margin-bottom: 0; color: #212529; border-radius: 0; background-color: #e7e9ed; } .alert a, .alert--primary a, .alert--success a, .alert--info a, .alert--warning a, .alert--danger a, .alert--inverse a, .alert--ghost a { color: inherit; text-decoration: underline; } .alert--primary { background-color: #0275D8; color: #fff; box-shadow: none; } .alert--success { background-color: #5CB85C; color: #fff; box-shadow: none; } .alert--info { background-color: #5BC0DE; color: #000; box-shadow: none; } .alert--warning { background-color: #F0AD4E; color: #000; box-shadow: none; } .alert--danger { background-color: #D9534F; color: #fff; box-shadow: none; } .alert--inverse { background-color: #333; color: #fff; box-shadow: none; } .alert--ghost { background-color: transparent; color: #fff; box-shadow: 0 0 0 1px #fff inset; } .alert--small { font-size: 1.2rem; } .alert--big { font-size: 2rem; } .alert--block { width: 100% !important; display: block; } .alert.disabled, .disabled.alert--primary, .disabled.alert--success, .disabled.alert--info, .disabled.alert--warning, .disabled.alert--danger, .disabled.alert--inverse, .disabled.alert--ghost, .alert--disabled { opacity: 0.5; cursor: not-allowed; } .alert:empty, .alert--primary:empty, .alert--success:empty, .alert--info:empty, .alert--warning:empty, .alert--danger:empty, .alert--inverse:empty, .alert--ghost:empty { display: none; } /* ----------------------------- */ /* ==Arrows */ /* ----------------------------- */ /* see https://knacss.com/styleguide.html#arrows */ [class*="icon-arrow--"] { vertical-align: middle; } [class*="icon-arrow--"]::after { content: ""; display: inline-block; width: 1em; height: 1em; -webkit-mask-size: cover; mask-size: cover; background-color: #000; line-height: 1; } .icon-arrow--down::after { -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%2011.966%20L%203.523%205.589%20C%202.464%204.627%200.495%206.842%201.505%207.771%20L%201.505%207.771%20L%208.494%2014.763%20C%209.138%2015.35%2010.655%2015.369%2011.29%2014.763%20L%2011.29%2014.763%20L%2018.49%207.771%20C%2019.557%206.752%2017.364%204.68%2016.262%205.725%20L%2016.262%205.725%20L%209.96%2011.966%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%2011.966%20L%203.523%205.589%20C%202.464%204.627%200.495%206.842%201.505%207.771%20L%201.505%207.771%20L%208.494%2014.763%20C%209.138%2015.35%2010.655%2015.369%2011.29%2014.763%20L%2011.29%2014.763%20L%2018.49%207.771%20C%2019.557%206.752%2017.364%204.68%2016.262%205.725%20L%2016.262%205.725%20L%209.96%2011.966%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E"); } .icon-arrow--up::after { -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%208.596%20L%203.523%2014.973%20C%202.464%2015.935%200.495%2013.72%201.505%2012.791%20L%201.505%2012.791%20L%208.494%205.799%20C%209.138%205.212%2010.655%205.193%2011.29%205.799%20L%2011.29%205.799%20L%2018.49%2012.791%20C%2019.557%2013.809%2017.364%2015.882%2016.262%2014.837%20L%2016.262%2014.837%20L%209.96%208.596%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%208.596%20L%203.523%2014.973%20C%202.464%2015.935%200.495%2013.72%201.505%2012.791%20L%201.505%2012.791%20L%208.494%205.799%20C%209.138%205.212%2010.655%205.193%2011.29%205.799%20L%2011.29%205.799%20L%2018.49%2012.791%20C%2019.557%2013.809%2017.364%2015.882%2016.262%2014.837%20L%2016.262%2014.837%20L%209.96%208.596%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E"); } .icon-arrow--right::after { -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%2011.685%2010.321%20L%205.308%2016.758%20C%204.346%2017.817%206.561%2019.786%207.49%2018.776%20L%207.49%2018.776%20L%2014.482%2011.787%20C%2015.069%2011.142%2015.088%209.626%2014.482%208.991%20L%2014.482%208.991%20L%207.49%201.791%20C%206.472%200.724%204.399%202.916%205.444%204.019%20L%205.444%204.019%20L%2011.685%2010.321%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%2011.685%2010.321%20L%205.308%2016.758%20C%204.346%2017.817%206.561%2019.786%207.49%2018.776%20L%207.49%2018.776%20L%2014.482%2011.787%20C%2015.069%2011.142%2015.088%209.626%2014.482%208.991%20L%2014.482%208.991%20L%207.49%201.791%20C%206.472%200.724%204.399%202.916%205.444%204.019%20L%205.444%204.019%20L%2011.685%2010.321%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E"); } .icon-arrow--left::after { -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%208.315%2010.321%20L%2014.692%2016.758%20C%2015.654%2017.817%2013.439%2019.786%2012.51%2018.776%20L%2012.51%2018.776%20L%205.518%2011.787%20C%204.931%2011.142%204.912%209.626%205.518%208.991%20L%205.518%208.991%20L%2012.51%201.791%20C%2013.528%200.724%2015.601%202.916%2014.556%204.019%20L%2014.556%204.019%20L%208.315%2010.321%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%208.315%2010.321%20L%2014.692%2016.758%20C%2015.654%2017.817%2013.439%2019.786%2012.51%2018.776%20L%2012.51%2018.776%20L%205.518%2011.787%20C%204.931%2011.142%204.912%209.626%205.518%208.991%20L%205.518%208.991%20L%2012.51%201.791%20C%2013.528%200.724%2015.601%202.916%2014.556%204.019%20L%2014.556%204.019%20L%208.315%2010.321%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E"); } /* ----------------------------- */ /* ==Badges */ /* ----------------------------- */ /* use .badge-- classes for variants */ .badge, .badge--primary, .badge--success, .badge--info, .badge--warning, .badge--danger, .badge--inverse, .badge--ghost { display: inline-block; padding: 0.5rem; border-radius: 50%; color: #212529; background-color: #e7e9ed; line-height: 1; } .badge::before, .badge--primary::before, .badge--success::before, .badge--info::before, .badge--warning::before, .badge--danger::before, .badge--inverse::before, .badge--ghost::before { content: ""; display: inline-block; vertical-align: middle; padding-top: 100%; } .badge--primary { background-color: #0275D8; color: #fff; } .badge--success { background-color: #5CB85C; color: #fff; } .badge--info { background-color: #5BC0DE; color: #000; } .badge--warning { background-color: #F0AD4E; color: #000; } .badge--danger { background-color: #D9534F; color: #fff; } .badge--inverse { background-color: #333; color: #fff; } .badge--ghost { background-color: transparent; color: #fff; } .badge--small { font-size: 1.2rem; } .badge--big { font-size: 2rem; } .badge.disabled, .disabled.badge--primary, .disabled.badge--success, .disabled.badge--info, .disabled.badge--warning, .disabled.badge--danger, .disabled.badge--inverse, .disabled.badge--ghost, .badge--disabled { opacity: 0.5; cursor: not-allowed; } .badge:empty, .badge--primary:empty, .badge--success:empty, .badge--info:empty, .badge--warning:empty, .badge--danger:empty, .badge--inverse:empty, .badge--ghost:empty { display: none; } /* ----------------------------- */ /* ==Buttons styling */ /* ----------------------------- */ /* preferably use