How to replace an SVG CSS background on hover? - css

Here, I'm trying to replace an existing SVG CSS background (GitHub icon) with another (magnifying glass icon) on :hover. The problem is that since I'm using before:, it is displaying both SVGs at once on :hover:
.partner-link:before {
content: "";
width: 60px;
height: 24px;
display: flex;
background: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12' /></svg>") no-repeat;
background-position: right;
}
.partner-link:hover,
.partner-link:focus {
background: url("data:image/svg+xml;utf8,<svg fill='red' xmlns='http://www.w3.org/2000/svg'><path d='M15.838,13.693l-2.785-2.786c0.705-1.102,1.121-2.408,1.121-3.813c0-3.911-3.17-7.081-7.081-7.081s-7.081,3.17-7.081,7.081c0,3.91,3.17,7.08,7.081,7.08c1.406,0,2.711-0.415,3.813-1.121l2.787,2.786c0.195,0.197,0.518,0.197,0.715,0l1.43-1.43C16.037,14.211,16.037,13.89,15.838,13.693z M7.093,12.15c-2.789,0-5.058-2.269-5.058-5.057c0-2.789,2.269-5.058,5.058-5.058c2.79,0,5.057,2.269,5.057,5.058C12.15,9.882,9.883,12.15,7.093,12.15z'/></svg>") no-repeat 0 0;
color: red;
}


Seems like you're looking to only change the pseudo-element on hover / focus. Note that you aren't hovering the :before element, but rather hovering its parent.
.partner-link:before {
content: "";
width: 60px;
height: 24px;
display: flex;
background: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12' /></svg>") no-repeat;
background-position: right;
}
.partner-link:hover:before,
.partner-link:focus:before {
background: url("data:image/svg+xml;utf8,<svg fill='red' xmlns='http://www.w3.org/2000/svg'><path d='M15.838,13.693l-2.785-2.786c0.705-1.102,1.121-2.408,1.121-3.813c0-3.911-3.17-7.081-7.081-7.081s-7.081,3.17-7.081,7.081c0,3.91,3.17,7.08,7.081,7.08c1.406,0,2.711-0.415,3.813-1.121l2.787,2.786c0.195,0.197,0.518,0.197,0.715,0l1.43-1.43C16.037,14.211,16.037,13.89,15.838,13.693z M7.093,12.15c-2.789,0-5.058-2.269-5.058-5.057c0-2.789,2.269-5.058,5.058-5.058c2.79,0,5.057,2.269,5.057,5.058C12.15,9.882,9.883,12.15,7.093,12.15z'/></svg>") no-repeat 0 0;
color: red;
}

Related

QML how to use a dynamic topmargin correctly

I want to enlarge or reduce a button depending on the presence of an icon. The buttons are in a rectangle and I would like to realize it with the top margin, because the buttons also have rounded corners and only the top corners should be visible.
The goal is a representation like this
If I set the topmargin fix to 10 it looks good
If I calculate the value depending on whether an icon is present, the buttons without icon are correctly displayed deeper, but the buttons with icon sit too deep
Like the picture before the topmargin for the icon buttons is 10 but they are moved lower.
Any idea - the code for display.qml is reduced and does not show all the properties. if they are needed i will add them.
FooterButton.qml
Rectangle {
id: button
property string p_identity
property string p_icon
property string p_source
property string p_backgroundColor
property int p_topmargin: 10
height: 70
width: 80
Layout.leftMargin: 25
Layout.topMargin: p_topmargin
color: p_backgroundColor
radius: 10
border.color: "black"
border.width: 0
Connections {
target: m_screen;
onScreenChanged: {
p_icon = m_screen.getButtonIcon(p_identity)
p_source = (!p_icon || p_icon.length === 0) ? "" : "image://iconprovider/" + p_icon)
// p_topmargin = 10
p_topmargin = (!p_icon || p_icon.length === 0) ? 45 : 10
}
}
Footer.qml
Item {
id: footer
property string p_footerBackgroundColor: "yellow" //m_config.getColor(Colors.FooterBackground)
property string p_buttonBackgroundColor: m_config.getColor(Colors.ButtonBackground)
Rectangle { anchors.fill: parent; x: footer.x; y: footer.y; width: footer.width; height: footer.height; color: p_footerBackgroundColor
RowLayout{ anchors.fill: parent
FooterButton{ p_identity: "FB1"; p_backgroundColor: p_buttonBackgroundColor }
FooterButton{ p_identity: "FB2"; p_backgroundColor: p_buttonBackgroundColor }
FooterButton{ p_identity: "FB3"; p_backgroundColor: p_buttonBackgroundColor }
FooterButton{ p_identity: "FB4"; p_backgroundColor: p_buttonBackgroundColor }
FooterButton{ p_identity: "FB5"; p_backgroundColor: p_buttonBackgroundColor }
}
}
Display.qml
Item {
id: display
Header { x: 0; y: 0; width: display.width; height: p_headerHeight; visible: p_headerVisible; color: p_backgroundColor; p_buttonColor: p_buttonBackgroundColor }
Left { x: 0; y: p_headerHeight; width: p_borderWidth; height: p_contentHeight; color: "blue" }
Right { x: display.width - p_encoderWidth; y: p_headerHeight; width: p_encoderWidth; height: p_contentHeight; p_color: "magenta" }
Footer { x: 0; y: display.height - p_footerHeight; width: display.width; height: p_footerHeight; visible: p_footerVisible }

just making sure you're not over-engineering your problem, but, I want to point out that the standard Button has both icon support and the ability to change the background to a rounded Rectangle:
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
footer: Frame {
background: Rectangle {
color: "yellow"
}
RowLayout {
anchors.horizontalCenter: parent.horizontalCenter
spacing: 20
AppButton {
//icon.source: "hammer.svg"
}
AppButton {
//icon.source: "hammer.svg"
}
AppButton {
icon.source: "hammer.svg"
}
AppButton {
//icon.source: "hammer.svg"
}
AppButton {
icon.source: "check.svg"
}
}
}
}
// AppButton.qml
import QtQuick
import QtQuick.Controls
Button {
width: 100
height: 100
background: Rectangle {
color: pressed ? palette.mid : palette.button
radius: 20
}
icon.source: "blank.svg"
icon.width: 64
icon.height: 64
}
// blank.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
</svg>
// hammer.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M29.64 25.462c-1.186-1.62-3.535-4.176-6.254-7.136-2.657-2.893-5.671-6.173-8.066-9.11a3.883 3.883 0 0 1-1.044-1.531 6.899 6.899 0 0 0-.215-1.271 3.427 3.427 0 0 1-.08-.348 7.985 7.985 0 0 1 3.153-1.61 25.43 25.43 0 0 1 4.095-.527l1.08-.043-1.14-1.239-.148-.035a24.293 24.293 0 0 0-5.123-.606A13.096 13.096 0 0 0 7.53 4.82c-.225.2-1.433 1.478-1.338 2.334.078.73-.212.949-.792 1.383a8.35 8.35 0 0 0-.558.444c-1.468-.125-1.92.252-3.014 1.16l-.39.32-.095.105a1.472 1.472 0 0 0-.277 1.24 7.214 7.214 0 0 0 2.294 3.029 2.25 2.25 0 0 0 2.404-.483 18.003 18.003 0 0 0 1.577-2.018 2.67 2.67 0 0 1 1.633-1.26 12.815 12.815 0 0 1 2.588.88c.11.046.2.077.277.104.05.018.111.032.116.036 4.108 5.004 6.896 8.936 8.93 11.807 1.401 1.976 2.413 3.404 3.3 4.412l.912 1.038a1.935 1.935 0 0 0 1.362.651l.078.001a1.939 1.939 0 0 0 1.334-.534l1.548-1.486a1.927 1.927 0 0 0 .22-2.52zM12.059 11.028l-.029.034c-.03-.012-.052-.018-.088-.033a10.285 10.285 0 0 0-3-.954 3.577 3.577 0 0 0-2.454 1.738 21.031 21.031 0 0 1-1.375 1.786c-.605.434-.936.519-1.313.338a6.931 6.931 0 0 1-1.792-2.446.85.85 0 0 1 .125-.305l.334-.275c1.045-.867 1.228-1.021 2.299-.933a1.02 1.02 0 0 0 .738-.247A7.72 7.72 0 0 1 6 9.337a2.27 2.27 0 0 0 1.186-2.288A3.785 3.785 0 0 1 8.19 5.571a12.232 12.232 0 0 1 7.706-2.565 20.9 20.9 0 0 1 2.624.178c-.523.076-1.076.173-1.614.298A9.024 9.024 0 0 0 13.34 5.3a1.176 1.176 0 0 0-.25 1.356 5.831 5.831 0 0 1 .19 1.1 3.345 3.345 0 0 0 .842 1.625 9.48 9.48 0 0 0-.994.683 7.036 7.036 0 0 0-1.068.964zm16.668 16.234l-1.547 1.485a.945.945 0 0 1-.678.256.924.924 0 0 1-.652-.312l-.912-1.038c-.853-.97-1.905-2.452-3.236-4.33-2.018-2.848-4.78-6.742-8.838-11.696a6.433 6.433 0 0 1 .875-.772 8.145 8.145 0 0 1 .964-.66l.09-.05C17.14 13 20.06 16.182 22.65 19.001c2.7 2.939 5.032 5.477 6.184 7.051a.923.923 0 0 1-.106 1.209z"/><path fill="none" d="M0 0h32v32H0z"/></svg>
// check.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M13.5 22.142L7.59 16.42l.636-.636L13.5 20.87 26.721 7.8l.637.637z"/><path fill="none" d="M0 0h32v32H0z"/></svg>
You can Try it Online!

Style mat input on error (adding a mat icon to input field on error)

I'm trying to style my mat input field on an error by adding an error icon next to the clear field icon like this:
I can't find any way to add the icon. Thank you for your help in advance.
My HTML:
<button
*ngIf="value"
matPrefix
mat-icon-button
aria-label="Clear"
(click)="value = ''"
>
highlight_off
کلمه جدید
<input
class="word-input"
matInput
type="text"
[(ngModel)]="value"
id="word"
#wordInput
required
/>
error
کلمه ورودی قبلا وارد شده‌است
CSS:
::ng-deep .mat-error {
text-align: right;
font-size: 12px;
}
:host ::ng-deep .mat-form-field-appearance-outline.mat-form-field-invalid .mat-form-field-outline- thick,
:host ::ng-deep .mat-form-field.mat-form-field-invalid .mat-form-field-label,
.mat-error {
color: var(--error) !important;
}

Take a look how bootstrap make it in the docs
then, instead use as class is_invalid you can use .ng-invalid.ng-touched
.ng-invalid.ng-touched {
border-color: #dc3545;
padding-left: calc(1.5em + .75rem) !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: leftcalc(.375em + .1875rem) center;
background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
NOTE: I change the rigth by left in padding and position the image
NOTE2: you can use any svg, e.g.
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23dc3545' stroke='none' viewBox='0 0 16 16'><path d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/></svg>");
Update
If we are working with material angular, we need take account the "floating label"
So, we can use in styles.css
input.ng-invalid.ng-touched {
border-color: #dc3545;
padding-left: calc(1.5em) !important;
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23dc3545' stroke='none' viewBox='0 0 16 16'><path d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/></svg>");
background-repeat: no-repeat;
background-position: left center;
background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
mat-form-field.mat-mdc-form-field.ng-invalid.ng-touched:not(.mat-focused) .mat-mdc-floating-label.mdc-floating-label:not(.mdc-floating-label--float-above) {
transform: translate(1.5em,-.15rem);
}
See stackblitz

Centering moving SVG

I've been trying to get this SVG animation of a washing machine, I'm almost there, but CSS is not my strong suit and I can center the moving tumble. Am I missing something obvious?
Thanks!
<svg viewBox="0 0 20 30">
<style>
#keyframes rotate {
0% {
visibility: visible;
transform: rotate(0deg);
}
100% {
transform: rotate(1080deg);
}
}
.on_no_delay {
animation: rotate 1.8s linear infinite;
transform-origin: center;
fill: #5daeea;
will-change: transform;
}
</style>
<path fill="#5daeea" d="M15.2,10.45,6.37,1.28h12a2,2,0,0,1,2,2v16a2,2,0,0,1-2,2h-12a2,2,0,0,1-2-2v-16a2,2,0,0,1,2-2m1,2a1,1,0,1,0,1,1,1,1,0,0,0-1-1m3,0a1,1,0,1,0,1,1,1,1,0,0,0-1-1M7,10.51A6,6,0,1,0,15.14,8,6,6,0,0,0,7,10.51Z"/>
<g class="tumble on_no_delay"><path d="M14.83,11.17a4,4,0,1,1-7.66,7.66l5.66-5.66"/></g>
</svg>

If you prepared svg properly, you wouldn't have this problem.
See what svg looks like when opened in a graphics program.
And it should be in this format.
Below the solution:
<svg viewBox="0 0 50 63">
<style>
#keyframes rotate {
0% {
visibility: visible;
transform: rotate(0deg);
}
100% {
transform: rotate(1080deg);
}
}
.on_no_delay {
animation: rotate 5s linear infinite;
transform-origin: center 60%;
fill: #5daeea;
will-change: transform;
}
</style>
<path d="M33.844 28.656 6.25 0h37.5C47.179 0 50 2.821 50 6.25v50c0 3.429-2.821 6.25-6.25 6.25H6.25C2.821 62.5 0 59.679 0 56.25v-50C0 2.821 2.821 0 6.25 0m3.125 6.25A3.14 3.14 0 0 0 6.25 9.375 3.14 3.14 0 0 0 9.375 12.5 3.14 3.14 0 0 0 12.5 9.375 3.14 3.14 0 0 0 9.375 6.25m9.375 0a3.14 3.14 0 0 0-3.125 3.125A3.14 3.14 0 0 0 18.75 12.5a3.14 3.14 0 0 0 3.125-3.125A3.14 3.14 0 0 0 18.75 6.25M8.219 28.844a18.745 18.745 0 0 0-2.14 8.698c0 10.286 8.464 18.75 18.75 18.75s18.75-8.464 18.75-18.75A18.774 18.774 0 0 0 33.656 21a18.755 18.755 0 0 0-8.827-2.208 18.772 18.772 0 0 0-16.61 10.052Z" style="fill:#5daeea;" />
<path class="tumble on_no_delay" d="M36.986 25.953a16.932 16.932 0 0 1 4.957 11.969c0 9.285-7.641 16.926-16.926 16.926a16.933 16.933 0 0 1-11.969-4.958l17.688-17.687" />
</svg>

Problème with media queries that does not activate

I train my CSS by making models of site or others already created. Currently, I am training with media queries and I have a problem is that it does not apply.
Before posting this message I created a simple page with a div containing two to see how the breakpoints worked and I got there but on this page I can't.
Could you tell me why nothing is happening?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
margin: 0 auto;
background: linear-gradient(hsl(273, 75%, 66%), hsl(240, 73%, 65%));
font-family: "Kumbh Sans", sans-serif;
font-weight: 400;
font-size: 14px;
}
p {
width: 350px;
color: hsl(237, 12%, 33%);
font-size: 12px;
margin-bottom: 15px;
padding-top: -7px;
}
h1 {
font-weight: 700;
color: hsl(238, 29%, 16%);
margin-bottom: 15px;
font-size: 31px;
letter-spacing: 2px;
}
.wrapper {
width: 100%;
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.box {
background-color: white;
border-radius: 23px;
display: flex;
justify-content: space-around;
align-items: center;
width: 920px;
height: 510px;
overflow: hidden;
margin-right: 191px;
}
.leftSide {
width: 100%;
display: flex;
}
.svgCube {
position: relative;
left: 60px;
top: 45px;
z-index: 800;
}
.svgWoman {
display: block;
position: relative;
right: 85px;
}
.rightSide {
display: flex;
flex-direction: column;
width: 100%;
background-color: transparent;
margin-top: -20px;
margin-left: 3px;
}
.hiddenElement {
display: none;
}
.divider {
width: 335px;
border-bottom: 1px solid hsl(240, 5%, 91%);
}
.btnFaq {
width: 335px;
font-family: "Kumbh Sans", sans-serif;
font-weight: 400;
font-size: 14px;
background-color: white;
border: none;
color: hsl(237, 12%, 33%);
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding-top: 22px;
padding-bottom: 15px;
}
.btnFaq:hover {
color: hsl(14, 88%, 65%);
}
#media only screen and (min-with: 300px) and (max-with: 850px) {
.container {
flex-direction: column;
}
.box {
flex-direction: column;
flex-wrap: wrap;
width: 80vw;
height: 60vh;
}
}
</style>
<title>Frontend Mentor | FAQ Accordion Card</title>
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#400;700&display=swap" rel="stylesheet" />
<script src="main.js"></script>
</head>
<body>
<div class="wrapper">
<div class="container">
<svg class="svgCube" width="191" height="184" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter x="-97.9%" y="-76.3%" width="295.8%" height="313.7%" filterUnits="objectBoundingBox" id="a">
<feOffset dy="25" in="SourceAlpha" result="shadowOffsetOuter1" />
<feGaussianBlur stdDeviation="25" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
<feColorMatrix values="0 0 0 0 0.209139076 0 0 0 0 0.0691446444 0 0 0 0 0.478091033 0 0 0 0.497159091 0" in="shadowBlurOuter1" />
</filter>
<path id="b" d="M0 27.756v53.87l41.968 24.035 47.387-28.025v-53.87" />
</defs>
<g fill="none" fill-rule="evenodd">
<g transform="translate(50.93 2.125)">
<use fill="#000" filter="url(#a)" xlink:href="#b" />
<use fill="#FF9271" xlink:href="#b" />
</g>
<path fill="#DF5C34" fill-rule="nonzero" d="M92.899 53.917v53.87l47.387-28.026v-53.87z" />
<path fill="#F47B56" fill-rule="nonzero" d="M50.93 29.88L99.624 2.126l40.662 23.767-47.387 28.025z" />
<path d="M94.013 14.49a25.942 25.942 0 0114.207 3.129c2.486 1.462 3.844 2.988 4.036 4.579.192 1.59-.628 2.975-2.562 4.143a9.115 9.115 0 01-2.985 1.18c-.869.205-1.76.295-2.652.269l-.974-.077c.091.217.151.446.18.68a3.132 3.132 0 01-.513 1.552 5.704 5.704 0 01-2.1 2.065 12.633 12.633 0 01-6.7 1.77 13.247 13.247 0 01-6.957-1.757c-1.999-1.18-3.023-2.566-3.1-4.156a4.49 4.49 0 012.562-4.015 8.488 8.488 0 012.357-1.013 9.175 9.175 0 012.037-.346h.705l-1.282-.77 3.6-2.244 8.34 4.912a4.377 4.377 0 004.15 0c1.769-1.103 1.137-2.552-1.895-4.348a19.261 19.261 0 00-10.556-2.347 21.67 21.67 0 00-11.018 3.168c-3.023 1.89-4.522 4.143-4.496 6.76 0 2.564 1.601 4.848 4.714 6.682a21.015 21.015 0 0011.146 2.655 20.926 20.926 0 0011.017-2.925 12.353 12.353 0 003.062-2.565 5.683 5.683 0 001.28-2.18l.18-.808 4.753.269c.008.145.008.29 0 .436a8.216 8.216 0 01-.346 1.154 8.303 8.303 0 01-.82 1.72 11.912 11.912 0 01-1.69 2 15.952 15.952 0 01-2.755 2.13 25.602 25.602 0 01-9.326 3.36 35.176 35.176 0 01-10.877.192 24.896 24.896 0 01-9.339-3.053 12.127 12.127 0 01-5.304-5.566 8.192 8.192 0 010-6.593 12.692 12.692 0 015.266-5.759 28.966 28.966 0 0114.655-4.284zm4.663 13.262c-.17-.891-.77-1.64-1.601-2.001a6.579 6.579 0 00-3.33-.911 5.619 5.619 0 00-3.101.795 2.283 2.283 0 00-1.281 2.001c.117.89.69 1.654 1.512 2.014a6.54 6.54 0 003.394.86 6.092 6.092 0 003.254-.847 2.065 2.065 0 001.205-1.911" fill="#3E2928" fill-rule="nonzero" />
</g>
</svg>
<div class="box">
<div class="leftSide">
<svg class="svgWoman" width="472" height="359" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient x1="61.181%" y1="36.82%" x2="40.788%" y2="55.54%" id="a">
<stop stop-color="#78B46A" offset="0%" />
<stop stop-color="#7F3500" offset="3%" />
<stop stop-color="#FFF" offset="100%" />
</linearGradient>
<linearGradient x1="82.186%" y1="28.519%" x2="29.852%" y2="62.464%" id="b">
<stop stop-color="#78B46A" offset="0%" />
<stop stop-color="#7F3500" offset="3%" />
<stop stop-color="#FFF" offset="100%" />
</linearGradient>
<linearGradient x1="80.66%" y1="21.864%" x2="21.557%" y2="66.62%" id="c">
<stop stop-color="#78B46A" offset="0%" />
<stop stop-color="#7F3500" offset="3%" />
<stop stop-color="#FFF" offset="100%" />
</linearGradient>
<linearGradient x1="81.016%" y1="60.589%" x2="67.462%" y2="55.277%" id="d">
<stop stop-color="#FFF" stop-opacity="0" offset="0%" />
<stop stop-color="#DC841E" offset="99%" />
</linearGradient>
<linearGradient x1="82.183%" y1="27.537%" x2="29.857%" y2="62.324%" id="e">
<stop stop-color="#78B46A" offset="0%" />
<stop stop-color="#7F3500" offset="3%" />
<stop stop-color="#FFF" offset="100%" />
</linearGradient>
</defs>
<g fill-rule="nonzero" fill="none">
<path d="M229.018 355.203L9.313 225.211c-6.995-3.938-12.99-10.39-6.175-14.622L223.625 83.367c3.305-2.052 8.327-3.399 11.696-1.437l230.595 134.007c6.994 4.066 8.25 15.392 1.28 19.496L257.972 354.998a29.178 29.178 0 01-28.953.205z" fill="#5B36A0" />
<path d="M229.018 349.203L9.313 219.211c-6.995-3.938-12.99-10.39-6.175-14.622L223.625 77.367c3.305-2.052 8.327-3.399 11.696-1.437l230.595 134.007c6.994 4.066 8.25 15.392 1.28 19.496L257.972 348.998a29.178 29.178 0 01-28.953.205z" fill="#6862E6" />
<path d="M247.133 177.693L203.78 202.46s66.783 40.8 80.439 46.546l24.968-35.913" fill="url(#a)" opacity=".25" style="mix-blend-mode: multiply" />
<path d="M232.157 296.513l-43.365-24.715-43.364 24.767s22.585 13.8 44.171 26.473c13.708-9.71 27.428-19.521 42.558-26.525z" fill="url(#b)" opacity=".25" style="mix-blend-mode: multiply" />
<path d="M138.728 143.883l-27.505 15.712s2.331 14.404 15.988 20.15l36.01-23.087" fill="url(#c)" opacity=".46" style="mix-blend-mode: multiply" />
<ellipse fill="#68E1FD" cx="152.192" cy="147.898" rx="16.59" ry="11.697" />
<ellipse fill="#974C26" cx="152.179" cy="140.997" rx="12.426" ry="5.092" />
<path d="M151.73 132.506c0-2.296-.076-4.591-.256-6.887-.051-.599-.106-1.193-.166-1.783l-.128-1.167c0-.347-.18-1.283-.18-1.193-.077-.47-.158-.936-.243-1.398a54.855 54.855 0 00-8.865-21.715 31.778 31.778 0 00-2.473 12.71c0 1.284.103 2.566.205 3.772v.757c.103.615.218 1.282.346 1.846a50.222 50.222 0 001.96 6.888 41.928 41.928 0 002.678 6.003 82.454 82.454 0 003.676 6.349 90.88 90.88 0 002.985 4.425c.308-2.86.449-5.734.461-8.607zm-6.52-25.819a2.067 2.067 0 000-.897c.316.324.628.658.935 1a2.84 2.84 0 00-.948-.103h.013z" fill="#999A1C" />
<path d="M155.996 134.276a65.015 65.015 0 003.498-5.938c.282-.53.555-1.06.82-1.59l.525-1.065.5-1.103.55-1.283a54.876 54.876 0 004.266-23.087 31.728 31.728 0 00-8.967 9.363 45.938 45.938 0 00-1.858 3.284l-.256.474-.064.206c-.243.577-.487 1.154-.717 1.744a50.22 50.22 0 00-2.063 6.862 41.95 41.95 0 00-.986 6.503 77.621 77.621 0 00-.333 7.323c0 1.911 0 3.656.115 5.336 1.704-2.27 3.42-4.605 4.97-7.029zm8.456-25.254c.2-.226.349-.493.435-.783.094.445.175.873.244 1.283-.2-.2-.43-.368-.68-.5z" fill="#999A1C" />
<path d="M155.907 139.997a64.687 64.687 0 003.843-2.078l.96-.59.629-.398.615-.436.717-.526a34.464 34.464 0 009.736-11.069 19.928 19.928 0 00-7.84 2.168c-.705.36-1.384.757-2.063 1.167l-.294.18-.103.09-.948.705a31.541 31.541 0 00-3.33 3.04 26.351 26.351 0 00-2.627 3.193 83.516 83.516 0 00-2.562 3.848 55.792 55.792 0 00-1.653 2.925c1.653-.693 3.306-1.411 4.92-2.22zm12.708-10.902a1.28 1.28 0 00.487-.283c-.094.274-.196.543-.308.808a1.797 1.797 0 00-.179-.513v-.012zM151.73 132.506c0-2.296-.076-4.591-.256-6.887-.051-.599-.106-1.193-.166-1.783l-.128-1.167c0-.347-.18-1.283-.18-1.193-.077-.47-.158-.936-.243-1.398a54.855 54.855 0 00-8.865-21.715 31.778 31.778 0 00-2.473 12.71c0 1.284.103 2.566.205 3.772v.757c.103.615.218 1.282.346 1.846a50.222 50.222 0 001.96 6.888 41.928 41.928 0 002.678 6.003 82.454 82.454 0 003.676 6.349 90.88 90.88 0 002.985 4.425c.308-2.86.449-5.734.461-8.607zm-6.52-25.819a2.067 2.067 0 000-.897c.316.324.628.658.935 1a2.84 2.84 0 00-.948-.103h.013z" fill="#999A1C" />
<path d="M155.996 134.276a65.015 65.015 0 003.498-5.938c.282-.53.555-1.06.82-1.59l.525-1.065.5-1.103.55-1.283a54.876 54.876 0 004.266-23.087 31.728 31.728 0 00-8.967 9.363 45.938 45.938 0 00-1.858 3.284l-.256.474-.064.206c-.243.577-.487 1.154-.717 1.744a50.22 50.22 0 00-2.063 6.862 41.95 41.95 0 00-.986 6.503 77.621 77.621 0 00-.333 7.323c0 1.911 0 3.656.115 5.336 1.704-2.27 3.42-4.605 4.97-7.029zm8.456-25.254c.2-.226.349-.493.435-.783.094.445.175.873.244 1.283-.2-.2-.43-.368-.68-.5z" fill="#999A1C" />
<path d="M155.907 139.997a64.687 64.687 0 003.843-2.078l.96-.59.629-.398.615-.436.717-.526a34.464 34.464 0 009.736-11.069 19.928 19.928 0 00-7.84 2.168c-.705.36-1.384.757-2.063 1.167l-.294.18-.103.09-.948.705a31.541 31.541 0 00-3.33 3.04 26.351 26.351 0 00-2.627 3.193 83.516 83.516 0 00-2.562 3.848 55.792 55.792 0 00-1.653 2.925c1.653-.693 3.306-1.411 4.92-2.22zm12.708-10.902a1.28 1.28 0 00.487-.283c-.094.274-.196.543-.308.808a1.797 1.797 0 00-.179-.513v-.012z" fill="#999A1C" />
<path d="M264.35 168.022l-23.994 11.543a5.53 5.53 0 00-.384 9.76l56.867 33.22a5.518 5.518 0 007.43-1.782l13.823-21.523" fill="#A1482D" />
<path d="M394.854 112.344L203.524 1.962a8.626 8.626 0 00-8.626.01 8.644 8.644 0 00-4.312 7.48v114.833a7.184 7.184 0 003.587 6.22L398.146 248.39a4.62 4.62 0 004.632.003 4.631 4.631 0 002.312-4.018V130.018a20.398 20.398 0 00-10.236-17.674z" fill="#F47B56" />
<path d="M203.537 10.646l185.552 106.88a13.034 13.034 0 016.52 11.286v86.076a4.708 4.708 0 01-2.344 4.065 4.697 4.697 0 01-4.688.014L199.348 110.304a4.643 4.643 0 01-2.331-4.027V14.429c0-1.555.827-2.992 2.171-3.772a4.351 4.351 0 014.35-.011z" fill="#FFF" />
<ellipse fill="#AB643C" transform="rotate(-10.9 280.738 168.465)" cx="280.738" cy="168.465" rx="4.036" ry="4.617" />
<path fill="url(#d)" opacity=".32" d="M253.41 127.427l86.23 51.869 42.595-24.793-76.109-44.353" />
<path d="M359.97 117.102l-93.224-56.91a3.225 3.225 0 00-3.278.028 3.233 3.233 0 00-1.565 2.884V95.53a3.4 3.4 0 001.627 2.924l93.212 55.704c.997.567 2.22.56 3.21-.02a3.22 3.22 0 001.594-2.79l.487-30.23a4.542 4.542 0 00-2.063-4.015z" fill="#E2AC00" />
<path d="M337.667 133.789c3.343 4.681 9.223 5.99 13.118 2.937 3.894-3.053 4.343-9.324 1-13.993-3.345-4.669-9.225-5.99-13.12-2.937-3.894 3.052-4.342 9.311-.998 13.993z" fill="#FFF" />
<path d="M328.52 111.318l-38.023-22.92a1.447 1.447 0 00-1.862.578 1.45 1.45 0 00.402 1.91l38.022 22.92a1.447 1.447 0 001.862-.578 1.45 1.45 0 00-.401-1.91zM326.957 120.63l-52.41-31.591a1.45 1.45 0 00-1.396 2.488l52.345 31.603a1.447 1.447 0 001.862-.578 1.45 1.45 0 00-.401-1.91v-.013z" fill="#F2F2F2" />
<path d="M341.369 123.387L248.196 66.49a3.225 3.225 0 00-3.278.028 3.233 3.233 0 00-1.565 2.884v32.411a3.4 3.4 0 001.615 2.938l93.211 55.703c1.008.58 2.25.57 3.248-.025a3.22 3.22 0 001.569-2.848l.487-30.23a4.542 4.542 0 00-2.114-3.964z" fill="#F47B56" />
<path d="M319.065 140.074c3.344 4.681 9.224 5.99 13.119 2.937 3.894-3.053 4.342-9.325.999-13.993-3.344-4.67-9.224-5.99-13.118-2.938-3.895 3.053-4.343 9.312-1 13.994z" fill="#FFF" />
<path d="M309.918 117.602l-38.048-22.92a1.447 1.447 0 00-1.862.578 1.45 1.45 0 00.402 1.91l38.022 22.92a1.447 1.447 0 001.862-.578 1.45 1.45 0 00-.401-1.91h.025zM308.343 126.978l-52.397-31.642a1.447 1.447 0 00-1.862.579 1.45 1.45 0 00.402 1.91l52.409 31.59a1.447 1.447 0 001.862-.578 1.45 1.45 0 00-.402-1.91l-.012.051z" fill="#F2F2F2" />
<path d="M317.99 127.21l-93.2-56.897a3.225 3.225 0 00-3.278.027 3.233 3.233 0 00-1.564 2.884v32.412a3.4 3.4 0 001.627 2.924l93.211 55.704c1.008.58 2.25.57 3.249-.026a3.22 3.22 0 001.568-2.847l.487-30.231a4.542 4.542 0 00-2.1-3.95z" fill="#68E1FD" />
<path d="M317.99 127.21l-93.2-56.897a3.225 3.225 0 00-3.278.027 3.233 3.233 0 00-1.564 2.884v32.412a3.4 3.4 0 001.627 2.924l93.211 55.704c1.008.58 2.25.57 3.249-.026a3.22 3.22 0 001.568-2.847l.487-30.231a4.542 4.542 0 00-2.1-3.95z" fill="#68E1FD" />
<path d="M295.673 143.896c3.343 4.681 9.224 5.99 13.118 2.937 3.895-3.053 4.343-9.325 1-13.993-3.344-4.669-9.225-5.99-13.119-2.937-3.894 3.052-4.304 9.311-1 13.993z" fill="#FFF" />
<path d="M286.526 121.425l-38.035-22.92a1.447 1.447 0 00-1.862.578 1.45 1.45 0 00.401 1.91l38.023 22.92a1.447 1.447 0 001.862-.578 1.45 1.45 0 00-.402-1.91h.013zM284.95 130.75l-52.409-31.592a1.447 1.447 0 00-1.862.579 1.45 1.45 0 00.402 1.91l52.409 31.59a1.447 1.447 0 001.862-.578 1.45 1.45 0 00-.402-1.91z" fill="#F2F2F2" />
<path d="M195.672 124.028a45.406 45.406 0 00-13.208 19.38c-4.638 12.827 6.956 33.784 6.956 33.784l18.038-14.3" fill="#FF8F6F" />
<path d="M193.724 293.602l-4.893-2.706 1.28-7.003s7.29.692 7.93 3.283" fill="#003B94" />
<path d="M195.518 293.5c1.102-.68 2.255-1.283 3.395-1.886 2.83-1.552 6.918-3.155 8.66-6.067a3.39 3.39 0 00-.23-3.848c-2.563-3.104-8.174 2.001-11.044-1.436-.563-.68-.832-11.467-.832-11.467l-10.915 2.95s-1.845 21.676-1.64 23.01c.205 1.334 3.959 2.566 3.959 2.566a9.666 9.666 0 003.151-1.283c1.14-.834.102-11.005 1.563-9.581 1.46 1.424 2.1 6.99 2.1 6.99.607.092 1.222.11 1.833.051z" fill="#F47B56" />
<path d="M214.568 304.08l-4.894-2.667 1.28-7.003s7.29.693 7.93 3.283" fill="#003B94" />
<path d="M216.412 303.978c1.102-.68 2.255-1.282 3.395-1.885 2.831-1.552 6.918-3.155 8.66-6.067a3.39 3.39 0 00-.23-3.848c-2.563-3.104-8.174 2.001-11.043-1.436-.564-.68-.833-11.467-.833-11.467l-10.915 2.95s-1.857 21.753-1.652 23.036c.205 1.282 3.958 2.565 3.958 2.565a9.666 9.666 0 003.152-1.283c1.14-.833.102-11.004 1.563-9.58 1.46 1.423 2.1 6.99 2.1 6.99a7.498 7.498 0 001.845.025z" fill="#F47B56" />
<path d="M179.005 233.614l-3.216 43.058s5.125 7.08 22.304 3.142l.166-29.026M198.849 242.144c-.372 3.706 0 44.596 0 44.596s4.752 8.901 25.442 0l-.295-34.746" fill="#3E2928" />
<path d="M177.403 247.838c1.41.975 1.896-4.04 3.37-3.18a83.77 83.77 0 0016.961 7.49h.128a1.165 1.165 0 011.576.577 89.585 89.585 0 0011.133 2.565c4.83.77 8.826-2.808 13.784-3.052 0-19.008.09-73.109-7.994-84.652l-23.918-8.055c-.115 1.975-11.606 15.314-11.325 31.578.32 18.328-2.062 35.618-2.472 41.351-.064.975-1.191 14.34-1.243 15.378z" fill="#3E2928" />
<path d="M218.564 145.73l-2.203 21.804s-17.845.719-25.532-4.591v-18.496" fill="#FF8F6F" />
<path d="M241.252 131.378l-1.819 2.488c.97-2.024 1.826-4.1 2.562-6.22.513-1.45-1.806-2.027-2.318-.578l-.27.744c.223-.77.432-1.543.628-2.322a1.195 1.195 0 10-2.319-.577 62.236 62.236 0 01-1.806 5.952 42.54 42.54 0 00.846-5.26c.154-1.525-2.242-1.461-2.383 0a37.916 37.916 0 01-1.076 5.965c0-.684-.064-1.368-.192-2.052a1.206 1.206 0 00-.5-.86 9.29 9.29 0 00-.23-.795 1.204 1.204 0 00-2.345.36l-.154 8.978c-.433.93-.999 1.795-1.678 2.565a41.64 41.64 0 013.331 2.565 34.337 34.337 0 012.716 2.565 65.716 65.716 0 002.216-2.924c.088-.075.166-.161.23-.257a255.44 255.44 0 016.611-9.337c.948-1.052-1.14-2.219-2.05-1z" fill="#FFB5A9" />
<path d="M207.24 125.85s8.43 2.27 11.85 7.695a96.553 96.553 0 015.65 11.66l6.225-9.685s7.559 2.322 10.556 6.042c0 0-8.967 19.623-16.782 21.304-7.814 1.68-16.116-11.518-16.116-11.518s-1.716 5.515-1.383-.372" fill="#FF8F6F" />
<path d="M212.595 146.82a17.097 17.097 0 01-5.342-7.618c-1.013-3.45.256-6.478 1.434-9.684a31.237 31.237 0 002.204-9.966c.102-3.36-.282-6.72-.513-10.069a.976.976 0 010-.436c-1.127-3.783-3.433-6.99-7.98-7.375-11.774-1-12.44 12.057-12.35 17.367.09 5.31.653 8.901-3.254 11.12-3.908 2.219-6.726 8.042-2.998 12.75 3.728 4.706.384 2.988-2.101 7.169-2.485 4.181-1.845 9.402 3.254 11.287 5.099 1.885 28.799-1.655 30.976-3.848a4.531 4.531 0 001.115-3.206 12.444 12.444 0 00-4.445-7.49z" fill="#007F68" />
<path d="M224.176 39.132a18.805 18.805 0 013.33 9.748 6.419 6.419 0 01-1.088 4.553 2.624 2.624 0 01-3.178.552 4.906 4.906 0 01-1.716-1.154 5.989 5.989 0 01-1.102-1.398l-.307-.603a2.13 2.13 0 01-.308.436 2.24 2.24 0 01-1.05.449 3.186 3.186 0 01-1.896-.231 7.113 7.113 0 01-3.357-3.014 9.692 9.692 0 01-1.486-4.861 4.775 4.775 0 011.192-3.848 2.739 2.739 0 013.113-.488c.513.205.986.5 1.396.873.35.297.659.637.922 1.013l.23.41v-1.141l2.563 1 .256 7.209c.018.516.178 1.017.462 1.449.24.417.609.745 1.05.936 1.238.488 1.81-.581 1.717-3.206a13.889 13.889 0 00-2.473-7.247 12.136 12.136 0 00-5.675-4.848 4.774 4.774 0 00-5.33.68 7.252 7.252 0 00-2.062 5.925 15.3 15.3 0 002.562 7.696 11.817 11.817 0 005.47 5.13c.812.34 1.684.51 2.563.5a3.417 3.417 0 001.665-.307l.513-.283 1.55 2.886-.257.18a6.133 6.133 0 01-.755.359c-.41.177-.84.298-1.282.36a6.398 6.398 0 01-1.703 0 8.575 8.575 0 01-2.165-.552 14.093 14.093 0 01-5.125-3.771 22.36 22.36 0 01-3.971-6.208 19.027 19.027 0 01-1.64-6.888c-.138-2 .27-3.999 1.179-5.784a6.51 6.51 0 013.638-3.207 7 7 0 015.047.257 16.288 16.288 0 017.508 6.438zm-5.65 9.12c.42-.538.61-1.221.525-1.899a4.904 4.904 0 00-.679-2.372 3.255 3.255 0 00-1.55-1.411 1.395 1.395 0 00-1.576.205 2.35 2.35 0 00-.563 1.86c.029.846.28 1.669.73 2.385.37.652.94 1.165 1.627 1.463a1.28 1.28 0 001.486-.231M375.433 178.013a18.74 18.74 0 013.33 9.748 6.419 6.419 0 01-1.088 4.553 2.637 2.637 0 01-3.177.552 5.047 5.047 0 01-1.717-1.154 6.207 6.207 0 01-1.102-1.399l-.307-.602c-.087.156-.19.302-.308.436-.304.24-.666.395-1.05.449a3.071 3.071 0 01-1.883-.218 7.113 7.113 0 01-3.357-3.027 9.653 9.653 0 01-1.499-4.874 4.724 4.724 0 011.192-3.848 2.726 2.726 0 013.1-.487c.514.204.987.499 1.396.872.35.302.66.647.923 1.026l.243.41v-1.141l2.562.987.257 7.209c.022.515.181 1.015.46 1.449.242.417.61.745 1.051.936 1.281.488 1.807-.577 1.73-3.206a13.953 13.953 0 00-2.473-7.26 12.161 12.161 0 00-5.662-4.835 4.787 4.787 0 00-5.33.667 7.252 7.252 0 00-2.01 5.964 15.25 15.25 0 002.561 7.695 11.868 11.868 0 005.535 4.964 6.668 6.668 0 002.562.513 3.545 3.545 0 001.665-.308l.513-.282 1.55 2.886-.256.18a6.133 6.133 0 01-.756.359c-.412.17-.842.29-1.281.359a6.526 6.526 0 01-1.717 0 8.55 8.55 0 01-2.152-.564 14.093 14.093 0 01-5.125-3.759 22.41 22.41 0 01-3.97-6.22 18.988 18.988 0 01-1.64-6.888 11.003 11.003 0 011.178-5.772 6.562 6.562 0 013.638-3.219 7.09 7.09 0 015.06.257 16.315 16.315 0 017.354 6.592zm-5.65 9.12a2.567 2.567 0 00.538-1.899 4.865 4.865 0 00-.691-2.372 3.204 3.204 0 00-1.538-1.411 1.395 1.395 0 00-1.575.192 2.323 2.323 0 00-.577 1.86c.03.842.281 1.66.73 2.373.369.655.94 1.172 1.627 1.475a1.28 1.28 0 001.486-.218" fill="#F47B56" />
<path d="M120.139 232.704L76.774 208l-43.351 24.754s24.122 15.083 45.709 27.756c13.707-9.697 25.89-20.791 41.007-27.807z" fill="url(#e)" opacity=".25" style="mix-blend-mode: multiply" />
</g>
</svg>
</div>
<div class="rightSide">
<h1>FAQ</h1>
<button onclick="toggleElement('btnFaq1')" class="btnFaq" id="btnFaq1">
How many team members can I invite?
<svg class="iconButton" width="10" height="7" xmlns="http://www.w3.org/2000/svg">
<path d="M1 .799l4 4 4-4" stroke="#F47B56" stroke-width="2" fill="none" fill-rule="evenodd" />
</svg>
</button>
<p id="textRightSide1" class="hiddenElement">
You can invite up to 2 additional users on the Free plan. There is
no limit on team members for the Premium plan.
</p>
<div class="divider"></div>
<button onclick="toggleElement('btnFaq2')" id="btnFaq2" class="btnFaq">
What is the maximum file upload size?
<svg class="iconButton" width="10" height="7" xmlns="http://www.w3.org/2000/svg">
<path d="M1 .799l4 4 4-4" stroke="#F47B56" stroke-width="2" fill="none" fill-rule="evenodd" />
</svg>
</button>
<p id="textRightSide2" class="hiddenElement">
No more than 2GB. All files in your account must fit your allotted
storage space.
</p>
<div class="divider"></div>
<button onclick="toggleElement('btnFaq3')" id="btnFaq3" class="btnFaq">
How do I reset my password?
<svg class="iconButton" width="10" height="7" xmlns="http://www.w3.org/2000/svg">
<path d="M1 .799l4 4 4-4" stroke="#F47B56" stroke-width="2" fill="none" fill-rule="evenodd" />
</svg>
</button>
<p id="textRightSide3" class="hiddenElement">
Click “Forgot password” from the login page or “Change password”
from your profile page. A reset link will be emailed to you.
</p>
<div class="divider"></div>
<button onclick="toggleElement('btnFaq4')" id="btnFaq4" class="btnFaq">
Can I cancel my subscription?
<svg class="iconButton" width="10" height="7" xmlns="http://www.w3.org/2000/svg">
<path d="M1 .799l4 4 4-4" stroke="#F47B56" stroke-width="2" fill="none" fill-rule="evenodd" />
</svg>
</button>
<p id="textRightSide4" class="hiddenElement">
Yes! Send us a message and we’ll process your request no questions
asked.
</p>
<div class="divider"></div>
<button onclick="toggleElement('btnFaq5')" id="btnFaq5" class="btnFaq">
Do you provide additional support?
<svg class="iconButton" width="10" height="7" xmlns="http://www.w3.org/2000/svg">
<path d="M1 .799l4 4 4-4" stroke="#F47B56" stroke-width="2" fill="none" fill-rule="evenodd" />
</svg>
</button>
<p id="textRightSide5" class="hiddenElement">
Chat and email support is available 24/7. Phone lines are open
during normal business hours.
</p>
<div class="divider"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Refer the jsFiddle: https://jsfiddle.net/zqh3ra0u/2/

Read your code more attentively before asking, you wrote with instead of width in the #media rule.

SVG inlined in CSS works in Chrome/Edge but not in Firefox [duplicate]

This question already has an answer here:
How to use a hex value for SVG in FireFox
(1 answer)
Closed 5 years ago.
I have the following code to display icons. The GitHub icon doesn't work on Firefox but works on Chrome and Edge. Strangely, the Google icon works on all browsers!
.github-icon {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='#fff' d='M1664 896q0 251-146.5 451.5t-378.5 277.5q-27 5-39.5-7t-12.5-30v-211q0-97-52-142 57-6 102.5-18t94-39 81-66.5 53-105 20.5-150.5q0-121-79-206 37-91-8-204-28-9-81 11t-92 44l-38 24q-93-26-192-26t-192 26q-16-11-42.5-27t-83.5-38.5-86-13.5q-44 113-7 204-79 85-79 206 0 85 20.5 150t52.5 105 80.5 67 94 39 102.5 18q-40 36-49 103-21 10-45 15t-57 5-65.5-21.5-55.5-62.5q-19-32-48.5-52t-49.5-24l-20-3q-21 0-29 4.5t-5 11.5 9 14 13 12l7 5q22 10 43.5 38t31.5 51l10 23q13 38 44 61.5t67 30 69.5 7 55.5-3.5l23-4q0 38 .5 89t.5 54q0 18-13 30t-40 7q-232-77-378.5-277.5t-146.5-451.5q0-209 103-385.5t279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-color: dimgray;
}
.google-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-60 -60 710.117 710.117' %3E%3Cpath fill='%23fff' fill-rule='evenodd' clip-rule='evenodd' d='M516.375,255v-76.5h-51V255h-76.5v51h76.5v76.5h51V306h76.5v-51H516.375z M320.025,341.7l-28.051-20.4%0Ac-10.2-7.649-20.399-17.85-20.399-35.7s12.75-33.15,25.5-40.8c33.15-25.5,66.3-53.55,66.3-109.65c0-53.55-33.15-84.15-51-99.45%0Ah43.35l30.6-35.7h-158.1c-112.2,0-168.3,71.4-168.3,147.9c0,58.65,45.9,122.4,127.5,122.4h20.4c-2.55,7.65-10.2,20.4-10.2,33.15%0Ac0,25.5,10.2,35.7,22.95,51c-35.7,2.55-102,10.2-150.45,40.8c-45.9,28.05-58.65,66.3-58.65,94.35%0Ac0,58.65,53.55,114.75,168.3,114.75c137.7,0,204.001-76.5,204.001-150.449C383.775,400.35,355.725,372.3,320.025,341.7z%0AM126.225,109.65c0-56.1,33.15-81.6,68.85-81.6c66.3,0,102,89.25,102,140.25c0,66.3-53.55,79.05-73.95,79.05%0AC159.375,247.35,126.225,168.3,126.225,109.65z M218.024,568.65c-84.15,0-137.7-38.25-137.7-94.351c0-56.1,51-73.95,66.3-81.6%0Ac33.15-10.2,76.5-12.75,84.15-12.75s12.75,0,17.85,0c61.2,43.35,86.7,61.2,86.7,102C335.324,530.4,286.875,568.65,218.024,568.65z%0A'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-color: red;
}

Found it. # should be replaced with %23

Resources