Support an SVG-specific Element, as an alternative

<!DOCTYPE html> <html lang="en"> <head> <script> window.overrideAssetHost = "https://wishlist.webflow.com/assets/"; </script> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html charset=UTF-8" /> <meta name="publishing" content="true"> <title>Support an SVG-specific Element, as an alternative | Webflow Wishlist</title> <script type="text/javascript"> window.ahaLoaded = false; window.portalAssets = {"js":["/assets/runtime-v2-da0928e7bdc3535227e70423ceb8b3eb.js","/assets/vendor-v2-7ccb5fc722dda256d82203b42898ad85.js","/assets/idea_portals-v2-7aea4ba8897fdbef3acd834ef394217f.js","/assets/idea_portals-v2-99f1b637199c09d347e67a5e19628fe0.css"]}; </script> <script> window.sentryRelease = window.sentryRelease || "eafec8a79c"; </script> <link rel="stylesheet" href="https://wishlist.webflow.com/assets/idea_portals-v2-99f1b637199c09d347e67a5e19628fe0.css" data-turbolinks-track="true" media="all" /> <script src="https://wishlist.webflow.com/assets/runtime-v2-da0928e7bdc3535227e70423ceb8b3eb.js" data-turbolinks-track="true"></script> <script src="https://wishlist.webflow.com/assets/vendor-v2-7ccb5fc722dda256d82203b42898ad85.js" data-turbolinks-track="true"></script> <script src="https://wishlist.webflow.com/assets/idea_portals-v2-7aea4ba8897fdbef3acd834ef394217f.js" data-turbolinks-track="true"></script> <script src="https://cdn.aha.io/assets/aha_web_components-v2-d9e086d8c41ea401bc44631b1d32caf9.js" crossorigin="anonymous" data-turbolinks-track="true"></script> <meta name="csrf-param" content="authenticity_token" /> <meta name="csrf-token" content="v5ckUFkLrGPaOJBuBZeGvZgO9QvNyQEGOVGT3Dr5XBquBqwINN78Bs-_FxSY-UgDkLqVfGDzICXU5TlMmc-WEw" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="locale" content="en" /> <meta name="portal-token" content="b38946d845e1f3724a02b763dc95e094" /> <meta name="idea-portal-id" content="6358181848082153567" /> <link rel="icon" href="https://wishlist.webflow.com/portal-favicon.png?1720031930&size=thumb16" /> </head> <body class="ideas-portal public"> <style> /* ################################################### */ /* ################################################### */ /* STYLE OVERRIDES START */ /* ################################################### */ /* ################################################### */ /* ------------------------------------- */ /* FONTS */ /* ------------------------------------- */ @font-face { font-family: 'Graphik'; src: url('https://d3e54v103j8qbb.cloudfront.net/fonts/Graphik-Regular-Web.5a0c1a002e.woff2') format('woff2'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/Graphik-Regular-Web.5e78809d4d.eot') format('embedded-opentype'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/Graphik-Regular-Web.9806bc37bf.woff') format('woff'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Graphik'; src: url('https://d3e54v103j8qbb.cloudfront.net/fonts/Graphik-RegularItalic-Web.7c44c9e817.woff2') format('woff2'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/Graphik-RegularItalic-Web.a9b91de662.eot') format('embedded-opentype'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/Graphik-RegularItalic-Web.c3aa8858b8.woff') format('woff'); font-weight: 400; font-style: italic; } @font-face { font-family: 'Graphik'; src: url('https://d3e54v103j8qbb.cloudfront.net/fonts/Graphik-Medium-Web.abf6e1188f.woff2') format('woff2'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/Graphik-Medium-Web.2523d1a466.eot') format('embedded-opentype'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/Graphik-Medium-Web.4327644773.woff') format('woff'); font-weight: 500; font-style: normal; } @font-face { font-family: 'Graphik'; src: url('https://d3e54v103j8qbb.cloudfront.net/fonts/Graphik-MediumItalic-Web.1d15660caf.woff2') format('woff2'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/Graphik-MediumItalic-Web.e843973a9c.eot') format('embedded-opentype'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/Graphik-MediumItalic-Web.1e7e99e909.woff') format('woff'); font-weight: 500; font-style: italic; } @font-face { font-family: 'Akkurat'; src: url('https://d3e54v103j8qbb.cloudfront.net/fonts/lineto-akkurat-light.7c6a95bf96.woff2') format('woff2'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/lineto-akkurat-light.8fd1f76d6f.eot') format('embedded-opentype'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/lineto-akkurat-light.1ce95fd3b4.woff') format('woff'); font-weight: 200; font-style: normal; } @font-face { font-family: 'Akkurat'; src: url('https://d3e54v103j8qbb.cloudfront.net/fonts/lineto-akkurat-lightitalic.f5dd588863.woff2') format('woff2'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/lineto-akkurat-lightitalic.52d6cd625f.eot') format('embedded-opentype'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/lineto-akkurat-lightitalic.ce93d14c9c.woff') format('woff'); font-weight: 200; font-style: italic; } /* Akkurat */ @font-face { font-family: 'Akkurat'; src: url('https://d3e54v103j8qbb.cloudfront.net/fonts/lineto-akkurat-regular.29e757590a.woff2') format('woff2'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/lineto-akkurat-regular.3ec7f3d6d1.eot') format('embedded-opentype'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/lineto-akkurat-regular.f00a7952f3.woff') format('woff'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Akkurat'; src: url('https://d3e54v103j8qbb.cloudfront.net/fonts/lineto-akkurat-italic.1b7b4e1809.woff2') format('woff2'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/lineto-akkurat-italic.7825dadd40.eot') format('embedded-opentype'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/lineto-akkurat-italic.996bcdfe8d.woff') format('woff'); font-weight: 400; font-style: italic; } @font-face { font-family: 'Akkurat'; src: url('https://d3e54v103j8qbb.cloudfront.net/fonts/lineto-akkurat-bold.98b3f0b5cf.woff2') format('woff2'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/lineto-akkurat-bold.06a424d24a.eot') format('embedded-opentype'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/lineto-akkurat-bold.0d13cf93e7.woff') format('woff'); font-weight: 700; font-style: normal; } @font-face { font-family: 'Akkurat'; src: url('https://d3e54v103j8qbb.cloudfront.net/fonts/lineto-akkurat-bolditalic.9394657766.woff2') format('woff2'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/lineto-akkurat-bolditalic.32a978d0ea.eot') format('embedded-opentype'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/lineto-akkurat-bolditalic.a66dd68440.woff') format('woff'); font-weight: 700; font-style: italic; } @font-face { font-family: 'icomoon'; src: url('https://d3e54v103j8qbb.cloudfront.net/fonts/wishlist-icons/icomoon.365159169d.eot'); src: url('https://d3e54v103j8qbb.cloudfront.net/fonts/wishlist-icons/icomoon.365159169d.eot#iefix') format('embedded-opentype'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/wishlist-icons/icomoon.dfe38b8d08.ttf') format('truetype'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/wishlist-icons/icomoon.7d8d1b7967.woff') format('woff'), url('https://d3e54v103j8qbb.cloudfront.net/fonts/wishlist-icons/icomoon.7bd7c854a5.svg') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-arrows-16px-1_tail-left:before { font-family: 'icomoon' !important; content: "\e900"; font-size: 16px; } .icon-arrows-16px-2_corner-left-round:before { font-family: 'icomoon' !important; content: "\e901"; font-size: 16px; } .icon-arrows-16px-2_log-out:before { font-family: 'icomoon' !important; content: "\e902"; font-size: 16px; } .icon-arrows-16px-4_logout:before { font-family: 'icomoon' !important; content: "\e903"; font-size: 16px; } .icon-signout:before { font-family: 'icomoon' !important; content: "\e902"; font-size: 16px; } .icon-chevron-right:before, .icon-chevron-down:before { font-size: 11px; vertical-align: middle; } .icon-arrows-24px-outline-1_tail-right:before { font-family: 'icomoon' !important; content: "\e904"; font-size: 24px; } .icon-arrows-24px-outline-1_tail-triangle-right:before { font-family: 'icomoon' !important; content: "\e905"; font-size: 24px; } .icon-shopping-16px-2_customer-support-outline:before { font-family: 'icomoon' !important; content: "\e906"; font-size: 16px; } .icon-shopping-16px-2_customer-support:before { font-family: 'icomoon' !important; content: "\e907"; font-size: 16px; } .icon-text-16px_bold:before { font-family: 'icomoon' !important; content: "\e908"; font-size: 16px; } .icon-text-16px_italic:before { font-family: 'icomoon' !important; content: "\e909"; font-size: 16px; } .icon-remove-sign:before { content: "\f057"; } .icon-text-16px_list-bullet:before { font-family: 'icomoon' !important; content: "\e90a"; font-size: 16px; } .icon-text-16px_list-numbers:before { font-family: 'icomoon' !important; content: "\e90b"; font-size: 16px; } .icon-text-editor-16pxArtboard-2:before { font-family: 'icomoon' !important; content: "\e90c"; font-size: 16px; } .mce-i-bold:before { font-family: 'icomoon' !important; content: "\e90c"; font-size: 16px; } .icon-text-editor-16pxArtboard-3:before { font-family: 'icomoon' !important; content: "\e90d"; font-size: 16px; } .mce-i-italic:before { font-family: 'icomoon' !important; content: "\e90d"; font-size: 16px; } .icon-text-editor-16pxArtboard-4:before { font-family: 'icomoon' !important; content: "\e90e"; font-size: 16px; } .mce-i-bullist:before { font-family: 'icomoon' !important; content: "\e90e"; font-size: 16px; } .icon-text-editor-16pxArtboard-5:before { font-family: 'icomoon' !important; content: "\e90f"; font-size: 16px; } .mce-i-numlist:before { font-family: 'icomoon' !important; content: "\e90f"; font-size: 16px; } .icon-text-editor-16pxArtboard-6:before { font-family: 'icomoon' !important; content: "\e910"; font-size: 16px; } .mce-i-link:before { font-family: 'icomoon' !important; content: "\e910"; font-size: 16px; } .icon-ui-10px-zoom:before { font-family: 'icomoon' !important; content: "\e911"; font-size: 10px; } .icon-ui-16px-1_attach-87:before { font-family: 'icomoon' !important; content: "\e912"; font-size: 16px; } .icon-paper-clip:before { font-family: 'icomoon' !important; content: "\e912"; font-size: 14px; vertical-align: bottom; } .icon-ui-16px-1_check:before { font-family: 'icomoon' !important; content: "\e913"; font-size: 16px; } .icon-ui-16px-1_eye-19:before { font-family: 'icomoon' !important; content: "\e914"; font-size: 16px; } .icon-eye-open:before { font-family: 'icomoon' !important; content: "\e914"; font-size: 14px; } .icon-ui-16px-1_eye-ban-20:before { font-family: 'icomoon' !important; content: "\e915"; font-size: 16px; } .icon-eye-close:before { font-family: 'icomoon' !important; content: "\e915"; font-size: 14px; } .icon-ui-16px-1_home-51:before { font-family: 'icomoon' !important; content: "\e916"; font-size: 16px; } .icon-ui-16px-1_home-simple:before { font-family: 'icomoon' !important; content: "\e917"; font-size: 16px; } .icon-home:before { font-family: 'icomoon' !important; content: "\e917"; font-size: 16px; } .icon-ui-16px-1_pencil:before { font-family: 'icomoon' !important; content: "\e918"; font-size: 16px; } .icon-pencil:before { font-family: 'icomoon' !important; content: "\e918"; font-size: 14px; margin-top: -3px; display: inline-block; } .icon-ui-16px-1_preferences-circle:before { font-family: 'icomoon' !important; content: "\e919"; font-size: 16px; } .icon-ui-16px-1_settings-gear-63:before { font-family: 'icomoon' !important; content: "\e91a"; font-size: 16px; } .icon-wrench:before { font-family: 'icomoon' !important; content: "\e91a"; font-size: 16px; } .icon-ui-16px-1_simple-remove:before { font-family: 'icomoon' !important; content: "\e91b"; font-size: 16px; } .icon-ui-16px-1_zoom-2:before { font-family: 'icomoon' !important; content: "\e91c"; font-size: 16px; } .icon-ui-16px-1_zoom:before { font-family: 'icomoon' !important; content: "\e91d"; font-size: 16px; } .icon-ui-16px-2_chat-round-content:before { font-family: 'icomoon' !important; content: "\e91e"; font-size: 16px; } .icon-ui-16px-2_link-69:before { font-family: 'icomoon' !important; content: "\e91f"; font-size: 16px; } .icon-ui-16px-3_chat-33:before { font-family: 'icomoon' !important; content: "\e920"; font-size: 16px; } .icon-ui-16px-3_chat-45-outline:before { font-family: 'icomoon' !important; content: "\e921"; font-size: 16px; } .icon-ui-16px-3_chat-45:before { font-family: 'icomoon' !important; content: "\e922"; font-size: 16px; } .icon-ui-16px-3_chat-46:before { font-family: 'icomoon' !important; content: "\e923"; font-size: 16px; } .icon-ui-16px-3_chat-47:before { font-family: 'icomoon' !important; content: "\e924"; font-size: 16px; } .icon-comments:before { font-family: 'icomoon' !important; content: "\e923"; font-size: 16px; } .icon-ui-24px-outline-1_check-circle-08:before { font-family: 'icomoon' !important; content: "\e925"; font-size: 24px; } .icon-ui-24px-outline-1_circle-remove:before { font-family: 'icomoon' !important; content: "\e926"; font-size: 24px; } .icon-ui-24px-outline-1_eye-19:before { font-family: 'icomoon' !important; content: "\e927"; font-size: 24px; } .icon-ui-24px-outline-2_alert-circle-explaim:before { font-family: 'icomoon' !important; content: "\e928"; font-size: 24px; } .icon-ui-24px-outline-2_alert-circle-i:before { font-family: 'icomoon' !important; content: "\e929"; font-size: 24px; } .icon-ui-24px-outline-2_alert-circle-question:before { font-family: 'icomoon' !important; content: "\e92a"; font-size: 24px; } .icon-ui-24px-outline-3_alert:before { font-family: 'icomoon' !important; content: "\e92b"; font-size: 24px; } .icon-users-24px-outline_circle-10:before { font-family: 'icomoon' !important; content: "\e92c"; font-size: 24px; } .icon-users-32px-outline_circle-08NO:before { font-family: 'icomoon' !important; content: "\e92d"; font-size: 32px; } /* ##################################### */ /* Webflow Navbar and Dropdown Default Styles */ /* ##################################### */ @font-face { font-family: 'webflow-icons'; src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg6SAy0AAAC8AAAAYGNtYXAaVcxaAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5ZgscV1gAAAFwAAABhGhlYWQCkFKvAAAC9AAAADZoaGVhB0MDyQAAAywAAAAkaG10eBIAA10AAANQAAAAIGxvY2EBMADyAAADcAAAABJtYXhwAAwATQAAA4QAAAAgbmFtZWTuiIAAAAOkAAABe3Bvc3QAAwAAAAAFIAAAACAAAwQAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADmAwPA/8D/wAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIOYD//3//wAAAAAAIOYA//3//wAB/+MaBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQEgAAADIAOAAAUAAAkBBwkBFwMg/kBAAYD+gEABwAHAQP6A/oBAAAEA4AAAAuADgAAFAAATARcJAQfgAcBA/oABgEABwAHAQP6A/oBAAAADAMAA4ANAAsAAGAAxAEoAAAEhIg4CHQEUHgIzITI+Aj0BNC4CIxUhIg4CHQEUHgIzITI+Aj0BNC4CIxUhIg4CHQEUHgIzITI+Aj0BNC4CIwMg/cAHCwkFBQkLBwJABwsJBQUJCwf9wAcLCQUFCQsHAkAHCwkFBQkLB/3ABwsJBQUJCwcCQAcLCQUFCQsHAsAFCQsHIAcLCQUFCQsHIAcLCQXABQkLByAHCwkFBQkLByAHCwkFwAUJCwcgBwsJBQUJCwcgBwsJBQAAAAABAJ0AtAOBApUABQAACQIHCQEDJP7r/upcAXEBcgKU/usBFFv+egGGAAAAAAEAAAABAADSLAJOXw889QALBAAAAAAAz/iHGQAAAADP+IcZAAAAAAOBA4AAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAAA4EAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAACAAAABAABIAQAAOAEAADABAAAnQAAAAAACgAUAB4AMgBGAKwAwgAAAAEAAAAIAEsAAwAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAaAAAAAQAAAAAAAgAOAHEAAQAAAAAAAwAaADAAAQAAAAAABAAaAH8AAQAAAAAABQAWABoAAQAAAAAABgANAEoAAQAAAAAACgA0AJkAAwABBAkAAQAaAAAAAwABBAkAAgAOAHEAAwABBAkAAwAaADAAAwABBAkABAAaAH8AAwABBAkABQAWABoAAwABBAkABgAaAFcAAwABBAkACgA0AJkAdwBlAGIAZgBsAG8AdwAtAGkAYwBvAG4AcwBWAGUAcgBzAGkAbwBuACAAMQAuADAAdwBlAGIAZgBsAG8AdwAtAGkAYwBvAG4Ac3dlYmZsb3ctaWNvbnMAdwBlAGIAZgBsAG8AdwAtAGkAYwBvAG4AcwBSAGUAZwB1AGwAYQByAHcAZQBiAGYAbABvAHcALQBpAGMAbwBuAHMARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'), url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAAVcAAoAAAAABRQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAZMAAAGTuzUomU9TLzIAAAKIAAAAYAAAAGAOkgMtY21hcAAAAugAAABMAAAATBpVzFpnYXNwAAADNAAAAAgAAAAIAAAAEGhlYWQAAAM8AAAANgAAADYCkFKvaGhlYQAAA3QAAAAkAAAAJAdDA8lobXR4AAADmAAAACAAAAAgEgADXW1heHAAAAO4AAAABgAAAAYACFAAbmFtZQAAA8AAAAF7AAABe2TuiIBwb3N0AAAFPAAAACAAAAAgAAMAAAEABAQAAQEBDndlYmZsb3ctaWNvbnMAAQIAAQA6+BwC+BsD+BgEHgoACXf/i4seCgAJd/+LiwwHi0v6lPpUBR0AAACaDx0AAACfER0AAAAJHQAAAYoSAAkBAQ4bHR8iJywxNndlYmZsb3ctaWNvbnN3ZWJmbG93LWljb25zdTB1MXUyMHVFNjAwdUU2MDF1RTYwMnVFNjAzAAACAYkABgAIAQEEBwoNJDvH4P6UDv6UDv6UDvyUDvm0+FQV/FT4VEtL+BT8FPwU/BTLSwUO93T4VBX4VPhUy0v8FPwU+BT8FEtLBQ75tPlUFfzUiwV5i319i3kIi2sFi3mZfZ2LCPjUiwWdi5mZi50Ii6sFi519mXmLCIv7VBX81IsFeYt9fYt5CItrBYt5mX2diwj41IsFnYuZmYudCIurBYudfZl5iwiL+1QV/NSLBXmLfX2LeQiLawWLeZl9nYsI+NSLBZ2LmZmLnQiLqwWLnX2ZeYsIDvm4+SkV+6n7qvuq96ovLvgG/Bj4BvgYBQ76lBT6lBWLDAoAAAMEAAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA5gMDwP/A/8ADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA4AAAACgAIAAIAAgABACDmA//9//8AAAAAACDmAP/9//8AAf/jGgQAAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAABAAC1pQTjXw889QALBAAAAAAAz/iHGQAAAADP+IcZAAAAAAOBA4AAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAAA4EAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAACAAAABAABIAQAAOAEAADABAAAnQAAUAAACAAAAAAADgCuAAEAAAAAAAEAGgAAAAEAAAAAAAIADgBxAAEAAAAAAAMAGgAwAAEAAAAAAAQAGgB/AAEAAAAAAAUAFgAaAAEAAAAAAAYADQBKAAEAAAAAAAoANACZAAMAAQQJAAEAGgAAAAMAAQQJAAIADgBxAAMAAQQJAAMAGgAwAAMAAQQJAAQAGgB/AAMAAQQJAAUAFgAaAAMAAQQJAAYAGgBXAAMAAQQJAAoANACZAHcAZQBiAGYAbABvAHcALQBpAGMAbwBuAHMAVgBlAHIAcwBpAG8AbgAgADEALgAwAHcAZQBiAGYAbABvAHcALQBpAGMAbwBuAHN3ZWJmbG93LWljb25zAHcAZQBiAGYAbABvAHcALQBpAGMAbwBuAHMAUgBlAGcAdQBsAGEAcgB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('woff'); font-weight: normal; font-style: normal; } [class^="w-icon-"], [class*=" w-icon-"] { font-family: 'webflow-icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .w-icon-nav-menu:before { content: "\e602"; } .w-icon-arrow-down:before, .w-icon-dropdown-toggle:before { content: "\e603"; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .w-clearfix:before, .w-clearfix:after { content: " "; display: table; } .w-clearfix:after { clear: both; } /* Container */ .w-container { margin-left: auto; margin-right: auto; max-width: 1110px; } .w-container:before, .w-container:after { content: " "; display: table; } .w-container:after { clear: both; } @media screen and (max-width: 1139px) { .w-container { max-width: 990px; } } @media screen and (max-width: 1025px) { .w-container { max-width: none; padding-left: 12px; padding-right: 12px; } } /* Dropdown */ .w-nav { position: relative; background: #dddddd; z-index: 1000; } .w-nav:before, .w-nav:after { content: " "; display: table; } .w-nav:after { clear: both; } .w-nav-brand { position: relative; float: left; text-decoration: none; color: #333333; } .w-nav-brand:hover { text-decoration: none; color: #333333; } .w-nav-link { position: relative; display: inline-block; vertical-align: top; text-decoration: none; color: #222222; padding: 20px; text-align: left; margin-left: auto; margin-right: auto; } .w-nav-link:hover { text-decoration: none; color: #222222; } .w-nav-link.w--current { color: #0082f3; } .w-nav-menu { position: relative; float: right; } .w--nav-menu-open { display: block !important; position: absolute; top: 100%; left: 0; right: 0; background: #c8c8c8; text-align: center; overflow: visible; min-width: 200px; } .w--nav-link-open { display: block; position: relative; } .w-nav-overlay { position: absolute; overflow: hidden; display: none; top: 100%; left: 0; right: 0; width: 100%; } .w-nav-overlay .w--nav-menu-open { top: 0; } .w-nav[data-animation="over-left"] .w-nav-overlay { width: auto; } .w-nav[data-animation="over-left"] .w-nav-overlay, .w-nav[data-animation="over-left"] .w--nav-menu-open { right: auto; z-index: 1; top: 0; } .w-nav[data-animation="over-right"] .w-nav-overlay { width: auto; } .w-nav[data-animation="over-right"] .w-nav-overlay, .w-nav[data-animation="over-right"] .w--nav-menu-open { left: auto; z-index: 1; top: 0; } .w-nav-button { position: relative; float: right; padding: 18px; font-size: 24px; display: none; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .w-nav-button.w--open { background-color: #c8c8c8; color: white; } .w-nav[data-collapse="all"] .w-nav-menu { display: none; } .w-nav[data-collapse="all"] .w-nav-button { display: block; } .collapse{ overflow: visible; } @media screen and (max-width: 780px) { .w-nav[data-collapse="medium"] .w-nav-menu { display: block; } .w-nav[data-collapse="medium"] .w-nav-button { display: block; } } @media screen and (max-width: 779px) { .w-nav[data-collapse="small"] .w-nav-menu { display: none; } .w-nav[data-collapse="small"] .w-nav-button { display: block; } } /* Dropdown */ .w-dropdown { display: inline-block; position: relative; text-align: left; margin-left: auto; margin-right: auto; z-index: 900; } .w-dropdown-btn, .w-dropdown-toggle, .w-dropdown-link { position: relative; vertical-align: top; text-decoration: none; color: #222222; padding: 20px; text-align: left; margin-left: auto; margin-right: auto; white-space: nowrap; } .w-dropdown-toggle { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: inline-block; cursor: pointer; padding-right: 40px; } .w-dropdown-toggle:focus { outline: 0; } .w-icon-dropdown-toggle { position: absolute; top: 0; right: 0; bottom: 0; margin: auto; margin-right: 20px; width: 1em; height: 1em; } .w-dropdown-list { position: absolute; background: #dddddd; display: none; min-width: 100%; } .w-dropdown-list.w--open { display: block; } .w-dropdown-link { padding: 10px 20px; display: block; color: #222222; } .w-dropdown-link.w--current { color: #0082f3; } .w-nav[data-collapse="all"] .w-dropdown, .w-nav[data-collapse="all"] .w-dropdown-toggle { display: block; } .w-nav[data-collapse="all"] .w-dropdown-list { position: static; } @media screen and (max-width: 991px) { .w-nav[data-collapse="medium"] .w-dropdown, .w-nav[data-collapse="medium"] .w-dropdown-toggle { display: block; } .w-nav[data-collapse="medium"] .w-dropdown-list { position: static; } } @media screen and (max-width: 767px) { .w-nav[data-collapse="small"] .w-dropdown, .w-nav[data-collapse="small"] .w-dropdown-toggle { display: block; } .w-nav[data-collapse="small"] .w-dropdown-list { position: static; } .w-nav-brand { padding-left: 10px; } } @media screen and (max-width: 479px) { .w-nav[data-collapse="tiny"] .w-dropdown, .w-nav[data-collapse="tiny"] .w-dropdown-toggle { display: block; } .w-nav[data-collapse="tiny"] .w-dropdown-list { position: static; } } /* ##################################### */ /* Navbar Custom Styles */ /* ##################################### */ .navbar { background-color: #000; font-size: 13px; font-family: "Graphik",Roboto,"Open Sans","Helvetica Neue",sans-serif,Georgia,serif; -webkit-font-smoothing: antialiased; margin-bottom: 50px; } .navlink { margin-top: 13px; margin-bottom: 13px; padding: 12px 17px; opacity: 0.5; -webkit-transition: opacity 50ms ease; transition: opacity 50ms ease; color: #fff; font-size: 15px; line-height: 20px; font-weight: 500; } .navlink:hover { opacity: 1; color: #fff; } .portalname { padding-left: 10px; float: left; color: #fff; font-size: 20px; line-height: 27px; } .logoimage { margin-top: 2px; float: left; } .navlink.w--current { opacity: 1; } .navlink.currentnavlink { opacity: 1; } .nav-menu { padding-top: 0px; padding-bottom: 0px; padding-left: 10px; } .menubutton { color: #fff; } .logo { margin-top: 14px; padding-top: 7px; padding-bottom: 7px; -webkit-transition: color 50ms ease, opacity 50ms ease; transition: color 50ms ease, opacity 50ms ease; } .logo:hover { opacity: 0.65; } .navdropdown { margin-top: 13px; margin-bottom: 13px; padding: 12px 22px 12px 17px; opacity: 0.5; -webkit-transition: opacity 50ms ease; transition: opacity 50ms ease; color: #fff; font-size: 15px; line-height: 20px; font-weight: 500; } .navdropdown:hover { opacity: 1; } .navdropdownicon { margin-right: 0px; } .dropdownmenu.w--open { margin-top: -4px; padding-top: 7px; padding-bottom: 7px; border-radius: 3px; background-color: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .17); } .dropdownmenulink { min-width: 130px; padding: 8px 12px; font-size: 15px; font-weight: 500; } .dropdownmenulink:hover { background-color: #eef0f3; } /*@media (max-width: 1110px) { .customcontainer { padding-right: 10px; padding-left: 10px; } }*/ @media (max-width: 991px) { .navlink { padding-right: 14px; padding-left: 14px; } /* .customcontainer { max-width: 738px; }*/ } @media (max-width: 767px) { .navlink { margin-top: 5px; margin-bottom: 5px; padding: 10px 20px; font-size: 14px; } .nav-menu { display: block; overflow: hidden; width: 100%; height: auto; margin-top: 0px; margin-right: auto; margin-left: auto; padding-top: 0px; padding-bottom: 30px; padding-left: 0px; border-radius: 0px; background-color: #000; } .logo { margin-top: 9px; padding-left: 0px; } .portalname { font-size: 20px; } .logoimage { width: 82px; } .menubutton { padding-right: 0px; } .menubutton.w--open { background-color: transparent; } .navcontainer { padding-right: 20px; padding-left: 20px; } .navdropdown { margin-top: 5px; margin-bottom: 5px; padding: 10px 20px; } .navdropdownicon { position: static; display: inline-block; } .dropdownmenu.w--open { display: block; margin-top: 0px; padding-top: 0px; padding-bottom: 0px; background-color: transparent; } .dropdownmenulink { margin-top: 5px; margin-bottom: 5px; padding-left: 31px; opacity: 0.5; color: #fff; } .dropdownmenulink:hover { background-color: transparent; opacity: 1; color: #fff; } .navdropdowntext { display: inline-block; margin-right: 8px; } /*.customcontainer { max-width: 100%; margin-right: 20px; margin-left: 20px; padding-right: 0px; padding-left: 0px; }*/ } @media (max-width: 479px) { .logo { width: auto; } } /* ------------------------------------- */ /* DEFAULT STYLES OVERRIDES */ /* ------------------------------------- */ body { font-family: -apple-system,BlinkMacSystemFont,"Graphik",Roboto,"Open Sans","Helvetica Neue",sans-serif,Georgia,serif; color: rgba(33, 41, 51, 1); /* Default text color */ } /*font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;*/ h1,h2 { font-family: "Akkurat",-apple-system,BlinkMacSystemFont,"Graphik",Roboto,"Open Sans","Helvetica Neue",sans-serif,Georgia,serif; color: rgba(33, 41, 51, 1); /* Default text color */ } h3,h4,h5,h6 { font-family: -apple-system,BlinkMacSystemFont,"Graphik",Roboto,"Open Sans","Helvetica Neue",sans-serif,Georgia,serif; color: rgba(33, 41, 51, 1); /* Default text color */ } h1 { font-weight: 300; font-size: 40px; line-height: 130%; margin-top: 0; letter-spacing: -0.6px; } h3 { font-size: 22px; line-height: 1.2; margin-bottom: 11px; font-weight: 400; letter-spacing: .4px; margin-top: -5px; } p, li, aside.quote { color: rgba(33, 41, 51, 1); /* Default text color */ } a { color: #146EF4; /* primary-blue */ } a:hover, a:focus { /*color: #146EF4;*/ /* primary-blue */ color: rgba(33, 41, 51, 1); /* Default text color */ text-decoration: none; } .subnav-section { padding: 22px 0 20px; background: #F7F8FA; margin-bottom: 28px; border-bottom: 1px solid rgba(30, 42, 73, 0.06); /* UI black */ line-height: 1px; } .portal-nav { margin-bottom: 12px; } .portal-sidebar .add-idea-button { margin-bottom: 0; } .filters { margin: 0px 0px 20px 0; } .filters .filter { font-size: 14px; transition: background-color 100ms ease; } .filters .filter strong { font-weight: 400; } .filters .filter:hover { background-color: rgba(20, 110, 244, 0.10); /* primary-blue */ color: rgba(58, 76, 211, 1); /* primary-blue darker */ } .filters .filter span { color: rgba(30, 42, 73, 0.4); } .filters .filter:hover span { color: rgba(30, 42, 73, 0.8); } .filters .filter:focus { text-decoration: none; } .filters .filter.active { background-color: rgba(33, 41, 51, 1); /* black */ } .filters .filter.active:hover { background-color: rgba(33, 41, 51, 1); /* black */ color: white; } .filters .filter.active .close { color: transparent; text-shadow: none; } .filters .filter.active .close:before { font-family: 'icomoon' !important; content: "\e911"; font-size: 10px; color:white !important; text-shadow: none; margin-right: -10px; } .filters .filter.active:hover { background-color: rgba(33, 41, 51, 0.8); } .filters .filter .category-collapser { width: 11px; text-align: left; } .portal-sidebar h4 { margin-bottom: 3px; font-size: 12px; font-weight: 500; } /* idea note */ .idea-count-description { border-radius: 3px; padding: 17px 17px 10px; background: #f7f8fa; margin: 20px 0 10px; border: 1px solid rgba(30, 42, 73, 0.06); } .idea-count-description p { color: rgba(33, 41, 51, 0.6); } .idea-count-description strong { color: rgba(33, 41, 51, 1); } .idea-count-description strong.endorsements_used_text { color: rgba(29, 190, 126, 1); } .idea-count-description hr { display: none; } /* Vote Button */ .btn-vote { width: 70px; border: none; background-color: white; text-decoration: none; border-radius: 0; text-align: center; color: #999; } .btn-vote.voted:hover { background-color: transparent; } .btn-vote:hover { background-color: transparent; } .btn-vote:focus { background-color: transparent; } .btn-vote .vote-count { display: block; font-size: 25px; font-weight: 400; line-height: 57px; margin-top: 0px; margin-bottom: 5px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(30, 42, 73, 0.25); /* UI black */ /*background-color: rgba(30, 42, 73, 0.02);*/ /* UI black */ background-color: transparent; color: rgba(33, 41, 51, 1); /* Default text color */ transition: box-shadow 100ms ease, color 100ms ease, background-color 100ms ease; } .btn-vote .vote-status { background-color: rgba(33, 41, 51, .92); /* Text black */ padding: 4px 0px 4px 2px; border-radius: 2px; transition: background-color 100ms ease; font-size: 11px; } .btn-vote:hover .vote-count { box-shadow: inset 0 0 0 1px rgba(30, 42, 73, 0.45); /* UI black */ /*background-color: rgba(30, 42, 73, 0.02);*/ /* UI black */ } .btn-vote:hover .vote-status { background-color: rgba(0,0,0,1); } .btn-vote.voted .vote-count { color: rgba(29, 190, 126, 1); /* primary-green */ box-shadow: inset 0 0 0 1px rgba(23, 160, 106, 0.5); /* dark-green */ background-color: rgba(29, 190, 126, .03); } .btn-vote.voted .vote-status { background-color: rgba(29, 190, 126, 1); /* primary-green */ } .btn-vote.voted:hover .vote-count { box-shadow: inset 0 0 0 1px rgba(23, 160, 106, 0.6); /* dark-green */ /*background-color: rgba(29, 190, 126, 0.06);*/ color: rgba(23, 160, 106, 1); /* dark-green */ } .btn-vote.voted:hover .vote-status { background-color: rgba(23, 160, 106, 1); /* dark-green */ } .btn-vote .vote-status:hover, .btn-vote.voted .vote-status:hover { color: white; } .btn-vote .vote-status:hover .caret, .btn-vote.voted .vote-status:hover .caret { border-top-color: white; } .btn-vote .vote-count:hover { color: rgba(33, 41, 51, .92); /* UI black */ } .btn-vote.voted .vote-count:hover { color: rgba(23, 160, 106, 1); /* dark-green */ } .btn-vote .vote-status .caret { margin-top: 7px; margin-left: 1px; } .btn-vote:not(.merged):hover, .btn-vote:not(.merged):focus, .btn-vote.voted:not(.merged):hover, .btn-vote.voted:not(.merged):focus { background-color: transparent; } .btn-vote .vote-status.dropdown-toggle { min-width: 77px; } /* Status Label */ .status-pill { border-radius: 3px; font-size: 14px; border: 0px solid; } /* Ideas */ .ideas .idea { border-bottom: 1px solid rgba(30, 42, 73, 0.10); padding: 15px 0px; } .ideas .idea .description { min-height: 20px; font-size: 14px; line-height: 140%; margin-bottom: 15px; } .ideas .idea .idea-details { width: 82%; } .ideas .idea a:visited h3 { color: rgba(133, 138, 144, 1) !important; /* dim text grey */ } .ideas .idea a:visited .description { color: rgba(133, 138, 144, 1); /* dim text grey */ } .ideas .idea a .idea-details h3 { transition: color 100ms ease; } .ideas .idea a .idea-details h3::after { content: "→"; display: inline; opacity: 0; transition: opacity 100ms ease; } .ideas .idea a .idea-details:hover h3::after { /*color: #146EF4; */ /*text-decoration: underline;*/ opacity: 1; } .ideas .idea a .idea-details h3, .ideas .idea a .idea-details .description { /*transition: opacity 100ms ease;*/ } .ideas .idea a .idea-details:hover h3, .ideas .idea a .idea-details:hover .description { /*opacity: 0.7;*/ } .ideas .idea a:visited { color: inherit; } .ideas .idea .idea-details .idea-meta .avatar img { margin-top: -3px; margin-right: 11px; } .ideas .idea .idea-details .idea-meta { color: rgba(133, 138, 144, 1); } .ideas .idea .idea-details .idea-meta .comment-count, .ideas .idea .idea-details .idea-meta .comment-count i { color: rgba(30, 42, 73, 0.4); /* UI black */ transition: color 100ms ease; vertical-align: middle; } .ideas .idea .idea-details .idea-meta .comment-count:hover, .ideas .idea .idea-details .idea-meta .comment-count:hover i { color: #253343; } /* Avatar */ .avatar { position: relative; } .avatar img { border: 0px solid transparent; border-radius: 50px; width: 26px; } .avatar.avatar-large img { border-radius: 50px; } .avatar img.admin-user { border: 2px solid rgba(252, 71, 131, 1); /* pink */ } .avatar .user-type { font-size: 11px; line-height: 13px; text-transform: capitalize; color: rgba(252, 71, 131, 1); /* pink */ font-weight: 400; margin-top: 4px; margin-left: -6px; } /*span.avatar img::before { content:""; border:1px solid red; position: absolute; top: 0; left:0; right:0; bottom:0; }*/ /* Tabs */ .nav-tabs>.active>a, .nav-tabs>.active>a:hover, .nav-tabs>.active>a:focus { font-weight: 500; } .nav-tabs>li>a { padding-top: 0; padding-bottom: 0; padding: 12px 18px; margin-right: 3px; transition: background-color 100ms ease; } .nav>li>a:hover, .nav>li>a:focus { /*background-color: rgba(30, 42, 73, 0.06);*/ /* UI black */ color: #146EF4; /* primary-blue */ background-color: rgba(20, 110, 244, .08); } .nav-tabs>li>a:hover, .nav-tabs>li>a:focus { border-color: transparent transparent transparent; } /* Button Styles */ .btn { padding: 9px 24px; font-size: 14px; line-height: 20px; font-weight: 400; color: white; text-shadow: none; background-color: #146EF4; background-image: none; background-image: none; background-image: none; background-image: none; background-image: none; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='transparent', endColorstr='transparent', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); border: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; transition: 100ms background-color ease, box-shadow 100ms ease; } .btn i { margin-right:3px; } .btn-outline { color: #146EF4; /* primary-blue */; border: none; box-shadow: inset 0 0 0 1px #146EF4; /* primary-blue */; background-color: white; } .btn:focus { outline: 0; } .btn.btn-outline:hover, .btn.btn-outline:active, .btn.btn-outline:focus, .btn.btn-outline.active, .btn.btn-outline.disabled, .btn.btn-outline[disabled] { background-color: white; /* UI black */ text-shadow: none; color: #146EF4; /* primary-blue */; border-color: none; box-shadow: inset 0 0 0 2px #146EF4; /* primary-blue */; } .btn-outline.btn-primary, .btn-outline.btn-primary:focus, .btn-outline.btn-primary.disabled, .btn-outline.btn-primary[disabled] { color: white; border-color: transparent; background-color: #146EF4; /* primary-blue */ box-shadow: none; transition: 100ms background-color ease; } .btn-outline.btn-primary:hover, .btn-outline.btn-primary:active { background-color: rgba(58, 76, 211, 1); /* primary-blue darker */ color: white; box-shadow: none; } .btn-outline:disabled,.btn-outline[disabled],.btn-outline.disabled { background-color:rgba(30, 42, 73, 0.7)!important; color: white !important; border: none !important; box-shadow: none !important; outline: 0 !important; } .current-user-info { margin-bottom: 0px; /*padding: 10px; background-color: rgba(30, 42, 73, 0.06);*/ /* UI black */ /*border-radius:3px; box-shadow: inset 0 0 0 1px rgba(30, 42, 73, 0.06);*/ /* UI black */ } .current-user-info:first-child { margin-bottom: 20px; } .current-user-info .user-name .caret { margin-top: 8px; } .dropdown-toggle:hover { color: #146EF4; /* primary-blue */ } .dropdown-toggle:hover .caret { border-top-color: #146EF4; /* primary-blue */ } .dropdown-menu { background-color: #ffffff; border: none; box-shadow: 0 0 0 1px rgba(30, 42, 73, 0.1), 0 1px 10px rgba(30, 42, 73, 0.1); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .dropdown-menu>li>a { padding: 6px 20px; vertical-align: middle; color: rgba(30, 42, 73, 1); } .dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { /*background-color: #146EF4;*/ /* primary-blue */ background-color: rgba(30, 42, 73, 0.10); /* UI color */ color: rgba(30, 42, 73, 1); background-image: none; } .dropdown-menu>li>a>i { margin-right:2px; } /* Forms / inputs */ .portal-content .input-xxlarge, .portal-content select.input-xxlarge, .portal-content .select2-container.select2-container-multi.input-xxlarge { width: 100%; height:40px; box-sizing: border-box; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } select, .portal-content select.input-xxlarge { background-image: url(https://d3e54v103j8qbb.cloudfront.net/images/caret-down-medium.e548cd2725.svg); background-position: 98% center; background-repeat: no-repeat; background-size: 12px; } select:active, select:hover, select:focus { outline: none } select:focus { -webkit-box-shadow: inset 0 0 0 2px #146EF4; /* default blue */ -moz-box-shadow: inset 0 0 0 2px #146EF4; /* default blue */ box-shadow: inset 0 0 0 2px #146EF4; /* default blue */ } select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { box-sizing: border-box; background-color: #fff; border: none; outline: none; -webkit-box-shadow: inset 0 0 0 1px rgba(30, 42, 73, 0.25); /* UI black */ -moz-box-shadow: inset 0 0 0 1px rgba(30, 42, 73, 0.25); /* UI black */ box-shadow: inset 0 0 0 1px rgba(30, 42, 73, 0.25); /* UI black */ height: 40px; padding: 10px 10px 11px; margin-bottom: 10px; font-size: 14px; line-height: 20px; color: #253343; /* primary-black */ -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; vertical-align: middle; -webkit-transition: border ease 100ms, box-shadow ease 100ms; -moz-transition: border ease 100ms, box-shadow ease 100ms; -o-transition: border ease 100ms, box-shadow ease 100ms; transition: border ease 100ms, box-shadow ease 100ms; } textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus { border: none; outline: 0; -webkit-box-shadow: inset 0 0 0 2px #146EF4; /* default blue */ -moz-box-shadow: inset 0 0 0 2px #146EF4; /* default blue */ box-shadow: inset 0 0 0 2px #146EF4; /* default blue */ } textarea::-webkit-input-placeholder, input[type="text"]::-webkit-input-placeholder, input[type="password"]::-webkit-input-placeholder, input[type="datetime"]::-webkit-input-placeholder, input[type="datetime-local"]::-webkit-input-placeholder, input[type="date"]::-webkit-input-placeholder, input[type="month"]::-webkit-input-placeholder, input[type="time"]::-webkit-input-placeholder, input[type="week"]::-webkit-input-placeholder, input[type="number"]::-webkit-input-placeholder, input[type="email"]::-webkit-input-placeholder, input[type="url"]::-webkit-input-placeholder, input[type="search"]::-webkit-input-placeholder, input[type="tel"]::-webkit-input-placeholder, input[type="color"]::-webkit-input-placeholder, .uneditable-input::-webkit-input-placeholder { color: rgba(33, 41, 51, 0.35); } .field-with-errors input, .field-with-errors select, .field-with-errors textarea, .field-with-errors input[type="text"], .field-with-errors input[type="password"], .field-with-errors input[type="datetime"], .field-with-errors input[type="datetime-local"], .field-with-errors input[type="date"], .field-with-errors input[type="month"], .field-with-errors input[type="time"], .field-with-errors input[type="week"], .field-with-errors input[type="number"], .field-with-errors input[type="email"], .field-with-errors input[type="url"], .field-with-errors input[type="search"], .field-with-errors input[type="tel"], .field-with-errors input[type="color"], .field-with-errors .uneditable-input, .field-with-errors .select2-choices, .field-with-errors input:focus, .field-with-errors select:focus, .field-with-errors textarea:focus, .field-with-errors input[type="text"]:focus, .field-with-errors input[type="password"]:focus, .field-with-errors input[type="datetime"]:focus, .field-with-errors input[type="datetime-local"]:focus, .field-with-errors input[type="date"]:focus, .field-with-errors input[type="month"]:focus, .field-with-errors input[type="time"]:focus, .field-with-errors input[type="week"]:focus, .field-with-errors input[type="number"]:focus, .field-with-errors input[type="email"]:focus, .field-with-errors input[type="url"]:focus, .field-with-errors input[type="search"]:focus, .field-with-errors input[type="tel"]:focus, .field-with-errors input[type="color"]:focus, .field-with-errors .select2-choices:focus, .field-with-errors .uneditable-input:focus { border-color: none; -webkit-box-shadow: inset 0 0 0 2px rgba(252, 71, 131, 1) !important; /* pink */ -moz-box-shadow: inset 0 0 0 2px rgba(252, 71, 131, 1)!important; /* pink */ box-shadow: inset 0 0 0 2px rgba(252, 71, 131, 1)!important; /* pink */ } input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] { opacity: .6; } input:focus:invalid:focus, textarea:focus:invalid:focus, select:focus:invalid:focus { border-color: none; -webkit-box-shadow: inset 0 0 0 2px rgba(252, 71, 131, 1); /* default blue */ -moz-box-shadow: inset 0 0 0 2px rgba(252, 71, 131, 1); /* default blue */ box-shadow: inset 0 0 0 2px rgba(252, 71, 131, 1); /* default blue */ color: rgba(252, 71, 131, 1); } .field-with-errors .control-label, .field-with-errors .help-block, .field-with-errors .help-inline { color: rgba(252, 71, 131, 1); } .help-inline { padding-left: 0px; } label { margin-bottom: 8px; font-size: 15px; } label .sub-label.required { background-color: rgba(30, 42, 73, 0.25); color: white; border-radius: 2px; padding: 1px 4px 2px; font-size: 11px; margin-left: 5px; text-transform: uppercase; } /* Search */ .search-field input { margin: 0; padding: 0px 5px 1px 30px; height: 34px; line-height: 26px; font-size: 12px; width: 100%; -webkit-box-shadow: inset 0 0 0 1px rgba(30, 42, 73, 0.20); /* UI black */ -moz-box-shadow: inset 0 0 0 1px rgba(30, 42, 73, 0.20); /* UI black */ box-shadow: inset 0 0 0 1px rgba(30, 42, 73, 0.20); /* UI black */ } .search-field input:focus { border: none !important; -webkit-box-shadow: inset 0 0 0 2px #146EF4 !important; /* default blue */ -moz-box-shadow: inset 0 0 0 2px #146EF4 !important; /* default blue */ box-shadow: inset 0 0 0 2px #146EF4 !important; /* default blue */ } .search-field:before { font-family: 'icomoon' !important; content: "\e91c"; font-size: 16px; color: #253343; /* primary-black */ padding-left: 4px; top: 3px; position: absolute; } .idea-search-form i.icon-remove-sign { left: auto; font-size: 17px; top: 7px; right: 8px; z-index: 100; color: rgba(30, 42, 73, 1); } .idea-search-form i.icon-remove-sign:hover { color: #146EF4; } .search-field .clear-button { top: 2px; color: rgba(30, 42, 73, 1); } .search-field .clear-button:hover { color: #146EF4; } /* New Idea */ .found-ideas { margin-bottom: 25px; } .found-ideas h4 { margin-bottom: 8px; font-size: 15px; font-weight: 600; text-transform: inherit; /*color: rgba(252, 71, 131, 1);*/ /* pink */ color: rgba(29, 190, 126, 1); /* green */ } .found-ideas ul.ideas { overflow: auto; border: none; padding: 15px 15px 0 15px; margin-bottom: 10px; max-height: 300px; /*background-color: rgba(252, 71, 131, 0.10);*/ /* pink */ background-color: rgba(29, 190, 126, .1); /* green */ /*box-shadow: inset 0 0 0 1px rgba(205, 58, 106, 0.08);*/ /* dark pink */ box-shadow: inset 0 0 0 1px rgba(23, 160, 106, 0.1); /* dark green */ border-radius: 4px; } .found-ideas ul.ideas .idea { padding: 0 0; border-bottom-color: rgba(23, 160, 106, 0.15); /* dark green */ margin-bottom: 17px; } .found-ideas ul.ideas .idea:last-child { margin-bottom: 0px; } .found-ideas ul.ideas .idea .idea-details { width: 100%; margin-bottom: 12px; } .found-ideas .ideas .idea a:visited h3, .found-ideas .ideas .idea a:visited .description { color: rgba(33, 41, 51, 1); /* primary-black */ } .found-ideas ul.ideas .idea a .idea-details:hover h3 { color: #253343; /* primary-black */ /*text-decoration: underline;*/ } .found-ideas .ideas .idea .idea-details .idea-meta .status-pill { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); } /* Breadcrumbs */ .breadcrumb { margin: 0 0 17px; } .breadcrumb:only-child { margin: 0; } /* Alerts */ .alert { padding: 14px 37px 15px 16px; margin-bottom: 20px; text-shadow: none; background-color: #F7F8FA; border: 1px solid rgba(30, 42, 73, 0.1); /*background-color: #FFF9EF; border: 1px solid #F8EEE0;*/ -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #253343; /* primary-black */ font-size: 17px; line-height: 22px; } /*.alert .close { top: -1px; right: -21px; color: #253343; opacity: 0.5; }*/ .alert h4 { font-size: 19px; line-height: 25px; font-weight: 500; text-transform: capitalize; margin: 0 0 15px; display: inline-block; color: #253343; } .alert p { margin-bottom: 0; font-size: 16px; line-height: 24px; } .alert::before { font-family: 'icomoon' !important; content: "\e929"; font-size: 24px; vertical-align: text-top; margin-right: 10px; } .alert-danger::before, .alert-error::before { content: "\e92b"; } .alert-success::before { content: "\e925"; } .idea-response.alert-success::before { display: none; } .alert .close { color: transparent; text-shadow: none; top: 2px; right: -19px; line-height: 16px; opacity: .4; transition: opacity 100ms ease; } .alert .close::before { font-family: 'icomoon' !important; content: "\e91b"; font-size: 16px; color: #253343; /* primary-black */ text-shadow: none; margin-right: -16px; } .alert .close:hover { opacity: 1; } .alert-danger, .alert-error { background-color: #FFF1F5; border: 1px solid #FAE5EB; color: rgba(252, 71, 131, 1); } .alert-danger .close::before, .alert-error .close::before { color: rgba(252, 71, 131, 1); } .alert-success { background-color: rgba(29, 190, 126, .1); border: 1px solid rgba(23, 160, 106, .1); color: rgba(23, 160, 106, 1); /* dark green */ } .alert-success .close::before { color: rgba(23, 160, 106, 1); } .alert-info { background-color: #F2F7FF; border: 1px solid #E4ECFA; color: #146EF4; /* default blue */ } .alert-info .close::before { color: #146EF4; /* default blue */ } .idea-response.alert.alert-success { background-color: rgba(252, 71, 131, 0.08); /* pink */ border: 1px solid rgba(205, 58, 106, 0.08); /* dark pink */ margin-top: 30px; } .idea-response.alert.alert-success h4 { } .idea-responses .idea-response h4, .idea-responses .idea-response .time { color: rgba(252, 71, 131, 1); /* dark pink */ font-size: 15px; } /* Detail Page */ .user-content p, .comment-text p { margin: 0 0 10px; font-size: 14px; line-height: 145%; } .idea-content h2 { font-size: 36px; line-height: 130%; margin-bottom: 17px; font-weight: 300; letter-spacing: -.6px; margin-top: -8px; } .idea-content { width: 55%; } .idea-content .description { margin-bottom: 25px; } .idea-content .idea-products-and-categories { margin: 14px 0px 13px; } .idea-content .idea-products-and-categories a { background-color: white; padding: 4px 11px 5px; border-radius: 50px; font-size: 14px; color: #253343; /* primary-black */ box-shadow: inset 0 0 0 1px rgba(30, 42, 73, 0.20); /* UI black */ transition: box-shadow 100ms ease, color 100ms ease; } .idea-content .idea-products-and-categories a:hover { box-shadow: inset 0 0 0 1px #146EF4; /* default blue */ color: #146EF4; /* default blue */ text-decoration: none; } .idea-comments ul.comments>li .body .comment-header .name, .idea-comments ul.comments>li .body .comment-header .controls { font-size: 14px; color: rgba(30, 42, 73, 0.45); /* UI black */ } .idea-comments ul.comments>li .body { width: calc(100% - 55px); border-bottom: 1px solid rgba(30, 42, 73, 0.2); /* UI black */ padding-bottom: 24px; padding-left: 0; margin-bottom: 12px; } .idea-comments ul.comments>li.idea-comment-new { margin-bottom: 40px; } .sidebar-section { margin-bottom: 23px; border-bottom: 1px solid rgba(30, 42, 73, 0.2); /* UI black */ padding-bottom: 23px; } .sidebar-header { margin-bottom: 7px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0; } .related-ideas, .idea-categories { list-style-type: disc; padding-left: 17px; } .related-ideas li, .idea-categories li { margin-bottom: 6px; font-size: 14px; color: rgba(30, 42, 73, 1); } .idea-comments ul.comments>li .body > .comment-header { margin-bottom: 10px; } .user-content b, .comment-text b, .user-content b a, .comment-text b a { font-weight: 700; } .user-content ul, .comment-text ul, .user-content ol, .comment-text ol { padding: 0; margin: 0 0 12px 30px; font-size: 14px; } .user-content ul li, .comment-text ul li, .user-content ol li, .comment-text ol li { line-height: 145%; } .user-content a, .comment-text a { text-decoration: underline; color: rgba(33, 41, 51, 1); } .user-content a:hover, .comment-text a:hover { color: #146EF4; } .attachment .img-container .attachment-thumbnail { /* box-shadow: inset 0 0 0 1px rgba(30, 42, 73, 0.20); border-radius: 3px; padding: 1px; transition: box-shadow 100ms ease, color 100ms ease;*/ overflow: visible; border: none; background-color: transparent; } .attachment .img-container .attachment-thumbnail img { border-radius: 2px; } .attachment .img-container .attachment-thumbnail:hover { /*box-shadow: inset 0 0 0 2px #146EF4; */ } .attachment .img-container:hover .attachment-thumbnail img { box-shadow: 0 0 0 2px #146EF4; } .attachment .caption { color: rgba(30, 42, 73, 0.45); /* UI black */ word-wrap: break-word; line-height: 15px; } .attachments { margin-top: 5px; margin-bottom: -15px; } .attachment { padding: 0px; padding-right: 15px; margin-bottom: 15px; } .idea-response .attachment .img-container .attachment-thumbnail .image-helper { height: auto; } /*.idea-content .idea-meta li { list-style-type: none; list-style-image: url('bla.svg') }*/ /*.idea-content .idea-meta li:not(:first-child) { list-style-type: none; }*/ .idea-content .idea-meta li { font-size: 14px; line-height: 25px; } .idea-content .idea-meta li:first-child { list-style-type: none; line-height: 25px; } .idea-meta > li > .status-pill { display: inline-block; margin-top: -1px; padding-top: 0px; } .public .search-form { width: 27%; } .public .search-form .search-field { width: 100%; } .public .breadcrumb li:not(:first-child) { display: none; } /*.public .breadcrumb li .divider { display: none; }*/ .breadcrumb li a:hover { text-decoration: none; color: #212933; /* dark text color */ } .breadcrumb > li > a i { margin-right: 4px; } /* Replace detail page breakcrumb link - START */ /*.idea .breadcrumb li a::before { content: "← Back to Wishlist"; }*/ /*.breadcrumb > li > a i { display: none; }*/ /*.idea .breadcrumb li i.icon-home::before { font-family: -apple-system,BlinkMacSystemFont,"Graphik",Roboto,"Open Sans","Helvetica Neue",sans-serif,Georgia,serif; content: "←"; display: none; }*/ /* Replace detail page breakcrumb link - END */ /*.idea-meta-secondary:not(:first-child)::before { content:"Category: "; display: inline; }*/ /* Layout */ .container, .customcontainer { max-width: 1110px; padding: 0; display: block; margin-right: auto; margin-left: auto; } .portal-content { width: 70%; padding-left: 0px; float: left; box-sizing: border-box; } .portal-sidebar, .right-sidebar { width: 27%; float: right; margin-right: 0; margin-left: 3%; padding: 2%; border: 1px solid rgba(30, 42, 73, 0.15); border-radius: 3px; box-sizing: border-box; } .portal-sidebar br { display:none; } .portal-sidebar .my-ideas-filters-wrapper { margin-top: 20px; } .portal-sidebar .categories-filters-wrapper { margin-bottom: 40px; } /* Vote Buttons */ .idea-endorsement, .idea-sidebar { width: auto; text-align: left; min-width: 77px; max-width: 77px; margin-right: 17px; } .btn-vote, .btn-vote.dropdown { width: 77px; } .portal-aha-footer { min-height: 80px; } .portal-aha-footer .container { display: none; } .btn-vote .dropdown-vote { border-radius: 0 0 3px 3px; margin-top: 0px; padding: 6px 0; } .btn-vote .dropdown-vote li a { padding: 3px 9px; } /* Random */ .edit-profile .user-fields:last-child { border-bottom: none; } .portal-user.popover form .controls input { max-width: 100%; } .portal-user.popover form h3 { text-align: center; margin-top: 15px; font-size: 16px; letter-spacing: 0; font-weight: 500; margin-bottom: 15px; } .portal-user.popover form label { font-size: 14px; margin-top: 0px; } .label-private-idea { font-family: -apple-system,BlinkMacSystemFont,"Graphik",Roboto,"Open Sans","Helvetica Neue",sans-serif,Georgia,serif; line-height: 130%; font-size: 14px; text-transform: capitalize; font-weight: 500; padding: 4px 7px 3px; background-color: #FFF26A; border-radius: 3px; color: #3D3200; letter-spacing: 0; } .modal-footer { padding: 14px 15px 15px; margin-bottom: 0; text-align: right; background-color: rgba(30, 42, 73, 0.04); border-top: 1px solid rgba(30, 42, 73, 0.1); -webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .modal-header h3 { font-size: 20px; font-weight: 500; } .attachment-modal .open-attachment { padding: 4px 10px; margin: 2px 10px 0 0; letter-spacing: 0; font-weight: 500; } .attachment-modal .modal-header .close { top: inherit; right: inherit; line-height: 30px; margin-top: 0px; } .attachment-modal .modal-header .close::before { color: black; } .modal.fade.in { top: 20%; } .wishlist-logo-link { color: #253343; transition: opacity ease 100ms; } .wishlist-logo-link:hover { opacity: 0.5; color: #253343; } /* Signup */ body.external-app .login-popup section input { font-size: 14px; font-family: -apple-system,BlinkMacSystemFont,"Graphik",Roboto,"Open Sans","Helvetica Neue",sans-serif,Georgia,serif; } body.external-app .login-popup section label { font-weight: 400; } body.external-app .login-popup h2 { border-bottom: 1px solid rgba(30, 42, 73, 0.1); /* UI black */ font-size: 25px; font-weight: 300; font-family: -apple-system,BlinkMacSystemFont,"Graphik",Roboto,"Open Sans","Helvetica Neue",sans-serif,Georgia,serif; } .form-horizontal .control-label { padding-top: 9px; } /* MCE Overrides */ .mce-panel { border: 0 solid rgba(30, 42, 73, 0.2); /* UI black */ background-color: white; } .aha-editor-link-edit-panel .mce-container.mce-tinymce:not(.mce-tinymce-inline).mce-edit-focus, #tinymce .mce-container.mce-tinymce:not(.mce-tinymce-inline).mce-edit-focus { border-color: #146EF4; box-shadow: 0 0 0 1px #146EF4; /* default blue */ outline: none; } .mce-edit-area.mce-container.mce-panel.mce-last.mce-stack-layout-item { border-color: transparent; } #tinymce, .mce-content-body.user-content { background-color: #FFFFFF; font-family: -apple-system,BlinkMacSystemFont,"Graphik",Roboto,"Open Sans","Helvetica Neue",sans-serif,Georgia,serif !important; font-size: 14px !important; line-height: 17px !important; margin: 10px !important; padding: 2px !important; } .mce-btn i { text-shadow: none; } .attachment-button { padding: 0; font-size: 14px; color: rgba(30, 42, 73, 0.45); /* UI black */ line-height: 140%; margin-bottom: 19px; } .aha-editor-link-edit-panel .mce-container { background: #F4F4F6; /* UI black */ } .mce-container.mce-flow-layout-item.mce-btn-group:nth-child(1) { display:none; } .mce-container.mce-flow-layout-item.mce-btn-group:nth-child(2) > div .mce-widget.mce-btn:nth-child(3) { display:none; } .mce-container.mce-flow-layout-item.mce-btn-group:nth-child(2) > div .mce-widget.mce-btn:nth-child(4) { display:none; } .mce-container.mce-flow-layout-item.mce-btn-group:nth-child(3) { display:none; } .mce-container.mce-flow-layout-item.mce-btn-group:nth-child(4) > div .mce-widget.mce-btn:nth-child(3) { display:none; } .mce-container.mce-flow-layout-item.mce-btn-group:nth-child(4) > div .mce-widget.mce-btn:nth-child(4) { display:none; } .mce-container.mce-flow-layout-item.mce-btn-group:nth-child(5) > div .mce-widget.mce-btn:nth-child(1) { display:none; } .mce-container.mce-flow-layout-item.mce-btn-group:nth-child(7) { display:none; } #mce-modal-block.mce-in { opacity: .6; filter: alpha(opacity=60); } .mce-container.mce-panel.mce-floatpanel.mce-window.mce-in { border: none; border-radius: 6px; } .mce-container .mce-btn.mce-primary button { text-shadow: none; font-size: 14px; padding: 0px; background-color: #146EF4; } .mce-container .mce-btn.mce-primary button:hover { background-color: rgba(58, 76, 211, 1); } .mce-floatpanel .mce-title { font-family: -apple-system,BlinkMacSystemFont,"Graphik",Roboto,"Open Sans","Helvetica Neue",sans-serif,Georgia,serif; font-size: 20px; line-height: 1.2; font-weight: 400; margin: 4px 0px; } .mce-tooltip-inner { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .aha-editor-link-edit-panel .mce-btn:hover, #tinymce .mce-btn:hover { background: transparent; } .aha-editor-link-edit-panel .mce-btn:hover button i, #tinymce .mce-btn:hover button i { color: #146EF4; /* primary-blue */ } .aha-editor-link-edit-panel .mce-btn.mce-active, #tinymce .mce-btn.mce-active, .aha-editor-link-edit-panel .mce-btn.mce-active:hover, #tinymce .mce-btn.mce-active:hover, .mce-btn:not(.mce-disabled):active { background-color: transparent; background-image: none; background-image: none; background-image: none; background-image: none; background-image: none; background-repeat: repeat-x; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .aha-editor-link-edit-panel .mce-btn.mce-active button i, #tinymce .mce-btn.mce-active button i, .aha-editor-link-edit-panel .mce-btn.mce-active:hover button i, #tinymce .mce-btn.mce-active:hover button i { color: #146EF4; /* primary-blue */ } .mce-edit-area.mce-container.mce-panel.mce-last.mce-stack-layout-item iframe{ min-height: 110px; } /* Footer Styles */ footer { padding: 40px 0; text-align: center; margin-top: 60px; border-top: 1px solid #E9EAED; } .footer-text { color: rgba(133, 138, 144, 1); /* dim text grey */; display: inline-block; font-weight: 300; font-size: 14px; } .footer-divider { margin: 0 5px; } .footer-link { color: rgba(133, 138, 144, 1); /* dim text grey */; } .footer-link:hover, .footer-link:focus { color: rgba(133, 138, 144, 1); /* dim text grey */; text-decoration: underline; } @media (min-width: 767px) { .portal-nav .search-form { -webkit-justify-content: flex-start; justify-content: flex-start; } } @media (max-width: 1110px) { .container, .customcontainer { padding: 0 10px; } @media (max-width: 960px) { .right-sidebar, .private .right-sidebar, .public .right-sidebar, .submit-only .right-sidebar { width: 100%; box-sizing: border-box; margin: 0 auto; float: none; clear: left; } } @media (max-width: 767px) { .public .search-form { width: 100%; margin-bottom: 15px; } } @media (max-width: 670px) { .private .portal-sidebar, .public .portal-sidebar, .submit-only .portal-sidebar { width: 100%; margin-right: 0; margin-bottom: 20px; margin-left: 0; height: 100%; } .public .idea-sidebar .idea-endorsement { margin: 0 auto 0 0; } .private .right-sidebar, .public .right-sidebar, .submit-only .right-sidebar { padding: 15px; width: 100%; } .ideas .idea .idea-details .idea-meta .idea-meta-created { width: 40%; } .private .search-query, .public .search-query, .submit-only .search-query { display: block; } .public .idea-sidebar { width: 20%; margin-right: 2%; min-width: 0; max-width: none; } .public .idea-content { width: 78%; } .breadcrumb { margin: 0px; } } @media (max-width: 500px) { .nav-tabs>li>a { padding: 13px 13px; } .idea-endorsement, .idea-sidebar { margin-bottom: 18px; float: left; width: 15%; } } @media (max-width: 400px) { .public .idea-sidebar { width: 20%; margin-right: 5%; } .public .idea-content { width: 75%; } } /* ################################################### */ /* ################################################### */ /* END */ /* ################################################### */ /* ################################################### */ </style> <header class="webflow-header">  <div class="navbar w-nav" data-animation="default" data-collapse="small" data-duration="400"> <div class="customcontainer w-clearfix"> <a class="logo w-clearfix w-nav-brand" href="https://webflow.com"><img alt="home" class="logoimage" src="https://uploads-ssl.webflow.com/52b1d97cd25933e36e000134/6529c1beac2fb6a71ab69e60_Full_Logo_Blue_White%20(1).svg" width="122"> </a> <a class="logo w-clearfix w-nav-brand" href="https://wishlist.webflow.com"> <div class="portalname">Wishlist</div> </a> <nav class="nav-menu w-nav-menu" role="navigation"> <a class="navlink w-nav-link" href="https://university.webflow.com/videos">Courses</a> <a class="navlink w-nav-link" href="https://university.webflow.com/articles">Guides</a> <a class="navlink w-nav-link" href="https://forum.webflow.com/">Forum</a> <a class="navlink w-nav-link" href="https://university.webflow.com/contact">Contact</a> <div class="w-dropdown" data-delay="0" data-hover="1"> <div class="navdropdown w-dropdown-toggle"> <div class="navdropdowntext">More</div> <div class="navdropdownicon w-icon-dropdown-toggle"></div> </div> <nav class="dropdownmenu w-dropdown-list"> <a class="dropdownmenulink w-dropdown-link" href="https://developers.webflow.com">API Docs</a> <a class="dropdownmenulink w-dropdown-link" href="https://university.webflow.com/glossary">Glossary</a> </nav> </div> </nav> <div class="menubutton w-nav-button"> <div class="menubuttonicon w-icon-nav-menu"></div> </div> </div> </div> <script type="text/javascript" src="https://daks2k3a4ib2z.cloudfront.net/52cf50823d343d6104000288/js/webflow.b67a707b9.js"></script> </header> <div class="container">  <div class="idea" id="6616608124028682119"> <div class="portal-nav"> <ul class="breadcrumb"> <li> <a href="/ideas"> <i class='fa-regular fa-home'></i> Home </a> <span class="divider">/</span> </li> <li class="active"> <a href="/ideas?project=WEBFLOW">WEBFLOW</a>-I-1528 <span class="divider">/</span> </li> <li> <a href="/portal_session/new?return_to=%2Fideas%2Fnew">New idea</a> </li> </ul> <div class="search-form"> <form class="form-horizontal idea-search-form" action="/ideas/search" accept-charset="UTF-8" method="get"> <div class="search-field"> <input type="text" name="query" id="query" class="input-medium search-query" placeholder="Search ideas" aria-label="Search ideas" /> <a class="fa-regular fa-circle-xmark clear-button" style="display:none;" href="/ideas"></a> </div> </form></div> </div> <div class="clearfix"></div> <div class="idea-sidebar"> <div class="idea-endorsement" id="idea-6616608124028682119-endorsement"> <a class="btn-vote" data-disable="true" href="/auth/jwt?return_to=%2Fideas%2FWEBFLOW-I-1528%3Freturn_to_action%3Dvote_6616608124028682119"> <span class="vote-count"> 1,292 </span> <span class="vote-status"> Vote </span> </a> <div class="popover vote-popover portal-user"></div> </div> </div> <div class="idea-content"> <div class="ajax-flash"></div> <h2> Support an SVG-specific Element, as an alternative to the Image element </h2> <div class="description"> <div class="note" data-reactive-preserve-attributes="true"> <p>Currently SVGs can only be added through the Image element, or the Embed element. Both of these approaches have issues, which an SVG-specific element could solve neatly.</p> <p>SVG via Embed element problems;</p> <ul> <li>Embeds are not permitted within links, making menus difficult</li> <li>Embeds cannot be previewed in the designer </li> </ul> <p>SVG via Image element problems;</p> <ul> <li>The SVG cannot be affected by CSS when it is referenced through an <img> tag</li> <li>The currentColor feature of SVGs does not function </li> <li>Creates a large number of HTTP requests for icon-rich designs </li> </ul> <p><b>SOLUTION</b></p> <p>An SVG Element which...</p> <ol> <li>Works similarly to the Image element in terms of canvas placement and config options</li> <li>Can be associated with any SVG element in assets</li> <li>Adds Embed as an option, which will import the SVG content on build</li> <li>Support additional SVG element options, such as<span> path-id, aria-hidden,</span> <span>focusable, and </span><span>viewbox </span> </li> </ol> <p><b>WHY THIS WOULD BE AWESOME</b></p> <ol> <li>It would allow SVG's to be used with currentColor, since embedding would be allowed</li> <li>It would avoid the need for Embeds (which cannot be used in links) </li> <li>It would efficiently use embedded / inline data, rather than doing multiple HTTP requests</li> <li> <span>It would support SVG-specific attributes such as aria-hidden,</span> <span>focusable, and </span><span>viewbox </span> </li> <li><span>Allow SVG libraries, with path-id referencing </span></li> </ol> </div> </div> <ul class="idea-meta"> <li> <span class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/202dc10bfedfbabe0d83f260aac99861?default=mm&rating=G&size=32" width="32" height="32" /> </span> Michael Wells </li> <li> Oct 26 2018 </li> <li> <span class="status-pill" title="Reviewed" style="border: none; background-color: #E3ECFE">Reviewed</span> </li> <div class="clearfix"></div> </ul> <div class="idea-products-and-categories"> <a href="/ideas?category=6852885127576797563">Accessibility</a> / <a href="/ideas?category=6374425167182394346">Assets</a> / <a href="/ideas?category=6374425222225881267">Elements</a> </div> <div class="tabbable"> <ul class="nav nav-tabs"> <li class="active"> <a data-toggle="tab" href="#comments"> <span class="comment-count"> Comments (32) </span> </a> </li> <li> <a data-toggle="tab" href="#votes"> <span class="vote-count"> Votes (1292) </span> </a> </li> <li> <a data-toggle="tab" href="#merged-ideas"> Merged ideas (2) </a> </li> </ul> <div class="tab-content comments-tab-content"> <div class="tab-pane active idea-comments" id="comments"> <ul class="comments"> <li class="idea-comment idea-comment-new " id="idea-comment-new--top-level"> <div class="full-body"> <div class="save-btn"> <a class="btn btn-small btn-primary btn-outline" href="/auth/jwt?return_to=%2Fideas%2FWEBFLOW-I-1528">Post comment</a> </div> </div> <div class="popover comment-popover comment-popover--classic comment-popover--top-level portal-user"></div> </li> <script> //<![CDATA[ //]]> </script> <li class="comment"> <div class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/d273257d2d3d17085f782bc4ec09551e?default=mm&rating=G&size=40" width="40" height="40" /> </div> <div class="body"> <div class="comment-header"> <div> <span class="name"> Sweet Bonanza commented </span> </div> <div class="controls"> <span class="posted"> August 21, 2024 16:20 </span> </div> <div class="clearfix"></div> </div> <div class="comment-text aha-editor-field aha-editor-field-static aha-editor-field-static-content"> <p>Hello all! Sweet Bonanza <a href="https://sweet-bonanza.com" rel="nofollow noreferrer noopener" target="_blank">https://sweet-bonanza.com</a> has been my go-to slot game for the past few weeks. The graphics are vibrant and the candy theme is just so much fun. The gameplay is really engaging, especially with the tumble feature that can keep the wins coming. The free spins round is where you can really hit it big, thanks to the multipliers that can get quite high. It’s not always easy to win, but when you do, it feels great. If you’re into slots that are both fun and have the potential for big payouts, give this one a try!</p> </div> <div class="attachments attachments--grid"> <div class="clearfix"></div> <div class="attachment-modal hide fade modal"> <aha-modal-header><span slot="title"> Attachments <a class="btn btn-outline open-attachment pull-right" data-no-turbolink="true" target="_blank" rel="noopener noreferrer" href="#">Open full size</a> </span></aha-modal-header> <div class="modal-body center "> <div id="attachments-carousel-7405628418877188333" class="carousel slide"> <div class="carousel-inner"> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li class="comment"> <div class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/c3d00b83460de916ed7c93e66adb2690?default=mm&rating=G&size=40" width="40" height="40" /> </div> <div class="body"> <div class="comment-header"> <div> <span class="name"> Cyrille Berne commented </span> </div> <div class="controls"> <span class="posted"> May 19, 2024 17:05 </span> </div> <div class="clearfix"></div> </div> <div class="comment-text aha-editor-field aha-editor-field-static aha-editor-field-static-content"> <p>It would be better if the image element and the asset panel were both revisited, enabling the use of currentColor and other SVG attributes (preserveAspectRatio, stroke-width), and allowing to edit SVG code and replace an image via the asset panel.</p> </div> <div class="attachments attachments--grid"> <div class="clearfix"></div> <div class="attachment-modal hide fade modal"> <aha-modal-header><span slot="title"> Attachments <a class="btn btn-outline open-attachment pull-right" data-no-turbolink="true" target="_blank" rel="noopener noreferrer" href="#">Open full size</a> </span></aha-modal-header> <div class="modal-body center "> <div id="attachments-carousel-7370757889941639453" class="carousel slide"> <div class="carousel-inner"> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li class="comment"> <div class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/6fbceda5fed4bc0c26cf35a40aae7e3d?default=mm&rating=G&size=40" width="40" height="40" /> </div> <div class="body"> <div class="comment-header"> <div> <span class="name"> Lennart Hennig commented </span> </div> <div class="controls"> <span class="posted"> April 23, 2024 20:32 </span> </div> <div class="clearfix"></div> </div> <div class="comment-text aha-editor-field aha-editor-field-static aha-editor-field-static-content"> <p>Seriously, another huge potential and the webflow team is sleeping and ignoring the whole wishlist. Guys its a question of time till your competitors are eating your lunch if you don't start shipping features your customers are asking for since half a decade. Embarrassing.</p> </div> <div class="attachments attachments--grid"> <div class="clearfix"></div> <div class="attachment-modal hide fade modal"> <aha-modal-header><span slot="title"> Attachments <a class="btn btn-outline open-attachment pull-right" data-no-turbolink="true" target="_blank" rel="noopener noreferrer" href="#">Open full size</a> </span></aha-modal-header> <div class="modal-body center "> <div id="attachments-carousel-7361163254714265239" class="carousel slide"> <div class="carousel-inner"> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li class="comment"> <div class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/449f57c6269ffb0a86cb451319c478e0?default=mm&rating=G&size=40" width="40" height="40" /> </div> <div class="body"> <div class="comment-header"> <div> <span class="name"> Joel Martin commented </span> </div> <div class="controls"> <span class="posted"> February 05, 2024 20:25 </span> </div> <div class="clearfix"></div> </div> <div class="comment-text aha-editor-field aha-editor-field-static aha-editor-field-static-content"> <p>Webflow, how is it possible that you have not shipped this even though it has been on the wishlist for 5 years?! This would be such a simple and useful element!! I want to use dynamic icons in the CMS and there is no way to do this smoothly so that the SVG will inherit the current-color.</p><p>So frustrating how unresponsive Webflow's wishlist has become. What's the point of even having it?</p> </div> <div class="attachments attachments--grid"> <div class="clearfix"></div> <div class="attachment-modal hide fade modal"> <aha-modal-header><span slot="title"> Attachments <a class="btn btn-outline open-attachment pull-right" data-no-turbolink="true" target="_blank" rel="noopener noreferrer" href="#">Open full size</a> </span></aha-modal-header> <div class="modal-body center "> <div id="attachments-carousel-7332216611335103060" class="carousel slide"> <div class="carousel-inner"> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li class="comment"> <div class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/5de80586e58a0019474a43913a8d6752?default=mm&rating=G&size=40" width="40" height="40" /> </div> <div class="body"> <div class="comment-header"> <div> <span class="name"> Raja digital Edc commented </span> </div> <div class="controls"> <span class="posted"> September 28, 2023 02:12 </span> </div> <div class="clearfix"></div> </div> <div class="comment-text aha-editor-field aha-editor-field-static aha-editor-field-static-content"> <p>blue, and yellow, while the highest paying symbols are fully themed and include cups, rings, immortals, and crowns. One of the first things you <a href="https://rajaslot88.sgp1.cdn.digitaloceanspaces.com/raja-slot.html" rel="nofollow noreferrer noopener" target="_blank">Rajaslot</a> notice when </p><p><br></p> </div> <div class="attachments attachments--grid"> <div class="clearfix"></div> <div class="attachment-modal hide fade modal"> <aha-modal-header><span slot="title"> Attachments <a class="btn btn-outline open-attachment pull-right" data-no-turbolink="true" target="_blank" rel="noopener noreferrer" href="#">Open full size</a> </span></aha-modal-header> <div class="modal-body center "> <div id="attachments-carousel-7283693844476952504" class="carousel slide"> <div class="carousel-inner"> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li class="comment"> <div class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/c771877c7d2f4af590be63d5f88950c4?default=mm&rating=G&size=40" width="40" height="40" /> </div> <div class="body"> <div class="comment-header"> <div> <span class="name"> Kambojaedc Digi commented </span> </div> <div class="controls"> <span class="posted"> September 28, 2023 01:08 </span> </div> <div class="clearfix"></div> </div> <div class="comment-text aha-editor-field aha-editor-field-static aha-editor-field-static-content"> <p>explained below, which makes playing with it even more fun. The Sweet Bonanza feature includes free spins, so players can get some spins <a href="https://slot-server-kamboja.sgp1.cdn.digitaloceanspaces.com/slot-kamboja.html" rel="nofollow noreferrer noopener" target="_blank">slot kamboja</a> </p><p><br></p> </div> <div class="attachments attachments--grid"> <div class="clearfix"></div> <div class="attachment-modal hide fade modal"> <aha-modal-header><span slot="title"> Attachments <a class="btn btn-outline open-attachment pull-right" data-no-turbolink="true" target="_blank" rel="noopener noreferrer" href="#">Open full size</a> </span></aha-modal-header> <div class="modal-body center "> <div id="attachments-carousel-7283677401215851429" class="carousel slide"> <div class="carousel-inner"> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li class="comment"> <div class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/9ec5f4f31c0abe4331d2b1f39c4de9a1?default=mm&rating=G&size=40" width="40" height="40" /> </div> <div class="body"> <div class="comment-header"> <div> <span class="name"> Pde Admin commented </span> </div> <div class="controls"> <span class="posted"> April 25, 2023 18:44 </span> </div> <div class="clearfix"></div> </div> <div class="comment-text aha-editor-field aha-editor-field-static aha-editor-field-static-content"> <p>This is table stakes for any modern business site. I look forward to this being done soon. </p> </div> <div class="attachments attachments--grid"> <div class="clearfix"></div> <div class="attachment-modal hide fade modal"> <aha-modal-header><span slot="title"> Attachments <a class="btn btn-outline open-attachment pull-right" data-no-turbolink="true" target="_blank" rel="noopener noreferrer" href="#">Open full size</a> </span></aha-modal-header> <div class="modal-body center "> <div id="attachments-carousel-7226060219941784362" class="carousel slide"> <div class="carousel-inner"> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li class="comment"> <div class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/c737477226c9b5f4b3cc12a2ae3ec8cd?default=mm&rating=G&size=40" width="40" height="40" /> </div> <div class="body"> <div class="comment-header"> <div> <span class="name"> Connor Hansen commented </span> </div> <div class="controls"> <span class="posted"> November 30, 2022 19:49 </span> </div> <div class="clearfix"></div> </div> <div class="comment-text aha-editor-field aha-editor-field-static aha-editor-field-static-content"> <p>2022 and this is still not available??? Webflow?????????</p> </div> <div class="attachments attachments--grid"> <div class="clearfix"></div> <div class="attachment-modal hide fade modal"> <aha-modal-header><span slot="title"> Attachments <a class="btn btn-outline open-attachment pull-right" data-no-turbolink="true" target="_blank" rel="noopener noreferrer" href="#">Open full size</a> </span></aha-modal-header> <div class="modal-body center "> <div id="attachments-carousel-7171898579323249470" class="carousel slide"> <div class="carousel-inner"> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li class="comment"> <div class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/2fa9b635b61cbb66ca5e181cdcd10cec?default=mm&rating=G&size=40" width="40" height="40" /> </div> <div class="body"> <div class="comment-header"> <div> <span class="name"> Esben Engsted commented </span> </div> <div class="controls"> <span class="posted"> September 15, 2022 08:57 </span> </div> <div class="clearfix"></div> </div> <div class="comment-text aha-editor-field aha-editor-field-static aha-editor-field-static-content"> <p>This would be great, have had the above problems stated with SVG's recently. <br>Getting the currentColor feature to work would be a nice little fix at least. </p> </div> <div class="attachments attachments--grid"> <div class="clearfix"></div> <div class="attachment-modal hide fade modal"> <aha-modal-header><span slot="title"> Attachments <a class="btn btn-outline open-attachment pull-right" data-no-turbolink="true" target="_blank" rel="noopener noreferrer" href="#">Open full size</a> </span></aha-modal-header> <div class="modal-body center "> <div id="attachments-carousel-7143528115062940564" class="carousel slide"> <div class="carousel-inner"> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li class="comment"> <div class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/e1922b53a4f323cf8a51ba8239e7fa28?default=mm&rating=G&size=40" width="40" height="40" /> </div> <div class="body"> <div class="comment-header"> <div> <span class="name"> Dark Hawk commented </span> </div> <div class="controls"> <span class="posted"> July 18, 2022 06:54 </span> </div> <div class="clearfix"></div> </div> <div class="comment-text aha-editor-field aha-editor-field-static aha-editor-field-static-content"> <p>Thank you. I will try your methods to increase my knowledge. </p> </div> <div class="attachments attachments--grid"> <div class="clearfix"></div> <div class="attachment-modal hide fade modal"> <aha-modal-header><span slot="title"> Attachments <a class="btn btn-outline open-attachment pull-right" data-no-turbolink="true" target="_blank" rel="noopener noreferrer" href="#">Open full size</a> </span></aha-modal-header> <div class="modal-body center "> <div id="attachments-carousel-7121602481547086758" class="carousel slide"> <div class="carousel-inner"> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li class="comment"> <div class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/7ed315e0294fdec8abefb43a542d57ed?default=mm&rating=G&size=40" width="40" height="40" /> </div> <div class="body"> <div class="comment-header"> <div> <span class="name"> Guest commented </span> </div> <div class="controls"> <span class="posted"> June 16, 2022 13:59 </span> </div> <div class="clearfix"></div> </div> <div class="comment-text aha-editor-field aha-editor-field-static aha-editor-field-static-content"> <p><b><span style="color:#FF0000;"></span></b><a href="https://pg-slot.game/%e0%b8%9a%e0%b8%97%e0%b8%84%e0%b8%a7%e0%b8%b2%e0%b8%a1/pg/%e0%b9%80%e0%b8%97%e0%b8%84%e0%b8%99%e0%b8%b4%e0%b8%84%e0%b9%80%e0%b8%a5%e0%b9%88%e0%b8%99-pg-%e0%b8%94%e0%b8%b9%e0%b9%84%e0%b8%94%e0%b9%89%e0%b8%97%e0%b8%b5%e0%b9%88-pantip/" rel="nofollow noreferrer noopener" target="_blank"><b><span style="color:#FF0000;">เทคนิคเล่น Pg ดูได้ที่ Pantip</span></b></a><b><span style="color:#FF0000;"> แต่ไม่ใช่แค่ที่ pantip เท่านั้น google ยังมีสูตรการเล่นมากมายที่ช่วยทำให้คุณสนุกกับการเล่น </span></b><a href="https://pg-slot.game/" rel="nofollow noreferrer noopener" target="_blank"><b><span style="color:#0000FF;">pgslot</span></b></a><b><span style="color:#FF0000;"> ของเรามากยิ่งขึ้นกับเว็บของเราที่กำลังมาแรงสุดๆจนหยุดไม่อยู่ในตอนนี้</span></b></p> </div> <div class="attachments attachments--grid"> <div class="clearfix"></div> <div class="attachment-modal hide fade modal"> <aha-modal-header><span slot="title"> Attachments <a class="btn btn-outline open-attachment pull-right" data-no-turbolink="true" target="_blank" rel="noopener noreferrer" href="#">Open full size</a> </span></aha-modal-header> <div class="modal-body center "> <div id="attachments-carousel-7109837222670724382" class="carousel slide"> <div class="carousel-inner"> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li class="comment"> <div class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/f011db7c0094317e84f2259ad6a1d147?default=mm&rating=G&size=40" width="40" height="40" /> </div> <div class="body"> <div class="comment-header"> <div> <span class="name"> Cookies & MILK commented </span> </div> <div class="controls"> <span class="posted"> May 18, 2022 13:11 </span> </div> <div class="clearfix"></div> </div> <div class="comment-text aha-editor-field aha-editor-field-static aha-editor-field-static-content"> <p>Another example of WF droping the ball on simple features. </p> </div> <div class="attachments attachments--grid"> <div class="clearfix"></div> <div class="attachment-modal hide fade modal"> <aha-modal-header><span slot="title"> Attachments <a class="btn btn-outline open-attachment pull-right" data-no-turbolink="true" target="_blank" rel="noopener noreferrer" href="#">Open full size</a> </span></aha-modal-header> <div class="modal-body center "> <div id="attachments-carousel-7099063294326648654" class="carousel slide"> <div class="carousel-inner"> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li class="comment"> <div class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/20335ff73f44f6baa14c3257fde0a57a?default=mm&rating=G&size=40" width="40" height="40" /> </div> <div class="body"> <div class="comment-header"> <div> <span class="name"> INAGREAT commented </span> </div> <div class="controls"> <span class="posted"> April 07, 2022 22:39 </span> </div> <div class="clearfix"></div> </div> <div class="comment-text aha-editor-field aha-editor-field-static aha-editor-field-static-content"> <p>I really can't believe this still isn't done! What the HELL Webflow. This comment was created all the way back in 2018 and it's now 2022. This is one of the most fundamental features that should have been available from the beginning. All websites need SVGs at some point for many elements like custom icons and buttons... There are other web builders that provide this and Webflow still doesn't. It's Unbelievable how you guys completely ignore this community of paying customers! 🤬</p> </div> <div class="attachments attachments--grid"> <div class="clearfix"></div> <div class="attachment-modal hide fade modal"> <aha-modal-header><span slot="title"> Attachments <a class="btn btn-outline open-attachment pull-right" data-no-turbolink="true" target="_blank" rel="noopener noreferrer" href="#">Open full size</a> </span></aha-modal-header> <div class="modal-body center "> <div id="attachments-carousel-7083995346495373665" class="carousel slide"> <div class="carousel-inner"> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li class="comment"> <div class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/d66c3f116ea4ad1bd4011f32ea017278?default=mm&rating=G&size=40" width="40" height="40" /> </div> <div class="body"> <div class="comment-header"> <div> <span class="name"> Guest commented </span> </div> <div class="controls"> <span class="posted"> February 21, 2022 04:59 </span> </div> <div class="clearfix"></div> </div> <div class="comment-text aha-editor-field aha-editor-field-static aha-editor-field-static-content"> <p>Thank you for sharing your valuable solution, it's work properly.</p><p><br></p><p>https://www.myloweslife.mobi/</p> </div> <div class="attachments attachments--grid"> <div class="clearfix"></div> <div class="attachment-modal hide fade modal"> <aha-modal-header><span slot="title"> Attachments <a class="btn btn-outline open-attachment pull-right" data-no-turbolink="true" target="_blank" rel="noopener noreferrer" href="#">Open full size</a> </span></aha-modal-header> <div class="modal-body center "> <div id="attachments-carousel-7067023139409082450" class="carousel slide"> <div class="carousel-inner"> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li class="comment"> <div class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/26454e2f4635e9bb5dc819e1dc2b2c39?default=mm&rating=G&size=40" width="40" height="40" /> </div> <div class="body"> <div class="comment-header"> <div> <span class="name"> Thanh Miller commented </span> </div> <div class="controls"> <span class="posted"> February 10, 2022 06:44 </span> </div> <div class="clearfix"></div> </div> <div class="comment-text aha-editor-field aha-editor-field-static aha-editor-field-static-content"> <p>Thanks for the update. I'll be sure to keep an eye on this thread.</p><p><a href="https://www.indigocard.run/" rel="nofollow noreferrer noopener" target="_blank">indigocard</a></p> </div> <div class="attachments attachments--grid"> <div class="clearfix"></div> <div class="attachment-modal hide fade modal"> <aha-modal-header><span slot="title"> Attachments <a class="btn btn-outline open-attachment pull-right" data-no-turbolink="true" target="_blank" rel="noopener noreferrer" href="#">Open full size</a> </span></aha-modal-header> <div class="modal-body center "> <div id="attachments-carousel-7062968450440615255" class="carousel slide"> <div class="carousel-inner"> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li class="comment"> <div class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/fa0dde4e43a65166b110df6a55d6972b?default=mm&rating=G&size=40" width="40" height="40" /> </div> <div class="body"> <div class="comment-header"> <div> <span class="name"> Guest commented </span> </div> <div class="controls"> <span class="posted"> February 07, 2022 09:12 </span> </div> <div class="clearfix"></div> </div> <div class="comment-text aha-editor-field aha-editor-field-static aha-editor-field-static-content"> <p>Thank you for sharing your valuable solution, it's work properly.</p> </div> <div class="attachments attachments--grid"> <div class="clearfix"></div> <div class="attachment-modal hide fade modal"> <aha-modal-header><span slot="title"> Attachments <a class="btn btn-outline open-attachment pull-right" data-no-turbolink="true" target="_blank" rel="noopener noreferrer" href="#">Open full size</a> </span></aha-modal-header> <div class="modal-body center "> <div id="attachments-carousel-7061893262546797240" class="carousel slide"> <div class="carousel-inner"> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li class="comment"> <div class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/744614ff8ebb8f05654dda7fbe8b3f57?default=mm&rating=G&size=40" width="40" height="40" /> </div> <div class="body"> <div class="comment-header"> <div> <span class="name"> Ladarius Lang commented </span> </div> <div class="controls"> <span class="posted"> February 01, 2022 06:28 </span> </div> <div class="clearfix"></div> </div> <div class="comment-text aha-editor-field aha-editor-field-static aha-editor-field-static-content"> <p>Did you have a fix on this issue? <a href="https://www.mygiftcardsite.page/" rel="nofollow noreferrer noopener" target="_blank">MyGiftCardSite</a> Challenging a relative issue yet no response from anyone and couldn't see this point taking a gander at in google.</p> </div> <div class="attachments attachments--grid"> <div class="clearfix"></div> <div class="attachment-modal hide fade modal"> <aha-modal-header><span slot="title"> Attachments <a class="btn btn-outline open-attachment pull-right" data-no-turbolink="true" target="_blank" rel="noopener noreferrer" href="#">Open full size</a> </span></aha-modal-header> <div class="modal-body center "> <div id="attachments-carousel-7059624571412907515" class="carousel slide"> <div class="carousel-inner"> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li class="comment"> <div class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/ca0197cefe4c5865bd9c6ae447d2ee84?default=mm&rating=G&size=40" width="40" height="40" /> </div> <div class="body"> <div class="comment-header"> <div> <span class="name"> Jacob Williams commented </span> </div> <div class="controls"> <span class="posted"> January 08, 2022 21:35 </span> </div> <div class="clearfix"></div> </div> <div class="comment-text aha-editor-field aha-editor-field-static aha-editor-field-static-content"> <p>This would be amazing. WE NEED THIS!</p> </div> <div class="attachments attachments--grid"> <div class="clearfix"></div> <div class="attachment-modal hide fade modal"> <aha-modal-header><span slot="title"> Attachments <a class="btn btn-outline open-attachment pull-right" data-no-turbolink="true" target="_blank" rel="noopener noreferrer" href="#">Open full size</a> </span></aha-modal-header> <div class="modal-body center "> <div id="attachments-carousel-7050952200278467789" class="carousel slide"> <div class="carousel-inner"> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li class="comment"> <div class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/e318416c916c9842f02c7ab7f22f15b5?default=mm&rating=G&size=40" width="40" height="40" /> </div> <div class="body"> <div class="comment-header"> <div> <span class="name"> Nils commented </span> </div> <div class="controls"> <span class="posted"> January 02, 2022 22:08 </span> </div> <div class="clearfix"></div> </div> <div class="comment-text aha-editor-field aha-editor-field-static aha-editor-field-static-content"> <p>PLEASE!</p> </div> <div class="attachments attachments--grid"> <div class="clearfix"></div> <div class="attachment-modal hide fade modal"> <aha-modal-header><span slot="title"> Attachments <a class="btn btn-outline open-attachment pull-right" data-no-turbolink="true" target="_blank" rel="noopener noreferrer" href="#">Open full size</a> </span></aha-modal-header> <div class="modal-body center "> <div id="attachments-carousel-7048734082997659143" class="carousel slide"> <div class="carousel-inner"> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li class="comment"> <div class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/1af5b9b15aa163a1fa0dad21d43d4abe?default=mm&rating=G&size=40" width="40" height="40" /> </div> <div class="body"> <div class="comment-header"> <div> <span class="name"> Winona Homenick commented </span> </div> <div class="controls"> <span class="posted"> November 25, 2021 07:49 </span> </div> <div class="clearfix"></div> </div> <div class="comment-text aha-editor-field aha-editor-field-static aha-editor-field-static-content"> <p>Embed an SVG via an <img> element, you just need to reference it in the src attribute as you'd expect. You will need a height or a width attribute</p> </div> <div class="attachments attachments--grid"> <div class="clearfix"></div> <div class="attachment-modal hide fade modal"> <aha-modal-header><span slot="title"> Attachments <a class="btn btn-outline open-attachment pull-right" data-no-turbolink="true" target="_blank" rel="noopener noreferrer" href="#">Open full size</a> </span></aha-modal-header> <div class="modal-body center "> <div id="attachments-carousel-7034411601172832612" class="carousel slide"> <div class="carousel-inner"> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li class="comment comment-more"> <a class="js-comment-more-link" href="#">Load older comments</a> </li> <script> //<![CDATA[ $(".js-comment-more-link").rebind('click.load-more-comments', function (event) { event.preventDefault(); $('.comment-more').remove(); $.get("https://wishlist.webflow.com/ideas/6616608124028682119/idea_comments.js?before=2021-11-25T07%3A49%3A40Z") }); //]]> </script> </ul> </div> <div class="tab-pane" id="votes"> <ul class="show-votes"> <li data-id="7475700817646067174" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/dca5f197332ba9346f489220ae3abd11?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7473468927118552396" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/5585e2b1c2dd1cd6d7ce7a4b0bb2f6ec?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7472598251532658598" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/b4b76c3bbd6ce5e0e029360ab6915205?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7464270251763867233" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/404327e225e9b23986aa9340834f615c?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7463065405247086044" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/c9d0772b72764f0d25cb8329b20bd287?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7462403626392196466" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/6354117142f4b84ceb142096a70a67bc?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7462325032302643932" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/8b6ef5bfd78a2cfa92988ae0e10715c5?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7461395986283993936" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/18e27c7b2e69385cd6d373bf19a21cd2?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7458568147493265949" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/f4d4288b10fe26e30cb7ab1133a5c0cb?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7455624746290344555" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/4e4a0af2d61fa2e54daf4b1518c7c084?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7450483093646060381" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/9999fc6cc1eb4f5bf97b8ef66d744ee0?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7440919974987086366" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/9529a049d82cebbe918068cea1428f18?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7437763078958411839" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/f2e5b466621beb56fb6ea2393c4ba512?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7436898670495852228" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/792bb2d140abbf91de4cbeeb6ac64d7f?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7436160311596021947" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/667b406b25bfe9b9aa055fbfebde3047?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7435785717427502226" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/680bb975c3c5d81de0cc9ec152af7d0a?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7427600308077604002" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/83ce05b9af79ea81d6f2b7bca17d7448?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7425362646149383512" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/3cc80f204fd24c18c4f97a56e5e72840?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7421194657955983587" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/34953b83a7d0fbd45ebaf968bf06cf64?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7421098977601092475" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/1607a1199c282fe2f053129b67a7833f?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7420363687687471574" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/2d506d6b202f9714f11086bcd9fdde16?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7412806119705934036" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/c5dd923cd3cb08448f9705636e882ef9?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7411758547135050934" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/645ba08d64e411934d055f5d2060644b?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7411415502105720007" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/ef9186f34c8304bd2d4f14b173818d10?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7411155683396193496" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/084ac59d523e181ab4d2a8fb6ae7c31f?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7410892047856933695" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/6b337f395b39af688a577c22df9be02f?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7410666102830486110" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/5fffbe36ca20397a608e64dab582233a?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7409976988383192623" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/237a4115c8e48cd1a68d0c77695b22b1?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7408542774316600262" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/b154c373582a77b33fd72875a959e1c6?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7400700948517930309" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/26428c5b2bbeb9deae2a7df38bb29c57?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7397829994154341279" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/84187e8fa6bac88f8a8248a0ba076d73?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7396205401792479232" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/a88fce73c6ad50bf51ec2303fd3463ab?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7395658718620415896" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/85c80151f3dc43b4d7715e832e0d04fe?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7395259525248074495" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/ae205d1dc4b0a141bd9a96ac463e5403?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7395176474008441296" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/d2fd6d69b504567c2b5b61b0fbe91e05?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7392695190643792320" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/7b2b924ca4b70c801be251b27f2784c5?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7391727871578091103" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/b6e7411c412e24b6edbf3d6cfef52704?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7390292197111071057" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/a1c1dbe9f0846172bfb76ad03fce813e?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7389736248787882781" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/fceeb0bc747f63200cf1226f3fa983b8?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7389596577973292493" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/7e61c5c91e39d7f4018db0ab4e70d7e9?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7384825739622989916" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/42a0a6b7026122adcc73b8dd7da34369?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7384496916079144601" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/7d520142188c8bcccd31a59a577faa72?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7383648002552627632" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/e9063fdd82d9b09755cfc4e58d1198d7?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7382345173309635280" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/0eafd6dbe2ad621dabab745a533c99f7?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7378481678909619458" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/82bbc8e3f9a953004194aa7ff8d56f04?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7374064011134034316" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/2b8c54833fceb41325eed86145a8b2e5?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7371100009046804657" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/711237678a715a4192adf73fb6de30cc?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7370758167930893794" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/c3d00b83460de916ed7c93e66adb2690?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7368536496345507357" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/a62e9de5d27d7d0376a36e7c637be69d?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7363794690630672552" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/f25caf104b9ebc19fb049aed8872af96?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7361074786069270229" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/d182cdae4d540d15aedc1c75223f0257?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7360971837689803489" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/16aa3eccb53c7c6ec5d930e6a0d18f4f?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7360631486803327193" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/927d3b5cac391a21be10c4484ac12da6?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7360610116535462103" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/55ae0461b42a1b51d21b479fe44df2cf?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7351548680249570212" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/e24029bfabd02aa2a688c109f683f9d2?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7351449273523945883" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/feca079ec98c4889687c3bf3eac57e7a?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7351439683755845756" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/dffe19c0296f2d1d0b31b1f845c1f097?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7346226600622981987" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/886e18060c2bb88f67e0579067add3e4?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7345872886805696308" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/f4602de0a17c5e540325d101d843e04e?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7345871534223060178" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/395a941ddc53ed5ed47339916a4d13f1?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7345780444377071161" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/2b55152dfb490daa82679ad2aa086b4a?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7342897475400591314" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/f152175cf056f2f149913790215abd63?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7342609375871362074" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/524a28b93cceee8f3b2775b9aebe9f42?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7338803672641903077" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/f4bcdfc348c86d28c8a7a80c998e1443?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7337658577229477017" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/c796d65447994cbff97d5e5db2ff7d01?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7337506119126480454" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/ac182f10af8721671685a232140ca54b?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7336362705797137485" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/ad3040e66f757909a0ac3974145ef962?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7331816204075783422" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/b057c90306f6c1bc27fe8b0b63c5b08a?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7330099606531053868" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/9ef4dd5307f6beb98c8d14e6844c3781?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7329513497698939151" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/080051554d961a983d35d6f27a3161d0?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7326853928654427406" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/a0b21e1712bac846b44ddaebb559f2f0?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7326123659828767417" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/e53792daeea010d42bde2a128b55387d?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7325034016230422866" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/e7de25775b2dfe8526c8faf729777f92?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7324709506155498498" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/a7d8c6f7f2eb6e69116c85df4853043c?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7322838902505492506" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/ed12ff3a246211ff3c0995c57be8300d?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7322480158131858737" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/df7a88518129b45c2a3d471ef3e38171?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7322480056647895631" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/b0fc2ec2382ef1f46783d47633a1c2c8?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7322435829488137499" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/1e04e289a5613d9fcfc2957a2f4f758d?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7321376369584140425" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/471a3ff745e4b7385ac37c4754ccb6a7?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7320620861739155231" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/cbdfb2b8ec143c08b94744f4e803c4d9?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7319685813560324806" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/3b937a42beb422c170ddba337bcf4614?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7317327612543774938" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/3ff55436795b81196db081c707c0d57b?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7315041682116781826" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/6d9d685c0b21baeab7148e824ee9dc3c?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7314109582092237417" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/fcf3b18b0352d988911b3103872df71e?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7312231498364175998" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/3ed91b7f127158e8060fcca763c4ce41?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7308775554158459347" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/3b1851bd1357ae676c70a6237660e1e5?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7307805817927140902" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/3905dcc5dc57e69e60017292e4b7831f?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7307008873501493842" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/53e1161f15f3952680ca9c0b6b72b187?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7306936309325637432" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/1faea7a4551cd737c33dabf9a2ea656d?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7306139342572762124" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/d812f245091e937cf1cf8e9853ffaaf5?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7305667582625095912" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/619d2a6fc7e8fef0f531437f79c41121?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7302351433519126423" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/213e69021c34e9712b10729996a7e18f?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7300995034864682113" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/0279d7ffa7646a14712f8d82d9217789?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7300667574655503791" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/399d2f9a1f2214d0eb8dd5cd9bf097bb?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7298405727952071023" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/a72d29bfde85c56dffa3aecc8c8930d7?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7293882019239950234" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/5be7b30bf8b0275e8b339da4def526d0?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7293571534228500615" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/ec0920ba87557cf8e85caff31ac03e50?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7291741572331636254" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/6d6fb1fe506722b30e00deb5595dffb3?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7291017833511217353" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/6fbceda5fed4bc0c26cf35a40aae7e3d?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li data-id="7289468034108791543" > <div class="avatar avatar-large"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/251d411d26aa2a77f78cd02f45b9b8be?default=mm&rating=G&size=160" width="160" height="160" /> </div> </li> <li> +1192 </li> </ul> </div> <div class="tab-pane" id="merged-ideas"> <ul class="merged-ideas ideas"> <li class="idea" id="6837131556087345807"> <div class="idea-endorsement" id="idea-6837131556087345807-endorsement"> <a class="btn-vote" data-disable="true" href="/auth/jwt?return_to=%2Fideas%2FWEBFLOW-I-1528%3Freturn_to_action%3Dvote_6837131556087345807"> <span class="vote-count"> 721 </span> <span class="vote-status"> Vote </span> </a> <div class="popover vote-popover portal-user"></div> </div> <a class="idea-link" href="/ideas/WEBFLOW-I-2950"> <div class="idea-details"> <h3> SVG Integration please!!! <span class="label-private-idea"> <span class="tooltip-trigger-container" tabindex="0"> <i class="fa-solid fa-merge"></i> </span> <aha-tooltip> Merged </aha-tooltip> </span> </h3> <div class="description"> All the icons being uploaded are svg and u cant change their colors nor resize them properly bcz only way you add svg is either through image or embed code And neither one is a good solution </div> <div class="idea-meta"> <span class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/7f51024c83d17471721a5676db5fc3d8?default=mm&rating=G&size=32" width="32" height="32" /> </span> <div class="idea-meta-created"> <div class="idea-meta-secondary"> Created 11 Jun 16:42 by Ghous Shah </div> <div class="idea-meta-secondary"> Elements </div> </div> <span class="comment-count"> <i class="fa-regular fa-comments"></i> 9 </span> <span class="status-pill" title="Reviewed" style="border: none; background-color: #E3ECFE">Reviewed</span> <div class="clearfix"></div> </div> </div> <div class="clearfix"></div> </a> <div class="clearfix"></div> </li> <li class="idea" id="6902417350762335507"> <div class="idea-endorsement" id="idea-6902417350762335507-endorsement"> <a class="btn-vote" data-disable="true" href="/auth/jwt?return_to=%2Fideas%2FWEBFLOW-I-1528%3Freturn_to_action%3Dvote_6902417350762335507"> <span class="vote-count"> 7 </span> <span class="vote-status"> Vote </span> </a> <div class="popover vote-popover portal-user"></div> </div> <a class="idea-link" href="/ideas/WEBFLOW-I-3643"> <div class="idea-details"> <h3> SVG favicon support <span class="label-private-idea"> <span class="tooltip-trigger-container" tabindex="0"> <i class="fa-solid fa-merge"></i> </span> <aha-tooltip> Merged </aha-tooltip> </span> </h3> <div class="description"> When properly added, the favicons should adapt to safari dark/light mode. It is a small luxury but at the same time something that would improve the all around experience. </div> <div class="idea-meta"> <span class="avatar"> <img alt="" onerror="this.style.visibility = "hidden"" src="https://secure.gravatar.com/avatar/6b3b18b10063d8bc1a36a0331e4b775f?default=mm&rating=G&size=32" width="32" height="32" /> </span> <div class="idea-meta-created"> <div class="idea-meta-secondary"> Created 04 Dec 15:04 by Arnel Bukva </div> <div class="idea-meta-secondary"> Assets </div> </div> <span class="comment-count"> <i class="fa-regular fa-comments"></i> 0 </span> <span class="status-pill" title="Reviewed" style="border: none; background-color: #E3ECFE">Reviewed</span> <div class="clearfix"></div> </div> </div> <div class="clearfix"></div> </a> <div class="clearfix"></div> </li> </ul> </div> </div> </div> </div> <div class="right-sidebar"> <div class="sidebar-section"> <div class="signup-link"> <a href="/portal_session/new?return_to=%2Fideas%2FWEBFLOW-I-1528">Log in / Sign up</a> </div> </div> <div class="sidebar-section idea-subscription" id="idea-6616608124028682119-subscription"> <a class="btn btn-outline btn-subscribe" href="/auth/jwt?return_to=%2Fideas%2FWEBFLOW-I-1528%3Freturn_to_action%3Dsubscribe_6616608124028682119">Subscribe</a> <p class="reason">You won't be notified about changes to this idea.</p> <div class="popover subscribe-popover portal-user"></div> </div> <h3 class="sidebar-header"> Related ideas </h3> <div id="idea-related-ideas"> <img src="https://cdn.aha.io/assets/busy.b7e3690b94c43e444483fbc7927a6a9a.gif" /> <script> //<![CDATA[ $("#idea-related-ideas").load('/ideas/WEBFLOW-I-1528/related_ideas') //]]> </script> </div> </div> </div> </div> <script> //<![CDATA[ //]]> </script> <footer> <div class="w-container"> <span class="footer-text">© 2025, Webflow, Inc. All Rights Reserved.</span> <span class="footer-text footer-divider">|</span> <a class="footer-text footer-link" href="https://webflow.com">Webflow Home</a> <span class="footer-text footer-divider">|</span> <a class="footer-text footer-link" href="https://university.webflow.com/">Webflow University</a> </div> </footer> <script type="text/javascript"> try { window.ignoreEvalErrors = true; window.eval("//Replace post comment button if the user is not logged in\nvar commentBtn = document.querySelector(\".idea-comment a\");\nif (commentBtn){\n commentBtn.parentNode.removeChild(commentBtn);\n var alertDiv = document.createElement(\"div\");\n alertDiv.setAttribute('class', 'alert');\n var node = document.createTextNode(\"Log into your Webflow account to leave a comment.\");\n alertDiv.appendChild(node);\n var parentElement = document.querySelector(\"div.tabbable\");\n var referenceNode = document.querySelector(\"div.tab-content.comments-tab-content\")\n parentElement.insertBefore(alertDiv, referenceNode);\n}\n\n//Replace SSO alert in Edit Profile page\nvar ssoAlert = document.querySelector(\".edit-profile div.alert\");\nif (ssoAlert){\n ssoAlert.innerHTML = \"Update your profile through \u003ca href='https://webflow.com/dashboard/account/general'\u003eWebflow account settings\u003c/a\u003e\"\n}\n\n//Set message for empty wishlist\nvar ideasUl = document.querySelector(\"ul.list-ideas.ideas\");\nif (ideasUl){\n if (ideasUl.getElementsByTagName(\"li\").length == 0){\n var alertDiv = document.createElement(\"div\");\n alertDiv.setAttribute('class', 'alert');\n var node = document.createTextNode(\"No wishlist ideas found\");\n alertDiv.appendChild(node);\n var parentElement = document.querySelector(\"div.portal-content\");\n parentElement.appendChild(alertDiv);\n }\n}\n\n//Add custom styles for iframe\nwindow.onload = function() {\n checkIframeLoaded(10)();\n var titleEl = document.getElementsByTagName(\"title\")[0];\n var docEl = document.documentElement;\n\n if (docEl \u0026\u0026 docEl.addEventListener) {\n docEl.addEventListener(\"DOMSubtreeModified\", function(evt) {\n var t = evt.target;\n if (t === titleEl || (t.parentNode \u0026\u0026 t.parentNode === titleEl)) {\n titleModified();\n }\n }, false);\n } else {\n document.onpropertychange = function() {\n if (window.event.propertyName == \"title\") {\n titleModified();\n }\n };\n }\n};\n\nfunction titleModified() {\n checkIframeLoaded(10)();\n}\n\nfunction checkIframeLoaded(times) {\n return function() {\n // Get a handle to the iframe element\n var iframe = document.querySelector(\"div.mce-edit-area iframe\");\n if (iframe){\n var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;\n // Check if loading is complete\n if ( iframeDoc.readyState == 'complete' ) {\n // The loading is complete, call the function we want executed once the iframe is loaded\n afterLoading();\n return;\n } \n }\n\n if(times \u003e 0) { \n // If we are here, it is not loaded. Set things up so we check the status again in 100 milliseconds\n window.setTimeout(checkIframeLoaded(times - 1), 100);\n }\n }\n}\n\nfunction afterLoading(){\n var iframe = document.querySelector(\"div.mce-edit-area iframe\");\n if (iframe){\n var link = document.createElement('link');\n link.type = \"text/css\";\n link.rel = \"stylesheet\";\n link.href = \"https://d3e54v103j8qbb.cloudfront.net/css/wishlist-mce-styles-v2.93240b9fa7.css\";\n iframe.contentWindow.document.querySelector(\"head\").appendChild(link);\n }\n}"); } catch(e) { window.console && console.error(e); } </script> <div class="modal hide fade" id="modal-window"></div> </body> </html>

CINXE.COM

Support an SVG-specific Element, as an alternative | Webflow Wishlist