@font-face {
    font-family: PFDinTextCompPro-Light; /* Имя шрифта */
    src: url(/fonts/pfdintextcomppro-light.ttf); /* Путь к файлу со шрифтом */
}
@font-face {
    font-family: PFDinTextCompPro-Regular; /* Имя шрифта */
    src: url(/fonts/pfdintextcomppro-regular.ttf); /* Путь к файлу со шрифтом */
}
@font-face {
    font-family: PragmaticaC-Bold; /* Имя шрифта */
    src: url(/fonts/pragmaticac-bold.otf); /* Путь к файлу со шрифтом */
}

.scheme{
    touch-action:none;
}
.jconfirm {
    touch-action: none;
}

.region:hover {
    fill: #d6850b;
    opacity: 1.0;
}
.traffic-title{
  font-size:30px;
  text-align: center;
  font-family: 'PFDinTextCompPro-Light';  
}
.traffic:hover {
    fill: #d6850b;
    opacity: 1.0;
}
.dtp:hover {
    fill: #d6850b;
    opacity: 1.0;
}

.m10-app {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: min-content 1fr;
    grid-gap: 0 5px;
    width: 550px;
    height: 579px;
    margin: auto;
    font-family: 'Roboto', sans-serif;
}

    .m10-app ul {
        margin: 0;
        padding: 0;
    }

        .m10-app ul li {
            list-style: none;
        }

    .m10-app img {
        width: 100%;
        object-fit: cover;
    }
.m10-app iframe {
    padding-top: 1px;
}

    .m10-app header {
        width: 100%;
        grid-column: 1 / 3;
        grid-row: 1 / 2;
    }


    .m10-app aside {
        display: grid;
        grid-template-rows: repeat(2, 244px);
        grid-gap: 5px;
    }
.m10-app aside .bot-image {
    height: 239px !important;
}

        .m10-app aside iframe,
        .m10-app aside img {
            height: 100%;
        }

.m7-app {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: min-content 1fr;
    grid-gap: 0 5px;
    width: 550px;
    height: 579px;
    margin:auto;
    font-family: 'Roboto', sans-serif;
}

    .m7-app ul {
        margin: 0;
        padding: 0;
    }

        .m7-app ul li {
            list-style: none;
        }

    .m7-app img {
        width: 100%;
        object-fit: cover;
    }

    .m7-app header {
        width: 100%;
        grid-column: 1 / 3;
        grid-row: 1 / 2;
    }

    .m7-app iframe {
        padding-top: 3px;
    }

    .m7-app aside {
        display: grid;
        grid-template-rows: repeat(2, 244px);
        grid-gap: 5px;
    }

        .m7-app aside iframe,
        .m7-app aside img {
            height: 100%;
        }
.m7-app aside .bot-image {
    height: 242px!important;
}

.m12-app {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: min-content 1fr;
    grid-gap: 0 5px;
    width: 676px;
    height: 548px;
    font-family: 'Roboto', sans-serif;
}

    .m12-app ul {
        margin: 0;
        padding: 0;
    }

        .m12-app ul li {
            list-style: none;
        }

    .m12-app img {
        width: 100%;
        object-fit: cover;
    }

    .m12-app header {
        width: 100%;
        grid-column: 1 / 3;
        grid-row: 1 / 2;
    }
    .m12-app iframe{
        padding-top:3px;
        padding-right:13px;
    }

    .m12-app aside:first-child {
        grid-row: 2 / 3;
        grid-column: 1 / 2;
    }

    .m12-app aside:last-child {
        display: grid;
        grid-template-rows: repeat(2, 246px);
        grid-gap: 5px;
        grid-row: 2 / 3;
        grid-column: 2 / 3;
    }

        .m12-app aside:last-child iframe,
        .m12-app aside:last-child img {
            height: 100%;
        }

        .m12-app aside:last-child iframe {
        }

.traffic-app {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: min-content 1fr;
    grid-gap: 0 5px;
    width: 695px;
    height: 255px;
    font-family: 'Roboto', sans-serif;
}

    .traffic-app ul {
        margin: 0;
        padding: 0;
    }

        .traffic-app ul li {
            list-style: none;
        }

    .traffic-app img {
        width: 100%;
        object-fit: cover;
    }

    .traffic-app header {
        width: 100%;
        grid-column: 1 / 3;
        grid-row: 1 / 2;
    }

    .traffic-app iframe {
        padding-top: 3px;
    }

    .traffic-app aside:first-child {
        grid-row: 2 / 2;
        grid-column: 1 / 2;
    }

    .traffic-app aside:last-child {
        display: grid;
        grid-gap: 5px;
        grid-row: 2 / 2;
        grid-column: 2 / 3;
    }

        .traffic-app aside:last-child iframe,
        .traffic-app aside:last-child img {
            height: 95%;
        }

        .traffic-app aside:last-child iframe {
        }