/* LessClock - https://git.io/JThZd - Apache License 2.0 */
/* Copyright 2020 nodewee https://nodewee.github.io/ */

* {
  margin: 0;
  padding: 0;
  border: none;
}

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

html,
body,
#fullscreen_area {
  width: 100%;
  height: 100%;

  font-size: 1em;
}

#msg {
  width: 100%;
}

/* --- white theme--- */

.white-theme {
  background-color: #fff;
  color: #000;
}

.white-theme button {
  color: #333333;
}
.white-theme #msg {
  background-color: #333333;
  color: white;
}

.white-theme a {
  color: black;
}

.white-theme .infobox {
  background-color: #fff;
  border: 1px solid #999;
  color: black;
}
.white-theme .close {
  background-color: black;
  color: white;
}
.white-theme .gray {
  color: #999;
}

/* --- black theme--- */
.black-theme {
  background-color: #000;
  color: #fff;
}

.black-theme button {
  color: #333333;
}
.black-theme #msg {
  background-color: #333333;
  color: white;
}

.black-theme a {
  color: white;
}
.black-theme .infobox {
  background-color: black;
  border: 1px solid #999;
  color: white;
}
.black-theme .close {
  background-color: white;
  color: black;
}
.black-theme .gray {
  color: #999;
}

/* not-color css */

* {
  margin: 0;
  padding: 0;
  /* border: none; */
}

h1,
h2,
h3,
h4,
h5 {
  padding: 0.4em 0.2em 0.4em 0.2em;
}

p {
  padding: 0.2em;
}

.center {
  text-align: center;
}
.small {
  font-size: small;
}

#msg {
  position: fixed;
  display: none;

  top: 0;
  left: 0;

  padding: 0.2em;
  text-align: center;
}

#cover {
  position: fixed;
  top: 0;
  left: 0;
  width: 0px;
  height: 0px;
  /* visibility: hidden; */
  display: none;

  pointer-events: none;
}

#clock {
  padding: 0;
  margin: 0;

  width: 100%;

  font-family: "DIN Condensed", "IBM 3270", "Rockwell", "OCR A Std",
    "Helvetica Neue", "Helvetica";

  /* pointer-events: none; */
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

#time {
  margin: 0;
  padding: 0;
  padding-right: 0.1em;
  width: 100%;

  font-size: 100%;
  white-space: nowrap;
  display: block;

  overflow: hidden;
}

#ampm {
  margin: 0;
  padding: 0;

  white-space: nowrap;

  display: block;
  width: fit-content;

  float: left;
}

#am,
#pm {
  display: block;
  width: fit-content;

  padding-left: 0.1em;
  padding-right: 0.3em;
}

#hms {
  margin: 0;
  padding: 0;
  padding-left: 0.1em;

  /* text-align: left; */
  white-space: nowrap;
  font-weight: 900;

  display: block;
  width: fit-content;

  float: left;
}

#hour,
#minute,
#second {
  padding: 0;
  margin: 0;
  width: fit-content;
}

#date,
#lunar-date {
  width: 1px;
  display: block;
  width: fit-content;

  margin: auto;
  padding: 0;

  text-align: center;
  white-space: nowrap;

  font-weight: 600;
  font-style: italic;
}
#month,
#day,#lunar-year,#lunar-monthday {
  padding: 0;
  margin: 0;
  width: fit-content;
}
#week {
  margin: 0;
  padding-left: 0.5em;
  width: fit-content;
}

.memo {
  filter: alpha(opacity=90);
  -moz-opacity: 0.9;
  -khtml-opacity: 0.9;
  opacity: 0.9;
}

/* --- More Area --- */

#infobox_cantainer {
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.infobox {
  font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial,
    sans-serif;

  position: relative;
  padding: 0.5em 1em 0.5em 1em;
  margin: 1em;

  -moz-border-radius: 5px;
  border-radius: 5px;
}

hr {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  border: 0;
  height: 1px;
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.75),
    rgba(0, 0, 0, 0)
  );
}

.close {
  position: absolute;
  top: -0.4em;
  right: -0.4em;
  padding-top: 0.4em;
  padding-bottom: 0.4em;
  padding-left: 0.8em;
  padding-right: 0.8em;
  border: none;
  -moz-border-radius: 5px;
  border-radius: 5px;

  font-weight: bold;
}

table {
  margin: auto;
  padding-top: 1em;
  padding-bottom: 1em;
}

#more {
  border-left: 2px dashed #999;
  padding-left: 1em;
}

#btn_more {
  cursor: pointer;
  line-height: 0.33em;
  padding: 0.5em;

  -moz-border-radius: 3px;
  border-radius: 3px;

  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;

  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

#buttons {
  display: block;
  width: 100%;

  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

#buttons div {
  float: left;
}
button,
.button {
  float: left;
  margin: 0.2em;
  padding: 0.5em;

  font-size: 1em;
  border: 1px solid #333333;
}

select {
  background-color: #eeeeee;
}

#time_offset {
  width: 3em;
}

#copyright {
  padding-top: 1em;
  padding-bottom: 1em;

  pointer-events: none;
  /* -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none; */
}

#copyright p {
  margin: 0;
  padding: 0;
  font-size: small;
}

#copyright a {
  pointer-events: all;
}

.clear-fix {
  clear: both;
}