:root {
    --glow-color: green;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.main-block {
    position: relative;
    width: 1000px;
    height: 800px;
    /*  margin: 0 0 -100px -100px;*/
    /*border: rgb(255, 145, 1) solid 3px;*/
    padding: 0;
}

    .main-block > * {
        position: absolute;
        left: 0;
        top: 0px;
        width: inherit;
        height: inherit;
    }

.back {
    z-index: 1;
    background: url(../img/back.svg);
    background-size: 100%;
    background-position: -2px;
    height: 800px;
}

.main-block > canvas {
    z-index: 2;
    /*border: 1px solid red;*/
}

.el {
    z-index: 3;
    /*border: 1px solid blue;*/
}

body {
    /*overflow-y:hidden;*/
}

.num-but {
    width: 26px;
    position: absolute;
    bottom: 50%;
    left: 479px;
    padding-bottom: 25px;
    transform-origin: 50% 100% 0;
    /*background: linear-gradient(45deg, #87b354 33%, #63a156 66%, #0f4231);*/
    /*-webkit-background-clip: text;*/
    /*-webkit-text-fill-color: transparent;*/
    color: gray;
}

    .num-but > .active {
        /* margin-right: 1.66px; */
        color: #3a95cd;
        padding: 2px 5px;
        background: #fff;
        border-radius: 50%;
        border: 1px solid #3a95cd;
    }

.num-but2 {
    transform: rotate(45deg)
}

.num-but3 {
    transform: rotate(90deg)
}

.num-but4 {
    transform: rotate(135deg)
}

.num-but5 {
    transform: rotate(180deg)
}

.num-but6 {
    transform: rotate(225deg)
}

.num-but7 {
    transform: rotate(270deg)
}

.num-but8 {
    transform: rotate(315deg)
}

.num-but > div {
    text-align: center;
    font-family: Arial;
    font-size: 15px;
    /* padding-bottom: 0.9px; */
    transition: all 0.1s;
}

#buttondiv {
    position: relative;
    z-index: 999;
}

    #buttondiv button, #save {
        width: 129px;
        height: 50px;
    }

.num-but > div:hover {
    /* margin-right: 1.66px; */
    cursor: pointer;
    font-size: 15px;
    color: #3a95cd;
    padding: 1px 1px;
    background: #fff;
    border-radius: 50%;
    border: 1px solid #3a95cd;
    /* color: #39FF14; */
}

.title-d {
    display: inline-block;
    position: absolute;
    text-transform: uppercase;
    font-family: AvertaCyrillicBold;
    color: #16492c;
    font-size: 17px;
}

.title-d1 {
    left: 380px;
    top: 40px;
}

.title-d2 {
    left: 740px;
    top: 150px;
}

.title-d3 {
    left: 840px;
    top: 375px;
    width: 200px;
}

.title-d4 {
    left: 740px;
    top: 620px;
}

.title-d5 {
    left: 439px;
    top: 740px;
}

.title-d6 {
    left: 10px;
    top: 620px;
}

.title-d7 {
    left: 10px;
    top: 385px;
}

.title-d8 {
    top: 150px;
    left: 70px;
}

.t-error {
    color: red;
}

#screen {
    display: none;
}

#circle {
    background: lightblue;
    border-radius: 50%;
    width: 50px;
    height: 50px;
}

.emoji-align {
    margin-inline-start: -11.5px;
    margin-bottom: 3px;
}

.box-grid {
    display: grid;
    grid-template-columns: auto 1000px auto;
    /*  grid-template-columns: 25% 50% 25%;*/
    grid-column-gap: 20px;
    /* margin: -210px auto 0 auto;*/
    width: 90%;
    /* margin: auto;*/
    /* border: 3px solid red;*/
    /* position:absolute;*/
    /* margin-top:200px;*/
    box-sizing: border-box;
    margin-top: 600px;
}



.left-grid {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
}

.right-grid {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: -10px;
}

.box {
    margin-bottom: 25px;
}

.box-top-span {
    background: #ebefef;
    padding: 5px 20px;
    display: inline-block;
    border-radius: 5px 5px 0 0;
    font-size: 15px;
    font-weight: bold;
}

.box-bottom {
    border: 2.5px solid #ebefef;
    width: 280px;
    border-radius: 7px;
    padding: 2.5px;
    min-height: 58px;
}

.myGlower {
    background-color: #2E8B57;
    border-color: white;
    border: 2.5px solid white;
    -webkit-transition: border 0.1s linear, box-shadow 0.1s linear;
    -moz-transition: border 0.1s linear, box-shadow 0.1s linear;
    transition: border 0.1s linear, box-shadow 0.1s linear;
    border-color: 1px solid white;
    box-shadow: 0 0 11px green;
}

.myGlowertop {
    background-color: white;
    border-color: white;
    border: 0.2px solid white;
    -webkit-transition: border 0.1s linear, box-shadow 0.1s linear;
    -moz-transition: border 0.1s linear, box-shadow 0.1s linear;
    transition: border 0.1s linear, box-shadow 0.1s linear;
    border-color: 1px solid white;
    box-shadow: 0 0 11px var(--glow-color);
}

.myGlowergray {
    background-color: #2E8B57;
    border-color: white;
    border: 2.5px solid white;
    -webkit-transition: border 0.1s linear, box-shadow 0.1s linear;
    -moz-transition: border 0.1s linear, box-shadow 0.1s linear;
    transition: border 0.1s linear, box-shadow 0.1s linear;
    border-color: 1px solid white;
    box-shadow: 0 0 11px gray;
}

.myGlowertopgray {
    background-color: white;
    border-color: white;
    border: 0.2px solid white;
    -webkit-transition: border 0.1s linear, box-shadow 0.1s linear;
    -moz-transition: border 0.1s linear, box-shadow 0.1s linear;
    transition: border 0.1s linear, box-shadow 0.1s linear;
    border-color: 1px solid white;
    box-shadow: 0 0 11px gray;
}

.green_select_bottom {
    background-color: rgb(34, 133, 10);
    border: 2.5px solid #ebefef;
    -webkit-transition: border 0.1s linear, box-shadow 0.1s linear;
    -moz-transition: border 0.1s linear, box-shadow 0.1s linear;
    transition: border 0.1s linear, box-shadow 0.1s linear;
}

.select_top {
    background: #ebefef;
    -webkit-transition: border 0.1s linear, box-shadow 0.1s linear;
    -moz-transition: border 0.1s linear, box-shadow 0.1s linear;
    transition: border 0.1s linear, box-shadow 0.1s linear;
    border-color: 1px solid white;
    /* box-shadow: 0 0 11px var(--glow-color); */
}

.orange_select_bottom {
    background-color: rgb(255, 145, 1);
    border: 2.5px solid #ebefef;
    -webkit-transition: border 0.1s linear, box-shadow 0.1s linear;
    -moz-transition: border 0.1s linear, box-shadow 0.1s linear;
    transition: border 0.1s linear, box-shadow 0.1s linear;
}

.red_select_bottom {
    background-color: rgb(238, 18, 66);
    border: 2.5px solid #ebefef;
    -webkit-transition: border 0.1s linear, box-shadow 0.1s linear;
    -moz-transition: border 0.1s linear, box-shadow 0.1s linear;
    transition: border 0.1s linear, box-shadow 0.1s linear;
    border-color: 1px solid white;
}

.myGlowergreen {
    background-color: rgb(34, 133, 10);
    border-color: white;
    border: 2.5px solid white;
    -webkit-transition: border 0.1s linear, box-shadow 0.1s linear;
    -moz-transition: border 0.1s linear, box-shadow 0.1s linear;
    transition: border 0.1s linear, box-shadow 0.1s linear;
    border-color: 1px solid white;
    box-shadow: 0 0 11px green;
}

.myGlowertopgreen {
    background-color: white;
    border-color: white;
    border: 0.2px solid white;
    -webkit-transition: border 0.1s linear, box-shadow 0.1s linear;
    -moz-transition: border 0.1s linear, box-shadow 0.1s linear;
    transition: border 0.1s linear, box-shadow 0.1s linear;
    border-color: 1px solid white;
    box-shadow: 0 0 11px var(--glow-color);
}

.myGlowerorange {
    background-color: rgb(255, 145, 1);
    border-color: white;
    border: 2.5px solid white;
    -webkit-transition: border 0.1s linear, box-shadow 0.1s linear;
    -moz-transition: border 0.1s linear, box-shadow 0.1s linear;
    transition: border 0.1s linear, box-shadow 0.1s linear;
    border-color: 1px solid white;
    box-shadow: 0 0 11px orange;
}

.myGlowertoporange {
    background-color: white;
    border-color: white;
    border: 0.2px solid white;
    -webkit-transition: border 0.1s linear, box-shadow 0.1s linear;
    -moz-transition: border 0.1s linear, box-shadow 0.1s linear;
    transition: border 0.1s linear, box-shadow 0.1s linear;
    border-color: 1px solid white;
    box-shadow: 0 0 11px orange;
}

.myGlowerred {
    background-color: rgb(238, 18, 66);
    border-color: white;
    border: 2.5px solid white;
    -webkit-transition: border 0.1s linear, box-shadow 0.1s linear;
    -moz-transition: border 0.1s linear, box-shadow 0.1s linear;
    transition: border 0.1s linear, box-shadow 0.1s linear;
    border-color: 1px solid white;
    box-shadow: 0 0 11px red;
}

.myGlowertopred {
    background-color: white;
    border-color: white;
    border: 0.2px solid white;
    -webkit-transition: border 0.1s linear, box-shadow 0.1s linear;
    -moz-transition: border 0.1s linear, box-shadow 0.1s linear;
    transition: border 0.1s linear, box-shadow 0.1s linear;
    border-color: 1px solid white;
    box-shadow: 0 0 11px red;
}

.botttom-first-span {
    display: block;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 2px;
}

.botttom-second-span {
    display: block;
    text-transform: uppercase;
    font-size: 15px;
}



.box.active .box-bottom {
    background: #2e9f70;
    border-color: #fff;
    box-shadow: 0px 4px 12px rgba(46, 159, 112, 0.5);
    position: relative;
    bottom: 0px;
}

.box.active .box-top-span {
    background: #fff;
    box-shadow: 0px 0px 12px rgba(46, 159, 112, 0.5);
}

.box.active .botttom-first-span,
.box.active .botttom-second-span {
    color: #fff;
}

.emoji-center-top {
    font-size: 43px !important;
    position: relative;
    left: -16px;
    top: 7px;
}

.canvas-circle {
    width: 1000px;
    height: 650px;
}


#maindiv {
    padding-top: 80px;
    zoom: 75%;
}

#buttondiv {    
    position: absolute;
    margin-left: 68%;
    margin-top: -5%;
}
#imgdiv {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
#tblGrid {
    position: absolute;
    left: 0;
}
#tdLeft {
    float: left;
    margin-left: 75%;
    margin-top: 20%;
    zoom: 100%;
}
#tdRight {
    float: right;
    margin-right: 75%;
    zoom: 100%;
}


/********* media quary *******/
@media (max-width:1820px) {
    .messagebox1 {
        position: relative;
        top: -40px;
    }

    .left-grid {
        position: relative;
        right: -70px;
    }

    .right-grid {
        position: relative;
        left: -70px;
    }
}

@media (max-width:1700px) {
    /*.box-bottom
{
    width: 220px;
}*/
    .left-grid {
        position: relative;
        right: -90px;
    }

    .right-grid {
        position: relative;
        left: -90px;
    }

    .top-header img {
        width: 400px;
    }
    /*.box-grid {
        margin: -290px auto 0 auto;
    }*/
}

@media (max-width:1600px) {
    .box-grid {
        grid-template-columns: 180px 1000px 180px;
    }

    .top-header img {
        width: 400px;
        top: -24px;
    }
}

@media (max-width:1550px) {
    .box-grid {
        grid-template-columns: 150px 1000px 150px;
    }

    .top-header img {
        width: 400px;
    }

    .box-bottom {
        /*BWI- width: 250px;*/
        width: 350px;
    }

    .box-grid {
        margin: -320px auto 0 auto;
    }
}

@media (max-width:1450px) {
    .box-grid {
        grid-template-columns: 120px 1000px 120px;
    }

    .top-header img {
        width: 400px;
        top: -28px;
    }

    .left-grid {
        right: -50px;
    }

    .right-grid {
        left: -50px;
    }
}

@media (max-width:1400px) {
    .box-grid {
        grid-template-columns: 90px 1000px 90px;
    }

    .top-header img {
        width: 400px;
        top: -30px;
    }
    /*.top-header {
        margin-top: 25px;
    }*/
}

@media (max-width:1350px) {
    .box-grid {
        grid-template-columns: 65px 1000px 65px;
    }
}

@media (max-width:1200px) {
    #maindiv {
        padding-top: 60px
    }

    p strong {
        font-size: 14px
    }
}



@media print {
    #buttondiv {
        display: none;
    }
}