/*there are things to remove here*/

/*ZERO*/
html{width:100%; height:100%; margin:0; padding:0; box-sizing:border-box;}
main, article, footer, header, nav, section {display: block}
body, div, a, p, h1, h2, h3, menu, nav, header, main, section, footer, form, input, ul {margin: 0; box-sizing: border-box}
body, div, a, menu, main {padding: 0}
img{border:0}

/* OUTLINE */
body{
	font-size:16px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-weight:300;
	max-width:1170px;
	margin: 0 auto;
	background:rgb(252,254,252);
	box-shadow: 0 -10px 40px -10px rgb(190,190,190);
	}
main, header{
	background: white;	
	}
@media(min-width:780px){
	header{padding: 40px 60px 0px}
	main{padding: 20px 80px 60px}
}
@media(max-width:780px){
	header{padding: 20px 20px 0}
	main{padding: 10px}
	h1{margin-bottom:15px}
}
   /* ---------------------------------------- Header ---------------------------------------- */
header{
	display:flex;
	color:rgb(170,200,120);
	}
@media(min-width:700px){
	header{justify-content:space-between;}
}
@media(max-width:700px){
	header{flex-direction: column}
}
@media(max-width:400px){
	h1{font-size:large;}
}
h1 a{
	font-weight:inherit;
	text-decoration:inherit;
	}
h1 a:hover{
	color:rgb(170,200,120);
	}
header div{
	text-align:right;
	}
.lang{
	display:inline-block;
	height:30px;
	vertical-align:top;
	opacity:0.5;
}
.lang img {height:20px;}
.lang:hover{opacity:1;}
.lang:hover img{height:30px; transition:500ms;}

/* ---------------------------------------- UNIVERSAL ---------------------------------------- */

a{
	font-weight:500;
	color:inherit;
	}
a:hover{
	transition:500ms;
	color: rgb(100,130,50);
}
a:active{
	transition:none;
	color:silver;
	}
h2{
	text-align:center;
	border-bottom:5px solid rgb(170,200,120);
	padding: 30px 10px 20px;
	font-weight:600;
	}
@media(min-width:600px){
	h2{font-size:xx-large; margin: 0 60px 20px;}
}
@media(max-width:600px){
	h2{font-size:x-large; margin:5px}
}
h3{
	color:rgb(170,200,120);
	margin:20px 20px 10px;
	}
main>p{
	text-align:center;
	}
button, .btn{
	text-decoration: none;
	padding:7px;
	font-size:17px;
	background:white;
	border:1px solid rgb(170,200,120);
	color:rgb(150,180,100);
	}
button:hover, .btn:hover{
	cursor:pointer;
	transition:500ms;
	color:white;
	background: rgb(170,200,120);
	color:white;
	}
button:active, .btn:active{
	background: grey;
	}
select, input{
	padding:5px;
	}
.contentbox {
	border: 5px solid rgb(245,250,235);
	font-weight:300;
	}
@media(min-width:400px){
	.contentbox{padding:30px;}
}
@media(max-width:400px){
	.contentbox{padding:10px;}
}
.selected{
	box-shadow: 0 -4px 0px 0px rgb(170,200,120);
	border-width: 0px;
	color: black;
}
.center{text-align:center}
	
/* REMOVE THE NEXT 2 LINES! THIS IS ONLY FOR CLIENT-SHOWING LINKS ------------------------------------- REMOVE---------*/
button a{text-decoration:none}
button a:hover{color:inherit}

	/* ----------------------------------------NAV---------------------------------------- */
nav{
	margin-bottom:10px;
	}
nav a{
	display:inline-block;
	vertical-align:top;
	overflow:hidden;
	text-decoration:none;
	padding:10px 10px 40px;
	border-top: 4px solid #ddd;
	color: grey;
	}
nav a:hover{
	border-width:1px;
	color:black;
	}
.activelink{
	border-color:black;
	color:black;
	}
.nav4tabs, .nav3tabs {text-align:center;}
.nav4tabs a, .nav3tabs a{width: 23%; width:calc(25% - 1ex);}

.nav2tabs a{padding-right:30px}

.seepatient nav a{
	text-align:center;
	padding:10px;
	width: 47%;
	width:calc(50% - 1ex);
	}

@media(max-width:600px){
	.nav3tabs a {width:31%; width:calc(33% - 1ex)}
	.nav4tabs a, .nav3tabs a {padding:5px}
}

	/* ----------------------------------------TABLE---------------------------------------- */
.table{
	display:table;
	width:100%;
	}
.table-caption{
	display:table-caption;
	}
.tableline{
	display:table-row;
	}
.cell{
	display:table-cell;
	padding: 5px 15px;
	}
@media(max-width:600px){
	.table, .table-caption, .tableline, .cell{display:block}
	.cell:first-child{font-weight:bold}
	.tableline{
		border:2px solid #ccc;
		padding:10px;
		margin-bottom:20px;
		}
	.cell{display:inline-block; padding:2px}
}

	/* ----------------------------------------FORM---------------------------------------- */
.bigform p{
	display:inline-block;
	margin:15px 5px;
	}
.bigform p input, .bigform select{
	width:100%;
	font-size:medium;
	}
@media(min-width:1050px){
	.bigform p{width:47%; width:calc(50% - 1ex - 10px);}
}
@media(max-width:1050px){
	.bigform p{width: 100%;}
}
@media(max-width:780px){
	.bigform>div:nth-child(2){width:100%}
	body main .PI>div:nth-child(2){width:100%}
}
.bigform>div:last-child{
	width:100%;
	text-align:right;
	}
input[disabled] {background:white; color:black}

	/* ----------------------------------------PICTURES/FILES VIEW---------------------------------------- */
@media(max-width:600px){
	.picsdocs {text-align:center;}
}
.picsdocs a{
    display: table-cell;
    vertical-align: middle;
	text-align:center;
	width:120px;
	height:120px;
	}
.picsdocs a:hover{
	-ms-transform: scale(1.1, 1.1);
	transform: scale(1.1, 1.1);
	}
.picsdocs>div{
	display:inline-block;
	margin:8px;
	position:relative;
	vertical-align:top;
	width:122px;
	word-wrap: break-word;
	}
.picsdocs div p{
	width:100%;
	text-align:center;
	font-weight:500;
	}

.picsdocs button{
	position:absolute;
	top:5px;
	left:5px;
	display:inline-block;
	width:30px;
	height:30px;
	border-radius:15px;
	border:none;
	background:rgba(170,200,120,0.6)
	}
.picsdocs button:hover{
	background:rgb(170,200,120);
	transition:500ms;
	}
.picsdocs form{
	padding:5px;
	background:rgb(240,250,230);
	}

/* -----------------PAGES------------------ */
	/* ----------------------------------------LOGIN---------------------------------------- */
.welcome div div, .welcome ul {
	display:inline-block;
	vertical-align:top;
	}
.welcome div div{
	text-align:center;
	}
.welcome button{
	font-size:large;
	padding:10px;
	width:100%;
	margin-bottom:10px;
	}
@media(min-width:600px){
		.welcome div div{width:220px;}
		.welcome ul {width:715px; width:calc(100% - 225px);}
	}
@media(max-width:600px){
		.welcome div div{width:100%; margin-bottom:20px}
	}
@media(min-width:400px){
	.welcome ul{font-size: large;}
}
@media(max-width:400px){
	.welcome ul{margin-top:20px; font-size: medium;}
}

	/* ----------------------------------------REGISTER---------------------------------------- */


	/* -----------------------------------------CONFIRM---------------------------------------- */


/* ------------------PATIENT PAGES---------------- */
	/* ----------------------------------------PATIENT: XRAYS------------------------------------------- */
.pictures a{
	background:black;
	border-radius:30px;
	overflow:hidden;
	}

	/* ----------------------------------------PATIENT: MED.DOCUMENTS------------------------------------------- */

	/* ----------------------------------------PATIENT: ACCESS RIGHTS------------------------------------------- */


.whoaccess label{line-height:4ex}

@media(min-width:600px){
	.whoaccess .cell{border-bottom:3px solid rgb(240,250,230)}
}
@media(max-width:600px){
	.whoaccess .cell{display:block; text-align:center;}
	.whoaccess .cell:nth-child(2) {background:rgb(245,250,240)}
}
.addaccess div{display:inline-block}
.addaccess label{line-height:4ex}
.addaccess>span:last-of-type {
	display:inline-block;
	width:10px;
	}
@media(max-width:600px){
	.addaccess span, .addaccess>span:last-of-type{
		display:block;
		height:1px
		}
}
/*chechbox*/
.whoaccess input:hover, .whoaccess label:hover{cursor:pointer}
.whoaccess label {color:rgb(100,130,50)}
.whoaccess input:checked {outline:1px solid rgb(170,200,120)}
.whoaccess input:checked + label {font-weight: 600}



	/* ----------------------------------------PATIENT: PERSONAL INFORMATION------------------------------------------- */
.PI>div{
	display:inline-block;
	vertical-align:top;
	}
.PI>div:first-child{width:205px}
.PI>div:nth-child(2){width:730px; width:calc(100% - 210px)}
.PI>div>div{width:100%}

.PI>div>input{max-width:200px}

.PI p{
	color:rgb(130,160,80);
	font-size:small;
	}
.PI p input, .PI select{
	border:none;
	border-bottom:1px solid #eee;
	}

/* ------------------DOCTOR PAGES---------------- */
	/* ----------------------------------------DOCTOR: SEARCH---------------------------------------- */
.search p{
	color: rgb(70,100,0);
	}	
.searchfield-half {text-align:right}
.searchfield-half label{
	display:inline-block;
	width:100%;
	text-align:left;
	}
.searchfield-half span{
	display:inline-block;
	width:47%;
	width:calc(50% - 1ex);
	}
.bigform p.searchfield-half input {width:100%; width:calc(100% - 5ex)}
	/* ----------------------------------------DOCTOR: MY PATIENTS---------------------------------------- */

.oneline{
	display:flex;
	justify-content:space-between;
	flex-direction:row-reverse
	}
@media(max-width:600px){
	.oneline{flex-direction: column}
}
.searchform{
	max-width:100%;
	text-align:right;
	}
.sortform select{
	max-width:300px;
	font-size:small;
	}
.sortform, .searchform{margin:15px 0;}

/*!!!!!!!!!!REMOVE THIS LINE (the a tags will become div...)!!!!!!!!!!!!*/.table a{color:inherit; text-decoration:inherit; font-weight:300}
.patients .tableline:first-child div{
	color: rgb(130,160,80);
	font-weight:500;
	border-bottom:3px solid rgb(130,160,80);
	}
.patients .tableline:hover{
	cursor:pointer;
	transition: 500ms;
	background:rgba(170,200,120, .2);
	}
.patients .tableline:first-child:hover{cursor:inherit; background:none;}

@media(max-width:600px){
	.patients .tableline:first-child {border-color:#eee}
	.patients .tableline:first-child div{border:none; color:#aaa}
}
	
	/* ----------------------------------------DOCTOR: OWN DATA PAGES---------------------------------------- */
	
	
	/* -----------------------------------------DOCTOR: PATIENT PAGES---------------------------------------- */
.seepatient{position:relative}
.patient-summary, .patient-content{display:inline-block; vertical-align:top;}
.patient-summary{overflow:auto;}
.patient-summary img{display:inline-block; border:1px solid grey;}
.patient-summary p{padding: 5px 0; line-height:1em;}

@media(min-width:600px){
	.patient-content {width:800px; width:calc(100% - 205px)}
	.patient-summary{position:sticky; left:0px; top:0px; width:200px;padding-top:15px;border-top:4px solid silver}
}
@media(max-width:600px){
	.patient-summary {padding-bottom:20px}
	.patient-summary div{display:inline-block; vertical-align:top}
	.seepatient .patient-content{width:100%; text-align:center}
}
@media(max-width:400px){
	.patient-summary {text-align:center}
}



	/* ----------------------------------------- MODERATOR ---------------------------------------- */
.moderator input:hover, .moderator label:hover{cursor:pointer}

.moderator .cell:first-child{font-weight:500}
.moderator label {color:rgb(100,130,50)}
.moderator input:checked {outline:1px solid rgb(170,200,120)}
.moderator input:checked + label {font-weight: 600}
.cellpatient, .celldoctor, .cellmanufacturer, .cellska {white-space:nowrap}

@media(min-width:850px){
	.moderator div:last-child {width:initial}
	.moderator .tableline:hover{
		transition: 500ms;
		background:rgba(170,200,120, .2);
		}
	.moderator .cell{
		border-bottom:3px solid rgb(240,250,230);
		line-height:7ex;
		}
}
@media(max-width:850px){
	.moderator, .moderator .tableline{display:block;}
	.moderator .cell{display:inline-block}
	.moderator .cell:nth-child(2) {background:rgb(240,250,230)}
	.cellpatient,.celldoctor, .cellmanufacturer, .cellska{border-right:10px transparent solid;}
	.moderator .cell:first-child{font-weight:bold}
	.moderator .tableline{
		border:2px solid #ccc;
		padding:10px;
		margin-bottom:20px;
		}
	.moderator .cell{display:inline-block; padding:2px}
	.moderator .cell:nth-child(2){width:100%}
	.moderator form>div:last-child{width:100%; text-align:right}
}

.moderator .cell div{
	display:none;
	position:relative;
	}
.moderator .cell div.present {
	display:inline-block
	}
.showinfo{
	visibility:hidden;
	opacity:0;
	position:absolute;
	bottom:25px;
	right:0;
	}
p.showinfo{
	padding:3px;
	background: white;
	margin:0;
	border:1px solid rgb(170,200,120);
	}
.moderator .cell div:hover .showinfo{
	transition:700ms;
	opacity:1;
	visibility:visible;
	}
.moderator span{white-space:nowrap}


/*  ---------------------------------------- NAVIGATION. Remove later on. -----------------------------------REMOVE----- */
#nav{
	display: none;
	position: absolute;
	top: 2vh;
	left: 5vw;
	width: 90vw;
	max-width: fit-content;
	background: white;
	outline: 5px solid rgb(245,250,235);
	outline-offset: -10px;
	padding: 40px;
}
.close-btn{
	cursor: pointer;
	border-radius: 3em;
	width: 4ex;
	height: 4ex;
	padding-left: 1ex;
	position: absolute;
	top: 20px;
	right: 20px;
	font-size: 18px;
}
#nav span{
	font-weight: 500;
	text-decoration: underline;
	cursor: pointer;
}
main{
	position: relative;
}






/* ---------------------------------------- Error window ---------------------------------------- */

#err {
  display:none;
  width: 70%;
  margin-left: -35%;
  background-color: #333;
  background-color: rgba(0,0,0,0.8);
  color: #fff;
  text-align: center;
  position: fixed;
  z-index: 1;
  left: 50%;
  top: 30px;
  box-shadow: 0 20px 2px -10px rgba(10, 20, 0,.9);
  z-index:100;
}
#err p{font-size:20px; margin: 0 20px 20px}
#err.showerr {
	display:block;
	-webkit-animation: fadein 0.5s, fadeout 0.5s 3.2s;
	animation: fadein 0.5s, fadeout 0.5s 2.8s;
	animation-fill-mode: forwards;
}
@-webkit-keyframes fadein {
	from {top: 0; opacity: 0;} 
	to {top: 30px; opacity: 1;}
}
@keyframes fadein {
	from {top: 0; opacity: 0;}
	to {top: 30px; opacity: 1;}
}
@-webkit-keyframes fadeout {
	from {top: 30px; opacity: 1;} 
	to {top: 0; opacity: 0;}
}
@keyframes fadeout {
	from {top: 30px; opacity: 1;}
	to {top: 0; opacity: 0;}
}