@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
	/*font-family: Robobto;*/
	font-family: 'Roboto', sans-serif;
	font-weight: 300:
	font-size: 16px;
	/*background-color: black;*/
	/*background-image: url(images/galaxy.jpg);
	background-size: auto;
	opacity: 0.95;*/
	-webkit-font-smoothing: antialiased;
	-webkit-overflow-scrolling: touch;}

.row {
  /*https://julienmelissas.com/no-gutter-column-trick-for-bootstrap/*/
  margin-right: 0;
  margin-left: 0;}

.block_content, .sidebar {
	padding-top: 54px;
	padding-bottom: 50px;}

.roof {
	/*font-family: Roboto;*/
	text-align: center;
	/*position: absolute;
	left: 0px;*/
	/*overflow: hidden;*/
	top: 0;
	/*width: 100%;*/	}
/*.card { opacity: 1 }*/


img.big { width: 100%; height: auto }

div.container-fluid {}

h1, h2, h3, h4, h5, h6 {
	/*font-family: Roboto;*/
	font-weight: 300;
}
p {
	line-height: 28px;
	margin-bottom: 5px;
	margin-left: 2px;
	/*font-family: Roboto;*/}
.centered {text-align: center;}
a {color: #314AE2}
a:hover, a:focus {
	color: #7dabdb 
	text-decoration: none;
	outline: 0;}
hr{
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;}

table{
    /*vertical-align: top;*/
    /* wie class="table-responsive", ohne display-block navbar-content ist zu breit*/
    display: block; 
    /*overflow-x: auto;*/
    overflow: auto;
    /*white-space: nowrap;*/
    /*table-layout: auto;*/
  	/*width: 100%;*/}

table, th, td{
	vertical-align: top;
	border-collapse: collapse;
  	border: 1px solid black;}

th {
	text-align: center;
	vertical-align: middle;}

td.number {text-align: right;}

tbody{text-align: left;}

li.list-group-item{
	/*background-color: #2E2E2E;*/
	background-color: transparent;
}


.wrapper {
	display: flex;
	width: 100%;
	align-items: stretch;
	/*font-family: Roboto;*/}

#sidebar {
	width: 250px;
    position: fixed;
    margin-left: -250px;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 999;    
    /*wie schnell die von links springt*/
    transition: all 0.1s;}

#sidebar.active {
    margin-left: 0px;
}

#content {
    width: 100%;
    padding-left: 1px;
    min-height: 100vh;
    transition: all 0.1s;
    position: absolute;
    top: 0;
    right: 0;
    /*font-family: Roboto;*/}

#content.active {
    /*width: 100%;*/
    width: calc(100% - 250px);
}

div.col-md-3 {
	padding: 10px;
	border: 1px solid black;
	/*position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	padding-top: 60.5px;
	overflow-x: hidden;
	overflow-y: auto;*/}

div.col-md-9 {
	padding: 20px;
	padding-bottom: 50px;
	/*margin-left: 500px;*/
	border: 1px solid black;
	text-align: justify;
	/*font-family: Roboto;}*/}
.container {}
.entwurf {
	color: #B079B7;}

div.collapse {
	text-align: justify;}

/*Input on/off*/
.switch-field input {
    position: absolute;
    clip: rect(0, 0, 0, 0);}

.switch-field input:checked + label {
    background-color: #2E2E2E;
    color: white;}


.word-wrap {
        /*word-break: break-all;*/
        word-wrap: break-word;
        /*overflow-wrap: break-word;*/}

/*animate.css*/
/*https://codepen.io/zhuziyi/pen/mJeprY*/
div#animate_test a {
  animation-duration: 2s;
  /*animation-delay: 2s;*/
  animation-iteration-count: 15;}

/*MEDIAQUERIES*/

@media (max-width: 768px) {
    #sidebar {margin-left: -250px;}
    #sidebar.active {margin-left: 0;}
    #content {width: 100%;}
    #content.active {width: calc(100% - 250px);}
    #sidebarCollapse span {display: none;}}




.demo{
  /*width:20px;
  height:100px;
  font-size:5em;*/
  /*float:left;
  text-align:center;*/
}

.rainbow-bg{
        animation: rainbow-bg 15s linear;
        animation-iteration-count: infinite;
}

.rainbow{
        animation: rainbow 30s linear;
        animation-iteration-count: infinite;
}

@keyframes rainbow-bg{
        100%,0%{background-color: rgb(255,0,0);}
        8%{background-color: rgb(255,127,0);}
        16%{background-color: rgb(255,255,0);}
        25%{background-color: rgb(127,255,0);}
        33%{background-color: rgb(0,255,0);}
        41%{background-color: rgb(0,255,127);}
        50%{background-color: rgb(0,255,255);}
        58%{background-color: rgb(0,127,255);}
        66%{background-color: rgb(0,0,255);}
        75%{background-color: rgb(127,0,255);}
        83%{background-color: rgb(255,0,255);}
        91%{background-color: rgb(255,0,127);}
}

@keyframes rainbow{
        100%,0%{color: rgb(255,0,0);}
        10%{color: rgb(255,127,0);}
        20%{color: rgb(255,255,0);}
        30%{color: rgb(127,255,0);}
        40%{color: rgb(0,255,0);}
        50%{color: rgb(0,255,127);}
        60%{color: rgb(0,255,255);}
        /*58%{color: rgb(0,127,255);}*/
        /*66%{color: rgb(0,0,255);}*/
        /*75%{color: rgb(127,0,255);}*/
        70%{color: rgb(255,0,255);}
        80%{color: rgb(255,0,127);}
}

/*.table-fit {
  width: 800px;
}*/