/* Elements */

html   {height: 100%; box-sizing: border-box; font-family: Verdana,sans-serif; font-size: 15px; color: #1e9c31; background-color: #000}*,*:before,*:after{box-sizing: inherit}
footer {display: block; padding-top: 16px; padding-bottom: 16px; border-top: 1px solid; margin-top: 24px; text-align: center}
a      {color: inherit}
b      {font-weight: bolder}
h3     {font-weight: 400; font-size: 24px; border-bottom: 1px solid; padding-bottom: 4px}
img    {border-style: none; vertical-align: middle; max-width: 100%; height: auto}

/* Classes */

.seckl-button       {border: none; display: inline-block; height: 36px; padding: 10px 8px; text-decoration: none; cursor: pointer}
.seckl-button:hover {color: #000; background-color: #1e9c31}
.seckl-chswbt       {color: #000; background-color: #1e9c31; border: none; display: inline-block; height: 36px; padding: 10px 8px; text-decoration: none; cursor: pointer}
.seckl-nobutton     {margin-top: 0; margin-bottom: 0; border: none; display: inline-block; height: 36px; padding: 10px 8px; text-decoration: none}
.seckl-content      {margin-left: auto; margin-right: auto; height: calc(100% - 124px); max-width: 1600px; padding: 8px}

.seckl-chatout      {background:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.95)),url("/WtSS.jpg"); background-size: 100%; font-family: monospace; padding: 8px; border-collapse: collapse; line-height: 1; border: 1px solid; overflow: hidden; display: flex; flex-direction: column-reverse; overflow-wrap: anywhere}
.seckl-chatout tr   {display: block}
.seckl-chatout td   {white-space: nowrap}
.seckl-chatout #u   {width: 100%; font-weight: bolder}
.seckl-chatout #d, #t {text-align: right; font-size: 0.75em}
.seckl-chatout #txt {white-space: normal; width: 100%; padding-left: 10px; padding-top: 0; padding-bottom: 5px}
.seckl-chatout #err {white-space: normal; width: 100%; padding: 0; padding-bottom: 5px; display: block}

.seckl-tooltip {cursor: help; display: block}
[seckl-tooltip-text] {position: relative}
[seckl-tooltip-text]::after {content: attr(seckl-tooltip-text); pointer-events: none; opacity: 0; transition: opacity 0.5s; display: block;  position: absolute; bottom: 1.5em; padding: 0.5em; z-index: 1; background-color: #000; border: solid 1px; border-radius: 0.5em}
[seckl-tooltip-text]:hover::after {opacity: 1}

/* IDs */

#seckl-chatlog      {height: 1000px; width: 50%; float: left}
#seckl-dmlog        {height: 1000px; width: 50%}
#seckl-servlog      {max-height: 100px}

#seckl-chatsw       {width: 100%; border: 1px solid; font-family: monospace; font-weight: bolder; margin-top: 5px; margin-bottom: 5px}
#seckl-chatsw td    {width: 50%;  border: 1px solid; text-align: center}
#seckl-chswbt-dm #long  {display: inherit}
#seckl-chswbt-dm #short {display: none}

#seckl-chatin       {background:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.95)),url("/WtSS.jpg"); background-size: 100%; font-family: monospace; border-collapse: collapse; line-height: 1; border: 1px solid; clear: both; display: flex; margin-top: 5px; margin-bottom: 5px}
#seckl-chatin tbody {width: 100%}
#seckl-chatin tr    {display: flex}
#seckl-chatin td    {width: 100%; padding: 1px 10px}
#seckl-chatin p     {width: 100%; margin: 10px 0px}
#seckl-chatin #u    {font-weight: bolder}
#seckl-chatin input {width: 100%; font-family: inherit; font-size: inherit; color: inherit; background-color: #000; padding: 12px}

/* Navbar wrapper */
#seckl-navbar {width: 100%; letter-spacing: 3px; font-weight: bolder; background-color: #000; padding: 4px 8px; padding-top: 0; border-bottom: 1px solid}

/* Navbar on big screens */
/* Hide hamburger & user menu */
#seckl-burg-label, #seckl-burg-men {display: none}
/* Show horizontal menu items */
#seckl-burg-item         {display: flex; float: right}
#seckl-burg-item a       {padding: 10px; text-decoration: none; text-align: center}
#seckl-burg-item a:hover {color:#000; background-color: #1e9c31}

#seckl-user-men          {display: none}

#seckl-user-label       {display: inline-block; height: 36px; letter-spacing: 0px; font-style: normal; font-size: 1.5em; padding: 4px 8px; float:right}
#seckl-user-label:hover {color:#000; background-color: #1e9c31}
#seckl-user-item        {display: none} 
#seckl-user-item a      {width: 100%; border-top: 1px solid; padding: 10px; text-decoration: none; text-align: center}
#seckl-user-item p      {width: 100%; border-top: 1px solid; padding: 10px; text-decoration: none; text-align: center; font-weight: normal}
#seckl-user-item a:hover {color:#000; background-color: #1e9c31}
input:checked ~ #seckl-user-item {display: block; float: none; border-bottom: 1px solid}

/* Hide/change some elements on small screens */
@media screen and (max-width: 850px){
  #seckl-burg-label       {display: inline-block; height: 36px; letter-spacing: 0px; font-style: normal; font-size: 1.5em; padding: 4px 8px; float:right}
  #seckl-burg-label:hover {color:#000; background-color: #1e9c31}
  #seckl-burg-item        {display: none}
  #seckl-burg-item a      {width: 100%; border-top: 1px solid}
  input:checked ~ #seckl-burg-item {display: block; float: none; border-bottom: 1px solid}
  .seckl-chatout #d       {display: none}
}

/* Hide/change some elements on very small screens */
@media screen and (max-width: 500px){
  .seckl-chatout #t    {display: none}
  #seckl-chatsw #long  {display: none}
  #seckl-chatsw #short {display: inherit}
}