@import url('https://cdn.jsdelivr.net/gh/polight/decor@master/decor.css');
/* @import url('/assets/vendors/decor/decor.css'); */
@import url('https://use.fontawesome.com/releases/v6.4.0/css/all.css');

:root {
  --primary-color: #1e88e5;
  --light-color: #42a5f5;
  --white-background: #fcfcfc;
  --background-color: #004683;
  --disabled-opacity: .5;
}

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

h3 {
  font-size: .95rem;
}
h4 {
  font-size: .9rem;
  margin-bottom: .3rem;
}
ul {
  margin: .2rem 0;
}

button,
.button,
[type=submit] {
  transition: all .3s;
  cursor: pointer;
}

button,
.button,
[type=input] {
  color: var(--light-color);
}

button[disabled] {
  opacity: var(--disabled-opacity);
  cursor: not-allowed;
}

button:not(.danger):hover,
.button:not(.danger):hover,
[type=submit]:not(.danger):hover {
  color: var(--primary-color);
  background-color: #fcfcfc;
}

button.primary:hover,
.button.primary:hover,
[type=input].primary:hover {
  color: #fff;
  background-color: var(--light-color);
}

button.danger:hover,
.button.danger:hover,
[type=input].danger:hover {
  color: #fff;
  background-color: #b93f3b;
}

.two-columns {
  display: grid;
  grid-template:
    'main aside' / 2fr 1fr;
}

.two-columns main {
  grid-area: main;
}
.two-columns aside {
  grid-area: aside;
}

.block {
  background: var(--white-background);
  padding: 1rem;
  margin: 1rem 1rem;
  border-radius: .2rem;
  box-shadow: 0 0 .3rem rgba(88, 88, 88, .8);
}
.block h1:first-child x-icon {
  margin-right: .3rem;
}
.block h1:first-child {
  font-size: 1rem;
  color: #555;
}
.block h1:first-child::after {
  display: block;
  content: " ";
  border-bottom: 1px solid #999;
  margin: .5rem -1rem 0 -1rem;
}

.toolbar {
  background-color: var(--white-background);
}

.row label {
  width: 6rem;
  margin-right: 2rem;
}
input,
select,
textarea {
  min-width: 88%;
}

/* help text for input */
label + div > small {
  display: block;
  font-size: .8em;
  color: #888;
}