:root {
  --sss-color-primary: #007bff;
  --sss-color-secondary: #868e96;
  --sss-color-success: #4caf50;
  --sss-color-warning: #ffc107;
  --sss-color-danger: #c82333;
  --sss-color-info: #138496;
  --sss-color-light: #f8f9fa;
  --sss-color-dark: #343a40;
  --sss-color-white: #ffffff;
  --sss-color-text: #212529;
  --sss-color-disabled: #ced4da;
  --sss-icon-filter: none;
}

:root {
  --app-layout-body-bg: #ffffff;
  --app-layout-header-bg: #ffffff;
  --app-layout-main-bg: #ffffff;
  --app-layout-container-bg: #ffffff;
  --app-layout-aside-bg: #ffffff;
  --app-layout-content-bg: #ffffff;
  --app-layout-footer-bg: #ffffff;
  --app-layout-border-color: #ced4da;
  --app-layout-sticky-shadow-color: rgba(255, 255, 255, 0.9);
}

:root {
  --sss-link-base-text-color: #007bff;
  --sss-link-base-text-color-hover: rgb(0%, 38.5882352941%, 80%);
  --sss-link-base-text-color-visited: rgb(20%, 58.5882352941%, 100%);
  --sss-link-base-text-color-active: rgb(0%, 28.9411764706%, 60%);
  --sss-link-base-text-color-focus: rgb(0%, 24.1176470588%, 50%);
  --sss-link-base-outline-color-focus: rgb(0%, 33.7647058824%, 70%);
  --sss-link-disabled-text-color: #ced4da;
}

:root {
  --sss-btn-base-bg-color: #ffffff;
  --sss-btn-base-bg-color-hover: #f8f9fa;
  --sss-btn-base-bg-color-active: rgb(91.5588235294%, 92.7647058824%, 93.9705882353%);
  --sss-btn-base-text-color: #212529;
  --sss-btn-base-bg-color-disabled: #ced4da;
  --sss-btn-base-text-color-disabled: #212529;
  --sss-btn-primary-bg-color: #007bff;
  --sss-btn-primary-bg-color-hover: rgb(0%, 43.4117647059%, 90%);
  --sss-btn-primary-bg-color-active: rgb(0%, 41%, 85%);
  --sss-btn-primary-bg-color-disabled: rgba(30%, 63.7647058824%, 100%, 0.6);
  --sss-btn-primary-text-color: #ffffff;
  --sss-btn-primary-text-color-hover: #ffffff;
  --sss-btn-primary-text-color-active: #ffffff;
  --sss-btn-primary-text-color-disabled: rgba(255, 255, 255, 0.7);
  --sss-btn-secondary-bg-color: #868e96;
  --sss-btn-secondary-bg-color-hover: rgb(46.5861530453%, 50.1176470588%, 53.6491410724%);
  --sss-btn-secondary-bg-color-active: rgb(43.982300885%, 47.3333333333%, 50.6843657817%);
  --sss-btn-secondary-bg-color-disabled: rgba(66.7843137255%, 68.9803921569%, 71.1764705882%, 0.6);
  --sss-btn-secondary-text-color: #ffffff;
  --sss-btn-secondary-text-color-hover: #ffffff;
  --sss-btn-secondary-text-color-active: #ffffff;
  --sss-btn-secondary-text-color-disabled: rgba(255, 255, 255, 0.7);
  --sss-btn-light-bg-color: #f8f9fa;
  --sss-btn-light-bg-color-hover: rgb(85.862745098%, 87.8823529412%, 89.9019607843%);
  --sss-btn-light-bg-color-active: rgb(80.1666666667%, 83%, 85.8333333333%);
  --sss-btn-light-bg-color-disabled: rgba(97.5294117647%, 97.8823529412%, 98.2352941176%, 0.9);
  --sss-btn-light-text-color: rgb(74.4259634888%, 76.8235294118%, 79.2210953347%);
  --sss-btn-light-text-color-hover: rgb(41.1710615281%, 45.9215686275%, 50.6720757268%);
  --sss-btn-light-text-color-active: rgb(34.244759973%, 38.1960784314%, 42.1473968898%);
  --sss-btn-light-text-color-disabled: rgba(82.9506423259%, 84.5490196078%, 86.1473968898%, 0.9);
  --sss-btn-success-bg-color: #4caf50;
  --sss-btn-success-bg-color-hover: rgb(26.8235294118%, 61.7647058824%, 28.2352941176%);
  --sss-btn-success-bg-color-active: rgb(25.3333333333%, 58.3333333333%, 26.6666666667%);
  --sss-btn-success-bg-color-disabled: rgba(50.4296539333%, 78.472306851%, 51.5626904148%, 0.6);
  --sss-btn-success-text-color: #ffffff;
  --sss-btn-success-text-color-hover: #ffffff;
  --sss-btn-success-text-color-active: #ffffff;
  --sss-btn-success-text-color-disabled: rgba(255, 255, 255, 0.7);
  --sss-btn-warning-bg-color: #ffc107;
  --sss-btn-warning-bg-color-hover: rgb(92.4705882353%, 69.3529411765%, 0%);
  --sss-btn-warning-bg-color-active: rgb(87.3333333333%, 65.5%, 0%);
  --sss-btn-warning-bg-color-disabled: rgba(100%, 80.5490196078%, 22.1960784314%, 0.6);
  --sss-btn-warning-text-color: #212529;
  --sss-btn-warning-text-color-hover: #212529;
  --sss-btn-warning-text-color-active: #212529;
  --sss-btn-warning-text-color-disabled: rgba(33, 37, 41, 0.6);
  --sss-btn-danger-bg-color: #c82333;
  --sss-btn-danger-bg-color-hover: rgb(70.5882352941%, 12.3529411765%, 18%);
  --sss-btn-danger-bg-color-active: rgb(66.6666666667%, 11.6666666667%, 17%);
  --sss-btn-danger-bg-color-disabled: rgba(88.7567793075%, 35.7530246141%, 40.892782645%, 0.6);
  --sss-btn-danger-text-color: #ffffff;
  --sss-btn-danger-text-color-hover: #ffffff;
  --sss-btn-danger-text-color-active: #ffffff;
  --sss-btn-danger-text-color-disabled: rgba(255, 255, 255, 0.7);
  --sss-btn-info-bg-color: #138496;
  --sss-btn-info-bg-color-hover: rgb(6.7058823529%, 46.5882352941%, 52.9411764706%);
  --sss-btn-info-bg-color-active: rgb(6.3333333333%, 44%, 50%);
  --sss-btn-info-bg-color-disabled: rgba(16.9161155586%, 79.5059751711%, 89.4760413041%, 0.6);
  --sss-btn-info-text-color: #ffffff;
  --sss-btn-info-text-color-hover: #ffffff;
  --sss-btn-info-text-color-active: #ffffff;
  --sss-btn-info-text-color-disabled: rgba(255, 255, 255, 0.7);
  --sss-btn-ghost-bg-color: rgba(97.5294117647%, 97.8823529412%, 98.2352941176%, 0.8);
  --sss-btn-ghost-bg-color-hover: rgba(97.3921568627%, 97.7647058824%, 98.137254902%, 0.85);
  --sss-btn-ghost-bg-color-disabled: rgba(97.6666666667%, 98%, 98.3333333333%, 0.7);
  --sss-btn-ghost-text-color: rgba(41.1710615281%, 45.9215686275%, 50.6720757268%, 0.9);
  --sss-btn-ghost-text-color-hover: rgba(23.8553076403%, 26.6078431373%, 29.3603786342%, 0.9);
  --sss-btn-ghost-text-color-disabled: rgba(82.9506423259%, 84.5490196078%, 86.1473968898%, 0.8);
  --sss-btn-ghost-border-color: rgba(97.5294117647%, 97.8823529412%, 98.2352941176%, 0.8);
  --sss-btn-ghost-border-color-hover: rgba(97.3921568627%, 97.7647058824%, 98.137254902%, 0.85);
  --sss-btn-ghost-border-color-disabled: rgba(97.6666666667%, 98%, 98.3333333333%, 0.7);
}

:root {
  --card-base-bg-color: #ffffff;
  --card-base-bg-color-hover: #f8f9fa;
  --card-base-bg-color-active: rgb(91.5588235294%, 92.7647058824%, 93.9705882353%);
  --card-base-text-color: #212529;
  --card-base-border-color: rgb(85.862745098%, 87.8823529412%, 89.9019607843%);
  --card-base-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  --card-header-border-color: rgb(85.862745098%, 87.8823529412%, 89.9019607843%);
  --card-footer-border-color: rgb(85.862745098%, 87.8823529412%, 89.9019607843%);
  --card-title-text-color: #212529;
  --card-subtitle-text-color: #868e96;
}

:root {
  --info-base-bg-color: #f8f9fa;
  --info-base-border-color: rgb(85.862745098%, 87.8823529412%, 89.9019607843%);
  --info-base-text-color: #212529;
  --info-primary-bg-color: rgb(90%, 94.8235294118%, 100%);
  --info-primary-border-color: #007bff;
  --info-primary-text-color: #212529;
  --info-secondary-bg-color: rgb(95.2549019608%, 95.568627451%, 95.8823529412%);
  --info-secondary-border-color: #868e96;
  --info-secondary-text-color: #868e96;
  --info-success-bg-color: rgb(92.9185219905%, 96.9246152644%, 93.080384345%);
  --info-success-border-color: #4caf50;
  --info-success-text-color: #4caf50;
  --info-danger-bg-color: rgb(98.3938256154%, 90.8218606592%, 91.5561118064%);
  --info-danger-border-color: #c82333;
  --info-danger-text-color: #c82333;
  --info-warning-bg-color: rgb(100%, 97.568627451%, 90.2745098039%);
  --info-warning-border-color: #ffc107;
  --info-warning-text-color: #ffc107;
  --info-light-bg-color: rgb(88.1308736512%, 97.0722821673%, 98.4965773292%);
  --info-light-border-color: #138496;
  --info-light-text-color: #138496;
  --info-dark-bg-color: #343a40;
  --info-dark-border-color: rgb(18.3529411765%, 20.4705882353%, 22.5882352941%);
  --info-dark-text-color: #f8f9fa;
  --info-close-bg-color: rgba(92, 64, 51, 0.1);
  --info-close-bg-color-hover: rgba(92, 64, 51, 0.2);
  --info-close-text-color: #212529;
}

:root {
  --sss-data-display-bg-color: transparent;
  --sss-data-display-text-color: #212529;
  --sss-data-display-field-border-color: rgb(85.862745098%, 87.8823529412%, 89.9019607843%);
  --sss-data-display-label-text-color: #868e96;
  --sss-data-display-value-text-color: #212529;
  --sss-data-display-link-text-color: #007bff;
  --sss-data-display-link-text-color-hover: rgb(0%, 38.5882352941%, 80%);
}

:root {
  --sss-form-group-icon-bg-color: rgb(100%, 95.137254902%, 80.5490196078%);
}

:root {
  --sss-form-label-text-color: #868e96;
  --sss-form-input-bg-color: #f8f9fa;
  --sss-form-input-bg-color-disabled: #ced4da;
  --sss-form-input-border-color: rgb(74.4259634888%, 76.8235294118%, 79.2210953347%);
  --sss-form-input-border-color-focus: #007bff;
  --sss-form-input-border-color-disabled: #f8f9fa;
  --sss-form-input-shadow-color-focus: rgba(0, 123, 255, 0.3);
  --sss-form-input-border-color-error: #c82333;
  --sss-form-input-shadow-color-error: rgba(200, 35, 51, 0.5);
  --sss-form-input-border-color-success: #4caf50;
  --sss-form-input-shadow-color-success: rgba(76, 175, 80, 0.9);
  --sss-form-input-border-color-warning: #ffc107;
  --sss-form-input-shadow-color-warning: rgba(255, 193, 7, 0.3);
}

:root {
  --sss-checkbox-base-bg-color: #f8f9fa;
  --sss-checkbox-base-bg-color-checked: #007bff;
  --sss-checkbox-base-bg-color-disabled: #ced4da;
  --sss-checkbox-base-border-color: rgb(74.4259634888%, 76.8235294118%, 79.2210953347%);
  --sss-checkbox-base-border-color-checked: #007bff;
  --sss-checkbox-base-border-color-focus: #007bff;
  --sss-checkbox-base-border-color-disabled: #f8f9fa;
  --sss-checkbox-base-checkmark-color: #ffffff;
  --sss-checkbox-base-text-color: #212529;
  --sss-checkbox-base-text-color-disabled: rgba(33, 37, 41, 0.6);
  --sss-checkbox-base-shadow-focus: rgba(0, 123, 255, 0.3);
  --sss-checkbox-error-border-color: #c82333;
  --sss-checkbox-error-shadow-focus: rgba(200, 35, 51, 0.5);
  --sss-checkbox-success-border-color: #4caf50;
  --sss-checkbox-success-shadow-focus: rgba(76, 175, 80, 0.9);
}

:root {
  --sss-switch-base-bg-color: rgb(82.7058823529%, 84.8235294118%, 86.9411764706%);
  --sss-switch-base-bg-color-checked: #007bff;
  --sss-switch-base-bg-color-disabled: #ced4da;
  --sss-switch-base-bg-color-checked-disabled: rgba(30%, 63.7647058824%, 100%, 0.6);
  --sss-switch-base-thumb-color: #ffffff;
  --sss-switch-base-text-color: #212529;
  --sss-switch-base-shadow-color-focus: rgba(0, 123, 255, 0.3);
  --sss-switch-error-bg-color-checked: #c82333;
  --sss-switch-error-shadow-color-focus: rgba(200, 35, 51, 0.5);
  --sss-switch-success-bg-color-checked: #4caf50;
  --sss-switch-success-shadow-color-focus: rgba(76, 175, 80, 0.9);
}

:root {
  --sss-text-primary-text-color: #007bff;
  --sss-text-secondary-text-color: #868e96;
  --sss-text-success-text-color: #4caf50;
  --sss-text-danger-text-color: #c82333;
  --sss-text-warning-text-color: #ffc107;
  --sss-text-info-text-color: #138496;
  --sss-text-light-text-color: #f8f9fa;
  --sss-text-dark-text-color: #343a40;
}

.switch--slider {
  outline: 1px solid gray;
}
.switch--slider:before {
  outline: 1px solid gray;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  line-height: 1.6;
}

p {
  margin-bottom: 1.6rem;
}
p:last-child {
  margin-bottom: 0;
}

body {
  color: var(--sss-color-text);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: 1.4;
}

h1 {
  font-size: 2.4rem;
  margin-bottom: 2.4rem;
}

h2 {
  font-size: 2.2rem;
  margin-bottom: 2.2rem;
}

h3 {
  font-size: 2rem;
  margin-bottom: 2rem;
}

h4 {
  font-size: 1.8rem;
  margin-bottom: 1.8rem;
}

h5 {
  font-size: 1.6rem;
  margin-bottom: 1.6rem;
}

h6 {
  font-size: 1.4rem;
  margin-bottom: 1.4rem;
}

input,
select,
textarea,
button {
  font-family: inherit;
}

ul,
ol,
li {
  list-style: none;
  list-style-position: outside;
}

ul li {
  list-style: circle;
}

ol li {
  list-style: decimal;
}

a {
  color: var(--sss-link-base-text-color);
  text-decoration: none;
}
a:hover {
  color: var(--sss-link-base-text-color-hover);
  text-decoration: underline;
}
a:visited:not(.btn) {
  color: var(--sss-link-base-text-color-visited);
}
a:visited:not(.btn):hover {
  color: var(--sss-link-base-text-color-hover);
  text-decoration: underline;
}
a:active {
  color: var(--sss-link-base-text-color-active);
}
a:focus {
  color: var(--sss-link-base-text-color-focus);
  outline: 1px dashed var(--sss-link-base-outline-color-focus);
  outline-offset: 2px;
}
a.disabled, a[disabled] {
  color: var(--sss-link-disabled-text-color);
  pointer-events: none;
  text-decoration: none;
}

.mauto {
  margin: 0 auto;
}

.m-0 {
  margin: 0rem;
}

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

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

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

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

.m-2 {
  margin: 0.2rem;
}

.mt-2 {
  margin-top: 0.2rem;
}

.mb-2 {
  margin-bottom: 0.2rem;
}

.ml-2 {
  margin-left: 0.2rem;
}

.mr-2 {
  margin-right: 0.2rem;
}

.m-4 {
  margin: 0.4rem;
}

.mt-4 {
  margin-top: 0.4rem;
}

.mb-4 {
  margin-bottom: 0.4rem;
}

.ml-4 {
  margin-left: 0.4rem;
}

.mr-4 {
  margin-right: 0.4rem;
}

.m-5 {
  margin: 0.5rem;
}

.mt-5 {
  margin-top: 0.5rem;
}

.mb-5 {
  margin-bottom: 0.5rem;
}

.ml-5 {
  margin-left: 0.5rem;
}

.mr-5 {
  margin-right: 0.5rem;
}

.m-6 {
  margin: 0.6rem;
}

.mt-6 {
  margin-top: 0.6rem;
}

.mb-6 {
  margin-bottom: 0.6rem;
}

.ml-6 {
  margin-left: 0.6rem;
}

.mr-6 {
  margin-right: 0.6rem;
}

.m-8 {
  margin: 0.8rem;
}

.mt-8 {
  margin-top: 0.8rem;
}

.mb-8 {
  margin-bottom: 0.8rem;
}

.ml-8 {
  margin-left: 0.8rem;
}

.mr-8 {
  margin-right: 0.8rem;
}

.m-10 {
  margin: 1rem;
}

.mt-10 {
  margin-top: 1rem;
}

.mb-10 {
  margin-bottom: 1rem;
}

.ml-10 {
  margin-left: 1rem;
}

.mr-10 {
  margin-right: 1rem;
}

.m-12 {
  margin: 1.2rem;
}

.mt-12 {
  margin-top: 1.2rem;
}

.mb-12 {
  margin-bottom: 1.2rem;
}

.ml-12 {
  margin-left: 1.2rem;
}

.mr-12 {
  margin-right: 1.2rem;
}

.m-14 {
  margin: 1.4rem;
}

.mt-14 {
  margin-top: 1.4rem;
}

.mb-14 {
  margin-bottom: 1.4rem;
}

.ml-14 {
  margin-left: 1.4rem;
}

.mr-14 {
  margin-right: 1.4rem;
}

.m-15 {
  margin: 1.5rem;
}

.mt-15 {
  margin-top: 1.5rem;
}

.mb-15 {
  margin-bottom: 1.5rem;
}

.ml-15 {
  margin-left: 1.5rem;
}

.mr-15 {
  margin-right: 1.5rem;
}

.m-16 {
  margin: 1.6rem;
}

.mt-16 {
  margin-top: 1.6rem;
}

.mb-16 {
  margin-bottom: 1.6rem;
}

.ml-16 {
  margin-left: 1.6rem;
}

.mr-16 {
  margin-right: 1.6rem;
}

.m-18 {
  margin: 1.8rem;
}

.mt-18 {
  margin-top: 1.8rem;
}

.mb-18 {
  margin-bottom: 1.8rem;
}

.ml-18 {
  margin-left: 1.8rem;
}

.mr-18 {
  margin-right: 1.8rem;
}

.m-20 {
  margin: 2rem;
}

.mt-20 {
  margin-top: 2rem;
}

.mb-20 {
  margin-bottom: 2rem;
}

.ml-20 {
  margin-left: 2rem;
}

.mr-20 {
  margin-right: 2rem;
}

.m-22 {
  margin: 2.2rem;
}

.mt-22 {
  margin-top: 2.2rem;
}

.mb-22 {
  margin-bottom: 2.2rem;
}

.ml-22 {
  margin-left: 2.2rem;
}

.mr-22 {
  margin-right: 2.2rem;
}

.m-24 {
  margin: 2.4rem;
}

.mt-24 {
  margin-top: 2.4rem;
}

.mb-24 {
  margin-bottom: 2.4rem;
}

.ml-24 {
  margin-left: 2.4rem;
}

.mr-24 {
  margin-right: 2.4rem;
}

.m-25 {
  margin: 2.5rem;
}

.mt-25 {
  margin-top: 2.5rem;
}

.mb-25 {
  margin-bottom: 2.5rem;
}

.ml-25 {
  margin-left: 2.5rem;
}

.mr-25 {
  margin-right: 2.5rem;
}

.m-26 {
  margin: 2.6rem;
}

.mt-26 {
  margin-top: 2.6rem;
}

.mb-26 {
  margin-bottom: 2.6rem;
}

.ml-26 {
  margin-left: 2.6rem;
}

.mr-26 {
  margin-right: 2.6rem;
}

.m-28 {
  margin: 2.8rem;
}

.mt-28 {
  margin-top: 2.8rem;
}

.mb-28 {
  margin-bottom: 2.8rem;
}

.ml-28 {
  margin-left: 2.8rem;
}

.mr-28 {
  margin-right: 2.8rem;
}

.m-30 {
  margin: 3rem;
}

.mt-30 {
  margin-top: 3rem;
}

.mb-30 {
  margin-bottom: 3rem;
}

.ml-30 {
  margin-left: 3rem;
}

.mr-30 {
  margin-right: 3rem;
}

.m-32 {
  margin: 3.2rem;
}

.mt-32 {
  margin-top: 3.2rem;
}

.mb-32 {
  margin-bottom: 3.2rem;
}

.ml-32 {
  margin-left: 3.2rem;
}

.mr-32 {
  margin-right: 3.2rem;
}

.m-34 {
  margin: 3.4rem;
}

.mt-34 {
  margin-top: 3.4rem;
}

.mb-34 {
  margin-bottom: 3.4rem;
}

.ml-34 {
  margin-left: 3.4rem;
}

.mr-34 {
  margin-right: 3.4rem;
}

.m-35 {
  margin: 3.5rem;
}

.mt-35 {
  margin-top: 3.5rem;
}

.mb-35 {
  margin-bottom: 3.5rem;
}

.ml-35 {
  margin-left: 3.5rem;
}

.mr-35 {
  margin-right: 3.5rem;
}

.m-36 {
  margin: 3.6rem;
}

.mt-36 {
  margin-top: 3.6rem;
}

.mb-36 {
  margin-bottom: 3.6rem;
}

.ml-36 {
  margin-left: 3.6rem;
}

.mr-36 {
  margin-right: 3.6rem;
}

.m-38 {
  margin: 3.8rem;
}

.mt-38 {
  margin-top: 3.8rem;
}

.mb-38 {
  margin-bottom: 3.8rem;
}

.ml-38 {
  margin-left: 3.8rem;
}

.mr-38 {
  margin-right: 3.8rem;
}

.m-40 {
  margin: 4rem;
}

.mt-40 {
  margin-top: 4rem;
}

.mb-40 {
  margin-bottom: 4rem;
}

.ml-40 {
  margin-left: 4rem;
}

.mr-40 {
  margin-right: 4rem;
}

.p-0 {
  padding: 0rem;
}

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

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

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

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

.p-2 {
  padding: 0.2rem;
}

.pt-2 {
  padding-top: 0.2rem;
}

.pb-2 {
  padding-bottom: 0.2rem;
}

.pl-2 {
  padding-left: 0.2rem;
}

.pr-2 {
  padding-right: 0.2rem;
}

.p-4 {
  padding: 0.4rem;
}

.pt-4 {
  padding-top: 0.4rem;
}

.pb-4 {
  padding-bottom: 0.4rem;
}

.pl-4 {
  padding-left: 0.4rem;
}

.pr-4 {
  padding-right: 0.4rem;
}

.p-5 {
  padding: 0.5rem;
}

.pt-5 {
  padding-top: 0.5rem;
}

.pb-5 {
  padding-bottom: 0.5rem;
}

.pl-5 {
  padding-left: 0.5rem;
}

.pr-5 {
  padding-right: 0.5rem;
}

.p-6 {
  padding: 0.6rem;
}

.pt-6 {
  padding-top: 0.6rem;
}

.pb-6 {
  padding-bottom: 0.6rem;
}

.pl-6 {
  padding-left: 0.6rem;
}

.pr-6 {
  padding-right: 0.6rem;
}

.p-8 {
  padding: 0.8rem;
}

.pt-8 {
  padding-top: 0.8rem;
}

.pb-8 {
  padding-bottom: 0.8rem;
}

.pl-8 {
  padding-left: 0.8rem;
}

.pr-8 {
  padding-right: 0.8rem;
}

.p-10 {
  padding: 1rem;
}

.pt-10 {
  padding-top: 1rem;
}

.pb-10 {
  padding-bottom: 1rem;
}

.pl-10 {
  padding-left: 1rem;
}

.pr-10 {
  padding-right: 1rem;
}

.p-12 {
  padding: 1.2rem;
}

.pt-12 {
  padding-top: 1.2rem;
}

.pb-12 {
  padding-bottom: 1.2rem;
}

.pl-12 {
  padding-left: 1.2rem;
}

.pr-12 {
  padding-right: 1.2rem;
}

.p-14 {
  padding: 1.4rem;
}

.pt-14 {
  padding-top: 1.4rem;
}

.pb-14 {
  padding-bottom: 1.4rem;
}

.pl-14 {
  padding-left: 1.4rem;
}

.pr-14 {
  padding-right: 1.4rem;
}

.p-15 {
  padding: 1.5rem;
}

.pt-15 {
  padding-top: 1.5rem;
}

.pb-15 {
  padding-bottom: 1.5rem;
}

.pl-15 {
  padding-left: 1.5rem;
}

.pr-15 {
  padding-right: 1.5rem;
}

.p-16 {
  padding: 1.6rem;
}

.pt-16 {
  padding-top: 1.6rem;
}

.pb-16 {
  padding-bottom: 1.6rem;
}

.pl-16 {
  padding-left: 1.6rem;
}

.pr-16 {
  padding-right: 1.6rem;
}

.p-18 {
  padding: 1.8rem;
}

.pt-18 {
  padding-top: 1.8rem;
}

.pb-18 {
  padding-bottom: 1.8rem;
}

.pl-18 {
  padding-left: 1.8rem;
}

.pr-18 {
  padding-right: 1.8rem;
}

.p-20 {
  padding: 2rem;
}

.pt-20 {
  padding-top: 2rem;
}

.pb-20 {
  padding-bottom: 2rem;
}

.pl-20 {
  padding-left: 2rem;
}

.pr-20 {
  padding-right: 2rem;
}

.p-22 {
  padding: 2.2rem;
}

.pt-22 {
  padding-top: 2.2rem;
}

.pb-22 {
  padding-bottom: 2.2rem;
}

.pl-22 {
  padding-left: 2.2rem;
}

.pr-22 {
  padding-right: 2.2rem;
}

.p-24 {
  padding: 2.4rem;
}

.pt-24 {
  padding-top: 2.4rem;
}

.pb-24 {
  padding-bottom: 2.4rem;
}

.pl-24 {
  padding-left: 2.4rem;
}

.pr-24 {
  padding-right: 2.4rem;
}

.p-25 {
  padding: 2.5rem;
}

.pt-25 {
  padding-top: 2.5rem;
}

.pb-25 {
  padding-bottom: 2.5rem;
}

.pl-25 {
  padding-left: 2.5rem;
}

.pr-25 {
  padding-right: 2.5rem;
}

.p-26 {
  padding: 2.6rem;
}

.pt-26 {
  padding-top: 2.6rem;
}

.pb-26 {
  padding-bottom: 2.6rem;
}

.pl-26 {
  padding-left: 2.6rem;
}

.pr-26 {
  padding-right: 2.6rem;
}

.p-28 {
  padding: 2.8rem;
}

.pt-28 {
  padding-top: 2.8rem;
}

.pb-28 {
  padding-bottom: 2.8rem;
}

.pl-28 {
  padding-left: 2.8rem;
}

.pr-28 {
  padding-right: 2.8rem;
}

.p-30 {
  padding: 3rem;
}

.pt-30 {
  padding-top: 3rem;
}

.pb-30 {
  padding-bottom: 3rem;
}

.pl-30 {
  padding-left: 3rem;
}

.pr-30 {
  padding-right: 3rem;
}

.p-32 {
  padding: 3.2rem;
}

.pt-32 {
  padding-top: 3.2rem;
}

.pb-32 {
  padding-bottom: 3.2rem;
}

.pl-32 {
  padding-left: 3.2rem;
}

.pr-32 {
  padding-right: 3.2rem;
}

.p-34 {
  padding: 3.4rem;
}

.pt-34 {
  padding-top: 3.4rem;
}

.pb-34 {
  padding-bottom: 3.4rem;
}

.pl-34 {
  padding-left: 3.4rem;
}

.pr-34 {
  padding-right: 3.4rem;
}

.p-35 {
  padding: 3.5rem;
}

.pt-35 {
  padding-top: 3.5rem;
}

.pb-35 {
  padding-bottom: 3.5rem;
}

.pl-35 {
  padding-left: 3.5rem;
}

.pr-35 {
  padding-right: 3.5rem;
}

.p-36 {
  padding: 3.6rem;
}

.pt-36 {
  padding-top: 3.6rem;
}

.pb-36 {
  padding-bottom: 3.6rem;
}

.pl-36 {
  padding-left: 3.6rem;
}

.pr-36 {
  padding-right: 3.6rem;
}

.p-38 {
  padding: 3.8rem;
}

.pt-38 {
  padding-top: 3.8rem;
}

.pb-38 {
  padding-bottom: 3.8rem;
}

.pl-38 {
  padding-left: 3.8rem;
}

.pr-38 {
  padding-right: 3.8rem;
}

.p-40 {
  padding: 4rem;
}

.pt-40 {
  padding-top: 4rem;
}

.pb-40 {
  padding-bottom: 4rem;
}

.pl-40 {
  padding-left: 4rem;
}

.pr-40 {
  padding-right: 4rem;
}

.text-primary {
  color: var(--sss-text-primary-text-color);
}

.text-secondary {
  color: var(--sss-text-secondary-text-color);
}

.text-success {
  color: var(--sss-text-success-text-color);
}

.text-danger,
.text-error {
  color: var(--sss-text-danger-text-color);
}

.text-warning {
  color: var(--sss-text-warning-text-color);
}

.text-info {
  color: var(--sss-text-info-text-color);
}

.text-light {
  color: var(--sss-text-light-text-color);
}

.text-dark {
  color: var(--sss-text-dark-text-color);
}

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

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

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

.normal {
  font-weight: 400;
}

.semibold {
  font-weight: 600;
}

.bold {
  font-weight: 700;
}

.italic {
  font-style: italic;
}

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

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

.underline {
  text-decoration: underline;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.break-words {
  overflow-wrap: break-word;
  word-break: break-word;
}

.fs-0 {
  font-size: 0;
}

.fs-8 {
  font-size: 0.8rem;
}

.fs-10 {
  font-size: 1rem;
}

.fs-12 {
  font-size: 1.2rem;
}

.fs-14 {
  font-size: 1.4rem;
}

.fs-16 {
  font-size: 1.6rem;
}

.fs-18 {
  font-size: 1.8rem;
}

.fs-20 {
  font-size: 2rem;
}

.fs-22 {
  font-size: 2.2rem;
}

.fs-24 {
  font-size: 2.4rem;
}

.fs-26 {
  font-size: 2.6rem;
}

.fs-28 {
  font-size: 2.8rem;
}

.fs-30 {
  font-size: 3rem;
}

.fs-32 {
  font-size: 3.2rem;
}

.fs-34 {
  font-size: 3.4rem;
}

.fs-36 {
  font-size: 3.6rem;
}

.fs-38 {
  font-size: 3.8rem;
}

.fs-40 {
  font-size: 4rem;
}

.lh-0 {
  line-height: 0;
}

.lh-2 {
  line-height: 0.2rem;
}

.lh-4 {
  line-height: 0.4rem;
}

.lh-6 {
  line-height: 0.6rem;
}

.lh-8 {
  line-height: 0.8rem;
}

.lh-10 {
  line-height: 1rem;
}

.lh-12 {
  line-height: 1.2rem;
}

.lh-14 {
  line-height: 1.4rem;
}

.lh-16 {
  line-height: 1.6rem;
}

.lh-18 {
  line-height: 1.8rem;
}

.lh-20 {
  line-height: 2rem;
}

.lh-22 {
  line-height: 2.2rem;
}

.lh-24 {
  line-height: 2.4rem;
}

.lh-26 {
  line-height: 2.6rem;
}

.lh-28 {
  line-height: 2.8rem;
}

.lh-30 {
  line-height: 3rem;
}

.lh-32 {
  line-height: 3.2rem;
}

.lh-34 {
  line-height: 3.4rem;
}

.lh-36 {
  line-height: 3.6rem;
}

.lh-38 {
  line-height: 3.8rem;
}

.lh-40 {
  line-height: 4rem;
}

.flex {
  display: flex;
}

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

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

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

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

.flex-none {
  flex: none;
}

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

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

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

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

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

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

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

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

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

.grid {
  display: grid;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-rows-1 {
  grid-template-rows: repeat(1, minmax(0, 1fr));
}

.grid-rows-2 {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.grid-rows-3 {
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.grid-rows-4 {
  grid-template-rows: repeat(4, minmax(0, 1fr));
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.gap-0 {
  gap: 0;
}

.gap-2 {
  gap: 0.2rem;
}

.gap-4 {
  gap: 0.4rem;
}

.gap-6 {
  gap: 0.6rem;
}

.gap-8 {
  gap: 0.8rem;
}

.gap-10 {
  gap: 1rem;
}

.gap-12 {
  gap: 1.2rem;
}

.gap-14 {
  gap: 1.4rem;
}

.gap-16 {
  gap: 1.6rem;
}

.gap-18 {
  gap: 1.8rem;
}

.gap-20 {
  gap: 2rem;
}

.gap-22 {
  gap: 2.2rem;
}

.gap-24 {
  gap: 2.4rem;
}

.gap-26 {
  gap: 2.6rem;
}

.gap-28 {
  gap: 2.8rem;
}

.gap-30 {
  gap: 3rem;
}

.gap-32 {
  gap: 3.2rem;
}

.gap-34 {
  gap: 3.4rem;
}

.gap-36 {
  gap: 3.6rem;
}

.gap-38 {
  gap: 3.8rem;
}

.gap-40 {
  gap: 4rem;
}

:root {
  --sss-color-primary: #86481b;
  --sss-color-text: #34200f;
  --c-link: #8a4b1c;
  --c-link-hover: #5a2d0e;
  --sss-link-base-text-color: var(--c-link);
  --sss-link-base-text-color-hover: var(--c-link-hover);
  --sss-link-base-text-color-visited: var(--c-link);
  --sss-link-base-text-color-active: var(--c-link-hover);
  --sss-link-base-text-color-focus: var(--c-link-hover);
  --sss-link-base-outline-color-focus: #c79a68;
  --sss-text-primary-text-color: #8a4b1c;
  --app-layout-body-bg: #fff;
  --app-layout-header-bg: #fff;
  --app-layout-aside-bg: #f8ead6;
  --app-layout-footer-bg: #f8ead6;
  --app-layout-border-color: #e5c9a3;
  --c-muted: #8a6a50;
  --c-accent: #cf6a17;
  --c-count: #c79a68;
  --c-panel: #fff6e8;
  --c-panel-border: #d4a373;
  --c-shadow: 110, 60, 20;
  --content-max: 1200px;
  --gutter: 16px;
}

.top-menu-bar {
  --sss-link-base-text-color: #fff;
  --sss-link-base-text-color-hover: #fff;
  --sss-link-base-text-color-visited: #fff;
  --sss-link-base-text-color-active: #fff;
  --sss-link-base-text-color-focus: #fff;
}

.top-menu__list {
  --sss-link-base-text-color: var(--sss-color-primary);
  --sss-link-base-text-color-hover: var(--c-link-hover);
  --sss-link-base-text-color-visited: var(--sss-color-primary);
  --sss-link-base-text-color-active: var(--c-link-hover);
  --sss-link-base-text-color-focus: var(--c-link-hover);
}

.top-menu__list .top-menu__link--active {
  --sss-link-base-text-color: var(--c-accent);
  --sss-link-base-text-color-hover: var(--c-accent);
  --sss-link-base-text-color-visited: var(--c-accent);
  --sss-link-base-text-color-active: var(--c-accent);
  --sss-link-base-text-color-focus: var(--c-accent);
}

.widget__link,
.footer__link,
.card__link,
.same__item {
  --sss-link-base-text-color: var(--sss-color-text);
  --sss-link-base-text-color-hover: var(--c-link-hover);
  --sss-link-base-text-color-visited: var(--sss-color-text);
  --sss-link-base-text-color-active: var(--c-link-hover);
  --sss-link-base-text-color-focus: var(--c-link-hover);
}

.card__stat,
.comment__anchor {
  --sss-link-base-text-color: var(--c-muted);
  --sss-link-base-text-color-hover: var(--c-link-hover);
  --sss-link-base-text-color-visited: var(--c-muted);
  --sss-link-base-text-color-active: var(--c-link-hover);
  --sss-link-base-text-color-focus: var(--c-link-hover);
}

.feedback__link {
  --sss-link-base-text-color: #fff;
  --sss-link-base-text-color-hover: #fff;
  --sss-link-base-text-color-visited: #fff;
  --sss-link-base-text-color-active: #fff;
  --sss-link-base-text-color-focus: #fff;
}

body {
  font-family: "Open Sans", Arial, sans-serif;
  background: var(--app-layout-body-bg);
}

img {
  max-width: 100%;
  height: auto;
}

.list-none,
.list-none > li {
  list-style: none;
}

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page > .page__inner {
  flex: 1 0 auto;
}

.page__inner {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  box-sizing: border-box;
}

.page__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 16px;
  padding-bottom: 32px;
}

.page__main {
  order: 1;
  min-width: 0;
}

.page__sidebar {
  width: 100%;
}

.page__sidebar--left {
  order: 2;
}

.page__sidebar--right {
  order: 3;
}

@media (min-width: 1024px) {
  .page__body {
    flex-direction: row;
    align-items: flex-start;
  }
  .page__sidebar {
    flex: 0 0 250px;
  }
  .page__sidebar--left {
    order: 1;
  }
  .page__main {
    order: 2;
    flex: 1 1 auto;
  }
  .page__sidebar--right {
    order: 3;
    flex: 0 0 270px;
  }
}
.header {
  background: var(--app-layout-header-bg);
  border-bottom: 1px solid var(--app-layout-border-color);
}

.header__inner {
  justify-content: center;
}

.header__logo img {
  display: block;
  width: 300px;
  max-width: 100%;
  height: auto;
}

.footer {
  margin-top: 16px;
  background: var(--app-layout-footer-bg);
  border-top: 1px solid var(--app-layout-border-color);
}

.footer__inner {
  padding-top: 28px;
  padding-bottom: 32px;
}

.footer__column {
  min-width: 160px;
}

.footer__title {
  margin: 0 0 4px;
  font-size: 1.4rem;
}

.footer__link {
  color: var(--sss-color-text);
  text-decoration: none;
}

.top-menu {
  position: relative;
}

.top-menu__link {
  color: var(--sss-color-text);
  text-decoration: none;
  white-space: nowrap;
}

.top-menu__link--active {
  color: var(--c-accent);
  font-weight: 700;
}

.top-menu__count {
  color: var(--c-count);
  font-size: 1.3rem;
  font-style: italic;
}

.top-menu__item > summary {
  list-style: none;
  cursor: pointer;
}

.top-menu__item > summary::-webkit-details-marker {
  display: none;
}

.top-menu__item[open] > summary {
  color: var(--c-accent);
}

.top-menu__item[open] {
  flex: 1 1 100%;
}

.top-menu__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 24px;
  margin: 8px 0 0;
  padding: 12px 16px;
  list-style: none;
  background: var(--c-panel);
  border: 1px solid var(--c-panel-border);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(var(--c-shadow), 0.14);
}

.top-menu__list .top-menu__link {
  display: block;
  padding: 6px 0;
  color: var(--sss-color-primary);
  font-size: 1.8rem;
  white-space: normal;
}

.top-menu__list .top-menu__link--active {
  color: var(--c-accent);
}

.top-menu__list .top-menu__count {
  font-size: 1.5rem;
}

@media (min-width: 768px) {
  .top-menu {
    justify-content: space-between;
  }
  .top-menu__item {
    position: static;
  }
  .top-menu__item[open] {
    flex: 0 1 auto;
  }
  .top-menu__list {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    right: 0;
    grid-template-columns: repeat(2, 1fr);
    padding: 16px 24px;
  }
  .top-menu__list .top-menu__link {
    font-size: 2rem;
    padding: 10px 0;
  }
}
@media (min-width: 1024px) {
  .top-menu__list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.top-menu-bar {
  background: var(--sss-color-primary);
  box-shadow: 0 2px 6px rgba(var(--c-shadow), 0.25);
}

.top-menu-bar .top-menu {
  padding-top: 8px;
  padding-bottom: 8px;
}

.top-menu-bar .top-menu > .top-menu__link,
.top-menu-bar .top-menu__item > summary {
  display: block;
  padding: 8px 14px;
  color: #fff;
  border-radius: 6px;
}

.top-menu-bar .top-menu > .top-menu__link:hover,
.top-menu-bar .top-menu__item > summary:hover {
  background: rgba(255, 255, 255, 0.14);
}

.top-menu-bar .top-menu__item > summary.top-menu__link--active {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
}

.top-menu-bar .top-menu__item[open] > summary {
  color: #fff;
  background: rgba(255, 255, 255, 0.3);
}

.top-menu-bar .top-menu > .top-menu__link .top-menu__count,
.top-menu-bar .top-menu__item > summary .top-menu__count {
  color: rgba(255, 255, 255, 0.72);
}

@media (min-width: 768px) {
  .top-menu-bar .top-menu__list {
    margin-top: 4px;
  }
}
.top-menu__hint {
  display: block;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--c-muted);
}

.rating-groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .rating-groups {
    grid-template-columns: repeat(3, 1fr);
  }
}
.rating-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 20px;
  text-decoration: none;
  background: var(--app-layout-aside-bg);
  border: 1px solid var(--app-layout-border-color);
  border-radius: 8px;
  --sss-link-base-text-color: var(--sss-color-text);
  --sss-link-base-text-color-hover: var(--sss-color-text);
  --sss-link-base-text-color-visited: var(--sss-color-text);
  --sss-link-base-text-color-active: var(--sss-color-text);
  --sss-link-base-text-color-focus: var(--sss-color-text);
}

.rating-group:hover {
  background: var(--c-panel);
  border-color: var(--c-panel-border);
  text-decoration: none;
}

.rating-group__title {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--sss-color-primary);
}

.rating-group__hint {
  font-size: 1.5rem;
  color: var(--c-accent);
  font-weight: 600;
}

.rating-group__desc {
  font-size: 1.5rem;
  line-height: 1.4;
}

.rating-group__count {
  margin-top: auto;
  padding-top: 8px;
  font-size: 1.4rem;
  color: var(--c-muted);
}

.breadcrumbs {
  font-size: 1.6rem;
  line-height: 1.4;
}

.breadcrumbs__link {
  color: var(--sss-link-base-text-color);
  text-decoration: none;
}

.breadcrumbs__link:hover {
  text-decoration: underline;
}

.breadcrumbs__sep {
  color: var(--c-count);
  font-size: 1.8rem;
}

.breadcrumbs__current {
  color: var(--sss-color-text);
  font-weight: 600;
}

@media (min-width: 768px) {
  .breadcrumbs {
    font-size: 1.8rem;
  }
}
.article {
  min-width: 0;
}

.pdf-link {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 12px;
}

.pdf-link__a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 1.4rem;
  text-decoration: none;
  background: var(--app-layout-aside-bg);
  border: 1px solid var(--app-layout-border-color);
  border-radius: 6px;
}

.pdf-link__a:hover {
  background: var(--c-panel);
  border-color: var(--c-panel-border);
}

.pdf-link__icon {
  flex: none;
}

.article__title {
  margin: 8px 0 20px;
  color: var(--sss-color-primary);
  font-size: 2.6rem;
  line-height: 1.25;
}

.article__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.article__body {
  font-size: 1.6rem;
  overflow-wrap: anywhere;
}

.article__body,
.article__body * {
  line-height: 150% !important;
}

.article__body img {
  border-radius: 6px;
  max-width: 100% !important;
  height: auto !important;
}

.article__body iframe {
  max-width: 100% !important;
}

.article__body iframe[src*=youtube],
.article__body iframe[src*=vimeo],
.article__body iframe[src*=video_ext] {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16/9;
}

.article__body ul,
.article__body ol {
  padding-left: 24px;
}

.article__body .list-none {
  padding-left: 0;
}

.plain {
  padding-bottom: 32px;
}

.plain__figure {
  display: flex;
  justify-content: center;
  margin: 0 0 24px;
  padding: 16px;
  background: var(--app-layout-aside-bg);
  border: 1px solid var(--app-layout-border-color);
  border-radius: 8px;
}

.plain__photo {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 600px;
  border-radius: 6px;
}

.article__body p {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}

.informer {
  border-top: 1px solid var(--app-layout-border-color);
  border-bottom: 1px solid var(--app-layout-border-color);
  color: var(--c-muted);
}

.informer {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.informer__date {
  margin-left: 0;
}

@media (min-width: 768px) {
  .informer {
    flex-direction: row;
    align-items: center;
    gap: 12px 20px;
  }
  .informer__date {
    margin-left: auto;
  }
}
.tags__link {
  text-decoration: none;
}

.share {
  margin: 20px 0;
  padding: 12px 16px;
  background: var(--app-layout-aside-bg);
  border: 1px solid var(--app-layout-border-color);
  border-radius: 8px;
}

.share__title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 600;
}

.share__buttons {
  min-height: 35px;
}

.share__btn {
  padding: 8px 16px;
  font-size: 1.5rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 6px;
}

.share__btn {
  --sss-link-base-text-color: #fff;
  --sss-link-base-text-color-hover: #fff;
  --sss-link-base-text-color-visited: #fff;
  --sss-link-base-text-color-active: #fff;
  --sss-link-base-text-color-focus: #fff;
  color: #fff;
}

.share__btn--vk {
  background: #0077ff;
}

.share__btn--vk:hover {
  background: #0066dd;
}

.share__btn--ok {
  background: #ee8208;
}

.share__btn--ok:hover {
  background: #d97206;
}

.card__social {
  min-height: 24px;
}

.feedback {
  margin-top: 24px;
  padding: 16px;
  background: var(--app-layout-aside-bg);
  border: 1px solid var(--app-layout-border-color);
  border-radius: 8px;
}

.feedback__text {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.5;
}

.feedback__link {
  padding: 8px 18px;
  font-size: 1.7rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 6px;
}

.feedback__link,
.feedback__link:visited,
.feedback__link:hover,
.feedback__link:focus,
.feedback__link:active {
  color: #fff;
}

.feedback__link--ok {
  background: #ee8208;
}

.feedback__link--ok:hover,
.feedback__link--ok:focus {
  background: #d97206;
}

.feedback__link--vk {
  background: #0077ff;
}

.feedback__link--vk:hover,
.feedback__link--vk:focus {
  background: #0066dd;
}

.comments {
  margin-top: 24px;
}

.comments__summary {
  margin-bottom: 16px;
  font-size: 2rem;
}

.comments__list, .comments__children {
  margin: 0;
  padding: 0;
  list-style: none;
}

.comments__children {
  padding-left: 20px;
  border-left: 2px solid var(--app-layout-border-color);
}

.comments-notice {
  display: block !important;
  padding: 20px;
  background: #a3173f;
  background-image: linear-gradient(135deg, #d6204f, #6a1b9a);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(106, 27, 154, 0.4);
  color: #fff;
}

.comments-notice__text {
  margin: 0 0 16px;
  width: 100%;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
}

.comments-notice__btn,
.comments-notice__btn:visited,
.comments-notice__btn:hover {
  padding: 14px 28px;
  font-size: 2rem;
  font-weight: 700;
  color: #8a1238;
  text-decoration: none;
  display: block;
  width: 100%;
  text-align: center;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.comments-notice__btn:hover {
  background: #fde7f0;
}

.comments-page__back {
  display: inline-block;
  margin: 8px 0 16px;
}

.comment {
  padding: 12px 0;
}

.comment__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.comment__author {
  font-weight: 700;
}

.comment__anchor {
  color: var(--c-muted);
  text-decoration: none;
}

.comment__time {
  color: var(--c-muted);
  font-size: 1.3rem;
}

.comment__body {
  margin-top: 6px;
  font-size: 1.5rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.widget {
  background: var(--app-layout-aside-bg);
  border: 1px solid var(--app-layout-border-color);
  border-radius: 8px;
  overflow: hidden;
}

.widget + .widget {
  margin-top: 16px;
}

.widget__title {
  margin: 0;
  padding: 10px 14px;
  font-size: 1.5rem;
  color: #fff;
  background: var(--sss-color-primary);
}

.widget__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.widget__item-meta {
  color: var(--c-muted);
  font-size: 1.2rem;
}

.widget__link {
  color: var(--sss-color-text);
  text-decoration: none;
}

.widget__tag {
  text-decoration: none;
}

[hidden] {
  display: none !important;
}

.tag-search__input {
  width: 100%;
  padding: 8px 12px;
  font: inherit;
  color: var(--sss-color-text);
  background: #fff;
  border: 1px solid var(--app-layout-border-color);
  border-radius: 6px;
}

.tag-search__input:focus {
  outline: 2px solid var(--c-count);
  outline-offset: 0;
  border-color: var(--c-panel-border);
}

.tag-search__caption, .tag-search__empty {
  margin: 10px 0 8px;
  font-size: 1.3rem;
  color: var(--c-muted);
}

.tag-search__tag {
  padding: 3px 10px;
  font-size: 1.4rem;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--app-layout-border-color);
  border-radius: 999px;
}

.tag-search__tag:hover {
  background: var(--c-panel);
  border-color: var(--c-panel-border);
}

.tag-search__count {
  color: var(--c-count);
  font-size: 1.2rem;
}

.widget__image {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 10px;
}

.same__title {
  margin: 0;
  font-size: 1.6rem;
}

.same__item {
  color: var(--sss-color-text);
  text-decoration: none;
}

.same__image {
  width: 100%;
  border-radius: 6px;
}

.page-title {
  margin: 24px 0 20px;
  color: var(--sss-color-primary);
  font-size: 2.6rem;
  line-height: 1.25;
}

.page-title__slogan {
  margin: 6px 0 0;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--c-muted);
}

.listing {
  padding-bottom: 32px;
}

.listing__empty {
  text-align: center;
  color: var(--c-muted);
}

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}
.card {
  background: var(--app-layout-body-bg);
  border: 1px solid var(--app-layout-border-color);
  border-radius: 8px;
}

.card__image {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 6px;
}

.card__title {
  margin: 4px 0 0;
  font-size: 1.8rem;
  line-height: 1.3;
}

.card__link {
  color: var(--sss-color-text);
  text-decoration: none;
}

.card__stat {
  color: var(--c-muted);
  text-decoration: none;
}

.card__more {
  align-self: flex-start;
  margin-top: auto;
  padding: 6px 12px;
  border: 1px solid var(--sss-color-primary);
  border-radius: 6px;
  text-decoration: none;
  font-size: 1.4rem;
}

.pager__link, .pager__gap {
  min-width: 34px;
  padding: 6px 8px;
  box-sizing: border-box;
  text-align: center;
  font-size: 1.4rem;
  text-decoration: none;
  border: 1px solid var(--app-layout-border-color);
  border-radius: 6px;
}

.pager__link--current {
  color: #fff;
  background: var(--sss-color-primary);
  border-color: var(--sss-color-primary);
}

.pager__link--nav {
  font-weight: 700;
}

.pager__gap {
  border-color: transparent;
  color: var(--c-muted);
}

.preloader {
  display: none;
}

.to-top {
  position: fixed;
  right: 12px;
  bottom: 12px;
  padding: 6px 10px;
  background: var(--app-layout-body-bg);
  border: 1px solid var(--app-layout-border-color);
  border-radius: 6px;
  text-decoration: none;
}