@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@800&display=swap");
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

* {
  box-sizing: border-box;
}

a {
  color: rgba(0, 0, 0, 0.7);
  text-decoration: none;
}
a:active, a:focus, a:hover {
  color: black;
  text-decoration: underline;
}
a:visited {
  color: rgba(0, 0, 0, 0.7);
}

textarea {
  resize: none;
  width: 100%;
  line-height: 1.5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.svg {
  display: inline-block;
  line-height: 0;
  vertical-align: text-top;
}
.svg svg {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.reset-ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.flex-land {
  display: flex;
  align-items: center;
}
.flex-land .flex-l {
  margin-left: 0;
  margin-right: auto;
}
.flex-land .flex-r {
  margin-left: auto;
  margin-right: 0;
}

.overflow-x {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
}
.overflow-x::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}
.overflow-x::-webkit-scrollbar-thumb {
  background: transparent;
}

.tabs {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-bottom: 1em;
}
.tabs li {
  display: inline-block;
}
.tabs li a {
  display: block;
  font-size: 1rem;
  background-color: #f4f4f4;
  padding: 0.5em 1em;
  border-radius: 0.25em;
  color: #666;
  cursor: pointer;
  border: 1px solid #eee;
}
.tabs li.active {
  color: #fff;
}
.tabs li.active a {
  color: inherit;
  background-color: #009eb3;
  border-color: transparent;
}

.user-info {
  border: 1px solid #ddd;
  border-radius: 0.25em;
  padding: 1em;
}
.user-info h2 {
  color: #009eb3;
  font-size: 0.875rem;
  margin: 0;
  border-top: 1px solid #eee;
  padding: 2em 0 1em 0;
}
.user-info h2:first-child {
  border: none;
  padding-top: 0;
}
.user-info .hr {
  border-top: 1px solid #eee;
  padding: 0.5em;
}

.entity {
  display: inline-block;
  font-weight: bold;
  text-align: left;
  font-size: 0.75rem;
  margin-bottom: 0.5em;
  margin-right: 1.5em;
  vertical-align: top;
}
.entity span, .entity a {
  font-size: 0.875rem;
  font-weight: normal;
  display: block;
  padding: 0.5em 0 1em 0;
}
.entity a {
  color: #009eb3;
}
.entity select, .entity input, .entity textarea {
  display: block;
  margin-top: 0.5em;
  font-size: 0.875rem;
}
.entity textarea {
  width: 100%;
}
.entity.text {
  display: block;
}
.entity.text span {
  background-color: #eee;
  border-radius: 0.25em;
  padding: 0.5em;
  margin-top: 0.25em;
  margin-bottom: 1em;
}
.entity.alone {
  margin-top: 0.5em;
}
.entity.alone input {
  width: 100%;
}
.entity.alone + h2 {
  border-top-color: transparent;
}
.entity .profile th, .entity .profile td {
  font-weight: normal;
  padding: 0.5em 1em 0.5em 0;
}
.entity .profile th label, .entity .profile td label {
  vertical-align: bottom;
}
.entity .profile th input, .entity .profile td input {
  margin: 0;
}
.entity .profile th .img, .entity .profile td .img {
  width: 6em;
  background-color: #eee;
  height: 8em;
  border: 1px solid transparent;
  cursor: pointer;
}
.entity .profile th .img:hover, .entity .profile td .img:hover {
  border-color: #009eb3;
}

.auth {
  margin-bottom: 1em;
}
.auth th, .auth td {
  font-weight: normal;
  padding: 0.25em 1em;
  text-align: center;
}
.auth th a, .auth td a {
  color: #009eb3;
}
.auth thead th {
  font-size: 0.75rem;
  font-weight: bold;
  padding: 0.5em 1em;
  background-color: #eee;
}

.inline-form {
  margin-bottom: 1em !important;
}
.inline-form .btn {
  display: inline-block;
}
.inline-form span {
  display: inline-block;
  font-weight: bold;
  margin-left: 1em;
  margin-right: 0.5em;
}
.inline-form span:first-child {
  margin-left: 0;
}

.inline-form-reverse {
  margin-top: 1em !important;
}

.btn-back {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 0.5em;
}

.auth-memo {
  border-color: transparent !important;
  width: 100%;
}
.auth-memo:focus {
  border-color: #009eb3 !important;
}

.banned-edit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1024px;
  padding: 1em 0;
  font-size: 1rem;
}
.banned-edit label {
  margin-right: 1em;
}
.banned-edit button {
  display: inline-block;
}

.msg-history {
  border: 1px solid #ddd;
  padding: 1em;
  margin-top: 1em;
  overflow-y: scroll;
  max-width: 1024px;
  max-height: 30rem;
}
.msg-history .msg {
  display: flex;
  align-items: center;
  margin-bottom: 0.25em;
  border-bottom: 1px dashed #ddd;
  padding-bottom: 0.25em;
}
.msg-history .msg span {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 1em;
}
.msg-history .msg span.txt {
  max-width: 70%;
  line-height: 1.4;
}
.msg-history .msg span.time {
  font-size: 0.75rem;
  white-space: nowrap;
  margin-left: 1rem;
}
.msg-history .msg.received {
  justify-content: space-between;
}
.msg-history .msg.received .txt {
  background-color: rgba(0, 204, 102, 0.5);
}
.msg-history .msg.received .time {
  color: #00b359;
}
.msg-history .msg.sent {
  justify-content: end;
}
.msg-history .msg.sent .txt {
  background-color: #eee;
}
.msg-history .msg.sent .time {
  color: #888;
}

.ui-container {
  width: auto;
  min-width: 480px;
  max-width: 100%;
  margin: 0 auto;
  padding: 1rem;
}

#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #009eb3;
  color: #fff;
  height: 3.5rem;
}
#header .logo {
  font-weight: bold;
  padding: 1em;
}
#header .user {
  margin-left: auto;
  margin-right: 0;
}
#header .user a {
  color: #fff;
  display: inline-block;
  padding: 1em;
  border-radius: 0.25em;
}
#header .user a span {
  display: inline-block;
  vertical-align: middle;
}
#header .user a:hover, #header .user a:active {
  color: #fff;
  background-color: #008899;
}
#header .user a:first-child {
  font-weight: bold;
}

#nav {
  width: 12rem;
  background-color: #f6f6f6;
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  padding: 1em;
  padding-top: 2em;
  position: absolute;
  top: 3.5rem;
  left: 0;
  bottom: 0;
}
#nav .collapse-list {
  font-size: 1em;
}
#nav .collapse-list .collapse-item {
  margin-top: 1em;
}
#nav .collapse-list .collapse-item .collapse-header {
  font-weight: bold;
}
#nav .collapse-list .collapse-item .collapse-contents {
  list-style: none;
  margin: 0;
  padding: 0;
}
#nav .collapse-list .collapse-item .collapse-contents li a {
  display: block;
  border: 1px solid transparent;
  border-radius: 0.25em;
  padding: 0.375em 0.75em;
  text-decoration: none;
}
#nav .collapse-list .collapse-item .collapse-contents li a:hover, #nav .collapse-list .collapse-item .collapse-contents li a:active {
  background-color: #fff;
  border-color: #eee;
  text-decoration: none;
}

#main {
  padding-left: 12em;
}
#main #contents {
  font-size: 0.875em;
  padding: 1em;
}
#main #contents h1 a {
  color: #000;
}
#main #contents h1 span {
  font-weight: normal;
}

#login {
  display: flex;
  height: 100%;
}
#login .login-container {
  width: 25em;
  margin: auto;
  text-align: center;
}
#login .login-container h1 {
  color: #009eb3;
  margin-top: 0;
  margin-bottom: 3rem;
}
#login .login-container .form, #login .login-container .btn {
  display: block;
  width: 100%;
  margin-top: 0.5em;
}
#login .login-container .form {
  margin-bottom: 0.25em;
}
#login .login-container .form.has-error {
  border-color: #009eb3;
}
#login .login-container .error {
  display: none;
}
#login .login-container .has-error + .error {
  display: block;
  font-size: 0.75em;
  text-align: left;
  padding: 0.125em;
  color: #009eb3;
}
#login .login-container span {
  display: block;
  margin-top: 2rem;
  font-size: 0.75em;
  color: #888;
}
#login input[type=checkbox] {
  margin-bottom: 1em;
  margin-top: 1em;
  vertical-align: middle;
}
#login input[type=checkbox] + label {
  font-size: 0.875em;
  cursor: pointer;
  color: #888;
}

.cards {
  display: flex;
  align-items: center;
}
.cards .card {
  background-color: #f4f4f4;
  padding: 3rem;
  border-radius: 1rem;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  font-weight: bold;
  text-align: center;
}
.cards .card .title {
  margin-bottom: 1em;
}
.cards .card.large {
  padding: 3rem;
}
.cards .card.large .value {
  font-size: 3em;
}
.cards .card.small {
  padding: 2rem 3rem;
}
.cards .card.small .value {
  font-size: 2em;
}
.cards .card.small .sub {
  font-size: 0.875em;
  font-weight: normal;
  margin-top: 0.5em;
}
.cards .card.small .sub.up {
  color: #00cc66;
}
.cards .card.small .sub.down {
  color: #ff0033;
}

.comp-collapse .collapse-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.comp-collapse .collapse-list .collapse-item .collapse-header, .comp-collapse .collapse-list .collapse-item .collapse-body {
  margin: 0;
  padding: 0;
}
.comp-collapse .collapse-list .collapse-item .collapse-body {
  height: 0;
  overflow: hidden;
  transition: height 0.2s;
}
.comp-collapse .collapse-list .collapse-item.show-contents .collapse-body {
  height: auto;
}

select {
  background-image: url("../images/chevron-down.svg");
  background-position: center right 0.25em;
  background-repeat: no-repeat;
  background-size: 0.875em;
  padding-right: 1.5em !important;
}

input[type=date] {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.form, .btn {
  border: 1px solid transparent;
  border-radius: 0.25em;
  box-sizing: border-box;
  min-height: 2.5em;
  padding: 0.5em;
  padding-left: 0.6875em;
  padding-right: 0.6875em;
  transition: all 0.2s;
}

.form {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  border-color: rgba(0, 0, 0, 0.1);
  font-size: 1em;
}
.form:focus {
  outline: none;
  border: 1px solid #009eb3;
}
.form:focus + .form {
  border-left-color: #009eb3;
}
.form[type=checkbox], .form[type=radio] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  appearance: checkbox;
  margin: 0.75em 0.25em;
  min-height: auto;
}
.form[type=checkbox] + label, .form[type=radio] + label {
  margin-right: 1em;
}
.form.error {
  border-color: #009eb3;
  background-color: rgba(0, 158, 179, 0.1);
}
.form.error:focus {
  background-color: transparent;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #009eb3;
  color: #fff;
  cursor: pointer;
  line-height: 1;
  text-decoration: none;
}
.btn:hover {
  background-color: #005a66;
}
.btn.btn-icon {
  width: 2.5em;
  height: 2.5em;
}
.btn.btn-icon svg {
  width: 1.25em;
  height: 1.25em;
  stroke-width: 2;
}
.btn.btn-deactive {
  background-color: #eee !important;
  color: #ccc !important;
  cursor: default;
}
.btn.btn-deactive:hover {
  background-color: #eee;
  color: #ccc;
}
.btn.btn-sub {
  background-color: #acacac;
  color: #fff;
}
.btn.btn-sub:hover {
  background-color: #868686;
}
.btn.btn-text {
  background-color: transparent;
  color: #009eb3;
}
.btn.btn-text:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: #008899;
}
.btn.btn-text.btn-deactive {
  background-color: transparent !important;
  color: #ccc;
  box-shadow: none;
}
.btn.btn-text.btn-sub {
  color: #777;
}
.btn.btn-text.btn-sub:hover {
  color: #000;
}
.btn.btn-outlined {
  background-color: transparent;
  border-color: #009eb3;
  color: #009eb3;
}
.btn.btn-outlined:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: #008899;
}
.btn.btn-outlined.btn-deactive {
  background-color: transparent !important;
  color: #ccc;
  box-shadow: none;
}
.btn.btn-outlined.btn-sub {
  color: #777;
}
.btn.btn-outlined.btn-sub:hover {
  color: #000;
}
.btn.btn-round {
  border-radius: 1.25em;
}
.btn .svg svg {
  stroke-width: 2.5;
}
.btn .svg + span {
  margin-left: 0.5em;
}

.compact-forms .btn,
.compact-forms .form,
.btn-compact,
.form-compact {
  min-height: 2em;
  height: auto;
  padding: 0.25em;
  padding-left: 0.4375em;
  padding-right: 0.4375em;
}

.large-forms .btn,
.btn-large {
  font-size: 1.25rem;
}

.small-forms .btn,
.btn-small {
  font-size: 0.875rem;
}

.smaller-forms .btn,
.btn-smaller {
  font-size: 0.75rem;
}

.smallest-forms .btn,
.btn-smallest {
  font-size: 0.625rem;
}

.form-wrapper {
  display: flex;
  align-items: center;
}
.form-wrapper .form-container {
  margin-left: 0.25em;
  margin-top: 0.125em;
  margin-bottom: 0.125em;
}
.form-wrapper .form-container:first-child {
  margin-left: 0 !important;
}
.form-wrapper .form-container.grouped::after {
  display: block;
  content: "";
  clear: both;
}
.form-wrapper .form-container.grouped .btn, .form-wrapper .form-container.grouped .form {
  float: left;
  border-radius: 0;
}
.form-wrapper .form-container.grouped .btn:first-child, .form-wrapper .form-container.grouped .form:first-child {
  border-top-left-radius: 0.25em;
  border-bottom-left-radius: 0.25em;
}
.form-wrapper .form-container.grouped .btn:last-child, .form-wrapper .form-container.grouped .form:last-child {
  border-top-right-radius: 0.25em;
  border-bottom-right-radius: 0.25em;
}
.form-wrapper .form-container.grouped .btn + .btn {
  margin-left: 1px;
}
.form-wrapper .form-container.grouped .form {
  border-right: none;
}
.form-wrapper .form-container.grouped .form:last-child {
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.form-wrapper .form-container.grouped .form:last-child:focus {
  border-right-color: #009eb3;
}
.form-wrapper .form-container.inline button {
  display: inline-block;
}
.form-wrapper .btn-spacing {
  flex: 1 1 auto;
}
.form-wrapper.inline-flex {
  display: inline-flex;
}
.form-wrapper.evenly {
  width: 100%;
}
.form-wrapper.evenly .form-container {
  flex: 1 1 0;
}
.form-wrapper.evenly .form-container.custom-width {
  flex: 0 1 auto;
}
.form-wrapper.rounded .btn, .form-wrapper.rounded .form {
  border-radius: 1.25em;
}
.form-wrapper.rounded .grouped .btn:first-child, .form-wrapper.rounded .grouped .form:first-child {
  border-top-left-radius: 1.25em;
  border-bottom-left-radius: 1.25em;
  padding-left: 1.125em;
}
.form-wrapper.rounded .grouped .btn:last-child, .form-wrapper.rounded .grouped .form:last-child {
  border-top-right-radius: 1.25em;
  border-bottom-right-radius: 1.25em;
  padding-right: 1.125em;
}
.form-wrapper.grouped .form-container {
  margin-left: 1px;
}
.form-wrapper.grouped .form-container .btn, .form-wrapper.grouped .form-container .form {
  border-radius: 0;
}
.form-wrapper.grouped .form-container:first-child .btn, .form-wrapper.grouped .form-container:first-child .form {
  border-top-left-radius: 0.25em;
  border-bottom-left-radius: 0.25em;
}
.form-wrapper.grouped .form-container:last-child .btn, .form-wrapper.grouped .form-container:last-child .form {
  border-top-right-radius: 0.25em;
  border-bottom-right-radius: 0.25em;
}

.loading-container {
  font-size: inherit;
  width: 1em;
  height: 1em;
  display: inline-block;
  overflow: hidden;
  background-color: transparent;
  vertical-align: middle;
}
.loading-container span {
  display: block;
}
.loading-container.color-custom {
  color: red;
}
.loading-container.color-custom .spinner-object {
  border-color: inherit !important;
  border-top-color: transparent !important;
}
.loading-container.color-inherit {
  color: inherit;
}
.loading-container.color-inherit .spinner-object {
  border-color: inherit !important;
  border-top-color: transparent !important;
}

.loading-spinner {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(1);
  backface-visibility: hidden;
  transform-origin: 0 0;
}

.spinner-object {
  position: absolute;
  width: 0.5em;
  height: 0.5em;
  border: 0.125em solid rgba(0, 0, 0, 0.5);
  border-top-color: transparent !important;
  border-radius: 50%;
  animation: spinning 1s linear infinite;
  top: 0.5em;
  left: 0.5em;
  box-sizing: content-box;
}

@keyframes spinning {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.comp-modal {
  display: none;
}
.comp-modal.show-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  animation: modalFadeIn 0.2s ease-out forwards;
  opacity: 0;
  padding-top: 2em;
}
.comp-modal .modal-wrapper {
  min-width: 290px;
  max-width: 100vw;
  max-height: 100vh;
}
.comp-modal .modal-wrapper .modal-container {
  box-shadow: 0 0.25em 0.5em 0px rgba(0, 0, 0, 0.3);
  background-color: rgb(255, 255, 255);
  border-radius: 1em;
  margin: 0.5em;
  margin-bottom: 1em;
}
.comp-modal .modal-wrapper .modal-container .modal-header, .comp-modal .modal-wrapper .modal-container .modal-footer {
  padding: 0.5em;
}
.comp-modal .modal-wrapper .modal-container .modal-header {
  border-bottom: 1px solid #eeeeee;
  display: flex;
  align-items: center;
  line-height: 1;
}
.comp-modal .modal-wrapper .modal-container .modal-header .title {
  flex: 1 1 auto;
  font-weight: bold;
  padding: 0.5em;
  padding-right: 0;
}
.comp-modal .modal-wrapper .modal-container .modal-header .btn-close {
  padding: 0.5em;
}
.comp-modal .modal-wrapper .modal-container .modal-body {
  padding: 1em;
  overflow-x: hidden;
}
.comp-modal .modal-wrapper .modal-container .modal-footer {
  border-top: 1px solid #eeeeee;
  line-height: 0;
}
.comp-modal .modal-wrapper .modal-container .modal-footer .form-container {
  margin: 0;
}
.comp-modal .modal-wrapper .modal-container .modal-footer .btn {
  border-radius: 0.5em;
}

@keyframes modalFadeIn {
  100% {
    opacity: 1;
    padding-top: 0;
  }
}
#modal-scr .modal-wrapper {
  width: 100%;
  height: 100% !important;
  margin: 0;
  padding: 1em;
}
#modal-scr .modal-wrapper .modal-container {
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}
#modal-scr .modal-wrapper .modal-container .modal-body {
  flex: 1 1 auto;
}
#modal-scr .img {
  width: 100%;
  height: 100%;
  background-color: #f4f4f4;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

#modal-list .modal-wrapper {
  padding: 1em !important;
  padding-right: 0 !important;
  overflow-y: scroll;
}
#modal-list .modal-wrapper::-webkit-scrollbar {
  width: 6px;
  padding: 2em 0;
}
#modal-list .modal-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 3px;
}
#modal-list .modal-wrapper::-webkit-scrollbar-track {
  background-color: transparent;
}
#modal-list .qr-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
#modal-list .qr-list li {
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 20em;
  padding: 0.5em 0;
}
#modal-list .qr-list li span {
  display: block;
}
#modal-list .qr-list li span.time {
  color: #888;
  margin-left: 2em;
}
#modal-list .qr-list li span.img {
  width: 4em;
  height: 4em;
  background-color: #eee;
  border-radius: 0.5em;
}
#modal-list .qr-list li:last-child {
  border: none;
}

table tr th, table tr td {
  min-width: 3em;
}
table tr th.text-left, table tr td.text-left {
  text-align: left;
}

.default-table {
  width: 100%;
  border-spacing: 0;
}
.default-table th, .default-table td {
  padding: 0.5em;
  text-align: center;
}
.default-table th a, .default-table td a {
  color: #009eb3;
}
.default-table th span.blue, .default-table td span.blue {
  color: #0066ff;
}
.default-table th span.grey, .default-table td span.grey {
  color: #888;
}
.default-table th.for-profile, .default-table td.for-profile {
  padding: 0.25em;
}
.default-table th.for-profile .img, .default-table td.for-profile .img {
  margin: 0 auto;
  width: 3em;
  height: 3em;
  border-radius: 0.5em;
  background-color: #eee;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.default-table th.for-qr, .default-table td.for-qr {
  font-weight: bold;
}
.default-table th.for-qr span, .default-table td.for-qr span {
  display: inline-block;
  background-color: #009eb3;
  padding: 0.25em 0.5em;
  border-radius: 0.375em;
  color: #fff;
  margin-left: 0.5em;
  font-size: 0.75rem;
  font-weight: normal;
}
.default-table thead tr th {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #ddd;
}
.default-table tbody tr td {
  border-bottom: 1px solid #eee;
}
.default-table tbody tr.status-custom .for-qr span {
  background-color: #ffcc00;
  color: #000;
}
.default-table tbody tr.status-deleted .for-qr {
  text-decoration: line-through;
}
.default-table tbody tr.status-deleted .for-qr span {
  background-color: #888;
}
.default-table tbody tr.status-inactive .for-qr span {
  background-color: #ff6600;
}
.default-table tbody tr.status-inactive td {
  border-bottom: 0;
}
.default-table tbody tr.inactive-desc td {
  padding-top: 0;
}
.default-table tbody tr.inactive-desc .desc {
  font-size: 0.75rem;
  text-align: left;
  background-color: rgba(255, 102, 0, 0.1);
  padding: 0.5em 1em;
  border-radius: 0.5em;
  color: rgba(0, 0, 0, 0.7);
  line-height: 1.4;
}
.default-table tbody tr.inactive-desc .desc span {
  font-weight: bold;
  color: #000;
}

.pre-table {
  margin-bottom: 0.5em;
  font-size: 0.875em;
}

.sur-table {
  display: flex;
  justify-content: space-between;
  margin-top: 1em;
}
.sur-table .paging {
  list-style: none;
  margin: 0 auto;
  padding: 0;
}
.sur-table .paging li {
  display: inline-block;
  padding: 0.5em;
  cursor: pointer;
  color: #666;
}
.sur-table .paging li.active {
  font-weight: bold;
  color: #000 !important;
}
.sur-table .paging li:hover, .sur-table .paging li:active {
  color: #000;
  text-decoration: underline;
}

.info-table {
  border-spacing: 0;
  border-collapse: collapse;
  margin-bottom: 1em;
}
.info-table th, .info-table td {
  border-bottom: 1px solid #eee;
  text-align: left;
  border: 1px solid #ddd;
  padding: 0.5em 1em;
}
.info-table th {
  background-color: #f9f9f9;
}

.acc-table th, .acc-table td {
  text-align: left;
  padding: 0 0.5em;
  height: 3em;
}
.acc-table th {
  font-size: 0.875em;
  font-weight: normal;
}
.acc-table td {
  min-width: 15em;
}
.acc-table td input[type=email],
.acc-table td input[type=text],
.acc-table td input[type=password],
.acc-table td select {
  width: 100%;
}

.code-table {
  font-size: 0.875em;
}
.code-table th, .code-table td {
  text-align: left;
  padding: 0 0.5em;
}
.code-table th {
  font-weight: normal;
}
.code-table td {
  min-width: 20em;
}

.search-table {
  border-spacing: 0;
  border-collapse: collapse;
  margin-bottom: 1em;
  width: 100%;
}
.search-table th, .search-table td {
  text-align: left;
  vertical-align: middle;
}
.search-table th {
  padding-right: 1em;
}

.user-table {
  width: 100%;
  max-width: 50em;
}
.user-table th {
  width: 9em;
}
.user-table tr th, .user-table tr td {
  text-align: left;
  border-bottom: 1px solid #eee;
  padding: 0.5em;
}
.user-table tr:last-child th, .user-table tr:last-child td {
  border: none;
}
.user-table a {
  color: #009eb3;
}
.user-table textarea {
  width: 100%;
  line-height: 1.5;
  font-size: 1em;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.user-table .profile-img {
  width: 5em;
  height: 5em;
  border-radius: 1em;
  background-color: #eee;
  display: inline-block;
  vertical-align: middle;
}
.user-table .show-history {
  display: inline-block;
  padding: 0.5em 0.75em;
  color: #000;
  background-color: #ffcc00;
  border-radius: 0.5em;
  font-size: 0.75em;
  margin-left: 1em;
}

.board-table {
  width: 100%;
  max-width: 960px;
  border-collapse: collapse;
  margin-bottom: 1em;
}
.board-table th, .board-table td {
  border: 1px solid #ddd;
  padding: 0.5em 1em;
  text-align: left;
  vertical-align: middle;
  height: 3em;
}
.board-table th {
  background-color: #f4f4f4;
}
.board-table td input[type=text] {
  width: 100%;
}
.board-table .textarea {
  padding: 2em;
}
.board-table .textarea h1 {
  margin-bottom: 0.5rem;
}
.board-table .textarea span {
  display: block;
  font-size: 0.875rem;
  color: #888;
  margin-bottom: 2em;
}
.board-table .attached {
  font-size: 0.75rem;
  display: inline-block;
  color: rgba(0, 0, 0, 0.7);
  background-color: rgba(255, 204, 0, 0.2);
  padding: 0.25em 0.5em;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 0.25em;
}
.board-table .editor-area {
  padding: 0;
  height: auto;
}

.board-write-table {
  width: 100%;
  max-width: 960px;
  border-collapse: collapse;
  margin-bottom: 1em;
}
.board-write-table th, .board-write-table td {
  border: 1px solid #eee;
  padding: 0.5em;
  text-align: left;
  vertical-align: middle;
  height: 3em;
}
.board-write-table th {
  background-color: #f4f4f4;
  padding: 0.25em 1em;
  text-align: center;
}
.board-write-table td input[type=text], .board-write-table td select {
  width: 100%;
}
.board-write-table .textarea {
  padding: 2em;
}
.board-write-table .textarea h1 {
  margin-bottom: 0.5rem;
}
.board-write-table .textarea span {
  display: block;
  font-size: 0.875rem;
  color: #888;
  margin-bottom: 2em;
}
.board-write-table .attached {
  font-size: 0.75rem;
  display: inline-block;
  color: rgba(0, 0, 0, 0.7);
  background-color: rgba(255, 204, 0, 0.2);
  padding: 0.25em 0.5em;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 0.25em;
}
.board-write-table .editor-area {
  padding: 0;
  height: auto;
}

.banned-table {
  width: 100%;
  max-width: 1024px;
  border-collapse: collapse;
}
.banned-table th, .banned-table td {
  padding: 0.5em 1em;
  text-align: left;
  border: 1px solid #ddd;
}
.banned-table th {
  background-color: #f4f4f4;
}
.banned-table .block {
  display: block;
  margin: 0.5em 1em 1.25em 0;
  padding-right: 1em;
}
.banned-table .block:last-child {
  margin-right: 0;
  margin-bottom: 0;
  padding-right: 0;
  border: none;
}
.banned-table .block span {
  display: block;
  font-size: 0.75rem;
  font-weight: bold;
  margin-bottom: 0.25em;
  color: #009eb3;
}
.banned-table .block div {
  margin-bottom: 0.25em;
}
.banned-table .img {
  width: 100%;
  height: 22.75rem;
  margin: 0.25em 0;
  background-color: #f4f4f4;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.collapse-title {
  display: inline-block;
  padding: 0.5em;
  margin-top: 0.5em;
  color: #000;
  font-weight: bold;
}

.sub-row {
  font-size: 0.875em;
}
.sub-row td {
  padding-bottom: 0.5rem;
  background-color: rgba(128, 0, 128, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.1) !important;
  color: #800080;
}

.push-table {
  width: 100%;
}
.push-table th, .push-table td {
  text-align: left;
  border-bottom: 1px solid #eee;
}
.push-table td {
  padding: 0.5em 0;
}
.push-table td input[type=text], .push-table td textarea {
  width: 100%;
  max-width: 640px;
}
.push-table + .sur-table {
  justify-content: flex-start;
}
.push-table + .sur-table .btn {
  margin-right: 1em;
}

#modal-logout .modal-body {
  text-align: center;
}

#modal-acc-edit .modal-header {
  padding: 1.5em;
  font-weight: bold;
  line-height: 1;
}
#modal-acc-edit .modal-body table {
  min-width: 400px;
}
#modal-acc-edit .modal-body table th, #modal-acc-edit .modal-body table td {
  text-align: left;
  font-weight: normal;
  padding: 0.25em;
  height: 48px;
}

#modal-acc .modal-wrapper {
  width: 100%;
}
#modal-acc .title {
  text-align: center;
  padding: 1em;
}
#modal-acc h5 {
  margin: 0;
  padding: 0.5rem;
  color: #009eb3;
}
#modal-acc .acc-grade h5 {
  margin-top: 1.5em;
}
#modal-acc .acc-table th {
  font-weight: bold;
}
#modal-acc .acc-table span {
  display: inline-block;
  font-size: 0.875em;
  font-weight: bold;
  margin-left: 2em;
  margin-right: 0.5em;
}
#modal-acc .acc-table span:first-child {
  margin-left: 0;
}

#modal-img .modal-container {
  border-radius: 0;
}
#modal-img .modal-body {
  padding: 0.5em;
  padding-bottom: 0;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
}
#modal-img .modal-body::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}
#modal-img .modal-body::-webkit-scrollbar-thumb {
  background: transparent;
}
#modal-img .modal-footer {
  border: none;
}
#modal-img #img-container {
  background-color: #ddd;
  line-height: 0;
}
#modal-img #img-container img {
  width: auto;
  height: auto;
}

.history-list {
  min-width: 25em;
}
.history-list ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.history-list ul li {
  border-bottom: 1px solid #eee;
  padding: 0.25em 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875em;
  color: #888;
}
.history-list ul li:last-child {
  border: none;
}
.history-list ul li span {
  display: block;
  padding: 0.5rem 0;
  font-size: 1rem;
  font-weight: bold;
  color: #000;
}
.history-list ul li .profile-img {
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
  background-color: #eee;
}

.qr-suspend {
  min-width: 25em;
}
.qr-suspend .qr {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding-bottom: 0.5em;
  margin-bottom: 1em;
}
.qr-suspend .qr .custom-img {
  width: 3em;
  height: 3em;
  border-radius: 0.5em;
  background-color: #eee;
}
.qr-suspend .qr .qr-name {
  font-weight: bold;
  margin-left: 1em;
}
.qr-suspend .desc span {
  font-size: 0.75em;
  font-weight: bold;
  display: block;
  margin-bottom: 0.5em;
  padding-left: 0.5em;
}
.qr-suspend .desc textarea {
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  line-height: 1.5;
  padding: 0.5em;
}/*# sourceMappingURL=style.css.map */