*{font-family:monospace;}
html{}
body{position:fixed;height:100dvh;width:100%; margin:0; font-size:13px;line-height:16px; background-color:lightgrey;color:black; }
header{display:flex;align-items:center;justify-content:center; height:5dvh; background-color:black;color:lightgrey; cursor:default;}
  .logo{font-size:17px;}
  .header_badge{position:absolute;left:20px; padding:1px 7px; border-radius:5px; background-color:#888888;color:black;}
  .badge_admin{background-color:#b63f3f;color:white;}
  .badge_mod{background-color:#3fb664;color:white;}
.banner{position:relative;display:flex;align-items:center; width:100vw;height:2.5dvh; overflow:hidden; background-color:#b63f3f;}
.banner_content{position:absolute;left:0; min-width:420px;width:auto; color:white; animation:banner_scroll 20s linear infinite; white-space:nowrap; word-break:keep-all;}
.popup{position:fixed;top:0;left:0; height:100dvh;width:100dvw; display:flex;align-items:center;justify-content:center; background-color:rgba(0,0,0,0.7); pointer-events:all;}
  .popup_content{width:80dvw;height:80dvh;max-width:270px;max-height:260px;padding:20px; border:1px solid lightgrey; background-color:black;color:lightgrey;}
section{display:block; height:calc(90dvh - 15px); padding:1dvh 10px 2dvh 10px; background-image:url("../images/rw_bg.png");background-position:center;background-size:cover;}
  h1, h2{margin:0;font-size:15px;}
  .login_field{display:flex; width:100%;height:100%;align-items:center;justify-content:center;}
  .login{padding:10px 15px; border:1px solid black; background-color:lightgrey; text-align:center;}
footer{position:absolute;bottom:0; display:flex;align-items:center;justify-content:center; height:15px;width:100%; font-size:9px; color:lightgrey;background-color:black;}

input{outline:none; font-size:13px;}
input[type="text"],input[type="password"]{padding:2px 5px;margin:2px 0; box-sizing:border-box;border:1px solid black;outline:none; background-color:rgba(255,255,255,0.15);color:black; font-size:13px;}
textarea{padding:2px 5px;margin:2px 0; box-sizing:border-box;border:1px solid black;outline:none; background-color:rgba(255,255,255,0.15);color:black; font-size:13px; overflow:hidden;resize:none;}
select{padding:0;margin:0; box-sizing:border-box;border:1px solid black;outline:none; background-color:rgba(255,255,255,0.15);color:black; font-size:13px;}
input[type="submit"]{padding:0;margin:0; border:none;outline:none; background:none;color:black;text-decoration:underline; cursor:pointer; font-size:13px;}
input[type="color"]{width:16px;height:16px; padding:0;margin:0; border:none;outline:none; background:none; cursor:pointer;}
input[type="file"]{padding:0;margin:0; border:none;outline:none; background:none;color:black; cursor:pointer;}
input[type="checkbox"]{padding:0;margin:0; border:none;outline:none; background:none;color:black; cursor:pointer;}
a{color:black;}
a:hover, input[type="submit"]:hover{opacity:0.6;}
.inline_form{display:inline;}
.inline_form input{display:inline;}
table{border-collapse:separate;}
th, td{text-align:left; padding:0 5px 2px 0;}
hr{width:100%;margin:10px 0;padding:0;border:none;border-top:1px solid black;}
::placeholder{color:black;opacity:0.6;}
/* .form_align_right{position:absolute;right:0;} */

.disabled_link{pointer-events:none !important;cursor:default;opacity:0.4;}
.text_center{text-align:center;}
.text_italic{font-style:italic;}
.text_transparent{opacity:0.6;}
.text_small{font-size:11px;line-height:12px;}
.text_bold{font-weight:bold;}
.text_light{font-weight:lighter;}

#file_to_upload{}

#chat_input{width:100%;}
#chat_messages_field{max-height:90%;margin-top:5px; overflow-y:scroll; border-top:1px solid black; cursor:default;}
.chat_message{display:block;margin:5px 0 5px 0;padding:5px 0; border-bottom:1px solid black;}

.board_messages_field{max-height:62%;overflow-y:scroll;}
.board_message_inputarea{width:100%;width:100%;max-width:100%;min-width:100%;}
.board_message_input{width:100%;}
.board_message{display:block;margin:5px 0;padding:5px 0; border-bottom:1px solid black; overflow-x:auto;}
.board_message_content{width:100%;display:block;margin-top:5px;}
.board_edit_inputarea{width:100%;max-width:100%;min-width:100%;}
.board_comment_form{}
.board_comments_field{display:block;}
.board_comment{display:block;margin:5px 0;padding:5px 0 5px 2.5%;}
.board_write_comment_form{width:97.5%;padding:0 0 0 2.5%;margin-top:5px;}
.board_comment_area{width:100%;width:100%;max-width:100%;min-width:100%;}

.message_input{width:100%;}
.message_write_area{width:100%;width:100%;max-width:100%;min-width:100%;}

.forum_content{width:100%;max-height:70%;overflow-y:scroll;}
.forum_table{width:100%;border-collapse:collapse;}
.forum_table th, .forum_table td{padding:2px 8px;border:1px solid black;}
.forum_input{width:100%;}
.forum_search_input{width:100%;}
#post_area{width:100%;width:100%;max-width:100%;min-width:100%;}
.forum_post{white-space:pre-wrap;}

/* SCROLLBAR */
::-webkit-scrollbar {width:10px;}
::-webkit-scrollbar-track {background:lightgrey;}
::-webkit-scrollbar-thumb {background:#888888;}
::-webkit-scrollbar-thumb:hover {background:darkgrey;}


@keyframes banner_scroll
{
    0%    {left:100%;}
    100%  {left:-100%;}
}

@media only screen and (max-width: 600px) and (orientation: portrait)
{
body{font-size:11px;line-height:14px; }
.logo{font-size:15px;}
h1, h2{margin:0;font-size:13px;}
footer{font-size:7px;}
input{font-size:11px;}
input[type="text"],input[type="password"]{font-size:11px;}
input[type="submit"]{font-size:11px;}
textarea{font-size:11px;}
select{font-size:11px;}
.text_small{font-size:10px;line-height:11px;}
.board_messages_field{max-height:50%;}
}

.error_msg{position:absolute;left:5px;top:150px;color:red;}