UNPKG

metro4

Version:

The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style

2,812 lines (2,811 loc) 1.16 MB
/* * Metro 4 Components Library v4.2.38 (https://metroui.org.ua) * Copyright 2019 Sergey Pimenov * Licensed under MIT */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; overflow-x: hidden; background-color: #ffffff; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; } table { border-collapse: collapse; border-spacing: 0; } base, basefont, datalist, head, meta, script, style, title, noembed, param, template { display: none; } *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } html { -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-family: sans-serif; } [tabindex="-1"]:focus { outline: none !important; } [hidden] { display: none !important; } template { display: none; } ::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; } [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] { -webkit-appearance: listbox; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { padding: 0; border-style: none; } button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } a, area, button, input, label, select, summary, textarea { -ms-touch-action: manipulation; touch-action: manipulation; } svg:not(:root) { overflow: hidden; } img { vertical-align: middle; border-style: none; } [hidden] { display: none; } div { position: relative; } .m4-cloak { opacity: 0; } .transition { -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .inherit-colors { background-color: inherit!important; color: inherit!important; } .inherit-background { background-color: inherit!important; } .inherit-color { color: inherit!important; } [class*=default-icon] { display: block; height: 16px; width: 16px; border: none!important; background-size: cover; background-color: transparent; opacity: 0.5; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; margin: auto; } [class*=default-icon]:hover { opacity: 1; } .clear::after, .clear-fix::after, .clearfix::after { display: block; clear: both; content: ""; } .overflow { overflow: auto !important; } .no-overflow { overflow: hidden !important; } .scroll { overflow: scroll !important; } .scroll-x { overflow-x: auto !important; } .scroll-y { overflow-y: auto !important; } .no-scroll { overflow: hidden !important; } .no-scroll-x { overflow-x: hidden !important; } .no-scroll-y { overflow-y: hidden !important; } .wrap { white-space: normal !important; } .no-wrap { white-space: nowrap !important; } .no-user-select { -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important; } .no-appearance { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; } .collapse { overflow: hidden; max-height: 0; -webkit-transition: max-height 0.3s ease; transition: max-height 0.3s ease; } .expand { max-height: 1000px !important; -webkit-transition: max-height 0.3s ease !important; transition: max-height 0.3s ease !important; -webkit-transition-duration: 1s !important; transition-duration: 1s !important; overflow: visible!important; } .v-center { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .h-center { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .neb::before { display: block; position: absolute; content: ""; width: 1rem; height: 1rem; background-color: inherit; border: 1px solid transparent; border-right-color: inherit; border-bottom-color: inherit; } .neb.neb-s::before { top: 100%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg); transform: translateX(-50%) translateY(-50%) rotate(45deg); } .neb.neb-sw::before { top: 100%; left: 0.625rem; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); } .neb.neb-se::before { top: 100%; right: 0.625rem; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); } .neb.neb-n::before { top: 0; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%) rotate(-135deg); transform: translateX(-50%) translateY(-50%) rotate(-135deg); } .neb.neb-nw::before { top: 0; left: 0.625rem; -webkit-transform: translateY(-50%) rotate(-135deg); transform: translateY(-50%) rotate(-135deg); } .neb.neb-ne::before { top: 0; right: 0.625rem; -webkit-transform: translateY(-50%) rotate(-135deg); transform: translateY(-50%) rotate(-135deg); } .neb.neb-en::before { top: 0.625rem; right: 0; -webkit-transform: translateX(50%) rotate(-45deg); transform: translateX(50%) rotate(-45deg); } .neb.neb-e::before { top: 50%; right: 0; -webkit-transform: translateX(50%) translateY(-50%) rotate(-45deg); transform: translateX(50%) translateY(-50%) rotate(-45deg); } .neb.neb-es::before { bottom: 0.625rem; right: 0; -webkit-transform: translateX(50%) rotate(-45deg); transform: translateX(50%) rotate(-45deg); } .neb.neb-wn::before { top: 0.625rem; left: 0; -webkit-transform: translateX(-50%) rotate(135deg); transform: translateX(-50%) rotate(135deg); } .neb.neb-w::before { top: 50%; left: 0; -webkit-transform: translateX(-50%) translateY(-50%) rotate(135deg); transform: translateX(-50%) translateY(-50%) rotate(135deg); } .neb.neb-ws::before { bottom: 0.625rem; left: 0; -webkit-transform: translateX(-50%) rotate(135deg); transform: translateX(-50%) rotate(135deg); } .neb2::before { display: block; content: ""; width: 0; height: 0; border-style: solid; position: absolute; } .neb2.neb-s::before { border-width: 24px 24px 0 24px; border-color: #ffffff transparent transparent transparent; top: 100%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .neb2.neb-n::before { border-width: 0 24px 24px 24px; border-color: transparent transparent #ffffff transparent; top: 0; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .neb2.neb-e::before { border-width: 24px 0 24px 24px; border-color: transparent transparent transparent #ffffff; top: 50%; right: 0; -webkit-transform: translateX(50%) translateY(-50%); transform: translateX(50%) translateY(-50%); } .neb2.neb-w::before { border-width: 24px 24px 24px 0; border-color: transparent #ffffff transparent transparent; top: 50%; left: 0; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .selected { -webkit-box-shadow: 0 0 0 4px #5ebdec !important; box-shadow: 0 0 0 4px #5ebdec !important; } .selected::after { position: absolute; display: block; border-top: 28px solid #5ebdec; border-left: 28px solid transparent; right: -1px; content: ""; top: -1px; z-index: 100; } .selected::before { position: absolute; display: block; content: ""; background-color: transparent; border-color: #ffffff !important; border-left: 2px solid; border-bottom: 2px solid; height: 0.325rem; width: 0.5rem; right: 0.25rem; top: 0.25rem; z-index: 102; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .disabled { pointer-events: none!important; color: #e4e4e4 !important; } @media screen and (min-width: 0) { .overflow-fs { overflow: auto !important; } .no-overflow-fs { overflow: hidden !important; } .scroll-fs { overflow: scroll !important; } .scroll-x-fs { overflow-x: auto !important; } .scroll-y-fs { overflow-y: auto !important; } .no-scroll-fs { overflow: hidden !important; } .no-scroll-x-fs { overflow-x: hidden !important; } .no-scroll-y-fs { overflow-y: hidden !important; } .wrap-fs { white-space: normal !important; } .no-wrap-fs { white-space: nowrap !important; } .collapse-fs { position: relative; overflow: hidden; max-height: 0; -webkit-transition: max-height 0.3s ease; transition: max-height 0.3s ease; } .expand-fs { max-height: 1000px !important; -webkit-transition: max-height 0.3s ease !important; transition: max-height 0.3s ease !important; -webkit-transition-duration: 1s !important; transition-duration: 1s !important; overflow: visible!important; } } @media screen and (min-width: 576px) { .overflow-sm { overflow: auto !important; } .no-overflow-sm { overflow: hidden !important; } .scroll-sm { overflow: scroll !important; } .scroll-x-sm { overflow-x: auto !important; } .scroll-y-sm { overflow-y: auto !important; } .no-scroll-sm { overflow: hidden !important; } .no-scroll-x-sm { overflow-x: hidden !important; } .no-scroll-y-sm { overflow-y: hidden !important; } .wrap-sm { white-space: normal !important; } .no-wrap-sm { white-space: nowrap !important; } .collapse-sm { position: relative; overflow: hidden; max-height: 0; -webkit-transition: max-height 0.3s ease; transition: max-height 0.3s ease; } .expand-sm { max-height: 1000px !important; -webkit-transition: max-height 0.3s ease !important; transition: max-height 0.3s ease !important; -webkit-transition-duration: 1s !important; transition-duration: 1s !important; overflow: visible!important; } } @media screen and (min-width: 768px) { .overflow-md { overflow: auto !important; } .no-overflow-md { overflow: hidden !important; } .scroll-md { overflow: scroll !important; } .scroll-x-md { overflow-x: auto !important; } .scroll-y-md { overflow-y: auto !important; } .no-scroll-md { overflow: hidden !important; } .no-scroll-x-md { overflow-x: hidden !important; } .no-scroll-y-md { overflow-y: hidden !important; } .wrap-md { white-space: normal !important; } .no-wrap-md { white-space: nowrap !important; } .collapse-md { position: relative; overflow: hidden; max-height: 0; -webkit-transition: max-height 0.3s ease; transition: max-height 0.3s ease; } .expand-md { max-height: 1000px !important; -webkit-transition: max-height 0.3s ease !important; transition: max-height 0.3s ease !important; -webkit-transition-duration: 1s !important; transition-duration: 1s !important; overflow: visible!important; } } @media screen and (min-width: 992px) { .overflow-lg { overflow: auto !important; } .no-overflow-lg { overflow: hidden !important; } .scroll-lg { overflow: scroll !important; } .scroll-x-lg { overflow-x: auto !important; } .scroll-y-lg { overflow-y: auto !important; } .no-scroll-lg { overflow: hidden !important; } .no-scroll-x-lg { overflow-x: hidden !important; } .no-scroll-y-lg { overflow-y: hidden !important; } .wrap-lg { white-space: normal !important; } .no-wrap-lg { white-space: nowrap !important; } .collapse-lg { position: relative; overflow: hidden; max-height: 0; -webkit-transition: max-height 0.3s ease; transition: max-height 0.3s ease; } .expand-lg { max-height: 1000px !important; -webkit-transition: max-height 0.3s ease !important; transition: max-height 0.3s ease !important; -webkit-transition-duration: 1s !important; transition-duration: 1s !important; overflow: visible!important; } } @media screen and (min-width: 1200px) { .overflow-xl { overflow: auto !important; } .no-overflow-xl { overflow: hidden !important; } .scroll-xl { overflow: scroll !important; } .scroll-x-xl { overflow-x: auto !important; } .scroll-y-xl { overflow-y: auto !important; } .no-scroll-xl { overflow: hidden !important; } .no-scroll-x-xl { overflow-x: hidden !important; } .no-scroll-y-xl { overflow-y: hidden !important; } .wrap-xl { white-space: normal !important; } .no-wrap-xl { white-space: nowrap !important; } .collapse-xl { position: relative; overflow: hidden; max-height: 0; -webkit-transition: max-height 0.3s ease; transition: max-height 0.3s ease; } .expand-xl { max-height: 1000px !important; -webkit-transition: max-height 0.3s ease !important; transition: max-height 0.3s ease !important; -webkit-transition-duration: 1s !important; transition-duration: 1s !important; overflow: visible!important; } } @media screen and (min-width: 1452px) { .overflow-xxl { overflow: auto !important; } .no-overflow-xxl { overflow: hidden !important; } .scroll-xxl { overflow: scroll !important; } .scroll-x-xxl { overflow-x: auto !important; } .scroll-y-xxl { overflow-y: auto !important; } .no-scroll-xxl { overflow: hidden !important; } .no-scroll-x-xxl { overflow-x: hidden !important; } .no-scroll-y-xxl { overflow-y: hidden !important; } .wrap-xxl { white-space: normal !important; } .no-wrap-xxl { white-space: nowrap !important; } .collapse-xxl { position: relative; overflow: hidden; max-height: 0; -webkit-transition: max-height 0.3s ease; transition: max-height 0.3s ease; } .expand-xxl { max-height: 1000px !important; -webkit-transition: max-height 0.3s ease !important; transition: max-height 0.3s ease !important; -webkit-transition-duration: 1s !important; transition-duration: 1s !important; overflow: visible!important; } } .mx-auto { margin-left: auto!important; margin-right: auto!important; } .my-auto { margin-top: auto!important; margin-left: auto!important; } .ml-auto { margin-left: auto!important; } .mr-auto { margin-right: auto!important; } .mt-auto { margin-top: auto!important; } .mb-auto { margin-bottom: auto!important; } .p-0 { padding: 0!important; } .pl-0 { padding-left: 0!important; } .pr-0 { padding-right: 0!important; } .pt-0 { padding-top: 0!important; } .pb-0 { padding-bottom: 0!important; } .px-0 { padding-left: 0!important; padding-right: 0!important; } .py-0 { padding-top: 0!important; padding-bottom: 0!important; } .m-0 { margin: 0!important; } .ml-0 { margin-left: 0!important; } .mr-0 { margin-right: 0!important; } .mt-0 { margin-top: 0!important; } .mb-0 { margin-bottom: 0!important; } .mx-0 { margin-left: 0!important; margin-right: 0!important; } .my-0 { margin-top: 0!important; margin-bottom: 0!important; } .p-1 { padding: 4px !important; } .pr-1 { padding-right: 4px !important; } .pl-1 { padding-left: 4px !important; } .pt-1 { padding-top: 4px !important; } .pb-1 { padding-bottom: 4px !important; } .px-1 { padding-left: 4px !important; padding-right: 4px !important; } .py-1 { padding-top: 4px !important; padding-bottom: 4px !important; } .m-1 { margin: 4px !important; } .mr-1 { margin-right: 4px !important; } .ml-1 { margin-left: 4px !important; } .mt-1 { margin-top: 4px !important; } .mb-1 { margin-bottom: 4px !important; } .mx-1 { margin-left: 4px !important; margin-right: 4px !important; } .my-1 { margin-top: 4px !important; margin-bottom: 4px !important; } .mr-1-minus { margin-right: -4px !important; } .ml-1-minus { margin-left: -4px !important; } .mt-1-minus { margin-top: -4px !important; } .mb-1-minus { margin-bottom: -4px !important; } .p-2 { padding: 8px !important; } .pr-2 { padding-right: 8px !important; } .pl-2 { padding-left: 8px !important; } .pt-2 { padding-top: 8px !important; } .pb-2 { padding-bottom: 8px !important; } .px-2 { padding-left: 8px !important; padding-right: 8px !important; } .py-2 { padding-top: 8px !important; padding-bottom: 8px !important; } .m-2 { margin: 8px !important; } .mr-2 { margin-right: 8px !important; } .ml-2 { margin-left: 8px !important; } .mt-2 { margin-top: 8px !important; } .mb-2 { margin-bottom: 8px !important; } .mx-2 { margin-left: 8px !important; margin-right: 8px !important; } .my-2 { margin-top: 8px !important; margin-bottom: 8px !important; } .mr-2-minus { margin-right: -8px !important; } .ml-2-minus { margin-left: -8px !important; } .mt-2-minus { margin-top: -8px !important; } .mb-2-minus { margin-bottom: -8px !important; } .p-3 { padding: 12px !important; } .pr-3 { padding-right: 12px !important; } .pl-3 { padding-left: 12px !important; } .pt-3 { padding-top: 12px !important; } .pb-3 { padding-bottom: 12px !important; } .px-3 { padding-left: 12px !important; padding-right: 12px !important; } .py-3 { padding-top: 12px !important; padding-bottom: 12px !important; } .m-3 { margin: 12px !important; } .mr-3 { margin-right: 12px !important; } .ml-3 { margin-left: 12px !important; } .mt-3 { margin-top: 12px !important; } .mb-3 { margin-bottom: 12px !important; } .mx-3 { margin-left: 12px !important; margin-right: 12px !important; } .my-3 { margin-top: 12px !important; margin-bottom: 12px !important; } .mr-3-minus { margin-right: -12px !important; } .ml-3-minus { margin-left: -12px !important; } .mt-3-minus { margin-top: -12px !important; } .mb-3-minus { margin-bottom: -12px !important; } .p-4 { padding: 16px !important; } .pr-4 { padding-right: 16px !important; } .pl-4 { padding-left: 16px !important; } .pt-4 { padding-top: 16px !important; } .pb-4 { padding-bottom: 16px !important; } .px-4 { padding-left: 16px !important; padding-right: 16px !important; } .py-4 { padding-top: 16px !important; padding-bottom: 16px !important; } .m-4 { margin: 16px !important; } .mr-4 { margin-right: 16px !important; } .ml-4 { margin-left: 16px !important; } .mt-4 { margin-top: 16px !important; } .mb-4 { margin-bottom: 16px !important; } .mx-4 { margin-left: 16px !important; margin-right: 16px !important; } .my-4 { margin-top: 16px !important; margin-bottom: 16px !important; } .mr-4-minus { margin-right: -16px !important; } .ml-4-minus { margin-left: -16px !important; } .mt-4-minus { margin-top: -16px !important; } .mb-4-minus { margin-bottom: -16px !important; } .p-5 { padding: 20px !important; } .pr-5 { padding-right: 20px !important; } .pl-5 { padding-left: 20px !important; } .pt-5 { padding-top: 20px !important; } .pb-5 { padding-bottom: 20px !important; } .px-5 { padding-left: 20px !important; padding-right: 20px !important; } .py-5 { padding-top: 20px !important; padding-bottom: 20px !important; } .m-5 { margin: 20px !important; } .mr-5 { margin-right: 20px !important; } .ml-5 { margin-left: 20px !important; } .mt-5 { margin-top: 20px !important; } .mb-5 { margin-bottom: 20px !important; } .mx-5 { margin-left: 20px !important; margin-right: 20px !important; } .my-5 { margin-top: 20px !important; margin-bottom: 20px !important; } .mr-5-minus { margin-right: -20px !important; } .ml-5-minus { margin-left: -20px !important; } .mt-5-minus { margin-top: -20px !important; } .mb-5-minus { margin-bottom: -20px !important; } .p-6 { padding: 24px !important; } .pr-6 { padding-right: 24px !important; } .pl-6 { padding-left: 24px !important; } .pt-6 { padding-top: 24px !important; } .pb-6 { padding-bottom: 24px !important; } .px-6 { padding-left: 24px !important; padding-right: 24px !important; } .py-6 { padding-top: 24px !important; padding-bottom: 24px !important; } .m-6 { margin: 24px !important; } .mr-6 { margin-right: 24px !important; } .ml-6 { margin-left: 24px !important; } .mt-6 { margin-top: 24px !important; } .mb-6 { margin-bottom: 24px !important; } .mx-6 { margin-left: 24px !important; margin-right: 24px !important; } .my-6 { margin-top: 24px !important; margin-bottom: 24px !important; } .mr-6-minus { margin-right: -24px !important; } .ml-6-minus { margin-left: -24px !important; } .mt-6-minus { margin-top: -24px !important; } .mb-6-minus { margin-bottom: -24px !important; } .p-7 { padding: 28px !important; } .pr-7 { padding-right: 28px !important; } .pl-7 { padding-left: 28px !important; } .pt-7 { padding-top: 28px !important; } .pb-7 { padding-bottom: 28px !important; } .px-7 { padding-left: 28px !important; padding-right: 28px !important; } .py-7 { padding-top: 28px !important; padding-bottom: 28px !important; } .m-7 { margin: 28px !important; } .mr-7 { margin-right: 28px !important; } .ml-7 { margin-left: 28px !important; } .mt-7 { margin-top: 28px !important; } .mb-7 { margin-bottom: 28px !important; } .mx-7 { margin-left: 28px !important; margin-right: 28px !important; } .my-7 { margin-top: 28px !important; margin-bottom: 28px !important; } .mr-7-minus { margin-right: -28px !important; } .ml-7-minus { margin-left: -28px !important; } .mt-7-minus { margin-top: -28px !important; } .mb-7-minus { margin-bottom: -28px !important; } .p-8 { padding: 32px !important; } .pr-8 { padding-right: 32px !important; } .pl-8 { padding-left: 32px !important; } .pt-8 { padding-top: 32px !important; } .pb-8 { padding-bottom: 32px !important; } .px-8 { padding-left: 32px !important; padding-right: 32px !important; } .py-8 { padding-top: 32px !important; padding-bottom: 32px !important; } .m-8 { margin: 32px !important; } .mr-8 { margin-right: 32px !important; } .ml-8 { margin-left: 32px !important; } .mt-8 { margin-top: 32px !important; } .mb-8 { margin-bottom: 32px !important; } .mx-8 { margin-left: 32px !important; margin-right: 32px !important; } .my-8 { margin-top: 32px !important; margin-bottom: 32px !important; } .mr-8-minus { margin-right: -32px !important; } .ml-8-minus { margin-left: -32px !important; } .mt-8-minus { margin-top: -32px !important; } .mb-8-minus { margin-bottom: -32px !important; } .p-9 { padding: 36px !important; } .pr-9 { padding-right: 36px !important; } .pl-9 { padding-left: 36px !important; } .pt-9 { padding-top: 36px !important; } .pb-9 { padding-bottom: 36px !important; } .px-9 { padding-left: 36px !important; padding-right: 36px !important; } .py-9 { padding-top: 36px !important; padding-bottom: 36px !important; } .m-9 { margin: 36px !important; } .mr-9 { margin-right: 36px !important; } .ml-9 { margin-left: 36px !important; } .mt-9 { margin-top: 36px !important; } .mb-9 { margin-bottom: 36px !important; } .mx-9 { margin-left: 36px !important; margin-right: 36px !important; } .my-9 { margin-top: 36px !important; margin-bottom: 36px !important; } .mr-9-minus { margin-right: -36px !important; } .ml-9-minus { margin-left: -36px !important; } .mt-9-minus { margin-top: -36px !important; } .mb-9-minus { margin-bottom: -36px !important; } .p-10 { padding: 40px !important; } .pr-10 { padding-right: 40px !important; } .pl-10 { padding-left: 40px !important; } .pt-10 { padding-top: 40px !important; } .pb-10 { padding-bottom: 40px !important; } .px-10 { padding-left: 40px !important; padding-right: 40px !important; } .py-10 { padding-top: 40px !important; padding-bottom: 40px !important; } .m-10 { margin: 40px !important; } .mr-10 { margin-right: 40px !important; } .ml-10 { margin-left: 40px !important; } .mt-10 { margin-top: 40px !important; } .mb-10 { margin-bottom: 40px !important; } .mx-10 { margin-left: 40px !important; margin-right: 40px !important; } .my-10 { margin-top: 40px !important; margin-bottom: 40px !important; } .mr-10-minus { margin-right: -40px !important; } .ml-10-minus { margin-left: -40px !important; } .mt-10-minus { margin-top: -40px !important; } .mb-10-minus { margin-bottom: -40px !important; } .p-11 { padding: 44px !important; } .pr-11 { padding-right: 44px !important; } .pl-11 { padding-left: 44px !important; } .pt-11 { padding-top: 44px !important; } .pb-11 { padding-bottom: 44px !important; } .px-11 { padding-left: 44px !important; padding-right: 44px !important; } .py-11 { padding-top: 44px !important; padding-bottom: 44px !important; } .m-11 { margin: 44px !important; } .mr-11 { margin-right: 44px !important; } .ml-11 { margin-left: 44px !important; } .mt-11 { margin-top: 44px !important; } .mb-11 { margin-bottom: 44px !important; } .mx-11 { margin-left: 44px !important; margin-right: 44px !important; } .my-11 { margin-top: 44px !important; margin-bottom: 44px !important; } .mr-11-minus { margin-right: -44px !important; } .ml-11-minus { margin-left: -44px !important; } .mt-11-minus { margin-top: -44px !important; } .mb-11-minus { margin-bottom: -44px !important; } .p-12 { padding: 48px !important; } .pr-12 { padding-right: 48px !important; } .pl-12 { padding-left: 48px !important; } .pt-12 { padding-top: 48px !important; } .pb-12 { padding-bottom: 48px !important; } .px-12 { padding-left: 48px !important; padding-right: 48px !important; } .py-12 { padding-top: 48px !important; padding-bottom: 48px !important; } .m-12 { margin: 48px !important; } .mr-12 { margin-right: 48px !important; } .ml-12 { margin-left: 48px !important; } .mt-12 { margin-top: 48px !important; } .mb-12 { margin-bottom: 48px !important; } .mx-12 { margin-left: 48px !important; margin-right: 48px !important; } .my-12 { margin-top: 48px !important; margin-bottom: 48px !important; } .mr-12-minus { margin-right: -48px !important; } .ml-12-minus { margin-left: -48px !important; } .mt-12-minus { margin-top: -48px !important; } .mb-12-minus { margin-bottom: -48px !important; } .p-13 { padding: 52px !important; } .pr-13 { padding-right: 52px !important; } .pl-13 { padding-left: 52px !important; } .pt-13 { padding-top: 52px !important; } .pb-13 { padding-bottom: 52px !important; } .px-13 { padding-left: 52px !important; padding-right: 52px !important; } .py-13 { padding-top: 52px !important; padding-bottom: 52px !important; } .m-13 { margin: 52px !important; } .mr-13 { margin-right: 52px !important; } .ml-13 { margin-left: 52px !important; } .mt-13 { margin-top: 52px !important; } .mb-13 { margin-bottom: 52px !important; } .mx-13 { margin-left: 52px !important; margin-right: 52px !important; } .my-13 { margin-top: 52px !important; margin-bottom: 52px !important; } .mr-13-minus { margin-right: -52px !important; } .ml-13-minus { margin-left: -52px !important; } .mt-13-minus { margin-top: -52px !important; } .mb-13-minus { margin-bottom: -52px !important; } .p-14 { padding: 56px !important; } .pr-14 { padding-right: 56px !important; } .pl-14 { padding-left: 56px !important; } .pt-14 { padding-top: 56px !important; } .pb-14 { padding-bottom: 56px !important; } .px-14 { padding-left: 56px !important; padding-right: 56px !important; } .py-14 { padding-top: 56px !important; padding-bottom: 56px !important; } .m-14 { margin: 56px !important; } .mr-14 { margin-right: 56px !important; } .ml-14 { margin-left: 56px !important; } .mt-14 { margin-top: 56px !important; } .mb-14 { margin-bottom: 56px !important; } .mx-14 { margin-left: 56px !important; margin-right: 56px !important; } .my-14 { margin-top: 56px !important; margin-bottom: 56px !important; } .mr-14-minus { margin-right: -56px !important; } .ml-14-minus { margin-left: -56px !important; } .mt-14-minus { margin-top: -56px !important; } .mb-14-minus { margin-bottom: -56px !important; } .p-15 { padding: 60px !important; } .pr-15 { padding-right: 60px !important; } .pl-15 { padding-left: 60px !important; } .pt-15 { padding-top: 60px !important; } .pb-15 { padding-bottom: 60px !important; } .px-15 { padding-left: 60px !important; padding-right: 60px !important; } .py-15 { padding-top: 60px !important; padding-bottom: 60px !important; } .m-15 { margin: 60px !important; } .mr-15 { margin-right: 60px !important; } .ml-15 { margin-left: 60px !important; } .mt-15 { margin-top: 60px !important; } .mb-15 { margin-bottom: 60px !important; } .mx-15 { margin-left: 60px !important; margin-right: 60px !important; } .my-15 { margin-top: 60px !important; margin-bottom: 60px !important; } .mr-15-minus { margin-right: -60px !important; } .ml-15-minus { margin-left: -60px !important; } .mt-15-minus { margin-top: -60px !important; } .mb-15-minus { margin-bottom: -60px !important; } .p-16 { padding: 64px !important; } .pr-16 { padding-right: 64px !important; } .pl-16 { padding-left: 64px !important; } .pt-16 { padding-top: 64px !important; } .pb-16 { padding-bottom: 64px !important; } .px-16 { padding-left: 64px !important; padding-right: 64px !important; } .py-16 { padding-top: 64px !important; padding-bottom: 64px !important; } .m-16 { margin: 64px !important; } .mr-16 { margin-right: 64px !important; } .ml-16 { margin-left: 64px !important; } .mt-16 { margin-top: 64px !important; } .mb-16 { margin-bottom: 64px !important; } .mx-16 { margin-left: 64px !important; margin-right: 64px !important; } .my-16 { margin-top: 64px !important; margin-bottom: 64px !important; } .mr-16-minus { margin-right: -64px !important; } .ml-16-minus { margin-left: -64px !important; } .mt-16-minus { margin-top: -64px !important; } .mb-16-minus { margin-bottom: -64px !important; } .p-17 { padding: 68px !important; } .pr-17 { padding-right: 68px !important; } .pl-17 { padding-left: 68px !important; } .pt-17 { padding-top: 68px !important; } .pb-17 { padding-bottom: 68px !important; } .px-17 { padding-left: 68px !important; padding-right: 68px !important; } .py-17 { padding-top: 68px !important; padding-bottom: 68px !important; } .m-17 { margin: 68px !important; } .mr-17 { margin-right: 68px !important; } .ml-17 { margin-left: 68px !important; } .mt-17 { margin-top: 68px !important; } .mb-17 { margin-bottom: 68px !important; } .mx-17 { margin-left: 68px !important; margin-right: 68px !important; } .my-17 { margin-top: 68px !important; margin-bottom: 68px !important; } .mr-17-minus { margin-right: -68px !important; } .ml-17-minus { margin-left: -68px !important; } .mt-17-minus { margin-top: -68px !important; } .mb-17-minus { margin-bottom: -68px !important; } .p-18 { padding: 72px !important; } .pr-18 { padding-right: 72px !important; } .pl-18 { padding-left: 72px !important; } .pt-18 { padding-top: 72px !important; } .pb-18 { padding-bottom: 72px !important; } .px-18 { padding-left: 72px !important; padding-right: 72px !important; } .py-18 { padding-top: 72px !important; padding-bottom: 72px !important; } .m-18 { margin: 72px !important; } .mr-18 { margin-right: 72px !important; } .ml-18 { margin-left: 72px !important; } .mt-18 { margin-top: 72px !important; } .mb-18 { margin-bottom: 72px !important; } .mx-18 { margin-left: 72px !important; margin-right: 72px !important; } .my-18 { margin-top: 72px !important; margin-bottom: 72px !important; } .mr-18-minus { margin-right: -72px !important; } .ml-18-minus { margin-left: -72px !important; } .mt-18-minus { margin-top: -72px !important; } .mb-18-minus { margin-bottom: -72px !important; } .p-19 { padding: 76px !important; } .pr-19 { padding-right: 76px !important; } .pl-19 { padding-left: 76px !important; } .pt-19 { padding-top: 76px !important; } .pb-19 { padding-bottom: 76px !important; } .px-19 { padding-left: 76px !important; padding-right: 76px !important; } .py-19 { padding-top: 76px !important; padding-bottom: 76px !important; } .m-19 { margin: 76px !important; } .mr-19 { margin-right: 76px !important; } .ml-19 { margin-left: 76px !important; } .mt-19 { margin-top: 76px !important; } .mb-19 { margin-bottom: 76px !important; } .mx-19 { margin-left: 76px !important; margin-right: 76px !important; } .my-19 { margin-top: 76px !important; margin-bottom: 76px !important; } .mr-19-minus { margin-right: -76px !important; } .ml-19-minus { margin-left: -76px !important; } .mt-19-minus { margin-top: -76px !important; } .mb-19-minus { margin-bottom: -76px !important; } .p-20 { padding: 80px !important; } .pr-20 { padding-right: 80px !important; } .pl-20 { padding-left: 80px !important; } .pt-20 { padding-top: 80px !important; } .pb-20 { padding-bottom: 80px !important; } .px-20 { padding-left: 80px !important; padding-right: 80px !important; } .py-20 { padding-top: 80px !important; padding-bottom: 80px !important; } .m-20 { margin: 80px !important; } .mr-20 { margin-right: 80px !important; } .ml-20 { margin-left: 80px !important; } .mt-20 { margin-top: 80px !important; } .mb-20 { margin-bottom: 80px !important; } .mx-20 { margin-left: 80px !important; margin-right: 80px !important; } .my-20 { margin-top: 80px !important; margin-bottom: 80px !important; } .mr-20-minus { margin-right: -80px !important; } .ml-20-minus { margin-left: -80px !important; } .mt-20-minus { margin-top: -80px !important; } .mb-20-minus { margin-bottom: -80px !important; } @media screen and (min-width: 0) { .mx-auto-fs { margin-left: auto!important; margin-right: auto!important; } .ml-auto-fs { margin-left: auto!important; } .mr-auto-fs { margin-right: auto!important; } .mt-auto-fs { margin-top: auto!important; } .mb-auto-fs { margin-bottom: auto!important; } .p-0-fs { padding: 0!important; } .pl-0-fs { padding-left: 0!important; } .pr-0-fs { padding-right: 0!important; } .pt-0-fs { padding-top: 0!important; } .pb-0-fs { padding-bottom: 0!important; } .m-0-fs { margin: 0!important; } .ml-0-fs { margin-left: 0!important; } .mr-0-fs { margin-right: 0!important; } .mt-0-fs { margin-top: 0!important; } .mb-0-fs { margin-bottom: 0!important; } .p-0-fs { padding: 0px !important; } .pr-0-fs { padding-right: 0px !important; } .pl-0-fs { padding-left: 0px !important; } .pt-0-fs { padding-top: 0px !important; } .pb-0-fs { padding-bottom: 0px !important; } .px-0-fs { padding-left: 0px !important; padding-right: 0px !important; } .py-0-fs { padding-top: 0px !important; padding-bottom: 0px !important; } .m-0-fs { margin: 0px !important; } .mr-0-fs { margin-right: 0px !important; } .ml-0-fs { margin-left: 0px !important; } .mt-0-fs { margin-top: 0px !important; } .mb-0-fs { margin-bottom: 0px !important; } .mx-0-fs { margin-left: 0px !important; margin-right: 0px !important; } .my-0-fs { margin-top: 0px !important; margin-bottom: 0px !important; } .m-0-fs-minus { margin: 0px !important; } .mr-0-fs-minus { margin-right: 0px !important; } .ml-0-fs-minus { margin-left: 0px !important; } .mt-0-fs-minus { margin-top: 0px !important; } .mb-0-fs-minus { margin-bottom: 0px !important; } .p-1-fs { padding: 4px !important; } .pr-1-fs { padding-right: 4px !important; } .pl-1-fs { padding-left: 4px !important; } .pt-1-fs { padding-top: 4px !important; } .pb-1-fs { padding-bottom: 4px !important; } .px-1-fs { padding-left: 4px !important; padding-right: 4px !important; } .py-1-fs { padding-top: 4px !important; padding-bottom: 4px !important; } .m-1-fs { margin: 4px !important; } .mr-1-fs { margin-right: 4px !important; } .ml-1-fs { margin-left: 4px !important; } .mt-1-fs { margin-top: 4px !important; } .mb-1-fs { margin-bottom: 4px !important; } .mx-1-fs { margin-left: 4px !important; margin-right: 4px !important; } .my-1-fs { margin-top: 4px !important; margin-bottom: 4px !important; } .m-1-fs-minus { margin: -4px !important; } .mr-1-fs-minus { margin-right: -4px !important; } .ml-1-fs-minus { margin-left: -4px !important; } .mt-1-fs-minus { margin-top: -4px !important; } .mb-1-fs-minus { margin-bottom: -4px !important; } .p-2-fs { padding: 8px !important; } .pr-2-fs { padding-right: 8px !important; } .pl-2-fs { padding-left: 8px !important; } .pt-2-fs { padding-top: 8px !important; } .pb-2-fs { padding-bottom: 8px !important; } .px-2-fs { padding-left: 8px !important; padding-right: 8px !important; } .py-2-fs { padding-top: 8px !important; padding-bottom: 8px !important; } .m-2-fs { margin: 8px !important; } .mr-2-fs { margin-right: 8px !important; } .ml-2-fs { margin-left: 8px !important; } .mt-2-fs { margin-top: 8px !important; } .mb-2-fs { margin-bottom: 8px !important; } .mx-2-fs { margin-left: 8px !important; margin-right: 8px !important; } .my-2-fs { margin-top: 8px !important; margin-bottom: 8px !important; } .m-2-fs-minus { margin: -8px !important; } .mr-2-fs-minus { margin-right: -8px !important; } .ml-2-fs-minus { margin-left: -8px !important; } .mt-2-fs-minus { margin-top: -8px !important; } .mb-2-fs-minus { margin-bottom: -8px !important; } .p-3-fs { padding: 12px !important; } .pr-3-fs { padding-right: 12px !important; } .pl-3-fs { padding-left: 12px !important; } .pt-3-fs { padding-top: 12px !important; } .pb-3-fs { padding-bottom: 12px !important; } .px-3-fs { padding-left: 12px !important; padding-right: 12px !important; } .py-3-fs { padding-top: 12px !important; padding-bottom: 12px !important; } .m-3-fs { margin: 12px !important; } .mr-3-fs { margin-right: 12px !important; } .ml-3-fs { margin-left: 12px !important; } .mt-3-fs { margin-top: 12px !important; } .mb-3-fs { margin-bottom: 12px !important; } .mx-3-fs { margin-left: 12px !important; margin-right: 12px !important; } .my-3-fs { margin-top: 12px !important; margin-bottom: 12px !important; } .m-3-fs-minus { margin: -12px !important; } .mr-3-fs-minus { margin-right: -12px !important; } .ml-3-fs-minus { margin-left: -12px !important; } .mt-3-fs-minus { margin-top: -12px !important; } .mb-3-fs-minus { margin-bottom: -12px !important; } .p-4-fs { padding: 16px !important; } .pr-4-fs { padding-right: 16px !important; } .pl-4-fs { padding-left: 16px !important; } .pt-4-fs { padding-top: 16px !important; } .pb-4-fs { padding-bottom: 16px !important; } .px-4-fs { padding-left: 16px !important; padding-right: 16px !important; } .py-4-fs { padding-top: 16px !important; padding-bottom: 16px !important; } .m-4-fs { margin: 16px !important; } .mr-4-fs { margin-right: 16px !important; } .ml-4-fs { margin-left: 16px !important; } .mt-4-fs { margin-top: 16px !important; } .mb-4-fs { margin-bottom: 16px !important; } .mx-4-fs { margin-left: 16px !important; margin-right: 16px !important; } .my-4-fs { margin-top: 16px !important; margin-bottom: 16px !important; } .m-4-fs-minus { margin: -16px !important; } .mr-4-fs-minus { margin-right: -16px !important; } .ml-4-fs-minus { margin-left: -16px !important; } .mt-4-fs-minus { margin-top: -16px !important; } .mb-4-fs-minus { margin-bottom: -16px !important; } .p-5-fs { padding: 20px !important; } .pr-5-fs { padding-right: 20px !important; } .pl-5-fs { padding-left: 20px !important; } .pt-5-fs { padding-top: 20px !important; } .pb-5-fs { padding-bottom: 20px !important; } .px-5-fs { padding-left: 20px !important; padding-right: 20px !important; } .py-5-fs { padding-top: 20px !important; padding-bottom: 20px !important; } .m-5-fs { margin: 20px !important; } .mr-5-fs { margin-right: 20px !important; } .ml-5-fs { margin-left: 20px !important; } .mt-5-fs { margin-top: 20px !important; } .mb-5-fs { margin-bottom: 20px !important; } .mx-5-fs { margin-left: 20px !important; margin-right: 20px !important; } .my-5-fs { margin-top: 20px !important; margin-bottom: 20px !important; } .m-5-fs-minus { margin: -20px !important; } .mr-5-fs-minus { margin-right: -20px !important; } .ml-5-fs-minus { margin-left: -20px !important; } .mt-5-fs-minus { margin-top: -20px !important; } .mb-5-fs-minus { margin-bottom: -20px !important; } .p-6-fs { padding: 24px !important; } .pr-6-fs { padding-right: 24px !important; } .pl-6-fs { padding-left: 24px !important; } .pt-6-fs { padding-top: 24px !important; } .pb-6-fs { padding-bottom: 24px !important; } .px-6-fs { padding-left: 24px !important; padding-right: 24px !important; } .py-6-fs { padding-top: 24px !important; padding-bottom: 24px !important; } .m-6-fs { margin: 24px !important; } .mr-6-fs { margin-right: 24px !important; } .ml-6-fs { margin-left: 24px !important; } .mt-6-fs { margin-top: 24px !important; } .mb-6-fs { margin-bottom: 24px !important; } .mx-6-fs { margin-left: 24px !important; margin-right: 24px !important; } .my-6-fs { margin-top: 24px !important; margin-bottom: 24px !important; } .m-6-fs-minus { margin: -24px !important; } .mr-6-fs-minus { margin-right: -24px !important; } .ml-6-fs-minus { margin-left: -24px !important; } .mt-6-fs-minus { margin-top: -24px !important; } .mb-6-fs-minus { margin-bottom: -24px !important; } .p-7-fs { padding: 28px !important; } .pr-7-fs { padding-right: 28px !important; } .pl-7-fs { padding-left: 28px !important; } .pt-7-fs { padding-top: 28px !important; } .pb-7-fs { padding-bottom: 28px !important; } .px-7-fs { padding-left: 28px !important; padding-right: 28px !important; } .py-7-fs { padding-top: 28px !important; padding-bottom: 28px !important; } .m-7-fs { margin: 28px !important; } .mr-7-fs { margin-right: 28px !important; } .ml-7-fs { margin-left: 28px !important; } .mt-7-fs { margin-top: 28px !important; } .mb-7-fs { margin-bottom: 28px !important; } .mx-7-fs { margin-left: 28px !important; margin-right: 28px !important; } .my-7-fs { margin-top: 28px !important; margin-bottom: 28px !important; } .m-7-fs-minus { margin: -28px !important; } .mr-7-fs-minus { margin-right: -28px !important; } .ml-7-fs-minus { margin-left: -28px !important; } .mt-7-fs-minus { margin-top: -28px !important; } .mb-7-fs-minus { margin-bottom: -28px !important; } .p-8-fs { padding: 32px !important; } .pr-8-fs { padding-right: 32px !important; } .pl-8-fs { padding-left: 32px !important; } .pt-8-fs { padding-top: 32px !important; } .pb-8-fs { padding-bottom: 32px !important; } .px-8-fs { padding-left: 32px !important; padding-right: 32px !important; } .py-8-fs { padding-top: 32px !important; padding-bottom: 32px !important; } .m-8-fs { margin: 32px !important; } .mr-8-fs { margin-right: 32px !important; } .ml-8-fs { margin-left: 32px !important; } .mt-8-fs { margin-top: 32px !important; } .mb-8-fs { margin-bottom: 32px !important; } .mx-8-fs { margin-left: 32px !important; margin-right: 32px !important; } .my-8-fs { margin-top: 32px !important; margin-bottom: 32px !important; } .m-8-fs-minus { margin: -32px !important; } .mr-8-fs-minus { margin-right: -32px !important; } .ml-8-fs-minus { margin-left: -32px !important; } .mt-8-fs-minus { margin-top: -32px !important; } .mb-8-fs-minus { margin-bottom: -32px !important; } .p-9-fs { padding: 36px !important; } .pr-9-fs { padding-right: 36px !important; } .pl-9-fs { padding-left: 36px !important; } .pt-9-fs { padding-top: 36px !important; } .pb-9-fs { padding-bottom: 36px !important; } .px-9-fs { padding-left: 36px !important; padding-right: 36px !important; } .py-9-fs { padding-top: 36px !important; padding-bottom: 36px !important; } .m-9-fs { margin: 36px !important; } .mr-9-fs { margin-right: 36px !important; } .ml-9-fs { margin-left: 36px !important; } .mt-9-fs { margin-top: 36px !important; } .mb-9-fs { margin-bottom: 36px !important; } .mx-9-fs { margin-left: 36px !important; margin-right: 36px !important; } .my-9-fs { margin-top: 36px !important; margin-bottom: 36px !important; } .m-9-fs-minus { margin: -36px !important; } .mr-9-fs-minus { margin-right: -36px !important; } .ml-9-fs-minus { margin-left: -36px !important; } .mt-9-fs-minus { margin-top: -36px !important; } .mb-9-fs-minus { margin-bottom: -36px !important; } .p-10-fs { padding: 40px !important; } .pr-10-fs { padding-right: 40px !important; } .pl-10-fs { padding-left: 40px !important; } .pt-10-fs { padding-top: 40px !important; } .pb-10-fs { padding-bottom: 40px !important; } .px-10-fs { padding-left: 40px !important; padding-right: 40px !important; } .py-10-fs { padding-top: 40px !important; padding-bottom: 40px !important; } .m-10-fs { margin: 40px !important; } .mr-10-fs { margin-right: 40px !important; } .ml-10-fs { margin-left: 40px !important; } .mt-10-fs { margin-top: 40px !important; } .mb-10-fs { margin-bottom: 40px !important; } .mx-10-fs { margin-left: 40px !important; margin-right: 40px !important; } .my-10-fs { margin-top: 40px !important; margin-bottom: 40px !important; } .m-10-fs-minus { margin: -40px !important; } .mr-10-fs-minus { margin-right: -40px !important; } .ml-10-fs-minus { margin-left: -40px !important; } .mt-10-fs-minus { margin-top: -40px !important; } .mb-10-fs-minus { margin-bottom: -40px !important; } .p-11-fs { padding: 44px !important; } .pr-11-fs { padding-right: 44px !important; } .pl-11-fs { padding-left: 44px !important; } .pt-11-fs { padding-top: 44px !important; } .pb-11-fs { padding-bottom: 44px !important; } .px-11-fs { padding-left: 44px !important; padding-right: 44px !important; } .py-11-fs { padding-top: 44px !important; padding-bottom: 44px !important; } .m-11-fs { margin: 44px !important; } .mr-11-fs { margin-right: 44px !important; } .ml-11-fs { margin-left: 44px !important; } .mt-11-fs { margin-top: 44px !important; } .mb-11-fs { margin-bottom: 44px !important; } .mx-11-fs { margin-left: 44px !important; margin-right: 44px !important; } .my-11-fs { margin-top: 44px !important; margin-bottom: 44px !important; } .m-11-fs-minus { margin: -44px !important; } .mr-11-fs-minus { margin-right: -44px !important; } .ml-11-fs-minus { margin-left: -44px !important; } .mt-11-fs-minus { margin-top: -44px !important; } .mb-11-fs-minus { margin-bottom: -44px !important; } .p-12-fs { padding: 48px !important; } .pr-12-fs { padding-right: 48px !important; } .pl-12-fs { padding-left: 48px !important; } .pt-12-fs { padding-top: 48px !important; } .pb-12-fs { padding-bottom: 48px !important; } .px-12-fs { padding-left: 48px !important; padding-right: 48px !important; } .py-12-fs { padding-top: 48px !important; padding-bottom: 48px !important; } .m-12-fs { margin: 48px !important; } .mr-12-fs { margin-right: 48px !important; } .ml-12-fs { margin-left: 48px !important; } .mt-12-fs { margin-top: 48px !important; } .mb-12-fs { margin-bottom: 48px !important; } .mx-12-fs { margin-left: 48px !important; margin-right: 48px !important; } .my-12-fs { margin-top: 48px !important; margin-bottom: 48px !important; }