/* @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap'); */

@font-face {
  font-family: 'Roboto Mono';
  src: url('/fonts/roboto-v48-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Mono';
  src: url('/fonts/roboto-v48-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

/* Optional italics */
@font-face {
  font-family: 'Roboto Mono';
  src: url('/fonts/roboto-mono/roboto-mono-v22-latin-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
}

:root {
    --main-font-size: 1em;
    --small-font-size: 0.8em;
    --large-font-size: 1.2em;
    --main-font-family: Roboto;
    --mono-font-family: "Roboto Mono", monospace;
    --accent-color: #3584e4;
    --black-color: #000000;
    }

body, html {
    max-width: 100%;
    overflow-x: hidden;
    margin: 0%;
    font-size: var(--main-font-size);
    font-family: var(--main-font-family);
    touch-action: pan-x pan-y;
    height: 100%;
    /* overflow-y:hidden; */

}
 /* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
body {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.monospace {
    font-family: var(--mono-font-family);
}

.variable-width-font {
    font-family:var(--main-font-family);
}

#main_table_container {
    margin-top: -1em;
    margin-left: 10px;
    margin-right: 10px;
}

#logo {
    padding-left:0.5em;
}

#controls_container {
        position:relative;
        top: -2.5em;
}

#help {
    background-color: skyblue;
    padding-left: 0.75em;
    padding-right: 0.75em;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
    color: white;
    border-radius: 25px;
}

#help:hover {
    cursor: pointer;
}

#page_heading {
    padding-bottom: 0.5em;
}

#help {
    float:right;
}

#top_bar {
    padding-top: 0.5em;
    padding-right: 0.5em;
}

#menu_container {
    position: relative;
    font-size: 0em;
    top: -20px;
    text-align: center;
    /* align-items: center; */
    /* justify-content: center; */
    /* width: 100%; */
    right: 40px;
}

.menu_item {
    display: block;
    width: 100vw;
    text-decoration: none;
    color: darkblue;
    padding: 0.2em;
}

.menu_item_container:nth-child(odd) {
    background-color: gainsboro;
    width:100vw;
}

ul {
    list-style-type: none;
}

.menu_item:hover {
    background-color: skyblue;
}
/* a { */
/*     font-size: var(--large-font-size); */
/* } */

#user {
    font-size:1em;
    top:0.3em;
    position: relative;
    float:right;
    background-color: #eb1c23;
    padding-left: 1em;
    padding-right: 1em;
    color: white;
    border-radius: 0.2em;
    margin-right:2em;
}
/* hamburger menu  start */
.menu-btn {
    float: right;
    position: relative;
    right: 10px;
    width: 30px;
    height: 40px;
    cursor: pointer;
}

.menu-btn div {
    width: 100%;
    height: 4px;
    background-color: #eb1c23;
    margin: 6px 0;
    transition: all 0.3s ease;
}

/* Animation when active */
.menu-btn.active div:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}

.menu-btn.active div:nth-child(2) {
    opacity: 0;
}

.menu-btn.active div:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}

.menu-btn.active + .menu {
    display: block;
}
/* hamburger menu end */

/* help start*/
#help_container {
    position: relative;
    font-size: 0em;
    background-color:lightgrey;
    top: -2.5em;
    border-radius: 10px;
    padding-left:1em;
    padding-right:1em;
    margin-top:-0.8em;
}
/* help end */

input[type=checkbox], input[type=radio] input[type=text]{
    accent-color: var(--accent-color);
}

a:link, a:visited {
    color: darkblue;
}

button, input[type="file"], input[type="submit"], input[type="radio"],  input[type="file"]::file-selector-button, select{
    cursor: pointer;
}

button, input[type="submit"], .upload-button, input[type="file"]::file-selector-button, select, .button {
    all:unset;
    appearance:none;
    -webkit-appearance: none;
    background-color:#e9e9ed;
    padding-top:2px;
    padding-bottom:2px;
    padding-left: 4px;
    padding-right: 4px;
    border:1px solid;
    border-radius:3px;
    cursor:pointer;
}

input[type="file"]::file-selector-button {
    margin-right: 0.5em;
}

input[type="file"] {
    all:unset;
    appearance:none;
    -webkit-appearance:none;
}

button:active {
    transform: translateY(2px);
}

body {
    padding-bottom: 4em;
}

/*  admin console  */

.admin-new-user-qrcode {
    width: 200px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.std-containers {
    border-style: solid;
    border-width: 1px;
    padding:10px;
    border-radius:10px;
    margin-bottom:10px;
}

.admin_title {
    font-weight:bold;
    padding-bottom:10px;
}

.std-container {
    position:relative;
    top:-2em;
}
/*  admin console  */

.full-width-text-input {
    width: 100%;
    box-sizing: border-box;
    font-size: var(--large-font-size);
    font-family: var(--mono-font-family);
}
.user-select-none {
    user-select: none;
}
.transparent {
    color:transparent;
    text-shadow: 0 0 0 white;
}
.font-weight-normal {
    font-weight: normal;
}
.color-red {
    color:red;
}
.position-relative-left {
    position:relative; left:0px;
}
.text-align-right {
    text-align:right;
}
.cursor-pointer {
    cursor:pointer;
}