@import '_content/Blazor.Bootstrap/Blazor.Bootstrap.7t9tbfaemk.bundle.scp.css';
@import '_content/LeafletForBlazor/LeafletForBlazor.bundle.scp.css';

/* _content/HotOrCold/Components/Layout/MainLayout.razor.rz.scp.css */
/*.page {
    position: relative;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

.sidebar {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row ::deep a, .top-row ::deep .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
        text-decoration: underline;
    }

    .top-row ::deep a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row {
        justify-content: space-between;
    }

    .top-row ::deep a, .top-row ::deep .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page {
        flex-direction: row;
    }

    .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth ::deep a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row, article {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
*/

#blazor-error-ui[b-27mm7nr1z0] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-27mm7nr1z0] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/HotOrCold/Components/Pages/CreateGame.razor.rz.scp.css */

@media (max-width: 641px) {
    /*example large version*/
}

@media (max-width: 640.98px) {
    /*example small version*/
}

/*Geprobeerd met class rechstreeks op blazor control maar werkt niet. Blazor bootstrap control css isolation issue (id is niet dezelfde als page id)
                Werkt wél met bvb .flexdiv omdat div standaard html is*/
.content_table td.right .textareadiv[b-l5cqqxm2ux] {
    display: inline-block;
    width: 100%;
    font-size: 0.9rem;
    max-width: 200px;
}

.content_table td.right div.flexdiv[b-l5cqqxm2ux] {
    display: flex;
    max-width: 200px;
}

.content_table td div.circle-icon-div[b-l5cqqxm2ux] {
    display: inline-block;
    margin: 10px;
    border: solid 2px;
    width: 30px;
    height: 30px;
    border-radius: 15px;
}

.content_table td div.red[b-l5cqqxm2ux] {
    border-color: red;
}

.content_table td div.white[b-l5cqqxm2ux] {
    border-color: white;
}

.content_table td div.fillwhite[b-l5cqqxm2ux] {
    background: rgba(255,255,255, 0.6);
}

.content_table td div.green[b-l5cqqxm2ux] {
    border-color: green;
}

.content_table td div.fillgreen[b-l5cqqxm2ux] {
    background: rgba(0,255,0, 0.3);
}

.img-target-icon[b-l5cqqxm2ux]{
    margin-left:5px;
    height: 22px;
    background-color: beige;
    padding: 2px;
    border-radius: 6px;
}

.img-start-icon[b-l5cqqxm2ux] {
    margin-left: 5px;
    height: 22px;
    background-color: beige;
    padding: 2px 5px 2px 5px;
    border-radius: 6px;
}

.game-type-description[b-l5cqqxm2ux] {
    height: 6.5rem;
}
/* _content/HotOrCold/Components/Pages/Filler.razor.rz.scp.css */
@media (min-width: 801px) {
    /*large version*/

    .filler-within[b-ne684xsd4j] {
        height: 0%;
        padding: 0;
    }
    .filler-bottom[b-ne684xsd4j] {
        height: 100%;
        padding: 0;
    }
}

@media (max-width: 800.98px) {
    /*small version*/

    .filler-within[b-ne684xsd4j] {
        height: 100%;
        padding: 0;
    }

    .filler-bottom[b-ne684xsd4j] {
        height: 0%;
        padding: 0;
    }
}
/* _content/HotOrCold/Components/Pages/GameIntro.razor.rz.scp.css */
/* Loading screen */
.screen-div[b-0klgu1ck27] {
    font-family: Poppins, sans-serif;
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: black;
    color: antiquewhite;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content-div[b-0klgu1ck27] {
    align-items: center;
    display: flex;
    flex-flow: column;
}

@keyframes keepRotate-b-0klgu1ck27 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loadingIcon[b-0klgu1ck27] {
    display: inline-block;
    animation: keepRotate-b-0klgu1ck27 2s infinite;
}
/* /Loading screen */

/*Geprobeerd met class rechstreeks op blazor control maar werkt niet. Blazor bootstrap control css isolation issue (id is niet dezelfde als page id)
                Werkt wél met bvb .flexdiv omdat div standaard html is*/
.content_table td.right .textareadiv[b-0klgu1ck27] {
    display: inline-block;
    width: 100%;
    font-size: 0.9em;
    max-width: 200px;
}

.content_table td.right textarea[b-0klgu1ck27] {
    width: 100%;
    color: inherit;
    background-color: inherit;
}

.img-start-icon[b-0klgu1ck27] {
    height: 30px;
    background-color: beige;
    padding: 2px 5px 2px 5px;
    border-radius: 6px;
}

/* Circle icon */
.content_table td div.circle-icon-div[b-0klgu1ck27] {
    display: inline-block;
    border: solid 3px;
    width: 30px;
    height: 30px;
    border-radius: 15px;
}

.content_table td div.white[b-0klgu1ck27] {
    border-color: white;
}

.content_table td div.fillwhite[b-0klgu1ck27] {
    background: rgba(255,255,255, 0.7);
}
/* /Circle icon */
/* _content/HotOrCold/Components/Pages/Home.razor.rz.scp.css */
.content_table label[b-zsz5v9iw5k] {
    margin: 0 .5rem 0 .5rem;
    font-style: italic;
}

.btn-context[b-zsz5v9iw5k] {
    color: brown;
    position: absolute;
    left: .7rem;
    bottom: .5rem;
}

.btn-home-screen[b-zsz5v9iw5k] {
    color: white;
    font-style: italic;
    position: absolute;
    right: .7rem;
    bottom: .5rem;
    cursor: pointer;
}
/* _content/HotOrCold/Components/Pages/HowToModal.razor.rz.scp.css */
h1[b-fw5n67vy7k] {
    font-size: 1.8rem;
    margin-bottom: 0;
}

.container-div[b-fw5n67vy7k] {
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    display: flex;
    flex-direction: row;
}

.item-div[b-fw5n67vy7k] {
    max-width: 100%;
    min-width: 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    max-height: calc(100vh - 15rem);
    overflow-y: scroll;
}

    .item-div h2[b-fw5n67vy7k] {
        font-size: 1.6rem;
        margin-top: .4rem;
        margin-bottom: .8rem;
    }

    .item-div img[b-fw5n67vy7k] {
        vertical-align: top;
    }

    .item-div p[b-fw5n67vy7k] {
        margin-top: 1rem;
        margin-bottom: 1rem;
        width: 100%;
    }

        .item-div p img[b-fw5n67vy7k] {
            width: 1.5rem;
            height: 1.5rem;
        }

        .item-div p svg[b-fw5n67vy7k] {
            width: 1.5rem;
            height: 1.5rem;
        }

    .item-div .item-img[b-fw5n67vy7k] {
        max-width: 100%;
        max-height: 60%;
        min-height: 0;
    }

.area-text-block[b-fw5n67vy7k] {
    display: inline-block;
    width: 55%;
    text-align: center;
}

.playagain-check[b-fw5n67vy7k] {
    display: inline-block;
    width: 6%;
    vertical-align: top;
}
/* _content/HotOrCold/Components/Pages/Map.razor.rz.scp.css */
/* _content/HotOrCold/Components/Pages/PrivacyModal.razor.rz.scp.css */
.div-content[b-4wy1m610dt] {
    font-size: .9rem;
}

h1[b-4wy1m610dt] {
    font-size: 1.4rem;
    margin-bottom: 0;
}

h2[b-4wy1m610dt] {
    font-size: 1.2rem;
}