@font-face {
  font-family: "sofia-pro";
  src: url("https://use.typekit.net/af/30420e/00000000000000003b9b1a9e/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"), url("https://use.typekit.net/af/30420e/00000000000000003b9b1a9e/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"), url("https://use.typekit.net/af/30420e/00000000000000003b9b1a9e/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: "sofia-pro";
  src: url("https://use.typekit.net/af/5855b2/00000000000000003b9b1a98/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"), url("https://use.typekit.net/af/5855b2/00000000000000003b9b1a98/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"), url("https://use.typekit.net/af/5855b2/00000000000000003b9b1a98/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}
/*
.tk-sofia-pro {
  font-family: "sofia-pro", sans-serif;
}
*/
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.3;
}
@media (min-width: 1024px) {
  html {
    font-size: 16px;
  }
}

body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  box-sizing: border-box;
  font-family: sofia-pro, sans-serif;
  color: #303030;
  background-color: #edeff0;
  -webkit-overflow-scrolling: touch;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body h2 {
  text-align: center;
}
body h2 + p {
  margin: -10px 20px 10px 20px;
  text-align: center;
}
body p + p {
  margin-top: -5px;
}
body label + input,
body label + select {
  margin-top: 5px;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

::-webkit-scrollbar {
  width: 8px; /* Width of the vertical scrollbar */
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2); /* Color and transparency of the scrollbar thumb */
  border-radius: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border: none;
}

h1,
h2,
h3,
h4 {
  margin: 0;
}

input,
textarea,
select {
  -moz-appearance: none;
  -webkit-appearance: none;
  padding: 0.4em 0.5em 0.6em 0.5em;
  width: 100%;
  max-width: 100%;
  font-size: 1.125rem;
  line-height: 1.3;
  font-family: sofia-pro, sans-serif;
  border: 1px solid #b7b7b7;
  border-radius: 4px;
  background-color: #F3F5F6;
}

select {
  background-image: url("img/icon_chevron_down-light-gray.svg");
  background-repeat: no-repeat;
  background-position: calc(100% - 5px) 50%;
}

input::placeholder,
textarea::placeholder {
  color: #b7b7b7;
}

input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  margin: 2px 10px 0 0;
  width: 15px;
  height: 15px;
  opacity: 0.5;
  background-image: url("img/icon_cross-white.svg");
  background-size: cover;
}

input[type=checkbox] {
  width: auto;
}

label {
  color: #767676;
}

label > input,
label > select {
  margin-top: 5px;
  margin-bottom: 5px;
}

label + input,
label + select {
  margin-top: 5px;
}

input + label {
  margin-top: 5px;
}

a {
  cursor: pointer;
  color: #6027DA;
  text-decoration: none;
}

a.linkless {
  color: #303030;
  text-decoration: none;
}

.nohref {
  pointer-events: none;
}

.btn,
button {
  position: relative;
  display: inline-flex;
  padding: 0.65em 1.2em 0.9em 1.2em;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #6027DA;
  font-size: 1.125rem;
  line-height: 1;
  font-weight: 700;
  font-family: sofia-pro, sans-serif;
  color: white;
  border: none;
  border-radius: 4px;
  outline: none;
  text-decoration: none;
  cursor: pointer;
}

button:disabled,
.btn:disabled {
  background: #b7b7b7;
  border-color: #b7b7b7;
}

button img,
.btn img {
  margin-bottom: -2px;
}

.btn--secondary {
  font-weight: 400;
  background: none;
  color: #6027DA;
  border: 1px solid #6027DA;
}

.btn--secondary:disabled {
  border: 1px solid #767676;
  background: none;
  color: #767676;
}

.btn--secondary:hover {
  background-color: #edebff;
}

.btn--secondary-white {
  font-weight: 400;
  border: 1px solid white;
  background: none;
  color: white;
}

.btn--link {
  font-weight: 400;
  padding: 0;
  border: none;
  background: none;
  color: #6027DA;
}

button.btn--link:hover,
.btn.btn--link:hover,
button.btn--icon:hover,
.btn.btn--icon:hover,
button.button-white:hover,
.btn.button-white:hover,
button.btn--secondary-white,
.btn.btn--secondary-white,
button.button--close:hover {
  background-color: transparent;
}

.btn--icon {
  font-weight: 400;
  padding: 10px;
  background: none;
  border: none;
}

.button--close {
  position: absolute;
  top: 5px;
  right: 5px;
}

.button--white {
  position: absolute;
  bottom: 5px;
  right: 5px;
  padding: 2px 10px 5px 10px;
  font-size: 13px;
  color: #6027DA;
  background-color: white;
  border: none;
  border-radius: 15px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15), 0px 20px 36px rgba(0, 0, 0, 0.1);
}

.btn--h35px {
  min-height: 35px;
  height: 35px;
  padding: 5px 12px 8px 12px;
  font-size: 15px;
  font-weight: 400;
}

.btn--circle {
  padding: 0.65em;
  border-radius: 100px;
}

.btn--circle-40px {
  width: 40px;
  min-height: 40px;
  height: 40px;
  padding: 10px;
  border-radius: 100px;
}

.button__fixed-bottom {
  z-index: 10;
  position: fixed;
  bottom: 10px;
  right: 10px;
  padding: 0.8em 1.5em 1em 1.5em;
  border-radius: 50px;
  font-weight: 700;
}

.button__fixed-bottom img {
  margin-bottom: -2px;
  margin-right: 5px;
  height: 15px;
}

.button--delete {
  padding: 5px 5px 7px 5px;
  font-size: 13px;
  color: white;
  background: #da7474;
  border: none;
}

.button--delete img {
  margin-bottom: -4px;
  margin-right: 5px;
}

.checkbox {
  position: relative;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  background-color: white;
  border-radius: 4px;
  border: 1px solid #767676;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.checkbox--selected .checkbox:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  background-color: #00c473;
  border-radius: 2px;
}

.toggle {
  position: relative;
  height: 36px;
  width: 65px;
  background-color: #b7b7b7;
  border-radius: 50px;
}

.toggle:after {
  content: " ";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 2px;
  width: 32px;
  height: 32px;
  border-radius: 50px;
  background-color: #fff;
}

.toggle.toggle--active {
  background-color: #00c473;
}

.toggle.toggle--active:after {
  left: inherit;
  right: 2px;
}

.radio-button {
  margin-right: 10px;
  width: 24px;
  height: 24px;
  background-color: white;
  border: 1px solid #b7b7b7;
  border-radius: 50px;
}

.opt--selected .radio-button {
  position: relative;
  border-color: #538763;
}
.opt--selected .radio-button:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  background-color: #538763;
  border-radius: 50px;
}

.h3 {
  font-size: 20px;
  font-weight: bold;
}

table {
  width: 100%;
  border-collapse: collapse;
}
table tr, table th {
  padding: 2px 0;
}
table th {
  font-weight: 400;
}

hr {
  display: block;
  width: 100%;
  margin: 0.5rem 0;
  color: #dbdbdb;
  border-style: solid;
  border-width: 0;
  border-top-width: 1px;
}

hr.hr-10px-dark-white {
  color: #F3F5F6;
  border-top-width: 10px;
}

.box-content {
  box-sizing: content-box;
}

.required > label {
  color: #da7474;
}

.required input,
.required > textarea {
  border: 1px solid #da7474;
}

section,
.section {
  flex: 0 0 auto;
  width: 100%;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.shadow {
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);
}

.shadow-big {
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

.top--45px {
  top: -45px;
}

.top--5px {
  top: -5px;
}

.top-0px {
  top: 0px;
}

.top-5px {
  top: 5px;
}

.top-10px {
  top: 10px;
}

.top-170px {
  top: 170px;
}

.top-210px {
  top: 210px;
}

.top-center {
  top: 50%;
  transform: translateY(-50%);
}

.bottom--20px {
  bottom: -20px;
}

.bottom-0px {
  bottom: 0px;
}

.bottom-5px {
  bottom: 5px;
}

.bottom-10px {
  bottom: 10px;
}

.bottom-20px {
  bottom: 20px;
}

.bottom-80px {
  bottom: 80px;
}

.bottom-100px {
  bottom: 100px;
}

.bottom-05rem {
  bottom: 0.5rem;
}

.bottom-80px-safe {
  bottom: calc(env(safe-area-inset-bottom) + 80px);
}

.left--5pxpx {
  left: -5px;
}

.left-0 {
  left: 0px;
}

.left-5px {
  left: 5px;
}

.left-10px {
  left: 10px;
}

.left-50px {
  left: 50px;
}

.left-full {
  left: 100%;
}

.left-full-120px {
  left: calc(100% - 120px);
}

.left-center, .left-c {
  left: 50%;
  transform: translateX(-50%);
}

.right-0px {
  right: 0px;
}

.right-5px {
  right: 5px;
}

.right-8px {
  right: 8px;
}

.right-10px {
  right: 10px;
}

.right-05rem {
  right: 0.5rem;
}

.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.absolute-x-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.absolute-y-center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.z-2 {
  z-index: 2;
}

.z-20 {
  z-index: 20;
}

.z-200 {
  z-index: 200;
}

.z-210 {
  z-index: 210;
}

.z-220 {
  z-index: 220;
}

.m-0 {
  margin: 0;
}

.my-0 {
  margin-top: 0;
  margin-bottom: 0;
}

.mx-0 {
  margin-right: 0;
  margin-left: 0;
}

.mt-0 {
  margin-top: 0;
}

.mb-0 {
  margin-bottom: 0;
}

.ml-0 {
  margin-left: 0;
}

.mr-0 {
  margin-right: 0;
}

.p-0 {
  padding: 0;
}

.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.px-0 {
  padding-right: 0;
  padding-left: 0;
}

.pt-0 {
  padding-top: 0;
}

.pb-0 {
  padding-bottom: 0;
}

.pl-0 {
  padding-left: 0;
}

.pr-0 {
  padding-right: 0;
}

.top-0 {
  top: 0;
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  left: 0;
}

.right-0 {
  right: 0;
}

.m-0px {
  margin: 0px;
}

.my-0px {
  margin-top: 0px;
  margin-bottom: 0px;
}

.mx-0px {
  margin-right: 0px;
  margin-left: 0px;
}

.mt-0px {
  margin-top: 0px;
}

.mb-0px {
  margin-bottom: 0px;
}

.ml-0px {
  margin-left: 0px;
}

.mr-0px {
  margin-right: 0px;
}

.p-0px {
  padding: 0px;
}

.py-0px {
  padding-top: 0px;
  padding-bottom: 0px;
}

.px-0px {
  padding-right: 0px;
  padding-left: 0px;
}

.pt-0px {
  padding-top: 0px;
}

.pb-0px {
  padding-bottom: 0px;
}

.pl-0px {
  padding-left: 0px;
}

.pr-0px {
  padding-right: 0px;
}

.top-0px {
  top: 0px;
}

.bottom-0px {
  bottom: 0px;
}

.left-0px {
  left: 0px;
}

.right-0px {
  right: 0px;
}

.m-2px {
  margin: 2px;
}

.my-2px {
  margin-top: 2px;
  margin-bottom: 2px;
}

.mx-2px {
  margin-right: 2px;
  margin-left: 2px;
}

.mt-2px {
  margin-top: 2px;
}

.mb-2px {
  margin-bottom: 2px;
}

.ml-2px {
  margin-left: 2px;
}

.mr-2px {
  margin-right: 2px;
}

.p-2px {
  padding: 2px;
}

.py-2px {
  padding-top: 2px;
  padding-bottom: 2px;
}

.px-2px {
  padding-right: 2px;
  padding-left: 2px;
}

.pt-2px {
  padding-top: 2px;
}

.pb-2px {
  padding-bottom: 2px;
}

.pl-2px {
  padding-left: 2px;
}

.pr-2px {
  padding-right: 2px;
}

.top-2px {
  top: 2px;
}

.bottom-2px {
  bottom: 2px;
}

.left-2px {
  left: 2px;
}

.right-2px {
  right: 2px;
}

.m-5px {
  margin: 5px;
}

.my-5px {
  margin-top: 5px;
  margin-bottom: 5px;
}

.mx-5px {
  margin-right: 5px;
  margin-left: 5px;
}

.mt-5px {
  margin-top: 5px;
}

.mb-5px {
  margin-bottom: 5px;
}

.ml-5px {
  margin-left: 5px;
}

.mr-5px {
  margin-right: 5px;
}

.p-5px {
  padding: 5px;
}

.py-5px {
  padding-top: 5px;
  padding-bottom: 5px;
}

.px-5px {
  padding-right: 5px;
  padding-left: 5px;
}

.pt-5px {
  padding-top: 5px;
}

.pb-5px {
  padding-bottom: 5px;
}

.pl-5px {
  padding-left: 5px;
}

.pr-5px {
  padding-right: 5px;
}

.top-5px {
  top: 5px;
}

.bottom-5px {
  bottom: 5px;
}

.left-5px {
  left: 5px;
}

.right-5px {
  right: 5px;
}

.m-10px {
  margin: 10px;
}

.my-10px {
  margin-top: 10px;
  margin-bottom: 10px;
}

.mx-10px {
  margin-right: 10px;
  margin-left: 10px;
}

.mt-10px {
  margin-top: 10px;
}

.mb-10px {
  margin-bottom: 10px;
}

.ml-10px {
  margin-left: 10px;
}

.mr-10px {
  margin-right: 10px;
}

.p-10px {
  padding: 10px;
}

.py-10px {
  padding-top: 10px;
  padding-bottom: 10px;
}

.px-10px {
  padding-right: 10px;
  padding-left: 10px;
}

.pt-10px {
  padding-top: 10px;
}

.pb-10px {
  padding-bottom: 10px;
}

.pl-10px {
  padding-left: 10px;
}

.pr-10px {
  padding-right: 10px;
}

.top-10px {
  top: 10px;
}

.bottom-10px {
  bottom: 10px;
}

.left-10px {
  left: 10px;
}

.right-10px {
  right: 10px;
}

.m-11px {
  margin: 11px;
}

.my-11px {
  margin-top: 11px;
  margin-bottom: 11px;
}

.mx-11px {
  margin-right: 11px;
  margin-left: 11px;
}

.mt-11px {
  margin-top: 11px;
}

.mb-11px {
  margin-bottom: 11px;
}

.ml-11px {
  margin-left: 11px;
}

.mr-11px {
  margin-right: 11px;
}

.p-11px {
  padding: 11px;
}

.py-11px {
  padding-top: 11px;
  padding-bottom: 11px;
}

.px-11px {
  padding-right: 11px;
  padding-left: 11px;
}

.pt-11px {
  padding-top: 11px;
}

.pb-11px {
  padding-bottom: 11px;
}

.pl-11px {
  padding-left: 11px;
}

.pr-11px {
  padding-right: 11px;
}

.top-11px {
  top: 11px;
}

.bottom-11px {
  bottom: 11px;
}

.left-11px {
  left: 11px;
}

.right-11px {
  right: 11px;
}

.m-13px {
  margin: 13px;
}

.my-13px {
  margin-top: 13px;
  margin-bottom: 13px;
}

.mx-13px {
  margin-right: 13px;
  margin-left: 13px;
}

.mt-13px {
  margin-top: 13px;
}

.mb-13px {
  margin-bottom: 13px;
}

.ml-13px {
  margin-left: 13px;
}

.mr-13px {
  margin-right: 13px;
}

.p-13px {
  padding: 13px;
}

.py-13px {
  padding-top: 13px;
  padding-bottom: 13px;
}

.px-13px {
  padding-right: 13px;
  padding-left: 13px;
}

.pt-13px {
  padding-top: 13px;
}

.pb-13px {
  padding-bottom: 13px;
}

.pl-13px {
  padding-left: 13px;
}

.pr-13px {
  padding-right: 13px;
}

.top-13px {
  top: 13px;
}

.bottom-13px {
  bottom: 13px;
}

.left-13px {
  left: 13px;
}

.right-13px {
  right: 13px;
}

.m-15px {
  margin: 15px;
}

.my-15px {
  margin-top: 15px;
  margin-bottom: 15px;
}

.mx-15px {
  margin-right: 15px;
  margin-left: 15px;
}

.mt-15px {
  margin-top: 15px;
}

.mb-15px {
  margin-bottom: 15px;
}

.ml-15px {
  margin-left: 15px;
}

.mr-15px {
  margin-right: 15px;
}

.p-15px {
  padding: 15px;
}

.py-15px {
  padding-top: 15px;
  padding-bottom: 15px;
}

.px-15px {
  padding-right: 15px;
  padding-left: 15px;
}

.pt-15px {
  padding-top: 15px;
}

.pb-15px {
  padding-bottom: 15px;
}

.pl-15px {
  padding-left: 15px;
}

.pr-15px {
  padding-right: 15px;
}

.top-15px {
  top: 15px;
}

.bottom-15px {
  bottom: 15px;
}

.left-15px {
  left: 15px;
}

.right-15px {
  right: 15px;
}

.m-20px {
  margin: 20px;
}

.my-20px {
  margin-top: 20px;
  margin-bottom: 20px;
}

.mx-20px {
  margin-right: 20px;
  margin-left: 20px;
}

.mt-20px {
  margin-top: 20px;
}

.mb-20px {
  margin-bottom: 20px;
}

.ml-20px {
  margin-left: 20px;
}

.mr-20px {
  margin-right: 20px;
}

.p-20px {
  padding: 20px;
}

.py-20px {
  padding-top: 20px;
  padding-bottom: 20px;
}

.px-20px {
  padding-right: 20px;
  padding-left: 20px;
}

.pt-20px {
  padding-top: 20px;
}

.pb-20px {
  padding-bottom: 20px;
}

.pl-20px {
  padding-left: 20px;
}

.pr-20px {
  padding-right: 20px;
}

.top-20px {
  top: 20px;
}

.bottom-20px {
  bottom: 20px;
}

.left-20px {
  left: 20px;
}

.right-20px {
  right: 20px;
}

.m-25px {
  margin: 25px;
}

.my-25px {
  margin-top: 25px;
  margin-bottom: 25px;
}

.mx-25px {
  margin-right: 25px;
  margin-left: 25px;
}

.mt-25px {
  margin-top: 25px;
}

.mb-25px {
  margin-bottom: 25px;
}

.ml-25px {
  margin-left: 25px;
}

.mr-25px {
  margin-right: 25px;
}

.p-25px {
  padding: 25px;
}

.py-25px {
  padding-top: 25px;
  padding-bottom: 25px;
}

.px-25px {
  padding-right: 25px;
  padding-left: 25px;
}

.pt-25px {
  padding-top: 25px;
}

.pb-25px {
  padding-bottom: 25px;
}

.pl-25px {
  padding-left: 25px;
}

.pr-25px {
  padding-right: 25px;
}

.top-25px {
  top: 25px;
}

.bottom-25px {
  bottom: 25px;
}

.left-25px {
  left: 25px;
}

.right-25px {
  right: 25px;
}

.m-30px {
  margin: 30px;
}

.my-30px {
  margin-top: 30px;
  margin-bottom: 30px;
}

.mx-30px {
  margin-right: 30px;
  margin-left: 30px;
}

.mt-30px {
  margin-top: 30px;
}

.mb-30px {
  margin-bottom: 30px;
}

.ml-30px {
  margin-left: 30px;
}

.mr-30px {
  margin-right: 30px;
}

.p-30px {
  padding: 30px;
}

.py-30px {
  padding-top: 30px;
  padding-bottom: 30px;
}

.px-30px {
  padding-right: 30px;
  padding-left: 30px;
}

.pt-30px {
  padding-top: 30px;
}

.pb-30px {
  padding-bottom: 30px;
}

.pl-30px {
  padding-left: 30px;
}

.pr-30px {
  padding-right: 30px;
}

.top-30px {
  top: 30px;
}

.bottom-30px {
  bottom: 30px;
}

.left-30px {
  left: 30px;
}

.right-30px {
  right: 30px;
}

.m-40px {
  margin: 40px;
}

.my-40px {
  margin-top: 40px;
  margin-bottom: 40px;
}

.mx-40px {
  margin-right: 40px;
  margin-left: 40px;
}

.mt-40px {
  margin-top: 40px;
}

.mb-40px {
  margin-bottom: 40px;
}

.ml-40px {
  margin-left: 40px;
}

.mr-40px {
  margin-right: 40px;
}

.p-40px {
  padding: 40px;
}

.py-40px {
  padding-top: 40px;
  padding-bottom: 40px;
}

.px-40px {
  padding-right: 40px;
  padding-left: 40px;
}

.pt-40px {
  padding-top: 40px;
}

.pb-40px {
  padding-bottom: 40px;
}

.pl-40px {
  padding-left: 40px;
}

.pr-40px {
  padding-right: 40px;
}

.top-40px {
  top: 40px;
}

.bottom-40px {
  bottom: 40px;
}

.left-40px {
  left: 40px;
}

.right-40px {
  right: 40px;
}

.m-50px {
  margin: 50px;
}

.my-50px {
  margin-top: 50px;
  margin-bottom: 50px;
}

.mx-50px {
  margin-right: 50px;
  margin-left: 50px;
}

.mt-50px {
  margin-top: 50px;
}

.mb-50px {
  margin-bottom: 50px;
}

.ml-50px {
  margin-left: 50px;
}

.mr-50px {
  margin-right: 50px;
}

.p-50px {
  padding: 50px;
}

.py-50px {
  padding-top: 50px;
  padding-bottom: 50px;
}

.px-50px {
  padding-right: 50px;
  padding-left: 50px;
}

.pt-50px {
  padding-top: 50px;
}

.pb-50px {
  padding-bottom: 50px;
}

.pl-50px {
  padding-left: 50px;
}

.pr-50px {
  padding-right: 50px;
}

.top-50px {
  top: 50px;
}

.bottom-50px {
  bottom: 50px;
}

.left-50px {
  left: 50px;
}

.right-50px {
  right: 50px;
}

.m-65px {
  margin: 65px;
}

.my-65px {
  margin-top: 65px;
  margin-bottom: 65px;
}

.mx-65px {
  margin-right: 65px;
  margin-left: 65px;
}

.mt-65px {
  margin-top: 65px;
}

.mb-65px {
  margin-bottom: 65px;
}

.ml-65px {
  margin-left: 65px;
}

.mr-65px {
  margin-right: 65px;
}

.p-65px {
  padding: 65px;
}

.py-65px {
  padding-top: 65px;
  padding-bottom: 65px;
}

.px-65px {
  padding-right: 65px;
  padding-left: 65px;
}

.pt-65px {
  padding-top: 65px;
}

.pb-65px {
  padding-bottom: 65px;
}

.pl-65px {
  padding-left: 65px;
}

.pr-65px {
  padding-right: 65px;
}

.top-65px {
  top: 65px;
}

.bottom-65px {
  bottom: 65px;
}

.left-65px {
  left: 65px;
}

.right-65px {
  right: 65px;
}

.m-80px {
  margin: 80px;
}

.my-80px {
  margin-top: 80px;
  margin-bottom: 80px;
}

.mx-80px {
  margin-right: 80px;
  margin-left: 80px;
}

.mt-80px {
  margin-top: 80px;
}

.mb-80px {
  margin-bottom: 80px;
}

.ml-80px {
  margin-left: 80px;
}

.mr-80px {
  margin-right: 80px;
}

.p-80px {
  padding: 80px;
}

.py-80px {
  padding-top: 80px;
  padding-bottom: 80px;
}

.px-80px {
  padding-right: 80px;
  padding-left: 80px;
}

.pt-80px {
  padding-top: 80px;
}

.pb-80px {
  padding-bottom: 80px;
}

.pl-80px {
  padding-left: 80px;
}

.pr-80px {
  padding-right: 80px;
}

.top-80px {
  top: 80px;
}

.bottom-80px {
  bottom: 80px;
}

.left-80px {
  left: 80px;
}

.right-80px {
  right: 80px;
}

.m-100px {
  margin: 100px;
}

.my-100px {
  margin-top: 100px;
  margin-bottom: 100px;
}

.mx-100px {
  margin-right: 100px;
  margin-left: 100px;
}

.mt-100px {
  margin-top: 100px;
}

.mb-100px {
  margin-bottom: 100px;
}

.ml-100px {
  margin-left: 100px;
}

.mr-100px {
  margin-right: 100px;
}

.p-100px {
  padding: 100px;
}

.py-100px {
  padding-top: 100px;
  padding-bottom: 100px;
}

.px-100px {
  padding-right: 100px;
  padding-left: 100px;
}

.pt-100px {
  padding-top: 100px;
}

.pb-100px {
  padding-bottom: 100px;
}

.pl-100px {
  padding-left: 100px;
}

.pr-100px {
  padding-right: 100px;
}

.top-100px {
  top: 100px;
}

.bottom-100px {
  bottom: 100px;
}

.left-100px {
  left: 100px;
}

.right-100px {
  right: 100px;
}

.m-150px {
  margin: 150px;
}

.my-150px {
  margin-top: 150px;
  margin-bottom: 150px;
}

.mx-150px {
  margin-right: 150px;
  margin-left: 150px;
}

.mt-150px {
  margin-top: 150px;
}

.mb-150px {
  margin-bottom: 150px;
}

.ml-150px {
  margin-left: 150px;
}

.mr-150px {
  margin-right: 150px;
}

.p-150px {
  padding: 150px;
}

.py-150px {
  padding-top: 150px;
  padding-bottom: 150px;
}

.px-150px {
  padding-right: 150px;
  padding-left: 150px;
}

.pt-150px {
  padding-top: 150px;
}

.pb-150px {
  padding-bottom: 150px;
}

.pl-150px {
  padding-left: 150px;
}

.pr-150px {
  padding-right: 150px;
}

.top-150px {
  top: 150px;
}

.bottom-150px {
  bottom: 150px;
}

.left-150px {
  left: 150px;
}

.right-150px {
  right: 150px;
}

.m--2px {
  margin: -2px;
}

.my--2px {
  margin-top: -2px;
  margin-bottom: -2px;
}

.mx--2px {
  margin-right: -2px;
  margin-left: -2px;
}

.mt--2px {
  margin-top: -2px;
}

.mb--2px {
  margin-bottom: -2px;
}

.ml--2px {
  margin-left: -2px;
}

.mr--2px {
  margin-right: -2px;
}

.p--2px {
  padding: -2px;
}

.py--2px {
  padding-top: -2px;
  padding-bottom: -2px;
}

.px--2px {
  padding-right: -2px;
  padding-left: -2px;
}

.pt--2px {
  padding-top: -2px;
}

.pb--2px {
  padding-bottom: -2px;
}

.pl--2px {
  padding-left: -2px;
}

.pr--2px {
  padding-right: -2px;
}

.top--2px {
  top: -2px;
}

.bottom--2px {
  bottom: -2px;
}

.left--2px {
  left: -2px;
}

.right--2px {
  right: -2px;
}

.m--5px {
  margin: -5px;
}

.my--5px {
  margin-top: -5px;
  margin-bottom: -5px;
}

.mx--5px {
  margin-right: -5px;
  margin-left: -5px;
}

.mt--5px {
  margin-top: -5px;
}

.mb--5px {
  margin-bottom: -5px;
}

.ml--5px {
  margin-left: -5px;
}

.mr--5px {
  margin-right: -5px;
}

.p--5px {
  padding: -5px;
}

.py--5px {
  padding-top: -5px;
  padding-bottom: -5px;
}

.px--5px {
  padding-right: -5px;
  padding-left: -5px;
}

.pt--5px {
  padding-top: -5px;
}

.pb--5px {
  padding-bottom: -5px;
}

.pl--5px {
  padding-left: -5px;
}

.pr--5px {
  padding-right: -5px;
}

.top--5px {
  top: -5px;
}

.bottom--5px {
  bottom: -5px;
}

.left--5px {
  left: -5px;
}

.right--5px {
  right: -5px;
}

.m--10px {
  margin: -10px;
}

.my--10px {
  margin-top: -10px;
  margin-bottom: -10px;
}

.mx--10px {
  margin-right: -10px;
  margin-left: -10px;
}

.mt--10px {
  margin-top: -10px;
}

.mb--10px {
  margin-bottom: -10px;
}

.ml--10px {
  margin-left: -10px;
}

.mr--10px {
  margin-right: -10px;
}

.p--10px {
  padding: -10px;
}

.py--10px {
  padding-top: -10px;
  padding-bottom: -10px;
}

.px--10px {
  padding-right: -10px;
  padding-left: -10px;
}

.pt--10px {
  padding-top: -10px;
}

.pb--10px {
  padding-bottom: -10px;
}

.pl--10px {
  padding-left: -10px;
}

.pr--10px {
  padding-right: -10px;
}

.top--10px {
  top: -10px;
}

.bottom--10px {
  bottom: -10px;
}

.left--10px {
  left: -10px;
}

.right--10px {
  right: -10px;
}

.m--15px {
  margin: -15px;
}

.my--15px {
  margin-top: -15px;
  margin-bottom: -15px;
}

.mx--15px {
  margin-right: -15px;
  margin-left: -15px;
}

.mt--15px {
  margin-top: -15px;
}

.mb--15px {
  margin-bottom: -15px;
}

.ml--15px {
  margin-left: -15px;
}

.mr--15px {
  margin-right: -15px;
}

.p--15px {
  padding: -15px;
}

.py--15px {
  padding-top: -15px;
  padding-bottom: -15px;
}

.px--15px {
  padding-right: -15px;
  padding-left: -15px;
}

.pt--15px {
  padding-top: -15px;
}

.pb--15px {
  padding-bottom: -15px;
}

.pl--15px {
  padding-left: -15px;
}

.pr--15px {
  padding-right: -15px;
}

.top--15px {
  top: -15px;
}

.bottom--15px {
  bottom: -15px;
}

.left--15px {
  left: -15px;
}

.right--15px {
  right: -15px;
}

.m--20px {
  margin: -20px;
}

.my--20px {
  margin-top: -20px;
  margin-bottom: -20px;
}

.mx--20px {
  margin-right: -20px;
  margin-left: -20px;
}

.mt--20px {
  margin-top: -20px;
}

.mb--20px {
  margin-bottom: -20px;
}

.ml--20px {
  margin-left: -20px;
}

.mr--20px {
  margin-right: -20px;
}

.p--20px {
  padding: -20px;
}

.py--20px {
  padding-top: -20px;
  padding-bottom: -20px;
}

.px--20px {
  padding-right: -20px;
  padding-left: -20px;
}

.pt--20px {
  padding-top: -20px;
}

.pb--20px {
  padding-bottom: -20px;
}

.pl--20px {
  padding-left: -20px;
}

.pr--20px {
  padding-right: -20px;
}

.top--20px {
  top: -20px;
}

.bottom--20px {
  bottom: -20px;
}

.left--20px {
  left: -20px;
}

.right--20px {
  right: -20px;
}

.m--25px {
  margin: -25px;
}

.my--25px {
  margin-top: -25px;
  margin-bottom: -25px;
}

.mx--25px {
  margin-right: -25px;
  margin-left: -25px;
}

.mt--25px {
  margin-top: -25px;
}

.mb--25px {
  margin-bottom: -25px;
}

.ml--25px {
  margin-left: -25px;
}

.mr--25px {
  margin-right: -25px;
}

.p--25px {
  padding: -25px;
}

.py--25px {
  padding-top: -25px;
  padding-bottom: -25px;
}

.px--25px {
  padding-right: -25px;
  padding-left: -25px;
}

.pt--25px {
  padding-top: -25px;
}

.pb--25px {
  padding-bottom: -25px;
}

.pl--25px {
  padding-left: -25px;
}

.pr--25px {
  padding-right: -25px;
}

.top--25px {
  top: -25px;
}

.bottom--25px {
  bottom: -25px;
}

.left--25px {
  left: -25px;
}

.right--25px {
  right: -25px;
}

.m--40px {
  margin: -40px;
}

.my--40px {
  margin-top: -40px;
  margin-bottom: -40px;
}

.mx--40px {
  margin-right: -40px;
  margin-left: -40px;
}

.mt--40px {
  margin-top: -40px;
}

.mb--40px {
  margin-bottom: -40px;
}

.ml--40px {
  margin-left: -40px;
}

.mr--40px {
  margin-right: -40px;
}

.p--40px {
  padding: -40px;
}

.py--40px {
  padding-top: -40px;
  padding-bottom: -40px;
}

.px--40px {
  padding-right: -40px;
  padding-left: -40px;
}

.pt--40px {
  padding-top: -40px;
}

.pb--40px {
  padding-bottom: -40px;
}

.pl--40px {
  padding-left: -40px;
}

.pr--40px {
  padding-right: -40px;
}

.top--40px {
  top: -40px;
}

.bottom--40px {
  bottom: -40px;
}

.left--40px {
  left: -40px;
}

.right--40px {
  right: -40px;
}

.m--50px {
  margin: -50px;
}

.my--50px {
  margin-top: -50px;
  margin-bottom: -50px;
}

.mx--50px {
  margin-right: -50px;
  margin-left: -50px;
}

.mt--50px {
  margin-top: -50px;
}

.mb--50px {
  margin-bottom: -50px;
}

.ml--50px {
  margin-left: -50px;
}

.mr--50px {
  margin-right: -50px;
}

.p--50px {
  padding: -50px;
}

.py--50px {
  padding-top: -50px;
  padding-bottom: -50px;
}

.px--50px {
  padding-right: -50px;
  padding-left: -50px;
}

.pt--50px {
  padding-top: -50px;
}

.pb--50px {
  padding-bottom: -50px;
}

.pl--50px {
  padding-left: -50px;
}

.pr--50px {
  padding-right: -50px;
}

.top--50px {
  top: -50px;
}

.bottom--50px {
  bottom: -50px;
}

.left--50px {
  left: -50px;
}

.right--50px {
  right: -50px;
}

.mb-safe {
  margin-bottom: env(safe-area-inset-bottom);
}

.p-1rem {
  padding: 1rem;
}

.pb-full {
  padding-bottom: 100%;
}

.pb-safe {
  padding-bottom: env(safe-area-inset-bottom);
}

.bg-green {
  background-color: #00c473;
}

.b-green {
  border-color: #00c473;
}

.bg-green-d {
  background-color: #538763;
}

.b-green-d {
  border-color: #538763;
}

.bg-purple {
  background-color: #6027DA;
}

.b-purple {
  border-color: #6027DA;
}

.bg-purple-ll {
  background-color: #edebff;
}

.b-purple-ll {
  border-color: #edebff;
}

.bg-transparent {
  background-color: transparent;
}

.b-transparent {
  border-color: transparent;
}

.t-white {
  color: #fff;
}

.t-black {
  color: #303030;
}

.t-gray {
  color: #767676;
}

.t-gray-l, .t-light-gray {
  color: #b7b7b7;
}

.t-lightest-gray {
  color: #dbdbdb;
}

.t-green {
  color: #00c473;
}

.t-dark-green, .t-green-d {
  color: #538763;
}

.t-red {
  color: #da7474;
}

.t-purple {
  color: #6027DA;
}

.leading-tight {
  line-height: 1;
}

.leading-1-2 {
  line-height: 1.2;
}

.leading-normal {
  line-height: 1.35;
}

.leading-relaxed {
  line-height: 1.5;
}

.bg-none {
  background: none;
}

.bg-transparent {
  background-color: transparent;
}

.bg-black {
  background-color: #303030;
}

.bg-gray {
  background-color: #767676;
}

.bg-white {
  background-color: white;
}

.bg-white-d, .bg-dark-white {
  background-color: #F3F5F6;
}

.bg-white-dd, .bg-darker-white {
  background-color: #edeff0;
}

.bg-gray-ll, .bg-lightest-gray {
  background-color: #dbdbdb;
}

.bg-gray-l, .bg-light-gray {
  background-color: #b7b7b7;
}

.bg-green {
  background-color: #00c473;
}

.bg-green-wza {
  background-color: #51D870;
}

.bg-green {
  background-color: #00c473;
}

.bg-green-ll, .bg-lightest-green {
  background-color: #d2fdd4;
}

.bg-purple-ll, .bg-lightest-purple {
  background-color: #edebff;
}

.bg-red {
  background-color: #da7474;
}

.bg-lightest-yellow, .bg-yellow-ll {
  background-color: #FFEBA6;
}

.bg-bv-black {
  background-color: #000;
}

.bg-bv-red {
  background-color: #E60000;
}

.bg-grad-light-gray {
  background-image: linear-gradient(315deg, #d9d9d9 0%, #f6f2f2 74%);
}

.bg-white-to-transparent {
  background-image: linear-gradient(90deg, #fff 50%, rgba(255, 255, 255, 0));
}

.bg-transparent-to-white {
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 50%);
}

.bg-transparent-to-white-y {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 50%);
}

.bg-transparent-to-white_y-0-90 {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 90%);
}

.bold {
  font-weight: 700;
}

.w-full {
  width: 100%;
}

.w-full-30px {
  width: calc(100% - 30px);
}

.w-full-35px {
  width: calc(100% - 35px);
}

.w-full-50px {
  width: calc(100% - 50px);
}

.w-full-60px {
  width: calc(100% - 60px);
}

.w-full-65px {
  width: calc(100% - 65px);
}

.w-full-120px {
  width: calc(100% - 120px);
}

.w-auto {
  width: auto;
}

.w-0 {
  width: 0px;
}

.w-4 {
  width: 1rem;
}

.w-10px {
  width: 10px;
}

.w-15px {
  width: 15px;
}

.w-20px {
  width: 20px;
}

.w-25px {
  width: 25px;
}

.w-30px {
  width: 30px;
}

.w-35px {
  width: 35px;
}

.w-40px {
  width: 40px;
}

.w-45px {
  width: 45px;
}

.w-50px {
  width: 50px;
}

.w-60px {
  width: 60px;
}

.w-57px {
  width: 57px;
}

.w-65px {
  width: 65px;
}

.w-80px {
  width: 80px;
}

.w-100px {
  width: 100px;
}

.w-110px {
  width: 110px;
}

.w-125px {
  width: 125px;
}

.w-150px {
  width: 150px;
}

.w-200px {
  width: 200px;
}

.w-250px {
  width: 250px;
}

.w-300px {
  width: 300px;
}

.w-350px {
  width: 350px;
}

.w-450px {
  width: 450px;
}

.w-650px {
  width: 650px;
}

.w-800px {
  width: 800px;
}

.w-25per {
  width: 25%;
}

.w-50per {
  width: 50%;
}

.w-75per {
  width: 75%;
}

.w-50per-7px {
  width: calc(50% - 7px);
}

.w-75per {
  width: 75%;
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.h-full-70px {
  height: calc(100% - 70px);
}

.h-full-80px {
  height: calc(100% - 80px);
}

.h-full-115px {
  height: calc(100% - 115px);
}

.h-full-150px {
  height: calc(100% - 150px);
}

.h-full-250px {
  height: calc(100% - 250px);
}

.h-full-190px {
  height: calc(100% - 190px);
}

.h-90vh {
  height: 90vh;
}

.h-100vh {
  height: 100vh;
}

.h-50per {
  height: 50%;
}

.h-0 {
  height: 0px;
}

.h-10px {
  height: 10px;
}

.h-15px {
  height: 15px;
}

.h-20px {
  height: 20px;
}

.h-25px {
  height: 25px;
}

.h-40px {
  height: 40px;
}

.h-45px {
  height: 45px;
}

.h-50px {
  height: 50px;
}

.h-65px {
  height: 65px;
}

.h-70px {
  height: 70px;
}

.h-80px {
  height: 80px;
}

.h-125px {
  height: 125px;
}

.h-135px {
  height: 135px;
}

.h-150px {
  height: 150px;
}

.h-250px {
  height: 250px;
}

.h-400px {
  height: 400px;
}

.h-500px {
  height: 500px;
}

.h-800px {
  height: 800px;
}

.mw-full, .maxw-full {
  max-width: 100%;
}

.mw-50p {
  max-width: 50%;
}

.mw-80px {
  max-width: 80px;
}

.mw-100px {
  max-width: 100px;
}

.mw-120px {
  max-width: 120px;
}

.mw-150px {
  max-width: 150px;
}

.mw-200px {
  max-width: 200px;
}

.mw-250px {
  max-width: 250px;
}

.mw-300px {
  max-width: 300px;
}

.mw-400px {
  max-width: 400px;
}

.mw-450px {
  max-width: 450px;
}

.mw-500px {
  max-width: 500px;
}

.mw-650px {
  max-width: 650px;
}

.mw-850px {
  max-width: 850px;
}

.mw-1100px {
  max-width: 1100px;
}

.minw-0 {
  min-width: 0;
}

.minw-35px {
  min-width: 35px;
}

.h-4 {
  height: 1rem;
}

.h-30px {
  height: 30px;
}

.h-35px {
  height: 35px;
}

.h-50px {
  height: 50px;
}

.h-200px {
  height: 200px;
}

.h-250px {
  height: 250px;
}

.h-300px {
  height: 300px;
}

.h-350px {
  height: 350px;
}

.h-2000px {
  height: 2000px;
}

.minh-0 {
  min-height: 0;
}

.minh-40px {
  min-height: 40px;
}

.minh-45px {
  min-height: 45px;
}

.minh-77px {
  min-height: 77px;
}

.minh-100px {
  min-height: 100px;
}

.minh-120px {
  min-height: 120px;
}

.minh-350px {
  min-height: 350px;
}

.minh-full {
  min-height: 100%;
}

.maxh-full {
  max-height: 100%;
}

.maxh-4rem {
  max-height: 4rem;
}

.maxh-2-7rem {
  max-height: 2.7rem;
}

.maxh-800px {
  max-height: 800px;
}

.t-xs {
  font-size: 0.75rem;
}

.t-sm {
  font-size: 0.875rem;
}

.t-base {
  font-size: 1rem;
}

.t-lg {
  font-size: 1.125rem;
}

.t-xl {
  font-size: 1.25rem;
}

.t-2xl {
  font-size: 1.5rem;
}

.t-3xl {
  font-size: 1.875rem;
}

.t-4xl {
  font-size: 2rem;
}

.t-5xl {
  font-size: 3rem;
}

.t-13px {
  font-size: 13px;
}

.t-15px {
  font-size: 15px;
}

.t-17px {
  font-size: 17px;
}

.t-20px {
  font-size: 20px;
}

.t-24px {
  font-size: 24px;
}

.t-32px {
  font-size: 32px;
}

.t-65px {
  font-size: 65px;
}

.t-right {
  text-align: right;
}

.t-left {
  text-align: left;
}

.t-center {
  text-align: center;
}

.t-bold {
  font-weight: 700;
}

.t-normal {
  font-weight: 400;
}

.b-0, .b-none {
  border: 0;
}

.b-1px {
  border: 1px solid #dbdbdb;
}

.br-1px {
  border-right: 1px solid #dbdbdb;
}

.b-2px-white {
  border: 2px solid #fff;
}

.b-1px-green {
  border: 1px solid #00c473;
}

.b-2px-green {
  border: 2px solid #00c473;
}

.b-1px-purple {
  border: 1px solid #6027DA;
}

.b-1px-purple-l {
  border: 1px solid #D4CEFF;
}

.bt-1px {
  border-top: 1px solid #dbdbdb;
}

.bb-1px {
  border-bottom: 1px solid #dbdbdb;
}

.bb-3px-purple {
  border-bottom: 3px solid #6027DA;
}

.bb-3px-green {
  border-bottom: 3px solid #00c473;
}

.b-red {
  border-color: #da7474;
}

.s-white {
  stroke: #fff;
}

.s-green {
  stroke: #00c473;
}

.s-width-none {
  stroke-width: 0;
}

.fill-green {
  fill: #00c473;
}

.fill-white {
  fill: #fff;
}

.fill-gray {
  fill: #767676;
}

.transition-all {
  transition: 2s all ease;
}

.scroll-smooth {
  scroll-behavior: smooth;
}

.bg-cover {
  background-size: cover;
  background-repeat: no-repeat;
}

.bg-contain {
  background-size: contain;
  background-repeat: no-repeat;
}

.bg-center {
  background-position: center;
}

.bg-bottom {
  background-position: bottom;
}

.opacity-0 {
  opacity: 0;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-35 {
  opacity: 0.35;
}

.object-contain {
  object-fit: contain;
}

.object-cover {
  object-fit: cover;
}

.rounded-0 {
  border-radius: 0px;
}

.rounded {
  border-radius: 4px;
}

.rounded-15px {
  border-radius: 15px;
}

.rounded-25px {
  border-radius: 25px;
}

.rounded-30px {
  border-radius: 30px;
}

.rounded-full {
  border-radius: 9999px;
}

.hover-bg-white:hover {
  background-color: #fff;
}

.hover-bg-darker-white:hover {
  background-color: #edeff0;
}

.pre-wrap {
  white-space: pre-wrap;
}

.space-x-1 {
  margin-right: calc(1rem * var(0));
  margin-left: calc(1rem * (1 - var(0)));
}

.space-y-1px > * {
  margin-top: 1px;
}

.space-y-5px > * {
  margin-top: 5px;
}

.space-y-10px > * {
  margin-top: 10px;
}

.space-y-10px > *:first-child {
  margin-top: 0;
}

.space-y-15px > * {
  margin-top: 15px;
}

.space-y-15px > *:first-child {
  margin-top: 0;
}

.space-y-20px > * {
  margin-top: 20px;
}

.space-y-20px > *:first-child {
  margin-top: 0;
}

.space-x-5px > * {
  margin-left: 5px;
}

.space-x-5px > *:first-child {
  margin-left: 0;
}

.space-x-10px > * {
  margin-right: 10px;
}

.space-x-10px > *:last-child {
  margin-right: 0;
}

.space-x-15px > * {
  margin-left: 15px;
}

.space-x-15px > *:first-child {
  margin-left: 0;
}

.space-x-20px > * {
  margin-left: 20px;
}

.space-x-20px > *:first-child {
  margin-left: 0;
}

.space-x-50px > * {
  margin-left: 50px;
}

.space-x-50px > *:first-child {
  margin-left: 0;
}

.trim {
  text-overflow: ellipsis;
  overflow: hidden;
}

.white-space-normal {
  white-space: normal;
}

.nowrap, .no-wrap {
  white-space: nowrap;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-y-scroll {
  overflow-y: scroll;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-x-scroll {
  overflow-x: scroll;
  overflow-y: none;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.word-break-all {
  word-break: break-all;
}

.underline {
  text-decoration: underline;
}

.no-underline {
  text-decoration: none;
}

.line-through {
  text-decoration: line-through;
}

.flex {
  display: flex !important;
}

.inline {
  display: inline;
}

.flex-row {
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-between {
  align-items: space-between;
}

.items-around {
  align-items: space-around;
}

.items-evenly {
  align-items: space-evenly;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.align-self-stretch {
  align-self: stretch;
}

.align-self-c, .align-self-center {
  align-self: center;
}

.align-self-s {
  align-self: start;
}

.align-start {
  align-content: flex-start;
}

.flex-grow {
  flex: 1 1 0;
}

.flex-grow {
  flex: 1 1 0;
}

.flex-grow-2 {
  flex: 2 1 0;
}

.flex-grow-3 {
  flex: 3 1 0;
}

.flex-shrink {
  flex: 0 1 0;
}

.flex-initial {
  flex: 0 0 auto;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-1-0-0 {
  flex: 1 0 0;
}

.flex-0-1-auto {
  flex: 0 1 auto;
}

.flex-1-1-auto {
  flex: 1 1 auto;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-wrap {
  flex-wrap: wrap;
}

.self-center {
  align-self: center;
}

.ver-c-c, .col-center-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.ver-s-c, .col-start-center {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.ver-c-s, .col-center-start {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.ver-s-s, .col-start-start {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.ver-s-s-wrap, .col-start-start-wrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}

.ver-s-st, .col-start-stretch {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}

.ver-s-sb {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: space-between;
}

.col-space-around-center {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.col-space-between-end {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: end;
}

.ver-e-s {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}

.ver-e-c {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.hor-c-c, .row-center-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.hor-c-s, .row-center-start {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
}

.hor-c-c-wrap, .row-center-center-wrap {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.hor-s-s, .row-start-start {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}

.hor-s-s-wrap, .row-start-start-wrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}

.hor-s-st {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
}

.hor-s-c, .row-start-center {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.hor-s-c-wrap, .row-start-center-wrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.hor-e-c, .row-end-center {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.hor-s-e, .row-start-end {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
}

.row-space-between-start {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.row-space-between-end {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}

.hor-sb-c, .row-space-between-center {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.hor-sb-st, .row-space-between-stretch {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
}

.row-start-center-wrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.row-center-start-wrap {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}

.hor-sa-c, .row-space-around-center {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.hor-st-s {
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  align-items: start;
}

.hor-st-st {
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  align-items: stretch;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.col-1-2-m20 {
  width: calc(50% - 20px);
  margin-right: 20px;
}
.col-1-2-m20:last-child {
  margin-right: 0;
}

.grid {
  display: grid;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid-cols-1-5-1 {
  grid-template-columns: 1fr 5fr 1fr;
}

.gr_a .col-auto {
  grid-column: auto;
}

.col-span-1 {
  grid-column: span 1/span 1;
}

.col-span-2 {
  grid-column: span 2/span 2;
}

.col-span-3 {
  grid-column: span 3/span 3;
}

.col-span-4 {
  grid-column: span 4/span 4;
}

.col-span-5 {
  grid-column: span 5/span 5;
}

.gap-0 {
  gap: 0px;
}

.gap-1px {
  gap: 1px;
}

.gap-5px {
  gap: 5px;
}

.gap-10px {
  gap: 10px;
}

.gap-15px {
  gap: 15px;
}

.gap-20px {
  gap: 20px;
}

.gap-30px {
  gap: 30px;
}

.order-2 {
  order: 2;
}

.inactive-link {
  pointer-events: none;
  cursor: default;
}

.triangle-top-purple {
  position: relative;
}

.triangle-top-purple:after {
  content: "";
  position: absolute;
  top: -11.5px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  border-bottom: 12px solid #edebff;
  border-left: 8.5px solid transparent;
  border-right: 8.5px solid transparent;
}

.triangle-top-purple:before {
  content: "";
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  border-bottom: 13.5px solid #D4CEFF;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.triangle:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 20px;
  width: 0;
  border-top: 12px solid #d2fdd4;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.triangle-purple:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  border-top: 12px solid #edebff;
  border-left: 8.5px solid transparent;
  border-right: 8.5px solid transparent;
}

.triangle-purple:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  border-top: 13.5px solid #6027DA;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.delay-1000 {
  transition-delay: 1000ms;
}

.delay-5000 {
  transition-delay: 5000ms;
}

.animation-slide-up {
  animation-name: slide-up;
  animation-duration: 0.5s;
  animation-direction: normal;
  animation-iteration-count: 1;
}

@-webkit-keyframes slide-up {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}
.list-style-none {
  list-style-type: none;
}

.cursor-pointer {
  cursor: pointer;
}

[contenteditable]:empty:before {
  content: attr(data-ph);
  color: #b7b7b7;
}

[contenteditable]:focus {
  padding: 0.4em 0.5em 0.7em 0.5em;
  border: 1px solid #b7b7b7;
  border-radius: 4px;
  background-color: #F3F5F6;
}

.comment {
  color: #767676;
}

.space-eater {
  flex: 1 1 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.spaceholder {
  padding: 30px 15px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.spaceholder h3 {
  color: #b7b7b7;
}

.icon-close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 15px;
  z-index: 1;
}

.icon {
  margin-bottom: -0.1em;
}

.icon--16px {
  height: 14px;
}

.icon--14px {
  height: 12px;
}

.hide {
  visibility: hidden;
}

.show {
  visibility: visible;
}

.invisible {
  display: none;
  visibility: hidden;
  height: 0;
  width: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.block {
  display: block !important;
}

.hidden {
  display: none;
}

.image-slider {
  position: relative;
  width: 100%;
  max-height: 500px;
  overflow: hidden;
  background-color: #dbdbdb;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.image-slider__image {
  flex: 0 0 auto;
  width: 100%;
  height: 100%;
  max-height: 500px;
  object-fit: contain;
  transition: margin 300ms;
}
@media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  .image-slider__image {
    max-height: 350px;
  }
}

.image-slider__prev,
.image-slider__next {
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.image-slider__prev svg,
.image-slider__next svg {
  stroke: white;
  transform: scale(1.2);
}

.image-slider__next {
  left: auto;
  right: 5px;
}

.label-error {
  color: #da7474;
  visibility: hidden;
  height: 0;
}

.label-error--visible {
  height: auto;
  visibility: visible;
}

.tabs {
  flex: 0 0 auto;
  width: 100%;
  height: 50px;
  background: white;
  border-bottom: 1px solid #edeff0;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: stretch;
}

.tab {
  font-size: 16px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.tab__content .loader {
  margin: 40px 0;
}

.tab__content h2 {
  padding: 0 20px;
  text-align: center;
}

.tab--active {
  border-bottom: 4px solid #00c473;
}

.badge {
  margin-left: 5px;
  padding: 0.1em 0.7em 0.16em 0.7em;
  font-size: 12px;
  font-weight: 700;
  color: white;
  border-radius: 50px;
  background-color: #da7474;
}

.badge--zero {
  visibility: hidden;
  padding: 0;
  width: 0px;
  background-color: #dbdbdb;
}

.section > .loader {
  margin-top: 50px;
}

.map-edit__map {
  width: calc(100% + 40px);
  max-height: 650px;
  height: 50vh;
}

.verified {
  position: relative;
  padding: 0px 4px 2px 18px;
  font-size: 13px;
  color: #538763;
  border-radius: 4px;
  background-color: #d2fdd4;
}

.verified:after {
  content: url(img/icon_check-dark-green.svg);
  position: absolute;
  top: 0px;
  left: 5px;
}

.unverified {
  padding: 0px 4px 2px 4px;
  font-size: 13px;
  color: #B88F00;
  border-radius: 4px;
  background-color: #FFEBA6;
}

.card {
  background: white;
  border-radius: 4px;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15), 0px 2px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.userpic {
  display: block;
  flex: 0 0 auto;
  border-radius: 50%;
  background-color: #dbdbdb;
  background-size: cover;
  background-position: center center;
}

.box-gray {
  padding: 10px;
  border-radius: 4px;
  background-color: #edeff0;
}

.box-green {
  padding: 10px;
  border-radius: 4px;
  background-color: #d2fdd4;
}

.box-red {
  padding: 10px;
  border-radius: 4px;
  background-color: #FFD0D0;
}

.box-dark-white {
  padding: 10px 15px;
  border-radius: 4px;
  background-color: #F3F5F6;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.buren-avatars {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.buren-avatars > img,
.buren-avatars > .placeholder-load-bg {
  width: 40px;
  height: 40px;
  margin-right: -10px;
  border: 2px solid white;
}

.user-info {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.user-info .userpic {
  margin-right: 5px;
}

.user-info .row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.user-info__user-name {
  margin-right: 5px;
  font-weight: 400;
}

.user-info__destination,
.user-info__location {
  margin-right: 5px;
  color: #767676;
}

.warning-message {
  z-index: 210;
  position: fixed;
  top: 0;
  left: 0;
  margin: 10px;
  width: calc(100% - 20px);
  max-width: 450px;
  padding: 15px;
  background-color: #FFEBA6;
  border-radius: 4px;
  box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.15);
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  padding: 50px;
  width: 100%;
  height: 100%;
  max-height: 100vh;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
@media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  .modal {
    padding: 0;
  }
}

.modal-st {
  position: relative;
  width: 100%;
  max-width: 450px;
  min-height: 300px;
  max-height: 100%;
  overflow: hidden;
  gap: 15px;
  background: white;
  align-self: flex-start;
  border-radius: 4px;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}
@media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  .modal-st {
    border-radius: none;
  }
}

.modal__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modal__icon-close {
  z-index: 1;
  position: absolute;
  top: 0;
  right: 0;
  padding: 15px;
  cursor: pointer;
}

.modal-bottom {
  bottom: 0;
  width: 100%;
  max-width: 450px;
  background: white;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

/* Hack for behind-modal scroll */
.no-scroll {
  height: 100vh;
  overflow: hidden;
}

.modal.modal--opaque {
  background: #b7b7b7;
}

.chat-icon {
  position: relative;
  font-size: 16px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.chat-icon img {
  margin-right: 10px;
}

.chat-icon--new:before {
  content: " ";
  position: absolute;
  top: 15px;
  left: 40px;
  width: 10px;
  height: 10px;
  background-color: #da7474;
  border-radius: 50%;
}

.home {
  width: 100%;
  padding-bottom: 80px;
}

.home--with-search {
  margin-top: 80px;
}

.nav-cat-header {
  position: fixed;
  top: 50px;
  left: 0;
}

.home__back {
  position: absolute;
  top: 0;
  left: 15px;
}

.home .bottom-nav-bar {
  display: none;
}

@media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  .home .bottom-nav-bar {
    display: flex;
  }
  .home .top-menu-old {
    display: none;
  }
}
.landing-bg {
  background-image: url("img/ill_landing.jpg");
  background-image: url("img/ill_landing.jpg"), linear-gradient(180deg, #00C47C 24.58%, #C8FFB5 68.5%, #FFE4AE 82.3%);
}
@media (min-width: 1024px) {
  .landing-bg {
    background-image: url("img/ill_landing-lg.jpg");
    background-image: url("img/ill_landing-lg.jpg"), linear-gradient(180deg, #00C47C 24.58%, #C8FFB5 68.5%, #FFE4AE 82.3%);
  }
}

.landingUS-bg {
  background-image: url("img/ill_landingUS.jpg");
  background-image: url("img/ill_landingUS.jpg"), linear-gradient(180deg, #00C47C 24.58%, #C8FFB5 68.5%, #FFE4AE 82.3%);
}
@media (min-width: 1024px) {
  .landingUS-bg {
    background-image: url("img/ill_landingUS-lg.jpg");
    background-image: url("img/ill_landingUS-lg.jpg"), linear-gradient(180deg, #00C47C 24.58%, #C8FFB5 68.5%, #FFE4AE 82.3%);
  }
}

.beta-dashboard,
.new-nearby {
  width: 100%;
  padding-bottom: 50px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.new-nearby h2 {
  margin: 30px 0 20px 0;
  padding: 0 20px;
  text-align: center;
}

.bottom-nav-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  align-items: center;
  height: calc(env(safe-area-inset-bottom) + 55px);
  padding-bottom: env(safe-area-inset-bottom);
}

.bottom-nav-bar--ios {
  padding-bottom: 20px;
  height: 80px;
}

.bottom-nav-bar__tab {
  position: relative;
  width: 25%;
  height: 100%;
  border: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.bottom-nav-bar__tab--new:before {
  content: " ";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(5px, -15px);
  width: 10px;
  height: 10px;
  background-color: #da7474;
  border-radius: 50%;
}

.bottom-nav-bar .tab img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.bottom-nav-bar .tab img.active {
  opacity: 0;
}

.bottom-nav-bar .tab--active img {
  opacity: 0;
}

.bottom-nav-bar .tab--active img.active {
  opacity: 1;
}

.bottom-nav-bar__profile-active {
  border-radius: 100%;
  border: 4px solid #a9edbe;
}

.top-menu-old {
  flex: 0 0 auto;
  padding: 0 15px;
  width: 100%;
  height: 69px;
  font-size: 16px;
  color: white;
  background: #00c473;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.top-menu-old .col {
  margin-left: 0 10px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.top-menu-old .col:first-child {
  margin: 0;
}

.top-menu-old .col:last-child {
  margin: 0;
}

.logo-holder {
  text-align: center;
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.watersnoodramp-link {
  color: white;
}

.top-menu-old .userpic {
  margin: 0 10px;
  width: 40px;
  height: 40px;
}

.logo-holder img {
  width: 121px;
}

.top-menu-old button {
  font-size: 16px;
}

.burger-menu {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  background: #fafafa;
  transition: all 0.5s ease 0s;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: stretch;
}

.burger-menu--out {
  margin-right: -305px;
}

.burger-menu__profile {
  color: #303030;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.burger-menu__profile span {
  font-size: 18px;
}

.burger-menu .col {
  padding-top: 50px;
  padding-bottom: 20px;
  background-color: white;
  border-bottom: 1px solid #dbdbdb;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.burger-menu .userpic {
  margin-bottom: 10px;
  width: 45px;
  height: 45px;
}

.burger-menu a.row {
  width: 100%;
  padding: 0 20px;
  height: 50px;
  color: #767676;
  text-decoration: none;
}

.row.burger-menu__spullen-aanbieden {
  height: 60px;
  color: #3894ff;
  border-top: 1px solid #dbdbdb;
  border-bottom: 1px solid #dbdbdb;
}

.space-eater {
  flex-grow: 1;
}

.burger-menu__help {
  border-top: 1px solid #dbdbdb;
  font-weight: 700;
}

.dates-n-price-block {
  margin-right: 10px;
  font-weight: 700;
}

.dates-n-price-block .icon {
  margin-right: 0.1em;
}

.request-holder {
  width: 100%;
  max-width: 450px;
  background-position: 10px center;
  background-repeat: no-repeat;
  background-image: url("img/remove-request.svg");
}

.request {
  position: relative;
  margin-bottom: 10px;
  padding: 10px;
  background: white;
  border-radius: 4px;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);
}

.request.highlight {
  border: 2px solid #00c473;
}

.request .button--close {
  top: 0;
  right: 0;
}

.request__offer {
  margin-right: 20px;
  font-size: 16px;
  font-weight: 700;
}

.request__offer .comment {
  font-size: 14px;
  font-weight: 400;
}

.request__share {
  position: absolute;
  top: 10px;
  right: 10px;
}

.request__answers {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.request__answer {
  background-color: rgba(233, 0, 53, 0.1);
  margin-left: 15px;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.request__answer--yes {
  background-color: rgba(0, 196, 115, 0.2);
}

.request__info {
  margin-top: 10px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.request__user-info {
  flex: 1 1 0;
  color: #767676;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.request__user-info .userpic {
  margin-right: 5px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #dbdbdb;
}

.request__username {
  margin-right: 10px;
  max-width: 80px;
  overflow: hidden;
}

.request__product-name {
  width: 100%;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.request__product-name .col:first-child {
  margin-right: 20px;
}

.request__product-desc {
  margin: 5px 0 5px 0;
  width: 100%;
  color: #767676;
  font-size: 16px;
  overflow: hidden;
}

.request--removed {
  opacity: 0;
}

.request--tutorial-animation {
  animation: back-n-force 0.8s 2;
  animation-delay: 1.5s;
}

@keyframes back-n-force {
  0% {
    left: 0;
  }
  70% {
    left: 20%;
  }
  100% {
    left: 0;
  }
}
.select-product {
  height: 100%;
  max-height: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.select-product > * + * {
  margin-top: 10px;
}

.select-product__listings {
  margin: 10px 0;
  padding-bottom: 150px;
  width: 100%;
  height: calc(100% - 200px);
  overflow-y: auto;
}

.select-product__listing {
  padding: 8px;
  width: 100%;
  min-height: 50px;
  text-align: left;
  border-top: 1px solid #dbdbdb;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.select-product__listing:last-child {
  border-bottom: 1px solid #dbdbdb;
}

.select-product__listing-image {
  margin-right: 5px;
  width: 38px;
  height: 38px;
}

.select-product__bottom-panel {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  padding: 20px;
  background-color: white;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}

.proposal {
  position: relative;
  width: 100%;
  background: white;
  text-align: left;
}

.proposal__product-name {
  margin-bottom: 5px;
  font-size: 20px;
}

.proposal__product-desc {
  font-size: 16px;
}

.proposal__info {
  margin: 10px 0;
  color: #767676;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.proposal__info .userpic {
  width: 25px;
  height: 25px;
}

.proposal__share {
  flex: 1 1 0;
  text-align: right;
}

.proposal__not-active {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.proposal__title {
  margin: 20px 0;
}

.proposal-form {
  margin-top: 20px;
}

.proposal__listing {
  margin: 10px 0;
  width: 100%;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15), 0px 2px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border-radius: 4px;
}

.proposal__listing img {
  width: 50px;
  height: 50px;
}

.proposal__listing .col {
  margin-left: 5px;
  width: calc(100% - 160px);
}

.proposal__listing .button--link {
  margin-right: 10px;
}

.proposal__listing .button--icon {
  height: 50px;
  width: 40px;
  background-color: #edeff0;
}

.proposal__listing .button--icon img {
  height: 10px;
  width: auto;
}

.proposal-form .section {
  padding: 15px 0;
  border-top: 1px solid #dbdbdb;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}

.proposal-form .section.row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.proposal-form__dates {
  margin: 20px 0;
}

.proposal-form__dates-price {
  position: relative;
  padding: 10px 0;
  border-top: 1px solid #dbdbdb;
  border-bottom: 1px solid #dbdbdb;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.proposal-form__garantie {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.proposal-form__garantie .comment {
  margin-left: 10px;
  max-width: 120px;
}

.proposal__username {
  margin: 0 10px 0 4px;
}

.proposal-form__dates-price .dates,
.proposal-form__dates-price .price {
  width: 100%;
  font-size: 24px;
  font-weight: 700;
}

.proposal-form__dates-edit {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.proposal-form__dates-edit .col {
  width: calc(50% - 10px);
}

.proposal-form__dates-edit .col input {
  margin-top: 5px;
  width: 100%;
}

.proposal-form__dates-edit .close {
  position: absolute;
  top: 0;
  right: 0;
}

.proposal-form__send {
  padding: 20px 0 0 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.proposal-form__send button {
  font-size: 16px;
}

.proposal-form__price-slider {
  position: relative;
}

.proposal-form__price-slider .advanced {
  position: absolute;
  top: 0;
  right: 0;
}

.proposal-form__price-slider .col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.proposal-form__price-slider .day {
  font-size: 16px;
}

.proposal-form__price-slider .price {
  font-size: 16px;
}

.extra-days__holder {
  position: absolute;
  width: 70%;
  right: 0;
  top: 0;
}

.proposal-form__price-slider .extra-days {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.proposal-form__price-edit {
  position: relative;
  width: 100%;
  padding: 20px 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.proposal-form__price-edit .close {
  position: absolute;
  top: 0;
  right: 0;
}

.proposal-form__contact-share {
  padding: 20px 0 10px 0;
  font-size: 14px;
  text-align: center;
  color: #767676;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.products {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-template-rows: repeat(auto-fill);
  grid-column-gap: 0.75rem;
  grid-row-gap: 0.75rem;
  justify-items: stretch;
  align-items: flex-start;
}
@media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  .products {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

.products-hor {
  width: 100%;
  max-width: 538px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}

.products__no-products {
  margin: 40px 0 20px 0;
  width: 100%;
  text-align: center;
  font-size: 20px;
  color: #767676;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.placeholder-load-bg {
  background: linear-gradient(45deg, white, #b7b7b7, white);
  background-size: 400% 400%;
  animation: gradient 2s ease infinite;
}

.first-letter-cap:first-letter {
  text-transform: capitalize;
}

.circles__add-product-button {
  position: sticky;
  top: 10px;
  z-index: 2;
}

.circles__message {
  padding: 10px;
  background-color: #edebff;
  border: 1px solid #D4CEFF;
  border-radius: 15px;
  border-bottom-left-radius: 0;
}

.circles__code {
  padding: 10px 20px 12px 15px;
  width: 250px;
  font-family: monospace, "Courier New", Courier;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 16px;
  text-transform: uppercase;
}

.gradient-layer:before {
  content: " ";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: linear-gradient(to top, hsla(0, 0%, 0%, 0.4) 0%, hsla(0, 0%, 0%, 0.15) 25%, hsla(0, 0%, 0%, 0) 45%, hsla(0, 0%, 0%, 0) 55%, hsla(0, 0%, 0%, 0.15) 75%, hsla(0, 0%, 0%, 0.4) 100%);
}

.listing-page {
  display: grid;
  width: 100%;
  padding-bottom: 100px;
  background: #F3F5F6;
  grid-template-columns: auto minmax(200px, 650px) minmax(100px, 350px) auto;
  grid-template-rows: 69px auto auto;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  grid-template-areas: "a a a a" ". b c ." ". b . ." ". d d ." "e e e e";
}
@media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  .listing-page {
    grid-template-columns: 100%;
    grid-template-rows: auto auto;
    grid-row-gap: 0;
    grid-template-areas: "b" "d" "e";
  }
}

.listing-page__holder {
  grid-area: b;
  width: 100%;
  background: white;
}

.listing-page__right-panel {
  grid-area: c;
  padding: 20px;
  background: white;
  border-radius: 15px;
  box-shadow: 0px 1px 2px rgba(32, 27, 27, 0.15), 0px 20px 36px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 100px;
}
.listing-page__right-panel .userpic {
  width: 50px;
  height: 50px;
}
@media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  .listing-page__right-panel {
    display: none;
  }
}

.listing-page__crosslinks-panel {
  grid-area: d;
}

.listing-page__bottombar {
  display: none;
}
@media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  .listing-page__bottombar {
    position: fixed;
    bottom: 0;
    margin: 0;
    width: 100%;
    padding: 10px 15px;
    background: white;
    border-top: 1px solid #dbdbdb;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
  .listing-page__bottombar .userpic {
    margin-right: 5px;
  }
}

.listing-page__footer {
  grid-area: e;
}

@media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  .listing-page .image-slider {
    max-height: 350px;
  }
}

.slide-up {
  margin-top: -50px;
  opacity: 0;
}

.loader__holder {
  flex: 1 1 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.loader {
  margin: 15px;
  border: 5px solid #d2fdd4;
  border-radius: 50%;
  border-top: 5px solid #00c473;
  width: 40px;
  height: 40px;
  -webkit-animation: spin 1s linear infinite; /* Safari */
  animation: spin 1s linear infinite;
}

.loader.loader--small {
  margin: 10px;
  width: 25px;
  height: 25px;
}

/* Safari */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.chats-screen-holder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.chats-screen {
  width: 100%;
  max-width: 1100px;
  height: calc(100% - 69px);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}

.chats-screen__chat {
  width: 65%;
  height: 100%;
  border-right: 1px solid #dbdbdb;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.chat-list {
  position: relative;
  width: 35%;
  height: 100%;
  background-color: #edeff0;
  border-right: 1px solid #dbdbdb;
  border-left: 1px solid #dbdbdb;
}
@media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  .chat-list {
    width: 100%;
    border: none;
  }
}

.chat-list__wallet {
  width: 100%;
  height: 50px;
  background-color: #d2fdd4;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.chat-list__wallet img {
  height: 14px;
  margin-bottom: -2px;
  margin-right: 2px;
}

.chat-list .tabs {
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.chat-list #tab-content {
  height: calc(100% - 100px);
  padding-bottom: 80px;
  overflow-y: scroll;
}

.chat-list h2 {
  margin: 20px 0 15px 0;
  padding: 0 20px;
  text-align: center;
}

.chat-list__request {
  margin: 15px 15px;
  border-left: 2px solid #767676;
}

.chat-list__need {
  margin: 15px 15px;
  background-color: #f3f5f6;
}

.chat {
  position: relative;
  padding: 15px 0;
  border-bottom: 1px solid #dbdbdb;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}

.chat:after {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  content: url("img/icon_chevron-right-gray.svg");
}

.chat .userpic {
  flex: 0 0 auto;
  margin: 0 10px;
  width: 40px;
  height: 40px;
}

.chat__info {
  flex: 1 1 0;
  max-width: calc(100% - 80px);
}

.chat .order-preview {
  margin: 5px 0 5px 0;
  width: 100%;
  max-width: 220px;
}

.chat__last-message {
  margin-top: 5px;
  width: calc(100% - 10px);
  color: #767676;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.chat__last-message--unread {
  color: #303030;
  font-weight: 700;
}

.chat__unread-counts {
  position: absolute;
  bottom: 15px;
  right: 10px;
  background-color: #da7474;
  padding: 0px 7px 3px 7px;
  font-weight: 700;
  color: white;
  border-radius: 50px;
}

.chat__no-proposals {
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.chat .dates-n-price-block {
  font-weight: 400;
}

.wallet {
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #e0f4d8;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.wallet .row {
  margin: 10px;
}

.wallet-modal__total {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.wallet-modal__total > img {
  margin-bottom: 5px;
}

.wallet-modal__unlocked {
  position: relative;
}

.wallet-modal__unlocked:after {
  content: url("img/icon_unlocked.svg");
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
  height: 20px;
}

.wallet-modal__locked {
  position: relative;
}

.wallet-modal__locked:after {
  content: url("img/icon_locked.svg");
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
  height: 20px;
}

.wallet-modal__success {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.wallet-modal__history tr {
  border-bottom: 1px solid #dbdbdb;
}

.wallet-modal__history tr:first-child {
  border-top: 1px solid #dbdbdb;
}

.wallet-modal__history th {
  padding: 10px 0;
}

.garanty {
  padding: 5px 10px 7px 10px;
  border-radius: 4px;
  background-color: #d2fdd4;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.garanty img {
  margin-bottom: -2px;
  margin-right: 5px;
  height: 18px;
}

.chat-screen {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.chat-screen__from {
  position: relative;
  width: 100%;
  margin: 5px 20px 0 20px;
  padding: 4px 10px 5px 10px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}

.chat-screen__top-bar {
  z-index: 1;
  flex: 0 0 auto;
  width: 100%;
  height: 50px;
  background-color: white;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
@media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  .chat-screen__top-bar {
    position: fixed;
    top: 0;
    left: 0;
  }
}

.chat-screen__top-bar .col {
  flex: 1 1 0;
  width: calc(100% - 130px);
}

.chat-screen__top-bar .userpic-holder {
  margin: 0 5px 0 15px;
}

.chat-screen__chat-menu img {
  height: 18px;
}

.chat-screen__messages {
  padding-top: 10px;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
@media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  .chat-screen__messages {
    padding-top: 50px;
  }
}

.chat-screen__messages:after {
  content: "end";
  opacity: 0;
  display: block;
  padding-bottom: 50px;
}
@media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  .chat-screen__messages:after {
    padding-bottom: calc(150px + env(safe-area-inset-bottom));
  }
}

.chat-screen__messages-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.chat-screen__bottom {
  z-index: 10;
  flex: 0 0 auto;
  bottom: 0;
  left: 0;
  width: 100%;
  padding-bottom: env(safe-area-inset-bottom);
}
@media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  .chat-screen__bottom {
    position: fixed;
  }
}

.chat-screen__bottom:focus-within {
  padding-bottom: 0;
}

.order-card {
  position: relative;
  margin: 0px 10px 8px 10px;
  flex: 1 0 auto;
  width: calc(100% - 20px);
  padding: 5px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  transition: height 0.3s ease-out;
  height: 67px;
}

.order-card__userpic {
  position: absolute;
  left: 50%;
  top: -30px;
  transform: translateX(-50%);
}

.order-card__top {
  width: 100%;
  border-bottom: 1px solid #dbdbdb;
}

.order-card__middle {
  flex: 1 1 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}

.order-card__bottom {
  flex: 0 0 auto;
  width: 100%;
  height: 45px;
  border-top: 1px solid #dbdbdb;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.order-card__fold-button {
  position: absolute;
  top: 0px;
  right: 2px;
}

.order-card.order-card--unfold {
  height: 350px;
}

.order-card__preview {
  width: 100%;
}

.order-preview {
  max-width: calc(100% - 130px);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  background-color: white;
  border-radius: 4px;
}

.order-preview .col {
  margin-left: 5px;
  margin-right: 10px;
  width: 100%;
  flex: 1 1 auto;
}

.order-preview span {
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.order-preview__listing-image {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  background-color: #767676;
  border-radius: 4px;
}

.order-preview__status {
  margin-bottom: -0.1em;
  margin-left: 5px;
}

.order-card__dynamic-content {
  padding: 0 15px;
  flex: 1 1 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.order-card__status {
  flex: 1 1 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.order-card__status > button {
  width: 100%;
}

.order-card__status > .row {
  width: 100%;
}

.order-card__status > .row > * {
  margin-right: 20px;
  flex: 1 1 0;
}

.order-card__status > .row > *:last-child {
  margin-right: 0;
}

.order-card__secondary-actions {
  margin: 5px 0;
  flex: 0 0 auto;
  min-height: 40px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.order-card__actions button {
  flex: 1 1 0;
}

.order-card__user {
  width: 100%;
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid #dbdbdb;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.order-card__user .userpic {
  margin-right: 10px;
}

.order-card--fold .order-preview {
  max-width: none;
  width: calc(100% - 50px);
}

.order-card--unfold .order-preview {
  width: 100%;
  max-width: 100%;
}

.order-card .order-preview span {
  max-width: 100%;
}

.label-focus:focus-within {
  border: 1px solid #6027DA;
}

.textarea-blank {
  overflow: hidden;
  border: 0;
  outline: none;
  resize: none;
  background: none;
}

.chat-screen__input-bar {
  margin: 5px 5px 5px 5px;
  padding: 0 0 0 15px;
  bottom: 0;
  left: 0;
  min-height: 50px;
  background-color: white;
  border-radius: 25px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.chat-screen__input-bar textarea {
  padding: 5px 0 5px 0;
  flex: 1 1 0;
  overflow: hidden;
  border: 0;
  outline: none;
  resize: none;
  background: none;
}

.chat-screen__modal-close-bg {
  z-index: 9;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(150, 150, 150, 0.5);
}

.chat-screen__modal-close-bg--close {
  top: -4000px;
}

.chat-screen__date {
  font-size: 13px;
  color: #767676;
  margin: 15px 0;
  padding: 2px 5px;
  border-radius: 5px;
  background-color: #dbdbdb;
}

.chat-screen__service {
  margin: 20px 0;
  max-width: 80%;
  text-align: center;
}

.chat-screen__order {
  margin: 15px 0 0 0;
  padding: 10px 15px;
  background: white;
  border-radius: 4px;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.chat-screen__message,
.chat-msg {
  position: relative;
  margin: 5px 20px 0 20px;
  padding: 4px 10px 5px 10px;
  flex: 0 0 auto;
  max-width: 80%;
  overflow: hidden;
  align-self: flex-start;
  display: table-cell;
  border-radius: 15px;
  border-bottom-left-radius: 0;
  border: 1px solid #D4CEFF;
  background-color: #edebff;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}

.chat-screen__message + .chat-screen__message {
  margin-top: 5px;
}

.chat-screen__message--my,
.chat-msg--my {
  align-self: flex-end;
  border-color: #a9edbe;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 15px;
  background-color: #d2fdd4;
}

.chat-msg__space-for-time {
  width: 52px;
  height: 1em;
}

.chat-msg__time {
  position: absolute;
  right: 5px;
  bottom: 2px;
  color: #767676;
  font-size: 13px;
}

.chat-msg__image {
  width: 100px;
}

.order-block {
  flex-basis: 100%;
  width: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}

.chat-screen__white-block {
  margin: 5px 0;
  padding: 4px 10px 4px 5px;
  width: 100%;
  max-width: 220px;
  background-color: white;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.chat-screen__delivery-sup {
  margin-top: 15px;
  padding: 10px;
  width: 250px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);
}

.chat-screen__delivery-sup h2 {
  font-size: 17px;
}

.chat-screen__add-photo {
  width: 100%;
  height: 200px;
  background-color: white;
}

.chat-screen .modal__content {
  width: 100px;
  background-color: white;
}

.chat-screen__popup-block-contacts {
  flex: 0 0 auto;
  margin: 10px;
  bottom: 100px;
  padding: 10px;
  background-color: white;
}

.user-quick-info__map {
  position: relative;
  width: 100%;
  height: 250px;
  background-size: cover;
}

.user-quick-info__map > img {
  width: 100px;
}

.user-quick-info__map:after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border: 2px solid #00c473;
  background-color: rgba(169, 237, 190, 0.35);
  border-radius: 50px;
}

.contact-block {
  flex: 0 0 auto;
  margin: 5px 0;
  max-width: 300px;
  background-color: white;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.contact-block__info {
  flex: 1 1 0;
  padding: 10px;
}

.contact-block__info > * + * {
  margin-top: 3px;
}

.contact-block__map {
  position: relative;
  flex: 0 0 auto;
}

.contact-block__map > img {
  width: 100px;
}

.contact-block__row {
  flex: 0 0 auto;
  width: 100%;
}

.contact-block__row:first-child {
  border-bottom: 1px solid #dbdbdb;
}

.add-listing__rotate-btn {
  position: absolute;
  bottom: 2px;
  left: 2px;
  height: 35px;
  color: #767676;
  background: white;
  border: none;
  border-radius: 50px;
}

.add-listing__remove-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  height: 35px;
  color: #767676;
  background: white;
  border: none;
  border-radius: 50px;
}

.select-hor {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
}

.select-hor__option {
  flex: 1 1 0;
  margin-left: -1px;
  padding: 0 5px 3px 5px;
  height: 45px;
  color: #767676;
  border: 1px solid #dbdbdb;
  background-color: #F3F5F6;
  cursor: default;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.select-hor__option:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.select-hor__option:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.select-hor__option.opt--selected {
  background-color: #00c473;
  color: white;
  font-weight: 700;
  border: 1px solid #00c473;
  border-radius: 4px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);
}

.list-menu {
  border: 1px solid #dbdbdb;
  border-radius: 4px;
}

.list-menu .row {
  position: relative;
  padding: 11px 25px 13px 15px;
  min-height: 45px;
  border-bottom: 1px solid #dbdbdb;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.list-menu .row:hover {
  background-color: #F3F5F6;
}

.list-menu .row:last-child {
  border-bottom: none;
}

.list-menu .row > *:nth-child(2) {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
}

.tree-select {
  width: 100%;
  background-color: white;
  text-align: left;
}

.tree-select__back-btn {
  position: relative;
  color: #6027DA;
  background: none;
  border: none;
  padding: 15px 0;
}

.tree-select__back-btn img {
  margin-bottom: -5px;
  margin-right: 2px;
}

.tree-select__item {
  position: relative;
  padding: 15px 0px;
  border-top: 1px solid #dbdbdb;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.tree-select__item:after {
  content: url("img/icon_chevron_right.svg");
  position: absolute;
  top: 50%;
  right: 0px;
  transform: translateY(-50%);
}

.tree-select__item:last-child {
  border-bottom: 1px solid #dbdbdb;
}

.with-arrow {
  position: relative;
  padding-right: 25px;
}

.with-arrow:after {
  display: inline-block;
  position: absolute;
  content: "";
  top: 50%;
  right: 10px;
  transform: translateY(-50%) rotate(45deg);
  border-style: solid;
  border-width: 1px 1px 0 0;
  height: 0.65em;
  width: 0.65em;
  vertical-align: top;
}

.chevron::before {
  border-style: solid;
  border-width: 0.25em 0.25em 0 0;
  content: "";
  display: inline-block;
  height: 0.45em;
  left: 0.15em;
  position: relative;
  top: 0.15em;
  transform: rotate(-45deg);
  vertical-align: top;
  width: 0.45em;
}

.chevron.right:before {
  left: 0;
  transform: rotate(45deg);
}

.chevron.bottom:before {
  top: 0;
  transform: rotate(135deg);
}

.chevron.left:before {
  left: 0.25em;
  transform: rotate(-135deg);
}

.with-radio-right {
  position: relative;
  padding-right: 50px;
}

.with-radio-right.opt--selected {
  background-color: #d2fdd4;
}

.with-radio-right:after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
  width: 22px;
  height: 22px;
  border: 3px solid white;
  box-shadow: 0 0 0 1px #b7b7b7;
  content: " ";
  border-radius: 50px;
  background-color: #fff;
}

.with-radio-right.opt--selected:after {
  background-color: #00c473;
}

.status {
  background: #00c473;
  color: white;
  font-size: 12px;
  padding: 2px 5px;
}

.status.status--canc {
  background: #da7474;
}

.request-status {
  font-size: 14px;
  color: #00c473;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.request-status:before {
  content: "";
  display: block;
  margin: 0 2px -2px 0;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background-color: #00c473;
}

.request-status--paused {
  color: #767676;
}

.request-status--paused.request-status:before {
  background-color: #767676;
}

.request-status--blocked {
  color: #da7474;
}

.request-status--blocked.request-status:before {
  background-color: #da7474;
}

.orders-n-requests .table__row {
  display: grid;
  grid-template-columns: 10% 15% 30% 15% 15% 15%;
  margin: 0px 0;
  padding: 7px 15px;
  background: white;
}

.cat-title {
  padding: 15px 15px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.cat-title__back {
  width: 20px;
}

.cat-title h2 {
  margin-left: 25px;
  flex: 1 1 0;
  max-width: calc(100% - 60px);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.cat-bar-holder {
  position: relative;
  height: 45px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.cat-bar {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 10px 10px 10px;
  width: 100%;
  flex-wrap: nowrap;
  overflow: scroll;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  transition: all 0.3s ease-out;
  animation: 0.5s slide-up;
}

@-webkit-keyframes slide-in {
  0% {
    transform: translateX(0%);
  }
  50% {
    transform: translateX(-100%);
  }
}
@-webkit-keyframes slide-out {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(0%);
  }
}
.cat-bar__item {
  padding: 8px 0px;
  margin-right: 15px;
  white-space: nowrap;
}

.cat-bar__item--current {
  padding: 8px 15px;
  background-color: #00c473;
  color: white;
  border-radius: 25px;
}

.slide__container {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: #edeff0;
  overflow: scroll;
}
@media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  .slide__container {
    position: fixed;
  }
}

.slide {
  margin-bottom: 100px;
  background: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}

.slide > * {
  margin-bottom: 15px;
}

.slide-in {
  left: 0;
  transition: all 0.2s ease-out;
}

.slide-out {
  transition: all 0.2s ease-out;
  left: 100%;
  opacity: 0;
}

.search-block {
  width: 100%;
  min-height: 40vh;
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("https://www.peerby.com/assets/fecadb07.jpg");
  background-position: 100% 10%;
  background-size: 120% auto;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.search-block h2 {
  color: white;
  margin-top: 50px;
  font-size: 52px;
}

.search-block h3 {
  color: white;
  font-size: 36px;
  font-weight: 400;
}

.search-block .search-comp {
  margin: 40px 0;
  max-width: 800px;
}

.search-comp {
  position: relative;
  padding: 10px 20px;
}
@media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  .search-comp {
    background-color: none;
    padding: 0 10px;
  }
}

.search_comp__noam {
  display: none;
  margin-right: 10px;
}
@media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  .search_comp__noam {
    display: block;
  }
}

.search-comp__input {
  flex: 1 1 auto;
  position: relative;
}

.search-comp__input-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 5px;
  stroke: #b7b7b7;
}

.search-comp__input input {
  padding-left: 25px;
  flex: 1 1 auto;
  height: 3em;
  text-overflow: ellipsis;
  font-size: 1.25rem;
  background: white;
}
@media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  .search-comp__input input {
    font-size: 1.125rem;
    height: 2.5em;
    padding-right: 5px;
  }
}

.search-comp__input input[name=query] {
  border-right: none;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.search-comp__input input[name=placesQuery] {
  border-left: 1px solid #b7b7b7;
  border-right: 1px solid #b7b7b7;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

.search-comp__input input:focus {
  padding-right: 40px;
}

.search-comp__autocomplete {
  z-index: 10;
  position: absolute;
  left: 0;
  right: 0;
  font-size: 17px;
  background: white;
  color: #767676;
}

@media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  .search-comp__autocomplete {
    top: 50px;
    left: -20px;
    width: 100vw;
  }
}

.search-comp__autocomplete-item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0 20px 5px 20px;
  height: 60px;
  border-bottom: 1px solid #dbdbdb;
}

.search-comp__autocomplete-item:hover {
  background: #edeff0;
  cursor: pointer;
}

.search-comp__clean {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 5px;
  stroke: #b7b7b7;
}

.search-comp__close {
  margin-left: 10px;
  flex: 0 0 auto;
}

.search-comp__radius {
  position: relative;
  padding-right: 0.75em;
  flex: 0 0 auto;
  width: 5em;
  height: 3em;
  font-size: 1.25em;
  text-overflow: ellipsis;
  background-color: white;
  background-image: url("img/icon_chevron_down-light-gray.svg");
  background-repeat: no-repeat;
  background-position: calc(100% - 5px) 50%;
  border-radius: 0;
}
@media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  .search-comp__radius {
    font-size: 1.125rem;
    padding-left: 0.25em;
    width: 4.2em;
    height: 2.5em;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
}

.search-comp__submit {
  height: 3em;
  font-size: 1.25rem;
  padding-left: 1.5em;
  padding-right: 1.5em;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
@media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  .search-comp__submit {
    display: none;
    font-size: 1rem;
  }
}

@media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  .search-comp--green {
    position: fixed;
    top: 0;
    left: 0;
    padding: 10px 10px;
    background-color: #00c473;
  }
  .search-comp--green .search-comp__input input {
    background: rgba(0, 0, 0, 0.25);
    border: none;
    color: white;
  }
  .search-comp--green .search-comp__input input::placeholder {
    color: rgba(255, 255, 255, 0.5);
  }
  .search-comp--green .search-comp__input-icon {
    stroke: rgba(255, 255, 255, 0.5);
  }
  .search-comp--green .search-comp__clean {
    stroke: rgba(255, 255, 255, 0.5);
  }
  .search-comp--green .search-comp__radius {
    border: none;
    color: white;
    background-color: rgba(0, 0, 0, 0.25);
    background-image: url("img/icon_chevron_down-white-transparent.svg");
  }
  .search-comp--green .search-comp__close {
    color: white;
  }
}

.search-page {
  width: 100%;
  overflow-y: scroll;
  display: grid;
  grid-template-columns: 1fr minmax(400px, 1100px) 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: "a a a" ". b ." "c c c";
}
@media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  .search-page {
    grid-template-columns: 100%;
    grid-row-gap: 0;
    grid-template-areas: "a" "b" "c";
  }
}

.search-page__top {
  grid-area: a;
  z-index: 10;
  position: sticky;
  top: 0;
  width: 100%;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.search-page__list {
  grid-area: b;
}

.search-page__bottom {
  grid-area: c;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: white;
}

.post-request {
  margin: 20px 0 40px 0;
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background: white;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}
@media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  .post-request {
    width: calc(100% - 30px);
    margin: 20px 15px 40px 15px;
  }
}

.post-request__form {
  padding: 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: 0px;
}
.post-request__form > * {
  text-align: center;
}
.post-request__form > * > * {
  text-align: left;
}
.post-request__form > * + * {
  margin: 10px 0;
}
.post-request__form > h2 {
  margin: 0 20px;
  font-size: 20px;
}
.post-request__form p {
  width: 100%;
}
.post-request__form p + p {
  margin-top: -5px;
}
.post-request__form .box-gray .col {
  margin-right: 20px;
  text-align: left;
}
.post-request__form > .row > button {
  margin-right: 20px;
}
.post-request__form > .row > button:last-child {
  margin-right: 0;
}
.post-request__form > .row > .col {
  flex: 1 1 0;
  margin: auto;
  margin-right: 15px;
}
.post-request__form > .row > .col:last-child {
  margin-right: 0;
}

.search-page__footerHolder {
  flex: 0 0 auto;
  padding: 30px 0;
  width: 100%;
  background: white;
  border-top: 1px solid #dbdbdb;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.search-page__footer {
  width: 100%;
  max-width: 1100px;
  color: #767676;
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  align-items: flex-start;
}

.search-page__footer .col {
  width: 25%;
}

.search-page__footer a {
  margin-top: 15px;
  color: #767676;
  text-decoration: none;
}

.search-page__footer a:hover {
  text-decoration: underline;
}

.search-page__social a {
  margin: 0 20px;
}

.search-page__social .row {
  margin-top: 20px;
}

.paging {
  margin: 20px 10px;
  max-width: calc(100% - 20px);
  overflow: auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  background-color: white;
  border: 1px solid #b7b7b7;
  border-radius: 4px;
}

.paging__page {
  margin-right: 0px;
  padding: 10px 20px;
  border-right: 1px solid #b7b7b7;
}
.paging__page:last-child {
  border-right: none;
}

.paging__page--current {
  background-color: #F3F5F6;
}

.minimise-card {
  animation: minimise 1s ease 1;
}

@-webkit-keyframes minimise {
  0% {
    transform: scale(1);
    top: 0;
    left: 0;
    opacity: 1;
  }
  100% {
    transform: scale(0.1);
    top: 100%;
    left: 50%;
    opacity: 0.1;
  }
}
.jump {
  animation: jump 1s ease-in-out 1;
}

@-webkit-keyframes jump {
  0% {
    transform: translateY(0);
  }
  35% {
    transform: translateY(-100%);
  }
  50% {
    transform: translateY(0);
  }
  85% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
.how-to {
  flex: 0 0 auto;
  padding: 40px 0;
  width: 100%;
  text-align: center;
  background-color: white;
  border-top: 1px solid #dbdbdb;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.how-to h2 {
  margin-bottom: 20px;
  width: 100%;
}

.how-to__holder {
  width: 100%;
  max-width: 1100px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
@media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  .how-to__holder {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .how-to__holder .how-to__holder > * {
    flex: 0 0 auto;
  }
}

.how-to__holder > .col {
  width: 33%;
  margin: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
@media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  .how-to__holder > .col {
    width: 100%;
    margin: 0;
    padding: 0 20px;
  }
}

.how-to__holder > .col h3,
.how-to__holder > .col p {
  text-align: center;
}

.profile-screen {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.profile__info {
  padding: 5px 15px 20px 15px;
  width: 100%;
  max-width: 500px;
  min-height: 240px;
  background: white;
}

.profile__info-holder {
  flex: 0 0 auto;
  padding: 0;
  max-width: none;
  background: white;
  border-bottom: 1px solid #dbdbdb;
}

.profile__info .userpic {
  width: 80px;
  height: 80px;
}

.profile__info .row {
  margin-bottom: 10px;
}

.profile__stats-col {
  margin-right: 10px;
}

.profile__info .row .profile__userpic-n-settings {
  position: relative;
  margin-bottom: 30px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}

.profile__info .verification-badge {
  margin: 5px 5px 0 0;
}

.profile__settings {
  flex: 1 1 0;
  text-align: right;
}

.options-menu {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 5px 15px 5px 15px;
  min-width: 220px;
  border-radius: 4px;
  background: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.options-menu__button {
  padding: 15px 0;
  width: 100%;
  font-size: 16px;
  color: #303030;
  background: none;
  text-decoration: none;
  text-align: center;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #dbdbdb;
}

.options-menu__button:last-child {
  border-bottom: none;
}

.options-menu__button button {
  margin-left: 10px;
}

.options-menu__button span {
  padding: 2px 0;
}

#tocopyEl {
  position: fixed;
  top: -9000px;
  left: -9000px;
}

.zoom-in-userpic .userpic {
  width: 300px;
  height: 300px;
}

.subscription-picker__select {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
}

.subscription-picker__select > .row {
  position: relative;
  flex: 1 1 0;
  margin-right: 15px;
  padding: 15px 10px;
  border: 1px solid #b7b7b7;
  border-radius: 4px;
  background-color: #F3F5F6;
}

.subscription-picker__select > .row:last-child {
  margin-right: 0;
}

.subscription-picker__select .row.opt--selected {
  border-color: #00c473;
  background-color: #d2fdd4;
}

.subscription-picker__select > .row > .col {
  flex: 1 1 0;
}

.subscription-picker__discount {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 2px 5px;
  color: white;
  font-weight: 700;
  background-color: #538763;
  border-radius: 4px;
  white-space: nowrap;
}

.subscription-picker__benefits {
  padding: 10px 20px;
  background-color: #d2fdd4;
  border-radius: 4px;
  text-align: left;
}

.subscription-picker__benefits p {
  margin: 5px 0px;
}

.subscription-picker__benefits img {
  margin-right: 10px;
}

#upload-photo {
  position: absolute;
  visibility: hidden;
}

.tinventory__button--yes {
  background: rgba(0, 196, 115, 0.2);
}

.tinventory__button--no {
  background: rgba(218, 116, 116, 0.2);
}

.footer {
  padding: 50px 0;
  font-size: 16px;
  width: 100%;
  max-width: 400px;
  color: #767676;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.footer img {
  margin: 0 15px;
}

.footer a {
  color: #767676;
}

@media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  .hide-on-mobile {
    visibility: hidden;
  }
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

@media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  ::-webkit-scrollbar {
    display: none;
  }
  .chat-screen__message,
  .chat-msg {
    margin: 5px 10px 0 10px;
  }
  .logo-holder img {
    width: 87px;
  }
  .chat-icon img {
    margin-right: 0;
  }
  .footer-block__footer {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .footer-block__footer-holder {
    padding-top: 0;
  }
  .footer-block__footer .col {
    margin-top: 40px;
    padding: 0 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .footer-block__copyright img {
    margin: 0 15px;
  }
}