/* Responsive */
* {
    box-sizing: border-box;
    font-family: 'Segoe UI', Verdana, Arial, Helvetica, sans-serif;
    font-size: 1rem;
    line-height: 1.2rem;
    font-size-adjust: inherit;
}

.col-1 { width: 8.33%; }
.col-2 { width: 16.67%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.67%; }
.col-9 { width: 75%; }
.col-10{ width: 83.33%; }
.col-11{ width: 91.66%; }
.col-12{ width: 100%; }

[class*="col-"]
{
    float: left;
    padding: 15px;
    background-color: none;
    z-index: 1;
    height: 100%;
    min-height: 100%;
}

.fullscreen
{
    position: fixed;
    top: 0;
    left: 8.33%;
    width: 83.33%;
    min-height: 100%;
    background: rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.5);
    z-index: -100;
}

.smallscreen
{
    display: none;
}

/* Boxes */
.boxLarge
{
    float: left;
    width: 100%;
    border-radius: 5px;
    border: 1px solid #00f;
    padding: 5px;
    padding-bottom: 0px;
    margin-bottom: 10px;
}

.boxSemiLarge
{
    float: left;
    width: calc(100% - 20px - 4em);
    border-radius: 5px;
    border: 1px solid #00f;
    padding: 5px;
    padding-bottom: 0px;
    margin-bottom: 10px;
}

.boxMedium
{
    width: 100%;
    border-radius: 5px;
    border: 1px solid #00f;
    padding: 5px;
    padding-bottom: 0px;
    margin-bottom: 10px;
}

    .boxMedium > *,
    .boxSmall > *,
    .boxLarge > *,
    .boxSemiLarge > *
    {
        padding-top: 10px;
        margin-top: 10px;
    }

    .boxMedium > h2,
    .boxSmall > h2,
    .boxLarge > h2,
    .boxSemiLarge > h2
    {
        padding-top: 0px;
        line-height: 1.4em;
    }

    .boxMedium h2, 
    .boxLarge h2,
    .boxSmall h2,
    .boxSemiLarge h2
    {
        padding-left: 10px;
        color: white;
        font-weight: bold;
        width: calc(100% + 10px);
        background: url(../img/layout/ui_background_blue.png) repeat-x #344c99;
        background-size: 100% 100%;
        margin: -5px;
        padding-bottom: 3px;
        padding: 5px;
    }

    .boxMedium h3,
    .boxSemiLarge h3
    {
        margin-top: 15px;
        font-weight: bolder;
    }

.boxSmall
{
    float: right;
    width: 100%;
    border-radius: 5px;
    border: 1px solid #00f;
    padding: 5px;
    padding-bottom: 0px;
    margin-bottom: 10px;
}

    .boxSmall h3
    {
        padding-left: 10px;
        margin-top: 5px;
        font-weight: bolder;
    }

.show
{
    display: block !important;
}

.noMarginTop 
{
    margin-top: 0 !important;
}

.menuIcon
{
    display: none;
}

.menubar
{
    background: #e3483c url(../img/layout/ui_background_red.png);
    background-size: contain;
    height: 2em;
    margin: 0;
    padding: 0;
    width: 100%;
}

ul.menu
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    height: 2em;
    box-sizing: border-box;
    display: block;
    width: 100%;
}

    ul.menu li
    {
        display: block;
        float: left;
        padding-left: 5px;
        padding-right: 5px;
        border-right: 1px solid white;
        height: 2em;
        padding-top: 0.5em;
        width: 14.28%;
    }

    ul.menu li.AdminMenu
    {
        display: block;
        float: left;
        padding-left: 5px;
        padding-right: 5px;
        border-right: 1px solid white;
        height: 2em;
        padding-top: 0.5em;
        width: 10%;
    }

        ul.menu li a
        {
            color: white;
            font-weight: bold;
            text-decoration: none;
            display: block;
            width: 5vw;
            /*margin: -0.1em 1vw 0 0.3vw;*/
            white-space: nowrap;
            float: left;
        }

        ul.menu li > *
        {
            margin-top: auto;
            margin-bottom: auto;
        }
            ul.menu li a img
            {
                margin-right: 0.2em;
                width: auto;
                height: auto;
                max-height: 1em;
                max-width: 1em;
            }

        ul.menu li:hover,
        ul.menu li.currentPage
        {
            background: #e3483c  url(../img/layout/ui_background_red_ud.png) repeat-x;
        }

            ul.menu li:hover a,
            ul.menu li a:hover,
            ul.menu li.currentPage a
            {
                color: #344c99;
                width: 100%;
            }

.borderLeft
{
    border-left: 1px solid white;
}

.borderRight
{
    border-right: 1px solid white;
}

.row::after,
.navigation::after
{
    content: "";
    clear: both;
    display: table;
}

.navigation
{
    position: relative;
    top: 0px;
    left: 0px;
    width: 83.33%;
    margin-left: auto;
    margin-right: auto;
}

.header,
.headerAdmin
{
    position: relative;
    top: 0px;
    left: 0px;
    width: 83.33%;
    margin-left: auto;
    margin-right: auto;
    height: 150px;
    padding: 1em;
    align-items: center;
    justify-content: center;
    display: flex;
    border-left: 1px solid white;
    border-right: 1px solid white;
    border-bottom: 1px solid white;
}

    .header img,
    .headerAdmin img
    {
        width: auto;
        height: 140px;
        border: none;
        float: left;
        left: 0px;
        top: 0px;
    }

    .header h1
    {
        width: 100%;
        text-align: center;
        font-weight: bold;
        font-size: 2rem !important;
        display: inline-block;
        padding-top: 0.1em;
        color: #344c99;
    }

    .headerAdmin h1
    {
        width: 100%;
        text-align: center;
        font-weight: bold;
        font-size: 2rem;
        display: inline-block;
        padding-top: 0.1em;
        color: #344c99;
    }

.footer
{
    width: 83.33%;
    margin-left: auto;
    margin-right: auto;
    background-color: #91abff;
    padding: 15px;
}

    .footer input[type="text"],
    .footer input[type="email"]
    {
        margin-bottom: 5px;
    }

/* Roster */
div.RosterItem
{
    position: relative;
    top: 0px;
    left: 0px;
    width: calc(100% - 10px);
}

    div.RosterItem div.RosterItemContent div.ColumnLarge
    {
        position:relative;
        margin: 0px;
        width: 100%;
        text-align: center;
        color: #333;
        padding: 0px;
        vertical-align: middle;
        border-bottom-style: none;
        border-bottom-width: 0px;
    }

div.RosterItemHeader
{
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 1.5em;
    background-color: #344c99;
    background-color: rgba(52, 76, 153, 0.1);
    padding-left: 10px;
}

.lostOvertime {
    background-color: rgba(244, 193, 194, 0.3);
}

.lost {
    background-color: rgba(236, 151, 153, 0.3);
}

.won {
    background-color: rgba(151, 236, 153, 0.3);
}

.wonOvertime {
    background-color: rgba(193, 244, 194, 0.3);
}

.postponed {
    background-color: rgba(255, 127, 39, 0.3);
}

.RosterItemContent
{
    position: relative;
    top: 0px;
    left:0px;
    width: 100%;
    height: 70px;
    display: table;
}
    .RosterItemContent:hover
    {
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0.3);
    }

    .RosterItem:hover > .RosterItemContent.postponed,
    .RosterItemContent.postponed:hover
    {
        background-color: rgba(255, 127, 39, 0.2) !important;
    }

    .RosterItem:hover > .RosterItemContent.lostOvertime,
    .RosterItemContent.lostOvertime:hover 
    {
        background-color: rgba(244, 193, 194, 0.2) !important;
    }

    .RosterItem:hover > RosterItemContent.lost,
    .RosterItemContent.lost:hover 
    {
        background-color: rgba(236, 151, 153, 0.2) !important;
    }

    .RosterItem:hover > RosterItemContent.won,
    .RosterItemContent.won:hover 
    {
        background-color: rgba(151, 236, 153, 0.2) !important;
    }

    .RosterItem:hover > RosterItemContent.wonOvertime,
    .RosterItemContent.wonOvertime:hover 
    {
        background-color: rgba(193, 244, 194, 0.2) !important;
    }

    .RosterItemHeader:hover
    .RosterItem:hover > .noLink *
    .noLink:hover *
    {
        cursor: default !important;
    }

    .RosterItemContent > .ColumnSmall,
    .noLink > .ColumnSmall
    {
        display: table-cell;
        width: 70px;
        height: 70px;
        padding: 0px;
        margin: auto;
        line-height: 70px;
    }

    .RosterItemContent > .ColumnLarge,
    .noLink > .ColumnLarge
    {
        display: table-cell;
        width: calc(100% - 140px);
        height: 70px;
        text-align: center;
    }

        .RosterItemContent > .ColumnSmall > p,
        .RosterItemContent > .ColumnLarge > p,
        .noLink > .ColumnSmall > p,
        .noLink > .ColumnLarge > p
        {
            line-height: 1.24em;
        }

/* Images */
.RosterImageHome, 
.RosterImageGuest
{
    width: 70px;
    height: 70px;
    vertical-align: middle;
}

.RosterImageHome
{
    padding-left: 5px;
}

.RosterImageGuest
{
    padding-right: 5px;
}

/* Slideouts */
#slideOut,
#slideOutSmall
{
    position: relative;
    float: right;
    margin-right: -1em;
    margin-top: -5px;
    top: 0;
    right: 0;
    width: 1em;
    background-color: #e3483c;
    overflow: hidden;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    padding: 5px;
    height: 15em;
    text-align: center;
}
    #slideOut > h2,
    #slideOutSmall > h2
    {
        width: 1px;
        word-wrap: break-word;
        font-weight: bold;
        color: white;
        line-height: 1em;
        text-align: center;
        padding: 0;
    }

    #slideOut:hover
    {
        width: 150px;
        height: auto;
        z-index: 10000;
        margin: 0px;
        padding: 0;
        border: 1px solid #e3483c;
        margin-right: -1em;
    }

        #slideOut:hover h2
        {
            width: 100%;
            word-wrap: normal;
            height: 1em;
        }

        #slideOut:hover > div
        {
            display: normal;
            background-color: white;
            padding-left: 10px;
        }

/* Spielbericht - Mannschaftsaufstellungen */
div.teamRosters
{
    max-width: 1024px;
}

#divMannschaftsaufstellung
{
    position: relative;
    width: 90%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

    #divMannschaftsaufstellung div.Goalkeeper
    {
        position: relative;
        height: 2em;
        padding-top: 20px;
    }

    #divMannschaftsaufstellung div.Defense
    {
        position: relative;
        height: 2em;
        padding-top: 20px;
        float: left;
        width: 50%;
    }

    #divMannschaftsaufstellung div.Forward
    {
        position: relative;
        height: 2em;
        padding-top: 20px;
        float: left;
        width: 33%;
    }

    #divMannschaftsaufstellung div.Teamname
    {
        position:relative;
        height: 2em;
        padding-top: 20px;
    }

    #divMannschaftsaufstellung div.Goalkeeper span,
    #divMannschaftsaufstellung div.Defense span,
    #divMannschaftsaufstellung div.Forward span
    {
        width: auto !important;
        margin-left: auto;
        margin-right: auto;
        border: 1px solid #424242;
        border-radius: 5px;
        padding: 5px;
        vertical-align: middle;
        background-color: White;
        color: #424242;
    }

#divMannschaftsaufstellung .clearfixContent
{
	display: block;
    height: 30px;
	margin:10px 4px 10px 4px;
	clear:both;
}

.tab0
{
    line-height: 1.5em;
    min-width: 10%;
    display: inline-block;
}

    .tab0::after
    {
        content: "";
        width: 1em;
        display: inline-block;
    }

.floatRight
{
    float: right !important;
}

.scoreBoardLeft {
    width: 45%;
    float: left;
    text-align: right;
    vertical-align: middle;
    border: 0px none;
}

.scoreBoardCenter {
    width: 10%;
    float: left;
    text-align: center;
    border: 0px none;
}

    .scoreBoardCenter span {
        color: #344c99 !important;
    }

        .scoreBoardCenter span.Resultat {
            font-weight: bold;
        }

.scoreBoardRight {
    width: 45%;
    float: right;
    text-align: left;
    vertical-align: middle;
    border: 0px none;
}

    .scoreBoardLeft .Torschuetze,
    .scoreBoardRight .Torschuetze {
        font-weight: bold;
    }

    .scoreBoardLeft .Remarks,
    .scoreBoardRight .Remarks {
        font-style: italic;
    }

/* Cookie-Banner */
#cookieInfo{
    position: fixed;
    right: 0;
    bottom: 0;
    padding: 5px;
    background-color: black;
    color: white;
    width: 100%;
    z-index: 9999;
}

    #cookieInfo div.close
    {
        position: absolute;
        top: 0px;
        right: 0px;
        margin-right: 5px;
        margin-top: 5px;
        color: #e3483c;
        padding: 2px;
        border: #444 1px solid;
    }

    #cookieInfo div.Content
    {
        text-align: center;
        margin-right: 20px;
        margin-top: 20px;
        margin-left: 5px;
        margin-bottom: 5px;
        line-height: 1.5em;
    }

    #cookieInfo a
    {
        color: #e3483c;
    }

.leftColumn40Percent
{
    position: relative;
    top: 0px;
    left: 0px;
    width: 48%;
    height: 100%;
    float: left;
    border: 1px solid black;
    border-radius: 5px;
    padding: 5px;
    text-align: left;
}

.rightColumn40Percent
{
    position:relative;
    top: 0px;
    right: 0px;
    width: 48%;
    height: 100%;
    border: 1px solid black;
    border-radius: 5px;
    padding: 5px;
    float: right;
}

    .rightColumn40Percent input.small,
    .leftColumn40Percent input.small
    {
        width: 2em;
        margin-left: 1em;
        margin-bottom: 1em;
    }


.inlineForm {
    margin-left: calc(20% + 2vw);
    background-color: rgba(255, 255, 255, 0.6);
    display: none;
    border: 1px solid #00f;
    border-radius: 5px;
    margin-bottom: 1em;
    width: calc(80% - 1em - 8.33%);
}

    .inlineForm h3 {
        margin-left: 1em;
    }

.UseSpace {
    margin: 0;
    padding: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}