@font-face {
    font-family: 'LocalFont';
    src: url('/fonts/Techfont.ttf') format('embedded-opentype'), /* Internet Explorer */
         url('/fonts/Techfont.ttf') format('woff2'),             /* Super Modern Browsers */
         url('/fonts/Techfont.ttf') format('woff'),              /* Pretty Modern Browsers */
         url('/fonts/Techfont.ttf') format('truetype'),          /* Safari, Android, iOS */
         url('/fonts/Techfont.ttf') format('svg');               /* Legacy iOS */
    }



    :root {
        --link-color: rgb(65, 173, 255);
        --fonts-proportional: LocalFont!important;
/*        --fonts-monospace:   custom monospace fonts  !important; */
/*        --fonts-emoji:  custom emoji fonts  !important; */
    } 
    
        .twc_page {
            display:none;
            padding: 10pt;
            border-width: 1px;
            border-style: solid;
            border-radius: 5pt;
            border-color: rgba(200, 200, 200, 0.3)!important;
            background-color: rgba(200, 200, 200, 0.05);
        }


        .label_for_big_checkbox {
            width:32pt;            
            display: inline-block;
            padding-left: 0pt;
        }

        .big_checkbox, .label_for_big_checkbox > input {            
            display: inline-block;
            line-height:32pt;
            min-height:32pt;
            
            margin-top: 0px;
        }

        .label_checkbox {
            width:100%;
            min-height:32pt;
            display: inline-block;    
            line-height: 30pt;
            /* padding-left: 5pt; */
        }

        label > * {
            vertical-align: middle;
        }

        .valign {
            vertical-align: middle;
        }

        label:has(img),
        label:has(input[type="checkbox"]) {
            text-align: center;
        }

        .righteous > * {
            margin: auto 5pt auto auto;
        }

        .shifted {
            padding-left: 10pt;
        }

        .grey {
            color: rgba(150,150,150,1);
            font-style: italic;
        }

        .gray {
            color: rgba(150,150,150,1);            
        }

        .red {
            color: rgba(250,50,50,1);            
        }

        .yellow {
            color: rgba(200,200,50,1);            
        }


        .strong {
            font-weight: bold;
        }

        .narrow {
            width:32pt;
        }

        /* fixes for water.css */
        :root {
            user-select: none;
        }

        tr {
            min-height: 32pt;
            padding: 0px;
        }

        th, td {
            height:inherit;
            padding-left: 0px;
            padding-right: 0px;            
        }

        table {
            table-layout: auto;
            border-collapse: collapse;
            padding: 0px;
        }

        summary:hover,
        summary:focus {
            text-decoration: none;
        }


        .fullwidth {
            width: 100%;
            width: -webkit-fill-available;
            display: inline-block;
        }

        .halfwidth {
            width: 50%;
        }

        .quarterwidth {
            width: 25%;
        }

        .threequarterwidth {
            width: 75%;
        }

        

        td {
            padding-left: 5pt;
            padding-right: 5pt;
        }

        td, tr, th, tbody, table {
            padding-top: 0pt;
            padding-bottom: 0pt;
            margin-top: 0pt;
            margin-bottom: 0pt;
        }




        span, label {
            display: inline-block;
            min-height: 32pt;
            line-height: 30pt;
            padding-left: 0pt;
        }

        * {
            /* outline-width: 1px!important;
            outline-color: red;
            outline-offset: 0px;
            border: 1px solid!important; */
        }


        input {
            margin:0;            
        }


        .fixed {
            table-layout: fixed;
        }



        table:has(:not(table)), tr:has(:not(table)), td:has(:not(table)) {
            background-color: #161f27;
            background-color: var(--background-alt);
          }
          

        table tr td:hover {
            /* background-color: var(--background-body); */
        }

        details {
            margin-left: 0pt;
            margin-top: 0pt;
            margin-right: 0pt;
            margin-bottom: 5pt;
        }
/* 
        summary {
            margin-left: -5pt;
            margin-top: -5pt;
            margin-right: -5pt;
            margin-bottom: -5pt;
            padding-left:   5pt;
            padding-top:    0pt;
            padding-right:  0pt;
            padding-bottom: 5pt;
        } */

        .chat_preview * {
            all: unset;
            color:initial;
        }

        .chat_preview {
            width: calc(100% - 10pt); 
            height: auto;            
            background-color: rgb(235, 235, 235);
            display: inline-block; 
            padding: 5pt;
        }


        .chat_preview hr {
            display: block;
            background-color: black;
            height: 1px;
            margin: 10pt;
        }

        .user-name  {
            font-weight: bold;
        }

        .chat_message_newbie_username {
            color: purple;
        }

        .chat_message_regular_username {
            color: olive;
        }

        .chat_message_follower_username {
            color: lightblue;
        }

        .chat_message_subscriber_username {
            color: darkgreen;
        }

        .chat_message_vip_username {
            color: blueviolet;
        }

        .chat_message_artist_username {
            color: orange;
        }

        .chat_message_moderator_username {
            color: green;
        }

        .chat_message_editor_username {
            color: darkred;
        }

        .chat_message_broadcaster_username {
            color: orangered;
        }


        .inline {
            display: inline;
        }
        
        .flex {
            display: flex;
        }

        .chat_message {
            display: block;
            background-color: rgb(255, 255, 255);
        }

        .chat_message_wrapper {
            display: block;
            
        }

        .rot90left{
            transform: rotate(-90deg);
            direction: rtl;
        }


        .section_header {
            vertical-align: middle;
            border-right: 3pt solid  var(--border);
        }




#login_form {
	display: flex;
	position: absolute;
	margin: 0;	
	width:100%;
	height:100%;
	border: 1px solid black;
	background-color: #333;
	align-items: center;
	vertical-align: middle;
	padding-top:25%;
	z-index:10000;
    align-items: center;
    flex-flow: inherit;
}

#login_form > * {
	width: 50%;
	height: 24pt;	
	margin-bottom: 5pt;
	margin-left: 25%;
	margin-right: 25%;
	position:relative;
}


#main_wrapper {    
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

#block_menu {
    padding: 5pt;
    /* height: 80pt; */
    overflow-y: hidden;
    
}

#main_menu_header button {
    padding: 5pt;
    margin: 0pt;
    /* border-radius: 0pt; */
    cursor: pointer;
    border-top: 1px solid #444;
    border-bottom: 1px solid #444;
}

#main_menu_header {
     text-align: center;
}

#block_main {
    flex: 1;
    overflow-y: auto;
}

#gallery_page {
    padding: 10pt;
    flex: 1;
    overflow-y: auto;
    width: calc(100% - 20pt);
    height: calc(100% - 70pt);
}

#block_footer {    
    padding: 5pt;    
    height: 27pt;    
    overflow-y: hidden;
}

#copyright_footer {
    text-align: center;
    line-height: 14pt;
    height: 27pt;
    overflow: hidden;
}

th {
    color: #222; 
    text-align: center;
    padding: 5pt;
}

#side_menu {
    width: 150pt;
    padding: 40pt 10pt 0pt 0pt;
}


/* ================= AI =================== */


body {
    margin: 0;
    padding: 0;
    font-family: LocalFont!important;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: unset;           
    line-height: 24pt;
    font-size: 10pt!important;
  }

  /* Top Menu */
  .top-menu {
    background-color: #333;
    color: #fff;
    padding: 5pt;
    margin: 0pt;
    display: flex;
    justify-content: center;
  }


  .top-menu nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }


  .top-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
  }

  .top-menu li {
    margin: 0 8pt;
  }

  .top-menu a {
    color: #fff;
    text-decoration: none;
  }

  /* Main Content */
  .main-content {
    flex-grow: 1;
    display: flex;
  }

  .sidebar {      
    background-color: #1a3b54;
    padding: 20px;
    width: 200px;
  }

  .sidebar {
    background-color: #1a3b54;
    padding: 20px;
    width: 200px;
  }
  
  .sidebar h3 {
    color: #b3d9ff;
  }
  
  .sidebar a {
    color: #fff;
    text-decoration: none;
  }
  
  .sidebar a:hover {
    color: #b3d9ff;
  }

  .content {
    flex-grow: 1;
    padding: 20px;
  }

  /* Footer */
  .footer {
    background-color: #333;
    color: #fff;
    padding: 0pt;
    text-align: center;
  }

  /* Mobile Responsive */
  @media (max-width: 480pt) {
    .main-content {
      flex-direction: column;
    }

    .sidebar {
      width: auto;
    }

  }

embed {
    margin: 0!important;
    padding: 0!important;
}

.hoverable:hover {
    filter: brightness(120%) hue-rotate(-45deg);
}

.hoverable:hover a {
    color: burlywood;
    text-decoration: none;
}


.round_back_button {
    margin-left: 10pt;
    height: 100%;
    display: inline-block;   
    vertical-align: text-bottom;
    width: 26pt;
    height: 26pt;
    text-align: center;
    border-radius: 5pt;
    color: darkblue;
    background-color: darkcyan;
    box-shadow: 0px 0px 6px black;
    text-decoration: none;
  }

  .round_back_button:hover {
    filter: brightness(130%) hue-rotate(20deg);
    text-decoration: none;
  }


  .nodecor {
    text-decoration: none;
  }