From 630c29961e226113408ab2a905bdb3751fc1a127 Mon Sep 17 00:00:00 2001
From: Mukul Bansal <mukulbansal01@gmail.com>
Date: Mon, 4 Sep 2023 22:14:32 +0100
Subject: [PATCH] fix: form component snapshots

affects: @medly-components/forms
---
 .../Form/__snapshots__/Form.test.tsx.snap     | 1024 ++++++++---------
 1 file changed, 512 insertions(+), 512 deletions(-)

diff --git a/packages/forms/src/components/Form/__snapshots__/Form.test.tsx.snap b/packages/forms/src/components/Form/__snapshots__/Form.test.tsx.snap
index ec01eda19..c09f02161 100644
--- a/packages/forms/src/components/Form/__snapshots__/Form.test.tsx.snap
+++ b/packages/forms/src/components/Form/__snapshots__/Form.test.tsx.snap
@@ -347,263 +347,6 @@ exports[`Form should render properly with initial state 1`] = `
   margin-left: 0.8rem;
 }
 
-.c20 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-}
-
-.c20 >:first-child {
-  margin-bottom: 0.9rem;
-}
-
-.c33 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-}
-
-.c33 >:first-child {
-  margin-bottom: 0.9rem;
-}
-
-.c22 {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  cursor: inherit;
-  color: inherit;
-}
-
-.c22::after {
-  content: ' *';
-  color: default:inherit;
-  disabled: #98A7B7;
-}
-
-.c25 {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  cursor: inherit;
-  color: inherit;
-  padding: 0 1.6rem;
-}
-
-.c23 {
-  display: grid;
-  grid-template-columns: repeat(1,1fr);
-}
-
-.c29 {
-  border: 0.15rem solid;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  border-radius: 22.2%;
-  -webkit-transition: all 100ms ease-out;
-  transition: all 100ms ease-out;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c29 .c30 {
-  pointer-events: none;
-  z-index: 1;
-  -webkit-transition: all 200ms ease-in-out;
-  transition: all 200ms ease-in-out;
-  -webkit-transform: scale(0);
-  -ms-transform: scale(0);
-  transform: scale(0);
-  width: 100%;
-  height: 100%;
-  margin-right: 0.05rem;
-}
-
-.c27 {
-  opacity: 0;
-  margin: 0;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  outline: none;
-  position: absolute;
-}
-
-.c27:checked ~ .c28 {
-  border-color: #3872D2;
-  background-color: #3872D2;
-}
-
-.c27:checked ~ .c28 .c30 {
-  -webkit-transform: scale(1);
-  -ms-transform: scale(1);
-  transform: scale(1);
-}
-
-.c27:checked ~ .c28 .c30 * {
-  fill: #ffffff;
-}
-
-.c27:not(:checked) ~ .c28 {
-  background-color: transparent;
-  border-color: #13181D;
-}
-
-.c27:not(:disabled):focus ~ .c28 {
-  box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.35);
-  border-color: #3872D2;
-}
-
-.c27:not(:disabled):focus:not(:checked) ~ .c28 {
-  border-color: #3872D2;
-}
-
-.c26 {
-  margin: 0.3rem;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  width: 1.8rem;
-  height: 1.8rem;
-  position: relative;
-}
-
-.c24 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  cursor: pointer;
-  padding: 0.8rem 0;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-  -webkit-flex-direction: row-reverse;
-  -ms-flex-direction: row-reverse;
-  flex-direction: row-reverse;
-}
-
-.c24 * {
-  cursor: pointer;
-}
-
-.c24.c24.c24:hover .c28 {
-  box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.35);
-  border-color: #3061B3;
-  background-color: #3061B3;
-}
-
-.c24.c24.c24:active .c28 {
-  box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.5);
-  border-color: #275093;
-  background-color: #275093;
-}
-
-.c32 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  cursor: pointer;
-  padding: 0.8rem 0;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-  -webkit-flex-direction: row-reverse;
-  -ms-flex-direction: row-reverse;
-  flex-direction: row-reverse;
-}
-
-.c32 * {
-  cursor: pointer;
-}
-
-.c32.c32.c32:hover .c28 {
-  box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.35);
-  border-color: #3872D2;
-}
-
-.c32.c32.c32:active .c28 {
-  box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.5);
-  border-color: #3061B3;
-}
-
-.c64 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  cursor: pointer;
-  padding: 0.8rem 0;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c64 * {
-  cursor: pointer;
-}
-
-.c64.c64.c64:hover .c28 {
-  box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.35);
-  border-color: #3061B3;
-  background-color: #3061B3;
-}
-
-.c64.c64.c64:active .c28 {
-  box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.5);
-  border-color: #275093;
-  background-color: #275093;
-}
-
 .c50 {
   font-size: 1.2rem;
   line-height: 1.6rem;
@@ -955,42 +698,299 @@ exports[`Form should render properly with initial state 1`] = `
   content: ' *';
 }
 
-.c51 {
-  position: relative;
+.c51 {
+  position: relative;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  min-width: auto;
+  margin: 0.8rem 0.8rem 0.8rem 0;
+}
+
+.c51 .c2 {
+  margin: 0;
+  caret-color: transparent;
+}
+
+.c51 .c2 label {
+  pointer-events: none;
+}
+
+.c51 .c2 div,
+.c51 .c2 input,
+.c51 .c2 label {
+  cursor: pointer;
+}
+
+.c51 .c2 .c52 {
+  -webkit-transition: -webkit-transform 200ms ease-out;
+  -webkit-transition: transform 200ms ease-out;
+  transition: transform 200ms ease-out;
+  -webkit-transform: rotate(0deg);
+  -ms-transform: rotate(0deg);
+  transform: rotate(0deg);
+}
+
+.c51 .c2:not(:focus-within):hover .c52 * {
+  fill: #13181D;
+}
+
+.c20 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+}
+
+.c20 >:first-child {
+  margin-bottom: 0.9rem;
+}
+
+.c33 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+}
+
+.c33 >:first-child {
+  margin-bottom: 0.9rem;
+}
+
+.c22 {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  cursor: inherit;
+  color: inherit;
+}
+
+.c22::after {
+  content: ' *';
+  color: default:inherit;
+  disabled: #98A7B7;
+}
+
+.c25 {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  cursor: inherit;
+  color: inherit;
+  padding: 0 1.6rem;
+}
+
+.c23 {
+  display: grid;
+  grid-template-columns: repeat(1,1fr);
+}
+
+.c29 {
+  border: 0.15rem solid;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border-radius: 22.2%;
+  -webkit-transition: all 100ms ease-out;
+  transition: all 100ms ease-out;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c29 .c30 {
+  pointer-events: none;
+  z-index: 1;
+  -webkit-transition: all 200ms ease-in-out;
+  transition: all 200ms ease-in-out;
+  -webkit-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+  width: 100%;
+  height: 100%;
+  margin-right: 0.05rem;
+}
+
+.c27 {
+  opacity: 0;
+  margin: 0;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  outline: none;
+  position: absolute;
+}
+
+.c27:checked ~ .c28 {
+  border-color: #3872D2;
+  background-color: #3872D2;
+}
+
+.c27:checked ~ .c28 .c30 {
+  -webkit-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+}
+
+.c27:checked ~ .c28 .c30 * {
+  fill: #ffffff;
+}
+
+.c27:not(:checked) ~ .c28 {
+  background-color: transparent;
+  border-color: #13181D;
+}
+
+.c27:not(:disabled):focus ~ .c28 {
+  box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.35);
+  border-color: #3872D2;
+}
+
+.c27:not(:disabled):focus:not(:checked) ~ .c28 {
+  border-color: #3872D2;
+}
+
+.c26 {
+  margin: 0.3rem;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  width: 1.8rem;
+  height: 1.8rem;
+  position: relative;
+}
+
+.c24 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  cursor: pointer;
+  padding: 0.8rem 0;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  -webkit-flex-direction: row-reverse;
+  -ms-flex-direction: row-reverse;
+  flex-direction: row-reverse;
+}
+
+.c24 * {
+  cursor: pointer;
+}
+
+.c24.c24.c24:hover .c28 {
+  box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.35);
+  border-color: #3061B3;
+  background-color: #3061B3;
+}
+
+.c24.c24.c24:active .c28 {
+  box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.5);
+  border-color: #275093;
+  background-color: #275093;
+}
+
+.c32 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  cursor: pointer;
+  padding: 0.8rem 0;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  -webkit-flex-direction: row-reverse;
+  -ms-flex-direction: row-reverse;
+  flex-direction: row-reverse;
+}
+
+.c32 * {
+  cursor: pointer;
+}
+
+.c32.c32.c32:hover .c28 {
+  box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.35);
+  border-color: #3872D2;
+}
+
+.c32.c32.c32:active .c28 {
+  box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.5);
+  border-color: #3061B3;
+}
+
+.c64 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-width: auto;
-  margin: 0.8rem 0.8rem 0.8rem 0;
-}
-
-.c51 .c2 {
-  margin: 0;
-  caret-color: transparent;
-}
-
-.c51 .c2 label {
-  pointer-events: none;
+  cursor: pointer;
+  padding: 0.8rem 0;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
 }
 
-.c51 .c2 div,
-.c51 .c2 input,
-.c51 .c2 label {
+.c64 * {
   cursor: pointer;
 }
 
-.c51 .c2 .c52 {
-  -webkit-transition: -webkit-transform 200ms ease-out;
-  -webkit-transition: transform 200ms ease-out;
-  transition: transform 200ms ease-out;
-  -webkit-transform: rotate(0deg);
-  -ms-transform: rotate(0deg);
-  transform: rotate(0deg);
+.c64.c64.c64:hover .c28 {
+  box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.35);
+  border-color: #3061B3;
+  background-color: #3061B3;
 }
 
-.c51 .c2:not(:focus-within):hover .c52 * {
-  fill: #13181D;
+.c64.c64.c64:active .c28 {
+  box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.5);
+  border-color: #275093;
+  background-color: #275093;
 }
 
 .c45 {
@@ -2684,244 +2684,25 @@ exports[`Form should render properly without initial state 1`] = `
 }
 
 .c65:not(:disabled):active .c32 * {
-  fill: #ffffff;
-}
-
-.c65:not(:disabled):not(:active):hover {
-  color: #ffffff;
-  background: #3061B3;
-  box-shadow: 0 0.2rem 0.8rem rgba(48,97,179,0.35);
-}
-
-.c65:not(:disabled):not(:active):hover .c32 * {
-  fill: #ffffff;
-}
-
-.c65 .c32 + .c1 {
-  margin-left: 0.8rem;
-}
-
-.c65 .c1 + .c32 {
-  margin-left: 0.8rem;
-}
-
-.c22 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-}
-
-.c22 >:first-child {
-  margin-bottom: 0.9rem;
-}
-
-.c34 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-}
-
-.c34 >:first-child {
-  margin-bottom: 0.9rem;
-}
-
-.c24 {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  cursor: inherit;
-  color: inherit;
-}
-
-.c24::after {
-  content: ' *';
-  color: default:inherit;
-  disabled: #98A7B7;
-}
-
-.c27 {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  cursor: inherit;
-  color: inherit;
-  padding: 0 1.6rem;
-}
-
-.c25 {
-  display: grid;
-  grid-template-columns: repeat(1,1fr);
-}
-
-.c31 {
-  border: 0.15rem solid;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  border-radius: 22.2%;
-  -webkit-transition: all 100ms ease-out;
-  transition: all 100ms ease-out;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c31 .c32 {
-  pointer-events: none;
-  z-index: 1;
-  -webkit-transition: all 200ms ease-in-out;
-  transition: all 200ms ease-in-out;
-  -webkit-transform: scale(0);
-  -ms-transform: scale(0);
-  transform: scale(0);
-  width: 100%;
-  height: 100%;
-  margin-right: 0.05rem;
-}
-
-.c29 {
-  opacity: 0;
-  margin: 0;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  outline: none;
-  position: absolute;
-}
-
-.c29:checked ~ .c30 {
-  border-color: #3872D2;
-  background-color: #3872D2;
-}
-
-.c29:checked ~ .c30 .c32 {
-  -webkit-transform: scale(1);
-  -ms-transform: scale(1);
-  transform: scale(1);
-}
-
-.c29:checked ~ .c30 .c32 * {
-  fill: #ffffff;
-}
-
-.c29:not(:checked) ~ .c30 {
-  background-color: transparent;
-  border-color: #13181D;
-}
-
-.c29:not(:disabled):focus ~ .c30 {
-  box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.35);
-  border-color: #3872D2;
-}
-
-.c29:not(:disabled):focus:not(:checked) ~ .c30 {
-  border-color: #3872D2;
-}
-
-.c28 {
-  margin: 0.3rem;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  width: 1.8rem;
-  height: 1.8rem;
-  position: relative;
-}
-
-.c26 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  cursor: pointer;
-  padding: 0.8rem 0;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-  -webkit-flex-direction: row-reverse;
-  -ms-flex-direction: row-reverse;
-  flex-direction: row-reverse;
-}
-
-.c26 * {
-  cursor: pointer;
-}
-
-.c26.c26.c26:hover .c30 {
-  box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.35);
-  border-color: #3872D2;
-}
-
-.c26.c26.c26:active .c30 {
-  box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.5);
-  border-color: #3061B3;
+  fill: #ffffff;
 }
 
-.c63 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  cursor: pointer;
-  padding: 0.8rem 0;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
+.c65:not(:disabled):not(:active):hover {
+  color: #ffffff;
+  background: #3061B3;
+  box-shadow: 0 0.2rem 0.8rem rgba(48,97,179,0.35);
 }
 
-.c63 * {
-  cursor: pointer;
+.c65:not(:disabled):not(:active):hover .c32 * {
+  fill: #ffffff;
 }
 
-.c63.c63.c63:hover .c30 {
-  box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.35);
-  border-color: #3872D2;
+.c65 .c32 + .c1 {
+  margin-left: 0.8rem;
 }
 
-.c63.c63.c63:active .c30 {
-  box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.5);
-  border-color: #3061B3;
+.c65 .c1 + .c32 {
+  margin-left: 0.8rem;
 }
 
 .c50 {
@@ -3313,6 +3094,225 @@ exports[`Form should render properly without initial state 1`] = `
   fill: #13181D;
 }
 
+.c22 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+}
+
+.c22 >:first-child {
+  margin-bottom: 0.9rem;
+}
+
+.c34 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+}
+
+.c34 >:first-child {
+  margin-bottom: 0.9rem;
+}
+
+.c24 {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  cursor: inherit;
+  color: inherit;
+}
+
+.c24::after {
+  content: ' *';
+  color: default:inherit;
+  disabled: #98A7B7;
+}
+
+.c27 {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  cursor: inherit;
+  color: inherit;
+  padding: 0 1.6rem;
+}
+
+.c25 {
+  display: grid;
+  grid-template-columns: repeat(1,1fr);
+}
+
+.c31 {
+  border: 0.15rem solid;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border-radius: 22.2%;
+  -webkit-transition: all 100ms ease-out;
+  transition: all 100ms ease-out;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c31 .c32 {
+  pointer-events: none;
+  z-index: 1;
+  -webkit-transition: all 200ms ease-in-out;
+  transition: all 200ms ease-in-out;
+  -webkit-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+  width: 100%;
+  height: 100%;
+  margin-right: 0.05rem;
+}
+
+.c29 {
+  opacity: 0;
+  margin: 0;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  outline: none;
+  position: absolute;
+}
+
+.c29:checked ~ .c30 {
+  border-color: #3872D2;
+  background-color: #3872D2;
+}
+
+.c29:checked ~ .c30 .c32 {
+  -webkit-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+}
+
+.c29:checked ~ .c30 .c32 * {
+  fill: #ffffff;
+}
+
+.c29:not(:checked) ~ .c30 {
+  background-color: transparent;
+  border-color: #13181D;
+}
+
+.c29:not(:disabled):focus ~ .c30 {
+  box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.35);
+  border-color: #3872D2;
+}
+
+.c29:not(:disabled):focus:not(:checked) ~ .c30 {
+  border-color: #3872D2;
+}
+
+.c28 {
+  margin: 0.3rem;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  width: 1.8rem;
+  height: 1.8rem;
+  position: relative;
+}
+
+.c26 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  cursor: pointer;
+  padding: 0.8rem 0;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  -webkit-flex-direction: row-reverse;
+  -ms-flex-direction: row-reverse;
+  flex-direction: row-reverse;
+}
+
+.c26 * {
+  cursor: pointer;
+}
+
+.c26.c26.c26:hover .c30 {
+  box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.35);
+  border-color: #3872D2;
+}
+
+.c26.c26.c26:active .c30 {
+  box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.5);
+  border-color: #3061B3;
+}
+
+.c63 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  cursor: pointer;
+  padding: 0.8rem 0;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c63 * {
+  cursor: pointer;
+}
+
+.c63.c63.c63:hover .c30 {
+  box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.35);
+  border-color: #3872D2;
+}
+
+.c63.c63.c63:active .c30 {
+  box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.5);
+  border-color: #3061B3;
+}
+
 .c45 {
   cursor: pointer;
   border-radius: 50%;