diff --git a/package-lock.json b/package-lock.json
index d3de74c3..fee8cc1b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,6 @@
"version": "1.0.50",
"license": "ISC",
"dependencies": {
- "@appquality/mobiscroll": "^5.10.1",
"formik": "^2.2.9",
"react-bootstrap-icons": "^1.5.0",
"react-cool-onclickoutside": "^1.6.2",
@@ -45,6 +44,7 @@
"@types/react-transition-group": "^4.4.1",
"@types/styled-components": "^5.1.10",
"auto": "^10.29.2",
+ "babel-loader": "^8.1.0",
"chromatic": "^5.9.0",
"copyfiles": "^2.4.1",
"cross-env": "^7.0.3",
@@ -117,16 +117,6 @@
"node": ">=6.0.0"
}
},
- "node_modules/@appquality/mobiscroll": {
- "version": "5.10.1",
- "resolved": "https://registry.npmjs.org/@appquality/mobiscroll/-/mobiscroll-5.10.1.tgz",
- "integrity": "sha512-A9YVu/5aFcmd6WtLEfr//x20mV5w9O3X5nsooYW43HMdfrx1fKcPfarCk9fHyyov1h0S9DdrzR7Dl/sciL7usA==",
- "peerDependencies": {
- "prop-types": ">=15.5.0",
- "react": ">=15.3.0",
- "react-dom": ">=15.3.0"
- }
- },
"node_modules/@auto-it/bot-list": {
"version": "10.37.6",
"resolved": "https://registry.npmjs.org/@auto-it/bot-list/-/bot-list-10.37.6.tgz",
@@ -39831,12 +39821,6 @@
"@jridgewell/trace-mapping": "^0.3.9"
}
},
- "@appquality/mobiscroll": {
- "version": "5.10.1",
- "resolved": "https://registry.npmjs.org/@appquality/mobiscroll/-/mobiscroll-5.10.1.tgz",
- "integrity": "sha512-A9YVu/5aFcmd6WtLEfr//x20mV5w9O3X5nsooYW43HMdfrx1fKcPfarCk9fHyyov1h0S9DdrzR7Dl/sciL7usA==",
- "requires": {}
- },
"@auto-it/bot-list": {
"version": "10.37.6",
"resolved": "https://registry.npmjs.org/@auto-it/bot-list/-/bot-list-10.37.6.tgz",
diff --git a/package.json b/package.json
index 4d6a09ec..96773f34 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,6 @@
"name": "@appquality/appquality-design-system",
"version": "1.0.68",
"dependencies": {
- "@appquality/mobiscroll": "^5.10.1",
"formik": "^2.2.9",
"react-bootstrap-icons": "^1.5.0",
"react-cool-onclickoutside": "^1.6.2",
diff --git a/src/index.tsx b/src/index.tsx
index 6901b75d..af88a88e 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -4,52 +4,61 @@ import GlobalStyle from "./shared/globalStyle";
// import * as animation from './shared/animation';
import * as icons from "react-bootstrap-icons";
-import * as TableType from "./stories/table/_types";
+import { FieldProps, Form, Formik, Field as FormikField } from "formik";
+import { ThemeProvider } from "styled-components";
+import * as DatepickerType from "./stories/form/datepicker/_types";
import * as SelectType from "./stories/select/_types";
import * as SidebarType from "./stories/sidebar/SidebarProps";
-import * as DatepickerType from "./stories/form/datepicker/_types";
-import { DatepickerGlobalStyle } from "./stories/form/datepicker/_style";
-import { ThemeProvider } from "styled-components";
-import { Formik, Form, FieldProps, Field as FormikField } from "formik";
+import * as TableType from "./stories/table/_types";
import { aqBootstrapTheme } from "./stories/theme/defaultTheme";
// import original module declarations
import "styled-components";
//
+export {
+ COLORS,
+ DatepickerType,
+ Form,
+ Formik,
+ FormikField,
+ GlobalStyle,
+ SelectType,
+ SidebarType,
+ TableType,
+ ThemeProvider,
+ aqBootstrapTheme,
+ icons,
+};
export type { FieldProps };
-export { FormikField, Formik, Form, DatepickerGlobalStyle };
-export { TableType, SelectType, SidebarType, DatepickerType, ThemeProvider };
-export { COLORS, GlobalStyle, icons, aqBootstrapTheme };
declare module "styled-components" {
type Theme = typeof aqBootstrapTheme;
export interface DefaultTheme extends Theme {}
}
-export * from "./stories/form/datepicker/Datepicker";
+export * from "./stories/DateInput";
+export * from "./stories/Steps/Steps";
+export * from "./stories/accordion/Accordion";
export * from "./stories/button/Button";
export * from "./stories/card/Card";
+export * from "./stories/carousel/Carousel";
+export * from "./stories/dropzone/Dropzone";
export * from "./stories/form/Form";
+export * from "./stories/form/datepicker/Datepicker";
+export * from "./stories/form/textareaField/TextareaField";
export * from "./stories/header/Header";
export * from "./stories/layout/Layout";
export * from "./stories/modal/Modal";
+export * from "./stories/pagetitle/PageTitle";
export * from "./stories/pagination/Pagination";
+export * from "./stories/pill/Pill";
+export * from "./stories/placesAutocomplete/PlacesAutocomplete";
+export * from "./stories/progress-bar/ProgressBar";
export * from "./stories/select/Select";
export * from "./stories/sidebar/Sidebar";
export * from "./stories/skeleton/Skeleton";
export * from "./stories/spinner/Spinner";
export * from "./stories/table/Table";
-export * from "./stories/typography/Typography";
-export * from "./stories/pagetitle/PageTitle";
-export * from "./stories/pagetitle/PageTitle";
export * from "./stories/tabs/Tabs";
-export * from "./stories/accordion/Accordion";
-export * from "./stories/pill/Pill";
-export * from "./stories/carousel/Carousel";
-export * from "./stories/progress-bar/ProgressBar";
-export * from "./stories/Steps/Steps";
export * from "./stories/toastr/Toastr";
-export * from "./stories/placesAutocomplete/PlacesAutocomplete";
-export * from "./stories/dropzone/Dropzone";
-export * from "./stories/form/textareaField/TextareaField";
-export * from "./stories/DateInput";
+export * from "./stories/typography/Typography";
diff --git a/src/stories/DateInput/DateInput.stories.tsx b/src/stories/DateInput/DateInput.stories.tsx
index 5c2362fc..71f60bdc 100644
--- a/src/stories/DateInput/DateInput.stories.tsx
+++ b/src/stories/DateInput/DateInput.stories.tsx
@@ -1,19 +1,45 @@
+import { Meta, Story } from "@storybook/react";
+import { useState } from "react";
import { DateInput } from ".";
-import { Story, Meta } from "@storybook/react";
-import { DatepickerGlobalStyle } from "./_style";
+import { ErrorMessageWrapper } from "../form/Form";
export default {
title: "Inputs/DateInput",
component: DateInput,
} as Meta;
-const DatepickerTemplate: Story = (args) => (
- <>
-
- Seleziona una data nel formato gg-mm-aaaa
-
-
-);
+const DatepickerTemplate: Story = (args) => {
+ function getEighteenYearsAgo() {
+ const date = new Date();
+ date.setFullYear(date.getFullYear() - 18);
+
+ return date;
+ }
+ const [value, setValue] = useState("");
+ const [isInvalid, setIsInvalid] = useState(false);
+ return (
+ <>
+
+ setValue(e.target.value)}
+ onBlur={(e) => {
+ setIsInvalid(!value);
+ }}
+ />
+ {isInvalid && (
+ birth date is mandatory
+ )}
+ value: {value}
+
+ );
+};
export const DatepickerInput = DatepickerTemplate.bind({});
DatepickerInput.args = {
onChange: ({ value }: { value: Date }) => {
diff --git a/src/stories/DateInput/_style.tsx b/src/stories/DateInput/_style.tsx
deleted file mode 100644
index 9baf7ef0..00000000
--- a/src/stories/DateInput/_style.tsx
+++ /dev/null
@@ -1,4826 +0,0 @@
-import { useEffect } from "react";
-import { createGlobalStyle } from "styled-components";
-import { InvalidFocusStyle, InvalidInputStyle } from "../form/_style";
-
-function addOpacityToHex(hex: string, alpha: string) {
- let hexAlphaPercent = parseInt((parseFloat(alpha) * 100).toString(), 16);
- return `${hex}${hexAlphaPercent}`;
-}
-
-export const DatepickerGlobalStyle = createGlobalStyle`${(props) => {
- return `
- @font-face {
- font-family: Mobiscroll;
- src: url(icons_mobiscroll.woff?vytnpl) format("woff"),
- url(icons_mobiscroll.woff) format("woff"),
- url(icons_mobiscroll.ttf?vytnpl) format("truetype");
- font-weight: 400;
- font-style: normal;
- }
-
- .mbsc-font-icon:before {
- font-family: Mobiscroll;
- speak: none;
- font-style: normal;
- font-weight: 400;
- font-variant: normal;
- text-transform: none;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
-
- .mbsc-icon-material-backspace:before {
- content: "\\ea01";
- }
-
- .mbsc-icon-material-check-box-outline-blank:before {
- content: "\\ea02";
- }
-
- .mbsc-icon-material-check:before {
- content: "\\ea03";
- }
-
- .mbsc-icon-material-keyboard-arrow-down:before {
- content: "\\ea04";
- }
-
- .mbsc-icon-material-keyboard-arrow-left:before {
- content: "\\ea05";
- }
-
- .mbsc-icon-material-keyboard-arrow-right:before {
- content: "\\ea06";
- }
-
- .mbsc-icon-material-keyboard-arrow-up:before {
- content: "\\ea07";
- }
-
- .mbsc-icon-material-star-outline:before {
- content: "\\ea08";
- }
-
- .mbsc-icon-material-star:before {
- content: "\\ea09";
- }
-
- .mbsc-icon {
- display: inline-block;
- vertical-align: middle;
- width: 1.5em;
- height: 1.5em;
- line-height: 1.5em;
- text-align: center;
- -webkit-box-flex: 0;
- -webkit-flex: 0 0 auto;
- -moz-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- }
-
- .mbsc-icon > svg {
- display: block;
- margin: 0 auto;
- width: 100%;
- height: 100%;
- fill: currentColor;
- }
-
- .mbsc-material.mbsc-description.mbsc-disabled,
- .mbsc-material.mbsc-form-control-label.mbsc-disabled {
- opacity: 0.3;
- }
-
- .mbsc-form-control-label {
- display: block;
- }
-
- .mbsc-form-control-input {
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- border: 0;
- opacity: 0;
- margin: 0;
- z-index: 3;
- }
-
- .mbsc-material.mbsc-textfield-wrapper {
- margin-bottom: 0;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
-
- .mbsc-material.mbsc-textfield-inner.mbsc-disabled {
- opacity: 0.5;
- }
-
- .mbsc-material.mbsc-textfield {
- display: block;
- width: 100%;
- background-color: transparent;
- border-bottom: 0;
- font-size: 1em;
- -webkit-transition: border-color 0.2s;
- transition: border-color 0.2s;
- }
-
- .mbsc-material.mbsc-textfield-has-icon-left {
- padding-left: 2em;
- }
-
- .mbsc-material.mbsc-textfield-has-icon-right {
- padding-right: 2em;
- }
-
- .mbsc-material.mbsc-textfield-icon {
- top: 0.375em;
- }
-
- .mbsc-material.mbsc-textfield-icon-floating,
- .mbsc-material.mbsc-textfield-icon-outline,
- .mbsc-material.mbsc-textfield-icon-stacked {
- top: 1em;
- }
-
- .mbsc-material .mbsc-textfield-ripple {
- display: none;
- }
-
- .mbsc-material.mbsc-label {
- font-size: 0.75em;
- }
-
- .mbsc-material.mbsc-label-inline {
- line-height: 2em;
- font-size: 1em;
- }
-
- .mbsc-material.mbsc-label-inline.mbsc-ltr {
- padding-right: 0.5em;
- }
-
- .mbsc-material.mbsc-label-inline.mbsc-rtl {
- padding-left: 0.5em;
- }
-
- .mbsc-material.mbsc-label-floating {
- font-size: 1em;
- line-height: 1.5em;
- top: 1.125em;
- }
-
- .mbsc-material.mbsc-label-floating-active {
- -webkit-transform: translateY(-1.125em) scale(0.75);
- transform: translateY(-1.125em) scale(0.75);
- }
-
- .mbsc-material.mbsc-label.mbsc-disabled {
- opacity: 0.5;
- }
-
- .mbsc-material.mbsc-error-message.mbsc-ltr {
- left: 0;
- }
-
- .mbsc-material.mbsc-error-message.mbsc-rtl {
- right: 0;
- }
-
- .mbsc-material.mbsc-error-message-has-icon-left.mbsc-ltr {
- left: 2.66667em;
- }
-
- .mbsc-material.mbsc-error-message-has-icon-right.mbsc-rtl {
- right: 2.66667em;
- }
-
- .mbsc-material.mbsc-textfield-underline-floating,
- .mbsc-material.mbsc-textfield-underline-stacked {
- height: 3em;
- padding-top: 0.875em;
- }
-
- .mbsc-material.mbsc-textfield-icon-underline {
- top: 0.25em;
- }
-
- .mbsc-material.mbsc-textfield-icon-underline.mbsc-textfield-icon-floating,
- .mbsc-material.mbsc-textfield-icon-underline.mbsc-textfield-icon-stacked {
- top: 1.125em;
- }
-
- .mbsc-material.mbsc-label-underline-inline {
- padding-top: 1px;
- }
-
- .mbsc-material.mbsc-label-underline-stacked-has-icon-left.mbsc-ltr {
- left: 2.66667em;
- }
-
- .mbsc-material.mbsc-label-underline-stacked-has-icon-right.mbsc-rtl {
- right: 2.66667em;
- }
-
- .mbsc-material.mbsc-label-underline-floating-has-icon-left.mbsc-ltr {
- left: 2em;
- }
-
- .mbsc-material.mbsc-label-underline-floating-has-icon-right.mbsc-rtl {
- right: 2em;
- }
-
- .mbsc-material.mbsc-textfield-box,
- .mbsc-material.mbsc-textfield-inner-box {
- border-radius: 0.25em;
- }
-
- .mbsc-material.mbsc-textfield-box {
- display: block;
- width: 100%;
- padding: 8px 12px;
- color: ${props.theme.palette.primary};
- font-size: 1rem;
- background-color: #fff;
- background-clip: padding-box;
- border: 1px solid ${props.theme.colors.elementGeneric};
- line-height: 1.5;
- }
-
- .mbsc-material.mbsc-textfield-box::placeholder {
- font-weight: ${props.theme.typography.fontWeight.light};
- color: ${props.theme.colors.gray500};
- }
-
- .mbsc-material.mbsc-textfield-box-floating,
- .mbsc-material.mbsc-textfield-box-stacked {
- height: 3.5em;
- padding-top: 1.25em;
- }
-
- .mbsc-material.mbsc-textfield-underline.mbsc-disabled {
- border-style: dotted;
- }
-
- .mbsc-material.mbsc-label-box-inline {
- padding-top: 1px;
- }
-
- .mbsc-material.mbsc-label-box-stacked {
- top: 0.666667em;
- }
-
- .mbsc-material.mbsc-label-box-floating {
- top: 1em;
- }
-
- .mbsc-material.mbsc-label-box-floating.mbsc-label-floating-active {
- -webkit-transform: translateY(-0.625em) scale(0.75);
- transform: translateY(-0.625em) scale(0.75);
- }
-
- .mbsc-material.mbsc-textfield-inner-outline {
- padding: 0 2px;
- }
-
- .mbsc-material.mbsc-textfield-outline {
- height: 3.5em;
- padding: 2px 1em;
- border: 0;
- border-radius: 4px;
- }
-
- .mbsc-material.mbsc-textfield-fieldset {
- top: -0.5em;
- border: 1px solid;
- border-radius: 4px;
- -webkit-transition: border-color 0.2s;
- transition: border-color 0.2s;
- }
-
- .mbsc-material.mbsc-textfield-fieldset-has-icon-left {
- padding-left: 3em;
- }
-
- .mbsc-material.mbsc-textfield-fieldset-has-icon-right {
- padding-right: 3em;
- }
-
- .mbsc-material.mbsc-textfield-fieldset.mbsc-focus {
- border-width: 2px;
- }
-
- .mbsc-material.mbsc-textfield-legend {
- padding: 0;
- margin: 0;
- font-size: 0.75em;
- color: transparent;
- width: 0.01px;
- white-space: nowrap;
- }
-
- .mbsc-material.mbsc-textfield-legend-active {
- width: auto;
- padding: 0 0.333334em;
- margin: 0 -0.333334em;
- }
-
- .mbsc-material.mbsc-label-outline-inline {
- line-height: 3.375em;
- }
-
- .mbsc-material.mbsc-label-outline-stacked {
- top: -0.5em;
- margin: 0 2px;
- }
-
- .mbsc-material.mbsc-label-outline-floating {
- top: 1em;
- margin: 0 2px;
- }
-
- .mbsc-material.mbsc-label-outline-floating.mbsc-label-floating-active {
- margin-top: -1px;
- -webkit-transform: translateY(-1.5em) scale(0.75);
- transform: translateY(-1.5em) scale(0.75);
- }
-
- .mbsc-material.mbsc-error-message-outline {
- margin: 0 2px;
- }
-
- .mbsc-material.mbsc-textfield-box-has-icon-left,
- .mbsc-material.mbsc-textfield-outline-has-icon-left {
- padding-left: 3em;
- }
-
- .mbsc-material.mbsc-textfield-box-has-icon-right,
- .mbsc-material.mbsc-textfield-outline-has-icon-right {
- padding-right: 3em;
- }
-
- .mbsc-material.mbsc-textfield-icon-box-left,
- .mbsc-material.mbsc-textfield-icon-outline-left {
- left: 0.75em;
- }
-
- .mbsc-material.mbsc-textfield-icon-box-right,
- .mbsc-material.mbsc-textfield-icon-outline-right {
- right: 0.75em;
- }
-
- .mbsc-material.mbsc-label-box-stacked.mbsc-ltr,
- .mbsc-material.mbsc-label-outline-stacked.mbsc-ltr {
- left: 1.333334em;
- }
-
- .mbsc-material.mbsc-label-box-stacked.mbsc-rtl,
- .mbsc-material.mbsc-label-outline-stacked.mbsc-rtl {
- right: 1.333334em;
- }
-
- .mbsc-material.mbsc-label-box-stacked-has-icon-left.mbsc-ltr,
- .mbsc-material.mbsc-label-outline-stacked-has-icon-left.mbsc-ltr {
- left: 4em;
- }
-
- .mbsc-material.mbsc-label-box-stacked-has-icon-right.mbsc-rtl,
- .mbsc-material.mbsc-label-outline-stacked-has-icon-right.mbsc-rtl {
- right: 4em;
- }
-
- .mbsc-material.mbsc-label-box-floating.mbsc-ltr,
- .mbsc-material.mbsc-label-outline-floating.mbsc-ltr {
- left: 1em;
- }
-
- .mbsc-material.mbsc-label-box-floating.mbsc-rtl,
- .mbsc-material.mbsc-label-outline-floating.mbsc-rtl {
- right: 1em;
- }
-
- .mbsc-material.mbsc-label-box-floating-has-icon-left.mbsc-ltr,
- .mbsc-material.mbsc-label-outline-floating-has-icon-left.mbsc-ltr {
- left: 3em;
- }
-
- .mbsc-material.mbsc-label-box-floating-has-icon-left.mbsc-rtl,
- .mbsc-material.mbsc-label-outline-floating-has-icon-left.mbsc-rtl {
- right: 1em;
- }
-
- .mbsc-material.mbsc-label-box-floating-has-icon-right.mbsc-rtl,
- .mbsc-material.mbsc-label-outline-floating-has-icon-right.mbsc-rtl {
- right: 3em;
- }
-
- .mbsc-material.mbsc-error-message-box.mbsc-ltr,
- .mbsc-material.mbsc-error-message-outline.mbsc-ltr {
- left: 1.333334em;
- }
-
- .mbsc-material.mbsc-error-message-box.mbsc-rtl,
- .mbsc-material.mbsc-error-message-outline.mbsc-rtl {
- right: 1.333334em;
- }
-
- .mbsc-material.mbsc-error-message-box.mbsc-error-message-has-icon-left.mbsc-ltr,
- .mbsc-material.mbsc-error-message-outline.mbsc-error-message-has-icon-left.mbsc-ltr {
- left: 4em;
- }
-
- .mbsc-material.mbsc-error-message-box.mbsc-error-message-has-icon-right.mbsc-rtl,
- .mbsc-material.mbsc-error-message-outline.mbsc-error-message-has-icon-right.mbsc-rtl {
- right: 4em;
- }
-
- .mbsc-material.mbsc-select.mbsc-ltr {
- padding-right: 3em;
- }
-
- .mbsc-material.mbsc-select.mbsc-rtl {
- padding-left: 3em;
- }
-
- .mbsc-material.mbsc-select.mbsc-textfield-has-icon-right.mbsc-ltr {
- padding-right: 4.5em;
- }
-
- .mbsc-material.mbsc-select.mbsc-textfield-has-icon-left.mbsc-rtl {
- padding-left: 4.5em;
- }
-
- .mbsc-material.mbsc-select.mbsc-textfield-underline-has-icon-right.mbsc-ltr {
- padding-right: 3.75em;
- }
-
- .mbsc-material.mbsc-select.mbsc-textfield-underline-has-icon-left.mbsc-rtl {
- padding-left: 3.75em;
- }
-
- .mbsc-material.mbsc-select-icon {
- top: 0.375em;
- }
-
- .mbsc-material.mbsc-select-icon.mbsc-ltr {
- right: 0.75em;
- }
-
- .mbsc-material.mbsc-select-icon.mbsc-rtl {
- left: 0.75em;
- }
-
- .mbsc-material.mbsc-select-icon-right.mbsc-ltr {
- right: 3em;
- }
-
- .mbsc-material.mbsc-select-icon-left.mbsc-rtl {
- left: 3em;
- }
-
- .mbsc-material.mbsc-select-icon-floating,
- .mbsc-material.mbsc-select-icon-outline,
- .mbsc-material.mbsc-select-icon-stacked {
- top: 1em;
- }
-
- .mbsc-material.mbsc-select-icon-underline {
- top: 0.25em;
- }
-
- .mbsc-material.mbsc-select-icon-underline.mbsc-ltr {
- right: 0;
- }
-
- .mbsc-material.mbsc-select-icon-underline.mbsc-rtl {
- left: 0;
- }
-
- .mbsc-material.mbsc-select-icon-underline.mbsc-select-icon-right.mbsc-ltr {
- right: 2.25em;
- }
-
- .mbsc-material.mbsc-select-icon-underline.mbsc-select-icon-left.mbsc-rtl {
- left: 2.25em;
- }
-
- .mbsc-material.mbsc-select-icon-underline.mbsc-select-icon-floating,
- .mbsc-material.mbsc-select-icon-underline.mbsc-select-icon-stacked {
- top: 1.125em;
- }
-
- .mbsc-material.mbsc-textarea {
- height: 1.875em;
- padding-bottom: 0.375em;
- }
-
- .mbsc-material.mbsc-textarea.mbsc-textfield-floating,
- .mbsc-material.mbsc-textarea.mbsc-textfield-stacked {
- padding-top: 0;
- }
-
- .mbsc-material.mbsc-textarea.mbsc-textfield-outline {
- height: 1.5em;
- padding-top: 0;
- padding-bottom: 0;
- }
-
- .mbsc-material.mbsc-textarea.mbsc-textfield-underline {
- padding-bottom: 0.3125em;
- }
-
- .mbsc-material.mbsc-textarea-inner.mbsc-textfield-inner-box {
- padding-top: 0.375em;
- }
-
- .mbsc-material.mbsc-textarea-inner.mbsc-textfield-inner-floating,
- .mbsc-material.mbsc-textarea-inner.mbsc-textfield-inner-stacked {
- padding-top: 1.625em;
- }
-
- .mbsc-material.mbsc-textarea-inner.mbsc-textfield-inner-outline {
- padding-top: 1em;
- padding-bottom: 1em;
- }
-
- .mbsc-material.mbsc-textarea-inner.mbsc-textfield-inner-underline {
- padding-top: 0.25em;
- }
-
- .mbsc-material.mbsc-textarea-inner.mbsc-textfield-inner-underline.mbsc-textfield-inner-floating,
- .mbsc-material.mbsc-textarea-inner.mbsc-textfield-inner-underline.mbsc-textfield-inner-stacked {
- padding-top: 1.125em;
- }
-
- .mbsc-material.mbsc-textfield.mbsc-error {
- border-color: #de3226;
- }
-
- .mbsc-material.mbsc-select-icon,
- .mbsc-material.mbsc-textfield-icon {
- color: rgba(0, 0, 0, 0.54);
- }
-
- .mbsc-material.mbsc-textfield-ripple {
- background-color: #1a73e8;
- }
-
- .mbsc-material.mbsc-textfield-ripple.mbsc-error {
- background-color: #de3226;
- }
-
- .mbsc-material.mbsc-label {
- color: rgba(0, 0, 0, 0.6);
- }
-
- .mbsc-material.mbsc-label-floating.mbsc-focus,
- .mbsc-material.mbsc-label-stacked.mbsc-focus {
- color: #1a73e8;
- }
-
- .mbsc-material.mbsc-error-message,
- .mbsc-material.mbsc-label.mbsc-error {
- color: #de3226;
- }
-
- .mbsc-material.mbsc-select {
- background: #fff;
- }
-
- .mbsc-material.mbsc-textfield-box.mbsc-select,
- .mbsc-material.mbsc-textfield-inner-box {
- background: #f5f5f5;
- }
-
- .mbsc-material.mbsc-textfield-box.mbsc-select.mbsc-hover,
- .mbsc-material.mbsc-textfield-inner-box.mbsc-hover {
- background: ${props.theme.colors.white};
- }
-
- .mbsc-material.mbsc-textfield-box.mbsc-select.mbsc-focus,
- .mbsc-material.mbsc-textfield-inner-box.mbsc-focus {
- background: #e3e3e3;
- }
-
- .mbsc-material.mbsc-textfield-fieldset {
- border-color: rgba(0, 0, 0, 0.42);
- }
-
- .mbsc-material.mbsc-textfield-fieldset.mbsc-hover {
- border-color: rgba(0, 0, 0, 0.87);
- }
-
- .mbsc-material.mbsc-textfield-fieldset.mbsc-focus {
- //border-color: #1a73e8;
- }
-
- .mbsc-material.mbsc-textfield-fieldset.mbsc-error {
- border-color: #de3226;
- }
-
- .mbsc-material.mbsc-textfield-fieldset.disabled {
- border-color: rgba(0, 0, 0, 0.87);
- }
-
- .mbsc-material-dark.mbsc-textfield {
- border-bottom-color: #fff;
- color: #fff;
- }
-
- .mbsc-material-dark.mbsc-textfield.mbsc-hover {
- border-color: #fff;
- }
-
- .mbsc-material-dark.mbsc-textfield.mbsc-error {
- border-color: #de3226;
- }
-
- .mbsc-material-dark.mbsc-select-icon,
- .mbsc-material-dark.mbsc-textfield-icon {
- color: #fff;
- }
-
- .mbsc-material-dark.mbsc-textfield-ripple {
- background-color: transparent;
- }
-
- .mbsc-material-dark.mbsc-textfield-ripple.mbsc-error {
- background-color: transparent;
- }
-
- .mbsc-material-dark.mbsc-label {
- color: hsla(0, 0%, 100%, 0.6);
- }
-
- .mbsc-material-dark.mbsc-label-floating.mbsc-focus,
- .mbsc-material-dark.mbsc-label-stacked.mbsc-focus {
- color: #87b0f3;
- }
-
- .mbsc-material-dark.mbsc-error-message,
- .mbsc-material-dark.mbsc-label.mbsc-error {
- color: #de3226;
- }
-
- .mbsc-material-dark.mbsc-select {
- background: #000;
- }
-
- .mbsc-material-dark.mbsc-textfield-box.mbsc-select,
- .mbsc-material-dark.mbsc-textfield-inner-box {
- background: #0a0a0a;
- }
-
- .mbsc-material-dark.mbsc-textfield-box.mbsc-select.mbsc-hover,
- .mbsc-material-dark.mbsc-textfield-inner-box.mbsc-hover {
- background: #121212;
- }
-
- .mbsc-material-dark.mbsc-textfield-box.mbsc-select.mbsc-focus,
- .mbsc-material-dark.mbsc-textfield-inner-box.mbsc-focus {
- background: #1c1c1c;
- }
-
- .mbsc-material-dark.mbsc-textfield-fieldset,
- .mbsc-material-dark.mbsc-textfield-fieldset.mbsc-hover {
- border-color: #fff;
- }
-
- .mbsc-material-dark.mbsc-textfield-fieldset.mbsc-focus {
- border-color: #87b0f3;
- }
-
- .mbsc-material-dark.mbsc-textfield-fieldset.mbsc-error {
- border-color: #de3226;
- }
-
- .mbsc-material-dark.mbsc-textfield-fieldset.disabled {
- border-color: #fff;
- }
-
- @-webkit-keyframes autofill {
- 0% {
- opacity: 1;
- }
- to {
- opacity: 1;
- }
- }
-
- @keyframes autofill {
- 0% {
- opacity: 1;
- }
- to {
- opacity: 1;
- }
- }
-
- .mbsc-textfield-wrapper {
- position: relative;
- display: block;
- margin: 0;
- z-index: 0;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
-
- .mbsc-textfield-wrapper-inline {
- display: -webkit-box;
- display: -webkit-flex;
- display: -moz-box;
- display: -ms-flexbox;
- display: flex;
- }
-
- .mbsc-textfield-inner {
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- position: relative;
- display: block;
- }
-
- .mbsc-textfield-inner-inline {
- -webkit-box-flex: 1;
- -webkit-flex: 1 auto;
- -moz-box-flex: 1;
- -ms-flex: 1 auto;
- flex: 1 auto;
- }
-
- .mbsc-textfield {
- display: block;
- width: 100%;
- font-size: 1em;
- margin: 0;
- padding: 0;
- border: 0;
- border-radius: 0;
- outline: 0;
- font-family: ${props.theme.typography.fontFamily.base};
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- -moz-appearance: none;
- appearance: none;
- -webkit-appearance: none;
- }
-
- .mbsc-textfield:-webkit-autofill {
- -webkit-animation-name: autofill;
- animation-name: autofill;
- }
-
- .mbsc-textfield::-webkit-inner-spin-button {
- height: 2em;
- -webkit-align-self: center;
- align-self: center;
- }
-
- .mbsc-textfield::-moz-placeholder {
- color: ${props.theme.colors.disabled};
- opacity: 1;
- }
-
- .mbsc-textfield::-webkit-input-placeholder {
- color: ${props.theme.colors.disabled};
- opacity: 1;
- }
-
- .mbsc-textfield-floating:-ms-input-placeholder {
- color: transparent;
- }
-
- .mbsc-textfield-floating::-moz-placeholder {
- opacity: 0;
- -moz-transition: opacity 0.2s;
- transition: opacity 0.2s;
- }
-
- .mbsc-textfield-floating::-webkit-input-placeholder {
- opacity: 0;
- -webkit-transition: opacity 0.2s;
- transition: opacity 0.2s;
- }
-
- .mbsc-textfield-floating::-webkit-datetime-edit {
- color: transparent;
- }
-
- .mbsc-textfield-floating-active:-ms-input-placeholder {
- color: inherit;
- }
-
- .mbsc-textfield-floating-active::-moz-placeholder {
- opacity: 0.5;
- }
-
- .mbsc-textfield-floating-active::-webkit-input-placeholder {
- opacity: 0.5;
- }
-
- .mbsc-textfield-floating-active::-webkit-datetime-edit {
- color: inherit;
- }
-
- .mbsc-textfield-fieldset {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- margin: 0;
- padding: 0 1em;
- pointer-events: none;
- }
-
- .mbsc-textfield-icon {
- position: absolute;
- top: 0;
- text-align: center;
- }
-
- .mbsc-textfield-icon-left {
- left: 0;
- }
-
- .mbsc-textfield-icon-right {
- right: 0;
- }
-
- .mbsc-label {
- position: absolute;
- z-index: 1;
- top: 0;
- line-height: 1em;
- white-space: nowrap;
- text-overflow: ellipsis;
- pointer-events: none;
- }
-
- .mbsc-label-inline {
- position: static;
- overflow: hidden;
- -webkit-box-flex: 0;
- -webkit-flex: 0 0 auto;
- -moz-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- width: 30%;
- max-width: 12.5em;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- pointer-events: auto;
- }
-
- .mbsc-label-floating-animate {
- -webkit-transition: -webkit-transform 0.2s;
- transition: -webkit-transform 0.2s;
- transition: transform 0.2s;
- transition: transform 0.2s, -webkit-transform 0.2s;
- }
-
- .mbsc-label-floating.mbsc-ltr {
- -webkit-transform-origin: top left;
- transform-origin: top left;
- }
-
- .mbsc-label-floating.mbsc-rtl {
- -webkit-transform-origin: top right;
- transform-origin: top right;
- }
-
- .mbsc-error-message {
- position: absolute;
- top: 100%;
- font-size: 0.75em;
- line-height: 1.5em;
- }
-
- .mbsc-textfield-file {
- position: absolute;
- left: 0;
- opacity: 0;
- }
-
- .mbsc-select {
- cursor: pointer;
- }
-
- .mbsc-select-icon {
- position: absolute;
- text-align: center;
- pointer-events: none;
- }
-
- .mbsc-textarea {
- resize: none;
- overflow: hidden;
- line-height: 1.5em;
- }
-
- .mbsc-toggle-icon:hover {
- cursor: pointer;
- }
-
- :root {
- --mbsc-safe-top: 0;
- --mbsc-safe-right: 0;
- --mbsc-safe-bottom: 0;
- --mbsc-safe-left: 0;
- }
-
- @supports (top: constant(safe-area-inset-top)) {
- :root {
- --mbsc-safe-top: constant(safe-area-inset-top);
- --mbsc-safe-right: constant(safe-area-inset-right);
- --mbsc-safe-bottom: constant(safe-area-inset-bottom);
- --mbsc-safe-left: constant(safe-area-inset-left);
- }
- }
-
- @supports (top: env(safe-area-inset-top)) {
- :root {
- --mbsc-safe-top: env(safe-area-inset-top);
- --mbsc-safe-right: env(safe-area-inset-right);
- --mbsc-safe-bottom: env(safe-area-inset-bottom);
- --mbsc-safe-left: env(safe-area-inset-left);
- }
- }
-
- .mbsc-font {
- font-family: -apple-system, Segoe UI, Roboto, sans-serif;
- font-size: 16px;
- font-weight: ${props.theme.typography.fontWeight.light};
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
- -webkit-text-size-adjust: 100%;
- }
-
- .mbsc-reset {
- margin: 0;
- padding: 0;
- border: 0;
- background: none;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- }
-
- .mbsc-resize {
- right: 0;
- bottom: 0;
- overflow: hidden;
- z-index: -1;
- }
-
- .mbsc-resize,
- .mbsc-resize-i {
- position: absolute;
- left: 0;
- top: 0;
- }
-
- .mbsc-resize-y {
- width: 200%;
- height: 200%;
- }
-
- .mbsc-hidden {
- visibility: hidden;
- }
-
- .mbsc-ltr {
- direction: ltr;
- }
-
- .mbsc-rtl {
- direction: rtl;
- }
-
- .mbsc-ripple {
- background: currentColor;
- position: absolute;
- top: 0;
- left: 0;
- opacity: 0;
- border-radius: 1000em;
- pointer-events: none;
- -webkit-transform: scale(0);
- transform: scale(0);
- }
-
- .mbsc-flex,
- .mbsc-flex-col {
- display: -webkit-box;
- display: -webkit-flex;
- display: -moz-box;
- display: -ms-flexbox;
- display: flex;
- }
-
- .mbsc-flex-col {
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -webkit-flex-direction: column;
- -moz-box-orient: vertical;
- -moz-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- }
-
- .mbsc-flex-1-1 {
- -webkit-box-flex: 1;
- -webkit-flex: 1 1;
- -moz-box-flex: 1;
- -ms-flex: 1 1;
- flex: 1 1;
- }
-
- @media (-webkit-min-device-pixel-ratio: 2) {
- .mbsc-hb,
- .mbsc-hb:after,
- .mbsc-hb:before {
- border-width: 0.5px !important;
- }
- }
-
- .mbsc-material.mbsc-button {
- min-width: 4.571429em;
- padding: 0.428572em 1.142858em;
- border-radius: 0.285715em;
- font-size: 0.875em;
- font-weight: 600;
- line-height: 1.714286em;
- -webkit-transition: box-shadow 0.2s ease-out, background-color 0.2s ease-out;
- transition: box-shadow 0.2s ease-out, background-color 0.2s ease-out;
- margin: 0.5em;
- }
-
- .mbsc-material.mbsc-button-outline {
- border: 1px solid;
- }
-
- .mbsc-material.mbsc-button .mbsc-icon {
- font-size: 1.142858em;
- }
-
- .mbsc-material.mbsc-icon-button {
- min-width: 0;
- padding: 0.5em;
- border-radius: 2em;
- font-size: 1em;
- line-height: normal;
- }
-
- .mbsc-material.mbsc-icon-button .mbsc-icon {
- width: 1.5em;
- height: 1.5em;
- font-size: 1em;
- }
-
- .mbsc-material.mbsc-button.mbsc-disabled,
- .mbsc-material.mbsc-button:disabled {
- opacity: 0.3;
- }
-
- .mbsc-material.mbsc-ltr.mbsc-button-icon-start {
- padding-right: 0.5em;
- margin-left: -0.25em;
- }
-
- .mbsc-material.mbsc-ltr.mbsc-button-icon-end,
- .mbsc-material.mbsc-rtl.mbsc-button-icon-start {
- padding-left: 0.5em;
- margin-right: -0.25em;
- }
-
- .mbsc-material.mbsc-rtl.mbsc-button-icon-end {
- padding-right: 0.5em;
- margin-left: -0.25em;
- }
-
- .mbsc-material .mbsc-button-group,
- .mbsc-material .mbsc-button-group-justified {
- margin: 0.5em;
- }
-
- .mbsc-material .mbsc-button-group-block {
- margin: 0.5em 1em;
- }
-
- .mbsc-material.mbsc-button-standard {
- background: #cfcfcf;
- color: #000;
- box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
- 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
- }
-
- .mbsc-material.mbsc-button-standard.mbsc-hover {
- box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
- 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
- }
-
- .mbsc-material.mbsc-button-standard.mbsc-active,
- .mbsc-material.mbsc-button-standard.mbsc-focus {
- box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
- 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
- }
-
- .mbsc-material.mbsc-button-flat,
- .mbsc-material.mbsc-button-outline {
- color: #000;
- }
-
- .mbsc-material.mbsc-button-flat.mbsc-active,
- .mbsc-material.mbsc-button-flat.mbsc-hover,
- .mbsc-material.mbsc-button-outline.mbsc-active,
- .mbsc-material.mbsc-button-outline.mbsc-hover {
- background: rgba(0, 0, 0, 0.2);
- }
-
- .mbsc-material.mbsc-button-flat.mbsc-focus,
- .mbsc-material.mbsc-button-outline.mbsc-focus {
- background: rgba(0, 0, 0, 0.3);
- }
-
- .mbsc-material.mbsc-button-outline {
- border-color: #000;
- }
-
- .mbsc-material.mbsc-button-primary.mbsc-button-standard {
- background: #3f97f6;
- color: #fff;
- }
-
- .mbsc-material.mbsc-button-secondary.mbsc-button-standard {
- background: #90979e;
- color: #fff;
- }
-
- .mbsc-material.mbsc-button-success.mbsc-button-standard {
- background: #43be5f;
- color: #fff;
- }
-
- .mbsc-material.mbsc-button-danger.mbsc-button-standard {
- background: #f5504e;
- color: #fff;
- }
-
- .mbsc-material.mbsc-button-warning.mbsc-button-standard {
- background: #f8b042;
- color: #fff;
- }
-
- .mbsc-material.mbsc-button-info.mbsc-button-standard {
- background: #5bb7c5;
- color: #fff;
- }
-
- .mbsc-material.mbsc-button-dark.mbsc-button-standard {
- background: #47494a;
- color: #fff;
- }
-
- .mbsc-material.mbsc-button-light.mbsc-button-standard {
- background: #fff;
- color: #303030;
- }
-
- .mbsc-material.mbsc-button-primary.mbsc-button-flat {
- color: #3f97f6;
- }
-
- .mbsc-material.mbsc-button-primary.mbsc-button-flat.mbsc-active,
- .mbsc-material.mbsc-button-primary.mbsc-button-flat.mbsc-hover {
- background: rgba(63, 151, 246, 0.2);
- }
-
- .mbsc-material.mbsc-button-primary.mbsc-button-flat.mbsc-focus {
- background: rgba(63, 151, 246, 0.3);
- }
-
- .mbsc-material.mbsc-button-secondary.mbsc-button-flat {
- color: #90979e;
- }
-
- .mbsc-material.mbsc-button-secondary.mbsc-button-flat.mbsc-active,
- .mbsc-material.mbsc-button-secondary.mbsc-button-flat.mbsc-hover {
- background: rgba(144, 151, 158, 0.2);
- }
-
- .mbsc-material.mbsc-button-secondary.mbsc-button-flat.mbsc-focus {
- background: rgba(144, 151, 158, 0.3);
- }
-
- .mbsc-material.mbsc-button-success.mbsc-button-flat {
- color: #43be5f;
- }
-
- .mbsc-material.mbsc-button-success.mbsc-button-flat.mbsc-active,
- .mbsc-material.mbsc-button-success.mbsc-button-flat.mbsc-hover {
- background: rgba(67, 190, 95, 0.2);
- }
-
- .mbsc-material.mbsc-button-success.mbsc-button-flat.mbsc-focus {
- background: rgba(67, 190, 95, 0.3);
- }
-
- .mbsc-material.mbsc-button-danger.mbsc-button-flat {
- color: #f5504e;
- }
-
- .mbsc-material.mbsc-button-danger.mbsc-button-flat.mbsc-active,
- .mbsc-material.mbsc-button-danger.mbsc-button-flat.mbsc-hover {
- background: rgba(245, 80, 78, 0.2);
- }
-
- .mbsc-material.mbsc-button-danger.mbsc-button-flat.mbsc-focus {
- background: rgba(245, 80, 78, 0.3);
- }
-
- .mbsc-material.mbsc-button-warning.mbsc-button-flat {
- color: #f8b042;
- }
-
- .mbsc-material.mbsc-button-warning.mbsc-button-flat.mbsc-active,
- .mbsc-material.mbsc-button-warning.mbsc-button-flat.mbsc-hover {
- background: rgba(248, 176, 66, 0.2);
- }
-
- .mbsc-material.mbsc-button-warning.mbsc-button-flat.mbsc-focus {
- background: rgba(248, 176, 66, 0.3);
- }
-
- .mbsc-material.mbsc-button-info.mbsc-button-flat {
- color: #5bb7c5;
- }
-
- .mbsc-material.mbsc-button-info.mbsc-button-flat.mbsc-active,
- .mbsc-material.mbsc-button-info.mbsc-button-flat.mbsc-hover {
- background: rgba(91, 183, 197, 0.2);
- }
-
- .mbsc-material.mbsc-button-info.mbsc-button-flat.mbsc-focus {
- background: rgba(91, 183, 197, 0.3);
- }
-
- .mbsc-material.mbsc-button-dark.mbsc-button-flat {
- color: #47494a;
- }
-
- .mbsc-material.mbsc-button-dark.mbsc-button-flat.mbsc-active,
- .mbsc-material.mbsc-button-dark.mbsc-button-flat.mbsc-hover {
- background: rgba(71, 73, 74, 0.2);
- }
-
- .mbsc-material.mbsc-button-dark.mbsc-button-flat.mbsc-focus {
- background: rgba(71, 73, 74, 0.3);
- }
-
- .mbsc-material.mbsc-button-light.mbsc-button-flat {
- color: #ccc;
- }
-
- .mbsc-material.mbsc-button-light.mbsc-button-flat.mbsc-active,
- .mbsc-material.mbsc-button-light.mbsc-button-flat.mbsc-hover {
- background: hsla(0, 0%, 100%, 0.2);
- }
-
- .mbsc-material.mbsc-button-light.mbsc-button-flat.mbsc-focus {
- background: hsla(0, 0%, 100%, 0.3);
- }
-
- .mbsc-material.mbsc-button-primary.mbsc-button-outline {
- border-color: #3f97f6;
- color: #3f97f6;
- }
-
- .mbsc-material.mbsc-button-primary.mbsc-button-outline.mbsc-active,
- .mbsc-material.mbsc-button-primary.mbsc-button-outline.mbsc-hover {
- background: rgba(63, 151, 246, 0.2);
- }
-
- .mbsc-material.mbsc-button-primary.mbsc-button-outline.mbsc-focus {
- background: rgba(63, 151, 246, 0.3);
- }
-
- .mbsc-material.mbsc-button-secondary.mbsc-button-outline {
- border-color: #90979e;
- color: #90979e;
- }
-
- .mbsc-material.mbsc-button-secondary.mbsc-button-outline.mbsc-active,
- .mbsc-material.mbsc-button-secondary.mbsc-button-outline.mbsc-hover {
- background: rgba(144, 151, 158, 0.2);
- }
-
- .mbsc-material.mbsc-button-secondary.mbsc-button-outline.mbsc-focus {
- background: rgba(144, 151, 158, 0.3);
- }
-
- .mbsc-material.mbsc-button-success.mbsc-button-outline {
- border-color: #43be5f;
- color: #43be5f;
- }
-
- .mbsc-material.mbsc-button-success.mbsc-button-outline.mbsc-active,
- .mbsc-material.mbsc-button-success.mbsc-button-outline.mbsc-hover {
- background: rgba(67, 190, 95, 0.2);
- }
-
- .mbsc-material.mbsc-button-success.mbsc-button-outline.mbsc-focus {
- background: rgba(67, 190, 95, 0.3);
- }
-
- .mbsc-material.mbsc-button-danger.mbsc-button-outline {
- border-color: #f5504e;
- color: #f5504e;
- }
-
- .mbsc-material.mbsc-button-danger.mbsc-button-outline.mbsc-active,
- .mbsc-material.mbsc-button-danger.mbsc-button-outline.mbsc-hover {
- background: rgba(245, 80, 78, 0.2);
- }
-
- .mbsc-material.mbsc-button-danger.mbsc-button-outline.mbsc-focus {
- background: rgba(245, 80, 78, 0.3);
- }
-
- .mbsc-material.mbsc-button-warning.mbsc-button-outline {
- border-color: #f8b042;
- color: #f8b042;
- }
-
- .mbsc-material.mbsc-button-warning.mbsc-button-outline.mbsc-active,
- .mbsc-material.mbsc-button-warning.mbsc-button-outline.mbsc-hover {
- background: rgba(248, 176, 66, 0.2);
- }
-
- .mbsc-material.mbsc-button-warning.mbsc-button-outline.mbsc-focus {
- background: rgba(248, 176, 66, 0.3);
- }
-
- .mbsc-material.mbsc-button-info.mbsc-button-outline {
- border-color: #5bb7c5;
- color: #5bb7c5;
- }
-
- .mbsc-material.mbsc-button-info.mbsc-button-outline.mbsc-active,
- .mbsc-material.mbsc-button-info.mbsc-button-outline.mbsc-hover {
- background: rgba(91, 183, 197, 0.2);
- }
-
- .mbsc-material.mbsc-button-info.mbsc-button-outline.mbsc-focus {
- background: rgba(91, 183, 197, 0.3);
- }
-
- .mbsc-material.mbsc-button-dark.mbsc-button-outline {
- border-color: #47494a;
- color: #47494a;
- }
-
- .mbsc-material.mbsc-button-dark.mbsc-button-outline.mbsc-active,
- .mbsc-material.mbsc-button-dark.mbsc-button-outline.mbsc-hover {
- background: rgba(71, 73, 74, 0.2);
- }
-
- .mbsc-material.mbsc-button-dark.mbsc-button-outline.mbsc-focus {
- background: rgba(71, 73, 74, 0.3);
- }
-
- .mbsc-material.mbsc-button-light.mbsc-button-outline {
- border-color: #ccc;
- color: #ccc;
- }
-
- .mbsc-material.mbsc-button-light.mbsc-button-outline.mbsc-active,
- .mbsc-material.mbsc-button-light.mbsc-button-outline.mbsc-hover {
- background: hsla(0, 0%, 100%, 0.2);
- }
-
- .mbsc-material.mbsc-button-light.mbsc-button-outline.mbsc-focus {
- background: hsla(0, 0%, 100%, 0.3);
- }
-
- .mbsc-material-dark.mbsc-button-standard {
- background: #2b2b2b;
- color: #fff;
- box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
- 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
- }
-
- .mbsc-material-dark.mbsc-button-standard.mbsc-hover {
- box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
- 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
- }
-
- .mbsc-material-dark.mbsc-button-standard.mbsc-active,
- .mbsc-material-dark.mbsc-button-standard.mbsc-focus {
- box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
- 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
- }
-
- .mbsc-material-dark.mbsc-button-flat,
- .mbsc-material-dark.mbsc-button-outline {
- color: #fff;
- }
-
- .mbsc-material-dark.mbsc-button-flat.mbsc-active,
- .mbsc-material-dark.mbsc-button-flat.mbsc-hover,
- .mbsc-material-dark.mbsc-button-outline.mbsc-active,
- .mbsc-material-dark.mbsc-button-outline.mbsc-hover {
- background: hsla(0, 0%, 100%, 0.2);
- }
-
- .mbsc-material-dark.mbsc-button-flat.mbsc-focus,
- .mbsc-material-dark.mbsc-button-outline.mbsc-focus {
- background: hsla(0, 0%, 100%, 0.3);
- }
-
- .mbsc-material-dark.mbsc-button-outline {
- border-color: #fff;
- }
-
- .mbsc-material-dark.mbsc-button-primary.mbsc-button-standard {
- background: #3f97f6;
- color: #000;
- }
-
- .mbsc-material-dark.mbsc-button-secondary.mbsc-button-standard {
- background: #90979e;
- color: #000;
- }
-
- .mbsc-material-dark.mbsc-button-success.mbsc-button-standard {
- background: #43be5f;
- color: #000;
- }
-
- .mbsc-material-dark.mbsc-button-danger.mbsc-button-standard {
- background: #f5504e;
- color: #000;
- }
-
- .mbsc-material-dark.mbsc-button-warning.mbsc-button-standard {
- background: #f8b042;
- color: #000;
- }
-
- .mbsc-material-dark.mbsc-button-info.mbsc-button-standard {
- background: #5bb7c5;
- color: #000;
- }
-
- .mbsc-material-dark.mbsc-button-dark.mbsc-button-standard {
- background: #47494a;
- color: #000;
- }
-
- .mbsc-material-dark.mbsc-button-light.mbsc-button-standard {
- background: #fff;
- color: #fff;
- }
-
- .mbsc-material-dark.mbsc-button-primary.mbsc-button-flat {
- color: #3f97f6;
- }
-
- .mbsc-material-dark.mbsc-button-primary.mbsc-button-flat.mbsc-active,
- .mbsc-material-dark.mbsc-button-primary.mbsc-button-flat.mbsc-hover {
- background: rgba(63, 151, 246, 0.2);
- }
-
- .mbsc-material-dark.mbsc-button-primary.mbsc-button-flat.mbsc-focus {
- background: rgba(63, 151, 246, 0.3);
- }
-
- .mbsc-material-dark.mbsc-button-secondary.mbsc-button-flat {
- color: #90979e;
- }
-
- .mbsc-material-dark.mbsc-button-secondary.mbsc-button-flat.mbsc-active,
- .mbsc-material-dark.mbsc-button-secondary.mbsc-button-flat.mbsc-hover {
- background: rgba(144, 151, 158, 0.2);
- }
-
- .mbsc-material-dark.mbsc-button-secondary.mbsc-button-flat.mbsc-focus {
- background: rgba(144, 151, 158, 0.3);
- }
-
- .mbsc-material-dark.mbsc-button-success.mbsc-button-flat {
- color: #43be5f;
- }
-
- .mbsc-material-dark.mbsc-button-success.mbsc-button-flat.mbsc-active,
- .mbsc-material-dark.mbsc-button-success.mbsc-button-flat.mbsc-hover {
- background: rgba(67, 190, 95, 0.2);
- }
-
- .mbsc-material-dark.mbsc-button-success.mbsc-button-flat.mbsc-focus {
- background: rgba(67, 190, 95, 0.3);
- }
-
- .mbsc-material-dark.mbsc-button-danger.mbsc-button-flat {
- color: #f5504e;
- }
-
- .mbsc-material-dark.mbsc-button-danger.mbsc-button-flat.mbsc-active,
- .mbsc-material-dark.mbsc-button-danger.mbsc-button-flat.mbsc-hover {
- background: rgba(245, 80, 78, 0.2);
- }
-
- .mbsc-material-dark.mbsc-button-danger.mbsc-button-flat.mbsc-focus {
- background: rgba(245, 80, 78, 0.3);
- }
-
- .mbsc-material-dark.mbsc-button-warning.mbsc-button-flat {
- color: #f8b042;
- }
-
- .mbsc-material-dark.mbsc-button-warning.mbsc-button-flat.mbsc-active,
- .mbsc-material-dark.mbsc-button-warning.mbsc-button-flat.mbsc-hover {
- background: rgba(248, 176, 66, 0.2);
- }
-
- .mbsc-material-dark.mbsc-button-warning.mbsc-button-flat.mbsc-focus {
- background: rgba(248, 176, 66, 0.3);
- }
-
- .mbsc-material-dark.mbsc-button-info.mbsc-button-flat {
- color: #5bb7c5;
- }
-
- .mbsc-material-dark.mbsc-button-info.mbsc-button-flat.mbsc-active,
- .mbsc-material-dark.mbsc-button-info.mbsc-button-flat.mbsc-hover {
- background: rgba(91, 183, 197, 0.2);
- }
-
- .mbsc-material-dark.mbsc-button-info.mbsc-button-flat.mbsc-focus {
- background: rgba(91, 183, 197, 0.3);
- }
-
- .mbsc-material-dark.mbsc-button-dark.mbsc-button-flat {
- color: #47494a;
- }
-
- .mbsc-material-dark.mbsc-button-dark.mbsc-button-flat.mbsc-active,
- .mbsc-material-dark.mbsc-button-dark.mbsc-button-flat.mbsc-hover {
- background: rgba(71, 73, 74, 0.2);
- }
-
- .mbsc-material-dark.mbsc-button-dark.mbsc-button-flat.mbsc-focus {
- background: rgba(71, 73, 74, 0.3);
- }
-
- .mbsc-material-dark.mbsc-button-light.mbsc-button-flat {
- color: #ccc;
- }
-
- .mbsc-material-dark.mbsc-button-light.mbsc-button-flat.mbsc-active,
- .mbsc-material-dark.mbsc-button-light.mbsc-button-flat.mbsc-hover {
- background: hsla(0, 0%, 100%, 0.2);
- }
-
- .mbsc-material-dark.mbsc-button-light.mbsc-button-flat.mbsc-focus {
- background: hsla(0, 0%, 100%, 0.3);
- }
-
- .mbsc-material-dark.mbsc-button-primary.mbsc-button-outline {
- border-color: #3f97f6;
- color: #3f97f6;
- }
-
- .mbsc-material-dark.mbsc-button-primary.mbsc-button-outline.mbsc-active,
- .mbsc-material-dark.mbsc-button-primary.mbsc-button-outline.mbsc-hover {
- background: rgba(63, 151, 246, 0.2);
- }
-
- .mbsc-material-dark.mbsc-button-primary.mbsc-button-outline.mbsc-focus {
- background: rgba(63, 151, 246, 0.3);
- }
-
- .mbsc-material-dark.mbsc-button-secondary.mbsc-button-outline {
- border-color: #90979e;
- color: #90979e;
- }
-
- .mbsc-material-dark.mbsc-button-secondary.mbsc-button-outline.mbsc-active,
- .mbsc-material-dark.mbsc-button-secondary.mbsc-button-outline.mbsc-hover {
- background: rgba(144, 151, 158, 0.2);
- }
-
- .mbsc-material-dark.mbsc-button-secondary.mbsc-button-outline.mbsc-focus {
- background: rgba(144, 151, 158, 0.3);
- }
-
- .mbsc-material-dark.mbsc-button-success.mbsc-button-outline {
- border-color: #43be5f;
- color: #43be5f;
- }
-
- .mbsc-material-dark.mbsc-button-success.mbsc-button-outline.mbsc-active,
- .mbsc-material-dark.mbsc-button-success.mbsc-button-outline.mbsc-hover {
- background: rgba(67, 190, 95, 0.2);
- }
-
- .mbsc-material-dark.mbsc-button-success.mbsc-button-outline.mbsc-focus {
- background: rgba(67, 190, 95, 0.3);
- }
-
- .mbsc-material-dark.mbsc-button-danger.mbsc-button-outline {
- border-color: #f5504e;
- color: #f5504e;
- }
-
- .mbsc-material-dark.mbsc-button-danger.mbsc-button-outline.mbsc-active,
- .mbsc-material-dark.mbsc-button-danger.mbsc-button-outline.mbsc-hover {
- background: rgba(245, 80, 78, 0.2);
- }
-
- .mbsc-material-dark.mbsc-button-danger.mbsc-button-outline.mbsc-focus {
- background: rgba(245, 80, 78, 0.3);
- }
-
- .mbsc-material-dark.mbsc-button-warning.mbsc-button-outline {
- border-color: #f8b042;
- color: #f8b042;
- }
-
- .mbsc-material-dark.mbsc-button-warning.mbsc-button-outline.mbsc-active,
- .mbsc-material-dark.mbsc-button-warning.mbsc-button-outline.mbsc-hover {
- background: rgba(248, 176, 66, 0.2);
- }
-
- .mbsc-material-dark.mbsc-button-warning.mbsc-button-outline.mbsc-focus {
- background: rgba(248, 176, 66, 0.3);
- }
-
- .mbsc-material-dark.mbsc-button-info.mbsc-button-outline {
- border-color: #5bb7c5;
- color: #5bb7c5;
- }
-
- .mbsc-material-dark.mbsc-button-info.mbsc-button-outline.mbsc-active,
- .mbsc-material-dark.mbsc-button-info.mbsc-button-outline.mbsc-hover {
- background: rgba(91, 183, 197, 0.2);
- }
-
- .mbsc-material-dark.mbsc-button-info.mbsc-button-outline.mbsc-focus {
- background: rgba(91, 183, 197, 0.3);
- }
-
- .mbsc-material-dark.mbsc-button-dark.mbsc-button-outline {
- border-color: #47494a;
- color: #47494a;
- }
-
- .mbsc-material-dark.mbsc-button-dark.mbsc-button-outline.mbsc-active,
- .mbsc-material-dark.mbsc-button-dark.mbsc-button-outline.mbsc-hover {
- background: rgba(71, 73, 74, 0.2);
- }
-
- .mbsc-material-dark.mbsc-button-dark.mbsc-button-outline.mbsc-focus {
- background: rgba(71, 73, 74, 0.3);
- }
-
- .mbsc-material-dark.mbsc-button-light.mbsc-button-outline {
- border-color: #ccc;
- color: #ccc;
- }
-
- .mbsc-material-dark.mbsc-button-light.mbsc-button-outline.mbsc-active,
- .mbsc-material-dark.mbsc-button-light.mbsc-button-outline.mbsc-hover {
- background: hsla(0, 0%, 100%, 0.2);
- }
-
- .mbsc-material-dark.mbsc-button-light.mbsc-button-outline.mbsc-focus {
- background: hsla(0, 0%, 100%, 0.3);
- }
-
- .mbsc-button {
- position: relative;
- z-index: 1;
- display: inline-block;
- vertical-align: middle;
- display: inline-flex;
- justify-content: center;
- align-items: center;
- overflow: hidden;
- text-align: center;
- text-overflow: ellipsis;
- font-size: 1em;
- box-sizing: border-box;
- touch-action: manipulation;
- user-select: none;
- white-space: nowrap;
- cursor: pointer;
- }
-
- .mbsc-button.mbsc-disabled,
- .mbsc-button:disabled {
- cursor: not-allowed;
- }
-
- .mbsc-button:focus {
- outline: 0;
- }
-
- .mbsc-button::-moz-focus-inner {
- border: 0;
- }
-
- .mbsc-icon-button {
- width: 2.5em;
- height: 2.5em;
- padding: 0.5em;
- -webkit-box-flex: 0;
- -webkit-flex: 0 0 auto;
- -moz-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- }
-
- .mbsc-button-icon > *,
- .mbsc-button-icon > * > * {
- height: 100%;
- }
-
- .mbsc-button-icon-end {
- -webkit-box-ordinal-group: 2;
- -webkit-order: 1;
- -moz-box-ordinal-group: 2;
- -ms-flex-order: 1;
- order: 1;
- }
-
- .mbsc-button-group,
- .mbsc-button-group-block,
- .mbsc-button-group-justified {
- border: 1px solid transparent;
- }
-
- .mbsc-button-block,
- .mbsc-button-group-block .mbsc-button {
- display: block;
- width: 100%;
- margin-left: 0 !important;
- margin-right: 0 !important;
- }
-
- .mbsc-button-group-justified,
- .mbsc-button-group-justified mbsc-button {
- display: -webkit-box;
- display: -webkit-flex;
- display: -moz-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-wrap: wrap;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
- }
-
- .mbsc-button-group-justified .mbsc-button,
- .mbsc-button-group-justified mbsc-button {
- -webkit-box-flex: 1;
- -webkit-flex: 1 auto;
- -moz-box-flex: 1;
- -ms-flex: 1 auto;
- flex: 1 auto;
- }
-
- .mbsc-material.mbsc-popup-body-anchored,
- .mbsc-material.mbsc-popup-body-center,
- .mbsc-material.mbsc-popup-body-round {
- border-radius: 0.25em;
- }
-
- .mbsc-material.mbsc-popup-header {
- font-size: 1.25em;
- font-weight: 500;
- padding: 0.8em 0.8em 0;
- line-height: 1.4em;
- }
-
- .mbsc-material.mbsc-popup-buttons {
- padding: 0.5em;
- }
-
- .mbsc-material.mbsc-popup-buttons.mbsc-ltr,
- .mbsc-material.mbsc-popup-buttons.mbsc-rtl {
- text-align: right;
- }
-
- .mbsc-material.mbsc-popup-button.mbsc-button-flat {
- margin-left: 0;
- margin-right: 0;
- }
-
- .mbsc-material.mbsc-popup-button.mbsc-font {
- margin-top: 0;
- margin-bottom: 0;
- font-weight: 500;
- font-size: 0.9375em;
- }
-
- .mbsc-material.mbsc-popup-round .mbsc-popup-body-bottom-full {
- border-radius: 0.25em 0.25em 0 0;
- }
-
- .mbsc-material.mbsc-popup-round .mbsc-popup-body-top-full {
- border-radius: 0 0 0.25em 0.25em;
- }
-
- .mbsc-material.mbsc-popup-body {
- background: #fff;
- box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2),
- 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
- color: #303030;
- }
-
- .mbsc-material.mbsc-popup-arrow {
- background: #fff;
- box-shadow: 0 0 1em rgba(0, 0, 0, 0.2);
- }
-
- .mbsc-material.mbsc-popup-button.mbsc-font {
- color: #1a73e8;
- }
-
- .mbsc-material-dark.mbsc-popup-body {
- background: #303030;
- box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2),
- 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
- color: #fff;
- }
-
- .mbsc-material-dark.mbsc-popup-arrow {
- background: #303030;
- box-shadow: 0 0 1em rgba(0, 0, 0, 0.2);
- }
-
- .mbsc-material-dark.mbsc-popup-button.mbsc-font {
- color: #87b0f3;
- }
-
- @-webkit-keyframes mbsc-fade-in {
- 0% {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
- }
-
- @keyframes mbsc-fade-in {
- 0% {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
- }
-
- @-webkit-keyframes mbsc-fade-out {
- 0% {
- opacity: 1;
- }
- to {
- opacity: 0;
- }
- }
-
- @keyframes mbsc-fade-out {
- 0% {
- opacity: 1;
- }
- to {
- opacity: 0;
- }
- }
-
- @-webkit-keyframes mbsc-pop-in {
- 0% {
- opacity: 0;
- -webkit-transform: scale(0.8);
- transform: scale(0.8);
- }
- to {
- opacity: 1;
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- }
-
- @keyframes mbsc-pop-in {
- 0% {
- opacity: 0;
- -webkit-transform: scale(0.8);
- transform: scale(0.8);
- }
- to {
- opacity: 1;
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- }
-
- @-webkit-keyframes mbsc-pop-out {
- 0% {
- opacity: 1;
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- to {
- opacity: 0;
- -webkit-transform: scale(0.8);
- transform: scale(0.8);
- }
- }
-
- @keyframes mbsc-pop-out {
- 0% {
- opacity: 1;
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- to {
- opacity: 0;
- -webkit-transform: scale(0.8);
- transform: scale(0.8);
- }
- }
-
- @-webkit-keyframes mbsc-slide-up-in {
- 0% {
- -webkit-transform: translateY(100%);
- transform: translateY(100%);
- }
- to {
- -webkit-transform: translateY(0);
- transform: translateY(0);
- }
- }
-
- @keyframes mbsc-slide-up-in {
- 0% {
- -webkit-transform: translateY(100%);
- transform: translateY(100%);
- }
- to {
- -webkit-transform: translateY(0);
- transform: translateY(0);
- }
- }
-
- @-webkit-keyframes mbsc-slide-up-out {
- 0% {
- -webkit-transform: translateY(0);
- transform: translateY(0);
- }
- to {
- -webkit-transform: translateY(100%);
- transform: translateY(100%);
- }
- }
-
- @keyframes mbsc-slide-up-out {
- 0% {
- -webkit-transform: translateY(0);
- transform: translateY(0);
- }
- to {
- -webkit-transform: translateY(100%);
- transform: translateY(100%);
- }
- }
-
- @-webkit-keyframes mbsc-slide-down-in {
- 0% {
- -webkit-transform: translateY(-100%);
- transform: translateY(-100%);
- }
- to {
- -webkit-transform: translateY(0);
- transform: translateY(0);
- }
- }
-
- @keyframes mbsc-slide-down-in {
- 0% {
- -webkit-transform: translateY(-100%);
- transform: translateY(-100%);
- }
- to {
- -webkit-transform: translateY(0);
- transform: translateY(0);
- }
- }
-
- @-webkit-keyframes mbsc-slide-down-out {
- 0% {
- -webkit-transform: translateY(0);
- transform: translateY(0);
- }
- to {
- -webkit-transform: translateY(-100%);
- transform: translateY(-100%);
- }
- }
-
- @keyframes mbsc-slide-down-out {
- 0% {
- -webkit-transform: translateY(0);
- transform: translateY(0);
- }
- to {
- -webkit-transform: translateY(-100%);
- transform: translateY(-100%);
- }
- }
-
- .mbsc-popup-open-ios {
- overflow: hidden;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- height: auto;
- }
-
- .mbsc-popup-ctx {
- position: relative;
- --mbsc-safe-top: 0;
- --mbsc-safe-right: 0;
- --mbsc-safe-bottom: 0;
- --mbsc-safe-left: 0;
- }
-
- .mbsc-popup-limits {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: -1;
- }
-
- .mbsc-popup-limits-anchored,
- .mbsc-popup-limits-center {
- margin: 1em;
- }
-
- .mbsc-popup-wrapper {
- z-index: 99998;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
-
- .mbsc-popup,
- .mbsc-popup-wrapper {
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
-
- .mbsc-popup-wrapper {
- position: fixed;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- pointer-events: none;
- display: -webkit-box;
- display: -webkit-flex;
- display: -moz-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -moz-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- border: 0 solid transparent;
- }
-
- .mbsc-popup-wrapper-ctx {
- position: absolute;
- right: auto;
- bottom: auto;
- width: 100%;
- height: 100%;
- overflow: hidden;
- }
-
- .mbsc-popup-wrapper-center {
- padding: 1em;
- -webkit-box-align: center;
- -webkit-align-items: center;
- -moz-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- border-width: var(--mbsc-safe-top) var(--mbsc-safe-right)
- var(--mbsc-safe-bottom) var(--mbsc-safe-left);
- }
-
- .mbsc-popup-wrapper-top {
- -webkit-box-align: start;
- -webkit-align-items: flex-start;
- -moz-box-align: start;
- -ms-flex-align: start;
- align-items: flex-start;
- border-bottom: var(--mbsc-safe-bottom) solid transparent;
- }
-
- .mbsc-popup-wrapper-bottom {
- -webkit-box-align: end;
- -webkit-align-items: flex-end;
- -moz-box-align: end;
- -ms-flex-align: end;
- align-items: flex-end;
- border-top-width: var(--mbsc-safe-top);
- }
-
- .mbsc-popup-wrapper-anchored {
- border-left-width: var(--mbsc-safe-left);
- border-bottom-width: var(--mbsc-safe-bottom);
- border-right-width: var(--mbsc-safe-right);
- border-top-width: 0;
- }
-
- .mbsc-popup-hidden {
- opacity: 0;
- }
-
- .mbsc-popup-overlay {
- position: absolute;
- z-index: 1;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- margin: -10em;
- pointer-events: auto;
- background: rgba(0, 0, 0, 0.5);
- -webkit-transform: translateZ(0);
- transform: translateZ(0);
- }
-
- .mbsc-popup-overlay-in {
- opacity: 1;
- -webkit-animation: mbsc-fade-in 0.15s cubic-bezier(0, 0, 0.2, 1);
- animation: mbsc-fade-in 0.15s cubic-bezier(0, 0, 0.2, 1);
- }
-
- .mbsc-popup-overlay-out {
- opacity: 0;
- -webkit-animation: mbsc-fade-out 75ms cubic-bezier(0.4, 0, 1, 1);
- animation: mbsc-fade-out 75ms cubic-bezier(0.4, 0, 1, 1);
- }
-
- .mbsc-popup {
- display: -webkit-box;
- display: -webkit-flex;
- display: -moz-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -webkit-flex-direction: column;
- -moz-box-orient: vertical;
- -moz-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- max-height: 100%;
- min-width: 12em;
- position: relative;
- z-index: 2;
- pointer-events: auto;
- text-shadow: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
-
- .mbsc-popup-center {
- min-width: 16em;
- }
-
- .mbsc-popup-bottom {
- width: 100%;
- bottom: 0;
- }
-
- .mbsc-popup-top {
- width: 100%;
- top: 0;
- }
-
- .mbsc-popup-anchored {
- position: absolute;
- }
-
- .mbsc-popup-anchored-left {
- margin-left: -1em;
- }
-
- .mbsc-popup-anchored-right {
- margin-left: 1em;
- }
-
- .mbsc-popup-arrow-wrapper {
- position: absolute;
- z-index: 1;
- overflow: hidden;
- pointer-events: none;
- }
-
- .mbsc-popup-arrow-wrapper-bottom,
- .mbsc-popup-arrow-wrapper-top {
- left: 0;
- right: 0;
- height: 2em;
- }
-
- .mbsc-popup-arrow-wrapper-left,
- .mbsc-popup-arrow-wrapper-right {
- top: 0;
- bottom: 0;
- width: 2em;
- }
-
- .mbsc-popup-arrow-wrapper-top {
- top: 100%;
- }
-
- .mbsc-popup-arrow-wrapper-bottom {
- bottom: 100%;
- }
-
- .mbsc-popup-arrow-wrapper-left {
- left: 100%;
- }
-
- .mbsc-popup-arrow-wrapper-right {
- right: 100%;
- }
-
- .mbsc-popup-arrow {
- position: absolute;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- width: 1.5em;
- height: 1.5em;
- pointer-events: auto;
- }
-
- .mbsc-popup-arrow-top {
- bottom: 1.25em;
- }
-
- .mbsc-popup-arrow-bottom {
- top: 1.25em;
- }
-
- .mbsc-popup-arrow-bottom,
- .mbsc-popup-arrow-top {
- left: 50%;
- margin-left: -0.75em;
- -webkit-transform: rotate(-45deg);
- transform: rotate(-45deg);
- }
-
- .mbsc-popup-arrow-left {
- right: 1.25em;
- }
-
- .mbsc-popup-arrow-right {
- left: 1.25em;
- }
-
- .mbsc-popup-arrow-left,
- .mbsc-popup-arrow-right {
- top: 50%;
- margin-top: -0.75em;
- -webkit-transform: rotate(45deg);
- transform: rotate(45deg);
- }
-
- .mbsc-popup-focus {
- outline: 0;
- }
-
- .mbsc-popup-body {
- display: -webkit-box;
- display: -webkit-flex;
- display: -moz-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -webkit-flex-direction: column;
- -moz-box-orient: vertical;
- -moz-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- overflow: hidden;
- -webkit-transform: translateZ(0);
- transform: translateZ(0);
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 auto;
- -moz-box-flex: 1;
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
- }
-
- .mbsc-popup-body-top {
- padding-top: var(--mbsc-safe-top);
- }
-
- .mbsc-popup-body-bottom {
- padding-bottom: var(--mbsc-safe-bottom);
- }
-
- .mbsc-popup-body-bottom,
- .mbsc-popup-body-top {
- padding-left: var(--mbsc-safe-left);
- padding-right: var(--mbsc-safe-right);
- }
-
- .mbsc-popup-body-round {
- padding: 0;
- }
-
- .mbsc-popup-header {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
-
- .mbsc-popup-content {
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 auto;
- -moz-box-flex: 1;
- -ms-flex: 1 1 auto;
- overflow: auto;
- -webkit-overflow-scrolling: touch;
- flex: 1 1 auto;
- }
-
- .mbsc-popup-padding {
- padding: 1em;
- }
-
- .mbsc-popup-buttons {
- -webkit-box-flex: 0;
- -webkit-flex: none;
- -moz-box-flex: 0;
- -ms-flex: none;
- flex: none;
- }
-
- .mbsc-popup-pop-in {
- opacity: 1;
- -webkit-animation: mbsc-pop-in 0.15s cubic-bezier(0, 0, 0.2, 1);
- animation: mbsc-pop-in 0.15s cubic-bezier(0, 0, 0.2, 1);
- }
-
- .mbsc-popup-pop-out {
- opacity: 0;
- -webkit-animation: mbsc-pop-out 75ms cubic-bezier(0.4, 0, 1, 1);
- animation: mbsc-pop-out 75ms cubic-bezier(0.4, 0, 1, 1);
- }
-
- .mbsc-popup-slide-up-in {
- -webkit-animation: mbsc-slide-up-in 0.25s cubic-bezier(0, 0, 0.2, 1);
- animation: mbsc-slide-up-in 0.25s cubic-bezier(0, 0, 0.2, 1);
- }
-
- .mbsc-popup-slide-up-out {
- -webkit-animation: mbsc-slide-up-out 0.2s cubic-bezier(0.4, 0, 1, 1);
- animation: mbsc-slide-up-out 0.2s cubic-bezier(0.4, 0, 1, 1);
- }
-
- .mbsc-popup-slide-down-in {
- -webkit-animation: mbsc-slide-down-in 0.25s cubic-bezier(0, 0, 0.2, 1);
- animation: mbsc-slide-down-in 0.25s cubic-bezier(0, 0, 0.2, 1);
- }
-
- .mbsc-popup-slide-down-out {
- -webkit-animation: mbsc-slide-down-out 0.2s cubic-bezier(0.4, 0, 1, 1);
- animation: mbsc-slide-down-out 0.2s cubic-bezier(0.4, 0, 1, 1);
- }
-
- .mbsc-popup-pointer.mbsc-picker .mbsc-popup-overlay,
- .mbsc-popup-pointer .mbsc-popup-overlay-anchored {
- background: none;
- }
-
- .mbsc-popup-round .mbsc-popup-slide-up-in {
- -webkit-animation-name: mbsc-slide-up-in, mbsc-fade-in;
- animation-name: mbsc-slide-up-in, mbsc-fade-in;
- }
-
- .mbsc-popup-round .mbsc-popup-slide-up-out {
- -webkit-animation-name: mbsc-slide-up-out, mbsc-fade-out;
- animation-name: mbsc-slide-up-out, mbsc-fade-out;
- }
-
- .mbsc-popup-round .mbsc-popup-slide-down-in {
- -webkit-animation-name: mbsc-slide-down-in, mbsc-fade-in;
- animation-name: mbsc-slide-down-in, mbsc-fade-in;
- }
-
- .mbsc-popup-round .mbsc-popup-slide-down-out {
- -webkit-animation-name: mbsc-slide-down-out, mbsc-fade-out;
- animation-name: mbsc-slide-down-out, mbsc-fade-out;
- }
-
- .mbsc-popup-round .mbsc-popup-bottom,
- .mbsc-popup-round .mbsc-popup-top {
- width: auto;
- margin-top: 3em;
- margin-bottom: 3em;
- }
-
- .mbsc-material.mbsc-calendar-wrapper-fixed:after {
- content: "";
- position: absolute;
- z-index: 4;
- bottom: -0.5em;
- left: 0;
- right: 0;
- height: 0.5em;
- pointer-events: none;
- }
-
- .mbsc-material.mbsc-calendar-controls {
- padding: 0.5em;
- }
-
- .mbsc-material.mbsc-calendar-header .mbsc-calendar-week-days {
- padding: 0 0.5em;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
-
- .mbsc-material.mbsc-calendar-week-day {
- height: 2.5em;
- line-height: 2.5em;
- font-size: 0.75em;
- font-weight: 700;
- }
-
- .mbsc-material.mbsc-calendar-week-nr {
- width: 2.363637em;
- font-size: 0.6875em;
- line-height: 3em;
- font-weight: 700;
- }
-
- .mbsc-material.mbsc-calendar-button.mbsc-button {
- padding: 0.428572em;
- }
-
- .mbsc-material.mbsc-calendar-title {
- font-size: ${props.theme.typography.fontSize.base};
- font-weight: ${props.theme.typography.fontWeight.light};
- text-transform: none;
- line-height: 1.4em;
- }
-
- .mbsc-material.mbsc-calendar-cell-text {
- height: 2em;
- padding: 0 0.5em;
- line-height: 2em;
- border-radius: 2em;
- }
-
- .mbsc-material.mbsc-calendar-day-text {
- height: 1.846154em;
- width: 1.846154em;
- line-height: 1.846154em;
- margin: 0.230769em auto;
- padding: 0;
- font-size: 0.8125em;
- border: 2px solid transparent;
- }
-
- .mbsc-material.mbsc-range-day:after,
- .mbsc-material.mbsc-range-hover:before {
- content: "";
- height: 1.75em;
- position: absolute;
- left: 0;
- right: 0;
- top: 0.25em;
- z-index: -1;
- }
-
- .mbsc-material.mbsc-range-hover:before {
- -moz-box-sizing: content-box;
- box-sizing: content-box;
- height: 1.5em;
- border-top: 2px dashed;
- border-bottom: 2px dashed;
- }
-
- .mbsc-material.mbsc-range-day-end.mbsc-rtl:after,
- .mbsc-material.mbsc-range-day-start.mbsc-ltr:after {
- margin-left: -0.875em;
- border-radius: 2em 0 0 2em;
- left: 50%;
- right: 0;
- }
-
- .mbsc-material.mbsc-range-day-end.mbsc-ltr:after,
- .mbsc-material.mbsc-range-day-start.mbsc-rtl:after {
- margin-right: -0.875em;
- border-radius: 0 2em 2em 0;
- right: 50%;
- left: 0;
- }
-
- .mbsc-material.mbsc-range-hover-end.mbsc-rtl:before,
- .mbsc-material.mbsc-range-hover-start.mbsc-ltr:before {
- left: 50%;
- right: 0;
- }
-
- .mbsc-material.mbsc-range-hover-end.mbsc-ltr:before,
- .mbsc-material.mbsc-range-hover-start.mbsc-rtl:before {
- right: 50%;
- left: 0;
- }
-
- .mbsc-material.mbsc-range-day-start.mbsc-range-day-end:after,
- .mbsc-material.mbsc-range-hover-start.mbsc-range-hover-end:before {
- display: none;
- }
-
- .mbsc-material.mbsc-calendar-marks {
- margin-top: -0.375em;
- -webkit-transition: -webkit-transform 0.1s ease-out;
- transition: -webkit-transform 0.1s ease-out;
- transition: transform 0.1s ease-out;
- transition: transform 0.1s ease-out, -webkit-transform 0.1s ease-out;
- }
-
- .mbsc-material.mbsc-calendar-day-colors .mbsc-calendar-marks,
- .mbsc-material.mbsc-focus .mbsc-calendar-marks,
- .mbsc-material.mbsc-highlighted .mbsc-calendar-marks,
- .mbsc-material.mbsc-hover-highlighted .mbsc-calendar-marks,
- .mbsc-material.mbsc-hover .mbsc-calendar-marks,
- .mbsc-material.mbsc-selected .mbsc-calendar-marks {
- -webkit-transform: translate3d(0, 0.25em, 0);
- transform: translate3d(0, 0.25em, 0);
- }
-
- .mbsc-material.mbsc-calendar-label {
- font-weight: 600;
- border-radius: 0.2em;
- }
-
- .mbsc-material.mbsc-calendar-label-background {
- background: currentColor;
- border-radius: 0.2em;
- }
-
- .mbsc-material.mbsc-calendar-text:before {
- border-radius: 0.2em;
- }
-
- .mbsc-material.mbsc-calendar-height-md .mbsc-calendar-slide {
- padding: 0;
- }
-
- .mbsc-material.mbsc-calendar-height-md .mbsc-calendar-day {
- border-left: 1px solid;
- border-bottom: 1px solid;
- }
-
- .mbsc-material.mbsc-calendar-height-md .mbsc-calendar-week-nr {
- padding: 0;
- font-size: 0.6875em;
- line-height: 3.636363em;
- }
-
- .mbsc-material.mbsc-calendar-width-md .mbsc-calendar-week-days {
- padding: 0;
- }
-
- .mbsc-material.mbsc-calendar-width-md .mbsc-calendar-week-day {
- padding: 0 1em;
- }
-
- .mbsc-material.mbsc-calendar-width-md .mbsc-calendar-day-inner {
- min-height: 4em;
- }
-
- .mbsc-material.mbsc-calendar-width-md
- .mbsc-calendar-day-labels
- .mbsc-calendar-day-inner {
- min-height: 5.5em;
- }
-
- .mbsc-material.mbsc-calendar-width-md .mbsc-calendar-day-text {
- margin: 0.461539em;
- }
-
- .mbsc-material.mbsc-calendar-width-md .mbsc-calendar-marks {
- padding: 0 1.125em;
- margin-left: -1px;
- margin-right: -1px;
- }
-
- .mbsc-material.mbsc-calendar-width-md .mbsc-calendar-text {
- height: 1.8em;
- line-height: 1.8em;
- margin: 0 0.4em 0.2em;
- }
-
- .mbsc-material.mbsc-calendar-width-md .mbsc-calendar-text:before {
- border-radius: 0.4em;
- }
-
- .mbsc-material.mbsc-calendar-width-md .mbsc-calendar-label {
- padding: 0 0.4em;
- border-radius: 0.4em;
- }
-
- .mbsc-material.mbsc-calendar-width-md .mbsc-calendar-label-background {
- border-radius: 0.4em;
- }
-
- .mbsc-material.mbsc-calendar-width-md .mbsc-calendar-label-text {
- font-size: 1.2em;
- }
-
- .mbsc-material.mbsc-calendar-height-md.mbsc-calendar-width-md
- .mbsc-calendar-day.mbsc-ltr,
- .mbsc-material.mbsc-calendar-height-md.mbsc-calendar-width-md
- .mbsc-calendar-marks.mbsc-ltr,
- .mbsc-material.mbsc-calendar-height-md.mbsc-calendar-width-md
- .mbsc-calendar-week-day.mbsc-ltr {
- text-align: left;
- }
-
- .mbsc-material.mbsc-calendar-height-md.mbsc-calendar-width-md
- .mbsc-calendar-day.mbsc-rtl,
- .mbsc-material.mbsc-calendar-height-md.mbsc-calendar-width-md
- .mbsc-calendar-marks.mbsc-rtl,
- .mbsc-material.mbsc-calendar-height-md.mbsc-calendar-width-md
- .mbsc-calendar-week-day.mbsc-rtl {
- text-align: right;
- }
-
- .mbsc-material.mbsc-calendar-wrapper:after {
- box-shadow: inset 0 0.5em 0.25em -0.5em rgba(48, 48, 48, 0.5);
- }
-
- .mbsc-material.mbsc-calendar-button.mbsc-button {
- color: #303030;
- }
-
- .mbsc-material.mbsc-calendar-picker-slide,
- .mbsc-material.mbsc-calendar-slide {
- background: #fff;
- }
-
- .mbsc-material.mbsc-calendar-week-day {
- color: rgba(48, 48, 48, 0.7);
- }
-
- .mbsc-material.mbsc-calendar-cell-text {
- color: #303030;
- }
-
- .mbsc-material.mbsc-calendar-today {
- color: #1a73e8;
- }
-
- .mbsc-material.mbsc-focus .mbsc-calendar-cell-text {
- box-shadow: 0 0 0 2px rgba(48, 48, 48, 0.7);
- }
-
- .mbsc-material.mbsc-hover .mbsc-calendar-cell-text {
- background: rgba(0, 0, 0, 0.1);
- }
-
- .mbsc-material.mbsc-range-hover:before {
- border-color: #e6e6e6;
- }
-
- .mbsc-material.mbsc-range-day:after {
- background-color: rgba(26, 115, 232, 0.25);
- }
-
- .mbsc-material.mbsc-selected .mbsc-calendar-cell-text {
- background: #1a73e8;
- border-color: #1a73e8;
- color: #fff;
- }
-
- .mbsc-material.mbsc-calendar-mark {
- background: #1a73e8;
- }
-
- .mbsc-material.mbsc-calendar-label {
- color: #1a73e8;
- }
-
- .mbsc-material.mbsc-calendar-label-inner {
- color: #fff;
- }
-
- .mbsc-material.mbsc-calendar-label.mbsc-calendar-label-active,
- .mbsc-material.mbsc-calendar-label.mbsc-calendar-label-dragging {
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12),
- 0 1px 3px -1px rgba(0, 0, 0, 0.2);
- }
-
- .mbsc-material.mbsc-calendar-text-more {
- box-shadow: none;
- }
-
- .mbsc-material.mbsc-calendar-text-more .mbsc-calendar-label-text {
- color: #303030;
- }
-
- .mbsc-material.mbsc-calendar-popup .mbsc-popup-arrow,
- .mbsc-material.mbsc-calendar-popup .mbsc-popup-body {
- background: #fff;
- }
-
- .mbsc-material.mbsc-calendar-height-md .mbsc-calendar-day,
- .mbsc-material.mbsc-calendar-height-md .mbsc-calendar-week-day {
- border-color: #cfcfcf;
- }
-
- .mbsc-material-dark.mbsc-calendar-wrapper:after {
- box-shadow: inset 0 0.5em 0.25em -0.5em hsla(0, 0%, 100%, 0.5);
- }
-
- .mbsc-material-dark.mbsc-calendar-button.mbsc-button {
- color: #fff;
- }
-
- .mbsc-material-dark.mbsc-calendar-slide {
- background: #000;
- }
-
- .mbsc-material-dark.mbsc-calendar-picker-slide {
- background: #303030;
- }
-
- .mbsc-material-dark.mbsc-calendar-week-day {
- color: hsla(0, 0%, 100%, 0.7);
- }
-
- .mbsc-material-dark.mbsc-calendar-cell-text {
- color: #fff;
- }
-
- .mbsc-material-dark.mbsc-calendar-today {
- color: #87b0f3;
- }
-
- .mbsc-material-dark.mbsc-focus .mbsc-calendar-cell-text {
- box-shadow: 0 0 0 2px hsla(0, 0%, 100%, 0.7);
- }
-
- .mbsc-material-dark.mbsc-hover .mbsc-calendar-cell-text {
- background: hsla(0, 0%, 100%, 0.1);
- }
-
- .mbsc-material-dark.mbsc-range-hover:before {
- border-color: #1a1a1a;
- }
-
- .mbsc-material-dark.mbsc-range-day:after {
- background-color: rgba(135, 176, 243, 0.25);
- }
-
- .mbsc-material-dark.mbsc-selected .mbsc-calendar-cell-text {
- background: #87b0f3;
- border-color: #87b0f3;
- color: #000;
- }
-
- .mbsc-material-dark.mbsc-calendar-mark {
- background: #87b0f3;
- }
-
- .mbsc-material-dark.mbsc-calendar-label {
- color: #87b0f3;
- }
-
- .mbsc-material-dark.mbsc-calendar-label-inner {
- color: #000;
- }
-
- .mbsc-material-dark.mbsc-calendar-label.mbsc-calendar-label-active,
- .mbsc-material-dark.mbsc-calendar-label.mbsc-calendar-label-dragging {
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12),
- 0 1px 3px -1px rgba(0, 0, 0, 0.2);
- }
-
- .mbsc-material-dark.mbsc-calendar-text-more {
- box-shadow: none;
- }
-
- .mbsc-material-dark.mbsc-calendar-text-more .mbsc-calendar-label-text {
- color: #fff;
- }
-
- .mbsc-material-dark.mbsc-calendar-popup .mbsc-popup-arrow,
- .mbsc-material-dark.mbsc-calendar-popup .mbsc-popup-body {
- background: #303030;
- }
-
- .mbsc-material-dark.mbsc-calendar-height-md .mbsc-calendar-day,
- .mbsc-material-dark.mbsc-calendar-height-md .mbsc-calendar-week-day {
- border-color: #2b2b2b;
- }
-
- @-webkit-keyframes mbsc-zoom-in-up {
- 0% {
- opacity: 0;
- -webkit-transform: scale(2);
- transform: scale(2);
- }
- to {
- opacity: 1;
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- }
-
- @keyframes mbsc-zoom-in-up {
- 0% {
- opacity: 0;
- -webkit-transform: scale(2);
- transform: scale(2);
- }
- to {
- opacity: 1;
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- }
-
- @-webkit-keyframes mbsc-zoom-in-down {
- 0% {
- opacity: 0;
- -webkit-transform: scale(0.5);
- transform: scale(0.5);
- }
- to {
- opacity: 1;
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- }
-
- @keyframes mbsc-zoom-in-down {
- 0% {
- opacity: 0;
- -webkit-transform: scale(0.5);
- transform: scale(0.5);
- }
- to {
- opacity: 1;
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- }
-
- @-webkit-keyframes mbsc-zoom-out-up {
- 0% {
- opacity: 1;
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- to {
- opacity: 0;
- -webkit-transform: scale(2);
- transform: scale(2);
- }
- }
-
- @keyframes mbsc-zoom-out-up {
- 0% {
- opacity: 1;
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- to {
- opacity: 0;
- -webkit-transform: scale(2);
- transform: scale(2);
- }
- }
-
- @-webkit-keyframes mbsc-zoom-out-down {
- 0% {
- opacity: 1;
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- to {
- opacity: 0;
- -webkit-transform: scale(0.5);
- transform: scale(0.5);
- }
- }
-
- @keyframes mbsc-zoom-out-down {
- 0% {
- opacity: 1;
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- to {
- opacity: 0;
- -webkit-transform: scale(0.5);
- transform: scale(0.5);
- }
- }
-
- .mbsc-calendar {
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -webkit-flex-direction: column;
- -moz-box-orient: vertical;
- -moz-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -ms-touch-action: manipulation;
- touch-action: manipulation;
- position: relative;
- }
-
- .mbsc-calendar-wrapper {
- position: relative;
- display: table;
- table-layout: fixed;
- width: 100%;
- height: 100%;
- }
-
- .mbsc-calendar-header {
- position: relative;
- z-index: 1;
- will-change: opacity;
- }
-
- .mbsc-calendar,
- .mbsc-calendar-controls,
- .mbsc-calendar-title-wrapper {
- display: -webkit-box;
- display: -webkit-flex;
- display: -moz-box;
- display: -ms-flexbox;
- display: flex;
- }
-
- .mbsc-calendar-controls {
- -webkit-box-align: center;
- -webkit-align-items: center;
- -moz-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -moz-box-sizing: content-box;
- box-sizing: content-box;
- min-height: 2.5em;
- }
-
- .mbsc-calendar-button.mbsc-button.mbsc-reset {
- margin: 0;
- }
-
- .mbsc-calendar-button-prev-multi {
- -webkit-box-ordinal-group: 0;
- -webkit-order: -1;
- -moz-box-ordinal-group: 0;
- -ms-flex-order: -1;
- order: -1;
- }
-
- .mbsc-calendar-button-next-multi {
- -webkit-box-ordinal-group: 2;
- -webkit-order: 1;
- -moz-box-ordinal-group: 2;
- -ms-flex-order: 1;
- order: 1;
- }
-
- .mbsc-calendar-body {
- height: 100%;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- display: table-row;
- }
-
- .mbsc-calendar-body-inner {
- height: 100%;
- position: relative;
- overflow: hidden;
- margin-left: -1px;
- }
-
- .mbsc-calendar-wrapper-fixed {
- display: block;
- height: auto;
- -webkit-box-flex: 0;
- -webkit-flex: 0 0 auto;
- -moz-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- }
-
- .mbsc-calendar-wrapper-fixed .mbsc-calendar-header {
- display: block;
- }
-
- .mbsc-calendar-wrapper-fixed .mbsc-calendar-body {
- display: block;
- height: auto;
- }
-
- .mbsc-calendar-hidden {
- visibility: hidden;
- }
-
- .mbsc-calendar-title-wrapper {
- -webkit-box-flex: 1;
- -webkit-flex: 1;
- -moz-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- -webkit-box-align: center;
- -webkit-align-items: center;
- -moz-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- overflow: hidden;
- }
-
- .mbsc-calendar-title-wrapper-multi .mbsc-calendar-button {
- -webkit-box-flex: 1;
- -webkit-flex: 1;
- -moz-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- }
-
- .mbsc-calendar-title {
- overflow: hidden;
- text-overflow: ellipsis;
- font-size: 1.125em;
- padding: 0 0.25em;
- display: inline-block;
- vertical-align: middle;
- }
-
- .mbsc-calendar-scroll-wrapper {
- display: block;
- overflow: hidden;
- position: relative;
- height: 100%;
- }
-
- .mbsc-calendar-picker-wrapper {
- position: relative;
- width: 15em;
- height: 15em;
- overflow: hidden;
- }
-
- .mbsc-calendar-picker {
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0;
- left: 0;
- }
-
- .mbsc-calendar-picker-main {
- position: relative;
- }
-
- .mbsc-calendar-picker-in-up {
- opacity: 0;
- -webkit-animation: mbsc-zoom-in-up 0.2s cubic-bezier(0, 0, 0.2, 1);
- animation: mbsc-zoom-in-up 0.2s cubic-bezier(0, 0, 0.2, 1);
- }
-
- .mbsc-calendar-picker-in-down {
- opacity: 0;
- -webkit-animation: mbsc-zoom-in-down 0.2s cubic-bezier(0, 0, 0.2, 1);
- animation: mbsc-zoom-in-down 0.2s cubic-bezier(0, 0, 0.2, 1);
- }
-
- .mbsc-calendar-picker-out-up {
- opacity: 0;
- -webkit-animation: mbsc-zoom-out-up 0.2s cubic-bezier(0.4, 0, 1, 1);
- animation: mbsc-zoom-out-up 0.2s cubic-bezier(0.4, 0, 1, 1);
- }
-
- .mbsc-calendar-picker-out-down {
- opacity: 0;
- -webkit-animation: mbsc-zoom-out-down 0.2s cubic-bezier(0, 0, 0.2, 1);
- animation: mbsc-zoom-out-down 0.2s cubic-bezier(0, 0, 0.2, 1);
- }
-
- .mbsc-calendar-scroll-wrapper > div {
- height: 100%;
- }
-
- .mbsc-calendar-scroll-wrapper > div > div {
- height: 100%;
- -webkit-transform: translateZ(0);
- transform: translateZ(0);
- }
-
- .mbsc-calendar-slide {
- position: absolute;
- z-index: 0;
- top: 0;
- width: 100%;
- height: 100%;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
-
- .mbsc-calendar-slide.mbsc-ltr {
- left: 0;
- }
-
- .mbsc-calendar-slide.mbsc-rtl {
- right: 0;
- }
-
- .mbsc-calendar-slide:first-child {
- position: relative;
- }
-
- .mbsc-calendar-table {
- height: 100%;
- -webkit-transform: translateZ(0);
- transform: translateZ(0);
- }
-
- .mbsc-calendar-table,
- .mbsc-calendar-week-days {
- display: table;
- table-layout: fixed;
- width: 100%;
- }
-
- .mbsc-calendar-row,
- .mbsc-calendar-table .mbsc-calendar-week-days {
- display: table-row;
- }
-
- .mbsc-calendar-cell,
- .mbsc-calendar-week-day {
- display: table-cell;
- }
-
- .mbsc-calendar-cell {
- position: relative;
- text-align: center;
- white-space: nowrap;
- cursor: pointer;
- }
-
- .mbsc-calendar-cell:focus {
- outline: 0;
- }
-
- .mbsc-calendar-cell-inner {
- display: inline-block;
- padding: 0 0.25em;
- vertical-align: middle;
- }
-
- .mbsc-calendar-cell.mbsc-disabled {
- cursor: not-allowed;
- }
-
- .mbsc-calendar-week-day {
- height: 2em;
- font-size: 0.6875em;
- line-height: 2em;
- text-align: center;
- border-bottom: 1px solid transparent;
- }
-
- .mbsc-calendar-month,
- .mbsc-calendar-year {
- vertical-align: middle;
- }
-
- .mbsc-calendar-month-text,
- .mbsc-calendar-year-text {
- overflow: hidden;
- text-overflow: ellipsis;
- min-width: 4.5em;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
-
- .mbsc-calendar-day {
- max-width: 14.285715%;
- text-align: center;
- vertical-align: top;
- }
-
- .mbsc-calendar-day-text {
- display: inline-block;
- text-align: center;
- -moz-box-sizing: content-box;
- box-sizing: content-box;
- }
-
- .mbsc-calendar-day-inner {
- display: table;
- position: relative;
- width: 100%;
- height: 100%;
- padding: 0;
- border: 1px solid transparent;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
-
- .mbsc-calendar-day-hidden {
- visibility: hidden;
- }
-
- .mbsc-calendar-day-outer .mbsc-appquality.mbsc-calendar-day-text {
- color: ${props.theme.colors.disabled};
- }
-
- .mbsc-calendar-day-outer.mbsc-selected .mbsc-calendar-day-text {
- opacity: 1;
- }
-
- .mbsc-disabled .mbsc-calendar-cell-text {
- opacity: 0.2;
- }
-
- .mbsc-calendar-day-highlight:before {
- content: " ";
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: rgba(0, 0, 0, 0.1);
- }
-
- .mbsc-calendar-day-marked {
- padding-bottom: 0.25em;
- }
-
- .mbsc-calendar-marks {
- position: absolute;
- left: 0;
- right: 0;
- height: 0.375em;
- margin-top: -0.125em;
- overflow: hidden;
- white-space: nowrap;
- text-align: center;
- }
-
- .mbsc-calendar-mark {
- display: inline-block;
- vertical-align: top;
- width: 0.25em;
- height: 0.25em;
- margin: 0.0625em;
- border-radius: 0.25em;
- }
-
- .mbsc-calendar-labels {
- position: absolute;
- left: 0;
- right: 0;
- }
-
- .mbsc-calendar-label-wrapper {
- position: absolute;
- z-index: 2;
- pointer-events: none;
- }
-
- .mbsc-calendar-label {
- padding: 0 0.3em;
- }
-
- .mbsc-calendar-text:focus {
- outline: 0;
- }
-
- .mbsc-calendar-label-text {
- overflow: hidden;
- text-overflow: ellipsis;
- position: relative;
- z-index: 2;
- }
-
- .mbsc-calendar-label-background,
- .mbsc-calendar-text:before {
- content: "";
- position: absolute;
- z-index: 0;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- -webkit-transition: background-color 0.2s;
- transition: background-color 0.2s;
- }
-
- .mbsc-calendar-label.mbsc-calendar-label-hover:before {
- background-color: rgba(0, 0, 0, 0.2);
- z-index: 1;
- }
-
- .mbsc-calendar-text-more {
- padding: 0 0.3em;
- }
-
- .mbsc-calendar-text-more.mbsc-calendar-label-active:before,
- .mbsc-calendar-text-more.mbsc-calendar-label-hover:before {
- background-color: rgba(0, 0, 0, 0.1);
- }
-
- .mbsc-calendar-text {
- display: block;
- position: relative;
- height: 1.6em;
- line-height: 1.6em;
- font-size: 0.625em;
- white-space: nowrap;
- margin: 0 0.1em 0.2em;
- }
-
- .mbsc-calendar-text-placeholder {
- z-index: -1;
- }
-
- .mbsc-calendar-text.mbsc-ltr {
- text-align: left;
- }
-
- .mbsc-calendar-text.mbsc-rtl {
- text-align: right;
- }
-
- .mbsc-calendar-label-resize {
- position: absolute;
- top: 0;
- height: 100%;
- width: 0.5em;
- z-index: 2;
- cursor: ew-resize;
- }
-
- .mbsc-calendar-label-resize:after {
- content: "";
- display: none;
- position: absolute;
- top: 50%;
- width: 0.8em;
- height: 0.8em;
- margin-top: -0.4em;
- background: #fff;
- border-radius: 0.8em;
- border: 1px solid;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
-
- .mbsc-calendar-label-resize-end.mbsc-rtl,
- .mbsc-calendar-label-resize-start.mbsc-ltr {
- left: 0;
- }
-
- .mbsc-calendar-label-resize-end.mbsc-ltr,
- .mbsc-calendar-label-resize-start.mbsc-rtl {
- right: 0;
- }
-
- .mbsc-calendar-label-resize-end.mbsc-rtl:after,
- .mbsc-calendar-label-resize-start.mbsc-ltr:after {
- left: -0.4em;
- }
-
- .mbsc-calendar-label-resize-end.mbsc-ltr:after,
- .mbsc-calendar-label-resize-start.mbsc-rtl:after {
- right: -0.4em;
- }
-
- .mbsc-calendar-label-resize-end-touch:before,
- .mbsc-calendar-label-resize-start-touch:before {
- content: "";
- position: absolute;
- top: 50%;
- margin-top: -1em;
- width: 2em;
- height: 2em;
- }
-
- .mbsc-calendar-label-resize-start-touch:before {
- left: -1em;
- }
-
- .mbsc-calendar-label-resize-end-touch:before {
- right: -1em;
- }
-
- .mbsc-calendar-label-dragging .mbsc-calendar-label-resize:after,
- .mbsc-calendar-label-hover .mbsc-calendar-label-resize:after {
- display: block;
- }
-
- .mbsc-calendar-label-inactive {
- opacity: 0.4;
- }
-
- .mbsc-calendar-label-hidden {
- visibility: hidden;
- }
-
- .mbsc-calendar-labels-dragging {
- z-index: 3;
- }
-
- .mbsc-material.mbsc-scroller-wheel-wrapper {
- margin: 0 0.25em;
- padding: 0.5em 0;
- }
-
- .mbsc-material.mbsc-scroller-wheel-cont {
- border-width: 2px;
- }
-
- .mbsc-material.mbsc-scroller-wheel-group {
- padding: 2em 0.25em;
- }
-
- .mbsc-material.mbsc-scroller-wheel-item {
- padding: 0 0.272727em;
- font-size: ${props.theme.typography.fontSize.base};
- text-align: center;
- }
-
- .mbsc-material.mbsc-wheel-item-multi {
- padding: 0 2em;
- }
-
- .mbsc-material.mbsc-wheel-checkmark {
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- position: absolute;
- top: 50%;
- display: none;
- border-radius: 0.1875em;
- width: 1.3em;
- height: 1.3em;
- margin-top: -0.55em;
- }
-
- .mbsc-material.mbsc-wheel-checkmark:after {
- content: "";
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- position: absolute;
- display: block;
- top: 0.27273em;
- left: 0.27273em;
- width: 0.8125em;
- height: 0.4375em;
- opacity: 0;
- border: 0.125em solid;
- border-top: 0;
- border-right: 0;
- -webkit-transform: scale(0) rotate(-45deg);
- transform: scale(0) rotate(-45deg);
- -webkit-transition: -webkit-transform 0.1s ease-out;
- transition: -webkit-transform 0.1s ease-out;
- transition: transform 0.1s ease-out;
- transition: transform 0.1s ease-out, -webkit-transform 0.1s ease-out;
- }
-
- .mbsc-material.mbsc-wheel-checkmark.mbsc-selected:after {
- opacity: 1;
- -webkit-transform: scale(1) rotate(-45deg);
- transform: scale(1) rotate(-45deg);
- }
-
- .mbsc-material.mbsc-wheel-checkmark.mbsc-ltr {
- left: 0.25em;
- }
-
- .mbsc-material.mbsc-wheel-checkmark.mbsc-rtl {
- right: 0.25em;
- }
-
- .mbsc-material.mbsc-wheel-item-multi .mbsc-material.mbsc-wheel-checkmark {
- display: block;
- }
-
- .mbsc-material.mbsc-scroller-pointer .mbsc-scroller-wheel-group {
- padding: 0 0.5em;
- }
-
- .mbsc-material.mbsc-scroller-pointer .mbsc-scroller-wheel-wrapper {
- margin: 0;
- padding: 0;
- }
-
- .mbsc-material.mbsc-scroller-pointer .mbsc-scroller-wheel-item {
- font-size: 1em;
- padding: 0 1.25em;
- }
-
- .mbsc-material.mbsc-scroller-pointer .mbsc-wheel-item-multi {
- padding: 0 2em;
- }
-
- .mbsc-material.mbsc-scroller-pointer
- .mbsc-wheel-group-cont-single
- .mbsc-scroller-wheel-item.mbsc-ltr,
- .mbsc-material.mbsc-scroller-pointer .mbsc-wheel-item-multi.mbsc-ltr {
- text-align: left;
- }
-
- .mbsc-material.mbsc-scroller-pointer
- .mbsc-wheel-group-cont-single
- .mbsc-scroller-wheel-item.mbsc-rtl,
- .mbsc-material.mbsc-scroller-pointer .mbsc-wheel-item-multi.mbsc-rtl {
- text-align: right;
- }
-
- .mbsc-material.mbsc-scroller-wheel-cont {
- border-color: #1a73e8;
- }
-
- .mbsc-material.mbsc-scroller-pointer
- .mbsc-wheel-group-cont-single
- .mbsc-scroller-wheel-single,
- .mbsc-material.mbsc-scroller-wheel-multi {
- border-color: transparent;
- }
-
- .mbsc-material.mbsc-scroller-wheel-item.mbsc-active,
- .mbsc-material.mbsc-scroller-wheel-item.mbsc-focus,
- .mbsc-material.mbsc-scroller-wheel-item.mbsc-hover {
- background: rgba(0, 0, 0, 0.05);
- }
-
- .mbsc-material.mbsc-wheel-checkmark:after {
- border-color: #1a73e8;
- }
-
- .mbsc-material.mbsc-scroller-pointer
- .mbsc-wheel-group-cont-single
- .mbsc-scroller-wheel-item.mbsc-selected {
- color: #1a73e8;
- background: rgba(0, 0, 0, 0.15);
- }
-
- .mbsc-material-dark.mbsc-scroller-wheel-cont {
- border-color: #87b0f3;
- }
-
- .mbsc-material-dark.mbsc-scroller-pointer
- .mbsc-wheel-group-cont-single
- .mbsc-scroller-wheel-single,
- .mbsc-material-dark.mbsc-scroller-wheel-multi {
- border-color: transparent;
- }
-
- .mbsc-material-dark.mbsc-scroller-wheel-item.mbsc-active,
- .mbsc-material-dark.mbsc-scroller-wheel-item.mbsc-focus,
- .mbsc-material-dark.mbsc-scroller-wheel-item.mbsc-hover {
- background: rgba(0, 0, 0, 0.05);
- }
-
- .mbsc-material-dark.mbsc-wheel-checkmark:after {
- border-color: #87b0f3;
- }
-
- .mbsc-material-dark.mbsc-scroller-pointer
- .mbsc-wheel-group-cont-single
- .mbsc-scroller-wheel-item.mbsc-selected {
- color: #87b0f3;
- background: rgba(0, 0, 0, 0.15);
- }
-
- .mbsc-scroller {
- width: 100%;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- position: relative;
- text-align: center;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
-
- .mbsc-scroller-wheel-group-cont {
- position: relative;
- max-width: 100%;
- vertical-align: middle;
- display: inline-block;
- overflow: hidden;
- }
-
- .mbsc-scroller-wheel-group-cont:first-child:last-child {
- display: block;
- }
-
- .mbsc-scroller-wheel-group {
- margin: 0 auto;
- position: relative;
- display: -webkit-box;
- display: -webkit-flex;
- display: -moz-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -webkit-flex-direction: row;
- -moz-box-orient: horizontal;
- -moz-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -moz-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- }
-
- .mbsc-scroller-wheel-group-3d {
- -webkit-perspective: 1200px;
- perspective: 1200px;
- }
-
- .mbsc-scroller-wheel-wrapper {
- display: block;
- max-width: 100%;
- position: relative;
- -ms-touch-action: none;
- touch-action: none;
- min-width: 80px;
- }
-
- .mbsc-scroller-wheel-line {
- top: 50%;
- -webkit-transform: translateY(-50%);
- transform: translateY(-50%);
- }
-
- .mbsc-scroller-wheel-line,
- .mbsc-scroller-wheel-overlay {
- display: none;
- position: absolute;
- left: 0;
- right: 0;
- pointer-events: none;
- }
-
- .mbsc-scroller-wheel-overlay {
- z-index: 2;
- top: 0;
- bottom: 0;
- }
-
- .mbsc-scroller-wheel {
- display: block;
- overflow: hidden;
- margin: -1px 0;
- }
-
- .mbsc-scroller-wheel,
- .mbsc-scroller-wheel-cont {
- border-top: 1px solid transparent;
- border-bottom: 1px solid transparent;
- }
-
- .mbsc-scroller-wheel-cont {
- position: relative;
- z-index: 1;
- top: 50%;
- -webkit-transform: translateY(-50%);
- transform: translateY(-50%);
- }
-
- .mbsc-scroller-wheel-cont-3d {
- overflow: hidden;
- border: 0;
- }
-
- .mbsc-scroller-wheel-cont-3d > div {
- position: relative;
- top: -1px;
- }
-
- .mbsc-scroller-items-3d {
- position: absolute;
- top: 50%;
- left: 0;
- right: 0;
- -webkit-transform-style: preserve-3d;
- transform-style: preserve-3d;
- -webkit-transform: translateY(-50%);
- transform: translateY(-50%);
- }
-
- .mbsc-scroller .mbsc-scroller-wheel,
- .mbsc-scroller .mbsc-scroller-wheel-cont {
- -moz-box-sizing: content-box;
- box-sizing: content-box;
- }
-
- .mbsc-scroller-wheel-item {
- display: block;
- position: relative;
- cursor: pointer;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
-
- .mbsc-scroller-wheel-item:focus {
- outline: 0;
- }
-
- .mbsc-scroller-wheel-item-3d {
- position: absolute;
- width: 100%;
- top: 0;
- left: 0;
- cursor: pointer;
- -webkit-backface-visibility: hidden;
- backface-visibility: hidden;
- }
-
- .mbsc-scroller-wheel-item.mbsc-disabled {
- opacity: 0.3;
- }
-
- .mbsc-scroller-bar-cont {
- display: none;
- position: absolute;
- z-index: 4;
- top: 0;
- bottom: 0;
- width: 10px;
- opacity: 0;
- background: rgba(0, 0, 0, 0.05);
- -webkit-transform: translateZ(0);
- transform: translateZ(0);
- -webkit-transition: opacity 0.2s;
- transition: opacity 0.2s;
- }
-
- .mbsc-scroller-bar-cont.mbsc-ltr {
- right: 0;
- }
-
- .mbsc-scroller-bar-cont.mbsc-rtl {
- left: 0;
- }
-
- .mbsc-scroller-bar-hidden {
- display: none;
- }
-
- .mbsc-scroller-bar-started,
- .mbsc-scroller-wheel:hover .mbsc-scroller-bar-cont {
- opacity: 1;
- }
-
- .mbsc-scroller-bar {
- position: absolute;
- right: 0;
- top: 0;
- width: 10px;
- }
-
- .mbsc-scroller-bar:after {
- content: "";
- position: absolute;
- top: 2px;
- right: 2px;
- bottom: 2px;
- left: 2px;
- background: rgba(0, 0, 0, 0.5);
- border-radius: 3px;
- }
-
- .mbsc-material.mbsc-segmented {
- padding: 0.75em;
- }
-
- .mbsc-material.mbsc-segmented-selectbox {
- display: none;
- }
-
- .mbsc-material.mbsc-segmented-item:first-child .mbsc-segmented-button {
- border-top-left-radius: 0.25em;
- border-bottom-left-radius: 0.25em;
- }
-
- .mbsc-material.mbsc-segmented-item:first-child
- .mbsc-segmented-button.mbsc-rtl {
- border-radius: 0 0.25em 0.25em 0;
- border-right-width: 0.142858em;
- }
-
- .mbsc-material.mbsc-segmented-item:last-child .mbsc-segmented-button {
- border-top-right-radius: 0.25em;
- border-bottom-right-radius: 0.25em;
- border-right-width: 0.142858em;
- }
-
- .mbsc-material.mbsc-segmented-item:last-child
- .mbsc-segmented-button.mbsc-rtl {
- border-radius: 0.25em 0 0 0.25em;
- border-right-width: 0;
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button {
- margin: 0;
- padding: 0.285715em 1.142858em;
- border: 0.142858em solid transparent;
- border-right-width: 0;
- border-radius: 0;
- background: none;
- box-shadow: none;
- min-width: auto;
- font-size: 0.875em;
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-active,
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-hover {
- box-shadow: none;
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-focus:after {
- content: "";
- display: block;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-primary {
- color: #3f97f6;
- border-color: #3f97f6;
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-primary.mbsc-active,
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-primary.mbsc-hover {
- background: rgba(63, 151, 246, 0.2);
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-primary.mbsc-selected {
- background: #3f97f6;
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-secondary {
- color: #90979e;
- border-color: #90979e;
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-secondary.mbsc-active,
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-secondary.mbsc-hover {
- background: rgba(144, 151, 158, 0.2);
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-secondary.mbsc-selected {
- background: #90979e;
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-success {
- color: #43be5f;
- border-color: #43be5f;
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-success.mbsc-active,
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-success.mbsc-hover {
- background: rgba(67, 190, 95, 0.2);
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-success.mbsc-selected {
- background: #43be5f;
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-danger {
- color: #f5504e;
- border-color: #f5504e;
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-danger.mbsc-active,
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-danger.mbsc-hover {
- background: rgba(245, 80, 78, 0.2);
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-danger.mbsc-selected {
- background: #f5504e;
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-warning {
- color: #f8b042;
- border-color: #f8b042;
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-warning.mbsc-active,
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-warning.mbsc-hover {
- background: rgba(248, 176, 66, 0.2);
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-warning.mbsc-selected {
- background: #f8b042;
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-info {
- color: #5bb7c5;
- border-color: #5bb7c5;
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-info.mbsc-active,
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-info.mbsc-hover {
- background: rgba(91, 183, 197, 0.2);
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-info.mbsc-selected {
- background: #5bb7c5;
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button {
- border-color: #1a73e8;
- color: #000;
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-active,
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-hover {
- background: rgba(0, 0, 0, 0.2);
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-selected {
- background: #1a73e8;
- color: #fff;
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-focus:after {
- background: rgba(0, 0, 0, 0.2);
- }
-
- .mbsc-material-dark.mbsc-segmented-button.mbsc-button {
- border-color: #87b0f3;
- color: #fff;
- }
-
- .mbsc-material-dark.mbsc-segmented-button.mbsc-button.mbsc-active,
- .mbsc-material-dark.mbsc-segmented-button.mbsc-button.mbsc-hover {
- background: hsla(0, 0%, 100%, 0.2);
- }
-
- .mbsc-material-dark.mbsc-segmented-button.mbsc-button.mbsc-selected {
- background: #87b0f3;
- color: #000;
- }
-
- .mbsc-material-dark.mbsc-segmented-button.mbsc-button.mbsc-focus:after {
- background: hsla(0, 0%, 100%, 0.2);
- }
-
- .mbsc-segmented {
- display: -webkit-box;
- display: -webkit-flex;
- display: -moz-box;
- display: -ms-flexbox;
- display: flex;
- overflow: hidden;
- }
-
- .mbsc-segmented-item {
- margin: 0;
- position: relative;
- vertical-align: top;
- text-align: center;
- font-size: 1em;
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 0;
- -moz-box-flex: 1;
- -ms-flex: 1 1 0px;
- flex: 1 1 0;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- min-width: 0;
- }
-
- .mbsc-segmented-label {
- display: block;
- margin: 0;
- padding: 0;
- }
-
- .mbsc-segmented-input {
- width: 1px;
- height: 0;
- opacity: 0;
- position: absolute;
- }
-
- .mbsc-segmented-button.mbsc-button {
- width: 100%;
- }
-
- .mbsc-material.mbsc-picker-header {
- font-size: 1.25em;
- font-weight: 500;
- padding: 0.8em 0.8em 0;
- line-height: 1.4em;
- text-align: center;
- }
-
- .mbsc-material.mbsc-range-control-wrapper .mbsc-segmented {
- padding: 0;
- max-width: 100%;
- width: 18.5em;
- }
-
- .mbsc-material.mbsc-range-control-wrapper
- .mbsc-segmented-button.mbsc-button.mbsc-font {
- background: none;
- border: 0;
- border-bottom: 2px solid transparent;
- border-radius: 0;
- padding: 0.8571422em 1.142857em;
- display: block;
- }
-
- .mbsc-material.mbsc-range-control-wrapper .mbsc-segmented-button.mbsc-ltr {
- text-align: left;
- }
-
- .mbsc-material.mbsc-range-control-wrapper .mbsc-segmented-button.mbsc-rtl {
- text-align: right;
- }
-
- .mbsc-material.mbsc-range-control-wrapper
- .mbsc-range-value-nonempty
- .mbsc-segmented-button.mbsc-ltr {
- padding-right: 2.642857em;
- }
-
- .mbsc-material.mbsc-range-control-wrapper
- .mbsc-range-value-nonempty
- .mbsc-segmented-button.mbsc-rtl {
- padding-left: 2.642857em;
- }
-
- .mbsc-material.mbsc-datepicker-control-calendar.mbsc-datepicker-control-time
- .mbsc-range-control-wrapper
- .mbsc-segmented,
- .mbsc-material.mbsc-datepicker-control-date.mbsc-datepicker-control-time
- .mbsc-range-control-wrapper
- .mbsc-segmented,
- .mbsc-material.mbsc-datepicker-control-datetime
- .mbsc-range-control-wrapper
- .mbsc-segmented {
- width: 25em;
- }
-
- .mbsc-material.mbsc-range-control-label {
- text-transform: capitalize;
- color: ${props.theme.colors.cyan300};
- }
-
- .mbsc-material.mbsc-range-control-value {
- font-weight: 700;
- overflow: hidden;
- text-overflow: ellipsis;
- }
-
- .mbsc-material.mbsc-range-label-clear {
- margin-top: -0.625em;
- right: 0.75em;
- width: 1.3125em;
- height: 1.3125em;
- }
-
- .mbsc-material.mbsc-range-label-clear.mbsc-ltr {
- right: 0.75em;
- }
-
- .mbsc-material.mbsc-range-label-clear.mbsc-rtl {
- left: 0.75em;
- }
-
- .mbsc-material.mbsc-datepicker .mbsc-calendar-title {
- font-size: 1.142858em;
- line-height: 1.75em;
- }
-
- .mbsc-material.mbsc-datepicker .mbsc-calendar-slide {
- background: #fff;
- }
-
- .mbsc-material.mbsc-datepicker-inline {
- background: #fff;
- color: #303030;
- }
-
- .mbsc-material.mbsc-datepicker-inline .mbsc-calendar-slide {
- background: #fff;
- }
-
- .mbsc-material.mbsc-range-control-wrapper {
- border-bottom: 1px solid rgba(0, 0, 0, 0.2);
- }
-
- .mbsc-material.mbsc-range-control-wrapper
- .mbsc-material.mbsc-segmented-button.mbsc-selected {
- border-bottom-color: #1a73e8;
- }
-
- .mbsc-material.mbsc-range-control-label.active,
- .mbsc-material.mbsc-range-control-value.active {
- color: #1a73e8;
- }
-
- .mbsc-material.mbsc-range-control-text-empty,
- .mbsc-material.mbsc-range-control-text-empty.active {
- color: rgba(48, 48, 48, 0.4);
- }
-
- .mbsc-material.mbsc-range-label-clear {
- color: #b0b0b0;
- }
-
- .mbsc-material.mbsc-range-label-clear:hover {
- color: #7d7d7d;
- }
-
- .mbsc-material-dark.mbsc-datepicker .mbsc-calendar-slide {
- background: #303030;
- }
-
- .mbsc-material-dark.mbsc-datepicker-inline {
- background: #000;
- color: #fff;
- }
-
- .mbsc-material-dark.mbsc-datepicker-inline .mbsc-calendar-slide {
- background: #000;
- }
-
- .mbsc-material-dark.mbsc-range-control-wrapper {
- border-bottom: 1px solid hsla(0, 0%, 100%, 0.2);
- }
-
- .mbsc-material-dark.mbsc-range-control-wrapper
- .mbsc-material-dark.mbsc-segmented-button.mbsc-selected {
- border-bottom-color: #87b0f3;
- }
-
- .mbsc-material-dark.mbsc-range-control-label.active,
- .mbsc-material-dark.mbsc-range-control-value.active {
- color: #87b0f3;
- }
-
- .mbsc-material-dark.mbsc-range-control-text-empty,
- .mbsc-material-dark.mbsc-range-control-text-empty.active {
- color: hsla(0, 0%, 100%, 0.4);
- }
-
- .mbsc-material-dark.mbsc-range-label-clear {
- color: grey;
- }
-
- .mbsc-material-dark.mbsc-range-label-clear:hover {
- color: #b3b3b3;
- }
-
- mbsc-datetime {
- display: block;
- width: 100%;
- }
-
- .mbsc-datepicker .mbsc-calendar {
- padding-bottom: 0.5em;
- }
-
- .mbsc-datepicker .mbsc-calendar-week-days {
- padding: 0 0.5em;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- margin-left: -1px;
- }
-
- .mbsc-range-control-wrapper .mbsc-segmented-input {
- width: 1px;
- }
-
- .mbsc-range-label-clear {
- position: absolute;
- top: 50%;
- display: none;
- }
-
- .mbsc-range-label-clear.active {
- display: block;
- }
-
- .mbsc-range-label-clear.mbsc-range-value-empty {
- display: none;
- }
-
- .mbsc-datepicker-tab-wrapper {
- position: relative;
- -webkit-flex-wrap: wrap;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
- overflow: hidden;
- }
-
- .mbsc-datepicker-tab,
- .mbsc-datepicker-tab-wrapper {
- display: -webkit-box;
- display: -webkit-flex;
- display: -moz-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -moz-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- }
-
- .mbsc-datepicker-tab {
- visibility: hidden;
- max-width: 100%;
- -webkit-box-align: center;
- -webkit-align-items: center;
- -moz-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- }
-
- .mbsc-datepicker-tab-expand {
- -webkit-box-flex: 1;
- -webkit-flex: 1;
- -moz-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- }
-
- .mbsc-datepicker-tab-active {
- visibility: visible;
- }
-
- .mbsc-datepicker-time-modal {
- position: absolute;
- z-index: 1;
- top: 0;
- left: 0;
- right: 0;
- max-width: none;
- height: 100%;
- }
-
- .mbsc-datepicker .mbsc-calendar-slide {
- padding: 0 0.5em;
- }
-
- .mbsc-appquality.mbsc-calendar-wrapper:after {
- box-shadow: inset 0 0.5em 0.25em -0.5em rgba(23, 64, 92, 0.5);
- }
-
- .mbsc-appquality.mbsc-calendar-button.mbsc-button {
- color: ${props.theme.palette.primary};
- }
-
- .mbsc-appquality.mbsc-calendar-picker-slide,
- .mbsc-appquality.mbsc-calendar-slide {
- background: ${props.theme.colors.white};
- }
-
- .mbsc-appquality.mbsc-calendar-week-day {
- color: ${props.theme.palette.primary};
- font-weight: ${props.theme.typography.fontWeight.light};
- font-size: ${props.theme.typography.fontSize.base};
- }
-
- .mbsc-appquality.mbsc-calendar-cell-text {
- color: ${props.theme.palette.primary};
- }
-
- .mbsc-appquality.mbsc-calendar-today {
- color: ${props.theme.palette.primary};
- font-weight: ${props.theme.typography.fontWeight.normal};
- }
-
- .mbsc-appquality.mbsc-focus .mbsc-calendar-cell-text {
- box-shadow: 0 0 0 2px rgba(23, 64, 92, 0.7);
- }
-
- .mbsc-appquality.mbsc-hover .mbsc-calendar-cell-text {
- background: ${props.theme.colors.gray100};
- }
-
- .mbsc-appquality.mbsc-range-hover:before {
- border-color: #d4d4d4;
- }
-
- .mbsc-appquality.mbsc-range-day:after {
- background-color: rgba(62, 173, 83, 0.25);
- }
-
- .mbsc-appquality.mbsc-selected .mbsc-calendar-cell-text {
- background: ${props.theme.palette.secondary};
- border-color: ${props.theme.palette.secondary};
- color: ${props.theme.colors.white};
- }
-
- .mbsc-appquality.mbsc-calendar-mark {
- background: ${props.theme.palette.secondary};
- }
-
- .mbsc-appquality.mbsc-calendar-label {
- color: ${props.theme.palette.secondary};
- }
-
- .mbsc-appquality.mbsc-calendar-label-inner {
- color: #fff;
- }
-
- .mbsc-appquality.mbsc-calendar-label.mbsc-calendar-label-active,
- .mbsc-appquality.mbsc-calendar-label.mbsc-calendar-label-dragging {
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12),
- 0 1px 3px -1px rgba(0, 0, 0, 0.2);
- }
-
- .mbsc-appquality.mbsc-calendar-text-more {
- box-shadow: none;
- }
-
- .mbsc-appquality.mbsc-calendar-text-more .mbsc-calendar-label-text {
- color: ${props.theme.palette.primary};
- }
-
- .mbsc-appquality.mbsc-calendar-popup .mbsc-popup-arrow,
- .mbsc-appquality.mbsc-calendar-popup .mbsc-popup-body {
- background: ${props.theme.colors.white};
- }
-
- .mbsc-appquality.mbsc-calendar-height-md .mbsc-calendar-day,
- .mbsc-appquality.mbsc-calendar-height-md .mbsc-calendar-week-day {
- border-color: #bdbdbd;
- }
-
- .mbsc-appquality.mbsc-datepicker .mbsc-calendar-slide {
- background: ${props.theme.colors.white};
- }
-
- .mbsc-appquality.mbsc-datepicker-inline {
- background: ${props.theme.colors.white};
- color: ${props.theme.palette.primary};
- }
-
- .mbsc-appquality.mbsc-datepicker-inline .mbsc-calendar-slide {
- background: ${props.theme.colors.white};
- }
-
- .mbsc-appquality.mbsc-range-control-wrapper {
- border-bottom: 1px solid ${props.theme.colors.disabled};
- }
-
- .mbsc-appquality.mbsc-range-control-wrapper
- .mbsc-appquality.mbsc-segmented-button.mbsc-selected {
- border-bottom-color: ${props.theme.palette.secondary};
- }
-
- .mbsc-appquality.mbsc-range-control-label.active {
- color: ${props.theme.palette.info};
- font-weight: ${props.theme.typography.fontWeight.normal};
- }
- .mbsc-appquality.mbsc-range-control-value.active {
- color: ${props.theme.palette.secondary};
- }
-
- .mbsc-appquality.mbsc-range-control-text-empty,
- .mbsc-appquality.mbsc-range-control-text-empty.active {
- color: ${props.theme.colors.disabled};
- text-transform: capitalize;
- }
-
- .mbsc-appquality.mbsc-range-label-clear {
- color: #8fc1e3;
- }
-
- .mbsc-appquality.mbsc-range-label-clear:hover {
- color: #3d94cf;
- }
-
- .mbsc-appquality.mbsc-button-standard {
- background: #bdbdbd;
- color: #000;
- box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
- 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
- }
-
- .mbsc-appquality.mbsc-button-standard.mbsc-hover {
- box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
- 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
- }
-
- .mbsc-appquality.mbsc-button-standard.mbsc-active,
- .mbsc-appquality.mbsc-button-standard.mbsc-focus {
- box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
- 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
- }
-
- .mbsc-appquality.mbsc-button-flat,
- .mbsc-appquality.mbsc-button-outline {
- color: #000;
- }
-
- .mbsc-appquality.mbsc-button-flat.mbsc-active,
- .mbsc-appquality.mbsc-button-flat.mbsc-hover,
- .mbsc-appquality.mbsc-button-outline.mbsc-active,
- .mbsc-appquality.mbsc-button-outline.mbsc-hover {
- background: ${props.theme.colors.gray100};
- }
-
- .mbsc-appquality.mbsc-button-flat.mbsc-popup-button-primary.mbsc-active,
- .mbsc-appquality.mbsc-button-flat.mbsc-popup-button-primary.mbsc-hover,
- .mbsc-appquality.mbsc-button-outline.mbsc-popup-button-primary.mbsc-active,
- .mbsc-appquality.mbsc-button-outline.mbsc-popup-button-primary.mbsc-hover {
- background: ${props.theme.colors.purple100};
- }
-
- .mbsc-appquality.mbsc-button-flat.mbsc-focus,
- .mbsc-appquality.mbsc-button-outline.mbsc-focus {
- background: rgba(0, 0, 0, 0.3);
- }
-
- .mbsc-appquality.mbsc-button-outline {
- border-color: #000;
- }
-
- .mbsc-appquality.mbsc-button-primary.mbsc-button-standard {
- background: #3f97f6;
- color: ${props.theme.colors.white};
- }
-
- .mbsc-appquality.mbsc-button-secondary.mbsc-button-standard {
- background: #90979e;
- color: ${props.theme.colors.white};
- }
-
- .mbsc-appquality.mbsc-button-success.mbsc-button-standard {
- background: #43be5f;
- color: ${props.theme.colors.white};
- }
-
- .mbsc-appquality.mbsc-button-danger.mbsc-button-standard {
- background: #f5504e;
- color: ${props.theme.colors.white};
- }
-
- .mbsc-appquality.mbsc-button-warning.mbsc-button-standard {
- background: #f8b042;
- color: ${props.theme.colors.white};
- }
-
- .mbsc-appquality.mbsc-button-info.mbsc-button-standard {
- background: #5bb7c5;
- color: ${props.theme.colors.white};
- }
-
- .mbsc-appquality.mbsc-button-dark.mbsc-button-standard {
- background: #47494a;
- color: ${props.theme.colors.white};
- }
-
- .mbsc-appquality.mbsc-button-light.mbsc-button-standard {
- background: #fff;
- color: ${props.theme.palette.primary};
- }
-
- .mbsc-appquality.mbsc-button-primary.mbsc-button-flat {
- color: #3f97f6;
- }
-
- .mbsc-appquality.mbsc-button-primary.mbsc-button-flat.mbsc-active,
- .mbsc-appquality.mbsc-button-primary.mbsc-button-flat.mbsc-hover {
- background: rgba(63, 151, 246, 0.2);
- }
-
- .mbsc-appquality.mbsc-button-primary.mbsc-button-flat.mbsc-focus {
- background: rgba(63, 151, 246, 0.3);
- }
-
- .mbsc-appquality.mbsc-button-secondary.mbsc-button-flat {
- color: #90979e;
- }
-
- .mbsc-appquality.mbsc-button-secondary.mbsc-button-flat.mbsc-active,
- .mbsc-appquality.mbsc-button-secondary.mbsc-button-flat.mbsc-hover {
- background: rgba(144, 151, 158, 0.2);
- }
-
- .mbsc-appquality.mbsc-button-secondary.mbsc-button-flat.mbsc-focus {
- background: rgba(144, 151, 158, 0.3);
- }
-
- .mbsc-appquality.mbsc-button-success.mbsc-button-flat {
- color: #43be5f;
- }
-
- .mbsc-appquality.mbsc-button-success.mbsc-button-flat.mbsc-active,
- .mbsc-appquality.mbsc-button-success.mbsc-button-flat.mbsc-hover {
- background: rgba(67, 190, 95, 0.2);
- }
-
- .mbsc-appquality.mbsc-button-success.mbsc-button-flat.mbsc-focus {
- background: rgba(67, 190, 95, 0.3);
- }
-
- .mbsc-appquality.mbsc-button-danger.mbsc-button-flat {
- color: #f5504e;
- }
-
- .mbsc-appquality.mbsc-button-danger.mbsc-button-flat.mbsc-active,
- .mbsc-appquality.mbsc-button-danger.mbsc-button-flat.mbsc-hover {
- background: rgba(245, 80, 78, 0.2);
- }
-
- .mbsc-appquality.mbsc-button-danger.mbsc-button-flat.mbsc-focus {
- background: rgba(245, 80, 78, 0.3);
- }
-
- .mbsc-appquality.mbsc-button-warning.mbsc-button-flat {
- color: #f8b042;
- }
-
- .mbsc-appquality.mbsc-button-warning.mbsc-button-flat.mbsc-active,
- .mbsc-appquality.mbsc-button-warning.mbsc-button-flat.mbsc-hover {
- background: rgba(248, 176, 66, 0.2);
- }
-
- .mbsc-appquality.mbsc-button-warning.mbsc-button-flat.mbsc-focus {
- background: rgba(248, 176, 66, 0.3);
- }
-
- .mbsc-appquality.mbsc-button-info.mbsc-button-flat {
- color: #5bb7c5;
- }
-
- .mbsc-appquality.mbsc-button-info.mbsc-button-flat.mbsc-active,
- .mbsc-appquality.mbsc-button-info.mbsc-button-flat.mbsc-hover {
- background: rgba(91, 183, 197, 0.2);
- }
-
- .mbsc-appquality.mbsc-button-info.mbsc-button-flat.mbsc-focus {
- background: rgba(91, 183, 197, 0.3);
- }
-
- .mbsc-appquality.mbsc-button-dark.mbsc-button-flat {
- color: #47494a;
- }
-
- .mbsc-appquality.mbsc-button-dark.mbsc-button-flat.mbsc-active,
- .mbsc-appquality.mbsc-button-dark.mbsc-button-flat.mbsc-hover {
- background: rgba(71, 73, 74, 0.2);
- }
-
- .mbsc-appquality.mbsc-button-dark.mbsc-button-flat.mbsc-focus {
- background: rgba(71, 73, 74, 0.3);
- }
-
- .mbsc-appquality.mbsc-button-light.mbsc-button-flat {
- color: #ccc;
- }
-
- .mbsc-appquality.mbsc-button-light.mbsc-button-flat.mbsc-active,
- .mbsc-appquality.mbsc-button-light.mbsc-button-flat.mbsc-hover {
- background: hsla(0, 0%, 100%, 0.2);
- }
-
- .mbsc-appquality.mbsc-button-light.mbsc-button-flat.mbsc-focus {
- background: hsla(0, 0%, 100%, 0.3);
- }
-
- .mbsc-appquality.mbsc-button-primary.mbsc-button-outline {
- border-color: #3f97f6;
- color: #3f97f6;
- }
-
- .mbsc-appquality.mbsc-button-primary.mbsc-button-outline.mbsc-active,
- .mbsc-appquality.mbsc-button-primary.mbsc-button-outline.mbsc-hover {
- background: rgba(63, 151, 246, 0.2);
- }
-
- .mbsc-appquality.mbsc-button-primary.mbsc-button-outline.mbsc-focus {
- background: rgba(63, 151, 246, 0.3);
- }
-
- .mbsc-appquality.mbsc-button-secondary.mbsc-button-outline {
- border-color: #90979e;
- color: #90979e;
- }
-
- .mbsc-appquality.mbsc-button-secondary.mbsc-button-outline.mbsc-active,
- .mbsc-appquality.mbsc-button-secondary.mbsc-button-outline.mbsc-hover {
- background: rgba(144, 151, 158, 0.2);
- }
-
- .mbsc-appquality.mbsc-button-secondary.mbsc-button-outline.mbsc-focus {
- background: rgba(144, 151, 158, 0.3);
- }
-
- .mbsc-appquality.mbsc-button-success.mbsc-button-outline {
- border-color: #43be5f;
- color: #43be5f;
- }
-
- .mbsc-appquality.mbsc-button-success.mbsc-button-outline.mbsc-active,
- .mbsc-appquality.mbsc-button-success.mbsc-button-outline.mbsc-hover {
- background: rgba(67, 190, 95, 0.2);
- }
-
- .mbsc-appquality.mbsc-button-success.mbsc-button-outline.mbsc-focus {
- background: rgba(67, 190, 95, 0.3);
- }
-
- .mbsc-appquality.mbsc-button-danger.mbsc-button-outline {
- border-color: #f5504e;
- color: #f5504e;
- }
-
- .mbsc-appquality.mbsc-button-danger.mbsc-button-outline.mbsc-active,
- .mbsc-appquality.mbsc-button-danger.mbsc-button-outline.mbsc-hover {
- background: rgba(245, 80, 78, 0.2);
- }
-
- .mbsc-appquality.mbsc-button-danger.mbsc-button-outline.mbsc-focus {
- background: rgba(245, 80, 78, 0.3);
- }
-
- .mbsc-appquality.mbsc-button-warning.mbsc-button-outline {
- border-color: #f8b042;
- color: #f8b042;
- }
-
- .mbsc-appquality.mbsc-button-warning.mbsc-button-outline.mbsc-active,
- .mbsc-appquality.mbsc-button-warning.mbsc-button-outline.mbsc-hover {
- background: rgba(248, 176, 66, 0.2);
- }
-
- .mbsc-appquality.mbsc-button-warning.mbsc-button-outline.mbsc-focus {
- background: rgba(248, 176, 66, 0.3);
- }
-
- .mbsc-appquality.mbsc-button-info.mbsc-button-outline {
- border-color: #5bb7c5;
- color: #5bb7c5;
- }
-
- .mbsc-appquality.mbsc-button-info.mbsc-button-outline.mbsc-active,
- .mbsc-appquality.mbsc-button-info.mbsc-button-outline.mbsc-hover {
- background: rgba(91, 183, 197, 0.2);
- }
-
- .mbsc-appquality.mbsc-button-info.mbsc-button-outline.mbsc-focus {
- background: rgba(91, 183, 197, 0.3);
- }
-
- .mbsc-appquality.mbsc-button-dark.mbsc-button-outline {
- border-color: #47494a;
- color: #47494a;
- }
-
- .mbsc-appquality.mbsc-button-dark.mbsc-button-outline.mbsc-active,
- .mbsc-appquality.mbsc-button-dark.mbsc-button-outline.mbsc-hover {
- background: rgba(71, 73, 74, 0.2);
- }
-
- .mbsc-appquality.mbsc-button-dark.mbsc-button-outline.mbsc-focus {
- background: rgba(71, 73, 74, 0.3);
- }
-
- .mbsc-appquality.mbsc-button-light.mbsc-button-outline {
- border-color: #ccc;
- color: #ccc;
- }
-
- .mbsc-appquality.mbsc-button-light.mbsc-button-outline.mbsc-active,
- .mbsc-appquality.mbsc-button-light.mbsc-button-outline.mbsc-hover {
- background: hsla(0, 0%, 100%, 0.2);
- }
-
- .mbsc-appquality.mbsc-button-light.mbsc-button-outline.mbsc-focus {
- background: hsla(0, 0%, 100%, 0.3);
- }
-
- .mbsc-appquality.mbsc-popup-body {
- background: ${props.theme.colors.white};
- box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2),
- 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
- color: ${props.theme.palette.primary};
- }
-
- .mbsc-appquality.mbsc-popup-arrow {
- background: ${props.theme.colors.white};
- box-shadow: 0 0 1em rgba(0, 0, 0, 0.2);
- }
-
- .mbsc-appquality.mbsc-popup-button.mbsc-font {
- color: ${props.theme.palette.primary};
- }
-
- .mbsc-appquality.mbsc-popup-button.mbsc-font.mbsc-popup-button-close {
- color: ${props.theme.palette.danger};
- }
-
- .mbsc-appquality.mbsc-scroller-wheel-cont {
- border-color: ${props.theme.palette.secondary};
- }
-
- .mbsc-appquality.mbsc-scroller-pointer
- .mbsc-wheel-group-cont-single
- .mbsc-scroller-wheel-single,
- .mbsc-appquality.mbsc-scroller-wheel-multi {
- border-color: transparent;
- }
-
- .mbsc-appquality.mbsc-scroller-wheel-item.mbsc-active,
- .mbsc-appquality.mbsc-scroller-wheel-item.mbsc-focus,
- .mbsc-appquality.mbsc-scroller-wheel-item.mbsc-hover {
- background: ${addOpacityToHex(props.theme.colors.gray400, "0.2")};
- }
-
- .mbsc-appquality.mbsc-wheel-checkmark:after {
- border-color: ${props.theme.palette.secondary};
- }
-
- .mbsc-appquality.mbsc-scroller-pointer
- .mbsc-wheel-group-cont-single
- .mbsc-scroller-wheel-item.mbsc-selected {
- color: ${props.theme.palette.secondary};
- background: rgba(0, 0, 0, 0.15);
- }
- .mbsc-material.mbsc-textfield-box {
- ${InvalidInputStyle}
- &:focus {
- ${InvalidFocusStyle}
- }
- }
-`;
-}}`;
-
-const DatepickerStyle = () => {
- useEffect(() => {
- (window as any).MBSCappqGlobalStyleAlreadyRendered = false;
- });
- if ((window as any).MBSCappqGlobalStyleAlreadyRendered) return null;
- return (
- <>
-
- {((window as any).MBSCappqGlobalStyleAlreadyRendered = true)}
-
- );
-};
-
-export default DatepickerStyle;
diff --git a/src/stories/DateInput/index.tsx b/src/stories/DateInput/index.tsx
index 9ffae1f3..9feff59c 100644
--- a/src/stories/DateInput/index.tsx
+++ b/src/stories/DateInput/index.tsx
@@ -1,25 +1,6 @@
-import React from "react";
-import {
- Datepicker as MobiScrollDatePicker,
- localeEn,
- localeEs,
- localeIt,
-} from "@appquality/mobiscroll";
-import { ChangeEventHandler, useState } from "react";
-import { CalendarEventFill as CalendarIcon } from "react-bootstrap-icons";
-import styled from "styled-components";
-import { Button } from "../button/Button";
-import { StyledInput as FormInput } from "../form/input/Input";
-import { aqBootstrapTheme } from "../theme/defaultTheme";
+import React, { ChangeEventHandler } from "react";
+import Input from "../form/input/Input";
-const StyledInput = styled(FormInput)`
- .mbsc-appquality.mbsc-textfield {
- width: 0;
- height: 0px;
- border: none;
- padding: 0px;
- }
-`;
export interface DatepickerProps {
id: string;
name?: string;
@@ -42,6 +23,13 @@ export interface DatepickerProps {
};
}
+const mapDate = (date: Date) => {
+ const year = date.getFullYear();
+ const month = ("0" + (date.getMonth() + 1)).slice(-2); // Months are 0 based, so +1 and pad with 0
+ const day = ("0" + date.getDate()).slice(-2);
+ return `${year}-${month}-${day}`;
+};
+
export const DateInput = ({
id,
name,
@@ -62,80 +50,22 @@ export const DateInput = ({
dateFormat = "DD-MM-YYYY",
buttonTitle = "Open datepicker",
} = {},
-}: DatepickerProps) => {
- let currentLocale = localeEn;
- const ref = React.useRef(null);
- if (locale === "it") currentLocale = localeIt;
- if (locale === "es") currentLocale = localeEs;
- const [openPicker, setOpenPicker] = useState(false);
- const [inputValue, setInputValue] = useState(value || "");
-
- const show = () => {
- setOpenPicker(true);
- };
- const onClose = () => {
- setOpenPicker(false);
- };
- const onDatePick = (v: { value: Date; valueText: string }) => {
- setInputValue(v.valueText);
- if (ref.current) {
- ref.current.value = v.valueText;
- ref.current.dispatchEvent(new Event("input", { bubbles: true }));
- }
- onClose();
- };
- const handleInputChange = (e: React.ChangeEvent) => {
- setInputValue(e.target.value);
- onChange && onChange(e);
- };
+ ...props
+}: DatepickerProps &
+ Omit<
+ React.InputHTMLAttributes,
+ "type" | "min" | "max" | "onChange"
+ >) => {
return (
-
-
-
-
-
-
-
+
);
};
diff --git a/src/stories/form/Form.stories.tsx b/src/stories/form/Form.stories.tsx
index 78dbb0ee..469c3546 100644
--- a/src/stories/form/Form.stories.tsx
+++ b/src/stories/form/Form.stories.tsx
@@ -1,14 +1,13 @@
-import { ErrorMessageWrapper, Field } from "./Form";
-import { Checkbox } from "./checkBox/Checkbox";
-import { Story, Meta } from "@storybook/react";
-import { Formik, Form, FormikProps } from "formik";
-import { validationSchema, initialValues } from "./_data";
+import { Meta, Story } from "@storybook/react";
+import { Form, Formik, FormikProps } from "formik";
import * as yup from "yup";
+import { Select } from "../select/Select";
import { Text } from "../typography/Typography";
+import { ErrorMessageWrapper, Field } from "./Form";
+import { initialValues, validationSchema } from "./_data";
+import { Checkbox } from "./checkBox/Checkbox";
import { Datepicker } from "./datepicker/Datepicker";
-import { DatepickerGlobalStyle } from "./datepicker/_style";
import FormLabel from "./formlabel/FormLabel";
-import { Select } from "../select/Select";
export default {
title: "Forms",
@@ -17,7 +16,6 @@ export default {
export const Template: Story = () => (
<>
-
(
<>
-
Seleziona una data
diff --git a/src/stories/form/datepicker/Datepicker.tsx b/src/stories/form/datepicker/Datepicker.tsx
index 570df9a2..23f297a8 100644
--- a/src/stories/form/datepicker/Datepicker.tsx
+++ b/src/stories/form/datepicker/Datepicker.tsx
@@ -1,12 +1,9 @@
-import {
- Datepicker as MobiScrollDatePicker,
- localeIt,
- localeEn,
- localeEs,
-} from "@appquality/mobiscroll";
+import { DateInput } from "../../DateInput";
import { DatepickerProps } from "./_types";
export const Datepicker = ({
+ id,
+ name,
select,
value,
minDate,
@@ -21,29 +18,31 @@ export const Datepicker = ({
cancelText = "Cancel",
dateFormat = "DD/MM/YYYY",
}: DatepickerProps) => {
- let currentLocale = localeEn;
- if (locale === "it") currentLocale = localeIt;
- if (locale === "es") currentLocale = localeEs;
return (
- <>
-
-
+ {
+ if (!onChange) return;
+
+ const date = new Date(e.target.value);
+
+ const day = ("0" + date.getDate()).slice(-2);
+ const month = ("0" + (date.getMonth() + 1)).slice(-2);
+ const year = date.getFullYear().toString();
+
+ const formattedDate = dateFormat
+ .replace("DD", day)
+ .replace("MM", month)
+ .replace("YYYY", year);
+
+ onChange({
+ value: date,
+ valueText: formattedDate,
+ });
+ }}
+ />
);
};
diff --git a/src/stories/form/datepicker/_style.tsx b/src/stories/form/datepicker/_style.tsx
deleted file mode 100644
index 44392956..00000000
--- a/src/stories/form/datepicker/_style.tsx
+++ /dev/null
@@ -1,4826 +0,0 @@
-import { useEffect } from "react";
-import { createGlobalStyle } from "styled-components";
-import { InvalidFocusStyle, InvalidInputStyle } from "../_style";
-
-function addOpacityToHex(hex: string, alpha: string) {
- let hexAlphaPercent = parseInt((parseFloat(alpha) * 100).toString(), 16);
- return `${hex}${hexAlphaPercent}`;
-}
-
-export const DatepickerGlobalStyle = createGlobalStyle`${(props) => {
- return `
- @font-face {
- font-family: Mobiscroll;
- src: url(icons_mobiscroll.woff?vytnpl) format("woff"),
- url(icons_mobiscroll.woff) format("woff"),
- url(icons_mobiscroll.ttf?vytnpl) format("truetype");
- font-weight: 400;
- font-style: normal;
- }
-
- .mbsc-font-icon:before {
- font-family: Mobiscroll;
- speak: none;
- font-style: normal;
- font-weight: 400;
- font-variant: normal;
- text-transform: none;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
-
- .mbsc-icon-material-backspace:before {
- content: "\\ea01";
- }
-
- .mbsc-icon-material-check-box-outline-blank:before {
- content: "\\ea02";
- }
-
- .mbsc-icon-material-check:before {
- content: "\\ea03";
- }
-
- .mbsc-icon-material-keyboard-arrow-down:before {
- content: "\\ea04";
- }
-
- .mbsc-icon-material-keyboard-arrow-left:before {
- content: "\\ea05";
- }
-
- .mbsc-icon-material-keyboard-arrow-right:before {
- content: "\\ea06";
- }
-
- .mbsc-icon-material-keyboard-arrow-up:before {
- content: "\\ea07";
- }
-
- .mbsc-icon-material-star-outline:before {
- content: "\\ea08";
- }
-
- .mbsc-icon-material-star:before {
- content: "\\ea09";
- }
-
- .mbsc-icon {
- display: inline-block;
- vertical-align: middle;
- width: 1.5em;
- height: 1.5em;
- line-height: 1.5em;
- text-align: center;
- -webkit-box-flex: 0;
- -webkit-flex: 0 0 auto;
- -moz-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- }
-
- .mbsc-icon > svg {
- display: block;
- margin: 0 auto;
- width: 100%;
- height: 100%;
- fill: currentColor;
- }
-
- .mbsc-material.mbsc-description.mbsc-disabled,
- .mbsc-material.mbsc-form-control-label.mbsc-disabled {
- opacity: 0.3;
- }
-
- .mbsc-form-control-label {
- display: block;
- }
-
- .mbsc-form-control-input {
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- border: 0;
- opacity: 0;
- margin: 0;
- z-index: 3;
- }
-
- .mbsc-material.mbsc-textfield-wrapper {
- margin-bottom: 0;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
-
- .mbsc-material.mbsc-textfield-inner.mbsc-disabled {
- opacity: 0.5;
- }
-
- .mbsc-material.mbsc-textfield {
- display: block;
- width: 100%;
- background-color: transparent;
- border-bottom: 0;
- font-size: 1em;
- -webkit-transition: border-color 0.2s;
- transition: border-color 0.2s;
- }
-
- .mbsc-material.mbsc-textfield-has-icon-left {
- padding-left: 2em;
- }
-
- .mbsc-material.mbsc-textfield-has-icon-right {
- padding-right: 2em;
- }
-
- .mbsc-material.mbsc-textfield-icon {
- top: 0.375em;
- }
-
- .mbsc-material.mbsc-textfield-icon-floating,
- .mbsc-material.mbsc-textfield-icon-outline,
- .mbsc-material.mbsc-textfield-icon-stacked {
- top: 1em;
- }
-
- .mbsc-material .mbsc-textfield-ripple {
- display: none;
- }
-
- .mbsc-material.mbsc-label {
- font-size: 0.75em;
- }
-
- .mbsc-material.mbsc-label-inline {
- line-height: 2em;
- font-size: 1em;
- }
-
- .mbsc-material.mbsc-label-inline.mbsc-ltr {
- padding-right: 0.5em;
- }
-
- .mbsc-material.mbsc-label-inline.mbsc-rtl {
- padding-left: 0.5em;
- }
-
- .mbsc-material.mbsc-label-floating {
- font-size: 1em;
- line-height: 1.5em;
- top: 1.125em;
- }
-
- .mbsc-material.mbsc-label-floating-active {
- -webkit-transform: translateY(-1.125em) scale(0.75);
- transform: translateY(-1.125em) scale(0.75);
- }
-
- .mbsc-material.mbsc-label.mbsc-disabled {
- opacity: 0.5;
- }
-
- .mbsc-material.mbsc-error-message.mbsc-ltr {
- left: 0;
- }
-
- .mbsc-material.mbsc-error-message.mbsc-rtl {
- right: 0;
- }
-
- .mbsc-material.mbsc-error-message-has-icon-left.mbsc-ltr {
- left: 2.66667em;
- }
-
- .mbsc-material.mbsc-error-message-has-icon-right.mbsc-rtl {
- right: 2.66667em;
- }
-
- .mbsc-material.mbsc-textfield-underline-floating,
- .mbsc-material.mbsc-textfield-underline-stacked {
- height: 3em;
- padding-top: 0.875em;
- }
-
- .mbsc-material.mbsc-textfield-icon-underline {
- top: 0.25em;
- }
-
- .mbsc-material.mbsc-textfield-icon-underline.mbsc-textfield-icon-floating,
- .mbsc-material.mbsc-textfield-icon-underline.mbsc-textfield-icon-stacked {
- top: 1.125em;
- }
-
- .mbsc-material.mbsc-label-underline-inline {
- padding-top: 1px;
- }
-
- .mbsc-material.mbsc-label-underline-stacked-has-icon-left.mbsc-ltr {
- left: 2.66667em;
- }
-
- .mbsc-material.mbsc-label-underline-stacked-has-icon-right.mbsc-rtl {
- right: 2.66667em;
- }
-
- .mbsc-material.mbsc-label-underline-floating-has-icon-left.mbsc-ltr {
- left: 2em;
- }
-
- .mbsc-material.mbsc-label-underline-floating-has-icon-right.mbsc-rtl {
- right: 2em;
- }
-
- .mbsc-material.mbsc-textfield-box,
- .mbsc-material.mbsc-textfield-inner-box {
- border-radius: 0.25em;
- }
-
- .mbsc-material.mbsc-textfield-box {
- display: block;
- width: 100%;
- padding: 8px 12px;
- color: ${props.theme.palette.primary};
- font-size: 1rem;
- background-color: #fff;
- background-clip: padding-box;
- border: 1px solid ${props.theme.colors.elementGeneric};
- line-height: 1.5;
- }
-
- .mbsc-material.mbsc-textfield-box::placeholder {
- font-weight: ${props.theme.typography.fontWeight.light};
- color: ${props.theme.colors.gray500};
- }
-
- .mbsc-material.mbsc-textfield-box-floating,
- .mbsc-material.mbsc-textfield-box-stacked {
- height: 3.5em;
- padding-top: 1.25em;
- }
-
- .mbsc-material.mbsc-textfield-underline.mbsc-disabled {
- border-style: dotted;
- }
-
- .mbsc-material.mbsc-label-box-inline {
- padding-top: 1px;
- }
-
- .mbsc-material.mbsc-label-box-stacked {
- top: 0.666667em;
- }
-
- .mbsc-material.mbsc-label-box-floating {
- top: 1em;
- }
-
- .mbsc-material.mbsc-label-box-floating.mbsc-label-floating-active {
- -webkit-transform: translateY(-0.625em) scale(0.75);
- transform: translateY(-0.625em) scale(0.75);
- }
-
- .mbsc-material.mbsc-textfield-inner-outline {
- padding: 0 2px;
- }
-
- .mbsc-material.mbsc-textfield-outline {
- height: 3.5em;
- padding: 2px 1em;
- border: 0;
- border-radius: 4px;
- }
-
- .mbsc-material.mbsc-textfield-fieldset {
- top: -0.5em;
- border: 1px solid;
- border-radius: 4px;
- -webkit-transition: border-color 0.2s;
- transition: border-color 0.2s;
- }
-
- .mbsc-material.mbsc-textfield-fieldset-has-icon-left {
- padding-left: 3em;
- }
-
- .mbsc-material.mbsc-textfield-fieldset-has-icon-right {
- padding-right: 3em;
- }
-
- .mbsc-material.mbsc-textfield-fieldset.mbsc-focus {
- border-width: 2px;
- }
-
- .mbsc-material.mbsc-textfield-legend {
- padding: 0;
- margin: 0;
- font-size: 0.75em;
- color: transparent;
- width: 0.01px;
- white-space: nowrap;
- }
-
- .mbsc-material.mbsc-textfield-legend-active {
- width: auto;
- padding: 0 0.333334em;
- margin: 0 -0.333334em;
- }
-
- .mbsc-material.mbsc-label-outline-inline {
- line-height: 3.375em;
- }
-
- .mbsc-material.mbsc-label-outline-stacked {
- top: -0.5em;
- margin: 0 2px;
- }
-
- .mbsc-material.mbsc-label-outline-floating {
- top: 1em;
- margin: 0 2px;
- }
-
- .mbsc-material.mbsc-label-outline-floating.mbsc-label-floating-active {
- margin-top: -1px;
- -webkit-transform: translateY(-1.5em) scale(0.75);
- transform: translateY(-1.5em) scale(0.75);
- }
-
- .mbsc-material.mbsc-error-message-outline {
- margin: 0 2px;
- }
-
- .mbsc-material.mbsc-textfield-box-has-icon-left,
- .mbsc-material.mbsc-textfield-outline-has-icon-left {
- padding-left: 3em;
- }
-
- .mbsc-material.mbsc-textfield-box-has-icon-right,
- .mbsc-material.mbsc-textfield-outline-has-icon-right {
- padding-right: 3em;
- }
-
- .mbsc-material.mbsc-textfield-icon-box-left,
- .mbsc-material.mbsc-textfield-icon-outline-left {
- left: 0.75em;
- }
-
- .mbsc-material.mbsc-textfield-icon-box-right,
- .mbsc-material.mbsc-textfield-icon-outline-right {
- right: 0.75em;
- }
-
- .mbsc-material.mbsc-label-box-stacked.mbsc-ltr,
- .mbsc-material.mbsc-label-outline-stacked.mbsc-ltr {
- left: 1.333334em;
- }
-
- .mbsc-material.mbsc-label-box-stacked.mbsc-rtl,
- .mbsc-material.mbsc-label-outline-stacked.mbsc-rtl {
- right: 1.333334em;
- }
-
- .mbsc-material.mbsc-label-box-stacked-has-icon-left.mbsc-ltr,
- .mbsc-material.mbsc-label-outline-stacked-has-icon-left.mbsc-ltr {
- left: 4em;
- }
-
- .mbsc-material.mbsc-label-box-stacked-has-icon-right.mbsc-rtl,
- .mbsc-material.mbsc-label-outline-stacked-has-icon-right.mbsc-rtl {
- right: 4em;
- }
-
- .mbsc-material.mbsc-label-box-floating.mbsc-ltr,
- .mbsc-material.mbsc-label-outline-floating.mbsc-ltr {
- left: 1em;
- }
-
- .mbsc-material.mbsc-label-box-floating.mbsc-rtl,
- .mbsc-material.mbsc-label-outline-floating.mbsc-rtl {
- right: 1em;
- }
-
- .mbsc-material.mbsc-label-box-floating-has-icon-left.mbsc-ltr,
- .mbsc-material.mbsc-label-outline-floating-has-icon-left.mbsc-ltr {
- left: 3em;
- }
-
- .mbsc-material.mbsc-label-box-floating-has-icon-left.mbsc-rtl,
- .mbsc-material.mbsc-label-outline-floating-has-icon-left.mbsc-rtl {
- right: 1em;
- }
-
- .mbsc-material.mbsc-label-box-floating-has-icon-right.mbsc-rtl,
- .mbsc-material.mbsc-label-outline-floating-has-icon-right.mbsc-rtl {
- right: 3em;
- }
-
- .mbsc-material.mbsc-error-message-box.mbsc-ltr,
- .mbsc-material.mbsc-error-message-outline.mbsc-ltr {
- left: 1.333334em;
- }
-
- .mbsc-material.mbsc-error-message-box.mbsc-rtl,
- .mbsc-material.mbsc-error-message-outline.mbsc-rtl {
- right: 1.333334em;
- }
-
- .mbsc-material.mbsc-error-message-box.mbsc-error-message-has-icon-left.mbsc-ltr,
- .mbsc-material.mbsc-error-message-outline.mbsc-error-message-has-icon-left.mbsc-ltr {
- left: 4em;
- }
-
- .mbsc-material.mbsc-error-message-box.mbsc-error-message-has-icon-right.mbsc-rtl,
- .mbsc-material.mbsc-error-message-outline.mbsc-error-message-has-icon-right.mbsc-rtl {
- right: 4em;
- }
-
- .mbsc-material.mbsc-select.mbsc-ltr {
- padding-right: 3em;
- }
-
- .mbsc-material.mbsc-select.mbsc-rtl {
- padding-left: 3em;
- }
-
- .mbsc-material.mbsc-select.mbsc-textfield-has-icon-right.mbsc-ltr {
- padding-right: 4.5em;
- }
-
- .mbsc-material.mbsc-select.mbsc-textfield-has-icon-left.mbsc-rtl {
- padding-left: 4.5em;
- }
-
- .mbsc-material.mbsc-select.mbsc-textfield-underline-has-icon-right.mbsc-ltr {
- padding-right: 3.75em;
- }
-
- .mbsc-material.mbsc-select.mbsc-textfield-underline-has-icon-left.mbsc-rtl {
- padding-left: 3.75em;
- }
-
- .mbsc-material.mbsc-select-icon {
- top: 0.375em;
- }
-
- .mbsc-material.mbsc-select-icon.mbsc-ltr {
- right: 0.75em;
- }
-
- .mbsc-material.mbsc-select-icon.mbsc-rtl {
- left: 0.75em;
- }
-
- .mbsc-material.mbsc-select-icon-right.mbsc-ltr {
- right: 3em;
- }
-
- .mbsc-material.mbsc-select-icon-left.mbsc-rtl {
- left: 3em;
- }
-
- .mbsc-material.mbsc-select-icon-floating,
- .mbsc-material.mbsc-select-icon-outline,
- .mbsc-material.mbsc-select-icon-stacked {
- top: 1em;
- }
-
- .mbsc-material.mbsc-select-icon-underline {
- top: 0.25em;
- }
-
- .mbsc-material.mbsc-select-icon-underline.mbsc-ltr {
- right: 0;
- }
-
- .mbsc-material.mbsc-select-icon-underline.mbsc-rtl {
- left: 0;
- }
-
- .mbsc-material.mbsc-select-icon-underline.mbsc-select-icon-right.mbsc-ltr {
- right: 2.25em;
- }
-
- .mbsc-material.mbsc-select-icon-underline.mbsc-select-icon-left.mbsc-rtl {
- left: 2.25em;
- }
-
- .mbsc-material.mbsc-select-icon-underline.mbsc-select-icon-floating,
- .mbsc-material.mbsc-select-icon-underline.mbsc-select-icon-stacked {
- top: 1.125em;
- }
-
- .mbsc-material.mbsc-textarea {
- height: 1.875em;
- padding-bottom: 0.375em;
- }
-
- .mbsc-material.mbsc-textarea.mbsc-textfield-floating,
- .mbsc-material.mbsc-textarea.mbsc-textfield-stacked {
- padding-top: 0;
- }
-
- .mbsc-material.mbsc-textarea.mbsc-textfield-outline {
- height: 1.5em;
- padding-top: 0;
- padding-bottom: 0;
- }
-
- .mbsc-material.mbsc-textarea.mbsc-textfield-underline {
- padding-bottom: 0.3125em;
- }
-
- .mbsc-material.mbsc-textarea-inner.mbsc-textfield-inner-box {
- padding-top: 0.375em;
- }
-
- .mbsc-material.mbsc-textarea-inner.mbsc-textfield-inner-floating,
- .mbsc-material.mbsc-textarea-inner.mbsc-textfield-inner-stacked {
- padding-top: 1.625em;
- }
-
- .mbsc-material.mbsc-textarea-inner.mbsc-textfield-inner-outline {
- padding-top: 1em;
- padding-bottom: 1em;
- }
-
- .mbsc-material.mbsc-textarea-inner.mbsc-textfield-inner-underline {
- padding-top: 0.25em;
- }
-
- .mbsc-material.mbsc-textarea-inner.mbsc-textfield-inner-underline.mbsc-textfield-inner-floating,
- .mbsc-material.mbsc-textarea-inner.mbsc-textfield-inner-underline.mbsc-textfield-inner-stacked {
- padding-top: 1.125em;
- }
-
- .mbsc-material.mbsc-textfield.mbsc-error {
- border-color: #de3226;
- }
-
- .mbsc-material.mbsc-select-icon,
- .mbsc-material.mbsc-textfield-icon {
- color: rgba(0, 0, 0, 0.54);
- }
-
- .mbsc-material.mbsc-textfield-ripple {
- background-color: #1a73e8;
- }
-
- .mbsc-material.mbsc-textfield-ripple.mbsc-error {
- background-color: #de3226;
- }
-
- .mbsc-material.mbsc-label {
- color: rgba(0, 0, 0, 0.6);
- }
-
- .mbsc-material.mbsc-label-floating.mbsc-focus,
- .mbsc-material.mbsc-label-stacked.mbsc-focus {
- color: #1a73e8;
- }
-
- .mbsc-material.mbsc-error-message,
- .mbsc-material.mbsc-label.mbsc-error {
- color: #de3226;
- }
-
- .mbsc-material.mbsc-select {
- background: #fff;
- }
-
- .mbsc-material.mbsc-textfield-box.mbsc-select,
- .mbsc-material.mbsc-textfield-inner-box {
- background: #f5f5f5;
- }
-
- .mbsc-material.mbsc-textfield-box.mbsc-select.mbsc-hover,
- .mbsc-material.mbsc-textfield-inner-box.mbsc-hover {
- background: ${props.theme.colors.white};
- }
-
- .mbsc-material.mbsc-textfield-box.mbsc-select.mbsc-focus,
- .mbsc-material.mbsc-textfield-inner-box.mbsc-focus {
- background: #e3e3e3;
- }
-
- .mbsc-material.mbsc-textfield-fieldset {
- border-color: rgba(0, 0, 0, 0.42);
- }
-
- .mbsc-material.mbsc-textfield-fieldset.mbsc-hover {
- border-color: rgba(0, 0, 0, 0.87);
- }
-
- .mbsc-material.mbsc-textfield-fieldset.mbsc-focus {
- //border-color: #1a73e8;
- }
-
- .mbsc-material.mbsc-textfield-fieldset.mbsc-error {
- border-color: #de3226;
- }
-
- .mbsc-material.mbsc-textfield-fieldset.disabled {
- border-color: rgba(0, 0, 0, 0.87);
- }
-
- .mbsc-material-dark.mbsc-textfield {
- border-bottom-color: #fff;
- color: #fff;
- }
-
- .mbsc-material-dark.mbsc-textfield.mbsc-hover {
- border-color: #fff;
- }
-
- .mbsc-material-dark.mbsc-textfield.mbsc-error {
- border-color: #de3226;
- }
-
- .mbsc-material-dark.mbsc-select-icon,
- .mbsc-material-dark.mbsc-textfield-icon {
- color: #fff;
- }
-
- .mbsc-material-dark.mbsc-textfield-ripple {
- background-color: transparent;
- }
-
- .mbsc-material-dark.mbsc-textfield-ripple.mbsc-error {
- background-color: transparent;
- }
-
- .mbsc-material-dark.mbsc-label {
- color: hsla(0, 0%, 100%, 0.6);
- }
-
- .mbsc-material-dark.mbsc-label-floating.mbsc-focus,
- .mbsc-material-dark.mbsc-label-stacked.mbsc-focus {
- color: #87b0f3;
- }
-
- .mbsc-material-dark.mbsc-error-message,
- .mbsc-material-dark.mbsc-label.mbsc-error {
- color: #de3226;
- }
-
- .mbsc-material-dark.mbsc-select {
- background: #000;
- }
-
- .mbsc-material-dark.mbsc-textfield-box.mbsc-select,
- .mbsc-material-dark.mbsc-textfield-inner-box {
- background: #0a0a0a;
- }
-
- .mbsc-material-dark.mbsc-textfield-box.mbsc-select.mbsc-hover,
- .mbsc-material-dark.mbsc-textfield-inner-box.mbsc-hover {
- background: #121212;
- }
-
- .mbsc-material-dark.mbsc-textfield-box.mbsc-select.mbsc-focus,
- .mbsc-material-dark.mbsc-textfield-inner-box.mbsc-focus {
- background: #1c1c1c;
- }
-
- .mbsc-material-dark.mbsc-textfield-fieldset,
- .mbsc-material-dark.mbsc-textfield-fieldset.mbsc-hover {
- border-color: #fff;
- }
-
- .mbsc-material-dark.mbsc-textfield-fieldset.mbsc-focus {
- border-color: #87b0f3;
- }
-
- .mbsc-material-dark.mbsc-textfield-fieldset.mbsc-error {
- border-color: #de3226;
- }
-
- .mbsc-material-dark.mbsc-textfield-fieldset.disabled {
- border-color: #fff;
- }
-
- @-webkit-keyframes autofill {
- 0% {
- opacity: 1;
- }
- to {
- opacity: 1;
- }
- }
-
- @keyframes autofill {
- 0% {
- opacity: 1;
- }
- to {
- opacity: 1;
- }
- }
-
- .mbsc-textfield-wrapper {
- position: relative;
- display: block;
- margin: 0;
- z-index: 0;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
-
- .mbsc-textfield-wrapper-inline {
- display: -webkit-box;
- display: -webkit-flex;
- display: -moz-box;
- display: -ms-flexbox;
- display: flex;
- }
-
- .mbsc-textfield-inner {
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- position: relative;
- display: block;
- }
-
- .mbsc-textfield-inner-inline {
- -webkit-box-flex: 1;
- -webkit-flex: 1 auto;
- -moz-box-flex: 1;
- -ms-flex: 1 auto;
- flex: 1 auto;
- }
-
- .mbsc-textfield {
- display: block;
- width: 100%;
- font-size: 1em;
- margin: 0;
- padding: 0;
- border: 0;
- border-radius: 0;
- outline: 0;
- font-family: ${props.theme.typography.fontFamily.base};
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- -moz-appearance: none;
- appearance: none;
- -webkit-appearance: none;
- }
-
- .mbsc-textfield:-webkit-autofill {
- -webkit-animation-name: autofill;
- animation-name: autofill;
- }
-
- .mbsc-textfield::-webkit-inner-spin-button {
- height: 2em;
- -webkit-align-self: center;
- align-self: center;
- }
-
- .mbsc-textfield::-moz-placeholder {
- color: ${props.theme.colors.disabled};
- opacity: 1;
- }
-
- .mbsc-textfield::-webkit-input-placeholder {
- color: ${props.theme.colors.disabled};
- opacity: 1;
- }
-
- .mbsc-textfield-floating:-ms-input-placeholder {
- color: transparent;
- }
-
- .mbsc-textfield-floating::-moz-placeholder {
- opacity: 0;
- -moz-transition: opacity 0.2s;
- transition: opacity 0.2s;
- }
-
- .mbsc-textfield-floating::-webkit-input-placeholder {
- opacity: 0;
- -webkit-transition: opacity 0.2s;
- transition: opacity 0.2s;
- }
-
- .mbsc-textfield-floating::-webkit-datetime-edit {
- color: transparent;
- }
-
- .mbsc-textfield-floating-active:-ms-input-placeholder {
- color: inherit;
- }
-
- .mbsc-textfield-floating-active::-moz-placeholder {
- opacity: 0.5;
- }
-
- .mbsc-textfield-floating-active::-webkit-input-placeholder {
- opacity: 0.5;
- }
-
- .mbsc-textfield-floating-active::-webkit-datetime-edit {
- color: inherit;
- }
-
- .mbsc-textfield-fieldset {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- margin: 0;
- padding: 0 1em;
- pointer-events: none;
- }
-
- .mbsc-textfield-icon {
- position: absolute;
- top: 0;
- text-align: center;
- }
-
- .mbsc-textfield-icon-left {
- left: 0;
- }
-
- .mbsc-textfield-icon-right {
- right: 0;
- }
-
- .mbsc-label {
- position: absolute;
- z-index: 1;
- top: 0;
- line-height: 1em;
- white-space: nowrap;
- text-overflow: ellipsis;
- pointer-events: none;
- }
-
- .mbsc-label-inline {
- position: static;
- overflow: hidden;
- -webkit-box-flex: 0;
- -webkit-flex: 0 0 auto;
- -moz-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- width: 30%;
- max-width: 12.5em;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- pointer-events: auto;
- }
-
- .mbsc-label-floating-animate {
- -webkit-transition: -webkit-transform 0.2s;
- transition: -webkit-transform 0.2s;
- transition: transform 0.2s;
- transition: transform 0.2s, -webkit-transform 0.2s;
- }
-
- .mbsc-label-floating.mbsc-ltr {
- -webkit-transform-origin: top left;
- transform-origin: top left;
- }
-
- .mbsc-label-floating.mbsc-rtl {
- -webkit-transform-origin: top right;
- transform-origin: top right;
- }
-
- .mbsc-error-message {
- position: absolute;
- top: 100%;
- font-size: 0.75em;
- line-height: 1.5em;
- }
-
- .mbsc-textfield-file {
- position: absolute;
- left: 0;
- opacity: 0;
- }
-
- .mbsc-select {
- cursor: pointer;
- }
-
- .mbsc-select-icon {
- position: absolute;
- text-align: center;
- pointer-events: none;
- }
-
- .mbsc-textarea {
- resize: none;
- overflow: hidden;
- line-height: 1.5em;
- }
-
- .mbsc-toggle-icon:hover {
- cursor: pointer;
- }
-
- :root {
- --mbsc-safe-top: 0;
- --mbsc-safe-right: 0;
- --mbsc-safe-bottom: 0;
- --mbsc-safe-left: 0;
- }
-
- @supports (top: constant(safe-area-inset-top)) {
- :root {
- --mbsc-safe-top: constant(safe-area-inset-top);
- --mbsc-safe-right: constant(safe-area-inset-right);
- --mbsc-safe-bottom: constant(safe-area-inset-bottom);
- --mbsc-safe-left: constant(safe-area-inset-left);
- }
- }
-
- @supports (top: env(safe-area-inset-top)) {
- :root {
- --mbsc-safe-top: env(safe-area-inset-top);
- --mbsc-safe-right: env(safe-area-inset-right);
- --mbsc-safe-bottom: env(safe-area-inset-bottom);
- --mbsc-safe-left: env(safe-area-inset-left);
- }
- }
-
- .mbsc-font {
- font-family: -apple-system, Segoe UI, Roboto, sans-serif;
- font-size: 16px;
- font-weight: ${props.theme.typography.fontWeight.light};
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
- -webkit-text-size-adjust: 100%;
- }
-
- .mbsc-reset {
- margin: 0;
- padding: 0;
- border: 0;
- background: none;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- }
-
- .mbsc-resize {
- right: 0;
- bottom: 0;
- overflow: hidden;
- z-index: -1;
- }
-
- .mbsc-resize,
- .mbsc-resize-i {
- position: absolute;
- left: 0;
- top: 0;
- }
-
- .mbsc-resize-y {
- width: 200%;
- height: 200%;
- }
-
- .mbsc-hidden {
- visibility: hidden;
- }
-
- .mbsc-ltr {
- direction: ltr;
- }
-
- .mbsc-rtl {
- direction: rtl;
- }
-
- .mbsc-ripple {
- background: currentColor;
- position: absolute;
- top: 0;
- left: 0;
- opacity: 0;
- border-radius: 1000em;
- pointer-events: none;
- -webkit-transform: scale(0);
- transform: scale(0);
- }
-
- .mbsc-flex,
- .mbsc-flex-col {
- display: -webkit-box;
- display: -webkit-flex;
- display: -moz-box;
- display: -ms-flexbox;
- display: flex;
- }
-
- .mbsc-flex-col {
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -webkit-flex-direction: column;
- -moz-box-orient: vertical;
- -moz-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- }
-
- .mbsc-flex-1-1 {
- -webkit-box-flex: 1;
- -webkit-flex: 1 1;
- -moz-box-flex: 1;
- -ms-flex: 1 1;
- flex: 1 1;
- }
-
- @media (-webkit-min-device-pixel-ratio: 2) {
- .mbsc-hb,
- .mbsc-hb:after,
- .mbsc-hb:before {
- border-width: 0.5px !important;
- }
- }
-
- .mbsc-material.mbsc-button {
- min-width: 4.571429em;
- padding: 0.428572em 1.142858em;
- border-radius: 0.285715em;
- font-size: 0.875em;
- font-weight: 600;
- line-height: 1.714286em;
- -webkit-transition: box-shadow 0.2s ease-out, background-color 0.2s ease-out;
- transition: box-shadow 0.2s ease-out, background-color 0.2s ease-out;
- margin: 0.5em;
- }
-
- .mbsc-material.mbsc-button-outline {
- border: 1px solid;
- }
-
- .mbsc-material.mbsc-button .mbsc-icon {
- font-size: 1.142858em;
- }
-
- .mbsc-material.mbsc-icon-button {
- min-width: 0;
- padding: 0.5em;
- border-radius: 2em;
- font-size: 1em;
- line-height: normal;
- }
-
- .mbsc-material.mbsc-icon-button .mbsc-icon {
- width: 1.5em;
- height: 1.5em;
- font-size: 1em;
- }
-
- .mbsc-material.mbsc-button.mbsc-disabled,
- .mbsc-material.mbsc-button:disabled {
- opacity: 0.3;
- }
-
- .mbsc-material.mbsc-ltr.mbsc-button-icon-start {
- padding-right: 0.5em;
- margin-left: -0.25em;
- }
-
- .mbsc-material.mbsc-ltr.mbsc-button-icon-end,
- .mbsc-material.mbsc-rtl.mbsc-button-icon-start {
- padding-left: 0.5em;
- margin-right: -0.25em;
- }
-
- .mbsc-material.mbsc-rtl.mbsc-button-icon-end {
- padding-right: 0.5em;
- margin-left: -0.25em;
- }
-
- .mbsc-material .mbsc-button-group,
- .mbsc-material .mbsc-button-group-justified {
- margin: 0.5em;
- }
-
- .mbsc-material .mbsc-button-group-block {
- margin: 0.5em 1em;
- }
-
- .mbsc-material.mbsc-button-standard {
- background: #cfcfcf;
- color: #000;
- box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
- 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
- }
-
- .mbsc-material.mbsc-button-standard.mbsc-hover {
- box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
- 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
- }
-
- .mbsc-material.mbsc-button-standard.mbsc-active,
- .mbsc-material.mbsc-button-standard.mbsc-focus {
- box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
- 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
- }
-
- .mbsc-material.mbsc-button-flat,
- .mbsc-material.mbsc-button-outline {
- color: #000;
- }
-
- .mbsc-material.mbsc-button-flat.mbsc-active,
- .mbsc-material.mbsc-button-flat.mbsc-hover,
- .mbsc-material.mbsc-button-outline.mbsc-active,
- .mbsc-material.mbsc-button-outline.mbsc-hover {
- background: rgba(0, 0, 0, 0.2);
- }
-
- .mbsc-material.mbsc-button-flat.mbsc-focus,
- .mbsc-material.mbsc-button-outline.mbsc-focus {
- background: rgba(0, 0, 0, 0.3);
- }
-
- .mbsc-material.mbsc-button-outline {
- border-color: #000;
- }
-
- .mbsc-material.mbsc-button-primary.mbsc-button-standard {
- background: #3f97f6;
- color: #fff;
- }
-
- .mbsc-material.mbsc-button-secondary.mbsc-button-standard {
- background: #90979e;
- color: #fff;
- }
-
- .mbsc-material.mbsc-button-success.mbsc-button-standard {
- background: #43be5f;
- color: #fff;
- }
-
- .mbsc-material.mbsc-button-danger.mbsc-button-standard {
- background: #f5504e;
- color: #fff;
- }
-
- .mbsc-material.mbsc-button-warning.mbsc-button-standard {
- background: #f8b042;
- color: #fff;
- }
-
- .mbsc-material.mbsc-button-info.mbsc-button-standard {
- background: #5bb7c5;
- color: #fff;
- }
-
- .mbsc-material.mbsc-button-dark.mbsc-button-standard {
- background: #47494a;
- color: #fff;
- }
-
- .mbsc-material.mbsc-button-light.mbsc-button-standard {
- background: #fff;
- color: #303030;
- }
-
- .mbsc-material.mbsc-button-primary.mbsc-button-flat {
- color: #3f97f6;
- }
-
- .mbsc-material.mbsc-button-primary.mbsc-button-flat.mbsc-active,
- .mbsc-material.mbsc-button-primary.mbsc-button-flat.mbsc-hover {
- background: rgba(63, 151, 246, 0.2);
- }
-
- .mbsc-material.mbsc-button-primary.mbsc-button-flat.mbsc-focus {
- background: rgba(63, 151, 246, 0.3);
- }
-
- .mbsc-material.mbsc-button-secondary.mbsc-button-flat {
- color: #90979e;
- }
-
- .mbsc-material.mbsc-button-secondary.mbsc-button-flat.mbsc-active,
- .mbsc-material.mbsc-button-secondary.mbsc-button-flat.mbsc-hover {
- background: rgba(144, 151, 158, 0.2);
- }
-
- .mbsc-material.mbsc-button-secondary.mbsc-button-flat.mbsc-focus {
- background: rgba(144, 151, 158, 0.3);
- }
-
- .mbsc-material.mbsc-button-success.mbsc-button-flat {
- color: #43be5f;
- }
-
- .mbsc-material.mbsc-button-success.mbsc-button-flat.mbsc-active,
- .mbsc-material.mbsc-button-success.mbsc-button-flat.mbsc-hover {
- background: rgba(67, 190, 95, 0.2);
- }
-
- .mbsc-material.mbsc-button-success.mbsc-button-flat.mbsc-focus {
- background: rgba(67, 190, 95, 0.3);
- }
-
- .mbsc-material.mbsc-button-danger.mbsc-button-flat {
- color: #f5504e;
- }
-
- .mbsc-material.mbsc-button-danger.mbsc-button-flat.mbsc-active,
- .mbsc-material.mbsc-button-danger.mbsc-button-flat.mbsc-hover {
- background: rgba(245, 80, 78, 0.2);
- }
-
- .mbsc-material.mbsc-button-danger.mbsc-button-flat.mbsc-focus {
- background: rgba(245, 80, 78, 0.3);
- }
-
- .mbsc-material.mbsc-button-warning.mbsc-button-flat {
- color: #f8b042;
- }
-
- .mbsc-material.mbsc-button-warning.mbsc-button-flat.mbsc-active,
- .mbsc-material.mbsc-button-warning.mbsc-button-flat.mbsc-hover {
- background: rgba(248, 176, 66, 0.2);
- }
-
- .mbsc-material.mbsc-button-warning.mbsc-button-flat.mbsc-focus {
- background: rgba(248, 176, 66, 0.3);
- }
-
- .mbsc-material.mbsc-button-info.mbsc-button-flat {
- color: #5bb7c5;
- }
-
- .mbsc-material.mbsc-button-info.mbsc-button-flat.mbsc-active,
- .mbsc-material.mbsc-button-info.mbsc-button-flat.mbsc-hover {
- background: rgba(91, 183, 197, 0.2);
- }
-
- .mbsc-material.mbsc-button-info.mbsc-button-flat.mbsc-focus {
- background: rgba(91, 183, 197, 0.3);
- }
-
- .mbsc-material.mbsc-button-dark.mbsc-button-flat {
- color: #47494a;
- }
-
- .mbsc-material.mbsc-button-dark.mbsc-button-flat.mbsc-active,
- .mbsc-material.mbsc-button-dark.mbsc-button-flat.mbsc-hover {
- background: rgba(71, 73, 74, 0.2);
- }
-
- .mbsc-material.mbsc-button-dark.mbsc-button-flat.mbsc-focus {
- background: rgba(71, 73, 74, 0.3);
- }
-
- .mbsc-material.mbsc-button-light.mbsc-button-flat {
- color: #ccc;
- }
-
- .mbsc-material.mbsc-button-light.mbsc-button-flat.mbsc-active,
- .mbsc-material.mbsc-button-light.mbsc-button-flat.mbsc-hover {
- background: hsla(0, 0%, 100%, 0.2);
- }
-
- .mbsc-material.mbsc-button-light.mbsc-button-flat.mbsc-focus {
- background: hsla(0, 0%, 100%, 0.3);
- }
-
- .mbsc-material.mbsc-button-primary.mbsc-button-outline {
- border-color: #3f97f6;
- color: #3f97f6;
- }
-
- .mbsc-material.mbsc-button-primary.mbsc-button-outline.mbsc-active,
- .mbsc-material.mbsc-button-primary.mbsc-button-outline.mbsc-hover {
- background: rgba(63, 151, 246, 0.2);
- }
-
- .mbsc-material.mbsc-button-primary.mbsc-button-outline.mbsc-focus {
- background: rgba(63, 151, 246, 0.3);
- }
-
- .mbsc-material.mbsc-button-secondary.mbsc-button-outline {
- border-color: #90979e;
- color: #90979e;
- }
-
- .mbsc-material.mbsc-button-secondary.mbsc-button-outline.mbsc-active,
- .mbsc-material.mbsc-button-secondary.mbsc-button-outline.mbsc-hover {
- background: rgba(144, 151, 158, 0.2);
- }
-
- .mbsc-material.mbsc-button-secondary.mbsc-button-outline.mbsc-focus {
- background: rgba(144, 151, 158, 0.3);
- }
-
- .mbsc-material.mbsc-button-success.mbsc-button-outline {
- border-color: #43be5f;
- color: #43be5f;
- }
-
- .mbsc-material.mbsc-button-success.mbsc-button-outline.mbsc-active,
- .mbsc-material.mbsc-button-success.mbsc-button-outline.mbsc-hover {
- background: rgba(67, 190, 95, 0.2);
- }
-
- .mbsc-material.mbsc-button-success.mbsc-button-outline.mbsc-focus {
- background: rgba(67, 190, 95, 0.3);
- }
-
- .mbsc-material.mbsc-button-danger.mbsc-button-outline {
- border-color: #f5504e;
- color: #f5504e;
- }
-
- .mbsc-material.mbsc-button-danger.mbsc-button-outline.mbsc-active,
- .mbsc-material.mbsc-button-danger.mbsc-button-outline.mbsc-hover {
- background: rgba(245, 80, 78, 0.2);
- }
-
- .mbsc-material.mbsc-button-danger.mbsc-button-outline.mbsc-focus {
- background: rgba(245, 80, 78, 0.3);
- }
-
- .mbsc-material.mbsc-button-warning.mbsc-button-outline {
- border-color: #f8b042;
- color: #f8b042;
- }
-
- .mbsc-material.mbsc-button-warning.mbsc-button-outline.mbsc-active,
- .mbsc-material.mbsc-button-warning.mbsc-button-outline.mbsc-hover {
- background: rgba(248, 176, 66, 0.2);
- }
-
- .mbsc-material.mbsc-button-warning.mbsc-button-outline.mbsc-focus {
- background: rgba(248, 176, 66, 0.3);
- }
-
- .mbsc-material.mbsc-button-info.mbsc-button-outline {
- border-color: #5bb7c5;
- color: #5bb7c5;
- }
-
- .mbsc-material.mbsc-button-info.mbsc-button-outline.mbsc-active,
- .mbsc-material.mbsc-button-info.mbsc-button-outline.mbsc-hover {
- background: rgba(91, 183, 197, 0.2);
- }
-
- .mbsc-material.mbsc-button-info.mbsc-button-outline.mbsc-focus {
- background: rgba(91, 183, 197, 0.3);
- }
-
- .mbsc-material.mbsc-button-dark.mbsc-button-outline {
- border-color: #47494a;
- color: #47494a;
- }
-
- .mbsc-material.mbsc-button-dark.mbsc-button-outline.mbsc-active,
- .mbsc-material.mbsc-button-dark.mbsc-button-outline.mbsc-hover {
- background: rgba(71, 73, 74, 0.2);
- }
-
- .mbsc-material.mbsc-button-dark.mbsc-button-outline.mbsc-focus {
- background: rgba(71, 73, 74, 0.3);
- }
-
- .mbsc-material.mbsc-button-light.mbsc-button-outline {
- border-color: #ccc;
- color: #ccc;
- }
-
- .mbsc-material.mbsc-button-light.mbsc-button-outline.mbsc-active,
- .mbsc-material.mbsc-button-light.mbsc-button-outline.mbsc-hover {
- background: hsla(0, 0%, 100%, 0.2);
- }
-
- .mbsc-material.mbsc-button-light.mbsc-button-outline.mbsc-focus {
- background: hsla(0, 0%, 100%, 0.3);
- }
-
- .mbsc-material-dark.mbsc-button-standard {
- background: #2b2b2b;
- color: #fff;
- box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
- 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
- }
-
- .mbsc-material-dark.mbsc-button-standard.mbsc-hover {
- box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
- 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
- }
-
- .mbsc-material-dark.mbsc-button-standard.mbsc-active,
- .mbsc-material-dark.mbsc-button-standard.mbsc-focus {
- box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
- 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
- }
-
- .mbsc-material-dark.mbsc-button-flat,
- .mbsc-material-dark.mbsc-button-outline {
- color: #fff;
- }
-
- .mbsc-material-dark.mbsc-button-flat.mbsc-active,
- .mbsc-material-dark.mbsc-button-flat.mbsc-hover,
- .mbsc-material-dark.mbsc-button-outline.mbsc-active,
- .mbsc-material-dark.mbsc-button-outline.mbsc-hover {
- background: hsla(0, 0%, 100%, 0.2);
- }
-
- .mbsc-material-dark.mbsc-button-flat.mbsc-focus,
- .mbsc-material-dark.mbsc-button-outline.mbsc-focus {
- background: hsla(0, 0%, 100%, 0.3);
- }
-
- .mbsc-material-dark.mbsc-button-outline {
- border-color: #fff;
- }
-
- .mbsc-material-dark.mbsc-button-primary.mbsc-button-standard {
- background: #3f97f6;
- color: #000;
- }
-
- .mbsc-material-dark.mbsc-button-secondary.mbsc-button-standard {
- background: #90979e;
- color: #000;
- }
-
- .mbsc-material-dark.mbsc-button-success.mbsc-button-standard {
- background: #43be5f;
- color: #000;
- }
-
- .mbsc-material-dark.mbsc-button-danger.mbsc-button-standard {
- background: #f5504e;
- color: #000;
- }
-
- .mbsc-material-dark.mbsc-button-warning.mbsc-button-standard {
- background: #f8b042;
- color: #000;
- }
-
- .mbsc-material-dark.mbsc-button-info.mbsc-button-standard {
- background: #5bb7c5;
- color: #000;
- }
-
- .mbsc-material-dark.mbsc-button-dark.mbsc-button-standard {
- background: #47494a;
- color: #000;
- }
-
- .mbsc-material-dark.mbsc-button-light.mbsc-button-standard {
- background: #fff;
- color: #fff;
- }
-
- .mbsc-material-dark.mbsc-button-primary.mbsc-button-flat {
- color: #3f97f6;
- }
-
- .mbsc-material-dark.mbsc-button-primary.mbsc-button-flat.mbsc-active,
- .mbsc-material-dark.mbsc-button-primary.mbsc-button-flat.mbsc-hover {
- background: rgba(63, 151, 246, 0.2);
- }
-
- .mbsc-material-dark.mbsc-button-primary.mbsc-button-flat.mbsc-focus {
- background: rgba(63, 151, 246, 0.3);
- }
-
- .mbsc-material-dark.mbsc-button-secondary.mbsc-button-flat {
- color: #90979e;
- }
-
- .mbsc-material-dark.mbsc-button-secondary.mbsc-button-flat.mbsc-active,
- .mbsc-material-dark.mbsc-button-secondary.mbsc-button-flat.mbsc-hover {
- background: rgba(144, 151, 158, 0.2);
- }
-
- .mbsc-material-dark.mbsc-button-secondary.mbsc-button-flat.mbsc-focus {
- background: rgba(144, 151, 158, 0.3);
- }
-
- .mbsc-material-dark.mbsc-button-success.mbsc-button-flat {
- color: #43be5f;
- }
-
- .mbsc-material-dark.mbsc-button-success.mbsc-button-flat.mbsc-active,
- .mbsc-material-dark.mbsc-button-success.mbsc-button-flat.mbsc-hover {
- background: rgba(67, 190, 95, 0.2);
- }
-
- .mbsc-material-dark.mbsc-button-success.mbsc-button-flat.mbsc-focus {
- background: rgba(67, 190, 95, 0.3);
- }
-
- .mbsc-material-dark.mbsc-button-danger.mbsc-button-flat {
- color: #f5504e;
- }
-
- .mbsc-material-dark.mbsc-button-danger.mbsc-button-flat.mbsc-active,
- .mbsc-material-dark.mbsc-button-danger.mbsc-button-flat.mbsc-hover {
- background: rgba(245, 80, 78, 0.2);
- }
-
- .mbsc-material-dark.mbsc-button-danger.mbsc-button-flat.mbsc-focus {
- background: rgba(245, 80, 78, 0.3);
- }
-
- .mbsc-material-dark.mbsc-button-warning.mbsc-button-flat {
- color: #f8b042;
- }
-
- .mbsc-material-dark.mbsc-button-warning.mbsc-button-flat.mbsc-active,
- .mbsc-material-dark.mbsc-button-warning.mbsc-button-flat.mbsc-hover {
- background: rgba(248, 176, 66, 0.2);
- }
-
- .mbsc-material-dark.mbsc-button-warning.mbsc-button-flat.mbsc-focus {
- background: rgba(248, 176, 66, 0.3);
- }
-
- .mbsc-material-dark.mbsc-button-info.mbsc-button-flat {
- color: #5bb7c5;
- }
-
- .mbsc-material-dark.mbsc-button-info.mbsc-button-flat.mbsc-active,
- .mbsc-material-dark.mbsc-button-info.mbsc-button-flat.mbsc-hover {
- background: rgba(91, 183, 197, 0.2);
- }
-
- .mbsc-material-dark.mbsc-button-info.mbsc-button-flat.mbsc-focus {
- background: rgba(91, 183, 197, 0.3);
- }
-
- .mbsc-material-dark.mbsc-button-dark.mbsc-button-flat {
- color: #47494a;
- }
-
- .mbsc-material-dark.mbsc-button-dark.mbsc-button-flat.mbsc-active,
- .mbsc-material-dark.mbsc-button-dark.mbsc-button-flat.mbsc-hover {
- background: rgba(71, 73, 74, 0.2);
- }
-
- .mbsc-material-dark.mbsc-button-dark.mbsc-button-flat.mbsc-focus {
- background: rgba(71, 73, 74, 0.3);
- }
-
- .mbsc-material-dark.mbsc-button-light.mbsc-button-flat {
- color: #ccc;
- }
-
- .mbsc-material-dark.mbsc-button-light.mbsc-button-flat.mbsc-active,
- .mbsc-material-dark.mbsc-button-light.mbsc-button-flat.mbsc-hover {
- background: hsla(0, 0%, 100%, 0.2);
- }
-
- .mbsc-material-dark.mbsc-button-light.mbsc-button-flat.mbsc-focus {
- background: hsla(0, 0%, 100%, 0.3);
- }
-
- .mbsc-material-dark.mbsc-button-primary.mbsc-button-outline {
- border-color: #3f97f6;
- color: #3f97f6;
- }
-
- .mbsc-material-dark.mbsc-button-primary.mbsc-button-outline.mbsc-active,
- .mbsc-material-dark.mbsc-button-primary.mbsc-button-outline.mbsc-hover {
- background: rgba(63, 151, 246, 0.2);
- }
-
- .mbsc-material-dark.mbsc-button-primary.mbsc-button-outline.mbsc-focus {
- background: rgba(63, 151, 246, 0.3);
- }
-
- .mbsc-material-dark.mbsc-button-secondary.mbsc-button-outline {
- border-color: #90979e;
- color: #90979e;
- }
-
- .mbsc-material-dark.mbsc-button-secondary.mbsc-button-outline.mbsc-active,
- .mbsc-material-dark.mbsc-button-secondary.mbsc-button-outline.mbsc-hover {
- background: rgba(144, 151, 158, 0.2);
- }
-
- .mbsc-material-dark.mbsc-button-secondary.mbsc-button-outline.mbsc-focus {
- background: rgba(144, 151, 158, 0.3);
- }
-
- .mbsc-material-dark.mbsc-button-success.mbsc-button-outline {
- border-color: #43be5f;
- color: #43be5f;
- }
-
- .mbsc-material-dark.mbsc-button-success.mbsc-button-outline.mbsc-active,
- .mbsc-material-dark.mbsc-button-success.mbsc-button-outline.mbsc-hover {
- background: rgba(67, 190, 95, 0.2);
- }
-
- .mbsc-material-dark.mbsc-button-success.mbsc-button-outline.mbsc-focus {
- background: rgba(67, 190, 95, 0.3);
- }
-
- .mbsc-material-dark.mbsc-button-danger.mbsc-button-outline {
- border-color: #f5504e;
- color: #f5504e;
- }
-
- .mbsc-material-dark.mbsc-button-danger.mbsc-button-outline.mbsc-active,
- .mbsc-material-dark.mbsc-button-danger.mbsc-button-outline.mbsc-hover {
- background: rgba(245, 80, 78, 0.2);
- }
-
- .mbsc-material-dark.mbsc-button-danger.mbsc-button-outline.mbsc-focus {
- background: rgba(245, 80, 78, 0.3);
- }
-
- .mbsc-material-dark.mbsc-button-warning.mbsc-button-outline {
- border-color: #f8b042;
- color: #f8b042;
- }
-
- .mbsc-material-dark.mbsc-button-warning.mbsc-button-outline.mbsc-active,
- .mbsc-material-dark.mbsc-button-warning.mbsc-button-outline.mbsc-hover {
- background: rgba(248, 176, 66, 0.2);
- }
-
- .mbsc-material-dark.mbsc-button-warning.mbsc-button-outline.mbsc-focus {
- background: rgba(248, 176, 66, 0.3);
- }
-
- .mbsc-material-dark.mbsc-button-info.mbsc-button-outline {
- border-color: #5bb7c5;
- color: #5bb7c5;
- }
-
- .mbsc-material-dark.mbsc-button-info.mbsc-button-outline.mbsc-active,
- .mbsc-material-dark.mbsc-button-info.mbsc-button-outline.mbsc-hover {
- background: rgba(91, 183, 197, 0.2);
- }
-
- .mbsc-material-dark.mbsc-button-info.mbsc-button-outline.mbsc-focus {
- background: rgba(91, 183, 197, 0.3);
- }
-
- .mbsc-material-dark.mbsc-button-dark.mbsc-button-outline {
- border-color: #47494a;
- color: #47494a;
- }
-
- .mbsc-material-dark.mbsc-button-dark.mbsc-button-outline.mbsc-active,
- .mbsc-material-dark.mbsc-button-dark.mbsc-button-outline.mbsc-hover {
- background: rgba(71, 73, 74, 0.2);
- }
-
- .mbsc-material-dark.mbsc-button-dark.mbsc-button-outline.mbsc-focus {
- background: rgba(71, 73, 74, 0.3);
- }
-
- .mbsc-material-dark.mbsc-button-light.mbsc-button-outline {
- border-color: #ccc;
- color: #ccc;
- }
-
- .mbsc-material-dark.mbsc-button-light.mbsc-button-outline.mbsc-active,
- .mbsc-material-dark.mbsc-button-light.mbsc-button-outline.mbsc-hover {
- background: hsla(0, 0%, 100%, 0.2);
- }
-
- .mbsc-material-dark.mbsc-button-light.mbsc-button-outline.mbsc-focus {
- background: hsla(0, 0%, 100%, 0.3);
- }
-
- .mbsc-button {
- position: relative;
- z-index: 1;
- display: inline-block;
- vertical-align: middle;
- display: inline-flex;
- justify-content: center;
- align-items: center;
- overflow: hidden;
- text-align: center;
- text-overflow: ellipsis;
- font-size: 1em;
- box-sizing: border-box;
- touch-action: manipulation;
- user-select: none;
- white-space: nowrap;
- cursor: pointer;
- }
-
- .mbsc-button.mbsc-disabled,
- .mbsc-button:disabled {
- cursor: not-allowed;
- }
-
- .mbsc-button:focus {
- outline: 0;
- }
-
- .mbsc-button::-moz-focus-inner {
- border: 0;
- }
-
- .mbsc-icon-button {
- width: 2.5em;
- height: 2.5em;
- padding: 0.5em;
- -webkit-box-flex: 0;
- -webkit-flex: 0 0 auto;
- -moz-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- }
-
- .mbsc-button-icon > *,
- .mbsc-button-icon > * > * {
- height: 100%;
- }
-
- .mbsc-button-icon-end {
- -webkit-box-ordinal-group: 2;
- -webkit-order: 1;
- -moz-box-ordinal-group: 2;
- -ms-flex-order: 1;
- order: 1;
- }
-
- .mbsc-button-group,
- .mbsc-button-group-block,
- .mbsc-button-group-justified {
- border: 1px solid transparent;
- }
-
- .mbsc-button-block,
- .mbsc-button-group-block .mbsc-button {
- display: block;
- width: 100%;
- margin-left: 0 !important;
- margin-right: 0 !important;
- }
-
- .mbsc-button-group-justified,
- .mbsc-button-group-justified mbsc-button {
- display: -webkit-box;
- display: -webkit-flex;
- display: -moz-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-wrap: wrap;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
- }
-
- .mbsc-button-group-justified .mbsc-button,
- .mbsc-button-group-justified mbsc-button {
- -webkit-box-flex: 1;
- -webkit-flex: 1 auto;
- -moz-box-flex: 1;
- -ms-flex: 1 auto;
- flex: 1 auto;
- }
-
- .mbsc-material.mbsc-popup-body-anchored,
- .mbsc-material.mbsc-popup-body-center,
- .mbsc-material.mbsc-popup-body-round {
- border-radius: 0.25em;
- }
-
- .mbsc-material.mbsc-popup-header {
- font-size: 1.25em;
- font-weight: 500;
- padding: 0.8em 0.8em 0;
- line-height: 1.4em;
- }
-
- .mbsc-material.mbsc-popup-buttons {
- padding: 0.5em;
- }
-
- .mbsc-material.mbsc-popup-buttons.mbsc-ltr,
- .mbsc-material.mbsc-popup-buttons.mbsc-rtl {
- text-align: right;
- }
-
- .mbsc-material.mbsc-popup-button.mbsc-button-flat {
- margin-left: 0;
- margin-right: 0;
- }
-
- .mbsc-material.mbsc-popup-button.mbsc-font {
- margin-top: 0;
- margin-bottom: 0;
- font-weight: 500;
- font-size: 0.9375em;
- }
-
- .mbsc-material.mbsc-popup-round .mbsc-popup-body-bottom-full {
- border-radius: 0.25em 0.25em 0 0;
- }
-
- .mbsc-material.mbsc-popup-round .mbsc-popup-body-top-full {
- border-radius: 0 0 0.25em 0.25em;
- }
-
- .mbsc-material.mbsc-popup-body {
- background: #fff;
- box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2),
- 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
- color: #303030;
- }
-
- .mbsc-material.mbsc-popup-arrow {
- background: #fff;
- box-shadow: 0 0 1em rgba(0, 0, 0, 0.2);
- }
-
- .mbsc-material.mbsc-popup-button.mbsc-font {
- color: #1a73e8;
- }
-
- .mbsc-material-dark.mbsc-popup-body {
- background: #303030;
- box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2),
- 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
- color: #fff;
- }
-
- .mbsc-material-dark.mbsc-popup-arrow {
- background: #303030;
- box-shadow: 0 0 1em rgba(0, 0, 0, 0.2);
- }
-
- .mbsc-material-dark.mbsc-popup-button.mbsc-font {
- color: #87b0f3;
- }
-
- @-webkit-keyframes mbsc-fade-in {
- 0% {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
- }
-
- @keyframes mbsc-fade-in {
- 0% {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
- }
-
- @-webkit-keyframes mbsc-fade-out {
- 0% {
- opacity: 1;
- }
- to {
- opacity: 0;
- }
- }
-
- @keyframes mbsc-fade-out {
- 0% {
- opacity: 1;
- }
- to {
- opacity: 0;
- }
- }
-
- @-webkit-keyframes mbsc-pop-in {
- 0% {
- opacity: 0;
- -webkit-transform: scale(0.8);
- transform: scale(0.8);
- }
- to {
- opacity: 1;
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- }
-
- @keyframes mbsc-pop-in {
- 0% {
- opacity: 0;
- -webkit-transform: scale(0.8);
- transform: scale(0.8);
- }
- to {
- opacity: 1;
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- }
-
- @-webkit-keyframes mbsc-pop-out {
- 0% {
- opacity: 1;
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- to {
- opacity: 0;
- -webkit-transform: scale(0.8);
- transform: scale(0.8);
- }
- }
-
- @keyframes mbsc-pop-out {
- 0% {
- opacity: 1;
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- to {
- opacity: 0;
- -webkit-transform: scale(0.8);
- transform: scale(0.8);
- }
- }
-
- @-webkit-keyframes mbsc-slide-up-in {
- 0% {
- -webkit-transform: translateY(100%);
- transform: translateY(100%);
- }
- to {
- -webkit-transform: translateY(0);
- transform: translateY(0);
- }
- }
-
- @keyframes mbsc-slide-up-in {
- 0% {
- -webkit-transform: translateY(100%);
- transform: translateY(100%);
- }
- to {
- -webkit-transform: translateY(0);
- transform: translateY(0);
- }
- }
-
- @-webkit-keyframes mbsc-slide-up-out {
- 0% {
- -webkit-transform: translateY(0);
- transform: translateY(0);
- }
- to {
- -webkit-transform: translateY(100%);
- transform: translateY(100%);
- }
- }
-
- @keyframes mbsc-slide-up-out {
- 0% {
- -webkit-transform: translateY(0);
- transform: translateY(0);
- }
- to {
- -webkit-transform: translateY(100%);
- transform: translateY(100%);
- }
- }
-
- @-webkit-keyframes mbsc-slide-down-in {
- 0% {
- -webkit-transform: translateY(-100%);
- transform: translateY(-100%);
- }
- to {
- -webkit-transform: translateY(0);
- transform: translateY(0);
- }
- }
-
- @keyframes mbsc-slide-down-in {
- 0% {
- -webkit-transform: translateY(-100%);
- transform: translateY(-100%);
- }
- to {
- -webkit-transform: translateY(0);
- transform: translateY(0);
- }
- }
-
- @-webkit-keyframes mbsc-slide-down-out {
- 0% {
- -webkit-transform: translateY(0);
- transform: translateY(0);
- }
- to {
- -webkit-transform: translateY(-100%);
- transform: translateY(-100%);
- }
- }
-
- @keyframes mbsc-slide-down-out {
- 0% {
- -webkit-transform: translateY(0);
- transform: translateY(0);
- }
- to {
- -webkit-transform: translateY(-100%);
- transform: translateY(-100%);
- }
- }
-
- .mbsc-popup-open-ios {
- overflow: hidden;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- height: auto;
- }
-
- .mbsc-popup-ctx {
- position: relative;
- --mbsc-safe-top: 0;
- --mbsc-safe-right: 0;
- --mbsc-safe-bottom: 0;
- --mbsc-safe-left: 0;
- }
-
- .mbsc-popup-limits {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: -1;
- }
-
- .mbsc-popup-limits-anchored,
- .mbsc-popup-limits-center {
- margin: 1em;
- }
-
- .mbsc-popup-wrapper {
- z-index: 99998;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
-
- .mbsc-popup,
- .mbsc-popup-wrapper {
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
-
- .mbsc-popup-wrapper {
- position: fixed;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- pointer-events: none;
- display: -webkit-box;
- display: -webkit-flex;
- display: -moz-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -moz-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- border: 0 solid transparent;
- }
-
- .mbsc-popup-wrapper-ctx {
- position: absolute;
- right: auto;
- bottom: auto;
- width: 100%;
- height: 100%;
- overflow: hidden;
- }
-
- .mbsc-popup-wrapper-center {
- padding: 1em;
- -webkit-box-align: center;
- -webkit-align-items: center;
- -moz-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- border-width: var(--mbsc-safe-top) var(--mbsc-safe-right)
- var(--mbsc-safe-bottom) var(--mbsc-safe-left);
- }
-
- .mbsc-popup-wrapper-top {
- -webkit-box-align: start;
- -webkit-align-items: flex-start;
- -moz-box-align: start;
- -ms-flex-align: start;
- align-items: flex-start;
- border-bottom: var(--mbsc-safe-bottom) solid transparent;
- }
-
- .mbsc-popup-wrapper-bottom {
- -webkit-box-align: end;
- -webkit-align-items: flex-end;
- -moz-box-align: end;
- -ms-flex-align: end;
- align-items: flex-end;
- border-top-width: var(--mbsc-safe-top);
- }
-
- .mbsc-popup-wrapper-anchored {
- border-left-width: var(--mbsc-safe-left);
- border-bottom-width: var(--mbsc-safe-bottom);
- border-right-width: var(--mbsc-safe-right);
- border-top-width: 0;
- }
-
- .mbsc-popup-hidden {
- opacity: 0;
- }
-
- .mbsc-popup-overlay {
- position: absolute;
- z-index: 1;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- margin: -10em;
- pointer-events: auto;
- background: rgba(0, 0, 0, 0.5);
- -webkit-transform: translateZ(0);
- transform: translateZ(0);
- }
-
- .mbsc-popup-overlay-in {
- opacity: 1;
- -webkit-animation: mbsc-fade-in 0.15s cubic-bezier(0, 0, 0.2, 1);
- animation: mbsc-fade-in 0.15s cubic-bezier(0, 0, 0.2, 1);
- }
-
- .mbsc-popup-overlay-out {
- opacity: 0;
- -webkit-animation: mbsc-fade-out 75ms cubic-bezier(0.4, 0, 1, 1);
- animation: mbsc-fade-out 75ms cubic-bezier(0.4, 0, 1, 1);
- }
-
- .mbsc-popup {
- display: -webkit-box;
- display: -webkit-flex;
- display: -moz-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -webkit-flex-direction: column;
- -moz-box-orient: vertical;
- -moz-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- max-height: 100%;
- min-width: 12em;
- position: relative;
- z-index: 2;
- pointer-events: auto;
- text-shadow: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
-
- .mbsc-popup-center {
- min-width: 16em;
- }
-
- .mbsc-popup-bottom {
- width: 100%;
- bottom: 0;
- }
-
- .mbsc-popup-top {
- width: 100%;
- top: 0;
- }
-
- .mbsc-popup-anchored {
- position: absolute;
- }
-
- .mbsc-popup-anchored-left {
- margin-left: -1em;
- }
-
- .mbsc-popup-anchored-right {
- margin-left: 1em;
- }
-
- .mbsc-popup-arrow-wrapper {
- position: absolute;
- z-index: 1;
- overflow: hidden;
- pointer-events: none;
- }
-
- .mbsc-popup-arrow-wrapper-bottom,
- .mbsc-popup-arrow-wrapper-top {
- left: 0;
- right: 0;
- height: 2em;
- }
-
- .mbsc-popup-arrow-wrapper-left,
- .mbsc-popup-arrow-wrapper-right {
- top: 0;
- bottom: 0;
- width: 2em;
- }
-
- .mbsc-popup-arrow-wrapper-top {
- top: 100%;
- }
-
- .mbsc-popup-arrow-wrapper-bottom {
- bottom: 100%;
- }
-
- .mbsc-popup-arrow-wrapper-left {
- left: 100%;
- }
-
- .mbsc-popup-arrow-wrapper-right {
- right: 100%;
- }
-
- .mbsc-popup-arrow {
- position: absolute;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- width: 1.5em;
- height: 1.5em;
- pointer-events: auto;
- }
-
- .mbsc-popup-arrow-top {
- bottom: 1.25em;
- }
-
- .mbsc-popup-arrow-bottom {
- top: 1.25em;
- }
-
- .mbsc-popup-arrow-bottom,
- .mbsc-popup-arrow-top {
- left: 50%;
- margin-left: -0.75em;
- -webkit-transform: rotate(-45deg);
- transform: rotate(-45deg);
- }
-
- .mbsc-popup-arrow-left {
- right: 1.25em;
- }
-
- .mbsc-popup-arrow-right {
- left: 1.25em;
- }
-
- .mbsc-popup-arrow-left,
- .mbsc-popup-arrow-right {
- top: 50%;
- margin-top: -0.75em;
- -webkit-transform: rotate(45deg);
- transform: rotate(45deg);
- }
-
- .mbsc-popup-focus {
- outline: 0;
- }
-
- .mbsc-popup-body {
- display: -webkit-box;
- display: -webkit-flex;
- display: -moz-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -webkit-flex-direction: column;
- -moz-box-orient: vertical;
- -moz-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- overflow: hidden;
- -webkit-transform: translateZ(0);
- transform: translateZ(0);
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 auto;
- -moz-box-flex: 1;
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
- }
-
- .mbsc-popup-body-top {
- padding-top: var(--mbsc-safe-top);
- }
-
- .mbsc-popup-body-bottom {
- padding-bottom: var(--mbsc-safe-bottom);
- }
-
- .mbsc-popup-body-bottom,
- .mbsc-popup-body-top {
- padding-left: var(--mbsc-safe-left);
- padding-right: var(--mbsc-safe-right);
- }
-
- .mbsc-popup-body-round {
- padding: 0;
- }
-
- .mbsc-popup-header {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
-
- .mbsc-popup-content {
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 auto;
- -moz-box-flex: 1;
- -ms-flex: 1 1 auto;
- overflow: auto;
- -webkit-overflow-scrolling: touch;
- flex: 1 1 auto;
- }
-
- .mbsc-popup-padding {
- padding: 1em;
- }
-
- .mbsc-popup-buttons {
- -webkit-box-flex: 0;
- -webkit-flex: none;
- -moz-box-flex: 0;
- -ms-flex: none;
- flex: none;
- }
-
- .mbsc-popup-pop-in {
- opacity: 1;
- -webkit-animation: mbsc-pop-in 0.15s cubic-bezier(0, 0, 0.2, 1);
- animation: mbsc-pop-in 0.15s cubic-bezier(0, 0, 0.2, 1);
- }
-
- .mbsc-popup-pop-out {
- opacity: 0;
- -webkit-animation: mbsc-pop-out 75ms cubic-bezier(0.4, 0, 1, 1);
- animation: mbsc-pop-out 75ms cubic-bezier(0.4, 0, 1, 1);
- }
-
- .mbsc-popup-slide-up-in {
- -webkit-animation: mbsc-slide-up-in 0.25s cubic-bezier(0, 0, 0.2, 1);
- animation: mbsc-slide-up-in 0.25s cubic-bezier(0, 0, 0.2, 1);
- }
-
- .mbsc-popup-slide-up-out {
- -webkit-animation: mbsc-slide-up-out 0.2s cubic-bezier(0.4, 0, 1, 1);
- animation: mbsc-slide-up-out 0.2s cubic-bezier(0.4, 0, 1, 1);
- }
-
- .mbsc-popup-slide-down-in {
- -webkit-animation: mbsc-slide-down-in 0.25s cubic-bezier(0, 0, 0.2, 1);
- animation: mbsc-slide-down-in 0.25s cubic-bezier(0, 0, 0.2, 1);
- }
-
- .mbsc-popup-slide-down-out {
- -webkit-animation: mbsc-slide-down-out 0.2s cubic-bezier(0.4, 0, 1, 1);
- animation: mbsc-slide-down-out 0.2s cubic-bezier(0.4, 0, 1, 1);
- }
-
- .mbsc-popup-pointer.mbsc-picker .mbsc-popup-overlay,
- .mbsc-popup-pointer .mbsc-popup-overlay-anchored {
- background: none;
- }
-
- .mbsc-popup-round .mbsc-popup-slide-up-in {
- -webkit-animation-name: mbsc-slide-up-in, mbsc-fade-in;
- animation-name: mbsc-slide-up-in, mbsc-fade-in;
- }
-
- .mbsc-popup-round .mbsc-popup-slide-up-out {
- -webkit-animation-name: mbsc-slide-up-out, mbsc-fade-out;
- animation-name: mbsc-slide-up-out, mbsc-fade-out;
- }
-
- .mbsc-popup-round .mbsc-popup-slide-down-in {
- -webkit-animation-name: mbsc-slide-down-in, mbsc-fade-in;
- animation-name: mbsc-slide-down-in, mbsc-fade-in;
- }
-
- .mbsc-popup-round .mbsc-popup-slide-down-out {
- -webkit-animation-name: mbsc-slide-down-out, mbsc-fade-out;
- animation-name: mbsc-slide-down-out, mbsc-fade-out;
- }
-
- .mbsc-popup-round .mbsc-popup-bottom,
- .mbsc-popup-round .mbsc-popup-top {
- width: auto;
- margin-top: 3em;
- margin-bottom: 3em;
- }
-
- .mbsc-material.mbsc-calendar-wrapper-fixed:after {
- content: "";
- position: absolute;
- z-index: 4;
- bottom: -0.5em;
- left: 0;
- right: 0;
- height: 0.5em;
- pointer-events: none;
- }
-
- .mbsc-material.mbsc-calendar-controls {
- padding: 0.5em;
- }
-
- .mbsc-material.mbsc-calendar-header .mbsc-calendar-week-days {
- padding: 0 0.5em;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
-
- .mbsc-material.mbsc-calendar-week-day {
- height: 2.5em;
- line-height: 2.5em;
- font-size: 0.75em;
- font-weight: 700;
- }
-
- .mbsc-material.mbsc-calendar-week-nr {
- width: 2.363637em;
- font-size: 0.6875em;
- line-height: 3em;
- font-weight: 700;
- }
-
- .mbsc-material.mbsc-calendar-button.mbsc-button {
- padding: 0.428572em;
- }
-
- .mbsc-material.mbsc-calendar-title {
- font-size: ${props.theme.typography.fontSize.base};
- font-weight: ${props.theme.typography.fontWeight.light};
- text-transform: none;
- line-height: 1.4em;
- }
-
- .mbsc-material.mbsc-calendar-cell-text {
- height: 2em;
- padding: 0 0.5em;
- line-height: 2em;
- border-radius: 2em;
- }
-
- .mbsc-material.mbsc-calendar-day-text {
- height: 1.846154em;
- width: 1.846154em;
- line-height: 1.846154em;
- margin: 0.230769em auto;
- padding: 0;
- font-size: 0.8125em;
- border: 2px solid transparent;
- }
-
- .mbsc-material.mbsc-range-day:after,
- .mbsc-material.mbsc-range-hover:before {
- content: "";
- height: 1.75em;
- position: absolute;
- left: 0;
- right: 0;
- top: 0.25em;
- z-index: -1;
- }
-
- .mbsc-material.mbsc-range-hover:before {
- -moz-box-sizing: content-box;
- box-sizing: content-box;
- height: 1.5em;
- border-top: 2px dashed;
- border-bottom: 2px dashed;
- }
-
- .mbsc-material.mbsc-range-day-end.mbsc-rtl:after,
- .mbsc-material.mbsc-range-day-start.mbsc-ltr:after {
- margin-left: -0.875em;
- border-radius: 2em 0 0 2em;
- left: 50%;
- right: 0;
- }
-
- .mbsc-material.mbsc-range-day-end.mbsc-ltr:after,
- .mbsc-material.mbsc-range-day-start.mbsc-rtl:after {
- margin-right: -0.875em;
- border-radius: 0 2em 2em 0;
- right: 50%;
- left: 0;
- }
-
- .mbsc-material.mbsc-range-hover-end.mbsc-rtl:before,
- .mbsc-material.mbsc-range-hover-start.mbsc-ltr:before {
- left: 50%;
- right: 0;
- }
-
- .mbsc-material.mbsc-range-hover-end.mbsc-ltr:before,
- .mbsc-material.mbsc-range-hover-start.mbsc-rtl:before {
- right: 50%;
- left: 0;
- }
-
- .mbsc-material.mbsc-range-day-start.mbsc-range-day-end:after,
- .mbsc-material.mbsc-range-hover-start.mbsc-range-hover-end:before {
- display: none;
- }
-
- .mbsc-material.mbsc-calendar-marks {
- margin-top: -0.375em;
- -webkit-transition: -webkit-transform 0.1s ease-out;
- transition: -webkit-transform 0.1s ease-out;
- transition: transform 0.1s ease-out;
- transition: transform 0.1s ease-out, -webkit-transform 0.1s ease-out;
- }
-
- .mbsc-material.mbsc-calendar-day-colors .mbsc-calendar-marks,
- .mbsc-material.mbsc-focus .mbsc-calendar-marks,
- .mbsc-material.mbsc-highlighted .mbsc-calendar-marks,
- .mbsc-material.mbsc-hover-highlighted .mbsc-calendar-marks,
- .mbsc-material.mbsc-hover .mbsc-calendar-marks,
- .mbsc-material.mbsc-selected .mbsc-calendar-marks {
- -webkit-transform: translate3d(0, 0.25em, 0);
- transform: translate3d(0, 0.25em, 0);
- }
-
- .mbsc-material.mbsc-calendar-label {
- font-weight: 600;
- border-radius: 0.2em;
- }
-
- .mbsc-material.mbsc-calendar-label-background {
- background: currentColor;
- border-radius: 0.2em;
- }
-
- .mbsc-material.mbsc-calendar-text:before {
- border-radius: 0.2em;
- }
-
- .mbsc-material.mbsc-calendar-height-md .mbsc-calendar-slide {
- padding: 0;
- }
-
- .mbsc-material.mbsc-calendar-height-md .mbsc-calendar-day {
- border-left: 1px solid;
- border-bottom: 1px solid;
- }
-
- .mbsc-material.mbsc-calendar-height-md .mbsc-calendar-week-nr {
- padding: 0;
- font-size: 0.6875em;
- line-height: 3.636363em;
- }
-
- .mbsc-material.mbsc-calendar-width-md .mbsc-calendar-week-days {
- padding: 0;
- }
-
- .mbsc-material.mbsc-calendar-width-md .mbsc-calendar-week-day {
- padding: 0 1em;
- }
-
- .mbsc-material.mbsc-calendar-width-md .mbsc-calendar-day-inner {
- min-height: 4em;
- }
-
- .mbsc-material.mbsc-calendar-width-md
- .mbsc-calendar-day-labels
- .mbsc-calendar-day-inner {
- min-height: 5.5em;
- }
-
- .mbsc-material.mbsc-calendar-width-md .mbsc-calendar-day-text {
- margin: 0.461539em;
- }
-
- .mbsc-material.mbsc-calendar-width-md .mbsc-calendar-marks {
- padding: 0 1.125em;
- margin-left: -1px;
- margin-right: -1px;
- }
-
- .mbsc-material.mbsc-calendar-width-md .mbsc-calendar-text {
- height: 1.8em;
- line-height: 1.8em;
- margin: 0 0.4em 0.2em;
- }
-
- .mbsc-material.mbsc-calendar-width-md .mbsc-calendar-text:before {
- border-radius: 0.4em;
- }
-
- .mbsc-material.mbsc-calendar-width-md .mbsc-calendar-label {
- padding: 0 0.4em;
- border-radius: 0.4em;
- }
-
- .mbsc-material.mbsc-calendar-width-md .mbsc-calendar-label-background {
- border-radius: 0.4em;
- }
-
- .mbsc-material.mbsc-calendar-width-md .mbsc-calendar-label-text {
- font-size: 1.2em;
- }
-
- .mbsc-material.mbsc-calendar-height-md.mbsc-calendar-width-md
- .mbsc-calendar-day.mbsc-ltr,
- .mbsc-material.mbsc-calendar-height-md.mbsc-calendar-width-md
- .mbsc-calendar-marks.mbsc-ltr,
- .mbsc-material.mbsc-calendar-height-md.mbsc-calendar-width-md
- .mbsc-calendar-week-day.mbsc-ltr {
- text-align: left;
- }
-
- .mbsc-material.mbsc-calendar-height-md.mbsc-calendar-width-md
- .mbsc-calendar-day.mbsc-rtl,
- .mbsc-material.mbsc-calendar-height-md.mbsc-calendar-width-md
- .mbsc-calendar-marks.mbsc-rtl,
- .mbsc-material.mbsc-calendar-height-md.mbsc-calendar-width-md
- .mbsc-calendar-week-day.mbsc-rtl {
- text-align: right;
- }
-
- .mbsc-material.mbsc-calendar-wrapper:after {
- box-shadow: inset 0 0.5em 0.25em -0.5em rgba(48, 48, 48, 0.5);
- }
-
- .mbsc-material.mbsc-calendar-button.mbsc-button {
- color: #303030;
- }
-
- .mbsc-material.mbsc-calendar-picker-slide,
- .mbsc-material.mbsc-calendar-slide {
- background: #fff;
- }
-
- .mbsc-material.mbsc-calendar-week-day {
- color: rgba(48, 48, 48, 0.7);
- }
-
- .mbsc-material.mbsc-calendar-cell-text {
- color: #303030;
- }
-
- .mbsc-material.mbsc-calendar-today {
- color: #1a73e8;
- }
-
- .mbsc-material.mbsc-focus .mbsc-calendar-cell-text {
- box-shadow: 0 0 0 2px rgba(48, 48, 48, 0.7);
- }
-
- .mbsc-material.mbsc-hover .mbsc-calendar-cell-text {
- background: rgba(0, 0, 0, 0.1);
- }
-
- .mbsc-material.mbsc-range-hover:before {
- border-color: #e6e6e6;
- }
-
- .mbsc-material.mbsc-range-day:after {
- background-color: rgba(26, 115, 232, 0.25);
- }
-
- .mbsc-material.mbsc-selected .mbsc-calendar-cell-text {
- background: #1a73e8;
- border-color: #1a73e8;
- color: #fff;
- }
-
- .mbsc-material.mbsc-calendar-mark {
- background: #1a73e8;
- }
-
- .mbsc-material.mbsc-calendar-label {
- color: #1a73e8;
- }
-
- .mbsc-material.mbsc-calendar-label-inner {
- color: #fff;
- }
-
- .mbsc-material.mbsc-calendar-label.mbsc-calendar-label-active,
- .mbsc-material.mbsc-calendar-label.mbsc-calendar-label-dragging {
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12),
- 0 1px 3px -1px rgba(0, 0, 0, 0.2);
- }
-
- .mbsc-material.mbsc-calendar-text-more {
- box-shadow: none;
- }
-
- .mbsc-material.mbsc-calendar-text-more .mbsc-calendar-label-text {
- color: #303030;
- }
-
- .mbsc-material.mbsc-calendar-popup .mbsc-popup-arrow,
- .mbsc-material.mbsc-calendar-popup .mbsc-popup-body {
- background: #fff;
- }
-
- .mbsc-material.mbsc-calendar-height-md .mbsc-calendar-day,
- .mbsc-material.mbsc-calendar-height-md .mbsc-calendar-week-day {
- border-color: #cfcfcf;
- }
-
- .mbsc-material-dark.mbsc-calendar-wrapper:after {
- box-shadow: inset 0 0.5em 0.25em -0.5em hsla(0, 0%, 100%, 0.5);
- }
-
- .mbsc-material-dark.mbsc-calendar-button.mbsc-button {
- color: #fff;
- }
-
- .mbsc-material-dark.mbsc-calendar-slide {
- background: #000;
- }
-
- .mbsc-material-dark.mbsc-calendar-picker-slide {
- background: #303030;
- }
-
- .mbsc-material-dark.mbsc-calendar-week-day {
- color: hsla(0, 0%, 100%, 0.7);
- }
-
- .mbsc-material-dark.mbsc-calendar-cell-text {
- color: #fff;
- }
-
- .mbsc-material-dark.mbsc-calendar-today {
- color: #87b0f3;
- }
-
- .mbsc-material-dark.mbsc-focus .mbsc-calendar-cell-text {
- box-shadow: 0 0 0 2px hsla(0, 0%, 100%, 0.7);
- }
-
- .mbsc-material-dark.mbsc-hover .mbsc-calendar-cell-text {
- background: hsla(0, 0%, 100%, 0.1);
- }
-
- .mbsc-material-dark.mbsc-range-hover:before {
- border-color: #1a1a1a;
- }
-
- .mbsc-material-dark.mbsc-range-day:after {
- background-color: rgba(135, 176, 243, 0.25);
- }
-
- .mbsc-material-dark.mbsc-selected .mbsc-calendar-cell-text {
- background: #87b0f3;
- border-color: #87b0f3;
- color: #000;
- }
-
- .mbsc-material-dark.mbsc-calendar-mark {
- background: #87b0f3;
- }
-
- .mbsc-material-dark.mbsc-calendar-label {
- color: #87b0f3;
- }
-
- .mbsc-material-dark.mbsc-calendar-label-inner {
- color: #000;
- }
-
- .mbsc-material-dark.mbsc-calendar-label.mbsc-calendar-label-active,
- .mbsc-material-dark.mbsc-calendar-label.mbsc-calendar-label-dragging {
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12),
- 0 1px 3px -1px rgba(0, 0, 0, 0.2);
- }
-
- .mbsc-material-dark.mbsc-calendar-text-more {
- box-shadow: none;
- }
-
- .mbsc-material-dark.mbsc-calendar-text-more .mbsc-calendar-label-text {
- color: #fff;
- }
-
- .mbsc-material-dark.mbsc-calendar-popup .mbsc-popup-arrow,
- .mbsc-material-dark.mbsc-calendar-popup .mbsc-popup-body {
- background: #303030;
- }
-
- .mbsc-material-dark.mbsc-calendar-height-md .mbsc-calendar-day,
- .mbsc-material-dark.mbsc-calendar-height-md .mbsc-calendar-week-day {
- border-color: #2b2b2b;
- }
-
- @-webkit-keyframes mbsc-zoom-in-up {
- 0% {
- opacity: 0;
- -webkit-transform: scale(2);
- transform: scale(2);
- }
- to {
- opacity: 1;
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- }
-
- @keyframes mbsc-zoom-in-up {
- 0% {
- opacity: 0;
- -webkit-transform: scale(2);
- transform: scale(2);
- }
- to {
- opacity: 1;
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- }
-
- @-webkit-keyframes mbsc-zoom-in-down {
- 0% {
- opacity: 0;
- -webkit-transform: scale(0.5);
- transform: scale(0.5);
- }
- to {
- opacity: 1;
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- }
-
- @keyframes mbsc-zoom-in-down {
- 0% {
- opacity: 0;
- -webkit-transform: scale(0.5);
- transform: scale(0.5);
- }
- to {
- opacity: 1;
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- }
-
- @-webkit-keyframes mbsc-zoom-out-up {
- 0% {
- opacity: 1;
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- to {
- opacity: 0;
- -webkit-transform: scale(2);
- transform: scale(2);
- }
- }
-
- @keyframes mbsc-zoom-out-up {
- 0% {
- opacity: 1;
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- to {
- opacity: 0;
- -webkit-transform: scale(2);
- transform: scale(2);
- }
- }
-
- @-webkit-keyframes mbsc-zoom-out-down {
- 0% {
- opacity: 1;
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- to {
- opacity: 0;
- -webkit-transform: scale(0.5);
- transform: scale(0.5);
- }
- }
-
- @keyframes mbsc-zoom-out-down {
- 0% {
- opacity: 1;
- -webkit-transform: scale(1);
- transform: scale(1);
- }
- to {
- opacity: 0;
- -webkit-transform: scale(0.5);
- transform: scale(0.5);
- }
- }
-
- .mbsc-calendar {
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -webkit-flex-direction: column;
- -moz-box-orient: vertical;
- -moz-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -ms-touch-action: manipulation;
- touch-action: manipulation;
- position: relative;
- }
-
- .mbsc-calendar-wrapper {
- position: relative;
- display: table;
- table-layout: fixed;
- width: 100%;
- height: 100%;
- }
-
- .mbsc-calendar-header {
- position: relative;
- z-index: 1;
- will-change: opacity;
- }
-
- .mbsc-calendar,
- .mbsc-calendar-controls,
- .mbsc-calendar-title-wrapper {
- display: -webkit-box;
- display: -webkit-flex;
- display: -moz-box;
- display: -ms-flexbox;
- display: flex;
- }
-
- .mbsc-calendar-controls {
- -webkit-box-align: center;
- -webkit-align-items: center;
- -moz-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -moz-box-sizing: content-box;
- box-sizing: content-box;
- min-height: 2.5em;
- }
-
- .mbsc-calendar-button.mbsc-button.mbsc-reset {
- margin: 0;
- }
-
- .mbsc-calendar-button-prev-multi {
- -webkit-box-ordinal-group: 0;
- -webkit-order: -1;
- -moz-box-ordinal-group: 0;
- -ms-flex-order: -1;
- order: -1;
- }
-
- .mbsc-calendar-button-next-multi {
- -webkit-box-ordinal-group: 2;
- -webkit-order: 1;
- -moz-box-ordinal-group: 2;
- -ms-flex-order: 1;
- order: 1;
- }
-
- .mbsc-calendar-body {
- height: 100%;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- display: table-row;
- }
-
- .mbsc-calendar-body-inner {
- height: 100%;
- position: relative;
- overflow: hidden;
- margin-left: -1px;
- }
-
- .mbsc-calendar-wrapper-fixed {
- display: block;
- height: auto;
- -webkit-box-flex: 0;
- -webkit-flex: 0 0 auto;
- -moz-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- }
-
- .mbsc-calendar-wrapper-fixed .mbsc-calendar-header {
- display: block;
- }
-
- .mbsc-calendar-wrapper-fixed .mbsc-calendar-body {
- display: block;
- height: auto;
- }
-
- .mbsc-calendar-hidden {
- visibility: hidden;
- }
-
- .mbsc-calendar-title-wrapper {
- -webkit-box-flex: 1;
- -webkit-flex: 1;
- -moz-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- -webkit-box-align: center;
- -webkit-align-items: center;
- -moz-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- overflow: hidden;
- }
-
- .mbsc-calendar-title-wrapper-multi .mbsc-calendar-button {
- -webkit-box-flex: 1;
- -webkit-flex: 1;
- -moz-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- }
-
- .mbsc-calendar-title {
- overflow: hidden;
- text-overflow: ellipsis;
- font-size: 1.125em;
- padding: 0 0.25em;
- display: inline-block;
- vertical-align: middle;
- }
-
- .mbsc-calendar-scroll-wrapper {
- display: block;
- overflow: hidden;
- position: relative;
- height: 100%;
- }
-
- .mbsc-calendar-picker-wrapper {
- position: relative;
- width: 15em;
- height: 15em;
- overflow: hidden;
- }
-
- .mbsc-calendar-picker {
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0;
- left: 0;
- }
-
- .mbsc-calendar-picker-main {
- position: relative;
- }
-
- .mbsc-calendar-picker-in-up {
- opacity: 0;
- -webkit-animation: mbsc-zoom-in-up 0.2s cubic-bezier(0, 0, 0.2, 1);
- animation: mbsc-zoom-in-up 0.2s cubic-bezier(0, 0, 0.2, 1);
- }
-
- .mbsc-calendar-picker-in-down {
- opacity: 0;
- -webkit-animation: mbsc-zoom-in-down 0.2s cubic-bezier(0, 0, 0.2, 1);
- animation: mbsc-zoom-in-down 0.2s cubic-bezier(0, 0, 0.2, 1);
- }
-
- .mbsc-calendar-picker-out-up {
- opacity: 0;
- -webkit-animation: mbsc-zoom-out-up 0.2s cubic-bezier(0.4, 0, 1, 1);
- animation: mbsc-zoom-out-up 0.2s cubic-bezier(0.4, 0, 1, 1);
- }
-
- .mbsc-calendar-picker-out-down {
- opacity: 0;
- -webkit-animation: mbsc-zoom-out-down 0.2s cubic-bezier(0, 0, 0.2, 1);
- animation: mbsc-zoom-out-down 0.2s cubic-bezier(0, 0, 0.2, 1);
- }
-
- .mbsc-calendar-scroll-wrapper > div {
- height: 100%;
- }
-
- .mbsc-calendar-scroll-wrapper > div > div {
- height: 100%;
- -webkit-transform: translateZ(0);
- transform: translateZ(0);
- }
-
- .mbsc-calendar-slide {
- position: absolute;
- z-index: 0;
- top: 0;
- width: 100%;
- height: 100%;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
-
- .mbsc-calendar-slide.mbsc-ltr {
- left: 0;
- }
-
- .mbsc-calendar-slide.mbsc-rtl {
- right: 0;
- }
-
- .mbsc-calendar-slide:first-child {
- position: relative;
- }
-
- .mbsc-calendar-table {
- height: 100%;
- -webkit-transform: translateZ(0);
- transform: translateZ(0);
- }
-
- .mbsc-calendar-table,
- .mbsc-calendar-week-days {
- display: table;
- table-layout: fixed;
- width: 100%;
- }
-
- .mbsc-calendar-row,
- .mbsc-calendar-table .mbsc-calendar-week-days {
- display: table-row;
- }
-
- .mbsc-calendar-cell,
- .mbsc-calendar-week-day {
- display: table-cell;
- }
-
- .mbsc-calendar-cell {
- position: relative;
- text-align: center;
- white-space: nowrap;
- cursor: pointer;
- }
-
- .mbsc-calendar-cell:focus {
- outline: 0;
- }
-
- .mbsc-calendar-cell-inner {
- display: inline-block;
- padding: 0 0.25em;
- vertical-align: middle;
- }
-
- .mbsc-calendar-cell.mbsc-disabled {
- cursor: not-allowed;
- }
-
- .mbsc-calendar-week-day {
- height: 2em;
- font-size: 0.6875em;
- line-height: 2em;
- text-align: center;
- border-bottom: 1px solid transparent;
- }
-
- .mbsc-calendar-month,
- .mbsc-calendar-year {
- vertical-align: middle;
- }
-
- .mbsc-calendar-month-text,
- .mbsc-calendar-year-text {
- overflow: hidden;
- text-overflow: ellipsis;
- min-width: 4.5em;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
-
- .mbsc-calendar-day {
- max-width: 14.285715%;
- text-align: center;
- vertical-align: top;
- }
-
- .mbsc-calendar-day-text {
- display: inline-block;
- text-align: center;
- -moz-box-sizing: content-box;
- box-sizing: content-box;
- }
-
- .mbsc-calendar-day-inner {
- display: table;
- position: relative;
- width: 100%;
- height: 100%;
- padding: 0;
- border: 1px solid transparent;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
-
- .mbsc-calendar-day-hidden {
- visibility: hidden;
- }
-
- .mbsc-calendar-day-outer .mbsc-appquality.mbsc-calendar-day-text {
- color: ${props.theme.colors.disabled};
- }
-
- .mbsc-calendar-day-outer.mbsc-selected .mbsc-calendar-day-text {
- opacity: 1;
- }
-
- .mbsc-disabled .mbsc-calendar-cell-text {
- opacity: 0.2;
- }
-
- .mbsc-calendar-day-highlight:before {
- content: " ";
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: rgba(0, 0, 0, 0.1);
- }
-
- .mbsc-calendar-day-marked {
- padding-bottom: 0.25em;
- }
-
- .mbsc-calendar-marks {
- position: absolute;
- left: 0;
- right: 0;
- height: 0.375em;
- margin-top: -0.125em;
- overflow: hidden;
- white-space: nowrap;
- text-align: center;
- }
-
- .mbsc-calendar-mark {
- display: inline-block;
- vertical-align: top;
- width: 0.25em;
- height: 0.25em;
- margin: 0.0625em;
- border-radius: 0.25em;
- }
-
- .mbsc-calendar-labels {
- position: absolute;
- left: 0;
- right: 0;
- }
-
- .mbsc-calendar-label-wrapper {
- position: absolute;
- z-index: 2;
- pointer-events: none;
- }
-
- .mbsc-calendar-label {
- padding: 0 0.3em;
- }
-
- .mbsc-calendar-text:focus {
- outline: 0;
- }
-
- .mbsc-calendar-label-text {
- overflow: hidden;
- text-overflow: ellipsis;
- position: relative;
- z-index: 2;
- }
-
- .mbsc-calendar-label-background,
- .mbsc-calendar-text:before {
- content: "";
- position: absolute;
- z-index: 0;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- -webkit-transition: background-color 0.2s;
- transition: background-color 0.2s;
- }
-
- .mbsc-calendar-label.mbsc-calendar-label-hover:before {
- background-color: rgba(0, 0, 0, 0.2);
- z-index: 1;
- }
-
- .mbsc-calendar-text-more {
- padding: 0 0.3em;
- }
-
- .mbsc-calendar-text-more.mbsc-calendar-label-active:before,
- .mbsc-calendar-text-more.mbsc-calendar-label-hover:before {
- background-color: rgba(0, 0, 0, 0.1);
- }
-
- .mbsc-calendar-text {
- display: block;
- position: relative;
- height: 1.6em;
- line-height: 1.6em;
- font-size: 0.625em;
- white-space: nowrap;
- margin: 0 0.1em 0.2em;
- }
-
- .mbsc-calendar-text-placeholder {
- z-index: -1;
- }
-
- .mbsc-calendar-text.mbsc-ltr {
- text-align: left;
- }
-
- .mbsc-calendar-text.mbsc-rtl {
- text-align: right;
- }
-
- .mbsc-calendar-label-resize {
- position: absolute;
- top: 0;
- height: 100%;
- width: 0.5em;
- z-index: 2;
- cursor: ew-resize;
- }
-
- .mbsc-calendar-label-resize:after {
- content: "";
- display: none;
- position: absolute;
- top: 50%;
- width: 0.8em;
- height: 0.8em;
- margin-top: -0.4em;
- background: #fff;
- border-radius: 0.8em;
- border: 1px solid;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
-
- .mbsc-calendar-label-resize-end.mbsc-rtl,
- .mbsc-calendar-label-resize-start.mbsc-ltr {
- left: 0;
- }
-
- .mbsc-calendar-label-resize-end.mbsc-ltr,
- .mbsc-calendar-label-resize-start.mbsc-rtl {
- right: 0;
- }
-
- .mbsc-calendar-label-resize-end.mbsc-rtl:after,
- .mbsc-calendar-label-resize-start.mbsc-ltr:after {
- left: -0.4em;
- }
-
- .mbsc-calendar-label-resize-end.mbsc-ltr:after,
- .mbsc-calendar-label-resize-start.mbsc-rtl:after {
- right: -0.4em;
- }
-
- .mbsc-calendar-label-resize-end-touch:before,
- .mbsc-calendar-label-resize-start-touch:before {
- content: "";
- position: absolute;
- top: 50%;
- margin-top: -1em;
- width: 2em;
- height: 2em;
- }
-
- .mbsc-calendar-label-resize-start-touch:before {
- left: -1em;
- }
-
- .mbsc-calendar-label-resize-end-touch:before {
- right: -1em;
- }
-
- .mbsc-calendar-label-dragging .mbsc-calendar-label-resize:after,
- .mbsc-calendar-label-hover .mbsc-calendar-label-resize:after {
- display: block;
- }
-
- .mbsc-calendar-label-inactive {
- opacity: 0.4;
- }
-
- .mbsc-calendar-label-hidden {
- visibility: hidden;
- }
-
- .mbsc-calendar-labels-dragging {
- z-index: 3;
- }
-
- .mbsc-material.mbsc-scroller-wheel-wrapper {
- margin: 0 0.25em;
- padding: 0.5em 0;
- }
-
- .mbsc-material.mbsc-scroller-wheel-cont {
- border-width: 2px;
- }
-
- .mbsc-material.mbsc-scroller-wheel-group {
- padding: 2em 0.25em;
- }
-
- .mbsc-material.mbsc-scroller-wheel-item {
- padding: 0 0.272727em;
- font-size: ${props.theme.typography.fontSize.base};
- text-align: center;
- }
-
- .mbsc-material.mbsc-wheel-item-multi {
- padding: 0 2em;
- }
-
- .mbsc-material.mbsc-wheel-checkmark {
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- position: absolute;
- top: 50%;
- display: none;
- border-radius: 0.1875em;
- width: 1.3em;
- height: 1.3em;
- margin-top: -0.55em;
- }
-
- .mbsc-material.mbsc-wheel-checkmark:after {
- content: "";
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- position: absolute;
- display: block;
- top: 0.27273em;
- left: 0.27273em;
- width: 0.8125em;
- height: 0.4375em;
- opacity: 0;
- border: 0.125em solid;
- border-top: 0;
- border-right: 0;
- -webkit-transform: scale(0) rotate(-45deg);
- transform: scale(0) rotate(-45deg);
- -webkit-transition: -webkit-transform 0.1s ease-out;
- transition: -webkit-transform 0.1s ease-out;
- transition: transform 0.1s ease-out;
- transition: transform 0.1s ease-out, -webkit-transform 0.1s ease-out;
- }
-
- .mbsc-material.mbsc-wheel-checkmark.mbsc-selected:after {
- opacity: 1;
- -webkit-transform: scale(1) rotate(-45deg);
- transform: scale(1) rotate(-45deg);
- }
-
- .mbsc-material.mbsc-wheel-checkmark.mbsc-ltr {
- left: 0.25em;
- }
-
- .mbsc-material.mbsc-wheel-checkmark.mbsc-rtl {
- right: 0.25em;
- }
-
- .mbsc-material.mbsc-wheel-item-multi .mbsc-material.mbsc-wheel-checkmark {
- display: block;
- }
-
- .mbsc-material.mbsc-scroller-pointer .mbsc-scroller-wheel-group {
- padding: 0 0.5em;
- }
-
- .mbsc-material.mbsc-scroller-pointer .mbsc-scroller-wheel-wrapper {
- margin: 0;
- padding: 0;
- }
-
- .mbsc-material.mbsc-scroller-pointer .mbsc-scroller-wheel-item {
- font-size: 1em;
- padding: 0 1.25em;
- }
-
- .mbsc-material.mbsc-scroller-pointer .mbsc-wheel-item-multi {
- padding: 0 2em;
- }
-
- .mbsc-material.mbsc-scroller-pointer
- .mbsc-wheel-group-cont-single
- .mbsc-scroller-wheel-item.mbsc-ltr,
- .mbsc-material.mbsc-scroller-pointer .mbsc-wheel-item-multi.mbsc-ltr {
- text-align: left;
- }
-
- .mbsc-material.mbsc-scroller-pointer
- .mbsc-wheel-group-cont-single
- .mbsc-scroller-wheel-item.mbsc-rtl,
- .mbsc-material.mbsc-scroller-pointer .mbsc-wheel-item-multi.mbsc-rtl {
- text-align: right;
- }
-
- .mbsc-material.mbsc-scroller-wheel-cont {
- border-color: #1a73e8;
- }
-
- .mbsc-material.mbsc-scroller-pointer
- .mbsc-wheel-group-cont-single
- .mbsc-scroller-wheel-single,
- .mbsc-material.mbsc-scroller-wheel-multi {
- border-color: transparent;
- }
-
- .mbsc-material.mbsc-scroller-wheel-item.mbsc-active,
- .mbsc-material.mbsc-scroller-wheel-item.mbsc-focus,
- .mbsc-material.mbsc-scroller-wheel-item.mbsc-hover {
- background: rgba(0, 0, 0, 0.05);
- }
-
- .mbsc-material.mbsc-wheel-checkmark:after {
- border-color: #1a73e8;
- }
-
- .mbsc-material.mbsc-scroller-pointer
- .mbsc-wheel-group-cont-single
- .mbsc-scroller-wheel-item.mbsc-selected {
- color: #1a73e8;
- background: rgba(0, 0, 0, 0.15);
- }
-
- .mbsc-material-dark.mbsc-scroller-wheel-cont {
- border-color: #87b0f3;
- }
-
- .mbsc-material-dark.mbsc-scroller-pointer
- .mbsc-wheel-group-cont-single
- .mbsc-scroller-wheel-single,
- .mbsc-material-dark.mbsc-scroller-wheel-multi {
- border-color: transparent;
- }
-
- .mbsc-material-dark.mbsc-scroller-wheel-item.mbsc-active,
- .mbsc-material-dark.mbsc-scroller-wheel-item.mbsc-focus,
- .mbsc-material-dark.mbsc-scroller-wheel-item.mbsc-hover {
- background: rgba(0, 0, 0, 0.05);
- }
-
- .mbsc-material-dark.mbsc-wheel-checkmark:after {
- border-color: #87b0f3;
- }
-
- .mbsc-material-dark.mbsc-scroller-pointer
- .mbsc-wheel-group-cont-single
- .mbsc-scroller-wheel-item.mbsc-selected {
- color: #87b0f3;
- background: rgba(0, 0, 0, 0.15);
- }
-
- .mbsc-scroller {
- width: 100%;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- position: relative;
- text-align: center;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
-
- .mbsc-scroller-wheel-group-cont {
- position: relative;
- max-width: 100%;
- vertical-align: middle;
- display: inline-block;
- overflow: hidden;
- }
-
- .mbsc-scroller-wheel-group-cont:first-child:last-child {
- display: block;
- }
-
- .mbsc-scroller-wheel-group {
- margin: 0 auto;
- position: relative;
- display: -webkit-box;
- display: -webkit-flex;
- display: -moz-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -webkit-flex-direction: row;
- -moz-box-orient: horizontal;
- -moz-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -moz-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- }
-
- .mbsc-scroller-wheel-group-3d {
- -webkit-perspective: 1200px;
- perspective: 1200px;
- }
-
- .mbsc-scroller-wheel-wrapper {
- display: block;
- max-width: 100%;
- position: relative;
- -ms-touch-action: none;
- touch-action: none;
- min-width: 80px;
- }
-
- .mbsc-scroller-wheel-line {
- top: 50%;
- -webkit-transform: translateY(-50%);
- transform: translateY(-50%);
- }
-
- .mbsc-scroller-wheel-line,
- .mbsc-scroller-wheel-overlay {
- display: none;
- position: absolute;
- left: 0;
- right: 0;
- pointer-events: none;
- }
-
- .mbsc-scroller-wheel-overlay {
- z-index: 2;
- top: 0;
- bottom: 0;
- }
-
- .mbsc-scroller-wheel {
- display: block;
- overflow: hidden;
- margin: -1px 0;
- }
-
- .mbsc-scroller-wheel,
- .mbsc-scroller-wheel-cont {
- border-top: 1px solid transparent;
- border-bottom: 1px solid transparent;
- }
-
- .mbsc-scroller-wheel-cont {
- position: relative;
- z-index: 1;
- top: 50%;
- -webkit-transform: translateY(-50%);
- transform: translateY(-50%);
- }
-
- .mbsc-scroller-wheel-cont-3d {
- overflow: hidden;
- border: 0;
- }
-
- .mbsc-scroller-wheel-cont-3d > div {
- position: relative;
- top: -1px;
- }
-
- .mbsc-scroller-items-3d {
- position: absolute;
- top: 50%;
- left: 0;
- right: 0;
- -webkit-transform-style: preserve-3d;
- transform-style: preserve-3d;
- -webkit-transform: translateY(-50%);
- transform: translateY(-50%);
- }
-
- .mbsc-scroller .mbsc-scroller-wheel,
- .mbsc-scroller .mbsc-scroller-wheel-cont {
- -moz-box-sizing: content-box;
- box-sizing: content-box;
- }
-
- .mbsc-scroller-wheel-item {
- display: block;
- position: relative;
- cursor: pointer;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
-
- .mbsc-scroller-wheel-item:focus {
- outline: 0;
- }
-
- .mbsc-scroller-wheel-item-3d {
- position: absolute;
- width: 100%;
- top: 0;
- left: 0;
- cursor: pointer;
- -webkit-backface-visibility: hidden;
- backface-visibility: hidden;
- }
-
- .mbsc-scroller-wheel-item.mbsc-disabled {
- opacity: 0.3;
- }
-
- .mbsc-scroller-bar-cont {
- display: none;
- position: absolute;
- z-index: 4;
- top: 0;
- bottom: 0;
- width: 10px;
- opacity: 0;
- background: rgba(0, 0, 0, 0.05);
- -webkit-transform: translateZ(0);
- transform: translateZ(0);
- -webkit-transition: opacity 0.2s;
- transition: opacity 0.2s;
- }
-
- .mbsc-scroller-bar-cont.mbsc-ltr {
- right: 0;
- }
-
- .mbsc-scroller-bar-cont.mbsc-rtl {
- left: 0;
- }
-
- .mbsc-scroller-bar-hidden {
- display: none;
- }
-
- .mbsc-scroller-bar-started,
- .mbsc-scroller-wheel:hover .mbsc-scroller-bar-cont {
- opacity: 1;
- }
-
- .mbsc-scroller-bar {
- position: absolute;
- right: 0;
- top: 0;
- width: 10px;
- }
-
- .mbsc-scroller-bar:after {
- content: "";
- position: absolute;
- top: 2px;
- right: 2px;
- bottom: 2px;
- left: 2px;
- background: rgba(0, 0, 0, 0.5);
- border-radius: 3px;
- }
-
- .mbsc-material.mbsc-segmented {
- padding: 0.75em;
- }
-
- .mbsc-material.mbsc-segmented-selectbox {
- display: none;
- }
-
- .mbsc-material.mbsc-segmented-item:first-child .mbsc-segmented-button {
- border-top-left-radius: 0.25em;
- border-bottom-left-radius: 0.25em;
- }
-
- .mbsc-material.mbsc-segmented-item:first-child
- .mbsc-segmented-button.mbsc-rtl {
- border-radius: 0 0.25em 0.25em 0;
- border-right-width: 0.142858em;
- }
-
- .mbsc-material.mbsc-segmented-item:last-child .mbsc-segmented-button {
- border-top-right-radius: 0.25em;
- border-bottom-right-radius: 0.25em;
- border-right-width: 0.142858em;
- }
-
- .mbsc-material.mbsc-segmented-item:last-child
- .mbsc-segmented-button.mbsc-rtl {
- border-radius: 0.25em 0 0 0.25em;
- border-right-width: 0;
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button {
- margin: 0;
- padding: 0.285715em 1.142858em;
- border: 0.142858em solid transparent;
- border-right-width: 0;
- border-radius: 0;
- background: none;
- box-shadow: none;
- min-width: auto;
- font-size: 0.875em;
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-active,
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-hover {
- box-shadow: none;
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-focus:after {
- content: "";
- display: block;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-primary {
- color: #3f97f6;
- border-color: #3f97f6;
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-primary.mbsc-active,
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-primary.mbsc-hover {
- background: rgba(63, 151, 246, 0.2);
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-primary.mbsc-selected {
- background: #3f97f6;
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-secondary {
- color: #90979e;
- border-color: #90979e;
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-secondary.mbsc-active,
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-secondary.mbsc-hover {
- background: rgba(144, 151, 158, 0.2);
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-secondary.mbsc-selected {
- background: #90979e;
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-success {
- color: #43be5f;
- border-color: #43be5f;
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-success.mbsc-active,
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-success.mbsc-hover {
- background: rgba(67, 190, 95, 0.2);
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-success.mbsc-selected {
- background: #43be5f;
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-danger {
- color: #f5504e;
- border-color: #f5504e;
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-danger.mbsc-active,
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-danger.mbsc-hover {
- background: rgba(245, 80, 78, 0.2);
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-danger.mbsc-selected {
- background: #f5504e;
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-warning {
- color: #f8b042;
- border-color: #f8b042;
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-warning.mbsc-active,
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-warning.mbsc-hover {
- background: rgba(248, 176, 66, 0.2);
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-warning.mbsc-selected {
- background: #f8b042;
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-info {
- color: #5bb7c5;
- border-color: #5bb7c5;
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-info.mbsc-active,
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-info.mbsc-hover {
- background: rgba(91, 183, 197, 0.2);
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-button-info.mbsc-selected {
- background: #5bb7c5;
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button {
- border-color: #1a73e8;
- color: #000;
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-active,
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-hover {
- background: rgba(0, 0, 0, 0.2);
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-selected {
- background: #1a73e8;
- color: #fff;
- }
-
- .mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-focus:after {
- background: rgba(0, 0, 0, 0.2);
- }
-
- .mbsc-material-dark.mbsc-segmented-button.mbsc-button {
- border-color: #87b0f3;
- color: #fff;
- }
-
- .mbsc-material-dark.mbsc-segmented-button.mbsc-button.mbsc-active,
- .mbsc-material-dark.mbsc-segmented-button.mbsc-button.mbsc-hover {
- background: hsla(0, 0%, 100%, 0.2);
- }
-
- .mbsc-material-dark.mbsc-segmented-button.mbsc-button.mbsc-selected {
- background: #87b0f3;
- color: #000;
- }
-
- .mbsc-material-dark.mbsc-segmented-button.mbsc-button.mbsc-focus:after {
- background: hsla(0, 0%, 100%, 0.2);
- }
-
- .mbsc-segmented {
- display: -webkit-box;
- display: -webkit-flex;
- display: -moz-box;
- display: -ms-flexbox;
- display: flex;
- overflow: hidden;
- }
-
- .mbsc-segmented-item {
- margin: 0;
- position: relative;
- vertical-align: top;
- text-align: center;
- font-size: 1em;
- -webkit-box-flex: 1;
- -webkit-flex: 1 1 0;
- -moz-box-flex: 1;
- -ms-flex: 1 1 0px;
- flex: 1 1 0;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- min-width: 0;
- }
-
- .mbsc-segmented-label {
- display: block;
- margin: 0;
- padding: 0;
- }
-
- .mbsc-segmented-input {
- width: 1px;
- height: 0;
- opacity: 0;
- position: absolute;
- }
-
- .mbsc-segmented-button.mbsc-button {
- width: 100%;
- }
-
- .mbsc-material.mbsc-picker-header {
- font-size: 1.25em;
- font-weight: 500;
- padding: 0.8em 0.8em 0;
- line-height: 1.4em;
- text-align: center;
- }
-
- .mbsc-material.mbsc-range-control-wrapper .mbsc-segmented {
- padding: 0;
- max-width: 100%;
- width: 18.5em;
- }
-
- .mbsc-material.mbsc-range-control-wrapper
- .mbsc-segmented-button.mbsc-button.mbsc-font {
- background: none;
- border: 0;
- border-bottom: 2px solid transparent;
- border-radius: 0;
- padding: 0.8571422em 1.142857em;
- display: block;
- }
-
- .mbsc-material.mbsc-range-control-wrapper .mbsc-segmented-button.mbsc-ltr {
- text-align: left;
- }
-
- .mbsc-material.mbsc-range-control-wrapper .mbsc-segmented-button.mbsc-rtl {
- text-align: right;
- }
-
- .mbsc-material.mbsc-range-control-wrapper
- .mbsc-range-value-nonempty
- .mbsc-segmented-button.mbsc-ltr {
- padding-right: 2.642857em;
- }
-
- .mbsc-material.mbsc-range-control-wrapper
- .mbsc-range-value-nonempty
- .mbsc-segmented-button.mbsc-rtl {
- padding-left: 2.642857em;
- }
-
- .mbsc-material.mbsc-datepicker-control-calendar.mbsc-datepicker-control-time
- .mbsc-range-control-wrapper
- .mbsc-segmented,
- .mbsc-material.mbsc-datepicker-control-date.mbsc-datepicker-control-time
- .mbsc-range-control-wrapper
- .mbsc-segmented,
- .mbsc-material.mbsc-datepicker-control-datetime
- .mbsc-range-control-wrapper
- .mbsc-segmented {
- width: 25em;
- }
-
- .mbsc-material.mbsc-range-control-label {
- text-transform: capitalize;
- color: ${props.theme.colors.cyan300};
- }
-
- .mbsc-material.mbsc-range-control-value {
- font-weight: 700;
- overflow: hidden;
- text-overflow: ellipsis;
- }
-
- .mbsc-material.mbsc-range-label-clear {
- margin-top: -0.625em;
- right: 0.75em;
- width: 1.3125em;
- height: 1.3125em;
- }
-
- .mbsc-material.mbsc-range-label-clear.mbsc-ltr {
- right: 0.75em;
- }
-
- .mbsc-material.mbsc-range-label-clear.mbsc-rtl {
- left: 0.75em;
- }
-
- .mbsc-material.mbsc-datepicker .mbsc-calendar-title {
- font-size: 1.142858em;
- line-height: 1.75em;
- }
-
- .mbsc-material.mbsc-datepicker .mbsc-calendar-slide {
- background: #fff;
- }
-
- .mbsc-material.mbsc-datepicker-inline {
- background: #fff;
- color: #303030;
- }
-
- .mbsc-material.mbsc-datepicker-inline .mbsc-calendar-slide {
- background: #fff;
- }
-
- .mbsc-material.mbsc-range-control-wrapper {
- border-bottom: 1px solid rgba(0, 0, 0, 0.2);
- }
-
- .mbsc-material.mbsc-range-control-wrapper
- .mbsc-material.mbsc-segmented-button.mbsc-selected {
- border-bottom-color: #1a73e8;
- }
-
- .mbsc-material.mbsc-range-control-label.active,
- .mbsc-material.mbsc-range-control-value.active {
- color: #1a73e8;
- }
-
- .mbsc-material.mbsc-range-control-text-empty,
- .mbsc-material.mbsc-range-control-text-empty.active {
- color: rgba(48, 48, 48, 0.4);
- }
-
- .mbsc-material.mbsc-range-label-clear {
- color: #b0b0b0;
- }
-
- .mbsc-material.mbsc-range-label-clear:hover {
- color: #7d7d7d;
- }
-
- .mbsc-material-dark.mbsc-datepicker .mbsc-calendar-slide {
- background: #303030;
- }
-
- .mbsc-material-dark.mbsc-datepicker-inline {
- background: #000;
- color: #fff;
- }
-
- .mbsc-material-dark.mbsc-datepicker-inline .mbsc-calendar-slide {
- background: #000;
- }
-
- .mbsc-material-dark.mbsc-range-control-wrapper {
- border-bottom: 1px solid hsla(0, 0%, 100%, 0.2);
- }
-
- .mbsc-material-dark.mbsc-range-control-wrapper
- .mbsc-material-dark.mbsc-segmented-button.mbsc-selected {
- border-bottom-color: #87b0f3;
- }
-
- .mbsc-material-dark.mbsc-range-control-label.active,
- .mbsc-material-dark.mbsc-range-control-value.active {
- color: #87b0f3;
- }
-
- .mbsc-material-dark.mbsc-range-control-text-empty,
- .mbsc-material-dark.mbsc-range-control-text-empty.active {
- color: hsla(0, 0%, 100%, 0.4);
- }
-
- .mbsc-material-dark.mbsc-range-label-clear {
- color: grey;
- }
-
- .mbsc-material-dark.mbsc-range-label-clear:hover {
- color: #b3b3b3;
- }
-
- mbsc-datetime {
- display: block;
- width: 100%;
- }
-
- .mbsc-datepicker .mbsc-calendar {
- padding-bottom: 0.5em;
- }
-
- .mbsc-datepicker .mbsc-calendar-week-days {
- padding: 0 0.5em;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- margin-left: -1px;
- }
-
- .mbsc-range-control-wrapper .mbsc-segmented-input {
- width: 1px;
- }
-
- .mbsc-range-label-clear {
- position: absolute;
- top: 50%;
- display: none;
- }
-
- .mbsc-range-label-clear.active {
- display: block;
- }
-
- .mbsc-range-label-clear.mbsc-range-value-empty {
- display: none;
- }
-
- .mbsc-datepicker-tab-wrapper {
- position: relative;
- -webkit-flex-wrap: wrap;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
- overflow: hidden;
- }
-
- .mbsc-datepicker-tab,
- .mbsc-datepicker-tab-wrapper {
- display: -webkit-box;
- display: -webkit-flex;
- display: -moz-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -moz-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- }
-
- .mbsc-datepicker-tab {
- visibility: hidden;
- max-width: 100%;
- -webkit-box-align: center;
- -webkit-align-items: center;
- -moz-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- }
-
- .mbsc-datepicker-tab-expand {
- -webkit-box-flex: 1;
- -webkit-flex: 1;
- -moz-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- }
-
- .mbsc-datepicker-tab-active {
- visibility: visible;
- }
-
- .mbsc-datepicker-time-modal {
- position: absolute;
- z-index: 1;
- top: 0;
- left: 0;
- right: 0;
- max-width: none;
- height: 100%;
- }
-
- .mbsc-datepicker .mbsc-calendar-slide {
- padding: 0 0.5em;
- }
-
- .mbsc-appquality.mbsc-calendar-wrapper:after {
- box-shadow: inset 0 0.5em 0.25em -0.5em rgba(23, 64, 92, 0.5);
- }
-
- .mbsc-appquality.mbsc-calendar-button.mbsc-button {
- color: ${props.theme.palette.primary};
- }
-
- .mbsc-appquality.mbsc-calendar-picker-slide,
- .mbsc-appquality.mbsc-calendar-slide {
- background: ${props.theme.colors.white};
- }
-
- .mbsc-appquality.mbsc-calendar-week-day {
- color: ${props.theme.palette.primary};
- font-weight: ${props.theme.typography.fontWeight.light};
- font-size: ${props.theme.typography.fontSize.base};
- }
-
- .mbsc-appquality.mbsc-calendar-cell-text {
- color: ${props.theme.palette.primary};
- }
-
- .mbsc-appquality.mbsc-calendar-today {
- color: ${props.theme.palette.primary};
- font-weight: ${props.theme.typography.fontWeight.normal};
- }
-
- .mbsc-appquality.mbsc-focus .mbsc-calendar-cell-text {
- box-shadow: 0 0 0 2px rgba(23, 64, 92, 0.7);
- }
-
- .mbsc-appquality.mbsc-hover .mbsc-calendar-cell-text {
- background: ${props.theme.colors.gray100};
- }
-
- .mbsc-appquality.mbsc-range-hover:before {
- border-color: #d4d4d4;
- }
-
- .mbsc-appquality.mbsc-range-day:after {
- background-color: rgba(62, 173, 83, 0.25);
- }
-
- .mbsc-appquality.mbsc-selected .mbsc-calendar-cell-text {
- background: ${props.theme.palette.secondary};
- border-color: ${props.theme.palette.secondary};
- color: ${props.theme.colors.white};
- }
-
- .mbsc-appquality.mbsc-calendar-mark {
- background: ${props.theme.palette.secondary};
- }
-
- .mbsc-appquality.mbsc-calendar-label {
- color: ${props.theme.palette.secondary};
- }
-
- .mbsc-appquality.mbsc-calendar-label-inner {
- color: #fff;
- }
-
- .mbsc-appquality.mbsc-calendar-label.mbsc-calendar-label-active,
- .mbsc-appquality.mbsc-calendar-label.mbsc-calendar-label-dragging {
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12),
- 0 1px 3px -1px rgba(0, 0, 0, 0.2);
- }
-
- .mbsc-appquality.mbsc-calendar-text-more {
- box-shadow: none;
- }
-
- .mbsc-appquality.mbsc-calendar-text-more .mbsc-calendar-label-text {
- color: ${props.theme.palette.primary};
- }
-
- .mbsc-appquality.mbsc-calendar-popup .mbsc-popup-arrow,
- .mbsc-appquality.mbsc-calendar-popup .mbsc-popup-body {
- background: ${props.theme.colors.white};
- }
-
- .mbsc-appquality.mbsc-calendar-height-md .mbsc-calendar-day,
- .mbsc-appquality.mbsc-calendar-height-md .mbsc-calendar-week-day {
- border-color: #bdbdbd;
- }
-
- .mbsc-appquality.mbsc-datepicker .mbsc-calendar-slide {
- background: ${props.theme.colors.white};
- }
-
- .mbsc-appquality.mbsc-datepicker-inline {
- background: ${props.theme.colors.white};
- color: ${props.theme.palette.primary};
- }
-
- .mbsc-appquality.mbsc-datepicker-inline .mbsc-calendar-slide {
- background: ${props.theme.colors.white};
- }
-
- .mbsc-appquality.mbsc-range-control-wrapper {
- border-bottom: 1px solid ${props.theme.colors.disabled};
- }
-
- .mbsc-appquality.mbsc-range-control-wrapper
- .mbsc-appquality.mbsc-segmented-button.mbsc-selected {
- border-bottom-color: ${props.theme.palette.secondary};
- }
-
- .mbsc-appquality.mbsc-range-control-label.active {
- color: ${props.theme.palette.info};
- font-weight: ${props.theme.typography.fontWeight.normal};
- }
- .mbsc-appquality.mbsc-range-control-value.active {
- color: ${props.theme.palette.secondary};
- }
-
- .mbsc-appquality.mbsc-range-control-text-empty,
- .mbsc-appquality.mbsc-range-control-text-empty.active {
- color: ${props.theme.colors.disabled};
- text-transform: capitalize;
- }
-
- .mbsc-appquality.mbsc-range-label-clear {
- color: #8fc1e3;
- }
-
- .mbsc-appquality.mbsc-range-label-clear:hover {
- color: #3d94cf;
- }
-
- .mbsc-appquality.mbsc-button-standard {
- background: #bdbdbd;
- color: #000;
- box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
- 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
- }
-
- .mbsc-appquality.mbsc-button-standard.mbsc-hover {
- box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
- 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
- }
-
- .mbsc-appquality.mbsc-button-standard.mbsc-active,
- .mbsc-appquality.mbsc-button-standard.mbsc-focus {
- box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
- 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
- }
-
- .mbsc-appquality.mbsc-button-flat,
- .mbsc-appquality.mbsc-button-outline {
- color: #000;
- }
-
- .mbsc-appquality.mbsc-button-flat.mbsc-active,
- .mbsc-appquality.mbsc-button-flat.mbsc-hover,
- .mbsc-appquality.mbsc-button-outline.mbsc-active,
- .mbsc-appquality.mbsc-button-outline.mbsc-hover {
- background: ${props.theme.colors.gray100};
- }
-
- .mbsc-appquality.mbsc-button-flat.mbsc-popup-button-primary.mbsc-active,
- .mbsc-appquality.mbsc-button-flat.mbsc-popup-button-primary.mbsc-hover,
- .mbsc-appquality.mbsc-button-outline.mbsc-popup-button-primary.mbsc-active,
- .mbsc-appquality.mbsc-button-outline.mbsc-popup-button-primary.mbsc-hover {
- background: ${props.theme.colors.purple100};
- }
-
- .mbsc-appquality.mbsc-button-flat.mbsc-focus,
- .mbsc-appquality.mbsc-button-outline.mbsc-focus {
- background: rgba(0, 0, 0, 0.3);
- }
-
- .mbsc-appquality.mbsc-button-outline {
- border-color: #000;
- }
-
- .mbsc-appquality.mbsc-button-primary.mbsc-button-standard {
- background: #3f97f6;
- color: ${props.theme.colors.white};
- }
-
- .mbsc-appquality.mbsc-button-secondary.mbsc-button-standard {
- background: #90979e;
- color: ${props.theme.colors.white};
- }
-
- .mbsc-appquality.mbsc-button-success.mbsc-button-standard {
- background: #43be5f;
- color: ${props.theme.colors.white};
- }
-
- .mbsc-appquality.mbsc-button-danger.mbsc-button-standard {
- background: #f5504e;
- color: ${props.theme.colors.white};
- }
-
- .mbsc-appquality.mbsc-button-warning.mbsc-button-standard {
- background: #f8b042;
- color: ${props.theme.colors.white};
- }
-
- .mbsc-appquality.mbsc-button-info.mbsc-button-standard {
- background: #5bb7c5;
- color: ${props.theme.colors.white};
- }
-
- .mbsc-appquality.mbsc-button-dark.mbsc-button-standard {
- background: #47494a;
- color: ${props.theme.colors.white};
- }
-
- .mbsc-appquality.mbsc-button-light.mbsc-button-standard {
- background: #fff;
- color: ${props.theme.palette.primary};
- }
-
- .mbsc-appquality.mbsc-button-primary.mbsc-button-flat {
- color: #3f97f6;
- }
-
- .mbsc-appquality.mbsc-button-primary.mbsc-button-flat.mbsc-active,
- .mbsc-appquality.mbsc-button-primary.mbsc-button-flat.mbsc-hover {
- background: rgba(63, 151, 246, 0.2);
- }
-
- .mbsc-appquality.mbsc-button-primary.mbsc-button-flat.mbsc-focus {
- background: rgba(63, 151, 246, 0.3);
- }
-
- .mbsc-appquality.mbsc-button-secondary.mbsc-button-flat {
- color: #90979e;
- }
-
- .mbsc-appquality.mbsc-button-secondary.mbsc-button-flat.mbsc-active,
- .mbsc-appquality.mbsc-button-secondary.mbsc-button-flat.mbsc-hover {
- background: rgba(144, 151, 158, 0.2);
- }
-
- .mbsc-appquality.mbsc-button-secondary.mbsc-button-flat.mbsc-focus {
- background: rgba(144, 151, 158, 0.3);
- }
-
- .mbsc-appquality.mbsc-button-success.mbsc-button-flat {
- color: #43be5f;
- }
-
- .mbsc-appquality.mbsc-button-success.mbsc-button-flat.mbsc-active,
- .mbsc-appquality.mbsc-button-success.mbsc-button-flat.mbsc-hover {
- background: rgba(67, 190, 95, 0.2);
- }
-
- .mbsc-appquality.mbsc-button-success.mbsc-button-flat.mbsc-focus {
- background: rgba(67, 190, 95, 0.3);
- }
-
- .mbsc-appquality.mbsc-button-danger.mbsc-button-flat {
- color: #f5504e;
- }
-
- .mbsc-appquality.mbsc-button-danger.mbsc-button-flat.mbsc-active,
- .mbsc-appquality.mbsc-button-danger.mbsc-button-flat.mbsc-hover {
- background: rgba(245, 80, 78, 0.2);
- }
-
- .mbsc-appquality.mbsc-button-danger.mbsc-button-flat.mbsc-focus {
- background: rgba(245, 80, 78, 0.3);
- }
-
- .mbsc-appquality.mbsc-button-warning.mbsc-button-flat {
- color: #f8b042;
- }
-
- .mbsc-appquality.mbsc-button-warning.mbsc-button-flat.mbsc-active,
- .mbsc-appquality.mbsc-button-warning.mbsc-button-flat.mbsc-hover {
- background: rgba(248, 176, 66, 0.2);
- }
-
- .mbsc-appquality.mbsc-button-warning.mbsc-button-flat.mbsc-focus {
- background: rgba(248, 176, 66, 0.3);
- }
-
- .mbsc-appquality.mbsc-button-info.mbsc-button-flat {
- color: #5bb7c5;
- }
-
- .mbsc-appquality.mbsc-button-info.mbsc-button-flat.mbsc-active,
- .mbsc-appquality.mbsc-button-info.mbsc-button-flat.mbsc-hover {
- background: rgba(91, 183, 197, 0.2);
- }
-
- .mbsc-appquality.mbsc-button-info.mbsc-button-flat.mbsc-focus {
- background: rgba(91, 183, 197, 0.3);
- }
-
- .mbsc-appquality.mbsc-button-dark.mbsc-button-flat {
- color: #47494a;
- }
-
- .mbsc-appquality.mbsc-button-dark.mbsc-button-flat.mbsc-active,
- .mbsc-appquality.mbsc-button-dark.mbsc-button-flat.mbsc-hover {
- background: rgba(71, 73, 74, 0.2);
- }
-
- .mbsc-appquality.mbsc-button-dark.mbsc-button-flat.mbsc-focus {
- background: rgba(71, 73, 74, 0.3);
- }
-
- .mbsc-appquality.mbsc-button-light.mbsc-button-flat {
- color: #ccc;
- }
-
- .mbsc-appquality.mbsc-button-light.mbsc-button-flat.mbsc-active,
- .mbsc-appquality.mbsc-button-light.mbsc-button-flat.mbsc-hover {
- background: hsla(0, 0%, 100%, 0.2);
- }
-
- .mbsc-appquality.mbsc-button-light.mbsc-button-flat.mbsc-focus {
- background: hsla(0, 0%, 100%, 0.3);
- }
-
- .mbsc-appquality.mbsc-button-primary.mbsc-button-outline {
- border-color: #3f97f6;
- color: #3f97f6;
- }
-
- .mbsc-appquality.mbsc-button-primary.mbsc-button-outline.mbsc-active,
- .mbsc-appquality.mbsc-button-primary.mbsc-button-outline.mbsc-hover {
- background: rgba(63, 151, 246, 0.2);
- }
-
- .mbsc-appquality.mbsc-button-primary.mbsc-button-outline.mbsc-focus {
- background: rgba(63, 151, 246, 0.3);
- }
-
- .mbsc-appquality.mbsc-button-secondary.mbsc-button-outline {
- border-color: #90979e;
- color: #90979e;
- }
-
- .mbsc-appquality.mbsc-button-secondary.mbsc-button-outline.mbsc-active,
- .mbsc-appquality.mbsc-button-secondary.mbsc-button-outline.mbsc-hover {
- background: rgba(144, 151, 158, 0.2);
- }
-
- .mbsc-appquality.mbsc-button-secondary.mbsc-button-outline.mbsc-focus {
- background: rgba(144, 151, 158, 0.3);
- }
-
- .mbsc-appquality.mbsc-button-success.mbsc-button-outline {
- border-color: #43be5f;
- color: #43be5f;
- }
-
- .mbsc-appquality.mbsc-button-success.mbsc-button-outline.mbsc-active,
- .mbsc-appquality.mbsc-button-success.mbsc-button-outline.mbsc-hover {
- background: rgba(67, 190, 95, 0.2);
- }
-
- .mbsc-appquality.mbsc-button-success.mbsc-button-outline.mbsc-focus {
- background: rgba(67, 190, 95, 0.3);
- }
-
- .mbsc-appquality.mbsc-button-danger.mbsc-button-outline {
- border-color: #f5504e;
- color: #f5504e;
- }
-
- .mbsc-appquality.mbsc-button-danger.mbsc-button-outline.mbsc-active,
- .mbsc-appquality.mbsc-button-danger.mbsc-button-outline.mbsc-hover {
- background: rgba(245, 80, 78, 0.2);
- }
-
- .mbsc-appquality.mbsc-button-danger.mbsc-button-outline.mbsc-focus {
- background: rgba(245, 80, 78, 0.3);
- }
-
- .mbsc-appquality.mbsc-button-warning.mbsc-button-outline {
- border-color: #f8b042;
- color: #f8b042;
- }
-
- .mbsc-appquality.mbsc-button-warning.mbsc-button-outline.mbsc-active,
- .mbsc-appquality.mbsc-button-warning.mbsc-button-outline.mbsc-hover {
- background: rgba(248, 176, 66, 0.2);
- }
-
- .mbsc-appquality.mbsc-button-warning.mbsc-button-outline.mbsc-focus {
- background: rgba(248, 176, 66, 0.3);
- }
-
- .mbsc-appquality.mbsc-button-info.mbsc-button-outline {
- border-color: #5bb7c5;
- color: #5bb7c5;
- }
-
- .mbsc-appquality.mbsc-button-info.mbsc-button-outline.mbsc-active,
- .mbsc-appquality.mbsc-button-info.mbsc-button-outline.mbsc-hover {
- background: rgba(91, 183, 197, 0.2);
- }
-
- .mbsc-appquality.mbsc-button-info.mbsc-button-outline.mbsc-focus {
- background: rgba(91, 183, 197, 0.3);
- }
-
- .mbsc-appquality.mbsc-button-dark.mbsc-button-outline {
- border-color: #47494a;
- color: #47494a;
- }
-
- .mbsc-appquality.mbsc-button-dark.mbsc-button-outline.mbsc-active,
- .mbsc-appquality.mbsc-button-dark.mbsc-button-outline.mbsc-hover {
- background: rgba(71, 73, 74, 0.2);
- }
-
- .mbsc-appquality.mbsc-button-dark.mbsc-button-outline.mbsc-focus {
- background: rgba(71, 73, 74, 0.3);
- }
-
- .mbsc-appquality.mbsc-button-light.mbsc-button-outline {
- border-color: #ccc;
- color: #ccc;
- }
-
- .mbsc-appquality.mbsc-button-light.mbsc-button-outline.mbsc-active,
- .mbsc-appquality.mbsc-button-light.mbsc-button-outline.mbsc-hover {
- background: hsla(0, 0%, 100%, 0.2);
- }
-
- .mbsc-appquality.mbsc-button-light.mbsc-button-outline.mbsc-focus {
- background: hsla(0, 0%, 100%, 0.3);
- }
-
- .mbsc-appquality.mbsc-popup-body {
- background: ${props.theme.colors.white};
- box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2),
- 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
- color: ${props.theme.palette.primary};
- }
-
- .mbsc-appquality.mbsc-popup-arrow {
- background: ${props.theme.colors.white};
- box-shadow: 0 0 1em rgba(0, 0, 0, 0.2);
- }
-
- .mbsc-appquality.mbsc-popup-button.mbsc-font {
- color: ${props.theme.palette.primary};
- }
-
- .mbsc-appquality.mbsc-popup-button.mbsc-font.mbsc-popup-button-close {
- color: ${props.theme.palette.danger};
- }
-
- .mbsc-appquality.mbsc-scroller-wheel-cont {
- border-color: ${props.theme.palette.secondary};
- }
-
- .mbsc-appquality.mbsc-scroller-pointer
- .mbsc-wheel-group-cont-single
- .mbsc-scroller-wheel-single,
- .mbsc-appquality.mbsc-scroller-wheel-multi {
- border-color: transparent;
- }
-
- .mbsc-appquality.mbsc-scroller-wheel-item.mbsc-active,
- .mbsc-appquality.mbsc-scroller-wheel-item.mbsc-focus,
- .mbsc-appquality.mbsc-scroller-wheel-item.mbsc-hover {
- background: ${addOpacityToHex(props.theme.colors.gray400, "0.2")};
- }
-
- .mbsc-appquality.mbsc-wheel-checkmark:after {
- border-color: ${props.theme.palette.secondary};
- }
-
- .mbsc-appquality.mbsc-scroller-pointer
- .mbsc-wheel-group-cont-single
- .mbsc-scroller-wheel-item.mbsc-selected {
- color: ${props.theme.palette.secondary};
- background: rgba(0, 0, 0, 0.15);
- }
- .mbsc-material.mbsc-textfield-box {
- ${InvalidInputStyle}
- &:focus {
- ${InvalidFocusStyle}
- }
- }
-`;
-}}`;
-
-const DatepickerStyle = () => {
- useEffect(() => {
- (window as any).MBSCappqGlobalStyleAlreadyRendered = false;
- });
- if ((window as any).MBSCappqGlobalStyleAlreadyRendered) return null;
- return (
- <>
-
- {((window as any).MBSCappqGlobalStyleAlreadyRendered = true)}
-
- );
-};
-
-export default DatepickerStyle;
diff --git a/src/stories/form/datepicker/_types.ts b/src/stories/form/datepicker/_types.ts
index e3f1780c..d7e4f8cc 100644
--- a/src/stories/form/datepicker/_types.ts
+++ b/src/stories/form/datepicker/_types.ts
@@ -2,6 +2,7 @@ export interface DatepickerProps {
select?: "date" | "range";
value?: Date;
id: string;
+ name?: string;
minDate?: Date;
maxDate?: Date;
locale?: string;
diff --git a/src/stories/form/input/Input.tsx b/src/stories/form/input/Input.tsx
index 32965e2c..eccae883 100644
--- a/src/stories/form/input/Input.tsx
+++ b/src/stories/form/input/Input.tsx
@@ -3,9 +3,11 @@ import styled from "styled-components";
import { InvalidFocusStyle, InvalidInputStyle } from "../_style";
import PasswordIcon from "./inputIcons/PasswordIcon";
import SearchIcon from "./inputIcons/SearchIcon";
+import { InputArgs } from "./types";
const Input = ({
id,
+ name,
type,
className,
placeholder,
@@ -16,33 +18,25 @@ const Input = ({
onChange,
autocomplete = true,
i18n,
-}: {
- id: string;
- type: string;
- className?: string;
- placeholder?: string;
- value?: string;
- disabled?: boolean;
- autocomplete?: boolean;
- isInvalid?: boolean;
- extra?: any;
- onChange?: (val: string) => void;
- i18n?: {
- showPassword?: string;
- hidePassword?: string;
- };
-}) => {
- const [currentType, setType] = useState(type);
+ ...props
+}: InputArgs) => {
+ const [currentType, setType] = useState(type);
return (
onChange && onChange(e.target.value)}
+ max={"max" in props ? props.max : undefined}
+ min={"min" in props ? props.min : undefined}
+ onChange={(e) => {
+ onChange &&
+ (type === "date" ? onChange(e) : onChange(e.target.value));
+ }}
{...extra}
/>
{type === "search" && }
diff --git a/src/stories/form/input/inputIcons/PasswordIcon.tsx b/src/stories/form/input/inputIcons/PasswordIcon.tsx
index f4c7d4f6..c4d97ad7 100644
--- a/src/stories/form/input/inputIcons/PasswordIcon.tsx
+++ b/src/stories/form/input/inputIcons/PasswordIcon.tsx
@@ -1,6 +1,7 @@
import { EyeFill, EyeSlash } from "react-bootstrap-icons";
import { Button } from "../../../button/Button";
import { aqBootstrapTheme } from "../../../theme/defaultTheme";
+import { InputArgs } from "../types";
const PasswordIcon = ({
type,
@@ -8,7 +9,7 @@ const PasswordIcon = ({
i18n,
}: {
type: string;
- setType: (value: string) => void;
+ setType: (value: InputArgs["type"]) => void;
i18n?: {
showPassword?: string;
hidePassword?: string;
diff --git a/src/stories/form/input/types.d.ts b/src/stories/form/input/types.d.ts
new file mode 100644
index 00000000..93bb101c
--- /dev/null
+++ b/src/stories/form/input/types.d.ts
@@ -0,0 +1,52 @@
+type InputArgs = {
+ id: string;
+ name?: string;
+ className?: string;
+ placeholder?: string;
+ value?: string;
+ disabled?: boolean;
+ autocomplete?: boolean;
+ isInvalid?: boolean;
+ extra?: any;
+ i18n?: {
+ showPassword?: string;
+ hidePassword?: string;
+ };
+} & (
+ | {
+ type: "date";
+ min?: string;
+ max?: string;
+ onChange?: ChangeEventHandler;
+ }
+ | {
+ type: "password";
+ onChange?: (val: string) => void;
+ }
+ | {
+ type: "search";
+ onChange?: (val: string) => void;
+ }
+ | {
+ type: "text";
+ onChange?: (val: string) => void;
+ }
+ | {
+ type: "number";
+ onChange?: (val: string) => void;
+ }
+ | {
+ type: "tel";
+ onChange?: (val: string) => void;
+ }
+ | {
+ type: "url";
+ onChange?: (val: string) => void;
+ }
+ | {
+ type: "email";
+ onChange?: (val: string) => void;
+ }
+);
+
+export { InputArgs };