*{
  margin:0; padding:0;
}
body { 
  text-align:center;
  color: #333; 
  background-color:#EBE4D9;
  padding-top:25px;
}
#wrapper {width:650px;margin:0 auto;position:relative;}
h1,h2,p,ul{
  margin-bottom:1em;
}
img {border:0;}
body, p, ol, ul, td, a {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size:   16px;
  line-height: 18px;
} 
form {
  margin-bottom:2em;
  display:inline;
}
form#new_word {
  margin: 2em 0;
  display: block;
}

.field textarea {padding:5px;font-family:arial, sans-serif;}
.field input[type=text] {
  padding: 5px;
}
pre {
  background-color: #eee;
  padding: 10px;
  font-size: 11px;
}
a { color: #000; }
a:visited { color: #666; }


div.field, div.actions {
  margin-bottom: 10px;
}

turbo-frame[src] .show-word {
  display: none;
}

.relative {
  position: relative;
}
#notice {
  color: green;
}
#flash_notice{
  color: green;
  border: 1px solid green;
  padding: 1px;
  -moz-border-radius:8px;
  -webkit-border-radius:8px;
  border-radius:8px;
  margin: 1px auto ;
  position:absolute;
  top:-25px;
  width:100%;
  text-align:center;
}
.angemeldet{
  margin: 1px  ;
  position:absolute;
  top:10px;
  right:0;
  font-size:11px;
  text-align:right;
}
.field_with_errors {
  padding: 2px;
  background-color: red;
  display: table;
}

#error_explanation {
  width: 450px;
  border: 2px solid red;
  padding: 7px;
  padding-bottom: 0;
  margin-bottom: 20px;
  background-color: #f0f0f0;
}

#error_explanation h2 {
  text-align: left;
  font-weight: bold;
  padding: 5px 5px 5px 15px;
  font-size: 12px;
  margin: -7px;
  margin-bottom: 0px;
  background-color: #c00;
  color: #fff;
}

#error_explanation ul li {
  font-size: 12px;
  list-style: square;
}
.wort, .wortlink{
  font-size:   20px;
  font-family: georgia;
  margin:0 0 5px 0;
}
.wortlink{
  color: #333; 
}
.wortdersekunde{
  font-size:   38px;
  border:none;
  text-align:center;
  background:none;
}
.erklaerung{ 
  clear:both;
  font-size:   13px;
}
.erklaerung p {
  line-height: 25px;
}
.erklaerung p:last-child {
  margin-bottom: 0;
}
.small{
  font-size:   10px;
}
li{
  text-align:left;
  list-style:none;
  overflow:hidden;
  padding:10px;
}
input#word_user, textarea{
  width:80%;
}
.submit{
  width:auto;
}
li.cycle_odd_even:nth-child(odd){
  background-color:#DAD1C4;
}
li.even{
}
.adminarea {
  position:absolute;
  right:-30px;
  width:16px;
} 
.votebuttons{
  float:right;
}
.votebuttons form {
  margin:0;
  display:inline;
}
.btn-vote {
  color: white; 
  padding: 10;
  border: none; 
  border-radius: 3px; 
  font-size: 12px; 
  cursor: pointer;
  display: block;
}
.voting{
  font-size:11px;
  color:#666;
}
.vote {
  font-weight:bold;
  font-size:1.2em;
}
.erklaerung_neu {
  margin: 10px 0;
}
.erklaerung_neu a{
  padding:5px 5px 5px 25px;
  font-size:10px;
  text-decoration:none;
  background: url("../images/add.png") no-repeat 5px 50%;
}   

/* pagy */
.pagy {
  margin:0 0 10px 0;
}
.pagy a {
  font-size:14px;
  display:inline-block;
  margin-right:2px;
  padding:2px 4px;
  border:solid 1px #BDB6AA;
}

.pagy a:link,
.pagy a:visited {
  color:#0e509e;
  text-decoration:none;
}
.pagy a:hover{
  border:solid 1px #0e509e;
}
#nav {
  text-align:left;
  border-bottom:1px solid #DAD1C4;
  border-top:1px solid #DAD1C4;
  margin-bottom:10px;
  overflow:hidden;
}
#nav ul {
  margin:10px 0;
  text-align: center;
}
#nav li {
  display:inline-block;
}                
#nav li a {
  text-decoration:none;
  font-family:georgia;
  font-size:1.5em;
  padding:10px 5px;
}
#nav li a.active {
  color:black;
}   
#anmeldebutton {
  display:none;
}
.angemeldet form input {
  width:100px;
}
.angemeldet a img{
  margin-bottom:-2px;
}
.filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1em;
}
/* Updated styling for the button replacements */
.btn-edit, .btn-delete, .btn-vote, .btn-logout {
  display: inline-block;
  text-decoration: none;
  border-radius: 3px;
  font-size: 12px;
  padding: 3px 8px;
  margin: 2px;
  cursor: pointer;
}
.btn-reload {
  position: absolute;
  right: 80px;
  top: 27px;
  display: flex;
  align-items: center;
  text-decoration: none;
  svg {
    width: 26px;
    height: 26px;
  }
}
.per_page {
  font-size: 13px;
}