/**
  WebApp Style Sheet
**/

/*============================================================================*/

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

* {
  font-family: 'Noto Sans', sans-serif;
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 1.30rem;
}

.admin-bar #wrap {
  top: 32px;
}

@media all and (max-width: 782px) {
  .admin-bar #wrap { top: 46px; }
}

hr {
  height: 2px;
  border: 0;
  background-color: #42BEFF;
}

a, a:link { text-decoration: none; color: #42BEFF; }
a:visited { color: #42BEFF; }
a:hover { color: #08AAFF; }
a:active { color: #08AAFF; }

h1, h2, h3, h4, h5, h5 {
  margin: 0;
}

/*
#wrap {}
*/

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.admin-bar header {
  top: 32px;
}

@media all and (max-width: 782px) {
  .admin-bar header{ top: 46px; }
}

#titlebar {
  text-align: center;
  padding: 0.50rem;
  background-color: #333;
  color: #FFF;
}

main {
  margin: 0.50rem;
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.25rem 0.25rem;
  background-color: #333;
  color: #FFF;
  font-size: 0.70rem;
}

#copyright {
  text-align: right;
  padding: 0 0.50rem;
}
/*

#toggler {
  display: none;
}
#toggler + #nav-menu {
  display: none;
}
#toggler:checked + #nav-menu {
  display: block;
}

#toggle-menu {
  position: absolute;
  top: 0.50rem;
  right: 0.50rem;
}
*/

#nav-menu {
/*
  display: none;
*/
  background: #EEE;
  padding: 0.25rem;
  border-bottom: 1px solid #555;
}

#nav-menu a:last-child {
  float: right;
}

@media (max-width: 640px) {
  #toggle-menu {
    position: relative;
    display: block;
    margin: 0 0 1rem 1rem;
  }
  #nav-menu a:last-child {
    float: none;
  }
  #nav-menu a {
    float: ;
    display: block;
  }
}

.webapp-not-logged-in {
  display: flex;
  justify-content: center;
  align-items: center;
}

.webapp-not-logged-in > div {
  border: 3px solid #00F;
  border-radius: 1rem;
  max-width: 600px;
  margin: 0 1rem;
  padding: 1rem;
  text-align: center;
}

.webapp-button {
  box-shadow:inset 0px 1px 0px 0px #ffffff;
  background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
  background-color:#ffffff;
  border-radius:6px;
  border:1px solid #dcdcdc;
  display:inline-block;
  cursor:pointer;
  color:#42BEFF;
  font-family:Arial;
  font-size: 1rem;
  font-weight:bold;
  padding:6px 24px;
  text-decoration:none;
  text-shadow:0px 1px 0px #ffffff;
}
.webapp-button:hover {
  background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
  background-color:#08AAFF;
}
.webapp-button:active {
  position:relative;
  top:1px;
}

.webapp-button-big {
  font-size: 2rem;
  padding: 2rem 3rem;
}

#webapp-dialog {
  border: solid gray 2px;
  border-radius: 10px;
}

#webapp-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.2);
}

@media (max-width: 320px) {
  #wrap {
    display: none;
  }
  #nox {
    display: block !important;
    text-align: center;
    color: #333;
    background-color: #FFF;
    padding: 1rem;
  }
}

/*============================================================================*/
/* =====[ (c) 2025 CSR Tech Concepts Inc All Rights Reserved.       ]=========*/