* { margin: 0; padding: 0; }
a img { border: 0 none; }
p { margin: 1em 0; }

body {
	font-family: var(--font-family), sans-serif;
	font-size: 1rem;
	background-color:var(--main-bgcolor);
}
.nowrap { white-space: nowrap; }

#main { margin: 0 auto; color: var(--texts-color); }
#top { box-shadow: 2px 2px 6px 0 rgba(0,0,0,.1); background-color: var(--top-bgcolor); padding: 15px; display: flex; gap: 15px; align-items: center; flex-wrap: wrap; }
#top .user_info { margin-left: auto; display: flex; gap: 15px; align-items: center; cursor: default; }
#top .user_ident { display: flex; gap: 15px; align-items: center; cursor: default; }
#top .user_ident .avatar img { width: 34px; height: 34px; border-radius: 50%; }
#top .app_title { font-size: 1.2rem; font-weight: normal; }
#top .license { color: rgba(128,128,128,0.3); }
#top svg { display: block; }
#middle { padding: 15px; box-sizing: border-box; }
#middle.fullsize { padding: 0; width: 100%; min-height: 100%; }
#middle.centered { display: flex; flex-direction: column; gap: 15px; align-items: stretch; width: 1600px; margin: 0 auto; max-width: 100%; }
#middle .page-title { font-weight: bold; font-size: 1.2rem; }
#language-selector select { border: 0 none; text-transform: uppercase; background-color: transparent;  }

#middle .help { align-self:flex-start; background-color: #fff; border: 2px solid #eee; color: var(--texts-color); padding: 1em; border-radius: 7px; line-height: 1.5em; }

/* http://www.bestcssbuttongenerator.com/ */

.hbuttons {
	display: flex; gap: 15px;
}

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

.warning { background-color: var(--texts-color); color: var(--main-bgcolor); padding: 0.5em; border-radius: 5px; }

.button.icontext { display: flex; align-items: center; gap: 8px; }
.button.icontext .svg-icon svg { fill: #4b646e; }
.button.icontext .caption { flex-shrink: 2; }

button,.button,input[type="submit"],.wait_button {
	background-color: var(--buttons-bgcolor);
	border-radius:5px;
	border:1px solid var(--buttons-border-color);
	display:inline-block;
	cursor:pointer;
	color:var(--buttons-txtcolor);
	font-family:var(--font-family);
	font-size: inherit;
	font-weight:normal;
	padding:5px 10px;
	text-decoration:none;
}

button:hover,.button:hover,input[type="submit"]:hover {
	background-color:var(--buttons-hover-bgcolor);
}

button:active,.button:active,input[type="submit"]:active {
	position:relative;
	top:1px;
}

.button.admin {
    color: #cc0000;
}

.button.on {
	background-color: #9f9;
}

.membership-button.on { background-color: #9f9; }
.membership-button.on.expired { background-color: #f99; }


.svg-icon svg { display: block; fill: var(--icons-color); }

.page-login { display: flex; gap: 20px; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; }
.page-login .login-form { display: flex; flex-direction: column; gap: 15px; max-width: 100%; }

@media print {
	.button { display: none; }
	.hbuttons { display: none; }
	#top { display: none; }
}

@media screen and (max-width: 1700px) {
	#middle.centered { width: auto; }
}

.spinner {
	width: 100%;
	font-size: inherit;
	display: flex;
	gap: 2px;
	justify-content: center;
}

.spinner > div {
  background-color: #ccc;
  width: 5px;
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}