:root {
  --color-0: black;
  --color-1: darkgray;
  --color-2: lightgray;
  --color-3: whitesmoke;
  --color-4: white;

  --color-black: black;
  --color-white: white;

  --color-danger: red;
  --color-success: green;
}

.is-color-0 {
  color: var(--color-0);
}
.is-color-1 {
  color: var(--color-1);
}
.is-color-2 {
  color: var(--color-2);
}
.is-color-3 {
  color: var(--color-3);
}
.is-color-4 {
  color: var(--color-4);
}

.is-color-white {
  color: var(--color-white);
}
.is-color-danger {
  color: var(--color-danger);
}
.is-color-success {
  color: var(--color-success);
}

.is-background-0 {
  background: var(--color-0);
}
.is-background-1 {
  background: var(--color-1);
}
.is-background-2 {
  background: var(--color-2);
}
.is-background-3 {
  background: var(--color-3);
}
.is-background-4 {
  background: var(--color-4);
}

html {
  background-color: var(--color-4);
}

body {
  color: var(--color-0);
}

hr {
  margin: 0.5rem 0;
  height: 1px;
  background-color: var(--color-3);
}

.logo {
  font-family: 'Lobster', cursive;
  font-family: 'Dongle', sans-serif;
  font-size: 3rem;
  line-height: 1rem;
}

.button.is-light.is-hovered,
.button.is-light:hover {
  color: var(--color-0);
}

a {
  color: var(--color-0);
}
a:hover {
  color: var(--color-0);
}

.tag:not(body) {
  color: var(--color-0);
  background: var(--color-3);
}
.tag.sig {
  background: var(--color-0) !important;
  border-color: var(--color-0) !important;
  color: var(--color-white) !important;
}
.tag.sig.is-hovered,
.tag.sig:hover {
  background: var(--color-black) !important;
  border-color: var(--color-black) !important;
  color: var(--color-white) !important;
}

[v-cloak] {
  display: none;
}

.button {
  background-color: var(--color-white);
  border-color: var(--color-0);
  color: var(--color-0);
}
.button.is-black {
  background-color: var(--color-4);
  border-color: var(--color-2);
  color: var(--color-2);
}

.pageloader span.title {
  color: var(--color-0) !important;
  background: whitesmoke !important;
  border-radius: 5rem !important;
  font-size: 1.5rem !important;
  padding: 0.5rem 2rem !important;
}
.pageloader.is-white::after {
  color: var(--color-4) !important;
  border-color: var(--color-4) !important;
}

.navbar.header {
  padding: 1rem 2rem;
  box-shadow: none;
}
.navbar.footer {
  box-shadow: none;
  padding: 1rem 2rem;
}

.is-circle {
  border-radius: 50% !important;
}

.is-borderless {
  border-color: transparent !important;
}

.margin-b0-half {
  margin-bottom: 0.5rem !important;
}
.margin-b1 {
  margin-bottom: 1rem;
}
.margin-t1 {
  margin-top: 1rem;
}

.margin-b2 {
  margin-bottom: 2rem !important;
}
.margin-b2-half {
  margin-bottom: 2.5rem !important;
}

.padding-2-half {
  padding: 2.5rem;
}

.title {
  font-size: 2.5rem;
  margin-bottom: 0.75rem !important;
  font-family: 'Roboto Slab', serif;
  color: var(--color-0);
}
.title strong {
  color: var(--color-0);
}

.tags {
  margin-bottom: 0.5rem !important;
  margin-left: 0;
}
.tags .tag {
  overflow: hidden;
}
.tags .tag.augment-text {
  border: 1px solid var(--color-2) !important;
  color: var(--color-2) !important;
  background: var(--color-white) !important;
}
.tags .tag.augment-face {
  border: 1px solid var(--color-0) !important;
  color: var(--color-white) !important;
  background: var(--color-0) !important;
}

.signature {
  margin-top: -0.25rem !important;
  margin-bottom: 0.5rem !important;
  margin-left: 0;
}

.textarea {
  font-size: 1.5rem;
  box-shadow: 0 0 0 .125rem var(--color-3);
  border: none;
  font-family: 'Roboto Slab', serif;
  background: transparent !important;
  color: var(--color-0) !important;
}
.textarea:focus {
  box-shadow: 0 0 0 .125rem var(--color-3);
}

.triangle {
  background-color: rgb(4, 4, 4);
  width: 1rem;
  height: 1rem;
  transform: translate3d(-50%, 100%, 0) rotate(45deg);
  position: absolute;
  left: 1.15rem;
  bottom: 0.5rem;
}
#textarea-styles,
#image-styles {
  position: fixed;
  transform: translateX(100%);
  display: none;
}

#textarea-styles.is-active {
  display: inline;
}

.element {
  width: 100%;
  padding: 1rem;
}
.element.image,
.element.video,
.element.file {
  width: 100%;
  padding: 1rem;
  border: 0.125rem var(--color-3);
  border-radius: 0.125rem;
  box-shadow: 0 0 0 0.125rem var(--color-3);
}

.hue {
  background-image: linear-gradient(to right,black,black,red,orange,yellow,green,blue,indigo,violet);
  border-radius: 3px;
}

#elements {
  margin: 0.5rem;
}

.is-author {
  background: var(--color-3);
}

#select-recipients {
  padding: 1rem 2rem;
  background: transparent;
  /* display: none; */
}
#title {
}

#recipients {
  padding: 1rem 2rem;
}
#recipients .button {
  height: 2rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
#recipients .button:hover {
  color: var(--color-black) !important;
  border-color: var(--color-black) !important;
}

#recipients .author .button {
  color: var(--color-white) !important;
  background: var(--color-black) !important;
  border-color: transparent !important;
}
#recipients .author .button:hover {
  color: var(--color-white) !important;
  background: var(--color-black) !important;
  border-color: transparent !important;
}

#recipients .author.uuid .button,
p.author.uuid span.tag {
  color: var(--color-4) !important;
  background: var(--color-1) !important;
  border-color: var(--color-1) !important;
}
#recipients .author.uuid .button:hover,
p.author.uuid span.tag:hover {
  color: var(--color-4) !important;
  background: var(--color-1) !important;
  border-color: var(--color-1) !important;
}

figure .image.is-128x128 img {
  border: 1px solid var(--color-3);
}

.field.has-addons.controls {
  display: none;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

.box {
  box-shadow: none;
  border: 1px solid var(--color-3);
  color: var(--color-0);
}
.box:hover {
  box-shadow: 0 .5em 1em -.125em rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.02);
}

.box-file > p {
  font-size: 1.85rem;
  box-shadow: none;
}

.box-image {
  /* height: 25rem; */
  /* max-height: 50rem; */
  overflow: hidden;
  margin-bottom: 1rem;
  text-align: center;
  /* background:var(--color-3); */
}
.box-image img {
  width: 100%;
  border-radius: 0.5rem;
}

.box-notification {
  border-left: 0.75rem solid var(--color-4);
}

.box-reply {
  border-left: 0.75rem solid var(--color-0);
}
.box-reply > article > div > figure > img {
  border: 1px solid var(--color-3);
}

.box-text {
  height: auto;
  overflow: hidden;
  margin-bottom: 1rem;
}
.box-text > p {
  height: 68px;
  font-size: 1.5rem;
  font-family: "Roboto Slab", serif;
  font-weight: 400;
  line-height: 2rem;
  height: auto;
}

.box-title {
  margin-bottom: 0.5rem;
}
.box-title > .subtitle {
  font-weight: 100;
  font-size: 1rem;
}
.box-title > article > div > figure > img {
  border: 1px solid var(--color-3);
}

.box-video {
  height: 25rem;
  max-height: 25rem;
  overflow: hidden;
  margin-bottom: 1rem;
  text-align: center;
  background:var(--color-3);
}
.box-video video source {
  width: 100%;
}

#actions .container-01 {
  top: 0;
  right: 2rem;
  position: fixed;
  margin-top: 1rem;
}
#actions .container-02 {
  text-align: center !important;
}

.button.is-delete {
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-3);
  margin-right: 0;
}
.is-delete:hover {
  border: 1px solid transparent;
  background: var(--color-3);
  color: var(--color-white);
  margin-right: 0;
}

#accounts button:hover {
  background: #363636;
  color: white;
}

#accounts .box {
  padding: 2rem;
}
#accounts .box .title {
  color: var(--color-0) !important;
}

/* actions */

#actions a {
  margin-left: 2.5rem;
}
#actions #profile {
}
#actions #profile img {
  border: 1px solid var(--color-3);
  height: 3rem;
}

#actions #users {
  border: 1px solid var(--color-0);
}
#actions #new {
}
#actions #deletee {
}
#actions #reply {
  border: 1px solid var(--color-0);
}
#actions #reload {
  border: 1px solid var(--color-0);
}

#actions #back {
  background: transparent;
}
#actions #back:hover {
  background: transparent;
}

#actions .button.button-0 {
  background: var(--color-0) !important;
  border-color: var(--color-0) !important;
  color: var(--color-white) !important;
}
#actions .button.button-0.is-hovered,
#actions .button.button-0:hover {
  background: var(--color-black) !important;
  border-color: var(--color-black) !important;
  color: var(--color-white) !important;
}

#actions .button.button-1 {
  background: var(--color-white) !important;
  border-color: var(--color-0) !important;
  color: var(--color-0) !important;
}
#actions .button.button-1.is-hovered,
#actions .button.button-1:hover {
  background: var(--color-white) !important;
  border-color: var(--color-black) !important;
  color: var(--color-black) !important;
}

#actions .button.button-2 {
  background: var(--color-4) !important;
  border-color: var(--color-2) !important;
  color: var(--color-2) !important;
}
#actions .button.button-2.is-hovered,
#actions .button.button-2:hover {
  background: transform !important;
  border-color: var(--color-black) !important;
  color: var(--color-black) !important;
}

.author,
.recipient {
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}

.button.is-danger {
  background-color: var(--color-danger) !important;
}
.message.is-danger {
  background-color: #feecf0;
  text-align: center;
}
.message.is-danger p {
  color: var(--color-white) !important;
}
.message.is-danger .message-body {
  border-color: var(--color-danger) !important;
  color: var(--color-white) !important;
  border-width: 0 0 0 0.75rem !important;
  background: var(--color-danger) !important;
}

.button.is-success {
  background-color: var(--color-success) !important;
}
.message.is-success {
  background-color: #effaf3;
  text-align: center;
}
.message.is-success p {
  color: var(--color-white) !important;
}
.message.is-success .message-body {
  border-color: var(--color-success) !important;
  color: var(--color-white) !important;
  border-width: 0 0 0 0.75rem !important;
  background: var(--color-success) !important;
}

.updated,
.created {
  border: 1px solid var(--color-2) !important;
  color: var(--color-2) !important;
  background: var(--color-white) !important;
}

[data-badge].has-badge-black::after {
  background: var(--color-0);
  color: var(--color-4);
}

.input, .select select, .textarea {
  border-color: var(--color-3);
  color: var(--color-0);
}

#author {
  padding: 1rem 0;
}

.thumb {
  display: inline-block;
  width: 8rem;
  height: 8rem;
  background-position: center center;
  background-size: cover;
}

/* roboto-slab-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: url('../webfonts/roboto-slab-v24-latin/roboto-slab-v24-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../webfonts/roboto-slab-v24-latin/roboto-slab-v24-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../webfonts/roboto-slab-v24-latin/roboto-slab-v24-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../webfonts/roboto-slab-v24-latin/roboto-slab-v24-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../webfonts/roboto-slab-v24-latin/roboto-slab-v24-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../webfonts/roboto-slab-v24-latin/roboto-slab-v24-latin-regular.svg#RobotoSlab') format('svg'); /* Legacy iOS */
}
/* roboto-slab-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  src: url('../webfonts/roboto-slab-v24-latin/roboto-slab-v24-latin-700.eot'); /* IE9 Compat Modes */
  src: url('../webfonts/roboto-slab-v24-latin/roboto-slab-v24-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../webfonts/roboto-slab-v24-latin/roboto-slab-v24-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../webfonts/roboto-slab-v24-latin/roboto-slab-v24-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../webfonts/roboto-slab-v24-latin/roboto-slab-v24-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../webfonts/roboto-slab-v24-latin/roboto-slab-v24-latin-700.svg#RobotoSlab') format('svg'); /* Legacy iOS */
}