:root{
    --dash-bg: rgb(0 0 73);
    --dash-color: white;
    --form-input-bg: rgb(200,200,200);
    --form-input-color: black;
    --validation-bg: rgb(20,200,20);
    --success-bg: rgb(0,255,0);
    --fmgr-bg: rgb(37 37 80);
    --fmgr-hf-bg: #0a0d1d;
    --fmgr-hf-color: white;
    --fmgr-b-el-bd: #8b8dac solid;
    --fmgr-b-color: white;
    --fmgr-b-color-contrast: rgb(160,200,200);
    --formedit-bg: white;
    --formedit-color: black;
    --formedit-font: math;
    --other-bg: #121225;
    --dashheaderbg:#123456;
    --selection-color: rgb(30,30,30);
    --selection-bg-color: rgb(220,220,220);
}
body{
    background-color:var(--body-bg);
    margin:0;
    width:100%;
    height:100vh;
}
i.indicator{
    display:inline-block;
    width:1em;
    height:1em;
    background:red;
    border-radius:100%;
    &.red{
	background: red;
    }
    &.green{
	background:green;
    }
    &.orange{
	background:orange;
    }
}
.blogdash{
    background-color:var(--dash-bg);
    color:var(--dash-color);
    width:100%;
    min-height:calc(100%);
    display:flex;
    flex-direction:column;
    a{
	color:var(--fmgr-b-color);
	&:active, &:visited{
	    color:var(--fmgr-b-color-contrast);
	}
	&:hover{
	    filter:brightness(60%);
	}
    }
}
.blogdash-header{
    display:none;
}
.blogdash-footer{
    display: none;
}
.blogdash-main{
    flex: 2 0;
}
/*select option:checked:after {
content: attr(title);
background: red;
color: yellow;
position: absolute;
width: 100%;
left: 0;
border: none;
}*/
    .blogdash input, .blogdash select{
	width:80%;
	background-color:var(--form-input-bg);
	color:var(--form-input-color);
	min-height:50px;
	outline:none;
    }
    .blogdash option{
	color:var(--form-input-color);
	background-color:var(--form-input-bg);
    }
    /*.blogdash option:checked{
    color:var(--form-input-color);
    background-color:var(--dash-bg);
    }*/
    form.filterform{
	position: relative;
	background-color: var(--fmgr-bg);
	width: 80%;
	display: flex;
	border-radius: 10px;
	flex-direction: column;
	left: 50%;
	transform: translate(-50%, 0%);
	align-items: center;
	justify-content: space-around;
	button{
	    width:80%;
	    padding:10px;
	}
	label{
	    width:calc(80% - 20px);
	    border-radius:10px;
	    padding:10px;
	    background-color:var(--dashheaderbg);
	    text-align:center;
	}
    }
    form.blogchoice{
	align-self:center;
	width:100%;
	height:100%;
	justify-content:center;
	display:flex;
	flex-direction:column;

	select.blogchoice_select{
	    align-self:center;
	    border-radius:10px;
	    text-align: center;
	}
	button.blogchoice_button{
	    font-weight:bold;
	    font-size:120%;
	    background:var(--dash-bg);
	    color:var(--validation-bg);
	    border:2px solid var(--validation-bg);
	    border-radius: 10px;
	    padding:20px;
	    width:calc(80% - 20px);
	    align-self:center;
	}
	button.blogchoice_button:hover{
	    background:var(--validation-bg);
	    color:var(--dash-bg);
	}
	button.blogchoice_button:active{
	    background:radial-gradient(top left, #130355 20%,  #6766c4 30%)
	}
    }
    .form input, .form select{
	width:100%;
	background-color:lightgrey;
	height:50px;
	border:dashed 2px darkblue;
	outline:none;

    }
    .blogdash .tableresponsive{
	overflow:auto;
	width:100%;
    }
    .blogdash table.explorer{
	width:100%;
	background: var(--fmgr-bg);
	border-collapse:collapse;
	thead, tfoot{
	    text-align:center;
	    background-color:var(--fmgr-hf-bg);
	    color:var(--fmgr-hf-color);
	}
	thead td,tfoot td{
	    text-align:center;
	    padding:10px;
	}
	tbody{
	    overflow:auto;
	    color:var(--fmgr-b-color);
	}
	tbody tr{
	    border-bottom: var(--fmgr-b-el-bd);
	    border-top:var(--fmgr-b-el-bd);
	}
	tbody td:not(:first-child){
	    text-align:center;
	    padding:10px;
	}
	a{
	    color:var(--fmgr-b-color);
	    &:active, &:visited{
		color:var(--fmgr-b-color-contrast);
	    }
	    &:hover{
		filter:brightness(60%);
	    }
	}
    }

    .formedit{
	display:flex;
	width:80%;
	position:relative;
	left:50%;
	transform:translate(-50%, 0);
	border-radius:20px;
	align-self:center;
	font-family:var(--formedit-font);
	padding:20px;
	flex-direction:column;
	background-color:var(--formedit-bg);
	color: var(--formedit-color);
	justify-content:space-between;

	input[type="checkbox"] {
	    appearance: none;
	    position: relative;
	    left: 50%;
	    width: 60px;
	    padding: 0;
	    height:calc(calc(15px + 10px) + 4px);
	    transform: translate(-50%, 0%);
	    border: black solid;
	    &::before {
		cursor:pointer;
		padding: 5px;
		transition: all 1s ease;
		content: ":)";
		transform: translateY(-50%) rotate(-90deg);
		color: white;
		background: #f26565;
		display: block;
		width: 15px;
		height: 15px;
		text-align: center;
		line-height: 15px;
		vertical-align: middle;
		border-radius: 100%;
		left:0;
		position:absolute;
		top:50%;
	    }
	    &:hover::before{
		transform:scale(1.2);
		box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.75);
		transform:translateY(-50%) rotate(0deg);
	    }
	    &:checked:hover::before{
		transform:translateY(-50%) rotate(3780deg);
	    }
	    &:checked::before{
		transform:translateY(-50%) rotate(3690deg);
		background: #65f265;
		left:calc(100% - 25px);
	    }
	}
	a{
	    color:var(--formedit-color);
	    &:active, &:visited{
		color:var(--selection-color);
	    }
	    &:hover{
		filter:brightness(60%);
	    }
	}
	.closebutton{
	    display:flex;
	    background:red;
	    flex-direction:column;
	    align-items:center;
	    justify-content:center;
	    height:50px;
	    width:50px;
	    border-radius:10px;
	    color:white;
	    text-decoration:none;
	    position:absolute;
	    right:0;
	    top:0;
	    font-size:200%;
	}
	div, fieldset {
	    display:flex;
	    flex-direction:column;
	    margin:5px 0px;
	    justify-content:space-between;
	}
	textarea{
	    resize:vertical;
	}
	input{
	    width:calc(100% - 44px);
	    min-height: 0;
	    background-color:rgb(235, 235, 235);
	    border-radius: 20px;
	    padding:20px;
	    transition: all .5s ease;
	    margin: 5px 0px;
	    border:2px solid rgb(235,235,235);
	    &:focus{
		border: 2px black solid;
	    }
	}
	input:hover{
	    border: 2px black solid;
	}
	button{
	    padding: 20px;
	    background-color: rgb(0,255,0);
	    border: 1px solid green;
	    border-radius: 10px;
	    cursor:pointer;
	    transition: all .5s ease;
	    &:hover{
		background: lighten(rgb(0,255,0),50%)

	    }
	}
    }
    .actionbutton {
	padding: 2px;
	display: inline-flex;
	width: 20px;
	height: 20px;
	align-items: center;
	text-align: center;
	line-height: 24px;
	vertical-align: middle;
	margin: 2px;
	text-decoration: none;
	border-radius: 2px;
	color: white;
	justify-content: center;
    }
    .actioncol{
	display:flex;
    }
    .actionbutton.red{
	background-color:red;
    }
    .actionbutton.blue{
	background-color:blue;
    }
    .actionbutton.green{
	background-color:green;
    }
    .actionbutton.yellow{
	background-color:darkorange;
    }
    .otheractiondiv{
	width:100%;
	overflow:auto;
	background-color:var(--other-bg);
	display:flex;
	text-align:center;
	flex-direction:row;
	justify-content:space-around;
    }
    @media (max-width:700px){
	.otheractiondiv{
	    flex-wrap:wrap;
	}
    }
    .otheraction{
	display:flex;
	text-align:center;
	flex-direction:column-reverse;
	align-items:center;
	justify-content:center;
    }
    .infospanel{
	z-index:20;
	background:none;
	display:flex;
	flex-direction:row;
	left:50%;
	transform:translate(-50%,0);
	max-height:30vh;
	overflow:auto;
	max-width:60vw;
	position:fixed;
	height:72px;
    }
    .infosmessage{
	max-width:calc( 60vw - 20px);
	padding:10px;
	overflow:auto;
	border-radius:10px;
    }

    .dashBoardHeader {
	box-sizing:unset;
	width: calc(100% - 32px);
	top:0;
	height:40px;
	min-height:32px;
	display: flex;
	position: relative;
	justify-content: space-between;
	align-items: center;
	/*background-color: #1F1F1F;*/
	background:var(--dashheaderbg);/*url(https://host.cybergamma.group/GZod01/matrixlittle2.png);*/
	color: #0C0;/*white;*/
	padding: 16px;
	font-size: 16px;
	#dropdown-toggle {
	    display: none;
	}
	* {
	    font-family:serif;
	    text-decoration:none;
	    color:#0C0;
	}
	.centralIcons * {
	    padding:0px 10px;
	    height:100%;
	    flex: 2 2;
	    text-align: center;
	}
	.title{
	    text-align:center;
	    height:40px;
	    margin:0;
	    padding:0;
	    display:flex;
	    align-items:center;
	    min-width:160px;
	    justify-content:space-around;
	}
	.icon i/*,  .icon*/ {
	    font-family: var(--fa-style-family-classic);
	}
	.centralIcons {
	    height:100%;
	    display:flex;
	    flex-direction:row;
	}
	.highCentralIcons{
	    height:100%;
	    align-self:center;
	    align-items:center;
	    text-align:center;
	    justify-content:space-around;
	    width:80%;
	    display:flex;
	    flex-direction:row;
	}
	@media (max-width:700px){
	    .centralIcons{
		flex-direction:column;
	    }
	    .highCentralIcons{
		display:none;
	    }
	}
	.centralIconToggleLabel {
	    display:none;
	}
	label {
	    cursor: pointer;
	    font-size: 20px;
	    font-weight: bold;
	}
	label .usericon{
	    width:40px!important;
	    height:40px!important;
	    border-radius:100%;
	}

	label .usericon:hover{
	    border: 2px solid grey;
	}
	#dropdown-toggle:checked ~ label .usericon {
	    border: 2px solid white;
	}
	.dropdown-menu {
	    display: none;
	    position: absolute;
	    top: 100%;
	    right: 0;
	    list-style: none;
	    padding: 0;
	    margin: 0;
	    background-color: #1F1F1F;
	    border: 1px solid #0A0F14;
	    box-shadow: 0 2px 4px rgba(0,0,0,.2);
	    z-index: 1;
	    min-width: 120px;
	    font-size: 14px;
	}
	.dropdown-menu li {
	    /*padding: 10px 16px;*/
	    border-bottom: 1px solid #0A0F14;
	    text-align:center;
	}
	.dropdown-menu li a{
	    color:#0ACF1C;
	    width:100%;
	    height:100%;
	    padding: 10px 0px;
	    display:block;
	    text-decoration:none;
	}
	.dropdown-menu li:hover {
	    background-color: #0A0F14;
	    cursor: pointer;
	}
	.centralIcons:hover{
	    background-color:#1F1F1F;
	    cursor:initial;
	}
	.centralIcons a:hover{
	    background-color:#0A0F14;
	    cursor:pointer;
	}
	.centralIcons a{
	    height:100%;
	    padding:unset;
	}
	#dropdown-toggle:checked ~ .dropdown-menu {
	    display: block;
	}
    }
    ::selection {
	background-color:var(--selection-bg-color);
	color:var(--selection-color);
    }
    ::-moz-selection {
	background-color:var(--selection-bg-color);
	color:var(--selection-color);
    }
    ::-o-selection {
	background-color:var(--selection-bg-color);
	color:var(--selection-color);
    }
    ::-ms-selection {
	background-color:var(--selection-bg-color);
	color:var(--selection-color);
    }
    ::-webkit-selection {
	background-color:var(--selection-bg-color);
	color:var(--selection-color);
    }