/* Import */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@400;600&family=Space+Mono&display=swap');

/* CSS Reset */
*{
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
}

/* Variables */
:root {
  /* Colors */
  --colorBase: #151515;
  --colorBody: #fffdf4;
  --colorBackground: #fffdf4;
  --colorTrue: #349353;
  --colorFalse: #e74c3d;
  /* Fonts */
  --font-body: 'IBM Plex Sans KR', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --size-xxs: calc(1rem / 4 * 1);
  --size-xs: calc(1rem / 4 * 2);
  --size-sm: calc(1rem / 4 * 3);
  --size-md: calc(1rem / 4 * 4);
  --size-lg: calc(1rem / 4 * 5);
  --size-xl: calc(1rem / 4 * 6);
  --size-xxl: calc(1rem / 4 * 8);
  --size-xxxl: calc(1rem / 4 * 10);
  /* Misc */
  --border-sm: 1px;
  --content-max-width: 640px;
  --opacity: .5;
  --borderRadius: "10px";
  --borderWidth: "10px";
}

html {
  font-size: 12px;
}

/* General */
body {
  font-size: var(--size-md);
  font-family: var(--font-body);
  line-height: 1.35;
  letter-spacing: 0.03em;
  color: var(--colorBase);
  background-color: var(--colorBackground);
  padding: var(--size-lg) var(--size-lg) var(--size-xxxl) var(--size-lg);
  overflow-x: hidden;
}

/* Loading */
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  text-align: center;
  padding: var(--size-xs);
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-size: var(--size-sm);
  background-color: var(--colorBackground);
  color: var(--colorBase);
  padding-top: 45vh;
  height: 100vh;
}
.loading span {
  animation-name: blink;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.loading span:nth-child(2) {animation-delay: .2s;}
.loading span:nth-child(3) {animation-delay: .4s;}
@keyframes blink {
  0% {opacity: 0;}
  20% {opacity: 1;}
  100% {opacity: 0;}
}
body.isLoading .reset,
body.isLoading .main {
  display: none;
}
body:not(.isLoading) .loading {
  display: none;
}



/* Logo */
#logo {
  display: block;
  width: 80px;
  max-width: 33%;
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--size-xl);
  cursor: pointer;
}

/* header */
#header {
  text-align: center;
  margin-bottom: var(--size-xxl);
}
#title {
  font-size: var(--size-xxxl);
  margin-top: var(--size-lg);
  font-weight: 600;
}
#title span:first-child:after {
  content: ": ";
}
#title span:last-child {
  font-style: italic;
}
#subtitle {
  font-size: var(--size-xl);
  margin-top: var(--size-sm);
}
#reset,
#back {
  position: fixed;
  top: var(--size-sm);
  left: var(--size-sm);
  z-index: 2;
  font-size: var(--size-md);
  font-family: var(--font-mono);
  text-transform: uppercase;
  cursor: pointer;
  padding: var(--size-xs) var(--size-sm);
  display: inline-block;
  background-color: var(--colorBase);
  color: var(--colorBody);
}
body:not(.filtered) #reset {display: none;}

/* footer */
#footer {
  text-align: center;
  margin-top: calc(var(--size-xxxl) * 2);
  border-top: var(--borderWidth) dashed var(--colorBase);
  padding-top: var(--size-xxxl);
}
#footer_logo {
  width: 80px;
  margin-bottom: var(--size-xl);
}
#footer p {
  font-size: var(--size-xl);
}
.footer_links {
  list-style: none;
  margin-top: var(--size-xxxl);
}
.footer_links li {
  display: inline-block;
  margin-right: var(--size-xxl);
}
.footer_links li a {
  display: block;
}
.footer_links li img {
  display: block;
  width: auto;
  height: 60px;
}

/* Search */
.fuzzy-search {
  width: 100%;
  padding: var(--size-sm);
  font-size: var(--size-sm);
  font-family: var(--font-mono);
  text-transform: uppercase;
  margin-top: var(--size-lg);
  margin-bottom: var(--size-xxl);
  background-color: var(--colorBody);
}

/* list */
.list {
  list-style: none;
}
.list > li {
  padding: var(--size-md);
  margin-bottom: var(--size-xl);
  background-color: var(--colorBody);
  border-radius: var(--borderRadius);
  border: var(--borderWidth) solid var(--colorBody);
}
.list:not(#sensors) > li.outRange {border-color: var(--colorFalse)}
.list:not(#sensors) > li.inRange {border-color: var(--colorTrue)}

#list > li {
  display: flex;
  flex-direction: column;
}
#list > li div.primarySensor {
  order: 1;
}
#list > li div:not(.primarySensor) {
  order: 2;
}
#list .primarySensor {
  text-align: center;
  padding-bottom: var(--size-md);
  border-bottom: var(--borderWidth) solid var(--colorBase);
}
#list > li .primarySensor div:first-child {
  font-size: var(--size-xxl);
  font-weight: 600;
}
#list > li.inRange .primarySensor {
  color: var(--colorTrue);
  border-color: var(--colorTrue);
}
#list > li.outRange .primarySensor  {
  color: var(--colorFalse);
  border-color: var(--colorFalse);
}
#list > li.inactive {
  opacity: .3;
}
#list .name,
#list .user,
#list .city,
#list .tag,
#list .id {
  cursor: pointer;
}
#list .name {
  font-size: var(--size-xl);
  font-weight: 600;
  text-align: center;
  display: block;
  margin-top: var(--size-xl);
  padding-bottom: var(--size-xxl);
  border-bottom: var(--border-sm) dashed var(--colorBase);
  margin-bottom: var(--size-xs);
}
#list .user:before,
#list .city:before,
#list .tags:before,
#list .id:before,
#list .lastUpdate:before {
  margin-right: .2em;
  font-size: var(--size-sm);
  font-family: var(--font-mono);
  display: block;
  text-transform: uppercase;
  margin-bottom: var(--size-xs);
  font-weight: normal;
}
#list .user:before {content: "User";}
#list .city:before {content: "City";}
#list .tags:before {content: "Tag(s)";}
#list .id:before {content: "Id";}
#list .lastUpdate:before {content: "Last update"; margin-bottom: 0;}
#list .tag{
  display: inline-block;
}
#list .user,
#list .city,
#list .tags,
#list .id {
  padding-bottom: var(--size-xs);
  border-bottom: var(--border-sm) dashed var(--colorBase);
  margin-bottom: var(--size-xs);
  font-weight: 600;
}
#list .inRange .name, #list .inRange .user, #list .inRange .city, #list .inRange .tags, #list .inRange .id {border-color:var(--colorTrue);}
#list .outRange .name, #list .outRange .user, #list .outRange .city, #list .outRange .tags, #list .outRange .id {border-color:var(--colorFalse);}
.list .tag {
  display: inline-block;
  margin-right: var(--size-xs);
  margin-bottom: var(--size-xs);
  font-size: var(--size-sm);
  font-weight: normal;
  font-family: var(--font-mono);
  text-transform: uppercase;
  border: var(--border-sm) solid var(--colorBase);
  padding: var(--size-xxs) var(--size-xs);
}
#list .lastUpdate {
  font-size: var(--size-sm);
  font-family: var(--font-mono);
  text-transform: uppercase;
  text-align: center;
  margin-top: auto;
}
#list .lastUpdate:before {
  display: block;
  font-size: var(--size-sm);
  margin-top: var(--size-lg);
}
.list .updated {
  animation: pop 1.2s 1;
}
@keyframes pop {
  0% { transform: translate(0%, 0%); }
  30% { transform: translate(0, -10%); }
  100% { transform: translate(0, 0%); }
}
/* minimalistic */
.minimalistic.index #title span:first-child:after {content: none;}
.minimalistic.index #title span:last-child {display: none;}
.minimalistic:not(.index) #title span:first-child {display: none;}
.minimalistic:not(.index) #title span:last-child {font-style: normal;}
.minimalistic #list li > * {
  display: none;
}
.minimalistic #list li {position: relative;}
.minimalistic #list li .name {
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  opacity: 0;
}
.minimalistic #list li:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.minimalistic #list li.inRange {background-color: var(--colorTrue); border-color: var(--colorBody) !important;}
.minimalistic #list li.outRange {background-color: var(--colorFalse); border-color: var(--colorBody) !important;}
.minimalistic #list li:not(.inRange):not(.outRange) {border-color: var(--colorBase);}
.minimalistic #list > li {
  width: calc(100% / 7 - var(--size-lg)) !important;
}
.minimalistic #list {
  margin-left: calc(var(--size-lg) * -1);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.minimalistic #list > li {
  display: flex;
  flex-direction: column;
  margin-left: var(--size-lg);
}

/* detail */
#sensors {
  margin-top: var(--size-xxxl);
}
#sensors li h2,
#sensors li h3 {
  text-align: center;
  font-weight: 300;
}
#sensors li h2 {
  font-size: var(--size-xxl);
  font-weight: 600;
}
#sensors li h3 {
  padding-bottom: var(--size-md);
  border-bottom: 4px solid var(--colorBase);
}
#sensors .value:after {
  content: " ";
}
#sensors .outRange h2,
#sensors .outRange h3 {
  color: var(--colorFalse);
}
#sensors .outRange h3 {
  border-color: var(--colorFalse);
}
#sensors .inRange h3 {
  border-color: var(--colorTrue);
}
#sensors .inRange h2,
#sensors .inRange h3 {
  color: var(--colorTrue);
}
.uplot {
  margin-top: var(--size-xl);
}
.u-legend, .u-cursor-pt {display: none;}
.more {
  text-align: center;
  display: table;
  color: var(--colorBase);
  font-size: var(--size-lg);
  font-weight: 600;
  margin-top: var(--size-md);
  text-decoration: none;
  border: var(--border-sm) solid var(--colorBase);
  padding: var(--size-md);
  margin-left: auto;
  margin-right: auto;
}

@media screen and (min-width: 870px) {
  html {
    font-size: 15px;
  }
  .list {
    margin-left: calc(var(--size-lg) * -1);
    display: flex;
    flex-wrap: wrap;
  }
  .list > li {
    display: flex;
    flex-direction: column;
    margin-left: var(--size-lg);
  }
  .list > li {
    width: calc(100% / 2 - var(--size-lg));
  }
  #sensors > li {
    width: calc(100% / 2 - var(--size-lg));
  }
}

@media screen and (min-width: 1080px) {
  .list > li {
    width: calc(100% / 3 - var(--size-lg));
  }
  #sensors > li {
    width: calc(100% / 2 - var(--size-lg));
  }
}

@media screen and (min-width: 1440px) {
  .list > li {
    width: calc(100% / 4 - var(--size-lg));
  }
  #sensors > li {
    width: calc(100% / 3 - var(--size-lg));
  }
}

@media screen and (min-width: 1960px) {
  .list > li {
    width: calc(100% / 5 - var(--size-lg));
  }
  #sensors > li {
    width: calc(100% / 3 - var(--size-lg));
  }
}