/* overrides for crosswords.css  */
.crossword_list #thumbnails { gap: 1em; display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }

.crossword_thumbnail:hover{ opacity: unset; }

.crossword_thumbnail .title{ top: 15px; left: 15px; }
.crossword_thumbnail .start_date{ background: var(--e-global-color-b101da8); font-size: 20px; top: 50%; right: 50%; transform: translate(50%, -50%); box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.3); }
.crossword_thumbnail:before { content: ""; background: rgba(0, 0, 0, 0); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; display: inline-flex; }
.crossword_thumbnail:hover:before { background: rgba(0, 0, 0, 0.2); }
.crossword_thumbnail img.thumbnail{ display: block; }

.crossword_list-let .crossword_thumbnail .title { background-color: #49ef3a !important; }
.crossword_list-medium .crossword_thumbnail .title { background-color: #00aeef !important; }
.crossword_list-svaer .crossword_thumbnail .title { background-color: #3835cf !important; }
.crossword_list-ekspert .crossword_thumbnail .title { background-color: #000000 !important; }
.crossword_list-boern .crossword_thumbnail .title { background-color: #ffc800 !important; }
.crossword_list-bonus .crossword_thumbnail .title { background-color: #F1BB17 !important; }
.crossword_list-fremmed .crossword_thumbnail .title { background-color: #c06c84 !important; }
.crossword_list-default .crossword_thumbnail .title { background-color: #F1BB17 !important; }



#crossword_player{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; }
#crossword_player #cells{ z-index: 1001; }
#crossword_player #cells .cell{ z-index: 1001; }
#popups{ z-index: 1002; }

@media screen and (max-width: 900px) {
    #crossword_player #loaded {
        width: 95% !important;
    }
}


.points_level_meter .inner .star{
	background-image: url('/wp-content/themes/webko/assets/images/crosswords/star.png');
}


/* we show old animation if correct and not logged in, which has a blue background-color, so we set popup to match */
#crosswords.not_logged_in #popups #correct{ background: #455AC5; }




@media screen and (max-width: 1200px) {
    .crossword_list #thumbnails {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.8em;
    }
}


@media screen and (max-width: 900px) {
    .crossword_list #thumbnails {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5em;
    }

    .crossword_thumbnail .start_date {
        font-size: 16px;
    }

    #crossword_player #controls .zoom_area {
        display: none;
    }
}

@media screen and (max-width: 600px) {
    .crossword_list #thumbnails {
        grid-template-columns: repeat(1, 1fr);
        gap: 0.5em;
    }

    .crossword_thumbnail .title {
        font-size: 12px;
    }

    .crossword_thumbnail .start_date {
        font-size: 14px;
    }
}

/* Resubscripe popup */
.image-popup-backdrop {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background-color: rgba(0, 0, 0, .5);
    opacity: 0;
    transition: opacity .3s;
}

.show .image-popup-backdrop {
    opacity: 1;
}

.image-popup-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99999;
}

.image-popup-inner {
    display: flex;
    align-items: center;
    position: relative;
    max-width: 95%;

    opacity: 0;
    transition: all .3s;
    transform: translateY(100px);
}

.show .image-popup-inner {
    opacity: 1;
    transform: translateY(0);
}

.image-popup-resubscribe a {
    display: block;
}

.image-popup-resubscribe img {
    width: 100%;
    max-width: 70vh;
    display: block;
    object-fit: contain;
}

.image-popup-close {
    position: absolute;
    background: #fff;
    right: 3px;
    top: 3px;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #000;
    cursor: pointer;
}