#main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#popup-section {
  position: fixed;
  bottom: 10px;
  right: 150px;
  display: flex;
  justify-content: flex-end;
  z-index: 1;
}
#popup-section > div {
  width: 200px;
  position: relative;
  background-color: #8595a1;
  padding: 20px;
  margin: 0 0 0 10px;
  height: 70px;
  border-radius: 10px;
}
#popup-section > div p {
  color: white;
  margin-top: 10px;
}
#popup-section > div .cross {
  position: absolute;
  height: 20px;
  width: 20px;
  top: 0;
  right: 0;
  padding: 10px;
  text-align: center;
  cursor: pointer;
}
#popup-section > div .cross:hover i {
  color: white;
}

.radio {
  display: flex;
  margin: 10px 0;
}
.radio p {
  padding: 10px;
  background-color: #EBEBEB;
  color: black;
  cursor: pointer;
}
.radio p:hover {
  background-color: #8595a1;
  color: white;
}
.radio p.selected {
  background-color: #854c30;
  color: white;
}
.radio::before, .radio::after {
  content: "";
  width: 20px;
  height: 39px;
  background-color: #EBEBEB;
}
.radio::before {
  border-radius: 10px 0 0 10px;
}
.radio::after {
  border-radius: 0 10px 10px 0;
}

.hidden {
  display: none;
}

h1, h2, h3, h4, h5, h6, p, a, li, th, td, label, input {
  font-family: "ubuntu-r";
}

p {
  margin: 0;
}

@font-face {
  font-family: "ubuntu-b";
  src: url("../font/Ubuntu-B.ttf") format("truetype");
}
@font-face {
  font-family: "ubuntu-bi";
  src: url("../font/Ubuntu-BI.ttf") format("truetype");
}
@font-face {
  font-family: "ubuntu-c";
  src: url("../font/Ubuntu-C.ttf") format("truetype");
}
@font-face {
  font-family: "ubuntu-l";
  src: url("../font/Ubuntu-L.ttf") format("truetype");
}
@font-face {
  font-family: "ubuntu-li";
  src: url("../font/Ubuntu-LI.ttf") format("truetype");
}
@font-face {
  font-family: "ubuntu-m";
  src: url("../font/Ubuntu-M.ttf") format("truetype");
}
@font-face {
  font-family: "ubuntu-mi";
  src: url("../font/Ubuntu-MI.ttf") format("truetype");
}
@font-face {
  font-family: "ubuntu-r";
  src: url("../font/Ubuntu-R.ttf") format("truetype");
}
@font-face {
  font-family: "ubuntu-ri";
  src: url("../font/Ubuntu-RI.ttf") format("truetype");
}
body {
  margin: 0;
}
@media (max-width: 768px) {
  body .date {
    display: none;
  }
}

.load {
  cursor: wait;
}

#main.tip-sheet {
  margin-right: 10px;
}

header {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
header h1 {
  margin: 10px;
}
header nav {
  display: flex;
  align-items: center;
}
header nav input {
  margin: 10px;
  width: 50px;
  height: 30px;
  font-size: 20px;
  text-align: center;
}
header nav section {
  display: flex;
}

.btn {
  padding: 10px;
  border-radius: 30px;
  margin: 10px;
  cursor: pointer;
  color: white;
}
.btn.grey {
  background-color: #4e4a4e;
}
.btn.grey:hover {
  background-color: #757161;
}
.btn.reveal {
  background-color: #6daa2c;
}
.btn.reveal:hover {
  background-color: #346524;
}
.btn.validate {
  background-color: #6daa2c;
}
.btn.disable {
  background-color: #d04648;
}
.btn.blue {
  background-color: #597dce;
}
.btn.blue:hover {
  background-color: #30346d;
}

#info {
  margin: 10px;
  color: #30346d;
  cursor: pointer;
}
#info:hover {
  color: #597dce;
}

.danger {
  margin: 10px;
  color: #d04648;
  cursor: pointer;
}
.danger:hover {
  color: #442434;
}

#card {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px;
}
#card .reveal, #card .name {
  font-size: 20px;
}
#card .name {
  background-color: #597dce;
  order: 3;
  cursor: auto;
}
#card section {
  display: flex;
}
#card img {
  border-radius: 20px;
}

.tip {
  margin-top: 10px;
  max-width: 700px;
}
.tip li {
  font-size: 20px;
  margin-bottom: 5px;
}

span {
  font-weight: bold;
}

#series {
  margin: 20px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
#series .bullet {
  width: 20px;
  height: 20px;
  margin: 10px;
  border-radius: 90px;
  cursor: help;
}
#series .bullet.unread {
  background-color: #4e4a4e;
}
#series .bullet.current {
  width: 10px;
  height: 10px;
  border: #4e4a4e 5px solid;
}
#series .bullet.win {
  background-color: #346524;
}
#series .bullet.lose {
  background-color: #d04648;
}
#series .bullet.retry {
  width: 10px;
  height: 10px;
  background-color: #4e4a4e;
  border: #d04648 5px solid;
}
#series .bullet.again {
  width: 10px;
  height: 10px;
  background-color: #d04648;
  border: #442434 5px solid;
}
#series .bullet.back {
  width: 10px;
  height: 10px;
  background-color: #d04648;
  border: #346524 5px solid;
}

.message {
  margin-bottom: 30px;
}

.message-none {
  margin-top: 40px;
}

#data {
  margin-top: 40px;
  border-collapse: collapse;
}
#data th {
  padding: 30px;
}
#data td {
  border-right: #4e4a4e 1px solid;
  padding: 20px;
  text-align: center;
}
#data td.action {
  border-right: none;
  display: flex;
}
#data td .action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #d04648;
  color: white;
  cursor: pointer;
  margin: 5px;
  width: 30px;
  height: 30px;
  border-radius: 90px;
}
#data td .action-btn.redo {
  background-color: #30346d;
}
#data td .action-btn.redo:hover {
  background-color: #597dce;
}
#data td .action-btn.sync {
  background-color: #d04648;
}
#data td .action-btn.sync:hover {
  background-color: #442434;
}

/*# sourceMappingURL=main.css.map */