☰

Proton Lumo responsive + customizations

Proton Lumo website is more suitable for wide screens.

/* ==UserStyle==
@name           Proton Lumo responsive + customizations
@version        1.0.7
@description    Proton Lumo website is more suitable for wide screens.
@author         BreatFR (https://breat.fr)
@namespace      https://gitlab.com/breatfr
@homepageURL    https://gitlab.com/breatfr/proton-lumo
@supportURL     https://discord.gg/Q8KSHzdBxs
@license        AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
@preprocessor   stylus

@var    checkbox    avatar      "Avatar instead initials"                   1
@var    text        avatarurl   "Avatar URL"                                "URL between quotes"
@var    text        fontsize    "Custom font size"  1.2rem
@var    checkbox    hideplus    "Hide Lumo Plus"    1
@var    checkbox    widemode    "Wide mode"         1
==/UserStyle== */

/* === Credits ===
Website         https://breat.fr
facebook        https://www.facebook.com/breatfroff
mastodon        https://mastodon.social/@breat_fr
telegram        https://t.me/breatfr
vk              https://vk.com/breatfroff
X (twitter)     https://x.com/breatfroff
=== Credits === */

@-moz-document domain("lumo.proton.me") {
    /* Versions */
    :root {
        --themeversion: 'Theme v1.0.7 by BreatFR (https://breat.fr)';
        --install1: ' usercssjs.breat.fr ';
        --install2: ' gitlab.com/breatfr/proton-lumo ';
        --support1: ' ko-fi.com/breatfr ';
        --support2: ' paypal.me/breat';
        --fontsize: fontsize;
    }
	
    @media screen and (min-width: 900px) {
        header > div:nth-of-type(1) > ul > li:nth-of-type(3) {
            margin-left: auto;
        }
        header > div:nth-of-type(1)::before {
			align-items: center;
            background: -webkit-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
            background: -o-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
            background: -ms-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
            background: -moz-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
            background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
            -webkit-background-clip: text;
            -o-background-clip: text;
            -ms-background-clip: text;
            -moz-background-clip: text;
            background-clip: text;
            color: transparent;
            content: var(--themeversion) '\A''Install: ' url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABGdBTUEAAK/INwWK6QAAAAlwSFlzAAAOwgAADsIBFShKgAAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAARxSURBVDhPvZR5TJNnGMAfBIUFzLSctqWUlqPcCBlQjhpdkGvNWCY2rQfKBihImMc4VgUhoIM4mG5z7MicCROZbBBxICAUHEeG6IRF2nKUwteDclhbbkq/7gO+ZRoy+W+/5P3n+Z7n9z7fm+d94X/DALDF0PC7v7alJVlVW1sir668qaiqKFf8cufG+G+1l2eaW+PQm02WePrrUd6uYg+WlTUKs8+phfHv6QdimLqhUM/FIZb74lC496IolqV/lnp0pb+0QDhaXs7ByzZi6OnZ+qiwuPhx8lH9ANNxQUUHZMEZBlZ2gkhvASJ0OwhRJxDqyCCaMYEhCflNbRf3gK4vvygWV7xKY3o6vzuGaVC7whjqDv3YEi8zYHiFZCTWO2BSexAvEWEYJWByG2y5Qr+UbKJ9wIsVoFcHTHHNOoLMy9R7rEBE4wZy1AdEiJ+16s9w5mQHlzvax96NoG4gHN1PHG2L440P+Lso9V4gxroVrZBhpJXpMdKUVULDVet8eTg+spNmrUEdYLg9xHPqAfdQzdOkU5zmD1J5ze5UGeoCIx0hNElXYub7dfG87yTMHeN4p5KW3TTJT8nnnXHVOmU8nle1K1VVz3CYv8s5xEcj09Z+ITc0NLbDbrsatYexGh/HHjAYjK6FR+3rtCdMoX4gXvABeSXTtVOQ8rPFmugfsDExqotmp/0aw87GQ2vkOzsX9TuaaGYtYfw6zbFyNZbFYKR07TLTYkLhE5KZ5ovAwItryZthyBWYXCJZNmqdQPXMHKay7IgXIgFM+XZWLZP0LRMaF0CuUym9d48kUfCS15PkyWR8bWOGoCQY7qMTFDnRUcIcdkx3vRdRPesMkm/td4xVRLHfwdM350MqPbHBynQOJYJwwnvrqJxhp5Z5kTQ62rZhhGwuLwgJkOeG7Q3G0zengE69I7cxfq61haEffN2U9TTKOGIHMpSCDbitkXjQ1/ZFiYeH7IJfqD9e8t9c2sN2qmBQEJQM0j8YhIkq9oFT7UeOcW7v3dfZ7USa1lOwOcQGu9/RYqk00KdGgJ03XvoqD9MKras+LY24cSzxVh9jp3re3hi5HxrcZgCD0ep3NPczQg2X+03/W+RxbDPRCg2ktX60sR8T+fQ1wcs0JSVRqnmcnvbDB/VP3g1aWLKEwTEGSXU/k9/bfKU0obeo1HU1byrjKrljD0u0bAVSFDuOR0EMpC670HtN8jIPCwvffuzrMjdnDlI9dq2wWyOeJ8KgOIym7uZEox2pJya6CvLauj6/0vQ0LEC5QoUB7KEY7ePu/6uv8JYtrvkXyfflDlJunFhnY6yYY1EV8pTjz1+wgyb0WBfLAOLpbSCTEm00w57kGS02Nqg5CKeD3WaHMrKu4YqNIB9nn1acOalEzmc0SE6e4Uj5OV+pTiTL5yNY03oXogwlvCFFbUylugCqQpMQPSPL/6RVkXDWAS/fyOpLLT543GfMPYiAh0CSks6S5+UVT/Kz702d/ah16txpgTKHX4PkXMyWhkXswtMwAP4GEl0BMY+jC7gAAAAASUVORK5CYII=") var(--install1) url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAUCAYAAACJfM0wAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwwAADsMBx2+oZAAAAvRJREFUOE+dU0lrU1EUfqhbK4rixiHvvptW+gu0TZqkrQWHhVJpKyoI4lRx3ghdOCwFrS24cwCbmKYtVelCqIorf0NBrGkSWqJkWmgb7Hvv+J37brSxg9UPDuGcb8h5Jy/Gn5hsEv3TodrNul0VZgJyC/t0uxjptvpNX1r8xUxENOvRqpAK+Vuz8JUCOzbqUTVSYauTDtZTOmL16dGqkAnLfvalIlaHHlUDgcP2vl2UDlufKRRap8crgnXwJT2fHNLj3yi0ig0gSl9b/FRoraXpsGjU1IpIhUSA9ezLRGRxEjma8pAJySPf2uqYpDl8Yuv7mloR0PWynn3KH5btmvIAYrASnMcGMHwiw1ij6SWB514L3WQO+gXBcU0bxkdD1qSDspBt9lM6JJmkXHMtJRvlbi1ZEskGa08eOtazj/2ZoMxPGHXrlaD8QBy2r0maPSlo9pRXzlmLih1iKhmQH3D7RcXzYqeYYl3Fw37OKfdah1Swk/DFKG6Rc8n06opJ7lWTqBvheMwS194FhZ7nzLOO9RWvyhn2RQ33ubnVjpozNIpvu2eSfQ510SvnsknZ/Ralm3Ae3LBS3GcPIAB8Rat88HPO/IA5bSB01I0hJApiEHVHiyDmbUpdglLB6mDuS0eF4n+Fsg9+znGQh2DfW0oIoiFsjIGqG6jz3sblMya/+FXB/GPxXG0MndJrL+dwnrqxHdvZ5SREnl5JcuIQPEWx6YJnVufgtwWh6tdHr0LB27gv69mn/AmRw7KdKpjhPtthYviGxiTRCLZ/CEM3zgHjwnOoM6DnOfOsYz374B+fQ46OrIYdN3sgcGnMIvsuNoG5fFqfg9/Xyhk4FDzrWI8z9OiI5fFjwAw6Q2KCXktybyMEd+THnwroM6DnOfNKFxMBbf07cn2yxhk2n9BLi+imoGK7oGSDVJ90C4W5MyIeu4/0v+xfYb/wnXCjokD4R6URTNexJXp71DyuJf8P9/026faJ8e/H5LyDT/fddktTy8AwfgLHRHNkJDm7EgAAAABJRU5ErkJggg==") var(--install2) '· Support me: ' url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAUCAYAAACaq43EAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwwAADsMBx2+oZAAAA2FJREFUSEu1lktIVGEYhqfIXW5ctUkDF250q4jLILLUvBSjzjh285pahoxIK3Fop0iRiWbiNRMUzcvIpI1dNkVGYBckIzTRAkVHCbOyt/f7/Y81alOgvvBw5nzf+b/3/Nc5Jq0I4iKPdpg7xEy2VCSZJtglfpBRkkm85CQoKSlBT0/PjtDf34+BgQG0trYiOzsbAQEBxkvcI/uJ0gMCt9uN3dLs7CzMZrNhPkD2ENOgBHp7e/Vj29P4+DhCQ0MRGBiIkJAQZGRkYH5+XuVSUlIM8ywxlkUAp9Opkl76+BlwjwDPXgPLKzpIjfDe+ZAuEzrwWzLEuvgH8kp+ywssLi7C4/EYw/6S/MW43QXEFwFH84BjF4CCq8CT50DZdSDmHGPpwImzwN0u3WBNg4ODhnGhFKdKCex2u8pbrVbJeSSx2XhqhqYXgcRLQPJljhGviTmMZfB6HkjNBixZgPkMYynAu/e6oZexXYprTYSFhal8ZWWl5FYkuNn4xSgQm0nDAsIep+YSGqcyZqG5hT220tR6Gog7AQwN6YZexsVSXOtpUFCQyjc0NEjuuwQfkw09ngZO0SSZvbJsNOMQW9OANCuvqUASjd++0Q29jAukOHWIeKKiolS+rKxMcl8l4Sbo6+tTiXWVcy6Pn6QB51HM0rRZmgWwaeJjAEcpsLqqGwEul8swvkVsZEzuOzo6VD4iIkJyn4jpviRk43tpaQmwF7M4e2QYGaTzBaSn+ZyCuTndYE3Dw8OGscLPzw8Oh0PlxFzHm8jaydXd3a2SXlrg/isqBBLi1swM46R4IJfTMMMp2aDl5WXU1NSgoqICTU1NmJqaUnGZAn9/fzH9QoLFuEuMOzs71QObJJtfzONjdU9pmsN5n95supXGxsaQn59v9PQbiSVKbQTt7e360S3EjY8rJcCRw0Aeh9eH6eTkJKKjoxEZGYng4GDDUBghUWRdt4k60H2KQ4iaag4v97gPyVqRemSByAnVSJLIXuKlawSNjY266fYk8yv1SLoU96UEog7w7WqV2yo8PFxMf5KDUvxfUn+NNpsNzc3NaGtrU9eWlpZ15F5OHaG+vh51dXWora1FdXU1qqqqUF5eDjkkpA65IUX/RweIfPrIUl/1gXxN/IkcfYKsVmGO3CT7iA+ZTL8ANy582NV4RdEAAAAASUVORK5CYII=") var(--support1) url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAUCAYAAABroNZJAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwwAADsMBx2+oZAAAAslJREFUOE+Nk0tIVFEYx6WNEC1attA7znXmnHNvpjH3js7GRQ+dKDKTMgx6UOnMvaNZaRAoGD0WRTQPH6Nii6CgRa1yUUGEjo+0mTSkB7UIF0G0aFlUxNd37jmOjo7QH/6cgXu+3/leU7BSxLSvaVXnvhDTWmNqRhap2TqmVbZf1PXDm2RIrjyetkJiWJ9Z5Vmgpr2+/ZFfeOcd8YUaZeiyvKalUtP6y/yt+YNXGLNFnwfiC++U4UII2a1Vta8KiKxjG/RAB2D5T2S4ENZt8w85EMMCYoTXmKJ5NtQXfiPDhZCayEL8EbwcghLWAC5av8Yl9CCoWiOUVoU+GGnYKBEO5KmOdXII74t3+ylQvPvBReryurhoF3iabgAdmX8mET0bsJxPmpwMh3jKj0vIgbxWlCB4O+4BG54DB6H77S1Y/4+lyfBTLTu6DqQelOIacFdjb/qmgcYnBYT5wgGxH6LzvCduvRFcqyHeOlCKasClHwJy5THQgRmgsZSAYD+O6YELAsCNUylx73NeVJRaPLkxWN0L7h2tQK6OAku+QsAEkFjqj4AY1vXl8eJkfCFQgx2g1neDWtcFakMPlJ6MgrfrIdB+fJ07Og7a0ByQ6PiChNiPsplUNAMNdgMdSgMbygAb5Kf47aQfn3AArO8lbL3zFlgi1eBAqGG/zm7rttNAj9wCOjjr1Ltk1jcDrH8WtGTGCdaSaSC3xy45AN1oUbCcr8zfJiBlCGkZzoGwxBS+nvqGk1ikiekMwgZIbNLvALiYYTdhJj+zkyk/A7TzQbbz/GUSTaVd0RebPfGPhTIsV7hk90VD0TgVx5dHxQ4gRB9Z4Fn0y+v5heP9Lv7aaLMNWHUn0JvPgSYmlyGxVLu8nl/MZxnMiNTgWcsqmmvJid4I6+WbiFPg5fAxxsf3yOv/J3r3fVAfnncAvKG4TL898YlS+TmPCgr+AaBy8VrppmCMAAAAAElFTkSuQmCC") var(--support2);
            display: flex;
            font-family: inherit;
            font-size: 1.2rem;
			height: 60px;
			justify-content: space-evenly;
            pointer-events: none;
            position: absolute;
            text-align: center;
            width: 100vw;
            white-space: pre-line;
            z-index: 1;
        }
    }
    
    svg {
        min-height: fontsize !important;
        min-width: fontsize !important;
    }
    
    .markdown-rendering li,
    .markdown-rendering p,
    .markdown-rendering td {
        font-size: fontsize;
        line-height: 1.5;
    }
    .conversation-header {
        font-size: calc(var(--fontsize) + .2rem) !important;
        font-weight: bold;
        line-height: 1.5;
    }
    
    .user-msg-container {
        border: 1px solid var(--border-norm);
        border-color: var(--border-weak) !important;
        border-radius: var(--border-radius-xl) !important;
    }
    
    header::before {
        content: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 64 64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_26_114' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='64' height='64'%3E%3Ccircle cx='32' cy='32' r='32' fill='%23EFEBFF'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_26_114)'%3E%3Cpath d='M42.4499 12.1097L49.6457 7.48831C52.1406 5.8859 55.4516 7.43191 55.8298 10.3713L57.5715 23.9337L42.4465 12.1097H42.4499Z' fill='%236D4AFF'/%3E%3Cpath d='M22.9165 12.1097L15.7206 7.48831C13.2257 5.8859 9.91475 7.43191 9.53654 10.3713L7.7948 23.9337L22.9198 12.1097H22.9165Z' fill='%236D4AFF'/%3E%3Cpath d='M13.735 12.9391L17.2284 15.1851L11.5321 19.0136L12.2222 13.6424C12.3151 12.9225 13.1246 12.5476 13.7317 12.9391H13.735Z' fill='%234A2DC5'/%3E%3Cpath d='M51.0915 12.9391L47.598 15.1851L53.2944 19.0136L52.6043 13.6424C52.5114 12.9225 51.7019 12.5476 51.0948 12.9391H51.0915Z' fill='%234A2DC5'/%3E%3Cpath d='M62.5401 38.1462C62.5401 51.9873 46.1147 56.9206 32.413 56.9206C20.37 56.9206 2.28577 51.9873 2.28577 38.1462C2.28577 24.3052 15.7752 10.3148 32.413 10.3148C49.0508 10.3148 62.5401 24.3052 62.5401 38.1462Z' fill='%236D4AFF'/%3E%3Cpath d='M47.1845 42.6603C52.1662 40.5117 54.6588 35.1856 52.7519 30.7641C50.845 26.3426 45.2606 24.5 40.2788 26.6486C35.2971 28.7972 32.8044 34.1233 34.7114 38.5448C36.6183 42.9663 42.2027 44.8088 47.1845 42.6603Z' fill='white'/%3E%3Cpath d='M34.418 33.0505C35.4099 27.875 41.0499 24.4877 46.1358 25.2773C51.6463 26.0171 55.3653 31.594 52.8705 36.7994C53.4809 34.4472 53.1658 31.8926 51.7691 29.9187C47.2637 23.6484 37.0488 26.2328 34.418 33.0505Z' fill='%234129A3'/%3E%3Cpath d='M24.7442 38.542C26.6511 34.1205 24.1585 28.7944 19.1768 26.6458C14.195 24.4973 8.61062 26.3398 6.70368 30.7613C4.79674 35.1828 7.28936 40.5089 12.2711 42.6575C17.2529 44.8061 22.8373 42.9635 24.7442 38.542Z' fill='white'/%3E%3Cpath d='M46.5833 39.8431C48.3991 39.8431 49.871 37.4443 49.871 34.4852C49.871 31.5261 48.3991 29.1273 46.5833 29.1273C44.7675 29.1273 43.2955 31.5261 43.2955 34.4852C43.2955 37.4443 44.7675 39.8431 46.5833 39.8431Z' fill='%234129A3'/%3E%3Cpath d='M18.7383 40.2558C20.5541 40.2558 22.0261 37.857 22.0261 34.8979C22.0261 31.9387 20.5541 29.5399 18.7383 29.5399C16.9225 29.5399 15.4506 31.9387 15.4506 34.8979C15.4506 37.857 16.9225 40.2558 18.7383 40.2558Z' fill='%234129A3'/%3E%3Cpath d='M25.0387 33.0505C22.4079 26.2328 12.1929 23.6484 7.68763 29.9187C6.29423 31.8893 5.97574 34.4472 6.58618 36.7994C4.08803 31.5874 7.80706 26.0171 13.3209 25.2773C18.4068 24.4877 24.0501 27.875 25.0387 33.0505Z' fill='%234129A3'/%3E%3Cpath d='M26.7131 42.4526C27.814 42.4526 28.7027 43.3446 28.7027 44.4422' stroke='white' stroke-width='0.577346' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M30.6947 42.4526C29.5939 42.4526 28.7052 43.3446 28.7052 44.4422' stroke='white' stroke-width='0.577346' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath opacity='0.7' d='M21.074 33.3022C21.7593 33.3022 22.3148 32.7467 22.3148 32.0614C22.3148 31.3761 21.7593 30.8206 21.074 30.8206C20.3888 30.8206 19.8333 31.3761 19.8333 32.0614C19.8333 32.7467 20.3888 33.3022 21.074 33.3022Z' fill='white'/%3E%3Cpath opacity='0.7' d='M48.9189 32.8895C49.6041 32.8895 50.1597 32.334 50.1597 31.6487C50.1597 30.9634 49.6041 30.4079 48.9189 30.4079C48.2336 30.4079 47.6781 30.9634 47.6781 31.6487C47.6781 32.334 48.2336 32.8895 48.9189 32.8895Z' fill='white'/%3E%3C/g%3E%3C/svg%3E");
        display: inline-block;
        margin-right: .5em;
    }
    
    .avatar-and-notice__notice::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-lock-icon lucide-lock'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
        content: "";
        display: inline-block;
        height: fontsize;
        margin-right: .3em;
        vertical-align: middle;
        width: fontsize;
    }
    .avatar-and-notice__notice {
        color: white;
    }
    
    if avatar {
        [data-testid="heading:userdropdown"] > span:nth-of-type(2) > span,
        .user-initials-active > span {
            display: none;
        }
        [data-testid="heading:userdropdown"] > span:nth-of-type(2) {
            border: 0;
            padding: 0;
        }
        [data-testid="heading:userdropdown"] > span:nth-of-type(2)::before {
            aspect-ratio: 1 / 1;
            background: url(avatarurl) center center / cover;
            border-radius: .5em;
            content: "";
            height: auto;
            margin: auto;
            padding: 0;
            width: 32px;
        }
        .user-initials-active {
            aspect-ratio: 1 / 1;
            background: url(avatarurl) center center / cover;
            border-radius: .5em;
            content: "";
            height: auto;
            margin: auto;
            padding: 0;
            width: 3.4rem;
        }
    }
    
    if hideplus {
        .chat-history-upsell,
        .navigation-item:has(.lumo-plus-button),
 		.navigation-item:has([href="https://account.proton.me/u/1/lumo/dashboard?addon=lumo"]) {
            display: none;
        }
    }
    
    if widemode {        
        /* General */
        [style="--max-w-custom:46.5rem;"],
        [style="--max-w-custom: 46.5rem;"],
        [style="--max-w-custom:51.25rem;"],
        [style="--max-w-custom: 51.25rem;"],
        [style*="--md-max-w-custom:90%;"],
        [style*="--md-max-w-custom: 90%;"],
        [style*="--lg-max-w-custom:43rem;"],
        [style*="--lg-max-w-custom: 43rem;"] {
            max-width: 100% !important;
            padding-left: 1em;
            padding-right: 1em;
            width: 100% !important;
        }        
        
        /* Welcome message */
        .main-text-container > h1 {
            margin: auto;
        }
        
        /* Conversation header */
        .conversation-header > div {
            margin: auto;
            overflow: hidden;
            position: relative;
            width: 100%;
        }
        .conversation-header > div > div:nth-of-type(1) {
            justify-content: center;
            position: relative;
            width: 100%;
        }
        .conversation-header > div > div:nth-of-type(1) > span {
            width: 100%;
        }
        .conversation-header > div > div:nth-of-type(1) > span > button {
            text-overflow: unset !important;
        }
        .conversation-header > div > div:nth-of-type(2) {
            position: absolute;
            right: 1em;
        }
        
        /* Bubbles */
        .assistant-msg-container {
            margin-left: 0;
            max-width: 80% !important;
            width: auto !important;
        }
        .user-msg-container {
            margin-right: 0;
            max-width: 80% !important;
            width: auto !important;
        }
        .user-msg-container > div:nth-of-type(1) {
            width: 100%;
        }
        .user-msg-container > div:nth-of-type(2) {
            border-radius: 0 0 1em 1em;
        }
        
        .file-card {
            width: auto;
        }
        .upload-menu {
            min-width: 225px !important;
        }
        
        .lumo-plus-settings-gradient > div:nth-of-type(1) {
            flex-basis: calc(100% - 250px);
        }
        .lumo-plus-settings-gradient > div:nth-of-type(2) {
            align-items: center !important;
            width: 200px !important;
            justify-content: center !important;
        }
        .lumo-plus-settings-gradient ul li span {
            text-overflow: initial !important;
            overflow: auto !important;            
        }
    }
}