@pzh-ui/css 0.0.13 → 0.0.16

package/src/tailwind.css

@@ -1,3 +1,5 @@
+@import '~react-datepicker/dist/react-datepicker.css';
+
 /*
 ! tailwindcss v3.0.23 | MIT License | https://tailwindcss.com
 */
@@ -423,7 +425,7 @@ Ensure the default browser behavior of the `hidden` attribute.
   display: none;
 }
 
-[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
+[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select{
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
@@ -440,7 +442,7 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-shadow: 0 0 #0000;
 }
 
-[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
+[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus{
   outline: 2px solid transparent;
   outline-offset: 2px;
   --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
@@ -453,35 +455,35 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-color: #3182ce;
 }
 
-input::-moz-placeholder, textarea::-moz-placeholder {
+input::-moz-placeholder, textarea::-moz-placeholder{
   color: #a0aec0;
   opacity: 1;
 }
 
-input:-ms-input-placeholder, textarea:-ms-input-placeholder {
+input:-ms-input-placeholder, textarea:-ms-input-placeholder{
   color: #a0aec0;
   opacity: 1;
 }
 
-input::placeholder,textarea::placeholder {
+input::placeholder,textarea::placeholder{
   color: #a0aec0;
   opacity: 1;
 }
 
-::-webkit-datetime-edit-fields-wrapper {
+::-webkit-datetime-edit-fields-wrapper{
   padding: 0;
 }
 
-::-webkit-date-and-time-value {
+::-webkit-date-and-time-value{
   min-height: 1.5em;
 }
 
-::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
+::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{
   padding-top: 0;
   padding-bottom: 0;
 }
 
-select {
+select{
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23a0aec0' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
   background-position: right 0.5rem center;
   background-repeat: no-repeat;
@@ -491,7 +493,7 @@ select {
           color-adjust: exact;
 }
 
-[multiple] {
+[multiple]{
   background-image: initial;
   background-position: initial;
   background-repeat: unset;
@@ -501,7 +503,7 @@ select {
           color-adjust: unset;
 }
 
-[type='checkbox'],[type='radio'] {
+[type='checkbox'],[type='radio']{
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
@@ -525,15 +527,15 @@ select {
   --tw-shadow: 0 0 #0000;
 }
 
-[type='checkbox'] {
+[type='checkbox']{
   border-radius: 0px;
 }
 
-[type='radio'] {
+[type='radio']{
   border-radius: 100%;
 }
 
-[type='checkbox']:focus,[type='radio']:focus {
+[type='checkbox']:focus,[type='radio']:focus{
   outline: 2px solid transparent;
   outline-offset: 2px;
   --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
@@ -545,7 +547,7 @@ select {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
 
-[type='checkbox']:checked,[type='radio']:checked {
+[type='checkbox']:checked,[type='radio']:checked{
   border-color: transparent;
   background-color: currentColor;
   background-size: 100% 100%;
@@ -553,20 +555,20 @@ select {
   background-repeat: no-repeat;
 }
 
-[type='checkbox']:checked {
+[type='checkbox']:checked{
   background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
 }
 
-[type='radio']:checked {
+[type='radio']:checked{
   background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
 }
 
-[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
+[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus{
   border-color: transparent;
   background-color: currentColor;
 }
 
-[type='checkbox']:indeterminate {
+[type='checkbox']:indeterminate{
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
   border-color: transparent;
   background-color: currentColor;
@@ -575,12 +577,12 @@ select {
   background-repeat: no-repeat;
 }
 
-[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
+[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus{
   border-color: transparent;
   background-color: currentColor;
 }
 
-[type='file'] {
+[type='file']{
   background: unset;
   border-color: inherit;
   border-width: 0;
@@ -590,11 +592,11 @@ select {
   line-height: inherit;
 }
 
-[type='file']:focus {
+[type='file']:focus{
   outline: 1px auto -webkit-focus-ring-color;
 }
 
-*, ::before, ::after {
+*, ::before, ::after{
   --tw-translate-x: 0;
   --tw-translate-y: 0;
   --tw-rotate: 0;
@@ -639,41 +641,41 @@ select {
   --tw-backdrop-sepia:  ;
 }
 
-.container {
+.container{
   width: 100%;
 }
 
-@media (min-width: 640px) {
-  .container {
+@media (min-width: 640px){
+  .container{
     max-width: 640px;
   }
 }
 
-@media (min-width: 768px) {
-  .container {
+@media (min-width: 768px){
+  .container{
     max-width: 768px;
   }
 }
 
-@media (min-width: 1024px) {
-  .container {
+@media (min-width: 1024px){
+  .container{
     max-width: 1024px;
   }
 }
 
-@media (min-width: 1280px) {
-  .container {
+@media (min-width: 1280px){
+  .container{
     max-width: 1280px;
   }
 }
 
-@media (min-width: 1440px) {
-  .container {
+@media (min-width: 1440px){
+  .container{
     max-width: 1440px;
   }
 }
 
-.sr-only {
+.sr-only{
   position: absolute;
   width: 1px;
   height: 1px;
@@ -685,473 +687,589 @@ select {
   border-width: 0;
 }
 
-.pointer-events-none {
+.pointer-events-none{
   pointer-events: none;
 }
 
-.pointer-events-auto {
+.pointer-events-auto{
   pointer-events: auto;
 }
 
-.fixed {
+.fixed{
   position: fixed;
 }
 
-.absolute {
+.absolute{
   position: absolute;
 }
 
-.relative {
+.relative{
   position: relative;
 }
 
-.inset-0 {
+.inset-0{
   top: 0px;
   right: 0px;
   bottom: 0px;
   left: 0px;
 }
 
-.inset-y-0 {
+.inset-y-0{
   top: 0px;
   bottom: 0px;
 }
 
-.right-0 {
+.right-0{
   right: 0px;
 }
 
-.bottom-0 {
+.bottom-0{
   bottom: 0px;
 }
 
-.left-0 {
+.left-0{
   left: 0px;
 }
 
-.top-0 {
+.top-0{
   top: 0px;
 }
 
-.z-10 {
+.-left-\[9999px\]{
+  left: -9999px;
+}
+
+.right-\[14px\]{
+  right: 14px;
+}
+
+.top-\[14px\]{
+  top: 14px;
+}
+
+.z-10{
   z-index: 10;
 }
 
-.z-50 {
+.z-50{
   z-index: 50;
 }
 
-.m-0 {
+.m-0{
   margin: 0px;
 }
 
-.mx-auto {
+.mx-auto{
   margin-left: auto;
   margin-right: auto;
 }
 
-.mr-2 {
+.mr-2{
   margin-right: 0.5rem;
 }
 
-.ml-2 {
+.ml-2{
   margin-left: 0.5rem;
 }
 
-.ml-4 {
+.-mt-\[2px\]{
+  margin-top: -2px;
+}
+
+.-mt-0\.5{
+  margin-top: -0.125rem;
+}
+
+.-mt-0{
+  margin-top: -0px;
+}
+
+.mr-\[8px\]{
+  margin-right: 8px;
+}
+
+.ml-4{
   margin-left: 1rem;
 }
 
-.-mt-8 {
+.-mt-8{
   margin-top: -2rem;
 }
 
-.-mr-8 {
+.-mr-8{
   margin-right: -2rem;
 }
 
-.ml-3 {
+.ml-3{
   margin-left: 0.75rem;
 }
 
-.block {
+.mb-2{
+  margin-bottom: 0.5rem;
+}
+
+.ml-1{
+  margin-left: 0.25rem;
+}
+
+.mb-6{
+  margin-bottom: 1.5rem;
+}
+
+.mb-4{
+  margin-bottom: 1rem;
+}
+
+.mt-2{
+  margin-top: 0.5rem;
+}
+
+.block{
   display: block;
 }
 
-.inline-block {
+.inline-block{
   display: inline-block;
 }
 
-.flex {
+.flex{
   display: flex;
 }
 
-.contents {
+.contents{
   display: contents;
 }
 
-.hidden {
+.hidden{
   display: none;
 }
 
-.h-6 {
+.h-6{
   height: 1.5rem;
 }
 
-.h-4 {
+.h-\[48px\]{
+  height: 48px;
+}
+
+.h-\[36px\]{
+  height: 36px;
+}
+
+.h-4{
   height: 1rem;
 }
 
-.min-h-screen {
+.min-h-screen{
   min-height: 100vh;
 }
 
-.w-6 {
+.min-h-\[48px\]{
+  min-height: 48px;
+}
+
+.w-6{
   width: 1.5rem;
 }
 
-.w-full {
+.w-full{
   width: 100%;
 }
 
-.w-4 {
+.w-4{
   width: 1rem;
 }
 
-.max-w-screen-xl {
+.max-w-screen-xl{
   max-width: 1280px;
 }
 
-.max-w-6xl {
+.max-w-6xl{
   max-width: 72rem;
 }
 
-.translate-y-2 {
+.translate-y-2{
   --tw-translate-y: 0.5rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.translate-y-4 {
+.translate-y-4{
   --tw-translate-y: 1rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.translate-y-0 {
+.translate-y-0{
   --tw-translate-y: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.transform {
+.transform{
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.cursor-pointer {
+.cursor-pointer{
   cursor: pointer;
 }
 
-.cursor-not-allowed {
-  cursor: not-allowed;
-}
-
-.items-start {
+.items-start{
   align-items: flex-start;
 }
 
-.items-center {
+.items-center{
   align-items: center;
 }
 
-.justify-center {
+.justify-center{
   justify-content: center;
 }
 
-.overflow-hidden {
+.justify-between{
+  justify-content: space-between;
+}
+
+.overflow-hidden{
   overflow: hidden;
 }
 
-.overflow-y-auto {
+.overflow-y-auto{
   overflow-y: auto;
 }
 
-.break-words {
+.break-words{
   overflow-wrap: break-word;
 }
 
-.rounded {
+.rounded{
   border-radius: 0.25rem;
 }
 
-.rounded-lg {
+.rounded-lg{
   border-radius: 0.5rem;
 }
 
-.rounded-md {
+.rounded-md{
   border-radius: 0.375rem;
 }
 
-.rounded-t-md {
+.rounded-\[4px\]{
+  border-radius: 4px;
+}
+
+.rounded-t-md{
   border-top-left-radius: 0.375rem;
   border-top-right-radius: 0.375rem;
 }
 
-.border {
+.border{
   border-width: 1px;
 }
 
-.border-pzh-blue-dark {
+.border-dashed{
+  border-style: dashed;
+}
+
+.border-pzh-blue-dark{
   --tw-border-opacity: 1;
   border-color: rgb(22 17 59 / var(--tw-border-opacity));
 }
 
-.border-opacity-35 {
+.border-opacity-35{
   --tw-border-opacity: 0.35;
 }
 
-.bg-pzh-blue {
+.border-opacity-10{
+  --tw-border-opacity: 0.1;
+}
+
+.bg-pzh-blue{
   --tw-bg-opacity: 1;
   background-color: rgb(40 31 107 / var(--tw-bg-opacity));
 }
 
-.bg-pzh-red {
+.bg-pzh-red{
   --tw-bg-opacity: 1;
   background-color: rgb(209 31 61 / var(--tw-bg-opacity));
 }
 
-.bg-pzh-yellow {
+.bg-pzh-yellow{
   --tw-bg-opacity: 1;
   background-color: rgb(239 204 54 / var(--tw-bg-opacity));
 }
 
-.bg-pzh-green {
+.bg-pzh-green{
   --tw-bg-opacity: 1;
   background-color: rgb(0 128 77 / var(--tw-bg-opacity));
 }
 
-.bg-pzh-gray {
-  --tw-bg-opacity: 1;
-  background-color: rgb(235 235 235 / var(--tw-bg-opacity));
-}
-
-.bg-pzh-cool-gray-dark {
+.bg-pzh-cool-gray-dark{
   --tw-bg-opacity: 1;
   background-color: rgb(92 92 92 / var(--tw-bg-opacity));
 }
 
-.bg-white {
+.bg-white{
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.bg-pzh-blue-light {
+.bg-pzh-blue-light{
   --tw-bg-opacity: 1;
   background-color: rgb(123 173 222 / var(--tw-bg-opacity));
 }
 
-.bg-opacity-50 {
+.bg-pzh-gray{
+  --tw-bg-opacity: 1;
+  background-color: rgb(235 235 235 / var(--tw-bg-opacity));
+}
+
+.bg-opacity-50{
   --tw-bg-opacity: 0.5;
 }
 
-.bg-opacity-20 {
+.bg-opacity-20{
   --tw-bg-opacity: 0.2;
 }
 
-.p-1 {
+.p-1{
   padding: 0.25rem;
 }
 
-.p-6 {
+.p-6{
   padding: 1.5rem;
 }
 
-.p-2 {
+.p-2{
   padding: 0.5rem;
 }
 
-.px-3 {
+.px-3{
   padding-left: 0.75rem;
   padding-right: 0.75rem;
 }
 
-.py-2 {
+.py-2{
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
 
-.px-4 {
+.px-4{
   padding-left: 1rem;
   padding-right: 1rem;
 }
 
-.px-\[12px\] {
+.px-\[12px\]{
   padding-left: 12px;
   padding-right: 12px;
 }
 
-.px-6 {
+.px-6{
   padding-left: 1.5rem;
   padding-right: 1.5rem;
 }
 
-.py-1 {
+.py-1{
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
 
-.pr-16 {
+.py-6{
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
+.pr-16{
   padding-right: 4rem;
 }
 
-.pt-1 {
+.pt-1{
   padding-top: 0.25rem;
 }
 
-.pr-1 {
+.pr-1{
   padding-right: 0.25rem;
 }
 
-.pt-\[16px\] {
-  padding-top: 16px;
+.pt-\[15px\]{
+  padding-top: 15px;
 }
 
-.pb-\[12px\] {
+.pb-\[12px\]{
   padding-bottom: 12px;
 }
 
-.pb-\[9px\] {
+.pb-\[9px\]{
   padding-bottom: 9px;
 }
 
-.pt-\[12px\] {
+.pt-\[12px\]{
   padding-top: 12px;
 }
 
-.pt-0 {
+.pt-0{
   padding-top: 0px;
 }
 
-.pt-2 {
+.pt-2{
   padding-top: 0.5rem;
 }
 
-.pb-3 {
+.pb-3{
   padding-bottom: 0.75rem;
 }
 
-.pt-4 {
+.pt-4{
   padding-top: 1rem;
 }
 
-.pb-4 {
+.pb-4{
   padding-bottom: 1rem;
 }
 
-.pt-8 {
+.pt-8{
   padding-top: 2rem;
 }
 
-.pr-8 {
+.pr-8{
   padding-right: 2rem;
 }
 
-.pb-0 {
+.pb-0{
   padding-bottom: 0px;
 }
 
-.pb-1\.5 {
+.pb-1\.5{
   padding-bottom: 0.375rem;
 }
 
-.pb-1 {
+.pb-1{
   padding-bottom: 0.25rem;
 }
 
-.pt-\[15px\] {
-  padding-top: 15px;
+.pl-\[34px\]{
+  padding-left: 34px;
 }
 
-.pb-\[11px\] {
-  padding-bottom: 11px;
-}
-
-.text-left {
+.text-left{
   text-align: left;
 }
 
-.text-center {
+.text-center{
   text-align: center;
 }
 
-.align-bottom {
+.align-bottom{
   vertical-align: bottom;
 }
 
-.text-sm {
+.text-sm{
   font-size: 0.875rem;
 }
 
-.text-xs {
+.text-xs{
   font-size: 0.75rem;
 }
 
-.text-base {
+.text-base{
   font-size: 1rem;
 }
 
-.leading-normal {
+.text-\[0\.8rem\]{
+  font-size: 0.8rem;
+}
+
+.text-\[16px\]{
+  font-size: 16px;
+}
+
+.italic{
+  font-style: italic;
+}
+
+.leading-normal{
   line-height: 1.5;
 }
 
-.leading-none {
+.leading-\[28px\]{
+  line-height: 28px;
+}
+
+.leading-5{
+  line-height: 1.25rem;
+}
+
+.leading-none{
   line-height: 1;
 }
 
-.text-white {
+.text-white{
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.text-pzh-blue {
+.text-pzh-blue{
   --tw-text-opacity: 1;
   color: rgb(40 31 107 / var(--tw-text-opacity));
 }
 
-.text-pzh-blue-dark {
+.text-pzh-blue-dark{
   --tw-text-opacity: 1;
   color: rgb(22 17 59 / var(--tw-text-opacity));
 }
 
-.text-opacity-35 {
+.text-pzh-red{
+  --tw-text-opacity: 1;
+  color: rgb(209 31 61 / var(--tw-text-opacity));
+}
+
+.text-pzh-green{
+  --tw-text-opacity: 1;
+  color: rgb(0 128 77 / var(--tw-text-opacity));
+}
+
+.text-opacity-35{
   --tw-text-opacity: 0.35;
 }
 
-.text-opacity-55 {
+.text-opacity-55{
   --tw-text-opacity: 0.55;
 }
 
-.opacity-0 {
+.text-opacity-50{
+  --tw-text-opacity: 0.5;
+}
+
+.underline{
+  -webkit-text-decoration-line: underline;
+          text-decoration-line: underline;
+}
+
+.opacity-0{
   opacity: 0;
 }
 
-.opacity-100 {
+.opacity-100{
   opacity: 1;
 }
 
-.shadow-xl {
+.opacity-50{
+  opacity: 0.5;
+}
+
+.shadow-xl{
   --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.drop-shadow {
+.drop-shadow{
   --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
-.filter {
+.filter{
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
-.transition {
+.transition{
   transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
@@ -1159,39 +1277,39 @@ select {
   transition-duration: 150ms;
 }
 
-.transition-opacity {
+.transition-opacity{
   transition-property: opacity;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
 
-.transition-all {
+.transition-all{
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
 
-.duration-150 {
+.duration-150{
   transition-duration: 150ms;
 }
 
-.duration-200 {
+.duration-200{
   transition-duration: 200ms;
 }
 
-.duration-300 {
+.duration-300{
   transition-duration: 300ms;
 }
 
-.ease-in-out {
+.ease-in-out{
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.ease-out {
+.ease-out{
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 
-.ease-in {
+.ease-in{
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 
@@ -1246,7 +1364,11 @@ h6,
   font-weight: 700;
 }
 
-.pzh-button {
+/*
+ * Form elements
+ */
+
+.pzh-button{
   display: inline-block;
   border-radius: 0.25rem;
   line-height: 1;
@@ -1260,7 +1382,7 @@ h6,
   font-weight: 700;
 }
 
-.pzh-button:focus {
+.pzh-button:focus{
   outline: 2px solid transparent;
   outline-offset: 2px;
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -1268,7 +1390,7 @@ h6,
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.pzh-button:disabled {
+.pzh-button:disabled{
   cursor: not-allowed;
   --tw-bg-opacity: 1;
   background-color: rgb(235 235 235 / var(--tw-bg-opacity));
@@ -1276,7 +1398,7 @@ h6,
   --tw-text-opacity: 0.35;
 }
 
-.pzh-form-input {
+.pzh-form-input{
   display: block;
   width: 100%;
   -webkit-appearance: none;
@@ -1286,232 +1408,439 @@ h6,
   border-width: 1px;
   border-color: rgb(22 17 59 / var(--tw-border-opacity));
   --tw-border-opacity: 0.35;
+  padding-top: 15px;
+  padding-bottom: 11px;
   line-height: 1;
   --tw-text-opacity: 1;
   color: rgb(22 17 59 / var(--tw-text-opacity));
 }
 
-.pzh-form-input::-moz-placeholder {
+.pzh-form-input::-moz-placeholder{
   color: rgb(22 17 59 / var(--tw-placeholder-opacity));
   --tw-placeholder-opacity: 0.55;
 }
 
-.pzh-form-input:-ms-input-placeholder {
+.pzh-form-input:-ms-input-placeholder{
   color: rgb(22 17 59 / var(--tw-placeholder-opacity));
   --tw-placeholder-opacity: 0.55;
 }
 
-.pzh-form-input::placeholder {
+.pzh-form-input::placeholder{
   color: rgb(22 17 59 / var(--tw-placeholder-opacity));
   --tw-placeholder-opacity: 0.55;
 }
 
-.pzh-form-input:hover {
+.pzh-form-input:hover{
   --tw-border-opacity: 1;
   border-color: rgb(160 174 192 / var(--tw-border-opacity));
 }
 
-.pzh-form-input:focus {
+.pzh-form-input:focus{
   --tw-border-opacity: 1;
-  border-color: rgb(160 174 192 / var(--tw-border-opacity));
+  border-color: rgb(123 173 222 / var(--tw-border-opacity));
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
 
-.pzh-form-input:disabled {
+.pzh-form-input:disabled{
+  border-color: rgb(22 17 59 / var(--tw-border-opacity));
+  --tw-border-opacity: 0.1;
   --tw-bg-opacity: 1;
   background-color: rgb(235 235 235 / var(--tw-bg-opacity));
   --tw-text-opacity: 0.55;
 }
 
-.hover\:translate-y-0:hover {
+.pzh-form-radio:checked + label:before, .pzh-form-radio:not(:checked) + label:before{
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  height: 24px;
+  width: 24px;
+  border-radius: 9999px;
+  border-width: 1px;
+  border-color: rgb(22 17 59 / var(--tw-border-opacity));
+  --tw-border-opacity: 0.35;
+  --tw-bg-opacity: 1;
+  background-color: rgb(244 244 247 / var(--tw-bg-opacity));
+  content: '';
+}
+
+.pzh-form-radio:checked + label:after, .pzh-form-radio:not(:checked) + label:after{
+  position: absolute;
+  top: 0.25rem;
+  left: 0.25rem;
+  height: 14px;
+  width: 14px;
+  border-radius: 9999px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 128 77 / var(--tw-bg-opacity));
+  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+  content: '';
+}
+
+.pzh-form-radio:not(:checked) + label:after,
+.pzh-form-checkbox:not(:checked) + label:after {
+  opacity: 0;
+  transform: scale(0);
+}
+
+.pzh-form-radio:checked + label:after,
+.pzh-form-checkbox:checked + label:after {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.pzh-form-radio:disabled + label:before, .pzh-form-checkbox:disabled + label:before{
+  --tw-border-opacity: 1;
+  border-color: rgb(235 235 235 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(235 235 235 / var(--tw-bg-opacity));
+}
+
+.pzh-form-checkbox + label:before{
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  height: 24px;
+  width: 24px;
+  border-radius: 4px;
+  border-width: 1px;
+  border-color: rgb(22 17 59 / var(--tw-border-opacity));
+  --tw-border-opacity: 0.35;
+  --tw-bg-opacity: 1;
+  background-color: rgb(244 244 247 / var(--tw-bg-opacity));
+  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+  content: '';
+}
+
+.pzh-form-checkbox:checked:not(:disabled) + label:before{
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 128 77 / var(--tw-bg-opacity));
+}
+
+.pzh-form-checkbox:checked + label:after, .pzh-form-checkbox:not(:checked) + label:after{
+  position: absolute;
+  top: 2px;
+  left: 0.25rem;
+  height: 14px;
+  width: 14px;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+  content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='white' d='M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z'/></svg>");
+}
+
+.pzh-form-checkbox:checked:disabled + label:after {
+  content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='rgba(22, 17, 59, 0.35)' d='M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z'/></svg>");
+}
+
+/*
+ * React Datepicker
+ */
+
+.react-datepicker {
+  font-family: 'Karbon Regular', sans-serif;
+  font-weight: 400;
+  font-size: 0.8rem;
+  box-shadow: 0px 18px 60px rgba(0, 0, 0, 0.07),
+        0px 4.02054px 13.4018px rgba(0, 0, 0, 0.0417275),
+        0px 1.19702px 3.99006px rgba(0, 0, 0, 0.0282725);
+  border-style: none;
+  --tw-text-opacity: 1;
+  color: rgb(22 17 59 / var(--tw-text-opacity));
+}
+
+.react-datepicker__triangle {
+  display: none;
+}
+
+.react-datepicker__header{
+  border-style: none;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.react-datepicker__month{
+  margin-left: 0.125rem;
+  margin-right: 0.125rem;
+  margin-top: 0px;
+}
+
+.react-datepicker__day-names{
+  background-color: rgb(22 17 59 / var(--tw-bg-opacity));
+  --tw-bg-opacity: 0.1;
+}
+
+.react-datepicker__day-name{
+  margin-top: 0px;
+  margin-bottom: 0px;
+  line-height: 26px;
+  font-weight: 700;
+}
+
+.react-datepicker__current-month{
+  margin-bottom: 0.5rem;
+}
+
+.react-datepicker__day--outside-month:not(.react-datepicker__day--selected){
+  color: rgb(22 17 59 / var(--tw-text-opacity));
+  --tw-text-opacity: 0.35;
+}
+
+.react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name{
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+  height: 26px;
+  width: 26px;
+  line-height: 28px;
+}
+
+.react-datepicker__day{
+  border-radius: 9999px;
+}
+
+.react-datepicker__day:hover{
+  border-radius: 9999px;
+}
+
+.react-datepicker__day--today, .react-datepicker__day--today:hover, .react-datepicker__day--keyboard-selected{
+  background-color: rgb(22 17 59 / var(--tw-bg-opacity));
+  --tw-bg-opacity: 0.1;
+  --tw-text-opacity: 1;
+  color: rgb(22 17 59 / var(--tw-text-opacity));
+}
+
+.react-datepicker__day--selected, .react-datepicker__day--selected:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 128 77 / var(--tw-bg-opacity));
+  font-weight: 700;
+}
+
+.react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view--down-arrow, .react-datepicker__navigation-icon::before{
+  height: 7px;
+  width: 7px;
+  border-width: 0px;
+  border-top-width: 1px;
+  border-right-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
+
+.react-datepicker__navigation-icon{
+  line-height: 14px;
+}
+
+.hover\:translate-y-0:hover{
   --tw-translate-y: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.hover\:border-opacity-100:hover {
+.hover\:border-pzh-blue-dark:hover{
   --tw-border-opacity: 1;
+  border-color: rgb(22 17 59 / var(--tw-border-opacity));
+}
+
+.hover\:border-opacity-100:hover{
+  --tw-border-opacity: 1;
+}
+
+.hover\:border-opacity-35:hover{
+  --tw-border-opacity: 0.35;
 }
 
-.hover\:bg-white:hover {
+.hover\:bg-white:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-pzh-blue-dark:hover {
+.hover\:bg-pzh-blue-dark:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(22 17 59 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-pzh-green-dark:hover {
+.hover\:bg-pzh-green-dark:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(0 77 46 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-opacity-10:hover {
+.hover\:bg-opacity-10:hover{
   --tw-bg-opacity: 0.1;
 }
 
-.hover\:text-pzh-blue:hover {
+.hover\:text-pzh-blue:hover{
   --tw-text-opacity: 1;
   color: rgb(40 31 107 / var(--tw-text-opacity));
 }
 
-.hover\:text-white:hover {
+.hover\:text-white:hover{
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.hover\:text-pzh-green:hover {
+.hover\:text-pzh-green:hover{
   --tw-text-opacity: 1;
   color: rgb(0 128 77 / var(--tw-text-opacity));
 }
 
-.hover\:underline:hover {
+.hover\:underline:hover{
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
 }
 
-.focus\:bg-pzh-blue:focus {
+.focus\:bg-pzh-blue:focus{
   --tw-bg-opacity: 1;
   background-color: rgb(40 31 107 / var(--tw-bg-opacity));
 }
 
-.focus\:text-white:focus {
+.focus\:text-white:focus{
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.focus\:outline-none:focus {
+.focus\:outline-none:focus{
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
 
-.focus\:ring-2:focus {
+.focus\:ring-2:focus{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.focus\:ring-indigo-500:focus {
+.focus\:ring-indigo-500:focus{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(102 126 234 / var(--tw-ring-opacity));
 }
 
-.focus\:ring-offset-2:focus {
+.focus\:ring-offset-2:focus{
   --tw-ring-offset-width: 2px;
 }
 
-@media (min-width: 640px) {
-  .sm\:my-8 {
+@media (min-width: 640px){
+  .sm\:my-8{
     margin-top: 2rem;
     margin-bottom: 2rem;
   }
 
-  .sm\:mt-8 {
+  .sm\:mt-8{
     margin-top: 2rem;
   }
 
-  .sm\:-mt-2 {
+  .sm\:-mt-2{
     margin-top: -0.5rem;
   }
 
-  .sm\:-mr-2 {
+  .sm\:-mr-2{
     margin-right: -0.5rem;
   }
 
-  .sm\:block {
+  .sm\:block{
     display: block;
   }
 
-  .sm\:inline-block {
+  .sm\:inline-block{
     display: inline-block;
   }
 
-  .sm\:h-screen {
+  .sm\:h-screen{
     height: 100vh;
   }
 
-  .sm\:w-full {
+  .sm\:w-full{
     width: 100%;
   }
 
-  .sm\:translate-y-0 {
+  .sm\:translate-y-0{
     --tw-translate-y: 0px;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
 
-  .sm\:scale-95 {
+  .sm\:scale-95{
     --tw-scale-x: .95;
     --tw-scale-y: .95;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
 
-  .sm\:scale-100 {
+  .sm\:scale-100{
     --tw-scale-x: 1;
     --tw-scale-y: 1;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
 
-  .sm\:items-start {
+  .sm\:items-start{
     align-items: flex-start;
   }
 
-  .sm\:p-8 {
+  .sm\:p-8{
     padding: 2rem;
   }
 
-  .sm\:p-2 {
+  .sm\:p-2{
     padding: 0.5rem;
   }
 
-  .sm\:px-6 {
+  .sm\:px-6{
     padding-left: 1.5rem;
     padding-right: 1.5rem;
   }
 
-  .sm\:py-10 {
+  .sm\:py-10{
     padding-top: 2.5rem;
     padding-bottom: 2.5rem;
   }
 
-  .sm\:pt-1 {
+  .sm\:pt-1{
     padding-top: 0.25rem;
   }
 
-  .sm\:pr-2 {
+  .sm\:pr-2{
     padding-right: 0.5rem;
   }
 
-  .sm\:text-center {
+  .sm\:text-center{
     text-align: center;
   }
 
-  .sm\:align-middle {
+  .sm\:align-middle{
     vertical-align: middle;
   }
 }
 
-@media (min-width: 768px) {
-  .md\:ml-4 {
+@media (min-width: 768px){
+  .md\:ml-4{
     margin-left: 1rem;
   }
 
-  .md\:p-4 {
+  .md\:p-4{
     padding: 1rem;
   }
 
-  .md\:pb-4 {
+  .md\:pb-4{
     padding-bottom: 1rem;
   }
 
-  .md\:text-base {
+  .md\:text-base{
     font-size: 1rem;
   }
 }
 
-@media (min-width: 1024px) {
-  .lg\:px-8 {
+@media (min-width: 1024px){
+  .lg\:px-8{
     padding-left: 2rem;
     padding-right: 2rem;
   }