@font-face {
	font-family: "Roboto-Regular";
	src: url("Roboto-Regular.ttf"), format("ttf");
}

@font-face {
	font-family: "Roboto-Bold";
	src: url("Roboto-Bold.ttf"), format("ttf");
}


:root {

	--gray: #ccc;
	--light-blue: #d7ecfa;
	--dark-blue: #07174c;
	--size-1: 2.5rem;
	--size-2: 2rem;
	--size-3: 1.5rem;
	--size-4: 1.2rem;
	--size-5: 1rem;

}

html {
	height: 100%;
}

body {
	height: 100%;
	background-color: var(--dark-blue);  
}

* body {
	width: 100%;
	font-family: "Roboto-Regular", sans-serif;
	font-size: var(--size-4);
	margin: 0;
	padding: 0;
	min-height: 100%;
	z-index: 10;
}



#table-container {
	min-width: 500px;
	overflow-x: scroll;
}

table {

	/*border: 2px solid white;
	border-radius: 5px;*/
	
	width: 100%;
}

th {
	padding: 0.5rem 1rem;
	font-weight: normal;
	background-color: var(--light-blue);
	border: 2px solid white;
	border-radius: 5px;
}
td {
	border: 2px solid var(--light-blue);
	padding: 0.5rem 1rem;
	overflow-wrap: break-word;
	min-width: 0;
}

/*
tbody {
	border-top: 1px solid var(--dark-blue);
	border-bottom: 1px solid var(--dark-blue);
}
*/

#page-container {
	background-color: white;
}


.icon {
	cursor: pointer;
}

.center {
	text-align: center;
}

.left {
	text-align: start;
}

.dark {
	background-color: var(--dark-blue);
	color: white;
}

.admin {
	background-color: #fac055;
}

.inactive {
	background-color: #eeeeee;
}

.dark-border {
	border: 2px solid var(--dark-blue);
}

.disclaimer {
	display: flex;
	gap: 1rem;
	font-size: 1rem;
	padding: 0.5rem 1rem;
	background-color: var(--light-blue);
}

.disclaimer-bigger {
	padding: 0.5rem 1rem;
	background-color: var(--light-blue);
	margin-bottom: 2rem;	
}


.field-container {
	/*background-color: orange;*/
	flex: 1;
	margin-top: 2.5rem;
	min-width: 300px;
}

.small-field {
	margin-top: 2rem;
}

.field-group {

	display: flex;
	flex-wrap: wrap;
	gap: 0 2rem;
}

.helptext {
	color: var(--dark-blue);
	margin-top: 0.5rem;
	font-size: 0.8rem;
}

button {
	font-size: var(--size-4);
	border: none;
	outline: none;
	cursor: pointer;
	background-color: var(--dark-blue);
	color: white;
	padding: 0.5rem 3rem;
	margin: 1rem 0;
}

form {
	width: 100%;
	margin-right: 1rem;
}

a {
	text-decoration: none;
	color: var(--dark-blue);
}

input,
textarea {
	font-size: 1rem;
	width:100%;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	
	margin: 1rem 0;
	padding: 0.5rem;
	border: 2px solid var(--light-blue);
	
	box-shadow: 0 -1px 0 #eee;
}

input {
	height: 3rem;
}


input[type="file"],
input[type="file"]:hover,
{
	border: none;
}




input:hover,
textarea:hover {
	border: 2px solid #0e2d95;
	transition: all 0.3s;
}


textarea {
	resize: vertical;
	height: 15rem;
	min-height: 15rem;
	max-height: 25rem;
}

.small-field textarea {
	height: 3rem;
	margin: 0.5rem 0;
}

input:focus,
textarea:focus {
	
	outline: none;
	box-shadow: none;
	border: 2px solid var(--dark-blue);
}

.title-1 {
	color: var(--dark-blue);
	font-size: var(--size-1);
	font-family: "Roboto-Bold";
	margin-bottom: 0.5rem;
}
.title-2 {
	color: var(--dark-blue);
	font-size: var(--size-3);
	font-family: "Roboto-Bold";
	margin-bottom: 1rem;
}

.main-page-link {
	font-size: var(--size-4);
	border-bottom: 2px solid transparent;
}

.main-page-link:hover {
	transition: all 0.3s;
	border-bottom: 2px solid var(--dark-blue);
}


@media (max-width: 900px) {

	body {
		background-color: white;
	}

	#page-container {
		margin: 0rem;
		padding: 1.5rem;
		height: 100%;
		
	}
	.title-1 {
		transition: all 0.2s;
		font-size: var(--size-2);
	}
	.title-2 {
		transition: all 0.2s;
		font-size: var(--size-4);
	}
	.header-block {
		display: none;
	}
}


@media (min-width: 900px) and (max-width: 1400px ) {

	body {
		background-color: var(--dark-blue);  
		display: flex;

	}
	#page-container {
		
		height: fit-content;
		min-height: 100%;	
		flex: 1;	
		margin: 1.5rem;
		padding: 5rem;
		
	}
	.title-1 {
		transition: all 0.2s;
		font-size: var(--size-2);
	}
	.title-2 {
		transition: all 0.2s;
		font-size: var(--size-3);
	}
	.header-block {
		display: none;
	}
}

@media (min-width: 1400px) {

	body {
		background-color: var(--dark-blue); 
		display: flex;	
	}
	#page-container {
		height: fit-content;
		min-height: 100%;	
		flex: 1;	
		margin: 2rem;
		padding: 10% 22%;
	}
	.title-1 {
		transition: all 0.2s;
		font-size: var(--size-1);
	}
	.title-2 {
		transition: all 0.2s;
		font-size: var(--size-3);
	}
	.header-block {
		display: none;
	}

}

.interface-link {
	display: block;
	padding: 1rem 0;
	color: var(--dark-blue);
	text-decoration: none;
}

.interface-link:hover {
	transition: all 0.2s;
	padding: 1rem 1rem;
}

.mini-navigation {
	display: flex;
	gap: 1rem 2rem;
	flex-direction: horizontal;
	flex-wrap: wrap;
	
	justify-content: start;
	margin-bottom: 4rem;

}

.report-container {
	margin-top: 2rem;
	display: flex;
	gap: 1rem;
	flex-direction: horizontal;
}


.schedule-item {
	display: flex;
	flex-direction: horizontal;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-bottom: 0.5rem;
	height: fit-content;
}

.mob-prof-edit {
	width: fit-content;
	border-bottom: 2px solid transparent;
}


.mob-prof-edit:hover {
	border-bottom: 2px solid #0e2d95;
}

@media (min-width: 750px) {
	.report-container {
		flex-wrap: nowrap;
	}
	.report-schedule {
		display: block;
		max-width: 100px;
		min-width: 100px;
		width: 100px;
		padding: 0.5rem 1rem;
		background-color: var(--light-blue);
		border-radius: 5px;
	}
	.halver {
		width: 400px;
		max-width: 350px;
		
	}
	.profile-header {
		display: flex;
		flex-direction: row;
		gap: 0 1.5rem ;
		margin-bottom: 1rem;
		flex-wrap: wrap;
	}

	.profile-header-name {
		margin: 1rem 0;
		
		font-size: var(--size-2);
	}

	.prof-button {
		padding: 0.5rem 1rem;
		width: 180px;
		max-width: 180px;

	}

	.prof-button:hover {
		transition: all 0.3s;
		background-color: #0e2d95;
	}

	.mob-prof-header {
		display: none;
	}

	.mob-prof-logout {
		display: none;
	}

	.report-confirmation { 
		width: 30%;
	}
	.person-affiliation {
		margin-top: 1rem;
		margin-bottom: 3rem;
	}
	#desk-todo {
		display: block;
	}
	#mob-todo {
		display: none;
	}
}

@media (max-width: 750px) {
	* body {
		font-size: 1rem;
	}

	.report-container {
		flex-wrap: wrap;
	}
	.report-schedule {
		display: flex;
		height: fit-content;
		gap: 2rem;
		padding: 1rem 2rem;
		background-color: var(--light-blue);
		border-radius: 5px;
	}
	.profile-header {
		display: none;
	}

	.mob-prof-header {
		display: block;
	}

	.mob-prof-edit {
		font-size: var(--size-3);
	}
	.mob-prof-logout {
		display: block;
		text-decoration: underline;
		font-size: var(--size-4);
		margin-bottom: 3rem;
	}

	.report-confirmation { 
		width: 80%;
	}
	.person-affiliation {
		margin-top: 1rem;
		margin-bottom: 1rem;
	}
	.helptext-idle {
		display: none;
	}
	.field-container {
		margin-top: 1.5rem;
	}
	#desk-todo {
		display: none;
	}
	#mob-todo {
		display: block;
	}
}

.report-title {
	padding: 0.5rem 0;
	cursor: pointer;
	font-weight: bold;
}

.report-abstract {
	margin: 1rem 0;
	
}


.person-position {
	font-weight: bold;
}

.presentations {
	margin: 2.5rem 0 1rem 0;
	font-size: 1.5rem;
}

.presentation-card {
	/*box-shadow: 0 0 15px 15px #f7f9fa;*/
	box-shadow: 0 0 10px 10px #f5f5f5;
	position: relative;
	padding: 1.5rem;
	margin-bottom: 2rem;
	border : 2px solid var(--light-blue);
}

.close-icon {
	position: absolute;
	top: 15px;
	right: 15px;
	cursor: pointer;

}

.success-parent {
	margin-top: 1rem;
	position: relative;
}

.success {
	position: fixed;
	top: 10%;
	
	left: 0;
	right: 0;
	margin: auto;
	height: 1.5rem;
	width: 200px;
	border-radius: 5px;
	background-color: #2e8b57;
	color: white;
	padding: 0.5rem 1rem;
	text-align: center;
	box-shadow: 0 0 15px 15px #f7f9fa;
}

.slow-hide {
	transition: opacity 0.1s;
	opacity: 0;
	transition: max-height 0.2s;
	max-height: 0;
	transition: padding 0.2s;
	padding: 0;
}

.whole-confirmation {
	z-index: 100;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: #494a49af;
}

.report-confirmation {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	height: 17%;
	min-height: 175px;
	margin: auto;
	padding: 1rem;
	background-color: white;
	border-radius: 5px;
}

.confirmation-text {
	margin-top: 3rem;
	text-align: center;
}

.confirm-no-icon {
	position: absolute;
	width: fit-content;
	right: 1rem;
	top: 1rem;
	cursor: pointer;
}

.confirmation-button {
	width: fit-content;
	margin: auto;
	margin-top: 1rem;

}

.preview-container {
	padding: 1rem;
	border: 2px solid #0e2d95;
	position: relative;
}