@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-size: 1.0rem;
    
}


body {
    padding-top: 5rem;
    background-image: linear-gradient(175.6deg, #9933aa90 0.0%, #99bbdd 6.0%,#0000ff50 7.3%, rgba(112, 246, 255, 0.33) 11.6%, rgba(221, 108, 241, 0.26) 42%, rgba(229, 106, 253, 0.71) 71.5%, rgb(123, 183, 253) 80.2%,#0033aa90 80.3%, #99bbee 80.5%,#330055 100.2%);
}

body, .bg,
#menuwindow.bg {
    background-image: url("/img/bg/bg4a.jpg");
    background-size: cover;
    animation-name: bganimation;
    animation-duration: 30s;
    1animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in;
}

div.userselections.bg1,
.bg1{
    background-image: url("/img/bg/bg4a.jpg");
    background-size: cover;
    animation-name: bganimation1;
    animation-duration: 30s;
    1animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in;
}

div.userselections.bg1 .content{
    background:none;
}

.checkbox label, a {
    color: #fff;
    text-shadow: -1px 0 2px black, 0 1px 2px black, 1px 0 2px black, 0 -1px 2px black;
}

@keyframes bganimation {
    from {
        background-image: url("/img/bg/bg4a.jpg");
    }

    to {
        background-image: url("/img/bg/bg10a.jpg");
    }
}

@keyframes bganimation1 {
    from {
        background-image: url("/img/bg/bg4a.jpg");
    }

    to {
        background-image: url("/img/bg/bg10a.jpg");
    }
}

#mainmenu {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 1000000;
    height: 55px;
    line-height: initial;
    1background: #6633aa90;
    1background-image: linear-gradient(135.0deg, #bb119940, #55119990 70% );
    1border-bottom-right-radius: 25px;
    1border-bottom-left-radius: 25px;
}

    #mainmenu #mainmenucontent {
        display: flex;
        margin: auto;
        width: fit-content;
        
        padding-left: 1rem;
        padding-right: 1rem;
        
    }

        #mainmenu #mainmenucontent a {
            background: linear-gradient(180deg, #ffaa00 0%, #dd8800 100%);
            background: linear-gradient(180deg, #0068ff20 0%, #0068ffc0 50%, #004fc2c0 50%, #0068ff40 100%);
        
            text-decoration:none;
            color: #fff !important;
            margin-left: 0.5rem;
            border-radius: 50px;
            height: 50px;
            line-height: 50px;
            min-width: initial;
            width: 50px;
            padding: 0px;
            text-align: center;
            z-index:1000000;
        }

            #mainmenu #mainmenucontent a .oi,
            #mainmenu #mainmenucontent button .oi {
                top: 0px;
            }

            #mainmenu #mainmenucontent a:hover {
                background: #0068ffc0;
                
                color: #fff !important;
                margin-left: 0.5rem;
                border-radius: 50px;
            }


        #mainmenu #mainmenucontent button.logout {
            height: 50px;
            line-height: 50px;
            min-width: initial;
            width: 50px;
            text-align: center;
            background: linear-gradient(180deg, #ff0000f0 0%, #550000f0 100%);
            background: linear-gradient(180deg, #ffaaaaf0 0%, #550000d0 100%);
            color: #fff;
            border: none;
            border-radius: 50px;
            margin-left: 0.5rem;
        }

        #mainmenu #mainmenucontent button.logout:hover {
            background: #aa0000f0;
        }


            .cancel {
                background: #dd8800;
                border: solid 1px #ffaa00;
                color: #fff !important;
                margin-left: 0.5rem;
                border-radius: 50px;
            }


.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

select {
    border: solid 1px #aaa;
    border-radius: 0px;
    background-color: #fff;
    color: #0d6efd;
    border-radius: 50px;
    padding: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
    border: solid 1px #0d6efd;
    background-color: #2c75e0;
    background: linear-gradient(180deg, #438efb 0%, #0a44c3 100%);
    color: #fff;
    font-weight: bold;
   
}

.oi.largeoi {
    
}
    
    select:hover, select:focus {
        background: #2c75e0;
        background-color: #2c75e0;
    }



select.trans {
    padding: 5px;
    border: solid 1px #aaa;
    border-radius: 0px;
    background-color: #fafafa;
    color: initial;
    border-radius: 50px;
    padding-left: 1rem;
    padding-right: 1rem;
    
}

td.voc{
    text-align:center;
}
td.voc span {
    font-weight: bold;
    display: inline-block;
    border: solid 1px #aaa;
    background-color: #eee;
    padding: 5px;
    min-width: 100px;
    text-align: center;
    margin: auto;
    margin-right: 1rem;
    border-radius: 50px;
    padding-left: 1rem;
    padding-right: 1rem;
}

td.trans select {
    
}






div.indexmenu {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    margin: auto;
    margin-bottom:1rem;
    flex-direction:column;
    align-content: stretch;
    border: none;
    width:80%;
}


.btn {
    display: inline-block;
    height: auto;
    line-height: normal;
    text-decoration: none;
    border: none;
    background-color: #0d6efd;
    border-radius: 3px;
    color: #fff;
    font-weight: 700;
    font-size: initial;
    padding: 1.0rem;
    padding-left: 1.0rem;
    padding-right: 1.0rem;
    margin: auto;
    background: linear-gradient(180deg, #ffffffd0 1%,#ffffff00 10%, #ffffff00 90%, #00000090 100%);
    background-color: #0d6efd70;
    background-color: #ffda20;
    background-color: #ffc300;
    white-space: nowrap;
    text-shadow: -1px 0 2px black, 0 1px 2px black, 1px 0 2px black, 0 -1px 2px black;
    1text-shadow: -2px 0 2px black, 0 2px 2px black, 2px 0 2px black, 0 -2px 2px black;
}

    .btn:hover {
        background-color: #0d6efd;
        background: #0d6efd;
        background: #ffdb00;
        color: #fff;
    }


    .btn.thin {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        font-weight:normal;
    }

.btn.cancel {
    display: inline-block;
    background-color: #aa0000;
    background: linear-gradient(180deg, #ff0000f0 0%, #550000f0 100%);
}

    .btn.cancel:hover {
        box-shadow: none;
    }


.fit {
    min-width: auto;
    white-space:nowrap;
}

.btn.newgame,
.btn.newgame2,
.btn.check {
    background-color: #0dc80de0;
}

.btn.newgame2 {
    margin-top: 1rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    background-color: #0dc80dd0;
}

.btn.check {
    padding-left: 2.0rem;
    padding-right: 2.0rem;
}


.btn.logout,
.btn.cancel {
    background: linear-gradient(180deg, #ffffffb0 1%, #ffffff00 10%, #ffffff00 90%, #00000090 100%);
    background-color: #aa0000e0;
}

.btn.reload {
    background-color: #00aa00;
}

.btn.delete {
    background-color: #aa0000;
}

.btn.cancel {
   
}

.indexmenu .btn.settings,
.indexmenu .btn.delete {
    height: auto;
    line-height: initial;
    padding-left: 2rem;
    padding-right: 2rem;
    text-align: center;
    margin-bottom: .5rem;
}

.indexmenu .btn.settings,
.indexmenu .btn.newgame {
    width: 75%;
}



.btn.logout:hover,
.btn.cancel:hover {
    background: #a00000;
}

.btn:hover {
    box-shadow: none;
}

.btn.newgame {
    padding-left: 2rem;
    padding-right: 2rem;
}

.btn.newgame:hover,
.btn.check:hover {
    1background: #00bb00;
    background-image:none;
}

    .btn:hover {
        border: none !important;
    }



        .btn span.oi {
            
        }

        .actions {
            margin-top:1rem;
        }

        .fit-content{
            width:fit-content;
            max-width:fit-content;
        }

th, 
td.th {
    font-size: small;
    padding-left: 1rem;
    padding-right: 1rem;
    color: #777;
    height:initial;
    line-break:initial;
}

tr.th {
    height: initial !important;
    line-break: initial !important;
}

tr {
    height: 40px;
    line-height: 40px;
    border-bottom:solid 1px #ddd;
}

td {
    line-height: initial;
    vertical-align:top;
    padding:5px;
    padding-left:1.0rem;
}

    td.lang,
    td.voc,
    td.trans,
    td.school,
    td.class,
    td.modified {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    td.school,
    td.class,
    td.modified {
    color: #777;
}

    td.modified {
        color: #aaa;
    }

td.voc, 
td.trans {
    font-weight:700;
    line-height:initial;
}

span.link,
td.voc span.link {
    color: #0d6efd;
    text-decoration: underline;
    cursor: pointer;
    background: none;
    padding: 0px!important;
    border:none;
    margin:0;
    text-align:left;
}

    td.voc,
    td.trans {
        min-width: 130px;
    }

    span.link:hover,
    span.link:active {
        color: red;
        text-decoration: none;
    }

div#editpane {
    background-color: #ffffffd0;
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    display:none;
}

div.settingspane {
    background-color: #ffffffd0;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
}

div.settingspane select {
    margin:0.5rem;
    width:100%;
}


    div#editpane.show {
        display:flex;
    }

    div#editpane div#editcontent {
    }


.col.property,
.row.property .col {
    font-size: small;
    font-weight: 700;
    padding-top: 1rem;
    padding-bottom: 2px;
}

.col input[type=text] {
    height: 40px;
    line-height: 40px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border:solid 1px #ccc;
}
.col span.btn,
span.btn {
    background-color: #0d6efd;
    color: #fff;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: bold;
    padding-left: 1rem;
    padding-right: 1rem;
    white-space:nowrap;
}

.col span.btn:hover {
    background-color: #0a46ca;
    
}

tr.edited{
    background-color:#ffff0030!important;
}

tr.edited.new {
    background-color: #ffaa0030 !important;
}

div.rows {
    margin: auto;
    width: fit-content;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
}

div.rows div.row {
    margin: auto;
    width: fit-content;
}

table.playlist {
    width: fit-content;
    max-width: fit-content;
    margin:auto;
}

table.playlist tr {
    border:none!important;
}

    table.playlist tr td{
        vertical-align:middle;
    }

    tr.allvalid {
        background-color:#00ff00;
    }

td.state.allvalid span,
td.state.errors span,
td.state.validanderror span,
td.state.validandempty span,
td.state.errorandempty span,
td.state span,
div.gamerow span.state {
    border-radius: 50px;
    display: block;
    width: 15px;
    height: 15px;
    background: #00ff0070;
}

    div.gamerow span.state {
        display:inline-block;
    }

    td.state span {
        background: #ddd;
    }

td.state.allValid span {
    background: #00ff0070;
}

td.state.errors span {
    background: #ff000070;
}

td.state.validanderror span,
div.gamerow span.state.validanderror {
    background: linear-gradient(90deg, #00ff0070 50%, #ff000070 50%);
}
    td.state.validandempty span,
    div.gamerow span.state.validandempty {
        background: linear-gradient(90deg, #00ff0070 50%, #ddd 50%);
    }
    td.state.errorandempty span,
    div.gamerow span.state.errorandempty {
        background: linear-gradient(90deg, #ff000070 50%, #ddd 50%);
    }

td.iserror {
    color: #dd0000;
}

        tr.allvalid td:first-child {
            border-top-left-radius: 50px;
            border-bottom-left-radius: 50px;
        }

tr.errors {
    background-color: #ff0000;
}

.pl-1 {
    padding-left: 0.5rem !important;
}

.pl-2 {
    padding-left: 1.0rem !important;
}

.pl-3 {
    padding-left: 1.5rem !important;
}
.pl-4 {
    padding-left: 2.0rem !important;
}
.pl-5 {
    padding-left: 2.5rem !important;
}

.pl-4 {
    padding-left: 2.0rem!important;
}
.pl-5 {
    padding-left: 2.5rem !important;
}
.pl-6 {
    padding-left: 3.0rem !important;
}

.pr-1 {
    padding-right: 0.5rem!important;
}

.pr-2 {
    padding-right: 1.0rem !important;
}

.pr-3 {
    padding-right: 1.5rem !important;
}

.pr-4 {
    padding-right: 2.0rem !important;
}

.pr-5 {
    padding-right: 2.5rem !important;
}

.pr-6 {
    padding-right: 3.0rem !important;
}

div.gameslist tr td {
    padding-left: 1rem;
    padding-right: 1rem;
}

div.gameslist tr:hover {
    background-color:#ffff0020;
}

.pl-0 {
    padding-left:0px!important;
}

.pr-0 {
    padding-right: 0px !important;
}

.noborder{
    border:none!important;
}

.thin {
    font-weight: 100!important;
}

.normal {
    font-weight: 400;
}

tr.collapse {
    display:none;
}

.clickable {
    cursor:pointer;
}

.bold500{
    font-weight:500;
}
.bold600 {
    font-weight: 600;
}
.bold700 {
    font-weight: 700;
}

.smaller {
    font-size: smaller;
}

.small {
    font-size: small;
}

.larger {
    font-size: larger;
}



.large {
    font-size: large;
}

.x-large {
    font-size: x-large;
}

.xx-large {
    font-size: xx-large;
}

div.gameslist table {
    width:100%;
}

div.gameslist {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: space-between;
    align-items: stretch;
}



    div.gameslist div.gameitem {
        border: solid 1px #ddd;
        background-color: #fafafa;
        border-radius: 2rem;
        padding: 1rem;
        1padding-left: 2rem;
        1padding-right: 2rem;
        color: initial;
        text-decoration: none;
        cursor: pointer;
        margin: 0.5rem;
        box-shadow: 0px 3px 10px 0px #00000030;
        background: linear-gradient(180deg, #fff 0%, #ccc 50%, #aaa 50%, #eee 100%);
        display: flex;
        align-content:center;
        align-items:center;
    }

    div.gameslist div.gameitem a {
        color: initial;
        text-decoration: none;
    }

        div.gameslist div.gameitem div.actions a {
            text-decoration: underline;
        }

        div.gameslist div.gameitem div.actions a.reload {
            color:blue;
        }

            div.gameslist div.gameitem div.actions a.delete {
                color: #aa0000;
            }

        div.gameslist div.gameitem div{
            white-space:nowrap;
        }

        div.gameslist div.gameitem.allvalid {
            1background-color: #00ff0030;
            1background: linear-gradient(180deg, #00ff0010 0%, #00ff0090 100%);
             
        }

        div.gameslist div.gameitem.errors {
            1background-color: #ff000030;
            1background: linear-gradient(180deg, #ff000010 0%, #ff000060 100%);
        }

    div.gameslist div.gameitem:hover {
        box-shadow: 0 0 20px 0px #0b4cdb;
    }


div.points {
    width: 100%;
    margin: auto;
    border-radius: 100px;
    text-align: center;
    padding: 0.5rem;
    padding-left: 3rem;
    padding-right: 3rem;
    box-shadow: 0 0 20px #00000050;
    background-color: #ffff0030;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

    div.points .oi {
        font-size: 3rem;
        line-height: 4rem;
        color: #ffff00;
        margin-right: 1rem;
        text-shadow: 0 0 20px #fff;
    }

.gameslist table td {
    vertical-align:middle;
}

td.notdone {
    font-style:italic;
    color:#aaa;
}

table.playlist {
    border-spacing: 0px 0.5rem;
    border-collapse: separate;
}

table tr.playrow {
    border: none !important;
    height: auto;
    line-height: initial;
    padding: 0px;
    
}

    table tr.playrow td {
        background-color: #f0f0f0;
        height: auto;
        line-height: initial;
        padding: 1rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        
    }

    table tr.playrow:hover td {
        background-color: #ffff0050;
    }

    table tr.playrow td:first-child {
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
    }

    table tr.playrow td:last-child {
        border-top-right-radius: 50px;
        border-bottom-right-radius: 50px;
    }


div.userselections {
    display: block;
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: #fff;
    z-index: 1000000;
    background-image: linear-gradient(175.6deg, rgba(112, 246, 255, 0.33) 11.2%, rgba(221, 108, 241, 0.26) 42%, rgba(229, 106, 253, 0.71) 71.5%, rgb(123, 183, 253) 80.2%,#0033aa90 80.3%, #99bbee 80.5%,#330055 100.2%);
}

    div.userselections div.content {
        width: 100%;
        max-width: 100%;
        margin: auto;
        max-width: 100%;
        border-radius: 0px;
        box-shadow: none;
        background-image: linear-gradient(175.6deg, rgba(112, 246, 255, 0.33) 11.2%, rgba(221, 108, 241, 0.26) 42%, rgba(229, 106, 253, 0.71) 71.5%, rgb(123, 183, 253) 85.2%, #9700ff);
        background-image: linear-gradient(175.6deg, rgba(112, 246, 255, 0.33) 11.2%, rgba(221, 108, 241, 0.26) 42%, rgba(229, 106, 253, 0.71) 71.5%, rgb(123, 183, 253,0.1) 85.2%, #9700ff00);
    }

    div.userselections div.content2 {
        padding: 1rem;
        padding-bottom:1rem;
    }

    div.userselections div.content div.prop {
        font-weight: 400;
        font-size: smaller;
        margin-top: 0.5rem;
        text-align: center;
    }

    div.userselections div.content div.totrans span,
    div.userselections div.content div.totrans h1 {
        text-shadow: -1px 0 2px black, 0 1px 2px black, 1px 0 2px black, 0 -1px 2px black;
    }

    div.userselections div.content div.totrans {
        font-weight: 700;
        text-align: center;
        margin-top: 0.5rem;
        1border: solid 2px #55119990;
        border-radius: 10px;
        max-width: 700px;
        width: fit-content;
        margin: auto;
        padding: 1rem;
        padding-left: 2rem;
        padding-right: 2rem;
        1background-image: linear-gradient(100.0deg, #bb119940, #55119990 70%);
        color: #fff;
    }
    div.userselections div.content div.totrans .part {
        font-weight: 700;
        font-size:1.0rem;
        color: #ffffff;
    }

    div.userselections div.content div.list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-items: center;
        width: fit-content;
        max-width: fit-content;
        margin: auto;
        
    }

        div.userselections div.content div.list div.btn {
            font-weight: 700;
            cursor: pointer;
            width: 80%;
            margin: 0.0rem;
            margin-bottom: 0.50rem;
            padding: 0.5rem;
            background: linear-gradient(180deg, #ffffffa0 1%, #ffffff00 5%, #ffffff00 95%, #00000070);
            background-color: #ffda20d0;
            background-color: #ffc300;
            color: #000;
            font-size: 1.2rem;
            text-shadow: -1px 0 2px #fff, 0 1px 2px #fff, 1px 0 2px #fff, 0 -1px 2px #fff;
            box-shadow: 0 0 3px #fff;
            border-radius:0px;
        }

            div.userselections div.content div.list div.btn.selected {
                border: solid 5px #ffff00;
                background: none;
                background-color: #ffff00d0;
                box-shadow: 0 0 10px #ffff00;
                color: #000;
                font-size: 1.2rem;
                text-shadow: -1px 0 2px #fff, 0 1px 2px #fff, 1px 0 2px #fff, 0 -1px 2px #fff;
                box-shadow: none;
            }

        div.userselections div.content div.list div.btn .oi {
            1color: #fff;
            
        }

            div.userselections div.content div.list div.btn:hover,
            div.userselections div.content div.list div.btn:active {
                color: #000;
                background: #ffe359;
                box-shadow: none;
            }

div.closer {
    font-weight: 100;
    float: right;
    right: 0px;
    padding: 1rem;
    display: block;
    cursor: pointer;
    font-size: 1.5rem;
    text-shadow: -1px 0 2px #fff, 0 1px 2px #fff, 1px 0 2px #fff, 0 -1px 2px #fff;
}

        .opac{
            opacity:0.0;
            display:none;
        }

.trans .selection {
    font-weight: bold;
    display: inline-block;
    border: solid 1px #aaa;
    background-color: #eee;
    1padding: 5px;
    1min-width: 200px;
    1text-align: center;
    1margin: auto;
    margin-right: 1rem;
    border-radius: 50px;
    1padding-left: 1rem;
    1padding-right: 1rem;
}

    .trans .selection.noselection {
        font-weight: 400;
        color: #0b4cdb;
    }

    .trans .selection .oi {
        display:none;
    }

    .trans .selection.noselection .oi {
        display: inline-block;
    }

.trans.valid .selection {
    background-color: #00ff0030;
    border-color: #00ce00;
    color: #006b00;
}

.trans.invalid .selection {
    background-color: #ff000030;
    border-color: #ff0000;
    color: #aa0000;
}

.larger .info{
    font-size:small;
    display:block;
}

.line-height-initial {
    line-height: 15px;
    line-height: initial;
}

tr.grayrow,
tr.grayrow td,
tr.grayrow td tr,
tr.grayrow td tr td {
    color: #aaa;
}

td.smallcol {
    font-size: smaller;
    line-height: initial;
}

td.statecol,
td.state {
    width: 20px;
    max-width: 20px;
    padding-right: 10px!important;
}

div.playlist {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    align-content: center;
    flex-wrap: wrap;
}

    div.playlist div.playrow {
        padding: 0.5rem;
        padding-left: 1.0rem;
        padding-right: 1.0rem;
        border: none;
        border-radius: 0px;
        margin: 0.5rem;
        margin-bottom: 0.3rem;
        margin-top: 0px;
        background: linear-gradient(180deg, #ffffffe0 1%, #ffffff00 10%, #ffffff00 90%, #00000070 100%);
        background-color: #ffda20d0;
        background-color: #ffc300;
        width: 80%;
        box-shadow: 0 0 3px #fff;
    }

        div.playlist div.playrow.selected,
        div.playlist div.playrow.selected:active,
        div.playlist div.playrow.selected:focus {
            background: #ffffae00;
            background: #edc3f8;
            border: solid 3px #55119920;
            box-shadow: none;
        }

            div.playlist div.playrow.selected .playitemrow .largeresult .oi,
            div.playlist div.playrow.selected:active .playitemrow .largeresult .oi,
            div.playlist div.playrow.selected:focus .playitemrow .largeresult .oi {
                display:none;
            }

        div.playlist div.playrow:hover {
            1background: linear-gradient(180deg, #ccc 0%, #fff 100%);
            background: #ffda20;
            box-shadow: none;
            border:none;
        }

        div.playlist div.playrow.valid {
            box-shadow: none;
            background: linear-gradient(90deg, #ffffff40, #ffffff00);
            background: #ffffff20;
            background: #00ff394a;
            border: none;
        }

        div.playlist div.playrow.invalid {
            1border: solid 1px #ff0000a0;
            1border: solid 1px #fff;
            box-shadow: none;
            1background: #d6d6d690;
            background-color: #ff9999;
            border: solid 1px #ffbdbd;
            background-image: linear-gradient(180deg, #ffffffe0 1%, #ffffff00 10%, #ffffff00 90%, #00000070 100%);
            1background: linear-gradient(135deg, #ff999950, #aa000030);
            1background-color: #fff;
        }

            div.playlist div.playrow.invalid .voc {
                1color:#770000;
            }

            div.playlist div.playrow.valid .voc {
                1color: #005500;
            }

        div.playlist div.playrow .voc {
            color: #000;
            font-size: larger;
            font-weight: bold;
            text-shadow: -1px 0 2px #fff, 0 1px 2px #fff, 1px 0 2px #fff, 0 -1px 2px #fff;
            text-shadow: -2px 0 2px #fff, 0 2px 2px #fff, 2px 0 2px #fff, 0 -2px 2px #fff;
        }



        div.playlist div.playrow .trans .selection {
            text-shadow: -1px 0 2px #fff, 0 1px 2px #fff, 1px 0 2px #fff, 0 -1px 2px #fff;
            display: inline-block;
            border: none;
            background: none;
            margin-top: 0.0rem;
            border-radius: 50px;
            width: 100%;
            font-size: larger;
            font-style:italic;
            line-height:10px;
        }

        div.playlist div.playrow .trans{
            margin-top:-3px;
        }

        div.playlist div.playrow .voc,
        div.playlist div.playrow .trans .selection {
        }

        div.playlist div.playrow .trans.valid .selection {
            color: initial;
        }

        div.playlist div.playrow .trans.invalid .selection {
            color:initial;
        }

        div.actions{
            margin:auto;
            width:fit-content;
            padding:1rem;
        }

div.actions a {
    1display: inline-block;
    1text-decoration:none;
    1color:#aa0000;
    1margin: auto;
    1padding:5px;
}

            div.actions a span {
                margin-right:5px;
            }

            div.actions a.delete {
                1display: inline-block;
                1text-decoration: none;
                1color: #aa0000;
                1margin: auto;
            }

    div.actions a.replay {
        display: inline-block;
        text-decoration: none;
        color: #0000ff;
        margin: auto;
    }

            div.deletegame a:hover {
                text-decoration: underline;
                color: #ff0000;
            }

            h1 a {
                font-size:1rem;
                font-weight:600;
                text-decoration:none;
                height:60px;
                line-height:60px;
                vertical-align:middle;
                
                float:left;
                1display:inline-block;
            }

h1.display-4 span {
    display:inline-block;
}


.ml-0 {
    margin-left: 0rem !important;
}
.ml-1 {
    margin-left: 0.5rem !important;
}
.ml-2 {
    margin-left: 1.0rem !important;
}
.ml-3 {
    margin-left: 1.5rem !important;
}
.ml-4 {
    margin-left: 2.0rem!important;
}
.ml-5 {
    margin-left: 2.5rem !important;
}

            .ml--4{
                margin-left:-4rem;
            }

div.points h3.display-4 {
    margin: 0px;
}

ul.navbar-nav{
    margin:auto;
}

div.flex {
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.display-none{
    display:none;
}


.gamerow {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
}

.gamerow div span {
    display: block;
}

div.playrow div.playitemrow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    min-height:65px;    
}

.largeresult span.oi {
    font-size: xx-large !important;
    margin-right: 5px;
    
}

div.playrow.valid .largeresult span.oi {
    color:#00dd00b0;
    
}

div.playrow.invalid .largeresult span.oi {
    color: #e30000;
    color: #ee0000;
}

.block{
    display:block;
}


table.gameslist{
    margin:auto;
    background:none;
    border:none;
}

    table.gameslist tr.gameitem,
    table.gameslist tr {
        border-radius: 0px !important;
        background: #ffffff90;
    }

    table.gameslist tr.divider td {
        border-bottom:solid 0.5rem #eeeeee;
    }

        table.gameslist tr.gameitem.open,
        table.gameslist tr.open {
            background: #fff;
            
        }

        table.gameslist tr.gameitem td {
            vertical-align: middle;
            border-radius: 0px !important;
            padding: 1rem;
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }

            table.gameslist tr.gameitem td a {
                text-decoration: none;
                color: #3567d3;
            }

                table.gameslist tr.gameitem td a:hover {
                    color: #0a44c3;
                }

            
            table.gameslist tr.gameitem td:last-child {
                text-align: right;
            }

        table.gameslist tr.gameitem:hover {
            background:#ffff00;
        }

    table.gameslist tr.gameitem.allvalid {
    }

        table.gameslist tr.gameitem td span.oi-x,
        div.gameslist tr td span.oi.x {
            color: #cc000090;
        }

            table.gameslist tr.gameitem td span.oi-x.nd,
            div.gameslist tr td span.oi.nd {
                color: #999;
            }

        table.gameslist tr.gameitem td span.oi-check,
        div.gameslist tr td span.oi.c {
            color: #00aa0090;
        }

div.gameslist tr td.state2 {
    white-space:nowrap;
    padding:0px;
}

div.settingsInfo {
    box-shadow:0 0 20px #00000050;
    width: fit-content;
    margin: auto;
    margin-bottom:1rem;
    padding: 2rem;
    padding-left: 3rem;
    padding-right: 3rem;
    border-radius: 100px;
    background: #ffff0030;
}

            div.settingsInfo span.school {
                font-weight:600;
            }
            div.settingsInfo span.language {
                display: block;
                font-size: x-large;
                font-weight: bold;
            }

.trans img,
.voc img {
    margin-top: -3px;
    margin-right:0;
}

.text-right{
    text-align:right;
}

.font-size-initial {
    font-size: 1.0rem!important;
}

.font-weight-normal{
    font-weight:normal!important;
}

h1.hl,
h3.hl {
    color: #fff;
    text-shadow: 0 5px 4px #000;
}

h3.hl {
    color: #ffffff;
    margin: 0;
    font-size: 1.1rem;
    text-shadow: -1px 0 3px #000000, 0 1px 3px #000000, 1px 0 3px #000000, 0 -1px 3px #000000;
}

span.subtitle {
    color: #000000f0;
    font-weight:normal;
    font-size: initial;
    display:block;
    height: initial;
    line-height:initial!important;
}

.margin-auto{
    margin:auto;
}

    h3.hl{
        height:55px;
        line-height:55px;
    }

.line-height-50px {
    line-height:50px;
}

.usershort {
    margin: 0;
    text-transform: capitalize;
}

.userlong {
    font-size:small;
    display:block;
}

    .mr-0 {
        margin-right: 0;
    }
.mr-1 {
    margin-right: 0.5rem;
}
.mr-2 {
    margin-right: 1.0rem;
}
.mr-3 {
    margin-right: 1.5rem;
}
.mr-5 {
    margin-right: 2.0rem;
}
.mr-5 {
    margin-right: 2.5rem;
}


.indexmenu .row  {
    display:flex;
    flex-direction:column;
}

.indexmenu .row .col {
    text-align : center;
    1padding:0px;
}

.mainbacklink {
    position: fixed;
    left: 0.0rem;
    border-radius: 50px;
    color: #ffffffd0;
    top: 0px;
    height: 55px;
    line-height: 60px;
    width: 50px;
    text-align: center;
    z-index: 1000000;
    font-size: larger;
    text-shadow: -1px 0 3px #000000, 0 1px 3px #000000, 1px 0 3px #000000, 0 -1px 3px #000000;
}

div.login {
    width: auto;
    margin: auto;
    padding: 2rem;
}

div.stars {
    background-image: url(/img/ico/star.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    width: fit-content;
    margin: auto;
    min-width: 8rem;
    min-height: 8rem;
}

    div.stars.sm {
        min-width: 9rem;
        min-height: 9rem;
        filter: hue-rotate(305deg) saturate(500%);
    }

    div.stars.pts50pc {
        min-width: 6rem;
        min-height: 6rem;
        filter: hue-rotate(305deg) saturate(500%);
    }

    div.stars.hl {
        filter: none!important;
    }

div.stars.md {
    min-width: 9rem;
    min-height: 9rem;
}

    

div.stars-layer {
    width: fit-content;
    margin: auto;
}

    div.stars-layer.pts1,
    div.stars-layer.amts1 {
        display: flex;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        border-radius: 100px;
        padding-left: 0.0rem;
        padding-right: 0.0rem;
        1background-image: linear-gradient(100.0deg, #bb119940, #55119990 70%);
        width: 100%;
        max-width: 100%;
    }

        div.stars-layer.pts1.bg,
        div.stars-layer.amts1.bg {
            /*background-image: linear-gradient(135deg, #f17171,#aa0000c0);*/
            padding-top: 0.0rem;
            padding-bottom: 0.0rem;
            padding-left: 0rem;
            padding-right: 0rem;
            width: fit-content;
            max-width: fit-content;
        }

        div.stars-layer.pts1 .stars,
        div.stars-layer.amts1 .stars {
            min-width: 4rem;
            min-height: 4rem;
            animation: animatedBackground 10s linear infinite alternate;
            animation-delay:0s;
        }

        div.stars-layer.pts1 .col h1,
        div.stars-layer.amts1 .col h1 {
            min-width:100px;
            text-align:left;
        }

        div.stars-layer.pts1 .col,
        div.stars-layer.amts1 .col {
            padding: 0px;
            width: fit-content;
            max-width: fit-content;
        }

        div.stars-layer.pts1 .col:first-child {
            1padding-right: 0px;
        }

        div.stars-layer .text-line {
            text-align: center;
            font-weight: 700;
            color:#fff;
            text-shadow:0 0 4px #000;
        }

    div.stars-layer.pts1 .text-line,
    div.stars-layer.amts1 .text-line {
        text-align: center;
        font-weight: 500;
        line-height: normal;
        font-size:small;
    }

    div.stars-layer.pts1 .ptsUpCount,
    div.stars-layer.amts1 .amtUpCount {
        font-size: larger;
    }

    .mx {
     padding:0px;
     margin:0px;
    }

div.stars-layer.pts1 .ptsUpCount.mx,
div.stars-layer.amts1 .amtUpCount.mx {
    position: initial;
    height: auto;
    line-height: 4rem;
    
    padding: 0px;
    color: #fff;
    text-shadow: -1px 0 2px black, 0 1px 2px black, 1px 0 2px black, 0 -1px 2px black;
    text-shadow: -2px 0 2px black, 0 2px 2px black, 2px 0 2px black, 0 -2px 2px black;
}

    .starfill {
        background: #f0db0d;
    }

@keyframes example {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
@keyframes example1 {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}
@keyframes example3 {
    from {
        1background-size: 95%;
        1opacity: 0.5;
        1filter: sepia(100%) hue-rotate(190deg) saturate(500%);
        1filter: hue-rotate(190deg) saturate(500%);
    }

    to {
        1background-size: 100%;
        1opacity: 1.0;
        1filter: sepia(0%) hue-rotate(0deg) saturate(0%);
    }
}

@keyframes loadinganimat {
    from {
        font-size:2rem;
        color:#000;
    }

    to {
        font-size:1.5rem;
        color:#00000005;
    }
}

div.stars {
    animation-name: example3;
    animation-duration: 5.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    //infinite;
    animation-direction: alternate;
    display: flex;
    justify-content: center;
    align-items: center;
}

    div.stars #ptsUpCount {
        
    }

#fixedactions {
    position: fixed;
    bottom: 0px;
    height: 120px;
    background: #ffffff70;
    background: linear-gradient(15deg, #ee99ffe0,#33005550);
    background: none;
    left: 0px;
    right: 0px;
}

    #fixedactions a.btn {
        font-size:1.5rem;
        min-width:100px;
    }

    footer {
        position: absolute;
        bottom: 0px;
        font-size: smaller;
        font-weight: 500;
        color: #ffffff90 !important;
        left: 0px;
        right: 0px;
    }

img.sellang {
    height: 20px;
    margin-right: .25rem;
    background-color: transparent;
    background: #ffffff50;
    box-shadow: 0 0 10px #fff;
    1box-shadow: -1px 0 2px #fff, 0 1px 2px #fff, 1px 0 2px #fff, 0 -1px 2px #fff;
}

div.stars-layer.img{
    height:100px;
}

div.stars-layer.img img {
    height:100px;
    animation-name: example1;
    animation-duration: 10.0s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    //infinite;
    animation-direction: reverse;
    display: flex;
    justify-content: center;
    align-items: center;
    position:absolute;
    z-index:0;
    width:fit-content;
}



div.stars-layer.img,
div.stars-layer.img img,
div.stars-layer .ptsUpCount {
    height: 150px;
    line-height: 150px;
}

.align-right {
    text-align : right;

}

.bold{
    font-weight:bold;
}

tr.gameitem td.status span,
tr.gameitem td.actions a {
    display: block;
    white-space:nowrap;
}

tr.gameitem.allvalid td.status span {
    color: #00aa00;
}

tr.gameitem.errors td.status span {
    color: #aa0000;
}

tr.gameitem td.status span {
    
}

.nowrap{
    white-space:nowrap;
}

table.gameslist,
.header {
    width: 100%;
    margin:auto;
    max-width: 700px;
    margin-bottom: 1.5rem;
}

    table.gameslist tr.gameitem {
        border:none;
    }

    table.gameslist tr.gameitem.mod {
        height:auto;
        line-height:normal;
    }

        table.gameslist tr.gameitem.mod td {
            padding-top: 1rem;
            padding-bottom: 0rem;
        }
            table.gameslist tr td.actions{
                padding-bottom:1rem;
            }


            .header {
                margin-bottom: 0rem;
                padding-top: 0.5rem;
                background-color: #fff;
            }

.align-left{
    text-align:left!important;
}

.playitemrow .part span,
.userselections span.part {
    font-size: 0.8rem;
    font-weight: 500;
    display: block;
    color:#555;
    1text-decoration:underline;
    1text-shadow:none;
    1color:#fff;
}

.userselections span.part {
    font-size: initial;
    font-weight: 600;
    display: block;
    text-align: center;
}

.align-items-center {
    align-items:center;
}

.statstxt {
    font-size:small;
}

.statstxt .hd {
    font-weight:700;
}


div.pointsrow,
div.pointsrow .col{
    margin: 0px;
    padding: 0px;
    white-space:nowrap;
}

div.pointsrow div.stars {
    background-image: url(/img/ico/star.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    width: fit-content;
    margin: auto;
    min-width: 1.65rem;
    min-height: 1.65rem;
    
    margin-right:5px;
}

    div.pointsrow div.goldt,
    div.pointsrow div.goldc {
        background-image: url(/img/ico/stapel400.png);
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        width: fit-content;
        margin: auto;
        min-width: 1.5rem;
        min-height: 1.5rem;
        margin-right: 2px;
    }

    div.pointsrow div.goldc {
        background-image: url(/img/ico/coin.png);
        margin-right: 5px;
    }

    div.pointsrow .text-line {
        color: #fff;
        font-size: 1.1rem;
        font-weight: bold;
        text-shadow: -1px 0 2px black, 0 1px 2px black, 1px 0 2px black, 0 -1px 2px black;
    }

    div.pointsrow .oi{
        padding-right:5px;
        font-size:1.0rem;
        color:#ffd300;
    }


    div.pointsrow a {
        height: initial !important;
        display: block;
        background: none !important;
        border-radius: 0px !important;
        line-height: initial !important;
        padding: 0px !important;
        margin: 0px !important;
        width: fit-content !important;
    }

div.stars.goldt,
div.stars.goldc {
    background-image: url(/img/ico/coins1.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    width: fit-content;
    margin: auto;
}

div.stars.goldc {
    background-image: url(/img/ico/coin1.png);
    background-image: url(/img/ico/coina1.png);
    background-size: contain;
    background-position: center 3px;
    background-repeat: no-repeat;
    width: fit-content;
    margin: auto;
    animation: animatedBackground 10s linear infinite alternate!important;
    animation-delay: 1s!important;
}

div.stars-layer .amtUpCount,
div.stars-layer .ptsUpCount {
    z-index: 1000001;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    text-shadow: 0 1px 5px #fff;
    z-index: 10000;
    position: absolute;
    color:#333;
    margin-top:2px;
}

table.vocstatlist{
    margin:auto;
    width:100%;
    max-width:700px;
}

table.vocstatlist tr {
    height:auto;
    line-height:initial;
}

table.vocstatlist tr td{
    padding-left:1rem;
}

    table.vocstatlist tr.null td {
        color:#777;
    }

.playtitle {
    position: absolute;
    left: 0px;
    right: 0px;
    text-align: center;
    top: 50px;
    1height: 40px;
    1line-height: 40px;
    font-weight: 700;
    font-size: 1.0rem;
    1background-image: linear-gradient(215.6deg, rgba(112, 246, 255, 1.33) 11.2%, rgba(221, 108, 241, 0.26) 42%, rgba(229, 106, 253, 0.71) 71.5%, rgb(123, 183, 253) 85.2%, #9700ff);
    color: #00000090;
    text-shadow: -1px 0 2px #fff, 0 1px 2px #fff, 1px 0 2px #fff, 0 -1px 2px #fff;
}
    .playtitle img {
        margin-top: -5px;
        box-shadow: 0 0 10px #fff;
        margin-right:5px;
    }

.btn.newgame.clickable {
    line-height:2.5rem;
}

table.billingslist{
    margin:auto;
}

select#user {
    background: none;
    color: initial;
    1 background:#fcfc8390;
    border: none;
    outline: none;
    1box-shadow: 0 3px 5px #00000030;
    margin-bottom: 10px;
    max-width: 700px;
    width: fit-content;
    margin: auto;
    font-size: x-large;
    text-align: center;
    text-shadow: -1px 0 2px #fff, 0 1px 2px #fff, 1px 0 2px #fff, 0 -1px 2px #fff;
    color:#ffaa00;
    text-shadow: -1px 0 2px #000, 0 1px 2px #000, 1px 0 2px #000, 0 -1px 2px #000;
    text-transform: capitalize;
}

div.part{
    margin-bottom:-6px;
}

table{
    background:#fff;
    border:solid 10px #fff;
}

td.actions{

}

    td.actions a {
        text-decoration: none;
        padding-left: 1rem;
        padding-right: 1rem;
    }

.row.mainpts {
    display: flex;
    max-width: fit-content;
    

    margin: auto;
    margin-top: 1rem;
}

    .row.mainpts .col {
        padding-left: 1rem;
        padding-right: 1rem;
    }

.fit-content-important {
    width: fit-content !important;
    max-width: fit-content !important;
}

.vocstars {
    display: block;
    width: fit-content;
    min-width: 41px;
    min-height: 40px;
    height: 40px;
    line-height: 40px;
    background-image: url(/img/ico/star.png);
    background-size: contain;
    background-position: 1px center;
    background-repeat: no-repeat;
    padding: 0px;
    font-size: 1.1rem;
    color: #000;
    text-shadow: 0 0 3px #fff;
    text-align: center;
    font-weight: 700;
}

.window {
    background: none;
    background-color: #666;
    background-image: linear-gradient(175.6deg, #dd77ee 0.0%, #99bbdd 6.0%,#aaaaff 7.3%, #99eeff 11.6%, #dd88ee 42%, #dd88ff 71.5%, #aebbff,#bbddff 80.3%, #99bbee 80.5%,#330055 100.2%);
    background-image: linear-gradient(175.6deg, #9933aa90 0.0%, #99bbdd 6.0%,#0000ff50 7.3%, rgba(112, 246, 255, 0.33) 11.6%, rgba(221, 108, 241, 0.26) 42%, rgba(229, 106, 253, 0.71) 71.5%, rgb(123, 183, 253) 80.2%,#0033aa90 80.3%, #99bbee 80.5%,#330055 100.2%);
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 5000000;
    display: none;
    color: #fff;
    text-shadow: -1px 0 2px black, 0 1px 2px black, 1px 0 2px black, 0 -1px 2px black;
    1color: #000;
    1text-shadow: -1px 0 2px #fff, 0 1px 2px #fff, 1px 0 2px #fff, 0 -1px 2px #fff;
    font-weight: 700 !important;
    min-height:100%;
}

    .window .headline {
        height: 50px;
        line-height: 50px;
    }

    a.settings.helpbtn {
        min-width:50px;
        max-width:50px;
        padding-left:0px!important;
        padding-right:0px!important;
        margin:0px;
        margin-top:0.5rem;
        line-height:2.5rem!important;
    }

        a.settings.helpbtn span.oi,
        a.settings.delete span.oi {
            margin: 0px;
        }

.window .headline h1 {
    text-align: center;
    font-size: 1.1rem;
    height: 50px;
    line-height: 50px;
    font-weight: 700;
}

.window .headline .closer {
    text-align: center;
    position: absolute;
    top: 0px;
    right: 0px;
    display: inline-block;
    1height: 50px;
    1line-height: 50px;
    padding:0.5rem;
    width: 50px;
    cursor: pointer;
    font-size:1.5rem;
}

.window .content {
    width: 100%;
    min-width: 100%;
    background: none;
    1overflow-y:scroll;
}

    .window .content table {
        1width: 100%;
        1min-width: 100%;
        margin: auto;
        background: none;
        border: none;
        margin:1rem;
    }

        .window .content table td,
        .window .content table td {
            vertical-align: middle;
        }

            .window .content table td.value {
                padding-left: 27px;
                
            }

                    .window .content table td.value div,
                    .window .content table td.entry div {
                        
                    }

.window .content table td.stars,
.window .content table td div.stars,
.window .content table td div.eur,
.window .content table td.eur {
    background-image: url(/img/ico/star.png);
    background-size: 22px;
    background-position: left center;
    background-repeat: no-repeat;
    white-space: nowrap;
}

                .window .content table td div.stars,
                .window .content table td div.eur {
                    padding-left: 28px;
                    display: block;
                    text-align: left;
                    height: initial !important;
                    min-width: auto !important;
                    min-height: auto !important;
                    width:auto;
                }

                .window .content table td.eur,
                .window .content table td div.eur {
                    background-image: url(/img/ico/coin.png);
                    background-size: 20px;
                    
                }

            
                .window .content table tr.noborder {
                    border: none;
                }

                table.vocs {
                    width:auto;
                }

                    table.vocs tr td {
                        vertical-align: middle;
                        padding-top: 0px;
                        padding-bottom: 0px;
                    }

                    table.vocs tr,
                    table.vocs tr td {
                        height: 1rem;
                        line-height: 1.7rem;
                    }

                    table.vocs tr:hover{
                        background-color:#ffff0030;
                    }

                        table.vocs tr.verb td {
                            color:blue;
                        }

#loader {
    //background-image: linear-gradient(175.6deg, #9933aa 0.0%, #99bbdd 6.0%,#0000ff50 7.3%, rgba(112, 246, 255, 0.33) 11.6%, rgba(221, 108, 241, 0.26) 42%, rgba(229, 106, 253, 0.71) 71.5%, rgb(123, 183, 253) 80.2%,#0033aa90 80.3%, #99bbee 80.5%,#330055 100.2%);
    //background-image: linear-gradient(175.6deg, #9933aa 0.0%, #99bbdd 6.0%,#aaaaff 7.3%, #99eeff 11.6%, #dd99ee 42%, #cc99fe 71.5%, rgb(123, 183, 253) 80.2%,#6699aa 80.3%, #99bbee 80.5%,#330055 100.2%);
    position: absolute;
    z-index: 5000001;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    text-shadow:0 0 10px #fff;
    font-weight: bold;
    animation-name: loadinganimat;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    color:#fff!important;
    display:none;
}

.row.flex {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    align-content: center;
    justify-content: center;
}

.highscoresS table,
.highscoresI table {
    margin-top: 1rem;
}

    .highscoresS table tr td,
    .highscoresI table tr td {
        font-size: large;
    }

    .highscoresI table tr td {
        font-size: initial;
    }

.highscoresS .content,
.highscoresI .content {
    display: flex;
    margin: auto;
    width: fit-content;
    width: 100%;
    max-width: 500px;
}

    .highscoresS .content .item,
    .highscoresI .content .item {
        margin-left: 1rem;
        font-size: small;
    }

        .highscoresS .content .item .user,
        .highscoresI .content .item .user {
            font-weight: bold;
            text-transform: capitalize;
            text-shadow: 0 0 3px #fff;
        }

        .highscoresS .content .item .hs,
        .highscoresI .content .item .hs {
            text-shadow: 0 0 3px #fff;
            font-weight: bold;
            padding-left: 20px;
            background-image: url(/img/ico/star.png);
            background-size: 15px;
            background-position: 2px center;
            background-repeat: no-repeat;
        }

#idxhs {
    margin-bottom: 1rem;
    margin-top: -2rem;
    background-image: linear-gradient(100.0deg, #B389D1ff, #8355BAf0 70%);
    background-image: linear-gradient(135.0deg, #bb119940, #55119990 70%);
    background-image: linear-gradient(178.0deg, #00000000 2%, #bb1199a0, #55119990 75%, #00000000 100%);
    margin-left: -1rem;
    margin-right: -1rem;
    padding: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 3rem;
}

#idxhsi {
    margin-bottom: 0rem;
    margin-top: 0rem;
    margin-left: -0rem;
    margin-right: -0rem;
    padding: 0rem;
    padding-left: 0rem;
    padding-right: 0rem;
    padding-bottom: 0rem;
    1background-image: linear-gradient(100.0deg, #bb119940, #55119990 70%);
}


a.btn.newgame {
    min-width:175px;

}
#menuwindow {
    background-image: linear-gradient(175.6deg, #9933aa90 0.0%, #99bbdd 6.0%,#0000ff50 7.3%, rgba(112, 246, 255, 0.33) 11.6%, rgba(221, 108, 241, 0.26) 42%, rgba(229, 106, 253, 0.71) 71.5%, rgb(123, 183, 253) 80.2%,#0033aa90 80.3%, #99bbee 80.5%,#330055 100.2%);
}

.indexmenu a.btn.newgame {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    font-size: 2.0rem;
    text-transform: uppercase;
    border-radius: 0px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    margin: 0px;
    border-right: solid 2px #00000070;
    border-left:solid 2px #ffffff90
}

.indexmenu a.btn.newgame.replay {
    font-size: 1.2rem;
}

.indexmenu a.btn.newgame span.oi{
    padding:0px;
    margin:0px;
}
    .indexmenu .row.fixedflex {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: fit-content;
    margin: auto;
}

.indexmenu .row.fixedflex .col{
    padding:0px;
}

.highscoresS table,
.highscoresI table {
    background: none;
    margin: 0px;
    border: none;
    border-radius: 10px;
    width: 100%;
}

.highscoresI table {
    background: none;
    margin: auto;
    border: none;
    width: 100%;
    min-width: 250px;
    max-width: 504px;
    1background-image: linear-gradient(200.0deg, #bb119940, #55119990 70%);
    1background-image: linear-gradient(200.0deg, #bb119910, #55119950 70%);
    background-image: linear-gradient(315.0deg, #bb119920, #55119930 70%);
    border-radius: 20px;
}

.highscoresI.pinned {
    margin: auto;
    margin-top: -10px;
    
}

.highscoresI.dark table {
    background-image: linear-gradient(100.0deg, #bb119940, #55119990 70%);
    background-image: linear-gradient(100.0deg, #bb119920, #55119920 70%);
    border-radius: 20px;
}

.highscoresI.pinned table {
    1background-image: linear-gradient(100.0deg, #e5c92d90, #ff990090 70%);
    
    border-radius: 20px;
}

.hsbg1 .highscoresI.pinned table {
    filter:grayscale(0.60);
}


    .highscoresI.pinned table tr:first-child td {
        1padding-top:3rem;
    }


    .highscoresS table tr, .highscoresI table tr {
        height: auto;
        line-height: initial;
        border: none;
    }

    .highscoresI table tr {
        
        margin-bottom:1rem;
    }

        .highscoresI table tr {
            
        }

            .highscoresI table tr:first-child td {
             
            }



            .highscoresS table tr td,
            .highscoresI table tr td {
                vertical-align: middle;
                font-weight: bold;
                padding: 0px;
                padding-right: 0.2rem;
                padding-top: 0.25rem;
                padding-bottom: 0.25rem;
                margin: 0px;
                color: #000;
                text-shadow: -1px 0 2px #fff, 0 1px 2px #fff, 1px 0 2px #fff, 0 -1px 2px #fff;
                text-shadow: -2px 0 2px #fff, 0 2px 2px #fff, 2px 0 2px #fff, 0 -2px 2px #fff;
                font-size: 1.0rem;
            }


            .highscoresS table tr td:first-child,
            .highscoresI table tr td:first-child {
                padding-left: 0.5rem;
            }

            .highscoresS table tr td:last-child,
            .highscoresI table tr td:last-child {
                padding-right: 0.5rem;
            }

            .highscoresI table tr td:first-child {
                min-width: 50px;
                padding-left: 0px;
                padding-right: 5px;
            }

            .highscoresI table tr td:last-child {
                padding-right: 1rem;
            }


        .highscoresS table tr.current td,
        .highscoresI table tr.current td {
            color: #84e7ff;
        }

            .highscoresI table tr.current {
                background: #84e7ff;
                background: #ff990050;
                background:none;
                box-shadow: 0 0 10px #ff9900;
                1background-image: linear-gradient(#ffffff10,#ffff00);
                1outline: solid 1px #ffff00;
                1outline-style: auto;
                1border-radius: 50px;
                box-shadow: none;
            }
                .highscoresI table tr.current td {
                    color: #ffff00;
                    font-size: 1.25rem;
                    text-shadow: -1px 0 2px black, 0 1px 2px black, 1px 0 2px black, 0 -1px 2px black;
                    text-shadow: -2px 0 2px black, 0 2px 2px black, 2px 0 2px black, 0 -2px 2px black;
                    background: none;
                }

                    .highscoresI table tr.current td:first-child {
                    }

                    .highscoresI table tr.current td.score {
                    }


.highscoresS table td.user,
.highscoresI table td.user,
.highscoresS table div.user,
.highscoresI table div.user {
    font-weight: bold;
    text-transform: capitalize;
    width: 100%;
}

.highscoresI table td.score,
.highscoresS table td.score,
.highscoresI table div.score,
.highscoresS table div.score,
.highscoresI table div.amount
.highscoresS table div.amount {
    text-align: right;
    width: fit-content;
    max-width: fit-content;
}

.highscoresI table div.row,
.highscoresI table div.row div.col,
.highscoresS table div.row,
.highscoresS table div.row div.col {
    margin: 0px;
}

.highscoresI table div.row,
.highscoresS table div.row{
    display:flex;
}

.highscoresS table td.hs,
.highscoresI table td.hs,
.highscoresI table div.hs,
.highscoresS table div.hs {
    font-weight: bold;
    text-align: right;
    width: fit-content;
    max-width: fit-content;
    white-space:nowrap;
}

    .highscoresS table td.hs .hs,
    .highscoresI table td.hs .hs,
    .highscoresI table div.hs .hs,
    .highscoresS table div.hs .hs {
        font-weight: bold;
        background-image: url(/img/ico/star.png);
        background-size: 18px;
        background-position: 0px center;
        background-repeat: no-repeat;
        text-align: right;
        min-width: 18px;
        
        line-height:initial;
        display:inline-block;
    }

.highscoresI table div.amount,
.highscoresS table div.amount,
.highscoresI table td.amount,
.highscoresS table td.amount {
    font-weight: bold;
    text-align: right;
    width: fit-content;
    max-width: fit-content;
    padding-right:0.5rem;
    white-space:nowrap;
}

    .highscoresI table td.amount .amt,
    .highscoresS table td.amount .amt {
        background-image: url(/img/ico/coin.png);
        background-size: 17px;
        background-position: 0px 3px;
        background-repeat: no-repeat;
        text-align: right;
        1max-width: fit-content;
        padding:0px;
        min-width:18px;
        display:inline-block;
        1height:38px;
        line-height:initial;
    }
    .highscoresI table td.amount span,
    .highscoresS table td.amount span {
        display: inline-block;
    }

.highscoresI table tr.current div.amount .amt,
.highscoresS table tr.current div.amount .amt {
    background-position: 2px 8px;
}

.highscoresI table tr.current td.amount .amt,
.highscoresS table tr.current td.amount .amt {
    background-position: center 6px;
}

.highscoresI table tr.current div.hs,
.highscoresS table tr.current div.hs {
    background-position: 2px 7px;
}

.highscoresS .content .row.fixedflex,
.highscoresI .content .row.fixedflex {
    1width:100%;
}

.h1.larger{
    font-size:x-large;
}

.summaryframe {
    width: 100%;
    margin: auto;
    max-width: 700px;
    margin-top: 1.0rem;
    background-color: #ffffffd0;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.summary {
    width: fit-content;
    margin: auto;
    max-width: 700px;
}

    .summary .row {
        height: 1.5rem;
        line-height: 1.5rem;
    }

.summary .row .col{
    white-space:nowrap;
    text-align:right;
    font-weight:bold;
}

    .summary .row .col:first-child {
        min-width: 200px;
        text-align: left;
    }

.mwbtns .btn{
    min-width:200px;
}

.indexmenu .fixedflex.homemenu {
    width: 90%;
    display: flex;
    margin-bottom: 0rem;
    flex-wrap: nowrap;
}

.indexmenu .fixedflex.homemenu.continue {
    width: 100%;
}
    .indexmenu .fixedflex.homemenu .col {
        padding:0px;
    }

        .indexmenu .fixedflex.homemenu .col:first-child {
            width: 75%;
            max-width: 75%;
            padding: 0px;
        }

    .indexmenu .fixedflex.homemenu.continue .col:first-child {
        width: 70%;
        max-width: 70%;
        padding: 0px;
    }

        .indexmenu .fixedflex.homemenu .col.settings,
        .indexmenu .fixedflex.homemenu .col.delete {
            width: 25%;
            max-width: 25%;
            padding: 0px;
        }

        .indexmenu .fixedflex.homemenu .col:first-child a {
            
        }

        .indexmenu .fixedflex.homemenu .col.settings a,
        .indexmenu .fixedflex.homemenu .col.delete a {
            width: 100%;
            min-width: 100%;
            margin: 0px;
            max-width: 100%;
            font-size: 1.2rem;
            border-radius: 0px;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            border-right: solid 2px #00000070;
            border-left: solid 2px #ffffff90;
            padding-left: 0px;
            padding-right: 0px;
            line-height: 2.5rem;
        }

        .indexmenu .fixedflex.homemenu .col.delete a {
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
            border-right: solid 1px #00000090;
            padding-left: 0px;
            padding-right: 0px;
            line-height: 2.5rem;
        }

div.homeline {
    line-height: 20px;
    margin-top: 7px;
    font-size: small;
    text-align: center;
    text-shadow: -1px 0 2px black, 0 1px 2px black, 1px 0 2px black, 0 -1px 2px black;
}

            div.homeline .titleuser {
                display: block;
                font-size: 1.5rem;
                line-height: 50px;
                text-transform: capitalize;
            }

            div.homeline .titleuser .oi {
                font-size: 1.1rem;
                top:-0px;
            }

div.ranking {
    border-radius: 100px;
    padding: 0.5rem;
    padding-left: 2.0rem;
    padding-right: 2.0rem;
    background-image: linear-gradient(100.0deg, #bb119940, #55119990 70%);
    width: fit-content;
    max-width: 100%;
    margin-bottom: 1rem;
    margin:auto;
}
    div.ranking .info {
        color:#fff;
        font-weight:700;
    }
        div .ranking .row {
            width:100%;
        display: flex;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        font-size:1.5rem;

    }

            div.ranking .row .col {
                vertical-align: middle;
                font-weight: bold;
                padding: 0px;
                padding-right: 0.2rem;
                padding-top: 0.25rem;
                padding-bottom: 0.25rem;
                margin: 0px;
                color: #fff;
                text-shadow: 0 0 3px #000;
                text-shadow: -1px 0 2px black, 0 1px 2px black, 1px 0 2px black, 0 -1px 2px black;
                1margin-left: 1rem;
                
            }

                div.ranking .row .col .rank {
                    border: solid 3px #ffff00;
                    display: block;
                    text-align: center;
                    padding-left: 0.5rem;
                    padding-right: 0.5rem;
                    border-radius: 50px;
                    margin-left: 1rem;
                    background: #ffff0090;
                    box-shadow:0 0 10px #ffff00;
                    line-height:40px;
                    height:50px;
                    min-width:50px;
                }

.font-size-larger {
    font-size:larger!important;
}

.font-size-large {
    font-size: large!important;
}

.font-size-x-large {
    font-size: x-large !important;
}

.mt--15{
margin-top:-15px!important;
}

.width80pc {
    width: 80%!important;
}

#BigStarsAnimatLayer,
#BonusAnimatLayer {
    background: #ffffffd0;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    display: flex;
    z-index: 6000001;
}

    #BigStarsAnimatLayer div.back, #BonusAnimatLayer div.back {
        position: absolute;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
        display: flex;
        height: 100vh;
        flex-direction: column;
        justify-content: space-evenly;
    }

    #BigStarsAnimatLayer div.stars, #BonusAnimatLayer div.stars {
        background-image: url(/img/ico/star.png);
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        1width: fit-content;
        margin: auto;
        min-width: 100%;
        height: 100%;
        min-height: 175px;
        opacity: 0;
    }

    #BigStarsAnimatLayer.bonus div.stars, #BonusAnimatLayer.bonus div.stars {
        background-image: url(/img/ico/star.png);
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        1width: fit-content;
        margin: auto;
        min-width: 100%;
        height: 100%;
        min-height: 175px;
        opacity: 1;
    }

    #BigStarsAnimatLayer div.back div.inner, #BonusAnimatLayer div.back div.inner {
        min-width: 100%;
        min-height: 250px;
        position: fixed;
        top: 50%;
        left: 50%;
        margin: auto;
        transform: translate(-50%, -50%);
    }

    #BigStarsAnimatLayer div.stars .text-layer.ptsUpCount,
    #BonusAnimatLayer div.stars .text-layer.ptsUpCount {
        font-size: 3rem;
        font-weight: bold;
        text-shadow: -1px 0 2px #fff, 0 1px 2px #fff, 1px 0 2px #fff, 0 -1px 2px #fff;
        margin-top:20px;
    }

    #BigStarsAnimatLayer div.stars {
        display: flex;
        flex-direction: column;
        line-height:35px;
    }

    #BigStarsAnimatLayer div.stars #bonuspanel {
        font-size: 1.5rem;
        font-weight: bold;
        color:#aa0000;
        text-shadow: -1px 0 2px #fff, 0 1px 2px #fff, 1px 0 2px #fff, 0 -1px 2px #fff;
    }

    #BigStarsAnimatLayer .btn.done {
        font-weight: bold;
        font-size: larger;
        min-width: 150px;
        background-color: #00c10d;
    }

.details {
    color: #fff !important;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

h3 a.top {
    font-size: initial;
    float: right;
    height: 30px;
    line-height: 30px;
}

div.row.vocjump {
    width: fit-content;
    max-width: 700px;
    display:flex;
    margin:auto;
}

    div.row.vocjump div.col {
        margin: auto;
        padding:0px;
    }

div.row.vocjump div.col a {
    color:#fbe1ff;
    1text-decoration:none;
    font-weight:700;
    padding:5px;
}

    div.row.vocjump div.col a:hover {
        color: #fff;
        text-decoration:none;
    }

#BigStarsAnimatLayer .ac{
    min-height:250px;
}

.login h1 {
    color:#fff;
    text-shadow: -1px 0 2px black, 0 1px 2px black, 1px 0 2px black, 0 -1px 2px black;
    text-align:center;
}

.login input.form-control {
    background: #ffffffa0;
    border:none;
}

.activities {
    display: flex;
    flex-wrap: wrap;
    max-width: 700px;
    margin: auto;
    justify-content: center;
}

    .activities .row {
        display: flex;
        flex-wrap: wrap;
        width: fit-content;
        margin: 0.5rem;
        border-radius: 10px;
        margin-bottom: 0.5rem;
        background-color: #ffffffd0;
        padding: 5px;
        justify-content: center;
        align-items: center;
    }

        .activities .row .col {
            width: fit-content;
            max-width: fit-content;
            margin: auto;
            margin: 0px;
            padding: 5px;
            line-height:17px;
        }

            .activities .row .col h1 {
                margin: 0px;
                padding: 0px;
                color:#ffff00
                ;
                text-shadow: -1px 0 3px #000000, 0 1px 3px #000000, 1px 0 3px #000000, 0 -1px 3px #000000;
            }

            .activities .row .col img {
                height:15px;
                
            }

            .activities .row .col span {
                height: 20px;
                line-height: 20px;
                padding-top:2px;
                display: inline-block;
            }

a.nostyle{
    text-decoration:none!important;

}

.highscoresI .hstitle,
.highscoresS .hstitle {
    border-radius: 50px;
    display: inline-block;
    padding: 0.2rem;
    line-height: initial;
    padding-left: 1rem;
    padding-right: 1rem;
    background: #cb4848;
    box-shadow: 0 0 10px #ffffffe0;
    text-transform: uppercase;
    font-weight: 700 !important;
    color:#fff;
    text-shadow: -1px 0 2px #000, 0 1px 2px #000, 1px 0 2px #000, 0 -1px 2px #000;
}

.row.mainpts.atm1 {
    display: none;
    width: 100%;
    min-width: 90%;
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    border-radius: 20px;
    background-image: linear-gradient(0deg, #f1717160,#aa0000c0);
    border:solid 2px #ffff00d0;
    
    box-shadow: 0 0 20px #000;
    box-shadow: 0 0 20px #fff;
}

.white-space-normal{
    white-space:normal;
}

.btn {
    
    
}

    .red {
        color:red;
    }

#seasonitem {
    position:absolute;
    background-color:#ff000070;
    padding:2rem;
    border-radius:500px;
    text-align:center;
    min-width:150px;
    z-index:-1;
}

    #seasonitem span.season {
        font-size: 3rem;
        font-weight:bold;
        margin-top:-1rem;
    }
#seasonitem span{
    font-size:1.1rem;
    display:block;
}

.row.mainstats {
    margin: auto;
    display: flex;
    align-content: stretch;
    flex-wrap: nowrap;
    width:fit-content;
}

    .row.mainstats .col .userhs {
        width: fit-content;
        padding: 1.5rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
        margin-top: 2rem;
        margin-bottom: 1.5rem;
        border-radius: 20px;
        background-image: linear-gradient(0deg, #f17171f0, #aa0000f0);
        background-image: linear-gradient(315deg, #ffffff90, #ffffff20);
        1border: solid 2px #ffff00d0;
        1border: solid 2px #ffff00d0;
        box-shadow: 0 0 20px #000;
        box-shadow: 0 0 20px #fff;
        text-align: center;
        margin: 0;
        min-height: 100px;
        max-height: 100px;
    }

        .row.mainstats .col .userhs .oi {
            font-size: 2rem;
            text-align: center;
            color: #ffd300;
            z-index: 0;
            width: 40px;
            text-shadow: -2px 0 2px black, 0 2px 2px black, 2px 0 2px black, 0 -2px 2px black;
        }

        .row.mainstats .col .userhs .nr {
            font-size: 2rem;
            text-align: center;
            position: absolute;
            z-index: 1;
            width: 40px;
            color: #fff;
            text-shadow: -2px 0 2px black, 0 2px 2px black, 2px 0 2px black, 0 -2px 2px black;
            margin-top: 20px;
            margin-left:5px;
            font-weight: bold;
        }

    .row.mainstats .col .season {
        width: fit-content;
        padding-top: 1rem;
        padding-bottom: 1rem;
        margin-top: 2rem;
        margin-bottom: 1.5rem;
        border-radius: 20px;
        1background-image: linear-gradient(0deg, #f17171f0, #aa0000f0);
        border: solid 2px #ffff00d0;
        border: solid 2px #ffff0050;
        box-shadow: 0 0 20px #000;
        box-shadow: 0 0 20px #fff;
        margin: 0;
        min-height: 100px;
        max-height: 100px;
    }

            .row.mainstats .col .season .title,
            .row.mainstats .col .season .seasonnr {
                position: initial;
                height: auto;
                line-height: initial;
                font-size: 2.5rem;
                font-weight:bold;
                padding: 0px;
                color: #fff;
                text-shadow: -2px 0 2px black, 0 2px 2px black, 2px 0 2px black, 0 -2px 2px black;
                display: block;
                text-align: center;
                padding-left: 1rem;
                padding-right: 1rem;
            }

        .row.mainstats .col .season .title{
            font-size:small;
            font-weight:normal;
        }

.dayBonus {
    min-width: 6rem;
    min-height: 6rem;
    background-image: url(/img/ico/star.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    width: fit-content;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .dayBonus.animat {
        animation-name: daybonusanimat;
        animation-duration: 0.5s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        cursor:pointer;
        // reverse;
    }

div.dayBonus span {
    color: #000;
    font-weight:700;
    text-shadow: -2px 0 2px #fff, 0 2px 2px #fff, 2px 0 2px #fff, 0 -2px 2px #fff;
    display: block;
    text-align: center;
    margin-top: -3px;
    1font-size:0.9rem;
}
div.dayBonus.tomorrow span.d, div.dayBonus.tomorrow span.l {
    1text-shadow: none !important;
    color: #333;
    1font-weight: normal;
}

div.dayBonus.tomorrow span.t {
    margin-top: -5px;
    font-weight:bold;
}

div.dayBonus span.l {
    font-weight: bold;
    font-size: 0.9rem;
    margin-top: -5px;
}

@keyframes daybonusanimat {
    from {
        background-size:85%;
    }

    to {
        background-size: 100%;
    }
}

.vocgroup {
    display: flex;
    justify-content: center;
    align-items: center;
}

.vocgroup .img {
    margin-right:5px;
}

#preload{

}

#preload img{
    display:none;
}

div.dayBonus.tomorrow{
    opacity:0.8;
}

div.dayBonus.tomorrow .oi {
    font-size: 1.5rem;
    color: #000;
    margin-top:10px;
}

.line-height-initial {
    height: initial !important;
    line-height: initial !important;
}

table.trans,
table.trans tr,
table.trans tr td {
    background: none !important;
    background-color: none !important;
}

table.trans {
    border-color:transparent;
}

    table.trans tr td {
        color: #fff;
        text-shadow: -1px 0 2px black, 0 1px 2px black, 1px 0 2px black, 0 -1px 2px black;
    }

.billingslist.trans td {
    padding-left: 5px !important;
    padding-right: 5px !important;
    padding-top: 2px;
    padding-bottom: 2px;
}