/* Sassquatch Version: 0.1 Author: Kevin Andrews sassquatch uses the BEM css class naming convention. .block__element .block--modifier .block__element--modifier .block--modifier__element--modifier */ /* VARIABLES ------------------------------------------------------------------------------*/ /* Brand Colours ------------------------------------------------------------------------------*/ /* General Colours ------------------------------------------------------------------------------*/ /* Contextual Colours ------------------------------------------------------------------------------*/ /* ANIMATIONS ------------------------------------------------------------------------------*/ @-webkit-keyframes hover-button-horizontal { 16.65% { -webkit-transform: translate(5px, 0); transform: translate(5px, 0); } 33.3% { -webkit-transform: translate(-5px, 0); transform: translate(-5px, 0); } 49.95% { -webkit-transform: translate(4px, 0); transform: translate(4px, 0); } 66.6% { -webkit-transform: translate(-2px, 0); transform: translate(-2px, 0); } 83.25% { -webkit-transform: translate(1px, 0); transform: translate(1px, 0); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-moz-keyframes hover-button-horizontal { 16.65% { -moz-transform: translate(5px, 0); transform: translate(5px, 0); } 33.3% { -moz-transform: translate(-5px, 0); transform: translate(-5px, 0); } 49.95% { -moz-transform: translate(4px, 0); transform: translate(4px, 0); } 66.6% { -moz-transform: translate(-2px, 0); transform: translate(-2px, 0); } 83.25% { -moz-transform: translate(1px, 0); transform: translate(1px, 0); } 100% { -moz-transform: translate(0, 0); transform: translate(0, 0); } } @-o-keyframes hover-button-horizontal { 16.65% { -o-transform: translate(5px, 0); transform: translate(5px, 0); } 33.3% { -o-transform: translate(-5px, 0); transform: translate(-5px, 0); } 49.95% { -o-transform: translate(4px, 0); transform: translate(4px, 0); } 66.6% { -o-transform: translate(-2px, 0); transform: translate(-2px, 0); } 83.25% { -o-transform: translate(1px, 0); transform: translate(1px, 0); } 100% { -o-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes hover-button-horizontal { 16.65% { -webkit-transform: translate(5px, 0); -moz-transform: translate(5px, 0); -o-transform: translate(5px, 0); transform: translate(5px, 0); } 33.3% { -webkit-transform: translate(-5px, 0); -moz-transform: translate(-5px, 0); -o-transform: translate(-5px, 0); transform: translate(-5px, 0); } 49.95% { -webkit-transform: translate(4px, 0); -moz-transform: translate(4px, 0); -o-transform: translate(4px, 0); transform: translate(4px, 0); } 66.6% { -webkit-transform: translate(-2px, 0); -moz-transform: translate(-2px, 0); -o-transform: translate(-2px, 0); transform: translate(-2px, 0); } 83.25% { -webkit-transform: translate(1px, 0); -moz-transform: translate(1px, 0); -o-transform: translate(1px, 0); transform: translate(1px, 0); } 100% { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes hover-button-vertical { 16.65% { -webkit-transform: translate(0, 5px); transform: translate(0, 5px); } 33.3% { -webkit-transform: translate(0, -5px); transform: translate(0, -5px); } 49.95% { -webkit-transform: translate(0, 4px); transform: translate(0, 4px); } 66.6% { -webkit-transform: translate(0, -2px); transform: translate(0, -2px); } 83.25% { -webkit-transform: translate(0, 1px); transform: translate(0, 1px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-moz-keyframes hover-button-vertical { 16.65% { -moz-transform: translate(0, 5px); transform: translate(0, 5px); } 33.3% { -moz-transform: translate(0, -5px); transform: translate(0, -5px); } 49.95% { -moz-transform: translate(0, 4px); transform: translate(0, 4px); } 66.6% { -moz-transform: translate(0, -2px); transform: translate(0, -2px); } 83.25% { -moz-transform: translate(0, 1px); transform: translate(0, 1px); } 100% { -moz-transform: translate(0, 0); transform: translate(0, 0); } } @-o-keyframes hover-button-vertical { 16.65% { -o-transform: translate(0, 5px); transform: translate(0, 5px); } 33.3% { -o-transform: translate(0, -5px); transform: translate(0, -5px); } 49.95% { -o-transform: translate(0, 4px); transform: translate(0, 4px); } 66.6% { -o-transform: translate(0, -2px); transform: translate(0, -2px); } 83.25% { -o-transform: translate(0, 1px); transform: translate(0, 1px); } 100% { -o-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes hover-button-vertical { 16.65% { -webkit-transform: translate(0, 5px); -moz-transform: translate(0, 5px); -o-transform: translate(0, 5px); transform: translate(0, 5px); } 33.3% { -webkit-transform: translate(0, -5px); -moz-transform: translate(0, -5px); -o-transform: translate(0, -5px); transform: translate(0, -5px); } 49.95% { -webkit-transform: translate(0, 4px); -moz-transform: translate(0, 4px); -o-transform: translate(0, 4px); transform: translate(0, 4px); } 66.6% { -webkit-transform: translate(0, -2px); -moz-transform: translate(0, -2px); -o-transform: translate(0, -2px); transform: translate(0, -2px); } 83.25% { -webkit-transform: translate(0, 1px); -moz-transform: translate(0, 1px); -o-transform: translate(0, 1px); transform: translate(0, 1px); } 100% { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } } /* MIXINS ------------------------------------------------------------------------------*/ /* Hide elements while remaining accessible */ /* Reset styles applied with the set-webaim-hidden mixin */ /* Adds depth to the element */ /* Adds an animated effect to link interactions */ /* Styles element as a CSS triangle */ /* Converts pixel font size value into EM based on base font size variable */ /* CONFIGURATION ------------------------------------------------------------------------------*/ /* CSS RESET ------------------------------------------------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* Load Fonts Here ------------------------------------------------------------------------------*/ /* --------------- System Tabs --------------- */ div.tabs { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; margin-bottom: 20px; } .tabs ul.primary { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; margin-bottom: 20px !important; } .tabs ul.primary li a { color: #000; background-color: #ededed; border-color: #bbb; border-style: solid solid none solid; border-width: 1px; height: 1.8em; line-height: 1.9; display: block; font-size: 0.929em; padding: 0 10px 3px; text-shadow: 0 1px 0 #fff; } .tabs ul.primary li.is-active a { background-color: #ffffff; border: 1px solid #bbb; } @media screen and (max-width: 37.5em) { /* 600px */ .tabs ul.primary { border-bottom: 1px solid #bbb; } .tabs ul.primary li { display: block; margin: 0; } .tabs ul.primary li a { padding: 5px 10px; } .tabs ul.primary li.is-active a { border-bottom: none; } } @media screen and (min-width: 37.5em) { /* 600px */ .tabs ul.primary { border-collapse: collapse; height: auto; line-height: normal; padding: 0 3px; margin: 0; overflow: hidden; border: none !important; background: transparent url(../../assets/images/tabs-border.png) repeat-x left bottom; white-space: nowrap; } .tabs ul.primary li { display: block; float: left; /* LTR */ vertical-align: bottom; margin: 0 5px 0 0; /* LTR */ } [dir="rtl"] .tabs ul.primary li { margin: 0 0 0 5px; float: right; } .tabs ul.primary li a { float: left; /* not LTR */ -webkit-border-top-left-radius: 6px; -moz-border-radius-topleft: 6px; border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topright: 6px; border-top-right-radius: 6px; } .tabs ul.primary li.is-active a { border-bottom: 1px solid #fff; } } .tabs ul.secondary { border-bottom: none; margin: 5px; padding: 0.5em 0; overflow: hidden; } .tabs ul.secondary li { border-right: 1px solid #ccc; /* LTR */ display: block; float: left; /* LTR */ margin: 0; padding: 0 1em; } [dir="rtl"] .tabs ul.secondary li { border-left: 1px solid #ccc; border-right: none; float: right; } .tabs ul.secondary li:last-child { border-right: none; /* LTR */ } [dir="rtl"] .tabs ul.secondary li:last-child { border-left: none; } .tabs ul.secondary li:first-child { padding-left: 0; /* LTR */ } [dir="rtl"] .tabs ul.secondary li:first-child { padding-right: 0; } .tabs ul.secondary li a { display: inline; padding: 0.25em 0.5em; text-decoration: none; } .tabs ul.secondary li a.is-active { background: #f2f2f2; border-bottom: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } nav.tabs { position: relative; z-index: 100; } /* THEME BASELINE STYLES ------------------------------------------------------------------------------*/ html, body { font-size: 16px; font-family: "Open Sans", "Helvetica Nueue", "Arial", sans-serif; line-height: 1.4; margin: 0; color: #636569; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *:first-child { margin-top: 0; } *:last-child { margin-bottom: 0; } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: "Open Sans", "Helvetica Nueue", "Arial", sans-serif; margin-bottom: 30px; margin-top: 15px; } h1:first-child, .h1:first-child, h2:first-child, .h2:first-child, h3:first-child, .h3:first-child, h4:first-child, .h4:first-child, h5:first-child, .h5:first-child, h6:first-child, .h6:first-child { margin-top: 0; } * + h1, * + .h1, * + h2, * + .h2, * + h3, * + .h3, * + h4, * + .h4, * + h5, * + .h5, * + h6, * + .h6 { margin-top: 45px; } h1, .h1 { font-size: 2em; font-weight: 700; line-height: 1.1875; } h2, .h2 { font-size: 1.75em; font-weight: 300; line-height: 1.21429; } h3, .h3 { font-size: 1.5em; font-weight: 600; line-height: 1.16667; } h4, .h4 { font-size: 1.25em; font-weight: 600; line-height: 1.2; } h5, .h5 { font-size: 1.125em; font-weight: 700; line-height: 1.22222; } h6, .h6 { font-size: 1em; font-weight: 600; line-height: 1.25; } p, .p { margin-bottom: 15px; } a { color: #D44424; -webkit-transition: color 0.2s ease-in-out; -o-transition: color 0.2s ease-in-out; -moz-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; display: inline; padding: 0; margin: 0; text-decoration: none; border-bottom: 1px solid #D44424; -webkit-transition: border 0.2s ease-in-out; -o-transition: border 0.2s ease-in-out; -moz-transition: border 0.2s ease-in-out; transition: border 0.2s ease-in-out; } a:hover, a:focus { border-bottom: 1px solid transparent; } a:hover, a:focus { color: #F9471F; } a:hover:after, a:focus:after { color: #F9471F; } a:active { color: #B1351A; } a:active:after { color: #B1351A; } a.icon--link { border-bottom: 0 none; } a.icon--link span { display: inline-block; border-bottom: 1px solid; -webkit-transition: 300ms ease; -o-transition: 300ms ease; -moz-transition: 300ms ease; transition: 300ms ease; } a.icon--link i::before { color: #636569; margin-right: 10px; } a.icon--link:hover span, a.icon--link:active span, a.icon--link:focus span { border-color: #ffffff; } img { border: none; } img:only-child { display: block; } strong { font-weight: bold; } em { font-style: italic; } small { font-size: 0.8em; } sup, sub { font-size: 0.6em; } sup { vertical-align: text-top; } sub { vertical-align: text-bottom; } ul { list-style: initial; } ol { list-style-type: decimal; } ul, ol { padding-left: 20px; margin-bottom: 25px; } ul li, ol li { margin-bottom: 10px; } ul li > ul, ul li > ol, ol li > ul, ol li > ol { margin-top: 10px; } ul li > ul:last-child, ul li > ol:last-child, ol li > ul:last-child, ol li > ol:last-child { margin-top: 10px; } hr { margin: 15px 0; border: none; height: 1px; width: 100%; background: #D9D8D6; } nav ul, nav ol { list-style: none; padding-left: 0; } nav ul li, nav ol li { margin-bottom: 0; } nav ul li > ul, nav ul li > ol, nav ol li > ul, nav ol li > ol { margin-top: 0; } nav ul li > ul:last-child, nav ul li > ol:last-child, nav ol li > ul:last-child, nav ol li > ol:last-child { margin-top: 0; } section { padding: 30px 0; } details { display: block; } details summary { padding: 10px; } select::-ms-expand { display: none; } /* THEME STRUCTURE ------------------------------------------------------------------------------*/ /* GRID ---------------------------------------------------------------------------*/ *[class*="grid__col"] { padding: 0 15px; margin-bottom: 30px; width: 100%; } *[class*="grid__col"]:last-of-type { margin-bottom: 0; } .grid { margin: 0 -15px; margin-bottom: 30px; } .grid:after { clear: both; content: ""; display: table; } .grid.no-margin { margin-bottom: 0; } .grid:last-of-type { margin-bottom: 0; } .grid__col--1 { width: 8.33333%; float: left; margin-bottom: 0; } .grid__col--offset-right-1 { margin-left: 8.33333%; } .grid__col--offset-left-1 { margin-left: -8.33333%; } .grid__col--2 { width: 16.66667%; float: left; margin-bottom: 0; } .grid__col--offset-right-2 { margin-left: 16.66667%; } .grid__col--offset-left-2 { margin-left: -16.66667%; } .grid__col--3 { width: 25%; float: left; margin-bottom: 0; } .grid__col--offset-right-3 { margin-left: 25%; } .grid__col--offset-left-3 { margin-left: -25%; } .grid__col--4 { width: 33.33333%; float: left; margin-bottom: 0; } .grid__col--offset-right-4 { margin-left: 33.33333%; } .grid__col--offset-left-4 { margin-left: -33.33333%; } .grid__col--5 { width: 41.66667%; float: left; margin-bottom: 0; } .grid__col--offset-right-5 { margin-left: 41.66667%; } .grid__col--offset-left-5 { margin-left: -41.66667%; } .grid__col--6 { width: 50%; float: left; margin-bottom: 0; } .grid__col--offset-right-6 { margin-left: 50%; } .grid__col--offset-left-6 { margin-left: -50%; } .grid__col--7 { width: 58.33333%; float: left; margin-bottom: 0; } .grid__col--offset-right-7 { margin-left: 58.33333%; } .grid__col--offset-left-7 { margin-left: -58.33333%; } .grid__col--8 { width: 66.66667%; float: left; margin-bottom: 0; } .grid__col--offset-right-8 { margin-left: 66.66667%; } .grid__col--offset-left-8 { margin-left: -66.66667%; } .grid__col--9 { width: 75%; float: left; margin-bottom: 0; } .grid__col--offset-right-9 { margin-left: 75%; } .grid__col--offset-left-9 { margin-left: -75%; } .grid__col--10 { width: 83.33333%; float: left; margin-bottom: 0; } .grid__col--offset-right-10 { margin-left: 83.33333%; } .grid__col--offset-left-10 { margin-left: -83.33333%; } .grid__col--11 { width: 91.66667%; float: left; margin-bottom: 0; } .grid__col--offset-right-11 { margin-left: 91.66667%; } .grid__col--offset-left-11 { margin-left: -91.66667%; } .grid__col--12 { width: 100%; float: left; margin-bottom: 0; } .grid__col--offset-right-12 { margin-left: 100%; } .grid__col--offset-left-12 { margin-left: -100%; } .grid--flush { margin: 0; margin-bottom: 0; } .grid--flush *[class*="grid__col"] { padding: 0; margin-bottom: 0; } .grid--flex { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-flow: row wrap; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; } .grid--flex *[class*="grid__col"] { float: none; } .grid--flex-centered { -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .grid--flex-end { -webkit-box-align: end; -webkit-align-items: flex-end; -moz-box-align: end; -ms-flex-align: end; align-items: flex-end; } .grid--align-justify { -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .grid--align-end { -webkit-box-pack: end; -webkit-justify-content: flex-end; -moz-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } @media (min-width: 480px) { .grid--flex-sm { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .grid--flex-sm .grid__col { margin-bottom: 0; } .grid__col--sm-1 { width: 8.33333%; float: left; margin-bottom: 0; } .grid__col--offset-right-sm-1 { margin-left: 8.33333%; } .grid__col--offset-left-sm-1 { margin-left: -8.33333%; } .grid__col--sm-2 { width: 16.66667%; float: left; margin-bottom: 0; } .grid__col--offset-right-sm-2 { margin-left: 16.66667%; } .grid__col--offset-left-sm-2 { margin-left: -16.66667%; } .grid__col--sm-3 { width: 25%; float: left; margin-bottom: 0; } .grid__col--offset-right-sm-3 { margin-left: 25%; } .grid__col--offset-left-sm-3 { margin-left: -25%; } .grid__col--sm-4 { width: 33.33333%; float: left; margin-bottom: 0; } .grid__col--offset-right-sm-4 { margin-left: 33.33333%; } .grid__col--offset-left-sm-4 { margin-left: -33.33333%; } .grid__col--sm-5 { width: 41.66667%; float: left; margin-bottom: 0; } .grid__col--offset-right-sm-5 { margin-left: 41.66667%; } .grid__col--offset-left-sm-5 { margin-left: -41.66667%; } .grid__col--sm-6 { width: 50%; float: left; margin-bottom: 0; } .grid__col--offset-right-sm-6 { margin-left: 50%; } .grid__col--offset-left-sm-6 { margin-left: -50%; } .grid__col--sm-7 { width: 58.33333%; float: left; margin-bottom: 0; } .grid__col--offset-right-sm-7 { margin-left: 58.33333%; } .grid__col--offset-left-sm-7 { margin-left: -58.33333%; } .grid__col--sm-8 { width: 66.66667%; float: left; margin-bottom: 0; } .grid__col--offset-right-sm-8 { margin-left: 66.66667%; } .grid__col--offset-left-sm-8 { margin-left: -66.66667%; } .grid__col--sm-9 { width: 75%; float: left; margin-bottom: 0; } .grid__col--offset-right-sm-9 { margin-left: 75%; } .grid__col--offset-left-sm-9 { margin-left: -75%; } .grid__col--sm-10 { width: 83.33333%; float: left; margin-bottom: 0; } .grid__col--offset-right-sm-10 { margin-left: 83.33333%; } .grid__col--offset-left-sm-10 { margin-left: -83.33333%; } .grid__col--sm-11 { width: 91.66667%; float: left; margin-bottom: 0; } .grid__col--offset-right-sm-11 { margin-left: 91.66667%; } .grid__col--offset-left-sm-11 { margin-left: -91.66667%; } .grid__col--sm-12 { width: 100%; float: left; margin-bottom: 0; } .grid__col--offset-right-sm-12 { margin-left: 100%; } .grid__col--offset-left-sm-12 { margin-left: -100%; } } @media (min-width: 768px) { .grid--flex-md { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .grid--flex-md .grid__col { margin-bottom: 0; } .grid__col--md-1 { width: 8.33333%; float: left; margin-bottom: 0; } .grid__col--offset-right-md-1 { margin-left: 8.33333%; } .grid__col--offset-left-md-1 { margin-left: -8.33333%; } .grid__col--md-2 { width: 16.66667%; float: left; margin-bottom: 0; } .grid__col--offset-right-md-2 { margin-left: 16.66667%; } .grid__col--offset-left-md-2 { margin-left: -16.66667%; } .grid__col--md-3 { width: 25%; float: left; margin-bottom: 0; } .grid__col--offset-right-md-3 { margin-left: 25%; } .grid__col--offset-left-md-3 { margin-left: -25%; } .grid__col--md-4 { width: 33.33333%; float: left; margin-bottom: 0; } .grid__col--offset-right-md-4 { margin-left: 33.33333%; } .grid__col--offset-left-md-4 { margin-left: -33.33333%; } .grid__col--md-5 { width: 41.66667%; float: left; margin-bottom: 0; } .grid__col--offset-right-md-5 { margin-left: 41.66667%; } .grid__col--offset-left-md-5 { margin-left: -41.66667%; } .grid__col--md-6 { width: 50%; float: left; margin-bottom: 0; } .grid__col--offset-right-md-6 { margin-left: 50%; } .grid__col--offset-left-md-6 { margin-left: -50%; } .grid__col--md-7 { width: 58.33333%; float: left; margin-bottom: 0; } .grid__col--offset-right-md-7 { margin-left: 58.33333%; } .grid__col--offset-left-md-7 { margin-left: -58.33333%; } .grid__col--md-8 { width: 66.66667%; float: left; margin-bottom: 0; } .grid__col--offset-right-md-8 { margin-left: 66.66667%; } .grid__col--offset-left-md-8 { margin-left: -66.66667%; } .grid__col--md-9 { width: 75%; float: left; margin-bottom: 0; } .grid__col--offset-right-md-9 { margin-left: 75%; } .grid__col--offset-left-md-9 { margin-left: -75%; } .grid__col--md-10 { width: 83.33333%; float: left; margin-bottom: 0; } .grid__col--offset-right-md-10 { margin-left: 83.33333%; } .grid__col--offset-left-md-10 { margin-left: -83.33333%; } .grid__col--md-11 { width: 91.66667%; float: left; margin-bottom: 0; } .grid__col--offset-right-md-11 { margin-left: 91.66667%; } .grid__col--offset-left-md-11 { margin-left: -91.66667%; } .grid__col--md-12 { width: 100%; float: left; margin-bottom: 0; } .grid__col--offset-right-md-12 { margin-left: 100%; } .grid__col--offset-left-md-12 { margin-left: -100%; } } @media (min-width: 992px) { .grid--flex-lg { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .grid--flex-lg .grid__col { margin-bottom: 0; } .grid__col--lg-1 { width: 8.33333%; float: left; margin-bottom: 0; } .grid__col--offset-right-lg-1 { margin-left: 8.33333%; } .grid__col--offset-left-lg-1 { margin-left: -8.33333%; } .grid__col--lg-2 { width: 16.66667%; float: left; margin-bottom: 0; } .grid__col--offset-right-lg-2 { margin-left: 16.66667%; } .grid__col--offset-left-lg-2 { margin-left: -16.66667%; } .grid__col--lg-3 { width: 25%; float: left; margin-bottom: 0; } .grid__col--offset-right-lg-3 { margin-left: 25%; } .grid__col--offset-left-lg-3 { margin-left: -25%; } .grid__col--lg-4 { width: 33.33333%; float: left; margin-bottom: 0; } .grid__col--offset-right-lg-4 { margin-left: 33.33333%; } .grid__col--offset-left-lg-4 { margin-left: -33.33333%; } .grid__col--lg-5 { width: 41.66667%; float: left; margin-bottom: 0; } .grid__col--offset-right-lg-5 { margin-left: 41.66667%; } .grid__col--offset-left-lg-5 { margin-left: -41.66667%; } .grid__col--lg-6 { width: 50%; float: left; margin-bottom: 0; } .grid__col--offset-right-lg-6 { margin-left: 50%; } .grid__col--offset-left-lg-6 { margin-left: -50%; } .grid__col--lg-7 { width: 58.33333%; float: left; margin-bottom: 0; } .grid__col--offset-right-lg-7 { margin-left: 58.33333%; } .grid__col--offset-left-lg-7 { margin-left: -58.33333%; } .grid__col--lg-8 { width: 66.66667%; float: left; margin-bottom: 0; } .grid__col--offset-right-lg-8 { margin-left: 66.66667%; } .grid__col--offset-left-lg-8 { margin-left: -66.66667%; } .grid__col--lg-9 { width: 75%; float: left; margin-bottom: 0; } .grid__col--offset-right-lg-9 { margin-left: 75%; } .grid__col--offset-left-lg-9 { margin-left: -75%; } .grid__col--lg-10 { width: 83.33333%; float: left; margin-bottom: 0; } .grid__col--offset-right-lg-10 { margin-left: 83.33333%; } .grid__col--offset-left-lg-10 { margin-left: -83.33333%; } .grid__col--lg-11 { width: 91.66667%; float: left; margin-bottom: 0; } .grid__col--offset-right-lg-11 { margin-left: 91.66667%; } .grid__col--offset-left-lg-11 { margin-left: -91.66667%; } .grid__col--lg-12 { width: 100%; float: left; margin-bottom: 0; } .grid__col--offset-right-lg-12 { margin-left: 100%; } .grid__col--offset-left-lg-12 { margin-left: -100%; } } @media (min-width: 1200px) { .grid--flex-xl { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .grid--flex-xl .grid__col { margin-bottom: 0; } .grid__col--xl-1 { width: 8.33333%; float: left; margin-bottom: 0; } .grid__col--offset-right-xl-1 { margin-left: 8.33333%; } .grid__col--offset-left-xl-1 { margin-left: -8.33333%; } .grid__col--xl-2 { width: 16.66667%; float: left; margin-bottom: 0; } .grid__col--offset-right-xl-2 { margin-left: 16.66667%; } .grid__col--offset-left-xl-2 { margin-left: -16.66667%; } .grid__col--xl-3 { width: 25%; float: left; margin-bottom: 0; } .grid__col--offset-right-xl-3 { margin-left: 25%; } .grid__col--offset-left-xl-3 { margin-left: -25%; } .grid__col--xl-4 { width: 33.33333%; float: left; margin-bottom: 0; } .grid__col--offset-right-xl-4 { margin-left: 33.33333%; } .grid__col--offset-left-xl-4 { margin-left: -33.33333%; } .grid__col--xl-5 { width: 41.66667%; float: left; margin-bottom: 0; } .grid__col--offset-right-xl-5 { margin-left: 41.66667%; } .grid__col--offset-left-xl-5 { margin-left: -41.66667%; } .grid__col--xl-6 { width: 50%; float: left; margin-bottom: 0; } .grid__col--offset-right-xl-6 { margin-left: 50%; } .grid__col--offset-left-xl-6 { margin-left: -50%; } .grid__col--xl-7 { width: 58.33333%; float: left; margin-bottom: 0; } .grid__col--offset-right-xl-7 { margin-left: 58.33333%; } .grid__col--offset-left-xl-7 { margin-left: -58.33333%; } .grid__col--xl-8 { width: 66.66667%; float: left; margin-bottom: 0; } .grid__col--offset-right-xl-8 { margin-left: 66.66667%; } .grid__col--offset-left-xl-8 { margin-left: -66.66667%; } .grid__col--xl-9 { width: 75%; float: left; margin-bottom: 0; } .grid__col--offset-right-xl-9 { margin-left: 75%; } .grid__col--offset-left-xl-9 { margin-left: -75%; } .grid__col--xl-10 { width: 83.33333%; float: left; margin-bottom: 0; } .grid__col--offset-right-xl-10 { margin-left: 83.33333%; } .grid__col--offset-left-xl-10 { margin-left: -83.33333%; } .grid__col--xl-11 { width: 91.66667%; float: left; margin-bottom: 0; } .grid__col--offset-right-xl-11 { margin-left: 91.66667%; } .grid__col--offset-left-xl-11 { margin-left: -91.66667%; } .grid__col--xl-12 { width: 100%; float: left; margin-bottom: 0; } .grid__col--offset-right-xl-12 { margin-left: 100%; } .grid__col--offset-left-xl-12 { margin-left: -100%; } } body { background: #F4F3F2; -webkit-transition: padding-left 0.4s; -o-transition: padding-left 0.4s; -moz-transition: padding-left 0.4s; transition: padding-left 0.4s; } body.has-compare { padding-left: 32px; } body.has-compare.compare-open { padding-left: 432px; } body.has-compare header .container { padding-left: 45px; } body.slideout-left { padding-left: 10px; } body.slideout-left.slideout-open { padding-left: 432px; } body.slideout-left header .container { padding-left: 60px; } .brand { display: block; width: 100%; max-width: 300px; } .brand img { width: 100%; } .link { color: #AA1F2E; -webkit-transition: color 0.2s ease-in-out; -o-transition: color 0.2s ease-in-out; -moz-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; display: inline; padding: 0; margin: 0; text-decoration: none; border-bottom: 1px solid #AA1F2E; -webkit-transition: border 0.2s ease-in-out; -o-transition: border 0.2s ease-in-out; -moz-transition: border 0.2s ease-in-out; transition: border 0.2s ease-in-out; } .link:hover, .link:focus { border-bottom: 1px solid transparent; } .link:hover, .link:focus { color: #D51B2F; } .link:hover:after, .link:focus:after { background: #D51B2F; } .link:active { color: #830E1B; } .link:active:after { background: #830E1B; } .link--secondary { color: #636569; } .link--secondary:hover, .link--secondary:focus { color: #4a4c4f; } .link--secondary:hover:after, .link--secondary:focus:after { background: #4a4c4f; } .link--secondary:active { color: #323335; } .link--secondary:active:after { background: #323335; } .indicator { color: #000000; font-weight: 700; } .page__header { margin-top: 45px; } .page__content { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 30px; background: #ffffff; margin-bottom: 25px; } .page__content + hr { height: 2px; background: #D51B2F; } .page__meta p { margin-bottom: 30px; } .page__meta p:last-child { margin-bottom: 0; } .page__info { background: #FCF2EB; padding: 30px 0; margin-bottom: 30px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .page__info .page__info-item { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; padding: 10px 30px; border-right: 2px solid rgba(245, 130, 31, 0.2); } .page__info .page__info-item:last-of-type { border-right: none; } .page__info .page__info-item-value { font-size: 2.25em; font-weight: 700; line-height: 1.16667; color: #D44424; margin-right: 20px; } .chart { margin-bottom: 30px; } .content--fixed { position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1500; width: 1000px; padding: 15px; max-width: 100%; height: auto; max-height: 100%; overflow: auto; } .content--fixed img { display: inline-block; width: 200px; max-width: 100%; } .content--fixed .card { padding: 30px 45px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 2px 2px 20px #000000; -moz-box-shadow: 2px 2px 20px #000000; box-shadow: 2px 2px 20px #000000; } .content--fixed .card *[class^="grid__col"] { padding-top: 30px; padding-bottom: 30px; } .content--fixed .card *[class^="grid__col"]:first-of-type { padding-right: 45px; position: relative; } .content--fixed .card *[class^="grid__col"]:first-of-type:after { content: ''; width: 3px; height: 100%; background: #D9D8D6; position: absolute; right: -1px; top: 0; } .content--fixed .card *[class^="grid__col"]:last-of-type { padding-left: 45px; } .content--fixed h2 { color: #F9471F; font-weight: 400; } .content--fixed h3 { color: #AA1F2E; margin-bottom: 60px; } .compare { width: 0; -webkit-transition: width 0.4s ease-in-out; -o-transition: width 0.4s ease-in-out; -moz-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; float: left; overflow: hidden; } .compare.open { width: 400px; max-width: 100%; } .compare__toggle { float: right; margin-top: 30px; padding: 10px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topright: 3px; border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; -moz-border-radius-bottomright: 3px; border-bottom-right-radius: 3px; border: 1px solid #D9D8D6; border-left: 0; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .compare__toggle i { -webkit-transition: -webkit-transform 0.4s ease-in-out; transition: -webkit-transform 0.4s ease-in-out; -o-transition: -o-transform 0.4s ease-in-out; -moz-transition: transform 0.4s ease-in-out, -moz-transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out, -moz-transform 0.4s ease-in-out, -o-transform 0.4s ease-in-out; } .compare__toggle.open i { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .compare__documents { list-style: none; padding: 0; } .compare__documents .ui-draggable-dragging { width: 370px; pointer-events: none; } .compare__documents .ui-draggable-dragging .document-details { display: none !important; } .compare__documents h3 { font-size: 1.125em; font-weight: 600; line-height: 1.33333; } .compare__documents li { padding: 30px 0; margin-bottom: 0; border-bottom: 1px solid #F4F3F2; position: relative; } .compare__documents li.hovered.hovered--top:before { content: ''; width: 100%; height: 3px; background: #F9471F; position: absolute; top: 0; left: 0; } .compare__documents li.hovered.hovered--bottom:after { content: ''; width: 100%; height: 3px; background: #F9471F; position: absolute; bottom: 0; left: 0; } .compare__documents li:last-of-type { border-bottom: none; } .compare__content { width: 400px; padding: 30px; padding-right: 0; } .compare__content img { width: 200px; margin-bottom: 30px; } .compare__drawer { position: fixed; z-index: 1000; top: 0; left: 0; height: 100%; max-width: 100%; overflow-y: auto; overflow-x: hidden; background: #ffffff; } .compare__wrapper { position: fixed; top: 0; left: 0; height: 100%; max-width: 100%; background: #ffffff; border-right: 1px solid #D9D8D6; -webkit-box-shadow: 0px 0px 10px #D9D8D6; -moz-box-shadow: 0px 0px 10px #D9D8D6; box-shadow: 0px 0px 10px #D9D8D6; } .compare__drawer { position: relative; } .front-end h2, .front-end .h2 { font-weight: 400; } .front-end .compare__wrapper { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .front-end .compare__wrapper h2, .front-end .compare__wrapper .h2 { font-weight: 400; } .document { -webkit-transition: background 0.2s ease-in-out; -o-transition: background 0.2s ease-in-out; -moz-transition: background 0.2s ease-in-out; transition: background 0.2s ease-in-out; } .document p i { color: #D9D8D6; } .document__list { padding: 0; list-style: none; } .document__list li { margin-bottom: 0; border-bottom: 1px solid #D9D8D6; padding: 30px 0; } .document__list li:last-of-type { padding-bottom: 0; border-bottom: none; } .document:hover, .document:focus { background: #FCF2EB; } .document__view .h3 { font-weight: 700; margin: 30px 0 15px; } .document__view .action-links__group { margin: 40px 0; } .document__upload.uploading .form__group, .document__upload.uploaded .form__group { width: 40%; } .document__upload.uploading .document__uploader, .document__upload.uploaded .document__uploader { height: 200px; } .document__upload hr { margin: 30px 0; } .document__upload .file__info { margin-right: 20px; } .document__upload .file__info i { display: block; font-size: 2em; margin-bottom: 10px; } .document__upload .file__info span { font-size: 12px; } .document__uploader { border: 2px dashed #CCCCCC; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 300px; margin-bottom: 2em; } .document__uploader h3 { font-size: 2em; font-weight: 700; } .document__uploader button.link { margin-left: 20px; } .progress__container { margin-bottom: 30px; } .progress__container .status { color: #000000; margin-bottom: 10px; } .progress__container .status .failed { color: #a51b00; } .progress__container .status .success { color: #77b259; } .progress__container .error-message { font-style: italic; } .progress__container .progress-bar { height: 15px; background-color: #F4F3F2; width: 100%; margin-bottom: 10px; } .progress__container .progress-bar--inner { height: 100%; -webkit-transition: 300ms linear; -o-transition: 300ms linear; -moz-transition: 300ms linear; transition: 300ms linear; background-color: #636569; } .progress__container .progress-bar--inner.failed { background-color: #a51b00; } .progress__container .progress-bar--inner.success { background-color: #77b259; } .document-details { display: none; position: absolute; bottom: 100%; width: 100%; background: #ffffff; -webkit-box-shadow: 2px 2px 5px #D9D8D6; -moz-box-shadow: 2px 2px 5px #D9D8D6; box-shadow: 2px 2px 5px #D9D8D6; border: 1px solid #D9D8D6; } .document-details__content { padding: 15px; padding-right: 30px; position: relative; } .document-details__content .btn, .document-details__content .button--dropdown { position: absolute; right: 15px; top: 15px; } .document-details__content .btn:after, .document-details__content .button--dropdown:after { display: none; } .document-details__content:after { content: ''; width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #ffffff; position: absolute; bottom: -20px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .document-details__content:before { content: ''; width: 0; height: 0; border-left: 21px solid transparent; border-right: 21px solid transparent; border-top: 21px solid #D9D8D6; position: absolute; bottom: -21px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .document-controls { position: absolute; height: 100%; width: 30px; top: 0; right: 0; padding: 30px 0; text-align: center; } .document-controls__toggle { padding: 0; padding-right: 30px; } .document-controls__toggle + .btn, .document-controls__toggle + .button--dropdown { position: absolute; top: 30px; right: 0; width: 30px; text-align: center; position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } .document-controls__toggle + .btn:after, .document-controls__toggle + .button--dropdown:after { display: none; } .document-controls__toggle + .btn:hover, .document-controls__toggle + .button--dropdown:hover, .document-controls__toggle + .btn:focus, .document-controls__toggle + .button--dropdown:focus { width: auto; height: auto; overflow: visible; left: auto; width: 30px; top: 30px; } .document-controls__toggle + .btn + i, .document-controls__toggle + .button--dropdown + i { position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); font-size: 30px; width: 30px; text-align: center; pointer-events: none; } .document-controls__toggle:hover + .btn, .document-controls__toggle:hover + .button--dropdown, .document-controls__toggle:focus + .btn, .document-controls__toggle:focus + .button--dropdown { width: auto; height: auto; overflow: visible; left: auto; top: 30px; width: 30px; } .results-indicator { display: inline-block; padding: 0 15px; font-weight: 700; } .article__header strong { color: #000000; } .article__content { margin-bottom: 20px; } .article__controls.fixed { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; } .article__controls.fixed:after { clear: both; content: ""; display: table; } .article__controls.fixed .container { padding: 0 15px; } .article__controls.fixed .article__controls-content { width: 74%; float: right; padding-top: 10px; padding-bottom: 10px; padding-left: 23px; padding-right: 23px; } .article__controls .form__label { margin-bottom: 15px; } .article__controls-content { padding: 30px 0; background: #ffffff; } .container.comparison__container { padding-left: 80px; padding-right: 80px; position: relative; } .container.comparison__container .btn--pager { position: absolute; top: 0; } .container.comparison__container .btn--pager-left { left: 0; } .container.comparison__container .btn--pager-right { right: 0; } .container.comparison__container .comparison__controls .btn--pager { position: absolute; top: 45px; } .drawer-toggle.comparison__controls-toggle { position: absolute; top: 0; right: 45px; height: 45px; width: 45px; text-align: center; z-index: 10; } .drawer-toggle.comparison__controls-toggle i { -webkit-transition: -webkit-transform 0.2s ease-in-out; transition: -webkit-transform 0.2s ease-in-out; -o-transition: -o-transform 0.2s ease-in-out; -moz-transition: transform 0.2s ease-in-out, -moz-transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out, -moz-transform 0.2s ease-in-out, -o-transform 0.2s ease-in-out; } .drawer-toggle.comparison__controls-toggle.open i { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .has-compare-controls { padding-bottom: 45px; } .comparison { margin: 0 -15px; margin-top: 30px; overflow: hidden; white-space: nowrap; } .comparison__controls-wrapper { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1000; overflow: hidden; min-height: 45px; background: #ffffff; border-top: 1px solid #D9D8D6; } .comparison__controls { position: relative; } .comparison__controls .container { position: relative; padding: 0 85px !important; padding-top: 45px !important; } .comparison__controls .container.comparison__container { padding: 0 80px !important; padding-top: 0 !important; padding-bottom: 45px !important; } .comparison__controls .container.comparison__container .btn--pager-left { top: 45px; } .comparison__controls h2 { margin-top: 0; margin-bottom: 0; } .comparison__wrapper { -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .comparison__item, .comparison__indicator-item { vertical-align: top; padding: 0 15px; display: inline-block; width: 33.3333%; margin-right: -4px; white-space: normal; } .comparison__item h2, .comparison__indicator-item h2 { margin-top: 10px; } .comparison__item .tabs, .comparison__indicator-item .tabs { max-height: 80vh; overflow-y: auto; } .comparison__indicator-item { cursor: -webkit-grab; cursor: -moz-grab; cursor: grab; padding: 15px; border: 1px solid #D9D8D6; width: 31.3333%; margin: 0 1%; -webkit-transform: translateX(-4px); -moz-transform: translateX(-4px); -ms-transform: translateX(-4px); -o-transform: translateX(-4px); transform: translateX(-4px); position: relative; } .comparison__indicator-item .compare--remove { position: absolute; top: 15px; right: 15px; } .comparison__indicator-item.ui-draggable-dragging { pointer-events: none; } .comparison__indicator-item--hovered:after { width: 3px; background: #F9471F; height: 100%; position: absolute; top: 0; } .comparison__indicator-item--hovered-left:after { content: ''; left: 0; } .comparison__indicator-item--hovered-right:after { content: ''; right: 0; } .comparison__item-content { padding-top: 60px; position: relative; } .comparison__item-content .tabs__list { position: absolute; top: 0; left: 0; width: 100%; } .front-end .comparison { position: relative; } .front-end .comparison .reorder-title { display: none; } .front-end .comparison .fa-ellipsis-v { display: none; } .front-end .comparison.reorderable .reorder-title { display: block; } .front-end .comparison.reorderable .fa-ellipsis-v { display: block; position: absolute; left: 10px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .front-end .comparison.reorderable .comparison__item { cursor: -webkit-grab; cursor: -moz-grab; cursor: grab; width: 100%; display: block; position: relative; border: 1px solid #D9D8D6; background: #F4F3F2; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 15px; padding-left: 30px; padding-right: 105px; margin-bottom: 15px; } .front-end .comparison.reorderable .comparison__item.hovered--top { border-top: 1px solid #D44424; } .front-end .comparison.reorderable .comparison__item.hovered--bottom { border-bottom: 1px solid #D44424; } .front-end .comparison.reorderable .comparison__item h3 { display: inline; margin: 0; font-size: 1em; font-weight: 700; line-height: 1.5; } .front-end .comparison.reorderable .comparison__item > div, .front-end .comparison.reorderable .comparison__item > p, .front-end .comparison.reorderable .comparison__item > button { display: none; } .front-end .comparison.reorderable .comparison__item > div.comparison__item-details, .front-end .comparison.reorderable .comparison__item > div.comparison__item-count, .front-end .comparison.reorderable .comparison__item > p.comparison__item-details, .front-end .comparison.reorderable .comparison__item > p.comparison__item-count, .front-end .comparison.reorderable .comparison__item > button.comparison__item-details, .front-end .comparison.reorderable .comparison__item > button.comparison__item-count { position: static; display: block; } .front-end .comparison.reorderable .comparison__item > div.comparison__item-details > p, .front-end .comparison.reorderable .comparison__item > div.comparison__item-count > p, .front-end .comparison.reorderable .comparison__item > p.comparison__item-details > p, .front-end .comparison.reorderable .comparison__item > p.comparison__item-count > p, .front-end .comparison.reorderable .comparison__item > button.comparison__item-details > p, .front-end .comparison.reorderable .comparison__item > button.comparison__item-count > p { display: none; } .front-end .comparison.reorderable .comparison__item > div.comparison__item-count, .front-end .comparison.reorderable .comparison__item > p.comparison__item-count, .front-end .comparison.reorderable .comparison__item > button.comparison__item-count { padding: 0; display: inline; margin: 0; border: none; font-size: 1em; font-weight: 700; line-height: 1.5; } .front-end .comparison.reorderable .comparison__item.ui-draggable-dragging { opacity: 0.5; cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: grabbing; } .front-end .comparison.reorderable .comparison__item-actions { right: 15px; } .front-end .comparison.reorderable .comparison__item-actions .btn, .front-end .comparison.reorderable .comparison__item-actions .button--dropdown { margin-bottom: 0; } .front-end .comparison.reorderable hr, .front-end .comparison.reorderable .nav--pager { display: none; } .front-end .comparison .nav--pager { position: absolute; top: 0; right: 0; } .front-end .comparison__item h3 { font-size: 1.25em; font-weight: 700; line-height: 1.5; } .front-end .comparison__item-count { font-size: 1.25em; font-weight: 700; line-height: 1.5; color: #D44424; display: block; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #D9D8D6; } .front-end .comparison__item-count + h3 { margin-top: 0; } .front-end .comparison__item-content { padding: 10px; max-height: 400px; overflow-y: auto; overflow-x: visible; } .front-end .comparison__item-details { padding-right: 105px; position: relative; } .front-end .comparison__item-actions { position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .front-end .nav--pager .nav__menu li a { border: none; padding: 5px; color: #D44424; font-size: 1.875em; font-weight: 400; line-height: 1; } .front-end .nav--pager .nav__menu li a i { font-weight: 400; } .front-end .nav--pager .nav__menu li a:hover, .front-end .nav--pager .nav__menu li a:focus { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .front-end .nav--pager .nav__menu li a[disabled] { color: #D9D8D6; } @media (max-width: 1199px) { body.has-compare.compare-open *[class^="grid__col"] { width: 100%; margin-bottom: 30px; } body.has-compare.compare-open *[class^="grid__col"]:last-of-type { margin-bottom: 0; } } @media (max-width: 767px) { body.has-compare.compare-open { padding-left: 32px; } .content--fixed .card *[class^="grid__col"]:first-of-type { padding-right: 15px; } .content--fixed .card *[class^="grid__col"]:first-of-type:after { display: none; } .content--fixed .card *[class^="grid__col"]:last-of-type { padding-left: 15px; } .compare__wrapper { padding-right: 30px; } .compare__toggle { position: absolute !important; top: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; border: none; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; right: 30px; } .compare__content { padding-right: 60px; padding-left: 30px; } .page__content { padding: 15px; } .comparison .tabs__content { padding: 15px; } .comparison__item { width: 100%; } .comparison__item .tabs { max-height: 100%; } .comparison__indicator-item { width: 100%; margin: 0; margin-right: -4px; } .comparison__indicator-item .tabs { max-height: 100%; } .comparison__controls .comparison { margin-top: 0; } .comparison__controls .container { padding: 0 15px !important; padding-top: 105px !important; } .comparison__controls .container.comparison__container { padding: 0 15px !important; margin-top: 0 !important; } .container.comparison__container { padding: 0 15px; padding-top: 40px; margin-top: 30px; } .container.comparison__container .btn--pager-right { right: 15px; } .container.comparison__container .btn--pager-left { left: 15px; } .drawer-toggle.comparison__controls-toggle { right: 15px; } } .reorder--disabled, .item--disabled { display: none; } .reorder__list .dropdown__content, .item__list .dropdown__content { position: static; } .reorder__list.not-draggable .draggable, .item__list.not-draggable .draggable { cursor: initial; } .reorder__list.not-draggable .fa-ellipsis-v, .item__list.not-draggable .fa-ellipsis-v { display: none; } .reorder__list .ui-draggable-dragging, .item__list .ui-draggable-dragging { pointer-events: none; width: 100%; } .reorder__list .ui-draggable-dragging .reorder__item, .item__list .ui-draggable-dragging .reorder__item { background: #ffffff; opacity: 0.5; } .reorder__list .ui-draggable-dragging .button, .item__list .ui-draggable-dragging .button { display: none; } .reorder__list .draggable, .item__list .draggable { padding: 0; cursor: -webkit-grab; cursor: -moz-grab; cursor: grab; } .reorder__list .draggable.draggable--no-children > .reorder__item > .reorder__item-header .button--icon, .item__list .draggable.draggable--no-children > .reorder__item > .reorder__item-header .button--icon { display: none !important; } .reorder__list .draggable.draggable--no-children > .reorder__item > .reorder__item-header .reorder__item-expand-all, .reorder__list .draggable.draggable--no-children > .reorder__item > .reorder__item-header .reorder__item-collapse-all, .item__list .draggable.draggable--no-children > .reorder__item > .reorder__item-header .reorder__item-expand-all, .item__list .draggable.draggable--no-children > .reorder__item > .reorder__item-header .reorder__item-collapse-all { display: none !important; } .reorder__list .draggable.hovered, .item__list .draggable.hovered { cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: grabbing; } .reorder__list .draggable.hovered--top:before, .item__list .draggable.hovered--top:before { content: ''; width: 100%; height: 2px; background: #AA1F2E; position: absolute; top: -1px; left: 0; } .reorder__list .draggable.hovered--bottom:after, .item__list .draggable.hovered--bottom:after { content: ''; width: 100%; height: 2px; background: #AA1F2E; position: absolute; bottom: -1px; left: 0; } .reorder__list .draggable.hovered--middle, .item__list .draggable.hovered--middle { outline: 1px solid #AA1F2E; } .reorder__item, .reorder .item, .item__item, .item .item { padding: 0 15px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; margin-bottom: 15px; } .reorder__item .fa-plus-circle, .reorder__item .fa-minus-circle, .reorder .item .fa-plus-circle, .reorder .item .fa-minus-circle, .item__item .fa-plus-circle, .item__item .fa-minus-circle, .item .item .fa-plus-circle, .item .item .fa-minus-circle { color: #000000; } .reorder__item > .grid, .reorder .item > .grid, .item__item > .grid, .item .item > .grid { position: relative; } .reorder__item .reorder__item, .reorder__item .item, .reorder .item .reorder__item, .reorder .item .item, .item__item .reorder__item, .item__item .item, .item .item .reorder__item, .item .item .item { margin-right: -15px; } .reorder__item .reorder__item .reorder__item-header, .reorder__item .reorder__item .item__header, .reorder__item .item .reorder__item-header, .reorder__item .item .item__header, .reorder .item .reorder__item .reorder__item-header, .reorder .item .reorder__item .item__header, .reorder .item .item .reorder__item-header, .reorder .item .item .item__header, .item__item .reorder__item .reorder__item-header, .item__item .reorder__item .item__header, .item__item .item .reorder__item-header, .item__item .item .item__header, .item .item .reorder__item .reorder__item-header, .item .item .reorder__item .item__header, .item .item .item .reorder__item-header, .item .item .item .item__header { background: #F4F3F2; border: 1px solid #F4F3F2; } .reorder__item .reorder__item .dropdown__content, .reorder__item .item .dropdown__content, .reorder .item .reorder__item .dropdown__content, .reorder .item .item .dropdown__content, .item__item .reorder__item .dropdown__content, .item__item .item .dropdown__content, .item .item .reorder__item .dropdown__content, .item .item .item .dropdown__content { padding-top: 0; } .reorder__item .reorder__item .reorder__item, .reorder__item .reorder__item .item, .reorder__item .item .reorder__item, .reorder__item .item .item, .reorder .item .reorder__item .reorder__item, .reorder .item .reorder__item .item, .reorder .item .item .reorder__item, .reorder .item .item .item, .item__item .reorder__item .reorder__item, .item__item .reorder__item .item, .item__item .item .reorder__item, .item__item .item .item, .item .item .reorder__item .reorder__item, .item .item .reorder__item .item, .item .item .item .reorder__item, .item .item .item .item { margin-bottom: 0; } .reorder__item .reorder__item .reorder__item .reorder__item-header, .reorder__item .reorder__item .reorder__item .item__header, .reorder__item .reorder__item .item .reorder__item-header, .reorder__item .reorder__item .item .item__header, .reorder__item .item .reorder__item .reorder__item-header, .reorder__item .item .reorder__item .item__header, .reorder__item .item .item .reorder__item-header, .reorder__item .item .item .item__header, .reorder .item .reorder__item .reorder__item .reorder__item-header, .reorder .item .reorder__item .reorder__item .item__header, .reorder .item .reorder__item .item .reorder__item-header, .reorder .item .reorder__item .item .item__header, .reorder .item .item .reorder__item .reorder__item-header, .reorder .item .item .reorder__item .item__header, .reorder .item .item .item .reorder__item-header, .reorder .item .item .item .item__header, .item__item .reorder__item .reorder__item .reorder__item-header, .item__item .reorder__item .reorder__item .item__header, .item__item .reorder__item .item .reorder__item-header, .item__item .reorder__item .item .item__header, .item__item .item .reorder__item .reorder__item-header, .item__item .item .reorder__item .item__header, .item__item .item .item .reorder__item-header, .item__item .item .item .item__header, .item .item .reorder__item .reorder__item .reorder__item-header, .item .item .reorder__item .reorder__item .item__header, .item .item .reorder__item .item .reorder__item-header, .item .item .reorder__item .item .item__header, .item .item .item .reorder__item .reorder__item-header, .item .item .item .reorder__item .item__header, .item .item .item .item .reorder__item-header, .item .item .item .item .item__header { background: transparent; border: none; border-bottom: 2px solid #F4F3F2; } .reorder__item .reorder__item .reorder__item .reorder__item-header > *[class*="grid__col"]:first-of-type, .reorder__item .reorder__item .reorder__item .item__header > *[class*="grid__col"]:first-of-type, .reorder__item .reorder__item .item .reorder__item-header > *[class*="grid__col"]:first-of-type, .reorder__item .reorder__item .item .item__header > *[class*="grid__col"]:first-of-type, .reorder__item .item .reorder__item .reorder__item-header > *[class*="grid__col"]:first-of-type, .reorder__item .item .reorder__item .item__header > *[class*="grid__col"]:first-of-type, .reorder__item .item .item .reorder__item-header > *[class*="grid__col"]:first-of-type, .reorder__item .item .item .item__header > *[class*="grid__col"]:first-of-type, .reorder .item .reorder__item .reorder__item .reorder__item-header > *[class*="grid__col"]:first-of-type, .reorder .item .reorder__item .reorder__item .item__header > *[class*="grid__col"]:first-of-type, .reorder .item .reorder__item .item .reorder__item-header > *[class*="grid__col"]:first-of-type, .reorder .item .reorder__item .item .item__header > *[class*="grid__col"]:first-of-type, .reorder .item .item .reorder__item .reorder__item-header > *[class*="grid__col"]:first-of-type, .reorder .item .item .reorder__item .item__header > *[class*="grid__col"]:first-of-type, .reorder .item .item .item .reorder__item-header > *[class*="grid__col"]:first-of-type, .reorder .item .item .item .item__header > *[class*="grid__col"]:first-of-type, .item__item .reorder__item .reorder__item .reorder__item-header > *[class*="grid__col"]:first-of-type, .item__item .reorder__item .reorder__item .item__header > *[class*="grid__col"]:first-of-type, .item__item .reorder__item .item .reorder__item-header > *[class*="grid__col"]:first-of-type, .item__item .reorder__item .item .item__header > *[class*="grid__col"]:first-of-type, .item__item .item .reorder__item .reorder__item-header > *[class*="grid__col"]:first-of-type, .item__item .item .reorder__item .item__header > *[class*="grid__col"]:first-of-type, .item__item .item .item .reorder__item-header > *[class*="grid__col"]:first-of-type, .item__item .item .item .item__header > *[class*="grid__col"]:first-of-type, .item .item .reorder__item .reorder__item .reorder__item-header > *[class*="grid__col"]:first-of-type, .item .item .reorder__item .reorder__item .item__header > *[class*="grid__col"]:first-of-type, .item .item .reorder__item .item .reorder__item-header > *[class*="grid__col"]:first-of-type, .item .item .reorder__item .item .item__header > *[class*="grid__col"]:first-of-type, .item .item .item .reorder__item .reorder__item-header > *[class*="grid__col"]:first-of-type, .item .item .item .reorder__item .item__header > *[class*="grid__col"]:first-of-type, .item .item .item .item .reorder__item-header > *[class*="grid__col"]:first-of-type, .item .item .item .item .item__header > *[class*="grid__col"]:first-of-type { padding-left: 0; } .reorder__item .reorder__item .draggable:last-of-type .reorder__item-header, .reorder__item .reorder__item .draggable:last-of-type .item__header, .reorder__item .item .draggable:last-of-type .reorder__item-header, .reorder__item .item .draggable:last-of-type .item__header, .reorder .item .reorder__item .draggable:last-of-type .reorder__item-header, .reorder .item .reorder__item .draggable:last-of-type .item__header, .reorder .item .item .draggable:last-of-type .reorder__item-header, .reorder .item .item .draggable:last-of-type .item__header, .item__item .reorder__item .draggable:last-of-type .reorder__item-header, .item__item .reorder__item .draggable:last-of-type .item__header, .item__item .item .draggable:last-of-type .reorder__item-header, .item__item .item .draggable:last-of-type .item__header, .item .item .reorder__item .draggable:last-of-type .reorder__item-header, .item .item .reorder__item .draggable:last-of-type .item__header, .item .item .item .draggable:last-of-type .reorder__item-header, .item .item .item .draggable:last-of-type .item__header { border-bottom: 0; } .reorder__item .dropdown, .reorder .item .dropdown, .item__item .dropdown, .item .item .dropdown { margin: 0; } .reorder__item .dropdown__content, .reorder .item .dropdown__content, .item__item .dropdown__content, .item .item .dropdown__content { padding: 15px 0; padding-bottom: 0; padding-left: 15px; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .reorder__item .dropdown__content:focus, .reorder .item .dropdown__content:focus, .item__item .dropdown__content:focus, .item .item .dropdown__content:focus { outline: 0; } .reorder__item-expand-all, .reorder__item-collapse-all, .reorder__item__expand-all, .reorder__item__collapse-all, .reorder .item-expand-all, .reorder .item-collapse-all, .reorder .item__expand-all, .reorder .item__collapse-all, .item__item-expand-all, .item__item-collapse-all, .item__item__expand-all, .item__item__collapse-all, .item .item-expand-all, .item .item-collapse-all, .item .item__expand-all, .item .item__collapse-all { color: #AA1F2E; display: inline; padding: 0; margin: 0; text-decoration: none; border-bottom: 1px solid #AA1F2E; -webkit-transition: border 0.2s ease-in-out; -o-transition: border 0.2s ease-in-out; -moz-transition: border 0.2s ease-in-out; transition: border 0.2s ease-in-out; margin-right: 15px; } .reorder__item-expand-all:hover, .reorder__item-expand-all:focus, .reorder__item-collapse-all:hover, .reorder__item-collapse-all:focus, .reorder__item__expand-all:hover, .reorder__item__expand-all:focus, .reorder__item__collapse-all:hover, .reorder__item__collapse-all:focus, .reorder .item-expand-all:hover, .reorder .item-expand-all:focus, .reorder .item-collapse-all:hover, .reorder .item-collapse-all:focus, .reorder .item__expand-all:hover, .reorder .item__expand-all:focus, .reorder .item__collapse-all:hover, .reorder .item__collapse-all:focus, .item__item-expand-all:hover, .item__item-expand-all:focus, .item__item-collapse-all:hover, .item__item-collapse-all:focus, .item__item__expand-all:hover, .item__item__expand-all:focus, .item__item__collapse-all:hover, .item__item__collapse-all:focus, .item .item-expand-all:hover, .item .item-expand-all:focus, .item .item-collapse-all:hover, .item .item-collapse-all:focus, .item .item__expand-all:hover, .item .item__expand-all:focus, .item .item__collapse-all:hover, .item .item__collapse-all:focus { border-bottom: 1px solid transparent; } .reorder__item-collapse-all, .reorder__item__collapse-all, .reorder .item-collapse-all, .reorder .item__collapse-all, .item__item-collapse-all, .item__item__collapse-all, .item .item-collapse-all, .item .item__collapse-all { display: none; } .reorder__item .grid, .reorder .item .grid, .item__item .grid, .item .item .grid { margin-bottom: 0; } .reorder__item .button, .reorder .item .button, .item__item .button, .item .item .button { display: inline-block; } .reorder__item .button.button--icon, .reorder .item .button.button--icon, .item__item .button.button--icon, .item .item .button.button--icon { float: none; margin-left: 0; background: transparent; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; color: #D51B2F; } .reorder__item i.fa-ellipsis-v, .reorder .item i.fa-ellipsis-v, .item__item i.fa-ellipsis-v, .item .item i.fa-ellipsis-v { color: #a8a6a1; margin-right: 30px; font-weight: 700; } .reorder__item-header, .reorder__header, .item__item-header, .item__header { padding: 15px 0; border: 1px solid #D9D8D6; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .reorder__item-header > *[class*="grid__col"]:first-of-type, .reorder__header > *[class*="grid__col"]:first-of-type, .item__item-header > *[class*="grid__col"]:first-of-type, .item__header > *[class*="grid__col"]:first-of-type { padding-top: 7px; } .reorder__item-divider, .item__item-divider { display: inline-block; width: 1px; height: 17px; background: #D9D8D6; margin: 0 10px; -webkit-transform: translateY(2px); -moz-transform: translateY(2px); -ms-transform: translateY(2px); -o-transform: translateY(2px); transform: translateY(2px); } .reorder__item-details, .item__item-details { padding-top: 15px; } .reorder__item-details .dropdown__content, .item__item-details .dropdown__content { padding: 0; } .reorder__item-details .dropdown__toggle.open, .item__item-details .dropdown__toggle.open { color: #830E1B; border-bottom: 1px solid #830E1B; } .reorder__document-title, .item__document-title { font-weight: 700; display: block; margin-bottom: 5px; } .reorder__table, .item__table { margin-bottom: 30px; } .reorder__table:last-child, .item__table:last-child { margin-bottom: 0; } .reorder__table-header, .item__table-header { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-top: 10px; padding-bottom: 15px; } .reorder__table-header + .reorder__wrapper, .item__table-header + .reorder__wrapper { margin-bottom: 45px; } .reorder__table-header .btn, .reorder__table-header .button--dropdown, .item__table-header .btn, .item__table-header .button--dropdown { margin-top: 5px; margin-bottom: 5px; margin-right: 15px; } .reorder__table-header .form__checkbox-wrapper, .item__table-header .form__checkbox-wrapper { margin: 0; margin-left: auto; } .item { padding: 0 15px; } .item .item { margin-bottom: 0; } .item .item .grid { margin-bottom: 15px; } .item .item__expand-all, .item .item__collapse-all { color: #636569; border-bottom: 1px solid #636569; } .item .item__header { margin-bottom: 15px; padding: 10px 0; background: rgba(244, 243, 242, 0.3); } .item .item__header .dropdown__toggle { background: transparent; } .item .item__header > *[class*="grid__col"]:first-of-type { padding-top: 0; } .item .item__header .btn, .item .item__header .button--dropdown { margin: 0; } .item .dropdown__content { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border: none; padding-right: 0; padding-bottom: 0; padding-top: 0; margin-right: -15px; } .link-divider { display: inline-block; margin: 0 10px; } .tag__collapse-all { display: none; } .toolbar .form__checkbox-wrapper { display: inline-block; } .categories, .reorder { position: relative; } .categories .branch-selector, .reorder .branch-selector { display: none; } .categories .branch-selection-label, .reorder .branch-selection-label { display: none; position: absolute; left: -75px; width: 60px; text-align: center; -webkit-transform: translateY(-35px); -moz-transform: translateY(-35px); -ms-transform: translateY(-35px); -o-transform: translateY(-35px); transform: translateY(-35px); font-size: 0.875em; font-weight: 600; line-height: 1.42857; } .categories--selectable, .reorder--selectable { padding-left: 75px; } .categories--selectable .branch-selector, .reorder--selectable .branch-selector { display: block; position: absolute; left: 0; -webkit-transform: translateY(50%); -moz-transform: translateY(50%); -ms-transform: translateY(50%); -o-transform: translateY(50%); transform: translateY(50%); margin-top: 20px; } .categories--selectable .branch-selection-label, .reorder--selectable .branch-selection-label { display: block; } .categories__expand-toggle, .reorder__expand-toggle { color: #AA1F2E; display: inline; padding: 0; margin: 0; text-decoration: none; border-bottom: 1px solid #AA1F2E; -webkit-transition: border 0.2s ease-in-out; -o-transition: border 0.2s ease-in-out; -moz-transition: border 0.2s ease-in-out; transition: border 0.2s ease-in-out; margin-left: 30px; } .categories__expand-toggle:hover, .categories__expand-toggle:focus, .reorder__expand-toggle:hover, .reorder__expand-toggle:focus { border-bottom: 1px solid transparent; } .categories__expand-toggle .expanded-text, .reorder__expand-toggle .expanded-text { display: none; } .categories__expand-toggle.open .collapsed-text, .reorder__expand-toggle.open .collapsed-text { display: none; } .categories__expand-toggle.open .expanded-text, .reorder__expand-toggle.open .expanded-text { display: inline; } .content-switch { display: none; padding: 10px 0; } .content-switch.open { display: block; } .list--unstyled { list-style: none; padding: 0; } .list--unstyled li { margin-bottom: 25px; } .text-data { font-size: 1.75em; font-weight: 600; line-height: 1.21429; } .editable-item { position: relative; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; padding: 5px; border: 1px solid #D9D8D6; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin-bottom: 10px; } .editable-item.active { border: 1px solid #D44424; background: #D44424; color: #ffffff; position: relative; -webkit-border-top-right-radius: 0; -moz-border-radius-topright: 0; border-top-right-radius: 0; -webkit-border-bottom-right-radius: 0; -moz-border-radius-bottomright: 0; border-bottom-right-radius: 0; } .editable-item.active:after { content: ''; width: 30px; border: 1px solid #D44424; height: 100%; position: absolute; left: 100%; top: -1px; background: #D44424; } .editable-item.active .editable-item__buttons { display: none; } .editable-item__title { margin-right: auto; display: block; padding: 10px 0; padding-left: 5px; } .editable-item__buttons { white-space: nowrap; } .editable-item__buttons .btn, .editable-item__buttons .button--dropdown { margin: 0; margin-left: 3px; } .overlay { display: none; } .overlay, .front-end .overlay { background: #D44424; color: #ffffff; position: absolute; top: 0; left: 0; width: 100%; padding: 45px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .overlay h3, .overlay .h3, .front-end .overlay h3, .front-end .overlay .h3 { font-size: 1.875em; font-weight: 400; line-height: 1.33333; } .overlay h3 small, .overlay .h3 small, .front-end .overlay h3 small, .front-end .overlay .h3 small { font-size: 0.7em; } .overlay__container, .front-end .overlay__container { position: relative; } .overlay__actions, .front-end .overlay__actions { padding-top: 45px; } .overlay__actions .btn, .overlay__actions .button--dropdown, .front-end .overlay__actions .btn, .front-end .overlay__actions .button--dropdown { margin-right: 5px; } .overlay .form__label, .front-end .overlay .form__label { color: #ffffff; } .overlay .form__input, .front-end .overlay .form__input { border: 2px solid #ffffff; background: rgba(245, 130, 31, 0.2); color: #ffffff; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .overlay .form__select-wrapper .form__input + i, .front-end .overlay .form__select-wrapper .form__input + i { color: #ffffff; } .overlay .form__date-wrapper i, .front-end .overlay .form__date-wrapper i { color: #ffffff; } .overlay .form__boolean, .front-end .overlay .form__boolean { margin-top: -25px; margin-bottom: -20px; } .overlay .form__boolean input:checked + label .form__boolean-on, .front-end .overlay .form__boolean input:checked + label .form__boolean-on { color: #D44424; } .overlay .form__boolean input:checked + label .form__boolean-off, .front-end .overlay .form__boolean input:checked + label .form__boolean-off { color: #ffffff; } .overlay .form__boolean input:checked + label .form__boolean-toggle:before, .front-end .overlay .form__boolean input:checked + label .form__boolean-toggle:before { background: #ffffff; } .overlay .form__boolean .form__boolean-on, .overlay .form__boolean .form__boolean-off, .front-end .overlay .form__boolean .form__boolean-on, .front-end .overlay .form__boolean .form__boolean-off { padding: 5px 0; } .overlay .form__boolean .form__boolean-on, .front-end .overlay .form__boolean .form__boolean-on { color: #ffffff; } .overlay .form__boolean .form__boolean-off, .front-end .overlay .form__boolean .form__boolean-off { color: #D44424; } .overlay .form__boolean .form__boolean-toggle, .front-end .overlay .form__boolean .form__boolean-toggle { border: 1px solid #ffffff; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; text-transform: uppercase; width: 100px; font-size: 0.75em; font-weight: 700; line-height: 1.33333; } .overlay .form__boolean .form__boolean-toggle:before, .front-end .overlay .form__boolean .form__boolean-toggle:before { background: #ffffff; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } .front-end .form__boolean { margin-top: -25px; margin-bottom: -20px; } .front-end .form__boolean input:checked + label .form__boolean-on { color: #D44424; } .front-end .form__boolean input:checked + label .form__boolean-off { color: #ffffff; } .front-end .form__boolean input:checked + label .form__boolean-toggle { border: 1px solid #D44424; } .front-end .form__boolean input:checked + label .form__boolean-toggle:before { background: #D44424; } .front-end .form__boolean .form__boolean-on, .front-end .form__boolean .form__boolean-off { padding: 5px 0; } .front-end .form__boolean .form__boolean-on { color: #ffffff; } .front-end .form__boolean .form__boolean-off { color: #D44424; } .front-end .form__boolean .form__boolean-toggle { border: 1px solid #D9D8D6; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; text-transform: uppercase; width: 50px; min-height: 25px; font-size: 0.75em; font-weight: 700; line-height: 1.33333; } .front-end .form__boolean .form__boolean-toggle:before { background: #D9D8D6; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } .front-end .tabs-alt__list .form__boolean { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; margin: 0; margin-left: auto; } .front-end .tabs-alt__list .form__boolean-toggle { margin-left: 15px; } @media (max-width: 767px) { .main { padding-left: 50px; } .main--sidebar-open { padding-left: 50px; } .hero { padding: 60px 0; } .box { padding: 15px; } .reorder__item .text--right, .item .text--right { text-align: right; } .reorder__item-expand-all, .reorder__item-collapse-all, .reorder__item__expand-all, .reorder__item__collapse-all, .item-expand-all, .item-collapse-all, .item__expand-all, .item__collapse-all { margin-right: 0; } .reorder__item .button--dropdown, .item .button--dropdown { width: 100%; margin-top: 15px; margin-left: 0; margin-right: 0; } .reorder__item .dropdown__edit-form, .reorder__item .dropdown__delete-message, .item .dropdown__edit-form, .item .dropdown__delete-message { width: 100%; } .reorder__item .dropdown--overlay .dropdown__content--accordion-right, .item .dropdown--overlay .dropdown__content--accordion-right { width: 100%; max-width: 100%; right: auto; } } /* NAVIGATION COMPONENTS ---------------------------------------------------------------------------*/ .nav a { -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .nav ul { padding-left: 0; list-style: none; } .nav--pagination { text-align: center; } .nav--pagination .nav__menu { display: inline-block; } .nav--pagination .nav__menu li { display: inline-block; } .nav--pagination .nav__menu li a { border-bottom: none; display: block; padding: 10px 15px; background: #F4F3F2; color: #636569; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; font-weight: 700; } .nav--pagination .nav__menu li a:hover, .nav--pagination .nav__menu li a:focus { border-bottom: none; } .nav--pagination .nav__menu li a:hover, .nav--pagination .nav__menu li a:focus { background: #D9D8D6; } .nav--pagination .nav__menu li.active a { background: #636569; color: #ffffff; } .nav--pagination .nav__menu li.previous, .nav--pagination .nav__menu li.next { margin: 0 30px; } .nav--pagination .nav__menu li.previous a, .nav--pagination .nav__menu li.next a { display: inline; padding: 0; margin: 0; text-decoration: none; border-bottom: 1px solid #636569; -webkit-transition: border 0.2s ease-in-out; -o-transition: border 0.2s ease-in-out; -moz-transition: border 0.2s ease-in-out; transition: border 0.2s ease-in-out; background: transparent; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .nav--pagination .nav__menu li.previous a:hover, .nav--pagination .nav__menu li.previous a:focus, .nav--pagination .nav__menu li.next a:hover, .nav--pagination .nav__menu li.next a:focus { border-bottom: 1px solid transparent; } .nav--pagination .nav__menu li.previous a:hover, .nav--pagination .nav__menu li.previous a:focus, .nav--pagination .nav__menu li.next a:hover, .nav--pagination .nav__menu li.next a:focus { background: transparent; } .nav--pager { display: inline-block; margin-bottom: 15px; } .nav--pager label { display: block; padding: 0 15px; font-size: 1.125em; font-weight: 400; line-height: 1.22222; } .nav--pager .pager__input { text-align: center; padding: 10px; margin: 0 10px; width: 50px; } .nav--pager ul:after { clear: both; content: ""; display: table; } .nav--pager ul li { float: left; } .nav--pager ul li:first-of-type a { margin-left: 0; } .nav--pager ul li:last-of-type a { margin-right: 0; } .nav--admin-utility { display: inline-block; } .nav--admin-utility .nav__menu { display: block; text-align: right; } .nav--admin-utility .nav__menu li { padding: 0 20px; display: inline-block; } .nav--admin-utility .nav__menu li:first-of-type { padding-left: 0; } .nav--admin-utility .nav__menu li:last-of-type { padding-right: 0; } .nav--admin-utility .nav__menu li a { color: #636569; display: inline; padding: 0; margin: 0; text-decoration: none; border-bottom: 1px solid transparent; -webkit-transition: border 0.2s ease-in-out; -o-transition: border 0.2s ease-in-out; -moz-transition: border 0.2s ease-in-out; transition: border 0.2s ease-in-out; } .nav--admin-utility .nav__menu li a:hover, .nav--admin-utility .nav__menu li a:focus { border-bottom: 1px solid #636569; } .nav--admin-utility .nav__menu li a:after { background: #636569; } .nav--admin-utility .nav__menu li a .indicator { color: #D44424; } .nav--tags { color: #000000; } .nav--tags .drawer-toggle { border-bottom: none; display: block; } .nav--tags .drawer-toggle:hover, .nav--tags .drawer-toggle:focus { border-bottom: none; } .nav--tags .drawer-toggle:focus { outline: 0; } .nav--tags li > a { border-bottom: none; display: block; } .nav--tags li > a:hover, .nav--tags li > a:focus { border-bottom: none; } .nav--tags .collapse-all { display: none; } .nav--tags .btn, .nav--tags .button--dropdown { padding: 5px 10px; } .nav--tags .btn i, .nav--tags .button--dropdown i { margin-left: 5px; } .nav--tags .dropdown { position: absolute; right: 15px; top: 12px; } .nav--tags .dropdown__content { margin-top: 20px; width: 600px; max-width: 100%; } .nav--tags .dropdown__content:before { content: ''; content: ''; display: block; width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid #D9D8D6; position: absolute; top: -15px; right: 15px; } .nav--tags .dropdown__content:after { content: ''; content: ''; display: block; width: 0; height: 0; border-left: 13px solid transparent; border-right: 13px solid transparent; border-bottom: 13px solid #ffffff; position: absolute; top: -13px; right: 17px; } .nav--tags .dropdown .btn, .nav--tags .dropdown .button--dropdown { position: relative; padding-right: 30px; margin: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .nav--tags .dropdown .btn i, .nav--tags .dropdown .button--dropdown i { position: absolute; right: 15px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .nav--tags .dropdown .btn + .btn, .nav--tags .dropdown .button--dropdown + .btn, .nav--tags .dropdown .btn + .button--dropdown, .nav--tags .dropdown .button--dropdown + .button--dropdown { border-top: none; } .nav--tags a { color: #000000; } .nav--tags a:after { display: none; } .nav--tags .fa-tag { color: #D9D8D6; } .nav--tags .drawer-toggle .fa-minus-circle { display: none; } .nav--tags .drawer-toggle.open .fa-minus-circle { display: inline-block; } .nav--tags .drawer-toggle.open .fa-plus-circle { display: none; } .nav--tags .drawer { padding: 0 15px; } .nav--tags > .nav__menu > li { border: 1px solid #D9D8D6; margin-bottom: 15px; background: #ffffff; } .nav--tags .nav__menu li > .btn, .nav--tags .nav__menu li > .button--dropdown, .nav--tags .nav__menu li > .drawer-controls > .btn, .nav--tags .nav__menu li > .drawer-controls > .button--dropdown { position: absolute; right: 15px; top: 12px; } .nav--tags .nav__menu li.has-children > .drawer-controls > a { padding-right: 85px; } .nav--tags .nav__menu > li:first-child.has-chilren { margin-top: 15px; } .nav--tags .nav__menu li { position: relative; } .nav--tags .nav__menu li .fa-ellipsis-v { position: absolute; left: 10px; top: 16px; z-index: 5; color: #D51B2F; display: none; } .nav--tags .nav__menu li:hover > .fa-ellipsis-v, .nav--tags .nav__menu li:focus > .fa-ellipsis-v { display: block; } .nav--tags .nav__menu li:hover > .drawer-controls > .fa-ellipsis-v, .nav--tags .nav__menu li:focus > .drawer-controls > .fa-ellipsis-v { display: block; } .nav--tags .nav__menu li a { display: block; padding: 15px; padding-left: 45px; } .nav--tags .nav__menu li a i { position: absolute; left: 25px; top: 18px; } .nav--tags .nav__menu .nav__menu li .fa-ellipsis-v { top: 18px; } .nav--tags .nav__menu .nav__menu li a { border-top: 1px solid #D9D8D6; } .nav--tags .nav__menu .nav__menu li a.drawer-toggle { background: #F4F3F2; border-top: none; } .nav--tags .nav__menu .nav__menu li:first-child > a { border-top: none; margin-top: 0; } .nav--tags .nav__menu .nav__menu li.has-children:last-child { margin-bottom: 15px; } .nav--tags .nav__menu .nav__menu li.has-children + li > a { border-top: none; margin-top: 0; } .nav--tags .nav__menu .nav__menu li.has-children + li.has-children { margin-top: 15px; } .nav--tags .nav__menu .nav__menu li.has-children + li.has-children > a { margin-top: 15px; } .nav--utility + .nav { margin-top: 15px; } .nav--utility .nav__menu { display: block; text-align: right; } .nav--utility .nav__menu li { padding: 0 15px; display: inline-block; position: relative; } .nav--utility .nav__menu li:after { content: ''; width: 1px; height: 15px; background: #D9D8D6; position: absolute; right: -1px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .nav--utility .nav__menu li:first-of-type { padding-left: 0; } .nav--utility .nav__menu li:last-of-type { padding-right: 0; } .nav--utility .nav__menu li:last-of-type:after { display: none; } .nav--utility .nav__menu li a { color: #636569; display: inline; padding: 0; margin: 0; text-decoration: none; border-bottom: 1px solid transparent; -webkit-transition: border 0.2s ease-in-out; -o-transition: border 0.2s ease-in-out; -moz-transition: border 0.2s ease-in-out; transition: border 0.2s ease-in-out; } .nav--utility .nav__menu li a:hover, .nav--utility .nav__menu li a:focus { border-bottom: 1px solid #636569; } .nav--utility .nav__menu li a:after { background: #636569; } .nav--sidebar .nav__menu li { margin-bottom: 15px; } .nav--sidebar .nav__menu li:last-of-type { margin-bottom: 0; } .nav--sidebar .nav__menu li a { color: #636569; display: inline; padding: 0; margin: 0; text-decoration: none; border-bottom: 1px solid transparent; -webkit-transition: border 0.2s ease-in-out; -o-transition: border 0.2s ease-in-out; -moz-transition: border 0.2s ease-in-out; transition: border 0.2s ease-in-out; } .nav--sidebar .nav__menu li a:hover, .nav--sidebar .nav__menu li a:focus { border-bottom: 1px solid #636569; } .nav--sidebar .nav__menu li .indicator { background: #000000; color: #ffffff; padding: 2px 4px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; font-size: 0.8em; } .nav--primary .nav__menu { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -webkit-justify-content: flex-end; -moz-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .nav--primary .nav__menu li { padding: 0 20px; } .nav--primary .nav__menu li a { color: #636569; display: inline; padding: 0; margin: 0; text-decoration: none; border-bottom: 1px solid transparent; -webkit-transition: border 0.2s ease-in-out; -o-transition: border 0.2s ease-in-out; -moz-transition: border 0.2s ease-in-out; transition: border 0.2s ease-in-out; } .nav--primary .nav__menu li a:hover, .nav--primary .nav__menu li a:focus { border-bottom: 1px solid #636569; } .nav--primary .nav__menu li a.btn, .nav--primary .nav__menu li a.button--dropdown { border-bottom: none; -webkit-transition: all 0.2s; -o-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; display: inline-block; padding: 10px 25px; color: #ffffff; } .nav--primary .nav__menu li a.btn:hover, .nav--primary .nav__menu li a.button--dropdown:hover, .nav--primary .nav__menu li a.btn:focus, .nav--primary .nav__menu li a.button--dropdown:focus { border-bottom: none; } .nav--primary .nav__menu li:last-of-type { padding-right: 0; } .nav--breadcrumbs { margin-bottom: 15px; } .nav--breadcrumbs .nav__menu li { display: inline-block; } .nav--breadcrumbs .nav__menu li i { margin: 0 15px; margin-right: 10px; } .front-end .nav--utility .nav__menu li { padding-top: 5px; padding-bottom: 5px; } .front-end .nav--utility .nav__menu li:after { background: #636569; } .front-end .nav--primary .nav__menu { display: block; text-align: right; } .front-end .nav--primary .nav__menu li { display: inline-block; padding: 5px 0; padding-left: 20px; } .front-end .nav--primary .nav__menu li:last-child { padding-right: 0; } @media (max-width: 767px) { .nav--admin-utility .nav__menu li, .nav--utility .nav__menu li { padding: 0 5px; } } header { background: #ffffff; } .header__utility { border-bottom: 1px solid #D9D8D6; padding: 10px 0; text-align: right; } .header__utility .session__meta { float: left; padding: 5px 0; font-size: 0.875em; font-weight: 400; line-height: 1.71429; } .header__utility .session__meta span { margin-right: 10px; } .header__utility .session__meta a { color: #D44424; display: inline; padding: 0; margin: 0; text-decoration: none; border-bottom: 1px solid #D44424; -webkit-transition: border 0.2s ease-in-out; -o-transition: border 0.2s ease-in-out; -moz-transition: border 0.2s ease-in-out; transition: border 0.2s ease-in-out; } .header__utility .session__meta a:hover, .header__utility .session__meta a:focus { border-bottom: 1px solid transparent; } .header__utility form { display: inline-block; margin-left: 30px; } .header__utility .form__group--inline-submit .form__input { padding: 5px 15px; padding-right: 100px; padding-left: 45px; min-width: 365px; background: #F4F3F2; } .header__utility .form__group--inline-submit .btn, .header__utility .form__group--inline-submit .button--dropdown { padding: 5px 15px; } .header__content { padding: 30px 0; } .header__content .form__input { background: #F4F3F2; } .header__content p { margin: 15px 0; font-weight: 600; } .header__content p:last-child { margin-bottom: 0; } .header__brand img { width: 300px; max-width: 100%; } .front-end .header__content { padding: 0; } .front-end .header__content:after { clear: both; content: ""; display: table; } .front-end .header__content h1 { float: left; margin: 0; padding: 30px 0; } .front-end .header__content .nav--primary { float: right; padding: 30px 0; } @media (max-width: 767px) { .header__content .text-right { text-align: left; } } section { padding: 45px 0; } .section--fixed-bottom { display: none; padding: 45px 0; position: fixed; bottom: 0; left: 0; width: 100%; background: #636569; color: #ffffff; z-index: 1000; } .section--fixed-bottom h2 { font-size: 1.25em; font-weight: 700; line-height: 1.5; } .section--fixed-bottom .container { margin: 0 auto; } .section--fixed-bottom .btn, .section--fixed-bottom .button--dropdown { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .section--fixed-bottom .btn:hover, .section--fixed-bottom .button--dropdown:hover, .section--fixed-bottom .btn:focus, .section--fixed-bottom .button--dropdown:focus { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .sidebar { padding-bottom: 30px; } .sidebar hr { margin: 30px 0; } .sidebar h2, .sidebar .h2 { font-weight: 400; } .sidebar__label { margin-top: 0; font-size: 1em; font-weight: 900; line-height: 1.25; text-transform: uppercase; } footer { padding: 60px 0; background: #D9D8D6; border-top: 3px solid #D9D8D6; color: #636569; } .footer__left { position: relative; padding-right: 45px; } .footer__left:after { content: ''; height: 75px; position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 1px; background: #636569; } .footer__right { padding-left: 45px; } .footer__right a { color: #636569; display: inline; padding: 0; margin: 0; text-decoration: none; border-bottom: 1px solid #636569; -webkit-transition: border 0.2s ease-in-out; -o-transition: border 0.2s ease-in-out; -moz-transition: border 0.2s ease-in-out; transition: border 0.2s ease-in-out; font-weight: 700; } .footer__right a:hover, .footer__right a:focus { border-bottom: 1px solid transparent; } .front-end .footer__left { padding-right: 15px; } .front-end .footer__left:after { display: none; } .front-end .footer__right { padding-left: 15px; } .front-end .footer__right a { color: #AA1F2E; display: inline; padding: 0; margin: 0; text-decoration: none; border-bottom: 1px solid #AA1F2E; -webkit-transition: border 0.2s ease-in-out; -o-transition: border 0.2s ease-in-out; -moz-transition: border 0.2s ease-in-out; transition: border 0.2s ease-in-out; font-weight: 400; } .front-end .footer__right a:hover, .front-end .footer__right a:focus { border-bottom: 1px solid transparent; } .footer__brand img { max-width: 100%; width: 300px; } .has-slideout { padding-right: 30px; position: relative; -webkit-transition: padding-right 0.2s ease-in-out; -o-transition: padding-right 0.2s ease-in-out; -moz-transition: padding-right 0.2s ease-in-out; transition: padding-right 0.2s ease-in-out; } .has-slideout.open { padding-right: 365px; } .slideout { position: absolute; height: 100%; top: 0; right: -30px; width: 4px; background: #ffffff; -webkit-transition: width 0.2s ease-in-out; -o-transition: width 0.2s ease-in-out; -moz-transition: width 0.2s ease-in-out; transition: width 0.2s ease-in-out; } .slideout.open { width: 33.33%; } .slideout.open .slideout__header .slideout__toggle { background: #FAF9F9; border-left: 1px solid #D9D8D6; -webkit-border-top-left-radius: 0; -moz-border-radius-topleft: 0; border-top-left-radius: 0; -webkit-border-bottom-left-radius: 0; -moz-border-radius-bottomleft: 0; border-bottom-left-radius: 0; margin-left: -1px; } .slideout.open .slideout__header .slideout__toggle i { color: #636569; } .slideout.open .slideout__header .slideout__toggle.open { color: #D44424; background: #ffffff; border-left: 1px solid #ffffff; } .slideout.open .slideout__header .slideout__toggle.open i { color: #D44424; } .slideout.open--wide { width: 98.35%; } .slideout:before { content: ''; background: #D9D8D6; position: absolute; top: 0; right: 0; width: 1px; height: 100%; } .slideout__header { position: absolute; top: 0; left: 0; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); z-index: 2; text-align: right; } .slideout__header .slideout__toggle { display: table; border: 1px solid #D9D8D6; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin-bottom: 5px; padding: 10px 15px; background: #ffffff; border-right: 1px solid #ffffff; margin-right: -2px; position: relative; z-index: 2; } .slideout__header .slideout__toggle.open { color: #D44424; background: #ffffff; } .slideout__header .slideout__toggle.open i { color: #D44424; } .slideout__content-wrapper { position: absolute; right: 0; top: 0; width: 100%; height: 100%; border: 1px solid #D9D8D6; overflow-y: auto; padding: 2px; } .slideout__content { display: none; padding: 30px; } .slideout--fixed { position: fixed; left: 0; right: auto; top: 0; width: 10px; -webkit-transition: width 0.4s; -o-transition: width 0.4s; -moz-transition: width 0.4s; transition: width 0.4s; } .slideout--fixed.open { width: 432px; } .slideout--fixed .slideout__header { right: 0; top: 15px; left: auto; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .slideout--fixed .slideout__header .slideout__toggle { border-right: 1px solid #D9D8D6; border-left: 1px solid #ffffff; margin-right: 0; margin-left: -2px; width: 48px; text-align: center; } /* THEME COMPONENTS ------------------------------------------------------------------------------*/ /* BANNER COMPONENTS ---------------------------------------------------------------------------*/ .banner { padding: 60px 0; position: relative; width: 100%; background: #AA1F2E; } /* BUTTON COMPONENTS ---------------------------------------------------------------------------*/ button { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; margin: 0; font-size: 16px; color: #636569; text-align: left; cursor: pointer; } .btn, .button--dropdown { padding: 10px 25px; cursor: pointer; -webkit-transition: all 0.2s; -o-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; display: inline-block; -webkit-appearance: none; -moz-appearance: none; appearance: none; text-decoration: none; color: #636569; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin-bottom: 5px; border: none; font-size: 1em; font-weight: 700; line-height: 1.25; } .btn + .btn--link, .button--dropdown + .btn--link { margin-left: 15px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; font-weight: 400; } .btn[disabled], .button--dropdown[disabled] { pointer-events: none; opacity: 0.2; } .btn:after, .button--dropdown:after { display: none; } .btn:hover, .button--dropdown:hover, .btn:focus, .button--dropdown:focus { border: none; -webkit-box-shadow: 2px 2px 10px #D9D8D6; -moz-box-shadow: 2px 2px 10px #D9D8D6; box-shadow: 2px 2px 10px #D9D8D6; } .btn--sm { padding: 10px 25px; font-size: 0.875em; font-weight: 700; line-height: 1.28571; } .btn--xsm { padding: 8px 10px; font-size: 0.875em; font-weight: 700; line-height: 1.14286; } .btn--lg { padding: 15px 25px; font-size: 1.125em; font-weight: 700; line-height: 1.22222; } .btn--primary { background: #AA1F2E; color: #ffffff; } .btn--primary:hover, .btn--primary:focus { background: #D51B2F; color: #ffffff; } .btn--primary:active { background: #830E1B; -webkit-box-shadow: inset 0 0 10px #636569; -moz-box-shadow: inset 0 0 10px #636569; box-shadow: inset 0 0 10px #636569; } .btn--primary[disabled] { background: #636569; } .btn--secondary { background: #D44424; color: #ffffff; } .btn--secondary:hover, .btn--secondary:focus { background: #F9471F; color: #ffffff; } .btn--secondary:active { background: #B1351A; -webkit-box-shadow: inset 0 0 10px #636569; -moz-box-shadow: inset 0 0 10px #636569; box-shadow: inset 0 0 10px #636569; } .btn--default { background: #636569; color: #ffffff; } .btn--default:hover, .btn--default:focus { background: #7c7e83; color: #ffffff; } .btn--default:active { background: #4a4c4f; -webkit-box-shadow: inset 0 0 10px #636569; -moz-box-shadow: inset 0 0 10px #636569; box-shadow: inset 0 0 10px #636569; } .btn--neutral { background: rgba(244, 243, 242, 0.5); border: 1px solid #D9D8D6; } .btn--neutral:hover, .btn--neutral:focus { border: 1px solid #D9D8D6; } .btn--control { height: 25px; width: 25px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; padding: 0; text-align: center; border: 1px solid #D9D8D6; } .btn--white { border: 2px solid #ffffff; background: #ffffff; color: #D44424; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .btn--white:hover, .btn--white:focus { background: transparent; color: #ffffff; border: 2px solid #ffffff; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .btn--no-style { padding: 0; background: transparent; color: currentColor; } .btn--no-style:hover, .btn--no-style:focus { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .btn--bordered { border: 2px solid #ffffff; background: transparent; color: #ffffff; } .btn--bordered:hover, .btn--bordered:focus { background: #ffffff; border: 2px solid #ffffff; color: #D44424; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .btn--bordered-primary { border: 1px solid #AA1F2E; background: transparent; color: #AA1F2E; } .btn--bordered-primary:hover, .btn--bordered-primary:focus { background: #AA1F2E; border: 1px solid #AA1F2E; color: #ffffff; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .btn--bordered-reversed { border: 2px solid #D44424; background: transparent; color: #D44424; } .btn--bordered-reversed:hover, .btn--bordered-reversed:focus { background: #D44424; border: 2px solid #D44424; color: #ffffff; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .btn--icon { padding: 10px 15px; } .btn--sort { padding: 0; margin-left: 15px; } .btn--sort:hover, .btn--sort:focus { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .btn--minimal { background: #ffffff; border: 1px solid #D9D8D6; color: #636569; } .btn--minimal:hover, .btn--minimal:focus { border: 1px solid #D9D8D6; color: #636569; } .btn--minimal i { color: #D44424; font-size: 0.8em; } .btn--minimal:active { background: #D9D8D6; } .btn--link { background: transparent; padding: 2px 0; display: inline; padding: 0; margin: 0; text-decoration: none; border-bottom: 1px solid #636569; -webkit-transition: border 0.2s ease-in-out; -o-transition: border 0.2s ease-in-out; -moz-transition: border 0.2s ease-in-out; transition: border 0.2s ease-in-out; } .btn--link:hover, .btn--link:focus { border-bottom: 1px solid transparent; } .btn--link:after { display: block; } .btn--link:hover, .btn--link:focus { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .btn--dropdown { font-size: 1.125em; font-weight: 600; line-height: 1.22222; width: 100%; text-align: left; padding: 10px 15px; border-top: 1px solid #D9D8D6; border-bottom: 1px solid #D9D8D6; background: transparent; position: relative; margin-bottom: 0; padding-right: 45px; } .btn--dropdown i { position: absolute; right: 15px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: -webkit-transform 0.2s ease-in-out; transition: -webkit-transform 0.2s ease-in-out; -o-transition: -o-transform 0.2s ease-in-out; -moz-transition: transform 0.2s ease-in-out, -moz-transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out, -moz-transform 0.2s ease-in-out, -o-transform 0.2s ease-in-out; } .btn--dropdown.open i { -webkit-transform: translateY(-50%) rotate(180deg); -moz-transform: translateY(-50%) rotate(180deg); -ms-transform: translateY(-50%) rotate(180deg); -o-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); } .btn--dropdown:hover, .btn--dropdown:focus { border-top: 1px solid #D9D8D6; border-bottom: 1px solid #D9D8D6; } .btn--remove { padding: 0; display: inline; padding: 0; margin: 0; text-decoration: none; border-bottom: 1px solid #636569; -webkit-transition: border 0.2s ease-in-out; -o-transition: border 0.2s ease-in-out; -moz-transition: border 0.2s ease-in-out; transition: border 0.2s ease-in-out; } .btn--remove:hover, .btn--remove:focus { border-bottom: 1px solid transparent; } .btn--remove:after { display: block; } .btn--remove i { margin-right: 0; } .btn--remove:hover, .btn--remove:focus { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .btn--pager { border: 1px solid #D9D8D6; font-size: 1.4em; margin: 0; } .btn--pager i { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } .btn--pager:active { background: #D9D8D6; } .btn--pager-left, .btn--pager-right { background: #ffffff; } .btn--pager-left:hover, .btn--pager-left:focus, .btn--pager-right:hover, .btn--pager-right:focus { color: #636569; border: 1px solid #D9D8D6; } .btn--pager-left:hover i, .btn--pager-left:focus i, .btn--pager-right:hover i, .btn--pager-right:focus i { -webkit-animation-name: hover-button-horizontal; -moz-animation-name: hover-button-horizontal; -o-animation-name: hover-button-horizontal; animation-name: hover-button-horizontal; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } .btn--pager-left { -webkit-border-top-right-radius: 0; -moz-border-radius-topright: 0; border-top-right-radius: 0; -webkit-border-bottom-right-radius: 0; -moz-border-radius-bottomright: 0; border-bottom-right-radius: 0; margin-right: -1px; } .btn--pager-right { -webkit-border-top-left-radius: 0; -moz-border-radius-topleft: 0; border-top-left-radius: 0; -webkit-border-bottom-left-radius: 0; -moz-border-radius-bottomleft: 0; border-bottom-left-radius: 0; } .btn--pager-up, .btn--pager-down { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; height: 55px; width: 55px; padding: 13px 21px; margin: 0 7px; background: #ffffff; } .btn--pager-up:hover, .btn--pager-up:focus, .btn--pager-down:hover, .btn--pager-down:focus { color: #636569; border: 1px solid #D9D8D6; } .btn--pager-up:hover i, .btn--pager-up:focus i, .btn--pager-down:hover i, .btn--pager-down:focus i { -webkit-animation-name: hover-button-vertical; -moz-animation-name: hover-button-vertical; -o-animation-name: hover-button-vertical; animation-name: hover-button-vertical; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } .btn--pager.inactive, .btn--pager[disabled] { color: #F4F3F2; opacity: 1; } .btn--pager.inactive:hover, .btn--pager.inactive:focus, .btn--pager[disabled]:hover, .btn--pager[disabled]:focus { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .btn--pager.inactive:hover i, .btn--pager.inactive:focus i, .btn--pager[disabled]:hover i, .btn--pager[disabled]:focus i { -webkit-animation-duration: 0s; -moz-animation-duration: 0s; -o-animation-duration: 0s; animation-duration: 0s; } .btn--text { background: transparent; padding: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; font-size: 0.875em; font-weight: 400; line-height: 1.42857; display: inline; padding: 0; margin: 0; text-decoration: none; border-bottom: 1px solid #636569; -webkit-transition: border 0.2s ease-in-out; -o-transition: border 0.2s ease-in-out; -moz-transition: border 0.2s ease-in-out; transition: border 0.2s ease-in-out; } .btn--text:hover, .btn--text:focus { border-bottom: 1px solid transparent; } .btn--text:hover, .btn--text:focus { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .buttons__group .btn, .buttons__group .button--dropdown { margin-left: 5px; margin-right: 5px; } .button--icon.dropdown__toggle .fa-minus-circle { display: none; } .button--icon.dropdown__toggle.open .fa-plus-circle { display: none; } .button--icon.dropdown__toggle.open .fa-minus-circle { display: block; } .button--dropdown { font-size: 1em; font-weight: 400; line-height: 1.25; padding: 7px 15px; margin: 0; border: 1px solid #D9D8D6; } .button--dropdown i { color: #D44424; -webkit-transition: -webkit-transform 0.2s ease-in-out; transition: -webkit-transform 0.2s ease-in-out; -o-transition: -o-transform 0.2s ease-in-out; -moz-transition: transform 0.2s ease-in-out, -moz-transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out, -moz-transform 0.2s ease-in-out, -o-transform 0.2s ease-in-out; } .button--dropdown.open { color: #D44424; -webkit-border-bottom-left-radius: 0; -moz-border-radius-bottomleft: 0; border-bottom-left-radius: 0; -webkit-border-bottom-right-radius: 0; -moz-border-radius-bottomright: 0; border-bottom-right-radius: 0; } .button--dropdown.open i { -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -o-transform: rotate(-180deg); transform: rotate(-180deg); } .button--dropdown:hover, .button--dropdown:focus { border: 1px solid #D9D8D6; } .button--tagging { padding: 0; background: transparent; color: #ffffff; font-size: 0.875em; font-weight: 400; line-height: 1.42857; margin-right: 15px; } .button--tagging:last-child { margin-right: 0; } h2.page__title--has-actions { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } h2.page__title--has-actions .btn--xsm { font-size: 0.6em; padding: 5px 10px; margin: 5px 15px; } h2.page__title--has-actions .btn--xsm:first-child { margin-left: 0; } /* CARD COMPONENTS ---------------------------------------------------------------------------*/ .card { background: #ffffff; } .card.drawer { background: #ffffff; border-top: none; } .card__header { padding: 15px; color: #ffffff; } .card__title { text-transform: uppercase; font-size: 1.125em; font-weight: 700; line-height: 1.33333; } .card__footer { padding: 15px; font-weight: 700; } .card--padded { padding: 15px; } .card--flush { margin: 0-15px; } .card .results__header { padding-top: 0; } .card .results .result:last-child { padding-bottom: 0; } /* DROPDOWN COMPONENTS ---------------------------------------------------------------------------*/ .dropdown { position: relative; margin-bottom: 15px; } .dropdown .drawer { padding: 15px 0; position: relative; z-index: 2; } .dropdown .drawer--overlay { position: absolute; } .dropdown__content { min-width: 300px; padding: 15px; position: relative; z-index: 2; display: none; background: #ffffff; border: 1px solid #D9D8D6; -webkit-box-shadow: 2px 2px 10px #D9D8D6; -moz-box-shadow: 2px 2px 10px #D9D8D6; box-shadow: 2px 2px 10px #D9D8D6; } .dropdown__content--overlay { position: absolute; right: 0; } .dropdown__content--plain { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border: none; padding: 0; padding-bottom: 30px; } .dropdown__content--plain h3 { font-weight: 400; } .dropdown__content--contained { min-width: 100%; text-align: left; top: 100%; margin-top: -6px; -webkit-box-shadow: 0 5px 5px #D9D8D6; -moz-box-shadow: 0 5px 5px #D9D8D6; box-shadow: 0 5px 5px #D9D8D6; } .dropdown__content--contained a { color: #636569; display: inline; padding: 0; margin: 0; text-decoration: none; border-bottom: 1px solid #636569; -webkit-transition: border 0.2s ease-in-out; -o-transition: border 0.2s ease-in-out; -moz-transition: border 0.2s ease-in-out; transition: border 0.2s ease-in-out; } .dropdown__content--contained a:hover, .dropdown__content--contained a:focus { border-bottom: 1px solid transparent; } .drawer-toggle { position: relative; } .drawer { display: none; } .drawer--overlay { position: absolute; width: 100%; z-index: 10; } .drawer.open-default { display: block; } .drawer-wrapper { position: relative; } .dropdown__toggle i.fa-angle-down { -webkit-transition: -webkit-transform 0.2s ease-in-out; transition: -webkit-transform 0.2s ease-in-out; -o-transition: -o-transform 0.2s ease-in-out; -moz-transition: transform 0.2s ease-in-out, -moz-transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out, -moz-transform 0.2s ease-in-out, -o-transform 0.2s ease-in-out; } .dropdown__toggle.open i.fa-angle-down { -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -o-transform: rotate(-180deg); transform: rotate(-180deg); } .dropdown__content { display: none; z-index: 10; } .dropdown__content--open-default { display: block; } .dropdown__content--overlay { z-index: 11; } .dropdown__list { list-style: none; padding: 0; } .dropdown__list li a { color: #636569; display: inline; padding: 0; margin: 0; text-decoration: none; border-bottom: 1px solid #636569; -webkit-transition: border 0.2s ease-in-out; -o-transition: border 0.2s ease-in-out; -moz-transition: border 0.2s ease-in-out; transition: border 0.2s ease-in-out; font-size: 0.875em; font-weight: 400; line-height: 1.42857; } .dropdown__list li a:hover, .dropdown__list li a:focus { border-bottom: 1px solid transparent; } .dropdown__list li a i { display: none; } .dropdown--inline { display: inline-block; } .dropdown--overlay { position: relative; display: inline-block; } .dropdown--overlay:after { clear: both; content: ""; display: table; } .dropdown--overlay .dropdown__content { position: absolute; left: 0; top: 100%; min-width: 0; width: 100%; border: 1px solid #D9D8D6; border-top: none; } .dropdown--overlay .dropdown__content--accordion-right { padding: 10px 15px; background: #ffffff; left: auto; right: 0; min-width: 0; width: 100%; text-align: left; } .dropdown--overlay .dropdown__content--popover { -webkit-box-shadow: 0 0 7px #D9D8D6; -moz-box-shadow: 0 0 7px #D9D8D6; box-shadow: 0 0 7px #D9D8D6; padding: 15px 25px; background: #ffffff; left: auto; right: 5px; width: 500px; text-align: left; } .dropdown__title { position: relative; padding-right: 30px; display: block; font-size: 1.25em; font-weight: 600; line-height: 1.3; } .dropdown__title .button--icon { background: transparent; padding: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); margin: 0; color: #D9D8D6; } .dropdown__edit-form, .dropdown__delete-message { display: none; } .dropdown__edit-form { width: 400px; } .dropdown__delete-message { width: 400px; } .expandable { position: relative; margin-bottom: 15px; } .expandable > .btn--icon { position: absolute; right: 15px; top: 10px; background: transparent; color: #636569; padding: 0; } .expandable--condensed .expandable__control { padding: 6px 15px; font-size: 0.875em; font-weight: 500; line-height: 1.71429; } .expandable--condensed .expandable__control i { margin-right: 5px; } .expandable--condensed .expandable__content { padding-left: 35px; } .expandable__control { background: #F4F3F2; border: 1px solid #D9D8D6; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; width: 100%; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; padding: 10px 15px; font-size: 1em; font-weight: 500; line-height: 1.5; } .expandable__control i { color: #000000; margin-right: 15px; } .expandable__control i.fa-minus-circle, .expandable__control i.fa-angle-up { display: none; } .expandable__control.open { -webkit-border-bottom-left-radius: 0; -moz-border-radius-bottomleft: 0; border-bottom-left-radius: 0; -webkit-border-bottom-right-radius: 0; -moz-border-radius-bottomright: 0; border-bottom-right-radius: 0; border-bottom: none; } .expandable__control.open i.fa-minus-circle, .expandable__control.open i.fa-angle-up { display: inline; } .expandable__control.open i.fa-plus-circle, .expandable__control.open i.fa-angle-down { display: none; } .expandable__content { background: #F4F3F2; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-left-radius: 3px; -webkit-border-bottom-right-radius: 3px; -moz-border-radius-bottomright: 3px; border-bottom-right-radius: 3px; color: #636569; padding-top: 5px; padding-left: 46px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border-top: none; } .expandable__content .has-info { position: relative; } .expandable__content .has-info .popup__info-toggle { position: absolute; left: -21px; top: 3px; } .expandable__content .form__boolean .form__label { color: #636569; } .expandable__content p { margin-bottom: 10px; } .expandable__content .form__group { margin-bottom: 10px; } .expandable__content .form__group:last-child { margin-bottom: 0; } .front-end .expandable__control { background: rgba(244, 243, 242, 0.5); } .front-end .expandable__content { background: rgba(244, 243, 242, 0.5); } .expand-all-projects .open-text, .expand-all-documents .open-text { display: none; } .expand-all-projects.open .open-text, .expand-all-documents.open .open-text { display: block; } .expand-all-projects.open .closed-text, .expand-all-documents.open .closed-text { display: none; } @media (max-width: 767px) { .dropdown--overlay .dropdown__content--popover { position: fixed; z-index: 150; width: 90%; max-height: 100%; overflow-y: auto; top: 50%; left: 50%; right: auto; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } .tooltip-toggle { position: relative; } .tooltip-toggle:hover .tooltip, .tooltip-toggle:focus .tooltip { display: inline-block; } .tooltip { display: none; background: #ffffff; white-space: nowrap; padding: 10px; position: absolute; bottom: 100%; left: 50%; margin-bottom: 10px; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 10; -webkit-box-shadow: 2px 2px 10px #D9D8D6; -moz-box-shadow: 2px 2px 10px #D9D8D6; box-shadow: 2px 2px 10px #D9D8D6; border: 1px solid #D9D8D6; } .tooltip:before, .tooltip:after { position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .tooltip--top:before { content: ''; display: block; width: 0; height: 0; border-left: 9.5px solid transparent; border-right: 9.5px solid transparent; border-top: 9.5px solid #D9D8D6; bottom: -9.5px; } .tooltip--top:after { content: ''; display: block; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #ffffff; bottom: -8px; } .tooltip--bottom { bottom: auto; top: 100%; margin-bottom: 0; margin-top: 10px; } .tooltip--bottom:before { content: ''; display: block; width: 0; height: 0; border-left: 9.5px solid transparent; border-right: 9.5px solid transparent; border-bottom: 9.5px solid #D9D8D6; top: -9.5px; } .tooltip--bottom:after { content: ''; display: block; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #ffffff; top: -8px; } .tooltip--left:before, .tooltip--left:after, .tooltip--right:before, .tooltip--right:after { top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .tooltip--left { bottom: auto; left: auto; right: 100%; top: 50%; margin-bottom: 0; margin-right: 10px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .tooltip--left:before { content: ''; display: block; width: 0; height: 0; border-top: 9.5px solid transparent; border-bottom: 9.5px solid transparent; border-left: 9.5px solid #D9D8D6; bottom: auto; left: auto; right: -9.5px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .tooltip--left:after { content: ''; display: block; width: 0; height: 0; border-top: 9.5px solid transparent; border-bottom: 9.5px solid transparent; border-left: 9.5px solid #ffffff; bottom: auto; left: auto; right: -8px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .tooltip--right { bottom: auto; left: 100%; top: 50%; margin-bottom: 0; margin-left: 10px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .tooltip--right:before { content: ''; display: block; width: 0; height: 0; border-top: 9.5px solid transparent; border-bottom: 9.5px solid transparent; border-right: 9.5px solid #D9D8D6; bottom: auto; left: -9.5px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .tooltip--right:after { content: ''; display: block; width: 0; height: 0; border-top: 9.5px solid transparent; border-bottom: 9.5px solid transparent; border-right: 9.5px solid #ffffff; bottom: auto; left: -8px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } /* TOOLTIP COMPONENTS ---------------------------------------------------------------------------*/ .tooltip-alt { display: none; background: #ffffff; width: 400px; padding: 20px; position: absolute; bottom: 100%; left: 50%; margin-bottom: 10px; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 10; } .tooltip-alt:before, .tooltip-alt:after { position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .tooltip-alt--top:before { content: ''; display: block; width: 0; height: 0; border-left: 9.5px solid transparent; border-right: 9.5px solid transparent; border-top: 9.5px solid #CCCCCC; bottom: -9.5px; } .tooltip-alt--top:after { content: ''; display: block; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #ffffff; bottom: -8px; } .tooltip-alt--bottom { bottom: auto; top: 100%; margin-bottom: 0; margin-top: 10px; } .tooltip-alt--bottom:before { content: ''; display: block; width: 0; height: 0; border-left: 9.5px solid transparent; border-right: 9.5px solid transparent; border-bottom: 9.5px solid #CCCCCC; top: -9.5px; } .tooltip-alt--bottom:after { content: ''; display: block; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #ffffff; top: -8px; } .tooltip-alt--left:before, .tooltip-alt--left:after, .tooltip-alt--right:before, .tooltip-alt--right:after { top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .tooltip-alt--left { bottom: auto; left: auto; right: 100%; top: 50%; margin-bottom: 0; margin-right: 10px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .tooltip-alt--left:before { content: ''; display: block; width: 0; height: 0; border-top: 9.5px solid transparent; border-bottom: 9.5px solid transparent; border-left: 9.5px solid #CCCCCC; bottom: auto; left: auto; right: -9.5px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .tooltip-alt--left:after { content: ''; display: block; width: 0; height: 0; border-top: 9.5px solid transparent; border-bottom: 9.5px solid transparent; border-left: 9.5px solid #ffffff; bottom: auto; left: auto; right: -8px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .tooltip-alt--right { bottom: auto; left: 100%; top: 50%; margin-bottom: 0; margin-left: 10px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); background: #323335; color: #ffffff; } .tooltip-alt--right:before { display: none; } .tooltip-alt--right:after { content: ''; display: block; width: 0; height: 0; border-top: 9.5px solid transparent; border-bottom: 9.5px solid transparent; border-right: 9.5px solid #323335; bottom: auto; left: -8px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .tooltip-alt__toggle { position: relative; overflow: visible; padding: 0; } .tooltip-alt__toggle.open .tooltip-alt { display: inline-block; } /* FORM COMPONENTS ---------------------------------------------------------------------------*/ input[type="text"], input[type="email"], input[type="number"], input[type="tel"], input[type="date"], input[type="search"], input[type="password"], textarea, select, .form__input { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; border: 1px solid #D9D8D6; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 10px 15px; margin: 0; font-size: 1em; font-weight: 400; line-height: 1.375; width: 100%; background: #ffffff; color: #636569; font-family: "Open Sans", "Helvetica Nueue", "Arial", sans-serif; text-align: left; max-width: 100%; } input[type="text"][disabled], input[type="email"][disabled], input[type="number"][disabled], input[type="tel"][disabled], input[type="date"][disabled], input[type="search"][disabled], input[type="password"][disabled], textarea[disabled], select[disabled], .form__input[disabled] { background: #F4F3F2; } input[type="text"].form__input--alt, input[type="email"].form__input--alt, input[type="number"].form__input--alt, input[type="tel"].form__input--alt, input[type="date"].form__input--alt, input[type="search"].form__input--alt, input[type="password"].form__input--alt, textarea.form__input--alt, select.form__input--alt, .form__input.form__input--alt { background: #F4F3F2; } input[type="text"].form__input--sm, input[type="email"].form__input--sm, input[type="number"].form__input--sm, input[type="tel"].form__input--sm, input[type="date"].form__input--sm, input[type="search"].form__input--sm, input[type="password"].form__input--sm, textarea.form__input--sm, select.form__input--sm, .form__input.form__input--sm { padding-top: 7px; padding-bottom: 7px; font-size: 0.875em; font-weight: 400; line-height: 1.28571; } span + .form__group { margin-top: 25px; } .label { display: block; margin-bottom: 5px; font-weight: 600; color: #000000; } .form__header:after { clear: both; content: ""; display: table; } .form__header h2, .form__header h3, .form__header h4 { float: left; } .form__header .btn, .form__header .button--dropdown { float: right; } .form--small { font-size: 0.8em; } .form--small .btn, .form--small .button--dropdown { padding: 11px 25px; } .form__inline-controls .form__controls { display: inline-block; } .form__inline-controls .form__group { display: inline-block; width: auto; } .form__inline-controls .form__select-wrapper { display: inline-block; width: auto; } .form__flex-group { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; margin-bottom: 25px; } .form__flex-group .form__group { margin: 0; margin-right: 10px; width: 100%; } .form__flex-group .btn, .form__flex-group .button--dropdown { margin: 0; white-space: nowrap; } .form__set { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; -moz-box-align: start; -ms-flex-align: start; align-items: flex-start; margin-bottom: 10px; } .form__set > * { margin-bottom: 10px !important; margin-right: 20px; } .form__set > *:last-child { margin-right: 0; } .form__group { margin-bottom: 25px; } .form__group .mandatory { color: #a51b00; } .form__group--error .form__label { color: #a51b00; } .form__group--error .form__input { border: 1px solid #a51b00; color: #a51b00; } .form__group--error ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #a51b00; } .form__group--error ::-moz-placeholder { /* Firefox 19+ */ color: #a51b00; } .form__group--error :-ms-input-placeholder { /* IE 10+ */ color: #a51b00; } .form__group--error :-moz-placeholder { /* Firefox 18- */ color: #a51b00; } .form__group--inline-label .form__label { display: inline-block; margin-right: 15px; } .form__group--inline-label .form__input { display: inline-block; width: auto; } .form__group--inline-label .form__select-wrapper, .form__group--inline-label .form__date-wrapper { display: inline-block; width: auto; min-width: 200px; } .form__group--inline-label .form__select-wrapper .form__input, .form__group--inline-label .form__date-wrapper .form__input { width: 100%; } .form__group--inline-label .dropdown { display: inline-block; } .form__group--inline-label-dynamic-width .form__select-wrapper { min-width: 0; } .form__group--condensed { margin-bottom: 10px; } .form__group--has-icon { position: relative; } .form__group--has-icon > i:first-child { position: absolute; left: 15px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); color: #D9D8D6; } .form__group--has-icon .form__input { padding-left: 45px; } .form__group:last-child { margin-bottom: 0; } .form__group--sumo { margin-bottom: 15px; } .form__group--inline { display: inline-block; } .form__group--inline .form__select-wrapper { width: auto; } .form__group--inline .form__input { width: auto; } .form__group--inline .form__input--number { width: 65px; } .form__group--inline-submit { position: relative; } .form__group--inline-submit-alt ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: rgba(99, 101, 105, 0.5); font-weight: 400; } .form__group--inline-submit-alt ::-moz-placeholder { /* Firefox 19+ */ color: rgba(99, 101, 105, 0.5); font-weight: 400; } .form__group--inline-submit-alt :-ms-input-placeholder { /* IE 10+ */ color: rgba(99, 101, 105, 0.5); font-weight: 400; } .form__group--inline-submit-alt :-moz-placeholder { /* Firefox 18- */ color: rgba(99, 101, 105, 0.5); font-weight: 400; } .form__group--inline-submit .form__input { margin-bottom: 0; padding-right: 120px; padding-left: 45px; } .form__group--inline-submit .form__input--no-icon { padding-left: 15px; } .form__group--inline-submit i { position: absolute; left: 15px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); color: #D9D8D6; } .form__group--inline-submit .btn, .form__group--inline-submit .button--dropdown { position: absolute; right: 0; top: 0; height: 100%; -webkit-border-top-left-radius: 0; -moz-border-radius-topleft: 0; border-top-left-radius: 0; -webkit-border-bottom-left-radius: 0; -moz-border-radius-bottomleft: 0; border-bottom-left-radius: 0; } .form__group.text-right .form__select-wrapper { width: auto; } .form__date-wrapper { position: relative; } .form__date-wrapper i { position: absolute; right: 15px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); pointer-events: none; color: #D9D8D6; } .form__label { display: block; margin-bottom: 5px; font-size: 1em; font-weight: 700; line-height: 1.5; color: #000000; } .form__descr { padding: 10px 0; padding-bottom: 0; } .form__actions { padding-top: 15px; } .form__actions .btn, .form__actions .button--dropdown { margin-right: 15px; } .form__actions a { color: #636569; display: inline; padding: 0; margin: 0; text-decoration: none; border-bottom: 1px solid #636569; -webkit-transition: border 0.2s ease-in-out; -o-transition: border 0.2s ease-in-out; -moz-transition: border 0.2s ease-in-out; transition: border 0.2s ease-in-out; } .form__actions a:hover, .form__actions a:focus { border-bottom: 1px solid transparent; } .form__editable-actions { display: none; } .form__editable { padding: 5px; float: left; margin-right: 15px; background: #D9D8D6; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; width: 230px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .form__editable .form__label { display: inline-block; margin: 0; margin-left: 5px; font-weight: 400; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; } .form__editable .form__input { display: inline-block; width: auto; display: none; width: 100%; padding: 3px 10px; } .form__editable .form__editable-buttons { margin-left: auto; white-space: nowrap; } .form__editable .btn--icon { background: transparent; padding: 5px; margin-bottom: 0; } .form__editable .btn--icon:first-of-type { margin-left: 20px; } .form__group--editable { margin-bottom: 10px; } .form__group--editable:after { clear: both; content: ""; display: table; } .form__editable-save { margin-right: 15px; } .form__select-wrapper { position: relative; display: inline-block; width: 100%; } .form__select-wrapper .form__input { padding-right: 30px; } .form__select-wrapper .form__input + i, .form__select-wrapper .form__input + .form__select-dropdown + i { pointer-events: none; position: absolute; right: 10px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); color: #636569; } .form__select-dropdown { position: absolute; top: 100%; left: 0; width: 100%; background: #ffffff; border: 1px solid #D9D8D6; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-left-radius: 3px; -webkit-border-bottom-right-radius: 3px; -moz-border-radius-bottomright: 3px; border-bottom-right-radius: 3px; border-top: none; max-height: 135px; overflow-y: auto; display: none; z-index: 2; } .form__select-item { padding: 5px 10px; background: transparent; border-left: 2px solid transparent; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; width: 100%; } .form__select-item:hover, .form__select-item:focus { background: #FCF2EB; border-left: 2px solid #D44424; } .form__select-item-wrapper { position: relative; } .form__select-item-wrapper .popup__info-toggle { position: absolute; right: 15px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); color: #D44424; } .form__checkbox { display: block; padding-left: 25px; margin-bottom: 15px; position: relative; font-weight: 400; } .form__checkbox input { position: absolute; left: 0; top: 5px; } .form__checkbox input:focus { outline: 0; } .form__checkbox input:focus + .form__radio-replacement-wrapper, .form__checkbox input:focus + .form__checkbox-replacement-wrapper { outline-color: #4d90fe; outline-offset: 0px; outline-style: auto; outline-width: 5px; } .form__radio, .form__check-box { padding-left: 35px; margin-bottom: 15px; position: relative; } .form__radio > label:before, .form__check-box > label:before { -webkit-transition: background 0.2s ease-in-out; -o-transition: background 0.2s ease-in-out; -moz-transition: background 0.2s ease-in-out; transition: background 0.2s ease-in-out; } .form__radio > input, .form__check-box > input { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } .form__radio > input:checked + label:before, .form__check-box > input:checked + label:before { background: #D44424; } .form__radio > input:checked + label:after { display: block; } .form__radios { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 15px; } .form__radios .form__radio { width: 50%; padding-right: 15px; } .form__radios-subfield { display: none; } .form__radio > label:before { content: ''; border: 1px solid #D9D8D6; height: 15px; width: 15px; position: absolute; left: 0; top: 3px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .form__radio > label:after { content: ''; height: 7px; width: 7px; background: #ffffff; position: absolute; left: 5px; top: 8px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; display: none; } .form__check-box > label:before { content: ''; border: 1px solid #D9D8D6; height: 15px; width: 15px; position: absolute; left: 0; top: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .form__check-box > label .fa-check { position: absolute; left: 2px; top: 5px; font-size: 0.9em; color: #ffffff; } .form__checkbox-subfield, .form__radio-subfield { display: none; padding: 10px 0; } .form__checkbox-wrapper { margin-bottom: 15px; } .form__checkbox-wrapper > label i { margin-right: 10px; } .form__checkbox-wrapper .form__checkbox { display: block; cursor: pointer; padding: 5px 15px; margin-bottom: 0; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; border: 1px solid #D9D8D6; font-weight: 600; margin-top: 15px; width: 65px; height: 30px; color: #636569; padding-left: 35px; position: relative; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .form__checkbox-wrapper .form__checkbox-checked-text, .form__checkbox-wrapper .form__checkbox-unchecked-text { overflow: hidden; display: block; margin: 0; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .form__checkbox-wrapper .form__checkbox-checked-text { display: none; } .form__checkbox-wrapper .form__checkbox:after { content: ''; height: 20px; width: 20px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border: 1px solid #D9D8D6; background: #ffffff; position: absolute; margin: 3px; top: 0; left: 100%; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transform: translateX(-29px); -moz-transform: translateX(-29px); -ms-transform: translateX(-29px); -o-transform: translateX(-29px); transform: translateX(-29px); } .form__checkbox-wrapper--inline { display: inline-block; } .form__checkbox-wrapper--inline .form__checkbox { display: inline-block; margin-left: 15px; margin-top: 0; } .form__checkbox-wrapper--inline label { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; white-space: nowrap; } .form__checkbox-wrapper--inline label strong { display: inline-block; margin-right: 5px; } .form__checkbox-wrapper input[type="checkbox"]:focus + label .form__checkbox { -webkit-box-shadow: 1px 1px 8px #F9471F; -moz-box-shadow: 1px 1px 8px #F9471F; box-shadow: 1px 1px 8px #F9471F; } .form__checkbox-wrapper input[type="checkbox"]:checked + label .form__checkbox { padding-left: 15px; padding-right: 35px; border: 1px solid #D44424; background: #D44424; } .form__checkbox-wrapper input[type="checkbox"]:checked + label .form__checkbox-checked-text { display: block; color: #ffffff; } .form__checkbox-wrapper input[type="checkbox"]:checked + label .form__checkbox-unchecked-text { display: none; } .form__checkbox-wrapper input[type="checkbox"]:checked + label .form__checkbox:after { left: 0; border: 1px solid #ffffff; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .form__boolean input { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } .form__boolean input:checked + label .form__boolean-toggle:before { left: 0; } .form__boolean input:checked + label .form__boolean-on { color: #ffffff; } .form__boolean input:checked + label .form__boolean-off { color: #AA1F2E; } .form__boolean label { cursor: pointer; display: table; } .form__boolean .form__boolean-toggle { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; overflow: hidden; border: 1px solid #AA1F2E; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; width: 165px; margin-top: 15px; cursor: pointer; position: relative; z-index: 2; } .form__boolean .form__boolean-toggle:before { content: ''; display: block; width: 50%; height: 100%; left: 50%; top: 0; position: absolute; background: #AA1F2E; z-index: -1; -webkit-transition: left 0.2s ease-in-out; -o-transition: left 0.2s ease-in-out; -moz-transition: left 0.2s ease-in-out; transition: left 0.2s ease-in-out; } .form__boolean .form__boolean-on, .form__boolean .form__boolean-off { display: block; width: 50%; text-align: center; padding: 10px 0; color: #AA1F2E; background: transparent; -webkit-transition: color 0.2s ease-in-out; -o-transition: color 0.2s ease-in-out; -moz-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; } .form__boolean .form__boolean-off { color: #ffffff; } .form__boolean--inline .form__label { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; font-size: 0.875em; font-weight: 400; line-height: 1.71429; } .form__boolean--inline .form__boolean-toggle { margin: 0; width: 100px; margin-left: auto; } .form__boolean--inline .form__boolean-on, .form__boolean--inline .form__boolean-off { padding: 5px 0; } fieldset { margin-bottom: 25px; } fieldset:last-child { margin-bottom: 0; } fieldset legend { display: block; margin-bottom: 15px; font-weight: 600; color: #000000; } textarea { min-height: 100px; } .tags { margin-top: 15px; } .tags .tag { background: #D9D8D6; color: #636569; padding: 7px 15px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin-right: 30px; margin-bottom: 5px; display: inline-block; } .tags .tag .btn--icon { padding: 0; background: transparent; margin-left: 15px; margin-bottom: 0; } ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ font-style: italic; } ::-moz-placeholder { /* Firefox 19+ */ font-style: italic; } :-ms-input-placeholder { /* IE 10+ */ font-style: italic; } :-moz-placeholder { /* Firefox 18- */ font-style: italic; } .login { height: 100%; background-color: #AA1F2E; background-image: url("../images/banner.png"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: right bottom; background-repeat: no-repeat; } .login body { background: transparent; } .SumoSelect { width: 100%; } .SumoSelect .select-all { height: auto; padding: 6px; padding-left: 35px; background: transparent; border: none; } .SumoSelect > .CaptionCont { background: transparent; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; border-left: none; border-right: none; border-top: 1px solid #D9D8D6; border-bottom: 1px solid #D9D8D6; font-size: 1.125em; font-weight: 600; line-height: 1.22222; } .SumoSelect > .CaptionCont .placeholder { font-weight: 400; color: #636569 !important; } .SumoSelect > .optWrapper { position: static; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; background: transparent; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border: none; border-bottom: 1px solid #D9D8D6; padding: 10px 15px; } .SumoSelect > .optWrapper > .options { border-top: 1px solid #D9D8D6; max-height: 305; } .SumoSelect > .optWrapper.multiple > .options li.opt { margin-bottom: 0; padding: 10px 15px; padding-left: 35px; } .SumoSelect.open .search-txt { padding: 10px 15px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; background: transparent; } .SumoSelect.open > .optWrapper { top: 100%; display: none; } .SelectBox { padding: 10px 15px; } .SelectBox label i { background: none !important; display: block !important; } .daterange { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; padding: 0; color: #D51B2F; cursor: pointer; width: auto; font-size: 0.875em; font-weight: 400; line-height: 1.28571; display: inline; padding: 0; margin: 0; text-decoration: none; border-bottom: 1px solid #D51B2F; -webkit-transition: border 0.2s ease-in-out; -o-transition: border 0.2s ease-in-out; -moz-transition: border 0.2s ease-in-out; transition: border 0.2s ease-in-out; } .daterange:hover, .daterange:focus { border-bottom: 1px solid transparent; } .daterange__wrapper { color: #D51B2F; display: inline-block; position: relative; } .daterange__wrapper input[type="text"] { padding-left: 35px; padding-right: 30px; } .daterange__wrapper .fa-calendar { color: #D9D8D6; position: absolute; left: 15px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .daterange__wrapper .fa-caret-down { color: #636569; position: absolute; right: 15px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .daterange:hover, .daterange:focus { border-bottom: 1px solid #D9D8D6 !important; } .repeatable .btn--text { color: #AA1F2E; display: inline; padding: 0; margin: 0; text-decoration: none; border-bottom: 1px solid #AA1F2E; -webkit-transition: border 0.2s ease-in-out; -o-transition: border 0.2s ease-in-out; -moz-transition: border 0.2s ease-in-out; transition: border 0.2s ease-in-out; } .repeatable .btn--text:hover, .repeatable .btn--text:focus { border-bottom: 1px solid transparent; } .repeatable .form__select-wrapper--alt.form__group--has-icon > i:first-child { left: auto; right: 15px; } .repeatable .form__select-wrapper--alt.form__group--has-icon > i:last-child { display: none; } .repeatable .form__select-wrapper--alt.form__group--has-icon .form__input { padding-left: 15px; padding-right: 45px; } .repeatable .form__boolean .form__label { margin-bottom: 0; } .repeatable .form__boolean .form__boolean-on, .repeatable .form__boolean .form__boolean-off { padding: 9px 0; } .repeatable .form__boolean .form__boolean-toggle { margin-top: 5px; } .repeatable__item { padding-left: 45px; position: relative; } .repeatable__item--cant-delete { padding-left: 0; } .repeatable__item--cant-delete .repeatable__remove { display: none; } .repeatable__item .button--icon { color: #AA1F2E; position: absolute; left: 0; bottom: 12px; } /* Component containers ----------------------------------*/ .ui-widget.ui-widget-content { border: 1px solid #F4F3F2; } .ui-widget-content { border: 1px solid #F4F3F2; background: #ffffff; color: #636569; } .ui-widget-content a { color: #636569; } .ui-widget-header { border: 1px solid #F4F3F2; background: rgba(213, 27, 47, 0.1); color: #636569; font-weight: bold; } .ui-widget-header a { color: #636569; } .ui-datepicker thead tr th, .ui-datepicker thead tr td, .ui-datepicker tbody tr th, .ui-datepicker tbody tr td { min-width: 0; } .ui-datepicker-prev, .ui-datepicker-next { border-bottom: none; display: inline-block; cursor: pointer; } .ui-datepicker-prev:hover, .ui-datepicker-prev:focus, .ui-datepicker-next:hover, .ui-datepicker-next:focus { border-bottom: none; } .ui-datepicker-prev:hover, .ui-datepicker-prev:focus, .ui-datepicker-prev.ui-state-hover, .ui-datepicker-next:hover, .ui-datepicker-next:focus, .ui-datepicker-next.ui-state-hover { -webkit-transform: none !important; -moz-transform: none !important; -ms-transform: none !important; -o-transform: none !important; transform: none !important; border: none !important; top: 2px !important; } /* Interaction states ----------------------------------*/ .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active { border: 1px solid #F4F3F2; background: rgba(213, 27, 47, 0.1); font-weight: normal; color: #636569; } .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited, a.ui-button, a:link.ui-button, a:visited.ui-button, .ui-button { color: #636569; text-decoration: none; } .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus { border: 1px solid #F4F3F2; background: #F4F3F2; font-weight: normal; color: #636569; } .ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited, .ui-state-focus a, .ui-state-focus a:hover, .ui-state-focus a:link, .ui-state-focus a:visited, a.ui-button:hover, a.ui-button:focus { color: #D9D8D6; text-decoration: none; } .ui-visual-focus { -webkit-box-shadow: 0 0 3px 1px #AA1F2E; -moz-box-shadow: 0 0 3px 1px #AA1F2E; box-shadow: 0 0 3px 1px #AA1F2E; } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover { border: 1px solid #F4F3F2; background: #AA1F2E; font-weight: normal; color: #ffffff; } .ui-icon-background, .ui-state-active .ui-icon-background { border: #F4F3F2; background-color: rgba(213, 27, 47, 0.1); } /* Interaction Cues ----------------------------------*/ .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { border: 1px solid #F4F3F2; background: rgba(213, 27, 47, 0.1); color: #636569; } .ui-state-checked { border: 1px solid #F4F3F2; background: rgba(213, 27, 47, 0.1); } .ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a { color: rgba(213, 27, 47, 0.1); } .front-end .form__label { font-weight: 400; color: #636569; } .active-tags { display: block; width: 100%; font-weight: 700; color: #ffffff; margin-left: -5px; margin-right: -5px; } .active-tags .active-tag { background: #ffffff; padding: 2px 5px; color: #D44424; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin: 5px; display: inline-block; } .active-tags .active-tag .btn, .active-tags .active-tag .button--dropdown { margin: 0; } @media (max-width: 767px) { .form__radios .form__radio { width: 100%; } } /* TABLE COMPONENTS ---------------------------------------------------------------------------*/ .page__content table, .front-end table { width: 100%; margin: auto; border-collapse: separate; border-spacing: 0; } .page__content thead tr th, .page__content thead tr td, .front-end thead tr th, .front-end thead tr td { padding: 20px; border-top: 1px solid #D9D8D6; border-bottom: 1px solid #D9D8D6; text-align: left; font-weight: 600; color: #636569; } .page__content thead tr th i, .page__content thead tr td i, .front-end thead tr th i, .front-end thead tr td i { color: #D44424; } .page__content thead tr th.table__fixed, .page__content thead tr td.table__fixed, .front-end thead tr th.table__fixed, .front-end thead tr td.table__fixed { border-top: 1px solid #D9D8D6; border-bottom: 1px solid #D9D8D6; } .page__content thead tr th.table__fixed--right, .page__content thead tr td.table__fixed--right, .front-end thead tr th.table__fixed--right, .front-end thead tr td.table__fixed--right { position: relative; width: 150px; border-top: 1px solid #D9D8D6; border-bottom: 1px solid #D9D8D6; } .page__content tbody tr:nth-of-type(2n) th, .page__content tbody tr:nth-of-type(2n) td, .front-end tbody tr:nth-of-type(2n) th, .front-end tbody tr:nth-of-type(2n) td { background: #F4F3F2; } .page__content tbody tr th, .page__content tbody tr td, .front-end tbody tr th, .front-end tbody tr td { text-align: left; } .page__content th, .page__content td, .front-end th, .front-end td { padding: 15px 20px; background: #ffffff; white-space: nowrap; vertical-align: middle; min-width: 150px; } .page__content th > a, .page__content td > a, .front-end th > a, .front-end td > a { color: #AA1F2E; display: inline; padding: 0; margin: 0; text-decoration: none; border-bottom: 1px solid #AA1F2E; -webkit-transition: border 0.2s ease-in-out; -o-transition: border 0.2s ease-in-out; -moz-transition: border 0.2s ease-in-out; transition: border 0.2s ease-in-out; } .page__content th > a:hover, .page__content th > a:focus, .page__content td > a:hover, .page__content td > a:focus, .front-end th > a:hover, .front-end th > a:focus, .front-end td > a:hover, .front-end td > a:focus { border-bottom: 1px solid transparent; } .page__content th .dropdown, .page__content td .dropdown, .front-end th .dropdown, .front-end td .dropdown { margin-bottom: 0; } .page__content th .dropdown__toggle, .page__content td .dropdown__toggle, .front-end th .dropdown__toggle, .front-end td .dropdown__toggle { width: 100%; margin: 5px 0; } .page__content th .dropdown__content, .page__content td .dropdown__content, .front-end th .dropdown__content, .front-end td .dropdown__content { right: 0; } .page__content .table__row-select, .front-end .table__row-select { padding-left: 30px; } .page__content .table__row-select .row-select label, .front-end .table__row-select .row-select label { cursor: pointer; } .page__content .table__row-select .row-select label:before, .front-end .table__row-select .row-select label:before { content: ''; display: block; height: 13px; width: 13px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: 1px solid #D9D8D6; background: #ffffff; position: absolute; left: -30px; -webkit-transition: background 0.2s ease-in-out; -o-transition: background 0.2s ease-in-out; -moz-transition: background 0.2s ease-in-out; transition: background 0.2s ease-in-out; } .page__content .table__row-select .row-select label i, .front-end .table__row-select .row-select label i { position: absolute; left: -30px; color: #ffffff; opacity: 0; -webkit-transition: opacity 0.2s ease-in-out; -o-transition: opacity 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; font-size: 0.8em; margin-left: 1px; margin-top: 2px; } .page__content .table__row-select .row-select input, .front-end .table__row-select .row-select input { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } .page__content .table__row-select .row-select input:checked + label:before, .front-end .table__row-select .row-select input:checked + label:before { background: #AA1F2E; } .page__content .table__row-select .row-select input:checked + label i, .front-end .table__row-select .row-select input:checked + label i { opacity: 1; } .page__content .table__scroll, .front-end .table__scroll { position: relative; width: 100%; margin: auto; overflow-x: hidden; /* width */ /* Track */ /* Handle */ /* Handle on hover */ } .page__content .table__scroll ::-webkit-scrollbar, .front-end .table__scroll ::-webkit-scrollbar { width: 5px; } .page__content .table__scroll ::-webkit-scrollbar-track, .front-end .table__scroll ::-webkit-scrollbar-track { background: #F4F3F2; height: 15px; } .page__content .table__scroll ::-webkit-scrollbar-thumb, .front-end .table__scroll ::-webkit-scrollbar-thumb { background: #AA1F2E; -webkit-border-radius: 50px; border-radius: 50px; height: 8px; border: 4px solid #F4F3F2; } .page__content .table__scroll ::-webkit-scrollbar-thumb:hover, .front-end .table__scroll ::-webkit-scrollbar-thumb:hover { background: #D51B2F; } .page__content .table__wrapper, .front-end .table__wrapper { width: 100%; overflow: auto; } .page__content .table__clone, .front-end .table__clone { position: absolute; top: 0; left: 0; pointer-events: none; } .page__content .table__clone th, .page__content .table__clone td, .front-end .table__clone th, .front-end .table__clone td { visibility: hidden; border-color: transparent; } .page__content .table__clone tbody th, .front-end .table__clone tbody th { visibility: visible; } .page__content .table__clone .table__fixed, .front-end .table__clone .table__fixed { visibility: visible; color: #636569; pointer-events: auto; } .page__content .table__clone--right, .front-end .table__clone--right { top: 0; left: 100%; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .page__content .table__clone--right .table__fixed, .front-end .table__clone--right .table__fixed { visibility: hidden; } .page__content .table__clone--right .table__fixed--right, .front-end .table__clone--right .table__fixed--right { visibility: visible; pointer-events: auto; } .page__content .table__clone--right .table__fixed--right .btn, .page__content .table__clone--right .table__fixed--right .button--dropdown, .front-end .table__clone--right .table__fixed--right .btn, .front-end .table__clone--right .table__fixed--right .button--dropdown { margin-right: 5px; } @media (max-width: 767px) { .page__content .table__clone, .front-end .table__clone { display: none; } .page__content .table__clone--right, .front-end .table__clone--right { display: none; } } .front-end thead tr th, .front-end thead tr td { background: #636569; color: #ffffff; font-weight: 700; } .front-end thead tr th i, .front-end thead tr td i { color: #ffffff; } .front-end .table__clone thead .table__fixed { color: #ffffff; } .front-end .table thead tr th, .front-end .table thead tr td { text-align: center; font-weight: 700; border: none; } .front-end .table thead tr th:first-child, .front-end .table thead tr td:first-child { text-align: left; -webkit-border-top-left-radius: 3px; -moz-border-radius-topleft: 3px; border-top-left-radius: 3px; } .front-end .table thead tr th:last-child, .front-end .table thead tr td:last-child { -webkit-border-top-right-radius: 3px; -moz-border-radius-topright: 3px; border-top-right-radius: 3px; } .front-end .table tbody tr td { text-align: center; border-bottom: 1px solid #D9D8D6; position: relative; } .front-end .table tbody tr td:first-child { text-align: left; } .front-end .table tbody tr td:first-child:before { content: ''; width: 20px; background: #ffffff; height: 3px; position: absolute; left: 0; bottom: -1px; } .front-end .table tbody tr td:last-child:after { content: ''; width: 20px; background: #ffffff; height: 3px; position: absolute; right: 0; bottom: -1px; } .front-end .table tbody tr td a { color: #D44424; font-weight: 600; display: inline; padding: 0; margin: 0; text-decoration: none; border-bottom: 1px solid currentColor; -webkit-transition: border 0.2s ease-in-out; -o-transition: border 0.2s ease-in-out; -moz-transition: border 0.2s ease-in-out; transition: border 0.2s ease-in-out; } .front-end .table tbody tr td a:hover, .front-end .table tbody tr td a:focus { border-bottom: 1px solid transparent; } .front-end .table tbody tr:nth-of-type(2n) td { background: #ffffff; } .front-end .table tbody tr:last-child td { border-bottom: none; } body.popup--open { overflow: hidden; bottom: 0; left: 0; position: fixed; right: 0; top: 0; } .popup { display: none; position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: #ffffff; z-index: 1500; width: 750px; max-width: -webkit-calc(100% - 15px * 2); max-width: -moz-calc(100% - 15px * 2); max-width: calc(100% - 15px * 2); height: auto; overflow: auto; max-height: 100%; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .popup__content { position: relative; padding: 30px; } .popup__close { position: absolute; top: 5px; right: 5px; background: transparent; border: none; color: #D44424; cursor: pointer; } .popup__close + * { margin-top: 0; } .popup__overlay { display: none; position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 1000; background: rgba(0, 0, 0, 0.6); } .popup__info { background: #000000; color: #ffffff; position: absolute; left: 50%; top: 0; height: 100%; width: 400px; overflow: auto; display: none; } .popup__info h3 { font-size: 1.125em; font-weight: 700; line-height: 1.55556; margin-bottom: 15px; } .popup__info p { font-size: 0.875em; font-weight: 400; line-height: 1.71429; } .popup__info ul li, .popup__info ol li { font-size: 0.875em; font-weight: 400; line-height: 1.71429; } .popup__info-toggle { padding: 0; background: transparent; color: #636569; } .popup__info-toggle .fas { display: none; } .popup__info-toggle.open .fas { display: block; } .popup__info-toggle.open .far { display: none; } .popup__info-content { padding: 20px; padding-top: 25px; } .popup--small { width: 400px; } .popup--small.popup--info-open { width: 800px; padding-right: 400px; } .popup--small.popup--info-open .popup__info { display: block; } .popup--small h3 { font-weight: 400; } .popup--small .popup__info h3 { font-weight: 700; } .popup--small .btn, .popup--small .button--dropdown { margin-right: 15px; } .popup--small .btn--sm { padding: 10px 15px; } .popup--small .popup__content { padding: 20px; padding-top: 25px; } .popup--branded { background: #D44424; color: #ffffff; width: 430px; } .popup--branded .form__label { color: #ffffff; } .popup--branded fieldset legend { color: #ffffff; } .popup--branded a { color: #ffffff; display: inline; padding: 0; margin: 0; text-decoration: none; border-bottom: 1px solid #ffffff; -webkit-transition: border 0.2s ease-in-out; -o-transition: border 0.2s ease-in-out; -moz-transition: border 0.2s ease-in-out; transition: border 0.2s ease-in-out; } .popup--branded a:hover, .popup--branded a:focus { border-bottom: 1px solid transparent; } .popup .btn--dropdown { border-left: 1px solid #D9D8D6; border-right: 1px solid #D9D8D6; } .popup .btn--dropdown:hover, .popup .btn--dropdown:focus { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border-bottom: 1px solid #D9D8D6; } .popup .btn--dropdown.open { -webkit-border-bottom-left-radius: 0; -moz-border-radius-bottomleft: 0; border-bottom-left-radius: 0; -webkit-border-bottom-right-radius: 0; -moz-border-radius-bottomright: 0; border-bottom-right-radius: 0; } .popup .dropdown__content { border-top: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .alert { padding: 15px; padding-left: 40px; margin-bottom: 15px; position: relative; border-left: 8px solid; font-weight: 600; } .alert--success { border-color: #f3faef #f3faef #f3faef #325e1c; background: #f3faef; color: #325e1c; } .alert--success i { color: #325e1c; } .alert--warning { border-color: #fff2cc #fff2cc #fff2cc #806000; background: #fff2cc; color: #806000; } .alert--warning i { color: #806000; } .alert--danger { border-color: #fcf4f2 #fcf4f2 #fcf4f2 #a51b00; background: #fcf4f2; color: #a51b00; } .alert--danger i { color: #a51b00; } .alert__icon { position: absolute; left: 15px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .alert__close { position: absolute; top: 15px; right: 15px; } .front-end .alert { background: #D44424; color: #ffffff; border: none; padding: 10px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin-bottom: 45px; } .front-end .alert--has-icon { padding-left: 60px; } .front-end .alert__icon { font-size: 1.5em; font-weight: 400; line-height: 1; } .front-end .alert .btn, .front-end .alert .button--dropdown { margin: 5px; } .front-end .alert p { font-size: 0.875em; font-weight: 400; line-height: 1.71429; } .tabs { border: none; } .tabs__list { list-style: none; padding: 0; margin: 0; text-align: center; } .tabs__list:after { clear: both; content: ""; display: table; } .tabs__tab-control { margin: 0 10px; text-align: center; display: inline-block; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; border-bottom: 3px solid transparent; margin-bottom: -2px; } .tabs__tab-control.active { font-weight: 600; font-style: italic; } .tabs__tab-control.active:after { display: none; } .tabs__content { padding: 30px; background: #ffffff; display: none; border: none; } .tabs__content.active { display: block; } h2 + .tabs-alt { margin-top: 45px; } .tabs-alt { border: none; position: relative; } .tabs-alt .add-new { position: absolute; right: 0; top: 0; } .tabs-alt__list { list-style: none; padding: 0; margin: 0; border-bottom: 1px solid #D9D8D6; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; margin-bottom: 30px; } .tabs-alt__list:after { clear: both; content: ""; display: table; } .tabs-alt__tab-control { display: inline-block; margin-bottom: -2px; border-bottom: none; display: block; padding: 15px 20px; border: 1px solid #D9D8D6; margin-bottom: -1px; margin-right: -1px; background: #F4F3F2; font-weight: 600; color: #636569; -webkit-transition: none; -o-transition: none; -moz-transition: none; transition: none; } .tabs-alt__tab-control:hover, .tabs-alt__tab-control:focus { border-bottom: none; } .tabs-alt__tab-control:first-of-type { margin-left: 5px; } .tabs-alt__tab-control:hover, .tabs-alt__tab-control:focus { border-bottom: 1px solid #D9D8D6; color: #636569; } .tabs-alt__tab-control.active { color: #D44424; background: #ffffff; border-bottom: 1px solid #ffffff; } .tabs-alt__tab-control.active:hover, .tabs-alt__tab-control.active:focus { color: #D44424; border-bottom: 1px solid #ffffff; } .tabs-alt__content { display: none; border: none; } .tabs-alt__content.active { display: block; } .tabs-alt .tabs-alt > .grid { margin-bottom: 15px; } .tabs-alt .tabs-alt .tabs-alt__list { border: none; margin: 0; } .tabs-alt .tabs-alt .tabs-alt__tab-control { border: none; background: transparent; padding: 0; font-weight: 400; display: inline; padding: 0; margin: 0; text-decoration: none; border-bottom: 1px solid #636569; -webkit-transition: border 0.2s ease-in-out; -o-transition: border 0.2s ease-in-out; -moz-transition: border 0.2s ease-in-out; transition: border 0.2s ease-in-out; margin-right: 20px; } .tabs-alt .tabs-alt .tabs-alt__tab-control:hover, .tabs-alt .tabs-alt .tabs-alt__tab-control:focus { border-bottom: 1px solid transparent; } .tabs-alt .tabs-alt .tabs-alt__tab-control.active { font-weight: 600; border-bottom: none; } .tabs-alt .tabs-alt .tabs-alt__tab-control.active:hover, .tabs-alt .tabs-alt .tabs-alt__tab-control.active:focus { border-bottom: none; } .front-end .tabs-alt__list { margin-bottom: 0; border-bottom: 1px solid #ffffff; } .front-end .tabs-alt__tab-control { border: 1px solid #F4F3F2; border-bottom: 1px solid #ffffff; -webkit-border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topright: 5px; border-top-right-radius: 5px; background: rgba(255, 255, 255, 0.5); font-weight: 700; margin-right: 0; } .front-end .tabs-alt__tab-control:first-of-type { margin-left: 0; } .front-end .tabs-alt__tab-control.active { background: #ffffff; border: none; } .draggable { cursor: -webkit-grab; cursor: -moz-grab; cursor: grab; } .compare__wrapper .draggable { cursor: -webkit-grab; cursor: -moz-grab; cursor: grab; } .compare__wrapper .draggable__zone { border: 3px dashed #D9D8D6; padding: 30px 45px; text-align: center; margin-bottom: 30px; -webkit-transition: border 0.2s ease-in-out; -o-transition: border 0.2s ease-in-out; -moz-transition: border 0.2s ease-in-out; transition: border 0.2s ease-in-out; } .compare__wrapper .draggable__zone * { pointer-events: none; } .compare__wrapper .draggable__zone--hover { border: 5px dashed rgba(249, 71, 31, 0.6); } .ui-draggable-dragging { cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: grabbing; z-index: 2000; background: #ffffff; -webkit-box-shadow: 2px 2px 10px #D9D8D6; -moz-box-shadow: 2px 2px 10px #D9D8D6; box-shadow: 2px 2px 10px #D9D8D6; padding: 15px !important; opacity: 0.5; } .draggable__items.item__list .item { margin: 0; padding-top: 0; padding-bottom: 15px; } .draggable__items.item__list .item .item__header { margin-bottom: 0; } .draggable__items.item__list .item .item__header + .dropdown__content { border: 1px solid #D9D8D6; border-top: none; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomright: 5px; border-bottom-right-radius: 5px; margin: 0 -15px; padding: 15px 45px; background: #ffffff; margin-top: -2px; } .draggable__items.item__list .item h3 { display: inline-block; margin: 0; font-size: 1em; font-weight: 400; line-height: 1.5; } .draggable__items.item__list .item .btn--icon { margin-top: 0; } .draggable__item h3 { position: relative; } .draggable__item-content { display: none; position: relative; } .draggable__item-content .text--large { padding-right: 60px; } .draggable__item-content p > i { color: #D9D8D6; } .draggable__item-content .btn, .draggable__item-content .button--dropdown { position: absolute; right: 0; top: 30px; } .draggable__icon { display: none; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .draggable__icon + h3 { margin-top: 0; } .draggable__area { padding: 30px; border: 3px dashed #D9D8D6; text-align: center; -webkit-transition: border 0.2s; -o-transition: border 0.2s; -moz-transition: border 0.2s; transition: border 0.2s; } .draggable__area--hovered { border: 3px dashed #D44424; } .draggable__list { margin-bottom: 30px; } .draggable__list .draggable__item-content { display: block; padding: 30px 0; border-bottom: 1px solid #D9D8D6; } .results.draggable__items--draggable .draggable__item h3 { padding-left: 30px; cursor: -webkit-grab; cursor: -moz-grab; cursor: grab; } .results.draggable__items--draggable .draggable__item h3.ui-draggable-dragging { opacity: 1; margin: 0; width: 500px; max-width: 100%; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; padding-left: 15px !important; cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: grabbing; } .results.draggable__items--draggable .draggable__item h3.ui-draggable-dragging i { display: none !important; } .results.draggable__items--draggable .draggable__icon { display: block; } .article__content { padding: 30px; background: #FCF2EB; color: #000000; } .document { padding: 30px; background: #FCF2EB; color: #000000; line-height: 1.5; } .document__controls-wrapper { margin-top: -45px; } .document__controls.fixed { position: fixed; top: 0; left: 0; width: 100%; z-index: 948; } .document__controls.fixed:after { clear: both; content: ""; display: table; } .document__controls.fixed .container { padding: 0 15px; padding-left: 50px; max-width: 100%; } .document__controls.fixed .document__controls-content { padding-left: 15px; padding-right: 15px; } .document__controls .form__label { margin-bottom: 15px; } .document__controls-content { padding: 30px 0; background: #ffffff; } .tagging__controls { position: static !important; } .tagging__controls .tabs__content { padding: 0; } .tagging__controls .tabs__content-container { display: none; background: #ffffff; position: absolute; width: 50%; z-index: 901; padding: 30px; top: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 2px 5px #636569; -moz-box-shadow: 0 2px 5px #636569; box-shadow: 0 2px 5px #636569; } .tagging__controls .tabs__content-container.flush-left { left: 0; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .tagging__controls .tabs__content-container.flush-left:before, .tagging__controls .tabs__content-container.flush-left:after { left: 30px; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .tagging__controls .tabs__content-container.flush-left:after { left: 31px; } .tagging__controls .tabs__content-container.shown { display: block; } .tagging__controls .tabs__content-container .form__label { font-weight: 400; } .tagging__controls .tabs__content-container .form__input { color: #636569; font-weight: 300; } .tagging__controls .tabs__content-container:after { content: ''; width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid #ffffff; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); bottom: 100%; } .tagging__controls .tabs__content-container:before { content: ''; width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 16px solid #F4F3F2; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); bottom: 100%; } .tagging__controls .tabs__list { border: none; background: #000000; padding: 6px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 900; display: none; white-space: nowrap; } .tagging__controls .tabs__list.flush-left { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .tagging__controls .tabs__list.flush-left:after { left: 30px; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .tagging__controls .tabs__list.shown { display: block; } .tagging__controls .tabs__list:after { content: ''; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #000000; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); top: 100%; } .tagging__controls .tabs__list ul { list-style: none; padding: 0; margin: 0; } .tagging__controls .tabs__list ul:after { clear: both; content: ""; display: table; } .tagging__controls .tabs__list ul li { display: inline-block; margin: 0; position: relative; padding: 0 10px; } .tagging__controls .tabs__list ul li:after { content: ''; width: 1px; height: 12px; background: #ffffff; position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .tagging__controls .tabs__list ul li:first-of-type { padding-left: 0; } .tagging__controls .tabs__list ul li:last-of-type { padding-right: 0; } .tagging__controls .tabs__list ul li:last-of-type:after { display: none; } .tagging__controls .tabs__tab-control, .tagging__controls .tabs a { padding: 0; border: none; color: #ffffff; margin: 0; border-bottom: none; display: inline-block; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 2px 0; font-size: 0.875em; font-weight: 400; line-height: 1.42857; } .tagging__controls .tabs__tab-control:hover, .tagging__controls .tabs__tab-control:focus, .tagging__controls .tabs a:hover, .tagging__controls .tabs a:focus { border-bottom: none; } .tagging__controls .tabs__tab-control.active, .tagging__controls .tabs a.active { background: #D51B2F; border: none; padding: 2px 4px; } .tagging__controls .tabs .tabs__content small { font-size: 0.9em; } .tagging__controls .tabs .tabs__content a { color: #AA1F2E; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; display: inline; padding: 0; margin: 0; text-decoration: none; border-bottom: 1px solid #AA1F2E; -webkit-transition: border 0.2s ease-in-out; -o-transition: border 0.2s ease-in-out; -moz-transition: border 0.2s ease-in-out; transition: border 0.2s ease-in-out; } .tagging__controls .tabs .tabs__content a:hover, .tagging__controls .tabs .tabs__content a:focus { border-bottom: 1px solid transparent; } .document > * { position: relative; } .document > * .tagging__controls { position: static; } .tagged__tool { height: 35px; width: 35px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; position: absolute; left: -120px; top: 0; padding: 10px 0; text-align: center; display: none; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 14px; font-weight: 700; line-height: 14px; } .tagged__indicator { width: 7px; height: 100%; position: absolute; left: -13px; background: #F4F3F2; border-left: 2px solid #830E1B; display: none; } .tagged__target { background: transparent; padding: 0; border: none; cursor: pointer; } .tagged__target .tagged__indicator { -webkit-transform: translateY(-17px); -moz-transform: translateY(-17px); -ms-transform: translateY(-17px); -o-transform: translateY(-17px); transform: translateY(-17px); } .tagged__excerpt { border-bottom: none; display: inline; cursor: pointer; } .tagged__excerpt:hover, .tagged__excerpt:focus { border-bottom: none; } .tagged__excerpt--bg { background: rgba(245, 130, 31, 0.2); } .tagged__excerpt:focus { outline: 0; } .tagged__excerpt > p { margin-bottom: 15px; position: relative; } .tagged__excerpt.focused { border: 2px solid #D51B2F; } .paraBullet { max-width: 40px !important; } .results hr.spacer { margin-bottom: 15px; } .results__header { border-bottom: 1px solid #D9D8D6; padding: 20px 0; margin-bottom: 30px; } .results__header .form__group--inline { margin: 5px 0; } .results__header .btn, .results__header .button--dropdown { margin: 5px 0; margin-left: 5px; } .results__footer { margin-top: 30px; padding-top: 20px; border-top: 1px solid #D9D8D6; } .results .result { padding: 30px 0; } .results .result h3, .results .result .h3 { font-weight: 700; } .results .result p > i { color: #D9D8D6; } .results .result .btn--icon { margin-top: 15px; } .results hr { margin: 0; } .results hr:last-child { display: none; } .front-end .result__header { position: relative; padding-right: 130px; } .front-end .result__actions { position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } /* THEME HELPERS ------------------------------------------------------------------------------*/ /* COMPONENT HELPERS ---------------------------------------------------------------------------*/ .img-centered { display: block; margin: 0 auto; } /* STRUCTURE HELPERS ---------------------------------------------------------------------------*/ .container { width: 100%; max-width: 100%; padding: 0 15px; margin: 0 auto; } .container:after { clear: both; content: ""; display: table; } .container .container { padding: 0; } .container--offset-slideout { padding-left: 60px; } .front-end { background: #D9D8D6; } .front-end #page-content { background: #F4F3F2; } .full-width { width: 100%; } .pull-right { float: right; } .hidden { display: none; } .spacer { background: transparent; margin: 15px 0; } /* ACCESSIBILITY HELPERS ---------------------------------------------------------------------------*/ .webaim-hidden, .skip-link { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: 1000; } .skip-link:focus { width: auto; height: auto; overflow: visible; left: auto; position: fixed; left: 15px; top: 15px; background: #ffffff; } /* TYPOGRAPHY HELPERS ---------------------------------------------------------------------------*/ .text-centered { text-align: center; } .text--large { font-size: 1.125em; font-weight: 400; line-height: 1.44444; } .text-left { text-align: left; } .text-right { text-align: right; } .text-right .btn, .text-right .button--dropdown, .text-right .button { text-align: center; } .icon--light { color: #D9D8D6; } .outlined { outline: 3px dashed #D44424; outline-offset: 5px; } .italic { font-style: italic; } .caps { text-transform: uppercase; } .no-break { white-space: nowrap; } .ellipsis { display: block; white-space: nowrap; max-width: 100%; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .no-margin { margin-bottom: 0; } *[data-attach-icon-after] i { margin-left: 5px; } *[data-attach-icon-after] .btn, *[data-attach-icon-after] .button--dropdown { margin-left: 0; } *[data-attach-icon-before] i { margin-right: 5px; } *[data-attach-icon-before] .btn i, *[data-attach-icon-before] .button--dropdown i { margin-right: 0; } @media (min-width: 768px) { .text-right-md { text-align: right; } } ul.columns--3 { -webkit-columns: 3; -moz-columns: 3; columns: 3; list-style: circle; } .form__switch { margin-bottom: 10px; } .form__switch label { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .form__switch:last-of-type { margin-bottom: 0; } .form__switch .form__switch-text { display: inline-block; padding-right: 30px; } .form__switch .form__switch-toggle { display: inline-block; cursor: pointer; padding: 8px 15px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; border: 1px solid #F4F3F2; background: #F4F3F2; font-weight: 600; padding-left: 35px; position: relative; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; min-height: 32px; } .form__switch .form__switch-toggle:after { content: ''; height: 24px; width: 24px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border: 1px solid #F4F3F2; background: white; position: absolute; margin: 0 3px; top: 50%; left: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .form__switch .form__switch-toggle--inline { margin-left: 15px; } .form__switch .form__switch-toggle--no-text { width: 47px; min-height: 28px; padding-left: 30px; } .form__switch .form__switch-toggle--no-text:after { width: 20px; height: 20px; } .form__switch .form__switch-active-text, .form__switch .form__switch-inactive-text { overflow: hidden; display: block; margin: 0; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .form__switch .form__switch-active-text { display: none; } .form__switch input[type="checkbox"]:focus + label .form__switch-toggle { -webkit-box-shadow: 0px 0px 10px #D9D8D6; -moz-box-shadow: 0px 0px 10px #D9D8D6; box-shadow: 0px 0px 10px #D9D8D6; } .form__switch input[type="checkbox"]:checked + label .form__switch-toggle { padding-left: 15px; padding-right: 35px; background: #D51B2F; border: 1px solid #D51B2F; } .form__switch input[type="checkbox"]:checked + label .form__switch-toggle:after { left: 100%; -webkit-transform: translate(-31px, -50%); -moz-transform: translate(-31px, -50%); -ms-transform: translate(-31px, -50%); -o-transform: translate(-31px, -50%); transform: translate(-31px, -50%); border: 1px solid #D51B2F; } .form__switch input[type="checkbox"]:checked + label .form__switch-toggle--no-text { padding-left: 15px; padding-right: 30px; } .form__switch input[type="checkbox"]:checked + label .form__switch-toggle--no-text:after { -webkit-transform: translate(-27px, -50%); -moz-transform: translate(-27px, -50%); -ms-transform: translate(-27px, -50%); -o-transform: translate(-27px, -50%); transform: translate(-27px, -50%); } .form__switch input[type="checkbox"]:checked + label .form__switch-active-text { display: block; color: white; } .form__switch input[type="checkbox"]:checked + label .form__switch-inactive-text { display: none; } .form__switch--inline { display: inline-block; margin-right: 30px; }