@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,700);

#doku {
	overflow-y: hidden;
}

:root {
  --white: white;
  --black: black;
  --red: red;
  --green: green;
  --blue: #1a58a0;
  --yellow: #ffffb3;
  --orange: #fa7e00;
  --lime: #68b300;
  --aqua: #7082db;
  --lightyellow: lightyellow;
  --lightblue: lightblue;
  --salmon: salmon;
  --deeppink: #ff80ff;
  --purple: #7d9bfc;
  --teal: teal;
  --indigo: indigo;
  --olive: #647bfb
}

.login-page, .register-page {
	background:var(--white, white) url(../img/login-bg.jpg);
}

.login-logo img {
	width:100%;
	height:auto;
}

.login-box-body, .register-box-body {
    background: #fff;
	opacity:0.9;
    padding: 20px;
    border-top: 0;
    color: #666;
	border-radius:5px;
}

.btn-primary { 
	background-color: var(--blue, blue); 
	border:none;
}

.form-control:focus {
    border-color: var(--blue, blue);
    box-shadow: none;
}

.btn-primary:hover, .btn-primary:active, .btn-primary.hover {
    background-color: var(--orange, orange);
}

.offline { display:none; position:fixed; top:0; z-index:100; }

.content-wrapper {
    min-height: calc(100vh - 50px) !important;
}


#doku #rubriktitle {
	position:fixed;
	text-align:center;
	width:240px;
	left: calc(50% - 5px);
	margin:0 auto;
	font-weight:bold;
	font-size:1.2em;
	top:20px;
	background:none;
	z-index:9999;
	color:#fff;
}

#doku #ring-r {
	position:fixed;
	background:url("../img/ring.png") no-repeat top;
	width:32px;
	height:67px;
	right:25vw;
	top:17px;
	z-index:1100;
}

#doku #ring-l {
	position:fixed;
	background:url("../img/ring.png") no-repeat top;
	width:32px;
	height:67px;
	left: calc(25vw + 230px);
	top:17px;
	transform: scaleX(-1);
	z-index:1100;
}

#doku #tablock.blue, #doku .tabContainer section.blue, #doku .tabContainer section.blue section, #doku .tabContainer section.blue nav ul li a::after, #doku .fix nav ul li a.blue::after {
	background:#22476f;
}

#doku #tablock.lightblue, #doku .tabContainer section.lightblue, #doku .tabContainer section.lightblue section, #doku .tabContainer section.lightblue nav ul li a::after, #doku .fix nav ul li a.lightblue::after {
	background:#507e8a;
}

#doku #tablock.green, #doku .tabContainer section.green, #doku .tabContainer section.green section, #doku .tabContainer section.green nav ul li a::after, #doku .fix nav ul li a.green::after {
	background:#257c4e;
}

#doku #tablock.yellow, .tabContainer section.yellow, #doku .tabContainer section.yellow section, #doku .tabContainer section.yellow nav ul li a::after, #doku .fix nav ul li a.yellow::after {
	background:#ebb33c;
}

#doku #tablock.orange, #doku .tabContainer section.orange, #doku .tabContainer section.orange section, #doku .tabContainer section.orange nav ul li a::after, #doku .fix nav ul li a.orange::after {
	background:#e56c13;
}

#doku #tablock.red, #doku .tabContainer section.red, #doku .tabContainer section.red section, #doku .tabContainer section.red nav ul li a::after, #doku .fix nav ul li a.red::after {
	background:#b62233;
}

#doku #tablock.purple, #doku .tabContainer section.purple, #doku .tabContainer section.purple section, #doku .tabContainer section.purple nav ul li a::after, #doku .fix nav ul li a.purple::after {
	background:#4b194e;
}

#doku #tablock.lightgrey, #doku .tabContainer section.lightgrey, #doku .tabContainer section.lightgrey section, #doku .tabContainer section.lightgrey nav ul li a::after, #doku .fix nav ul li a.lightgrey::after {
	background:#c3c3c3;
}

#doku .tabs nav, #doku .subtabs nav {
	text-align: center;
}

#doku .tabs nav ul, #doku .subtabs nav ul {
	position: fixed;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: flex;
	margin: 0 auto;
	padding: 0;
	top:59px;
	list-style: none;
	-ms-box-orient: horizontal;
	-ms-box-pack: center;
	-webkit-flex-flow: row wrap;
	-moz-flex-flow: row wrap;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-justify-content: center;
	-moz-justify-content: center;
	-ms-justify-content: center;
	justify-content: center;
	z-index:200;
}


#doku .subtabs nav ul {
    top: 78px;
}

#doku .tabs nav ul li, #doku .subtabs nav ul li {
	position: relative;
	z-index: 1;
	display: block;
	margin: 0;
	text-align: center;
}

#doku .tabs nav a, #doku .subtabs nav a {
	position: relative;
	display: block;
	white-space: nowrap;
	line-height: 1.3;
	padding-bottom:15px;
	margin-left:0;
}

#doku .subtabs nav a {
	line-height: 1.3;
	padding-bottom:0px;
}

#doku .tabs nav a span, #doku .subtabs nav a span {
	font-size: 0.75em;
}



#doku .tabs nav a:focus, #doku .subtabs nav a:focus {
	outline: none;
}


/* Content */


#doku .tabContainer section, #doku .tabContainer section.content {
	overflow: hidden;
	xwidth: calc(100% - 230px);
	height: calc(100vh);
	@supports (-webkit-appearance:none) {
		.os-android & {
		  height: calc(100vh - 100px);
		}
	}
}

#doku .tabContainer section.content {
	height: calc(100vh - 107px);
	@supports (-webkit-appearance:none) {
		.os-android & {
		  height: calc(100vh - 107px);
		}
	}
}

#doku .tabs, #doku .subtabs {
	position: fixed;
	margin-top: 45px;
	width: 100%;
	font-weight: 300;
	font-size: 1.25em;
	z-index:201;
}

#doku .subtabContent {
	margin-top:60px;
}


#doku section article, #doku .tabContainer section article {
	overflow-y: auto;
	 border:10px solid #f3f3f3;
	 border-top:160px solid #efefef;
 
}

#doku section article.wkk, #doku .tabContainer section article.wkk {

	 border-top:none;
 
}

#doku section h2, #doku .tabContainer section h2 {
	position:relative;
	width:300px;
	top:40px;
	left:50%;
	margin-left:-150px;
	font-weight: 600;
	font-size:1em;
	color:#d6d6d6;
	z-index:999;
}

#doku section article p, #doku .tabContainer section article p {
	color:#212121;
	font-size: 0.6em;
	text-align:left;
}

#doku .fix {
	max-width: 100%;
}

#doku .fix nav {
	margin-left:1.2vw;
}

#doku .fix .subtabs nav {
	margin-left:3vw;
}

#doku .fix nav ul li {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	text-align:center;
}

#doku .fix nav ul li a {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right:16px;
	padding-left:11px;
	color: #fff;
}

#doku .fix nav ul li a i {
	display:inline-block;
}


#doku .fix nav ul li a:hover,
#doku .fix nav ul li a:focus {
	color: #fff;
}


#doku .fix nav ul li a span {
	font-family: 'Raleway', Arial, sans-serif;
	font-weight: 500;
    font-size: 12.5px;
	padding:4px;
}


#doku .fix nav ul li a::after {
	position: absolute;
	top: 0;
	right: -5px;
	bottom: 0;
	left: 0;
	z-index: -1;
	outline: 1px solid transparent;
	border-radius: 7px 7px 0 0;
	background: #cccccc;
	content: '';
	webkit-transform: perspective(15px) rotateX(0.93deg) translateZ(-1px);
	transform: perspective(15px) rotateX(0.93deg) translateZ(-1px);
	webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}



#doku .content article, #doku .content article, #doku .tabContent article, #doku .subtabContent article {
	position:fixed;
	top:105px;
	xwidth: calc(98% - 230px);
	xleft: calc(1vw + 230px);
	margin:0 15px;
	font-size: 0.52em;
    font-weight: 500;
	background:#f3f3f3;

	height: calc(100vh - 118px);
	@supports (-webkit-appearance:none) {
		.os-android & {
		  height: calc(100vh - 118px);
		}
	}
	
}

#doku .content article {
	height: calc(100vh - 180px);
	height: calc(var(--vh, 100vh) - 180px);
	@supports (-webkit-appearance:none) {
		.os-android & {
		  height: calc(100vh - 180px);
		  height: calc(var(--vh, 100vh) - 180px);
		}
	}
}

#doku .shortprofile {
	position:absolute;
	z-index:200;
	padding:85px 20px 0 40px;
	width:98%;
	line-height:1.1;
	font-size:1.4em;
	background-image: url("../img/wz.png");
	background-size: 500px;
	background-repeat: no-repeat;
	background-position:center;
}

#doku .shortprofile img {
	position:relative;
	float:left;
	margin:0 10px 0 0;
	max-width:80px;
	border:3px solid #fff;
	-webkit-box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.25);
	box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.25);
}

#doku .shortprofile h3 {
	margin: auto;
	margin-top:0px;
	font-weight: 500;
	font-size:1.2em;
	color:#333;
}

#doku .status {
  position:relative;
  height: 12px;
  width: 12px;
  top:1px;
  left:3px;
  border-radius: 50%;
  display: inline-block;
}

#doku .status.present {
  background-color: #15a559;
}

#doku .status.absent {
  background-color: #b11111;
}

#doku .status.deceased {
  background-color: #5a5a5a;
}


#doku .shortprofile strong {
	margin: auto;
	font-weight: 500;
	font-size:0.8em;
	color:#333;
}

#doku .shortprofile small {
	margin: auto;
	font-weight: 500;
	font-size:0.8em;
	color:#74777b;
}

#doku .fktbar .btn {
	background: none;
	padding: 0 4px;
}

#doku .fktbar .btn i{
	color:#22476f;
}

#doku .fktbar {
	position:fixed;
	z-index:999;
	right:30px;
	padding:0 10px;
}

#doku .info {
	margin-bottom:3px;
}

#doku .fa-birthday-cake {
	color:#881b1b;
}

#doku .fa-exclamation-triangle {
	color:#dea31d;
}

.tabstatus {
	position:fixed !important;
	right:10px;
	bottom:15px;
}

#doku .tabbox {
	float:left;
	width:50%;
	padding:15px;
}

#doku .tabbox h4 {
	line-height:1;
	margin:10px 5px;
	color:#464646;
}


#doku .tabbox table  {
	width:100%;
	border-bottom:1px solid #ddd;
}

#doku .tabbox table th  {
	text-align:left;
	vertical-align:top;
	width:50%;
	font-size:0.8em;
	font-weight:500;
	padding:5px;
}

#doku .subtabs nav li.ui-tabs-active a {
	color: #36373a !important;
}

#doku .subtabs nav li.ui-tabs-active a::after {
	background:#f3f3f3 !important;
}


#doku, .tabContainer {
	-webkit-box-shadow: 4px -4px 6px 1px rgba(0,0,0,0.3);
	-moz-box-shadow: 4px -4px 6px 1px rgba(0,0,0,0.3);
	box-shadow: 4px -4px 6px 1px rgba(0,0,0,0.3);
}

#doku .fix nav ul li a::after {
	-webkit-box-shadow: 4px -4px 6px 1px rgba(0,0,0,0.3);
	-moz-box-shadow: 4px -4px 6px 1px rgba(0,0,0,0.3);
	box-shadow: 4px -4px 6px 1px rgba(0,0,0,0.3);
}

#doku li.ui-tabs-active {
	top:3px;
}

#doku .subtabs nav ul li.ui-tabs-active a::after  {
	box-shadow:none;
}


#doku table { 
	table-layout:auto;
	border-collapse: collapse;
	width:99%;
	font-size:1.5em;
}

#doku tr:nth-child(even) {background-color: #ddd;}

#doku table td, #doku table th {
	padding:15px;
	font-size:1.2em;
	text-align:left;
	border:1px solid #bbb;
}

#doku table td.hook {
	padding:5px;
	font-size:2.2em;
	text-align:center;
}

#doku table td i.check {
	color:orange;
}

#doku table td ul {
	list-style-position: inside;
	padding:0;
	margin:0;
	list-style:none;
}

#doku table td li {
	display:inline-block;
	padding:25px 0 0 0;
	width:20px;
	height:40px;
	font-size:1em;
	font-family:arial;
	text-align:center;
	border:1px solid #ccc;
	border-top:none;
	border-bottom:none;
}

#doku table td.rider {
	padding:0;
	width:301px;
}

#doku table td.rider .rider-diag {
	width:20px;
	height:40px;
	background:url(../img/rider_diag.png) no-repeat center;
}

#doku table td.rider .rider-risk {
	width:20px;
	height:40px;
	background:url(../img/rider_risk.png) no-repeat center;
}

#doku table td.rider .rider-icd {
	width:20px;
	height:40px;
	background:url(../img/rider_icd.png) no-repeat center;
}

#doku table td.rider .red {
	filter: hue-rotate(0deg) brightness(80%);
}

#doku table td.rider .green {
	filter: hue-rotate(90deg) brightness(100%);
}

#doku table td.rider .blue {
	filter: hue-rotate(220deg) brightness(100%);
}

#doku table td.rider .orange {
	filter: hue-rotate(15deg) brightness(150%);
}

#doku table td.rider .yellow {
	filter: hue-rotate(60deg) brightness(180%);
}