/* 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);

            --arrow-left-framed-inline: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA0MCA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTYuOTMxMyAyMy40MjU4TDI5Ljk0MjggMTUuNDkwM0wzMC4yNDA0IDE1LjY1MTFMMzAuNDAwNCAxNi43MDI5TDMwLjQwMDQgMzIuMjE0NUwzMC4wODA0IDMyLjU1MjVMMzAuNDAwNCAzMi43MjE1TDMwLjQwMDQgMzMuMjI4NkwzMC4yNDA0IDMzLjIyODZMMzAuMDgwNCAzMy41NjY2TDMwLjA4MDQgMzMuNzM1NkwzMC40MDA0IDM0LjI0MjdMMzAuNDAwNCAzNC43NDk3TDMwLjA4MDQgMzUuMDg3N0wyOS45MjA0IDM1LjU5NDhMMzAuNDAwNCAzNi4yNzA4TDMwLjQwMDQgNDQuMTQwNUwzMC4wODA0IDQ0LjIxNDVMMjkuMzc0OSA0My44NkwyMy42ODA0IDQwLjM4N0wyMy41MjA0IDM5LjMxMzFMMjIuNzIwNCAzNy43OTJMMjAuOTYwNCAzNy4xMTU5TDE5LjY4MDQgMzcuMTE1OUwxOC43MjA0IDM2LjQzOTlMMTcuOTIwNCAzNi40Mzk5TDE3LjQ0MDQgMzYuNTgxM0w4LjMyOTYyIDMxLjAyNDlMOC44MDAzOSAzMC42OTM0TDkuNDQwMzkgMzAuMzU1M0w5Ljc2MDM5IDI5LjM0MTNMOS4yODAzOSAzMC4wMTczTDcuMzYwMzkgMzAuMTg2M0w2LjkzNTM1IDMwLjE3NDZMNi40MDAzOSAyOS44NDgzTDE1Ljg0MDQgMjQuMDkxMUwxNy42MDA0IDI0LjEwMThMMTguNDAwNCAyNC43Nzc5TDE3LjYwMDQgMjMuNzYzOEwxNi45MzEzIDIzLjQyNThaTTE3LjU0NTIgMzYuNjQ1MkwyMy41ODIzIDQwLjMyNzJMMjMuMjAwNCAzOS4xNDQxTDIyLjQwMDQgMzguMTNMMjAuNjQwNCAzNy43OTJMMTkuMzYwNCAzNy42MjNMMTguNTYwNCAzNi43Nzc5TDE3Ljk0NzUgMzYuNjQ1MkwxNy41NDUyIDM2LjY0NTJaIiBmaWxsPSIjRjVGNUY1Ii8+CiAgICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTAuNzk5OTk5IDYwSDBWNTcuODg3M1YwLjg0NTA3SDAuNzk5OTk5TDIgMEgzOC40TDM4LjggMS4yNjc2VjIuMTEyNjdIMzkuNkw0MCAxLjY5MDE0VjM1LjQ5M0wzOS4yIDM0LjY0NzlMMzguOCAzMi41MzUyVjM1LjA3MDRMMzkuMiAzNi43NjA2TDQwIDM5LjI5NThWNTYuMTk3MkM0MCA1Ni41MzUyIDM5LjczMzMgNTguMDI4MiAzOS42IDU4LjczMjRMMzguOCA1OS41Nzc1TDM4LjQgNjBIMTYuOFY1OC43MzI0TDE1LjYgNjBIMC43OTk5OTlaTTM3LjIgNTcuMDQyM0gyLjhWMjYuMTk3MkwxLjYgMjcuNDY0OEwyLjQgMjYuMTk3MkwyLjggMjQuNTA3VjIuOTU3NzVIMjEuNlYyLjUzNTIxTDIyIDEuNjkwMTRMMjYuOCAyLjExMjY3TDI4IDIuOTU3NzVIMzcuMlY1Ny4wNDIzWiIgZmlsbD0iI0Y1RjVGNSIvPgo8L3N2Zz4K');
            --arrow-left-frameless-inline: url('data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjI1IiBoZWlnaHQ9IjMwIiB2aWV3Qm94PSIwIDAgMjUgMzAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBpZD0iUG9seWdvbiAxIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEwLjkzMTMgOC40MjU3N0wyMy45NDI4IDAuNDkwMzQyTDI0LjI0MDQgMC42NTExMjJMMjQuNDAwNCAxLjcwMjg5TDI0LjQwMDQgMTcuMjE0NUwyNC4wODA0IDE3LjU1MjVMMjQuNDAwNCAxNy43MjE1TDI0LjQwMDQgMTguMjI4NkwyNC4yNDA0IDE4LjIyODZMMjQuMDgwNCAxOC41NjY2TDI0LjA4MDQgMTguNzM1NkwyNC40MDA0IDE5LjI0MjdMMjQuNDAwNCAxOS43NDk3TDI0LjA4MDQgMjAuMDg3N0wyMy45MjA0IDIwLjU5NDhMMjQuNDAwNCAyMS4yNzA4TDI0LjQwMDQgMjkuMTQwNUwyNC4wODA0IDI5LjIxNDVMMjMuMzc0OSAyOC44NkwxNy42ODA0IDI1LjM4N0wxNy41MjA0IDI0LjMxMzFMMTYuNzIwNCAyMi43OTJMMTQuOTYwNCAyMi4xMTU5TDEzLjY4MDQgMjIuMTE1OUwxMi43MjA0IDIxLjQzOTlMMTEuOTIwNCAyMS40Mzk5TDExLjQ0MDQgMjEuNTgxM0wyLjMyOTYyIDE2LjAyNDlMMi44MDAzOSAxNS42OTM0TDMuNDQwMzkgMTUuMzU1M0wzLjc2MDM5IDE0LjM0MTNMMy4yODAzOSAxNS4wMTczTDEuMzYwMzkgMTUuMTg2M0wwLjkzNTM0NiAxNS4xNzQ2TDAuNDAwMzkgMTQuODQ4M0w5Ljg0MDM5IDkuMDkxMDZMMTEuNjAwNCA5LjEwMTgzTDEyLjQwMDQgOS43Nzc4OEwxMS42MDA0IDguNzYzOEwxMC45MzEzIDguNDI1NzdaTTExLjU0NTIgMjEuNjQ1MkwxNy41ODIzIDI1LjMyNzJMMTcuMjAwNCAyNC4xNDQxTDE2LjQwMDQgMjMuMTNMMTQuNjQwNCAyMi43OTJMMTMuMzYwNCAyMi42MjNMMTIuNTYwNCAyMS43Nzc5TDExLjk0NzUgMjEuNjQ1MkwxMS41NDUyIDIxLjY0NTJaIiBmaWxsPSIjRjVGNUY1Ii8+Cjwvc3ZnPgo=') ;
            --arrow-right-framed-inline: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA0MCA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjMuMDY4NyAyMy40MjU4TDEwLjA1NzIgMTUuNDkwM0w5Ljc1OTYxIDE1LjY1MTFMOS41OTk2MSAxNi43MDI5TDkuNTk5NjEgMzIuMjE0NUw5LjkxOTYxIDMyLjU1MjVMOS41OTk2MSAzMi43MjE1TDkuNTk5NjEgMzMuMjI4Nkw5Ljc1OTYxIDMzLjIyODZMOS45MTk2MSAzMy41NjY2TDkuOTE5NjEgMzMuNzM1Nkw5LjU5OTYxIDM0LjI0MjdMOS41OTk2MSAzNC43NDk3TDkuOTE5NjEgMzUuMDg3N0wxMC4wNzk2IDM1LjU5NDhMOS41OTk2MSAzNi4yNzA4TDkuNTk5NjEgNDQuMTQwNUw5LjkxOTYxIDQ0LjIxNDVMMTAuNjI1MSA0My44NkwxNi4zMTk2IDQwLjM4N0wxNi40Nzk2IDM5LjMxMzFMMTcuMjc5NiAzNy43OTJMMTkuMDM5NiAzNy4xMTU5TDIwLjMxOTYgMzcuMTE1OUwyMS4yNzk2IDM2LjQzOTlMMjIuMDc5NiAzNi40Mzk5TDIyLjU1OTYgMzYuNTgxM0wzMS42NzA0IDMxLjAyNDlMMzEuMTk5NiAzMC42OTM0TDMwLjU1OTYgMzAuMzU1M0wzMC4yMzk2IDI5LjM0MTNMMzAuNzE5NiAzMC4wMTczTDMyLjYzOTYgMzAuMTg2M0wzMy4wNjQ3IDMwLjE3NDZMMzMuNTk5NiAyOS44NDgzTDI0LjE1OTYgMjQuMDkxMUwyMi4zOTk2IDI0LjEwMThMMjEuNTk5NiAyNC43Nzc5TDIyLjM5OTYgMjMuNzYzOEwyMy4wNjg3IDIzLjQyNThaTTIyLjQ1NDggMzYuNjQ1MkwxNi40MTc3IDQwLjMyNzJMMTYuNzk5NiAzOS4xNDQxTDE3LjU5OTYgMzguMTNMMTkuMzU5NiAzNy43OTJMMjAuNjM5NiAzNy42MjNMMjEuNDM5NiAzNi43Nzc5TDIyLjA1MjUgMzYuNjQ1MkwyMi40NTQ4IDM2LjY0NTJaIiBmaWxsPSIjRjVGNUY1Ii8+CiAgICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTQwIDU0LjkyOTZWMi4xMTI2OEwzOS4yIDBIMjQuNEwyMy4yIDEuMjY3NjFWMEgxLjZMMS4yIDAuNDIyNTM1TDAuNCAxLjI2NzYxQzAuMjY2NjY3IDEuOTcxODMgMCAzLjQ2NDc5IDAgMy44MDI4MlYyMC43MDQyTDAuOCAyMy4yMzk0TDEuMiAyNC45Mjk2VjI3LjQ2NDhMMC44IDI1LjM1MjFMMCAyNC41MDdWNTguMzA5OUwwLjQgNTcuODg3M0gxLjJWNTguNzMyNEwxLjYgNjBIMzguNEwzOS42IDU5LjU3NzVMNDAgNTQuOTI5NlpNMzcuMiAyLjk1Nzc1SDIuOFY1Ny4wNDIzSDEyTDEzLjIgNTcuODg3M0wxOCA1OC4zMDk5TDE4LjQgNTcuNDY0OFY1Ny4wNDIzSDM3LjJWMzUuNDkzTDM3LjYgMzMuODAyOEwzOC40IDMyLjUzNTJMMzcuMiAzMy44MDI4VjIuOTU3NzVaIiBmaWxsPSIjRjVGNUY1Ii8+Cjwvc3ZnPgo=');
            --arrow-right-frameless-inline: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAyNSAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTQuMDY4NyA4LjQyNTc3TDEuMDU3MjIgMC40OTAzNDJMMC43NTk2MSAwLjY1MTEyMkwwLjU5OTYxMSAxLjcwMjg5TDAuNTk5NjEgMTcuMjE0NUwwLjkxOTYxIDE3LjU1MjVMMC41OTk2MSAxNy43MjE1TDAuNTk5NjEgMTguMjI4NkwwLjc1OTYxIDE4LjIyODZMMC45MTk2MSAxOC41NjY2TDAuOTE5NjEgMTguNzM1NkwwLjU5OTYxIDE5LjI0MjdMMC41OTk2MSAxOS43NDk3TDAuOTE5NjA5IDIwLjA4NzdMMS4wNzk2MSAyMC41OTQ4TDAuNTk5NjEgMjEuMjcwOEwwLjU5OTYwOSAyOS4xNDA1TDAuOTE5NjA5IDI5LjIxNDVMMS42MjUwNiAyOC44Nkw3LjMxOTYxIDI1LjM4N0w3LjQ3OTYxIDI0LjMxMzFMOC4yNzk2MSAyMi43OTJMMTAuMDM5NiAyMi4xMTU5TDExLjMxOTYgMjIuMTE1OUwxMi4yNzk2IDIxLjQzOTlMMTMuMDc5NiAyMS40Mzk5TDEzLjU1OTYgMjEuNTgxM0wyMi42NzA0IDE2LjAyNDlMMjIuMTk5NiAxNS42OTM0TDIxLjU1OTYgMTUuMzU1M0wyMS4yMzk2IDE0LjM0MTNMMjEuNzE5NiAxNS4wMTczTDIzLjYzOTYgMTUuMTg2M0wyNC4wNjQ3IDE1LjE3NDZMMjQuNTk5NiAxNC44NDgzTDE1LjE1OTYgOS4wOTEwNkwxMy4zOTk2IDkuMTAxODNMMTIuNTk5NiA5Ljc3Nzg4TDEzLjM5OTYgOC43NjM4TDE0LjA2ODcgOC40MjU3N1pNMTMuNDU0OCAyMS42NDUyTDcuNDE3NjYgMjUuMzI3Mkw3Ljc5OTYxIDI0LjE0NDFMOC41OTk2MSAyMy4xM0wxMC4zNTk2IDIyLjc5MkwxMS42Mzk2IDIyLjYyM0wxMi40Mzk2IDIxLjc3NzlMMTMuMDUyNSAyMS42NDUyTDEzLjQ1NDggMjEuNjQ1MloiIGZpbGw9IiNGNUY1RjUiLz4KPC9zdmc+Cg==');
            
            --arrow-left-framed-file: url('../svg/Generic/Arrow_Left_Framed.svg');
            --arrow-left-frameless-file: url('../svg/Generic/Arrow_Left_Frameless.svg');
            --arrow-right-framed-file: url('../svg/Generic/Arrow_Right_Framed.svg');
            --arrow-right-frameless-file: url('../svg/Generic/Arrow_Right_Frameless.svg');

            --arrow-left-framed: var(--arrow-left-framed-inline);
            --arrow-left-frameless: var(--arrow-left-frameless-inline);
            --arrow-right-framed: var(--arrow-right-framed-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 */
    .compTooltip { display: none; height: fit-content; max-width: 14.25rem; }
    .compTooltip { position: absolute; width: max-content; z-index: 1; transform: translate(-50%, -50%); }
    .compButton:not(.disabled):hover .compTooltip { display: flex; }

    .compTooltip
    {
        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; }
    .compTooltip
    {
        z-index: 20;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        display: none;
    }
    .compTooltipRelative { position: relative; }
    .compTooltipRelative:hover .compTooltip { display: flex; }

    .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%); }

    [active='true'] .compTooltipFalse { display: none; }
    [active='false'] .compTooltipTrue { display: none; }
/**/

/* Comp Chip */
    .compChip { display: inline-flex; transition: background 0.3s ease; width: fit-content; }
    .compChipLabel { transition: color 0.3s ease; }

    .compChipStyle__infox { padding: 0px var(--spc-3); gap: var(--spc-1); border: 1px solid var(--d-outline); }
    .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):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):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; }
/**/

/* 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; }

    /* Background */
        .compDropdown .compDropdownHead { transition: background 0.3s ease; }

        /* Filed Version */
            .compDropdown.normal .compDropdownHead { background: linear-gradient(90deg, var(--d-surface-container) 50%, var(--d-surface-container-low) 100%); }
            .compDropdown.normal:hover .compDropdownHead { background: linear-gradient(90deg, var(--d-surface-container) 50%, var(--d-surface-container) 100%); }
            .compDropdown.normal:active .compDropdownHead { background: linear-gradient(90deg, var(--d-surface-container) 50%, var(--d-surface-container) 100%); }
            .compDropdown.normal:focus-within .compDropdownHead { background: linear-gradient(90deg, var(--d-surface-container) 50%, var(--d-surface-container) 100%); caret-color: var(--d-primary); }
            .compDropdown.disabled .compDropdownHead { background: linear-gradient(90deg, var(--d-surface-container) 50%, var(--d-surface-container-low) 100%); }
            .compDropdown.error .compDropdownHead { background: linear-gradient(90deg, var(--d-surface-container) 50%, var(--d-surface-container-low) 100%); }
        /* */

        /* 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); }
    /* */

    /* 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: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); }
                .compDropdown.framed:hover .compDropdownHead { border-color: var(--d-surface); }
                .compDropdown.framed:active .compDropdownHead { border-color: var(--d-surface); }
                .compDropdown.framed:focus-within .compDropdownHead { border-color: var(--d-primary); }
                .compDropdown.framed.disabled .compDropdownHead { border-color: var(--d-surface); }
                .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%; top: 3.3rem; z-index: 1; }
        /* */

        /* Dropdown ScrollBar */
            .compDropdown .compDropdownOpts > div::-webkit-scrollbar { width: var(--spc-2); background: transparent; }
            .compDropdown .compDropdownOpts > div::-webkit-scrollbar-thumb { background: var(--d-primary);}
        /* */
    /* */
/**/

/* compButton */
    .compButton { position: relative; height: fit-content; transition: background 0.3s ease; }
    .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(--red-button-texture-default) center center / 100% 100% no-repeat; color: var(--d-on-primary); border-color: transparent; min-height: 2.5rem; }
    :not(.disabled) > .compButton_red:hover  { background: var(--red-button-texture-hover) center center / 100% 100% no-repeat; color: var(--h-on-primary); }
    :not(.disabled) > .compButton_red:focus  { background: var(--red-button-texture-focused) center center / 100% 100% no-repeat; color: var(--p-on-primary); }
    :not(.disabled) > .compButton_red:active { background: var(--red-button-texture-pressed) center center / 100% 100% no-repeat; color: var(--p-on-primary); }
    .compButton_red.disabled { background: var(--red-button-texture-disabled) center center / 100% 100% no-repeat; color: var(--d-on-primary); opacity: 0.33;}
    .compButton_red:hover.disabled { background: var(--red-button-texture-disabled-hover) center center / 100% 100% no-repeat; color: var(--d-on-primary); opacity: 0.33;}

    .compButton_outlined { background: transparent; color: var(--d-on-surface); border-color: var(--d-outline); }
    .compButton_outlined:not(.menuButton) { max-height: 2.5rem; }
    .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.frameless, .compButton.frameless a { border: none; }

/* */
    /**/

    /* Comp Input Field */
    .compInputField.type_range .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 .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: 2.5rem; }
    .compInputField input { background: transparent; color: inherit; border: none; transition: all 0.3s ease-in-out;}
    .compInputField.disabled { opacity: 0.3; }

    .compInputField input:-webkit-autofill,
    .compInputField input:-webkit-autofill:hover, 
    .compInputField input:-webkit-autofill:focus, 
    .compInputField input:-webkit-autofill:active
    {
        -webkit-background-clip: text;
        -webkit-text-fill-color: var(--d-on-surface);
        transition: background-color 5000s ease-in-out 0s;
        box-shadow: inset 0 0 20px 20px transparent;
    }

    /* Label Text */
        .compInputField.normal > 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.error > span { color: var(--d-error); }
    /* */

    /* Filled Version */
        /* Background */
            .compInputField.normal .compInputFieldInput { transition: background 0.3s ease; background: linear-gradient(90deg, var(--d-surface-container) 50%, var(--d-surface-container-low) 100%); }
            .compInputField.normal:hover .compInputFieldInput { background: linear-gradient(90deg, var(--d-surface-container) 50%, var(--d-surface-container) 100%); }
            .compInputField.normal:active .compInputFieldInput { background: linear-gradient(90deg, var(--d-surface-container) 50%, var(--d-surface-container) 100%); }
            .compInputField.normal:focus-within .compInputFieldInput { background: linear-gradient(90deg, var(--d-surface-container) 50%, var(--d-surface-container) 100%); caret-color: var(--d-primary); }
            .compInputField.disabled .compInputFieldInput { background: linear-gradient(90deg, var(--d-surface-container) 50%, var(--d-surface-container-low) 100%); }
            .compInputField.error .compInputFieldInput { background: linear-gradient(90deg, var(--d-surface-container) 50%, var(--d-surface-container-low) 100%); }
        /* */

        /* Border */
            .compInputField.normal.framed .compInputFieldInput { border: 1px solid var(--d-surface); }
            .compInputField.normal.framed:hover .compInputFieldInput { border: 1px solid var(--d-surface); }
            .compInputField.normal.framed:active .compInputFieldInput { border: 1px solid var(--d-surface); }
            .compInputField.normal.framed:focus-within .compInputFieldInput { border: 1px solid var(--d-primary); }
            .compInputField.disabled.framed .compInputFieldInput { border: 1px solid var(--d-surface); }
            .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.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.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.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.error .compInputFieldRgt span { color: var(--d-error); }
        /* */

    /* Outlined Version */
        /* Placeholder & Background */
            .compInputField.outlined .compInputFieldInput { background: transparent; color: var(--d-on-surface); }
            .compInputField.outlined:hover .compInputFieldInput { background: transparent; color: var(--h-on-surface); }
            .compInputField.outlined:active .compInputFieldInput { background: transparent; color: var(--p-on-surface); }
            .compInputField.outlined:focus-within .compInputFieldInput { background: transparent; color: var(--d-on-surface); }
            .compInputField.outlined.disabled .compInputFieldLft span { background: transparent; color: var(--d-on-surface); }
            .compInputField.outlined.error .compInputFieldLft span { background: transparent; color: var(--d-on-surface); }
        /* */

        /* Left Icon */
            .compInputField.outlined .compInputFieldLft span { color: var(--d-on-surface); }
            .compInputField.outlined:hover .compInputFieldLft span { color: var(--h-on-surface); }
            .compInputField.outlined:active .compInputFieldLft span { color: var(--p-on-surface); }
            .compInputField.outlined:focus-within .compInputFieldLft span { color: var(--d-on-surface); }
            .compInputField.outlined.disabled .compInputFieldLft span { color: var(--d-on-surface); }
            .compInputField.outlined.error .compInputFieldLft span { color: var(--d-on-surface); }
        /* */
    /* */

    .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); 
    }
    /**/

    /* 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; }
    .compCarouselButtons.disabled, .compCarouselButtons:disabled { opacity: 0.33; }

    .compCarouselButtons svg path { fill: var(--d-on-surface-variant); }
/**/

/* Comp Faction Menu */
    .compFactionsMenu .factionIdentity { border-bottom: 5px solid transparent; }
    .compFactionsMenu .factionIdentity .factionCrysalite svg #Vector { fill: url(#default_gradient); }
    .compFactionsMenu .factionIdentity:hover .factionCrysalite svg #Vector { fill: url(#hover_gradient); }

    .compFactionsMenu #PrimalIdentity.factionIdentity[status=true] .factionCrysalite svg #Vector { fill: var(--faction-primal-5); }
    .compFactionsMenu #OrderIdentity.factionIdentity[status=true] .factionCrysalite svg #Vector { fill: var(--faction-order-5); }
    .compFactionsMenu #ConclaveIdentity.factionIdentity[status=true] .factionCrysalite svg #Vector { fill: var(--faction-conclave-5); }
    .compFactionsMenu #LegionIdentity.factionIdentity[status=true] .factionCrysalite svg #Vector { fill: var(--faction-legion-5); }
/**/

/* 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 Checkable */
    .compCheckable { column-gap: var(--spc-2); padding: var(--spc-1); }
    .compCheckableIcon { width: 1.2rem; height: 1.2rem; }
    .compCheckableText { font-family: Commissioner; font-size: 0.8rem; line-height: 150%; font-weight: 400; color: var(--d-on-surface); }

    [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; }
/**/

/* 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: 101;
        opacity: 0;
        left: 0;
        top: 0;
        min-width: 100vw;
        width: 100%;
        height: 100vh;
        background: rgba(255, 255, 255, 0.01);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        overflow-y: auto;
        overflow-x: hidden;
    }
    .compModal > div { background-color: rgba(37, 46, 53, 0.75); min-height: 100%; }
    .compModal_download
    {
        position: relative;
    }
    @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: 12%; 
        }
    }
/**/

/* 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: 99; top: 1.25rem; 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_secondary
    {
        background: linear-gradient(91deg, var(--d-on-surface-variant) -0.1%, var(--h-secondary) 99.67%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        max-width: fit-content;
    }
/**/

/* 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 { min-height: var(--co-03); }
    .compInteractiveCard .miniatureMediaContainer, .compInteractiveCard .cardMediaContainer { position: relative; }
    @media screen and (max-width: 1000px)
    { 
        .compInteractiveCard .safeContentArea > div { min-height: var(--m-co-03); justify-content: flex-end; }
        .compInteractiveCard .miniatureMedia:not(.onModalResourceImage) { height: var(--m-co-03); width: var(--m-co-03); }
        .compInteractiveCard .onModalResourceImage { width: var(--m-co-04); } 
    }
    @media screen and (min-width: 1001px) 
    {   
        .compInteractiveCard.resourceContainer { cursor: pointer; }
        .compInteractiveCard .safeContentArea > div { min-height: var(--co-03); justify-content: center; }
        .compInteractiveCard.miniatureContainer:hover .miniatureSubContainer { transition: transform 0.3s ease; transform: scale(1.1); }
        .compInteractiveCard .miniatureMedia:not(.onModalResourceImage) { height: var(--co-03); width: var(--co-03); }
        .compInteractiveCard .onModalResourceImage { max-height: 60vh; }
    }

    .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;
            min-width: 100vw;
            aspect-ratio: 4 / 2;
        }
        .comp_VideoCollectionMainContainer
        {
            gap: var(--spc-5);
        }
        .comp_VideoList
        {
            width: 100vw;
            min-width: 100vw;
            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_NewCardDescription { flex-grow: 1; align-self: stretch; }
    .comp_NewCardDescription p { flex-grow: 1; align-self: stretch; }

    .comp_NewCardContentContainer { border: 2px solid var(--d-surface-container-lowest); }

    .comp_NewCardImage { flex-grow: 1; }
    .comp_NewCardImage img { object-fit: cover; aspect-ratio: 4/3; }

    .comp_NewCardDefault { align-self: stretch; }

    .comp_NewCardContent, .comp_NewCardImage { overflow: hidden; }

    .comp_NewCardContentContainer, .comp_NewCardContent { flex-grow: 1; }

    .comp_NewCardCTA { border-top: 2px solid var(--d-surface-container-lowest); transition: background 0.3s ease; }
    .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_NewCardCTA:hover, .comp_NewCardCompact: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
    { color: var(--d-on-surface); }

    .comp_NewCardPrimary .comp_NewCardCTA p { color: var(--d-on-surface); }
    .comp_NewCardPrimary .comp_NewCardCTA span { color: var(--d-primary); }

    .comp_NewCardPrimary .comp_NewCardCTA:hover,
    .comp_NewCardPrimary.comp_NewCardCompact: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
    { color: var(--d-on-surface); }

    .comp_NewCardSecondary .comp_NewCardCTA p { color: var(--d-on-surface); }
    .comp_NewCardSecondary .comp_NewCardCTA span { color: var(--d-secondary); }

    .comp_NewCardSecondary .comp_NewCardCTA:hover,
    .comp_NewCardSecondary.comp_NewCardCompact: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
    { color: var(--d-surface); }

    .comp_NewCardConclave .comp_NewCardCTA:hover,
    .comp_NewCardConclave.comp_NewCardCompact:hover .comp_NewCardCTA
    { background: var(--faction-conclave-5); }

    .comp_NewCardLegion .comp_NewCardCTA:hover,
    .comp_NewCardLegion.comp_NewCardCompact:hover .comp_NewCardCTA
    { background: var(--faction-legion-5); }

    .comp_NewCardOrder .comp_NewCardCTA:hover,
    .comp_NewCardOrder.comp_NewCardCompact:hover .comp_NewCardCTA
    { background: var(--faction-order-5); }

    .comp_NewCardPrimal .comp_NewCardCTA:hover,
    .comp_NewCardPrimal.comp_NewCardCompact:hover .comp_NewCardCTA
    { background: var(--faction-primal-5); }

    .comp_NewCardCompact { transition: all 0.3s ease; }
    .comp_NewCardCompact:hover { position: relative; }
    .comp_NewCardCompact .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:hover .comp_NewCardContentTitle { -webkit-line-clamp: 2; line-clamp: 2; }
    .comp_NewCardCompact .comp_NewCardDescription { align-self: stretch; flex: 1 0 0; }
    .comp_NewCardCompact .comp_NewCardContent
    { 
        border: 2px solid var(--d-surface-container-lowest);
        position: absolute;
        transition: all 0.5s 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_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_NewCard.comp_NewCardCompact .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_NewCard:not(.comp_NewCardGallery):not(.comp_NewCardLarge).comp_NewCardWithImage .comp_NewCardImage 
        { max-height: var(--co-03); }

        .comp_NewCardCompact .comp_NewCardDescription { overflow: hidden; text-overflow: ellipsis; }
        .comp_NewCardCompact .comp_NewCardDescription p
        {    
            display: -webkit-box;
            -webkit-box-orient: vertical;

            overflow: hidden;
            text-overflow: ellipsis;
        }

        .comp_NewCardCompact .comp_NewCardContentMainDetails { border-bottom: 2px solid var(--d-surface-container-lowest); }
        
        .comp_NewCardCompact .comp_NewCardContent { top: 75%; }
        .comp_NewCardCompact:hover .comp_NewCardContent { top: 0; }
    }
    @media screen and (max-width: 1000px)
    {
        .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_NewCardGallery).comp_NewCardWithImage .comp_NewCardContent,
        .comp_NewCard:not(.comp_NewCardGallery).comp_NewCardWithImage .comp_NewCardImage,
        .comp_NewCard:not(.comp_NewCardCompact) .comp_NewCardDescription
        { min-height: var(--m-co-02); }

        .comp_NewCardCompact .comp_NewCardContent { bottom: 0%; }
        .comp_NewCardCompact .comp_NewCardContentTitle { -webkit-line-clamp: 1; line-clamp: 1; }
        .comp_NewCardCompact .comp_NewCardDescription { display: none; }
    }
/**/

/* Comp Mechanic */
    .comp_MechanicContent { gap: var(--spc-5); }
    .comp_MechanicMainArea { border: 2px solid var(--d-surface-container-lowest); }

    .comp_MechanicDisplayDefault .comp_MechanicOptions,
    .comp_MechanicDisplayDefault .comp_MechanicOptionContentContainer 
    { 
        display: none;
    }

    .comp_MechanicOptionContainer svg #Vector { transition: fill 0.3s ease; }
    .comp_MechanicOptionContainer svg { max-width: 3rem; max-height: 3rem; width: 100%; height: 100%; }
    .comp_MechanicOptionContainer:hover svg #Vector { fill: url(#hover_gradient) }
    .comp_MechanicOptionContainer.isActive svg #Vector { fill: var(--d-secondary); }

    .comp_MechanicImageContainer { min-height: max-content; }
    .comp_MechanicImage { aspect-ratio: 4/3; }
    .comp_MechanicImage img { object-fit: cover; }

    @media screen and (min-width: 1001px)
    {
        .comp_MechanicMainArea { height: 50vh; }

        .comp_MechanicDisplay { gap: var(--spc-7); }

        .comp_MechanicSubcontainer { align-items: center; }

        .comp_MechanicMenuContainer { height: 50vh; }

        .comp_MechanicMenuContainer .leftArrow, .comp_MechanicMenuContainer .rightArrow { display: none; }
        .comp_MechanicMenuContainer, .comp_MechanicMenuContainer .comp_MechanicOptions
        {             
            flex-direction: column;
            flex-wrap: nowrap !important;
        }
        .comp_MechanicOptions { width: var(--co-03); }
        .comp_MechanicOptionContainer { padding: var(--spc-5); width: var(--co-03); flex-wrap: nowrap; }
        .comp_MechanicOptionContainer:not(.comp_MechanicOptionContainer:last-child)
        { 
            border-bottom: 2px solid var(--d-surface-container-lowest);
        }
        .comp_MechanicOptionContent
        {
            padding: 0 var(--spc-5);
        }
    }
    @media screen and (max-width: 1000px)
    {
        .comp_MechanicDisplaySelectable { gap: var(--spc-5); }
        .comp_MechanicDisplaySelectable.comp_MechanicDisplayHasDescription { gap: var(--spc-7); }
        .comp_MechanicDisplayDefault { gap: var(--spc-5); }

        .comp_MechanicSubcontainer { width: 100%; gap: var(--spc-2); }

        .comp_MechanicMenuContainer { width: 100%; }

        .comp_MechanicMenuContainer, 
        .comp_MechanicMenuContainer .comp_MechanicOptions, 
        .comp_MechanicMenuContainer .comp_MechanicOptions .comp_MechanicOptionContainer
        {             
            flex-direction: row;
            flex-wrap: nowrap !important;
        }     
        .comp_MechanicOptionContainer
        {
            flex-wrap: nowrap;
            justify-content: center;
            min-width: 100%;
        }
        .comp_MechanicOptionContentContainer
        {
            width: 100%;
        }
        .comp_MechanicOptionContent
        {
            padding: var(--spc-3);
        }
        .comp_MechanicOptions
        { 
            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 Faq */
    .comp_Accordion.comp_Accordion_Default
    {
        border: 2px solid var(--d-surface-container-lowest);
    }
    .comp_Accordion.comp_Accordion_Transparent
    {
        border-top: 2px solid var(--d-surface-container-lowest);
    }
    .comp_AccordionOption
    {
        border-bottom: 2px solid var(--d-surface-container-lowest);
        transition: background-color 0.3s ease;
    }
    .comp_Accordion_Default .comp_AccordionOption
    {
        background: var(--d-surface);
    }
    .comp_Accordion_Transparent .comp_AccordionOption
    {
        background: transparent;
    }

    .comp_Accordion_Default .comp_AccordionOption .comp_AccordionQuestionTitle { color: var(--d-on-surface); }
    .comp_Accordion_Default .comp_AccordionOption .comp_AccordionQuestionIcon { color: var(--d-secondary); }

    .comp_Accordion_Transparent .comp_AccordionOption .comp_AccordionQuestionTitle { color: var(--d-on-surface); }
    .comp_Accordion_Transparent .comp_AccordionOption .comp_AccordionQuestionIcon { color: var(--d-on-surface); }

    .comp_AccordionAnswerContainer
    {
        overflow: hidden;
        max-height: 0;
        padding: 0;
        transition: height 0.3s ease;
    }
    .comp_Accordion_Default
    {
        background-color: var(--d-surface-container);
    }
    .comp_Accordion_Transparent
    {
        background-color: transparent;
    }

    .comp_AccordionOption[data-status='true'] .comp_AccordionAnswerContainer 
    { 
        max-height: max-content;
    }
    .comp_Accordion_Transparent .comp_AccordionOption[data-status='true'] .comp_AccordionAnswerContainer 
    {
        padding: var(--spc-1) var(--spc-2) var(--spc-3) var(--spc-2); 
    }

    .comp_Accordion_Default .comp_AccordionOption[data-status='true'] .comp_AccordionAnswerSubcontainer 
    { 
        padding: var(--spc-3) var(--spc-4); 
    }

    .comp_AccordionAnswerContainer p  { opacity: 0; transition: opacity 0.3s ease; }
    .comp_AccordionOption[data-status='true'] .comp_AccordionAnswerContainer p { opacity: 1; }

    .comp_AccordionQuestionIcon { transition: transform 0.3s ease; }
    .comp_AccordionOption[data-status='true'] .comp_AccordionQuestionIcon { transform: scaleY(-1); }

    @media screen and (min-width: 1001px)
    {
        .comp_AccordionAnswerSubcontainer
        {
            max-width: var(--co-06);
        }

        .comp_Accordion_Default .comp_AccordionOption:hover { background: var(--d-secondary); }
        .comp_Accordion_Default .comp_AccordionOption:hover .comp_AccordionQuestionTitle,
        .comp_Accordion_Default .comp_AccordionOption:hover .comp_AccordionQuestionIcon 
        { color: var(--d-surface); }
        .comp_Accordion_Transparent .comp_AccordionOption[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
    {
        background-repeat: no-repeat;
        background-position: center;
    }
    .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);
    }
/**/

/* Comp Product Card */

/**/

/* 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 Pagination Trail */
    .comp_PaginationTrail.splide__pagination
    {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--spc-1);
        align-self: stretch;
    }
    .comp_PaginationTrail.splide__pagination .presentation
    {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--spc-none);

        box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25);
    }
    .comp_PaginationTrail.splide__pagination .splide__pagination__page
    {
        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 {
        align-items: center;
        
        width: 16px;
        background: var(--d-primary);
    }
/**/