/*****************************************************/
/* Extra CSS to customize the default bootstrap CSS  */
/* Written by Charlotte Lafage                       */
/* For the Amsterdam UMC (department KIK)            */
/*****************************************************/

/* CSS Parts:
/* 0. General style
/* 1. Extra style for bootstrap classes
/* 2. Custom classes, website-wide
/* 3. Custom classes, research lines tab
/* 4. Custom classes, SRP lists
/* 5. Custom classes for admin pages

/********************/
/* 0. General style */
/********************/

body {
	font-family: museo-sans-rounded,sans-serif;
    text-rendering: geometricPrecision;
    background-color: #f0f5f5;
}

a {
    color: #00778a;
}

a:hover, a:active {
	color: #003741;
}

/****************************************/
/* 1. Extra style for bootstrap classes */
/****************************************/

@media (min-width: 600px) {
	.carousel-control-next-icon:after
	{
	  content: '>';
	  font-size: 55px;
	  color: grey;
	}

	.carousel-control-prev-icon:after {
	  content: '<';
	  font-size: 55px;
	  color: grey;
	}

	.carousel-control-prev {
		width: 5%;
		left: -12px;
	}

	.carousel-control-next {
		width: 5%;
	}

	.carousel-item {
     transition: transform 0.5s ease-in-out;
    }

    .carousel-fade .active.carousel-item-start,
    .carousel-fade .active.carousel-item-end {
     transition: opacity 0s 0.5s;
    }
}

@media (max-width: 600px) {
	.carousel-control-next-icon
	{
		background-image: url(../images/themes/arrow_right.svg);
		height: 200px;
		width: 200px;
		opacity: 50%;
	}

	.carousel-control-prev-icon {
		background-image: url(../images/themes/arrow_left.svg);
		height: 200px;
		width: 200px;
		opacity: 50%;
	}

	.carousel-item {
     transition: transform 0.2s ease-in-out;
    }

    .carousel-fade .active.carousel-item-start,
    .carousel-fade .active.carousel-item-end {
     transition: opacity 0s 0.2s;
    }
}

.carousel .carousel-indicators li {  background-color: gray; }
.carousel .carousel-indicators li.active { background-color: #f07814; }
.carousel .carousel-indicators {
	top: 10px;
	height: 50px;
}

.nav-link {
	font-weight: bold;
}

.nav-link.active {
	color: #f07814 !important;
}

@media (min-width: 600px) {
	#nav-tabContent {
		width: 120%;
		border-radius: 30px 30px 30px 30px;
		background: #fff;
		margin: 0 -10%;
		padding: 10px 0;
	}
}

@media (max-width: 600px) {
	#nav-tabContent {
		border-radius: 30px 30px 30px 30px;
		background: #fff;
		padding: 10px 0;
	}
}

/***********************************/
/* 2. Custom classes, website-wide */
/***********************************/

@media (min-width: 600px) {
	.main {
		padding: 40px;
	}
}

@media (max-width: 600px) {
	.main {
		width: 100%;
		border-radius: 0px 0px 0px 0px;
        background: #fff;
	}

	.main-pc {
		padding: 0px;
	}
}

.main p {
	margin: 20px;
}

@media (max-width: 600px) {
	.white-round-edges {
    	border-radius: 25px 25px 0px 0px;
    	background: #fff;
    	padding: 20px 20px 10px 20px;
    }
}

@media (min-width: 600px) {
	.white-round-edges {
    	border-radius: 45px 45px 0px 0px;
    	background: #fff;
    	padding: 40px 40px 20px 40px;
    }
}

.main-admin {
	margin: 0% 5%;
}

.srp-client-table table, th, td {
	border: 1px solid black;
	padding: 10px;
	margin-top: 5px;
}

.grey {
    color: #f2f2f2;
}

.logo_container {
    padding-top: 40px;
}

.logo-small {
	max-width: 160px;
	margin-bottom: 5px;
}

/*****************************************/
/* 3. Custom classes, research lines tab */
/*****************************************/

.flex-researchlines {
	row-gap: 30px;
	column-gap: 30px;
}

@media (max-width: 600px) {
	.research-line {
		margin: 10px;
		padding: 0px !important;
		border-radius: 0px 0px 40px 0px;
		filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.3));
	}
}

@media (min-width: 600px) {
	.research-line {
		margin: 10px;
		padding: 0px !important;
		flex-basis: 45%;
		border-radius: 0px 0px 40px 0px;
		filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.3));
	}
}

.research-line:hover {
	filter: drop-shadow(0px 2px 4px #f07814);
	cursor: pointer;
}

.research-line:nth-of-type(even) .img-right {
	border-radius: 0px 0px 40px 0px;
	display: auto;
}

.research-line:nth-of-type(even) .img-left {
	display: none;
}

.research-line:nth-of-type(odd) .img-right {
	display: none;
}

.research-line:nth-of-type(odd) .img-left {
	display: auto;
}

.research-line:nth-of-type(odd) .researchline-content {
	border-radius: 0px 0px 50px 0px;
}

.research-line:nth-of-type(odd) .researchline-keywords {
	border-radius: 0px 0px 40px 0px;
}

.research-line:nth-of-type(3n-2) {
	background: #0a6474;
}

.research-line:nth-of-type(3n-1) {
	background: #f07814;
}

.research-line:nth-of-type(3n) {
	background: #008a13;
}

.researchline-keywords {
	background: #f0f5f5;
	padding: 10px 10px 10px 10px;
	font-size: 18px;
	color: #00778a;
	flex-grow: 2;
	font-size: 16px;
	vertical-align: middle;
}

.researchline-keywords h5 {
	vertical-align: middle;
	margin: 10px;
}

.researchline-img {
	height: 40px;
	width: 40px;
	vertical-align: middle;
	margin-right: 15px;
}

.researchline-smallbutton {
	margin: 10px;
	font-size: 28px;
	vertical-align: middle;
}

/********************************/
/* 4. Custom classes, SRP lists */
/********************************/

.all-srps {
	margin-top: 25px;
}

.researcher-name {
	color: #00778a;
}

.keywords {
	font-size: 14px;
	background-color: white;
	padding: 10px;
}

.internships-box {
	padding-top: 50px;
}

.kik-internships-box {
	padding-top: 0px !important;
}

.internship-contact {
	font-size: 14px;
}

.internship-title-box {
	background-color: white;
	vertical-align: middle;
	padding-top: 10px;
	flex-grow: 2;
}

.internship-title {
	color: #00778a;
	font-size: 18px;
	vertical-align: middle;
	font-weight: bold;
}

.backbutton {
	border-radius: 0px 0px 20px 0px;
	filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.3));
	background: #f0f5f5;
	color: #00778a;
}

.backbutton:hover {
	filter: drop-shadow(0px 2px 4px #f07814);
	cursor: pointer;
}

.staff-img {
	max-width: 100px;
	max-height: 122px;
	object-fit: cover;
}

.staff-img:after {
	background-image: url(images/staff/default.svg);
}

.flex-internship {
	margin: 10px;
    padding-top: 10px;
    border: 1px solid;
    width: 460px;
    background-color: #f0f5f5;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.3));
}

.internship-external {
	border-color: #ced9e5;
}

.internship-aumc {
	border-color: #f07814;
}

.internship-aumc .internship-contact-box {
	background-image: url(../images/logo-amsterdamumc.png);
	background-position: right 0px bottom 0px;
	background-size: 25px 25px;
	background-repeat: no-repeat;
}

.filters {
	border-radius: 20px;
	background: #f2f2f2;
	padding: 15px;
	margin-bottom: 20px;
	border: 1px solid #f07814;
}

.filter a {
 	font-weight: bold;
 	color: #d14200;
 }

 .filter {
 	font-weight: bold;
 	color: #d14200;
 }

 .contact-block {
 	background-color: #f0f5f5;
 	margin: 5px;
 	width: 45%;
 	padding: 5px;
 }

 .contact-input {
 	display: flex;
 }

 .unpublished {
	 color: #aaaaaa;
 }

 /*************************************/
 /* 5. Custom classes for admin pages */
 /*************************************/

.internship-edit-modal {
 	margin: 50px;
 	max-width: 100%;
 }

.w-10 {
	width: 10%;
}

.w-40 {
	width: 40%;
}

.edit-faq-button {
	float: right;
}