/*OxCIN Protocols Database - Main CSS file */

/* General */
body {
		font-size: 1em;
		color: #777;
}

h1, h2, h3, h4, .display-1, .display-2, .display-3, .display-4 {
		color: #000;
}

[aria-expanded="true"] .fa-chevron-circle-right { transform: rotate(90deg); }

/* Responsive font sizes for headings etc */

@media (max-width: 1200px) {
  legend {
    font-size: calc(1.275rem + 0.3vw);
  }
  h1,
  .h1 {
    font-size: calc(1.375rem + 1.5vw);
  }
  h2,
  .h2 {
    font-size: calc(1.325rem + 0.9vw);
  }
  h3,
  .h3 {
    font-size: calc(1.3rem + 0.6vw);
  }
  h4,
  .h4 {
    font-size: calc(1.275rem + 0.3vw);
  }
  .display-1 {
    font-size: calc(1.725rem + 5.7vw);
  }
  .display-2 {
    font-size: calc(1.675rem + 5.1vw);
  }
  .display-3 {
    font-size: calc(1.575rem + 3.9vw);
  }
  .display-4 {
    font-size: calc(1.475rem + 2.7vw);
  }
  .close {
    font-size: calc(1.275rem + 0.3vw);
  }
}


.list-horizontal li {
		display:inline-block;
}

.list-horizontal li:before {
		content: '\00a0\2022\00a0\00a0';
}


footer a {
		color: #777;
}


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

.plain-anchor {
		color: black;

}



/* popup */

/* Popup functionality taken from https://www.w3schools.com/howto/howto_js_popup.asp */

/* Popup container */
.popup {
		position: relative;
		display: block;
		cursor: pointer;
}

/* The actual popup (appears on top) */
.popup .popuptext {
		visibility: hidden;
		background-color: #555;
		color: #fff;
		text-align: center;
		border-radius: 6px;
		padding: 4px 16px;
		position: absolute;
		z-index: 1;
}


/* Toggle this class when clicking on the popup container (hide and show the popup) */

.popup .show {
		visibility: visible;
		-webkit-animation: fadeInOut linear 2s forwards;
		animation: fadeInOut linear 2s forwards;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeInOut {
		0%,100% {opacity: 0;}
		50% {opacity: 1;}
}

@keyframes fadeInOut {
		0%,100% {opacity: 0;}
		50% {opacity: 1;}
}


/* Nav */

img.navbar-brand, .navbar-brand-logo {
		width: 100px;
}

img.navbar-brand, .navbar-brand-logo {
		width: 100px;
}

#mainnav-open-science {
		width: 120px;
}

.mainnav .nav-link-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 0.6em;
}

.mainnav .nav-item .icon {
		display: block;
		font-size: 2.25em;
}

.mainnav .nav-item a {
		display: flex;
		flex-direction: row;
		align-items: baseline;
}

.mainnav .nav-item {
		padding-right: 7.5px;
		padding-left: 7.5px;
}


@media screen and (min-width: 992px) {
		img.navbar-brand, .navbar-brand-logo {
				width: 130px;
		}

		.mainnav .nav-link-content {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 0.75em;
		}

		.mainnav .nav-item .icon {
				display: block;
				font-size: 2.25em;
		}

		.mainnav .nav-item a {
				display: flex;
				flex-direction: row;
				align-items: baseline;
		}

		.mainnav .nav-item {
				padding-right: 7.5px;
				padding-left: 7.5px;
		}

}


/* Login */

/* Protocols list */

.record {
		border-left: 1px solid grey;
		border-right: 1px solid grey;
		border-bottom: 1px solid grey;
}

.record:first-of-type {
		border-top: 1px solid grey;
}

.record:hover {
		background-color: #eee;
}

.record .title {
		font-weight: bold;
		background-color: #ddd;
		margin-bottom: 2px;
		padding: 0px 5px 0px 5px;
}


.detail-column {
		padding-right: 2.5px;
		padding-left: 2.5px;
		border-right: 1px solid #eee;
}


/* protocol-detail view */

.protocol-detail-stable h1 {
		font-size: 1.5em;
}

.protocol-detail-stable h2 {
		font-size: 1.25em;
}

.protocol-detail-stable .card-body h1 {
		font-size: 1.2em;
}


#div_id_protocol-description, #div_id_protocol-usage-guidance {
		margin-bottom: 0px;
}

.btn-help-text {
		font-size: 0.9em!important;
		padding: 0px 3px;
}



#clicktocopy:hover {color: #555;}


/* Register Protocol Form / Update Protocol Form */

.custom-file {
		width: 90%;
		margin-left: 1rem;
}

#previous_attachedfile_formset p {margin: 0px;}

/* Admin Menu */

a.my-tile-anchor {
		color: #777 !important;
}


div.admin-menu-card .card-body {
				min-height: 8em;
				max-height: 8em;
				height: 8em;
		}

@media screen and (max-width: 575px) {
		a.my-tile-anchor i {
				font-size: 1em;
		}
}

@media screen and (min-width: 576px) {
		a.my-tile-anchor i {
				font-size: 1.5em;
		}
}

@media screen and (min-width: 768px) {
		a.my-tile-anchor i {
				font-size: 2em;
		}

}

@media screen and (min-width: 992px) {
		a.my-tile-anchor i {
				font-size: 2.5em;
		}
}

@media screen and (min-width: 1200px) {
		a.my-tile-anchor i {
				font-size: 3em;
		}
}

/* media query templates

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

}

@media screen and (min-width: 576px) {
}

@media screen and (min-width: 768px) {
}

@media screen and (min-width: 992px) {
}

@media screen and (min-width: 1200px) {
}



*/