body {
    font-family: 'Roboto-Thin';
    font-style: normal;
    font-weight: bold;
    background: #e8e8e8;
}

p {
    text-align: center;
}

#date {
    border: 0;
    width: 166px;
    /*background: rgba(255, 255, 255, 0);*/
}

#date:focus {
    outline: none;
    /*color: rgba(255, 255, 255, 0);*/
}

@font-face {
    font-family: 'Roboto';
    /*src: url(../fonts/Roboto/Roboto-Medium.ttf); /* Путь к файлу со шрифтом */
    /*src: url(../fonts/Roboto/Roboto-Light.ttf); /* Путь к файлу со шрифтом */
    /*src: url(../fonts/Roboto/Roboto-Bold.ttf); /* Путь к файлу со шрифтом */
    src: url(../fonts/Roboto/Roboto-Regular.ttf); /* Путь к файлу со шрифтом */
    /*src: url(../fonts/Roboto/Roboto-Thin.ttf); /* Путь к файлу со шрифтом */
}

@font-face {
    font-family: 'Roboto-Thin';
    src: url(../fonts/Roboto/Roboto-Thin.ttf); /* Путь к файлу со шрифтом */
}

@font-face {
    font-family: 'Roboto-Medium';
    src: url(../fonts/Roboto/Roboto-Medium.ttf); /* Путь к файлу со шрифтом */
}

@font-face {
    font-family: 'Roboto-Bold';
    src: url(../fonts/Roboto/Roboto-Bold.ttf); /* Путь к файлу со шрифтом */
}

.substrate {
    /*zoom: 0.5;*/
    position: relative;
    font-family: 'Roboto';
    font-weight: normal;
    width: 640px;
    left: 18%;
    /*min-height: 640px;*/
    /*border: 1px solid;*/
    background: #ffffff;
}

.top {
    position: relative;
    width: 640px;
    height: 135px;

    /*background: #ff9a19;*/
}


.date {
    position: absolute;
    height: 38px;
    left: 19px;
    top: 14px;
}

.inputDate {
    position: relative;
    width: 165px;
    font-weight: normal;
    font-size: 31px;
    line-height: 37.3px;
    /* identical to box height */
    float: left;
    color: rgba(66, 88, 116, 100);
}

.inputDate:hover {
    color: #747b80;
}

.dateIco {
    position: absolute;
    float: left;
    width: calc(80px / 3);
    height: calc(115px / 3);
    opacity: 0.2;
    background-image: url("/images/monthly-calendar-svgrepo-com.svg");
    background-size: 23px;
    background-position: right;
    background-repeat: no-repeat;
}

.dateIco:hover {
    opacity: 0.8;
}

.telegaLink {
    /* https://t.me/VazhnyProcent */
    position: absolute;
    width: 165px;
    height: 16px;
    left: 238px;
    top: 24px;
}

.link {
    font-weight: 400;
    font-size: 13.3px;
    line-height: 16px;
    /* identical to box height */
    text-align: center;
    color: rgba(66, 88, 116, 0.4);
}

.link:hover {
    color: rgba(66, 88, 116, 0.9);
}

.cities {
    position: relative;
    /*background: #4eb5e6;*/
    /*
    left: calc(88px / 3);
    top: calc(490px / 3);
    */
    /*background: black;*/
}

.citi {
    position: relative;
    width: 640px;
    height: 59px;
    margin-top: 8px;
    margin-left: 29px;
    /*background: black;*/
}

.count {
    position: absolute;
    width: 85.6px;
    height: 27.3px;
    /*left: calc(88px / 3);
    top: calc(494px / 3);*/

    font-weight: bold;
    font-size: calc(70px / 3);
    line-height: calc(82px / 3);
    /* identical to box height */
    text-transform: uppercase;
}

.percent {
    position: absolute;
    width: 10px;
    height: 16px;
    margin-left: 90px;
    top: -3px;

    font-weight: bold;
    font-size: calc(40px / 3);
    line-height: calc(47px / 3);
    /* identical to box height */

    text-transform: uppercase;
}

.finish {
    position: relative;
    width: 640px;
    margin-left: 29px;
    /*height: 100px;*/
}

.finishLayer {
    /* Rectangle 2 */
    /*display: inline-block;*/
    position: absolute;
    width: 573px;

    box-sizing: border-box;
    padding: calc(60px / 3);

    /*height: auto;*/
    /*height: calc(277px / 3);*/
    /*    left: calc(60px / 3);
        top: calc(396px / 3);*/

    background: #FFFFFF;
    border: 1px solid #F5F5F5;
    box-shadow: 0px calc(15px / 3) calc(30px / 3) #F5F5F5;
    border-radius: calc(50px / 3);
}

.emblem {
    background-image: none;
    background-position: 50% 50%;
    background-size: calc(160px / 3);
    background-repeat: no-repeat;
    width: calc(220px / 3);
    height: calc(230px / 3);
}

.embl {
    position: relative;
    margin-left: calc(80px / 3);

    /*width: calc(220px / 3);*/
    height: calc(300px / 3);
    left: calc(20px / 3);
    top: calc(-10px / 3);
    float: left;
    /*background: #FFEC00;*/
}

.embl:hover {
    background: rgba(230, 230, 230, 0.2);
    border-radius: 5px;
}

.emblemName {
    /*background: #009246;*/
    text-transform: uppercase;
    position: absolute;
    margin-left: calc(10px / 3);
    /*width: calc(160px / 3);*/
    /*font-size: calc(30px / 3);*/
    font-size: 0.6em;
}

.emb {
    float: left;
    position: relative;
    /*background: #009246;*/
    height: calc(260px / 3);
}

.finishEl {
    /* Ellipse 1 */

    position: relative;
    box-sizing: border-box;
    float: left;
    width: calc(150px / 3);
    height: calc(150px / 3);
    /*left: calc(111px / 3);
    top: calc(531px / 3);*/
    border-radius: 50%;
    /*background: #FFFFFF;*/
    border: calc(10px / 3) solid #02C0DB;
}

.finish100 {
    position: absolute;
    width: calc(99px / 3);
    height: calc(47px / 3);
    left: calc(12px / 3);
    top: calc(42px / 3);

    font-family: 'Roboto';
    font-style: normal;
    font-weight: calc(600 / 3);
    font-size: calc(45px / 3);
    line-height: calc(47px / 3);
    /* identical to box height */

    text-align: center;
    text-transform: uppercase;

    color: #425874;
}

.finishControl {
    /* Под контролем */
    float: left;
    /*background: #009246;*/
    position: relative;
    width: calc(350px / 3);
    height: calc(180px / 3);
    margin-left: calc(30px / 3);
    /*left: calc(288px / 3);*/
    top: calc(25px / 3);

    font-family: 'Roboto';
    font-style: normal;
    font-size: calc(40px / 3);
    line-height: calc(47px / 3);
    /* identical to box height */

    text-transform: uppercase;

    color: #425874;
}

.title {
    /* Территория областей Украины, под контролем сил РФ и ЛДНР */
    position: absolute;
    width: 428px;
    height: 55px;
    left: 103px;
    top: 71px;

    font-weight: bold;
    font-size: 23px;
    line-height: 27px;
    text-align: center;
    text-transform: uppercase;
    /*background: #4eb5e6;*/
    color: #425874;
}

.str0 {
    /* день боевых действий */

    position: absolute;
    width: calc(278px / 3);
    height: calc(84px / 3);
    left: calc(1590px / 3);
    top: calc(55px / 3);

    font-weight: calc(300 / 3);
    font-size: calc(40px / 3);
    line-height: calc(42px / 3);
    /* or 105% */

    text-align: right;
    text-transform: uppercase;

    color: #425874;
}

.day {
    /* 106 */
    position: absolute;
    width: calc(169px / 3);
    height: calc(117px / 3);
    left: calc(1385px / 3);
    top: calc(39px / 3);

    font-weight: bold;
    font-size: calc(100px / 3);
    line-height: calc(117px / 3);
    text-align: right;
    text-transform: uppercase;

    color: #425874;
}

.planeY {
    /*background: #cc149e;*/
    /* Линейки */
    position: absolute;
    width: 640px;
    left: 29.3px;
    margin-top: 43px;
}

.Y {
    width: 0;
    height: 68px;
    margin-left: 55.1px;
    float: left;
    border: 1px solid rgba(108, 108, 108, 0.07);
}

.planeX {
    /*background: #3e4d26;*/
    position: relative;
    width: 640px;
    height: 10px;
    /*width: 100%;*/

    margin-top: 20px;
    padding-bottom: 20px;

}

.X {
    position: relative;
    width: calc(23px / 3);
    height: calc(47px / 3);
    font-size: calc(40px / 3);
    line-height: calc(47px / 3);
    /* identical to box height */

    text-align: center;
    text-transform: uppercase;
    margin-left: calc(146px / 3);
    float: left;
    color: rgba(108, 108, 108, 0.6);
}


/*** флаги  */


.groupBanner {
    position: absolute;
    width: calc(1720px / 3);
    height: calc(95px / 3);
    top: calc(82px / 3);
    filter: drop-shadow(0px calc(4px / 3) calc(4px / 3) #F5F5F5);
}


.countBig {
    /* 17, 5794 */
    /*background: #4eb5e6;*/
    position: absolute;
    width: calc(250px / 3);
    top: 100px;
    left: 58px;

    font-style: normal;
    /*font-weight: 900;*/
    font-size: 45px;
    /* or 238px */

    text-align: left;
    text-transform: uppercase;

}

.percentBig {
    position: absolute;
    top: 82px;
    left: 130px;

    /*font-family: 'Inter';*/
    font-style: normal;
    font-weight: 900;
    font-size: 155px;
    /*line-height: 484px;*/
    /* identical to box height */
    text-transform: uppercase;
    /*color: rgba(0, 145, 61, 0.2);*/

}


.BigGroupBanner {
    background: #5cc4ef;
    position: absolute;
    width: calc(1920px / 3);
    height: calc(252px / 3);
    top: calc(850px / 3);
    filter: drop-shadow(0px calc(4px / 3) calc(4px / 3) #F5F5F5);
}

.tricolor {
    position: absolute;
    width: calc(1px / 3);
    /*height: calc(95px / 3);*/
}

.qrcode {
    position: relative;
    /*background-position: right;*/
    background-repeat: no-repeat;

    background-image: url('/images/qr.svg');
    background-size: 150px;
    margin-top: 20px;
    /*top: 20px;*/
    /*right: 0px;*/
    width: 150px;
    float: right;
    height: 150px;
}

.telegramLogo {
    position: absolute;
    width: 43px;
    height: 43px;
    background-image: url('/images/telegramLogo.svg');
    background-repeat: no-repeat;
    background-size: 43px;
    top: 53px;
    right: 53px;
    border-radius: 50%;
}

.telegramLogo:hover {
    box-shadow: 1px 1px 10px #101010;
}

.text1 {

    font-style: normal;
    position: absolute;
    width: 600px;
    font-size: 17px;
    /*line-height: 18px;*/
    top: 400px;
    left: 20px;
    color: #000000;
}

.textAlign {
    text-align: left;
}

.titleBig {
    /* Контролируется силами РФ и ЛДНР */
    position: absolute;
    /*background: #4eb5e6;*/
    top: 110px;
    left: 258px;
    width: 350px;
    font-family: 'Roboto-Thin';
    font-style: normal;
    font-weight: 500;
    font-size: 35px;
    line-height: 35px;
    text-transform: uppercase;
    color: #425874;
}

.ltr1 {
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.25);
}

.ltr2 {
    background: #005BBB;
}

.ltr3 {
    background: #DA231D;
}

.triSmall {
    height: calc(31.67px / 3);
}

.triBig {
    height: calc(84px / 3);
}

/*.ltr1, .ltr2, .ltr3 {
    !*width: calc(1px / 3);*!
    height: calc(31.67px / 3);
    !*top: calc(31.67px * 2 / 3);*!
}*/

.ukf {
    position: absolute;
    width: calc(1720px / 3);
}

.uln1 {
    background: #02C0DB;
}

.uln2 {
    top: calc(47.5px / 3);
    background: #FFEC00;
}

.ukfBigPx {
    height: calc(126px / 3);
}

.ukfSmal {
    height: 16px;
}

/*.ukf, .uln2, .uln1 {
    height: calc(47.5px / 3);
}*/


/*** флаги  */


.name {
    position: absolute;
    width: calc(650px / 3);
    height: calc(59px / 3);
    left: calc(313px / 3);
    top: calc(15px / 3);

    /*font-weight: calc(500 / 3);*/
    font-size: calc(50px / 3);
    line-height: calc(59px / 3);
    /* identical to box height */

    text-transform: uppercase;
    color: #425874;
}


.colorGreen {
    color: #009246;
}

.colorRed {
    color: #DA231D;
}

.colorBlack {
    color: rgb(67, 89, 117);
    /*color: #000000;*/
}

.bold {
    font-weight: bold;
}