html,
body {
	min-height: 100%;
}

html {
	height: 100%;
}

body {
	display: flex;
	flex-direction: column;
}

header {
	border-top: 10px solid white;
	padding-top: 30px;
	background-color: #C00D0D;
}

#topmenu {
	display: block;
	position: absolute;
	top: 10px;
	right: 0;
	width: auto;
	color: #999;
	text-align: right;
	height: 25px;
	background-color: white;
	padding-right: 50px;
	padding-left: 50px;
	background-image: url('/media/imgs/top_menu_left.png');
	background-repeat: no-repeat;
}

#topmenu a {
	color: #999;
	text-decoration: underline;
}

#homelink {
	float: left;
	display: block;
	width: 143px;
	height: 101px;
	margin-left: 20px;
	background-image: url('/media/imgs/vario_logo.png');
}

#toptitle{
	margin-bottom: 10px;
    margin-top: 0;
	padding-bottom: 10px;
	border-bottom: 1px solid #CCC;
}

#topsubtitle {
	font-size: .5em;
}

#usermenu {
	background-image: url('/media/imgs/enews_logo.png');
	background-repeat: no-repeat;
	background-position: right 15px;
	padding: 100px 0 0 0;
	min-height: 30px;
}

#usermenu a {
	color: white;
	background-color: #9C1006;
	margin-left: 4px;
	border-top-right-radius: 8px 8px;
	border-top-left-radius: 8px 8px;
	padding: 8px 20px;
	line-height: 15px;
	font-size: 15px;
	behavior: url(/media/css/PIE/PIE.htc);
	float: right;
	border-bottom: 2px solid #C00D0D;
}

#usermenu a:hover, #usermenu a.active {
	text-decoration: none;
}

main {
	flex-grow: 1;
	background-image: -webkit-radial-gradient(center center, farthest-side circle, #C00D0D 0%, #9c1006 100%);
	background-image: -moz-radial-gradient(center center, farthest-side circle, #C00D0D 0%, #9c1006 100%);
	background-image: -ms-radial-gradient(center center, farthest-side circle, #C00D0D 0%, #9c1006 100%);
	background-image: -o-radial-gradient(center center, farthest-side circle, #C00D0D 0%, #9c1006 100%);
	background-image: radial-gradient(farthest-side circle at center center, #C00D0D 0%, #9c1006 100%);
	behavior: url(/media/css/PIE/PIE.htc);
	min-height: 600px;
}

#content {
	padding: 20px 0;
	z-index: 2;
}

.content{
	position:relative;
}

#usermenu a:hover, #usermenu a.active, th {
	background: rgb(76,76,76); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(76,76,76,1)), color-stop(12%,rgba(89,89,89,1)), color-stop(25%,rgba(102,102,102,1)), color-stop(39%,rgba(71,71,71,1)), color-stop(50%,rgba(44,44,44,1)), color-stop(51%,rgba(0,0,0,1)), color-stop(60%,rgba(17,17,17,1)), color-stop(76%,rgba(43,43,43,1)), color-stop(91%,rgba(28,28,28,1)), color-stop(100%,rgba(19,19,19,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
	color: white;
}

#page {
	display: flex;
    flex-direction: row;
    align-items: flex-start;
	min-height: 500px;
	padding-top: 40px;
}

#mainmenu {
	display: block;
	min-width: 200px;
	width: 200px;
	padding-right: 20px;
	border-right: 1px solid #CCC;
	margin-right: 20px;
	align-self: stretch;
	position: relative;
}

#mainmenucontent {
	position: sticky;
	top: 20px;
}

#mainmenucontent .nav {
	margin-top: 10px;
}

#mainmenu ul li {
	width: 100%;
}

#page > div {
	flex-grow: 1;
}

#pagemenu {
	margin-top: -10px;
	margin-bottom: 10px;
	border-bottom: 1px solid #CCC;
}

:not(#toptitle) + #pagemenu {
	margin-top: 0px;
}

.well#page {
	padding-top: 20px;
	color: #666;
}

a.well a {
	color: #555;
}
a.well a:hover {
	color: #333;
}

#page iframe,
.code-editor {
	width:100%!important;
	height:60vh!important;
	margin:auto!important;
}

#page iframe {
	background:#ffffff;
}

#options-section,
#dashboard-panel > .panel-heading {
	position: sticky;
	top: 0px;
	z-index: 1;
}

#options-section + section > #dashboard-panel > .panel-heading {
	top: 57px;
}

.dashboard-panel h2.panel-heading,
.dashboard-panel .panel-heading > h2 {
    color: #666;
	margin: 0;
	font-size: 24px;
}

.dashboard-panel > div.panel-heading {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.dashboard-panel > div.panel-heading > .btn {
	margin-left: 1em;
}

.dashboard-panel > div.panel-heading > :not(.btn) + .btn {
	margin-left: auto;
}

.dashboard-tile-panel .panel-body {
	display: grid;
    grid-template-columns: repeat(auto-fill, 28rem);
	grid-template-rows: auto;
    gap: 0 1em;
	padding: 0 15px;
}

.dashboard-tile-panel .panel-body.dashboard-panel-body-short {
	grid-auto-rows: 0;
	overflow: hidden;
}

@media screen and (max-width: 991px) {
	.dashboard-tile-panel .panel-body.dashboard-panel-body-short {
		grid-template-rows: auto auto;
	}
}

.dashboard-panel .panel-body::before {
	display: none;
}

.dashboard-panel .card {
	display: flex;
	flex-direction: column;
    margin: 15px 0;
    overflow: hidden;
	border-radius: 4px 4px 0 0;
	border-bottom: 1px solid #CCC;
}

.dashboard-panel .card-heading {
    background: rgb(76,76,76);
    background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(76,76,76,1)), color-stop(12%,rgba(89,89,89,1)), color-stop(25%,rgba(102,102,102,1)), color-stop(39%,rgba(71,71,71,1)), color-stop(50%,rgba(44,44,44,1)), color-stop(51%,rgba(0,0,0,1)), color-stop(60%,rgba(17,17,17,1)), color-stop(76%,rgba(43,43,43,1)), color-stop(91%,rgba(28,28,28,1)), color-stop(100%,rgba(19,19,19,1)));
    background: -webkit-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%);
    background: -o-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%);
    background: -ms-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%);
    background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 );
    color: white;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: start;
	justify-content: space-between;
	padding: 1em;
}

.dashboard-panel .card-body h3 {
	font-size: 18px;
	margin: 0;
}

.dashboard-panel .card .card-body {
	padding: 1em;
	border-left: 1px solid #CCC;
	border-right: 1px solid #CCC;
}

.dashboard-panel .card .card-body:not(:last-child) {
	border-bottom: 1px solid #CCC;
}

.dashboard-panel .card .card-body > p:last-child {
	margin-bottom: 0;
}

.dashboard-panel .card-thumbnail {
	overflow-y: hidden;
	flex-grow: 1;
}

.dashboard-panel:not(.show-fullsize-thumbnail) .card-thumbnail {
	max-height: 400px;
}

.dashboard-panel .card-thumbnail img {
	max-width: 100%;
}

.dashboard-panel:not(.show-fullsize-thumbnail) .card-thumbnail > img.fullsize-thumbnail,
.dashboard-panel.show-fullsize-thumbnail .card-thumbnail > img:not(.fullsize-thumbnail) {
	display: none;
}

.dashboard-panel .card .dashboard-card-links {
	margin-top: auto;
	display: flex;
	justify-content: end;
	flex-wrap: wrap;
	gap: 1em;
}

.dashboard-panel .dashboard-card-joined {
	flex-grow: 1;
}

.dashboard-panel .dashboard-card-pie {
	width: 100%;
	height: 15rem;
}

.panel-footer > a:not(:first-child) {
	margin-left: 1.5em;
}


#list_wrap {
	width:100%;
	height:60vw;
	max-height:80vh;
	overflow:auto;
}

table {
	width: 100%;
}
th {
	padding: 5px 10px;
	font-size: 16px;
}
td {
	background-color: #EDEDED;
	color: black;
	padding: 3px 5px;
	border-bottom: 1px solid #9D9D9C
}
td.last, th.last {
	text-align: right;
}


span.unsubbed{
	color:#C00D0D;
	font-style: italic;
}

span.undeliverable{
	color:#FFA500;
	font-style: italic;
}

/*

#topmenu a {
	display: inline-block;
	padding-left: 20px;
	color: white;
	text-decoration: none;
	font-size: 15px;
	font-weight: bold;
}

#user {
	display: block;
	position: absolute;
	top: 35px;
	right: 0;
	width: 25%;
	text-align: right;
	padding: 5px 10px 0 0;

}

#title {
	font-size: 30px;
	font-weight: bold;
}

#content {
	padding: 20px;
}
*/

/* jQuery Tags Input Plugin 1.3.3 */
div.tagsinput { border:1px solid #CCC; background: #FFF; padding:5px; width:300px; height:100px!important; overflow-y: auto;}
div.tagsinput span.tag {  display: block; float: left; padding: 3px; text-decoration:none; margin-right: 5px; margin-bottom:5px;font-family: helvetica;  font-size:13px;}
div.tagsinput span.tag a { font-weight: bold; text-decoration:none; font-size: 11px; color: #AAA; }
div.tagsinput input { width:80px; margin:0px; font-family: helvetica; font-size: 13px; border:1px solid transparent; padding:3px; background: transparent; color: #000; outline:0px;  margin-right:5px; margin-bottom:5px; }
div.tagsinput div { display:block; float: left; }
.tags_clear { clear: both; width: 100%; height: 0px; }
.not_valid {background: #FBD8DB !important; color: #90111A !important;}

textarea.form-control {
	height: 48px;
}
.tagify.form-control {
	height: auto;
	min-height: 34px;
    width: 100%;
	max-width: 357px;
	font-size: 13px;
	padding: 5px;
}
.tagify__tag {
	margin: 0px 5px 5px 0px;
}
.tagify__tag>div::before {
	box-shadow: none !important;
}

.dashlist .loader  {
	font-size: 3rem;
}

.dashlist:not(.loading) .loader {
	display: none;
}

.loader {
	text-align: center;
}

.loader .lds-ring {
    display: inline-block;
    position: relative;
    width: 1em;
    height: 1em;
}

.loader .lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: .8em;
    height: .8em;
    margin: .1em;
    border: .1em solid #b1000d;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #b1000d transparent transparent transparent;
}

.loader .lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
}

.loader .lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
}

.loader .lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
}

@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.tab {
	padding-top: 1rem;
}

.tab:not(.active) {
	display: none;
}

.code-editor {
	width: 750px;
	height: 400px;
	margin-top: 1rem !important;
}