.YeUCx {
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* :global(:where(:root.ezoic-desktop)) .root {
  height: calc(100% - 100px);
}
:global(:where(:root.ezoic-mobile)) .root {
  height: calc(100% - 60px);
} */

.YeUCx main {
    max-width: 800px;
    flex-grow: 1;
    padding: 20px;
    width: 100%;
    margin: 0 auto;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}


.K9OUw {
  --min-top: 10px; /* damit das Popup bei kleinen Bildschirmen nicht oben und unten anstößt */
  position: relative;
  overflow: auto;
  width: 500px;
  max-height: calc(100vh - 2 * var(--min-top));
  margin: var(--min-top) 0;
  border-radius: 10px;
  display: flex;
  justify-content: center;
}

@media (max-width: 550px) {
  .K9OUw {
      width: 100vw;
      height: 100vh;
      max-height: 100vh;
      border-radius: 0;
      margin: 0;
      border: 0;
  }
}

.wx6GA {
  --min-top: 10px; /* damit das Popup bei kleinen Bildschirmen nicht oben und unten anstößt */
  position: relative;
  overflow: auto;
  max-height: calc(100vh - 2 * var(--min-top));
  margin: var(--min-top) 0;
  background: var(--bg-color);
  border: 1px solid var(--popup-border-color);
  border-radius: 10px;
  padding: 20px;
}

.nDifa {
  font-size: 1.5em;
  font-weight: 500;
  margin-bottom: 10px;
}

.e8qmq {
  font-size: 1.1em;
  font-weight: normal;
  margin-bottom: 10px;
}

.J_nLc {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 10px;
  right: 10px;
  background-image: url(99863e78087dca93b040.svg);
  background-size: 100%;
  background-color: transparent;
  border: none;
  cursor: pointer;
  filter: var(--svg-filter);
  z-index: 200033;
}

/********************************************
* Main
*********************************************/

body {
    background-color: white;
}

.xX5yB {
    font-family: "Arial", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
      "wdth" 100;
}

.mWN9Y {
    --padding: 7px;
    --main-width: min(calc(100vw - 2 * var(--padding)), calc(80vh - 100px));
    --main-max-width: 500px;

    width: var(--main-width);
    max-width: var(--main-max-width);
    margin: auto;

}

/********************************************
* puzzlephil Logo
*********************************************/
.QiNQG {
    margin-top: 10px;
}

.nnfHX {
    margin: auto;
    font-size: 10px;
    text-align: center;
}

.Dgazm {
    margin: 3px auto;
    height: 27px;
    background-image: url(0d5969a0663976a18208.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}



/********************************************
* TopBar
*********************************************/
.C2gQR {
    width: 98%;
    height: 30px;
    margin: 10px auto 3px;
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
    font-size: min(4vw, 21px, 3vh); 
}

.C2gQR > div {
    margin: auto;
    width: 100%;
}

.CoX6T {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.AcVyS {
    display: flex;
    justify-content: right;
}

.eBXuB {
    gap: 5px;
}

.C2gQR .iGfXu {
    display: flex;
    justify-content: left;
    text-align: left;
}

.C2gQR .jR32b {
    display: flex;
    justify-content: center;
    text-align: center;
}

.C2gQR .yXDke {
    display: flex;
    justify-content: right;
    text-align: right;
}

.C2gQR button {
    width: min(7vw, 30px);
    max-width: 30%;
    aspect-ratio: 1;
}

/********************************************
* Board
*********************************************/
.MRPAa {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 5px;
}

.MRPAa.qPJlE {
    animation: qPJlE 0.7s ease-in-out;
}

@keyframes qPJlE {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(0.95); }
}

.tAGX6, .eJ9x1, .pB133, .oDbCP {
    position: absolute;
    width: 100%;
    height: 100%;
}

.tAGX6.YBmA6{
    animation: YBmA6 1s ease-in-out forwards;
}

@keyframes YBmA6 {
    0% { transform: scale(1) }
    50% { transform: scale(0.8) }
    100% { transform: scale(0.9) }
}

/********************************************
* Input buttons & pencilmark buttons
*********************************************/

.FSZBn {
    --button-color: #77b563;
    --button-background-color: white;
    --button-text-color-wert-set: white;
    --button-text-color-wert-inconsistent: red;
}

.t9oIj, .T7FMq {
    display: flex;
    /* grid-template-columns: repeat(auto-fill, minmax(8%, 1fr)); */
    grid-gap: 2px;
    margin-top: 10px;
}

.t9oIj .r_wKp {
    display: flex;
    align-content: center;
    justify-content: center;
    font-size: 30px;
    cursor: pointer;
}

.t9oIj .r_wKp.nlV6m, .T7FMq .r_wKp.nlV6m {
    visibility: hidden;
}

.T7FMq .r_wKp {
    display: flex;
    align-items: anchor-center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
}

.IQTKk {
    font-size: 27px;
    font-weight: normal;
    color: var(--button-color);
    border-radius: 5px;
    text-align: center;
    border: 1px var(--button-color) solid;
    background-color: var(--button-background-color);
    cursor: pointer;
    flex-grow: 1;
    user-select: none;
}
/* nur desktop und wenn der Wert nicht gewählt ist, soll eine Hover-Effekt sein */
.IQTKk:not(.Sb8yL):hover {
    background: #ddd;
}

.yo9DR {
    display: flex;
    align-items: anchor-center;
    justify-content: center;
    font-size: 17px;
    font-weight: normal;
    color: var(--button-color);
    border-radius: 5px;
    border: 1px transparent solid;
    background-color: transparent;
    cursor: pointer;
    flex-grow: 1;
    user-select: none;
}

/* nur desktop und wenn der Wert nicht gewählt ist, soll ein Hover-Effekt sein */
.yo9DR:not(.Sb8yL):hover {
    background:#ddd;
}

.G_BlD {
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(244b66874c46718f7e06.svg);
	/* macht das Icon rot */
    background-color: transparent;
    border: none;
	filter: brightness(0) saturate(100%) invert(18%) sepia(100%) saturate(5000%) hue-rotate(0deg);
    flex-grow: 1;
}

.IC0T0 {
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(819189bebc188b9d9397.svg);
    background-color: transparent;
    border: none;
}

.Sb8yL {
    font-weight: normal;
    background-color: var(--button-color);
    border-color: var(--button-color);
    color: var(--button-text-color-wert-set);
}

.rQgIk {
    font-weight: normal;
    background-color: orange;
    border-color: #77b563;
    color: rgba(255,255,255,1);
}

/********************************************
* Game Over Animation
*********************************************/

.YBmA6 {
    transform-origin: center center;
    animation: YBmA6 1s infinite;
}

@keyframes YBmA6 {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.5);
    }
    100% {
        transform: scale(1);
    }
}

/********************************************
* Game Over Screen
*********************************************/
.njcZX {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: 360px;
    height: 200px;
}

.S0hBP {
    text-align: center;
    margin: 30px;
    font-size: 1em;
}
._7SVT {
    margin: 30px 0 20px 0;
    font-size: max(1em, 20px);
}

/********************************************
* Control Screen
*********************************************/

.ntgxy {
    padding: 0 10px;
}

.ntgxy .FSZBn {
    display: flex;
    width: 100%;
    margin: 30px 0;
    flex-direction: row;
    justify-content: center;
    gap: 2px;
}

.NVY14 {
    width: 100px;
    background-color: #1d74e5;
}

.OA91U {
    width: 100px;
    background-color: #67a760;
}

.yHT65 {
    width: 100px;
    background-color: #c30303;
}

button.jYE_I {
    height: 50px;
    background-color: #e5a71d;
}
button.jYE_I img {
    width: 30px;
    height: 30px;
    margin-left: 10px;
}

/********************************************
* Info Screen
*********************************************/

.cBvqy {
    background: var(--bg-color);
    min-width: 94%;
    margin: auto;
	font-size: 17px;
    max-width: 500px;
    max-height: calc(100% - 50px);
    top: 50%;
    left: 50%;
    overflow-y: auto;
    z-index: 200020;
    border-radius: 12px;
}

@media (max-width: 600px) {
    .cBvqy {
        height: 100%;
        max-height: initial;
        border-radius: initial;
    }
}

.l6sFQ {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.ziLYp {
	background-size: 100%;
	width: 120px;
	height: 120px;
	background-color: white;
    background-repeat: no-repeat;
}

.ZUAMt {
	width: 30px;
	height: 30px;
	margin: 40px 30px;
	background-image: url(d688f71d5ff1c10ea93e.svg);
	background-size: 100%;
}

@media screen and (max-width: 360px) {
	.ZUAMt {
		margin: 40px 13px;
	}
}

._NzQP {
	width: 25px;
    height: 25px;
    position: absolute;
    top: 10px;
    right: 10px;
    background-image: url(99863e78087dca93b040.svg);
    background-size: 100%;
    background-color: transparent;
    border: 0px;
    display: block;
    cursor: pointer;
    z-index: 200007;
}
:where(:root.darkMode) ._NzQP
{
  filter: invert(1);
}

.cBvqy h1 {
	font-size: 20px;
	padding: 0px 10px;
	text-align: left;
	margin: 0;
	margin-bottom: -15px;
}
.cBvqy h2 {
	position: relative;
	text-align: center !important;
	font-size: 30px;
	padding: 12px 5px;
	margin: 0;
	margin-bottom: 5px;
}
.cBvqy h3 {
	text-align: left;
    margin: 0px 6px 3px 6px;
    padding: 6px 12px;
    color: white;
	background-color: #999;
    cursor: pointer;
}
.cBvqy p {
	text-align: left;
    margin: 2px 6px;
    padding: 4px 10px;
}
.cBvqy ul {
	font-size: 17px;
	margin: 0px;
	padding: 0px 12px;
	color: black;
}

.cBvqy .V7dZB {
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: 15px;
    margin-bottom: 3%;
}


/* @font-face {
    font-family: 'MabryPro-Bold';
    src: url('./fonts/MabryPro-Bold.otf') format('opentype');
}

@font-face {
    font-family: 'MabryPro';
    src: url('./fonts/MabryPro-Normal.otf') format('opentype');
} */



/* use this class to attach this font to any element i.e. <p class="fontsforweb_fontid_7349">Text with this font applied</p> */
/* .fontsforweb_fontid_7349 {
	font-family: 'impactreg' !important;
} */

/* Font downloaded from FontsForWeb.com */

body {
    --font-family: 'Arial', sans-serif;
    --bvz-red: #c70000;
    --bvz-background: #ddd;
    font-size: min(4vw, 21px, 3vh);
    margin: 0;
}


.OQd3R {
    color: var(--bvz-red);
    font-weight: bold;
}

.HJoRA {
    width: 100%;
    margin: 20px auto;
    padding: 0 10px 0 0;
    background-color: var(--bvz-red);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

.Y8aUC {
    width: 100px;
    height: 50px;
    background-image: url(e6961ceab3a730d35387.svg);
    background-size: 70%; 
    background-repeat: no-repeat;
    background-position: center;
}

.UNvlT {
    color: white;
    font-size: 1.7em;
    font-weight: bold;
    margin-left: 10px;
}

.X8AhW {
    margin: auto;
    color: var(--bvz-red);
    font-size: 1em;
    text-align: center;
    text-decoration: none;
}

.Mf9iA {
    font-size: 1em;
    width: 100%;
    margin: 50px auto;
    text-align: center;
}

#gikKZ {
    margin: 20px 0;
    --bvz-red: #c70000;
}

.xat_U {
    margin: 2px 10px;
    text-align: right;
    color: white;
    cursor: pointer;
}

.xat_U.lIDAB {
    font-weight: bold;
    text-decoration: underline;
}

.X8AhW {
    margin: auto;
    color: #888;
    font-size: 0.7em;
    text-align: center;
    text-decoration: none;
    margin-bottom: 5px;
}

.F6i02 {
    text-align: center;
    width: 100%;
    max-width: 200px;
    margin: auto;
    display: block;
}

.e24iY {
    height: 40px;
    margin: auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(a1466f8781cde73d31ba.svg);
}

/********************************************
* GameOver
*********************************************/
.Qy9L1 {
    min-width: 300px;
    max-width: 550px;
    color: var(--bvz-grau);
    background-color: var(--bvz-background);
    padding: 20px 10px 40px;
    border-radius: 10px;
}

.IXCLZ {
    height: 70px;
    margin: auto;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(80fb9b35db488f992401.svg);
}

button.gttmP {
    margin: auto;
    border-radius: 3px;
    background-color: var(--bvz-red);
}

div.aTu8t {
    background-color: var(--bvz-background);
    border-radius: 3px;
    padding: 1.5em 0em;
}

/********************************************
* Info
*********************************************/

.dBily {
    position: relative;
    top: 0;
    left: 0;
    background-color: var(--bvz-background);
    overflow: auto;
    max-width: initial;
}

@media (max-width: 600px) {
    .dBily {
        width: 100%;
        height: 100%;
        margin: 0 auto;
    }
}

.ofnmR {
    width: 100%;
    text-align: center;
    margin-top: 27px;
    margin-bottom: 10px;
    font-family: var(--font-family);
    height: 2em;
    line-height: 2em;
    font-size: 1.7em;
}


h3.xa49S {
    width: 100%;
    text-align: center;
    color: var(--bvz-red);
    background-color: transparent;
    border-bottom: 1px solid black;
    padding: 5px 0;
    margin: 20px 0 10px;
}

.dBily .ErA6f {
    margin: 20px 15px;
}

.dBily .ErA6f p {
    margin: 0;
    padding: 7px 0;
}

div.KXppZ {
    background-color: var(--bvz-background);
    border-radius: 3px;
    padding: 1.5em 0em;
}

.cqig5, .S4aOP, .XfXrv, .wzZbS {
    background-color: var(--bvz-background);
    padding: 10px 0;
    border-radius: 5px;
}


/********************************************
* Input buttons & pencilmark buttons
*********************************************/

.fvJEp {
    font-family: var(--font-family);
}

.STrLO {
    --button-color: var(--bvz-red);
}

div.iLrY1 {
    position: relative;
    width: fit-content;
    max-width: 500px;
    width: fit-content;
    height: fit-content;
    border-radius: 4px;
    border: 1px solid #888;
    padding: 1em 0em;
    background-color: var(--bg-color-pu1);
}

button.E4Pgw, button.WMMMy, button.KuN3g {
    width: 80px;
    aspect-ratio: 1;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    margin: 0 10px;
    padding: 2px 10px 0;
    border: 1px solid white;
}

button.b7xkE {
    border-radius: 4px;
}


/* * * * * * * * * * * * * * * * * * * * *\
  CSShake :: shake
  v1.5.0
  CSS classes to move your DOM
  (c) 2015 @elrumordelaluz
  http://elrumordelaluz.github.io/csshake/
  Licensed under MIT
\* * * * * * * * * * * * * * * * * * * * */
.SGzfd {
  /*display: inline-block;*/
  transform-origin: center center;
  animation-name: uE3vz;
  animation-duration: 100ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes uE3vz {
  2% {
    transform: translate(-1.5px, -1.5px) rotate(0.5deg); }
  4% {
    transform: translate(-1.5px, -0.5px) rotate(1.5deg); }
  6% {
    transform: translate(2.5px, 0.5px) rotate(1.5deg); }
  8% {
    transform: translate(2.5px, 1.5px) rotate(0.5deg); }
  10% {
    transform: translate(1.5px, -0.5px) rotate(0.5deg); }
  12% {
    transform: translate(1.5px, 0.5px) rotate(1.5deg); }
  14% {
    transform: translate(1.5px, -1.5px) rotate(-0.5deg); }
  16% {
    transform: translate(-0.5px, 0.5px) rotate(0.5deg); }
  18% {
    transform: translate(-0.5px, -1.5px) rotate(1.5deg); }
  20% {
    transform: translate(2.5px, 1.5px) rotate(1.5deg); }
  22% {
    transform: translate(-1.5px, -0.5px) rotate(1.5deg); }
  24% {
    transform: translate(2.5px, -0.5px) rotate(-0.5deg); }
  26% {
    transform: translate(-1.5px, 0.5px) rotate(0.5deg); }
  28% {
    transform: translate(2.5px, 0.5px) rotate(0.5deg); }
  30% {
    transform: translate(2.5px, 2.5px) rotate(1.5deg); }
  32% {
    transform: translate(-1.5px, 0.5px) rotate(0.5deg); }
  34% {
    transform: translate(1.5px, 1.5px) rotate(-0.5deg); }
  36% {
    transform: translate(-1.5px, -0.5px) rotate(0.5deg); }
  38% {
    transform: translate(1.5px, 1.5px) rotate(0.5deg); }
  40% {
    transform: translate(1.5px, 2.5px) rotate(0.5deg); }
  42% {
    transform: translate(1.5px, -0.5px) rotate(-0.5deg); }
  44% {
    transform: translate(2.5px, -1.5px) rotate(-0.5deg); }
  46% {
    transform: translate(2.5px, 0.5px) rotate(-0.5deg); }
  48% {
    transform: translate(-0.5px, 0.5px) rotate(-0.5deg); }
  50% {
    transform: translate(-0.5px, 1.5px) rotate(0.5deg); }
  52% {
    transform: translate(1.5px, 0.5px) rotate(0.5deg); }
  54% {
    transform: translate(-1.5px, -0.5px) rotate(0.5deg); }
  56% {
    transform: translate(0.5px, 2.5px) rotate(1.5deg); }
  58% {
    transform: translate(0.5px, 1.5px) rotate(0.5deg); }
  60% {
    transform: translate(2.5px, 0.5px) rotate(1.5deg); }
  62% {
    transform: translate(1.5px, 1.5px) rotate(1.5deg); }
  64% {
    transform: translate(-0.5px, -0.5px) rotate(-0.5deg); }
  66% {
    transform: translate(-1.5px, 0.5px) rotate(-0.5deg); }
  68% {
    transform: translate(2.5px, -0.5px) rotate(0.5deg); }
  70% {
    transform: translate(2.5px, 2.5px) rotate(0.5deg); }
  72% {
    transform: translate(-1.5px, 2.5px) rotate(1.5deg); }
  74% {
    transform: translate(1.5px, -0.5px) rotate(1.5deg); }
  76% {
    transform: translate(-0.5px, -0.5px) rotate(1.5deg); }
  78% {
    transform: translate(1.5px, 1.5px) rotate(-0.5deg); }
  80% {
    transform: translate(1.5px, -0.5px) rotate(-0.5deg); }
  82% {
    transform: translate(-0.5px, 2.5px) rotate(-0.5deg); }
  84% {
    transform: translate(0.5px, -1.5px) rotate(-0.5deg); }
  86% {
    transform: translate(-0.5px, 0.5px) rotate(-0.5deg); }
  88% {
    transform: translate(1.5px, 2.5px) rotate(-0.5deg); }
  90% {
    transform: translate(-1.5px, 0.5px) rotate(1.5deg); }
  92% {
    transform: translate(2.5px, 0.5px) rotate(1.5deg); }
  94% {
    transform: translate(-0.5px, 1.5px) rotate(1.5deg); }
  96% {
    transform: translate(-1.5px, -1.5px) rotate(0.5deg); }
  98% {
    transform: translate(2.5px, 2.5px) rotate(0.5deg); }
  0%, 100% {
    transform: translate(0, 0) rotate(0); }
}

.s5kv4 {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    --duration: 200ms;
}

.X5vJ9 {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 10px;
    right: 10px;
    background-image: url(99863e78087dca93b040.svg);
    background-size: 100%;
    background-color: transparent;
    border: none;
    cursor: pointer;
    filter: var(--svg-filter);
    z-index: 200033;
}

.aVSd2 {
    position: absolute;
    box-sizing: border-box;
    transform-origin: center;
    transition: top 200ms ease-out;
    z-index: 200002;
    display: flex;
    justify-content: center;
    align-items: center;
}

.oKXQ8 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: grey;
    z-index: 200001;
}

.oKXQ8.XkPAO {
    animation: cozYK var(--duration);
}

.oKXQ8.pPmXN {
    opacity: 0.5;
}

.oKXQ8:not(.pPmXN) {
    animation: GD82r var(--duration);
    opacity: 0;
}

.aVSd2.XkPAO {
    animation: v35tN var(--duration);
}

.aVSd2.pPmXN {
    opacity: 1;
}

.aVSd2:not(.pPmXN) {
    animation: MyWfe var(--duration);
    opacity: 0;
}

.cbNS0.XkPAO {
    animation: MKY5w var(--duration);
}

.cbNS0.pPmXN {
    opacity: 1;
}

.cbNS0:not(.pPmXN) {
    animation: U8bxv var(--duration);
    opacity: 0;
}

.aVSd2.mBXSI {
    animation: 70ms alternate 2 mBXSI;
}


@keyframes MKY5w {
    from {
        transform: scale(0.8);
    }

    to {
        transform: scale(1);
    }
}

@keyframes U8bxv {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(0.8);
    }
}

@keyframes v35tN {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes MyWfe {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes cozYK {
    from {
        opacity: 0;
    }

    to {
        opacity: 0.5;
    }
}

@keyframes GD82r {
    from {
        opacity: 0.5;
    }

    to {
        opacity: 0;
    }
}
  
@keyframes mBXSI {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.05);
    }
}
/*************************************************************************
/* Standard Popups
/************************************************************************/

.eevUG {
    color: var(--txt-color);
    background-color: var(--bg-color);
    position: relative;
    text-align: center;
    width: fit-content;
    min-width: 250px;
    padding: 20px;
    border-radius: 10px;
}

/*************************************************************************
/* Popups: Notify, Confirm, Select
/************************************************************************/

.PSOGF {
    margin: 5px auto 5px;
    text-align: center;
}

.LBOWL {
    margin: 5px auto 5px;
    text-align: center;
    font-size: 0.7em;
    font-weight: 400;
}

.gASbR {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.wJwlr {
    margin: 7px;
    min-width: 100px;
    font-size: 1em;
    padding: 3px 0;
    background-color: #aab;
    border: none;
    border-radius: 100px;
    padding: 4px 10px;
}

.WrdxS, .exrrF {
    background-color: orange;
    border-color: #b37400;
}

.uhOD7 {
    border-collapse: collapse;
    width: 95%; margin:auto;
}

.jS2im td {
    border: 1px solid lightgrey;
    width: 33%;
    font-size: 0.7em
}

.Dox86 td {
    border: 1px solid lightgrey;
    width: 33%;
    font-family: monospace;
    font-size: 0.9em;
    font-weight: bold;
    text-align: left;
    padding-left: 10%;
}
.YecUF {
    background-image: url(ad858245897648655c4d.svg);
}

.Wd6HJ {
    background-image: url(9a879eebf68af3a27879.svg);
}

.y9vW8 {
    background-image: url(95cb62cf9a077824c5ca.svg);
}

.SKgrg {
    background-image: url(51dea0077beb72116b4a.svg);
}

.mcOqh {
    background-image: url(b06737d8c8a93744b27e.svg);
}

.J82vX {
    background-image: url(83fae7e589529094ef96.svg);
}

.fCV6t {
    background-image: url(bd2f73f6fa82dd226131.svg);
}

.IZxZQ {
    background-image: url(463f70d0e09ee2b88af0.svg);
}

.mzF1H {
    background-image: url(70c7fd7994561db1d41f.svg);
}

.J5rH8 {
    background-image: url(e7ba3a792b50cea10061.svg);
}

.keJ5B {
    background-repeat: no-repeat;
    background-position: center;
    background-origin: content-box;
    background-size: contain;
    border: 0;
    background-color: transparent;
    width: 24px;
    aspect-ratio: 1;
    padding: 0;
    cursor: pointer;
}

.aSPSf {
    margin: auto;
    width: 90%;
}

.xe1Tz {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: 20px auto;
}

.yHbiK {
    margin: auto;
    width: 90%;
}

.ukrnA {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: 20px auto;
}

.STXv6 {
    height: 36px;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    color: #fff;
    border-radius: 18px;
    cursor: pointer;
    margin: 0 10px;
    padding: 0 10px;
}

.STXv6 img {
    width: 20px;
    height: 20px;
    filter: invert(1);
}

.cNtFj {
    width: 80px;
    font-size: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 0;
    color: #fff;
    border-radius: 13px;
    cursor: pointer;
    margin: 0 10px;
    padding: 2px 0;
}

.cNtFj img {
    width: 70%;
    margin: auto;
    filter: invert(1);
}

.cNtFj span {
    width: 100%;
    margin: auto;
}

.aqL3Q {
    width: fit-content;
    min-width: 130px;
    background-color: #691c88;
}

.NdX1i {
    width: fit-content;
    min-width: 130px;
    background-color: #67a760;
}

.q11JN {
    height: 42px;
    background-color: #ed7d31;
}


.QMNMX {
    height: 42px;
    background-color: #ed7d31;
    color: white;
    text-align: center;
    font-size: 1.3em;
    line-height: 42px;
    border-radius: 42px;
    padding: 0 13px;
    cursor: pointer;
}

.XIS0n {
    width: 42px;
    height: 42px;
    background-color: #ed7d31;
    border-radius: 50%;
    cursor: pointer;
}

.XIS0n > div {
    width: 100%;
    height: 100%;
    background-size: 60%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    filter: invert(1);
}

.XIS0n > div.SDIF8 {
    background-image: url(9a879eebf68af3a27879.svg);
}

.XIS0n > div.gVJ8e {
    background-image: url(51dea0077beb72116b4a.svg);
    margin-left: -2px;
}

.NycM9 {
    animation: NycM9 1s 3s forwards ease-out;
}

@keyframes NycM9 {
    0% {
        transform: none;
    }

    50% {
        transform: rotateZ(-20deg) scale(1.2);
    }

    60% {
        transform: rotateZ(25deg) scale(1.2);
    }

    67.5% {
        transform: rotateZ(-15deg) scale(1.2);
    }

    75% {
        transform: rotateZ(15deg) scale(1.2);
    }

    82.5% {
        transform: rotateZ(-12deg) scale(1.2);
    }

    85% {
        transform: rotateZ(0) scale(1.2);
    }

    100% {
        transform: rotateZ(0) scale(1);
    }
}