.promote-section-cdn {
display: none;
}
@media (min-width: 1024px) {
.promote-section-cdn {
background: #0a193b;
display: -ms-flexbox;
display: flex;
}
.promote-section-container {
position: relative;
max-width: 660px;
padding: 50px 40px 40px;
margin: auto;
}
.promote-section-container-label-cdn {
font-size: 34px;
color: #0a193b;
background: var(--color-primary);
font-weight: 700;
border-radius: 8px;
display: inline-block;
padding: 12px;
}
.promote-section-container-title {
font-size: 54px;
margin: 20px 0;
}
.promote-section-container-text {
font-size: 22px;
line-height: 30px;
}
.promote-section-container-list-cdn {
font-size: 22px;
line-height: 30px;
font-weight: 600;
}
.promote-section-container-list-cdn .sg-list__wrapper-icon {
height: 30px;
}
.promote-section-container-icon {
display: block;
width: 100%;
max-width: 660px;
padding: 30px 0;
margin: auto;
}
.promote-section-container-icon svg {
width: 100%;
}
}
@media (min-width: 1501px) {
.promote-section-container-title {
margin: 0;
}
}
.promote-section-site-scanner {
display: none;
}
@media (min-width: 1024px) {
.promote-section-site-scanner {
background: #432667;
display: -ms-flexbox;
display: flex;
}
.promote-section-container {
position: relative;
max-width: 660px;
padding: 50px 40px 40px;
margin: auto;
}
.promote-section-container-label-site-scanner {
font-size: 34px;
color: var(--typography-darkest);
background: #98b7ff;
font-weight: 700;
border-radius: 8px;
display: inline-block;
padding: 12px;
}
.promote-section-container-title {
font-size: 54px;
margin: 20px 0;
}
.promote-section-container-text {
font-size: 22px;
line-height: 30px;
}
.promote-section-container-list-site-scanner {
font-size: 22px;
line-height: 30px;
font-weight: 600;
}
.promote-section-container-list-site-scanner svg {
color: #d1a3f5;
}
.promote-section-container-list-site-scanner .sg-list__wrapper-icon {
height: 30px;
}
.promote-section-container-icon {
display: block;
width: 100%;
max-width: 660px;
padding: 30px 0;
margin: auto;
}
.promote-section-container-icon svg {
width: 100%;
}
}
@media (min-width: 1501px) {
.promote-section-container-title {
margin: 0;
}
}
.promote-section-summer-sale {
display: none;
}
@media (min-width: 1024px) {
.promote-section-summer-sale {
background: #dfecfc;
display: -ms-flexbox;
display: flex;
text-align: center;
}
.promote-section-container {
position: relative;
max-width: 660px;
padding: 50px 40px 40px;
margin: auto;
}
.promote-section-container-label-summer-sale {
font-size: 30px;
line-height: 30px;
color: #363636;
background: #fffb76;
font-weight: 700;
border-radius: 8px;
display: inline-block;
padding: 5px 10px;
}
.promote-section-container-title-summer-sale {
font-size: 56px;
margin: 20px 0 40px;
}
.promote-section-container-icon-summer-sale {
display: block;
width: 60%;
max-width: 660px;
margin: auto;
}
.promote-section-container-icon-summer-sale svg {
width: 100%;
}
.promote-section-container-product {
padding: 20px;
border: 2px solid #fff;
border-radius: 16px;
margin-bottom: 20px;
}
.promote-section-container-product:last-of-type {
margin-bottom: 0;
}
.promote-section-container-summer-sale-text-title {
font-size: 34px;
line-height: 28px;
margin-bottom: 25px;
}
.promote-section-container-summer-sale-text-info {
font-size: 22px;
line-height: 18px;
}
}
@media (min-width: 1501px) {
.promote-section-container-title-summer-sale {
margin: 0 0 20px 0;
}
.promote-section-container-label-summer-sale {
margin-top: 22px;
}
.promote-section-container-icon-summer-sale {
width: 100%;
}
.promote-section-container-icon-summer-sale svg {
width: 100%;
}
}
.promote-section-black-friday-2022 {
display: none;
}
@media (min-width: 1024px) {
.promote-section-black-friday-2022 {
background: #000;
display: -ms-flexbox;
display: flex;
text-align: center;
-ms-flex-pack: center;
justify-content: center;
}
.promote-section-black-friday-2022--container {
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
align-items: center;
gap: 20px;
width: 450px;
}
.promote-section-black-friday-2022--image-container {
width: 450px;
min-width: 450px;
height: 336px;
min-height: 336px;
transform: translate(70px);
}
.promote-section-black-friday-2022--label {
background-image: linear-gradient(45deg, #ff1526, #4343f0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
font-family: Poppins;
font-size: 24px;
font-weight: bold;
}
.promote-section-black-friday-2022--title {
font-family: Poppins;
font-size: 32px;
color: #fff;
}
.promote-section-black-friday-2022--description {
font-family: Poppins;
font-size: 22px;
line-height: 28px;
font-weight: normal;
color: #fff;
text-align: center;
letter-spacing: 0.05px;
padding: 0 20px;
}
.promote-section-black-friday-2022--disclaimer {
color: #807e7e;
margin-top: auto;
margin-bottom: 50px;
}
}
@media (min-width: 1501px) {
.promote-section-black-friday-2022--container {
width: 650px;
}
.promote-section-black-friday-2022--image-container {
width: 650px;
min-width: 650px;
height: 485px;
min-height: 485px;
transform: translate(100px);
}
.promote-section-black-friday-2022--title {
font-size: 56px;
}
.promote-section-black-friday-2022--description {
font-size: 26px;
line-height: 36px;
}
}
.promote-section-brute-force-prevention {
display: none;
}
@media (min-width: 1024px) {
.promote-section-brute-force-prevention {
background: #0a193b;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
padding: 20px;
}
.promote-section-brute-force-prevention--container {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-direction: column;
flex-direction: column;
width: 650px;
margin-top: 195px;
padding-left: 30px;
}
.promote-section-brute-force-prevention--icon {
width: 440px;
height: 155px;
}
.promote-section-brute-force-prevention--label {
background-color: #fffb76;
font-family: Poppins;
font-size: 22px;
line-height: 40px;
font-weight: bold;
padding: 0 10px;
}
.promote-section-brute-force-prevention--group-text {
padding-top: 40px;
}
.promote-section-brute-force-prevention--title-one {
font-family: Poppins;
font-size: 32px;
line-height: 44px;
color: #6ee0af;
padding: 20px 0;
}
.promote-section-brute-force-prevention--title-two {
font-family: Poppins;
font-size: 38px;
line-height: 44px;
color: #fff;
padding-bottom: 20px;
font-weight: bold;
}
.promote-section-brute-force-prevention--link {
font-family: Poppins;
font-size: 18px;
font-weight: normal;
}
}
@media (min-width: 1501px) {
.promote-section-brute-force-prevention--icon {
width: 612px;
height: 214px;
}
.promote-section-brute-force-prevention--label {
font-size: 26px;
}
.promote-section-brute-force-prevention--title-one {
font-size: 42px;
line-height: 66px;
}
.promote-section-brute-force-prevention--title-two {
font-size: 54px;
line-height: 66px;
}
}
.promote-section-geoip-blocking {
display: none;
}
@media (min-width: 1024px) {
.promote-section-geoip-blocking {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
background: #eee0fa;
padding: 0 30px;
}
.promote-section-geoip-blocking--container {
width: 896px;
height: 916px;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-direction: column;
flex-direction: column;
z-index: 2;
}
.promote-section-geoip-blocking--background {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.promote-section-geoip-blocking--label {
background-color: #fffb76;
font-family: Poppins;
font-size: 30px;
line-height: 40px;
font-weight: bold;
padding: 0 5px;
margin-bottom: 20px;
}
.promote-section-geoip-blocking--title {
font-family: Poppins;
font-size: 44px;
line-height: 52px;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
}
.promote-section-geoip-blocking--description {
font-family: Poppins;
font-size: 18px;
line-height: 26px;
text-align: center;
margin-bottom: 20px;
}
.promote-section-geoip-blocking--icon {
padding-top: 40px;
width: 154px;
height: 194px;
}
}
@media (min-width: 1501px) {
.promote-section-geoip-blocking--label {
font-size: 38px;
padding: 5px 15px;
}
.promote-section-geoip-blocking--title {
font-size: 56px;
line-height: 66px;
}
.promote-section-geoip-blocking--description {
font-size: 22px;
line-height: 32px;
}
.promote-section-geoip-blocking--icon {
width: 204px;
height: 244px;
}
}
.promote-section-italian-webinar {
display: none;
}
@media (min-width: 1024px) {
.promote-section-italian-webinar {
background: #000;
display: -ms-flexbox;
display: flex;
text-align: center;
-ms-flex-pack: center;
justify-content: center;
}
.promote-section-italian-webinar--container {
position: relative;
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
align-items: center;
width: 100%;
overflow: hidden;
}
.promote-section-italian-webinar--image-wrapper {
height: 520px;
}
.promote-section-italian-webinar--bf-stripes {
position: absolute;
top: 0;
right: 0;
transform: translate(100px);
}
.promote-section-italian-webinar--speaker-image {
position: relative;
width: 200px;
height: 300px;
margin: 170px 0 30px 0;
z-index: 2;
}
.promote-section-italian-webinar--speaker-name {
position: absolute;
top: 230px;
transform: translate(-130px);
font-family: Poppins;
font-size: 16px;
font-weight: 500;
line-height: 22px;
width: 92px;
text-align: end;
color: #fff;
z-index: 2;
}
.promote-section-italian-webinar--label {
background-image: linear-gradient(90deg, #ff1526, #4343f0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
font-family: Poppins;
font-size: 26px;
font-weight: bold;
z-index: 2;
}
.promote-section-italian-webinar--title {
font-family: Poppins;
font-size: 56px;
line-height: 67.2px;
font-weight: bold;
color: #fff;
padding: 10px 0;
}
.promote-section-italian-webinar--description {
font-family: Poppins;
font-size: 26px;
line-height: 36px;
text-align: center;
letter-spacing: 0.05px;
color: #fff;
width: 574px;
font-weight: 400;
padding: 30px;
}
.promote-section-italian-webinar--begins {
font-family: Poppins;
font-size: 18px;
line-height: 25px;
text-align: center;
color: #fff;
background: #ce215b;
padding: 8px 15px;
}
.promote-section-italian-webinar--sign-up {
font-family: Poppins;
font-size: 19px;
line-height: 26px;
color: #fff;
margin-top: 70px;
text-decoration: underline;
padding-bottom: 30px;
}
}
@media (min-width: 1501px) {
.promote-section-italian-webinar--bf-stripes {
transform: translate(0px);
}
.promote-section-italian-webinar--description {
padding: 30px 0;
}
}
.promote-section-cyber-security-month {
display: none;
}
@media (min-width: 1024px) {
.promote-section-cyber-security-month {
display: -ms-flexbox;
display: flex;
text-align: center;
background: #0a193b;
}
.promote-section-cyber-security-month
.promote-section-cyber-security-month--container {
display: block;
position: relative;
max-width: 700px;
margin: auto;
}
.promote-section-cyber-security-month
.promote-section-cyber-security-month--label {
background: #fffb76;
color: #363636;
font-family: Poppins;
font-size: 22px;
line-height: 40px;
font-weight: bold;
padding: 0 10px;
}
.promote-section-cyber-security-month
.promote-section-cyber-security-month--icon {
margin: auto;
padding-top: 90px;
}
.promote-section-cyber-security-month
.promote-section-cyber-security-month--icon
> span {
width: 100%;
}
.promote-section-cyber-security-month
.promote-section-cyber-security-month--title {
font-size: 38px;
font-family: Poppins;
padding: 20px 40px;
}
.promote-section-cyber-security-month
.promote-section-cyber-security-month--sub-title {
font-family: Poppins;
font-size: 24px;
line-height: 38px;
color: #fff;
padding: 0 20px;
}
.promote-section-cyber-security-month svg {
width: 480px;
height: 150px;
margin: auto;
}
.promote-section-cyber-security-month
.promote-section-cyber-security-month--footer {
font-size: 16px;
color: #fff;
justify-self: center;
padding-bottom: 20px;
}
}
@media (min-width: 1501px) {
.promote-section-cyber-security-month
.promote-section-cyber-security-month--icon {
padding-top: 90px;
}
.promote-section-cyber-security-month
.promote-section-cyber-security-month--icon
svg {
width: 100%;
height: 201px;
}
.promote-section-cyber-security-month
.promote-section-cyber-security-month--label {
font-size: 22px;
}
.promote-section-cyber-security-month
.promote-section-cyber-security-month--title {
font-size: 48px;
}
.promote-section-cyber-security-month
.promote-section-cyber-security-month--sub-title {
font-size: 28px;
}
}
.promo-section-security-webinar {
display: none;
}
@media (min-width: 1024px) {
.promo-section-security-webinar {
display: -ms-flexbox;
display: flex;
background: #eafaeb;
-ms-flex-pack: center;
justify-content: center;
}
.promo-section-security-webinar--container {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
gap: 20px;
width: 780px;
}
.promo-section-security-webinar--label {
background: #fffb76;
font-family: Poppins;
font-size: 24px;
line-height: 24px;
font-weight: bold;
padding: 5px 10px;
}
.promo-section-security-webinar--title {
font-family: Poppins;
font-size: 46px;
line-height: 56px;
font-weight: bold;
text-align: center;
padding: 0 40px;
}
.promo-section-security-webinar--description {
font-family: Poppins;
font-size: 20px;
line-height: 28px;
text-align: center;
padding: 0 20px;
}
.promo-section-security-webinar--person-name {
font-family: Poppins;
font-size: 22px;
line-height: 32px;
font-weight: bold;
text-align: center;
}
.promo-section-security-webinar--person-title {
font-family: Poppins;
font-size: 22px;
line-height: 32px;
text-align: center;
}
}
@media (min-width: 1501px) {
.promo-section-security-webinar--label {
padding: 10px 15px;
font-size: 32px;
line-height: 32px;
}
.promo-section-security-webinar--title {
font-size: 56px;
line-height: 66px;
}
.promo-section-security-webinar--description {
font-size: 22px;
line-height: 32px;
}
}
.promo-section-spanish-security-webinar {
display: none;
}
@media (min-width: 1024px) {
.promo-section-spanish-security-webinar {
display: -ms-flexbox;
display: flex;
background: #eafaeb;
-ms-flex-pack: center;
justify-content: center;
}
.promo-section-spanish-security-webinar--container {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
gap: 20px;
width: 820px;
}
.promo-section-spanish-security-webinar--label {
background: #fffb76;
font-family: Poppins;
font-size: 24px;
line-height: 24px;
font-weight: bold;
padding: 5px 10px;
}
.promo-section-spanish-security-webinar--title {
font-family: Poppins;
font-size: 46px;
line-height: 56px;
font-weight: bold;
text-align: center;
padding: 0 40px;
}
.promo-section-spanish-security-webinar--description {
font-family: Poppins;
font-size: 20px;
line-height: 28px;
text-align: center;
padding: 0 20px;
}
.promo-section-spanish-security-webinar--speakers {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
gap: 30px;
margin-top: 20px;
}
.promo-section-spanish-security-webinar--speakers img {
margin: auto;
}
.promo-section-spanish-security-webinar--speaker-name {
font-family: Poppins;
font-size: 22px;
line-height: 32px;
font-weight: bold;
text-align: center;
margin-top: 20px;
}
.promo-section-spanish-security-webinar--speaker-title {
font-family: Poppins;
font-size: 22px;
line-height: 32px;
text-align: center;
}
}
@media (min-width: 1501px) {
.promo-section-spanish-security-webinar--label {
padding: 10px 15px;
font-size: 32px;
line-height: 32px;
}
.promo-section-spanish-security-webinar--title {
font-size: 56px;
line-height: 66px;
}
.promo-section-spanish-security-webinar--description {
font-size: 22px;
line-height: 32px;
}
.promo-section-spanish-security-webinar--speakers {
-ms-flex-direction: row;
flex-direction: row;
gap: 110px;
}
}
.login-footer__dropdown {
width: 125px;
background: var(--background-main);
}
.sg-authentication-tile {
cursor: pointer;
-ms-grid-columns: 40px 1fr;
grid-template-columns: 40px 1fr;
}
.sg-authentication-tile--selected {
border: 2px solid var(--ocean-base);
}
.profile-card {
padding: 10px 60px;
}
.profile-card:hover {
cursor: pointer;
background-color: var(--background-component-secondary);
}
.profile-card__context-menu {
margin-left: auto;
}
.profile-card__icon {
width: 50px;
height: 50px;
border: 1px solid var(--border-color-default);
border-radius: 25px;
padding: 14px;
}
@media (max-width: 800px) {
.profile-card {
text-align: left;
-ms-flex-line-pack: start;
align-content: flex-start;
position: relative;
width: 100%;
padding: 20px;
}
.profile-card__context-menu.sg-context-menu {
position: absolute;
top: 20px;
right: 20px;
}
.profile-card .sg-title {
text-align: left;
}
}
.grecaptcha-badge {
position: absolute;
left: -9999999px;
top: -9999999px;
}
.login-grid {
height: 100%;
}
.login-grid-top {
-ms-flex: 1 1 0px;
flex: 1 1 0;
}
.login-grid-top-icon {
margin: auto auto 0 auto;
padding: 50px 0;
}
/*# sourceMappingURL=style.css.map*/
.sg-with-border--radius-none {
border-radius: 0
}
.sg-with-border--radius-inherit {
border-radius: inherit
}
.sg-with-border--radius-default {
border-radius: 12px
}
.sg-with-border--border-top-none {
border-top: 0 solid var(--border-color-outer)
}
.sg-with-border--border-right-none {
border-right: 0 solid var(--border-color-outer)
}
.sg-with-border--border-bottom-none {
border-bottom: 0 solid var(--border-color-outer)
}
.sg-with-border--border-left-none {
border-left: 0 solid var(--border-color-outer)
}
.sg-with-border--border-top-small {
border-top: 1px solid var(--border-color-outer)
}
.sg-with-border--border-right-small {
border-right: 1px solid var(--border-color-outer)
}
.sg-with-border--border-bottom-small {
border-bottom: 1px solid var(--border-color-outer)
}
.sg-with-border--border-left-small {
border-left: 1px solid var(--border-color-outer)
}
.sg-with-border--border-top-medium {
border-top: 2px solid var(--border-color-outer)
}
.sg-with-border--border-right-medium {
border-right: 2px solid var(--border-color-outer)
}
.sg-with-border--border-bottom-medium {
border-bottom: 2px solid var(--border-color-outer)
}
.sg-with-border--border-left-medium {
border-left: 2px solid var(--border-color-outer)
}
.sg-with-border--border-top-inherit {
border-top: inherit solid var(--border-color-outer)
}
.sg-with-border--border-right-inherit {
border-right: inherit solid var(--border-color-outer)
}
.sg-with-border--border-bottom-inherit {
border-bottom: inherit solid var(--border-color-outer)
}
.sg-with-border--border-left-inherit {
border-left: inherit solid var(--border-color-outer)
}
.sg-with-padding.sg-with-padding.sg-with-padding--padding-top-none {
padding-top: 0
}
.sg-with-padding.sg-with-padding.sg-with-padding--padding-right-none {
padding-right: 0
}
.sg-with-padding.sg-with-padding.sg-with-padding--padding-bottom-none {
padding-bottom: 0
}
.sg-with-padding.sg-with-padding.sg-with-padding--padding-left-none {
padding-left: 0
}
.sg-with-padding.sg-with-padding.sg-with-padding--padding-top-xx-small {
padding-top: 5px
}
.sg-with-padding.sg-with-padding.sg-with-padding--padding-right-xx-small {
padding-right: 5px
}
.sg-with-padding.sg-with-padding.sg-with-padding--padding-bottom-xx-small {
padding-bottom: 5px
}
.sg-with-padding.sg-with-padding.sg-with-padding--padding-left-xx-small {
padding-left: 5px
}
.sg-with-padding.sg-with-padding.sg-with-padding--padding-top-x-small {
padding-top: 10px
}
.sg-with-padding.sg-with-padding.sg-with-padding--padding-right-x-small {
padding-right: 10px
}
.sg-with-padding.sg-with-padding.sg-with-padding--padding-bottom-x-small {
padding-bottom: 10px
}
.sg-with-padding.sg-with-padding.sg-with-padding--padding-left-x-small {
padding-left: 10px
}
.sg-with-padding.sg-with-padding.sg-with-padding--padding-top-small {
padding-top: 15px
}
.sg-with-padding.sg-with-padding.sg-with-padding--padding-right-small {
padding-right: 15px
}
.sg-with-padding.sg-with-padding.sg-with-padding--padding-bottom-small {
padding-bottom: 15px
}
.sg-with-padding.sg-with-padding.sg-with-padding--padding-left-small {
padding-left: 15px
}
.sg-with-padding.sg-with-padding.sg-with-padding--padding-top-medium {
padding-top: 20px
}
.sg-with-padding.sg-with-padding.sg-with-padding--padding-right-medium {
padding-right: 20px
}
.sg-with-padding.sg-with-padding.sg-with-padding--padding-bottom-medium {
padding-bottom: 20px
}
.sg-with-padding.sg-with-padding.sg-with-padding--padding-left-medium {
padding-left: 20px
}
.sg-with-padding.sg-with-padding.sg-with-padding--padding-top-large {
padding-top: 30px
}
.sg-with-padding.sg-with-padding.sg-with-padding--padding-right-large {
padding-right: 30px
}
.sg-with-padding.sg-with-padding.sg-with-padding--padding-bottom-large {
padding-bottom: 30px
}
.sg-with-padding.sg-with-padding.sg-with-padding--padding-left-large {
padding-left: 30px
}
.sg-with-padding.sg-with-padding.sg-with-padding--padding-top-x-large {
padding-top: 40px
}
.sg-with-padding.sg-with-padding.sg-with-padding--padding-right-x-large {
padding-right: 40px
}
.sg-with-padding.sg-with-padding.sg-with-padding--padding-bottom-x-large {
padding-bottom: 40px
}
.sg-with-padding.sg-with-padding.sg-with-padding--padding-left-x-large {
padding-left: 40px
}
.sg-with-padding.sg-with-padding.sg-with-padding--padding-top-xx-large {
padding-top: 60px
}
.sg-with-padding.sg-with-padding.sg-with-padding--padding-right-xx-large {
padding-right: 60px
}
.sg-with-padding.sg-with-padding.sg-with-padding--padding-bottom-xx-large {
padding-bottom: 60px
}
.sg-with-padding.sg-with-padding.sg-with-padding--padding-left-xx-large {
padding-left: 60px
}
.sg-with-padding--padding-top-responsive {
padding-top: 30px
}
.sg-with-padding--padding-right-responsive {
padding-right: 30px
}
.sg-with-padding--padding-bottom-responsive {
padding-bottom: 30px
}
.sg-with-padding--padding-left-responsive {
padding-left: 30px
}
@media(max-width: 1500px) {
.sg-with-padding--padding-top-responsive {
padding-top:20px
}
.sg-with-padding--padding-right-responsive {
padding-right: 20px
}
.sg-with-padding--padding-bottom-responsive {
padding-bottom: 20px
}
.sg-with-padding--padding-left-responsive {
padding-left: 20px
}
}
.sg-flex {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.sg-flex:focus {
outline: none
}
.sg-keyboard .sg-flex:focus {
outline: none;
box-shadow: var(--focus-shadow)
}
.sg-flex>* {
min-width: 0;
max-width: 100%
}
.sg-flex--margin-medium {
margin-top: 20px
}
.sg-flex--margin-medium:last-child {
margin-bottom: 20px
}
.sg-flex--direction-row {
-ms-flex-direction: row;
flex-direction: row
}
.sg-flex--direction-column {
-ms-flex-direction: column;
flex-direction: column
}
.sg-flex--direction-row-reverse {
-ms-flex-direction: row-reverse;
flex-direction: row-reverse
}
.sg-flex--direction-column-reverse {
-ms-flex-direction: column-reverse;
flex-direction: column-reverse
}
.sg-flex--justify-flex-start {
-ms-flex-pack: start;
justify-content: flex-start
}
.sg-flex--justify-center {
-ms-flex-pack: center;
justify-content: center
}
.sg-flex--justify-flex-end {
-ms-flex-pack: end;
justify-content: flex-end
}
.sg-flex--justify-space-between {
-ms-flex-pack: justify;
justify-content: space-between
}
.sg-flex--justify-space-around {
-ms-flex-pack: distribute;
justify-content: space-around
}
.sg-flex--align-flex-start {
-ms-flex-align: start;
align-items: flex-start
}
.sg-flex--align-center {
-ms-flex-align: center;
align-items: center
}
.sg-flex--align-flex-end {
-ms-flex-align: end;
align-items: flex-end
}
.sg-flex--align-baseline {
-ms-flex-align: baseline;
align-items: baseline
}
.sg-flex--align-stretch {
-ms-flex-align: stretch;
align-items: stretch
}
.sg-flex--align-self-flex-start {
-ms-flex-item-align: start;
align-self: flex-start
}
.sg-flex--align-self-center {
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center
}
.sg-flex--align-self-flex-end {
-ms-flex-item-align: end;
align-self: flex-end
}
.sg-flex--align-self-baseline {
-ms-flex-item-align: baseline;
align-self: baseline
}
.sg-flex--align-self-stretch {
-ms-flex-item-align: stretch;
-ms-grid-row-align: stretch;
align-self: stretch
}
.sg-flex--flex-wrap-wrap {
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.sg-flex--flex-wrap-nowrap {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap
}
.sg-flex--background-white {
background-color: var(--background-component-primary)
}
.sg-flex--gutter-xx-small {
padding-left: 2.5px;
padding-right: 2.5px
}
.sg-flex--gutter-xx-small.sg-flex--expanded {
margin-left: -5px;
margin-right: -5px
}
.sg-flex--gutter-x-small {
padding-left: 5px;
padding-right: 5px
}
.sg-flex--gutter-x-small.sg-flex--expanded {
margin-left: -10px;
margin-right: -10px
}
.sg-flex--gutter-small {
padding-left: 7.5px;
padding-right: 7.5px
}
.sg-flex--gutter-small.sg-flex--expanded {
margin-left: -15px;
margin-right: -15px
}
.sg-flex--gutter-medium {
padding-left: 10px;
padding-right: 10px
}
.sg-flex--gutter-medium.sg-flex--expanded {
margin-left: -20px;
margin-right: -20px
}
.sg-flex--gutter-large {
padding-left: 15px;
padding-right: 15px
}
.sg-flex--gutter-large.sg-flex--expanded {
margin-left: -30px;
margin-right: -30px
}
.sg-flex--gutter-x-large {
padding-left: 20px;
padding-right: 20px
}
.sg-flex--gutter-x-large.sg-flex--expanded {
margin-left: -40px;
margin-right: -40px
}
.sg-flex--gutter-xx-large {
padding-left: 30px;
padding-right: 30px
}
.sg-flex--gutter-xx-large.sg-flex--expanded {
margin-left: -60px;
margin-right: -60px
}
.sg-flex--shrink-1 {
-ms-flex-negative: 1;
flex-shrink: 1
}
.sg-flex--shrink-none {
-ms-flex-negative: 0;
flex-shrink: 0
}
.sg-flex--grow-1 {
-ms-flex-positive: 1;
flex-grow: 1
}
.sg-flex--grow-2 {
-ms-flex-positive: 2;
flex-grow: 2
}
.sg-flex--grow-3 {
-ms-flex-positive: 3;
flex-grow: 3
}
.sg-flex--gap-none {
gap: 0
}
.sg-flex--gap-xx-small {
gap: 5px
}
.sg-flex--gap-x-small {
gap: 10px
}
.sg-flex--gap-small {
gap: 15px
}
.sg-flex--gap-medium {
gap: 20px
}
.sg-flex--gap-large {
gap: 30px
}
.sg-flex--gap-x-large {
gap: 40px
}
.sg-flex--gap-xx-large {
gap: 60px
}
.sg-flex--gap-responsive {
gap: 30px
}
@media(max-width: 1500px) {
.sg-flex--gap-responsive {
gap:20px
}
}
.sg-box {
position: relative;
border-radius: inherit
}
.sg-box--flex {
display: -ms-flexbox;
display: flex
}
.sg-box--direction-row {
-ms-flex-direction: row;
flex-direction: row
}
.sg-box--direction-column {
-ms-flex-direction: column;
flex-direction: column
}
.sg-box--direction-row-reverse {
-ms-flex-direction: row-reverse;
flex-direction: row-reverse
}
.sg-box--direction-column-reverse {
-ms-flex-direction: column-reverse;
flex-direction: column-reverse
}
.sg-box--grow {
-ms-flex-positive: 1;
flex-grow: 1
}
.sg-box--align-flex-start {
-ms-flex-align: start;
align-items: flex-start
}
.sg-box--align-center {
-ms-flex-align: center;
align-items: center
}
.sg-box--align-flex-end {
-ms-flex-align: end;
align-items: flex-end
}
.sg-box--align-baseline {
-ms-flex-align: baseline;
align-items: baseline
}
.sg-box--align-stretch {
-ms-flex-align: stretch;
align-items: stretch
}
.sg-box--justify-flex-start {
-ms-flex-pack: start;
justify-content: flex-start
}
.sg-box--justify-center {
-ms-flex-pack: center;
justify-content: center
}
.sg-box--justify-flex-end {
-ms-flex-pack: end;
justify-content: flex-end
}
.sg-box--justify-space-between {
-ms-flex-pack: justify;
justify-content: space-between
}
.sg-box--justify-space-around {
-ms-flex-pack: distribute;
justify-content: space-around
}
.sg-flex--gutter-none>.sg-box {
padding-left: 0;
padding-right: 0
}
.sg-flex--gutter-xx-small>.sg-box {
padding-left: 2.5px;
padding-right: 2.5px
}
.sg-flex--gutter-x-small>.sg-box {
padding-left: 5px;
padding-right: 5px
}
.sg-flex--gutter-small>.sg-box {
padding-left: 7.5px;
padding-right: 7.5px
}
.sg-flex--gutter-medium>.sg-box {
padding-left: 10px;
padding-right: 10px
}
.sg-flex--gutter-large>.sg-box {
padding-left: 15px;
padding-right: 15px
}
.sg-flex--gutter-x-large>.sg-box {
padding-left: 20px;
padding-right: 20px
}
.sg-flex--gutter-xx-large>.sg-box {
padding-left: 30px;
padding-right: 30px
}
@media(max-width: 800px) {
*[class*=box--sm-]:not([class*=box--xs-]),*[class*=box--m-]:not([class*=box--xs-]),*[class*=box--lg-]:not([class*=box--xs-]) {
width:100%;
margin-top: 20px
}
*[class*=box--sm-]:not([class*=box--xs-]):first-child,*[class*=box--m-]:not([class*=box--xs-]):first-child,*[class*=box--lg-]:not([class*=box--xs-]):first-child {
margin-top: 0
}
*[class*=box--sm-]:not([class*=box--xs-]) .sg-box--gutter-x-medium:first-child,*[class*=box--m-]:not([class*=box--xs-]) .sg-box--gutter-x-medium:first-child,*[class*=box--lg-]:not([class*=box--xs-]) .sg-box--gutter-x-medium:first-child {
padding-left: 10px
}
*[class*=box--sm-]:not([class*=box--xs-]) .sg-box--gutter-x-medium:last-child,*[class*=box--m-]:not([class*=box--xs-]) .sg-box--gutter-x-medium:last-child,*[class*=box--lg-]:not([class*=box--xs-]) .sg-box--gutter-x-medium:last-child {
padding-right: 10px
}
*[class*=box--sm-]:not([class*=box--xs-]) .sg-box--gutter-y-medium:first-child,*[class*=box--m-]:not([class*=box--xs-]) .sg-box--gutter-y-medium:first-child,*[class*=box--lg-]:not([class*=box--xs-]) .sg-box--gutter-y-medium:first-child {
padding-top: 20px
}
*[class*=box--sm-]:not([class*=box--xs-]) .sg-box--gutter-y-medium:last-child,*[class*=box--m-]:not([class*=box--xs-]) .sg-box--gutter-y-medium:last-child,*[class*=box--lg-]:not([class*=box--xs-]) .sg-box--gutter-y-medium:last-child {
padding-bottom: 20px
}
}
.sg-box--xs-1 {
width: 8.3333333333%
}
.sg-box--xs-2 {
width: 16.6666666667%
}
.sg-box--xs-3 {
width: 25%
}
.sg-box--xs-4 {
width: 33.3333333333%
}
.sg-box--xs-5 {
width: 41.6666666667%
}
.sg-box--xs-6 {
width: 50%
}
.sg-box--xs-7 {
width: 58.3333333333%
}
.sg-box--xs-8 {
width: 66.6666666667%
}
.sg-box--xs-9 {
width: 75%
}
.sg-box--xs-10 {
width: 83.3333333333%
}
.sg-box--xs-11 {
width: 91.6666666667%
}
.sg-box--xs-12 {
width: 100%
}
@media(min-width: 801px) {
.sg-box--sm-1 {
width:8.3333333333%
}
.sg-box--sm-2 {
width: 16.6666666667%
}
.sg-box--sm-3 {
width: 25%
}
.sg-box--sm-4 {
width: 33.3333333333%
}
.sg-box--sm-5 {
width: 41.6666666667%
}
.sg-box--sm-6 {
width: 50%
}
.sg-box--sm-7 {
width: 58.3333333333%
}
.sg-box--sm-8 {
width: 66.6666666667%
}
.sg-box--sm-9 {
width: 75%
}
.sg-box--sm-10 {
width: 83.3333333333%
}
.sg-box--sm-11 {
width: 91.6666666667%
}
.sg-box--sm-12 {
width: 100%
}
}
@media(min-width: 1024px) {
.sg-box--m-1 {
width:8.3333333333%
}
.sg-box--m-2 {
width: 16.6666666667%
}
.sg-box--m-3 {
width: 25%
}
.sg-box--m-4 {
width: 33.3333333333%
}
.sg-box--m-5 {
width: 41.6666666667%
}
.sg-box--m-6 {
width: 50%
}
.sg-box--m-7 {
width: 58.3333333333%
}
.sg-box--m-8 {
width: 66.6666666667%
}
.sg-box--m-9 {
width: 75%
}
.sg-box--m-10 {
width: 83.3333333333%
}
.sg-box--m-11 {
width: 91.6666666667%
}
.sg-box--m-12 {
width: 100%
}
}
@media(min-width: 1501px) {
.sg-box--lg-1 {
width:8.3333333333%
}
.sg-box--lg-2 {
width: 16.6666666667%
}
.sg-box--lg-3 {
width: 25%
}
.sg-box--lg-4 {
width: 33.3333333333%
}
.sg-box--lg-5 {
width: 41.6666666667%
}
.sg-box--lg-6 {
width: 50%
}
.sg-box--lg-7 {
width: 58.3333333333%
}
.sg-box--lg-8 {
width: 66.6666666667%
}
.sg-box--lg-9 {
width: 75%
}
.sg-box--lg-10 {
width: 83.3333333333%
}
.sg-box--lg-11 {
width: 91.6666666667%
}
.sg-box--lg-12 {
width: 100%
}
}
.sg-with-color.sg-with-color--color-primary {
color: var(--color-primary)
}
.sg-with-color.sg-with-color--color-success {
color: var(--color-success)
}
.sg-with-color.sg-with-color--color-error {
color: var(--color-error)
}
.sg-with-color.sg-with-color--color-warning {
color: var(--color-warning)
}
.sg-with-color.sg-with-color--color-info {
color: var(--color-info)
}
.sg-with-color.sg-with-color--color-white {
color: var(--typography-white)
}
.sg-with-color.sg-with-color--color-light {
color: var(--typography-light)
}
.sg-with-color.sg-with-color--color-dark {
color: var(--typography-dark)
}
.sg-tooltip {
position: absolute;
max-width: 500px;
overflow-wrap: break-word;
box-shadow: var(--first-level-box-shadow);
border-radius: 12px;
font-size: 14px;
line-height: 18px;
color: var(--tooltip-color);
z-index: 180
}
.sg-tooltip--background-black {
background-color: var(--tooltip-background-dark)
}
.sg-tooltip--background-white {
background-color: var(--tooltip-background-light)
}
.sg-tooltip--density-cozy {
padding: 5px 10px
}
.sg-tooltip--density-none {
padding: 0
}
.sg-icon {
display: inline-block;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0
}
.sg-icon:focus {
outline: none
}
.sg-keyboard .sg-icon:focus {
outline: none;
box-shadow: var(--focus-shadow)
}
.sg-icon svg {
fill: currentColor
}
.sg-icon .theme-foreground {
fill: #fff
}
.sg-icon .siteground-logo-inner-circle {
fill: #fff
}
.sg-theme-hcl .siteground-logo-inner-circle {
fill: #000
}
.sg-theme-hcb .siteground-logo-inner-circle {
fill: #fff
}
.sg-theme-dark .siteground-logo-inner-circle {
fill: #fff
}
.sg-theme-hcl .sg-icon .theme-foreground {
fill: #000
}
.sg-icon--presized svg {
max-width: 100%;
max-height: 100%
}
.sg-icon--interactive {
cursor: pointer
}
.sg-icon--use-css-colors path,.sg-icon--use-css-colors polygon,.sg-icon--use-css-colors circle,.sg-icon--use-css-colors rect,.sg-icon--use-css-colors ellipse {
fill: currentColor
}
.sg-icon--color-info path,.sg-icon--color-info polygon,.sg-icon--color-info circle,.sg-icon--color-info rect,.sg-icon--color-info ellipse {
fill: var(--icon-color-royal)
}
.sg-icon--color-info.sg-icon--fill-light .sgmaincolor {
fill: var(--icon-color-royal-light)
}
.sg-icon--color-info.sg-icon--fill-lighter .sgmaincolor {
fill: var(--icon-color-royal-lighter)
}
.sg-icon--color-primary path,.sg-icon--color-primary polygon,.sg-icon--color-primary circle,.sg-icon--color-primary rect,.sg-icon--color-primary ellipse {
fill: var(--icon-color)
}
.sg-icon--color-primary.sg-icon--fill-light .sgmaincolor {
fill: var(--icon-color-light)
}
.sg-icon--color-primary.sg-icon--fill-lighter .sgmaincolor {
fill: var(--icon-color-lighter)
}
.sg-icon--color-success path,.sg-icon--color-success polygon,.sg-icon--color-success circle,.sg-icon--color-success rect,.sg-icon--color-success ellipse {
fill: var(--icon-color-mint)
}
.sg-icon--color-success.sg-icon--fill-light .sgmaincolor {
fill: var(--icon-color-mint-light)
}
.sg-icon--color-success.sg-icon--fill-lighter .sgmaincolor {
fill: var(--icon-color-mint-lighter)
}
.sg-icon--color-warning path,.sg-icon--color-warning polygon,.sg-icon--color-warning circle,.sg-icon--color-warning rect,.sg-icon--color-warning ellipse {
fill: var(--icon-color-salmon)
}
.sg-icon--color-warning.sg-icon--fill-light .sgmaincolor {
fill: var(--icon-color-salmon-light)
}
.sg-icon--color-warning.sg-icon--fill-lighter .sgmaincolor {
fill: var(--icon-color-salmon-lighter)
}
.sg-icon--color-info path,.sg-icon--color-info polygon,.sg-icon--color-info circle,.sg-icon--color-info rect,.sg-icon--color-info ellipse {
fill: var(--icon-color-mango)
}
.sg-icon--color-info.sg-icon--fill-light .sgmaincolor {
fill: var(--icon-color-mango-light)
}
.sg-icon--color-info.sg-icon--fill-lighter .sgmaincolor {
fill: var(--icon-color-mango-lighter)
}
.sg-icon--color-information path,.sg-icon--color-information polygon,.sg-icon--color-information circle,.sg-icon--color-information rect,.sg-icon--color-information ellipse {
fill: var(--icon-color-mango)
}
.sg-icon--color-information.sg-icon--fill-light .sgmaincolor {
fill: var(--icon-color-mango-light)
}
.sg-icon--color-information.sg-icon--fill-lighter .sgmaincolor {
fill: var(--icon-color-mango-lighter)
}
.sg-theme-hcl .sg-icon--color-info path,.sg-theme-hcl .sg-icon--color-info polygon,.sg-theme-hcl .sg-icon--color-info circle,.sg-theme-hcl .sg-icon--color-info rect,.sg-theme-hcl .sg-icon--color-info ellipse,.sg-theme-hcl .sg-icon--color-primary path,.sg-theme-hcl .sg-icon--color-primary polygon,.sg-theme-hcl .sg-icon--color-primary circle,.sg-theme-hcl .sg-icon--color-primary rect,.sg-theme-hcl .sg-icon--color-primary ellipse,.sg-theme-hcl .sg-icon--color-success path,.sg-theme-hcl .sg-icon--color-success polygon,.sg-theme-hcl .sg-icon--color-success circle,.sg-theme-hcl .sg-icon--color-success rect,.sg-theme-hcl .sg-icon--color-success ellipse,.sg-theme-hcl .sg-icon--color-warning path,.sg-theme-hcl .sg-icon--color-warning polygon,.sg-theme-hcl .sg-icon--color-warning circle,.sg-theme-hcl .sg-icon--color-warning rect,.sg-theme-hcl .sg-icon--color-warning ellipse,.sg-theme-hcl .sg-icon--color-info path,.sg-theme-hcl .sg-icon--color-info polygon,.sg-theme-hcl .sg-icon--color-info circle,.sg-theme-hcl .sg-icon--color-info rect,.sg-theme-hcl .sg-icon--color-info ellipse,.sg-theme-hcl .sg-icon--color-information path,.sg-theme-hcl .sg-icon--color-information polygon,.sg-theme-hcl .sg-icon--color-information circle,.sg-theme-hcl .sg-icon--color-information rect,.sg-theme-hcl .sg-icon--color-information ellipse,.sg-theme-hcb .sg-icon--color-info path,.sg-theme-hcb .sg-icon--color-info polygon,.sg-theme-hcb .sg-icon--color-info circle,.sg-theme-hcb .sg-icon--color-info rect,.sg-theme-hcb .sg-icon--color-info ellipse,.sg-theme-hcb .sg-icon--color-primary path,.sg-theme-hcb .sg-icon--color-primary polygon,.sg-theme-hcb .sg-icon--color-primary circle,.sg-theme-hcb .sg-icon--color-primary rect,.sg-theme-hcb .sg-icon--color-primary ellipse,.sg-theme-hcb .sg-icon--color-success path,.sg-theme-hcb .sg-icon--color-success polygon,.sg-theme-hcb .sg-icon--color-success circle,.sg-theme-hcb .sg-icon--color-success rect,.sg-theme-hcb .sg-icon--color-success ellipse,.sg-theme-hcb .sg-icon--color-warning path,.sg-theme-hcb .sg-icon--color-warning polygon,.sg-theme-hcb .sg-icon--color-warning circle,.sg-theme-hcb .sg-icon--color-warning rect,.sg-theme-hcb .sg-icon--color-warning ellipse,.sg-theme-hcb .sg-icon--color-info path,.sg-theme-hcb .sg-icon--color-info polygon,.sg-theme-hcb .sg-icon--color-info circle,.sg-theme-hcb .sg-icon--color-info rect,.sg-theme-hcb .sg-icon--color-info ellipse,.sg-theme-hcb .sg-icon--color-information path,.sg-theme-hcb .sg-icon--color-information polygon,.sg-theme-hcb .sg-icon--color-information circle,.sg-theme-hcb .sg-icon--color-information rect,.sg-theme-hcb .sg-icon--color-information ellipse {
fill: var(--high-contrast-foreground)
}
.sg-theme-hcl .sg-icon--color-info.sg-icon--fill-light .sgmaincolor,.sg-theme-hcl .sg-icon--color-primary.sg-icon--fill-light .sgmaincolor,.sg-theme-hcl .sg-icon--color-success.sg-icon--fill-light .sgmaincolor,.sg-theme-hcl .sg-icon--color-warning.sg-icon--fill-light .sgmaincolor,.sg-theme-hcl .sg-icon--color-info.sg-icon--fill-light .sgmaincolor,.sg-theme-hcl .sg-icon--color-information.sg-icon--fill-light .sgmaincolor,.sg-theme-hcb .sg-icon--color-info.sg-icon--fill-light .sgmaincolor,.sg-theme-hcb .sg-icon--color-primary.sg-icon--fill-light .sgmaincolor,.sg-theme-hcb .sg-icon--color-success.sg-icon--fill-light .sgmaincolor,.sg-theme-hcb .sg-icon--color-warning.sg-icon--fill-light .sgmaincolor,.sg-theme-hcb .sg-icon--color-info.sg-icon--fill-light .sgmaincolor,.sg-theme-hcb .sg-icon--color-information.sg-icon--fill-light .sgmaincolor {
fill: transparent
}
.sg-theme-hcl .sg-icon--color-info.sg-icon--fill-lighter .sgmaincolor,.sg-theme-hcl .sg-icon--color-primary.sg-icon--fill-lighter .sgmaincolor,.sg-theme-hcl .sg-icon--color-success.sg-icon--fill-lighter .sgmaincolor,.sg-theme-hcl .sg-icon--color-warning.sg-icon--fill-lighter .sgmaincolor,.sg-theme-hcl .sg-icon--color-info.sg-icon--fill-lighter .sgmaincolor,.sg-theme-hcl .sg-icon--color-information.sg-icon--fill-lighter .sgmaincolor,.sg-theme-hcb .sg-icon--color-info.sg-icon--fill-lighter .sgmaincolor,.sg-theme-hcb .sg-icon--color-primary.sg-icon--fill-lighter .sgmaincolor,.sg-theme-hcb .sg-icon--color-success.sg-icon--fill-lighter .sgmaincolor,.sg-theme-hcb .sg-icon--color-warning.sg-icon--fill-lighter .sgmaincolor,.sg-theme-hcb .sg-icon--color-info.sg-icon--fill-lighter .sgmaincolor,.sg-theme-hcb .sg-icon--color-information.sg-icon--fill-lighter .sgmaincolor {
fill: transparent
}
.sg-icon-loader-circular {
animation: rotate 2s linear infinite;
height: 100%;
transform-origin: center center;
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto
}
.sg-icon-loader-path {
stroke-dasharray: 1,200;
stroke-dashoffset: 0;
animation: dash-animation 1.5s ease-in-out infinite,color-animation 2s ease-in-out infinite;
stroke-linecap: round
}
@keyframes rotate {
100% {
transform: rotate(360deg)
}
}
@keyframes dash-animation {
0% {
stroke-dasharray: 1,200;
stroke-dashoffset: 0
}
50% {
stroke-dasharray: 89,200;
stroke-dashoffset: -35px
}
100% {
stroke-dasharray: 89,200;
stroke-dashoffset: -124px
}
}
@keyframes color-animation {
100%,0% {
stroke: var(--color-warning)
}
20% {
stroke: var(--color-success)
}
66% {
stroke: var(--color-primary)
}
}
.sg-drawer-icon {
width: 40px;
height: 40px;
cursor: pointer;
transition-property: opacity,filter;
transition-duration: .15s;
transition-timing-function: linear;
font: inherit;
border-color: transparent;
text-transform: none;
background-color: transparent;
overflow: visible;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-negative: 0;
flex-shrink: 0;
border-radius: 50%
}
.sg-drawer-icon:hover {
background-color: var(--drawer-icon-background-hover)
}
.sg-drawer-icon-box {
width: 18px;
height: 18px;
display: inline-block;
position: relative
}
.sg-drawer-icon-inner {
display: block;
top: 50%;
margin-top: -2px;
transition-duration: .22s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
}
.sg-drawer-icon-inner::before {
top: -7px;
transition: top .1s .25s ease-in,opacity .1s ease-in
}
.sg-drawer-icon-inner::after {
bottom: -7px;
transition: bottom .1s .25s ease-in,transform .22s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}
.sg-drawer-icon-inner,.sg-drawer-icon-inner::before,.sg-drawer-icon-inner::after {
width: 18px;
height: 3px;
background-color: var(--drawer-icon-color);
border-radius: 4px;
position: absolute;
transition-property: transform;
transition-duration: .15s;
transition-timing-function: ease
}
.sg-drawer-icon-inner::before,.sg-drawer-icon-inner::after {
content: "";
display: block
}
.sg-drawer-icon--is-open .sg-drawer-icon-inner {
transform: rotate(225deg);
transition-delay: .12s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
}
.sg-drawer-icon--is-open .sg-drawer-icon-inner::before {
top: 0;
opacity: 0;
transition: top .1s ease-out,opacity .1s .12s ease-out
}
.sg-drawer-icon--is-open .sg-drawer-icon-inner::after {
bottom: 0;
transform: rotate(-90deg);
transition: bottom .1s ease-out,transform .22s .12s cubic-bezier(0.215, 0.61, 0.355, 1)
}
.sg-layout {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
overflow: hidden;
background: var(--background-main)
}
.sg-layout--absolute {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0
}
.sg-layout__page {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex: 1 1 0px;
flex: 1 1 0;
overflow: hidden;
z-index: 10
}
.sg-layout__wrapper {
display: -ms-flexbox;
display: flex;
height: 100%;
overflow-y: auto;
position: relative
}
.sg-layout__drawer {
width: 0;
height: 100%;
-ms-flex-negative: 0;
flex-shrink: 0;
position: relative;
z-index: 30;
overflow-x: hidden;
overflow-y: auto;
background-color: var(--drawer-background);
transition-property: width,transform;
transition-duration: 150ms;
transition-timing-function: linear;
transition-delay: 0ms
}
.sg-theme-hcl .sg-layout__drawer,.sg-theme-hcb .sg-layout__drawer {
border-right: 1px solid var(--high-contrast-foreground);
box-shadow: var(--first-level-box-shadow)
}
.sg-layout__drawer--opened {
width: 280px
}
.sg-layout__drawer--compact {
width: 280px
}
.sg-drawer__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
cursor: pointer
}
@media(max-width: 1024px) {
.sg-layout__drawer {
position:absolute;
top: 0;
bottom: 0;
left: 0;
transform: translateX(-260px);
box-shadow: var(--first-level-box-shadow)
}
.sg-layout__drawer--opened {
transform: translateX(0)
}
.sg-drawer__overlay--opened {
display: block
}
}
@media(max-width: 1500px) {
.sg-layout__drawer--opened {
width:250px
}
.sg-layout__drawer--compact {
width: 60px;
position: relative;
transform: translateX(0)
}
}
.sg-page {
position: relative;
-ms-flex: 1 1 0px;
flex: 1 1 0;
padding-left: 0;
background: var(--background-main);
overflow-x: hidden;
overflow-y: auto
}
.sg-page:focus {
outline: none
}
.sg-keyboard .sg-page:focus {
outline: none;
box-shadow: var(--focus-shadow)
}
.sg-section {
width: 100%;
transition: transform 300ms linear 0ms
}
.sg-section+.sg-section {
padding-top: 0
}
.sg-section__content {
margin: 0 auto;
max-width: 1440px
}
.sg-section--expanded .sg-section__content {
max-width: none
}
.sg-section--density-none .sg-section__content {
padding-left: 0;
padding-right: 0
}
.sg-section--density-cozy {
padding-top: 20px;
padding-bottom: 20px
}
.sg-section--density-cozy .sg-section__content {
padding-left: 20px;
padding-right: 20px
}
.sg-section--theme-white {
background-color: var(--section-background-white)
}
.sg-section--theme-dark {
background-color: var(--section-background-dark)
}
.sg-section--theme-light {
background-color: var(--section-background-light)
}
.sg-section--theme-yellow {
background-color: var(--section-background-yellow)
}
.sg-typography--align-left {
text-align: left;
-ms-flex-item-align: start;
align-self: flex-start
}
.sg-typography--align-center {
text-align: center;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center
}
.sg-typography--align-right {
text-align: right;
-ms-flex-item-align: end;
align-self: flex-end
}
.sg-typography--transform-capitalize {
text-transform: capitalize
}
.sg-typography--transform-lowercase {
text-transform: lowercase
}
.sg-typography--transform-uppercase {
text-transform: uppercase
}
.sg-typography--weight-light {
font-weight: 300
}
.sg-typography--weight-regular {
font-weight: 400
}
.sg-typography--weight-medium {
font-weight: 500
}
.sg-typography--weight-bold {
font-weight: 600
}
.sg-typography--weight-extra-bold {
font-weight: 700
}
.sg-typography--italic {
font-style: italic
}
.sg-typography--truncate {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.sg-typography--break-all {
word-break: break-all
}
.sg-typography--break-word {
word-break: break-word
}
.sg-link {
display: inline-block;
color: var(--color-primary);
cursor: pointer
}
.sg-link:focus,.sg-link:hover {
color: var(--color-primary-hovered);
outline: none
}
.sg-link:focus {
text-decoration: underline
}
.sg-link:active {
color: var(--color-primary-active)
}
.sg-link:visited:not(.sg-link--breadcrumb) {
color: var(--color-info)
}
.sg-theme-hcl .sg-link,.sg-theme-hcb .sg-link {
text-decoration: underline
}
.sg-link--decoration-dotted {
text-decoration: underline dotted currentColor
}
.sg-link--disabled {
color: var(--color-disabled);
cursor: default
}
.sg-link--disabled:hover,.sg-link--disabled:active,.sg-link--disabled:visited {
color: var(--color-disabled)
}
.sg-text {
word-break: break-word
}
.sg-text--size-small {
font-size: 14px;
line-height: 18px
}
.sg-text--size-medium {
font-size: 16px;
line-height: 26px
}
.sg-text--size-large {
font-size: 18px;
line-height: 28px
}
.sg-text--size-x-large {
font-size: 22px;
line-height: 32px
}
.sg-text--size-inherit {
font-size: inherit;
line-height: inherit
}
.sg-title--level-1 {
font-size: 40px;
line-height: 56px
}
.sg-title--level-2 {
font-size: 32px;
line-height: 40px
}
.sg-title--level-3 {
font-size: 26px;
line-height: 36px
}
.sg-title--level-4 {
font-size: 22px;
line-height: 32px
}
.sg-title--level-5 {
font-size: 18px;
line-height: 28px
}
.sg-title--level-6 {
font-size: 18px;
line-height: 28px;
text-transform: uppercase
}
.sg-title {
font-family: var(--font-family-component);
max-width: 100%
}
.sg-title:focus {
outline: none
}
.sg-keyboard .sg-title:focus {
outline: none;
box-shadow: var(--focus-shadow)
}
.sg-title--density-airy.sg-title--level-1 {
padding: 32px 0
}
.sg-title--density-airy.sg-title--level-2 {
padding: 34px 0
}
.sg-title--density-airy.sg-title--level-3 {
padding: 34px 0
}
.sg-title--density-airy.sg-title--level-4 {
padding: 36px 0
}
.sg-title--density-airy.sg-title--level-5 {
padding: 35px 0
}
.sg-title--density-airy.sg-title--level-6 {
padding: 35px 0
}
.sg-title--density-comfortable.sg-title--level-1 {
padding: 22px 0
}
.sg-title--density-comfortable.sg-title--level-2 {
padding: 24px 0
}
.sg-title--density-comfortable.sg-title--level-3 {
padding: 24px 0
}
.sg-title--density-comfortable.sg-title--level-4 {
padding: 26px 0
}
.sg-title--density-comfortable.sg-title--level-5 {
padding: 25px 0
}
.sg-title--density-comfortable.sg-title--level-6 {
padding: 25px 0
}
.sg-title--density-cozy.sg-title--level-1 {
padding: 12px 0
}
.sg-title--density-cozy.sg-title--level-2 {
padding: 14px 0
}
.sg-title--density-cozy.sg-title--level-3 {
padding: 14px 0
}
.sg-title--density-cozy.sg-title--level-4 {
padding: 16px 0
}
.sg-title--density-cozy.sg-title--level-5 {
padding: 15px 0
}
.sg-title--density-cozy.sg-title--level-6 {
padding: 15px 0
}
.sg-title--density-compact.sg-title--level-1 {
padding: 2px 0
}
.sg-title--density-compact.sg-title--level-2 {
padding: 4px 0
}
.sg-title--density-compact.sg-title--level-3 {
padding: 4px 0
}
.sg-title--density-compact.sg-title--level-4 {
padding: 6px 0
}
.sg-title--density-compact.sg-title--level-5 {
padding: 5px 0
}
.sg-title--density-compact.sg-title--level-6 {
padding: 5px 0
}
.sg-title--density-none {
padding: 0
}
@media(max-width: 1500px) {
.sg-title--level-1 {
font-size:30px;
line-height: 46px
}
.sg-title--level-2 {
font-size: 28px;
line-height: 38px
}
.sg-title--level-3 {
font-size: 24px;
line-height: 34px
}
.sg-title--level-4 {
font-size: 20px;
line-height: 30px
}
.sg-title--density-airy.sg-title--level-1 {
padding: 16px 0
}
.sg-title--density-airy.sg-title--level-2 {
padding: 18px 0
}
.sg-title--density-airy.sg-title--level-3 {
padding: 18px 0
}
.sg-title--density-airy.sg-title--level-4 {
padding: 20px 0
}
.sg-title--density-airy.sg-title--level-5 {
padding: 22px 0
}
.sg-title--density-airy.sg-title--level-6 {
padding: 22px 0
}
.sg-title--density-comfortable.sg-title--level-1 {
padding: 6px 0
}
.sg-title--density-comfortable.sg-title--level-2 {
padding: 8px 0
}
.sg-title--density-comfortable.sg-title--level-3 {
padding: 8px 0
}
.sg-title--density-comfortable.sg-title--level-4 {
padding: 10px 0
}
.sg-title--density-comfortable.sg-title--level-5 {
padding: 10px 0
}
.sg-title--density-comfortable.sg-title--level-6 {
padding: 10px 0
}
.sg-title--density-cozy.sg-title--level-4 {
padding: 10px 0
}
.sg-title--density-cozy.sg-title--level-5 {
padding: 10px 0
}
.sg-title--density-cozy.sg-title--level-6 {
padding: 10px 0
}
}
.sg-error-page {
padding-bottom: 180px;
background-color: #fff;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0
}
.sg-error-page__page-scroller {
width: 100%;
height: 100%;
position: fixed;
overflow-y: auto;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center
}
.sg-error-page__images-container {
margin: 0 auto;
width: 800px;
max-width: 100%;
position: absolute;
left: 0;
right: 0
}
.sg-error-page__text-container {
width: 800px;
max-width: 100%
}
.sg-error-page__container {
background-color: var(--background-main);
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
align-items: center;
padding-top: 50px
}
.sg-error-page__background-elements {
width: 800px;
height: 240px;
position: absolute
}
.sg-error-page__image {
width: 300px;
height: 240px;
margin: 0 auto
}
.sg-error-page__title {
margin-top: 240px
}
.sg-error-page__clouds {
width: 100%;
margin-top: 50px
}
.sg-error-page__clouds svg {
display: block
}
.sg-error-page__not-supported-browser {
width: 600px;
max-width: 100%;
padding: 20px;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center
}
.sg-error-page__browser-box-wrapper {
width: 100%
}
.sg-error-page__browser-box {
min-height: 80px;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center
}
@media(max-width: 800px) {
.sg-error-page__background-elements {
display:none
}
}
:root {
--padding-responsive: 30px
}
@media(max-width: 1500px) {
:root {
--padding-responsive: 20px
}
}
:root,.sg-theme-light {
--color-primary: #4343f0;
--color-primary-hovered: #1b0aa7;
--color-primary-active: #9287fc;
--color-secondary: #ebe9fa;
--color-secondary-hovered: #d7d1f9;
--color-secondary-active: #e8e7f4;
--color-tertiary: #e8f0fb;
--color-error: #e01e56;
--color-success: #21ab61;
--color-warning: #d78a33;
--color-instruction: #2888b5;
--color-info: #9b50d7;
--color-hint: #868585
}
:root,.sg-theme-light {
--background-main: #f9f9f9;
--background-component-primary: #fff;
--background-component-secondary: #efefef;
--background-component-tertiary: var(--color-tertiary);
--background-disabled: #ddd;
--background-white: #fff;
--background-slider: #ddd;
--background-overlay: rgba(54, 54, 54, 0.8);
--background-button-primary: var(--color-primary);
--background-button-primary-hovered: var(--color-primary-hovered);
--background-button-primary-active: var(--color-primary-active);
--background-button-secondary: var(--color-secondary);
--background-button-secondary-hovered: var(--color-secondary-hovered);
--background-button-secondary-active: var(--color-secondary-active);
--backround-popover-image-hover: rgba(0, 0, 0, 0.3)
}
:root,.sg-theme-light {
--typography-white: #fff;
--typography-light: #a4a4a4;
--typography-dark: #363636;
--typography-field-label-size: 14px;
--typography-table-label-size: 14px
}
:root {
--font-family-default: Roboto, Arial, Helvetica, sans-serif;
--font-family-component: Poppins, Century Gothic, CenturyGothic, sans-serif
}
:root,.sg-theme-light {
--color-scrollbar: #f2f2f2;
--color-scrollbar-thumb: #ddd;
--color-scrollbar-thumb-hover: #c2c2c2;
--color-button-white: #fff;
--color-icon-button: var(--color-primary);
--color-editor-icon: var(--typography-light);
--color-disabled: var(--typography-light);
--border-color-outer: #ddd;
--border-color-inner: #f2f2f2;
--border-color-focus: #ddd;
--border-color-default: #666;
--component-background-hover: var(--color-tertiary);
--component-color-hover: currentColor;
--avatar-color: var(--color-primary);
--avatar-background: var(--color-secondary);
--context-menu-background: var(--background-component-primary);
--chart-color-first: #2888b5;
--chart-color-second: #d78a33;
--chart-color-third: #21ab61;
--chart-color-fourth: #4343f0;
--chart-color-fifth: #86c87f;
--chart-color-sixth: #9b50d7;
--chart-color-seventh: #432667;
--chart-color-eighth: #e01e56;
--icon-color: #807d7d;
--icon-color-light: var(--color-tertiary);
--icon-color-lighter: var(--color-tertiary);
--loader-spinner-background-primary: #0d1939;
--loader-spinner-background-secondary: #4343f0;
--loader-spinner-background-tertiary: #98b7ff;
--loader-background: rgba(255, 255, 255, 0.75);
--loader-background-dark: rgba(71, 67, 64, 0.8);
--drawer-background: var(--background-main);
--drawer-icon-color: #fff;
--drawer-icon-background-hover: var(--background-button-primary);
--header-background: #0d1939;
--footer-background: transparent;
--navigation-background: transparent;
--navigation-background-hover: var(--color-tertiary);
--navigation-list-color: var(--typography-dark);
--navigation-list-color-selected: var(--typography-dark);
--navigation-list-background: transparent;
--navigation-list-background-opened: transparent;
--navigation-list-background-hovered: var(--color-tertiary);
--navigation-list-background-selected: #cce0fc;
--navigation-icon-color: var(--icon-color);
--navigation-icon-color-selected: var(--icon-color);
--navigation-button-color: var(--typography-dark);
--header-navigation-color: #fff;
--header-navigation-color-hover: var(--typography-dark);
--header-navigation-color-selected: var(--typography-dark);
--header-navigation-background: transparent;
--header-navigation-background-hover: var(--background-button-secondary);
--header-navigation-background-selected: #fff;
--header-second-navigation-background-selected: #fff;
--header-support-navigation-background-selected: #fff;
--section-background-white: var(--background-component-primary);
--section-background-yellow: var(--header-second-navigation-background-selected);
--section-background-light: var(--background-component-secondary);
--section-background-dark: var(--header-background);
--tooltip-color: #fff;
--tooltip-background-light: #fff;
--tooltip-background-dark: rgba(54, 54, 54, 0.9);
--background-color-error-focused: #d21d22;
--text-color-error-focused: #fff;
--border-color-input-error-focused: #d21d22;
--background-color-error-not-focused: #fae9ea;
--text-color-error-not-focused: #d21d22;
--border-color-input-error-not-focused: #fc8181
}
:root,.sg-theme-light {
--first-level-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05), 0 1px 5px 0 rgba(0, 0, 0, 0.05);
--second-level-box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.06), 0 4px 12px 0 rgba(0, 0, 0, 0.1);
--third-level-box-shadow: 0 17px 40px 0 rgba(0, 0, 0, 0.17), 0 12px 15px 0 rgba(0, 0, 0, 0.2);
--fourth-level-box-shadow: 0 25px 45px 0 rgba(0, 0, 0, 0.2), 0 16px 24px 0 rgba(0, 0, 0, 0.22);
--fifth-level-box-shadow: 0 40px 60px 0 rgba(0, 0, 0, 0.22), 0 27px 22px 0 rgba(0, 0, 0, 0.2);
--focus-shadow: inset 1px 1px 0 #24b8d2, inset -1px -1px 0 #24b8d2
}
.sg-theme-dark {
--color-primary: #b2b2f8;
--color-primary-hovered: #8c8cf9;
--color-primary-active: #ceceff;
--color-secondary: #484662;
--color-secondary-hovered: #4c4a69;
--color-secondary-active: #7b7995;
--color-tertiary: #464e5b;
--color-error: #fe7099;
--color-success: #27c671;
--color-warning: #f4a54a;
--color-instruction: #3db7f0;
--color-info: #ca8cfb;
--color-hint: #a9a9a9
}
.sg-theme-dark {
--background-main: #121212;
--background-component-primary: #363636;
--background-component-secondary: #444;
--background-component-tertiary: var(--color-tertiary);
--background-disabled: #666;
--background-slider: #858484;
--background-overlay: rgba(102, 102, 102, 0.95);
--background-button-primary: var(--color-primary);
--background-button-primary-hovered: var(--color-primary-hovered);
--background-button-primary-active: var(--color-primary-active);
--background-button-secondary: var(--color-secondary);
--background-button-secondary-hovered: var(--color-secondary-hovered);
--background-button-secondary-active: var(--color-secondary-active);
--backround-popover-image-hover: rgba(0, 0, 0, 0.3)
}
.sg-theme-dark {
--typography-white: #fff;
--typography-light: #c2c2c2;
--typography-dark: #fff
}
.sg-theme-dark {
--color-scrollbar: #f2f2f2;
--color-scrollbar-thumb: #ddd;
--color-scrollbar-thumb-hover: #c2c2c2;
--color-button-white: #363636;
--color-icon-button: var(--color-primary);
--color-disabled: #888;
--border-color-outer: #858484;
--border-color-inner: #444;
--border-color-focus: #fff;
--border-color-default: #858484;
--component-background-hover: var(--color-tertiary);
--component-color-hover: currentColor;
--avatar-color: var(--color-primary);
--avatar-background: var(--color-secondary);
--context-menu-background: var(--background-component-primary);
--chart-color-first: var(--color-instruction);
--chart-color-second: var(--color-warning);
--chart-color-third: var(--color-success);
--chart-color-fourth: #7c7cee;
--chart-color-fifth: #86c87f;
--chart-color-sixth: var(--color-info);
--chart-color-seventh: #c12aee;
--chart-color-eighth: var(--color-error);
--icon-color: #b9b9b9;
--icon-color-light: var(--color-tertiary);
--icon-color-lighter: var(--color-tertiary);
--loader-background: rgba(54, 54, 54, 0.75);
--loader-background-dark: rgba(54, 54, 54, 0.75);
--drawer-background: var(--background-main);
--drawer-icon-color: var(--color-icon-button);
--drawer-icon-background-hover: var(--color-tertiary);
--header-background: #363636;
--footer-background: transparent;
--navigation-background: transparent;
--navigation-background-hover: var(--color-tertiary);
--navigation-list-color: var(--typography-dark);
--navigation-list-color-selected: var(--typography-dark);
--navigation-list-background: transparent;
--navigation-list-background-opened: transparent;
--navigation-list-background-hovered: var(--color-tertiary);
--navigation-list-background-selected: #44556e;
--navigation-icon-color: var(--icon-color);
--navigation-icon-color-selected: var(--icon-color);
--navigation-button-color: var(--typography-dark);
--header-navigation-color: #fff;
--header-navigation-color-hover: var(--typography-dark);
--header-navigation-color-selected: var(--typography-dark);
--header-navigation-background: transparent;
--header-navigation-background-hover: var(--background-button-secondary);
--header-navigation-background-selected: #444;
--header-second-navigation-background-selected: #444;
--header-support-navigation-background-selected: #858484;
--section-background-white: var(--background-component-secondary);
--section-background-yellow: var(--background-component-secondary);
--section-background-light: var(--background-component-secondary);
--section-background-dark: var(--header-background);
--tooltip-color: #fff;
--tooltip-background-light: #fff;
--tooltip-background-dark: #666;
--text-color-error-focused: #fff;
--background-color-error-focused: #f57d7d;
--border-color-input-error-focused: #f57d7d;
--background-color-error-not-focused: #3c3030;
--text-color-error-not-focused: #f57d7d;
--border-color-input-error-not-focused: #ab5b5b
}
.sg-theme-dark {
--first-level-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05), 0 1px 5px 0 rgba(0, 0, 0, 0.05);
--second-level-box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.06), 0 4px 12px 0 rgba(0, 0, 0, 0.1);
--third-level-box-shadow: 0 17px 40px 0 rgba(0, 0, 0, 0.17), 0 12px 15px 0 rgba(0, 0, 0, 0.2);
--fourth-level-box-shadow: 0 25px 45px 0 rgba(0, 0, 0, 0.2), 0 16px 24px 0 rgba(0, 0, 0, 0.22);
--fifth-level-box-shadow: 0 40px 60px 0 rgba(0, 0, 0, 0.22), 0 27px 22px 0 rgba(0, 0, 0, 0.2);
--focus-shadow: inset 1px 1px 0 #24b8d2, inset -1px -1px 0 #24b8d2
}
.sg-theme-hcb {
--color-primary: #b2b2f8;
--color-primary-hovered: #8c8cf9;
--color-primary-active: #ceceff;
--color-secondary: #484662;
--color-secondary-hovered: #4c4a69;
--color-secondary-active: #7b7995;
--color-tertiary: #464e5b;
--color-error: #fe7099;
--color-success: #27c671;
--color-warning: #f4a54a;
--color-instruction: #3db7f0;
--color-info: #ca8cfb;
--color-hint: #a9a9a9
}
.sg-theme-hcb {
--background-main: #000;
--background-component-primary: #000;
--background-component-secondary: #000;
--background-component-tertiary: var(--color-tertiary);
--background-disabled: #888;
--background-slider: #fff;
--background-overlay: rgba(102, 102, 102, 0.95);
--background-highlight: #000;
--backround-employee: #000;
--backround-client: #000;
--backround-popover-image-hover: rgba(0, 0, 0, 0.3)
}
.sg-theme-hcb {
--typography-white: #fff;
--typography-light: #fff;
--typography-dark: #fff
}
.sg-theme-hcb {
--color-scrollbar: #f2f2f2;
--color-scrollbar-thumb: #ddd;
--color-scrollbar-thumb-hover: #c2c2c2;
--color-button-white: #000;
--color-icon-button: #fff;
--color-disabled: #888;
--border-color-outer: #ececec;
--border-color-inner: #ececec;
--border-color-focus: #fff;
--border-color-default: #fff;
--high-contrast-foreground: #fff;
--high-contrast-background: #000;
--component-background-hover: #1797ae;
--component-color-hover: currentColor;
--avatar-color: #000;
--avatar-background: #fff;
--context-menu-background: #000;
--icon-color-royal: #ececec;
--icon-color-royal-light: transparent;
--icon-color-royal-lighter: transparent;
--icon-color-ocean: #ececec;
--icon-color-ocean-light: transparent;
--icon-color-ocean-lighter: transparent;
--icon-color-mint: #ececec;
--icon-color-mint-light: transparent;
--icon-color-mint-lighter: transparent;
--icon-color-grassy: #ececec;
--icon-color-grassy-light: transparent;
--icon-color-grassy-lighter: transparent;
--icon-color-salmon: #ececec;
--icon-color-salmon-light: transparent;
--icon-color-salmon-lighter: transparent;
--icon-color-sunset: #ececec;
--icon-color-sunset-light: transparent;
--icon-color-sunset-lighter: transparent;
--icon-color-mango: #ececec;
--icon-color-mango-light: transparent;
--icon-color-mango-lighter: transparent;
--icon-color-bronze: #ececec;
--icon-color-bronze-light: transparent;
--icon-color-bronze-lighter: transparent;
--icon-logo-background-light: #fff;
--loader-background: rgba(0, 0, 0, 0.75);
--loader-background-dark: rgba(0, 0, 0, 0.75);
--drawer-background: #000;
--drawer-icon-color: #fff;
--drawer-icon-background-hover: #858484;
--header-background: #000;
--footer-background: #000;
--navigation-background: #000;
--navigation-background-hover: #363636;
--navigation-list-color: #363636;
--navigation-list-color-selected: #363636;
--navigation-list-background: #000;
--navigation-list-background-opened: #000;
--navigation-list-background-hovered: #444;
--navigation-list-background-selected: #fff;
--navigation-icon-color: #fff;
--navigation-icon-color-selected: #000;
--navigation-button-color: #fff;
--header-navigation-color: #fff;
--header-navigation-color-hover: #000;
--header-navigation-color-selected: #000;
--header-navigation-background: transparent;
--header-navigation-background-hover: #fff;
--header-navigation-background-selected: #fff;
--header-second-navigation-background-selected: #000;
--header-support-navigation-background-selected: #fff;
--section-background-white: var(--background-component-primary);
--section-background-yellow: var(--header-second-navigation-background-selected);
--section-background-light: var(--background-component-secondary);
--section-background-dark: var(--header-background);
--tooltip-color: #fff;
--tooltip-background-light: #000;
--tooltip-background-dark: #000;
--background-color-error-focused: #f98f8f;
--text-color-error-focused: #000;
--border-color-input-error-focused: #f98f8f;
--background-color-error-not-focused: #000;
--text-color-error-not-focused: #f98f8f;
--border-color-input-error-not-focused: #f98f8f
}
.sg-theme-hcb {
--first-level-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05), 0 1px 5px 0 rgba(0, 0, 0, 0.05);
--second-level-box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.06), 0 4px 12px 0 rgba(0, 0, 0, 0.1);
--third-level-box-shadow: 0 17px 40px 0 rgba(0, 0, 0, 0.17), 0 12px 15px 0 rgba(0, 0, 0, 0.2);
--fourth-level-box-shadow: 0 25px 45px 0 rgba(0, 0, 0, 0.2), 0 16px 24px 0 rgba(0, 0, 0, 0.22);
--fifth-level-box-shadow: 0 40px 60px 0 rgba(0, 0, 0, 0.22), 0 27px 22px 0 rgba(0, 0, 0, 0.2);
--focus-shadow: inset 1px 1px 0 #24b8d2, inset -1px -1px 0 #24b8d2
}
.sg-theme-hcl {
--color-primary: #0000ba;
--color-primary-hovered: #1b0aa7;
--color-primary-active: #7567f6;
--color-secondary: #ebe9fa;
--color-secondary-hovered: #d7d1f9;
--color-secondary-active: #e8e7f4;
--color-tertiary: #e8f0fb;
--color-error: #932929;
--color-success: #407a2e;
--color-warning: #8e6025;
--color-instruction: #4f2d61;
--color-info: #166e7e;
--color-hint: #c2c2c2
}
.sg-theme-hcl {
--background-main: #fff;
--background-component-primary: #fff;
--background-component-secondary: #fff;
--background-component-tertiary: var(--color-tertiary);
--background-disabled: #888;
--background-slider: #000;
--background-overlay: rgba(255, 255, 255, 0.95);
--background-highlight: #fff;
--background-button-primary: var(--color-primary);
--background-button-primary-hovered: var(--color-primary-hovered);
--background-button-primary-active: var(--color-primary-active);
--background-button-secondary: var(--color-secondary);
--background-button-secondary-hovered: var(--color-secondary-hovered);
--background-button-secondary-active: var(--color-secondary-active);
--backround-popover-image-hover: rgba(0, 0, 0, 0.3)
}
.sg-theme-hcl {
--typography-white: #000;
--typography-light: #000;
--typography-dark: #000
}
.sg-theme-hcl {
--color-scrollbar: #f2f2f2;
--color-scrollbar-thumb: #212121;
--color-scrollbar-thumb-hover: #000;
--color-button-white: #fff;
--color-icon-button: #000;
--color-disabled: #888;
--border-color-outer: #000;
--border-color-inner: #000;
--border-color-focus: #000;
--border-color-default: #000;
--high-contrast-foreground: #000;
--high-contrast-background: #fff;
--component-background-hover: #1797ae;
--component-color-hover: currentColor;
--avatar-color: #fff;
--avatar-background: #000;
--context-menu-background: #fff;
--icon-color: #000;
--icon-color-light: var(--color-tertiary);
--icon-color-lighter: var(--color-tertiary);
--loader-background: rgba(255, 255, 255, 0.75);
--loader-background-dark: rgba(255, 255, 255, 0.75);
--drawer-background: #fff;
--drawer-icon-color: #000;
--drawer-icon-background-hover: #858484;
--header-background: #fff;
--footer-background: #fff;
--navigation-background: #fff;
--navigation-background-hover: #363636;
--navigation-list-color: #363636;
--navigation-list-color-selected: #fff;
--navigation-list-background: #fff;
--navigation-list-background-opened: #fff;
--navigation-list-background-hovered: #ddd;
--navigation-list-background-selected: #000;
--navigation-icon-color: #000;
--navigation-icon-color-selected: #fff;
--navigation-button-color: #000;
--header-navigation-color: #000;
--header-navigation-color-hover: #fff;
--header-navigation-color-selected: #fff;
--header-navigation-background: transparent;
--header-navigation-background-hover: #000;
--header-navigation-background-selected: #000;
--header-second-navigation-background-selected: #fff;
--header-support-navigation-background-selected: #000;
--section-background-white: var(--background-component-primary);
--section-background-yellow: var(--header-second-navigation-background-selected);
--section-background-light: var(--background-component-secondary);
--section-background-dark: var(--header-background);
--tooltip-color: #000;
--tooltip-background-light: #fff;
--tooltip-background-dark: #fff;
--background-color-error-focused: #a92222;
--text-color-error-focused: #fff;
--border-color-input-error-focused: #a92222;
--background-color-error-not-focused: #fff;
--text-color-error-not-focused: #a92222;
--border-color-input-error-not-focused: #a92222
}
.sg-theme-hcl {
--first-level-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05), 0 1px 5px 0 rgba(0, 0, 0, 0.05);
--second-level-box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.06), 0 4px 12px 0 rgba(0, 0, 0, 0.1);
--third-level-box-shadow: 0 17px 40px 0 rgba(0, 0, 0, 0.17), 0 12px 15px 0 rgba(0, 0, 0, 0.2);
--fourth-level-box-shadow: 0 25px 45px 0 rgba(0, 0, 0, 0.2), 0 16px 24px 0 rgba(0, 0, 0, 0.22);
--fifth-level-box-shadow: 0 40px 60px 0 rgba(0, 0, 0, 0.22), 0 27px 22px 0 rgba(0, 0, 0, 0.2);
--focus-shadow: inset 1px 1px 0 #24b8d2, inset -1px -1px 0 #24b8d2
}
@font-face {
font-family: "Roboto";
font-style: normal;
font-weight: 400;
font-display: swap;
src: local("Roboto"),local("Roboto-Regular"),local("sans-serif"),url("https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2") format("woff2");
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF
}
@font-face {
font-family: "Roboto";
font-style: normal;
font-weight: 400;
font-display: swap;
src: local("Roboto"),local("Roboto-Regular"),local("sans-serif"),url("https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2") format("woff2");
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,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: "Roboto";
font-style: normal;
font-weight: 500;
font-display: swap;
src: local("Roboto Medium"),local("Roboto-Medium"),local("sans-serif-medium"),url("https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fChc4AMP6lbBP.woff2") format("woff2");
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF
}
@font-face {
font-family: "Roboto";
font-style: normal;
font-weight: 500;
font-display: swap;
src: local("Roboto Medium"),local("Roboto-Medium"),local("sans-serif-medium"),url("https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2") format("woff2");
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,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: "Roboto";
font-style: normal;
font-weight: 700;
font-display: swap;
src: local("Roboto Bold"),local("Roboto-Bold"),local("sans-serif"),url("https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfChc4AMP6lbBP.woff2") format("woff2");
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF
}
@font-face {
font-family: "Roboto";
font-style: normal;
font-weight: 700;
font-display: swap;
src: local("Roboto Bold"),local("Roboto-Bold"),local("sans-serif"),url("https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2") format("woff2");
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,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: "Poppins";
font-style: normal;
font-weight: 400;
font-display: swap;
src: local("Poppins"),local("Poppins-Regular"),local("sans-serif"),url("https://fonts.gstatic.com/s/poppins/v19/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2") format("woff2");
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 400;
font-display: swap;
src: local("Poppins"),local("Poppins-Regular"),local("sans-serif"),url("https://fonts.gstatic.com/s/poppins/v19/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2") format("woff2");
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,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: "Poppins";
font-style: normal;
font-weight: 500;
font-display: swap;
src: local("Poppins Medium"),local("Poppins-Medium"),local("sans-serif"),url("https://fonts.gstatic.com/s/poppins/v19/pxiByp8kv8JHgFVrLGT9Z1JlFd2JQEl8qw.woff2") format("woff2");
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 500;
font-display: swap;
src: local("Poppins Medium"),local("Poppins-Medium"),local("sans-serif"),url("https://fonts.gstatic.com/s/poppins/v19/pxiByp8kv8JHgFVrLGT9Z1xlFd2JQEk.woff2") format("woff2");
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,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: "Poppins";
font-style: normal;
font-weight: 700;
font-display: swap;
src: local("Poppins Bold"),local("Poppins-Bold"),local("sans-serif"),url("https://fonts.gstatic.com/s/poppins/v19/pxiByp8kv8JHgFVrLCz7Z1JlFd2JQEl8qw.woff2") format("woff2");
unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 700;
font-display: swap;
src: local("Poppins Bold"),local("Poppins-Bold"),local("sans-serif"),url("https://fonts.gstatic.com/s/poppins/v19/pxiByp8kv8JHgFVrLCz7Z1xlFd2JQEk.woff2") format("woff2");
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
scrollbar-face-color:var(--color-scrollbar);scrollbar-highlight-color: var(--color-scrollbar);
scrollbar-shadow-color:var(--color-scrollbar);scrollbar-track-color: var(--color-scrollbar);
-webkit-overflow-scrolling: touch
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: var(--color-scrollbar)
}
::-webkit-scrollbar-thumb {
background-color: var(--color-scrollbar-thumb);
border-radius: 12px
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--color-scrollbar-thumb-hover)
}
::-webkit-scrollbar-corner {
background-color: var(--color-scrollbar)
}
header,nav,section,main,article,aside,figure,toolbar,iframe,object,svg {
display: block
}
html {
background: #fff;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased
}
body {
color: var(--typography-dark);
background: var(--background-main);
font-weight: 400;
font-size: 16px !important;
font-family: var(--font-family-default);
line-height: 26px
}
h1,h2,h3,h4,h5,h6 {
line-height: normal
}
dl,dt,dd,ul {
list-style: none
}
ol {
padding: 0 0 0 20px
}
form,input,textarea,select {
resize: none
}
form,textarea {
width: 100%
}
input,textarea,select {
border-radius: 0
}
input:focus,textarea:focus,select:focus {
outline: none
}
input[type=submit]:focus,textarea[type=submit]:focus,select[type=submit]:focus {
border: none !important
}
input:-internal-autofill-selected,textarea:-internal-autofill-selected,select:-internal-autofill-selected {
transition: background-color 600000s 0s,color 600000s 0s
}
button {
outline: none;
border-radius: 0
}
img {
max-width: 100%;
height: auto;
display: block;
border: 0
}
table {
border-collapse: collapse
}
a {
text-decoration: none;
color: #000
}
:root {
--z-index-page: 10;
--z-index-pageHeader: 20;
--z-index-drawer: 30;
--z-index-sgValidation: 40;
--z-index-dropdown: 50;
--z-index-sticky: 60;
--z-index-fixed: 70;
--z-index-filter: 80;
--z-index-chat: 90;
--z-index-loadingModal: 100;
--z-index-modalBackground: 110;
--z-index-modal: 120;
--z-index-contextWraper: 130;
--z-index-chatNotificaion: 140;
--z-index-notification: 150;
--z-index-popover: 160;
--z-index-popoverZoomIn: 170;
--z-index-tooltip: 180
}
.sg-notifications {
position: fixed;
top: 100px;
right: 15px;
z-index: 150;
overflow-x: hidden;
padding: 10px 15px 30px 15px
}
.sg-notifications strong {
word-wrap: anywhere;
word-break: break-all
}
.sg-notifications-is-empty {
pointer-events: none
}
.sg-notification {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
min-height: 50px;
max-width: 390px;
padding-right: 10px;
border-radius: 12px;
background-color: var(--background-component-primary);
box-shadow: var(--second-level-box-shadow);
overflow: hidden;
transform: translateX(0);
transition: transform .3s ease
}
.sg-notification:focus {
outline: none
}
.sg-keyboard .sg-notification:focus {
outline: none;
box-shadow: var(--second-level-box-shadow),var(--focus-shadow)
}
.sg-notification:not(:first-child) {
margin-top: 20px
}
.sg-notification--animation-enter,.sg-notification--animation-exit {
transform: translateX(calc(100% + 20px))
}
.sg-theme-hcl .sg-notification,.sg-theme-hcb .sg-notification {
border: 1px solid var(--high-contrast-foreground)
}
.sg-notification__icon {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-item-align: stretch;
align-self: stretch;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 50px;
color: var(--typography-white)
}
.sg-notification__close-icon {
color: var(--color-icon-button);
cursor: pointer
}
.sg-notification__content {
-ms-flex: auto;
flex: auto;
padding: 15px 20px;
word-break: break-word
}
.sg-notification--success .sg-notification__icon {
background-color: var(--color-success)
}
.sg-notification--error .sg-notification__icon {
background-color: var(--color-error)
}
.sg-notification--warning .sg-notification__icon {
background-color: var(--color-warning)
}
.sg-notification--instruction .sg-notification__icon {
background-color: var(--color-instruction)
}
.sg-notification--info .sg-notification__icon {
background-color: var(--color-info)
}
.sg-notification--hint .sg-notification__icon {
background-color: var(--color-hint)
}
.sg-theme-hcl .sg-notification--success .sg-notification__icon,.sg-theme-hcl .sg-notification--error .sg-notification__icon,.sg-theme-hcl .sg-notification--warning .sg-notification__icon,.sg-theme-hcl .sg-notification--instruction .sg-notification__icon,.sg-theme-hcl .sg-notification--info .sg-notification__icon,.sg-theme-hcl .sg-notification--hint .sg-notification__icon,.sg-theme-hcb .sg-notification--success .sg-notification__icon,.sg-theme-hcb .sg-notification--error .sg-notification__icon,.sg-theme-hcb .sg-notification--warning .sg-notification__icon,.sg-theme-hcb .sg-notification--instruction .sg-notification__icon,.sg-theme-hcb .sg-notification--info .sg-notification__icon,.sg-theme-hcb .sg-notification--hint .sg-notification__icon {
color: var(--high-contrast-background)
}
@media(max-width: 800px) {
.sg-notifications {
top:60px;
left: 0;
right: 0;
overflow-x: visible;
padding: 0
}
.sg-notification {
transform: translateY(0);
transition: transform .7s ease;
max-width: 100%
}
.sg-notification--animation-enter {
transform: translateY(-100vh)
}
.sg-notification--animation-exit {
transform: translateY(calc(-50vh - 100%))
}
.sg-notification .sg-notification__icon {
width: 40px
}
.sg-notification .sg-notification__content {
padding: 10px 15px
}
.sg-notification__icon {
width: 40px
}
}
.sg-ripple-container {
position: relative;
overflow: hidden
}
.sg-ripple {
display: inline-block;
position: absolute;
width: 0;
height: 0;
transform: scale(0);
opacity: .4;
border-radius: 50%;
background: currentColor;
cursor: inherit;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
animation: ripple-animation .4s linear
}
@keyframes ripple-animation {
100% {
transform: scale(2);
opacity: 0
}
}
.sg-icon-button {
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
color: var(--color-icon-button);
cursor: pointer;
-ms-flex-negative: 0;
flex-shrink: 0
}
.sg-icon-button:focus {
outline: none
}
.sg-keyboard .sg-icon-button:focus {
outline: none;
box-shadow: var(--first-level-box-shadow)
}
.sg-icon-button:nth-child(n+2) {
margin-left: 10px
}
.sg-icon-button--circle {
border-radius: 50%
}
.sg-icon-button--small {
width: 30px;
height: 30px
}
.sg-icon-button--medium {
width: 36px;
height: 36px
}
.sg-icon-button--large {
width: 40px;
height: 40px
}
.sg-icon-button--x-large {
width: 50px;
height: 50px
}
.sg-icon-button--xx-large {
width: 60px;
height: 60px
}
.sg-icon-button--neutral {
color: var(--color-primary);
background-color: transparent
}
.sg-icon-button--neutral:focus {
outline: none
}
.sg-keyboard .sg-icon-button--neutral:focus {
outline: none;
background-color: var(--background-button-secondary)
}
.sg-icon-button--neutral:hover {
background-color: var(--background-button-secondary)
}
.sg-icon-button--neutral:active {
background-color: var(--background-button-secondary)
}
.sg-theme-hcl .sg-icon-button--neutral:hover,.sg-theme-hcl .sg-icon-button--neutral:focus,.sg-theme-hcl .sg-icon-button--neutral:active,.sg-theme-hcb .sg-icon-button--neutral:hover,.sg-theme-hcb .sg-icon-button--neutral:focus,.sg-theme-hcb .sg-icon-button--neutral:active {
color: var(--high-contrast-background);
background-color: var(--high-contrast-foreground)
}
.sg-icon-button--active.sg-icon-button--neutral {
background-color: var(--color-secondary)
}
.sg-icon-button--disabled {
opacity: .3;
background-color: transparent;
cursor: default
}
.sg-theme-hcl .sg-icon-button--active.sg-icon-button--neutral,.sg-theme-hcb .sg-icon-button--active.sg-icon-button--neutral {
color: var(--high-contrast-background);
background-color: var(--high-contrast-foreground)
}
.sg-action-list__wrapper:focus {
outline: none
}
.sg-keyboard .sg-action-list__wrapper:focus {
outline: none
}
.sg-keyboard .sg-action-list__wrapper:focus .sg-action-list {
box-shadow: var(--focus-shadow)
}
.sg-action-list__wrapper:nth-last-child(n+2) .sg-action-list {
border-bottom: 1px solid var(--border-color-outer)
}
.sg-action-list {
display: -ms-grid;
display: grid;
gap: var(--padding-responsive);
padding: var(--padding-responsive);
-ms-grid-columns: 50px 1fr auto;
grid-template-columns: 50px 1fr auto;
background-color: var(--background-component-primary)
}
.sg-action-list--clickable {
cursor: pointer
}
.sg-action-list--clickable:hover {
background-color: var(--component-background-hover)
}
.sg-action-list:nth-last-child(n+2) {
border-bottom: 1px solid var(--border-color-outer)
}
.sg-action-list__icon-wrapper {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center
}
.sg-action-list-item {
display: -ms-grid;
display: grid;
gap: var(--padding-responsive);
-ms-grid-columns: 50px 1fr auto;
grid-template-columns: 50px 1fr auto;
background-color: var(--background-component-secondary);
padding-top: 15px;
padding-right: var(--padding-responsive);
padding-bottom: 15px;
padding-left: var(--padding-responsive)
}
.sg-action-list-item:focus {
outline: none
}
.sg-keyboard .sg-action-list-item:focus {
outline: none;
box-shadow: var(--focus-shadow)
}
.sg-action-list-item--clickable {
cursor: pointer
}
.sg-action-list-item--clickable:hover {
background-color: var(--component-background-hover)
}
.sg-action-list-item:nth-last-child(n+2) {
border-bottom: 1px solid var(--border-color-outer)
}
.sg-action-list-item__icon-wrapper {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center
}
.sg-accordion {
display: -ms-flexbox;
display: flex;
width: 100%
}
.sg-accordion:focus {
outline: none
}
.sg-keyboard .sg-accordion:focus {
outline: none;
box-shadow: var(--focus-shadow)
}
.sg-accordion__actions {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
padding-right: 10px
}
.sg-accordion__content-wrapper {
width: 100%
}
.sg-accordion__toggle-icon {
cursor: pointer;
color: var(--color-icon-button)
}
.sg-accordion__header {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center
}
.sg-accordion-size-small .sg-accordion__actions {
height: 30px
}
.sg-accordion-size-small .sg-accordion__header {
min-height: 30px
}
.sg-accordion-size--medium .sg-accordion__actions {
height: 40px
}
.sg-accordion-size--medium .sg-accordion__header {
min-height: 40px
}
.sg-accordion-size-large .sg-accordion__actions {
height: 40px
}
.sg-accordion-size-large .sg-accordion__header {
min-height: 40px
}
.sg-accordion-size-x-large .sg-accordion__actions {
height: 40px
}
.sg-accordion-size-x-large .sg-accordion__header {
min-height: 40px
}
.sg-avatar-wrapper {
display: inline-block;
-ms-flex-negative: 0;
flex-shrink: 0
}
.sg-avatar-wrapper:focus {
outline: none
}
.sg-keyboard .sg-avatar-wrapper:focus {
outline: none;
box-shadow: var(--focus-shadow)
}
.sg-avatar {
display: inline-block;
border: 0
}
.sg-avatar--no-image {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-negative: 0;
flex-shrink: 0;
background-color: var(--avatar-background);
color: var(--avatar-color)
}
.sg-avatar-initials {
font-family: var(--font-family-component);
font-size: 1em
}
.sg-avatar-initials--weight-medium {
font-weight: 500
}
.sg-avatar-initials--weight-light {
font-weight: 300
}
.sg-avatar--radius-small {
border-radius: 2px
}
.sg-avatar--radius-medium {
border-radius: 12px
}
.sg-avatar--radius-full {
border-radius: 50%
}
.sg-box-notification {
height: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
align-items: center;
-ms-flex-positive: 1;
flex-grow: 1;
padding: 30px;
border-radius: 12px;
background-color: var(--background-component-primary);
border-left: 3px solid transparent
}
.sg-box-notification:focus {
outline: none
}
.sg-keyboard .sg-box-notification:focus {
outline: none;
box-shadow: var(--focus-shadow)
}
.sg-box-notification .sg-box-notification__title {
word-break: break-word
}
.sg-box-notification .sg-box-notification__title em {
color: var(--typography-dark);
font-style: normal;
word-wrap: break-word;
word-break: break-all
}
.sg-box-notification__icon {
position: relative
}
.sg-box-notification--success .sg-box-notification__icon {
color: var(--color-success)
}
.sg-box-notification--error .sg-box-notification__icon {
color: var(--color-error)
}
.sg-box-notification--warning .sg-box-notification__icon {
color: var(--color-warning)
}
.sg-box-notification--hint .sg-box-notification__icon {
color: var(--typography-dark)
}
@media(max-width: 1500px) {
.sg-box-notification {
padding:20px
}
}
.sg-button {
display: inline-block;
border-radius: 3rem;
border: none;
transition: color .2s linear,border-color .2s linear,background-color .2s linear;
color: var(--color-primary);
background-color: transparent;
font-family: var(--font-family-component);
font-weight: 600;
text-transform: uppercase;
-ms-flex-negative: 0;
flex-shrink: 0
}
.sg-button:focus {
outline: none
}
.sg-keyboard .sg-button:focus {
outline: none;
box-shadow: var(--first-level-box-shadow)
}
.sg-button:hover,.sg-button:focus {
cursor: pointer
}
.sg-button::-moz-focus-inner {
border: 0
}
.sg-button+.sg-button {
margin-left: 15px
}
.sg-theme-hcl .sg-button:hover,.sg-theme-hcb .sg-button:hover {
color: var(--high-contrast-background);
background-color: var(--high-contrast-foreground)
}
.sg-button--expanded {
width: 100%
}
.sg-button__content {
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
height: 100%
}
.sg-button__text {
line-height: 1
}
.sg-button__text:first-child {
margin-right: 10px
}
.sg-button__text:last-child {
margin-left: 10px
}
.sg-button__text:only-child {
margin-right: 0;
margin-left: 0
}
.sg-button--primary {
color: var(--color-button-white);
background-color: var(--background-button-primary)
}
.sg-button--primary:focus {
outline: none
}
.sg-keyboard .sg-button--primary:focus {
outline: none;
background-color: var(--background-button-primary-hovered)
}
.sg-button--primary:hover {
background-color: var(--background-button-primary-hovered)
}
.sg-button--secondary {
color: var(--color-primary);
background-color: var(--background-button-secondary)
}
.sg-button--secondary:focus {
outline: none
}
.sg-keyboard .sg-button--secondary:focus {
outline: none;
background-color: var(--background-button-secondary-hovered)
}
.sg-button--secondary:hover {
background-color: var(--background-button-secondary-hovered)
}
.sg-button--neutral {
color: var(--color-primary)
}
.sg-button--neutral:focus {
outline: none
}
.sg-keyboard .sg-button--neutral:focus {
outline: none;
background-color: var(--background-button-secondary-hovered)
}
.sg-button--neutral:hover {
background-color: var(--background-button-secondary-hovered)
}
.sg-button--xx-large {
height: 60px;
padding-left: 20px;
padding-right: 20px;
font-size: 18px
}
.sg-button--xx-large .sg-icon {
width: 22px;
height: 22px
}
.sg-button--x-large {
height: 50px;
padding-left: 28px;
padding-right: 28px;
font-size: 18px
}
.sg-button--x-large .sg-icon {
width: 20px;
height: 20px
}
.sg-button--large {
height: 40px;
padding-left: 23px;
padding-right: 23px;
font-size: 16px
}
.sg-button--large .sg-icon {
width: 16px;
height: 16px
}
.sg-button--medium {
height: 40px;
padding-left: 18px;
padding-right: 18px;
font-size: 14px
}
.sg-button--medium .sg-icon {
width: 16px;
height: 16px
}
.sg-button--small {
height: 30px;
padding-left: 18px;
padding-right: 18px;
font-size: 14px
}
.sg-button--small .sg-icon {
width: 12px;
height: 12px
}
.sg-button.sg-button--disabled {
color: var(--color-disabled);
background-color: transparent;
border-color: transparent;
pointer-events: none
}
.sg-button.sg-button--disabled:focus {
outline: none
}
.sg-keyboard .sg-button.sg-button--disabled:focus {
outline: none;
box-shadow: none
}
.sg-button.sg-button--disabled:hover {
color: var(--color-disabled);
background-color: transparent;
border-color: transparent;
box-shadow: none
}
@media(max-width: 1500px) {
.sg-button--xx-large {
height:50px
}
}
.sg-buttons-group {
display: -ms-inline-flexbox;
display: inline-flex
}
.sg-buttons-group:focus {
box-shadow: var(--first-level-box-shadow);
outline: none
}
.sg-buttons-group .sg-buttons-group__button.sg-buttons-group__button {
margin: 0
}
.sg-buttons-group .sg-buttons-group__button {
border-radius: 0;
position: relative;
z-index: 0
}
.sg-buttons-group .sg-buttons-group__button:focus {
z-index: 1
}
.sg-buttons-group .sg-buttons-group__button:first-child {
border-top-left-radius: 12px;
border-bottom-left-radius: 12px
}
.sg-buttons-group .sg-buttons-group__button:last-child {
border-top-right-radius: 12px;
border-bottom-right-radius: 12px
}
.sg-buttons-group .sg-buttons-group__button:not(:first-child) {
margin-left: -1px
}
.sg-buttons-group .sg-buttons-group__button--inactive {
border-color: var(--color-disabled);
border-width: 1px
}
.sg-buttons-group .sg-button.sg-button--disabled {
border: 1px solid var(--color-disabled);
color: var(--typography-light)
}
.sg-carousel {
position: relative
}
.sg-carousel:focus {
outline: none
}
.sg-keyboard .sg-carousel:focus {
outline: none
}
.sg-keyboard .sg-carousel:focus .sg-carousel__slide {
box-shadow: var(--first-level-box-shadow),var(--focus-shadow)
}
.sg-carousel__slides-wrapper {
overflow: hidden;
position: relative;
border-radius: 12px
}
.sg-carousel__slides-wrapper--shadow {
box-shadow: var(--first-level-box-shadow)
}
.sg-carousel__slides {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center
}
.sg-carousel__slide {
display: none;
-ms-flex: 1 0 100%;
flex: 1 0 100%;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
list-style-type: none
}
.sg-carousel__slide--active {
display: -ms-flexbox;
display: flex
}
.sg-carousel__slide--background-primary {
background-color: var(--background-component-primary)
}
.sg-carousel__slide--background-transparent {
background-color: transparent
}
.sg-carousel__arrow {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
width: 45px;
height: 45px;
background-color: var(--background-component-primary);
color: var(--color-primary);
opacity: .85;
box-shadow: var(--second-level-box-shadow);
border-radius: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
z-index: 1
}
.sg-carousel__arrow--left {
left: -17px
}
.sg-carousel__arrow--right {
right: -17px
}
.sg-carousel__arrow--hidden {
visibility: hidden
}
.sg-carousel__arrow:hover {
color: var(--color-secondary-hovered);
box-shadow: var(--first-level-box-shadow);
opacity: 1
}
.sg-carousel__indicators {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-pack: center;
justify-content: center;
margin-top: 10px
}
.sg-carousel__indicator {
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
cursor: pointer;
background-color: var(--border-color-outer)
}
.sg-carousel__indicator:hover {
box-shadow: var(--first-level-box-shadow);
background-color: var(--background-button-primary)
}
.sg-carousel__indicator--active,.sg-carousel__indicator:active {
background-color: var(--background-button-primary);
box-shadow: none
}
.sg-carousel__indicator:nth-of-type(n + 2) {
margin-left: 10px
}
.sg-carousel-next-animation-translate-enter {
transform: translateX(100%)
}
.sg-carousel-next-animation-translate-enter-active {
transform: translateX(0);
transition: transform 300ms ease-in
}
.sg-carousel-next-animation-translate-exit {
display: -ms-flexbox;
display: flex;
transition: transform 300ms ease-in;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0
}
.sg-carousel-next-animation-translate-exit-active {
transform: translateX(-100%);
transition: transform 300ms ease-in
}
.sg-carousel-prev-animation-translate-enter {
transform: translateX(-100%)
}
.sg-carousel-prev-animation-translate-enter-active {
transform: translateX(0);
transition: transform 300ms ease-in
}
.sg-carousel-prev-animation-translate-exit {
display: -ms-flexbox;
display: flex;
transition: transform 300ms ease-in;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0
}
.sg-carousel-prev-animation-translate-exit-active {
transform: translateX(100%);
transition: transform 300ms ease-in
}
.sg-checkbox {
display: -ms-inline-flexbox;
display: inline-flex;
cursor: pointer;
font-family: var(--font-family-component);
font-weight: 400;
text-align: start;
color: var(--color-primary)
}
.sg-checkbox:focus {
outline: 0
}
.sg-checkbox:focus .sg-checkbox__icon {
box-shadow: var(--first-level-box-shadow)
}
.sg-checkbox__input {
display: none
}
.sg-checkbox__icon {
-ms-flex-negative: 0;
flex-shrink: 0;
border-radius: 3px;
border: 1px solid currentColor;
color: currentColor;
background-color: var(--background-component-primary)
}
.sg-checkbox__label {
max-width: 100%;
color: var(--typography-dark)
}
.sg-checkbox--disabled {
opacity: .5;
pointer-events: none
}
.sg-checkbox--disabled .sg-checkbox__icon {
background-color: transparent
}
.sg-checkbox__input:focus~.sg-checkbox__icon {
box-shadow: var(--first-level-box-shadow)
}
.sg-checkbox__input:not(:checked):not(:indeterminate)~.sg-checkbox__icon {
border: 1px solid var(--border-color-default);
color: transparent
}
.sg-checkbox--expand {
width: 100%
}
.sg-checkbox--small {
padding: 7px 0
}
.sg-checkbox--small .sg-checkbox__icon {
width: 12px;
height: 12px;
margin-top: 1px;
padding: 1px
}
.sg-checkbox--small .sg-checkbox__label {
padding-right: 6px;
max-width: calc(100% - 12px);
font-size: 14px;
line-height: 18px
}
.sg-checkbox--small .sg-checkbox__icon+.sg-checkbox__label {
padding-left: 6px;
padding-right: 0
}
.sg-checkbox--medium {
padding: 9px 0
}
.sg-checkbox--medium .sg-checkbox__icon {
width: 18px;
height: 18px;
margin-top: 1px;
padding: 3px
}
.sg-checkbox--medium .sg-checkbox__label {
padding-right: 8px;
max-width: calc(100% - 18px);
font-size: 16px;
line-height: 26px
}
.sg-checkbox--medium .sg-checkbox__icon+.sg-checkbox__label {
padding-left: 8px;
padding-right: 0
}
.sg-checkbox--large {
padding: 11px 0
}
.sg-checkbox--large .sg-checkbox__icon {
width: 22px;
height: 22px;
margin-top: 2px;
padding: 5px
}
.sg-checkbox--large .sg-checkbox__label {
padding-right: 10px;
max-width: calc(100% - 22px);
font-size: 18px;
line-height: 28px
}
.sg-checkbox--large .sg-checkbox__icon+.sg-checkbox__label {
padding-left: 10px;
padding-right: 0
}
.sg-checkbox--x-large {
padding: 15px 0
}
.sg-checkbox--x-large .sg-checkbox__icon {
width: 25px;
height: 25px;
margin-top: 2px;
padding: 5px
}
.sg-checkbox--x-large .sg-checkbox__label {
max-width: calc(100% - 25px);
padding-right: 15px;
font-size: 22px;
line-height: 32px
}
.sg-checkbox--x-large .sg-checkbox__icon+.sg-checkbox__label {
padding-left: 15px;
padding-right: 0
}
.sg-checkbox--align-flex-start {
-ms-flex-align: start;
align-items: flex-start
}
.sg-checkbox--align-center {
-ms-flex-align: center;
align-items: center
}
.sg-checkbox--align-flex-end {
-ms-flex-align: end;
align-items: flex-end
}
.sg-checkbox--align-baseline {
-ms-flex-align: baseline;
align-items: baseline
}
.sg-checkbox--align-stretch {
-ms-flex-align: stretch;
align-items: stretch
}
.sg-chip {
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-ms-flex-align: center;
align-items: center;
padding: 1px 5px;
background-color: var(--background-component-secondary);
border-radius: 12px;
max-width: 100%;
min-height: 28px
}
.sg-chip:focus {
box-shadow: var(--first-level-box-shadow);
outline: none
}
.sg-chip--selected {
border: 1px solid #906090
}
.sg-chip_item:first-child {
margin-right: 5px;
margin-left: 5px
}
.sg-chip_item--icon {
color: var(--color-primary);
cursor: pointer
}
.sg-chip_item--icon:hover {
color: var(--color-secondary-hovered)
}
.sg-chip_item--icon:active {
color: var(--color-secondary-active)
}
.sg-chip_item--text {
white-space: nowrap
}
.sg-chip--state-error {
background-color: var(--color-error)
}
.sg-chip--state-error .sg-chip_item--icon,.sg-chip--state-error .sg-chip_item--text {
color: var(--typography-white)
}
.sg-grid-column {
border-radius: inherit
}
.sg-grid-column--flex {
display: -ms-flexbox;
display: flex
}
.sg-grid-column--justify-flex-start {
-ms-flex-pack: start;
justify-content: flex-start
}
.sg-grid-column--justify-center {
-ms-flex-pack: center;
justify-content: center
}
.sg-grid-column--justify-flex-end {
-ms-flex-pack: end;
justify-content: flex-end
}
.sg-grid-column--justify-space-between {
-ms-flex-pack: justify;
justify-content: space-between
}
.sg-grid-column--justify-space-around {
-ms-flex-pack: distribute;
justify-content: space-around
}
.sg-grid-column--justify-self-flex-start {
justify-self: flex-start
}
.sg-grid-column--justify-self-center {
justify-self: center
}
.sg-grid-column--justify-self-flex-end {
justify-self: flex-end
}
.sg-grid-column--justify-self-stretch {
justify-self: stretch
}
.sg-grid-column--align-flex-start {
-ms-flex-align: start;
align-items: flex-start
}
.sg-grid-column--align-center {
-ms-flex-align: center;
align-items: center
}
.sg-grid-column--align-flex-end {
-ms-flex-align: end;
align-items: flex-end
}
.sg-grid-column--align-baseline {
-ms-flex-align: baseline;
align-items: baseline
}
.sg-grid-column--align-stretch {
-ms-flex-align: stretch;
align-items: stretch
}
.sg-grid-column--xs-span-1 {
-ms-grid-column-span: 1;
grid-column-end: span 1
}
.sg-grid-column--xs-span-2 {
-ms-grid-column-span: 2;
grid-column-end: span 2
}
.sg-grid-column--xs-span-3 {
-ms-grid-column-span: 3;
grid-column-end: span 3
}
.sg-grid-column--xs-span-4 {
-ms-grid-column-span: 4;
grid-column-end: span 4
}
.sg-grid-column--xs-span-5 {
-ms-grid-column-span: 5;
grid-column-end: span 5
}
.sg-grid-column--xs-span-6 {
-ms-grid-column-span: 6;
grid-column-end: span 6
}
.sg-grid-column--xs-span-7 {
-ms-grid-column-span: 7;
grid-column-end: span 7
}
.sg-grid-column--xs-span-8 {
-ms-grid-column-span: 8;
grid-column-end: span 8
}
.sg-grid-column--xs-span-9 {
-ms-grid-column-span: 9;
grid-column-end: span 9
}
.sg-grid-column--xs-span-10 {
-ms-grid-column-span: 10;
grid-column-end: span 10
}
.sg-grid-column--xs-span-11 {
-ms-grid-column-span: 11;
grid-column-end: span 11
}
.sg-grid-column--xs-span-12 {
-ms-grid-column-span: 12;
grid-column-end: span 12
}
.sg-grid-column--xs-span-13 {
-ms-grid-column-span: 13;
grid-column-end: span 13
}
.sg-grid-column--xs-span-14 {
-ms-grid-column-span: 14;
grid-column-end: span 14
}
.sg-grid-column--xs-start-1 {
-ms-grid-column: 1;
grid-column-start: 1
}
.sg-grid-column--xs-start-2 {
-ms-grid-column: 2;
grid-column-start: 2
}
.sg-grid-column--xs-start-3 {
-ms-grid-column: 3;
grid-column-start: 3
}
.sg-grid-column--xs-start-4 {
-ms-grid-column: 4;
grid-column-start: 4
}
.sg-grid-column--xs-start-5 {
-ms-grid-column: 5;
grid-column-start: 5
}
.sg-grid-column--xs-start-6 {
-ms-grid-column: 6;
grid-column-start: 6
}
.sg-grid-column--xs-start-7 {
-ms-grid-column: 7;
grid-column-start: 7
}
.sg-grid-column--xs-start-8 {
-ms-grid-column: 8;
grid-column-start: 8
}
.sg-grid-column--xs-start-9 {
-ms-grid-column: 9;
grid-column-start: 9
}
.sg-grid-column--xs-start-10 {
-ms-grid-column: 10;
grid-column-start: 10
}
.sg-grid-column--xs-start-11 {
-ms-grid-column: 11;
grid-column-start: 11
}
.sg-grid-column--xs-start-12 {
-ms-grid-column: 12;
grid-column-start: 12
}
.sg-grid-column--xs-start-13 {
-ms-grid-column: 13;
grid-column-start: 13
}
.sg-grid-column--xs-start-14 {
-ms-grid-column: 14;
grid-column-start: 14
}
@media(min-width: 801px) {
.sg-grid-column--sm-span-1 {
-ms-grid-column-span:1;
grid-column-end: span 1
}
.sg-grid-column--sm-span-2 {
-ms-grid-column-span: 2;
grid-column-end: span 2
}
.sg-grid-column--sm-span-3 {
-ms-grid-column-span: 3;
grid-column-end: span 3
}
.sg-grid-column--sm-span-4 {
-ms-grid-column-span: 4;
grid-column-end: span 4
}
.sg-grid-column--sm-span-5 {
-ms-grid-column-span: 5;
grid-column-end: span 5
}
.sg-grid-column--sm-span-6 {
-ms-grid-column-span: 6;
grid-column-end: span 6
}
.sg-grid-column--sm-span-7 {
-ms-grid-column-span: 7;
grid-column-end: span 7
}
.sg-grid-column--sm-span-8 {
-ms-grid-column-span: 8;
grid-column-end: span 8
}
.sg-grid-column--sm-span-9 {
-ms-grid-column-span: 9;
grid-column-end: span 9
}
.sg-grid-column--sm-span-10 {
-ms-grid-column-span: 10;
grid-column-end: span 10
}
.sg-grid-column--sm-span-11 {
-ms-grid-column-span: 11;
grid-column-end: span 11
}
.sg-grid-column--sm-span-12 {
-ms-grid-column-span: 12;
grid-column-end: span 12
}
.sg-grid-column--sm-span-13 {
-ms-grid-column-span: 13;
grid-column-end: span 13
}
.sg-grid-column--sm-span-14 {
-ms-grid-column-span: 14;
grid-column-end: span 14
}
.sg-grid-column--sm-start-1 {
-ms-grid-column: 1;
grid-column-start: 1
}
.sg-grid-column--sm-start-2 {
-ms-grid-column: 2;
grid-column-start: 2
}
.sg-grid-column--sm-start-3 {
-ms-grid-column: 3;
grid-column-start: 3
}
.sg-grid-column--sm-start-4 {
-ms-grid-column: 4;
grid-column-start: 4
}
.sg-grid-column--sm-start-5 {
-ms-grid-column: 5;
grid-column-start: 5
}
.sg-grid-column--sm-start-6 {
-ms-grid-column: 6;
grid-column-start: 6
}
.sg-grid-column--sm-start-7 {
-ms-grid-column: 7;
grid-column-start: 7
}
.sg-grid-column--sm-start-8 {
-ms-grid-column: 8;
grid-column-start: 8
}
.sg-grid-column--sm-start-9 {
-ms-grid-column: 9;
grid-column-start: 9
}
.sg-grid-column--sm-start-10 {
-ms-grid-column: 10;
grid-column-start: 10
}
.sg-grid-column--sm-start-11 {
-ms-grid-column: 11;
grid-column-start: 11
}
.sg-grid-column--sm-start-12 {
-ms-grid-column: 12;
grid-column-start: 12
}
.sg-grid-column--sm-start-13 {
-ms-grid-column: 13;
grid-column-start: 13
}
.sg-grid-column--sm-start-14 {
-ms-grid-column: 14;
grid-column-start: 14
}
}
@media(min-width: 1024px) {
.sg-grid-column--m-span-1 {
-ms-grid-column-span:1;
grid-column-end: span 1
}
.sg-grid-column--m-span-2 {
-ms-grid-column-span: 2;
grid-column-end: span 2
}
.sg-grid-column--m-span-3 {
-ms-grid-column-span: 3;
grid-column-end: span 3
}
.sg-grid-column--m-span-4 {
-ms-grid-column-span: 4;
grid-column-end: span 4
}
.sg-grid-column--m-span-5 {
-ms-grid-column-span: 5;
grid-column-end: span 5
}
.sg-grid-column--m-span-6 {
-ms-grid-column-span: 6;
grid-column-end: span 6
}
.sg-grid-column--m-span-7 {
-ms-grid-column-span: 7;
grid-column-end: span 7
}
.sg-grid-column--m-span-8 {
-ms-grid-column-span: 8;
grid-column-end: span 8
}
.sg-grid-column--m-span-9 {
-ms-grid-column-span: 9;
grid-column-end: span 9
}
.sg-grid-column--m-span-10 {
-ms-grid-column-span: 10;
grid-column-end: span 10
}
.sg-grid-column--m-span-11 {
-ms-grid-column-span: 11;
grid-column-end: span 11
}
.sg-grid-column--m-span-12 {
-ms-grid-column-span: 12;
grid-column-end: span 12
}
.sg-grid-column--m-span-13 {
-ms-grid-column-span: 13;
grid-column-end: span 13
}
.sg-grid-column--m-span-14 {
-ms-grid-column-span: 14;
grid-column-end: span 14
}
.sg-grid-column--m-start-1 {
-ms-grid-column: 1;
grid-column-start: 1
}
.sg-grid-column--m-start-2 {
-ms-grid-column: 2;
grid-column-start: 2
}
.sg-grid-column--m-start-3 {
-ms-grid-column: 3;
grid-column-start: 3
}
.sg-grid-column--m-start-4 {
-ms-grid-column: 4;
grid-column-start: 4
}
.sg-grid-column--m-start-5 {
-ms-grid-column: 5;
grid-column-start: 5
}
.sg-grid-column--m-start-6 {
-ms-grid-column: 6;
grid-column-start: 6
}
.sg-grid-column--m-start-7 {
-ms-grid-column: 7;
grid-column-start: 7
}
.sg-grid-column--m-start-8 {
-ms-grid-column: 8;
grid-column-start: 8
}
.sg-grid-column--m-start-9 {
-ms-grid-column: 9;
grid-column-start: 9
}
.sg-grid-column--m-start-10 {
-ms-grid-column: 10;
grid-column-start: 10
}
.sg-grid-column--m-start-11 {
-ms-grid-column: 11;
grid-column-start: 11
}
.sg-grid-column--m-start-12 {
-ms-grid-column: 12;
grid-column-start: 12
}
.sg-grid-column--m-start-13 {
-ms-grid-column: 13;
grid-column-start: 13
}
.sg-grid-column--m-start-14 {
-ms-grid-column: 14;
grid-column-start: 14
}
}
@media(min-width: 1501px) {
.sg-grid-column--lg-span-1 {
-ms-grid-column-span:1;
grid-column-end: span 1
}
.sg-grid-column--lg-span-2 {
-ms-grid-column-span: 2;
grid-column-end: span 2
}
.sg-grid-column--lg-span-3 {
-ms-grid-column-span: 3;
grid-column-end: span 3
}
.sg-grid-column--lg-span-4 {
-ms-grid-column-span: 4;
grid-column-end: span 4
}
.sg-grid-column--lg-span-5 {
-ms-grid-column-span: 5;
grid-column-end: span 5
}
.sg-grid-column--lg-span-6 {
-ms-grid-column-span: 6;
grid-column-end: span 6
}
.sg-grid-column--lg-span-7 {
-ms-grid-column-span: 7;
grid-column-end: span 7
}
.sg-grid-column--lg-span-8 {
-ms-grid-column-span: 8;
grid-column-end: span 8
}
.sg-grid-column--lg-span-9 {
-ms-grid-column-span: 9;
grid-column-end: span 9
}
.sg-grid-column--lg-span-10 {
-ms-grid-column-span: 10;
grid-column-end: span 10
}
.sg-grid-column--lg-span-11 {
-ms-grid-column-span: 11;
grid-column-end: span 11
}
.sg-grid-column--lg-span-12 {
-ms-grid-column-span: 12;
grid-column-end: span 12
}
.sg-grid-column--lg-span-13 {
-ms-grid-column-span: 13;
grid-column-end: span 13
}
.sg-grid-column--lg-span-14 {
-ms-grid-column-span: 14;
grid-column-end: span 14
}
.sg-grid-column--lg-start-1 {
-ms-grid-column: 1;
grid-column-start: 1
}
.sg-grid-column--lg-start-2 {
-ms-grid-column: 2;
grid-column-start: 2
}
.sg-grid-column--lg-start-3 {
-ms-grid-column: 3;
grid-column-start: 3
}
.sg-grid-column--lg-start-4 {
-ms-grid-column: 4;
grid-column-start: 4
}
.sg-grid-column--lg-start-5 {
-ms-grid-column: 5;
grid-column-start: 5
}
.sg-grid-column--lg-start-6 {
-ms-grid-column: 6;
grid-column-start: 6
}
.sg-grid-column--lg-start-7 {
-ms-grid-column: 7;
grid-column-start: 7
}
.sg-grid-column--lg-start-8 {
-ms-grid-column: 8;
grid-column-start: 8
}
.sg-grid-column--lg-start-9 {
-ms-grid-column: 9;
grid-column-start: 9
}
.sg-grid-column--lg-start-10 {
-ms-grid-column: 10;
grid-column-start: 10
}
.sg-grid-column--lg-start-11 {
-ms-grid-column: 11;
grid-column-start: 11
}
.sg-grid-column--lg-start-12 {
-ms-grid-column: 12;
grid-column-start: 12
}
.sg-grid-column--lg-start-13 {
-ms-grid-column: 13;
grid-column-start: 13
}
.sg-grid-column--lg-start-14 {
-ms-grid-column: 14;
grid-column-start: 14
}
}
.sg-grid-column--ie11.sg-grid-column--xs-span-1 {
width: calc((100% - 1px) / 14 * 1)
}
.sg-grid-column--ie11.sg-grid-column--xs-span-2 {
width: calc((100% - 1px) / 14 * 2)
}
.sg-grid-column--ie11.sg-grid-column--xs-span-3 {
width: calc((100% - 1px) / 14 * 3)
}
.sg-grid-column--ie11.sg-grid-column--xs-span-4 {
width: calc((100% - 1px) / 14 * 4)
}
.sg-grid-column--ie11.sg-grid-column--xs-span-5 {
width: calc((100% - 1px) / 14 * 5)
}
.sg-grid-column--ie11.sg-grid-column--xs-span-6 {
width: calc((100% - 1px) / 14 * 6)
}
.sg-grid-column--ie11.sg-grid-column--xs-span-7 {
width: calc((100% - 1px) / 14 * 7)
}
.sg-grid-column--ie11.sg-grid-column--xs-span-8 {
width: calc((100% - 1px) / 14 * 8)
}
.sg-grid-column--ie11.sg-grid-column--xs-span-9 {
width: calc((100% - 1px) / 14 * 9)
}
.sg-grid-column--ie11.sg-grid-column--xs-span-10 {
width: calc((100% - 1px) / 14 * 10)
}
.sg-grid-column--ie11.sg-grid-column--xs-span-11 {
width: calc((100% - 1px) / 14 * 11)
}
.sg-grid-column--ie11.sg-grid-column--xs-span-12 {
width: calc((100% - 1px) / 14 * 12)
}
.sg-grid-column--ie11.sg-grid-column--xs-span-13 {
width: calc((100% - 1px) / 14 * 13)
}
.sg-grid-column--ie11.sg-grid-column--xs-span-14 {
width: calc((100% - 1px) / 14 * 14)
}
@media(min-width: 801px) {
.sg-grid-column--ie11.sg-grid-column--sm-span-1 {
width:calc((100% - 1px) / 14 * 1)
}
.sg-grid-column--ie11.sg-grid-column--sm-span-2 {
width: calc((100% - 1px) / 14 * 2)
}
.sg-grid-column--ie11.sg-grid-column--sm-span-3 {
width: calc((100% - 1px) / 14 * 3)
}
.sg-grid-column--ie11.sg-grid-column--sm-span-4 {
width: calc((100% - 1px) / 14 * 4)
}
.sg-grid-column--ie11.sg-grid-column--sm-span-5 {
width: calc((100% - 1px) / 14 * 5)
}
.sg-grid-column--ie11.sg-grid-column--sm-span-6 {
width: calc((100% - 1px) / 14 * 6)
}
.sg-grid-column--ie11.sg-grid-column--sm-span-7 {
width: calc((100% - 1px) / 14 * 7)
}
.sg-grid-column--ie11.sg-grid-column--sm-span-8 {
width: calc((100% - 1px) / 14 * 8)
}
.sg-grid-column--ie11.sg-grid-column--sm-span-9 {
width: calc((100% - 1px) / 14 * 9)
}
.sg-grid-column--ie11.sg-grid-column--sm-span-10 {
width: calc((100% - 1px) / 14 * 10)
}
.sg-grid-column--ie11.sg-grid-column--sm-span-11 {
width: calc((100% - 1px) / 14 * 11)
}
.sg-grid-column--ie11.sg-grid-column--sm-span-12 {
width: calc((100% - 1px) / 14 * 12)
}
.sg-grid-column--ie11.sg-grid-column--sm-span-13 {
width: calc((100% - 1px) / 14 * 13)
}
.sg-grid-column--ie11.sg-grid-column--sm-span-14 {
width: calc((100% - 1px) / 14 * 14)
}
}
@media(min-width: 1024px) {
.sg-grid-column--ie11.sg-grid-column--m-span-1 {
width:calc((100% - 1px) / 14 * 1)
}
.sg-grid-column--ie11.sg-grid-column--m-span-2 {
width: calc((100% - 1px) / 14 * 2)
}
.sg-grid-column--ie11.sg-grid-column--m-span-3 {
width: calc((100% - 1px) / 14 * 3)
}
.sg-grid-column--ie11.sg-grid-column--m-span-4 {
width: calc((100% - 1px) / 14 * 4)
}
.sg-grid-column--ie11.sg-grid-column--m-span-5 {
width: calc((100% - 1px) / 14 * 5)
}
.sg-grid-column--ie11.sg-grid-column--m-span-6 {
width: calc((100% - 1px) / 14 * 6)
}
.sg-grid-column--ie11.sg-grid-column--m-span-7 {
width: calc((100% - 1px) / 14 * 7)
}
.sg-grid-column--ie11.sg-grid-column--m-span-8 {
width: calc((100% - 1px) / 14 * 8)
}
.sg-grid-column--ie11.sg-grid-column--m-span-9 {
width: calc((100% - 1px) / 14 * 9)
}
.sg-grid-column--ie11.sg-grid-column--m-span-10 {
width: calc((100% - 1px) / 14 * 10)
}
.sg-grid-column--ie11.sg-grid-column--m-span-11 {
width: calc((100% - 1px) / 14 * 11)
}
.sg-grid-column--ie11.sg-grid-column--m-span-12 {
width: calc((100% - 1px) / 14 * 12)
}
.sg-grid-column--ie11.sg-grid-column--m-span-13 {
width: calc((100% - 1px) / 14 * 13)
}
.sg-grid-column--ie11.sg-grid-column--m-span-14 {
width: calc((100% - 1px) / 14 * 14)
}
}
@media(min-width: 1501px) {
.sg-grid-column--ie11.sg-grid-column--lg-span-1 {
width:calc((100% - 1px) / 14 * 1)
}
.sg-grid-column--ie11.sg-grid-column--lg-span-2 {
width: calc((100% - 1px) / 14 * 2)
}
.sg-grid-column--ie11.sg-grid-column--lg-span-3 {
width: calc((100% - 1px) / 14 * 3)
}
.sg-grid-column--ie11.sg-grid-column--lg-span-4 {
width: calc((100% - 1px) / 14 * 4)
}
.sg-grid-column--ie11.sg-grid-column--lg-span-5 {
width: calc((100% - 1px) / 14 * 5)
}
.sg-grid-column--ie11.sg-grid-column--lg-span-6 {
width: calc((100% - 1px) / 14 * 6)
}
.sg-grid-column--ie11.sg-grid-column--lg-span-7 {
width: calc((100% - 1px) / 14 * 7)
}
.sg-grid-column--ie11.sg-grid-column--lg-span-8 {
width: calc((100% - 1px) / 14 * 8)
}
.sg-grid-column--ie11.sg-grid-column--lg-span-9 {
width: calc((100% - 1px) / 14 * 9)
}
.sg-grid-column--ie11.sg-grid-column--lg-span-10 {
width: calc((100% - 1px) / 14 * 10)
}
.sg-grid-column--ie11.sg-grid-column--lg-span-11 {
width: calc((100% - 1px) / 14 * 11)
}
.sg-grid-column--ie11.sg-grid-column--lg-span-12 {
width: calc((100% - 1px) / 14 * 12)
}
.sg-grid-column--ie11.sg-grid-column--lg-span-13 {
width: calc((100% - 1px) / 14 * 13)
}
.sg-grid-column--ie11.sg-grid-column--lg-span-14 {
width: calc((100% - 1px) / 14 * 14)
}
}
@supports not (grid-gap: 10px) {
.sg-grid-column--xs-span-1 {
width:calc((100% - 1px) / 14 * 1)
}
.sg-grid-column--xs-span-2 {
width: calc((100% - 1px) / 14 * 2)
}
.sg-grid-column--xs-span-3 {
width: calc((100% - 1px) / 14 * 3)
}
.sg-grid-column--xs-span-4 {
width: calc((100% - 1px) / 14 * 4)
}
.sg-grid-column--xs-span-5 {
width: calc((100% - 1px) / 14 * 5)
}
.sg-grid-column--xs-span-6 {
width: calc((100% - 1px) / 14 * 6)
}
.sg-grid-column--xs-span-7 {
width: calc((100% - 1px) / 14 * 7)
}
.sg-grid-column--xs-span-8 {
width: calc((100% - 1px) / 14 * 8)
}
.sg-grid-column--xs-span-9 {
width: calc((100% - 1px) / 14 * 9)
}
.sg-grid-column--xs-span-10 {
width: calc((100% - 1px) / 14 * 10)
}
.sg-grid-column--xs-span-11 {
width: calc((100% - 1px) / 14 * 11)
}
.sg-grid-column--xs-span-12 {
width: calc((100% - 1px) / 14 * 12)
}
.sg-grid-column--xs-span-13 {
width: calc((100% - 1px) / 14 * 13)
}
.sg-grid-column--xs-span-14 {
width: calc((100% - 1px) / 14 * 14)
}
@media(min-width: 801px) {
.sg-grid-column--sm-span-1 {
width:calc((100% - 1px) / 14 * 1)
}
.sg-grid-column--sm-span-2 {
width: calc((100% - 1px) / 14 * 2)
}
.sg-grid-column--sm-span-3 {
width: calc((100% - 1px) / 14 * 3)
}
.sg-grid-column--sm-span-4 {
width: calc((100% - 1px) / 14 * 4)
}
.sg-grid-column--sm-span-5 {
width: calc((100% - 1px) / 14 * 5)
}
.sg-grid-column--sm-span-6 {
width: calc((100% - 1px) / 14 * 6)
}
.sg-grid-column--sm-span-7 {
width: calc((100% - 1px) / 14 * 7)
}
.sg-grid-column--sm-span-8 {
width: calc((100% - 1px) / 14 * 8)
}
.sg-grid-column--sm-span-9 {
width: calc((100% - 1px) / 14 * 9)
}
.sg-grid-column--sm-span-10 {
width: calc((100% - 1px) / 14 * 10)
}
.sg-grid-column--sm-span-11 {
width: calc((100% - 1px) / 14 * 11)
}
.sg-grid-column--sm-span-12 {
width: calc((100% - 1px) / 14 * 12)
}
.sg-grid-column--sm-span-13 {
width: calc((100% - 1px) / 14 * 13)
}
.sg-grid-column--sm-span-14 {
width: calc((100% - 1px) / 14 * 14)
}
}
@media(min-width: 1024px) {
.sg-grid-column--m-span-1 {
width:calc((100% - 1px) / 14 * 1)
}
.sg-grid-column--m-span-2 {
width: calc((100% - 1px) / 14 * 2)
}
.sg-grid-column--m-span-3 {
width: calc((100% - 1px) / 14 * 3)
}
.sg-grid-column--m-span-4 {
width: calc((100% - 1px) / 14 * 4)
}
.sg-grid-column--m-span-5 {
width: calc((100% - 1px) / 14 * 5)
}
.sg-grid-column--m-span-6 {
width: calc((100% - 1px) / 14 * 6)
}
.sg-grid-column--m-span-7 {
width: calc((100% - 1px) / 14 * 7)
}
.sg-grid-column--m-span-8 {
width: calc((100% - 1px) / 14 * 8)
}
.sg-grid-column--m-span-9 {
width: calc((100% - 1px) / 14 * 9)
}
.sg-grid-column--m-span-10 {
width: calc((100% - 1px) / 14 * 10)
}
.sg-grid-column--m-span-11 {
width: calc((100% - 1px) / 14 * 11)
}
.sg-grid-column--m-span-12 {
width: calc((100% - 1px) / 14 * 12)
}
.sg-grid-column--m-span-13 {
width: calc((100% - 1px) / 14 * 13)
}
.sg-grid-column--m-span-14 {
width: calc((100% - 1px) / 14 * 14)
}
}
@media(min-width: 1501px) {
.sg-grid-column--lg-span-1 {
width:calc((100% - 1px) / 14 * 1)
}
.sg-grid-column--lg-span-2 {
width: calc((100% - 1px) / 14 * 2)
}
.sg-grid-column--lg-span-3 {
width: calc((100% - 1px) / 14 * 3)
}
.sg-grid-column--lg-span-4 {
width: calc((100% - 1px) / 14 * 4)
}
.sg-grid-column--lg-span-5 {
width: calc((100% - 1px) / 14 * 5)
}
.sg-grid-column--lg-span-6 {
width: calc((100% - 1px) / 14 * 6)
}
.sg-grid-column--lg-span-7 {
width: calc((100% - 1px) / 14 * 7)
}
.sg-grid-column--lg-span-8 {
width: calc((100% - 1px) / 14 * 8)
}
.sg-grid-column--lg-span-9 {
width: calc((100% - 1px) / 14 * 9)
}
.sg-grid-column--lg-span-10 {
width: calc((100% - 1px) / 14 * 10)
}
.sg-grid-column--lg-span-11 {
width: calc((100% - 1px) / 14 * 11)
}
.sg-grid-column--lg-span-12 {
width: calc((100% - 1px) / 14 * 12)
}
.sg-grid-column--lg-span-13 {
width: calc((100% - 1px) / 14 * 13)
}
.sg-grid-column--lg-span-14 {
width: calc((100% - 1px) / 14 * 14)
}
}
}
.sg-container-html-style h1,.sg-title--level-1 {
font-size: 40px;
line-height: 56px
}
.sg-container-html-style h2,.sg-title--level-2 {
font-size: 32px;
line-height: 40px
}
.sg-container-html-style h3,.sg-title--level-3 {
font-size: 26px;
line-height: 36px
}
.sg-container-html-style h4,.sg-title--level-4 {
font-size: 22px;
line-height: 32px
}
.sg-container-html-style h5,.sg-title--level-5 {
font-size: 18px;
line-height: 28px
}
.sg-container-html-style h6,.sg-title--level-6 {
font-size: 18px;
line-height: 28px;
text-transform: uppercase
}
.sg-title {
font-family: var(--font-family-component);
max-width: 100%
}
.sg-title:focus {
outline: none
}
.sg-keyboard .sg-title:focus {
outline: none;
box-shadow: var(--focus-shadow)
}
.sg-title--density-airy.sg-title--level-1 {
padding: 32px 0
}
.sg-title--density-airy.sg-title--level-2 {
padding: 34px 0
}
.sg-title--density-airy.sg-title--level-3 {
padding: 34px 0
}
.sg-title--density-airy.sg-title--level-4 {
padding: 36px 0
}
.sg-title--density-airy.sg-title--level-5 {
padding: 35px 0
}
.sg-title--density-airy.sg-title--level-6 {
padding: 35px 0
}
.sg-title--density-comfortable.sg-title--level-1 {
padding: 22px 0
}
.sg-title--density-comfortable.sg-title--level-2 {
padding: 24px 0
}
.sg-title--density-comfortable.sg-title--level-3 {
padding: 24px 0
}
.sg-title--density-comfortable.sg-title--level-4 {
padding: 26px 0
}
.sg-title--density-comfortable.sg-title--level-5 {
padding: 25px 0
}
.sg-title--density-comfortable.sg-title--level-6 {
padding: 25px 0
}
.sg-title--density-cozy.sg-title--level-1 {
padding: 12px 0
}
.sg-title--density-cozy.sg-title--level-2 {
padding: 14px 0
}
.sg-title--density-cozy.sg-title--level-3 {
padding: 14px 0
}
.sg-title--density-cozy.sg-title--level-4 {
padding: 16px 0
}
.sg-title--density-cozy.sg-title--level-5 {
padding: 15px 0
}
.sg-title--density-cozy.sg-title--level-6 {
padding: 15px 0
}
.sg-title--density-compact.sg-title--level-1 {
padding: 2px 0
}
.sg-title--density-compact.sg-title--level-2 {
padding: 4px 0
}
.sg-title--density-compact.sg-title--level-3 {
padding: 4px 0
}
.sg-title--density-compact.sg-title--level-4 {
padding: 6px 0
}
.sg-title--density-compact.sg-title--level-5 {
padding: 5px 0
}
.sg-title--density-compact.sg-title--level-6 {
padding: 5px 0
}
.sg-title--density-none {
padding: 0
}
@media(max-width: 1500px) {
.sg-title--level-1 {
font-size:30px;
line-height: 46px
}
.sg-title--level-2 {
font-size: 28px;
line-height: 38px
}
.sg-title--level-3 {
font-size: 24px;
line-height: 34px
}
.sg-title--level-4 {
font-size: 20px;
line-height: 30px
}
.sg-title--density-airy.sg-title--level-1 {
padding: 16px 0
}
.sg-title--density-airy.sg-title--level-2 {
padding: 18px 0
}
.sg-title--density-airy.sg-title--level-3 {
padding: 18px 0
}
.sg-title--density-airy.sg-title--level-4 {
padding: 20px 0
}
.sg-title--density-airy.sg-title--level-5 {
padding: 22px 0
}
.sg-title--density-airy.sg-title--level-6 {
padding: 22px 0
}
.sg-title--density-comfortable.sg-title--level-1 {
padding: 6px 0
}
.sg-title--density-comfortable.sg-title--level-2 {
padding: 8px 0
}
.sg-title--density-comfortable.sg-title--level-3 {
padding: 8px 0
}
.sg-title--density-comfortable.sg-title--level-4 {
padding: 10px 0
}
.sg-title--density-comfortable.sg-title--level-5 {
padding: 10px 0
}
.sg-title--density-comfortable.sg-title--level-6 {
padding: 10px 0
}
.sg-title--density-cozy.sg-title--level-4 {
padding: 10px 0
}
.sg-title--density-cozy.sg-title--level-5 {
padding: 10px 0
}
.sg-title--density-cozy.sg-title--level-6 {
padding: 10px 0
}
}
.sg-container-html-style {
color: var(--typography-dark)
}
.sg-container-html-style a {
text-decoration: none;
display: inline-block;
color: var(--color-primary);
cursor: pointer;
word-break: break-all
}
.sg-container-html-style a:hover {
color: var(--color-secondary-hovered)
}
.sg-container-html-style a:active {
color: var(--color-secondary-active)
}
.sg-container-html-style a:visited {
color: var(--color-info)
}
.sg-container-html-style p {
word-break: break-word
}
.sg-container-html-style h1,.sg-container-html-style h2,.sg-container-html-style h3,.sg-container-html-style h4,.sg-container-html-style h5,.sg-container-html-style h6 {
font-family: var(--font-family-component);
max-width: 100%;
padding: 22px 0
}
.sg-container-html-style figure {
display: block;
padding: 20px;
margin: 0 0 30px;
text-align: center;
background-image: linear-gradient(45deg, #eae4db 25%, transparent 25%),linear-gradient(-45deg, #eae4db 25%, transparent 25%),linear-gradient(45deg, transparent 75%, #eae4db 75%),linear-gradient(-45deg, transparent 75%, #eae4db 75%);
background-size: 4px 4px;
background-position: -2px -2px,0 2px,0 0,2px 0
}
.sg-container-html-style figure img {
border: 1px solid var(--border-color-outer);
border-radius: 12px;
margin: 0 auto;
max-width: 100%;
height: auto;
box-sizing: content-box
}
.sg-container-html-style ul,.sg-container-html-style ol {
margin: 0 0 30px;
word-break: break-word
}
.sg-container-html-style ul {
padding: 0;
list-style: none
}
.sg-container-html-style ul li,.sg-container-html-style ol li {
padding-left: 20px;
margin-bottom: 10px;
position: relative
}
.sg-container-html-style ul li::before {
content: "";
display: block;
width: 7px;
height: 7px;
background: #c1aa95;
border-radius: 50%;
position: absolute;
left: 0;
top: 9px
}
.sg-container-html-style li li::before {
border: 1px solid #c1aa95;
background: transparent;
box-sizing: border-box;
top: 11px
}
.sg-container-html-style table {
width: 100%;
border-radius: 12px;
text-align: start;
table-layout: fixed;
border: 1px solid var(--border-color-outer);
margin-bottom: 30px
}
.sg-container-html-style table td,.sg-container-html-style table th {
position: relative;
height: 60px;
padding: 0 20px;
vertical-align: middle;
background-color: #fff;
border-top: 1px solid #f2f2f2;
font-size: 16px;
line-height: 26px;
text-align: left
}
.sg-container-html-style tr:last-of-type td:first-of-type {
border-bottom-left-radius: 12px
}
.sg-container-html-style tr:last-of-type td:last-of-type {
border-bottom-right-radius: 12px
}
.sg-container-html-style thead th {
color: #a4a4a4;
background-color: #f8f8f8;
font-family: var(--font-family-component);
font-weight: 500;
font-size: 14px;
line-height: 18px;
border-top: none
}
.sg-container-html-style thead th:first-of-type {
border-top-left-radius: 12px
}
.sg-container-html-style thead th:last-of-type {
border-top-right-radius: 12px
}
.sg-container-html-style--density-cozy {
font-size: 18px;
font-weight: 400;
font-family: var(--font-family-component);
line-height: 28px
}
.sg-container-html-style--density-compact {
font-size: 16px;
font-weight: 400;
font-family: var(--font-family-component);
line-height: 26px
}
@media(min-width: 801px) {
.sg-container-html-style tr:hover td {
background-color:#f8f8f8
}
}
@media(max-width: 767px) {
.sg-container-html-style table {
table-layout:fixed;
border: none
}
.sg-container-html-style thead {
display: none
}
.sg-container-html-style table tr {
display: block;
margin-bottom: 20px;
border-radius: 12px;
border: 1px solid var(--border-color-outer)
}
.sg-container-html-style table td {
height: auto;
display: block;
position: relative;
border: none
}
.sg-container-html-style table td,.sg-container-html-style table td:first-child,.sg-container-html-style table td:last-child {
padding: 24px 20px 15px
}
.sg-container-html-style table td:first-child {
border-top-left-radius: 12px;
border-top-right-radius: 12px;
color: #363636;
font-size: 22px;
font-weight: 600;
font-family: var(--font-family-component);
line-height: 32px
}
.sg-container-html-style table td:last-child {
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px
}
.sg-container-html-style table td:nth-child(n+2)::after {
content: attr(data-label);
display: block;
position: absolute;
top: 4px;
left: 20px;
font-family: var(--font-family-component);
font-size: 14px;
line-height: 26px;
color: #a4a4a4;
text-align: initial;
text-transform: capitalize
}
}
.sg-container {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
border-radius: 12px;
background: var(--background-component-primary)
}
.sg-theme-hcl .sg-container,.sg-theme-hcb .sg-container {
border: 1px solid var(--high-contrast-foreground)
}
.sg-container--elevation-1 {
box-shadow: var(--first-level-box-shadow)
}
.sg-container--elevation-1:focus {
outline: none
}
.sg-keyboard .sg-container--elevation-1:focus {
outline: none;
box-shadow: var(--first-level-box-shadow),var(--focus-shadow)
}
.sg-container--elevation-2 {
box-shadow: var(--second-level-box-shadow)
}
.sg-container--elevation-2:focus {
outline: none
}
.sg-keyboard .sg-container--elevation-2:focus {
outline: none;
box-shadow: var(--second-level-box-shadow),var(--focus-shadow)
}
.sg-container--elevation-3 {
box-shadow: var(--third-level-box-shadow)
}
.sg-container--elevation-3:focus {
outline: none
}
.sg-keyboard .sg-container--elevation-3:focus {
outline: none;
box-shadow: var(--third-level-box-shadow),var(--focus-shadow)
}
.sg-container--elevation-4 {
box-shadow: var(--fourth-level-box-shadow)
}
.sg-container--elevation-4:focus {
outline: none
}
.sg-keyboard .sg-container--elevation-4:focus {
outline: none;
box-shadow: var(--fourth-level-box-shadow),var(--focus-shadow)
}
.sg-container--elevation-5 {
box-shadow: var(--fifth-level-box-shadow)
}
.sg-container--elevation-5:focus {
outline: none
}
.sg-keyboard .sg-container--elevation-5:focus {
outline: none;
box-shadow: var(--fifth-level-box-shadow),var(--focus-shadow)
}
.sg-container--overflow-hidden {
overflow: hidden
}
.sg-menu-wrapper--mobile {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 130;
display: -ms-flexbox;
display: flex;
-ms-flex-align: end;
align-items: flex-end;
pointer-events: auto;
background-color: var(--background-overlay)
}
.sg-menu {
z-index: 50;
max-height: calc(100vh - 40px);
overflow: auto;
display: inline-block;
box-shadow: var(--second-level-box-shadow);
font-family: var(--font-family-component);
font-weight: 400;
font-size: 14px;
line-height: 18px;
color: var(--typography-dark);
background-color: var(--context-menu-background);
border-radius: 12px;
cursor: pointer;
transform-box: fill-box
}
.sg-menu:focus {
outline: none
}
.sg-theme-hcl .sg-menu,.sg-theme-hcb .sg-menu {
border: 1px solid var(--high-contrast-foreground)
}
.sg-menu--mobile {
background-color: var(--background-component-primary);
width: 100%;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0
}
.sg-context-menu-list--position-absolute {
position: absolute
}
.sg-context-menu-list--position-fixed {
position: fixed
}
.sg-context-menu-list--open {
animation: menu-list-open-animation .2s forwards
}
.sg-context-menu-list--close {
animation: menu-list-close-animation .2s forwards
}
.sg-context-menu-list-wrapper--mobile.sg-context-menu-list-wrapper--open {
animation: menu-wrapper-mobile-open-animation .2s forwards
}
.sg-context-menu-list-wrapper--mobile.sg-context-menu-list-wrapper--close {
animation: menu-wrapper-mobile-close-animation .2s forwards
}
.sg-context-menu-list-wrapper--mobile .sg-context-menu-list--open {
animation: menu-list-mobile-toggle-animation .2s forwards
}
@supports(-webkit-overflow-scrolling: touch) {
.sg-context-menu-list-wrapper--mobile .sg-context-menu-list--open {
animation: none
}
}
.sg-context-menu-list-wrapper--mobile .sg-context-menu-list--close {
animation: menu-list-mobile-close-animation .2s forwards
}
@supports(-webkit-overflow-scrolling: touch) {
.sg-context-menu-list-wrapper--mobile .sg-context-menu-list--close {
animation: none
}
}
@keyframes menu-list-open-animation {
from {
transform: scale(0, 0)
}
to {
transform: scale(1, 1)
}
}
@keyframes menu-list-close-animation {
to {
transform: scale(0, 0)
}
}
@keyframes menu-list-mobile-toggle-animation {
from {
transform: translateY(100%)
}
to {
transform: translateY(0)
}
}
@keyframes menu-list-mobile-close-animation {
to {
transform: translateY(100%)
}
}
@keyframes menu-wrapper-mobile-open-animation {
from {
background-color: var(--background-component-primary)
}
to {
background-color: var(--background-overlay)
}
}
@keyframes menu-wrapper-mobile-close-animation {
from {
background-color: var(--background-overlay)
}
to {
background-color: transparent
}
}
@supports(-webkit-overflow-scrolling: touch) {
@keyframes menu-wrapper-mobile-open-animation {
from {
opacity: 0
}
to {
opacity: 1
}
}
@keyframes menu-wrapper-mobile-close-animation {
from {
opacity: 1
}
to {
opacity: 0
}
}
}
.sg-context-menu {
display: inline-block;
position: relative;
line-height: 0
}
.sg-context-menu:focus {
outline: none
}
.sg-context-menu--click-prevent {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0
}
.sg-menu-item {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
min-width: 260px;
padding: 10px 20px;
white-space: nowrap;
width: 100%;
text-align: left
}
.sg-menu-item:focus {
outline: none
}
.sg-menu-item--disabled {
color: var(--color-disabled);
cursor: default
}
.sg-menu-item:focus,.sg-menu-item:hover {
background-color: var(--component-background-hover)
}
.sg-menu-item:focus .context-menu__shortcut,.sg-menu-item:hover .context-menu__shortcut {
color: var(--typography-light)
}
.sg-menu-item__icon {
margin-right: 10px
}
.sg-menu-item__text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
text-align: left
}
.sg-menu-item__shortcut {
margin-left: auto;
padding-left: 10px;
font-size: 13px;
line-height: 1
}
@media(max-width: 800px) {
.sg-menu-item {
padding:15px 20px
}
}
.sg-menu-separator {
height: 1px;
background-color: var(--border-color-outer)
}
.sg-menu-group--title {
color: var(--typography-dark);
background-color: var(--background-component-secondary)
}
.sg-dialog-wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 110;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
will-change: transform
}
.sg-dialog-wrapper--animation-open {
animation: dialog-wrapper-open-animation .2s forwards
}
.sg-dialog-wrapper--animation-open .sg-dialog {
animation: dialog-open-animation .3s forwards
}
.sg-dialog-wrapper--animation-close {
animation: dialog-wrapper-close-animation .2s forwards
}
.sg-dialog-wrapper--animation-close .sg-dialog {
animation: dialog-close-animation .3s forwards
}
@keyframes dialog-wrapper-open-animation {
from {
background-color: transparent
}
to {
background-color: var(--background-overlay)
}
}
@keyframes dialog-open-animation {
from {
opacity: 0;
transform: scale(0.7)
}
to {
opacity: 1;
transform: scale(1)
}
}
@keyframes dialog-wrapper-close-animation {
from {
background-color: var(--background-overlay)
}
to {
background-color: transparent
}
}
@keyframes dialog-close-animation {
from {
opacity: 1;
transform: scale(1)
}
to {
opacity: 0;
transform: scale(0.7)
}
}
.sg-toolbar {
display: -ms-flexbox;
display: flex;
width: 100%
}
.sg-toolbar--direction-row {
-ms-flex-direction: row;
flex-direction: row
}
.sg-toolbar--direction-column {
-ms-flex-direction: column;
flex-direction: column
}
.sg-toolbar--direction-row-reverse {
-ms-flex-direction: row-reverse;
flex-direction: row-reverse
}
.sg-toolbar--direction-column-reverse {
-ms-flex-direction: column-reverse;
flex-direction: column-reverse
}
.sg-toolbar--density-none {
padding: 0
}
.sg-toolbar--density-compact {
padding: 10px 30px
}
.sg-toolbar--density-cozy {
padding: 20px 30px
}
.sg-toolbar--density-comfortable {
padding: 20px 60px
}
.sg-toolbar--align-flex-start {
-ms-flex-align: start;
align-items: flex-start
}
.sg-toolbar--align-center {
-ms-flex-align: center;
align-items: center
}
.sg-toolbar--align-flex-end {
-ms-flex-align: end;
align-items: flex-end
}
.sg-toolbar--align-baseline {
-ms-flex-align: baseline;
align-items: baseline
}
.sg-toolbar--align-stretch {
-ms-flex-align: stretch;
align-items: stretch
}
.sg-toolbar--justify-flex-start {
-ms-flex-pack: start;
justify-content: flex-start
}
.sg-toolbar--justify-center {
-ms-flex-pack: center;
justify-content: center
}
.sg-toolbar--justify-flex-end {
-ms-flex-pack: end;
justify-content: flex-end
}
.sg-toolbar--justify-space-between {
-ms-flex-pack: justify;
justify-content: space-between
}
.sg-toolbar--justify-space-around {
-ms-flex-pack: distribute;
justify-content: space-around
}
.sg-toolbar--background-default {
background-color: var(--background-white)
}
.sg-toolbar--background-transparent {
background-color: transparent
}
@media(max-width: 1500px) {
.sg-toolbar--density-compact {
padding:10px 15px
}
.sg-toolbar--density-cozy {
padding: 15px 20px
}
.sg-toolbar--density-comfortable {
padding: 20px
}
}
.sg-page.from-dialog--prevent-scroll {
overflow: hidden
}
.sg-dialog {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-negative: 0;
flex-shrink: 0;
margin: auto;
max-width: 100%;
background: var(--background-component-primary);
border-radius: 12px;
box-shadow: var(--second-level-box-shadow);
will-change: transform
}
.sg-dialog:focus {
outline: none
}
.sg-theme-hcl .sg-dialog,.sg-theme-hcb .sg-dialog {
border-left: 1px solid var(--high-contrast-foreground);
border-bottom: 1px solid var(--high-contrast-foreground);
border-right: 1px solid var(--high-contrast-foreground)
}
.sg-theme-hcl .sg-dialog .sg-toolbar,.sg-theme-hcb .sg-dialog .sg-toolbar {
border-top: 1px solid var(--high-contrast-foreground)
}
.sg-theme-hcl .sg-dialog--state-presentational,.sg-theme-hcl .sg-dialog--no-state,.sg-theme-hcb .sg-dialog--state-presentational,.sg-theme-hcb .sg-dialog--no-state {
border-top: 1px solid var(--high-contrast-foreground)
}
.sg-dialog__content-wrapper {
display: -ms-grid;
display: grid;
grid-gap: 30px;
-ms-grid-columns: minmax(0, 1fr);
grid-template-columns: minmax(0, 1fr);
height: 100%
}
.sg-dialog__icon-wrapper {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center
}
.sg-dialog__icon {
width: 60px;
height: 60px;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 50%
}
.sg-dialog__title-wrapper {
width: 100%
}
.sg-dialog__title {
width: 100%
}
.sg-dialog__title strong {
font-weight: 600
}
.sg-dialog__title em {
color: var(--typography-dark);
font-style: normal;
word-wrap: break-word;
word-break: break-all
}
.sg-dialog--align-left .sg-dialog__content-wrapper {
text-align: left
}
.sg-dialog--align-center .sg-dialog__content-wrapper {
text-align: center
}
.sg-dialog--align-right .sg-dialog__content-wrapper {
text-align: right
}
.sg-dialog--density-none {
padding-top: 0
}
.sg-dialog--density-none .sg-dialog__icon-wrapper,.sg-dialog--density-none .sg-dialog__title-wrapper {
padding-left: 60px;
padding-right: 60px
}
.sg-dialog--density-small {
padding-top: 40px
}
.sg-dialog--density-small .sg-dialog__icon-wrapper,.sg-dialog--density-small .sg-dialog__title-wrapper {
padding-left: 60px;
padding-right: 60px
}
.sg-dialog--density-medium {
padding-top: 40px
}
.sg-dialog--density-medium .sg-dialog__icon-wrapper,.sg-dialog--density-medium .sg-dialog__title-wrapper,.sg-dialog--density-medium .sg-dialog__content {
padding-left: 60px;
padding-right: 60px
}
.sg-dialog--density-medium .sg-dialog__content {
padding-bottom: 40px
}
.sg-dialog--size-small {
width: 380px
}
.sg-dialog--size-medium {
width: 470px
}
.sg-dialog--size-large {
width: 640px
}
.sg-dialog--size-x-large {
width: 870px
}
.sg-dialog--size-xx-large {
width: 1440px
}
.sg-dialog--size-viewport {
width: 100%;
min-height: 100%;
border-radius: 0
}
.sg-dialog--state-presentational .sg-dialog__icon {
width: inherit;
height: inherit
}
.sg-dialog--state-active {
border-top: 3px solid var(--color-success)
}
.sg-dialog--state-active .sg-dialog__icon {
color: var(--typography-white);
background-color: var(--color-success)
}
.sg-dialog--state-inactive {
border-top: 3px solid var(--color-error)
}
.sg-dialog--state-inactive .sg-dialog__icon {
color: var(--typography-white);
background-color: var(--color-error)
}
.sg-dialog--state-warning {
border-top: 3px solid var(--color-warning)
}
.sg-dialog--state-warning .sg-dialog__icon {
color: var(--typography-white);
background-color: var(--color-warning)
}
.sg-dialog--state-info {
border-top: 3px solid var(--color-instruction)
}
.sg-dialog--state-info .sg-dialog__icon {
color: var(--typography-white);
background-color: var(--color-instruction)
}
.sg-theme-hcl .sg-dialog--state-active .sg-dialog__icon,.sg-theme-hcl .sg-dialog--state-inactive .sg-dialog__icon,.sg-theme-hcl .sg-dialog--state-warning .sg-dialog__icon,.sg-theme-hcl .sg-dialog--state-info .sg-dialog__icon,.sg-theme-hcb .sg-dialog--state-active .sg-dialog__icon,.sg-theme-hcb .sg-dialog--state-inactive .sg-dialog__icon,.sg-theme-hcb .sg-dialog--state-warning .sg-dialog__icon,.sg-theme-hcb .sg-dialog--state-info .sg-dialog__icon {
color: var(--high-contrast-background)
}
@media(max-width: 800px) {
.sg-dialog {
width:100%
}
}
@media(max-width: 1500px) {
.sg-dialog__content-wrapper {
gap:20px
}
.sg-dialog__icon {
width: 40px;
height: 40px
}
.sg-dialog--density-small {
padding-top: 20px
}
.sg-dialog--density-small .sg-dialog__icon-wrapper,.sg-dialog--density-small .sg-dialog__title-wrapper {
padding-left: 20px;
padding-right: 20px
}
.sg-dialog--density-medium {
padding-top: 20px
}
.sg-dialog--density-medium .sg-dialog__icon-wrapper,.sg-dialog--density-medium .sg-dialog__title-wrapper,.sg-dialog--density-medium .sg-dialog__content {
padding-left: 20px;
padding-right: 20px
}
.sg-dialog--density-medium .sg-dialog__content {
padding-bottom: 20px
}
}
@media not all and (min-resolution: 0.001dpcm) {
.sg-dialog--state-active,.sg-dialog--state-inactive,.sg-dialog--state-warning,.sg-dialog--state-info {
border-right:3px solid transparent;
border-bottom: 3px solid transparent;
border-left: 3px solid transparent
}
}
.sg-spacer {
display: inline-block;
-ms-flex-negative: 0;
flex-shrink: 0
}
.sg-spacer--size-expanded {
-ms-flex: 1 1 0px;
flex: 1 1 0
}
.sg-spacer--size-xx-small {
width: 5px
}
.sg-spacer--size-x-small {
width: 10px
}
.sg-spacer--size-small {
width: 15px
}
.sg-spacer--size-medium {
width: 20px
}
.sg-spacer--size-large {
width: 30px
}
.sg-spacer--size-x-large {
width: 40px
}
.sg-spacer--size-xx-large {
width: 60px
}
.sg-form-label {
display: block;
font-size: var(--typography-field-label-size);
font-family: var(--font-family-component)
}
.sg-form-label-tooltip {
display: inline-block;
margin-left: 5px
}
.sg-validation {
display: none;
position: absolute;
left: 0;
z-index: 40;
margin-top: -1px;
padding: 7px 15px 6px 15px;
width: 100%;
-ms-flex-align: center;
align-items: center;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
box-shadow: var(--first-level-box-shadow);
color: var(--color-button-white);
font-size: 14px;
word-break: break-word;
line-height: 16px
}
@media(max-width: 1500px) {
.sg-validation {
padding:5px 15px 4px 15px
}
}
.sg-validation-icon {
margin-right: 10px
}
.sg-validation--success {
background-color: var(--color-success)
}
.sg-validation--error {
background-color: var(--background-color-error-not-focused);
color: var(--text-color-error-not-focused);
border: 1px solid var(--border-color-input-error-not-focused);
border-top: 0;
-ms-flex-align: start;
align-items: flex-start;
font-weight: 600
}
.sg-validation--error span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.sg-validation--error-visible {
display: -ms-inline-flexbox;
display: inline-flex
}
.sg-validation--focused {
display: -ms-inline-flexbox;
display: inline-flex
}
.sg-validation--focused span {
overflow: visible;
text-overflow: initial;
white-space: initial
}
.sg-validation--error-focused {
background-color: var(--background-color-error-focused);
box-shadow: 0 0 0 1px var(--border-color-input-error-focused);
border: none;
color: var(--text-color-error-focused);
font-weight: 600
}
.sg-validation--warning {
background-color: var(--color-warning)
}
.sg-validation--hint {
background-color: var(--color-hint)
}
.sg-field-label {
display: block;
width: 100%;
position: relative;
text-align: left
}
.sg-field-wrapper {
display: -ms-flexbox;
display: flex;
width: 100%;
background-color: var(--background-component-primary);
border: 1px solid var(--border-color-default);
border-radius: 12px;
overflow: hidden;
font-family: var(--font-family-component);
font-size: 16px;
color: var(--typography-dark)
}
.sg-field-wrapper--disabled {
opacity: .5;
cursor: not-allowed
}
.sg-field-wrapper--readonly {
word-break: break-all
}
.sg-field {
width: 100%;
min-width: 1px;
background-color: transparent;
border: none;
font-family: var(--font-family-component);
color: var(--typography-dark);
text-overflow: ellipsis
}
.sg-field:-ms-input-placeholder {
font-style: italic;
font-weight: 300;
color: var(--typography-dark);
opacity: 1
}
.sg-field::placeholder {
font-style: italic;
font-weight: 300;
color: var(--typography-dark);
opacity: 1
}
.sg-field:only-child {
border-radius: 12px
}
.sg-field:first-child {
border-top-left-radius: 12px;
border-bottom-left-radius: 12px
}
.sg-field:last-child {
border-top-right-radius: 12px;
border-bottom-right-radius: 12px
}
.sg-field:focus {
box-shadow: none
}
.sg-field:disabled,.sg-field:disabled:-ms-input-placeholder {
background-color: var(--background-component-primary);
cursor: not-allowed
}
.sg-field:disabled,.sg-field:disabled::placeholder {
background-color: var(--background-component-primary);
cursor: not-allowed
}
.sg-field:read-only,.sg-field:read-only:-ms-input-placeholder {
background-color: inherit
}
.sg-field:read-only,.sg-field:read-only::-moz-placeholder {
background-color: inherit
}
.sg-field:read-only,.sg-field:read-only::placeholder {
background-color: inherit
}
.sg-field::-webkit-outer-spin-button,.sg-field::-webkit-inner-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0
}
.sg-field[type=number] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield
}
.sg-field::-ms-clear {
display: none
}
.sg-field-wrapper--focused {
box-shadow: var(--first-level-box-shadow)
}
.sg-field-wrapper--has-validation {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0
}
.sg-field-wrapper--success {
border-color: var(--color-success)
}
.sg-field-wrapper--error {
border-color: var(--border-color-input-error-not-focused)
}
.sg-field-wrapper--error-focused {
border-color: var(--border-color-input-error-focused);
box-shadow: 0 0 0 1px var(--border-color-input-error-focused)
}
.sg-field-wrapper--warning {
border-color: var(--color-warning)
}
.sg-input-wrapper--hint .sg-input {
border-color: var(--color-hint)
}
.sg-field-wrapper--small .sg-field {
height: 28px;
padding: 0 15px;
font-size: 14px
}
.sg-field-wrapper--medium .sg-field {
height: 38px;
padding: 0 15px;
font-size: 16px
}
.sg-field-wrapper--large .sg-field {
height: 48px;
padding: 0 20px;
font-size: 18px
}
.sg-field-wrapper--x-large .sg-field {
height: 58px;
padding: 0 30px;
font-size: 22px
}
.sg-field-wrapper--x-large .sg-field:-ms-input-placeholder {
font-weight: 600
}
.sg-field-wrapper--x-large .sg-field::placeholder {
font-weight: 600
}
@media(max-width: 800px) {
.sg-field-wrapper--large .sg-field,.sg-field-wrapper--x-large .sg-field {
padding:0 15px
}
.sg-field-wrapper--small .sg-field,.sg-field-wrapper--medium .sg-field,.sg-field-wrapper--large .sg-field,.sg-field-wrapper--x-large .sg-field {
font-size: 18px
}
}
@media(max-width: 1500px) {
.sg-field-wrapper--x-large .sg-field {
height:48px;
padding: 0 20px;
font-size: 18px
}
}
.sg-input-addon {
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-negative: 0;
flex-shrink: 0;
position: relative;
white-space: nowrap;
max-width: 100%;
background-color: var(--background-component-secondary);
color: var(--typography-light)
}
.sg-input-addon:first-child {
border-top-left-radius: 12px;
border-bottom-left-radius: 12px
}
.sg-input-addon:last-child {
border-top-right-radius: 12px;
border-bottom-right-radius: 12px
}
.sg-input-addon .sg-input-text-truncate {
display: block;
overflow: hidden;
text-overflow: ellipsis
}
.sg-input-addon .sg-tooltip {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.sg-input-addon__array {
width: 100%;
padding-right: 15px
}
.sg-theme-hcl .sg-tooltip,.sg-theme-hcb .sg-tooltip {
border: 1px solid var(--high-contrast-foreground)
}
.sg-input-addon--component {
background-color: transparent
}
.sg-input-addon__size--small .sg-input-text-truncate {
max-width: 120.96px;
line-height: 18px
}
.sg-input-addon__size--medium .sg-input-text-truncate {
max-width: 120.96px;
line-height: 26px
}
.sg-input-addon__size--large .sg-input-text-truncate {
max-width: 136.08px;
line-height: 28px
}
.sg-input-addon__size--x-large .sg-input-text-truncate {
max-width: 166.32px;
line-height: 32px
}
@media(max-width: 1500px) {
.sg-input-addon__size--small .sg-input-text-truncate {
max-width:90.72px
}
.sg-input-addon__size--medium .sg-input-text-truncate {
max-width: 90.72px
}
.sg-input-addon__size--large .sg-input-text-truncate {
max-width: 90.72px
}
.sg-input-addon__size--x-large .sg-input-text-truncate {
max-width: 110.88px
}
}
.sg-input-addon__size--small {
height: 28px;
padding: 0 15px;
font-size: 14px
}
.sg-input-addon__size--small.sg-input-addon--component-prefix {
padding: 0 0 0 15px
}
.sg-input-addon__size--medium {
height: 38px;
padding: 0 15px
}
.sg-input-addon__size--medium.sg-input-addon--component-prefix {
padding: 0 0 0 15px
}
.sg-input-addon__size--medium.sg-input-addon--component-suffix {
padding-right: 4px
}
.sg-input-addon__size--medium.sg-input-addon--component-suffix [class*=sg-button] {
padding-left: 8px;
padding-right: 8px
}
.sg-input-addon__size--large {
height: 48px;
padding: 0 20px;
font-size: 18px
}
.sg-input-addon__size--large.sg-input-addon--component-prefix {
padding: 0 0 0 20px
}
.sg-input-addon__size--x-large {
height: 58px;
padding: 0 30px;
font-size: 22px
}
.sg-input-addon__size--x-large.sg-input-addon--component-prefix {
padding: 0 0 0 30px
}
@media(max-width: 800px) {
.sg-input-addon__size--large,.sg-input-addon__size--x-large {
padding:0 15px
}
.sg-input-addon__size--small,.sg-input-addon__size--medium,.sg-input-addon__size--large,.sg-input-addon__size--x-large {
font-size: 18px
}
}
@media(max-width: 1500px) {
.sg-input-addon__size--x-large {
height:48px;
padding: 0 20px;
font-size: 18px
}
.sg-input-addon__size--x-large.sg-input-addon--component-prefix {
padding: 0 0 0 20px
}
}
.sg-date-picker-entity {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
width: 40px;
height: 40px;
margin-top: 2px;
color: var(--typography-dark);
border-radius: 50%;
border: 1px solid transparent;
cursor: pointer;
font-family: var(--font-family-component);
font-size: 14px;
font-weight: 500
}
.sg-date-picker-entity:hover {
color: var(--component-color-hover);
border: 1px solid var(--component-background-hover);
background-color: var(--component-background-hover)
}
.sg-date-picker-entity:focus {
outline: none
}
.sg-date-picker-entity:first-child {
margin-left: 0
}
.sg-date-picker-entity--non-selectable {
pointer-events: none;
color: var(--typography-light)
}
.sg-date-picker-entity--current {
background-color: var(--background-component-primary);
border: 1px solid var(--background-button-primary)
}
.sg-date-picker-entity--selected {
background-color: var(--background-button-primary);
color: var(--color-button-white)
}
.sg-date-picker-entity--disabled {
color: var(--color-disabled);
background-color: transparent;
pointer-events: none
}
.sg-grid {
display: -ms-grid;
display: grid
}
.sg-grid:focus {
outline: none
}
.sg-keyboard .sg-grid:focus {
outline: none;
box-shadow: var(--focus-shadow)
}
.sg-grid>* {
min-width: 0
}
.sg-grid--justify-flex-start {
-ms-flex-pack: start;
justify-content: flex-start
}
.sg-grid--justify-center {
-ms-flex-pack: center;
justify-content: center
}
.sg-grid--justify-flex-end {
-ms-flex-pack: end;
justify-content: flex-end
}
.sg-grid--justify-space-between {
-ms-flex-pack: justify;
justify-content: space-between
}
.sg-grid--justify-space-around {
-ms-flex-pack: distribute;
justify-content: space-around
}
.sg-grid--justify-items-flex-start {
-ms-grid-column-align: flex-start;
justify-items: flex-start
}
.sg-grid--justify-items-center {
-ms-grid-column-align: center;
justify-items: center
}
.sg-grid--justify-items-flex-end {
-ms-grid-column-align: flex-end;
justify-items: flex-end
}
.sg-grid--justify-items-space-between {
-ms-grid-column-align: space-between;
justify-items: space-between
}
.sg-grid--justify-items-space-around {
-ms-grid-column-align: space-around;
justify-items: space-around
}
.sg-grid--align-self-flex-start {
-ms-flex-item-align: start;
align-self: flex-start
}
.sg-grid--align-self-center {
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center
}
.sg-grid--align-self-start {
-ms-flex-item-align: start;
-ms-grid-row-align: start;
align-self: start
}
.sg-grid--align-self-end {
-ms-flex-item-align: end;
-ms-grid-row-align: end;
align-self: end
}
.sg-grid--align-self-self-start {
-ms-flex-item-align: self-start;
-ms-grid-row-align: self-start;
align-self: self-start
}
.sg-grid--align-self-self-start {
-ms-flex-item-align: self-end;
-ms-grid-row-align: self-end;
align-self: self-end
}
.sg-grid--align-self-flex-end {
-ms-flex-item-align: end;
align-self: flex-end
}
.sg-grid--align-self-baseline {
-ms-flex-item-align: baseline;
align-self: baseline
}
.sg-grid--align-self-stretch {
-ms-flex-item-align: stretch;
-ms-grid-row-align: stretch;
align-self: stretch
}
.sg-grid--align-flex-start {
-ms-flex-align: start;
align-items: flex-start
}
.sg-grid--align-center {
-ms-flex-align: center;
align-items: center
}
.sg-grid--align-flex-end {
-ms-flex-align: end;
align-items: flex-end
}
.sg-grid--align-baseline {
-ms-flex-align: baseline;
align-items: baseline
}
.sg-grid--align-stretch {
-ms-flex-align: stretch;
align-items: stretch
}
.sg-grid--autoflow-row {
grid-auto-flow: row
}
.sg-grid--autoflow-column {
grid-auto-flow: column
}
.sg-grid--gap-none {
grid-gap: 0
}
.sg-grid--gap-xx-small {
grid-gap: 5px
}
.sg-grid--gap-x-small {
grid-gap: 10px
}
.sg-grid--gap-small {
grid-gap: 15px
}
.sg-grid--gap-medium {
grid-gap: 20px
}
.sg-grid--gap-large {
grid-gap: 30px
}
.sg-grid--gap-x-large {
grid-gap: 40px
}
.sg-grid--gap-xx-large {
grid-gap: 60px
}
.sg-grid--gap-responsive {
grid-gap: 30px
}
@media(max-width: 1500px) {
.sg-grid--gap-responsive {
grid-gap:20px
}
}
.sg-grid--xs-1 {
-ms-grid-columns: (1fr)[1];
grid-template-columns: repeat(1, 1fr)
}
.sg-grid--xs-2 {
-ms-grid-columns: (1fr)[2];
grid-template-columns: repeat(2, 1fr)
}
.sg-grid--xs-3 {
-ms-grid-columns: (1fr)[3];
grid-template-columns: repeat(3, 1fr)
}
.sg-grid--xs-4 {
-ms-grid-columns: (1fr)[4];
grid-template-columns: repeat(4, 1fr)
}
.sg-grid--xs-5 {
-ms-grid-columns: (1fr)[5];
grid-template-columns: repeat(5, 1fr)
}
.sg-grid--xs-6 {
-ms-grid-columns: (1fr)[6];
grid-template-columns: repeat(6, 1fr)
}
.sg-grid--xs-7 {
-ms-grid-columns: (1fr)[7];
grid-template-columns: repeat(7, 1fr)
}
.sg-grid--xs-8 {
-ms-grid-columns: (1fr)[8];
grid-template-columns: repeat(8, 1fr)
}
.sg-grid--xs-9 {
-ms-grid-columns: (1fr)[9];
grid-template-columns: repeat(9, 1fr)
}
.sg-grid--xs-10 {
-ms-grid-columns: (1fr)[10];
grid-template-columns: repeat(10, 1fr)
}
.sg-grid--xs-11 {
-ms-grid-columns: (1fr)[11];
grid-template-columns: repeat(11, 1fr)
}
.sg-grid--xs-12 {
-ms-grid-columns: (1fr)[12];
grid-template-columns: repeat(12, 1fr)
}
.sg-grid--xs-13 {
-ms-grid-columns: (1fr)[13];
grid-template-columns: repeat(13, 1fr)
}
.sg-grid--xs-14 {
-ms-grid-columns: (1fr)[14];
grid-template-columns: repeat(14, 1fr)
}
@media(min-width: 801px) {
.sg-grid--sm-1 {
-ms-grid-columns:(1fr)[1];
grid-template-columns: repeat(1, 1fr)
}
.sg-grid--sm-2 {
-ms-grid-columns: (1fr)[2];
grid-template-columns: repeat(2, 1fr)
}
.sg-grid--sm-3 {
-ms-grid-columns: (1fr)[3];
grid-template-columns: repeat(3, 1fr)
}
.sg-grid--sm-4 {
-ms-grid-columns: (1fr)[4];
grid-template-columns: repeat(4, 1fr)
}
.sg-grid--sm-5 {
-ms-grid-columns: (1fr)[5];
grid-template-columns: repeat(5, 1fr)
}
.sg-grid--sm-6 {
-ms-grid-columns: (1fr)[6];
grid-template-columns: repeat(6, 1fr)
}
.sg-grid--sm-7 {
-ms-grid-columns: (1fr)[7];
grid-template-columns: repeat(7, 1fr)
}
.sg-grid--sm-8 {
-ms-grid-columns: (1fr)[8];
grid-template-columns: repeat(8, 1fr)
}
.sg-grid--sm-9 {
-ms-grid-columns: (1fr)[9];
grid-template-columns: repeat(9, 1fr)
}
.sg-grid--sm-10 {
-ms-grid-columns: (1fr)[10];
grid-template-columns: repeat(10, 1fr)
}
.sg-grid--sm-11 {
-ms-grid-columns: (1fr)[11];
grid-template-columns: repeat(11, 1fr)
}
.sg-grid--sm-12 {
-ms-grid-columns: (1fr)[12];
grid-template-columns: repeat(12, 1fr)
}
.sg-grid--sm-13 {
-ms-grid-columns: (1fr)[13];
grid-template-columns: repeat(13, 1fr)
}
.sg-grid--sm-14 {
-ms-grid-columns: (1fr)[14];
grid-template-columns: repeat(14, 1fr)
}
.sg-grid--auto-fit {
-ms-grid-columns: (minmax(0, 1fr))[auto-fit];
grid-template-columns: repeat(auto-fit, minmax(0, 1fr))
}
}
@media(min-width: 1024px) {
.sg-grid--m-1 {
-ms-grid-columns:(1fr)[1];
grid-template-columns: repeat(1, 1fr)
}
.sg-grid--m-2 {
-ms-grid-columns: (1fr)[2];
grid-template-columns: repeat(2, 1fr)
}
.sg-grid--m-3 {
-ms-grid-columns: (1fr)[3];
grid-template-columns: repeat(3, 1fr)
}
.sg-grid--m-4 {
-ms-grid-columns: (1fr)[4];
grid-template-columns: repeat(4, 1fr)
}
.sg-grid--m-5 {
-ms-grid-columns: (1fr)[5];
grid-template-columns: repeat(5, 1fr)
}
.sg-grid--m-6 {
-ms-grid-columns: (1fr)[6];
grid-template-columns: repeat(6, 1fr)
}
.sg-grid--m-7 {
-ms-grid-columns: (1fr)[7];
grid-template-columns: repeat(7, 1fr)
}
.sg-grid--m-8 {
-ms-grid-columns: (1fr)[8];
grid-template-columns: repeat(8, 1fr)
}
.sg-grid--m-9 {
-ms-grid-columns: (1fr)[9];
grid-template-columns: repeat(9, 1fr)
}
.sg-grid--m-10 {
-ms-grid-columns: (1fr)[10];
grid-template-columns: repeat(10, 1fr)
}
.sg-grid--m-11 {
-ms-grid-columns: (1fr)[11];
grid-template-columns: repeat(11, 1fr)
}
.sg-grid--m-12 {
-ms-grid-columns: (1fr)[12];
grid-template-columns: repeat(12, 1fr)
}
.sg-grid--m-13 {
-ms-grid-columns: (1fr)[13];
grid-template-columns: repeat(13, 1fr)
}
.sg-grid--m-14 {
-ms-grid-columns: (1fr)[14];
grid-template-columns: repeat(14, 1fr)
}
}
@media(min-width: 1501px) {
.sg-grid--lg-1 {
-ms-grid-columns:(1fr)[1];
grid-template-columns: repeat(1, 1fr)
}
.sg-grid--lg-2 {
-ms-grid-columns: (1fr)[2];
grid-template-columns: repeat(2, 1fr)
}
.sg-grid--lg-3 {
-ms-grid-columns: (1fr)[3];
grid-template-columns: repeat(3, 1fr)
}
.sg-grid--lg-4 {
-ms-grid-columns: (1fr)[4];
grid-template-columns: repeat(4, 1fr)
}
.sg-grid--lg-5 {
-ms-grid-columns: (1fr)[5];
grid-template-columns: repeat(5, 1fr)
}
.sg-grid--lg-6 {
-ms-grid-columns: (1fr)[6];
grid-template-columns: repeat(6, 1fr)
}
.sg-grid--lg-7 {
-ms-grid-columns: (1fr)[7];
grid-template-columns: repeat(7, 1fr)
}
.sg-grid--lg-8 {
-ms-grid-columns: (1fr)[8];
grid-template-columns: repeat(8, 1fr)
}
.sg-grid--lg-9 {
-ms-grid-columns: (1fr)[9];
grid-template-columns: repeat(9, 1fr)
}
.sg-grid--lg-10 {
-ms-grid-columns: (1fr)[10];
grid-template-columns: repeat(10, 1fr)
}
.sg-grid--lg-11 {
-ms-grid-columns: (1fr)[11];
grid-template-columns: repeat(11, 1fr)
}
.sg-grid--lg-12 {
-ms-grid-columns: (1fr)[12];
grid-template-columns: repeat(12, 1fr)
}
.sg-grid--lg-13 {
-ms-grid-columns: (1fr)[13];
grid-template-columns: repeat(13, 1fr)
}
.sg-grid--lg-14 {
-ms-grid-columns: (1fr)[14];
grid-template-columns: repeat(14, 1fr)
}
}
.sg-date-picker-year-entity-wrapper:focus {
outline: none
}
.sg-date-picker-year-entity {
cursor: pointer;
line-height: 36px
}
.sg-date-picker-year-entity:hover {
color: var(--color-secondary)
}
.sg-date-picker-year-entity--selected {
color: var(--color-secondary);
font-size: 26px
}
.sg-date-picker.sg-dialog {
padding: 0
}
.sg-date-picker__input,.sg-date-picker__field {
cursor: pointer;
caret-color: transparent
}
.sg-date-picker__input.sg-date-picker__input--disabled,.sg-date-picker__input.sg-date-picker__field--disabled,.sg-date-picker__field.sg-date-picker__input--disabled,.sg-date-picker__field.sg-date-picker__field--disabled {
cursor: not-allowed
}
.sg-date-picker__header {
border-top-right-radius: 12px;
border-top-left-radius: 12px
}
.sg-theme-hcl .sg-date-picker__header,.sg-theme-hcb .sg-date-picker__header {
border-bottom: 1px solid var(--high-contrast-foreground)
}
.sg-date-picker__header-date {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: start;
align-items: flex-start;
padding: 5px 0
}
.sg-date-picker__nav {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center;
width: 100%
}
.sg-date-picker__content {
width: 100%;
background-color: var(--background-component-primary)
}
.sg-date-picker__content--grid-view {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
align-items: center;
padding: 15px 40px 30px 40px
}
.sg-date-picker__content--fixed-height {
height: 380px
}
.sg-date-picker__content--scrollable {
overflow-x: hidden;
overflow-y: auto;
overflow-y: overlay
}
.sg-date-picker-calendar__row {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 100%;
margin-top: 2px
}
.sg-date-picker__calendar__row--month {
margin-top: 30px
}
@media(max-width: 800px) {
.sg-date-picker__content--grid-view {
padding:0
}
}
.sg-dialog-search {
min-width: 50%;
max-width: 90%;
margin-top: 15vh
}
.sg-dialog-search.sg-dialog {
padding: 0
}
.sg-dialog-search .sg-dialog__content {
display: block;
padding: 0
}
.sg-dialog-search .sg-dialog__icon,.sg-dialog-search .sg-dialog__title {
display: none
}
.sg-theme-hcl .sg-dialog-search,.sg-theme-hcb .sg-dialog-search {
border-top: 1px solid var(--high-contrast-foreground)
}
.sg-dialog-search__input {
-ms-flex: 1;
flex: 1
}
.sg-dialog-search__input .sg-dialog-search__input-wrapper {
border-color: transparent;
box-shadow: none
}
.sg-dialog-search__icon {
color: var(--typography-dark)
}
.sg-dialog-search__icon--close:not(:hover) {
color: var(--color-icon-button)
}
.sg-dialog-search__rows-wrapper {
border-top: 1px solid var(--border-color-outer);
padding: 20px
}
.sg-dialog-search__row {
padding: 10px
}
.sg-dialog-search__row:hover,.sg-dialog-search__row--active {
color: var(--component-color-hover);
background: var(--component-background-hover);
cursor: pointer;
border-radius: 12px
}
.sg-dialog-search__row--no-results {
font-family: var(--font-family-component);
font-size: 22px;
font-style: italic;
font-weight: 600;
border-top: 1px solid var(--border-color-outer);
padding: 20px 10px
}
.sg-dialog-search__row--no-results:hover {
background: none;
cursor: default;
border-radius: 0
}
@media(max-width: 800px) {
.sg-dialog-search {
max-width:100%
}
}
@media(max-width: 1500px) {
.sg-dialog-search__rows-wrapper {
padding:0
}
}
.sg-dropdown-wrapper {
text-align: left
}
.sg-dropdown-wrapper--opened .sg-dropdown--box-shadow {
box-sizing: none
}
.sg-dropdown-wrapper--opened .sg-dropdown-wrapper__input-wrapper {
border-bottom-color: transparent;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0
}
.sg-dropdown-wrapper--opened .sg-dropdown__content {
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
margin-bottom: 20px
}
.sg-dropdown-wrapper--opened .sg-dropdown__content .sg-dropdown__content__shadow {
content: " ";
display: block;
position: absolute;
bottom: -1px;
left: -1px;
right: -1px;
pointer-events: none;
box-shadow: var(--first-level-box-shadow);
border-radius: 4px
}
.sg-dropdown-wrapper--opened .sg-dropdown__content--without-top-border {
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0
}
.sg-dropdown-wrapper--opened .sg-dropdown__content--with-top-border {
border: 1px solid var(--border-color-default);
border-top-left-radius: 12px;
border-top-right-radius: 12px
}
.sg-dropdown-wrapper--opened .sg-dropdown__content--with-box-shadow {
box-shadow: var(--first-level-box-shadow)
}
.sg-dropdown-wrapper--inline {
width: auto;
display: inline-block
}
.sg-dropdown-wrapper--expand {
width: 100%
}
.sg-dropdown {
position: relative;
background-color: var(--background-component-primary);
border-radius: 12px;
color: var(--typography-dark);
cursor: pointer;
font-family: var(--font-family-component);
font-size: 16px;
text-align: left
}
.sg-dropdown:focus {
outline: none;
box-shadow: var(--first-level-box-shadow)
}
.sg-dropdown .sg-dropdown__validation {
display: -ms-flexbox;
display: flex;
bottom: 0;
position: relative;
border: none
}
.sg-dropdown--disabled {
pointer-events: none;
opacity: .5;
cursor: not-allowed
}
.sg-dropdown--has-selection .sg-dropdown-wrapper__input-field:-ms-input-placeholder {
color: var(--typography-dark);
opacity: 1;
cursor: pointer;
font-family: var(--font-family-component);
font-size: inherit;
font-style: normal
}
.sg-dropdown--has-selection .sg-dropdown-wrapper__input-field::placeholder {
color: var(--typography-dark);
opacity: 1;
cursor: pointer;
font-family: var(--font-family-component);
font-size: inherit;
font-style: normal
}
.sg-dropdown__content {
position: absolute;
bottom: auto;
left: 0;
right: 0;
z-index: 50;
border: 1px solid var(--border-color-default);
border-radius: 12px;
overflow: hidden;
background-color: inherit
}
.sg-dropdown__nothing-found {
display: block;
box-shadow: var(--first-level-box-shadow);
position: relative
}
.sg-dropdown--small .sg-dropdown__option,.sg-dropdown--small .sg-dropdown__option-group-header {
padding: 0 10px
}
.sg-dropdown--small .sg-dropdown__icon {
width: 30px;
height: 30px;
padding: 10px;
top: calc(50% - 15px)
}
.sg-dropdown--small .sg-dropdown-wrapper__input-field:-ms-input-placeholder {
font-weight: 400
}
.sg-dropdown--small .sg-dropdown-wrapper__input-field::placeholder {
font-weight: 400
}
.sg-dropdown--medium .sg-dropdown__option,.sg-dropdown--medium .sg-dropdown__option-group-header {
padding: 0 15px
}
.sg-dropdown--medium .sg-dropdown__icon {
width: 40px;
height: 40px;
padding: 15px;
top: calc(50% - 20px)
}
.sg-dropdown--medium .sg-dropdown-wrapper__input-field:-ms-input-placeholder {
font-weight: 400
}
.sg-dropdown--medium .sg-dropdown-wrapper__input-field::placeholder {
font-weight: 400
}
.sg-dropdown--large .sg-dropdown__option,.sg-dropdown--large .sg-dropdown__option-group-header {
padding: 0 20px
}
.sg-dropdown--large .sg-dropdown__icon {
width: 40px;
height: 40px;
padding: 15px;
top: calc(50% - 20px)
}
.sg-dropdown--large .sg-dropdown-wrapper__input-field:-ms-input-placeholder {
font-weight: 600
}
.sg-dropdown--large .sg-dropdown-wrapper__input-field::placeholder {
font-weight: 600
}
.sg-dropdown--x-large .sg-dropdown__option-group-header,.sg-dropdown--x-large .sg-dropdown__option {
padding: 0 30px
}
.sg-dropdown--x-large .sg-dropdown__icon {
width: 60px;
height: 60px;
padding: 25px;
top: calc(50% - 30px)
}
.sg-dropdown--x-large .sg-dropdown-wrapper__input-field:-ms-input-placeholder {
font-weight: 600
}
.sg-dropdown--x-large .sg-dropdown-wrapper__input-field::placeholder {
font-weight: 600
}
.sg-dropdown__options-wrapper {
overflow-y: auto
}
.sg-dropdown__option-group-header {
background-color: var(--background-main);
text-transform: uppercase;
cursor: default;
color: var(--typography-dark);
font-size: 14px
}
.sg-dropdown__option:hover,.sg-dropdown__option--hovered {
color: var(--component-color-hover);
background-color: var(--component-background-hover)
}
.sg-dropdown__option:focus {
outline: none
}
.sg-dropdown__option--disabled {
opacity: .5;
pointer-events: none
}
.sg-dropdown__icon {
position: absolute;
top: 0;
right: 0;
color: var(--color-icon-button);
background: transparent
}
.sg-dropdown--state-success .sg-dropdown__content {
border-color: var(--color-success)
}
.sg-dropdown--state-error .sg-dropdown__content {
border-color: var(--color-error)
}
.sg-dropdown--state-warning .sg-dropdown__content {
border-color: var(--color-warning)
}
.sg-dropdown__option-group-header,.sg-dropdown__option {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.sg-dropdown--box-shadow {
box-shadow: var(--first-level-box-shadow)
}
.sg-dropdown--theme-dark {
background-color: var(--drawer-background);
color: var(--background-main)
}
.sg-dropdown--theme-dark .sg-dropdown__options {
background-color: var(--background-component-primary);
color: var(--typography-dark)
}
.sg-dropdown--theme-dark .sg-dropdown__icon {
color: var(--color-icon-button)
}
.sg-dropdown--transparent {
background-color: transparent
}
.sg-dropdown--border-none .sg-dropdown__content,.sg-dropdown--border-none .sg-input-dropdown__placeholder {
border: none
}
.sg-dropdown-wrapper--strategy-autocomplete.sg-dropdown-wrapper--has-no-items:not(.sg-dropdown--state) .sg-dropdown-wrapper__input-wrapper,.sg-dropdown-wrapper--strategy-email-select.sg-dropdown-wrapper--has-no-items:not(.sg-dropdown--state) .sg-dropdown-wrapper__input-wrapper {
border: 1px solid var(--border-color-default);
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px
}
.sg-dropdown-wrapper--strategy-autocomplete.sg-dropdown-wrapper--has-no-items:not(.sg-dropdown--state) .sg-dropdown__content,.sg-dropdown-wrapper--strategy-email-select.sg-dropdown-wrapper--has-no-items:not(.sg-dropdown--state) .sg-dropdown__content {
border: none
}
@media(max-width: 1500px) {
.sg-dropdown--x-large .sg-dropdown__option {
padding:0 20px
}
.sg-dropdown--x-large .sg-dropdown__icon {
width: 50px;
height: 50px;
padding: 20px;
top: calc(50% - 25px)
}
}
.sg-dropdown-wrapper--opened .sg-input-dropdown__placeholder {
border-bottom-color: transparent;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0
}
.sg-dropdown-wrapper--opened .sg-dropdown--transparent .sg-input-dropdown__placeholder {
border-color: var(--border-color-default);
border-bottom: transparent
}
.sg-dropdown--small .sg-input-dropdown__placeholder {
padding: 0 30px 0 10px
}
.sg-dropdown--medium .sg-input-dropdown__placeholder {
padding: 0 40px 0 15px
}
.sg-dropdown--large .sg-input-dropdown__placeholder {
font-size: 18px;
font-weight: 600;
padding: 0 40px 0 20px
}
.sg-dropdown--x-large .sg-input-dropdown__placeholder {
font-size: 20px;
font-weight: 600;
padding: 0 60px 0 30px
}
.sg-input-dropdown__placeholder {
position: relative;
min-width: 100%;
border: 1px solid var(--border-color-default);
border-radius: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.sg-input-dropdown__placeholder--selected {
color: var(--typography-dark);
font-style: italic;
font-size: 16px
}
.sg-dropdown--state-success .sg-input-dropdown__placeholder {
border-color: var(--color-success)
}
.sg-dropdown--state-error .sg-input-dropdown__placeholder {
border-color: var(--color-error)
}
.sg-dropdown--state-warning .sg-input-dropdown__placeholder {
border-color: var(--color-warning)
}
.sg-dropdown--theme-dark .sg-input-dropdown__placeholder {
border-color: transparent
}
.sg-dropdown--transparent .sg-input-dropdown__placeholder {
border-color: transparent
}
@media(max-width: 1500px) {
.sg-dropdown--x-large .sg-input-dropdown__placeholder {
font-size:18px;
padding: 0 60px 0 20px
}
}
.sg-multiple-dropdown__placeholder {
font-style: italic;
font-weight: 300;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: calc(100% - 30px)
}
.sg-multiple-dropdown__input {
display: -ms-flexbox;
display: flex;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
width: 70px
}
.sg-multiple-dropdown__input .sg-multiple-dropdown__input-wrapper {
border: none;
box-shadow: none
}
.sg-multiple-dropdown__input .sg-multiple-dropdown__input-wrapper .sg-multiple-dropdown__field {
height: 26px
}
.sg-multiple-dropdown__input:not(:first-child) .sg-field {
padding: 0
}
.sg-multiple-dropdown__closed-state.sg-multiple-dropdown__closed-state--success {
border-color: var(--color-success)
}
.sg-multiple-dropdown__closed-state.sg-multiple-dropdown__closed-state--error {
border-color: var(--color-error)
}
.sg-multiple-dropdown__closed-state.sg-multiple-dropdown__closed-state--warning {
border-color: var(--color-warning)
}
.sg-multiple-dropdown__closed-state {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 5px;
min-height: 40px;
border: 1px solid var(--border-color-default);
border-radius: 12px;
cursor: text
}
.sg-multiple-dropdown__closed-state .sg-dropdown__icon {
margin: auto;
top: 0;
bottom: 0
}
.sg-multiple-dropdown__opened-state--no-data {
cursor: default
}
.sg-multiple-dropdown__opened-state--no-data .sg-dropdown__icon {
visibility: hidden
}
.sg-multiple-dropdown__opened-state {
display: -ms-flexbox;
display: flex;
position: relative;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
max-height: 350px;
overflow-x: hidden;
overflow-y: auto;
padding-top: 5px;
padding-right: 40px;
padding-left: 5px;
min-height: 38px;
border-top-left-radius: 12px;
border-top-right-radius: 12px
}
.sg-multiple-dropdown__opened-state .sg-multiple-dropdown__chip {
margin-bottom: 5px
}
.sg-multiple-dropdown__opened-state .sg-multiple-dropdown__placeholder {
padding-top: 5px;
padding-left: 10px
}
.sg-multiple-dropdown__chip {
margin-right: 5px;
cursor: default
}
.sg-multiple-dropdown__chip--invalid {
border: 1px solid var(--color-error)
}
.sg-multiple-dropdown__more-button {
border: 0;
height: inherit;
text-transform: lowercase;
white-space: nowrap;
margin-left: auto;
margin-right: 5px
}
.sg-filter-menu {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
background: var(--context-menu-background)
}
.sg-filter-menu .sg-menu {
overflow-x: hidden;
box-shadow: none
}
@media(max-width: 800px) {
.sg-filter-menu {
-ms-flex-direction:column-reverse;
flex-direction: column-reverse
}
}
.sg-filter-menu--position-absolute {
position: absolute
}
.sg-filter-menu-position-fixed {
position: fixed
}
.sg-filter-list__dropdown-field .sg-menu-item__text {
overflow: visible
}
.sg-filter-list__buttons {
z-index: 80;
background-color: var(--context-menu-background)
}
.sg-filter-menu.sg-filter-menu {
z-index: 80;
box-shadow: var(--second-level-box-shadow);
border-radius: 12px
}
.sg-filter-menu-list--open {
animation: menu-list-open-animation .2s forwards
}
.sg-filter-menu-list--close {
animation: menu-list-close-animation .2s forwards
}
.sg-filter-menu--mobile.sg-filter-menu--open {
animation: menu-wrapper-mobile-open-animation .2s forwards
}
.sg-filter-menu--mobile.sg-filter-menu--close {
animation: menu-wrapper-mobile-close-animation .2s forwards
}
.sg-filter-menu--mobile .sg-filter-menu-list--open {
animation: menu-list-mobile-toggle-animation .2s forwards
}
@supports(-webkit-overflow-scrolling: touch) {
.sg-filter-menu--mobile .sg-filter-menu-list--open {
animation: none
}
}
.sg-filter-menu--mobile .sg-filter-menu-list--close {
animation: menu-list-mobile-close-animation .2s forwards
}
@supports(-webkit-overflow-scrolling: touch) {
.sg-filter-menu--mobile .sg-filter-menu-list--close {
animation: none
}
}
@keyframes menu-list-open-animation {
from {
transform: scale(0, 0)
}
to {
transform: scale(1, 1)
}
}
@keyframes menu-list-close-animation {
to {
transform: scale(0, 0)
}
}
@keyframes menu-list-mobile-toggle-animation {
from {
transform: translateY(100%)
}
to {
transform: translateY(0)
}
}
@keyframes menu-list-mobile-close-animation {
to {
transform: translateY(100%)
}
}
@keyframes menu-wrapper-mobile-open-animation {
from {
background-color: var(--background-component-primary)
}
to {
background-color: var(--background-overlay)
}
}
@keyframes menu-wrapper-mobile-close-animation {
from {
background-color: var(--background-overlay)
}
to {
background-color: transparent
}
}
@supports(-webkit-overflow-scrolling: touch) {
@keyframes menu-wrapper-mobile-open-animation {
from {
opacity: 0
}
to {
opacity: 1
}
}
@keyframes menu-wrapper-mobile-close-animation {
from {
opacity: 1
}
to {
opacity: 0
}
}
}
.sg-filter--trigger-close-background {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 70;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
padding: 20px;
overflow-x: hidden;
overflow-y: auto;
will-change: transform
}
.sg-filter--menu {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0
}
.sg-filter {
display: inline-block;
position: relative
}
.sg-filter:focus {
outline: none
}
.sg-filter__title.sg-filter__title {
padding-top: 20px;
padding-bottom: 20px;
border-bottom: 1px solid var(--border-color-outer);
color: var(--typography-dark);
font-family: var(--font-family-component);
font-weight: 600;
font-size: 18px
}
.sg-filter .sg-menu-group--title {
color: var(--typography-dark);
background-color: var(--background-component-secondary)
}
.sg-filter__checkbox {
pointer-events: none;
padding: 0
}
.sg-filter__icon-selected-state {
position: relative
}
.sg-filter__icon-selected-state::after {
content: "";
position: absolute;
top: 10px;
right: 10px;
background: var(--color-error);
border-radius: 50%;
width: 6px;
height: 6px
}
.sg-theme-hcl .sg-filter-list__buttons,.sg-theme-hcb .sg-filter-list__buttons {
border: 1px solid var(--high-contrast-foreground)
}
@media(min-width: 801px) {
.sg-theme-hcl .sg-filter-list__buttons,.sg-theme-hcb .sg-filter-list__buttons {
border-top:none
}
}
.sg-theme-hcl .sg-filter-menu .sg-menu,.sg-theme-hcb .sg-filter-menu .sg-menu {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0
}
.sg-theme-dark .sg-filter-menu .sg-menu {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0
}
.sg-focusable-element:focus {
outline: none
}
.sg-keyboard .sg-focusable-element:focus {
outline: none;
box-shadow: var(--focus-shadow)
}
.sg-header {
display: -ms-flexbox;
display: flex;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 100%;
padding: 20px 10px;
color: var(--typography-white);
background-color: var(--header-background);
-ms-flex-align: center;
align-items: center
}
.sg-theme-hcl .sg-header,.sg-theme-hcb .sg-header {
border-bottom: 1px solid var(--high-contrast-foreground)
}
.sg-header--shadow {
box-shadow: var(--first-level-box-shadow)
}
@media(max-width: 1500px) {
.sg-header {
padding-top:10px;
padding-bottom: 10px
}
}
.sg-comparison-slider {
width: 100%;
position: relative;
padding-top: 66.6%
}
.sg-comparison-slider-aspect-box {
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column
}
.aspect-ratio-1-1 {
padding-top: 100%
}
.aspect-ratio-3-2 {
padding-top: 66.6%
}
.aspect-ratio-4-3 {
padding-top: 75%
}
.aspect-ratio-5-4 {
padding-top: 80%
}
.aspect-ratio-16-10 {
padding-top: 62.5%
}
.aspect-ratio-16-9 {
padding-top: 56.25%
}
.aspect-ratio-1-85-1 {
padding-top: 54%
}
.aspect-ratio-2-35-1 {
padding-top: 42%
}
.sg-comparison-slider-images {
-ms-flex: 1;
flex: 1;
overflow: hidden;
position: relative
}
.sg-comparison-slider-images input[type=range] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
top: 0;
bottom: 0;
left: 0;
width: 100%;
opacity: 0
}
.sg-comparison-slider-images input[type=range]:active,.sg-comparison-slider-images input[type=range]:hover {
border: none;
outline: none
}
.sg-comparison-slider-images input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 100vh;
background: rgba(0,0,0,0);
border-radius: 0
}
.sg-comparison-slider-images input[type=range]::-moz-range-track {
height: 100vh;
width: 98%
}
.sg-comparison-slider-images input[type=range]::-moz-range-thumb {
width: 20px;
height: 200vh;
border: none
}
.sg-comparison-slider-labels {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between
}
.sg-comparison-slider--images-left,.sg-comparison-slider--images-right {
background-size: cover;
background-position: center center;
background-clip: content-box;
height: 100%;
width: 100%;
overflow: hidden;
bottom: 0;
position: absolute;
transform: translate3d(0, 0, 0)
}
.sg-comparison-slider--images-left {
box-shadow: 0 5px 10px -2px rgba(0,0,0,.3)
}
.sg-comparison-slider--handler {
position: absolute;
top: -10px;
bottom: -10px;
width: 0;
transform: translate(0, -1px);
border-right: solid 2px var(--background-component-primary)
}
.sg-comparison-slider--handler:hover {
cursor: w-resize
}
.sg-comparison-slider--handler .sg-comparison-slider--knob {
position: absolute;
top: 50%;
left: 1px;
width: 25px;
height: 25px;
transform: translate(-50%, -50%);
background: var(--background-component-primary);
border-radius: 50%;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
border: solid 2px var(--color-instruction);
color: var(--color-instruction)
}
.sg-label {
border: 1px solid transparent;
border-radius: 2px;
color: var(--typography-white);
line-height: 1;
font-family: var(--font-family-component);
font-weight: 600;
text-transform: uppercase;
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-negative: 0;
flex-shrink: 0
}
.sg-label:focus {
box-shadow: var(--first-level-box-shadow);
outline: none
}
.sg-label--size-small {
font-size: 14px;
padding: 2px 5px
}
.sg-label--size-medium {
font-size: 13px;
padding: 2px 5px
}
.sg-label--size-large {
font-size: 16px;
padding: 4px 7px
}
.sg-label {
background-color: currentColor
}
.sg-label .sg-label__text {
color: var(--color-button-white)
}
.sg-label--type-outlined {
border-color: currentColor;
background-color: var(--background-component-primary)
}
.sg-label--type-outlined .sg-label__text {
color: currentColor
}
.sg-label--type-link {
background-color: transparent
}
.sg-label--type-link .sg-label__text {
color: currentColor
}
.sg-progress {
height: 8px;
-ms-flex: 1 1 0px;
flex: 1 1 0;
position: relative;
overflow: hidden;
border-radius: 12px;
background: var(--background-slider)
}
.sg-progress:focus {
box-shadow: var(--first-level-box-shadow);
outline: none
}
.sg-progress__indicator {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
transform: translateX(-100%);
border-radius: 12px
}
.sg-progress__indicator--color-blue {
background: var(--background-button-primary)
}
.sg-progress__indicator--color-green {
background: var(--color-success)
}
.sg-progress__indicator--color-orange {
background: var(--color-warning)
}
.sg-progress__indicator--color-red {
background: var(--color-error)
}
.sg-password-generator--reset-validation .sg-password-generator--validation {
background: var(--section-background-white);
color: inherit;
border-right: 1px solid var(--border-color-default);
border-bottom: 1px solid var(--border-color-default);
border-left: 1px solid var(--border-color-default);
box-shadow: var(--background-component-primary)
}
.sg-password-generator--reset-validation .sg-password-generator--validation-success {
border-right: 1px solid var(--color-success);
border-bottom: 1px solid var(--color-success);
border-left: 1px solid var(--color-success)
}
.sg-password-generator--reset-validation .sg-password-generator--validation-error {
border-right: 1px solid var(--color-error);
border-bottom: 1px solid var(--color-error);
border-left: 1px solid var(--color-error)
}
.sg-password-generator--reset-validation .sg-password-generator--validation-error[class*=sg-validation--error-focused] {
box-shadow: 0 1px 0 1px var(--border-color-input-error-focused);
border-bottom: none;
border-right: 1px solid var(--border-color-input-error-focused);
border-left: 1px solid var(--border-color-input-error-focused)
}
.sg-password-generator--reset-validation .sg-password-generator--validation-warning {
border-right: 1px solid var(--color-warning);
border-bottom: 1px solid var(--color-warning);
border-left: 1px solid var(--color-warning)
}
.sg-password-generator--reset-validation .sg-password-generator--wrapper {
background-color: var(--background-component-primary);
border: 1px solid var(--border-color-default);
box-shadow: none
}
.sg-password-generator--reset-validation .sg-password-generator--wrapper-success {
border-color: var(--color-success);
box-shadow: none
}
.sg-password-generator--reset-validation .sg-password-generator--wrapper-warning {
border-color: var(--color-warning);
box-shadow: none
}
.sg-password-generator--reset-validation .sg-password-generator--wrapper-hint {
border-color: var(--border-color-default);
box-shadow: none
}
.sg-password-generator__label {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center
}
.sg-password__validation {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
background: var(--section-background-white)
}
.sg-password__validation :nth-child(2) {
margin-top: 5px
}
.sg-password__strength-meter-wrapper {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
width: 100%
}
.sg-password__strength-meter-wrapper .sg-password__strength-meter__label {
padding: 0
}
.sg-card {
border-radius: 12px;
background: var(--background-component-primary);
border: 1px solid transparent;
position: relative
}
.sg-card:focus {
outline: none
}
.sg-keyboard .sg-card:focus {
outline: none;
box-shadow: var(--focus-shadow)
}
.sg-card__content-wrapper--row {
height: 100%;
grid-auto-flow: row;
-ms-grid-rows: auto 1fr;
grid-template-rows: auto 1fr
}
.sg-card__content-wrapper--row .sg-card__content {
text-align: center
}
.sg-card__content-wrapper--column {
grid-auto-flow: column
}
.sg-card__content-wrapper--column .sg-card__content {
text-align: left
}
.sg-card__content-wrapper--column.sg-card__content-wrapper {
-ms-grid-columns: 160px 1fr;
grid-template-columns: 160px 1fr
}
.sg-card__content-wrapper--column.sg-card__content-wrapper--divided {
-ms-grid-columns: 160px 1px 1fr;
grid-template-columns: 160px 1px 1fr
}
.sg-card--outline-shadow {
box-shadow: var(--first-level-box-shadow)
}
.sg-card--outline-shadow:focus {
outline: none
}
.sg-keyboard .sg-card--outline-shadow:focus {
outline: none;
box-shadow: var(--first-level-box-shadow),var(--focus-shadow)
}
.sg-card--outline-border {
border: 1px solid var(--border-color-outer)
}
.sg-card--selected::before {
content: " ";
position: absolute;
display: block;
top: -1px;
bottom: -1px;
right: -1px;
left: -1px;
border: 2px solid var(--background-button-primary-hovered);
border-radius: 12px;
pointer-events: none
}
.sg-card__icon-wrapper {
text-align: center
}
.sg-card__divider::before {
content: " ";
position: absolute;
display: block;
top: 0;
bottom: 0;
border-left: 1px solid var(--border-color-outer)
}
.sg-card__content--vertical {
text-align: center;
-ms-grid-rows: auto 1fr;
grid-template-rows: auto 1fr
}
.sg-card__content--vertical .sg-card__actions-wrapper {
-ms-flex-item-align: end;
align-self: flex-end
}
.sg-card-notifications {
border-top: 2px solid var(--color-error)
}
.sg-card-notification {
-ms-grid-columns: auto 1fr auto;
grid-template-columns: auto 1fr auto
}
.sg-card-notification:focus {
outline: none
}
.sg-keyboard .sg-card-notification:focus {
outline: none;
box-shadow: var(--first-level-box-shadow),var(--focus-shadow)
}
.sg-card-notification:last-child {
border: none
}
@media(max-width: 800px) {
.sg-card-notification {
-ms-grid-columns:auto;
grid-template-columns: auto
}
}
.sg-card-notification--description a {
color: var(--color-primary)
}
.sg-card-notification--description a:visited {
color: var(--color-info)
}
.sg-list {
list-style: none
}
.sg-list__item {
display: -ms-flexbox;
display: flex;
-ms-flex-align: start;
align-items: flex-start
}
.sg-list__item .sg-list__wrapper-icon {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center
}
.sg-list__content {
padding: 0 10px;
width: 100%
}
.sg-list--ordered {
counter-reset: order
}
.sg-list--ordered>.sg-list__item::before {
font-weight: 700;
counter-increment: order;
content: counter(order) ". "
}
.sg-list__content .sg-list__content {
padding: 0
}
.sg-list__content .sg-list__wrapper-icon {
margin-right: 10px
}
.sg-list--size-small {
font-size: 14px;
line-height: 18px
}
.sg-list--size-small .sg-list__wrapper-icon {
height: 18px
}
.sg-list--size-medium {
font-size: 16px;
line-height: 26px
}
.sg-list--size-medium .sg-list__wrapper-icon {
height: 22px
}
.sg-list--size-large {
font-size: 18px;
line-height: 28px
}
.sg-list--size-large .sg-list__wrapper-icon {
height: 28px
}
.sg-list--size-large .sg-list__content {
padding: 0 15px
}
.sg-list--type-success .sg-list__icon {
color: var(--color-success)
}
.sg-list--type-error .sg-list__icon {
color: var(--color-error)
}
.sg-list--type-warning .sg-list__icon {
color: var(--color-warning)
}
.sg-list--type-info .sg-list__icon {
color: var(--color-info)
}
.sg-list--type-instruction .sg-list__icon {
color: var(--color-instruction)
}
.sg-list--orientation-vertical .sg-list__content,.sg-list--orientation-vertical.sg-list--large .sg-list__content {
padding-right: 0
}
.sg-list--orientation-horizontal {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-align: center;
align-items: center
}
.sg-list--orientation-horizontal .sg-list__item:last-child .sg-list__content {
padding-right: 0
}
.sg-list--orientation-horizontal:not(.sg-list--show-first-icon) .sg-list__item:first-child .sg-list__icon {
display: none
}
.sg-list--orientation-horizontal:not(.sg-list--show-first-icon) .sg-list__item:first-child .sg-list__content {
padding-left: 0
}
.sg-list--justify-flex-start>.sg-list__item {
-ms-flex-pack: start;
justify-content: flex-start
}
.sg-list--justify-center>.sg-list__item {
-ms-flex-pack: center;
justify-content: center
}
.sg-list--justify-center>.sg-list__item>.sg-list__content:only-child {
padding: 0
}
.sg-list--justify-flex-end>.sg-list__item {
-ms-flex-pack: end;
justify-content: flex-end
}
.sg-list--density-large>.sg-list__item:nth-child(n+2) {
margin-top: 10px
}
.sg-list--density-x-large>.sg-list__item:nth-child(n+2) {
margin-top: 15px
}
.sg-loader {
top: 0;
left: 0
}
.sg-loader:focus {
outline: none
}
.sg-keyboard .sg-loader:focus {
outline: none;
box-shadow: var(--focus-shadow)
}
.sg-loader--background-default {
background: var(--loader-background)
}
.sg-loader--background-dark {
background: var(--loader-background-dark)
}
.sg-loader--density-none {
padding: 0
}
.sg-loader--density-medium {
padding: 40px 0
}
.sg-loader--position-absolute {
position: absolute;
right: 0;
bottom: 0;
z-index: 100
}
.sg-loader--position-fixed {
position: fixed;
right: 0;
bottom: 0;
z-index: 100
}
.sg-loader--position-relative {
position: relative;
z-index: 100
}
.sg-loader__content {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
align-items: center
}
.sg-loader__content--position-sticky {
position: sticky;
top: calc(50% - 25px)
}
@supports not (position: sticky) {
.sg-loader__content--position-sticky {
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
}
.sg-loader__content--position-absolute {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.sg-loader__content--transparent {
opacity: .6
}
.sg-loader__message {
margin-top: 20px;
max-width: 500px;
color: var(--typography-dark);
font-size: 14px;
font-weight: 400;
font-family: var(--font-family-component);
line-height: 18px;
text-align: center;
text-transform: uppercase
}
.sg-loader__message--color-dark {
color: var(--typography-white)
}
.sg-loader__spinner {
position: relative;
margin: 0 auto;
width: 50px
}
.sg-notice {
display: -ms-flexbox;
display: flex;
position: relative;
background-color: var(--background-component-primary);
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
color: var(--typography-dark);
text-align: start
}
.sg-notice:focus {
outline: none
}
.sg-keyboard .sg-notice:focus {
outline: none;
box-shadow: var(--focus-shadow)
}
.sg-notice .sg-notice__close-icon {
color: currentColor
}
.sg-notice__icon {
margin-top: 0
}
.sg-notice__icon--center-by-title {
margin-top: 4px
}
.sg-notice__content {
-ms-flex: 1 1 0px;
flex: 1 1 0;
word-break: break-word
}
.sg-notice__content--size-limited {
max-width: 800px
}
.sg-notice__content--size-expanded {
max-width: 100%
}
.sg-notice__close-icon {
position: absolute;
top: 15px;
right: 20px
}
.sg-notice--shadow {
box-shadow: var(--first-level-box-shadow)
}
.sg-notice--shadow:focus {
outline: none
}
.sg-keyboard .sg-notice--shadow:focus {
outline: none;
box-shadow: var(--first-level-box-shadow),var(--focus-shadow)
}
.sg-notice--type-success {
border: 3px solid var(--color-success)
}
.sg-notice--type-success .sg-list__icon {
color: var(--color-success)
}
.sg-notice--type-error {
border: 3px solid var(--color-error)
}
.sg-notice--type-error .sg-list__icon {
color: var(--color-error)
}
.sg-notice--type-warning {
border: 3px solid var(--color-warning)
}
.sg-notice--type-warning .sg-list__icon {
color: var(--color-warning)
}
.sg-notice--type-info {
border: 3px solid var(--color-info)
}
.sg-notice--type-info .sg-list__icon {
color: var(--color-info)
}
.sg-notice--type-hint {
border: 3px solid var(--color-hint)
}
.sg-notice--density-compact {
padding: 10px
}
.sg-notice--density-compact .sg-notice--border {
border-width: 2px
}
.sg-notice--density-compact .sg-notice__content {
padding: 0 10px 0 10px
}
.sg-notice--density-cozy {
padding: 15px 20px
}
.sg-notice--density-cozy .sg-notice__content {
padding: 0 10px 5px 20px
}
@media(max-width: 1500px) {
.sg-notice--density-compact,.sg-notice--density-cozy {
padding:10px
}
.sg-notice--density-compact .sg-notice__content,.sg-notice--density-cozy .sg-notice__content {
padding: 0 10px 0 10px
}
.sg-notice--border {
border-width: 2px
}
}
.sg-navigation {
background-color: var(--navigation-background)
}
.sg-navigation:focus {
outline: none
}
.sg-keyboard .sg-navigation:focus {
outline: none;
box-shadow: var(--focus-shadow)
}
.sg-navigation--vertical .sg-navigation-list:first-child {
padding-top: 20px
}
.sg-navigation-list {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
cursor: pointer;
font-size: 18px
}
.sg-navigation-list:focus {
outline: none
}
.sg-keyboard .sg-navigation-list:focus {
outline: none;
box-shadow: var(--focus-shadow)
}
.sg-navigation-list__title {
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-align: center;
align-items: center;
height: 50px;
padding-left: 20px;
padding-right: 20px;
color: var(--typography-dark);
text-transform: capitalize;
font-size: 18px;
font-family: var(--font-family-component);
font-weight: 600
}
.sg-navigation-list__title:focus {
outline: none
}
.sg-keyboard .sg-navigation-list__title:focus {
outline: none;
box-shadow: var(--focus-shadow)
}
.sg-navigation-list__title--active {
color: var(--navigation-list-color-selected);
background-color: var(--navigation-list-background-selected);
border-top-right-radius: 3rem;
border-bottom-right-radius: 3rem
}
.sg-navigation-list__title--active .sg-navigation-list__icon {
color: var(--navigation-icon-color-selected)
}
.sg-navigation-list__icon {
color: var(--navigation-icon-color)
}
.sg-navigation-list--open {
background-color: var(--navigation-list-background-opened)
}
.sg-navigation-list--open .sg-navigation-list__item {
display: -ms-flexbox;
display: flex
}
.sg-navigation-list:not(.sg-navigation-list--open):hover {
border-top-right-radius: 3rem;
border-bottom-right-radius: 3rem;
background-color: var(--navigation-list-background-hovered)
}
.sg-navigation-list__item {
display: none;
-ms-flex-align: center;
align-items: center;
color: var(--typography-dark)
}
.sg-navigation-list__item:focus {
outline: none
}
.sg-keyboard .sg-navigation-list__item:focus {
outline: none;
box-shadow: var(--focus-shadow)
}
.sg-navigation-list__item:empty {
padding-left: calc(18px + 10px + 20px)
}
.sg-navigation-list__item a {
display: -ms-flexbox;
display: flex;
width: 100%;
height: 100%;
-ms-flex-align: center;
align-items: center;
padding: 15px 0 15px calc(18px + 10px + 20px);
color: var(--typography-dark)
}
.sg-navigation-list__item a:focus {
outline: none
}
.sg-navigation-list__item:hover {
border-top-right-radius: 3rem;
border-bottom-right-radius: 3rem;
background-color: var(--navigation-list-background-hovered)
}
.sg-navigation-list__item.sg-navigation-list__item--active {
color: var(--navigation-list-color-selected);
background-color: var(--navigation-list-background-selected);
border-top-right-radius: 3rem;
border-bottom-right-radius: 3rem
}
.sg-navigation-list__item.sg-navigation-list__item--active a {
color: var(--navigation-list-color-selected)
}
.sg-navigation-list__item--visible {
display: -ms-flexbox;
display: flex;
background-color: transparent
}
@media(max-width: 1500px) {
.sg-navigation-list {
font-size:16px
}
}
.sg-simple-navigation {
background-color: var(--header-navigation-background);
color: var(--header-navigation-color);
font-family: var(--font-family-component);
font-weight: 400;
font-size: 18px;
line-height: 28px;
text-transform: capitalize
}
.sg-simple-navigation:focus {
outline: none
}
.sg-keyboard .sg-simple-navigation:focus {
outline: none;
box-shadow: var(--focus-shadow)
}
.sg-simple-navigation__list {
display: -ms-flexbox;
display: flex
}
.sg-simple-navigation__list--orientation-horizontal {
-ms-flex-align: center;
align-items: center
}
.sg-simple-navigation__list--orientation-vertical {
-ms-flex-direction: column;
flex-direction: column
}
.sg-simple-navigation__item {
position: relative;
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-align: center;
align-items: center;
height: 60px;
cursor: pointer
}
.sg-simple-navigation__item:focus {
outline: none
}
.sg-keyboard .sg-simple-navigation__item:focus {
outline: none;
box-shadow: var(--focus-shadow)
}
.sg-simple-navigation__item:hover {
color: var(--header-navigation-color-hover);
background-color: var(--header-navigation-background-hover);
border-top-right-radius: 12px;
border-top-left-radius: 12px
}
.sg-simple-navigation__item a {
display: -ms-flexbox;
display: flex;
width: 100%;
height: 100%;
-ms-flex-align: center;
align-items: center;
font-weight: 600;
padding: 0 20px;
border-top: 3px solid transparent;
color: var(--header-navigation-color)
}
.sg-simple-navigation__item a:focus {
outline: none
}
.sg-simple-navigation__item a:hover {
color: currentColor
}
.sg-simple-navigation__item--active {
color: var(--header-navigation-color-selected);
background-color: var(--header-navigation-background-selected);
border-top-right-radius: 12px;
border-top-left-radius: 12px
}
.sg-simple-navigation__item--active a {
color: currentColor
}
@media(max-width: 1500px) {
.sg-simple-navigation__item a {
padding:0 15px;
font-size: 16px
}
}
@media(max-width: 1200px) {
.sg-simple-navigation__item a {
padding:0 10px
}
}
.sg-radio-button {
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-align: start;
align-items: flex-start;
color: var(--typography-dark);
cursor: pointer;
font-family: var(--font-family-component);
font-weight: 400
}
.sg-radio-button:focus {
outline: none
}
.sg-radio-button:focus .sg-radio-button__icon {
box-shadow: var(--first-level-box-shadow)
}
.sg-radio-button__input {
display: none
}
.sg-radio-button__icon {
-ms-flex-negative: 0;
flex-shrink: 0;
border: 1px solid var(--border-color-default);
border-radius: 50%;
background: var(--background-component-primary);
color: transparent
}
.sg-radio-button--disabled {
opacity: .5;
pointer-events: none
}
.sg-radio-button--small {
padding: 7px 0
}
.sg-radio-button--small .sg-radio-button__icon {
width: 12px;
height: 12px;
margin-top: 1px
}
.sg-radio-button--small .sg-radio-button__label {
font-size: 14px;
line-height: 18px
}
.sg-radio-button--small .sg-radio-button__icon+.sg-radio-button__label,.sg-radio-button--small .sg-radio-button__label+.sg-radio-button__icon {
margin-left: 6px
}
.sg-radio-button--medium {
padding: 9px 0
}
.sg-radio-button--medium .sg-radio-button__icon {
width: 18px;
height: 18px;
margin-top: 1px
}
.sg-radio-button--medium .sg-radio-button__label {
font-size: 16px;
line-height: 26px
}
.sg-radio-button--medium .sg-radio-button__icon+.sg-radio-button__label,.sg-radio-button--medium .sg-radio-button__label+.sg-radio-button__icon {
margin-left: 8px
}
.sg-radio-button--large {
padding: 11px 0
}
.sg-radio-button--large .sg-radio-button__icon {
width: 22px;
height: 22px;
margin-top: 2px
}
.sg-radio-button--large .sg-radio-button__label {
font-size: 18px;
line-height: 28px
}
.sg-radio-button--large .sg-radio-button__icon+.sg-radio-button__label,.sg-radio-button--large .sg-radio-button__label+.sg-radio-button__icon {
margin-left: 10px
}
.sg-radio-button--x-large {
padding: 15px 0
}
.sg-radio-button--x-large .sg-radio-button__icon {
width: 25px;
height: 25px;
margin-top: 2px
}
.sg-radio-button--x-large .sg-radio-button__label {
font-size: 22px;
line-height: 32px
}
.sg-radio-button--x-large .sg-radio-button__icon+.sg-radio-button__label,.sg-radio-button--x-large .sg-radio-button__label+.sg-radio-button__icon {
margin-left: 15px
}
.sg-radio-button__input:focus~.sg-radio-button__icon {
box-shadow: var(--first-level-box-shadow)
}
.sg-radio-button__input:checked~.sg-radio-button__icon {
border: 1px solid var(--color-primary);
color: var(--color-primary)
}
.sg-pagination {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center
}
.sg-pagination__button {
padding: 0
}
.sg-pagination__button:nth-child(n+2) {
margin-left: 0
}
.sg-pagination__input-container {
margin: 0 20px
}
.sg-pagination__input {
width: 40px;
height: 30px;
border: 1px solid var(--border-color-default);
margin-right: 5px;
border-radius: 12px;
text-align: center
}
.sg-pagination__input::-webkit-outer-spin-button,.sg-pagination__input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0
}
.sg-pagination__input[type=number] {
-moz-appearance: textfield
}
.sg-slider {
position: relative;
width: 100%;
padding-top: 16px
}
.sg-slider__value-top {
display: inline-block;
position: absolute;
top: 0;
transform: translateX(-50%);
white-space: nowrap
}
.sg-slider__value {
position: absolute;
bottom: 0;
transform: translateX(-50%);
white-space: nowrap;
color: var(--typography-dark)
}
.sg-slider__value--start {
transform: translateX(0%)
}
.sg-slider__value--end {
transform: translateX(-100%)
}
.sg-slider__controls,.sg-slider__bar,.sg-slider__pin {
height: 8px;
border-radius: 8px;
cursor: pointer
}
.sg-slider__track {
padding: 8px 0
}
.sg-slider__track:focus {
outline: none
}
.sg-slider__controls {
position: relative;
background: var(--background-slider)
}
.sg-slider__input {
width: 100%;
height: 100%;
position: absolute;
left: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
opacity: 0
}
.sg-slider__bar {
position: absolute;
top: 0;
left: 0;
background: var(--color-primary);
pointer-events: none
}
.sg-slider__bar.sg-slider__bar--upgrade {
background: var(--color-primary-active)
}
.sg-slider__pin {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
background: var(--color-error)
}
.sg-slider__pin::after {
content: "";
position: absolute;
display: block;
height: 16px;
width: 1px;
right: 0;
top: -4px;
background: var(--color-error)
}
.sg-slider__pin.sg-slider__pin--upgrade {
background: var(--color-primary);
z-index: 1
}
.sg-slider__pin.sg-slider__pin--upgrade::after {
background: var(--color-primary-hovered)
}
.sg-slider__knob {
position: absolute;
top: 0;
right: 0;
transform: translateY(-25%);
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--color-primary);
z-index: 1;
cursor: pointer
}
.sg-slider__knob.sg-slider__knob--start {
transform: translateX(50%) translateY(-25%)
}
.sg-slider__track:focus .sg-slider__knob::after {
content: "";
position: absolute;
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
background-color: var(--color-primary);
border-radius: 50%;
opacity: .2
}
.sg-slider__track:active .sg-slider__knob {
transform: scale(1.2) translateY(-25%)
}
.sg-slider__track:active .sg-slider__knob.sg-slider__knob--start {
transform: scale(1.2) translateX(50%) translateY(-25%)
}
.sg-slider__labels {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between
}
.sg-slider__labels--light {
color: var(--typography-light);
font-size: 14px;
vertical-align: bottom
}
.sg-sort.sg-sort-colored svg {
color: var(--color-error)
}
.sg-theme-hcl .sg-sort.sg-sort-colored svg {
color: var(--color-icon-button)
}
.sg-theme-hcl .sg-sort.sg-sort-colored:hover svg,.sg-theme-hcl .sg-sort.sg-sort-colored:active svg,.sg-theme-hcl .sg-sort.sg-sort-colored:focus svg {
color: var(--high-contrast-background)
}
.sg-star-rating {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-ms-flex-pack: distribute;
justify-content: space-around
}
.sg-star-rating:focus {
outline: none
}
.sg-keyboard .sg-star-rating:focus {
outline: none;
box-shadow: var(--focus-shadow)
}
.sg-star-rating--size-small {
width: 100px
}
.sg-star-rating--size-medium {
width: 250px
}
.sg-star-rating--size-large {
width: 380px
}
.sg-switch {
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-align: center;
align-items: center;
color: var(--typography-dark);
cursor: pointer;
font-family: var(--font-family-component);
font-weight: 400;
padding: 1px
}
.sg-switch:focus {
outline: none
}
.sg-switch:focus .sg-switch__slider {
box-shadow: var(--first-level-box-shadow)
}
.sg-switch__input {
display: none
}
.sg-switch__slider {
display: block;
-ms-flex-negative: 0;
flex-shrink: 0;
position: relative;
background-color: var(--background-slider);
cursor: pointer
}
.sg-switch__slider:focus {
box-shadow: var(--first-level-box-shadow)
}
.sg-switch__slider::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
bottom: 2px;
width: calc(50% - 1px);
background-color: var(--background-component-primary);
border-radius: 50%;
transition: .4s
}
.sg-switch--disabled {
opacity: .5;
pointer-events: none
}
.sg-switch__input:checked+.sg-switch__slider {
background-color: var(--background-button-primary)
}
.sg-switch__input:checked+.sg-switch__slider::after {
transform: translateX(calc(100% - 2px))
}
.sg-switch--small .sg-switch__slider {
height: 20px;
width: 34px;
border-radius: 15px
}
.sg-switch--small .sg-switch__label {
margin-left: 6px;
font-size: 14px;
line-height: 18px
}
.sg-switch--medium .sg-switch__slider {
height: 30px;
width: 54px;
border-radius: 15px
}
.sg-switch--medium .sg-switch__label {
margin-left: 6px;
font-size: 16px;
line-height: 26px
}
.sg-switch--large .sg-switch__slider {
height: 40px;
width: 74px;
border-radius: 20px
}
.sg-switch--large .sg-switch__label {
margin-left: 8px;
font-size: 18px;
line-height: 28px
}
@media screen and (-ms-high-contrast: active),screen and (-ms-high-contrast: none) {
.sg-switch__input:checked+.sg-switch__slider::after {
left: auto;
right: 2px
}
}
.sg-placeholder-wrapper {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
overflow: hidden
}
.sg-placeholder-wrapper:focus {
outline: none
}
.sg-keyboard .sg-placeholder-wrapper:focus {
outline: none;
box-shadow: var(--focus-shadow)
}
.sg-theme-hcl .sg-placeholder-wrapper,.sg-theme-hcb .sg-placeholder-wrapper {
border: 1px solid var(--high-contrast-foreground)
}
.sg-placeholder-wrapper--border-radius-medium {
border-radius: 12px
}
.sg-placeholder {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
padding: 40px;
z-index: 2;
width: 100%
}
.sg-placeholder--background-white {
background-color: var(--background-component-primary)
}
.sg-placeholder--background-lighter {
background-color: var(--background-main)
}
.sg-placeholder--shadow {
box-shadow: var(--first-level-box-shadow)
}
.sg-placeholder-icon-wrapper {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
border-radius: 50%;
background-color: var(--background-component-primary);
margin-bottom: 20px
}
.sg-placeholder-spacer {
margin-top: 40px
}
.sg-placeholder__images-container {
margin: 0 auto;
width: 800px;
max-width: 100%;
position: absolute;
height: 240px;
overflow: hidden;
top: 40px
}
.sg-placeholder__background-elements {
width: 800px;
height: 240px;
max-width: 100%;
position: absolute
}
@media(max-width: 1500px) {
.sg-placeholder__background-elements {
display:none
}
.sg-placeholder {
padding: 20px
}
}
.table-row--loading {
pointer-events: none
}
.table-row--loading .table-row__cell--loading {
padding: 5px
}
.table-row__loader-wrapper {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
max-width: 100%;
height: 100%;
position: relative
}
.hammerjs-wrapper {
-webkit-user-select: auto !important;
-moz-user-select: auto !important;
-ms-user-select: auto !important;
user-select: auto !important
}
@media(max-width: 800px) {
.table-row__loader-wrapper {
min-height:50px
}
}
.sg-table-dnd-placeholder {
width: 100%
}
.sg-table-dnd-placeholder tr {
display: -ms-flexbox;
display: flex
}
.sg-table-dnd-placeholder td {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex: 1;
flex: 1
}
.sg-icon-expandable {
margin-right: 15px
}
.sg-table-wrapper {
width: 100%;
max-width: 100%;
border-radius: 12px;
background-color: var(--background-component-primary)
}
.sg-theme-hcl .sg-table-wrapper,.sg-theme-hcb .sg-table-wrapper {
border: 1px solid var(--high-contrast-foreground)
}
.sg-table-wrapper--box-shadow {
box-shadow: var(--first-level-box-shadow)
}
.sg-table {
width: 100%;
border-radius: 12px;
text-align: start;
table-layout: fixed
}
.sg-table .sg-table__head .sg-table__cell:first-of-type {
border-top-left-radius: 12px
}
.sg-table .sg-table__head .sg-table__cell:last-of-type {
border-top-right-radius: 12px
}
.sg-table .sg-table__row:last-of-type .sg-table__cell:first-of-type {
border-bottom-left-radius: 12px
}
.sg-table .sg-table__row:last-of-type .sg-table__cell:last-of-type {
border-bottom-right-radius: 12px
}
.sg-table__head .sg-table__cell {
color: var(--typography-dark);
font-family: var(--font-family-component);
font-weight: 600;
font-size: var(--typography-table-label-size);
line-height: 20px;
text-align: left;
border-top: none
}
.sg-table__head-tile {
text-align: center
}
.sg-table__head--background-white .sg-table__cell {
background-color: var(--background-component-primary)
}
.sg-table__footer--background-default .sg-table__cell {
border-radius: 12px
}
.sg-table__footer--background-white .sg-table__cell {
background-color: var(--background-component-primary);
border-radius: 12px
}
.sg-table__row--animation-enter {
opacity: 0;
transition: opacity .5s linear
}
.sg-table__row--animation-enter-active {
opacity: 1
}
.sg-table__row--animation-exit {
pointer-events: none;
transition: opacity .5s linear
}
.sg-table__row--animation-exit-active {
opacity: 0
}
.sg-table__cell.sg-table__cell--is-in-row-selection,.sg-table__cell--is-in-row-selection {
background-color: var(--component-background-hover)
}
.sg-theme-hcl .sg-table__cell.sg-table__cell--is-in-row-selection,.sg-theme-hcl .sg-table__cell--is-in-row-selection,.sg-theme-hcb .sg-table__cell.sg-table__cell--is-in-row-selection,.sg-theme-hcb .sg-table__cell--is-in-row-selection {
background-color: var(--component-background-hover)
}
.sg-table__cell {
position: relative;
padding: 0 20px;
vertical-align: middle;
background-color: var(--background-component-primary);
border-top: 1px solid var(--border-color-inner);
font-size: 16px;
line-height: 20px;
text-align: left
}
.sg-table__cell:focus {
outline: none
}
.sg-keyboard .sg-table__cell:focus {
outline: none;
box-shadow: var(--focus-shadow)
}
.sg-table__cell--height-small {
height: 40px
}
.sg-table__cell--height-medium {
height: 60px
}
.sg-table__cell-dnd-wrapper {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center
}
.sg-table__cell-dnd-wrapper .sg-icon-move {
display: none
}
.sg-table__cell-dnd-wrapper .sg-icon-dnd {
margin-right: 15px;
color: var(--color-icon-button)
}
.sg-table__after-content {
border-top: 1px solid var(--border-color-inner)
}
.sg-table-load-more {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
padding: 20px;
border-bottom-right-radius: 12px;
border-bottom-left-radius: 12px
}
.sg-theme-hcl .sg-table-load-more,.sg-theme-hcb .sg-table-load-more {
border-top: 1px solid var(--high-contrast-foreground)
}
.sg-table .sg-table__row .sg-table__cell.sg-table__expand-toggle {
text-align: center;
background-color: var(--background-component-secondary);
padding: 20px 15px
}
.sg-table__cell--skeleton {
background-color: var(--background-component-secondary);
height: 14px
}
.sg-table-wrapper--density-none .sg-table__cell {
padding: 0
}
.sg-table-wrapper--density-none .sg-table__after-content {
padding: 0
}
.sg-table-wrapper--density-small .sg-table__cell:first-child {
padding-left: 20px
}
.sg-table-wrapper--density-small .sg-table__cell:last-child {
padding-right: 20px
}
.sg-table-wrapper--density-small .sg-table__after-content {
padding: 20px 20px
}
.sg-table-wrapper--density-small .sg-table-wrapper--density-small .sg-table__cell:first-child {
padding-left: 40px
}
.sg-table-wrapper--density-small .sg-table-wrapper--density-small .sg-table__cell:last-child {
padding-right: 40px
}
.sg-table-wrapper--density-medium .sg-table__cell:first-child {
padding-left: 30px
}
.sg-table-wrapper--density-medium .sg-table__cell:first-child::before {
left: 5px
}
.sg-table-wrapper--density-medium .sg-table__cell:last-child {
padding-right: 30px
}
.sg-table-wrapper--density-medium .sg-table__after-content {
padding: 20px 30px
}
.sg-table-wrapper--density-medium .sg-table-wrapper--density-medium .sg-table__cell:first-child {
padding-left: 60px
}
.sg-table-wrapper--density-medium .sg-table-wrapper--density-medium .sg-table__cell:first-child::before {
left: 10px
}
.sg-table-wrapper--density-medium .sg-table-wrapper--density-medium .sg-table__cell:last-child {
padding-right: 60px
}
.sg-table-wrapper--density-large .sg-table__cell:first-child {
padding-left: 60px
}
.sg-table-wrapper--density-large .sg-table__after-content {
padding: 20px 60px
}
.sg-table-wrapper--density-large .sg-table__cell:last-child {
padding-right: 60px
}
.sg-table-wrapper--density-large .sg-table-wrapper--density-large .sg-table__cell:first-child {
padding-left: 120px
}
.sg-table-wrapper--density-large .sg-table-wrapper--density-large .sg-table__cell:last-child {
padding-right: 120px
}
.sg-product-table {
width: 100%
}
.sg-product-table .sg-toolbar {
margin: 0
}
sg-product-table {
border: 2px solid transparent
}
.sg-product-table--selected {
border: 2px solid var(--color-primary);
border-radius: 12px
}
.sg-product-table__row {
border-bottom: 1px solid var(--border-color-inner)
}
@media(min-width: 801px) {
.sg-table.sg-table--no-footer .sg-table__row:last-child .sg-table__cell--is-selected::before {
border-bottom:2px solid var(--background-button-primary)
}
.sg-table__cell--is-selected::before {
content: " ";
position: absolute;
display: block;
top: -1px;
bottom: 0;
right: 0;
left: -2px;
border-left: 2px solid var(--background-button-primary);
border-right: 2px solid var(--background-button-primary);
pointer-events: none
}
.sg-table__head .sg-table__cell--is-selected::before {
border-top: 2px solid var(--background-button-primary);
border-radius: 12px 12px 0 0
}
.sg-table__footer .sg-table__cell--is-selected::before {
border-bottom: 2px solid var(--background-button-primary);
border-radius: 0 0 12px 12px
}
}
@media(min-width: 801px) {
.sg-table__row:hover .sg-table__cell {
background-color:var(--component-background-hover)
}
}
@media(max-width: 800px) {
.sg-table {
table-layout:fixed
}
.sg-table-wrapper .sg-table__after-content {
padding: 0
}
.sg-table-wrapper--mobile-card .sg-table__cell,.sg-table-wrapper--mobile-card .sg-table__cell:first-child,.sg-table-wrapper--mobile-card .sg-table__cell:last-child,.sg-table-wrapper--mobile-card-flat .sg-table__cell,.sg-table-wrapper--mobile-card-flat .sg-table__cell:first-child,.sg-table-wrapper--mobile-card-flat .sg-table__cell:last-child {
padding: 24px 20px 15px 20px
}
.sg-table-wrapper--mobile-card .sg-table__cell:first-child,.sg-table-wrapper--mobile-card-flat .sg-table__cell:first-child {
border-top-left-radius: 12px;
border-top-right-radius: 12px
}
.sg-table-wrapper--mobile-card .sg-table__cell:last-child,.sg-table-wrapper--mobile-card-flat .sg-table__cell:last-child {
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px
}
.sg-table-wrapper--mobile-card .sg-table__footer,.sg-table-wrapper--mobile-card-flat .sg-table__footer {
display: none
}
.sg-table-wrapper--mobile-card.sg-table-wrapper,.sg-table-wrapper--mobile-card-flat.sg-table-wrapper {
background-color: transparent
}
.sg-table-wrapper--mobile-card:not(.sg-table-wrapper--no-data).sg-table-wrapper--box-shadow,.sg-table-wrapper--mobile-card-flat:not(.sg-table-wrapper--no-data).sg-table-wrapper--box-shadow {
box-shadow: none
}
.sg-table-wrapper--mobile-card .sg-table__head,.sg-table-wrapper--mobile-card-flat .sg-table__head {
display: none
}
.sg-table-wrapper--mobile-card .sg-table__row,.sg-table-wrapper--mobile-card-flat .sg-table__row {
display: block;
border-radius: 12px
}
.sg-table-wrapper--mobile-card .sg-table__row {
box-shadow: var(--first-level-box-shadow)
}
.sg-table-wrapper--mobile-card-flat .sg-table__row {
box-shadow: none
}
.sg-table-wrapper--mobile-card-flat .sg-table__row {
border: 1px solid var(--border-color-outer)
}
.sg-table__cell-expandable-wrapper .sg-table__row {
border-width: 1px 0 0
}
.sg-table-wrapper--mobile-card:not(.sg-table-wrapper--reordable) .sg-table__row:not(:last-child),.sg-table-wrapper--mobile-card-flat:not(.sg-table-wrapper--reordable) .sg-table__row:not(:last-child) {
margin-bottom: 20px
}
.sg-table-wrapper--mobile-card .sg-table__cell,.sg-table-wrapper--mobile-card-flat .sg-table__cell {
height: auto;
display: block;
position: relative;
border: none
}
.sg-table-wrapper--mobile-card .sg-table__cell:nth-child(n+2)::after,.sg-table-wrapper--mobile-card-flat .sg-table__cell:nth-child(n+2)::after {
content: attr(data-label);
display: block;
position: absolute;
top: 4px;
left: 20px;
font-family: var(--font-family-component);
font-weight: 500;
font-size: var(--typography-table-label-size);
line-height: 16px;
color: var(--typography-dark);
text-align: initial;
text-transform: capitalize
}
.sg-table-load-more {
margin-top: 20px;
padding: 0;
background: none
}
}
@media(max-width: 1500px) {
.sg-table-wrapper--density-medium .sg-table__cell:first-child {
padding-left:20px
}
.sg-table-wrapper--density-medium .sg-table__cell:first-child::before {
left: 5px
}
.sg-table-wrapper--density-medium .sg-table__cell:last-child {
padding-right: 20px
}
.sg-table-wrapper--density-medium .sg-table__after-content {
padding: 20px 20px
}
.sg-table-wrapper--density-medium .sg-table-wrapper--density-medium .sg-table__cell:first-child {
padding-left: 40px
}
.sg-table-wrapper--density-medium .sg-table-wrapper--density-medium .sg-table__cell:last-child {
padding-right: 40px
}
.sg-table__cell--height-medium {
height: 50px
}
}
.sg-tile:focus {
outline: none
}
.sg-keyboard .sg-tile:focus {
outline: none;
box-shadow: var(--focus-shadow)
}
.sg-tile--vertical+.sg-tile--vertical,.sg-tile--vertical.sg-with-border+.sg-tile--vertical.sg-with-border {
border-top: none
}
@media(max-width: 800px) {
.sg-tile.sg-with-border+.sg-tile.sg-with-border {
border-top:none
}
.sg-tile:first-of-type {
border-top-left-radius: 12px;
border-top-right-radius: 12px
}
.sg-tile:last-of-type {
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px
}
}
@media(min-width: 801px) {
.sg-tile.sg-with-border+.sg-tile.sg-with-border:not(.sg-tile--vertical) {
border-left:none
}
.sg-tile:first-of-type {
border-top-left-radius: 12px;
border-bottom-left-radius: 12px
}
.sg-tile:last-of-type {
border-top-right-radius: 12px;
border-bottom-right-radius: 12px
}
}
.sg-tabs-wrapper {
display: -ms-flexbox;
display: flex;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
max-width: 100%
}
.sg-tabs-wrapper:focus {
outline: none
}
.sg-keyboard .sg-tabs-wrapper:focus {
outline: none;
box-shadow: var(--focus-shadow)
}
.sg-tabs_container {
overflow: hidden
}
.sg-tabs__arrow {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
width: 60px;
background: inherit;
color: var(--color-icon-button);
cursor: pointer
}
.sg-tabs__arrow:hover {
color: var(--typography-dark)
}
.sg-tabs {
display: -ms-inline-flexbox;
display: inline-flex
}
.sg-tabs__tab {
-ms-flex-align: center;
align-items: center;
display: -ms-flexbox;
display: flex;
position: relative;
white-space: nowrap;
height: 60px;
padding: 0 30px;
color: var(--typography-light);
cursor: pointer;
text-transform: uppercase
}
.sg-tabs__tab:focus {
outline: none
}
.sg-keyboard .sg-tabs__tab:focus {
outline: none;
box-shadow: var(--focus-shadow)
}
.sg-tabs__tab:hover,.sg-tabs__tab:active,.sg-tabs__tab--active {
color: var(--typography-dark)
}
.sg-tabs__tab:active::after,.sg-tabs__tab--active::after {
content: "";
display: block;
position: absolute;
height: 2px;
left: 0;
right: 0;
bottom: 0;
background-color: currentColor;
z-index: 1
}
.sg-tabs__tab a {
color: inherit
}
.sg-tabs--background-transparent {
background-color: transparent
}
.sg-tabs-wrapper--border-light {
position: relative
}
.sg-tabs-wrapper--border-light::before {
content: "";
display: block;
position: absolute;
height: 1px;
left: 0;
right: 0;
bottom: 0;
background-color: var(--border-color-outer)
}
.sg-tabs--active-color .sg-tabs__tab--active::after,.sg-tabs--active-color .sg-tabs__tab:active::after {
background-color: var(--background-button-primary)
}
.sg-tabs--active-color-dark .sg-tabs__tab--active,.sg-tabs--active-color-dark .sg-tabs__tab:active {
color: var(--typography-dark)
}
.sg-tabs--small {
font-family: var(--font-family-component);
font-weight: 500;
font-size: 14px;
line-height: 18px
}
.sg-tabs--medium {
font-family: var(--font-family-component);
font-weight: 600;
font-size: 16px;
line-height: 26px
}
.sg-tabs--large {
font-family: var(--font-family-component);
font-weight: 600;
font-size: 18px;
line-height: 28px
}
.sg-tabs__tab--disabled {
color: var(--color-disabled);
pointer-events: none
}
@media(max-width: 1500px) {
.sg-tabs__tab {
padding:0 20px;
height: 50px
}
}
.sg-textarea {
font-size: 16px;
line-height: 26px
}
.sg-textarea.sg-textarea {
height: auto
}
.sg-textarea.sg-textarea--background-light {
background-color: var(--background-main)
}
.sg-textarea.sg-textarea--small {
padding: 10px
}
.sg-textarea.sg-textarea--medium {
padding: 15px
}
.sg-textarea.sg-textarea--large {
padding: 20px
}
.sg-textarea.sg-textarea--x-large {
padding: 30px
}
.sg-time-picker-button {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
width: 60px;
background-color: transparent;
color: var(--typography-dark);
border: none;
border-radius: 12px;
font-family: var(--font-family-component);
font-weight: 500;
font-size: 22px;
text-transform: uppercase
}
.sg-time-picker-button:hover {
cursor: pointer
}
.sg-time-picker-button:hover,.sg-time-picker-button:focus {
color: var(--component-color-hover);
background-color: var(--component-background-hover)
}
.sg-time-picker-button--size-large {
height: 40px
}
.sg-time-picker-button--size-xx-large {
height: 60px
}
.sg-time-picker-button--color-secondary {
color: var(--color-secondary)
}
.sg-time-picker-button--background-secondary {
color: var(--typography-white);
background-color: var(--color-secondary)
}
.sg-time-picker-button--background-secondary:focus,.sg-time-picker-button--background-secondary:hover {
background-color: var(--color-secondary-hovered)
}
.sg-time-picker.sg-dialog {
padding: 0
}
.sg-time-picker .sg-time-picker-header {
margin-top: 0
}
.sg-time-picker__input,.sg-time-picker__field {
cursor: pointer;
caret-color: transparent
}
.sg-time-picker__input.sg-time-picker__input--disabled,.sg-time-picker__input.sg-time-picker__field--disabled,.sg-time-picker__field.sg-time-picker__input--disabled,.sg-time-picker__field.sg-time-picker__field--disabled {
cursor: not-allowed
}
.sg-time-picker__content {
padding-top: 30px;
padding-bottom: 30px;
height: 280px;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
overflow-y: overlay
}
.sg-time-picker__content--flex {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center
}
.sg-time-picker__column {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center;
min-width: 50px;
min-height: 160px
}
.sg-time-picker__column--justify-center {
-ms-flex-pack: center;
justify-content: center
}
.sg-time-picker__column--margin-start {
margin-left: 30px
}
.sg-time-picker-entity {
cursor: pointer;
line-height: 36px
}
.sg-time-picker-entity:hover {
color: var(--color-secondary)
}
.sg-time-picker-entity--selected {
color: var(--color-secondary);
font-size: 26px
}
.sg-timeline {
display: -ms-flexbox;
display: flex
}
.sg-timeline:focus {
outline: none
}
.sg-keyboard .sg-timeline:focus {
outline: none;
box-shadow: var(--focus-shadow)
}
.sg-timeline__item {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-preferred-size: 0;
flex-basis: 0
}
.sg-timeline__item:focus {
outline: none
}
.sg-keyboard .sg-timeline__item:focus {
outline: none;
box-shadow: var(--focus-shadow)
}
.sg-timeline__item:first-child .sg-timeline__top-row::before {
background: transparent
}
.sg-timeline__item:last-child .sg-timeline__top-row::after {
background: transparent
}
.sg-timeline__item--active {
cursor: pointer
}
.sg-timeline__item--active .sg-timeline__step {
background: var(--background-button-primary);
color: var(--typography-white)
}
.sg-timeline__item--bold {
font-weight: 600
}
.sg-timeline__top-row {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center
}
.sg-timeline__bottom-row {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
padding: 5px 10px
}
.sg-timeline__top-row::before,.sg-timeline__top-row::after {
content: "";
display: block;
height: 1px;
-ms-flex-positive: 1;
flex-grow: 1;
background: var(--color-disabled)
}
.sg-timeline__top-row::before {
margin-right: 10px
}
.sg-timeline__top-row::after {
margin-left: 10px
}
.sg-timeline__step {
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
width: 25px;
height: 25px;
line-height: 25px;
border-radius: 50%;
color: var(--typography-white);
background: var(--color-disabled);
font-family: var(--font-family-component);
font-weight: 700
}
.sg-tree-node:focus {
outline: none
}
.sg-keyboard .sg-tree-node:focus {
outline: none;
box-shadow: var(--focus-shadow)
}
.sg-tree-node__header {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
min-height: 26px
}
.sg-tree-node__header .sg-tree-node__spacer {
-ms-flex-negative: 0;
flex-shrink: 0
}
.sg-tree-node__label {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex: 1 0 0px;
flex: 1 0 0;
padding-left: 5px;
-ms-flex-negative: 0;
flex-shrink: 0
}
.sg-tree-node__label--no-icon {
padding-left: 15px
}
.sg-tree-node__checkbox.sg-tree-node__checkbox {
padding: 0 15px 0 0
}
.sg-tree {
width: 100%;
overflow-x: auto
}
.sg-tree:focus {
outline: none
}
.sg-keyboard .sg-tree:focus {
outline: none;
box-shadow: var(--focus-shadow)
}
.sg-tree__list {
list-style: none;
padding: 0
}
.sg-banner-notice {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
position: relative;
text-align: start
}
.sg-banner-notice:focus {
outline: none
}
.sg-keyboard .sg-banner-notice:focus {
outline: none;
box-shadow: var(--first-level-box-shadow),var(--focus-shadow)
}
.sg-banner-notice .sg-banner-notice__title {
padding-top: 0
}
.sg-banner-notice .sg-banner-notice__close-icon {
color: var(--typography-white)
}
.sg-banner-notice--density-small {
padding: 10px 15px
}
.sg-banner-notice--density-medium {
padding: 10px 20px
}
.sg-banner-notice__icon {
margin-right: 10px
}
.sg-banner-notice__content {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-direction: column;
flex-direction: column;
padding: 0;
word-break: break-word
}
.sg-banner-notice__close-icon {
position: absolute;
top: 15px;
right: 20px
}
.sg-banner-notice--border {
border-left: 3px solid transparent
}
.sg-banner-notice--shadow {
box-shadow: var(--first-level-box-shadow)
}
.sg-banner-notice--type-success {
background: var(--color-success)
}
.sg-banner-notice--type-success .sg-list__icon {
color: var(--color-success)
}
.sg-banner-notice--type-error {
background: var(--color-error)
}
.sg-banner-notice--type-error .sg-list__icon {
color: var(--color-error)
}
.sg-banner-notice--type-warning {
background: var(--color-warning)
}
.sg-banner-notice--type-warning .sg-list__icon {
color: var(--color-warning)
}
.sg-banner-notice--type-instruction {
background: var(--color-primary)
}
.sg-banner-notice--type-instruction .sg-list__icon {
color: var(--color-primary)
}
.sg-banner-notice--type-info {
background: var(--color-info)
}
.sg-banner-notice--type-info .sg-list__icon {
color: var(--color-info)
}
.sg-banner-notice--type-hint {
background: var(--color-hint)
}
.sg-banner-notice--type-hint .sg-list__icon {
color: var(--color-hint)
}
@media(max-width: 1500px) {
.sg-banner-notice .sg-banner-notice__icon {
max-width:20px;
max-height: 20px;
margin-right: 5px
}
.sg-banner-notice__title {
padding-bottom: 0
}
.sg-banner-notice__content {
padding: 0 5px
}
.sg-banner-notice--border {
border-width: 2px
}
}
.status-box {
margin-top: 45px
}
.status-box--attention {
margin-top: 0
}
.status-box-wrapper {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
align-items: center
}
.status-box--loading .status-box-icon-background {
background-image: url("data:image/svg+xml;utf8,")
}
.status-box--loading .status-box-icon {
color: var(--color-success)
}
.status-box--success .status-box-icon-background {
background-image: url("data:image/svg+xml;utf8,")
}
.status-box--attention .status-box-icon-background,.status-box--warning .status-box-icon-background {
background-image: url("data:image/svg+xml;utf8,")
}
.status-box--error .status-box-icon-background {
background-image: url("data:image/svg+xml;utf8,")
}
.status-box--exclamation .status-box-icon-background {
background-image: url("data:image/svg+xml;utf8,")
}
.status-box-icon-background {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
min-width: 400px;
height: 70px;
background-size: 15px
}
.status-box-icon-background::after {
position: absolute;
bottom: 0;
right: 0;
display: block;
content: " ";
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 30px 30px;
border-color: transparent transparent var(--background-component-primary) transparent
}
.status-box-icon-wrapper {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
border-radius: 50%;
width: 100px;
height: 100px;
margin-top: -30px;
background-color: var(--background-white)
}
.status-box-icon-wrapper--loading {
background-color: var(--background-component-primary)
}
.status-box-icon-wrapper--attention {
margin-top: -15px;
width: 110px;
height: 110px;
background-color: transparent
}
.status-box-title {
margin-top: 15px
}
.status-box-description {
padding-bottom: 30px;
max-width: 800px
}
.status-box--token-button {
width: 100%
}
.status-box__grid {
-ms-grid-columns: auto auto auto;
grid-template-columns: auto auto auto
}
@media(max-width: 800px) {
.status-box {
padding:60px 20px 20px;
margin-top: 30px
}
.status-box--attention {
margin-top: 0
}
.status-box-icon-background {
min-width: 100%
}
}
@media(max-width: 800px) {
.status-box--buttons-box {
-ms-flex-direction:column;
flex-direction: column
}
}
.sg-hosting-plan-card__dialog_compare-name.sg-hosting-plan-card__dialog_compare-name {
padding-top: 0
}
.sg-hosting-plan-card {
width: 100%;
height: 100%;
border: 2px solid transparent;
text-align: center;
position: relative;
padding-bottom: 30px
}
.sg-hosting-plan-card--selected {
border: 2px solid var(--color-primary)
}
.sg-hosting-plan-card--disabled .sg-hosting-plan-card__icon {
color: var(--color-disabled)
}
.sg-hosting-plan-card__label {
position: absolute;
top: 0;
left: 0;
right: 0;
transform: translateY(-50%);
text-align: center;
padding: 0 20px
}
.sg-hosting-plan-card__row.sg-hosting-plan-card__row {
margin-top: 0;
margin-bottom: 20px
}
.sg-hosting-plan-card__row.sg-hosting-plan-card__row:last-child {
margin-bottom: 0
}
.sg-hosting-plan-card__features li {
-ms-flex-pack: center;
justify-content: center
}
.sg-hosting-plan-card__features .sg-hosting-plan-card__feature-icon {
margin-right: 10px
}
.sg-hosting-plan-card__features .chevron-up {
stroke: var(--color-success)
}
.sg-hosting-plan-card__features .chevron-down {
stroke: var(--color-error)
}
.sg-hosting-plan-card__compare-table--full-width {
width: 100%
}
.sg-hosting-plan-card__compare-table-icon {
color: var(--color-secondary);
margin-right: 10px;
vertical-align: middle
}
.sg-hosting-plan-card__row--cta.sg-hosting-plan-card__row--cta {
margin-top: auto
}
.sg-hosting-plan-card__compare-feature {
position: relative
}
.sg-hosting-plan-card__compare-title {
width: 100%;
border-bottom: 1px solid var(--border-color-outer)
}
.sg-hosting-plan-card__compare-spec {
padding: 10px 15px;
width: 100%
}
.sg-hosting-plan-card__compare-table--small {
max-width: 260px
}
.sg-hosting-plan-card__compare-table--large {
max-width: 600px
}
.sg-hosting-plan-card__compare-table--large .sg-hosting-plan-card__compare-spec {
width: 50%
}
.sg-hosting-plan-card__select-button {
position: relative;
left: 50%;
transform: translateX(-50%);
-ms-flex-positive: 1;
flex-grow: 1;
min-width: 200px;
margin-top: auto
}
.sg-hosting-plan-card__compare-name:hover+.sg-hosting-plan-card__compare-table {
display: block
}
.sg-login-card-wrapper {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center
}
.sg-login-card {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
align-items: center;
max-width: 100%;
margin-top: 30px;
margin-bottom: 60px
}
.sg-login-card .sg-login-card__container {
position: relative;
width: 480px
}
.sg-login-card .sg-login_card__back-button {
position: absolute;
top: 15px;
left: 15px
}
.sg-login-card .sg-login-card__padding-box {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
align-items: center;
padding: 28px 58px 40px
}
.sg-login-card .sg-login-card__footer {
margin: 0
}
.sg-login-card .sg-login-card__footer .sg-button {
border: none
}
.sg-login-card__after-card-content {
margin-top: 10px;
width: 480px;
max-width: 100%
}
@media(max-width: 800px) {
.sg-login-card .sg-login-card__container,.sg-login-card.flex--margin-none .sg-login-card__container {
max-width:100%
}
.sg-login-card .sg-login-card__padding-box,.sg-login-card.flex--margin-none .sg-login-card__padding-box {
padding: 8px 20px 20px
}
.sg-login-card .sg-title,.sg-login-card.flex--margin-none .sg-title {
text-align: center
}
.sg-login-card.sg-login-card--no-padding .sg-login-card__padding-box {
padding: 0
}
}
.sg-login-card--no-padding .sg-login-card__padding-box {
padding: 0
}
.sg-login-icon {
display: -ms-flexbox;
display: flex;
width: 80px;
height: 80px;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
margin: auto;
border: 1px solid var(--border-color-outer);
border-radius: 50%;
color: var(--color-icon-button)
}
.sg-toggle-button {
-ms-flex-negative: 0;
flex-shrink: 0
}
.sg-toggle-button:not(.sg-toggle-button--selected) .sg-toggle-button__icon,.sg-toggle-button:not(.sg-toggle-button--selected) .sg-toggle-button__spacer {
display: none
}
.sg-presentational-link {
display: -ms-flexbox;
display: flex;
gap: 10px
}
.sg-presentational-link-text {
position: relative
}
.sg-presentational-link-text::after {
content: "";
position: absolute;
width: 100%;
transform: scaleX(0);
height: 1px;
bottom: 0;
left: 0;
background-color: currentColor;
transform-origin: bottom right;
transition: transform .25s ease-out
}
.sg-presentational-link-text:hover::after {
transform: scaleX(1);
transform-origin: bottom left
}
.sg-presentational-link-text:hover~.sg-presentational-link-icon {
animation: boomerang .3s ease-in .3s 2 alternate
}
@keyframes boomerang {
0% {
transform: translateX(0)
}
100% {
transform: translateX(5px)
}
}
/*# sourceMappingURL=1.style.css.map*/