@font-face {
    font-family: 'Montserrat';
    src: url(/tensor/fonts/Montserrat/Montserrat-Medium.ttf);
    font-weight: normal;
    font-style: normal;
}
.bold-text {
    font-weight: bold;
}

.input-nickname-block {
    z-index: 4;
    height: 100%;
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #e5e5e559;
}
.memory-game-over {
    object-fit: contain;
    transform: rotateY(90deg);
    -webkit-transform: rotateY(90deg);
    margin: 0px -10px;
    position: absolute;
    z-index: -1;
    background-image: url('/tensor/sabynews/interactivity/tensor_top/img/end_modal.png');
    width: 80%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: none;
}
.game-over-revert {
    z-index: 10;
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    transition: transform 1.5s;
    -webkit-transition: transform 1.5s;
}
.input-nickname-card {
    width: 70%;
    height: 48%;
    border-radius: 5px;
    border-color: transparent;
    background-color: transparent;
    background-image: url('/tensor/sabynews/interactivity/tensor_top/img/start_modal.png');
	background-repeat: no-repeat;
    background-size: 100% 100%;
    max-width: 414px;
    max-height: 293px;
    opacity: 1 !important;
    border-radius: 10px;
    position: relative;
}

.input-nickname-card input {
    width: 100%;
    height: 25px;
    margin-top: 7px;
    margin-bottom: 10px;
    border-color: #00B9FF;
    border-radius: 3px;
}
.d-none {
    display: none;
}
.input-nickname-card input:focus-visible {
    outline: none;
}
.play-button {
    width: 100%;
    text-align: right;
}

.end-button {
    position: absolute;
    bottom: 1%;
    right: 2%;
    font-weight: 400;
    font-family: 'Montserrat', Arial, sans-serif;
    user-select: none;
    display: none;
}

.warning-text {
    font-size: 12px !important;
    text-align: center;
    margin-bottom: 5px;
}
.nickname-text {
    display: flex;
    flex-direction: column;
    width: calc(63%);
    position: absolute;
    top: calc(29%);
    left: calc(17%);
}

.nickname-text span{
    font-size: 16px;
    font-weight: 400;
    font-family: 'Montserrat', Arial, sans-serif;
    user-select: none;
}
#play-button-span,
#end-button-span {
    font-size: 12px;
    cursor: pointer;
}

body{ 
    margin: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}
img.fone { 
    width: 100%;
}
#play-button-span>img{
    filter: blur(0px);
}

img {
 max-width: 100vw;
 max-height: 100vh;
 filter: blur(10px);
}

.background_image{
    display: flex;
    justify-content: center;
    position: relative;
}

.ddblock {
    top: 20%;
    position: absolute;
    width: 21%;
    height: 76%;
}
.top_tensor{
    /* background-color: rgba(255, 0, 0, 0.24); */
    left: 28%;
}
.smeshariki {
    /* background-color: rgba(0, 0, 255, 0.26); */
    left: 51%;
}

.word {
    position: absolute;
    padding: 2px 8px;
    border-radius: 14px;
    font-family: 'Montserrat';
    font-size: 14px;
    cursor: grab;
    user-select: none;
}

.word.word_0,
.word.word_1,
.word.word_2,
.word.word_3,
.word.word_4,
.word.word_5,
.word.word_6,
.word.word_7,
.word.word_8,
.word.word_9,
.word.word_10,
.word.word_11 {
    background-color: #FEEFC0;
}

.word.word_12,
.word.word_13,
.word.word_14,
.word.word_15,
.word.word_16,
.word.word_17,
.word.word_18,
.word.word_19,
.word.word_20,
.word.word_21,
.word.word_22,
.word.word_23 {
    background-color: #B3DCD7;
}

.word.word_24,
.word.word_25,
.word.word_26,
.word.word_27,
.word.word_28,
.word.word_29,
.word.word_30,
.word.word_31,
.word.word_32,
.word.word_33,
.word.word_34,
.word.word_35 {
    background-color: #9DE4FF;
}


.word.word_1,
.word.word_3,
.word.word_5,
.word.word_7,
.word.word_9,
.word.word_11,
.word.word_13,
.word.word_15,
.word.word_17,
.word.word_19,
.word.word_21,
.word.word_23,
.word.word_25,
.word.word_27,
.word.word_29,
.word.word_31,
.word.word_33,
.word.word_35 {
    left: 73%;
    top: 22%;
}

.word.word_0,
.word.word_2,
.word.word_4,
.word.word_6,
.word.word_8,
.word.word_10,
.word.word_12,
.word.word_14,
.word.word_16,
.word.word_18,
.word.word_20,
.word.word_22,
.word.word_24,
.word.word_26,
.word.word_28,
.word.word_30,
.word.word_32,
.word.word_34 {
    right: 73%;
    top: 22%;
}

/* .word.word_0, .word.word_1 {
    top: 22%;
} */

/* .word.word_2, .word.word_3 {
    top: calc(24% + 39px);
}

.word.word_4, .word.word_5 {
    top: calc(24% + 78px);
}
.word.word_6, .word.word_7 {
    top: calc(24% + 117px);
}
.word.word_8, .word.word_9 {
    top: calc(24% + 156px);
}
.word.word_10, .word.word_11 {
    top: calc(24% + 195px);
}
.word.word_12, .word.word_13 {
    top: calc(24% + 234px);
}
.word.word_14, .word.word_15 {
    top: calc(24% + 273px);
}
.word.word_16, .word.word_17 {
    top: calc(24% + 312px);
}
.word.word_18, .word.word_19 {
    top: calc(24% + 351px);
}
.word.word_20, .word.word_21 {
    top: calc(24% + 390px);
}
.word.word_22, .word.word_23 {
    top: calc(24% + 429px);
}
.word.word_24, .word.word_25 {
    top: calc(24% + 468px);
}
.word.word_26, .word.word_27 {
    top: calc(24% + 507px);
}
.word.word_28, .word.word_29 {
    top: calc(24% + 546px);
}
.word.word_30, .word.word_31 {
    top: calc(24% + 585px);
}
.word.word_32, .word.word_33 {
    top: calc(24% + 624px);
}
.word.word_34, .word.word_35 {
    top: calc(24% + 663px);
} */





.finder_element {
    width: 30px;
    height: 30px;
    position: absolute;
    z-index: 3;
    height: calc(5%);
    width: calc(5%);
}

.finder_element.cheap1 {
    top: calc(19%);
    right: calc(72%);
    width: calc(3.3%);
    height: calc(6%);
}
.finder_element.flash {
    top: calc(42%);
    right: calc(66%);
    width: calc(3.5%);
    height: calc(8%);
}
.finder_element.headfones {
    top: calc(50.5%);
    right: calc(78%);
    width: calc(6%);
    height: calc(8.7%);
}
.finder_element.webcamera {
    top: calc(27%);
    right: calc(44.5%);
    width: calc(3.3%);
    height: calc(6%);

}
.finder_element.router {
    top: calc(28%);
    right: calc(28%);
    width: calc(5.3%);
    height: calc(6%);
}
.finder_element.cheap2 {
    top: calc(48%);
    right: calc(34%);
    width: calc(3.7%);
    height: calc(6%);
}
.finder_element.diod {
    top: calc(78%);
    right: calc(33%);
    width: calc(2.3%);
    height: calc(5%);
}
.finder_element.game {
    top: calc(78%);
    right: calc(43%);
    width: calc(6%);
    height: calc(5%);
}
.finder_element.cheap3 {
    top: calc(60%);
    right: calc(75.5%);
    width: calc(3.7%);
    height: calc(6%);
}
.finder_element.mouse {
    bottom: calc(24%);
    right: calc(69%);
    width: calc(3.3%);
    height: calc(8%);
}

.cloud_element {
    width: 30px;
    height: 30px;
    /* background-color: rgba(0, 0, 255, 0.308); */
    position: absolute;
    z-index: 2;
    height: calc(7%);
    width: calc(5%);
}

.cloud_element.finded {
    border: 4px solid rgba(255, 0, 0, 0.856);
    border-radius: 50%;
}

.cloud_element.cheap1 {
    top: calc(4.5%);
    right: calc(5%);
    width: calc(4%);
    height: calc(7%);
}
.cloud_element.flash {
    top: calc(14.5%);
    right: calc(5%);
    width: calc(4%);
    height: calc(7%);
}
.cloud_element.headfones {
    top: calc(25.5%);
    right: calc(5%);
    width: calc(4%);
    height: calc(7%);
}
.cloud_element.webcamera {
   top: calc(35.5%);
    right: calc(5%);
    width: calc(4%);
    height: calc(7%);

}
.cloud_element.router {
    top: calc(46.5%);
    right: calc(5%);
    width: calc(4%);
    height: calc(7%);
}
.cloud_element.cheap2 {
    top: calc(54.5%);
    right: calc(5%);
    width: calc(4%);
    height: calc(7%);
}
.cloud_element.diod {
    top: calc(61.5%);
    right: calc(5%);
    width: calc(4%);
    height: calc(7%);
}
.cloud_element.game {
    top: calc(67.5%);
    right: calc(5%);
    width: calc(4%);
    height: calc(7%);
}
.cloud_element.cheap3 {
    top: calc(75.5%);
    right: calc(5%);
    width: calc(4%);
    height: calc(7%);
}
.cloud_element.mouse {
    top: calc(84.5%);
    right: calc(5%);
    width: calc(4%);
    height: calc(7%);
}


.result-text {
    width: 41%;
    font-size: 32px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 400;
    left: 7%;
    position: absolute;
    top: calc(28%);
}

.result-text-raiting {
    width: 41%;
    height: 57px;
    font-size: 32px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 400;
    left: 7%;
    position: absolute;
    top: 51%;
}

.result-seconds {
    top: calc(38%);
    padding: 10px;
    font-size: 36px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    text-align: center;
    left: 7%;
    border-radius: 5px;
    /* background-color: white; */
    position: absolute;
    color: white;
}

.result-card-block {
    position: absolute;
    font-size: 16px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 400;
}

.rating-block {
    display: flex;
    flex-direction: row;
    position: absolute;
    top: 60%;
    width: calc(90%);
    padding: 0 5%;
}

.rating-column {
    display: flex;
    flex-direction: column;
    width: 50%;
    padding: 10px 28px;
}

.rating-row {
    display: flex;
    flex-direction: row;
    padding: 15px 0px;
    justify-content: space-between;
}

.rating-row span {
    font-family: 'Montserrat', Arial, sans-serif;
    height: 21px;
}

.play-again-text {
    margin-right: 30px;
    bottom: 34px;
    position: absolute;
    right: 0;
    font-family: 'Montserrat', Arial, sans-serif;
}
.nickname {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
	width: 100%;
    word-break: break-all;
}

.rating-result {
    min-width: fit-content;
    padding: 0px 2px;
    text-align: left;
}

.rating-result-time {
    min-width: fit-content;
    padding: 0px 2px;
    text-align: left;
}
@media screen and (max-width:1000px) {
    .result-text {
        font-size: 28px;
    }
    .result-seconds {
        font-size: 26px;
    }
    .result-text-raiting {
        font-size: 28px;
    }
    .rating-column {
        padding: 10px 20px;
        font-size: 14px;
    }
}


@media screen and (max-width:640px) {
    .cloud_element.finded {
        border: 2px solid red;
        border-radius: 50%;
    }
    .input-nickname-card {
        height: 80%;
    }
    /* .nickname-text {
        width: calc(70% - 30px);
        left: calc(20% - 15px);
    } */
    .nickname-text span {
        font-size: 14px;
    }
    #play-button-span,
    #end-button-span{
        font-size: 10px;
    }
    .result-text {
        font-size: 22px;
    }
    .rating-block {
        top: calc(65%);
    }

    .rating-row {
        padding: 10px 0px;
    }
    .rating-row span {
        font-size: 13px;
        height: 15px;
    }
    #end-button-span img{
        height: 5px;
        width: 10px;
    }
    .rating-column {
        padding: 0 10px 0 10px;
    }
    .result-text-raiting{
        font-size: 16px;
    }
    .result-seconds{
        font-size: 24px;
    }
}

@media screen and (max-width:480px) {
    #play-button-span,
    #end-button-span{
        font-size: 9px;
    }
    .nickname-text span {
        font-size: 12px;
    }
    .result-text {
        font-size: 12px;
    }
    .result-seconds {
        padding: 5px;
        font-size: 10px;
    }
    .rating-row {
        padding: 3px 0px;
    }
    .rating-column {
        padding: 10px 0px;
    }
    .rating-block {
        width: calc(94%);
        padding: 0 3%;
        font-size: 8px;
        top: calc(60%);
    }
    .play-again-text {
        margin-right: 7px;
        bottom: 6px;
        font-size: 8px;
    }
    .rating-row span {
        font-size: 8px;
        height: 10px;
    }
    .result-text-raiting{
        font-size: 14px;
    }
    #end-button-span img{
        height: 5px;
        width: 10px;
    }
    .end-button {
        right: 0%; 
        bottom: 0%
    }
}