:root {
    --black:black;
    --gray:gray;
    --lightgray:lightgray;
    --darkgray:darkgray;
    --silver:silver;
    --white:white;
    --whitesmoke:whitesmoke;
    --opaquewhite:rgba(255,255,255,0.5);
    --yellow:yellow;
    --lightyellow:lightyellow;
    --orange:orange;
    --gold:gold;
    --red:red;
    --pink:pink;
    --bisque:bisque;
    --bisquedark:#ffcd91;
    --purple:purple;
    --brown:brown;
    --lightblue:lightblue;
    --blue:blue;
    --lightgreen:lightgreen;
    --green:green;
    --none:none;
 
	/*====================================*/
    
    --color:#a50632;
    /*--colorgrayscale:#99717f;*/

    --color-background:var(--white);
    --color-nav:var(--color);
	--color-nav-background:#f7f2f4;
    
	--color-nav-hover:var(--color-nav-background);
	--color-nav-hover-background:var(--color);
	--color-light:var(--whitesmoke);
	--color-dark:var(--black);
    /*--color-dark:var(--colorgrayscale);*/
    --color-footer:var(--color);
    --color-footer-background:var(--color-nav-background);

	/*
    --color-navcontainer:var(--color);
    --color-navcontainer-background:var(--color-background);
	--color-maincontainer:var(--color);
    --color-maincontainer-background:var(--color-background);
    --color-sidecontainer:var(--color);
    --color-sidecontainer-background:var(--color-background);
    --color-footercontainer:var(--color);
    --color-footercontainer-background:var(--color-background);
	*/
    
	--color-button:var(--color);
	--color-button-background:var(--white);
	--color-button-border:var(--darkgray);
	--color-button-hover:var(--white);
	--color-button-hover-background:var(--color);  

	--color-loading:var(--white);
    --color-loading-background:hsl(214deg,39%,50%,0.2);

	--color-service:var(--white);
    --color-service-background:hsl(214deg,39%,50%,0.2);

    --color-modal:var(--color);
    --color-modal-background:var(--white);
	
	--boxshadow:rgba(0,0,0,0.2);

	--font-family:Arial;
	--font-size:100%;
	--line-height:2em;
	--icon-font-size:2em;
	--icon-line-height:1em;	
}

/* colors */
.black {
    color:var(--black);
}
.blue {
    color:var(--blue);
}
.white {
    color:var(--white);
}
.whitesmoke {
    color:var(--whitesmoke);
}
.lightblue {
    color:var(--lightblue);
}
.lightgray {
    color:var(--lightgray);
}
.lightgreen {
    color:var(--lightgreen);
}
.orange {
    color:var(--orange);
}
.pink {
    color:var(--pink);
}
.purple {
    color:var(--purple);
}
.red {
    color:var(--red);
}
.gray {
    color:var(--gray);
}
.green {
    color:var(--green);
}

/* standard html elements */
a {
    transition:opacity 0.3s;
    text-decoration:none;
    color:var(--color);
	:hover,
	:focus,
	:active {
		opacity:0.8;
	}
	:visited {
		color:var(--color-dark);
	}
}
body {
	scroll-behavior:smooth;
    margin:0;
    padding:0;
	font-family:var(--font-family);
	font-size:var(--font-size);
    line-height:var(--line-height);
    background:url('/content/images/htmlbackground.webp');
    background-attachment:fixed;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center center;
    background-color:var(--color-background);
    color:var(--color);
}
button {
	color:var(--color-button);
    background:var(--color-button-background);
	border:solid 1px var(--color-button-border);
	border-radius:5px;
    cursor:pointer;
	text-align:center;
	padding:15px;
    margin:5px;
	font-weight:bold;
    font-size:120%;
	box-shadow:0 4px 8px 0 var(--boxshadow);
	transition:0.3s;
	:hover {
		color:var(--color-button-hover);
		background:var(--color-button-hover-background);
		box-shadow:0 8px 16px 0 var(--boxshadow);
	}
}
figure {
    margin:0;
    padding:0;
}
figcaption {
    text-align:center;
    font-style:italic;
    padding:5px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    text-align:center;
}
iframe {
    border:0;
	user-select:none;
}
img {
    user-select:none;
    vertical-align:middle; 
}
p {
    font-size:120%;
}
pre,
code {
	color:blue;
	text-align:left;
}
span {
    vertical-align:middle;    
}

/* audio & video */
audio,
video {
    width:100%;
}
.audio,
.video {
    text-align:center;
    background-color:var(--white);
    border:solid 1px var(--lightgray);
    border-radius:10px;
    padding:20px;
    margin:5px;
    filter:grayscale(10%);
}

/* grid */
.grid {
	footer,
	nav {
		display:flex;
		left:0;
		right:0;
		flex-flow:row wrap;
		height:fit-content;
		align-items:center;
		vertical-align:middle;
		user-select:none;
		padding:10px;
		color:var(--color-nav);
		background-color:var(--color-nav-background);
	}
	footer {
		grid-area:footer;
		bottom:0;
		z-index:999;
		justify-content:center;
		align-items:stretch;
		.footerlanguages,
		.footeranchors,
		.footersocials,
		.footercontact {
			padding:10px;
		}
		.footerlanguage,
		.footeranchor,
		.footersocial,
		.footercontactemail,
		.footercontactphone {
			margin:10px;
			padding:0;
		}
		.footerlogo img {
			width:30px;
			border-radius:50%;
		}
		.footerlogo,
		.footercopyright {
			width:100%;
			text-align:center;
		}
		.footerlanguages img {
			width: 1em;
			height: 1em;
			border-radius:50%;
		}
	}
	nav {
		grid-area:nav;
		top:0;
		z-index:9999;
		.navlogo {
			b {
				font-style:italic;
				margin-left:5px;
			}
			img {
				max-width:200px;
				max-height:50px;
				border-radius:50%;
			}
		}
		.usericon {
			display:block;
			width:40px;
			height:40px;
			circle {
				fill:#cccccc;	
			}
			path {
				fill:#a0a09f;	
			}
			foreignObject img {
				border:solid 1px black;
				border-radius:500px;
			}
			foreignObject span {
				font:bold 50px sans-serif;
			}
			.true circle {
				fill:lightgreen	
			}
			.true path {
				fill:green	
			}
		}
		.spacer {
			flex:1;
		}
		.navmenu {
			position:absolute;
			display:none;
			top:0;
			right:0;
			max-width:300px;
			border-radius:0px 0px 0px 25px;
			box-shadow:0 8px 16px 0 var(--boxshadow);
			background-color:var(--color-nav-background);
			img,
			.material {
				height:30px;	
				width:30px;
				border-radius:50%;
			}
			.navmenuicon {
				text-align:right;
				padding:15px;
				border-radius:0px 0px 0px 25px;
				span {
					position:relative;
					padding:10px;
					line-height:var(--icon-line-height);
					right:0;
					cursor:pointer;
					border-radius:50%;
				}
			}
			.navmenusearch {
				border:solid 1px var(--color-nav);
				border-radius:5px;
				margin:10px;
				padding:5px;
				input {
					padding:10px;
				}
			}
			.navmenuitems {
				padding:5px;
			}
			.navmenulink {
				margin:10px;
				padding:5px;
				cursor:pointer;
				a {
					display:block;
					color:var(--color-nav);
					padding:5px;
					min-width:150px;
				}
			}
			.navmenulink a:hover,
			.navmenulink a:focus,
			.navmenulanguage:hover,
			.navmenulanguage:focus {
				color:var(--color-nav-hover);
				background-color:var(--color-nav-hover-background);
				border-radius:5px;
			}
			.navmenu:hover {
				transition:0.3s;
				box-shadow:0 8px 32px 0 var(--boxshadow);
			}
			/*
				.navmenulanguage {
				}
				.navmenuregistration {
				}
			*/
		}
		.totop {
			line-height:var(--icon-line-height);
			position:fixed;
			bottom:10px;
			right:10px;
			height:50px;
			width:50px;
			z-index:9999;
			cursor:pointer;
			border-radius:50%;
			text-align:center;
			font-size:50px; 
			box-shadow:0 8px 16px 0 var(--boxshadow);
		}
		.totop:hover {
			color:var(--lightgray);			
		}
	}
	.footerad {
		grid-area:footerad;
	}
	.headerad {
		grid-area:headerad;
	}
	.sidead {
		grid-area:sidead;
	}
	.headerad iframe,
	.footerad iframe {
		max-width:100%;
		width:100%;
		height:100%;
	}
	.sidead iframe {
		max-height:100%;
		height:100%;
	}
	.footercontainer {       
		grid-area:footercontainer;
		height:fit-content;
		color:var(--color-footercontainer);
		background-color:var(--color-footercontainer-background);
	}
	.footercontainer contact {
		margin-left:20%;
		margin-right:20%;
		padding:10px;
	}
	.maincontainer {
		grid-area:maincontainer;
		color:var(--color-maincontainer);
		background-color:var(--color-maincontainer-background);
	}
	.maincontainer .languagenotfound img {
		height:20px;
	}
	.maincontainer:not(:has(*)),
	.navcontainer:not(:has(*)),
	.sidecontainer:not(:has(*)),
	.footercontainer:not(:has(*)) {
		padding:0;
	}
	.maincontainer,
	.navcontainer,
	.sidecontainer,
	.footercontainer {
		padding:10px;
		/*border:solid 1px var(--lightgray);*/
	}
	.maincontainer:empty,
	.navcontainer:empty,
	.sidecontainer:empty,
	.footercontainer:empty {
		padding:0;
	}
	.navcontainer {
		grid-area:navcontainer;
		height:fit-content;
		color:var(--color-navcontainer);
		background-color:var(--color-navcontainer-background);
	}
	.sidecontainer {
		grid-area: sidecontainer;
		color:var(--color-sidecontainer);
		background-color:var(--color-sidecontainer-background);
	}
}

/* various fundamental classes */
.card {
    border-radius:4px;
    border:1px solid var(--lightgray);
	border-width:1px;
	border-radius:5px;
	box-shadow:0 4px 8px 0 var(--boxshadow);
	margin:10px;
	transition:0.3s;
	background-color:var(--white);
	:hover {
		box-shadow:0 8px 16px 0 var(--boxshadow);
	}
	.cardheader {
		padding:10px; 
		text-align:center;     
	}
	.cardbody {
		border-top:solid;
		border-width:1px;
		text-align:left;
		padding:10px;    
	}
}
.caret {
	float:right;
	.hide {
		display:none;
	}
}
.center {
    text-align:center;
}
.flexcolumn {
    text-align:left;
    display:flex;
    flex-direction:column;
}
.hide {
    display:none;
}
.material {
    font-family:'material';
    font-weight:normal;
    font-style:normal;
    font-size:var(--icon-font-size);
    display:inline-block;
    text-transform:none;
    letter-spacing:normal;
    word-wrap:normal;
    white-space:nowrap;
    direction:ltr;
}
.deletemodal,
.loading,
.modal,
.servicemessage {
	position:absolute;
	z-index:9999999;
	top:0;
	left:0;
	padding-top:40vh;
	min-height:100%;
	min-width:100%;
	text-align:center;
}
.deletemodal {
    color:var(--color-modal);
    background:var(--color-modal-background);
    font-size:300%;
    border-radius:5px;
}
.loading {
    color:var(--color-loading);
    background:var(--color-loading-background);
    font-size:300%;
}
.modal {
	background:var(--color-modal-background);
	span {
		color:var(--color-modal);
		font-size:300%;
	}
}
.servicemessage {
    color:var(--color-service);
    background:var(--color-service-background);
    font-size:300%;
}
.spinner {
    animation-name:pulsar;
    animation-duration:3s;
    animation-iteration-count:infinite;
    transform:rotate(90deg);
}
.pointer {
    cursor:pointer;
}
.left {
    text-align:left;
}
.right {
	float:right;
}
.h100 {
	height:100%;
}
.w10 {
	width:10%;
}
.w20 {
	width:20%;
}
.w25 {
	width:25%;
}
.w30 {
	width:30%;
}
.w33 {
	width:33.3333%;
}
.w40 {
	width:40%;
}
.w50 {
	width:50%;
}
.w60 {
	width:60%;
}
.w66 {
	width:66.6666%;
}
.w70 {
	width:70%;
}
.w75 {
	width:75%;
}
.w80 {
	width:80%;
}
.w90 {
	width:90%;
}
.w100 {
	width:100%;
}

/* font-awesome icons */
.fa-brands {
    font-family:'Font Awesome 6 Brands';
    font-style:normal;
    font-size:var(--icon-font-size);
}
.fa-facebook:before {
    content:"\f09a"; 
}
.fa-instagram:before {
    content:"\f16d"; 
}
.fa-linkedin:before {
    content:"\f0e1";
}
.fa-tiktok:before {
    content:"\e07b";
}
.fa-youtube:before {
    content:"\f167";
}
.fa-telegram:before {
    content:"\f2c6";
}
.fa-snapchat:before {
    content:"\f2ab";
}
.fa-whatsapp:before {
    content:"\f232";
}
.fa-pinterest:before {
    content:"\f0d2";
}
.fa-wechat:before {
    content:"\f1d7";
}
.fa-reddit:before {
    content:"\f1a1";
}
.fa-x:before {
    content:"\e61b";
}
.fa-bluesky:before {
    content:"\e671";
}
.fa-quora:before {
    content:"\f2c4";
}
.fa-microsoft:before {
    content:"\f3ca"; 
}
.fa-google:before {
    content:"\f1a0"; 
}

/* tags */
tags {
    display:block;
	user-select:none;
	--color-tag:var(--color);
	--color-tag-background:white;
	& .header {
		text-align:center;
		color:var(--color-tag-background);
		background-color:var(--color-tag);
		padding:10px;
		cursor:pointer;
		.hide {
			display:none;
		}
	}
	.body {
		margin:0;
		padding:10px;
		background-color:var(--pink);
	}
	.link {
		display:grid;
		grid-template-areas:
		"tagname	image		title		title		arrow"
		"header		header		header		header		header"
		"paragraph	paragraph	paragraph	paragraph	paragraph";
		text-align:left;
		align-items:start;
		margin:3px;
		border:solid 1px var(--color-tag);
		color:var(--color-tag);
		background-color:var(--color-tag-background);
		max-width:100%;
		text-align:left;
		align-self:center;
		justify-self:center;
		.tagname {
			grid-area:tagname;
			font-size:small;
			font-style:italic;
		}
		.image {
			grid-area:image;
			align-self:center;
			justify-self:center;
		}
		.title {
			grid-area:title;
			font-size:x-large;
			font-weight:bold;
			align-self:center;
			justify-self:left;
		}
		.header {
			grid-area:header;
			font-size:medium;
		}
		.paragraph {
			grid-area:paragraph;
			font-size:small;
		}
		.arrow {
			grid-area:arrow;
			align-self:center;
			justify-self:right;
			font-size:large;
		}
	}
	.link {
		:hover,
		:focus,
		:active,
		:visited {
			color:var(--color-tag-background);
			background-color:var(--color-tag);
			opacity:1;
		}
	}
}

/* gigs */
gigs {
    display:block;
    text-align:center;
    .header {
        color:var(--black);
        display:none;
    }
    .banner {
        margin-left:30%;
        margin-right:30%;
        img {
            width:100%;
            height:100%;
            padding:0;
            margin:0;
            border:solid 1px var(--lightgray);
        }
        div {
            padding:10px;
            color:var(--color-background);
            background-color:var(--color);
        }
    }
    .gig {
        margin-left:10%;
        margin-right:10%;
        margin-bottom:10px;
        color:var(--color);
        background-color:var(--color-background);
        border:solid 1px var(--color);
        border-radius:5px;
        .gigheader {
            padding:10px;
            border-top-left-radius:5px;
            border-top-right-radius:5px;
            border-bottom: solid 1px var(--color);
            text-align:center;
            vertical-align:middle;
            color:var(--color-background);
            background-color:var(--color);
            div {
                padding:5px;
            }
            .icon {
                vertical-align:middle;
            }
            .venue {
                font-size:var(--icon-font-size);
                font-weight:bold;
            }
            .city {
                font-weight:bold;
            }
        }
        .gigbody {
            text-align:left;
            padding:10px;
            margin-left:20%;
            margin-right:20%;
            div {
                padding:5px;
            }
        }

    }
    .old {
        opacity:0.2;
    }
    .cancel {
        --color-cancel:#c27087;
        --color-cancel-background:var(--white);
        color:var(--color-cancel);
        border: solid 1px var(--color-cancel);
        .gigheader {
            color:var(--color-cancel-background);
            background-color:var(--color-cancel);
        }
        .gigbody {
            .cancel,
            h3 {
                color:var(--color-cancel);
                background-color:var(--color-cancel-background);
            }
        }
        button {
            color:var(--color-cancel);
            background-color:var(--color-cancel-background);
            :hover,
            :focus {
                color:var(--color-background-cancel);
                background-color:var(--color-cancel);
            }
        }

    }
}

/* slideshow */
slideshow {
    width:100%;
    position:relative;
    display:inline-block;
    margin:0;
    padding:0;
    text-align:center;
    color:var(--color);
    background-color:rgba(162, 26, 37, 0.1);
    filter:grayscale(10%);
    --color-carouselbutton:var(--white);
    --color-carouselbutton-background:var(--color);
    h1 {
        font-style:normal;
    }
    section {
        margin:0;
        padding:0;
        .navbutton {
            position:relative;
            top:10px;
            padding:10px;
            width:2rem;
            height:2rem;
            border-radius:50%;
            color:var(--color-carouselbutton);
            background-color:var(--color-carouselbutton-background);
            text-align:center;
            cursor:pointer;
            z-index:9;	
        }
        .back {
            right:5px;
        }
        .next {
            left:5px;
        }
        .buttons {
            padding:20px;
        }
        .buttons .button {
            display:inline-block;
            text-align:center;
            cursor:pointer;
            color:var(--color-carouselbutton);
            background-color:var(--color-carouselbutton-background);
            border-radius:50%;
            width:16px;
            height:16px;
            padding:10px;
            margin:5px;
            font:16px Arial;
        }
        figure picture {
            filter:grayscale(1%);
        }
        figure picture img {
            width:100%;
        }
        figure figcaption {
            padding:0;
            padding-top:20px;
            padding-bottom:20px;
            font-size:small;
            font-weight:bold;
            font-style:italic;
        }
    }
}

/* registration */
registration {
	padding:0;
	input {
		margin:20px;
	}
	form {
		padding:2%;
		margin-bottom:5px;
		input,
		select {
			padding:10px;
			margin:20px;
		}
		input[type='radio'] {
			cursor:pointer;
		}
	}
	.termsandconditions,
	.privacystatement {
		text-align:left;
		overflow-y:scroll;
		height:100px;
		padding:20px;
		color:var(--black);
		background-color:var(--whitesmoke);
		font-size:70%;
	}
	.files {
		display:none;
	}
	.body {
		margin:20px;
		border:solid 1px lightgray;
		border-radius:5px;
		h3 {
			text-align:center;
		}
	}
	.header {
		text-align:center;
	}
	.error {
		color:var(--red);
	}
}

/* contact */
contact {
	display:block;
	color:var(--color-nav);
	background-color:var(--color-nav-background);
	padding:5px;
	border:1px solid var(--lightgray);
	form input {
		padding:5px;
		margin:5px;
	}
	.error {
		color:var(--red);
	}
	.ok {
		color:var(--blue);
	}
}

/* log */
log {
	display:block;	
}

/* blogs */
blogs {
	display:block;
	padding:0;
	margin:0;
	background-color: var(--color-background);
	.singleblogitem {
		.blog {
			width:90%;
			border:0;
			cursor:default;
			background-image:none !important;
			.blogbody {
				max-height:none;
				height:auto;
			}
		}
		.title {
			display:none;
		}
	}
	.title {
		font-size:x-large;
		font-weight:bold;
		text-align:center;
	}
	.blogs {
		padding:10px;
		display:inline-flex;
		flex-wrap:wrap;
	}
	.blog {
		position:relative;
		width:250px;
		min-height:200px;
		margin:5px;
		/*
		background-repeat:cover;
		background-image:url('/content/images/blogbackground.webp');
		*/
		border:solid 1px var(--lightgray);
		margin-bottom:10px;
		cursor:pointer;
		padding:30px;
		.blogimage {
			display:block;
			margin-top:20px;
			margin-left:auto;
			margin-right:auto;
			width:50%;
		}
		.bloginfo {
			color:var(--darkgray);
			font-size:x-small;
			margin-top:20px;
			margin-bottom:20px;
			svg {
				width:30px;
				height:30px;
				vertical-align:middle;
				circle {
					fill:#cccccc;
				}
				path {
					fill:#a0a09f;
				}
			}

		}
		.blogheader {
			padding:0;
			font-size:large;
			text-align:left;
		}
		.blogbody {
			min-height:200px;
			max-height:200px;
			height:200px;
			overflow:hidden;
		}
		.blogresult {
			color:black;
			font-size:x-small;
			display:block;
			position:absolute;
			bottom:0;
			margin-top:20px;
			margin-bottom:20px;
			.favorite {
				color:var(--red);
			}
			.right {
				text-align:right;
			}
		}
	}
}

/* entities */
entities {
	display:block;
	background-color:var(--color-background);
	padding:10px;
	.files {
		display:none;
	}
	dialog {
		position:fixed;
		top:0;
		bottom:0;
		left:0;
		right:0;
		z-index:999;
		padding-top:40%;
		width:100%;
		height:100%;
		text-align:center;
		opacity:0.9;
		background-color:var(--color-nav-background);
		color:var(--white);
	} 
	.entitiesheader {
		color:var(--color-button);
		background-color:var(--color-button-background);
		padding:10px;
		margin:10px;
		border:solid 1px var(--lightgray);
		border-radius:5px;
		font-size:x-small;
		button {
			border:solid 1px var(--lightgray);
		}
		select {
			color:var(--color-button);
			border:solid 1px var(--lightgray);
			font-size:x-small;
		}
		.retrieve {
			border:solid 1px var(--lightgray);
			border-radius:5px;
			padding:10px;
			.search input {
				width:80%;
				padding:10px;
				border:solid 1px var(--lightgray);
				border-radius:5px;
				color:var(--color-button);
				::placeholder {
					color:var(--lightgray);
				}
			}
		}
	}
	.entityshare {
		padding:10px;
		margin:10px;
		border:solid 1px var(--color-button-border);
		border-radius:5px;	
	}
	pre {
		max-width:300px;
		text-align:left;
	}
	form {
		padding:10px;
		border:solid 1px var(--color-button-border);
		border-radius:5px;
		input {
			width:80%;
			padding:10px;
			border:solid 1px var(--color-button-border);
			border-radius:5px;
		}
		select {
			width:80%;
			margin:10px;
			option {
				padding:10px;
				border:solid 1px var(--color-button-border);
				margin:2px;
			}
		}
		textarea {
			width:80%;
			padding:10px;
			margin:10px;
		}	
	}
	.card {
		.cardheader {
			display:grid;
			grid-template-columns:10% 20% 45% 25%;
			text-align:left;
			cursor:pointer;
			user-select:none;
			.icon {
				color:var(--black);
			}
			.type {
				font-size:xx-small;
				color:var(--black);
			}
			.name {
				font-size:large;
				font-weight:bold;
				text-align:center;
			}
			.caret {
				text-align:right;
				font-size:xx-small;
				color:var(--black);
			}
			:hover,
			:focus,
			:active {
				opacity:0.7;
			}
		}		
	}
}

/* developer dashboard */
developerdashboard {
	width:100%;
	display:block;
	margin:0;
	padding:0;
	min-height:1000px;
	font-size:x-small;
	user-select:none;
	--dashboard-color:var(--color);
	--dashboard-color-background:var(--color-nav-background);	
	--dashboard-button-color:var(--dashboard-color);
	--dashboard-button-color-background:var(--dashboard-color-background);
	--dashboard-button-color-hover:var(--dashboard-color-background);
	--dashboard-button-color-background-hover:var(--dashboard-color);
	--dashboard-border-color:var(--dashboard-color);
	--dashboard-modal-color:var(--dashboard-color);
	--dashboard-modal-color-background:rgb(243,244,246,0.5);
	--color-started:#4caf50;
	--color-stopped:#f44336;
	a {
		min-height:50px;
		min-width:50px;
		margin:5px;
		padding:3px;
	}
	button {
		border:solid 1px var(--dashboard-button-color);
		color: var(--dashboard-button-color);
		background-color: var(--dashboard-button-color-background);
		:hover,
		:active {
			color: var(--dashboard-button-color-hover);
			background-color: var(--dashboard-button-color-background-hover);
		}
		.material.refresh {
			animation: rotation 3s linear infinite;	
		}
	}
	input[type="text"],
	input[type="password"] {
		padding:10px;
	}
	input[type="range"] {
		max-width:max-content;
		cursor:pointer;
	}
	em {
		color:var(--darkgray);
		margin-left:5px;
		margin-right:5px;
	}
	pre {
		color:blue;
		overflow:auto;
	}
	pre,
	table {
		line-height:normal;
	}
	textarea {
		max-width:90%;
		font-size:75%;
	}
	.command {
		padding:0;
		margin:0;
		padding-bottom:10px;
		border:0;
		border-bottom-left-radius:5px;
		border-bottom-right-radius:5px;
		border-top:solid 1px var(--dashboard-border-color);
		box-shadow:0 4px 8px 0 var(--boxshadow);
		transition:0.3s;
		background-color:var(--white);
		.cardheader {
			text-align:left;
			font-weight:bold;
			font-size:large;
			cursor:pointer;
			background-color:var(--dashboard-button-color-background);
			border-radius:5px;
		}
		.cardheader.hide {
			border-bottom-left-radius:5px;
			border-bottom-right-radius:5px;
		}
		.commandheader {
			border-radius:5px 5px 00;
			text-align:center;
			font-weight:bold;
			cursor:pointer;
			:active,
			:focus,
			:hover {
				opacity:0.7;
			}
		}
	}
	[class*="ANGULARSERVER"] .started,
	[class*="BACKENDSERVER"] .started {
		color:var(--color-started);	
	}
	[class*="ANGULARSERVER"] .stopped,
	[class*="BACKENDSERVER"] .stopped {
		color:var(--color-stopped);		
	}
	[class*="ANGULARSERVER"],
	[class*="BACKENDSERVER"] {
		text-align:center;
	}
	[class*="BACKENDSERVER"] .toggle-button {
		vertical-align:middle;
		cursor:pointer;
		height:30px;
		width:70px;
		background:#e0e0e0;
		position:relative;
		border-radius:15px;
		transition:0.2s background, 0.2s box-shadow;
		display:inline-flex;
		border:none;
		padding:0;
		box-shadow:0px 2px 4px rgba(0,0,0,0.125);
		outline:none;
	}
	[class*="BACKENDSERVER"] .toggle-button:hover {
		box-shadow:0px 2px 4px rgba(0,0,0,0.25);
	}
	[class*="BACKENDSERVER"] .toggle-button:focus {
		box-shadow:0px 2px 4px rgba(0,0,0,0.5);
		outline:none;
	}
	[class*="BACKENDSERVER"] .toggle-button .cursor {
		height:30px;
		width:30px;
		border-radius:50%;
		background:white;
		position:absolute;
		top:50%;
		left:50%;
		transition:0.2s left, 0.2s background;
		display:inline-flex;
		align-items:center;
		justify-content:center;
		transform:translate(-50%, -50%) scale(0.8);
		box-shadow:0px 2px 4px rgba(0,0,0,0.15);
	}
	[class*="BACKENDSERVER"] .toggle-button.on {
		background:var(--color-started);
	}
	[class*="BACKENDSERVER"] .toggle-button.off {
		background:var(--color-stopped);
	}
	[class*="BACKENDSERVER"] .toggle-button.on .cursor {
		left:calc(100% - 15px);
	}
	[class*="BACKENDSERVER"] .toggle-button.off .cursor {
		left:15px;
	}
	[class*="BACKENDSERVER"] .toggle-button.on .text-on,
	[class*="BACKENDSERVER"] .toggle-button.off .text-off {
		opacity:1;
	}
	[class*="BACKENDSERVER"] .text-on,
	[class*="BACKENDSERVER"] .text-off {
		color:white;
		opacity:0;
		transition:0.2s opacity;
		position:absolute;
		bottom:0;
		top:0;
		right:0;
		left:0;
		align-items:center;
		display:inline-flex;
		text-transform:uppercase;
	}
	[class*="BACKENDSERVER"] .text-on {
		padding-left:15px;
	}
	[class*="BACKENDSERVER"] .text-off {
		justify-content:flex-end;
		padding-right:15px;
	}
	.ADMINTOOL_GCPSTATUS {
		text-align:center;
		max-width:100%;
		.sliderdiv {
			vertical-align: middle;
			border: 1px;
			text-align: center;
			margin: 5px;
			span {
				user-select: none;
			}
			input {
				vertical-align: middle;
				margin: 10px;
			}
		}
		.slider {
			appearance: none;
			width: 100%;
			height: 15px;
			border-radius: 5px;
			background: var(--opaque);
			outline: none;
			opacity: 0.7;
			transition: opacity .2s;
			:hover {
				opacity: 1;
			}
			::-webkit-slider-thumb {
				appearance: none;
				width: 25px;
				height: 25px;
				border-radius: 5px;
				background: var(--dashboard-button-color);
				cursor: pointer;
			}
			::-moz-range-thumb {
				width: 25px;
				height: 25px;
				background: var(--dashboard-button-color);
				cursor: pointer;
			}
		}
		h1 {
			text-align:center;
		}
		button input {
			vertical-align:middle;
		}
		.svg {
			width:100%;
			max-width:100%;
			svg {
				width:100%;
				overflow:scroll;
				scrollbar-width:10px;
				text.bold {
					font-size:8pt;
					font-weight:bold;
					fill:black;
				}
				text {
					stroke-width:0;
					font-family:Arial,Helvetica,sans-serif;
					font-size:7pt;
					fill:black;
				}
				line {
					stroke-width:0.3;
					stroke:black;
				}
				path {
					cursor:pointer;
					stroke-width:0.1;
					stroke:black;
					opacity:0.8;
					.transparent {
						opacity:0;
						:hover {
							opacity:0.5;
						}
					}

				}
				.address				{fill:rgb(225,232,216);}
				.proxy					{fill:rgb(215,215,194);}
				.urlmap					{fill:rgb(220,187,212);}                  
				.securitypolicy			{fill:rgb(210,230,229);}
				.forwardingrule			{fill:rgb(216,223,232);}
				.rule					{fill:rgb(212,227,248,0.5);}
				.sslcertificate			{fill:rgb(214,187,177);}
				.backendbucket			{fill:rgb(234,249,249);}
				.backendservice			{fill:rgb(246,211,217);}
				.networkendpointgroup	{fill:rgb(237,237,217);}
				.function				{fill:rgb(203,239,203);}
				.appservice				{fill:rgb(240,212,233);}
			}
		}
	}
	.ADMINTOOL_GCP {
		text-align:center;
		.statusitem {
			border:solid;
			border-width:1px;
			border-radius:5px;
			padding:10px;
			margin:5px;
			text-align:left;
			transition:0.3s;
		}
		.logentry {
			text-align:left;
			border:solid;
			border-width:1px;
			border-radius:5px;
			padding:0;
			margin:15px;
			transition:0.3s;
			max-height:200px;
			height:200px;
			scrollbar-width:5px;
			overflow:scroll;
			overflow-x:hidden;
			color:black;
			max-width:100%;
			.header {
				text-align:left;
				padding:10px;
				border-top-left-radius:5px;
				border-top-right-radius:5px;
				border-bottom: solid 1px;
				font-weight:bold;
				.info {
					background-color:#e8f8ff;
				}
				.warning {
					background-color:#fffce8;
				}
				.error {
					background-color:#f14640;
					color:white;
				}
			}
			pre,
			.body {
				padding:10px;
				color:black;
				border:0;
			}
		}
		form {
			display:flex;
			text-align:center;
			width:100%;
		}
		form input {
			margin:5px;
			padding:10px;
			width:100%;
			border-radius:5px;
			border-color:var(--lightgray);
			border-width:0;
			background-color:rgb(244, 232, 234);
		}
	}
	.ADMINTOOL_SECURITY {
		text-align:center;
		padding:5px;
		overflow:auto;
	}
	.ADMINTOOL_SEO {
		padding:5px;
		.googlesearchanalytics button {
			font-weight:bold;
			font-size:larger;
			table td {
				font-size:smaller;
				border:solid var(--color1_ultra_light) 1px;
				padding:2px;
			}
		}
		.googlesearchanalytics table .seoheader td {
			font-size:large;
			padding:3px;
			vertical-align:top;
			cursor:pointer;
		}
		.inspectionresults {
			font-weight:bold;
			small {
				font-weight:lighter;
				margin-right:5px;
			}
		}
		.spokenlanguages .smallbutton {
			width:15%;
		}
	}
	.DATABASEMANAGEMENT_MONGO {
		.tabs {
			text-align:center;
			border-bottom:solid 1px;
			height:61px;
		}
		.tab {
			display:inline-block;
			border:solid 1px;
			border-top-right-radius:5px; 
			border-top-left-radius:5px;
			width:10%;
			height:60px;
			overflow:hidden;
			cursor:pointer;
			margin-left:3px;
			margin-right:3px;
			background-color:var(--dashboard-button-color-background);
			line-height:normal;
			:hover,
			:focus {
				opacity:0.8;
			}
		}
		.tabison {
			border-bottom-color:var(--white);
			background-color:white;
		}
		.tabcontent {
			text-align:center;
			padding:5px;
			button {
				vertical-align:middle;
			}
		}
		.redbutton {
			border-color:red;
			background:rgb(246,234,236);
			color:red;
			:hover {
				border-color:green;
				background:rgb(211,239,211);
				color:green;
			}	
		}
		.greenbutton {
			border-color:green;
			background:rgb(211,239,211);
			color:green;
			:hover {
				border-color:red;
				background:rgb(246,234,236);
				color:red;
			}			
		}
	}
	.EDITCONTENT_EDIT {
		text-align:center;
		padding:5px;
	}
	.EDITCONTENT_HTML {
		text-align:center;
		padding:5px;
	}
	.EDITCONTENT_IMAGES img {
		max-width:50%;
	}
	.EDITCONTENT_MANIFEST {
		text-align:center;
		padding:5px;
	}
	.EDITCONTENT_PALETTE {
		text-align:center;
		.palettesheader {
			padding:5px;
			button {
				padding:5px;
			}
			select {
				padding:10px;
				appearance:none;
				min-width:max-content;
				min-height:max-content;
				font-weight:bold;
				text-align:center;
				border-radius:5px;
				cursor:pointer;
				option {
					padding:10px;
					margin:10px;
					.select {
						color:red;
					}
				}
			}
		}
		.slider {
			text-align:center;
			font-size:small;
			font-weight:normal;
			.slidervalue {
				display:inline-block;
				vertical-align:middle;
				padding:5px;
				margin:5px;
				background-color:white;
				color:darkgray;
				border:solid 1px var(--lightgray);
				border-radius:5px;
				min-width:200px;
				input {
					display:inline-block;
					vertical-align:middle;
					min-width:100px;
				}
				.name {
					display:inline-block;
					text-align:right;
					min-width:60px;
				}
				.value {
					display:inline-block;
					min-width:20px;
				}
				input[type='range'] {
					overflow:hidden;
					::-webkit-slider-runnable-track {
						padding:2px;
						background-color:whitesmoke;
						border:solid 1px var(--lightgray);
						border-radius:5px;
					}
				}
			}
		}
		.palettecolor {
			display:inline-block;
			vertical-align:middle;
		}
		.flex {
			display: flex;
			flex-wrap: wrap;
			border:solid 1px lightgray;
			margin:5px;
		}
		.blockdiv {
			display:inline-block;
			margin:5px;
			padding:10px;
			width:190px;
			height:190px;
			.blocks {
				position:relative;
				.block {
					position:absolute;
					text-align:center;
					border:1px solid darkgray;
					width:80px;
					height:80px;
					font-size:50%;
					padding:5px;
				}
				.color1 {
					left:50px;
					top:50px;
				}
				.color2 {
					left:0px;
					top:0px;
				}
				.color3 {
					left:100px;
					top:0px;
				}
				.color4 {
					left:0px;
					top:100px;
				}
				.color5 {
					left:100px;
					top:100px;
				}
			}
		}
		.textarea textarea {
			display:inline-block;
			background-color:var(--dashboard-button-color-background);
			border-radius:5px;
			padding:5px;
		}
	}
	.GENERATECONTENT {
		max-height:400px;
		height:400px;
		scrollbar-width:5px;
		overflow:scroll;
		overflow-x:hidden;
		div.item {
			padding:5px;
			border:solid 1px var(--dashboard-border-color);
			border-radius:5px;
			margin:5px;
		}
	}
	.HQSERVER_GCP,
	.HQSERVER_INFO,
	.HQSERVER_MONGO,
	.HQSERVER_NETWORK,
	.HQSERVER_NODE,
	.HQSERVER_OPENSSL,
	.HQSERVER_SECURITY,
	.HQSERVER_START,
	.HQSERVER_STARTHTTP2 {
		padding:10px;
	}
	.HQSERVER_HQROUTER {
		padding:10px;
	}
	.HQSERVER_NPM {
		padding:10px;
	}
	.HQSERVER_PROXY {
		padding:10px;
	}
	.HQSERVER_VIEW {
		padding:10px;
	}
	.card {
		border:solid 1px var(--dashboard-border-color);
	}
	.dialog {
		color:var(--color);
		text-align:center;
		max-width:80%;
		button .material {
			font-size:x-small;
		}
		div,
		pre {
			text-align:left;
		}
	}
	.file-input {
		display:none;
	}
	.floatleft {
		float:left;
	}
	.error {
		position:absolute;
		text-align:center;
		cursor:pointer;
		color:white;
		background-color:red;
		z-index:9999;
		top:50%;
		left:50%;
		min-height:100vh;
		min-width:100vw;
		margin:0;
		margin-top:-50vh;
		margin-left:-50vw;
		padding:0;
		padding-top:40vh;
		opacity:0.8;
		.cancel {
			font-size:xx-large;
			margin:20px;
		}
		.description {
			font-size:medium;
			font-weight:bold;
		}
	}
	.left {
		text-align:left !important;
	}
	.material {
		margin:1px;
		font-size:medium;
	}
	.modal {
		position:absolute;
		z-index:9999999;
		top:0;
		left:0;
		padding-top:40vh;
		min-height:100%;
		min-width:100%;
		text-align:center;
		background:var(--dashboard-modal-color-background);
		span {
			font-size:500%;
			animation:rotation 3s linear infinite;
			color:var(--dashboard-modal-color);
		}
	}
	.right {
		float:right;
	}
	.scrollbar {
		max-height:400px;
		height:400px;
		scrollbar-width:5px;
		overflow:scroll;
		overflow-x:hidden;
	}
	.user {
		text-align:center;
		border:solid 1px var(--dashboard-color);
		color:var(--dashboard-color);
		margin:0;
		margin-bottom:10px;
		.userselectionheader {
			text-align:center;
			.logo {
				float:left;
				font-weight:bold;
				font-style:italic;
			}
		}
		.cardbody {
			text-align:center;
		}
		.selection {
			button {
				padding:5px;
			}
			.select {
				opacity:1;
				position:relative;
				display:inline-block;
				width:300px;
				max-width:100%;
				padding:0;
				margin:5px;
				z-index:20;
				button {
					width:100%;
					margin:0;
					font-size:medium;
					padding:5px;
					.noradius {
						border-bottom-left-radius:0;
						border-bottom-right-radius:0;
						border-bottom:0;
					}
				}
				ul {
					z-index:9;
					position:absolute;
					top:100%;
					left:0;
					width:calc(100% - 2px);
					max-height:300px;
					padding:0;
					margin:0;
					border:1px solid var(--lightgray);
					border-top:0;
					border-radius:0.25rem;
					border-top-left-radius:0;
					border-top-right-radius:0;
					list-style:none;
					box-shadow:0 10px 25px var(--boxshadow);
					overflow-y:auto;
					scrollbar-width:none;
					background-color:var(--dashboard-color-background);
					.reset {
						cursor:pointer;
					}
					li {
						padding:10px;
						margin:10px;
						cursor:pointer;
						font-size:small;
						text-align:left;
						border:solid 1px var(--dashboard-button-color-background);
						color:var(--dashboard-button-color);
						background-color:var(--dashboard-button-color-background);
						:hover,
						:focus,
						.selected {
							color:var(--dashboard-button-color-hover);
							background-color:var(--dashboard-button-color-background-hover);
							border-radius:5px;
						}
					}
				}
				.selectpreferences {
					z-index:21;
				}
				.selectperspectives {
					z-index:20;
				}
				.selectenvironment {
					z-index:19;
				}
				.selectproduct {
					z-index:18;
				}
				.selecttool {
					z-index:17;
				}
				.selectcommand {
					z-index:16;
				}
				.subitem {
					margin-top:5px;
					padding:5px;
					border-radius:4px;
					border:solid 1px var(--dashboard-border-color);
					color:var(--dashboard-button-color);
					background-color:var(--dashboard-button-color-background);
					cursor:pointer;
					:hover,
					:focus,
					:active {
						opacity:0.8;
						color:var(--dashboard-button-color-hover);
						background-color:var(--dashboard-button-color-background-hover);
					}
				}
			}			
		}
		.selectionresult {
			padding-top:10px;
			button {
				color:var(--dashboard-button-color-background);
				background-color:var(--dashboard-button-color);
				:hover,
				:active {
					color:var(--dashboard-button-color);
					background-color:var(--dashboard-button-color-background);
				}
			}
			.selected {
				margin-left:5px;
				color:var(--lightgreen);
				font-style:italic;
				font-size:xx-small;
			}
		}
	}
}

/* demomodel */
demomodel {
	display:block;
	padding:5px;
}

/* model */
model {
	margin:0;
	margin-top:20px;
	padding:0;
	height:100%;
	color:var(--color-button);
	background:var(--color-button-background);
	border: solid var(--black);
	border-width:1px;
	border-radius:5px 5px 5px 5px;
	display:block;
	user-select:none;
	--color-background-gray:rgb(248,246,246);
	--canvas:var(--white);
	--palet:var(--color1_ultra_light);
	.business {
		color:#808000;
		background:#ffff80;
		stroke:#333300;
		fill:#ffff33;
	}
	.business .offset0 {
		stop-color:#333300;
		stop-opacity:1;	
	}
	.business .offset100 {
		stop-color:#ffff33;
		stop-opacity:1;	
	}
	.strategy {
		color:#806600;
		background:#ffe680;
		stroke:#332900;
		fill:#ffcc00;
	}
	.strategy .offset0 {
		stop-color:#332900;
		stop-opacity:1;	
	}
	.strategy .offset100 {
		stop-color:#ffcc00;
		stop-opacity:1;	
	}
	.application {
		color:#004080;
		background:#80bfff;
		stroke:#001a33;
		fill:#0080ff;
	}
	.application .offset0 {
		stop-color:#001a33;
		stop-opacity:1;	
	}
	.application .offset100 {
		stop-color:#0080ff;
		stop-opacity:1;	
	}
	.technology {
		color:#2a8000;
		background:#aaff80;
		stroke:#113300;
		fill:#55ff00;
	}
	.technology .offset0 {
		stop-color:#113300;
		stop-opacity:1;	
	}
	.technology .offset100 {
		stop-color:#55ff00;
		stop-opacity:1;	
	}
	.physical {
		color:#206020;
		background:#8cd98c;
		stroke:#0d260d;
		fill:#40bf40;
	}
	.physical .offset0 {
		stop-color:#0d260d;
		stop-opacity:1;	
	}
	.physical .offset100 {
		stop-color:#40bf40;
		stop-opacity:1;	
	}
	.motivation {
		color:#552b55;
		background:#d4aad4;
		stroke:#221122;
		fill:#aa55aa;
	}
	.motivation .offset0 {
		stop-color:#aa55aa;
		stop-opacity:1;	
	}
	.motivation .offset100 {
		stop-color:#ffcc00;
		stop-opacity:1;	
	}
	.implementationandmigration {
		color:#80004c;
		background:#ff80cc;
		stroke:#33001f;
		fill:#ff0099;
	}
	.implementationandmigration .offset0 {
		stop-color:#33001f;
		stop-opacity:1;	
	}
	.implementationandmigration .offset100 {
		stop-color:#ff0099;
		stop-opacity:1;	
	}
	.other {
		color:#404040;
		background:#bfbfbf;
		stroke:#1a1a1a;
		fill:#808080;
	}
	.other .offset0 {
		stop-color:#1a1a1a;
		stop-opacity:1;
	}
	.other .offset100 {
		stop-color:#808080;
		stop-opacity:1;
	}
	.otherrelationships,.influencerelationships,.dependencyrelationships,.structuralrelationships,.dynamicrelationships {
		color:gray;
		background:#eee;
		stroke:gray;
		fill:red;
	}
	.card {
		margin:5px;
	}
	.tooltip {
		z-index:99999999;
		position:absolute;
		visibility:hidden;
		top:10px;
		padding:5px;
		margin-top:40px;
		margin-left:40px;
		color:var(--white);
		background-color:var(--black);
	}
	.tooltipbutton {
		cursor:pointer;
	}
	.error {
		color:var(--red);
		padding:10px;
		text-align:center;
	}
	.shadowwrapper {
		position:relative;
		display:inline-block;
		z-index:1;
		width:100%;
	}
	.modelheader {
		text-align:center;
		color:var(--color-dark);
		background:var(--color-light);
		border-top-left-radius:5px;
		border-top-right-radius:5px;
		padding:10px;
		z-index:1;
	}
	.modelheader::before,.modelheader::after {
		position:absolute;
		z-index:-1;
		content:"";
		width:50%;
		bottom:1.5rem;
		box-shadow:0 0.5rem 0.5rem 0.5rem gray;
	}
	.modelheader::before {
		left:0;
		transform:rotate(-5deg);
	}
	.modelheader::after {
		left:50%;
		transform:rotate(5deg);
	}
	.modelheader:hover,.modelheader:focus {
		box-shadow:0 8px 16px 0 var(--lightblue);
	}
	.modelheader .tooltipbutton {
		color:var(--color-dark);
	}
	.modelheader .tooltipbutton:hover, .tooltipbutton:focus {
		color:var(--black);
	}
	.selected {
		color:var(--lightblue);
	}
	.selection {
		cursor:pointer;
	}
	.selection .selectors select {
		margin:5px;
		min-width:150px;
	}
	.selection option {
		color:var(--color-button);
		background:var(--color-button-background);
		font-weight:bold;
		cursor:pointer;
		min-height:30px;
		margin:5px;
		padding:3px;
	}
	.selection option:hover {
		color:var(--color-button-background);
		background:var(--color-button);
	}
	.selectedresult {
		color:var(--color-button-background);
		margin:15px;
		cursor:pointer;
	}
	.svgcanvas {
		z-index:999999;
		position:absolute;
		top:0;
		left:0;
		margin:0;
		padding:0;
		fill:var(--canvas);
		cursor:pointer;
	}
	.svgcanvas .gridpattern {
		stroke:#fff;
		stroke-width:0.5em;
	}
	.svgcanvas .canvasline {
		cursor:grab;
	}
	.svgcanvas .canvasobject {
		cursor:move;
	}
	.svgcanvas .canvasobjectresize {
		cursor:nwse-resize;
		stroke-width:0;
		stroke:#000000;
		fill:transparent;
	}
	.palet {
		z-index:9999999;
		position:fixed;
		top:0;
		left:0;
		height:50px;
		background-color:var(--palet);
		border:1px solid var(--lightgray);
		padding:5px;
	}
	.palet .material {
		padding-left:10px;
		padding-right:5px;
	}
	.palet .modelsave {
		font-size:xx-large;
		color:var(--lightblue);
	}
	.palet .modelimportfiles {
		display:none;
	}
	.palet .fileinput {
		display:none;
	}
	.palet .muted {
		color:var(--lightblue);
	}
	.palet input,select {
		margin:0 !important;
		vertical-align:middle;
	}
	.palet .canvasselector {
		position:fixed;
		top:51px;
		left:132px;
		border:solid 1px var(--darkgray);
		border:0;
		background-color:var(--palet);
		margin:0;
		width:200px;
		max-width:200px;
		max-height:200px;
		overflow:scroll;
	}
	.palet .canvasselector .selectelement {
		padding:5px;
		cursor:pointer;
		font-size:small;
		font-weight:bold;
	}
	.palet .objectattributes {
		z-index:99999;
		position:fixed;
		top:100px;
		right:0;
		width:40%;
		max-width:400px;
		border:solid 1px var(--darkgray);
		background-color:var(--palet);
		padding:10px;
	}
	.palet .objectattributes table {
		font-size:x-small;	
	}
	.palet .objectattributes table input,select {
		vertical-align:middle;
		padding:0;
		margin:0;
		height:20px;
		max-height:20px;
	}
	.viewsdiagram svg {
		max-width:500px;
		max-height:500px;
	}
	.viewlandscapetable button {
		padding:2px;
	}
	.viewlandscapetable td {
		font-size:x-small;
		text-align:center;
		vertical-align:middle;
		height:100px;
		width:100px;
		min-width:200px;
		max-width:200px;
	}
	.viewlandscapetable td:empty {
		background:var(--color-background-gray);
	}
	.viewpointfilter {
		padding:10px;
		border:solid 1px var(--lightgray);
		margin:5px;
		display:inline-block;
		vertical-align:top;
	}
	.element {
		padding:10px;
		margin:5px;
		border:solid 1px var(--lightgray);
		border-radius:5px;
	}
	.filters {
		padding:10px;
		border:solid 1px var(--lightgray);
		vertical-align:middle;
		margin-bottom:5px;
	}
	input,select {
		color:var(--color-button);
		padding:10px;
		margin:20px;
		max-width:150px;
	}
	input[type="range"] {
		max-width:max-content;
		cursor:pointer;
	}
	option:checked,option:active,option:hover,option:focus {
		color:var(--white);
		background-color:var(--lightgray);
	}
	option:not(:checked) {
		color:var(--white);
		background-color:var(--gray);
	}
	.card .cardheader {
		display:grid;
		grid-template-columns:10% 20% 45% 25%;
		text-align:left;
		cursor:pointer;
		user-select:none;
	}
	.card .cardheader .icon {
		color:var(--black);
	}
	.card .cardheader .type {
		font-size:xx-small;
		color:var(--black);
	}
	.card .cardheader .name {
		font-size:large;
		font-weight:bold;
		text-align:center;
	}
	.card .cardheader .caret {
		text-align:right;
		font-size:xx-small;
		color:var(--black);
	}
	.card .cardheader:hover,.cardheader:focus,.cardheader:active {
		opacity:0.7;
	}
}

/* song */
song {
	display:block;
    background-color:var(--white);
    background:rgb(238,232,236);
    border:solid 1px var(--lightgray);
    border-radius:5px;
    padding:10px;
	pre {
		color:black;
		white-space:pre-line;
		max-width:300px;
		overflow:auto;
	}
	.ireal
	.fermata,
	.coda,
	.segno {
		font-family:bravura;
		position:absolute;
		color:var(--black);
		padding:2px;
		vertical-align:super; 
		top:-50px;
		left:10px;
		font-size:60%;
	}
	.ireal{
		line-height:normal;
		font-size:20pt;
		padding:0;
		padding-left:5%;
		span {
			background:hsl(0, 0%, 96%,0.5);
			padding:2px;
			vertical-align:baseline;
		}
		.beat {
			position:relative;
			left:7px;
			top:25px;
			font-size:30%;
			display:none;
			color:purple;
		}
		.chord {
			font-family:chords;
			color:var(--black);
			padding:5px;
		}
		.largefont {
			font-size:110%;
		}
		.smallfont {
			font-size:90%;
		}
		.relative {
			padding:0px;
			position:relative;    
		}
		.section {
			position:absolute;
			border-radius:2px;
			padding:4px;
			left:-30px;
			background:var(--black);
			color:var(--white);
			font-size:70%;
		}
		.comment {
			position:absolute;
			white-space:nowrap;
			color:var(--black);
			font-size:50%;
		}
		.nothing,
		.repeat,
		.repeatDot,
		.repeatBarSlash,
		.repeat1Measure,
		.repeat2Measures,
		.repeatLeft,
		.repeatRight,
		.endMeasure,
		.barlineDouble,
		.barlineDoubleLeft,
		.barlineDoubleRight, 
		.barlineSingle {
			font-family:bravura;
		}
		.repeat,
		.repeatDot,
		.repeatBarSlash {
			color:var(--lightgray) !important;
		}
		.repeat {
			color:var(--purple) !important;
		}
		.repeatDot {
			color:var(--red) !important;
		}
		.endMeasure {
			color:var(--blue) !important;
		}
		.barlineSingle {
			color:var(--gold) !important;
		}
		.repeatBarSlash {
			color:var(--green) !important;
		}
		.alternative {
			color:var(--black);
			position:relative;
			padding:0;
			.number {
				top:-10px;
				left:10px;
				position:absolute;
				font-size:50%; 
			}
			.barlineShort {
				font-family:bravura;
				position:absolute;
				top:-38px;
				padding:0;   
			}
			.staff1LineWide {
				font-family:bravura;
				position:absolute;
				top:-51px;
			}
		}
		.timesignature {
			position:relative;
			left:4px;
			top:-10px;
			color:var(--black);
			font-family:bravura;
			padding:2px;
			width:30px;
			padding-right:30px;
			.numerator {
				position:absolute;
				left:0;
				top:-12px;    
			}
			.denominator {
				position:absolute;
				left:0;
				top:12px;    
			}
		}
	}
	.songbuttonbar {
		background-color:none;
		padding:5px;
		.saveicon {
			font-size:xx-large;
		}
		.saving {
			color:var(--orange);
			animation:blinker 1s linear infinite;
		}
		.saved {
			color:var(--green);
		}
	}
	.submenu {
		z-index:9999;
		position:fixed;
		top:30%;
		left:40vw;
		width:20vw;
		padding:15px;
		text-align:center;
		color:var(--color-modal);
		background:var(--color-modal-background);
		background:azure;
		border-style:solid;
		border-width:1px;
		border-color:black;
		border-radius:10px;
		box-shadow:50px 25px 50px 50px var(--boxshadow);
	}
	.tog {
		color:var(--color);
		.true {
			background-color:var(--color-nav-background);
		}
		.false {
			color:var(--color);
		}
		:hover {
			background-color:var(--color-background);
		}
	}
	.songstructure {
		padding:20px;
		background:var(--white);
		border-style:solid;
		border-width:1px;
		border-radius:10px;
		border-color:var(--lightgray);
		span {
			vertical-align:baseline;
			margin:0;
			padding:0;
		}
		.bb {
			cursor:grab;
			:hover {
				background-color:rgba(248, 248, 238, 0.788);
			}
		}
		.title {
			font-family:realbook2;
			text-align:center;
			color:var(--black);
		}
		.structure {
			background:var(--white);
			color:var(--black);
			margin:5px;
			padding:5px;
			border-style:solid;
			border-width:1px;
			border-color:var(--white);
			:hover {
				border-color:var(--lightgray);
			}
			.structurename {
				width:fit-content;
				padding:5px;
				color:var(--white);
				background-color:var(--black);    
			}
		}
		.bar {
			font-family:bravuratext;
			font-size:300%;
			position:relative;
			left:0;
			top:0;
			padding-top:15px;
			padding-bottom:25px;
			border-style:solid;
			border-width:1px;
			border-color:var(--white);
			:hover {
				background-color:rgba(245, 245, 245, 0.674);
				border-color:var(--lightgray);    
			}
		}
		.clef {
			font-size:100%;
			margin-left:5px;
			margin-right:10px;
		}
		.measure {
			position:relative;
			left:0;
			padding-bottom:20px;
			:hover {
				background-color:rgba(240, 255, 255, 0.696);
			}
		}
		.beat {
			position:relative;
			margin:0;
			padding:0;
			:hover {
				background-color:rgba(144, 238, 144, 0.236);
			}
		}
		.staff {
			color:lightgray;
		}
		.event {
			z-index:100;
			left:0;
			top:0;
			:hover {
				background-color:rgba(255, 217, 0, 0.299);
			}
		}
		.time {
			position:absolute;   
		}
		.temposign {
			position:absolute;
			font-size:40%;
		}
		.bpm {
			position:absolute;
			top:0;
			left:10px;
			font-size:20%;
		}
		.numerator {
			font-family:bravuratext;
			font-size:60%;
			position:absolute; 
			transform:translateY(5%);
		}
		.denominator {
			font-family:bravuratext;
			font-size:60%;
			position:absolute; 
			transform:translateY(50%);
		}
		.note {
			position:absolute;
			font-family:bravuratext;
			color:black;
			margin-left:5px;
		}
		.rest {
			position:absolute;
			font-family:bravuratext;
			color:black;
			margin-left:5px;
		}
		.symbol {
			position:absolute;
			font-family:bravura;
			font-size:50%;
			transform:translateY(50%);
			color:gray;
		}
		.chord  {
			position:absolute;
			font-family:chords;
			font-size:50%;
			transform:translateY(-70%);
			color:black;
			white-space:nowrap;
		}
		.lyrics {
			position:absolute;
			font-family:lyrics;
			font-size:50%;
			color:black;
			transform:translateY(200%);
			white-space:nowrap;
		}
		.text {
			position:absolute;
			font-size:30%;
			color:black;
			transform:translateY(-200%);
			white-space:nowrap;
		}
		.dragover {
			background-color:pink;
			opacity:0.2;
		}
	}
}

.keyboard {
    font-family:keyboard;
    color:var(--black);
	font-size:100%;
    font-weight:normal;
    text-rendering:optimizeLegibility;
}
.guitar {
	font-family:guitar;
    font-size:200%;
    font-weight:normal;
    color:var(--black);
    display:inline-flex;
}
.drums {
	font-family:drums;
    font-size:50%;
    font-weight:normal;
	color:var(--black);
}
.keyboardscale {
	font-family:keyboard;
	font-size:250%;
    font-weight:normal;
}
.chordmenu {
    text-align:center;
    padding:20px;
	select {
		font-size:120%;
	}
}
.chordresult {
	button {
		vertical-align:text-top;
		line-height:2;
		text-align:center;
	}
	.keyboard {
		font-size:500%;
	}
	.drums {
		font-size:500%;
	}
	.guitar {
		font-size:700%;
	}
}
.chords {
	font-family:chords;	
	font-size:400%;
    font-weight:normal;
	color:black;	
}
.bravuratext {
    color:black;
	font-family:bravuratext;
    font-size: 40pt;
    font-weight: 300;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-font-feature-settings: "liga" 1, "dlig" 1, "kern" 1, "salt" 1;
    -ms-font-feature-settings: "liga", "dlig";
    -webkit-font-feature-settings: "liga", "dlig";
    -o-font-feature-settings: "liga", "dlig";
    font-feature-settings: "kern", "liga", "dlig", "salt";
    text-rendering: optimizelegibility;
}
.bravuratext2 {
	font-family:bravuratext;
    font-size:80pt;
	color:purple;
	span {
		position:relative;
	}
}
.bravuratext3 {
	font-family:bravuratext;
    font-size:80pt;
	color:red;
	span {
		position:absolute;
	}
}
.bravura {
	font-family:bravura;
    font-size:35px;
	font-size:300%;
	color:black;
    /*
    font-feature-settings:'kern','liga','dlig','salt';
    text-rendering:optimizelegibility;
    */
}
.musicnotation {
	font-family:musicnotation;
	font-size:300%;
	color:black;
}
.lyrics {
	font-family:lyrics;
}
.realbook {
	font-family:realbook;
}
.realbook1 {
	font-family:realbook1;
}
.realbook2 {
	font-family:realbook2;
}
.realbook3 {
	font-family:realbook3;
}

.print {
    border-width:0;
    songstructure {
        border-width:0;
    }
}

.audiovideodiv {
    padding:20px;
    background-color:rgb(94, 81, 94);
    color:rgb(236, 221, 236);
    border:1px solid black;
    border-radius:5px;
	select {
		padding:10px;
		border-radius:5px;
	}
	button {
		color:rgb(94, 81, 94);
		background-color:var(--white);
		:focus,
		:active,
		:hover {
			color:rgb(236, 221, 236);
			background-color:rgb(94, 81, 94);    
		}
	}
}
.audiovideolink,
.audiovideoform {
    background-color:rgb(236, 221, 236);
    color:rgb(94, 81, 94);
    margin-top:10px;
    padding:20px;
    border:1px solid black;
    border-radius:5px;
}
.link {
    border:0;
    margin:0;
    width:500px;
    padding:10px;
	video,
	audio {
		border-radius:10px;    
	}
	figcaption {
		font-weight:bold;
		padding:5px;
	}
}
.linkmp3 {
    height:50px;
}
.linkmp4 {
    height:200px;
}
.linkyoutube {
    height:400px;
    border-radius:12px;
}
.linkspotify {
    height:300px;
}
.linksoundcloud {
    height:200px;
}

/* specific styles for dbs8 chillax */
.lovetoplay {
    color:var(--color);
    font-size:150%;
	font-size:var(--icon-font-size);
    font-style:italic;
}
img {
    filter: grayscale(40%);
}
.smallimage {
    margin-left:10%;
    max-width:80%;
    margin-right:10%;
    img {
        max-width: 300px;
        margin: auto;
        border-radius: 25px;
    }
}
/* original chillax legacy site styles*/
.container {
	background: url('https://dbs8static.duboishq.nl/content/images/logo_pink.png');
	background-attachment: fixed;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
	margin-top: 100px;
	margin-bottom: 100px;
	padding: 20px 120px;
    text-align: center;
    ul {
        text-align:left;
    }
    iframe,
    iframe audio,
    iframe video {
        max-width:300px;
    }
    .rounded-circle	{
        height: 200px;
        margin-top: 10px;
        margin-bottom: 10px;
        border-radius: 50%;
        filter: grayscale(15%);
    }
    .news {
        background-color: var(--color);
        color: var(--white);
        border-radius: 25px;
        padding: 10px;
    }
    .footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        opacity: 0.8;
        color: var(--nav-color);
        background-color: rgba(181,85,85,0.7);
        text-align: center;
        padding: 5px;	
    }
    .carousel-inner img {
        filter: grayscale(15%);
        max-width: 300px;
        margin: auto;
        border-radius: 25px;
    }
    .carousel-caption h3 {
        color: #fff !important;
    }
}
.navbar {
	opacity: 0.3;
    .navbar-toggler {
        display:none;
    }
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
@keyframes blink {
	50% {
	  opacity: 0.0;
	}
}
@keyframes pulsar {
    from {
        font-size:100%;
    }
    50% {
        transform:rotateX(90deg);
    }
    to {
        width:100%;
    }
}
@keyframes rotation {
	0% {
		transform:rotate(0deg);
	}
	100% {
		transform:rotate(360deg);
	}
}
@keyframes slide {
	from {
		transform:scale(0);
	}
	to {
		transform:scale(100%);
	}
}
@font-face {
	font-family:realbook;
	src:url('./fonts/realbook.woff');
}
@font-face {
	font-family:realbook1;
	src:url('./fonts/realbook1.ttf');
}
@font-face {
	font-family:realbook2;
	src:url('./fonts/realbook2.ttf');
}
@font-face {
	font-family:realbook3;
	src:url('./fonts/realbook3.ttf');
}
@font-face {
	font-family:lyrics;
	src:url('./fonts/lyrics.ttf');
}
@font-face {
	font-family:musicnotation;
	src:url('./fonts/musicnotation.ttf');
}
@font-face {
	font-family:chords;
	src:url('./fonts/chords.ttf');
}
@font-face {
	font-family:guitar;
	src:url('./fonts/guitar.ttf');
}
@font-face {
	font-family:keyboard;
	src:url('./fonts/keyboard.ttf');
}
@font-face {
	font-family:drums;
	src:url('./fonts/drums.ttf');
}
@font-face {
 	font-family:bravura;
	src:url('./fonts/bravura.woff');
}
@font-face {
    font-family:bravura2;
   src:url('./fonts/bravura.woff2');
}
@font-face {
	font-family:bravuratext;
	src:url('./fonts/bravuratext.woff');
}
@font-face {
	font-family:bravuratext2;
	src:url('./fonts/bravuratext.woff2');
}
@font-face {
	font-family:bravuraotf;
	src:url('./fonts/bravura.otf');
}
@font-face {
	font-family:bravuratextotf;
	src:url('./fonts/bravuratext.otf');
}
@font-face {
    font-family:'Font Awesome 6 Brands';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url('./fonts/brands.woff2') format('woff2');
}
@font-face {
    font-family:material;
    font-style:normal;
    font-display:swap;
    src:url('./fonts/material.woff2') format('woff2')
}
@font-face {
    font-family:agendaflyer;
    font-style:normal;
    font-display:swap;
    src:url('./fonts/PTSans.ttf') format('TrueType');
}
@media (min-width:0px) {
	.grid {
		display:grid;
		height:100vh;
		min-height:100vh;
		grid-template-columns:minmax(0%,100%);
		grid-template-areas:
		"nav"
		"headerad"
		"navcontainer"
		"maincontainer"
		"sidecontainer"
		"sidead"
		"footercontainer"
		"footerad"
		"footer";
		nav {
			.spacer,
			.navlink {
				display:none;
			}
			.navmenu {
				display:block;
			}			
		}
	}
}
@media (min-width:800px) {
	body {
		font-size:110%;
		font-size:100%;
	}
	.grid {
		grid-template-columns:10% minmax(0,80%) minmax(0,auto) minmax(0,auto) 10%;
		grid-template-areas:
		"nav 		nav 				nav 				nav 				nav"
		".          headerad			headerad			headerad			."
		".          navcontainer        navcontainer        navcontainer        ."        
		".          maincontainer       sidecontainer       sidead				."
		".          footercontainer     footercontainer     footercontainer     ."
		".          footerad			footerad			footerad			."
		"footer	    footer	            footer              footer              footer";
		.nav .navmenu {
			display:block;
		}
		.nav,
		.footer {
			padding-left:10%;
			padding-right:10%;
		}
	}
}
@media (min-width:1440px) {
	body {
		font-size:120%;
		font-size:100%;
	}
	.grid {
		grid-template-columns:20% minmax(0,60%) minmax(0,auto) minmax(0,auto) 20%;
		nav {
			.spacer,
			.navlink,
			.navmenu {
				display:block;
			}			
		}
		nav,
		footer {
			padding-left:20%;
			padding-right:20%;
		}
	}
}
@media print {
    .cardheader,
    .navcontainer,
    .maincontainer,
    .sidecontainer,
    .footercontainer,
    nav,
	footer,
    button {
        display:none;
    }
    body {
        margin:0;
        padding:0;
    }
    .card,
	.cardbody {
        border-style:none;
        border-width:0;
        border-radius:0;
        box-shadow:none;
        margin:0;
        padding:0;        
    }
    .card:hover {
        box-shadow:none;        
    }
}