StackExchange - OLD vs NEW CSS styling (stacks.css)

Created Diff never expires
// OLD CSS (stacks.css) retrieved with WAYBACK MACHINE (Jul 16, 2020)
// NEW CSS (stacks.css) (retrived: Aug 29, 2020)


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 {
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;
margin: 0;
padding: 0;
padding: 0;
border: 0;
border: 0;
font: inherit;
font: inherit;
font-size: 100%;
font-size: 100%;
vertical-align: baseline
vertical-align: baseline
}
}


article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display: block
display: block
}
}


body {
body {
line-height: 1
line-height: 1
}
}


ol,ul {
ol,ul {
list-style: none
list-style: none
}
}


blockquote,q {
blockquote,q {
quotes: none
quotes: none
}
}


blockquote:before,blockquote:after,q:before,q:after {
blockquote:before,blockquote:after,q:before,q:after {
content: '';
content: '';
content: none
content: none
}
}


table {
table {
border-collapse: collapse;
border-collapse: collapse;
border-spacing: 0
border-spacing: 0
}
}


sub,sup {
sub,sup {
font-size: 80%;
font-size: 80%;
line-height: 1;
line-height: 1;
vertical-align: sub
vertical-align: sub
}
}


sup {
sup {
vertical-align: super
vertical-align: super
}
}


button {
button {
margin: 0
margin: 0
}
}


.svg-icon,.svg-spot {
.svg-icon,.svg-spot {
vertical-align: bottom
vertical-align: bottom
}
}


.svg-icon:not(.native) *,.svg-spot:not(.native) * {
.svg-icon:not(.native) *,.svg-spot:not(.native) * {
fill: currentColor
fill: currentColor
}
}


.s-avatar {
.s-avatar {
display: inline-block;
display: inline-block;
position: relative;
position: relative;
width: 16px;
width: 16px;
height: 16px;
height: 16px;
border-radius: 3px;
border-radius: 3px;
background-color: #fff;
background-color: #fff;
background-repeat: no-repeat;
background-repeat: no-repeat;
background-size: 100%;
background-size: 100%;
vertical-align: bottom
vertical-align: bottom
}
}


.s-avatar .s-avatar--letter {
.s-avatar .s-avatar--letter {
display: block;
display: block;
color: #fff;
color: #fff;
font-size: 11px;
font-size: 11px;
font-weight: bold;
font-weight: bold;
line-height: 1.4545455;
line-height: 1.4545455;
text-align: center;
text-align: center;
text-transform: uppercase;
text-transform: uppercase;
-webkit-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-ms-user-select: none;
user-select: none
user-select: none
}
}


.s-avatar .s-avatar--badge {
.s-avatar .s-avatar--badge {
position: absolute;
position: absolute;
right: -4px;
right: -4px;
bottom: -4px
bottom: -4px
}
}


.s-avatar .s-avatar--image {
.s-avatar .s-avatar--image {
width: 16px;
width: 16px;
height: 16px;
height: 16px;
border-radius: 3px;
border-radius: 3px;
display: block
display: block
}
}


.s-avatar.s-avatar__24 {
.s-avatar.s-avatar__24 {
width: 24px;
width: 24px;
height: 24px
height: 24px
}
}


.s-avatar.s-avatar__24 .s-avatar--letter {
.s-avatar.s-avatar__24 .s-avatar--letter {
font-size: 16px
font-size: 16px
}
}


.s-avatar.s-avatar__24 .s-avatar--badge {
.s-avatar.s-avatar__24 .s-avatar--badge {
-webkit-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1)
transform: scale(1.1)
}
}


.s-avatar.s-avatar__24 .s-avatar--image {
.s-avatar.s-avatar__24 .s-avatar--image {
width: 24px;
width: 24px;
height: 24px
height: 24px
}
}


.s-avatar.s-avatar__32 {
.s-avatar.s-avatar__32 {
width: 32px;
width: 32px;
height: 32px;
height: 32px;
border-radius: 5px
border-radius: 5px
}
}


.s-avatar.s-avatar__32 .s-avatar--letter {
.s-avatar.s-avatar__32 .s-avatar--letter {
font-size: 22px
font-size: 22px
}
}


.s-avatar.s-avatar__32 .s-avatar--badge {
.s-avatar.s-avatar__32 .s-avatar--badge {
-webkit-transform: scale(1.3);
-webkit-transform: scale(1.3);
transform: scale(1.3)
transform: scale(1.3)
}
}


.s-avatar.s-avatar__32 .s-avatar--image {
.s-avatar.s-avatar__32 .s-avatar--image {
width: 32px;
width: 32px;
height: 32px;
height: 32px;
border-radius: 5px
border-radius: 5px
}
}


.s-avatar.s-avatar__48 {
.s-avatar.s-avatar__48 {
width: 48px;
width: 48px;
height: 48px;
height: 48px;
border-radius: 5px
border-radius: 5px
}
}


.s-avatar.s-avatar__48 .s-avatar--letter {
.s-avatar.s-avatar__48 .s-avatar--letter {
font-size: 34px
font-size: 34px
}
}


.s-avatar.s-avatar__48 .s-avatar--badge {
.s-avatar.s-avatar__48 .s-avatar--badge {
-webkit-transform: scale(1.6);
-webkit-transform: scale(1.6);
transform: scale(1.6)
transform: scale(1.6)
}
}


.s-avatar.s-avatar__48 .s-avatar--image {
.s-avatar.s-avatar__48 .s-avatar--image {
width: 48px;
width: 48px;
height: 48px;
height: 48px;
border-radius: 5px
border-radius: 5px
}
}


.s-avatar.s-avatar__64 {
.s-avatar.s-avatar__64 {
width: 64px;
width: 64px;
height: 64px;
height: 64px;
border-radius: 7px
border-radius: 7px
}
}


.s-avatar.s-avatar__64 .s-avatar--letter {
.s-avatar.s-avatar__64 .s-avatar--letter {
font-size: 44px
font-size: 44px
}
}


.s-avatar.s-avatar__64 .s-avatar--badge {
.s-avatar.s-avatar__64 .s-avatar--badge {
-webkit-transform: scale(2.4);
-webkit-transform: scale(2.4);
transform: scale(2.4)
transform: scale(2.4)
}
}


.s-avatar.s-avatar__64 .s-avatar--image {
.s-avatar.s-avatar__64 .s-avatar--image {
width: 64px;
width: 64px;
height: 64px;
height: 64px;
border-radius: 7px
border-radius: 7px
}
}


.s-avatar.s-avatar__96 {
.s-avatar.s-avatar__96 {
width: 96px;
width: 96px;
height: 96px;
height: 96px;
border-radius: 10px
border-radius: 10px
}
}


.s-avatar.s-avatar__96 .s-avatar--letter {
.s-avatar.s-avatar__96 .s-avatar--letter {
font-size: 66px
font-size: 66px
}
}


.s-avatar.s-avatar__96 .s-avatar--badge {
.s-avatar.s-avatar__96 .s-avatar--badge {
-webkit-transform: scale(3);
-webkit-transform: scale(3);
transform: scale(3)
transform: scale(3)
}
}


.s-avatar.s-avatar__96 .s-avatar--image {
.s-avatar.s-avatar__96 .s-avatar--image {
width: 96px;
width: 96px;
height: 96px;
height: 96px;
border-radius: 10px
border-radius: 10px
}
}


.s-avatar.s-avatar__128 {
.s-avatar.s-avatar__128 {
width: 128px;
width: 128px;
height: 128px;
height: 128px;
border-radius: 14px
border-radius: 14px
}
}


.s-avatar.s-avatar__128 .s-avatar--letter {
.s-avatar.s-avatar__128 .s-avatar--letter {
font-size: 88px
font-size: 88px
}
}


.s-avatar.s-avatar__128 .s-avatar--badge {
.s-avatar.s-avatar__128 .s-avatar--badge {
-webkit-transform: scale(3);
-webkit-transform: scale(3);
transform: scale(3)
transform: scale(3)
}
}


.s-avatar.s-avatar__128 .s-avatar--image {
.s-avatar.s-avatar__128 .s-avatar--image {
width: 128px;
width: 128px;
height: 128px;
height: 128px;
border-radius: 14px
border-radius: 14px
}
}


.s-badge {
.s-badge {
display: inline-flex;
display: inline-flex;
align-content: center;
align-content: center;
justify-content: center;
justify-content: center;
min-width: 0;
min-width: 0;
padding: 0 6px;
padding: 0 6px;
border-width: 1px;
border-width: 1px;
border-style: solid;
border-style: solid;
border-radius: 3px;
border-radius: 3px;
font-size: 12px;
font-size: 12px;
font-weight: normal;
font-weight: normal;
line-height: 2;
line-height: 2;
text-decoration: none;
text-decoration: none;
vertical-align: middle;
vertical-align: middle;
white-space: nowrap;
white-space: nowrap;
border-color: var(--black-100);
border-color: var(--black-100);
background-color: var(--black-050);
background-color: var(--black-050);
color: var(--black-700)
color: var(--black-700)
}
}


.s-badge .s-tag--dismiss {
.s-badge .s-tag--dismiss {
background-color: transparent
background-color: transparent
}
}


a.s-badge:hover {
a.s-badge:hover {
text-decoration: none
text-decoration: none
}
}


.s-badge--image {
.s-badge--image {
display: inline-flex;
display: inline-flex;
align-self: center;
align-self: center;
margin-right: 1px;
margin-right: 1px;
margin-left: -5px
margin-left: -5px
}
}


.s-badge__sm {
.s-badge__sm {
align-self: flex-start;
align-self: flex-start;
padding-right: 4px;
padding-right: 4px;
padding-left: 3px;
padding-left: 3px;
font-size: 11px;
font-size: 11px;
line-height: 1.8
line-height: 1.8
}
}


.s-badge__xs {
align-self: flex-start;
padding-right: 1px;
padding-left: 1px;
font-size: 11px;
line-height: 1.2
}

.s-badge__gold {
.s-badge__gold {
border-color: var(--gold-darker);
border-color: var(--gold-darker);
background-color: var(--gold-lighter);
background-color: var(--gold-lighter);
color: var(--black-700)
color: var(--black-700)
}
}


.s-badge__gold .s-tag--dismiss {
.s-badge__gold .s-tag--dismiss {
background-color: transparent
background-color: transparent
}
}


.s-badge__silver {
.s-badge__silver {
border-color: var(--silver-darker);
border-color: var(--silver-darker);
background-color: var(--silver-lighter);
background-color: var(--silver-lighter);
color: var(--black-700)
color: var(--black-700)
}
}


.s-badge__silver .s-tag--dismiss {
.s-badge__silver .s-tag--dismiss {
background-color: transparent
background-color: transparent
}
}


.s-badge__bronze {
.s-badge__bronze {
border-color: var(--bronze-darker);
border-color: var(--bronze-darker);
background-color: var(--bronze-lighter);
background-color: var(--bronze-lighter);
color: var(--black-700)
color: var(--black-700)
}
}


.s-badge__bronze .s-tag--dismiss {
.s-badge__bronze .s-tag--dismiss {
background-color: transparent
background-color: transparent
}
}


.s-badge__bounty {
.s-badge__bounty {
border-color: transparent;
border-color: transparent;
background-color: var(--blue-600);
background-color: var(--blue-600);
color: var(--white)
color: var(--white)
}
}


.s-badge__bounty .s-tag--dismiss {
.s-badge__bounty .s-tag--dismiss {
background-color: transparent
background-color: transparent
}
}


.s-badge__votes {
.s-badge__votes {
border-color: var(--black-150);
border-color: var(--black-150);
background-color: var(--white);
background-color: var(--white);
color: var(--black-700)
color: var(--black-700)
}
}


.s-badge__votes .s-tag--dismiss {
.s-badge__votes .s-tag--dismiss {
background-color: transparent
background-color: transparent
}
}


.s-badge__answered {
.s-badge__answered {
border-color: transparent;
border-color: transparent;
background-color: var(--green-400);
background-color: var(--green-400);
color: var(--white)
color: var(--white)
}
}


.s-badge__answered .s-tag--dismiss {
.s-badge__answered .s-tag--dismiss {
background-color: transparent
background-color: transparent
}
}


.s-badge__rep {
.s-badge__rep {
border-color: var(--green-400);
border-color: var(--green-400);
background-color: var(--white);
background-color: var(--white);
color: var(--green-500)
color: var(--green-500)
}
}


.s-badge__rep .s-tag--dismiss {
.s-badge__rep .s-tag--dismiss {
background-color: transparent
background-color: transparent
}
}


.s-badge__rep-down {
.s-badge__rep-down {
border-color: var(--red-400);
border-color: var(--red-400);
background-color: var(--white);
background-color: var(--white);
color: var(--red-500)
color: var(--red-500)
}
}


.s-badge__rep-down .s-tag--dismiss {
.s-badge__rep-down .s-tag--dismiss {
background-color: transparent
background-color: transparent
}
}


.s-badge__important {
.s-badge__important {
border-color: transparent;
border-color: transparent;
background-color: var(--red-600);
background-color: var(--red-600);
color: var(--white)
color: var(--white)
}
}


.s-badge__important .s-tag--dismiss {
.s-badge__important .s-tag--dismiss {
background-color: transparent
background-color: transparent
}
}


.s-badge__admin {
border-color: transparent;
background-color: var(--blue-600);
color: var(--white)
}

.s-badge__admin .s-tag--dismiss {
background-color: transparent
}

.s-badge__moderator {
border-color: transparent;
background-color: var(--blue-600);
color: var(--white)
}

.s-badge__moderator .s-tag--dismiss {
background-color: transparent
}

.s-badge__staff {
border-color: transparent;
background-color: var(--orange-400);
color: var(--white)
}

.s-badge__staff .s-tag--dismiss {
background-color: transparent
}

.s-badge__staff--sm {
border-color: transparent;
background-color: var(--orange-400);
color: var(--white)
}

.s-badge__staff--sm .s-tag--dismiss {
background-color: transparent
}

.s-award-bling {
.s-award-bling {
display: flex;
display: flex;
align-items: center;
align-items: center;
color: inherit
color: inherit
}
}


.s-award-bling:before {
.s-award-bling:before {
content: "";
content: "";
margin-right: 4px;
margin-right: 4px;
width: 8px;
width: 8px;
height: 8px;
height: 8px;
border-radius: 100%
border-radius: 100%
}
}


.s-award-bling.s-award-bling__gold:before {
.s-award-bling.s-award-bling__gold:before {
background-color: var(--gold)
background-color: var(--gold)
}
}


.s-award-bling.s-award-bling__silver:before {
.s-award-bling.s-award-bling__silver:before {
background-color: var(--silver)
background-color: var(--silver)
}
}


.s-award-bling.s-award-bling__bronze:before {
.s-award-bling.s-award-bling__bronze:before {
background-color: var(--bronze)
background-color: var(--bronze)
}
}


.s-empty-state {
.s-empty-state {
color: var(--fc-light);
color: var(--fc-light);
text-align: center;
text-align: center;
margin-left: auto;
margin-left: auto;
margin-right: auto
margin-right: auto
}
}


.s-empty-state p {
.s-empty-state p {
font-size: 13px;
font-size: 13px;
margin-bottom: 12px
margin-bottom: 12px
}
}


.s-empty-state p strong {
.s-empty-state p strong {
color: var(--fc-dark)
color: var(--fc-dark)
}
}


.s-breadcrumbs {
.s-breadcrumbs {
display: flex;
display: flex;
flex-wrap: wrap;
flex-wrap: wrap;
align-items: start;
align-items: start;
color: var(--black-150);
color: var(--black-150);
font-size: 12px
font-size: 12px
}
}


.s-breadcrumbs .s-breadcrumbs--item {
.s-breadcrumbs .s-breadcrumbs--item {
display: flex;
display: flex;
flex-wrap: nowrap;
flex-wrap: nowrap;
margin-top: 2px;
margin-top: 2px;
margin-bottom: 2px
margin-bottom: 2px
}
}


.s-breadcrumbs .s-breadcrumbs--divider {
.s-breadcrumbs .s-breadcrumbs--divider {
margin-right: 4px;
margin-right: 4px;
margin-left: 4px
margin-left: 4px
}
}


@media (max-width: 640px) {
@media (max-width: 640px) {
html.html__responsive:not(.html__unpinned-leftnav) .s-breadcrumbs .s-breadcrumbs--divider {
html.html__responsive:not(.html__unpinned-leftnav) .s-breadcrumbs .s-breadcrumbs--divider {
margin-right:2px;
margin-right:2px;
margin-left: 2px
margin-left: 2px
}
}
}
}


@media (max-width: 640px) {
@media (max-width: 640px) {
html.html__responsive.html__unpinned-leftnav .s-breadcrumbs .s-breadcrumbs--divider {
html.html__responsive.html__unpinned-leftnav .s-breadcrumbs .s-breadcrumbs--divider {
margin-right:2px;
margin-right:2px;
margin-left: 2px
margin-left: 2px
}
}
}
}


.s-breadcrumbs .s-breadcrumbs--link {
.s-breadcrumbs .s-breadcrumbs--link {
color: var(--black-350)
color: var(--black-350)
}
}


.s-breadcrumbs .s-breadcrumbs--link:hover {
.s-breadcrumbs .s-breadcrumbs--link:hover {
color: var(--black-600)
color: var(--black-600)
}
}


.s-btn-group {
.s-btn-group {
display: flex;
display: flex;
flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 1px
margin-bottom: 1px
}
}


.s-btn-group .s-btn {
.s-btn-group .s-btn {
margin-bottom: -1px;
margin-bottom: -1px;
white-space: nowrap
white-space: nowrap
}
}


.s-btn-group .s-btn:not(:last-child) {
.s-btn-group .s-btn:not(:last-child) {
margin-right: -1px
margin-right: -1px
}
}


.s-btn-group .s-btn:not(:first-child):not(:last-child) {
.s-btn-group .s-btn:not(:first-child):not(:last-child) {
border-radius: 0
border-radius: 0
}
}


.s-btn-group .s-btn:first-child:not(:only-child) {
.s-btn-group .s-btn:first-child:not(:only-child) {
border-top-right-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0
border-bottom-right-radius: 0
}
}


.s-btn-group .s-btn:last-child:not(:only-child) {
.s-btn-group .s-btn:last-child:not(:only-child) {
border-top-left-radius: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0
border-bottom-left-radius: 0
}
}


.s-btn-group .s-btn.is-selected {
.s-btn-group .s-btn.is-selected {
z-index: 25
z-index: 25
}
}


.s-btn-group .s-btn:active {
.s-btn-group .s-btn:active {
z-index: 30
z-index: 30
}
}


@media (max-width: 640px) {
@media (max-width: 640px) {
html.html__responsive:not(.html__unpinned-leftnav) .s-btn-group .s-btn {
html.html__responsive:not(.html__unpinned-leftnav) .s-btn-group .s-btn {
padding-left:.4em;
padding-left:.4em;
padding-right: .4em
padding-right: .4em
}
}
}
}


@media (max-width: 640px) {
@media (max-width: 640px) {
html.html__responsive.html__unpinned-leftnav .s-btn-group .s-btn {
html.html__responsive.html__unpinned-leftnav .s-btn-group .s-btn {
padding-left:.4em;
padding-left:.4em;
padding-right: .4em
padding-right: .4em
}
}
}
}


@media (max-width: 640px) {
@media (max-width: 640px) {
html.html__responsive:not(.html__unpinned-leftnav) .s-btn-group .s-btn.s-btn__dropdown {
html.html__responsive:not(.html__unpinned-leftnav) .s-btn-group .s-btn.s-btn__dropdown {
padding-right:1.2em
padding-right:1.2em
}
}


html.html__responsive:not(.html__unpinned-leftnav) .s-btn-group .s-btn.s-btn__dropdown:after {
html.html__responsive:not(.html__unpinned-leftnav) .s-btn-group .s-btn.s-btn__dropdown:after {
right: .4em
right: .4em
}
}
}
}


@media (max-width: 640px) {
@media (max-width: 640px) {
html.html__responsive.html__unpinned-leftnav .s-btn-group .s-btn.s-btn__dropdown {
html.html__responsive.html__unpinned-leftnav .s-btn-group .s-btn.s-btn__dropdown {
padding-right:1.2em
padding-right:1.2em
}
}


html.html__responsive.html__unpinned-leftnav .s-btn-group .s-btn.s-btn__dropdown:after {
html.html__responsive.html__unpinned-leftnav .s-btn-group .s-btn.s-btn__dropdown:after {
right: .4em
right: .4em
}
}
}
}


.s-btn-group .s-btn-group--container {
.s-btn-group .s-btn-group--container {
display: flex
display: flex
}
}


.s-btn-group .s-btn-group--container .s-btn {
.s-btn-group .s-btn-group--container .s-btn {
margin-right: -1px
margin-right: -1px
}
}


.s-btn-group .s-btn-group--container:not(:first-child):not(:last-child) .s-btn {
.s-btn-group .s-btn-group--container:not(:first-child):not(:last-child) .s-btn {
border-radius: 0
border-radius: 0
}
}


.s-btn-group .s-btn-group--container:first-child .s-btn {
.s-btn-group .s-btn-group--container:first-child .s-btn {
border-top-right-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
margin-left: 0
margin-left: 0
}
}


.s-btn-group .s-btn-group--container:last-child .s-btn {
.s-btn-group .s-btn-group--container:last-child .s-btn {
border-top-left-radius: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0
border-bottom-left-radius: 0
}
}


.s-card {
.s-card {
padding: 12px;
padding: 12px;
border: 1px solid var(--black-100);
border: 1px solid var(--black-100);
border-radius: 3px;
border-radius: 3px;
background-color: var(--white)
background-color: var(--white)
}
}


.s-card p:last-of-type {
.s-card p:last-of-type {
margin-bottom: 0
margin-bottom: 0
}
}


a.s-card:not(.s-card__muted):hover,a.s-card:not(.s-card__muted):focus,a.s-card:not(.s-card__muted):active {
a.s-card:not(.s-card__muted):hover,a.s-card:not(.s-card__muted):focus,a.s-card:not(.s-card__muted):active {
border-color: var(--black-200)
border-color: var(--black-200)
}
}


.s-card__muted {
.s-card__muted {
border-color: var(--black-075)
border-color: var(--black-075)
}
}


.s-card__muted>* {
.s-card__muted>* {
opacity: .65
opacity: .65
}
}


pre.s-code-block {
font-size: 13px;
font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,sans-serif;
line-height: 1.30769231;
color: var(--highlight-color);
background-color: var(--highlight-bg);
border-radius: 5px;
max-height: 24rem;
margin: 0;
padding: 8px 12px;
overflow: auto;
scrollbar-color: var(--scrollbar) transparent
}

pre.s-code-block::-webkit-scrollbar {
width: 10px;
height: 10px;
background-color: transparent
}

pre.s-code-block::-webkit-scrollbar-track {
border-radius: 10px;
background-color: transparent
}

pre.s-code-block::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: var(--scrollbar)
}

pre.s-code-block::-webkit-scrollbar-corner {
background-color: transparent;
border-color: transparent
}

pre.s-code-block>code,code[class*="language-"] {
font-family: inherit
}

pre.s-code-block>code .hljs-subst,code[class*="language-"] .hljs-subst {
color: var(--highlight-color)
}

pre.s-code-block>code .hljs-comment,code[class*="language-"] .hljs-comment {
color: var(--highlight-comment)
}

pre.s-code-block>code .hljs-keyword,code[class*="language-"] .hljs-keyword,pre.s-code-block>code .hljs-selector-tag,code[class*="language-"] .hljs-selector-tag,pre.s-code-block>code .hljs-meta-keyword,code[class*="language-"] .hljs-meta-keyword,pre.s-code-block>code .hljs-doctag,code[class*="language-"] .hljs-doctag,pre.s-code-block>code .hljs-section,code[class*="language-"] .hljs-section {
color: var(--highlight-keyword)
}

pre.s-code-block>code .hljs-attr,code[class*="language-"] .hljs-attr {
color: var(--highlight-attribute)
}

pre.s-code-block>code .hljs-attribute,code[class*="language-"] .hljs-attribute {
color: var(--highlight-symbol)
}

pre.s-code-block>code .hljs-name,code[class*="language-"] .hljs-name,pre.s-code-block>code .hljs-type,code[class*="language-"] .hljs-type,pre.s-code-block>code .hljs-number,code[class*="language-"] .hljs-number,pre.s-code-block>code .hljs-selector-id,code[class*="language-"] .hljs-selector-id,pre.s-code-block>code .hljs-quote,code[class*="language-"] .hljs-quote,pre.s-code-block>code .hljs-template-tag,code[class*="language-"] .hljs-template-tag {
color: var(--highlight-namespace)
}

pre.s-code-block>code .hljs-selector-class,code[class*="language-"] .hljs-selector-class {
color: var(--highlight-keyword)
}

pre.s-code-block>code .hljs-string,code[class*="language-"] .hljs-string,pre.s-code-block>code .hljs-regexp,code[class*="language-"] .hljs-regexp,pre.s-code-block>code .hljs-symbol,code[class*="language-"] .hljs-symbol,pre.s-code-block>code .hljs-variable,code[class*="language-"] .hljs-variable,pre.s-code-block>code .hljs-template-variable,code[class*="language-"] .hljs-template-variable,pre.s-code-block>code .hljs-link,code[class*="language-"] .hljs-link,pre.s-code-block>code .hljs-selector-attr,code[class*="language-"] .hljs-selector-attr {
color: var(--highlight-variable)
}

pre.s-code-block>code .hljs-meta,code[class*="language-"] .hljs-meta,pre.s-code-block>code .hljs-selector-pseudo,code[class*="language-"] .hljs-selector-pseudo {
color: var(--highlight-keyword)
}

pre.s-code-block>code .hljs-built_in,code[class*="language-"] .hljs-built_in,pre.s-code-block>code .hljs-title,code[class*="language-"] .hljs-title,pre.s-code-block>code .hljs-literal,code[class*="language-"] .hljs-literal {
color: var(--highlight-literal)
}

pre.s-code-block>code .hljs-bullet,code[class*="language-"] .hljs-bullet,pre.s-code-block>code .hljs-code,code[class*="language-"] .hljs-code {
color: var(--highlight-punctuation)
}

pre.s-code-block>code .hljs-meta-string,code[class*="language-"] .hljs-meta-string {
color: var(--highlight-variable)
}

pre.s-code-block>code .hljs-deletion,code[class*="language-"] .hljs-deletion {
color: var(--highlight-deletion)
}

pre.s-code-block>code .hljs-addition,code[class*="language-"] .hljs-addition {
color: var(--highlight-addition)
}

pre.s-code-block>code .hljs-emphasis,code[class*="language-"] .hljs-emphasis {
font-style: italic
}

pre.s-code-block>code .hljs-strong,code[class*="language-"] .hljs-strong {
font-weight: bold
}

.s-expandable {
.s-expandable {
display: flex;
display: flex;
-webkit-clip-path: polygon(-1000000px -1000000px, 1000000px -1000000px, 1000000px 1000000px, -1000000px 1000000px);
-webkit-clip-path: polygon(-1000000px -1000000px, 1000000px -1000000px, 1000000px 1000000px, -1000000px 1000000px);
clip-path: polygon(-1000000px -1000000px, 1000000px -1000000px, 1000000px 1000000px, -1000000px 1000000px);
clip-path: polygon(-1000000px -1000000px, 1000000px -1000000px, 1000000px 1000000px, -1000000px 1000000px);
align-items: flex-start;
align-items: flex-start;
transition: clip-path 0s 100ms,-webkit-clip-path 0s 100ms
transition: clip-path 0s 100ms,-webkit-clip-path 0s 100ms
}
}


.s-expandable:after {
.s-expandable:after {
content: '';
content: '';
-ms-flex-preferred-size: 0;
-ms-flex-preferred-size: 0;
flex-basis: 0;
flex-basis: 0;
height: 10px;
height: 10px;
max-height: 0px;
max-height: 0px;
transition: height 100ms linear,max-height 0s 100ms linear
transition: height 100ms linear,max-height 0s 100ms linear
}
}


.s-expandable--content {
.s-expandable--content {
-ms-flex-preferred-size: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
flex-basis: 100%;
max-height: 1000000px;
max-height: 1000000px;
margin-bottom: 0;
margin-bottom: 0;
-webkit-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
transform-origin: 0 0;
transition: margin-bottom 100ms cubic-bezier(0, 0, 0, 1),transform 100ms cubic-bezier(1, 0, 1, 1),opacity 100ms cubic-bezier(1, 0, 1, 1)
transition: margin-bottom 100ms cubic-bezier(0, 0, 0, 1),transform 100ms cubic-bezier(1, 0, 1, 1),opacity 100ms cubic-bezier(1, 0, 1, 1)
}
}


.s-expandable:not(.is-expanded) {
.s-expandable:not(.is-expanded) {
overflow: hidden;
overflow: hidden;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
transition: none
transition: none
}
}


.s-expandable:not(.is-expanded) .s-expandable--content {
.s-expandable:not(.is-expanded) .s-expandable--content {
visibility: hidden;
visibility: hidden;
max-height: 0;
max-height: 0;
margin-bottom: -1500px;
margin-bottom: -1500px;
opacity: 0;
opacity: 0;
-webkit-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
transform: scaleY(0);
transition: margin-bottom 100ms cubic-bezier(1, 0, 1, 1),visibility 0s 100ms,max-height 0s 100ms,transform 100ms cubic-bezier(0, 1, 1, 1),opacity 100ms cubic-bezier(0, 1, 1, 1)
transition: margin-bottom 100ms cubic-bezier(1, 0, 1, 1),visibility 0s 100ms,max-height 0s 100ms,transform 100ms cubic-bezier(0, 1, 1, 1),opacity 100ms cubic-bezier(0, 1, 1, 1)
}
}


@supports ((-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)) or (clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%))) {
@supports ((-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)) or (clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%))) {
.s-expandable:not(.is-expanded) .s-expandable--content {
.s-expandable:not(.is-expanded) .s-expandable--content {
opacity:1;
opacity:1;
-webkit-transform: none;
-webkit-transform: none;
transform: none
transform: none
}
}
}
}


.s-expandable:not(.is-expanded):after {
.s-expandable:not(.is-expanded):after {
height: 0;
height: 0;
max-height: 10px;
max-height: 10px;
transition: height 100ms linear
transition: height 100ms linear
}
}


.s-input,.s-textarea {
.s-input,.s-textarea {
-webkit-appearance: none;
-webkit-appearance: none;
width: 100%;
width: 100%;
margin: 0;
margin: 0;
padding: .6em .7em;
padding: .6em .7em;
border: 1px solid var(--black-200);
border: 1px solid var(--black-200);
border-radius: 3px;
border-radius: 3px;
background-color: var(--white);
background-color: var(--white);
color: var(--fc-dark);
color: var(--fc-dark);
font-size: 13px;
font-size: 13px;
font-family: inherit;
font-family: inherit;
line-height: 1.15384615;
line-height: 1.15384615;
scrollbar-color: var(--scrollbar) transparent
scrollbar-color: var(--scrollbar) transparent
}
}


@supports (-webkit-overflow-scrolling: touch) {
@supports (-webkit-overflow-scrolling: touch) {
.s-input,.s-textarea {
.s-input,.s-textarea {
font-size: 16px;
font-size: 16px;
padding: .36em .55em
padding: .36em .55em
}
}


.s-input::-webkit-input-placeholder,.s-textarea::-webkit-input-placeholder {
.s-input::-webkit-input-placeholder,.s-textarea::-webkit-input-placeholder {
line-height: normal !important
line-height: normal !important
}
}
}
}


.s-input::-webkit-input-placeholder,.s-textarea::-webkit-input-placeholder {
.s-input::-webkit-input-placeholder,.s-textarea::-webkit-input-placeholder {
color: var(--black-200)
color: var(--black-200)
}
}


.s-input::-ms-input-placeholder,.s-textarea::-ms-input-placeholder {
.s-input::-ms-input-placeholder,.s-textarea::-ms-input-placeholder {
color: var(--black-200)
color: var(--black-200)
}
}


.s-input::placeholder,.s-textarea::placeholder {
.s-input::placeholder,.s-textarea::placeholder {
color: var(--black-200)
color: var(--black-200);
opacity: 1
}
}


.s-input::-ms-clear,.s-textarea::-ms-clear {
.s-input::-ms-clear,.s-textarea::-ms-clear {
display: none
display: none
}
}


.s-input::-webkit-scrollbar,.s-textarea::-webkit-scrollbar {
.s-input::-webkit-scrollbar,.s-textarea::-webkit-scrollbar {
width: 10px;
width: 10px;
height: 10px;
height: 10px;
background-color: transparent
background-color: transparent
}
}


.s-input::-webkit-scrollbar-track,.s-textarea::-webkit-scrollbar-track {
.s-input::-webkit-scrollbar-track,.s-textarea::-webkit-scrollbar-track {
border-radius: 10px;
border-radius: 10px;
background-color: transparent
background-color: transparent
}
}


.s-input::-webkit-scrollbar-thumb,.s-textarea::-webkit-scrollbar-thumb {
.s-input::-webkit-scrollbar-thumb,.s-textarea::-webkit-scrollbar-thumb {
border-radius: 10px;
border-radius: 10px;
background-color: var(--scrollbar)
background-color: var(--scrollbar)
}
}


.s-input::-webkit-scrollbar-corner,.s-textarea::-webkit-scrollbar-corner {
.s-input::-webkit-scrollbar-corner,.s-textarea::-webkit-scrollbar-corner {
background-color: transparent;
background-color: transparent;
border-color: transparent
border-color: transparent
}
}


.s-input::-webkit-contacts-auto-fill-button,.s-textarea::-webkit-contacts-auto-fill-button {
background-color: var(--black)
}

.s-input:-webkit-autofill,.s-textarea:-webkit-autofill {
border-color: var(--blue-300);
-webkit-text-fill-color: var(--black);
-webkit-box-shadow: 0 0 0 1000px var(--blue-050) inset;
transition: background-color 0s 50000s
}

.s-input:-webkit-autofill:focus,.s-textarea:-webkit-autofill:focus {
border-color: var(--blue-300);
-webkit-box-shadow: 0 0 0 1000px var(--blue-050) inset,0 0 0 4px var(--focus-ring)
}

.s-input.s-input__search,.s-input.s-input__creditcard {
.s-input.s-input__search,.s-input.s-input__creditcard {
padding-left: 32px
padding-left: 32px
}
}


fieldset {
fieldset {
min-width: 0;
min-width: 0;
padding: 0;
padding: 0;
border: 0
border: 0
}
}


.s-label {
.s-label {
padding: 0 2px;
padding: 0 2px;
color: var(--fc-dark);
color: var(--fc-dark);
font-family: inherit;
font-family: inherit;
font-size: 1.15384615rem;
font-size: 1.15384615rem;
font-weight: 700;
font-weight: 700;
cursor: pointer
cursor: pointer
}
}


legend.s-label {
legend.s-label {
cursor: default
cursor: default
}
}


.s-label--status {
.s-label--status {
margin-left: 4px;
margin-left: 4px;
padding: 2px 8px;
padding: 2px 8px;
border-radius: 1000px;
border-radius: 1000px;
background-color: var(--black-050);
background-color: var(--black-050);
color: var(--fc-medium);
color: var(--fc-medium);
font-size: 12px;
font-size: 12px;
font-weight: 400;
font-weight: 400;
vertical-align: text-bottom
vertical-align: text-bottom
}
}


.s-label--status.s-label--status__required {
.s-label--status.s-label--status__required {
background-color: var(--red-100);
background-color: var(--red-100);
color: var(--red-600)
color: var(--red-600)
}
}


.s-label--status.s-label--status__new {
.s-label--status.s-label--status__new {
background-color: var(--green-100);
background-color: var(--green-100);
color: var(--green-700)
color: var(--green-700)
}
}


.s-label--status.s-label--status__beta {
.s-label--status.s-label--status__beta {
background-color: var(--blue-100);
background-color: var(--blue-100);
color: var(--blue-700)
color: var(--blue-700)
}
}


.s-description {
.s-description {
padding: 0 2px;
padding: 0 2px;
color: var(--fc-medium);
color: var(--fc-medium);
font-size: 12px
font-size: 12px
}
}


.s-label .s-description,.s-label .s-input-message {
.s-label .s-description,.s-label .s-input-message {
padding: 0;
padding: 0;
margin-top: 4px;
margin-top: 4px;
margin-bottom: 0;
margin-bottom: 0;
font-weight: normal
font-weight: normal
}
}


.s-input-fill {
.s-input-fill {
padding: .6em .7em;
padding: .6em .7em;
border: 1px solid var(--black-200);
border: 1px solid var(--black-200);
border-right-width: 0;
border-right-width: 0;
border-left-width: 0;
border-left-width: 0;
background-color: var(--black-050);
background-color: var(--black-050);
color: var(--fc-medium);
color: var(--fc-medium);
font-family: inherit;
font-family: inherit;
white-space: nowrap;
white-space: nowrap;
line-height: 1.15384615
line-height: 1.15384615
}
}


.s-input-fill.s-input-fill__clear {
.s-input-fill.s-input-fill__clear {
border-color: transparent;
border-color: transparent;
background-color: transparent
background-color: transparent
}
}


.s-input-fill.order-first {
.s-input-fill.order-first {
border-left-width: 1px;
border-left-width: 1px;
border-top-left-radius: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px
border-bottom-left-radius: 3px
}
}


.s-input-fill.order-last {
.s-input-fill.order-last {
border-right-width: 1px;
border-right-width: 1px;
border-top-right-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px
border-bottom-right-radius: 3px
}
}


.s-select {
.s-select {
position: relative;
position: relative;
color: var(--fc-dark)
color: var(--fc-dark)
}
}


.s-select:before,.s-select:after {
.s-select:before,.s-select:after {
content: "";
content: "";
position: absolute;
position: absolute;
z-index: 25;
z-index: 25;
right: 13px;
right: 13px;
border-color: currentColor transparent;
border-color: currentColor transparent;
border-style: solid;
border-style: solid;
border-width: 4px;
border-width: 4px;
pointer-events: none
pointer-events: none
}
}


.s-select:before {
.s-select:before {
top: calc(50% - 5px);
top: calc(50% - 5px);
border-top-width: 0;
border-top-width: 0;
border-bottom-width: 4px
border-bottom-width: 4px
}
}


.s-select:after {
.s-select:after {
top: calc(50% + 1px);
top: calc(50% + 1px);
border-top-width: 4px;
border-top-width: 4px;
border-bottom-width: 0
border-bottom-width: 0
}
}


.s-select>select {
.s-select>select {
-webkit-appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
-moz-appearance: none;
appearance: none;
appearance: none;
position: relative;
position: relative;
width: 100%;
width: 100%;
height: 100%;
height: 100%;
padding: .6em .7em;
padding: .6em .7em;
padding-right: 32px;
padding-right: 32px;
border: 1px solid var(--black-200);
border: 1px solid var(--black-200);
border-radius: 3px;
border-radius: 3px;
background-color: var(--white);
background-color: var(--white);
outline: 0;
outline: 0;
font-size: 13px;
font-size: 13px;
font-family: inherit;
font-family: inherit;
color: var(--black);
color: var(--black);
line-height: 1.15384615
line-height: 1.15384615
}
}


.s-select>select::-moz-focus-inner {
.s-select>select::-moz-focus-inner {
outline: none !important
outline: none !important
}
}


.s-select>select:-moz-focusring {
.s-select>select:-moz-focusring {
color: transparent;
color: transparent;
text-shadow: 0 0 0 #000
text-shadow: 0 0 0 #000
}
}


.s-select>select::-ms-expand {
.s-select>select::-ms-expand {
display: none
display: none
}
}


@supports (-webkit-overflow-scrolling: touch) {
@supports (-webkit-overflow-scrolling: touch) {
.s-select>select {
.s-select>select {
font-size: 16px;
font-size: 16px;
padding: .4em .55em
padding: .4em .55em
}
}
}

.s-select>select::-webkit-contacts-auto-fill-button {
background-color: var(--black)
}

.s-select>select:-webkit-autofill {
border-color: var(--blue-300);
-webkit-text-fill-color: var(--black);
-webkit-box-shadow: 0 0 0 1000px var(--blue-050) inset;
transition: background-color 0s 50000s
}

.s-select>select:-webkit-autofill:focus {
border-color: var(--blue-300);
-webkit-box-shadow: 0 0 0 1000px var(--blue-050) inset,0 0 0 4px var(--focus-ring)
}
}


@supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
@supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
.s-checkbox,.s-radio {
.s-checkbox,.s-radio {
-webkit-appearance:none;
-webkit-appearance:none;
-moz-appearance: none;
-moz-appearance: none;
appearance: none;
appearance: none;
margin: 0;
margin: 0;
width: 1em;
width: 1em;
height: 1em;
height: 1em;
border: 1px solid var(--black-200);
border: 1px solid var(--black-200);
background-color: var(--white);
background-color: var(--white);
outline: 0;
outline: 0;
font-size: inherit;
font-size: inherit;
vertical-align: middle;
vertical-align: middle;
cursor: pointer
cursor: pointer
}
}


.s-checkbox::-ms-check,.s-radio::-ms-check {
.s-checkbox::-ms-check,.s-radio::-ms-check {
display: none
display: none
}
}
}
}


.s-checkbox[disabled],.s-radio[disabled] {
.s-checkbox[disabled],.s-radio[disabled] {
opacity: .5;
opacity: .5;
cursor: not-allowed
cursor: not-allowed
}
}


@supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
@supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
.s-checkbox {
.s-checkbox {
border-radius:3px;
border-radius:3px;
background-position: center center;
background-position: center center;
background-repeat: no-repeat;
background-repeat: no-repeat;
background-size: contain
background-size: contain
}
}


.s-checkbox[disabled] {
.s-checkbox[disabled] {
border-color: var(--black-200);
border-color: var(--black-200);
background-color: var(--black-075)
background-color: var(--black-075)
}
}


.s-checkbox:checked {
.s-checkbox:checked {
border-color: var(--blue-500) !important;
border-color: var(--blue-500) !important;
background-color: var(--blue-500);
background-color: var(--blue-500);
background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='%23fff'/%3E%3C/svg%3E")
background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='%23fff'/%3E%3C/svg%3E")
}
}


.s-checkbox:checked:focus {
.s-checkbox:checked:focus {
border-color: var(--blue-500)
border-color: var(--blue-500)
}
}


.s-checkbox:checked[disabled] {
.s-checkbox:checked[disabled] {
border-color: var(--black-500) !important;
border-color: var(--black-500) !important;
background-color: var(--black-400)
background-color: var(--black-400)
}
}


.s-checkbox:focus {
.s-checkbox:focus {
border-color: var(--blue-300);
border-color: var(--blue-300);
box-shadow: 0 0 0 4px var(--focus-ring)
b
}
}

@supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
.s-radio {
border-radius:50%
}

.s-radio:checked {
border-color: var(--blue-500);
border-width: .30769231em;
background-color: #fff
}

.s-radio:focus {
box-shadow: 0 0 0 4px var(--focus-ring)
}
}

.s-input:focus,.s-input.has-focus,.s-textarea:focus,.s-select>select:focus {
border-color: var(--blue-300);
box-shadow: 0 0 0 4px var(--focus-ring);
outline: 0
}

.s-input:focus-within {
border-color: var(--blue-300);
box-shadow: 0 0 0 4px var(--focus-ring);
outline: 0
}

.s-input[disabled],.s-textarea[disabled],.s-select>select[disabled],.s-input[read-only],.s-textarea[read-only],.s-select>select[read-only] {
border-color: var(--black-075);
background-color: var(--black-050);
color: var(--black-200)
}

.s-input[disabled],.s-textarea[disabled],.s-select>select[disabled] {
cursor: not-allowed
}

.is-disabled,.has-success,.has-error,.has-warning {
position: relative
}

.is-disabled .s-input,.has-success .s-input,.has-error .s-input,.has-warning .s-input {
padding-right: 32px
}

.is-disabled .s-select .s-input-icon,.has-success .s-select .s-input-icon,.has-error .s-select .s-input-icon,.has-warning .s-select .s-input-icon {
right: 32px
}

.is-disabled .s-textarea,.has-success .s-textarea,.has-error .s-textarea,.has-warning .s-textarea {
padding-right: 48px
}

.is-disabled .s-textarea~.s-input-icon,.has-success .s-textarea~.s-input-icon,.has-error .s-textarea~.s-input-icon,.has-warning .s-textarea~.s-input-icon {
top: 1.5em
}

.is-disabled .s-input-message a,.has-success .s-input-message a,.has-error .s-input-message a,.has-warning .s-input-message a {
text-decoration: underline
}

.has-warning .s-input,.has-warning .s-textarea,.has-warning .s-checkbox,.has-warning .s-radio:not(:checked),.has-warning .s-select>select {
border-color: var(--yellow-600)
}

.has-warning .s-input:focus,.has-warning .s-textarea:focus,.has-warning .s-checkbox:focus,.has-warning .s-radio:not(:checked):focus,.has-warning .s-select>select:focus {
box-shadow: 0 0 0 4px var(--focus-ring-warning)
}

.has-warning .s-input-message {
color: var(--yellow-800)
}

.has-warning .s-input-message a {
color: var(--yellow-900)
}

.has-warning .s-input-icon {
color: var(--yellow-600)
}

.has-error .s-input,.has-error .s-textarea,.has-error .s-checkbox,.has-error .s-radio:not(:checked),.has-error .s-select>select {
border-color: var(--red-400)
}

.has-error .s-input:focus,.has-error .s-textarea:focus,.has-error .s-checkbox:focus,.has-error .s-radio:not(:checked):focus,.has-error .s-select>select:focus {
box-shadow: 0 0 0 4px var(--focus-ring-error)
}

.has-error .s-input-message {
color: var(--red-500)
}

.has-error .s-input-message a {
color: var(--red-800)
}

.has-error .s-input-message a:hover {
color: var(--red-900)
}

.has-error .s-input-icon {
color: var(--red-400)
}

.has-success .s-input,.has-success .s-textarea,.has-success .s-checkbox,.has-success .s-radio:not(:checked),.has-success .s-select>select {
border-color: var(--green-400)
}

.has-success .s-input:focus,.has-success .s-textarea:focus,.has-success .s-checkbox:focus,.has-success .s-radio:not(:checked):focus,.has-success .s-select>select:focus {
box-shadow: 0 0 0 4px var(--focus-ring-success)
}

.has-success .s-input-message {
color: var(--green-500)
}

.has-success .s-input-message a {
color: var(--green-800)
}

.has-success .s-input-message a:hover {
color: var(--green-900)
}

.has-success .s-input-icon {
color: var(--green-400)
}

.is-disabled .s-select:before,.is-disabled .s-select:after {
border-color: var(--black-200) transparent
}

.is-disabled .s-label,.is-disabled .s-description {
opacity: .5
}

.is-disabled .s-input-icon {
color: var(--black-200)
}

.is-disabled .s-label {
cursor: not-allowed
}

.s-input-icon {
position: absolute;
top: 50%;
right: .7em;
margin-top: -9px;
pointer-events: none
}

.s-input-icon.s-input-icon__search,.s-input-icon.s-input-icon__creditcard {
right: auto;
left: .7em;
color: var(--black-200)
}

.s-input-message {
padding: 2px;
font-size: 12px
}

.s-input__sm,.s-textarea__sm,.s-label__sm,.s-select__sm>select {
font-size: 12px
}

.s-input__md,.s-textarea__md,.s-label__md,.s-select__md>select {
font-size: 1.30769231rem
}

.s-input__lg,.s-textarea__lg,.s-label__lg,.s-select__lg>select {
font-size: 1.61538462rem
}

.s-input__xl,.s-textarea__xl,.s-label__xl,.s-select__xl>select {
font-size: 2.07692308rem
}

.s-input__md,.s-textarea__md,.s-select__md>select {
padding-top: .5em;
padding-bottom: .5em;
border-radius: 4px
}

.s-input__lg,.s-textarea__lg,.s-select__lg>select {
padding: .45em .6em;
border-radius: 4px
}

.s-input__xl,.s-textarea__xl,.s-select__xl>select {
padding: .4em .5em;
border-radius: 5px
}

.s-modal {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
visibility: hidden;
position: fixed;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
align-items: center;
justify-content: center;
background-color: rgba(12,13,14,0.5);
opacity: 0;
backface-visibility: hidden;
transition: opacity 100ms cubic-bezier(.165, .84, .44, 1) 0s,z-index 0s 100ms,visibility 0s 100ms;
will-change: visibility,z-index,opacity
}

.s-modal[aria-hidden="false"],.s-modal[aria-hidden="false"] .s-modal--dialog {
visibility: visible;
z-index: 9000;
opacity: 1;
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
transition: opacity 100ms cubic-bezier(.165, .84, .44, 1) 10ms,z-index 0s 0s,visibility 0s 0s,transform 100ms cubic-bezier(.165, .84, .44, 1) 10ms,transform 100ms cubic-bezier(.165, .84, .44, 1) 10ms
}

.s-modal--dialog {
overflow-y: auto;
visibility: hidden;
z-index: -1;
max-width: 600px;
max-height: 100%;
padding: 24px;
border-radius: 7px;
background-color: var(--white);
box-shadow: 0 1px 4px rgba(0,0,0,0.09),0 3px 8px rgba(0,0,0,