/* Textures */ :root { /* Icons Background */ --icons-hover: url('../svg/Generic/Icon_Hover_Background.svg'); /* */ /* Comp Buttons */ --red-button-texture-default-inline: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB2aWV3Qm94PSIwIDAgMzE1IDU5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zMTUgMEgzMTQuMzE4SDI5MS44MThDMjg3LjcyNyAxLjY2NjY3IDI3OSA1IDI3Ni44MTggNUMyNzQuNjM2IDUgMjYyLjcyNyA0IDI1Ny4wNDUgMy41TDI3NS40NTUgNEwyODAuMjI3IDFWMEgxMDVMMTA2LjM2NCAxTDEwOS4wOTEgNC41TDEwNi4zNjQgMkw4My4xODE4IDBIMy40MDkwOUwyLjA0NTQ1IDAuNUwxLjM2MzY0IDJMMCA0VjIyTDAuNjgxODE4IDI0LjVMMi4wNDU0NSAyNi41VjI4TDAgMzBWMzNMMS4zNjM2NCAzNUwyLjcyNzI3IDM3VjM5TDEuMzYzNjQgNDFMMCA0MlY1MkwwLjY4MTgxOCA1Mi41TDEuMzYzNjQgNTMuNUwyLjcyNzI3IDU0SDc5LjA5MDlMODUuOTA5MSA1Mi41TDg3Ljk1NDUgNTAuNUw5MC42ODE4IDQ2LjVMODkuMzE4MiA1MVY1My41TDg3Ljk1NDUgNTRIMTQ4LjYzNkwxNTguODY0IDQ3LjVMMTY5IDU0SDI0MEwyNTcuMDQ1IDUwLjVMMjc5LjU0NSA0OS41TDI4Ny4wNDUgNTJMMjg5LjA5MSA1NEgzMTMuNjM2TDMxNSA1My41VjI5QzMxNSAyOC42IDMxMy42MzYgMjcuMTY2NyAzMTIuOTU1IDI2LjVWMjAuNUwzMTMuNjM2IDI2TDMxNSAyNi41VjQuNUwzMTQuMzE4IDJMMzE1IDEuNVYwWk0yODcuMDQ1IDU0SDI1Ni4zNjRMMjU3LjA0NSA1My41TDI3OC4xODIgNTEuNUwyODUgNTIuNUwyODcuMDQ1IDU0WiIgZmlsbD0idXJsKCNwYWludDBfbGluZWFyXzQwNjFfMjMyMSkiLz4KICAgIDxwYXRoIGQ9Ik0xNjkuNzczIDU4LjVIMTQ3Ljk1NUwxNTguODY0IDUxLjVMMTY5Ljc3MyA1OC41WiIgZmlsbD0idXJsKCNwYWludDFfbGluZWFyXzQwNjFfMjMyMSkiLz4KICAgIDxkZWZzPgogICAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl80MDYxXzIzMjEiIHgxPSIwIiB5MT0iMjguMjUiIHgyPSIzMTUiIHkyPSIyOC4yNSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRTAzRTY2Ii8+CiAgICAgICAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0M4MjE0QyIvPgogICAgICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICAgICAgPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDFfbGluZWFyXzQwNjFfMjMyMSIgeDE9IjAiIHkxPSIyOC4yNSIgeDI9IjMxNSIgeTI9IjI4LjI1IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNFMDNFNjYiLz4KICAgICAgICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjQzgyMTRDIi8+CiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDwvZGVmcz4KPC9zdmc+Cg=='); --red-button-texture-hover-inline: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB2aWV3Qm94PSIwIDAgMzE1IDU5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0iTTE1OC44NjQgNTEuNUwxNjkuNzczIDU4LjVIMTQ3Ljk1NUwxNTguODY0IDUxLjVaIiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfNDA2MV8zNjkzKSIvPgogICAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zMTQuMzE4IDBIMzE1VjEuNUwzMTQuMzE4IDJMMzE1IDQuNVYyNi41TDMxMy42MzYgMjZMMzEyLjk1NSAyMC41VjI2LjVDMzEzLjYzNiAyNy4xNjY3IDMxNSAyOC42IDMxNSAyOVY1My41TDMxMy42MzYgNTRIMjg5LjA5MUwyODcuMDQ1IDUyTDI3OS41NDUgNDkuNUwyNTcuMDQ1IDUwLjVMMjQwIDU0SDE2OUwxNTguODY0IDQ3LjVMMTQ4LjYzNiA1NEg4Ny45NTQ1TDg5LjMxODIgNTMuNVY1MUw5MC42ODE4IDQ2LjVMODcuOTU0NSA1MC41TDg1LjkwOTEgNTIuNUw3OS4wOTA5IDU0SDIuNzI3MjdMMS4zNjM2NCA1My41TDAuNjgxODE4IDUyLjVMMCA1MlY0MkwxLjM2MzY0IDQxTDIuNzI3MjcgMzlWMzdMMS4zNjM2NCAzNUwwIDMzVjMwTDIuMDQ1NDUgMjhWMjYuNUwwLjY4MTgxOCAyNC41TDAgMjJWNEwxLjM2MzY0IDJMMi4wNDU0NSAwLjVMMy40MDkwOSAwSDgzLjE4MThMMTA2LjM2NCAyTDEwOS4wOTEgNC41TDEwNi4zNjQgMUwxMDUgMEgyODAuMjI3VjFMMjc1LjQ1NSA0TDI1Ny4wNDUgMy41QzI2Mi43MjcgNCAyNzQuNjM2IDUgMjc2LjgxOCA1QzI3OSA1IDI4Ny43MjcgMS42NjY2NyAyOTEuODE4IDBIMzE0LjMxOFpNMjU2LjM2NCA1NEgyODcuMDQ1TDI4NSA1Mi41TDI3OC4xODIgNTEuNUwyNTcuMDQ1IDUzLjVMMjU2LjM2NCA1NFoiIGZpbGw9InVybCgjcGFpbnQxX2xpbmVhcl80MDYxXzM2OTMpIi8+CiAgICA8ZGVmcz4KICAgICAgICA8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXJfNDA2MV8zNjkzIiB4MT0iMCIgeTE9IjI4LjI1IiB4Mj0iMzE1IiB5Mj0iMjguMjUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0U1NjE4MiIvPgogICAgICAgICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNFMDNFNjYiLz4KICAgICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQxX2xpbmVhcl80MDYxXzM2OTMiIHgxPSIwIiB5MT0iMjguMjUiIHgyPSIzMTUiIHkyPSIyOC4yNSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRTU2MTgyIi8+CiAgICAgICAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0UwM0U2NiIvPgogICAgICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8L2RlZnM+Cjwvc3ZnPgo='); --red-button-texture-focused-inline: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB2aWV3Qm94PSIwIDAgMzE1IDU5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0iTTMxNC41IDI5LjA0NDJWNTMuMTUwOEwzMTMuNTQ4IDUzLjVIMjg5LjI5NUwyODcuMzk1IDUxLjY0MjVMMjg3LjMxMyA1MS41NjJMMjg3LjIwNCA1MS41MjU3TDI3OS43MDQgNDkuMDI1N0wyNzkuNjE2IDQ4Ljk5NjRMMjc5LjUyMyA0OS4wMDA1TDI1Ny4wMjMgNTAuMDAwNUwyNTYuOTg0IDUwLjAwMjNMMjU2Ljk0NSA1MC4wMTAyTDIzOS45NDkgNTMuNUgxNjkuMTQ3TDE1OS4xMzQgNDcuMDc5MUwxNTguODY1IDQ2LjkwNjhMMTU4LjU5NSA0Ny4wNzhMMTQ4LjQ5MSA1My41SDg5LjgxODJWNTEuMDc0MUw5MS4xNjAzIDQ2LjY0NUw5MC4yNjg3IDQ2LjIxODNMODcuNTY5NCA1MC4xNzczTDg1LjY2MTkgNTIuMDQyNEw3OS4wMzY2IDUzLjVIMi44MTYwNUwxLjY4NjM4IDUzLjA4NThMMS4wOTQ5MyA1Mi4yMTgzTDEuMDQ2NjQgNTIuMTQ3NUwwLjk3NzUgNTIuMDk2OEwwLjUgNTEuNzQ2NlY0Mi4yNTM0TDEuNjU5MzIgNDEuNDAzMkwxLjcyODQ1IDQxLjM1MjVMMS43NzY3NSA0MS4yODE3TDMuMTQwMzkgMzkuMjgxN0wzLjIyNzI3IDM5LjE1NDJWMzlWMzdWMzYuODQ1OEwzLjE0MDM5IDM2LjcxODNMMS43NzY3NSAzNC43MTgzTDAuNSAzMi44NDU4VjMwLjIxMDRMMi4zOTUwMSAyOC4zNTc1TDIuNTQ1NDUgMjguMjEwNFYyOFYyNi41VjI2LjM0NThMMi40NTg1NyAyNi4yMTgzTDEuMTQyMTUgMjQuMjg3NkwwLjUgMjEuOTMzVjQuMTU0MjNMMS43NzY3NSAyLjI4MTY3TDEuODAxIDIuMjQ2MUwxLjgxODgyIDIuMjA2OUwyLjQxNDA1IDAuODk3NDAxTDMuNDk3ODcgMC41SDgzLjE2MDNMMTA2LjE1MSAyLjQ4MzUzTDEwOC43NTMgNC44Njg1OEwxMDkuNDg1IDQuMTkyNjhMMTA2Ljc1OCAwLjY5MjY3NUwxMDYuNzE1IDAuNjM3ODc4TDEwNi42NTkgMC41OTY3OTdMMTA2LjUyNyAwLjVIMjc5LjcyN1YwLjcyMzcxN0wyNzUuMzE3IDMuNDk2MDdMMjU3LjA1OSAzLjAwMDE4TDI1Ny4wMDIgMy45OTgwOEMyNjIuNjY2IDQuNDk2NTEgMjc0LjYwOCA1LjUgMjc2LjgxOCA1LjVDMjc3LjQ0NCA1LjUgMjc4LjQ2MyA1LjI3MDI5IDI3OS42NDQgNC45MzQwMUMyODAuODQ3IDQuNTkxNTUgMjgyLjI4MSA0LjExOTEzIDI4My43NjggMy41OTY3NUMyODYuNyAyLjU2Njk1IDI4OS44NjIgMS4zMzUxNiAyOTEuOTE2IDAuNUgzMTQuMzE4SDMxNC41VjEuMjQ2NjNMMzE0LjAyMiAxLjU5NjhMMzEzLjc0NSAxLjgwMDAyTDMxMy44MzYgMi4xMzE1NkwzMTQuNSA0LjU2N1YyNS43ODQxTDMxNC4wOTUgMjUuNjM1NkwzMTMuNDUxIDIwLjQzODVMMzEyLjQ1NSAyMC41VjI2LjVWMjYuNzEwNEwzMTIuNjA1IDI2Ljg1NzVDMzEyLjk0IDI3LjE4NDYgMzEzLjQ0MSAyNy42OTkzIDMxMy44NTUgMjguMTc3NUMzMTQuMDYzIDI4LjQxNzYgMzE0LjI0MSAyOC42MzkxIDMxNC4zNjUgMjguODE4QzMxNC40MjcgMjguOTA4IDMxNC40NjcgMjguOTc3IDMxNC40OTEgMjkuMDI1MkMzMTQuNDk1IDI5LjAzMjYgMzE0LjQ5OCAyOS4wMzg5IDMxNC41IDI5LjA0NDJaTTE0OS42NiA1OEwxNTguODY0IDUyLjA5NDFMMTY4LjA2OCA1OEgxNDkuNjZaTTI4NS41MTggNTMuNUgyNjIuMzUzTDI3OC4xNjkgNTIuMDAzNUwyODQuODA1IDUyLjk3NjdMMjg1LjUxOCA1My41WiIgZmlsbD0idXJsKCNwYWludDBfbGluZWFyXzQwNjFfMzk3NikiIHN0cm9rZT0iI0Y1RjVGNSIvPgogICAgPGRlZnM+CiAgICAgICAgPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyXzQwNjFfMzk3NiIgeDE9IjAiIHkxPSIyOC4yNSIgeDI9IjMxNSIgeTI9IjI4LjI1IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNFNTYxODIiLz4KICAgICAgICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjRTAzRTY2Ii8+CiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDwvZGVmcz4KPC9zdmc+Cg=='); --red-button-texture-pressed-inline: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB2aWV3Qm94PSIwIDAgMzE1IDU5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0iTTE1OC44NjQgNTEuNUwxNjkuNzczIDU4LjVIMTQ3Ljk1NUwxNTguODY0IDUxLjVaIiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfNDA2MV8zOTc3KSIvPgogICAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zMTQuMzE4IDBIMzE1VjEuNUwzMTQuMzE4IDJMMzE1IDQuNVYyNi41TDMxMy42MzYgMjZMMzEyLjk1NSAyMC41VjI2LjVDMzEzLjYzNiAyNy4xNjY3IDMxNSAyOC42IDMxNSAyOVY1My41TDMxMy42MzYgNTRIMjg5LjA5MUwyODcuMDQ1IDUyTDI3OS41NDUgNDkuNUwyNTcuMDQ1IDUwLjVMMjQwIDU0SDE2OUwxNTguODY0IDQ3LjVMMTQ4LjYzNiA1NEg4Ny45NTQ1TDg5LjMxODIgNTMuNVY1MUw5MC42ODE4IDQ2LjVMODcuOTU0NSA1MC41TDg1LjkwOTEgNTIuNUw3OS4wOTA5IDU0SDIuNzI3MjdMMS4zNjM2NCA1My41TDAuNjgxODE4IDUyLjVMMCA1MlY0MkwxLjM2MzY0IDQxTDIuNzI3MjcgMzlWMzdMMS4zNjM2NCAzNUwwIDMzVjMwTDIuMDQ1NDUgMjhWMjYuNUwwLjY4MTgxOCAyNC41TDAgMjJWNEwxLjM2MzY0IDJMMi4wNDU0NSAwLjVMMy40MDkwOSAwSDgzLjE4MThMMTA2LjM2NCAyTDEwOS4wOTEgNC41TDEwNi4zNjQgMUwxMDUgMEgyODAuMjI3VjFMMjc1LjQ1NSA0TDI1Ny4wNDUgMy41QzI2Mi43MjcgNCAyNzQuNjM2IDUgMjc2LjgxOCA1QzI3OSA1IDI4Ny43MjcgMS42NjY2NyAyOTEuODE4IDBIMzE0LjMxOFpNMjU2LjM2NCA1NEgyODcuMDQ1TDI4NSA1Mi41TDI3OC4xODIgNTEuNUwyNTcuMDQ1IDUzLjVMMjU2LjM2NCA1NFoiIGZpbGw9InVybCgjcGFpbnQxX2xpbmVhcl80MDYxXzM5NzcpIi8+CiAgICA8ZGVmcz4KICAgICAgICA8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXJfNDA2MV8zOTc3IiB4MT0iMCIgeTE9IjI4LjI1IiB4Mj0iMzE1IiB5Mj0iMjguMjUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0M4MjE0QyIvPgogICAgICAgICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM4QzE3MzQiLz4KICAgICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQxX2xpbmVhcl80MDYxXzM5NzciIHgxPSIwIiB5MT0iMjguMjUiIHgyPSIzMTUiIHkyPSIyOC4yNSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjQzgyMTRDIi8+CiAgICAgICAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzhDMTczNCIvPgogICAgICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8L2RlZnM+Cjwvc3ZnPgo='); --red-button-texture-disabled-inline: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB2aWV3Qm94PSIwIDAgMzE1IDU5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zMTUgMEgzMTQuMzE4SDI5MS44MThDMjg3LjcyNyAxLjY2NjY3IDI3OSA1IDI3Ni44MTggNUMyNzQuNjM2IDUgMjYyLjcyNyA0IDI1Ny4wNDUgMy41TDI3NS40NTUgNEwyODAuMjI3IDFWMEgxMDVMMTA2LjM2NCAxTDEwOS4wOTEgNC41TDEwNi4zNjQgMkw4My4xODE4IDBIMy40MDkwOUwyLjA0NTQ1IDAuNUwxLjM2MzY0IDJMMCA0VjIyTDAuNjgxODE4IDI0LjVMMi4wNDU0NSAyNi41VjI4TDAgMzBWMzNMMS4zNjM2NCAzNUwyLjcyNzI3IDM3VjM5TDEuMzYzNjQgNDFMMCA0MlY1MkwwLjY4MTgxOCA1Mi41TDEuMzYzNjQgNTMuNUwyLjcyNzI3IDU0SDc5LjA5MDlMODUuOTA5MSA1Mi41TDg3Ljk1NDUgNTAuNUw5MC42ODE4IDQ2LjVMODkuMzE4MiA1MVY1My41TDg3Ljk1NDUgNTRIMTQ4LjYzNkwxNTguODY0IDQ3LjVMMTY5IDU0SDI0MEwyNTcuMDQ1IDUwLjVMMjc5LjU0NSA0OS41TDI4Ny4wNDUgNTJMMjg5LjA5MSA1NEgzMTMuNjM2TDMxNSA1My41VjI5QzMxNSAyOC42IDMxMy42MzYgMjcuMTY2NyAzMTIuOTU1IDI2LjVWMjAuNUwzMTMuNjM2IDI2TDMxNSAyNi41VjQuNUwzMTQuMzE4IDJMMzE1IDEuNVYwWk0yODcuMDQ1IDU0SDI1Ni4zNjRMMjU3LjA0NSA1My41TDI3OC4xODIgNTEuNUwyODUgNTIuNUwyODcuMDQ1IDU0WiIgZmlsbD0idXJsKCNwYWludDBfbGluZWFyXzQwNjFfMjMyMSkiLz4KICAgIDxwYXRoIGQ9Ik0xNjkuNzczIDU4LjVIMTQ3Ljk1NUwxNTguODY0IDUxLjVMMTY5Ljc3MyA1OC41WiIgZmlsbD0idXJsKCNwYWludDFfbGluZWFyXzQwNjFfMjMyMSkiLz4KICAgIDxkZWZzPgogICAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl80MDYxXzIzMjEiIHgxPSIwIiB5MT0iMjguMjUiIHgyPSIzMTUiIHkyPSIyOC4yNSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRTAzRTY2Ii8+CiAgICAgICAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0M4MjE0QyIvPgogICAgICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICAgICAgPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDFfbGluZWFyXzQwNjFfMjMyMSIgeDE9IjAiIHkxPSIyOC4yNSIgeDI9IjMxNSIgeTI9IjI4LjI1IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNFMDNFNjYiLz4KICAgICAgICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjQzgyMTRDIi8+CiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDwvZGVmcz4KPC9zdmc+Cg=='); --red-button-texture-disabled-hover-inline: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB2aWV3Qm94PSIwIDAgMzE1IDU5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zMTUgMEgzMTQuMzE4SDI5MS44MThDMjg3LjcyNyAxLjY2NjY3IDI3OSA1IDI3Ni44MTggNUMyNzQuNjM2IDUgMjYyLjcyNyA0IDI1Ny4wNDUgMy41TDI3NS40NTUgNEwyODAuMjI3IDFWMEgxMDVMMTA2LjM2NCAxTDEwOS4wOTEgNC41TDEwNi4zNjQgMkw4My4xODE4IDBIMy40MDkwOUwyLjA0NTQ1IDAuNUwxLjM2MzY0IDJMMCA0VjIyTDAuNjgxODE4IDI0LjVMMi4wNDU0NSAyNi41VjI4TDAgMzBWMzNMMS4zNjM2NCAzNUwyLjcyNzI3IDM3VjM5TDEuMzYzNjQgNDFMMCA0MlY1MkwwLjY4MTgxOCA1Mi41TDEuMzYzNjQgNTMuNUwyLjcyNzI3IDU0SDc5LjA5MDlMODUuOTA5MSA1Mi41TDg3Ljk1NDUgNTAuNUw5MC42ODE4IDQ2LjVMODkuMzE4MiA1MVY1My41TDg3Ljk1NDUgNTRIMTQ4LjYzNkwxNTguODY0IDQ3LjVMMTY5IDU0SDI0MEwyNTcuMDQ1IDUwLjVMMjc5LjU0NSA0OS41TDI4Ny4wNDUgNTJMMjg5LjA5MSA1NEgzMTMuNjM2TDMxNSA1My41VjI5QzMxNSAyOC42IDMxMy42MzYgMjcuMTY2NyAzMTIuOTU1IDI2LjVWMjAuNUwzMTMuNjM2IDI2TDMxNSAyNi41VjQuNUwzMTQuMzE4IDJMMzE1IDEuNVYwWk0yODcuMDQ1IDU0SDI1Ni4zNjRMMjU3LjA0NSA1My41TDI3OC4xODIgNTEuNUwyODUgNTIuNUwyODcuMDQ1IDU0WiIgZmlsbD0idXJsKCNwYWludDBfbGluZWFyXzQwNjFfMjMyMSkiLz4KICAgIDxwYXRoIGQ9Ik0xNjkuNzczIDU4LjVIMTQ3Ljk1NUwxNTguODY0IDUxLjVMMTY5Ljc3MyA1OC41WiIgZmlsbD0idXJsKCNwYWludDFfbGluZWFyXzQwNjFfMjMyMSkiLz4KICAgIDxkZWZzPgogICAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl80MDYxXzIzMjEiIHgxPSIwIiB5MT0iMjguMjUiIHgyPSIzMTUiIHkyPSIyOC4yNSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRTAzRTY2Ii8+CiAgICAgICAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0M4MjE0QyIvPgogICAgICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICAgICAgPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDFfbGluZWFyXzQwNjFfMjMyMSIgeDE9IjAiIHkxPSIyOC4yNSIgeDI9IjMxNSIgeTI9IjI4LjI1IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNFMDNFNjYiLz4KICAgICAgICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjQzgyMTRDIi8+CiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDwvZGVmcz4KPC9zdmc+Cg=='); --red-button-texture-default-file: url('../svg/Generic/Button_Default_Texture.svg'); --red-button-texture-hover-file: url('../svg/Generic/Button_Hover_Texture.svg'); --red-button-texture-focused-file: url('../svg/Generic/Button_Focus_Texture.svg'); --red-button-texture-pressed-file: url('../svg/Generic/Button_Pressed_Texture.svg'); --red-button-texture-disabled-file: url('../svg/Generic/Button_Disabled_Texture.svg'); --red-button-texture-disabled-hover-file: url('../svg/Generic/Button_Disabled_Texture.svg'); --red-button-texture-default: var(--red-button-texture-default-inline); --red-button-texture-hover: var(--red-button-texture-hover-inline); --red-button-texture-focused: var(--red-button-texture-focused-inline); --red-button-texture-pressed: var(--red-button-texture-pressed-inline); --red-button-texture-disabled: var(--red-button-texture-disabled-inline); --red-button-texture-disabled-hover: var(--red-button-texture-disabled-hover-inline); --dark-button-texture-default-inline: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB2aWV3Qm94PSIwIDAgMzE1IDU0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMxNSAwSDMxNC4zMThIMjkxLjgxOEMyODcuNzI3IDEuNTM4NDYgMjc5IDQuNjE1MzggMjc2LjgxOCA0LjYxNTM4QzI3NC42MzYgNC42MTUzOCAyNjIuNzI3IDMuNjkyMzEgMjU3LjA0NSAzLjIzMDc3TDI3NS40NTUgMy42OTIzMUwyODAuMjI3IDAuOTIzMDc3VjBIMTA1TDEwNi4zNjQgMC45MjMwNzdMMTA5LjA5MSA0LjE1Mzg1TDEwNi4zNjQgMS44NDYxNUw4My4xODE4IDBIMy40MDkwOUwyLjA0NTQ1IDAuNDYxNTM4TDEuMzYzNjQgMS44NDYxNUwwIDMuNjkyMzFWMjAuMzA3N0wwLjY4MTgxOCAyMi42MTU0TDIuMDQ1NDUgMjQuNDYxNVYyNS44NDYyTDAgMjcuNjkyM1YzMC40NjE1TDEuMzYzNjQgMzIuMzA3N0wyLjcyNzI3IDM0LjE1MzhWMzZMMS4zNjM2NCAzNy44NDYyTDAgMzguNzY5MlY0OEwwLjY4MTgxOCA0OC40NjE1TDEuMzYzNjQgNDkuMzg0NkwyLjcyNzI3IDQ5Ljg0NjJINzkuMDkwOUw4NS45MDkxIDQ4LjQ2MTVMODcuOTU0NSA0Ni42MTU0TDkwLjY4MTggNDIuOTIzMUw4OS4zMTgyIDQ3LjA3NjlWNDkuMzg0Nkw4Ny45NTQ1IDQ5Ljg0NjJIMTQ4LjYzNkwxNTguODY0IDQzLjg0NjJMMTY5IDQ5Ljg0NjJIMjQwTDI1Ny4wNDUgNDYuNjE1NEwyNzkuNTQ1IDQ1LjY5MjNMMjg3LjA0NSA0OEwyODkuMDkxIDQ5Ljg0NjJIMzEzLjYzNkwzMTUgNDkuMzg0NlYyNi43NjkyQzMxNSAyNi40IDMxMy42MzYgMjUuMDc2OSAzMTIuOTU1IDI0LjQ2MTVWMTguOTIzMUwzMTMuNjM2IDI0TDMxNSAyNC40NjE1VjQuMTUzODVMMzE0LjMxOCAxLjg0NjE1TDMxNSAxLjM4NDYyVjBaTTI4Ny4wNDUgNDkuODQ2MkgyNTYuMzY0TDI1Ny4wNDUgNDkuMzg0NkwyNzguMTgyIDQ3LjUzODVMMjg1IDQ4LjQ2MTVMMjg3LjA0NSA0OS44NDYyWiIgZmlsbD0iIzI1MkUzNSIvPgo8cGF0aCBkPSJNMTY5Ljc3MyA1NEgxNDcuOTU1TDE1OC44NjQgNDcuNTM4NUwxNjkuNzczIDU0WiIgZmlsbD0iIzI1MkUzNSIvPgo8L3N2Zz4K'); --dark-round-button-texture-default-inline: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDkiIGhlaWdodD0iNDkiIHZpZXdCb3g9IjAgMCA0OSA0OSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgb3BhY2l0eT0iMC4yNSI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMS43NDQ1NSAzMy43NDcxQzMuNjExNDEgMzguMzU5IDYuODcwMjEgNDIuMjU4NiAxMSA0NC45MjQ4VjQzLjc0NzFMMTEuNSA0MS4yNDcxTDEwIDM4Ljc0NzFMNS41IDM3LjI0NzFMMS43NDQ1NSAzMy43NDcxWiIgZmlsbD0iIzI1MkUzNSIvPgo8cGF0aCBkPSJNNDcgMzIuMjQ3MUw0NSAzMy4yNDcxTDQ2LjMzNjQgMzYuMjQ3MUM0Ni43ODY5IDM1LjM3NSA0Ny4xODU2IDM0LjQ3MTYgNDcuNTI4MyAzMy41NDEyQzQ3LjkyMDMgMzIuNDc2NiA0OC4yMzkxIDMxLjM3NjUgNDguNDc4NCAzMC4yNDcxTDQ3IDMyLjI0NzFaIiBmaWxsPSIjMjUyRTM1Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAyNC43NDcxQzAgMjIuNTgzMiAwLjI4NjM4OSAyMC40ODYxIDAuODIzMzMyIDE4LjQ5MThMMiAxNy43NDcxSDIuNUwzIDE4LjQ5MThMMi41IDE3LjI0NzFMMiAxNi43NDcxTDEuNDQ4MTUgMTYuNTE3NUMxLjYxODI0IDE2LjA1MTUgMS44MDIzNiAxNS41OTIzIDIgMTUuMTQwM0wyLjUgMTUuMjQ3MUwzIDE0Ljc0NzFWMTQuMjQ3MVYxMy43NDcxTDMuMjEwNzcgMTIuNzQ3MUM3LjM2MDQ5IDUuNTczNTEgMTUuMTE2NiAwLjc0NzEzMSAyNCAwLjc0NzEzMUMyNS42NzgyIDAuNzQ3MTMxIDI3LjMxNjEgMC45MTkzNjkgMjguODk3MSAxLjI0NzEzTDI5LjUgMy43NDcxM0wzMC41IDUuMjQ3MTNMMzAgNi43NDcxM0wzMSA1LjI0NzEzTDMwLjUgMy4yNDcxM0wzMS41IDEuOTQyMjdDNDEuMDgxOCA1LjA5MTY0IDQ4IDE0LjExMTUgNDggMjQuNzQ3MUM0OCAyNi40NjE3IDQ3LjgyMDIgMjguMTM0MyA0Ny40Nzg0IDI5Ljc0NzFMNDYgMzEuNzQ3MUw0NCAzMi43NDcxTDQ1LjMzNjQgMzUuNzQ3MUM0Mi43MTQgNDAuODIzMyAzOC4zMzMzIDQ0Ljg0MzcgMzMgNDcuMDAyNkwzMi4zNzAzIDQ2Ljc0NzFWNDcuMjQ3MUMzMi4wODI4IDQ3LjM1NDEgMzEuNzkyNiA0Ny40NTU4IDMxLjUgNDcuNTUyTDMxIDQ3LjI0NzFIMzAuNUwyOS41IDQ4LjExNEMyNy43MzM4IDQ4LjUyODEgMjUuODkyNSA0OC43NDcxIDI0IDQ4Ljc0NzFDMTkuOTMwMiA0OC43NDcxIDE2LjA5NyA0Ny43MzQxIDEyLjczODggNDUuOTQ2NUwxMi41IDQ0LjI0NzFMMTIuNzM4OCA0MC4yNDcxQzExLjk5MjUgMzkuMjQ3MSAxMC40IDM3LjI0NzEgMTAgMzcuMjQ3MUM5LjYgMzcuMjQ3MSA2LjgzMzMzIDM2LjU4MDUgNS41IDM2LjI0NzFMMS42MDI1NCAzMy4zODhDMC41Njc0OTggMzAuNzA2OSAwIDI3Ljc5MzMgMCAyNC43NDcxWiIgZmlsbD0iIzI1MkUzNSIvPgo8L2c+Cjwvc3ZnPgo='); --secondary-round-button-texture-default-inline: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB2aWV3Qm94PSIwIDAgMTI2IDE0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgZmlsdGVyPSJ1cmwoI2ZpbHRlcjBfZF80NTE1XzUwNzcpIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zMi45MTQ5IDY5QzM2LjAzNDEgNzYuNjg2NSA0MS40NzkxIDgzLjE4NTggNDguMzc5MyA4Ny42Mjk1Vjg1LjY2NjdMNDkuMjE0NyA4MS41TDQ2LjcwODUgNzcuMzMzM0wzOS4xODk3IDc0LjgzMzNMMzIuOTE0OSA2OVoiIGZpbGw9IiM4RTgxNkYiLz4KPHBhdGggZD0iTTEwOC41MyA2Ni41TDEwNS4xODggNjguMTY2N0wxMDcuNDIxIDczLjE2NjdDMTA4LjE3NCA3MS43MTMgMTA4Ljg0IDcwLjIwNzUgMTA5LjQxMiA2OC42NTY3QzExMC4wNjcgNjYuODgyNCAxMTAuNiA2NS4wNDkgMTExIDYzLjE2NjdMMTA4LjUzIDY2LjVaIiBmaWxsPSIjOEU4MTZGIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzAgNTRDMzAgNTAuMzkzNCAzMC40Nzg1IDQ2Ljg5ODMgMzEuMzc1NyA0My41NzQ1TDMzLjM0MTcgNDIuMzMzM0gzNC4xNzcxTDM1LjAxMjUgNDMuNTc0NUwzNC4xNzcxIDQxLjVMMzMuMzQxNyA0MC42NjY3TDMyLjQxOTYgNDAuMjgzOUMzMi43MDM4IDM5LjUwNzMgMzMuMDExNSAzOC43NDE5IDMzLjM0MTcgMzcuOTg4NkwzNC4xNzcxIDM4LjE2NjdMMzUuMDEyNSAzNy4zMzMzVjM2LjVWMzUuNjY2N0wzNS4zNjQ3IDM0QzQyLjI5ODIgMjIuMDQ0IDU1LjI1NzUgMTQgNzAuMTAwMyAxNEM3Mi45MDQzIDE0IDc1LjY0MSAxNC4yODcxIDc4LjI4MjYgMTQuODMzM0w3OS4yOSAxOUw4MC45NjA4IDIxLjVMODAuMTI1NCAyNEw4MS43OTYyIDIxLjVMODAuOTYwOCAxOC4xNjY3TDgyLjYzMTcgMTUuOTkxOUM5OC42NDE0IDIxLjI0MDkgMTEwLjIwMSAzNi4yNzM5IDExMC4yMDEgNTRDMTEwLjIwMSA1Ni44NTc3IDEwOS45IDU5LjY0NTQgMTA5LjMyOSA2Mi4zMzMzTDEwNi44NTkgNjUuNjY2N0wxMDMuNTE3IDY3LjMzMzNMMTA1Ljc1IDcyLjMzMzNDMTAxLjM2OSA4MC43OTM3IDk0LjA0OTEgODcuNDk0MyA4NS4xMzc5IDkxLjA5MjRMODQuMDg1OSA5MC42NjY3VjkxLjVDODMuNjA1NCA5MS42Nzg0IDgzLjEyMDYgOTEuODQ3OCA4Mi42MzE3IDkyLjAwODFMODEuNzk2MiA5MS41SDgwLjk2MDhMNzkuMjkgOTIuOTQ0N0M3Ni4zMzg5IDkzLjYzNDkgNzMuMjYyNCA5NCA3MC4xMDAzIDk0QzYzLjMwMDMgOTQgNTYuODk1NiA5Mi4zMTE3IDUxLjI4NDYgODkuMzMyM0w1MC44ODU2IDg2LjVMNTEuMjg0NiA3OS44MzMzQzUwLjAzNzcgNzguMTY2NyA0Ny4zNzY4IDc0LjgzMzMgNDYuNzA4NSA3NC44MzMzQzQ2LjA0MDEgNzQuODMzMyA0MS40MTc0IDczLjcyMjIgMzkuMTg5NyA3My4xNjY3TDMyLjY3NzYgNjguNDAxNEMzMC45NDgyIDYzLjkzMjkgMzAgNTkuMDc2OSAzMCA1NFoiIGZpbGw9IiM4RTgxNkYiLz4KPC9nPgo8ZGVmcz4KPGZpbHRlciBpZD0iZmlsdGVyMF9kXzQ1MTVfNTA3NyIgeD0iMCIgeT0iMCIgd2lkdGg9IjE0MSIgaGVpZ2h0PSIxNDAiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KPGZlQ29sb3JNYXRyaXggaW49IlNvdXJjZUFscGhhIiB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMTI3IDAiIHJlc3VsdD0iaGFyZEFscGhhIi8+CjxmZU9mZnNldCBkeT0iMTYiLz4KPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMTUiLz4KPGZlQ29tcG9zaXRlIGluMj0iaGFyZEFscGhhIiBvcGVyYXRvcj0ib3V0Ii8+CjxmZUNvbG9yTWF0cml4IHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjI1IDAiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJlZmZlY3QxX2Ryb3BTaGFkb3dfNDUxNV81MDc3Ii8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iZWZmZWN0MV9kcm9wU2hhZG93XzQ1MTVfNTA3NyIgcmVzdWx0PSJzaGFwZSIvPgo8L2ZpbHRlcj4KPC9kZWZzPgo8L3N2Zz4K'); --arrow-right-framed-inline: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA0MCA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjMuMDY4NyAyMy40MjU4TDEwLjA1NzIgMTUuNDkwM0w5Ljc1OTYxIDE1LjY1MTFMOS41OTk2MSAxNi43MDI5TDkuNTk5NjEgMzIuMjE0NUw5LjkxOTYxIDMyLjU1MjVMOS41OTk2MSAzMi43MjE1TDkuNTk5NjEgMzMuMjI4Nkw5Ljc1OTYxIDMzLjIyODZMOS45MTk2MSAzMy41NjY2TDkuOTE5NjEgMzMuNzM1Nkw5LjU5OTYxIDM0LjI0MjdMOS41OTk2MSAzNC43NDk3TDkuOTE5NjEgMzUuMDg3N0wxMC4wNzk2IDM1LjU5NDhMOS41OTk2MSAzNi4yNzA4TDkuNTk5NjEgNDQuMTQwNUw5LjkxOTYxIDQ0LjIxNDVMMTAuNjI1MSA0My44NkwxNi4zMTk2IDQwLjM4N0wxNi40Nzk2IDM5LjMxMzFMMTcuMjc5NiAzNy43OTJMMTkuMDM5NiAzNy4xMTU5TDIwLjMxOTYgMzcuMTE1OUwyMS4yNzk2IDM2LjQzOTlMMjIuMDc5NiAzNi40Mzk5TDIyLjU1OTYgMzYuNTgxM0wzMS42NzA0IDMxLjAyNDlMMzEuMTk5NiAzMC42OTM0TDMwLjU1OTYgMzAuMzU1M0wzMC4yMzk2IDI5LjM0MTNMMzAuNzE5NiAzMC4wMTczTDMyLjYzOTYgMzAuMTg2M0wzMy4wNjQ3IDMwLjE3NDZMMzMuNTk5NiAyOS44NDgzTDI0LjE1OTYgMjQuMDkxMUwyMi4zOTk2IDI0LjEwMThMMjEuNTk5NiAyNC43Nzc5TDIyLjM5OTYgMjMuNzYzOEwyMy4wNjg3IDIzLjQyNThaTTIyLjQ1NDggMzYuNjQ1MkwxNi40MTc3IDQwLjMyNzJMMTYuNzk5NiAzOS4xNDQxTDE3LjU5OTYgMzguMTNMMTkuMzU5NiAzNy43OTJMMjAuNjM5NiAzNy42MjNMMjEuNDM5NiAzNi43Nzc5TDIyLjA1MjUgMzYuNjQ1MkwyMi40NTQ4IDM2LjY0NTJaIiBmaWxsPSIjRjVGNUY1Ii8+CiAgICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTQwIDU0LjkyOTZWMi4xMTI2OEwzOS4yIDBIMjQuNEwyMy4yIDEuMjY3NjFWMEgxLjZMMS4yIDAuNDIyNTM1TDAuNCAxLjI2NzYxQzAuMjY2NjY3IDEuOTcxODMgMCAzLjQ2NDc5IDAgMy44MDI4MlYyMC43MDQyTDAuOCAyMy4yMzk0TDEuMiAyNC45Mjk2VjI3LjQ2NDhMMC44IDI1LjM1MjFMMCAyNC41MDdWNTguMzA5OUwwLjQgNTcuODg3M0gxLjJWNTguNzMyNEwxLjYgNjBIMzguNEwzOS42IDU5LjU3NzVMNDAgNTQuOTI5NlpNMzcuMiAyLjk1Nzc1SDIuOFY1Ny4wNDIzSDEyTDEzLjIgNTcuODg3M0wxOCA1OC4zMDk5TDE4LjQgNTcuNDY0OFY1Ny4wNDIzSDM3LjJWMzUuNDkzTDM3LjYgMzMuODAyOEwzOC40IDMyLjUzNTJMMzcuMiAzMy44MDI4VjIuOTU3NzVaIiBmaWxsPSIjRjVGNUY1Ii8+Cjwvc3ZnPgo='); --arrow-left-framed-inline: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA0MCA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTYuOTMxMyAyMy40MjU4TDI5Ljk0MjggMTUuNDkwM0wzMC4yNDA0IDE1LjY1MTFMMzAuNDAwNCAxNi43MDI5TDMwLjQwMDQgMzIuMjE0NUwzMC4wODA0IDMyLjU1MjVMMzAuNDAwNCAzMi43MjE1TDMwLjQwMDQgMzMuMjI4NkwzMC4yNDA0IDMzLjIyODZMMzAuMDgwNCAzMy41NjY2TDMwLjA4MDQgMzMuNzM1NkwzMC40MDA0IDM0LjI0MjdMMzAuNDAwNCAzNC43NDk3TDMwLjA4MDQgMzUuMDg3N0wyOS45MjA0IDM1LjU5NDhMMzAuNDAwNCAzNi4yNzA4TDMwLjQwMDQgNDQuMTQwNUwzMC4wODA0IDQ0LjIxNDVMMjkuMzc0OSA0My44NkwyMy42ODA0IDQwLjM4N0wyMy41MjA0IDM5LjMxMzFMMjIuNzIwNCAzNy43OTJMMjAuOTYwNCAzNy4xMTU5TDE5LjY4MDQgMzcuMTE1OUwxOC43MjA0IDM2LjQzOTlMMTcuOTIwNCAzNi40Mzk5TDE3LjQ0MDQgMzYuNTgxM0w4LjMyOTYyIDMxLjAyNDlMOC44MDAzOSAzMC42OTM0TDkuNDQwMzkgMzAuMzU1M0w5Ljc2MDM5IDI5LjM0MTNMOS4yODAzOSAzMC4wMTczTDcuMzYwMzkgMzAuMTg2M0w2LjkzNTM1IDMwLjE3NDZMNi40MDAzOSAyOS44NDgzTDE1Ljg0MDQgMjQuMDkxMUwxNy42MDA0IDI0LjEwMThMMTguNDAwNCAyNC43Nzc5TDE3LjYwMDQgMjMuNzYzOEwxNi45MzEzIDIzLjQyNThaTTE3LjU0NTIgMzYuNjQ1MkwyMy41ODIzIDQwLjMyNzJMMjMuMjAwNCAzOS4xNDQxTDIyLjQwMDQgMzguMTNMMjAuNjQwNCAzNy43OTJMMTkuMzYwNCAzNy42MjNMMTguNTYwNCAzNi43Nzc5TDE3Ljk0NzUgMzYuNjQ1MkwxNy41NDUyIDM2LjY0NTJaIiBmaWxsPSIjRjVGNUY1Ii8+CiAgICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTAuNzk5OTk5IDYwSDBWNTcuODg3M1YwLjg0NTA3SDAuNzk5OTk5TDIgMEgzOC40TDM4LjggMS4yNjc2VjIuMTEyNjdIMzkuNkw0MCAxLjY5MDE0VjM1LjQ5M0wzOS4yIDM0LjY0NzlMMzguOCAzMi41MzUyVjM1LjA3MDRMMzkuMiAzNi43NjA2TDQwIDM5LjI5NThWNTYuMTk3MkM0MCA1Ni41MzUyIDM5LjczMzMgNTguMDI4MiAzOS42IDU4LjczMjRMMzguOCA1OS41Nzc1TDM4LjQgNjBIMTYuOFY1OC43MzI0TDE1LjYgNjBIMC43OTk5OTlaTTM3LjIgNTcuMDQyM0gyLjhWMjYuMTk3MkwxLjYgMjcuNDY0OEwyLjQgMjYuMTk3MkwyLjggMjQuNTA3VjIuOTU3NzVIMjEuNlYyLjUzNTIxTDIyIDEuNjkwMTRMMjYuOCAyLjExMjY3TDI4IDIuOTU3NzVIMzcuMlY1Ny4wNDIzWiIgZmlsbD0iI0Y1RjVGNSIvPgo8L3N2Zz4K'); --arrow-up-frameless-inline: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyOCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xOS45MzY0IDEwLjUzMDlMMjcuNDQ4NiAyMy41NDI0TDI3LjI5NjQgMjMuODRMMjYuMzAwNyAyNEwxMS42MTY0IDI0TDExLjI5NjQgMjMuNjhMMTEuMTM2NCAyNEwxMC42NTY0IDI0TDEwLjY1NjQgMjMuODRMMTAuMzM2NCAyMy42OEwxMC4xNzY0IDIzLjY4TDkuNjk2NCAyNEw5LjIxNjQxIDI0TDguODk2NDEgMjMuNjhMOC40MTY0MSAyMy41Mkw3Ljc3NjQxIDI0TDAuMzI2NDk0IDI0TDAuMjU2NDA2IDIzLjY4TDAuNTkyMDQ2IDIyLjk3NDVMMy44Nzk3OSAxNy4yOEw0Ljg5NjQxIDE3LjEyTDYuMzM2NDEgMTYuMzJMNi45NzY0MSAxNC41Nkw2Ljk3NjQxIDEzLjI4TDcuNjE2NDEgMTIuMzJMNy42MTY0MSAxMS41Mkw3LjQ4MjQ2IDExLjA0TDEyLjc0MjYgMS45MjkyM0wxMy4wNTY0IDIuNEwxMy4zNzY0IDMuMDRMMTQuMzM2NCAzLjM2TDEzLjY5NjQgMi44OEwxMy41MzY0IDAuOTZMMTMuNTQ3NSAwLjUzNDk1NUwxMy44NTY0IC02LjA1NjgzZS0wN0wxOS4zMDY2IDkuNDRMMTkuMjk2NCAxMS4yTDE4LjY1NjQgMTJMMTkuNjE2NCAxMS4yTDE5LjkzNjQgMTAuNTMwOVpNNy40MjE5NyAxMS4xNDQ4TDMuOTM2NDEgMTcuMTgxOUw1LjA1NjQxIDE2LjhMNi4wMTY0MSAxNkw2LjMzNjQxIDE0LjI0TDYuNDk2NDEgMTIuOTZMNy4yOTY0MSAxMi4xNkw3LjQyMTk3IDExLjU0NzFMNy40MjE5NyAxMS4xNDQ4WiIgZmlsbD0iI0Y1RjVGNSIvPgo8L3N2Zz4K'); --arrow-down-frameless-inline: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyOCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03Ljc3NjQ5IDEzLjQ2OTFMMC4yNjQyODIgMC40NTc2MTRMMC40MTY0ODYgMC4xNjAwMDRMMS40MTIxNiAzLjkyMTI2ZS0wNkwxNi4wOTY1IDMuMjc5MzllLTA2TDE2LjQxNjUgMC4zMjAwMDNMMTYuNTc2NSAzLjI1ODRlLTA2TDE3LjA1NjUgMy4yMzc0MmUtMDZMMTcuMDU2NSAwLjE2MDAwM0wxNy4zNzY1IDAuMzIwMDAzTDE3LjUzNjUgMC4zMjAwMDNMMTguMDE2NSAzLjE5NTQ2ZS0wNkwxOC40OTY1IDMuMTc0NDhlLTA2TDE4LjgxNjUgMC4zMjAwMDNMMTkuMjk2NSAwLjQ4MDAwM0wxOS45MzY1IDMuMTExNTNlLTA2TDI3LjM4NjQgMi43ODU4OWUtMDZMMjcuNDU2NSAwLjMyMDAwM0wyNy4xMjA4IDEuMDI1NDVMMjMuODMzMSA2LjcyTDIyLjgxNjUgNi44OEwyMS4zNzY1IDcuNjhMMjAuNzM2NSA5LjQ0TDIwLjczNjUgMTAuNzJMMjAuMDk2NSAxMS42OEwyMC4wOTY1IDEyLjQ4TDIwLjIzMDQgMTIuOTZMMTQuOTcwMyAyMi4wNzA4TDE0LjY1NjUgMjEuNkwxNC4zMzY1IDIwLjk2TDEzLjM3NjUgMjAuNjRMMTQuMDE2NSAyMS4xMkwxNC4xNzY1IDIzLjA0TDE0LjE2NTMgMjMuNDY1TDEzLjg1NjUgMjRMOC40MDYzIDE0LjU2TDguNDE2NDkgMTIuOEw5LjA1NjQ5IDEyTDguMDk2NDkgMTIuOEw3Ljc3NjQ5IDEzLjQ2OTFaTTIwLjI5MDkgMTIuODU1MkwyMy43NzY1IDYuODE4MDZMMjIuNjU2NSA3LjJMMjEuNjk2NSA4TDIxLjM3NjUgOS43NkwyMS4yMTY1IDExLjA0TDIwLjQxNjUgMTEuODRMMjAuMjkwOSAxMi40NTI5TDIwLjI5MDkgMTIuODU1MloiIGZpbGw9IiNGNUY1RjUiLz4KPC9zdmc+Cg=='); --arrow-left-frameless-inline: url('data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjI1IiBoZWlnaHQ9IjMwIiB2aWV3Qm94PSIwIDAgMjUgMzAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBpZD0iUG9seWdvbiAxIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEwLjkzMTMgOC40MjU3N0wyMy45NDI4IDAuNDkwMzQyTDI0LjI0MDQgMC42NTExMjJMMjQuNDAwNCAxLjcwMjg5TDI0LjQwMDQgMTcuMjE0NUwyNC4wODA0IDE3LjU1MjVMMjQuNDAwNCAxNy43MjE1TDI0LjQwMDQgMTguMjI4NkwyNC4yNDA0IDE4LjIyODZMMjQuMDgwNCAxOC41NjY2TDI0LjA4MDQgMTguNzM1NkwyNC40MDA0IDE5LjI0MjdMMjQuNDAwNCAxOS43NDk3TDI0LjA4MDQgMjAuMDg3N0wyMy45MjA0IDIwLjU5NDhMMjQuNDAwNCAyMS4yNzA4TDI0LjQwMDQgMjkuMTQwNUwyNC4wODA0IDI5LjIxNDVMMjMuMzc0OSAyOC44NkwxNy42ODA0IDI1LjM4N0wxNy41MjA0IDI0LjMxMzFMMTYuNzIwNCAyMi43OTJMMTQuOTYwNCAyMi4xMTU5TDEzLjY4MDQgMjIuMTE1OUwxMi43MjA0IDIxLjQzOTlMMTEuOTIwNCAyMS40Mzk5TDExLjQ0MDQgMjEuNTgxM0wyLjMyOTYyIDE2LjAyNDlMMi44MDAzOSAxNS42OTM0TDMuNDQwMzkgMTUuMzU1M0wzLjc2MDM5IDE0LjM0MTNMMy4yODAzOSAxNS4wMTczTDEuMzYwMzkgMTUuMTg2M0wwLjkzNTM0NiAxNS4xNzQ2TDAuNDAwMzkgMTQuODQ4M0w5Ljg0MDM5IDkuMDkxMDZMMTEuNjAwNCA5LjEwMTgzTDEyLjQwMDQgOS43Nzc4OEwxMS42MDA0IDguNzYzOEwxMC45MzEzIDguNDI1NzdaTTExLjU0NTIgMjEuNjQ1MkwxNy41ODIzIDI1LjMyNzJMMTcuMjAwNCAyNC4xNDQxTDE2LjQwMDQgMjMuMTNMMTQuNjQwNCAyMi43OTJMMTMuMzYwNCAyMi42MjNMMTIuNTYwNCAyMS43Nzc5TDExLjk0NzUgMjEuNjQ1MkwxMS41NDUyIDIxLjY0NTJaIiBmaWxsPSIjRjVGNUY1Ii8+Cjwvc3ZnPgo=') ; --arrow-right-frameless-inline: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAyNSAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTQuMDY4NyA4LjQyNTc3TDEuMDU3MjIgMC40OTAzNDJMMC43NTk2MSAwLjY1MTEyMkwwLjU5OTYxMSAxLjcwMjg5TDAuNTk5NjEgMTcuMjE0NUwwLjkxOTYxIDE3LjU1MjVMMC41OTk2MSAxNy43MjE1TDAuNTk5NjEgMTguMjI4NkwwLjc1OTYxIDE4LjIyODZMMC45MTk2MSAxOC41NjY2TDAuOTE5NjEgMTguNzM1NkwwLjU5OTYxIDE5LjI0MjdMMC41OTk2MSAxOS43NDk3TDAuOTE5NjA5IDIwLjA4NzdMMS4wNzk2MSAyMC41OTQ4TDAuNTk5NjEgMjEuMjcwOEwwLjU5OTYwOSAyOS4xNDA1TDAuOTE5NjA5IDI5LjIxNDVMMS42MjUwNiAyOC44Nkw3LjMxOTYxIDI1LjM4N0w3LjQ3OTYxIDI0LjMxMzFMOC4yNzk2MSAyMi43OTJMMTAuMDM5NiAyMi4xMTU5TDExLjMxOTYgMjIuMTE1OUwxMi4yNzk2IDIxLjQzOTlMMTMuMDc5NiAyMS40Mzk5TDEzLjU1OTYgMjEuNTgxM0wyMi42NzA0IDE2LjAyNDlMMjIuMTk5NiAxNS42OTM0TDIxLjU1OTYgMTUuMzU1M0wyMS4yMzk2IDE0LjM0MTNMMjEuNzE5NiAxNS4wMTczTDIzLjYzOTYgMTUuMTg2M0wyNC4wNjQ3IDE1LjE3NDZMMjQuNTk5NiAxNC44NDgzTDE1LjE1OTYgOS4wOTEwNkwxMy4zOTk2IDkuMTAxODNMMTIuNTk5NiA5Ljc3Nzg4TDEzLjM5OTYgOC43NjM4TDE0LjA2ODcgOC40MjU3N1pNMTMuNDU0OCAyMS42NDUyTDcuNDE3NjYgMjUuMzI3Mkw3Ljc5OTYxIDI0LjE0NDFMOC41OTk2MSAyMy4xM0wxMC4zNTk2IDIyLjc5MkwxMS42Mzk2IDIyLjYyM0wxMi40Mzk2IDIxLjc3NzlMMTMuMDUyNSAyMS42NDUyTDEzLjQ1NDggMjEuNjQ1MloiIGZpbGw9IiNGNUY1RjUiLz4KPC9zdmc+Cg=='); --arrow-left-framed-file: url('/assets/svg_slider_arrow_left_framed.svg'); --arrow-right-framed-file: url('/assets/svg_slider_arrow_right_framed.svg'); --arrow-left-frameless-file: url('/assets/svg_slider_arrow_left_frameless.svg'); --arrow-right-frameless-file: url('/assets/svg_slider_arrow_right_frameless.svg'); --arrow-left-framed: var(--arrow-left-framed-inline); --arrow-right-framed: var(--arrow-right-framed-inline); --arrow-up-frameless: var(--arrow-up-frameless-inline); --arrow-down-frameless: var(--arrow-down-frameless-inline); --arrow-left-frameless: var(--arrow-left-frameless-inline); --arrow-right-frameless: var(--arrow-right-frameless-inline); /* */ /* Comp Snackbars */ --snackbar-default-inline: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgNDQwIDU0IiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzY4OTZfMTE0OTkpIj4KICAgICAgICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTM5LjA0NzQgMEg4MS45MDQ1TDgwLjk1MjIgMC40OTk5OTZMNTEuNDI4NCAyLjVMNDEuOTA0NiAxLjVMMzkuMDQ3NCAwWiIgZmlsbD0idXJsKCNwYWludDBfbGluZWFyXzY4OTZfMTE0OTkpIi8+CiAgICAgICAgPHBhdGggZD0iTTQzOC4wOTUgNTJMNDQwIDUwVjMyTDQzOS4wNDggMjkuNUw0MzcuMTQzIDI3LjVWMjZMNDQwIDI0VjIxTDQzOC4wOTUgMTlMNDM2LjE5IDE3VjE1TDQzOC4wOTUgMTNMNDQwIDEyVjJMNDM5LjA0OCAxLjVMNDM4LjA5NSAwLjQ5OTk5Nkw0MzYuMTkgMEgzMjkuNTI0TDMyMCAxLjVMMzE3LjE0MyAzLjVMMzEzLjMzMyA3LjVMMzE1LjIzOCAzVjAuNDk5OTk2TDMxNy4xNDMgMEgyMzIuMzgxSDIwMy45MzdIMTA0Ljc2Mkw4MC45NTI0IDMuNUw0OS41MjM4IDQuNUwzOS4wNDc2IDJMMzYuMTkwNSAwSDEuOTA0NzVMMCAwLjQ5OTk5NlYyNUMwIDI1LjQgMS45MDQ3MiAyNi44MzMzIDIuODU3MTIgMjcuNVYzMy41TDEuOTA0NzUgMjhMMCAyNy41VjQ5LjVMMC45NTIzOTMgNTJMMCA1Mi41VjU0SDAuOTUyMzkzSDMyLjM4MUMzOC4wOTUyIDUyLjMzMzMgNTAuMjg1NyA0OSA1My4zMzMzIDQ5QzU2LjM4MSA0OSA3My4wMTU5IDUwIDgwLjk1MjQgNTAuNUw1NS4yMzgxIDUwTDQ4LjU3MTQgNTNWNTRIMjkzLjMzM0wyOTEuNDI5IDUzTDI4Ny42MTkgNDkuNUwyOTEuNDI5IDUyTDMyMy44MSA1NEg0MzUuMjM4TDQzNy4xNDMgNTMuNUw0MzguMDk1IDUyWiIgZmlsbD0idXJsKCNwYWludDFfbGluZWFyXzY4OTZfMTE0OTkpIi8+CiAgICA8L2c+CiAgICA8ZGVmcz4KICAgICAgICA8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXJfNjg5Nl8xMTQ5OSIgeDE9IjQ0MCIgeTE9IjI1Ljc1IiB4Mj0iLTAuMDAwMjI4MDg0IiB5Mj0iMjUuNzUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0FDODI1RCIvPgogICAgICAgICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM3QjVENDQiLz4KICAgICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQxX2xpbmVhcl82ODk2XzExNDk5IiB4MT0iNDQwIiB5MT0iMjUuNzUiIHgyPSIwIiB5Mj0iMjUuNzUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0FDODI1RCIvPgogICAgICAgICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM3QjVENDQiLz4KICAgICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgICAgICAgICA8Y2xpcFBhdGggaWQ9ImNsaXAwXzY4OTZfMTE0OTkiPgogICAgICAgICAgICA8cmVjdCB3aWR0aD0iNDQwIiBoZWlnaHQ9IjU0IiBmaWxsPSJ3aGl0ZSIvPgogICAgICAgIDwvY2xpcFBhdGg+CiAgICA8L2RlZnM+Cjwvc3ZnPgo='); --snackbar-error-inline: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgNDQwIDU0IiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zOS4wNDc2IDBIODEuOTA0N0w4MC45NTI0IDAuNDk5OTk2TDUxLjQyODYgMi41TDQxLjkwNDggMS41TDM5LjA0NzYgMFoiIGZpbGw9InVybCgjcGFpbnQwX2xpbmVhcl80NjY3XzE2MzIpIi8+CiAgICA8cGF0aCBkPSJNNDM4LjA5NSA1Mkw0NDAgNTBWMzJMNDM5LjA0OCAyOS41TDQzNy4xNDMgMjcuNVYyNkw0NDAgMjRWMjFMNDM4LjA5NSAxOUw0MzYuMTkgMTdWMTVMNDM4LjA5NSAxM0w0NDAgMTJWMkw0MzkuMDQ4IDEuNUw0MzguMDk1IDAuNDk5OTk2TDQzNi4xOSAwSDMyOS41MjRMMzIwIDEuNUwzMTcuMTQzIDMuNUwzMTMuMzMzIDcuNUwzMTUuMjM4IDNWMC40OTk5OTZMMzE3LjE0MyAwSDIzMi4zODFIMjAzLjkzN0gxMDQuNzYyTDgwLjk1MjQgMy41TDQ5LjUyMzggNC41TDM5LjA0NzYgMkwzNi4xOTA1IDBIMS45MDQ3NUwwIDAuNDk5OTk2VjI1QzAgMjUuNCAxLjkwNDcyIDI2LjgzMzMgMi44NTcxMiAyNy41VjMzLjVMMS45MDQ3NSAyOEwwIDI3LjVWNDkuNUwwLjk1MjM5MyA1MkwwIDUyLjVWNTRIMC45NTIzOTNIMzIuMzgxQzM4LjA5NTIgNTIuMzMzMyA1MC4yODU3IDQ5IDUzLjMzMzMgNDlDNTYuMzgxIDQ5IDczLjAxNTkgNTAgODAuOTUyNCA1MC41TDU1LjIzODEgNTBMNDguNTcxNCA1M1Y1NEgyOTMuMzMzTDI5MS40MjkgNTNMMjg3LjYxOSA0OS41TDI5MS40MjkgNTJMMzIzLjgxIDU0SDQzNS4yMzhMNDM3LjE0MyA1My41TDQzOC4wOTUgNTJaIiBmaWxsPSJ1cmwoI3BhaW50MV9saW5lYXJfNDY2N18xNjMyKSIvPgogICAgPGRlZnM+CiAgICAgICAgPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyXzQ2NjdfMTYzMiIgeDE9IjQ0MCIgeTE9IjI1Ljc1IiB4Mj0iMCIgeTI9IjI1Ljc1IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNFMjVCNEYiLz4KICAgICAgICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjOEQyMjE5Ii8+CiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgICAgICA8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MV9saW5lYXJfNDY2N18xNjMyIiB4MT0iNDQwIiB5MT0iMjUuNzUiIHgyPSIwIiB5Mj0iMjUuNzUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0UyNUI0RiIvPgogICAgICAgICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM4RDIyMTkiLz4KICAgICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPC9kZWZzPgo8L3N2Zz4K'); --snackbar-default-file: url('../svg/Generic/Snackbar_Secondary.svg'); --snackbar-error-file: url('../svg/Generic/Snackbar_Error.svg'); --snackbar-default: var(--snackbar-default-inline); --snackbar-error: var(--snackbar-error-inline); /* */ } /**/ /* Comp Tip */ .compButton:not(.disabled):hover .compTooltip { display: flex; } .compTooltip { display: none; height: fit-content; max-width: 14.25rem; width: max-content; position: absolute; z-index: 20; pointer-events: auto; border-radius: 0.25rem; background: linear-gradient(91deg, var(--d-surface-container-lowest) -0.1%, var(--d-secondary-container) 99.67%); } .compTooltip p { text-wrap: nowrap; } .compTooltipRelative { position: relative; pointer-events: auto; } .compTooltipRelative:hover .compTooltip { display: flex; } @media screen and (min-width: 1000px) { .compTooltip_OnlyMobile { display: none; } .compTooltipPosition_top { top: -0.25rem; left: 50%; transform: translate(-50%, -100%); } .compTooltipPosition_bottom { bottom: -0.25rem; left: 50%; transform: translate(-50%, 100%); } .compTooltipPosition_left { left: -0.25rem; top: 50%; transform: translate(-100%, -50%); } .compTooltipPosition_right { right: -0.25rem; top: 50%; transform: translate( 100%, -50%); } } @media screen and (max-width: 1001px) { .compTooltip_OnlyDesktop { display: none; } .compTooltipMobilePosition_top { top: -0.25rem; left: 50%; transform: translate(-50%, -100%); } .compTooltipMobilePosition_bottom { bottom: -0.25rem; left: 50%; transform: translate(-50%, 100%); } .compTooltipMobilePosition_left { left: -0.25rem; top: 50%; transform: translate(-100%, -50%); } .compTooltipMobilePosition_right { right: -0.25rem; top: 50%; transform: translate( 100%, -50%); } } @media screen and (min-width: 1001px) { .compTooltip.d-top { top: -0.25rem; bottom: auto; left: 50%; right: auto; transform: translate(-50%, -100%); } .compTooltip.d-bottom { top: auto; bottom: -0.25rem; left: 50%; right: auto; transform: translate(-50%, 100%); } .compTooltip.d-left { top: 50%; bottom: auto; left: -0.25rem; right: auto; transform: translate(-100%, -50%); } .compTooltip.d-right { top: 50%; bottom: auto; left: auto; right: -0.25rem; transform: translate(100%, -50%); } } @media screen and (max-width: 1000px) { .compTooltip.m-top { top: -0.25rem; bottom: auto; left: 50%; right: auto; transform: translate(-50%, -100%); } .compTooltip.m-bottom { top: auto; bottom: -0.25rem; left: 50%; right: auto; transform: translate(-50%, 100%); } .compTooltip.m-left { top: 50%; bottom: auto; left: -0.25rem; right: auto; transform: translate(-100%, -50%); } .compTooltip.m-right { top: 50%; bottom: auto; left: auto; right: -0.25rem; transform: translate(100%, -50%); } } [active='true'] .compTooltipFalse { display: none; } [active='false'] .compTooltipTrue { display: none; } /**/ /* Comp Pop Over */ .compButton:not(.disabled):hover .compPopOver { display: flex; } .compPopOverRelative { position: relative; pointer-events: auto; } .compPopOver[status=false] { display: none; } .compPopOver[status=false]:hover, .compPopOver[status=true] { display: flex; } .compPopOver { height: fit-content; padding: var(--spc-3); position: absolute; z-index: 20; pointer-events: auto; border-radius: 0.25rem; --pop-over-arrow-color: var(--d-secondary-container); } .compPopOverStyle_Rich { background-color: var(--d-surface-variant); --pop-over-arrow-color: var(--d-surface-variant); } .compPopOverStyle_Rich .compPopOverTitle { color: var(--d-surface-container-high); } .compPopOverStyle_Rich .compPopOverText { color: var(--d-on-surface); } .compPopOverStyle_Walkthrought { background-color: var(--d-secondary); --pop-over-arrow-color: var(--d-secondary); } .compPopOverStyle_Walkthrought .compPopOverTitle { color: var(--d-on-primary); } .compPopOverStyle_Walkthrought .compPopOverText, .compPopOverStyle_Walkthrought .compPopOverStep { color: var(--d-on-surface); } .compPopOver::after { content: ""; position: absolute; width: 0; height: 0; border-style: solid; } .compPopOverOriginDirection_Top::after { top: -16px; left: 50%; transform: translateX(-50%) rotate(180deg); border-width: 18px 18px 0 18px; border-color: var(--pop-over-arrow-color) transparent transparent transparent; } .compPopOverOriginDirection_Top_Left::after { top: -16px; left: 1rem; transform: rotate(180deg); border-width: 18px 18px 0 18px; border-color: var(--pop-over-arrow-color) transparent transparent transparent; } .compPopOverOriginDirection_Top_Right::after { top: -16px; right: 1rem; transform: rotate(180deg); border-width: 18px 18px 0 18px; border-color: var(--pop-over-arrow-color) transparent transparent transparent; } .compPopOverOriginDirection_Bottom::after { bottom: -16px; left: 50%; transform: translateX(-50%) rotate(180deg); border-width: 0 18px 18px 18px; border-color: transparent transparent var(--pop-over-arrow-color) transparent; } .compPopOverOriginDirection_Bottom_Left::after { bottom: -16px; left: 1rem; transform: rotate(180deg); border-width: 0 18px 18px 18px; border-color: transparent transparent var(--pop-over-arrow-color) transparent; } .compPopOverOriginDirection_Bottom_Right::after { bottom: -16px; right: 1rem; transform: rotate(180deg); border-width: 0 18px 18px 18px; border-color: transparent transparent var(--pop-over-arrow-color) transparent; } .compPopOverOriginDirection_Left::after { top: 50%; left: -16px; transform: translateY(-50%) rotate(180deg); border-width: 18px 0 18px 18px; border-color: transparent transparent transparent var(--pop-over-arrow-color); } .compPopOverOriginDirection_Left_Top::after { top: 1rem; left: -16px; transform: translateY(-50%) rotate(180deg); border-width: 18px 0 18px 18px; border-color: transparent transparent transparent var(--pop-over-arrow-color); } .compPopOverOriginDirection_Left_Bottom::after { bottom: 1rem; left: -16px; transform: translateY(-50%) rotate(180deg); border-width: 18px 0 18px 18px; border-color: transparent transparent transparent var(--pop-over-arrow-color); } .compPopOverOriginDirection_Right::after { top: 50%; right: -16px; transform: translateY(-50%) rotate(180deg); border-width: 18px 18px 18px 0; border-color: transparent var(--pop-over-arrow-color) transparent transparent; } .compPopOverOriginDirection_Right_Top::after { top: 1rem; right: -16px; transform: translateY(-50%) rotate(180deg); border-width: 18px 18px 18px 0; border-color: transparent var(--pop-over-arrow-color) transparent transparent; } .compPopOverOriginDirection_Right_Bottom::after { bottom: 1rem; right: -16px; transform: translateY(-50%) rotate(180deg); border-width: 18px 18px 18px 0; border-color: transparent var(--pop-over-arrow-color) transparent transparent; } @media screen and (min-width: 1000px) { .compPopOver { width: var(--co-03); max-width: var(--co-03); } .compPopOver_OnlyMobile { display: none; } .compPopOverRelative:hover .compPopOver { display: flex; } .compPopOverPosition_Top { top: -1.5rem; left: 50%; transform: translate(-50%, -100%); } .compPopOverPosition_Bottom { bottom: -1.5rem; left: 50%; transform: translate(-50%, 0%); } .compPopOverPosition_Left { left: -1.5rem; top: 50%; transform: translate(-100%, -50%); } .compPopOverPosition_Right { right: -1.5rem; top: 50%; transform: translate( 100%, -50%); } } @media screen and (max-width: 1001px) { .compPopOver { width: var(--m-co-04); max-width: var(--m-co-04); } .compPopOver_OnlyDesktop { display: none; } .compPopOverMobilePosition_Top { top: -1.5rem; left: 50%; transform: translate(-50%, -100%); } .compPopOverMobilePosition_Bottom { bottom: -1.5rem; left: 50%; transform: translate(-50%, 0%); } .compPopOverMobilePosition_Left { left: -1.5rem; top: 50%; transform: translate(-100%, -50%); } .compPopOverMobilePosition_Right { right: -1.5rem; top: 50%; transform: translate( 100%, -50%); } } /**/ /* Comp Chip */ .compChip { display: inline-flex; transition: background 0.3s ease; width: fit-content; min-height: 1rem; contain: layout; } .compChipLabel { transition: color 0.3s ease; } .compChipStyle__infox { padding: 0px var(--spc-3); gap: var(--spc-1); border: 1px solid var(--d-outline); background-color: var(--d-surface-variant); } .compChipStyle__static { padding: var(--spc-1) var(--spc-3); gap: var(--spc-1); flex-shrink: 0; } .compChipStyle__selectable { padding: var(--spc-1) var(--spc-3); gap: var(--spc-1); flex-shrink: 0; } /* State Change */ .compChip[status="false"]:not(.compChipStyle__infox) { background-color: var(--d-surface-variant); } .compChip[status="false"]:not(.compChipStyle__static) { background-color: var(--d-surface-variant); } .compChip[status="false"]:not(.compChipStyle__static):hover { background-color: var(--h-surface-variant); } [status="false"] .compChipLabel { color: var(--d-on-surface-variant); } .compChip[status="true"]:not(.compChipStyle__infox) { background-color: var(--d-primary); } .compChip[status="true"]:not(.compChipStyle__static) { background-color: var(--d-primary); } .compChip[status="true"]:not(.compChipStyle__static):hover { background-color: var(--h-primary); } [status="true"] .compChipLabel { color: var(--d-on-surface-variant); } /* */ [status="true"] > .compChipContent .compChipLft, [status="true"] > .compChipContent .compChipRgt { width: 14px; transition: all 0.3s; color: var(--d-on-surface-variant); font-size: 18px; } [status="true"] > .compChipContent .compChipLft { margin-right: 0.5rem; } [status="true"] > .compChipContent .compChipRgt { margin-left: 0.5rem; } [status="false"] > .compChipContent .compChipLft, [status="false"] > .compChipContent .compChipRgt { width: 0px; transition: all 0.3s; color: var(--d-on-surface-variant); font-size: 18px; overflow: hidden; } .compChipType__infox .compChipContent .compChipRgt { width: 14px; transition: all 0.3s; color: var(--d-on-surface-variant); font-size: 18px; margin-left: 0.5rem; overflow: visible; } .compChipCustomIconLft, .compChipCustomIconRgt { width: auto; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; overflow: visible; } .compChipCustomIconLft span, .compChipCustomIconRgt span { font-size: 18px; } /**/ /* Comp Checkchip */ .compCheckChip { display: inline-flex; transition: background 0.3s ease; } .compCheckChipText { transition: color 0.3s ease; } .compCheckChip__info { padding: 0px var(--spc-3); gap: var(--spc-1); border: 1px solid var(--default-outline); } .compCheckChip__selectable { padding: var(--spc-1) var(--spc-3); gap: var(--spc-1); flex-shrink: 0; } /* State Change */ .compCheckChip[status="false"] { background-color: var(--d-surface-variant); } .compCheckChip[status="false"]:hover { background-color: var(--h-surface-variant); } [status="false"] > .compCheckChipText { color: var(--d-on-surface-variant); } .compCheckChip[status="true"] { background-color: var(--d-primary); } .compCheckChip[status="true"]:hover { background-color: var(--h-primary); } [status="true"] > .compCheckChipText { color: var(--d-on-surface-variant); } /* */ [status="true"] > .compCheckChipIcon { width: 14px; transition: all 0.3s; color: var(--d-on-surface-variant); font-size: 18px; padding-right: 0.5rem; } [status="false"] > .compCheckChipIcon { width: 0px; transition: all 0.3s; color: var(--d-on-surface-variant); font-size: 18px; overflow: hidden; } /**/ /* Comp Dropdown */ .compDropdown .compDropdownHead .compDropdownHeadValueHolder { background: transparent; border: transparent; } .compDropdown .compDropdownHead .compDropdownHeadValueHolder:hover { background: transparent; border: transparent; } .compDropdown .compDropdownHead .compDropdownHeadValueHolder:active { background: transparent; border: transparent; } .compDropdown .compDropdownHead .compDropdownHeadValueHolder:focus-within { background: transparent; border: transparent; } .compDropdown .dropdownIcon, .bottomSheetComponent .dropdownIcon, .bottomSheetComponent .dropdownImage { width: 1.2rem; height: 1.2rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .compDropdownHeadIcon { flex-shrink: 0; } .compDropdownHeadValue { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; } .compDropdownHeadValueHolder[value="unset"] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .compDropdownHeadExpand { flex-shrink: 0; } .compDropdownItem img, .compDropdownItem .dropdownIcon { flex-shrink: 0; } .compDropdownItem span { white-space: nowrap; } /* Background */ .compDropdown .compDropdownHead { transition: background 0.3s ease; } /* Filed Version */ .compDropdown .compDropdownHead { position: relative; z-index: 1; background: linear-gradient(90deg, var(--d-surface-container) 50%, var(--d-surface-container-low) 100%); } .compDropdown.filterable .compDropdownHead::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--d-surface-container) 50%, var(--d-surface-container) 100%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } /* Possible Transitions */ .compDropdown.normal:hover .compDropdownHead::before, .compDropdown.normal:active .compDropdownHead::before, .compDropdown.normal:focus-within .compDropdownHead::before { opacity: 1; } /* Focus */ .compDropdown.normal:focus-within .compDropdownHead { caret-color: var(--d-primary); } /* Disabled */ .compDropdown.disabled .compDropdownHead::before { background: linear-gradient(90deg, var(--d-surface-container) 50%, var(--d-surface-container-low) 100%); opacity: 1; } /* Error */ .compDropdown.error .compDropdownHead::before { background: linear-gradient(90deg, var(--d-surface-container) 50%, var(--d-surface-container-low) 100%); opacity: 1; } /* */ /* Outlined Version */ .compDropdown.outlined .compDropdownHead { background: transparent; } .compDropdown.outlined:hover .compDropdownHead { background: transparent; } .compDropdown.outlined:active .compDropdownHead { background: transparent; } .compDropdown.outlined:focus-within .compDropdownHead { background: transparent; caret-color: var(--d-primary); } .compDropdown.outlined.disabled .compDropdownHead { background: transparent; } .compDropdown.outlined.error .compDropdownHead { background: transparent; } /* */ /* */ /* Input Text */ .compDropdown.normal .compDropdownHeadValue .compDropdownHeadValueHolder { color: var(--d-on-surface); } .compDropdown.normal:hover .compDropdownHeadValue .compDropdownHeadValueHolder { color: var(--h-on-surface); } .compDropdown.normal:active .compDropdownHeadValue .compDropdownHeadValueHolder { color: var(--p-on-surface); } .compDropdown.normal:focus-within .compDropdownHeadValue .compDropdownHeadValueHolder { color: var(--d-on-surface); } .compDropdown.disabled .compDropdownHeadValue .compDropdownHeadValueHolder { color: var(--d-on-surface); } .compDropdown.error .compDropdownHeadValue .compDropdownHeadValueHolder { color: var(--d-on-surface); } .compDropdown.outlined .compDropdownHeadValue .compDropdownHeadValueHolder { color: var(--d-on-surface); } /* */ /* Input Placeholder */ .compDropdown.normal .compDropdownHeadValue .compDropdownHeadValueHolder::placeholder { color: var(--d-on-surface); } .compDropdown.normal:hover .compDropdownHeadValue .compDropdownHeadValueHolder::placeholder { color: var(--h-on-surface); } .compDropdown.normal:active .compDropdownHeadValue .compDropdownHeadValueHolder::placeholder { color: var(--p-on-surface); } .compDropdown.normal:focus-within .compDropdownHeadValue .compDropdownHeadValueHolder::placeholder { color: var(--d-on-surface); } .compDropdown.disabled .compDropdownHeadValue .compDropdownHeadValueHolder::placeholder { color: var(--d-on-surface); } .compDropdown.error .compDropdownHeadValue .compDropdownHeadValueHolder::placeholder { color: var(--d-on-surface); } .compDropdown.outlined .compDropdownHeadValue .compDropdownHeadValueHolder::placeholder { color: var(--d-on-surface); } .compDropdown .compDropdownHeadValue .compDropdownHeadValueHolder:-webkit-autofill, .compDropdown .compDropdownHeadValue .compDropdownHeadValueHolder:-webkit-autofill:hover, .compDropdown .compDropdownHeadValue .compDropdownHeadValueHolder:-webkit-autofill:focus, .compDropdown .compDropdownHeadValue .compDropdownHeadValueHolder:-webkit-autofill:active { background: transparent; -webkit-background-clip: text; -webkit-box-shadow: 0 0 0 1000px transparent inset; -webkit-text-fill-color: var(--d-on-surface); caret-color: var(--d-on-surface); transition: background-color 9999s ease-out 0s; } /* */ /* Label */ .compDropdown.normal > label { color: var(--p-on-surface); } .compDropdown.normal:hover > label { color: var(--p-on-surface); } .compDropdown.normal:active > label { color: var(--p-on-surface); } .compDropdown.normal:focus-within > label { color: var(--p-on-surface); } .compDropdown.disabled > label { color: var(--p-on-surface); } .compDropdown.error > label { color: var(--d-error); } .compDropdown.error:hover > label { color: var(--d-error); } /* */ /* Helper/Span */ .compDropdown.normal > span { color: var(--p-on-surface); } .compDropdown.normal:hover > span { color: var(--p-on-surface); } .compDropdown.normal:active > span { color: var(--p-on-surface); } .compDropdown.normal:focus-within > span { color: var(--p-on-surface); } .compDropdown.disabled > span { color: var(--p-on-surface); } .compDropdown.error > span { color: var(--d-error); } .compDropdown.error > span.validationHelperField { color: var(--d-error); } .compDropdown.error:hover > span { color: var(--d-error); } /* */ /* Left Head Icon */ .compDropdown.normal .compDropdownHeadIcon span { color: var(--d-on-surface); } .compDropdown.normal:hover .compDropdownHeadIcon span { color: var(--d-on-surface); } .compDropdown.normal:active .compDropdownHeadIcon span { color: var(--d-on-surface); } .compDropdown.normal:focus-within .compDropdownHeadIcon span { color: var(--d-on-surface); } .compDropdown.disabled .compDropdownHeadIcon span { color: var(--d-on-surface); } .compDropdown.error .compDropdownHeadIcon span { color: var(--d-on-surface); } /* */ /* Rigth Expand Dropdown Icon */ .compDropdown.normal .compDropdownHeadExpand span { color: var(--d-on-surface); } .compDropdown.normal:hover .compDropdownHeadExpand span { color: var(--h-on-surface); } .compDropdown.normal:active .compDropdownHeadExpand span { color: var(--p-on-surface); } .compDropdown.normal:focus-within .compDropdownHeadExpand span { color: var(--d-on-surface); } .compDropdown.disabled .compDropdownHeadExpand span { color: var(--p-on-surface); } .compDropdown.error .compDropdownHeadExpand span { color: var(--d-on-surface); } /* */ /* Field Box */ /* Search Box */ .compDropdown.normal .compDropdownHead { border: 1.5px solid transparent; } /* Border */ .compDropdown.framed .compDropdownHead { border-color: var(--d-surface-variant); } .compDropdown.framed:hover .compDropdownHead { border-color: var(--d-surface-variant); } .compDropdown.framed:active .compDropdownHead { border-color: var(--d-surface-variant); } .compDropdown.framed:focus-within .compDropdownHead { border-color: var(--d-primary); } .compDropdown.framed.disabled .compDropdownHead { border-color: var(--d-surface-variant); } .compDropdown.framed.error .compDropdownHead { border-color: var(--d-error); } .compDropdown.framed.error:hover .compDropdownHead { border-color: var(--d-error); } /* */ /* */ /* Dropdown Body */ .compDropdown .compDropdownOpts > div { background: var(--d-surface-variant); max-height: 100%; overflow-y: scroll; transition: all 0.3s; } /* */ /* Dropdown Items */ .compDropdown .compDropdownItem { transition: all 0.3s; color: var(--d-on-surface); } .compDropdown .compDropdownItem:hover { background: rgba(255, 255, 255, 0.1); transition: all 0.3s; } .compDropdown .compDropdownActual { position: relative; } /* */ /* Dropdown Options */ .compDropdown .compDropdownOpts { overflow: hidden; position: absolute; width: 100%; z-index: 25; } .compDropdown.filterable .compDropdownOpts { top: 3.3rem; } .compDropdown.unfilterable .compDropdownOpts { top: 2.5em; } /* */ /* Dropdown ScrollBar */ .compDropdown .compDropdownOpts > div::-webkit-scrollbar { width: var(--spc-2); background: transparent; } .compDropdown .compDropdownOpts > div::-webkit-scrollbar-thumb { background: var(--d-primary);} /* */ .compDropdownHeadExpand span { transition: transform 0.35s ease; transform-origin: center; transform-style: preserve-3d; } .compDropdown.open .compDropdownHeadExpand span { transform: rotateX(180deg); } /* */ @media screen and (max-width: 1000px) { .compDropdown.filterable .compDropdownHead input.compDropdownHeadValueHolder { pointer-events: none; } } .compButtonDropdown { position: relative; } .compButtonDropdown .compButtonDropdownMenu { position: absolute; left: 0; top: 100%; z-index: 500; } .compButtonDropdown .compButtonDropdownMenu .compDropdownOpts { top: 0; } .compSortControl { display: flex; align-items: center; gap: var(--spc-2); } .compSortControl .compDropdown { min-width: 0; } .compSortControl .compDropdown .compDropdownHeadValue, .compSortControl .compDropdown .compDropdownHeadValueHolder { min-width: 0; } .compSortControl .compDropdown .compDropdownHeadValueHolder { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .compSortControl .compSortControlDirection .material-symbols-outlined { transition: transform 0.2s ease; } .compSortControl .compSortControlDirection[data-sort-direction="desc"] .material-symbols-outlined { transform: scaleY(-1); } /**/ /* Comp Button */ .compButton { position: relative; height: fit-content; transition: background 0.3s ease; contain: layout; } .compButton:hover { z-index: 50; } .compButton > a { transition: background 0.3s ease; } .compButtonTooltip { display: none; height: fit-content; max-width: 14.25rem; } .compButtonTooltip { position: absolute; width: max-content; z-index: 1; transform: translate(-50%, -50%); } .compButton:not(.disabled):hover .compButtonTooltip { display: flex; } .compButton.disabled .anbg-round::before { display: none; } .compButton.disabled .anbg-round-parent::before { display: none; } .compButton[active='true'] .compButtonRgt { color: var(--accent-red-3); } .compButton_red { background: var(--primary-button-texture-default) center center / 100% 100% no-repeat; color: var(--d-on-primary); border-color: transparent; min-height: 3rem; } :not(.disabled) > .compButton_red:hover { background: var(--primary-button-texture-hover) center center / 100% 100% no-repeat; color: var(--h-on-primary); } :not(.disabled) > .compButton_red:focus { background: var(--primary-button-texture-focused) center center / 100% 100% no-repeat; color: var(--p-on-primary); } :not(.disabled) > .compButton_red:active { background: var(--primary-button-texture-pressed) center center / 100% 100% no-repeat; color: var(--p-on-primary); } .compButton_red.disabled { background: var(--primary-button-texture-disabled) center center / 100% 100% no-repeat; color: var(--d-on-primary); opacity: 0.33; } .compButton_red:hover.disabled { background: var(--primary-button-texture-disabled-hover) center center / 100% 100% no-repeat; color: var(--d-on-primary); opacity: 0.33; } .compButton_dark_round { background: var(--dark-round-button-texture-default-inline) center center / 100% 100% no-repeat; color: var(--d-on-surface); border-color: transparent; height: 3rem; width: 3rem; border-radius: 100%; } :not(.disabled) > .compButton_dark_round:hover { background: var(--dark-round-button-texture-default-inline) center center / 100% 100% no-repeat; color: var(--h-on-surface); } :not(.disabled) > .compButton_dark_round:focus { background: var(--dark-round-button-texture-default-inline) center center / 100% 100% no-repeat; color: var(--p-on-surface); } :not(.disabled) > .compButton_dark_round:active { background: var(--dark-round-button-texture-default-inline) center center / 100% 100% no-repeat; color: var(--p-on-surface); } .compButton_dark_round.disabled { background: var(--dark-round-button-texture-default-inline) center center / 100% 100% no-repeat; color: var(--d-on-surface); opacity: 0.33; } .compButton_dark_round:hover.disabled { background: var(--dark-round-button-texture-default-inline) center center / 100% 100% no-repeat; color: var(--d-on-surface); opacity: 0.33; } .compButton_secondary_round { width: 5rem; height: 5rem; border-radius: 100%; background-color: var(--d-secondary); display: flex; justify-content: center; align-items: center; border: none; flex-shrink: 0; } .compButton_secondary_round .material-symbols-outlined { font-size: 2.25rem; } .compButton_outlined { background: transparent; color: var(--d-on-surface); border-color: var(--d-outline); } .compButton_outlined:not(.menuButton) { max-height: 3rem; } .compButton_outlined.disabled { opacity: 0.33; } :not(.disabled):not(.frameless) > .compButton_outlined:hover { background-color: var(--hover-transparency); color: var(--h-on-surface); border-color: var(--h-outline); } :not(.disabled):not(.frameless) > .compButton_outlined:active { background: transparent; color: var(--h-on-surface); border-color: var(--h-outline-variant); } .compButton_primal { background: var(--faction-primal-button-texture-default-inline) center center / 100% 100% no-repeat; color: var(--d-on-primary); border-color: transparent; min-height: 3rem; } :not(.disabled) > .compButton_primal:hover { background: var(--faction-primal-button-texture-hover-inline) center center / 100% 100% no-repeat; color: var(--h-on-primary); } :not(.disabled) > .compButton_primal:focus { background: var(--faction-primal-button-texture-focused-inline) center center / 100% 100% no-repeat; color: var(--p-on-primary); } :not(.disabled) > .compButton_primal:active { background: var(--faction-primal-button-texture-pressed-inline) center center / 100% 100% no-repeat; color: var(--p-on-primary); } .compButton_primal.disabled { background: var(--faction-primal-button-texture-disabled-inline) center center / 100% 100% no-repeat; color: var(--d-on-primary); opacity: 0.33; } .compButton_primal:hover.disabled { background: var(--faction-primal-button-texture-disabled-hover-inline) center center / 100% 100% no-repeat; color: var(--d-on-primary); opacity: 0.33; } .compButton_order { background: var(--faction-order-button-texture-default-inline) center center / 100% 100% no-repeat; color: var(--d-on-primary); border-color: transparent; min-height: 3rem; } :not(.disabled) > .compButton_order:hover { background: var(--faction-order-button-texture-hover-inline) center center / 100% 100% no-repeat; color: var(--h-on-primary); } :not(.disabled) > .compButton_order:focus { background: var(--faction-order-button-texture-focused-inline) center center / 100% 100% no-repeat; color: var(--p-on-primary); } :not(.disabled) > .compButton_order:active { background: var(--faction-order-button-texture-pressed-inline) center center / 100% 100% no-repeat; color: var(--p-on-primary); } .compButton_order.disabled { background: var(--faction-order-button-texture-disabled-inline) center center / 100% 100% no-repeat; color: var(--d-on-primary); opacity: 0.33; } .compButton_order:hover.disabled { background: var(--faction-order-button-texture-disabled-hover-inline) center center / 100% 100% no-repeat; color: var(--d-on-primary); opacity: 0.33; } .compButton_legion { background: var(--faction-legion-button-texture-default-inline) center center / 100% 100% no-repeat; color: var(--d-on-primary); border-color: transparent; min-height: 3rem; } :not(.disabled) > .compButton_legion:hover { background: var(--faction-legion-button-texture-hover-inline) center center / 100% 100% no-repeat; color: var(--h-on-primary); } :not(.disabled) > .compButton_legion:focus { background: var(--faction-legion-button-texture-focused-inline) center center / 100% 100% no-repeat; color: var(--p-on-primary); } :not(.disabled) > .compButton_legion:active { background: var(--faction-legion-button-texture-pressed-inline) center center / 100% 100% no-repeat; color: var(--p-on-primary); } .compButton_legion.disabled { background: var(--faction-legion-button-texture-disabled-inline) center center / 100% 100% no-repeat; color: var(--d-on-primary); opacity: 0.33; } .compButton_legion:hover.disabled { background: var(--faction-legion-button-texture-disabled-hover-inline) center center / 100% 100% no-repeat; color: var(--d-on-primary); opacity: 0.33; } .compButton_conclave { background: var(--faction-conclave-button-texture-default-inline) center center / 100% 100% no-repeat; color: var(--d-on-primary); border-color: transparent; min-height: 3rem; } :not(.disabled) > .compButton_conclave:hover { background: var(--faction-conclave-button-texture-hover-inline) center center / 100% 100% no-repeat; color: var(--h-on-primary); } :not(.disabled) > .compButton_conclave:focus { background: var(--faction-conclave-button-texture-focused-inline) center center / 100% 100% no-repeat; color: var(--p-on-primary); } :not(.disabled) > .compButton_conclave:active { background: var(--faction-conclave-button-texture-pressed-inline) center center / 100% 100% no-repeat; color: var(--p-on-primary); } .compButton_conclave.disabled { background: var(--faction-conclave-button-texture-disabled-inline) center center / 100% 100% no-repeat; color: var(--d-on-primary); opacity: 0.33; } .compButton_conclave:hover.disabled { background: var(--faction-conclave-button-texture-disabled-hover-inline) center center / 100% 100% no-repeat; color: var(--d-on-primary); opacity: 0.33; } .compButton.frameless > a.border, .compButton.frameless > button.border, .compButton.frameless > div.border, .compButtonDropdown.frameless .compButton.frameless > a.border, .compButtonDropdown.frameless .compButton.frameless > button.border, .compButtonDropdown.frameless .compButton.frameless > div.border { border: none; } /* */ /* Comp Input Field */ .compInputField.type_range .compInputFieldInput, .compInputField.type_range_multi_value .compInputFieldInput, .compInputField input[type="range"] { border: none !important; margin: 0; } .compInputField input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 0.2rem; background: var(--d-on-surface); outline: none; border-radius: 0.1rem; cursor: pointer; } .compInputField input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--d-primary) 0%, var(--d-primary) var(--range-progress, 0%), var(--d-on-surface) var(--range-progress, 0%), var(--d-on-surface) 100%); height: 0.2rem; border-radius: 0.1rem; z-index: 1; } .compInputField input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 0.8rem; height: 0.8rem; background: var(--accent-red-5); border-radius: 50%; margin-top: -0.3rem; cursor: pointer; z-index: 10; position: relative; } .compInputField input[type="range"]::-moz-range-track { background: var(--d-on-surface); height: 0.2rem; } .compInputField input[type="range"]::-moz-range-progress { background: var(--d-primary); height: 0.2rem; } .compInputField input[type="range"]::-moz-range-thumb { width: 0.8rem; height: 0.8rem; background: var(--accent-red-5); border-radius: 50%; cursor: pointer; z-index: 10; } .compInputField .rangeContainer { position: relative; width: 100%; } .compInputField .rangeTrack { position: relative; width: 100%; } .compInputField .range-slider-tooltip { position: absolute; top: -2.85rem; left: 0%; transform: translateX(-50%); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.15s ease, visibility 0.15s ease; z-index: 20; } .compInputField .range-slider-tooltip.is-dragging { opacity: 1; visibility: visible; } .compInputField .range-slider-tooltip-shape { width: 2.5rem; height: 2.5rem; background: var(--d-primary); border-radius: 50% 50% 0 50%; transform: rotate(45deg); transform-origin: center center; display: flex; align-items: center; justify-content: center; } .compInputField .range-slider-tooltip-value { transform: rotate(-45deg); line-height: 1; white-space: nowrap; } .compInputField .rangeInputFrom, .compInputField .rangeInputTo { position: absolute; width: 100%; z-index: 1; } .compInputField .rangeInputTo, .compInputField .rangeInputTo::-webkit-slider-runnable-track, .compInputField .rangeInputFrom::-webkit-slider-runnable-track { background: transparent !important; } .compInputField .rangeInputFrom { z-index: 2; } .compInputField .rangeInputTo { z-index: 3; } .compInputField input[type="number"]::-webkit-outer-spin-button, .compInputField input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .compInputField input[type="number"]::-moz-spin-button { -moz-appearance: none; margin: 0; } .compInputField { transition: all 0.3s ease-in-out; } .compInputField .compInputFieldInput { transition: all 0.3s ease-in-out; height: 3rem; } .compInputField input { background: transparent; color: inherit; border: none; transition: all 0.3s ease-in-out;} .compInputField.disabled { opacity: 0.3; } .compInputField:not(.type_range_multi_value):not(.type_range) .compInputFieldInput input, .compInputField:not(.type_range_multi_value):not(.type_range) .compInputFieldInput textarea { background: transparent; border: transparent; } .compInputField:not(.type_range_multi_value):not(.type_range) .compInputFieldInput input:hover, .compInputField:not(.type_range_multi_value):not(.type_range) .compInputFieldInput textarea:hover, .compInputField:not(.type_range_multi_value):not(.type_range) .compInputFieldInput input:active, .compInputField:not(.type_range_multi_value):not(.type_range) .compInputFieldInput textarea:active, .compInputField:not(.type_range_multi_value):not(.type_range) .compInputFieldInput input:focus, .compInputField:not(.type_range_multi_value):not(.type_range) .compInputFieldInput textarea:focus { background: transparent; border: transparent; } .compInputField:not(.type_range_multi_value):not(.type_range):not(.outlined) .compInputFieldInput { position: relative; z-index: 1; background: linear-gradient(90deg, var(--d-surface-container) 50%, var(--d-surface-container-low) 100%); } .compInputField:not(.type_range_multi_value):not(.type_range):not(.outlined) .compInputFieldInput::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--d-surface-container) 50%, var(--d-surface-container) 100%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .compInputField.normal:not(.type_range_multi_value):not(.type_range):not(.outlined):hover .compInputFieldInput::before, .compInputField.normal:not(.type_range_multi_value):not(.type_range):not(.outlined):active .compInputFieldInput::before, .compInputField.normal:not(.type_range_multi_value):not(.type_range):not(.outlined):focus-within .compInputFieldInput::before { opacity: 1; } .compInputField input:-webkit-autofill, .compInputField input:-webkit-autofill:hover, .compInputField input:-webkit-autofill:focus, .compInputField input:-webkit-autofill:active { background: transparent; -webkit-background-clip: text; -webkit-box-shadow: 0 0 0 1000px transparent inset; -webkit-text-fill-color: var(--d-on-surface); caret-color: var(--d-on-surface); transition: background-color 9999s ease-out 0s; } /* Label Text */ .compInputField.normal > label { color: var(--p-on-surface); } .compInputField.disabled > label { color: var(--p-on-surface); } .compInputField.inner_disabled > label { color: var(--p-on-surface); } .compInputField.error > label { color: var(--d-error); } /* */ /* Helper/Span Text */ .compInputField.normal > span { color: var(--p-on-surface); } .compInputField.disabled > span { color: var(--p-on-surface); } .compInputField.inner_disabled > span { color: var(--p-on-surface); } .compInputField.error > span { color: var(--d-error); } /* */ /* Focus extra (caret color) */ .compInputField.normal:focus-within .compInputFieldInput { caret-color: var(--d-primary); } /* Disabled */ .compInputField.disabled:not(.type_range_multi_value):not(.type_range):not(.outlined) .compInputFieldInput::before { background: linear-gradient(90deg, var(--d-surface-container) 50%, var(--d-surface-container-low) 100%); opacity: 1; } /* Inner Disabled */ .compInputField.inner_disabled:not(.type_range_multi_value):not(.type_range):not(.outlined) .compInputFieldInput::before { background: linear-gradient(90deg, var(--d-surface-container) 50%, var(--d-surface-container-low) 100%); opacity: 1; } /* Error */ .compInputField.error:not(.type_range_multi_value):not(.type_range):not(.outlined) .compInputFieldInput::before { background: linear-gradient(90deg, var(--d-surface-container) 50%, var(--d-surface-container-low) 100%); opacity: 1; } /* */ /* Border */ .compInputField.normal.framed .compInputFieldInput { border: 1px solid var(--d-surface-variant); } .compInputField.normal.framed:hover .compInputFieldInput { border: 1px solid var(--d-surface-variant); } .compInputField.normal.framed:active .compInputFieldInput { border: 1px solid var(--d-surface-variant); } .compInputField.normal.framed:focus-within .compInputFieldInput { border: 1px solid var(--d-primary); } .compInputField.disabled.framed .compInputFieldInput { border: 1px solid var(--d-surface-variant); } .compInputField.inner_disabled.framed .compInputFieldInput { border: 1px solid var(--d-surface-variant); } .compInputField.error.framed .compInputFieldInput { border: 1px solid var(--d-error); } .compInputField.error.framed:hover .compInputFieldInput { border: 1px solid var(--d-error); } /* */ /* Input Text */ .compInputField.normal .compInputFieldInput { color: var(--d-on-surface); } .compInputField.normal:hover .compInputFieldInput { color: var(--h-on-surface); } .compInputField.normal:active .compInputFieldInput { color: var(--p-on-surface); } .compInputField.normal:focus-within .compInputFieldInput { color: var(--d-on-surface); } .compInputField.disabled .compInputFieldInput { color: var(--d-on-surface); } .compInputField.inner_disabled .compInputFieldInput { color: var(--d-on-surface); } .compInputField.error .compInputFieldInput { color: var(--d-on-surface); } /* */ /* Input Placeholder */ .compInputField.normal .compInputFieldInput ::placeholder { color: var(--d-on-surface); } .compInputField.normal:hover .compInputFieldInput ::placeholder { color: var(--h-on-surface); } .compInputField.normal:active .compInputFieldInput ::placeholder { color: var(--p-on-surface); } .compInputField.normal:focus-within .compInputFieldInput ::placeholder { color: var(--d-on-surface); } .compInputField.disabled .compInputFieldInput ::placeholder { color: var(--d-on-surface); } .compInputField.inner_disabled .compInputFieldInput ::placeholder { color: var(--d-on-surface); } .compInputField.error .compInputFieldInput ::placeholder { color: var(--d-on-surface); } /* */ /* Left Icon */ .compInputField.normal .compInputFieldLft span { color: var(--d-on-surface); } .compInputField.normal:hover .compInputFieldLft span { color: var(--h-on-surface); } .compInputField.normal:active .compInputFieldLft span { color: var(--p-on-surface); } .compInputField.normal:focus-within .compInputFieldLft span { color: var(--d-on-surface); } .compInputField.disabled .compInputFieldLft span { color: var(--d-on-surface); } .compInputField.inner_disabled .compInputFieldLft span { color: var(--d-on-surface); } .compInputField.error .compInputFieldLft span { color: var(--d-on-surface); } /* */ /* Right Icon */ .compInputField.normal .compInputFieldRgt span { color: var(--d-on-surface); } .compInputField.normal:hover .compInputFieldRgt span { color: var(--h-on-surface); } .compInputField.normal:active .compInputFieldRgt span { color: var(--p-on-surface); } .compInputField.normal:focus-within .compInputFieldRgt span { color: var(--d-on-surface); } .compInputField.disabled .compInputFieldRgt span { color: var(--d-on-surface); } .compInputField.inner_disabled .compInputFieldRgt span { color: var(--d-on-surface); } .compInputField.error .compInputFieldRgt span { color: var(--d-error); } /* */ .compInputField.normal.frameless .compInputFieldInput { border: 1px solid transparent; } .compInputField.normal.frameless:focus-within:not(.type_range_multi_value):not(.type_range) .compInputFieldInput { border-bottom-color: var(--d-primary); } /**/ /* Comp Text Area */ .compTextArea { transition: all 0.3s ease-in-out; } .compTextArea .compTextAreaField { height: 5rem; border: none; transition: all 0.3s ease-in-out; outline: none; } .compTextArea.disabled { opacity: 0.3; } .compTextArea .compTextAreaField:-webkit-autofill, .compTextArea .compTextAreaField:-webkit-autofill:hover, .compTextArea .compTextAreaField:-webkit-autofill:focus, .compTextArea .compTextAreaField:-webkit-autofill:active { background: transparent; -webkit-background-clip: text; -webkit-box-shadow: 0 0 0 1000px transparent inset; -webkit-text-fill-color: var(--d-on-surface); caret-color: var(--d-on-surface); transition: background-color 9999s ease-out 0s; } /* Label Text */ .compTextArea.normal > label { color: var(--p-on-surface); } .compTextArea.disabled > label { color: var(--p-on-surface); } .compTextArea.inner_disabled > label { color: var(--p-on-surface); } .compTextArea.error > label { color: var(--d-error); } /* */ /* Helper/Span Text */ .compTextArea.normal > span { color: var(--p-on-surface); } .compTextArea.disabled > span { color: var(--p-on-surface); } .compTextArea.inner_disabled > span { color: var(--p-on-surface); } .compTextArea.error > span { color: var(--d-error); } /* */ /* Filled Version */ /* Background */ .compTextAreaField { position: relative; z-index: 1; background: transparent; width: 100%; height: auto; resize: vertical; } .compTextAreaFieldContainer { position: relative; z-index: 1; background: linear-gradient(90deg, var(--d-surface-container) 0%, var(--d-surface-container-low) 100%); } .compTextAreaFieldContainer::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--d-surface-container) 0%, var(--d-surface-container) 100%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .compTextArea.normal:hover .compTextAreaFieldContainer::before, .compTextArea.normal:focus-within .compTextAreaFieldContainer::before { opacity: 1; } /* Transitions possible */ .compTextArea.normal:hover .compTextAreaFieldContainer::before, .compTextArea.normal:active .compTextAreaFieldContainer::before, .compTextArea.normal:focus-within .compTextAreaFieldContainer::before { opacity: 1; } /* Focus extra (caret color) */ .compTextArea.normal:focus-within .compTextAreaField { caret-color: var(--d-primary); } /* Disabled */ .compTextArea.disabled .compTextAreaFieldContainer::before { background: linear-gradient(90deg, var(--d-surface-container) 0%, var(--d-surface-container-low) 100%); opacity: 1; } /* Inner Disabled */ .compTextArea.inner_disabled .compTextAreaFieldContainer::before { background: linear-gradient(90deg, var(--d-surface-container) 0%, var(--d-surface-container-low) 100%); opacity: 1; } /* Error */ .compTextArea.error .compTextAreaFieldContainer::before { background: linear-gradient(90deg, var(--d-surface-container) 0%, var(--d-surface-container-low) 100%); opacity: 1; } /* */ /* Border */ .compTextArea.normal.framed .compTextAreaField { border: 1px solid var(--d-surface-variant); } .compTextArea.normal.framed:hover .compTextAreaField { border: 1px solid var(--d-surface-variant); } .compTextArea.normal.framed:active .compTextAreaField { border: 1px solid var(--d-surface-variant); } .compTextArea.normal.framed:focus-within .compTextAreaField { border: 1px solid var(--d-primary); } .compTextArea.disabled.framed .compTextAreaField { border: 1px solid var(--d-surface-variant); } .compTextArea.inner_disabled.framed .compTextAreaField { border: 1px solid var(--d-surface-variant); } .compTextArea.error.framed .compTextAreaField { border: 1px solid var(--d-error); } .compTextArea.error.framed:hover .compTextAreaField { border: 1px solid var(--d-error); } /* */ /* Input Text */ .compTextArea.normal .compTextAreaField { color: var(--d-on-surface); } .compTextArea.normal:hover .compTextAreaField { color: var(--h-on-surface); } .compTextArea.normal:active .compTextAreaField { color: var(--p-on-surface); } .compTextArea.normal:focus-within .compTextAreaField { color: var(--d-on-surface); } .compTextArea.disabled .compTextAreaField { color: var(--d-on-surface); } .compTextArea.inner_disabled .compTextAreaField { color: var(--d-on-surface); } .compTextArea.error .compTextAreaField { color: var(--d-on-surface); } /* */ /* Input Placeholder */ .compTextArea.normal .compTextAreaField::placeholder { color: var(--d-on-surface); } .compTextArea.normal:hover .compTextAreaField::placeholder { color: var(--h-on-surface); } .compTextArea.normal:active .compTextAreaField::placeholder { color: var(--p-on-surface); } .compTextArea.normal:focus-within .compTextAreaField::placeholder { color: var(--d-on-surface); } .compTextArea.disabled .compTextAreaField::placeholder { color: var(--d-on-surface); } .compTextArea.inner_disabled .compTextAreaField::placeholder { color: var(--d-on-surface); } .compTextArea.error .compTextAreaField::placeholder { color: var(--d-on-surface); } /* */ /* Outlined Version */ /* Placeholder & Background */ .compTextArea.outlined .compTextAreaField { background: transparent; color: var(--d-on-surface); } .compTextArea.outlined:hover .compTextAreaField { background: transparent; color: var(--h-on-surface); } .compTextArea.outlined:active .compTextAreaField { background: transparent; color: var(--p-on-surface); } .compTextArea.outlined:focus-within .compTextAreaField { background: transparent; color: var(--d-on-surface); } /* */ /* */ .compTextArea.normal.frameless .compTextAreaField { border: 1px solid transparent; } .compTextArea.normal.frameless:focus-within, .compTextAreaField { border-bottom-color: var(--d-primary); } /**/ /* Comp Media Field */ .compMediaField { transition: all 0.3s ease-in-out; } .compMediaField.disabled { opacity: 0.3; pointer-events: none; } .compMediaField.is-dragging-over .compMediaFieldTrigger { border-color: var(--d-primary); background: linear-gradient(90deg, var(--d-primary) 20%, var(--d-surface-container-low) 100%); } .compMediaField.is-dragging-over * { pointer-events: none; } .compMediaField .compMediaFieldTrigger { min-height: 8rem; border: 2px dashed var(--d-surface-variant); background: linear-gradient(90deg, var(--d-surface-container) 50%, var(--d-surface-container-low) 100%); cursor: pointer; transition: all 0.3s ease-in-out; } .compMediaField.normal .compMediaFieldTrigger:hover, .compMediaField.normal .compMediaFieldTrigger:focus-visible { border-color: var(--d-primary); } .compMediaField.error .compMediaFieldTrigger { border-color: var(--d-error); } .compMediaField .compMediaFieldPreviewGrid:empty { display: none; } .compMediaField .compMediaFieldPreviewItem { position: relative; width: 5.5rem; height: 5.5rem; min-width: 0; min-height: 0; aspect-ratio: 1 / 1; border: 1px solid var(--d-surface-variant); overflow: hidden; } .compMediaField .compMediaFieldPreviewItem img { width: 100%; height: 100%; object-fit: cover; display: block; } .compMediaField .compMediaFieldRemoveBtn { position: absolute; top: 0.25rem; right: 0.25rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: rgba(0, 0, 0, 0.65); color: var(--d-on-surface); border: none; cursor: pointer; z-index: 2; } .compMediaField .compMediaFieldRemoveBtn .material-symbols-outlined { font-size: 1rem; line-height: 1; color: var(--d-on-surface); } .compMediaField.normal > label { color: var(--p-on-surface); } .compMediaField.error > label { color: var(--d-error); } .compMediaField.normal > span.helperField { color: var(--p-on-surface); } .compMediaField.error > span.helperField { color: var(--d-error); } /**/ /* CompCards */ .compCards { transition: all 0.3s ease; background-color: #000; background-position: center; background-size: cover; background-repeat: no-repeat; position: relative; } .compCard_small .compCardContent > * { opacity: 0; transition: opacity 0.3s ease-in; transition: background 0.3s ease; } .compCard_small:hover .compCardContent { background: linear-gradient(180deg, transparent 25%, var(--primary-9) 75%) center / cover no-repeat; } .compCard_small:hover .compCardContent > * { opacity: 1; } .compCard_medium .compCardContent { background: linear-gradient(180deg, transparent 25%, var(--primary-9) 75%) center / cover no-repeat; transition: background 0.3s ease; } .compCard_medium:hover .compCardContent { background: linear-gradient(180deg, transparent 0%, var(--primary-9) 75%) center / cover no-repeat; } .compCard_medium:hover .compCardText { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; align-self: stretch; } .compCardTitle { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; align-self: stretch; } /* Gradient Border with Fade Effect */ .compCards::before { content: ''; position: absolute; top: -3px; right: -3px; bottom: -3px; left: -3px; border: 5px solid; border-image-slice: 1 !important; opacity: 0; transition: opacity 0.3s ease; z-index: 1; } .compCards:hover::before { opacity: 1; } /* */ /* Border Colors */ .compCard_news::before { border-image: linear-gradient(180deg, var(--accent-brown-3) 0%, var(--primary-9) 50%); } .compCard_legion::before { border-image: linear-gradient(180deg, var(--faction-legion-5) 0%, var(--primary-9) 50%); } .compCard_order::before { border-image: linear-gradient(180deg, var(--faction-order-5) 0%, var(--primary-9) 50%); } .compCard_conclave::before { border-image: linear-gradient(180deg, var(--faction-conclave-5) 0%, var(--primary-9) 50%); } .compCard_primal::before { border-image: linear-gradient(180deg, var(--faction-primal-5) 0%, var(--primary-9) 50%); } /* */ /* Card Sizes */ @media only screen and (min-width: 1001px) { .compCards:hover { transform: scale(1.1); } .compCard_small, .compAnchorCard_small { aspect-ratio: 3 / 2; max-width: var(--co-03); } .compCard_medium, .compAnchorCard_medium { aspect-ratio: 4 / 3; max-width: var(--co-04); } } @media only screen and (max-width: 1000px) { .compCards { width: var(--m-co-04); aspect-ratio: 4 / 3; } .compCards::before { opacity: 1; } .compCard_small .compCardContent { background: linear-gradient(180deg, transparent 25%, var(--primary-9) 75%) center / cover no-repeat; } .compCard_small .compCardContent > * { opacity: 1; } .compCard_medium .compCardContent { background: linear-gradient(180deg, transparent 0%, var(--primary-9) 75%) center / cover no-repeat; } .compCard_medium .compCardText { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; align-self: stretch; } } /* */ /**/ /* Comp Carousel Buttons */ .compCarouselButtons { background: transparent; border: none; padding: 0; margin: 0; cursor: pointer; } .compCarouselButtons.disabled, .compCarouselButtons:disabled { opacity: 0.33; } .compCarouselButtons svg path { fill: var(--d-on-surface-variant); } /**/ /* Comp Faction Menu */ .compFactionsMenu .factionIdentity { border-top: none; border-left: none; border-right: none; border-bottom: 5px solid transparent; transition: border 0.3s ease, border-color 0.3s ease; } .compFactionsMenu .factionIdentity .factionCrysalite svg { width: 2.4rem; height: 2.4rem; } .compFactionsMenu .factionIdentity .factionCrysalite svg .layer_1 { transition: fill 0.3s ease, border 0.3s ease, border-color 0.3s ease; } .compFactionsMenu .primalIdentity.factionIdentity[status=true] .factionCrysalite svg .layer_1 { fill: var(--faction-primal-5); } .compFactionsMenu .orderIdentity.factionIdentity[status=true] .factionCrysalite svg .layer_1 { fill: var(--faction-order-5); } .compFactionsMenu .conclaveIdentity.factionIdentity[status=true] .factionCrysalite svg .layer_1 { fill: var(--faction-conclave-5); } .compFactionsMenu .legionIdentity.factionIdentity[status=true] .factionCrysalite svg .layer_1 { fill: var(--faction-legion-5); } .compFactionsMenu .faction-item-neutral.factionIdentity[status=true] .factionCrysalite svg .layer_1 { fill: var(--d-secondary); } .compFactionsMenu .primalIdentity.factionIdentity[status=true].hasBorder { border-color: var(--faction-primal-5); } .compFactionsMenu .orderIdentity.factionIdentity[status=true].hasBorder { border-color: var(--faction-order-5); } .compFactionsMenu .conclaveIdentity.factionIdentity[status=true].hasBorder { border-color: var(--faction-conclave-5); } .compFactionsMenu .legionIdentity.factionIdentity[status=true].hasBorder { border-color: var(--faction-legion-5); } .compFactionsMenu .faction-item-neutral.factionIdentity[status=true].hasBorder { border-color: var(--d-secondary); } /**/ /* Comp Toggle */ .compToggleBox { width: var(--spc-5); height: var(--spc-5); } .compToggleBox > div { width: 1.5rem; height: 0.75rem; border-radius: 0.4rem; transition: all 0.3s; } .compToggleBox > div > div { width: 0.45rem; height: 0.45rem; border-radius: 0.4rem; transition: all 0.3s; } .compToggle.disabled { opacity: 0.33; } .compToggle[status="false"] > .compToggleBox > div > div { margin-left: 0.10rem; } .compToggle[status="true"] > .compToggleBox > div > div { margin-left: 0.90rem; } .compToggle[status="false"] > .compToggleBox > div { background: var(--d-on-surface); } .compToggle[status="true"] > .compToggleBox > div { background: var(--d-primary); } .compToggle[status="false"]:hover > .compToggleBox > div { background: var(--d-on-surface); } .compToggle[status="true"]:hover > .compToggleBox > div { background: var(--h-primary); } /**/ /* Comp Switch */ .compSwitch { position: relative; z-index: 1; box-sizing: border-box; border-radius: 100px; overflow: hidden; display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); max-width: 100%; vertical-align: top; align-items: center; justify-items: stretch; } .compSwitch-default-size { width: max-content; } .compSwitch > input[type="hidden"] { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; } .compSwitchHighlight { position: absolute; z-index: 0; border-radius: 100px; background-color: var(--d-surface-container); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--switch-total)); transform: translateX(calc(100% * var(--switch-idx))); pointer-events: none; } .compSwitchOption { position: relative; z-index: 1; cursor: pointer; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: var(--spc-1); padding: var(--spc-2); white-space: nowrap; min-width: max-content; text-align: center; } .compSwitchOption .compSwitchOptionLabel, .compSwitchOption .compSwitchOptionIcon { color: var(--d-on-surface); transition: color 0.3s ease; } .compSwitchOption.optionActive .compSwitchOptionLabel, .compSwitchOption.optionActive .compSwitchOptionIcon { color: var(--d-secondary); } .compSwitch.disabled { opacity: 0.33; pointer-events: none; } /**/ /* Comp Checkable */ .compCheckable { column-gap: var(--spc-2); padding: var(--spc-1); } .compCheckableIcon { width: 1.2rem; height: 1.2rem; } [status="false"] .compCheckableIcon span { color: var(--d-on-surface); transition: color 0.3s ease; } [status="true"] .compCheckableIcon span { color: var(--d-primary); transition: color 0.3s ease; } .compCheckable.disabled { pointer-events: none; cursor: not-allowed; } /**/ /* Comp Multiple Options */ .compCheckableMultipleOptions .checkableOption { column-gap: var(--spc-2); padding: var(--spc-1); font-family: Commissioner; font-size: 0.8rem; line-height: 150%; font-weight: 400; color: var(--d-on-surface); transition: color 0.3s ease; } .checkableOption .compCheckableIcon { width: 1.2rem; height: 1.2rem; transition: color 0.3s ease; } .checkableOption[status="false"] .compCheckableIcon span { color: var(--d-on-surface); } .checkableOption[status="true"] .compCheckableIcon span { color: var(--d-primary); fill: var(--d-primary); } /**/ /* Comp Modal */ .compModal { position: fixed; z-index: 980; left: 0; top: 0; min-width: 100vw; min-width: 100dvw; width: 100%; height: 100vh; height: 100dvh; background: rgba(37, 46, 53, 0.75); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); overflow-y: auto; overflow-x: hidden; } .compModal_download { position: relative; } .modalContentContainer { height: stretch; } .modalBody { height: 100%; } @media screen and (min-width: 1001px) { .compModal_Download .CloseModalButton { position: absolute; top: var(--spc-9); right: var(--spc-7); } } @media screen and (max-width: 1000px) { .compModal_Download .CloseModalButton { position: absolute; top: 2%; right: 5%; } } /**/ /* Comp Modal — App Notifications (Achievement Rewards) */ .malediction-notifications-modal .modalContentContainer { height: auto; width: 100%; max-width: 44.25rem; } .malediction-notifications-modal .modalBody { height: auto; } .maledictionNotificationsPanel { min-width: 0; min-height: 0; width: 100%; } .malediction-notifications-modal.is-alert-state .maledictionNotificationsPanel { min-height: min(80vh, 40rem); } .malediction-notifications-modal.is-alert-state .maledictionNotificationsDetail, .malediction-notifications-modal.is-list-state .maledictionNotificationsAlert { display: none; } .malediction-notifications-modal.is-alert-state .maledictionNotificationsAlert, .malediction-notifications-modal.is-list-state .maledictionNotificationsDetail { display: flex; } .maledictionNotificationsAlertTitle { padding-top: var(--spc-7, 3rem); padding-bottom: var(--spc-7, 3rem); padding-left: var(--spc-5, 1.5rem); padding-right: var(--spc-5, 1.5rem); } .maledictionNotificationsAlertTitle .ttl-2 { max-width: 29rem; margin-left: auto; margin-right: auto; } .maledictionNotificationsAlertSpacer { flex: 1 0 0; min-height: var(--spc-5, 1.5rem); } .maledictionNotificationsDetailHeader { position: relative; padding: var(--spc-5, 1.5rem); gap: var(--spc-1, 0.375rem); } .maledictionNotificationsDetailClose { position: absolute; top: var(--spc-5, 1.5rem); right: var(--spc-5, 1.5rem); z-index: 2; } .maledictionNotificationsDetailMedia { padding: var(--spc-3, 0.75rem); gap: var(--spc-3, 0.75rem); } .maledictionNotificationsCounter { display: flex; align-items: center; justify-content: center; min-height: 2.25rem; min-width: 4.25rem; padding: var(--spc-1, 0.375rem) var(--spc-2, 0.5rem); border-radius: 100px; background: linear-gradient( 180deg, var(--d-surface-container-low, #343737) 0%, var(--d-surface-container-lowest, #121515) 100% ); color: var(--d-on-surface); } .maledictionNotificationsMedia { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 21.375rem; min-width: 0; min-height: 0; aspect-ratio: 1 / 1; overflow: hidden; } .maledictionNotificationsMedia.is-collection .maledictionNotificationsMediaFrame { width: 100%; height: 100%; min-width: 0; min-height: 0; aspect-ratio: 1 / 1; overflow: hidden; } .maledictionNotificationsMedia.is-avatar { padding: var(--spc-7, 3rem); box-sizing: border-box; } .maledictionNotificationsMedia.is-cover { padding: var(--spc-7, 3rem); aspect-ratio: auto; } .maledictionNotificationsMedia.is-avatar .maledictionNotificationsMediaFrame { width: 100%; height: 100%; min-width: 0; min-height: 0; aspect-ratio: 1 / 1; border-radius: 9999px; border: 5px solid var(--d-on-secondary-container, #f1eae0); overflow: hidden; } .maledictionNotificationsMedia.is-cover .maledictionNotificationsMediaFrame { width: 100%; min-width: 0; min-height: 0; border: 5px solid var(--d-on-secondary-container, #f1eae0); overflow: hidden; } .maledictionNotificationsMedia.is-cover .maledictionNotificationsMediaImage { height: auto; object-fit: contain; } .maledictionNotificationsMediaImage { width: 100%; height: 100%; object-fit: cover; display: block; } .maledictionNotificationsCta { border-top: 1.5px solid var(--d-surface-variant, #1e2121); padding: var(--spc-5, 1.5rem); gap: 1.25rem; } .maledictionNotificationsSecondaryCta.is-hidden, .maledictionNotificationsMedia.is-empty { display: none; } @media screen and (max-width: 1000px) { .maledictionNotificationsCta { flex-direction: column; align-items: stretch; } .maledictionNotificationsCta .compButton, .maledictionNotificationsCta .compButtonOuter { width: 100%; } } /**/ /* Comp Flip Card */ .comp_FlipCardAnchor, .comp_FlipCard, .comp_FlipCardContent { will-change: perspective, aspect-ratio, min-width, width, height, max-height, transform; transition: all 1s ease; } .comp_FlipCard { align-self: stretch; flex: 1 0 0; } /* Flip Card Border */ .comp_FlipCardContent { background: linear-gradient(180deg, transparent 0%, var(--d-surface-container-lowest) 100%); border-radius: 1.25rem; position: relative; transform-style: preserve-3d; cursor: pointer; } .comp_FlipCardContent::before { content: ''; position: absolute; top: -0.25rem; left: -0.25rem; right: -0.25rem; bottom: -0.25rem; background: linear-gradient(180deg, var(--d-surface-container-low) 0%, var(--d-surface-container-lowest) 100%); border-radius: 1.25rem; z-index: -1; transition: all 0.6s; } .comp_FlipCard:hover :not(.comp_FlipCardIfActive) .comp_FlipCardContent::before { background: linear-gradient(180deg, var(--d-surface-container-high) 0%, var(--d-surface-container-highest) 100%); } /**/ /* Flip Card Text */ .comp_FlipCardTitle { opacity: 0.33; transition: all 1s ease; z-index: 10; } .splide__slide:not(.is-active) .comp_FlipCardTitle { opacity: 0; } .splide__slide.is-active:hover .comp_FlipCardTitle { opacity: 1; transform: scale(1.1) translateY(var(--spc-5)); } .comp_FlipCardTitleMobile { flex-grow: 1; } /**/ /* Flip Card Sides */ .comp_FlipCardFrontSide { transform: rotateY(180deg); background-blend-mode: normal, normal, overlay, normal; } .comp_FlipCardBackSide { transform: rotateY(0deg); background-blend-mode: overlay, normal; filter: saturate(0); } .comp_FlipCardBackSide, .comp_FlipCardFrontSide { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 1rem; overflow: hidden; } .comp_FlipCard:hover :not(.comp_FlipCardIfActive).comp_FlipCardContent { transform: rotateY(180deg); } /**/ /* Flip Card Size */ @media screen and (min-width: 1001px) { .comp_FlipCardSize_Small { min-width: var(--co-04); max-height: var(--co-03); aspect-ratio: 4/3; } .comp_FlipCardSize_Medium { min-width: var(--co-06); max-height: var(--co-04); aspect-ratio: 3/2; } } /**/ /* On Slide Context */ .comp_FlipCardSlider .splide__list { display: flex; flex-wrap: nowrap; } .comp_FlipCardSlider .splide__list.is-active { position: relative; } .comp_FlipCardSlider .splide__list.is-active .comp_FlipCardContent { position: absolute; } .comp_FlipCardSlider .splide__slide:not(.is-active) a { pointer-events: none; } /* Flip Degree/Position on Slide Move */ .comp_FlipCardSlider .splide__slide:not(.is-active) .comp_FlipCardAnchor { perspective: 100px; } .comp_FlipCardSlider .splide__slide.is-prev .comp_FlipCardAnchor { perspective: 300px; } .comp_FlipCardSlider .splide__slide.is-next .comp_FlipCardAnchor { perspective: 300px; } .comp_FlipCardSlider .splide__slide .comp_FlipCard { transform: rotateY(0deg); } @media screen and (min-width: 1001px) { .comp_FlipCardSlider .splide__slide.is-active .comp_FlipCardContent:not(.flipAnimationPrev):not(.flipAnimationNext) { transform: rotateY(180deg); } .comp_FlipCardSlider .splide__slide.is-active:hover .comp_FlipCardContent:not(.flipAnimationPrev):not(.flipAnimationNext) { transform: rotateY(180deg) scale(1.1); } /* .comp_FlipCardSlider .splide__slide.is-prev > a, .comp_FlipCardSlider .splide__slide.is-next > a { perspective: 1500px; } */ .comp_FlipCardSlider .comp_FlipCard_Prev .comp_FlipCard { transform: rotateY(4deg); } .comp_FlipCardSlider .comp_FlipCard_Next .comp_FlipCard { transform: rotateY(-4deg); } .comp_FlipCardSlider .splide__slide.is-prev .comp_FlipCard { transform: rotateY(8deg); margin-right: 5rem; } .comp_FlipCardSlider .splide__slide.is-next .comp_FlipCard { transform: rotateY(-8deg); margin-left: 5rem; } } /**/ /* Flip Card Border */ .comp_FlipCardSlider .splide__slide.is-active .comp_FlipCardContent::before { background: linear-gradient(180deg, var(--d-surface-container-high) 0%, var(--d-surface-container-highest) 100%); } /**/ @media screen and (max-width: 1000px) { .comp_FlipCardSlider .comp_FlipCardTitle { opacity: 1; } .comp_FlipCardSlider .splide__slide.is-active .comp_FlipCardContent { transform: rotateY(180deg); } .comp_FlipCardSlider .splide__slide.is-active .comp_FlipCardContent::before { background: linear-gradient(180deg, var(--d-surface-container-high) 0%, var(--d-surface-container-highest) 100%); } .comp_FlipCardSlider .splide__slide:not(.is-active) .comp_FlipCardContent { transform: rotateY(0deg); } } /**/ /**/ /* Comp Snackbar */ .compSnackbar { color: var(--d-on-primary); } .compSnackbarContainer { position: fixed; z-index: 999; right: 0; } .compSnackbarSupportingTextContainer { align-items: flex-start; flex: 1 0 0; } .compSnackbarSupportingText { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 2; align-self: stretch; } .compSnackbarType_default { background: var(--snackbar-default) center center / 100% 100% no-repeat; } .compSnackbarType_error { background: var(--snackbar-error) center center / 100% 100% no-repeat; } .compSnackbarIcon { color: var(--d-on-primary); } /**/ /* Comp Title */ .compTitle_gradient { background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; max-width: fit-content; } [data-theme-type="malediction"] .compTitle_gradient_primary { background-image: linear-gradient( 91deg, var(--d-on-surface-variant) -0.1%, var(--h-secondary) 99.67% ); } [data-theme-type="malediction"] .compTitle_gradient_secondary { background-image: linear-gradient( 91deg, var(--p-on-surface) -0.48%, var(--h-secondary) 106.16% ); } [data-theme-type="herald"] .compTitle_gradient_primary { background-image: linear-gradient( 90deg, var(--d-on-primary-container) 0.48%, var(--d-primary) 65.87%, var(--d-on-primary-container) 100% ); } /**/ /* Comp Slider Bar */ /** Nesse componente teve muita repetição de CSS mudando apenas o seletor e o motivo disso é que quando se usa identificadores de tipos de navegadores (Exemplo: -webkit-slider-thumb, -moz-range-thumb, -ms-thumb) juntos, eles podem fazer com que o navegador ignore o bloco todo, pois ele não consegue interprentar um identificador de tipo de navegador diferente. */ .compSliderBarContainer { position: relative; } .compSliderBar { border-radius: 5px; height: 8px; background: var(--primary-9); -webkit-appearance: none; appearance: none; outline: none; cursor: grab; position: relative; } .compSliderBar:active { cursor: grabbing; } .compSliderBar::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; transform: rotate(45deg) translateY(-50%); flex-shrink: 0; cursor: grab; border-radius: none; } .compSliderBar::-webkit-slider-thumb:active { cursor: -webkit-grabbing; } .compSliderBar::-moz-range-thumb { appearance: none; width: 20px; height: 20px; transform: rotate(45deg) translateY(-50%); flex-shrink: 0; cursor: grab; border-radius: none; } .compSliderBar::-moz-range-thumb:active { cursor: -moz-grabbing; } .compSliderBar::-ms-thumb { appearance: none; width: 20px; height: 20px; transform: rotate(45deg) translateY(-50%); flex-shrink: 0; cursor: grab; border-radius: none; } .compSliderBar::-ms-thumb:active { cursor: grabbing; } .compSliderBar::-webkit-slider-runnable-track { width: 100%; height: 8px; background: var(--primary-9); border-radius: 5px; } .compSliderBar::-moz-range-track { width: 100%; height: 8px; background: var(--primary-9); border-radius: 5px; } .compSliderThumbIndicator { position: absolute; bottom: 300%; cursor: grab; z-index: 2; } .compSliderThumbIndicator:active { cursor: grabbing; } /**/ /* Comp Interactive Card */ .compInteractiveCard:not(.compInteractiveCard_CarouselSize) { min-height: var(--co-03); } .compInteractiveCard.compInteractiveCard_CarouselSize { min-height: var(--co-02); } .compInteractiveCard .miniatureMediaContainer, .compInteractiveCard .cardMediaContainer, .compInteractiveCard .boxMediaContainer { position: relative; } @media screen and (max-width: 1000px) { .compInteractiveCard:not(.compInteractiveCard_CarouselSize) .safeContentArea > div { min-height: var(--m-co-03); justify-content: flex-end; } .compInteractiveCard:not(.compInteractiveCard_CarouselSize) .miniatureMedia:not(.onModalResourceImage), .compInteractiveCard:not(.compInteractiveCard_CarouselSize) .boxMedia:not(.onModalResourceImage) { height: var(--m-co-03); width: var(--m-co-03); } .compInteractiveCard.compInteractiveCard_CarouselSize .safeContentArea { height: 100%; } .compInteractiveCard.compInteractiveCard_CarouselSize .safeContentArea > div { height: 100%; min-height: var(--m-co-02); justify-content: flex-end; } .compInteractiveCard.compInteractiveCard_CarouselSize .miniatureMedia:not(.onModalResourceImage), .compInteractiveCard.compInteractiveCard_CarouselSize .boxMedia:not(.onModalResourceImage) { height: 100%; width: 100%; } .compInteractiveCard.compInteractiveCard_CarouselSize .miniatureMedia { object-fit: cover; } .compInteractiveCard .onModalResourceImage { width: var(--m-co-04); } } @media screen and (min-width: 1001px) { .compInteractiveCard.resourceContainer { cursor: pointer; } .compInteractiveCard:not(.compInteractiveCard_CarouselSize) .safeContentArea > div { min-height: var(--co-03); justify-content: center; } .compInteractiveCard.compInteractiveCard_CarouselSize .safeContentArea > div { min-height: var(--co-02); justify-content: center; } .compInteractiveCard.miniatureContainer:hover .miniatureSubContainer, .compInteractiveCard.boxContainer:hover .boxSubContainer { transition: transform 0.3s ease; transform: scale(1.1); } .compInteractiveCard:not(.compInteractiveCard_CarouselSize) .miniatureMedia:not(.onModalResourceImage), .compInteractiveCard:not(.compInteractiveCard_CarouselSize) .boxMedia:not(.onModalResourceImage) { height: var(--co-03); width: var(--co-03); } .compInteractiveCard.compInteractiveCard_CarouselSize .miniatureMedia:not(.onModalResourceImage), .compInteractiveCard.compInteractiveCard_CarouselSize .boxMedia:not(.onModalResourceImage) { height: 100%; width: 100%; } .compInteractiveCard .onModalResourceImage { max-height: 60vh; max-height: 60dvh; } } .compInteractiveCard.is-invisible { opacity: 0; pointer-events: none; } .compInteractiveCard .lockContainer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; pointer-events: none; color: var(--d-on-surface); z-index: 1; } /**/ /* Comp Video Collection */ .comp_VideoList::-webkit-scrollbar { padding: var(--spc-2) var(--spc-2); width: 0.5rem; } .comp_VideoList::-webkit-scrollbar-track { background: var(--d-surface-variant); } .comp_VideoList::-webkit-scrollbar-thumb { background: var(--d-secondary); border: 0.2rem solid transparent; width: 0.4rem; box-sizing: border-box; } .comp_VideosOnTheList { aspect-ratio: 4 / 2; } .comp_VideosOnTheList img { min-width: 100%; height: 100%; object-fit: cover; } .comp_VideosContainerOnTheList { cursor: pointer; } .comp_VideosContainerOnTheList p { display: -webkit-box; -webkit-box-orient: vertical; align-self: stretch; overflow: hidden; text-overflow: ellipsis; } @media screen and (max-width: 1000px) { .comp_MainVideo { width: 100vw; width: 100dvw; min-width: 100vw; min-width: 100dvw; aspect-ratio: 4 / 2; } .comp_VideoCollectionMainContainer { gap: var(--spc-5); } .comp_VideoList { width: 100vw; width: 100dvw; min-width: 100vw; min-width: 100dvw; padding: 0 var(--spc-4); flex-direction: row; flex-wrap: nowrap !important; overflow-y: hidden; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; } .comp_VideosOnTheList { overflow: hidden; } .comp_VideosContainerOnTheList { flex-direction: column; flex-wrap: nowrap !important; } .comp_VideosContainerOnTheList p { -webkit-line-clamp: 2; line-clamp: 2; } } @media screen and (min-width: 1001px) { .comp_MainVideo iframe { aspect-ratio: 16/9; } .comp_VideoList { aspect-ratio: 16/9; max-height: var(--co-05); flex-direction: column; flex-wrap: nowrap !important; overflow: auto; } .comp_VideoCollectionMainContainer { gap: var(--spc-7); } .comp_VideosContainerOnTheList { flex-direction: row; flex-wrap: nowrap !important; } .comp_VideosContainerOnTheList p { -webkit-line-clamp: 3; line-clamp: 3; } } /**/ /* Comp New Card */ .comp_NewCard a[href="#"] { cursor: default; } .comp_NewCardAOS { overflow: hidden; } .comp_NewCard:not(.comp_NewCardCompactAlternative):not(.comp_NewCardSeekerBig):not(.comp_NewCardSeekerMedium):not(.comp_NewCardUnit) .comp_NewCardDescription { flex-grow: 1; align-self: stretch; } .comp_NewCard:not(.comp_NewCardCompactAlternative):not(.comp_NewCardSeekerBig):not(.comp_NewCardSeekerMedium):not(.comp_NewCardUnit) .comp_NewCardDescription p { align-self: stretch; } .comp_NewCard:not(.comp_NewCardCompactAlternative):not(.comp_NewCardSeekerBig):not(.comp_NewCardSeekerMedium):not(.comp_NewCardUnit) .comp_NewCardContent, .comp_NewCard:not(.comp_NewCardCompactAlternative):not(.comp_NewCardSeekerBig):not(.comp_NewCardSeekerMedium):not(.comp_NewCardUnit) .detailsAreInternal.comp_NewCardContentMainDetails { background-color: var(--d-surface); } .comp_NewCardContentContainer { border: 2px solid var(--d-surface-container-lowest); position: relative; } .comp_NewCardCompactAlternative .comp_NewCardImage, .comp_NewCardSeekerBig .comp_NewCardImage, .comp_NewCardSeekerMedium .comp_NewCardImage, .comp_NewCardUnit .comp_NewCardImage { position: relative; overflow: hidden; isolation: isolate; transform: translateZ(0); backface-visibility: hidden; } .comp_NewCardCompactAlternative .comp_NewCardImage::before, .comp_NewCardCompactAlternative .comp_NewCardImage::after, .comp_NewCardSeekerBig .comp_NewCardImage::before, .comp_NewCardSeekerBig .comp_NewCardImage::after, .comp_NewCardSeekerMedium .comp_NewCardImage::before, .comp_NewCardSeekerMedium .comp_NewCardImage::after, .comp_NewCardUnit .comp_NewCardImage::before, .comp_NewCardUnit .comp_NewCardImage::after { content: ""; position: absolute; inset: -1px; pointer-events: none; will-change: opacity; backface-visibility: hidden; transform: translateZ(0); } .comp_NewCardCompactAlternative .comp_NewCardImage::before { background: linear-gradient( 180deg, transparent 0%, var(--d-surface-container-lowest) 90%, var(--d-surface-container-lowest) 100% ); opacity: 1; z-index: 1; transition: opacity 0.45s cubic-bezier(0.25, 0.1, 0.25, 1) 0.05s; } .comp_NewCardCompactAlternative .comp_NewCardImage::after { background: linear-gradient( 180deg, transparent 0%, var(--d-surface-container-lowest) 60%, var(--d-surface-container-lowest) 100% ); opacity: 0; z-index: 2; transition: opacity 0.45s cubic-bezier(0.3, 0.3, 0.5, 1); } .comp_NewCardSeekerBig .comp_NewCardImage::before, .comp_NewCardSeekerMedium .comp_NewCardImage::before, .comp_NewCardUnit .comp_NewCardImage::before { background: linear-gradient( 180deg, transparent 0%, var(--d-surface-container-lowest) 90%, var(--d-surface-container-lowest) 100% ); opacity: 1; z-index: 1; transition: opacity 0.45s cubic-bezier(0.25, 0.1, 0.25, 1) 0.05s; } .comp_NewCardSeekerBig .comp_NewCardImage::after, .comp_NewCardSeekerMedium .comp_NewCardImage::after, .comp_NewCardUnit .comp_NewCardImage::after { background: linear-gradient( 180deg, transparent 0%, var(--d-surface-container-lowest) 80%, var(--d-surface-container-lowest) 100% ); opacity: 0; z-index: 2; transition: opacity 0.45s cubic-bezier(0.3, 0.3, 0.5, 1); } .comp_NewCard:not(.comp_NewCardLarge):not(.comp_NewCardLargeCompact) .comp_NewCardImage { flex-grow: 1; } .comp_NewCardImage img { object-fit: cover; aspect-ratio: 4/3; } .comp_NewCardUnit, .comp_NewCardUnit .comp_NewCardImage, .comp_NewCardUnit .comp_NewCardImage img { object-fit: cover; aspect-ratio: 1; } .comp_NewCardSeekerBig, .comp_NewCardSeekerBig .comp_NewCardImage, .comp_NewCardSeekerBig .comp_NewCardImage img, .comp_NewCardSeekerMedium, .comp_NewCardSeekerMedium .comp_NewCardImage, .comp_NewCardSeekerMedium .comp_NewCardImage img { object-fit: cover; aspect-ratio: 5/6; } .comp_NewCardDefault { align-self: stretch; } .comp_NewCardContent, .comp_NewCardImage { overflow: hidden; } .comp_NewCardLarge .comp_NewCardImage, .comp_NewCardLargeCompact .comp_NewCardImage, .comp_NewCardSeekerBig .comp_NewCardImage, .comp_NewCardSeekerMedium .comp_NewCardImage, .comp_NewCardUnit .comp_NewCardImage { flex: 0 0 auto; height: auto; } .comp_NewCardLarge .comp_NewCardImage .comp_NewCardAnchor, .comp_NewCardLargeCompact .comp_NewCardImage .comp_NewCardAnchor, .comp_NewCardSeekerBig .comp_NewCardImage .comp_NewCardAnchor, .comp_NewCardSeekerMedium .comp_NewCardImage .comp_NewCardAnchor, .comp_NewCardUnit .comp_NewCardImage .comp_NewCardAnchor { min-height: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; } .comp_NewCardContent { flex: 1 1 auto; z-index: 1; } .comp_NewCardContentContainer, .comp_NewCardContent { flex-grow: 1; } .comp_NewCardCTA { transition: background 0.3s ease; } .comp_NewCardCTA:not(.comp_NewCardSeekerBig):not(.comp_NewCardSeekerMedium):not(.comp_NewCardUnit) { border-top: 2px solid var(--d-surface-container-lowest); } .comp_NewCardCTA p, .comp_NewCardCTA span { transition: color 0.3s ease; } .comp_NewCardCTA p { color: var(--d-on-surface); } .comp_NewCardCTA span { color: var(--d-secondary); } .comp_NewCardPrimary .comp_NewCardCTA p { color: var(--d-on-surface); } .comp_NewCardPrimary .comp_NewCardCTA span { color: var(--d-primary); } .comp_NewCardSecondary .comp_NewCardCTA p { color: var(--d-on-surface); } .comp_NewCardSecondary .comp_NewCardCTA span { color: var(--d-secondary); } .comp_NewCardConclave .comp_NewCardCTA p { color: var(--d-on-surface); } .comp_NewCardConclave .comp_NewCardCTA span { color: var(--faction-conclave-7); } .comp_NewCardLegion .comp_NewCardCTA p { color: var(--d-on-surface); } .comp_NewCardLegion .comp_NewCardCTA span { color: var(--faction-legion-7); } .comp_NewCardOrder .comp_NewCardCTA p { color: var(--d-on-surface); } .comp_NewCardOrder .comp_NewCardCTA span { color: var(--faction-order-7); } .comp_NewCardPrimal .comp_NewCardCTA p { color: var(--d-on-surface); } .comp_NewCardPrimal .comp_NewCardCTA span { color: var(--faction-primal-7); } .comp_NewCard .factionCrysalite { border-bottom: 5px solid transparent; transition: border 0.3s ease, border-color 0.3s ease; } .comp_NewCard .factionCrysalite svg .layer_1 { transition: fill 0.3s ease, border 0.3s ease, border-color 0.3s ease; } .comp_NewCardCompact, .comp_NewCardCompactAlternative, .comp_NewCardSeekerBig, .comp_NewCardSeekerMedium, .comp_NewCardUnit { overflow: hidden; transition: all 0.3s ease; } .comp_NewCardSimplified .comp_NewCardContentTitle, .comp_NewCardSeekerMedium .comp_NewCardContentTitle { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; align-self: stretch; overflow: hidden; text-overflow: ellipsis; } .comp_NewCardSeekerBig .comp_NewCardContentTitle, .comp_NewCardUnit .comp_NewCardContentTitle { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; align-self: stretch; overflow: hidden; text-overflow: ellipsis; } .comp_NewCardCompact .comp_NewCardContentTags, .comp_NewCardCompact .comp_NewCardContentTitle, .comp_NewCardCompactAlternative .comp_NewCardContentTags, .comp_NewCardCompactAlternative .comp_NewCardContentTitle { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; align-self: stretch; overflow: hidden; text-overflow: ellipsis; } .comp_NewCardSeekerMedium .comp_NewCardTitleAnchor { min-width: 0; flex: 1; } .comp_NewCardSeekerBig .comp_NewCardContentTitle, .comp_NewCardSeekerMedium .comp_NewCardContentTitle { white-space: normal; overflow-wrap: break-word; word-wrap: break-word; hyphens: none; } .comp_NewCardCompact .comp_NewCardDescription { align-self: stretch; flex: 1 0 0; } .comp_NewCardCompact .comp_NewCardDescription p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; align-self: stretch; overflow: hidden; text-overflow: ellipsis; } .comp_NewCardCompactAlternative .comp_NewCardDescription p, .comp_NewCardSeekerBig .comp_NewCardDescription p, .comp_NewCardUnit .comp_NewCardDescription p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; align-self: stretch; overflow: hidden; text-overflow: ellipsis; } .comp_NewCardSeekerMedium .comp_NewCardDescription p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; align-self: stretch; overflow: hidden; text-overflow: ellipsis; } .comp_NewCardCompact .comp_NewCardContent { border: 2px solid var(--d-surface-container-lowest); position: absolute; transition: all 0.5s ease, display 0.1s ease; } .comp_NewCardUnit .comp_NewCardContent, .comp_NewCardSeekerBig .comp_NewCardContent, .comp_NewCardSeekerMedium .comp_NewCardContent, .comp_NewCardCompactAlternative .comp_NewCardContent { position: absolute; left: 0; right: 0; width: 100%; transition: heigth 0.3s ease, max-height 0.3s ease, min-height 0.3s ease, opacity 0.3s ease, gap 0.3s ease, top 0.3s ease, display 0.1s ease; } .comp_NewCardGallery .comp_NewCardContentMainDetails, .comp_NewCardGallery .comp_NewCardDescription { display: none; } .comp_NewCardDescription { align-self: stretch; } .comp_NewCardDescription p { align-self: stretch; } @media screen and (min-width: 1001px) { .comp_NewCardUnit .comp_NewCardDescription, .comp_NewCardUnit .comp_NewCardCTA, .comp_NewCardUnit .comp_NewCardButton, .comp_NewCardSeekerBig .comp_NewCardDescription, .comp_NewCardSeekerBig .comp_NewCardCTA, .comp_NewCardSeekerBig .comp_NewCardButton, .comp_NewCardSeekerMedium .comp_NewCardDescription, .comp_NewCardSeekerMedium .comp_NewCardCTA, .comp_NewCardSeekerMedium .comp_NewCardButton { max-height: 0; min-height: 0; overflow: hidden; opacity: 0; padding-top: 0; padding-bottom: 0; transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease, padding 0.4s ease, gap 0.4s ease; } .comp_NewCardUnit .comp_NewCardCTA p, .comp_NewCardUnit .comp_NewCardCTA span, .comp_NewCardSeekerBig .comp_NewCardCTA p, .comp_NewCardSeekerBig .comp_NewCardCTA span, .comp_NewCardSeekerMedium .comp_NewCardCTA p, .comp_NewCardSeekerMedium .comp_NewCardCTA span { transform: translateY(20px); transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), color 0.3s ease; } .comp_NewCardUnit:hover .comp_NewCardDescription, .comp_NewCardUnit:hover .comp_NewCardCTA, .comp_NewCardUnit:hover .comp_NewCardButton, .comp_NewCardSeekerBig:hover .comp_NewCardDescription, .comp_NewCardSeekerBig:hover .comp_NewCardCTA, .comp_NewCardSeekerBig:hover .comp_NewCardButton, .comp_NewCardSeekerMedium:hover .comp_NewCardDescription, .comp_NewCardSeekerMedium:hover .comp_NewCardCTA .comp_NewCardSeekerMedium:hover .comp_NewCardButton { max-height: 150px; opacity: 1; } .comp_NewCardUnit:hover .comp_NewCardDescription, .comp_NewCardUnit:hover .comp_NewCardCTA, .comp_NewCardUnit:hover .comp_NewCardButton { padding-top: var(--spc-3); padding-bottom: var(--spc-3); } .comp_NewCardUnit:hover .comp_NewCardCTA p, .comp_NewCardUnit:hover .comp_NewCardCTA span, .comp_NewCardSeekerBig:hover .comp_NewCardCTA p, .comp_NewCardSeekerBig:hover .comp_NewCardCTA span, .comp_NewCardSeekerMedium:hover .comp_NewCardCTA p, .comp_NewCardSeekerMedium:hover .comp_NewCardCTA span { transform: translateY(0); } .comp_NewCardSeekerBig .comp_NewCardContent, .comp_NewCardSeekerMedium .comp_NewCardContent { gap: 0; } .comp_NewCardSeekerBig:hover .comp_NewCardContent, .comp_NewCardSeekerMedium:hover .comp_NewCardContent { gap: var(--spc-3); } .comp_NewCardUnit .comp_NewCardCTA { padding: 0 var(--spc-3); gap: 0; } .comp_NewCardUnit:hover .comp_NewCardCTA { padding: var(--spc-3); gap: var(--spc-1); } .comp_NewCardCTA:hover, .comp_NewCardCompact:hover .comp_NewCardCTA .comp_NewCardCompactAlternative:hover .comp_NewCardCTA, .comp_NewCardUnit:hover .comp_NewCardCTA { background: var(--d-secondary); } .comp_NewCardCTA:hover p, .comp_NewCardCTA:hover span, .comp_NewCardCompact:hover .comp_NewCardCTA p, .comp_NewCardCompact:hover .comp_NewCardCTA span, .comp_NewCardCompactAlternative:hover .comp_NewCardCTA p, .comp_NewCardCompactAlternative:hover .comp_NewCardCTA span, .comp_NewCardUnit:hover .comp_NewCardCTA p, .comp_NewCardUnit:hover .comp_NewCardCTA span { color: var(--d-on-surface); } .comp_NewCardPrimary .comp_NewCardCTA:hover, .comp_NewCardPrimary.comp_NewCardCompact:hover .comp_NewCardCTA, .comp_NewCardPrimary.comp_NewCardCompactAlternative:hover .comp_NewCardCTA, .comp_NewCardPrimary.comp_NewCardUnit:hover .comp_NewCardCTA { background: var(--d-primary); } .comp_NewCardPrimary .comp_NewCardCTA:hover p, .comp_NewCardPrimary .comp_NewCardCTA:hover span, .comp_NewCardPrimary.comp_NewCardCompact:hover .comp_NewCardCTA p, .comp_NewCardPrimary.comp_NewCardCompact:hover .comp_NewCardCTA span, .comp_NewCardPrimary.comp_NewCardCompactAlternative:hover .comp_NewCardCTA p, .comp_NewCardPrimary.comp_NewCardCompactAlternative:hover .comp_NewCardCTA span, .comp_NewCardPrimary.comp_NewCardUnit:hover .comp_NewCardCTA p, .comp_NewCardPrimary.comp_NewCardUnit:hover .comp_NewCardCTA span { color: var(--d-on-surface); } .comp_NewCardSecondary .comp_NewCardCTA:hover, .comp_NewCardSecondary.comp_NewCardCompact:hover .comp_NewCardCTA, .comp_NewCardSecondary.comp_NewCardCompactAlternative:hover .comp_NewCardCTA, .comp_NewCardSecondary.comp_NewCardUnit:hover .comp_NewCardCTA { background: var(--d-secondary); } .comp_NewCardSecondary .comp_NewCardCTA:hover p, .comp_NewCardSecondary .comp_NewCardCTA:hover span, .comp_NewCardSecondary.comp_NewCardCompact:hover .comp_NewCardCTA p, .comp_NewCardSecondary.comp_NewCardCompact:hover .comp_NewCardCTA span, .comp_NewCardSecondary.comp_NewCardCompactAlternative:hover .comp_NewCardCTA p, .comp_NewCardSecondary.comp_NewCardCompactAlternative:hover .comp_NewCardCTA span, .comp_NewCardSecondary.comp_NewCardUnit:hover .comp_NewCardCTA p, .comp_NewCardSecondary.comp_NewCardUnit:hover .comp_NewCardCTA span { color: var(--d-surface); } .comp_NewCardConclave .comp_NewCardCTA:hover, .comp_NewCardConclave.comp_NewCardCompact:hover .comp_NewCardCTA, .comp_NewCardConclave.comp_NewCardCompactAlternative:hover .comp_NewCardCTA, .comp_NewCardConclave.comp_NewCardUnit:hover .comp_NewCardCTA { background: var(--faction-conclave-5); } .comp_NewCardConclave .comp_NewCardCTA:hover p, .comp_NewCardConclave .comp_NewCardCTA:hover span, .comp_NewCardConclave.comp_NewCardCompact:hover .comp_NewCardCTA p, .comp_NewCardConclave.comp_NewCardCompact:hover .comp_NewCardCTA span, .comp_NewCardConclave.comp_NewCardCompactAlternative:hover .comp_NewCardCTA p, .comp_NewCardConclave.comp_NewCardCompactAlternative:hover .comp_NewCardCTA span, .comp_NewCardConclave.comp_NewCardUnit:hover .comp_NewCardCTA p, .comp_NewCardConclave.comp_NewCardUnit:hover .comp_NewCardCTA span { color: var(--d-on-surface); } .comp_NewCardLegion .comp_NewCardCTA:hover, .comp_NewCardLegion.comp_NewCardCompact:hover .comp_NewCardCTA, .comp_NewCardLegion.comp_NewCardCompactAlternative:hover .comp_NewCardCTA, .comp_NewCardLegion.comp_NewCardUnit:hover .comp_NewCardCTA { background: var(--faction-legion-5); } .comp_NewCardLegion .comp_NewCardCTA:hover p, .comp_NewCardLegion .comp_NewCardCTA:hover span, .comp_NewCardLegion.comp_NewCardCompact:hover .comp_NewCardCTA p, .comp_NewCardLegion.comp_NewCardCompact:hover .comp_NewCardCTA span, .comp_NewCardLegion.comp_NewCardCompactAlternative:hover .comp_NewCardCTA p, .comp_NewCardLegion.comp_NewCardCompactAlternative:hover .comp_NewCardCTA span, .comp_NewCardLegion.comp_NewCardUnit:hover .comp_NewCardCTA p, .comp_NewCardLegion.comp_NewCardUnit:hover .comp_NewCardCTA span { color: var(--d-on-surface); } .comp_NewCardOrder .comp_NewCardCTA:hover, .comp_NewCardOrder.comp_NewCardCompact:hover .comp_NewCardCTA, .comp_NewCardOrder.comp_NewCardCompactAlternative:hover .comp_NewCardCTA, .comp_NewCardOrder.comp_NewCardUnit:hover .comp_NewCardCTA { background: var(--faction-order-5); } .comp_NewCardOrder .comp_NewCardCTA:hover p, .comp_NewCardOrder .comp_NewCardCTA:hover span, .comp_NewCardOrder.comp_NewCardCompact:hover .comp_NewCardCTA p, .comp_NewCardOrder.comp_NewCardCompact:hover .comp_NewCardCTA span, .comp_NewCardOrder.comp_NewCardCompactAlternative:hover .comp_NewCardCTA p, .comp_NewCardOrder.comp_NewCardCompactAlternative:hover .comp_NewCardCTA span, .comp_NewCardOrder.comp_NewCardUnit:hover .comp_NewCardCTA p, .comp_NewCardOrder.comp_NewCardUnit:hover .comp_NewCardCTA span { color: var(--d-on-surface); } .comp_NewCardPrimal .comp_NewCardCTA:hover, .comp_NewCardPrimal.comp_NewCardCompact:hover .comp_NewCardCTA, .comp_NewCardPrimal.comp_NewCardCompactAlternative:hover .comp_NewCardCTA, .comp_NewCardPrimal.comp_NewCardUnit:hover .comp_NewCardCTA { background: var(--faction-primal-5); } .comp_NewCardPrimal .comp_NewCardCTA:hover p, .comp_NewCardPrimal .comp_NewCardCTA:hover span, .comp_NewCardPrimal.comp_NewCardCompact:hover .comp_NewCardCTA p, .comp_NewCardPrimal.comp_NewCardCompact:hover .comp_NewCardCTA span, .comp_NewCardPrimal.comp_NewCardCompactAlternative:hover .comp_NewCardCTA p, .comp_NewCardPrimal.comp_NewCardCompactAlternative:hover .comp_NewCardCTA span, .comp_NewCardPrimal.comp_NewCardUnit:hover .comp_NewCardCTA p, .comp_NewCardPrimal.comp_NewCardUnit:hover .comp_NewCardCTA span { color: var(--d-on-surface); } .comp_NewCardCompact:hover .comp_NewCardContentTitle { -webkit-line-clamp: 2; line-clamp: 2; } .comp_NewCard { min-height: 100%; } .comp_NewCardExternalContainer { align-self: stretch; min-height: 100%; } .comp_NewCardLarge .comp_NewCardImage { /* flex-basis: 60%; */ aspect-ratio: 6 / 2; max-height: 100%; } .comp_NewCardLarge .comp_NewCardImage .comp_NewCardAnchor { min-height: 100%; } .comp_NewCardLarge .comp_NewCardImage img { min-height: 100%; width: 100%; object-position: top; aspect-ratio: unset; } /*.comp_NewCardLarge .comp_NewCardContent { flex-basis: 40%; }*/ .comp_NewCardLargeImageAtRight .comp_NewCardContent { border-left: 2px solid var(--d-surface-container-lowest); } .comp_NewCardLargeImageAtLeft .comp_NewCardContent { border-right: 2px solid var(--d-surface-container-lowest); } .comp_NewCardCompact .comp_NewCardContent, .comp_NewCardCompactAlternative .comp_NewCardContent, .comp_NewCardUnit .comp_NewCardContent { min-height: var(--co-03); height: 100%; } .comp_NewCard.comp_NewCardCompact.comp_NewCardWithImage .comp_NewCardImage { border: solid var(--d-surface-container-lowest); border-width: 0px 2px; } .comp_NewCardDefault.comp_NewCardWithImage .comp_NewCardImage, .comp_NewCardCompact.comp_NewCardWithImage .comp_NewCardImage, .comp_NewCardCompactAlternative.comp_NewCardWithImage .comp_NewCardImage, .comp_NewCardUnit.comp_NewCardWithImage .comp_NewCardImage { max-height: var(--co-03); } .comp_NewCardCompact .comp_NewCardDescription, .comp_NewCardCompactAlternative .comp_NewCardDescription { overflow: hidden; text-overflow: ellipsis; } .comp_NewCardCompact .comp_NewCardDescription p, .comp_NewCardCompactAlternative .comp_NewCardDescription p { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .comp_NewCardSimplified .comp_NewCardContentMainDetails { border-top: 2px solid var(--d-surface-container-lowest); } .comp_NewCardCompact .comp_NewCardContentMainDetails { border-bottom: 2px solid var(--d-surface-container-lowest); } .comp_NewCardCompact .comp_NewCardContent { top: 77%; } .comp_NewCardCompactAlternative .comp_NewCardContent { top: 45%; } .comp_NewCardCompact:hover .comp_NewCardContent, .comp_NewCardCompactAlternative:hover .comp_NewCardContent { top: 0; } .comp_NewCardSeekerBig .comp_NewCardContent, .comp_NewCardSeekerMedium .comp_NewCardContent, .comp_NewCardUnit .comp_NewCardContent { bottom: 0; top: auto; } .comp_NewCardSeekerBig:hover .comp_NewCardContent, .comp_NewCardSeekerMedium:hover .comp_NewCardContent, .comp_NewCardUnit:hover .comp_NewCardContent { bottom: 0; top: auto; } .comp_NewCardCompactAlternative:hover .comp_NewCardImage::after, .comp_NewCardSeekerBig:hover .comp_NewCardImage::after, .comp_NewCardSeekerMedium:hover .comp_NewCardImage::after, .comp_NewCardUnit:hover .comp_NewCardImage::after { opacity: 1; } .comp_NewCard:hover .primalIdentity svg .layer_1 { fill: var(--faction-primal-5); } .comp_NewCard:hover .orderIdentity svg .layer_1 { fill: var(--faction-order-5); } .comp_NewCard:hover .conclaveIdentity svg .layer_1 { fill: var(--faction-conclave-5); } .comp_NewCard:hover .legionIdentity svg .layer_1 { fill: var(--faction-legion-5); } .comp_NewCard:hover .primalIdentity.hasBorder { border-color: var(--faction-primal-5); } .comp_NewCard:hover .orderIdentity.hasBorder { border-color: var(--faction-order-5); } .comp_NewCard:hover .conclaveIdentity.hasBorder { border-color: var(--faction-conclave-5); } .comp_NewCard:hover .legionIdentity.hasBorder { border-color: var(--faction-legion-5); } .comp_NewCard .factionCrysalite svg { width: 2.4rem; height: 2.4rem; } } @media screen and (max-width: 1000px) { .comp_NewCardUnit .comp_NewCardCTA { padding: var(--spc-3); gap: var(--spc-1); } .comp_NewCardSeekerBig .comp_NewCardContent, .comp_NewCardSeekerMedium .comp_NewCardContent { gap: var(--spc-3); } .comp_NewCardPrimary .comp_NewCardCTA { background: var(--d-primary); } .comp_NewCardPrimary .comp_NewCardCTA p, .comp_NewCardPrimary .comp_NewCardCTA span { color: var(--d-on-surface); } .comp_NewCardSecondary .comp_NewCardCTA { background: var(--d-secondary); } .comp_NewCardSecondary .comp_NewCardCTA p, .comp_NewCardSecondary .comp_NewCardCTA span { color: var(--d-surface); } .comp_NewCard:not(.comp_NewCardCompact):not(.comp_NewCardCompactAlternative):not(.comp_NewCardLargeCompact):not(.comp_NewCardGallery).comp_NewCardWithImage .comp_NewCardContent.comp_NewCardHasDescription, .comp_NewCard:not(.comp_NewCardGallery).comp_NewCardWithImage .comp_NewCardImage, .comp_NewCard:not(.comp_NewCardCompact):not(.comp_NewCardCompactAlternative):not(.comp_NewCardLargeCompact):not(.comp_NewCardSeekerBig):not(.comp_NewCardSeekerMedium) .comp_NewCardDescription { min-height: var(--m-co-02); } .comp_NewCardCompact .comp_NewCardContent, .comp_NewCardCompactAlternative .comp_NewCardContent, .comp_NewCardSeekerBig .comp_NewCardContent, .comp_NewCardSeekerMedium .comp_NewCardContent, .comp_NewCardUnit .comp_NewCardContent { bottom: 0%; z-index: 3; } .comp_NewCardCompact .comp_NewCardContentTitle, .comp_NewCardCompactAlternative .comp_NewCardContentTitle { -webkit-line-clamp: 1; line-clamp: 1; } .comp_NewCardCompact .comp_NewCardDescription, .comp_NewCardCompactAlternative .comp_NewCardDescription { display: none; } .comp_NewCardCompactAlternative .comp_NewCardImage::after, .comp_NewCardSeekerBig .comp_NewCardImage::after, .comp_NewCardUnit .comp_NewCardImage::after { opacity: 1; } .comp_NewCardSeekerMedium .comp_NewCardImage::after { opacity: 0; } .comp_NewCard .primalIdentity svg .layer_1 { fill: var(--faction-primal-5); } .comp_NewCard .orderIdentity svg .layer_1 { fill: var(--faction-order-5); } .comp_NewCard .conclaveIdentity svg .layer_1 { fill: var(--faction-conclave-5); } .comp_NewCard .legionIdentity svg .layer_1 { fill: var(--faction-legion-5); } .comp_NewCard .primalIdentity.hasBorder { border-color: var(--faction-primal-5); } .comp_NewCard .orderIdentity.hasBorder { border-color: var(--faction-order-5); } .comp_NewCard .conclaveIdentity.hasBorder { border-color: var(--faction-conclave-5); } .comp_NewCard .legionIdentity.hasBorder { border-color: var(--faction-legion-5); } .comp_NewCardCTA, .comp_NewCardCompact .comp_NewCardCTA .comp_NewCardCompactAlternative .comp_NewCardCTA, .comp_NewCardUnit .comp_NewCardCTA { background: var(--d-secondary); } .comp_NewCardCTA p, .comp_NewCardCTA span, .comp_NewCardCompact .comp_NewCardCTA p, .comp_NewCardCompact .comp_NewCardCTA span, .comp_NewCardCompactAlternative .comp_NewCardCTA p, .comp_NewCardCompactAlternative .comp_NewCardCTA span, .comp_NewCardUnit .comp_NewCardCTA p, .comp_NewCardUnit .comp_NewCardCTA span { color: var(--d-on-surface); } .comp_NewCardPrimary .comp_NewCardCTA, .comp_NewCardPrimary.comp_NewCardCompact .comp_NewCardCTA, .comp_NewCardPrimary.comp_NewCardCompactAlternative .comp_NewCardCTA, .comp_NewCardPrimary.comp_NewCardUnit .comp_NewCardCTA { background: var(--d-primary); } .comp_NewCardPrimary .comp_NewCardCTA p, .comp_NewCardPrimary .comp_NewCardCTA span, .comp_NewCardPrimary.comp_NewCardCompact .comp_NewCardCTA p, .comp_NewCardPrimary.comp_NewCardCompact .comp_NewCardCTA span, .comp_NewCardPrimary.comp_NewCardCompactAlternative .comp_NewCardCTA p, .comp_NewCardPrimary.comp_NewCardCompactAlternative .comp_NewCardCTA span, .comp_NewCardPrimary.comp_NewCardUnit .comp_NewCardCTA p, .comp_NewCardPrimary.comp_NewCardUnit .comp_NewCardCTA span { color: var(--d-on-surface); } .comp_NewCardSecondary .comp_NewCardCTA, .comp_NewCardSecondary.comp_NewCardCompact .comp_NewCardCTA, .comp_NewCardSecondary.comp_NewCardCompactAlternative .comp_NewCardCTA, .comp_NewCardSecondary.comp_NewCardUnit .comp_NewCardCTA { background: var(--d-secondary); } .comp_NewCardSecondary .comp_NewCardCTA p, .comp_NewCardSecondary .comp_NewCardCTA span, .comp_NewCardSecondary.comp_NewCardCompact .comp_NewCardCTA p, .comp_NewCardSecondary.comp_NewCardCompact .comp_NewCardCTA span, .comp_NewCardSecondary.comp_NewCardCompactAlternative .comp_NewCardCTA p, .comp_NewCardSecondary.comp_NewCardCompactAlternative .comp_NewCardCTA span, .comp_NewCardSecondary.comp_NewCardUnit .comp_NewCardCTA p, .comp_NewCardSecondary.comp_NewCardUnit .comp_NewCardCTA span { color: var(--d-surface); } .comp_NewCardConclave .comp_NewCardCTA, .comp_NewCardConclave.comp_NewCardCompact .comp_NewCardCTA, .comp_NewCardConclave.comp_NewCardCompactAlternative .comp_NewCardCTA, .comp_NewCardConclave.comp_NewCardUnit .comp_NewCardCTA { background: var(--faction-conclave-5); } .comp_NewCardConclave .comp_NewCardCTA p, .comp_NewCardConclave .comp_NewCardCTA span, .comp_NewCardConclave.comp_NewCardCompact .comp_NewCardCTA p, .comp_NewCardConclave.comp_NewCardCompact .comp_NewCardCTA span, .comp_NewCardConclave.comp_NewCardCompactAlternative .comp_NewCardCTA p, .comp_NewCardConclave.comp_NewCardCompactAlternative .comp_NewCardCTA span, .comp_NewCardConclave.comp_NewCardUnit .comp_NewCardCTA p, .comp_NewCardConclave.comp_NewCardUnit .comp_NewCardCTA span { color: var(--d-on-surface); } .comp_NewCardLegion .comp_NewCardCTA, .comp_NewCardLegion.comp_NewCardCompact .comp_NewCardCTA, .comp_NewCardLegion.comp_NewCardCompactAlternative .comp_NewCardCTA, .comp_NewCardLegion.comp_NewCardUnit .comp_NewCardCTA { background: var(--faction-legion-5); } .comp_NewCardLegion .comp_NewCardCTA p, .comp_NewCardLegion .comp_NewCardCTA span, .comp_NewCardLegion.comp_NewCardCompact .comp_NewCardCTA p, .comp_NewCardLegion.comp_NewCardCompact .comp_NewCardCTA span, .comp_NewCardLegion.comp_NewCardCompactAlternative .comp_NewCardCTA p, .comp_NewCardLegion.comp_NewCardCompactAlternative .comp_NewCardCTA span, .comp_NewCardLegion.comp_NewCardUnit .comp_NewCardCTA p, .comp_NewCardLegion.comp_NewCardUnit .comp_NewCardCTA span { color: var(--d-on-surface); } .comp_NewCardOrder .comp_NewCardCTA, .comp_NewCardOrder.comp_NewCardCompact .comp_NewCardCTA, .comp_NewCardOrder.comp_NewCardCompactAlternative .comp_NewCardCTA, .comp_NewCardOrder.comp_NewCardUnit .comp_NewCardCTA { background: var(--faction-order-5); } .comp_NewCardOrder .comp_NewCardCTA p, .comp_NewCardOrder .comp_NewCardCTA span, .comp_NewCardOrder.comp_NewCardCompact .comp_NewCardCTA p, .comp_NewCardOrder.comp_NewCardCompact .comp_NewCardCTA span, .comp_NewCardOrder.comp_NewCardCompactAlternative .comp_NewCardCTA p, .comp_NewCardOrder.comp_NewCardCompactAlternative .comp_NewCardCTA span, .comp_NewCardOrder.comp_NewCardUnit .comp_NewCardCTA p, .comp_NewCardOrder.comp_NewCardUnit .comp_NewCardCTA span { color: var(--d-on-surface); } .comp_NewCardPrimal .comp_NewCardCTA, .comp_NewCardPrimal.comp_NewCardCompact .comp_NewCardCTA, .comp_NewCardPrimal.comp_NewCardCompactAlternative .comp_NewCardCTA, .comp_NewCardPrimal.comp_NewCardUnit .comp_NewCardCTA { background: var(--faction-primal-5); } .comp_NewCardPrimal .comp_NewCardCTA p, .comp_NewCardPrimal .comp_NewCardCTA span, .comp_NewCardPrimal.comp_NewCardCompact .comp_NewCardCTA p, .comp_NewCardPrimal.comp_NewCardCompact .comp_NewCardCTA span, .comp_NewCardPrimal.comp_NewCardCompactAlternative .comp_NewCardCTA p, .comp_NewCardPrimal.comp_NewCardCompactAlternative .comp_NewCardCTA span, .comp_NewCardPrimal.comp_NewCardUnit .comp_NewCardCTA p, .comp_NewCardPrimal.comp_NewCardUnit .comp_NewCardCTA span { color: var(--d-on-surface); } .comp_NewCard .factionCrysalite svg { width: 1.2rem; height: 1.2rem; } } /**/ /* Comp Informative Card */ .comp_InformativeCard { position: relative; overflow: hidden; cursor: pointer; touch-action: manipulation; } .comp_InformativeCardContent > *, .comp_InformativeCardContainer > * { pointer-events: auto; } .comp_InformativeCard[status="true"] .comp_InformativeCardContainer::before { opacity: 1; } .comp_InformativeCardTitle { transition: transform 0.4s ease; } .comp_InformativeCardDescriptionReadMore { opacity: 1; max-height: 300px; transition: opacity 0.25s ease-in-out, max-height 0.25s ease-in-out; } .comp_InformativeCard[status="true"] .comp_InformativeCardDescriptionReadMore { opacity: 0; max-height: 0; transition: opacity 0.25s ease-in-out, max-height 0.25s ease-in-out; } .comp_InformativeCardDescriptionWrapper { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out; } .comp_InformativeCard[status="true"] .comp_InformativeCardDescriptionWrapper { max-height: 300px; opacity: 1; transition: max-height 0.4s ease-in-out 0.2s, opacity 0.4s ease-in-out 0.2s; } @media screen and (min-width: 1001px) { .comp_InformativeCardContent { position: relative; background: linear-gradient(180deg, transparent 0%, var(--d-on-primary) 100%); z-index: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding: 1.5rem; pointer-events: none; } .comp_InformativeCardContainer::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, transparent 0%, var(--d-on-primary) 60%); opacity: 0; transition: opacity 0.4s ease-in-out; pointer-events: none; z-index: 0; } .comp_InformativeCardContainer:hover::before { opacity: 1; } .comp_InformativeCard:hover .comp_InformativeCardDescriptionReadMore { opacity: 0; max-height: 0; transition: opacity 0.25s ease-in-out, max-height 0.25s ease-in-out; } .comp_InformativeCard:hover .comp_InformativeCardDescriptionWrapper { max-height: 300px; opacity: 1; transition: max-height 0.4s ease-in-out 0.2s, opacity 0.4s ease-in-out 0.2s; } .comp_InformativeCardContent::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 2px solid; border-image-slice: 1 !important; border-image: linear-gradient(180deg, var(--d-on-primary) 0%, var(--d-on-primary) 40%, var(--h-secondary) 100%); pointer-events: none; z-index: 1; } } @media screen and (max-width: 1000px) { .comp_InformativeCard { transition: all 0.3s ease-in-out; } .comp_InformativeCardImage { aspect-ratio: 4/3; width: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; } .comp_InformativeCardDescriptionReadMore { opacity: 1; max-height: auto; transition: opacity 0.25s ease-in-out, max-height 0.25s ease-in-out; } .comp_InformativeCard[status="true"] .comp_InformativeCardDescriptionReadMore { opacity: 0; max-height: 0; } .comp_InformativeCardDescriptionWrapper { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out; } .comp_InformativeCard[status="true"] .comp_InformativeCardDescriptionWrapper { max-height: 300px; opacity: 1; transition: max-height 0.4s ease-in-out 0.2s, opacity 0.4s ease-in-out 0.2s; } .comp_InformativeCardContainer::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 2px solid; border-image-slice: 1 !important; border-image: linear-gradient(180deg, var(--d-on-primary) 0%, var(--d-on-primary) 40%, var(--h-secondary) 100%); pointer-events: none; z-index: 1; } } /**/ /* Comp Summary Card */ .comp_SummaryCard { position: relative; min-height: 30vh; background: linear-gradient(139deg, var(--d-surface-container-lowest) 0%, var(--d-surface-variant) 99.98%); overflow: hidden; } .comp_SummaryCard::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; transition: opacity 0.3s ease-in-out; z-index: 0; pointer-events: none; background: linear-gradient(139deg, var(--d-surface-variant) 0%, var(--d-surface-container-lowest) 99.98%); } .comp_SummaryCard:hover::before { opacity: 1; } .comp_SummaryCard > * { position: relative; z-index: 1; } .comp_SummaryCardIcon { width: 4.25rem; height: 4.25rem; border: 2px solid var(--d-primary); background: linear-gradient(135deg, var(--d-surface) 0%,rgba(151, 121, 68, 0.10) 110.29%), var(--d-surface-variant); } .comp_SummaryCardIcon * { width: 1.25rem; fill: var(--d-primary); } .comp_SummaryCardTitle { border-bottom: 2px solid var(--d-primary); } /**/ /* Comp Mechanic */ .comp_VerticalSlideCardContent { gap: var(--spc-5); } .comp_VerticalSlideCardMainArea { border: 2px solid var(--d-surface-container-lowest); } .comp_VerticalSlideCardDisplayDefault .comp_VerticalSlideCardOptions, .comp_VerticalSlideCardDisplayDefault .comp_VerticalSlideCardOptionContentContainer { display: none; } .comp_VerticalSlideCardOptionContainer svg .layer_1 { transition: fill 0.3s ease; } .comp_VerticalSlideCardOptionContainer svg { max-width: 3rem; max-height: 3rem; width: 100%; height: 100%; } .comp_VerticalSlideCardOptionContainer.isActive svg .layer_1 { fill: var(--d-secondary); } .comp_VerticalSlideCardImageContainer { min-height: max-content; } .comp_VerticalSlideCardImage { aspect-ratio: 4/3; } .comp_VerticalSlideCardImage img { object-fit: cover; } @media screen and (min-width: 1001px) { .comp_VerticalSlideCardMainArea { height: 50vh; height: 50dvh; } .comp_VerticalSlideCardDisplay { gap: var(--spc-7); } .comp_VerticalSlideCardSubcontainer { align-items: center; } .comp_VerticalSlideCardMenuContainer { height: 50vh; height: 50dvh; } .comp_VerticalSlideCardMenuContainer .leftArrow, .comp_VerticalSlideCardMenuContainer .rightArrow { display: none; } .comp_VerticalSlideCardMenuContainer, .comp_VerticalSlideCardMenuContainer .comp_VerticalSlideCardOptions { flex-direction: column; flex-wrap: nowrap !important; } .comp_VerticalSlideCardOptions { width: var(--co-03); } .comp_VerticalSlideCardOptionContainer { padding: var(--spc-5); width: var(--co-03); flex-wrap: nowrap; } .comp_VerticalSlideCardOptionContainer:not(.comp_VerticalSlideCardOptionContainer:last-child) { border-bottom: 2px solid var(--d-surface-container-lowest); } .comp_VerticalSlideCardOptionContent { padding: 0 var(--spc-5); } } @media screen and (max-width: 1000px) { .comp_VerticalSlideCardDisplaySelectable { gap: var(--spc-5); } .comp_VerticalSlideCardDisplaySelectable.comp_VerticalSlideCardDisplayHasDescription { gap: var(--spc-7); } .comp_VerticalSlideCardDisplayDefault { gap: var(--spc-5); } .comp_VerticalSlideCardSubcontainer { width: 100%; gap: var(--spc-2); } .comp_VerticalSlideCardMenuContainer { width: 100%; } .comp_VerticalSlideCardMenuContainer, .comp_VerticalSlideCardMenuContainer .comp_VerticalSlideCardOptions, .comp_VerticalSlideCardMenuContainer .comp_VerticalSlideCardOptions .comp_VerticalSlideCardOptionContainer { flex-direction: row; flex-wrap: nowrap !important; } .comp_VerticalSlideCardOptionContainer { flex-wrap: nowrap; justify-content: center; min-width: 100%; } .comp_VerticalSlideCardOptionContentContainer { width: 100%; } .comp_VerticalSlideCardOptionContent { padding: var(--spc-3); } .comp_VerticalSlideCardOptions { width: 100%; overflow: auto; -ms-overflow-style: none; scrollbar-width: none; transition: all 0.3s ease; scroll-snap-type: x mandatory; scroll-behavior: smooth; } } /**/ /* Comp Vertical Slide List */ .comp_VerticalSliderListMenu { overflow-y: auto; scrollbar-width: none; } .comp_VerticalSliderListMenu::-webkit-scrollbar { display: none; } .comp_VerticalSliderListMenuItem { cursor: pointer; transition: background-color 0.3s ease; } .comp_VerticalSliderListMenuItem.is-active, .comp_VerticalSliderListMenuItem:hover { background-color: var(--hover-transparency); } .comp_VerticalSliderListIndexCrysalite { position: relative; width: 50px; height: 50px; flex-shrink: 0; } .comp_VerticalSliderListIndexCrysalite::before { content: ""; position: absolute; inset: 0; background: url('../svg/Generic/Crysalite_Empty.svg') no-repeat center / contain; opacity: 1; transition: opacity 0.3s ease; } .comp_VerticalSliderListMenuItem.is-active .comp_VerticalSliderListIndexCrysalite::before { background: url('../svg/Generic/Crysalite_Empty_Red.svg') no-repeat center / contain; } .comp_VerticalSliderListIndex { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; font-weight: bold; } @media screen and (min-width: 1001px) { .comp_VerticalSliderListMenu, .comp_VerticalSliderListItens { max-height: var(--co-03); } } /**/ /* Comp Accordion */ .comp_Accordion .comp_AccordionQuestion { cursor: pointer; transition: background-color 0.3s ease; } .comp_AccordionAnswerContainer { display: grid; grid-template-rows: 0fr; padding: 0; margin: 0; border: none; overflow: hidden; transition: grid-template-rows 0.35s ease; } .comp_AccordionAnswerSubcontainer { min-height: 0; box-sizing: border-box; width: 100%; transition: padding-top 0.35s ease, padding-bottom 0.35s ease; } .comp_AccordionAnswerContainer p { opacity: 0; margin: 0 0 var(--spc-2) 0; transition: opacity 0.3s 0.1s ease; } .comp_AccordionAnswerContainer p:last-child { margin-bottom: 0; } .comp_AccordionQuestionIcon { display: inline-block; transition: transform 0.3s ease; } .comp_Accordion.comp_Accordion_Default { border-bottom: 2px solid var(--d-surface-container-lowest); } .comp_Accordion_Default .comp_AccordionQuestion { background-color: var(--d-surface); border-bottom: 2px solid var(--d-surface-container-lowest); } .comp_Accordion_Default .comp_AccordionAnswerContainer { background-color: var(--d-surface-container); } .comp_Accordion_Default .comp_AccordionAnswerSubcontainer { padding: 0 var(--spc-4); } .comp_Accordion_Default .comp_AccordionOption[data-status='true'] .comp_AccordionAnswerSubcontainer { padding-top: var(--spc-3); padding-bottom: var(--spc-3); } .comp_Accordion_Default .comp_AccordionOption { background: var(--d-surface); } .comp_Accordion_Default .comp_AccordionQuestionTitle { color: var(--d-on-surface); } .comp_Accordion_Default .comp_AccordionQuestionIcon { color: var(--d-secondary); } .comp_Accordion_Default .comp_AccordionOption[data-status='true'] .comp_AccordionQuestionIcon { transform: scaleY(-1); } .comp_Accordion.comp_Accordion_Transparent { border-top: 2px solid var(--d-surface-container-lowest); } .comp_Accordion_Transparent .comp_AccordionQuestion, .comp_Accordion_Transparent .comp_AccordionAnswerContainer, .comp_Accordion_Transparent .comp_AccordionOption { background-color: transparent; } .comp_Accordion_Transparent .comp_AccordionAnswerSubcontainer { padding: 0 var(--spc-2); } .comp_Accordion_Transparent .comp_AccordionOption[data-status='true'] .comp_AccordionAnswerSubcontainer { padding-top: var(--spc-1); padding-bottom: var(--spc-3); } .comp_Accordion_Transparent .comp_AccordionQuestionTitle, .comp_Accordion_Transparent .comp_AccordionQuestionIcon { color: var(--d-on-surface); } .comp_AccordionOption[data-status='true'] .comp_AccordionAnswerContainer { grid-template-rows: 1fr; } .comp_AccordionOption[data-status='true'] .comp_AccordionAnswerContainer p { opacity: 1; } @media screen and (min-width: 1001px) { .comp_AccordionAnswerSubcontainer { max-width: var(--co-06); } .comp_Accordion_Default .comp_AccordionQuestion:hover { background: var(--d-secondary); } .comp_Accordion_Default .comp_AccordionQuestion:hover .comp_AccordionQuestionTitle, .comp_Accordion_Default .comp_AccordionQuestion:hover .comp_AccordionQuestionIcon { color: var(--d-surface); } .comp_Accordion_Transparent .comp_AccordionQuestion[data-status='false']:hover { background-color: var(--hover-transparency); } } /**/ /* Comp Product Listed */ .comp_ProductListed { align-self: stretch; } .comp_ProductListed:not(.comp_ProductListedStyle_OnCart) .productName { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .comp_ProductListed .productImage img { width: 4.75rem; height: 4.75rem; object-fit: cover; } .comp_ProductListed .productMainDetails { flex: 1 0 0; } @media screen and (min-width: 1001px) { .comp_ProductListed .addProduct { visibility: hidden; transition: visibility 0.3s ease; } .comp_ProductListed:hover .addProduct { visibility: visible; } .comp_ProductListed.comp_ProductListedStyle_OnCart .productFinalPrice { min-width: 7rem; } } /**/ /* Comp Arrows */ .compArrow { cursor: pointer; background-repeat: no-repeat; background-position: center center; background-size: contain; } .compArrow_LeftFramed { background-image: var(--arrow-left-framed); } .compArrow_LeftFrameless { background-image: var(--arrow-left-frameless); } .compArrow_RightFramed { background-image: var(--arrow-right-framed); } .compArrow_RightFrameless { background-image: var(--arrow-right-frameless); } .compArrow_UpFrameless { background-image: var(--arrow-up-frameless); } .compArrow_DownFrameless { background-image: var(--arrow-down-frameless); } /**/ /* Comp Product Card */ .compProductCard .productCardThumbnailContainer { overflow: hidden; } .compProductCard .productCardThumbnail { transition: transform 0.3s ease; object-fit: cover; object-position: center; } @media screen and (min-width: 1001px) { .compProductCard .buttonContainer { opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; } .compProductCard:hover .buttonContainer { opacity: 1; visibility: visible; transform: translateY(0); } .compProductCard:hover .productCardThumbnail { transform: scale(1.2); } } @media screen and (max-width: 1000px) { .compProductCard .buttonContainer { opacity: 1; visibility: visible; } } /**/ /* comp Side Menu */ .comp_SideMenu .sideMenuItem { color: var(--d-on-surface); border-left: 5px solid transparent; } .comp_SideMenu .sideMenuItem.currentPage { color: var(--d-secondary); border-left: 5px solid var(--d-secondary); } /**/ /* comp My Orders Itens */ .comp_MyOrdersItens .featuredImage { width: 4.75rem !important; height: auto; } /**/ /* Comp Splide Carousel */ .comp_SplideCarousel .comp_SplideCarousel_ArrowsBottomInside { padding: var(--spc-5) var(--spc-2) var(--spc-2) var(--spc-2); width: 100%; position: absolute; bottom: 0; z-index: 10; } .comp_SplideCarousel .splide__arrows .paginationPlaceholder { width: 5rem; flex-shrink: 0; } @media screen and (max-width: 1000px) { .comp_SplideCarousel .compSplideCarouselHeaderAction a.compButton_outlined, .comp_SplideCarousel .compSplideCarouselHeaderAction .compButton_outlined { border-style: none; border-width: 0; background: transparent; padding: var(--spc-1); max-height: none; } } /**/ /* Comp Pagination Trail */ .comp_PaginationTrail.splide__pagination { display: flex; justify-content: center; align-items: flex-end; gap: var(--spc-1); align-self: stretch; } .comp_PaginationTrail.splide__pagination .presentation, .comp_PaginationTrail.splide__pagination [role="presentation"] { display: flex; justify-content: center; align-items: flex-end; gap: var(--spc-none); cursor: pointer; box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25); } .comp_PaginationTrail.splide__pagination .splide__pagination__page { cursor: pointer; border: none; padding: 0px 4px 0px 4px; width: 8px; height: 8px; border-radius: 8px; background: var(--primary-3); } .comp_PaginationTrail.splide__pagination .splide__pagination__page.is-active { cursor: pointer; align-items: flex-end; width: 16px; background: var(--d-primary); } /**/ /* Comp Pagination Trail — Numeric (AJAX) */ .comp_PaginationTrail.numeric-pagination { display: flex; flex-direction: row; align-items: center; justify-content: center; } .comp_PaginationTrail.numeric-pagination .pagination-numbers-track { flex-wrap: nowrap; } .comp_PaginationTrail.numeric-pagination .pagination-arrow .compButton_outlined.disabled { pointer-events: none; opacity: 0.35; } .comp_PaginationTrail.numeric-pagination .pagination-number { width: 1.5rem; height: 1.5rem; transition: all 0.3s ease; } .comp_PaginationTrail.numeric-pagination .pagination-number.is-active { border-radius: 0.5rem; background: var(--default-primary, #CB052C); pointer-events: none; } .comp_PaginationTrail.numeric-pagination .pagination-ellipsis { user-select: none; pointer-events: none; } /**/ /* Comp Game Card — Hub popular cards */ .comp-game-card-wrapper { aspect-ratio: 98 / 137; min-width: 0; min-height: 0; overflow: visible; } .comp-game-card-wrapper .cardContainer, .comp-game-card-wrapper .cardSubContainer, .comp-game-card-wrapper .cardMediaContainer { width: 100%; height: 100%; position: relative; border-radius: 6px; } .comp-game-card-wrapper .cardMedia { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center top; border-radius: 6px; } /**/ /* Comp Carousel Controls */ .comp_SplideCarousel_ArrowsPersonalizedInside .paginationPlaceholder { width: 4.75rem; height: 3rem; } /**/ /* Comp Frame Sheet Object */ @media screen and (min-width: 1001px) { :root { --frame-sheet-slider-thumb-size: 20; } .compFrameSheetObjectContainer .compSliderBar::-webkit-slider-thumb { width: 1rem !important; height: 1rem !important; } .compFrameSheetObjectContainer .compSliderBar::-moz-range-thumb { width: 1rem !important; height: 1rem !important; } .compFrameSheetObjectContainer .compSliderBar::-ms-thumb { width: 1rem !important; height: 1rem !important; } .compFrameSheetObjectContainer .compSliderThumbIndicator { width: 4rem; height: 4rem; } } @media screen and (max-width: 1000px) { :root { --frame-sheet-slider-thumb-size: 14; } .compFrameSheetObjectContainer .compSliderBar::-webkit-slider-thumb { width: 0.7rem !important; height: 0.7rem !important; } .compFrameSheetObjectContainer .compSliderBar::-moz-range-thumb { width: 0.7rem !important; height: 0.7rem !important; } .compFrameSheetObjectContainer .compSliderBar::-ms-thumb { width: 0.7rem !important; height: 0.7rem !important; } .compFrameSheetObjectContainer .compSliderThumbIndicator { width: 3rem; height: 3rem; } } /* */ /* Comp FAB */ .compFabRelative { position: relative; } .compFabContainer { position: fixed; height: 100vh; height: 100dvh; z-index: 80; pointer-events: none; top: 0; } .compFabContainer .compFabButton { pointer-events: auto; bottom: 100%; border-radius: 100%; } /**/ /* Comp Tabs */ .comp_Tabs.comp_TabsStylePrimary .comp_TabsSelector { border-bottom: 2px solid var(--d-surface-container); } .comp_Tabs .comp_TabsFeaturedImage { object-fit: cover; object-position: center; flex: 1 1 0; } .comp_Tabs .displayContentType { cursor: pointer; color: var(--d-surface-container-high); border-bottom: 2px solid transparent; } .comp_Tabs.comp_TabsStylePrimary .displayContentTypeActive, .comp_Tabs.comp_TabsStyleTertiary .displayContentTypeActive { color: var(--d-secondary); } .comp_Tabs.comp_TabsStyleSecondary .displayContentTypeActive { color: var(--p-on-surface); } .comp_Tabs.comp_TabsStylePrimary .displayContentTypeActive { border-bottom: 2px solid var(--d-secondary); } .comp_Tabs.comp_TabsStyleSecondary .displayContentTypeActive { border-bottom: 2px solid var(--d-outline-variant); } .comp_Tabs.comp_TabsStyleTertiary .displayContentTypeActive { border-bottom: 2px solid var(--d-secondary); } .comp_Tabs.comp_TabsStyleQuaternary > .compTabsQuaternaryHeader { border-top: 1px solid var(--d-surface-container-lowest); } .comp_Tabs.comp_TabsStyleQuaternary .comp_TabsSelector { border-bottom: none; } .comp_Tabs.comp_TabsStyleQuaternary .comp_TabsSelector > * { border-bottom: none; } .comp_Tabs.comp_TabsStyleQuaternary .comp_TabsHeaderItem { flex: 0 0 auto; width: auto; border-bottom: none; } .comp_Tabs.comp_TabsStyleQuaternary .displayContentType, .comp_Tabs.comp_TabsStyleQuaternary .displayContentTypeActive { color: inherit; border-bottom: none; } .comp_Tabs.comp_TabsStyleQuaternary .compTabQuaternaryLabelContainer { background: transparent; border-radius: 0; } .comp_Tabs.comp_TabsStyleQuaternary .displayContentTypeActive .compTabQuaternaryLabelContainer { background: var(--d-primary); border-radius: 0.625rem; } .comp_Tabs.comp_TabsStyleQuaternary .displayContentType .compTabQuaternaryLabel { color: var(--p-on-surface); } .comp_Tabs.comp_TabsStyleQuaternary .displayContentTypeActive .compTabQuaternaryLabel { color: var(--d-on-surface); } .comp_Tabs .displayContentType p, .comp_Tabs .displayContentTypeActive p { white-space: nowrap; } .comp_Tabs .comp_TabsContent.tabContentInactive { display: none; } .comp_Tabs .comp_TabsText1 p { overflow-x: auto; padding-bottom: var(--spc-2); } .comp_Tabs .comp_TabsText1 p::-webkit-scrollbar { padding: var(--spc-2) var(--spc-2); width: 0.5rem; } .comp_Tabs .comp_TabsText1 p::-webkit-scrollbar-track { background: var(--d-surface-variant); } .comp_Tabs .comp_TabsText1 p::-webkit-scrollbar-thumb { background: var(--d-secondary); border: 0.2rem solid transparent; width: 0.4rem; box-sizing: border-box; } @media screen and (min-width: 1001px) { .comp_Tabs .comp_TabsText1 p { column-count: 3; column-gap: var(--spc-7); column-fill: auto; } } @media screen and (max-width: 1000px) { .comp_Tabs .comp_TabsSelector { overflow: scroll; } } /**/ /* Comp Event Card */ .compEventCard { height: 100%; } .compEventCardMainContent { position: relative; overflow: hidden; height: 100%; } .compEventCardTextCol { min-height: 0; height: 100%; } .compEventCardOverlay { position: absolute; top: 0; left: 0; z-index: 10; background: rgba(16, 24, 30, 0.50); backdrop-filter: blur(1.5px); opacity: 0; transition: opacity 0.3s ease; } .compEventCardOfficial { border: 1px solid var(--d-secondary); } .compEventCardOfficialLogo { width: 1.2rem; height: 1.2rem; } @media (hover: hover) and (pointer: fine) { .compEventCardMainContent:hover .compEventCardOverlay { opacity: 1; } } @media screen and (min-width: 1001px) { .compEventCardBanner { height: var(--co-02); } } @media screen and (max-width: 1000px) { .compEventCardBanner { min-height: 100%; } } .compEventCardTitleWrapper { min-height: 2.2em; } .compEventCardTitleWrapper .compTitle_item { min-height: 2.2em; } .compEventCardTitleWrapper > *, .compEventCardDescWrapper > * { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } /* Play Network Player Row Component */ .compPlayerRowProfile { min-height: 5rem; } .compPlayerRowProfileImage { width: 1.5rem; height: 1.5rem; border-radius: 100%; object-fit: cover; } .compPlayerRowDeckIcon { width: 63px; height: 63px; } .compPlayNetworkDeckTextCol { min-width: 0; overflow: hidden; } .compPlayerRowUserText { min-width: 0; } .compUserNickname { max-width: 100%; } .compUserNicknameBadge { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.1em; height: 1.1em; min-width: 0; min-height: 0; } .compUserNicknameBadge svg { width: 100%; height: 100%; display: block; } .compPlayerRowStatusRegistered { border: 1px solid var(--d-secondary); background: var(--d-surface-variant); } .compPlayerRowStatusBlocked { border: 1px solid var(--d-on-primary-container); background: var(--d-surface-variant); } .compRegisterListCompletionBarContainer { height: 12px; border: 2px solid var(--d-secondary); overflow: hidden; background: transparent; } .compRegisterListCompletionBarFill { background: var(--d-on-secondary); transition: width 0.5s ease; height: 100%; } @media (max-width: 1000px) { .compPlayerRowDeckIcon { width: 24px; height: 24px; } } /**/ /* Play Network Rank Row Component */ .compRankRowProfile { min-height: 5rem; } .compRankRowProfileImage { width: 1.5rem; height: 1.5rem; border-radius: 100%; object-fit: cover; } .compRankRowUserInfo { min-width: 0; } .compRankRowProfile .compUserNickname { display: flex; align-items: center; justify-content: flex-start; min-width: 0; } .compRankRowProfile .compUserNickname > span:not(.compUserNicknameBadge) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; min-width: 0; } .compRankRowProfile .compUserNicknameBadge { flex-shrink: 0; } /**/ /* Match Result Component */ .compMatchResultPlaceHolder { width: 3.5rem; } .compMoreInfoContainer { display: none; } .compMatchPlayerProfileImage { width: 3rem; height: 3rem; border-radius: 100%; object-fit: cover; } .compMatchTeamADeckIcon, .compMatchTeamBDeckIcon { width: 4rem; height: 4rem; object-fit: contain; flex-shrink: 0; } .compMatchResultStatSideCol { min-width: 0; } .compMatchResultTitleRowRound { white-space: nowrap; } @media (max-width: 1000px) { .compMoreInfoContainer { display: flex; height: auto; overflow: visible; } .compMatchPlayerProfileImage { width: 1.5rem; height: 1.5rem; } .compMatchTeamADeckIcon, .compMatchTeamBDeckIcon { width: 1.5rem; height: 1.5rem; } } /**/ /* Comp Deck Builder Cards */ .deckBuilderFilterChipTabHidden, .deckBuilderFilterChipPaginationHidden { display: none; } .deckBuilderCardWrapper { aspect-ratio: 63 / 88; width: 100%; min-width: 0; min-height: 0; } .deckBuilderCardWrapper[data-layout-type="terrain"] { aspect-ratio: 88 / 63; } .deckBuilderCardWrapper .cardMediaContainer, .deckBuilderCardWrapper .cardMedia { width: 100%; height: 100%; object-fit: cover; display: block; } .deckCardOuter_seeker { width: 100%; padding: var(--spc-1); aspect-ratio: 63 / 88; display: flex; flex-direction: column; justify-content: center; align-items: center; } .deckCardInner_seeker { width: 100%; flex: 1 0 0; aspect-ratio: 98 / 137; } .deckCardOuter_normal { width: 100%; padding: var(--spc-1); aspect-ratio: 63 / 88; display: flex; flex-direction: column; justify-content: center; align-items: center; } .deckCardInner_normal { width: 100%; flex: 1 0 0; aspect-ratio: 98 / 137; } .deckCardOuter_terrain { width: 100%; padding: var(--spc-1); aspect-ratio: 88 / 63; display: flex; flex-direction: column; justify-content: center; align-items: center; } .deckCardInner_terrain { width: 100%; flex: 1 0 0; align-self: stretch; } .compDeckBuilderCards { position: relative; overflow: visible; width: 100%; height: 100%; } .compDeckBuilderCards.resourceContainer { cursor: pointer; } .compDeckBuilderCards .safeContentArea, .compDeckBuilderCards .safeContentArea > div, .compDeckBuilderCards .cardSubContainer, .compDeckBuilderCards .cardMediaContainer { width: 100%; height: 100%; position: relative; } .deckBuilderCardWrapper .compDeckBuilderCards .cardSubContainer { aspect-ratio: 63 / 88; width: 100%; } .deckBuilderCardWrapper .compDeckBuilderCards[data-deck-card-layout="terrain"] .cardSubContainer { aspect-ratio: 88 / 63; } .compDeckBuilderCards .safeContentArea > div { justify-content: center; } .compDeckBuilderCards .cardMedia { width: 100%; height: 100%; display: block; object-fit: cover; } @media screen and (max-width: 1000px) { .compDeckBuilderCards .safeContentArea > div { justify-content: flex-end; } } .builderCardFloatingAction { position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%); z-index: 10; pointer-events: none; } .builderCardFloatingAction .builderCardCheckBtn, .builderCardFloatingAction .builderCardQtyPill, .builderCardFloatingAction .builderCardQtyBtn, .builderCardFloatingAction .builderCardQtyBtn * { pointer-events: auto; } .compDeckBuilderCards .builderCardCheckBtn { min-width: 1.75rem; background: linear-gradient(90deg, var(--d-primary) 0%, var(--p-primary) 100%); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; cursor: pointer; } .compDeckBuilderCards.cardAdded .builderCardCheckBtn { opacity: 1; visibility: visible; } .builderCardQtyPill { min-width: unset; width: max-content; padding: var(--spc-0) var(--spc-1); gap: var(--spc-2); background: linear-gradient(90deg, var(--d-primary) 0%, var(--p-primary) 100%); overflow: hidden; } .builderCardQtyPill.readonly { pointer-events: none; cursor: default; max-width: max-content; } .builderCardQtyPill.readonly .builderCardQtyValue { padding: var(--spc-0) var(--spc-2); } .compDeckBuilderCards .builderCardQtyPill { opacity: 0; visibility: hidden; transition: max-width 0.3s ease, padding 0.3s ease, opacity 0.2s ease, visibility 0.2s ease; } .compDeckBuilderCards.cardAdded .builderCardQtyPill { opacity: 1; visibility: visible; max-width: max-content; } .compDeckBuilderCards[data-selection-type="multiple"].cardAdded:hover .builderCardQtyPill { padding: var(--spc-2) var(--spc-4); gap: var(--spc-4); max-width: 7.5rem; } .compDeckBuilderCards[data-selection-type="multiple"].cardAdded:hover .builderCardQtyPill.readonly { pointer-events: none; cursor: default; padding: var(--spc-0) var(--spc-1); gap: var(--spc-2); max-width: max-content; } .builderCardQtyBtn { cursor: pointer; transition: opacity 0.3s ease, min-width 0.3s ease, width 0.3s ease; } .builderCardQtyBtn:disabled, .builderCardQtyBtn[disabled], .builderCardQtyBtn.disabled { opacity: 0.3; pointer-events: none; } .builderCardQtyBtn[disabled] a, .builderCardQtyBtn[disabled] button { pointer-events: none; } .compDeckBuilderCards[data-selection-type="multiple"] .builderCardQtyBtn { width: 0; min-width: 0; max-width: 0; background: transparent; opacity: 0; pointer-events: none; overflow: hidden; border: none; } .compDeckBuilderCards[data-selection-type="multiple"].cardAdded:hover .builderCardQtyBtn { width: 1.5rem; min-width: 1.5rem; max-width: unset; opacity: 1; pointer-events: auto; } .compDeckBuilderCards[data-selection-type="multiple"].cardAdded:hover .builderCardQtyBtn:disabled, .compDeckBuilderCards[data-selection-type="multiple"].cardAdded:hover .builderCardQtyBtn[disabled], .compDeckBuilderCards[data-selection-type="multiple"].cardAdded:hover .builderCardQtyBtn.disabled { pointer-events: none; } .compDeckBuilderCards[data-selection-type="multiple"] .builderCardQtyBtn .material-symbols-outlined { font-size: 1rem; line-height: 1; } @media screen and (max-width: 1000px) { .builderCardQtyPill { width: 1.75rem; } .builderCardQtyPill.readonly .builderCardQtyValue { padding: 0 var(--spc-1); } } /* Comp Deck Builder Sidebar Item */ .deckBuilderSidebarBgImg { background-image: var(--deck-builder-thumbnail-bg, none); background-size: cover; background-position: center top; background-repeat: no-repeat; } .deckBuilderSidebarImgWrapper { flex-shrink: 0; height: 3.75rem; cursor: pointer; } .deckBuilderSidebarCardName { cursor: pointer; user-select: none; } .deckBuilderSidebarImgWrapper:has(.deckBuilderSidebarThumbnail[data-card-type="terrain"]) { height: auto; width: 3.75rem; } .deckBuilderSidebarThumbnail { height: 100%; width: auto; aspect-ratio: 63 / 88; border-radius: 0.25rem; cursor: pointer; transition: transform 0.2s ease, z-index 0.2s ease; position: relative; z-index: 1; } .deckBuilderSidebarThumbnail[data-card-type="terrain"] { width: 100%; height: auto; aspect-ratio: 88 / 63; } .deckBuilderSidebarThumbnail[data-card-type="normal"] { aspect-ratio: 63 / 88; } .deckBuilderSidebarThumbnail:hover { transform: scale(1.1); z-index: 2; } .deckBuilderNormalListItem { max-height: 3.75rem; transition: background-color 0.2s ease; } /* Comp Deck Builder List Qty Action */ .deckBuilderListItemActions { flex-shrink: 0; gap: var(--spc-2); } .deckBuilderSeekerMismatchIndicator { flex-shrink: 0; } .deckBuilderSeekerMismatchIcon { width: 1.5rem; height: 1.5rem; font-size: 1.5rem; line-height: 1.5rem; flex-shrink: 0; } .deckBuilderListQtyReadonly { flex-shrink: 0; } .deckBuilderListQtyWrapper { flex-shrink: 0; min-width: 4rem; transition: gap 0.3s ease; gap: 0; } .deckBuilderSidebarItem.modeEditable:hover .deckBuilderListQtyWrapper.modeExpandable { gap: var(--spc-2); } .deckBuilderQtyAnimBtn { display: flex; opacity: 0; max-width: 0; overflow: hidden; pointer-events: none; transition: max-width 0.4s ease, opacity 0.4s ease; } .deckBuilderQtyAnimMax { display: inline-block; opacity: 1; max-width: 2rem; overflow: hidden; white-space: nowrap; transition: max-width 0.4s ease, opacity 0.4s ease; font-variant-numeric: tabular-nums; } .deckBuilderListQtyValue { min-width: 1.5rem; text-align: right; display: inline-block; font-variant-numeric: tabular-nums; } .deckBuilderSidebarItem.modeEditable:hover .deckBuilderListQtyWrapper.modeExpandable .deckBuilderListQtyValue { text-align: center; } .deckBuilderSidebarItem.modeEditable:hover .deckBuilderListQtyWrapper.modeExpandable .deckBuilderQtyAnimBtn { opacity: 1; max-width: 2.5rem; pointer-events: auto; } .deckBuilderSidebarItem.modeEditable:hover .deckBuilderListQtyWrapper.modeExpandable .deckBuilderQtyAnimMax { opacity: 0; max-width: 0; } /* Comp Deck Builder Floating Preview */ .deckBuilderFloatingPreview { position: fixed; left: var(--deck-builder-preview-left, 0); top: var(--deck-builder-preview-top, 0); pointer-events: none; z-index: 9999; background-image: var(--deck-builder-preview-bg, none); background-size: cover; background-position: center; border-radius: 0.5rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); opacity: 0; visibility: hidden; transition: opacity 0.15s ease, visibility 0.15s ease; transform: translateY(-50%); } .deckBuilderFloatingPreview.showPreview { opacity: 1; visibility: visible; } .deckBuilderFloatingPreview.previewVertical { width: var(--co-03, 21.375rem); aspect-ratio: 98 / 137; } .deckBuilderFloatingPreview.previewHorizontal { height: var(--co-03, 21.375rem); aspect-ratio: 137 / 98; } /* Comp Deck Builder Active Filters */ .deckBuilderActiveFiltersContainer, .deckBuilderActiveFiltersTopDivider, .deckBuilderActiveFiltersBottomDivider { transition: opacity 0.3s ease; opacity: 1; } .deckBuilderActiveFiltersContainer.faded-out, .deckBuilderActiveFiltersTopDivider.faded-out, .deckBuilderActiveFiltersBottomDivider.faded-out { opacity: 0; pointer-events: none; } .deckBuilderActiveFiltersList { flex: 1 1 auto; } /**/ /* Comp Deck Card */ .comp-deck-card-wrapper, .comp-deck-card { display: flex; flex-direction: column; min-height: 0; min-width: 0; } .comp-deck-card-body { max-height: 14.125rem; overflow: hidden; flex-wrap: nowrap; align-items: stretch; background: linear-gradient(180deg, transparent 0%, var(--d-surface-variant) 100%), var(--d-surface); } .comp-deck-card-info { flex: 1 1 0%; width: auto; max-width: 100%; overflow: hidden; transition: max-width 0.4s ease, flex 0.4s ease, opacity 0.3s ease, margin 0.3s ease, padding 0.3s ease; opacity: 1; } .comp-deck-card-inner-carousel { flex: 0 0 auto; width: 10.6875rem; height: auto; transition: width 0.4s ease, flex 0.4s ease; } .comp-deck-card-carousel-title { max-height: 0; opacity: 0; margin: 0; overflow: hidden; transition: max-height 0.4s ease, opacity 0.4s ease, margin 0.4s ease; } .comp-deck-card-art-track { flex-wrap: nowrap; height: 100%; overflow: hidden; transition: all 0.4s ease; gap: var(--spc-1); } .comp-deck-card-art-track .comp-deck-card-art { height: 100%; width: auto; flex-shrink: 0; aspect-ratio: 5 / 7; background-size: cover; background-position: center top; background-repeat: no-repeat; border-radius: 5px; transition: margin 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s ease, opacity 0.4s ease, height 0.4s ease, width 0.4s ease; display: block; } .comp-deck-card-art-track .comp-deck-card-art:nth-child(1) { z-index: 3; margin-left: 0; } .comp-deck-card-art-track .comp-deck-card-art:nth-child(2) { z-index: 2; margin-left: -88%; box-shadow: -4px 0 8px rgba(0, 0, 0, 0.3); } .comp-deck-card-art-track .comp-deck-card-art:nth-child(3) { z-index: 1; margin-left: -88%; box-shadow: -4px 0 8px rgba(0, 0, 0, 0.3); } .comp-deck-card-art-track .comp-deck-card-art:nth-child(n+4) { z-index: 0; margin-left: -88%; opacity: 0; pointer-events: none; } .comp-deck-card-footer-wrapper { position: relative; } .comp-deck-card-footer { transition: opacity 0.3s ease; opacity: 0; } .comp-deck-card-footer > .grow, .comp-deck-card-footer > p { min-width: 0; } .comp-deck-card-action-footer { position: absolute; top: 0; left: 0; height: 100%; opacity: 1; visibility: visible; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 2; } .comp-deck-card.is-decklist .comp-deck-card-action-footer, .comp-deck-card.always-visible-footer .comp-deck-card-action-footer, .comp-deck-card-footer-wrapper.always-visible-footer .comp-deck-card-action-footer { position: relative; top: auto; left: auto; height: auto; max-height: none; opacity: 1; visibility: visible; transform: none; transition: none; } .comp-deck-card-author-img { height: 1.25rem; width: 1.25rem; object-fit: cover; display: block; border-radius: 100%; } .comp-deck-card-single-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .comp-deck-card-description { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; height: 7.5rem; } .comp-create-deck-card { text-decoration: none; color: inherit; max-height: 21.3125rem; } .comp-create-deck-card .comp-deck-card-body { max-height: none; } .comp-create-deck-card .comp-deck-card-body img { height: 13.125rem; width: auto; object-fit: contain; border-radius: 5px; } .comp-create-deck-card .create-deck-image-section { flex: 0 0 auto; width: 10.6875rem; height: 100%; min-width: 0; min-height: 0; overflow: hidden; } .comp-create-deck-card .create-deck-image { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center top; } .comp-create-deck-card .create-deck-text-content { flex: 1 1 0%; min-width: 0; } .comp-create-deck-card .comp-create-deck-card-footer { background: var(--d-primary, #CB052C); transition: background-color 0.3s ease; } @media (max-width: 1000px) { .comp-deck-card-body { max-height: none; align-self: stretch; } .comp-deck-card-inner-carousel { flex: 0 0 6.125rem; width: 6.125rem; height: 7.5rem; } .comp-create-deck-card .create-deck-image-section { flex: 0 0 6.125rem; width: 6.125rem; height: 7.5rem; } .comp-deck-card-art-track { gap: var(--spc-1); overflow: hidden; } .comp-deck-card-art-track .comp-deck-card-art { aspect-ratio: 13 / 20; width: 4.875rem; height: 7.5rem; } .comp-deck-card-art-track .comp-deck-card-art:not(:first-child) { margin-left: -80%; box-shadow: -4px 0 8px rgba(0, 0, 0, 0.3); } .comp-create-deck-card .comp-deck-card-body img, .comp-create-deck-card .create-deck-image { width: 6.125rem; height: 7.5rem; aspect-ratio: 49 / 60; } .comp-deck-card-info { flex: 1 0 0; align-self: stretch; height: auto; } .comp-deck-card-description { -webkit-line-clamp: 2; height: 3.5rem; } .comp-deck-card.is-decklist .comp-deck-card-description { display: none; } .comp-deck-card-footer { display: none; } .comp-deck-card-action-footer { position: relative; top: auto; left: auto; height: auto; max-height: none; opacity: 1; visibility: visible; transform: none; } } @media (hover: hover) { .comp-deck-card-footer { opacity: 1; } .comp-deck-card-action-footer { opacity: 0; visibility: hidden; } .comp-create-deck-card .comp-create-deck-card-footer { background: var(--d-surface-variant); } .comp-deck-card:hover .comp-deck-card-footer { opacity: 0; } .comp-deck-card:hover .comp-deck-card-action-footer { opacity: 1; visibility: visible; } .comp-deck-card.is-decklist:hover .comp-deck-card-action-footer, .comp-deck-card.always-visible-footer:hover .comp-deck-card-action-footer { opacity: 1; visibility: visible; } .comp-create-deck-card:hover .comp-create-deck-card-footer { background: var(--d-primary, #CB052C); } .comp-deck-card-inner-carousel:hover { flex: 1 1 100%; width: 100%; gap: var(--spc-2); } .comp-deck-card-inner-carousel:hover + .comp-deck-card-info { flex: 0 0 0px; max-width: 0px; opacity: 0; padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; } .comp-deck-card-inner-carousel:hover .comp-deck-card-carousel-title { max-height: 2rem; opacity: 1; } .comp-deck-card-inner-carousel:hover .comp-deck-card-art-track { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; pointer-events: auto; cursor: grab; } .comp-deck-card-inner-carousel:hover .comp-deck-card-art-track::-webkit-scrollbar { display: none; } .comp-deck-card-inner-carousel:hover .comp-deck-card-art-track.is-dragging { cursor: grabbing; user-select: none; } .comp-deck-card-inner-carousel:hover .comp-deck-card-art-track .comp-deck-card-art:nth-child(n) { margin-left: 0; transform: none; opacity: 1; pointer-events: auto; box-shadow: none; } .comp-deck-card-inner-carousel:hover .comp-deck-card-art-track .comp-deck-card-art:last-child { margin-right: 0; } } /**/ /* Comp Achievement Card */ .compAchievementCard { position: relative; overflow: hidden; min-width: 0; min-height: 0; aspect-ratio: 171 / 232; height: auto; transition: background 0.3s ease; } .compAchievementCardMedia { aspect-ratio: 1 / 1; min-height: 0; min-width: 0; flex-shrink: 0; } .compAchievementCardMediaInner { aspect-ratio: 1 / 1; min-height: 0; min-width: 0; overflow: hidden; } .compAchievementCardImage { width: 100%; height: 100%; object-fit: contain; display: block; } .compAchievementCard[data-status="in_progress"] .compAchievementCardMedia, .compAchievementCard[data-status="locked"] .compAchievementCardMedia, .compAchievementCard[data-status="unavailable"] .compAchievementCardMedia, .compAchievementCard[data-status="secret"] .compAchievementCardMedia { opacity: 0.25; } .compAchievementCardInfo { position: relative; z-index: 1; margin-top: -40%; flex: 1 1 auto; min-height: 0; background: linear-gradient(180deg, transparent 0%, var(--d-surface-container-lowest) 66%); transition: background 0.3s ease; } .compAchievementCardCopy { word-break: break-word; } .compAchievementCardName { word-break: break-word; } .compAchievementCardDescription { word-break: break-word; } .compAchievementCardProgressBar { min-width: 0; } .compAchievementCardProgressLabel { white-space: nowrap; } .compAchievementCardProgressTrack { height: 0.25rem; min-width: 0; overflow: hidden; border-radius: 0.5rem; background-color: var(--d-surface-container-high); } .compAchievementCardProgressFill { width: 0%; height: 100%; border-radius: 0.25rem; background-color: var(--d-secondary); transition: width 0.3s ease; } .compAchievementCard.has-action .compAchievementCardAction { display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: 0; pointer-events: none; transition: grid-template-rows 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease; } .compAchievementCard.has-action .compAchievementCardAction > * { overflow: hidden; min-height: 0; } .compAchievementCard.has-action:hover .compAchievementCardAction, .compAchievementCard.has-action:focus-within .compAchievementCardAction { grid-template-rows: 1fr; opacity: 1; margin-top: 1rem; pointer-events: auto; } @media screen and (max-width: 1000px) { .compAchievementCard.has-action .compAchievementCardAction { grid-template-rows: 1fr; opacity: 1; margin-top: 1rem; pointer-events: auto; } } /**/ /**/