html {
-webkit-font-smoothing: antialiased;
}
body.ds21 {
margin: 0;
font-family: hauss,SF Pro Text,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 18px;
background-color: white;
color: #13353F;
}
/* * * * * * * * * */
/* * Ui Kit 3.1 * */
/* * * * * * * * * */
/* палитры для начертаний */
.ds21 .dark {color: #13353F}
.ds21 .white {color: #FFFFFF}
.ds21 .blue {color: #00A9BF}
.ds21 .blue_2 {color: #0097B3}
.ds21 .orange {color: #F79440}
.ds21 .orange_2 {color: #FF6A13}
.ds21 .green {color: #8BC043}
.ds21 .green_2 {color: #6CAA17}
.ds21 .red {color: #F04E5C}
.ds21 .dark_grey {color: #5C7D88}
.ds21 .light_grey {color: #A1AEB2}
/* палитры для фонов */
.ds21 .bg_white {background-color: #FFFFFF}
.ds21 .bg_blue {background-color: #00A9BF}
.ds21 .bg_orange {background-color: #F79440}
.ds21 .bg_red {background-color: #F04E5C}
.ds21 .bg_purple {background-color: #C33E8D}
.ds21 .bg_green {background-color: #8BC043}
.ds21 .bg_cold_gray {background-color: #F2F9FA}
.ds21 .bg_cold_gray_2 {background-color: #E5F4F6}
.ds21 .bg_gray {background-color: #F6F6F6}
.ds21 .bg_grey_2 {background-color: #E8ECED}
/* Контейнер */
.ds_container {
max-width: 1344px;
margin: 0 auto;
}
.ds_padding {
box-sizing: border-box;
padding: 24px 32px;
}
@media all and (max-width: 1440px) {
.ds_container {
max-width: 1440px;
margin: 0 48px;
}
}
@media all and (max-width: 1191px) {
.ds_container {
margin: 0 32px;
}
}
@media all and (max-width: 1023px) {
.ds_container {
margin: 0 20px;
}
.ds_padding {
padding: 16px;
}
}
@media all and (max-width: 599px) {
.ds_container {
margin: 0 12px;
}
}
/* ds_block_spacings */
.ds_block_spacings {
padding-top: 72px;
padding-bottom: 72px;
}
@media all and (max-width: 1191px) {
.ds_block_spacings {
padding-top: 32px;
padding-bottom: 32px;
}
}
@media all and (max-width: 1023px) {
.ds_block_spacings {
padding-top: 24px;
padding-bottom: 24px;
}
}
/* ds_block_spacings_inset */
.ds_block_spacings_inset > * {
margin-bottom: 32px;
}
.ds_block_spacings_inset > *:last-child {
margin-bottom: 0;
}
@media all and (max-width: 1191px) {
.ds_block_spacings_inset > * {
margin-bottom: 24px;
}
.ds_block_spacings_inset > *:last-child {
margin-bottom: 0;
}
}
@media all and (max-width: 1023px) {
.ds_block_spacings_inset > * {
margin-bottom: 16px;
}
.ds_block_spacings_inset > *:last-child {
margin-bottom: 0;
}
}
/* gap */
.ds_gap {
display: flex;
}
.ds_gap > * {
margin-right: 32px;
}
.ds_gap > *:last-child {
margin-right: 0;
}
@media all and (max-width: 1191px) {
.ds_gap > * {
margin-right: 24px;
}
.ds_gap > *:last-child {
margin-right: 0;
}
}
@media all and (max-width: 1023px) {
.ds_gap > * {
margin-right: 16px;
}
.ds_gap > *:last-child {
margin-right: 0;
}
}
@media all and (max-width: 599px) {
.ds_gap > * {
margin-right: 8px;
}
.ds_gap > *:last-child {
margin-right: 0;
}
}
/* text margin */
.ds_text_spacings > *:first-child {
margin-top: 0;
}
.ds_text_spacings > *:last-child {
margin-bottom: 0;
}
/* Старые начертания */
.ds_f20 {
font-size: 20px;
}
.ds_f13 {
font-size: 13px;
}
.ds_f11 {
font-size: 11px;
}
.ds_font_medium {
font-weight: 500;
}
/* Новые начертания */
.ds21 a {
color: #00A9BF;
text-decoration: none;
}
@media (hover: hover) {
.ds21 a:hover {
color: #0097B3;
}
}
.ds21 h1, .ds21 h2, .ds21 h3, .ds21 h4, .ds21 h5 {
font-weight: 600;
}
.ds21 h1 {
font-size: 36px;
line-height: 38px;
}
.ds21 h2 {
font-size: 28px;
line-height: 30px;
}
.ds21 h3, .ds21 h4, .ds21 h5 {
font-size: 24px;
line-height: 26px;
}
.ds21 .t_1_b {
font-size: 36px;
font-weight: 600;
line-height: 38px;
}
.ds21 .t_2_b {
font-size: 28px;
font-weight: 600;
line-height: 30px;
}
.ds21 .t_2_l {
font-size: 28px;
font-weight: 350;
line-height: 30px;
}
.ds21 .t_3_b {
font-size: 24px;
font-weight: 600;
line-height: 26px;
}
.ds21 .t_3_l {
font-size: 24px;
font-weight: 350;
line-height: 26px;
}
.ds21 .t_4_b {
font-size: 18px;
font-weight: 600;
line-height: 20px;
}
.ds21 .t_4_m {
font-size: 18px;
font-weight: 500;
line-height: 20px;
}
.ds21 .t_4_r {
font-size: 18px;
font-weight: 400;
line-height: 20px;
}
.ds21 .t_5_b {
font-size: 16px;
font-weight: 600;
line-height: 18px;
}
.ds21 .t_5_m {
font-size: 16px;
font-weight: 500;
line-height: 18px;
}
.ds21 .t_5_r {
font-size: 16px;
font-weight: 400;
line-height: 18px;
}
.ds21 .t_6_b {
font-size: 13px;
font-weight: 600;
line-height: 14px;
}
.ds21 .t_6_m {
font-size: 13px;
font-weight: 500;
line-height: 14px;
}
.ds21 .t_6_r {
font-size: 13px;
font-weight: 400;
line-height: 14px;
}
.ds21 .medium {
font-weight: 500;
}
.ds21 .bold {
font-weight: 600;
}
.ds21 .t_price {
font-size: 18px;
font-weight: 500;
}
.ds21 .t_footnote {
font-size: 11px;
}
.ds21 .t_promo {
font-size: 48px;
line-height: 50px;
font-weight: 600;
}
@media all and (max-width: 1023px) {
.ds21 h1 {
font-size: 22px;
line-height: 24px;
}
.ds21 h2 {
font-size: 20px;
line-height: 22px;
}
.ds21 h3, .ds21 h4, .ds21 h5 {
font-size: 18px;
line-height: 20px;
}
.ds21 .t_1_b {
font-size: 22px;
line-height: 24px;
}
.ds21 .t_2_b {
font-size: 20px;
line-height: 22px;
}
.ds21 .t_2_l {
font-size: 20px;
line-height: 22px;
}
.ds21 .t_3_b {
font-size: 18px;
line-height: 20px;
}
.ds21 .t_3_l {
font-size: 18px;
line-height: 20px;
}
.ds21 .t_4_b {
font-size: 16px;
line-height: 18px;
}
.ds21 .t_4_m {
font-size: 16px;
line-height: 18px;
}
.ds21 .t_4_r {
font-size: 16px;
line-height: 18px;
}
.ds21 .t_5_b {
font-size: 14px;
line-height: 16px;
}
.ds21 .t_5_m {
font-size: 14px;
line-height: 16px;
}
.ds21 .t_5_r {
font-size: 14px;
line-height: 16px;
}
.ds21 .t_6_b {
font-size: 12px;
line-height: 14px;
}
.ds21 .t_6_m {
font-size: 12px;
line-height: 14px;
}
.ds21 .t_6_r {
font-size: 12px;
line-height: 14px;
}
.ds21 .t_price {
font-size: 16px;
line-height: 18px;
}
.ds21 .t_footnote {
font-size: 8px;
line-height: 9px;
}
.ds21 .t_promo {
font-size: 28px;
line-height: 30px;
}
}
/* Отступы между текстами */
.ds21 h1, .ds21 h2, .ds21 h3, .ds21 h4, .ds21 h5, .ds21 p {
margin: 32px 0;
}
@media all and (max-width: 1023px) {
.ds21 h1, .ds21 h2, .ds21 h3, .ds21 h4, .ds21 h5, .ds21 p {
margin: 12px 0;
}
}
/* Это фикс для версии */
.ds21 h1.t_48, .ds21 h1.t_36, .ds21 h1.t_32, .ds21 h1.t_28, .ds21 h1.t_20, .ds21 h1.t_18, .ds21 h1.t_16, .ds21 h1.t_14 {
margin: 0;
}
.ds21 h2.t_48, .ds21 h2.t_36, .ds21 h2.t_32, .ds21 h2.t_28, .ds21 h2.t_20, .ds21 h2.t_18, .ds21 h2.t_16, .ds21 h2.t_14 {
margin: 0;
}
.ds21 h3.t_48, .ds21 h3.t_36, .ds21 h3.t_32, .ds21 h3.t_28, .ds21 h3.t_20, .ds21 h3.t_18, .ds21 h3.t_16, .ds21 h3.t_14 {
margin: 0;
}
.ds21 h4.t_48, .ds21 h4.t_36, .ds21 h4.t_32, .ds21 h4.t_28, .ds21 h4.t_20, .ds21 h4.t_18, .ds21 h4.t_16, .ds21 h4.t_14 {
margin: 0;
}
.ds21 h5.t_48, .ds21 h5.t_36, .ds21 h5.t_32, .ds21 h5.t_28, .ds21 h5.t_20, .ds21 h5.t_18, .ds21 h5.t_16, .ds21 h5.t_14 {
margin: 0;
}
/* Текстовый блок */
.ds21 .ds_text_block > * {
margin: 0 0 32px 0;
}
.ds21 .ds_text_block > *:last-child {
margin: 0 0 0 0;
}
@media all and (max-width: 1023px) {
.ds21 .ds_text_block > * {
margin: 0 0 12px 0;
}
.ds21 .ds_text_block > *:last-child {
margin: 0 0 0 0;
}
}
/* navigation */
#ds_nav_prod {
padding: 24px 0;
}
.ds_breadcrumb_list {
list-style: none;
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
}
.ds_breadcrumb_list li {
margin-right: 15px;
}
.ds_breadcrumb_list li:last-child {
margin-right: 0;
}
.ds_breadcrumb_list a {
color: #84959A;
display: block;
padding: 6px 0 6px 0;
}
.ds_nav_prod_headline h1 {
margin: 0;
}
#ds_nav_prod .ds_nav_prod_headline {
display: flex;
align-items: flex-end;
}
#ds_nav_prod .ds_nav_prod_headline h1 {
flex-grow: 1;
width: 50%;
margin-right: 16px;
}
.ds_nav_dop_content {
width: 320px;
}
._fly_content {
display: flex;
color: #13353F;
height: 58px;
background-color: rgba(19, 53, 63, 0.1);
border-radius: 12px;
align-items: center;
justify-content: center;
}
#ds_nav_prod .ds_nav_prod_headline > *:last-child {
margin-right: 0;
}
#ds_nav_promo {
background-color: #00A9BF;
}
.ds_nav_promo_content {
padding: 24px 0;
}
.ds_nav_promo_container {
max-width: 1440px;
margin: 0 auto;
display: flex;
}
.ds_nav_promo_content_center {
width: 50%;
flex-grow: 1;
margin-right: 16px;
color: white;
display: flex;
align-items: center;
}
.ds_nav_promo_content_center a {
color: white;
}
.ds_nav_promo_image {
display: flex;
align-items: flex-end;
}
.ds_nav_promo_image img {
height: 400px;
}
.ds_nav_promo_headline, #ds_nav_promo .ds_container_breadcrumb {
padding-left: 48px;
}
#ds_nav_promo .ds_nav_dop_content {
width: auto;
}
#ds_nav_promo ._fly_content {
color: white;
}
@media all and (max-width: 1191px) {
.ds_nav_promo_headline, #ds_nav_promo .ds_container_breadcrumb {
padding-left: 32px;
}
}
@media all and (max-width: 1023px) {
.ds_container_breadcrumb {
margin: 0;
width: 100%;
overflow-y: scroll;
}
.ds_container_breadcrumb::-webkit-scrollbar {
display: none;
}
.ds_breadcrumb_list {
display: inline-flex;
flex-wrap: nowrap;
padding: 0 20px;
}
.ds_breadcrumb_list a {
white-space: nowrap;
}
.ds_nav_promo_content {
padding: 0;
}
.ds_nav_promo_container {
display: block;
}
#ds_nav_promo .ds_container_breadcrumb {
padding-left: 0;
padding-top: 4px;
}
.ds_nav_promo_content_center, .ds_nav_promo_image {
display: block;
width: 100%;
}
.ds_nav_promo_image {
text-align: center;
line-height: 0;
}
.ds_nav_promo_image img {
height: auto;
width: 400px;
max-width: 100%;
}
.ds_nav_promo_headline {
padding: 0 20px;
}
}
@media all and (max-width: 599px) {
#ds_nav_prod {
padding: 4px 0 16px 0;
}
#ds_nav_prod .ds_nav_prod_headline {
display: block;
}
#ds_nav_prod .ds_nav_prod_headline h1, #ds_nav_prod .ds_nav_prod_headline .ds_nav_dop_content {
width: 100%;
}
#ds_nav_prod .ds_nav_prod_headline .ds_nav_dop_content {
margin-top: 16px;
}
.ds_breadcrumb_list {
padding: 0 12px;
}
.ds_nav_promo_headline {
padding: 0 12px;
}
.ds_nav_promo_image img {
width: 320px;
}
}
/* tag v01 | ds 2.2 */
.ds_tag_v01, .ds_tag_v01_color {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #8BC043;
border-radius: 3px;
box-sizing: border-box;
max-width: 100%;
cursor: pointer;
transition: all .2s ease;
position: relative;
overflow: hidden;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
height: 40px;
padding: 0 16px;
}
.ds_tag_v01 span, .ds_tag_v01_color span {
font-weight: 500;
font-size: 13px;
color: white;
}
@media (hover: hover) {
.ds_tag_v01:hover {
background-color: #6CAA17;
}
}
.ds_tag_v01.active {
background-color: #F79440;
}
.ds_tag_v01_color {
background-color: #FFFFFF;
}
.ds_tag_v01_color span {
color: #0097B3;
}
@media (hover: hover) {
.ds_tag_v01_color:hover {
background-color: #E5F4F6;
}
}
.ds_tag_v01_color.active {
background-color: #88C930;
}
.ds_tag_v01_color.active span {
color: #ffffff;
}
/* tag v02 */
.ds21 .tag_v02 {
height: 35px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #13353F;
border: 1px solid rgba(19, 53, 63, 1);
box-sizing: border-box;
border-radius: 12px;
background-color: rgba(8, 195, 220, 0);
}
@media (hover: hover) {
.ds21 .tag_v02:hover {
color: #ffffff;
background-color: rgba(8, 195, 220, 1);
border: 1px solid rgba(8, 195, 220, 1);
}
}
.ds21 .tag_v02.active {
border: 1px solid #88C930;
background-color: #88C930;
color: white;
}
.ds21 .tag_v02.disabled {
border: 1px solid rgba(19, 53, 63, 0.17);
background-color: rgba(19, 53, 63, 0.05);
color: rgba(19, 53, 63, 0.17);
pointer-events: none;
}
.ds21 .tag_v02.white {
border: 1px solid rgba(255, 255, 255, 1);
background-color: rgba(255, 255, 255, 0);
color: white;
}
.ds21 .tag_v02.white {
border: 1px solid rgba(255, 255, 255, 1);
background-color: rgba(255, 255, 255, 0);
color: white;
}
.ds21 .tag_v02.white.active {
border: 1px solid rgba(255, 255, 255, 1);
background-color: rgba(255, 255, 255, 1);
color: #88C930;
}
.ds21 .tag_v02.white.disabled {
border: 1px solid rgba(19, 53, 63, 0.17);
background-color: rgba(19, 53, 63, 0.05);
color: rgba(19, 53, 63, 0.17);
pointer-events: none;
}
.ds21 .tag_v02.white:hover {
background-color: white;
color: #08C3DC;
}
.ds21 .tag_v02.active {
pointer-events: none;
}
/* Tag Close */
.ds_tag_close {
width: max-content;
height: 30px;
padding: 0 8px 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #13353F;
border: 1px solid rgba(19, 53, 63, 1);
box-sizing: border-box;
border-radius: 10px;
background-color: rgba(8, 195, 220, 0);
gap: 4px;
cursor: pointer;
}
.ds_tag_close span {
font-size: 14px;
line-height: 16px;
}
.ds_tag_close .ds_box_svg {
width: 15px;
height: 15px;
}
.ds_tag_close.white {
border: 1px solid white;
}
@media (hover: hover) {
.ds_tag_close:hover {
border: 1px solid #F79440;
}
.ds_tag_close.white:hover {
border: 1px solid white;
background-color: white;
}
}
/* Label */
.ds21 .ds_label {
height: 25px;
padding: 0 8px;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: rgba(19, 53, 63, 0.05);
}
/* Pin Maps */
.ds_pin_default, .ds_pin_active, .ds_pin_position, .ds_pin_problem, .ds_pin_close, .ds_pin_new {
width: 38px;
height: 54px;
}
.ds_pin_default {
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iNTQiIHZpZXdCb3g9IjAgMCAzOCA1NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxnIG9wYWNpdHk9IjAuMTUiIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2ZfMTIzXzExMDIpIj4NCjxlbGxpcHNlIGN4PSIxOC45OTk5IiBjeT0iNDUuODM5IiByeD0iMTIuNjY2NyIgcnk9IjMuMTYxMjkiIGZpbGw9IiMxMzM1M0YiLz4NCjwvZz4NCjxwYXRoIGQ9Ik0zOCAxOC45Njc3QzM4IDI5LjQ0MzMgMTkgNDUuODM4NyAxOSA0NS44Mzg3QzE5IDQ1LjgzODcgMCAyOS40NDMzIDAgMTguOTY3N0MwIDguNDkyMTUgOC41MDY1OSAwIDE5IDBDMjkuNDkzNCAwIDM4IDguNDkyMTUgMzggMTguOTY3N1oiIGZpbGw9IiMwOEMzREMiLz4NCjxjaXJjbGUgY3g9IjE5IiBjeT0iMTguNSIgcj0iNi41IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiLz4NCjxkZWZzPg0KPGZpbHRlciBpZD0iZmlsdGVyMF9mXzEyM18xMTAyIiB4PSIyLjMzMzI1IiB5PSIzOC42Nzc3IiB3aWR0aD0iMzMuMzMzMyIgaGVpZ2h0PSIxNC4zMjIzIiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+DQo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPg0KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz4NCjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIHJlc3VsdD0iZWZmZWN0MV9mb3JlZ3JvdW5kQmx1cl8xMjNfMTEwMiIvPg0KPC9maWx0ZXI+DQo8L2RlZnM+DQo8L3N2Zz4NCg==);
}
.ds_pin_active {
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iNTQiIHZpZXdCb3g9IjAgMCAzOCA1NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxnIG9wYWNpdHk9IjAuMTUiIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2ZfMTIzXzExMDYpIj4NCjxlbGxpcHNlIGN4PSIxOC45OTk5IiBjeT0iNDUuODM5IiByeD0iMTIuNjY2NyIgcnk9IjMuMTYxMjkiIGZpbGw9IiMxMzM1M0YiLz4NCjwvZz4NCjxwYXRoIGQ9Ik0zOCAxOC45Njc3QzM4IDI5LjQ0MzMgMTkgNDUuODM4NyAxOSA0NS44Mzg3QzE5IDQ1LjgzODcgMCAyOS40NDMzIDAgMTguOTY3N0MwIDguNDkyMTUgOC41MDY1OSAwIDE5IDBDMjkuNDkzNCAwIDM4IDguNDkyMTUgMzggMTguOTY3N1oiIGZpbGw9IiNGRkIzNEQiLz4NCjxjaXJjbGUgY3g9IjE5IiBjeT0iMTguNSIgcj0iNi41IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiLz4NCjxkZWZzPg0KPGZpbHRlciBpZD0iZmlsdGVyMF9mXzEyM18xMTA2IiB4PSIyLjMzMzI1IiB5PSIzOC42Nzc3IiB3aWR0aD0iMzMuMzMzMyIgaGVpZ2h0PSIxNC4zMjIzIiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+DQo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPg0KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz4NCjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIHJlc3VsdD0iZWZmZWN0MV9mb3JlZ3JvdW5kQmx1cl8xMjNfMTEwNiIvPg0KPC9maWx0ZXI+DQo8L2RlZnM+DQo8L3N2Zz4NCg==);
}
.ds_pin_position {
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iNTQiIHZpZXdCb3g9IjAgMCAzOCA1NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxnIG9wYWNpdHk9IjAuMTUiIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2ZfMTIzXzExMTQpIj4NCjxlbGxpcHNlIGN4PSIxOSIgY3k9IjQ2IiByeD0iOCIgcnk9IjMiIGZpbGw9IiMxMzM1M0YiLz4NCjwvZz4NCjxyZWN0IHg9IjE4IiB5PSIzMCIgd2lkdGg9IjIiIGhlaWdodD0iMTciIHJ4PSIxIiBmaWxsPSIjNjRBNTBCIi8+DQo8Y2lyY2xlIGN4PSIxOSIgY3k9IjE4IiByPSIxOCIgZmlsbD0iIzg4QzkzMCIvPg0KPHBhdGggZD0iTTEwLjM2NTcgMjcuMTY2M0MxMC4zNjU3IDI3LjE2NjMgMTAuMzY1OSAyNS44MTY4IDEwLjM2NTkgMjUuMDMwNEMxMC4zNjU5IDI0LjI0NCAxMS4wMjg0IDIzLjcxNDggMTEuNzg5NiAyMy41MTc1QzE0LjE5MjYgMjIuODk0NSAxNy4xMjk1IDIyLjQ0OTUgMTcuMTI5NSAyMC4yMjQ2QzE3LjEyOTUgMTguNjIyNyAxNC45OTM1IDE2Ljg0MjcgMTQuOTkzNSAxMi44Mzc5QzE0Ljk5MzUgMTAuNjI2IDE2Ljc4NjYgOC44MzMwMSAxOC45OTg0IDguODMzMDFDMjEuMjEwMiA4LjgzMzAxIDIzLjAwMzIgMTAuNjI2IDIzLjAwMzIgMTIuODM3OUMyMy4wMDMyIDE2Ljg0MjcgMjAuODY3MyAxOC42MjI3IDIwLjg2NzMgMjAuMjI0NkMyMC44NjczIDIyLjQ0OTUgMjMuODA0MiAyMi44OTQ1IDI2LjIwNzEgMjMuNTE3NUMyNi45Njg0IDIzLjcxNDggMjcuNjMwOSAyNC4yNDQgMjcuNjMwOSAyNS4wMzA0QzI3LjYzMDkgMjUuODE2OCAyNy42MzExIDI3LjE2NjMgMjcuNjMxMSAyNy4xNjYzIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPg0KPGRlZnM+DQo8ZmlsdGVyIGlkPSJmaWx0ZXIwX2ZfMTIzXzExMTQiIHg9IjciIHk9IjM5IiB3aWR0aD0iMjQiIGhlaWdodD0iMTQiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4NCjxmZUZsb29kIGZsb29kLW9wYWNpdHk9IjAiIHJlc3VsdD0iQmFja2dyb3VuZEltYWdlRml4Ii8+DQo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJzaGFwZSIvPg0KPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgcmVzdWx0PSJlZmZlY3QxX2ZvcmVncm91bmRCbHVyXzEyM18xMTE0Ii8+DQo8L2ZpbHRlcj4NCjwvZGVmcz4NCjwvc3ZnPg0K);
}
.ds_pin_problem {
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iNTQiIHZpZXdCb3g9IjAgMCAzOCA1NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxnIG9wYWNpdHk9IjAuMTUiIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2ZfMTIzXzExMTApIj4NCjxlbGxpcHNlIGN4PSIxOC45OTk5IiBjeT0iNDUuODM5IiByeD0iMTIuNjY2NyIgcnk9IjMuMTYxMjkiIGZpbGw9IiMxMzM1M0YiLz4NCjwvZz4NCjxwYXRoIGQ9Ik0zOCAxOC45Njc3QzM4IDI5LjQ0MzMgMTkgNDUuODM4NyAxOSA0NS44Mzg3QzE5IDQ1LjgzODcgMCAyOS40NDMzIDAgMTguOTY3N0MwIDguNDkyMTUgOC41MDY1OSAwIDE5IDBDMjkuNDkzNCAwIDM4IDguNDkyMTUgMzggMTguOTY3N1oiIGZpbGw9IiNGQzZBNzciLz4NCjxjaXJjbGUgY3g9IjE5IiBjeT0iMTguNSIgcj0iNi41IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiLz4NCjxkZWZzPg0KPGZpbHRlciBpZD0iZmlsdGVyMF9mXzEyM18xMTEwIiB4PSIyLjMzMzI1IiB5PSIzOC42Nzc3IiB3aWR0aD0iMzMuMzMzMyIgaGVpZ2h0PSIxNC4zMjIzIiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+DQo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPg0KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz4NCjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIHJlc3VsdD0iZWZmZWN0MV9mb3JlZ3JvdW5kQmx1cl8xMjNfMTExMCIvPg0KPC9maWx0ZXI+DQo8L2RlZnM+DQo8L3N2Zz4NCg==);
}
.ds_pin_close {
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iNTQiIHZpZXdCb3g9IjAgMCAzOCA1NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxnIG9wYWNpdHk9IjAuMTUiIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2ZfNTI2XzUzMCkiPg0KPGVsbGlwc2UgY3g9IjE4Ljk5OTkiIGN5PSI0NS44MzkiIHJ4PSIxMi42NjY3IiByeT0iMy4xNjEyOSIgZmlsbD0iIzEzMzUzRiIvPg0KPC9nPg0KPHBhdGggZD0iTTM4IDE4Ljk2NzdDMzggMjkuNDQzMyAxOSA0NS44Mzg3IDE5IDQ1LjgzODdDMTkgNDUuODM4NyAwIDI5LjQ0MzMgMCAxOC45Njc3QzAgOC40OTIxNSA4LjUwNjU5IDAgMTkgMEMyOS40OTM0IDAgMzggOC40OTIxNSAzOCAxOC45Njc3WiIgZmlsbD0iIzY1ODY5MiIvPg0KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNS4yNTkyIDIwLjI1OTNDMjQuNDQ4MiAyMC43MzA2IDIzLjUwNTYgMjEuMDAwNSAyMi41IDIxLjAwMDVDMTkuNDYyNCAyMS4wMDA1IDE3IDE4LjUzOCAxNyAxNS41MDA1QzE3IDE0LjE5MjQgMTcuNDU2NyAxMi45OTA5IDE4LjIxOTMgMTIuMDQ2OUMxNC45OTc1IDEyLjQzMjUgMTIuNSAxNS4xNzQ4IDEyLjUgMTguNTAwNUMxMi41IDIyLjA5MDMgMTUuNDEwMSAyNS4wMDA1IDE5IDI1LjAwMDVDMjEuOTgwMyAyNS4wMDA1IDI0LjQ5MjIgMjIuOTk0NiAyNS4yNTkyIDIwLjI1OTNaIiBmaWxsPSJ3aGl0ZSIvPg0KPGRlZnM+DQo8ZmlsdGVyIGlkPSJmaWx0ZXIwX2ZfNTI2XzUzMCIgeD0iMi4zMzMyNSIgeT0iMzguNjc3NyIgd2lkdGg9IjMzLjMzMzMiIGhlaWdodD0iMTQuMzIyMyIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPg0KPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4NCjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iQmFja2dyb3VuZEltYWdlRml4IiByZXN1bHQ9InNoYXBlIi8+DQo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIyIiByZXN1bHQ9ImVmZmVjdDFfZm9yZWdyb3VuZEJsdXJfNTI2XzUzMCIvPg0KPC9maWx0ZXI+DQo8L2RlZnM+DQo8L3N2Zz4NCg==);
}
.ds_pin_new {
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iNTQiIHZpZXdCb3g9IjAgMCAzOCA1NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxnIG9wYWNpdHk9IjAuMTUiIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2ZfNDczXzQ3NCkiPg0KPGVsbGlwc2UgY3g9IjE4Ljk5OTkiIGN5PSI0NS44MzkiIHJ4PSIxMi42NjY3IiByeT0iMy4xNjEyOSIgZmlsbD0iIzEzMzUzRiIvPg0KPC9nPg0KPHBhdGggZD0iTTM4IDE4Ljk2NzdDMzggMjkuNDQzMyAxOSA0NS44Mzg3IDE5IDQ1LjgzODdDMTkgNDUuODM4NyAwIDI5LjQ0MzMgMCAxOC45Njc3QzAgOC40OTIxNSA4LjUwNjU5IDAgMTkgMEMyOS40OTM0IDAgMzggOC40OTIxNSAzOCAxOC45Njc3WiIgZmlsbD0iIzkxNzlDOCIvPg0KPHBhdGggZD0iTTEzLjY5NiAyMS4yNDc4TDkuMjA4IDE0LjU1MThIOC4wNTZWMjIuOTk5OEg5LjFWMTYuMTU5OEwxMy42OTYgMjIuOTk5OEgxNC43NFYxNC41NTE4SDEzLjY5NlYyMS4yNDc4WiIgZmlsbD0id2hpdGUiLz4NCjxwYXRoIGQ9Ik0yMS44MjQ4IDE5Ljc1OThDMjEuODI0OCAxNy45NTk4IDIwLjc5MjggMTYuODE5OCAxOS4xODQ4IDE2LjgxOThDMTcuNTI4OCAxNi44MTk4IDE2LjM0MDggMTguMDE5OCAxNi4zNDA4IDE5Ljk3NThDMTYuMzQwOCAyMS45MTk4IDE3LjUxNjggMjMuMTMxOCAxOS4yNjg4IDIzLjEzMThDMjAuODQwOCAyMy4xMzE4IDIxLjU5NjggMjIuMTQ3OCAyMS43NTI4IDIxLjQzOThIMjAuNzA4OEMyMC42MDA4IDIxLjc1MTggMjAuMTIwOCAyMi4yMDc4IDE5LjI4MDggMjIuMjA3OEMxOC4xNjQ4IDIyLjIwNzggMTcuNDIwOCAyMS4zOTE4IDE3LjQyMDggMjAuMzExOFYyMC4yODc4SDIxLjgyNDhWMTkuNzU5OFpNMTkuMTYwOCAxNy43NDM4QzIwLjEzMjggMTcuNzQzOCAyMC43MzI4IDE4LjM2NzggMjAuNzgwOCAxOS40MTE4SDE3LjQzMjhDMTcuNTE2OCAxOC40MTU4IDE4LjE1MjggMTcuNzQzOCAxOS4xNjA4IDE3Ljc0MzhaIiBmaWxsPSJ3aGl0ZSIvPg0KPHBhdGggZD0iTTI4Ljg5MTggMjEuNDAzOEwyNy40OTk4IDE2Ljk1MThIMjYuNDU1OEwyNS4wNjM4IDIxLjQwMzhMMjMuNjU5OCAxNi45NTE4SDIyLjU3OThMMjQuNTU5OCAyMi45OTk4SDI1LjU0MzhMMjYuOTcxOCAxOC4zNzk4TDI4LjM5OTggMjIuOTk5OEgyOS4zOTU4TDMxLjM3NTggMTYuOTUxOEgzMC4yOTU4TDI4Ljg5MTggMjEuNDAzOFoiIGZpbGw9IndoaXRlIi8+DQo8ZGVmcz4NCjxmaWx0ZXIgaWQ9ImZpbHRlcjBfZl80NzNfNDc0IiB4PSIyLjMzMzI1IiB5PSIzOC42Nzc3IiB3aWR0aD0iMzMuMzMzMyIgaGVpZ2h0PSIxNC4zMjIzIiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+DQo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPg0KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz4NCjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIHJlc3VsdD0iZWZmZWN0MV9mb3JlZ3JvdW5kQmx1cl80NzNfNDc0Ii8+DQo8L2ZpbHRlcj4NCjwvZGVmcz4NCjwvc3ZnPg0K);
}
/* shadows */
.ds_shadow_dark_hover, .ds_shadow_blue_hover {
transition: box-shadow .2s ease-out;
}
.ds_shadow_dark {
box-shadow: 0px 22px 10px -10px rgba(2, 75, 88, 0.08), 0px 9px 7px -8px rgba(2, 75, 88, 0.16), 0px 9px 20px rgba(2, 75, 88, 0.13);
}
@media (hover: hover) {
.ds_shadow_dark_hover:hover {
box-shadow: 0px 22px 10px -10px rgba(2, 75, 88, 0.08), 0px 9px 7px -8px rgba(2, 75, 88, 0.16), 0px 9px 20px rgba(2, 75, 88, 0.13);
}
}
.ds_shadow_blue {
box-shadow: 0px 22px 10px -10px rgba(49, 200, 227, 0.12), 0px 9px 7px -8px rgba(29, 150, 171, 0.59), 0px 9px 20px rgba(32, 157, 181, 0.24);
}
@media (hover: hover) {
.ds_shadow_blue_hover:hover {
box-shadow: 0px 22px 10px -10px rgba(49, 200, 227, 0.12), 0px 9px 7px -8px rgba(29, 150, 171, 0.59), 0px 9px 20px rgba(32, 157, 181, 0.24);
}
}
/* Контейнер */
.ds21 .ds_cnt {
max-width: 940px;
padding: 20px;
margin: 0 auto;
display: flex;
gap: 20px;
flex-direction: column;
box-sizing: border-box;
}
/* gap */
.ds_flex_gap {
display: flex;
gap: 20px;
}
/* SVG контейнер */
.ds_box_svg {
width: 60px;
height: 60px;
}
.ds_box_svg svg {
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2px;
}
.ds_stroke_whidth_1 svg {
stroke-width: 1px;
}
/* Типографика */
.ds21 .t_medium {
font-weight: 500;
}
.ds21 .t_bold {
font-weight: 600;
}
.ds21 .t_48 {
font-size: 48px;
line-height: 48px;
}
.ds21 .t_36 {
font-size: 36px;
line-height: 36px;
}
.ds21 .t_32 {
font-size: 32px;
line-height: 33px;
}
.ds21 .t_28 {
font-size: 28px;
line-height: 30px;
}
.ds21 .t_22 {
font-size: 22px;
line-height: 24px;
}
.ds21 .t_18 {
font-size: 18px;
line-height: 20px;
}
.ds21 .t_16 {
font-size: 16px;
line-height: 19px;
}
.ds21 .t_14 {
font-size: 14px;
line-height: 16px;
}
.ds21 .t_22.paragraph {
line-height: 28px;
}
.ds21 .t_18.paragraph {
line-height: 24px;
}
.ds21 .t_16.paragraph {
line-height: 21px;
}
.ds21 .t_14.paragraph {
line-height: 18.5px;
}
/* Палитры */
/* nocolor */
/* dark */
.ds21 .nocolor_dark {
color: #13353F;
transition: 0.2s;
}
.ds21 .nocolor_dark svg path[stroke], .ds21 .nocolor_dark svg circle[stroke] {
stroke: #13353F;
transition: 0.2s;
}
.ds21 .nocolor_dark svg path[fill], .ds21 .nocolor_dark svg circle[fill] {
fill: #13353F;
transition: 0.2s;
}
.ds21 .nocolor_dark_bg {
background: #13353F;
transition: 0.2s;
}
@media (hover: hover) {
.ds21 .nocolor_dark_h:hover {
color: #13353F;
transition: 0.2s;
}
.ds21 .nocolor_dark_h:hover svg path[stroke], .ds21 .nocolor_dark_h:hover svg circle[stroke] {
stroke: #13353F;
transition: 0.2s;
}
.ds21 .nocolor_dark_h:hover svg path[fill], .ds21 .nocolor_dark_h:hover svg circle[fill] {
fill: #13353F;
transition: 0.2s;
}
.ds21 .nocolor_dark_bg_h:hover {
background: #13353F;
transition: 0.2s;
}
}
/* grey */
.ds21 .nocolor_grey, .ds21 .nocolor_grey_h:hover {
color: #658692;
transition: 0.2s;
}
.ds21 .nocolor_grey svg path[stroke], .ds21 .nocolor_grey svg circle[stroke] {
stroke: #658692;
transition: 0.2s;
}
.ds21 .nocolor_grey svg path[fill], .ds21 .nocolor_grey svg circle[fill] {
fill: #658692;
transition: 0.2s;
}
.ds21 .nocolor_grey_bg {
background: #658692;
transition: 0.2s;
}
@media (hover: hover) {
.ds21 .nocolor_grey_h:hover {
color: #658692;
transition: 0.2s;
}
.ds21 .nocolor_grey_h:hover svg path[stroke], .ds21 .nocolor_grey_h:hover svg circle[stroke] {
stroke: #658692;
transition: 0.2s;
}
.ds21 .nocolor_grey_h:hover svg path[fill], .ds21 .nocolor_grey_h:hover svg circle[fill] {
fill: #658692;
transition: 0.2s;
}
.ds21 .nocolor_grey_bg_h:hover {
background: #658692;
transition: 0.2s;
}
}
/* white */
.ds21 .nocolor_white {
color: #fff;
transition: 0.2s;
}
.ds21 .nocolor_white svg path[stroke], .ds21 .nocolor_white svg circle[stroke] {
stroke: #fff;
transition: 0.2s;
}
.ds21 .nocolor_white svg path[fill], .ds21 .nocolor_white svg circle[fill] {
fill: #fff;
transition: 0.2s;
}
.ds21 .nocolor_white_bg {
background: #fff;
transition: 0.2s;
}
@media (hover: hover) {
.ds21 .nocolor_white_h:hover {
color: #fff;
transition: 0.2s;
}
.ds21 .nocolor_white_h:hover svg path[stroke], .ds21 .nocolor_white_h:hover svg circle[stroke] {
stroke: #fff;
transition: 0.2s;
}
.ds21 .nocolor_white_h:hover svg path[fill], .ds21 .nocolor_white_h:hover svg circle[fill] {
fill: #fff;
transition: 0.2s;
}
.ds21 .nocolor_white_bg_h:hover {
background: #fff;
transition: 0.2s;
}
}
/* blue */
.ds21 .blue_flat_0_bg {
background: #DDFBFF;
}
.ds21 .blue_flat_1 {
color: #08C3DC;
transition: 0.2s;
}
.ds21 .blue_flat_1 svg path[stroke], .ds21 .blue_flat_1 svg circle[stroke] {
stroke: #08C3DC;
transition: 0.2s;
}
.ds21 .blue_flat_1 svg path[fill], .ds21 .blue_flat_1 svg circle[fill] {
fill: #08C3DC;
transition: 0.2s;
}
.ds21 .blue_flat_1_bg {
background: #08C3DC;
transition: 0.2s;
}
@media (hover: hover) {
.ds21 .blue_flat_0_bg_h:hover {
background: #DDFBFF;
}
.ds21 .blue_flat_1_h:hover {
color: #08C3DC;
transition: 0.2s;
}
.ds21 .blue_flat_1_h:hover svg path[stroke], .ds21 .blue_flat_1_h:hover svg circle[stroke] {
stroke: #08C3DC;
transition: 0.2s;
}
.ds21 .blue_flat_1_h:hover svg path[fill], .ds21 .blue_flat_1_h:hover svg circle[fill] {
fill: #08C3DC;
transition: 0.2s;
}
.ds21 .blue_flat_1_bg_h:hover {
background: #08C3DC;
transition: 0.2s;
}
}
.ds21 .blue_flat_2 {
color: #00A9BF;
transition: 0.2s;
}
.ds21 .blue_flat_2 svg path[stroke], .ds21 .blue_flat_2 svg circle[stroke] {
stroke: #00A9BF;
transition: 0.2s;
}
.ds21 .blue_flat_2 svg path[fill], .ds21 .blue_flat_2 svg circle[fill] {
fill: #00A9BF;
transition: 0.2s;
}
.ds21 .blue_flat_2_bg {
background: #00A9BF;
transition: 0.2s;
}
@media (hover: hover) {
.ds21 .blue_flat_2_h:hover {
color: #00A9BF;
transition: 0.2s;
}
.ds21 .blue_flat_2_h:hover svg path[stroke], .ds21 .blue_flat_2_h:hover svg circle[stroke] {
stroke: #00A9BF;
transition: 0.2s;
}
.ds21 .blue_flat_2_h:hover svg path[fill], .ds21 .blue_flat_2_h:hover svg circle[fill] {
fill: #00A9BF;
transition: 0.2s;
}
.ds21 .blue_flat_2_bg_h:hover {
background: #00A9BF;
transition: 0.2s;
}
}
.ds21 .blue_flat_3 {
color: #0097B3;
transition: 0.2s;
}
.ds21 .blue_flat_3 svg path[stroke], .ds21 .blue_flat_3 svg circle[stroke] {
stroke: #0097B3;
transition: 0.2s;
}
.ds21 .blue_flat_3 svg path[fill], .ds21 .blue_flat_3 svg circle[fill] {
fill: #0097B3;
transition: 0.2s;
}
.ds21 .blue_flat_3_bg {
background: #0097B3;
transition: 0.2s;
}
@media (hover: hover) {
.ds21 .blue_flat_3_h:hover {
color: #0097B3;
transition: 0.2s;
}
.ds21 .blue_flat_3_h:hover svg path[stroke], .ds21 .blue_flat_3_h:hover svg circle[stroke] {
stroke: #0097B3;
transition: 0.2s;
}
.ds21 .blue_flat_3_h:hover svg path[fill], .ds21 .blue_flat_3_h:hover svg circle[fill] {
fill: #0097B3;
transition: 0.2s;
}
.ds21 .blue_flat_3_bg_h:hover {
background: #0097B3;
transition: 0.2s;
}
}
.ds21 .blue_gradient_1 {
background: linear-gradient(180deg, #08C3DC 0%, #00A9BF 100%);
}
/* orange */
.ds21 .orange_flat_0_bg {
background: #FFF6E9;
}
.ds21 .orange_flat_1 {
color: #FFB34D;
transition: 0.2s;
}
.ds21 .orange_flat_1 svg path[stroke], .ds21 .orange_flat_1 svg circle[stroke] {
stroke: #FFB34D;
transition: 0.2s;
}
.ds21 .orange_flat_1 svg path[fill], .ds21 .orange_flat_1 svg circle[fill] {
fill: #FFB34D;
transition: 0.2s;
}
.ds21 .orange_flat_1_bg {
background: #FFB34D;
transition: 0.2s;
}
@media (hover: hover) {
.ds21 .orange_flat_0_bg_h:hover {
background: #FFF6E9;
}
.ds21 .orange_flat_1_h:hover {
color: #FFB34D;
transition: 0.2s;
}
.ds21 .orange_flat_1_h:hover svg path[stroke], .ds21 .orange_flat_1_h:hover svg circle[stroke] {
stroke: #FFB34D;
transition: 0.2s;
}
.ds21 .orange_flat_1_h:hover svg path[fill], .ds21 .orange_flat_1_h:hover svg circle[fill] {
fill: #FFB34D;
transition: 0.2s;
}
.ds21 .orange_flat_1_bg_h:hover {
background: #FFB34D;
transition: 0.2s;
}
}
.ds21 .orange_flat_2 {
color: #F79440;
transition: 0.2s;
}
.ds21 .orange_flat_2 svg path[stroke], .ds21 .orange_flat_2 svg circle[stroke] {
stroke: #F79440;
transition: 0.2s;
}
.ds21 .orange_flat_2 svg path[fill], .ds21 .orange_flat_2 svg circle[fill] {
fill: #F79440;
transition: 0.2s;
}
.ds21 .orange_flat_2_bg {
background: #F79440;
transition: 0.2s;
}
@media (hover: hover) {
.ds21 .orange_flat_2_h:hover {
color: #F79440;
transition: 0.2s;
}
.ds21 .orange_flat_2_h:hover svg path[stroke], .ds21 .orange_flat_2_h:hover svg circle[stroke] {
stroke: #F79440;
transition: 0.2s;
}
.ds21 .orange_flat_2_h:hover svg path[fill], .ds21 .orange_flat_2_h:hover svg circle[fill] {
fill: #F79440;
transition: 0.2s;
}
.ds21 .orange_flat_2_bg_h:hover {
background: #F79440;
transition: 0.2s;
}
}
.ds21 .orange_flat_3 {
color: #F2813F;
transition: 0.2s;
}
.ds21 .orange_flat_3 svg path[stroke], .ds21 .orange_flat_3 svg circle[stroke] {
stroke: #F2813F;
transition: 0.2s;
}
.ds21 .orange_flat_3 svg path[fill], .ds21 .orange_flat_3 svg circle[fill] {
fill: #F2813F;
transition: 0.2s;
}
.ds21 .orange_flat_3_bg {
background: #F2813F;
transition: 0.2s;
}
@media (hover: hover) {
.ds21 .orange_flat_3_h:hover {
color: #F2813F;
transition: 0.2s;
}
.ds21 .orange_flat_3_h:hover svg path[stroke], .ds21 .orange_flat_3_h:hover svg circle[stroke] {
stroke: #F2813F;
transition: 0.2s;
}
.ds21 .orange_flat_3_h:hover svg path[fill], .ds21 .orange_flat_3_h:hover svg circle[fill] {
fill: #F2813F;
transition: 0.2s;
}
.ds21 .orange_flat_3_bg_h:hover {
background: #F2813F;
transition: 0.2s;
}
}
.ds21 .orange_gradient_1 {
background: linear-gradient(180deg, #FFB34D 0%, #F79440 100%);
}
/* green */
.ds21 .green_flat_0_bg {
background: #EFFFDA;
}
.ds21 .green_flat_1 {
color: #97DA30;
transition: 0.2s;
}
.ds21 .green_flat_1 svg path[stroke], .ds21 .green_flat_1 svg circle[stroke] {
stroke: #97DA30;
transition: 0.2s;
}
.ds21 .green_flat_1 svg path[fill], .ds21 .green_flat_1 svg circle[fill] {
fill: #97DA30;
transition: 0.2s;
}
.ds21 .green_flat_1_bg {
background: #97DA30;
transition: 0.2s;
}
@media (hover: hover) {
.ds21 .green_flat_0_bg_h:hover {
background: #EFFFDA;
}
.ds21 .green_flat_1_h:hover {
color: #97DA30;
transition: 0.2s;
}
.ds21 .green_flat_1_h:hover svg path[stroke], .ds21 .green_flat_1_h:hover svg circle[stroke] {
stroke: #97DA30;
transition: 0.2s;
}
.ds21 .green_flat_1_h:hover svg path[fill], .ds21 .green_flat_1_h:hover svg circle[fill] {
fill: #97DA30;
transition: 0.2s;
}
.ds21 .green_flat_1_bg_h:hover {
background: #97DA30;
transition: 0.2s;
}
}
.ds21 .green_flat_2 {
color: #70B512;
transition: 0.2s;
}
.ds21 .green_flat_2 svg path[stroke], .ds21 .green_flat_2 svg circle[stroke] {
stroke: #70B512;
transition: 0.2s;
}
.ds21 .green_flat_2 svg path[fill], .ds21 .green_flat_2 svg circle[fill] {
fill: #70B512;
transition: 0.2s;
}
.ds21 .green_flat_2_bg {
background: #70B512;
transition: 0.2s;
}
@media (hover: hover) {
.ds21 .green_flat_2_h:hover {
color: #70B512;
transition: 0.2s;
}
.ds21 .green_flat_2_h:hover svg path[stroke], .ds21 .green_flat_2_h:hover svg circle[stroke] {
stroke: #70B512;
transition: 0.2s;
}
.ds21 .green_flat_2_h:hover svg path[fill], .ds21 .green_flat_2_h:hover svg circle[fill] {
fill: #70B512;
transition: 0.2s;
}
.ds21 .green_flat_2_bg_h:hover {
background: #70B512;
transition: 0.2s;
}
}
.ds21 .green_flat_3 {
color: #64A50B;
transition: 0.2s;
}
.ds21 .green_flat_3 svg path[stroke], .ds21 .green_flat_3 svg circle[stroke] {
stroke: #64A50B;
transition: 0.2s;
}
.ds21 .green_flat_3 svg path[fill], .ds21 .green_flat_3 svg circle[fill] {
fill: #64A50B;
transition: 0.2s;
}
.ds21 .green_flat_3_bg {
background: #64A50B;
transition: 0.2s;
}
@media (hover: hover) {
.ds21 .green_flat_3_h:hover {
color: #64A50B;
transition: 0.2s;
}
.ds21 .green_flat_3_h:hover svg path[stroke], .ds21 .green_flat_3_h:hover svg circle[stroke] {
stroke: #64A50B;
transition: 0.2s;
}
.ds21 .green_flat_3_h:hover svg path[fill], .ds21 .green_flat_3_h:hover svg circle[fill] {
fill: #64A50B;
transition: 0.2s;
}
.ds21 .green_flat_3_bg_h:hover {
background: #64A50B;
transition: 0.2s;
}
}
.ds21 .green_gradient_1 {
background: linear-gradient(180deg, #97DA30 0%, #81BC26 100%);
}
/* pink */
.ds21 .pink_flat_0_bg {
background: #FFEEF8;
}
.ds21 .pink_flat_1 {
color: #F25BB5;
transition: 0.2s;
}
.ds21 .pink_flat_1 svg path[stroke], .ds21 .pink_flat_1 svg circle[stroke] {
stroke: #F25BB5;
transition: 0.2s;
}
.ds21 .pink_flat_1 svg path[fill], .ds21 .pink_flat_1 svg circle[fill] {
fill: #F25BB5;
transition: 0.2s;
}
.ds21 .pink_flat_1_bg {
background: #F25BB5;
transition: 0.2s;
}
@media (hover: hover) {
.ds21 .pink_flat_0_bg_h:hover {
background: #FFEEF8;
}
.ds21 .pink_flat_1_h:hover {
color: #F25BB5;
transition: 0.2s;
}
.ds21 .pink_flat_1_h:hover svg path[stroke], .ds21 .pink_flat_1_h:hover svg circle[stroke] {
stroke: #F25BB5;
transition: 0.2s;
}
.ds21 .pink_flat_1_h:hover svg path[fill], .ds21 .pink_flat_1_h:hover svg circle[fill] {
fill: #F25BB5;
transition: 0.2s;
}
.ds21 .pink_flat_1_bg_h:hover {
background: #F25BB5;
transition: 0.2s;
}
}
.ds21 .pink_flat_2 {
color: #EC42A7;
transition: 0.2s;
}
.ds21 .pink_flat_2 svg path[stroke], .ds21 .pink_flat_2 svg circle[stroke] {
stroke: #EC42A7;
transition: 0.2s;
}
.ds21 .pink_flat_2 svg path[fill], .ds21 .pink_flat_2 svg circle[fill] {
fill: #EC42A7;
transition: 0.2s;
}
.ds21 .pink_flat_2_bg {
background: #EC42A7;
transition: 0.2s;
}
@media (hover: hover) {
.ds21 .pink_flat_2_h:hover {
color: #EC42A7;
transition: 0.2s;
}
.ds21 .pink_flat_2_h:hover svg path[stroke], .ds21 .pink_flat_2_h:hover svg circle[stroke] {
stroke: #EC42A7;
transition: 0.2s;
}
.ds21 .pink_flat_2_h:hover svg path[fill], .ds21 .pink_flat_2_h:hover svg circle[fill] {
fill: #EC42A7;
transition: 0.2s;
}
.ds21 .pink_flat_2_bg_h:hover {
background: #EC42A7;
transition: 0.2s;
}
}
.ds21 .pink_flat_3 {
color: #E03299;
transition: 0.2s;
}
.ds21 .pink_flat_3 svg path[stroke], .ds21 .pink_flat_3 svg circle[stroke] {
stroke: #E03299;
transition: 0.2s;
}
.ds21 .pink_flat_3 svg path[fill], .ds21 .pink_flat_3 svg circle[fill] {
fill: #E03299;
transition: 0.2s;
}
.ds21 .pink_flat_3_bg {
background: #E03299;
transition: 0.2s;
}
@media (hover: hover) {
.ds21 .pink_flat_3_h:hover {
color: #E03299;
transition: 0.2s;
}
.ds21 .pink_flat_3_h:hover svg path[stroke], .ds21 .pink_flat_3_h:hover svg circle[stroke] {
stroke: #E03299;
transition: 0.2s;
}
.ds21 .pink_flat_3_h:hover svg path[fill], .ds21 .pink_flat_3_h:hover svg circle[fill] {
fill: #E03299;
transition: 0.2s;
}
.ds21 .pink_flat_3_bg_h:hover {
background: #E03299;
transition: 0.2s;
}
}
.ds21 .pink_gradient_1 {
background: linear-gradient(180deg, #F25BB5 0%, #E03299 100%);
}
/* red */
.ds21 .red_flat_0_bg {
background: #FFEDEF;
}
.ds21 .red_flat_1 {
color: #FC6A77;
transition: 0.2s;
}
.ds21 .red_flat_1 svg path[stroke], .ds21 .red_flat_1 svg circle[stroke] {
stroke: #FC6A77;
transition: 0.2s;
}
.ds21 .red_flat_1 svg path[fill], .ds21 .red_flat_1 svg circle[fill] {
fill: #FC6A77;
transition: 0.2s;
}
.ds21 .red_flat_1_bg {
background: #FC6A77;
transition: 0.2s;
}
@media (hover: hover) {
.ds21 .red_flat_0_bg_h:hover {
background: #FFEDEF;
}
.ds21 .red_flat_1_h:hover {
color: #FC6A77;
transition: 0.2s;
}
.ds21 .red_flat_1_h:hover svg path[stroke], .ds21 .red_flat_1_h:hover svg circle[stroke] {
stroke: #FC6A77;
transition: 0.2s;
}
.ds21 .red_flat_1_h:hover svg path[fill], .ds21 .red_flat_1_h:hover svg circle[fill] {
fill: #FC6A77;
transition: 0.2s;
}
.ds21 .red_flat_1_bg_h:hover {
background: #FC6A77;
transition: 0.2s;
}
}
.ds21 .red_flat_2 {
color: #F85462;
transition: 0.2s;
}
.ds21 .red_flat_2 svg path[stroke], .ds21 .red_flat_2 svg circle[stroke] {
stroke: #F85462;
transition: 0.2s;
}
.ds21 .red_flat_2 svg path[fill], .ds21 .red_flat_2 svg circle[fill] {
fill: #F85462;
transition: 0.2s;
}
.ds21 .red_flat_2_bg {
background: #F85462;
transition: 0.2s;
}
@media (hover: hover) {
.ds21 .red_flat_2_h:hover {
color: #F85462;
transition: 0.2s;
}
.ds21 .red_flat_2_h:hover svg path[stroke], .ds21 .red_flat_2_h:hover svg circle[stroke] {
stroke: #F85462;
transition: 0.2s;
}
.ds21 .red_flat_2_h:hover svg path[fill], .ds21 .red_flat_2_h:hover svg circle[fill] {
fill: #F85462;
transition: 0.2s;
}
.ds21 .red_flat_2_bg_h:hover {
background: #F85462;
transition: 0.2s;
}
}
.ds21 .red_flat_3 {
color: #EC4453;
transition: 0.2s;
}
.ds21 .red_flat_3 svg path[stroke], .ds21 .red_flat_3 svg circle[stroke] {
stroke: #EC4453;
transition: 0.2s;
}
.ds21 .red_flat_3 svg path[fill], .ds21 .red_flat_3 svg circle[fill] {
fill: #EC4453;
transition: 0.2s;
}
.ds21 .red_flat_3_bg {
background: #EC4453;
transition: 0.2s;
}
@media (hover: hover) {
.ds21 .red_flat_3_h:hover {
color: #EC4453;
transition: 0.2s;
}
.ds21 .red_flat_3_h:hover svg path[stroke], .ds21 .red_flat_3_h:hover svg circle[stroke] {
stroke: #EC4453;
transition: 0.2s;
}
.ds21 .red_flat_3_h:hover svg path[fill], .ds21 .red_flat_3_h:hover svg circle[fill] {
fill: #EC4453;
transition: 0.2s;
}
.ds21 .red_flat_3_bg_h:hover {
background: #EC4453;
transition: 0.2s;
}
}
.ds21 .red_gradient_1 {
background: linear-gradient(180deg, #FC6A77 0%, #F85462 100%);
}
/* aquamarine */
.ds21 .aquamarine_flat_0_bg {
background: #E2FFFB;
}
.ds21 .aquamarine_flat_1 {
color: #08D3B7;
transition: 0.2s;
}
.ds21 .aquamarine_flat_1 svg path[stroke], .ds21 .aquamarine_flat_1 svg circle[stroke] {
stroke: #08D3B7;
transition: 0.2s;
}
.ds21 .aquamarine_flat_1 svg path[fill], .ds21 .aquamarine_flat_1 svg circle[fill] {
fill: #08D3B7;
transition: 0.2s;
}
.ds21 .aquamarine_flat_1_bg {
background: #08D3B7;
transition: 0.2s;
}
@media (hover: hover) {
.ds21 .aquamarine_flat_0_bg_h:hover {
background: #E2FFFB;
}
.ds21 .aquamarine_flat_1_h:hover {
color: #08D3B7;
transition: 0.2s;
}
.ds21 .aquamarine_flat_1_h:hover svg path[stroke], .ds21 .aquamarine_flat_1_h:hover svg circle[stroke] {
stroke: #08D3B7;
transition: 0.2s;
}
.ds21 .aquamarine_flat_1_h:hover svg path[fill], .ds21 .aquamarine_flat_1_h:hover svg circle[fill] {
fill: #08D3B7;
transition: 0.2s;
}
.ds21 .aquamarine_flat_1_bg_h:hover {
background: #08D3B7;
transition: 0.2s;
}
}
.ds21 .aquamarine_flat_2 {
color: #01B79E;
transition: 0.2s;
}
.ds21 .aquamarine_flat_2 svg path[stroke], .ds21 .aquamarine_flat_2 svg circle[stroke] {
stroke: #01B79E;
transition: 0.2s;
}
.ds21 .aquamarine_flat_2 svg path[fill], .ds21 .aquamarine_flat_2 svg circle[fill] {
fill: #01B79E;
transition: 0.2s;
}
.ds21 .aquamarine_flat_2_bg {
background: #01B79E;
transition: 0.2s;
}
@media (hover: hover) {
.ds21 .aquamarine_flat_2_h:hover {
color: #01B79E;
transition: 0.2s;
}
.ds21 .aquamarine_flat_2_h:hover svg path[stroke], .ds21 .aquamarine_flat_2_h:hover svg circle[stroke] {
stroke: #01B79E;
transition: 0.2s;
}
.ds21 .aquamarine_flat_2_h:hover svg path[fill], .ds21 .aquamarine_flat_2_h:hover svg circle[fill] {
fill: #01B79E;
transition: 0.2s;
}
.ds21 .aquamarine_flat_2_bg_h:hover {
background: #01B79E;
transition: 0.2s;
}
}
.ds21 .aquamarine_flat_3 {
color: #00A68F;
transition: 0.2s;
}
.ds21 .aquamarine_flat_3 svg path[stroke], .ds21 .aquamarine_flat_3 svg circle[stroke] {
stroke: #00A68F;
transition: 0.2s;
}
.ds21 .aquamarine_flat_3 svg path[fill], .ds21 .aquamarine_flat_3 svg circle[fill] {
fill: #00A68F;
transition: 0.2s;
}
.ds21 .aquamarine_flat_3_bg {
background: #00A68F;
transition: 0.2s;
}
@media (hover: hover) {
.ds21 .aquamarine_flat_3_h:hover {
color: #00A68F;
transition: 0.2s;
}
.ds21 .aquamarine_flat_3_h:hover svg path[stroke], .ds21 .aquamarine_flat_3_h:hover svg circle[stroke] {
stroke: #00A68F;
transition: 0.2s;
}
.ds21 .aquamarine_flat_3_h:hover svg path[fill], .ds21 .aquamarine_flat_3_h:hover svg circle[fill] {
fill: #00A68F;
transition: 0.2s;
}
.ds21 .aquamarine_flat_3_bg_h:hover {
background: #00A68F;
transition: 0.2s;
}
}
.ds21 .aquamarine_gradient_1 {
background: linear-gradient(180deg, #08D3B7 0%, #01B79E 100%);
}
/* Purple */
.ds21 .purple_flat_0_bg {
background: #F5F1FF;
}
.ds21 .purple_flat_1 {
color: #9179C8;
transition: 0.2s;
}
.ds21 .purple_flat_1 svg path[stroke], .ds21 .purple_flat_1 svg circle[stroke] {
stroke: #9179C8;
transition: 0.2s;
}
.ds21 .purple_flat_1 svg path[fill], .ds21 .purple_flat_1 svg circle[fill] {
fill: #9179C8;
transition: 0.2s;
}
.ds21 .purple_flat_1_bg {
background: #9179C8;
transition: 0.2s;
}
@media (hover: hover) {
.ds21 .purple_flat_0_bg_h:hover {
background: #F5F1FF;
}
.ds21 .purple_flat_1_h:hover {
color: #9179C8;
transition: 0.2s;
}
.ds21 .purple_flat_1_h:hover svg path[stroke], .ds21 .purple_flat_1_h:hover svg circle[stroke] {
stroke: #9179C8;
transition: 0.2s;
}
.ds21 .purple_flat_1_h:hover svg path[fill], .ds21 .purple_flat_1_h:hover svg circle[fill] {
fill: #9179C8;
transition: 0.2s;
}
.ds21 .purple_flat_1_bg_h:hover {
background: #9179C8;
transition: 0.2s;
}
}
.ds21 .purple_flat_2 {
color: #8067BA;
transition: 0.2s;
}
.ds21 .purple_flat_2 svg path[stroke], .ds21 .purple_flat_2 svg circle[stroke] {
stroke: #8067BA;
transition: 0.2s;
}
.ds21 .purple_flat_2 svg path[fill], .ds21 .purple_flat_2 svg circle[fill] {
fill: #8067BA;
transition: 0.2s;
}
.ds21 .purple_flat_2_bg {
background: #8067BA;
transition: 0.2s;
}
@media (hover: hover) {
.ds21 .purple_flat_2_h:hover {
color: #8067BA;
transition: 0.2s;
}
.ds21 .purple_flat_2_h:hover svg path[stroke], .ds21 .purple_flat_2_h:hover svg circle[stroke] {
stroke: #8067BA;
transition: 0.2s;
}
.ds21 .purple_flat_2_h:hover svg path[fill], .ds21 .purple_flat_2_h:hover svg circle[fill] {
fill: #8067BA;
transition: 0.2s;
}
.ds21 .purple_flat_2_bg_h:hover {
background: #8067BA;
transition: 0.2s;
}
}
.ds21 .purple_flat_3 {
color: #6C54A3;
transition: 0.2s;
}
.ds21 .purple_flat_3 svg path[stroke], .ds21 .purple_flat_3 svg circle[stroke] {
stroke: #6C54A3;
transition: 0.2s;
}
.ds21 .purple_flat_3 svg path[fill], .ds21 .purple_flat_3 svg circle[fill] {
fill: #6C54A3;
transition: 0.2s;
}
.ds21 .purple_flat_3_bg {
background: #6C54A3;
transition: 0.2s;
}
@media (hover: hover) {
.ds21 .purple_flat_3_h:hover {
color: #6C54A3;
transition: 0.2s;
}
.ds21 .purple_flat_3_h:hover svg path[stroke], .ds21 .purple_flat_3_h:hover svg circle[stroke] {
stroke: #6C54A3;
transition: 0.2s;
}
.ds21 .purple_flat_3_h:hover svg path[fill], .ds21 .purple_flat_3_h:hover svg circle[fill] {
fill: #6C54A3;
transition: 0.2s;
}
.ds21 .purple_flat_3_bg_h:hover {
background: #6C54A3;
transition: 0.2s;
}
}
.ds21 .purple_gradient_1 {
background: linear-gradient(180deg, #9179C8 0%, #8067BA 100%);
}
/* disabled */
.ds21 .disabled_4 {
color: rgba(19, 53, 63, 0.05);
}
.ds21 .disabled_4 svg path[stroke], .ds21 .disabled_4 svg circle[stroke] {
stroke: rgba(19, 53, 63, 0.05);
}
.ds21 .disabled_4 svg path[fill], .ds21 .disabled_4 svg circle[fill] {
fill: rgba(19, 53, 63, 0.05);
}
.ds21 .disabled_4_bg {
background: rgba(19, 53, 63, 0.05);
}
@media (hover: hover) {
.ds21 .disabled_4_h:hover {
color: rgba(19, 53, 63, 0.05);
}
.ds21 .disabled_4_h:hover svg path[stroke], .ds21 .disabled_4_h:hover svg circle[stroke] {
stroke: rgba(19, 53, 63, 0.05);
}
.ds21 .disabled_4_h:hover svg path[fill], .ds21 .disabled_4_h:hover svg circle[fill] {
fill: rgba(19, 53, 63, 0.05);
}
.ds21 .disabled_4_bg_h:hover {
background: rgba(19, 53, 63, 0.05);
}
}
.ds21 .disabled_9 {
color: rgba(19, 53, 63, 0.09);
}
.ds21 .disabled_9 svg path[stroke], .ds21 .disabled_9 svg circle[stroke] {
stroke: rgba(19, 53, 63, 0.09);
}
.ds21 .disabled_9 svg path[fill], .ds21 .disabled_9 svg circle[fill] {
fill: rgba(19, 53, 63, 0.09);
}
.ds21 .disabled_9_bg {
background: rgba(19, 53, 63, 0.09);
}
@media (hover: hover) {
.ds21 .disabled_9_h:hover {
color: rgba(19, 53, 63, 0.09);
}
.ds21 .disabled_9_h:hover svg path[stroke], .ds21 .disabled_9_h:hover svg circle[stroke] {
stroke: rgba(19, 53, 63, 0.09);
}
.ds21 .disabled_9_h:hover svg path[fill], .ds21 .disabled_9_h:hover svg circle[fill] {
fill: rgba(19, 53, 63, 0.09);
}
.ds21 .disabled_9_bg_h:hover{
background: rgba(19, 53, 63, 0.09);
}
}
.ds21 .disabled_14 {
color: rgba(19, 53, 63, 0.14);
}
.ds21 .disabled_14 svg path[stroke], .ds21 .disabled_14 svg circle[stroke] {
stroke: rgba(19, 53, 63, 0.14);
}
.ds21 .disabled_14 svg path[fill], .ds21 .disabled_14 svg circle[fill] {
fill: rgba(19, 53, 63, 0.14);
}
.ds21 .disabled_14_bg{
background: rgba(19, 53, 63, 0.14);
}
@media (hover: hover) {
.ds21 .disabled_14_h:hover {
color: rgba(19, 53, 63, 0.14);
}
.ds21 .disabled_14_h:hover svg path[stroke], .ds21 .disabled_14_h:hover svg circle[stroke] {
stroke: rgba(19, 53, 63, 0.14);
}
.ds21 .disabled_14_h:hover svg path[fill], .ds21 .disabled_14_h:hover svg circle[fill] {
fill: rgba(19, 53, 63, 0.14);
}
.ds21 .disabled_14_bg_h:hover {
background: rgba(19, 53, 63, 0.14);
}
}
.ds21 .disabled_17 {
color: rgba(19, 53, 63, 0.17);
}
.ds21 .disabled_17 svg path[stroke], .ds21 .disabled_17 svg circle[stroke] {
stroke: rgba(19, 53, 63, 0.17);
}
.ds21 .disabled_17 svg path[fill], .ds21 .disabled_17 svg circle[fill] {
fill: rgba(19, 53, 63, 0.17);
}
.ds21 .disabled_17_bg {
background: rgba(19, 53, 63, 0.17);
}
@media (hover: hover) {
.ds21 .disabled_17_h:hover {
color: rgba(19, 53, 63, 0.17);
}
.ds21 .disabled_17_h:hover svg path[stroke], .ds21 .disabled_17_h:hover svg circle[stroke] {
stroke: rgba(19, 53, 63, 0.17);
}
.ds21 .disabled_17_h:hover svg path[fill], .ds21 .disabled_17_h:hover svg circle[fill] {
fill: rgba(19, 53, 63, 0.17);
}
.ds21 .disabled_17_bg_h:hover {
background: rgba(19, 53, 63, 0.17);
}
}
.ds21 .disabled_36 {
color: rgba(19, 53, 63, 0.36);
}
.ds21 .disabled_36 svg path[stroke], .ds21 .disabled_36 svg circle[stroke] {
stroke: rgba(19, 53, 63, 0.36);
}
.ds21 .disabled_36 svg path[fill], .ds21 .disabled_36 svg circle[fill] {
fill: rgba(19, 53, 63, 0.36);
}
.ds21 .disabled_36_bg{
background: rgba(19, 53, 63, 0.36);
}
@media (hover: hover) {
.ds21 .disabled_36_h:hover {
color: rgba(19, 53, 63, 0.36);
}
.ds21 .disabled_36_h:hover svg path[stroke], .ds21 .disabled_36_h:hover svg circle[stroke] {
stroke: rgba(19, 53, 63, 0.36);
}
.ds21 .disabled_36_h:hover svg path[fill], .ds21 .disabled_36_h:hover svg circle[fill] {
fill: rgba(19, 53, 63, 0.36);
}
.ds21 .disabled_36_bg_h:hover {
background: rgba(19, 53, 63, 0.36);
}
}
/* Light */
.ds21 .light_flat_blue_bg {
background: #F2F9FA;
}
.ds21 .light_flat_red_bg {
background: #FDF4F4;
}
.ds21 .light_flat_green_bg {
background: #F2FAF5;
}
.ds21 .light_flat_orange_bg {
background: #FFF8EE;
}
/* Form */
.ds_input, .ds_select, .ds_textarea {
position: relative;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.ds_input input, .ds_input label, .ds_select label, .ds_select select, .ds_textarea .ds_contenteditable, .ds_textarea .label {
font-family: 'hauss';
font-weight: 500;
font-size: 20px;
transition: all .2s ease;
line-height: 22px;
}
.ds_input input, .ds_textarea .ds_contenteditable {
-webkit-appearance: none;
box-shadow: 0px 2px 0px rgba(19, 53, 63, 0.36);
border-style: none;
outline: none;
border-radius: 0;
padding: 12px 0 0 0;
transition: all .2s ease;
width: 100%;
box-sizing: border-box;
background-color: transparent;
color: #13353F;
height: 60px;
min-height: 28px;
}
.ds_textarea .ds_contenteditable {
height: auto;
padding: 25px 0 14px 0;
}
input::-webkit-date-and-time-value {
text-align: left;
}
.ds_input label, .ds_textarea .label, .ds_select label {
position: absolute;
top: 25px;
left: 0;
color: rgba(19, 53, 63, 0.36);
cursor: text;
-webkit-line-clamp: 1;
display: flex;
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
white-space: normal;
overflow: hidden;
}
.ds_input i {
position: absolute;
right: 0;
top: 21px;
width: 30px;
height: 30px;
pointer-events: none;
overflow: hidden;
}
.ds_input i + input {
padding-right: 40px;
}
.ds_filled input, .ds_filled .ds_contenteditable {
box-shadow: 0px 2px 0px rgba(136, 201, 48, 1);
}
.ds_focus input, .ds_focus .ds_contenteditable {
box-shadow: 0px 2px 0px rgba(8, 195, 220, 1);
}
.ds_error input, .ds_error .ds_contenteditable {
box-shadow: 0px 2px 0px rgba(240, 78, 92, 1);
}
.ds_error_message {
display: none;
}
.ds_error .ds_error_message {
display: block;
}
@media (hover: hover) {
.ds_input input:hover, .ds_textarea .ds_contenteditable:hover {
box-shadow: 0px 2px 0px rgba(8, 195, 220, 1);
}
}
.ds_disable input, .ds_disable .ds_contenteditable {
pointer-events: none;
background-color: rgba(19, 53, 63, 0.05);
box-shadow: 0px 2px 0px rgba(19, 53, 63, 0.17);
color: rgba(19, 53, 63, 0.17);
}
.ds_disable label {
pointer-events: none;
color: rgba(19, 53, 63, 0.17);
}
.ds_focus input[type=range] {
box-shadow: none;
}
.ds_focus label, .ds_filled label, .ds_input input[type=time] + label, .ds_input input[type=month] + label, .ds_input input[type=week] + label, .ds_focus .label, .ds_filled .label, .ds_select_fill label {
font-size: 14px;
top: 0;
line-height: 16px;
}
.ds_input input[type=date] {
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAzMCAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAgMjFIMTlNMjAgMTQuNUgxOU0xMSAxNC41SDEwTTExIDIxSDEwTTQgMTBIMjZNMjAuNSAyLjVWNS41TTkuNSAyLjVWNS41TTYuNSAyNkgyMy41QzI0Ljg4MDcgMjYgMjYgMjQuODgwNyAyNiAyMy41VjYuNUMyNiA1LjExOTI5IDI0Ljg4MDcgNCAyMy41IDRINi41QzUuMTE5MjkgNCA0IDUuMTE5MjkgNCA2LjVWMjMuNUM0IDI0Ljg4MDcgNS4xMTkyOSAyNiA2LjUgMjZaIiBzdHJva2U9IiMxMzM1M0YiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+);
background-repeat: no-repeat;
background-position: 100% 21px;
cursor: text;
}
.ds_input input[type="date"]::-webkit-calendar-picker-indicator {
cursor: pointer;
}
.ds_input input[type=date] + label {
padding-right: 40px;
}
@media all and (min-width: 750px) {
.ds_input input[type=date] {
background-image: none;
}
.ds_input input[type=date] + label {
font-size: 14px;
top: 3px;
line-height: 16px;
padding-right: 0;
}
}
.ds_pass + input {
font-family: SF Pro Text,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
}
.ds_input .ds_pass {
pointer-events: auto;
cursor: pointer;
}
.ds_pass svg path {
stroke: rgba(19, 53, 63, 0.36);
}
.ds_filled .ds_pass svg path, .ds_focus .ds_pass svg path {
stroke: rgba(19, 53, 63, 1);
}
.ds_pass span {
display: block;
width: 30px;
height: 30px;
position: relative;
top: 0;
transition: top .2s ease-in-out;
}
.ds_pass_show span {
top: -30px;
}
.ds_disable .ds_pass {
pointer-events: none;
}
.ds_disable .ds_pass svg path {
stroke: rgba(19, 53, 63, 0.17);
}
.ds_input p {
margin: 4px 0 0;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
-webkit-box-shadow: 0px 1px 0px rgba(19, 53, 63, 0.25), 0 0 0 30px white inset !important;
}
input:-webkit-autofill + label,
input:-webkit-autofill:hover + label,
input:-webkit-autofill:focus +label {
font-size: 13px;
top: -14px;
}
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
-webkit-box-shadow: 0px 1px 0px rgba(19, 53, 63, 0.25), 0 0 0 30px white inset !important;
}
/* textarea */
.ds_textarea textarea {
display: none;
}
.ds_textarea .label {
pointer-events: none;
}
/* input file */
.ds_input_file {
margin: 0;
position: relative;
-webkit-tap-highlight-color: transparent;
}
.ds_input_file input {
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
cursor: pointer;
}
.ds_input_file label {
display: block;
color: #658692;
transition: all .2s ease;
cursor: pointer;
}
.ds_input_file .ds_border_input {
border: 1px dashed #658692;
box-sizing: unset;
border-radius: 5px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 125px;
padding: 20px;
box-sizing: border-box;
gap: 20px;
}
.ds_input_file .ds_input_head {
display: flex;
align-items: center;
flex-direction: column;
align-content: center;
justify-content: center;
gap: 7px;
text-align: center;
}
.ds_input_file .ds_input_head svg {
min-width: 28px;
order: 1;
}
.ds_input_text_default, .ds_input_text_added, .ds_input_text_drag {
flex-grow: 1;
order: 2;
}
.ds_files_append, .ds_input_text_drag {
display: none;
}
.ds_add_file .ds_files_append {
display: flex;
flex-direction: column;
gap: 10px;
text-align: center;
}
.ds_input_file.ds_filled label, .ds_input_file.ds_focus label {
font-size: inherit;
line-height: inherit;
}
.ds_file_drag .ds_input_text_drag, .dragFiles .ds_input_text_drag {
display: block;
}
.ds_file_drag .ds_input_text_default, .dragFiles .ds_input_text_default {
display: none;
}
.ds_input_text_added {
display: none;
}
.ds_add_file .ds_input_text_default {
display: none;
}
.ds_add_file .ds_input_text_added {
display: block;
}
.ds_add_file .ds_input_text_drag {
display: none;
}
.ds_input_head .ds_box_svg {
display: block;
width: 40px;
height: 40px;
}
.ds_input_head .ds_box_svg svg path {
stroke: #658692;
}
.ds_input_file label:hover .ds_border_input, .ds_input_file.ds_focus label .ds_border_input {
border: 1px dashed #00A9BF;
}
.ds_input_file label:hover .ds_input_head .ds_box_svg svg path, .ds_input_file.ds_focus label .ds_input_head .ds_box_svg svg path {
stroke: #00A9BF;
}
.ds_input_file:hover label, .ds_input_file.ds_focus label {
color: #00A9BF;
}
.ds_input_file.ds_filled label .ds_border_input {
border: 1px dashed #70B512;
}
.ds_input_file.ds_filled label .ds_input_head .ds_box_svg svg path {
stroke: #70B512;
}
.ds_input_file.ds_filled label {
color: #70B512;
}
/* сheckbox */
.ds_checkbox_1x, .ds_checkbox_2x {
display: inline-flex;
margin: 0;
-webkit-tap-highlight-color: transparent;
}
.ds_checkbox_1x input, .ds_checkbox_2x input {
display: none;
}
.ds_checkbox_1x label, .ds_checkbox_2x label {
display: flex;
cursor: pointer;
gap: 20px;
}
.ds_checkbox_1x .ds_checkbox_input, .ds_checkbox_2x .ds_checkbox_input {
border: 1px solid rgba(19, 53, 63, 0.36);
box-sizing: border-box;
}
.ds_checkbox_1x .ds_checkbox_input {
min-width: 20px;
height: 20px;
border-radius: 2px;
}
.ds_checkbox_2x .ds_checkbox_input {
min-width: 30px;
height: 30px;
border-radius: 2px;
}
.ds_checkbox_1x .ds_checkbox_label, .ds_checkbox_2x .ds_checkbox_label {
flex-grow: 1;
}
.ds_checkbox_1x input:checked + label .ds_checkbox_input, .ds_checkbox_2x input:checked + label .ds_checkbox_input {
background-color: rgba(136, 201, 48, 1);
border: none;
background-position: center center;
background-size: cover;
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNCA4LjVMNi42MDkwNyAxMS41TDEyLjUgNSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==);
}
.ds_checkbox_1x input[disabled] + label .ds_checkbox_input, .ds_checkbox_2x input[disabled] + label .ds_checkbox_input {
background-color: rgba(19, 53, 63, 0.05);
border: 1px solid rgba(19, 53, 63, 0.17);
}
.ds_checkbox_1x input[disabled]:checked + label .ds_checkbox_input, .ds_checkbox_2x input[disabled]:checked + label .ds_checkbox_input {
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNCA4LjVMNi42MDkwNyAxMS41TDEyLjUgNSIgc3Ryb2tlPSIjQkZDOEM5IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+Cg==);
}
.ds_checkbox_1x input[disabled] + label {
pointer-events: none;
}
.ds_checkbox_1x input[disabled] + label .ds_checkbox_label, .ds_checkbox_1x input[disabled] + label .ds_checkbox_label a {
color: rgba(19, 53, 63, 0.36);
}
/* radio */
.ds_radio_1x, .ds_radio_2x {
display: inline-flex;
margin: 0;
-webkit-tap-highlight-color: transparent;
}
.ds_radio_1x input, .ds_radio_2x input {
display: none;
}
.ds_radio_1x label, .ds_radio_2x label {
display: flex;
cursor: pointer;
gap: 20px;
align-items: center;
}
.ds_radio_1x .ds_radio_input, .ds_radio_2x .ds_radio_input {
border: 1px solid rgba(19, 53, 63, 0.36);
box-sizing: border-box;
}
.ds_radio_1x .ds_radio_input {
min-width: 20px;
height: 20px;
border-radius: 16px;
}
.ds_radio_2x .ds_radio_input {
min-width: 30px;
height: 30px;
border-radius: 24px;
}
.ds_radio_1x .ds_radio_label, .ds_radio_2x .ds_radio_label {
flex-grow: 1;
}
.ds_radio_1x input:checked + label .ds_radio_input, .ds_radio_2x input:checked + label .ds_radio_input {
background-color: rgba(136, 201, 48, 1);
border: none;
background-position: center center;
background-size: cover;
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSI4IiBjeT0iOCIgcj0iMyIgZmlsbD0id2hpdGUiLz48L3N2Zz4=);
}
.ds_radio_1x input[disabled] + label .ds_radio_input, .ds_radio_2x input[disabled] + label .ds_radio_input {
background-color: rgba(19, 53, 63, 0.05);
border: 1px solid rgba(19, 53, 63, 0.17);
}
.ds_radio_1x input[disabled]:checked + label .ds_radio_input, .ds_radio_2x input[disabled]:checked + label .ds_radio_input {
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSI4IiBjeT0iOCIgcj0iMyIgZmlsbD0iI0JGQzhDOSIvPjwvc3ZnPg==);
}
.ds_radio_1x input[disabled] + label, .ds_radio_2x input[disabled] + label {
pointer-events: none;
}
.ds_radio_1x input[disabled] + label .ds_radio_label {
color: rgba(19, 53, 63, 0.36);
}
/* switch multy */
.ds_switch_multy {
display: flex;
border-radius: 15px;
overflow: hidden;
padding: 2px;
justify-content: stretch;
margin: 0;
border: 1px solid rgba(19, 53, 63, 0.36);
gap: 2px;
min-width: 260px;
max-width: 600px;
}
.ds_switch_multy input {
display: none;
}
.ds_switch_multy label {
height: 39px;
flex-grow: 1;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 13px;
font-size: 14px;
line-height: 16px;
font-weight: 500;
padding: 0 12px;
-webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
.ds_switch_multy label:hover {
background: rgba(19, 53, 63, 0.09);
}
}
.ds_switch_multy input:checked + label {
background: linear-gradient(180deg, #97DA30 0%, #81BC26 100%);
color: white;
cursor: default;
}
/* switch icon */
.sm_icon {
display: inline-flex;
min-width: inherit;
}
.sm_icon label {
width: 39px;
padding: 0;
}
.sm_icon .ds_box_svg {
width: 25px;
height: 25px;
}
.sm_icon .ds_box_svg svg {
width: 25px;
height: 25px;
stroke-width: 1px;
}
.sm_icon .ds_box_svg svg path[stroke], .sm_icon .ds_box_svg svg circle[stroke] {
stroke: #13353F;
}
.sm_icon .ds_box_svg svg path[fill], .sm_icon .ds_box_svg svg circle[fill] {
fill: #13353F;
}
.sm_icon input:checked + label svg path[stroke], .sm_icon input:checked + label svg circle[stroke] {
stroke: #fff;
}
.sm_icon input:checked + label svg path[fill], .sm_icon input:checked + label svg circle[fill] {
fill: #fff;
}
/* switch button */
.ds_switch_button {
margin: 0;
}
.ds_switch_button input {
display: none;
}
.ds_switch_button label {
display: flex;
gap: 20px;
cursor: pointer;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
.ds_switch_button label span {
flex-basis: auto;
}
.ds_switch_button label span.sb_b {
display: block;
width: 50px;
height: 30px;
background-color: rgba(19, 53, 63, 0.09);
border-radius: 15px;
box-sizing: border-box;
position: relative;
overflow: hidden;
flex-shrink: 0;
}
.ds_switch_button span.sb_b::after {
content: ' ';
position: absolute;
left: 2px;
top: 2px;
display: block;
width: 26px;
height: 26px;
background-color: white;
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.08), 0px 1px 2px rgba(0, 0, 0, 0.08), 0px 4px 12px rgba(0, 0, 0, 0.16);
border-radius: 13px;
transition: left .2s;
}
.ds_switch_button input:checked + label span.sb_b {
background-color: rgba(136, 201, 48, 1);
}
.ds_switch_button input:checked + label span.sb_b::after {
left: 22px;
}
.ds_switch_button input:disabled + label {
pointer-events: none;
color: rgba(19, 53, 63, 0.36);
}
.ds_switch_button input:disabled + label span.sb_b {
background: rgba(19, 53, 63, 0.05);
}
.ds_switch_button input:disabled + label span.sb_b::after {
background: rgba(19, 53, 63, 0.05);
box-shadow: none;
}
/* switch calendar */
.ds_switchcalendar {
max-width: 600px;
min-width: 260px;
gap: 2px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-gap: 1px;
}
.ds_switchcalendar input {
display: none;
}
.ds_switchcalendar label {
display: flex;
flex-direction: column;
align-items: center;
height: 65px;
justify-content: center;
gap: 5px;
min-width: 35px;
border-radius: 15px;
cursor: pointer;
}
.ds_switchcalendar label .t_14 {
color: #658692;
}
@media (hover: hover) {
.ds_switchcalendar label:hover {
background-color: rgba(19, 53, 63, 0.04);
}
}
.ds_switchcalendar input:checked + label {
background-color: #88C930;
color: white;
cursor: default;
}
.ds_switchcalendar input:checked + label .t_14 {
color: white;
}
.ds_switchcalendar input:disabled + label {
background: rgba(19, 53, 63, 0.05);
border: 1px solid rgba(19, 53, 63, 0.14);
color: rgba(19, 53, 63, 0.17);
pointer-events: none;
}
.ds_switchcalendar input:disabled + label .t_14 {
color: rgba(19, 53, 63, 0.17);
}
/* select */
.ds_select select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
border: none;
width: 100%;
padding: 26px 0 8px 0;
box-shadow: 0px 1px 0px rgba(19, 53, 63, 0.25);
border-radius: 0;
background-color: transparent;
color: #13353F;
box-shadow: 0px 2px 0px rgb(19 53 63 / 36%);
padding-right: 25px;
cursor: pointer;
}
.ds_select select option[disabled] {
display: none;
}
.ds_select::after {
content: " ";
display: block;
width: 15px;
height: 15px;
position: absolute;
right: 0;
top: 30px;
pointer-events: none;
background-repeat: no-repeat;
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTEuNzUgNkw3LjUgMTAuMjVMMy4yNSA2IiBzdHJva2U9IiMxMzM1M0YiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=);
}
.ds_select label {
padding-right: 25px;
pointer-events: none;
}
.ds_select_fill select {
box-shadow: 0px 2px 0px rgb(136 201 48);
}
.ds_select select:hover {
box-shadow: 0px 2px 0px rgba(8, 195, 220, 1);
}
.ds21 .ds_error select {
box-shadow: 0px 2px 0px rgba(240, 78, 92, 1);
}
.ds_disable select {
pointer-events: none;
background-color: rgba(19, 53, 63, 0.05);
box-shadow: 0px 2px 0px rgba(19, 53, 63, 0.17);
color: rgba(19, 53, 63, 0.17);
}
.ds_disable::after {
opacity: .2;
}
/* Buttons */
.ds_b_3x, .ds_b_2x, .ds_b_1x {
display: flex;
align-items: center;
justify-content: center;
background-color: #08C3DC;
box-sizing: border-box;
max-width: 100%;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
overflow: hidden;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.ds_b_3x {
border-radius: 15px;
}
.ds_b_2x {
border-radius: 12px;
}
.ds_b_3x svg, .ds_b_3x img {
width: 24px;
height: 24px;
}
.ds_b_2x svg, .ds_b_2x img {
width: 22px;
height: 22px;
}
.ds_b_1x svg, .ds_b_1x img {
width: 18px;
height: 18px;
}
.ds_b_3x > *, .ds_b_2x > *, .ds_b_1x > * {
text-align: center;
color: white;
}
.ds_b_3x input, .ds_b_2x input, .ds_b_1x input {
-webkit-appearance: none;
position: absolute;
top: 0;
left: 0;
opacity: .0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
.ds_b_3x {
height: 45px;
padding: 0 22px;
}
.ds_b_3x > * {
font-style: normal;
font-weight: 500;
font-size: 16px;
}
.ds_b_2x {
height: 35px;
padding: 0 18px;
}
.ds_b_2x > * {
font-style: normal;
font-weight: 500;
font-size: 13px;
}
.ds_b_1x {
height: 32px;
padding: 0 16px;
}
.ds_b_1x > * {
font-style: normal;
font-weight: 500;
font-size: 11px;
}
.ds_b_inline {
display: inline-flex;
}
.ds_b_disable {
background-color: #DDE4E5;
pointer-events: none;
color: #B6C1C2;
}
.ds_b_disable > * {
color: #B6C1C2;
}
.ds_b_outline {
background-color: transparent;
box-shadow: inset 0px 0 0 1.7px #08C3DC;
}
.ds_b_outline > * {
color: #08C3DC;
}
.ds_b_outline:active {
background-color: transparent;
box-shadow: inset 0px 0 0 1.7px #00A9BF;
}
.ds_b_outline.ds_b_disable {
box-shadow: inset 0px 0 0 1.7px #DDE4E5;
}
.ds_b_outline.ds_b_disable > * {
color: #B6C1C2;
}
.ds_b_link {
background-color: transparent;
box-shadow: none;
}
.ds_b_link > * {
color: #00A9BF;
}
.ds_b_link.ds_b_disable > * {
color: #B6C1C2;
}
.ds_b_white {
background-color: white;
}
.ds_b_white > * {
color: #08C3DC;
}
.ds_b_white.ds_b_outline {
background-color: transparent;
box-shadow: inset 0px 0 0 1.7px #ffffff;
}
.ds_b_white.ds_b_outline > * {
color: #ffffff;
}
.ds_b_white.ds_b_link {
background-color: transparent;
}
.ds_b_white.ds_b_link > * {
color: #ffffff;
}
.ds_b_white.ds_b_disable {
background-color: rgba(19, 53, 63, 0.1);
}
.ds_b_white.ds_b_disable > * {
color: rgba(19, 53, 63, 0.3);
}
.ds_b_white.ds_b_outline.ds_b_disable {
background-color: transparent;
}
.ds_b_white.ds_b_outline.ds_b_disable {
background-color: transparent;
box-shadow: inset 0px 0 0 1.7px rgba(19, 53, 63, 0.14);
}
.ds_b_white.ds_b_outline.ds_b_disable > * {
color: rgba(19, 53, 63, 0.3);
}
.ds_b_white.ds_b_link.ds_b_disable {
background-color: transparent;
}
.ds_b_2x.ds_b_outline {
box-shadow: inset 0px 0 0 1.4px #08C3DC;
}
.ds_b_2x.ds_b_outline:active {
box-shadow: inset 0px 0 0 1.4px #00A9BF;
}
.ds_b_2x.ds_b_outline.ds_b_disable {
box-shadow: inset 0px 0 0 1.4px #DDE4E5;
}
.ds_b_2x.ds_b_white.ds_b_outline {
box-shadow: inset 0px 0 0 1.4px #ffffff;
}
.ds_b_2x.ds_b_white.ds_b_outline.ds_b_disable {
box-shadow: inset 0px 0 0 1.4px rgba(19, 53, 63, 0.09);
}
.ds_b_1x.ds_b_outline {
box-shadow: inset 0px 0 0 1.2px #08C3DC;
}
.ds_b_1x.ds_b_outline:active {
box-shadow: inset 0px 0 0 1.2px #00A9BF;
}
.ds_b_1x.ds_b_outline.ds_b_disable {
box-shadow: inset 0px 0 0 1.2px #DDE4E5;
}
.ds_b_1x.ds_b_white.ds_b_outline {
box-shadow: inset 0px 0 0 1.2px #ffffff;
}
.ds_b_1x.ds_b_white.ds_b_outline.ds_b_disable {
box-shadow: inset 0px 0 0 1.2px rgba(19, 53, 63, 0.3);
}
.ds_b_active {
background-color: #88C930;
}
.ds_b_active.ds_b_outline {
background-color: transparent;
box-shadow: inset 0px 0 0 1.7px #88C930;
}
.ds_b_2x.ds_b_active.ds_b_outline {
box-shadow: inset 0px 0 0 1.4px #88C930;
}
.ds_b_active.ds_b_outline > * {
color: #88C930;
}
.ds_b_active.ds_b_link {
background-color: transparent;
box-shadow: none;
}
.ds_b_active.ds_b_link > * {
color: #88C930;
}
.ds_b_white.ds_b_active, .ds_b_2x.ds_b_white.ds_b_active {
background-color: white;
box-shadow: none;
}
.ds_b_white.ds_b_active > * {
color: #88C930;
}
/* button icon */
.ds_b_icon {
padding: 0;
width: 45px;
}
.ds_b_icon.ds_b_2x {
width: 35px;
}
.ds_b_icon .ds_box_svg, .ds_b_icon .ds_box_svg svg {
width: 25px;
height: 25px;
}
.ds_b_icon svg path[stroke], .ds_b_icon svg circle[stroke] {
stroke: #ffffff;
}
.ds_b_icon svg path[fill], .ds_b_icon svg circle[fill] {
fill: #ffffff;
}
.ds_b_outline.ds_b_icon svg path[stroke], .ds_b_outline.ds_b_icon svg circle[stroke] {
stroke: #08C3DC;
}
.ds_b_outline.ds_b_icon svg path[fill], .ds_b_outline.ds_b_icon svg circle[fill] {
fill: #08C3DC;
}
.ds_b_link.ds_b_icon svg path[stroke], .ds_b_link.ds_b_icon svg circle[stroke] {
stroke: #08C3DC;
}
.ds_b_link.ds_b_icon svg path[fill], .ds_b_link.ds_b_icon svg circle[fill] {
fill: #08C3DC;
}
.ds_b_active.ds_b_outline.ds_b_icon svg path[stroke], .ds_b_active.ds_b_outline.ds_b_icon svg circle[stroke] {
stroke: #88C930;
}
.ds_b_active.ds_b_outline.ds_b_icon svg path[fill], .ds_b_active.ds_b_outline.ds_b_icon svg circle[fill] {
fill: #88C930;
}
.ds_b_active.ds_b_link.ds_b_icon svg path[stroke], .ds_b_active.ds_b_link.ds_b_icon svg circle[stroke] {
stroke: #88C930;
}
.ds_b_active.ds_b_link.ds_b_icon svg path[fill], .ds_b_active.ds_b_link.ds_b_icon svg circle[fill] {
fill: #88C930;
}
.ds_b_disable.ds_b_icon svg path[stroke], .ds_b_disable.ds_b_icon svg circle[stroke] {
stroke: rgba(19, 53, 63, 0.14);
}
.ds_b_disable.ds_b_icon svg path[fill], .ds_b_disable.ds_b_icon svg circle[fill] {
fill: rgba(19, 53, 63, 0.14);
}
.ds_b_icon.ds_b_white svg path[stroke], .ds_b_icon.ds_b_white svg circle[stroke] {
stroke: #08C3DC;
}
.ds_b_icon.ds_b_white svg path[fill], .ds_b_icon.ds_b_white svg circle[fill] {
fill: #08C3DC;
}
.ds_b_icon.ds_b_white.ds_b_outline svg path[stroke], .ds_b_icon.ds_b_white.ds_b_outline svg circle[stroke] {
stroke: #ffffff;
}
.ds_b_icon.ds_b_white.ds_b_outline svg path[fill], .ds_b_icon.ds_b_white.ds_b_outline svg circle[fill] {
fill: #ffffff;
}
.ds_b_icon.ds_b_white.ds_b_link svg path[stroke], .ds_b_icon.ds_b_white.ds_b_link svg circle[stroke] {
stroke: #ffffff;
}
.ds_b_icon.ds_b_white.ds_b_link svg path[fill], .ds_b_icon.ds_b_white.ds_b_link svg circle[fill] {
fill: #ffffff;
}
.ds_b_icon.ds_b_white.ds_b_active svg path[stroke], .ds_b_icon.ds_b_white.ds_b_active svg circle[stroke] {
stroke: #88C930;
}
.ds_b_icon.ds_b_white.ds_b_active svg path[fill], .ds_b_icon.ds_b_white.ds_b_active svg circle[fill] {
fill: #88C930;
}
.ds_b_icon.ds_b_white.ds_b_disable svg path[stroke], .ds_b_icon.ds_b_white.ds_b_disable svg circle[stroke] {
stroke: rgba(19, 53, 63, 0.17);
}
.ds_b_icon.ds_b_white.ds_b_disable svg path[fill], .ds_b_icon.ds_b_white.ds_b_disable svg circle[fill] {
fill: rgba(19, 53, 63, 0.17);
}
@media (hover: hover) {
.ds_b_3x:hover, .ds_b_2x:hover, .ds_b_1x:hover, .ds_b_2x.ds_b_white.ds_b_outline:hover {
background-color: #00A9BF;
box-shadow: inset 0 0 0 0 #00A9BF;
transition: .2s;
}
.ds_b_3x:hover > *, .ds_b_2x:hover > *, .ds_b_1x:hover > * {
color: white;
transition: .2s;
}
.ds_b_3x:hover svg path[stroke], .ds_b_2x:hover svg path[stroke], .ds_b_1x:hover svg path[stroke], .ds_b_3x:hover svg circle[stroke], .ds_b_2x:hover svg circle[stroke], .ds_b_1x:hover svg circle[stroke] {
stroke: white;
}
.ds_b_3x.ds_b_active, .ds_b_2x.ds_b_active, .ds_b_1x.ds_b_active {
pointer-events: auto;
}
}
.ds_b_3x:active, .ds_b_2x:active, .ds_b_1x:active {
background-color: #88C930;
}
/* tooltip */
.ds_tooltip {
display: flex;
align-items: center;
justify-content: center;
background-color: #E5F4F6;
padding: 8px 12px;
border-radius: 10px;
position: relative;
}
.ds_tooltip_orange {
background-color: #F79440;
color: white;
}
.ds_tooltip_inline {
display: inline-flex;
}
.ds_tooltip::before {
content: " ";
position: absolute;
left: 24px;
bottom: -5px;
background-color: #E5F4F6;
width: 12px;
height: 12px;
transform: rotate(45deg);
border-radius: 2px;
}
.ds_tooltip_orange::before {
background-color: #F79440;
}
.ds_tooltip_top::before {
bottom: inherit;
top: -5px;
}
/* range and range multiple */
.ds_input_range_multiple, .ds_input_range {
margin: 0;
min-width: 260px
}
.ds_range_multiple_labels_numbers, .ds_range_labels {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.ds_range_multiple_inputs, .ds_range_inputs {
position: relative;
height: 24px;
width: 100%;
min-width: 220px;
}
input[type="range"],
input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
outline: none;
cursor: pointer;
background-color: transparent;
}
input[type="range"] {
height: 24px;
margin: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
}
input[type="range"]::-webkit-slider-thumb {
height: 24px;
width: 24px;
border-radius: 0;
position: relative;
top: -11px;
box-shadow: -1400px 1413px 0 1400px white, -1400px 1411px 0 1400px #0097B3;
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB4PSIxIiB5PSIxIiB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHJ4PSIxMSIgZmlsbD0id2hpdGUiIHN0cm9rZT0iIzAwOTdCMyIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+);
z-index: 2;
border: none;
}
input[type="range"]:nth-child(1)::-webkit-slider-thumb {
box-shadow: -1400px 1413px 0 1400px white, -1400px 1411px 0 1400px #E8ECED;
z-index: 3;
}
input[type="range"]::-webkit-slider-runnable-track {
height: 2px;
background: #E8ECED;
border-radius: 2px;
}
.ds_input_range .ds_focus input, .ds_input_range_multiple .ds_focus input {
box-shadow: none;
}
.ds_number_min, .ds_number_max, .ds_number {
background-color: #f6f6f6;
border: 1px solid #F1F1F1;
outline: none;
padding: 3px 5px;
border-radius: 6px;
box-shadow: none;
font-size: 13px;
}
.ds_number_min {
margin-right: 8px;
}
.ds_range_multiple_labels_head {
margin-bottom: 6px;
}
.ds_range_multiple_inputs, .ds_range_inputs {
margin-top: 6px;
}
.ds_range_error {
border: 1px solid #F04E5C;
}
.ds_range_inputs input:nth-child(1)::-webkit-slider-thumb {
box-shadow: -1400px 1413px 0 1400px white, -1400px 1411px 0 1400px #0097B3;
}
/* Tabulation */
.ds_tab_nohref {
display: flex;
flex-direction: column;
gap: 20px;
}
.ds_tab_cn {
max-width: 100%;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.ds_tab_cn::-webkit-scrollbar {
display: none;
}
.ds_tab {
display: inline-flex;
flex-direction: row;
gap: 35px;
box-shadow: inset 0px -1px 0px rgba(19, 53, 63, 0.36);
}
.ds21 .ds_tab > * {
line-height: 45px;
color: rgba(19, 53, 63, 0.36);
cursor: pointer;
}
.ds21 .ds_tab .active {
box-shadow: inset 0px -4px 0px #08C3DC;
color: #08C3DC;
}
.ds_tab_cntn {
white-space: nowrap;
overflow: hidden;
position: relative;
}
.ds_tab_line {
width: 100%;
position: relative;
left: 0;
}
.ds_tab_line_transition {
transition: left .3s;
}
.ds_tab_line > * {
display: inline-block;
width: 100%;
white-space: normal;
vertical-align: top;
}
@media (hover: hover) {
.ds21 .ds_tab > *:hover {
color: #08c3dc;
}
}
/* TabulationCatalog */
.ds_tab_c {
width: 140px;
display: inline-flex;
flex-direction: column;
justify-content: space-between;
height: 100px;
padding: 12px 15px;
box-sizing: border-box;
border: 1px solid rgba(19, 53, 63, 0.17);
cursor: pointer;
}
.ds_tab_c .ds_box_svg {
width: 30px;
height: 30px;
display: block;
}
@media (hover: hover) {
.ds_tab_c:hover {
border: 1px solid white;
}
}
.ds21 .ds_tab_c.active svg path[stroke], .ds21 .ds_tab_c.active svg circle[stroke] {
stroke: white;
}
.ds21 .ds_tab_c.active svg path[fill], .ds21 .ds_tab_c.active svg circle[fill] {
fill: white;
}
.ds21 .ds_tab_c.active {
background: linear-gradient(180deg, #97DA30 0%, #81BC26 100%);
color: white;
border: 1px solid white;
cursor: default;
}
.ds_tab_c.height140 {
height: 140px;
}
/* Pagination */
.ds21 .ds_pagination {
width: fit-content;
}
.ds21 .ds_pag_row, .ds21 .ds_pag_row_numbers {
display: flex;
justify-content: space-between;
}
.ds_pag_row_numbers {
box-shadow: inset 0px -1px 0px rgb(19 53 63 / 9%);
}
.ds21 .ds_pag_but {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: #13353F;
}
.ds21 .ds_pag_but .ds_box_svg {
width: 20px;
height: 20px;
}
.ds21 .ds_pag_but.active {
box-shadow: inset 0px -2px 0px #08c3dc;
color: #08C3DC;
}
@media (hover: hover) {
.ds21 .ds_pag_but:hover {
color: #08C3DC;
}
.ds21 .ds_pag_but:hover svg path[stroke] {
stroke: #08C3DC;
}
}
/* Хаки для сафари */
/* Удалить, когда iOS смартфоны обновят сафари до версии 14.5 и выше */
.bx-safari .ds_tag_close {
gap: 0;
}
.bx-safari .ds_tag_close > * {
margin-right: 4px;
}
.bx-safari .ds_tag_close > *:last-child {
margin-right: 0;
}
/**/
.bx-safari .ds_tab {
gap: 0;
}
.bx-safari .ds_tab > * {
margin-right: 35px;
}
.bx-safari .ds_tab > *:last-child {
margin-right: 0;
}
/**/
.bx-safari .ds_input, .bx-safari .ds_select, .bx-safari .ds_textarea {
gap: 0;
}
.bx-safari .ds_input > *, .bx-safari .ds_select > *, .bx-safari .ds_textarea > * {
margin-bottom: 10px;
}
.bx-safari .ds_input > *:last-child, .bx-safari .ds_select > *:last-child, .bx-safari .ds_textarea > *:last-child {
margin-bottom: 0;
}
/**/
.bx-safari .ds_checkbox_1x label, .bx-safari .ds_checkbox_2x label {
gap: 0;
}
.bx-safari .ds_checkbox_1x label > *, .bx-safari .ds_checkbox_2x label > * {
margin-right: 20px;
}
.bx-safari .ds_checkbox_1x label > *:last-child, .bx-safari .ds_checkbox_2x label > *:last-child {
margin-right: 0;
}
/**/
.bx-safari .ds_radio_1x label, .bx-safari .ds_radio_2x label {
gap: 0;
}
.bx-safari .ds_radio_1x label > *, .bx-safari .ds_radio_2x label > * {
margin-right: 20px;
}
.bx-safari .ds_radio_1x label > *:last-child, .bx-safari .ds_radio_2x label > *:last-child {
margin-right: 0;
}
/**/
.bx-safari .ds_switch_button label {
gap: 0;
}
.bx-safari .ds_switch_button label > * {
margin-right: 20px;
}
.bx-safari .ds_switch_button label > *:last-child {
margin-right: 0;
}