* { box-sizing: border-box; padding: 0;}
*:focus { outline: none !important; }

hr { background: #80757D; border: 0; height: 2px;}

a:link, a:visited { color: #dccbbe; text-decoration: none; /*cursor: text;*/ cursor: pointer; display: inline-block; }
a:hover, a:active { /*color: #FC62D3;*/ text-decoration: underline; }

::-webkit-scrollbar { width: 16px; height: 16px; background: transparent; cursor: pointer; }
::-webkit-scrollbar-track {  border-radius: 2px; }
::-webkit-scrollbar-thumb { background: #ff7bbc;  border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: #FCBF62; }
::-webkit-scrollbar-corner { background: transparent; }

.tbl { display: table; width: 100%; height: 100%; /*table-layout: fixed;*/ }
.tr { display: table-row; }
.td { display: table-cell; vertical-align: middle; border: 0px solid #f0f; }


#main { position: fixed; top: 0; left: 0; /*right: 0; bottom: 0;*/ width: 100%; height: 100%; }

#topframe { /*height: 36px;*/ cursor: default; background: #4b3c44; white-space: nowrap; }
    .tabbtn { /*height: 36px;*/ border: 0; cursor: pointer;/* padding: 8px 8px;*/ }
    .tabbtn.selbtn { background: #2a1e27; }
#middleframe { height: 100%; }
    #mainframe { width: 100%; /*vertical-align: top;*/ position: relative; overflow: hidden; }
    #chatframe, #userframe, #settingframe, #filesframe, #emojiframe {
        /*position: fixed;
        top: 36px; right: 0; bottom: 36px; left: 0;*/
        width: 100%; height: 0; 
    }
    #chatlog, #userlist, #settings, #files, #emojis {
        width: 100%; height: auto;
        /*overflow-y: hidden;*/ padding: 4px 4px;
        word-wrap: break-word;
        /*vertical-align: top;*/
    }
    #userframe, #settingframe, #filesframe, #emojiframe { display: none; }
        .pm { cursor: pointer; }
        .user { cursor: pointer; }
        .user:hover, .pm:hover, .url:hover { text-decoration: underline; }
        .url { color: #FCBF62 !important; }
        .portal { color: #30ace2 !important; }
        .lag { font-style: italic; color: #80757D; }
        .selftag { font-style: italic; color: /*#dccbbe*/ #7cc54d; font-style: italic; }
        /*.url { color: #7F7F7F !important; }*/
    #chatlog > span, #userlist > span { display: block; }
.spaceframe div {
    height: 8px; max-height: 8px;
}
#bottomframe { /*height: 36px;*/ background: #4b3c44; padding: 0; }
    #inputframe { width: 100%; }
        #txtinput { width: 100%; /*height: 36px;*/ }
    /*#emojiframe { width: 36px; }*/
    #submitframe { width: auto; }
        #btnsubmit { width: 100%; /*height: 36px;padding: 4px 8px;*/ }

#adminfeatures { display: none; }

input, select { background: #4b3c44; color: #dccbbe; border: 0; /*height: 36px;*/padding: 8px 8px; margin: 0; }
input[type="button"] { cursor: pointer; /*height: 36px;*/ -webkit-appearance: none; border-radius: 0; padding: 8px 8px; margin: 0; }

#settingframe input[type="button"] { border-radius: 10px }

.listbox {
    display: inline-block; /*min-width: 300px*/; /*min-height: 36px;*/
    background: #4b3c44;
    list-style: none;
    margin: 0; padding: 8px;
}
ul > li > a { display: block; width: 100%; white-space: nowrap; padding: 0 8px; }

#menu, #link {
    display: inline-block; /*min-width: 200px;*/
    background: #4b3c44;
    list-style: none;
    margin: 0; padding: 8px 0px;
    border: 1px solid #80757D;
    border-radius: 2px;
    z-index: 9;
    position: absolute;
    display: none;
    overflow: auto;
    max-height: 100%;
    text-shadow: none !important;
}
#menuUser, #mUI0, #mUI1, #mUI5, #mUI9, #mUI13, #mUI16, #mUI19, #mLI10 { padding: 0 8px; }

#link { width: 200px; }
#link > li {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.red { color: #FC6271; }
.green { color: #80FC62; }
.yellow { color: #FCBF62; }
.grey { color: #a28d8a; }
.blue { color: #30ace2; }

.live { color: #e0326d; }
.dark { color: #80757D; }
.light { color: #2a1e27; background: #FCBF62; padding: 2px; border-radius: 2px; }

#bar { display: inline-block; width: 100%; height: 4px; background: transparent; color: #2a1e27; white-space: nowrap; }
#progress { display: inline-block; width: 0%; height: 100%; /*line-height: 36px;*/ background: /*#80FC62*/ #ff7bbc; transition: width 1s ease; }
#filestat { display: none; }
#filelist { white-space: nowrap; }
#filsel {
    display: block; text-align: center;
    width: 100%; height: auto;
    background: #4b3c44;
    cursor: pointer;
}

#chatprogress { transition: width 2s linear; }

.soundon {
    width: 16px; height: 16px; display: inline-block;
    background: url("/img/sound.png") no-repeat center center transparent;
}

/*.msgs { table-layout: auto; height: auto; line-height: 115%; }
.msgs, .msgs > .tr { width: 100%; }
.msgs > .tr > .td:nth-child(1) {
    width: auto; white-space: nowrap;
    vertical-align: top; padding-right: 2px;
}
.msgs > .tr > .td:nth-child(2) { 
    width: 100%; height: auto;
    overflow-y: hidden; padding: 0;
    word-wrap: break-word;
    vertical-align: top;
}

#chatlog > span > span > a > div { vertical-align: text-bottom; }
#chatlog > span > span:nth-child(1), #chatlog > span > .pm, #chatlog > span > .to, #chatlog > span > .user { vertical-align: top; }
*/
#newmsg {
    position: fixed; top: 0px; left: 0; width: 100%; height: auto;
    background: #1A161A; padding: 8px 4px; /*line-height: 100%;*/ z-index: 1;
    opacity: 0; visibility: hidden; transition: opacity .2s ease;
    white-space: nowrap; overflow: hidden; cursor: default;
}

.br { height: 8px; }

.srvmsg {
    color: #ff7bbc;
}
.srvwel {
    color: #7cc54d;
}
.srvnot {
    color: #30ace2;
}
.srvmsg_yellow {
    color: #fcbf62;
}

.bandit_scroll {
    width: 48px; display: inline-block; height: auto;
    position: absolute; top: 0;
}
.bandit_sprites {
    width: 48px; height: 960px;
    background: url('/img/bandit-wheel.png') no-repeat transparent;
}
.bandit_btn {
    background: #fcbf62; color: #121112; border: 1px solid #fcbf62;
    padding: 8px; border-radius: 4px !important;
}
.bandit_btn:hover {
    background: #7cc54d; border: 1px solid #fcbf62;
}
.bandit_prizes {
    display: none;
}
.bandit_wrap {
    width: /*144px*/ 150px; height: 48px; display: inline-block /* flex */;
    background: #fff5ee; border: 2px solid #c58f4d; border-radius: 2px;
}
.bandit_rel {
    width: 48px; display: inline-block; height: 48px;
    overflow: hidden; position: relative;
}
.pink { color: #7cc54d !important; }

.dice_wrap {
    display: inline-block;
}
.dice_wrap > div {
    display: inline-block;
    width: 32px; height: 32px;
}
.dice_num1 { background: url('/img/chatico/3ddice/dice1.png') no-repeat center center transparent; }
.dice_num2 { background: url('/img/chatico/3ddice/dice2.png') no-repeat center center transparent; }
.dice_num3 { background: url('/img/chatico/3ddice/dice3.png') no-repeat center center transparent; }
.dice_num4 { background: url('/img/chatico/3ddice/dice4.png') no-repeat center center transparent; }
.dice_num5 { background: url('/img/chatico/3ddice/dice5.png') no-repeat center center transparent; }
.dice_num6 { background: url('/img/chatico/3ddice/dice6.png') no-repeat center center transparent; }


.menu {
    display: inline-block; cursor: default; position: relative;
    color: #DCCBBE; background: transparent; text-shadow: none !important;
}
.menu span { display: inline-block; padding: 8px; }
.menu ul {
    display: flex; flex-flow: wrap; list-style: none; margin: 0; padding: 0;
    visibility: hidden; opacity: 0; position: absolute; right: 0;
    z-index: 10; background: #17181A; text-align: left;
    /*transition: .2s ease;*/
    border: 1px solid #80757D; border-radius: 2px;
}
.menu ul li { white-space: nowrap; width: 100%; display: inline-block; }
.menu:hover ul { visibility: visible; opacity: 1; }

.menu a:link, .menu a:visited { display: inline-block; width: 100%; color: #DCCBBE; padding: 8px; }
.menu a:hover, .menu a:active { color: #DCCBBE; text-decoration: none; }

/*#mnu1 { position: absolute; left: 0; top: 0; }*/
/*#mnu2 ul { right: 0; bottom: 100%; text-align: right; }*/

.menu ul li img {
    padding-right: 8px;
}

#icotksel ul { right: auto; left: 0; }
#icotksel ul li a { padding: 0px 4px; }
#icosubsel ul { right: auto; left: 0; }
#icosubsel ul li a { padding: 0px 4px; }

.icolist { overflow: auto; }

/*.pickup { color: #fff; }
.pickup:hover { color: #35f; }*/