@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/finder_carnival/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/finder_carnival/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;
}

.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(36%);
    position: absolute;
    top: calc(29%);
    left: calc(56%);
}

.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;
}
img.fone { 
    width: 1024px;
}
#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;
}
.finder_element {
    width: 30px;
    height: 30px;
    /* background-color: rgba(255, 0, 0, 0.247); */
    position: absolute;
    z-index: 3;
    height: calc(5%);
    width: calc(5%);
}

.finder_element.key {
    bottom: calc(23%);
    right: calc(29%);
    width: calc(2%);
    height: calc(6%);
}

.finder_element.heart_red {
    bottom: calc(53%);
    right: calc(67.5%);
    width: calc(5%);
    height: calc(9%);
}

.finder_element.butterfly {
    bottom: calc(85%);
    right: calc(70.5%);
    width: calc(2%);
    height: calc(4%);
}

.finder_element.lines_colors {
    bottom: calc(83%);
    right: calc(62.5%);
    width: calc(3%);
    height: calc(6%);
}


.finder_element.lines_blue {
    top: calc(52%);
    right: calc(45.7%);
    height: 3%;
    transform: rotate(64deg);
}

.finder_element.heart_blue {
    top: calc(22%);
    right: calc(47.7%);
    height: 8%;
    width: 4%;
}

.finder_element.pattern_black {
    top: calc(22.5%);
    right: calc(34.5%);
    height: 5%;
    width: 2.5%;
}

.finder_element.heart_liteblue {
    top: calc(51.5%);
    left: calc(9%);
    height: 10%;
    width: 6%;
}

.finder_element.pattern_bleu {
    top: calc(12%);
    left: calc(11.5%);
    height: 5%;
    width: 2.5%;
}

.finder_element.pattern_round {
    top: calc(38%);
    right: calc(27.87%);
    height: 5%;
    width: 3%;
}

.finder_element.line_one {
    top: calc(40%);
    right: calc(49.8%);
    height: 5%;
    width: 2%;
}

.finder_element.line_roses {
    top: calc(80.5%);
    right: calc(49%);
    height: 3%;
    transform: rotate(45deg);
    width: 5%;
}

.finder_element.heart_roses {
    top: calc(77.6%);
    right: calc(58.5%);
    height: 7%;
    width: 3%;
}

.finder_element.pattern_trigon {
    top: calc(63.5%);
    left: calc(17.5%);
    height: 5%;
    width: 2.5%;
}

.finder_element.heart_colors {
    top: calc(69.5%);
    left: calc(22%);
    height: 11%;
    width: 7%;
}


.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.key {
    top: calc(6%);
    right: calc(8.5%);
    height: 8%;
}

.cloud_element.heart_red {
    top: calc(13.5%);
    right: calc(13.3%);
    height: 8%;
}

.cloud_element.butterfly {
    top: calc(14.5%);
    right: calc(3%);
    height: 8%;
}

.cloud_element.lines_colors {
    top: calc(18.5%);
    right: calc(8%);
    height: 8%;
}

.cloud_element.lines_blue {
    top: calc(25.5%);
    right: calc(13.3%);
    height: 8%;
}

.cloud_element.heart_blue {
    top: calc(29.5%);
    right: calc(4.7%);
    height: 8%;
}

.cloud_element.pattern_black {
    top: calc(36.5%);
    right: calc(11%);
    height: 8%;
}

.cloud_element.heart_liteblue {
    top: calc(47.5%);
    right: calc(11.7%);
    height: 8%;
}

.cloud_element.pattern_bleu {
    top: calc(43.5%);
    right: calc(3%);
    height: 8%;
}

.cloud_element.pattern_round {
    top: calc(57%);
    right: calc(2.87%);
    height: 8%;
}

.cloud_element.line_one {
    top: calc(62.5%);
    right: calc(8.6%);
    height: 8%;
}

.cloud_element.line_roses {
    top: calc(72.5%);
    right: calc(5%);
    height: 8%;
}

.cloud_element.heart_roses {
    top: calc(71.5%);
    right: calc(13%);
    height: 8%;
}

.cloud_element.pattern_trigon {
    top: calc(86.5%);
    right: calc(11%);
    height: 8%;
}

.cloud_element.heart_colors {
    top: calc(84.5%);
    right: calc(3%);
    height: 8%;
}


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

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

.result-seconds {
    top: calc(40%);
    padding: 10px;
    font-size: 36px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    text-align: center;
    left: 4%;
    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: 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%;
    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%
    }
}