/* Copyright (c) 2018 Stad Antwerpen Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The Antwep City brand logo is a registered trademark that can not be used without prior permission from the city administration. The font family 'Antwerpen' can only be used with permission from the city administration. Both can only be used in conformity with the branding guidelines and the visual identity of the city of Antwerp. Contact us via e-mail: branding@stad.antwerpen.be The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -- EULA / End User License Agreement THIS IS A LEGAL AGREEMENT. By downloading and/or installing Antwerpen font family software you agree to the following terms: 1. Installation, locations, portable devices This licence is only for the benefit of the users authorised under this licence. Authorised users are permitted to install and use the font software on one (1) portable device such as a notebook or laptop computer and on one (1) desktop or workstation type device that remains at a single location. For example 5 users are authorised to install and use the font software on their five (5) portable devices and their five (5) desktop or workstation type devices in a single location. These computers can be connected to any number of output devices, such as laser printers, ink jet printers, an image setter or a film recorder. The font software may be downloaded to the memory (hard disk or RAM) of the output devices that are customarily used by you for the purposes of having such font software remain resident in the output devices. If you need to install the Font Software on more than the authorized computers permitted by this licence, or if more users need to use the font software, you are required to upgrade to a multiple user licence. You further agree to treat the software as confidential information and exercise reasonable care to avoid unauthorised distribution of the Font Software. If you cannot or do not agree to the terms of this licence, return the software unused to Studio Type / Jo De Baerdemaeker, Gounodstraat 8/31, 2018 Antwerpen, Belgium. This means that the standard licence allows only a single user to use the fonts. If more users plan to use the fonts, you need to upgrade the licence to cover multiple users. 2. Service Bureau To reproduce a particular document at a commercial printer, or service bureau, you can supply non-editable artwork in a PDF format. If the printer or service bureau needs to install the fonts on their computers they will need to purchase a separate Service Bureau licence. This means that to output your documents you can either send non- editable PDF files, or your printer / service bureau / designer can get a separate licence at a significant discount. 3. Rights reserved The Font Software and the designs embodied therein are the exclusive property of Studio Type / Jo De Baerdemaeker. This non-exclusive, revocable licence grants you certain limited rights to use the font software only, no permanent or ownership rights are granted as a part of this contract herein. All right, title and interest in and to the font software, the designs of the fonts embodied therein together with the copyrights, trademarks, trade names and service marks associated with the font software are each the exclusive property of Studio Type / Jo De Baerdemaeker. This means that by buying the licence you only buy the right to use the fonts. The fonts themselves remain the exclusive property of Studio Type / Jo De Baerdemaeker. 4. Modifications, back-up copies Except as may be otherwise expressly permitted in this contract or by a separate written agreement, you may not modify, adapt, translate, reverse engineer, decompile, disassemble, alter or otherwise copy the Studio Type / Jo De Baerdemaeker font software or the designs embodied therein. If necessary, you are permitted to make only those reasonable number back-up copies suitable to your usage. The Studio Type / Jo De Baerdemaeker font software and its documentation, unless properly transferred, may not be sublicenced, sold, leased, rented, lent, or given away to another person or business. You may not modify the fonts in any way. 5. Returning and exchanging fonts The font software may be returned or exchanged only if defective and will be replaced only when accompanied by a valid sales receipt within four (4) weeks of purchase. This means that if the fonts donʼt work, we replace them. 6. Derivative work Any derivate works created by you which use or are based upon the font software and/or the designs of the fonts, including, but not limited to, software or other electronic works, are considered derivative works under the Law of the Netherlands. Any such derivative works are the exclusive property of Studio Type / Jo De Baerdemaeker and shall be subject to the terms and conditions of this licence. Derivative works may not be sublicensed, sold, leased, rented, loaned, or given away without the express written permission of Studio Type / Jo De Baerdemaeker. Studio Type / Jo De Baerdemaeker shall not be responsible for or required to support unauthorised, modified and/or regenerated software or derivative works. You are permitted to convert the Fonts to outline or bitmap images for the purposes of publishing electronic documents. This means that you canʼt create other fonts based on our fonts. You also cannot sell or rent modified versions of our fonts. 7. Third party use, broadcasting If you are an advertising agency, acting on behalf of an advertising agency or otherwise acting in a similar capacity or for the benefit of a third party. The font software or a copy thereof will be transmitted to the client or third party, the purchase of a licence for or by your client is required. Depending upon how the Font Software will be used, an additional licence upgrade and/or the purchase of a special licence may be required. A special OEM licence is required to use the Font Software on letter form goods for sale, electronic books, game playing devices, gaming or gambling devices irrespective of whether the font software itself is embedded into the device or whether it is merely the designs of the fonts that are displayed. If you are using the Font Software in exhibition or display in cinemas, motion pictures, on television or on cable television, or as a part of any works broadcast or transmitted on the Internet, a special broadcasting licence is required and an additional licence fee may be required. This means that you need a special licence if you plan to embed the fonts in hardware or software, or if you will use the fonts in movies. 8. Embedding The embedding of the Studio Type / Jo De Baerdemaeker fonts software in PDF documents, Flash documents, and other digital documents is allowed only in a secured, read-only mode, provided that the extraction of the Fonts is prohibited. Notwithstanding any other term of this licence, embedding of the font software in other software or devices or in any other form whatsoever requires the purchase of and shall be governed by a separate OEM licence agreement. This licence does not permit the transmitting of the Font Software over the Internet in font serving or for font replacement by means of technologies such as, but not limited to, EOT, Cufon, sIFR or other technologies that now exist or may be developed in the future. If you wish to use the font software for such purposes, a special web font licence and the purchase of a related service (“TWFS”) is required. This means that you can embed fonts into PDF and Flash files for free, but you must set embedding to prevent font extraction. You can buy a special licence if you plan to embed the fonts in hardware or software. For using fonts on websites, we offer a special licence. 9. Copyrights and Trademarks The Studio Type / Jo De Baerdemaeker font software is protected under domestic and international trademark, copyright and industrial design law. You may, but are not required to identify Studio Type / Jo De Baerdemaekere fonts and ownership in any design or production credits. This means that Studio Type / Jo De Baerdemaeker fonts are copyrighted and protected by trademark. 10. Termination of Agreement Any breach of the terms of this Agreement shall be cause for termination. In the event of termination, and without limitation of any remedies under law or equity, you agree to immediately return the Font Software to Studio Type / Jo De Baerdemaeker and certify that no copy remains in your possession or control. This means that if you violate these terms, this agreement will be cancelled. 11. Transferring the licence You may transfer the Font Software to another party provided that the new licensee agrees in writing to be bound by this licence, and you destroy all copies of the Font Software immediately upon transfer of the Font Software. The new licensee must transmit a copy of their Agreement to Studio Type / Jo De Baerdemaeker. This means that you may transfer the font licence to a third party if he agrees to the licensing conditions in writing and you destroy your copies of the fonts (and confirm this in writing too). 12. Warranties Studio Type / Jo De Baerdemaeker MAKES NO WARRANTIES, EXPRESS OR IMPLIED, AS TO MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, OR OTHERWISE. THE FONT SOFTWARE WAS NOT MANUFACTURED FOR USE IN MANUFACTURING CONTROL DEVICES OR NAVIGATION DEVICES OR IN CIRCUMSTANCES THAT COULD RESULT IN ENVIRONMENTAL DAMAGE OR PERSONAL INJURY. WITHOUT LIMITING THE FOREGOING, Studio Type / Jo De Baerdemaeker SHALL IN NO EVENT BE LIABLE TO THE LICENSED USER OR ANY OTHER THIRD PARTY FOR ANY DIRECT, INDIRECT, CONSEQUENTIAL OR INCIDENTAL DAMAGES, INCLUDING DAMAGES FROM LOSS OF BUSINESS PROFITS, BUSINESS INTERRUPTION OR LOSS OF BUSINESS INFORMATION, ARISING OUT OF THE USE OR INABILITY TO USE THE PRODUCT EVEN IF NOTIFIED IN ADVANCE. UNDER NO CIRCUMSTANCES SHALL Studio Type / Jo De Baerdemaeker’S LIABILITY EXCEED THE REPLACEMENT COST OF THE SOFTWARE. Under no circumstances shall Studio Type / Jo De Baerdemaeker’s liability exceed the substitution or replacement cost of the font software, whichever is less, and at the sole discretion of Studio Type / Jo De Baerdemaeker. The terms of this licence Agreement are contractual in nature. The Studio Type / Jo De Baerdemaeker Font Software licence Agreement is subject to Belgian Law. By downloading and installing the Fonts, you acknowledge that you have read, understood, and agreed to be bound by the terms and conditions of this licence Agreement. This means that we canʼt guarantee that the fonts will be appropriate for your projects. 13. Thank You Jo De Baerdemaeker and Stad Antwerpen thank you for reading this far and taking the time to understand this Licence Agreement. Your support makes this foundry possible. */ @import url("https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"); @import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); /** * CORE BRANDING STYLES * ------------------------------------------------------------------- */ /** * QUARKS * ------------------------------------------------------------------- */ /** * MIXINS * ------------------------------------------------------------------- * Collection of custom mixins */ /** * FONT FACE * ------------------------------------------------------------------- */ /** * BUTTON MIXIN * ------------------------------------------------------------------- */ /** * BUTTON OUTLINE MIXIN * ------------------------------------------------------------------- */ /** * INPUT MIXIN * ------------------------------------------------------------------- */ /** * INPUT PLACEHOLDER MIXIN * ------------------------------------------------------------------- * Change base styling for placeholder text on input fields * Note: Styling the placeholder text is not supported on older * browsers, use a html5-placeholder ployfill for that * * Background info: * - http://davidwalsh.name/html5-placeholder * - http://davidwalsh.name/placeholder-overflow * - http://jamesallardice.github.io/Placeholders.js */ /** * ALERT MIXIN * ------------------------------------------------------------------- */ /** * BADGE MIXIN * ------------------------------------------------------------------- */ /** * LABEL MIXIN * ------------------------------------------------------------------- */ /** * TOOLTIP MIXIN * ------------------------------------------------------------------- */ /** * CLEARFIX * ------------------------------------------------------------------- */ /** * FONT AWESOME * ------------------------------------------------------------------- */ /** * MEDIA QUERIES MIXIN * ------------------------------------------------------------------- */ /** * FUNCTIONS * ------------------------------------------------------------------- * Collection of custom functions */ /** * STRIP UNIT FROM VALUE * ------------------------------------------------------------------- */ /** * CONVERT PX TO REM * ------------------------------------------------------------------- */ /** * RAISE NUMBER TO CERTAIN POWER * ------------------------------------------------------------------- */ /** * HANDLING Z-INDEX LAYERS * ------------------------------------------------------------------- */ /** * COLORS * ------------------------------------------------------------------- * Collection of all available branding colors */ /** * COMPLETE COLOR PALETTE * ------------------------------------------------------------------- * Variable names generated by Name That Color * http://chir.ag/projects/name-that-color */ /** * GRAYSCALE COLOR PALETTE * ------------------------------------------------------------------- * Collection of grayscale colors */ /** * SOCIAL BRAND COLOR PALETTE * ------------------------------------------------------------------- * Collection of social branding colors */ /** * GLOBAL VARIABLES * ------------------------------------------------------------------- */ /** * SPECIFIC COLOR PALETTE * ------------------------------------------------------------------- */ /** * SPACERS * ------------------------------------------------------------------- */ /** * BREAKPOINTS * ------------------------------------------------------------------- */ /** * $screen-xl = * max-width of u-container * + width of official logo * 2 * + space between logo and u-container * 2 */ /** * FONT FAMILIES * ------------------------------------------------------------------- */ /** * FONT SIZES * ------------------------------------------------------------------- */ /** * LINE HEIGHTS * ------------------------------------------------------------------- */ /** * FONT WEIGHTS * ------------------------------------------------------------------- */ /** * OTHER TYPOGRAPHY * ------------------------------------------------------------------- */ /** * ANIMATIONS * ------------------------------------------------------------------- */ /** * Z-INDEXES * ------------------------------------------------------------------- * http://www.sitepoint.com/better-solution-managing-z-index-sass/ * * Use like this: * z-index: layer('overlay'); * where overlay is a list item of the default list "$z-indexes" (see below) * * The list is also upgradeable in that nesting is permitted, e.g.: * $z-indexes: ( * 'modal': ( * 'back': 50, * 'front': 60 * ), * 'navigation': 40, * ... * ) */ /** * ICON SIZES * ------------------------------------------------------------------- */ /** * BOX SHADOWS * ------------------------------------------------------------------- */ /** * LINKS * ------------------------------------------------------------------- * Define text and hover color for each hyperlink */ /** * LISTS * ------------------------------------------------------------------- * Define default paddings for lists */ /** * PRE * ------------------------------------------------------------------- * Define text and background color for each code element */ /** * CODE * ------------------------------------------------------------------- * Define text and background color for each code element */ /** * MARK * ------------------------------------------------------------------- * Define text and background color for each mark element */ /** * CITE * ------------------------------------------------------------------- */ /** * FIGCAPTION * ------------------------------------------------------------------- */ /** * TABLES * ------------------------------------------------------------------- * Define background and border color for each table */ /** * BUTTONS * ------------------------------------------------------------------- * Define text, background and border color for each button */ /** * FORMS * ------------------------------------------------------------------- * Define text, background, border and placeholder color for each input */ /** * RADIO BUTTONS & CHECKBOXES * ------------------------------------------------------------------- */ /** * SWITCHES * ------------------------------------------------------------------- * WATCH OUT * $progress-height and $range-slider-height are equal to $switch-height * In this way, changing the height of the switch will also affect the height of the progress bar and range slider */ /** * FIELDSET * ------------------------------------------------------------------- */ /** * TOOLTIP * ------------------------------------------------------------------- */ /** * PROGRESS * ------------------------------------------------------------------- * WATCH OUT * $range-slider-offset is equal to $tooltip-offset * In this way, changing the offset of the progress bar will also affect the offset of the range slider */ /** * RANGE SLIDER * ------------------------------------------------------------------- */ /** * LINK LIST * ------------------------------------------------------------------- */ /** * DATEPICKER * ------------------------------------------------------------------- */ /** * ACCORDION * ------------------------------------------------------------------- */ /** * ALERTS * ------------------------------------------------------------------- */ /** * AVATARS * ------------------------------------------------------------------- */ /** * BADGES * ------------------------------------------------------------------- */ /** * BREADCRUMBS * ------------------------------------------------------------------- */ /** * CARDS * ------------------------------------------------------------------- */ /** * COPYRIGHT * ------------------------------------------------------------------- */ /** * LABELS * ------------------------------------------------------------------- */ /** * TAGS * ------------------------------------------------------------------- */ /** * FLYOUT * ------------------------------------------------------------------- */ /** * FOOTER * ------------------------------------------------------------------- */ /** * HEADER * ------------------------------------------------------------------- */ /** * SPINNER * ------------------------------------------------------------------- */ /** * ICON LIST * ------------------------------------------------------------------- */ /** * OVERLAY * ------------------------------------------------------------------- */ /** * MODAL * ------------------------------------------------------------------- */ /** * NAVIGATION * ------------------------------------------------------------------- */ /** * PAGINATION * ------------------------------------------------------------------- */ /** * STEP INDICATOR * ------------------------------------------------------------------- */ /** * UPLOAD * ------------------------------------------------------------------- */ /** * GALLERY * ------------------------------------------------------------------- */ /** * SLIDESHOW * ------------------------------------------------------------------- */ /** * NAVIGATION MENU * ------------------------------------------------------------------- */ /** * NORMALIZE * ------------------------------------------------------------------- */ /** * BASE * ------------------------------------------------------------------- */ /** * FONTS * ------------------------------------------------------------------- */ /** * ANTWERPEN FONT * ------------------------------------------------------------------- */ @font-face { font-family: "Antwerpen Small"; font-style: normal; font-weight: 500; src: url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/AntwerpenSmallCaps-Regular.eot"); src: local("Antwerpen SmallCaps"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/AntwerpenSmallCaps-Regular.eot?#iefix") format("embedded-opentype"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/AntwerpenSmallCaps-Regular.woff") format("woff"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/AntwerpenSmallCaps-Regular.ttf") format("truetype"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/AntwerpenSmallCaps-Regular.svg#icon") format("svg"); } @font-face { font-family: "Antwerpen Regular"; font-style: normal; font-weight: 500; src: url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/Antwerpen-Regular.eot"); src: local("Antwerpen-Regular"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/Antwerpen-Regular.eot?#iefix") format("embedded-opentype"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/Antwerpen-Regular.woff") format("woff"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/Antwerpen-Regular.ttf") format("truetype"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/Antwerpen-Regular.svg#icon") format("svg"); } @font-face { font-family: "Antwerpen Tall"; font-style: normal; font-weight: 500; src: url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/AntwerpenTall-Tall.eot"); src: local("Antwerpen Tall"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/AntwerpenTall-Tall.eot?#iefix") format("embedded-opentype"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/AntwerpenTall-Tall.woff") format("woff"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/AntwerpenTall-Tall.ttf") format("truetype"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/AntwerpenTall-Tall.svg#icon") format("svg"); } /** * SUN ANTWERPEN FONT * ------------------------------------------------------------------- */ @font-face { font-family: "Sun Antwerpen"; font-style: normal; font-weight: 300; src: url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/SunAntwerpen-Light.eot"); src: local("Sun Antwerpen"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/SunAntwerpen-Light.eot?#iefix") format("embedded-opentype"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/SunAntwerpen-Light.woff") format("woff"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/SunAntwerpen-Light.ttf") format("truetype"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/SunAntwerpen-Light.svg#icon") format("svg"); } @font-face { font-family: "Sun Antwerpen"; font-style: italic; font-weight: 300; src: url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/SunAntwerpen-Light-Italic.eot"); src: local("Sun Antwerpen"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/SunAntwerpen-Light-Italic.eot?#iefix") format("embedded-opentype"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/SunAntwerpen-Light-Italic.woff") format("woff"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/SunAntwerpen-Light-Italic.ttf") format("truetype"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/SunAntwerpen-Light-Italic.svg#icon") format("svg"); } @font-face { font-family: "Sun Antwerpen"; font-style: normal; font-weight: 500; src: url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/SunAntwerpen-Regular.eot"); src: local("Sun Antwerpen"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/SunAntwerpen-Regular.eot?#iefix") format("embedded-opentype"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/SunAntwerpen-Regular.woff") format("woff"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/SunAntwerpen-Regular.ttf") format("truetype"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/SunAntwerpen-Regular.svg#icon") format("svg"); } @font-face { font-family: "Sun Antwerpen"; font-style: italic; font-weight: 500; src: url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/SunAntwerpen-Regular-Italic.eot"); src: local("Sun Antwerpen"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/SunAntwerpen-Regular-Italic.eot?#iefix") format("embedded-opentype"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/SunAntwerpen-Regular-Italic.woff") format("woff"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/SunAntwerpen-Regular-Italic.ttf") format("truetype"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/SunAntwerpen-Regular-Italic.svg#icon") format("svg"); } @font-face { font-family: "Sun Antwerpen"; font-style: normal; font-weight: 700; src: url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/SunAntwerpen-Bold.eot"); src: local("Sun Antwerpen"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/SunAntwerpen-Bold.eot?#iefix") format("embedded-opentype"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/SunAntwerpen-Bold.woff") format("woff"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/SunAntwerpen-Bold.ttf") format("truetype"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/SunAntwerpen-Bold.svg#icon") format("svg"); } @font-face { font-family: "Sun Antwerpen"; font-style: italic; font-weight: 700; src: url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/SunAntwerpen-Bold-Italic.eot"); src: local("Sun Antwerpen"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/SunAntwerpen-Bold-Italic.eot?#iefix") format("embedded-opentype"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/SunAntwerpen-Bold-Italic.woff") format("woff"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/SunAntwerpen-Bold-Italic.ttf") format("truetype"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/SunAntwerpen-Bold-Italic.svg#icon") format("svg"); } @font-face { font-family: "Sun Antwerpen"; font-style: normal; font-weight: 800; src: url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/SunAntwerpen-ExtraBold.eot"); src: local("Sun Antwerpen"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/SunAntwerpen-ExtraBold.eot?#iefix") format("embedded-opentype"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/SunAntwerpen-ExtraBold.woff") format("woff"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/SunAntwerpen-ExtraBold.ttf") format("truetype"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/SunAntwerpen-ExtraBold.svg#icon") format("svg"); } @font-face { font-family: "Sun Antwerpen"; font-style: italic; font-weight: 800; src: url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/SunAntwerpen-ExtraBold-Italic.eot"); src: local("Sun Antwerpen"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/SunAntwerpen-ExtraBold-Italic.eot?#iefix") format("embedded-opentype"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/SunAntwerpen-ExtraBold-Italic.woff") format("woff"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/SunAntwerpen-ExtraBold-Italic.ttf") format("truetype"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/SunAntwerpen-ExtraBold-Italic.svg#icon") format("svg"); } @font-face { font-family: "Antwerpen_Icons"; font-style: normal; font-weight: normal; src: url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/Antwerpen_Icons.eot"); src: url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/Antwerpen_Icons.eot?#iefix") format("embedded-opentype"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/Antwerpen_Icons.woff") format("woff"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/Antwerpen_Icons.ttf") format("truetype"), url("https://cdn.antwerpen.be/core_branding_scss/4.1.1/assets/fonts/Antwerpen_Icons.svg#icon") format("svg"); } .icon-a-card:before, .icon-akaart-outline:before, .icon-akaart-zuilen:before, .icon-antwerp:before, .icon-calendar:before, .icon-career:before, .icon-channels:before, .icon-communication:before, .icon-contact:before, .icon-contactbook:before, .icon-culture:before, .icon-digital-work:before, .icon-districts:before, .icon-diversity:before, .icon-education:before, .icon-ewindow-small:before, .icon-ewindow:before, .icon-finance:before, .icon-folder:before, .icon-helpcenter:before, .icon-ict:before, .icon-jobs:before, .icon-leisure:before, .icon-link:before, .icon-map-small:before, .icon-map:before, .icon-media:before, .icon-mobility:before, .icon-my-time:before, .icon-news-small:before, .icon-news:before, .icon-ocmw-intranet:before, .icon-ocmw-medewerkers:before, .icon-personal-news:before, .icon-play:before, .icon-report:before, .icon-reside:before, .icon-sanitation:before, .icon-search-standard:before, .icon-so-intranet:before, .icon-social-affairs:before, .icon-sports:before, .icon-staff:before, .icon-time:before, .icon-traffic:before, .icon-uit-vlieg:before, .icon-uit:before, .icon-webmail:before, .icon-welfare:before, .icon-wiki:before, .icon-yammer:before { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: 'Antwerpen_Icons'; font-style: normal; font-variant: normal; font-weight: normal; line-height: inherit; speak: none; text-transform: none; vertical-align: middle; } .icon-a-card:before { content: '\EA01'; } .icon-akaart-outline:before { content: '\EA02'; } .icon-akaart-zuilen:before { content: '\EA03'; } .icon-antwerp:before { content: '\EA04'; } .icon-calendar:before { content: '\EA05'; } .icon-career:before { content: '\EA06'; } .icon-channels:before { content: '\EA07'; } .icon-communication:before { content: '\EA08'; } .icon-contact:before { content: '\EA09'; } .icon-contactbook:before { content: '\EA0A'; } .icon-culture:before { content: '\EA0B'; } .icon-digital-work:before { content: '\EA0C'; } .icon-districts:before { content: '\EA0D'; } .icon-diversity:before { content: '\EA0E'; } .icon-education:before { content: '\EA0F'; } .icon-ewindow-small:before { content: '\EA10'; } .icon-ewindow:before { content: '\EA11'; } .icon-finance:before { content: '\EA12'; } .icon-folder:before { content: '\EA13'; } .icon-helpcenter:before { content: '\EA14'; } .icon-ict:before { content: '\EA15'; } .icon-jobs:before { content: '\EA16'; } .icon-leisure:before { content: '\EA17'; } .icon-link:before { content: '\EA18'; } .icon-map-small:before { content: '\EA19'; } .icon-map:before { content: '\EA1A'; } .icon-media:before { content: '\EA1B'; } .icon-mobility:before { content: '\EA1C'; } .icon-my-time:before { content: '\EA1D'; } .icon-news-small:before { content: '\EA1E'; } .icon-news:before { content: '\EA1F'; } .icon-ocmw-intranet:before { content: '\EA20'; } .icon-ocmw-medewerkers:before { content: '\EA21'; } .icon-personal-news:before { content: '\EA22'; } .icon-play:before { content: '\EA23'; } .icon-report:before { content: '\EA24'; } .icon-reside:before { content: '\EA25'; } .icon-sanitation:before { content: '\EA26'; } .icon-search-standard:before { content: '\EA27'; } .icon-so-intranet:before { content: '\EA28'; } .icon-social-affairs:before { content: '\EA29'; } .icon-sports:before { content: '\EA2A'; } .icon-staff:before { content: '\EA2B'; } .icon-time:before { content: '\EA2C'; } .icon-traffic:before { content: '\EA2D'; } .icon-uit-vlieg:before { content: '\EA2E'; } .icon-uit:before { content: '\EA2F'; } .icon-webmail:before { content: '\EA30'; } .icon-welfare:before { content: '\EA31'; } .icon-wiki:before { content: '\EA32'; } .icon-yammer:before { content: '\EA33'; } /** * LAYOUT * ------------------------------------------------------------------- */ /** * HTML styling * ------------------------------------------------------------------- */ html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; } *, *:before, *:after { box-sizing: inherit; } /** * Remove inner padding and * border in Firefox 4+ */ ::-moz-focus-inner { border: none; padding: 0; } /** * Hide OS controls for Windows * http://msdn.microsoft.com/en-us/library/windows/apps/hh465742.aspx */ ::-ms-expand { display: none; } /** * Hide clear button in input fields for Windows * https://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx */ ::-ms-clear { display: none; height: 0; width: 0; } /** * MEDIA * ------------------------------------------------------------------- */ /** * BASE STYLING * ------------------------------------------------------------------- */ img { vertical-align: middle; } figure { margin: 0; } figcaption { font-size: 1rem; line-height: 1.3; padding: 0.75rem; } /** * TYPOGRAPHY * ------------------------------------------------------------------- */ /** * BASE * ------------------------------------------------------------------- */ body { color: #081f2c; font-family: "Sun Antwerpen"; font-size: 1rem; line-height: 1; } ::-moz-selection { background-color: #cce0f0; } ::selection { background-color: #cce0f0; } /** * HEADERS * ------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: "Antwerpen Regular"; line-height: 1.1; margin: 0; } h1.has-base-font, h2.has-base-font, h3.has-base-font, h4.has-base-font, h5.has-base-font, h6.has-base-font, .h1.has-base-font, .h2.has-base-font, .h3.has-base-font, .h4.has-base-font, .h5.has-base-font, .h6.has-base-font { font-family: "Sun Antwerpen"; } h1, .h1 { font-size: 2.98598rem; font-weight: 500; } h2, .h2 { font-size: 2.48832rem; font-weight: 500; } h3, .h3 { font-size: 2.0736rem; font-weight: 500; } h4, .h4 { font-size: 1.728rem; font-weight: 500; } h5, .h5 { font-size: 1.44rem; font-weight: 500; } h6, .h6 { font-size: 1.2rem; font-weight: 500; } /** * PARAGRAPHS * ------------------------------------------------------------------- */ p { font-size: 1rem; line-height: 1.3; margin: 0; } /** * BLOCKQUOTES * ------------------------------------------------------------------- */ blockquote { border-left: 1px solid #949494; margin: 0; padding: 0.75rem 0 0.75rem 1.5rem; } blockquote p { display: inline; font-family: "Antwerpen Regular"; } blockquote cite { color: #cf0039; display: inline-block; font-style: normal; line-height: 1.1; } blockquote cite:before { content: '— '; } /** * SMALL * ------------------------------------------------------------------- */ small, .small { color: #6f6f6f; font-size: 0.875rem; } /** * MARK * ------------------------------------------------------------------- */ mark { background-color: #0064b4; color: white; padding: 0 .125rem; } /** * HORIZONTAL RULES * ------------------------------------------------------------------- */ hr { border: none; border-top: 1px solid #949494; height: 1px; margin: 1.5rem 0; } /** * LINKS * ------------------------------------------------------------------- */ a { color: #0064b4; transition: color 250ms ease-in-out; } a:hover, a:active, a:focus { color: #005599; text-decoration: none; } a:focus { box-shadow: 0 0 0 3px #c0dffe; outline: none; } /** * UTILITIES * ------------------------------------------------------------------- */ /** * BACKGROUND COLOR CLASSES * ------------------------------------------------------------------- */ .u-bg { background-color: #d8d8d8; } .u-bg-light { background-color: #f3f3f3; } .u-bg-primary { background-color: #0064b4; } .u-bg-secondary { background-color: #cf0039; } .u-bg-success { background-color: #2b840d; } .u-bg-warning { background-color: #f9b01e; } .u-bg-danger { background-color: #da291c; } .u-bg-white { background-color: white; } .u-bg-black { background-color: black; } /** * LAYOUT HELPERS * ------------------------------------------------------------------- */ /** * LAYOUT CONTAINERS * ------------------------------------------------------------------- */ .u-container { margin: 0 auto; max-width: 75rem; padding: 0 1.5rem; width: 100%; } /** * VIEWPORT HELPERS * ------------------------------------------------------------------- */ .u-viewport-vertical { height: 100vh; overflow: hidden; position: relative; } /** * SCROLL HELPERS * ------------------------------------------------------------------- */ .u-horizontal-scroll { overflow-x: auto; overflow-y: hidden; } .u-vertical-scroll { overflow-x: hidden; overflow-y: auto; } .u-no-scroll { overflow: hidden; } /** * HORIZONTAL & VERTICAL CONTAINERS * ------------------------------------------------------------------- */ .u-container-horizontal, .u-container-vertical { display: flex; height: 100%; } .u-container-vertical { flex-direction: column; } .u-container--filled { flex: 1; overflow: hidden; position: relative; } /** * LAYOUT SCROLLING * ------------------------------------------------------------------- */ /** * LAYOUT CLEARANCE * ------------------------------------------------------------------- */ .u-clearfix:after { clear: both; content: ''; display: block; } /** * ACCESSIBILITY CLASSES * ------------------------------------------------------------------- */ .u-screen-reader-only { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; width: 1px; } /** * SPACING HELPERS * ------------------------------------------------------------------- * Helper classes for adding or removing space between elements */ /** * MARGIN * ------------------------------------------------------------------- */ .u-margin-xx { margin: 6rem !important; } .u-margin-lg { margin: 3rem !important; } .u-margin { margin: 1.5rem !important; } .u-margin-xs { margin: 0.75rem !important; } .u-no-margin { margin: 0 !important; } /** * MARGIN TOP * ------------------------------------------------------------------- */ .u-margin-top-xx { margin-top: 6rem !important; } .u-margin-top-lg { margin-top: 3rem !important; } .u-margin-top { margin-top: 1.5rem !important; } .u-margin-top-xs { margin-top: 0.75rem !important; } .u-no-margin-top { margin-top: 0 !important; } /** * MARGIN RIGHT * ------------------------------------------------------------------- */ .u-margin-right-xx { margin-right: 6rem !important; } .u-margin-right-lg { margin-right: 3rem !important; } .u-margin-right { margin-right: 1.5rem !important; } .u-margin-right-xs { margin-right: 0.75rem !important; } .u-no-margin-right { margin-right: 0 !important; } /** * MARGIN BOTTOM * ------------------------------------------------------------------- */ .u-margin-bottom-xx { margin-bottom: 6rem !important; } .u-margin-bottom-lg { margin-bottom: 3rem !important; } .u-margin-bottom { margin-bottom: 1.5rem !important; } .u-margin-bottom-xs { margin-bottom: 0.75rem !important; } .u-no-margin-bottom { margin-bottom: 0 !important; } /** * MARGIN LEFT * ------------------------------------------------------------------- */ .u-margin-left-xx { margin-left: 6rem !important; } .u-margin-left-lg { margin-left: 3rem !important; } .u-margin-left { margin-left: 1.5rem !important; } .u-margin-left-xs { margin-left: 0.75rem !important; } .u-no-margin-left { margin-left: 0 !important; } /** * TEXT HELPERS * ------------------------------------------------------------------- */ /** * TEXT STYLE CLASSES * ------------------------------------------------------------------- */ .u-text-bold { font-weight: 700; } .u-text-italic { font-style: italic; } .u-text-underline { text-decoration: underline; } /** * TEXT ALIGNMENT CLASSES * ------------------------------------------------------------------- */ .u-text-left { text-align: left; } .u-text-center { text-align: center; } .u-text-right { text-align: right; } .u-text-justify { text-align: justify; } /** * TEXT TRANSFORMATION CLASSES * ------------------------------------------------------------------- */ .u-text-lowercase { text-transform: lowercase; } .u-text-uppercase { text-transform: uppercase; } .u-text-capitalize { text-transform: capitalize; } /** * TEXT COLOR CLASSES * ------------------------------------------------------------------- */ .u-text-primary { color: #0064b4; } .u-text-secondary { color: #cf0039; } .u-text-success { color: #2b840d; } .u-text-warning { color: #f9b01e; } .u-text-danger { color: #da291c; } .u-text-light { color: #6f6f6f; } .u-text-xlight { color: white; } /** * TEXT OVERFLOW CLASSES * ------------------------------------------------------------------- */ .u-text-truncate, .m-tag__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /** * TEXT ACCESSIBILITY CLASSES * ------------------------------------------------------------------- */ .u-text-readable { max-width: 45rem; } /** * ATOMS * ------------------------------------------------------------------- */ /** * ADDON * ------------------------------------------------------------------- */ .a-input.has-addon .a-input__wrapper { display: flex; } .a-input__addon { line-height: 3rem; padding: 0 0.75rem; text-align: center; white-space: nowrap; } /** * ADDONS FOR OTHER INPUT SIZES * ------------------------------------------------------------------- */ .a-input--small .a-input__addon { line-height: 2.25rem; } .a-input--large .a-input__addon { line-height: 3.75rem; } /** * AVATARS * ------------------------------------------------------------------- */ .a-avatar { background-color: #6f6f6f; color: white; display: inline-block; font-size: 1.5rem; height: 3rem; line-height: 3rem; overflow: hidden; position: relative; text-align: center; width: 3rem; } .a-avatar img { display: block; max-width: 100%; } a .a-avatar:before { background-color: black; content: ''; height: 100%; left: 0; opacity: 0; pointer-events: none; position: absolute; top: 0; transition: opacity 250ms ease-in-out; width: 100%; } a .a-avatar:hover, a .a-avatar:active { color: white; } a .a-avatar:hover:before, a .a-avatar:active:before { opacity: .15; } /** * AVATAR SIZES * ------------------------------------------------------------------- */ .a-avatar--small { font-size: 1.125rem; height: 2.25rem; line-height: 2.25rem; width: 2.25rem; } .a-avatar--medium { font-size: 2.25rem; height: 4.5rem; line-height: 4.5rem; width: 4.5rem; } .a-avatar--large { font-size: 3rem; height: 6rem; line-height: 6rem; width: 6rem; } /** * BADGES * ------------------------------------------------------------------- */ .a-badge { display: inline-block; font-size: 14px; font-weight: 700; line-height: 1.125rem; min-height: 1.125rem; padding: 0 0.375rem; } /** * BADGES COLORS * ------------------------------------------------------------------- */ .a-badge { background-color: #f4f4f4; box-shadow: 0 0 0 1px #949494 inset; color: #081f2c; } .a-badge.a-badge--primary { background-color: #e6f0f8; box-shadow: 0 0 0 1px #0064b4 inset; color: #081f2c; } .a-badge.a-badge--secondary { background-color: #fae6eb; box-shadow: 0 0 0 1px #cf0039 inset; color: #081f2c; } .a-badge.a-badge--success { background-color: #eaf3e7; box-shadow: 0 0 0 1px #2b840d inset; color: #081f2c; } .a-badge.a-badge--warning { background-color: #fef7e9; box-shadow: 0 0 0 1px #f9b01e inset; color: #081f2c; } .a-badge.a-badge--danger { background-color: #fbeae8; box-shadow: 0 0 0 1px #da291c inset; color: #081f2c; } /** * BADGES DISABLED COLORS * ------------------------------------------------------------------- */ .is-disabled .a-badge, .is-disabled .a-badge.a-badge--primary, .is-disabled .a-badge.a-badge--secondary, .is-disabled .a-badge.a-badge--success, .is-disabled .a-badge.a-badge--warning, .is-disabled .a-badge.a-badge--danger { background-color: #fbfbfb; box-shadow: 0 0 0 1px #d8d8d8 inset; color: #6f6f6f; } /** * BUTTONS * ------------------------------------------------------------------- * Buttons are normalized in _base.normalize.scss */ /** * BUTTON PLACEHOLDER * ------------------------------------------------------------------- */ .a-button, .a-button-negative, .a-button-outline, .a-button-transparent, .a-button-official { border: none; border-radius: 0; cursor: pointer; display: block; font-size: 1rem; font-weight: 700; line-height: 1.25; margin: 0; min-height: 3rem; padding: 0.875rem 1.5rem; text-align: center; text-decoration: none; transition-duration: 250ms; transition-property: color, background; transition-timing-function: ease-in-out; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 100%; } .a-button .fa, .a-button-negative .fa, .a-button-outline .fa, .a-button-transparent .fa, .a-button-official .fa { font-size: 1.375rem; line-height: 0; } /** * BUTTON COLORS * ------------------------------------------------------------------- */ .a-button { background-color: #0064b4; color: white; } .a-button:hover, .a-button:active, .a-button:focus { color: white; text-decoration: none; background-color: #005aa2; } .a-button:focus { box-shadow: 0 0 0 3px #bfd8ec; } .a-button[disabled] { background-color: #f3f3f3; color: #6f6f6f; cursor: not-allowed; } .a-button.a-button--secondary { background-color: #cf0039; color: white; } .a-button.a-button--secondary:hover, .a-button.a-button--secondary:active, .a-button.a-button--secondary:focus { color: white; text-decoration: none; background-color: #ba0033; } .a-button.a-button--secondary:focus { box-shadow: 0 0 0 3px #f3bfce; } .a-button.a-button--secondary[disabled] { background-color: #f3f3f3; color: #6f6f6f; cursor: not-allowed; } .a-button.a-button--success { background-color: #2b840d; color: white; } .a-button.a-button--success:hover, .a-button.a-button--success:active, .a-button.a-button--success:focus { color: white; text-decoration: none; background-color: #27770c; } .a-button.a-button--success:focus { box-shadow: 0 0 0 3px #cae0c3; } .a-button.a-button--success[disabled] { background-color: #f3f3f3; color: #6f6f6f; cursor: not-allowed; } .a-button.a-button--warning { background-color: #f9b01e; color: #081f2c; } .a-button.a-button--warning:hover, .a-button.a-button--warning:active, .a-button.a-button--warning:focus { color: #081f2c; text-decoration: none; background-color: #e09e1b; } .a-button.a-button--warning:focus { box-shadow: 0 0 0 3px #feebc7; } .a-button.a-button--warning[disabled] { background-color: #f3f3f3; color: #6f6f6f; cursor: not-allowed; } .a-button.a-button--danger { background-color: #da291c; color: white; } .a-button.a-button--danger:hover, .a-button.a-button--danger:active, .a-button.a-button--danger:focus { color: white; text-decoration: none; background-color: #c42519; } .a-button.a-button--danger:focus { box-shadow: 0 0 0 3px #f6cac6; } .a-button.a-button--danger[disabled] { background-color: #f3f3f3; color: #6f6f6f; cursor: not-allowed; } .a-button.a-button--transparent { background-color: transparent; color: #0064b4; text-decoration: underline; } .a-button.a-button--transparent:hover, .a-button.a-button--transparent:active, .a-button.a-button--transparent:focus { color: #0064b4; text-decoration: none; background-color: transparent; } .a-button.a-button--transparent:focus { box-shadow: 0 0 0 3px #0064b4; } .a-button.a-button--transparent[disabled] { background-color: #f3f3f3; color: #6f6f6f; cursor: not-allowed; } .a-button.has-icon.a-button--default { background-color: #6f6f6f; color: white; } .a-button.has-icon.a-button--default:hover, .a-button.has-icon.a-button--default:active, .a-button.has-icon.a-button--default:focus { color: white; text-decoration: none; background-color: #646464; } .a-button.has-icon.a-button--default:focus { box-shadow: 0 0 0 3px #dbdbdb; } .a-button.has-icon.a-button--default[disabled] { background-color: #f3f3f3; color: #6f6f6f; cursor: not-allowed; } /** * SOCIAL BUTTON COLORS * ------------------------------------------------------------------- */ .a-button.has-icon.a-button--twitter { background-color: #00aced; color: white; } .a-button.has-icon.a-button--twitter:hover, .a-button.has-icon.a-button--twitter:active, .a-button.has-icon.a-button--twitter:focus { color: white; text-decoration: none; background-color: #009bd5; } .a-button.has-icon.a-button--twitter:focus { box-shadow: 0 0 0 3px #bfeafb; } .a-button.has-icon.a-button--twitter[disabled] { background-color: #f3f3f3; color: #6f6f6f; cursor: not-allowed; } .a-button.has-icon.a-button--linkedin { background-color: #0077b5; color: white; } .a-button.has-icon.a-button--linkedin:hover, .a-button.has-icon.a-button--linkedin:active, .a-button.has-icon.a-button--linkedin:focus { color: white; text-decoration: none; background-color: #006ba3; } .a-button.has-icon.a-button--linkedin:focus { box-shadow: 0 0 0 3px #bfdded; } .a-button.has-icon.a-button--linkedin[disabled] { background-color: #f3f3f3; color: #6f6f6f; cursor: not-allowed; } .a-button.has-icon.a-button--facebook { background-color: #1877f2; color: white; } .a-button.has-icon.a-button--facebook:hover, .a-button.has-icon.a-button--facebook:active, .a-button.has-icon.a-button--facebook:focus { color: white; text-decoration: none; background-color: #166bda; } .a-button.has-icon.a-button--facebook:focus { box-shadow: 0 0 0 3px #c5ddfc; } .a-button.has-icon.a-button--facebook[disabled] { background-color: #f3f3f3; color: #6f6f6f; cursor: not-allowed; } .a-button.has-icon.a-button--google { background-color: #dc4e41; color: white; } .a-button.has-icon.a-button--google:hover, .a-button.has-icon.a-button--google:active, .a-button.has-icon.a-button--google:focus { color: white; text-decoration: none; background-color: #c6463b; } .a-button.has-icon.a-button--google:focus { box-shadow: 0 0 0 3px #f6d3d0; } .a-button.has-icon.a-button--google[disabled] { background-color: #f3f3f3; color: #6f6f6f; cursor: not-allowed; } .a-button.has-icon.a-button--snapchat { background-color: #fffc00; color: #081f2c; } .a-button.has-icon.a-button--snapchat:hover, .a-button.has-icon.a-button--snapchat:active, .a-button.has-icon.a-button--snapchat:focus { color: #081f2c; text-decoration: none; background-color: #e6e300; } .a-button.has-icon.a-button--snapchat:focus { box-shadow: 0 0 0 3px #fffebf; } .a-button.has-icon.a-button--snapchat[disabled] { background-color: #f3f3f3; color: #6f6f6f; cursor: not-allowed; } .a-button.has-icon.a-button--instagram { background-color: #0064b4; color: white; background: radial-gradient(circle farthest-corner at 32% 106%, #ffe17d 0%, #ffcd69 10%, #fa9137 28%, #eb4141 42%, transparent 82%), linear-gradient(135deg, #234bd7 12%, #c33cbe 58%); position: relative; transition-property: opacity; } .a-button.has-icon.a-button--instagram:hover, .a-button.has-icon.a-button--instagram:active, .a-button.has-icon.a-button--instagram:focus { color: white; text-decoration: none; background-color: #005aa2; } .a-button.has-icon.a-button--instagram:focus { box-shadow: 0 0 0 3px #bfd8ec; } .a-button.has-icon.a-button--instagram[disabled] { background-color: #f3f3f3; color: #6f6f6f; cursor: not-allowed; } .a-button.has-icon.a-button--instagram:before { background-color: black; content: ''; height: 100%; left: 0; opacity: 0; pointer-events: none; position: absolute; top: 0; transition: opacity 250ms ease-in-out; width: 100%; } .a-button.has-icon.a-button--instagram:hover:before, .a-button.has-icon.a-button--instagram:active:before { opacity: .15; } /** * OFFICIAL ANTWERP BUTTON * ------------------------------------------------------------------- */ .a-button-official { background-color: #cf0039; color: white; padding-left: 4.5rem; position: relative; white-space: nowrap; } .a-button-official:hover, .a-button-official:active, .a-button-official:focus { color: white; text-decoration: none; background-color: #ba0033; } .a-button-official:focus { box-shadow: 0 0 0 3px #f3bfce; } .a-button-official[disabled] { background-color: #f3f3f3; color: #6f6f6f; cursor: not-allowed; } .a-button-official:before { background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGFhZ18xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDE5Ni4xIDExNS4zIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxOTYuMSAxMTUuMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGc+PHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTEyOCwxMTUuM2wtOS4xLTI1LjdINzYuN2wtOS4xLDI1LjdINDNMODcuMSwwaDIyLjRsNDMuOCwxMTUuM0gxMjh6IE0xMDMuNiw0Ni44Yy0yLjMtNi44LTQuNi0xMy43LTUuOC0xOGMtMS4yLDQuMy0zLjUsMTEuMi01LjgsMThsLTcuNCwyMC45SDExMUwxMDMuNiw0Ni44eiIvPjwvZz48cGF0aCBmaWxsPSIjRjE4QTAwIiBkPSJNMzguMiw2MC44Yy0wLjUsMS42LTIuMywyLjUtMy45LDEuOUwyLjEsNTJjLTEuNi0wLjUtMi41LTIuMy0xLjktMy45bDIuNy04YzAuNS0xLjYsMi4zLTIuNSwzLjktMS45TDM4LjksNDljMS42LDAuNSwyLjUsMi4zLDEuOSwzLjlMMzguMiw2MC44eiIvPjxwYXRoIGZpbGw9IiNGMThBMDAiIGQ9Ik0zNi40LDg2LjFjMC41LDEuNi0wLjMsMy40LTEuOSwzLjlsLTIyLjksOC4xYy0xLjYsMC41LTMuNC0wLjMtMy45LTEuOWwtMi43LThjLTAuNS0xLjYsMC4zLTMuNCwxLjktMy45bDIyLjktOC4xYzEuNi0wLjUsMy40LDAuMywzLjksMS45TDM2LjQsODYuMXoiLz48cGF0aCBmaWxsPSIjRjE4QTAwIiBkPSJNMzAuMSwxMi42Yy0xLjMsMS0xLjYsMy0wLjYsNC4zbDE0LjUsMTkuNWMxLDEuMywzLDEuNiw0LjMsMC42bDYuNi01LjFjMS4zLTEsMS42LTMsMC42LTQuM0w0MS4xLDhjLTEtMS4zLTMtMS42LTQuMy0wLjZMMzAuMSwxMi42eiIvPjxwYXRoIGZpbGw9IiNGMThBMDAiIGQ9Ik0xNTcuOSw2MC44YzAuNSwxLjYsMi4zLDIuNSwzLjksMS45TDE5NCw1MmMxLjYtMC41LDIuNS0yLjMsMS45LTMuOWwtMi43LThjLTAuNS0xLjYtMi4zLTIuNS0zLjktMS45TDE1Ny4yLDQ5Yy0xLjYsMC41LTIuNSwyLjMtMS45LDMuOUwxNTcuOSw2MC44eiIvPjxwYXRoIGZpbGw9IiNGMThBMDAiIGQ9Ik0xNTkuNiw4Ni4xYy0wLjUsMS42LDAuMywzLjQsMS45LDMuOWwyMi45LDguMWMxLjYsMC41LDMuNC0wLjMsMy45LTEuOWwyLjctOGMwLjUtMS42LTAuMy0zLjQtMS45LTMuOWwtMjIuOS04LjFjLTEuNi0wLjUtMy40LDAuMy0zLjksMS45TDE1OS42LDg2LjF6Ii8+PHBhdGggZmlsbD0iI0YxOEEwMCIgZD0iTTE2NS45LDEyLjZjMS4zLDEsMS42LDMsMC42LDQuM0wxNTIsMzYuNGMtMSwxLjMtMywxLjYtNC4zLDAuNmwtNi42LTUuMWMtMS40LTEtMS42LTMtMC42LTQuM0wxNTUsOGMxLTEuMywzLTEuNiw0LjMtMC42TDE2NS45LDEyLjZ6Ii8+PC9zdmc+"); background-repeat: no-repeat; content: ''; display: block; height: 1.3125rem; left: 1.125rem; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 2.25rem; } /** * BUTTON NEGATIVE COLORS * ------------------------------------------------------------------- */ .a-button-negative { background-color: white; color: #0064b4; } .a-button-negative:hover, .a-button-negative:active, .a-button-negative:focus { color: #0064b4; text-decoration: none; background-color: #ebf3f9; } .a-button-negative:focus { box-shadow: 0 0 0 3px #0064b4; } .a-button-negative[disabled] { background-color: #f3f3f3; color: #6f6f6f; cursor: not-allowed; } .a-button-negative.a-button--secondary { background-color: white; color: #cf0039; } .a-button-negative.a-button--secondary:hover, .a-button-negative.a-button--secondary:active, .a-button-negative.a-button--secondary:focus { color: #cf0039; text-decoration: none; background-color: #fbebef; } .a-button-negative.a-button--secondary:focus { box-shadow: 0 0 0 3px #cf0039; } .a-button-negative.a-button--secondary[disabled] { background-color: #f3f3f3; color: #6f6f6f; cursor: not-allowed; } /** * BUTTON OUTLINE COLORS * ------------------------------------------------------------------- */ .a-button-outline { background-color: rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 1px #0064b4 inset; color: #0064b4; } .a-button-outline:hover, .a-button-outline:active, .a-button-outline:focus { text-decoration: none; background: #f5f9fc; box-shadow: 0 0 0 1px #005599 inset; } .a-button-outline:focus { box-shadow: 0 0 0 1px #005aa2 inset, 0 0 0 3px #bfd8ec; } .a-button-outline[disabled] { background: #f3f3f3; box-shadow: 0 0 0 1px #d8d8d8 inset; color: #6f6f6f; cursor: not-allowed; } .a-button-outline.a-button--secondary { background-color: rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 1px #cf0039 inset; color: #cf0039; } .a-button-outline.a-button--secondary:hover, .a-button-outline.a-button--secondary:active, .a-button-outline.a-button--secondary:focus { text-decoration: none; background: #fdf5f7; box-shadow: 0 0 0 1px #b00030 inset; } .a-button-outline.a-button--secondary:focus { box-shadow: 0 0 0 1px #ba0033 inset, 0 0 0 3px #f3bfce; } .a-button-outline.a-button--secondary[disabled] { background: #f3f3f3; box-shadow: 0 0 0 1px #d8d8d8 inset; color: #6f6f6f; cursor: not-allowed; } .a-button-outline.a-button--success { background-color: rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 1px #2b840d inset; color: #2b840d; } .a-button-outline.a-button--success:hover, .a-button-outline.a-button--success:active, .a-button-outline.a-button--success:focus { text-decoration: none; background: #f7faf5; box-shadow: 0 0 0 1px #25700b inset; } .a-button-outline.a-button--success:focus { box-shadow: 0 0 0 1px #27770c inset, 0 0 0 3px #cae0c3; } .a-button-outline.a-button--success[disabled] { background: #f3f3f3; box-shadow: 0 0 0 1px #d8d8d8 inset; color: #6f6f6f; cursor: not-allowed; } .a-button-outline.a-button--warning { background-color: rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 1px #f9b01e inset; color: #081f2c; } .a-button-outline.a-button--warning:hover, .a-button-outline.a-button--warning:active, .a-button-outline.a-button--warning:focus { text-decoration: none; background: #fffcf6; box-shadow: 0 0 0 1px #d4961a inset; } .a-button-outline.a-button--warning:focus { box-shadow: 0 0 0 1px #e09e1b inset, 0 0 0 3px #c1c7ca; } .a-button-outline.a-button--warning[disabled] { background: #f3f3f3; box-shadow: 0 0 0 1px #d8d8d8 inset; color: #6f6f6f; cursor: not-allowed; } .a-button-outline.a-button--danger { background-color: rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 1px #da291c inset; color: #da291c; } .a-button-outline.a-button--danger:hover, .a-button-outline.a-button--danger:active, .a-button-outline.a-button--danger:focus { text-decoration: none; background: #fef6f6; box-shadow: 0 0 0 1px #b92318 inset; } .a-button-outline.a-button--danger:focus { box-shadow: 0 0 0 1px #c42519 inset, 0 0 0 3px #f6cac6; } .a-button-outline.a-button--danger[disabled] { background: #f3f3f3; box-shadow: 0 0 0 1px #d8d8d8 inset; color: #6f6f6f; cursor: not-allowed; } /** * BUTTON ICON TRANSPARENT COLORS * ------------------------------------------------------------------- */ .a-button-transparent.has-icon { background-color: transparent; color: #0064b4; } .a-button-transparent.has-icon:hover, .a-button-transparent.has-icon:active, .a-button-transparent.has-icon:focus { text-decoration: none; color: #003c6c; } .a-button-transparent.has-icon:focus { box-shadow: 0 0 0 3px #cce0f0; } .a-button-transparent.has-icon[disabled] { background: #f3f3f3; box-shadow: 0 0 0 1px #d8d8d8 inset; color: #6f6f6f; cursor: not-allowed; } .a-button-transparent.has-icon.a-button--secondary { background-color: transparent; color: #cf0039; } .a-button-transparent.has-icon.a-button--secondary:hover, .a-button-transparent.has-icon.a-button--secondary:active, .a-button-transparent.has-icon.a-button--secondary:focus { text-decoration: none; color: #7c0022; } .a-button-transparent.has-icon.a-button--secondary:focus { box-shadow: 0 0 0 3px #f5ccd7; } .a-button-transparent.has-icon.a-button--secondary[disabled] { background: #f3f3f3; box-shadow: 0 0 0 1px #d8d8d8 inset; color: #6f6f6f; cursor: not-allowed; } .a-button-transparent.has-icon.a-button--success { background-color: transparent; color: #2b840d; } .a-button-transparent.has-icon.a-button--success:hover, .a-button-transparent.has-icon.a-button--success:active, .a-button-transparent.has-icon.a-button--success:focus { text-decoration: none; color: #1a4f08; } .a-button-transparent.has-icon.a-button--success:focus { box-shadow: 0 0 0 3px #d5e6cf; } .a-button-transparent.has-icon.a-button--success[disabled] { background: #f3f3f3; box-shadow: 0 0 0 1px #d8d8d8 inset; color: #6f6f6f; cursor: not-allowed; } .a-button-transparent.has-icon.a-button--warning { background-color: transparent; color: #081f2c; } .a-button-transparent.has-icon.a-button--warning:hover, .a-button-transparent.has-icon.a-button--warning:active, .a-button-transparent.has-icon.a-button--warning:focus { text-decoration: none; color: #05131a; } .a-button-transparent.has-icon.a-button--warning:focus { box-shadow: 0 0 0 3px #ced2d5; } .a-button-transparent.has-icon.a-button--warning[disabled] { background: #f3f3f3; box-shadow: 0 0 0 1px #d8d8d8 inset; color: #6f6f6f; cursor: not-allowed; } .a-button-transparent.has-icon.a-button--danger { background-color: transparent; color: #da291c; } .a-button-transparent.has-icon.a-button--danger:hover, .a-button-transparent.has-icon.a-button--danger:active, .a-button-transparent.has-icon.a-button--danger:focus { text-decoration: none; color: #831911; } .a-button-transparent.has-icon.a-button--danger:focus { box-shadow: 0 0 0 3px #f8d4d2; } .a-button-transparent.has-icon.a-button--danger[disabled] { background: #f3f3f3; box-shadow: 0 0 0 1px #d8d8d8 inset; color: #6f6f6f; cursor: not-allowed; } .a-button-transparent.has-icon.a-button--default { background-color: transparent; color: #6f6f6f; } .a-button-transparent.has-icon.a-button--default:hover, .a-button-transparent.has-icon.a-button--default:active, .a-button-transparent.has-icon.a-button--default:focus { text-decoration: none; color: #434343; } .a-button-transparent.has-icon.a-button--default:focus { box-shadow: 0 0 0 3px #e2e2e2; } .a-button-transparent.has-icon.a-button--default[disabled] { background: #f3f3f3; box-shadow: 0 0 0 1px #d8d8d8 inset; color: #6f6f6f; cursor: not-allowed; } /** * BUTTON SIZES * ------------------------------------------------------------------- */ .a-button.a-button--tiny, .a-button-negative.a-button--tiny, .a-button-outline.a-button--tiny, .a-button-transparent.a-button--tiny { font-size: 0.875rem; min-height: 1.5rem; padding: 0.1875rem 0.75rem 0.25rem; } .a-button.a-button--tiny .fa, .a-button-negative.a-button--tiny .fa, .a-button-outline.a-button--tiny .fa, .a-button-transparent.a-button--tiny .fa { font-size: 0.75rem; } .a-button.a-button--small, .a-button-negative.a-button--small, .a-button-outline.a-button--small, .a-button-transparent.a-button--small { font-size: 0.875rem; min-height: 2.25rem; padding: 0.5625rem 1.5rem; } .a-button.a-button--small .fa, .a-button-negative.a-button--small .fa, .a-button-outline.a-button--small .fa, .a-button-transparent.a-button--small .fa { font-size: 1rem; } .a-button.a-button--large, .a-button-negative.a-button--large, .a-button-outline.a-button--large, .a-button-transparent.a-button--large { font-size: 1.125rem; min-height: 3.75rem; padding: 1.125rem 1.5rem; } .a-button.a-button--large .fa, .a-button-negative.a-button--large .fa, .a-button-outline.a-button--large .fa, .a-button-transparent.a-button--large .fa { font-size: 1.75rem; } /** * BUTTON WITH ICON LEFT OR RIGHT * ------------------------------------------------------------------- */ .a-button.has-icon-left, .a-button.has-icon-right, .a-button-negative.has-icon-left, .a-button-negative.has-icon-right, .a-button-outline.has-icon-left, .a-button-outline.has-icon-right, .a-button-transparent.has-icon-left, .a-button-transparent.has-icon-right { position: relative; } .a-button.has-icon-left .fa, .a-button.has-icon-right .fa, .a-button-negative.has-icon-left .fa, .a-button-negative.has-icon-right .fa, .a-button-outline.has-icon-left .fa, .a-button-outline.has-icon-right .fa, .a-button-transparent.has-icon-left .fa, .a-button-transparent.has-icon-right .fa { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 3rem; } .a-button.has-icon-left, .a-button-negative.has-icon-left, .a-button-outline.has-icon-left, .a-button-transparent.has-icon-left { padding-left: 3rem; } .a-button.has-icon-left .fa, .a-button-negative.has-icon-left .fa, .a-button-outline.has-icon-left .fa, .a-button-transparent.has-icon-left .fa { left: 0; } .a-button.has-icon-right, .a-button-negative.has-icon-right, .a-button-outline.has-icon-right, .a-button-transparent.has-icon-right { padding-right: 3rem; } .a-button.has-icon-right .fa, .a-button-negative.has-icon-right .fa, .a-button-outline.has-icon-right .fa, .a-button-transparent.has-icon-right .fa { right: 0; } .a-button--tiny.has-icon-left .fa, .a-button--tiny.has-icon-right .fa { width: 1.5rem; } .a-button--tiny.has-icon-left { padding-left: 1.5rem; } .a-button--tiny.has-icon-right { padding-right: 1.5rem; } .a-button--small.has-icon-left .fa, .a-button--small.has-icon-right .fa { width: 2.25rem; } .a-button--small.has-icon-left { padding-left: 2.25rem; } .a-button--small.has-icon-right { padding-right: 2.25rem; } .a-button--large.has-icon-left .fa, .a-button--large.has-icon-right .fa { width: 3.75rem; } .a-button--large.has-icon-left { padding-left: 3.75rem; } .a-button--large.has-icon-right { padding-right: 3.75rem; } /** * BUTTON ICONS * ------------------------------------------------------------------- */ .a-button.has-icon, .a-button-negative.has-icon, .a-button-outline.has-icon, .a-button-transparent.has-icon { display: inline-block; padding: 0; position: relative; vertical-align: middle; width: 3rem; } .a-button.has-icon .fa, .a-button-negative.has-icon .fa, .a-button-outline.has-icon .fa, .a-button-transparent.has-icon .fa { left: 0; line-height: 3rem; position: absolute; top: 0; width: 3rem; } .a-button--tiny.has-icon { width: 1.5rem; } .a-button--tiny.has-icon .fa { line-height: 1.5rem; width: 1.5rem; } .a-button--small.has-icon { width: 2.25rem; } .a-button--small.has-icon .fa { line-height: 2.25rem; width: 2.25rem; } .a-button--large.has-icon { width: 3.75rem; } .a-button--large.has-icon .fa { line-height: 3.75rem; width: 3.75rem; } /** * BLOCK BUTTON * ------------------------------------------------------------------- */ /** * CODE * ------------------------------------------------------------------- */ /** * STANDARD CODE * ------------------------------------------------------------------- */ code, kbd, pre, samp { font-family: Menlo, Monaco, Consolas, "Courier New", monospace; } /** * Inline code */ code { background-color: #f3f3f3; color: #081f2c; font-size: 0.875rem; padding: 0.125rem 0.375rem; } a > code { background-color: inherit; color: inherit; padding: 0; } /** * Keyboard input */ kbd { background-color: #6f6f6f; color: white; font-size: 0.875rem; padding: 0.125rem 0.375rem; } kbd kbd { font-size: 100%; padding: 0; } /** * CODE BLOCK * ------------------------------------------------------------------- */ .a-pre { background: #f3f3f3; color: #081f2c; display: block; font-size: 1rem; margin-top: 0; padding: 0.75rem; white-space: pre-wrap; } .a-pre code { background-color: transparent; padding: 0; } /** * CODE MODIFIERS * ------------------------------------------------------------------- */ /** * Scrollable code block */ .a-pre--scrollable { overflow-y: scroll; white-space: pre; } /** * COPYRIGHT * ------------------------------------------------------------------- */ .a-copyright { background-color: rgba(0, 0, 0, 0.75); color: white; display: inline-block; font-size: 0.875rem; height: 2.25rem; transition: -webkit-transform 500ms ease-in-out; transition: transform 500ms ease-in-out; transition: transform 500ms ease-in-out, -webkit-transform 500ms ease-in-out; } /** * COPYRIGHT ELEMENTS * ------------------------------------------------------------------- */ .a-copyright__sign, .a-copyright__label { float: left; } .a-copyright__sign { height: 100%; position: relative; width: 2.25rem; } .a-copyright__sign .fa { left: 50%; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .a-copyright__label { line-height: 2.25rem; margin-right: 0.75rem; } /** * FORM ELEMENTS * ------------------------------------------------------------------- */ .a-form .a-input:not(:last-child) { margin-bottom: 1.5rem; } /** * FIELDSET * ------------------------------------------------------------------- */ fieldset { border: none; border-bottom: 1px solid #949494; border-top: 1px solid #949494; margin: 0; min-width: 0; padding: 3rem 0; position: relative; } fieldset + fieldset { margin-top: -1px; } legend { color: #6f6f6f; font-size: 18px; font-weight: 700; padding: 0 0.5rem 0 0; } /** * INPUTS * ------------------------------------------------------------------- * Input fields are normalized in _base.normalize.scss */ /** * INPUT FONT-FAMILY * ------------------------------------------------------------------- */ button, input, input[type='search'], select, textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; font: inherit; margin: 0; outline: none; } button:focus, input:focus, input[type='search']:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px #c0dffe; } /** * INPUT PLACEHOLDER * ------------------------------------------------------------------- */ .a-input { position: relative; } .a-input small { display: block; margin: 0.5625rem 0; text-align: left; } .a-input input, .a-input select, .a-input textarea { border-radius: 0; line-height: normal; resize: vertical; transition: border-color 250ms ease-in-out; width: 100%; } .a-input input { min-height: 3rem; padding: 0 1.5rem; } .a-input select { min-height: 3rem; padding: 0.75rem 1.5rem; } .a-input textarea { min-height: 12rem; padding: 1.125rem 1.5rem; } /** * INPUT * ------------------------------------------------------------------- */ .a-input input:not([class*='a-button']):not([type='checkbox']):not([type='radio']), .a-input select, .a-input textarea { background-color: white; border: 1px solid #949494; color: #081f2c; } .a-input input:not([class*='a-button']):not([type='checkbox']):not([type='radio'])::-webkit-input-placeholder, .a-input select::-webkit-input-placeholder, .a-input textarea::-webkit-input-placeholder { color: #6f6f6f; text-overflow: ellipsis; } .a-input input:not([class*='a-button']):not([type='checkbox']):not([type='radio']):-ms-input-placeholder, .a-input select:-ms-input-placeholder, .a-input textarea:-ms-input-placeholder { color: #6f6f6f; text-overflow: ellipsis; } .a-input input:not([class*='a-button']):not([type='checkbox']):not([type='radio'])::-moz-placeholder, .a-input select::-moz-placeholder, .a-input textarea::-moz-placeholder { color: #6f6f6f; opacity: 1; text-overflow: ellipsis; } .a-input input:not([class*='a-button']):not([type='checkbox']):not([type='radio']):-moz-placeholder, .a-input select:-moz-placeholder, .a-input textarea:-moz-placeholder { color: #6f6f6f; opacity: 1; text-overflow: ellipsis; } .a-input input:not([class*='a-button']):not([type='checkbox']):not([type='radio']):focus, .a-input select:focus, .a-input textarea:focus { box-shadow: 0 0 0 3px #c0dffe; } .a-input input:not([class*='a-button']):not([type='checkbox']):not([type='radio'])[disabled], .a-input select[disabled], .a-input textarea[disabled] { background: #f3f3f3; border-color: #d8d8d8; color: #6f6f6f; cursor: not-allowed; } .a-input.w-textarea-padding { padding: 1.125rem 1.5rem; } /** * INPUT WRAPPER * ------------------------------------------------------------------- */ .a-input__wrapper { position: relative; } /** * INPUT LABEL * ------------------------------------------------------------------- */ .a-input__label { display: inline-block; margin-bottom: 0.5625rem; text-align: left; } .a-input__label + .a-switch, .a-input__label + .a-input__checkbox, .a-input__label + .a-input__radio { margin-top: 0.5625rem; } /** * INPUT LABEL MODIFIERS * ------------------------------------------------------------------- */ .a-input__label--inline { margin-right: 0.75rem; margin-top: calc(16px - 1px); } /** * INPUT STATES * ------------------------------------------------------------------- */ .a-input.has-success input:not([class*='a-button']):not([type='checkbox']):not([type='radio']), .a-input.has-success select, .a-input.has-success textarea { background-color: white; border: 1px solid #1a4f08; color: #081f2c; } .a-input.has-success input:not([class*='a-button']):not([type='checkbox']):not([type='radio'])::-webkit-input-placeholder, .a-input.has-success select::-webkit-input-placeholder, .a-input.has-success textarea::-webkit-input-placeholder { color: #6f6f6f; text-overflow: ellipsis; } .a-input.has-success input:not([class*='a-button']):not([type='checkbox']):not([type='radio']):-ms-input-placeholder, .a-input.has-success select:-ms-input-placeholder, .a-input.has-success textarea:-ms-input-placeholder { color: #6f6f6f; text-overflow: ellipsis; } .a-input.has-success input:not([class*='a-button']):not([type='checkbox']):not([type='radio'])::-moz-placeholder, .a-input.has-success select::-moz-placeholder, .a-input.has-success textarea::-moz-placeholder { color: #6f6f6f; opacity: 1; text-overflow: ellipsis; } .a-input.has-success input:not([class*='a-button']):not([type='checkbox']):not([type='radio']):-moz-placeholder, .a-input.has-success select:-moz-placeholder, .a-input.has-success textarea:-moz-placeholder { color: #6f6f6f; opacity: 1; text-overflow: ellipsis; } .a-input.has-success input:not([class*='a-button']):not([type='checkbox']):not([type='radio']):focus, .a-input.has-success select:focus, .a-input.has-success textarea:focus { box-shadow: 0 0 0 3px #cae0c3; } .a-input.has-success input:not([class*='a-button']):not([type='checkbox']):not([type='radio'])[disabled], .a-input.has-success select[disabled], .a-input.has-success textarea[disabled] { background: #f3f3f3; border-color: #d8d8d8; color: #6f6f6f; cursor: not-allowed; } .a-input.has-success .a-input__wrapper:before { color: #2b840d; content: '\f00c'; } .a-input.has-warning input:not([class*='a-button']):not([type='checkbox']):not([type='radio']), .a-input.has-warning select, .a-input.has-warning textarea { background-color: white; border: 1px solid #956a12; color: #081f2c; } .a-input.has-warning input:not([class*='a-button']):not([type='checkbox']):not([type='radio'])::-webkit-input-placeholder, .a-input.has-warning select::-webkit-input-placeholder, .a-input.has-warning textarea::-webkit-input-placeholder { color: #6f6f6f; text-overflow: ellipsis; } .a-input.has-warning input:not([class*='a-button']):not([type='checkbox']):not([type='radio']):-ms-input-placeholder, .a-input.has-warning select:-ms-input-placeholder, .a-input.has-warning textarea:-ms-input-placeholder { color: #6f6f6f; text-overflow: ellipsis; } .a-input.has-warning input:not([class*='a-button']):not([type='checkbox']):not([type='radio'])::-moz-placeholder, .a-input.has-warning select::-moz-placeholder, .a-input.has-warning textarea::-moz-placeholder { color: #6f6f6f; opacity: 1; text-overflow: ellipsis; } .a-input.has-warning input:not([class*='a-button']):not([type='checkbox']):not([type='radio']):-moz-placeholder, .a-input.has-warning select:-moz-placeholder, .a-input.has-warning textarea:-moz-placeholder { color: #6f6f6f; opacity: 1; text-overflow: ellipsis; } .a-input.has-warning input:not([class*='a-button']):not([type='checkbox']):not([type='radio']):focus, .a-input.has-warning select:focus, .a-input.has-warning textarea:focus { box-shadow: 0 0 0 3px #feebc7; } .a-input.has-warning input:not([class*='a-button']):not([type='checkbox']):not([type='radio'])[disabled], .a-input.has-warning select[disabled], .a-input.has-warning textarea[disabled] { background: #f3f3f3; border-color: #d8d8d8; color: #6f6f6f; cursor: not-allowed; } .a-input.has-warning .a-input__wrapper:before { color: #f9b01e; content: '\f071'; } .a-input.has-error input:not([class*='a-button']):not([type='checkbox']):not([type='radio']), .a-input.has-error select, .a-input.has-error textarea { background-color: white; border: 1px solid #831911; color: #081f2c; } .a-input.has-error input:not([class*='a-button']):not([type='checkbox']):not([type='radio'])::-webkit-input-placeholder, .a-input.has-error select::-webkit-input-placeholder, .a-input.has-error textarea::-webkit-input-placeholder { color: #6f6f6f; text-overflow: ellipsis; } .a-input.has-error input:not([class*='a-button']):not([type='checkbox']):not([type='radio']):-ms-input-placeholder, .a-input.has-error select:-ms-input-placeholder, .a-input.has-error textarea:-ms-input-placeholder { color: #6f6f6f; text-overflow: ellipsis; } .a-input.has-error input:not([class*='a-button']):not([type='checkbox']):not([type='radio'])::-moz-placeholder, .a-input.has-error select::-moz-placeholder, .a-input.has-error textarea::-moz-placeholder { color: #6f6f6f; opacity: 1; text-overflow: ellipsis; } .a-input.has-error input:not([class*='a-button']):not([type='checkbox']):not([type='radio']):-moz-placeholder, .a-input.has-error select:-moz-placeholder, .a-input.has-error textarea:-moz-placeholder { color: #6f6f6f; opacity: 1; text-overflow: ellipsis; } .a-input.has-error input:not([class*='a-button']):not([type='checkbox']):not([type='radio']):focus, .a-input.has-error select:focus, .a-input.has-error textarea:focus { box-shadow: 0 0 0 3px #f6cac6; } .a-input.has-error input:not([class*='a-button']):not([type='checkbox']):not([type='radio'])[disabled], .a-input.has-error select[disabled], .a-input.has-error textarea[disabled] { background: #f3f3f3; border-color: #d8d8d8; color: #6f6f6f; cursor: not-allowed; } .a-input.has-error .a-input__wrapper:before { color: #da291c; content: '\f071'; } .a-input.has-success .a-input__wrapper:before, .a-input.has-warning .a-input__wrapper:before, .a-input.has-error .a-input__wrapper:before { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: FontAwesome; font-size: inherit; text-rendering: auto; font-size: 1.25rem; line-height: 3rem; position: absolute; right: 0; text-align: center; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 3rem; } .a-input.has-success.has-icon-right .a-input__wrapper:before, .a-input.has-warning.has-icon-right .a-input__wrapper:before, .a-input.has-error.has-icon-right .a-input__wrapper:before { right: 2.25rem; } .a-input.has-success.has-icon-right .a-input__wrapper input, .a-input.has-warning.has-icon-right .a-input__wrapper input, .a-input.has-error.has-icon-right .a-input__wrapper input { padding-right: 5.25rem; } .a-input.has-success input, .a-input.has-warning input, .a-input.has-error input { padding-right: 3rem; } .a-input.is-required .a-input__label:after { color: #da291c; content: ' *'; } /** * INPUT WITH ICON LEFT OR RIGHT * ------------------------------------------------------------------- */ .a-input__checkbox input, .a-input__radio input { min-height: 0; opacity: 0; width: auto; } .a-input__checkbox input:focus + label:after, .a-input__radio input:focus + label:after { box-shadow: 0 0 0 3px #c0dffe; } /** * INPUT WITH ICON LEFT OR RIGHT * ------------------------------------------------------------------- */ .a-input.has-icon-left .a-input__wrapper > .fa, .a-input.has-icon-right .a-input__wrapper > .fa { color: #6f6f6f; font-size: 1.25rem; height: 3rem; line-height: 3rem; pointer-events: none; position: absolute; text-align: center; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 3rem; } .a-input.has-icon-left .a-input__wrapper > .fa.is-clickable, .a-input.has-icon-right .a-input__wrapper > .fa.is-clickable { cursor: pointer; pointer-events: auto; transition: color 250ms ease-in-out; } .a-input.has-icon-left .a-input__wrapper > .fa.is-clickable:hover, .a-input.has-icon-right .a-input__wrapper > .fa.is-clickable:hover { color: #081f2c; } .a-input.has-icon-left .a-input__wrapper input, .a-input.has-icon-left .a-input__wrapper select { padding-left: 3rem; } .a-input.has-icon-left .a-input__wrapper > .fa { left: 0; } .a-input.has-icon-right .a-input__wrapper input, .a-input.has-icon-right .a-input__wrapper select { padding-right: 3rem; } .a-input.has-icon-right .a-input__wrapper > .fa { right: 0; } /** * INLINE INPUT * ------------------------------------------------------------------- */ .a-input--inline input, .a-input--inline select, .a-input--inline textarea, .a-input--inline .a-input__checkbox, .a-input--inline .a-input__radio { width: auto; } .a-input__wrapper--inline { display: inline-block; } /** * INPUT SIZES * ------------------------------------------------------------------- */ .a-input.a-input--small input { min-height: 2.25rem; padding: 0 0.75rem; } .a-input.a-input--small select { min-height: 2.25rem; padding: 0 0.75rem; } .a-input.a-input--small textarea { min-height: 8rem; padding: 0.5rem 0.75rem; } .a-input.a-input--large input { min-height: 3.75rem; padding: 0 1.5rem; } .a-input.a-input--large select { min-height: 3.75rem; padding: 1.125rem 1.5rem; } .a-input.a-input--large textarea { min-height: 16rem; padding: 1.25rem 1.5rem; } /** * LABELS * ------------------------------------------------------------------- */ .a-label { display: inline-block; font-size: 0.875rem; font-weight: 700; letter-spacing: .24px; line-height: 1.125rem; min-height: 1.125rem; padding: 0 0.375rem; text-transform: uppercase; } /** * LABELS COLORS * ------------------------------------------------------------------- */ .a-label { background-color: transparent; border: 1px solid #949494; color: #081f2c; } .a-label.a-label--primary { background-color: transparent; border: 1px solid #0064b4; color: #081f2c; } .a-label.a-label--secondary { background-color: transparent; border: 1px solid #cf0039; color: #081f2c; } .a-label.a-label--success { background-color: transparent; border: 1px solid #2b840d; color: #081f2c; } .a-label.a-label--warning { background-color: transparent; border: 1px solid #f9b01e; color: #081f2c; } .a-label.a-label--danger { background-color: transparent; border: 1px solid #da291c; color: #081f2c; } /** * LINKS * ------------------------------------------------------------------- */ /** * LINK WITH ICON LEFT OR RIGHT * ------------------------------------------------------------------- */ a:not(.a-button):not(.a-button-outline):not(.a-button-negative):not(.a-button-transparent).has-icon-left .fa, a:not(.a-button):not(.a-button-outline):not(.a-button-negative):not(.a-button-transparent).has-icon-right .fa { font-size: .875rem; } a:not(.a-button):not(.a-button-outline):not(.a-button-negative):not(.a-button-transparent).has-icon-left .fa { padding-right: 0.5rem; } a:not(.a-button):not(.a-button-outline):not(.a-button-negative):not(.a-button-transparent).has-icon-right .fa { padding-left: 0.5rem; } /** * LISTS * ------------------------------------------------------------------- */ ul, ol, dl { line-height: 1.3; } /** * STANDARD LIST * ------------------------------------------------------------------- */ .a-list, .m-collapsible-list, .m-collapsible-list ul { padding-left: 1.5rem; } .a-list .a-list, .m-collapsible-list .a-list { margin-top: 0.5rem; } .a-list .a-list > li:last-of-type, .m-collapsible-list .a-list > li:last-of-type, .m-collapsible-list ul .a-list > li:last-of-type { margin-bottom: -0.5rem; } .a-list > li, .m-collapsible-list > li, .m-collapsible-list ul > li { padding: 0.5rem 0 0.5rem; } /** * LIST PLACEHOLDERS * ------------------------------------------------------------------- * List without default padding and standard list styling. */ /** * List without default padding and standard list styling. */ .a-list--reset, .m-breadcrumbs, .m-button-list, .m-gallery, .m-icon-list, .m-nav-list, .m-nav-tabs, .m-pagination, .m-selectable-list, .m-step-indicator, .m-upload__files, .o-tag-list { line-height: 1; list-style: none; margin: 0; padding: 0; } .a-list--reset ul, .m-breadcrumbs ul, .m-button-list ul, .m-gallery ul, .m-icon-list ul, .m-nav-list ul, .m-nav-tabs ul, .m-pagination ul, .m-selectable-list ul, .m-step-indicator ul, .m-upload__files ul, .o-tag-list ul, .a-list--reset ol, .m-breadcrumbs ol, .m-button-list ol, .m-gallery ol, .m-icon-list ol, .m-nav-list ol, .m-nav-tabs ol, .m-pagination ol, .m-selectable-list ol, .m-step-indicator ol, .m-upload__files ol, .o-tag-list ol { list-style: none; padding: 0; } /** * List without standard list styling. */ .a-list--unstyled, .a-list.has-icon-left, .a-list.has-icon-right, .m-collapsible-list { list-style: none; padding: 0; } .a-list--unstyled ul, .a-list.has-icon-left ul, .a-list.has-icon-right ul, .m-collapsible-list ul, .a-list--unstyled ol, .a-list.has-icon-left ol, .a-list.has-icon-right ol, .m-collapsible-list ol { list-style: none; } /** * List without default padding. */ .a-list--flattened, .a-list--lined { line-height: 1; padding: 0; } .a-list--flattened ul, .a-list--lined ul, .a-list--flattened ol, .a-list--lined ol { padding: 0; } /** * List with more padding. */ .a-list--primary .a-list, .a-list--lined .a-list { line-height: 1; margin-top: 1rem; } .a-list--primary .a-list > li, .a-list--lined .a-list > li { padding-left: 0.75rem; } .a-list--primary .a-list > li:last-of-type, .a-list--lined .a-list > li:last-of-type { margin-bottom: -1rem; } .a-list--primary > li, .a-list--lined > li { padding: 1rem 0 1rem 0.75rem; } /** * LIST MODIFIERS * ------------------------------------------------------------------- */ /** * List with list items separated by a border. */ .a-list--lined > li { border-top: 1px solid #949494; list-style-position: inside; } .a-list--lined > li:last-of-type { border-bottom: 1px solid #949494; } .a-list--lined .a-list--lined > li:last-of-type { border-bottom: none; } /** * List with list items including an icon. */ .a-list.has-icon-left > li .fa { margin-right: 0.75rem; } .a-list.has-icon-right > li .fa { margin-left: 0.75rem; } /** * DEFINITION LIST * ------------------------------------------------------------------- */ .a-definition-list { margin: 0; } .a-definition-list dt { font-weight: 700; padding-top: 0.375rem; } .a-definition-list dd { margin-left: 0; padding-bottom: 0.375rem; } /** * RADIO BUTTON & CHECKBOX * ------------------------------------------------------------------- */ .a-input .a-input__radio, .a-input .a-input__checkbox { display: block; } .a-input .a-input__radio:not(:last-child), .a-input .a-input__checkbox:not(:last-child) { margin-bottom: 0.75rem; } .a-input--inline .a-input__radio, .a-input--inline .a-input__checkbox { display: inline-block; } .a-input--inline .a-input__radio + .a-input__radio, .a-input--inline .a-input__radio + .a-input__checkbox, .a-input--inline .a-input__checkbox + .a-input__radio, .a-input--inline .a-input__checkbox + .a-input__checkbox { margin-left: 1.5rem; } .a-input__checkbox, .a-input__radio { display: block; padding-left: 1.5rem; position: relative; } .a-input__checkbox input, .a-input__radio input { cursor: pointer; line-height: normal; opacity: 0; padding: 0; position: absolute; z-index: 1; } .a-input__checkbox input:checked + label:before, .a-input__radio input:checked + label:before { background-color: #0064b4; box-shadow: 0 0 0 1px #0064b4 inset; } .a-input__checkbox input:checked + label:after, .a-input__radio input:checked + label:after { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: FontAwesome; font-size: inherit; text-rendering: auto; } .a-input__checkbox input:disabled, .a-input__radio input:disabled { cursor: not-allowed; } .a-input__checkbox input:disabled + label, .a-input__radio input:disabled + label { color: #6f6f6f; cursor: not-allowed; } .a-input__checkbox input:disabled + label:before, .a-input__radio input:disabled + label:before { background-color: #f3f3f3; box-shadow: 0 0 0 1px #d8d8d8 inset; } .a-input__checkbox label, .a-input__radio label { cursor: pointer; display: inline-block; line-height: 1.5rem; max-width: 100%; min-height: 1.5rem; padding-left: 0.75rem; position: relative; vertical-align: middle; } .a-input__checkbox label:before, .a-input__radio label:before { background-color: white; box-shadow: 0 0 0 1px #949494 inset; content: ''; display: inline-block; height: 1.5rem; left: 0; margin-left: -1.5rem; position: absolute; transition-duration: 250ms; transition-property: background, box-shadow; transition-timing-function: ease-in-out; width: 1.5rem; } .a-input__checkbox label:after, .a-input__radio label:after { color: white; content: ''; display: inline-block; font-size: 16px; height: 1.5rem; left: 0; margin-left: -1.5rem; position: absolute; text-align: center; top: 0; width: 1.5rem; } .a-input__checkbox input[type='checkbox']:checked + label:after { content: '\f00c'; } .a-input__checkbox input[type='checkbox']:checked:disabled + label:before { background-color: #6f6f6f; box-shadow: 0 0 0 1px #f3f3f3 inset; } .a-input__radio input[type='radio'] + label:before, .a-input__radio input[type='radio'] + label:after { border-radius: 50%; } .a-input__radio input[type='radio']:checked + label:before { background: white; box-shadow: 0 0 0 0.375rem #0064b4 inset; } .a-input__radio input[type='radio']:checked:disabled + label:before { box-shadow: 0 0 0 6px #6f6f6f inset; } /** * SPINNER * ------------------------------------------------------------------- */ .a-spinner { color: #949494; } .a-spinner:before { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: FontAwesome; font-size: inherit; text-rendering: auto; -webkit-animation: fa-spin 1200ms infinite linear; animation: fa-spin 1200ms infinite linear; color: inherit; content: '\f1ce'; display: inline-block; font-size: 1.75rem; } .a-spinner--inline { display: inline-block; vertical-align: middle; } .a-spinner--centered { text-align: center; } /** * Spinner sizes */ .a-spinner--sm:before { font-size: 1.375rem; } .a-spinner--lg:before { font-size: 3.5rem; } /** * SWITCH * ------------------------------------------------------------------- */ .a-switch { display: flex; } .a-switch + .a-switch { margin-top: 1.5rem; } .a-switch.is-disabled .a-switch__label { color: #6f6f6f; cursor: not-allowed; } /** * SWITCH ELEMENTS * ------------------------------------------------------------------- */ .a-switch__label { line-height: 1.75rem; margin-right: 0.75rem; } .a-switch__toggle { height: 1.75rem; position: relative; width: 3rem; } .a-switch__toggle input[type='checkbox'] { opacity: 0; position: absolute; } .a-switch__toggle input[type='checkbox']:checked + label:before { width: 3rem; } .a-switch__toggle input[type='checkbox']:checked + label:after { background-color: #0064b4; left: 1.5rem; } .a-switch__toggle input[type='checkbox'][disabled] + label { background-color: #f3f3f3; box-shadow: inset 0 0 0 1px #d8d8d8; cursor: not-allowed; } .a-switch__toggle input[type='checkbox'][disabled] + label:after { background-color: #6f6f6f; } .a-switch__toggle input[type='checkbox']:focus + label:before { box-shadow: 0 0 0 3px #c0dffe; } .a-switch__toggle label { background-color: white; box-shadow: inset 0 0 0 1px #949494; cursor: pointer; display: inline-block; height: 1.75rem; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 3rem; } .a-switch__toggle label:before { content: ''; display: block; height: 1.75rem; left: 0; position: absolute; top: 0; width: 3rem; } .a-switch__toggle label:after { background-color: #6f6f6f; content: ''; display: block; height: 1.25rem; left: .25rem; position: absolute; top: .25rem; transition-duration: 250ms; transition-property: background, left; transition-timing-function: ease-in-out; width: 1.25rem; } .a-switch__toggle + .a-switch__label { margin: 0 0 0 0.75rem; } /** * TABLES * ------------------------------------------------------------------- */ /** * TABLE PLACEHOLDER * ------------------------------------------------------------------- */ .a-table { background-color: white; border: 1px solid #949494; border-collapse: collapse; width: 100%; } .a-table caption { margin-bottom: 0.5625rem; text-align: left; } .a-table thead { background: #f3f3f3; } .a-table tr { border-bottom: 1px solid #949494; height: 3rem; transition: background-color 250ms ease-in-out; } .a-table tr.a-table--clickable:hover, .a-table tr.has-click-action:hover { background-color: #e6f0f8; cursor: pointer; } .a-table th, .a-table td { padding: 0.75rem; } .a-table th:not(.u-text-center):not(.u-text-right):not(.u-text-justify), .a-table td:not(.u-text-center):not(.u-text-right):not(.u-text-justify) { text-align: left; } .a-table th.is-condensed, .a-table td.is-condensed { padding: 0.375rem; } .a-table th.has-no-padding, .a-table td.has-no-padding { padding: 0; } /** * TABLE SIZES * ------------------------------------------------------------------- */ .a-table.a-table--small tr { height: 2.25rem; } /** * TABLE SCHEMES * ------------------------------------------------------------------- */ .a-table.a-table--primary thead { background-color: #0064b4; color: white; } .a-table.a-table--secondary thead { background-color: #cf0039; color: white; } .a-table.a-table--striped tbody tr:nth-child(odd) { background-color: white; } .a-table.a-table--striped tbody tr:nth-child(odd).a-table--clickable:hover, .a-table.a-table--striped tbody tr:nth-child(odd).has-click-action:hover { background-color: #e6f0f8; } .a-table.a-table--striped tbody tr:nth-child(even) { background-color: #f3f3f3; } .a-table.a-table--striped tbody tr:nth-child(even).a-table--clickable:hover, .a-table.a-table--striped tbody tr:nth-child(even).has-click-action:hover { background-color: #e6f0f8; } /** * TABLE RESPONSIVE WRAPPER * ------------------------------------------------------------------- */ .a-table__wrapper-responsive { -ms-overflow-style: scrollbar; -webkit-overflow-scrolling: touch; background-color: white; border: 1px solid #949494; overflow-x: auto; overflow-y: hidden; width: 100%; } .a-table__wrapper-responsive table { border: none; margin-bottom: -1px; } .a-table__wrapper-responsive table > thead > tr > td, .a-table__wrapper-responsive table > thead > tr > th, .a-table__wrapper-responsive table > tbody > tr > td, .a-table__wrapper-responsive table > tbody > tr > th, .a-table__wrapper-responsive table > tfoot > tr > td, .a-table__wrapper-responsive table > tfoot > tr > th { white-space: nowrap; } /** * TIMEPICKER * ------------------------------------------------------------------- */ .a-timepicker { align-items: flex-end; display: flex; position: relative; } .a-timepicker__separator { margin: 0 0.75rem 1.125rem; } /** * TOGGLE * ------------------------------------------------------------------- */ .a-toggle { display: block; height: 3rem; overflow: hidden; } .a-toggle.has-icon { display: inline-block; vertical-align: middle; } /** * TOGGLE ELEMENTS * ------------------------------------------------------------------- */ .a-toggle__checkbox { display: none; } .a-toggle__checkbox:checked + .a-toggle__labels { -webkit-transform: translateY(-50%); transform: translateY(-50%); } .a-toggle__labels { display: flex; flex-direction: column; transition: -webkit-transform 250ms ease-in-out; transition: transform 250ms ease-in-out; transition: transform 250ms ease-in-out, -webkit-transform 250ms ease-in-out; } .a-toggle__labels [class*='a-button'] { display: block; } .a-toggle__on { order: 1; } .a-toggle__off { order: 2; } /** * TOGGLE MODIFIERS * ------------------------------------------------------------------- */ .a-toggle.a-toggle--tiny { height: 1.5rem; } .a-toggle.a-toggle--small { height: 2.25rem; } .a-toggle.a-toggle--large { height: 3.75rem; } /** * TOOLTIP * ------------------------------------------------------------------- */ /** * TOOLTIP PLACEHOLDER * ------------------------------------------------------------------- */ .a-tooltip { display: inline-block; max-width: 18rem; min-height: 2.25rem; padding: 0.5rem 0.75rem; position: relative; } .a-tooltip a { color: inherit; } .a-tooltip:before { content: ''; display: block; height: 0.75rem; position: absolute; width: 0.75rem; } /** * TOOLTIP COLORS * ------------------------------------------------------------------- */ .a-tooltip { background-color: #d8d8d8; color: #081f2c; } .a-tooltip:before { background-color: #d8d8d8; } .a-tooltip.a-tooltip--primary { background-color: #0064b4; color: white; } .a-tooltip.a-tooltip--primary:before { background-color: #0064b4; } .a-tooltip.a-tooltip--secondary { background-color: #cf0039; color: white; } .a-tooltip.a-tooltip--secondary:before { background-color: #cf0039; } /** * TOOLTIP POSITIONS * ------------------------------------------------------------------- */ .a-tooltip { /** * TOP */ /** * BOTTOM */ /** * LEFT */ /** * RIGHT */ } .a-tooltip.a-tooltip--top:before, .a-tooltip.a-tooltip--top-right:before, .a-tooltip.a-tooltip--top-left:before { bottom: 0; } .a-tooltip.a-tooltip--top:before { left: 50%; -webkit-transform: translate(-50%, 50%) rotate(45deg); transform: translate(-50%, 50%) rotate(45deg); } .a-tooltip.a-tooltip--top-right:before { left: 0.75rem; -webkit-transform: translate(0, 50%) rotate(45deg); transform: translate(0, 50%) rotate(45deg); } .a-tooltip.a-tooltip--top-left:before { right: 0.75rem; -webkit-transform: translate(0, 50%) rotate(45deg); transform: translate(0, 50%) rotate(45deg); } .a-tooltip.a-tooltip--bottom:before, .a-tooltip.a-tooltip--bottom-right:before, .a-tooltip.a-tooltip--bottom-left:before { top: 0; } .a-tooltip.a-tooltip--bottom:before { left: 50%; -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); } .a-tooltip.a-tooltip--bottom-right:before { left: 0.75rem; -webkit-transform: translate(0, -50%) rotate(45deg); transform: translate(0, -50%) rotate(45deg); } .a-tooltip.a-tooltip--bottom-left:before { right: 0.75rem; -webkit-transform: translate(0, -50%) rotate(45deg); transform: translate(0, -50%) rotate(45deg); } .a-tooltip.a-tooltip--left:before, .a-tooltip.a-tooltip--left-top:before, .a-tooltip.a-tooltip--left-bottom:before { right: 0; } .a-tooltip.a-tooltip--left:before { top: 50%; -webkit-transform: translate(50%, -50%) rotate(45deg); transform: translate(50%, -50%) rotate(45deg); } .a-tooltip.a-tooltip--left-top:before { bottom: 0.75rem; -webkit-transform: translate(50%, 0) rotate(45deg); transform: translate(50%, 0) rotate(45deg); } .a-tooltip.a-tooltip--left-bottom:before { top: 0.75rem; -webkit-transform: translate(50%, 0) rotate(45deg); transform: translate(50%, 0) rotate(45deg); } .a-tooltip.a-tooltip--right:before, .a-tooltip.a-tooltip--right-top:before, .a-tooltip.a-tooltip--right-bottom:before { left: 0; } .a-tooltip.a-tooltip--right:before { top: 50%; -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); } .a-tooltip.a-tooltip--right-top:before { bottom: 0.75rem; -webkit-transform: translate(-50%, 0) rotate(45deg); transform: translate(-50%, 0) rotate(45deg); } .a-tooltip.a-tooltip--right-bottom:before { top: 0.75rem; -webkit-transform: translate(-50%, 0) rotate(45deg); transform: translate(-50%, 0) rotate(45deg); } /** * MOLECULES * ------------------------------------------------------------------- */ /** * ACCORDION * ------------------------------------------------------------------- */ .m-accordion.has-margins .m-accordion__tab:not(:first-child) { margin-top: 0.75rem; } .m-accordion__tab:not(:first-child) { margin-top: -1px; } .m-accordion__tab.is-open .m-accordion__header:after { content: '\f106'; } .m-accordion__tab.is-open .m-accordion__content { border-bottom: 1px solid #949494; max-height: 500px; } .m-accordion__header { align-items: center; background-color: white; border: 1px solid #949494; cursor: pointer; display: flex; min-height: 3rem; padding: 0.75rem 3rem 0.75rem 0.75rem; position: relative; text-align: left; transition: background 250ms ease-in-out; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .m-accordion__header:hover { background-color: #f3f3f3; } .m-accordion__header:after { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: FontAwesome; font-size: inherit; text-rendering: auto; color: #0064b4; content: '\f107'; font-size: 1.125rem; position: absolute; right: 1.125rem; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .m-accordion__content { background-color: white; border-bottom: none; border-left: 1px solid #949494; border-right: 1px solid #949494; display: block; max-height: 0; overflow: auto; padding: 0; transition: max-height .5s ease-out; } /** * ALERTS * ------------------------------------------------------------------- */ .m-alert { padding: 1.5rem; position: relative; } .m-alert .m-alert__close { position: absolute; right: 0; top: 0; } .m-alert .m-alert__close + * { margin-right: 2.25rem; } .m-alert__actions { margin-bottom: -0.75rem; } .m-alert__actions [class*='a-button'] { margin-bottom: 0.75rem; } /** * ALERTS COLORS * ------------------------------------------------------------------- */ .m-alert { background-color: #e6f0f8; border: 1px solid #0064b4; } .m-alert.m-alert--success { background-color: #eaf3e7; border: 1px solid #2b840d; } .m-alert.m-alert--warning { background-color: #fef7e9; border: 1px solid #f9b01e; } .m-alert.m-alert--danger { background-color: #fbeae8; border: 1px solid #da291c; } /** * BREADCRUMB * ------------------------------------------------------------------- */ .m-breadcrumbs:after { clear: both; content: ''; display: block; } .m-breadcrumbs li { display: block; float: left; margin-bottom: 0.75rem; } .m-breadcrumbs li:not(:last-child):after { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: FontAwesome; font-size: inherit; text-rendering: auto; color: #949494; content: '\f105'; margin: 0 0.75rem; } /** * BUTTON GROUP * ------------------------------------------------------------------- */ .m-button-group { display: flex; flex-wrap: wrap; padding-bottom: 1px; vertical-align: middle; } .m-button-group > [class*='a-button'] { z-index: 1; } .m-button-group > [class*='a-button']:not(.has-icon) { width: auto; } .m-button-group > [class*='a-button'][disabled] { z-index: 0; } .m-button-group > [class*='a-button']:focus { z-index: 2; } .m-button-group > .a-button { border-right: 1px solid #005599; margin-top: -1px; } .m-button-group > .a-button:last-child { border-right: none; } .m-button-group > .a-button.a-button--secondary { border-color: #b00030; } .m-button-group > .a-button.a-button--success { border-color: #25700b; } .m-button-group > .a-button.a-button--warning { border-color: #d4961a; } .m-button-group > .a-button.a-button--danger { border-color: #b92318; } .m-button-group > .a-button.a-button--transparent { border: none; } .m-button-group > .a-button-outline { margin-bottom: -1px; margin-right: -1px; } .m-button-group > .a-button-outline:last-child { margin-right: 0; } .m-button-group > .a-button-outline:not([disabled]):hover, .m-button-group > .a-button-outline:not([disabled]):active, .m-button-group > .a-button-outline:not([disabled]):focus { z-index: 1; } .m-button-group--vertical { flex-direction: column; } .m-button-group--vertical > .a-button { border-right: none; } .m-button-group--vertical > .a-button:not(:first-child) { border-top: 1px solid #005599; } .m-button-group--vertical > .a-button-outline { margin-right: 0; } /** * BUTTON LIST * ------------------------------------------------------------------- */ .m-button-list li:not(:last-child) { margin-bottom: 0.75rem; } /** * BUTTON LIST MODIFIERS * ------------------------------------------------------------------- */ .m-button-list--horizontal { display: flex; flex-wrap: wrap; margin-bottom: -0.75rem; } .m-button-list--horizontal li { margin-bottom: 0.75rem; } .m-button-list--horizontal li:not(:last-child) { margin-right: 0.75rem; } /** * CARD * ------------------------------------------------------------------- */ .m-card { background-color: white; border: 1px solid #949494; } /** * CARD ELEMENTS * ------------------------------------------------------------------- */ .m-card__header { padding: 0.75rem; } .m-card__image img { display: block; width: 100%; } .m-card__body { padding: 1.5rem; } /** * COLLAPSIBLE LIST * ------------------------------------------------------------------- */ .m-collapsible-list ul { margin-bottom: -0.5rem; margin-top: 0.5rem; } /** * COLLAPSIBLE LIST ITEMS * ------------------------------------------------------------------- */ .m-collapsible-list__item:not(.is-active) > a { text-decoration: none; transition: none; } .m-collapsible-list__item:not(.is-active) > a:link, .m-collapsible-list__item:not(.is-active) > a:visited { color: #081f2c; } .m-collapsible-list__item:not(.is-active) > a:hover, .m-collapsible-list__item:not(.is-active) > a:active, .m-collapsible-list__item:not(.is-active) > a:focus { color: #005599; text-decoration: underline; } /** * MODIFIERS * ------------------------------------------------------------------- */ .m-collapsible-list__item.is-active > a { font-weight: 700; } .m-collapsible-list__item ul.is-collapsed { display: none; } /** * CONTACT * ------------------------------------------------------------------- */ .m-contact { align-items: center; display: flex; } .m-contact__info { padding: 0 0.75rem; } /** * DATEPICKER * ------------------------------------------------------------------- */ .m-datepicker { max-width: 21rem; opacity: 0; -webkit-transform: translateY(-3rem); transform: translateY(-3rem); transition: visibility 0s 250ms ease-in-out, opacity 250ms ease-in-out, -webkit-transform 250ms ease-in-out; transition: visibility 0s 250ms ease-in-out, opacity 250ms ease-in-out, transform 250ms ease-in-out; transition: visibility 0s 250ms ease-in-out, opacity 250ms ease-in-out, transform 250ms ease-in-out, -webkit-transform 250ms ease-in-out; visibility: hidden; } .m-datepicker table { border-collapse: collapse; border-spacing: 0; height: 100%; table-layout: fixed; width: 100%; } /** * DATEPICKER ELEMENTS * ------------------------------------------------------------------- */ .m-datepicker__nav { display: flex; height: 3rem; } .m-datepicker__title { flex: 1; } .m-datepicker__days { background-color: white; border-left: 1px solid #949494; border-right: 1px solid #949494; height: 3rem; } .m-datepicker__calendar { background-color: white; } .m-datepicker__calendar td { border: 1px solid #949494; padding: 0; position: relative; } .m-datepicker__calendar td:after { content: ''; display: block; margin-top: 100%; } .m-datepicker__calendar button { background-color: transparent; border: none; cursor: pointer; height: 100%; padding: 0; position: absolute; transition: background 250ms ease-in-out; width: 100%; } .m-datepicker__calendar button:hover, .m-datepicker__calendar button:active { background-color: #d9e8f4; } .m-datepicker__calendar button.is-current { background-color: #d9e8f4; color: #0064b4; font-weight: 800; } .m-datepicker__calendar button.is-current:hover, .m-datepicker__calendar button.is-current:active { background-color: #d9e8f4; } .m-datepicker__calendar button.is-selected { background-color: #0064b4; box-shadow: 0 0 0 1px #0064b4; color: white; font-weight: 800; } .m-datepicker__calendar button.is-selected:hover, .m-datepicker__calendar button.is-selected:active, .m-datepicker__calendar button.is-selected:focus { background-color: #0064b4; box-shadow: 0 0 0 3px #c0dffe; } .m-datepicker__calendar button.is-faded { background-color: #f3f3f3; color: #6f6f6f; } .m-datepicker__calendar button.is-faded:hover, .m-datepicker__calendar button.is-faded:active { background-color: #d8d8d8; } .m-datepicker__calendar button.is-unavailable, .m-datepicker__calendar button:disabled { background-color: white; box-shadow: none; color: #6f6f6f; cursor: not-allowed; font-weight: 500; } .m-datepicker__calendar button.is-unavailable:hover, .m-datepicker__calendar button.is-unavailable:active, .m-datepicker__calendar button:disabled:hover, .m-datepicker__calendar button:disabled:active { background-color: white; } /** * DATEPICKER MODIFIERS * ------------------------------------------------------------------- */ .m-datepicker.is-open { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); transition-delay: 0s; visibility: visible; } .m-datepicker--fixed { box-shadow: 0.75rem 0.75rem 0 rgba(0, 0, 0, 0.1); position: absolute; right: 0; top: 100%; z-index: 3; } .m-datepicker--left { left: 0; right: auto; } /** * FLYOUT * ------------------------------------------------------------------- */ .m-flyout { display: inline-block; position: relative; } /** * FLYOUT ELEMENTS * ------------------------------------------------------------------- */ .m-flyout__content { background-color: white; border: 1px solid #949494; box-shadow: 0.75rem 0.75rem 0 rgba(0, 0, 0, 0.1); opacity: 0; position: absolute; -webkit-transform: translateY(-3rem); transform: translateY(-3rem); transition: visibility 0s 250ms ease-in-out, opacity 250ms ease-in-out, -webkit-transform 250ms ease-in-out; transition: visibility 0s 250ms ease-in-out, opacity 250ms ease-in-out, transform 250ms ease-in-out; transition: visibility 0s 250ms ease-in-out, opacity 250ms ease-in-out, transform 250ms ease-in-out, -webkit-transform 250ms ease-in-out; visibility: hidden; z-index: 4; } /** * FLYOUT MODIFIERS * ------------------------------------------------------------------- */ .m-flyout.opens-above .m-flyout__content { box-shadow: 0.75rem -0.75rem 0 rgba(0, 0, 0, 0.1); } /** * FLYOUT POSITIONING * ------------------------------------------------------------------- */ .m-flyout--right .m-flyout__content { right: 0; } /** * FLYOUT SIZES * ------------------------------------------------------------------- */ .m-flyout--full .m-flyout__content, .m-flyout--lg .m-flyout__content, .m-flyout--md .m-flyout__content, .m-flyout--sm .m-flyout__content { min-width: 100%; } .m-flyout--lg .m-flyout__content { width: 15rem; } .m-flyout--md .m-flyout__content { width: 15rem; } .m-flyout--sm .m-flyout__content { width: 15rem; } .m-flyout--scrollable .m-flyout__content { max-height: 13.5rem; overflow-y: scroll; } /** * FLYOUT VISIBILITY * ------------------------------------------------------------------- */ .m-flyout.is-open > .m-flyout__content { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); transition-delay: 0s; visibility: visible; } .m-flyout__content.has-padding { padding: 1rem 1.5rem; } /** * FLYOUT FIX AFTER FORM ELEMENT * ------------------------------------------------------------------- */ .a-input + .m-flyout__content { margin-top: -1px; } /** * DATEPICKER IN FLYOUT BORDER FIX * ------------------------------------------------------------------- */ .m-flyout__content.m-datepicker { border: none; } /** * GALLERY * ------------------------------------------------------------------- */ .m-gallery { display: flex; flex-wrap: wrap; margin-left: -0.75rem; width: calc(100% + 1.5rem); } .m-gallery:after { clear: both; content: ''; display: block; } /** * GALLERY ELEMENTS * ------------------------------------------------------------------- */ .m-gallery__item { margin: 0 0.75rem 1.5rem; width: calc(33.33333% - 1.5rem); /** * GALLERY ITEM MODIFIERS * ------------------------------------------------------------------- */ } .m-gallery__item a { display: block; } .m-gallery__item img { max-height: 100%; max-width: 100%; } .m-gallery__item.m-gallery__item--preview { height: auto; margin-right: 0; width: calc(100% - 1.5rem); } /** * ICON LIST * ------------------------------------------------------------------- */ .m-icon-list li { color: black; text-align: center; } .m-icon-list li:not(:last-child) { margin-bottom: 1.125rem; } .m-icon-list li a { color: inherit; display: block; transition: color 250ms ease-in-out; } .m-icon-list li a:hover { color: #cf0039; } .m-icon-list li .fa { font-size: 1.375rem; } /** * ICON LIST MODIFIERS * ------------------------------------------------------------------- */ .m-icon-list--horizontal { display: flex; } .m-icon-list--horizontal li { margin: 0; } .m-icon-list--horizontal li:not(:last-child) { margin: 0 1.5rem 0 0; } .m-icon-list--negative li { color: white; } /** * IMAGES * ------------------------------------------------------------------- */ /** * IMAGE * ------------------------------------------------------------------- */ .m-image { display: inline-block; overflow: hidden; position: relative; } .m-image img { height: auto; max-width: 100%; } /** * IMAGE ELEMENTS * ------------------------------------------------------------------- */ .m-image__copyright { bottom: 0; color: white; position: absolute; right: 0; -webkit-transform: translateX(100%) translateX(-2.25rem); transform: translateX(100%) translateX(-2.25rem); } .m-image__copyright:hover, .m-image__copyright:active, .m-image__copyright:focus { color: white; -webkit-transform: translateX(0); transform: translateX(0); } /** * MODAL * ------------------------------------------------------------------- */ .m-modal { background-color: white; border: 1px solid #949494; width: 100%; } .m-modal .m-modal__close { position: absolute; right: 0; top: 0; } .m-modal .m-modal__close + * { margin-right: 2.25rem; } /** * MODAL ELEMENTS * ------------------------------------------------------------------- */ .m-modal__content { padding: 1.5rem; position: relative; } .m-modal__footer { margin-bottom: -0.75rem; } .m-modal__footer [class*='a-button'] { margin-bottom: 0.75rem; } /** * MODAL MODIFIERS * ------------------------------------------------------------------- */ /** * NAVIGATION * ------------------------------------------------------------------- */ /** * NAVIGATION LIST * ------------------------------------------------------------------- */ .m-nav-list, .m-nav-tabs { border-top: 1px solid #949494; } .m-nav-list > li, .m-nav-tabs > li { font-weight: 700; line-height: 1.3; min-height: 3rem; text-align: center; } .m-nav-list > li > a, .m-nav-tabs > li > a, .m-nav-list > li > button, .m-nav-tabs > li > button { background-color: transparent; border: none; border-bottom: 1px solid #949494; color: inherit; display: block; padding: 1rem 1.5rem; text-decoration: none; transition-duration: 250ms; transition-property: background, color; transition-timing-function: ease-in-out; } .m-nav-list > li > a:hover, .m-nav-tabs > li > a:hover, .m-nav-list > li > a:active, .m-nav-tabs > li > a:active, .m-nav-list > li > button:hover, .m-nav-tabs > li > button:hover, .m-nav-list > li > button:active, .m-nav-tabs > li > button:active { background-color: #f3f3f3; color: #0064b4; } .m-nav-list > li > a.is-active, .m-nav-tabs > li > a.is-active, .m-nav-list > li > a.is-active:hover, .m-nav-tabs > li > a.is-active:hover, .m-nav-list > li > a.is-active:active, .m-nav-tabs > li > a.is-active:active, .m-nav-list > li > button.is-active, .m-nav-tabs > li > button.is-active, .m-nav-list > li > button.is-active:hover, .m-nav-tabs > li > button.is-active:hover, .m-nav-list > li > button.is-active:active, .m-nav-tabs > li > button.is-active:active { background-color: transparent; color: #0064b4; text-decoration: underline; } .m-nav-list > li > a.is-disabled, .m-nav-tabs > li > a.is-disabled, .m-nav-list > li > a.is-disabled:hover, .m-nav-tabs > li > a.is-disabled:hover, .m-nav-list > li > a.is-disabled:active, .m-nav-tabs > li > a.is-disabled:active, .m-nav-list > li > button.is-disabled, .m-nav-tabs > li > button.is-disabled, .m-nav-list > li > button.is-disabled:hover, .m-nav-tabs > li > button.is-disabled:hover, .m-nav-list > li > button.is-disabled:active, .m-nav-tabs > li > button.is-disabled:active { background-color: #f3f3f3; color: #6f6f6f; cursor: not-allowed; text-decoration: none; } .m-nav-list > li > a > .fa, .m-nav-tabs > li > a > .fa, .m-nav-list > li > button > .fa, .m-nav-tabs > li > button > .fa { display: inline-block; font-size: 1.25rem; margin-right: 0.75rem; vertical-align: bottom; } .m-nav-list > li > button, .m-nav-tabs > li > button { cursor: pointer; width: 100%; } /** * NAVIGATION LIST MODIFIERS * ------------------------------------------------------------------- */ .m-nav-list--left > li { text-align: left; } .m-nav-list--left > li > button { text-align: left; } /** * NAVIGATION TABS * ------------------------------------------------------------------- */ /** * NAVIGATION LIST MODIFIERS * ------------------------------------------------------------------- */ /** * OVERLAY * ------------------------------------------------------------------- */ .m-overlay { background-color: rgba(0, 0, 0, 0.75); bottom: 0; display: none; left: 0; outline: 0; overflow: hidden; position: fixed; right: 0; top: 0; z-index: 10; } .m-overlay.is-active { align-items: center; display: flex; justify-content: center; } /** * OVERLAY ELEMENTS * ------------------------------------------------------------------- */ .m-overlay__button { background: none; border: none; color: white; cursor: pointer; font-size: 1.75rem; padding: 0.75rem; position: absolute; right: 0.75rem; top: 0.75rem; transition: color 250ms ease-in-out; } .m-overlay__button:hover { color: #d8d8d8; } .m-overlay__inner { -ms-overflow-style: none; max-height: calc(100vh - 8.75rem); overflow: auto; overflow-y: scroll; } .m-overlay__slideshow.o-slideshow { max-height: 80vh; max-width: 105vh; width: 100%; } .m-overlay__slideshow.o-slideshow .o-slideshow__footer { color: white; } .m-overlay__pane { position: absolute; z-index: 6; } /** * PAGINATION * ------------------------------------------------------------------- */ .m-pagination { display: flex; } .m-pagination > li { background-color: #0064b4; color: white; font-size: 1rem; height: 3rem; line-height: 3rem; position: relative; text-align: center; width: 3rem; z-index: 1; } .m-pagination > li > a { color: white; display: block; text-decoration: none; transition-duration: 250ms; transition-property: color, background; transition-timing-function: ease-in-out; } .m-pagination > li > a:hover, .m-pagination > li > a:active, .m-pagination > li > a:focus { background-color: #005599; } .m-pagination > li > a.is-active { background-color: #005599; font-weight: 700; } .m-pagination > li > a.is-disabled { background-color: #f3f3f3; color: #6f6f6f; cursor: not-allowed; } .m-pagination .m-pagination__label { padding: 0 1.5rem; width: auto; } .m-pagination .m-pagination__prev { border-right: 1px solid #005599; } .m-pagination .m-pagination__prev + .m-pagination__next { border-left: none; } .m-pagination .m-pagination__next { border-left: 1px solid #005599; z-index: 0; } .m-pagination--outline > li { background-color: transparent; box-shadow: 0 0 0 1px #0064b4 inset; color: #0064b4; } .m-pagination--outline > li > a, .m-pagination--outline > li > a:hover, .m-pagination--outline > li > a:active, .m-pagination--outline > li > a:focus { background-color: inherit; box-shadow: inherit; color: inherit; } .m-pagination--outline > li > a.is-active, .m-pagination--outline > li > a:hover.is-active, .m-pagination--outline > li > a:active.is-active, .m-pagination--outline > li > a:focus.is-active { background-color: #0064b4; color: white; } .m-pagination--outline > li > a.is-disabled, .m-pagination--outline > li > a:hover.is-disabled, .m-pagination--outline > li > a:active.is-disabled, .m-pagination--outline > li > a:focus.is-disabled { background-color: transparent; box-shadow: 0 0 0 1px #f3f3f3 inset; color: #f3f3f3; cursor: not-allowed; } .m-pagination--outline > li > a:hover, .m-pagination--outline > li > a:active, .m-pagination--outline > li > a:focus { background-color: #d9e8f4; box-shadow: 0 0 0 1px #005599 inset; } .m-pagination--outline > li > a:focus { box-shadow: 0 0 0 1px #005599 inset, 0 0 0 3px #c0dffe; } .m-pagination--outline > li + li { margin-left: -1px; } .m-pagination--outline .m-pagination__prev, .m-pagination--outline .m-pagination__next { border: none; } /** * PAGINATION SIZES * ------------------------------------------------------------------- */ .m-pagination.m-pagination--small > li { height: 2.25rem; line-height: 2.25rem; width: 2.25rem; } .m-pagination.m-pagination--small .m-pagination__label { padding: 0 0.75rem; width: auto; } .m-pagination.m-pagination--large > li { height: 3.75rem; line-height: 3.75rem; width: 3.75rem; } .m-pagination.m-pagination--large .m-pagination__label { padding: 0 2.25rem; width: auto; } /** * PROGRESS VARIABLES * ------------------------------------------------------------------- */ /** * PROGRESS * ------------------------------------------------------------------- */ /** * PROGRESS ELEMENTS * ------------------------------------------------------------------- */ .m-progress__label { display: block; margin-bottom: 0.5625rem; text-align: left; } .m-progress__inner { background-color: white; box-shadow: inset 0 0 0 1px #949494; height: 1.75rem; padding: 0.25rem; position: relative; width: 100%; } .m-progress__inner .a-tooltip { display: block; float: right; position: relative; top: -3.5rem; -webkit-transform: translateX(50%); transform: translateX(50%); } .m-progress__inner .a-tooltip--bottom { top: 2.5rem; } .m-progress__bar { background-color: #0064b4; height: 1.25rem; } /** * PROGRESS MODIFIERS * ------------------------------------------------------------------- */ .m-progress--inline { align-items: center; display: flex; } .m-progress--inline .m-progress__label { margin-bottom: 0; margin-right: 0.75rem; min-width: 2.25rem; text-align: right; } .m-progress--inline .m-progress__inner + .m-progress__label { margin-left: 0.75rem; margin-right: 0; } /** * RANGE SLIDER VARIABLES * ------------------------------------------------------------------- */ /** * RANGE SLIDER * ------------------------------------------------------------------- */ .m-range-slider { background: white; border-radius: 1.75rem; box-shadow: inset 0 0 0 1px #949494; height: 1.75rem; padding: 0.25rem; width: 100%; } /** * RANGE SLIDER ELEMENTS * ------------------------------------------------------------------- */ .m-range-slider__inner { height: 1.25rem; margin: 0 auto; position: relative; width: calc(100% - (1.75rem - 0.5rem)); } .m-range-slider__bar { background-color: #d8d8d8; height: 100%; position: absolute; } .m-range-slider__bar:before, .m-range-slider__bar:after { background-color: #d8d8d8; border-radius: 1.25rem; content: ''; display: block; height: 1.25rem; position: absolute; top: 50%; width: 1.25rem; } .m-range-slider__bar:before { left: 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .m-range-slider__bar:after { right: 0; -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); } .m-range-slider__handle { cursor: -webkit-grab; cursor: grab; padding: 0.625rem; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .m-range-slider__handle:before { background-color: #0064b4; border-radius: 1.25rem; content: ''; display: block; height: 1.25rem; width: 1.25rem; } .m-range-slider__tooltip, .m-range-slider__value { display: block; left: 50%; pointer-events: none; position: absolute; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .m-range-slider__tooltip { top: -2.875rem; } .m-range-slider__value { top: -1.25rem; } /** * SELECTABLE LIST * ------------------------------------------------------------------- */ .m-selectable-list li:hover, .m-selectable-list li:focus, .m-selectable-list__item--active { background-color: #f3f3f3; } .m-selectable-list li:hover a, .m-selectable-list li:focus a, .m-selectable-list__item--active a { color: #0064b4; } .m-selectable-list li { border-top: 1px solid #949494; transition: background 250ms ease-in-out; } .m-selectable-list li a { text-decoration: none; } .m-selectable-list li a:hover, .m-selectable-list li a:active, .m-selectable-list li a:focus { text-decoration: underline; } .m-selectable-list li:last-child { border-bottom: 1px solid #949494; } /** * SELECTABLE LIST ELEMENTS * ------------------------------------------------------------------- */ .m-selectable-list__item { color: #081f2c; display: block; padding: 1rem 1.5rem; transition: color 250ms ease-in-out; } /** * LINK LIST MODIFIERS * ------------------------------------------------------------------- */ .m-selectable-list--no-border li:first-child { border-top: none; } .m-selectable-list--no-border li:last-child { border-bottom: none; } /** * STEP INDICATOR * ------------------------------------------------------------------- */ .m-step-indicator { display: flex; flex-wrap: wrap; } .m-step-indicator li { color: #081f2c; counter-increment: steps; flex: 0 1 25%; position: relative; text-align: center; } .m-step-indicator li:first-child:nth-last-child(1), .m-step-indicator li:first-child:nth-last-child(2), .m-step-indicator li:first-child:nth-last-child(2) ~ li, .m-step-indicator li:first-child:nth-last-child(3), .m-step-indicator li:first-child:nth-last-child(3) ~ li { flex: 1 1 0; } .m-step-indicator li:first-child:after { content: none; } .m-step-indicator li:before { background-color: #d8d8d8; border: 1px solid #949494; color: #081f2c; content: counter(steps); display: block; font-size: 19.2px; font-weight: 700; height: 2.25rem; margin: 0 auto 1.5rem; padding: 0.5rem 0; text-align: center; width: 2.25rem; } .m-step-indicator li:after { background-color: #949494; content: ''; height: 1px; position: absolute; right: calc(50% + 1.6875rem); top: calc(1.125rem - .5px); width: calc(100% - 3.375rem); } .m-step-indicator li.is-active { color: #081f2c; font-weight: 700; } .m-step-indicator li.is-active:before { background-color: white; border-color: #949494; color: #081f2c; } .m-step-indicator li.is-completed { color: #2b840d; font-weight: 700; } .m-step-indicator li.is-completed:before { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: FontAwesome; font-size: inherit; text-rendering: auto; background-color: #2b840d; border-color: #2b840d; color: white; content: '\f00c'; } .m-step-indicator li.is-completed:after { background-color: #2b840d; height: 2px; top: calc(1.125rem - 1px); } /** * TAGS * ------------------------------------------------------------------- */ .m-tag { background: #f3f3f3; box-shadow: 0 0 0 1px #949494 inset; color: #081f2c; display: inline-flex; height: 2.25rem; line-height: 2.25rem; max-width: 100%; } .m-tag > *:not(.m-tag__label):not(.m-tag__input) { flex-shrink: 0; } .m-tag__label { display: block; font-weight: 700; max-width: 15rem; padding: 0 0.75rem; } .m-tag__input { background-color: transparent; border: none; border-radius: 0; max-width: 15rem; min-height: 2.25rem; padding: 0 0.75rem; } .m-tag__input::-webkit-input-placeholder { color: #6f6f6f; text-overflow: ellipsis; } .m-tag__input:-ms-input-placeholder { color: #6f6f6f; text-overflow: ellipsis; } .m-tag__input::-moz-placeholder { color: #6f6f6f; opacity: 1; text-overflow: ellipsis; } .m-tag__input:-moz-placeholder { color: #6f6f6f; opacity: 1; text-overflow: ellipsis; } .m-tag__input:focus { box-shadow: 0 0 0 2px #c0dffe; } /** * UPLOAD * ------------------------------------------------------------------- */ .m-upload.is-disabled .m-upload__dropzone { border-color: #6f6f6f; cursor: not-allowed; } .m-upload.is-disabled .m-upload__dropzone, .m-upload.is-disabled .m-upload__dropzone:active, .m-upload.is-disabled .m-upload__dropzone:hover, .m-upload.is-disabled .m-upload__dropzone:focus { background-color: #f3f3f3; } .m-upload.is-disabled .m-upload__input { cursor: not-allowed; } .m-upload.is-disabled .m-upload__content { color: #6f6f6f; } /** * UPLOAD ELEMENTS * ------------------------------------------------------------------- */ .m-upload__inner { display: flex; flex-direction: row; } .m-upload__dropzone { align-items: center; background-color: white; border: 2px dashed #0064b4; color: #081f2c; cursor: pointer; display: flex; justify-content: center; min-height: 7.5rem; padding: 2.25rem 1.5rem; position: relative; text-align: center; transition: background 250ms ease-in-out; width: 100%; } .m-upload__dropzone:active, .m-upload__dropzone:hover, .m-upload__dropzone:focus { background-color: #cce0f0; } .m-upload__input { bottom: 0; cursor: pointer; height: 100%; left: 0; opacity: .01; position: absolute; right: 0; top: 0; width: 100%; } .m-upload__input:focus + .m-upload__content:before { content: ''; } .m-upload__content { max-width: 22.5rem; width: 100%; } .m-upload__content:before { bottom: -2px; box-shadow: 0 0 0 3px #c0dffe; cursor: pointer; left: -2px; position: absolute; right: -2px; top: -2px; z-index: -1; } .m-upload__progress { pointer-events: none; } .m-upload__description { display: block; margin-top: 0.75rem; } .m-upload__files { margin-top: 1.5rem; } .m-upload__files > li { background-color: #f3f3f3; color: #081f2c; line-height: 1.3; min-height: 2.25rem; padding: 0.5rem 3rem 0.5rem 3rem; position: relative; } .m-upload__files > li:not(:last-child) { margin-bottom: 0.75rem; } .m-upload__files > li > .fa { left: 1.125rem; position: absolute; top: 1.125rem; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .m-upload__files .m-upload__delete { position: absolute; right: 0; top: 0; } .m-upload__filename, .m-upload__error { display: block; } .m-upload__error { color: #831911; } /** * ORGANISMS * ------------------------------------------------------------------- */ /** * FOOTER * ------------------------------------------------------------------- */ .o-footer { align-items: center; background-color: black; display: flex; flex: 0 0 auto; height: 3rem; justify-content: center; position: relative; text-align: center; } .o-footer__label { color: white; font-size: 0.875rem; line-height: 1.3; padding: 0 0.75rem; } .o-footer__label a { color: inherit; text-decoration: underline; } /** * HEADER * ------------------------------------------------------------------- */ .o-header { background-color: white; border-bottom: 1px solid #949494; box-sizing: content-box; height: 3rem; position: relative; } .o-header *, .o-header *:after, .o-header *:before { box-sizing: border-box; } /** * HEADER LAYOUT * ------------------------------------------------------------------- */ .o-header__content-wrapper { display: flex; flex-wrap: wrap; height: 100%; justify-content: flex-end; } .o-header__content { flex: 1; height: 100%; } .o-header__menu-items { display: flex; justify-content: flex-end; } /** * HEADER ELEMENTS * ------------------------------------------------------------------- */ .o-header__button { background-color: white; color: #6f6f6f; border-left: 1px solid #949494; } .o-header__button:hover, .o-header__button:active, .o-header__button:focus { color: #6f6f6f; text-decoration: none; background-color: #f3f3f3; } .o-header__button:focus { box-shadow: 0 0 0 3px #6f6f6f; } .o-header__button[disabled] { background-color: #f3f3f3; color: #6f6f6f; cursor: not-allowed; } .o-header__button-skip { border-left: none; cursor: default; opacity: 0; position: absolute; -webkit-transform: translateY(-3rem); transform: translateY(-3rem); z-index: 9; } .o-header__button-skip:focus { cursor: pointer; opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .o-header__logo { margin-top: 1px; position: absolute; top: 3rem; } .o-header__logo img { height: 4.5rem; } /** * SLIDESHOW * ------------------------------------------------------------------- */ .o-slideshow { max-height: 37.5rem; } /** * SLIDESHOW ELEMENTS * ------------------------------------------------------------------- */ .o-slideshow__inner { max-height: inherit; position: relative; } .o-slideshow__slides { max-height: inherit; } .o-slideshow__slide { display: none; max-height: inherit; } .o-slideshow__slide.is-active { display: block; } .o-slideshow__image { align-items: center; background-color: black; display: flex; flex-direction: column; justify-content: center; max-height: inherit; position: relative; } .o-slideshow__image .a-image { align-self: center; max-height: inherit; } .o-slideshow__image .a-image img { max-height: inherit; } .o-slideshow__prev, .o-slideshow__next { align-items: center; color: white; cursor: pointer; display: flex; font-size: 2rem; height: calc(100% - 4.5rem); justify-content: center; position: absolute; text-shadow: 0 0 2px rgba(0, 0, 0, 0.75); top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 2.25rem; z-index: 1; } .o-slideshow__prev:before, .o-slideshow__next:before { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: FontAwesome; font-size: inherit; text-rendering: auto; } .o-slideshow__prev { left: 0; } .o-slideshow__prev:before { content: '\f104'; } .o-slideshow__next { right: 0; } .o-slideshow__next:before { content: '\f105'; } .o-slideshow__footer { color: #081f2c; } .o-slideshow__counter { font-weight: 700; margin-right: 0.75rem; } /** * SLIDESHOW MODIFIERS * ------------------------------------------------------------------- */ .o-slideshow--transparent .o-slideshow__image { background-color: transparent; } /** * TAG LIST * ------------------------------------------------------------------- */ .o-tag-list { display: flex; flex-wrap: wrap; margin-bottom: -0.75rem; } .o-tag-list .m-tag { margin-bottom: 0.75rem; } .o-tag-list .m-tag:not(:last-child) { margin-right: 0.75rem; } /** * AUI styling for dynamic components * ------------------------------------------------------------------- */ /** * AUI ANIMATION * ------------------------------------------------------------------- */ /** * AUI COOKIE CONSENT * ------------------------------------------------------------------- */ .cc-banner { background-color: #0064b4; bottom: 0; display: flex; flex-wrap: wrap; left: 0; opacity: 1; position: fixed; right: 0; transition: opacity 250ms ease-in-out; z-index: 10; } .cc-banner.cc-invisible { opacity: 0; } .cc-banner p, .cc-banner .cc-compliance { width: 100%; } .cc-banner p { color: white; flex: 1; margin: 0; padding: 0.75rem 1.5rem; } .cc-banner p a { color: white; opacity: .8; } .cc-banner p a:hover, .cc-banner p a:active, .cc-banner p a:visited { opacity: 1; } .cc-banner .cc-compliance { display: flex; } .cc-banner .button { background: #0091d3; margin: 0; min-width: 9rem; } .cc-banner .button:hover, .cc-banner .button:active, .cc-banner .button:visited { background-color: #005599; } /** * AUI HERO * ------------------------------------------------------------------- */ .o-hero { align-items: center; background: #d8d8d8; display: flex; height: 12rem; } .o-hero__card { flex: 1 1 auto; padding-left: 3rem; } .o-hero__cta { padding-right: 3rem; } /** * AUI ITEM COUNTER * ------------------------------------------------------------------- */ .m-items-per-page .a-input .a-input__wrapper { display: inline-block; margin-right: 0.75rem; } /** * AUI LEAFLET * ------------------------------------------------------------------- */ .o-leaflet { border: 1px solid #949494; display: flex; height: 600px; width: 100%; } .o-leaflet__wrapper { flex: 1; height: 100%; overflow: hidden; position: relative; } .o-leaflet__map { font-family: inherit; font-size: inherit; height: 100%; position: relative; z-index: 1; } .o-leaflet__content { background-color: white; overflow: auto; width: 0; } .o-leaflet__content.has-content { border-right: solid 1px #949494; padding: 1.125rem; width: 300px; } .o-leaflet__controls { position: absolute; z-index: 2; } .o-leaflet__controls--bottom-left { bottom: 1.125rem; left: 1.125rem; } .o-leaflet__controls--bottom-right { bottom: 1.125rem; right: 1.125rem; } .o-leaflet__controls--top-left { left: 1.125rem; top: 1.125rem; } .o-leaflet__controls--top-right { right: 1.125rem; top: 1.125rem; } .o-leaflet__controls--top-left .o-leaflet__control, .o-leaflet__controls--top-right .o-leaflet__control { margin-bottom: 0.375rem; } .o-leaflet__controls--bottom-left .o-leaflet__control, .o-leaflet__controls--bottom-right .o-leaflet__control { margin-top: 0.375rem; } .o-leaflet__controls--bottom-left .o-leaflet__control, .o-leaflet__controls--top-left .o-leaflet__control { margin-right: 0.375rem; } .o-leaflet__controls--bottom-right .o-leaflet__control, .o-leaflet__controls--top-right .o-leaflet__control { margin-left: 0.375rem; } .o-leaflet__control { float: left; } .o-leaflet__zoom-control { display: block; } .o-leaflet__html-icon { background-color: transparent; border: none; } .o-leaflet.is-full-screen { border: none; bottom: 0; height: 100%; left: 0; position: fixed; right: 0; top: 0; z-index: 10; } .o-leaflet.is-full-screen .o-leaflet__content { border: solid 1px #949494; box-shadow: 0.75rem 0.75rem 0 rgba(0, 0, 0, 0.1); left: 1.125rem; max-height: calc(100% - 160px); position: absolute; top: 1.125rem; width: 350px; z-index: 2; } .o-leaflet.is-full-screen .o-leaflet__controls--top-left { left: calc(350px + 2 * 0.75rem); } /** * LEAFLET OVERRIDES */ .leaflet-popup-content-wrapper { border: 1px solid #f3f3f3 !important; border-radius: 0 !important; box-shadow: 0.75rem 0.75rem 0 rgba(0, 0, 0, 0.1) !important; position: relative; } .leaflet-popup-content-wrapper:after { background-color: white; bottom: -1px; content: ''; height: 1px; left: 50%; position: absolute; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 1.5rem; } .leaflet-popup-content { font-size: 14px; margin: 0.75rem !important; } .leaflet-container { font-family: inherit !important; } .leaflet-popup-close-button { right: 0.375rem !important; top: 0.375rem !important; z-index: 1; } /** * AUI PANE * ------------------------------------------------------------------- */ .m-pane { background-color: white; height: 100%; width: 20rem; z-index: 7; } .m-pane__content { height: 100%; overflow-y: scroll; } .m-pane--left, .m-pane--right { position: absolute; transition: -webkit-transform 250ms ease-in-out; transition: transform 250ms ease-in-out; transition: transform 250ms ease-in-out, -webkit-transform 250ms ease-in-out; } .m-pane--left.m-pane--open, .m-pane--right.m-pane--open { -webkit-transform: translate(0); transform: translate(0); } .m-pane--left { -webkit-transform: translate(-100%); transform: translate(-100%); } .m-pane--right { -webkit-transform: translate(100%); transform: translate(100%); } /** * AUI RANGE SLIDER * ------------------------------------------------------------------- */ .m-range-slider__handle { z-index: 2; } .m-range-slider__tooltip { white-space: nowrap; } .m-range-slider__steps { display: flex; justify-content: space-between; left: 0; padding: 0.25rem; position: absolute; right: 0; top: 0; width: 100%; z-index: 1; } .m-range-slider__steps .m-range-slider__step { background-color: #949494; border-radius: 50%; height: 0.75rem; margin: 0.25rem; text-align: center; width: 0.75rem; } .m-range-slider .m-range-slider__step-labels { display: flex; font-size: 14px; justify-content: space-between; margin-top: 1.125rem; } .m-range-slider .m-range-slider__step-labels .m-range-slider__step { width: 1.5rem; } /** * AUI SEARCH FILTER * ------------------------------------------------------------------- */ .m-search-filter__label { background: white; border: 1px solid #949494; cursor: pointer; display: flex; height: 3rem; justify-content: center; line-height: 3rem; margin: 0 0.75rem 0 0; padding-left: 1.5rem; } .m-search-filter__label > span:not(.fa) { margin-left: 0.25rem; } .m-search-filter__label > .fa { color: #6f6f6f; font-size: 1.25rem; height: 3rem; line-height: 3rem; pointer-events: none; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 3rem; } .m-search-filter__label.m-search-filter__label--active { background-color: #081f2c; border-color: #081f2c; color: white; } .m-search-filter__label.m-search-filter__label--active > .fa { color: white; } .m-search-filter__label.m-search-filter__label--error { background-color: #081f2c; border-color: #081f2c; color: white; } .m-search-filter__label.m-search-filter__label--error > .fa { color: white; } .m-search-filter__input { margin-bottom: 0; padding: 0.75rem; } .m-search-filter__input .a-input__wrapper { margin-right: 0; } .m-search-filter__clear { margin: 0; padding: 0 1.125rem 1.125rem; text-align: center; } .m-search-filter__search { display: flex; flex-direction: column; max-height: 50vh; } .m-search-filter__search .a-list.a-list--lined.a-list--unstyled { margin: -1px 0; } .m-search-filter__search.m-search-filter__search--scroll { overflow-y: auto; } .m-search-filter__results-title { font-size: 16px; margin: 0 0.75rem; } .m-search-filter__results-item { cursor: pointer; } .m-search-filter__results-item .a-input__checkbox { display: flex; padding-left: 2.25rem; } .m-search-filter__results-item .a-input__checkbox input[type='checkbox']:checked + label:after { top: 0.75rem; } .m-search-filter__results-item .a-input__checkbox label { flex: 1; padding: 0.75rem; } .m-search-filter__results-item:hover { background-color: #f3f3f3; } .m-search-filter .a-list .m-search-filter__results-item { padding: 0; } /** * AUI SIDEBAR * ------------------------------------------------------------------- */ /** * PANE * ------------------------------------------------------------------- */ .o-sidebar { background-color: white; height: 100%; overflow: hidden; transition: width 250ms ease-in-out; width: 0; } .o-sidebar__content { height: 100%; overflow-x: hidden; overflow-y: auto; width: 20rem; } .o-sidebar__content--padding { padding: 3rem; } .o-sidebar.o-sidebar--open { width: 20rem; } /** * AUI STATUSBAR * ------------------------------------------------------------------- */ .o-statusbar { background: #0064b4; color: white; display: flex; left: 0; min-height: 3rem; position: fixed; right: 0; top: 0; z-index: 8; } .o-statusbar.info { background: #0064b4; } .o-statusbar.error { background: #da291c; } .o-statusbar.warning { background: #f9b01e; } .o-statusbar.success { background: #2b840d; } .o-statusbar__status { align-items: center; background: rgba(0, 0, 0, 0.2); display: flex; justify-content: center; width: 3rem; } .o-statusbar__notification { align-items: center; display: flex; flex: 1; justify-content: center; padding: 0.75rem; } .o-statusbar__notification p { margin: 0; } .o-statusbar__notification a { color: white; } .o-statusbar .a-button { background: rgba(0, 0, 0, 0.2); height: auto; margin: 0; } .o-statusbar .a-button .fa { align-items: center; display: flex; height: 100%; justify-content: center; line-height: initial; } /** * AUI TABLE * ------------------------------------------------------------------- * - Column selector * - Table bar */ /** * COLUMN SELECTOR * ------------------------------------------------------------------- */ .a-table-column-selector { margin: 0 0 -1px; max-height: 70vh; overflow: auto; } .a-table-column-selector__actions { display: flex; flex-direction: column; margin-left: 0.375rem; margin-right: 0; } .a-table-column-selector > li { align-items: center; display: flex; justify-content: space-between; padding: 0; } .a-table-column-selector > li:first-child { border-top: none; } .a-table-column-selector > li:last-child { border-bottom: none; } .a-table-column-selector > li.show { -webkit-animation: fadeIn 250ms ease-in-out; animation: fadeIn 250ms ease-in-out; } .a-table-column-selector > li.active { background-color: #f3f3f3; } .a-table-column-selector > li .a-button-transparent.has-icon[disabled] { box-shadow: none; } /** * TABLE BAR * ------------------------------------------------------------------- */ .a-table-bar { background-color: #d8d8d8; display: flex; padding: 0.75rem; } .a-table-bar__filters { flex: 1; margin-right: 1.5rem; min-height: 3.75rem; overflow: hidden; } .a-table-bar__filters-show-more { margin: 0.375rem; } .a-table-bar__filters--open { height: 100%; } .a-table-bar__item { display: inline-block; margin: 0.375rem; } .a-table-bar__search { background: white; height: 100%; margin: 0.375rem; } /** * AUI TIMEPICKER * ------------------------------------------------------------------- */ .m-timepicker .a-input { display: inline-block; } /** * AUI UPLOAD * ------------------------------------------------------------------- */ .m-upload__button { position: relative; } @use '../quarks/quarks.variables'; .o-menu { background: white; width: 100%; z-index: 7; } .o-menu .o-menu__link, .o-menu .m-nav-list a { white-space: nowrap; } .o-menu .o-menu__link, .o-menu .o-menu__link:active, .o-menu .o-menu__link:link, .o-menu .o-menu__link:hover, .o-menu .m-nav-list a, .o-menu .m-nav-list a:active, .o-menu .m-nav-list a:link, .o-menu .m-nav-list a:hover { color: #6f6f6f; text-decoration: none; } .o-menu > .o-menu__tabs-wrapper { align-content: space-between; align-items: center; background: white; border-top: 1px solid #949494; display: flex; position: relative; width: 100%; z-index: 9; } .o-menu > .o-menu__tabs-wrapper > .o-menu__tab:nth-child(n + 3):not(:last-child) { display: none; } .o-menu > .o-menu__tabs-wrapper > .o-menu__tab:nth-child(n + 3):last-child { display: block; } .o-menu .o-menu__tab { border-right: 1px solid #949494; cursor: pointer; flex-basis: 33%; flex-grow: 1; height: 100%; position: relative; width: 33%; } .o-menu .o-menu__tab:last-child { border-right: none; } .o-menu .o-menu__tab.is-active .o-menu__tab-wrapper { overflow-y: auto; } .o-menu .o-menu__tab.is-active .o-menu__submenu-icon { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .o-menu .o-menu__tab.is-active > .o-menu__tab-wrapper > .o-menu__submenu > .o-menu__submenu-content-wrapper:first-of-type { display: block; max-height: 30rem; overflow: visible; } .o-menu .o-menu__tab > .o-menu__tab-wrapper { overflow: hidden; } .o-menu .o-menu__tab > .o-menu__tab-wrapper:focus-within { background-color: rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 1px #0064b4 inset; color: #0064b4; } .o-menu .o-menu__tab > .o-menu__tab-wrapper:focus-within:hover, .o-menu .o-menu__tab > .o-menu__tab-wrapper:focus-within:active, .o-menu .o-menu__tab > .o-menu__tab-wrapper:focus-within:focus { text-decoration: none; background: #f5f9fc; box-shadow: 0 0 0 1px #005599 inset; } .o-menu .o-menu__tab > .o-menu__tab-wrapper:focus-within:focus { box-shadow: 0 0 0 1px #005aa2 inset, 0 0 0 3px #bfd8ec; } .o-menu .o-menu__tab > .o-menu__tab-wrapper:focus-within[disabled] { background: #f3f3f3; box-shadow: 0 0 0 1px #d8d8d8 inset; color: #6f6f6f; cursor: not-allowed; } .o-menu .o-menu__tab > .o-menu__tab-wrapper > .o-menu__tab-header { background-color: transparent; color: #0064b4; align-items: center; color: #6f6f6f; display: flex; flex-direction: column; font-weight: bold; height: 3.75rem; justify-content: center; text-decoration: none; } .o-menu .o-menu__tab > .o-menu__tab-wrapper > .o-menu__tab-header:hover, .o-menu .o-menu__tab > .o-menu__tab-wrapper > .o-menu__tab-header:active, .o-menu .o-menu__tab > .o-menu__tab-wrapper > .o-menu__tab-header:focus { text-decoration: none; color: #003c6c; } .o-menu .o-menu__tab > .o-menu__tab-wrapper > .o-menu__tab-header:focus { box-shadow: 0 0 0 3px #cce0f0; } .o-menu .o-menu__tab > .o-menu__tab-wrapper > .o-menu__tab-header[disabled] { background: #f3f3f3; box-shadow: 0 0 0 1px #d8d8d8 inset; color: #6f6f6f; cursor: not-allowed; } .o-menu .o-menu__tab > .o-menu__tab-wrapper > .o-menu__tab-header:hover { background-color: #f3f3f3; color: #6f6f6f; } .o-menu .o-menu__tab > .o-menu__tab-wrapper > .o-menu__tab-header .o-menu__tab-title { align-items: center; display: flex; flex-direction: column; text-align: center; } .o-menu .o-menu__tab > .o-menu__tab-wrapper > .o-menu__tab-header .o-menu__icon { font-size: 22px; margin-bottom: 0.375rem; } .o-menu .o-menu__tab > .o-menu__tab-wrapper > .o-menu__tab-header .o-menu__icon.o-menu__tab-icon { width: 28px; } .o-menu .o-menu__tab > .o-menu__tab-wrapper > .o-menu__tab-header .o-menu__icon.o-menu__submenu-icon { display: none; transition: -webkit-transform 150ms ease; transition: transform 150ms ease; transition: transform 150ms ease, -webkit-transform 150ms ease; } .o-menu .o-menu__submenu { display: none; } .o-menu .o-menu__submenu .u-cursor-pointer { cursor: pointer; } .o-menu .o-menu__submenu .o-menu__submenu-content-wrapper { background: white; display: none; max-height: 0; overflow: hidden; transition: max-height ease-in-out 150ms; } .o-menu .o-menu__submenu .o-menu__submenu-content-wrapper .m-nav-list { border: none; } .o-menu .o-menu__submenu .o-menu__submenu-content-wrapper .m-nav-list li { position: relative; } .o-menu .o-menu__submenu .o-menu__submenu-content-wrapper .m-nav-list li > a { border: none #949494; color: #6f6f6f; display: flex; justify-content: space-between; overflow: hidden; white-space: nowrap; } .o-menu .o-menu__submenu .o-menu__submenu-content-wrapper .m-nav-list li > a > .o-menu__icon { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .o-menu .o-menu__submenu .m-nav-list li .o-menu__submenu li > a { padding-left: calc(3rem + 1.5rem); } .o-menu > .o-menu__hide-cta { display: none; } .o-menu > .o-menu__navigation-pane { background: white; max-height: calc(100vh - 3.75rem); position: absolute; top: 0; transition: -webkit-transform 150ms ease; transition: transform 150ms ease; transition: transform 150ms ease, -webkit-transform 150ms ease; width: 100%; z-index: 8; } .o-menu > .o-menu__navigation-pane .o-navigation-pane__overlay { background: rgba(0, 0, 0, 0.75); bottom: 100%; height: 0; opacity: 0; position: absolute; transition: opacity 300ms ease; width: 100vh; } .o-menu > .o-menu__navigation-pane .o-navigation-pane__wrapper { background: white; box-shadow: 0 -0.75rem 0 rgba(0, 0, 0, 0.1); margin-bottom: -1px; max-height: calc(100vh - 3rem - 3.75rem); min-height: 1.5rem; overflow-y: scroll; position: relative; } .o-menu > .o-menu__navigation-pane .o-menu__main-submenu .o-menu__back-link, .o-menu > .o-menu__navigation-pane .o-menu__slide-in-submenu .o-menu__back-link { color: #6f6f6f; font-weight: normal; } .o-menu > .o-menu__navigation-pane .o-menu__main-submenu li > a > .o-menu__icon, .o-menu > .o-menu__navigation-pane .o-menu__slide-in-submenu li > a > .o-menu__icon { float: right; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .o-menu > .o-menu__navigation-pane .o-menu__slide-in-submenu { background: white; bottom: 0; height: 0; left: 0; overflow: hidden; position: absolute; -webkit-transform: translateX(100%); transform: translateX(100%); transition: -webkit-transform 150ms ease; transition: transform 150ms ease; transition: transform 150ms ease, -webkit-transform 150ms ease; width: 100%; } .o-menu > .o-menu__navigation-pane .o-menu__slide-in-submenu.is-visible { height: auto; overflow: inherit; -webkit-transform: translateX(0); transform: translateX(0); } .o-menu > .o-menu__navigation-pane.is-visible { -webkit-transform: translateY(-100%); transform: translateY(-100%); } .o-menu > .o-menu__navigation-pane.is-visible > .o-navigation-pane__overlay { min-height: 100vh; opacity: .8; } @media screen and (min-width: 30rem) { .u-wrapper { padding-left: 4.5rem; } .a-button, .a-button-negative, .a-button-outline, .a-button-transparent, .a-button-official { display: inline-block; vertical-align: middle; width: auto; } .a-button--block { display: block; width: 100%; } .a-toggle { display: inline-block; vertical-align: middle; width: auto; } .m-alert__actions { display: flex; justify-content: flex-end; margin-bottom: 0; } .m-alert__actions [class*='a-button'] { margin-bottom: 0; } .m-alert__actions [class*='a-button']:not(:first-child) { margin-left: 0.75rem; } .m-breadcrumbs li { margin-bottom: 0; } .m-modal { max-width: 25.5rem; } .m-modal__footer { display: flex; margin-bottom: 0; } .m-modal__footer [class*='a-button'] { margin-bottom: 0; } .m-modal__footer [class*='a-button']:not(:first-child) { margin-left: 0.75rem; } .m-modal--large { max-width: 37.5rem; } .cc-banner { flex-wrap: nowrap; } .cc-banner p, .cc-banner .cc-compliance { width: auto; } } @media screen and (min-width: 45rem) { figcaption { padding: 1rem 0.75rem; } .m-flyout--lg .m-flyout__content { width: 30rem; } .m-flyout--md .m-flyout__content { width: 30rem; } .m-nav-tabs { border-top: none; display: flex; flex-wrap: wrap; justify-content: center; } .m-nav-tabs > li > a, .m-nav-tabs > li > button { border-bottom: 3px solid transparent; text-decoration: none; transition-property: border, color; } .m-nav-tabs > li > a:hover, .m-nav-tabs > li > a:active, .m-nav-tabs > li > button:hover, .m-nav-tabs > li > button:active { background-color: transparent; border-color: #0064b4; color: #081f2c; text-decoration: none; } .m-nav-tabs > li > a.is-active, .m-nav-tabs > li > a.is-active:hover, .m-nav-tabs > li > a.is-active:active, .m-nav-tabs > li > button.is-active, .m-nav-tabs > li > button.is-active:hover, .m-nav-tabs > li > button.is-active:active { background-color: transparent; border-color: #0064b4; color: #0064b4; text-decoration: none; } .m-nav-tabs > li > a.is-disabled, .m-nav-tabs > li > a.is-disabled:hover, .m-nav-tabs > li > a.is-disabled:active, .m-nav-tabs > li > button.is-disabled, .m-nav-tabs > li > button.is-disabled:hover, .m-nav-tabs > li > button.is-disabled:active { background-color: transparent; border-color: transparent; } .m-nav-tabs--left { justify-content: flex-start; } .m-nav-tabs--right { justify-content: flex-end; } .m-step-indicator li:before { margin: 0 auto 0.75rem; } .m-step-indicator li { flex: 1 1 0; } .o-footer .o-footer__button { bottom: 0; position: absolute; right: 0; } .o-footer__label { font-size: 0.875rem; padding: 0 3.75rem; } .o-slideshow__prev, .o-slideshow__next { font-size: 2.5rem; width: 3.75rem; } .o-statusbar__notification { padding: 0.75rem 2.25rem; } .o-menu { border-right: 1px solid #949494; min-width: 15rem; overflow-x: hidden; overflow-y: auto; position: initial; top: 0; transition: width min-width ease-in-out 150ms; width: 15rem; } .o-menu a { border: none; } .o-menu.is-docked { min-width: 3rem; overflow: visible; width: 3rem; } .o-menu.is-docked .o-menu__tabs-wrapper { box-shadow: none; } .o-menu.is-docked .o-menu__tab { width: calc(3rem - 1px); } .o-menu.is-docked .o-menu__tab .o-menu__tab-wrapper:not(.is-active) { overflow: hidden; } .o-menu.is-docked .o-menu__submenu { left: 3rem; position: absolute; top: -1px; } .o-menu.is-docked .o-menu__submenu .o-menu__submenu { left: 100%; } .o-menu.is-docked .o-menu__submenu .o-menu__submenu-content-wrapper { box-shadow: 0.75rem 0.75rem 0 rgba(0, 0, 0, 0.1); max-height: inherit; transition: width ease-in-out; width: 0; } .o-menu.is-docked .o-menu__submenu .o-menu__submenu-content-wrapper .m-nav-list { border: 1px solid #949494; border-bottom: none; border-left: none; } .o-menu.is-docked .o-menu__submenu .o-menu__submenu-content-wrapper .m-nav-list .m-nav-list { border-left: 1px solid #949494; } .o-menu.is-docked .o-menu__submenu .o-menu__submenu-content-wrapper .m-nav-list li .o-menu__icon { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .o-menu.is-docked .o-menu__submenu .o-menu__submenu-content-wrapper .m-nav-list li a { border-bottom: 1px solid #949494; padding-left: 0.75rem; } .o-menu.is-docked .o-menu__submenu .o-menu__submenu-content-wrapper { width: 15rem; } .o-menu > .o-menu__tabs-wrapper > .o-menu__tab:nth-child(n + 3):not(:last-child) { display: block; } .o-menu > .o-menu__tabs-wrapper > .o-menu__tab:nth-child(n + 3):last-child { display: none; } .o-menu > .o-menu__tabs-wrapper { flex-direction: column; height: auto; width: auto; z-index: 6; } .o-menu .o-menu__tab { border-bottom: 1px solid #949494; border-right: none; width: 100%; } .o-menu .o-menu__tab > .o-menu__tab-wrapper > .o-menu__tab-header .o-menu__icon.o-menu__submenu-icon { display: inline; } .o-menu .o-menu__tab > .o-menu__tab-wrapper > .o-menu__tab-header .o-menu__icon { margin-bottom: 0; } .o-menu .o-menu__tab > .o-menu__tab-wrapper > .o-menu__tab-header { align-items: center; flex-direction: row; height: 3rem; justify-content: space-between; padding: 0.75rem; position: relative; } .o-menu .o-menu__tab > .o-menu__tab-wrapper > .o-menu__tab-header .o-menu__link { margin-left: 1.125rem; } .o-menu .o-menu__tab > .o-menu__tab-wrapper > .o-menu__tab-header .o-menu__tab-title { align-items: center; display: flex; flex-direction: row; } .o-menu .o-menu__submenu .o-menu__submenu-content-wrapper .m-nav-list li > a { padding-left: calc(3rem + 0.75rem); padding-right: 0.375rem; } .o-menu .o-menu__submenu .o-menu__submenu-content-wrapper .m-nav-list li > a a { border: none; } .o-menu .o-menu__submenu .o-menu__submenu-content-wrapper li > a > .o-menu__icon { margin-right: 0.375rem; -webkit-transform: rotate(0deg); transform: rotate(0deg); transition: -webkit-transform 150ms ease-in-out; transition: transform 150ms ease-in-out; transition: transform 150ms ease-in-out, -webkit-transform 150ms ease-in-out; } .o-menu .o-menu__submenu .o-menu__submenu-content-wrapper li.is-active > .o-menu__submenu > .o-menu__submenu-content-wrapper { display: block; max-height: 30rem; overflow: visible; } .o-menu .o-menu__submenu .o-menu__submenu-content-wrapper li.is-active > a > .o-menu__icon { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .o-menu .o-menu__submenu { display: block; } .o-menu > .o-menu__hide-cta { display: block; margin: 1.125rem; text-align: right; } .o-menu > .o-menu__hide-cta > a { text-decoration: none; } .o-menu > .o-menu__navigation-pane { display: none; } } @media screen and (min-width: 62rem) { .m-flyout--lg .m-flyout__content { width: 45rem; } .o-slideshow__prev.o-slideshow__prev--outside { left: -4.5rem; } .o-slideshow__next.o-slideshow__next--outside { right: -4.5rem; } .o-statusbar__notification { padding: 0.75rem 3rem; } } @media screen and (min-width: 75rem) { .o-statusbar__notification { padding: 0.75rem 6rem; } } @media screen and (min-width: 90rem) { .u-wrapper { margin: 0 auto; padding: 0; } } @media screen and (max-width: 45rem) { .m-step-indicator li .m-step-indicator__label { display: none; } .m-step-indicator li:nth-child(4n+1):after { content: none; } .m-step-indicator li:nth-last-child(-n+4):before { margin-bottom: 0; } .o-footer__label { flex: 1 1 auto; } } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }