html,body {
    width: 100%; height: 100%; margin: 0; padding: 0; 
    /*overflow: auto; overflow-x: hidden;*/
    font-family: "Droid Sans", "Liberation Sans", "DejaVu Sans", "Segoe UI", Sans;
    font-size: 12pt; font-weight: bold;
    /*background: #ffdd91; color: #b7642a;*/
    background: #640d55; color: #cd366e;
    position: relative;
}
* { box-sizing: border-box; }
*:focus { outline: none !important; }

a:link, a:visited { color: #606163; text-decoration: none; }
a:hover, a:active { color: #EA75BC; }

.tbl { display: table; width: 100%; height: 100%; table-layout: fixed; }
.tr { display: table-row; }
.td { display: table-cell; vertical-align: top; /*border: 1px solid #606163; box-shadow: inset 0 0 2px 2px #000;*/ }

.sidebar { width: 36px; min-width: 36px; }


#wrap { width: 100%; height: 100%; display: flex; position: absolute; z-index: 900; display: none; }
#wrap #box {
    display: inline-block;
    padding: 32px 64px;
    margin: auto; 
    position: relative;
    background: #3737d7; color: #51ff18;
    border-radius: 32px; border: 2px solid #51ff18;
    box-shadow: 0 0 15px #17181A;
}

.pad18 {
    height: 100%;
    padding: 18px;
}

#cam2_frm, #cam1_frm {
    height: 100%;
    text-align: center;
    border: 1px solid #333;
    border-radius: 16px;
    /*box-shadow: 0 0 16px 0 #000 inset;*/
}
#chat_frm {
    height: 100%;
    border: 1px solid #666;
    border-radius: 16px;
    /*box-shadow: 0 0 16px 0 #000 inset;*/
}

video {
	background: #000;
    display: inline-block;
    border-radius: 16px;
}
a:link, a:visited { color: #66F; }
a:hover, a:active { color: #F66: }
#localvideocontainer {
    /*position: fixed; top: 0px; left: 0px; z-index: 20;*/
    /*width: 50%; height: 100%; border: 1px solid #333; border-radius: 2px;*/
    background: url(../img/ouhmegle_ana.jpg) no-repeat center center #000;
    background-size: contain;
    border-radius: 16px;
}
#remotevideocontainer {
    /*position: fixed; top: 0; left: 50%;*/
    /*width: 50%; height: 100%; z-index: 10;*/
    background: url(../img/camoffline_wide.jpg) no-repeat center center #000;
    background-size: contain;
    border-radius: 16px;
}
#localVideo, #remoteVideo {
    width: 100%; height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.list {
    display: inline-block;
    min-width: 300px; min-height: 50px; height: auto;
    border: 1px solid #666; overflow-y: auto; overflow-x: hidden;
    border-radius: 2px; background: #000; text-align: left;
}
.listwrap  {
    width: 100%; height: 100%;
}
.luser {
    display: block; width: 100%;
    border: 1px solid transparent;
    white-space: nowrap;
}
.luser:hover {
    border: 1px dotted #ccc;
    color: #F66;
}
input[type="text"] {
    background: #333; border: 1px solid #666;
    padding: 4px 2px; width: auto; color: #fff;
    border-radius: 2px;
}
select {
    background: #333; border: 1px solid #666;
    padding: 4px 2px; color: #fff;
    border-radius: 2px;
}
input[type="button"] {
    background: #333; border: 1px solid #666;
    padding: 8px 8px; cursor: pointer; color: #fff;
    border-radius: 6px;
}
input[type="button"]:disabled {
    cursor: default; color: #666; background: #444;
}
#yourid {
    color: #f66;
}
.grey {
    color: #666 !important;
}
.endcall {
    position: fixed; top: 16px; right: 16px; z-index: 2001;
    font-weight: bold; padding: 16px !important; border-radius: 32px !important;
    background: rgba(0,0,0,.75) !important; border: 0 !important;
}

.playerpause {
    position: absolute; top: 50%; left: 50%;
    width: 50px; height: 50px;
    margin-left: -25px; margin-top: -25px;
    background: url('/img/playerpause.png') no-repeat center center transparent;
    pointer-events: none;
}

.recBtns {
    position: absolute; top: 0; left: 0;
    opacity: 0; transition: opacity .2s ease;
    display: block; width: 100%;
}
.recBtns:hover { opacity: 1; }

.recBtn {
    opacity: 1; transition: opacity 1s ease;
}
#btnConnect {
    color: #0f0;
    background: #a24;
}
.outpool {
     background: #42a !important;
}
.linked {
     background: #2a4 !important;
}
.outpool:disabled {
    background: #446 !important;
}
#btnConnect:disabled {
    color: #666; background: #444;
}

#inchat {
    background: rgba(42, 30, 39, 0.75);
}

.mutetoggle {
    background: url('/img/muted.png') no-repeat center center transparent;
    width: 32px; height: 32px; padding: 8px;
    position: absolute; bottom: 48px; right: 0;
    cursor: pointer; opacity: 0.5; transition: opacity 1s ease;
    /*display: none;*/
}
.mutetoggle:hover {
    opacity: 1.0;
}
#tblMain { position: relative; width: 100%; z-index: 500; }
#bg {
    position: fixed; top: 0; left: 0; z-index: 1;
    width: 100%; height: 100%;
    background: url('/bg9.png') repeat center center transparent;
    background-size: cover;
    pointer-events: none;
}
#colorpick { max-width: 220px; max-height: 36px; display: flex; flex-flow: row wrap; align-content: right; }
.color { height: 16px; width: 16px; }
.texture { height: 18px; width: auto; padding: 2px 8px !important; display: inline-block; }