/*total width and height (often more intuitive)*/
/* This includes padding and border in an element's */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body{
  background-color: #ddf;
  /*background-color: #ebf;
  background-color: #ffc;*/
  color: #222;
  margin: 0;
  padding: 0;
  font-family:Arial, serif;
  font-size: 110%;
}

h1 {
  text-align: center;
}

table{
  border-collapse: collapse;
}

a {
  text-decoration: none;
  font-weight:500;
  color: darkgreen;
  display: inline-block;
  padding: 3px 1px;
  border-radius: 3px;
  margin: 2px;
}

input, textarea {
  display: block;
  width: 100%;
  padding: 5px;
  margin: 1px 0px 1px 0px;
  border: 2px solid #999;
  border-radius: 5px
}

button{
  margin:2px;
}

form{
  max-width: 800px;
  padding: 15px;
}
.form-group{
  padding-bottom: 10px;
}
div.headertext {
  font-size: 130%;
  display: inline-block;
  font-family: serif;
  font-weight: bold;
  padding: 4px;
}

.maincontent{
  /*padding: 10px;*/
  /*text-align: center;*/
}

.select_locale, .select_locale > form{
  display: inline;
  font-size: 95%;
  font-weight: normal;
}

.accountcard {
  max-width: 500px;
  display: block;
  margin: 20px auto;
}

.basecard {
  max-width: 500px;
  display: block;
  margin: 20px auto;
}

.status {
  font-weight: bold;
  font-size: 90%;
  margin: 5px 0 5px 20px;

}
#nav {
  font-weight: bold;
  font-size: 100%;
  margin: 3px 0 3px 0;
}

.status > a, #nav > a{
  display: inline-block;
  color: #666;
  padding: 3px 5px;
  margin: 0;
  background-color: #eef;
  border-radius: 5px;
  text-decoration: none;
}
a:hover {
  background-color: lightgreen;
}

a.is-disabled {
    text-decoration: none;
    pointer-events: none;
    background-color: inherit;
}

.status > a:last-child{
  /*background-color: inherit;*/
}

.centered{
    text-align: center;
}

/*===============================================================*/
/* Discussion: */
.limited{
  max-width: 800px;
  margin: auto;
}

.message_pos1{
  margin-left: 0;
  margin-top: 10px;
  border: 5px solid rgb(53,170,255);
  border-radius: 10px;
}
.message_pos2, .message_pos2_single{
  margin-top: 1px;
  border: 3px solid rgb(170,120,255);
  border-radius: 10px;
}
.message_pos2{
  margin-left: 20px;
}

.message_row1, .comment_row1{
  margin: 0px;
  padding: 5px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.message_row2, .comment_row2{
  margin: 0px;
  padding: 5px;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
}

.message_row1{
  /*background-color: rgb(33,150,243);*/
  background-color: rgb(53,170,255);
}
.message_row2{
  background-color: rgb(230,255,255);
}
.comment_row1{
  /*background-color: rgb(150,100,243);*/
  background-color: rgb(180,130,255);
}
.comment_row2{
  background-color: rgb(255,240,255);
}


.message_title{
  font-weight: bold;
  display: inline;
}
.message_content{
  font-size: 90%;
}
.message_to_comment{
  font-size: 80%;
  color: #444;
}
.comment_title{
  font-weight: bold;
  display: inline;
  font-size: 90%;
}
.comment_content{
  font-size: 90%;
}

.message_sender_name, .comment_sender_name{
  font-weight: bold;
  display: inline;
  font-size: 90%;
}

.message_datetime, .comment_datetime{
  font-size: 90%;
}

/*===============================================================*/
/* Small comments to events etc :*/
.minimessage{
  margin: auto;
  padding: 10px;
  /*background-color: lightgreen;*/
  background-color: #eef;
  border-radius: 20px;
  max-width: 800px;
  /*border: 10px solid #484;*/
  /*border: 20px solid #49f;*/
  border: 10px solid #2196f3
}
.minititle{
  font-weight: bold;
}
.minicontent{

}
.miniuser{
  color: #252;
}
.minitime{
  color: #444;
  font-weight: bold;
}
.songlist_song{
  padding: 2px;
  margin: 2px;
  text-align: left;
}
.songlist_song{
  padding: 2px;
}
.songlistitem{
  font-weight: bold;
}

.errorlist {
  text-decoration: none;
  color: red;
  margin: 0 0 5px 0;
  font-size: 90%;
}
.help {
  margin-top: 5px;
}
.field_wrapper{
  margin: 10px 0 10px 0;
}

.is-valid{
  border-color: green;
}
.is-invalid{
  border-color: red;
}
.text-muted{
  color: #777;
}
.valid-feedback{
  display: inline-block;
  font-size: 80%;
  background-color: lightgreen;
  color: green;
  padding: 3px;
  border-radius: 5px;
}

.invalid-feedback{
  display: inline-block;
  font-size: 80%;
  background-color: pink;
  color: red;
  padding: 3px;
  border-radius: 5px;
}

/*================= Events ==========================*/
.event_notice_next{
  text-align: center;
  background-color: #3a8;
  border-radius: 3px;
  color: white;
  font-weight: bold;
  padding: 6px;
}

.event_time{
  font-weight: bold;
  color: #444;
}
.event_participants_numb{
  font-size: 80%;
  font-weight: normal;
  color: black;
}
.event_participant_name{
  font-weight: normal;
  font-size: 80%;
  color: black;
}

.eventcommentbox{
  background-color: #ddd;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}
.eventcomment{
  font-size: 80%;
  color: black;
  padding-bottom: 2px;
}
.eventcomment_sender{
  font-weight: bold;
  font-size: 80%;
}
.eventcomment_datetime{
  font-weight: normal;
  font-size: 80%;
}
.event_table, .event_table td, .event_table th{
  border: 1px solid #aaa;
}

table.event_table{
  background-color: #eef;
  line-height: 1.2em;
}
.event_table td, .event_table th{
  padding: 5px 10px 5px 10px;
}
.eventtitle_table{
  font-weight: bold;
  font-size: 100%;
  color: #333;
}
.eventdesc_table{
  font-weight: normal;
  font-size: 80%;
  color: black;
}
.eventdatetime_table{
  font-weight: normal;
  font-size: 90%;
  color: #333;
}
.event_table tr#next_event{
  border: 1px solid #f33;
  background-color: #dde;
}
.participants_table{
  font-weight: normal;
  font-size: 70%;
  color: #333;
}
.compact_voice{
  display: inline-block;
  padding: 3px;
  background-color: black;
  color: white;
  margin: 2px 1px;
  border-radius: 4px;
}