/* ==UserStyle==
@name Kindroid responsive + customizations v4.xx
@description Kindroid website is more suitable for wide screens + add customizations (theme) + add new features (scripts).
@version 4.2.4
@author BreatFR (https://breat.fr)
@namespace https://gitlab.com/breatfr
@homepageURL https://gitlab.com/breatfr/kindroid
@supportURL https://discord.gg/fSgDHmekfG
@license BY-NC-ND; https://creativecommons.org/licenses/by-nc-nd/4.0/
@preprocessor stylus
@var text separator1 "🌐 WHOLE WEBSITE 🌐" "_"
@var checkbox adaptablemodals "Adaptable modals" 0
@var range avatarbrightness "Avatar brightness" [1, 0, 2, .1]
@var range avatarcontrast "Avatar contrast" [1, 0, 2, .1]
@var select avatarflip "Avatar flip" {
"Default": "avatarflipdefault",
"Horizontally": "avatarfliphorizontally",
"Vertically": "avatarflipvertically",
"Horizontally & Vertically": "avatarfliphorizontallyvertically"
}
@var range avatargrayscale "Avatar grayscale" [0, 0, 100, 1, '%']
@var checkbox avatarhoverzoom "Avatar hoverzoom" 0
@var range avatarinvert "Avatar invert colors (set 1 for light mode users)" [0, 0, 1, 1]
@var select avatarmixblend "Avatar mix blend" {
"Default": "avatarmixdefault",
"Color": "avatarmixcolor",
"Color-burn": "avatarmixcolorburn",
"Color-dodge": "avatarmixcolordodge",
"Darken": "avatarmixdarken",
"Difference": "avatarmixdifference",
"Exclusion": "avatarmixexclusion",
"Hard-light": "avatarmixhardlight",
"Hue": "avatarmixhue",
"Lighten": "avatarmixlighten",
"Luminosity": "avatarmixluminosity",
"Multiply": "avatarmixmultiply",
"Overlay": "avatarmixoverlay",
"Plus-lighter": "avatarmixpluslighter",
"Saturation": "avatarmixsaturation",
"Screen": "avatarmixscreen",
"Soft-light": "avatarmixsoftlight"
}
@var range avataropacity "Avatar opacity" [1, .1, 1, .1]
@var range avatarrotate "Avatar rotate" [0, -360, 360, 1, 'deg']
@var select avatarstyles "Avatar styles" {
"Default": "avatardefault",
"Alien": "avataralien",
"Apple": "avatarapple",
"Atom": "avataratom",
"Bookmark": "avatarbookmark",
"Cannabis": "avatarcannabis",
"Chat bubble": "avatarchatbubble",
"Chef hat": "avatarchefhat",
"Circle": "avatarcircle",
"Cloud": "avatarcloud",
"Cog": "avatarcog",
"Crystal": "avatarcrystal",
"Devil": "avatardevil",
"Gem": "avatargem",
"Ghost": "avatarghost",
"Gift": "avatargift",
"Heart": "avatarheart",
"Octagon": "avataroctagon",
"Oval H": "avatarovalh",
"Oval V": "avatarovalv",
"Pentagon": "avatarpentagon",
"Rabbit": "avatarrabbit",
"Ratio": "avatarratio",
"Rectangle": "avatarrectangle",
"Rectangle big": "avatarrectanglebig",
"Shield": "avatarshield",
"Ship wheel": "avatarshipwheel",
"Shirt": "avatarshirt",
"Slime": "avatarslime",
"Smartphone": "avatarsmartphone",
"Squircle": "avatarsquircle",
"Star": "avatarstar",
"Tablet": "avatartablet",
"Tree deciduous": "avatartreedeciduous",
"Tree pine": "avatartreepine",
"Triangle": "avatartriangle",
"Venetian mask": "avatarvenetianmask"
}
@var range avatarzoom "Avatar zoom" [1, 0, 3, .1]
@var color backgroundcolor "Background color" #101010
@var text backgroundurl "Background URL (set 2 simple or double quotes without link to remove image)" '"https://gitlab.com/breatfr/kindroid/-/raw/main/images/heart-pattern.png"'
@var checkbox blurcontent "Blur content" 0
@var select fontfamily "Font family" {
"Default": "fontfamilydefault",
"Bello Script": "fontfamilybello",
"Cascadia Code": "fontfamilycascadiacode",
"Montserrat": "fontfamilymontserrat",
"Noto Sans": "fontfamilynotosans",
"Roboto": "fontfamilyroboto",
"Ubuntu": "fontfamilyubuntu",
"Varela Round": "fontfamilyvarelaround"
}
@var text fontsize "Font size" 1.2rem
@var checkbox hidediscord "Hide new discord banner" 0
@var checkbox hidescrollbars "Hide scrollbars" 1
@var checkbox hidetrialbar "Hide trial bar" 1
@var text separator2 "💬 CHAT PAGE & MAIN MENU 🛠️" "_"
@var text avatarsizemykindroids "Avatar size in my kindroids" 300px
@var checkbox avataronrightside "Avatar on right side" 0
@var text avatarposition "Avatar position" 0px
@var text avatarsize "Avatar size (set 0 to hide it)" 512px
@var select fullbio "Full bio in Explore and Create Kin" {
"Default": "fullbiodefault",
"Always": "fullbioalways",
"Active": "fullbioactive"
}
@var checkbox hidebilling "Hide billing" 0
@var checkbox hidekinsexplore "Hide kins with few infos in explore" 0
@var checkbox hidesharing "Hide sharing" 0
@var checkbox kmenuicon "K menu icon" 1
@var text separator3 "💬 GROUPCHAT PAGE 💬" "_"
@var select continueconv "Continue conversation mode" {
"Automatic": "continueconvauto",
"Manual": "continueconvmanual",
"Manual center": "continueconvmanualcenter"
}
@var text separator4 "💬 CHAT & GROUPCHAT PAGES 💬" "_"
@var select actionsstyle "Actions texts style" {
"Default": "actionsdefault",
"Asterisks": "asterisks",
"Asterisks + bold": "asterisksbold",
"Asterisks + bold + no italic": "asterisksboldnoitalic",
"Bold": "bold",
"Bold + no italic": "boldnoitalic",
"No italic": "noitalic"
}
@var color actionscolor " ↳ Actions texts color" rgb(136, 136, 136)
@var color actionscolorforus " ↳ Actions texts color for us" rgb(136, 136, 136)
@var checkbox avatarchat "Avatar chat mode (on chat page require: Avatar choice, Avatar choice for us is recommand but not required; on group chat page is same as Avatar choice for us)" 0
@var checkbox avatarchoiceforus "Avatar choice for us" 0
@var text avatarchoiceforusurl " ↳ Avatar choice for us URL" "URL between quotes"
@var text avatarchatgroupsize "Avatar chat/group size" 162px
@var checkbox bgshadow "Background shadow" 1
@var color bgshadowcolor "Background shadow color" #101010
@var color bubblesbgcolor "Bubbles background color" rgb(33, 27, 25)
@var text bubblesbgurl "Bubbles background URL" "URL between quotes"
@var color bubblesbgcolorforus "Bubbles background color for us" rgb(27, 28, 30)
@var text bubblesbgurlforus "Bubbles background URL for us" "URL between quotes"
@var color fontcolor "Font color" #cbcbcb
@var color fontcolorforus "Font color for us" #cbcbcb
@var checkbox hidechattingas "Hide chatting as" 0
@var checkbox hidenames "Hide names in bubbles" 1
@var checkbox manuallyedited "Manually edited" 1
@var select systembubblesstyle "System bubbles style" {
"Wide": "systembubbleswide",
"Dark": "systembubblesdark"
}
@var range textareaopacity "Textarea opacity" [1, 0, 1, .1]
@var range textareabgopacity "Textarea background opacity" [1, 0, 1, .1]
@var text separator5 "💬 CHAT & CALL PAGES 📞" "_"
@var checkbox avatarchoice "Avatar choice" 0
@var text avatarchoiceurl " ↳ Avatar choice URL" "URL between quotes"
@var text separator6 "📷 SELFIE PAGE 📷" "_"
@var checkbox imageborder "Image border on hover" 1
@var checkbox requestselfie "Request selfie buttons at top" 1
@var checkbox smallrequest "Small request selfie buttons" 0
@var text separator7 "📞 CALL PAGE 📞" "_"
@var checkbox biggerscreensharing "Bigger Screen Sharing" 0
@var checkbox screensharezoom " ↳ Bigger Screen Sharing zoomed" 0
@var text separator8 "☢️ Experimental things ☢️" "_"
@var checkbox experimentalavatarmoveanywhere "Avatar move anywhere" 0
@var text experimentalavatarmoveanywhereleft " ↳ Avatar move anywhere left" 50%
@var text experimentalavatarmoveanywheretop " ↳ Avatar move anywhere top" 50%
@var checkbox experimentalmainmenu "Main menu" 1
@var checkbox experimentalrequestselfie "Request selfie" 1
==/UserStyle== */
@-moz-document domain("kindroid.ai") {
/* ===================================
Whole kindroid domain
=================================== */
/* Versions */
:root {
--themeversionpc: 'TPC v4.2.4';
--themeversionmobile: 'TM v1.0.7';
--customavatarsgroupchat: 'CAG v1.0.1';
--chatversionpc: 'CPC v2.0.20';
--chatversionmobile: 'CM v2.0.20';
--selfiesversionpc: 'SPC v2.0.5';
--selfiesversionmobile: 'SM v2.0.5';
--notepadversion: 'NP v2.0.4';
--trversion: 'TR v2.0.2';
--tvversion: 'TV v2.0.3';
--author: ' by BreatFR (https://breat.fr)';
--install1: ' usercssjs.breat.fr ';
--install2: ' gitlab.com/breatfr/kindroid ';
--space: '\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
--support1: ' ko-fi.com/breatfr ';
--support2: ' paypal.me/breat ';
--avatarsize: avatarsize;
--avatarchatgroupsize: avatarchatgroupsize;
--avatarzoom: avatarzoom;
--experimentalavatarmoveanywhereleft: experimentalavatarmoveanywhereleft;
--experimentalavatarmoveanywheretop: experimentalavatarmoveanywheretop;
--experimentalavatarmoveanywhereleft-neg: calc(-1 * var(--experimentalavatarmoveanywhereleft));
--experimentalavatarmoveanywheretop-neg: calc(-1 * var(--experimentalavatarmoveanywheretop));
--fontfamily: var(--chakra-fonts-PoppinsRegular);
--fontsize: fontsize;
}
@media screen and (min-width: 900px) {
.css-58wha4::after,
.css-z0osps::after {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
content: var(--themeversionpc) ' · ' var(--themeversionmobile)' · ' var(--customavatarsgroupchat) ' · ' var(--chatversionpc) ' · ' var(--chatversionmobile) ' · ' var(--selfiesversionpc) ' · ' var(--selfiesversionmobile) ' · ' var(--notepadversion) ' · ' var(--trversion) ' · ' var(--tvversion) var(--author) '\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) var(--space) ' 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: inline-block;
filter: invert(avatarinvert);
font-family: var(--chakra-fonts-PoppinsRegular);
font-size: 1.2rem;
left: 0;
pointer-events: none;
position: absolute;
text-align: center;
top: 0;
width: 100%;
white-space: pre-line;
}
}
/* Wide mode */
body {
box-sizing: border-box;
max-height: 100vh;
max-width: 100vw;
overflow-y: hidden !important;
position: relative;
}
/* New discord */
body::before {
background: var(--chakra-colors-primaryBlack);
border-radius: 1em;
box-shadow: rgba(139, 109, 255, 0.4) -5px -5px 5px 5px,
rgba(139, 110, 255, 0.4) -5px 5px 5px 5px,
rgba(254, 133, 133, 0.4) 5px -5px 5px 5px,
rgba(254, 133, 133, 0.4) 5px 5px 5px 5px;
color: var(--chakra-colors-primaryWhite);
content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAC9FBMVEVHcEznRET3PkT+PED3KCz9Fhj4TFD+Cw/oSkz0TlL/BwnwQEX/BgnqTlL9Nzz8ISfrTFD/Mjj5T1T7SUz+Vlz2HiHeSkzeSEn6VFn+b3TiPz/7VFn/dHroUVXYb3PcQ0PFWV+yRUn4i4/hQEHTdXqGMji6YmbyYma1Oj33TE72n6T9pqrfVljiPj+2c3aaWVzyVFjGVVn2UVPfPD5fKCubYGJ7PUHCTVHecXTztbe9fH7RT1LtTlFlNTfLgobjSErqPD7xVVfCmJpBFxlLHR+NXl91TE7kVVj+X2LRp6n0xsaifH14REd1KCvmam6kQES5jY3jvr1JIyPoc3bMXmKha23oio7YtreIUlbDmZr+CQCtU1Xdo6b+DgD+IwD+EQD+FgD+CQD+GgD+MQD+KQD+LAD+JgD+RAD+PAD+TQD+OAD+NAD+AgD+UQBrPD3ux8Y2EQ7+HQD+QAD+SQD4BAD+BgD8MgD7EQD3JADJbG+xaW/4GQL3NQCVZ2jzDgDyKwLzQgDuSQjxFwDok5buPgDuCQDvIgHxHgLrBADqNwJFIiLvLR7wRxzqFAPpLgHwz8/ab3PoHQHJFwOmX2ThCgLzPS7iNgbiFgLfKAPZEwPYBwHnJhXpXDmaWFvQNSfXNQfZGhTOMgXEOSHTJAXoSzfODAG2hYPKFAR2RUW7FQbIMRvKRyTLHQiqe3vmq6+TfYDsfGjdaE2XJw/XRyfKKBTxpqM+KSpWJSKrKBvt0tHBFQvuvLnJLifINi7nlI1yQUB6T0/YUknxrqiuZF7ft7XOQjq1RDnKTkCoEQdFEA5uNzemdHKVZmS+Khagf37UaF+2lpaZTkCOXljnraCBPi+dFw2DS0PLXlHlt7BLIiB8IRqtMyttJyS5bWSrUEnUdnGIMCvOc2XaloelXlkxDwxYMzRxDgfYpJ3YraeLQjycMyFXFBCbPjrqy8bJqKd5GxW1gX/RgnTMk43Qjofcn5jDnZvRmpfkv7mXJyHDeHHUhn18Fg2MuemHAAAA8XRSTlMAAQMGCQwNEBQYGB0eIiUtLTQ0Oz4+P0lJS1BRUlRaX2BhYm5uc3R1dXZ6gICChoaHjZGUlJiYmJmcnJ6ioqmsra6urq60trm5usDCwsPHycnLzc3Oz9DS0tTX2NjZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dra2tra2tvb29vc3Nzd3d3d3t7e39/f4ODg4ODh4eHh4uLi4+Pj5OTl5ubm5ufo6Ojo6enq6+zs7Ozs7e3t7e7u7u7v7+/x8fPz8/Pz8/T09PT19fX19vb29vb39/f4+Pj4+Pj5+vr6+vr6+/v7+/z8/Pz8/P39/f39/f7+/v7+VELJqgAABj9JREFUeNqVlltsHFcZx79zzszO7nrtvXlry7fYceKEOAGnVakVpRKCIohVwUMlQtuoKqYgNQEqqGgQFRFyJGjykAcaHniggESbVKAIVNoX4jZKolKaurFN6qb1/bLr9Xpndm47tzPnHB7cJLuJLcQ8jY7OT//5/t93/nMk+L8fadNVDAgBAgABQgjxvxCMMCYyJjIBAEYp41RwvjWCsESUhmRT+qt7NhamFqYraxWfcrY5ggiJZlu+eAJgvUNLAgDEPienHBh5f8GgjG+CECnavus1YGrBcW9QAOAAWOadbc875Z9OeZTfjSBJue8Lzw/c1Eq8GvhgAIAkCxRR9LlktvPC0SvWZ8xtBMvRPW/KK5cMu2paTsykGITcWE3YRGlMJtTs+acumhveSbeJ+ODr+fyaVTQNLIBRRLDvUaBhxK6gbCVd/ZV5ZcMD6Vbh0cG/fbBaLpbsLIpAhFIWCXjSinDwW0u4rO4Afu7+fC1ClAfOXlktzLkQx0kHLEpElSMH8SiwMqCM/6kfn+ouUX4bQaT1lL686MQRQlwD4iVwUlOSZlxzI4JnNUeOLab2HJt076hgZVfqan4OGkTgRbq37WZtf15REkHbIzA95QkHefFQlKa+FDfYHZXUr+fNGTnOjZ6B1ujSGy0NXXlehf7Scue3b1yJ81AnWWFrkRqTSartvZIS8e2v7xEXPqw68S9LmXKC7P/5bPzhx5z/RAIc6pBux7V9UbhGG/SOx+hLRdVweKvkEAQ4vTCDVXR4MkA8A1qM3dV9h5YHDo1eWFKrFJRYvBJykWOGE7K3jvSNY+GyjKwGNa0UgePq+Gujf1jRAwAktVRZSfIT77gCXHWyAad94aOGSa8GYdp7T7/TVf79nLnh324LhUz0/MMVALB9vEWT4q44NOzxGsR4+Yf9a6cWzA3/5EPzPs5A+1zAAUuZAIhkiB4zX6sCzszppLFofjZvTTv/yZAGbSUKiOSyPgjZRN/8zSqtLT9U/Uhg81ujsC0op/UdockAKx2FYC1j8AHp31VW51io3zn8Su5TDQzo/qDKgKSPf+wBYHj8pUVny4RByvE8UNrae9pFktLbOQkC5O9alw22JYKbtv+VCSh2UaUR5/54Q1sH/6GOw0velqGESBfViwxlnWdvAOwNFy0Oe79ybMEUW+dYbN+S4Bmrwzr4MAi4Hmr4wMCxm2q4dfSR5OMziNncH5/1sVx1V0PY1g4qx3wrBJFs51UbCbZUznEA5hegs+yfPnrdDvkWCFa6KrAiOBpaGKOKIMCRr091/O6Fq3rIN0dI+nuTVYj6Qw+0Do39PZqkEqyCpHed+cklm4rNEERyvaM+Enz/C2r2mZG3rsWkSqQoUq50+jsfMrYZQmKDWuBgfkCfMBIjbc9849WPZIQ0VUxHzx/Mc7GZSvLItKZi0nNmtRJRiyNHDjS/K7Mg9gl4T+8sh/ciiMR2fH4MRf3erk8c7nmm9tvtP4hO2BhiZuyj4XGX18c4xlgmzS9edk2v6f5zpQAAvMBxz54ollmYWkWTQ6lKXS0ExzK5VOqJ3lHfJrub37QYAAC3FuD8o1MktLLCI1FciyCcfvDkLkDsbVdzpaHrHCmccwHg5t9+tm8Gu66Uvqv7SH7wZWOy6qnuahnvNHpf+cVyxaSMCUErC8kQRZoq3LwLiQ5fC6vccMIiFmKiZ+AvYvqXpZLt80hL9wSKYZBJ3uH1vyS/+Zq5DmEuEvD5WFCQ9iZf82DplBs7vuK3Mt1puG/Zreu+YG88WVlXcNp1E0Fj3m7PXW5qTMf7zyDwx70yCHD6ztarcKr3XsrYoZro7/uXLTcszrYq8UzDFG4EwzCSOvD+ffN+/YfRuXT3zYCzgUfffW50vJCga0xqFmkCwJc55XLn4aNLfv0kU+1Hr5ybbf7W0vfNV3/cNrZmRzEvSio0r5OoC5G2/fkJoz6UgFtjwyOD8p8uLriNLz4ySD6eL4DMORRJ6ARdOx6a/tnKPaHklcaeU/zCmhbqlnb14OA+LV/wAQCUtvbe4snZ5Vt5UTOWdmhHPdvlEKxbpcLF5uG+PsUCaPTBOrm2olrs3rMvXA/xW29GU+OJRFSRAajv2bpleptfe+7cvITnaUVFjgIA0ND1g5pd/wUZKlu0oFBDYQAAAABJRU5ErkJggg==")'\A This message will stay here, to give you fast access to important links, but you can show/hide it in theme settings.\A\A Link to get help and comments:\A- https://discord.gg/fSgDHmekfG\A\A To read the FAQs and Tutorials like "Set video as avatar or background" or "How to use the Animated Avatar Changer":\A- https://go.breat.fr/KindroidFAQs\A\A If you want see my work for other websites:\A- https://usercssjs.breat.fr\A\A If you like my work, feel free to help me with a donation:\A- https://ko-fi.com/breatfr\A- https://paypal.me/breat';
display: block;
font-family: var(--fontfamily);
font-size: 1.75rem;
left: 50%;
max-height: 85vh;
overflow-y: auto;
padding: 1em;
position: fixed;
text-align: center;
top: 50%;
transform: translate(-50%, -50%);
white-space: pre-line;
width: 85vw;
z-index: 9999;
}
if hidediscord {
body::before {
display: none;
}
}
/* Header background color */
.css-58wha4,
.css-z0osps {
background-color: var(--chakra-colors-secondaryBlack) !important;
max-width: 100%;
padding: 0 1em !important;
}
/* Fix settings word position and style in menu */
.css-ji0zhw .css-1mwto65 {
color: var(--chakra-colors-primaryWhite);
font-family: var(--fontfamily);
font-size: 36px !important;
left: 4%;
line-height: 54px;
position: fixed;
top: .2em;
}
.css-1b1fzbz .css-1mwto65 {
display: none;
}
/* Put icons in header clickable again */
.css-58wha4 > div:nth-of-type(1),
.css-z0osps > div:nth-of-type(1) {
z-index: 1;
}
/* Bigger text */
.css-2aa4oa,
.css-dhnoom,
.css-1dhayxc *,
.css-yhhl9h *,
textarea {
font-size: fontsize !important;
line-height: 1.5 !important;
}
textarea::placeholder {
font-size: fontsize !important;
line-height: 1.5 !important;
}
/* Hide scrollbars */
if hidescrollbars {
*,
:root ::-webkit-scrollbar {
scrollbar-width: none !important;
-ms-overflow-style: none !important;
-moz-overflow-style: none !important;
-webkit-overflow-style: none !important;
}
::-webkit-scrollbar {
display: none;
width: 0;
}
}
/* Loading bar */
#nprogress .bar {
background: 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%);
filter: invert(avatarinvert);
}
/* Actions texts */
if (actionsstyle=="actionsdefault") || actionscolor {
.css-1dhayxc span {
color: actionscolorforus !important;
}
.css-yhhl9h span {
color: actionscolor !important;
}
}
if (actionsstyle=="asterisks") {
.css-1dhayxc span:before,
.css-1dhayxc span:after,
.css-yhhl9h span:before,
.css-yhhl9h span:after {
content: "*" !important;
}
}
if (actionsstyle=="asterisksbold") {
.css-1dhayxc span:before,
.css-1dhayxc span:after,
.css-yhhl9h span:before,
.css-yhhl9h span:after {
content: "*" !important;
}
.css-1dhayxc span,
.css-yhhl9h span {
font-weight: bold !important;
}
}
if (actionsstyle=="asterisksboldnoitalic") {
.css-1dhayxc span:before,
.css-1dhayxc span:after,
.css-yhhl9h span:before,
.css-yhhl9h span:after {
content: "*" !important;
}
.css-1dhayxc span,
.css-yhhl9h span {
font-style: normal !important;
font-weight: bold !important;
}
}
if (actionsstyle=="bold") {
.css-1dhayxc span,
.css-yhhl9h span {
font-weight: bold !important;
}
}
if (actionsstyle=="boldnoitalic") {
.css-1dhayxc span,
.css-yhhl9h span {
font-style: normal !important;
font-weight: bold !important;
}
}
if (actionsstyle=="noitalic") {
.css-1dhayxc span,
.css-yhhl9h span {
font-style: normal !important;
}
}
/* Arrow back in header */
.css-58wha4 > div:nth-of-type(1) > button:nth-of-type(1) img,
.css-z0osps > div > div:hover img {
height: 60px;
width: 60px;
}
.css-58wha4 > div:nth-of-type(1) > button:nth-of-type(1):hover img,
.css-z0osps > div > div:hover img {
display: none;
}
.css-58wha4 > div:nth-of-type(1) > button:nth-of-type(1):hover,
.css-z0osps > div > div:hover {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 44 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.5 13L9.70711 21.7929C9.31658 22.1834 9.31658 22.8166 9.70711 23.2071L18.5 32' stroke='url(%23A)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 22.5H34' stroke='url(%23A)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
filter: invert(avatarinvert);
height: 60px;
width: 60px;
}
/* Blur content */
if blurcontent {
/* email in menu */
.css-e43fvd > p,
/* Bubbles content */
.css-1dhayxc .css-j7qwjs,
.css-yhhl9h .css-j7qwjs,
/* Shared links */
.css-1dhayxc .css-fujl5p > div:nth-of-type(2) > p.css-dhnoom,
.css-1dhayxc .css-116lnl0 > div:nth-of-type(2) > p.css-dhnoom,
/* Voicecall captions */
.css-1md15gg > div > p {
position: relative;
visibility: hidden;
}
.css-e43fvd > p::before,
.css-1dhayxc .css-j7qwjs::before,
.css-yhhl9h .css-j7qwjs::before,
.css-1md15gg > div > p::before,
.css-1dhayxc .css-fujl5p > div:nth-of-type(2) > p.css-dhnoom::before,
.css-1dhayxc .css-116lnl0 > div:nth-of-type(2) > p.css-dhnoom::before {
color: #cbcbcb;
font-family: var(--fontfamily);
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
visibility: visible;
white-space: nowrap;
}
.css-e43fvd > p::before,
.css-1dhayxc .css-j7qwjs::before,
.css-yhhl9h .css-j7qwjs::before,
.css-1md15gg > div > p::before {
content: "Hidden Text";
}
.css-1dhayxc .css-fujl5p > div:nth-of-type(2) > p.css-dhnoom::before,
.css-1dhayxc .css-116lnl0 > div:nth-of-type(2) > p.css-dhnoom::before {
content: "Hidden Link";
}
.css-e43fvd > p::before {
font-size: 1.3em;
}
.css-1dhayxc .css-j7qwjs::before,
.css-yhhl9h .css-j7qwjs::before,
.css-1md15gg > div > p::before {
font-size: 2em;
}
/* Bubbles content */
.css-1dhayxc .css-j7qwjs::before,
.css-yhhl9h .css-j7qwjs::before,
/* Voicecall captions */
.css-1md15gg > div > p::before {
font-size: 2em;
}
/* Images uploading and Images uploaded */
.css-2jbc1u img,
.css-1dhayxc img:not([src*="/_next/static/media/editIcon"]) {
background: url("https://placehold.co/220x220?text=Hidden+image") no-repeat;
height: 0;
padding-left: 220px;
padding-top: 220px;
width: 0;
}
}
/* Hide trial bar */
if hidetrialbar {
.css-r1nv3m {
display: none;
}
}
/* Hide chatting as */
if hidechattingas {
.css-b9bzmp .css-ev1i1k {
display: none;
}
}
/* Images uploaded */
.css-2jbc1u img {
margin-bottom: 1em;
}
.css-1dhayxc img:not([src*="/_next/static/media/editIcon"]) {
border-radius: .5em;
margin-left: auto;
min-height: 183px;
min-width: 220px;
object-fit: contain;
transition: translate 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.css-1dhayxc img:not([src*="/_next/static/media/editIcon"]):hover {
transform: scale(1.5);
transform-origin: bottom right;
z-index: 5 !important;
}
/* Manually edited */
if manuallyedited {
.css-fujl5p {
position: relative;
}
.css-yhhl9h .css-fujl5p > div:nth-of-type(2) > div:nth-of-type(3) > p,
.css-yhhl9h .css-116lnl0 > div:nth-of-type(2) > div:nth-of-type(3) > p {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background-clip: text;
color: transparent;
filter: invert(avatarinvert);
}
.css-yhhl9h .css-fujl5p > div:nth-of-type(2) > div:nth-of-type(3) > p::after,
.css-yhhl9h .css-116lnl0 > div:nth-of-type(2) > div:nth-of-type(3) > p::after {
content: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h167.48' fill='none' stroke='url(%23A)' stroke-width='32' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M459.94 53.25a16.06 16.06 0 00-23.22-.56L424.35 65a8 8 0 000 11.31l11.34 11.32a8 8 0 0011.34 0l12.06-12c6.1-6.09 6.67-16.01.85-22.38zM399.34 90L218.82 270.2a9 9 0 00-2.31 3.93L208.16 299a3.91 3.91 0 004.86 4.86l24.85-8.35a9 9 0 003.93-2.31L422 112.66a9 9 0 000-12.66l-9.95-10a9 9 0 00-12.71 0z' fill='none' stroke='url(%23A)' stroke-width='32' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
display: inline-block;
height: fontsize;
margin-left: .3em;
vertical-align: text-top;
width: fontsize;
}
.css-yhhl9h .css-fujl5p > div:nth-of-type(2) > div:nth-of-type(3) > p::before,
.css-yhhl9h .css-116lnl0 > div:nth-of-type(2) > div:nth-of-type(3) > p::before {
content: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h167.48' fill='none' stroke='url(%23A)' stroke-width='32' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M459.94 53.25a16.06 16.06 0 00-23.22-.56L424.35 65a8 8 0 000 11.31l11.34 11.32a8 8 0 0011.34 0l12.06-12c6.1-6.09 6.67-16.01.85-22.38zM399.34 90L218.82 270.2a9 9 0 00-2.31 3.93L208.16 299a3.91 3.91 0 004.86 4.86l24.85-8.35a9 9 0 003.93-2.31L422 112.66a9 9 0 000-12.66l-9.95-10a9 9 0 00-12.71 0z' fill='none' stroke='url(%23A)' stroke-width='32' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
display: inline-block;
height: fontsize;
margin-right: .3em;
vertical-align: text-top;
width: fontsize;
}
/* Choose alternative */
[aria-label="Choose previous alternative"],
[aria-label="Choose next alternative"] {
padding-inline-end: 0;
padding-inline-start: 0;
}
[aria-label="Choose previous alternative"] > svg,
[aria-label="Choose next alternative"] > svg {
height: fontsize !important;
width: fontsize !important;
}
}
/* Modals size */
.chakra-modal__content {
border-radius: 1em;
box-shadow: rgba(139, 109, 255, 0.4) -5px -5px 5px 5px,
rgba(139, 110, 255, 0.4) -5px 5px 5px 5px,
rgba(254, 133, 133, 0.4) 5px -5px 5px 5px,
rgba(254, 133, 133, 0.4) 5px 5px 5px 5px;
height: auto;
margin: auto;
max-width: 90vw;
min-height: fit-content;
}
/* Adaptable modals */
if adaptablemodals {
.chakra-modal__content {
width: auto;
}
}
/* Modals's close button */
[aria-label="close"] svg,
[aria-label="Close"] svg {
background: transparent;
color: var(--chakra-colors-white);
height: 20px;
margin: 20px 20px 0 0;
position: fixed;
width: 20px;
z-index: 9999;
}
[aria-label="close"]:hover::before,
[aria-label="Close"]:hover::before {
color: var(--chakra-colors-white);
content: "Close";
font-size: 20px;
line-height: 20px;
margin-right: 5.5%;
margin-top: .85%;
position: fixed;
z-index: 9999;
}
/* Not allowed cursor when needed */
.chakra-spinner,
* [disabled] {
cursor: not-allowed;
}
/* Add border to textarea when focus */
textarea:not([aria-label="Send message textarea"]):focus,
input[aria-label="Code input"]:focus,
input[placeholder="Enter seed"]:focus {
border: 0;
border-radius: 32px;
box-shadow: rgba(139, 109, 255, 0.4) -2px -2px 2px 2px,
rgba(139, 110, 255, 0.4) -2px 2px 2px 2px,
rgba(254, 133, 133, 0.4) 2px -2px 2px 2px,
rgba(254, 133, 133, 0.4) 2px 2px 2px 2px;
}
.css-79elbk:has(textarea[aria-label="Send message textarea"]:focus)::after {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
border-radius: 32px;
content: "";
filter: invert(avatarinvert);
inset: -2px;
position: absolute;
z-index: -1;
}
.css-79elbk:has(textarea[aria-label="Send message textarea"]:focus)::before {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
border-radius: 32px;
display: block;
filter: invert(avatarinvert);
inset: 0;
opacity: .1;
position: absolute;
}
/* Remove the resize icon on textarea on chat page */
textarea:not(:focus),
textarea:focus {
opacity: 1;
resize: none;
}
/* Font family */
if (fontfamily) == (fontfamilydefault) {
* {
font-family: var(--chakra-fonts-PoppinsRegular) !important;
}
}
if (fontfamily) == (fontfamilybello) {
@font-face {
font-display: swap;
font-family: "Bello Script";
src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/Bello-Script.eot") format("eot"),
url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/Bello-Script.ttf") format("ttf"),
url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/Bello-Script.woff") format("woff"),
url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/Bello-Script.woff2") format("woff2");
font-style: normal;
font-weight: normal;
}
:root {
--fontfamily: "Bello Script" !important;
}
* {
font-family: "Bello Script" !important;
}
}
if (fontfamily) == (fontfamilycascadiacode) {
@font-face {
font-display: swap;
font-family: "Cascadia Code";
src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/CascadiaCode-Regular.otf") format("otf"),
url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/CascadiaCode-Regular.ttf") format("ttf"),
url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/CascadiaCode-Regular.woff2") format("woff2");
font-style: normal;
font-weight: normal;
}
@font-face {
font-display: swap;
font-family: "Cascadia Code";
src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/CascadiaCode-Bold.otf") format("otf"),
url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/CascadiaCode-Bold.ttf") format("ttf"),
url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/CascadiaCode-Bold.woff2") format("woff2");
font-style: normal;
font-weight: bold;
}
@font-face {
font-display: swap;
font-family: "Cascadia Code";
src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/CascadiaCode-BoldItalic.otf") format("otf"),
url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/CascadiaCode-BoldItalic.ttf") format("ttf"),
url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/CascadiaCode-BoldItalic.woff2") format("woff2");
font-style: italic;
font-weight: bold;
}
@font-face {
font-display: swap;
font-family: "Cascadia Code";
src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/CascadiaCode-Italic.otf") format("otf"),
url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/CascadiaCode-Italic.ttf") format("ttf"),
url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/CascadiaCode-Italic.woff2") format("woff2");
font-style: italic;
font-weight: normal;
}
:root {
--fontfamily: "Cascadia Code" !important;
}
* {
font-family: "Cascadia Code" !important;
}
}
if (fontfamily) == (fontfamilymontserrat) {
@font-face {
font-display: swap;
font-family: Montserrat;
src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/Montserrat-Regular.ttf") format("ttf");
font-style: normal;
font-weight: normal;
}
@font-face {
font-display: swap;
font-family: Montserrat;
src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/Montserrat-Bold.ttf") format("ttf");
font-style: normal;
font-weight: bold;
}
@font-face {
font-display: swap;
font-family: Montserrat;
src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/Montserrat-BoldItalic.ttf") format("ttf");
font-style: italic;
font-weight: bold;
}
@font-face {
font-display: swap;
font-family: Montserrat;
src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/Montserrat-Italic.ttf") format("ttf");
font-style: italic;
font-weight: normal;
}
:root {
--fontfamily: Montserrat !important;
}
* {
font-family: Montserrat !important;
}
}
if (fontfamily) == (fontfamilynotosans) {
@font-face {
font-display: swap;
font-family: "Noto Sans";
src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/NotoSans-Regular.ttf") format("ttf");
font-style: normal;
font-weight: normal;
}
@font-face {
font-display: swap;
font-family: "Noto Sans";
src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/NotoSans-Bold.ttf") format("ttf");
font-style: normal;
font-weight: bold;
}
@font-face {
font-display: swap;
font-family: "Noto Sans";
src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/NotoSans-BoldItalic.ttf") format("ttf");
font-style: italic;
font-weight: bold;
}
@font-face {
font-display: swap;
font-family: "Noto Sans";
src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/NotoSans-Italic.ttf") format("ttf");
font-style: italic;
font-weight: normal;
}
:root {
--fontfamily: "Noto Sans" !important;
}
* {
font-family: "Noto Sans" !important;
}
}
if (fontfamily) == (fontfamilyroboto) {
@font-face {
font-display: swap;
font-family: Roboto;
src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/Roboto-Regular.ttf") format("ttf");
font-style: normal;
font-weight: normal;
}
@font-face {
font-display: swap;
font-family: Roboto;
src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/Roboto-Bold.ttf") format("ttf");
font-style: normal;
font-weight: bold;
}
@font-face {
font-display: swap;
font-family: Roboto;
src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/Roboto-BoldItalic.ttf") format("ttf");
font-style: italic;
font-weight: bold;
}
@font-face {
font-display: swap;
font-family: Roboto;
src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/Roboto-Italic.ttf") format("ttf");
font-style: italic;
font-weight: normal;
}
:root {
--fontfamily: Roboto !important;
}
* {
font-family: Roboto !important;
}
}
if (fontfamily) == (fontfamilyubuntu) {
@font-face {
font-display: swap;
font-family: Ubuntu;
src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/Ubuntu-Regular.ttf") format("ttf");
font-style: normal;
font-weight: normal;
}
@font-face {
font-display: swap;
font-family: Ubuntu;
src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/Ubuntu-Bold.ttf") format("ttf");
font-style: normal;
font-weight: bold;
}
@font-face {
font-display: swap;
font-family: Ubuntu;
src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/Ubuntu-BoldItalic.ttf") format("ttf");
font-style: italic;
font-weight: bold;
}
@font-face {
font-display: swap;
font-family: Ubuntu;
src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/Ubuntu-Italic.ttf") format("ttf");
font-style: italic;
font-weight: normal;
}
:root {
--fontfamily: Ubuntu !important;
}
* {
font-family: Ubuntu !important;
}
}
if (fontfamily) == (fontfamilyvarelaround) {
@font-face {
font-display: swap;
font-family: "Varela Round Regular";
src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/VarelaRound-Regular.eot") format("eot"),
url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/VarelaRound-Regular.ttf") format("ttf"),
url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/VarelaRound-Regular.woff") format("woff"),
url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/VarelaRound-Regular.woff2") format("woff2");
font-style: normal;
font-weight: normal;
}
:root {
--fontfamily: "Varela Round Regular" !important;
}
* {
font-family: "Varela Round Regular" !important;
}
}
/* Alerts */
.chakra-toast__inner:has([data-status="error"]) {
border: 0;
box-shadow: rgba(139, 109, 255, 0.4) -5px -5px 5px 5px,
rgba(139, 110, 255, 0.4) -5px 5px 5px 5px,
rgba(254, 133, 133, 0.4) 5px -5px 5px 5px,
rgba(254, 133, 133, 0.4) 5px 5px 5px 5px;
filter: invert(avatarinvert);
max-width: 80vw;
}
.chakra-alert__desc {
margin-right: .5em;
}
/* Validation/Save buttons */
[aria-label="Confirm edits"] {
width: fit-content;
}
[aria-label="Confirm edits"] > div {
padding-left: 1em;
padding-right: 1em;
}
.css-118vbdi {
display: flex;
justify-content: center;
}
[aria-label="Save"] {
align-self: center;
width: fit-content;
}
}
@-moz-document url-prefix("https://kindroid.ai/home") {
/* ====================================================
Main menu
==================================================== */
/* Wide main menu */
.css-ji0zhw {
width: 100vw;
}
/* Remove free space at the top of menu */
.css-ji0zhw > div:nth-of-type(2),
.css-ji0zhw > div:nth-of-type(2) > div:nth-of-type(1) {
overflow-y: auto;
}
/* Reduce free space at the end of main menu pages */
.css-1y6t5y9 {
margin-bottom: 4em;
}
/* Remove socials icons */
header > div:nth-of-type(2) {
display: none;
}
/* Pin kins/groups */
.css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(1) > svg {
fill: var(--chakra-colors-secondaryWhite);
height: 2rem;
width: 2rem;
}
body:has(.css-11yc3yd) {
/* Some spaces to be nicer */
.css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(1) {
margin: 2em auto;
}
.css-ji0zhw > div:nth-of-type(1) > div > div > .css-11yc3yd {
display: flex;
flex-direction: column;
height: auto;
overflow-x: unset;
width: 100%;
}
/* Keep drag and drop text visible */
.css-ji0zhw > div:nth-of-type(1) > div > div > .css-11yc3yd > p {
position: static;
}
/* avatars/groups list */
.css-ji0zhw > div:nth-of-type(1) > div > div > .css-11yc3yd > div:nth-of-type(1) > div,
.css-ji0zhw > div:nth-of-type(1) > div > div > .css-11yc3yd > div:nth-of-type(1) > div > div > div {
display: flex;
height: auto;
max-width: 100px;
width: 100px;
justify-content: center;
}
.css-ji0zhw > div:nth-of-type(1) > div > div > .css-11yc3yd > div > div > div > div > div,
.css-ji0zhw > div:nth-of-type(1) > div > div > .css-11yc3yd > div > div > div > div > div > img {
height: 100px;
width: 100px;
}
.css-ji0zhw > div:nth-of-type(1) > div > div > .css-11yc3yd > p,
.css-ji0zhw > div:nth-of-type(1) > div > div > .css-11yc3yd > div > div > div > p {
font-size: fontsize;
min-width: max-content;
}
[aria-label="remove-item"] svg {
height: 1.5em;
width: 1.5em;
}
.css-ji0zhw > div:nth-of-type(1) > div > div > .css-11yc3yd > div:nth-of-type(1) {
display: flex;
flex-wrap: wrap;
gap: 1em;
height: auto;
justify-content: space-evenly;
order: 2;
width: 100%;
}
.css-ji0zhw > div:nth-of-type(1) > div > div > .css-11yc3yd > div:nth-of-type(1) > div {
align-items: center;
display: flex;
flex: 0 1 calc(100% / 9);
flex-direction: column;
}
.css-ji0zhw > div:nth-of-type(1) > div > div > .css-11yc3yd > div:nth-of-type(2) {
justify-content: space-evenly;
margin: 2em auto;
width: 100%;
}
}
/* Edit button */
body:has(.css-19zdxg6) {
.css-ji0zhw > div:nth-of-type(1) > div > div > .css-11yc3yd > div:nth-of-type(2) {
background-color: rgba(255, 255, 255, 0.05);
border-color: transparent;
left: 1em;
position: fixed;
top: calc(48px + 2.75em);
width: auto;
}
.css-ji0zhw > div:nth-of-type(1) > div > div > .css-11yc3yd > div:nth-of-type(2) svg {
fill: var(--chakra-colors-secondaryWhite);
}
.css-ji0zhw > div:nth-of-type(1) > div > div > .css-11yc3yd > div:nth-of-type(2):hover svg {
fill: var(--chakra-colors-white);
}
}
/* Email box */
body:has(.css-11yc3yd) {
.css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(2) {
margin-top: 0;
position: fixed;
right: 1em;
top: calc(60px + 1em);
}
}
.css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(2) {
align-self: center;
gap: 0;
margin-top: 5%;
padding-top: 0;
}
.css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(2) > div > div > p {
color: var(--chakra-colors-secondaryWhite);
padding-right: .5em;
}
/* Main content of menu */
.css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(3) {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
min-height: 100%;
width: 100%;
}
.css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(3) > button,
.css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(3) > div {
align-items: center;
box-sizing: border-box;
flex-basis: calc(33.33% - 20px);
justify-content: center;
margin: 10px;
}
.css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(3) > button:hover,
.css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(3) > div:hover {
background-color: rgba(255, 255, 255, 0.05);
border-radius: 1em;
}
.css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(3) {
justify-content: space-evenly;
width: 100%;
}
.css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(3) * {
font-size: 2rem;
}
/* Bottom links in menu */
.css-ji0zhw > div:nth-of-type(3) {
bottom: 0;
justify-content: space-evenly;
width: 100%;
}
.css-ji0zhw > div:nth-of-type(3) > h2 {
font-size: 1.2rem;
padding: .5em 1em;
}
.css-ji0zhw > div:nth-of-type(3) > h2:hover {
background-color: rgba(255, 255, 255, 0.05);
border-radius: 1em;
padding: .5em 1em;
}
/* Subcriber icon */
.css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(2) img {
height: auto !important;
width: 44px;
}
/* Set Billing centred and in yellow */
.css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(3) > button > div {
justify-content: center;
}
.css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(3) > button > div > p {
color: var(--chakra-colors-yellow-400);
}
/* Billing error box */
.css-dixmdy {
background-color: #161616;
border: 1px solid #6c6c6c;
border-radius: 10px;
color: var(--chakra-colors-secondaryWhite);
}
/* Put Explore and Sharing & Referrals in purple */
.css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(3) > div:nth-of-type(6) > p,
.css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(3) > div:nth-of-type(7) > p {
color: rgb(139, 109, 255);
filter: invert(avatarinvert);
}
/* Put User Guide and Announcements and Terms in blue */
.css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(3) > div:nth-of-type(8) > p,
.css-ji0zhw > div:nth-of-type(3) > h2:nth-of-type(1),
.css-ji0zhw > div:nth-of-type(3) > h2:nth-of-type(2) {
color: var(--chakra-colors-blue-400);
filter: invert(avatarinvert);
}
/* Put contact in green */
.css-ji0zhw > div:nth-of-type(3) > h2:nth-of-type(3) {
color: var(--chakra-colors-green-400);
filter: invert(avatarinvert);
}
/* Put Log out in orange */
.css-ji0zhw > div:nth-of-type(3) > h2:nth-of-type(4) {
color: var(--chakra-colors-orange);
filter: invert(avatarinvert);
}
.css-ji0zhw > div:nth-of-type(3) > h2:nth-of-type(4)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath d='M304 336v40a40 40 0 01-40 40H104a40 40 0 01-40-40V136a40 40 0 0140-40h152c22.09 0 48 17.91 48 40v40M368 336l80-80-80-80M176 256h256' fill='none' stroke='%23ff964a' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3C/svg%3E");
display: inline-block;
content: "";
margin-right: 5px;
height: 24px;
vertical-align: middle;
width: 24px;
}
/* ===== My kindroids ===== */
/* Reorder kins */
.css-ji0zhw > div:nth-of-type(3) > div > div:nth-of-type(2) > button.css-1123s1d svg,
.css-ji0zhw > div:nth-of-type(3) > div > div:nth-of-type(2) > button.css-1123s1d::before {
height: 40px;
}
.css-ji0zhw > div:nth-of-type(3) > div > div:nth-of-type(2) > button.css-1123s1d::before {
align-items: center;
content: "Reorder Kindroids";
display: flex;
font-size: fontsize;
height: 40px;
margin-right: .3em;
}
/* Reorder kins/groups menu */
/* Kins list */
.css-1oc3ive {
align-items: center;
flex-flow: wrap;
gap: 1em;
justify-content: space-evenly;
padding-bottom: 0;
}
.css-1oc3ive > div:not(:first-child) {
height: auto;
order: 0;
width: avatarsizemykindroids;
}
/* Create kin button */
.css-1oc3ive > div:first-child {
height: 100px;
justify-content: center;
position: fixed;
left: .5em;
top: 50%;
transform: translateY(calc(-50% - .5em));
width: 100px;
}
.css-1oc3ive > div:first-child > div > div {
font-size: 24px !important;
line-height: 24px;
margin-bottom: 0 !important;
}
.css-1oc3ive > div:first-child > div > p {
font-size: 0;
line-height: 24px;
}
.css-1oc3ive > div:first-child > div > p::before {
content: "Create kin";
font-size: 24px !important;
line-height: 24px;
}
body:has(.css-1oc3ive > div:first-child:hover) {
.css-1oc3ive > div:first-child > div > div,
.css-1oc3ive > div:first-child > div > p {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent !important;
}
}
/* Avatar list in generate avatar */
.css-az6ase {
width: calc(50% - 50px);
}
/* Kin's name */
.css-w9iwt8 .css-1cfkm3f {
text-align: center;
}
/* Delete kin */
body:has(.css-ji0zhw) {
.css-r6z5ec[style="visibility: hidden; position: absolute; min-width: max-content; inset: 0px auto auto 0px;"] {
pointer-events: none;
}
.css-r6z5ec .css-do4s31[style*="visibility: visible"][aria-orientation="vertical"] > .css-94x4at[data-index="0"]::before,
.css-r6z5ec .css-do4s31[style*="visibility: visible"][aria-orientation="vertical"] > .css-94x4at[data-index="0"]:hover::after,
.css-r6z5ec .css-do4s31[style*="visibility: visible"][aria-orientation="vertical"] > .css-94x4at[data-index="1"]::before,
.css-r6z5ec .css-do4s31[style*="visibility: visible"][aria-orientation="vertical"] > .css-94x4at[data-index="1"]:hover::after,
.css-r6z5ec .css-do4s31[style*="visibility: visible"][aria-orientation="vertical"] > .css-94x4at[data-index="2"]::before,
.css-r6z5ec .css-do4s31[style*="visibility: visible"][aria-orientation="vertical"] > .css-94x4at[data-index="2"]:hover::after {
display: none;
}
.css-r6z5ec[style*="visibility: hidden"] .css-do4s31[style*="visibility: hidden"][aria-orientation="vertical"],
.css-r6z5ec[style*="visibility: visible"] .css-do4s31[style*="visibility: visible"][aria-orientation="vertical"] {
background: var(--chakra-colors-secondaryBlack) !important;
background-clip: initial !important;
border: none;
-o-text-fill-color: var(--chakra-colors-secondaryWhite) !important;
-moz-text-fill-color: var(--chakra-colors-secondaryWhite) !important;
-ms-text-fill-color: var(--chakra-colors-secondaryWhite) !important;
-webkit-text-fill-color: var(--chakra-colors-secondaryWhite) !important;
color: var(--chakra-colors-secondarywhite) !important;
height: auto;
border-radius: 1em;
visibility: visible !important;
white-space: nowrap !important;
}
.css-r6z5ec[style*="visibility: hidden"] .css-do4s31[style*="visibility: hidden"][aria-orientation="vertical"] > .css-94x4at,
.css-r6z5ec[style*="visibility: visible"] .css-do4s31[style*="visibility: visible"][aria-orientation="vertical"] > .css-94x4at {
background: var(--chakra-colors-secondaryBlack) !important;
padding: .75em;
}
.css-r6z5ec[style*="visibility: hidden"] .css-do4s31[style*="visibility: hidden"][aria-orientation="vertical"] > .css-94x4at:last-child,
.css-r6z5ec[style*="visibility: visible"] .css-do4s31[style*="visibility: visible"][aria-orientation="vertical"] > .css-94x4at:last-child {
background: var(--chakra-colors-secondaryBlack) !important;
background-clip: initial !important;
border: none;
-o-text-fill-color: var(--chakra-colors-red) !important;
-moz-text-fill-color: var(--chakra-colors-red) !important;
-ms-text-fill-color: var(--chakra-colors-red) !important;
-webkit-text-fill-color: var(--chakra-colors-red) !important;
color: var(--chakra-colors-secondarywhite) !important;
height: auto;
border-radius: 5px;
min-width: 100% !important;
visibility: visible !important;
white-space: nowrap !important;
}
}
/* Groups */
/* Create group button */
.css-1apc7qm {
height: 100px;
justify-content: center;
position: fixed !important;
left: .5em;
margin-bottom: 0;
top: 50%;
transform: translateY(calc(50% + .5em));
width: 100px;
}
.css-1apc7qm > div > div {
font-size: 24px !important;
line-height: 24px !important;
}
.css-1apc7qm > div > p {
font-size: 24px !important;
}
body:has(.css-1apc7qm:hover) {
.css-1apc7qm > div > div,
.css-1apc7qm > div > p {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent !important;
}
}
body:not(:has(.css-1hw29i9)) {
/* Reorder Group */
.css-ji0zhw > div:nth-of-type(3) > div > div:nth-of-type(4) > button.css-1123s1d svg,
.css-ji0zhw > div:nth-of-type(3) > div > div:nth-of-type(4) > button.css-1123s1d::before {
height: 40px;
}
.css-ji0zhw > div:nth-of-type(3) > div > div:nth-of-type(4) > button.css-1123s1d::before {
align-items: center;
content: "Reorder Groups";
display: flex;
font-size: fontsize;
height: 40px;
margin-right: .3em;
}
/* Groups list */
.css-ji0zhw > div:nth-of-type(3) > div > div:nth-of-type(6) {
flex-flow: wrap;
gap: 1em;
justify-content: space-evenly;
}
.css-ji0zhw > div:nth-of-type(3) > div > div:nth-of-type(6) > div {
width: 300px;
}
/* Create a new group chat */
.css-zys56m > .css-1ly87gx > .css-1yxzzu5 {
align-items: start;
flex-direction: row;
flex-wrap: wrap;
}
.css-zys56m > .css-1ly87gx > .css-1yxzzu5 > div:first-child,
.css-zys56m > .css-1ly87gx > .css-1yxzzu5 > p {
width: 100%;
}
}
body:has(.css-1hw29i9) {
/* Kindroids scheduled for deletion */
.css-ji0zhw > div:nth-of-type(3) > div > div:nth-of-type(4) > div > button > p {
color: var(--chakra-colors-pureWhite);
font-family: var(--chakra-fonts-OpenSansRegular);
font-size: 24px !important;
line-height: 32px !important;
}
.css-ji0zhw > div:nth-of-type(3) > div > div:nth-of-type(4) > div > button > svg {
display: none;
}
.css-ji0zhw > div:nth-of-type(3) > div > div:nth-of-type(4) > div > div {
display: block !important;
height: auto !important;
opacity: 1 !important;
}
.css-ji0zhw > div:nth-of-type(3) > div > div:nth-of-type(4) > div > div > div > p {
font-size: fontsize;
}
.css-ji0zhw > div:nth-of-type(3) > div > div:nth-of-type(4) > div > div > div > div {
width: 100%;
}
.css-ji0zhw > div:nth-of-type(3) > div > div:nth-of-type(4) > div > div > div > div,
.css-ji0zhw > div:nth-of-type(3) > div > div:nth-of-type(4) > div > div > div > div > div {
align-items: center;
flex-flow: wrap;
gap: 1em;
justify-content: space-evenly;
}
.css-ji0zhw > div:nth-of-type(3) > div > div:nth-of-type(4) > div > div > div > div > div > div {
height: auto;
width: 300px;
}
.css-ji0zhw > div:nth-of-type(3) > div > div:nth-of-type(4) > div > div > div > div > div > div > div:nth-of-type(1) > p {
font-size: fontsize;
}
/* Reorder Group */
.css-ji0zhw > div:nth-of-type(3) > div > div:nth-of-type(5) > button.css-1123s1d svg,
.css-ji0zhw > div:nth-of-type(3) > div > div:nth-of-type(5) > button.css-1123s1d::before {
height: 40px;
}
.css-ji0zhw > div:nth-of-type(3) > div > div:nth-of-type(5) > button.css-1123s1d::before {
align-items: center;
content: "Reorder Groups";
display: flex;
font-size: fontsize;
height: 40px;
margin-right: .3em;
}
/* Groups list */
.css-ji0zhw > div:nth-of-type(3) > div > div:nth-of-type(7) {
flex-direction: row;
flex-wrap: wrap;
gap: 1em;
justify-content: space-evenly;
}
.css-ji0zhw > div:nth-of-type(3) > div > div:nth-of-type(7) > div {
width: 300px;
}
/* Create a new group chat */
.css-zys56m > .css-1ly87gx > .css-1yxzzu5 {
align-items: start;
flex-direction: row;
flex-wrap: wrap;
}
.css-zys56m > .css-1ly87gx > .css-1yxzzu5 > div:first-child,
.css-zys56m > .css-1ly87gx > .css-1yxzzu5 > p {
width: 100%;
}
}
/* Modal's title */
.css-zys56m > .css-1ly87gx > .css-1yxzzu5 > p:first-child {
text-align: center;
}
/* Modal's 1st explain */
.css-zys56m > .css-1ly87gx > .css-1yxzzu5 > p:nth-of-type(2) {
font-size: fontsize;
line-height: 1.5;
}
/* Kin list */
.css-zys56m > .css-1ly87gx > .css-1yxzzu5 > .css-1wy8ffp {
justify-content: space-between;
}
.css-zys56m > .css-1ly87gx > .css-1yxzzu5 > .css-1wy8ffp p {
font-size: 24px;
line-height: 32px;
text-align: center;
}
/* Group name */
.css-zys56m > .css-1ly87gx > .css-1yxzzu5 > div:nth-of-type(2) {
order: 1;
width: 48%;
}
/* Group context */
.css-zys56m > .css-1ly87gx > .css-1yxzzu5 > div:nth-of-type(3) {
order: 3;
width: 48%;
}
/* Turn-taking style */
.css-zys56m > .css-1ly87gx > .css-1yxzzu5 > div:nth-of-type(4) {
order: 2;
width: 48%;
}
/* (Advanced) shared memory */
.css-zys56m > .css-1ly87gx > .css-1yxzzu5 > div:nth-of-type(5) {
order: 4;
width: 48%;
}
/* Create group button */
[aria-label="Create group"] {
margin: auto;
max-width: fit-content;
min-width: fit-content;
order: 5;
}
[aria-label="Create group"] > div {
padding: 0 1em;
}
/* Create kin & Explore modals */
.css-h218ln > div > div > div:nth-of-type(1) {
padding: 40px 32px 0 32px;
}
.css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) {
max-width: 100%;
}
.css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div > p:nth-of-type(2) {
cursor: pointer;
font-size: fontsize;
line-height: 1.5;
}
.css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div {
max-width: 50%;
padding: 1em;
width: 50%;
}
.css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > div {
height: auto !important;
}
.css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > div > div {
transform: none !important;
width: 100%;
}
/* Tags */
.css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > div > div > div:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(3) > div {
flex-wrap: wrap;
justify-content: center;
}
.css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > div > div > div:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(3) > div > span {
font-size: fontsize;
line-height: 1.5;
}
/* Mini-avatar */
.css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > div > div > div:nth-of-type(2) > div > div:nth-of-type(1) {
margin-bottom: auto;
}
.css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > div > div > div:nth-of-type(2) > div > div:nth-of-type(1) > img {
height: auto;
width: 96px;
}
.css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > img:hover,
.css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > div > div > div:nth-of-type(2) > div > div:nth-of-type(1) > img:hover {
height: auto;
width: 300px;
z-index: 1;
}
/* Filter to see only kins with many infos */
if hidekinsexplore {
.css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > div > div:has(> div:only-of-type) {
display: none;
padding: 0;
padding-inline-end: 0;
padding-inline-start: 0;
}
}
/* Name */
.css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > div > div > div:nth-of-type(2) > div > div:nth-of-type(2) > div:nth-of-type(1) > div {
font-weight: bolder;
justify-content: center;
}
/* Bio */
if (fullbio == fullbiodefault) || (fullbio == fullbioalways) || (fullbio == fullbioactive) {
.css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(2) > p,
.css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > div > div > div:nth-of-type(2) > div > div:nth-of-type(2) > p {
font-size: fontsize;
line-height: 1.5;
padding-bottom: .5em;
padding-right: 1em;
text-align: justify;
transition: height 0.3s ease;
white-space: normal;
word-break: break-word;
}
}
if (fullbio == fullbiodefault) {
.css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > div > div > div:nth-of-type(2) > div > div:nth-of-type(2) > p {
--chakra-line-clamp: 3;
}
}
if (fullbio == fullbioalways) {
.css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > div > div > div:nth-of-type(2) > div > div:nth-of-type(2) > p {
--chakra-line-clamp: unset;
height: auto;
}
}
if (fullbio == fullbioactive) {
.css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > div > div > div:nth-of-type(2) > div > div:nth-of-type(2) > p:active {
--chakra-line-clamp: unset;
height: auto;
}
}
/* Create button */
.css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > div > div > div:nth-of-type(2) > div > div:nth-of-type(3) {
/* margin-bottom: auto; */
position: absolute;
top: calc(96px + 1.5em);
width: 96px;
}
.css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > div > div > div:nth-of-type(2) > div > div:nth-of-type(3) > button {
font-size: fontsize;
line-height: 1.5;
transition: .3s background ease-in-out, .3s color ease-in-out;
}
.css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > div > div > div:nth-of-type(2) > div > div:nth-of-type(3) > button:hover {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
color: var(--chakra-colors-white);
}
/* Shared kins list */
.css-113mbrq img:hover {
border-radius: 1em;
height: auto;
width: 300px;
}
/* Share kins */
.css-dkzp5w {
justify-content: center;
}
.css-dkzp5w > .css-156z0wo {
height: auto;
width: 300px;
}
.css-1kxonj9 > .css-1qo2cb6 {
height: 300px;
width: 100%;
}
.css-pdvefo {
margin: 0 auto;
position: relative;
width: fit-content;
}
.css-1qo2cb6 > .css-pdvefo > .css-cqzojc > .css-79elbk {
aspect-ratio: 1 / 1;
border-radius: 1em;
height: 300px;
margin: 0 auto;
width: auto;
}
/* Avoid scroll problems */
.css-15b277d {
overflow-y: auto;
}
/* Display name etc visible content */
.css-ji0zhw > .css-xp7tub > .css-1lxwves {
min-height: max-content;
margin: 20px 0;
}
/* ===== General ===== */
.css-j7qwjs p:not(.css-8nzq2w, .css-1cfkm3f, .css-j5x8z7, .css-3nnoix) {
font-size: fontsize;
line-height: 1.2;
}
/* Hide arrows */
.css-1cfkm3f .css-g7h3az {
display: none;
}
/* Uncollapse "Advanced: secondary avatar" and "Advanced: custom avatar fidelity" */
.css-1yljauu > div {
display: block !important;
height: auto !important;
opacity: 1 !important;
}
.css-1fm8jup > .css-184z1op {
min-height: fit-content;
}
/* Danger zone: delete account */
.css-1inccke::before,
.css-1inccke::after {
content: "⚠️";
}
.css-1inccke {
bottom: 150px;
font-size: 18px;
font-weight: 600;
margin-left: auto;
width: max-content;
}
/* ===== Backstory ===== */
/* Journal entries */
.css-ji0zhw > .css-8onqts > .css-188uayk > .css-j7qwjs > .css-12ac5cx {
flex-direction: row;
}
.css-16wjzov .css-1pwenrv {
position: relative;
}
.css-16wjzov > div > div > div:nth-of-type(1) > button {
left: 0;
top: 60px;
position: absolute;
}
.css-16wjzov > div > div > div:nth-of-type(1) > button svg {
fill: var(--chakra-colors-primaryWhite);
}
.css-16wjzov > div > div > div:nth-of-type(1) > button[aria-label="create"]::after {
color: var(--chakra-colors-primaryWhite);
content: "Click here to create a journal entry.";
font-size: 20px !important;
font-weight: normal;
margin-left: 5px;
}
.css-16wjzov .css-1thrbn {
margin-top: 5%;
}
/* ===== Voice ===== */
.css-2xph3x > div:last-child img {
margin-right: 34px;
}
/* ===== Avatar ===== */
/* Avatar and My avatar */
body:has([aria-label="Create my own Kindroid"]),
body:has([aria-label="photoreal"]),
body:has([aria-label="predefined"]),
body:has([aria-label="Predefined"]),
body:has(input[placeholder="Kindroid name"]) {
/* Wide modal content */
.css-zys56m > div > div > div:nth-of-type(1),
.css-zys56m > div > div > div:nth-of-type(1) > div {
max-width: 100%;
}
}
body:has([aria-label="photoreal"]) {
/* Split */
.css-1slmhpt {
flex-direction: row;
flex-wrap: wrap;
max-width: 100%;
}
.css-1slmhpt > .css-1qo2cb6 {
justify-content: center;
padding: 0;
width: 48%;
}
/* Upload avatar */
.css-1slmhpt > .css-1qo2cb6 > .css-pdvefo {
display: flex;
padding: 0 2em 2em 2em;
width: 100%;
}
.css-1slmhpt > .css-1qo2cb6 > .css-pdvefo > div {
height: 100%;
width: 100%;
}
.css-1slmhpt > .css-1qo2cb6 > .css-pdvefo > div > div {
border-radius: 1em;
}
/* Put Upload Photo text in custom avatar in white to be more visible */
.css-1jcj2pk {
color: var(--chakra-colors-white);
}
/* Animate avatar button */
[aria-label="animate avatar"] {
margin-right: 2em;
}
/* Right side */
.css-1slmhpt > .css-ue4bfp {
overflow: hidden;
width: 48%;
}
.css-1slmhpt > .css-ue4bfp > .css-ae75s5 {
flex-direction: column;
width: 100%;
}
[aria-label="Avatar description input"]:not(:focus),
[aria-label="Face detail prompt input"]:not(:focus),
[aria-label="Avatar description input"]:focus,
[aria-label="Face detail prompt input"]:focus {
margin-left: .5em;
max-width: calc(100% - 1em);
}
[aria-label="Get avatar description"] {
transform: translateY(50%);
}
/* Avatar Boost */
.css-1yljauu > div {
display: block !important;
height: auto !important;
opacity: 1 !important;
}
.css-1yljauu:last-child > button {
margin-top: 1em;
}
}
/* Select Generated Avatar */
.css-16wjzov [aria-label="Copy prompt"],
.css-16wjzov [aria-label="Delete avatar"],
.css-16wjzov > div > div > p:nth-of-type(2) {
font-size: fontsize;
line-height: 1.5;
}
.css-16wjzov > div > div > div > div > div {
width: 300px;
}
.css-16wjzov > div > div > div > div > div:hover {
.css-1h95ja4 {
display: block;
}
}
.css-1h95ja4 {
border-radius: 1em;
display: none;
height: 300px;
padding: 1em;
pointer-events: none;
}
.css-16wjzov [aria-label="Copy prompt"] {
left: .5em;
pointer-events: auto;
position: absolute;
top: .5em;
z-index: 9999 !important;
}
.css-16wjzov [aria-label="Copy prompt"]:hover svg {
background: url("data:image/svg+xml,%3Csvg fill='url(%23A)' stroke-width='0' viewBox='0 0 448 512' focusable='false' class='chakra-icon css-13otjrl' aria-hidden='true' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z'%3E%3C/path%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") no-repeat;
background-size: cover;
height: 0;
padding-left: 1em;
padding-top: 1em;
pointer-events: auto;
width: 0;
z-index: 9999 !important;
}
.css-16wjzov [aria-label="Copy prompt"]:hover::after {
color: var(--chakra-colors-secondaryWhite);
content: "Copy prompt";
margin-left: .3em;
vertical-align: top;
}
.css-16wjzov [aria-label="Delete avatar"] {
pointer-events: auto;
position: absolute;
right: .5em;
top: .5em;
z-index: 9999 !important;
}
.css-16wjzov [aria-label="Delete avatar"]:hover svg {
background: url("data:image/svg+xml,%3Csvg fill='url(%23A)' stroke-width='0' viewBox='0 0 16 16' focusable='false' class='chakra-icon css-13otjrl' aria-hidden='true' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z'%3E%3C/path%3E%3Cpath d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z'%3E%3C/path%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") no-repeat;
background-size: cover;
height: 0;
padding-left: 19px;
padding-top: 19px;
width: 0;
}
.css-16wjzov [aria-label="Delete avatar"]:hover::before {
color: var(--chakra-colors-secondaryWhite);
content: "Delete avatar";
display: inline-block !important;
margin-right: 8em;
position: absolute;
}
.css-ha05g4 {
font-size: 1.1rem;
height: 300px;
line-height: 1.2;
padding: 2em 2em 0 0;
pointer-events: none;
width: 300px;
}
/* My avatar */
.css-pwmocd > p:nth-of-type(2) {
margin-bottom: 1em;
}
img.reactEasyCrop_Contain {
height: 100% !important;
width: 100% !important;
}
/* Delete image */
[aria-label="delete image"] {
margin-left: 2em;
}
/* Swipe arrows */
.avatarSlider .swiper-button-next::after,
.avatarSlider .swiper-button-prev::after {
color: var(--chakra-colors-primaryWhite);
}
.css-tf0j9o > .chakra-collapse > .css-1fm8jup > .css-dhnoom {
padding-bottom: 20px;
width: 47% !important;
}
.css-1v3caum > .css-tf0j9o > .chakra-collapse > .css-1fm8jup > .css-dhnoom {
width: 100% !important;
}
/* Hide arrows */
.css-ue4bfp .css-g7h3az {
display: none;
}
/* Uncollapse "Advanced: secondary avatar" and "Advanced: custom avatar fidelity" */
.css-tf0j9o > div,
.css-1v3caum > div {
display: block !important;
height: auto !important;
opacity: 1 !important;
}
/* Avatar boost */
.css-egc6lc > div > div {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.css-egc6lc > div > div > div {
height: auto;
width: 300px;
}
/* ===== Customizations ===== */
/* K menu icon */
if kmenuicon {
body:has(.css-1b1fzbz) {
.css-58wha4 > div:nth-of-type(1) > button:nth-of-type(1) img,
.css-58wha4 > div:nth-of-type(1) > button:nth-of-type(1):hover img {
display: none;
}
.css-58wha4 > div:nth-of-type(1) > button:nth-of-type(1),
.css-58wha4 > div:nth-of-type(1) > button:nth-of-type(1):hover {
background: url("data:image/png;base64,UklGRsYEAABXRUJQVlA4TLkEAAAvL8ALEE2YadtGSfut/AmPRET/MwDNtjTTJH52d7btZYE0ktSsZFAo+i8NSQWRURRhpm3bpNWrZzUAU9tIUjMxkffQf1uU0v/EXXOEf/gASgkbAL+VNF8B8NHIw5UGQbbN5o/93SEiJoBWrcvQDts2ciSWcP23e39pKvDl9P+IYBMAQBP3PiEBHw00wkqhLwEkAATw1RQrgjbws8A4954ASbdtm3q0H8oxmmXbttm1mjbb6ZaNX2C7757RthWWvvu9G76RV79gn5w4qSoptrUtW3au+zXcB+DWqU6DbJnOYmJ0huDSf5eM66sX5EaSHDmZ1XuCWv7ovx90gD8aosXcLLdjAohJ0kAJFwI4NPKbcf1el8Vs0CpM6ZRhIpgwOfzDr0+NzU/Zh53EmtL/RFNrTwNTHBFXQ3nVlFA1PVDNyOkT8J07SGkJr/i9t6WYt8of2EpkP1FbW/BEKNvRo6J5+7jq20uQfSOdTjprnGT6GceWn5/z6vfekoy9V8ogGw7fnHQgHapZ78n6JMv0P6LgiTAecg+wWfC5gNsBEoKGYWkHSJgCufTgdOr0GIADpJ/Hg/YbxAAQdiP2IGh02kTCELSDECSZLeZv5dqZ397josAyTmUuQHSE6g8DoYSawArWk3nxNnhpn/fO0/94kmIDBxImlgRW8wLLHcIShyYs2VgJARPUp8ZpuxfX74YvIUkYP6HP8T4fWP4wkMJ6EaCQucMXK3rbU1kCa1UwVvHhEReMVICgCRQYMrvvOCtbMqMCCbBRMDUufmJ3vLyWCECDwDQACavCH0PXXah+sRgJowJ0IEb21heJ9yujBA0CQ9rIf1irBGnNSi4DFCCsimcvs/PL6RVGAoTbhjBUlZx6LOa+hbWoSvrmXuSBk1DLaJUQVJgg0j+9a9Pt4woQRtQl78T5IOV1ZcRAGJLAAPq0lyaEEaBA+SmO5Kek55VRw0CCJqxqDQxQVD17Jf32y+kmRmYdGFUgYYCqKgxwnA6m2DNi0ASKwogC4ygwIhoomc5sVfbALiJShEBRl9yN6RmxUVIDY0gvalCQ21tRAWFV1UYcfOX5LMVDGCFQ4jBNAOLlFhGMJfW0imrLdLkQ67ekXAurKvW+Wdv7nzdxlEhERKwDFLLp58+xl69AEVI1IOlmfjGyB3eRkEBVGFFtUv9lD1/c1uJbVSCAhvSMdXgxsplRQMIoCVSrIlM+v286L7S4FCyMqo0yZGr60+IT80YEJAyQcIQkkz/J6XPTzlOLniFSpeh0w1UDtzuL35RnIcoNtCUOEG5YrSIEnbD5G60nr+atXFZZwqr6oEsKtaRbskdIeaHcCAMEDQkUCsnmqdnw8PfoP6vWi0gcu7cZI2/Av1D+PgIaKAQRZckUuHT9uXL7MmN0Ora6uhpolMmd++vtx3P8XkNs3h5QHDBtg0mLhjZgDIyjJsnE0vy8t+4evfzPNDGNsTYGY+glpyU92y52KS+E+Lp6uLr86a+jEi22AQ0kE16nn+1LeAVBybaTwTL/MaTL0oM1ScBS/7JUtzAFygq9mPv8masBrgUTdKJav02O1cJjktW6kvArPUnCrjS3YtVU2f/pRKRKvdHm2cbavC7LqkTPtAEA") center center / cover no-repeat;
filter: invert(avatarinvert);
height: 0;
padding-left: 48px;
padding-top: 48px;
width: 0;
}
.css-58wha4 > div:nth-of-type(1) > button:nth-of-type(1):hover {
border-radius: .5em;
box-shadow: rgba(139, 109, 255, 0.4) -5px -5px 5px 5px,
rgba(139, 110, 255, 0.4) -5px 5px 5px 5px,
rgba(254, 133, 133, 0.4) 5px -5px 5px 5px,
rgba(254, 133, 133, 0.4) 5px 5px 5px 5px;
filter: invert(avatarinvert);
}
}
}
/* Header icons hover */
body:has(.css-1b1fzbz) {
.css-58wha4 > div:nth-of-type(1) > button:nth-of-type(2):hover svg,
.css-58wha4 > div:nth-of-type(1) > button:nth-of-type(3):hover svg,
.css-58wha4 > div:nth-of-type(1) > button:nth-of-type(4):hover svg {
display: none;
}
.css-58wha4 > div:nth-of-type(1) > button:nth-of-type(2):hover,
.css-58wha4 > div:nth-of-type(1) > button:nth-of-type(3):hover,
.css-58wha4 > div:nth-of-type(1) > button:nth-of-type(4):hover {
height: 48px;
width: 48px;
}
/* Selfies icon */
.css-58wha4 > div:nth-of-type(1) > button:nth-of-type(2):hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M10 18C10 14.2288 10 12.3431 11.1716 11.1716C12.3431 10 14.2288 10 18 10H26C29.7712 10 31.6569 10 32.8284 11.1716C34 12.3431 34 14.2288 34 18V26C34 29.7712 34 31.6569 32.8284 32.8284C31.6569 34 29.7712 34 26 34H18C14.2288 34 12.3431 34 11.1716 32.8284C10 31.6569 10 29.7712 10 26V18Z' fill='none' stroke='url(%23A)' stroke-width='2'%3E%3C/path%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M32 25.2522L30.8691 24.1213L30.8226 24.0747C30.1958 23.4478 29.6557 22.9077 29.165 22.5334C28.6392 22.1322 28.0543 21.8284 27.3336 21.8284C26.6128 21.8284 26.028 22.1322 25.5021 22.5334C25.0115 22.9077 24.4714 23.4478 23.8446 24.0747L23.798 24.1213L23.382 24.5373C22.8855 25.0338 22.5914 25.3242 22.3631 25.4938L22.3531 25.5011L22.3465 25.4906C22.1975 25.2483 22.0323 24.8695 21.7557 24.2241L21.2467 23.0365L21.2153 22.9631C20.7149 21.7955 20.2955 20.8167 19.8628 20.1133C19.4102 19.3778 18.8198 18.7356 17.8929 18.5571C16.9661 18.3786 16.1794 18.7556 15.486 19.2705C14.8231 19.7628 14.0701 20.5158 13.1719 21.4141L13.1719 21.4141L13.1155 21.4705L12 22.586V25.4144L14.5297 22.8847C15.4993 21.9151 16.1483 21.2698 16.6784 20.8762C17.192 20.4948 17.3995 20.4989 17.5147 20.521C17.6299 20.5432 17.8241 20.6165 18.1593 21.1614C18.5053 21.7237 18.8682 22.5639 19.4084 23.8243L19.9174 25.012L19.9442 25.0745L19.9442 25.0745C20.1846 25.6356 20.4071 26.1549 20.6431 26.5386C20.8987 26.954 21.293 27.4173 21.9593 27.5457C22.6257 27.674 23.1638 27.3903 23.5554 27.0995C23.9171 26.8309 24.3166 26.4313 24.7481 25.9996L24.7962 25.9516L25.2122 25.5355C25.8989 24.8488 26.3443 24.4065 26.7153 24.1234C27.0632 23.8579 27.2259 23.8284 27.3336 23.8284C27.4412 23.8284 27.6039 23.8579 27.9519 24.1234C28.3229 24.4065 28.7682 24.8488 29.4549 25.5355L31.9598 28.0404L31.9908 28.0094C31.9993 27.4328 32 26.7703 32 25.9998V25.2522ZM22.2169 25.586C22.2165 25.5862 22.2163 25.5863 22.2163 25.5863C22.2163 25.5864 22.2177 25.5859 22.2207 25.5846C22.2189 25.5852 22.2176 25.5857 22.2169 25.586ZM22.445 25.6278C22.4473 25.6297 22.4484 25.6309 22.4484 25.631C22.4484 25.6311 22.4473 25.6301 22.445 25.6278Z' fill='url(%23A)'%3E%3C/path%3E%3Ccircle cx='28' cy='16' r='2' fill='url(%23B)'%3E%3C/circle%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3ClinearGradient id='B' x1='-9' y1='27.5' x2='23' y2='1' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.271' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}
/* Voicecall icon */
.css-58wha4 > div:nth-of-type(1) > button:nth-of-type(3):hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' focusable='false' class='chakra-icon css-1a25qu'%3E%3Cpath fill='none' stroke='url(%23A)' stroke-width='2' d='M30.32 11.654l-.946-.947a1 1 0 00-1.414 0l-3.92 3.92a1 1 0 000 1.413l1.598 1.598a.71.71 0 01.133.82 16.351 16.351 0 01-7.313 7.313.71.71 0 01-.82-.133L16.04 24.04a1 1 0 00-1.414 0l-3.919 3.92a1 1 0 000 1.414l.947.946a6 6 0 007.842.558l3.875-2.907a22.994 22.994 0 004.6-4.6l2.907-3.875a6 6 0 00-.558-7.842z'%3E%3C/path%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}
/* Rewards icon */
.css-58wha4 > div:nth-of-type(1) > button:nth-of-type(4):hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' focusable='false' class='chakra-icon css-1a25qu'%3E%3Cpath d='M10 18.4C10 16.1502 10 15.0252 10.5729 14.2366C10.758 13.982 10.982 13.758 11.2366 13.5729C12.0252 13 13.1502 13 15.4 13H28.6C30.8498 13 31.9748 13 32.7634 13.5729C33.018 13.758 33.242 13.982 33.4271 14.2366C34 15.0252 34 16.1502 34 18.4V19.6C34 19.9716 34 20.1574 33.9754 20.3129C33.8398 21.1687 33.1687 21.8398 32.3129 21.9754C32.1574 22 31.9716 22 31.6 22V22V28C31.6 30.8284 31.6 32.2426 30.7213 33.1213C29.8426 34 28.4284 34 25.6 34H18.4C15.5716 34 14.1574 34 13.2787 33.1213C12.4 32.2426 12.4 30.8284 12.4 28V22V22C12.0284 22 11.8426 22 11.6871 21.9754C10.8313 21.8398 10.1602 21.1687 10.0246 20.3129C10 20.1574 10 19.9716 10 19.6V18.4Z' fill='none' stroke='url(%23A)' stroke-width='2'%3E%3C/path%3E%3Cpath d='M13 22H31' fill='none' stroke='url(%23A)' stroke-width='2' stroke-linecap='square'%3E%3C/path%3E%3Cpath d='M22 12.0411C22 9.16449 18.0292 5.26319 14.8298 7.84266C13.3063 9.07132 14.0701 11.5263 15.5931 12.2632C17.1161 13 20.1639 13 20.1639 13' fill='none' stroke='url(%23A)' stroke-width='2' stroke-linecap='round'%3E%3C/path%3E%3Cpath d='M22 12.0411C22 9.16449 25.9708 5.26319 29.1702 7.84266C30.6937 9.07132 29.9299 11.5263 28.4069 12.2632C26.8839 13 23.8361 13 23.8361 13' fill='none' stroke='url(%23A)' stroke-width='2' stroke-linecap='round'%3E%3C/path%3E%3Cpath d='M22 13V34' fill='none' stroke='url(%23A)' stroke-width='2'%3E%3C/path%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}
}
/* Tooltips */
[aria-label="gallery"]:hover::after,
[aria-label="call"]:hover::after,
[aria-label="rewards"]:hover::after {
background: 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%);
border-radius: 1em;
color: var(--chakra-colors-primaryWhite);
filter: invert(avatarinvert);
font-family: var(--fontfamily);
font-size: fontsize;
font-weight: normal;
line-height: 1.2;
padding: .5em;
position: absolute;
top: 50px;
}
[aria-label="gallery"]:hover::after {
content: "Selfies";
left: -30%;
}
[aria-label="call"]:hover::after {
content: "Voicecall";
left: -60%;
}
[aria-label="rewards"]:hover::after {
content: "Rewards";
left: -60%;
}
/* Rewards modal */
.css-116cmre {
margin: auto;
}
.css-116cmre *:not(.css-1cct4wf) {
font-size: fontsize;
line-height: 1.5;
}
.css-1offyti {
max-width: 700px;
}
/* Hide billing */
if hidebilling {
.css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(3) > button:last-child {
display: none;
}
}
/* Hide sharring */
if hidesharing {
.css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(3) > div:nth-of-type(6),
.css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(3) > div:nth-of-type(7),
.css-116cmre > div > .css-1ebprri,
.css-116cmre > div > p:nth-of-type(3),
.css-116cmre > div > .css-qsuiuj,
.css-zys56m .css-1n8v3qa div {
display: none;
}
/* Daily rewards modal */
.css-116cmre {
max-width: 700px;
min-width: 700px;
}
}
}
@-moz-document url-prefix("https://kindroid.ai/home") {
/* ====================================================
Sidebar & System bubbles on chat page
==================================================== */
/* ===== Sidebar ===== */
/* History mode and view favorited messages */
[aria-label="History mode and view favorited messages"],
[aria-label="History mode and view favorited messages"]:hover {
background: transparent;
height: 36px;
min-height: 36px;
min-width: 36px;
padding: 0;
padding-inline-end: 0;
padding-inline-start: 0;
position: fixed;
right: .5em;
top: calc(60px + .5em);
width: 36px;
}
[aria-label="History mode and view favorited messages"] svg {
fill: var(--chakra-colors-secondaryWhite);
height: 36px;
width: 36px;
}
[aria-label="History mode and view favorited messages"]:hover svg {
fill: transparent !important;
stroke: transparent !important;
}
[aria-label="History mode and view favorited messages"]:hover svg {
background: url("data:image/svg+xml,%3Csvg stroke='url(%23A)' fill='url(%23A)' stroke-width='0' viewBox='0 0 256 256' height='30px' width='30px' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M124,192a12,12,0,0,1-12,12H40a12,12,0,0,1,0-24h72A12,12,0,0,1,124,192ZM40,76H216a12,12,0,0,0,0-24H40a12,12,0,0,0,0,24Zm0,64H96a12,12,0,0,0,0-24H40a12,12,0,0,0,0,24Zm212,4c0,17-9.53,33.56-28.32,49.22a151.47,151.47,0,0,1-26.31,17.51,12,12,0,0,1-10.74,0,151.47,151.47,0,0,1-26.31-17.51C141.53,177.56,132,161,132,144a36,36,0,0,1,60-26.81A36,36,0,0,1,252,144Zm-24,0a12,12,0,0,0-24,0,12,12,0,0,1-24,0,12,12,0,0,0-24,0c0,17.23,22.85,34.43,36,42.29C205.14,178.44,228,161.23,228,144Z'%3E%3C/path%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") center center no-repeat;
background-size: cover;
filter: invert(avatarinvert);
height: 36px;
width: 36px;
}
[aria-label="History mode and view favorited messages"]:hover::before {
background: 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%);
border-radius: 1em;
color: var(--chakra-colors-primaryWhite);
content: "History mode and view favorited messages";
filter: invert(avatarinvert);
font-family: var(--fontfamily);
font-size: fontsize;
font-weight: normal;
line-height: 1.2;
padding: .5em;
position: fixed;
right: calc(36px + 1.2em);
transition: 0.3s linear ease-in-out;
white-space: nowrap;
}
/* LLM */
.css-2oetr7::before {
background: transparent;
}
.css-2oetr7:hover::before {
background: 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%);
border-radius: 1em;
color: var(--chakra-colors-primaryWhite);
content: "Choose LLM version";
filter: invert(avatarinvert);
font-family: var(--fontfamily);
font-size: fontsize;
font-weight: normal;
line-height: 1.2;
padding: .5em;
position: fixed;
right: calc(36px + 1.2em);
top: calc(60px + ((36px + 1em) * 1));
transition: 0.3s linear ease-in-out;
white-space: nowrap;
}
.css-2oetr7 {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M87.49 380c1.19-4.38-1.44-10.47-3.95-14.86a44.86 44.86 0 00-2.54-3.8 199.81 199.81 0 01-33-110C47.65 139.09 140.73 48 255.83 48 356.21 48 440 117.54 459.58 209.85a199 199 0 014.42 41.64c0 112.41-89.49 204.93-204.59 204.93-18.3 0-43-4.6-56.47-8.37s-26.92-8.77-30.39-10.11a31.09 31.09 0 00-11.12-2.07 30.71 30.71 0 00-12.09 2.43l-67.83 24.48a16 16 0 01-4.67 1.22 9.6 9.6 0 01-9.57-9.74 15.85 15.85 0 01.6-3.29z' fill='none' stroke='%23cbcbcb' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32'/%3E%3C/svg%3E") center center no-repeat;
height: 36px;
left: auto;
position: fixed;
top: calc(60px + ((36px + 1em) * 1));
right: .5em;
width: 36px;
}
.css-2oetr7:hover {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M87.49 380c1.19-4.38-1.44-10.47-3.95-14.86a44.86 44.86 0 00-2.54-3.8 199.81 199.81 0 01-33-110C47.65 139.09 140.73 48 255.83 48 356.21 48 440 117.54 459.58 209.85a199 199 0 014.42 41.64c0 112.41-89.49 204.93-204.59 204.93-18.3 0-43-4.6-56.47-8.37s-26.92-8.77-30.39-10.11a31.09 31.09 0 00-11.12-2.07 30.71 30.71 0 00-12.09 2.43l-67.83 24.48a16 16 0 01-4.67 1.22 9.6 9.6 0 01-9.57-9.74 15.85 15.85 0 01.6-3.29z' fill='none' stroke='url(%23A)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32'/%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") center center no-repeat;
height: 36px;
left: auto;
position: fixed;
top: calc(60px + ((36px + 1em) * 1));
right: .5em;
width: 36px;
}
.css-2oetr7 > p {
display: none;
width: 0;
}
if (systembubblesstyle=="systembubbleswide") || (systembubblesstyle=="systembubblesdark") {
.css-r6z5ec > .css-do4s31 > .css-94x4at {
padding: 0;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:before,
.css-r6z5ec > .css-do4s31 > .css-94x4at:hover::before {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
content: "";
}
/* Continue cut-off message */
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(1) {
order: 2;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(1)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z' fill='none' stroke='%23cbcbcb' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath d='M394.77 246.7l-114.45-69.14a10.78 10.78 0 00-16.32 9.31v53.32l-103.68-62.63a10.78 10.78 0 00-16.32 9.31v138.26a10.78 10.78 0 0016.32 9.31L264 271.81v53.32a10.78 10.78 0 0016.32 9.31l114.45-69.14a10.89 10.89 0 000-18.6z' fill='%23cbcbcb' stroke='none' stroke-miterlimit='10' stroke-width='32'/%3E%3C/svg%3E");
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(1):hover::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z' fill='none' stroke='url(%23A)' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath d='M394.77 246.7l-114.45-69.14a10.78 10.78 0 00-16.32 9.31v53.32l-103.68-62.63a10.78 10.78 0 00-16.32 9.31v138.26a10.78 10.78 0 0016.32 9.31L264 271.81v53.32a10.78 10.78 0 0016.32 9.31l114.45-69.14a10.89 10.89 0 000-18.6z' fill='url(%23A)' stroke='none' stroke-miterlimit='10' stroke-width='32'/%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
filter: invert(avatarinvert);
}
/* Auto-Selfie */
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(2) {
order: 1;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(2)::before {
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M350.54 148.68l-26.62-42.06C318.31 100.08 310.62 96 302 96h-92c-8.62 0-16.31 4.08-21.92 10.62l-26.62 42.06C155.85 155.23 148.62 160 140 160H80a32 32 0 00-32 32v192a32 32 0 0032 32h352a32 32 0 0032-32V192a32 32 0 00-32-32h-59c-8.65 0-16.85-4.77-22.46-11.32z' fill='none' stroke='%23cbcbcb' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3Ccircle cx='256' cy='272' r='80' fill='none' stroke='%23cbcbcb' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath fill='none' stroke='%23cbcbcb' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M124 158v-22h-24v22'/%3E%3C/svg%3E");
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(2):hover::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M350.54 148.68l-26.62-42.06C318.31 100.08 310.62 96 302 96h-92c-8.62 0-16.31 4.08-21.92 10.62l-26.62 42.06C155.85 155.23 148.62 160 140 160H80a32 32 0 00-32 32v192a32 32 0 0032 32h352a32 32 0 0032-32V192a32 32 0 00-32-32h-59c-8.65 0-16.85-4.77-22.46-11.32z' fill='none' stroke='url(%23A)' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3Ccircle cx='256' cy='272' r='80' fill='none' stroke='url(%23A)' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath fill='none' stroke='url(%23A)' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M124 158v-22h-24v22'/%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
filter: invert(avatarinvert);
}
/* Chat Break */
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(3) {
order: 4;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(3)::before {
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z' fill='none' stroke='%23cbcbcb' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath fill='none' stroke='%23cbcbcb' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M320 320L192 192M192 320l128-128'/%3E%3C/svg%3E");
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(3):hover::before {
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z' fill='none' stroke='url(%23A)' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath fill='none' stroke='url(%23A)' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M320 320L192 192M192 320l128-128'/%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
filter: invert(avatarinvert);
}
/* Tweak AI message */
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(4) {
order: 3;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(4)::before {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h167.48' fill='none' stroke='%23cbcbcb' stroke-width='32' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M459.94 53.25a16.06 16.06 0 00-23.22-.56L424.35 65a8 8 0 000 11.31l11.34 11.32a8 8 0 0011.34 0l12.06-12c6.1-6.09 6.67-16.01.85-22.38zM399.34 90L218.82 270.2a9 9 0 00-2.31 3.93L208.16 299a3.91 3.91 0 004.86 4.86l24.85-8.35a9 9 0 003.93-2.31L422 112.66a9 9 0 000-12.66l-9.95-10a9 9 0 00-12.71 0z' fill='none' stroke='%23cbcbcb' stroke-width='32' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(4):hover::before {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h167.48' fill='none' stroke='url(%23A)' stroke-width='32' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M459.94 53.25a16.06 16.06 0 00-23.22-.56L424.35 65a8 8 0 000 11.31l11.34 11.32a8 8 0 0011.34 0l12.06-12c6.1-6.09 6.67-16.01.85-22.38zM399.34 90L218.82 270.2a9 9 0 00-2.31 3.93L208.16 299a3.91 3.91 0 004.86 4.86l24.85-8.35a9 9 0 003.93-2.31L422 112.66a9 9 0 000-12.66l-9.95-10a9 9 0 00-12.71 0z' fill='none' stroke='url(%23A)' stroke-width='32' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
filter: invert(avatarinvert);
}
}
if (systembubblesstyle=="systembubbleswide") {
body:has(.css-1b1fzbz) {
.css-r6z5ec > .css-do4s31 {
align-items: center;
background-color: transparent;
border: none;
bottom: 81px;
color: var(--chakra-colors-secondaryWhite);
display: flex;
flex-direction: column;
font-size: fontsize;
gap: .5em;
justify-content: flex-end;
left: auto;
max-width: 36px;
min-width: 36px;
--menu-shadow: transparent;
opacity: 1 !important;
outline: 0;
outline-offset: 0;
position: fixed;
right: .5em;
transform: none !important;
transform-origin: unset;
visibility: visible !important;
z-index: 0;
}
/* Hide 3 dots */
.css-1y2ps2x {
display: none;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at {
background-color: transparent;
color: transparent;
height: 36px !important;
max-width: 36px !important;
position: relative;
transform: none !important;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:before,
.css-r6z5ec > .css-do4s31 > .css-94x4at:hover::before {
height: 36px !important;
max-width: 36px !important;
min-width: 36px !important;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:hover::after {
background: 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%);
border-radius: 1em;
bottom: unset !important;
color: var(--chakra-colors-primaryWhite);
filter: invert(avatarinvert);
font-family: var(--fontfamily);
font-size: fontsize;
font-weight: normal;
left: auto !important;
line-height: 1.2;
padding: .5em;
position: absolute;
right: calc(36px + .7em) !important;
transition: 0.3s linear ease-in-out;
white-space: nowrap;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(1):hover::after {
content: "Continue cut-off message";
transform: translateX(0%);
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(2):hover::after {
content: "Auto-Selfie";
transform: translateX(0%);
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(3):hover::after {
content: "Chat Break";
transform: translateX(0%) !important;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(4):hover::after {
content: "Tweak AI message";
transform: translateX(0%);
}
}
}
if (systembubblesstyle=="systembubblesdark") {
body:has(.css-1b1fzbz) {
.css-do4s31 {
border-radius: .5em;
margin-left: -5%
}
.css-do4s31,
.css-94x4at {
background-color: #161616;
border-color: #6C6C6C;
color: var(--chakra-colors-secondaryWhite);
font-family: var(--fontfamily);
font-size: fontsize;
line-height: 1.5;
margin-bottom: .5em;
padding: .5em 0em .5em 1em;
}
.css-do4s31 {
display: grid;
}
.css-1y2ps2x:hover,
.css-do4s31 button:hover {
background: 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%);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
color: transparent;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:before,
.css-r6z5ec > .css-do4s31 > .css-94x4at:hover::before {
height: fontsize !important;
max-width: fontsize !important;
min-width: fontsize !important;
margin-right: .3em;
}
}
}
}
@-moz-document url-prefix("https://kindroid.ai/home"), url-prefix("https://kindroid.ai/groupchat/") {
/* ====================================================
Chat and group chat page
==================================================== */
/* ===== Chat box ===== */
.css-1dhayxc *,
.css-yhhl9h * {
z-index: 0 !important;
}
/* Shared links to kin */
.css-1dhayxc .css-fujl5p > div:nth-of-type(2) > p.css-dhnoom,
.css-1dhayxc .css-116lnl0 > div:nth-of-type(2) > p.css-dhnoom {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
font-size: 1rem !important;
width: fit-content;
}
/* Vertically center bubbles */
.css-1dhayxc,
.css-yhhl9h {
align-items: center;
}
/* Vertically center edit icon */
.css-1dhayxc:last-child > div:nth-of-type(1) {
align-self: center;
padding: 0;
}
/* ===== Group config ===== */
.css-v79ql0 {
font-size: 18px;
text-align: center;
}
/* Avatar selection for group images */
.css-1e9g1nc {
justify-content: center;
}
.css-1e9g1nc > .css-156z0wo {
height: auto;
width: 300px;
}
.css-156z0wo > .css-15td5wo > .css-w9iwt8 > .css-1cfkm3f {
text-align: center;
}
/* Tweak AI message */
body:has([aria-label="Edit AI message contents textbox"]) {
.css-1q3je8v {
width: 90vw;
}
[aria-label="Edit AI message contents textbox"]:not(:focus),
[aria-label="Edit AI message contents textbox"]:focus {
height: 600px;
margin-left: .5em;
max-width: calc(100% - 1em);
min-height: 600px;
}
}
/* ===== Textarea box ===== */
/* Textarea opacity */
.css-b9bzmp {
align-self: flex-end;
background-color: rgba(16, 16, 16, textareabgopacity);
bottom: 0;
right: 0;
padding: .75em;
position: fixed;
width: 100%;
z-index: 1;
}
/* Textarea opacity */
.css-b9bzmp textarea {
opacity: textareaopacity;
}
/* Invert extras and textarea to prevent problems with sidebar */
.css-b9bzmp .css-14dkl09 {
order: 2;
}
.css-b9bzmp .css-2jbc1u {
order: 1;
}
textarea[aria-label="Attached link textarea"] {
margin: 1em calc(36px + 1em + .1em) 1em .1em;
max-width: 100%;
overflow-x: auto;
padding: 16px;
vertical-align: middle;
width: auto;
white-space: nowrap;
}
/* Extras */
/* + icon */
[aria-label="expand addons"]:hover svg {
background: url("data:image/svg+xml,%3Csvg fill='url(%23A)' stroke-width='0' viewBox='0 0 16 16' focusable='false' class='chakra-icon css-2brzet' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'%3E%3C/path%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4'%3E%3C/path%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") no-repeat;
background-size: cover;
filter: invert(avatarinvert);
height: 0;
padding-left: 28px;
padding-top: 28px;
width: 0;
}
/* Back icon */
[aria-label="collapse extras"]:hover svg {
background: url("data:image/svg+xml,%3Csvg fill='url(%23A)' stroke-width='0' viewBox='0 0 16 16' focusable='false' class='chakra-icon css-1lurkvs' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'%3E%3C/path%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") no-repeat;
background-size: cover;
filter: invert(avatarinvert);
height: 0;
padding-left: 24px;
padding-top: 24px;
width: 0;
}
/* Add image/video icon */
[aria-label="add image/video"]:hover svg {
background: url("data:image/svg+xml,%3Csvg fill='url(%23A)' stroke-width='0' viewBox='0 0 640 512' focusable='false' class='chakra-icon css-5xmvpk' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M608 0H160a32 32 0 0 0-32 32v96h160V64h192v320h128a32 32 0 0 0 32-32V32a32 32 0 0 0-32-32zM232 103a9 9 0 0 1-9 9h-30a9 9 0 0 1-9-9V73a9 9 0 0 1 9-9h30a9 9 0 0 1 9 9zm352 208a9 9 0 0 1-9 9h-30a9 9 0 0 1-9-9v-30a9 9 0 0 1 9-9h30a9 9 0 0 1 9 9zm0-104a9 9 0 0 1-9 9h-30a9 9 0 0 1-9-9v-30a9 9 0 0 1 9-9h30a9 9 0 0 1 9 9zm0-104a9 9 0 0 1-9 9h-30a9 9 0 0 1-9-9V73a9 9 0 0 1 9-9h30a9 9 0 0 1 9 9zm-168 57H32a32 32 0 0 0-32 32v288a32 32 0 0 0 32 32h384a32 32 0 0 0 32-32V192a32 32 0 0 0-32-32zM96 224a32 32 0 1 1-32 32 32 32 0 0 1 32-32zm288 224H64v-32l64-64 32 32 128-128 96 96z'%3E%3C/path%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") no-repeat;
background-size: cover;
filter: invert(avatarinvert);
height: 0;
padding-left: 30px;
padding-top: 30px;
width: 0;
}
/* Use internet icon */
[aria-label="use internet"]:hover svg {
background: url("data:image/svg+xml,%3Csvg fill='url(%23A)' stroke-width='0' viewBox='0 0 16 16' focusable='false' class='chakra-icon css-2brzet' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m7.5-6.923c-.67.204-1.335.82-1.887 1.855A8 8 0 0 0 5.145 4H7.5zM4.09 4a9.3 9.3 0 0 1 .64-1.539 7 7 0 0 1 .597-.933A7.03 7.03 0 0 0 2.255 4zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a7 7 0 0 0-.656 2.5zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5zM8.5 5v2.5h2.99a12.5 12.5 0 0 0-.337-2.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5zM5.145 12q.208.58.468 1.068c.552 1.035 1.218 1.65 1.887 1.855V12zm.182 2.472a7 7 0 0 1-.597-.933A9.3 9.3 0 0 1 4.09 12H2.255a7 7 0 0 0 3.072 2.472M3.82 11a13.7 13.7 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5zm6.853 3.472A7 7 0 0 0 13.745 12H11.91a9.3 9.3 0 0 1-.64 1.539 7 7 0 0 1-.597.933M8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855q.26-.487.468-1.068zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.7 13.7 0 0 1-.312 2.5m2.802-3.5a7 7 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7 7 0 0 0-3.072-2.472c.218.284.418.598.597.933M10.855 4a8 8 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4z'%3E%3C/path%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") no-repeat;
background-size: cover;
filter: invert(avatarinvert);
height: 0;
padding-left: 28px;
padding-top: 28px;
width: 0;
}
/* Attach link icon */
[aria-label="attach link"]:hover svg {
background: url("data:image/svg+xml,%3Csvg fill='url(%23A)' stroke-width='0' viewBox='0 0 16 16' focusable='false' class='chakra-icon css-11gzyl8' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1 1 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4 4 0 0 1-.128-1.287z'%3E%3C/path%3E%3Cpath d='M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243z'%3E%3C/path%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") no-repeat;
background-size: cover;
filter: invert(avatarinvert);
height: 0;
padding-left: 36px;
padding-top: 36px;
width: 0;
}
/* Suggest message button */
[aria-label="Suggest message"] {
top: 50%;
transform: translateY(-50%);
}
[aria-label="Suggest message"]:hover::before {
background: 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%);
border-radius: 1em;
bottom: 2.5em;
color: var(--chakra-colors-primaryWhite);
content: "Suggest message";
font-family: var(--fontfamily);
font-size: fontsize;
font-weight: normal;
line-height: 1.2;
right: 0;
padding: .5em;
position: fixed;
transition: 0.3s linear ease-in-out;
white-space: nowrap;
}
[aria-label="Suggest message"]:hover svg {
background: url("data:image/svg+xml,%3Csvg fill='url(%23A)' stroke-width='0' viewBox='0 0 1024 1024' height='24px' width='24px' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1020.51 429.376L917.727 275.698l51.152-178.816c3.184-11.216.064-23.28-8.224-31.504-8.256-8.256-20.256-11.311-31.536-8.031l-178.512 52.128L596.319 5.57c-9.712-6.529-22.16-7.313-32.464-1.937-10.369 5.312-17.025 15.871-17.409 27.503l-5.536 185.936-146.496 114.592c-9.183 7.184-13.712 18.816-11.872 30.32s9.808 21.087 20.816 25.023l137.456 49.28c-.928.736-1.904 1.393-2.768 2.257L7.294 969.297c-12.496 12.496-12.496 32.752 0 45.248 6.256 6.256 14.432 9.376 22.624 9.376 8.192 0 16.368-3.12 22.624-9.376l530.752-530.752c2.065-2.064 3.664-4.4 5.04-6.816l53.792 147.552a32.058 32.058 0 0 0 25.152 20.656c1.631.256 3.28.368 4.912.368A32.044 32.044 0 0 0 697.5 633.12l113.776-147.168 183.904-6.56c11.664-.4 22.16-7.12 27.44-17.535 5.264-10.384 4.448-22.848-2.112-32.48zm-226.461-6.83c-9.504.32-18.368 4.882-24.192 12.401l-87.472 113.104-48.976-134.32c-3.248-8.944-10.32-15.936-19.28-19.152l-134.592-48.256 112.624-88.064c7.504-5.872 11.968-14.752 12.288-24.256l4.256-142.944 118.592 79.872a32.192 32.192 0 0 0 26.849 4.191l137.248-40.095-39.344 137.472a32.18 32.18 0 0 0 4.336 26.848l80.56 118.128z'%3E%3C/path%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") no-repeat;
background-size: cover;
height: 0;
padding-left: 24px;
padding-top: 24px;
width: 0;
}
/* Auto-selfie modal */
.css-mwrqw9,
.css-mwrqw9 > div {
max-width: 60vw !important;
}
.css-mwrqw9 [aria-label="Confirm"] {
display: flex;
justify-self: center;
width: fit-content;
}
/* ===== Customizations ===== */
/* Bubble when a kin is writing */
.css-1ib244v {
align-items: center;
}
/* Date in bubble */
.css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(1),
.css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(1):empty,
.css-yhhl9h > div:nth-of-type(1) > div:nth-of-type(1),
.css-yhhl9h > div:nth-of-type(1) > div:nth-of-type(1):empty {
z-index: 0;
}
.css-1dhayxc .css-1iqgkq5,
.css-yhhl9h .css-160fgw0 {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: invert(avatarinvert);
font-family: fontfamily, sans-serif;
font-size: fontsize;
font-weight: normal;
white-space: nowrap;
}
/* More options icons */
[aria-label="more-options"] {
align-self: center !important;
background: transparent;
margin-left: 2em;
}
[aria-label="more-options"]:hover {
background: transparent;
}
[aria-label="more-options"] > span {
color: var(--chakra-colors-primaryWhite) !important;
background: transparent;
font-size: 36px !important;
}
[aria-label="more-options"]:hover > span {
background: 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%);
box-sizing: border-box;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
color: transparent;
filter: invert(avatarinvert);
}
/* Hide names in bubbles to save place */
if hidenames {
.css-k008qs > p:first-child {
display: none;
}
.css-1cs12kv {
height: 0;
}
[src*="/_next/static/media/playIcon"],
[src*="/_next/static/media/stopIcon"] {
pointer-events: auto !important;
z-index: 9999 !important;
}
[src*="/_next/static/media/playIcon"],
[src*="/_next/static/media/stopIcon"],
.css-fujl5p .chakra-spinner,
.css-fujl5p:has(.css-qfa1mb) .css-qfa1mb {
height: 36px;
margin-left: -70px;
pointer-events: none;
position: absolute;
top: 50%;
transition: transform 0.3s ease;
width: 36px;
}
[src*="/_next/static/media/playIcon"],
[src*="/_next/static/media/stopIcon"],
.css-fujl5p .chakra-spinner {
transform: translateY(-50%);
}
.css-fujl5p:has(.css-qfa1mb) [src*="/_next/static/media/playIcon"],
.css-fujl5p:has(.css-qfa1mb) [src*="/_next/static/media/stopIcon"],
.css-fujl5p:has(.css-qfa1mb) .chakra-spinner {
transform: translateY(-100%);
}
.css-fujl5p:has(.css-qfa1mb) .css-qfa1mb {
transform: translateY(25%);
}
.css-yhhl9h > .css-fujl5p,
.css-yhhl9h > .css-116lnl0 {
margin-left: 50px;
}
.css-1dhayxc:has([aria-label="Create new scenario"]) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) {
margin-left: -6em !important;
margin-right: auto;
}
}
/* Create new scenario and favorite icons on left and bigger */
.css-1dhayxc:has([aria-label="Create new scenario"]) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) {
margin-left: -9em;
margin-right: auto;
}
.css-1dhayxc:has([aria-label="Create new scenario"]) {
[src*="/_next/static/media/editIcon"] {
margin-left: -5em;
margin-right: auto;
}
}
}
@-moz-document url-prefix("https://kindroid.ai/home") {
/* ====================================================
Chat page
==================================================== */
/* ===== Wide mode ===== */
.css-213aa4,
.css-na0gqx {
box-sizing: border-box;
max-height: 100vh;
max-width: 100vw;
position: relative;
}
/* ===== Avatar box ===== */
.css-213aa4 > div:nth-of-type(2),
.css-na0gqx > div:nth-of-type(2) {
margin: 0 1em;
max-width: avatarsize;
min-width: avatarsize;
padding: 0;
transition: 0.3s linear ease-in-out;
}
/* Hide reduce button on avatar */
@media screen and (min-width: 900px) {
.css-b5a3z7 {
display: none;
}
}
/* ===== Chat box ===== */
.css-213aa4 > div:nth-of-type(3),
.css-na0gqx > div:nth-of-type(3) {
border-right: 1px solid #cbcbcb;
margin: 0 3.5em 71px 0;
max-width: 100%;
padding: 0 1em 0 0;
}
/* Modification of rounded corners for our bubbles */
.css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(2) {
border-radius: 1em .5em 1em 1em !important;
}
/* Modification of rounded corners for AI bubbles */
.css-1ulhpcc,
.css-yhhl9h > div:nth-of-type(1) > div:nth-of-type(2) {
border-radius: .5em 1em 1em 1em !important;
}
/* Vertically center bubbles */
.css-yhhl9h:last-child > div:nth-of-type(2) {
margin-top: auto;
}
/* ===== Customizations ===== */
/* Vanilla avatar */
.css-213aa4 > div:nth-of-type(2) > div,
.css-na0gqx > div:nth-of-type(2) > div {
border-radius: 1em;
}
/* Avatar brightness, contrast, grayscale */
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
filter: brightness(avatarbrightness) contrast(avatarcontrast) grayscale(avatargrayscale) invert(avatarinvert) !important;
}
/* Avatar chat */
if avatarchat && avatarchoice {
.css-213aa4 > div:nth-of-type(2),
.css-na0gqx > div:nth-of-type(2) {
display: none;
height: 0;
transition: 0.3s linear ease-in-out;
width: 0;
}
/* Adjust bubbles size depending on avatar size */
.css-1dhayxc > .css-fujl5p,
.css-1dhayxc > .css-116lnl0,
.css-yhhl9h > .css-fujl5p,
.css-yhhl9h > .css-116lnl0 {
max-width: calc(80% - var(--avatarchatgroupsize));
}
.css-yhhl9h::before {
background: url(avatarchoiceurl) center center / cover no-repeat;
border-radius: 1em;
content: "";
height: avatarchatgroupsize;
margin-left: 16px;
min-width: avatarchatgroupsize;
transition: 0.3s linear ease-in-out;
width: avatarchatgroupsize;
}
.css-4qwruq:has([aria-label="Create new scenario"]) {
.css-1dhayxc,
.css-yhhl9h {
padding-top: 0 !important;
}
}
if avatarchoiceforus {
.css-1dhayxc::after {
background: url(avatarchoiceforusurl) center center / cover no-repeat;
border-radius: 1em;
content: "";
height: avatarchatgroupsize;
min-width: avatarchatgroupsize;
transition: 0.3s linear ease-in-out;
width: avatarchatgroupsize;
}
}
}
/* Avatar choice */
if avatarchoice {
.css-213aa4 > div:nth-of-type(2) > div img,
.css-na0gqx > div:nth-of-type(2) > div img {
background: url(avatarchoiceurl) center center / cover no-repeat;
height: 0;
padding-left: avatarsize;
padding-top: avatarsize;
transition: 0.3s linear ease-in-out;
width: 0;
}
}
/* Avatar flip, rotate, zoom */
if (avatarflip=="avatarflipdefault") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
transform: rotate(avatarrotate) scale(avatarzoom);
}
}
if (avatarflip=="avatarfliphorizontally") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
transform: rotate(avatarrotate) scale(avatarzoom) scaleX(-1) !important;
}
}
if (avatarflip=="avatarflipvertically") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
transform: rotate(avatarrotate) scale(avatarzoom) scaleY(-1) !important;
}
}
if (avatarflip=="avatarfliphorizontallyvertically") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
transform: rotate(avatarrotate) scale(calc(var(--avatarzoom) * -1)) !important;
}
}
/* Avatar hoverzoom */
if avatarhoverzoom {
.css-213aa4 > div:nth-of-type(2) > div > img:hover,
.css-na0gqx > div:nth-of-type(2) > div > img:hover,
.css-213aa4 > div:nth-of-type(2) > div > video:hover,
.css-na0gqx > div:nth-of-type(2) > div > video:hover {
aspect-ratio: 1 / 1;
border-radius: 0 !important;
max-height: 100vh !important;
min-height: 100vh !important;
left: 0;
position: fixed !important;
top: 0 !important;
min-width: fit-content;
width: auto !important;
z-index: 9999 !important;
}
if avatarchoice {
.css-213aa4 > div:nth-of-type(2) > div:hover > img,
.css-na0gqx > div:nth-of-type(2) > div:hover > img,
.css-213aa4 > div:nth-of-type(2) > div:hover > video,
.css-na0gqx > div:nth-of-type(2) > div:hover > video {
display: none;
}
.css-213aa4 > div:nth-of-type(2) > div:hover::after,
.css-na0gqx > div:nth-of-type(2) > div:hover::after {
content: "";
background: url(avatarchoiceurl) center center / cover no-repeat;
aspect-ratio: 1 / 1;
border-radius: 0 !important;
max-height: 100vh !important;
min-height: 100vh !important;
left: 0;
position: fixed !important;
top: 0 !important;
min-width: fit-content;
width: auto !important;
z-index: 9999 !important;
}
}
}
/* Avatar mix blend mode */
if (avatarmixblend=="avatarmixdefault") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video:active,
.css-na0gqx > div:nth-of-type(2) > div > video:active {
mix-blend-mode: normal;
}
}
if (avatarmixblend=="avatarmixcolor") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video:active,
.css-na0gqx > div:nth-of-type(2) > div > video:active {
mix-blend-mode: color !important;
}
}
if (avatarmixblend=="avatarmixcolorburn") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video:active,
.css-na0gqx > div:nth-of-type(2) > div > video:active {
mix-blend-mode: color-burn !important;
}
}
if (avatarmixblend=="avatarmixcolordodge") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video:active,
.css-na0gqx > div:nth-of-type(2) > div > video:active {
mix-blend-mode: color-dodge !important;
}
}
if (avatarmixblend=="avatarmixdarken") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video:active,
.css-na0gqx > div:nth-of-type(2) > div > video:active {
mix-blend-mode: darken !important;
}
}
if (avatarmixblend=="avatarmixdifference") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video:active,
.css-na0gqx > div:nth-of-type(2) > div > video:active {
mix-blend-mode: difference !important;
}
}
if (avatarmixblend=="avatarmixexclusion") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video:active,
.css-na0gqx > div:nth-of-type(2) > div > video:active {
mix-blend-mode: exclusion !important;
}
}
if (avatarmixblend=="avatarmixhardlight") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video:active,
.css-na0gqx > div:nth-of-type(2) > div > video:active {
mix-blend-mode: hard-light !important;
}
}
if (avatarmixblend=="avatarmixhue") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video:active,
.css-na0gqx > div:nth-of-type(2) > div > video:active {
mix-blend-mode: hue !important;
}
}
if (avatarmixblend=="avatarmixlighten") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video:active,
.css-na0gqx > div:nth-of-type(2) > div > video:active {
mix-blend-mode: lighten !important;
}
}
if (avatarmixblend=="avatarmixluminosity") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video:active,
.css-na0gqx > div:nth-of-type(2) > div > video:active {
mix-blend-mode: luminosity !important;
}
}
if (avatarmixblend=="avatarmixmultiply") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video:active,
.css-na0gqx > div:nth-of-type(2) > div > video:active {
mix-blend-mode: multiply !important;
}
}
if (avatarmixblend=="avatarmixoverlay") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video:active,
.css-na0gqx > div:nth-of-type(2) > div > video:active {
mix-blend-mode: overlay !important;
}
}
if (avatarmixblend=="avatarmixpluslighter") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video:active,
.css-na0gqx > div:nth-of-type(2) > div > video:active {
mix-blend-mode: plus-lighter !important;
}
}
if (avatarmixblend=="avatarmixsaturation") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video:active,
.css-na0gqx > div:nth-of-type(2) > div > video:active {
mix-blend-mode: saturation !important;
}
}
if (avatarmixblend=="avatarmixscreen") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video:active,
.css-na0gqx > div:nth-of-type(2) > div > video:active {
mix-blend-mode: screen !important;
}
}
if (avatarmixblend=="avatarmixsoftlight") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video:active,
.css-na0gqx > div:nth-of-type(2) > div > video:active {
mix-blend-mode: soft-light !important;
}
}
/* Avatar on right side */
if avataronrightside {
.css-213aa4 > div:nth-of-type(2),
.css-na0gqx > div:nth-of-type(2) {
border-right: 1px solid #cbcbcb;
margin-right: calc(36px + 1em);
padding-right: 2em;
order: 2;
}
.css-213aa4 > div:nth-of-type(3),
.css-na0gqx > div:nth-of-type(3) {
border-right: 0 !important;
margin-left: 1em !important;
margin-right: 0 !important;
order: 1;
}
}
/* Avatar opacity */
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video:active,
.css-na0gqx > div:nth-of-type(2) > div > video:active {
opacity: avataropacity !important;
}
/* Avatar position */
.css-213aa4 > div:nth-of-type(2) > div,
.css-na0gqx > div:nth-of-type(2) > div {
top: avatarposition;
transition: 0.3s linear ease-in-out;
}
/* Avatar styles */
if (avatarstyles=="avataralien") || (avatarstyles=="avatarapple") || (avatarstyles=="avataratom") || (avatarstyles=="avatarbookmark") || (avatarstyles=="avatarcannabis") || (avatarstyles=="avatarchatbubble") || (avatarstyles=="avatarchefhat") || (avatarstyles=="avatarcloud") || (avatarstyles=="avatarcog") || (avatarstyles=="avatarcrystal") || (avatarstyles=="avatardevil") || (avatarstyles=="avatargem") || (avatarstyles=="avatarghost") || (avatarstyles=="avatargift") || (avatarstyles=="avatarheart") || (avatarstyles=="avataroctagon") || (avatarstyles=="avatarpentagon") || (avatarstyles=="avatarrabbit") || (avatarstyles=="avatarratio") || (avatarstyles=="avatarshield") || (avatarstyles=="avatarshipwheel") || (avatarstyles=="avatarshirt") || (avatarstyles=="avatarslime") || (avatarstyles=="avatarsmartphone") || (avatarstyles=="avatarsquircle") || (avatarstyles=="avatarstar") || (avatarstyles=="avatartablet") || (avatarstyles=="avatartreedeciduous") || (avatarstyles=="avatartreepine") || (avatarstyles=="avatartriangle") || (avatarstyles=="avatarvenetianmask") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: cover;
mask-size: cover;
max-height: 100%;
max-width: 100%;
object-fit: cover;
transition: 0.3s linear ease-in-out;
}
}
if (avatarstyles=="avatardefault") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
transition: 0.3s linear ease-in-out;
}
}
if (avatarstyles=="avataralien") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.382 9.4054c-.0649-.6486-.1297-1.3622-.2595-2.0108-.1297-.6487-.2594-1.2973-.5189-1.946-.1297-.3243-.2595-.6486-.3892-.908-.1297-.3244-.3243-.5838-.454-.9082-.1946-.2594-.3892-.5838-.5838-.8432-.1946-.2595-.454-.519-.7135-.7135-.454-.3892-.973-.7784-1.5568-1.1027-.5838-.3244-1.2324-.5838-1.881-.7135C13.3765.0649 12.7278 0 12.0143 0c-.7135 0-1.3621.0649-2.0108.2595C9.355.3892 8.7712.6486 8.1874.973c-.6487.3243-1.1676.7135-1.6865 1.1675-.2595.1946-.454.454-.7135.7136l-.5838.7783c-.1297.3244-.3243.5838-.454.9081l-.3892.973c-.1946.6487-.3892 1.2973-.519 1.946-.1297.6486-.1946 1.2973-.2594 2.0108-.0649.7135 0 1.2973 0 1.946 0 .6486.0648 1.2972.1946 2.0107l.1946.973c.0648.3243.1946.6486.3243.973.454 1.2324 1.1676 2.4 1.881 3.5027.3893.5838.7785 1.1027 1.1676 1.6216.3892.519.7784 1.1027 1.2325 1.5568.1946.2594.454.454.7135.7135.2594.1946.519.3892.8432.5837.2595.1946.5838.3244.9081.4541.1298.0649.3244.1297.4541.1297.1946 0 .3243.0649.519.0649.1945 0 .3242 0 .5188-.0649.1946 0 .3244-.0648.454-.1297.3244-.1297.6487-.2595.9082-.454.2595-.1946.5838-.3892.8432-.5838.2595-.1946.519-.454.7136-.7135.454-.519.8432-1.0379 1.2324-1.5568.3892-.519.7784-1.1027 1.1676-1.6216.7135-1.1027 1.427-2.2703 1.881-3.5027.1298-.3244.2595-.6487.3244-.973.0648-.3243.1946-.6486.1946-.973.1297-.6486.1945-1.2973.1945-2.0108 0-.6486 0-1.3621-.0648-2.0108'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.382 9.4054c-.0649-.6486-.1297-1.3622-.2595-2.0108-.1297-.6487-.2594-1.2973-.5189-1.946-.1297-.3243-.2595-.6486-.3892-.908-.1297-.3244-.3243-.5838-.454-.9082-.1946-.2594-.3892-.5838-.5838-.8432-.1946-.2595-.454-.519-.7135-.7135-.454-.3892-.973-.7784-1.5568-1.1027-.5838-.3244-1.2324-.5838-1.881-.7135C13.3765.0649 12.7278 0 12.0143 0c-.7135 0-1.3621.0649-2.0108.2595C9.355.3892 8.7712.6486 8.1874.973c-.6487.3243-1.1676.7135-1.6865 1.1675-.2595.1946-.454.454-.7135.7136l-.5838.7783c-.1297.3244-.3243.5838-.454.9081l-.3892.973c-.1946.6487-.3892 1.2973-.519 1.946-.1297.6486-.1946 1.2973-.2594 2.0108-.0649.7135 0 1.2973 0 1.946 0 .6486.0648 1.2972.1946 2.0107l.1946.973c.0648.3243.1946.6486.3243.973.454 1.2324 1.1676 2.4 1.881 3.5027.3893.5838.7785 1.1027 1.1676 1.6216.3892.519.7784 1.1027 1.2325 1.5568.1946.2594.454.454.7135.7135.2594.1946.519.3892.8432.5837.2595.1946.5838.3244.9081.4541.1298.0649.3244.1297.4541.1297.1946 0 .3243.0649.519.0649.1945 0 .3242 0 .5188-.0649.1946 0 .3244-.0648.454-.1297.3244-.1297.6487-.2595.9082-.454.2595-.1946.5838-.3892.8432-.5838.2595-.1946.519-.454.7136-.7135.454-.519.8432-1.0379 1.2324-1.5568.3892-.519.7784-1.1027 1.1676-1.6216.7135-1.1027 1.427-2.2703 1.881-3.5027.1298-.3244.2595-.6487.3244-.973.0648-.3243.1946-.6486.1946-.973.1297-.6486.1945-1.2973.1945-2.0108 0-.6486 0-1.3621-.0648-2.0108'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarapple") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06Z'/%3E%3Cpath d='M10 2c1 .5 2 2 2 5'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06Z'/%3E%3Cpath d='M10 2c1 .5 2 2 2 5'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avataratom") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Cpath d='M20.2 20.2c2.04-2.03.02-7.36-4.5-11.9-4.54-4.52-9.87-6.54-11.9-4.5-2.04 2.03-.02 7.36 4.5 11.9 4.54 4.52 9.87 6.54 11.9 4.5Z'/%3E%3Cpath d='M15.7 15.7c4.52-4.54 6.54-9.87 4.5-11.9-2.03-2.04-7.36-.02-11.9 4.5-4.52 4.54-6.54 9.87-4.5 11.9 2.03 2.04 7.36.02 11.9-4.5Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Cpath d='M20.2 20.2c2.04-2.03.02-7.36-4.5-11.9-4.54-4.52-9.87-6.54-11.9-4.5-2.04 2.03-.02 7.36 4.5 11.9 4.54 4.52 9.87 6.54 11.9 4.5Z'/%3E%3Cpath d='M15.7 15.7c4.52-4.54 6.54-9.87 4.5-11.9-2.03-2.04-7.36-.02-11.9 4.5-4.52 4.54-6.54 9.87-4.5 11.9 2.03 2.04 7.36.02 11.9-4.5Z'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarbookmark") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarcannabis") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-4'/%3E%3Cpath d='M7 12c-1.5 0-4.5 1.5-5 3 3.5 1.5 6 1 6 1-1.5 1.5-2 3.5-2 5 2.5 0 4.5-1.5 6-3 1.5 1.5 3.5 3 6 3 0-1.5-.5-3.5-2-5 0 0 2.5.5 6-1-.5-1.5-3.5-3-5-3 1.5-1 4-4 4-6-2.5 0-5.5 1.5-7 3 0-2.5-.5-5-2-7-1.5 2-2 4.5-2 7-1.5-1.5-4.5-3-7-3 0 2 2.5 5 4 6'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-4'/%3E%3Cpath d='M7 12c-1.5 0-4.5 1.5-5 3 3.5 1.5 6 1 6 1-1.5 1.5-2 3.5-2 5 2.5 0 4.5-1.5 6-3 1.5 1.5 3.5 3 6 3 0-1.5-.5-3.5-2-5 0 0 2.5.5 6-1-.5-1.5-3.5-3-5-3 1.5-1 4-4 4-6-2.5 0-5.5 1.5-7 3 0-2.5-.5-5-2-7-1.5 2-2 4.5-2 7-1.5-1.5-4.5-3-7-3 0 2 2.5 5 4 6'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarchatbubble") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarchefhat") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21a1 1 0 0 0 1-1v-5.35c0-.457.316-.844.727-1.041a4 4 0 0 0-2.134-7.589 5 5 0 0 0-9.186 0 4 4 0 0 0-2.134 7.588c.411.198.727.585.727 1.041V20a1 1 0 0 0 1 1Z'/%3E%3Cpath d='M6 17h12'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21a1 1 0 0 0 1-1v-5.35c0-.457.316-.844.727-1.041a4 4 0 0 0-2.134-7.589 5 5 0 0 0-9.186 0 4 4 0 0 0-2.134 7.588c.411.198.727.585.727 1.041V20a1 1 0 0 0 1 1Z'/%3E%3Cpath d='M6 17h12'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarcircle") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
border-radius: 50% !important;
transition: 0.3s linear ease-in-out;
}
}
if (avatarstyles=="avatarcloud") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.762 4.29a6.51 6.51 0 0 0-5.669 3.332 3.571 3.571 0 0 0-1.558-.36 3.571 3.571 0 0 0-3.516 3A4.918 4.918 0 0 0 0 14.796a4.918 4.918 0 0 0 4.92 4.914 4.93 4.93 0 0 0 .617-.045h14.42c2.305-.272 4.041-2.258 4.043-4.589v-.009a4.594 4.594 0 0 0-3.727-4.508 6.51 6.51 0 0 0-6.511-6.27z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.762 4.29a6.51 6.51 0 0 0-5.669 3.332 3.571 3.571 0 0 0-1.558-.36 3.571 3.571 0 0 0-3.516 3A4.918 4.918 0 0 0 0 14.796a4.918 4.918 0 0 0 4.92 4.914 4.93 4.93 0 0 0 .617-.045h14.42c2.305-.272 4.041-2.258 4.043-4.589v-.009a4.594 4.594 0 0 0-3.727-4.508 6.51 6.51 0 0 0-6.511-6.27z'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarcog") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarcrystal") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.964 15.266l-8.687 8.669c-.034.035-.086.052-.121.035L3.29 20.79c-.052-.017-.087-.052-.087-.086L.007 8.856c-.018-.053 0-.087.035-.122L8.728.065c.035-.035.087-.052.121-.035l11.866 3.18c.052.017.087.052.087.086l3.18 11.848c.034.053.016.087-.018.122'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.964 15.266l-8.687 8.669c-.034.035-.086.052-.121.035L3.29 20.79c-.052-.017-.087-.052-.087-.086L.007 8.856c-.018-.053 0-.087.035-.122L8.728.065c.035-.035.087-.052.121-.035l11.866 3.18c.052.017.087.052.087.086l3.18 11.848c.034.053.016.087-.018.122'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatardevil") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 512 512' version='1.1' fill='currentColor' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M501.966 49.426c-16.928 16.928-36.504 29.582-99.1764 50.7557 14.607 16.299 26.889 34.19 43.102 62.5834C494.0646 111.1761 509.933 73.965 512 38.484 508.837 42.236 505.501 45.891 501.966 49.426z'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M10.034 49.427C6.5 45.891 3.163 42.236 0 38.485c2.066 35.481 12.317 70.571 48.6764 142.886 14.3674-25.3717 27.0445-46.5147 43.9473-71.8863C46.538 79.009 26.961 66.353 10.034 49.427z'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M256.001 37.549C135.353 37.549 37.549 135.353 37.549 256s97.804 218.451 218.451 218.451c120.648 0 218.451-97.804 218.451-218.451S376.648 37.549 256.001 37.549'/%3E%3C/g%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 512 512' version='1.1' fill='currentColor' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M501.966 49.426c-16.928 16.928-36.504 29.582-99.1764 50.7557 14.607 16.299 26.889 34.19 43.102 62.5834C494.0646 111.1761 509.933 73.965 512 38.484 508.837 42.236 505.501 45.891 501.966 49.426z'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M10.034 49.427C6.5 45.891 3.163 42.236 0 38.485c2.066 35.481 12.317 70.571 48.6764 142.886 14.3674-25.3717 27.0445-46.5147 43.9473-71.8863C46.538 79.009 26.961 66.353 10.034 49.427z'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M256.001 37.549C135.353 37.549 37.549 135.353 37.549 256s97.804 218.451 218.451 218.451c120.648 0 218.451-97.804 218.451-218.451S376.648 37.549 256.001 37.549'/%3E%3C/g%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatargem") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l4 6-10 13L2 9Z'/%3E%3Cpath d='M11 3 8 9l4 13 4-13-3-6'/%3E%3Cpath d='M2 9h20'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l4 6-10 13L2 9Z'/%3E%3Cpath d='M11 3 8 9l4 13 4-13-3-6'/%3E%3Cpath d='M2 9h20'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarghost") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.058 19.93c-1.01-2.29-1.185-4.228-1.212-4.99V8.67C20.846 3.882 16.886 0 12 0S3.15 3.882 3.15 8.671v6.36c-.037.82-.236 2.7-1.207 4.899-1.306 2.955-.226 2.603.742 2.36.968-.242 3.13-1.192 3.805-.022.675 1.17 1.238 2.184 2.814 1.523 1.576-.663 2.318-.883 2.543-.883h.306c.225 0 .968.22 2.543.882 1.576.662 2.14-.353 2.814-1.522.676-1.17 2.837-.22 3.805.022.968.243 2.048.595.743-2.36'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.058 19.93c-1.01-2.29-1.185-4.228-1.212-4.99V8.67C20.846 3.882 16.886 0 12 0S3.15 3.882 3.15 8.671v6.36c-.037.82-.236 2.7-1.207 4.899-1.306 2.955-.226 2.603.742 2.36.968-.242 3.13-1.192 3.805-.022.675 1.17 1.238 2.184 2.814 1.523 1.576-.663 2.318-.883 2.543-.883h.306c.225 0 .968.22 2.543.882 1.576.662 2.14-.353 2.814-1.522.676-1.17 2.837-.22 3.805.022.968.243 2.048.595.743-2.36'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatargift") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13'/%3E%3Cpath d='M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/%3E%3Cpath d='M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13'/%3E%3Cpath d='M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/%3E%3Cpath d='M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarheart") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avataroctagon") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarovalh") {
.css-213aa4 > div:nth-of-type(2),
.css-na0gqx > div:nth-of-type(2),
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
aspect-ratio: 13 / 9;
border-radius: 50% !important;
height: auto;
width: 100%;
object-fit: cover;
transition: 0.3s linear ease-in-out;
}
.css-1dhayxc::after,
.css-yhhl9h::before {
aspect-ratio: 13 / 9;
border-radius: 50% !important;
max-height: 100%;
width: auto;
object-fit: cover;
transition: 0.3s linear ease-in-out;
}
}
if (avatarstyles=="avatarovalv") {
.css-213aa4 > div:nth-of-type(2),
.css-na0gqx > div:nth-of-type(2),
.css-213aa4 > div:nth-of-type(2) > div,
.css-na0gqx > div:nth-of-type(2) > div,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
border-radius: 50% !important;
min-height: calc(100vh - 60px - 71px - 1em);
max-width: avatarsize;
min-width: avatarsize;
object-fit: cover;
transition: 0.3s linear ease-in-out;
}
.css-1dhayxc::after,
.css-yhhl9h::before {
aspect-ratio: 9 / 13;
border-radius: 50% !important;
height: auto;
max-width: 100%;
object-fit: cover;
transition: 0.3s linear ease-in-out;
}
}
if (avatarstyles=="avatarpentagon") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.83 2.38a2 2 0 0 1 2.34 0l8 5.74a2 2 0 0 1 .73 2.25l-3.04 9.26a2 2 0 0 1-1.9 1.37H7.04a2 2 0 0 1-1.9-1.37L2.1 10.37a2 2 0 0 1 .73-2.25z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.83 2.38a2 2 0 0 1 2.34 0l8 5.74a2 2 0 0 1 .73 2.25l-3.04 9.26a2 2 0 0 1-1.9 1.37H7.04a2 2 0 0 1-1.9-1.37L2.1 10.37a2 2 0 0 1 .73-2.25z'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarrabbit") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.872 21.356c.077.195.682 1.646 1.685 2.156 1.075.547 1.613.406 1.613.406s-.914-3.384-.108-6.076c.807-2.691 1.479-2.933 1.479-2.933s1.478.591 2.446 0c.968-.591 1.264-1.747 1.264-1.747s-.672-2.474-1.264-3.442c-.591-.967-1.227-1.48-2.016-1.828a235.34 235.34 0 0 0-1.508-.655 11.275 11.275 0 0 0-1.003-3.198C16.237 1.531 14.678 0 14.678 0s-.815.7-1.025 2.032c.56.497 1.462 1.45 2.258 2.42.4.485.906 1.227 1.31 1.846a26.053 26.053 0 0 0-2.6-2.626c-1.828-1.586-3.63-2.823-3.63-2.823s-1.29 2.016.243 4.785c1.048 1.778 3.704 3.31 3.704 3.31s-2.736.134-3.704.346c-.968.213-2.043.592-3.253 1.398-1.21.807-2.01 1.647-3.011 3.011-1 1.365-1.962 3.71-1.962 3.71s-.135-.188-1.049-.188c-.914 0-1.21.188-1.21.188s.027 2.312.592 3.441c.564 1.13 1.37 1.562 2.392 1.562.27-.002.834 0 .834 0s.699 1.1 1.129 1.369c.43.268 1.183.215 1.183.215h8.253s-.048-.619-.51-1.103c-.448-.466-.983-.608-1.117-.666a3.776 3.776 0 0 0-1.008-.167h-2.123s2.689-.095 4.274-1.936c.833-.967.914-2.15.833-2.742-.04-.292-.295-1.29-.752-1.882a5.905 5.905 0 0 0-1.183-1.129c-.516-.36-1.17-.642-1.909-.94 1.075.268 1.586.376 2.635 1.129 1.048.752 1.505 1.908 1.586 2.177.08.269.269.672.215 1.828-.108.968-.218 1.208-.484 1.72-.217.456-.427.742-.717 1.07Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.872 21.356c.077.195.682 1.646 1.685 2.156 1.075.547 1.613.406 1.613.406s-.914-3.384-.108-6.076c.807-2.691 1.479-2.933 1.479-2.933s1.478.591 2.446 0c.968-.591 1.264-1.747 1.264-1.747s-.672-2.474-1.264-3.442c-.591-.967-1.227-1.48-2.016-1.828a235.34 235.34 0 0 0-1.508-.655 11.275 11.275 0 0 0-1.003-3.198C16.237 1.531 14.678 0 14.678 0s-.815.7-1.025 2.032c.56.497 1.462 1.45 2.258 2.42.4.485.906 1.227 1.31 1.846a26.053 26.053 0 0 0-2.6-2.626c-1.828-1.586-3.63-2.823-3.63-2.823s-1.29 2.016.243 4.785c1.048 1.778 3.704 3.31 3.704 3.31s-2.736.134-3.704.346c-.968.213-2.043.592-3.253 1.398-1.21.807-2.01 1.647-3.011 3.011-1 1.365-1.962 3.71-1.962 3.71s-.135-.188-1.049-.188c-.914 0-1.21.188-1.21.188s.027 2.312.592 3.441c.564 1.13 1.37 1.562 2.392 1.562.27-.002.834 0 .834 0s.699 1.1 1.129 1.369c.43.268 1.183.215 1.183.215h8.253s-.048-.619-.51-1.103c-.448-.466-.983-.608-1.117-.666a3.776 3.776 0 0 0-1.008-.167h-2.123s2.689-.095 4.274-1.936c.833-.967.914-2.15.833-2.742-.04-.292-.295-1.29-.752-1.882a5.905 5.905 0 0 0-1.183-1.129c-.516-.36-1.17-.642-1.909-.94 1.075.268 1.586.376 2.635 1.129 1.048.752 1.505 1.908 1.586 2.177.08.269.269.672.215 1.828-.108.968-.218 1.208-.484 1.72-.217.456-.427.742-.717 1.07Z'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarratio") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='12' height='20' x='6' y='2' rx='2'/%3E%3Crect width='20' height='12' x='2' y='6' rx='2'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='12' height='20' x='6' y='2' rx='2'/%3E%3Crect width='20' height='12' x='2' y='6' rx='2'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarrectangle") {
.css-213aa4 > div:nth-of-type(2),
.css-na0gqx > div:nth-of-type(2),
.css-213aa4 > div:nth-of-type(2) > div,
.css-na0gqx > div:nth-of-type(2) > div {
aspect-ratio: 9 / 13;
height: fit-content;
max-height: calc(100vh - 60px - 71px - 1em);
padding-bottom: 0;
}
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
aspect-ratio: 9 / 13;
height: auto;
max-height: calc(100vh - 60px - 71px - 1em);
max-width: avatarsize;
object-fit: cover;
transition: 0.3s linear ease-in-out;
}
.css-1dhayxc::after,
.css-yhhl9h::before {
aspect-ratio: 9 / 13;
height: auto;
max-width: 100%;
object-fit: cover;
transition: 0.3s linear ease-in-out;
}
}
if (avatarstyles=="avatarrectanglebig") {
.css-213aa4 > div:nth-of-type(2),
.css-na0gqx > div:nth-of-type(2),
.css-213aa4 > div:nth-of-type(2) > div,
.css-na0gqx > div:nth-of-type(2) > div,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
min-height: calc(100vh - 60px - 71px - 1em);
max-width: avatarsize;
min-width: avatarsize;
object-fit: cover;
transition: 0.3s linear ease-in-out;
}
.css-1dhayxc::after,
.css-yhhl9h::before {
aspect-ratio: 9 / 13;
height: auto;
max-width: 100%;
object-fit: cover;
transition: 0.3s linear ease-in-out;
}
}
if (avatarstyles=="avatarshield") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarshipwheel") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 2v7.5'/%3E%3Cpath d='m19 5-5.23 5.23'/%3E%3Cpath d='M22 12h-7.5'/%3E%3Cpath d='m19 19-5.23-5.23'/%3E%3Cpath d='M12 14.5V22'/%3E%3Cpath d='M10.23 13.77 5 19'/%3E%3Cpath d='M9.5 12H2'/%3E%3Cpath d='M10.23 10.23 5 5'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 2v7.5'/%3E%3Cpath d='m19 5-5.23 5.23'/%3E%3Cpath d='M22 12h-7.5'/%3E%3Cpath d='m19 19-5.23-5.23'/%3E%3Cpath d='M12 14.5V22'/%3E%3Cpath d='M10.23 13.77 5 19'/%3E%3Cpath d='M9.5 12H2'/%3E%3Cpath d='M10.23 10.23 5 5'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarshirt") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarslime") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2.862c-6.617 0-12 5.383-12 12 0 1.964.49 3.406 1.5 4.408 1.706 1.696 4.619 1.868 8.05 1.868.43 0 .87-.002 1.315-.005a217.6 217.6 0 012.765 0c3.792.024 7.066.044 8.88-1.758C23.511 18.378 24 16.9 24 14.862c0-6.617-5.383-12-12-12'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2.862c-6.617 0-12 5.383-12 12 0 1.964.49 3.406 1.5 4.408 1.706 1.696 4.619 1.868 8.05 1.868.43 0 .87-.002 1.315-.005a217.6 217.6 0 012.765 0c3.792.024 7.066.044 8.88-1.758C23.511 18.378 24 16.9 24 14.862c0-6.617-5.383-12-12-12'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarsmartphone") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='20' x='5' y='2' rx='2' ry='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='20' x='5' y='2' rx='2' ry='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarsquircle") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c7.2 0 9 1.8 9 9s-1.8 9-9 9-9-1.8-9-9 1.8-9 9-9'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c7.2 0 9 1.8 9 9s-1.8 9-9 9-9-1.8-9-9 1.8-9 9-9'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarstar") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatartablet") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2' ry='2'/%3E%3Cline x1='12' x2='12.01' y1='18' y2='18'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2' ry='2'/%3E%3Cline x1='12' x2='12.01' y1='18' y2='18'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatartreedeciduous") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 19a4 4 0 0 1-2.24-7.32A3.5 3.5 0 0 1 9 6.03V6a3 3 0 1 1 6 0v.04a3.5 3.5 0 0 1 3.24 5.65A4 4 0 0 1 16 19Z'/%3E%3Cpath d='M12 19v3'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 19a4 4 0 0 1-2.24-7.32A3.5 3.5 0 0 1 9 6.03V6a3 3 0 1 1 6 0v.04a3.5 3.5 0 0 1 3.24 5.65A4 4 0 0 1 16 19Z'/%3E%3Cpath d='M12 19v3'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatartreepine") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m17 14 3 3.3a1 1 0 0 1-.7 1.7H4.7a1 1 0 0 1-.7-1.7L7 14h-.3a1 1 0 0 1-.7-1.7L9 9h-.2A1 1 0 0 1 8 7.3L12 3l4 4.3a1 1 0 0 1-.8 1.7H15l3 3.3a1 1 0 0 1-.7 1.7H17Z'/%3E%3Cpath d='M12 22v-3'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m17 14 3 3.3a1 1 0 0 1-.7 1.7H4.7a1 1 0 0 1-.7-1.7L7 14h-.3a1 1 0 0 1-.7-1.7L9 9h-.2A1 1 0 0 1 8 7.3L12 3l4 4.3a1 1 0 0 1-.8 1.7H15l3 3.3a1 1 0 0 1-.7 1.7H17Z'/%3E%3Cpath d='M12 22v-3'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatartriangle") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarvenetianmask") {
.css-1dhayxc::after,
.css-yhhl9h::before,
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 11c-1.5 0-2.5.5-3 2'/%3E%3Cpath d='M4 6a2 2 0 0 0-2 2v4a5 5 0 0 0 5 5 8 8 0 0 1 5 2 8 8 0 0 1 5-2 5 5 0 0 0 5-5V8a2 2 0 0 0-2-2h-3a8 8 0 0 0-5 2 8 8 0 0 0-5-2z'/%3E%3Cpath d='M6 11c1.5 0 2.5.5 3 2'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 11c-1.5 0-2.5.5-3 2'/%3E%3Cpath d='M4 6a2 2 0 0 0-2 2v4a5 5 0 0 0 5 5 8 8 0 0 1 5 2 8 8 0 0 1 5-2 5 5 0 0 0 5-5V8a2 2 0 0 0-2-2h-3a8 8 0 0 0-5 2 8 8 0 0 0-5-2z'/%3E%3Cpath d='M6 11c1.5 0 2.5.5 3 2'/%3E%3C/svg%3E");
}
}
/* Background */
.css-213aa4,
.css-na0gqx {
background: url(backgroundurl) backgroundcolor no-repeat 100% !important;
background-size: cover !important;
}
/* Bubbles background */
.css-yhhl9h > div:nth-of-type(1) > div:nth-of-type(2) {
background: url(bubblesbgurl) bubblesbgcolor !important;
background-size: cover;
}
/* Bubbles background for us */
.css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(2) {
background: url(bubblesbgurlforus) bubblesbgcolorforus !important;
background-size: cover;
}
/* Font color */
.css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div {
color: fontcolorforus;
}
.css-yhhl9h > div:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div {
color: fontcolor;
}
/* Gradient regenerate icon */
.css-yhhl9h > div:nth-of-type(2) > div > button img {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M10.587 4.066a.5.5 0 1 0-.496.868l1.547.884c-.825.104-1.625.353-2.354.735-.99.519-1.819 1.27-2.398 2.18A5.6 5.6 0 0 0 6 11.742a5.6 5.6 0 0 0 .886 3.008.5.5 0 1 0 .844-.536A4.6 4.6 0 0 1 7 11.742a4.6 4.6 0 0 1 .73-2.472c.48-.756 1.175-1.389 2.018-1.831a5.97 5.97 0 0 1 2.289-.657l-1.989 1.421a.5.5 0 1 0 .581.814l3.832-2.737-3.875-2.214z' fill='url(%23A)'/%3E%3Cpath d='M17.211 8.799a.5.5 0 1 0-.844.536 4.6 4.6 0 0 1 .73 2.472 4.6 4.6 0 0 1-.73 2.472c-.48.755-1.175 1.389-2.018 1.831a5.97 5.97 0 0 1-2.291.657l1.989-1.421a.5.5 0 0 0-.581-.814l-3.832 2.737 3.875 2.214a.5.5 0 1 0 .496-.868l-1.547-.884a6.95 6.95 0 0 0 2.356-.735c.99-.52 1.819-1.27 2.398-2.18a5.6 5.6 0 0 0 .886-3.008 5.6 5.6 0 0 0-.886-3.008z' fill='%23866af6'/%3E%3Cpath fill-rule='evenodd' d='M0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12zm12 11C5.925 23 1 18.075 1 12S5.925 1 12 1s11 4.925 11 11-4.925 11-11 11z' fill='url(%23A)'/%3E%3Ccircle cx='12' cy='12' r='11.5' stroke='url(%23B)'/%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3ClinearGradient id='B' x1='-9' y1='27.5' x2='23' y2='1' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.271' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") no-repeat;
filter: invert(avatarinvert);
height: 0;
padding-left: 36px;
padding-top: 36px;
width: 0;
}
.css-yhhl9h > div:nth-of-type(2):has(.chakra-spinner) {
[alt="regenerate"] {
display: none;
}
}
/* Recalled memories icon on right and bigger */
.css-yhhl9h:not(:has([aria-label="Create new scenario"])) > div:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > button[aria-label="show recalled memories"] {
right: -3.5em !important;
z-index: 1;
}
.css-yhhl9h:has([aria-label="Create new scenario"]) > div:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) button {
right: -8.5em !important;
z-index: 1;
}
.css-1dhayxc button svg,
.css-yhhl9h button svg {
height: 36px;
width: 36px;
}
.css-4qwruq:has([aria-label="Create new scenario"]) {
.css-1dhayxc,
.css-yhhl9h {
padding-top: 2em !important;
}
}
/* Shadow at top of chat */
if bgshadow {
.css-213aa4 > div:nth-of-type(3),
.css-na0gqx > div:nth-of-type(3) {
position: relative;
}
.css-213aa4 > div:nth-of-type(3)::before,
.css-na0gqx > div:nth-of-type(3)::before {
background: linear-gradient(to bottom, bgshadowcolor 0%, transparent 100%);
left: 0;
content: "";
height: 5em;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
}
}
@-moz-document url-prefix("https://kindroid.ai/groupchat/") {
/* ====================================================
Sidebar & System bubbles on group chat page
==================================================== */
/* ===== Sidebar ===== */
/* Group bar */
.css-1qpmsp4 > div > div:nth-of-type(1) {
flex-direction: column;
height: 0;
}
.css-1qpmsp4 > div > div:nth-of-type(1) > p {
color: var(--chakra-colors-primaryWhite);
font-family: var(--chakra-fonts-PoppinsBold);
font-size: 36px !important;
left: 4%;
line-height: 54px;
position: fixed;
top: .2em;
z-index: 9999;
}
[aria-label="group selfie"],
[aria-label="global journal entry"],
[aria-label="History mode and view favorited messages"],
[aria-label="group settings"] {
background: transparent;
height: 36px;
min-height: 36px;
min-width: 36px;
padding: .1em !important;
padding-inline-end: 0;
padding-inline-start: 0;
position: fixed;
right: .5em;
width: 36px;
z-index: 9999;
}
[aria-label="group selfie"] {
top: calc(60px + .5em);
}
[aria-label="global journal entry"] {
top: calc(60px + ((36px + 1.5em) * 1));
}
[aria-label="History mode and view favorited messages"] {
top: calc(60px + ((36px + 1.25em) * 2));
}
[aria-label="group settings"] {
top: calc(60px + ((36px + 1.15em) * 3));
}
[aria-label="group selfie"]:hover::before,
[aria-label="global journal entry"]:hover::before,
[aria-label="History mode and view favorited messages"]:hover::before,
[aria-label="group settings"]:hover::before {
background: 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%);
border-radius: 1em;
color: var(--chakra-colors-primaryWhite);
filter: invert(avatarinvert);
font-family: var(--fontfamily);
font-size: fontsize;
font-weight: normal;
line-height: 1.2;
padding: .5em;
position: absolute;
right: calc(36px + .7em) !important;
transition: 0.3s linear ease-in-out;
white-space: nowrap;
}
[aria-label="group selfie"]:hover::before {
content: "Group selfie";
}
[aria-label="global journal entry"]:hover::before {
content: "Global journal entry";
}
[aria-label="History mode and view favorited messages"]:hover::before {
content: "History mode and view favorited messages";
}
[aria-label="group settings"]:hover::before {
content: "Group settings";
}
.css-1qpmsp4 > div > div:nth-of-type(1) > button svg {
fill: var(--chakra-colors-secondaryWhite);;
height: 36px;
width: 36px;
}
if (systembubblesstyle=="systembubbleswide") || (systembubblesstyle=="systembubblesdark") {
.css-r6z5ec > .css-do4s31 > .css-94x4at {
padding: 0;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:before,
.css-r6z5ec > .css-do4s31 > .css-94x4at:hover::before {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
content: "";
}
/* Continue cut-off message */
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(1) {
order: 1;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(1)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z' fill='none' stroke='%23cbcbcb' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath d='M394.77 246.7l-114.45-69.14a10.78 10.78 0 00-16.32 9.31v53.32l-103.68-62.63a10.78 10.78 0 00-16.32 9.31v138.26a10.78 10.78 0 0016.32 9.31L264 271.81v53.32a10.78 10.78 0 0016.32 9.31l114.45-69.14a10.89 10.89 0 000-18.6z' fill='%23cbcbcb' stroke='none' stroke-miterlimit='10' stroke-width='32'/%3E%3C/svg%3E");
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(1):hover::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z' fill='none' stroke='url(%23A)' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath d='M394.77 246.7l-114.45-69.14a10.78 10.78 0 00-16.32 9.31v53.32l-103.68-62.63a10.78 10.78 0 00-16.32 9.31v138.26a10.78 10.78 0 0016.32 9.31L264 271.81v53.32a10.78 10.78 0 0016.32 9.31l114.45-69.14a10.89 10.89 0 000-18.6z' fill='url(%23A)' stroke='none' stroke-miterlimit='10' stroke-width='32'/%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
filter: invert(avatarinvert);
}
/* Chat Break */
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(2) {
order: 3;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(2)::before {
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z' fill='none' stroke='%23cbcbcb' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath fill='none' stroke='%23cbcbcb' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M320 320L192 192M192 320l128-128'/%3E%3C/svg%3E");
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(2):hover::before {
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z' fill='none' stroke='url(%23A)' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath fill='none' stroke='url(%23A)' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M320 320L192 192M192 320l128-128'/%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
filter: invert(avatarinvert);
}
/* Tweak AI message */
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(3) {
order: 2;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(3)::before {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h167.48' fill='none' stroke='%23cbcbcb' stroke-width='32' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M459.94 53.25a16.06 16.06 0 00-23.22-.56L424.35 65a8 8 0 000 11.31l11.34 11.32a8 8 0 0011.34 0l12.06-12c6.1-6.09 6.67-16.01.85-22.38zM399.34 90L218.82 270.2a9 9 0 00-2.31 3.93L208.16 299a3.91 3.91 0 004.86 4.86l24.85-8.35a9 9 0 003.93-2.31L422 112.66a9 9 0 000-12.66l-9.95-10a9 9 0 00-12.71 0z' fill='none' stroke='%23cbcbcb' stroke-width='32' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(3):hover::before {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h167.48' fill='none' stroke='url(%23A)' stroke-width='32' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M459.94 53.25a16.06 16.06 0 00-23.22-.56L424.35 65a8 8 0 000 11.31l11.34 11.32a8 8 0 0011.34 0l12.06-12c6.1-6.09 6.67-16.01.85-22.38zM399.34 90L218.82 270.2a9 9 0 00-2.31 3.93L208.16 299a3.91 3.91 0 004.86 4.86l24.85-8.35a9 9 0 003.93-2.31L422 112.66a9 9 0 000-12.66l-9.95-10a9 9 0 00-12.71 0z' fill='none' stroke='url(%23A)' stroke-width='32' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
filter: invert(avatarinvert);
}
}
if (systembubblesstyle=="systembubbleswide") {
.css-r6z5ec > .css-do4s31 {
align-items: center;
background-color: transparent;
border: none;
bottom: 81px;
color: var(--chakra-colors-secondaryWhite);
display: flex;
flex-direction: column;
font-size: fontsize;
gap: .5em;
justify-content: flex-end;
left: auto;
max-width: 36px;
min-width: 36px;
--menu-shadow: transparent;
opacity: 1 !important;
outline: 0;
outline-offset: 0;
position: fixed;
right: .5em;
transform: none !important;
transform-origin: unset;
visibility: visible !important;
z-index: unset;
}
/* Hide 3 dots */
.css-1y2ps2x {
display: none;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at {
background-color: transparent;
color: transparent;
height: 36px !important;
max-width: 36px !important;
position: relative;
transform: none !important;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:before,
.css-r6z5ec > .css-do4s31 > .css-94x4at:hover::before {
height: 36px !important;
max-width: 36px !important;
min-width: 36px !important;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:hover::after {
background: 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%);
border-radius: 1em;
bottom: unset !important;
color: var(--chakra-colors-primaryWhite);
filter: invert(avatarinvert);
font-family: var(--fontfamily);
font-size: fontsize;
font-weight: normal;
left: auto !important;
line-height: 1.2;
padding: .5em;
position: absolute;
right: calc(36px + .7em) !important;
transition: 0.3s linear ease-in-out;
white-space: nowrap;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(1):hover::after {
content: "Continue cut-off message";
transform: translateX(0%);
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(2):hover::after {
content: "Chat Break";
transform: translateX(0%) !important;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(3):hover::after {
content: "Tweak AI message";
transform: translateX(0%);
}
}
if (systembubblesstyle=="systembubblesdark") {
.css-do4s31 {
border-radius: .5em;
margin-left: -5%;
}
.css-do4s31,
.css-94x4at {
background-color: #161616;
border-color: #6C6C6C;
color: var(--chakra-colors-secondaryWhite);
font-family: var(--fontfamily);
font-size: fontsize;
line-height: 1.5;
margin-bottom: .5em;
padding: .5em 0 0 1em;
}
.css-do4s31 {
display: grid;
}
.css-r6z5ec,
.css-do4s31 {
margin-left: -14% !important;
margin-top: -65%;
}
.css-1y2ps2x:hover,
.css-do4s31 button:hover {
background: 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%);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
color: transparent;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:before,
.css-r6z5ec > .css-do4s31 > .css-94x4at:hover::before {
height: fontsize !important;
max-width: fontsize !important;
min-width: fontsize !important;
margin-right: .3em;
}
}
}
@-moz-document url-prefix("https://kindroid.ai/groupchat/") {
/* ==========================================================
Group chat page
========================================================== */
/* Wide mode */
.css-1qpmsp4 {
box-sizing: border-box;
max-height: 100vh;
max-width: 100vw;
position: relative;
}
/* ===== Chat box ===== */
.css-1qpmsp4 > div > div:nth-of-type(2) {
border-right: 1px solid #cbcbcb;
margin: 0 4em 71px 0;
max-width: 100%;
padding: 0 1em 0 1.5em;
width: 100%;
}
/* Adjust bubbles size depending on avatar size */
.css-1dhayxc > .css-fujl5p,
.css-1dhayxc > .css-116lnl0,
.css-yhhl9h > .css-fujl5p,
.css-yhhl9h > .css-116lnl0 {
max-width: calc(80% - var(--avatarchatgroupsize));
}
/* Modification of rounded corners for our bubbles */
.css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(2) {
border-radius: 1em .5em 1em 1em !important;
}
/* Modification of rounded corners for AI bubbles */
.css-1ulhpcc,
.css-yhhl9h > div:nth-of-type(2) > div:nth-of-type(2) {
border-radius: .5em 1em 1em 1em !important;
}
/* Vertically center bubbles */
.css-yhhl9h:last-child > div:nth-of-type(3) {
margin-top: auto;
}
/* ===== Textarea box ===== */
.css-1qxhwlw {
width: 100vw;
}
/* ===== Customizations ===== */
/* Vanilla avatar */
.css-yhhl9h > div:nth-of-type(1),
.css-yhhl9h > div:nth-of-type(1) > div,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
border-radius: 1em;
height: auto;
max-width: avatarchatgroupsize;
min-width: avatarchatgroupsize;
}
/* Avatar brightness, contrast, grayscale */
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
filter: brightness(avatarbrightness) contrast(avatarcontrast) grayscale(avatargrayscale) invert(avatarinvert) !important;
}
/* Avatar chat */
if avatarchat || avatarchoiceforus {
.css-213aa4 > div:nth-of-type(2) {
display: none;
height: 0;
transition: 0.3s linear ease-in-out;
width: 0;
}
.css-4qwruq:has([aria-label="Create new scenario"]) {
.css-1dhayxc,
.css-yhhl9h {
padding-top: 0 !important;
}
}
.css-1dhayxc::after {
background: url(avatarchoiceforusurl) center center / cover no-repeat;
border-radius: 1em;
content: "";
height: avatarchatgroupsize;
min-width: avatarchatgroupsize;
transition: 0.3s linear ease-in-out;
width: avatarchatgroupsize;
}
}
/* Avatar flip, rotate, zoom */
if (avatarflip=="avatarflipdefault") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
transform: rotate(avatarrotate) scale(avatarzoom);
}
}
if (avatarflip=="avatarfliphorizontally") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
transform: rotate(avatarrotate) scale(avatarzoom) scaleX(-1) !important;
}
}
if (avatarflip=="avatarflipvertically") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
transform: rotate(avatarrotate) scale(avatarzoom) scaleY(-1) !important;
}
}
if (avatarflip=="avatarfliphorizontallyvertically") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
transform: rotate(avatarrotate) scale(calc(var(--avatarzoom) * -1)) !important;
}
}
/* Avatar hoverzoom */
if avatarhoverzoom {
.css-yhhl9h > div:nth-of-type(1) > div > img:hover,
.css-yhhl9h > div:nth-of-type(1) > div > video:hover {
aspect-ratio: 1 / 1;
border-radius: 0 !important;
max-height: 100vh !important;
min-height: 100vh !important;
left: 0;
position: fixed !important;
top: 0 !important;
min-width: fit-content;
width: auto !important;
z-index: 9999 !important;
}
}
/* Avatar mix blend mode */
if (avatarmixblend=="avatarmixdefault") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video:active {
mix-blend-mode: normal;
}
}
if (avatarmixblend=="avatarmixcolor") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video:active {
mix-blend-mode: color !important;
}
}
if (avatarmixblend=="avatarmixcolorburn") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video:active {
mix-blend-mode: color-burn !important;
}
}
if (avatarmixblend=="avatarmixcolordodge") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video:active {
mix-blend-mode: color-dodge !important;
}
}
if (avatarmixblend=="avatarmixdarken") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video:active {
mix-blend-mode: darken !important;
}
}
if (avatarmixblend=="avatarmixdifference") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video:active {
mix-blend-mode: difference !important;
}
}
if (avatarmixblend=="avatarmixexclusion") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video:active {
mix-blend-mode: exclusion !important;
}
}
if (avatarmixblend=="avatarmixhardlight") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video:active {
mix-blend-mode: hard-light !important;
}
}
if (avatarmixblend=="avatarmixhue") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video:active {
mix-blend-mode: hue !important;
}
}
if (avatarmixblend=="avatarmixlighten") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video:active {
mix-blend-mode: lighten !important;
}
}
if (avatarmixblend=="avatarmixluminosity") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video:active {
mix-blend-mode: luminosity !important;
}
}
if (avatarmixblend=="avatarmixmultiply") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video:active {
mix-blend-mode: multiply !important;
}
}
if (avatarmixblend=="avatarmixoverlay") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video:active {
mix-blend-mode: overlay !important;
}
}
if (avatarmixblend=="avatarmixpluslighter") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video:active {
mix-blend-mode: plus-lighter !important;
}
}
if (avatarmixblend=="avatarmixsaturation") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video:active {
mix-blend-mode: saturation !important;
}
}
if (avatarmixblend=="avatarmixscreen") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video:active {
mix-blend-mode: screen !important;
}
}
if (avatarmixblend=="avatarmixsoftlight") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video:active {
mix-blend-mode: soft-light !important;
}
}
/* Avatar opacity */
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video:active {
opacity: avataropacity !important;
}
/* Avatar styles */
if (avatarstyles=="avataralien") || (avatarstyles=="avatarapple") || (avatarstyles=="avataratom") || (avatarstyles=="avatarbookmark") || (avatarstyles=="avatarcannabis") || (avatarstyles=="avatarchatbubble") || (avatarstyles=="avatarchefhat") || (avatarstyles=="avatarcloud") || (avatarstyles=="avatarcog") || (avatarstyles=="avatarcrystal") || (avatarstyles=="avatardevil") || (avatarstyles=="avatargem") || (avatarstyles=="avatarghost") || (avatarstyles=="avatargift") || (avatarstyles=="avatarheart") || (avatarstyles=="avataroctagon") || (avatarstyles=="avatarpentagon") || (avatarstyles=="avatarrabbit") || (avatarstyles=="avatarratio") || (avatarstyles=="avatarshield") || (avatarstyles=="avatarshipwheel") || (avatarstyles=="avatarshirt") || (avatarstyles=="avatarslime") || (avatarstyles=="avatarsmartphone") || (avatarstyles=="avatarsquircle") || (avatarstyles=="avatarstar") || (avatarstyles=="avatartablet") || (avatarstyles=="avatartreedeciduous") || (avatarstyles=="avatartreepine") || (avatarstyles=="avatartriangle") || (avatarstyles=="avatarvenetianmask") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: cover;
mask-size: cover;
max-height: 100%;
max-width: 100%;
object-fit: cover;
transition: 0.3s linear ease-in-out;
}
}
if (avatarstyles=="avatardefault") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
transition: 0.3s linear ease-in-out;
}
}
if (avatarstyles=="avataralien") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.382 9.4054c-.0649-.6486-.1297-1.3622-.2595-2.0108-.1297-.6487-.2594-1.2973-.5189-1.946-.1297-.3243-.2595-.6486-.3892-.908-.1297-.3244-.3243-.5838-.454-.9082-.1946-.2594-.3892-.5838-.5838-.8432-.1946-.2595-.454-.519-.7135-.7135-.454-.3892-.973-.7784-1.5568-1.1027-.5838-.3244-1.2324-.5838-1.881-.7135C13.3765.0649 12.7278 0 12.0143 0c-.7135 0-1.3621.0649-2.0108.2595C9.355.3892 8.7712.6486 8.1874.973c-.6487.3243-1.1676.7135-1.6865 1.1675-.2595.1946-.454.454-.7135.7136l-.5838.7783c-.1297.3244-.3243.5838-.454.9081l-.3892.973c-.1946.6487-.3892 1.2973-.519 1.946-.1297.6486-.1946 1.2973-.2594 2.0108-.0649.7135 0 1.2973 0 1.946 0 .6486.0648 1.2972.1946 2.0107l.1946.973c.0648.3243.1946.6486.3243.973.454 1.2324 1.1676 2.4 1.881 3.5027.3893.5838.7785 1.1027 1.1676 1.6216.3892.519.7784 1.1027 1.2325 1.5568.1946.2594.454.454.7135.7135.2594.1946.519.3892.8432.5837.2595.1946.5838.3244.9081.4541.1298.0649.3244.1297.4541.1297.1946 0 .3243.0649.519.0649.1945 0 .3242 0 .5188-.0649.1946 0 .3244-.0648.454-.1297.3244-.1297.6487-.2595.9082-.454.2595-.1946.5838-.3892.8432-.5838.2595-.1946.519-.454.7136-.7135.454-.519.8432-1.0379 1.2324-1.5568.3892-.519.7784-1.1027 1.1676-1.6216.7135-1.1027 1.427-2.2703 1.881-3.5027.1298-.3244.2595-.6487.3244-.973.0648-.3243.1946-.6486.1946-.973.1297-.6486.1945-1.2973.1945-2.0108 0-.6486 0-1.3621-.0648-2.0108'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.382 9.4054c-.0649-.6486-.1297-1.3622-.2595-2.0108-.1297-.6487-.2594-1.2973-.5189-1.946-.1297-.3243-.2595-.6486-.3892-.908-.1297-.3244-.3243-.5838-.454-.9082-.1946-.2594-.3892-.5838-.5838-.8432-.1946-.2595-.454-.519-.7135-.7135-.454-.3892-.973-.7784-1.5568-1.1027-.5838-.3244-1.2324-.5838-1.881-.7135C13.3765.0649 12.7278 0 12.0143 0c-.7135 0-1.3621.0649-2.0108.2595C9.355.3892 8.7712.6486 8.1874.973c-.6487.3243-1.1676.7135-1.6865 1.1675-.2595.1946-.454.454-.7135.7136l-.5838.7783c-.1297.3244-.3243.5838-.454.9081l-.3892.973c-.1946.6487-.3892 1.2973-.519 1.946-.1297.6486-.1946 1.2973-.2594 2.0108-.0649.7135 0 1.2973 0 1.946 0 .6486.0648 1.2972.1946 2.0107l.1946.973c.0648.3243.1946.6486.3243.973.454 1.2324 1.1676 2.4 1.881 3.5027.3893.5838.7785 1.1027 1.1676 1.6216.3892.519.7784 1.1027 1.2325 1.5568.1946.2594.454.454.7135.7135.2594.1946.519.3892.8432.5837.2595.1946.5838.3244.9081.4541.1298.0649.3244.1297.4541.1297.1946 0 .3243.0649.519.0649.1945 0 .3242 0 .5188-.0649.1946 0 .3244-.0648.454-.1297.3244-.1297.6487-.2595.9082-.454.2595-.1946.5838-.3892.8432-.5838.2595-.1946.519-.454.7136-.7135.454-.519.8432-1.0379 1.2324-1.5568.3892-.519.7784-1.1027 1.1676-1.6216.7135-1.1027 1.427-2.2703 1.881-3.5027.1298-.3244.2595-.6487.3244-.973.0648-.3243.1946-.6486.1946-.973.1297-.6486.1945-1.2973.1945-2.0108 0-.6486 0-1.3621-.0648-2.0108'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarapple") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06Z'/%3E%3Cpath d='M10 2c1 .5 2 2 2 5'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06Z'/%3E%3Cpath d='M10 2c1 .5 2 2 2 5'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avataratom") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Cpath d='M20.2 20.2c2.04-2.03.02-7.36-4.5-11.9-4.54-4.52-9.87-6.54-11.9-4.5-2.04 2.03-.02 7.36 4.5 11.9 4.54 4.52 9.87 6.54 11.9 4.5Z'/%3E%3Cpath d='M15.7 15.7c4.52-4.54 6.54-9.87 4.5-11.9-2.03-2.04-7.36-.02-11.9 4.5-4.52 4.54-6.54 9.87-4.5 11.9 2.03 2.04 7.36.02 11.9-4.5Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Cpath d='M20.2 20.2c2.04-2.03.02-7.36-4.5-11.9-4.54-4.52-9.87-6.54-11.9-4.5-2.04 2.03-.02 7.36 4.5 11.9 4.54 4.52 9.87 6.54 11.9 4.5Z'/%3E%3Cpath d='M15.7 15.7c4.52-4.54 6.54-9.87 4.5-11.9-2.03-2.04-7.36-.02-11.9 4.5-4.52 4.54-6.54 9.87-4.5 11.9 2.03 2.04 7.36.02 11.9-4.5Z'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarbookmark") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarcannabis") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-4'/%3E%3Cpath d='M7 12c-1.5 0-4.5 1.5-5 3 3.5 1.5 6 1 6 1-1.5 1.5-2 3.5-2 5 2.5 0 4.5-1.5 6-3 1.5 1.5 3.5 3 6 3 0-1.5-.5-3.5-2-5 0 0 2.5.5 6-1-.5-1.5-3.5-3-5-3 1.5-1 4-4 4-6-2.5 0-5.5 1.5-7 3 0-2.5-.5-5-2-7-1.5 2-2 4.5-2 7-1.5-1.5-4.5-3-7-3 0 2 2.5 5 4 6'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-4'/%3E%3Cpath d='M7 12c-1.5 0-4.5 1.5-5 3 3.5 1.5 6 1 6 1-1.5 1.5-2 3.5-2 5 2.5 0 4.5-1.5 6-3 1.5 1.5 3.5 3 6 3 0-1.5-.5-3.5-2-5 0 0 2.5.5 6-1-.5-1.5-3.5-3-5-3 1.5-1 4-4 4-6-2.5 0-5.5 1.5-7 3 0-2.5-.5-5-2-7-1.5 2-2 4.5-2 7-1.5-1.5-4.5-3-7-3 0 2 2.5 5 4 6'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarchatbubble") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarchefhat") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21a1 1 0 0 0 1-1v-5.35c0-.457.316-.844.727-1.041a4 4 0 0 0-2.134-7.589 5 5 0 0 0-9.186 0 4 4 0 0 0-2.134 7.588c.411.198.727.585.727 1.041V20a1 1 0 0 0 1 1Z'/%3E%3Cpath d='M6 17h12'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21a1 1 0 0 0 1-1v-5.35c0-.457.316-.844.727-1.041a4 4 0 0 0-2.134-7.589 5 5 0 0 0-9.186 0 4 4 0 0 0-2.134 7.588c.411.198.727.585.727 1.041V20a1 1 0 0 0 1 1Z'/%3E%3Cpath d='M6 17h12'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarcircle") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
border-radius: 50% !important;
transition: 0.3s linear ease-in-out;
}
}
if (avatarstyles=="avatarcloud") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.762 4.29a6.51 6.51 0 0 0-5.669 3.332 3.571 3.571 0 0 0-1.558-.36 3.571 3.571 0 0 0-3.516 3A4.918 4.918 0 0 0 0 14.796a4.918 4.918 0 0 0 4.92 4.914 4.93 4.93 0 0 0 .617-.045h14.42c2.305-.272 4.041-2.258 4.043-4.589v-.009a4.594 4.594 0 0 0-3.727-4.508 6.51 6.51 0 0 0-6.511-6.27z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.762 4.29a6.51 6.51 0 0 0-5.669 3.332 3.571 3.571 0 0 0-1.558-.36 3.571 3.571 0 0 0-3.516 3A4.918 4.918 0 0 0 0 14.796a4.918 4.918 0 0 0 4.92 4.914 4.93 4.93 0 0 0 .617-.045h14.42c2.305-.272 4.041-2.258 4.043-4.589v-.009a4.594 4.594 0 0 0-3.727-4.508 6.51 6.51 0 0 0-6.511-6.27z'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarcog") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarcrystal") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.964 15.266l-8.687 8.669c-.034.035-.086.052-.121.035L3.29 20.79c-.052-.017-.087-.052-.087-.086L.007 8.856c-.018-.053 0-.087.035-.122L8.728.065c.035-.035.087-.052.121-.035l11.866 3.18c.052.017.087.052.087.086l3.18 11.848c.034.053.016.087-.018.122'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.964 15.266l-8.687 8.669c-.034.035-.086.052-.121.035L3.29 20.79c-.052-.017-.087-.052-.087-.086L.007 8.856c-.018-.053 0-.087.035-.122L8.728.065c.035-.035.087-.052.121-.035l11.866 3.18c.052.017.087.052.087.086l3.18 11.848c.034.053.016.087-.018.122'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatardevil") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 512 512' version='1.1' fill='currentColor' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M501.966 49.426c-16.928 16.928-36.504 29.582-99.1764 50.7557 14.607 16.299 26.889 34.19 43.102 62.5834C494.0646 111.1761 509.933 73.965 512 38.484 508.837 42.236 505.501 45.891 501.966 49.426z'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M10.034 49.427C6.5 45.891 3.163 42.236 0 38.485c2.066 35.481 12.317 70.571 48.6764 142.886 14.3674-25.3717 27.0445-46.5147 43.9473-71.8863C46.538 79.009 26.961 66.353 10.034 49.427z'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M256.001 37.549C135.353 37.549 37.549 135.353 37.549 256s97.804 218.451 218.451 218.451c120.648 0 218.451-97.804 218.451-218.451S376.648 37.549 256.001 37.549'/%3E%3C/g%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 512 512' version='1.1' fill='currentColor' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M501.966 49.426c-16.928 16.928-36.504 29.582-99.1764 50.7557 14.607 16.299 26.889 34.19 43.102 62.5834C494.0646 111.1761 509.933 73.965 512 38.484 508.837 42.236 505.501 45.891 501.966 49.426z'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M10.034 49.427C6.5 45.891 3.163 42.236 0 38.485c2.066 35.481 12.317 70.571 48.6764 142.886 14.3674-25.3717 27.0445-46.5147 43.9473-71.8863C46.538 79.009 26.961 66.353 10.034 49.427z'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M256.001 37.549C135.353 37.549 37.549 135.353 37.549 256s97.804 218.451 218.451 218.451c120.648 0 218.451-97.804 218.451-218.451S376.648 37.549 256.001 37.549'/%3E%3C/g%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatargem") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l4 6-10 13L2 9Z'/%3E%3Cpath d='M11 3 8 9l4 13 4-13-3-6'/%3E%3Cpath d='M2 9h20'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l4 6-10 13L2 9Z'/%3E%3Cpath d='M11 3 8 9l4 13 4-13-3-6'/%3E%3Cpath d='M2 9h20'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarghost") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.058 19.93c-1.01-2.29-1.185-4.228-1.212-4.99V8.67C20.846 3.882 16.886 0 12 0S3.15 3.882 3.15 8.671v6.36c-.037.82-.236 2.7-1.207 4.899-1.306 2.955-.226 2.603.742 2.36.968-.242 3.13-1.192 3.805-.022.675 1.17 1.238 2.184 2.814 1.523 1.576-.663 2.318-.883 2.543-.883h.306c.225 0 .968.22 2.543.882 1.576.662 2.14-.353 2.814-1.522.676-1.17 2.837-.22 3.805.022.968.243 2.048.595.743-2.36'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.058 19.93c-1.01-2.29-1.185-4.228-1.212-4.99V8.67C20.846 3.882 16.886 0 12 0S3.15 3.882 3.15 8.671v6.36c-.037.82-.236 2.7-1.207 4.899-1.306 2.955-.226 2.603.742 2.36.968-.242 3.13-1.192 3.805-.022.675 1.17 1.238 2.184 2.814 1.523 1.576-.663 2.318-.883 2.543-.883h.306c.225 0 .968.22 2.543.882 1.576.662 2.14-.353 2.814-1.522.676-1.17 2.837-.22 3.805.022.968.243 2.048.595.743-2.36'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatargift") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13'/%3E%3Cpath d='M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/%3E%3Cpath d='M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13'/%3E%3Cpath d='M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/%3E%3Cpath d='M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarheart") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avataroctagon") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarovalh") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
aspect-ratio: 13 / 9;
border-radius: 50% !important;
max-height: 100%;
object-fit: cover;
transition: 0.3s linear ease-in-out;
width: auto;
}
}
if (avatarstyles=="avatarovalv") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
aspect-ratio: 9 / 13;
border-radius: 50% !important;
height: auto;
max-width: 100%;
object-fit: cover;
transition: 0.3s linear ease-in-out;
}
}
if (avatarstyles=="avatarpentagon") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.83 2.38a2 2 0 0 1 2.34 0l8 5.74a2 2 0 0 1 .73 2.25l-3.04 9.26a2 2 0 0 1-1.9 1.37H7.04a2 2 0 0 1-1.9-1.37L2.1 10.37a2 2 0 0 1 .73-2.25z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.83 2.38a2 2 0 0 1 2.34 0l8 5.74a2 2 0 0 1 .73 2.25l-3.04 9.26a2 2 0 0 1-1.9 1.37H7.04a2 2 0 0 1-1.9-1.37L2.1 10.37a2 2 0 0 1 .73-2.25z'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarrabbit") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.872 21.356c.077.195.682 1.646 1.685 2.156 1.075.547 1.613.406 1.613.406s-.914-3.384-.108-6.076c.807-2.691 1.479-2.933 1.479-2.933s1.478.591 2.446 0c.968-.591 1.264-1.747 1.264-1.747s-.672-2.474-1.264-3.442c-.591-.967-1.227-1.48-2.016-1.828a235.34 235.34 0 0 0-1.508-.655 11.275 11.275 0 0 0-1.003-3.198C16.237 1.531 14.678 0 14.678 0s-.815.7-1.025 2.032c.56.497 1.462 1.45 2.258 2.42.4.485.906 1.227 1.31 1.846a26.053 26.053 0 0 0-2.6-2.626c-1.828-1.586-3.63-2.823-3.63-2.823s-1.29 2.016.243 4.785c1.048 1.778 3.704 3.31 3.704 3.31s-2.736.134-3.704.346c-.968.213-2.043.592-3.253 1.398-1.21.807-2.01 1.647-3.011 3.011-1 1.365-1.962 3.71-1.962 3.71s-.135-.188-1.049-.188c-.914 0-1.21.188-1.21.188s.027 2.312.592 3.441c.564 1.13 1.37 1.562 2.392 1.562.27-.002.834 0 .834 0s.699 1.1 1.129 1.369c.43.268 1.183.215 1.183.215h8.253s-.048-.619-.51-1.103c-.448-.466-.983-.608-1.117-.666a3.776 3.776 0 0 0-1.008-.167h-2.123s2.689-.095 4.274-1.936c.833-.967.914-2.15.833-2.742-.04-.292-.295-1.29-.752-1.882a5.905 5.905 0 0 0-1.183-1.129c-.516-.36-1.17-.642-1.909-.94 1.075.268 1.586.376 2.635 1.129 1.048.752 1.505 1.908 1.586 2.177.08.269.269.672.215 1.828-.108.968-.218 1.208-.484 1.72-.217.456-.427.742-.717 1.07Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.872 21.356c.077.195.682 1.646 1.685 2.156 1.075.547 1.613.406 1.613.406s-.914-3.384-.108-6.076c.807-2.691 1.479-2.933 1.479-2.933s1.478.591 2.446 0c.968-.591 1.264-1.747 1.264-1.747s-.672-2.474-1.264-3.442c-.591-.967-1.227-1.48-2.016-1.828a235.34 235.34 0 0 0-1.508-.655 11.275 11.275 0 0 0-1.003-3.198C16.237 1.531 14.678 0 14.678 0s-.815.7-1.025 2.032c.56.497 1.462 1.45 2.258 2.42.4.485.906 1.227 1.31 1.846a26.053 26.053 0 0 0-2.6-2.626c-1.828-1.586-3.63-2.823-3.63-2.823s-1.29 2.016.243 4.785c1.048 1.778 3.704 3.31 3.704 3.31s-2.736.134-3.704.346c-.968.213-2.043.592-3.253 1.398-1.21.807-2.01 1.647-3.011 3.011-1 1.365-1.962 3.71-1.962 3.71s-.135-.188-1.049-.188c-.914 0-1.21.188-1.21.188s.027 2.312.592 3.441c.564 1.13 1.37 1.562 2.392 1.562.27-.002.834 0 .834 0s.699 1.1 1.129 1.369c.43.268 1.183.215 1.183.215h8.253s-.048-.619-.51-1.103c-.448-.466-.983-.608-1.117-.666a3.776 3.776 0 0 0-1.008-.167h-2.123s2.689-.095 4.274-1.936c.833-.967.914-2.15.833-2.742-.04-.292-.295-1.29-.752-1.882a5.905 5.905 0 0 0-1.183-1.129c-.516-.36-1.17-.642-1.909-.94 1.075.268 1.586.376 2.635 1.129 1.048.752 1.505 1.908 1.586 2.177.08.269.269.672.215 1.828-.108.968-.218 1.208-.484 1.72-.217.456-.427.742-.717 1.07Z'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarratio") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='12' height='20' x='6' y='2' rx='2'/%3E%3Crect width='20' height='12' x='2' y='6' rx='2'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='12' height='20' x='6' y='2' rx='2'/%3E%3Crect width='20' height='12' x='2' y='6' rx='2'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarrectangle") || (avatarstyles=="avatarrectanglebig") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
aspect-ratio: 9 / 13;
height: auto;
max-width: 100%;
object-fit: cover;
transition: 0.3s linear ease-in-out;
}
}
if (avatarstyles=="avatarshield") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarshipwheel") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 2v7.5'/%3E%3Cpath d='m19 5-5.23 5.23'/%3E%3Cpath d='M22 12h-7.5'/%3E%3Cpath d='m19 19-5.23-5.23'/%3E%3Cpath d='M12 14.5V22'/%3E%3Cpath d='M10.23 13.77 5 19'/%3E%3Cpath d='M9.5 12H2'/%3E%3Cpath d='M10.23 10.23 5 5'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 2v7.5'/%3E%3Cpath d='m19 5-5.23 5.23'/%3E%3Cpath d='M22 12h-7.5'/%3E%3Cpath d='m19 19-5.23-5.23'/%3E%3Cpath d='M12 14.5V22'/%3E%3Cpath d='M10.23 13.77 5 19'/%3E%3Cpath d='M9.5 12H2'/%3E%3Cpath d='M10.23 10.23 5 5'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarshirt") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarslime") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2.862c-6.617 0-12 5.383-12 12 0 1.964.49 3.406 1.5 4.408 1.706 1.696 4.619 1.868 8.05 1.868.43 0 .87-.002 1.315-.005a217.6 217.6 0 012.765 0c3.792.024 7.066.044 8.88-1.758C23.511 18.378 24 16.9 24 14.862c0-6.617-5.383-12-12-12'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2.862c-6.617 0-12 5.383-12 12 0 1.964.49 3.406 1.5 4.408 1.706 1.696 4.619 1.868 8.05 1.868.43 0 .87-.002 1.315-.005a217.6 217.6 0 012.765 0c3.792.024 7.066.044 8.88-1.758C23.511 18.378 24 16.9 24 14.862c0-6.617-5.383-12-12-12'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarsmartphone") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='20' x='5' y='2' rx='2' ry='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='20' x='5' y='2' rx='2' ry='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarsquircle") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c7.2 0 9 1.8 9 9s-1.8 9-9 9-9-1.8-9-9 1.8-9 9-9'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c7.2 0 9 1.8 9 9s-1.8 9-9 9-9-1.8-9-9 1.8-9 9-9'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarstar") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatartablet") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2' ry='2'/%3E%3Cline x1='12' x2='12.01' y1='18' y2='18'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2' ry='2'/%3E%3Cline x1='12' x2='12.01' y1='18' y2='18'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatartreedeciduous") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
height: 100%;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 19a4 4 0 0 1-2.24-7.32A3.5 3.5 0 0 1 9 6.03V6a3 3 0 1 1 6 0v.04a3.5 3.5 0 0 1 3.24 5.65A4 4 0 0 1 16 19Z'/%3E%3Cpath d='M12 19v3'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 19a4 4 0 0 1-2.24-7.32A3.5 3.5 0 0 1 9 6.03V6a3 3 0 1 1 6 0v.04a3.5 3.5 0 0 1 3.24 5.65A4 4 0 0 1 16 19Z'/%3E%3Cpath d='M12 19v3'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatartreepine") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m17 14 3 3.3a1 1 0 0 1-.7 1.7H4.7a1 1 0 0 1-.7-1.7L7 14h-.3a1 1 0 0 1-.7-1.7L9 9h-.2A1 1 0 0 1 8 7.3L12 3l4 4.3a1 1 0 0 1-.8 1.7H15l3 3.3a1 1 0 0 1-.7 1.7H17Z'/%3E%3Cpath d='M12 22v-3'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m17 14 3 3.3a1 1 0 0 1-.7 1.7H4.7a1 1 0 0 1-.7-1.7L7 14h-.3a1 1 0 0 1-.7-1.7L9 9h-.2A1 1 0 0 1 8 7.3L12 3l4 4.3a1 1 0 0 1-.8 1.7H15l3 3.3a1 1 0 0 1-.7 1.7H17Z'/%3E%3Cpath d='M12 22v-3'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatartriangle") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarvenetianmask") {
.css-1dhayxc::after,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 11c-1.5 0-2.5.5-3 2'/%3E%3Cpath d='M4 6a2 2 0 0 0-2 2v4a5 5 0 0 0 5 5 8 8 0 0 1 5 2 8 8 0 0 1 5-2 5 5 0 0 0 5-5V8a2 2 0 0 0-2-2h-3a8 8 0 0 0-5 2 8 8 0 0 0-5-2z'/%3E%3Cpath d='M6 11c1.5 0 2.5.5 3 2'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 11c-1.5 0-2.5.5-3 2'/%3E%3Cpath d='M4 6a2 2 0 0 0-2 2v4a5 5 0 0 0 5 5 8 8 0 0 1 5 2 8 8 0 0 1 5-2 5 5 0 0 0 5-5V8a2 2 0 0 0-2-2h-3a8 8 0 0 0-5 2 8 8 0 0 0-5-2z'/%3E%3Cpath d='M6 11c1.5 0 2.5.5 3 2'/%3E%3C/svg%3E");
}
}
/* Background */
.css-1qpmsp4 {
background: url(backgroundurl) backgroundcolor no-repeat 100% !important;
background-size: cover !important;
}
/* Bubbles background */
.css-yhhl9h > div:nth-of-type(2) > div:nth-of-type(2) {
background: url(bubblesbgurl) bubblesbgcolor !important;
background-size: cover;
}
/* Bubbles background for us */
.css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(2) {
background: url(bubblesbgurlforus) bubblesbgcolorforus !important;
background-size: cover;
}
/* Font color */
.css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div {
color: fontcolorforus;
}
.css-yhhl9h > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div {
color: fontcolor;
}
/* Gradient regenerate icon */
.css-yhhl9h > div:nth-of-type(3) > div > button img {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M10.587 4.066a.5.5 0 1 0-.496.868l1.547.884c-.825.104-1.625.353-2.354.735-.99.519-1.819 1.27-2.398 2.18A5.6 5.6 0 0 0 6 11.742a5.6 5.6 0 0 0 .886 3.008.5.5 0 1 0 .844-.536A4.6 4.6 0 0 1 7 11.742a4.6 4.6 0 0 1 .73-2.472c.48-.756 1.175-1.389 2.018-1.831a5.97 5.97 0 0 1 2.289-.657l-1.989 1.421a.5.5 0 1 0 .581.814l3.832-2.737-3.875-2.214z' fill='url(%23A)'/%3E%3Cpath d='M17.211 8.799a.5.5 0 1 0-.844.536 4.6 4.6 0 0 1 .73 2.472 4.6 4.6 0 0 1-.73 2.472c-.48.755-1.175 1.389-2.018 1.831a5.97 5.97 0 0 1-2.291.657l1.989-1.421a.5.5 0 0 0-.581-.814l-3.832 2.737 3.875 2.214a.5.5 0 1 0 .496-.868l-1.547-.884a6.95 6.95 0 0 0 2.356-.735c.99-.52 1.819-1.27 2.398-2.18a5.6 5.6 0 0 0 .886-3.008 5.6 5.6 0 0 0-.886-3.008z' fill='%23866af6'/%3E%3Cpath fill-rule='evenodd' d='M0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12zm12 11C5.925 23 1 18.075 1 12S5.925 1 12 1s11 4.925 11 11-4.925 11-11 11z' fill='url(%23A)'/%3E%3Ccircle cx='12' cy='12' r='11.5' stroke='url(%23B)'/%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3ClinearGradient id='B' x1='-9' y1='27.5' x2='23' y2='1' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.271' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") no-repeat;
filter: invert(avatarinvert);
height: 0;
padding-left: 36px;
padding-top: 36px;
width: 0;
}
.css-yhhl9h > div:nth-of-type(3) > div:has(.chakra-spinner) {
[alt="regenerate"] {
display: none;
}
}
/* Group context textarea */
textarea[aria-label="Group context textarea"] {
height: 300px;
}
/* Modification of Continue/Pause conversation button */
if (continueconv=="continueconvauto") {
/* Remove space between chat and textarea area */
.css-1bkilns:last-child {
gap: 0;
}
.css-b9bzmp {
padding-left: 60px;
}
.css-1qpmsp4 > div > div:nth-of-type(3),
.css-1qpmsp4 > div > div:nth-of-type(3) > div,
.css-1qpmsp4 > div > div:nth-of-type(3) > div button {
bottom: .75em;
height: 61px;
left: 0;
margin-left: 0;
max-width: 61px;
position: fixed;
text-indent: -9999px;
width: 61px;
z-index: 2;
}
.css-1qpmsp4 > div > div:nth-of-type(3) > div button.css-snc6k5::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z' fill='none' stroke='%23cbcbcb' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath d='M394.77 246.7l-114.45-69.14a10.78 10.78 0 00-16.32 9.31v53.32l-103.68-62.63a10.78 10.78 0 00-16.32 9.31v138.26a10.78 10.78 0 0016.32 9.31L264 271.81v53.32a10.78 10.78 0 0016.32 9.31l114.45-69.14a10.89 10.89 0 000-18.6z' fill='%23cbcbcb' stroke='none' stroke-miterlimit='10' stroke-width='32'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: cover;
content: "";
height: 48px;
width: 48px;
}
.css-1qpmsp4 > div > div:nth-of-type(3) > div button.css-snc6k5:hover::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z' fill='none' stroke='url(%23A)' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath d='M394.77 246.7l-114.45-69.14a10.78 10.78 0 00-16.32 9.31v53.32l-103.68-62.63a10.78 10.78 0 00-16.32 9.31v138.26a10.78 10.78 0 0016.32 9.31L264 271.81v53.32a10.78 10.78 0 0016.32 9.31l114.45-69.14a10.89 10.89 0 000-18.6z' fill='url(%23A)' stroke='none' stroke-miterlimit='10' stroke-width='32'/%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: cover;
content: "";
filter: invert(avatarinvert);
height: 48px;
width: 48px;
}
.css-1qpmsp4 > div > div:nth-of-type(3) > div button.css-snc6k5:hover::after {
background: 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-clip: text;
bottom: 72px;
color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
content: "Continue conversation";
filter: invert(avatarinvert);
font-size: 18px;
line-height: 18px;
left: 10px;
text-indent: 0;
position: fixed;
}
.css-1qpmsp4 > div > div:nth-of-type(3) > div button.css-wgxnqr::before {
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath d='M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z' fill='none' stroke='%23cbcbcb' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath fill='none' stroke='%23cbcbcb' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32' d='M208 192v128M304 192v128'/%3E%3C/svg%3E");
background-size: cover;
background-repeat: no-repeat;
content: "";
height: 48px;
width: 48px;
}
.css-1qpmsp4 > div > div:nth-of-type(3) > div button.css-wgxnqr:hover::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath d='M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z' fill='none' stroke='url(%23A)' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath fill='none' stroke='url(%23A)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32' d='M208 192v128M304 192v128'/%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
background-size: cover;
background-repeat: no-repeat;
content: "";
filter: invert(avatarinvert);
height: 48px;
width: 48px;
}
.css-1qpmsp4 > div > div:nth-of-type(3) > div button.css-wgxnqr:hover::after {
background: 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-clip: text;
bottom: 72px;
color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
content: "Pause conversation";
filter: invert(avatarinvert);
font-size: 18px;
line-height: 18px;
left: 10px;
text-indent: 0;
position: fixed;
}
}
if (continueconv=="continueconvmanual") || (continueconv=="continueconvmanualcenter") {
.css-nxakwj {
margin-bottom: 0 !important;
}
.css-1vt9rnf {
max-width: 100%;
padding-bottom: 2em;
width: 100%;
}
.css-qwhftf,
.css-qwhftf img {
height: auto;
width: 100px;
}
}
if (continueconv=="continueconvmanualcenter") {
.css-1vhh1fe {
justify-content: center;
}
}
/* Recalled memories icon on right and bigger */
.css-yhhl9h:not(:has([aria-label="Create new scenario"])) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > button[aria-label="show recalled memories"] {
right: -3.5em !important;
}
.css-yhhl9h:has([aria-label="Create new scenario"]) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) button {
right: -8.5em !important;
}
.css-1dhayxc button svg,
.css-yhhl9h button svg {
height: 36px;
width: 36px;
}
.css-4qwruq:has([aria-label="Create new scenario"]) {
.css-1dhayxc,
.css-yhhl9h {
padding-top: 2em !important;
}
}
/* Shadow at top of chat */
if bgshadow {
.css-1qpmsp4 > div {
position: relative;
}
.css-1qpmsp4 > div::before {
background: linear-gradient(to bottom, bgshadowcolor, transparent);
left: calc(var(--avatarchatgroupsize) + 1.5em) ;
content: "";
height: 5em;
position: absolute;
right: calc(36px + 1em);
top: 0;
z-index: 10;
}
}
/* Edit group chat settings */
.css-zys56m > div > div > .css-1wy8ffp {
justify-content: space-evenly;
}
/* Long term memory controls */
.css-zys56m > div > div > div:nth-of-type(6) > div > div > button > p > svg {
display: none;
}
.css-zys56m > div > div > div:nth-of-type(6) > div > div > div {
display: block !important;
height: auto !important;
opacity: 1 !important;
}
/* Shared memory with individual chats */
.css-zys56m > div > div > div:nth-of-type(7) > div > div > button > p > svg {
display: none;
}
.css-zys56m > div > div > div:nth-of-type(7) > div > div > div {
display: block !important;
height: auto !important;
opacity: 1 !important;
}
/* Tied user persona */
.css-zys56m > div > div > div:nth-of-type(8) {
width: 100%;
}
.css-zys56m > div > div > div:nth-of-type(8) > div > button > p > svg {
display: none;
}
.css-zys56m > div > div > div:nth-of-type(8) > div > p {
font-size: fontsize;
line-height: 1.5;
}
.css-zys56m > div > div > div:nth-of-type(8) > div > div {
display: block !important;
height: auto !important;
opacity: 1 !important;
}
.css-zys56m > div > div > div:nth-of-type(8) > div > div > div > div > button {
font-size: fontsize;
line-height: 1.5;
width: fit-content;
}
}
@-moz-document url-prefix("https://kindroid.ai/selfies") {
/* =======================================================
Selfies page
======================================================= */
/* Wide */
.css-ecz5ih {
max-width: 100vw;
}
/* Pin kins/groups */
.css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(1) > div > div:nth-of-type(2) > svg {
fill: var(--chakra-colors-secondaryWhite);
height: 2rem;
margin-top: .5em;
width: 2rem;
}
/* ===== Header with kin name ===== */
.css-ecz5ih > div:nth-of-type(1) {
padding: 1em;
}
/* Kin's name block */
.css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(3) {
height: 80px;
position: relative;
}
/* Kin's name */
.css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(3) > div {
left: 50%;
position: absolute;
text-align: center;
top: 10%;
transform: translate(-50%);
width: max-content;
}
/* Selfies credits and purchase selfie credits */
.css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(3) > div > div {
color: var(--chakra-colors-secondaryWhite);
}
.css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(3) > div > div,
.css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(3) > div > div > div {
font-size: fontsize;
line-height: 1.5;
margin: 0 auto;
text-align: center;
width: fit-content;
}
.css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(3) > div > div > div {
color: var(--chakra-colors-yellow-400);
filter: invert(avatarinvert);
}
.css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(3) > div > div > div u {
text-decoration: none;
}
.css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(3) > div > div > div::after,
.css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(3) > div > div > div::before {
color: var(--chakra-colors-yellow-400);
content: " $ ";
}
.css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(3) > div > div > div:hover,
.css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(3) > div > div > div:hover::after,
.css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(3) > div > div > div:hover::before {
color: var(--chakra-colors-red);
filter: invert(avatarinvert);
}
/* Engine */
.css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(1) p::before {
color: var(--chakra-colors-secondaryWhite);
content: "Engine ";
font-size: fontsize;
line-height: 1.5;
}
.css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(1) p {
color: var(--chakra-colors-secondaryWhite);
font-size: fontsize;
line-height: 1.5;
padding-top: .5em;
}
/* Labels and date icons */
.css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(4) {
gap: 1em;
justify-content: flex-end;
margin-left: auto;
margin-top: auto;
width: fit-content;
}
/* Tags */
.css-1lemfya {
display: flex;
justify-content: flex-end;
}
[aria-label="Add tag"] {
font-size: 0;
order: 1;
}
[aria-label="Add tag"]::before {
border-radius: var(--chakra-radii-full);
color: var(--ion-color-success);
content: "+ Add tag";
font-family: var(--fontfamily);
font-size: fontsize;
font-weight: var(--chakra-fontWeights-semibold);
line-height: 18px;
margin-left: var(--chakra-space-1);
opacity: 1;
padding: var(--chakra-space-2) var(--chakra-space-3);
}
[aria-label="Filter for no tags"] {
font-size: 0;
opacity: 1;
order: 2;
}
[aria-label="Filter for no tags"]::before {
background: var(--chakra-colors-gray);
border-radius: var(--chakra-radii-full);
color: var(--chakra-colors-white);
content: "🚫 Untagged\00a0";
font-family: var(--fontfamily);
font-size: fontsize;
font-weight: var(--chakra-fontWeights-semibold);
line-height: 18px;
margin-right: var(--chakra-space-1);
opacity: 1;
padding: var(--chakra-space-2) var(--chakra-space-3);
}
[aria-label="Filter for no tags"]:hover {
text-decoration: none;
}
.css-1lemfya > div > div > span {
order: 3;
}
.css-1lemfya > div > div > span > span {
font-size: fontsize;
}
[aria-label="Manage tag"] {
color: var(--chakra-colors-white);
font-size: fontsize;
opacity: 1;
padding-bottom: .2em;
}
/* History */
.css-m598ao {
align-items: center;
display: flex;
gap: 1em;
flex-wrap: wrap;
justify-content: end;
}
.css-m598ao > p {
margin-bottom: 0;
}
.css-m598ao .react-datepicker__tab-loop {
flex-basis: 100%;
width: 100%;
}
.css-m598ao .react-datepicker-popper:not(svg) {
display: flex;
justify-content: end;
position: static !important;
transform: none !important;
}
.css-m598ao .react-datepicker-popper > svg {
bottom: calc(100% - 55px) !important;
left: auto !important;
right: 5.5%;
}
/* Request selfie */
.css-ecz5ih:has(form) {
.css-poz1rt {
display: none
}
}
.css-105olw3 {
max-height: calc(100vh - 60px);
overflow: hidden;
padding: 2em;
position: relative;
width: 100%;
}
/* Split if need */
body:has(.css-1wmhst1) {
.css-105olw3 > div,
.css-105olw3 > p {
max-width: 50%;
}
}
.css-105olw3 > div,
.css-105olw3 > p {
font-size: fontsize;
line-height: 1.5;
}
/* Advanced */
.css-1v3caum > div > button p {
font-size: calc(var(--fontsize) + .2rem) !important;
}
.css-1v3caum > div > button svg {
display: none;
}
.css-1v3caum > div > div {
display: block !important;
height: auto !important;
opacity: 1 !important;
}
.css-105olw3 input[placeholder="Enter seed"] {
margin-left: .5em;
max-width: 99%;
}
/* Additional controls */
.css-105olw3 > div:nth-of-type(2):not(.css-1v3caum,.chakra-accordion.css-0) {
margin-left: 27%;
}
.css-105olw3 > div:nth-of-type(2) > div > button > p {
font-size: 22px;
}
.css-105olw3 > div:nth-of-type(2) > div > button > p > svg {
display: none;
}
.css-105olw3 > div:nth-of-type(2) > div > div {
display: block !important;
height: auto !important;
opacity: 1 !important;
}
.css-6arfae,
.css-1521j8e {
font-size: fontsize;
}
/* Pose/Style reference */
.css-105olw3 > .css-1wmhst1 {
display: flex;
flex-direction: column;
margin-left: auto;
position: absolute;
top: 0;
max-width: 25% !important;
}
.css-105olw3 > div:nth-of-type(3) {
right: 0;
}
.css-1wmhst1 > .css-r4izcz {
display: flex;
justify-content: center;
width: 400px;
}
.css-105olw3 > .css-j0qw52 {
position: absolute;
right: 1em;
top: 500px;
min-width: 46%;
}
/* Request selfie avatar settings */
.css-de3hrx,
.css-dfpqc0,
.css-79elbk > img:not(.css-z9m7im,.css-1b8e0hb):hover,
.css-dfpqc0 > img:hover {
height: auto !important;
}
.css-1jcj2pk {
color: white;
}
/* Enhance prompt */
.css-105olw3 [aria-label="Enhance prompt"] {
top: 50%;
transform: translateY(-50%);
}
/* Enhance prompt modal */
body:not(:has([aria-label="Swap 1 and 2"])) {
.css-yqn6dm .css-5prrkc {
font-size: fontsize;
line-height: 1.5;
}
/* Split */
.css-yqn6dm > div > div > p:nth-of-type(3),
.css-yqn6dm > div > div > p:nth-of-type(4),
.css-yqn6dm > div > div > div:nth-of-type(1),
.css-yqn6dm > div > div > div:nth-of-type(3) {
max-width: 43% !important;
width: 43% !important;
}
.css-yqn6dm > div > div > div:nth-of-type(2) {
flex-direction: column;
left: 44.5%;
position: absolute;
top: 9em;
width: 10%
}
/* Original prompt title */
.css-yqn6dm > div > div > p:nth-of-type(3) {
text-align: center;
}
/* Arrows */
.css-yqn6dm > div > div > div:nth-of-type(2) svg {
margin: 0;
padding: 0;
transform: rotate(-90deg) !important;
}
/* Enhance button */
.css-yqn6dm > div > div > div:nth-of-type(2) > button {
margin: 2em auto !important;
}
/* Enhanced prompt title */
.css-yqn6dm > div > div > p:nth-of-type(4) {
position: absolute;
right: 1.5em;
text-align: center;
top: 6em;
}
/* Enhanced prompt */
.css-yqn6dm > div > div > div:nth-of-type(3) {
position: absolute;
right: 1.5em;
top: 9em;
}
/* Adopt enhanced prompt */
[aria-label="Adopt enhanced prompt"] {
align-self: center;
width: fit-content;
}
}
/* Request group selfie modal */
body:has([aria-label="Swap 1 and 2"]),
body:has([aria-label="Swap 1 and 2"]):has([aria-label="Swap 2 and 3"]) {
/* + icons */
.css-yqn6dm > div > div > div:nth-of-type(2) > div:nth-of-type(1) > div > div > svg,
.css-yqn6dm > div > div > div:nth-of-type(2) > div:nth-of-type(2) > div > div > svg,
.css-yqn6dm > div > div > div:nth-of-type(2) > div:nth-of-type(3) > div > div > svg{
height: 4em;
width: 4em;
}
.css-yqn6dm > div > div > div:nth-of-type(2) > div:nth-of-type(1) > div > div >img,
.css-yqn6dm > div > div > div:nth-of-type(2) > div:nth-of-type(2) > div > div >img,
.css-yqn6dm > div > div > div:nth-of-type(2) > div:nth-of-type(3) > div > div >img {
border-radius: 1em;
}
}
body:has([aria-label="Swap 1 and 2"]) {
.css-yqn6dm .css-a2vsmm,
.css-yqn6dm .css-5prrkc,
.css-yqn6dm .css-1apmuvy {
font-size: fontsize;
line-height: 1.5;
}
/* Avatar selection */
.css-yqn6dm > div > div > div:nth-of-type(2) {
justify-content: center;
}
.css-yqn6dm > div > div > div:nth-of-type(2) > div {
max-width: 25%;
}
.css-yqn6dm > div > div > div:nth-of-type(2) > div > p {
text-align: center;
}
/* Swap icon */
.css-yqn6dm > div > div > div:nth-of-type(2) > button {
padding: 2em;
width: 10%;
}
.css-yqn6dm > div > div > div:nth-of-type(2) > button > svg {
height: 4em !important;
width: 4em !important;
}
/* Enhance overall prompt */
[aria-label="Enhance overall prompt"] {
top: 50%;
transform: translateY(-50%);
}
/* Additional controls */
.css-yqn6dm > div > div > div:nth-of-type(4) > div > button > p > svg {
display: none;
}
.css-yqn6dm > div > div > div:nth-of-type(4) > div > div {
display: block !important;
height: auto !important;
opacity: 1 !important;
}
.css-yqn6dm > div > div > div:nth-of-type(4) > div > div > div > div {
margin-bottom: 0 !important;
}
/* Request selfie button in modal */
[aria-label="Request selfie"] {
align-self: center;
width: fit-content;
}
}
/* Request selfie button */
.css-ae75s5 {
display: flex;
justify-content: center;
min-width: 100vw;
}
[aria-label="Submit selfie request"] {
align-self: center;
width: max-content;
}
/* ===== Photos Gallery ===== */
.css-ezgmhy {
gap: 1em !important;
height: auto;
justify-content: center;
padding-bottom: 1em;
padding-top: 1em;
min-width: 100vw !important;
z-index: 9998 !important;
}
.css-ezgmhy > div:nth-of-type(1) > div:nth-of-type(1) > button,
.css-ezgmhy > div:nth-of-type(1) > div:nth-of-type(2) > button {
font-size: 1.2rem;
margin-bottom: .5em;
}
.css-ezgmhy > div:nth-of-type(1) > div:nth-of-type(1) > button::before,
.css-ezgmhy > div:nth-of-type(1) > div:nth-of-type(2) > button::before {
content: "";
display: inline-block;
height: 1em;
margin-right: .3em;
vertical-align: middle;
width: 1em;
}
.css-ezgmhy > div:nth-of-type(1) > div:nth-of-type(1) > .css-17fx8iq::before {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Crect x='48' y='80' width='416' height='352' rx='48' ry='48' fill='none' stroke='white' stroke-linejoin='round' stroke-width='32'/%3E%3Ccircle cx='336' cy='176' r='32' fill='none' stroke='white' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath d='M304 335.79l-90.66-90.49a32 32 0 00-43.87-1.3L48 352M224 432l123.34-123.34a32 32 0 0143.11-2L464 368' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3C/svg%3E") no-repeat;
}
.css-ezgmhy > div:nth-of-type(1) > div:nth-of-type(1) > .css-18d42jr::before {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Crect x='48' y='80' width='416' height='352' rx='48' ry='48' fill='none' stroke='rgba(255, 255, 255, 0.48)' stroke-linejoin='round' stroke-width='32'/%3E%3Ccircle cx='336' cy='176' r='32' fill='none' stroke='rgba(255, 255, 255, 0.48)' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath d='M304 335.79l-90.66-90.49a32 32 0 00-43.87-1.3L48 352M224 432l123.34-123.34a32 32 0 0143.11-2L464 368' fill='none' stroke='rgba(255, 255, 255, 0.48)' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3C/svg%3E") no-repeat;
}
.css-ezgmhy > div:nth-of-type(1) > div:nth-of-type(2) > .css-17fx8iq::before {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M374.79 308.78L457.5 367a16 16 0 0022.5-14.62V159.62A16 16 0 00457.5 145l-82.71 58.22A16 16 0 00368 216.3v79.4a16 16 0 006.79 13.08z' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3Cpath d='M268 384H84a52.15 52.15 0 01-52-52V180a52.15 52.15 0 0152-52h184.48A51.68 51.68 0 01320 179.52V332a52.15 52.15 0 01-52 52z' fill='none' stroke='white' stroke-miterlimit='10' stroke-width='32'/%3E%3C/svg%3E") no-repeat;
}
.css-ezgmhy > div:nth-of-type(1) > div:nth-of-type(2) > .css-18d42jr::before {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M374.79 308.78L457.5 367a16 16 0 0022.5-14.62V159.62A16 16 0 00457.5 145l-82.71 58.22A16 16 0 00368 216.3v79.4a16 16 0 006.79 13.08z' fill='none' stroke='rgba(255, 255, 255, 0.48)' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3Cpath d='M268 384H84a52.15 52.15 0 01-52-52V180a52.15 52.15 0 0152-52h184.48A51.68 51.68 0 01320 179.52V332a52.15 52.15 0 01-52 52z' fill='none' stroke='rgba(255, 255, 255, 0.48)' stroke-miterlimit='10' stroke-width='32'/%3E%3C/svg%3E") no-repeat;
}
.css-ezgmhy > div:not(:first-child):not(:last-child),
.css-ezgmhy > div:not(:first-child):not(:last-child) > div:nth-of-type(1),
.css-kuf6b {
border-radius: 1em;
height: 300px;
width: 300px;
}
.css-hnnoj4:has(.css-jy2vee) {
cursor: help !important;
}
/* ===== Video Gallery ===== */
body:has(.css-koo3fz) {
.css-ecz5ih > div:nth-of-type(1) {
padding: 1em 1em 2em;
}
}
/* ===== Photo & video selfie modal ===== */
/* Arrows */
.css-fskrnz > div > div:nth-of-type(1) > button svg {
fill: var(--chakra-colors-white);
height: 40px;
width: 40px;
}
.css-fskrnz > div > div:nth-of-type(1) > button:hover svg {
fill: var(--chakra-colors-white);
transform: scale(1.5);
transition: transform 0.2s ease, fill 0.2s ease;
}
/* Delete image button in red */
.css-fskrnz > header > div > div > div,
.css-fskrnz > header > div > div > div > button {
background: var(--chakra-colors-primaryBlack);
}
.css-fskrnz > header > div > div > div > button:first-child > p {
color: var(--chakra-colors-secondaryWhite);
}
.css-fskrnz > header > div > div > div > button:last-child > p {
color: var(--chakra-colors-red);
}
/* ===== Photo selfie modal ===== */
.css-fskrnz:not(:has(video)) {
height: 811px;
width: 80%;
}
.css-fskrnz:not(:has(video)) > div > div:nth-of-type(1) {
border-radius: 0 0 0 1em;
bottom: 0;
height: 775px;
left: 0;
margin-bottom: 0;
position: absolute;
width: auto;
}
.css-fskrnz:not(:has(video)) > div > div:nth-of-type(1) > div {
border-radius: 0 0 0 1em;
}
.css-fskrnz:not(:has(video)) > div > div:nth-of-type(1) > div:hover {
cursor: zoom-in;
}
.css-fskrnz:not(:has(video)) > div > div:nth-of-type(1) > div:active {
cursor: move;
}
.css-fskrnz:not(:has(video)) > div > div:nth-of-type(1) > div:hover::after,
.css-fskrnz:not(:has(video)) > div > div:nth-of-type(1) > div:hover::before {
background: 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%);
border-radius: 1em;
color: var(--chakra-colors-primaryWhite);
display: block;
filter: invert(avatarinvert);
font-family: var(--fontfamily);
font-size: fontsize;
font-weight: normal;
left: 51.5%;
line-height: 1.2;
padding: .5em;
position: fixed;
transition: 0.3s linear ease-in-out;
white-space: nowrap;
}
.css-fskrnz:not(:has(video)) > div > div:nth-of-type(1) > div:hover::before {
bottom: calc(60px + 3.5em);
content: "Scroll up/down to zoom in/out";
}
.css-fskrnz:not(:has(video)) > div > div:nth-of-type(1) > div:hover::after {
bottom: calc(60px + .5em);
content: "After zoom-in, drag-and-drop to move the picture";
}
@media all and (display-mode: standalone) {
.css-fskrnz:not(:has(video)) > div > div:nth-of-type(1) > div:hover::before {
bottom: calc(60px + 4.5em);
content: "Scroll up/down to zoom in/out";
}
.css-fskrnz:not(:has(video)) > div > div:nth-of-type(1) > div:hover::after {
bottom: calc(60px + 1.5em);
content: "After zoom-in, drag-and-drop to move the picture";
}
}
/* Prompt */
.css-fskrnz:not(:has(video)) > div > div:nth-of-type(2) {
margin-left: 52.5%;
max-height: max-content;
}
.css-fskrnz:not(:has(video)) > div > div:nth-of-type(2) > div > p {
font-size: fontsize;
margin-top: 4rem;
text-align: justify;
word-break: normal;
}
/* Date */
.css-fskrnz:not(:has(video)) > div > div:nth-of-type(2) > p {
color: var(--chakra-colors-secondaryWhite);
font-size: fontsize;
position: absolute;
right: 1.5em;
top: 3em;
}
/* Copy prompt */
.css-fskrnz:not(:has(video)) [aria-label="Copy prompt"] {
display: inline-block;
font-size: fontsize;
position: absolute;
text-decoration: none;
top: 3em;
}
.css-fskrnz:not(:has(video)) [aria-label="Copy prompt"]:hover svg {
background: url("data:image/svg+xml,%3Csvg fill='url(%23A)' stroke-width='0' viewBox='0 0 448 512' focusable='false' class='chakra-icon css-13otjrl' aria-hidden='true' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z'%3E%3C/path%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") no-repeat;
background-size: cover;
height: 0;
padding-left: 1em;
padding-top: 1em;
width: 0;
}
.css-fskrnz:not(:has(video)) [aria-label="Copy prompt"]:hover::after {
content: "Copy prompt";
font-size: fontsize;
top: -.2em;
padding-left: .3em;
pointer-events: auto;
position: absolute;
}
/* ===== Video selfie modal ===== */
body:has(video):has(.css-137mh4d:empty) {
.css-fskrnz,
.css-1wjwxyy {
overflow-y: hidden !important;
}
.css-fskrnz {
height: 821px;
overflow-y: hidden;
max-width: 775px;
}
.css-fskrnz:has(video) > div > div:nth-of-type(1) {
border-radius: 0 0 1em 1em;
height: auto;
width: 775px;
}
.css-fskrnz > div > div:nth-of-type(1) > video {
border-radius: 0 0 1em 1em;
}
/* Header */
.css-fskrnz:has(video) > header {
min-height: 46px;
padding-top: 5px;
}
/* Date */
.css-fskrnz:has(video) > div > div:nth-of-type(2) > p {
color: var(--chakra-colors-secondaryWhite);
font-size: fontsize;
position: fixed;
left: 50%;
transform: translateX(-50%);
top: 3em;
}
}
/* If prompt */
body:has(video):has(.css-137mh4d:not(:empty)) {
.css-fskrnz {
height: 811px;
width: 80%;
}
.css-fskrnz > div > div:nth-of-type(1) {
border-radius: 0 0 0 1em;
bottom: 0;
height: 775px;
left: 0;
margin-bottom: 0;
position: absolute;
width: auto;
}
.css-fskrnz > div > div:nth-of-type(1) > video {
border-radius: 0 0 0 1em;
}
/* Prompt */
.css-fskrnz > div > div:nth-of-type(2) {
margin-left: 52.5%;
max-height: max-content;
}
.css-fskrnz > div > div:nth-of-type(2) > p.css-137mh4d {
font-size: fontsize;
margin-top: 4rem;
text-align: justify;
word-break: normal;
}
/* Date */
.css-fskrnz > div > div:nth-of-type(2) > p.css-151uqsi {
color: var(--chakra-colors-secondaryWhite);
font-size: fontsize;
position: absolute;
right: 1.5em;
top: 3em;
}
}
/* Edit selfie modal */
body:has([aria-label="Pencil tool"]) {
.css-s1csb6 .css-5prrkc,
.css-s1csb6 .css-lzayxd,
.css-s1csb6 .css-101otp9 {
font-size: fontsize;
line-height: 1.5;
}
/* Split */
.css-s1csb6 > div > div > div:nth-of-type(1) {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.css-s1csb6 > div > div > div:nth-of-type(1) > div,
.css-s1csb6 > div > div > p:nth-of-type(2),
.css-s1csb6 > div > div > div:nth-of-type(2),
.css-s1csb6 > div > div > div:nth-of-type(3) {
width: 48%;
}
.css-s1csb6 > div > div > p:nth-of-type(2),
.css-s1csb6 > div > div > div:nth-of-type(2),
.css-s1csb6 > div > div > div:nth-of-type(3) {
margin-left: auto;
}
/* Reorder left side */
.css-s1csb6 > div > div > div:nth-of-type(1) > div > div {
display: flex;
flex-direction: column;
height: auto !important;
max-height: fit-content !important;
max-width: 48% !important;
padding: 2em !important;
min-width: 100% !important;
}
.css-s1csb6 > div > div > div:nth-of-type(1) > div > div > div:nth-of-type(1) {
background: transparent !important;
height: 100% !important;
margin: auto !important;
order: 2;
transform: translateX(-3.5%);
width: 100% !important;
}
.css-s1csb6 > div > div > div:nth-of-type(1) > div > div > div:nth-of-type(2) {
order: 3;
}
.css-s1csb6 > div > div > div:nth-of-type(1) > div > div > div:nth-of-type(3) {
flex-direction: column;
justify-content: center;
margin: 0 0 1em 0 !important;
order: 1;
}
/* Try align right side with left side */
.css-s1csb6 > div > div > p:nth-of-type(2) {
margin-top: -11em;
}
/* Changes to make */
textarea[aria-label="Changes to make"] {
min-height: 600px;
}
/* Seed input */
input[placeholder="Enter seed"]:not(:focus),
input[placeholder="Enter seed"]:focus {
margin-left: .5em;
max-width: calc(100% - 1em);
}
/* Edit icons */
.css-s1csb6 > div > div > div:nth-of-type(1) > div > div > div:nth-of-type(3) > div:first-child {
margin: 0 0 2em 0 !important;
}
.css-s1csb6 > div > div > div:nth-of-type(1) > div > div > div:nth-of-type(3) > div:first-child button {
height: 50px;
padding: .5em;
width: 50px;
}
.css-s1csb6 > div > div > div:nth-of-type(1) > div > div > div:nth-of-type(3) > div:first-child svg {
height: auto;
width: 100%;
}
/* Slider */
.css-s1csb6 > div > div > div:nth-of-type(1) > div > div > div:nth-of-type(3) > div:last-child {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center !important;
width: 100%;
}
/* Canvas */
.konvajs-content {
border-radius: 1em;
height: auto !important;
width: auto;
}
.css-s1csb6 > div > div > div:nth-of-type(1) canvas {
align-self: center !important;
aspect-ratio: 1 / 1;
border-radius: 1em;
height: auto !important;
width: 100% !important;
}
/* Additional controls */
.css-s1csb6 > div > div > div:nth-of-type(3) > div > button > p {
margin-top: 1em;
}
.css-s1csb6 > div > div > div:nth-of-type(3) > div > button > p > svg {
display: none;
}
.css-s1csb6 > div > div > div:nth-of-type(3) > div > div {
display: block !important;
height: auto !important;
opacity: 1 !important;
}
/* Request edit button */
[aria-label="Request edit"] {
left: 50%;
margin: 0;
transform: translateX(-50%);
width: fit-content;
}
}
/* Create video selfie modal */
body:has([aria-label="Video prompt"]) {
.css-1se8muj .css-24h4vi {
font-size: fontsize;
line-height: 1.5;
}
/* Split */
.css-1se8muj > div > div {
flex-direction: row;
flex-wrap: wrap;
}
.css-1se8muj > div > div > div {
align-items: center;
display: flex;
justify-content: center;
flex-basis: 48%;
}
.css-1se8muj > div > div > div:first-of-type img {
max-height: 500px;
max-width: 500px;
}
.css-1se8muj > div > div > div:nth-of-type(2) {
flex-direction: column;
}
.css-1se8muj > div > div > div:nth-of-type(2) > div > textarea {
max-height: 500px;
min-height: 500px;
width: 41vw;
}
.css-1se8muj > div > div > div:nth-of-type(3) {
flex-basis: 100%;
}
.css-1se8muj > div > div > div:nth-of-type(4) {
flex-basis: 100%;
justify-content: start;
}
.css-1se8muj > div > div > div:nth-of-type(4) > div > div > button > p {
font-size: 22px;
}
.css-1se8muj > div > div > div:nth-of-type(4) > div > div > button > p > svg {
display: none;
}
.css-1se8muj > div > div > div:nth-of-type(4) > div > div > div {
display: block !important;
height: auto !important;
opacity: 1 !important;
}
.css-1se8muj > div > div > div:nth-of-type(4) > div > textarea {
max-height: 500px;
min-height: 500px;
}
/* Create video button */
.css-1se8muj > div > div > button:last-of-type {
margin: auto;
max-width: fit-content;
}
.css-1se8muj > div > div > button:last-of-type > div {
padding: 0 1em !important;
}
}
/* ===== Customizations ===== */
/* Blur content */
if blurcontent {
/* Hide prompt */
.css-fskrnz > div > div:nth-of-type(2) > div p {
position: relative;
visibility: hidden;
}
.css-fskrnz > div > div:nth-of-type(2) > div p > button {
display: inline-block;
font-size: fontsize;
position: fixed !important;
text-decoration: none;
top: 5.5em !important;
visibility: visible;
}
.css-fskrnz > div > div:nth-of-type(2) > div p::before {
color: inherit;
content: "Hidden Text";
font-family: var(--fontfamily);
font-size: 3em;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
visibility: visible;
white-space: nowrap;
}
/* Hide images/videos */
.css-ezgmhy img,
.css-ezgmhy video {
height: 0;
padding-left: 300px;
padding-top: 300px;
width: 0;
}
.css-ezgmhy img {
background: url("https://placehold.co/300x300?text=Hidden+image") no-repeat;
}
.css-ezgmhy video {
background: url("https://placehold.co/300x300?text=Hidden+video") no-repeat;
}
/* Hide arrows in modal */
.css-fskrnz > div > div:nth-of-type(1) > button {
display: none;
}
/* Hide images/videos in modal */
.css-fskrnz img,
.css-fskrnz video {
height: 0;
padding-left: 775px;
padding-top: 775px;
width: 0;
}
.css-fskrnz img {
background: url("https://placehold.co/775x775?text=Hidden+image") no-repeat;
}
.css-fskrnz video {
background: url("https://placehold.co/775x775?text=Hidden+video") no-repeat;
}
}
/* Image border on hover */
if imageborder {
.css-1vuqv5m,
.css-1regj17 {
border-radius: 1em;
}
.css-1vuqv5m > .css-1regj17:hover {
height: 100%;
width: 100%;
}
.css-3vu8ng > .css-1regj17,
.css-hnnoj4 > .css-1ekmhiq {
transition: 0.2s linear;
}
.css-3vu8ng > .css-1regj17:hover,
.css-hnnoj4 > .css-1ekmhiq:hover {
border-radius: 1em;
height: 300px;
width: 300px;
}
.css-3vu8ng:hover,
.css-hnnoj4:hover {
border-radius: 1em;
box-shadow: rgba(139, 109, 255, 0.4) -5px -5px 5px 5px,
rgba(139, 110, 255, 0.4) -5px 5px 5px 5px,
rgba(254, 133, 133, 0.4) 5px -5px 5px 5px,
rgba(254, 133, 133, 0.4) 5px 5px 5px 5px;
transition: 0.2s linear;
}
}
/* Engine */
.css-70qvj9 > .css-2oetr7 {
border: 0;
}
/* Load More button */
.css-1m67823 {
background: 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: -webkit-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
border-radius: 56px;
color: var(--chakra-colors-white);
filter: invert(avatarinvert);
font-size: 18px;
height: fit-content;
padding-bottom: var(--chakra-space-2);
padding-top: var(--chakra-space-2);
width: 120px;
}
.css-1m67823:hover {
text-decoration: none;
}
/* Pinned Kindroids */
.css-1mbtnz9 > .css-gg4vpm > p {
margin: auto;
}
.css-1mbtnz9 > .css-11yc3yd {
justify-content: center;
}
/* Request selfie buttons at the top */
if requestselfie {
.css-12j2ye5 {
bottom: auto;
height: auto;
left: 2.5em;
margin: 0;
padding: 0;
position: fixed;
top: 4.5em;
width: auto;
z-index: 50;
}
.css-12j2ye5 > div > div {
display: flex;
flex-direction: column;
}
.css-12j2ye5 [aria-label="Request selfie"] {
padding: 20px;
position: relative;
}
.css-12j2ye5 [aria-label="Request selfie"] > p::before {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='white' stroke='white'%3E%3Cpath d='M344 144c-3.92 52.87-44 96-88 96s-84.15-43.12-88-96c-4-55 35-96 88-96s92 42 88 96z' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3Cpath d='M256 304c-87 0-175.3 48-191.64 138.6C62.39 453.52 68.57 464 80 464h352c11.44 0 17.62-10.48 15.65-21.4C431.3 352 343 304 256 304z' stroke-miterlimit='10' stroke-width='32'/%3E%3C/svg%3E") no-repeat;
background-position: center center;
background-size: cover;
content: "";
display: inline-block;
height: 20px;
vertical-align: middle;
width: 22px;
}
.css-12j2ye5 [aria-label="Request selfie"] > p {
font-size: 0;
}
.css-12j2ye5 [aria-label="Request selfie"] > p::after {
content: "Request solo selfie";
font-size: 22px;
line-height: 30px;
margin-left: .3em;
vertical-align: middle;
}
.css-12j2ye5 [aria-label="Group selfies"] {
background: 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%);
padding: 20px;
width: auto;
}
.css-12j2ye5 [aria-label="Group selfies"]::after {
color: var(--chakra-colors-pureWhite);
content: "Request group selfie";
display: inline-block;
font-family: var(--chakra-fonts-PoppinsBold);
font-size: 22px;
line-height: 30px;
margin-left: .3em;
vertical-align: middle;
width: calc(100% - 24px);
}
.css-12j2ye5 [aria-label="Request selfie"]:hover,
.css-12j2ye5 [aria-label="Group selfies"]:hover,
.css-12j2ye5 [aria-label="Request video selfie 3 paid credits"]:hover {
border-radius: 32px;
box-shadow: rgba(139, 109, 255, 0.4) -5px -5px 5px 5px,
rgba(139, 110, 255, 0.4) -5px 5px 5px 5px,
rgba(254, 133, 133, 0.4) 5px -5px 5px 5px,
rgba(254, 133, 133, 0.4) 5px 5px 5px 5px;
}
body:has([id*="video-selfie-"]) {
.css-12j2ye5 {
left: 5em;
top: 7em;
}
.css-12j2ye5 [aria-label="Request video selfie 3 paid credits"] {
padding: 20px;
width: auto;
}
.css-12j2ye5 [aria-label="Request video selfie 3 paid credits"] > p::before {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='white' stroke='white'%3E%3Cpath d='M374.79 308.78L457.5 367a16 16 0 0022.5-14.62V159.62A16 16 0 00457.5 145l-82.71 58.22A16 16 0 00368 216.3v79.4a16 16 0 006.79 13.08z' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3Cpath d='M268 384H84a52.15 52.15 0 01-52-52V180a52.15 52.15 0 0152-52h184.48A51.68 51.68 0 01320 179.52V332a52.15 52.15 0 01-52 52z' stroke-miterlimit='10' stroke-width='32'/%3E%3C/svg%3E") no-repeat;
background-position: center center;
background-size: cover;
content: "";
display: inline-block;
height: 24px;
margin-right: .5em;
vertical-align: middle;
width: 28px;
}
.css-12j2ye5 [aria-label="Request video selfie 3 paid credits"] > p {
font-size: 0;
}
.css-12j2ye5 [aria-label="Request video selfie 3 paid credits"] > p::after {
color: var(--chakra-colors-pureWhite);
content: "Request video selfie";
display: inline-block;
font-family: var(--chakra-fonts-PoppinsBold);
font-size: 22px;
line-height: 30px;
margin-left: .3em;
vertical-align: middle;
width: calc(100% - 24px);
}
}
body:has(.css-koo3fz) {
.css-12j2ye5 {
top: 4.5em;
}
}
if smallrequest {
.css-12j2ye5 [aria-label="Request selfie"] > p::after,
.css-12j2ye5 [aria-label="Group selfies"]::after,
.css-12j2ye5 [aria-label="Request video selfie 3 paid credits"] > p::after {
display: none !important;
}
[aria-label="Request selfie"],
[aria-label="Group selfies"],
[aria-label="Request video selfie 3 paid credits"] {
height: 68px !important;
width: 68px !important;
}
}
}
}
@-moz-document url-prefix("https://kindroid.ai/call") {
/* ====================================================
Call page
==================================================== */
/* Avatar */
.css-1nbfxil,
.css-17hv5wr {
aspect-ratio: 1 / 1;
border-radius: 1em;
height: calc(100% - 100px);
margin-top: 0;
min-width: 300px;
overflow: hidden;
width: fit-content;
}
.css-1jbvs8u,
.css-jk7dyx {
border: none;
border-radius: 1em;
box-sizing: border-box;
height: 100%;
margin: auto;
width: 100%;
}
.css-dv4mhk {
height: 120px;
width: 120px;
}
.css-1jbvs8u img,
.css-1jbvs8u video,
.css-jk7dyx img,
.css-jk7dyx video {
aspect-ratio: 1 / 1;
border: none;
border-radius: 1em;
height: 100%;
margin-top: 0;
max-width: 100%;
object-fit: contain;
object-position: center top;
width: auto;
}
.css-1jbvs8u video,
.css-jk7dyx video {
left: auto !important;
}
/* Remove background under avatar */
.css-1nbfxil > div:not(:last-child),
.css-17hv5wr > div:not(:last-child),
.css-1jbvs8u,
/* Remove purple circle when kin is talking */
.css-jk7dyx {
background: none;
}
/* Avoid scroll problem */
.css-11w64rs {
overflow: hidden;
}
/* Call controls bar */
.css-tolbod {
justify-content: space-between;
margin: 0 auto;
max-width: 757px;
}
.css-tolbod > .css-1en42kf:nth-child(1) {
justify-content: flex-start;
}
.css-tolbod > .css-1en42kf:nth-child(2) {
justify-content: center;
}
.css-tolbod > .css-1en42kf:nth-child(3) {
justify-content: flex-end;
}
/* Video, screenshare, captions */
.css-tolbod > .css-1en42kf > .css-15do4u8 {
flex-direction: row;
}
/* Buttons size */
.css-15do4u8 > div:nth-of-type(1) > div,
.css-15do4u8 > div:nth-of-type(2) {
height: 60px;
width: 60px;
}
/* Icons size in buttons */
.css-tolbod > .css-1en42kf > .css-15do4u8 svg {
height: 44px;
width: 44px;
}
/* Call controls when captions */
body:has(.css-1md15gg) {
.css-11w64rs {
column-gap: 1em;
flex-direction: row;
flex-wrap: wrap;
padding: 1em 1em 0 1em;
}
.css-1nbfxil,
.css-17hv5wr {
height: calc(100% - 100px);
width: 40%;
}
.css-1md15gg {
max-height: calc(100% - 100px);
min-height: calc(100% - 100px);
max-width: calc(60% - 1em);
}
.css-bdvhoj {
flex-basis: 100%;
min-height: 100px;
}
}
/* ===== Customizations ===== */
/* Avatar brightness, contrast, grayscale */
.css-1jbvs8u > img,
.css-1jbvs8u > video {
filter: brightness(avatarbrightness) contrast(avatarcontrast) grayscale(avatargrayscale) invert(avatarinvert) !important;
}
/* Avatar choice */
if avatarchoice {
.css-1jbvs8u > img,
.css-1jbvs8u > video {
background: url(avatarchoiceurl) center center / cover no-repeat !important;
border: 0;
height: 0;
padding-left: 100%;
padding-top: 100%;
width: 0;
}
}
/* Avatar flip, rotate, zoom */
if (avatarflip=="avatarflipdefault") {
.css-1jbvs8u,
.css-1jbvs8u > img,
.css-1jbvs8u > video {
transform: rotate(avatarrotate) scale(avatarzoom);
}
}
if (avatarflip=="avatarfliphorizontally") {
.css-1jbvs8u,
.css-1jbvs8u > img,
.css-1jbvs8u > video {
transform: rotate(avatarrotate) scale(avatarzoom) scaleX(-1) !important;
}
}
if (avatarflip=="avatarflipvertically") {
.css-1jbvs8u,
.css-1jbvs8u > img,
.css-1jbvs8u > video {
transform: rotate(avatarrotate) scale(avatarzoom) scaleY(-1) !important;
}
}
if (avatarflip=="avatarfliphorizontallyvertically") {
.css-1jbvs8u,
.css-1jbvs8u > img,
.css-1jbvs8u > video {
transform: rotate(avatarrotate) scale(calc(var(--avatarzoom) * -1)) !important;
}
}
/* Avatar hoverzoom */
if avatarhoverzoom {
.css-1jbvs8u > img:hover,
.css-1jbvs8u > video:hover {
aspect-ratio: 1 / 1;
border-radius: 0 !important;
max-height: 100vh !important;
min-height: 100vh !important;
left: 50% !important;
position: fixed !important;
top: 0 !important;
min-width: fit-content;
width: auto !important;
transform: translateX(-50%);
z-index: 99999 !important;
}
.css-z0osps {
z-index: 1;
}
if avatarchoice {
.css-1jbvs8u:hover {
aspect-ratio: 1 / 1;
border-radius: 0 !important;
max-height: 100vh !important;
min-height: 100vh !important;
left: 50% !important;
position: fixed !important;
top: 0 !important;
min-width: fit-content;
width: auto !important;
transform: translateX(-50%);
z-index: 99999 !important;
}
}
}
/* Avatar mix blend mode */
if (avatarmixblend=="avatarmixdefault") {
.css-1jbvs8u,
.css-1jbvs8u > img,
.css-1jbvs8u > video:active {
mix-blend-mode: normal;
}
}
if (avatarmixblend=="avatarmixcolor") {
.css-1jbvs8u,
.css-1jbvs8u > img,
.css-1jbvs8u > video:active {
mix-blend-mode: color !important;
}
}
if (avatarmixblend=="avatarmixcolorburn") {
.css-1jbvs8u,
.css-1jbvs8u > img,
.css-1jbvs8u > video:active {
mix-blend-mode: color-burn !important;
}
}
if (avatarmixblend=="avatarmixcolordodge") {
.css-1jbvs8u,
.css-1jbvs8u > img,
.css-1jbvs8u > video:active {
mix-blend-mode: color-dodge !important;
}
}
if (avatarmixblend=="avatarmixdarken") {
.css-1jbvs8u,
.css-1jbvs8u > img,
.css-1jbvs8u > video:active {
mix-blend-mode: darken !important;
}
}
if (avatarmixblend=="avatarmixdifference") {
.css-1jbvs8u,
.css-1jbvs8u > img,
.css-1jbvs8u > video:active {
mix-blend-mode: difference !important;
}
}
if (avatarmixblend=="avatarmixexclusion") {
.css-1jbvs8u,
.css-1jbvs8u > img,
.css-1jbvs8u > video:active {
mix-blend-mode: exclusion !important;
}
}
if (avatarmixblend=="avatarmixhardlight") {
.css-1jbvs8u,
.css-1jbvs8u > img,
.css-1jbvs8u > video:active {
mix-blend-mode: hard-light !important;
}
}
if (avatarmixblend=="avatarmixhue") {
.css-1jbvs8u,
.css-1jbvs8u > img,
.css-1jbvs8u > video:active {
mix-blend-mode: hue !important;
}
}
if (avatarmixblend=="avatarmixlighten") {
.css-1jbvs8u,
.css-1jbvs8u > img,
.css-1jbvs8u > video:active {
mix-blend-mode: lighten !important;
}
}
if (avatarmixblend=="avatarmixluminosity") {
.css-1jbvs8u,
.css-1jbvs8u > img,
.css-1jbvs8u > video:active {
mix-blend-mode: luminosity !important;
}
}
if (avatarmixblend=="avatarmixmultiply") {
.css-1jbvs8u,
.css-1jbvs8u > img,
.css-1jbvs8u > video:active {
mix-blend-mode: multiply !important;
}
}
if (avatarmixblend=="avatarmixoverlay") {
.css-1jbvs8u,
.css-1jbvs8u > img,
.css-1jbvs8u > video:active {
mix-blend-mode: overlay !important;
}
}
if (avatarmixblend=="avatarmixpluslighter") {
.css-1jbvs8u,
.css-1jbvs8u > img,
.css-1jbvs8u > video:active {
mix-blend-mode: plus-lighter !important;
}
}
if (avatarmixblend=="avatarmixsaturation") {
.css-1jbvs8u,
.css-1jbvs8u > img,
.css-1jbvs8u > video:active {
mix-blend-mode: saturation !important;
}
}
if (avatarmixblend=="avatarmixscreen") {
.css-1jbvs8u,
.css-1jbvs8u > img,
.css-1jbvs8u > video:active {
mix-blend-mode: screen !important;
}
}
if (avatarmixblend=="avatarmixsoftlight") {
.css-1jbvs8u,
.css-1jbvs8u > img,
.css-1jbvs8u > video:active {
mix-blend-mode: soft-light !important;
}
}
/* Avatar opacity */
.css-1jbvs8u,
.css-1jbvs8u > img,
.css-1jbvs8u > video:active {
opacity: avataropacity !important;
}
/* Avatar styles */
if (avatarstyles=="avataralien") || (avatarstyles=="avatarapple") || (avatarstyles=="avataratom") || (avatarstyles=="avatarbookmark") || (avatarstyles=="avatarcannabis") || (avatarstyles=="avatarchatbubble") || (avatarstyles=="avatarchefhat") || (avatarstyles=="avatarcloud") || (avatarstyles=="avatarcog") || (avatarstyles=="avatarcrystal") || (avatarstyles=="avatardevil") || (avatarstyles=="avatargem") || (avatarstyles=="avatarghost") || (avatarstyles=="avatargift") || (avatarstyles=="avatarheart") || (avatarstyles=="avataroctagon") || (avatarstyles=="avatarpentagon") || (avatarstyles=="avatarrabbit") || (avatarstyles=="avatarratio") || (avatarstyles=="avatarshield") || (avatarstyles=="avatarshipwheel") || (avatarstyles=="avatarshirt") || (avatarstyles=="avatarslime") || (avatarstyles=="avatarsmartphone") || (avatarstyles=="avatarsquircle") || (avatarstyles=="avatarstar") || (avatarstyles=="avatartablet") || (avatarstyles=="avatartreedeciduous") || (avatarstyles=="avatartreepine") || (avatarstyles=="avatartriangle") || (avatarstyles=="avatarvenetianmask") {
.css-1jbvs8u {
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: cover;
mask-size: cover;
height: 100%;
object-fit: cover;
transition: 0.3s linear ease-in-out;
width: 100%;
}
}
if (avatarstyles=="avatardefault") {
.css-1jbvs8u {
transition: 0.3s linear ease-in-out;
}
}
if (avatarstyles=="avataralien") {
.css-1jbvs8u {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.382 9.4054c-.0649-.6486-.1297-1.3622-.2595-2.0108-.1297-.6487-.2594-1.2973-.5189-1.946-.1297-.3243-.2595-.6486-.3892-.908-.1297-.3244-.3243-.5838-.454-.9082-.1946-.2594-.3892-.5838-.5838-.8432-.1946-.2595-.454-.519-.7135-.7135-.454-.3892-.973-.7784-1.5568-1.1027-.5838-.3244-1.2324-.5838-1.881-.7135C13.3765.0649 12.7278 0 12.0143 0c-.7135 0-1.3621.0649-2.0108.2595C9.355.3892 8.7712.6486 8.1874.973c-.6487.3243-1.1676.7135-1.6865 1.1675-.2595.1946-.454.454-.7135.7136l-.5838.7783c-.1297.3244-.3243.5838-.454.9081l-.3892.973c-.1946.6487-.3892 1.2973-.519 1.946-.1297.6486-.1946 1.2973-.2594 2.0108-.0649.7135 0 1.2973 0 1.946 0 .6486.0648 1.2972.1946 2.0107l.1946.973c.0648.3243.1946.6486.3243.973.454 1.2324 1.1676 2.4 1.881 3.5027.3893.5838.7785 1.1027 1.1676 1.6216.3892.519.7784 1.1027 1.2325 1.5568.1946.2594.454.454.7135.7135.2594.1946.519.3892.8432.5837.2595.1946.5838.3244.9081.4541.1298.0649.3244.1297.4541.1297.1946 0 .3243.0649.519.0649.1945 0 .3242 0 .5188-.0649.1946 0 .3244-.0648.454-.1297.3244-.1297.6487-.2595.9082-.454.2595-.1946.5838-.3892.8432-.5838.2595-.1946.519-.454.7136-.7135.454-.519.8432-1.0379 1.2324-1.5568.3892-.519.7784-1.1027 1.1676-1.6216.7135-1.1027 1.427-2.2703 1.881-3.5027.1298-.3244.2595-.6487.3244-.973.0648-.3243.1946-.6486.1946-.973.1297-.6486.1945-1.2973.1945-2.0108 0-.6486 0-1.3621-.0648-2.0108'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.382 9.4054c-.0649-.6486-.1297-1.3622-.2595-2.0108-.1297-.6487-.2594-1.2973-.5189-1.946-.1297-.3243-.2595-.6486-.3892-.908-.1297-.3244-.3243-.5838-.454-.9082-.1946-.2594-.3892-.5838-.5838-.8432-.1946-.2595-.454-.519-.7135-.7135-.454-.3892-.973-.7784-1.5568-1.1027-.5838-.3244-1.2324-.5838-1.881-.7135C13.3765.0649 12.7278 0 12.0143 0c-.7135 0-1.3621.0649-2.0108.2595C9.355.3892 8.7712.6486 8.1874.973c-.6487.3243-1.1676.7135-1.6865 1.1675-.2595.1946-.454.454-.7135.7136l-.5838.7783c-.1297.3244-.3243.5838-.454.9081l-.3892.973c-.1946.6487-.3892 1.2973-.519 1.946-.1297.6486-.1946 1.2973-.2594 2.0108-.0649.7135 0 1.2973 0 1.946 0 .6486.0648 1.2972.1946 2.0107l.1946.973c.0648.3243.1946.6486.3243.973.454 1.2324 1.1676 2.4 1.881 3.5027.3893.5838.7785 1.1027 1.1676 1.6216.3892.519.7784 1.1027 1.2325 1.5568.1946.2594.454.454.7135.7135.2594.1946.519.3892.8432.5837.2595.1946.5838.3244.9081.4541.1298.0649.3244.1297.4541.1297.1946 0 .3243.0649.519.0649.1945 0 .3242 0 .5188-.0649.1946 0 .3244-.0648.454-.1297.3244-.1297.6487-.2595.9082-.454.2595-.1946.5838-.3892.8432-.5838.2595-.1946.519-.454.7136-.7135.454-.519.8432-1.0379 1.2324-1.5568.3892-.519.7784-1.1027 1.1676-1.6216.7135-1.1027 1.427-2.2703 1.881-3.5027.1298-.3244.2595-.6487.3244-.973.0648-.3243.1946-.6486.1946-.973.1297-.6486.1945-1.2973.1945-2.0108 0-.6486 0-1.3621-.0648-2.0108'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarapple") {
.css-1jbvs8u {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06Z'/%3E%3Cpath d='M10 2c1 .5 2 2 2 5'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06Z'/%3E%3Cpath d='M10 2c1 .5 2 2 2 5'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avataratom") {
.css-1jbvs8u {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Cpath d='M20.2 20.2c2.04-2.03.02-7.36-4.5-11.9-4.54-4.52-9.87-6.54-11.9-4.5-2.04 2.03-.02 7.36 4.5 11.9 4.54 4.52 9.87 6.54 11.9 4.5Z'/%3E%3Cpath d='M15.7 15.7c4.52-4.54 6.54-9.87 4.5-11.9-2.03-2.04-7.36-.02-11.9 4.5-4.52 4.54-6.54 9.87-4.5 11.9 2.03 2.04 7.36.02 11.9-4.5Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Cpath d='M20.2 20.2c2.04-2.03.02-7.36-4.5-11.9-4.54-4.52-9.87-6.54-11.9-4.5-2.04 2.03-.02 7.36 4.5 11.9 4.54 4.52 9.87 6.54 11.9 4.5Z'/%3E%3Cpath d='M15.7 15.7c4.52-4.54 6.54-9.87 4.5-11.9-2.03-2.04-7.36-.02-11.9 4.5-4.52 4.54-6.54 9.87-4.5 11.9 2.03 2.04 7.36.02 11.9-4.5Z'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarbookmark") {
.css-1jbvs8u {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-bookmark'%3E%3Cpath d='m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-bookmark'%3E%3Cpath d='m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarcannabis") {
.css-1jbvs8u {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-cannabis'%3E%3Cpath d='M12 22v-4'/%3E%3Cpath d='M7 12c-1.5 0-4.5 1.5-5 3 3.5 1.5 6 1 6 1-1.5 1.5-2 3.5-2 5 2.5 0 4.5-1.5 6-3 1.5 1.5 3.5 3 6 3 0-1.5-.5-3.5-2-5 0 0 2.5.5 6-1-.5-1.5-3.5-3-5-3 1.5-1 4-4 4-6-2.5 0-5.5 1.5-7 3 0-2.5-.5-5-2-7-1.5 2-2 4.5-2 7-1.5-1.5-4.5-3-7-3 0 2 2.5 5 4 6'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-cannabis'%3E%3Cpath d='M12 22v-4'/%3E%3Cpath d='M7 12c-1.5 0-4.5 1.5-5 3 3.5 1.5 6 1 6 1-1.5 1.5-2 3.5-2 5 2.5 0 4.5-1.5 6-3 1.5 1.5 3.5 3 6 3 0-1.5-.5-3.5-2-5 0 0 2.5.5 6-1-.5-1.5-3.5-3-5-3 1.5-1 4-4 4-6-2.5 0-5.5 1.5-7 3 0-2.5-.5-5-2-7-1.5 2-2 4.5-2 7-1.5-1.5-4.5-3-7-3 0 2 2.5 5 4 6'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarchatbubble") {
.css-1jbvs8u {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-message-square'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-message-square'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarchefhat") {
.css-1jbvs8u {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chef-hat'%3E%3Cpath d='M17 21a1 1 0 0 0 1-1v-5.35c0-.457.316-.844.727-1.041a4 4 0 0 0-2.134-7.589 5 5 0 0 0-9.186 0 4 4 0 0 0-2.134 7.588c.411.198.727.585.727 1.041V20a1 1 0 0 0 1 1Z'/%3E%3Cpath d='M6 17h12'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chef-hat'%3E%3Cpath d='M17 21a1 1 0 0 0 1-1v-5.35c0-.457.316-.844.727-1.041a4 4 0 0 0-2.134-7.589 5 5 0 0 0-9.186 0 4 4 0 0 0-2.134 7.588c.411.198.727.585.727 1.041V20a1 1 0 0 0 1 1Z'/%3E%3Cpath d='M6 17h12'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarcircle") {
.css-1jbvs8u {
border-radius: 50% !important;
transition: 0.3s linear ease-in-out;
}
}
if (avatarstyles=="avatarcloud") {
.css-1jbvs8u {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.762 4.29a6.51 6.51 0 0 0-5.669 3.332 3.571 3.571 0 0 0-1.558-.36 3.571 3.571 0 0 0-3.516 3A4.918 4.918 0 0 0 0 14.796a4.918 4.918 0 0 0 4.92 4.914 4.93 4.93 0 0 0 .617-.045h14.42c2.305-.272 4.041-2.258 4.043-4.589v-.009a4.594 4.594 0 0 0-3.727-4.508 6.51 6.51 0 0 0-6.511-6.27z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.762 4.29a6.51 6.51 0 0 0-5.669 3.332 3.571 3.571 0 0 0-1.558-.36 3.571 3.571 0 0 0-3.516 3A4.918 4.918 0 0 0 0 14.796a4.918 4.918 0 0 0 4.92 4.914 4.93 4.93 0 0 0 .617-.045h14.42c2.305-.272 4.041-2.258 4.043-4.589v-.009a4.594 4.594 0 0 0-3.727-4.508 6.51 6.51 0 0 0-6.511-6.27z'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarcog") {
.css-1jbvs8u {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-settings'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-settings'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarcrystal") {
.css-1jbvs8u {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.964 15.266l-8.687 8.669c-.034.035-.086.052-.121.035L3.29 20.79c-.052-.017-.087-.052-.087-.086L.007 8.856c-.018-.053 0-.087.035-.122L8.728.065c.035-.035.087-.052.121-.035l11.866 3.18c.052.017.087.052.087.086l3.18 11.848c.034.053.016.087-.018.122'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.964 15.266l-8.687 8.669c-.034.035-.086.052-.121.035L3.29 20.79c-.052-.017-.087-.052-.087-.086L.007 8.856c-.018-.053 0-.087.035-.122L8.728.065c.035-.035.087-.052.121-.035l11.866 3.18c.052.017.087.052.087.086l3.18 11.848c.034.053.016.087-.018.122'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatardevil") {
.css-1jbvs8u {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 512 512' version='1.1' fill='currentColor' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M501.966 49.426c-16.928 16.928-36.504 29.582-99.1764 50.7557 14.607 16.299 26.889 34.19 43.102 62.5834C494.0646 111.1761 509.933 73.965 512 38.484 508.837 42.236 505.501 45.891 501.966 49.426z'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M10.034 49.427C6.5 45.891 3.163 42.236 0 38.485c2.066 35.481 12.317 70.571 48.6764 142.886 14.3674-25.3717 27.0445-46.5147 43.9473-71.8863C46.538 79.009 26.961 66.353 10.034 49.427z'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M256.001 37.549C135.353 37.549 37.549 135.353 37.549 256s97.804 218.451 218.451 218.451c120.648 0 218.451-97.804 218.451-218.451S376.648 37.549 256.001 37.549'/%3E%3C/g%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 512 512' version='1.1' fill='currentColor' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M501.966 49.426c-16.928 16.928-36.504 29.582-99.1764 50.7557 14.607 16.299 26.889 34.19 43.102 62.5834C494.0646 111.1761 509.933 73.965 512 38.484 508.837 42.236 505.501 45.891 501.966 49.426z'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M10.034 49.427C6.5 45.891 3.163 42.236 0 38.485c2.066 35.481 12.317 70.571 48.6764 142.886 14.3674-25.3717 27.0445-46.5147 43.9473-71.8863C46.538 79.009 26.961 66.353 10.034 49.427z'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M256.001 37.549C135.353 37.549 37.549 135.353 37.549 256s97.804 218.451 218.451 218.451c120.648 0 218.451-97.804 218.451-218.451S376.648 37.549 256.001 37.549'/%3E%3C/g%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatargem") {
.css-1jbvs8u {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l4 6-10 13L2 9Z'/%3E%3Cpath d='M11 3 8 9l4 13 4-13-3-6'/%3E%3Cpath d='M2 9h20'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l4 6-10 13L2 9Z'/%3E%3Cpath d='M11 3 8 9l4 13 4-13-3-6'/%3E%3Cpath d='M2 9h20'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarghost") {
.css-1jbvs8u {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.058 19.93c-1.01-2.29-1.185-4.228-1.212-4.99V8.67C20.846 3.882 16.886 0 12 0S3.15 3.882 3.15 8.671v6.36c-.037.82-.236 2.7-1.207 4.899-1.306 2.955-.226 2.603.742 2.36.968-.242 3.13-1.192 3.805-.022.675 1.17 1.238 2.184 2.814 1.523 1.576-.663 2.318-.883 2.543-.883h.306c.225 0 .968.22 2.543.882 1.576.662 2.14-.353 2.814-1.522.676-1.17 2.837-.22 3.805.022.968.243 2.048.595.743-2.36'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.058 19.93c-1.01-2.29-1.185-4.228-1.212-4.99V8.67C20.846 3.882 16.886 0 12 0S3.15 3.882 3.15 8.671v6.36c-.037.82-.236 2.7-1.207 4.899-1.306 2.955-.226 2.603.742 2.36.968-.242 3.13-1.192 3.805-.022.675 1.17 1.238 2.184 2.814 1.523 1.576-.663 2.318-.883 2.543-.883h.306c.225 0 .968.22 2.543.882 1.576.662 2.14-.353 2.814-1.522.676-1.17 2.837-.22 3.805.022.968.243 2.048.595.743-2.36'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatargift") {
.css-1jbvs8u {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13'/%3E%3Cpath d='M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/%3E%3Cpath d='M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13'/%3E%3Cpath d='M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/%3E%3Cpath d='M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarheart") {
.css-1jbvs8u {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-heart'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-heart'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avataroctagon") {
.css-1jbvs8u {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-octagon'%3E%3Cpath d='M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-octagon'%3E%3Cpath d='M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarovalh") {
.css-1jbvs8u {
aspect-ratio: 13 / 9;
border-radius: 50% !important;
height: auto;
width: 100%;
object-fit: cover;
transition: 0.3s linear ease-in-out;
}
}
if (avatarstyles=="avatarovalv") {
.css-1jbvs8u,
.css-1jbvs8u > img,
.css-1jbvs8u > video {
border-radius: 50% !important;
height: 100%;
max-width: avatarsize;
min-width: avatarsize;
object-fit: cover;
transition: 0.3s linear ease-in-out;
}
}
if (avatarstyles=="avatarpentagon") {
.css-1jbvs8u {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-pentagon'%3E%3Cpath d='M10.83 2.38a2 2 0 0 1 2.34 0l8 5.74a2 2 0 0 1 .73 2.25l-3.04 9.26a2 2 0 0 1-1.9 1.37H7.04a2 2 0 0 1-1.9-1.37L2.1 10.37a2 2 0 0 1 .73-2.25z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-pentagon'%3E%3Cpath d='M10.83 2.38a2 2 0 0 1 2.34 0l8 5.74a2 2 0 0 1 .73 2.25l-3.04 9.26a2 2 0 0 1-1.9 1.37H7.04a2 2 0 0 1-1.9-1.37L2.1 10.37a2 2 0 0 1 .73-2.25z'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarrabbit") {
.css-1jbvs8u {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.872 21.356c.077.195.682 1.646 1.685 2.156 1.075.547 1.613.406 1.613.406s-.914-3.384-.108-6.076c.807-2.691 1.479-2.933 1.479-2.933s1.478.591 2.446 0c.968-.591 1.264-1.747 1.264-1.747s-.672-2.474-1.264-3.442c-.591-.967-1.227-1.48-2.016-1.828a235.34 235.34 0 0 0-1.508-.655 11.275 11.275 0 0 0-1.003-3.198C16.237 1.531 14.678 0 14.678 0s-.815.7-1.025 2.032c.56.497 1.462 1.45 2.258 2.42.4.485.906 1.227 1.31 1.846a26.053 26.053 0 0 0-2.6-2.626c-1.828-1.586-3.63-2.823-3.63-2.823s-1.29 2.016.243 4.785c1.048 1.778 3.704 3.31 3.704 3.31s-2.736.134-3.704.346c-.968.213-2.043.592-3.253 1.398-1.21.807-2.01 1.647-3.011 3.011-1 1.365-1.962 3.71-1.962 3.71s-.135-.188-1.049-.188c-.914 0-1.21.188-1.21.188s.027 2.312.592 3.441c.564 1.13 1.37 1.562 2.392 1.562.27-.002.834 0 .834 0s.699 1.1 1.129 1.369c.43.268 1.183.215 1.183.215h8.253s-.048-.619-.51-1.103c-.448-.466-.983-.608-1.117-.666a3.776 3.776 0 0 0-1.008-.167h-2.123s2.689-.095 4.274-1.936c.833-.967.914-2.15.833-2.742-.04-.292-.295-1.29-.752-1.882a5.905 5.905 0 0 0-1.183-1.129c-.516-.36-1.17-.642-1.909-.94 1.075.268 1.586.376 2.635 1.129 1.048.752 1.505 1.908 1.586 2.177.08.269.269.672.215 1.828-.108.968-.218 1.208-.484 1.72-.217.456-.427.742-.717 1.07Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.872 21.356c.077.195.682 1.646 1.685 2.156 1.075.547 1.613.406 1.613.406s-.914-3.384-.108-6.076c.807-2.691 1.479-2.933 1.479-2.933s1.478.591 2.446 0c.968-.591 1.264-1.747 1.264-1.747s-.672-2.474-1.264-3.442c-.591-.967-1.227-1.48-2.016-1.828a235.34 235.34 0 0 0-1.508-.655 11.275 11.275 0 0 0-1.003-3.198C16.237 1.531 14.678 0 14.678 0s-.815.7-1.025 2.032c.56.497 1.462 1.45 2.258 2.42.4.485.906 1.227 1.31 1.846a26.053 26.053 0 0 0-2.6-2.626c-1.828-1.586-3.63-2.823-3.63-2.823s-1.29 2.016.243 4.785c1.048 1.778 3.704 3.31 3.704 3.31s-2.736.134-3.704.346c-.968.213-2.043.592-3.253 1.398-1.21.807-2.01 1.647-3.011 3.011-1 1.365-1.962 3.71-1.962 3.71s-.135-.188-1.049-.188c-.914 0-1.21.188-1.21.188s.027 2.312.592 3.441c.564 1.13 1.37 1.562 2.392 1.562.27-.002.834 0 .834 0s.699 1.1 1.129 1.369c.43.268 1.183.215 1.183.215h8.253s-.048-.619-.51-1.103c-.448-.466-.983-.608-1.117-.666a3.776 3.776 0 0 0-1.008-.167h-2.123s2.689-.095 4.274-1.936c.833-.967.914-2.15.833-2.742-.04-.292-.295-1.29-.752-1.882a5.905 5.905 0 0 0-1.183-1.129c-.516-.36-1.17-.642-1.909-.94 1.075.268 1.586.376 2.635 1.129 1.048.752 1.505 1.908 1.586 2.177.08.269.269.672.215 1.828-.108.968-.218 1.208-.484 1.72-.217.456-.427.742-.717 1.07Z'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarratio") {
.css-1jbvs8u {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-ratio'%3E%3Crect width='12' height='20' x='6' y='2' rx='2'/%3E%3Crect width='20' height='12' x='2' y='6' rx='2'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-ratio'%3E%3Crect width='12' height='20' x='6' y='2' rx='2'/%3E%3Crect width='20' height='12' x='2' y='6' rx='2'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarrectangle") || (avatarstyles=="avatarrectanglebig") {
.css-1jbvs8u,
.css-1jbvs8u > img,
.css-1jbvs8u > video {
aspect-ratio: 9 / 13;
height: 100%;
margin: 0;
max-width: avatarsize;
object-fit: cover;
object-position: center center;
transition: 0.3s linear ease-in-out;
}
}
if (avatarstyles=="avatarshield") {
.css-1jbvs8u {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-shield'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-shield'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarshipwheel") {
.css-1jbvs8u {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-ship-wheel'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 2v7.5'/%3E%3Cpath d='m19 5-5.23 5.23'/%3E%3Cpath d='M22 12h-7.5'/%3E%3Cpath d='m19 19-5.23-5.23'/%3E%3Cpath d='M12 14.5V22'/%3E%3Cpath d='M10.23 13.77 5 19'/%3E%3Cpath d='M9.5 12H2'/%3E%3Cpath d='M10.23 10.23 5 5'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-ship-wheel'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 2v7.5'/%3E%3Cpath d='m19 5-5.23 5.23'/%3E%3Cpath d='M22 12h-7.5'/%3E%3Cpath d='m19 19-5.23-5.23'/%3E%3Cpath d='M12 14.5V22'/%3E%3Cpath d='M10.23 13.77 5 19'/%3E%3Cpath d='M9.5 12H2'/%3E%3Cpath d='M10.23 10.23 5 5'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarshirt") {
.css-1jbvs8u {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-shirt'%3E%3Cpath d='M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-shirt'%3E%3Cpath d='M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarslime") {
.css-1jbvs8u {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2.862c-6.617 0-12 5.383-12 12 0 1.964.49 3.406 1.5 4.408 1.706 1.696 4.619 1.868 8.05 1.868.43 0 .87-.002 1.315-.005a217.6 217.6 0 012.765 0c3.792.024 7.066.044 8.88-1.758C23.511 18.378 24 16.9 24 14.862c0-6.617-5.383-12-12-12'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2.862c-6.617 0-12 5.383-12 12 0 1.964.49 3.406 1.5 4.408 1.706 1.696 4.619 1.868 8.05 1.868.43 0 .87-.002 1.315-.005a217.6 217.6 0 012.765 0c3.792.024 7.066.044 8.88-1.758C23.511 18.378 24 16.9 24 14.862c0-6.617-5.383-12-12-12'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarsmartphone") {
.css-1jbvs8u {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='20' x='5' y='2' rx='2' ry='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='20' x='5' y='2' rx='2' ry='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarsquircle") {
.css-1jbvs8u {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-squircle'%3E%3Cpath d='M12 3c7.2 0 9 1.8 9 9s-1.8 9-9 9-9-1.8-9-9 1.8-9 9-9'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-squircle'%3E%3Cpath d='M12 3c7.2 0 9 1.8 9 9s-1.8 9-9 9-9-1.8-9-9 1.8-9 9-9'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarstar") {
.css-1jbvs8u {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-star'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-star'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatartablet") {
.css-1jbvs8u {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2' ry='2'/%3E%3Cline x1='12' x2='12.01' y1='18' y2='18'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2' ry='2'/%3E%3Cline x1='12' x2='12.01' y1='18' y2='18'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatartreedeciduous") {
.css-1jbvs8u {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-tree-deciduous'%3E%3Cpath d='M8 19a4 4 0 0 1-2.24-7.32A3.5 3.5 0 0 1 9 6.03V6a3 3 0 1 1 6 0v.04a3.5 3.5 0 0 1 3.24 5.65A4 4 0 0 1 16 19Z'/%3E%3Cpath d='M12 19v3'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-tree-deciduous'%3E%3Cpath d='M8 19a4 4 0 0 1-2.24-7.32A3.5 3.5 0 0 1 9 6.03V6a3 3 0 1 1 6 0v.04a3.5 3.5 0 0 1 3.24 5.65A4 4 0 0 1 16 19Z'/%3E%3Cpath d='M12 19v3'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatartreepine") {
.css-1jbvs8u {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-tree-pine'%3E%3Cpath d='m17 14 3 3.3a1 1 0 0 1-.7 1.7H4.7a1 1 0 0 1-.7-1.7L7 14h-.3a1 1 0 0 1-.7-1.7L9 9h-.2A1 1 0 0 1 8 7.3L12 3l4 4.3a1 1 0 0 1-.8 1.7H15l3 3.3a1 1 0 0 1-.7 1.7H17Z'/%3E%3Cpath d='M12 22v-3'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-tree-pine'%3E%3Cpath d='m17 14 3 3.3a1 1 0 0 1-.7 1.7H4.7a1 1 0 0 1-.7-1.7L7 14h-.3a1 1 0 0 1-.7-1.7L9 9h-.2A1 1 0 0 1 8 7.3L12 3l4 4.3a1 1 0 0 1-.8 1.7H15l3 3.3a1 1 0 0 1-.7 1.7H17Z'/%3E%3Cpath d='M12 22v-3'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatartriangle") {
.css-1jbvs8u {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-triangle'%3E%3Cpath d='M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-triangle'%3E%3Cpath d='M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E%3C/svg%3E");
}
}
if (avatarstyles=="avatarvenetianmask") {
.css-1jbvs8u {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 11c-1.5 0-2.5.5-3 2'/%3E%3Cpath d='M4 6a2 2 0 0 0-2 2v4a5 5 0 0 0 5 5 8 8 0 0 1 5 2 8 8 0 0 1 5-2 5 5 0 0 0 5-5V8a2 2 0 0 0-2-2h-3a8 8 0 0 0-5 2 8 8 0 0 0-5-2z'/%3E%3Cpath d='M6 11c1.5 0 2.5.5 3 2'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 11c-1.5 0-2.5.5-3 2'/%3E%3Cpath d='M4 6a2 2 0 0 0-2 2v4a5 5 0 0 0 5 5 8 8 0 0 1 5 2 8 8 0 0 1 5-2 5 5 0 0 0 5-5V8a2 2 0 0 0-2-2h-3a8 8 0 0 0-5 2 8 8 0 0 0-5-2z'/%3E%3Cpath d='M6 11c1.5 0 2.5.5 3 2'/%3E%3C/svg%3E");
}
}
/* Background */
.css-16qnjy5 {
background: url(backgroundurl) backgroundcolor no-repeat 100% !important;
background-size: cover !important;
}
/* Bigger screen sharing */
if biggerscreensharing {
body:has(canvas):has(.css-1md15gg) {
.css-6zx6rx,
.css-1r59iyy {
border-radius: 1em;
height: fit-content;
position: fixed;
top: 1em;
right: 1em;
transform: none !important;
width: auto;
}
.css-6zx6rx canvas,
.css-6zx6rx div,
.css-1r59iyy canvas,
.css-1r59iyy div {
aspect-ratio: 16 / 9;
border-radius: 1em;
max-height: fit-content;
max-width: 60vw;
}
.css-11w64rs {
column-gap: 1em;
flex-direction: row;
flex-wrap: wrap;
padding: 1em 1em 0 1em;
}
.css-1nbfxil {
max-width: 40vw;
width: 40vw;
}
.css-1nbfxil,
.css-17hv5wr {
height: calc(100% - 170px);
top: calc(60px + .5em);
left: -1.5em;
}
.css-1md15gg {
max-height: 29.5vh;
min-height: 29.5vh;
max-width: 60vw;
position: fixed;
bottom: 1em;
right: 1em;
}
.css-bdvhoj {
flex-basis: 100%;
min-height: 100px;
}
.css-tolbod {
justify-content: space-between;
margin: 0 auto;
max-width: 685px;
}
}
body:has(canvas) {
div.no-invert.react-draggable,
div.no-invert.react-draggable.react-draggable-dragged,
.css-6zx6rx,
.css-1r59iyy {
transform: none !important;
}
.css-1yh9u0r,
.css-13hpf8m {
border-radius: 1em;
height: fit-content !important;
width: 100% !important;
}
.css-6zx6rx,
.css-1r59iyy {
border-radius: 1em;
height: fit-content;
position: fixed;
top: calc(50% + 60px);
right: 1em;
transform: translate(0, calc(-50% - 60px)) !important;
width: auto;
}
.css-6zx6rx canvas,
.css-6zx6rx div,
.css-1r59iyy canvas,
.css-1r59iyy div {
aspect-ratio: 16 / 9;
border-radius: 1em;
max-height: fit-content;
max-width: 1160px;
}
.css-6zx6rx canvas,
.css-1r59iyy canvas {
object-fit: contain;
}
if screensharezoom {
.css-6zx6rx canvas,
.css-1r59iyy canvas {
object-fit: cover;
}
}
/* Avatar position */
.css-1nbfxil {
height: calc(100% - 160px);
left: 16px;
position: fixed;
}
/* Call control position */
.css-tolbod {
bottom: 0;
position: fixed;
}
}
}
}
@-moz-document domain("kindroid.ai") {
/* ===================================
Experimental things
=================================== */
if experimentalavatarmoveanywhere {
.css-213aa4 > div:nth-of-type(2),
.css-na0gqx > div:nth-of-type(2) {
left: experimentalavatarmoveanywhereleft;
pointer-events: none;
position: fixed;
top: experimentalavatarmoveanywheretop;
transform: translate(var(--experimentalavatarmoveanywhereleft-neg), var(--experimentalavatarmoveanywheretop-neg));
z-index: 9999;
}
.css-213aa4 > div:nth-of-type(3),
.css-na0gqx > div:nth-of-type(3) {
margin-left: 1em;
width: calc(100vw - 1em) !important;
}
}
if experimentalmainmenu {
/* Main menu */
body:has(.css-ji0zhw) {
.css-ddli5j::before,
.css-p3thg3::before {
backdrop-filter: blur(10px);
background: rgba(0, 0, 0, 0.5);
content: "";
height: 100%;
position: fixed;
left: 0;
pointer-events: none;
top: 0;
width: 100%;
z-index: 49;
}
.css-ji0zhw {
border-radius: 1em;
box-shadow: rgba(139, 109, 255, 0.4) -5px -5px 5px 5px,
rgba(139, 110, 255, 0.4) -5px 5px 5px 5px,
rgba(254, 133, 133, 0.4) 5px -5px 5px 5px,
rgba(254, 133, 133, 0.4) 5px 5px 5px 5px;
bottom: 60px;
height: auto;
left: 5vw;
margin: auto;
position: fixed;
width: 90vw !important;
z-index: 50;
}
/* Create kin and group in my kindroid */
.css-1oc3ive > div:first-child,
.css-1apc7qm {
left: 6.5%;
}
/* Reduce free space at the end of main menu pages */
.css-1y6t5y9 {
margin-bottom: 0;
}
/* Bottom links */
.css-ji0zhw > .css-ilq6e {
border-radius: 1em;
position: static;
}
}
/* Email box */
body:has(.css-11yc3yd) {
.css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(2) {
right: 6vw !important;
}
}
/* Edit pins button */
body:has(.css-19zdxg6) {
.css-ji0zhw > div:nth-of-type(1) > div > div > .css-11yc3yd > div:nth-of-type(2) {
left: 6vw !important;
}
}
}
if experimentalrequestselfie {
/* Request selfie */
body:has([aria-label="Submit selfie request"]) {
.css-ecz5ih::before {
backdrop-filter: blur(10px) !important;
background: rgba(0, 0, 0, 0.5) !important;
content: "";
height: 100%;
position: fixed;
left: 0;
pointer-events: none;
top: 0;
width: 100%;
}
.css-105olw3 {
border-radius: 1em;
background: #161616;
box-shadow: rgba(139, 109, 255, 0.4) -5px -5px 5px 5px,
rgba(139, 110, 255, 0.4) -5px 5px 5px 5px,
rgba(254, 133, 133, 0.4) 5px -5px 5px 5px,
rgba(254, 133, 133, 0.4) 5px 5px 5px 5px;
bottom: 60px;
height: auto;
left: 5vw;
margin: auto;
max-width: 90vw !important;
overflow: hidden !important;
position: fixed;
top: 60px;
width: 90vw !important;
z-index: 50;
}
/* Submit selfie request */
.css-ae75s5 {
transform: translateX(-8%);
}
}
}
}
@-moz-document regexp("(chrome|moz)-extension://.+") {
/* ===================================================
Stylus popup
=================================================== */
html:has([href*="domain=kindroid.ai"]):has(label:nth-of-type(71):last-of-type) {
/* Input content */
#stylus-popup #message-box .config-body > label input {
border-radius: .5em;
text-align: center;
}
/* Range */
#stylus-popup #message-box .config-body > label span:nth-of-type(2) {
text-align: right;
}
/* Color picker size */
#stylus-popup #message-box .config-body > label .colorview-swatch,
#stylus-popup #message-box .config-body > label .colorview-swatch a,
#stylus-popup #message-box .config-body > label .colorview-swatch::before {
border-radius: .5em;
}
/* Select size */
#stylus-popup #message-box .config-body > label select {
border-radius: .5em;
text-align: center;
}
/* Fake spaces to improve presentation */
/* Whole website */
#stylus-popup #message-box .config-body > label:nth-of-type(1) input,
/* Chat page & main menu */
#stylus-popup #message-box .config-body > label:nth-of-type(22) input,
/* Groupchat page */
#stylus-popup #message-box .config-body > label:nth-of-type(32) input,
/* Chat & Groupchat pages */
#stylus-popup #message-box .config-body > label:nth-of-type(34) input,
/* Chat and Call pages */
#stylus-popup #message-box .config-body > label:nth-of-type(56) input,
/* Selfie page */
#stylus-popup #message-box .config-body > label:nth-of-type(59) input,
/* Call page */
#stylus-popup #message-box .config-body > label:nth-of-type(63) input,
/* Experimental things */
#stylus-popup #message-box .config-body > label:nth-of-type(66) input {
height: 0;
max-width: 0;
min-width: 0;
opacity: 0;
padding: 0;
pointer-events: none;
width: 0;
}
/* Avoid move when click on fake titles */
#stylus-popup #message-box .config-body > label:nth-of-type(1),
#stylus-popup #message-box .config-body > label:nth-of-type(22),
#stylus-popup #message-box .config-body > label:nth-of-type(31),
#stylus-popup #message-box .config-body > label:nth-of-type(36),
#stylus-popup #message-box .config-body > label:nth-of-type(56),
#stylus-popup #message-box .config-body > label:nth-of-type(59),
#stylus-popup #message-box .config-body > label:nth-of-type(63),
#stylus-popup #message-box .config-body > label:nth-of-type(66) {
pointer-events: none;
}
/* Bigger lines for fake titles */
#stylus-popup #message-box .config-body > label:nth-of-type(1) *,
#stylus-popup #message-box .config-body > label:nth-of-type(22) *,
#stylus-popup #message-box .config-body > label:nth-of-type(31) *,
#stylus-popup #message-box .config-body > label:nth-of-type(36) *,
#stylus-popup #message-box .config-body > label:nth-of-type(56) *,
#stylus-popup #message-box .config-body > label:nth-of-type(59) *,
#stylus-popup #message-box .config-body > label:nth-of-type(63) *,
#stylus-popup #message-box .config-body > label:nth-of-type(66) * {
line-height: 3;
}
/* Center fake titles */
#stylus-popup #message-box .config-body > label:nth-of-type(1) span,
#stylus-popup #message-box .config-body > label:nth-of-type(22) span,
#stylus-popup #message-box .config-body > label:nth-of-type(31) span,
#stylus-popup #message-box .config-body > label:nth-of-type(36) span,
#stylus-popup #message-box .config-body > label:nth-of-type(56) span,
#stylus-popup #message-box .config-body > label:nth-of-type(59) span,
#stylus-popup #message-box .config-body > label:nth-of-type(63) span,
#stylus-popup #message-box .config-body > label:nth-of-type(66) span {
margin-right: 0;
min-width: 100%;
text-align: center;
}
}
}
