@font-face {
    font-family: 'Montserrat';
    src: url(/tensor/fonts/Montserrat/Montserrat-Medium.ttf);
    font-weight: normal;
    font-style: normal;
}
.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/finder/img//end_modal.png');
    width: 100%;
    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/finder/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: 10px;
    margin-bottom: 10px;
    border-color: transparent;
    border-radius: 3px;
}
.d-none {
    display: none;
}
.input-nickname-card input:focus-visible {
    outline: none;
}
.play-button {
    width: 100%;
    text-align: right;
}
.warning-text {
    font-size: 12px !important;
    text-align: center;
    margin-bottom: 5px;
}
.nickname-text {
    display: flex;
    flex-direction: column;
    width: calc(70% - 60px);
    position: absolute;
    top: calc(50% - 44px);
    left: calc(30% - 30px);
}

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

body{ 
    margin: 0px;
}

img {
 max-width: 100vw;
 max-height: 100vh;
}

.background_image{
    display: flex;
    justify-content: center;
    position: relative;
}
.finder_element {
    width: 30px;
    height: 30px;
    /*background-color: red;*/
    position: absolute;
    z-index: 3;
    height: calc(5%);
    width: calc(5%);
}

.finder_element.apple {
    bottom: calc(18%);
    left: calc(46%);
}

.finder_element.stang {
    bottom: calc(34.5%);
    left: calc(30%);
    width: calc(7%);
}
.finder_element.clock {
    bottom: calc(13%);
    left: calc(60%);
    width: calc(7%);
}
.finder_element.globus {
    bottom: calc(77%);
    left: calc(62%);
    height: calc(10%);
}
.finder_element.jam {
    top: calc(6%);
    left: calc(51.5%);
    width: calc(4%);
    height: calc(7%);
}
.finder_element.ball {
    bottom: calc(27%);
    left: calc(76%);
    width: calc(3%);
}
.finder_element.lenta {
    top: calc(11%);
    left: calc(37.5%);
    height: calc(6%);
    width: calc(6%);
}
.finder_element.sc {
    bottom: calc(69%);
    left: calc(58%);
    height: calc(7%);
}
.finder_element.doc {
    bottom: calc(53%);
    left: calc(48%);
    width: calc(7%);
}
.finder_element.music {
    bottom: calc(30.5%);
    left: calc(49%);
    width: calc(4%);
}
.finder_element.notebook {
    bottom: calc(63%);
    left: calc(31%);
    height: calc(9%);
}
.finder_element.clay {
    bottom: calc(61%);
    left: calc(60%);
    height: calc(6%);
}
.finder_element.scope {
    bottom: calc(50%);
    left: calc(58%);
    height: calc(9%);
}
.finder_element.pensil {
    bottom: calc(30%);
    left: calc(73%);
    height: calc(6%);
    width: calc(3%);
}

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

.cloud_element.finded {
    border: 4px solid red;
    border-radius: 50%;
}


.cloud_element.apple {
    top: calc(7.5%);
    left: calc(9%);
}

.cloud_element.stang {
    top: calc(9.5%);
    left: calc(18.5%);
}
.cloud_element.clock {
    top: calc(18%);
    left: calc(16%);
}
.cloud_element.globus {
    bottom: calc(67%);
    left: calc(19%);
}
.cloud_element.jam {
    top: calc(26%);
    left: calc(11%);
}
.cloud_element.ball {
    bottom: calc(68.5%);
    left: calc(5.5%);
}
.cloud_element.lenta {
    top: calc(15.5%);
    left: calc(7.5%);
}
.cloud_element.sc {
    bottom: calc(79%);
    left: calc(75%);
}
.cloud_element.doc {
    bottom: calc(79%);
    left: calc(85%);
}
.cloud_element.music {
    bottom: calc(71%);
    left: calc(74.5%);
}
.cloud_element.notebook {
    bottom: calc(62%);
    left: calc(77%);
}
.cloud_element.clay {
    bottom: calc(60.5%);
    left: calc(84%);
}
.cloud_element.scope {
    bottom: calc(70%);
    left: calc(87%);
}
.cloud_element.pensil {
    bottom: calc(71%);
    left: calc(81%);
}


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

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

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

.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(100% - 56px);
    padding: 0 28px;
}

.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: 19px;
    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%;
}

.rating-result {
    width: 105px;
	min-width: 105px;
	text-align: right;
}


@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{
        font-size: 10px;
    }
    .result-text {
        font-size: 22px;
    }
    .rating-block {
        top: calc(60%);
    }

    .rating-row {
        padding: 10px 0px;
    }
    .rating-row span {
        font-size: 13px;
        height: 15px;
    }
    .rating-column {
        width: 100%;
        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{
        font-size: 10px;
    }
    .nickname-text span {
        font-size: 12px;
    }
    .nickname-text {
        width: calc(70% - 10px);
    }
    
    .result-text {
        font-size: 12px;
    }
    .result-seconds {
        padding: 7px;
        font-size: 12px;
    }
    .rating-block {
        font-size: 8px;
    }
    .rating-row {
        padding: 3px 0px;
    }
    .rating-column {
        padding: 10px 0px 10px 10px;
    }
    .play-again-text {
        margin-right: 7px;
        bottom: 6px;
        font-size: 8px;
    }
    .rating-row span {
        width: auto;
        font-size: 8px;
        height: 10px;
    }
    .rating-result {
        width: 85px;
    }
    .result-text-raiting{
        font-size: 14px;
    }
}