@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://use.fontawesome.com/releases/v5.8.2/css/all.css');

* { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #4E5D78; }

html { background: #FAFBFB; height: 100%; font-size: 125%; }

body, #template { margin: 0; padding: 0; display: flex; width: 100%; height: 100%; }

.wrapper { display: flex; flex-direction: column; background: white; margin: auto; width: 60vw; max-width: 40rem; border-radius: 1rem; border: 0.075rem solid #E1E4E8; box-shadow: 0 0.075rem 0.075rem #F1F2F4; }

.version { margin: 1.5rem auto; width: 25rem; text-align: center; }
.version span { font-size: 0.6rem; color: #8A94A6; text-shadow: 0 0.07rem white; }

#login.wrapper { width: 20rem; }
#login.wrapper .inner { padding: 1rem 1.5rem 0.5rem 1.5rem; display: block; }
#login.wrapper .key { margin: -4.3rem auto -2rem auto; width: 6rem; height: 6rem; }
#login.wrapper .key img { width: 100%; height: 100%; }
#login.wrapper .title { text-align: center; margin: 0.5rem 0 2rem 0; }
#login.wrapper .title span { font-weight: 400; font-size: 1.5rem; color: black; }
#login.wrapper button { margin: 1rem 0; }

#devices.wrapper { display: none; }
#devices.wrapper .content { width: 100%; padding: 0; }

p, label, li, td, th { font-size: 0.7rem; font-weight: 400; color: #777; }

input.disabled, select.disabled { background: #FAFBFB; }

input[type='text'], input[type='password'] { box-sizing: border-box; display: block; border-radius: 1.5rem; border: 0.05rem solid #E1E4E8; margin: 1.5rem 0; padding: 0.75rem 0.8rem; font-size: 0.7rem; color: #8A94A6; width: 100%; }
input[type='text']:focus, input[type='password']:focus { color: #4E5D78; }

select { box-sizing: border-box; -webkit-appearance: none; border-radius: 1.5rem; background: white; display: block; border: 0.05rem solid #E1E4E8; margin: 1.5rem 0; padding: 0.75rem 0.8rem; font-size: 0.7rem; color: #8A94A6; width: 100%; }

label { margin: 0 0 -0.75rem 0; padding: 0; display: block; }

button { border-radius: 2rem; font-weight: 500; background: #0284FE; font-size: 0.75rem; border: 0; color: white; padding: 0.45rem 1.5rem 0.50rem 1.5rem; user-select: none; }
button:hover { cursor: pointer; background: #026DD6; }
button.disabled { background: #F1F2F4; }

button.small { float: right; font-size: 0.7rem; font-weight: 500; padding: 0.4rem 0.8rem 0.45rem 0.8rem; margin: 0.95rem 0 0 0; }
button.small span { color: white; float: left; margin: 0 0 0 -0.05rem; padding: 0.12rem 0.3rem 0 0; }

button.small.remove { background: #D13A06; }

table { box-sizing: border-box; margin: -0.5rem -0.05rem 1rem -0.05rem; padding: 0; width: 100%; border: 0; }
table tr { margin: 0; padding: 0; }
table th { margin: 0; padding: 0.5rem 0; font-weight: 500; color: #8A94A6; text-align: left; vertical-align: top; }
table td { margin: 0; padding: 0.5rem 0; border-top: 0.075rem solid #F7F8F9; vertical-align: top; }
table td:first-letter { text-transform: uppercase; }
table td span { display: block; float: left; font-size: 0.65rem; margin: 0 0.5rem 0 0; padding: 0.05rem; color: #B0B7C3; }
table td.status span { float: none; margin: 0 auto; padding: 0; font-size: 0.8rem ;}

.switch { width: 100%; height: 1.25rem; margin: 0; padding: 0.75rem 0; }
.switch.on .toggle { margin-left: 1.25rem; background: #0284FE; }

.switch .track { float: left; display: block; width: 2.25rem; height: 1.25rem; background: #F7F8F9; border-radius: 1rem; }
.switch .track:hover { cursor: pointer; background: #F1F2F4; }
.switch .toggle { display: block; width: 0.75rem; height: 0.75rem; margin: 0.25rem; background: #cbcbcb; border-radius: 1rem; }
.switch label { float: left; margin: 0; padding: 0.15rem 0 0.15rem 0.75rem; }

.header { display: block; height: 2.9rem; border-bottom: 0.05rem solid #E1E4E8; }

.wrapper .key { margin: -0.6rem auto; width: 4rem; }
.wrapper .key img { width: 4rem; height: 4rem; margin: 0; padding: 0; }

.header .left { float: left; width: 28%; box-sizing: border-box; height: 2.9rem; overflow: hidden; }
.header .left .back { box-sizing: border-box; display: block; width: 100%; font-size: 0.75em; padding: 1rem 0.6rem; overflow: auto; }
.header .left .back:hover { cursor: pointer; }
.header .left .back span { display: block; float: left; width: 1rem; margin: 0 0.75rem; font-size: 1rem; text-align: center; color: #B0B7C3; }
.header .left .back strong { font-weight: 400; color: #8A94A6; }

.header .middle { float: left; width: 44%; box-sizing: border-box; height: 2.9rem; overflow: hidden; }

.header .right { float: left; box-sizing: border-box; width: 28%; height: 2.9rem; }
.header .right .avatar { float: right; width: 4rem; height: 1.6rem; margin: 0.7rem 0; background-image: url(./images/avatar_1.png); background-size: contain; background-repeat: no-repeat; background-position: center; color: white; font-size: 0.9rem; text-align: center; }

.header .right .avatar .popover { display: none; border: 0.075rem solid #E1E4E8; box-shadow: 0 0.075rem 0.075rem #F1F2F4; border-radius: 0.3rem; }
.header .right .avatar .popover ul { list-style: none; margin: 0; padding: 0; }
.header .right .avatar .popover ul li { font-size: 0.75rem; font-weight: 400; padding: 0.4rem 0.6rem; border-bottom: 1px solid #eee; }
.header .right .avatar .popover ul li:hover { background: #F1F2F4; }
.header .right .avatar .popover ul li:last-child { border: none; }

.header .right .avatar:hover, .header .right .avatar .popover:hover { cursor: pointer; }
.header .right .avatar:hover .popover, .header .right .avatar .popover:hover {
  display: block; width: 5rem; background: white; position: absolute; margin: 1.6rem 0 0 -0.6rem;
}

.main { display: block; overflow: auto; border-bottom: 0.05rem solid #E1E4E8; }

.main .sidebar { float: left; box-sizing: border-box; width: 28%; height: 50vh; background: #FAFBFB; overflow: auto; border-right: 0.05rem solid #E1E4E8; }
.main .sidebar ul { list-style: none; margin: 0; padding: 0; }
.main .sidebar ul li { margin: 0; font-size: 0.75rem; font-weight: 400; padding: 0.8rem 0.6rem; color: #8A94A6; overflow: auto; border-bottom: 0.05rem solid #E1E4E8; text-shadow: 0 0.07rem white; }
.main .sidebar ul li:hover, .main .sidebar ul li.active { cursor: pointer; background: #F1F2F4; }
.main .sidebar ul li span { display: block; float: left; width: 1rem; margin: 0 0.75rem; font-size: 1rem; text-align: center; color: #B0B7C3; }
.main .sidebar ul li strong { display: none; float: left; font-size: 0.65rem; font-weight: 500; width: 0.9rem; height: 0.85rem; text-align: center; margin: 0 0.75rem; padding: 0.075rem 0.05rem; color: white; text-shadow: none; background: #B0B7C3; border-radius: 2rem; }

.main .content { float: left; box-sizing: border-box; width: 72%; height: 50vh; padding: 0 1.25rem; overflow: scroll; }
.main .content h1 { font-size: 1rem; font-weight: 400; color: #777; padding: 0.5rem 0; }
.main .content h2 { font-size: 0.8rem; font-weight: 400; color: #777; margin: 0; padding: 0.3rem 0; }
.main .content h3 { font-size: 0.7rem; font-weight: 400; color: #777; margin: 0; padding: 0.3rem 0; }

.footer { overflow: auto; height: 2.9rem; }

.footer .statusbar { float: left; box-sizing: border-box; width: 28%; padding: 0; overflow: auto; border-right: 0.075rem solid #F7F8F9; }
.footer .statusbar:hover { cursor: pointer; }
.footer .statusbar .icon { float: left; width: 1.2rem; height: 1.2rem; margin: 0.8rem 0.75rem 0.8rem 1.25rem; background: #36AB80; border-radius: 2rem; }
.footer .statusbar .icon span { color: white; font-size: 0.7rem; display: block; padding: 0.25rem; text-align: center; }
.footer .statusbar .text { float: left; font-size: 0.6rem; line-height: 0.8rem; font-weight: 400; color: #8A94A6; width: 5rem; padding: 0.65rem 0; }

.footer .buttonbar { float: right; padding: 0; overflow: auto; }
.footer .buttonbar p { margin: 0; padding: 0.5rem 1.25rem; float: right; }
.footer .buttonbar p button { margin: 0; }

.placeholder { display: flex; flex-direction: column; width: 100%; height: 80%; overflow: auto; align-items: center; justify-content: center; }
.placeholder>div { display: block; width: 3rem; height: 3rem; padding: 1.5rem; text-align: center; font-size: 3rem; color: #F7F8F9; border: 0.1rem solid #F7F8F9; border-radius: 1rem; }
.placeholder>span { display: block; font-size: 0.7rem; color: #8A94A6; text-align: center; width: 100%; padding: 1rem 0; }

#jobs .description { font-size: 0.65rem; padding: 0.4rem 0; }
#jobs .timestamp { font-size: 0.7rem; color: #8A94A6; }

.objects { margin: 0.5rem -1.25rem -0.25rem -1.25rem; padding: 0; overflow: auto; box-sizing: border-box; border-bottom: 0.05rem solid #F1F2F4; }
.objects div { width: 100%; margin: 0; padding: 0.75rem 1.25rem 0.5rem 1.25rem; overflow: auto; box-sizing: border-box; border-top: 0.05rem solid #F1F2F4; }

.objects div h2.name { margin: 0; padding: 0.25rem 0; font-weight: 400; }
.objects div h2 span.fa { color: #B0B7C3; display: block; float: left; margin: 0.15rem 0.5rem 0 0; }
.objects div h2 span.number { color: #B0B7C3; }
.objects div ul { list-style: none; margin: 0.5rem 0; padding: 0; }
.objects div ul li { margin: 0.1rem 0; padding: 0.25rem 0; border-radius: 0.2rem; font-size: 0.65rem; }
.objects div ul li span { margin: 0 0.5rem 0 0; padding: 0.05rem 0.1rem; color: #B0B7C3; }
.objects div ul li span.fa { display: block; float: left; }
.objects div span.edit { float: right; color: #B0B7C3; padding: 0.4rem; font-size: 0.75rem; border: 0.05rem solid #E1E4E8; border-radius: 3rem; }
.objects div span.edit:hover { cursor: pointer; background: #FAFBFB; }

#devices.wrapper .items { margin: 0; overflow: auto; box-sizing: border-box; }
#devices.wrapper .items div.item { width: 100%; float: left; height: 6.2rem; margin: 0; padding: 0; box-sizing: border-box; border-bottom: 0.05rem solid #F1F2F4; user-select: none; }
#devices.wrapper .items div.item:hover { cursor: pointer; background: #FAFBFB; }
#devices.wrapper .items div.item img { float: left; width: 40px; margin: 1.6rem 1.4rem 1.6rem 1.6rem; }
#devices.wrapper .items div.item div.text { float: left; margin: 0; padding: 1rem 0; }
#devices.wrapper .items div.item h2.name { font-size: 0.8rem; font-weight: 400; margin: 0.3rem 0; padding: 0; text-transform: capitalize; }
#devices.wrapper .items div.item h2.name span { color: #B0B7C3; }
#devices.wrapper .items div.item p { font-weight: 400; font-size: 0.6rem; margin: 0; padding: 0.2rem 0; }
#devices.wrapper .items div.item p strong { font-weight: 600; color: #B0B7C3; }
#devices.wrapper .items div.item span.fa { float: right; margin: 2.5rem 1.25rem; color: font-size: 1rem; text-align: center; color: #B0B7C3; }

#loader { position: absolute; pointer-events: none; margin: 0; padding: 0; display: flex; width: 100%; height: 100%; }

.admin { display: none; }

.circular-loader {
  width: 2.5rem;
  height: 2.5rem;
  background-color: rgba(0, 0, 0, 0.025);
  border-radius: 2.5rem;
  margin: auto;
  -webkit-animation: rotate 2s linear infinite;
          animation: rotate 2s linear infinite;
  -webkit-transform-origin: center center;
      -ms-transform-origin: center center;
          transform-origin: center center;
}

.loader-path {
  stroke-dasharray: 150,200;
  stroke-dashoffset: -10;
  -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
          animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.spin {
  animation-name: spin;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes spin {
  from {
    transform:rotate(0deg);
  }
  to {
    transform:rotate(360deg);
  }
}

.shake {
  animation: shake 800ms cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

.fadeIn {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s ease 0s, opacity 150ms;
}

.fadeOut {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s ease 150ms, opacity 150ms;
}

@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1,200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -124;
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1,200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -124;
  }
}

@-webkit-keyframes color {
  0% {
    stroke: #888888;
  }
  40% {
    stroke: #888888;
  }
  66% {
    stroke: #888888;
  }
  80%, 90% {
    stroke: #888888;
  }
}

@keyframes color {
  0% {
    stroke: #888888;
  }
  40% {
    stroke: #888888;
  }
  66% {
    stroke: #888888;
  }
  80%, 90% {
    stroke: #888888;
  }
}