@charset "utf-8";

/* CSS Document */

@font-face {
	font-family: 'texGyreAdventor';
	src: url('tex-gyre-adventor-regular.otf') format("opentype");
}

h1,h2,h3,h4,h5,h6 {
	font-family: texGyreAdventor, Arial;
	font-variant: small-caps;
}

p,li,input {
	font-family: Helvetica !important;
}

strong{
	font-weight: 700;
}
/*Bootstrap Overrides - Usually things like button colors, background behavior, etc */

.btn {
	font-family: texGyreAdventor, Arial;
	font-variant: small-caps;
	font-size: 1.2rem;
}

.btn-success {
	color: black;
}

.btn-warning:hover {
	color: #e6e6e6;
}

.btn-danger {
	color: black;
}

.btn-primary {
	background-color: #0056b3
}

.btn-primary:hover {
	background-color: #39719e;
}

.btn-outline-primary {
	border-color: #0066B3;
}

.btn-outline-primary:hover {
	background-color: #5d7fb9;
	border-color: #0066B3;
}


/* Other Overrides */

a.imgLink:hover img {
	/*Override sitewide opacity mask on image links */
	opacity: 1;
}


/* Styles for Category Select Page Accordion */

.accordionButton {
	color: #e6e6e6;
}

.selectAccordion {
	background: #0066B3;
}

.selectAccordion h2 {}

.selectAccordion button {
	color: #e6e6e6;
	letter-spacing: .05em;
}

.selectAccordion button:hover {
	color: #dce1ea;
}

.accordionBody {
	background: #5a6072;
	color: #e6e6e6;
}

.accordionBody a {
	font-weight: bold;
	letter-spacing: .1em;
}

.accordionBody li {
	font-size: 18px;
	font-weight: 200;
}

.accordionBody p {
	font-size: 18px;
	font-weight: 200;
}

.advancetab:hover {
	cursor: pointer;
}

.alertSpan {
	letter-spacing: .09em;
	font-size: 1.05em;
	text-shadow: 0 0 .25px #15418c;
	font-weight: 900;
}


/*Styles for Category Select Page Image Cards */

.selectCard:hover {
	transform: scale(1.2);
	z-index: 2;
	box-shadow: 0 0 2px grey;
	transition: transform .3s;
	transition-delay: .3s;
}

.selectCard h2 {
	text-shadow: 0 0 3px black;
	color: #ccd7e8;
	font-variant: small-caps;
}

.selectCard:hover h2 {
	color: #eaefff;
	text-shadow: 0 0 3px #060a47;
	letter-spacing: .05em;
	transition: letter-spacing .3s, text-shadow .3s, color .3s;
}

.selectCard img {
	filter: saturate(.8);
}

.selectCard:hover img {
	filter: saturate(1.4);
}

.selectCard {
	display: block;
}

.accordionHead {
	text-align: left;
	padding: 0;
	border: 0;
	color: white !important;
	cursor: pointer;
}

#ranImg {
	max-width: 100%;
	max-height: 100%;
}

#randomImageContainer {
	margin-top: 2%;
	margin-bottom: 2%;
	position: relative;
}

.instructions {
	padding: 1em 1em 0 1em;
}

.moreInstruction {
	background: #5A6072;
	color: whitesmoke;
}

.tabHeading {
	margin: 1em .25em .25em 1em;
}

.tabHeading p {
	margin: 0;
	vertical-align: top;
}

.tabBody {
	padding: 1em;
}

.linkButtonGroup {
	padding: .5rem;
}

.toolsTab {
	margin: 0 .5rem .25rem .5rem;
}

.toolsTutorialsExplain {
	margin: .25em .5em .25em .5em;
}

#pathInfo {
	display: none;
}

.link-button {
	border-radius: .25rem;
}

a.link-button {
	color: white !important;
}

#examineOptionsCard {
	background-color: transparent;
}

.examineNav {
	background-color: #0066B3;
	padding: .5rem;
}

.examineNav h3 {
	margin: 0;
}

a.examineNav {
	color: white;
}

.examineNav#instructions-tab {
	background: hsla(206, 100%, 40%, 1);
}

.examineNav#tools-tab {
	background: hsla(206, 100%, 35%, 1);
}

.examineNav#select-tab {
	background: hsla(206, 100%, 30%, 1);
}

.examineNav#newImage-tab {
	background: hsla(206, 100%, 25%, 1);
}

.examineNav.active {
	background-color: white !important;
	color: #5a6072 !important;
	box-shadow: 0 -1.5px 1.5px 0px rgb(0, 0, 0, .3);
}

.dropdown-menu {
	background: #5a6072;
	padding: .25rem;
	box-shadow: 0 -1px 1.5px .5px rgb(0, 0, 0, .5);
}

.dropdown-item {
	background: #5a6072;
	border-bottom: thin solid grey;
}

a.dropdown-item {
	color: white;
}

.dropdown-item:last-child {
	border-bottom: none;
}

.dropdown-item:hover {
	background-color: white;
}

a.dropdown-item:hover {
	color: black;
}

.modal-header {
	background-color: #15418c;
	color: whitesmoke;
}


/* Tooltips */


/* Add this attribute to the element that needs a tooltip */

[data-tooltip] {
	position: relative;
	z-index: 2;
	cursor: pointer;
}


/* Hide the tooltip content by default */

[data-tooltip]:before,
[data-tooltip]:after {
	visibility: hidden;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
	opacity: 0;
	pointer-events: none;
}


/* Position tooltip above the element */

[data-tooltip]:before {
	position: absolute;
	top: 110%;
	left: 50%;
	margin-bottom: 5px;
	margin-left: -80px;
	padding: 7px;
	width: 300px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background-color: #000;
	background-color: hsla(0, 0%, 20%, .9);
	color: #fff;
	content: attr(data-tooltip);
	text-align: center;
	font-size: 14px;
	line-height: 1.2;
}


/* Show tooltip content on hover */

[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
	visibility: visible;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
	opacity: 1;
}

#selectBox {
	position: absolute;
	border: 2px dashed black;
	background: rgba(250, 250, 250, 0.25) !important;
	width: 100px;
	height: 100px;
	z-index: 80;
	cursor: move;
}

.submittedBox {
	position: absolute;
	border: 3px solid black !important;
	background: rgb(250, 250, 250, 0.25);
}

#selectionPreview {
	width: 100%;
	height: 30rem;
	padding: 10em;
}

.img-magnifier-glass {
	position: absolute;
	border: 3px solid #FFF;
	cursor: none;
	/*Set the size of the magnifier glass:*/
	width: 15rem;
	height: 15rem;
	visibility: hidden;
	z-index: 9;
}

#clearFilter {
	display: none;
}

.customSlider {
	-webkit-appearance: none;
	width: 100%;
	height: 1em;
	background: rgb(0, 0, 0, 0.8);
	outline: none;
	-webkit-transition: 0.25s;
	transition: background .25s;
	border-bottom-left-radius: .5em;
	border-bottom-right-radius: .5em;
	border-top-left-radius: .5em;
	border-top-right-radius: .5em;
}

.customSlider:hover {
	background: rgb(0, 0, 0, 1);
}

.customSlider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	height: 1.5em;
	width: 2.5em;
	background: #15418c;
}

.customSlider::-moz-range-thumb {
	-webkit-appearance: none;
	appearance: none;
	height: 1.5em;
	width: 2.5em;
	background: #15418c;
}

.customSlider::-moz-range-track {
	-webkit-appearance: none;
	width: 100%;
	height: 1em;
	background: rgb(0, 0, 0, 0.8);
	outline: none;
	-webkit-transition: 0.25s;
	transition: background .25s;
	border-bottom-left-radius: .5em;
	border-bottom-right-radius: .5em;
	border-top-left-radius: .5em;
	border-top-right-radius: .5em;
}

#filterClear {
	display: none;
}

#previewContainer {
	padding: 3rem;
	overflow: overlay;
}

.yesHint {
	background-color: #ceffcc;
	color: #06b300;
}

.noHint {
	background-color: #f9b8ba;
	color: #ed1c24;
}

.notSureHint {
	background-color: #fffcb3;
	color: #b34c15;
}

.yesButton {
	background-color: #ceffcc;
	color: black;
	border: solid thin #228c1c;
	font-weight: 600;
}

.noButton {
	background-color: #f9b8ba;
	color: black;
	border: solid thin #ed1c24;
	font-weight: 600;
}

.notSureButton {
	background-color: #fffcb3;
	color: black;
	border: solid thin #ed9c1c;
	font-weight: 600;
}

.yesButton:hover {
	background-color: #06b300;
	color: #e6e6e6;
}

.noButton:hover {
	background-color: #ed1c24;
	color: #e6e6e6;
}

.notSureButton:hover {
	background-color: #e4b21b;
	color: #e6e6e6;
}

#onOffIndicator {
	display: inline-block;
	width: .75rem;
	height: .75rem;
	margin-left: 1rem;
	background-color: #ed1c24;
	border: thin solid black;
	border-radius: 50%;
}

.selectBox {
	position: absolute;
	border: 2px dashed black;
	background: rgba(250, 250, 250, 0.25) !important;
	width: 100px;
	height: 100px;
	top: 0;
	left: 0;
	z-index: 80;
	cursor: move;
}

.submitted {
	position: absolute;
	border: 1px solid black;
	background: rgba(0, 0, 0, 0.20) !important;
}

.ui-resizable-nw {
	width: 14px;
	height: 14px;
	background-color: black;
	border-radius: 50%;
	left: -10px;
	top: -10px;
}

.ui-resizable-ne {
	width: 14px;
	height: 14px;
	background-color: black;
	border-radius: 50%;
	right: -10px;
	top: -10px;
}

.ui-resizable-se {
	width: 14px;
	height: 14px;
	background-color: black;
	border-radius: 50%;
	bottom: -10px;
	right: -10px;
}

.ui-resizable-sw {
	width: 14px;
	height: 14px;
	background-color: black;
	border-radius: 50%;
	left: -10px;
	bottom: -10px;
}

.ui-resizable-n {
	width: 94%;
	margin-left: 3%;
	margin-right: 3%;
}

.ui-resizable-s {
	width: 94%;
	margin-left: 3%;
	margin-right: 3%;
}

.ui-resizable-e {
	height: 94%;
	margin-top: 3%;
	margin-bottom: 3%;
}

.ui-resizable-w {
	height: 96%;
	margin-top: 3%;
	margin-bottom: 3%;
}

.checkContainer {
	display: block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 22px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}


/* Hide the browser's default checkbox */

.checkContainer input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}


/* Create a custom checkbox */

.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #eee;
}


/* On mouse-over, add a grey background color */

.checkContainer:hover input~.checkmark {
	background-color: #ccc;
}


/* When the checkbox is checked, add a blue background */

.checkContainer input:checked~.checkmark {
	background-color: #0066B3;
}


/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}


/* Show the checkmark when checked */

.checkContainer input:checked~.checkmark:after {
	display: block;
}


/* Style the checkmark/indicator */

.checkContainer .checkmark:after {
	left: 9px;
	top: 3px;
	width: 8px;
	height: 15px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

body {
	scroll-padding-top: 120px;
	/* height of sticky header */
}

.onlyChrome {
	display: none !important;
}

.onlyChrome:not(*:root) {
	/* Supports only WebKit browsers */
	display: block !important;
}

.internetExplorer {
	display: none !important;
}

.textHidden {
	display: none;
}

.hideOutsideIE {
	display: block;
}

.hideOutsideIEInline {
	display: inline;
}

@supports not (-ms-high-contrast: active) {
	.internetExplorer {
		display: block !important;
	}
	.textHidden {
		display: inline;
	}
	.hideOutsideIE {
		display: none;
	}
	.hideOutsideIEInline {
		display: none !important;
	}
}

.imgGrid>.col-md {
	padding: .25rem;
}

#examineImage {
	width: 100%;
	max-height: 100%;
}

.btn-link.collapsed.accordionHead h3:before {
	font-family: texGyreAdventor;
	content: "+";
}

.btn-link.accordionHead h3:before {
	font-family: texGyreAdventor;
	content: "-";
}

.miscLinks {
	color: #a8c2f0 !important;
	border-bottom: none !important;
	letter-spacing: .02rem !important;
	text-shadow: 0 0 .05rem black;
}

.miscLinks:hover {
	background: transparent !important;
}

.fixedLeftSide {
	position: fixed;
	top: 48%;
	left: 0;
	z-index: 100;
	color: #e6e6e6;
}

#sideToolTab h3 {
	color: white;
}

#sideToolTab:hover h3 {
	transform: scale(1.1);
}

#sideToolTab {
	text-align: center;
	border: thin solid black;
	padding: .5rem;
	background: #ed651c;
	box-shadow: 0 0 5px -2px black;
}

#sideToolTab.closed {
	width: 3.5rem;
	height: 12rem;
	writing-mode: vertical-rl;
	opacity: .8;
}

#sideToolTab.closed h3 {
	margin-right: .25rem;
}

#sideToolTab.open h3 {
	margin-top: .25rem;
}

#sideToolTab.open {
	width: 12rem;
	height: 3.5rem;
}

#sideToolDrawer {
	text-align: justify;
	background-color: #70788f;
	border: thin solid black;
	padding: .5em;
	width: 15rem;
	box-shadow: 0 0 5px -2px black;
}

#sideToolDrawer h6 {
	text-decoration: underline;
	font-size: 1.25rem;
}

#zoomSwitch {
	z-index: 11;
}

.examineNav {
	font-family: Unica One;
	font-variant: small-caps;
	font-size: 1.2rem;
	letter-spacing: .030rem;
}

.ui-widget-content {
	background: rgba(250, 250, 250, 0.25) !important;
}

#imgSetHeader {
	padding-top: 2%;
	padding-bottom: 0;
}

#imgSetHeader h2 {
	margin: 0;
}

.headerImg {
	max-width: 100%;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

#categorySelectHead {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.headerImgSmall {
	width: 55%;
}

input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
}

input[type=range]::-ms-track {
	width: 100%;
	cursor: pointer;
	/* Hides the slider so custom styles can be added */
	background: transparent;
	border-color: transparent;
	color: transparent;
}

#imgSetHeader {
	padding-top: .25rem;
	padding-bottom: .25rem;
}

.imageToolsDiv {
	background: rgba(128, 128, 128, .7);
	width: 100%;
	position: absolute;
	z-index: 100;
	top: 3.5rem;
	right: 0rem;
	border-radius: 2%;
	border: solid thin rgba(64, 64, 64, .5);
	padding: .5rem;
	box-shadow: 1px 2px 8px -3px grey;
	color: white;
}

#imgTools {
	z-index: 10;
}

.instruction {
	background: #5a6072;
	color: white;
}

.responseButtons {
	margin-left: .5rem;
	margin-right: .5rem;
}

::selection {
	background: #0066B3;
}

::-moz-selection {
	background: #0066B3;
}

.whiteBg::selection {
	background: #0066B3;
	color: white !important;
}

.whiteBg::-moz-selection {
	color: white !important;
}

#singular::selection {
	color: white !important;
}

#singular::-moz-selection {
	color: white !important;
}

strong::selection {
	color: white !important;
}

strong::-moz-selection {
	color: white !important;
}
.mainTutorialContent{
	min-height: 500px;
}
.tutorialContent {
	min-height: 600px;
}

.imgHeader {
	margin-bottom: .25rem;
	margin-top: .75rem;
}

.prevNext {
	font-size: 24px;
	vertical-align: bottom;
	color: white;
}

.goodText {
	text-shadow: 0 0 3px #06b300;
}

.okayText {
	text-shadow: 0 0 3px #e4b21b;
}

.badText {
	text-shadow: 0 0 3px #ed1c24;
}

.leftCol {
	padding-right: 0rem;
}

.midCol {
	padding:0;
}

.rightCol {
	padding-left: 0rem;
}

.quizImg {
	max-width: 50%;
	margin-left: 25%;
	margin-top: 2%;
	margin-bottom: 1.5%;
}
.featureTutorialContent {
	min-height: 540px;
}
.carousel-indicators{
	bottom:-10px;
}
.carousel-indicators .active{
	background-color:#0066B3;
}
.carousel-indicators li{
	border:none;
	width:1px;
	height:25px;
	margin-left:8px;
	margin-right:8px;
	border-radius: 100%;
	background-color: white;
	opacity:1;
	transition: .3s;
	-webkit-transition:.3s; 
}
.carousel-indicators li:hover{
	opacity:.5;
	background-color:#0066B3;
}
.collapse{
	min-height: 1px;
}
.tutorialText{
	font-size: 16px !important;
}
.tutorialText>li{
	font-size: 16px !important;
    margin-top: 0.25rem;
    margin-bottom: .25rem;
}
.carousel-control-next-icon{
	-webkit-transition:.3s;
	transition:.3s;
}
.carousel-control-prev-icon{
	-webkit-transition:.3s;
	transition:.3s;
}
.carousel-control-next-icon:hover{
	filter: invert(1);
}
.carousel-control-prev-icon:hover{
	filter: invert(1);
}
.tutImg{
	border:solid thin black;
}
.exampleImages{
	max-width: 92%;
}
.divider{
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
	margin-top:.25rem;
	margin-bottom: .25rem;
	border-bottom:solid thin rgba(255,255,255,0.25);
}
hr{
	border-color:rgba(255,255,255,0.25);
}
.biggerTutorial{
	font-size: 20px !important;
}
@media(min-width: 576px){
	.imgHold{
		max-width: 700px;
	}
}
@media(min-width: 768px){
	.imgHold{
		max-width: 880px;
	}
}
@media(min-width: 992px){
	.imgHold{
		max-width: 1100px;
	}
}
@media(min-width: 1200px){
	.imgHold{
		max-width: 1300px;
	}
}
.imgHold{
	width:100%;
	padding-left: 15px;
	padding-right: 15px;
	margin-left: auto;
	margin-right: auto;
}
.btnActive{
	background-color: #023963;
}
.userIdInput{

}