/* =====================================================
   tt-base.css  (2/10)
   Bas: reset, html/body, applayout (#app-wrapper/#app-top/#app-body), laddare, responsiv sidobredd, hjälpklasser.
   Laddas i fast ordning, se kommentaren i början av Default.aspx.
   ===================================================== */

/* --- Reset / global --------------------------------- */
*,
*::before,
*::after
{
    box-sizing: border-box;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

html, body
{
    height: 100%;
    margin: 0;
    padding: 0;
    background: var(--bg-darkest);
    color: var(--text-primary);
    font-family: var(--font-sans);
    overscroll-behavior: none;
}

/* --- App-wrapper ------------------------------------ */
#app-wrapper
{
    display: flex;
    flex-direction: column;
}

/* Toprad */
#app-top
{
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-color);
    height: var(--top-bar-height);
}

/* Botten */
#app-body
{
    display: flex;
    flex-direction: row;
    flex: 1;
    overflow: clip;
    min-height: 3470px;
}

div.tippertrav-loader
{
    width: 100%;
    height: calc(100vh - var(--top-bar-height));
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

/* =====================================================
   RESPONSIVT
   ===================================================== */

#spelansvar
{
    display: none !important;
    width: calc(200px / var(--safari-zoom));
}

@media (min-width: 985px)
{
    #spelansvar
    {
        display: flex !important;
    }
}

@media (max-width: 984.98px)
{
    :root
    {
        --sidebar-w: 140px;
    }
}

#site-name
{
    display: none !important;
}

@media (min-width: 820px)
{
    #site-name
    {
        display: flex !important;
    }
}

@media (max-width: 819.98px)
{
    :root
    {
        --sidebar-w: 60px;
    }

    .sidebar-title
    {
        display: none;
    }

    #sidebar-header
    {
        justify-content: center;
        padding: 16px 0;
    }

    .sidebar-logo
    {
        font-size: 1.25rem;
    }

    #top-bar
    {
        padding: 0 14px;
    }

    #races-container
    {
        padding: 22px 14px 24px;
    }

}

@media (max-width: 480px)
{
    #omgang-btn-wrap
    {
        max-width: 238px;
    }
}

@media (max-width: 654px)
{
    #payout-ham-wrap
    {
        margin-left: 0px;
        margin-right: 0px;
        border-left: none;
        padding: 0;
    }
}

.inplace-invisible
{
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}