/*
 *   Reset
 */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,select,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
strong{font-weight:700;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}abbr,acronym{border:0;}

button::-moz-focus-inner {border:0; padding:0;}

/*
 *   Styles
 */

* {box-sizing:border-box;}

:root {
  --brand-color: rgb( 56, 189, 194 );
}

body {display:flex; flex-direction:column; width:100%; background:rgba( 0,0,0, .01 );}

body,
input,
textarea,
button {font-family:Noto sans, sans-serif; font-size:14px; line-height:1.4em;}

a.button:link,
a.button:visited,
button {display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border:0; background:var(--brand-color); font-weight:bold; color:white; text-decoration:none; cursor:pointer;}
a.button:hover,
button:hover {opacity:.9;}

a:link,
a:visited {color:var(--brand-color);}
a:hover {text-decoration:none;}

a.disabled:link,
a.disabled:visited {color:rgba( 0,0,0, .5 ); text-decoration:none; cursor:default;}

.fa-check {color:green;}
.fa-times {color:red;}
.fa-exclamation-triangle {color:red;}
.fa-exclamation-circle {color:#e90;}
.fa-ban {color:#df7300;}

.text-left {text-align:left;}
.text-center {text-align:center;}
.text-right {text-align:right;}

.no-wrap {white-space:nowrap;}
.pre-wrap {white-space:pre-wrap;}

.pageresponse {display:flex; align-items:center; padding:15px 30px; background:#ffc; font-weight:bold;}

header {display:flex; align-items:center; background:white; box-shadow:0 0 3px 1px rgba( 0,0,0, .1 );}
header .logo {display:flex; align-items:center; gap:10px; padding:30px; font-family:Noto Serif, serif; font-weight:bold; font-size:24px;}
header .logo i {color:var(--brand-color);}
header a.logo {text-decoration:none; color:black;}

nav {display:flex; gap:10px; margin-left:30px; padding-left:30px; border-left:1px solid rgba( 0,0,0, .1 );}
nav a:link,
nav a:visited {padding:10px 30px; background:rgba( 0,0,0, .0 ); color:black; text-decoration:none;}
nav a:hover {background:rgba( 0,0,0, .05 );}
nav a.active {background:var(--brand-color); color:white;}

main {padding:30px;}

.container {max-width:900px; margin:0 auto;}

form {display:flex; flex-direction:column; gap:15px; align-items:flex-start;}

.field {display:flex; flex-direction:column; gap:5px; width:100%;}
.field label {align-self:flex-start; font-weight:bold;}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="date"],
.field textarea,
.field select {padding:8px; background:white; border:1px solid rgba( 0,0,0, .2 ); border-radius:3px;}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="date"],
.field select {width:100%;}
.field textarea {width:100%; height:300px;}
.field .rte {width:100%; height:300px; background:white;}

fieldset {display:flex; flex-direction:column; gap:15px;}
fieldset.row {flex-direction:row;}

.filter {display:flex; flex-direction:row; flex-wrap:wrap;}
.filter .field,
.filter fieldset {flex:1;}
.filter .line-break {display:flex; flex:1; min-width:100%;}

table.list {}
table.list thead th {font-weight:bold;}
table.list th,
table.list td {padding:8px; border-bottom:1px solid rgba( 0,0,0, .1 );}
table.list input[type="text"] {width:100%; padding:8px; background:white; border:1px solid rgba( 0,0,0, .2 ); border-radius:3px;}

table.logs {font-size:14px;}
table.logs thead th {vertical-align:bottom;}
table.logs tr.success td {background:#efe;}
table.logs tr.error td {background:#fee;}
table.logs tr.warn td {background:#ffc;}
table.logs tr.blocked td {background:#ffdab4;}
table.logs tr.blocked a:link,
table.logs tr.blocked a:visited {color:black;}

.pagenumbers {display:flex; align-items:center; margin:15px 0; font-size:11px; line-height:1em;}
.pagenumbers:first-child {margin-bottom:20px;}
.pagenumbers:last-child {margin-top:20px;}
.pagenumbers .total {margin:0 30px 0 0;}
.pagenumbers a.prevnext {margin:0 5px; text-decoration:none; color:#000;}
.pagenumbers a.prevnext:hover {text-decoration:underline;}
.pagenumbers a.prevnext i {color:rgba( 0,0,0, .3 );}
.pagenumbers a.prevnext i:first-child {margin-right:5px;}
.pagenumbers a.prevnext i:last-child {margin-left:5px;}
.pagenumbers a.prevnext.disabled {color:rgba( 0,0,0, .3 ); cursor:default; pointer-events:none;}
.pagenumbers .pages {display:flex; align-items:center; margin:0 10px;}
.pagenumbers .pages a {display:flex; justify-content:center; align-items:center; min-width:18px; height:18px; margin:0 1px; padding:0 2px; border:1px solid rgba( 0,0,0, .1 ); text-decoration:none; color:#000;}
.pagenumbers .pages a:hover {background:rgba( 0,0,0, .1 );}
.pagenumbers .pages a.active {background:var(--brand-color); color:#fff; cursor:default; pointer-events:none;}

.tag {display:inline-flex; align-items:center; gap:5px; padding:3px 8px; background:rgba( 0,0,0, .1 ); border-radius:3px; font-size:11px; line-height:140%; color:rgba( 0,0,0, .8 );}