body {
	padding: 120px 2% 10px 2%;
	background-color: #ECECEC !important;
}

.main {
	max-width: 1600px;
	padding: 15px;
	margin-bottom: 4vh;
}

.code {
	font-family: monospace;
    background-color: rgb(0, 0, 0);
    border-radius: 2px;
    color: #34AF17; /*#1791AF;*/
    color: rgba(255, 255, 255, 0.75);
    padding: 4px 8px;
    display: inline-block;
    font-size: 110%;
        margin: 1vh 0;
}

.lightgreybox {
	background-color: rgba(210, 210, 210, 0.22);
    border-radius: 3px;
}

footer, #bottombox {
    padding: 10px 1%;
    background-color: rgba(0, 0, 0, 0.57);
    background: -webkit-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.87) 5px);
    background: -o-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.87) 5px);
    background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.87) 5px);
    clear: both;
    float: none;
    margin-top: 5vh;
    color: rgba(255, 255, 255, 0.35);
    height: 40px;
    text-align: center;
}
footer .swapcontent, #bottombox .swapcontent {
	display: none;
}
footer .modal, #bottombox .modal {
	color: rgba(0, 0, 0, 0.8);
}

.btn {
	margin-bottom: 5px !important;
}

.saveline {
    margin-top: 3vh;
    margin-bottom: 3vh;
    background: -webkit-linear-gradient(left, transparent 0%, rgba(0,0,0,0.06) 50%, transparent 100%);
    background: -o-linear-gradient(left, transparent 0%, rgba(0,0,0,0.06) 50%, transparent 100%);
    background: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.06) 50%, transparent 100%);
    border-top: 1px solid rgba(0, 0, 0, 0.02);
    border-bottom: 1px solid rgba(0, 0, 0, 0.02);
    padding: 1.5vh 0 1vh;
}

/* mobile hidden */
@media (max-width: 767px) {
	.mobile-hidden {
		display: none;
	}
}

/* Navbar */
	.nav a {
    	font-size: 130%;
    	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
	}

	@media (max-width: 767px) {
		#navbar > ul > li a {
	    	line-height: 2.2em;
	    }

	    #navbar .dropdown-menu {
    		background-color: transparent;
		    box-shadow: none;
		    padding: 0 1em 1em;
		    font-size: 95%;
    	}


	}

@media (min-width: 768px) AND (max-width: 1000px) {
	.navbar-nav>li>a {
	    /*font-size: 14px;
	    padding-left: 5px !important;
	    padding-right: 10px !important;*/
	}
	#navbar > ul > li > a > span {
	    display: none;
	}
	#navbar > ul > li > a > i {
		font-size: 3.5vw;
	}
	#navbar > ul > li {
		padding-left: 0.6vw;
	}
}

/* texte */
	.infotext {
		padding: 1vh 2vw;
		opacity: 0.7;
	}
	.line3x {
		line-height: 300% !important;
	}

/* pages */
	.thumbnail {
		position: relative;
		transition: 0.5s all;
		color: rgba(255, 255, 255, 0.8);
		background-color: rgba(183, 183, 183, 0.3) !important;
		-webkit-transition: all .5s ease-in-out;
	    -o-transition: all .5s ease-in-out;
	    transition: all .5s ease-in-out;
	}
	
	@media (max-width: 767px) { .col-md-4 .thumbnail { height: 40vw !important; } } 
	@media (min-width: 768px) { .col-md-4 .thumbnail { height: 20vw; } }

	@media (max-width: 767px) { .col-md-2 .thumbnail { height: 20vw; } } 
	@media (min-width: 768px) AND (max-width: 991px) { .col-md-2 .thumbnail { height: 15vw; } }
	@media (min-width: 992px) { .col-md-2 .thumbnail { height: 10vw; } }  

	@media (max-width: 992px) { .col-md-3 .thumbnail { height: 30vw; } } 
	@media (min-width: 768px) AND (max-width: 991px) { .col-md-3 .thumbnail { height: 22vw; } }
	@media (min-width: 992px) { .col-md-3 .thumbnail { height: 15vw; } }  

	.slide-sort .thumbnail, .slide-folder .thumbnail, .slide-edit .thumbnail {
		box-shadow: 4px 4px 2px rgba(0, 0, 0, 0.1);
	}
	.slide-sort .thumbnail h4, .slide-folder .thumbnail h4 {
		color: white;
		text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.9);
    	font-size: 27px;
    	background-color: rgba(0, 0, 0, 0.67);
	    padding: 4px 8px;
	    display: inline-block;
	    border-radius: 2px;
	}
	.slide-folder .thumbnail button.ru {
		position: absolute;
		bottom: 4px;
		right: 8px;
	}
	.thumbnail.grey { /* .slide-folder  */
		-webkit-filter: grayscale(100%) opacity(20%); 
    	filter: grayscale(100%) opacity(20%);
	}

	.slide-edit .thumbnail {
		min-height: 34px;
	}

	.slide-dia hr {
	    height: 0px;
	    /*border-bottom: 2px solid rgba(0, 0, 0, 0.1);*/
	}
	.slide-dia h4 {
		border-bottom: 2px solid rgba(0, 0, 0, 0.1);
		margin: 0 15px 1vh;
	}
	.slide-dia .thumbnail span {
	    position: absolute;
	    top: 4%;
	    right: 2%;
	    font-size: 20px;
	    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.53);
	}
	.thumbnail .glyphicon-ok { color: green; }
	.thumbnail .glyphicon-remove { color: red; }

	.list-group .level2 {
	    margin-left: 2.5em;
	}
	.list-group .level3 {
	    margin-left: 5em;
	}

	.thumbnail .buttonmiddle { /* hinzufügen */
		margin-top: 15%;
    	margin-left: 30%;
	}
	.thumbnail .transparent {
		background-color: transparent;
    	box-shadow: none;
    	border: 0;
	}
	.thumbnailoverlay {
		position: absolute;
		right: 25px;
    	bottom: 25px;
	}
	.thumbnailoverlay span.black {
		background-color: black;
	    color: white;
	    padding: 2px 4px;
	    font-size: 120%;
	    margin-right: 10px;
	    border-radius: 2px;
	}

	.tab-team {
		max-width: 1200px;
	    border-radius: 3px;
	    /*padding: 20px 40px;*/
	    padding: 5px;
	    border-bottom: 1px solid #ddd;
	    border-left: 1px solid #ddd;
	    border-right: 1px solid #ddd;
	    background-color: rgba(255, 255, 255, 1); /* 0.8 */
	}
	.tab-team textarea {
		height: calc( 100vh - 60px - 100px - 52px - 40px - 100px);
	}

	img {
    	max-width: 100%;
    }

/* module */
	.module .glyphicon {
		line-height: 260% !important;
	}
	.module .switch-light {
   		margin-top: 20px;
   	}
	.module .infotext {
   	    background-color: rgba(128, 128, 128, 0.13);
	    border-radius: 2px;
	    font-size: 90%;
	}
	@media (min-width: 768px) { .module .infotext { margin-top: 10px; } }
	.module p {
		margin-top: 10px;
		opacity: 0.6;
		font-size: 90%;
		color: #3E0404;
	}

/* (admin) panel */
	.panel-red, .row:nth-child(odd) > div:nth-child(odd) > .panel {
	    border-color: #d9534f !important;
	}
	.panel-red > .panel-heading, .row:nth-child(odd) > div:nth-child(odd) > .panel > .panel-heading {
	    border-color: #d9534f;
	    color: white;
	    background-color: #d9534f;
	    padding: 18px 15px !important;
	}

	.panel-blue, .row:nth-child(odd) > div:nth-child(even) > .panel {
	    border-color: #337ab7 !important;
	}
	.panel-blue>.panel-heading, .row:nth-child(odd) > div:nth-child(even) > .panel > .panel-heading {
	    color: #fff;
	    background-color: #337ab7;
	    border-color: #337ab7;
	    padding: 18px 15px !important;
	}

	.panel-green, .row:nth-child(even) > div:nth-child(odd) > .panel {
	    border-color: #94C470 !important;
	}
	.panel-green>.panel-heading, .row:nth-child(even) > div:nth-child(odd) > .panel > .panel-heading {
	    color: #fff;
	    background-color: #94C470;
	    border-color: #94C470;
	    padding: 18px 15px !important;
	}

	.panel-yellow, .row:nth-child(even) > div:nth-child(even) > .panel {
	    border-color: #F1B457 !important;
	}
	.panel-yellow>.panel-heading, .row:nth-child(even) > div:nth-child(even) > .panel > .panel-heading {
	    color: #fff;
	    background-color: #F1B457;
	    border-color: #F1B457;
	    padding: 18px 15px !important;
	}

	.panel-footer {
    	padding: 15px 20px !important;
	}
	.panel .panel-footer p {
	    line-height: 170%;
	}

	.panel .bottomRight {
		position: absolute;
    	right: 15px;
    	bottom: 15px;
	}

/* other */
	.input-group .thumbnail {
		margin-bottom: 0px !important;
	}
	.form-signin {
	   	margin: 4vh 0;
	    background-color: white;
	    padding: 15px;
	    border-radius: 10px;
	    border: 1px solid rgba(1, 1, 1, 0.3);
	    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
	}

	.spinner.input-group input {
		height: 42px !important;
	}

 /* vorschau box */
 	#vorschau {
        background-color: rgba(78, 78, 78, 0.5);
	    opacity: 0.5;
	    z-index: 200;
	    position: absolute;
	    width: 100%;
	    height: 100%;
	    left: 0;
	    top: 0;
	    min-height: 500px;
    }
    #vorschau h2 {
      	transform: rotate(22deg);
	    color: rgba(255, 255, 255, 0.75);
	    margin-top: 20%;
	    font-size: 5vmin;
	    text-align: center;
	    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
    }

  /* sectionen layout */
  	section {
	    background-color: white;
	    margin: 2vh auto 4vh;
	    padding: 15px 0;
	    border-radius: 2px;
	    box-shadow: 0 5px 35px 0 rgba(0,0,0,.1);
	}

	.dottedBox {
		border: 2px dotted rgba(128, 128, 128, 0.4);
    	padding: 5px 10px;
	}

	.dottedSortable {
		min-height: 50px; 
		border: 1px dashed rgba(0, 0, 0, 0.2);
		border-radius: 4px;
	}

	.list-group-item {
    	box-shadow: 0 5px 35px 0 rgba(0,0,0,.1);
    	border: 0; 
    }

/* BS4 */
	.tab-content {
    	background-color: white;
    	border-radius: 2px;
    	box-shadow: 0 5px 35px 0 rgba(0,0,0,.1);
    	padding: 15px 15px 30px;
	}

    .nav-tabs .nav-link {
    	color: rgba(0, 0, 0, 0.5);
    }
    a.nav-link:hover {
	    color: #6a6a6a;
	    background-color: rgba(255, 255, 255, 0.6);
	    border-color: #dee2e6 #dee2e6 #fff;
	}

	.form-control {
    	background-color: rgba(193, 193, 193, 0.13);
    }

    .input-group-text .fa {
	    width: 1.5em;
	}
    
/* Spinner */
	.spinner .input-group-append {
	    margin-left: 13px;
	}