@font-face {
    font-family: "InformaPro-Light";
    src: url("../fonts/InformaPro/InformaPro-Light.eot");
    src: url("../fonts/InformaPro/InformaPro-Light.eot?#iefix") format("embedded-opentype"),
    url("../fonts/InformaPro/InformaPro-Light.woff") format("woff"),
    url("../fonts/InformaPro/InformaPro-Light.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: "InformaPro-Normal";
    src: url("../fonts/InformaPro/InformaPro-Normal.eot");
    src: url("../fonts/InformaPro/InformaPro-Normal.eot?#iefix") format("embedded-opentype"),
    url("../fonts/InformaPro/InformaPro-Normal.woff") format("woff"),
    url("../fonts/InformaPro/InformaPro-Normal.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: "InformaPro-Medium";
    src: url("../fonts/InformaPro/InformaPro-Medium.eot");
    src: url("../fonts/InformaPro/InformaPro-Medium.eot?#iefix") format("embedded-opentype"),
    url("../fonts/InformaPro/InformaPro-Medium.woff") format("woff"),
    url("../fonts/InformaPro/InformaPro-Medium.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: "InformaPro-Bold";
    src: url("../fonts/InformaPro/InformaPro-Bold.eot");
    src: url("../fonts/InformaPro/InformaPro-Bold.eot?#iefix") format("embedded-opentype"),
    url("../fonts/InformaPro/InformaPro-Bold.woff") format("woff"),
    url("../fonts/InformaPro/InformaPro-Bold.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
    /*user-select: none;*/
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: var(--color3);
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: var(--color3);
    opacity: 1;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: var(--color3);
    opacity: 1;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--color3);
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--color3);
}

::placeholder { /* Most modern browsers support this now. */
    color: var(--color3);
}


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

:root {
    --color1: #f46354;
    --color2: #3498db;
    --color2-hover: #1688d4;
    --color3: #a1bacd;
    --color-light: #eaeef1;

    --color-text-light: #656a72;
    --color-text-dark: #2e3136;
}

html, body {
    height: 100%;
    background: var(--color-light);
    color: var(--color-text-light);
    font-family: "InformaPro-Normal";
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 1.5;
}

@media (min-width: 992px) {
    html, body {
        padding: 48px 0 0 0;
    }
}

h1, h2, h3, h4, h5 {
    margin: 0;
    padding: 0;
    font-weight: normal;
    font-family: "InformaPro-Bold";
    color: var(--color-text-dark);
    line-height: 120%;
}

h1 {
    font-size: 22px;
}

h2 {
    font-size: 20px;
    margin-top: 20px;
}

.h2_text {
    margin-top: 20px;
}

.h2_text a {
    color: var(--color2);
    text-decoration: underline;
}

.h2_text a:hover {
    text-decoration: none;
}

p {
    margin: 0 0 10px 0;
}

a {
    text-decoration: none;
}

.content-box {
    background-color: #fff;
    padding: 20px;
    border-radius: 20px;
    margin-top: 20px;
}

.content-box_mini {
    padding: 10px;
}

.breadcrumb {
    margin: 0 0 10px 0;
    font-size: 12px;
}

.breadcrumb li {
    list-style: none;
    display: inline-block;
}

.breadcrumb li a {
    color: var(--color-text-light);
    text-decoration: none;
}

.breadcrumb li a:hover,
.breadcrumb li.active {
    color: var(--color2);
}

.breadcrumb li:first-child::before {
    content: "";
    padding: 0;
}

.breadcrumb li::before {
    padding: 0 5px;
    color: var(--color-text-light);
    content: "›"; /* ← заменили "/" на стрелку */
}


main.blank {
    display: block;
}

main {
    display: grid;
    gap: 20px;
    padding: 0 10px;
    max-width: 1920px;
    margin: 20px auto 0 auto;
}

@media (min-width: 768px) {
    .breadcrumb {
        font-size: 14px;
    }

    h1 {
        font-size: 30px;
    }

    h2 {
        font-size: 26px;
    }

    .content-box {
        padding: 40px;
    }

    .content-box_mini {
        padding: 20px;
    }
}

@media (min-width: 992px) {
    main {
        grid-template-columns: 350px 1fr;
        padding: 10px 20px 0 20px;
    }
}

@media (min-width: 1200px) {
    main {
        gap: 30px;
    }
}

.btn {
    padding: 8px 20px;
    border-radius: 50px;
    border: 1px solid transparent;
    transition: .3s;
    cursor: pointer;
    display: block;
    text-align: center;
}

.btn-danger {
    color: #fff;
    background: var(--color1);
    border-color: var(--color1);
}

.btn-danger:hover {
    color: var(--color1);
    background-color: #fff;
}

.btn-primary, .btn-primary-outline:hover {
    color: #fff;
    background: var(--color2);
    border-color: var(--color2);
}

.btn-primary:hover {
    color: var(--color2);
    background: #fff;
}

.btn-lg {
    padding: 12px 40px;
}

.btn-sm {
    padding: 7px 20px;
    font-size: 14px;
}

.download-ico, .print-ico, .draw-ico, .copy-ico, .plus-ico {
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
}

.btn-danger.print-ico span, .btn-danger-outline.print-ico span {
    background-image: url(/img/svg/printer-sprite.svg);
}

.btn-danger.download-ico span {
    background-image: url(/img/svg/download-sprite.svg);
}

.btn-danger-outline.download-ico span {
    background-image: url(/img/svg/download-sprite.svg);
}

.btn-danger-outline.copy-ico span {
    background-image: url(/img/svg/copy-sprite.svg);
}

.btn-danger-outline.draw-ico span {
    background-image: url(/img/svg/brush-sprite.svg);
}

.btn-danger-outline.plus-ico span {
    background-image: url(/img/svg/plus-circle-sprite.svg);
}

.btn-danger.download-ico span,
.btn-danger-outline.download-ico span {
    background-repeat: no-repeat;
    width: 16px;
    height: 18px;
    transition: .3s;
    background-size: cover;
}

.btn-danger.print-ico span,
.btn-danger-outline.print-ico span,
.btn-danger-outline.draw-ico span,
.btn-danger-outline.plus-ico span,
.btn-danger-outline.copy-ico span {
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    transition: .3s;
    background-size: cover;
}


.btn-danger.print-ico span,
.btn-danger.download-ico span,
.btn-danger-outline.download-ico:hover span,
.btn-danger-outline.print-ico:hover span {
    background-position: 0 -18px;
}

.btn-danger-outline.draw-ico:hover span,
.btn-danger-outline.plus-ico:hover span,
.btn-danger-outline.copy-ico:hover span {
    background-position: 0 -20px;
}

.btn-danger-outline.print-ico span,
.btn-danger.download-ico:hover span,
.btn-danger.print-ico:hover span {
    background-position: 0 0;
}

.btn-primary-outline {
    color: var(--color2);
    background: #fff;
    border-color: var(--color2);
}

.btn-danger-outline {
    color: var(--color1);
    /*background: #fff;*/
    border-color: var(--color1);
}

.btn-danger-outline:hover {
    background-color: var(--color1);
    color: #fff;
}

/*autor*/
.autor {
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 20px;
}

.autor img {
    border-radius: 50%;
}

.autor__name {
    font-family: "InformaPro-Bold";
    font-size: 18px;
    color: #000;
}

.autor__info {
    color: var(--color3);
    font-size: 14px;
}

.login-box {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.login-box a {
    display: flex;
    gap: 10px;
    align-items: center;
    color: #fff;
    padding: 0 8px;
    font-size: 14px;
}

.login-box img {
    width: 30px;
    height: 30px;
    border-radius: 100%;
}

.left-side {
    display: none;
}

.content-grid {
    display: grid;
    gap: 20px;
}

#mobile-btn-menu {
    display: none;
}

@media (max-width: 991px) {

    .login-box {
        padding: 5px 0;
    }

    /*mobile-menu-btn*/
    body.open-mobile-menu {
        overflow-y: hidden;
    }

    #mobile-btn-menu {
        cursor: pointer;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        z-index: 920;
    }

    #mobile-btn-menu span {
        position: absolute;
        width: 28px;
        height: 3px;
        background-color: var(--color2);
        border-radius: 3px;
        transition: .5s;
    }

    #mobile-btn-menu span:nth-child(1) {
        transform: translateY(-10px);
    }

    #mobile-btn-menu span:nth-child(3) {
        transform: translateY(10px);
    }

    #mobile-btn-menu.active span:nth-child(2) {
        transform: translateX(50px);
    }

    #mobile-btn-menu.active span:nth-child(1) {
        transform: translateY(0) rotate(45deg);
    }

    #mobile-btn-menu.active span:nth-child(3) {
        transform: translateY(0) rotate(-45deg);
    }

    @media (min-width: 992px) {
        #mobile-btn-menu {
            display: none;
        }
    }
}

@media (min-width: 992px) {
    .left-side {
        display: block;
    }
}

@media (min-width: 1500px) {
    .content-grid {
        grid-template-columns: 1fr 270px;
        gap: 30px;
    }
}

@media (max-width: 991px) {
    .left-side.active {
        display: block;
        position: absolute;
        top: 156px;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: #fff;
        z-index: 900;
    }
}