/* Fonts */

@font-face {
    /* Noto Sans regular */
    font-family: "Noto Sans";
    src: url('fonts/noto-sans_regular.ttf') format("truetype");
	font-weight:normal;
}
@font-face {
    /* Noto Sans regular italic */
    font-family: "Noto Sans";
    src: url('fonts/noto-sans_italic.ttf') format("truetype");
	font-weight:normal;
	font-style:italic;
}
@font-face {
    /* Noto Sans light */
    font-family: "Noto Sans";
    src: url('fonts/noto-sans_light.ttf') format("truetype");
	font-weight:300;
}
@font-face {
    /* Noto Sans light italic */
    font-family: "Noto Sans";
    src: url('fonts/noto-sans_light-italic.ttf') format("truetype");
	font-weight:300;
	font-style:italic;
}
@font-face {
    /* Noto Sans semibold */
    font-family: "Noto Sans";
    src: url('fonts/noto-sans_semibold.ttf') format("truetype");
	font-weight:600;
}
@font-face {
    /* Noto Sans semibold italic */
    font-family: "Noto Sans";
    src: url('fonts/noto-sans_semibold.ttf') format("truetype");
	font-weight:600;
	font-style:italic;
}
@font-face {
    /* Noto Sans bold */
    font-family: "Noto Sans";
    src: url('fonts/noto-sans_bold.ttf') format("truetype");
	font-weight:700;
}
@font-face {
    /* Noto Sans bold italic */
    font-family: "Noto Sans";
    src: url('fonts/noto-sans_bold-italic.ttf') format("truetype");
	font-weight:700;
	font-style:italic;
}


@font-face {
    /* Noto Naskh Arabic regular */
    font-family: "Noto Sans Arabic";
    src: url('fonts/noto-naskh-arabic_regular.ttf') format("truetype");
	font-weight:normal;
}
@font-face {
    /* Noto Naskh Arabic bold */
    font-family: "Noto Sans Arabic";
    src: url('fonts/noto-naskh-arabic_bold.ttf') format("truetype");
	font-weight:700;
}

* {
	padding:0;
	margin:0;
	outline:none;
    border-radius: 0;
	scrollbar-width: thin;
	scrollbar-color: #595A5F #EBEAF1;
}
*::-webkit-scrollbar {
	width: 12px;
}
*::-webkit-scrollbar-track {
	background: #EBEAF1;
}
*::-webkit-scrollbar-thumb {
	background-color: #595A5F;
	border-radius: 20px;
	border: 3px solid #EBEAF1;
}


html, body {
	margin: 0;
	padding: 0;
	z-index: 1;
	min-height:100vh;
}
body {
	font-size:16px;
	line-height:1.5em;
}
body, input, textarea, select, button {
	font-family: "Noto Sans", Verdana, sans-serif;
	color:#595A5F;
}
input, textarea, select, button {
	font-size:1rem;
	background-color:#fff;
}

.fa, body.fa input, body.fa textarea, body.fa select  {
	font-family: "Noto Sans Arabic", Arial, sans-serif !important;
}
.fa {
	font-weight:normal !important;
}
.off {
	position:absolute;
	left:-9999px;
}
/* 	Farben 
	berry = #823963 // R=130 G=57 B=99
	dark lilac = #8797B7 // R=135 G=151 B=183
	light lilac = #D1D8EF // R=209 G=216 B=239

	dark grey = #595A5F // R=89 G=90 B=95
	light grey = #EBEAF1 // R=235 G=234 B=241

*/


.container {
	width:94vw;
	max-width:1200px;
	height:100%;
	margin:0 auto;
}
a {
	color:#823963;
}
a:hover, a:focus-visible {
	color:#8797B7;
}
sup {
    position: relative;
    line-height: 1em;
    font-size: 75%;
}
*[data-title] {
	position:relative;
	overflow:visible;
}
*[data-title]:hover::after {
  content: attr(data-title);
  position: absolute;
  z-index: 5;
  bottom: -100%;
  left: 0;
  width:auto;
  white-space:nowrap;
  font-size:0.75rem;
  background-color:#fff;
  padding:0 3px;
  border:1px solid #595A5F;
  color:#595A5F;
}
#logout button[data-title]:hover::after {
	bottom: -48%;
	line-height: 2em;
}

.flex_container {
	display:flex;
	flex-wrap: wrap;
	justify-content:space-between;
	align-items: flex-start;
	/*align-content: flex-start;
	gap: 3rem;*/
	flex-direction: row;
}
/*.flex_container.unspaced {
	gap: 1rem;
}*/
.flex_container.aligned {
	justify-content:flex-start;
}

.flex_item {
	width: calc(100%);
	margin-bottom:3rem;
	/*flex-grow: 1;*/
}
.flex_item .flex_item:last-child {
	margin-bottom:0;
}
.flex_item.rel {
	position:relative;
}
.flex_col1 {
}

.flex_col2 {
	width: calc(50% - 3rem);
}
.flex_col21 {
	width: calc(66.6% - 3rem);
}
.flex_col3 {
	width: calc(33.3% - 3rem);
}
.flex_col31 {
	width: calc(75% - 3rem);
}
.flex_col4 {
	width: calc(25% - 3rem);
}
.flex_col5 {
	width: calc(20% - 3rem);
}
.flex_col6 {
	width: calc(16.6% - 3rem);
}
.aligned .flex_item {
	margin-right:1rem;
}
.unspaced .flex_item {
	margin-bottom:1rem;
}
.unspaced .flex_col2 {
	width: calc(50% - 1rem);
}
.unspaced .flex_col21 {
	width: calc(66.6% - 1rem);
}
.unspaced .flex_col3 {
	width: calc(33.3% - 1rem);
}
.unspaced .flex_col31 {
	width: calc(75% - 2rem);
}
.unspaced .flex_col4 {
	width: calc(25% - 1rem);
}
.unspaced .flex_col5 {
	width: calc(20% - 1rem);
}
.unspaced .flex_col6 {
	width: calc(16.6% - 1rem);
}

.flip_left {
	order: 1;
}
.flip_right {
	order: 2;
}

/* Header */
header {
	height:90px;
	width:100%;
	position:fixed;
	left:0;
	top:0;
	z-index:20;
	background-color:#823963;
	padding-top:10px;
}
body.expert header {
	background-color:#D1D8EF;
}
header .flex_container {
	gap:0;
	justify-content:space-between;
}
header input[type="submit"] {
	margin-bottom:0;
	color:#823963;
	background-color:#fff;
	border: none;
	width: auto;
}
header input[type="submit"]:hover, header input[type="submit"]:focus {
    color: #fff;
}
.logo {
	display:inline-block;
	width:50%;
	max-width:270px;
	height:calc(100% - 10px);
	vertical-align:top;
}
.logo a {
	text-decoration:none;
	display: inline-block;
	height: 100%;
}
.logo a img {
	width: auto;
	height: auto;
	display: inline-block;
	max-height: 100%;
	max-width: 100%;
}
.navbutton, .navbutton .fa-times,
.infobutton, .infobutton .fa-times {
	display:none;
}
.service_nav {
	width:50%;
	max-width:200px;
	text-align:right;
	float:right;
}
.service_nav.wide {
	width:50%;
	max-width:250px;
	text-align:right;
	float:right;
}
.service_nav form {
	display:inline-block;
	vertical-align: top;
}
form#switch {
	margin-right: 1rem;
}
#switch span {
	color:#000;
}
.service_nav button{
	background:none;
	color:#D1D8EF;
	border:none;
	cursor:pointer;
	font-size:1.5rem;
	width:auto;
	margin-bottom:0;
}
.service_nav a {
	color:#D1D8EF;
	font-size:1.25rem;
}
body.expert .service_nav button, body.expert .service_nav a {
	color: #823963;
}
#logout a {
	margin-right:1rem;
}
.service_nav a:hover, .service_nav a:focus, .service_nav button:hover, .service_nav button:focus  {
	color:#fff;
}
body.expert .service_nav button:hover, body.expert .service_nav button:focus, body.expert .service_nav a:hover, body.expert .service_nav a:focus {
	color: #595A5F;
}

.lang_nav {
	float:right;
}
.lang_nav li {
	list-style:none;
	display:inline-block;
	padding:0 5px;
	border-right:1px solid #D1D8EF;
	font-size:0.875rem;
	line-height:1.1em;
}
.lang_nav li:last-child {
	border:none;
}
.lang_nav li a {
	color:#D1D8EF;
	text-decoration:none;
	border-bottom:1px solid transparent;
	font-size:1em;
}
.lang_nav li a:hover, .lang_nav li a:focus, .lang_nav li a.current {
	color:#fff;
	border-color:#fff;
}

.navbutton {
	display:none;
	vertical-align: top;
	width:40px;
	height:40px;
	cursor:pointer;
	font-size: 1.75rem;
	line-height: 1.5em;
	color: #D1D8EF;
	text-align:right;
}
.navbutton:hover {
	color:#fff;
}
body.expert .navbutton {
	color: #823963;
}
body.expert .navbutton:hover {
	color: #595A5F;
}
.navbutton i, .infobutton i {
	padding-right:0;
}
.navbutton.open .fa-bars, .infobutton.open .fa-info-circle {
	display:none;
}
.navbutton.open .fa-times, .infobutton.open .fa-times {
	display:inline-block;
}

/* Navigation */

nav {
	/*width:52%;*/
	width: calc(100% - 470px);
	height:auto;
	text-align:left;
	padding-top:0;
	display: inline-block;
	vertical-align: bottom;
}
nav ul {
	padding-left:0;
}
nav li {
	list-style:none;
	display:inline-block;
	color:#D1D8EF;
	font-weight:300;
}
nav > ul > li {
	position:relative;
	margin-right:1.5rem;
}
nav > ul > li > span {
	display:inline-block;
	color:inherit;
}
nav > ul > li:last-child {
	margin-right:0;
}
nav li a {
	text-decoration:none;
	font-size:1rem;
	line-height:1.5em;
	font-weight:inherit;
	display:inline-block;
	color:inherit;
	border-bottom:1px solid transparent;
}
nav li a:hover, nav li a:focus {
	color:inherit;
}
nav li:hover, nav li.active, nav li a.current {
	color:#fff;
}
nav li.active span, nav li a.current {
	border-bottom:1px solid #fff;
}

body.expert nav li {
	color:#823963;
}
body.expert nav li:hover, body.expert nav li.active, body.expert nav li a.current {
	color:#595A5F;
}
body.expert nav li.active span, body.expert nav li a.current {
	border-color:#595A5F;
}

.subnav {
	position:absolute;
	z-index:2;
	background-color:#823963;
	left:-9999px;
	min-width:calc(100% + 1rem);
	padding:0.75rem 0.5rem 0 0.5rem;
	box-sizing:border-box;
}
body.expert .subnav {
	background-color:#D1D8EF;
}
li:hover .subnav, a:focus + .subnav {
	left:-0.5rem;
}
nav .subnav li {
	width:100%;
	padding-bottom:0.5rem;
}
nav .subnav li a {
	line-height:1.3em;
	padding-bottom:3px;
}


/* Inhalt / Content */

main {
	width:100%;
	/*padding-top:120px;*/
	min-height: calc((100vh - 2.5vw) - 50px);
	padding-bottom:2.5vw;
}
section {
	width:100%;
}
.page {
	padding-top:calc(120px + 2.5vw);
	/*padding-bottom:2.5vw;*/
	/*min-height:calc(100vh - 5vw - 120px - 50px);*/
}
.page > .flex_item {
	position:relative;
}
.content {
	padding-top:0;
	padding-bottom:30px;
}
.content aside {
	background-color:#efefee;
	padding:15px;
	box-sizing:border-box;
}
.content aside img {
	width:100%;
	height:auto;
}


h1 {
	font-size:1.5em;
	line-height:1.5em;
	margin-bottom:1rem;
	font-weight:normal;
	width:100%;
}
h2 {
	font-size:1.25em;
	line-height:1.5em;
	margin-bottom:1rem;
	font-weight:normal;
	width:100%;
}
form h2 {
	background-color: #EBEAF1;
	padding-left: 0.5rem;
	border-radius: 7px;
	box-sizing: border-box;
}
h3 {
	font-size:1em;
	line-height:1.5em;
	margin-bottom:0.5rem;
	font-weight:600;
	width:100%;
}
p {
	margin-bottom:1rem;
}
a.external {
	display:inline-block;
}
.content ul {
	padding-left:1rem;
}
.content li {
	/*list-style-type: symbols(cyclic '○' '●');*/
	list-style:square;
	padding-bottom:0.5rem;
}
q {
	display:block;
	quotes: "«" "»" "‹" "›"
}

.successful_action {
	position: absolute;
	z-index:15;
	color:#823963;
	background-color: #D1D8EF;
	border:1px solid #823963;
	top: 3rem;
	width: 50%;
	left:25%;
	max-width: 600px;
	padding:2rem;
	box-sizing:border-box;
	text-align:center;
}
.successful_action i {
	position:absolute;
	top:5px;
	right:3px;
	cursor:pointer;
}

.slidup h1, .slidup > h2 {
	cursor:pointer;
}
.slidup .toggle_content {
	display:none;
}
.protect {
    position: absolute;
    width: 105%;
    height: 105%;
    margin-top: -2.5%;
    left: -2.5%;
    background: rgba(255,255,255,0.5);
}

.video_icon {
	cursor:pointer;
	color: #823963;
	margin-bottom:50px;
}
.video_icon i {
	font-size:3rem;
	display:inline-block;
	vertical-align:middle;
	padding-right:1rem;
}
.video_icon span {
	display:inline-block;
	vertical-align:middle;
	width:calc(100% - 4.5rem);
	text-decoration:underline;
}
.video_icon:hover, .video_icon:focus {
	color: #595A5F;
}
.video_container {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-top: 56.25%;
	margin-bottom:2rem;
}
iframe.video {
	border:none;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

.page ul, .page ol {
	padding-left:1rem;
}
.page li {
	padding-bottom:1rem;
}
.page ul li {
	list-style:square;
}
.page ol li {
	list-style:decimal;
}
table {
	border-spacing: 0;
	width:100%;
}
table.patients, form + table {
	margin-top:2rem;
}
#main table, table.new_users {
	margin-bottom:2rem;
}
table th, table td {
	padding:2px 5px;
	border-right:1px solid #595A5F;
	vertical-align:top;
}
table th {
	text-align:left;
	font-weight:normal;
	background-color:#595A5F;
	border-color:#333;
	color:#fff;
}
table tr.hidden {
	display:none;
}
table th:first-child {
	border-top-left-radius:7px;
}
table th:last-child {
	border-top-right-radius:7px;
}
table th:last-child, table td:last-child {
	border-right:none;
}
table tr:last-child td {
	border-bottom:none;
}
table tr:last-child td:first-child {
	border-bottom-left-radius:7px;
}
table tr:last-child td:last-child {
	border-bottom-right-radius:7px;
}
table tr.even td {
	background-color:#EBEAF1;
}
table tr[data-status="0"] td {
	text-decoration:line-through;
} 

a.flex_item.page_link:last-child {
	text-align:right;
}
a.flex_item.page_link:first-child {
	text-align:left;
}

.patientslist {
	margin-top:2rem;
}

.implantation_pictures img, .checkup_pictures img, .explantation_pictures img {
	width:100%;
	height:auto;
	cursor:pointer;
}
#opg .implantation_opg img, #opg .explantation_opg img, #opg .checkup_opg img {
	width:100%;
	height:auto;
}
.implantation_pictures i, .checkup_pictures i, .explantation_pictures i, .file-input i.fa-file-pdf {
	cursor:pointer;
	font-size: 3.75rem;
	color: #823963;
}
.implantation_pictures i:hover, .checkup_pictures i:hover, .explantation_pictures i:hover {
	color: #8797B7;
}
.implantation_pictures .flex_item, .checkup_pictures .flex_item, .explantation_pictures .flex_item {
	flex-grow: 0;
}

.file-input img {
	width:auto;
	max-width:100%;
	height:80px;
	cursor:pointer;
	margin-bottom:0.5rem;
}
.file-input i.fa-file-pdf {
	margin-bottom:1rem;
}
.file-input .implantation_opg, .file-input .implantation_photo,
.file-input .checkup_opg, .file-input .checkup_photo,
.file-input .explantation_opg, .file-input .explantation_photo {
	min-height:134px;
}

table.implants + h3 {
	padding-top:3rem;
}
.copy_code, .copy_opg_code {
	cursor:pointer;
	text-decoration:underline;
}

/* File Upload */

input.file {
  opacity: 0;
  width: 0.1px;
  height: 0.1px;
  position: absolute;
}
..flex_col5.file-input {
	flex-grow:0;
	flex-basis: calc(20% - 1rem);
}

.file-input label:not(.invalid) {
  display: block;
  position: relative;
  width: 100%;
  max-width: 300px;
  padding:10px;
  box-sizing:border-box;
  background-color: #8797B7;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 3rem;
  border-radius:7px;
}
.file-input label:hover, .file-input label:focus {
	background-color: #595A5F;
}
.file-input label.hidden {
	display:none;
}

.file-name {
  position: absolute;
  bottom: -3rem;
  left: 10px;
  font-size: 0.85rem;
  color: #595A5F;
}


/* Modal / Popup */

.modal {
  display: none;
  position: fixed;
  z-index: 30;
  padding-top: 10vh;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgba(89,90,95,0.8);
}
.modal.open {
	display:block;
}

.modal-content {
  position: relative;
  margin: auto;
  padding: 0;
  width: auto;
  width: 94vw;
  max-width:1200px;
  height:80vh;
  /*text-align:center;*/
  overflow-y : auto;
}
.modal-content img {
  max-height:79vh;
  height:auto;
  max-width: 100%;
  margin: 0 auto;
  display: block;
}
.modal-content embed {
  height:100%;
  width: 100%;
}
.modal-close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
  cursor:pointer;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}
.in_modal {
	background-color: #fff;
	padding: 1rem;
	border-radius: 7px;
	box-sizing: border-box;
}

a.show_blister {
	cursor:pointer;
}
.blister_legend {
    position: absolute;
    top: 10%;
	height: 64%;
    width: 24%;
    background: #EBEAF1;
    right: 7%;
    padding: 0;
    box-shadow: 0px 8px 16px #595A5F;
}
.blister_legend span {
    display: block;
    margin: 2rem 1rem;
    font-weight: 700;
    text-align: left;
    font-size: 2rem;
}
span.art_num {
	color:#823963;
	margin-top:53%;
}
span.lot_num {
	color:#8797B7;
	margin-top: 37%;
}


/* Formular */

.break {
  flex-basis: 100%;
  height: 0;
}
.fieldblock {
	position:relative;
}
label {
	width:100%;
	display:inline-block;
}
label.medication {
	min-height:3rem;
}
input, textarea, select, button {
	border:1px solid #595A5F;
	padding:5px;
	font-size:1rem;
	margin-bottom:2.25rem;
	box-sizing:border-box;
	width: 100%;
	/*max-width: 335px;*/
	border-radius: 7px;
}
button {
	max-width:400px;
}

input {
	display:inline-block;
}
input:hover, input:focus, textarea:hover, textarea:focus, select:hover, select:focus  {
	border-color:#000;
}
input.invalid, input.invalid:hover, input.invalid:focus,
textarea.invalid, textarea.invalid:hover, textarea.invalid:focus,
select.invalid, select.invalid:hover, select.invalid:focus {
	border-color:#823963;
	margin-bottom:0.25rem;
}
.invalid::placeholder {
  color: #823963;
  opacity:1;
}
label.invalid {
	color: #823963;
	margin-bottom:0.5rem;
}
label.checkfield {
	padding-bottom:1rem;
	cursor:pointer;
}
label.radiofield {
	padding-bottom:0.25rem;
	cursor:pointer;
}
input[type=checkbox], input[type=radio] {
	display:none;
	margin-bottom:0;
}
input[type=checkbox] + span, input[type=radio] + span {
	display:inline-block;
	position:relative;
	padding-left:2rem;
}
input[type=checkbox] + span::before {
	content: "";
    display: inline-block;
	position:absolute;
	left:0;
	top:3px;
	height: 1rem;
    width: 1rem;
    border:1px solid #595A5F;
	border-radius:7px;
}
input[type=radio] + span::before {
	content: "";
    display: inline-block;
	position:absolute;
	left:0;
	top:3px;
	height: 1rem;
    width: 1rem;
    border:1px solid #595A5F;
	border-radius:50%;
}
input[type="checkbox"] + span i, input[type="checkbox"] + span i {
	display:none;
}
input[type="checkbox"]:checked + span i {
	display:inline-block;
	position:absolute;
	top:4px;
	left:1px;
	color:#823963;
}
input[type=checkbox]:checked + span::before, input[type=radio]:checked + span::before {
    border:1px solid #823963;
}
input[type=radio]:checked + span::after {
	content: "";
    display: inline-block;
	position:absolute;
	left: 5px;
	top: 8px;
	height: 0.5rem;
    width: 0.5rem;
    background-color: #823963;
	border-radius:50%;
}
input[type=submit], button[type=submit]  {
	background-color: #823963;
	border-color:#823963;
	color:#fff;
	cursor:pointer;
	padding:5px;
	font-weight:600;
}
input[type=submit]:hover, input[type=submit]:focus, button[type=submit]:hover, button[type=submit]:focus {
	background-color:#595A5F;
	border-color:#595A5F;
}
button[type=submit].detail, button[type=submit].return, button[type=submit].edit {
	border: none;
	background: none;
	padding: 0;
	color: #823963;
	text-align: left;
	margin-bottom:1rem;
	font-weight:normal;
	margin-bottom:0;
}
button[type=submit].detail:hover, button[type=submit].detail:focus, button[type=submit].return:hover, button[type=submit].return:focus, button[type=submit].edit:hover, button[type=submit].edit:focus {
	background: none;
	color: #8797B7;
}
button.implantation, button.checkup, button.explantation {
	margin-bottom:0.25rem;
	margin-top:0.25rem;
	background-color: #823963;
	border-color: #823963;
	color: #fff;
	cursor: pointer;
	padding: 5px;
	font-weight: 600;
}
button.implantation:hover, button.implantation:focus, button.checkup:hover, button.checkup:focus, button.explantation:hover, button.explantation:focus {
	background-color:#595A5F;
	border-color:#595A5F;
}

input[type=submit].inactive {
	background-color:#D1D8EF;
	color:#595A5F;
	border-color:#D1D8EF;
	cursor: not-allowed;
}
#captcha_image {
	display:inline-block;
}
label[for=clinic_url], input[name=clinic_url] {
	position:absolute;
	left:-99999px;
}
select[name=patient_sex] {
	margin-bottom:0;
}
textarea[name=patient_medical_free] {
	max-width:none;
	/*margin-bottom:0;*/
}
.staff.people_list input[type=submit], .deactivate_staff button[type=submit]  {
	margin-bottom:5px;
}
fieldset {
	border:none;
}
fieldset.finish {
	text-align:right;
}
.find_patient {
	position:absolute;
	top:0;
	right:1rem;
	cursor:pointer;
}
.check_data {
	position:relative;
}
#patient_number_warning {
	position: absolute;
	top: 4rem;
	left: 0;
	min-height: 1rem;
	width: 100%;
	color: #823963;
}


/* Filter */

.filterbox input, .filterbox select {
	margin-bottom:1rem;
}
input.filtering, select.filtering {
	border-color: #823963;
	color: #823963;
}
.filterbutton {
	background-color: #8797B7;
	color: #fff;
	cursor: pointer;
	padding: 6px;
	font-weight: 600;
	border:none;
}
.filterbutton:hover, .filterbutton[type="submit"]:focus {
    background-color: #595A5F;
    border-color: #595A5F;
}
.filter_reset {
	width:100%;
}

/* Medical Information */

.medical_list {
	columns: 2;
}
.bone_info {
	columns: 2;
	margin-bottom:-2.25rem;
}
label[for="patient_bone_augmentation"] {
	padding-top: 1.25rem;
}

/* Implants */
.implant_line, .implant_column {
	margin-bottom:1rem;
	position:relative;
	display:none;
}

.implant_line.shown {
	display:flex;
}
.implant_column.shown {
	display:flex;
}
.implant_line .implant_field {
	/*display:inline-block;
	vertical-align:top;
	width:20%;
	padding-right:5%;*/
	box-sizing: border-box;
	position:relative;
	font-size: 0.875rem;
}
.implant_line .implant_field.fi:not(.isbi) {
	display:none;
}
.implant_line .implant_field input, .implant_line .implant_field select {
	font-size: 0.875rem;
}
.implant_line .implant_field:last-child {
	padding-right:0;
}
.implant_line::before, .implant_column::before {
	content: attr(data-line);
	position:absolute;
	left:-1.75rem;
	top:calc(50% - 0.75rem);
	width:1.25rem;
	text-align:center;
	z-index:3;
}
.implant_line::after, .implant_column::after {
	content: "";
	position:absolute;
	left:-1.75rem;
	top:0;
	height:100%;
	width:1.25rem;
	background-color:#D1D8EF;
	border-radius:7px;
	z-index:2;
}
.implant_check {
	position:absolute;
	right:8%;
	top:1.5rem;
	cursor:pointer;
	border:none;
	background:none;
	width:auto;
}
.implant_field label.no_req span {
	display:none;
}

.implant_info.checked {
	margin-top:-1.5rem;
}
.remove_implant_line, .hide_implant_line {
	display:block;
	position:absolute;
	right: -1.5rem;
	top: 1.5rem;
	color: #8797B7;
	font-weight: 600;
	font-size: 1.25rem;
	cursor:pointer;
}
.show_more_implants {
	background-color: #8797B7;
	border: none;
	color: #fff;
	cursor: pointer;
	padding: 5px;
	font-weight: 600;
	margin-bottom:3rem;
}
.show_more_implants:hover {
	background-color: #595A5F;
}
textarea.full_width {
	max-width:100%;
}
.flex_item.care, .flex_item.care .flex_item, .flex_item.checking .flex_item, .flex_item.flex_remain {
	flex-grow:0;
}
.flex_item.care .flex_item.flex_col2 {
	flex-basis: calc(50% - 0.5rem);
}
.flex_item.care .flex_item.flex_col4, .flex_item.checking .flex_item.flex_col4 {
	flex-basis: calc(25% - 0.75rem);
}
.flex_item.checking .flex_item.flex_col2 + .flex_item.flex_col4 {
	margin-left:0.5rem;
}

.jaw {
	width:100%;
	height:4rem;
	border-left:2px solid #EBEAF1;
	border-right:2px solid #EBEAF1;
	position:relative;
}
.jaw.upper {
	border-bottom:2px solid #EBEAF1;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	margin-bottom:2rem;
}
.jaw.lower {
	border-top:2px solid #EBEAF1;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
.region {
	width: 50%;
	height: 3rem;
	position: absolute;
	bottom: 0;
	box-sizing:border-box;	
}
.jaw.lower .region {
	bottom:auto;
	top:0;
}
.region.r1, .region.r4 {
	left:0;
	border-right:1px solid #EBEAF1;
}
.region.r4 {
	text-align:right;
}
.region.r2, .region.r3 {
	right:0;
	border-left:1px solid #EBEAF1;
}
.tooth {
	display:inline-block;
	width:calc((100% / 10) - 0.25rem);
	margin-right:0.25rem;
	height:2rem;
	margin-top:1rem;
	background-color:#EBEAF1;
	position:relative;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
.region.r2 .tooth, .region.r3 .tooth {
	margin-right:0;
	margin-left:0.25rem;
}
.region.r4 .tooth, .region.r3 .tooth {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	margin-top:0;
}
.jaw_implant {
	display:none;
	position:absolute;
	width:50%;
	height:80%;
	background-color:#4c8a96;
	box-sizing:border-box;
	left:25%;
	bottom: -5px;
}
.jaw_implant.duo {
	width:30%;
}
.jaw_implant.duo:first-child {
	left:15%;
	background-color:#00616e;
}
.jaw_implant.duo:last-child {
	left:auto;
	right:15%;
}
.jaw_implant.trio {
	width:20%;
}
.jaw_implant.trio {
	left:40%;
}
.jaw_implant.trio:first-child {
	left:10%;
	background-color:#00616e;
}
.jaw_implant.trio:last-child {
	left:auto;
	right:10%;
	background-color:#88adab;
}

.region.r4 .jaw_implant, .region.r3 .jaw_implant {
	bottom:auto;
	top:-5px;
}
.implant_row {
	min-height:3rem;
}
.form_labels label {
	height:3rem;
}
button.trigger_check {
	cursor:pointer;
	font-size: 0.75rem;
	background-color: #4c8a96;
	color: #fff;
	border-color: #4c8a96;
	margin-top: 8px;
	width:auto;
}
button.trigger_check:hover {
	background-color: #00616e;
}
.implant_row .regio1, .implant_row .regio2, .implant_row .regio3, .implant_row .regio4 {
	width: 50%;
	display:inline-block;
	vertical-align:top;
	box-sizing: border-box;
}
.implant_row .regio2, .implant_row .regio3 {
	margin-left:2px;
	width: calc(50% - 2px);
}
.implant_row .regio4 {
	text-align:right;
}
.implant_row .implant_field2 {
	display:inline-block;
	vertical-align:top;
	width:calc((100% / 10) - 0.25rem);
	margin-right:0.25rem;
	min-height:2rem;
	position:relative;
}
.implant_row .regio2 .implant_field2, .implant_row .regio3 .implant_field2 {
	margin-right:0;
	margin-left:0.25rem;
	width:calc(((100% + 2px) / 10) - 0.25rem);
}
/*.implant_field2 label.checkfield {
	display:none;
}*/
.jaw_implant, .implant_field2 label.checkfield {
	display:inline-block;
	text-align:center;
	padding-bottom:0;
}
.jaw_implant:hover, .jaw_implant.hover {
	background-color:#595A5F !important;
}

.implant_field2 input[type="checkbox"] + span {
	display:inline-block;
	height: 1rem;
	width: 1rem;
	border: 1px solid #4c8a96;
	color:#4c8a96;
	border-radius: 7px;
	padding-left:0;
}
.implant_field2 input[type="checkbox"] + span:hover, .implant_field2 input[type="checkbox"] + span.hover {
	border-width:2px;
	height: calc(1rem - 2px);
	width: calc(1rem - 2px);
}
.implant_field2 span[data-title]:hover::after, .implant_field2 span[data-title].hover::after {
    bottom: calc(-200% + 1px);
	left: -2px;
    font-size: 0.875rem;
	background: rgba(255,255,255,0.8);
    border: none;
    color: inherit;
}
.regio2 .implant_field2 span[data-title]:hover::after, .regio3 .implant_field2 span[data-title]:hover::after {
	left:auto;
	right:-2px;
}


.implant_field2 input[type="checkbox"] + span::before {
	display:none;
}

.implant_field2 input[type="checkbox"] + span i {
	display:none;
}
.implant_field2 input[type="checkbox"]:checked + span i {
	display:inline-block;
	color:inherit;
	position:absolute;
	top: 2px;
	left: 2px;
	font-size: 0.75rem;
}
.implant_field2 input[type="checkbox"] + span:hover i, .implant_field2 input[type="checkbox"] + span.hover i {
	top: 1px;
	left: 1px;
}

.implant_field2.trio label.checkfield:nth-of-type(1) input[type=checkbox] + span,
.implant_field2.duo label.checkfield:nth-of-type(1) input[type=checkbox] + span {
	color:#00616e;
	border-color:#00616e;
}
.implant_field2.trio label.checkfield:nth-of-type(3) input[type=checkbox] + span {
	color:#88adab;
	border-color:#88adab;
}
.legend {
	position: -webkit-sticky;
	position: sticky;    
    top: 120px;
	padding-bottom:2rem;
}

.legend p {
	cursor:pointer;
}
.legend p:hover, .legend p.hover {
	color:#4c8a96;
	text-decoration:underline;
}

#existing_implants .legend p {
	display:inline-block;
	vertical-align:top;
	width:45%;
}

/* Statistics */

.stats_diagram {
	margin-top:2rem;
	border-left:1px solid #595A5F;
	border-top:1px solid #595A5F;
	width: calc(100% - 3rem);
	/*text-align: right;*/
	/*margin-left: 3rem;*/
}
.stats_part {
	height:2rem;
	margin-bottom:10px;
	display:block;
	background-color:#D1D8EF;
	border-top-right-radius:7px;
	border-bottom-right-radius:7px;
	position:relative;
}
.stats_part::before, .stats_part::after {
	position:absolute;
	/*left:-4rem;*/
	left:0.5rem;
	width:100%;
	min-width: 10rem;
	height: 1rem;
	line-height:1.1em;
	font-size:0.675rem;
	/*text-align:right;*/
}
.stats_part::before {
	content: attr(data-name);
	top:2px;
}
.stats_part::after {
	content: attr(data-count)" / "attr(data-percent)"%";
	bottom:0;
}
.stats_part:nth-child(even) {
	background-color:#EBEAF1;
}

/* Admin */

.open_pop {
	display:block;
	cursor:pointer;
	margin-bottom: 1rem;
}
.admin_popup {
	position:absolute;
	z-index:5;
	background-color:#8797B7;
	color:#fff;
	top:-2.5vw;
	left:33%;
	width:33%;
	padding:0.5rem 1rem;
	height:100%;
	min-height:300px;
	box-sizing:border-box;
	overflow-y:scroll;
	display:none;
	border-radius:7px;
}
.admin_popup.heads {
	left:auto;
	right:0;
}
.admin_popup.shown {
	display:block;
}
.popup_close {
  color: white;
  position: absolute;
  top: 10px;
  right: 1rem;
  font-size: 35px;
  font-weight: 600;
  cursor:pointer;
}
.clinic_entry, .dentist_entry  {
	margin-bottom:2rem;
}
.clinic_entry.hidden, .dentist_entry.hidden {
	display:none;
}
.entry_title {
	cursor:pointer;
	font-weight:600;
}
.entry_content {
	display:none;
}
.admin_popup .filterbox {
	margin-bottom: 2.25rem;
}
.admin_popup .filterbutton:not(:hover) {
	background-color: #D1D8EF;
	color:#595A5F;
}
.admin_popup .filterbutton {
	margin-bottom: 0;
}
.admin_popup .filter_reset {
	max-width:none;
}
.country_entry {
	padding:0.5rem 0 0.5rem 0.5rem;
}
.country_entry span {
	padding-top:5px;
}
.country_entry form {
	text-align:right;
}
.country_entry input[type="submit"] {
	margin-bottom:0;
}
.country_entry:nth-child(even) {
	background-color:#EBEAF1;
}

/* Footer */

footer {
	width:100%;
	height:50px;
}
footer p {
	line-height:50px;
	margin-bottom:0;
}
.top {
	position:fixed;
	bottom:2rem;
	right:2rem;
	cursor:pointer;
}
.top[data-title]:hover::after {
  left: auto;
  right:0;
}


@media screen and (max-width: 1440px) {
	
}

@media screen and (max-width: 1279px) {
	.flex_col3 {
		width: 45%;
	}
}

@media screen and (max-width: 1080px) {
	.navbutton {
		display:inline-block;
	}
	.service_nav {
		max-width:170px;
	}
	nav {
		height:calc(100vh - 70px);
		display:none;
		background-color: #823963;
		width: 100vw;
		margin-left: -2.5vw;
		margin-top: 10px;
		box-sizing:border-box;
		padding:1rem;
		overflow-y:auto;
	}
	body.expert nav {
		background-color: #D1D8EF;
	}
	nav.open {
		display:block;
	}
	nav li {
		display:block;
		padding-bottom:1rem;
	}
	.subnav {
		position:static;
	}
	.logo {
		max-height: 60px;
		padding-top: 0;
	}
	header {
		height:60px;
	}
	.page {
		padding-top: calc(70px + 2.5vw);
	}
	body.open {
		overflow:hidden;
		height:100vw;
	}
	header, section, footer {
		width:100%;
	}
	
	header.open {
		height:auto;
		min-height:100vh;
	}
	header .container, nav .container, section .container, footer .container {
		/*width:95vw;*/
		width: calc(100% - 20px);
	}
	
}
@media screen and (min-width:731px) and (max-width: 1080px) {
	
}
@media screen and (min-width:731px) and (max-width: 980px) {
	
}

@media screen and (max-width: 810px) {
	
}
@media screen and (max-width: 809px) {
	thead {
		position:absolute;
		left:-9999px;
	}
	table tr, table td {
		display:block;
		border:none;
	}
	table td::before {
		content: attr(data-header);
		display: block;
		font-weight: 600;
	}
}
@media screen and (min-width: 731px) and (max-width: 810px) {

}

@media screen and (max-width: 730px) {
	
}

@media screen and (max-width: 640px) {
	
}
@media screen and (max-width: 500px) {
	
}
@media screen and (max-width: 480px) {
	.flex_col2, .flex_col21, .flex_col3, .flex_col31, .flex_col4 {
		flex-basis:100%;
	}
	
}
@media screen and (max-width: 440px) {
	.flex_col3 {
		width: 100%;
	}
	section {
		padding-top:2.5vw;
	}
}
@media screen and (max-width: 400px) {
	.logo {
		width:40%;
	}
	.service_nav {
		width:60%;
	}
	form#switch, #logout a {
		margin-right: 1rem;
	}
}