/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea,
label {
    color: #434A54;
}

html, body {
    font-size: 1em;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}
html {
    overflow-y: scroll;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

.truncate {
    width: 225px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    float:left;
}

button.blue-submit {
	background-color: #999;
	display: block;
	line-height: 30px;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
	padding: 0 10px 0;
	text-decoration: none;
	border: 0 none;
}

.statistik-graph {
	width: 100% !important;
	min-height: 450px !important;
}

.graph2-outer {
	line-height: 14px;
	margin-bottom: 0px !important;
	padding-bottom: 0px;
}

.graph2-inner {
	line-height: 18px;
}

.list-subtable { font-size: 16px; }
.list-subtable td { font-size: 16px; }
.list-subtable th { font-size: 16px; }

@media screen and (min-width: 992px) and (max-width: 1250px) {
	button.blue-submit {
		font-size: 12px;
		padding-left: 5px;
		padding-right: 5px;
	}
}

@media screen and (max-width: 991px) {
	label.blue-submit-label {
		display: none;
	}
	button.blue-submit {
		width: 100%;
	}

	table.table i.fa {
		font-size: 24px;
	}
}

@media screen and (max-width: 767px) {
	label.blue-submit-label {
		display: none;
	}
	button.blue-submit {
		width: 100%;
		padding: 15px 15px;
		line-height: 36px;
		font-weight: 700;
	}
	table.table i.fa {
		font-size: 28px;
	}
}

.statistik-fixed-unterseiten {
	min-width: 15%;
}

.statistik-table {
	margin-left: 80px;
	margin-top: 40px;
	margin-bottom: 40px;
}

.statistik-small { font-size: 14px !important; }
.statistik-small * { font-size: 14px !important; }
.statistik-small td {
	padding-top: 3px !important;
	padding-bottom: 3px !important;
}

.statistik-page {
	margin-bottom: 0 !important;
	text-decoration: none !important;
}

.statistik-page a:hover {
	text-decoration: underline !important;
}

.kreis-direkt {
	width:24px;
	height:24px;
	border-radius:12px;
	font-size:6px;
	color:#fff;
	line-height:24px;
	text-align:center;
	background:#000;
}

.circle-direct {
	width:24px;
	height:24px;
	border-radius:12px;
	font-size:6px;
	color:#fff;
	line-height:24px;
	text-align:center;
	background:#2ec3dd;
}
.circle-organic {
	width:24px;
	height:24px;
	border-radius:12px;
	font-size:6px;
	color:#fff;
	line-height:24px;
	text-align:center;
	background:#3D91B7;
}
.circle-referral {
	width:24px;
	height:24px;
	border-radius:12px;
	font-size:6px;
	color:#fff;
	line-height:24px;
	text-align:center;
	background:#0e5782;
}

.referrer-temp {
	background-color: transparent;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Links
   ========================================================================== */

a, .animated { -webkit-transition: all 0.2s ease-out 0s; -moz-transition: all 0.2s ease-out 0s; -o-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; }
a { text-decoration: none; color: #434a54; }
a:visited {  }
a:hover { }
a:focus { }
.content-grid a { text-decoration: underline; }

.content-grid a.dezent { text-decoration: none; color:#434a54; }


a.funktion {
    background-color: #2ec3dd;
    display: inline-block;
    font-size: 16px;
    line-height: 26px;
    /* float: right; */
    padding: 10px 15px;
    /* position: absolute; */
    left:20px;
    bottom: 23px;
    color: white;
    font-weight: 700;
    text-decoration: none;
    z-index: 3;
    text-transform: uppercase;
}
.funktion-home,
a.funktion-home,
a.funktion-home:hover,
.funktion-home:hover {
    background-color: #2ec3dd;
    font-size: 16px;
    /* line-height: 36px; */
    /* float: right; */
    padding: 10px 15px;
    /* position: absolute; */
    right: 0;
    left:0;
    bottom: 23px;
    margin-left: auto;
    margin-right: auto;
    color: white;
    font-weight: 700;
    text-decoration: none;
    z-index: 3;
    /* width: 60%; */
    text-align: center;
    text-transform: uppercase;
    display: inline-block;
}

@media(max-width: 767px) {
    a.funktion,
    .funktion-home,
    a.funktion-home,
    a.funktion-home:hover,
    .funktion-home:hover {
        display: block;
    }
}

/* C. Fischer */

.home-projects, .home-tasks {
    overflow-x: auto;
    white-space: nowrap;
}

/* end C. Fischer */


/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active, a:focus { outline: 0; text-decoration:none; color: #000; }

/* ==========================================================================
   Overwrite Bootstrap defaults
   ========================================================================== */

.container                                      { width: auto; max-width: 1290px; padding-right: 5px; padding-left: 5px; position: relative; z-index: 2; }
.container .row                                 { margin-left: -5px; margin-right: -5px; }
.container .row .grid                           { padding-left: 5px; padding-right: 5px; }
aside.grid										{position: relative;}
.container .row.grid-bottom-padding > .grid     { padding-bottom: 10px; }

nav > ul                                        { margin: 0; padding: 0; list-style-type: none; }
nav > ul > li                                   { display: block; }
nav > ul > li > a                               { display: block; }
nav.horizontal-nav > ul > li                    { float: left; }

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

.gallery { padding-left: 15px; }
.gallery .col-md-2 { padding: 0 5px 5px 0;}

.error, .success { color: white; border-radius: 4px; padding: 10px; }
.error { background-color: crimson; }
.success { background-color: forestgreen; }

.download { background-position:center left; padding-left:25px; background-repeat:no-repeat; }

.translation-input .custom-file-upload {border: 1px solid #434a54; display: inline-block; padding: 6px 12px; cursor: pointer; font-weight: normal;}
/*.translation-input input[type="file"] { display: none; }*/
.translation-input .icheckbox_square-yellow { margin-right: 5px; }
.line .translation-input select{ padding:0px; padding-left: 3px;}
.line .translation-input textarea{ line-height: 24px;}
.line .translation-input .input-noborder { border:0px; padding: 0px;}
.line .translation-input .submit-button { width:290px; float: left; position:static; font-weight: 700; line-height: 36px;  padding: 15px;  padding-bottom: 50px; text-decoration: none; text-transform: uppercase;}
.line .translation-input #instructions { min-height: 100px; height:100px;}
.line .translated-textarea-output { border: 0px solid; height: 100%; min-height: 150px;}
.line .translation-target-text textarea{ min-height: 350px; background-color: rgba(0, 0, 0, 0.07); }
.line .translation-input-select { float:left; padding:0px;}
.table .translated-word-wrap { word-wrap: break-word; overflow-wrap: break-word; }
/* colors */

/*
Blau:  #3d91b7  rgba(61,145,183,1);
Gelb:  #ffc414  rgba(255,196,20,1);
Grau:  #656565;
Gruen: #309f35;
*/

/* typo */

h1, h2, h3, h4, h5, h6, p, a,
li, span, td, th, html, body                    { margin-top: 0; font-family: 'Source Sans Pro', 'Lato', Arial, sans-serif; font-size: 18px; line-height: 24px; font-weight:300; }
p												{ font-family: 'Source Sans Pro',sans-serif; color:#545454; }
td, th											{ white-space: normal; -webkit-white-space: normal; -moz-white-space: normal;-ms-white-space:normal;display:table-cell; vertical-align: top;padding-right: 15px; padding-bottom: 5px;}
h1, h2                                          { font-size: 28px; line-height: 30px; font-weight: 400; color: #0e5782; font-family: "Roboto Slab"; }
h1                                              { padding-bottom: 8px; border-bottom: 1px solid #afd3e2; }
h2                                              { font-size:21px;  }
h4                                              { font-size: 21px }
h6                                              { border-bottom: 2px solid #656565;
    font-size: 20px;
    font-weight: 700;
    padding-bottom: 10px;
}
.content p                                      { margin-bottom: 15px; }
.box p                                          { color: #656565; }
.alert-danger									{float:left;clear:both;width: 100%;}
.content .alert p                               { margin-bottom: 0; }
ul, ol                                          { padding-left: 14px; }
.total-value                                    { font-weight: 700; color: #309f35; }

/* header */

header                                          { background-color: #fff;  position: relative; z-index: 5; }
header nav > ul > li > a                        { display: block; line-height: 36px; font-size: 16px; font-weight: 300; color: #fff; padding:2px 18px; text-decoration: none;text-transform: uppercase; letter-spacing:0.5px; }
header nav > ul > li:first-child > a			{padding-left:0px;}
header nav > ul > li:last-child	 > a			{padding-right:0px;}
header nav > ul > li > a:hover					{color: #fff;}
header nav > ul > li > a.active/*,
header nav > ul > li:hover > a*/                { color: #fff; text-decoration: none; font-weight: 700; }
header nav > ul > li > a:focus                  { color: #fff; text-decoration: none; }

@media(min-width: 992px) {
    header nav > ul > li > a:focus              { color: #fff; text-decoration: none; font-weight: 700; }
}

.logo-wrapper                                   {  }
.logo-wrapper a.logo                            { display: block; height: 59px; width: 275.53px; background: url('../img/logo_bluecenter_desktop.svg') no-repeat left top; margin-top: 25px; }
.eingeloggt-als                                 { display: block; position: absolute; top: 15px; right: 5px; text-align: right; }
.eingeloggt-als-mobile                          { display: block; position: absolute; top: -45px; right: 15px; text-align: left; }
.eingeloggt-als p                               { line-height: 26px; }
.eingeloggt-als p a                             { text-decoration: underline; }


a.mobile-logo                                   { display: block; height: 19px; width: 129.912px; background: url('../img/logo_bluecenter_mobile.svg') no-repeat left top; background-size: 100%; margin: 10.5px 0 0 9px; }
a.mobile-nav-trigger                            { display: block; height: 40px; padding: 10.5px 9px; width: 43px; }
a.mobile-nav-trigger span                       { display: block; height: 19px; width: 25px; background: url('../img/bluecenter_nav_icon_mobile_new.png') no-repeat left top; background-size: 100%; }

#mobile-nav {
    display: none;
    background-color: #3D91B7;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 6;
    top: 40px;
}
header nav#mobile-nav > ul > li                 { float: none !important; }
header nav#mobile-nav > ul > li > a             { border-top: 1px solid rgba(255,255,255,0.7) }
header nav#mobile-nav > ul > li:first-child > a {padding-left: 18px;}
header .nav-fluid-wrapper 						{background-color: #545454; margin-top: 30px;min-height: 36px;}

@media(max-width: 767px) {
    header .nav-fluid-wrapper 					{background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}
}

.subnav                                         { left: 10px; position: absolute; right: 10px; top: 10px; }
.subnav > ul                                    { float: right; list-style-type: none; margin: 0; padding: 0; }
.subnav > ul > li                               { float: left; font-weight: 700; }
.subnav > ul > li:before                        { content: "/"; }
.subnav > ul > li:first-child:before            { content: ""; }
.subnav > ul > li > a                           { margin: 0 10px; font-weight: 700; color: #656565; text-decoration: none; }
.subnav > ul > li > a.active,
.subnav > ul > li > a:hover,
.subnav > ul > li > a:active,
.subnav > ul > li > a:focus                     { color: #000; }
.subnav > ul > li > a.active                    { border-bottom: 1px solid #000; }


.subnav-wrapper {
    //padding-left: 30px;
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
}
.subnav-wrapper ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
.subnav-wrapper ul li {
    height: 33px;
}
.subnav-wrapper ul li a {
    display: block;
    line-height: 32px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0);
    z-index: 2;
    position: relative;
    color: rgba(0,0,0,.6);
}
.subnav-wrapper ul li a.active {
    border-bottom: 1px solid rgba(255,255,255,1);
    color: #3d91b7;
}
@media(max-width: 767px) {
    .subnav-wrapper {
        border-bottom: 1px solid #d9d9d9;
    }
    .subnav-wrapper ul li a {
        border-top: 1px solid #d9d9d9;
        font-size: 16px;
        font-weight: bold;
        letter-spacing: .5px;
        text-transform: uppercase;
    }
}
@media(min-width: 768px) {
    .subnav-wrapper {
        border-bottom: 1px solid #d9d9d9;
        height: 34px;
    }
    .subnav-wrapper ul li {
        border: 1px solid #d9d9d9;
        border-left: 0 none;
        border-bottom: 0 none;
        float: left;
    }
    .subnav-wrapper ul li:first-child {
        border-left: 1px solid #d9d9d9;
    }
    .subnav-wrapper ul li a {
        padding: 0 15px;
    }
}

/* background */

body                                                { background: #f2f2f2; }
.website-background                                 { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }

@media(min-width: 992px) {
    body                                            { background: url('../img/hintergrund_unten.jpg') no-repeat; background-size: cover; background-position: 0 650px; }
    .website-background .website-background-head    { background: url('../img/hintergrund_oben.jpg') no-repeat left top; position: absolute; top: 36px; height: 614px; left: 0; right: 0; background-size: cover; }
}


/* Custom Removal */

body#article-5
.content
.content-left-inner
.subnav-wrapper 								{display:none;}

/* content */
section.content									{margin-top:57px;}
.bg-white                                       { background-color: #fff; }
.bg-blue-15                                     { background-color: rgba(61,145,183,0.15); }
.content-grid                                   { min-height: 630px; padding: 20px 20px 90px; position: relative; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
.padding-15                                     { padding: 15px 15px 0; }
.box                                            { margin-bottom: 20px; }
.widgetIframe                                   { float: left; width: 100%; overflow: hidden; margin-bottom: 40px; }
.width-50                                       { width: 50%; }
.content .no-margin                             { margin: 0; }

.content-grid.content-left-inner {
    display:flex;
    flex-direction: column;
}

span[data-title]                                { background-color: #d3e7f0; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; color: #3d91b7; cursor: default; font-size: 11px; margin: 0 0 0 5px; padding: 2px 8px; }

/* table */

/* .table                                          { margin-bottom: 40px; } */
.table                                          { margin-bottom: 0; }
.table > tbody > tr > td:first-child,
.table > thead > tr > th:first-child,
.table > tfoot > tr > td:first-child            { padding-left: 7px; }
.table td.button-wrapper                        { padding: 6px 8px; }
.table-no-margin                                { margin: 0; }
/* .table-small-margin                             { margin-bottom: 15px; } */
.table-small-margin                             { margin-bottom: 0; }
.table > thead > tr > th                        { border-width: 0 0 1px 0; }
.table-striped > tbody > tr:nth-child(2n+1) > td,
.table-striped > tbody > tr:nth-child(2n+1) > th { background-color: rgba(0,0,0,0.05); }
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td                        { border-color: white; border-width: 2px; /* border-color: rgba(0,0,0,0.15) ; */ }

.table-responsive {
    border: none;
    margin-bottom: 15px;
}

.table-striped > tbody > tr:nth-child(2n+1) > td,
.table-striped > tbody > tr:nth-child(2n+1) > th {
    background-color: rgba(0, 0, 0, 0.07);
}
.table-striped > tbody > tr:nth-child(2n) > td,
.table-striped > tbody > tr:nth-child(2n) > th {
    background-color: rgba(0, 0, 0, 0.04);
}


#article-1 .cycle-slideshow,
#article-1 .content-right-inner,
#article-1 .content-left-inner {
    min-height: 630px;
}

.content-right-inner {
	/*float:left;*/ /* C. Fischer */
	padding:20px 20px 20px;
}

.cycle-slideshow {
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    position: relative;
    height: 630px;
}
.slice {
    width: 420px;
    height: 630px;
    padding: 25px 40px 40px;
}
.slice h1 {
	font-weight: 400;
    font-size: 36px;
    line-height: 1.3;
    margin-bottom: 34px;
    border: 0;
    padding: 0;
    color: #0e5782;
    letter-spacing: 0.8px;
    font-family: 'Roboto Slab', sans-serif;
}
.slice img {
    margin: 30px 0 35px;
}
.slice .txt {
    width: 320px;
    margin: 0 auto;
    text-align: center;
    color: black;
}
.cycle-pager {
    position: absolute;
    z-index: 200;
    bottom: 38px;
    left: 0;
    right: 0;
}
.cycle-pager-inner {
    text-align: center;
}
.cycle-pager-inner div {
    height: 12px;
    display: inline-block;
    width: 12px;
    background-color: #90d0e9;
    margin: 0 4px;
    border-radius: 6px;
    cursor: pointer;
}
.cycle-pager-inner div.cycle-pager-active {
    background-color: #0095cc;
}

/**************************************************
* CSS BY K. LENZIN
**************************************************/

.table-responsive {
    overflow-x: auto;
    white-space: nowrap;
}

.table-responsive table .label-primary {
    display: block;
    margin-bottom: 4px;
}

.conversation-body span.label {
    margin-right: 4px;
}

.conversation-body .thread-item {
    padding: 20px;
    margin-bottom: 20px;
}

.conversation-body .thread-item .conversation-item-head {
    padding-bottom: 20px;
    margin-bottom: 10px;
}

.conversation-body .message-thread {
    border: 1px solid #afd3e2;
}

.conversation-body .message-thread .conversation-item-head {
    border-bottom: 1px solid #afd3e2;
}

.conversation-body .email-thread {
    border: 1px solid #ccc;
}

.conversation-body .email-thread .conversation-item-head {
    border-bottom: 1px solid #ccc;
}

.conversation-body .conversation-item-head h2 {
    display: inline;
}

.conversation-body .conversation-item-head span {
    float: right;
}


/* form */

form                                            { margin-bottom: 30px; overflow: hidden; }
form#create-conversation                        { margin-bottom: 70px; overflow: visible; }
form#create-conversation select                 { padding: 0; }


/**************************************************
* END OF CODE BY K. LENZIN
**************************************************/


form.slim                                       { margin-bottom: 0; }
.line                                           { margin-bottom: 10px; }
.line label                                     { display: block; margin: 0; line-height: 30px; }
.line input,
.line select,
.line textarea                                  { width: 100%; height: 30px; transition: background 0.3s ease-out; padding: 5px; line-height: 18px; border: 1px solid #434A54; font-size: 18px; font-weight: 300; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-appearance: none; }
.line textarea                                  { height: 200px; }
.line p                                         { margin-bottom: 0; }
.line button                                    { display: block; line-height: 26px; font-size: 16px; font-weight: 700; color: #fff;  text-transform: uppercase;   padding: 5px 35px; text-decoration: none; background-color: #2ec3dd; border: 0 none; }
.line .submit-button                            { display: block; line-height: 26px; font-size: 16px; font-weight: 700; color: #fff;     text-transform: uppercase;    padding: 5px 35px; text-decoration: none; background-color: #2ec3dd; border: 0 none; /* position: absolute; */    bottom: 23px;left: 0;    right: 0;    width: 100%; }
.line button.slim                               { line-height: 24px; font-size: 12px; font-weight: 700; }
.line button.link                               { line-height: 24px; font-size: 18px; font-weight: 300; padding: 0; background: none transparent; text-decoration: underline; color: #434a54; text-transform: none; }

.line select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 640 397.1' style='enable-background:new 0 0 640 397.1;' xml:space='preserve'%3E%3Cpolygon fill='%23434A54' points='318.7,397.1 640,78.4 561.6,0 318.7,240.3 78.4,0 0,78.4 '/%3E%3C/svg%3E%0A");
    background-position: calc(100% - 10px) 50%;
    background-repeat: no-repeat;
    background-size: auto 10px;
}

.line.line-no-margin                            { margin-bottom: 0; }

.line input:focus								{background-color: rgba(0, 0, 0, 0.07);transition: background 0.3s ease-in;}

.line.radio > div                               { display: block; float: left; margin-right: 10px; margin-top: 2px; }
.line.radio label                               { float: left; font-weight: 700; line-height: 25px; width: auto; margin-right: 6px; }
.radio, .checkbox                               { overflow: hidden; }
.line.radio > input[type="text"]                { height: 25px; width: 200px; margin-right: 6px; }
.checkbox label, .radio label                   { top: 0; }

form#message textarea                           { width: 100%; height: 320px; border: 2px solid rgba(61,145,183,0.15); padding: 12px; }
td form                                         { margin-bottom: 0; }

/* footer */

footer                                          { padding-bottom: 70px;padding-top: 5px; }
footer p                                        { font-size: 14px; color: #fff; opacity: 0.9; text-decoration: none; }

@media(max-width: 991px) {
footer p                                        { color: #4091b5; margin: 0 10px 10px; }
footer a                                        { color: #4091b5 !important; }
}

footer a                                        { font-size: 14px; color: #fff; font-weight: 700; opacity: 0.9; text-decoration: none; }
footer a:hover,
footer a:active,
footer a:focus                                  { opacity: 1; text-decoration: none; color: #FFC414; }

/* home */
.home-box                                       { padding: 15px 20px; }
.home-box a                                     { color: #fff; }
.home-box p                                     { margin-bottom: 10px; }
.home-box.home-box-normal                       { background-color: #EDB72F; color: #ffffff; }
.home-box.home-box-new-task                     { background-color: #e1aa04; color: #ffffff; padding: 50px 0 54px 30px; border: 0 none; color: #FFFFFF; font-size: 50px; line-height: 1; margin: 0; display: block; text-decoration: none; }
a.new-task span                                 { display: block; float: left; font-size: 100px; margin-right: 10px; }
.home-box.home-box-new-task:hover               { color: rgba(255,255,255,0.7); }

.pagination {

}

.pagination a {
    padding: 4px 10px;
    text-decoration: none;
    margin-right: 5px;
    border: 1px solid rgba(0,0,0,0.2);
    display: inline-block;
    margin-bottom: 5px;
}

.pagination a:hover, .pagination a.active {
    background-color: rgba(0, 0, 0, 0.07);
}


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Allowing overflow to be displayed
 */

.overflow-visible {
    overflow: inherit !important;
}

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.abstand {
    margin-bottom:40px;
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

#form-login {
    overflow: visible;
}

#passwortvergessenformular {
    overflow: visible;
}

table.mobile-table {
  width: 100%;
  border-collapse: collapse;
}
/* Zebra striping */
.mobile-table tr:nth-of-type(odd) {
  background: #eee;
}
.mobile-table th {
  background: #333;
  color: white;
  font-weight: 700;
}
.mobile-table td, .mobile-table th {
  padding: 6px;
  border: 1px solid #ccc;
  text-align: left;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (max-width: 767px) {

    body                                            { background-position: 0 350px; }
    .website-background .website-background-head    { height: 314px; }

    .container > .row > .grid { padding-left: 10px; padding-right: 10px; }
	header .nav-fluid-wrapper {margin-top:0px;}
    /* subnav */

    .subnav                             { position: inherit; left: 0; right: 0; top: 0; margin-bottom: 20px; overflow: hidden; }
    .subnav > ul                        { float: none; }
    .subnav > ul > li                   { margin: 0; display: block; float: none; }
    .subnav > ul > li > a               { margin: 0; display: inline-block; float: none; padding: 2px 0; }
    .subnav > ul > li:before            { content: ""; }

    .content-grid                       { padding-top: 20px; }
    .logo-wrapper                       { height: 40px; }
    footer                              { padding-bottom: 10px; }

    /* home */

    .home-box.home-box-new-task         { font-size: 30px; padding: 20px; }
    a.new-task span                     { font-size: 50px; }

    .line .translation-input-select     { width: 50%; }

}

@media only screen and (max-width: 1240px) {

    /* Make right box-text <p> break  */
    .content-right-inner .box.kontaktperson p {
        line-height: 20px;
    }

    .content-right-inner .box.kontaktperson p a {
        line-break: anywhere;
    }
}


/**************************************************
* CSS BY K. LENZIN
**************************************************/

/*
 * Make right box break under main content panel with full width
 */
@media only screen and (max-width: 992px) {
    .content-right-inner {
        float:none;
        margin-top: 10px;
    }
    .conversation-body .conversation-item-head h2 {
        display: inherit;
    }

    .conversation-body .conversation-item-head span {
        float: none;
    }

    /* CSS by C. Fischer */
    #article-1 .content-left-inner {
        min-height: inherit;
        margin-bottom: 10px;
        box-shadow: none;
        padding-bottom: 100px;
    }

    #article-1 .welcome-grid {
        padding-bottom: 10px;
    }

    /* END CSS by C. Fischer */
}

/**************************************************
* END OF CSS BY K. LENZIN
**************************************************/


@media only screen and (max-width: 768px) {
    .eingeloggt-als-mobile {
        left: 10px;
        max-width: 100%;
        padding-left: 10px;
    }

    .eingeloggt-als-mobile p {
        color: #4091b5;
        font-size: 14px;
        line-height: 1.25;
    }

    #agency_client {
        width: 100%;
    }

    .col-md-12 {
        clear: both;
    }

    .truncate {
        float:none;
        display: inline-block;
    }

    .slice {
        width: 100%;
    }

    /* Force table to not be like tables anymore */
    /* table.mobile-table, .mobile-table thead, .mobile-table tbody, .mobile-table th, .mobile-table td, .mobile-table tr {
        display: block;
    } */

    /* Hide table headers (but not display: none;, for accessibility) */
    /* .mobile-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .mobile-table td { */
        /* Behave  like a "row" */
        /* position: relative;
        padding-left: 50%;
        text-align: right;
    }

    .mobile-table > thead > tr > th,
    .mobile-table > tbody > tr > th,
    .mobile-table > thead > tr > td,
    .mobile-table > tbody > tr > td {
        border-top: none;
        border-width: 0;
    }

    .mobile-table td:before { */
        /* Now like a table header */
        /* position: absolute; */
        /* Top/left values mimic padding */
        /*top: 6px;*/
        /* left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
    } */

    /*
    Label the data
    */
    /* .mobile-table td:nth-of-type(1):before { content: "Rechnungs-Nr."; }
    .mobile-table td:nth-of-type(2):before { content: "Rechnungsdatum"; }
    .mobile-table td:nth-of-type(3):before { content: "Totalbetrag"; }
    .mobile-table td:nth-of-type(4):before { content: "Download"; }

    .mobile-table.mobile-table-project td:nth-of-type(1):before { content: "Projektname"; }
    .mobile-table.mobile-table-project td:nth-of-type(2):before { content: "Besucher-Statistik"; }
    .mobile-table.mobile-table-project td:nth-of-type(3):before { content: "Aufschaltung"; }
    .mobile-table.mobile-table-project td:nth-of-type(4):before { content: "Details"; }
    .mobile-table.mobile-table-project td:nth-of-type(5):before { content: "REDAXO"; }

    .mobile-table.mobile-table-offer td:nth-of-type(1):before { content: "Domain"; }
    .mobile-table.mobile-table-offer td:nth-of-type(2):before { content: "Datum"; }
    .mobile-table.mobile-table-offer td:nth-of-type(3):before { content: "Status"; }
    .mobile-table.mobile-table-offer td:nth-of-type(4):before { content: "Detail"; }

    .mobile-table.mobile-table-domain td:nth-of-type(1):before { content: "Domain"; }
    .mobile-table.mobile-table-domain td:nth-of-type(2):before { content: "Status"; }
    .mobile-table.mobile-table-domain td:nth-of-type(3):before { content: "Erneuerungsdatum"; }
    .mobile-table.mobile-table-domain td:nth-of-type(4):before { content: "Preis/Jahr"; }

    .mobile-table.mobile-table-home1 td:nth-of-type(1):before { content: "Projektname"; }
    .mobile-table.mobile-table-home1 td:nth-of-type(2):before { content: "Statistik"; }
    .mobile-table.mobile-table-home1 td:nth-of-type(3):before { content: "Redaxo"; }

    .mobile-table.mobile-table-home2 td:nth-of-type(1):before { content: "Titel"; }
    .mobile-table.mobile-table-home2 td:nth-of-type(2):before { content: "erfasst am"; }

    .mobile-table.mobile-table-task-done td:nth-of-type(1):before { content: "ID"; }
    .mobile-table.mobile-table-task-done td:nth-of-type(2):before { content: "Titel"; }
    .mobile-table.mobile-table-task-done td:nth-of-type(3):before { content: "Projekt"; }
    .mobile-table.mobile-table-task-done td:nth-of-type(4):before { content: "Mitarbeiter"; }
    .mobile-table.mobile-table-task-done td:nth-of-type(5):before { content: "erfasst am"; }
    .mobile-table.mobile-table-task-done td:nth-of-type(6):before { content: "Abschluss"; }
    .mobile-table.mobile-table-task-done td:nth-of-type(7):before { content: "verrechnet?"; }

    .mobile-table.mobile-table-task-open td:nth-of-type(1):before { content: "ID"; }
    .mobile-table.mobile-table-task-open td:nth-of-type(2):before { content: "Titel"; }
    .mobile-table.mobile-table-task-open td:nth-of-type(3):before { content: "Projekt"; }
    .mobile-table.mobile-table-task-open td:nth-of-type(4):before { content: "Mitarbeiter"; }
    .mobile-table.mobile-table-task-open td:nth-of-type(5):before { content: "erfasst am"; }
    .mobile-table.mobile-table-task-open td:nth-of-type(6):before { content: "Termin"; }
    .mobile-table.mobile-table-task-open td:nth-of-type(7):before { content: "Prio"; }

    .mobile-table.mobile-table-subscription td:nth-of-type(1):before { content: "Artikel"; }
    .mobile-table.mobile-table-subscription td:nth-of-type(2):before { content: "Domain"; }
    .mobile-table.mobile-table-subscription td:nth-of-type(3):before { content: "Erneuerungsdatum"; }
    .mobile-table.mobile-table-subscription td:nth-of-type(4):before { content: "Preis/Jahr"; }

    .mobile-table td, .mobile-table td span, .mobile-table a, .mobile-table.mobile-table-home1 .line button.link {
        font-size: 16px;
    }

    .mobile-table.mobile-table-home1 .line button {
        display: inline;
    }

    .mobile-table.mobile-table-home1 a.dezent,
    .mobile-table.mobile-table-home2 a.dezent {
        word-wrap: break-word;
        display: inline-block;
        width: 150px;
    }

    .mobile-table td form {
        display: inline-block;
    } */
}

@media only screen and (max-width: 360px) {
    .truncate {
        width: 170px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {

    .home-box.home-box-new-task { padding: 50px 0 55px 15px; }

}

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }

    a.funktion {
    	display:none;
    }

    footer {
    	display:none;
    }

    td span {
    	display:none;
    }

    header {
    	display:none;
    }

    th {
    	font-weight:700;
    }

	.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
	line-height: 1.1;
	}

    td, th, p {
        font-size:14px;
    }

}

/** -- CSS by JS -- */
.welcome-container {
    padding: 0px 10px 0px;
}

.welcome-container h1 {
	font-weight: 400;
    font-size: 36px;
    line-height: 1.3;
    margin-bottom: 34px;
    border: 0;
    padding: 0;
    color: #0e5782;
    letter-spacing: 0.8px;
    font-family: 'Roboto Slab', sans-serif;
}

@media(max-width: 767px) {
    .welcome-container h1 {
    	font-size: calc(36px * .8);
    }
}

.welcome-container .txt {
    width: 100%;
    color: black;
}

.welcome-container .warning {
    font-weight: bold;
    color: #0e5782;
    border-top: 3px solid #0e5782;
    padding-top: 25px;
    padding-bottom: 25px;
    background: rgb(255,255,255);
    background: linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(230,230,230,1) 100%);
    padding-left: 25px;
    padding-right: 25px;
    margin-right: -25px;
    margin-left: -25px;
    margin-top: 25px;
}

.welcome-container .warning a {
    font-weight: bold;
}

/* ----- */

.k_email_rechnung_wrapper {
    background-color: #f5f5f5;
    margin: 20px -20px;
    padding: 20px 20px 10px;
}

.k_email_rechnung_wrapper .mark {
    border-bottom: 2px solid #434A54;
    font-weight: bold;
}

.k_email_rechnung_wrapper p {
    margin-bottom: 20px;
}

.kundendaten_form {
    overflow: visible;
}

.mCSB_horizontal.mCSB_inside > .mCSB_container {
    margin-bottom: 18px !important;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal {
    height: 12px !important;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
    height: 6px !important;
    margin: 3px auto !important;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail {
    margin: 5px 0 !important;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: #0e5782 !important;
}

.mCSB_scrollTools .mCSB_draggerRail {
    background-color: #ddd !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
}