@font-face {
    font-family: 'akaFrivolity';
    src: url('akaFrivolity.otf') format('opentype'), url('akaFrivolity.ttf') format('truetype');
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html {
    font-family: sans-serif;
    height: 100%;
}

body {
    background-color: black;
    color: #a240b6;
}

body.dark {
    background-color: #585858;
    color: white;
}

body.pink {
    background-color: #FFDDDD;
}

body.whitesmoke {
    background-color: rgb(229, 229, 229);
    color: black;
}

body.anime {
    background-color: white;
    color: #333333;
}

body.lline {
    background-color: white;
}



body.welcomepage {
    background: rgb(255, 221, 221) url("alice-p.jpg") right top no-repeat;
}

body.userlist {
    background: black url("alice-p-black.jpg") right top no-repeat;
}

body.userlist.dark {
    background: #585858 url("alice-p-dark.jpg") right top no-repeat;
}

body.userlist.pink {
    background: #FFDDDD url("alice-p.jpg") right top no-repeat;
}

body.userlist.whitesmoke {
    background: rgb(229, 229, 229) url("alice-p-whitesmoke.jpg") right top no-repeat;
}

body.chat.anime {
    background: white url("anime.jpg") right top no-repeat;
}

body.userlist.anime {
        text-align: right;
}

body.userlist.anime, body.messagesPane.anime, body.chatinputpage.anime {
    background: unset;
}

div#welcomeframe {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 80vh;
    cursor: default;
}

div#welcomeframe > div {
    border: 2px solid #dd6666;
    padding: 2em 2em 0;
    border-radius: 1em 1em;
    box-shadow: 0 0 20px #ff4444;
    max-width: 500px;
}

header {
    font-family: 'akaFrivolity', serif;
    text-align: center;
    width:420px;
    min-height: 120px;
    padding-top: 130px;
    background: url("GC-p.jpg") top center no-repeat;
    margin-bottom: 1em;
}

header .userswelcomelist {
    font-family: sans-serif;
    margin-bottom: 1em;
}

.loginform {
    display: table;
    margin: 0 auto 1em;
}

.loginform .form-field {
    display: table-row;
}

.loginform label, #loginform input, #loginform select {
    display: table-cell;
    padding: 3px 3px;
    margin-top: 1em;
}

.loginform label  {
    font-weight: 700;
    text-align: right;
    padding-right: 10px;
}

div#welcomeframe input{
    border: 1px solid #720076;
}

div#welcomeframe input.button {
    padding: 10px;
    min-width: 100px;
    background-color: white;
    border: 1px solid #720076;
    margin: 1px;
    color: #720076;
    font-weight: bold;
    cursor: pointer;
}
div#welcomeframe .list {
    text-align: left;
}

div#welcomeframe ul.list {
    margin-left: 1em;
}

div#welcomeframe div.center {
    text-align: center;
}

div#welcomeframe img.captcha {
    display: inline;
    margin: 0.5em auto;
    border: 3px inset black;

}

div#welcomeframe input.button:hover {
    margin: 0;
    border: 2px solid #720076;
}

footer {
    margin-top: 1em;
    margin-bottom: 1em;
}

footer + p.jsnotice {
    margin-bottom: 0;
}

div#welcomeframe div p.jsnotice {
    font-size: 0.8em;
    margin:1em 0 0;
}

div#welcomeframe div p.jsnotice.hidden {
    visibility: hidden;
}

#loginform p.error {
    margin-top:5px;
}

input.error {
    border: 1px solid red;
    box-shadow: 0 0 2px 2px blueviolet;
}

a {
    color: #5555FF;
}

body.dark a {
    color: #aaaadd;
}

body.chat {
    margin:0;
}


body.chat .container {
    display: grid;

    width: 100vw;
    height: 100vh;
    border-collapse: collapse;
}

body.chat .container.layout11 {
    grid-template-areas: "banner banner banner"
                        "messages messages  userlist"
                        "messages messages  roomlist"
                        "pm pm pm ";
}

body.chat .container.layout12 {
    grid-template-areas:
                        "messages messages  userlist"
                        "messages messages  roomlist"
                        "pm pm pm ";
}

body.chat .container.layout21 {
    grid-template-areas: "banner banner banner"
                        "messages messages  userlist"
                        "messages messages  userlist"
                        "pm pm pm ";
}

body.chat .container.layout22 {
    grid-template-areas:
                        "messages messages  userlist"
                        "messages messages  userlist"
                        "pm pm pm ";
}

body.chat div.container div {
    align-items:center;
    /*border: 1px dotted #aaa;*/
}

body.chat div.container div.banner {
    grid-area: banner;
    height: 10vh;
}

body.chat div.container div.messages {
    grid-area: messages;
    width: 80vw;
    height: 79vh;
}

body.chat div.container.layout12 div.messages, body.chat div.container.layout22 div.messages  {
    height: 89vh;
}

body.chat div.container div.userlist {
    grid-area: userlist;
    width: 20vw;
    height: 70vh;
}

body.chat div.container.layout12 div.userlist {
    height: 79vh;
}

body.chat div.container.layout22 div.userlist {
    height: 89vh;
}

body.chat div.container div.roomlist {
    grid-area: roomlist;
    width: 20vw;
    height: 10vh;
}

body.chat div.container div.pm {
    grid-area: pm;
    height: 7vh;
    min-height: 70px;
}

body.chat div.container div iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

body.userlist {
    padding: 10px;
    height: 100%;
}

body.chatinputpage {
    /*border-top: 2px solid black;*/
    height: 100%;
}

div.chatinput {
    display: grid;
    grid-template-areas: "ciform cioptions cicopyright";
    width: 100%;
    height: 100%;
}

div.chatinput div {
}

div.chatinput input, div.chatinput select {
    padding: 2px 5px;
    border-radius: 0;
    background-color: white;
    border: 1px solid black;
}

div.chatinput div.ciform {
    grid-area: ciform;
    padding: 10px;
    width: calc(100vw - 250px);
}
div.chatinput div.cioptions {
    grid-area: cioptions;
    width: 150px;
}
div.chatinput div.cicopyright {
    grid-area: cicopyright;
    width: 70px;
    height: 45px;
    padding: 5px 15px;
    background-color: #3366FF;
    font-size: 0.8em;
    text-align: center;
    color: white;
    font-weight: 700;
    border-radius: 5px 5px;
}

body.anime div.chatinput div.cicopyright {
    background-color: darkblue;
}

body.anime a {
    color: darkblue;
}

div.messagesPane {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
/*    border-right: 2px solid black;
    border-bottom: 2px solid black;*/
    overflow:scroll;
    direction: rtl;
    padding: 5px 5px 5px 15px;
}

div.messagesPane > * {
    direction: ltr;
}

div.messagesPane table, div.messagesPane th, div.messagesPane td  {
    border: 1px solid;
}

div.messagesPane table {
    border-collapse: collapse;
}

div.messagesPane .msgtype {
    font-weight: bold;
}

div.messagesPane p {
    margin: 0;
}

div.messagesPane p span.posttime {
    color: #666666;
    font-family: monospace;
    font-size: 1.1em;
}

body.dark div.messagesPane p span.posttime {
    color: #aaaaaa;
}

div.messagesPane p span.command {
    font-weight: bold;
    color: #dddeee;
}

body.whitesmoke div.messagesPane p span.command {
    color: black;
}

body.pink div.messagesPane p span.command {
    color: darkorchid;
}

body.anime div.messagesPane p span.command {
    color: darkblue;
}

div.messagesPane p.msgcolor_standard, body.optionspage select#new_color option.c_standard {
    color: white;
}

body.whitesmoke div.messagesPane p.msgcolor_standard {
    color: black;
}

body.dark div.messagesPane p.msgcolor_standard {
    color: white;
}

body.pink div.messagesPane p.msgcolor_standard {
    color: darkorchid;
}

body.anime div.messagesPane p.msgcolor_standard {
    color: darkblue;
}

div.messagesPane p.msgcolor_white, body.optionspage select#new_color option.c_white {
    color: white;
}

div.messagesPane p.msgcolor_yellow, body.optionspage select#new_color option.c_yellow {
    color: yellow;
}

body.whitesmoke div.messagesPane p.msgcolor_yellow, body.whitesmoke body.optionspage select#new_color option.c_yellow {
    color: orange;
}

div.messagesPane p.msgcolor_orange, body.optionspage select#new_color option.c_orange {
    color: orange;
}

div.messagesPane p.msgcolor_red, body.optionspage select#new_color option.c_red {
    color: red;
}

div.messagesPane p.msgcolor_green, body.optionspage select#new_color option.c_green {
    color: green;
}

div.messagesPane p.msgcolor_lightblue, body.optionspage select#new_color option.c_lightblue {
    color: #6666ff;
}

body.dark div.messagesPane p.msgcolor_lightblue {
    color: #9999ff;
}

div.messagesPane p.msgcolor_blue, body.optionspage select#new_color option.c_blue {
    color: blue;
}

div.messagesPane p.msgcolor_teal, body.optionspage select#new_color option.c_teal {
    color: teal;
}

div.messagesPane p.msgcolor_black, body.optionspage select#new_color option.c_black {
    color: black;
}

div.messagesPane p.msgcolor_lightgray, body.optionspage select#new_color option.c_lightgray {
    color: lightgray;
}

body.dark div.messagesPane p.msgcolor_darkgray {
    color: #222222;
}

div.messagesPane p.msgcolor_darkgray, body.optionspage select#new_color option.c_darkgray {
    color: #444444;
}

div.messagesPane p.msgcolor_darkmagenta, body.optionspage select#new_color option.c_darkmagenta {
    color: darkmagenta;
}

div.messagesPane p.msgcolor_darkblue, body.optionspage select#new_color option.c_darkblue {
    color: darkblue;
}

body.anime div.messagesPane p.msgcolor_white {
    color: #bbbbbb;
}

div.overlay {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display: none;
}

div.overlay.show {
    display: block;

}

div.overlay div.overlaybg {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    backdrop-filter: blur(2px);
    z-index: 2;
}

div.overlay div.overlaycontent {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index: 3;
}

body.logoutcomplete div {
    padding-top: 4em;
    text-align: center;
}

body.logoutcomplete header {
    width: 100%;
}

div.overlay div.overlaycontent div#overlaycontent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 80vh;
    cursor: default;
}

div.overlay div.overlaycontent div#overlaycontent > div {
    position: absolute;
    border: 2px solid rgb(135, 101, 101);
    padding: 0;
    border-radius: 5px 5px;
    box-shadow: 0 0 20em rgb(120, 120, 120);
    min-width: 300px;
    width: 450px;
    height:380px;
}

div.overlay div.overlaycontent div#overlaycontent > div > iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

div.overlay div.overlaycontent div#overlaycontent > div > div#closeoverlay {
    position: absolute;
    top:0;
    right:0;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

body.optionspage {
    padding: 1em;
}

body.optionspage h1, body.overlaypagesaved h1 {
    font-size: 1.3em;
    margin-bottom: 10px;
}

body.optionspage h2, body.overlaypagesaved h2 {
    margin-top: 1em;
    font-size: 1em;
    margin-bottom: 5px;
}

body.optionspage select, body.optionspage input {
    width: 200px;
}

body.optionspage p.error {
    color: red;
}

body.userinfopage {
    padding: 1em;
}

body.userinfopage table {
    border: 1px solid black;
    border-collapse: collapse;
    margin-top: 1em;
}

body.userinfopage td {
    border: 1px solid black;
    min-width: 100px;
    padding: 1em;
}

/* anime welcome theme */
body.welcomepage.anime, body.logoutcomplete.anime {
    background: white url("anime.jpg") right top no-repeat;
    color: black;
}

body.welcomepage.anime div#welcomeframe > div {
    border: 2px solid #444444;
    border-radius: unset;
    padding: 2em 2em 0;
    box-shadow: 0 0 20px black;
    max-width: 500px;
}

body.welcomepage.anime header, body.logoutcomplete.anime header  {
    font-family: sans-serif;
    background: url("GC-anime.jpg") top center no-repeat;
}