.ui-widget {
    font-family: Verdana,Arial,sans-serif;
    font-size: 1em;
}

.ui-widget-header {
    color: #FFF;
}

body {
    font-family: Verdana,Arial,sans-serif;
    font-size: 13px;
    margin: 0;
    padding-bottom: 150px;
}

#content {
    margin: 5px 0 50px 0;
}

#bottomBlock {
    width: 100%;
    position: fixed;
    display: flex;
    bottom: 0;
    left: 0;
    height: 28px;
    background-color: RGB(16,129,132);
    color: white;
    z-index: 11;
    border-top: 2px solid #DDD;
    font-size: 18px;
    padding-top: 3px;
}

.bottomBtn {
    width: 25%;
    height: 100%;
    text-align: center;
}

.d_ok {
    display: inline-block;
    font-weight: bold  !important;
    text-transform: uppercase;
    position: relative;
    left:30px;
    line-height: normal;
    margin-right: .1em;
    cursor: pointer;
    vertical-align: middle;
    text-align: center;
    padding-left: 13px  !important;
    padding-right: 13px  !important;
    padding-top: 5px  !important;
    padding-bottom: 5px  !important;
    text-align: center;
    overflow: visible; /* removes extra width in IE */
    border: 0px none #008085  !important;
    background:RGB(16,129,132)!important;
    color: #FFF !important;
}

.d_ok_disabled {
    display: inline-block;
    font-weight: bold  !important;
    text-transform: uppercase;
    position: relative;
    left:30px;
    line-height: normal;
    margin-right: .1em;
    cursor: pointer;
    vertical-align: middle;
    text-align: center;
    padding-left: 13px  !important;
    padding-right: 13px  !important;
    padding-top: 5px  !important;
    padding-bottom: 5px  !important;
    text-align: center;
    overflow: visible; /* removes extra width in IE */
    border: 0px none #008085  !important;
    background:#BBB !important;
    color: #FFF !important;
}

.d_cancel {
    display: inline-block;
    float:right;
    text-transform: uppercase;
    position: relative;
    padding: 0;
    line-height: normal;
    margin-right: .1em;
    cursor: pointer;
    vertical-align: middle;
    text-align: center;
    overflow: visible; /* removes extra width in IE */
    border: 0px none #008085  !important;
    background:#fff !important;
    color: #FF0000 !important;
    text-decoration: underline;
}


.sininappi {
    display: inline-block;
    background-color: RGB(16,129,132);
    color: #FFF;
    font-size: 10pt;
    font-weight: bold;
    border-radius:3px;
    min-width: 40px;
    padding: 4px ;
    text-align: center;
    position: relative;
    right: 0;
    height: 15px;
}

.sininappi:hover {
    cursor: pointer;
    background-color: RGB(16,129,132);
}

.vihernappi {
    background-color: RGB(16,129,132);
    padding-top: 10px;
    padding-bottom: 10px;

}

#notifierBlock {
    position: fixed;
    top: 0;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    z-index: 11;
    width: 99%;
    border: 1px solid #888;
    background-color: #FFF;
}

.notifyItem {
    background-color: aquamarine;
    padding: 4px;
     margin-bottom: 3px;
}

.niRed {
    background-color: lightcoral;
}

.snWide {
    display: block;
    width: 118px;
    margin-top: 17px;
}

#ruudukkoParent {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    width: 65%;
    padding-bottom: 4px;
}

#ruudukko {
    display: inline-block;
    margin-bottom: 1px;
    width: 100%;
}

#aliveSpan {
    display: inline-block;
}

#bingoText {
    font-size: 61px;
    font-weight: bold;
    color: red;
    position: fixed;
    top: 96px;
    left: 5px;
    display: none;
}

.numSolu {
    box-sizing: border-box;
    width: 10%;
    height: 16px;
    border-right: 1px solid #DDD;
    border-bottom: 1px solid #DDD;
    padding-top: 2px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    line-height: 13px;
    font-weight: bold;
    font-size: 13px;
}
.numC {
    background-color: orange;
}

.numLast {
    color: white;
}

.numRivi {
    display: block;
    height: 16px;
}

.omaSolu {
    width: 20%;
    height: 21px;
    box-sizing: border-box;
    border: 1px solid #AAA;
    padding: 1px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    font-weight: bold;
    font-size: 4vw;
    background-color: #FFF;
}
.kavSolu {
    width: 24px;
    height: 22px;
    border: 1px solid #AAA;
    padding: 2px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    background-color: #FFF;
} 

.osIns {
    background-color: RGB(16,129,132);
    color: white;
}

.onPuuttuu {
    color: red;
}

.onPuuttuu2 {
    color: darkturquoise;
}

.onTaysiRivi {
    color: orange;
}

.fPuuttuu {
    color: red;
}

.fPuuttuu2 {
    color: darkturquoise;
}

.fTaysiRivi {
    color: orange;
}



#wrapper {
    display: inline-block;
    vertical-align: top;
    margin-left: 1px;
    position: relative;
    width: 100%;
}

.wrapperAlt {
    left: 130px;
}

#wrapperUp {
    display: inline-block;  
    width: 100%;      
}

#getMatchDiv {
    position: absolute;
}

#wrapperLeft {
    box-sizing: border-box;
    width: 33%;
    display: inline-block;
    vertical-align: top;
    margin-top: 112px;
}    

.lkm {
    font-weight: bold;
    margin-right: 5px;
}
.slkm {
    font-weight: bold;
}
#lkmRivi {
    position: absolute;
    display: inline-block;
    background-color: darkslategrey;
    color: white;
    padding: 0 1px 0 3px;
    right: 0px;
}

#aikaSpan {
}

#osumaTbl {
    width: 100%;
    border-collapse: collapse;
}

#osumaTbl th {
    font-weight: normal;
    border: 1px solid #AAA;
    padding-right: 3px;
}

#osumaTbl td {
    border: 1px solid #AAA;
    padding-right: 3px;
}

#sOOsumaa {
    font-weight: bold;
}

#sOPuuttuu {
    font-weight: bold;
}

.otd1 {
    padding-left: 3px;
}

.otd3 {
    width: 39px;
    text-align: right;
}

.otd2 {
    width: 39px;
    text-align: right;
}

#refreshLink {
    position: absolute;
    right: 12px;
    top: 0px;
    text-decoration: none;
    font-weight: bold;
    font-size: 23px;
    cursor: pointer;
    color: #008888;
}

#settLink {
    position: absolute;
    right: 54px;
    top: 10px;
}
#settImg {
    height: 16px;
    width: 16px;
}
#tilastoRivi {
    margin-top: 10px;
}
#aikaRivi {
    margin-top: 10px;
    position: relative;
}
#numlista {
    border-top: 2px solid #BBBBBB;
    border-bottom: 2px solid #BBBBBB;
    margin-top: 4px;
    width: 100%;
    display: inline-block;
    vertical-align: top;
}
#numlistaF {
    border-top: 2px solid #BBBBBB;
    border-bottom: 2px solid #BBBBBB;
    margin-top: 4px;
    width: 100%;
    display: inline-block;
    vertical-align: top;
}
#numlistaC {
    border-top: 2px solid #BBBBBB;
    border-bottom: 2px solid #BBBBBB;
    margin-top: 4px;
    width: 100%;
    display: inline-block;
    vertical-align: top;
}
.ilbWrapper {
    display: inline-block;

}

#orivi {
    position: relative;
    margin-top: 6px;
    background-color: lightgray;
    font-size: 15px;
}
.onum {
    margin-right: 2px;
}
.oready {
    visibility: visible !important;
}
.ocurrent {
    color: #FF3621;
    font-weight: bold;
    visibility: visible !important;
}
.o1r,.o2r,.otr {
    display: inline-block;
    visibility: hidden;
}
.nl {
    width: 10%;
    box-sizing: border-box;
    display: inline-block;
    text-align: center;
    border: 1px solid #BBBBBB;
    border-radius: 15px;
    padding: 0 2px 0 2px;
    font-size: 14px;
}
.nlf {
    width: 10%;
    box-sizing: border-box;
    display: inline-block;
    text-align: center;
    border: 1px solid #BBBBBB;
    border-radius: 15px;
    padding: 0 2px 0 2px;
    font-size: 13px;
}
.nlB {
    font-weight: bold;
    background-color: RGB(16,129,132);
    color: white;
}
.nlLast {
    background-color: #E0ED2B;
}
.settImg {
    margin-right: 0.8em;
}
.settImgSel {
    border: 2px solid blue;
}

.srowWrapper {
    display: inline-block;
    width: 271px;
    vertical-align: top;
    margin-bottom: 20px;
}

 .sRow {
    margin-top: 20px;
    margin-bottom: 0.8em;
}

#updateOff {
    color: red;
    font-weight: bold;
}

#idNotFound {
    color: red;
    font-weight: bold;
}

#omariviBlock {
    box-sizing: border-box;
    width: 33%;
   /* min-width: 110px; */
    display: inline-block;
    vertical-align: top;
    z-index: 10;
    position: fixed;
    top: 5px;
    left: 0;
    border-right: 2px solid #666;
    border-bottom: 2px solid #666;
}

.orbFixed {
    position: fixed;
    top: 0;
    left: 8px;
}

#omaRiviSyottoBlock {
    display: inline-block;
    margin-bottom: 30px;
    margin-left: 0;
    vertical-align: top;
}

#statusBlock {
    position: relative;
    max-width: 700px;
    margin-top: 5px;
}

.usersBlock {
    margin-top: 2px;
    border-bottom: 2px solid #888;
    margin-bottom: 3px;
    max-width: 725px;

}

#ub1 {
    display: block;
}


.userItem {
    display: inline-block;
    cursor:pointer;
    margin-top: 5px;
    margin-right: 3px;
    border-radius: 4px;
    padding: 1px;
    border: 1px solid #AAA;
    background-color:RGBA(156,221,223,0.2);
}

.uiLetSee {
    background-color:RGBA(156,221,223,1);
}


.miss1 {
    background-color: RGBA(255,0,0,1);
    color: white;
}

.miss2 {
    background-color: RGBA(255,0,0,0.8);
}

.miss3 {
    background-color: RGBA(255,0,0,0.6);
}

.miss4 {
    background-color: RGBA(255,0,0,0.4);
}

.miss5 {
    background-color: RGBA(255,0,0,0.2);
}

#chatWrapper {
    display: inline-block;
    width: 100%;
}

#chatWrapper2 {
    display: inline-block;
    vertical-align: top;
}

.chatBlock {
    padding-top: 6px;
    padding-bottom: 3px;
    margin-top: 7px;
    background-color: #FFF;
    border-top: 2px solid #888;
    border-bottom: 2px solid #888;
    max-height: 1000px;
    width: 100%;
    max-width: 725px;
    overflow-y: hidden;
}

.chatItem {
    background-color:aliceblue ;
    padding: 2px;
    margin-bottom: 3px;
}

#newChatDiv {
    width: 100%;
    box-sizing: border-box;
}

.newChatText {
    width: 85%;
    box-sizing: border-box;
    margin-top: 5px;
    border: 1px solid #666;
    font-size: 15px;
    max-width: 682px;
}

.newChatBtn {
    font-family: Verdana, sans-serif;
    display: inline-block;
    background-color: RGB(16,129,132);;
    color: #FFF;
    font-size: 12pt;
    font-weight: bold;
    border-radius: 3px;
    width: 13%;
    box-sizing: border-box;
    padding: 1px;
    text-align: center;
}

#statDiv {
    margin-top: 15px;
}

#statBlock {
    position: relative;
    padding-top: 20px;
}

.statDate {
    font-size: 10pt;
    display: inline-block;
    width: 55px;
}

.statItem {
    margin-top: 14px;
    margin-bottom: 10px;

}
.statBar {
    font-size: 10pt;
    border: 1px solid #BBBBBB;
    border-radius: 15px;
    width: 280px;
    height: 15px;
    position: relative;
    display: inline-block;
    top:2px;
}

.statNum {
    position: absolute;
    height: 16px;
    width: 16px;
    border: 1px solid #BBBBBB;
    border-radius: 15px;
    padding: 2px;
    padding-left: 3px;
    top: -4px;
    font-size: 9pt;
    background-color: #C0FFC0;

}

.sn1 {
    background-color: #FFFFC0;
}
.sn2 {
    background-color: #C0FFC0;
}
.snt {
    background-color: #C0FFFF;
}

.wsConnected {
    position: fixed;
    bottom: 35px;
    right: 5px;
    color: orange;
    font-size: 16px;
}

.wscGreen {
    color: limegreen;
}

.wscRed {
    color: red;
    font-size: 22px;
}

.wscBigger {
    font-size: 18px;
}


#logDiv {
    display:none; 
}

.sheetItem {
    margin-right: 10px;
}

#numSyottoBlock {
    position: fixed;
    bottom: 1px;
    left: 0;
    width: 140px;
    font-size: 25px;
    font-weight: bold;
    background-color: #FFF;
    z-index: 20;
    width: 98%;
    border: 2px solid #CCC;
}

#kbBlock {
    width: 190px;
}

.nsRivi {
    height: 40px;
    position: relative;
    margin-left: 10px;
}

.nsNum {
    display: inline-block;
    width: 34px;
    padding: 2px;
    margin: 8px;
}

#nsClear {
    display: inline-block;
    width: 34px;
    padding: 2px;
    margin: 8px;
}

#nsBs {
    display: inline-block;
    width: 34px;
    padding: 2px;
    margin: 8px;
    position: relative;
    top: 4px;
    left: -4px;
}

#nsResult {
    position: absolute;
    top: 1px;
    left: 223px;
    color: #0000FF;
    font-size: 30px;
}

.nsResDisabled {
    color:red !important;
}

#numSendBtn {
    position: absolute;
    top: 33px;
    left: 204px;
    padding: 10px;
    width: 60px;
}

#numGenBtn {
    position: absolute;
    top: 103px;
    left: 204px;
    padding: 10px;
    width: 60px;
}

.btnDisabled {
    background-color: #DDD !important;
}

.panelBtn {
    font-size: 16px;
}

.confirmBtn {
    padding: 9px 15px 12px 15px;
    margin-top: 20px;
    margin-bottom: 15px;
}

#openStatBtn {
    position: absolute;
    bottom: 157px;
    left: 227px;
    padding: 5px;
    width: 83px;
    height: 27px;
    padding-top: 13px;
}

#delRoundBtn {
    position: absolute;
    bottom: 89px;
    left: 227px;
    padding: 5px;
    width: 74px;
    height: 35px;
    padding: 5px 10px 5px 10px;
    background-color: red;
}

#numDelBtn {
    position: absolute;
    padding: 5px;
    width: 130px;
    background-color: red;
    left: 19px;
    bottom: 20px;
    height: 35px;
    padding: 5px 10px 5px 10px;
}

#initNextBtn {
    position: absolute;
    bottom: 89px;
    left: 19px;
    padding: 5px;
    width: 130px;
    height: 35px;
    padding: 5px 10px 5px 10px;
}

#checkRowBtn {
    position: absolute;
    bottom: 157px;
    left: 19px;
    padding: 5px;
    width: 140px;
    height: 27px;
    vertical-align: middle;
    padding-top: 13px;
}

#others {
    position: absolute;
    display: none;
    bottom: 0;
    right: -200px;
    padding: 0;
    width: 340px;
    height: 260px;
    border: 1px solid #BBB;
    background-color: lightcyan;
}

#othersBtn {
    position: absolute;
    bottom: 7px;
    right: 1px;
    padding: 0;
    width: 20px;
    height: 40px;
    font-size: 20pt;
}


#hostTimer {
    display: none;
    position: absolute;
    bottom: 2px;
    left: 207px;
    color: blue;
    font-size: 18px;
}

#gameWrapper {
    font-size: 13px;
    font-weight: normal;
    margin-top: 5px;
}

.gameItem {
    display: inline-block;
}

@media screen and (max-width: 420px) {

    .numSolu {
        font-size: 15px;
    }

    .nsW {
        width: 22px;
        height: 14px;
        font-size: 15px;
    }

    .lkm {
        margin-right: 4px;
    }


} 

@media screen and (max-width: 401px) {

    .numSolu {
        font-size: 13px;
    }
    .nsW {
        width: 16px;
        height: 14px;
        font-size: 13px;
    }


    .lkm {
        margin-right: 4px;
    }


} 


@media screen and (max-width: 380px) {

    .numSolu {
        font-size: 14px;
    }
    .nsW {
        width: 21px;
        height: 14px;
        font-size: 15px;
    }


    .lkm {
        margin-right: 4px;
    }

}

@media screen and (max-width: 372px) {

    .numSolu {
        font-size: 14px;
    }

    .nsW {
        width: 20px;
        height: 14px;
        font-size: 14px;
    }



}        

@media screen and (max-width: 360px) {


    .numSolu {
        font-size: 13px;
    }

    .nsW {
        width: 18px;
        height: 14px;
        font-size: 14px;
    }


    .lkm {
        margin-right: 4px;
    }

}

@media screen and (max-width: 340px) {

    .numSolu {

        font-size: 12px;
    }

    .omaSolu {
        height: 15px;
        border: 1px solid #AAA;
    }

    #statusBlock {
        max-width: 320px;
    }
    #settLink {
        right: 54px;
    }

    .lkm {
        margin-right: 4px;
    }

    .statBar {
        width: 256px;
    }
}

@media screen and (min-width: 420px) {
    #content {
        margin: 5px 8px 50px 8px;
    }

    #omariviBlock {
        top: 5px;
        left: 8px;
    }

    .omaSolu {
        font-size: 14px;
    }
}    

@media screen and (min-width: 600px) and (orientation: landscape) {
    #wrapperUp {
        width: 59%;      
    }
    #chatWrapper {
        width: 50%;
    }

    #chatWrapper2 {
        width: 49%;
    }

    #numlista {
        width: 40%;
    }


    
.srowWrapper {
    display: inline-block;
    width: 171px;
    vertical-align: top;
    margin-bottom: 20px;
}

 .sRow {
    margin-top: 0;
    margin-bottom: 0.3em;
}
}

@media screen and (min-width: 640px) and (orientation: landscape) {

    .srowWrapper {
        display: inline-block;
        width: 171px;
        vertical-align: top;
        margin-bottom: 20px;
    }

    .sRow {
        margin-top: 0;
        margin-bottom: 0.3em;
    }


}

@media screen and (min-width: 667px) and (orientation: landscape) {

    .srowWrapper {
    display: inline-block;
    width: 171px;
    vertical-align: top;
    margin-bottom: 20px;
}

 .sRow {
    margin-top: 0;
    margin-bottom: 0.3em;
}

}

@media screen and (min-width: 692px) and (orientation: landscape) {


    .srowWrapper {
    display: inline-block;
    width: 171px;
    vertical-align: top;
    margin-bottom: 20px;
}

 .sRow {
    margin-top: 0;
    margin-bottom: 0.3em;
}

}

@media screen and (min-width: 720px) and (orientation: landscape) {



    .srowWrapper {
    display: inline-block;
    width: 171px;
    vertical-align: top;
    margin-bottom: 20px;
}

 .sRow {
    margin-top: 0;
    margin-bottom: 0.3em;
}

}