html {
  box-sizing: border-box;
  overflow: hidden;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body { 
  background-image: radial-gradient(circle, #2a2a2a, #212121, #191919, #0f0f0f, #000000);
  
  /* Disable text select */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  height: 100vh;
  height: 100svh;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

img {
  /* Disable image drag */
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.container {
  border-radius: 20px;
  border: 1px solid rgb(58, 60, 58);
  background: rgb(23, 25, 24);
  padding: 20px 70px 20px 70px;
  /* height: 75vh; */
  /* min-height: 550px; */
  
  display: flex;
  /* justify-content: center; */
  align-items: center;
  flex-direction: column;

  animation: container 1s ease-in-out;
}

@keyframes container {
  0% { 
    transform: translateY(20%);
    opacity: 0;
  }
  100% { 
    transform: translateY(0%);
    opacity: 1;
  }
}

.container h1 { 
  color: white;
  font-size: 3.3rem;
}

.container img {
  height: 50px;
  width: 50px;
}

/* Login UI */
.container[id="login-window"]  img[id="logo"] {
  display: block;
  margin: 20%;
  width: 160px; 
  height: 160px;
}

.container[id="login-window"]  form {
  width: 300px;
  position: relative;
}

.container[id="login-window"]  input {
  width: 100%;
  padding: 15px;
  border-radius: 10px;
  border: 1px solid rgba(39, 40, 41, 0.6);
  font-size: 1.1rem;
  outline: none;
  margin-bottom: 10px;
  background-color: #252527;
  
  transition: all 0.2s ease-in-out;
}

.container[id="login-window"]  input[id="password-field"]:focus,
.container[id="login-window"]  input[id="password-field"]:valid {
  padding: 22px 40px 8px 15px;
}

.container[id="login-window"]  input[id="username-field"]:focus,
.container[id="login-window"]  input[id="username-field"]:valid {
  padding: 22px 15px 8px 15px;
}

.container[id="login-window"]  input:focus {
  outline: 3px solid rgb(55, 135, 215);
}

.container[id="login-window"]  span {
  top: 0;
  left: 0;
  position: absolute;
  color: #86868b;
  padding: 15px;
  pointer-events: none;
  transition: all 150ms ease-in-out;
  font-size: 1rem;
}

.container[id="login-window"]  span[id=pwd] {
  margin-top: 63px;
}

.container[id="login-window"]  i {
  color: #86868b;
}

.container[id="login-window"]  input {
  color: white;
}

.container[id="login-window"]  input:focus[id="username-field"] ~ span[id="usr"],
.container[id="login-window"]  input:valid[id="username-field"] ~ span[id="usr"],
.container[id="login-window"]  input:focus[id="password-field"] ~ span[id="pwd"],
.container[id="login-window"]  input:valid[id="password-field"] ~ span[id="pwd"] {
  transform: translateY(-10px);
  font-size: 0.8rem;
}

.container[id="login-window"] button {
  position: absolute;
  top: 71px;
  right: 5px;
  color: rgba(39, 40, 41, 0.6);
  font-size: 1.8rem;
  background: none;
  border: none;
  cursor: pointer;
}

/* Mobile rwd section */

.container_static {
  display: flex;
  border: none;
  background: transparent;
  padding: 0px;
  animation: none
}

.container_static  h1 {
  font-size: 6.5rem;
}

.container_static img {
  height: 90px;
  width: 90px;
}

.container_static[id="login-window"]  img[id="logo"] {
  display: block;
  margin: 20%;
  width: 320px; 
  height: 320px;
}

.container_static[id="login-window"]  form {
  width: 600px;
  position: relative;
}

.container_static[id="login-window"]  input {
  font-size: 3rem;
}

.container_static[id="login-window"]  span[id=usr] {
  font-size: 2.8em;
}

.container_static[id="login-window"]  span[id=pwd] {
  padding: 50px 0px 0px 15px;
  font-size: 2.8em;
}

.container_static[id="login-window"] input[id="password-field"]:focus,
.container_static[id="login-window"] input[id="password-field"]:valid {
  padding: 22px 80px 8px 15px;
}

.container_static[id="login-window"] button {
  top: 110px;
  left: 465px;
  align-self: flex-end;
  font-size: 3.8rem;
}


div.spinner[id="login-loading"] {
  display: none;
}

.container_static[id="login-window"] [class="spinner"] {
  position: absolute;
  top: 25px;
  left: 85px;
  display: none;
}

.container_static[id="login-window"] [class="spinner"] div {
  width: 6px;
  height: 16px;
}


/* =====================
| Device list and card |
===================== */
.container div[id="list-wrapper"] {
  width: 100%;
  margin-bottom: auto;
  overflow-y: auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black var(--top-mask-size, 0), black calc(100% - var(--bottom-mask-size, 0)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, black var(--top-mask-size, 0), black calc(100% - var(--bottom-mask-size, 0)), transparent 100%);
  --top-mask-size: 0px;
  --bottom-mask-size: 0px;
}

.container[id="device-list"] button[id^='status-dev'] {
  width: 400px;
  height: 110px;
  margin: 10px auto 10px auto;
  padding: 10px;
  background-color: rgb(56, 56, 55);
  border-radius: 10px;
  border: none;

  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: row;

  transition: all 350ms ease-in-out;
}
.container_static[id="device-list"] button[id^='status-dev'] {
  width: 800px;
  height: 180px;
  font-size: 2em;
}

.container[id="device-list"] button[id^='status-dev']:hover {
  background-color: rgb(61, 61, 60);
  transform: scale(0.97);
  transition: all 150ms ease-out;
}

.container[id="device-list"] button[id^='status-dev']:active {
  transform: scale(0.95);
  transition: all 50ms ease-in-out;
  background-color: rgb(48, 48, 47);
  opacity: 80%;
}

.container[id="device-list"] button[id^='status-dev'] img {
  position: absolute;
  height: 90px;
  width: 90px;
}
.container_static[id="device-list"] button[id^='status-dev'] img {
  height: 160px;
  width: 160px;
}

.container[id="device-list"] button[id^='status-dev'] span[id=name] {
  color: white;
  font-size: 1.8rem;
  position: absolute;
  margin: 10px auto auto 95px;
}
.container_static[id="device-list"] button[id^='status-dev'] span[id=name] {
  font-size: 3rem;
  margin: 10px auto auto 195px;
}

.container[id="device-list"] button[id^='status-dev'] span[id=ip] {
  color: gray;
  font-size: 1.1rem ;
  position: absolute;
  margin: 40px auto auto 95px;
}
.container_static[id="device-list"] button[id^='status-dev'] span[id=ip] {
  font-size: 2rem ;
  margin: 60px auto auto 195px;
}

.container[id="device-list"] button[id^='status-dev'] span[id^='status'] {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  position: absolute;
  background-color: #f3c53f;
  margin: 65px auto auto 65px;
}
.container_static[id="device-list"] button[id^='status-dev'] span[id^='status'] {
  height: 50px;
  width: 50px;
  margin: 110px auto auto 110px;
}


/* =========================
| Refresh and logout button |
========================== */
.container[id="device-list"] div[id="function-wrapper"] {
  position: relative;
  height: auto;
  width: 400px;
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.container_static[id="device-list"] div[id="function-wrapper"] {
  width: 800px;
  margin-top: 80px;
}

.container[id="device-list"] button[id=refresh], 
.container[id="device-list"] button[id=logout] {
  width: 450px;
  height: 45px;
  color: white;
  border: 0px;
  margin: 0px 9px 0px 9px;
  text-align: center;
  font-size: 20px;
  cursor: pointer;
  border-radius: 50px;
}
.container_static[id="device-list"] button[id='refresh'], 
.container_static[id="device-list"] button[id='logout'] {
  width: 600px;
  height: 90px;
  font-size: 3em;
}

.container[id="device-list"] button[id=logout] {
  position: relative;
  background-color: red;
}

.container[id="device-list"] button[id=refresh] {
  background-color: rgb(4, 97, 196);
}

.container[id="device-list"] [class="spinner"] {
  position: absolute;
  top: 19px;
  left: 98px;
  display: none;
}
.container_static[id="device-list"] [class="spinner"] {
  position: absolute;
  top: 37px;
  left: 195px;
  display: none;
}

.container_static[id="device-list"] [class="spinner"] div {
  width: 6px;
  height: 16px;
}

/* ==========================
| Cupertino loading spinner |
===========================*/
div.spinner {
  position: relative;
  width: 20px;
  height: 20px;
  top: 12px;
  border-radius: 10px;
}

div.spinner div {
  width: 2.7px;
  height: 8px;
  background: #FFF;
  position: absolute;
  opacity: 0;
  -webkit-border-radius: 50px;
  -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2);
  -webkit-animation: fade 1s linear infinite;
}

@-webkit-keyframes fade {
  from {opacity: 1;}
  to {opacity: 0.25;}
}

div.spinner div.bar1 {
  -webkit-transform:rotate(0deg) translate(0, -130%);
  -webkit-animation-delay: 0s;
}    

div.spinner div.bar2 {
  -webkit-transform:rotate(30deg) translate(0, -130%); 
  -webkit-animation-delay: -0.9167s;
}

div.spinner div.bar3 {
  -webkit-transform:rotate(60deg) translate(0, -130%); 
  -webkit-animation-delay: -0.833s;
}
div.spinner div.bar4 {
  -webkit-transform:rotate(90deg) translate(0, -130%); 
  -webkit-animation-delay: -0.7497s;
}
div.spinner div.bar5 {
  -webkit-transform:rotate(120deg) translate(0, -130%); 
  -webkit-animation-delay: -0.667s;
}
div.spinner div.bar6 {
  -webkit-transform:rotate(150deg) translate(0, -130%); 
  -webkit-animation-delay: -0.5837s;
}
div.spinner div.bar7 {
  -webkit-transform:rotate(180deg) translate(0, -130%); 
  -webkit-animation-delay: -0.5s;
}
div.spinner div.bar8 {
  -webkit-transform:rotate(210deg) translate(0, -130%); 
  -webkit-animation-delay: -0.4167s;
}
div.spinner div.bar9 {
  -webkit-transform:rotate(240deg) translate(0, -130%); 
  -webkit-animation-delay: -0.333s;
}
div.spinner div.bar10 {
  -webkit-transform:rotate(270deg) translate(0, -130%); 
  -webkit-animation-delay: -0.2497s;
}
div.spinner div.bar11 {
  -webkit-transform:rotate(300deg) translate(0, -130%); 
  -webkit-animation-delay: -0.167s;
}
div.spinner div.bar12 {
  -webkit-transform:rotate(330deg) translate(0, -130%); 
  -webkit-animation-delay: -0.0833s;
}