:root {
    --orange-color: #FF4800;
    --orange-color-hover: #FF814F;
    --orange-color-disabled: #CECECE;
    --gray-color: #A7A7A7;
    --gray2-color: #F3F3F3;
    --gray-line-color: #D8D8D8;
    --gray-border-color: #6A6A6A;
    --gray-text-color: #A7A7A7;
    --gray2-text-color: #808080;
    --gray3-text-color: #4B4B4B;
    --gray4-text-color: #6D6D6D;
    --gray5-text-color: #454545;
    --violet-color: #430B51;
    --violet2-color: #2A0433;
    --green-color: #2EC933;
    --orange-text-color: #FF4800;
    --white-text-color: white;
    --violet-text-color: #430B51;
    --violet2-text-color: #2A0433;
    --chevrone-next: url(/local/templates/csio-dpo/svg/chevron-next.svg);
    --chevrone-next-white: url(/local/templates/csio-dpo/svg/chevron-next-white.svg);
    --chevrone-down: url(/local/templates/csio-dpo/svg/chevrone-down.svg);
}

@font-face {
    font-family: 'FiraSans';
    src: url(/local/templates/csio-dpo/fonts/FiraSans-Light.ttf);
    font-weight: 300;
}

@font-face {
    font-family: 'FiraSans';
    src: url(/local/templates/csio-dpo/fonts/FiraSans-Regular.ttf);
    font-weight: 400;
}

@font-face {
    font-family: 'FiraSans';
    src: url(/local/templates/csio-dpo/fonts/FiraSans-Medium.ttf);
    font-weight: 500;
}

@font-face {
    font-family: 'FiraSans';
    src: url(/local/templates/csio-dpo/fonts/FiraSans-Bold.ttf);
    font-weight: 700;
}

@font-face {
    font-family: 'FiraSansCondensed';
    src: url(/local/templates/csio-dpo/fonts/FiraSansCondensed-Light.ttf);
    font-weight: 300;
}

@font-face {
    font-family: 'FiraSansCondensed';
    src: url(/local/templates/csio-dpo/fonts/FiraSansCondensed-Regular.ttf);
    font-weight: 400;
}

@font-face {
    font-family: 'FiraSansCondensed';
    src: url(/local/templates/csio-dpo/fonts/FiraSansCondensed-Medium.ttf);
    font-weight: 500;
}

* {
    box-sizing: border-box;
    font-family: FiraSans;
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: FiraSans;
    color: black;
}

h2 {
    font-size: 36px;
    font-weight: 500;
}

h3 {
    margin-bottom: 10px;
}

a {
    text-decoration: none;
    color: black;
}

html {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
}

html.monovisual {
    --orange-color: #D8D8D8;
    --orange-color-hover: #D8D8D8;
    --orange-color-disabled: #D8D8D8;
    --gray-color: #D8D8D8;
    --gray-line-color: #D8D8D8;
    --gray-border-color: #D8D8D8;
    --violet-color: #D8D8D8;
    --violet2-color: #D8D8D8;
    --green-color: #D8D8D8;
    --white-text-color: black;
    --orange-text-color: black;
    --gray-text-color: black;
    --gray2-text-color: black;
    --gray3-text-color: black;
    --violet-text-color: black;
    --violet2-text-color: black;
}

html.monovisual * {
    font-size: 20px !important;
    font-weight: 500;
}

body {
    margin: 0;
    padding: 0;
}

b, strong {
    font-weight: 600;
    color: black;
}

.popup-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 1002;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    overflow-y: auto;
    padding: 30px;
}

.popup {
    display: none;
    width: 470px;
    z-index: 1003;
    background: white;
    padding: 30px;
    overflow-y: auto;
    position: relative;
    max-height: 90%;
}

.popup-wrap.active {
    display: flex;
}

.popup.active {
    display: block;
}

.popup .form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.popup .form h2 {
    font-size: 26px;
    margin-bottom: 0;
}

.overlay-blur {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    z-index: 500;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s;
}

.overlay-blur.active {
    opacity: 1;
    pointer-events: auto;
}

.container-global {
    width: 100%;
    background: #F3F3F3;
    padding-bottom: 100px;
}

.container-wrap {
    max-width: 1440px;
    margin: auto;
    padding: 0 40px;
}

@media (min-width: 1520px) {
    .container-wrap {
        padding: 0;
    }
}

.header-grid {
    display: grid;
    grid-template-columns: 350px 1fr 200px 100px;
    grid-template-rows: 30px 100px 50px;
    gap: 0px 0px;
    grid-template-areas:
        "top-menu  top-menu  visually-block language-block"
        "logo      search    phone          phone      "
        "main-menu main-menu main-menu      main-menu     ";
    align-items: center;
}

.top-line-block {
    height: 30px;
    width: 100%;
    background: #EDE4EF;
    display: flex;
    align-items: center;
    gap: 40px;
    padding-right: 40px;
}

.visually-block {
    grid-area: visually-block;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 100%;
    color: var(--white-text-color);
    font-size: 12px;
    text-align: center;
    text-wrap: nowrap;
    width: 200px;
    background: var(--orange-color);
    cursor: pointer;
}

.language-block {
    grid-area: language-block;
    text-align: center;
    font-size: 12px;
    min-width: 50px;
    width: auto;
    color: #5F5B60;
    background: #EDE4EF;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: right;
    padding-right: 40px;
}

.language-block .active {
    color: black;
}

.header-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 97px;
    padding: 22px 40px 17px 40px;
    gap: 80px;
}

.logo-block {
    grid-area: logo;
    display: flex;
    text-decoration: none;
    color: black;
    align-items: center;
    gap: 10px;
    padding-left: 40px;
}

.logo-block img {
    width: 150px;
    height: 58px;
}

.logo-block div {
    font-family: 'FiraSansCondensed';
    font-size: 14px;
    font-weight: 300;
    text-wrap: nowrap;
}

.right-block {
    display: flex;
    width: 100%;
    gap: 15px;
    align-items: center;
}

.phonetime-block {
    grid-area: phone;
    display: flex;
    flex-direction: column;
    color: var(--orange-text-color);
    justify-content: center;
    align-items: center;
}

.phonetime-block .phone {
    font-size: 24px;
    text-wrap: nowrap;
}

.phonetime-block .time {
    font-size: 16px;
    display: flex;
    gap: 8px;
}

.phonetime-block .time img {
    width: 20px;
}

.lk-button {
    grid-area: personal;
    min-width: 42px;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 5px;
    padding-top: 2px;
    background-image: url("/local/templates/csio-dpo/svg/lk.svg");
    background-color: var(--orange-color);
    background-repeat: no-repeat;
    background-position: center;
    justify-self: right;
    margin-right: 40px;
}

.menu-button {
    display: none;
    grid-area: burger-menu;
}

.menu-header {
    display: none;
}

.social-nets {
    display: none;
    grid-area: social-nets;
}

.mob-menu-contacts {
    display: none;
}

.menu-bayan-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    color: var(--violet2-text-color);
    padding: 10px 10px 10px 20px;
    cursor: pointer;
}

.menu-bayan-title .arrow,
.open-child-arrow,
.menu-link-title .arrow {
    width: 37px;
    height: 37px;
    background-image: url("/local/templates/csio-dpo/svg/arrow-down-gray.svg");
    background-repeat: no-repeat;
    background-position: center;
    padding: 10px;
    cursor: pointer;
    transition: transform 0.5s;
}

.social-menu-block .arrow {
    transition: transform 0.5s;
}

.open .arrow,
.open > .open-child-arrow {
    transform: rotate(180deg);
}

.menu-item-block {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
}

.container {
    background: #F3F3F3;
    display: flex;
    padding: 24px 0 0;
    gap: 20px;
}

.page {
    overflow: hidden;
    width: 100%;
}

.page svg {
    width: 20px;
}

.page h1 {
    font-size: 36px;
    margin-bottom: 20px;
    font-weight: 500;
}

.about-video-block {
    max-width: 50%;
}

.about-video-block video {
    width: 100%;
}

.content {
    background: white;
    padding: 20px;
}

.content table {
    width: 100%;
}

.content table,
.content table td,
.content table th {
    border: 1px solid #C7C7C7;
    border-collapse: collapse;
}

.content table td,
.content table th {
    padding: 20px;
    font-size: 16px;
}

.content table th {
    font-weight: 500;
}

.table-wrapper {
    overflow-x: auto;
}

.social-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    border-radius: 3px;
    background: white;
}

.footer-orange-block {
    width: 100%;
    background: var(--orange-color);
    padding: 27px 40px 37px 40px;
    color: var(--white-text-color);
}

.footer-orange-block .first-row {
    display: flex;
    justify-content: space-between;
}

.footer-logo-block {
    width: 110px;
    background: white;
    border-radius: 7px;
    padding: 13px 15px 10px 15px;
    margin-bottom: 18px;
}

.footer-logo-block img {
    width: 80px;
    height: 30px;
}

.footer-subscribe-block {
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 10px;
}

.social-button-blocks {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.footer-orange-block .social-button-blocks {
    justify-content: left;
}


.course-category-menu .social-button-blocks {
    padding: 0 20px 20px 20px;
}

.footer-address-block {
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: end;
}

.footer-address-block > div,
.footer-address-block a {
    display: flex;
    align-items: center;
    color: var(--white-text-color);
}

.footer-address-block img {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

.footer-map-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: black;
}

.footer-orange-block .two-row {
    display: grid;
    grid-template-areas: 'customer-agreed company personal-data';
    justify-content: space-between;
    font-size: 14px;
    margin-top: 60px;
}

.customer-agreed {
    color: white;
    grid-area: customer-agreed;
}

.company {
    grid-area: company;
    display: flex;
    gap: 10px;
}

.personal-data {
    color: white;
    grid-area: personal-data;
}

.button-block {
    display: flex;

}

.link-block,
.link-block-i {
    position: relative;
}

.link-block-i {
    cursor: pointer;
}

.link-block-i,
.link-block-i * {
    transition: background-color 0.5s, color 0.5s;
}

.link-block-i:hover {
    background-color: var(--violet-color);
}

.link-block-i:hover * {
    color: white !important;
}

.link-block-i:hover .course-label {
    background-color: var(--orange-color);
    color: white;
}

.link-block .arrow,
.link-block-i .arrow {
    position: absolute;
    top: 0;
    right: 0;
    height: 30px;
    width: 30px;
    transition: transform 0.5s;
}

.link-block:hover .arrow,
.link-block-i:hover .arrow {
    transform: rotate(180deg);
}

.o-button,
.tr-button {
    display: flex;
    justify-content: center;
    height: 50px;
    width: max-content;
    padding: 15px 20px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.o-button {
    border: none;
    background: var(--orange-color);
    color: var(--white-text-color);
    transition: background-color 0.5s;
}

.o-button:hover {
    background: var(--orange-color-hover);
}

.o-button:disabled {
    background: var(--orange-color-disabled);
}

.tr-button {
    border: 1px solid var(--gray-border-color);
    background: white;
}

.v-button {
    border: none;
    background: var(--violet-color);
    color: var(--white-text-color);
}

.g-button {
    border: none;
    background: var(--green-color);
    color: var(--white-text-color);
}

.clip-button {
    display: flex;
    gap: 5px;
}

.clip-button:before {
    content: '';
    width: 20px;
    height: 20px;
    background-image: url("/local/templates/csio-dpo/svg/clip-white.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.file-input input {
    display: none;
}

.only-mob {
    display: none;
}

.close-popup {
    border: none;
    background-color: white;
    background-image: url("/local/templates/csio-dpo/svg/close.svg");
    background-repeat: no-repeat;
    background-position: center;
    width: 45px;
    height: 45px;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    padding: 0;
}

.c-checkbox {
    display: none;
}

.c-checkbox + label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.c-checkbox + label > div {
    display: inline-block;;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    border: 2px solid var(--violet-color);
    border-radius: 5px;
    background: white;
    padding: 4px;
    transition: background-color 0.3s;
}

.c-checkbox + label > div:before {
    display: block;
    content: '';
    border-radius: 100%;
    background: white;
    height: 100%;
}

.c-checkbox.have-error + label > div {
    border: 2px solid #F43434;
    background: #FFEBEB;
}

.c-checkbox:checked + label > div {
    background: var(--orange-text-color);
}


.file-block {
    height: max-content;
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 18px;
    margin: 15px 0;
    border-bottom: 1px #F0F0F0 solid;
    padding: 0 0 20px;
}

.file-block:first-child {
    border-top: 1px #F0F0F0 solid;
    padding-top: 20px;
}

.file-block .file-size {
    color: var(--gray-text-color);
    font-weight: 300;
}

.file-block .file-type {
    color: var(--gray-text-color);
    font-weight: 300;
    display: flex;
    gap: 5px;
}

.file-img {
    background-image: url("/local/templates/csio-dpo/svg/file.svg");
    background-color: #F3F3F3;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 10px;
    width: 65px;
    height: 60px;
}

.file-img-red {
    background-image: url("/local/templates/csio-dpo/svg/file-red.svg");
    background-color: #F3F3F3;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 10px;
}

.file-img-word,
.file-img-pdf,
.file-img-empty {
    background-image: url("/local/templates/csio-dpo/svg/file.svg");
    background-color: #F3F3F3;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 64px;
    height: 75px;
    min-width: 64px;
}

.file-img-word {
    background-image: url("/local/templates/csio-dpo/svg/file-word.svg");
}

.file-img-pdf {
    background-image: url("/local/templates/csio-dpo/svg/file-pdf.svg");
}

.file-button {
    display: flex;
    gap: 18px;
    margin-top: 13px;
}

.file-button > div {
    display: flex;
    gap: 18px;
}

.file-button a {
    display: flex;
    align-items: center;
    font-weight: 300;
    text-decoration: underline;
    cursor: pointer;
}

span.file-download {
    background-image: url("/local/templates/csio-dpo/svg/download-file-o.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: block;
    width: 26px;
    height: 24px;
    margin-right: 2px;
}

span.file-open {
    background-image: url("/local/templates/csio-dpo/svg/open-file-o.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: block;
    width: 26px;
    height: 24px;
    margin-right: 2px;
}

span.i-circle {
    background-image: url("/local/templates/csio-dpo/svg/i-circle.svg");
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    width: 20px;
    height: 20px;
}

.gratitude-block .file-block {



}

.news-detail a,
.info-block a {
    color: var(--orange-text-color);
}

.block-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
}

.news-global-block .show-all {
    display: none;
}

.block-header .show-all {
    display: flex;
    align-items: center;
    color: var(--orange-text-color);
    font-weight: 500;
    gap: 10px;
}

.block-header .show-all:hover img {
    animation: moveArrow 1s linear;
}

.button-rating-block{
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.rating-block{
    display: flex;
    flex-direction: column;
    cursor: pointer;
    justify-content: center;
    align-items: center;
}

.current-rating{
    font-size: 22px;
    font-weight: 500;
    margin-right: 18px;
}

.rating-description{
    color: var(--gray4-text-color);
    font-size: 16px;
}

.rating,
.rating-stars {
    display: flex;
    justify-content: center;
    align-items: baseline;
    height: min-content;
    cursor: pointer;
}

.star-block{
    padding: 0 3px;
}
span.star {
    height: 17px;
    width: 18px;
    min-height: 17px;
    min-width: 18px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
}

span.star.star-full,
span.star.star-empty.active {
    background-image: url('/local/templates/csio-dpo/svg/star-fill.svg');
}

span.star.star-empty {
    background-image: url('/local/templates/csio-dpo/svg/star.svg');
}

.feedback.rating-stars:hover span.star {
    background-image: url('/local/templates/csio-dpo/svg/star-fill.svg');
    filter: none;
}

div.star-block.feedback[data-vote='1']:hover ~ div.star-block[data-vote='2'] span,
div.star-block.feedback[data-vote='1']:hover ~ div.star-block[data-vote='3'] span,
div.star-block.feedback[data-vote='1']:hover ~ div.star-block[data-vote='4'] span,
div.star-block.feedback[data-vote='1']:hover ~ div.star-block[data-vote='5'] span,
div.star-block.feedback[data-vote='2']:hover ~ div.star-block[data-vote='3'] span,
div.star-block.feedback[data-vote='2']:hover ~ div.star-block[data-vote='4'] span,
div.star-block.feedback[data-vote='2']:hover ~ div.star-block[data-vote='5'] span,
div.star-block.feedback[data-vote='3']:hover ~ div.star-block[data-vote='4'] span,
div.star-block.feedback[data-vote='3']:hover ~ div.star-block[data-vote='5'] span,
div.star-block.feedback[data-vote='4']:hover ~ div.star-block[data-vote='5'] span {
    background-image: url('/local/templates/csio-dpo/svg/star.svg');
}

span.star-background {
    min-width: 0;
    width: 10px;
    background-size: cover;
    position: absolute;
    top: 0;
}

.background span.star,
.rated span.star:not(.star-empty) {
    filter: none;
}

@keyframes moveArrow {
    0% {
        translate: 0; /* Начальная позиция */
    }
    50% {
        translate: -10px; /* Перемещение вправо на 50px */
    }
    100% {
        translate: 0; /* Возврат в исходную позицию */
    }
}

.cookie-agreement {
    position: fixed;
    background-color: white;
    bottom: 0;
    height: 52px;
    display: flex;
    padding: 10px 20px;
    align-items: center;
    z-index: 1000;
    box-shadow: 0 0 4px 0 #00000040;
}

.cookie-img {
    height: 32px;
}

.cookie-text {
    margin-left: 28px;
}

.cookie-text a {
    color: var(--orange-text-color);
}

.cookie-close {
    cursor: pointer;
    margin-left: 60px;
    height: 24px;
}

.cookie-close img {
    transform: rotate(45deg);
}

@media (max-width: 780px) {
    html {
        height: unset;
    }

    body {
        overflow-x: hidden;
        height: 100%;
    }

    .o-button,
    .tr-button {
        height: 45px;
        padding: 0;
        font-size: 14px;
        width: 100%;
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    .only-mob {
        display: flex;
    }

    .only-desktop {
        display: none !important;
    }

    .container-wrap {
        padding: 0 20px;
    }

    .container-global {
        padding-bottom: 80px;
    }

    .left-menu {
        display: none;
    }

    .header-grid {
        grid-template-columns: 50px 1fr repeat(3, 50px);
        grid-template-rows: 30px 54px auto;
        grid-template-areas:
            "visually-block visually-block language-block language-block language-block"
            "logo logo personal search burger-menu"
            ". mob-menu-block mob-menu-block mob-menu-block mob-menu-block";
        align-items: center;
        z-index: 1001;
        background-color: white;
        position: relative;
    }

    .menu-bayan-title {
        height: 42px;
        padding: 10px 0 10px 10px;
    }

    .bayan-block {
        display: none;
    }

    .mob-menu-block {
        grid-area: mob-menu-block;
    }

    .mob-menu-block .menu-header {
        display: block;
        font-weight: 500;
        font-size: 30px;
    }

    .mob-menu-block .social-nets {
        margin: 10px 20px;
    }

    .mob-menu-block .social-nets .menu-header {
        font-size: 18px;
        color: var(--violet-text-color);
        display: flex;
        justify-content: space-between;
        height: 22px;
    }

    .mob-menu-block .social-button-blocks {
        margin-top: 10px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 1s;
    }

    .mob-menu-block .social-nets.open .social-button-blocks {
        max-height: 100px;
    }

    .course-category-menu .social-button-blocks,
    .left-menu-to-page-block .social-button-blocks {
        padding: 0 20px 20px 10px;
    }

    .menu-chevron {
        background-image: var(--chevrone-down);
        background-repeat: no-repeat;
        background-position: right;
        width: 40px;
        height: 100%;
        transform: scaleY(1);
        transition: transform 1s;
    }

    .mob-menu-block .open .menu-chevron {
        transform: scaleY(-1);
    }

    .top-line-block {
        height: 30px;
        gap: 0;
    }

    .visually-block {
        font-size: 12px;
        width: 100%;
    }

    .language-block {
        font-size: 14px;
        text-align: center;
        color: #5F5B60;
        justify-content: center;
        padding: 0;
    }

    .language-block .active {
        color: black;
    }

    .header-block {
        height: 54px;
        padding: 12px 19px 10px 19px;
        gap: 80px;
    }

    .logo-block {
        display: flex;
        text-decoration: none;
        color: black;
        align-items: start;
        gap: 10px;
        padding-left: 20px;
    }

    .logo-block img {
        width: auto;
        height: 32px;
    }

    .logo-block div {
        display: none;
    }

    .phonetime-block {
        display: none;
    }

    .phonetime-block .phone {
        font-size: 24px;
        text-wrap: nowrap;
    }

    .phonetime-block .time {
        font-size: 16px;
        display: flex;
        gap: 8px;
    }

    .phonetime-block .time img {
        width: 20px;
    }

    .lk-button {
        min-width: unset;
        width: 30px;
        height: 30px;
        border-radius: 0;
        margin-right: unset;
        background-size: 24px;
    }

    .lk-button img {
        width: 20px;
    }

    .menu-button {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .menu-button path {
        opacity: 1;
        transition: d 1s ease, opacity 1s ease;
    }

    .menu-button.active path.line-up {
        d: path("M2.5 2.5 L23.5 23.5"); /* Конечный путь при наведении */
    }

    .menu-button.active path.line-middle {
        opacity: 0; /* Конечный путь при наведении */
    }

    .menu-button.active path.line-down {
        d: path("M2.5 23.5 L23.5 2.5"); /* Конечный путь при наведении */
    }

    .social-nets {
        display: block;
    }

    .mob-menu-contacts {
        display: block;
        margin: 20px 20px;
        font-size: 14px;
    }

    .mob-menu-contacts div {
        display: flex;
        gap: 10px;
        margin: 10px 0;
    }

    .mob-menu-contacts span {
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        width: 20px;
    }

    .mob-menu-contacts .icon-address {
        background-image: url("/local/templates/csio-dpo/svg/map-pin-orange.svg");
    }

    .mob-menu-contacts .icon-email {
        background-image: url("/local/templates/csio-dpo/svg/mail-orange.svg");
    }

    .mob-menu-contacts .icon-phone {
        background-image: url("/local/templates/csio-dpo/svg/phone-orange.svg");
    }

    .mob-menu-block {
        position: relative;
    }

    .mob-move-menu {
        right: -100%;
        position: absolute;
        transition: right 1s;
        width: 100%;
        background: white;
        z-index: 1;
    }

    .mob-move-menu.on {
        right: 0;
    }

    .show-all.only-mob {
        margin-top: 20px;
    }

    .container {
        flex-direction: column;
        padding: 0;
        gap: 20px;
    }

    .popup,
    .popup-wrap {
        padding: 20px;
    }

    .page {
        overflow: hidden;
        margin-top: 20px;
    }

    .page svg {
        width: 20px;
    }

    .page h1 {
        font-size: 30px;
        line-height: 30px;
        margin-bottom: 20px
    }

    .content {
        background: white;
        padding: 20px;
    }

    .content table {
        width: 100%;
        display: block;
        overflow-y: scroll;
    }

    .content table,
    .content table td,
    .content table th {
        border: 1px solid #C7C7C7;
        border-collapse: collapse;
    }

    .content table td,
    .content table th {
        padding: 20px;
        font-size: 14px;
    }

    .content table th {
        font-weight: 500;
    }

    .news-global-block .show-all {
        display: block;
    }

    .news-global-block .block-header .show-all {
        display: none;
    }

    .table-wrapper {
        overflow-x: auto;
    }

    .footer-orange-block {
        padding: 40px 20px;
    }

    .contact-menu {
        order: 1;
    }

    .logo-social {
        order: 3;
    }

    .file-block {
        font-size: 16px;
    }

    .file-block .file-size,
    .file-block .file-type {
        font-size: 14px;
    }

    .file-img-word,
    .file-img-pdf,
    .file-img-empty {
        width: 43px;
        height: 50px;
        min-width: 43px;
    }

    .file-button {
        flex-direction: column;
        gap: 10px;
    }

    .file-button > div {
        display: flex;
        gap: 10px;
    }

    span.file-download,
    span.file-open {
        width: 18px;
        height: 17px;
    }

    span.i-circle {
        width: 15px;
        height: 15px;
        background-size: contain;
    }

    .footer-orange-block .first-row {
        flex-direction: column;
        gap: 30px;
    }

    .footer-address-block {
        order: 2;
        font-size: 14px;
    }

    .footer-subscribe-block {
        font-size: 18px;
    }

    .footer-map-buttons {
        order: 4;
    }

    .footer-orange-block .two-row {
        justify-content: start;
        grid-template-areas: 'customer-agreed'
                             'personal-data'
                             'company';
        gap: 20px;
        margin-top: 50px;
    }

    .company {
        flex-direction: column;
        gap: 20px;
    }

    .cookie-agreement {
        width: 316px;
        left: 0;
        height: unset;
        font-size: 14px;
    }

    .cookie-text {
        margin-left: 20px;
    }

    .cookie-close {
        margin-left: 10px;
    }
}