@charset "UTF-8";

* {
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: inherit;
}

button {
  all: unset;
}

input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  font-weight: 300;
  padding: 0.2em;
}

textarea {
  resize: none;
}

ul {
  list-style-type: none;
}

html {
  font-family: "Roboto", "Helvetica Neue", "Arial", sans-serif;
  font-size: 16px;
  font-weight: 100;
  color: var(--color-text);
}

[hidden] {
  display: none !important;
}

.span-all {
  grid-column: 1/-1;
}

.span-2 {
  grid-column: span 2;
}

.span-3 {
  grid-column: span 3;
}

.span-4 {
  grid-column: span 4;
}

.span-5 {
  grid-column: span 5;
}

.contents-wrapper {
  display: contents;
}

.only-child:not(:only-child) {
  display: none;
}

.btn {
  --color: white;
  --bg-color: var(--color-rado);
  color: var(--color);
  background-color: var(--bg-color);
  border: 1px solid var(--bg-color);
  padding: 0.2em 0.4em;
  display: inline-block;
  border-radius: 4px;
  cursor: pointer;
}

.btn-primary:hover {
  --bg-color: var(--color-primary);
}

.btn-info:hover {
  --bg-color: var(--color-info);
}

.btn-success:hover {
  --bg-color: var(--color-success);
}

.btn-warning:hover {
  --bg-color: var(--color-warning);
}

.btn-danger:hover {
  --bg-color: var(--color-danger);
}

.btn-dark:hover {
  --bg-color: var(--color-dark);
}

.btn-secondary:hover {
  --bg-color: var(--color-secondary);
}

.btn-light:hover {
  --bg-color: var(--color-light);
}

.input-toggle {
  --btn-width: 40px;
  --btn-height: 20px;
  display: inline-block;
  width: var(--btn-width);
  height: var(--btn-height);
  border: 1px solid grey;
  border-radius: calc(var(--btn-height) / 2);
  position: relative;
  cursor: pointer;
  transition-duration: 0.25s;
}

.input-toggle::before {
  content: "";
  --margin: 2px;
  --radius: calc(var(--btn-height) - 2 * var(--margin));
  display: inline-block;
  width: var(--radius);
  height: var(--radius);
  border-radius: 50%;
  background-color: var(--color-rado);
  position: absolute;
  top: var(--margin);
  left: var(--margin);
  z-index: 1;
  transition-property: left, background-color;
  transition-duration: inherit;
}

[disabled] + .input-toggle::before {
  content: "\E838";
  font-family: "icons";
  color: white;
  font-size: 0.7em;
  display: grid;
  place-content: center;
  -webkit-animation: spin 2s linear infinite;
          animation: spin 2s linear infinite;
}

[disabled][type=checkbox]:checked + .input-toggle::before {
  color: var(--color-success);
}

[type=checkbox]:checked + .input-toggle {
  background-color: var(--color-success);
  border-color: var(--color-success);
}

[type=checkbox]:checked + .input-toggle::before {
  left: calc(100% - var(--radius) - var(--margin));
  background-color: white;
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 0.4em;
  position: sticky;
  bottom: 0;
  z-index: 10;
  padding: 0.7em;
  background-color: white;
}

.pagination > .page {
  display: grid;
  place-content: center;
  border: 1px solid var(--color-rado);
  padding: 0.3em;
  width: 1em;
  height: 1em;
  text-align: center;
  border-radius: 50%;
}

.pagination > .page:not(.page-active, .page-disabled):hover {
  background-color: var(--color-light);
}

.pagination > .page.page-active {
  color: white;
  background-color: var(--color-rado);
}

.pagination > .page.page-active:hover {
  cursor: not-allowed;
}

.pagination > .page.page-disabled {
  color: var(--color-light);
  border-color: var(--color-light);
}

#loading {
  display: grid;
  place-content: center;
  position: fixed;
  inset: 0;
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  z-index: 100;
  background-color: #00000088;
}

#loading > #loading-msg {
  background-color: var(--color-rado);
  padding: 2em;
  display: grid;
  text-align: center;
  border-radius: 6px;
}

#loading > #loading-msg > #loading-hourglass {
  font-size: 3em;
  -webkit-animation: spin 4s infinite;
          animation: spin 4s infinite;
}

#loading > #loading-msg > #text {
  font-size: 1.2em;
  -webkit-animation: blink 4s infinite;
          animation: blink 4s infinite;
}

@-webkit-keyframes blink {
  0% {
    color: white;
  }

  50% {
    color: #fff2;
  }

  100% {
    color: white;
  }
}

@keyframes blink {
  0% {
    color: white;
  }

  50% {
    color: #fff2;
  }

  100% {
    color: white;
  }
}

@-webkit-keyframes spin {
  0% {
    transform: RotateZ(0deg);
  }

  100% {
    transform: RotateZ(360deg);
  }
}

@keyframes spin {
  0% {
    transform: RotateZ(0deg);
  }

  100% {
    transform: RotateZ(360deg);
  }
}

/* script info */

#script-info {
  text-align: center;
  padding: 0.5em 0;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  transition: transform 0.2s, box-shadow 0.2s;
  transform: translate3d(0, -100%, 0);
  box-shadow: 0 0 0 transparent;
}

#script-info.open {
  transform: translate3d(0, 0, 0);
  box-shadow: 0 1px 20px #0009;
}

#script-info.msg-success {
  background-color: var(--color-success);
  color: white;
}

#script-info.msg-info {
  background-color: var(--color-primary);
  color: white;
}

#script-info.msg-warning {
  background-color: var(--color-warning);
  color: var(--color-dark);
}

#script-info.msg-error {
  background-color: var(--color-danger);
  color: white;
}

/* element (news / post) info */

.list-info {
  width: min(calc(100% - 2em), 800px);
  box-sizing: border-box;
  padding: 0.3em;
  margin: 1em auto 0;
  text-align: center;
  border-radius: 4px;
}

.list-info-waring {
  background-color: var(--color-warning);
}

.list-info-light {
  background-color: var(--color-light);
}

.list-info .input-toggle {
  margin-left: 0.2rem;
  vertical-align: middle;
}

#header {
  display: grid;
  grid-template-columns: 1fr repeat(4, auto);
  align-items: center;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  padding: 0 1rem;
  background-color: var(--color-rado);
  color: white;
  position: sticky;
  top: 0;
  z-index: 10;
}

#rado-logo {
  height: 40px;
  margin: 20px 0;
}

html {
  --color-primary: #007bff;
  --color-info: #17a2b8;
  --color-success: #28a745;
  --color-warning: #ffc107;
  --color-danger: #dc3545;
  --color-dark: #343a40;
  --color-secondary: #6c757d;
  --color-light: #cfcfcf;
  --color-lighter: #f1f1f1;
  --color-rado: #1a1a18;
  --color-txt: #1a1a18;
}

@font-face {
  font-family: "icons";
  src: url("/fonts/icons.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

[class^=icon-]:before,
[class*=" icon-"]:before {
  font-family: "icons";
  font-style: normal;
  font-weight: normal;
  speak: never;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  text-align: center;
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-loading::before {
  -webkit-animation: loading 2s linear forwards infinite;
          animation: loading 2s linear forwards infinite;
}

@-webkit-keyframes loading {
  from {
    transform: rotateZ(0deg);
  }

  to {
    transform: rotateZ(360deg);
  }
}

@keyframes loading {
  from {
    transform: rotateZ(0deg);
  }

  to {
    transform: rotateZ(360deg);
  }
}