diff --git a/Example_Button.sb b/Example_Button.sb new file mode 100644 index 0000000..f3c24eb --- /dev/null +++ b/Example_Button.sb @@ -0,0 +1,64 @@ +; MaterialSB Example - Buttons +; This example demonstrates the different buttons styles. + +IncludeFile "MaterialSB.sbi" + +EnableExplicit + +Procedure Main(Result) + UseModule MaterialSB + + SetDarkTheme(#False) + + ; Navbar + Navbar(#Navbar_Shadow1 | #Navbar_Container) + NavbarAddLogo("Buttons") + + Row(#Grid_Container) + Col(12) + Append("

Button Component

") + Append("

MaterialSB supports various button styles and sizes:

") + + Button("Default", #Null, #Button_Default) + Button("Tonal", #Null, #Button_Tonal) + Button("Outlined", #Null, #Button_Outlined) + Button("Elevated", #Null, #Button_Elevated) + Button("Text", #Null, #Button_Text) + Button("Floating", #Null, #Button_Floating) + Button("Large", #Null,#Button_Large) + Button("Small", #Null,#Button_Small) + Button("Disabled", #Null, #Button_Disabled) + + Append("

") + Append("
Button Flags
") + + Protected t = Table("Flag", #Table_Striped | #Table_Highlight) + TableAddColumn("Description", t) + + TableAddItem("#Button_Default" + Chr(10) + "Standard filled button", t) + TableAddItem("#Button_Tonal" + Chr(10) + "Tonal variant with muted color", t) + TableAddItem("#Button_Outlined" + Chr(10) + "Outlined variant with border", t) + TableAddItem("#Button_Elevated" + Chr(10) + "Elevated variant with shadow", t) + TableAddItem("#Button_Text" + Chr(10) + "Text-only variant", t) + TableAddItem("#Button_Floating" + Chr(10) + "Floating action button (FAB)", t) + TableAddItem("#Button_Large" + Chr(10) + "Large size", t) + TableAddItem("#Button_Small" + Chr(10) + "Small size", t) + TableAddItem("#Button_Disabled" + Chr(10) + "Disabled state", t) + + CloseCurrentParent(2) + + AutoInit() + + UnuseModule MaterialSB +EndProcedure + +MaterialSB::Download(@Main()) +; IDE Options = SpiderBasic 3.10 (Windows - x86) +; CursorPosition = 24 +; Folding = - +; iOSAppOrientation = 0 +; AndroidAppCode = 0 +; AndroidAppOrientation = 0 +; EnableXP +; DPIAware +; CompileSourceDirectory \ No newline at end of file diff --git a/Example_Card.sb b/Example_Card.sb new file mode 100644 index 0000000..8f40f15 --- /dev/null +++ b/Example_Card.sb @@ -0,0 +1,121 @@ +; MaterialSB Example - Cards +; This example demonstrates how to create cards with content. + +IncludeFile "MaterialSB.sbi" + +EnableExplicit + +Procedure ReadMore() + Debug "User clicked on 'Read More'" +EndProcedure + +Procedure Share() + Debug "User clicked on 'Share'" +EndProcedure + +Procedure Action() + Debug "User clicked on 'Action'" +EndProcedure + +Procedure Main(Result) + UseModule MaterialSB + + SetDarkTheme(#False) + + ; Navbar + Navbar(#Navbar_Shadow1 | #Navbar_Container) + NavbarAddLogo("Cards") + + ; Create a container row + Row(#Grid_Container) + Col(12) + Append("

Card Component

") + CloseCurrentParent() + + ; First column - Simple card + Col(12, 6, 4) + + Card() + CardImage("https://picsum.photos/400/300") + CardContent() + CardTitle("Simple Card") + Append("

This is a simple card with an image, content, and action buttons.

") + CloseCurrentParent() + CardAction() + Append(Link("Read More", @ReadMore())) + Append(Link("Share", @Share())) + CloseCurrentParent(3) + + ; Second column - Panel card + Col(12, 6, 4) + + ; You don't need to use the helpers, all MaterialSB components support HTML. + Card("Panel Card", #Card_Panel) + AddClass(GetCurrentParent(), #Color_Teal + #Color_Lighten_4) + Append("

Panel cards are simpler and don't have sections. Great for short messages or alerts.

") + CloseCurrentParent(2) + + ; Third column - Card with colored content + Col(12, 6, 4) + + Card() + AddClass(GetCurrentParent(), #Color_Blue + #Color_Darken_1) + CardContent() + AddClass(GetCurrentParent(), #Color_White + #Color_Text) + CardTitle("Colored Card") + Append("

Cards can be styled with MaterializeCSS color classes for visual emphasis.

") + CloseCurrentParent() + CardAction() + AddClass(GetCurrentParent(), #Color_Blue + #Color_Darken_2) + Append(Link("Action", @Action(), #Color_White)) + CloseCurrentParent(3) + + ; Flags + Col(12) + Append("
Card Flags
") + + Protected t = Table("Flag", #Table_Striped | #Table_Highlight) + TableAddColumn("Description", t) + + TableAddItem("#Card_Default" + Chr(10) + "Standard card with sections", t) + TableAddItem("#Card_Panel" + Chr(10) + "Simple panel without structure", t) + TableAddItem("#Card_Small" + Chr(10) + "Fixed small height", t) + TableAddItem("#Card_Medium" + Chr(10) + "Fixed medium height", t) + TableAddItem("#Card_Large" + Chr(10) + "Fixed large height", t) + TableAddItem("#Card_Horizontal" + Chr(10) + "Horizontal layout", t) + + ; Tips + Col(12) + Append("
") + Card() + AddClass(GetCurrentParent(), #Color_DeepPurple + #Color_Lighten_3) + CardContent() + CardTitle("
Tips
") + Append("") + CloseCurrentParent(2) + + Append("
") + Append("
") + + CloseCurrentParent() ; Close the row + + AutoInit() + + UnuseModule MaterialSB +EndProcedure + +MaterialSB::Download(@Main()) +; IDE Options = SpiderBasic 3.10 (Windows - x86) +; CursorPosition = 86 +; FirstLine = 30 +; Folding = - +; iOSAppOrientation = 0 +; AndroidAppCode = 0 +; AndroidAppOrientation = 0 +; EnableXP +; DPIAware +; CompileSourceDirectory \ No newline at end of file diff --git a/Example_Form.sb b/Example_Form.sb new file mode 100644 index 0000000..ca87ffa --- /dev/null +++ b/Example_Form.sb @@ -0,0 +1,139 @@ +; MaterialSB Example - Forms +; This example demonstrates all form components available in MaterialSB. + +IncludeFile "MaterialSB.sbi" + +EnableExplicit + +Procedure OnSubmit() + Debug "Form submitted!" +EndProcedure + +Procedure Main(Result) + Protected Dropdown, Range + UseModule MaterialSB + + SetDarkTheme(#False) + + ; Create a navbar + Navbar(#Navbar_Shadow1 | #Navbar_Container) + NavbarAddLogo("Form Example") + + ; Main container + Row(#Grid_Container) + Col(12) + Append("

Form Components

") + Append("

MaterialSB provides a complete set of form components styled with MaterializeCSS.

") + CloseCurrentParent(2) + + ; Text Inputs Section + Row(#Grid_Container) + Col(12, 6) + + Append("
Text Inputs
") + TextInput("Username", "Enter your username") + TextInput("Email Address", "", #Input_Email) + TextInput("Password", "", #Input_Password) + TextInput("Phone Number", "", #Input_Tel) + TextInput("Disabled Field", "Cannot edit", #Input_Disabled) + + CloseCurrentParent() + + ; Textarea + Col(12, 6) + + Append("
Textarea
") + Textarea("Biography", "Tell us about yourself...") + Textarea("Read-only Notes", "", #Textarea_Readonly) + + CloseCurrentParent(2) + + ; Checkboxes and Radios + Row(#Grid_Container) + Col(12, 6, 4) + + Append("
Checkboxes
") + Checkbox("Default checkbox") + Checkbox("Filled checkbox", #Checkbox_Filled) + Checkbox("Pre-checked", #Checkbox_Checked) + Checkbox("Filled & checked", #Checkbox_Filled | #Checkbox_Checked) + Checkbox("Disabled", #Checkbox_Disabled) + + CloseCurrentParent() + + Col(12, 6, 4) + + Append("
Radio Buttons
") + Radio("group1","Option 1", #Radio_Checked) + Radio("group1","Option 2") + Radio("group1","Option 3") + Append("
") + Append("

With Gap:

") + Radio("group2", "Choice A", #Radio_WithGap | #Radio_Checked) + Radio("group2", "Choice B", #Radio_WithGap) + + CloseCurrentParent() + + Col(12, 6, 4) + + Append("
Switches
") + Switch("Off", "On") + Append("

") + Switch("Disabled", "Enabled", #Switch_Checked) + Append("

") + Switch("No", "Yes", #Switch_Disabled) + + CloseCurrentParent(2) + + ; Select and Range + Row(#Grid_Container) + Col(12, 6) + + Append("
Select Dropdown
") + Dropdown = Dropdown("Choose your country") + DropdownAddOption("Choose an option", "", Dropdown, #True) + DropdownAddOption("France", "fr", Dropdown) + DropdownAddOption("Germany", "de", Dropdown) + DropdownAddOption("United Kingdom", "uk", Dropdown) + DropdownAddOption("Canada", "ca", Dropdown) + DropdownAddOption("Japan", "jp", Dropdown) + Init(Dropdown, #Null) + + CloseCurrentParent() + + Col(12, 6) + + Append("
Range Slider
") + Append("

Volume:

") + Range = Range(0, 100, 50) + + Append("

Brightness (0-255):

") + Range(0, 255, 128) + + CloseCurrentParent(2) + + ; Submit Button + Row(#Grid_Container) + Col(12) + Append("
") + Protected submitBtn = Button("Submit Form", #Button_Large) + AddClass(submitBtn, #Color_Green) + ButtonSetCallback(submitBtn, @OnSubmit()) + CloseCurrentParent(2) + + AutoInit() + + UnuseModule MaterialSB +EndProcedure + +MaterialSB::Download(@Main()) + +; IDE Options = SpiderBasic 3.10 (Windows - x86) +; CursorPosition = 12 +; Folding = - +; iOSAppOrientation = 0 +; AndroidAppCode = 0 +; AndroidAppOrientation = 0 +; EnableXP +; DPIAware +; CompileSourceDirectory \ No newline at end of file diff --git a/Example_Grid.sb b/Example_Grid.sb new file mode 100644 index 0000000..44688bb --- /dev/null +++ b/Example_Grid.sb @@ -0,0 +1,142 @@ +; MaterialSB Example - Grid System +; This example demonstrates the responsive grid system. + +IncludeFile "MaterialSB.sbi" + +EnableExplicit + +Procedure Main(Result) + UseModule MaterialSB + + SetDarkTheme(#False) + + ; Create a navbar + Navbar(#Navbar_Shadow1 | #Navbar_Container) + NavbarAddLogo("Grid Example") + + ; Header section + Row(#Grid_Container) + Col(12) + Append("

Responsive Grid System

") + Append("

MaterialSB uses a 12-column responsive grid. Resize your browser to see how columns adapt.

") + CloseCurrentParent(2) + + ; Basic grid demonstration + Row(#Grid_Container) + Col(12) + Append("
Basic Columns
") + CloseCurrentParent(2) + + Row(#Grid_Container) + + Col(12, 6, 4) + Card("", #Card_Panel) + AddClass(GetCurrentParent(), #Color_Red + #Color_Lighten_3) + Append("

s12 m6 l4

") + Append("

Full on small, half on medium, third on large

") + CloseCurrentParent(2) + + Col(12, 6, 4) + Card("", #Card_Panel) + AddClass(GetCurrentParent(), #Color_Blue + #Color_Lighten_3) + Append("

s12 m6 l4

") + Append("

Full on small, half on medium, third on large

") + CloseCurrentParent(2) + + Col(12, 6, 4) + Card("", #Card_Panel) + AddClass(GetCurrentParent(), #Color_Green + #Color_Lighten_3) + Append("

s12 m6 l4

") + Append("

Full on small, half on medium, third on large

") + CloseCurrentParent(2) + + CloseCurrentParent() ; Close row + + ; Two column layout + Row(#Grid_Container) + Col(12) + Append("
Two Column Layout
") + CloseCurrentParent(2) + + Row(#Grid_Container) + + Col(12, 8) + Card("", #Card_Panel) + AddClass(GetCurrentParent(), #Color_Teal + #Color_Lighten_4) + Append("
Main Content (s12 m8)
") + Append("

This column takes 8 out of 12 columns on medium and larger screens. On small screens, it takes the full width.

") + Append("

This is ideal for main content areas with a sidebar.

") + CloseCurrentParent(2) + + Col(12, 4) + Card("", #Card_Panel) + AddClass(GetCurrentParent(), #Color_Orange + #Color_Lighten_4) + Append("
Sidebar (s12 m4)
") + Append("

This sidebar takes 4 columns on medium+, full width on small.

") + CloseCurrentParent(2) + + CloseCurrentParent() ; Close row + + ; Nested grid + Row(#Grid_Container) + Col(12) + Append("
Nested Grid
") + CloseCurrentParent(2) + + Row(#Grid_Container) + Col(12) + + Card("", #Card_Panel) + AddClass(GetCurrentParent(), #Color_Purple + #Color_Lighten_4) + Append("

Outer Container

") + + ; Nested row inside the card + Row() + + Col(6) + Card("", #Card_Panel) + AddClass(GetCurrentParent(), #Color_Purple + #Color_Lighten_2) + Append("

Nested s6

") + CloseCurrentParent(2) + + Col(6) + Card("", #Card_Panel) + AddClass(GetCurrentParent(), #Color_Purple + #Color_Lighten_2) + Append("

Nested s6

") + CloseCurrentParent(2) + + CloseCurrentParent() ; Close nested row + CloseCurrentParent() ; Close outer card + CloseCurrentParent(2) ; Close column and row + + ; Breakpoint reference + Row(#Grid_Container) + Col(12) + Append("
Breakpoint Reference
") + + Protected t = Table("Prefix", #Table_Striped | #Table_Highlight) + TableAddColumn("Screen Size", t) + TableAddColumn("Width", t) + + Protected item = TableAddItem("s" + Chr(10) + "Small" + Chr(10) + "< 600px", t) + item = TableAddItem("m" + Chr(10) + "Medium" + Chr(10) + ">= 600px", t) + item = TableAddItem("l" + Chr(10) + "Large" + Chr(10) + ">= 992px", t) + item = TableAddItem("xl" + Chr(10) + "Extra Large" + Chr(10) + ">= 1200px", t) + + CloseCurrentParent(2) + + AutoInit() + + UnuseModule MaterialSB +EndProcedure + +MaterialSB::Download(@Main()) + +; IDE Options = SpiderBasic 3.10 (Windows - x86) +; Folding = - +; iOSAppOrientation = 0 +; AndroidAppCode = 0 +; AndroidAppOrientation = 0 +; EnableXP +; DPIAware +; CompileSourceDirectory \ No newline at end of file diff --git a/Example_Media.sb b/Example_Media.sb new file mode 100644 index 0000000..98dbe62 --- /dev/null +++ b/Example_Media.sb @@ -0,0 +1,102 @@ +; MaterialSB Example - Media and Tables +; This example demonstrates images, videos, and table components. + +IncludeFile "MaterialSB.sbi" + +EnableExplicit + +Procedure Main(Result) + Protected t, item + UseModule MaterialSB + + SetDarkTheme(#False) + + ; Navbar + Navbar(#Navbar_Shadow1 | #Navbar_Container) + NavbarAddLogo("Media") + + ; Images Section + Row(#Grid_Container) + Col(12) + Append("

Media Components

") + Append("
Images
") + CloseCurrentParent(2) + + Row(#Grid_Container) + + Col(12, 4) + Card("", #Card_Panel) + CardTitle(Header("Default Image", 5)) + item = CardContent() + AddClass(item, #Class_Centered) + Image("https://picsum.photos/300/200", "Sample image") + CloseCurrentParent(3) + + Col(12, 4) + Card("", #Card_Panel) + CardTitle(Header("Responsive Image", 5)) + item = CardContent() + AddClass(item, #Class_Centered) + Image("https://picsum.photos/300/200", "Responsive image", #Media_Responsive) + Append("

Scales with container

") + CloseCurrentParent(3) + + Col(12, 4) + Card("", #Card_Panel) + CardTitle(Header("Circle Image", 5)) + item = CardContent() + AddClass(item, #Class_Centered) + Image("https://picsum.photos/200/200", "Circle image", #Media_Circle | #Media_Responsive) + Append("

Great for avatars

") + CloseCurrentParent(3) + + CloseCurrentParent() + + ; Video Section + Row(#Grid_Container) + Col(12) + Append("
Videos
") + CloseCurrentParent(2) + + Row(#Grid_Container) + + Col(12) + Card("", #Card_Panel) + Append("

YouTube Video (Responsive)

") + Append("

Replace this URL with your own YouTube embed link.

") + YoutubeVideo("https://www.youtube.com/embed/jNQXAC9IVRw", #Media_Responsive) + CloseCurrentParent(2) + + Col(12) + Append("
Media Flags
") + t = Table("Flag", #Table_Striped | #Table_Centered) + TableAddColumn("Effect", t) + + TableAddItem("#Media_Default" + Chr(10) + "Default media with no styling", t) + TableAddItem("#Media_Responsive" + Chr(10) + "Scales with container", t) + TableAddItem("#Media_Circle" + Chr(10) + "Rounded", t) + TableAddItem("#Media_Controls" + Chr(10) + "For video", t) + CloseCurrentParent() + + Append("
") + Append("
") + CloseCurrentParent() + + AutoInit() + + UnuseModule MaterialSB + +EndProcedure + +MaterialSB::Download(@Main()) + +; IDE Options = SpiderBasic 3.10 (Windows - x86) +; CursorPosition = 70 +; FirstLine = 12 +; Folding = - +; iOSAppOrientation = 0 +; AndroidAppCode = 0 +; AndroidAppOrientation = 0 +; EnableXP +; DPIAware +; CompileSourceDirectory \ No newline at end of file diff --git a/Example_Modal.sb b/Example_Modal.sb new file mode 100644 index 0000000..4e5d0df --- /dev/null +++ b/Example_Modal.sb @@ -0,0 +1,179 @@ +; MaterialSB Example - Modals +; This example demonstrates different modal types and usage patterns. + +IncludeFile "MaterialSB.sbi" + +EnableExplicit +Global Modal1, Modal2, Modal3, Modal4 + + +Procedure OnConfirm() + Debug "User confirmed the action!" + MaterialSB::ModalClose(Modal4) +EndProcedure + +Procedure OnCancel() + Debug "User cancelled." +EndProcedure + +Procedure ButtonShowModal1() + MaterialSB::ModalOpen(Modal1) +EndProcedure + +Procedure ButtonShowModal2() + MaterialSB::ModalOpen(Modal2) +EndProcedure + +Procedure ButtonShowModal3() + MaterialSB::ModalOpen(Modal3) +EndProcedure + +Procedure ButtonShowModal4() + MaterialSB::ModalOpen(Modal4) +EndProcedure + +Procedure Main(Result) + Protected Button + + UseModule MaterialSB + + SetDarkTheme(#False) + + ; Navbar + Navbar(#Navbar_Shadow1 | #Navbar_Container) + NavbarAddLogo("Modals") + + ; ========================================= + ; Modal Definitions (must be outside main content flow) + ; ========================================= + + ; Modal 1 - Basic Modal + Modal1 = Modal() + ModalHeader("

Welcome!

") + ModalContent() + Append("

This is a basic modal dialog. You can put any content here including text, images, forms, and more.

") + Append("

Click the button below or outside the modal to close it.

") + CloseCurrentParent() + ModalFooter() + Button("Close", #Null, #Button_Text) + Button("Agree", #Null) + CloseCurrentParent() + + ; Modal 2 - Fixed Footer Modal + Modal2 = Modal(#Modal_FixedFooter) + ModalHeader("

Terms of Service

") + ModalContent() + Append("

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

") + Append("

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

") + Append("

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

") + Append("

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

") + Append("

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

") + Append("

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

") + Append("

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

") + Append("

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

") + Append("

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

") + Append("

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

") + Append("

Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.

") + Append("

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.

") + Append("

Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

") + CloseCurrentParent() + ModalFooter() + Button("Decline", #Null, #Button_Text) + Button("Accept", #Null) + CloseCurrentParent() + + ; Modal 3 - Bottom Sheet Modal + Modal3 = Modal(#Modal_BottomSheet) + ModalHeader("

Share this page

") + ModalContent() + Append("

Choose how you want to share:

") + Append("
") + Append("email
Email") + Append("content_copy
Copy Link") + Append("message
Message") + Append("more_horiz
More") + Append("
") + CloseCurrentParent() + ModalFooter() + Button("Cancel", @OnCancel()) + CloseCurrentParent() + + ; Modal 4 - Confirmation Dialog + Modal4 = Modal() + ModalHeader("

warning Delete Account?

") + ModalContent() + Append("

This action cannot be undone. All your data will be permanently deleted.

") + Append("

Are you sure you want to continue?

") + CloseCurrentParent() + ModalFooter() + Button("Cancel", @OnCancel()) + AddClass(Button("Confirm", @OnConfirm()), #Color_Red) + CloseCurrentParent() + + + ; ========================================= + ; Main content + ; ========================================= + + ; Header + Row(#Grid_Container) + Col(12) + Append("

Modal Dialogs

") + Append("

Modals are used for dialog boxes, confirmation messages, or displaying important content.

") + CloseCurrentParent(2) + + ; Modal Triggers + Row(#Grid_Container) + Col(12, 4) + + Card("
Basic Modal
", #Card_Panel) + Append("

A simple modal with content and footer.

") + Button("Open Modal", @ButtonShowModal1()) + CloseCurrentParent(2) + + Col(12, 4) + Card("
Fixed Footer
", #Card_Panel) + Append("

Modal with footer always visible.

") + Button("Open Modal", @ButtonShowModal2(), #Button_Tonal) + CloseCurrentParent(2) + + Col(12, 4) + Card("
Bottom Sheet
", #Card_Panel) + Append("

Modal slides up from the bottom.

") + Button("Open Modal", @ButtonShowModal3(), #Button_Outlined) + CloseCurrentParent(2) + + CloseCurrentParent() ; Close row + + ; Confirmation Dialog Example + Row(#Grid_Container) + Col(12) + + Card("
Confirmation Dialog
", #Card_Panel) + AddClass(GetCurrentParent(), #Color_Red + #Color_Lighten_4) + Append("

Use modals for important user decisions.

") + + Button = Button("Open Modal", @ButtonShowModal4()) + AddClass(Button, #Color_Red) + CloseCurrentParent(2) + + CloseCurrentParent() ; Close row + + + AutoInit() + + UnuseModule MaterialSB +EndProcedure + +MaterialSB::Download(@Main()) + +; IDE Options = SpiderBasic 3.10 (Windows - x86) +; CursorPosition = 53 +; FirstLine = 33 +; Folding = D- +; iOSAppOrientation = 0 +; AndroidAppCode = 0 +; AndroidAppOrientation = 0 +; EnableXP +; DPIAware +; CompileSourceDirectory \ No newline at end of file diff --git a/Example_Navbar.sb b/Example_Navbar.sb new file mode 100644 index 0000000..a5ca4f1 --- /dev/null +++ b/Example_Navbar.sb @@ -0,0 +1,94 @@ +; MaterialSB Example - Navbar +; This example demonstrates different navbar configurations. + +IncludeFile "MaterialSB.sbi" + +EnableExplicit + +Procedure Main(Result) + UseModule MaterialSB + + SetDarkTheme(#False) + + ; Main navbar with logo on left, links on right + Navbar(#Navbar_Shadow2 | #Navbar_Container) + NavbarAddLogo("MaterialSB", "", "https://lastlife.net/") + NavbarAddLink("Home", "#") + NavbarAddLink("Features", "#features") + NavbarAddLink("Examples", "#examples") + + ; Content + Row(#Grid_Container) + Col(12) + + Append("

Navbar Component

") + Append("

The navbar automatically creates a responsive menu. On smaller screens, links collapse into a dropdown menu.

") + + Append("
Navbar Flags
") + + Protected t = Table("Flag", #Table_Striped | #Table_Highlight) + TableAddColumn("Description", t) + + TableAddItem("#Navbar_Default" + Chr(10) + "Standard navbar with no special styling", t) + TableAddItem("#Navbar_Align_Right" + Chr(10) + "Aligns the logo to the right", t) + TableAddItem("#Navbar_Align_Center" + Chr(10) + "Centers the logo", t) + TableAddItem("#Navbar_Bottom" + Chr(10) + "Positions navbar at the bottom of the viewport", t) + TableAddItem("#Navbar_Shadow1" + Chr(10) + "Light shadow (z-depth-1)", t) + TableAddItem("#Navbar_Shadow2" + Chr(10) + "Medium shadow (z-depth-2)", t) + TableAddItem("#Navbar_Shadow3" + Chr(10) + "Heavy shadow (z-depth-5)", t) + TableAddItem("#Navbar_Container" + Chr(10) + "Centers content in a container", t) + + CloseCurrentParent() + + ; Logo alignment examples + Col(12) + Append("
Logo Alignment
") + Append("

The logo can be positioned left (default), center, or right using flags in NavbarAddLogo():

") + + Append("; Logo on the left (default)" + "
") + Append(~"NavbarAddLogo(\"Left Logo\")" + "
") + Append("
") + Append("; Logo in the center" + "
") + Append(~"NavbarAddLogo(\"Centered\", \"\", \"\", #Navbar_Align_Center)" + "
") + Append("
") + Append("; Logo on the right" + "
") + Append(~"NavbarAddLogo(\"Right Logo\", \"\", \"\", #Navbar_Align_Right)") + + CloseCurrentParent() + Append("
") + + ; Tips + Col(12) + Card() + AddClass(GetCurrentParent(), #Color_DeepPurple + #Color_Lighten_3) + CardContent() + CardTitle("
Tips
") + Append("") + CloseCurrentParent(2) + + Append("
") + Append("
") + + CloseCurrentParent() + + AutoInit() + + UnuseModule MaterialSB +EndProcedure + +MaterialSB::Download(@Main()) + +; IDE Options = SpiderBasic 3.10 (Windows - x86) +; CursorPosition = 76 +; Folding = - +; iOSAppOrientation = 0 +; AndroidAppCode = 0 +; AndroidAppOrientation = 0 +; EnableXP +; DPIAware +; CompileSourceDirectory \ No newline at end of file diff --git a/Example_Sidenav.sb b/Example_Sidenav.sb new file mode 100644 index 0000000..62278b5 --- /dev/null +++ b/Example_Sidenav.sb @@ -0,0 +1,64 @@ +; MaterialSB Example - Sidenav +; This example demonstrates the sidenav component. + +IncludeFile "MaterialSB.sbi" + +EnableExplicit + +Procedure Main(Result) + Protected t, sidenav + UseModule MaterialSB + + SetDarkTheme(#False) + + ; Create navbar with sidenav trigger + Navbar(#Navbar_Shadow1 | #Navbar_Container) + NavbarAddSidenavTrigger("main-sidenav") + NavbarAddLogo("Sidenav") + + ; Create sidenav (must be outside navbar per Materialize rules) + sidenav = Sidenav() + SetAttribute(sidenav, "id", "main-sidenav") + SidenavAddUserView("John Doe", "john@example.com", "", "") + SidenavAddLink("Home", "#", "home") + SidenavAddLink("Settings", "#settings", "settings") + SidenavAddDivider() + SidenavAddSubheader("Categories") + SidenavAddLink("Music", "#music", "music_note") + SidenavAddLink("Photos", "#photos", "photo") + Init(sidenav, #Null) + + ; Content + Row(#Grid_Container) + Col(12) + Append("

Sidenav Component

") + Append("

The sidenav provides a slide-out navigation panel. On mobile devices, click the hamburger menu icon to open it.

") + + Append("
Sidenav Flags
") + + t = Table("Flag", #Table_Striped | #Table_Highlight) + TableAddColumn("Description", t) + + TableAddItem("#Sidenav_Default" + Chr(10) + "Standard sidenav", t) + TableAddItem("#Sidenav_Fixed" + Chr(10) + "Always visible on large screens", t) + TableAddItem("#Sidenav_Right" + Chr(10) + "Opens from the right side", t) + TableAddItem("#Sidenav_CloseOnClick" + Chr(10) + "Closes when a link is clicked", t) + + Append("
") + + Append("
Available Functions
") + Append("") + + CloseCurrentParent(2) + + AutoInit() + UnuseModule MaterialSB +EndProcedure + +MaterialSB::Download(@Main()) \ No newline at end of file diff --git a/Example_Table.sb b/Example_Table.sb new file mode 100644 index 0000000..af993fd --- /dev/null +++ b/Example_Table.sb @@ -0,0 +1,87 @@ +; MaterialSB Example - Tables +; This example demonstrates the table component. + +IncludeFile "MaterialSB.sbi" + +EnableExplicit + +Procedure Main(Result) + Protected t, item + UseModule MaterialSB + + SetDarkTheme(#False) + + ; Navbar + Navbar(#Navbar_Shadow1 | #Navbar_Container) + NavbarAddLogo("Tables") + + ; Tables Section + Row(#Grid_Container) + Col(12) + Append("

Table Component

") + Append("

Tables help organize data. MaterialSB supports striped, highlighted, centered, and responsive tables.

") + CloseCurrentParent(2) + + ; Basic Table + Row(#Grid_Container) + Col(12, 6) + Append("
Basic Table
") + + t = Table("Name", #Table_Default) + TableAddColumn("Age", t) + TableAddColumn("Country", t) + + TableAddItem("Alice" + Chr(10) + "28" + Chr(10) + "France", t) + TableAddItem("Bob" + Chr(10) + "34" + Chr(10) + "Germany", t) + TableAddItem("Charlie" + Chr(10) + "22" + Chr(10) + "UK", t) + + CloseCurrentParent() + + ; Striped and Highlighted Table + Col(12, 6) + Append("
Striped & Highlighted
") + + t = Table("Product", #Table_Striped | #Table_Highlight) + TableAddColumn("Price", t) + TableAddColumn("Stock", t) + + TableAddItem("Widget A" + Chr(10) + "$19.99" + Chr(10) + "150", t) + TableAddItem("Widget B" + Chr(10) + "$29.99" + Chr(10) + "75", t) + TableAddItem("Widget C" + Chr(10) + "$9.99" + Chr(10) + "300", t) + TableAddItem("Widget D" + Chr(10) + "$49.99" + Chr(10) + "25", t) + + CloseCurrentParent(2) + + ; Table flags reference + Row(#Grid_Container) + Col(12) + Append("
Table Flags
") + + t = Table("Flag", #Table_Striped | #Table_Centered) + TableAddColumn("Effect", t) + + TableAddItem("#Table_Default" + Chr(10) + "Plain table with no styling", t) + TableAddItem("#Table_Striped" + Chr(10) + "Alternating row colors", t) + TableAddItem("#Table_Highlight" + Chr(10) + "Highlight row on hover", t) + TableAddItem("#Table_Centered" + Chr(10) + "Center-align all content", t) + TableAddItem("#Table_Responsive" + Chr(10) + "Horizontal scroll on small screens", t) + + CloseCurrentParent(2) + + AutoInit() + + UnuseModule MaterialSB + +EndProcedure + +MaterialSB::Download(@Main()) + +; IDE Options = SpiderBasic 3.10 (Windows - x86) +; CursorPosition = 1 +; Folding = - +; iOSAppOrientation = 0 +; AndroidAppCode = 0 +; AndroidAppOrientation = 0 +; EnableXP +; DPIAware +; CompileSourceDirectory \ No newline at end of file diff --git a/Example_Toast.sb b/Example_Toast.sb new file mode 100644 index 0000000..5623042 --- /dev/null +++ b/Example_Toast.sb @@ -0,0 +1,83 @@ +; MaterialSB Example - Toast +; This example demonstrates the toast notification system + +IncludeFile "MaterialSB.sbi" + +EnableExplicit + +Procedure ShowBasicToast() + MaterialSB::Toast("Hello! This is a simple toast.") +EndProcedure + +Procedure ShowRoundedToast() + MaterialSB::Toast("This toast has rounded corners.", 4000, MaterialSB::#Toast_Rounded) +EndProcedure + +Procedure ShowColoredToast() + MaterialSB::Toast("Success! Operation completed.", 4000, MaterialSB::#Toast_Default, MaterialSB::#Color_Green) +EndProcedure + +Procedure ShowLongToast() + MaterialSB::Toast("This toast will stay visible for 8 seconds.", 8000) +EndProcedure + +Procedure DismissAll() + MaterialSB::ToastDismissAll() +EndProcedure + +Procedure Main(Result) + Protected t + UseModule MaterialSB + + SetDarkTheme(#False) + + ; Navbar + Navbar(#Navbar_Shadow1 | #Navbar_Container) + NavbarAddLogo("Toasts") + + Row(#Grid_Container) + Col(12) + Append("

Toast Component

") + Append("

Toasts provide brief messages about app processes at the bottom of the screen.

") + + Append("
Toast Examples
") + + Button("Basic Toast", @ShowBasicToast()) + Button("Rounded Toast", @ShowRoundedToast(), #Button_Tonal) + Button("Colored Toast", @ShowColoredToast(), #Button_Outlined) + Button("Long Duration (8s)", @ShowLongToast(), #Button_Text) + AddClass(Button("Dismiss All", @DismissAll()), #Color_Red) + CloseCurrentParent() + + Col(12) + Append("

") + Append("
Toast Flags
") + + t = Table("Flag", #Table_Striped | #Table_Highlight) + TableAddColumn("Description", t) + + TableAddItem("#Toast_Default" + Chr(10) + "Standard toast notification", t) + TableAddItem("#Toast_Rounded" + Chr(10) + "Toast with rounded corners", t) + + Append("
") + Append("
Usage
") + Append(~"
Toast(Text.s, Duration = 4000, Flags = #Toast_Default, Color.s = \"\")
") + Append("

The Duration parameter specifies how long the toast is displayed in milliseconds.

") + + CloseCurrentParent(2) + + AutoInit() + + UnuseModule MaterialSB +EndProcedure + +MaterialSB::Download(@Main()) +; IDE Options = SpiderBasic 3.10 (Windows - x86) +; CursorPosition = 7 +; Folding = -- +; iOSAppOrientation = 0 +; AndroidAppCode = 0 +; AndroidAppOrientation = 0 +; EnableXP +; DPIAware +; CompileSourceDirectory \ No newline at end of file diff --git a/LocalFiles/CSS/material-icons.css b/LocalFiles/CSS/material-icons.css new file mode 100644 index 0000000..eb73204 --- /dev/null +++ b/LocalFiles/CSS/material-icons.css @@ -0,0 +1,35 @@ +@font-face { + font-family: 'Material Icons'; + font-style: normal; + font-weight: 400; + src: local('Material Icons'), + local('MaterialIcons-Regular'), + url(LocalFiles/Font/MaterialIcons-Regular.woff2) format('woff2'), + url(LocalFiles/Font/MaterialIcons-Regular.woff) format('woff'), + url(LocalFiles/Font/MaterialIcons-Regular.ttf) format('truetype'); +} + +.material-icons { + font-family: 'Material Icons'; + font-weight: normal; + font-style: normal; + font-size: 24px; /* Preferred icon size */ + display: inline-block; + line-height: 1; + text-transform: none; + letter-spacing: normal; + word-wrap: normal; + white-space: nowrap; + direction: ltr; + + /* Support for all WebKit browsers. */ + -webkit-font-smoothing: antialiased; + /* Support for Safari and Chrome. */ + text-rendering: optimizeLegibility; + + /* Support for Firefox. */ + -moz-osx-font-smoothing: grayscale; + + /* Support for IE. */ + font-feature-settings: 'liga'; +} \ No newline at end of file diff --git a/LocalFiles/CSS/materialize.min.css b/LocalFiles/CSS/materialize.min.css new file mode 100644 index 0000000..5ba04e3 --- /dev/null +++ b/LocalFiles/CSS/materialize.min.css @@ -0,0 +1,6 @@ +/*! +* Materialize v2.2.1 (https://materializeweb.com) +* Copyright 2014-2024 Materialize +* MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE) +*/ +:root{--md-source: #006495;--md-ref-palette-primary0: #000000;--md-ref-palette-primary10: #001e30;--md-ref-palette-primary20: #003450;--md-ref-palette-primary25: #003f60;--md-ref-palette-primary30: #004b71;--md-ref-palette-primary35: #005783;--md-ref-palette-primary40: #006495;--md-ref-palette-primary50: #0f7eb8;--md-ref-palette-primary60: #3d98d4;--md-ref-palette-primary70: #5db3f0;--md-ref-palette-primary80: #8fcdff;--md-ref-palette-primary90: #cbe6ff;--md-ref-palette-primary95: #e6f2ff;--md-ref-palette-primary98: #f7f9ff;--md-ref-palette-primary99: #fcfcff;--md-ref-palette-primary100: #ffffff;--md-ref-palette-secondary0: #000000;--md-ref-palette-secondary10: #0d1d29;--md-ref-palette-secondary20: #22323f;--md-ref-palette-secondary25: #2d3d4b;--md-ref-palette-secondary30: #394856;--md-ref-palette-secondary35: #445462;--md-ref-palette-secondary40: #50606f;--md-ref-palette-secondary50: #697988;--md-ref-palette-secondary60: #8293a2;--md-ref-palette-secondary70: #9dadbd;--md-ref-palette-secondary80: #b8c8d9;--md-ref-palette-secondary90: #d4e4f6;--md-ref-palette-secondary95: #e6f2ff;--md-ref-palette-secondary98: #f7f9ff;--md-ref-palette-secondary99: #fcfcff;--md-ref-palette-secondary100: #ffffff;--md-ref-palette-tertiary0: #000000;--md-ref-palette-tertiary10: #211634;--md-ref-palette-tertiary20: #362b4a;--md-ref-palette-tertiary25: #423656;--md-ref-palette-tertiary30: #4d4162;--md-ref-palette-tertiary35: #594c6e;--md-ref-palette-tertiary40: #66587b;--md-ref-palette-tertiary50: #7f7195;--md-ref-palette-tertiary60: #998ab0;--md-ref-palette-tertiary70: #b4a4cb;--md-ref-palette-tertiary80: #d0bfe7;--md-ref-palette-tertiary90: #ecdcff;--md-ref-palette-tertiary95: #f7edff;--md-ref-palette-tertiary98: #fef7ff;--md-ref-palette-tertiary99: #fffbff;--md-ref-palette-tertiary100: #ffffff;--md-ref-palette-neutral0: #000000;--md-ref-palette-neutral10: #1a1c1e;--md-ref-palette-neutral20: #2e3133;--md-ref-palette-neutral25: #3a3c3e;--md-ref-palette-neutral30: #454749;--md-ref-palette-neutral35: #515255;--md-ref-palette-neutral40: #5d5e61;--md-ref-palette-neutral50: #76777a;--md-ref-palette-neutral60: #8f9194;--md-ref-palette-neutral70: #aaabae;--md-ref-palette-neutral80: #c6c6c9;--md-ref-palette-neutral90: #e2e2e5;--md-ref-palette-neutral95: #f0f0f3;--md-ref-palette-neutral98: #f9f9fc;--md-ref-palette-neutral99: #fcfcff;--md-ref-palette-neutral100: #ffffff;--md-ref-palette-neutral-variant0: #000000;--md-ref-palette-neutral-variant10: #161c22;--md-ref-palette-neutral-variant20: #2b3137;--md-ref-palette-neutral-variant25: #363c42;--md-ref-palette-neutral-variant30: #41474d;--md-ref-palette-neutral-variant35: #4d5359;--md-ref-palette-neutral-variant40: #595f65;--md-ref-palette-neutral-variant50: #72787e;--md-ref-palette-neutral-variant60: #8b9198;--md-ref-palette-neutral-variant70: #a6acb3;--md-ref-palette-neutral-variant80: #c1c7ce;--md-ref-palette-neutral-variant90: #dee3ea;--md-ref-palette-neutral-variant95: #ecf1f9;--md-ref-palette-neutral-variant98: #f7f9ff;--md-ref-palette-neutral-variant99: #fcfcff;--md-ref-palette-neutral-variant100: #ffffff;--md-ref-palette-error0: #000000;--md-ref-palette-error10: #410002;--md-ref-palette-error20: #690005;--md-ref-palette-error25: #7e0007;--md-ref-palette-error30: #93000a;--md-ref-palette-error35: #a80710;--md-ref-palette-error40: #ba1a1a;--md-ref-palette-error50: #de3730;--md-ref-palette-error60: #ff5449;--md-ref-palette-error70: #ff897d;--md-ref-palette-error80: #ffb4ab;--md-ref-palette-error90: #ffdad6;--md-ref-palette-error95: #ffedea;--md-ref-palette-error98: #fff8f7;--md-ref-palette-error99: #fffbff;--md-ref-palette-error100: #ffffff;--md-sys-color-primary-light: #006495;--md-sys-color-on-primary-light: #ffffff;--md-sys-color-primary-container-light: #cbe6ff;--md-sys-color-on-primary-container-light: #001e30;--md-sys-color-secondary-light: #50606f;--md-sys-color-on-secondary-light: #ffffff;--md-sys-color-secondary-container-light: #d4e4f6;--md-sys-color-on-secondary-container-light: #0d1d29;--md-sys-color-tertiary-light: #66587b;--md-sys-color-on-tertiary-light: #ffffff;--md-sys-color-tertiary-container-light: #ecdcff;--md-sys-color-on-tertiary-container-light: #211634;--md-sys-color-error-light: #ba1a1a;--md-sys-color-error-container-light: #ffdad6;--md-sys-color-on-error-light: #ffffff;--md-sys-color-on-error-container-light: #410002;--md-sys-color-background-light: #fcfcff;--md-sys-color-on-background-light: #1a1c1e;--md-sys-color-surface-light: #fcfcff;--md-sys-color-on-surface-light: #1a1c1e;--md-sys-color-surface-variant-light: #dee3ea;--md-sys-color-on-surface-variant-light: #41474d;--md-sys-color-outline-light: #72787e;--md-sys-color-inverse-on-surface-light: #f0f0f3;--md-sys-color-inverse-surface-light: #2e3133;--md-sys-color-inverse-primary-light: #8fcdff;--md-sys-color-shadow-light: #000000;--md-sys-color-surface-tint-light: #006495;--md-sys-color-outline-variant-light: #c1c7ce;--md-sys-color-scrim-light: #000000;--md-sys-color-primary-dark: #8fcdff;--md-sys-color-on-primary-dark: #003450;--md-sys-color-primary-container-dark: #004b71;--md-sys-color-on-primary-container-dark: #cbe6ff;--md-sys-color-secondary-dark: #b8c8d9;--md-sys-color-on-secondary-dark: #22323f;--md-sys-color-secondary-container-dark: #394856;--md-sys-color-on-secondary-container-dark: #d4e4f6;--md-sys-color-tertiary-dark: #d0bfe7;--md-sys-color-on-tertiary-dark: #362b4a;--md-sys-color-tertiary-container-dark: #4d4162;--md-sys-color-on-tertiary-container-dark: #ecdcff;--md-sys-color-error-dark: #ffb4ab;--md-sys-color-error-container-dark: #93000a;--md-sys-color-on-error-dark: #690005;--md-sys-color-on-error-container-dark: #ffdad6;--md-sys-color-background-dark: #1a1c1e;--md-sys-color-on-background-dark: #e2e2e5;--md-sys-color-surface-dark: #1a1c1e;--md-sys-color-on-surface-dark: #e2e2e5;--md-sys-color-surface-variant-dark: #41474d;--md-sys-color-on-surface-variant-dark: #c1c7ce;--md-sys-color-outline-dark: #8b9198;--md-sys-color-inverse-on-surface-dark: #1a1c1e;--md-sys-color-inverse-surface-dark: #e2e2e5;--md-sys-color-inverse-primary-dark: #006495;--md-sys-color-shadow-dark: #000000;--md-sys-color-surface-tint-dark: #8fcdff;--md-sys-color-outline-variant-dark: #41474d;--md-sys-color-scrim-dark: #000000;--md-sys-typescale-display-large-font-family-name: Roboto;--md-sys-typescale-display-large-font-family-style: Regular;--md-sys-typescale-display-large-font-weight: 400px;--md-sys-typescale-display-large-font-size: 57px;--md-sys-typescale-display-large-line-height: 64px;--md-sys-typescale-display-large-letter-spacing: -0.25px;--md-sys-typescale-display-medium-font-family-name: Roboto;--md-sys-typescale-display-medium-font-family-style: Regular;--md-sys-typescale-display-medium-font-weight: 400px;--md-sys-typescale-display-medium-font-size: 45px;--md-sys-typescale-display-medium-line-height: 52px;--md-sys-typescale-display-medium-letter-spacing: 0px;--md-sys-typescale-display-small-font-family-name: Roboto;--md-sys-typescale-display-small-font-family-style: Regular;--md-sys-typescale-display-small-font-weight: 400px;--md-sys-typescale-display-small-font-size: 36px;--md-sys-typescale-display-small-line-height: 44px;--md-sys-typescale-display-small-letter-spacing: 0px;--md-sys-typescale-headline-large-font-family-name: Roboto;--md-sys-typescale-headline-large-font-family-style: Regular;--md-sys-typescale-headline-large-font-weight: 400px;--md-sys-typescale-headline-large-font-size: 32px;--md-sys-typescale-headline-large-line-height: 40px;--md-sys-typescale-headline-large-letter-spacing: 0px;--md-sys-typescale-headline-medium-font-family-name: Roboto;--md-sys-typescale-headline-medium-font-family-style: Regular;--md-sys-typescale-headline-medium-font-weight: 400px;--md-sys-typescale-headline-medium-font-size: 28px;--md-sys-typescale-headline-medium-line-height: 36px;--md-sys-typescale-headline-medium-letter-spacing: 0px;--md-sys-typescale-headline-small-font-family-name: Roboto;--md-sys-typescale-headline-small-font-family-style: Regular;--md-sys-typescale-headline-small-font-weight: 400px;--md-sys-typescale-headline-small-font-size: 24px;--md-sys-typescale-headline-small-line-height: 32px;--md-sys-typescale-headline-small-letter-spacing: 0px;--md-sys-typescale-body-large-font-family-name: Roboto;--md-sys-typescale-body-large-font-family-style: Regular;--md-sys-typescale-body-large-font-weight: 400px;--md-sys-typescale-body-large-font-size: 16px;--md-sys-typescale-body-large-line-height: 24px;--md-sys-typescale-body-large-letter-spacing: 0.50px;--md-sys-typescale-body-medium-font-family-name: Roboto;--md-sys-typescale-body-medium-font-family-style: Regular;--md-sys-typescale-body-medium-font-weight: 400px;--md-sys-typescale-body-medium-font-size: 14px;--md-sys-typescale-body-medium-line-height: 20px;--md-sys-typescale-body-medium-letter-spacing: 0.25px;--md-sys-typescale-body-small-font-family-name: Roboto;--md-sys-typescale-body-small-font-family-style: Regular;--md-sys-typescale-body-small-font-weight: 400px;--md-sys-typescale-body-small-font-size: 12px;--md-sys-typescale-body-small-line-height: 16px;--md-sys-typescale-body-small-letter-spacing: 0.40px;--md-sys-typescale-label-large-font-family-name: Roboto;--md-sys-typescale-label-large-font-family-style: Medium;--md-sys-typescale-label-large-font-weight: 500px;--md-sys-typescale-label-large-font-size: 14px;--md-sys-typescale-label-large-line-height: 20px;--md-sys-typescale-label-large-letter-spacing: 0.10px;--md-sys-typescale-label-medium-font-family-name: Roboto;--md-sys-typescale-label-medium-font-family-style: Medium;--md-sys-typescale-label-medium-font-weight: 500px;--md-sys-typescale-label-medium-font-size: 12px;--md-sys-typescale-label-medium-line-height: 16px;--md-sys-typescale-label-medium-letter-spacing: 0.50px;--md-sys-typescale-label-small-font-family-name: Roboto;--md-sys-typescale-label-small-font-family-style: Medium;--md-sys-typescale-label-small-font-weight: 500px;--md-sys-typescale-label-small-font-size: 11px;--md-sys-typescale-label-small-line-height: 16px;--md-sys-typescale-label-small-letter-spacing: 0.50px;--md-sys-typescale-title-large-font-family-name: Roboto;--md-sys-typescale-title-large-font-family-style: Regular;--md-sys-typescale-title-large-font-weight: 400px;--md-sys-typescale-title-large-font-size: 22px;--md-sys-typescale-title-large-line-height: 28px;--md-sys-typescale-title-large-letter-spacing: 0px;--md-sys-typescale-title-medium-font-family-name: Roboto;--md-sys-typescale-title-medium-font-family-style: Medium;--md-sys-typescale-title-medium-font-weight: 500px;--md-sys-typescale-title-medium-font-size: 16px;--md-sys-typescale-title-medium-line-height: 24px;--md-sys-typescale-title-medium-letter-spacing: 0.15px;--md-sys-typescale-title-small-font-family-name: Roboto;--md-sys-typescale-title-small-font-family-style: Medium;--md-sys-typescale-title-small-font-weight: 500px;--md-sys-typescale-title-small-font-size: 14px;--md-sys-typescale-title-small-line-height: 20px;--md-sys-typescale-title-small-letter-spacing: 0.10px}:root,:host{color-scheme:light;--md-sys-color-primary: var(--md-sys-color-primary-light);--md-sys-color-on-primary: var(--md-sys-color-on-primary-light);--md-sys-color-primary-container: var(--md-sys-color-primary-container-light);--md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);--md-sys-color-secondary: var(--md-sys-color-secondary-light);--md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);--md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);--md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);--md-sys-color-tertiary: var(--md-sys-color-tertiary-light);--md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);--md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light);--md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);--md-sys-color-error: var(--md-sys-color-error-light);--md-sys-color-on-error: var(--md-sys-color-on-error-light);--md-sys-color-error-container: var(--md-sys-color-error-container-light);--md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);--md-sys-color-outline: var(--md-sys-color-outline-light);--md-sys-color-background: var(--md-sys-color-background-light);--md-sys-color-on-background: var(--md-sys-color-on-background-light);--md-sys-color-surface: var(--md-sys-color-surface-light);--md-sys-color-on-surface: var(--md-sys-color-on-surface-light);--md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light);--md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);--md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);--md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light);--md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light);--md-sys-color-shadow: var(--md-sys-color-shadow-light);--md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light);--md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light);--md-sys-color-scrim: var(--md-sys-color-scrim-light)}@media(prefers-color-scheme: dark){:root,:host{color-scheme:dark;--md-sys-color-primary: var(--md-sys-color-primary-dark);--md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);--md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);--md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);--md-sys-color-secondary: var(--md-sys-color-secondary-dark);--md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark);--md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark);--md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);--md-sys-color-tertiary: var(--md-sys-color-tertiary-dark);--md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark);--md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark);--md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark);--md-sys-color-error: var(--md-sys-color-error-dark);--md-sys-color-on-error: var(--md-sys-color-on-error-dark);--md-sys-color-error-container: var(--md-sys-color-error-container-dark);--md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark);--md-sys-color-outline: var(--md-sys-color-outline-dark);--md-sys-color-background: var(--md-sys-color-background-dark);--md-sys-color-on-background: var(--md-sys-color-on-background-dark);--md-sys-color-surface: var(--md-sys-color-surface-dark);--md-sys-color-on-surface: var(--md-sys-color-on-surface-dark);--md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark);--md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark);--md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark);--md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark);--md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark);--md-sys-color-shadow: var(--md-sys-color-shadow-dark);--md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark);--md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark);--md-sys-color-scrim: var(--md-sys-color-scrim-dark)}}:root[theme=light]{color-scheme:light;--md-sys-color-primary: var(--md-sys-color-primary-light);--md-sys-color-on-primary: var(--md-sys-color-on-primary-light);--md-sys-color-primary-container: var(--md-sys-color-primary-container-light);--md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);--md-sys-color-secondary: var(--md-sys-color-secondary-light);--md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);--md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);--md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);--md-sys-color-tertiary: var(--md-sys-color-tertiary-light);--md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);--md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light);--md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);--md-sys-color-error: var(--md-sys-color-error-light);--md-sys-color-on-error: var(--md-sys-color-on-error-light);--md-sys-color-error-container: var(--md-sys-color-error-container-light);--md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);--md-sys-color-outline: var(--md-sys-color-outline-light);--md-sys-color-background: var(--md-sys-color-background-light);--md-sys-color-on-background: var(--md-sys-color-on-background-light);--md-sys-color-surface: var(--md-sys-color-surface-light);--md-sys-color-on-surface: var(--md-sys-color-on-surface-light);--md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light);--md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);--md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);--md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light);--md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light);--md-sys-color-shadow: var(--md-sys-color-shadow-light);--md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light);--md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light);--md-sys-color-scrim: var(--md-sys-color-scrim-light)}:root[theme=dark]{color-scheme:dark;--md-sys-color-primary: var(--md-sys-color-primary-dark);--md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);--md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);--md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);--md-sys-color-secondary: var(--md-sys-color-secondary-dark);--md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark);--md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark);--md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);--md-sys-color-tertiary: var(--md-sys-color-tertiary-dark);--md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark);--md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark);--md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark);--md-sys-color-error: var(--md-sys-color-error-dark);--md-sys-color-on-error: var(--md-sys-color-on-error-dark);--md-sys-color-error-container: var(--md-sys-color-error-container-dark);--md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark);--md-sys-color-outline: var(--md-sys-color-outline-dark);--md-sys-color-background: var(--md-sys-color-background-dark);--md-sys-color-on-background: var(--md-sys-color-on-background-dark);--md-sys-color-surface: var(--md-sys-color-surface-dark);--md-sys-color-on-surface: var(--md-sys-color-on-surface-dark);--md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark);--md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark);--md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark);--md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark);--md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark);--md-sys-color-shadow: var(--md-sys-color-shadow-dark);--md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark);--md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark);--md-sys-color-scrim: var(--md-sys-color-scrim-dark)}.primary{background-color:var(--md-sys-color-primary)}.primary-text{color:var(--md-sys-color-primary)}.on-primary{background-color:var(--md-sys-color-on-primary)}.on-primary-text{color:var(--md-sys-color-on-primary)}.primary-container{background-color:var(--md-sys-color-primary-container)}.primary-container-text{color:var(--md-sys-color-primary-container)}.on-primary-container{background-color:var(--md-sys-color-on-primary-container)}.on-primary-container-text{color:var(--md-sys-color-on-primary-container)}.secondary{background-color:var(--md-sys-color-secondary)}.secondary-text{color:var(--md-sys-color-secondary)}.on-secondary{background-color:var(--md-sys-color-on-secondary)}.on-secondary-text{color:var(--md-sys-color-on-secondary)}.secondary-container{background-color:var(--md-sys-color-secondary-container)}.secondary-container-text{color:var(--md-sys-color-secondary-container)}.on-secondary-container{background-color:var(--md-sys-color-on-secondary-container)}.on-secondary-container-text{color:var(--md-sys-color-on-secondary-container)}.tertiary{background-color:var(--md-sys-color-tertiary)}.tertiary-text{color:var(--md-sys-color-tertiary)}.on-tertiary{background-color:var(--md-sys-color-on-tertiary)}.on-tertiary-text{color:var(--md-sys-color-on-tertiary)}.tertiary-container{background-color:var(--md-sys-color-tertiary-container)}.tertiary-container-text{color:var(--md-sys-color-tertiary-container)}.on-tertiary-container{background-color:var(--md-sys-color-on-tertiary-container)}.on-tertiary-container-text{color:var(--md-sys-color-on-tertiary-container)}.error{background-color:var(--md-sys-color-error)}.error-text{color:var(--md-sys-color-error)}.on-error{background-color:var(--md-sys-color-on-error)}.on-error-text{color:var(--md-sys-color-on-error)}.error-container{background-color:var(--md-sys-color-error-container)}.error-container-text{color:var(--md-sys-color-error-container)}.on-error-container{background-color:var(--md-sys-color-on-error-container)}.on-error-container-text{color:var(--md-sys-color-on-error-container)}.background{background-color:var(--md-sys-color-background)}.background-text{color:var(--md-sys-color-background)}.on-background{background-color:var(--md-sys-color-on-background)}.on-background-text{color:var(--md-sys-color-on-background)}.surface,.switch label input[type=checkbox]:checked+.lever:after{background-color:var(--md-sys-color-surface)}.surface-text{color:var(--md-sys-color-surface)}.on-surface{background-color:var(--md-sys-color-on-surface)}.on-surface-text{color:var(--md-sys-color-on-surface)}.surface-variant,.progress,input[type=range]::-moz-range-track,input[type=range]::-webkit-slider-runnable-track{background-color:var(--md-sys-color-surface-variant)}.surface-variant-text{color:var(--md-sys-color-surface-variant)}.on-surface-variant{background-color:var(--md-sys-color-on-surface-variant)}.on-surface-variant-text,.chip>.material-icons{color:var(--md-sys-color-on-surface-variant)}.outline,.switch label .lever:after{background-color:var(--md-sys-color-outline)}.outline-text{color:var(--md-sys-color-outline)}.inverse-on-surface{background-color:var(--md-sys-color-inverse-on-surface)}.inverse-on-surface-text{color:var(--md-sys-color-inverse-on-surface)}.inverse-surface{background-color:var(--md-sys-color-inverse-surface)}.inverse-surface-text{color:var(--md-sys-color-inverse-surface)}.inverse-primary{background-color:var(--md-sys-color-inverse-primary)}.inverse-primary-text{color:var(--md-sys-color-inverse-primary)}.shadow{background-color:var(--md-sys-color-shadow)}.shadow-text{color:var(--md-sys-color-shadow)}.surface-tint{background-color:var(--md-sys-color-surface-tint)}.surface-tint-text{color:var(--md-sys-color-surface-tint)}.outline-variant{background-color:var(--md-sys-color-outline-variant)}.outline-variant-text{color:var(--md-sys-color-outline-variant)}.scrim{background-color:var(--md-sys-color-scrim)}.scrim-text{color:var(--md-sys-color-scrim)}.display-large{font-family:var(--md-sys-typescale-display-large-font-family-name);font-style:var(--md-sys-typescale-display-large-font-family-style);font-weight:var(--md-sys-typescale-display-large-font-weight);font-size:var(--md-sys-typescale-display-large-font-size);letter-spacing:var(--md-sys-typescale-display-large-tracking);line-height:var(--md-sys-typescale-display-large-height);text-transform:var(--md-sys-typescale-display-large-text-transform);text-decoration:var(--md-sys-typescale-display-large-text-decoration)}.display-medium{font-family:var(--md-sys-typescale-display-medium-font-family-name);font-style:var(--md-sys-typescale-display-medium-font-family-style);font-weight:var(--md-sys-typescale-display-medium-font-weight);font-size:var(--md-sys-typescale-display-medium-font-size);letter-spacing:var(--md-sys-typescale-display-medium-tracking);line-height:var(--md-sys-typescale-display-medium-height);text-transform:var(--md-sys-typescale-display-medium-text-transform);text-decoration:var(--md-sys-typescale-display-medium-text-decoration)}.display-small{font-family:var(--md-sys-typescale-display-small-font-family-name);font-style:var(--md-sys-typescale-display-small-font-family-style);font-weight:var(--md-sys-typescale-display-small-font-weight);font-size:var(--md-sys-typescale-display-small-font-size);letter-spacing:var(--md-sys-typescale-display-small-tracking);line-height:var(--md-sys-typescale-display-small-height);text-transform:var(--md-sys-typescale-display-small-text-transform);text-decoration:var(--md-sys-typescale-display-small-text-decoration)}.headline-large{font-family:var(--md-sys-typescale-headline-large-font-family-name);font-style:var(--md-sys-typescale-headline-large-font-family-style);font-weight:var(--md-sys-typescale-headline-large-font-weight);font-size:var(--md-sys-typescale-headline-large-font-size);letter-spacing:var(--md-sys-typescale-headline-large-tracking);line-height:var(--md-sys-typescale-headline-large-height);text-transform:var(--md-sys-typescale-headline-large-text-transform);text-decoration:var(--md-sys-typescale-headline-large-text-decoration)}.headline-medium{font-family:var(--md-sys-typescale-headline-medium-font-family-name);font-style:var(--md-sys-typescale-headline-medium-font-family-style);font-weight:var(--md-sys-typescale-headline-medium-font-weight);font-size:var(--md-sys-typescale-headline-medium-font-size);letter-spacing:var(--md-sys-typescale-headline-medium-tracking);line-height:var(--md-sys-typescale-headline-medium-height);text-transform:var(--md-sys-typescale-headline-medium-text-transform);text-decoration:var(--md-sys-typescale-headline-medium-text-decoration)}.headline-small{font-family:var(--md-sys-typescale-headline-small-font-family-name);font-style:var(--md-sys-typescale-headline-small-font-family-style);font-weight:var(--md-sys-typescale-headline-small-font-weight);font-size:var(--md-sys-typescale-headline-small-font-size);letter-spacing:var(--md-sys-typescale-headline-small-tracking);line-height:var(--md-sys-typescale-headline-small-height);text-transform:var(--md-sys-typescale-headline-small-text-transform);text-decoration:var(--md-sys-typescale-headline-small-text-decoration)}.body-large{font-family:var(--md-sys-typescale-body-large-font-family-name);font-style:var(--md-sys-typescale-body-large-font-family-style);font-weight:var(--md-sys-typescale-body-large-font-weight);font-size:var(--md-sys-typescale-body-large-font-size);letter-spacing:var(--md-sys-typescale-body-large-tracking);line-height:var(--md-sys-typescale-body-large-height);text-transform:var(--md-sys-typescale-body-large-text-transform);text-decoration:var(--md-sys-typescale-body-large-text-decoration)}.body-medium{font-family:var(--md-sys-typescale-body-medium-font-family-name);font-style:var(--md-sys-typescale-body-medium-font-family-style);font-weight:var(--md-sys-typescale-body-medium-font-weight);font-size:var(--md-sys-typescale-body-medium-font-size);letter-spacing:var(--md-sys-typescale-body-medium-tracking);line-height:var(--md-sys-typescale-body-medium-height);text-transform:var(--md-sys-typescale-body-medium-text-transform);text-decoration:var(--md-sys-typescale-body-medium-text-decoration)}.body-small{font-family:var(--md-sys-typescale-body-small-font-family-name);font-style:var(--md-sys-typescale-body-small-font-family-style);font-weight:var(--md-sys-typescale-body-small-font-weight);font-size:var(--md-sys-typescale-body-small-font-size);letter-spacing:var(--md-sys-typescale-body-small-tracking);line-height:var(--md-sys-typescale-body-small-height);text-transform:var(--md-sys-typescale-body-small-text-transform);text-decoration:var(--md-sys-typescale-body-small-text-decoration)}.label-large{font-family:var(--md-sys-typescale-label-large-font-family-name);font-style:var(--md-sys-typescale-label-large-font-family-style);font-weight:var(--md-sys-typescale-label-large-font-weight);font-size:var(--md-sys-typescale-label-large-font-size);letter-spacing:var(--md-sys-typescale-label-large-tracking);line-height:var(--md-sys-typescale-label-large-height);text-transform:var(--md-sys-typescale-label-large-text-transform);text-decoration:var(--md-sys-typescale-label-large-text-decoration)}.label-medium{font-family:var(--md-sys-typescale-label-medium-font-family-name);font-style:var(--md-sys-typescale-label-medium-font-family-style);font-weight:var(--md-sys-typescale-label-medium-font-weight);font-size:var(--md-sys-typescale-label-medium-font-size);letter-spacing:var(--md-sys-typescale-label-medium-tracking);line-height:var(--md-sys-typescale-label-medium-height);text-transform:var(--md-sys-typescale-label-medium-text-transform);text-decoration:var(--md-sys-typescale-label-medium-text-decoration)}.label-small{font-family:var(--md-sys-typescale-label-small-font-family-name);font-style:var(--md-sys-typescale-label-small-font-family-style);font-weight:var(--md-sys-typescale-label-small-font-weight);font-size:var(--md-sys-typescale-label-small-font-size);letter-spacing:var(--md-sys-typescale-label-small-tracking);line-height:var(--md-sys-typescale-label-small-height);text-transform:var(--md-sys-typescale-label-small-text-transform);text-decoration:var(--md-sys-typescale-label-small-text-decoration)}.title-large{font-family:var(--md-sys-typescale-title-large-font-family-name);font-style:var(--md-sys-typescale-title-large-font-family-style);font-weight:var(--md-sys-typescale-title-large-font-weight);font-size:var(--md-sys-typescale-title-large-font-size);letter-spacing:var(--md-sys-typescale-title-large-tracking);line-height:var(--md-sys-typescale-title-large-height);text-transform:var(--md-sys-typescale-title-large-text-transform);text-decoration:var(--md-sys-typescale-title-large-text-decoration)}.title-medium{font-family:var(--md-sys-typescale-title-medium-font-family-name);font-style:var(--md-sys-typescale-title-medium-font-family-style);font-weight:var(--md-sys-typescale-title-medium-font-weight);font-size:var(--md-sys-typescale-title-medium-font-size);letter-spacing:var(--md-sys-typescale-title-medium-tracking);line-height:var(--md-sys-typescale-title-medium-height);text-transform:var(--md-sys-typescale-title-medium-text-transform);text-decoration:var(--md-sys-typescale-title-medium-text-decoration)}.title-small{font-family:var(--md-sys-typescale-title-small-font-family-name);font-style:var(--md-sys-typescale-title-small-font-family-style);font-weight:var(--md-sys-typescale-title-small-font-weight);font-size:var(--md-sys-typescale-title-small-font-size);letter-spacing:var(--md-sys-typescale-title-small-tracking);line-height:var(--md-sys-typescale-title-small-height);text-transform:var(--md-sys-typescale-title-small-text-transform);text-decoration:var(--md-sys-typescale-title-small-text-decoration)}.materialize-red{background-color:#e51c23 !important}.materialize-red-text{color:#e51c23 !important}.materialize-red.lighten-5{background-color:#fdeaeb !important}.materialize-red-text.text-lighten-5{color:#fdeaeb !important}.materialize-red.lighten-4{background-color:#f8c1c3 !important}.materialize-red-text.text-lighten-4{color:#f8c1c3 !important}.materialize-red.lighten-3{background-color:#f3989b !important}.materialize-red-text.text-lighten-3{color:#f3989b !important}.materialize-red.lighten-2{background-color:#ee6e73 !important}.materialize-red-text.text-lighten-2{color:#ee6e73 !important}.materialize-red.lighten-1{background-color:#ea454b !important}.materialize-red-text.text-lighten-1{color:#ea454b !important}.materialize-red.darken-1{background-color:#d0181e !important}.materialize-red-text.text-darken-1{color:#d0181e !important}.materialize-red.darken-2{background-color:#b9151b !important}.materialize-red-text.text-darken-2{color:#b9151b !important}.materialize-red.darken-3{background-color:#a21318 !important}.materialize-red-text.text-darken-3{color:#a21318 !important}.materialize-red.darken-4{background-color:#8b1014 !important}.materialize-red-text.text-darken-4{color:#8b1014 !important}.red{background-color:#f44336 !important}.red-text{color:#f44336 !important}.red.lighten-5{background-color:#ffebee !important}.red-text.text-lighten-5{color:#ffebee !important}.red.lighten-4{background-color:#ffcdd2 !important}.red-text.text-lighten-4{color:#ffcdd2 !important}.red.lighten-3{background-color:#ef9a9a !important}.red-text.text-lighten-3{color:#ef9a9a !important}.red.lighten-2{background-color:#e57373 !important}.red-text.text-lighten-2{color:#e57373 !important}.red.lighten-1{background-color:#ef5350 !important}.red-text.text-lighten-1{color:#ef5350 !important}.red.darken-1{background-color:#e53935 !important}.red-text.text-darken-1{color:#e53935 !important}.red.darken-2{background-color:#d32f2f !important}.red-text.text-darken-2{color:#d32f2f !important}.red.darken-3{background-color:#c62828 !important}.red-text.text-darken-3{color:#c62828 !important}.red.darken-4{background-color:#b71c1c !important}.red-text.text-darken-4{color:#b71c1c !important}.red.accent-1{background-color:#ff8a80 !important}.red-text.text-accent-1{color:#ff8a80 !important}.red.accent-2{background-color:#ff5252 !important}.red-text.text-accent-2{color:#ff5252 !important}.red.accent-3{background-color:#ff1744 !important}.red-text.text-accent-3{color:#ff1744 !important}.red.accent-4{background-color:#d50000 !important}.red-text.text-accent-4{color:#d50000 !important}.pink{background-color:#e91e63 !important}.pink-text{color:#e91e63 !important}.pink.lighten-5{background-color:#fce4ec !important}.pink-text.text-lighten-5{color:#fce4ec !important}.pink.lighten-4{background-color:#f8bbd0 !important}.pink-text.text-lighten-4{color:#f8bbd0 !important}.pink.lighten-3{background-color:#f48fb1 !important}.pink-text.text-lighten-3{color:#f48fb1 !important}.pink.lighten-2{background-color:#f06292 !important}.pink-text.text-lighten-2{color:#f06292 !important}.pink.lighten-1{background-color:#ec407a !important}.pink-text.text-lighten-1{color:#ec407a !important}.pink.darken-1{background-color:#d81b60 !important}.pink-text.text-darken-1{color:#d81b60 !important}.pink.darken-2{background-color:#c2185b !important}.pink-text.text-darken-2{color:#c2185b !important}.pink.darken-3{background-color:#ad1457 !important}.pink-text.text-darken-3{color:#ad1457 !important}.pink.darken-4{background-color:#880e4f !important}.pink-text.text-darken-4{color:#880e4f !important}.pink.accent-1{background-color:#ff80ab !important}.pink-text.text-accent-1{color:#ff80ab !important}.pink.accent-2{background-color:#ff4081 !important}.pink-text.text-accent-2{color:#ff4081 !important}.pink.accent-3{background-color:#f50057 !important}.pink-text.text-accent-3{color:#f50057 !important}.pink.accent-4{background-color:#c51162 !important}.pink-text.text-accent-4{color:#c51162 !important}.purple{background-color:#9c27b0 !important}.purple-text{color:#9c27b0 !important}.purple.lighten-5{background-color:#f3e5f5 !important}.purple-text.text-lighten-5{color:#f3e5f5 !important}.purple.lighten-4{background-color:#e1bee7 !important}.purple-text.text-lighten-4{color:#e1bee7 !important}.purple.lighten-3{background-color:#ce93d8 !important}.purple-text.text-lighten-3{color:#ce93d8 !important}.purple.lighten-2{background-color:#ba68c8 !important}.purple-text.text-lighten-2{color:#ba68c8 !important}.purple.lighten-1{background-color:#ab47bc !important}.purple-text.text-lighten-1{color:#ab47bc !important}.purple.darken-1{background-color:#8e24aa !important}.purple-text.text-darken-1{color:#8e24aa !important}.purple.darken-2{background-color:#7b1fa2 !important}.purple-text.text-darken-2{color:#7b1fa2 !important}.purple.darken-3{background-color:#6a1b9a !important}.purple-text.text-darken-3{color:#6a1b9a !important}.purple.darken-4{background-color:#4a148c !important}.purple-text.text-darken-4{color:#4a148c !important}.purple.accent-1{background-color:#ea80fc !important}.purple-text.text-accent-1{color:#ea80fc !important}.purple.accent-2{background-color:#e040fb !important}.purple-text.text-accent-2{color:#e040fb !important}.purple.accent-3{background-color:#d500f9 !important}.purple-text.text-accent-3{color:#d500f9 !important}.purple.accent-4{background-color:#a0f !important}.purple-text.text-accent-4{color:#a0f !important}.deep-purple{background-color:#673ab7 !important}.deep-purple-text{color:#673ab7 !important}.deep-purple.lighten-5{background-color:#ede7f6 !important}.deep-purple-text.text-lighten-5{color:#ede7f6 !important}.deep-purple.lighten-4{background-color:#d1c4e9 !important}.deep-purple-text.text-lighten-4{color:#d1c4e9 !important}.deep-purple.lighten-3{background-color:#b39ddb !important}.deep-purple-text.text-lighten-3{color:#b39ddb !important}.deep-purple.lighten-2{background-color:#9575cd !important}.deep-purple-text.text-lighten-2{color:#9575cd !important}.deep-purple.lighten-1{background-color:#7e57c2 !important}.deep-purple-text.text-lighten-1{color:#7e57c2 !important}.deep-purple.darken-1{background-color:#5e35b1 !important}.deep-purple-text.text-darken-1{color:#5e35b1 !important}.deep-purple.darken-2{background-color:#512da8 !important}.deep-purple-text.text-darken-2{color:#512da8 !important}.deep-purple.darken-3{background-color:#4527a0 !important}.deep-purple-text.text-darken-3{color:#4527a0 !important}.deep-purple.darken-4{background-color:#311b92 !important}.deep-purple-text.text-darken-4{color:#311b92 !important}.deep-purple.accent-1{background-color:#b388ff !important}.deep-purple-text.text-accent-1{color:#b388ff !important}.deep-purple.accent-2{background-color:#7c4dff !important}.deep-purple-text.text-accent-2{color:#7c4dff !important}.deep-purple.accent-3{background-color:#651fff !important}.deep-purple-text.text-accent-3{color:#651fff !important}.deep-purple.accent-4{background-color:#6200ea !important}.deep-purple-text.text-accent-4{color:#6200ea !important}.indigo{background-color:#3f51b5 !important}.indigo-text{color:#3f51b5 !important}.indigo.lighten-5{background-color:#e8eaf6 !important}.indigo-text.text-lighten-5{color:#e8eaf6 !important}.indigo.lighten-4{background-color:#c5cae9 !important}.indigo-text.text-lighten-4{color:#c5cae9 !important}.indigo.lighten-3{background-color:#9fa8da !important}.indigo-text.text-lighten-3{color:#9fa8da !important}.indigo.lighten-2{background-color:#7986cb !important}.indigo-text.text-lighten-2{color:#7986cb !important}.indigo.lighten-1{background-color:#5c6bc0 !important}.indigo-text.text-lighten-1{color:#5c6bc0 !important}.indigo.darken-1{background-color:#3949ab !important}.indigo-text.text-darken-1{color:#3949ab !important}.indigo.darken-2{background-color:#303f9f !important}.indigo-text.text-darken-2{color:#303f9f !important}.indigo.darken-3{background-color:#283593 !important}.indigo-text.text-darken-3{color:#283593 !important}.indigo.darken-4{background-color:#1a237e !important}.indigo-text.text-darken-4{color:#1a237e !important}.indigo.accent-1{background-color:#8c9eff !important}.indigo-text.text-accent-1{color:#8c9eff !important}.indigo.accent-2{background-color:#536dfe !important}.indigo-text.text-accent-2{color:#536dfe !important}.indigo.accent-3{background-color:#3d5afe !important}.indigo-text.text-accent-3{color:#3d5afe !important}.indigo.accent-4{background-color:#304ffe !important}.indigo-text.text-accent-4{color:#304ffe !important}.blue{background-color:#2196f3 !important}.blue-text{color:#2196f3 !important}.blue.lighten-5{background-color:#e3f2fd !important}.blue-text.text-lighten-5{color:#e3f2fd !important}.blue.lighten-4{background-color:#bbdefb !important}.blue-text.text-lighten-4{color:#bbdefb !important}.blue.lighten-3{background-color:#90caf9 !important}.blue-text.text-lighten-3{color:#90caf9 !important}.blue.lighten-2{background-color:#64b5f6 !important}.blue-text.text-lighten-2{color:#64b5f6 !important}.blue.lighten-1{background-color:#42a5f5 !important}.blue-text.text-lighten-1{color:#42a5f5 !important}.blue.darken-1{background-color:#1e88e5 !important}.blue-text.text-darken-1{color:#1e88e5 !important}.blue.darken-2{background-color:#1976d2 !important}.blue-text.text-darken-2{color:#1976d2 !important}.blue.darken-3{background-color:#1565c0 !important}.blue-text.text-darken-3{color:#1565c0 !important}.blue.darken-4{background-color:#0d47a1 !important}.blue-text.text-darken-4{color:#0d47a1 !important}.blue.accent-1{background-color:#82b1ff !important}.blue-text.text-accent-1{color:#82b1ff !important}.blue.accent-2{background-color:#448aff !important}.blue-text.text-accent-2{color:#448aff !important}.blue.accent-3{background-color:#2979ff !important}.blue-text.text-accent-3{color:#2979ff !important}.blue.accent-4{background-color:#2962ff !important}.blue-text.text-accent-4{color:#2962ff !important}.light-blue{background-color:#03a9f4 !important}.light-blue-text{color:#03a9f4 !important}.light-blue.lighten-5{background-color:#e1f5fe !important}.light-blue-text.text-lighten-5{color:#e1f5fe !important}.light-blue.lighten-4{background-color:#b3e5fc !important}.light-blue-text.text-lighten-4{color:#b3e5fc !important}.light-blue.lighten-3{background-color:#81d4fa !important}.light-blue-text.text-lighten-3{color:#81d4fa !important}.light-blue.lighten-2{background-color:#4fc3f7 !important}.light-blue-text.text-lighten-2{color:#4fc3f7 !important}.light-blue.lighten-1{background-color:#29b6f6 !important}.light-blue-text.text-lighten-1{color:#29b6f6 !important}.light-blue.darken-1{background-color:#039be5 !important}.light-blue-text.text-darken-1{color:#039be5 !important}.light-blue.darken-2{background-color:#0288d1 !important}.light-blue-text.text-darken-2{color:#0288d1 !important}.light-blue.darken-3{background-color:#0277bd !important}.light-blue-text.text-darken-3{color:#0277bd !important}.light-blue.darken-4{background-color:#01579b !important}.light-blue-text.text-darken-4{color:#01579b !important}.light-blue.accent-1{background-color:#80d8ff !important}.light-blue-text.text-accent-1{color:#80d8ff !important}.light-blue.accent-2{background-color:#40c4ff !important}.light-blue-text.text-accent-2{color:#40c4ff !important}.light-blue.accent-3{background-color:#00b0ff !important}.light-blue-text.text-accent-3{color:#00b0ff !important}.light-blue.accent-4{background-color:#0091ea !important}.light-blue-text.text-accent-4{color:#0091ea !important}.cyan{background-color:#00bcd4 !important}.cyan-text{color:#00bcd4 !important}.cyan.lighten-5{background-color:#e0f7fa !important}.cyan-text.text-lighten-5{color:#e0f7fa !important}.cyan.lighten-4{background-color:#b2ebf2 !important}.cyan-text.text-lighten-4{color:#b2ebf2 !important}.cyan.lighten-3{background-color:#80deea !important}.cyan-text.text-lighten-3{color:#80deea !important}.cyan.lighten-2{background-color:#4dd0e1 !important}.cyan-text.text-lighten-2{color:#4dd0e1 !important}.cyan.lighten-1{background-color:#26c6da !important}.cyan-text.text-lighten-1{color:#26c6da !important}.cyan.darken-1{background-color:#00acc1 !important}.cyan-text.text-darken-1{color:#00acc1 !important}.cyan.darken-2{background-color:#0097a7 !important}.cyan-text.text-darken-2{color:#0097a7 !important}.cyan.darken-3{background-color:#00838f !important}.cyan-text.text-darken-3{color:#00838f !important}.cyan.darken-4{background-color:#006064 !important}.cyan-text.text-darken-4{color:#006064 !important}.cyan.accent-1{background-color:#84ffff !important}.cyan-text.text-accent-1{color:#84ffff !important}.cyan.accent-2{background-color:#18ffff !important}.cyan-text.text-accent-2{color:#18ffff !important}.cyan.accent-3{background-color:#00e5ff !important}.cyan-text.text-accent-3{color:#00e5ff !important}.cyan.accent-4{background-color:#00b8d4 !important}.cyan-text.text-accent-4{color:#00b8d4 !important}.teal{background-color:#009688 !important}.teal-text{color:#009688 !important}.teal.lighten-5{background-color:#e0f2f1 !important}.teal-text.text-lighten-5{color:#e0f2f1 !important}.teal.lighten-4{background-color:#b2dfdb !important}.teal-text.text-lighten-4{color:#b2dfdb !important}.teal.lighten-3{background-color:#80cbc4 !important}.teal-text.text-lighten-3{color:#80cbc4 !important}.teal.lighten-2{background-color:#4db6ac !important}.teal-text.text-lighten-2{color:#4db6ac !important}.teal.lighten-1{background-color:#26a69a !important}.teal-text.text-lighten-1{color:#26a69a !important}.teal.darken-1{background-color:#00897b !important}.teal-text.text-darken-1{color:#00897b !important}.teal.darken-2{background-color:#00796b !important}.teal-text.text-darken-2{color:#00796b !important}.teal.darken-3{background-color:#00695c !important}.teal-text.text-darken-3{color:#00695c !important}.teal.darken-4{background-color:#004d40 !important}.teal-text.text-darken-4{color:#004d40 !important}.teal.accent-1{background-color:#a7ffeb !important}.teal-text.text-accent-1{color:#a7ffeb !important}.teal.accent-2{background-color:#64ffda !important}.teal-text.text-accent-2{color:#64ffda !important}.teal.accent-3{background-color:#1de9b6 !important}.teal-text.text-accent-3{color:#1de9b6 !important}.teal.accent-4{background-color:#00bfa5 !important}.teal-text.text-accent-4{color:#00bfa5 !important}.green{background-color:#4caf50 !important}.green-text{color:#4caf50 !important}.green.lighten-5{background-color:#e8f5e9 !important}.green-text.text-lighten-5{color:#e8f5e9 !important}.green.lighten-4{background-color:#c8e6c9 !important}.green-text.text-lighten-4{color:#c8e6c9 !important}.green.lighten-3{background-color:#a5d6a7 !important}.green-text.text-lighten-3{color:#a5d6a7 !important}.green.lighten-2{background-color:#81c784 !important}.green-text.text-lighten-2{color:#81c784 !important}.green.lighten-1{background-color:#66bb6a !important}.green-text.text-lighten-1{color:#66bb6a !important}.green.darken-1{background-color:#43a047 !important}.green-text.text-darken-1{color:#43a047 !important}.green.darken-2{background-color:#388e3c !important}.green-text.text-darken-2{color:#388e3c !important}.green.darken-3{background-color:#2e7d32 !important}.green-text.text-darken-3{color:#2e7d32 !important}.green.darken-4{background-color:#1b5e20 !important}.green-text.text-darken-4{color:#1b5e20 !important}.green.accent-1{background-color:#b9f6ca !important}.green-text.text-accent-1{color:#b9f6ca !important}.green.accent-2{background-color:#69f0ae !important}.green-text.text-accent-2{color:#69f0ae !important}.green.accent-3{background-color:#00e676 !important}.green-text.text-accent-3{color:#00e676 !important}.green.accent-4{background-color:#00c853 !important}.green-text.text-accent-4{color:#00c853 !important}.light-green{background-color:#8bc34a !important}.light-green-text{color:#8bc34a !important}.light-green.lighten-5{background-color:#f1f8e9 !important}.light-green-text.text-lighten-5{color:#f1f8e9 !important}.light-green.lighten-4{background-color:#dcedc8 !important}.light-green-text.text-lighten-4{color:#dcedc8 !important}.light-green.lighten-3{background-color:#c5e1a5 !important}.light-green-text.text-lighten-3{color:#c5e1a5 !important}.light-green.lighten-2{background-color:#aed581 !important}.light-green-text.text-lighten-2{color:#aed581 !important}.light-green.lighten-1{background-color:#9ccc65 !important}.light-green-text.text-lighten-1{color:#9ccc65 !important}.light-green.darken-1{background-color:#7cb342 !important}.light-green-text.text-darken-1{color:#7cb342 !important}.light-green.darken-2{background-color:#689f38 !important}.light-green-text.text-darken-2{color:#689f38 !important}.light-green.darken-3{background-color:#558b2f !important}.light-green-text.text-darken-3{color:#558b2f !important}.light-green.darken-4{background-color:#33691e !important}.light-green-text.text-darken-4{color:#33691e !important}.light-green.accent-1{background-color:#ccff90 !important}.light-green-text.text-accent-1{color:#ccff90 !important}.light-green.accent-2{background-color:#b2ff59 !important}.light-green-text.text-accent-2{color:#b2ff59 !important}.light-green.accent-3{background-color:#76ff03 !important}.light-green-text.text-accent-3{color:#76ff03 !important}.light-green.accent-4{background-color:#64dd17 !important}.light-green-text.text-accent-4{color:#64dd17 !important}.lime{background-color:#cddc39 !important}.lime-text{color:#cddc39 !important}.lime.lighten-5{background-color:#f9fbe7 !important}.lime-text.text-lighten-5{color:#f9fbe7 !important}.lime.lighten-4{background-color:#f0f4c3 !important}.lime-text.text-lighten-4{color:#f0f4c3 !important}.lime.lighten-3{background-color:#e6ee9c !important}.lime-text.text-lighten-3{color:#e6ee9c !important}.lime.lighten-2{background-color:#dce775 !important}.lime-text.text-lighten-2{color:#dce775 !important}.lime.lighten-1{background-color:#d4e157 !important}.lime-text.text-lighten-1{color:#d4e157 !important}.lime.darken-1{background-color:#c0ca33 !important}.lime-text.text-darken-1{color:#c0ca33 !important}.lime.darken-2{background-color:#afb42b !important}.lime-text.text-darken-2{color:#afb42b !important}.lime.darken-3{background-color:#9e9d24 !important}.lime-text.text-darken-3{color:#9e9d24 !important}.lime.darken-4{background-color:#827717 !important}.lime-text.text-darken-4{color:#827717 !important}.lime.accent-1{background-color:#f4ff81 !important}.lime-text.text-accent-1{color:#f4ff81 !important}.lime.accent-2{background-color:#eeff41 !important}.lime-text.text-accent-2{color:#eeff41 !important}.lime.accent-3{background-color:#c6ff00 !important}.lime-text.text-accent-3{color:#c6ff00 !important}.lime.accent-4{background-color:#aeea00 !important}.lime-text.text-accent-4{color:#aeea00 !important}.yellow{background-color:#ffeb3b !important}.yellow-text{color:#ffeb3b !important}.yellow.lighten-5{background-color:#fffde7 !important}.yellow-text.text-lighten-5{color:#fffde7 !important}.yellow.lighten-4{background-color:#fff9c4 !important}.yellow-text.text-lighten-4{color:#fff9c4 !important}.yellow.lighten-3{background-color:#fff59d !important}.yellow-text.text-lighten-3{color:#fff59d !important}.yellow.lighten-2{background-color:#fff176 !important}.yellow-text.text-lighten-2{color:#fff176 !important}.yellow.lighten-1{background-color:#ffee58 !important}.yellow-text.text-lighten-1{color:#ffee58 !important}.yellow.darken-1{background-color:#fdd835 !important}.yellow-text.text-darken-1{color:#fdd835 !important}.yellow.darken-2{background-color:#fbc02d !important}.yellow-text.text-darken-2{color:#fbc02d !important}.yellow.darken-3{background-color:#f9a825 !important}.yellow-text.text-darken-3{color:#f9a825 !important}.yellow.darken-4{background-color:#f57f17 !important}.yellow-text.text-darken-4{color:#f57f17 !important}.yellow.accent-1{background-color:#ffff8d !important}.yellow-text.text-accent-1{color:#ffff8d !important}.yellow.accent-2{background-color:#ff0 !important}.yellow-text.text-accent-2{color:#ff0 !important}.yellow.accent-3{background-color:#ffea00 !important}.yellow-text.text-accent-3{color:#ffea00 !important}.yellow.accent-4{background-color:#ffd600 !important}.yellow-text.text-accent-4{color:#ffd600 !important}.amber{background-color:#ffc107 !important}.amber-text{color:#ffc107 !important}.amber.lighten-5{background-color:#fff8e1 !important}.amber-text.text-lighten-5{color:#fff8e1 !important}.amber.lighten-4{background-color:#ffecb3 !important}.amber-text.text-lighten-4{color:#ffecb3 !important}.amber.lighten-3{background-color:#ffe082 !important}.amber-text.text-lighten-3{color:#ffe082 !important}.amber.lighten-2{background-color:#ffd54f !important}.amber-text.text-lighten-2{color:#ffd54f !important}.amber.lighten-1{background-color:#ffca28 !important}.amber-text.text-lighten-1{color:#ffca28 !important}.amber.darken-1{background-color:#ffb300 !important}.amber-text.text-darken-1{color:#ffb300 !important}.amber.darken-2{background-color:#ffa000 !important}.amber-text.text-darken-2{color:#ffa000 !important}.amber.darken-3{background-color:#ff8f00 !important}.amber-text.text-darken-3{color:#ff8f00 !important}.amber.darken-4{background-color:#ff6f00 !important}.amber-text.text-darken-4{color:#ff6f00 !important}.amber.accent-1{background-color:#ffe57f !important}.amber-text.text-accent-1{color:#ffe57f !important}.amber.accent-2{background-color:#ffd740 !important}.amber-text.text-accent-2{color:#ffd740 !important}.amber.accent-3{background-color:#ffc400 !important}.amber-text.text-accent-3{color:#ffc400 !important}.amber.accent-4{background-color:#ffab00 !important}.amber-text.text-accent-4{color:#ffab00 !important}.orange{background-color:#ff9800 !important}.orange-text{color:#ff9800 !important}.orange.lighten-5{background-color:#fff3e0 !important}.orange-text.text-lighten-5{color:#fff3e0 !important}.orange.lighten-4{background-color:#ffe0b2 !important}.orange-text.text-lighten-4{color:#ffe0b2 !important}.orange.lighten-3{background-color:#ffcc80 !important}.orange-text.text-lighten-3{color:#ffcc80 !important}.orange.lighten-2{background-color:#ffb74d !important}.orange-text.text-lighten-2{color:#ffb74d !important}.orange.lighten-1{background-color:#ffa726 !important}.orange-text.text-lighten-1{color:#ffa726 !important}.orange.darken-1{background-color:#fb8c00 !important}.orange-text.text-darken-1{color:#fb8c00 !important}.orange.darken-2{background-color:#f57c00 !important}.orange-text.text-darken-2{color:#f57c00 !important}.orange.darken-3{background-color:#ef6c00 !important}.orange-text.text-darken-3{color:#ef6c00 !important}.orange.darken-4{background-color:#e65100 !important}.orange-text.text-darken-4{color:#e65100 !important}.orange.accent-1{background-color:#ffd180 !important}.orange-text.text-accent-1{color:#ffd180 !important}.orange.accent-2{background-color:#ffab40 !important}.orange-text.text-accent-2{color:#ffab40 !important}.orange.accent-3{background-color:#ff9100 !important}.orange-text.text-accent-3{color:#ff9100 !important}.orange.accent-4{background-color:#ff6d00 !important}.orange-text.text-accent-4{color:#ff6d00 !important}.deep-orange{background-color:#ff5722 !important}.deep-orange-text{color:#ff5722 !important}.deep-orange.lighten-5{background-color:#fbe9e7 !important}.deep-orange-text.text-lighten-5{color:#fbe9e7 !important}.deep-orange.lighten-4{background-color:#ffccbc !important}.deep-orange-text.text-lighten-4{color:#ffccbc !important}.deep-orange.lighten-3{background-color:#ffab91 !important}.deep-orange-text.text-lighten-3{color:#ffab91 !important}.deep-orange.lighten-2{background-color:#ff8a65 !important}.deep-orange-text.text-lighten-2{color:#ff8a65 !important}.deep-orange.lighten-1{background-color:#ff7043 !important}.deep-orange-text.text-lighten-1{color:#ff7043 !important}.deep-orange.darken-1{background-color:#f4511e !important}.deep-orange-text.text-darken-1{color:#f4511e !important}.deep-orange.darken-2{background-color:#e64a19 !important}.deep-orange-text.text-darken-2{color:#e64a19 !important}.deep-orange.darken-3{background-color:#d84315 !important}.deep-orange-text.text-darken-3{color:#d84315 !important}.deep-orange.darken-4{background-color:#bf360c !important}.deep-orange-text.text-darken-4{color:#bf360c !important}.deep-orange.accent-1{background-color:#ff9e80 !important}.deep-orange-text.text-accent-1{color:#ff9e80 !important}.deep-orange.accent-2{background-color:#ff6e40 !important}.deep-orange-text.text-accent-2{color:#ff6e40 !important}.deep-orange.accent-3{background-color:#ff3d00 !important}.deep-orange-text.text-accent-3{color:#ff3d00 !important}.deep-orange.accent-4{background-color:#dd2c00 !important}.deep-orange-text.text-accent-4{color:#dd2c00 !important}.brown{background-color:#795548 !important}.brown-text{color:#795548 !important}.brown.lighten-5{background-color:#efebe9 !important}.brown-text.text-lighten-5{color:#efebe9 !important}.brown.lighten-4{background-color:#d7ccc8 !important}.brown-text.text-lighten-4{color:#d7ccc8 !important}.brown.lighten-3{background-color:#bcaaa4 !important}.brown-text.text-lighten-3{color:#bcaaa4 !important}.brown.lighten-2{background-color:#a1887f !important}.brown-text.text-lighten-2{color:#a1887f !important}.brown.lighten-1{background-color:#8d6e63 !important}.brown-text.text-lighten-1{color:#8d6e63 !important}.brown.darken-1{background-color:#6d4c41 !important}.brown-text.text-darken-1{color:#6d4c41 !important}.brown.darken-2{background-color:#5d4037 !important}.brown-text.text-darken-2{color:#5d4037 !important}.brown.darken-3{background-color:#4e342e !important}.brown-text.text-darken-3{color:#4e342e !important}.brown.darken-4{background-color:#3e2723 !important}.brown-text.text-darken-4{color:#3e2723 !important}.blue-grey{background-color:#607d8b !important}.blue-grey-text{color:#607d8b !important}.blue-grey.lighten-5{background-color:#eceff1 !important}.blue-grey-text.text-lighten-5{color:#eceff1 !important}.blue-grey.lighten-4{background-color:#cfd8dc !important}.blue-grey-text.text-lighten-4{color:#cfd8dc !important}.blue-grey.lighten-3{background-color:#b0bec5 !important}.blue-grey-text.text-lighten-3{color:#b0bec5 !important}.blue-grey.lighten-2{background-color:#90a4ae !important}.blue-grey-text.text-lighten-2{color:#90a4ae !important}.blue-grey.lighten-1{background-color:#78909c !important}.blue-grey-text.text-lighten-1{color:#78909c !important}.blue-grey.darken-1{background-color:#546e7a !important}.blue-grey-text.text-darken-1{color:#546e7a !important}.blue-grey.darken-2{background-color:#455a64 !important}.blue-grey-text.text-darken-2{color:#455a64 !important}.blue-grey.darken-3{background-color:#37474f !important}.blue-grey-text.text-darken-3{color:#37474f !important}.blue-grey.darken-4{background-color:#263238 !important}.blue-grey-text.text-darken-4{color:#263238 !important}.grey{background-color:#9e9e9e !important}.grey-text{color:#9e9e9e !important}.grey.lighten-5{background-color:#fafafa !important}.grey-text.text-lighten-5{color:#fafafa !important}.grey.lighten-4{background-color:#f5f5f5 !important}.grey-text.text-lighten-4{color:#f5f5f5 !important}.grey.lighten-3{background-color:#eee !important}.grey-text.text-lighten-3{color:#eee !important}.grey.lighten-2{background-color:#e0e0e0 !important}.grey-text.text-lighten-2{color:#e0e0e0 !important}.grey.lighten-1{background-color:#bdbdbd !important}.grey-text.text-lighten-1{color:#bdbdbd !important}.grey.darken-1{background-color:#757575 !important}.grey-text.text-darken-1{color:#757575 !important}.grey.darken-2{background-color:#616161 !important}.grey-text.text-darken-2{color:#616161 !important}.grey.darken-3{background-color:#424242 !important}.grey-text.text-darken-3{color:#424242 !important}.grey.darken-4{background-color:#212121 !important}.grey-text.text-darken-4{color:#212121 !important}.black{background-color:#000 !important}.black-text{color:#000 !important}.white{background-color:#fff !important}.white-text{color:#fff !important}.transparent{background-color:rgba(0,0,0,0) !important}.transparent-text{color:rgba(0,0,0,0) !important}/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}body{background-color:var(--md-sys-color-background);color:var(--md-sys-color-on-background)}button,input,optgroup,select,textarea{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}a{color:#039be5;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.valign-wrapper{display:flex;align-items:center}.clearfix{clear:both}.z-depth-0,.btn:focus.tonal,.btn-small:focus.tonal,.btn-large:focus.tonal,.btn:focus.filled,.btn-small:focus.filled,.btn-large:focus.filled,.btn.disabled,.btn-floating.disabled,.btn-large.disabled,.btn-small.disabled,.btn-flat.disabled,.btn:disabled,.btn-floating:disabled,.btn-large:disabled,.btn-small:disabled,.btn-flat:disabled,.btn[disabled],.btn-floating[disabled],.btn-large[disabled],.btn-small[disabled],.btn-flat[disabled],.btn.text,.text.btn-small,.text.btn-large,.btn-flat{box-shadow:none !important}.z-depth-1,.sidenav,.collapsible,.dropdown-content,.btn-floating,.btn:focus.elevated,.btn-small:focus.elevated,.btn-large:focus.elevated,.btn.tonal:hover,.tonal.btn-small:hover,.tonal.btn-large:hover,.btn.filled:hover,.filled.btn-small:hover,.filled.btn-large:hover,.btn.elevated,.elevated.btn-small,.elevated.btn-large,.card,.card-panel,nav{box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2)}.z-depth-1-half,.btn-floating:focus,.btn-floating:hover{box-shadow:0 3px 3px 0 rgba(0,0,0,.14),0 1px 7px 0 rgba(0,0,0,.12),0 3px 1px -1px rgba(0,0,0,.2)}.z-depth-2,.btn.elevated:hover,.elevated.btn-small:hover,.elevated.btn-large:hover{box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.3)}.z-depth-3,.toast{box-shadow:0 8px 17px 2px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.2)}.z-depth-4{box-shadow:0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12),0 8px 10px -7px rgba(0,0,0,.2)}.z-depth-5,.modal{box-shadow:0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12),0 11px 15px -7px rgba(0,0,0,.2)}.hoverable{transition:box-shadow .25s}.hoverable:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19)}.divider{height:1px;overflow:hidden;background-color:var(--md-sys-color-outline-variant)}blockquote{margin:20px 0;padding-left:1.5rem;border-left:5px solid var(--md-sys-color-primary)}i{line-height:inherit}i.left{float:left;margin-left:-8px}i.right{float:right}i.tiny{font-size:1rem}i.small{font-size:2rem}i.medium{font-size:4rem}i.large{font-size:6rem}html.noscroll{position:fixed;overflow-y:scroll;width:100%}img.responsive-img,video.responsive-video{max-width:100%;height:auto}.pagination li{display:inline-block;border-radius:2px;text-align:center;vertical-align:top;height:30px}.pagination li a{color:var(--md-sys-color-on-surface-variant);display:inline-block;font-size:1.2rem;padding:0 10px;line-height:30px}.pagination li:hover:not(.disabled){background-color:rgba(var(--md-sys-color-primary-numeric), 0.06)}.pagination li.active a{color:var(--md-sys-color-on-primary)}.pagination li.active,.pagination li.active:hover{background-color:var(--md-sys-color-primary)}.pagination li.disabled a{cursor:default;color:var(--md-sys-color-on-surface)}.pagination li i{font-size:2rem}.pagination li.pages ul li{display:inline-block;float:none}@media only screen and (max-width : 992.99px){.pagination{width:100%}.pagination li.prev,.pagination li.next{width:10%}.pagination li.pages{width:80%;overflow:hidden;white-space:nowrap}}.breadcrumb{display:inline-block;font-size:18px;color:var(--font-on-primary-color-medium)}.breadcrumb i,.breadcrumb [class^=mdi-],.breadcrumb [class*=mdi-],.breadcrumb i.material-icons,.breadcrumb i.material-symbols-outlined,.breadcrumb i.material-symbols-rounded,.breadcrumb i.material-symbols-sharp{display:block;float:left;font-size:24px}.breadcrumb:before{content:"";color:var(--font-on-primary-color-medium);vertical-align:top;display:inline-block;font-family:"Material Symbols Outlined","Material Symbols Rounded","Material Symbols Sharp","Material Icons";font-weight:normal;font-style:normal;font-size:25px;margin:0 10px 0 8px;-webkit-font-smoothing:antialiased;float:left}.breadcrumb:first-child:before{display:none}.breadcrumb:last-child{color:var(--md-sys-color-on-primary)}.parallax-container{position:relative;overflow:hidden;height:500px}.parallax-container .parallax{position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1}.parallax-container .parallax img{opacity:0;position:absolute;left:50%;bottom:0;min-width:100%;min-height:100%;transform:translate3d(0, 0, 0);transform:translateX(-50%)}.pin-top,.pin-bottom{position:relative}.pinned{position:fixed !important}ul.staggered-list li{opacity:0}.fade-in{opacity:0;transform-origin:0 50%}@media only screen and (max-width : 600.99px){.hide-on-small-only,.hide-on-small-and-down{display:none !important}}@media only screen and (max-width : 992.99px){.hide-on-med-and-down{display:none !important}}@media only screen and (min-width : 601px){.hide-on-med-and-up{display:none !important}}@media only screen and (min-width: 601px)and (max-width: 992.99px){.hide-on-med-only{display:none !important}}@media only screen and (min-width : 993px){.hide-on-large-only{display:none !important}}@media only screen and (min-width : 1201px){.hide-on-extra-large-only{display:none !important}}@media only screen and (min-width : 1201px){.show-on-extra-large{display:block !important}}@media only screen and (min-width : 993px){.show-on-large{display:block !important}}@media only screen and (min-width: 601px)and (max-width: 992.99px){.show-on-medium{display:block !important}}@media only screen and (max-width : 600.99px){.show-on-small{display:block !important}}@media only screen and (min-width : 601px){.show-on-medium-and-up{display:block !important}}@media only screen and (max-width : 992.99px){.show-on-medium-and-down{display:block !important}}@media only screen and (max-width : 600.99px){.center-on-small-only{text-align:center}}.page-footer{margin-top:5rem;padding-top:3rem;border-top:1px dashed var(--md-sys-color-outline-variant)}.page-footer p{color:var(--md-sys-color-outline-light)}.page-footer a{color:var(--md-sys-color-primary)}.page-footer .footer-copyright,.page-footer .footer-copyright a{overflow:hidden;min-height:50px;display:flex;align-items:center;justify-content:space-between;padding:10px 0px}.page-footer ul{padding-left:0;list-style-type:none}table,th,td{border:none}table{width:100%;display:table;border-collapse:collapse;border-spacing:0}table.striped tr{border-bottom:none}table.striped tbody>tr:nth-child(odd){background-color:rgba(0,0,0,.08)}table.highlight>tbody>tr{transition:background-color .25s ease}table.highlight>tbody>tr:hover{background-color:rgba(0,0,0,.04)}table thead{color:var(--md-sys-color-on-surface-variant)}table.centered thead tr th,table.centered tbody tr td{text-align:center}tr{border-bottom:1px solid var(--md-sys-color-outline-variant)}td,th{padding:15px 5px;display:table-cell;text-align:left;vertical-align:middle;border-radius:0}@media only screen and (max-width : 992.99px){table.responsive-table{width:100%;border-collapse:collapse;border-spacing:0;display:block;position:relative}table.responsive-table td:empty:before{content:" "}table.responsive-table th,table.responsive-table td{margin:0;vertical-align:top}table.responsive-table th{text-align:left}table.responsive-table thead{display:block;float:left}table.responsive-table thead tr{display:block;padding:0 10px 0 0}table.responsive-table thead tr th::before{content:" "}table.responsive-table tbody{display:block;width:auto;position:relative;overflow-x:auto;white-space:nowrap}table.responsive-table tbody tr{display:inline-block;vertical-align:top}table.responsive-table th{display:block;text-align:right}table.responsive-table td{display:block;min-height:1.25em;text-align:left}table.responsive-table tr{border-bottom:none;padding:0 10px}table.responsive-table thead{border:0;border-right:1px solid var(--md-sys-color-outline-variant)}}.video-container{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}.video-container iframe,.video-container object,.video-container embed{position:absolute;top:0;left:0;width:100%;height:100%}.hide{display:none !important}.left-align{text-align:left}.right-align{text-align:right}.center,.center-align{text-align:center}.left{float:left !important}.right{float:right !important}.no-select,input[type=range],input[type=range]+.thumb{user-select:none}.circle{border-radius:50%}.center-block{display:block;margin-left:auto;margin-right:auto}.truncate{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.no-padding{padding:0 !important}.m-0{margin:0 !important}.mt-0{margin-top:0 !important}.mr-0{margin-right:0 !important}.mb-0{margin-bottom:0 !important}.ml-0{margin-left:0 !important}.mx-0{margin-left:0 !important;margin-right:0 !important}.my-0{margin-top:0 !important;margin-bottom:0 !important}.m-1{margin:.25rem !important}.mt-1{margin-top:.25rem !important}.mr-1{margin-right:.25rem !important}.mb-1{margin-bottom:.25rem !important}.ml-1{margin-left:.25rem !important}.mx-1{margin-left:.25rem !important;margin-right:.25rem !important}.my-1{margin-top:.25rem !important;margin-bottom:.25rem !important}.m-2{margin:.5rem !important}.mt-2{margin-top:.5rem !important}.mr-2{margin-right:.5rem !important}.mb-2{margin-bottom:.5rem !important}.ml-2{margin-left:.5rem !important}.mx-2{margin-left:.5rem !important;margin-right:.5rem !important}.my-2{margin-top:.5rem !important;margin-bottom:.5rem !important}.m-3{margin:.75rem !important}.mt-3{margin-top:.75rem !important}.mr-3{margin-right:.75rem !important}.mb-3{margin-bottom:.75rem !important}.ml-3{margin-left:.75rem !important}.mx-3{margin-left:.75rem !important;margin-right:.75rem !important}.my-3{margin-top:.75rem !important;margin-bottom:.75rem !important}.m-4{margin:1rem !important}.mt-4{margin-top:1rem !important}.mr-4{margin-right:1rem !important}.mb-4{margin-bottom:1rem !important}.ml-4{margin-left:1rem !important}.mx-4{margin-left:1rem !important;margin-right:1rem !important}.my-4{margin-top:1rem !important;margin-bottom:1rem !important}.m-5{margin:1.5rem !important}.mt-5{margin-top:1.5rem !important}.mr-5{margin-right:1.5rem !important}.mb-5{margin-bottom:1.5rem !important}.ml-5{margin-left:1.5rem !important}.mx-5{margin-left:1.5rem !important;margin-right:1.5rem !important}.my-5{margin-top:1.5rem !important;margin-bottom:1.5rem !important}.m-6{margin:3rem !important}.mt-6{margin-top:3rem !important}.mr-6{margin-right:3rem !important}.mb-6{margin-bottom:3rem !important}.ml-6{margin-left:3rem !important}.mx-6{margin-left:3rem !important;margin-right:3rem !important}.my-6{margin-top:3rem !important;margin-bottom:3rem !important}.m-auto{margin:auto !important}.mt-auto{margin-top:auto !important}.mr-auto{margin-right:auto !important}.mb-auto{margin-bottom:auto !important}.ml-auto{margin-left:auto !important}.mx-auto{margin-left:auto !important;margin-right:auto !important}.my-auto{margin-top:auto !important;margin-bottom:auto !important}.p-0{padding:0 !important}.pt-0{padding-top:0 !important}.pr-0{padding-right:0 !important}.pb-0{padding-bottom:0 !important}.pl-0{padding-left:0 !important}.px-0{padding-left:0 !important;padding-right:0 !important}.py-0{padding-top:0 !important;padding-bottom:0 !important}.p-1{padding:.25rem !important}.pt-1{padding-top:.25rem !important}.pr-1{padding-right:.25rem !important}.pb-1{padding-bottom:.25rem !important}.pl-1{padding-left:.25rem !important}.px-1{padding-left:.25rem !important;padding-right:.25rem !important}.py-1{padding-top:.25rem !important;padding-bottom:.25rem !important}.p-2{padding:.5rem !important}.pt-2{padding-top:.5rem !important}.pr-2{padding-right:.5rem !important}.pb-2{padding-bottom:.5rem !important}.pl-2{padding-left:.5rem !important}.px-2{padding-left:.5rem !important;padding-right:.5rem !important}.py-2{padding-top:.5rem !important;padding-bottom:.5rem !important}.p-3{padding:.75rem !important}.pt-3{padding-top:.75rem !important}.pr-3{padding-right:.75rem !important}.pb-3{padding-bottom:.75rem !important}.pl-3{padding-left:.75rem !important}.px-3{padding-left:.75rem !important;padding-right:.75rem !important}.py-3{padding-top:.75rem !important;padding-bottom:.75rem !important}.p-4{padding:1rem !important}.pt-4{padding-top:1rem !important}.pr-4{padding-right:1rem !important}.pb-4{padding-bottom:1rem !important}.pl-4{padding-left:1rem !important}.px-4{padding-left:1rem !important;padding-right:1rem !important}.py-4{padding-top:1rem !important;padding-bottom:1rem !important}.p-5{padding:1.5rem !important}.pt-5{padding-top:1.5rem !important}.pr-5{padding-right:1.5rem !important}.pb-5{padding-bottom:1.5rem !important}.pl-5{padding-left:1.5rem !important}.px-5{padding-left:1.5rem !important;padding-right:1.5rem !important}.py-5{padding-top:1.5rem !important;padding-bottom:1.5rem !important}.p-6{padding:3rem !important}.pt-6{padding-top:3rem !important}.pr-6{padding-right:3rem !important}.pb-6{padding-bottom:3rem !important}.pl-6{padding-left:3rem !important}.px-6{padding-left:3rem !important;padding-right:3rem !important}.py-6{padding-top:3rem !important;padding-bottom:3rem !important}.p-auto{padding:auto !important}.pt-auto{padding-top:auto !important}.pr-auto{padding-right:auto !important}.pb-auto{padding-bottom:auto !important}.pl-auto{padding-left:auto !important}.px-auto{padding-left:auto !important;padding-right:auto !important}.py-auto{padding-top:auto !important;padding-bottom:auto !important}.collection{padding-left:0;list-style-type:none;margin:.5rem 0 1rem 0;border:1px solid var(--md-sys-color-outline-variant);border-radius:2px;overflow:hidden;position:relative}.collection .collection-item{background-color:rgba(0,0,0,0);line-height:1.5rem;padding:10px 20px;margin:0;border-bottom:1px solid var(--md-sys-color-outline-variant)}.collection .collection-item.avatar{min-height:84px;padding-left:72px;position:relative}.collection .collection-item.avatar:not(.circle-clipper)>.circle,.collection .collection-item.avatar :not(.circle-clipper)>.circle{position:absolute;width:42px;height:42px;overflow:hidden;left:15px;display:inline-block;vertical-align:middle}.collection .collection-item.avatar i.circle{font-size:18px;line-height:42px;color:#fff;background-color:var(--md-sys-color-shadow-light);text-align:center}.collection .collection-item.avatar .title{font-size:16px}.collection .collection-item.avatar p{margin:0}.collection .collection-item.avatar .secondary-content{position:absolute;top:16px;right:16px}.collection .collection-item:last-child{border-bottom:none}.collection .collection-item.active{background-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}.collection .collection-item.active .secondary-content{color:var(--md-sys-color-on-primary)}.collection a.collection-item{display:block;transition:.25s;color:var(--md-sys-color-primary)}.collection a.collection-item:not(.active):hover{background-color:rgba(0,0,0,.04)}.collection.with-header .collection-header{background-color:rgba(0,0,0,0);border-bottom:1px solid var(--md-sys-color-outline-variant);padding:10px 20px}.collection.with-header .collection-item{padding-left:30px}.collection.with-header .collection-item.avatar{padding-left:72px}.secondary-content{float:right;color:var(--md-sys-color-primary)}.collapsible .collection{margin:0;border:none}:root{--bagde-height: 22px}span.badge{min-width:3rem;padding:0 6px;margin-left:14px;text-align:center;font-size:1rem;line-height:var(--bagde-height);height:var(--bagde-height);color:var(--md-sys-color-on-surface-variant);float:right;box-sizing:border-box}span.badge.new{font-weight:300;font-size:.8rem;color:var(--md-sys-color-on-primary);background-color:var(--md-sys-color-primary);border-radius:2px}span.badge.new:after{content:" new"}span.badge[data-badge-caption]::after{content:" " attr(data-badge-caption)}.active span.badge{color:var(--md-sys-color-on-primary)}nav ul a span.badge{display:inline-block;float:none;margin-left:4px;line-height:var(--bagde-height);height:var(--bagde-height);-webkit-font-smoothing:auto}.collection-item span.badge{margin-top:calc(.75rem - var(--bagde-height)*.5)}.collapsible span.badge{margin-left:auto}.collapsible span.badge.leading{margin-right:7px;order:-1}.collapsible .active span.badge:not(.new){color:var(--md-sys-color-on-surface-variant)}.sidenav span.badge{margin-top:calc(var(--sidenav-line-height)*.5 - 11px)}table span.badge{display:inline-block;float:none;margin-left:auto}.material-icons,.material-symbols-outlined,.material-symbols-rounded,.material-symbols-sharp{text-rendering:optimizeLegibility;font-feature-settings:"liga"}.container{margin:0 auto;max-width:1280px;width:90%}@media only screen and (min-width : 601px){.container{width:85%}}@media only screen and (min-width : 993px){.container{width:70%}}.section{padding:1rem 0}body{--gap-size: 1.5rem}.row{display:grid;grid-template-columns:repeat(12, 1fr);gap:var(--gap-size)}.row .s1{grid-column:auto/span 1}.row .s2{grid-column:auto/span 2}.row .s3{grid-column:auto/span 3}.row .s4{grid-column:auto/span 4}.row .s5{grid-column:auto/span 5}.row .s6{grid-column:auto/span 6}.row .s7{grid-column:auto/span 7}.row .s8{grid-column:auto/span 8}.row .s9{grid-column:auto/span 9}.row .s10{grid-column:auto/span 10}.row .s11{grid-column:auto/span 11}.row .s12{grid-column:auto/span 12}.row .offset-s1{grid-column-start:3}.row .offset-s2{grid-column-start:2}.row .offset-s3{grid-column-start:4}.row .offset-s4{grid-column-start:5}.row .offset-s5{grid-column-start:6}.row .offset-s6{grid-column-start:7}.row .offset-s7{grid-column-start:8}.row .offset-s8{grid-column-start:9}.row .offset-s9{grid-column-start:10}.row .offset-s10{grid-column-start:11}.row .offset-s11{grid-column-start:12}@media only screen and (min-width : 601px){.row .m1{grid-column:auto/span 1}.row .m2{grid-column:auto/span 2}.row .m3{grid-column:auto/span 3}.row .m4{grid-column:auto/span 4}.row .m5{grid-column:auto/span 5}.row .m6{grid-column:auto/span 6}.row .m7{grid-column:auto/span 7}.row .m8{grid-column:auto/span 8}.row .m9{grid-column:auto/span 9}.row .m10{grid-column:auto/span 10}.row .m11{grid-column:auto/span 11}.row .m12{grid-column:auto/span 12}.row .offset-m1{grid-column-start:2}.row .offset-m2{grid-column-start:3}.row .offset-m3{grid-column-start:4}.row .offset-m4{grid-column-start:5}.row .offset-m5{grid-column-start:6}.row .offset-m6{grid-column-start:7}.row .offset-m7{grid-column-start:8}.row .offset-m8{grid-column-start:9}.row .offset-m9{grid-column-start:10}.row .offset-m10{grid-column-start:11}.row .offset-m11{grid-column-start:12}}@media only screen and (min-width : 993px){.row .l1{grid-column:auto/span 1}.row .l2{grid-column:auto/span 2}.row .l3{grid-column:auto/span 3}.row .l4{grid-column:auto/span 4}.row .l5{grid-column:auto/span 5}.row .l6{grid-column:auto/span 6}.row .l7{grid-column:auto/span 7}.row .l8{grid-column:auto/span 8}.row .l9{grid-column:auto/span 9}.row .l10{grid-column:auto/span 10}.row .l11{grid-column:auto/span 11}.row .l12{grid-column:auto/span 12}.row .offset-l1{grid-column-start:2}.row .offset-l2{grid-column-start:3}.row .offset-l3{grid-column-start:4}.row .offset-l4{grid-column-start:5}.row .offset-l5{grid-column-start:6}.row .offset-l6{grid-column-start:7}.row .offset-l7{grid-column-start:8}.row .offset-l8{grid-column-start:9}.row .offset-l9{grid-column-start:10}.row .offset-l10{grid-column-start:11}.row .offset-l11{grid-column-start:12}}@media only screen and (min-width : 1201px){.row .xl1{grid-column:auto/span 1}.row .xl2{grid-column:auto/span 2}.row .xl3{grid-column:auto/span 3}.row .xl4{grid-column:auto/span 4}.row .xl5{grid-column:auto/span 5}.row .xl6{grid-column:auto/span 6}.row .xl7{grid-column:auto/span 7}.row .xl8{grid-column:auto/span 8}.row .xl9{grid-column:auto/span 9}.row .xl10{grid-column:auto/span 10}.row .xl11{grid-column:auto/span 11}.row .xl12{grid-column:auto/span 12}.row .offset-xl1{grid-column-start:2}.row .offset-xl2{grid-column-start:3}.row .offset-xl3{grid-column-start:4}.row .offset-xl4{grid-column-start:5}.row .offset-xl5{grid-column-start:6}.row .offset-xl6{grid-column-start:7}.row .offset-xl7{grid-column-start:8}.row .offset-xl8{grid-column-start:9}.row .offset-xl9{grid-column-start:10}.row .offset-xl10{grid-column-start:11}.row .offset-xl11{grid-column-start:12}}.g-0{gap:0}.g-1{gap:calc(.25*var(--gap-size))}.g-2{gap:calc(.5*var(--gap-size))}.g-3{gap:calc(1*var(--gap-size))}.g-4{gap:calc(1.5*var(--gap-size))}.g-5{gap:calc(3*var(--gap-size))}:root{--navbar-height: 64px;--navbar-height-mobile: 56px}nav{color:var(--md-sys-color-on-primary);background-color:var(--md-sys-color-secondary-container);width:100%;height:var(--navbar-height-mobile);line-height:var(--navbar-height-mobile)}nav.nav-extended{height:auto}nav.nav-extended .nav-wrapper{min-height:var(--navbar-height-mobile);height:auto}nav.nav-extended .nav-content{position:relative;line-height:normal}nav a{color:var(--md-sys-color-on-primary)}nav i,nav [class^=mdi-],nav [class*=mdi-],nav i.material-icons,nav i.material-symbols-outlined,nav i.material-symbols-rounded,nav i.material-symbols-sharp{display:block;font-size:24px;height:var(--navbar-height-mobile);line-height:var(--navbar-height-mobile)}nav .nav-wrapper{position:relative;height:100%}@media only screen and (min-width : 993px){nav a.sidenav-trigger{display:none}}nav .sidenav-trigger{float:left;position:relative;z-index:1;height:var(--navbar-height-mobile);margin:0 18px}nav .sidenav-trigger i{height:var(--navbar-height-mobile);line-height:var(--navbar-height-mobile)}nav .brand-logo{position:absolute;color:var(--md-sys-color-on-primary);display:inline-block;font-size:2.1rem;padding:0}nav .brand-logo.center{left:50%;transform:translateX(-50%)}@media only screen and (max-width : 992.99px){nav .brand-logo{left:50%;transform:translateX(-50%)}nav .brand-logo.left,nav .brand-logo.right{padding:0;transform:none}nav .brand-logo.left{left:.5rem}nav .brand-logo.right{right:.5rem;left:auto}}nav .brand-logo.right{right:.5rem;padding:0}nav .brand-logo i,nav .brand-logo [class^=mdi-],nav .brand-logo [class*=mdi-],nav .brand-logo i.material-icons,nav .brand-logo i.material-symbols-outlined,nav .brand-logo i.material-symbols-rounded,nav .brand-logo i.material-symbols-sharp{float:left;margin-right:15px}nav .nav-title{display:inline-block;font-size:32px;padding:28px 0}nav ul:not(.dropdown-content){list-style-type:none;margin:0}nav ul:not(.dropdown-content)>li{transition:background-color .3s;float:left;padding:0}nav ul:not(.dropdown-content)>li>a{transition:background-color .3s;font-size:1rem;color:var(--md-sys-color-on-primary);display:block;padding:0 15px;cursor:pointer}nav ul:not(.dropdown-content)>li>a.active{background-color:var(--md-ref-palette-primary80)}nav ul:not(.dropdown-content)>li>a:hover:not(.active){background-color:var(--md-ref-palette-primary70)}nav ul:not(.dropdown-content)>li>a.btn,nav ul:not(.dropdown-content)>li>a.btn-small,nav ul:not(.dropdown-content)>li>a.btn-large,nav ul:not(.dropdown-content)>li>a.btn-flat,nav ul:not(.dropdown-content)>li>a.btn-floating{margin-top:-2px;margin-left:15px;margin-right:15px;display:inline-block}nav ul:not(.dropdown-content)>li>a.btn>.material-icons,nav ul:not(.dropdown-content)>li>a.btn-small>.material-icons,nav ul:not(.dropdown-content)>li>a.btn>.material-symbols-outlined,nav ul:not(.dropdown-content)>li>a.btn-small>.material-symbols-outlined,nav ul:not(.dropdown-content)>li>a.btn>.material-symbols-rounded,nav ul:not(.dropdown-content)>li>a.btn-small>.material-symbols-rounded,nav ul:not(.dropdown-content)>li>a.btn>.material-symbols-sharp,nav ul:not(.dropdown-content)>li>a.btn-small>.material-symbols-sharp,nav ul:not(.dropdown-content)>li>a.btn-large>.material-icons,nav ul:not(.dropdown-content)>li>a.btn-large>.material-symbols-outlined,nav ul:not(.dropdown-content)>li>a.btn-large>.material-symbols-rounded,nav ul:not(.dropdown-content)>li>a.btn-large>.material-symbols-sharp,nav ul:not(.dropdown-content)>li>a.btn-flat>.material-icons,nav ul:not(.dropdown-content)>li>a.btn-flat>.material-symbols-outlined,nav ul:not(.dropdown-content)>li>a.btn-flat>.material-symbols-rounded,nav ul:not(.dropdown-content)>li>a.btn-flat>.material-symbols-sharp,nav ul:not(.dropdown-content)>li>a.btn-floating>.material-icons,nav ul:not(.dropdown-content)>li>a.btn-floating>.material-symbols-outlined,nav ul:not(.dropdown-content)>li>a.btn-floating>.material-symbols-rounded,nav ul:not(.dropdown-content)>li>a.btn-floating>.material-symbols-sharp{height:inherit;line-height:inherit}nav ul:not(.dropdown-content).left{float:left}nav form{height:100%}nav .input-field{margin:0;height:100%}nav .input-field input[type=search]{height:100%;font-size:1.2rem;border:none;padding-left:2rem;color:var(--md-sys-color-on-primary)}nav .input-field input[type=search]:focus,nav .input-field input[type=search][type=text]:valid,nav .input-field input[type=search][type=password]:valid,nav .input-field input[type=search][type=email]:valid,nav .input-field input[type=search][type=url]:valid,nav .input-field input[type=search][type=date]:valid{border:none;box-shadow:none}nav .input-field label{top:0;left:0}nav .input-field label i{color:var(--font-on-primary-color-medium);transition:color .3s}nav .input-field label.active i{color:var(--md-sys-color-on-primary)}.navbar-fixed{position:relative;height:var(--navbar-height-mobile);z-index:997}.navbar-fixed nav{position:fixed;right:0}@media only screen and (min-width : 601px){nav.nav-extended .nav-wrapper{min-height:var(--navbar-height-mobile)}nav,nav .nav-wrapper i,nav a.sidenav-trigger,nav a.sidenav-trigger i{height:var(--navbar-height);line-height:var(--navbar-height)}.navbar-fixed{height:var(--navbar-height)}}a{text-decoration:none}html{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-weight:normal;color:var(--md-sys-color-on-background)}@media only screen and (min-width: 0){html{font-size:14px}}@media only screen and (min-width: 993px){html{font-size:14.5px}}@media only screen and (min-width: 1201px){html{font-size:15px}}h1,h2,h3,h4,h5,h6{font-weight:400;line-height:1.3}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{font-weight:inherit}h1{font-size:4.2rem;line-height:110%;margin:2.8rem 0 1.68rem 0}h2{font-size:3.56rem;line-height:110%;margin:2.3733333333rem 0 1.424rem 0}h3{font-size:2.92rem;line-height:110%;margin:1.9466666667rem 0 1.168rem 0}h4{font-size:2.28rem;line-height:110%;margin:1.52rem 0 .912rem 0}h5{font-size:1.64rem;line-height:110%;margin:1.0933333333rem 0 .656rem 0}h6{font-size:1.15rem;line-height:110%;margin:.7666666667rem 0 .46rem 0}em{font-style:italic}strong{font-weight:500}small{font-size:75%}.light{font-weight:300}.thin{font-weight:200}@media only screen and (min-width: 360px){.flow-text{font-size:1.2rem}}@media only screen and (min-width: 390px){.flow-text{font-size:1.224rem}}@media only screen and (min-width: 420px){.flow-text{font-size:1.248rem}}@media only screen and (min-width: 450px){.flow-text{font-size:1.272rem}}@media only screen and (min-width: 480px){.flow-text{font-size:1.296rem}}@media only screen and (min-width: 510px){.flow-text{font-size:1.32rem}}@media only screen and (min-width: 540px){.flow-text{font-size:1.344rem}}@media only screen and (min-width: 570px){.flow-text{font-size:1.368rem}}@media only screen and (min-width: 600px){.flow-text{font-size:1.392rem}}@media only screen and (min-width: 630px){.flow-text{font-size:1.416rem}}@media only screen and (min-width: 660px){.flow-text{font-size:1.44rem}}@media only screen and (min-width: 690px){.flow-text{font-size:1.464rem}}@media only screen and (min-width: 720px){.flow-text{font-size:1.488rem}}@media only screen and (min-width: 750px){.flow-text{font-size:1.512rem}}@media only screen and (min-width: 780px){.flow-text{font-size:1.536rem}}@media only screen and (min-width: 810px){.flow-text{font-size:1.56rem}}@media only screen and (min-width: 840px){.flow-text{font-size:1.584rem}}@media only screen and (min-width: 870px){.flow-text{font-size:1.608rem}}@media only screen and (min-width: 900px){.flow-text{font-size:1.632rem}}@media only screen and (min-width: 930px){.flow-text{font-size:1.656rem}}@media only screen and (min-width: 960px){.flow-text{font-size:1.68rem}}@media only screen and (max-width: 360px){.flow-text{font-size:1.2rem}}.scale-transition{transition:transform .3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important}.scale-transition.scale-out{transform:scale(0);transition:transform .2s !important}.scale-transition.scale-in{transform:scale(1)}.card-panel{transition:box-shadow .25s;padding:24px;margin:.5rem 0 1rem 0;border-radius:12px;background-color:var(--md-sys-color-surface)}.card{overflow:hidden;position:relative;background-color:var(--md-sys-color-surface);transition:box-shadow .25s;border-radius:12px}.card .card-title{font-size:24px;font-weight:300}.card.small,.card.medium,.card.large{position:relative}.card.small .card-image,.card.medium .card-image,.card.large .card-image{max-height:60%;overflow:hidden}.card.small .card-image+.card-content,.card.medium .card-image+.card-content,.card.large .card-image+.card-content{max-height:40%}.card.small .card-content,.card.medium .card-content,.card.large .card-content{max-height:100%;overflow:hidden}.card.small .card-action,.card.medium .card-action,.card.large .card-action{position:absolute;bottom:0;left:0;right:0}.card.small{height:300px}.card.medium{height:400px}.card.large{height:500px}.card.horizontal{display:flex}.card.horizontal.small .card-image,.card.horizontal.medium .card-image,.card.horizontal.large .card-image{height:100%;max-height:none;overflow:visible}.card.horizontal.small .card-image img,.card.horizontal.medium .card-image img,.card.horizontal.large .card-image img{height:100%}.card.horizontal .card-image{max-width:50%}.card.horizontal .card-image img{border-radius:2px 0 0 2px;max-width:100%;width:auto}.card.horizontal .card-stacked{display:flex;flex-direction:column;flex:1;position:relative}.card.horizontal .card-stacked .card-content{flex-grow:1}.card.sticky-action .card-action{z-index:2}.card.sticky-action .card-reveal{z-index:1;padding-bottom:64px}.card .card-image{position:relative}.card .card-image img{display:block;border-radius:2px 2px 0 0;position:relative;left:0;right:0;top:0;bottom:0;width:100%}.card .card-image .card-title{color:var(--md-sys-color-surface);position:absolute;bottom:0;left:0;max-width:100%;padding:24px}.card .card-image .activator{position:absolute;left:0;right:0;top:0;bottom:0;cursor:pointer}.card .card-content{padding:24px;border-radius:0 0 2px 2px}.card .card-content p{margin:0}.card .card-content .card-title{display:block;line-height:32px;margin-bottom:8px}.card .card-content .card-title i{line-height:32px}.card .card-content .card-title.activator{cursor:pointer}.card .card-action{border-top:1px solid var(--md-sys-color-outline-variant);position:relative;background-color:inherit}.card .card-action:last-child{border-radius:0 0 2px 2px}.card .card-action a{padding:16px 24px;display:inline-block}.card .card-action a:not(.btn):not(.btn-small):not(.btn-large):not(.btn-large):not(.btn-floating){color:var(--md-sys-color-primary);transition:color .3s ease}.card .card-action a:not(.btn):not(.btn-small):not(.btn-large):not(.btn-large):not(.btn-floating):hover{background-color:rgba(var(--md-sys-color-primary-numeric), 0.06)}.card .card-reveal{padding:24px;position:absolute;background-color:var(--md-sys-color-surface);width:100%;overflow-y:auto;left:0;top:100%;height:100%;z-index:3;display:none}.card .card-reveal .card-title{cursor:pointer;display:block}#toast-container{display:block;position:fixed;z-index:10000}@media only screen and (max-width : 600.99px){#toast-container{min-width:100%;bottom:0%}}@media only screen and (min-width : 601px)and (max-width : 992.99px){#toast-container{left:5%;bottom:7%;max-width:90%}}@media only screen and (min-width : 993px){#toast-container{top:10%;right:7%;max-width:86%}}.toast{border-radius:4px;top:35px;width:auto;margin-top:10px;position:relative;max-width:100%;height:auto;min-height:48px;padding-left:16px;padding-right:12px;font-size:14px;font-weight:500;line-height:20px;color:var(--md-sys-color-inverse-on-surface);background-color:var(--md-sys-color-inverse-surface);display:flex;align-items:center;justify-content:space-between;cursor:default}.toast .toast-action{color:var(--md-sys-color-inverse-primary);font-weight:500;margin-right:-25px;margin-left:3rem}.toast.rounded{border-radius:24px}@media only screen and (max-width : 600.99px){.toast{width:100%;border-radius:0}}.tabs{padding-left:0;list-style-type:none;position:relative;overflow-x:auto;overflow-y:hidden;width:100%;background-color:var(--md-sys-color-surface);margin:0 auto;white-space:nowrap}.tabs.tabs-transparent{background-color:rgba(0,0,0,0)}.tabs.tabs-transparent .tab a{color:var(--font-on-primary-color-medium)}.tabs.tabs-transparent .tab.disabled a,.tabs.tabs-transparent .tab.disabled a:hover,.tabs.tabs-transparent .tab.disabled a:focus{color:rgba(255,255,255,.38)}.tabs.tabs-transparent .tab a:hover{background-color:rgba(0,0,0,.04)}.tabs.tabs-transparent .tab a.active,.tabs.tabs-transparent .tab a:focus{background-color:rgba(0,0,0,0)}.tabs.tabs-transparent .tab a:hover,.tabs.tabs-transparent .tab a.active,.tabs.tabs-transparent .tab a:focus{color:var(--md-sys-color-on-primary)}.tabs.tabs-transparent .indicator{background-color:var(--md-sys-color-on-primary)}.tabs.tabs-fixed-width{display:flex}.tabs.tabs-fixed-width .tab{flex-grow:1}.tabs .tab{padding-left:0;list-style-type:none;display:inline-block;text-align:center;line-height:48px;padding:0;margin:0}.tabs .tab i.material-icons{position:relative;top:8px;vertical-align:middle}.tabs .tab span{height:24px;line-height:20px}.tabs .tab a{color:var(--md-sys-color-on-surface-variant);display:flex;flex-direction:column;width:100%;height:100%;min-height:48px;padding:0 24px;font-size:14px;text-overflow:ellipsis;overflow:hidden;transition:color .28s ease,background-color .28s ease}.tabs .tab a.active{background-color:rgba(0,0,0,0)}.tabs .tab a.active,.tabs .tab a:focus,.tabs .tab a:hover{color:var(--md-sys-color-primary)}.tabs .tab a:hover{background-color:rgba(var(--md-sys-color-primary-numeric), 0.06)}.tabs .tab a:focus,.tabs .tab a.active{background-color:rgba(var(--md-sys-color-primary-numeric), 0.18);outline:none}.tabs .tab.disabled a,.tabs .tab.disabled a:hover{color:var(--md-sys-color-on-surface);cursor:default;background-color:rgba(0,0,0,0)}.tabs .tab.disabled a:not(:focus),.tabs .tab.disabled a:hover:not(:focus){background-color:rgba(0,0,0,0)}.tabs .indicator{position:absolute;bottom:0;height:3px;background-color:var(--md-sys-color-primary);will-change:left,right;border-radius:3px 3px 0 0}.tabs.tabs-horizontal .tab{height:48px}.tabs.tabs-horizontal .tab a{display:block}.tabs.tabs-horizontal .tab i.material-icons{padding:0 4px;position:relative;top:-2px;vertical-align:middle}@media only screen and (max-width : 992.99px){.tabs{display:flex}.tabs .tab{flex-grow:1}.tabs .tab a{padding:0 12px}}.material-tooltip{padding:0 8px;border-radius:4px;color:var(--md-sys-color-inverse-on-surface);background-color:var(--md-sys-color-inverse-surface);font-family:var(--md-sys-typescale-body-small-font-family-name);font-size:var(--md-sys-typescale-body-small-font-size);line-height:var(--md-sys-typescale-body-small-line-height);font-weight:var(--md-sys-typescale-body-small-font-weight);min-height:24px;opacity:0;padding-top:6px;padding-bottom:6px;font-size:12px;line-height:16px;font-weight:400;letter-spacing:.4px;position:absolute;max-width:300px;overflow:hidden;left:0;top:0;pointer-events:none;display:flex;align-items:center;visibility:hidden;z-index:2000}.backdrop{position:absolute;opacity:0;height:7px;width:14px;border-radius:0 0 50% 50%;background-color:var(--md-sys-color-inverse-surface);z-index:-1;transform-origin:50% 0;visibility:hidden}.btn,.btn-small,.btn-large,.btn-floating,.btn-flat{--btn-height: 40px;--btn-font-size-icon: 16px;--btn-padding: 24px;--btn-padding-icon: 16px;--btn-gap-icon: 8px;--btn-border-radius: 4px;--btn-font-size: 14px;height:var(--btn-height);border:none;border-radius:var(--btn-border-radius);padding-left:var(--btn-padding);padding-right:var(--btn-padding);font-size:var(--btn-font-size);font-weight:500;text-decoration:none;display:inline-flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);white-space:nowrap;outline:0;user-select:none;transition:background-color .2s ease-out}.btn.icon-left,.icon-left.btn-small,.icon-left.btn-large,.btn.icon-right,.icon-right.btn-small,.icon-right.btn-large{position:relative}.btn.icon-left,.icon-left.btn-small,.icon-left.btn-large{padding-left:calc(var(--btn-padding-icon) + var(--btn-font-size-icon) + var(--btn-gap-icon))}.btn.icon-right,.icon-right.btn-small,.icon-right.btn-large{padding-right:calc(var(--btn-padding-icon) + var(--btn-font-size-icon) + var(--btn-gap-icon))}.btn.icon-left i,.icon-left.btn-small i,.icon-left.btn-large i,.btn.icon-right i,.icon-right.btn-small i,.icon-right.btn-large i{position:absolute;font-size:var(--btn-font-size-icon)}.btn.icon-left i,.icon-left.btn-small i,.icon-left.btn-large i{left:var(--btn-padding-icon)}.btn.icon-right i,.icon-right.btn-small i,.icon-right.btn-large i{right:var(--btn-padding-icon)}.btn.filled,.filled.btn-small,.filled.btn-large{color:var(--md-sys-color-on-primary);background-color:var(--md-sys-color-primary)}.btn.tonal,.tonal.btn-small,.tonal.btn-large{color:var(--md-sys-color-on-secondary-container);background-color:var(--md-sys-color-secondary-container)}.btn.elevated,.elevated.btn-small,.elevated.btn-large{color:var(--md-sys-color-on-secondary-container);background-color:var(--md-sys-color-secondary-container)}.btn.outlined,.outlined.btn-small,.outlined.btn-large{background-color:rgba(0,0,0,0);color:var(--md-sys-color-primary);border:1px solid var(--md-sys-color-outline)}.btn.text,.text.btn-small,.text.btn-large,.btn-flat{color:var(--md-sys-color-primary);background-color:rgba(0,0,0,0)}.btn.disabled,.btn-floating.disabled,.btn-large.disabled,.btn-small.disabled,.btn-flat.disabled,.btn:disabled,.btn-floating:disabled,.btn-large:disabled,.btn-small:disabled,.btn-flat:disabled,.btn[disabled],.btn-floating[disabled],.btn-large[disabled],.btn-small[disabled],.btn-flat[disabled]{color:color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 76%);background-color:color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 24%);pointer-events:none;box-shadow:none;cursor:default}.btn.elevated:hover,.elevated.btn-small:hover,.elevated.btn-large:hover{color:var(--md-sys-color-primary);background-color:color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%)}.btn.filled:hover,.filled.btn-small:hover,.filled.btn-large:hover{color:var(--md-sys-color-on-primary);background-color:color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 16%)}.btn.tonal:hover,.tonal.btn-small:hover,.tonal.btn-large:hover{color:var(--md-sys-color-on-secondary-container);background-color:color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%)}.btn.outlined:hover,.outlined.btn-small:hover,.outlined.btn-large:hover{color:var(--md-sys-color-primary);background-color:color-mix(in srgb, transparent, var(--md-sys-color-primary) 16%)}.btn.text:hover,.text.btn-small:hover,.text.btn-large:hover{color:var(--md-sys-color-primary);background-color:color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent)}.btn:focus.elevated,.btn-small:focus.elevated,.btn-large:focus.elevated{color:var(--md-sys-color-primary);background-color:color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-primary) 20%)}.btn:focus.filled,.btn-small:focus.filled,.btn-large:focus.filled{color:var(--md-sys-color-on-primary);background-color:color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 20%)}.btn:focus.tonal,.btn-small:focus.tonal,.btn-large:focus.tonal{color:var(--md-sys-color-on-secondary-container);background-color:color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 20%)}.btn:focus.outlined,.btn-small:focus.outlined,.btn-large:focus.outlined{color:var(--md-sys-color-primary);background-color:color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);border:1px solid var(--md-sys-color-primary)}.btn:focus.text,.btn-small:focus.text,.btn-large:focus.text{color:var(--md-sys-color-primary);background-color:color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%)}.btn:focus-visible.filled,.btn-small:focus-visible.filled,.btn-large:focus-visible.filled,.btn:focus-visible.elevated,.btn-small:focus-visible.elevated,.btn-large:focus-visible.elevated,.btn:focus-visible.tonal,.btn-small:focus-visible.tonal,.btn-large:focus-visible.tonal,.btn:focus-visible.outlined,.btn-small:focus-visible.outlined,.btn-large:focus-visible.outlined,.btn:focus-visible.text,.btn-small:focus-visible.text,.btn-large:focus-visible.text{outline:3px solid var(--md-sys-color-secondary);outline-offset:2px}.btn-floating{width:40px;height:40px;color:var(--md-sys-color-on-primary-container);background-color:var(--md-sys-color-primary-container);border-radius:16px;padding:0;display:grid;grid-auto-flow:column;align-items:center;position:relative;overflow:hidden;z-index:1;transition:background-color .3s;cursor:pointer;vertical-align:middle}.btn-floating:hover{background-color:color-mix(in srgb, var(--md-sys-color-primary-container), var(--md-sys-color-on-primary-container) 16%)}.btn-floating:focus{background-color:var(--md-ref-palette-secondary80)}.btn-floating:before{border-radius:0}.btn-floating.btn-large{width:56px;height:56px;padding:0}.btn-floating.btn-large.halfway-fab{bottom:-28px}.btn-floating.btn-small{--btn-small-height: calc(0.75 * var(--btn-height));width:var(--btn-small-height);height:var(--btn-small-height)}.btn-floating.btn-small.halfway-fab{bottom:calc(var(--btn-small-height)*-0.5)}.btn-floating.halfway-fab{position:absolute;right:24px;bottom:-20px}.btn-floating.halfway-fab.left{right:auto;left:24px}.btn-floating i{color:var(--md-sys-color-on-secondary);font-size:1.6rem;width:inherit;display:inline-block;text-align:center}button.btn-floating{border:none}.fixed-action-btn{position:fixed;right:23px;bottom:23px;padding-top:15px;margin-bottom:0;z-index:997}.fixed-action-btn.active ul{visibility:visible;padding-left:0;list-style-type:none}.fixed-action-btn.direction-left,.fixed-action-btn.direction-right{padding:0 0 0 15px}.fixed-action-btn.direction-left ul,.fixed-action-btn.direction-right ul{text-align:right;right:64px;top:50%;transform:translateY(-50%);height:100%;left:auto;width:500px}.fixed-action-btn.direction-left ul li,.fixed-action-btn.direction-right ul li{display:inline-block;margin:7.5px 15px 0 0}.fixed-action-btn.direction-right{padding:0 15px 0 0}.fixed-action-btn.direction-right ul{text-align:left;direction:rtl;left:64px;right:auto}.fixed-action-btn.direction-right ul li{margin:7.5px 0 0 15px}.fixed-action-btn.direction-bottom{padding:0 0 15px 0}.fixed-action-btn.direction-bottom ul{top:64px;bottom:auto;display:flex;flex-direction:column-reverse}.fixed-action-btn.direction-bottom ul li{margin:15px 0 0 0}.fixed-action-btn.toolbar{padding:0;height:56px}.fixed-action-btn.toolbar.active>a i{opacity:0}.fixed-action-btn.toolbar ul{display:flex;top:0;bottom:0;z-index:1}.fixed-action-btn.toolbar ul li{flex:1;display:inline-block;margin:0;height:100%;transition:none}.fixed-action-btn.toolbar ul li a{display:block;overflow:hidden;position:relative;width:100%;height:100%;background-color:rgba(0,0,0,0);box-shadow:none;color:var(--md-sys-color-on-secondary);line-height:56px;z-index:1}.fixed-action-btn.toolbar ul li a i{line-height:inherit}.fixed-action-btn ul{left:0;right:0;text-align:center;position:absolute;bottom:64px;margin:0;visibility:hidden}.fixed-action-btn ul li{margin-bottom:15px}.fixed-action-btn ul a.btn-floating{opacity:0}.fixed-action-btn .fab-backdrop{position:absolute;top:0;left:0;z-index:-1;width:40px;height:40px;background-color:var(--md-sys-color-secondary);border-radius:16px;transform:scale(0)}.btn-large{height:calc(1.5*var(--btn-height));font-size:18px;padding:0 28px}.btn-large i{font-size:1.6rem}.btn-small{height:calc(.75*var(--btn-height));font-size:13px}.btn-small i{font-size:1.2rem}.btn-block{display:block}.btn.rounded,.rounded.btn-large,.rounded.btn-small{border-radius:99999px}[popover]{outline:none;padding:0;border:none}.dropdown-content{padding-left:0;list-style-type:none;background-color:var(--md-sys-color-surface);margin:0;display:none;min-width:100px;overflow-y:auto;opacity:0;position:absolute;left:0;top:0;z-index:9999;transform-origin:0 0;user-select:none}.dropdown-content li{clear:both;color:var(--md-sys-color-on-background);cursor:pointer;min-height:50px;line-height:1.5rem;width:100%;text-align:left}.dropdown-content li.divider{min-height:0;height:1px}.dropdown-content li>a,.dropdown-content li>span{font-size:16px;color:var(--md-sys-color-primary);display:block;line-height:22px;padding:14px 16px}.dropdown-content li>span>label{top:1px;left:0;height:18px}.dropdown-content li>a>i{height:inherit;line-height:inherit;float:left;margin:0 24px 0 0;width:24px}.dropdown-content li:not(.disabled):hover,.dropdown-content li.active{background-color:color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-on-surface) 8%)}body.keyboard-focused .dropdown-content li:focus{background-color:rgba(0,0,0,.12)}.input-field.col .dropdown-content [type=checkbox]+label{top:1px;left:0;height:18px;transform:none}.dropdown-trigger{cursor:pointer}.modal{--modal-footer-divider-height: 1px;--modal-border-radius: 28px;--modal-padding: 24px;--modal-padding-bottom: 16px;border:none;outline:none;padding:0;max-height:70%;width:55%;border-radius:var(--modal-border-radius);will-change:top,opacity;background-color:color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-surface-tint) 17%)}.modal[open]{display:flex;flex-direction:column}@media only screen and (max-width : 992.99px){.modal{width:80%}}.modal::backdrop{backdrop-filter:blur(1px)}.modal .modal-header{padding:var(--modal-padding);padding-bottom:var(--modal-padding-bottom);flex-shrink:0}.modal .modal-content{padding:0 var(--modal-padding);overflow-y:auto}.modal .modal-footer{border-radius:0 0 var(--modal-border-radius) var(--modal-border-radius);padding:var(--modal-padding);text-align:right;flex-shrink:0}.modal .modal-close{cursor:pointer}.modal h1,.modal h2,.modal h3,.modal h4,.modal h5,.modal h6{margin:0}.modal.bottom-sheet{margin-bottom:0;max-height:45%;border-bottom-left-radius:0;border-bottom-right-radius:0;will-change:bottom,opacity}.collapsible{padding-left:0;list-style-type:none;border-top:1px solid var(--md-sys-color-outline-variant);border-right:1px solid var(--md-sys-color-outline-variant);border-left:1px solid var(--md-sys-color-outline-variant);margin:.5rem 0 1rem 0}.collapsible-header{display:flex;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);line-height:1.5;padding:1rem;border-bottom:1px solid var(--md-sys-color-outline-variant)}.collapsible-header:focus{outline:0}.collapsible-header i{width:2rem;font-size:1.6rem;display:inline-block;text-align:center;margin-right:1rem}.collapsible-header::after{content:"";margin-left:.5rem;font-family:"Material Symbols Outlined","Material Symbols Rounded","Material Symbols Sharp","Material Icons";font-size:25px;line-height:.9;-webkit-font-smoothing:antialiased}.active .collapsible-header::after{content:""}.keyboard-focused .collapsible-header:focus{background-color:rgba(0,0,0,.12)}.collapsible-header-content{flex-grow:1}.collapsible-body{max-height:0;border-bottom:1px solid var(--md-sys-color-outline-variant);box-sizing:border-box;padding:0 2rem;overflow:hidden}.collapsible.popout{border:none;box-shadow:none}.collapsible.popout>li{box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);margin:0 24px;transition:margin .35s cubic-bezier(0.25, 0.46, 0.45, 0.94)}.collapsible.popout>li.active{box-shadow:0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15);margin:16px 0}.chip{--font-size: 14px;--font-size-icon: 18px;--padding: 8px;color:var(--md-sys-color-on-surface-variant);background-color:rgba(0,0,0,.09);display:inline-flex;white-space:nowrap;gap:8px;margin:0;height:32px;padding-left:var(--padding);padding-right:var(--padding);font-size:var(--font-size);font-weight:500;border-radius:8px;align-items:center;user-select:none;vertical-align:top}.chip:focus{outline:none;background-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}.chip.outlined{background-color:rgba(0,0,0,0);border-color:var(--md-sys-color-outline);border-width:1px;border-style:solid}.chip>img{margin:0;width:24px;height:24px;object-fit:cover;border-radius:12px}.chip>.material-icons{font-size:var(--font-size-icon)}.chip .close{border-radius:50%;height:24px;width:24px;padding:0;display:grid;justify-content:center;align-content:center;cursor:pointer}.chip .close:hover{background-color:rgba(136,136,136,.5333333333)}.chips{display:flex;gap:4px;flex-wrap:wrap;border:none;box-shadow:none;margin:0 0 8px 0;padding:4px;outline:none;transition:all .3s}.chips.focus{border-bottom:1px solid var(--md-sys-color-primary);box-shadow:0 1px 0 0 var(--md-sys-color-primary)}.chips.input-field{border-bottom:1px solid var(--md-sys-color-on-surface-variant)}.chips.input-field:hover{cursor:text}.chips input:not([type]):not(.browser-default).input{background:none;border:0;color:var(--md-sys-color-on-background);display:inline-block;font-size:16px;height:32px;outline:0;margin:0;padding:0;width:120px;width:fit-content;min-width:100px;max-width:200px}.chips input:not([type]):not(.browser-default).input:focus{border:0;box-shadow:none}.chips .autocomplete-content{margin-top:0;margin-bottom:0}.prefix~.chips{margin-left:3rem;width:92%;width:calc(100% - 3rem)}.suffix~.chips{margin-right:3rem;width:92%;width:calc(100% - 3rem)}.chips:empty~label{font-size:.8rem;transform:translateY(-140%)}.materialboxed{display:block;cursor:zoom-in;position:relative;transition:opacity .4s;-webkit-backface-visibility:hidden}.materialboxed:hover:not(.active){opacity:.8}.materialboxed.active{cursor:zoom-out}#materialbox-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--md-sys-color-background);z-index:1000;will-change:opacity}.materialbox-caption{position:fixed;display:none;color:var(--md-sys-color-on-background);line-height:50px;bottom:0;left:0;width:100%;text-align:center;padding:0% 15%;height:50px;z-index:1000;-webkit-font-smoothing:antialiased}select:focus{outline:1px solid var(--md-ref-palette-primary80)}label{font-size:.8rem;color:var(--md-sys-color-on-surface-variant)}::placeholder{color:var(--md-sys-color-on-surface-variant)}input:not([type]):not(.browser-default),input[type=text]:not(.browser-default),input[type=password]:not(.browser-default),input[type=email]:not(.browser-default),input[type=url]:not(.browser-default),input[type=time]:not(.browser-default),input[type=date]:not(.browser-default),input[type=datetime]:not(.browser-default),input[type=datetime-local]:not(.browser-default),input[type=month]:not(.browser-default),input[type=tel]:not(.browser-default),input[type=number]:not(.browser-default),input[type=search]:not(.browser-default),textarea.materialize-textarea{outline:none;color:var(--md-sys-color-on-background);width:100%;font-size:16px;height:56px}.input-field input.invalid,.input-field textarea.invalid{border-bottom:2px solid var(--md-sys-color-error);box-shadow:0 1px 0 0 var(--md-sys-color-error)}.input-field input.invalid~.supporting-text[data-error]>span,.input-field textarea.invalid~.supporting-text[data-error]>span{display:none}.input-field input.invalid~.supporting-text:after,.input-field textarea.invalid~.supporting-text:after{content:attr(data-error);color:var(--md-sys-color-error)}.input-field{--input-color: var(--md-sys-color-primary);position:relative;clear:both}.input-field input,.input-field textarea{box-sizing:border-box;padding:0 16px;padding-top:20px;background-color:var(--md-sys-color-surface);border:none;border-radius:4px;border-bottom:1px solid var(--md-sys-color-on-surface-variant);border-bottom-left-radius:0;border-bottom-right-radius:0}.input-field input:focus:not([readonly]),.input-field textarea:focus:not([readonly]){border-bottom:2px solid var(--input-color);padding-top:21px}.input-field input:disabled,.input-field input[readonly=readonly],.input-field textarea:disabled,.input-field textarea[readonly=readonly]{color:rgba(var(--md_sys_color_on-surface), 0.38);border-color:rgba(var(--md_sys_color_on-surface), 0.12);background-color:rgba(var(--md_sys_color_on-surface), 0.04)}.input-field input:focus:not([readonly])+label,.input-field textarea:focus:not([readonly])+label{color:var(--input-color)}.input-field input:focus:not([readonly])+label,.input-field input:not([placeholder=" "])+label,.input-field input:not(:placeholder-shown)+label,.input-field textarea:focus:not([readonly])+label,.input-field textarea:not([placeholder=" "])+label,.input-field textarea:not(:placeholder-shown)+label{transform:scale(0.75);top:8px}.input-field input:disabled+label,.input-field input[readonly=readonly]+label,.input-field textarea:disabled+label,.input-field textarea[readonly=readonly]+label{color:rgba(var(--md_sys_color_on-surface), 0.38)}.input-field input.invalid~label,.input-field input:focus.invalid~label,.input-field textarea.invalid~label,.input-field textarea:focus.invalid~label{color:var(--md-sys-color-error)}.input-field input::placeholder{user-select:none}.input-field>label{color:var(--md-sys-color-on-surface-variant);user-select:none;font-size:16px;position:absolute;left:16px;top:16px;cursor:text;transform-origin:top left;transition:left .2s ease-out,top .2s ease-out,transform .2s ease-out}.input-field .supporting-text{color:var(--md-sys-color-on-surface-variant);font-size:12px;padding:0 16px;margin-top:4px}.input-field .character-counter{color:var(--md-sys-color-on-surface-variant);font-size:12px;float:right;padding:0 16px;margin-top:4px}.input-field .prefix{position:absolute;left:12px;top:16px;user-select:none;display:flex;align-self:center}.input-field .suffix{position:absolute;right:12px;top:16px;user-select:none}.input-field .prefix~input,.input-field .prefix~textarea{padding-left:52px}.input-field .suffix~input,.input-field .suffix~textarea{padding-right:52px}.input-field .prefix~label{left:52px}.input-field.outlined input,.input-field.outlined textarea{padding-top:0;background-color:var(--md-sys-color-background);border:1px solid var(--md-sys-color-on-surface-variant);border-radius:4px}.input-field.outlined input:focus:not([readonly]),.input-field.outlined textarea:focus:not([readonly]){border:2px solid var(--input-color);padding-top:0;margin-left:-1px}.input-field.outlined input:focus:not([readonly])+label,.input-field.outlined textarea:focus:not([readonly])+label{color:var(--input-color)}.input-field.outlined input:focus:not([readonly])+label,.input-field.outlined input:not([placeholder=" "])+label,.input-field.outlined input:not(:placeholder-shown)+label,.input-field.outlined textarea:focus:not([readonly])+label,.input-field.outlined textarea:not([placeholder=" "])+label,.input-field.outlined textarea:not(:placeholder-shown)+label{top:-8px;left:16px;margin-left:-4px;padding:0 4px;background-color:var(--md-sys-color-background)}.input-field.outlined input:disabled,.input-field.outlined input[readonly=readonly],.input-field.outlined textarea:disabled,.input-field.outlined textarea[readonly=readonly]{color:rgba(var(--md_sys_color_on-surface), 0.38);border-color:rgba(var(--md_sys_color_on-surface), 0.12)}.input-field.error input,.input-field.error textarea{border-color:var(--md-sys-color-error)}.input-field.error input:focus:not([readonly]),.input-field.error textarea:focus:not([readonly]){border-color:var(--md-sys-color-error)}.input-field.error input:focus:not([readonly])+label,.input-field.error textarea:focus:not([readonly])+label{color:var(--md-sys-color-error)}.input-field.error label{color:var(--md-sys-color-error)}.input-field.error .supporting-text{color:var(--md-sys-color-error)}.input-field.error .suffix{color:var(--md-sys-color-error)}.searchbar .prefix{position:absolute;padding-left:1rem;top:0;user-select:none;display:flex;align-self:center}.searchbar>input{border-width:0;background-color:rgba(0,0,0,0);padding-left:3rem}.searchbar.has-sidebar{margin-left:0}@media only screen and (min-width : 993px){.searchbar.has-sidebar{margin-left:300px}}textarea{width:100%;height:3rem;background-color:rgba(0,0,0,0)}textarea.materialize-textarea{padding-top:26px !important;padding-bottom:4px !important;line-height:normal;overflow-y:hidden;resize:none;min-height:3rem;box-sizing:border-box}.hiddendiv{visibility:hidden;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;padding-top:1.2rem;position:absolute;top:0;z-index:-1}.autocomplete-content li .highlight{color:var(--md-sys-color-on-background)}.autocomplete-content li img{height:40px;width:40px;margin:5px 15px}.datepicker-date-input{position:relative;text-indent:-9999px}.datepicker-date-input::after{display:block;position:absolute;top:1.1rem;content:attr(data-date);color:var(--input-color);text-indent:0}.datepicker-date-input:focus-visible{text-indent:0}.datepicker-date-input:focus-visible:after{text-indent:-9999px}[type=radio]:not(:checked),[type=radio]:checked{position:absolute;opacity:0;pointer-events:none}[type=radio]:not(:checked)+span,[type=radio]:checked+span{position:relative;padding-left:35px;cursor:pointer;display:inline-block;height:25px;line-height:25px;font-size:1rem;transition:.28s ease;user-select:none}[type=radio]+span:before,[type=radio]+span:after{content:"";position:absolute;left:0;top:0;margin:4px;width:16px;height:16px;z-index:0;transition:.28s ease}[type=radio]:not(:checked)+span:before,[type=radio]:not(:checked)+span:after,[type=radio]:checked+span:before,[type=radio]:checked+span:after,[type=radio].with-gap:checked+span:before,[type=radio].with-gap:checked+span:after{border-radius:50%}[type=radio]:not(:checked)+span:before,[type=radio]:not(:checked)+span:after{border:2px solid var(--md-sys-color-on-surface-variant)}[type=radio]:not(:checked)+span:after{transform:scale(0)}[type=radio]:checked+span:before{border:2px solid rgba(0,0,0,0)}[type=radio]:checked+span:after,[type=radio].with-gap:checked+span:before,[type=radio].with-gap:checked+span:after{border:2px solid var(--md-sys-color-primary)}[type=radio]:checked+span:after,[type=radio].with-gap:checked+span:after{background-color:var(--md-sys-color-primary)}[type=radio]:checked+span:after{transform:scale(1.02)}[type=radio].with-gap:checked+span:after{transform:scale(0.5)}[type=radio].tabbed:focus+span:before{box-shadow:0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18)}[type=radio].with-gap:disabled:checked+span:before{border:2px solid var(--md-sys-color-on-surface)}[type=radio].with-gap:disabled:checked+span:after{border:none;background-color:var(--md-sys-color-on-surface)}[type=radio]:disabled:not(:checked)+span:before,[type=radio]:disabled:checked+span:before{background-color:rgba(0,0,0,0);border-color:var(--md-sys-color-on-surface)}[type=radio]:disabled+span{color:var(--md-sys-color-on-surface)}[type=radio]:disabled:not(:checked)+span:before{border-color:var(--md-sys-color-on-surface)}[type=radio]:disabled:checked+span:after{background-color:var(--md-sys-color-on-surface);border-color:var(--md-sys-color-on-surface)}[type=checkbox]:not(:checked),[type=checkbox]:checked{position:absolute;opacity:0;pointer-events:none}[type=checkbox]+span:not(.lever){position:relative;padding-left:35px;cursor:pointer;display:inline-block;height:25px;line-height:25px;font-size:1rem;user-select:none}[type=checkbox]+span:not(.lever):before,[type=checkbox]:not(.filled-in)+span:not(.lever):after{content:"";position:absolute;top:0;left:0;width:18px;height:18px;z-index:0;border:2px solid var(--md-sys-color-on-surface-variant);border-radius:1px;margin-top:3px;transition:.2s}[type=checkbox]:not(.filled-in)+span:not(.lever):after{border:0;transform:scale(0)}[type=checkbox]:not(:checked):disabled+span:not(.lever):before{border:none;background-color:var(--md-sys-color-on-surface)}[type=checkbox].tabbed:focus+span:not(.lever):after{transform:scale(1);border:0;border-radius:50%;box-shadow:0 0 0 10px rgba(0,0,0,.12);background-color:rgba(0,0,0,.12)}[type=checkbox]:checked+span:not(.lever):before{top:-4px;left:-5px;width:12px;height:22px;border-top:2px solid rgba(0,0,0,0);border-left:2px solid rgba(0,0,0,0);border-right:2px solid var(--md-sys-color-primary);border-bottom:2px solid var(--md-sys-color-primary);transform:rotate(40deg);backface-visibility:hidden;transform-origin:100% 100%}[type=checkbox]:checked:disabled+span:before{border-right:2px solid var(--md-sys-color-on-surface);border-bottom:2px solid var(--md-sys-color-on-surface)}[type=checkbox]:indeterminate+span:not(.lever):before{top:-11px;left:-12px;width:10px;height:22px;border-top:none;border-left:none;border-right:2px solid var(--md-sys-color-primary);border-bottom:none;transform:rotate(90deg);backface-visibility:hidden;transform-origin:100% 100%}[type=checkbox]:indeterminate:disabled+span:not(.lever):before{border-right:2px solid var(--md-sys-color-on-surface);background-color:rgba(0,0,0,0)}[type=checkbox].filled-in+span:not(.lever):after{border-radius:2px}[type=checkbox].filled-in+span:not(.lever):before,[type=checkbox].filled-in+span:not(.lever):after{content:"";left:0;position:absolute;transition:border .25s,background-color .25s,width .2s .1s,height .2s .1s,top .2s .1s,left .2s .1s;z-index:1}[type=checkbox].filled-in:not(:checked)+span:not(.lever):before{width:0;height:0;border:3px solid rgba(0,0,0,0);left:6px;top:10px;transform:rotateZ(37deg);transform-origin:100% 100%}[type=checkbox].filled-in:not(:checked)+span:not(.lever):after{height:20px;width:20px;background-color:rgba(0,0,0,0);border:2px solid var(--md-sys-color-on-surface-variant);top:0px;z-index:0}[type=checkbox].filled-in:checked+span:not(.lever):before{top:0;left:1px;width:8px;height:13px;border-top:2px solid rgba(0,0,0,0);border-left:2px solid rgba(0,0,0,0);border-right:2px solid var(--md-sys-color-on-primary);border-bottom:2px solid var(--md-sys-color-on-primary);transform:rotateZ(37deg);transform-origin:100% 100%}[type=checkbox].filled-in:checked+span:not(.lever):after{top:0;width:20px;height:20px;border:2px solid var(--md-sys-color-primary);background-color:var(--md-sys-color-primary);z-index:0}[type=checkbox].filled-in.tabbed:focus+span:not(.lever):after{border-radius:2px;border-color:var(--md-sys-color-on-surface-variant) r;background-color:rgba(0,0,0,.12)}[type=checkbox].filled-in.tabbed:checked:focus+span:not(.lever):after{border-radius:2px;background-color:var(--md-sys-color-primary);border-color:var(--md-sys-color-primary)}[type=checkbox].filled-in:disabled:not(:checked)+span:not(.lever):before{background-color:rgba(0,0,0,0);border:2px solid rgba(0,0,0,0)}[type=checkbox].filled-in:disabled:not(:checked)+span:not(.lever):after{border-color:rgba(0,0,0,0);background-color:var(--md-sys-color-on-surface)}[type=checkbox].filled-in:disabled:checked+span:not(.lever):before{background-color:rgba(0,0,0,0)}[type=checkbox].filled-in:disabled:checked+span:not(.lever):after{background-color:var(--md-sys-color-on-surface);border-color:var(--md-sys-color-on-surface)}.switch{--track-height: 32px;--track-width: 52px;--border-width: 2px;--size-off: 16px;--size-on: 24px;--icon-size: 16px;--gap-on: calc(((var(--track-height) - var(--size-on)) / 2) - var(--border-width));--gap-off: calc(((var(--track-height) - var(--size-off)) / 2) - var(--border-width))}.switch,.switch *{-webkit-tap-highlight-color:rgba(0,0,0,0);user-select:none}.switch label{cursor:pointer}.switch label input[type=checkbox]{opacity:0;width:0;height:0}.switch label input[type=checkbox]:checked+.lever{background-color:var(--md-sys-color-primary);border-color:var(--md-sys-color-primary)}.switch label input[type=checkbox]:checked+.lever:before,.switch label input[type=checkbox]:checked+.lever:after{top:var(--gap-on);left:calc(var(--track-width) - var(--size-on) - var(--gap-on) - 2*var(--border-width));width:var(--size-on);height:var(--size-on)}.switch label .lever{content:"";display:inline-block;position:relative;width:var(--track-width);height:var(--track-height);border-style:solid;border-width:2px;border-color:var(--md-sys-color-outline);background-color:var(--md-sys-color-surface-variant);border-radius:15px;margin-right:10px;transition:background .3s ease;vertical-align:middle;margin:0 16px}.switch label .lever:before,.switch label .lever:after{content:"";position:absolute;display:inline-block;width:var(--size-off);height:var(--size-off);border-radius:50%;left:var(--gap-off);top:var(--gap-off);transition:left .3s ease,background .3s ease,box-shadow .1s ease,transform .1s ease}.switch label .lever:after{height:var(--size-off);width:var(--size-off)}input[type=checkbox]:not(:disabled)~.lever:active:before,input[type=checkbox]:not(:disabled).tabbed:focus~.lever::before,input[type=checkbox]:not(:disabled)~.lever:hover::before{transform:scale(2.4)}input[type=checkbox]:checked:not(:disabled)~.lever:hover::before{background-color:rgba(var(--md-sys-color-primary-numeric), 0.06)}input[type=checkbox]:checked:not(:disabled)~.lever:active::before,input[type=checkbox]:checked:not(:disabled).tabbed:focus~.lever::before{background-color:rgba(var(--md-sys-color-primary-numeric), 0.18)}input[type=checkbox]:not(:disabled)~.lever:hover::before{background-color:rgba(0,0,0,.04)}input[type=checkbox]:not(:disabled)~.lever:active:before,input[type=checkbox]:not(:disabled).tabbed:focus~.lever::before{background-color:rgba(0,0,0,.12)}.switch input[type=checkbox][disabled]+.lever{cursor:default;opacity:.5}select.browser-default{opacity:1;color:var(--md-sys-color-on-background)}select{opacity:0;background-color:var(--md-sys-color-surface);width:100%;padding:5px;border:1px solid var(--md-sys-color-outline-variant);border-radius:2px;height:3rem}.select-wrapper{position:relative}.select-wrapper .caret{position:absolute;right:0;top:0;bottom:0;margin:auto 0;z-index:0;fill:var(--md-sys-color-on-background)}.select-wrapper .hide-select{width:0;height:0;overflow:hidden;position:absolute;top:0;z-index:-1}select:disabled{color:var(--md-sys-color-on-surface)}.select-wrapper.disabled+label{color:var(--md-sys-color-on-surface)}.select-wrapper.disabled .caret{fill:var(--md-sys-color-on-surface)}.select-wrapper input.select-dropdown:disabled{color:var(--md-sys-color-on-surface);cursor:default;user-select:none}.select-wrapper i{color:var(--md-sys-color-on-surface)}.select-dropdown li.disabled,.select-dropdown li.disabled>span,.select-dropdown li.optgroup{color:var(--md-sys-color-on-surface)}.select-dropdown li img{height:40px;width:40px;margin:5px 15px;float:right}.select-dropdown li.optgroup{border-top:1px solid rgba(0,0,0,.04)}.select-dropdown li.optgroup.selected>span{color:var(--md-sys-color-on-background)}.select-dropdown li.optgroup>span{color:var(--md-sys-color-on-surface-variant)}.select-dropdown li.optgroup~li.optgroup-option{padding-left:1rem}.file-field{display:grid;grid-template-columns:min-content auto;gap:10px}.file-field .file-path-wrapper{overflow:hidden}.file-field input.file-path{width:100%}.file-field .btn,.file-field .btn-large,.file-field .btn-small{height:3rem;line-height:3rem}.file-field span{cursor:pointer}.file-field input[type=file]{position:absolute;top:0;right:0;left:0;bottom:0;cursor:pointer;width:100%;margin:0;padding:0;opacity:0;font-size:20px;filter:alpha(opacity=0)}.file-field input[type=file]::-webkit-file-upload-button{display:none}.range-field{position:relative}input[type=range],input[type=range]+.thumb{cursor:pointer}input[type=range]{position:relative;background-color:rgba(0,0,0,0);border:none;outline:none;width:100%;margin:15px 0;padding:0}input[type=range]:focus{outline:none}input[type=range]+.thumb{position:absolute;top:10px;left:0;border:none;height:0;width:0;border-radius:50%;background-color:var(--md-sys-color-primary);margin-left:7px;transform-origin:50% 50%;transform:rotate(-45deg)}input[type=range]+.thumb .value{display:block;width:30px;text-align:center;color:var(--md-sys-color-primary);font-size:0;transform:rotate(45deg)}input[type=range]+.thumb.active{border-radius:50% 50% 50% 0}input[type=range]+.thumb.active .value{color:var(--md-sys-color-on-primary);margin-left:-1px;margin-top:8px;font-size:10px}input[type=range]{-webkit-appearance:none}input[type=range]::-webkit-slider-runnable-track{height:3px;border:none}input[type=range]::-webkit-slider-thumb{border:none;height:14px;width:14px;border-radius:50%;background:var(--md-sys-color-primary);transition:box-shadow .3s;-webkit-appearance:none;background-color:var(--md-sys-color-primary);transform-origin:50% 50%;margin:-5px 0 0 0}.keyboard-focused input[type=range]:focus:not(.active)::-webkit-slider-thumb{box-shadow:0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18)}input[type=range]::-moz-range-track{height:3px;border:none}input[type=range]::-moz-focus-inner{border:0}input[type=range]::-moz-range-thumb{border:none;height:14px;width:14px;border-radius:50%;background:var(--md-sys-color-primary);transition:box-shadow .3s;margin-top:-5px}input[type=range]:-moz-focusring{outline:1px solid #fff;outline-offset:-1px}.keyboard-focused input[type=range]:focus:not(.active)::-moz-range-thumb{box-shadow:0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18)}input[type=range]::-ms-track{height:3px;background:rgba(0,0,0,0);border-color:rgba(0,0,0,0);border-width:6px 0;color:rgba(0,0,0,0)}input[type=range]::-ms-fill-lower,input[type=range]::-moz-range-progress{background:var(--md-sys-color-primary)}input[type=range]::-ms-fill-upper,input[type=range]::-moz-range-track{background:var(--md-sys-color-shadow-light)}input[type=range]::-ms-thumb{border:none;height:14px;width:14px;border-radius:50%;background:var(--md-sys-color-primary);transition:box-shadow .3s}.keyboard-focused input[type=range]:focus:not(.active)::-ms-thumb{box-shadow:0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18)}.table-of-contents{list-style:none}.table-of-contents.fixed{position:fixed}.table-of-contents li{padding:0}.table-of-contents a{display:inline-block;font-weight:400;color:var(--md-sys-color-secondary);padding-left:16px;height:2rem;line-height:2rem;border-left:1px solid var(--md-sys-color-outline-variant)}.table-of-contents a:hover{color:var(--md-sys-color-on-background);padding-left:15px}.table-of-contents a.active{color:var(--md-sys-color-primary);font-weight:500;padding-left:14px;border-left:2px solid var(--md-sys-color-primary)}.sidenav{--sidenav-width: 300px;--sidenav-font-size: 14px;--sidenav-padding: 16px;--sidenav-item-height: 48px;--sidenav-line-height: var(--sidenav-item-height);position:fixed;width:var(--sidenav-width);left:0;top:0;margin:0;transform:translateX(-100%);height:100vh;padding:0;z-index:999;overflow-y:auto;will-change:transform;backface-visibility:hidden;transform:translateX(-105%);user-select:none;color:var(--md-sys-color-on-secondary-container);background-color:var(--md-sys-color-surface)}.sidenav.right-aligned{right:0;transform:translateX(105%);left:auto;transform:translateX(100%)}.sidenav .collapsible{margin:0}.sidenav a:focus{background-color:rgba(0,0,0,.12)}.sidenav li.active>a:not(.collapsible-header):not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-small):not(.btn-flat):not(.btn-large):not(.btn-floating){background-color:color-mix(in srgb, var(--md-sys-color-secondary) 10%, transparent)}.sidenav .collapsible-body>ul{padding-left:10px}.sidenav li{list-style:none;display:grid;align-content:center}.sidenav li>a{margin:0 12px;padding:0 var(--sidenav-padding);display:flex;height:var(--sidenav-item-height);font-size:var(--sidenav-font-size);font-weight:500;align-items:center;overflow:hidden;border-radius:100px}.sidenav li>a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-flat):not(.btn-large):not(.btn-floating){color:var(--md-sys-color-on-secondary-container)}.sidenav li>a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-flat):not(.btn-large):not(.btn-floating):hover{background-color:color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)}.sidenav li>a.btn,.sidenav li>a.btn-small,.sidenav li>a.btn-large,.sidenav li>a.btn-flat,.sidenav li>a.btn-floating{margin:10px 15px}.sidenav li>a>.material-icons,.sidenav li>a>.material-symbols-outlined,.sidenav li>a>.material-symbols-rounded,.sidenav li>a>.material-symbols-sharp{display:inline-flex;vertical-align:middle;margin-right:12px}.sidenav .divider{margin:calc(var(--sidenav-padding)*.5) 0 0 0}.sidenav .subheader{cursor:initial;pointer-events:none;color:red;font-size:var(--sidenav-font-size);font-weight:500;line-height:var(--sidenav-line-height)}.sidenav .user-view{position:relative;padding:calc(var(--sidenav-padding)*2) calc(var(--sidenav-padding)*2) 0;margin-bottom:calc(var(--sidenav-padding)*.5)}.sidenav .user-view>a{height:auto;padding:0}.sidenav .user-view>a:hover{background-color:rgba(0,0,0,0)}.sidenav .user-view .background{overflow:hidden;position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1}.sidenav .user-view .circle,.sidenav .user-view .name,.sidenav .user-view .email{display:block}.sidenav .user-view .circle{height:64px;width:64px}.sidenav .user-view .name,.sidenav .user-view .email{font-size:var(--sidenav-font-size);line-height:calc(var(--sidenav-line-height)*.5)}.sidenav .user-view .name{margin-top:16px;font-weight:500}.sidenav .user-view .email{padding-bottom:16px;font-weight:400}.drag-target{height:100%;position:fixed;top:0;left:0;z-index:998}.drag-target.right-aligned{right:0}.sidenav.sidenav-fixed{left:0;transform:translateX(0);position:fixed}.sidenav.sidenav-fixed.right-aligned{right:0;left:auto}@media only screen and (max-width : 992.99px){.sidenav.sidenav-fixed{transform:translateX(-105%)}.sidenav.sidenav-fixed.right-aligned{transform:translateX(105%)}.sidenav>a{padding:0 var(--sidenav-padding)}.sidenav .user-view{padding:var(--sidenav-padding) var(--sidenav-padding) 0}}.sidenav .collapsible-body{padding:0}.sidenav-overlay{position:fixed;top:0;left:0;right:0;opacity:0;height:120vh;background-color:rgba(0,0,0,.5);z-index:997;display:none}.sidenav .collapsible,.sidenav.sidenav-fixed .collapsible{border:none;box-shadow:none}.sidenav .collapsible-header,.sidenav.sidenav-fixed .collapsible-header{border:none}.sidenav .collapsible-body,.sidenav.sidenav-fixed .collapsible-body{border:none}.progress{position:relative;height:4px;display:block;width:100%;border-radius:4px;margin:.5rem 0 1rem 0;overflow:hidden;background-color:var(--md-sys-color-secondary-container)}.progress .determinate{position:absolute;top:0;left:0;bottom:0;background-color:var(--md-sys-color-primary);transition:width .3s linear}.progress .indeterminate{background-color:var(--md-sys-color-primary)}.progress .indeterminate:before{content:"";position:absolute;background-color:inherit;top:0;left:0;bottom:0;will-change:left,right;animation:indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite}.progress .indeterminate:after{content:"";position:absolute;background-color:inherit;top:0;left:0;bottom:0;will-change:left,right;animation:indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;animation-delay:1.15s}@keyframes indeterminate{0%{left:-35%;right:100%}60%{left:100%;right:-90%}100%{left:100%;right:-90%}}@keyframes indeterminate-short{0%{left:-200%;right:100%}60%{left:107%;right:-8%}100%{left:107%;right:-8%}}.preloader-wrapper{display:inline-block;position:relative;width:50px;height:50px}.preloader-wrapper.small{width:36px;height:36px}.preloader-wrapper.big{width:64px;height:64px}.preloader-wrapper.active{-webkit-animation:container-rotate 1568ms linear infinite;animation:container-rotate 1568ms linear infinite}@-webkit-keyframes container-rotate{to{-webkit-transform:rotate(360deg)}}@keyframes container-rotate{to{transform:rotate(360deg)}}.spinner-layer{position:absolute;width:100%;height:100%;opacity:0;border-color:var(--md-sys-color-primary)}.spinner-blue,.spinner-blue-only{border-color:#4285f4}.spinner-red,.spinner-red-only{border-color:#db4437}.spinner-yellow,.spinner-yellow-only{border-color:#f4b400}.spinner-green,.spinner-green-only{border-color:#0f9d58}.active .spinner-layer.spinner-blue{-webkit-animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}.active .spinner-layer.spinner-red{-webkit-animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}.active .spinner-layer.spinner-yellow{-webkit-animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}.active .spinner-layer.spinner-green{-webkit-animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}.active .spinner-layer,.active .spinner-layer.spinner-blue-only,.active .spinner-layer.spinner-red-only,.active .spinner-layer.spinner-yellow-only,.active .spinner-layer.spinner-green-only{opacity:1;-webkit-animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;animation:fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}@-webkit-keyframes fill-unfill-rotate{12.5%{-webkit-transform:rotate(135deg)}25%{-webkit-transform:rotate(270deg)}37.5%{-webkit-transform:rotate(405deg)}50%{-webkit-transform:rotate(540deg)}62.5%{-webkit-transform:rotate(675deg)}75%{-webkit-transform:rotate(810deg)}87.5%{-webkit-transform:rotate(945deg)}to{-webkit-transform:rotate(1080deg)}}@keyframes fill-unfill-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}to{transform:rotate(1080deg)}}@-webkit-keyframes blue-fade-in-out{from{opacity:1}25%{opacity:1}26%{opacity:0}89%{opacity:0}90%{opacity:1}100%{opacity:1}}@keyframes blue-fade-in-out{from{opacity:1}25%{opacity:1}26%{opacity:0}89%{opacity:0}90%{opacity:1}100%{opacity:1}}@-webkit-keyframes red-fade-in-out{from{opacity:0}15%{opacity:0}25%{opacity:1}50%{opacity:1}51%{opacity:0}}@keyframes red-fade-in-out{from{opacity:0}15%{opacity:0}25%{opacity:1}50%{opacity:1}51%{opacity:0}}@-webkit-keyframes yellow-fade-in-out{from{opacity:0}40%{opacity:0}50%{opacity:1}75%{opacity:1}76%{opacity:0}}@keyframes yellow-fade-in-out{from{opacity:0}40%{opacity:0}50%{opacity:1}75%{opacity:1}76%{opacity:0}}@-webkit-keyframes green-fade-in-out{from{opacity:0}65%{opacity:0}75%{opacity:1}90%{opacity:1}100%{opacity:0}}@keyframes green-fade-in-out{from{opacity:0}65%{opacity:0}75%{opacity:1}90%{opacity:1}100%{opacity:0}}.gap-patch{position:absolute;top:0;left:45%;width:10%;height:100%;overflow:hidden;border-color:inherit}.gap-patch .circle{width:1000%;left:-450%}.circle-clipper{display:inline-block;position:relative;width:50%;height:100%;overflow:hidden;border-color:inherit}.circle-clipper .circle{width:200%;height:100%;border-width:3px;border-style:solid;border-color:inherit;border-bottom-color:rgba(0,0,0,0) !important;border-radius:50%;-webkit-animation:none;animation:none;position:absolute;top:0;right:0;bottom:0}.circle-clipper.left .circle{left:0;border-right-color:rgba(0,0,0,0) !important;-webkit-transform:rotate(129deg);transform:rotate(129deg)}.circle-clipper.right .circle{left:-100%;border-left-color:rgba(0,0,0,0) !important;-webkit-transform:rotate(-129deg);transform:rotate(-129deg)}.active .circle-clipper.left .circle{-webkit-animation:left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;animation:left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}.active .circle-clipper.right .circle{-webkit-animation:right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;animation:right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}@-webkit-keyframes left-spin{from{-webkit-transform:rotate(130deg)}50%{-webkit-transform:rotate(-5deg)}to{-webkit-transform:rotate(130deg)}}@keyframes left-spin{from{transform:rotate(130deg)}50%{transform:rotate(-5deg)}to{transform:rotate(130deg)}}@-webkit-keyframes right-spin{from{-webkit-transform:rotate(-130deg)}50%{-webkit-transform:rotate(5deg)}to{-webkit-transform:rotate(-130deg)}}@keyframes right-spin{from{transform:rotate(-130deg)}50%{transform:rotate(5deg)}to{transform:rotate(-130deg)}}#spinnerContainer.cooldown{-webkit-animation:container-rotate 1568ms linear infinite,fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1);animation:container-rotate 1568ms linear infinite,fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1)}@-webkit-keyframes fade-out{from{opacity:1}to{opacity:0}}@keyframes fade-out{from{opacity:1}to{opacity:0}}.slider{position:relative;height:400px;width:100%}.slider.fullscreen{height:100%;width:100%;position:absolute;top:0;left:0;right:0;bottom:0}.slider.fullscreen ul.slides{padding-left:0;list-style-type:none;height:100%}.slider.fullscreen ul.indicators{padding-left:0;list-style-type:none;z-index:2;bottom:30px}.slider.fullscreen ul.indicators .indicator-item{background-color:rgba(255,255,255,.45)}.slider.fullscreen ul.indicators .indicator-item.active{background-color:var(--md-ref-palette-primary100)}.slider .slides{background-color:var(--md-sys-color-surface);margin:0;height:400px;padding-left:0;list-style-type:none}.slider .slides li{padding-left:0;list-style-type:none;opacity:0;position:absolute;top:0;left:0;z-index:1;width:100%;height:inherit;overflow:hidden}.slider .slides li img{height:100%;width:100%;background-size:cover;background-position:center}.slider .slides li .caption{color:#fff;position:absolute;top:15%;left:15%;width:70%;opacity:0}.slider .slides li .caption p{color:rgba(255,255,255,.75)}.slider .slides li.active{z-index:2}.slider .indicators{padding-left:0;list-style-type:none;position:absolute;text-align:center;left:0;right:0;bottom:0;margin:0}.slider .indicators .indicator-item{display:inline-block;position:relative;height:16px;width:16px;margin:0 12px}.slider .indicators .indicator-item-btn{position:absolute;top:0;left:0;cursor:pointer;background-color:var(--md-sys-color-shadow-light);transition:background-color .3s;border-radius:50%;border-width:0;width:100%;height:100%}.slider .indicators .indicator-item-btn.active{background-color:var(--md-sys-color-primary)}.carousel{--carousel-height: 400px;overflow:hidden;position:relative;width:100%;height:var(--carousel-height);perspective:500px;transform-style:preserve-3d;transform-origin:0% 50%}.carousel.carousel-slider{top:0;left:0}.carousel.carousel-slider .carousel-fixed-item{position:absolute;left:0;right:0;bottom:20px;z-index:1}.carousel.carousel-slider .carousel-fixed-item.with-indicators{bottom:68px}.carousel.carousel-slider .carousel-item{width:100%;height:100%;min-height:var(--carousel-height);position:absolute;top:0;left:0}.carousel.carousel-slider .carousel-item h2{font-size:24px;font-weight:500;line-height:32px}.carousel.carousel-slider .carousel-item p{font-size:15px}.carousel .carousel-item{visibility:hidden;width:calc(var(--carousel-height)*.5);height:calc(var(--carousel-height)*.5);position:absolute;top:0;left:0}.carousel .carousel-item>img{width:100%}.carousel .indicators{padding-left:0;list-style-type:none;position:absolute;text-align:center;left:0;right:0;bottom:0;margin:0}.carousel .indicators .indicator-item{display:inline-block;position:relative;cursor:pointer;height:8px;width:8px;margin:24px 4px;background-color:rgba(255,255,255,.45);transition:background-color .3s;border-radius:50%}.carousel .indicators .indicator-item.active{background-color:var(--md-ref-palette-primary100)}.carousel.scrolling .carousel-item .materialboxed,.carousel .carousel-item:not(.active) .materialboxed{pointer-events:none}.tap-target-wrapper{width:800px;height:800px;position:fixed;z-index:1000;visibility:hidden;transition:visibility 0s .3s}.tap-target-wrapper.open{visibility:visible;transition:visibility 0s}.tap-target-wrapper.open .tap-target{transform:scale(1);opacity:.95;transition:transform .3s cubic-bezier(0.42, 0, 0.58, 1),opacity .3s cubic-bezier(0.42, 0, 0.58, 1)}.tap-target-wrapper.open .tap-target-wave::before{transform:scale(1)}.tap-target-wrapper.open .tap-target-wave::after{visibility:visible;animation:pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;transition:opacity .3s,transform .3s,visibility 0s 1s}.tap-target{position:absolute;font-size:1rem;border-radius:50%;background-color:var(--md-sys-color-primary-container);color:var(--md-sys-color-primary);box-shadow:0 20px 20px 0 rgba(0,0,0,.14),0 10px 50px 0 rgba(0,0,0,.12),0 30px 10px -20px rgba(0,0,0,.2);width:100%;height:100%;opacity:0;transform:scale(0);transition:transform .3s cubic-bezier(0.42, 0, 0.58, 1),opacity .3s cubic-bezier(0.42, 0, 0.58, 1)}.tap-target-content{position:relative;display:table-cell}.tap-target-wave{position:absolute;border-radius:50%;z-index:10001}.tap-target-wave::before,.tap-target-wave::after{content:"";display:block;position:absolute;width:100%;height:100%;border-radius:50%;background-color:var(--md-sys-color-surface)}.tap-target-wave::before{transform:scale(0);transition:transform .3s}.tap-target-wave::after{visibility:hidden;transition:opacity .3s,transform .3s,visibility 0s;z-index:-1}.tap-target-origin{top:50%;left:50%;transform:translate(-50%, -50%);z-index:10002;position:absolute !important}.tap-target-origin:not(.btn):not(.btn-large):not(.btn-small),.tap-target-origin:not(.btn):not(.btn-large):not(.btn-small):hover{background:none}@media only screen and (max-width: 600px){.tap-target,.tap-target-wrapper{width:600px;height:600px}}.pulse{overflow:visible;position:relative}.pulse::before{content:"";display:block;position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;background-color:inherit;border-radius:inherit;transition:opacity .3s,transform .3s;animation:pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;z-index:-1}@keyframes pulse-animation{0%{opacity:1;transform:scale(1)}50%{opacity:0;transform:scale(1.5)}100%{opacity:0;transform:scale(1.5)}}.datepicker-modal{max-width:325px;min-width:300px;max-height:none}.datepicker-container.modal-content{display:flex;flex-direction:column;padding:0;background-color:var(--md-sys-color-surface)}.datepicker-controls{display:flex;justify-content:space-between;width:280px;margin:0 auto}.datepicker-controls .selects-container{display:flex}.datepicker-controls .select-wrapper input{border-bottom:none;text-align:center;margin:0}.datepicker-controls .select-wrapper input:focus{border-bottom:none}.datepicker-controls .select-wrapper .caret{display:none}.datepicker-controls .select-dropdown{padding:0;vertical-align:middle}.datepicker-controls .select-year input{width:50px}.datepicker-controls .select-month input{width:80px}.datepicker-controls .month-prev,.datepicker-controls .month-next{display:inline-flex;align-items:center}.datepicker-controls .month-prev>svg,.datepicker-controls .month-next>svg{fill:var(--md-sys-color-on-surface-variant)}.month-prev,.month-next{height:49px;margin-top:4px;cursor:pointer;background-color:rgba(0,0,0,0);border:none}.datepicker-date-display{flex:1 auto;background-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);padding:20px 22px;font-weight:500}.datepicker-date-display .year-text{display:block;font-size:1.5rem;line-height:25px;color:var(--md-sys-color-on-primary)}.datepicker-date-display .date-text{display:block;font-size:2.8rem;line-height:47px;font-weight:500}.datepicker-calendar-container{flex:2.5 auto}.datepicker-table{width:280px;font-size:1rem;margin:0 auto}.datepicker-table thead{border-bottom:none}.datepicker-table th{padding:10px 5px;text-align:center}.datepicker-table tr{border:none}.datepicker-table abbr{text-decoration:none;color:var(--md-sys-color-on-surface-variant)}.datepicker-table td{color:var(--md-sys-color-on-background);border-radius:50%;padding:0}.datepicker-table td.is-today{color:var(--md-sys-color-primary)}.datepicker-table td.is-selected{background-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}.datepicker-table td.is-outside-current-month,.datepicker-table td.is-disabled{color:var(--md-sys-color-on-surface);pointer-events:none}.datepicker-day-button{background-color:rgba(0,0,0,0);border:none;line-height:38px;display:block;width:100%;border-radius:50%;padding:0 5px;cursor:pointer;color:inherit}.datepicker-day-button:hover{background-color:rgba(var(--md-sys-color-primary-numeric), 0.06)}.datepicker-day-button:focus{background-color:rgba(var(--md-sys-color-primary-numeric), 0.18)}.datepicker-footer{width:280px;margin:0 auto;padding-bottom:5px;display:flex;justify-content:space-between}.datepicker-cancel,.datepicker-clear,.datepicker-today,.datepicker-done{color:var(--md-sys-color-primary);padding:0 1rem}.datepicker-clear{color:var(--md-sys-color-error)}@media only screen and (min-width : 601px){.datepicker-modal{max-width:625px}.datepicker-container.modal-content{flex-direction:row}.datepicker-date-display{flex:0 1 270px}.datepicker-controls,.datepicker-table,.datepicker-footer{width:320px}.datepicker-day-button{line-height:44px}}.timepicker-modal{max-width:325px;max-height:none}.timepicker-container.modal-content{display:flex;flex-direction:column;padding:0}.text-primary{color:var(--md-sys-color-on-primary)}.timepicker-digital-display{width:auto;flex:1 auto;background-color:var(--md-sys-color-primary);padding:2rem .67rem .67rem .67rem;font-weight:300}.timepicker-text-container{font-size:4rem;text-align:left;color:var(--font-on-primary-color-medium);font-weight:400;position:relative;user-select:none;padding:1rem 1rem 1.5rem 1rem}.timepicker-text-container input[type=text]{height:4rem;color:var(--md-sys-color-secondary);border-bottom:0px;font-size:4rem;direction:ltr}.timepicker-display-column{display:inline-flex}.timepicker-input-hours-wrapper,.timepicker-input-minutes-wrapper{width:6.9rem;height:5.2rem}.timepicker-input-hours,.timepicker-input-minutes,.timepicker-span-am-pm div{cursor:pointer}input[type=text].timepicker-input-hours,input[type=text].timepicker-input-minutes{height:100%;padding:.8rem;border:0;text-align:center}.timepicker-input-divider-wrapper{width:1.6rem;text-align:center}input[type=text].text-primary{color:var(--md-sys-color-on-background)}.timepicker-display-am-pm{font-size:1.3rem;position:absolute;top:1rem;right:1rem;font-weight:400}.timepicker-span-am-pm{height:5.2rem;max-width:3.5rem}.timepicker-modal .am-btn,.timepicker-modal .pm-btn{width:3.6rem;height:50%;padding-left:calc(var(--btn-padding)/1.6);padding-right:calc(var(--btn-padding)/1.6);line-height:2rem;vertical-align:middle;text-align:center;background-color:rgba(0,0,0,0);border:1px solid var(--md-sys-color-outline)}.timepicker-modal .am-btn{border-bottom-right-radius:0;border-bottom-left-radius:0}.timepicker-modal .pm-btn{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.timepicker-analog-display{flex:2.5 auto;padding:.67rem;background-color:var(--md-sys-color-surface)}.timepicker-plate{background-color:rgba(0,0,0,.09);border-radius:50%;width:260px;height:260px;overflow:visible;position:relative;margin:2rem 1.6rem 1.6rem 1.6rem;user-select:none}.timepicker-canvas,.timepicker-dial{position:absolute;left:0;right:0;top:0;bottom:0}.timepicker-minutes{visibility:hidden}.timepicker-tick{border-radius:50%;color:var(--md-sys-color-on-background);line-height:40px;text-align:center;width:40px;height:40px;position:absolute;cursor:pointer;font-size:15px}.timepicker-tick.active,.timepicker-tick:hover{background-color:rgba(var(--md-sys-color-primary-numeric), 0.06)}.timepicker-dial{transition:transform 350ms,opacity 350ms}.timepicker-dial-out{opacity:0}.timepicker-dial-out.timepicker-hours{transform:scale(1.1, 1.1)}.timepicker-dial-out.timepicker-minutes{transform:scale(0.8, 0.8)}.timepicker-canvas{transition:opacity 175ms}.timepicker-canvas line{stroke:var(--md-sys-color-primary);stroke-width:4;stroke-linecap:round}.timepicker-canvas-out{opacity:.25}.timepicker-canvas-bearing{stroke:none;fill:var(--md-sys-color-primary)}.timepicker-canvas-bg{stroke:none;fill:var(--md-sys-color-primary)}.timepicker-footer{margin:0 auto;padding:5px 1rem;display:flex;justify-content:space-between}.timepicker-clear{color:var(--md-sys-color-error)}.timepicker-close{color:var(--md-sys-color-primary)}.timepicker-clear,.timepicker-close{padding:0 20px}@media only screen and (min-width : 993px){.timepicker-modal{width:auto;max-width:620px}.timepicker-container.modal-content{flex-direction:row}.timepicker-digital-display{padding:.67rem}.timepicker-text-container{top:31%;text-align:center}.timepicker-display-am-pm{position:relative;top:auto;right:auto;text-align:center;margin-top:1.2rem}.timepicker-span-am-pm{max-width:unset}.timepicker-modal .am-btn,.timepicker-modal .pm-btn{width:auto;padding-left:var(--btn-padding);padding-right:var(--btn-padding);border-radius:var(--btn-border-radius);border:1px solid var(--md-sys-color-outline);line-height:inherit;vertical-align:top;text-align:inherit}.timepicker-modal .am-btn{border-top-right-radius:0;border-bottom-right-radius:0}.timepicker-modal .pm-btn{border-left:0;border-bottom-left-radius:0;border-top-left-radius:0}} \ No newline at end of file diff --git a/LocalFiles/Font/MaterialIcons-Regular.ttf b/LocalFiles/Font/MaterialIcons-Regular.ttf new file mode 100644 index 0000000..7015564 Binary files /dev/null and b/LocalFiles/Font/MaterialIcons-Regular.ttf differ diff --git a/LocalFiles/Font/MaterialIcons-Regular.woff b/LocalFiles/Font/MaterialIcons-Regular.woff new file mode 100644 index 0000000..b648a3e Binary files /dev/null and b/LocalFiles/Font/MaterialIcons-Regular.woff differ diff --git a/LocalFiles/Font/MaterialIcons-Regular.woff2 b/LocalFiles/Font/MaterialIcons-Regular.woff2 new file mode 100644 index 0000000..9fa2112 Binary files /dev/null and b/LocalFiles/Font/MaterialIcons-Regular.woff2 differ diff --git a/LocalFiles/JS/materialize.min.js b/LocalFiles/JS/materialize.min.js new file mode 100644 index 0000000..518c9be --- /dev/null +++ b/LocalFiles/JS/materialize.min.js @@ -0,0 +1,6 @@ +/*! +* Materialize v2.2.1 (https://materializeweb.com) +* Copyright 2014-2024 Materialize +* MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE) +*/ +var M=function(t){"use strict";class e{static tabPressed=!1;static keyDown=!1;static keys={TAB:["Tab"],ENTER:["Enter"],ESC:["Escape","Esc"],BACKSPACE:["Backspace"],ARROW_UP:["ArrowUp","Up"],ARROW_DOWN:["ArrowDown","Down"],ARROW_LEFT:["ArrowLeft","Left"],ARROW_RIGHT:["ArrowRight","Right"],DELETE:["Delete","Del"]};static docHandleKeydown(t){e.keyDown=!0,[...e.keys.TAB,...e.keys.ARROW_DOWN,...e.keys.ARROW_UP].includes(t.key)&&(e.tabPressed=!0)}static docHandleKeyup(t){e.keyDown=!1,[...e.keys.TAB,...e.keys.ARROW_DOWN,...e.keys.ARROW_UP].includes(t.key)&&(e.tabPressed=!1)}static docHandleFocus(t){e.keyDown&&document.body.classList.add("keyboard-focused")}static docHandleBlur(t){document.body.classList.remove("keyboard-focused")}static guid(){const t=()=>Math.floor(65536*(1+Math.random())).toString(16).substring(1);return t()+t()+"-"+t()+"-"+t()+"-"+t()+"-"+t()+t()+t()}static checkWithinContainer(t,e,i){const s={top:!1,right:!1,bottom:!1,left:!1},n=t.getBoundingClientRect(),o=t===document.body?Math.max(n.bottom,window.innerHeight):n.bottom,a=t.scrollLeft,l=t.scrollTop,r=e.left-a,h=e.top-l;return(rn.right-i||r+e.width>window.innerWidth-i)&&(s.right=!0),(ho-i||h+e.height>window.innerHeight-i)&&(s.bottom=!0),s}static checkPossibleAlignments(t,e,i,s){const n={top:!0,right:!0,bottom:!0,left:!0,spaceOnTop:null,spaceOnRight:null,spaceOnBottom:null,spaceOnLeft:null},o="visible"===getComputedStyle(e).overflow,a=e.getBoundingClientRect(),l=Math.min(a.height,window.innerHeight),r=Math.min(a.width,window.innerWidth),h=t.getBoundingClientRect(),d=e.scrollLeft,c=e.scrollTop,p=i.left-d,u=i.top-c,m=i.top+h.height-c;return n.spaceOnRight=o?window.innerWidth-(h.left+i.width):r-(p+i.width),n.spaceOnRight<0&&(n.left=!1),n.spaceOnLeft=o?h.right-i.width:p-i.width+h.width,n.spaceOnLeft<0&&(n.right=!1),n.spaceOnBottom=o?window.innerHeight-(h.top+i.height+s):l-(u+i.height+s),n.spaceOnBottom<0&&(n.top=!1),n.spaceOnTop=o?h.bottom-(i.height+s):m-(i.height-s),n.spaceOnTop<0&&(n.bottom=!1),n}static getIdFromTrigger(t){let e=t.dataset.target;return e||(e=t.getAttribute("href"),e?e.slice(1):"")}static getDocumentScrollTop(){return window.scrollY||document.documentElement.scrollTop||document.body.scrollTop||0}static getDocumentScrollLeft(){return window.scrollX||document.documentElement.scrollLeft||document.body.scrollLeft||0}static throttle(t,e,i={}){let s,n,o,a=null,l=0;const r=()=>{l=!1===i.leading?0:(new Date).getTime(),a=null,o=t.apply(s,n),s=n=null};return(...n)=>{const h=(new Date).getTime();l||!1!==i.leading||(l=h);const d=e-(h-l);return s=this,d<=0?(clearTimeout(a),a=null,l=h,o=t.apply(s,n),s=n=null):a||!1===i.trailing||(a=setTimeout(r,d)),o}}}class i{el;options;constructor(t,e,i){t instanceof HTMLElement||console.error(Error(t+" is not an HTML Element"));const s=i.getInstance(t);s&&s.destroy(),this.el=t}static init(t,e,i){let s=null;if(t instanceof Element)s=new i(t,e);else if(t&&t.length){s=[];for(let n=0;n{t.preventDefault(),this._moveDropdown(t.target.closest("li")),this.isOpen?this.close():this.open()};_handleMouseEnter=t=>{this._moveDropdown(t.target.closest("li")),this.open()};_handleMouseLeave=t=>{const e=t.relatedTarget,i=!!e.closest(".dropdown-content");let s=!1;const n=e.closest(".dropdown-trigger");n&&n.M_Dropdown&&n.M_Dropdown.isOpen&&(s=!0),s||i||this.close()};_handleDocumentClick=t=>{const e=t.target;this.options.closeOnClick&&e.closest(".dropdown-content")&&!this.isTouchMoving?this.close():e.closest(".dropdown-content")||setTimeout((()=>{this.isOpen&&this.close()}),0),this.isTouchMoving=!1};_handleTriggerKeydown=t=>{(e.keys.ARROW_DOWN.includes(t.key)||e.keys.ENTER.includes(t.key))&&!this.isOpen&&(t.preventDefault(),this.open())};_handleDocumentTouchmove=t=>{t.target.closest(".dropdown-content")&&(this.isTouchMoving=!0)};_handleDropdownClick=t=>{if("function"==typeof this.options.onItemClick){const e=t.target.closest("li");this.options.onItemClick.call(this,e)}};_handleDropdownKeydown=t=>{const i=e.keys.ARROW_DOWN.includes(t.key)||e.keys.ARROW_UP.includes(t.key);if(e.keys.TAB.includes(t.key))t.preventDefault(),this.close();else if(i&&this.isOpen){t.preventDefault();const i=e.keys.ARROW_DOWN.includes(t.key)?1:-1;let s=this.focusedIndex,n=!1;do{if(s+=i,this.dropdownEl.children[s]&&-1!==this.dropdownEl.children[s].tabIndex){n=!0;break}}while(s=0);n&&(this.focusedIndex>=0&&this.dropdownEl.children[this.focusedIndex].classList.remove("active"),this.focusedIndex=s,this._focusFocusedItem())}else if(e.keys.ENTER.includes(t.key)&&this.isOpen){const t=this.dropdownEl.children[this.focusedIndex],e=t.querySelector("a, button");e?e.click():t&&t instanceof HTMLElement&&t.click()}else e.keys.ESC.includes(t.key)&&this.isOpen&&(t.preventDefault(),this.close());const s=t.key.toLowerCase(),n=/[a-zA-Z0-9-_]/.test(s),o=[...e.keys.ARROW_DOWN,...e.keys.ARROW_UP,...e.keys.ENTER,...e.keys.ESC,...e.keys.TAB];if(n&&!o.includes(t.key)){this.filterQuery.push(s);const t=this.filterQuery.join(""),e=Array.from(this.dropdownEl.querySelectorAll("li")).find((e=>0===e.innerText.toLowerCase().indexOf(t)));e&&(this.focusedIndex=[...e.parentNode.children].indexOf(e),this._focusFocusedItem())}this.filterTimeout=setTimeout(this._resetFilterQuery,1e3)};_handleWindowResize=()=>{this.el.offsetParent&&this.recalculateDimensions()};_resetFilterQuery=()=>{this.filterQuery=[]};_resetDropdownStyles(){this.dropdownEl.style.display="",this._resetDropdownPositioningStyles(),this.dropdownEl.style.transform="",this.dropdownEl.style.opacity=""}_resetDropdownPositioningStyles(){this.dropdownEl.style.width="",this.dropdownEl.style.height="",this.dropdownEl.style.left="",this.dropdownEl.style.top="",this.dropdownEl.style.transformOrigin=""}_moveDropdown(t=null){this.options.container?this.options.container.append(this.dropdownEl):t?t.contains(this.dropdownEl)||t.append(this.dropdownEl):this.el.after(this.dropdownEl)}_makeDropdownFocusable(){this.dropdownEl&&(this.dropdownEl.popover="",this.dropdownEl.tabIndex=0,Array.from(this.dropdownEl.children).forEach((t=>{t.getAttribute("tabindex")||t.setAttribute("tabindex","0")})))}_focusFocusedItem(){this.focusedIndex>=0&&this.focusedIndexh.spaceOnBottom?(d="bottom",n+=h.spaceOnTop,l-=this.options.coverTrigger?h.spaceOnTop-20:h.spaceOnTop-20+i.height):n+=h.spaceOnBottom)),!h[c]){const t="left"===c?"right":"left";h[t]?c=t:h.spaceOnLeft>h.spaceOnRight?(c="right",o+=h.spaceOnLeft,a-=h.spaceOnLeft):(c="left",o+=h.spaceOnRight)}return"bottom"===d&&(l=l-s.height+(this.options.coverTrigger?i.height:0)),"right"===c&&(a=a-s.width+i.width),{x:a,y:l,verticalAlignment:d,horizontalAlignment:c,height:n,width:o}}_animateIn(){const t=this.options.inDuration;this.dropdownEl.style.transition="none",this.dropdownEl.style.opacity="0",this.dropdownEl.style.transform="scale(0.3, 0.3)",setTimeout((()=>{this.dropdownEl.style.transition=`opacity ${t}ms ease, transform ${t}ms ease`,this.dropdownEl.style.opacity="1",this.dropdownEl.style.transform="scale(1, 1)"}),1),setTimeout((()=>{this.options.autoFocus&&this.dropdownEl.focus(),"function"==typeof this.options.onOpenEnd&&this.options.onOpenEnd.call(this,this.el)}),t)}_animateOut(){const t=this.options.outDuration;this.dropdownEl.style.transition=`opacity ${t}ms ease, transform ${t}ms ease`,this.dropdownEl.style.opacity="0",this.dropdownEl.style.transform="scale(0.3, 0.3)",setTimeout((()=>{this._resetDropdownStyles(),"function"==typeof this.options.onCloseEnd&&this.options.onCloseEnd.call(this,this.el)}),t)}_getClosestAncestor(t,e){let i=t.parentNode;for(;null!==i&&i!==document;){if(e(i))return i;i=i.parentElement}return null}_placeDropdown(){let t=this._getClosestAncestor(this.dropdownEl,(t=>!["HTML","BODY"].includes(t.tagName)&&"visible"!==getComputedStyle(t).overflow));t||(t=this.dropdownEl.offsetParent?this.dropdownEl.offsetParent:this.dropdownEl.parentNode),"static"===getComputedStyle(t).position&&(t.style.position="relative"),this._moveDropdown(t);const e=this.options.constrainWidth?this.el.getBoundingClientRect().width:this.dropdownEl.getBoundingClientRect().width;this.dropdownEl.style.width=e+"px";const i=this._getDropdownPosition(t);this.dropdownEl.style.left=i.x+"px",this.dropdownEl.style.top=i.y+"px",this.dropdownEl.style.height=i.height+"px",this.dropdownEl.style.width=i.width+"px",this.dropdownEl.style.transformOrigin=`${"left"===i.horizontalAlignment?"0":"100%"} ${"top"===i.verticalAlignment?"0":"100%"}`}open=()=>{this.isOpen||(this.isOpen=!0,"function"==typeof this.options.onOpenStart&&this.options.onOpenStart.call(this,this.el),this._resetDropdownStyles(),this.dropdownEl.style.display="block",this._placeDropdown(),this._animateIn(),setTimeout((()=>this._setupTemporaryEventHandlers()),0),this.el.ariaExpanded="true")};close=()=>{this.isOpen&&(this.isOpen=!1,this.focusedIndex=-1,"function"==typeof this.options.onCloseStart&&this.options.onCloseStart.call(this,this.el),this._animateOut(),this._removeTemporaryEventHandlers(),this.options.autoFocus&&this.el.focus(),this.el.ariaExpanded="false")};recalculateDimensions=()=>{this.isOpen&&(this._resetDropdownPositioningStyles(),this._placeDropdown())}}const o={data:[],onAutocomplete:null,dropdownOptions:{autoFocus:!1,closeOnClick:!1,coverTrigger:!1},minLength:1,isMultiSelect:!1,onSearch:(t,e)=>{const i=t.toLocaleLowerCase();e.setMenuItems(e.options.data.filter((t=>t.id.toString().toLocaleLowerCase().includes(i)||t.text?.toLocaleLowerCase().includes(i))))},maxDropDownHeight:"300px",allowUnsafeHTML:!1};class a extends i{isOpen;count;activeIndex;oldVal;$active;_mousedown;container;dropdown;static _keydown;selectedValues;menuItems;constructor(t,e){super(t,e,a),this.el.M_Autocomplete=this,this.options={...a.defaults,...e},this.isOpen=!1,this.count=0,this.activeIndex=-1,this.oldVal="",this.selectedValues=[],this.menuItems=this.options.data||[],this.$active=null,this._mousedown=!1,this._setupDropdown(),this._setupEventHandlers()}static get defaults(){return o}static init(t,e={}){return super.init(t,e,a)}static getInstance(t){return t.M_Autocomplete}destroy(){this._removeEventHandlers(),this._removeDropdown(),this.el.M_Autocomplete=void 0}_setupEventHandlers(){this.el.addEventListener("blur",this._handleInputBlur),this.el.addEventListener("keyup",this._handleInputKeyup),this.el.addEventListener("focus",this._handleInputFocus),this.el.addEventListener("keydown",this._handleInputKeydown),this.el.addEventListener("click",this._handleInputClick),this.container.addEventListener("mousedown",this._handleContainerMousedownAndTouchstart),this.container.addEventListener("mouseup",this._handleContainerMouseupAndTouchend),void 0!==window.ontouchstart&&(this.container.addEventListener("touchstart",this._handleContainerMousedownAndTouchstart),this.container.addEventListener("touchend",this._handleContainerMouseupAndTouchend))}_removeEventHandlers(){this.el.removeEventListener("blur",this._handleInputBlur),this.el.removeEventListener("keyup",this._handleInputKeyup),this.el.removeEventListener("focus",this._handleInputFocus),this.el.removeEventListener("keydown",this._handleInputKeydown),this.el.removeEventListener("click",this._handleInputClick),this.container.removeEventListener("mousedown",this._handleContainerMousedownAndTouchstart),this.container.removeEventListener("mouseup",this._handleContainerMouseupAndTouchend),void 0!==window.ontouchstart&&(this.container.removeEventListener("touchstart",this._handleContainerMousedownAndTouchstart),this.container.removeEventListener("touchend",this._handleContainerMouseupAndTouchend))}_setupDropdown(){this.container=document.createElement("ul"),this.container.style.maxHeight=this.options.maxDropDownHeight,this.container.id=`autocomplete-options-${e.guid()}`,this.container.classList.add("autocomplete-content","dropdown-content"),this.el.setAttribute("data-target",this.container.id),this.menuItems.forEach((t=>{const e=this._createDropdownItem(t);this.container.append(e)})),this.el.parentElement.appendChild(this.container);const t={...a.defaults.dropdownOptions,...this.options.dropdownOptions},i=t.onItemClick;t.onItemClick=t=>{if(!t)return;const e=t.getAttribute("data-id");this.selectOption(e),i&&"function"==typeof i&&i.call(this.dropdown,this.el)},this.dropdown=n.init(this.el,t);const s=this.el.parentElement.querySelector("label");s&&this.el.after(s),this.el.removeEventListener("click",this.dropdown._handleClick),this.el.value&&this.selectOption(this.el.value);const o=document.createElement("div");o.classList.add("status-info"),o.setAttribute("style","position: absolute;right:0;top:0;"),this.el.parentElement.appendChild(o),this._updateSelectedInfo()}_removeDropdown(){this.container.parentNode.removeChild(this.container)}_handleInputBlur=()=>{this._mousedown||(this.close(),this._resetAutocomplete())};_handleInputKeyup=t=>{"keyup"===t.type&&(a._keydown=!1),this.count=0;const i=this.el.value.toLocaleLowerCase();e.keys.ENTER.includes(t.key)||e.keys.ARROW_UP.includes(t.key)||e.keys.ARROW_DOWN.includes(t.key)||(this.oldVal!==i&&e.tabPressed&&this.open(),this._inputChangeDetection(i))};_handleInputFocus=()=>{this.count=0;const t=this.el.value.toLocaleLowerCase();this._inputChangeDetection(t)};_inputChangeDetection=t=>{this.oldVal!==t&&(this._setStatusLoading(),this.options.onSearch(this.el.value,this)),this.options.isMultiSelect||0!==this.el.value.length||(this.selectedValues=[],this._triggerChanged()),this.oldVal=t};_handleInputKeydown=t=>{a._keydown=!0;const i=this.container.querySelectorAll("li").length;if(e.keys.ENTER.includes(t.key)&&this.activeIndex>=0){const e=this.container.querySelectorAll("li")[this.activeIndex];e&&(this.selectOption(e.getAttribute("data-id")),t.preventDefault())}else(e.keys.ARROW_UP.includes(t.key)||e.keys.ARROW_DOWN.includes(t.key))&&(t.preventDefault(),e.keys.ARROW_UP.includes(t.key)&&this.activeIndex>0&&this.activeIndex--,e.keys.ARROW_DOWN.includes(t.key)&&this.activeIndex=0&&(this.$active=this.container.querySelectorAll("li")[this.activeIndex],this.$active?.classList.add("active"),this.container.children[this.activeIndex].scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"})))};_handleInputClick=()=>{this.open()};_handleContainerMousedownAndTouchstart=()=>{this._mousedown=!0};_handleContainerMouseupAndTouchend=()=>{this._mousedown=!1};_resetCurrentElementPosition(){this.activeIndex=-1,this.$active?.classList.remove("active")}_resetAutocomplete(){this.container.replaceChildren(),this._resetCurrentElementPosition(),this.oldVal=null,this.isOpen=!1,this._mousedown=!1}_highlightPartialText(t,e){const i=e.toLocaleLowerCase().indexOf(""+t.toLocaleLowerCase()),s=i+t.length-1;return-1==i||-1==s?[e,"",""]:[e.slice(0,i),e.slice(i,s+1),e.slice(s+1)]}_createDropdownItem(t){const e=document.createElement("li");if(e.setAttribute("data-id",t.id),e.setAttribute("style","display:grid; grid-auto-flow: column; user-select: none; align-items: center;"),this.options.isMultiSelect&&(e.innerHTML=`\n
\n e.id===t.id))?' checked="checked"':""}>\n
`),t.image){const i=document.createElement("img");i.classList.add("circle"),i.src=t.image,e.appendChild(i)}const i=this.el.value.toLocaleLowerCase(),s=this._highlightPartialText(i,(t.text||t.id).toString()),n=document.createElement("div");if(n.setAttribute("style","line-height:1.2;font-weight:500;"),this.options.allowUnsafeHTML)n.innerHTML=s[0]+''+s[1]+""+s[2];else if(n.appendChild(document.createTextNode(s[0])),s[1]){const t=document.createElement("span");t.textContent=s[1],t.classList.add("highlight"),n.appendChild(t),n.appendChild(document.createTextNode(s[2]))}const o=document.createElement("div");if(o.classList.add("item-text"),o.setAttribute("style","padding:5px;overflow:hidden;"),e.appendChild(o),e.querySelector(".item-text").appendChild(n),"string"==typeof t.description||"number"==typeof t.description&&!isNaN(t.description)){const i=document.createElement("small");i.setAttribute("style","line-height:1.3;color:grey;white-space:nowrap;text-overflow:ellipsis;display:block;width:90%;overflow:hidden;"),i.innerText=t.description,e.querySelector(".item-text").appendChild(i)}return e.style.gridTemplateColumns=(()=>this.options.isMultiSelect?t.image?"40px min-content auto":"40px auto":t.image?"min-content auto":"auto")(),e}_renderDropdown(){this._resetAutocomplete(),0===this.menuItems.length&&(this.menuItems=this.selectedValues);for(let t=0;t\n \n \n \n '}_updateSelectedInfo(){const t=this.el.parentElement.querySelector(".status-info");t&&(this.options.isMultiSelect?t.innerHTML=this.selectedValues.length.toString():t.innerHTML="")}_refreshInputText(){if(1===this.selectedValues.length){const t=this.selectedValues[0];this.el.value=t.text||t.id}}_triggerChanged(){this.el.dispatchEvent(new Event("change")),"function"==typeof this.options.onAutocomplete&&this.options.onAutocomplete.call(this,this.selectedValues)}open=()=>{const t=this.el.value.toLocaleLowerCase();this._resetAutocomplete(),t.length>=this.options.minLength&&(this.isOpen=!0,this._renderDropdown()),this.dropdown.isOpen?this.dropdown.recalculateDimensions():setTimeout((()=>{this.dropdown.open()}),0)};close=()=>{this.dropdown.close()};setMenuItems(t){this.menuItems=t,this.open(),this._updateSelectedInfo()}setValues(t){this.selectedValues=t,this._updateSelectedInfo(),this.options.isMultiSelect||this._refreshInputText(),this._triggerChanged()}selectOption(t){const e=this.menuItems.find((e=>e.id==t));if(!e)return;const i=this.container.querySelector('li[data-id="'+t+'"]');if(i){if(this.options.isMultiSelect){const t=i.querySelector('input[type="checkbox"]');t.checked=!t.checked,t.checked?this.selectedValues.push(e):this.selectedValues=this.selectedValues.filter((t=>t.id!==e.id)),this.el.focus()}else this.selectedValues=[e],this._refreshInputText(),this._resetAutocomplete(),this.close();this._updateSelectedInfo(),this._triggerChanged()}}}const l={direction:"top",hoverEnabled:!0,toolbarEnabled:!1};class r extends i{isOpen;_anchor;_menu;_floatingBtns;_floatingBtnsReverse;offsetY;offsetX;btnBottom;btnLeft;btnWidth;constructor(t,e){super(t,e,r),this.el.M_FloatingActionButton=this,this.options={...r.defaults,...e},this.isOpen=!1,this._anchor=this.el.querySelector("a"),this._menu=this.el.querySelector("ul"),this._floatingBtns=Array.from(this.el.querySelectorAll("ul .btn-floating")),this._floatingBtnsReverse=this._floatingBtns.reverse(),this.offsetY=0,this.offsetX=0,this.el.classList.add(`direction-${this.options.direction}`),"top"===this.options.direction?this.offsetY=40:"right"===this.options.direction?this.offsetX=-40:"bottom"===this.options.direction?this.offsetY=-40:this.offsetX=40,this._setupEventHandlers()}static get defaults(){return l}static init(t,e={}){return super.init(t,e,r)}static getInstance(t){return t.M_FloatingActionButton}destroy(){this._removeEventHandlers(),this.el.M_FloatingActionButton=void 0}_setupEventHandlers(){this.options.hoverEnabled&&!this.options.toolbarEnabled?(this.el.addEventListener("mouseenter",this.open),this.el.addEventListener("mouseleave",this.close)):this.el.addEventListener("click",this._handleFABClick)}_removeEventHandlers(){this.options.hoverEnabled&&!this.options.toolbarEnabled?(this.el.removeEventListener("mouseenter",this.open),this.el.removeEventListener("mouseleave",this.close)):this.el.removeEventListener("click",this._handleFABClick)}_handleFABClick=()=>{this.isOpen?this.close():this.open()};_handleDocumentClick=t=>{t.target!==this._menu&&this.close()};open=()=>{this.isOpen||(this.options.toolbarEnabled?this._animateInToolbar():this._animateInFAB(),this.isOpen=!0)};close=()=>{this.isOpen&&(this.options.toolbarEnabled?(window.removeEventListener("scroll",this.close,!0),document.body.removeEventListener("click",this._handleDocumentClick,!0)):this._animateOutFAB(),this.isOpen=!1)};_animateInFAB(){this.el.classList.add("active");this._floatingBtnsReverse.forEach(((t,e)=>{const i=40*e;t.style.transition="none",t.style.opacity="0",t.style.transform=`translate(${this.offsetX}px, ${this.offsetY}px) scale(0.4)`,setTimeout((()=>{t.style.opacity="0.4",setTimeout((()=>{t.style.transition="opacity 275ms ease, transform 275ms ease",t.style.opacity="1",t.style.transform="translate(0, 0) scale(1)"}),1)}),i)}))}_animateOutFAB(){setTimeout((()=>this.el.classList.remove("active")),175),this._floatingBtnsReverse.forEach((t=>{t.style.transition="opacity 175ms ease, transform 175ms ease",t.style.opacity="0",t.style.transform=`translate(${this.offsetX}px, ${this.offsetY}px) scale(0.4)`}))}_animateInToolbar(){const t=window.innerWidth,e=window.innerHeight,i=this.el.getBoundingClientRect(),s=document.createElement("div"),n=t/s[0].clientWidth,o=getComputedStyle(this._anchor).backgroundColor;s.classList.add("fab-backdrop"),s.style.backgroundColor=o,this._anchor.append(s),this.offsetX=i.left-t/2+i.width/2,this.offsetY=e-i.bottom,this.btnBottom=i.bottom,this.btnLeft=i.left,this.btnWidth=i.width,this.el.classList.add("active"),this.el.style.textAlign="center",this.el.style.width="100%",this.el.style.bottom="0",this.el.style.left="0",this.el.style.transform="translateX("+this.offsetX+"px)",this.el.style.transition="none",this._anchor.style.transform=`translateY(${this.offsetY}px`,this._anchor.style.transition="none",setTimeout((()=>{this.el.style.transform="",this.el.style.transition="transform .2s cubic-bezier(0.550, 0.085, 0.680, 0.530), background-color 0s linear .2s",this._anchor.style.overflow="visible",this._anchor.style.transform="",this._anchor.style.transition="transform .2s",setTimeout((()=>{this.el.style.overflow="hidden",this.el.style.backgroundColor=o,s.style.transform="scale("+n+")",s.style.transition="transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)",this._menu.querySelectorAll("li > a").forEach((t=>t.style.opacity="1")),window.addEventListener("scroll",this.close,!0),document.body.addEventListener("click",this._handleDocumentClick,!0)}),100)}),0)}}const h={onOpen:null,onClose:null,inDuration:225,outDuration:300};class d extends i{isOpen=!1;cardReveal;initialOverflow;_activators;cardRevealClose;constructor(t,e){super(t,e,d),this.el.M_Cards=this,this.options={...d.defaults,...e},this.cardReveal=this.el.querySelector(".card-reveal"),this.cardReveal&&(this.initialOverflow=getComputedStyle(this.el).overflow,this._activators=Array.from(this.el.querySelectorAll(".activator")),this._activators.forEach((t=>{t&&(t.tabIndex=0)})),this.cardRevealClose=this.cardReveal?.querySelector(".card-title"),this.cardRevealClose&&(this.cardRevealClose.tabIndex=-1),this.cardReveal.ariaExpanded="false",this._setupEventHandlers())}static get defaults(){return h}static init(t,e){return super.init(t,e,d)}static getInstance(t){return t.M_Cards}destroy(){this._removeEventHandlers(),this._activators=[]}_setupEventHandlers=()=>{this._activators.forEach((t=>{t.addEventListener("click",this._handleClickInteraction),t.addEventListener("keypress",this._handleKeypressEvent)}))};_removeEventHandlers=()=>{this._activators.forEach((t=>{t.removeEventListener("click",this._handleClickInteraction),t.removeEventListener("keypress",this._handleKeypressEvent)}))};_handleClickInteraction=()=>{this._handleRevealEvent()};_handleKeypressEvent=t=>{e.keys.ENTER.includes(t.key)&&this._handleRevealEvent()};_handleRevealEvent=()=>{this._activators.forEach((t=>t.tabIndex=-1)),this.open()};_setupRevealCloseEventHandlers=()=>{this.cardRevealClose.addEventListener("click",this.close),this.cardRevealClose.addEventListener("keypress",this._handleKeypressCloseEvent)};_removeRevealCloseEventHandlers=()=>{this.cardRevealClose.addEventListener("click",this.close),this.cardRevealClose.addEventListener("keypress",this._handleKeypressCloseEvent)};_handleKeypressCloseEvent=t=>{e.keys.ENTER.includes(t.key)&&this.close()};open=()=>{this.isOpen||(this.isOpen=!0,this.el.style.overflow="hidden",this.cardReveal.style.display="block",this.cardReveal.ariaExpanded="true",this.cardRevealClose.tabIndex=0,setTimeout((()=>{this.cardReveal.style.transition=`transform ${this.options.outDuration}ms ease`,this.cardReveal.style.transform="translateY(-100%)"}),1),"function"==typeof this.options.onOpen&&this.options.onOpen.call(this),this._setupRevealCloseEventHandlers())};close=()=>{this.isOpen&&(this.isOpen=!1,this.cardReveal.style.transition=`transform ${this.options.inDuration}ms ease`,this.cardReveal.style.transform="translateY(0)",setTimeout((()=>{this.cardReveal.style.display="none",this.cardReveal.ariaExpanded="false",this._activators.forEach((t=>t.tabIndex=0)),this.cardRevealClose.tabIndex=-1,this.el.style.overflow=this.initialOverflow}),this.options.inDuration),"function"==typeof this.options.onClose&&this.options.onClose.call(this),this._removeRevealCloseEventHandlers())}}const c={duration:200,dist:-100,shift:0,padding:0,numVisible:5,fullWidth:!1,indicators:!1,noWrap:!1,onCycleTo:null};class p extends i{hasMultipleSlides;showIndicators;noWrap;pressed;dragged;offset;target;images;itemWidth;itemHeight;dim;_indicators;count;xform;verticalDragged;reference;referenceY;velocity;frame;timestamp;ticker;amplitude;center=0;imageHeight;scrollingTimeout;oneTimeCallback;constructor(t,e){super(t,e,p),this.el.M_Carousel=this,this.options={...p.defaults,...e},this.hasMultipleSlides=this.el.querySelectorAll(".carousel-item").length>1,this.showIndicators=this.options.indicators&&this.hasMultipleSlides,this.noWrap=this.options.noWrap||!this.hasMultipleSlides,this.pressed=!1,this.dragged=!1,this.offset=this.target=0,this.images=[],this.itemWidth=this.el.querySelector(".carousel-item").clientWidth,this.itemHeight=this.el.querySelector(".carousel-item").clientHeight,this.dim=2*this.itemWidth+this.options.padding||1,this.options.fullWidth&&(this.options.dist=0,this._setCarouselHeight(),this.showIndicators&&this.el.querySelector(".carousel-fixed-item")?.classList.add("with-indicators")),this._indicators=document.createElement("ul"),this._indicators.classList.add("indicators"),this.el.querySelectorAll(".carousel-item").forEach(((t,e)=>{if(this.images.push(t),this.showIndicators){const t=document.createElement("li");t.classList.add("indicator-item"),t.tabIndex=0,0===e&&t.classList.add("active"),this._indicators.appendChild(t)}})),this.showIndicators&&this.el.appendChild(this._indicators),this.count=this.images.length,this.options.numVisible=Math.min(this.count,this.options.numVisible),this.xform="transform",["webkit","Moz","O","ms"].every((t=>{const e=t+"Transform";return void 0===document.body.style[e]||(this.xform=e,!1)})),this._setupEventHandlers(),this._scroll(this.offset)}static get defaults(){return c}static init(t,e={}){return super.init(t,e,p)}static getInstance(t){return t.M_Carousel}destroy(){this._removeEventHandlers(),this.el.M_Carousel=void 0}_setupEventHandlers(){void 0!==window.ontouchstart&&(this.el.addEventListener("touchstart",this._handleCarouselTap),this.el.addEventListener("touchmove",this._handleCarouselDrag),this.el.addEventListener("touchend",this._handleCarouselRelease)),this.el.addEventListener("mousedown",this._handleCarouselTap),this.el.addEventListener("mousemove",this._handleCarouselDrag),this.el.addEventListener("mouseup",this._handleCarouselRelease),this.el.addEventListener("mouseleave",this._handleCarouselRelease),this.el.addEventListener("click",this._handleCarouselClick),this.showIndicators&&this._indicators&&this._indicators.querySelectorAll(".indicator-item").forEach((t=>{t.addEventListener("click",this._handleIndicatorClick),t.addEventListener("keypress",this._handleIndicatorKeyPress)})),window.addEventListener("resize",this._handleThrottledResize)}_removeEventHandlers(){void 0!==window.ontouchstart&&(this.el.removeEventListener("touchstart",this._handleCarouselTap),this.el.removeEventListener("touchmove",this._handleCarouselDrag),this.el.removeEventListener("touchend",this._handleCarouselRelease)),this.el.removeEventListener("mousedown",this._handleCarouselTap),this.el.removeEventListener("mousemove",this._handleCarouselDrag),this.el.removeEventListener("mouseup",this._handleCarouselRelease),this.el.removeEventListener("mouseleave",this._handleCarouselRelease),this.el.removeEventListener("click",this._handleCarouselClick),this.showIndicators&&this._indicators&&this._indicators.querySelectorAll(".indicator-item").forEach((t=>{t.removeEventListener("click",this._handleIndicatorClick)})),window.removeEventListener("resize",this._handleThrottledResize)}_handleThrottledResize=e.throttle((function(){this._handleResize()}),200,null).bind(this);_handleCarouselTap=t=>{"mousedown"===t.type&&"IMG"===t.target.tagName&&t.preventDefault(),this.pressed=!0,this.dragged=!1,this.verticalDragged=!1,this.reference=this._xpos(t),this.referenceY=this._ypos(t),this.velocity=this.amplitude=0,this.frame=this.offset,this.timestamp=Date.now(),clearInterval(this.ticker),this.ticker=setInterval(this._track,100)};_handleCarouselDrag=t=>{let e,i,s,n;if(this.pressed)if(e=this._xpos(t),i=this._ypos(t),s=this.reference-e,n=Math.abs(this.referenceY-i),n<30&&!this.verticalDragged)(s>2||s<-2)&&(this.dragged=!0,this.reference=e,this._scroll(this.offset+s));else{if(this.dragged)return t.preventDefault(),t.stopPropagation(),!1;this.verticalDragged=!0}if(this.dragged)return t.preventDefault(),t.stopPropagation(),!1};_handleCarouselRelease=t=>{if(this.pressed)return this.pressed=!1,clearInterval(this.ticker),this.target=this.offset,(this.velocity>10||this.velocity<-10)&&(this.amplitude=.9*this.velocity,this.target=this.offset+this.amplitude),this.target=Math.round(this.target/this.dim)*this.dim,this.noWrap&&(this.target>=this.dim*(this.count-1)?this.target=this.dim*(this.count-1):this.target<0&&(this.target=0)),this.amplitude=this.target-this.offset,this.timestamp=Date.now(),requestAnimationFrame(this._autoScroll),this.dragged&&(t.preventDefault(),t.stopPropagation()),!1};_handleCarouselClick=t=>{if(this.dragged)return t.preventDefault(),t.stopPropagation(),!1;if(!this.options.fullWidth){const e=t.target.closest(".carousel-item");if(!e)return;const i=[...e.parentNode.children].indexOf(e);0!==this._wrap(this.center)-i&&(t.preventDefault(),t.stopPropagation()),i<0?t.clientX-t.target.getBoundingClientRect().left>this.el.clientWidth/2?this.next():this.prev():this._cycleTo(i)}};_handleIndicatorClick=t=>{t.stopPropagation(),this._handleIndicatorInteraction(t)};_handleIndicatorKeyPress=t=>{t.stopPropagation(),e.keys.ENTER.includes(t.key)&&this._handleIndicatorInteraction(t)};_handleIndicatorInteraction=t=>{const e=t.target.closest(".indicator-item");if(e){const t=[...e.parentNode.children].indexOf(e);this._cycleTo(t)}};_handleResize=()=>{this.options.fullWidth?(this.itemWidth=this.el.querySelector(".carousel-item").clientWidth,this.imageHeight=this.el.querySelector(".carousel-item.active").clientHeight,this.dim=2*this.itemWidth+this.options.padding,this.offset=2*this.center*this.itemWidth,this.target=this.offset,this._setCarouselHeight(!0)):this._scroll()};_setCarouselHeight(t=!1){const e=this.el.querySelector(".carousel-item.active")?this.el.querySelector(".carousel-item.active"):this.el.querySelector(".carousel-item"),i=e.querySelector("img");if(i)if(i.complete){const t=i.clientHeight;if(t>0)this.el.style.height=t+"px";else{const t=i.naturalWidth,e=i.naturalHeight,s=this.el.clientWidth/t*e;this.el.style.height=s+"px"}}else i.addEventListener("load",(()=>{this.el.style.height=i.offsetHeight+"px"}));else if(!t){const t=e.clientHeight;this.el.style.height=t+"px"}}_xpos(t){return t.type.startsWith("touch")&&t.targetTouches.length>=1?t.targetTouches[0].clientX:t.clientX}_ypos(t){return t.type.startsWith("touch")&&t.targetTouches.length>=1?t.targetTouches[0].clientY:t.clientY}_wrap(t){return t>=this.count?t%this.count:t<0?this._wrap(this.count+t%this.count):t}_track=()=>{const t=Date.now(),e=t-this.timestamp,i=1e3*(this.offset-this.frame)/(1+e);this.timestamp=t,this.frame=this.offset,this.velocity=.8*i+.2*this.velocity};_autoScroll=()=>{let t,e;this.amplitude&&(t=Date.now()-this.timestamp,e=this.amplitude*Math.exp(-t/this.options.duration),e>2||e<-2?(this._scroll(this.target-e),requestAnimationFrame(this._autoScroll)):this._scroll(this.target))};_scroll(t=0){this.el.classList.contains("scrolling")||this.el.classList.add("scrolling"),null!=this.scrollingTimeout&&clearTimeout(this.scrollingTimeout),this.scrollingTimeout=setTimeout((()=>{this.el.classList.remove("scrolling")}),this.options.duration),this.offset="number"==typeof t?t:this.offset,this.center=Math.floor((this.offset+this.dim/2)/this.dim);const e=this.count>>1,i=this.offset-this.center*this.dim,s=i<0?1:-1,n=-s*i*2/this.dim;let o,a,l,r,h,d;const c=this.center,p=1/this.options.numVisible;if(this.options.fullWidth?(l="translateX(0)",d=1):(l="translateX("+(this.el.clientWidth-this.itemWidth)/2+"px) ",l+="translateY("+(this.el.clientHeight-this.itemHeight)/2+"px)",d=1-p*n),this.showIndicators){const t=this.center%this.count,e=this._indicators.querySelector(".indicator-item.active");if([...e.parentNode.children].indexOf(e)!==t){e.classList.remove("active");const i=t<0?this.count+t:t;this._indicators.querySelectorAll(".indicator-item")[i].classList.add("active")}}if(!this.noWrap||this.center>=0&&this.center0?1-n:1):(r=this.options.dist*(2*o-n*s),h=1-p*(2*o-n*s)),!this.noWrap||this.center-o>=0){a=this.images[this._wrap(this.center-o)];const t=`${l} translateX(${-this.options.shift+(-this.dim*o-i)/2}px) translateZ(${r}px)`;this._updateItemStyle(a,h,-o,t)}}if(!this.noWrap||this.center>=0&&this.center0&&Math.abs(i-this.count)0&&(this.target-=this.dim*i),"function"==typeof e&&(this.oneTimeCallback=e),this.offset!==this.target&&(this.amplitude=this.target-this.offset,this.timestamp=Date.now(),requestAnimationFrame(this._autoScroll))}next(t=1){(void 0===t||isNaN(t))&&(t=1);let e=this.center+t;if(e>=this.count||e<0){if(this.noWrap)return;e=this._wrap(e)}this._cycleTo(e)}prev(t=1){(void 0===t||isNaN(t))&&(t=1);let e=this.center-t;if(e>=this.count||e<0){if(this.noWrap)return;e=this._wrap(e)}this._cycleTo(e)}set(t,e){if((void 0===t||isNaN(t))&&(t=0),t>this.count||t<0){if(this.noWrap)return;t=this._wrap(t)}this._cycleTo(t,e)}}const u={data:[],placeholder:"",secondaryPlaceholder:"",closeIconClass:"material-icons",autocompleteOptions:{},autocompleteOnly:!1,limit:1/0,allowUserInput:!1,onChipAdd:null,onChipSelect:null,onChipDelete:null};function m(t){return[...t.parentNode.children].indexOf(t)}class v extends i{chipsData;hasAutocomplete;autocomplete;_input;_label;_chips;static _keydown;_selectedChip;constructor(t,e){super(t,e,v),this.el.M_Chips=this,this.options={...v.defaults,...e},this.el.classList.add("chips"),this.chipsData=[],this._chips=[],this.options.data.length&&(this.chipsData=this.options.data,this._renderChips()),this._setupLabel(),this.options.allowUserInput&&(this.el.classList.add("input-field"),this._setupInput(),this._setupEventHandlers(),this.el.append(this._input))}static get defaults(){return u}static init(t,e={}){return super.init(t,e,v)}static getInstance(t){return t.M_Chips}getData(){return this.chipsData}destroy(){this.options.allowUserInput&&this._removeEventHandlers(),this._chips.forEach((t=>t.remove())),this._chips=[],this.el.M_Chips=void 0}_setupEventHandlers(){this.el.addEventListener("click",this._handleChipClick),document.addEventListener("keydown",v._handleChipsKeydown),document.addEventListener("keyup",v._handleChipsKeyup),this.el.addEventListener("blur",v._handleChipsBlur,!0),this._input.addEventListener("focus",this._handleInputFocus),this._input.addEventListener("blur",this._handleInputBlur),this._input.addEventListener("keydown",this._handleInputKeydown)}_removeEventHandlers(){this.el.removeEventListener("click",this._handleChipClick),document.removeEventListener("keydown",v._handleChipsKeydown),document.removeEventListener("keyup",v._handleChipsKeyup),this.el.removeEventListener("blur",v._handleChipsBlur,!0),this._input.removeEventListener("focus",this._handleInputFocus),this._input.removeEventListener("blur",this._handleInputBlur),this._input.removeEventListener("keydown",this._handleInputKeydown)}_handleChipClick=t=>{const e=t.target.closest(".chip"),i=t.target.classList.contains("close");if(e){const t=[...e.parentNode.children].indexOf(e);i?(this.deleteChip(t),this._input.focus()):this.selectChip(t)}else this._input.focus()};static _handleChipsKeydown(t){v._keydown=!0;const i=t.target.closest(".chips"),s=t.target&&i,n=t.target.tagName;if("INPUT"===n||"TEXTAREA"===n||!s)return;const o=i.M_Chips;if(e.keys.BACKSPACE.includes(t.key)||e.keys.DELETE.includes(t.key)){t.preventDefault();let e=o.chipsData.length;if(o._selectedChip){const t=m(o._selectedChip);o.deleteChip(t),o._selectedChip=null,e=Math.max(t-1,0)}o.chipsData.length?o.selectChip(e):o._input.focus()}else if(e.keys.ARROW_LEFT.includes(t.key)){if(o._selectedChip){const t=m(o._selectedChip)-1;if(t<0)return;o.selectChip(t)}}else if(e.keys.ARROW_RIGHT.includes(t.key)&&o._selectedChip){const t=m(o._selectedChip)+1;t>=o.chipsData.length?o._input.focus():o.selectChip(t)}}static _handleChipsKeyup(){v._keydown=!1}static _handleChipsBlur(t){if(!v._keydown&&document.hidden){t.target.closest(".chips").M_Chips._selectedChip=null}}_handleInputFocus=()=>{this.el.classList.add("focus")};_handleInputBlur=()=>{this.el.classList.remove("focus")};_handleInputKeydown=t=>{if(v._keydown=!0,e.keys.ENTER.includes(t.key)){if(this.hasAutocomplete&&this.autocomplete&&this.autocomplete.isOpen)return;t.preventDefault(),(!this.hasAutocomplete||this.hasAutocomplete&&!this.options.autocompleteOnly)&&this.addChip({id:this._input.value}),this._input.value=""}else(e.keys.BACKSPACE.includes(t.key)||e.keys.ARROW_LEFT.includes(t.key))&&""===this._input.value&&this.chipsData.length&&(t.preventDefault(),this.selectChip(this.chipsData.length-1))};_renderChip(t){if(!t.id)return;const e=document.createElement("div");if(e.classList.add("chip"),e.innerText=t.text||t.id,t.image){const i=document.createElement("img");i.setAttribute("src",t.image),e.insertBefore(i,e.firstChild)}if(this.options.allowUserInput){e.setAttribute("tabindex","0");const t=document.createElement("i");t.classList.add(this.options.closeIconClass,"close"),t.innerText="close",e.appendChild(t)}return e}_renderChips(){this._chips=[];for(let t=0;t{t.length>0&&this.addChip({id:t[0].id,text:t[0].text,image:t[0].image}),this._input.value="",this._input.focus()},this.autocomplete=a.init(this._input,this.options.autocompleteOptions)}_setupInput(){this._input=this.el.querySelector("input"),this._input||(this._input=document.createElement("input"),this.el.append(this._input)),this._input.classList.add("input"),this.hasAutocomplete=Object.keys(this.options.autocompleteOptions).length>0,this.hasAutocomplete&&this._setupAutocomplete(),this._setPlaceholder(),this._input.getAttribute("id")||this._input.setAttribute("id",e.guid())}_setupLabel(){this._label=this.el.querySelector("label"),this._label&&this._label.setAttribute("for",this._input.getAttribute("id"))}_setPlaceholder(){void 0!==this.chipsData&&!this.chipsData.length&&this.options.placeholder?this._input.placeholder=this.options.placeholder:(void 0===this.chipsData||this.chipsData.length)&&this.options.secondaryPlaceholder&&(this._input.placeholder=this.options.secondaryPlaceholder)}_isValidAndNotExist(t){const e=!!t.id,i=!this.chipsData.some((e=>e.id==t.id));return e&&i}addChip(t){if(!this._isValidAndNotExist(t)||this.chipsData.length>=this.options.limit)return;const e=this._renderChip(t);this._chips.push(e),this.chipsData.push(t),this._input.before(e),this._setPlaceholder(),"function"==typeof this.options.onChipAdd&&this.options.onChipAdd(this.el,e)}deleteChip(t){const e=this._chips[t];this._chips[t].remove(),this._chips.splice(t,1),this.chipsData.splice(t,1),this._setPlaceholder(),"function"==typeof this.options.onChipDelete&&this.options.onChipDelete(this.el,e)}selectChip(t){const e=this._chips[t];this._selectedChip=e,e.focus(),"function"==typeof this.options.onChipSelect&&this.options.onChipSelect(this.el,e)}static Init(){"undefined"!=typeof document&&document.addEventListener("DOMContentLoaded",(()=>{document.querySelectorAll(".chips").forEach((t=>{t.addEventListener("click",(t=>{if(t.target.classList.contains("close")){const e=t.target.closest(".chip");e&&e.remove()}}))}))}))}static{v._keydown=!1}}const _={accordion:!0,onOpenStart:null,onOpenEnd:null,onCloseStart:null,onCloseEnd:null,inDuration:300,outDuration:300};class g extends i{_headers;constructor(t,e){super(t,e,g),this.el.M_Collapsible=this,this.options={...g.defaults,...e},this._headers=Array.from(this.el.querySelectorAll("li > .collapsible-header")),this._headers.forEach((t=>t.tabIndex=0)),this._setupEventHandlers();const i=Array.from(this.el.querySelectorAll("li.active > .collapsible-body"));this.options.accordion?i.length>0&&this._setExpanded(i[0]):i.forEach((t=>this._setExpanded(t)))}static get defaults(){return _}static init(t,e={}){return super.init(t,e,g)}static getInstance(t){return t.M_Collapsible}destroy(){this._removeEventHandlers(),this.el.M_Collapsible=void 0}_setupEventHandlers(){this.el.addEventListener("click",this._handleCollapsibleClick),this._headers.forEach((t=>t.addEventListener("keydown",this._handleCollapsibleKeydown)))}_removeEventHandlers(){this.el.removeEventListener("click",this._handleCollapsibleClick),this._headers.forEach((t=>t.removeEventListener("keydown",this._handleCollapsibleKeydown)))}_handleCollapsibleClick=t=>{const e=t.target.closest(".collapsible-header");if(t.target&&e){if(e.closest(".collapsible")!==this.el)return;const t=e.closest("li"),i=t.classList.contains("active"),s=[...t.parentNode.children].indexOf(t);i?this.close(s):this.open(s)}};_handleCollapsibleKeydown=t=>{e.keys.ENTER.includes(t.key)&&this._handleCollapsibleClick(t)};_setExpanded(t){t.style.maxHeight=t.scrollHeight+"px"}_animateIn(t){const e=this.el.children[t];if(!e)return;const i=e.querySelector(".collapsible-body"),s=this.options.inDuration;i.style.transition=`max-height ${s}ms ease-out`,this._setExpanded(i),setTimeout((()=>{"function"==typeof this.options.onOpenEnd&&this.options.onOpenEnd.call(this,e)}),s)}_animateOut(t){const e=this.el.children[t];if(!e)return;const i=e.querySelector(".collapsible-body"),s=this.options.outDuration;i.style.transition=`max-height ${s}ms ease-out`,i.style.maxHeight="0",setTimeout((()=>{"function"==typeof this.options.onCloseEnd&&this.options.onCloseEnd.call(this,e)}),s)}open=t=>{const e=Array.from(this.el.children).filter((t=>"LI"===t.tagName)),i=e[t];if(i&&!i.classList.contains("active")){if("function"==typeof this.options.onOpenStart&&this.options.onOpenStart.call(this,i),this.options.accordion){const t=e.filter((t=>t.classList.contains("active")));t.forEach((t=>{const i=e.indexOf(t);this.close(i)}))}i.classList.add("active"),this._animateIn(t)}};close=t=>{const e=Array.from(this.el.children).filter((t=>"LI"===t.tagName))[t];e&&e.classList.contains("active")&&("function"==typeof this.options.onCloseStart&&this.options.onCloseStart.call(this,e),e.classList.remove("active"),this._animateOut(t))}}const y={classes:"",dropdownOptions:{}};class f extends i{isMultiple;labelEl;dropdownOptions;input;dropdown;wrapper;selectOptions;_values;constructor(t,e){super(t,e,f),this.el.classList.contains("browser-default")||(this.el.M_FormSelect=this,this.options={...f.defaults,...e},this.isMultiple=this.el.multiple,this.el.tabIndex=-1,this._values=[],this._setupDropdown(),this._setupEventHandlers())}static get defaults(){return y}static init(t,e={}){return super.init(t,e,f)}static getInstance(t){return t.M_FormSelect}destroy(){this._removeEventHandlers(),this._removeDropdown(),this.el.M_FormSelect=void 0}_setupEventHandlers(){this.dropdownOptions.querySelectorAll("li:not(.optgroup)").forEach((t=>{t.addEventListener("click",this._handleOptionClick),t.addEventListener("keydown",(t=>{" "!==t.key&&"Enter"!==t.key||this._handleOptionClick(t)}))})),this.el.addEventListener("change",this._handleSelectChange),this.input.addEventListener("click",this._handleInputClick)}_removeEventHandlers(){this.dropdownOptions.querySelectorAll("li:not(.optgroup)").forEach((t=>{t.removeEventListener("click",this._handleOptionClick)})),this.el.removeEventListener("change",this._handleSelectChange),this.input.removeEventListener("click",this._handleInputClick)}_handleSelectChange=()=>{this._setValueToInput()};_handleOptionClick=t=>{t.preventDefault();const e=t.target.closest("li");this._selectOptionElement(e),t.stopPropagation()};_arraysEqual(t,e){if(t===e)return!0;if(null==t||null==e)return!1;if(t.length!==e.length)return!1;for(let i=0;ie.optionEl===t)),i=this.getSelectedValues();this.isMultiple?this._toggleEntryFromArray(e):(this._deselectAll(),this._selectValue(e)),this._setValueToInput();const s=this.getSelectedValues();!this._arraysEqual(i,s)&&this.el.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0,composed:!0}))}this.isMultiple||this.dropdown.close()}_handleInputClick=()=>{this.dropdown&&this.dropdown.isOpen&&(this._setValueToInput(),this._setSelectedStates())};_setupDropdown(){this.labelEl=document.querySelector('[for="'+this.el.id+'"]'),this.labelEl&&(this.labelEl.style.display="none"),this.wrapper=document.createElement("div"),this.wrapper.classList.add("select-wrapper","input-field"),this.options.classes.length>0&&this.wrapper.classList.add(...this.options.classes.split(" ")),this.el.before(this.wrapper);const t=document.createElement("div");t.classList.add("hide-select"),this.wrapper.append(t),t.appendChild(this.el),this.el.disabled&&this.wrapper.classList.add("disabled"),this.selectOptions=Array.from(this.el.children).filter((t=>["OPTION","OPTGROUP"].includes(t.tagName))),this.dropdownOptions=document.createElement("ul"),this.dropdownOptions.id=`select-options-${e.guid()}`,this.dropdownOptions.classList.add("dropdown-content","select-dropdown"),this.dropdownOptions.setAttribute("role","listbox"),this.dropdownOptions.ariaMultiSelectable=this.isMultiple.toString(),this.isMultiple&&this.dropdownOptions.classList.add("multiple-select-dropdown"),this.selectOptions.length>0&&this.selectOptions.forEach((t=>{if("OPTION"===t.tagName){const e=this._createAndAppendOptionWithIcon(t,this.isMultiple?"multiple":void 0);this._addOptionToValues(t,e)}else if("OPTGROUP"===t.tagName){const i="opt-group-"+e.guid(),s=document.createElement("li");s.classList.add("optgroup"),s.tabIndex=-1,s.setAttribute("role","group"),s.setAttribute("aria-labelledby",i),s.innerHTML=`${t.getAttribute("label")}`,this.dropdownOptions.append(s);const n=[];Array.from(t.children).filter((t=>"OPTION"===t.tagName)).forEach((t=>{const i=this._createAndAppendOptionWithIcon(t,"optgroup-option"),s="opt-child-"+e.guid();i.id=s,n.push(s),this._addOptionToValues(t,i)})),s.setAttribute("aria-owns",n.join(" "))}})),this.wrapper.append(this.dropdownOptions),this.input=document.createElement("input"),this.input.id="m_select-input-"+e.guid(),this.input.classList.add("select-dropdown","dropdown-trigger"),this.input.type="text",this.input.readOnly=!0,this.input.setAttribute("data-target",this.dropdownOptions.id),this.input.ariaReadOnly="true",this.input.ariaRequired=this.el.hasAttribute("required").toString(),this.el.disabled&&(this.input.disabled=!0);const i=this.el.attributes;for(let t=0;t{const t=this.dropdownOptions.querySelector(".selected");if(t&&(e.keyDown=!0,this.dropdown.focusedIndex=[...t.parentNode.children].indexOf(t),this.dropdown._focusFocusedItem(),e.keyDown=!1,this.dropdown.isScrollable)){let e=t.getBoundingClientRect().top-this.dropdownOptions.getBoundingClientRect().top;e-=this.dropdownOptions.clientHeight/2,this.dropdownOptions.scrollTop=e}this.input.ariaExpanded="true",i&&"function"==typeof i&&i.call(this.dropdown,this.el)},t.onCloseEnd=()=>{this.input.ariaExpanded="false",s&&"function"==typeof s&&s.call(this.dropdown,this.el)},t.closeOnClick=!1,this.dropdown=n.init(this.input,t)}if(this._setSelectedStates(),this.labelEl){const t=document.createElement("label");t.htmlFor=this.input.id,t.innerText=this.labelEl.innerText,this.input.after(t)}}_addOptionToValues(t,e){this._values.push({el:t,optionEl:e})}_removeDropdown(){this.wrapper.querySelector(".caret").remove(),this.input.remove(),this.dropdownOptions.remove(),this.wrapper.before(this.el),this.wrapper.remove()}_createAndAppendOptionWithIcon(t,e){const i=document.createElement("li");i.setAttribute("role","option"),t.disabled&&(i.classList.add("disabled"),i.ariaDisabled="true"),"optgroup-option"===e&&i.classList.add(e);const s=document.createElement("span");s.innerHTML=t.innerHTML,this.isMultiple&&!t.disabled&&(s.innerHTML=``),i.appendChild(s);const n=t.getAttribute("data-icon"),o=t.getAttribute("class")?.split(" ");if(n){const t=document.createElement("img");o&&t.classList.add(...o),t.src=n,t.ariaHidden="true",i.prepend(t)}return this.dropdownOptions.append(i),i}_selectValue(t){t.el.selected=!0,t.optionEl.classList.add("selected"),t.optionEl.ariaSelected="true";const e=t.optionEl.querySelector('input[type="checkbox"]');e&&(e.checked=!0)}_deselectValue(t){t.el.selected=!1,t.optionEl.classList.remove("selected"),t.optionEl.ariaSelected="false";const e=t.optionEl.querySelector('input[type="checkbox"]');e&&(e.checked=!1)}_deselectAll(){this._values.forEach((t=>this._deselectValue(t)))}_isValueSelected(t){return this.getSelectedValues().some((e=>e===t.el.value))}_toggleEntryFromArray(t){this._isValueSelected(t)?this._deselectValue(t):this._selectValue(t)}_getSelectedOptions(){return Array.prototype.filter.call(this.el.selectedOptions,(t=>t))}_setValueToInput(){const t=this._getSelectedOptions(),e=this._values.filter((e=>t.indexOf(e.el)>=0)).filter((t=>!t.el.disabled)).map((t=>t.optionEl.querySelector("span").innerText.trim()));if(0===e.length){const t=this.el.querySelector("option:disabled");if(t&&""===t.value)return void(this.input.value=t.innerText)}this.input.value=e.join(", ")}_setSelectedStates(){this._values.forEach((t=>{const e=t.el.selected,i=t.optionEl.querySelector('input[type="checkbox"]');i&&(i.checked=e),e?this._activateOption(this.dropdownOptions,t.optionEl):(t.optionEl.classList.remove("selected"),t.optionEl.ariaSelected="false")}))}_activateOption(t,e){e&&(this.isMultiple||t.querySelectorAll("li.selected").forEach((t=>t.classList.remove("selected"))),e.classList.add("selected"),e.ariaSelected="true")}getSelectedValues(){return this._getSelectedOptions().map((t=>t.value))}}const E={format:"mmm dd, yyyy",parse:null,isDateRange:!1,isMultipleSelection:!1,defaultDate:null,defaultEndDate:null,setDefaultDate:!1,setDefaultEndDate:!1,disableWeekends:!1,disableDayFn:null,firstDay:0,minDate:null,maxDate:null,yearRange:10,minYear:0,maxYear:9999,minMonth:void 0,maxMonth:void 0,startRange:null,endRange:null,isRTL:!1,yearRangeReverse:!1,showMonthAfterYear:!1,showDaysInNextAndPreviousMonths:!1,container:null,showClearBtn:!1,i18n:{cancel:"Cancel",clear:"Clear",done:"Ok",previousMonth:"‹",nextMonth:"›",months:["January","February","March","April","May","June","July","August","September","October","November","December"],monthsShort:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],weekdays:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],weekdaysShort:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],weekdaysAbbrev:["S","M","T","W","T","F","S"]},events:[],onSelect:null,onDraw:null};class w extends i{id;multiple=!1;calendarEl;clearBtn;doneBtn;cancelBtn;modalEl;yearTextEl;dateTextEl;endDateEl;dateEls;date;endDate;dates;formats;calendars;_y;_m;static _template;constructor(t,i){super(t,i,w),this.el.M_Datepicker=this,this.options={...w.defaults,...i},i&&i.hasOwnProperty("i18n")&&"object"==typeof i.i18n&&(this.options.i18n={...w.defaults.i18n,...i.i18n}),this.options.minDate&&this.options.minDate.setHours(0,0,0,0),this.options.maxDate&&this.options.maxDate.setHours(0,0,0,0),this.id=e.guid(),this._setupVariables(),this._insertHTMLIntoDOM(),this._setupEventHandlers(),this.options.defaultDate||(this.options.defaultDate=new Date(Date.parse(this.el.value)));const s=this.options.defaultDate;if(w._isDate(s)?this.options.setDefaultDate?(this.setDate(s,!0),this.setInputValue(this.el,s)):this.gotoDate(s):this.gotoDate(new Date),this.options.isDateRange){this.multiple=!0;const t=this.options.defaultEndDate;w._isDate(t)&&this.options.setDefaultEndDate&&(this.setDate(t,!0,!0),this.setInputValue(this.endDateEl,t))}this.options.isMultipleSelection&&(this.multiple=!0,this.dates=[],this.dateEls=[],this.dateEls.push(t))}static get defaults(){return E}static init(t,e={}){return super.init(t,e,w)}static _isDate(t){return/Date/.test(Object.prototype.toString.call(t))&&!isNaN(t.getTime())}static _isWeekend(t){const e=t.getDay();return 0===e||6===e}static _setToStartOfDay(t){w._isDate(t)&&t.setHours(0,0,0,0)}static _getDaysInMonth(t,e){return[31,w._isLeapYear(t)?29:28,31,30,31,30,31,31,30,31,30,31][e]}static _isLeapYear(t){return t%4==0&&t%100!=0||t%400==0}static _compareDates(t,e){return t.getTime()===e.getTime()}static _compareWithinRange(t,e,i){return t.getTime()>e.getTime()&&t.getTime()this.formats[e]?this.formats[e](t):e)).join("")}setDateFromInput(t){const e=new Date(Date.parse(t.value));this.setDate(e,!1,t==this.endDateEl,!0)}setDate(t=null,e=!1,i=!1,s=!1){const n=this.validateDate(t);n&&(this.options.isMultipleSelection?s||this.setMultiDate(n):this.setSingleDate(n,i),w._setToStartOfDay(n),this.gotoDate(n),e||"function"!=typeof this.options.onSelect||this.options.onSelect.call(this,n))}validateDate(t){if(!t)return this._renderDateDisplay(t),this.draw();if("string"==typeof t&&(t=new Date(Date.parse(t))),!w._isDate(t))return;const e=this.options.minDate,i=this.options.maxDate;return w._isDate(e)&&ti&&(t=i),new Date(t.getTime())}setSingleDate(t,e){e?e&&(this.endDate=t):this.date=t}setMultiDate(t){const e=this.dates?.find((e=>e.getTime()===t.getTime()&&e));e?this.dates.splice(this.dates.indexOf(e),1):this.dates.push(t),this.dates.sort(((t,e)=>t.getTime(){if(e>this.dates.length-1)return t})).forEach((t=>{t.remove()})),this.dates.forEach(((t,e)=>{if(Array.from(this.dateEls)[e])return void this.setInputValue(this.dateEls[e],t);const i=this.createDateInput();this.setInputValue(i,t),this.dateEls.push(i)}))}setInputValue(t,e){console.log("setinputvalue"),"date"==t.type?(this.setDataDate(t,e),t.value=this.formatDate(e,"yyyy-mm-dd")):t.value=this.toString(e),this.el.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0,composed:!0,detail:{firedBy:this}}))}_renderDateDisplay(t,e=null){const i=w._isDate(t)?t:new Date;if(this.options.isDateRange){const t=w._isDate(e)?e:new Date;this.dateTextEl.innerHTML=`${this.formatDate(i,"mmm d")} - ${this.formatDate(t,"mmm d")}`}else this.dateTextEl.innerHTML=this.formatDate(i,"ddd, mmm d")}gotoDate(t){let e=!0;if(w._isDate(t)){if(this.calendars){const i=new Date(this.calendars[0].year,this.calendars[0].month,1),s=new Date(this.calendars[this.calendars.length-1].year,this.calendars[this.calendars.length-1].month,1),n=t.getTime();s.setMonth(s.getMonth()+1),s.setDate(s.getDate()-1),e=n11&&(t.year+=Math.floor(Math.abs(t.month)/12),t.month-=12),t}nextMonth(){this.calendars[0].month++,this.adjustCalendars()}prevMonth(){this.calendars[0].month--,this.adjustCalendars()}render(t,e,i){const s=new Date,n=w._getDaysInMonth(t,e),o=[];let a=new Date(t,e,1).getDay(),l=[];w._setToStartOfDay(s),this.options.firstDay>0&&(a-=this.options.firstDay,a<0&&(a+=7));const r=0===e?11:e-1,h=11===e?0:e+1,d=0===e?t-1:t,c=11===e?t+1:t,p=w._getDaysInMonth(d,r);let u=n+a,m=u;for(;m>7;)m-=7;u+=7-m;let v=!1;for(let i=0,m=0;i=n+a,f=this.options.startRange&&w._compareDates(this.options.startRange,u),E=this.options.endRange&&w._compareDates(this.options.endRange,u),b=this.options.startRange&&this.options.endRange&&this.options.startRangethis.options.maxDate||this.options.disableWeekends&&w._isWeekend(u)||this.options.disableDayFn&&this.options.disableDayFn(u),C=this.options.isDateRange&&w._isDate(this.endDate)&&w._compareWithinRange(u,this.date,this.endDate);let k=i-a+1,T=e,x=t,D=!1;w._isDate(this.date)&&(D=w._compareDates(u,this.date)),!D&&w._isDate(this.endDate)&&(D=w._compareDates(u,this.endDate)),this.options.isMultipleSelection&&this.dates?.some((t=>t.getTime()===u.getTime()))&&(D=!0),y&&(i';e.push("is-outside-current-month"),e.push("is-selection-disabled")}return t.isDisabled&&e.push("is-disabled"),t.isToday&&e.push("is-today"),t.isSelected&&(e.push("is-selected"),i="true"),t.hasEvent&&e.push("has-event"),t.isInRange&&e.push("is-inrange"),t.isStartRange&&e.push("is-startrange"),t.isEndRange&&e.push("is-endrange"),t.isDateRange&&e.push("is-daterange"),``}renderRow(t,e,i){return''+(e?t.reverse():t).join("")+""}renderTable(t,e,i){return'
'+this.renderHead(t)+this.renderBody(e)+"
"}renderHead(t){const e=[];let i;for(i=0;i<7;i++)e.push(`${this.renderDayName(t,i,!0)}`);return""+(t.isRTL?e.reverse():e).join("")+""}renderBody(t){return""+t.join("")+""}renderTitle(t,e,i,s,n,o){const a=this.options,l=i===a.minYear,r=i===a.maxYear;let h,d,c=[],p='
',u=!0,m=!0;for(h=0;h<12;h++)c.push('");const v='";for(Array.isArray(a.yearRange)?(h=a.yearRange[0],d=a.yearRange[1]+1):(h=i-a.yearRange,d=1+i+a.yearRange),c=[];h=a.minYear&&c.push(``);a.yearRangeReverse&&c.reverse();const _=``;p+=``,p+='
',a.showMonthAfterYear?p+=_+v:p+=v+_,p+="
",l&&(0===s||a.minMonth>=s)&&(u=!1),r&&(11===s||a.maxMonth<=s)&&(m=!1);return p+=``,p+"
"}draw(){const t=this.options,e=t.minYear,i=t.maxYear,s=t.minMonth,n=t.maxMonth;let o="";this._y<=e&&(this._y=e,!isNaN(s)&&this._m=i&&(this._y=i,!isNaN(n)&&this._m>n&&(this._m=n));const a="datepicker-title-"+Math.random().toString(36).replace(/[^a-z]+/g,"").substr(0,2);for(let t=0;t<1;t++)this.options.isDateRange?this._renderDateDisplay(this.date,this.endDate):this._renderDateDisplay(this.date),o+=this.renderTitle(this,t,this.calendars[t].year,this.calendars[t].month,this.calendars[0].year,a)+this.render(this.calendars[t].year,this.calendars[t].month,a);this.destroySelects(),this.calendarEl.innerHTML=o;const l=this.calendarEl.querySelector(".orig-select-year"),r=this.calendarEl.querySelector(".orig-select-month");f.init(l,{classes:"select-year",dropdownOptions:{container:document.body,constrainWidth:!1}}),f.init(r,{classes:"select-month",dropdownOptions:{container:document.body,constrainWidth:!1}}),l.addEventListener("change",this._handleYearChange),r.addEventListener("change",this._handleMonthChange),"function"==typeof this.options.onDraw&&this.options.onDraw.call(this)}_setupEventHandlers(){this.el.addEventListener("click",this._handleInputClick),this.el.addEventListener("keydown",this._handleInputKeydown),this.el.addEventListener("change",this._handleInputChange),this.calendarEl.addEventListener("click",this._handleCalendarClick),this.doneBtn.addEventListener("click",(()=>this.setInputValues())),this.cancelBtn.addEventListener("click",this.close),this.options.showClearBtn&&this.clearBtn.addEventListener("click",this._handleClearClick)}_setupVariables(){const t=document.createElement("template");t.innerHTML=w._template.trim(),this.modalEl=t.content.firstChild,this.calendarEl=this.modalEl.querySelector(".datepicker-calendar"),this.yearTextEl=this.modalEl.querySelector(".year-text"),this.dateTextEl=this.modalEl.querySelector(".date-text"),this.options.showClearBtn&&(this.clearBtn=this.modalEl.querySelector(".datepicker-clear")),this.doneBtn=this.modalEl.querySelector(".datepicker-done"),this.cancelBtn=this.modalEl.querySelector(".datepicker-cancel"),this.formats={d:t=>t.getDate(),dd:t=>{const e=t.getDate();return(e<10?"0":"")+e},ddd:t=>this.options.i18n.weekdaysShort[t.getDay()],dddd:t=>this.options.i18n.weekdays[t.getDay()],m:t=>t.getMonth()+1,mm:t=>{const e=t.getMonth()+1;return(e<10?"0":"")+e},mmm:t=>this.options.i18n.monthsShort[t.getMonth()],mmmm:t=>this.options.i18n.months[t.getMonth()],yy:t=>(""+t.getFullYear()).slice(2),yyyy:t=>t.getFullYear()}}_removeEventHandlers(){this.el.removeEventListener("click",this._handleInputClick),this.el.removeEventListener("keydown",this._handleInputKeydown),this.el.removeEventListener("change",this._handleInputChange),this.calendarEl.removeEventListener("click",this._handleCalendarClick),this.options.isDateRange&&(this.endDateEl.removeEventListener("click",this._handleInputClick),this.endDateEl.removeEventListener("keypress",this._handleInputKeydown),this.endDateEl.removeEventListener("change",this._handleInputChange))}_handleInputClick=t=>{"date"==t.type&&t.preventDefault(),this.setDateFromInput(t.target),this.draw(),this.gotoDate(t.target===this.el?this.date:this.endDate)};_handleInputKeydown=t=>{e.keys.ENTER.includes(t.key)&&(t.preventDefault(),this.setDateFromInput(t.target),this.draw())};_handleCalendarClick=t=>{const e=t.target;if(!e.classList.contains("is-disabled"))if(!e.classList.contains("datepicker-day-button")||e.classList.contains("is-empty")||e.parentElement.classList.contains("is-disabled"))e.closest(".month-prev")?this.prevMonth():e.closest(".month-next")&&this.nextMonth();else{const e=new Date(t.target.getAttribute("data-year"),t.target.getAttribute("data-month"),t.target.getAttribute("data-day"));(!this.multiple||this.multiple&&this.options.isMultipleSelection)&&this.setDate(e),this.options.isDateRange&&this._handleDateRangeCalendarClick(e),this._finishSelection()}};_handleDateRangeCalendarClick=t=>{if(null!=this.endDate&&w._compareDates(t,this.endDate))this._clearDates(),this.draw();else{if(w._isDate(this.date)&&w._comparePastDate(t,this.date))return;this.setDate(t,!1,w._isDate(this.date))}};_handleClearClick=()=>{this._clearDates(),this.setInputValues()};_clearDates=()=>{this.date=null,this.endDate=null};_handleMonthChange=t=>{this.gotoMonth(t.target.value)};_handleYearChange=t=>{this.gotoYear(t.target.value)};gotoMonth(t){isNaN(t)||(this.calendars[0].month=parseInt(t,10),this.adjustCalendars())}gotoYear(t){isNaN(t)||(this.calendars[0].year=parseInt(t,10),this.adjustCalendars())}_handleInputChange=t=>{let e;const i=t.target;t.detail?.firedBy!==this&&(i!=this.endDateEl||this.date)&&(e=this.options.parse?this.options.parse(t.target.value,"function"==typeof this.options.format?this.options.format(new Date(this.el.value)):this.options.format):new Date(Date.parse(t.target.value)),w._isDate(e)&&(this.setDate(e,!1,i==this.endDateEl,!0),"date"==t.type&&(this.setDataDate(t,e),this.setInputValues())))};renderDayName(t,e,i=!1){for(e+=t.firstDay;e>=7;)e-=7;return i?t.i18n.weekdaysAbbrev[e]:t.i18n.weekdays[e]}createDateInput(){const t=this.el.cloneNode(!0);return t.addEventListener("click",this._handleInputClick),t.addEventListener("keypress",this._handleInputKeydown),t.addEventListener("change",this._handleInputChange),this.el.parentElement.appendChild(t),t}_finishSelection=()=>{this.setInputValues(),this.close()};open(){return console.warn("Datepicker.open() is deprecated. Remove this method and wrap in modal yourself."),this}close(){return console.warn("Datepicker.close() is deprecated. Remove this method and wrap in modal yourself."),this}static{w._template='\n
\n
\n
\n \n \n
\n
\n
\n
\n \n
\n \n \n
\n
\n
\n
\n
'}}class b{static validateField(t){if(!t)return void console.error("No text field element found");const e=null!==t.getAttribute("data-length"),i=parseInt(t.getAttribute("data-length")),s=t.value.length;0===s&&!1===t.validity.badInput&&!t.required&&t.classList.contains("validate")?t.classList.remove("invalid"):t.classList.contains("validate")&&(t.validity.valid&&e&&s<=i||t.validity.valid&&!e?t.classList.remove("invalid"):t.classList.add("invalid"))}static textareaAutoResize(t){const e=t;let i=document.querySelector(".hiddendiv");i||(i=document.createElement("div"),i.classList.add("hiddendiv","common"),document.body.append(i));const s=getComputedStyle(e),n=s.fontFamily,o=s.fontSize,a=s.lineHeight,l=s.paddingTop,r=s.paddingRight,h=s.paddingBottom,d=s.paddingLeft;o&&(i.style.fontSize=o),n&&(i.style.fontFamily=n),a&&(i.style.lineHeight=a),l&&(i.style.paddingTop=l),r&&(i.style.paddingRight=r),h&&(i.style.paddingBottom=h),d&&(i.style.paddingLeft=d),e.hasAttribute("original-height")||e.setAttribute("original-height",e.getBoundingClientRect().height.toString()),"off"===e.getAttribute("wrap")&&(i.style.overflowWrap="normal",i.style.whiteSpace="pre"),i.innerText=e.value+"\n",i.innerHTML=i.innerHTML.replace(/\n/g,"
"),e.offsetWidth>0&&e.offsetHeight>0?i.style.width=e.getBoundingClientRect().width+"px":i.style.width=window.innerWidth/2+"px";const c=parseInt(e.getAttribute("original-height")),p=parseInt(e.getAttribute("previous-length"));isNaN(c)||(c<=i.clientHeight?e.style.height=i.clientHeight+"px":e.value.length{document.addEventListener("change",(t=>{const e=t.target;if(e instanceof HTMLInputElement){if(0!==e.value.length||null!==e.getAttribute("placeholder"))for(const t of e.parentNode.children)"label"==t.tagName&&t.classList.add("active");b.validateField(e)}})),document.addEventListener("keyup",(t=>{const i=t.target;i instanceof HTMLInputElement&&["radio","checkbox"].includes(i.type)&&e.keys.TAB.includes(t.key)&&(i.classList.add("tabbed"),i.addEventListener("blur",(()=>i.classList.remove("tabbed")),{once:!0}))})),document.querySelectorAll(".materialize-textarea").forEach((t=>{b.InitTextarea(t)})),document.querySelectorAll('.file-field input[type="file"]').forEach((t=>{b.InitFileInputPath(t)}))}))}static InitTextarea(t){t.setAttribute("original-height",t.getBoundingClientRect().height.toString()),t.setAttribute("previous-length",t.value.length.toString()),b.textareaAutoResize(t),t.addEventListener("keyup",(t=>b.textareaAutoResize(t.target))),t.addEventListener("keydown",(t=>b.textareaAutoResize(t.target)))}static InitFileInputPath(t){t.addEventListener("change",(()=>{const e=t.closest(".file-field").querySelector("input.file-path"),i=t.files,s=[];for(let t=0;t{this._handleMaterialboxToggle()};_handleMaterialboxKeypress=t=>{e.keys.ENTER.includes(t.key)&&this._handleMaterialboxToggle()};_handleMaterialboxToggle=()=>{!1===this.doneAnimating||this.overlayActive&&this.doneAnimating?this.close():this.open()};_handleWindowScroll=()=>{this.overlayActive&&this.close()};_handleWindowResize=()=>{this.overlayActive&&this.close()};_handleWindowEscape=t=>{e.keys.ESC.includes(t.key)&&this.doneAnimating&&this.overlayActive&&this.close()};_makeAncestorsOverflowVisible(){this._changedAncestorList=[];let t=this.placeholder.parentNode;for(;null!==t&&t!==document;){const e=t;"visible"!==e.style.overflow&&(e.style.overflow="visible",this._changedAncestorList.push(e)),t=t.parentNode}}_offset(t){const e=t.getBoundingClientRect(),i=document.documentElement;return{top:e.top+window.scrollY-i.clientTop,left:e.left+window.scrollX-i.clientLeft}}_updateVars(){this.windowWidth=window.innerWidth,this.windowHeight=window.innerHeight,this.caption=this.el.getAttribute("data-caption")||""}_animateImageIn(){this.el.style.maxHeight=this.newHeight.toString()+"px",this.el.style.maxWidth=this.newWidth.toString()+"px";const t=this.options.inDuration;this.el.style.transition="none",this.el.style.height=this.originalHeight+"px",this.el.style.width=this.originalWidth+"px",setTimeout((()=>{this.el.style.transition=`height ${t}ms ease,\n width ${t}ms ease,\n left ${t}ms ease,\n top ${t}ms ease\n `,this.el.style.height=this.newHeight+"px",this.el.style.width=this.newWidth+"px",this.el.style.left=e.getDocumentScrollLeft()+this.windowWidth/2-this._offset(this.placeholder).left-this.newWidth/2+"px",this.el.style.top=e.getDocumentScrollTop()+this.windowHeight/2-this._offset(this.placeholder).top-this.newHeight/2+"px"}),1),setTimeout((()=>{this.doneAnimating=!0,"function"==typeof this.options.onOpenEnd&&this.options.onOpenEnd.call(this,this.el)}),t)}_animateImageOut(){const t=this.options.outDuration;this.el.style.transition=`height ${t}ms ease,\n width ${t}ms ease,\n left ${t}ms ease,\n top ${t}ms ease\n `,this.el.style.height=this.originalWidth+"px",this.el.style.width=this.originalWidth+"px",this.el.style.left="0",this.el.style.top="0",setTimeout((()=>{this.placeholder.style.height="",this.placeholder.style.width="",this.placeholder.style.position="",this.placeholder.style.top="",this.placeholder.style.left="",this.attrWidth&&this.el.setAttribute("width",this.attrWidth.toString()),this.attrHeight&&this.el.setAttribute("height",this.attrHeight.toString()),this.el.removeAttribute("style"),this.originInlineStyles&&this.el.setAttribute("style",this.originInlineStyles),this.el.classList.remove("active"),this.doneAnimating=!0,this._changedAncestorList.forEach((t=>t.style.overflow="")),"function"==typeof this.options.onCloseEnd&&this.options.onCloseEnd.call(this,this.el)}),t)}_addCaption(){this._photoCaption=document.createElement("div"),this._photoCaption.classList.add("materialbox-caption"),this._photoCaption.innerText=this.caption,document.body.append(this._photoCaption),this._photoCaption.style.display="inline",this._photoCaption.style.transition="none",this._photoCaption.style.opacity="0";const t=this.options.inDuration;setTimeout((()=>{this._photoCaption.style.transition=`opacity ${t}ms ease`,this._photoCaption.style.opacity="1"}),1)}_removeCaption(){const t=this.options.outDuration;this._photoCaption.style.transition=`opacity ${t}ms ease`,this._photoCaption.style.opacity="0",setTimeout((()=>{this._photoCaption.remove()}),t)}_addOverlay(){this._overlay=document.createElement("div"),this._overlay.id="materialbox-overlay",this._overlay.addEventListener("click",(()=>{this.doneAnimating&&this.close()}),{once:!0}),this.el.before(this._overlay);const t=this._overlay.getBoundingClientRect();this._overlay.style.width=this.windowWidth+"px",this._overlay.style.height=this.windowHeight+"px",this._overlay.style.left=-1*t.left+"px",this._overlay.style.top=-1*t.top+"px",this._overlay.style.transition="none",this._overlay.style.opacity="0";const e=this.options.inDuration;setTimeout((()=>{this._overlay.style.transition=`opacity ${e}ms ease`,this._overlay.style.opacity="1"}),1)}_removeOverlay(){const t=this.options.outDuration;this._overlay.style.transition=`opacity ${t}ms ease`,this._overlay.style.opacity="0",setTimeout((()=>{this.overlayActive=!1,this._overlay.remove()}),t)}open=()=>{this._updateVars(),this.originalWidth=this.el.getBoundingClientRect().width,this.originalHeight=this.el.getBoundingClientRect().height,this.doneAnimating=!1,this.el.classList.add("active"),this.overlayActive=!0,"function"==typeof this.options.onOpenStart&&this.options.onOpenStart.call(this,this.el),this.placeholder.style.width=this.placeholder.getBoundingClientRect().width+"px",this.placeholder.style.height=this.placeholder.getBoundingClientRect().height+"px",this.placeholder.style.position="relative",this.placeholder.style.top="0",this.placeholder.style.left="0",this._makeAncestorsOverflowVisible(),this.el.style.position="absolute",this.el.style.zIndex="1000",this.el.style.willChange="left, top, width, height",this.attrWidth=this.el.getAttribute("width"),this.attrHeight=this.el.getAttribute("height"),this.attrWidth&&(this.el.style.width=this.attrWidth+"px",this.el.removeAttribute("width")),this.attrHeight&&(this.el.style.width=this.attrHeight+"px",this.el.removeAttribute("height")),this._addOverlay(),""!==this.caption&&this._addCaption();const t=this.originalWidth/this.windowWidth,e=this.originalHeight/this.windowHeight;if(this.newWidth=0,this.newHeight=0,t>e){const t=this.originalHeight/this.originalWidth;this.newWidth=.9*this.windowWidth,this.newHeight=.9*this.windowWidth*t}else{const t=this.originalWidth/this.originalHeight;this.newWidth=.9*this.windowHeight*t,this.newHeight=.9*this.windowHeight}this._animateImageIn(),window.addEventListener("scroll",this._handleWindowScroll),window.addEventListener("resize",this._handleWindowResize),window.addEventListener("keyup",this._handleWindowEscape)};close=()=>{this._updateVars(),this.doneAnimating=!1,"function"==typeof this.options.onCloseStart&&this.options.onCloseStart.call(this,this.el),window.removeEventListener("scroll",this._handleWindowScroll),window.removeEventListener("resize",this._handleWindowResize),window.removeEventListener("keyup",this._handleWindowEscape),this._removeOverlay(),this._animateImageOut(),""!==this.caption&&this._removeCaption()}}const k={opacity:.5,inDuration:250,outDuration:250,onOpenStart:null,onOpenEnd:null,onCloseStart:null,onCloseEnd:null,preventScrolling:!0,dismissible:!0,startingTop:"4%",endingTop:"10%"};class T extends i{constructor(t,e){super(t,e,T),this.el.M_Modal=this,this.options={...T.defaults,...e},this.el.tabIndex=0,this._setupEventHandlers()}static get defaults(){return k}static init(t,e={}){return super.init(t,e,T)}static getInstance(t){return t.M_Modal}destroy(){}_setupEventHandlers(){}_removeEventHandlers(){}_handleTriggerClick(){}_handleOverlayClick(){}_handleModalCloseClick(){}_handleKeydown(){}_handleFocus(){}open(){return this}close(){return this}static#t(t){return`\n ${t.header?'
'+t.header+"
":""}\n
\n ${t.content}\n
\n ${t.header?'
'+t.footer+"
":""}\n `}static#e(t){const e=document.createElement("dialog");return e.id=t.id,e}static create(t){return this.#e(t)}}const x={responsiveThreshold:0};class D extends i{_enabled;_img;static _parallaxes=[];static _handleScrollThrottled;static _handleWindowResizeThrottled;constructor(t,e){super(t,e,D),this.el.M_Parallax=this,this.options={...D.defaults,...e},this._enabled=window.innerWidth>this.options.responsiveThreshold,this._img=this.el.querySelector("img"),this._updateParallax(),this._setupEventHandlers(),this._setupStyles(),D._parallaxes.push(this)}static get defaults(){return x}static init(t,e={}){return super.init(t,e,D)}static getInstance(t){return t.M_Parallax}destroy(){D._parallaxes.splice(D._parallaxes.indexOf(this),1),this._img.style.transform="",this._removeEventHandlers(),this.el.M_Parallax=void 0}static _handleScroll(){for(let t=0;te.options.responsiveThreshold}}_setupEventHandlers(){this._img.addEventListener("load",this._handleImageLoad),0===D._parallaxes.length&&(D._handleScrollThrottled||(D._handleScrollThrottled=e.throttle(D._handleScroll,5)),D._handleWindowResizeThrottled||(D._handleWindowResizeThrottled=e.throttle(D._handleWindowResize,5)),window.addEventListener("scroll",D._handleScrollThrottled),window.addEventListener("resize",D._handleWindowResizeThrottled))}_removeEventHandlers(){this._img.removeEventListener("load",this._handleImageLoad),0===D._parallaxes.length&&(window.removeEventListener("scroll",D._handleScrollThrottled),window.removeEventListener("resize",D._handleWindowResizeThrottled))}_setupStyles(){this._img.style.opacity="1"}_handleImageLoad=()=>{this._updateParallax()};_offset(t){const e=t.getBoundingClientRect(),i=document.documentElement;return{top:e.top+window.scrollY-i.clientTop,left:e.left+window.scrollX-i.clientLeft}}_updateParallax(){const t=this.el.getBoundingClientRect().height>0?this.el.parentElement.offsetHeight:500,i=this._img.offsetHeight-t,s=this._offset(this.el).top+t,n=this._offset(this.el).top,o=e.getDocumentScrollTop(),a=window.innerHeight,l=i*((o+a-n)/(t+a));this._enabled?s>o&&n=t&&!this.el.classList.contains("pinned")&&(this._removePinClasses(),this.el.style.top=`${this.options.offset}px`,this.el.classList.add("pinned"),"function"==typeof this.options.onPositionChange&&this.options.onPositionChange.call(this,"pinned")),tthis.options.bottom&&!this.el.classList.contains("pin-bottom")&&(this._removePinClasses(),this.el.classList.add("pin-bottom"),this.el.style.top=this.options.bottom-this.originalOffset+"px","function"==typeof this.options.onPositionChange&&this.options.onPositionChange.call(this,"pin-bottom"))}_removePinClasses(){this.el.classList.remove("pin-top"),this.el.classList.remove("pinned"),this.el.classList.remove("pin-bottom")}static{A._pushpins=[]}}const I={throttle:100,scrollOffset:200,activeClass:"active",getActiveElement:t=>'a[href="#'+t+'"]',keepTopElementActive:!1,animationDuration:null};class M extends i{static _elements;static _count;static _increment;static _elementsInView;static _visibleElements;static _ticks;static _keptTopActiveElement=null;tickId;id;constructor(t,e){super(t,e,M),this.el.M_ScrollSpy=this,this.options={...M.defaults,...e},M._elements.push(this),M._count++,M._increment++,this.tickId=-1,this.id=M._increment.toString(),this._setupEventHandlers(),this._handleWindowScroll()}static get defaults(){return I}static init(t,e={}){return super.init(t,e,M)}static getInstance(t){return t.M_ScrollSpy}destroy(){M._elements.splice(M._elements.indexOf(this),1),M._elementsInView.splice(M._elementsInView.indexOf(this),1),M._visibleElements.splice(M._visibleElements.indexOf(this.el),1),M._count--,this._removeEventHandlers();document.querySelector(this.options.getActiveElement(this.el.id)).classList.remove(this.options.activeClass),this.el.M_ScrollSpy=void 0}_setupEventHandlers(){1===M._count&&(window.addEventListener("scroll",this._handleWindowScroll),window.addEventListener("resize",this._handleThrottledResize),document.body.addEventListener("click",this._handleTriggerClick))}_removeEventHandlers(){0===M._count&&(window.removeEventListener("scroll",this._handleWindowScroll),window.removeEventListener("resize",this._handleThrottledResize),document.body.removeEventListener("click",this._handleTriggerClick))}_handleThrottledResize=e.throttle((function(){this._handleWindowScroll()}),200).bind(this);_handleTriggerClick=t=>{const e=t.target;for(let i=M._elements.length-1;i>=0;i--){const s=M._elements[i];if(e===document.querySelector('a[href="#'+s.el.id+'"]')){t.preventDefault(),s.el.M_ScrollSpy.options.animationDuration?M._smoothScrollIntoView(s.el,s.el.M_ScrollSpy.options.animationDuration):s.el.scrollIntoView({behavior:"smooth"});break}}};_handleWindowScroll=()=>{M._ticks++;const t=e.getDocumentScrollTop(),i=e.getDocumentScrollLeft(),s=i+window.innerWidth,n=t+window.innerHeight,o=M._findElements(t,s,n,i);for(let t=0;t=0&&i!==M._ticks&&(e._exit(),e.tickId=-1)}if(M._elementsInView=o,M._elements.length){const t=M._elements[0].el.M_ScrollSpy.options;if(t.keepTopElementActive&&0===M._visibleElements.length){this._resetKeptTopActiveElementIfNeeded();const e=M._elements.filter((t=>M._getDistanceToViewport(t.el)<=0)).sort(((t,e)=>{const i=M._getDistanceToViewport(t.el),s=M._getDistanceToViewport(e.el);return is?1:0})),i=e.length?e[e.length-1]:M._elements[0],s=document.querySelector(t.getActiveElement(i.el.id));s?.classList.add(t.activeClass),M._keptTopActiveElement=s}}};static _offset(t){const e=t.getBoundingClientRect(),i=document.documentElement;return{top:e.top+window.pageYOffset-i.clientTop,left:e.left+window.pageXOffset-i.clientLeft}}static _findElements(t,e,i,s){const n=[];for(let o=0;o0){const t=M._offset(a.el).top,o=M._offset(a.el).left,r=o+a.el.getBoundingClientRect().width,h=t+a.el.getBoundingClientRect().height;!(o>e||ri||h0!==t.getBoundingClientRect().height)),M._visibleElements[0]){const t=document.querySelector(this.options.getActiveElement(M._visibleElements[0].id));t?.classList.remove(this.options.activeClass),M._visibleElements[0].M_ScrollSpy&&this.id0!==t.getBoundingClientRect().height)),M._visibleElements[0]){const t=document.querySelector(this.options.getActiveElement(M._visibleElements[0].id));if(t?.classList.remove(this.options.activeClass),M._visibleElements=M._visibleElements.filter((t=>t.id!=this.el.id)),M._visibleElements[0]){const t=this.options.getActiveElement(M._visibleElements[0].id);document.querySelector(t)?.classList.add(this.options.activeClass),this._resetKeptTopActiveElementIfNeeded()}}}_resetKeptTopActiveElementIfNeeded(){M._keptTopActiveElement&&(M._keptTopActiveElement.classList.remove(this.options.activeClass),M._keptTopActiveElement=null)}static _getDistanceToViewport(t){return t.getBoundingClientRect().top}static _smoothScrollIntoView(t,e=300){const i=t.getBoundingClientRect().top+(window.scrollY||window.pageYOffset),s=window.scrollY||window.pageYOffset,n=i-s,o=performance.now();requestAnimationFrame((function t(a){const l=a-o,r=Math.min(l/e,1),h=s+n*r;r<1?(window.scrollTo(0,h),requestAnimationFrame(t)):window.scrollTo(0,i)}))}static{M._elements=[],M._elementsInView=[],M._visibleElements=[],M._count=0,M._increment=0,M._ticks=0}}const O={edge:"left",draggable:!0,dragTargetWidth:"10px",inDuration:250,outDuration:200,onOpenStart:null,onOpenEnd:null,onCloseStart:null,onCloseEnd:null,preventScrolling:!0};class R extends i{id;isOpen;isFixed;isDragged;lastWindowWidth;lastWindowHeight;static _sidenavs;_overlay;dragTarget;_startingXpos;_xPos;_time;_width;_initialScrollTop;_verticallyScrolling;deltaX;velocityX;percentOpen;constructor(t,e){super(t,e,R),this.el.M_Sidenav=this,this.options={...R.defaults,...e},this.id=this.el.id,this.isOpen=!1,this.isFixed=this.el.classList.contains("sidenav-fixed"),this.isDragged=!1,this.lastWindowWidth=window.innerWidth,this.lastWindowHeight=window.innerHeight,this._createOverlay(),this._createDragTarget(),this._setupEventHandlers(),this._setupClasses(),this._setupFixed(),R._sidenavs.push(this)}static get defaults(){return O}static init(t,e={}){return super.init(t,e,R)}static getInstance(t){return t.M_Sidenav}destroy(){this._removeEventHandlers(),this._enableBodyScrolling(),this._overlay.parentNode.removeChild(this._overlay),this.dragTarget.parentNode.removeChild(this.dragTarget),this.el.M_Sidenav=void 0,this.el.style.transform="";const t=R._sidenavs.indexOf(this);t>=0&&R._sidenavs.splice(t,1)}_createOverlay(){this._overlay=document.createElement("div"),this._overlay.classList.add("sidenav-overlay"),this._overlay.addEventListener("click",this.close),document.body.appendChild(this._overlay)}_setupEventHandlers(){0===R._sidenavs.length&&document.body.addEventListener("click",this._handleTriggerClick);this.dragTarget.addEventListener("touchmove",this._handleDragTargetDrag,null),this.dragTarget.addEventListener("touchend",this._handleDragTargetRelease),this._overlay.addEventListener("touchmove",this._handleCloseDrag,null),this._overlay.addEventListener("touchend",this._handleCloseRelease),this.el.addEventListener("touchmove",this._handleCloseDrag),this.el.addEventListener("touchend",this._handleCloseRelease),this.el.addEventListener("click",this._handleCloseTriggerClick),this.isFixed&&window.addEventListener("resize",this._handleWindowResize),this._setAriaHidden(),this._setTabIndex()}_removeEventHandlers(){1===R._sidenavs.length&&document.body.removeEventListener("click",this._handleTriggerClick),this.dragTarget.removeEventListener("touchmove",this._handleDragTargetDrag),this.dragTarget.removeEventListener("touchend",this._handleDragTargetRelease),this._overlay.removeEventListener("touchmove",this._handleCloseDrag),this._overlay.removeEventListener("touchend",this._handleCloseRelease),this.el.removeEventListener("touchmove",this._handleCloseDrag),this.el.removeEventListener("touchend",this._handleCloseRelease),this.el.removeEventListener("click",this._handleCloseTriggerClick),this.isFixed&&window.removeEventListener("resize",this._handleWindowResize)}_handleTriggerClick(t){const i=t.target.closest(".sidenav-trigger");if(t.target&&i){const s=e.getIdFromTrigger(i),n=document.getElementById(s).M_Sidenav;n&&n.open(),t.preventDefault()}}_startDrag(t){const i=t.targetTouches[0].clientX;this.isDragged=!0,this._startingXpos=i,this._xPos=this._startingXpos,this._time=Date.now(),this._width=this.el.getBoundingClientRect().width,this._overlay.style.display="block",this._initialScrollTop=this.isOpen?this.el.scrollTop:e.getDocumentScrollTop(),this._verticallyScrolling=!1}_dragMoveUpdate(t){const i=t.targetTouches[0].clientX,s=this.isOpen?this.el.scrollTop:e.getDocumentScrollTop();this.deltaX=Math.abs(this._xPos-i),this._xPos=i,this.velocityX=this.deltaX/(Date.now()-this._time),this._time=Date.now(),this._initialScrollTop!==s&&(this._verticallyScrolling=!0)}_handleDragTargetDrag=t=>{if(!this._isDraggable())return;let e=this._calculateDelta(t);const i=e>0?"right":"left";e=Math.min(this._width,Math.abs(e)),this.options.edge===i&&(e=0);let s=e,n="translateX(-100%)";"right"===this.options.edge&&(n="translateX(100%)",s=-s),this.percentOpen=Math.min(1,e/this._width),this.el.style.transform=`${n} translateX(${s}px)`,this._overlay.style.opacity=this.percentOpen.toString()};_handleDragTargetRelease=()=>{this.isDragged&&(this.percentOpen>.2?this.open():this._animateOut(),this.isDragged=!1,this._verticallyScrolling=!1)};_handleCloseDrag=t=>{if(!this.isOpen||!this._isDraggable())return;let e=this._calculateDelta(t);const i=e>0?"right":"left";e=Math.min(this._width,Math.abs(e)),this.options.edge!==i&&(e=0);let s=-e;"right"===this.options.edge&&(s=-s),this.percentOpen=Math.min(1,1-e/this._width),this.el.style.transform=`translateX(${s}px)`,this._overlay.style.opacity=this.percentOpen.toString()};_calculateDelta=t=>(this.isDragged||this._startDrag(t),this._dragMoveUpdate(t),this._xPos-this._startingXpos);_handleCloseRelease=()=>{this.isOpen&&this.isDragged&&(this.percentOpen>.8?this._animateIn():this.close(),this.isDragged=!1,this._verticallyScrolling=!1)};_handleCloseTriggerClick=t=>{t.target.closest(".sidenav-close")&&!this._isCurrentlyFixed()&&this.close()};_handleWindowResize=()=>{this.lastWindowWidth!==window.innerWidth&&(window.innerWidth>992?this.open():this.close()),this.lastWindowWidth=window.innerWidth,this.lastWindowHeight=window.innerHeight};_setupClasses(){"right"===this.options.edge&&(this.el.classList.add("right-aligned"),this.dragTarget.classList.add("right-aligned"))}_removeClasses(){this.el.classList.remove("right-aligned"),this.dragTarget.classList.remove("right-aligned")}_setupFixed(){this._isCurrentlyFixed()&&this.open()}_isDraggable(){return this.options.draggable&&!this._isCurrentlyFixed()&&!this._verticallyScrolling}_isCurrentlyFixed(){return this.isFixed&&window.innerWidth>992}_createDragTarget(){const t=document.createElement("div");t.classList.add("drag-target"),t.style.width=this.options.dragTargetWidth,document.body.appendChild(t),this.dragTarget=t}_preventBodyScrolling(){document.body.style.overflow="hidden"}_enableBodyScrolling(){document.body.style.overflow=""}open=()=>{!0!==this.isOpen&&(this.isOpen=!0,"function"==typeof this.options.onOpenStart&&this.options.onOpenStart.call(this,this.el),this._isCurrentlyFixed()?(this.el.style.transform="translateX(0)",this._enableBodyScrolling(),this._overlay.style.display="none"):(this.options.preventScrolling&&this._preventBodyScrolling(),this.isDragged&&1==this.percentOpen||this._animateIn(),this._setAriaHidden(),this._setTabIndex()))};close=()=>{if(!1!==this.isOpen)if(this.isOpen=!1,"function"==typeof this.options.onCloseStart&&this.options.onCloseStart.call(this,this.el),this._isCurrentlyFixed()){const t="left"===this.options.edge?"-105%":"105%";this.el.style.transform=`translateX(${t})`}else this._enableBodyScrolling(),this.isDragged&&0==this.percentOpen?this._overlay.style.display="none":this._animateOut(),this._setAriaHidden(),this._setTabIndex()};_animateIn(){this._animateSidenavIn(),this._animateOverlayIn()}_animateOut(){this._animateSidenavOut(),this._animateOverlayOut()}_animateSidenavIn(){let t="left"===this.options.edge?-1:1;this.isDragged&&(t="left"===this.options.edge?t+this.percentOpen:t-this.percentOpen);const e=this.options.inDuration;this.el.style.transition="none",this.el.style.transform="translateX("+100*t+"%)",setTimeout((()=>{this.el.style.transition=`transform ${e}ms ease`,this.el.style.transform="translateX(0)"}),1),setTimeout((()=>{"function"==typeof this.options.onOpenEnd&&this.options.onOpenEnd.call(this,this.el)}),e)}_animateSidenavOut(){const t="left"===this.options.edge?-1:1,e=this.options.outDuration;this.el.style.transition=`transform ${e}ms ease`,this.el.style.transform="translateX("+100*t+"%)",setTimeout((()=>{"function"==typeof this.options.onCloseEnd&&this.options.onCloseEnd.call(this,this.el)}),e)}_animateOverlayIn(){let t=0;this.isDragged?t=this.percentOpen:this._overlay.style.display="block";const e=this.options.inDuration;this._overlay.style.transition="none",this._overlay.style.opacity=t.toString(),setTimeout((()=>{this._overlay.style.transition=`opacity ${e}ms ease`,this._overlay.style.opacity="1"}),1)}_animateOverlayOut(){const t=this.options.outDuration;this._overlay.style.transition=`opacity ${t}ms ease`,this._overlay.style.opacity="0",setTimeout((()=>{this._overlay.style.display="none"}),t)}_setAriaHidden=()=>{this.el.ariaHidden=this.isOpen?"false":"true";const t=document.querySelector(".nav-wrapper ul");t&&(t.ariaHidden=this.isOpen.toString())};_setTabIndex=()=>{const t=document.querySelectorAll(".nav-wrapper ul li a"),e=document.querySelectorAll(".sidenav li a");t&&t.forEach((t=>{t.tabIndex=this.isOpen?-1:0})),e&&e.forEach((t=>{t.tabIndex=this.isOpen?0:-1}))};static{R._sidenavs=[]}}const H={duration:300,onShow:null,swipeable:!1,responsiveThreshold:1/0};class W extends i{_tabLinks;_index;_indicator;_tabWidth;_tabsWidth;_tabsCarousel;_activeTabLink;_content;constructor(t,e){super(t,e,W),this.el.M_Tabs=this,this.options={...W.defaults,...e},this._tabLinks=this.el.querySelectorAll("li.tab > a"),this._index=0,this._setupActiveTabLink(),this.options.swipeable?this._setupSwipeableTabs():this._setupNormalTabs(),this._setTabsAndTabWidth(),this._createIndicator(),this._setupEventHandlers()}static get defaults(){return H}static init(t,e={}){return super.init(t,e,W)}static getInstance(t){return t.M_Tabs}destroy(){this._removeEventHandlers(),this._indicator.parentNode.removeChild(this._indicator),this.options.swipeable?this._teardownSwipeableTabs():this._teardownNormalTabs(),this.el.M_Tabs=void 0}get index(){return this._index}_setupEventHandlers(){window.addEventListener("resize",this._handleWindowResize),this.el.addEventListener("click",this._handleTabClick)}_removeEventHandlers(){window.removeEventListener("resize",this._handleWindowResize),this.el.removeEventListener("click",this._handleTabClick)}_handleWindowResize=()=>{this._setTabsAndTabWidth(),0!==this._tabWidth&&0!==this._tabsWidth&&(this._indicator.style.left=this._calcLeftPos(this._activeTabLink)+"px",this._indicator.style.right=this._calcRightPos(this._activeTabLink)+"px")};_handleTabClick=t=>{let e=t.target;if(!e)return;let i=e.parentElement;for(;i&&!i.classList.contains("tab");)e=e.parentElement,i=i.parentElement;if(!e||!i.classList.contains("tab"))return;if(i.classList.contains("disabled"))return void t.preventDefault();if(e.hasAttribute("target"))return;this._activeTabLink.classList.remove("active");const s=this._content;this._activeTabLink=e,e.hash&&(this._content=document.querySelector(e.hash)),this._tabLinks=this.el.querySelectorAll("li.tab > a"),this._activeTabLink.classList.add("active");const n=this._index;this._index=Math.max(Array.from(this._tabLinks).indexOf(e),0),this.options.swipeable?this._tabsCarousel&&this._tabsCarousel.set(this._index,(()=>{"function"==typeof this.options.onShow&&this.options.onShow.call(this,this._content)})):this._content&&(this._content.style.display="block",this._content.classList.add("active"),"function"==typeof this.options.onShow&&this.options.onShow.call(this,this._content),s&&s!==this._content&&(s.style.display="none",s.classList.remove("active"))),this._setTabsAndTabWidth(),this._animateIndicator(n),t.preventDefault()};_createIndicator(){const t=document.createElement("li");t.classList.add("indicator"),this.el.appendChild(t),this._indicator=t,this._indicator.style.left=this._calcLeftPos(this._activeTabLink)+"px",this._indicator.style.right=this._calcRightPos(this._activeTabLink)+"px"}_setupActiveTabLink(){if(this._activeTabLink=Array.from(this._tabLinks).find((t=>t.getAttribute("href")===location.hash)),!this._activeTabLink){let t=this.el.querySelector("li.tab a.active");t||(t=this.el.querySelector("li.tab a")),this._activeTabLink=t}Array.from(this._tabLinks).forEach((t=>t.classList.remove("active"))),this._activeTabLink.classList.add("active"),this._index=Math.max(Array.from(this._tabLinks).indexOf(this._activeTabLink),0),this._activeTabLink&&this._activeTabLink.hash&&(this._content=document.querySelector(this._activeTabLink.hash),this._content&&this._content.classList.add("active"))}_setupSwipeableTabs(){window.innerWidth>this.options.responsiveThreshold&&(this.options.swipeable=!1);const t=[];this._tabLinks.forEach((e=>{if(e.hash){const i=document.querySelector(e.hash);i.classList.add("carousel-item"),t.push(i)}}));const e=document.createElement("div");e.classList.add("tabs-content","carousel","carousel-slider"),t[0].parentElement.insertBefore(e,t[0]),t.forEach((t=>{e.appendChild(t),t.style.display=""}));const i=this._activeTabLink.parentElement,s=Array.from(i.parentNode.children).indexOf(i);this._tabsCarousel=p.init(e,{fullWidth:!0,noWrap:!0,onCycleTo:t=>{const e=this._index;this._index=Array.from(t.parentNode.children).indexOf(t),this._activeTabLink.classList.remove("active"),this._activeTabLink=Array.from(this._tabLinks)[this._index],this._activeTabLink.classList.add("active"),this._animateIndicator(e),"function"==typeof this.options.onShow&&this.options.onShow.call(this,this._content)}}),this._tabsCarousel.set(s)}_teardownSwipeableTabs(){const t=this._tabsCarousel.el;this._tabsCarousel.destroy(),t.append(t.parentElement),t.remove()}_setupNormalTabs(){Array.from(this._tabLinks).forEach((t=>{if(t!==this._activeTabLink&&t.hash){const e=document.querySelector(t.hash);e&&(e.style.display="none")}}))}_teardownNormalTabs(){this._tabLinks.forEach((t=>{if(t.hash){const e=document.querySelector(t.hash);e&&(e.style.display="")}}))}_setTabsAndTabWidth(){this._tabsWidth=this.el.getBoundingClientRect().width,this._tabWidth=Math.max(this._tabsWidth,this.el.scrollWidth)/this._tabLinks.length}_calcRightPos(t){return Math.ceil(this._tabsWidth-t.offsetLeft-t.getBoundingClientRect().width)}_calcLeftPos(t){return Math.floor(t.offsetLeft)}updateTabIndicator(){this._setTabsAndTabWidth(),this._animateIndicator(this._index)}_animateIndicator(t){let e=0,i=0;this._index-t>=0?e=90:i=90,this._indicator.style.transition=`\n left ${this.options.duration}ms ease-out ${e}ms,\n right ${this.options.duration}ms ease-out ${i}ms`,this._indicator.style.left=this._calcLeftPos(this._activeTabLink)+"px",this._indicator.style.right=this._calcRightPos(this._activeTabLink)+"px"}select(t){const e=Array.from(this._tabLinks).find((e=>e.getAttribute("href")==="#"+t));e&&e.click()}}const P={onOpen:null,onClose:null};class B extends i{isOpen;static _taptargets;wrapper;originEl;waveEl;contentEl;constructor(t,e){super(t,e,B),this.el.M_TapTarget=this,this.options={...B.defaults,...e},this.isOpen=!1,this.originEl=document.querySelector(`#${t.dataset.target}`),this.originEl.tabIndex=0,this._setup(),this._calculatePositioning(),this._setupEventHandlers(),B._taptargets.push(this)}static get defaults(){return P}static init(t,e={}){return super.init(t,e,B)}static getInstance(t){return t.M_TapTarget}destroy(){this._removeEventHandlers(),this.el.M_TapTarget=void 0;const t=B._taptargets.indexOf(this);t>=0&&B._taptargets.splice(t,1)}_setupEventHandlers(){this.originEl.addEventListener("click",this._handleTargetToggle),this.originEl.addEventListener("keypress",this._handleKeyboardInteraction,!0),window.addEventListener("resize",this._handleThrottledResize)}_removeEventHandlers(){this.originEl.removeEventListener("click",this._handleTargetToggle),this.originEl.removeEventListener("keypress",this._handleKeyboardInteraction,!0),window.removeEventListener("resize",this._handleThrottledResize)}_handleThrottledResize=e.throttle((function(){this._handleResize()}),200).bind(this);_handleKeyboardInteraction=t=>{e.keys.ENTER.includes(t.key)&&this._handleTargetToggle()};_handleTargetToggle=()=>{this.isOpen?this.close():this.open()};_handleResize=()=>{this._calculatePositioning()};_handleDocumentClick=t=>{t.target.closest(`#${this.el.dataset.target}`)===this.originEl||t.target.closest(".tap-target-wrapper")||this.close()};_setup(){this.wrapper=this.el.parentElement,this.waveEl=this.wrapper.querySelector(".tap-target-wave"),this.el.parentElement.ariaExpanded="false",this.originEl.style.zIndex="1002",this.contentEl=this.el.querySelector(".tap-target-content"),this.wrapper.classList.contains(".tap-target-wrapper")||(this.wrapper=document.createElement("div"),this.wrapper.classList.add("tap-target-wrapper"),this.el.before(this.wrapper),this.wrapper.append(this.el)),this.contentEl||(this.contentEl=document.createElement("div"),this.contentEl.classList.add("tap-target-content"),this.el.append(this.contentEl)),this.waveEl||(this.waveEl=document.createElement("div"),this.waveEl.classList.add("tap-target-wave"),this.wrapper.append(this.waveEl))}_offset(t){const e=t.getBoundingClientRect(),i=document.documentElement;return{top:e.top+window.pageYOffset-i.clientTop,left:e.left+window.pageXOffset-i.clientLeft}}_calculatePositioning(){let t="fixed"===getComputedStyle(this.originEl).position;if(!t){let e=this.originEl;const i=[];for(;(e=e.parentNode)&&e!==document;)i.push(e);for(let e=0;eh,u=n<=d,m=n>d,v=o>=.25*a&&o<=.75*a,_=this.el.offsetWidth,g=this.el.offsetHeight,y=n+s/2-g/2,f=o+i/2-_/2,E=t?"fixed":"absolute",w=v?_:_/2+i,b=g/2,L=u?g/2:0,C=c&&!v?_/2-i:0,k=i,T=m?"bottom":"top",x=2*i,D=x,S=g/2-D/2,A=_/2-x/2;this.wrapper.style.top=u?y+"px":"",this.wrapper.style.right=p?a-f-_-r+"px":"",this.wrapper.style.bottom=m?l-y-g+"px":"",this.wrapper.style.left=c?f+"px":"",this.wrapper.style.position=E,this.contentEl.style.width=w+"px",this.contentEl.style.height=b+"px",this.contentEl.style.top=L+"px",this.contentEl.style.right="0px",this.contentEl.style.bottom="0px",this.contentEl.style.left=C+"px",this.contentEl.style.padding=k+"px",this.contentEl.style.verticalAlign=T,this.waveEl.style.top=S+"px",this.waveEl.style.left=A+"px",this.waveEl.style.width=x+"px",this.waveEl.style.height=D+"px"}open=()=>{this.isOpen||("function"==typeof this.options.onOpen&&this.options.onOpen.call(this,this.originEl),this.isOpen=!0,this.wrapper.classList.add("open"),this.wrapper.ariaExpanded="true",document.body.addEventListener("click",this._handleDocumentClick,!0),document.body.addEventListener("keypress",this._handleDocumentClick,!0),document.body.addEventListener("touchend",this._handleDocumentClick))};close=()=>{this.isOpen&&("function"==typeof this.options.onClose&&this.options.onClose.call(this,this.originEl),this.isOpen=!1,this.wrapper.classList.remove("open"),this.wrapper.ariaExpanded="false",document.body.removeEventListener("click",this._handleDocumentClick,!0),document.body.removeEventListener("keypress",this._handleDocumentClick,!0),document.body.removeEventListener("touchend",this._handleDocumentClick))};static{B._taptargets=[]}}const q={dialRadius:135,outerRadius:105,innerRadius:70,tickRadius:20,duration:350,container:null,defaultTime:"now",fromNow:0,showClearBtn:!1,i18n:{cancel:"Cancel",clear:"Clear",done:"Ok"},twelveHour:!0,vibrate:!0,onSelect:null};class V extends i{id;modalEl;plate;digitalClock;inputHours;inputMinutes;x0;y0;moved;dx;dy;currentView;hand;minutesView;hours;minutes;time;amOrPm;static _template;vibrate;_canvas;hoursView;spanAmPm;footer;_amBtn;_pmBtn;bg;bearing;g;toggleViewTimer;vibrateTimer;constructor(t,i){super(t,i,V),this.el.M_Timepicker=this,this.options={...V.defaults,...i},this.id=e.guid(),this._insertHTMLIntoDOM(),this._setupVariables(),this._setupEventHandlers(),this._clockSetup(),this._pickerSetup()}static get defaults(){return q}static init(t,e={}){return super.init(t,e,V)}static _addLeadingZero(t){return(t<10?"0":"")+t}static _createSVGEl(t){return document.createElementNS("http://www.w3.org/2000/svg",t)}static _Pos(t){return t.type.startsWith("touch")&&t.targetTouches.length>=1?{x:t.targetTouches[0].clientX,y:t.targetTouches[0].clientY}:{x:t.clientX,y:t.clientY}}static getInstance(t){return t.M_Timepicker}destroy(){this._removeEventHandlers(),this.modalEl.remove(),this.el.M_Timepicker=void 0}_setupEventHandlers(){this.el.addEventListener("click",this._handleInputClick),this.el.addEventListener("keydown",this._handleInputKeydown),this.plate.addEventListener("mousedown",this._handleClockClickStart),this.plate.addEventListener("touchstart",this._handleClockClickStart),this.digitalClock.addEventListener("keyup",this._inputFromTextField),this.inputHours.addEventListener("focus",(()=>this.showView("hours"))),this.inputHours.addEventListener("focusout",(()=>this.formatHours())),this.inputMinutes.addEventListener("focus",(()=>this.showView("minutes"))),this.inputMinutes.addEventListener("focusout",(()=>this.formatMinutes()))}_removeEventHandlers(){this.el.removeEventListener("click",this._handleInputClick),this.el.removeEventListener("keydown",this._handleInputKeydown)}_handleInputClick=()=>{this.open()};_handleInputKeydown=t=>{e.keys.ENTER.includes(t.key)&&(t.preventDefault(),this.open())};_handleTimeInputEnterKey=t=>{e.keys.ENTER.includes(t.key)&&(t.preventDefault(),this._inputFromTextField())};_handleClockClickStart=t=>{t.preventDefault();const e=this.plate.getBoundingClientRect(),i=e.left,s=e.top;this.x0=i+this.options.dialRadius,this.y0=s+this.options.dialRadius,this.moved=!1;const n=V._Pos(t);this.dx=n.x-this.x0,this.dy=n.y-this.y0,this.setHand(this.dx,this.dy,!1),document.addEventListener("mousemove",this._handleDocumentClickMove),document.addEventListener("touchmove",this._handleDocumentClickMove),document.addEventListener("mouseup",this._handleDocumentClickEnd),document.addEventListener("touchend",this._handleDocumentClickEnd)};_handleDocumentClickMove=t=>{t.preventDefault();const e=V._Pos(t),i=e.x-this.x0,s=e.y-this.y0;this.moved=!0,this.setHand(i,s,!1)};_handleDocumentClickEnd=t=>{t.preventDefault(),document.removeEventListener("mouseup",this._handleDocumentClickEnd),document.removeEventListener("touchend",this._handleDocumentClickEnd);const e=V._Pos(t),i=e.x-this.x0,s=e.y-this.y0;this.moved&&i===this.dx&&s===this.dy&&this.setHand(i,s),"hours"===this.currentView?this.showView("minutes",this.options.duration/2):(this.minutesView.classList.add("timepicker-dial-out"),setTimeout((()=>{this.done()}),this.options.duration/2)),"function"==typeof this.options.onSelect&&this.options.onSelect.call(this,this.hours,this.minutes),document.removeEventListener("mousemove",this._handleDocumentClickMove),document.removeEventListener("touchmove",this._handleDocumentClickMove)};_insertHTMLIntoDOM(){const t=document.createElement("template");t.innerHTML=V._template.trim(),this.modalEl=t.content.firstChild,this.modalEl.id="modal-"+this.id;const e=this.options.container,i=e instanceof HTMLElement?e:document.querySelector(e);this.options.container&&i?i.append(this.modalEl):this.el.parentElement.appendChild(this.modalEl)}_setupVariables(){this.currentView="hours",this.vibrate=navigator.vibrate?"vibrate":navigator.webkitVibrate?"webkitVibrate":null,this._canvas=this.modalEl.querySelector(".timepicker-canvas"),this.plate=this.modalEl.querySelector(".timepicker-plate"),this.digitalClock=this.modalEl.querySelector(".timepicker-display-column"),this.hoursView=this.modalEl.querySelector(".timepicker-hours"),this.minutesView=this.modalEl.querySelector(".timepicker-minutes"),this.inputHours=this.modalEl.querySelector(".timepicker-input-hours"),this.inputMinutes=this.modalEl.querySelector(".timepicker-input-minutes"),this.spanAmPm=this.modalEl.querySelector(".timepicker-span-am-pm"),this.footer=this.modalEl.querySelector(".timepicker-footer"),this.amOrPm="PM"}_createButton(t,e){const i=document.createElement("button");return i.classList.add("btn","btn-flat","waves-effect","text"),i.style.visibility=e,i.type="button",i.tabIndex=-1,i.innerText=t,i}_pickerSetup(){const t=this._createButton(this.options.i18n.clear,this.options.showClearBtn?"":"hidden");t.classList.add("timepicker-clear"),t.addEventListener("click",this.clear),this.footer.appendChild(t);const e=document.createElement("div");e.classList.add("confirmation-btns"),this.footer.append(e);const i=this._createButton(this.options.i18n.cancel,"");i.classList.add("timepicker-close"),i.addEventListener("click",this.close),e.appendChild(i);const s=this._createButton(this.options.i18n.done,"");s.classList.add("timepicker-close"),e.appendChild(s)}_clockSetup(){this.options.twelveHour&&(this._amBtn=document.createElement("div"),this._amBtn.classList.add("am-btn","btn"),this._amBtn.innerText="AM",this._amBtn.addEventListener("click",this._handleAmPmClick),this.spanAmPm.appendChild(this._amBtn),this._pmBtn=document.createElement("div"),this._pmBtn.classList.add("pm-btn","btn"),this._pmBtn.innerText="PM",this._pmBtn.addEventListener("click",this._handleAmPmClick),this.spanAmPm.appendChild(this._pmBtn)),this._buildHoursView(),this._buildMinutesView(),this._buildSVGClock()}_buildSVGClock(){const t=this.options.dialRadius,e=this.options.tickRadius,i=2*t,s=V._createSVGEl("svg");s.setAttribute("class","timepicker-svg"),s.setAttribute("width",i.toString()),s.setAttribute("height",i.toString());const n=V._createSVGEl("g");n.setAttribute("transform","translate("+t+","+t+")");const o=V._createSVGEl("circle");o.setAttribute("class","timepicker-canvas-bearing"),o.setAttribute("cx","0"),o.setAttribute("cy","0"),o.setAttribute("r","4");const a=V._createSVGEl("line");a.setAttribute("x1","0"),a.setAttribute("y1","0");const l=V._createSVGEl("circle");l.setAttribute("class","timepicker-canvas-bg"),l.setAttribute("r",e.toString()),n.appendChild(a),n.appendChild(l),n.appendChild(o),s.appendChild(n),this._canvas.appendChild(s),this.hand=a,this.bg=l,this.bearing=o,this.g=n}_buildHoursView(){if(this.options.twelveHour)for(let t=1;t<13;t+=1){const e=t/6*Math.PI,i=this.options.outerRadius;this._buildHoursTick(t,e,i)}else for(let t=0;t<24;t+=1){const e=t/6*Math.PI,i=t>0&&t<13?this.options.innerRadius:this.options.outerRadius;this._buildHoursTick(t,e,i)}}_buildHoursTick(t,e,i){const s=document.createElement("div");s.classList.add("timepicker-tick"),s.style.left=this.options.dialRadius+Math.sin(e)*i-this.options.tickRadius+"px",s.style.top=this.options.dialRadius-Math.cos(e)*i-this.options.tickRadius+"px",s.innerHTML=0===t?"00":t.toString(),this.hoursView.appendChild(s)}_buildMinutesView(){const t=document.createElement("div");t.classList.add("timepicker-tick");for(let e=0;e<60;e+=5){const i=t.cloneNode(!0),s=e/30*Math.PI;i.style.left=this.options.dialRadius+Math.sin(s)*this.options.outerRadius-this.options.tickRadius+"px",i.style.top=this.options.dialRadius-Math.cos(s)*this.options.outerRadius-this.options.tickRadius+"px",i.innerHTML=V._addLeadingZero(e),this.minutesView.appendChild(i)}}_handleAmPmClick=t=>{const e=t.target;this.amOrPm=e.classList.contains("am-btn")?"AM":"PM",this._updateAmPmView()};_updateAmPmView(){this.options.twelveHour&&("PM"===this.amOrPm?(this._amBtn.classList.remove("filled"),this._pmBtn.classList.add("filled")):"AM"===this.amOrPm&&(this._amBtn.classList.add("filled"),this._pmBtn.classList.remove("filled")))}_updateTimeFromInput(){let t=((this.el.value||this.options.defaultTime||"")+"").split(":");if(this.options.twelveHour&&void 0!==t[1]&&(t[1].toUpperCase().indexOf("AM")>0?this.amOrPm="AM":this.amOrPm="PM",t[1]=t[1].replace("AM","").replace("PM","")),"now"===t[0]){const e=new Date(+new Date+this.options.fromNow);t=[e.getHours().toString(),e.getMinutes().toString()],this.options.twelveHour&&(this.amOrPm=parseInt(t[0])>=12&&parseInt(t[0])<24?"PM":"AM")}this.hours=+t[0]||0,this.minutes=+t[1]||0,this.inputHours.value=V._addLeadingZero(this.hours),this.inputMinutes.value=V._addLeadingZero(this.minutes),this._updateAmPmView()}showView=(t,e=null)=>{"minutes"===t&&getComputedStyle(this.hoursView).visibility;const i="hours"===t,s=i?this.hoursView:this.minutesView,n=i?this.minutesView:this.hoursView;this.currentView=t,i?(this.inputHours.classList.add("text-primary"),this.inputMinutes.classList.remove("text-primary")):(this.inputHours.classList.remove("text-primary"),this.inputMinutes.classList.add("text-primary")),n.classList.add("timepicker-dial-out"),s.style.visibility="visible",s.classList.remove("timepicker-dial-out"),this.resetClock(e),clearTimeout(this.toggleViewTimer),this.toggleViewTimer=setTimeout((()=>{n.style.visibility="hidden"}),this.options.duration)};resetClock(t){const e=this.currentView,i=this[e],s="hours"===e,n=i*(Math.PI/(s?6:30)),o=s&&i>0&&i<13?this.options.innerRadius:this.options.outerRadius,a=Math.sin(n)*o,l=-Math.cos(n)*o;t?(this._canvas?.classList.add("timepicker-canvas-out"),setTimeout((()=>{this._canvas?.classList.remove("timepicker-canvas-out"),this.setHand(a,l)}),t)):this.setHand(a,l)}_inputFromTextField=()=>{const t="hours"===this.currentView;if(t&&""!==this.inputHours.value){const e=parseInt(this.inputHours.value);e>0&&e<(this.options.twelveHour?13:24)?this.hours=e:this.setHoursDefault(),this.drawClockFromTimeInput(this.hours,t)}else if(!t&&""!==this.inputMinutes.value){const e=parseInt(this.inputMinutes.value);e>=0&&e<60?this.minutes=e:(this.minutes=(new Date).getMinutes(),this.inputMinutes.value=this.minutes.toString()),this.drawClockFromTimeInput(this.minutes,t)}};drawClockFromTimeInput(t,e){const i=t*(Math.PI/(e?6:30));let s;s=this.options.twelveHour?this.options.outerRadius:e&&t>0&&t<13?this.options.innerRadius:this.options.outerRadius,this.setClockAttributes(i,s)}setHand(t,e,i=!1){const s="hours"===this.currentView,n=Math.PI/(s||i?6:30),o=Math.sqrt(t*t+e*e),a=s&&o<(this.options.outerRadius+this.options.innerRadius)/2;let l=Math.atan2(t,-e),r=a?this.options.innerRadius:this.options.outerRadius;this.options.twelveHour&&(r=this.options.outerRadius),l<0&&(l=2*Math.PI+l);let h=Math.round(l/n);l=h*n,this.options.twelveHour?s?0===h&&(h=12):(i&&(h*=5),60===h&&(h=0)):s?(12===h&&(h=0),h=a?0===h?12:h:0===h?0:h+12):(i&&(h*=5),60===h&&(h=0)),this[this.currentView]!==h&&this.vibrate&&this.options.vibrate&&(this.vibrateTimer||(navigator[this.vibrate](10),this.vibrateTimer=setTimeout((()=>{this.vibrateTimer=null}),100))),this[this.currentView]=h,s?this.inputHours.value=V._addLeadingZero(h):this.inputMinutes.value=V._addLeadingZero(h),this.setClockAttributes(l,r)}setClockAttributes(t,e){const i=Math.sin(t)*(e-this.options.tickRadius),s=-Math.cos(t)*(e-this.options.tickRadius),n=Math.sin(t)*e,o=-Math.cos(t)*e;this.hand.setAttribute("x2",i.toString()),this.hand.setAttribute("y2",s.toString()),this.bg.setAttribute("cx",n.toString()),this.bg.setAttribute("cy",o.toString())}formatHours(){""==this.inputHours.value&&this.setHoursDefault(),this.inputHours.value=V._addLeadingZero(Number(this.inputHours.value))}formatMinutes(){""==this.inputMinutes.value&&(this.minutes=(new Date).getMinutes()),this.inputMinutes.value=V._addLeadingZero(Number(this.inputMinutes.value))}setHoursDefault(){this.hours=(new Date).getHours(),this.inputHours.value=(this.hours%(this.options.twelveHour?12:24)).toString()}done=(t=null,e=null)=>{const i=this.el.value;let s=e?"":V._addLeadingZero(this.hours)+":"+V._addLeadingZero(this.minutes);return this.time=s,!e&&this.options.twelveHour&&(s=`${s} ${this.amOrPm}`),this.el.value=s,s!==i&&this.el.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0,composed:!0})),t};clear=()=>{this.done(null,!0)};open(){return console.warn("Timepicker.close() is deprecated. Remove this method and wrap in modal yourself."),this}close(){return console.warn("Timepicker.close() is deprecated. Remove this method and wrap in modal yourself."),this}static{V._template='\n
\n
\n
\n
\n
\n
\n \n
\n
\n :\n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
'}}const F={exitDelay:200,enterDelay:0,text:"",margin:5,inDuration:250,outDuration:200,position:"bottom",transitionMovement:10,opacity:1};class $ extends i{isOpen;isHovered;isFocused;tooltipEl;_exitDelayTimeout;_enterDelayTimeout;xMovement;yMovement;constructor(t,e){super(t,e,$),this.el.M_Tooltip=this,this.options={...$.defaults,...this._getAttributeOptions(),...e},this.isOpen=!1,this.isHovered=!1,this.isFocused=!1,this._appendTooltipEl(),this._setupEventHandlers()}static get defaults(){return F}static init(t,e={}){return super.init(t,e,$)}static getInstance(t){return t.M_Tooltip}destroy(){this.tooltipEl.remove(),this._removeEventHandlers(),this.el.M_Tooltip=void 0}_appendTooltipEl(){this.tooltipEl=document.createElement("div"),this.tooltipEl.classList.add("material-tooltip");const t=this.options.tooltipId?document.getElementById(this.options.tooltipId):document.createElement("div");this.tooltipEl.append(t),t.style.display="",t.classList.add("tooltip-content"),this._setTooltipContent(t),this.tooltipEl.appendChild(t),document.body.appendChild(this.tooltipEl)}_setTooltipContent(t){this.options.tooltipId||(t.innerText=this.options.text)}_updateTooltipContent(){this._setTooltipContent(this.tooltipEl.querySelector(".tooltip-content"))}_setupEventHandlers(){this.el.addEventListener("mouseenter",this._handleMouseEnter),this.el.addEventListener("mouseleave",this._handleMouseLeave),this.el.addEventListener("focus",this._handleFocus,!0),this.el.addEventListener("blur",this._handleBlur,!0)}_removeEventHandlers(){this.el.removeEventListener("mouseenter",this._handleMouseEnter),this.el.removeEventListener("mouseleave",this._handleMouseLeave),this.el.removeEventListener("focus",this._handleFocus,!0),this.el.removeEventListener("blur",this._handleBlur,!0)}open=t=>{this.isOpen||(t=void 0===t||void 0,this.isOpen=!0,this.options={...this.options,...this._getAttributeOptions()},this._updateTooltipContent(),this._setEnterDelayTimeout(t))};close=()=>{this.isOpen&&(this.isHovered=!1,this.isFocused=!1,this.isOpen=!1,this._setExitDelayTimeout())};_setExitDelayTimeout(){clearTimeout(this._exitDelayTimeout),this._exitDelayTimeout=setTimeout((()=>{this.isHovered||this.isFocused||this._animateOut()}),this.options.exitDelay)}_setEnterDelayTimeout(t){clearTimeout(this._enterDelayTimeout),this._enterDelayTimeout=setTimeout((()=>{(this.isHovered||this.isFocused||t)&&this._animateIn()}),this.options.enterDelay)}_positionTooltip(){const t=this.tooltipEl,i=this.el,s=i.offsetHeight,n=i.offsetWidth,o=t.offsetHeight,a=t.offsetWidth,l=this.options.margin;this.xMovement=0,this.yMovement=0;let r=i.getBoundingClientRect().top+e.getDocumentScrollTop(),h=i.getBoundingClientRect().left+e.getDocumentScrollLeft();"top"===this.options.position?(r+=-o-l,h+=n/2-a/2,this.yMovement=-this.options.transitionMovement):"right"===this.options.position?(r+=s/2-o/2,h+=n+l,this.xMovement=this.options.transitionMovement):"left"===this.options.position?(r+=s/2-o/2,h+=-a-l,this.xMovement=-this.options.transitionMovement):(r+=s+l,h+=n/2-a/2,this.yMovement=this.options.transitionMovement);const d=this._repositionWithinScreen(h,r,a,o);t.style.top=d.y+"px",t.style.left=d.x+"px"}_repositionWithinScreen(t,i,s,n){const o=e.getDocumentScrollLeft(),a=e.getDocumentScrollTop();let l=t-o,r=i-a;const h={left:l,top:r,width:s,height:n},d=this.options.margin+this.options.transitionMovement,c=e.checkWithinContainer(document.body,h,d);return c.left?l=d:c.right&&(l-=l+s-window.innerWidth),c.top?r=d:c.bottom&&(r-=r+n-window.innerHeight),{x:l+o,y:r+a}}_animateIn(){this._positionTooltip(),this.tooltipEl.style.visibility="visible";const t=this.options.inDuration;this.tooltipEl.style.transition=`\n transform ${t}ms ease-out,\n opacity ${t}ms ease-out`,setTimeout((()=>{this.tooltipEl.style.transform=`translateX(${this.xMovement}px) translateY(${this.yMovement}px)`,this.tooltipEl.style.opacity=(this.options.opacity||1).toString()}),1)}_animateOut(){const t=this.options.outDuration;this.tooltipEl.style.transition=`\n transform ${t}ms ease-out,\n opacity ${t}ms ease-out`,setTimeout((()=>{this.tooltipEl.style.transform="translateX(0px) translateY(0px)",this.tooltipEl.style.opacity="0"}),1)}_handleMouseEnter=()=>{this.isHovered=!0,this.isFocused=!1,this.open(!1)};_handleMouseLeave=()=>{this.isHovered=!1,this.isFocused=!1,this.close()};_handleFocus=()=>{e.tabPressed&&(this.isFocused=!0,this.open(!1))};_handleBlur=()=>{this.isFocused=!1,this.close()};_getAttributeOptions(){const t={},e=this.el.getAttribute("data-tooltip"),i=this.el.getAttribute("data-tooltip-id"),s=this.el.getAttribute("data-position");return e&&(t.text=e),s&&(t.position=s),i&&(t.tooltipId=i),t}}class N{static _offset(t){const e=t.getBoundingClientRect(),i=document.documentElement;return{top:e.top+window.pageYOffset-i.clientTop,left:e.left+window.pageXOffset-i.clientLeft}}static renderWaveEffect(t,e=null,i=null){const s=null===e;let n,o;const a=function(l){o||(o=l);const r=l-o;if(r<500){const o=r/500*(2-r/500),l=s?"circle at 50% 50%":`circle at ${e.x}px ${e.y}px`,h=`rgba(${i?.r||0}, ${i?.g||0}, ${i?.b||0}, ${.3*(1-o)})`,d=90*o+"%";t.style.backgroundImage="radial-gradient("+l+", "+h+" "+d+", transparent "+d+")",n=window.requestAnimationFrame(a)}else t.style.backgroundImage="none",window.cancelAnimationFrame(n)};n=window.requestAnimationFrame(a)}static Init(){"undefined"!=typeof document&&document?.addEventListener("DOMContentLoaded",(()=>{document.body.addEventListener("click",(t=>{const e=t.target,i=e.closest(".waves-effect");if(i&&i.contains(e)){const e=i.classList.contains("waves-circle"),s=t.pageX-N._offset(i).left,n=t.pageY-N._offset(i).top;let o=null;i.classList.contains("waves-light")&&(o={r:255,g:255,b:255}),N.renderWaveEffect(i,e?null:{x:s,y:n},o)}}))}))}}const z={};class X extends i{_mousedown;value;thumb;constructor(t,e){super(t,e,X),this.el.M_Range=this,this.options={...X.defaults,...e},this._mousedown=!1,this._setupThumb(),this._setupEventHandlers()}static get defaults(){return z}static init(t,e={}){return super.init(t,e,X)}static getInstance(t){return t.M_Range}destroy(){this._removeEventHandlers(),this._removeThumb(),this.el.M_Range=void 0}_setupEventHandlers(){this.el.addEventListener("change",this._handleRangeChange),this.el.addEventListener("mousedown",this._handleRangeMousedownTouchstart),this.el.addEventListener("touchstart",this._handleRangeMousedownTouchstart),this.el.addEventListener("input",this._handleRangeInputMousemoveTouchmove),this.el.addEventListener("mousemove",this._handleRangeInputMousemoveTouchmove),this.el.addEventListener("touchmove",this._handleRangeInputMousemoveTouchmove),this.el.addEventListener("mouseup",this._handleRangeMouseupTouchend),this.el.addEventListener("touchend",this._handleRangeMouseupTouchend),this.el.addEventListener("blur",this._handleRangeBlurMouseoutTouchleave),this.el.addEventListener("mouseout",this._handleRangeBlurMouseoutTouchleave),this.el.addEventListener("touchleave",this._handleRangeBlurMouseoutTouchleave)}_removeEventHandlers(){this.el.removeEventListener("change",this._handleRangeChange),this.el.removeEventListener("mousedown",this._handleRangeMousedownTouchstart),this.el.removeEventListener("touchstart",this._handleRangeMousedownTouchstart),this.el.removeEventListener("input",this._handleRangeInputMousemoveTouchmove),this.el.removeEventListener("mousemove",this._handleRangeInputMousemoveTouchmove),this.el.removeEventListener("touchmove",this._handleRangeInputMousemoveTouchmove),this.el.removeEventListener("mouseup",this._handleRangeMouseupTouchend),this.el.removeEventListener("touchend",this._handleRangeMouseupTouchend),this.el.removeEventListener("blur",this._handleRangeBlurMouseoutTouchleave),this.el.removeEventListener("mouseout",this._handleRangeBlurMouseoutTouchleave),this.el.removeEventListener("touchleave",this._handleRangeBlurMouseoutTouchleave)}_handleRangeChange=()=>{this.value.innerHTML=this.el.value,this.thumb.classList.contains("active")||this._showRangeBubble();const t=this._calcRangeOffset();this.thumb.classList.add("active"),this.thumb.style.left=t+"px"};_handleRangeMousedownTouchstart=t=>{if(this.value.innerHTML=this.el.value,this._mousedown=!0,this.el.classList.add("active"),this.thumb.classList.contains("active")||this._showRangeBubble(),"input"!==t.type){const t=this._calcRangeOffset();this.thumb.classList.add("active"),this.thumb.style.left=t+"px"}};_handleRangeInputMousemoveTouchmove=()=>{if(this._mousedown){this.thumb.classList.contains("active")||this._showRangeBubble();const t=this._calcRangeOffset();this.thumb.classList.add("active"),this.thumb.style.left=t+"px",this.value.innerHTML=this.el.value}};_handleRangeMouseupTouchend=()=>{this._mousedown=!1,this.el.classList.remove("active")};_handleRangeBlurMouseoutTouchleave=()=>{if(!this._mousedown){const t=7+parseInt(getComputedStyle(this.el).paddingLeft)+"px";if(this.thumb.classList.contains("active")){const e=100;this.thumb.style.transition="none",setTimeout((()=>{this.thumb.style.transition=`\n height ${e}ms ease,\n width ${e}ms ease,\n top ${e}ms ease,\n margin ${e}ms ease\n `,this.thumb.style.height="0",this.thumb.style.width="0",this.thumb.style.top="0",this.thumb.style.marginLeft=t}),1)}this.thumb.classList.remove("active")}};_setupThumb(){this.thumb=document.createElement("span"),this.value=document.createElement("span"),this.thumb.classList.add("thumb"),this.value.classList.add("value"),this.thumb.append(this.value),this.el.after(this.thumb)}_removeThumb(){this.thumb.remove()}_showRangeBubble(){const t=-7+parseInt(getComputedStyle(this.thumb.parentElement).paddingLeft)+"px";this.thumb.style.transition="\n height 300ms ease,\n width 300ms ease,\n top 300ms ease,\n margin 300ms ease\n ",this.thumb.style.height="30px",this.thumb.style.width="30px",this.thumb.style.top="-30px",this.thumb.style.marginLeft=t}_calcRangeOffset(){const t=this.el.getBoundingClientRect().width-15,e=parseFloat(this.el.getAttribute("max"))||100,i=parseFloat(this.el.getAttribute("min"))||0;return(parseFloat(this.el.value)-i)/(e-i)*t}static Init(){"undefined"!=typeof document&&X.init(document?.querySelectorAll("input[type=range]"),{})}}const K=Object.freeze({});class Y extends i{counterEl;isInvalid;isValidLength;constructor(t,e){super(t,{},Y),this.el.M_CharacterCounter=this,this.options={...Y.defaults,...e},this.isInvalid=!1,this.isValidLength=!1,this._setupCounter(),this._setupEventHandlers()}static get defaults(){return K}static init(t,e={}){return super.init(t,e,Y)}static getInstance(t){return t.M_CharacterCounter}destroy(){this._removeEventHandlers(),this.el.CharacterCounter=void 0,this._removeCounter()}_setupEventHandlers(){this.el.addEventListener("focus",this.updateCounter,!0),this.el.addEventListener("input",this.updateCounter,!0)}_removeEventHandlers(){this.el.removeEventListener("focus",this.updateCounter,!0),this.el.removeEventListener("input",this.updateCounter,!0)}_setupCounter(){this.counterEl=document.createElement("span"),this.counterEl.classList.add("character-counter"),this.counterEl.style.float="right",this.counterEl.style.fontSize="12px",this.counterEl.style.height="1",this.el.parentElement.appendChild(this.counterEl)}_removeCounter(){this.counterEl.remove()}updateCounter=()=>{const t=parseInt(this.el.getAttribute("maxlength")),e=this.el.value.length;this.isValidLength=e<=t;let i=e.toString();t&&(i+="/"+t,this._validateInput()),this.counterEl.innerHTML=i};_validateInput(){this.isValidLength&&this.isInvalid?(this.isInvalid=!1,this.el.classList.remove("invalid")):this.isValidLength||this.isInvalid||(this.isInvalid=!0,this.el.classList.remove("valid"),this.el.classList.add("invalid"))}}const j={indicators:!0,height:400,duration:500,interval:6e3,pauseOnFocus:!0,pauseOnHover:!0,indicatorLabelFunc:null};class U extends i{activeIndex;interval;eventPause;_slider;_slides;_activeSlide;_indicators;_hovered;_focused;_focusCurrent;_sliderId;constructor(t,i){super(t,i,U),this.el.M_Slider=this,this.options={...U.defaults,...i},this.interval=null,this.eventPause=!1,this._hovered=!1,this._focused=!1,this._focusCurrent=!1,this._slider=this.el.querySelector(".slides"),this._slides=Array.from(this._slider.querySelectorAll("li")),this.activeIndex=this._slides.findIndex((t=>t.classList.contains("active"))),-1!==this.activeIndex&&(this._activeSlide=this._slides[this.activeIndex]),this._setSliderHeight(),this._slider.hasAttribute("id")?this._sliderId=this._slider.getAttribute("id"):(this._sliderId="slider-"+e.guid(),this._slider.setAttribute("id",this._sliderId));const s="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";this._slides.forEach((t=>{const e=t.querySelector("img");e&&e.src!==s&&(e.style.backgroundImage="url("+e.src+")",e.src=s),t.hasAttribute("tabindex")||t.setAttribute("tabindex","-1"),t.style.visibility="hidden"})),this._setupIndicators(),this._activeSlide?(this._activeSlide.style.display="block",this._activeSlide.style.visibility="visible"):(this.activeIndex=0,this._slides[0].classList.add("active"),this._slides[0].style.visibility="visible",this._activeSlide=this._slides[0],this._animateSlide(this._slides[0],!0),this.options.indicators&&this._indicators[this.activeIndex].children[0].classList.add("active")),this._setupEventHandlers(),this.start()}static get defaults(){return j}static init(t,e={}){return super.init(t,e,U)}static getInstance(t){return t.M_Slider}destroy(){this.pause(),this._removeIndicators(),this._removeEventHandlers(),this.el.M_Slider=void 0}_setupEventHandlers(){this.options.pauseOnFocus&&(this.el.addEventListener("focusin",this._handleAutoPauseFocus),this.el.addEventListener("focusout",this._handleAutoStartFocus)),this.options.pauseOnHover&&(this.el.addEventListener("mouseenter",this._handleAutoPauseHover),this.el.addEventListener("mouseleave",this._handleAutoStartHover)),this.options.indicators&&this._indicators.forEach((t=>{t.addEventListener("click",this._handleIndicatorClick)}))}_removeEventHandlers(){this.options.pauseOnFocus&&(this.el.removeEventListener("focusin",this._handleAutoPauseFocus),this.el.removeEventListener("focusout",this._handleAutoStartFocus)),this.options.pauseOnHover&&(this.el.removeEventListener("mouseenter",this._handleAutoPauseHover),this.el.removeEventListener("mouseleave",this._handleAutoStartHover)),this.options.indicators&&this._indicators.forEach((t=>{t.removeEventListener("click",this._handleIndicatorClick)}))}_handleIndicatorClick=t=>{const e=t.target.parentElement,i=[...e.parentNode.children].indexOf(e);this._focusCurrent=!0,this.set(i)};_handleAutoPauseHover=()=>{this._hovered=!0,null!=this.interval&&this._pause(!0)};_handleAutoPauseFocus=()=>{this._focused=!0,null!=this.interval&&this._pause(!0)};_handleAutoStartHover=()=>{this._hovered=!1,this.options.pauseOnFocus&&this._focused||!this.eventPause||this.start()};_handleAutoStartFocus=()=>{this._focused=!1,this.options.pauseOnHover&&this._hovered||!this.eventPause||this.start()};_handleInterval=()=>{const t=this._slider.querySelector(".active");let e=[...t.parentNode.children].indexOf(t);this._slides.length===e+1?e=0:e+=1,this.set(e)};_animateSlide(t,e){let i=0,s=0;t.style.opacity=e?"0":"1",setTimeout((()=>{t.style.transition=`opacity ${this.options.duration}ms ease`,t.style.opacity=e?"1":"0"}),1);const n=t.querySelector(".caption");n&&(n.classList.contains("center-align")?s=-100:n.classList.contains("right-align")?i=100:n.classList.contains("left-align")&&(i=-100),n.style.opacity=e?"0":"1",n.style.transform=e?`translate(${i}px, ${s}px)`:"translate(0, 0)",setTimeout((()=>{n.style.transition=`opacity ${this.options.duration}ms ease, transform ${this.options.duration}ms ease`,n.style.opacity=e?"1":"0",n.style.transform=e?"translate(0, 0)":`translate(${i}px, ${s}px)`}),this.options.duration))}_setSliderHeight(){this.el.classList.contains("fullscreen")||(this.options.indicators?this.el.style.height=this.options.height+40+"px":this.el.style.height=this.options.height+"px",this._slider.style.height=this.options.height+"px")}_setupIndicators(){if(this.options.indicators){const t=document.createElement("ul");t.classList.add("indicators");const e=[];this._slides.forEach(((i,s)=>{const n=this.options.indicatorLabelFunc?this.options.indicatorLabelFunc.call(this,s+1,0===s):`${s+1}`,o=document.createElement("li");o.classList.add("indicator-item"),o.innerHTML=``,e.push(o),t.append(o)})),this.el.append(t),this._indicators=e}}_removeIndicators(){this.el.querySelector("ul.indicators").remove()}set(t){if(t>=this._slides.length?t=0:t<0&&(t=this._slides.length-1),this.activeIndex===t)return;this._activeSlide=this._slides[this.activeIndex];const e=this._activeSlide.querySelector(".caption");if(this._activeSlide.classList.remove("active"),this._slides.forEach((t=>t.style.visibility="visible")),this._activeSlide.style.opacity="0",setTimeout((()=>{this._slides.forEach((t=>{t.classList.contains("active")||(t.style.opacity="0",t.style.transform="translate(0, 0)",t.style.visibility="hidden")}))}),this.options.duration),e.style.opacity="0",this.options.indicators){const e=this._indicators[this.activeIndex].children[0],i=this._indicators[t].children[0];e.classList.remove("active"),i.classList.add("active"),"function"==typeof this.options.indicatorLabelFunc&&(e.ariaLabel=this.options.indicatorLabelFunc.call(this,this.activeIndex,!1),i.ariaLabel=this.options.indicatorLabelFunc.call(this,t,!0))}this._animateSlide(this._slides[t],!0),this._slides[t].classList.add("active"),this.activeIndex=t,null!=this.interval&&this.start()}_pause(t){clearInterval(this.interval),this.eventPause=t,this.interval=null}pause=()=>{this._pause(!1)};start=()=>{clearInterval(this.interval),this.interval=setInterval(this._handleInterval,this.options.duration+this.options.interval),this.eventPause=!1};next=()=>{let t=this.activeIndex+1;t>=this._slides.length?t=0:t<0&&(t=this._slides.length-1),this.set(t)};prev=()=>{let t=this.activeIndex-1;t>=this._slides.length?t=0:t<0&&(t=this._slides.length-1),this.set(t)}}const Z={text:"",displayLength:4e3,inDuration:300,outDuration:375,classes:"",completeCallback:null,activationPercent:.8};class G{el;timeRemaining;panning;options;message;counterInterval;wasSwiped;startingXPos;xPos;time;deltaX;velocityX;static _toasts;static _container;static _draggedToast;constructor(t){this.options={...G.defaults,...t},this.message=this.options.text,this.panning=!1,this.timeRemaining=this.options.displayLength,0===G._toasts.length&&G._createContainer(),G._toasts.push(this);const e=this._createToast();e.M_Toast=this,this.el=e,this._animateIn(),this._setTimer()}static get defaults(){return Z}static getInstance(t){return t.M_Toast}static _createContainer(){const t=document.createElement("div");t.setAttribute("id","toast-container"),t.addEventListener("touchstart",G._onDragStart),t.addEventListener("touchmove",G._onDragMove),t.addEventListener("touchend",G._onDragEnd),t.addEventListener("mousedown",G._onDragStart),document.addEventListener("mousemove",G._onDragMove),document.addEventListener("mouseup",G._onDragEnd),document.body.appendChild(t),G._container=t}static _removeContainer(){document.removeEventListener("mousemove",G._onDragMove),document.removeEventListener("mouseup",G._onDragEnd),G._container.remove(),G._container=null}static _onDragStart(t){if(t.target&&t.target.closest(".toast")){const e=t.target.closest(".toast").M_Toast;e.panning=!0,G._draggedToast=e,e.el.classList.add("panning"),e.el.style.transition="",e.startingXPos=G._xPos(t),e.time=Date.now(),e.xPos=G._xPos(t)}}static _onDragMove(t){if(G._draggedToast){t.preventDefault();const e=G._draggedToast;e.deltaX=Math.abs(e.xPos-G._xPos(t)),e.xPos=G._xPos(t),e.velocityX=e.deltaX/(Date.now()-e.time),e.time=Date.now();const i=e.xPos-e.startingXPos,s=e.el.offsetWidth*e.options.activationPercent;e.el.style.transform=`translateX(${i}px)`,e.el.style.opacity=(1-Math.abs(i/s)).toString()}}static _onDragEnd(){if(G._draggedToast){const t=G._draggedToast;t.panning=!1,t.el.classList.remove("panning");const e=t.xPos-t.startingXPos,i=t.el.offsetWidth*t.options.activationPercent;Math.abs(e)>i||t.velocityX>1?(t.wasSwiped=!0,t.dismiss()):(t.el.style.transition="transform .2s, opacity .2s",t.el.style.transform="",t.el.style.opacity=""),G._draggedToast=null}}static _xPos(t){return t.type.startsWith("touch")&&t.targetTouches.length>=1?t.targetTouches[0].clientX:t.clientX}static dismissAll(){for(const t in G._toasts)G._toasts[t].dismiss()}_createToast(){let t=this.options.toastId?document.getElementById(this.options.toastId):document.createElement("div");if(t instanceof HTMLTemplateElement){const e=t.content.cloneNode(!0);t=e.firstElementChild}return t.classList.add("toast"),t.setAttribute("role","alert"),t.setAttribute("aria-live","assertive"),t.setAttribute("aria-atomic","true"),this.options.classes.length>0&&t.classList.add(...this.options.classes.split(" ")),this.message&&(t.innerText=this.message),G._container.appendChild(t),t}_animateIn(){this.el.style.display="",this.el.style.opacity="0",this.el.style.transition=`\n top ${this.options.inDuration}ms ease,\n opacity ${this.options.inDuration}ms ease\n `,setTimeout((()=>{this.el.style.top="0",this.el.style.opacity="1"}),1)}_setTimer(){this.timeRemaining!==1/0&&(this.counterInterval=setInterval((()=>{this.panning||(this.timeRemaining-=20),this.timeRemaining<=0&&this.dismiss()}),20))}dismiss(){clearInterval(this.counterInterval);const t=this.el.offsetWidth*this.options.activationPercent;this.wasSwiped&&(this.el.style.transition="transform .05s, opacity .05s",this.el.style.transform=`translateX(${t}px)`,this.el.style.opacity="0"),this.el.style.transition=`\n margin ${this.options.outDuration}ms ease,\n opacity ${this.options.outDuration}ms ease`,setTimeout((()=>{this.el.style.opacity="0",this.el.style.marginTop="-40px"}),1),setTimeout((()=>{"function"==typeof this.options.completeCallback&&this.options.completeCallback(),this.el.id!=this.options.toastId&&(this.el.remove(),G._toasts.splice(G._toasts.indexOf(this),1),0===G._toasts.length&&G._removeContainer())}),this.options.outDuration)}static{G._toasts=[],G._container=null,G._draggedToast=null}}return"undefined"!=typeof document&&(document.addEventListener("keydown",e.docHandleKeydown,!0),document.addEventListener("keyup",e.docHandleKeyup,!0),document.addEventListener("focus",e.docHandleFocus,!0),document.addEventListener("blur",e.docHandleBlur,!0)),b.Init(),v.Init(),N.Init(),X.Init(),t.AutoInit=function(t=document.body,e){const i={Autocomplete:t.querySelectorAll(".autocomplete:not(.no-autoinit)"),Cards:t.querySelectorAll(".cards:not(.no-autoinit)"),Carousel:t.querySelectorAll(".carousel:not(.no-autoinit)"),Chips:t.querySelectorAll(".chips:not(.no-autoinit)"),Collapsible:t.querySelectorAll(".collapsible:not(.no-autoinit)"),Datepicker:t.querySelectorAll(".datepicker:not(.no-autoinit)"),Dropdown:t.querySelectorAll(".dropdown-trigger:not(.no-autoinit)"),Materialbox:t.querySelectorAll(".materialboxed:not(.no-autoinit)"),Modal:t.querySelectorAll(".modal:not(.no-autoinit)"),Parallax:t.querySelectorAll(".parallax:not(.no-autoinit)"),Pushpin:t.querySelectorAll(".pushpin:not(.no-autoinit)"),ScrollSpy:t.querySelectorAll(".scrollspy:not(.no-autoinit)"),FormSelect:t.querySelectorAll("select:not(.no-autoinit)"),Sidenav:t.querySelectorAll(".sidenav:not(.no-autoinit)"),Tabs:t.querySelectorAll(".tabs:not(.no-autoinit)"),TapTarget:t.querySelectorAll(".tap-target:not(.no-autoinit)"),Timepicker:t.querySelectorAll(".timepicker:not(.no-autoinit)"),Tooltip:t.querySelectorAll(".tooltipped:not(.no-autoinit)"),FloatingActionButton:t.querySelectorAll(".fixed-action-btn:not(.no-autoinit)")};a.init(i.Autocomplete,e?.Autocomplete??{}),d.init(i.Cards,e?.Cards??{}),p.init(i.Carousel,e?.Carousel??{}),v.init(i.Chips,e?.Chips??{}),g.init(i.Collapsible,e?.Collapsible??{}),w.init(i.Datepicker,e?.Datepicker??{}),n.init(i.Dropdown,e?.Dropdown??{}),C.init(i.Materialbox,e?.Materialbox??{}),T.init(i.Modal,e?.Modal??{}),D.init(i.Parallax,e?.Parallax??{}),A.init(i.Pushpin,e?.Pushpin??{}),M.init(i.ScrollSpy,e?.ScrollSpy??{}),f.init(i.FormSelect,e?.FormSelect??{}),R.init(i.Sidenav,e?.Sidenav??{}),W.init(i.Tabs,e?.Tabs??{}),B.init(i.TapTarget,e?.TapTarget??{}),V.init(i.Timepicker,e?.Timepicker??{}),$.init(i.Tooltip,e?.Tooltip??{}),r.init(i.FloatingActionButton,e?.FloatingActionButton??{})},t.Autocomplete=a,t.Cards=d,t.Carousel=p,t.CharacterCounter=Y,t.Chips=v,t.Collapsible=g,t.Datepicker=w,t.Dropdown=n,t.FloatingActionButton=r,t.FormSelect=f,t.Forms=b,t.Materialbox=C,t.Modal=T,t.Parallax=D,t.Pushpin=A,t.Range=X,t.ScrollSpy=M,t.Sidenav=R,t.Slider=U,t.Tabs=W,t.TapTarget=B,t.Timepicker=V,t.Toast=G,t.Tooltip=$,t.Waves=N,t.version="2.2.1",t}({}); diff --git a/MaterialSB.sbi b/MaterialSB.sbi new file mode 100644 index 0000000..50c1d4e --- /dev/null +++ b/MaterialSB.sbi @@ -0,0 +1,1678 @@ +; MaterialSB - A MaterializeCSS wrapper for SpiderBasic +; +; This library replaces SpiderBasic's default UI with MaterializeCSS components. +; Components are designed to closely match their Materialize equivalents. +; +; Usage: +; IncludeFile "MaterialSB/MaterialSB.sbi" +; MaterialSB::Download(@MyCallback()) +; +; For documentation, see: https://materializeweb.com/ + +DeclareModule MaterialSB + + ;{ Initialization + Declare Download(*callback) + Declare AutoInit() + Declare Init(Element, Options) + ;} + + ;{ Parent Management + Declare CloseCurrentParent(depth = 1) + Declare GetCurrentParent() + Declare SetCurrentParent(Parent) + ;} + + ;{ HTML Helpers + Declare.s Paragraph(Text.s, Color.s = "") + Declare.s Paragraph_ex(Text.s, Class.s = "", Style.s = "") + Declare.s Header(Text.s, Level, Color.s = "") + Declare.s Header_ex(Text.s, Level, Class.s = "", Style.s = "") + Declare Append(Content.s, Parent = #Null) + Declare.s Link(Text.s, *Callback, Color.s = "") + Declare.s Link_ex(Text.s, *Callback, Class.s = "", Style.s = "") + ;} + + ;{ Element Manipulation + Declare SetAttribute(Element, Attribute.s, Value.s) + Declare SetClass(Element, Class.s) + Declare SetContent(Element, Content.s) + Declare AddClass(Element, Class.s) + Declare AddContent(Element, Content.s) + Declare GetValue(Element) + Declare SetValue(Element, Value.s) + ;} + + ;{ Theme + Declare GetDarkThemeState() + Declare SetDarkTheme(State) + ;} + + ;{ Style Constants + #Class_Hide_On_Small_Only = "hide-on-small-only" + #Class_Hide_On_Small_And_Down = "hide-on-small-and-down" + #Class_Hide_On_Med_And_Down = "hide-on-med-and-down" + #Class_Hide_On_Med_And_Up = "hide-on-med-and-up" + #Class_Hide_On_Med_Only = "hide-on-med-only" + #Class_Hide_On_Large_Only = "hide-on-large-only" + #Class_Show_On_Large = "show-on-large" + #Class_Show_On_Medium = "show-on-medium" + #Class_Show_On_Small = "show-on-small" + #Class_Show_On_Medium_And_Up = "show-on-medium-and-up" + #Class_Show_On_Medium_And_Down = "show-on-medium-and-down" + + #Class_Pulse = "pulse" + + #Class_Centered = "center-align" + #Class_LeftAlign = "left-align" + #Class_RightAlign = "right-align" + ;} + + ;{ Color Constants + ; Base colors + #Color_Red = "red" + #Color_Pink = "pink" + #Color_Purple = "purple" + #Color_DeepPurple = "deep-purple" + #Color_Indigo = "indigo" + #Color_Blue = "blue" + #Color_LightBlue = "light-blue" + #Color_Cyan = "cyan" + #Color_Teal = "teal" + #Color_Green = "green" + #Color_LightGreen = "light-green" + #Color_Lime = "lime" + #Color_Yellow = "yellow" + #Color_Amber = "amber" + #Color_Orange = "orange" + #Color_DeepOrange = "deep-orange" + #Color_Brown = "brown" + #Color_Grey = "grey" + #Color_BlueGrey = "blue-grey" + #Color_Black = "black" + #Color_White = "white" + #Color_Transparent = "transparent" + + ; Color modifiers (append to base color) + #Color_Lighten_5 = " lighten-5" + #Color_Lighten_4 = " lighten-4" + #Color_Lighten_3 = " lighten-3" + #Color_Lighten_2 = " lighten-2" + #Color_Lighten_1 = " lighten-1" + #Color_Darken_1 = " darken-1" + #Color_Darken_2 = " darken-2" + #Color_Darken_3 = " darken-3" + #Color_Darken_4 = " darken-4" + #Color_Accent_1 = " accent-1" + #Color_Accent_2 = " accent-2" + #Color_Accent_3 = " accent-3" + #Color_Accent_4 = " accent-4" + #Color_Text = "-text" + ;} + + ;{ Navbar + EnumerationBinary NavbarFlags + #Navbar_Default = 0 + #Navbar_Align_Right = 1 + #Navbar_Align_Center + #Navbar_Bottom + #Navbar_Shadow1 + #Navbar_Shadow2 + #Navbar_Shadow3 + #Navbar_Container + EndEnumeration + + Declare Navbar(Flags = #Navbar_Default) + Declare NavbarAddLogo(Text.s, ImagePath.s = "", Link.s = "", Flags = #Navbar_Default, Parent = #Null) + Declare NavbarAddLink(Text.s, Link.s, Parent = #Null) + Declare NavbarAddSidenavTrigger(SidenavID.s, Parent = #Null) + ;} + + ;{ Sidenav + EnumerationBinary SidenavFlags + #Sidenav_Default = 0 + #Sidenav_Fixed = 1 + #Sidenav_Right + #Sidenav_CloseOnClick + EndEnumeration + + Declare Sidenav(Flags = #Sidenav_Default) + Declare SidenavAddLink(Text.s, Link.s, Icon.s = "", Parent = #Null) + Declare SidenavAddDivider(Parent = #Null) + Declare SidenavAddSubheader(Text.s, Parent = #Null) + Declare SidenavAddUserView(Name.s, Email.s, AvatarPath.s = "", BackgroundPath.s = "", Parent = #Null) + ;} + + ;{ Grid + EnumerationBinary GridFlags + #Grid_Default = 0 + #Grid_Container = 1 + EndEnumeration + + Declare Row(Flags = #Grid_Default, Parent = #Null) + Declare Col(S, M = 0, L = 0, XL = 0, Flags = #Grid_Default, Parent = #Null) + ;} + + ;{ Media + EnumerationBinary MediaFlags + #Media_Default = 0 + #Media_Responsive = 1 + #Media_Circle + #Media_Controls + EndEnumeration + + Declare Image(Source.s, Alt.s = "", Flags = #Media_Default, Parent = #Null) + Declare Video(Source.s, Type.s = "video/mp4", Flags = #Media_Default, Parent = #Null) + Declare YoutubeVideo(Source.s, Flags = #Media_Default, Parent = #Null) + ;} + + ;{ Table + EnumerationBinary TableFlags + #Table_Default = 0 + #Table_Striped = 1 + #Table_Highlight + #Table_Centered + #Table_Responsive + EndEnumeration + + Declare Table(Title.s, Flags = #Table_Default, Parent = #Null) + Declare TableAddColumn(Title.s, Table) + Declare TableAddItem(Text.s, Table) + Declare TableSetText(Text.s, Item, ColumnIndex) + ;} + + ;{ Button + EnumerationBinary ButtonFlags + #Button_Default = 0 + #Button_Tonal = 1 + #Button_Outlined + #Button_Elevated + #Button_Text + #Button_Floating + #Button_Large + #Button_Small + #Button_IconLeft + #Button_Disabled + EndEnumeration + + Declare Button(Text.s, *Callback, Flags = #Button_Default, Parent = #Null) + Declare ButtonSetCallback(Button, *Callback) + ;} + + ;{ Card + EnumerationBinary CardFlags + #Card_Default = 0 + #Card_Panel = 1 + #Card_Small + #Card_Medium + #Card_Large + #Card_Horizontal + EndEnumeration + + Declare Card(Text.s = "", Flags = #Card_Default, Parent = #Null) + Declare CardImage(Source.s, Parent = #Null) + Declare CardContent(Parent = #Null) + Declare CardTitle(Text.s, Parent = #Null) + Declare CardAction(Parent = #Null) + ;} + + ;{ Carousel + EnumerationBinary CarouselFlags + #Carousel_Default = 0 + #Carousel_Slider = 1 + EndEnumeration + + Declare Carousel(Flags = #Carousel_Default, Parent = #Null) + Declare CarouselAddItem(Carousel, ImageSource.s, Link.s) + ;} + + ;{ Tabs + EnumerationBinary TabFlags + #Tab_Default = 0 + #Tab_Disabled = 1 + EndEnumeration + + Declare Tab(Flags = #Tab_Default, Parent = #Null) + Declare TabAddItem(Title.s, Tab, ID.s, Flags = #Tab_Default) + ;} + + ;{ Modal + EnumerationBinary ModalFlags + #Modal_Default = 0 + #Modal_FixedFooter = 1 + #Modal_BottomSheet + #Modal_Dismissible + EndEnumeration + + Declare Modal(Flags = #Modal_Default) + Declare ModalHeader(Text.s, Parent = #Null) + Declare ModalContent(Parent = #Null) + Declare ModalFooter(Parent = #Null) + Declare ModalOpen(ModalElement) + Declare ModalClose(ModalElement) + ;} + + ;{ Toast + EnumerationBinary ToastFlags + #Toast_Default = 0 + #Toast_Rounded = 1 + EndEnumeration + + Declare Toast(Text.s, Duration = 4000, Flags = #Toast_Default, Color.s = "") + Declare ToastDismissAll() + ;} + + ;{ Forms + EnumerationBinary InputFlags + #Input_Default = 0 + #Input_Outlined = 1 + #Input_Password + #Input_Email + #Input_Number + #Input_Tel + #Input_Url + #Input_Date + #Input_Time + #Input_Disabled + #Input_Readonly + EndEnumeration + + EnumerationBinary TextareaFlags + #Textarea_Default = 0 + #Textarea_Outlined = 1 + #Textarea_Disabled + #Textarea_Readonly + EndEnumeration + + EnumerationBinary CheckboxFlags + #Checkbox_Default = 0 + #Checkbox_Filled = 1 + #Checkbox_Checked + #Checkbox_Disabled + EndEnumeration + + EnumerationBinary RadioFlags + #Radio_Default = 0 + #Radio_WithGap = 1 + #Radio_Checked + #Radio_Disabled + EndEnumeration + + EnumerationBinary SwitchFlags + #Switch_Default = 0 + #Switch_Checked = 1 + #Switch_Disabled + EndEnumeration + + EnumerationBinary SelectFlags + #Dropdown_Default = 0 + #Dropdown_Outlined = 1 + #Dropdown_Multiple + #Dropdown_Disabled + EndEnumeration + + EnumerationBinary RangeFlags + #Range_Default = 0 + #Range_Disabled = 1 + EndEnumeration + + Declare TextInput(Label.s = "", Placeholder.s = "", Flags = #Input_Default, Parent = #Null) + Declare Textarea(Label.s = "", Placeholder.s = "", Flags = #Textarea_Default, Parent = #Null) + Declare Checkbox(Label.s, Flags = #Checkbox_Default, Parent = #Null) + Declare Radio(Name.s, Label.s, Flags = #Radio_Default, Parent = #Null) + Declare Switch(LabelOff.s, LabelOn.s, Flags = #Switch_Default, Parent = #Null) + Declare Dropdown(Label.s = "", Flags = #Dropdown_Default, Parent = #Null) + Declare DropdownAddOption(Text.s, Value.s, DropdownElement, Selected = #False) + Declare Range(Min = 0, Max = 100, Value = 50, Flags = #Range_Default, Parent = #Null) + Declare InputSetCallback(InputElement, *Callback) + ;} + +EndDeclareModule + +Module MaterialSB + EnableExplicit + + ;{ Private Variables + Global download_callback + Global current_parent + Global current_navbar + Global current_sidenav + Global current_modal + Global dropdown_menu_index = 0 + Global input_id_counter = 0 + Global NewList parent_list() + ;} + + ;{ Private Macros + Macro CheckParent() + If Parent = #Null + If current_parent = #Null + !materialsb$g_current_parent = document.body.firstElementChild; + EndIf + Parent = current_parent + EndIf + EndMacro + + Macro PushParent() + AddElement(parent_list()) + parent_list() = current_parent + EndMacro + ;} + + ;{ Private Declarations + Declare Handler_Download(url.s, success) + ;} + + ;=========================================================================== + ; Initialization + ;=========================================================================== + Procedure Download(*callback) + download_callback = *callback + LoadScript("LocalFiles/CSS/materialize.min.css", @Handler_Download(), #PB_Script_CSS) + EndProcedure + + Procedure AutoInit() + !M.AutoInit(); + EndProcedure + + Procedure Init(Element, Options) + Protected check + + !v_check = v_element.matches(".carousel"); + If check + !M.Carousel.init(v_element, v_options); + ProcedureReturn #True + EndIf + + !v_check = v_element.matches("select"); + If check + !M.FormSelect.init(v_element, v_options); + ProcedureReturn #True + EndIf + + !v_check = v_element.matches(".sidenav"); + If check + !M.Sidenav.init(v_element, v_options); + ProcedureReturn #True + EndIf + + !v_check = v_element.matches(".modal"); + If check + !M.Modal.init(v_element, v_options); + ProcedureReturn #True + EndIf + + ProcedureReturn #False + EndProcedure + + ;=========================================================================== + ; Parent Management + ;=========================================================================== + + Procedure CloseCurrentParent(depth = 1) + While depth > 0 And ListSize(parent_list()) + current_parent = parent_list() + DeleteElement(parent_list()) + depth - 1 + Wend + ProcedureReturn current_parent + EndProcedure + + Procedure GetCurrentParent() + ProcedureReturn current_parent + EndProcedure + + Procedure SetCurrentParent(Parent) + PushParent() + current_parent = Parent + ProcedureReturn current_parent + EndProcedure + + ;=========================================================================== + ; HTML Helpers + ;=========================================================================== + + Procedure.s Paragraph(Text.s, Color.s = "") + Protected Result.s, Count = CountString(Text, ~"\n") + 1, i + + If Color = "" + Result = "

" + Else + Result = ~"

" + EndIf + + Result + StringField(Text, 1, ~"\n") + For i = 2 To Count + Result + "
" + StringField(Text, i, ~"\n") + Next + + ProcedureReturn Result + "

" + EndProcedure + + Procedure.s Paragraph_ex(Text.s, Class.s = "", Style.s = "") + Protected Result.s = " "" + Result + ~" class=\"" + Class + ~"\"" + EndIf + If Style <> "" + Result + ~" style=\"" + Style + ~"\"" + EndIf + Result + ">" + + Result + StringField(Text, 1, ~"\n") + For i = 2 To Count + Result + "
" + StringField(Text, i, ~"\n") + Next + + ProcedureReturn Result + "

" + EndProcedure + + Procedure.s Header(Text.s, Level, Color.s = "") + Protected Result.s = " "" + Result + ~" class=\"" + Color + ~"-text\"" + EndIf + ProcedureReturn Result + ">" + Text + "" + EndProcedure + + Procedure.s Header_ex(Text.s, Level, Class.s = "", Style.s = "") + Protected Result.s = " "" + Result + ~" class=\"" + Class + ~"\"" + EndIf + If Style <> "" + Result + ~" style=\"" + Style + ~"\"" + EndIf + ProcedureReturn Result + ">" + Text + "" + EndProcedure + + Procedure Append(Content.s, Parent = #Null) + CheckParent() + !v_parent.innerHTML += v_content; + EndProcedure + + Procedure.s Link(Text.s, *Callback, Color.s = "") + Protected Result.s, Callback.s, Pos + + If Color <> "" + Color = ~" class=\"" + Color + ~"-text\"" + EndIf + + If *Callback = #Null + Result = ~"" + Else + ; A very hacky approach to to approach native SB behavior: we need to get the name of the function out of the callback + ! v_callback = String(p_callback); + Pos = FindString(Callback, "(") - 10 + Callback = Mid(Callback, 10, Pos) + Result = ~"" + EndIf + + Result + Text + "" + + ProcedureReturn Result + EndProcedure + + Procedure.s Link_ex(Text.s, *Callback, Class.s = "", Style.s = "") + Protected Result.s = ~" "" + Result + ~" class=\"" + Class + ~"\"" + EndIf + If Style <> "" + Result + ~" style=\"" + Style + ~"\"" + EndIf + + If *Callback <> #Null + ; A very hacky approach to approach native SB behavior: we need to get the name of the function out of the callback + ! v_callback = String(p_callback); + Pos = FindString(Callback, "(") - 10 + Callback = Mid(Callback, 10, Pos) + Result + ~" onclick=\"" + Callback + ~"()\"" + EndIf + + Result + ">" + Text + "" + + ProcedureReturn Result + EndProcedure + + ;=========================================================================== + ; Element Manipulation + ;=========================================================================== + + Procedure SetAttribute(Element, Attribute.s, Value.s) + !v_element.setAttribute(v_attribute, v_value); + EndProcedure + + Procedure SetClass(Element, Class.s) + !v_element.className = v_class; + EndProcedure + + Procedure SetContent(Element, Content.s) + !v_element.innerHTML = v_content; + EndProcedure + + Procedure AddClass(Element, Class.s) + Protected Count = CountString(Class, " ") + 1, i, ClassName.s + For i = 1 To Count + ClassName = StringField(Class, i, " ") + !v_element.classList.add(v_classname); + Next + EndProcedure + + Procedure AddContent(Element, Content.s) + !v_element.insertAdjacentHTML('beforeend', v_content); + EndProcedure + + Procedure GetValue(Element) + Protected Result + !v_result = v_element.value; + ProcedureReturn Result + EndProcedure + + Procedure SetValue(Element, Value.s) + !v_element.value = v_value; + EndProcedure + + ;=========================================================================== + ; Theme + ;=========================================================================== + + Procedure GetDarkThemeState() + Protected theme.s + !v_theme = document.documentElement.getAttribute("theme"); + ProcedureReturn Bool(theme = "dark") + EndProcedure + + Procedure SetDarkTheme(State) + If Bool(State) <> GetDarkThemeState() + If State + !document.documentElement.setAttribute("theme", "dark"); + Else + !document.documentElement.setAttribute("theme", "light"); + EndIf + EndIf + EndProcedure + + ;=========================================================================== + ; Navbar + ;=========================================================================== + + Procedure Navbar(Flags = #Navbar_Default) + Protected Wrapper + + !materialsb$g_current_navbar = document.createElement('nav'); + + If Flags & #Navbar_Bottom + !materialsb$g_current_navbar.style.position = "absolute"; + !materialsb$g_current_navbar.style.bottom = "0"; + EndIf + + If Flags & #Navbar_Shadow1 + !materialsb$g_current_navbar.classList.add("z-depth-1"); + ElseIf Flags & #Navbar_Shadow2 + !materialsb$g_current_navbar.classList.add("z-depth-2"); + ElseIf Flags & #Navbar_Shadow3 + !materialsb$g_current_navbar.classList.add("z-depth-5"); + EndIf + + !v_wrapper = document.createElement('div'); + !v_wrapper.className = "nav-wrapper"; + + If Flags & #Navbar_Container + !v_wrapper.classList.add("container"); + EndIf + + !materialsb$g_current_navbar.append(v_wrapper); + !document.body.prepend(materialsb$g_current_navbar); + + ProcedureReturn Wrapper + EndProcedure + + Procedure NavbarAddLogo(Text.s, ImagePath.s = "", Link.s = "", Flags = #Navbar_Default, Parent = #Null) + Protected Logo + + If Parent = #Null + !v_parent = materialsb$g_current_navbar.firstElementChild; + Else + !v_parent = v_parent.firstElementChild; + EndIf + + If ImagePath <> "" + !v_text = '' + v_text + ''; + EndIf + + If Link = "" + !v_parent.innerHTML += ''; + Else + !v_parent.innerHTML += ''; + EndIf + + !v_logo = v_parent.lastElementChild; + + If Flags & #Navbar_Align_Center + !v_logo.classList.add("center"); + ElseIf Flags & #Navbar_Align_Right + !v_logo.classList.add("right"); + ; Remove right alignment from any existing UL elements + !for (const child of v_parent.children) { + ! if (child.tagName === 'UL') child.classList.remove("right"); + !} + EndIf + + ProcedureReturn Logo + EndProcedure + + Procedure NavbarAddLink(Text.s, Link.s, Parent = #Null) + Protected LinkElement + + If Parent = #Null + !v_parent = materialsb$g_current_navbar.firstElementChild; + EndIf + + ; Find existing list elements + !var _list = null, _dropdown = null; + !for (const child of v_parent.children) { + ! if (child.tagName === 'UL' && child.classList.contains("hide-on-med-and-down")) _list = child; + ! if (child.tagName === 'UL' && child.classList.contains("dropdown-content")) _dropdown = child; + !} + + ; Create lists if this is the first link + !if (_list === null) { + ! var _rightLogo = false; + ! for (const child of v_parent.children) { + ! if (child.tagName === 'A' && child.classList.contains("right")) { _rightLogo = true; break; } + ! } + ! var _menuId = 'materialsb_dropdown' + materialsb$g_dropdown_menu_index; + ! v_parent.innerHTML += ''; + ! if (_rightLogo) { + ! v_parent.innerHTML += ''; + ! v_parent.innerHTML += ''; + ! } else { + ! v_parent.innerHTML += ''; + ! v_parent.innerHTML += ''; + ! } + ! v_linkelement = v_parent.lastElementChild.lastElementChild; + !} else { + ! _list.innerHTML += '
  • ' + v_text + '
    • '; + ! _dropdown.innerHTML += '
  • ' + v_text + '
    • '; + ! v_linkelement = _list.lastElementChild; + !} + + dropdown_menu_index + 1 + ProcedureReturn LinkElement + EndProcedure + + Procedure NavbarAddSidenavTrigger(SidenavID.s, Parent = #Null) + Protected Trigger + + If Parent = #Null + !v_parent = materialsb$g_current_navbar.firstElementChild; + EndIf + + !v_trigger = document.createElement('a'); + !v_trigger.href = "#"; + !v_trigger.setAttribute('data-target', v_sidenavid); + !v_trigger.className = "sidenav-trigger"; + !v_trigger.innerHTML = 'menu'; + + !v_parent.prepend(v_trigger); + + ProcedureReturn Trigger + EndProcedure + + ;=========================================================================== + ; Sidenav + ;=========================================================================== + + Procedure Sidenav(Flags = #Sidenav_Default) + !materialsb$g_current_sidenav = document.createElement('ul'); + !materialsb$g_current_sidenav.className = "sidenav"; + + If Flags & #Sidenav_Fixed + !materialsb$g_current_sidenav.classList.add("sidenav-fixed"); + EndIf + + ; Sidenav must be added to body, not inside navbar + !document.body.append(materialsb$g_current_sidenav); + + ProcedureReturn current_sidenav + EndProcedure + + Procedure SidenavAddLink(Text.s, Link.s, Icon.s = "", Parent = #Null) + Protected Result + + If Parent = #Null + !v_parent = materialsb$g_current_sidenav; + EndIf + + !v_result = document.createElement('li'); + + If Icon <> "" + !v_result.innerHTML = '' + v_icon + '' + v_text + ''; + Else + !v_result.innerHTML = '' + v_text + ''; + EndIf + + !v_parent.append(v_result); + ProcedureReturn Result + EndProcedure + + Procedure SidenavAddDivider(Parent = #Null) + Protected Result + + If Parent = #Null + !v_parent = materialsb$g_current_sidenav; + EndIf + + !v_result = document.createElement('li'); + !v_result.innerHTML = '
    '; + !v_parent.append(v_result); + + ProcedureReturn Result + EndProcedure + + Procedure SidenavAddSubheader(Text.s, Parent = #Null) + Protected Result + + If Parent = #Null + !v_parent = materialsb$g_current_sidenav; + EndIf + + !v_result = document.createElement('li'); + !v_result.innerHTML = '' + v_text + ''; + !v_parent.append(v_result); + + ProcedureReturn Result + EndProcedure + + Procedure SidenavAddUserView(Name.s, Email.s, AvatarPath.s = "", BackgroundPath.s = "", Parent = #Null) + Protected Result + + If Parent = #Null + !v_parent = materialsb$g_current_sidenav; + EndIf + + !v_result = document.createElement('li'); + + !var _userView = document.createElement('div'); + !_userView.className = "user-view"; + + ; Background + If BackgroundPath <> "" + !var _bg = document.createElement('div'); + !_bg.className = "background"; + !_bg.innerHTML = ''; + !_userView.append(_bg); + EndIf + + ; Avatar + If AvatarPath <> "" + !var _avatar = document.createElement('a'); + !_avatar.href = "#user"; + !_avatar.innerHTML = ''; + !_userView.append(_avatar); + EndIf + + ; Name + If Name <> "" + !var _name = document.createElement('a'); + !_name.href = "#name"; + !_name.innerHTML = '' + v_name + ''; + !_userView.append(_name); + EndIf + + ; Email + If Email <> "" + !var _email = document.createElement('a'); + !_email.href = "#email"; + !_email.innerHTML = ''; + !_userView.append(_email); + EndIf + + !v_result.append(_userView); + !v_parent.append(v_result); + + ProcedureReturn Result + EndProcedure + + ;=========================================================================== + ; Grid + ;=========================================================================== + + Procedure Row(Flags = #Grid_Default, Parent = #Null) + CheckParent() + PushParent() + + !materialsb$g_current_parent = document.createElement('div'); + !materialsb$g_current_parent.className = "row"; + + If Flags & #Grid_Container + !materialsb$g_current_parent.classList.add("container"); + EndIf + + !v_parent.append(materialsb$g_current_parent); + ProcedureReturn current_parent + EndProcedure + + Procedure Col(S, M = 0, L = 0, XL = 0, Flags = #Grid_Default, Parent = #Null) + CheckParent() + PushParent() + + !materialsb$g_current_parent = document.createElement('div'); + !materialsb$g_current_parent.className = "col s" + v_s; + + If M + !materialsb$g_current_parent.classList.add("m" + v_m); + EndIf + If L + !materialsb$g_current_parent.classList.add("l" + v_l); + EndIf + If XL + !materialsb$g_current_parent.classList.add("xl" + v_xl); + EndIf + + If Flags & #Grid_Container + !materialsb$g_current_parent.classList.add("container"); + EndIf + + !v_parent.append(materialsb$g_current_parent); + ProcedureReturn current_parent + EndProcedure + + ;=========================================================================== + ; Media + ;=========================================================================== + + Procedure Image(Source.s, Alt.s = "", Flags = #Media_Default, Parent = #Null) + Protected Result + CheckParent() + + !v_result = document.createElement('img'); + !v_result.src = v_source; + !v_result.alt = v_alt; + + If Flags & #Media_Circle + !v_result.classList.add("circle"); + EndIf + If Flags & #Media_Responsive + !v_result.classList.add("responsive-img"); + EndIf + + !v_parent.append(v_result); + ProcedureReturn Result + EndProcedure + + Procedure Video(Source.s, Type.s = "video/mp4", Flags = #Media_Default, Parent = #Null) + Protected Result + CheckParent() + + !v_result = document.createElement('video'); + !v_result.innerHTML = ''; + + If Flags & #Media_Controls + !v_result.controls = true; + EndIf + If Flags & #Media_Responsive + !v_result.classList.add("responsive-video"); + EndIf + + !v_parent.append(v_result); + ProcedureReturn Result + EndProcedure + + Procedure YoutubeVideo(Source.s, Flags = #Media_Default, Parent = #Null) + Protected Result + CheckParent() + + !v_result = document.createElement('div'); + If Flags & #Media_Responsive + !v_result.classList.add("video-container"); + EndIf + !v_result.innerHTML = ''; + + !v_parent.append(v_result); + ProcedureReturn Result + EndProcedure + + ;=========================================================================== + ; Table + ;=========================================================================== + + Procedure Table(Title.s, Flags = #Table_Default, Parent = #Null) + Protected Result + CheckParent() + + !v_result = document.createElement('table'); + !var _thead = document.createElement('thead'); + !var _tr = document.createElement('tr'); + !var _th = document.createElement('th'); + !_th.innerHTML = v_title; + !var _tbody = document.createElement('tbody'); + + If Flags & #Table_Striped + !v_result.classList.add("striped"); + EndIf + If Flags & #Table_Highlight + !v_result.classList.add("highlight"); + EndIf + If Flags & #Table_Centered + !v_result.classList.add("centered"); + EndIf + If Flags & #Table_Responsive + !v_result.classList.add("responsive-table"); + EndIf + + !_tr.append(_th); + !_thead.append(_tr); + !v_result.append(_thead); + !v_result.append(_tbody); + !v_parent.append(v_result); + + ProcedureReturn Result + EndProcedure + + Procedure TableAddColumn(Title.s, Table) + Protected Result + !v_result = document.createElement('th'); + !v_result.innerHTML = v_title; + !v_table.firstChild.firstChild.append(v_result); + ProcedureReturn Result + EndProcedure + + Procedure TableAddItem(Text.s, Table) + Protected Result, Count, i, ColumnText.s + + !v_result = document.createElement('tr'); + !v_count = Math.min(v_table.firstChild.firstChild.childElementCount, v_text.split('\n').length); + + For i = 1 To Count + ColumnText = StringField(Text, i, Chr(10)) + !var _td = document.createElement('td'); + !_td.innerHTML = v_columntext; + !v_result.append(_td); + Next + + !v_table.lastChild.append(v_result); + ProcedureReturn Result + EndProcedure + + Procedure TableSetText(Text.s, Item, ColumnIndex) + Protected Count + !v_count = v_item.childElementCount; + + While Count < (ColumnIndex + 1) + !v_item.append(document.createElement('td')); + Count + 1 + Wend + + !v_item.children[v_columnindex].innerHTML = v_text; + EndProcedure + + ;=========================================================================== + ; Button + ;=========================================================================== + + Procedure Button(Text.s, *Callback, Flags = #Button_Default, Parent = #Null) + Protected Result + CheckParent() + + !v_result = document.createElement('a'); + !v_result.innerHTML = v_text; + !v_result.tabIndex = 0; + + ; Button size + Select #True + Case Bool(Flags & #Button_Floating) + !v_result.classList.add("btn-floating"); + Case Bool(Flags & #Button_Large) + !v_result.classList.add("btn-large"); + Case Bool(Flags & #Button_Small) + !v_result.classList.add("btn-small"); + Default + !v_result.classList.add("btn"); + EndSelect + + ; Button variant + Select #True + Case Bool(Flags & #Button_Tonal) + !v_result.classList.add("tonal"); + Case Bool(Flags & #Button_Outlined) + !v_result.classList.add("outlined"); + Case Bool(Flags & #Button_Elevated) + !v_result.classList.add("elevated"); + Case Bool(Flags & #Button_Text) + !v_result.classList.add("text"); + Default + !v_result.classList.add("filled"); + EndSelect + + If Flags & #Button_Disabled + !v_result.classList.add("disabled"); + EndIf + + If *Callback <> #Null + !v_result.addEventListener('click', p_callback); + EndIf + + ; add a 5 pixels margin around every buttons. + !v_result.style.margin = '5px'; + + !v_parent.append(v_result); + ProcedureReturn Result + EndProcedure + + Procedure ButtonSetCallback(Button, *Callback) + !v_button.addEventListener('click', p_callback); + EndProcedure + + ;=========================================================================== + ; Card + ;=========================================================================== + + Procedure Card(Text.s = "", Flags = #Card_Default, Parent = #Null) + CheckParent() + PushParent() + + !materialsb$g_current_parent = document.createElement('div'); + + If Flags & #Card_Panel + !materialsb$g_current_parent.classList.add("card-panel"); + Else + !materialsb$g_current_parent.classList.add("card"); + EndIf + + If Flags & #Card_Small + !materialsb$g_current_parent.classList.add("small"); + EndIf + If Flags & #Card_Medium + !materialsb$g_current_parent.classList.add("medium"); + EndIf + If Flags & #Card_Large + !materialsb$g_current_parent.classList.add("large"); + EndIf + If Flags & #Card_Horizontal + !materialsb$g_current_parent.classList.add("horizontal"); + EndIf + + If Text <> "" + !materialsb$g_current_parent.innerHTML = v_text; + EndIf + + !v_parent.append(materialsb$g_current_parent); + ProcedureReturn current_parent + EndProcedure + + Procedure CardImage(Source.s, Parent = #Null) + Protected Result + CheckParent() + + !v_result = document.createElement('div'); + !v_result.className = "card-image"; + !v_result.innerHTML = ''; + !v_parent.append(v_result); + + ProcedureReturn Result + EndProcedure + + Procedure CardContent(Parent = #Null) + CheckParent() + PushParent() + + !materialsb$g_current_parent = document.createElement('div'); + !materialsb$g_current_parent.className = "card-content"; + !v_parent.append(materialsb$g_current_parent); + + ProcedureReturn current_parent + EndProcedure + + Procedure CardTitle(Text.s, Parent = #Null) + Protected Result + CheckParent() + + !v_result = document.createElement('span'); + !v_result.className = "card-title"; + !v_result.innerHTML = v_text; + !v_parent.append(v_result); + + ProcedureReturn Result + EndProcedure + + Procedure CardAction(Parent = #Null) + CheckParent() + PushParent() + + !materialsb$g_current_parent = document.createElement('div'); + !materialsb$g_current_parent.className = "card-action"; + !v_parent.append(materialsb$g_current_parent); + + ProcedureReturn current_parent + EndProcedure + + ;=========================================================================== + ; Carousel + ;=========================================================================== + + Procedure Carousel(Flags = #Carousel_Default, Parent = #Null) + Protected Result + CheckParent() + + !v_result = document.createElement('div'); + !v_result.className = "carousel"; + + If Flags & #Carousel_Slider + !v_result.classList.add("carousel-slider"); + EndIf + + !v_parent.append(v_result); + ProcedureReturn Result + EndProcedure + + Procedure CarouselAddItem(Carousel, ImageSource.s, Link.s) + Protected Result + + !v_result = document.createElement('a'); + !v_result.className = "carousel-item"; + !v_result.href = v_link; + !v_result.innerHTML = ''; + !v_carousel.append(v_result); + + ProcedureReturn Result + EndProcedure + + ;=========================================================================== + ; Tabs + ;=========================================================================== + + Procedure Tab(Flags = #Tab_Default, Parent = #Null) + Protected Result + CheckParent() + + !v_result = document.createElement('ul'); + !v_result.className = "tabs"; + !v_parent.append(v_result); + + ProcedureReturn Result + EndProcedure + + Procedure TabAddItem(Title.s, Tab, ID.s, Flags = #Tab_Default) + Protected Result + + !v_result = document.createElement('li'); + !v_result.className = "tab"; + !v_result.innerHTML = '' + v_title + ''; + + If Flags & #Tab_Disabled + !v_result.classList.add("disabled"); + EndIf + + !v_tab.append(v_result); + ProcedureReturn Result + EndProcedure + + ;=========================================================================== + ; Modal + ;=========================================================================== + + Procedure Modal(Flags = #Modal_Default) + Protected Result, ID.s + + !v_result = document.createElement('div'); + !v_result.className = "modal"; + + ; MaterializeCSS 2.1.1+ uses the Popover API + !v_result.setAttribute('popover', ''); + + If Flags & #Modal_FixedFooter + !v_result.classList.add("modal-fixed-footer"); + EndIf + + If Flags & #Modal_BottomSheet + !v_result.classList.add("bottom-sheet"); + EndIf + + ; Modal must be added directly to body, outside of main content + !document.body.appendChild(v_result); + + ; Store reference for ModalContent/ModalFooter + !materialsb$g_current_modal = v_result; + + ProcedureReturn Result + EndProcedure + + Procedure ModalHeader(Text.s, Parent = #Null) + Protected Result + + If Parent = #Null + !v_parent = materialsb$g_current_modal; + EndIf + + !v_result = document.createElement('div'); + !v_result.className = "modal-header"; + !v_result.innerHTML = v_text; + !v_parent.appendChild(v_result); + + ProcedureReturn Result + EndProcedure + + Procedure ModalContent(Parent = #Null) + Protected Result + + If Parent = #Null + !v_parent = materialsb$g_current_modal; + EndIf + + !v_result = document.createElement('div'); + !v_result.className = "modal-content"; + !v_parent.appendChild(v_result); + + ; Set as current parent for adding content + PushParent() + current_parent = Result + + ProcedureReturn Result + EndProcedure + + Procedure ModalFooter(Parent = #Null) + Protected Result + + If Parent = #Null + !v_parent = materialsb$g_current_modal; + EndIf + + !v_result = document.createElement('div'); + !v_result.className = "modal-footer"; + !v_parent.appendChild(v_result); + + ; Set as current parent for adding buttons + PushParent() + current_parent = Result + + ProcedureReturn Result + EndProcedure + + Procedure ModalOpen(ModalElement) + !v_modalelement.showPopover(); + EndProcedure + + Procedure ModalClose(ModalElement) + !v_modalelement.hidePopover(); + EndProcedure + + ;=========================================================================== + ; Toast + ;=========================================================================== + + Procedure Toast(Text.s, Duration = 4000, Flags = #Toast_Default, Color.s = "") + Protected Classes.s = "" + + If Flags & #Toast_Rounded + Classes = "rounded" + EndIf + + ; Add color class if specified + If Color <> "" + If Classes <> "" + Classes + " " + EndIf + Classes + Color + EndIf + + ; toast changed in 2.1.1 See: github.com/materializecss/materialize/issues/604 + !new M.Toast({ + ! text: v_text, + ! classes: v_classes, + ! displayLength: v_duration + !}); + EndProcedure + + Procedure ToastDismissAll() + !M.Toast.dismissAll(); + EndProcedure + + ;=========================================================================== + ; Forms + ;=========================================================================== + + Procedure TextInput(Label.s = "", Placeholder.s = "", Flags = #Input_Default, Parent = #Null) + Protected Result, InputType.s = "text" + CheckParent() + + ; Determine input type from flags + If Flags & #Input_Password + InputType = "password" + ElseIf Flags & #Input_Email + InputType = "email" + ElseIf Flags & #Input_Number + InputType = "number" + ElseIf Flags & #Input_Tel + InputType = "tel" + ElseIf Flags & #Input_Url + InputType = "url" + ElseIf Flags & #Input_Date + InputType = "date" + ElseIf Flags & #Input_Time + InputType = "time" + EndIf + + ; Create wrapper div + !var _wrapper = document.createElement('div'); + !_wrapper.className = "input-field"; + + If Flags & #Input_Outlined + !_wrapper.classList.add("outlined"); + EndIf + + ; Create input element + !v_result = document.createElement('input'); + !v_result.type = v_inputtype; + + If Placeholder <> "" + !v_result.placeholder = v_placeholder; + EndIf + + If Flags & #Input_Disabled + !v_result.disabled = true; + EndIf + If Flags & #Input_Readonly + !v_result.readOnly = true; + EndIf + + !_wrapper.append(v_result); + + ; Create label if provided + If Label <> "" + !var _label = document.createElement('label'); +; !_label.htmlFor = v_id; + !_label.innerHTML = v_label; + !_wrapper.append(_label); + EndIf + + !v_parent.append(_wrapper); + ProcedureReturn Result + EndProcedure + + Procedure Textarea(Label.s = "", Placeholder.s = "", Flags = #Textarea_Default, Parent = #Null) + Protected Result + CheckParent() + + ; Create wrapper div + !var _wrapper = document.createElement('div'); + !_wrapper.className = "input-field"; + + If Flags & #Textarea_Outlined + !_wrapper.classList.add("outlined"); + EndIf + + ; Create textarea element + !v_result = document.createElement('textarea'); + !v_result.className = "materialsb-textarea"; + + If Placeholder <> "" + !v_result.placeholder = v_placeholder; + EndIf + + If Flags & #Textarea_Disabled + !v_result.disabled = true; + EndIf + If Flags & #Textarea_Readonly + !v_result.readOnly = true; + EndIf + + !_wrapper.append(v_result); + + ; Create label if provided + If Label <> "" +; !var _label = document.createElement('label'); +; !_label.htmlFor = v_id; +; !_label.innerHTML = v_label; +; !_wrapper.append(_label); + EndIf + + !v_parent.append(_wrapper); + ProcedureReturn Result + EndProcedure + + Procedure Checkbox(Label.s, Flags = #Checkbox_Default, Parent = #Null) + Protected Result + CheckParent() + + ; Create label wrapper (MaterialSB structure) + !var _label = document.createElement('label'); + + ; Create checkbox input + !v_result = document.createElement('input'); + !v_result.type = "checkbox"; + + If Flags & #Checkbox_Filled + !v_result.classList.add("filled-in"); + EndIf + If Flags & #Checkbox_Checked + !v_result.checked = true; + EndIf + If Flags & #Checkbox_Disabled + !v_result.disabled = true; + EndIf + + !_label.append(v_result); + + ; Create span for label text + !var _span = document.createElement('span'); + !_span.innerHTML = v_label; + !_label.append(_span); + + ; Wrap in p for proper spacing + !var _p = document.createElement('p'); + !_p.append(_label); + + !v_parent.append(_p); + ProcedureReturn Result + EndProcedure + + Procedure Radio(Name.s, Label.s, Flags = #Radio_Default, Parent = #Null) + Protected Result + CheckParent() + + ; Create label wrapper + !var _label = document.createElement('label'); + + ; Create radio input + !v_result = document.createElement('input'); + !v_result.type = "radio"; + !v_result.name = v_name; + + If Flags & #Radio_WithGap + !v_result.classList.add("with-gap"); + EndIf + If Flags & #Radio_Checked + !v_result.checked = true; + EndIf + If Flags & #Radio_Disabled + !v_result.disabled = true; + EndIf + + !_label.append(v_result); + + ; Create span for label text + !var _span = document.createElement('span'); + !_span.innerHTML = v_label; + !_label.append(_span); + + ; Wrap in p for proper spacing + !var _p = document.createElement('p'); + !_p.append(_label); + + !v_parent.append(_p); + ProcedureReturn Result + EndProcedure + + Procedure Switch(LabelOff.s, LabelOn.s, Flags = #Switch_Default, Parent = #Null) + Protected Result + CheckParent() + + ; Create switch wrapper + !var _wrapper = document.createElement('div'); + !_wrapper.className = "switch"; + + ; Create label + !var _label = document.createElement('label'); + !_label.innerHTML = v_labeloff; + + ; Create checkbox input + !v_result = document.createElement('input'); + !v_result.type = "checkbox"; + + If Flags & #Switch_Checked + !v_result.checked = true; + EndIf + If Flags & #Switch_Disabled + !v_result.disabled = true; + EndIf + + !_label.append(v_result); + + ; Create lever span + !var _lever = document.createElement('span'); + !_lever.className = "lever"; + !_label.append(_lever); + + ; Add "on" label text + !_label.innerHTML += v_labelon; + + !_wrapper.append(_label); + !v_parent.append(_wrapper); + ProcedureReturn Result + EndProcedure + + Procedure Dropdown(Label.s = "", Flags = #Dropdown_Default, Parent = #Null) + Protected Result + CheckParent() + + ; Create wrapper div + !var _wrapper = document.createElement('div'); + !_wrapper.className = "input-field"; + + If Flags & #Dropdown_Outlined + !_wrapper.classList.add("outlined"); + EndIf + + ; Create select element + !v_result = document.createElement('select'); + + If Flags & #Dropdown_Multiple + !v_result.multiple = true; + EndIf + If Flags & #Dropdown_Disabled + !v_result.disabled = true; + EndIf + + !_wrapper.append(v_result); + + ; Create label if provided + If Label <> "" + !var _label = document.createElement('label'); + !_label.innerHTML = v_label; + !_wrapper.append(_label); + EndIf + + !v_parent.append(_wrapper); + ProcedureReturn Result + EndProcedure + + Procedure DropdownAddOption(Text.s, Value.s, SelectElement, Selected = #False) + Protected Result + + !v_result = document.createElement('option'); + !v_result.value = v_value; + !v_result.innerHTML = v_text; + + If Selected + !v_result.selected = true; + EndIf + + !v_selectelement.append(v_result); + ProcedureReturn Result + EndProcedure + + Procedure Range(Min = 0, Max = 100, Value = 50, Flags = #Range_Default, Parent = #Null) + Protected Result + CheckParent() + + ; Create wrapper + !var _wrapper = document.createElement('p'); + !_wrapper.className = "range-field"; + + ; Create range input + !v_result = document.createElement('input'); + !v_result.type = "range"; + !v_result.min = v_min; + !v_result.max = v_max; + !v_result.value = v_value; + + If Flags & #Range_Disabled + !v_result.disabled = true; + EndIf + + !_wrapper.append(v_result); + !v_parent.append(_wrapper); + ProcedureReturn Result + EndProcedure + + Procedure InputSetCallback(InputElement, *Callback) + !v_inputelement.addEventListener('input', p_callback); + EndProcedure + + ;=========================================================================== + ; Private Procedures + ;=========================================================================== + + Procedure Handler_Download(url.s, success) + If success + Select url + Case "LocalFiles/CSS/materialize.min.css" + LoadScript("LocalFiles/CSS/material-icons.css", @Handler_Download(), #PB_Script_CSS) + + Case "LocalFiles/CSS/material-icons.css" + LoadScript("LocalFiles/JS/materialize.min.js", @Handler_Download(), #PB_Script_JavaScript) + + Case "LocalFiles/JS/materialize.min.js" + ; Remove SpiderBasic's default styles + !$('link[href="/spiderbasic/libraries/javascript/dojo/themes/flat/flat.css"]').remove(); + !$('link[href="/spiderbasic/libraries/javascript/dojo/dgrid/css/dgrid.css"]').remove(); + !$('link[href="/spiderbasic/libraries/javascript/themes/flat/window.css"]').remove(); + !document.body.removeAttribute('id'); + !document.body.removeAttribute('class'); + !document.body.removeAttribute('oncontextmenu'); + !document.body.removeAttribute('onload'); + + ; Initialize + SetDarkTheme(#True) + !document.body.style.minHeight = '100vh'; + + ; Create main container + !materialsb$g_current_parent = document.createElement('main'); + !document.body.append(materialsb$g_current_parent); + + ; Remove SB's scroll event + ! $(document).off('scroll'); + + ; Call user callback + !materialsb$g_download_callback(1); + EndSelect + Else + !materialsb$g_download_callback(0); + EndIf + EndProcedure + +EndModule + +; IDE Options = SpiderBasic 3.10 (Windows - x86) +; CursorPosition = 516 +; Folding = IACAAAAAAAAAAAAg +; iOSAppOrientation = 0 +; AndroidAppCode = 0 +; AndroidAppOrientation = 0 +; EnableXP +; DPIAware +; CompileSourceDirectory \ No newline at end of file diff --git a/MaterialSB.sbp b/MaterialSB.sbp new file mode 100644 index 0000000..bb1d5f6 --- /dev/null +++ b/MaterialSB.sbp @@ -0,0 +1,142 @@ + + + +
    + + Implement Materialize as SB gadgets +
    +
    + + + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +     diff --git a/Playground.sb b/Playground.sb new file mode 100644 index 0000000..b3f049c --- /dev/null +++ b/Playground.sb @@ -0,0 +1,40 @@ +; /!\ this is where I test the feature as I implement them /!\ + +; https://picsum.photos/300/200 Quick image! + +IncludeFile "MaterialSB.sbi" + +Procedure Main(Success) + If Success + ; Create and initialize a carousel + carousel = MaterialSB::Carousel() + MaterialSB::CarouselAddItem(carousel, "https://picsum.photos/300/200", "#") + MaterialSB::CarouselAddItem(carousel, "https://picsum.photos/300/200", "#") + MaterialSB::CarouselAddItem(carousel, "https://picsum.photos/300/200", "#") + MaterialSB::Init(carousel, #Null) + + ; Create and initialize a dropdown + dropdown = MaterialSB::Dropdown("Select an option") + MaterialSB::DropdownAddOption("Option 1", "1", dropdown) + MaterialSB::DropdownAddOption("Option 2", "2", dropdown) + MaterialSB::DropdownAddOption("Option 3", "3", dropdown, #True) ; Selected + MaterialSB::Init(dropdown, #Null) + + ; Create and initialize a sidenav + sidenav = MaterialSB::Sidenav() + MaterialSB::SidenavAddLink("Home", "/", "home") + MaterialSB::SidenavAddLink("About", "/about", "info") + MaterialSB::Init(sidenav, #Null) + EndIf +EndProcedure + +MaterialSB::Download(@Main()) +; IDE Options = SpiderBasic 3.10 (Windows - x86) +; CursorPosition = 3 +; Folding = - +; iOSAppOrientation = 0 +; AndroidAppCode = 0 +; AndroidAppOrientation = 0 +; EnableXP +; DPIAware +; CompileSourceDirectory \ No newline at end of file