/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
@font-face {
  font-family: "PT Sans";
  font-style: normal;
  font-weight: 400;
  src: url(https://hel1.your-objectstorage.com/habra-adm/ptsans-cyrillic-ext-400.0f057f56689da73daeed.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "PT Sans";
  font-style: normal;
  font-weight: 400;
  src: url(https://hel1.your-objectstorage.com/habra-adm/ptsans-cyrillic-400.9a796c5d2344c7f180b0.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "PT Sans";
  font-style: normal;
  font-weight: 400;
  src: url(https://hel1.your-objectstorage.com/habra-adm/ptsans-latin-ext-400.037e66b65ae550a369a4.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "PT Sans";
  font-style: normal;
  font-weight: 400;
  src: url(https://hel1.your-objectstorage.com/habra-adm/ptsans-latin-400.eaacec0368bd74e64b38.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  src: url(https://hel1.your-objectstorage.com/habra-adm/ptsans-cyrillic-ext-700.d894eb177954a5d7300a.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  src: url(https://hel1.your-objectstorage.com/habra-adm/ptsans-cyrillic-700.0caedc132c7e892eef8c.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  src: url(https://hel1.your-objectstorage.com/habra-adm/ptsans-latin-ext-700.34ae3ded7ef3a51bba6b.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  src: url(https://hel1.your-objectstorage.com/habra-adm/ptsans-latin-700.5873f30370efcacbc359.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-family: "PT Sans", Arial, sans-serif;
  
  --color-bossanova-purple: #382751;
  --color-bossanova-purple-light: rgba(69, 48, 98, .5);
  --color-affair-violet: #754787;
  --color-sheakspeare-blue: #3B9ACC;
  --color-burgundy-red: #710b08;
  --color-milano-red: #bc0f0c;
  --color-christi-green: #47B11A;
  --color-mist-gray: #9c98a2;
  --color-zumthor-blue: #ECF4FF;

  --grid-unit-s: 5px;
  --grid-unit-m: 15px;
  --grid-unit-l: 30px;
  --grid-unit-xl: 50px;
  --grid-unit-xxl: 100px;

  --radius-s: 5px;
  --radius-m: 10px;

  --font-size-xs: 12px;
  --font-size-s: 14px;
  --font-size-m: 16px;
  --font-size-l: 20px;
  --font-size-xl: 30px;
}

html {
  height: 100%;
}

body {
  display: flex;
  font: 14px/1.4 var(--font-family);
  min-height: 100%;
}

#root {
  flex: 1;
}

.logo {
  background: url(https://hel1.your-objectstorage.com/habra-adm/logo.59ee57bec905267a24be.png);
  background-size: cover;
  font-weight: bold;
  height: 54px;
  padding-top: 118px;
  text-align: center;
  width: 240px;
  min-width: 240px;
  position: relative;
}

.logo h1 {
  color: var(--color-milano-red);
  font-size: var(--font-size-l);
  line-height: 1;
}

.logo h2 {
  color: var(--color-sheakspeare-blue);
  font-size: var(--font-size-s);
}

.logo .bug {
  position: absolute;
  left: 23px;
  top: 41px;
}

.footer {
  padding: 0 var(--grid-unit-m) var(--grid-unit-l);
  margin: var(--grid-unit-m) auto 0;
  padding-bottom: var(--grid-unit-m);
  max-width: 940px;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  gap: var(--grid-unit-m);
}

@media only screen and (max-width: 720px) {
  .footer {
    flex-direction: column-reverse;
    align-items: center;
  }
}

.footer-designer {
  background: url(https://hel1.your-objectstorage.com/habra-adm/novosylov.98182bd5fd74514813e4.png) no-repeat 0px 10px;
  color: var(--color-mist-gray);
  float: right;
  padding-left: 29px;
  text-decoration: none;
  transition: opacity 0.3s ease-out;
}

.footer-designer:hover {
  color: #fff;
}

.footer-feedback {
  color: var(--color-mist-gray);
}

.footer-feedback a {
  color: var(--color-mist-gray);
}

.footer-feedback a:hover {
  color: #fff;
}

.button {
  border-radius: var(--radius-m);
  border: none;
  box-shadow: 0px -2px 0px rgba(0, 0, 0, 0.2) inset;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  padding: var(--grid-unit-m);
  text-align: center;
  text-decoration: none;
  transition: background 0.3s;
}

button:disabled {
  filter: saturate(0);
  cursor: not-allowed;
}

.button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.button:focus {
  outline: 0;
}

.button-primary {
  background: var(--color-sheakspeare-blue);
}

.button-primary:hover {
  background: var(--color-sheakspeare-blue);
  filter: saturate(1.5);
}

.button-primary:active {
  background: var(--color-sheakspeare-blue);
  filter: saturate(0.8) contrast(1.5);
  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.2) inset;
}


button:disabled:hover {
  filter: saturate(0);
}
body {
  background: #382751;
}

a {
  transition: color 0.3s ease-out;
}

.members {
  background: var(--color-burgundy-red);
  color: #fff;
  padding: 5px;
  text-align: center;
  width: 130px;
}

.feature:before {
  background-image: url(https://hel1.your-objectstorage.com/habra-adm/features.dd7a043379b5e0d1e16c.png);
  content: '';
  display: block;
}

@media only screen and (max-width: 720px) {
  .feature:before {
    display: none;
  }
}

.feature-description:before {
  height: 100px;
  margin-top: 16px;
  min-width: 88px;
  width: 88px;
  margin: 0 7px;
}

.feature-anonymity:before {
  background-position: -88px 0px;
  height: 118px;
  margin-top: 6px;
  min-width: 105px;
  width: 105px;
}

.feature-gift:before {
  background-position: -193px 0px;
  height: 101px;
  margin-top: -5px;
  min-width: 77px;
  width: 77px;
  margin: 0 14px;
}

.promo {
  margin: var(--grid-unit-xl) auto var(--grid-unit-xxl);
  max-width: 620px;
  padding: 0 var(--grid-unit-m);
}

.promo-welcome {
  color: #fff;
  font-size: var(--font-size-xl);
  text-align: center;
}

.promo-list {
  margin-bottom: var(--grid-unit-xxl);
  margin-top: var(--grid-unit-xl);
  padding: 0 var(--grid-unit-s);
}

.promo-feature {
  color: #fff;
  margin-bottom: 50px;
  display: flex;
  gap: var(--grid-unit-l);
}

.promo-feature h5 {
  font-weight: bold;
  margin-bottom: 10px;
}

.promo-button {
  box-shadow: 0 0 0 10px #48306a, 0 -2px 0 rgba(0, 0, 0, 0.2) inset;
  display: block;
  font-size: var(--font-size-m);
  margin: 10px auto;
  max-width: 280px;
}

.banner {
  padding: var(--grid-unit-l) var(--grid-unit-m) 0;
  margin: 0 auto;
  max-width: 940px;
  position: relative;
}


@media only screen and (max-width: 720px) {
  .banner {
    padding: var(--grid-unit-xl) var(--grid-unit-m) 0;
  }
}

.banner-inner {
  border-bottom: 1px solid #4c3b65;
  padding-bottom: var(--grid-unit-xl);
}

.banner-members {
  position: absolute;
  top: 0;
  right: var(--grid-unit-m);
  border-radius: 0 0 var(--radius-m) var(--radius-m);
}

.banner-logo {
  background: transparent url(https://hel1.your-objectstorage.com/habra-adm/circle.27686d927f7c602e94a4.png);
  height: 175px;
  margin: 0 auto 30px;
  padding: 42px 27px;
  width: 205px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-welcome {
  color: #fff;
  font-size: var(--font-size-xl);
  text-align: center;
  max-width: 500px;
  margin: 0 auto var(--grid-unit-l);
  line-height: 1.2;
}

.banner-button {
  display: block !important;
  font-size: var(--font-size-m);
  margin: 0 auto;
  max-width: 280px;
}

.chat-view {
  height: 295px;
  margin-bottom: var(--grid-unit-s);
  overflow: auto;
}

.chat-message {
  color: var(--color-mist-gray);
  font-size: var(--font-size-xs);
  margin: var(--grid-unit-m) var(--grid-unit-xl) var(--grid-unit-m) 0;
}

.chat-message p {
  background: var(--color-milano-red);
  border-radius: var(--radius-m);
  color: #fff;
  font-size: var(--font-size-m);
  margin-bottom: var(--grid-unit-s);
  padding: var(--grid-unit-m);
  word-wrap: break-word;
}

.chat-message.is-author {
  margin: var(--grid-unit-m) 0 var(--grid-unit-m) var(--grid-unit-xl);
}

.chat-message.is-author p {
  background: var(--color-sheakspeare-blue);
}

.chat-last-visit {
  color: var(--color-mist-gray);
  text-align: center;
}

.chat-input { 
  padding-right: 35px !important;
}

.chat-submit {
  background: url(https://hel1.your-objectstorage.com/habra-adm/chat_input.68e77b8a31728dc80dd5.png) 9px 9px no-repeat !important;
  position: absolute;
  right: 0;
  border: 0;
  background-color: transparent;
  width: 35px;
  height: 38px;
  top: 5px;
  cursor: pointer;
}

.chat-form {
  position: relative;
}
#fullname {
  margin-bottom: 15px;
}

#postcode {
  width: 150px;
  position: relative;
  z-index: 1;
}

#address {
  height: 65px;
}

#country {
  border: 1px solid #ccc;
  border-radius: var(--radius-s);
  background: #fff;
  width: 100%;
  padding: 7px 15px 7px 7px;
  font: 16px/1.4 'PT Sans', Arial, sans-serif;
  margin: 0 0 var(--grid-unit-m);
}

#country:disabled {
  opacity: .7;
}

.receiving {
  background: var(--color-sheakspeare-blue) !important;
  color: #fff !important;
  text-align: center;
  font-size: var(--font-size-m);
}

.receiving img {
  width: 146px;
  height: 125px;
  margin: 20px 0;
}

.receiving h3 {
  font-weight: bold;
  font-size: var(--font-size-l);
  margin-bottom: 10px;
}

.receiving-confirmation {
  line-height: 41px;
  text-align: left;
  margin-top: 37px;
}

.receiving .receiving-confirmation input[type=checkbox] + label {
  background-image: url(https://hel1.your-objectstorage.com/habra-adm/checkbox2.5c093a1a85712e921895.png);
}

.receiving-button {
  background: var(--color-zumthor-blue);
  color: #333;
  float: right;
  font-size: var(--font-size-m);
  line-height: 21px;
  margin-right: 14px;
  transition: none;
}

.receiving-button:after {
  border-bottom: 19px solid transparent;
  border-left: 1em solid var(--color-zumthor-blue);
  border-top: 21px solid transparent;
  content: "";
  margin-left: 8px;
  margin-top: -9px;
  position: absolute;
}

.receiving-button:hover {
  background: #fff;
}

.receiving-button:hover:after {
  border-left: 1em solid #fff;
}

.receiving-button:disabled {
  opacity: .8;
}

.receiving-button:disabled:hover {
  background: var(--color-zumthor-blue);
}

.receiving-button:disabled:after {
  border-left: 1em solid var(--color-zumthor-blue);
}
.header {
  color: #fff;
  padding: var(--grid-unit-m) var(--grid-unit-m) 0;
  margin: 0 auto;
  max-width: 940px;
  display: flex;
  gap: var(--grid-unit-l);
}

@media only screen and (max-width: 720px) {
  .header {
    flex-direction: column;
    align-items: center;
    max-width: 380px;
  }
}

.header-inner {
  padding: var(--grid-unit-m) 0;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media only screen and (max-width: 720px) {
  .header-inner {
    justify-content: center;
    gap: var(--grid-unit-m);
  }
}

.header-usercontrols {
  margin-top: 5px;
  display: flex;
  gap: var(--grid-unit-m);
  order: 2;
}

@media only screen and (max-width: 720px) {
  .header-usercontrols {
    order: 0;
  }
}

.header-counters {
  order: 1;
}

@media only screen and (max-width: 720px) {
  .header-counters {
    justify-content: center;
  }
}

.header-timetable {
  order: 3;
  gap: var(--grid-unit-m);
  display: flex;
  align-items: center;
}

@media only screen and (max-width: 720px) {
  .header-timetable {
    flex-direction: column;
    height: auto;
    gap: 0;
  }
}

.alert {
  background: #fc0;
  padding: 5px;
  text-align: center;
}

.alert a {
  color: #00c;
}

.critical {
  background: #382751;
  bottom: 0;
  color: #fff;
  left: 0;
  padding: 50px 10px;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
}

.counters {
  height: 67px;
  display: flex;
  gap: var(--grid-unit-m);
  flex: 1;
}

.counters li {
  float: left;
  font-size: var(--font-size-m);
  text-align: center;
}

.counters b {
  display: block;
  font-size:var(--font-size-l);
  font-weight: bold;
}

.usercontrols-item {
}

.usercontrols-item a {
  background: url(https://hel1.your-objectstorage.com/habra-adm/buttons.9d90f22cbc2ca5f16cc9.png);
  background-size: 134px;
  display: block;
  height: 44px;
  width: 44px;
}

.usercontrols-source a {
  background-position: 0 44px;
}

.usercontrols-source a:hover {
  background-position: 0 89px;
}

.usercontrols-help a {
  background-position: 89px 44px;
}

.usercontrols-help a:hover {
  background-position: 89px 0;
}

.usercontrols-logout a {
  background-position: 44px 44px;
}

.usercontrols-logout a:hover {
  background-position: 44px 0;
}

.timetable {
  background: var(--color-bossanova-purple-light);
  min-height: 65px;
  display: flex;
  width: 100%;
  border-radius: var(--radius-m);
}

.timetable li {
  float: left;
  padding: var(--grid-unit-m);
}

.timetable b {
  display: block;
  font-weight: bold;
}

.content {
  padding: 0 var(--grid-unit-m);
  margin: 70px auto;
  max-width: 940px;
  display: flex;
  gap: var(--grid-unit-m);
  justify-content: center;
}

@media only screen and (max-width: 720px) {
  .content {
    flex-direction: column;
    align-items: center;
    margin: 20px auto;
  }
}
.card {
  -webkit-perspective: 800px;
  perspective: 800px;
  max-width: 380px;
  width: 100%;
}

.card-heading,
.card-front,
.card-back {
  background: #fff;
  color: #000;
}

.card-heading {
  background-clip: padding-box;
  border-radius: var(--radius-m) var(--radius-m) 0px 0px;
  font-size: var(--font-size-l);
  line-height: 60px;
  text-align: center;
}

.card .chat-counter {
  float: right;
  background: var(--color-milano-red);
  color: #fff;
  height: 16px;
  width: 16px;
  padding: 0;
  font-size: 10px;
  line-height: 15px;
  border-radius: 100%;
  margin-top: -17px;
  position: absolute;
}

.card-body {
  min-height: 380px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 1s;
  transition: transform 1s;
  max-width: 380px;
}

.card-front,
.card-back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 0 0 var(--radius-m) var(--radius-m);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) inset;
  min-height: 380px;
  max-height: 380px;
  padding: var(--grid-unit-m) var(--grid-unit-l);
  position: absolute;
  width: 100%;
  box-sizing: border-box;
}

.card-front {
  z-index: 0;
}

.card-back {
  -ms-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.card-flipped .card-body {
  -ms-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

/* .card-santa {
  margin-left: 80px;
}

.card-giftee {
  margin-left: 480px;
} */

.card-title {
  margin: 0px 42px;
  display: flex;
  gap: var(--grid-unit-s);
  align-items: center;
  justify-content: center;
}

.card-avatar {
  border-radius: var(--radius-s);
  height: 30px;
  margin-right: 6px;
  margin-top: -3px;
  vertical-align: middle;
  width: 30px;
}

.card-banned a {
  color: var(--color-sheakspeare-blue);
  text-decoration: none;
}

.card-banned a:hover {
  text-decoration: underline;
}

.card-banned p {
  font-size: var(--font-size-m);
  margin-bottom: var(--grid-unit-m)
}

.card-stamp {
  background: url(https://hel1.your-objectstorage.com/habra-adm/stamp.dc16ec30075277315875.png);
  color: var(--color-sheakspeare-blue);
  float: right;
  font-size: 8px;
  height: 15px;
  margin-top: 7px;
  padding-left: 126px;
  padding-top: 41px;
  width: 25px;
  position: absolute;
  right: var(--grid-unit-l);
}

.card-decorated {
  background: #fff url(https://hel1.your-objectstorage.com/habra-adm/decorated.ca9c999958060c3c0ba2.png);
}

.card-button {
  background: var(--color-affair-violet);
  font-size: var(--font-size-m);
  width: 100%;
}

.card-button:hover {
  background: var(--color-affair-violet);
  filter: saturate(1.5);
}

.card-button:active {
  background: var(--color-affair-violet);
  filter: saturate(0.8) contrast(1.5);
}


.card-nothing-sent {
  background: var(--color-sheakspeare-blue);
  color: #fff;
  font-size: var(--font-size-l);
  font-weight: bold;
  text-align: center;
}

.card-nothing-sent img {
  display: block;
  height: 138px;
  margin: 65px auto 40px auto;
  width: 138px;
}

.card input[type=checkbox] {
  border: 0;
  clip: rect(0 0 0 0); 
  height: 1px; 
  margin: -1px; 
  overflow: hidden; 
  padding: 0;
  position: absolute; 
  width: 1px; 
}

.card input[type=checkbox] + label {
  background-image: url(https://hel1.your-objectstorage.com/habra-adm/checkbox.c2217a7aaed3d65ba93c.png);
  background-position: 0 0;
  background-repeat: no-repeat;
  cursor: pointer;
  display: inline-block;
  font-size:var(--font-size-m);
  height: 17px;
  line-height: 17px;
  padding-left: 30px;
  vertical-align: middle;
}

.card input[type=checkbox]:checked + label {
  background-position: 0 -17px;
}

.card-happy {
  background: url(https://hel1.your-objectstorage.com/habra-adm/happy-new-year.aded567e0218da3053e5.png) !important;
  background-color: var(--color-christi-green)!important;
  background-size: 380px!important;
  color: #fff !important;
  text-align: center;
}

.card-happy h3 {
  font-size: var(--font-size-xl);
  font-weight: bold;
}

.card-happy a {
  color: #fff;
}

.card-closed {
  color: var(--color-mist-gray);
  padding: 0 0;
  text-align: center;
}

.card-flipper {
  background: #bfbec0 url(https://hel1.your-objectstorage.com/habra-adm/chat.b7cef2ec81987573d6e3.png);
  border: none;
  cursor: pointer;
  float: right;
  height: 17px;
  margin-right: 25px;
  margin-top: 23px;
  width: 17px;
}

.card-flipper::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.card-flipper:focus {
  outline: 0;
}

.card-gift-sent {
  background: var(--color-milano-red) !important;
  color: #fff !important;
  font-size: var(--font-size-m);
  text-align: center;
}

.card-gift-sent img {
  width: 146px;
  height: 125px;
  margin: 20px 0;
}

.card-gift-sent h3 {
  font-weight: bold;
  font-size: var(--font-size-xl);
  margin-bottom: 10px;
  line-height: 1.2;
}

.card-gift-received {
  background: url(https://hel1.your-objectstorage.com/habra-adm/gift_received.3c051cb5bd22d015687e.png) !important;
  background-color: var(--color-milano-red)!important;
  background-size: 380px!important;
  color: #fff !important;
  text-align: center;
}

.card-gift-received h3 {
  font-weight: bold;
  font-size: var(--font-size-xl);
  line-height: 1.2;
}

.card-waiting {
  font-size: var(--font-size-m);
  text-align: center;
}

.card-waiting h3 {
  font-size: var(--font-size-xl);
  font-weight: bold;
  margin: var(--grid-unit-m) 0;
  line-height: 1.2;
}

.card-waiting a {
  color: #fff;
}

.card-danger .card-heading,
.card-danger .card-front/*,
.card-danger .card-back*/ {
  background: var(--color-milano-red);
  color: #fff;
}

label,
input[type='text'],
input[type='number'],
textarea {
  font: 16px/1.4 'PT Sans', Arial, sans-serif;
  box-sizing: border-box;
  resize: none;
}

input[type='text']:focus,
input[type='number']:focus,
textarea:focus {
  outline: 0;
  border: 1px solid var(--color-sheakspeare-blue);
}

input[type='text'],
input[type='number'],
textarea {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: var(--radius-s);
  padding: 7px;
  margin: var(--grid-unit-s) 0;
  width: 100%;
}

input[type='text'].error,
input[type='number'].error,
textarea.error, 
select.error {
  border-color: var(--color-milano-red);
  color: var(--color-milano-red);
}

input[type='text']:disabled,
input[type='number']:disabled,
textarea:disabled {
  opacity: .7;
}

label {
  display: block;
}

.shipping-confirmation {
  line-height: 41px;
}

.shipping-button {
  background: var(--color-milano-red);
  float: right;
  font-size: var(--font-size-m);
  line-height: 21px;
  margin-right: 14px;
  transition: none;
}

.shipping-button:after {
  border-bottom: 19px solid transparent;
  border-left: 1em solid var(--color-milano-red);
  border-top: 21px solid transparent;
  content: "";
  margin-left: 8px;
  margin-top: -9px;
  position: absolute;
}

.shipping-button:hover {
  background: var(--color-milano-red);
  filter: saturate(1.3);
}

.shipping-button:active {
  background: var(--color-milano-red);
  filter: saturate(0.8) contrast(1.5);
}

.shipping-button:hover:after {
  border-left: 1em solid var(--color-milano-red);
}

.profile {
  background: #382751 url(https://hel1.your-objectstorage.com/habra-adm/pattern.1d27bccc874c28f255c6.png);
  background-size: 190px;
  height: 100%;
  box-sizing: border-box;
}

.profile-loading {
  background: rgba(0, 0, 0, 0.8);
  bottom: 0;
  color: #fff;
  font-size: 50px;
  left: 0;
  padding: var(--grid-unit-xxl) 0;
  position: fixed;
  right: 0;
  text-align: center;
  top: 0;
  z-index: 100;
}

.loading {
  min-height: 200px;
  padding-top: var(--grid-unit-xxl);
}

.ripple {
  text-decoration: none;
  color: #fff;
  width: 12px;
  height: 12px;
  background-color: var(--color-bossanova-purple-light);
  margin: 0 auto;
  border-radius: 100%;
  animation: ripple .7s linear infinite;
}

@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 rgba(85, 60, 122, 0.3), 0 0 0 10px rgba(85, 60, 122, 0.3), 0 0 0 30px rgba(85, 60, 122, 0.3), 0 0 0 60px rgba(85, 60, 122, 0.3);
  }

  100% {
    box-shadow: 0 0 0 10px rgba(85, 60, 122, 0.3), 0 0 0 30px rgba(85, 60, 122, 0.3), 0 0 0 60px rgba(85, 60, 122, 0.3), 0 0 0 90px rgba(85, 60, 122, 0);
  }
}