/** * Copyright 2012-2026 ShopeX (https://www.shopex.cn) * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ @charset "UTF-8"; meta.mobile-mq-small { font-family: "/only screen/"; width: 0; } meta.mobile-mq-small-only { font-family: "/only screen and (max-width: 40em)/"; width: 0; } meta.mobile-mq-medium { font-family: "/only screen and (min-width:40.0625em)/"; width: 40.0625em; } meta.mobile-mq-medium-only { font-family: "/only screen and (min-width:40.0625em) and (max-width:64em)/"; width: 40.0625em; } meta.mobile-data-attribute-namespace { font-family: false; } /* Global */ html, body { min-height: 100vh; background-color: #FFFFFF; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html { font-size: 100%; } *, *::before, *::after { box-sizing: border-box; } body { color: #222222; font: 400 0.75em/1.5 sans-serif; margin: 0; padding: 0; position: relative; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: transparent; } img { max-width: 100%; height: auto; } img { display: inline-block; vertical-align: middle; } textarea { height: auto; min-height: 50px; } select { width: 100%; } .left { float: left; } .right { float: right; } .clearfix::after, .container::after, [class*="block-grid-"]::after, .sticky::after, .tabs::after, .tabs-content::after { content: ""; display: table; clear: both; } .hide { display: none !important; } .invisible { opacity: 0; visibility: hidden; } /* Grid */ .container { margin: 0.625rem auto; max-width: 40rem; } .container.no-margin { margin-top: 0; margin-bottom: 0; } .container.blank { margin-left: 1rem; margin-right: 1rem; } .container.blank-inset { padding-left: 1rem; padding-right: 1rem; } .row { display: -webkit-box; display: -webkit-flex; display: flex; margin-left: auto; margin-right: auto; max-width: 40rem; } .row.blank { margin-left: 1rem; margin-right: 1rem; } .row .row { margin-left: -0.1875rem; margin-right: -0.1875rem; max-width: none; width: auto; } .row .row.collapse { margin-left: 0; margin-right: 0; max-width: none; width: auto; } .columns { position: relative; padding-left: 0.1875rem; padding-right: 0.1875rem; width: 100%; } .row.collapse > .columns { padding-left: 0; padding-right: 0; } .row.collapse .columns .row { margin-left: 0; margin-right: 0; } .row.sides-collapse > .columns:first-child { padding-left: 0; } .row.sides-collapse > .columns:last-child { padding-right: 0; } .row.sides-collapse .columns:first-child .row { margin-left: 0; } .row.sides-collapse .columns:first-child .row .columns:first-child { padding-left: 0; } .row.sides-collapse .columns:last-child .row { margin-right: 0; } .row.sides-collapse .columns:last-child .row .columns:last-child { padding-right: 0; } .column { padding-left: 0; padding-right: 0; } .grid-1 { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; } .grid-2 { width: 16.666667%; } .grid-3 { width: 25%; } .grid-4 { width: 33.333333%; } .grid-5 { width: 41.666667%; } .grid-6 { width: 50%; } .grid-7 { width: 58.333333%; } .grid-8 { width: 66.666667%; } .grid-9 { width: 75%; } .grid-10 { width: 83.333333%; } .grid-11 { width: 91.666667%; } .grid-12 { width: 100%; } .row > [class^="grid-"], .row > [class*=" grid-"] { display: block; } .offset-0 { margin-left: 0 !important; } .offset-1 { margin-left: 8.333333% !important; } .offset-2 { margin-left: 16.666667% !important; } .offset-3 { margin-left: 25% !important; } .offset-4 { margin-left: 33.333333% !important; } .offset-5 { margin-left: 41.666667% !important; } .offset-6 { margin-left: 50% !important; } .offset-7 { margin-left: 58.333333% !important; } .offset-8 { margin-left: 66.666667% !important; } .offset-9 { margin-left: 75% !important; } .offset-10 { margin-left: 83.333333% !important; } .offset-11 { margin-left: 91.666667% !important; } [class*="block-grid-"] { display: block; margin: 0; } [class*="block-grid-"] > li { float: left; padding: 0.375rem; height: auto; list-style: none; } .block-grid-1 > li { width: 100%; } .block-grid-2 > li { width: 50%; } .block-grid-3 > li { width: 33.333333%; } .block-grid-4 > li { width: 25%; } .block-grid-5 > li { width: 20%; } .block-grid-6 > li { width: 16.666667%; } .block-grid-7 > li { width: 14.285714%; } .block-grid-8 > li { width: 12.5%; } .block-grid-9 > li { width: 11.111111%; } .block-grid-10 > li { width: 10%; } .block-grid-11 > li { width: 9.090909%; } .block-grid-12 > li { width: 8.333333%; } .block-grid-13 > li { width: 33%; text-align:center; padding:0px; } .block-grid-13 > li.wire { width:1px; font-size:0px; } /* Typography */ .text-left { text-align: left !important; } .text-right { text-align: right !important; } .text-center { text-align: center !important; } .text-justify { text-align: justify !important; } /* Typography resets */ dl, dd, ul, ol, p, figure { margin: 0; padding: 0; } /* Default Link Styles */ a { color: #586C94; line-height: inherit; text-decoration: none; } a:hover, a:focus { color: #4c5d7f; } a img { border: none; } /* Default paragraph styles */ p { font-weight: 400; line-height: 1.6; margin-bottom: 1rem; text-rendering: optimizeLegibility; } p.lead { font-size: 0.9375rem; line-height: 1.6; } /* Default header styles */ h1, h2, h3, h4, h5, h6 { color: #222222; font-weight: 400; line-height: 1.5; margin-bottom: 0.5rem; margin-top: 0.2rem; text-rendering: optimizeLegibility; } h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { color: #6f6f6f; font-size: 83.33333%; line-height: 0; } h1 { font-size: 1.125rem; } h2 { font-size: 1rem; } h3 { font-size: 0.9375rem; } h4 { font-size: 0.875rem; } h5 { font-size: 0.8125rem; } h6 { font-size: 0.75rem; } .subheader { line-height: 1.4; color: #6f6f6f; font-weight: 400; margin-top: 0.1875rem; margin-bottom: 0.5rem; } hr { border-top: 1px solid #DCDCDC; clear: both; height: 0; margin: 1.25rem 0 1.1875rem; } /* Helpful Typography Defaults */ em, i { font-style: normal; line-height: inherit; } strong, b { font-weight: 700; line-height: inherit; } small, .text-small { font-size: 83.33333%; line-height: inherit; } code, pre { background-color: #f8f8f8; border: 1px solid #dfdfdf; color: #333333; font-family: Consolas, Liberation Mono, Courier, monospace; font-weight: 400; padding: 0.125rem 0.3125rem 0.0625rem; } pre { overflow: auto; } /* Lists */ ul, ol, dl { font-size: 0.75rem; line-height: 1.6; list-style-position: outside; margin-bottom: 1rem; } ul { margin-left: 1.125rem; } /* Unordered Lists */ ul li ul, ul li ol { margin-left: 1.25rem; margin-bottom: 0; } ul.square { list-style-type: square; margin-left: 1.125rem; } ul.circle { list-style-type: circle; margin-left: 1.125rem; } ul.disc { list-style-type: disc; margin-left: 1.125rem; } /* Ordered Lists */ ol { margin-left: 1.375rem; } ol li ul, ol li ol { margin-left: 1.25rem; margin-bottom: 0; } .no-bullet { list-style-type: none; margin-left: 0; } .no-bullet li ul, .no-bullet li ol { margin-left: 1.25rem; margin-bottom: 0; list-style: none; } .no-bullet .divider { height: 1px; background-color: #EFEFEF; overflow: hidden; margin: 0.625rem 0; } /* Definition Lists */ dl dt { margin-bottom: 0.3125rem; font-weight: 700; } dl dd { margin-bottom: 0.75rem; } /* Blockquotes */ blockquote { margin: 0 0 1rem; padding: 0.5625rem 1.25rem 0 1.1875rem; border-left: 2px solid #D3D3D3; } blockquote cite { display: block; font-size: 0.8125rem; color: #555555; } blockquote cite::before { content: "\2014 \0020"; } blockquote cite a, blockquote cite a:visited { color: #555555; } blockquote, blockquote p { line-height: 1.6; color: #6f6f6f; } .text-primary { color: #1AAD19; } .text-success { color: #43AC6A; } .text-alert { color: #F04124; } .text-warning { color: #E64340; } .text-info { color: #A0D3E8; } .text-secondary { color: #E7E7E7; } .text-reverse { color: #999999; } .nowrap { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ellipsis.line-2 { display: -webkit-box; word-wrap: break-word; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .ellipsis.line-3 { display: -webkit-box; word-wrap: break-word; white-space: normal; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .animated { -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.faster { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; } .animated.fast { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; } .animated.normal { -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } .animated.slow { -webkit-animation-duration: 1s; animation-duration: 1s; } .animated.slower { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fade-in { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .fade-out { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes circle { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -360deg); transform: rotate3d(0, 0, 1, -360deg); } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; } } @keyframes circle { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -360deg); transform: rotate3d(0, 0, 1, -360deg); } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; } } .circle { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-name: circle; animation-name: circle; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } /* Icons */ @font-face { font-family: "icons"; src: url("../fonts/icons.woff?v=e3e1ce9a58") format("woff"), url("../fonts/icons.ttf?v=e3e1ce9a58") format("truetype"), url("../fonts/icons.svg?v=e3e1ce9a58#svg") format("svg"); font-weight: 400; font-style: normal; } .icon::before, .icon-arrow-back::before, .icon-arrow-down::before, .icon-arrow-forward::before, .icon-arrow-up::before, .icon-arrow-updown::before, .icon-barcode::before, .icon-cog::before, .icon-home::before, .icon-info::before, .icon-location::before, .icon-lock::before, .icon-man::before, .icon-order::before, .icon-package::before, .icon-panel::before, .icon-paper::before, .icon-password::before, .icon-refresh::before, .icon-replace::before, .icon-return::before, .icon-search::before, .icon-shop::before, .icon-spanner::before, .icon-spinner::before, .icon-trunk::before, .icon-user::before, .icon-woman::before { display: inline-block; min-width: 1em; vertical-align: 0; line-height: 1; font-family: "icons"; font-variant: normal; -webkit-font-smoothing: antialiased; text-transform: none; text-rendering: auto; speak: none; } .icon-arrow-back::before { content: "⠁"; } .icon-arrow-down::before { content: "⠂"; } .icon-arrow-forward::before { content: "⠃"; } .icon-arrow-up::before { content: "⠄"; } .icon-arrow-updown::before { content: "⠅"; } .icon-barcode::before { content: "⠆"; } .icon-cog::before { content: "⠇"; } .icon-home::before { content: "⠈"; } .icon-info::before { content: "⠉"; } .icon-location::before { content: "⠊"; } .icon-lock::before { content: "⠋"; } .icon-man::before { content: "⠌"; } .icon-order::before { content: "⠍"; } .icon-package::before { content: "⠎"; } .icon-panel::before { content: "⠏"; } .icon-paper::before { content: "⠐"; } .icon-password::before { content: "⠑"; } .icon-refresh::before { content: "⠒"; } .icon-replace::before { content: "⠓"; } .icon-return::before { content: "⠔"; } .icon-search::before { content: "⠕"; } .icon-shop::before { content: "⠖"; } .icon-spanner::before { content: "⠗"; } .icon-spinner::before { content: "⠘"; } .icon-trunk::before { content: "⠙"; } .icon-user::before { content: "⠚"; } .icon-woman::before { content: "⠛"; } /* Tables */ table { background: #FFFFFF; border: solid 1px #DCDCDC; margin-bottom: 1.25rem; table-layout: auto; } table caption { background: transparent; color: #222222; font-size: 1rem; font-weight: bold; } table thead { background: #F5F5F5; } table thead tr th, table thead tr td { color: #222222; font-size: 0.875rem; font-weight: 700; padding: 0.5rem 0.625rem 0.625rem; } table tfoot { background: #F5F5F5; } table tfoot tr th, table tfoot tr td { color: #222222; font-size: 0.875rem; font-weight: 700; padding: 0.5rem 0.625rem 0.625rem; } table tr th, table tr td { color: #222222; font-size: 0.875rem; padding: 0.25rem; text-align: left; } table tr.even, table tr.alt, table tr:nth-of-type(even) { background: #F9F9F9; } table thead tr th, table tfoot tr th, table tfoot tr td, table tbody tr th, table tbody tr td, table tr td { line-height: 1.125rem; } .table { display: table; width: 100%; table-layout: auto; border-collapse: collapse; } .table .col { display: table-column; } .table .caption { display: table-caption; } .table > .thead { display: table-header-group; } .table > .tbody { display: table-row-group; } .table > .tfoot { display: table-footer-group; } .table .tr { display: table-row; } .table .th, .table .td { display: table-cell; } .table .th { font-weight: bold; text-align: center; } .table.bordered { border-top: solid 1px #DCDCDC; border-bottom: solid 1px #DCDCDC; } .table.bordered .th, .table.bordered .td { border-bottom: solid 1px #DCDCDC; border-left: solid 1px #DCDCDC; } .table.bordered .th:first-child, .table.bordered .td:first-child { border-left: 0; } .table.grid-table { background: #FFFFFF; } .table.grid-table .thead { background-color: #F5F5F5; } .table.grid-table .thead .th, .table.grid-table .thead .td { color: #222222; font-size: 0.875rem; font-weight: 700; padding: 0.5rem 0.625rem 0.625rem; } .table.grid-table .th { background-color: #F5F5F5; } .table.grid-table .th, .table.grid-table .td { color: #222222; font-size: 0.875rem; padding: 0.25rem; } /* Buttons */ button, .btn { display: inline-block; -webkit-appearance: none; appearance: none; position: relative; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0.3125rem; font-weight: 400; padding: 0.25rem 0.875rem; font-size: 1.125rem; line-height: 2; background-color: #F8F8F8; color: black; -webkit-transition: background-color 300ms ease-out; transition: background-color 300ms ease-out; } button:hover, button:focus, .btn:hover, .btn:focus { background-color: #ececec; } button.primary, .btn.primary { background-color: #1AAD19; color: white; } button.primary:hover, button.primary:focus, .btn.primary:hover, .btn.primary:focus { background-color: #179B16; } button.primary.outline, .btn.primary.outline { border-color: #1AAD19; color: #1AAD19; } button.secondary, .btn.secondary { background-color: #E7E7E7; color: black; } button.secondary:hover, button.secondary:focus, .btn.secondary:hover, .btn.secondary:focus { background-color: #dbdbdb; } button.secondary.outline, .btn.secondary.outline { border-color: #E7E7E7; color: #E7E7E7; } button.success, .btn.success { background-color: #43AC6A; color: white; } button.success:hover, button.success:focus, .btn.success:hover, .btn.success:focus { background-color: #40a365; } button.success.outline, .btn.success.outline { border-color: #43AC6A; color: #43AC6A; } button.alert, .btn.alert { background-color: #F04124; color: white; } button.alert:hover, button.alert:focus, .btn.alert:hover, .btn.alert:focus { background-color: #ef3617; } button.alert.outline, .btn.alert.outline { border-color: #F04124; color: #F04124; } button.warning, .btn.warning { background-color: #E64340; color: white; } button.warning:hover, button.warning:focus, .btn.warning:hover, .btn.warning:focus { background-color: #CE3C39; } button.warning.outline, .btn.warning.outline { border-color: #E64340; color: #E64340; } button.info, .btn.info { background-color: #A0D3E8; color: black; } button.info:hover, button.info:focus, .btn.info:hover, .btn.info:focus { background-color: #90cce4; } button.info.outline, .btn.info.outline { border-color: #A0D3E8; color: #A0D3E8; } button.outline, .btn.outline { background-color: #FFFFFF; border-color: #353535; color: #353535; } button.outline:hover, button.outline:focus, .btn.outline:hover, .btn.outline:focus { background-color: #f2f2f2; color: black; } button.large, .btn.large { padding: 0.5625rem 1.875rem; font-size: 1.0625rem; line-height: 2; } button.small, .btn.small { padding: 0 1.0625rem; font-size: 0.8125rem; line-height: 2.153846; } button.tiny, .btn.tiny { padding: 0.1875rem 0.375rem; font-size: 0.75rem; line-height: 1.5; } button.expand, .btn.expand { display: block; width: 100%; text-align: center; } button.expand + .expand, .btn.expand + .expand { margin-bottom: 15px; } button.flat, .btn.flat { border-radius: 0; } button.rounded, .btn.rounded { border-radius: 1000px; } button[class^=icon-]::before, .btn[class^=icon-]::before { margin-right: 0.375em; } button:disabled, .btn.disabled { background-color: #F7F7F7; color: rgba(0, 0, 0, 0.6); } button:disabled:hover, button:disabled:focus, .btn.disabled:hover, .btn.disabled:focus { background-color: #F7F7F7; } button:disabled.primary, .btn.disabled.primary { background-color: #1AAD19; background-color: #9ED99D; color: rgba(255, 255, 255, 0.6); } button:disabled.primary:hover, button:disabled.primary:focus, .btn.disabled.primary:hover, .btn.disabled.primary:focus { background-color: #179B16; } button:disabled.primary:hover, button:disabled.primary:focus, .btn.disabled.primary:hover, .btn.disabled.primary:focus { background-color: #9ED99D; } button:disabled.secondary, .btn.disabled.secondary { background-color: #E7E7E7; color: rgba(0, 0, 0, 0.6); } button:disabled.secondary:hover, button:disabled.secondary:focus, .btn.disabled.secondary:hover, .btn.disabled.secondary:focus { background-color: #dbdbdb; } button:disabled.secondary:hover, button:disabled.secondary:focus, .btn.disabled.secondary:hover, .btn.disabled.secondary:focus { background-color: #E7E7E7; } button:disabled.success, .btn.disabled.success { background-color: #43AC6A; color: rgba(255, 255, 255, 0.6); } button:disabled.success:hover, button:disabled.success:focus, .btn.disabled.success:hover, .btn.disabled.success:focus { background-color: #40a365; } button:disabled.success:hover, button:disabled.success:focus, .btn.disabled.success:hover, .btn.disabled.success:focus { background-color: #43AC6A; } button:disabled.alert, .btn.disabled.alert { background-color: #F04124; color: rgba(255, 255, 255, 0.6); } button:disabled.alert:hover, button:disabled.alert:focus, .btn.disabled.alert:hover, .btn.disabled.alert:focus { background-color: #ef3617; } button:disabled.alert:hover, button:disabled.alert:focus, .btn.disabled.alert:hover, .btn.disabled.alert:focus { background-color: #F04124; } button:disabled.warning, .btn.disabled.warning { background-color: #E64340; background-color: #EC8B89; color: rgba(255, 255, 255, 0.6); } button:disabled.warning:hover, button:disabled.warning:focus, .btn.disabled.warning:hover, .btn.disabled.warning:focus { background-color: #CE3C39; } button:disabled.warning:hover, button:disabled.warning:focus, .btn.disabled.warning:hover, .btn.disabled.warning:focus { background-color: #EC8B89; } button:disabled.info, .btn.disabled.info { background-color: #A0D3E8; color: rgba(0, 0, 0, 0.6); } button:disabled.info:hover, button:disabled.info:focus, .btn.disabled.info:hover, .btn.disabled.info:focus { background-color: #90cce4; } button:disabled.info:hover, button:disabled.info:focus, .btn.disabled.info:hover, .btn.disabled.info:focus { background-color: #A0D3E8; } button.link, .btn.link { background: transparent; border: 0 none; color: inherit; } button.link:hover, .btn.link:hover { background: transparent; } a.btn { text-decoration: none; } /* Alert boxes */ .alert-box { display: block; position: relative; margin-bottom: 1.25rem; padding: 0.625rem 1.375rem 0.625rem 0.625rem; border-style: 1px solid; font-size: 0.8125rem; font-weight: 400; -webkit-transition: opacity 300ms ease-out; transition: opacity 300ms ease-out; background-color: #1AAD19; border-color: #169516; color: #FFFFFF; border-radius: false; } .alert-box .close { position: absolute; top: 50%; right: 0.25rem; -webkit-transform: translateY(-50%); transform: translateY(-50%); padding: 0 0.25rem; margin-top: -0.1875rem; opacity: 0.4; line-height: 1; font-size: 1.875rem; color: #333333; } .alert-box.radius { border-radius: 0.3125rem; } .alert-box.round { border-radius: 1000px; } .alert-box.success { background-color: #43AC6A; border-color: #3a945b; color: #FFFFFF; } .alert-box.alert, .alert-box.error { background-color: #F04124; border-color: #de2d0f; color: #FFFFFF; } .alert-box.secondary { background-color: #E7E7E7; border-color: #c7c7c7; color: #4f4f4f; } .alert-box.warning { background-color: #E64340; border-color: #e0211d; color: #FFFFFF; } .alert-box.info { background-color: #A0D3E8; border-color: #74bfdd; color: #4f4f4f; } .alert-box.alert-close { opacity: 0; } input, textarea, select { -webkit-appearance: none; appearance: none; border-radius: 0; display: block; padding: 0.1875rem 0.375rem; width: 100%; height: 2.75rem; background-color: #FFFFFF; border: 1px solid #cccccc; box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.05); line-height: 1.21428; font-size: 0.875rem; color: rgba(0, 0, 0, 0.75); -webkit-transition: box-shadow 0.4s ease-in-out, border-color 0.4s ease-in-out; transition: box-shadow 0.4s ease-in-out, border-color 0.4s ease-in-out; } input:focus, textarea:focus, select:focus { border-color: rgba(163, 163, 163, 0.9); box-shadow: 0 0 5px rgba(163, 163, 163, 0.9); } input:focus, textarea:focus, select:focus { outline: none; } input:disabled, input[readonly], [disabled] input, textarea:disabled, textarea[readonly], [disabled] textarea, select:disabled, select[readonly], [disabled] select { background-color: #DCDCDC; } input.small, textarea.small, select.small { height: 2.125rem; } input.large, textarea.large, select.large { height: 3.125rem; } input.radius, textarea.radius, select.radius { border-radius: 0.3125rem; } input.rounded, textarea.rounded, select.rounded { border-radius: 1000px; padding-left: 0.75rem; } input.underline, textarea.underline, select.underline { border-width: 0 0 1px 0; box-shadow: 0 0 0 0 transparent; } input.rounded, textarea.rounded { padding-right: 0.75rem; } textarea { max-width: 100%; } textarea[rows] { height: auto; } ::-webkit-input-placeholder { color: #999999; } ::placeholder { color: #999999; } select { background: #FFFFFF url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeD0iMCIgeT0iMCIgd2lkdGg9IjI0cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgMjQgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cG9seWdvbiBwb2ludHM9IjguNSwwIDEyLDMgMTUuNSwwIi8+DQo8L3N2Zz4NCg==) 100% 50% no-repeat; padding-right: 1.125rem; } select[multiple] { height: auto; } input[type="submit"] { -webkit-appearance: none; appearance: none; border-radius: 0; } .input-group { line-height: 2.75rem; } input[type="radio"], input[type="checkbox"] { display: inline-block; position: relative; margin: 0.1875rem 0; padding: 0; width: 1.5rem; height: 1.5rem; border-radius: 1000px; vertical-align: middle; } input[type="radio"]::before, input[type="checkbox"]::before { position: absolute; } input[type="radio"]:checked, input[type="checkbox"]:checked { border-color: #1AAD19; } input[type="radio"]:checked::before, input[type="checkbox"]:checked::before { content: ""; color: #1AAD19; } input[type="radio"]:checked:focus, input[type="checkbox"]:checked:focus { box-shadow: 0 0 5px rgba(26, 173, 25, 0.7); } input[type="radio"]:disabled, input[type="checkbox"]:disabled { opacity: 0.5; } input[type="radio"]:disabled::before, input[type="checkbox"]:disabled::before { opacity: 0.5; } input[type="radio"]:checked::before { top: 0.25rem; left: 0.25rem; width: 0.875rem; height: 0.875rem; background-color: #1AAD19; border-radius: 1000px; } input[type="radio"]:disabled { border-color: #cccccc; } input[type="checkbox"]:checked { background-color: #1AAD19; } input[type="checkbox"]:checked::before { top: 0.375rem; left: 0.25rem; width: 0.875rem; height: 0.4375rem; border-left: 0.125rem solid #FFFFFF; border-bottom: 0.125rem solid #FFFFFF; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } input[type="radio"] + label, input[type="checkbox"] + label { display: inline-block; margin-left: 0.375rem; margin-right: 0.375rem; } input[type="file"] { width: 100%; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; } label { color: #4d4d4d; display: block; font-size: 0.875rem; font-weight: 400; line-height: 1.5; } label.right { text-align: right; } label.inline { margin: 0 0 0.75rem 0; padding: 0.4375rem 0; } label small { color: #676767; } fieldset { border: 1px solid #DCDCDC; margin: 0.625rem 0; padding: 0.625rem; } fieldset legend { background: #FFFFFF; font-weight: 700; margin: 0 0 0 -0.1875rem; padding: 0 0.3125rem; } form { margin: 0 1rem 0.625rem; } form.collapse { margin: 0; } .form-row { display: -webkit-box; display: -webkit-flex; display: flex; margin-bottom: 0.625rem; } .form-row > :not(input).columns:first-child { padding-left: 0; } .form-row > :not(input).columns:last-child { padding-right: 0; } .form-row button, .form-row .btn { margin-bottom: 0; } form .row > select.columns, form .row > input.columns, form .row > textarea.columns, .form-row > select.columns, .form-row > input.columns, .form-row > textarea.columns { padding-left: 0.375rem; padding-right: 0.375rem; margin-left: 0.1875rem; } .form-inline label { line-height: 2.75rem; } .prefix, .postfix { display: block; position: relative; padding-bottom: 0; padding-top: 0; border: 1px solid; height: 2.75rem; line-height: 2.75rem; font-size: 0.875rem; text-align: center; border-color: #cccccc; background: #f2f2f2; color: #333333; } .prefix.btn, .postfix.btn { padding: 0; border-color: rgba(0, 0, 0, 0.2); border-radius: 0; margin-bottom: 0; } .prefix.btn.primary, .postfix.btn.primary { background-color: #1AAD19; } .prefix [class^=icon-], .postfix [class^=icon-] { font-size: 1.5rem; } .prefix { border-right: none; } .prefix.btn.rounded { border-radius: 1000px 0 0 1000px; } .postfix { border-left: none; } .postfix.btn.rounded { border-radius: 0 1000px 1000px 0; } .prefix-radius input, .prefix-radius textarea, .prefix-radius select, .prefix-radius button { border-bottom-right-radius: 0.3125rem; border-top-right-radius: 0.3125rem; } .prefix-radius .prefix { border-bottom-left-radius: 0.3125rem; border-top-left-radius: 0.3125rem; } .postfix-radius input, .postfix-radius textarea, .postfix-radius select, .postfix-radius button { border-bottom-left-radius: 0.3125rem; border-top-left-radius: 0.3125rem; } .postfix-radius .postfix { border-bottom-right-radius: 0.3125rem; border-top-right-radius: 0.3125rem; } .prefix-rounded input, .prefix-rounded textarea, .prefix-rounded select, .prefix-rounded button { border-bottom-right-radius: 1000px; border-top-right-radius: 1000px; } .prefix-rounded .prefix { border-bottom-left-radius: 1000px; border-top-left-radius: 1000px; } .postfix-rounded input, .postfix-rounded textarea, .postfix-rounded select, .postfix-rounded button { border-bottom-left-radius: 1000px; border-top-left-radius: 1000px; } .postfix-rounded .postfix { border-bottom-right-radius: 1000px; border-top-right-radius: 1000px; } .switch { border: none; margin-bottom: 0.625rem; outline: 0; padding: 0; position: relative; -webkit-user-select: none; user-select: none; } .switch label { display: block; position: relative; width: 4rem; height: 2rem; background-color: white; border: 1px solid #DCDCDC; color: transparent; text-indent: 100%; -webkit-transition: left 0.15s ease-out, background 0.15s ease-out, border 0.15s ease-out; transition: left 0.15s ease-out, background 0.15s ease-out, border 0.15s ease-out; } .switch input { position: absolute; opacity: 0; } .switch input + label { margin-left: 0; margin-right: 0; } .switch label::before { content: ""; display: block; position: absolute; left: 0; top: 0; width: 1.875rem; height: 1.875rem; background-color: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); -webkit-transition: left 0.15s ease-out; transition: left 0.15s ease-out; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .switch input:checked + label::before { left: 2rem; } .switch label { height: 2rem; width: 4rem; } .switch label::before { height: 1.875rem; width: 1.875rem; } .switch input:checked + label::before { left: 2rem; } .switch label { background-color: white; color: transparent; } .switch label::before { background-color: #FFFFFF; } .switch input:checked + label { background-color: #1AAD19; border-color: #1AAD19; } .switch.large label { height: 2.5rem; width: 5rem; } .switch.large label::before { height: 2.375rem; width: 2.375rem; } .switch.large input:checked + label::before { left: 2.5rem; } .switch.small label { height: 1.75rem; width: 3.5rem; } .switch.small label::before { height: 1.625rem; width: 1.625rem; } .switch.small input:checked + label::before { left: 1.75rem; } .switch.tiny label { height: 1.5rem; width: 3rem; } .switch.tiny label::before { height: 1.375rem; width: 1.375rem; } .switch.tiny input:checked + label::before { left: 1.5rem; } .switch.radius label { border-radius: 0.3125rem; } .switch.radius label::before { border-radius: 0.25rem; } .switch.round label, .switch.round label::before { border-radius: 1000px; } /* Badge */ .badge { display: inline-block; margin-bottom: auto; position: relative; text-align: center; text-decoration: none; white-space: nowrap; line-height: 1; padding: 0.25rem 0.5rem 0.25rem; font-size: 0.75rem; background-color: #1AAD19; color: #FFFFFF; border-radius: 1000px; } .badge.radius { border-radius: 0.3125rem; } .badge.alert { background-color: #F04124; color: #FFFFFF; } .badge.warning { background-color: #E64340; color: #FFFFFF; } .badge.success { background-color: #43AC6A; color: #FFFFFF; } .badge.info { background-color: #A0D3E8; color: #333333; } .badge.secondary { background-color: #E7E7E7; color: #333333; } .badge.reverse { background-color: transparent; color: #666666; } /* Table-lists */ .table-list { position: relative; padding-left: 0; margin: 1.333333em 0 0 0; list-style: none; background-color: #FFFFFF; } .table-list::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); background-color: #D9D9D9; } .table-list::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); background-color: #D9D9D9; } .table-list.has-icon { margin:0; } .table-list.has-icon [class^=icon-]::before { margin-right: 0.3125rem; vertical-align: -2px; color: #666666; font-size: 1.25rem; } .table-list.has-icon .item-body { overflow: hidden; } .table-list.has-badge .item { padding-right: 4.0625rem; } .table-list.has-badge .item > a:not(.btn) { margin-right: -4.0625rem; } .table-list.has-thumb .thumb { width: 2.8125rem; height: 2.8125rem; } .table-list.has-thumb .thumb.left { margin-right: 0.625rem; } .table-list.has-thumb .thumb.right { margin-left: 0.625rem; } .table-list.has-thumb .item-body { overflow: hidden; } .table-list.has-thumb .item-body h1, .table-list.has-thumb .item-body h2, .table-list.has-thumb .item-body h3, .table-list.has-thumb .item-body h4, .table-list.has-thumb .item-body h5, .table-list.has-thumb .item-body h6 { margin: 0 0 0.3125rem 0; } .table-list.has-thumb .item-body p { font-size: 0.75rem; } .table-list > .item { position: relative; background-color: inherit; padding: 0.625rem 0.9375rem; overflow: hidden; font-size: 0.9375rem; -webkit-touch-callout: none; } .table-list > .item::after { content: ""; position: absolute; left: 0.9375rem; right: 0.9375rem; bottom: 0; height: 1px; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); background-color: #DCDCDC; } .table-list > .item.span { display: -webkit-box; display: -webkit-flex; display: flex; } .table-list > .item.span span { display: block; } .table-list > .item:last-child::before, .table-list > .item:last-child::after { height: 0; } .table-list > .item > a:not(.btn) { position: relative; display: block; padding: inherit; margin: -0.625rem -0.9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; } .table-list > .item > a:not(.btn):hover { background-color: #F5F5F5; } .table-list > .item p, .table-list > .item .btn { margin-bottom: 0; } .table-list > .item .btn, .table-list > .item .badge, .table-list > .item .switch, .table-list > .item input { position: absolute; top: 50%; right: 0.9375rem; -webkit-transform: translateY(-50%); transform: translateY(-50%); margin-bottom: 0; } .table-list > .item input { width: auto; } .table-list > .item label { line-height: 2; } .table-list > .item > .nav-right::before { content: "⠃"; position: absolute; top: 50%; right: 0.9375rem; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 1rem; color: #AAAAAA; } .table-list > .item > .nav-right > .right { margin-right: 1.9375rem; } .table-list > .item > .nav-right > .btn, .table-list > .item > .nav-right > .badge, .table-list > .item > .nav-right > .switch, .table-list > .item > .nav-right > input { right: 2.1875rem; } .table-list > .item > .table-list { margin: 0.625rem -0.9375rem -0.625rem -1.875rem; border: 0 none; } .table-list > .item > .table-list::after { left: 0.9375rem; } .table-list > .item > .table-list.has-badge { margin-right: -65px; } .table-list > .item > .table-list > .item { padding-left: 1.875rem; } .table-list > .item > .table-list > .item::after { left: 1.875rem; } .table-list > .item > .content { padding: 8px 0.9375rem; margin: 0.625rem -0.9375rem -0.625rem; background: white; overflow: hidden; -webkit-transition: height .35s ease; transition: height .35s ease; } .table-list > .item.collapse > .nav-right::before { content: "⠂"; } .table-list > .item.collapse > .table-list { display: none; } .table-list > .item.collapse > .content { display: none; } .table-list > .divider { position: relative; padding: 0.375rem 0.9375rem; margin-top: -1px; margin-left: 0; font-weight: 700; color: #999999; background-color: #FAFAFA; } .table-list > .divider::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); background-color: #DCDCDC; } .table-list > .divider::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); background-color: #DCDCDC; } .icon-bar { width: 100%; overflow: hidden; background-color: #333333; } .icon-bar > .item { float: left; margin: 0 auto; padding: 0.3125rem 0.125rem; text-align: center; } .icon-bar > .item i, .icon-bar > .item img { display: block; margin: 0 auto; } .icon-bar.vertical { width: auto; height: 100%; } .icon-bar.vertical > .item { display: block; float: none; margin: auto; width: auto; padding: 0.125rem 0.3125rem; } .icon-bar.vertical > .item i { width: 2.4375rem; } .icon-bar > .item label { font-size: 0.75rem; color: #FFFFFF; } .icon-bar > .item i { vertical-align: middle; font-size: 1.5rem; line-height: 1.33333; color: #FFFFFF; } .icon-bar > .item img { height: 1.5rem; width: 1.5rem; } .icon-bar > .item:hover, .icon-bar > .item.active { background: #1AAD19; color: #FFFFFF; } .icon-bar > .item:hover label, .icon-bar > .item.active label { color: #FFFFFF; } .icon-bar > .item:hover i, .icon-bar > .item.active i { color: #FFFFFF; } .icon-bar > .item.disabled { opacity: 0.7; pointer-events: none; } .icon-bar > .item.disabled > * { opacity: 0.7; } .icon-bar.reverse { background-color: #f8f8f8; } .icon-bar.reverse > .item label { color: #333333; } .icon-bar.reverse > .item i { color: #333333; } .icon-bar.reverse > .item:hover, .icon-bar.reverse > .item.active { background-color: transparent; } .icon-bar.reverse > .item:hover label, .icon-bar.reverse > .item.active label { color: #1AAD19; } .icon-bar.reverse > .item:hover i, .icon-bar.reverse > .item.active i { color: #1AAD19; } .icon-bar.two-up > .item { width: 50%; } .icon-bar.three-up > .item { width: 33.333333%; } .icon-bar.four-up > .item { width: 25%; } .icon-bar.five-up > .item { width: 20%; } .icon-bar.six-up > .item { width: 16.666667%; } .icon-bar.reverse.bottom, .bottom .icon-bar.reverse { border-top: 1px solid #ebebeb; } .icon-bar.reverse.top, .top .icon-bar.reverse { border-bottom: 1px solid #ebebeb; } .icon-bar.reverse.left, .left .icon-bar.reverse { border-right: 1px solid #ebebeb; } .icon-bar.reverse.right, .right .icon-bar.reverse { border-left: 1px solid #ebebeb; } /* Top bar */ .sticky { position: -webkit-sticky; position: sticky; top: 0; z-index: 1009; } .sticky.sticking { box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05); } .fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 1009; } .fixed.bottom { bottom: 0; top: auto; } .fixed.bottom button.flat, .fixed.bottom .btn.flat { margin-bottom: 0; } .top-bar { position: relative; margin-bottom: 0; background: #04407c; height: 2.75rem; line-height: 2.75rem; } .top-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); background-color: transparent; } .top-bar .title-area, .top-bar h1 { margin: 0; text-align: center; line-height: 2.75rem; font-size: 1.125rem; color: #FFFFFF; } .top-bar a:not(.btn) { color: #FFFFFF; display: inline-block; } .top-bar .pos-left, .top-bar .pos-right { position: absolute; top: 0; } .top-bar .pos-left [class^=icon-], .top-bar .pos-right [class^=icon-] { padding: 0 0.916667rem; font-size: 1.125rem; } .top-bar .pos-left { left: 0; } .top-bar .pos-right { right: 0; } .top-bar ul { list-style: none; margin-bottom: 0; } .top-bar .row { max-width: none; } .top-bar form, .top-bar .form-row { margin: 0; } .top-bar input, .top-bar select { display: inline-block; position: relative; height: 1.75rem; padding-bottom: 0.125rem; padding-top: 0.125rem; font-size: 0.75rem; } .top-bar button, .top-bar .btn { position: relative; margin-bottom: 0; padding: 0 0.375rem; height: 1.75rem; line-height: 1.6875rem; font-size: 0.75rem; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .top-bar button { top: 1px; } } .top-bar .logo { display: inline-block; } .top-bar .logo img { min-height: 1px; max-height: 100%; } .top-bar-section { left: 0; position: relative; width: auto; } .top-bar-section ul { font-size: 16px; height: auto; margin: 0; padding: 0; } .top-bar-section li > a { color: #FFFFFF; display: block; font-size: 0.8125rem; padding-left: 0.916667rem; padding-right: 0.916667rem; width: 100%; } .top-bar-section li:hover > a { color: #FFFFFF; background: #03315e; } .top-bar-section li a:not(.btn) { line-height: 2.75rem; } .top-bar-section li a:not(.btn):hover { background: #03315e; } .top-bar-section li > button, .top-bar-section li > .buttons-class { font-size: 0.8125rem; padding-left: 0.916667rem; padding-right: 0.916667rem; } .top-bar-section > ul > li { float: left; } .top-bar-section > ul.left > li:not(.no-divide) { border-right: 1px solid #4e4e4e; } .top-bar-section > ul.right > li:not(.no-divide) { border-left: 1px solid #4e4e4e; } .top-bar-section .has-dropdown { position: relative; } .top-bar-section .has-dropdown:hover > .dropdown { clip: auto; height: auto; width: auto; overflow: visible; } .top-bar-section .has-dropdown > a { padding-right: 2.166667rem !important; } .top-bar-section .has-dropdown > a::after { position: absolute; top: 50%; right: 0; content: ""; display: block; width: 0; height: 0; border: 5px solid transparent; border-top-color: rgba(255, 255, 255, 0.4); margin-top: -2.5px; margin-right: 0.916667rem; } .top-bar-section .dropdown { display: block; position: absolute; left: 0; z-index: 99; height: 1px; width: 1px; min-width: 100%; clip: rect(1px, 1px, 1px, 1px); overflow: hidden; background: #04407c; } .top-bar-section .dropdown li a { white-space: nowrap; } .top-bar-section .dropdown li:hover > a { background: #03315e; color: #FFFFFF; } .top-bar-section .dropdown .divider { border-bottom: 1px solid #1a1a1a; height: 0; width: 100%; } .top-bar-section .dropdown label { margin-bottom: 0; padding: 8px 0.916667rem 2px; color: #777777; font-weight: 700; white-space: nowrap; } .top-bar-section .right li .dropdown { left: auto; right: 0; } .top-bar-section .left li .dropdown { right: auto; left: 0; } .top-bar.reverse { background: #f3f3f3; } .top-bar.reverse h1, .top-bar.reverse a { color: black; } .top-bar.reverse .top-bar-section li:hover > a { background-color: #e4e4e4; color: black; } .top-bar.reverse .top-bar-section li a:hover { background: #e4e4e4; } .top-bar.reverse .top-bar-section > ul.left > li:not(.no-divide) { border-right: 1px solid whitesmoke; } .top-bar.reverse .top-bar-section > ul.right > li:not(.no-divide) { border-left: 1px solid whitesmoke; } .top-bar.reverse .top-bar-section .dropdown { background: #f3f3f3; } .top-bar.reverse .top-bar-section .dropdown .divider { border-bottom: 1px solid whitesmoke; } .top-bar.reverse .top-bar-section .dropdown label { color: #888888; } /* Tabs */ .tabs { margin-bottom: 0; margin-left: 0; list-style: none; } .tabs .controller { position: relative; margin-bottom: 0; float: left; list-style: none; } .tabs .controller > a { display: block; background-color: #1AAD19; padding: 0.625rem 0.75rem; line-height: 1.72; font-size: 0.875rem; color: #FFFFFF; -webkit-transition: background-color 0.1s linear; transition: background-color 0.1s linear; } .tabs .controller > a:hover { background-color: #18a318; } .tabs .controller.active > a { background-color: #179816; } .tabs.radius .controller:first-child a { border-bottom-left-radius: 0.3125rem; border-top-left-radius: 0.3125rem; } .tabs.radius .controller:last-child a { border-bottom-right-radius: 0.3125rem; border-top-right-radius: 0.3125rem; } .tabs.vertical { float: left; width: 20%; max-width: 20%; } .tabs.vertical .controller { display: block; position: inherit; top: auto; float: none; } .tabs.vertical .controller > a { padding: 0.625rem 0.3125rem; } .tabs-content { margin-bottom: 0.125rem; width: 100%; } .tabs-content > .content { display: none; padding: 0.375rem 0; width: 100%; } .tabs-content > .content.active { display: block; } .tabs-content > .content.contained { padding: 0.375rem; } .tabs-content.vertical { float: left; width: 80%; max-width: 80%; } .tabs-content.vertical > .content { padding: 0 0.375rem; } .segmented-tabs { position: relative; display: table; table-layout: fixed; margin: 0.625rem 0.75rem; overflow: hidden; background-color: transparent; border: 1px solid #1AAD19; border-radius: 0.3125rem; -webkit-touch-callout: none; } .segmented-tabs .controller { display: table-cell; width: 1%; border-left: 1px solid #1AAD19; line-height: 2rem; text-align: center; font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .segmented-tabs .controller:first-child { border-left-width: 0; } .segmented-tabs .controller > a { display: block; background-color: #FFFFFF; color: #1AAD19; -webkit-transition: background-color 0.1s linear; transition: background-color 0.1s linear; } .segmented-tabs .controller.active > a { background-color: #1AAD19; color: #FFFFFF; } .bar-tabs { display: -webkit-box; display: -webkit-flex; display: flex; position: relative; background-color: #FFFFFF; margin-bottom: 0; margin-left: 0; list-style: none; text-align: center; } .bar-tabs::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); background-color: #DCDCDC; } .bar-tabs .controller { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; line-height: 1.375rem; font-size: 0.875rem; white-space: nowrap; } .bar-tabs .controller > a { display: block; position: relative; padding: 0.5rem 0; color: #999999; } .bar-tabs .controller > a::before { content: ""; position: absolute; -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; } .bar-tabs .controller:not(:last-child) > a::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 1px; -webkit-transform: scaleX(0.5); transform: scaleX(0.5); background-color: #DCDCDC; } .bar-tabs .controller.active > a { color: #333333; } .bar-tabs .controller.active > a::before { left: 0; bottom: 0; z-index: 1; width: 100%; height: 2px; background-color: #1AAD19; } /* Pop tip */ .poptip, .slidetip { position: fixed; left: 0; z-index: 1012; width: 100%; overflow: hidden; } .poptip .content, .slidetip .content { background-color: rgba(0, 0, 0, 0.7); max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 2.5rem; color: #FFFFFF; font-size: 1rem; text-align: center; } .slidetip { bottom: 0; } /*Message tip*/ .msgtip { position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1012; } .msgtip .content { padding: 0.3125rem 1.25rem; background-color: rgba(0, 0, 0, 0.7); border-radius: 0.3125rem; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 2.5rem; color: #FFFFFF; font-size: 1rem; text-align: center; } .poptip.primary .content, .slidetip.primary .content, .msgtip.primary .content { background-color: rgba(26, 173, 25, 0.7); } .poptip.secondary .content, .slidetip.secondary .content, .msgtip.secondary .content { background-color: rgba(231, 231, 231, 0.75); color: #222222; } .poptip.alert .content, .slidetip.alert .content, .msgtip.alert .content { background-color: rgba(240, 65, 36, 0.75); } .poptip.success .content, .slidetip.success .content, .msgtip.success .content { background-color: rgba(67, 172, 106, 0.75); } .poptip.warning .content, .slidetip.warning .content, .msgtip.warning .content { background-color: rgba(230, 67, 64, 0.85); } .poptip.info .content, .slidetip.info .content, .msgtip.info .content { background-color: rgba(160, 211, 232, 0.85); color: #222222; } /* Reveal Modals */ .backdrop { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1009; background: rgba(0, 0, 0, 0.45); } .modal-open, .modal-open body { overflow: hidden; -webkit-overflow-scrolling: auto; } .modal { display: none; position: fixed; z-index: 1010; visibility: hidden; left: 50%; right: auto; margin-left: -45%; width: 90%; border-radius: 0.3125rem; background-color: #FFFFFF; padding: 1.5625rem; border: 0 solid #EFEFEF; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); font-size: 1.0625rem; } .modal .columns { min-width: auto; } .modal.open { display: block; } .modal.top { top: 0; bottom: auto; border-top-left-radius: 0; border-top-right-radius: 0; border-top-width: 0; } .modal.bottom { top: auto; bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-width: 0; } .modal.center { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .modal.collapse { padding: 0; box-shadow: none; } .modal.tiny { margin-left: -20%; width: 40%; } .modal.small { margin-left: -30%; width: 60%; } .modal.large { margin-left: -47.5%; width: 95%; } .modal.fullwidth { margin-left: -50%; width: 100%; max-width: none; border-radius: 0; border-left-width: 0; border-right-width: 0; } .modal.fullscreen { top: 0; margin-left: -50%; width: 100%; max-width: none; height: 100%; height: 100vh; border-radius: 0; border: 0 none; } .modal.toback { z-index: 1008; } .modal > .close-modal { position: absolute; top: 0; right: 0; padding: 0 0.25rem; background-color: transparent; border: none; width: auto; line-height: inherit; font-size: 1.25rem; color: #AAAAAA; } .modal > header { margin: -1.5625rem -1.5625rem 0; padding: 1.25rem 1.5625rem 0.5rem; border-bottom: 0; line-height: 1.190476; font-size: 1.3125rem; text-align: center; } .modal > footer { display: -webkit-box; display: -webkit-flex; display: flex; margin: 0.75rem -1.5625rem -1.5625rem; padding: 0; border-top: 1px solid #D5D5D6; font-size: 1.125rem; text-align: center; } .modal > footer > button, .modal > footer > .btn { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; padding: 0.375rem 0; margin-bottom: 0; border: 0; background: transparent; color: #353535; } .modal > footer > button:active, .modal > footer > .btn:active { background-color: #EEEEEE; } .modal > footer > button.primary, .modal > footer > .btn.primary { color: #1AAD19; } .modal > footer > button.primary:hover, .modal > footer > button.primary:focus, .modal > footer > .btn.primary:hover, .modal > footer > .btn.primary:focus { background: transparent; } /* Error Handling */ [data-validator] .alert-box { display: none; } .has-error label { color: #F04124; } .has-error > label > .alert-box { display: inline; margin: 0; padding: 0; background: transparent; color: currentColor; } .has-error input, .has-error textarea, .has-error select { background-color: rgba(240, 65, 36, 0.1); border-color: #F04124; } .has-error input:focus, .has-error textarea:focus, .has-error select:focus { background: #FFFFFF; border-color: #a3a3a3; } .has-error .alert-box { display: block; margin-top: -1px; margin-bottom: 0; padding: 0.375rem 0.5625rem; background: #F04124; border-color: #d32a0e; color: #FFFFFF; font-size: 0.75rem; } label.error { color: #F04124; } .tabs-content > .no_content { display: none; padding: 0.375rem 0; width: 100%; display: block; text-align:center; line-height: 10rem; }