/**
 * Slide Profile CSS 
 * 
 * Author: EHSL Web Technology Group
 * URI: https://library.med.utah.edu
 * 
 * Version: 1.0
 */

/* 
<!-- PAGE SECTIONS --> 

SLIDES RESULTS HEADER
---------------------
.slides-results-header
	.site-title

	SLIDES RESULTS CONTAINER
	------------------------
	.slides-results-container
		.queried-label

	SLIDES RESULTS CONTROL
	----------------------
	.slides-results-control

		SLIDES RESULTS MENU
		-------------------
		.slides-results-menu
			button.toggle-chevron
			.slides-nav

				SLIDES NUMBERS
				--------------
				.slides-results-flexalign
					a#foc-nav-left.directional

				SLIDES NEXT/PREV
				----------------
				.slides-results-flexalign
					a#foc-nav-right.directional

		SLIDES RESULTS LINK
		-------------------
		.slides-results-links
			button.toggle-chevron
			.slides-results-links-group collapse

			SLIDES EDIT BUTTONS
			-------------------
			#sprofile-switch-panel
				#sv-btn-block
					.slides-control
						#edit-slide
						#edit-slideset
						input#edit-submit

			SLIDES AUDIT BUTTONS
			-------------------- 
			#audit-link

EDIT-ERR-MSG
------------
#parent-errs.message-box

SLIDES RESULTS BODY
-------------------
.row
	#presave-msg.message-box
	#sv-chg-cat.message-box

	SLIDES RESULTS CONTENT CONTAINER
	--------------------------------
	#content-container.content-container

		SLIDES RESULTS CHARACTERISTICS CONTAINER
		----------------------------------------
		.button-actions
		#contain-vetted-panel.notices-panel
		#contain-phi-panel.notices-panel
		#parent-{}.slide-data-row
			.slide-category
			.edit-icon-link
				.edit-icon
			.slide-category-values
		#edited-{}.selections
			.tosave
		#contain-{}-panel.edit-panel

SLIDES RESULTS VIEWER CONTAINER
-------------------------------
#viewer-container.content-container-nobg
	#CP000314
		.openseadragon-container

*//*

TABLE OF CONTENTS
-----------------
BOOTSTRAP RESET
DISPLAY FLEX 
LINKS, BUTTONS
ICONS
SVG
INTERACTIVITY
PAGE SECTIONS 
Z-INDEX
MISC TEMP
COLORS
*/

/* <!-- BOOTSTRAP RESET --> */

.row { 
	margin-right: inherit;
	margin-left: inherit; 
}

/* <!-- END BOOTSTRAP RESET --> */

/* <!-- DISPLAY FLEX --> */

.slides-results-header,
.slides-results-menu,
.slides-results-flexalign,
.slides-results-nav,
.slides-nav,
.slides-control form {
	display: flex;
}

.slides-results-header,
.slides-results-container,
/*.slides-results-control,*/
.slides-results-links,
.slides-results-menu,
.slides-results-links-group {
	column-gap: 4px;
}

/*.slides-results-header { 
	justify-content: flex-start;
}*/

.slides-results-nav { 
	justify-content: start;
}

.slides-nav { 
	justify-content: space-between;
}

.slides-results-header {
	align-items: flex-start;
}
.slides-results-flexalign,
.slides-results-nav,
.slides-nav { 
	align-items: center;
}

@media (max-width: 934px) { 
	/* Potential Break for Slide Buttons */
}

@media (max-width: 991px) {
	/*.slides-results-header {
		flex-direction: column;
	}*/
}

@media (min-width: 992px) {
	.slides-results-header {
		flex-direction: row;
	}
}

@media (max-width: 1199px) {
	/*.slides-results-control { 
		display: flex;
		justify-content: space-between;
	} */

	.slides-results-links { 
		justify-content: space-between;
	}
}

/* Should be 1200, but content length extends */
@media (min-width: 1236px) { 
	/* To do:  JS toggle .show class instead */
	.slides-results-links-group.collapse { 
		display: flex; 
	}
}

/* <!-- END DISPLAY FLEX --> */

/* <!-- LINKS, BUTTONS --> */

a, 
.toggle-chevron,
a.directional span { 
	color: var( --color-blue-primary );
	text-decoration: none; 
}

a:hover, 
.toggle-chevron:hover { 
						 color: var( --color-white );
	background-color: var( --color-blue-primary ); 
}

a.directional,
a.directional:hover span { 
	color: var( --color-white ); 
}

:focus {
	box-shadow: 0 0 0 0.2em var( --color-focus );
}

button.toggle-chevron,
#audit-link a,
#foc-nav-right,
#foc-nav-left {
	border: 1px solid;
	border-radius: 0.2em;
	padding: 1px 0.5em;
			border-color: var( --color-blue-primary );
	background-color: var( --color-grey-80 );
}

.slides-results-links-group:not(.logged-in) #sv-btn-block a {
	width: inherit;
}

#audit-link a {
	display: block;
	padding-bottom: 2px;
}

#foc-nav-left {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

#audit-link a:hover,
a.directional:hover,
#foc-nav-right:hover,
#foc-nav-left:hover {
	text-decoration: none;
	background-color: var( --color-blue-primary );
}

button.toggle-chevron.toggle-btn { 
	padding: 1px 8px;
}

/* Edit Slide Meta Panel Dismiss button */
#content-container .button-actions { 
	display: flex;
	display: none;
} 
#content-container .button-actions .dismiss {
	display: inline-block;
	margin: 0 0 6px auto;
}

/* <!-- END LINKS, BUTTONS --> */

/* ICONS */

.material-icons {
	font-family: "Material Icons";
	vertical-align: bottom;
	color: var( --color-white );
}

.app_registration { 
	content: "app_registration";
}

.expand-more { 
	content: "expand_more"; 
}

.more-vert { 
	content: "more_vert";  
}

/* END ICONS */

/* SVG */
a svg path {
	fill: var( --color-white );
}

a svg:hover {
	cursor: pointer;
}

/* END SVG */

/* INTERACTIVITY */

.disabled {
	pointer-events: none;
  cursor: default;
  text-decoration: none;
	opacity: 0.35;
}

.disabled:hover{
	background-color: transparent;
}

.hide {
	display: none !important;
}

.opacity {
	opacity: 0.35;
}

.material-icons {
	transition: transform 0.3s ease;
}

/* Prevent scroll appearing during animation
 * @link https://css-tricks.com/hide-scrollbars-during-an-animation/ 
 */
.content-container.collapsing {
	animation: hide-scroll 1.2s backwards;
}
@keyframes hide-scroll {
  from, to { overflow: hidden; } 
}
@keyframes spin {
  0% {
    transform: rotate( 0deg );
  }
  100% {
    transform: rotate( 360deg );
  }
}
/* END INTERACTIVITY */

/* <!-- SLIDES RESULTS HEADER --> */

.slides-results-header { 
	padding-right: 0.5em;
	padding-left: 0.5em;
	background-color: var( --color-grey-67 );
	box-shadow: 0 0.5em 1em var( --shadow-rgba-00015 ); 
}

.site-title {
	margin-right: 0;
	margin-bottom: 0;
	font-size: 1.25rem;
	font-weight: 700;
}

.site-title span {
	display: none;
}

@media (max-width: 1199px) {
	.site-title {
	}
}

.slide-page-title { 
	display: inline-block;
	margin: 15px 2em 20px 20px;
	color: var( --color-diagnoses-show ); 
}

/* <!-- END SLIDES RESULTS HEADER --> */

/* <!-- SLIDES RESULTS CONTAINER --> */

.slides-results-container { 
	padding: 3px 0.5em 2px;
	color: var( --color-yellow-35 );
	font-size: 1rem;
	background-color: var( --color-grey-79 ); 
}

@media (max-width: 1199px) {
	.slides-results-container { 
	}
}

.queried-label { 
	border-radius: 10em; 
	padding-right: 0.6em;
	padding-left: 0.6em;
	color: var( --color-white );
}

/* <!-- END SLIDES RESULTS CONTAINER --> */

/* <!-- SLIDES RESULTS CONTROL --> */

/* SLIDES RESULTS MENU */

button.toggle-chevron {
	width: inherit;
	text-align: center;
}

button.toggle-chevron[aria-expanded="true"] { 
	           color: var( --color-white );
	background-color: var( --color-blue-primary ); 
}

button.toggle-chevron[aria-expanded="true"] .expand-more {
	display: inline-block;
	transform: rotate( 180deg );
	transform-origin: center center;
}

/* END SLIDES RESULTS MENU */


/* SLIDES RESULTS LINK */

.slides-results-links-group { 
	background-color: var( --color-grey-67 ); 
}

@media (max-width: 991px) {
	.slides-results-links {
		margin-right: 0;
		margin-left: auto;
	}

	#links-group.colapsing {
		transition: all 0.1s ease;
	}
}

@media (min-width: 991px) and (max-width: 1236px) {
	.slides-results-links { 
	}
}

/* Should be 1199, but content length extends */
@media (max-width: 1236px) {
	.slides-results-links { 
		position: relative;
	}

	.slides-results-links-group { 
		flex-direction: column;
		row-gap: 4px;
		position: absolute;
		top: 36px;
		right: 0;
		width: 190px;
		box-shadow: 0 0.5em 1em var( --shadow-rgba-00015 );
	}

	.slides-results-links-group:not(.logged-in) { 
		width: 212px;
	}

	:not(.logged-in) #sv-btn-block .btn-start,
	:not(.logged-in) #sv-btn-block .btn-end {
			flex: 0 0 auto;
			width: inherit;
			font-size: 0.99rem;
		}

	:not(.logged-in) #sv-btn-block .btn-end {
		flex-grow: 1;
	}

	.slides-results-links-group.show { 
		display: flex;
	}
}

/* Should be 1200, but content length extends */
@media (min-width: 1237px) { 
	/* Audit/Edit Button Dropdown */
	.slides-results-links > button[aria-expanded="false"],
	.slides-results-links > button[aria-expanded="true"] { 
		display: none; 
	}
}

/* END SLIDES RESULTS LINK */
/* END SLIDES RESULTS HEADER */

/* SLIDES RESULTS CONTENT CONTAINER */
/* CONTENT CONTAINER WRAPPER */

.content-container { 
	width: 320px;
	padding: 1em 10px;
	background-color: var( --color-grey-74 );
	box-shadow: 0 0.5em 1em var( --shadow-rgba-00015 ); 
}

@media (max-width: 574px) {
	.content-container { 
		width: 100%; 
	}
}

@media (max-width: 1199px) {
	.content-container { 
	}
}

@media (min-width: 768px) {
	.content-container {
		overflow-y: auto;
	}

	/* Content Container Expand width */
	.content-container.edit-slide-view { 
		position: relative;
		width: 740px;
		margin-right: 1em;
		margin-bottom: 1em;
		padding-right: 420px;
	}

	/* Content Container Two Column */
	.content-container.edit-slide-view .edit-panel {
		position: absolute;
		top: 20px;
		left: 360px;
		width: 340px;
		padding-right: 1px;
		padding-left: 1px;
		overflow-y: auto;
	}
}

/* END CONTENT CONTAINER WRAPPER */

/* SLIDES RESULTS CHARACTERISTICS CONTAINER */

/* PARENT CONTAINER */

.slide-data-row { 
	margin-bottom: 4px;
}
.slide-category { 
	float: left;
	font-size: 0.9rem;
	text-transform: uppercase;
	color: var( --color-grey-20 ); 
}
.slide-category-values { 
	display: block;
	border-radius: 10px;
	padding: 0 0.6em;
	font-size: 0.85rem;
	color: rgb( 252, 252, 164 );
	background-color: var( --color-grey-79 );
}

/* END PARENT CONTAINER */

/* SELECTIONS PANEL */

.selections {
	border: 1px solid;
	margin-top: 0.5em;
	padding: 0.25em;
	border-color: var( --color-yellow-100 );
	background-color: var( --color-grey-80 );
}
.selections span {
	display: inline-block;
	width: 100%;
}

/* END SELECTIONS PANEL */

/* SLIDES RESULTS VIEWER CONTAINER */

.content-container-nobg { 
	height: auto;
	min-height: 500px;
	padding-right: 0;
	padding-left: 0; 
}

@media (max-width: 1199px) {
	.content-container-nobg { 
		width: 100%;
		padding-right: 0;
		padding-left: 0; 
	}
}

@media (min-width: 1200px) { 
	.content-container-nobg { 
		min-width: 612px;
		max-width: 1600px;
	}
}

/* END SLIDES RESULTS VIEWER CONTAINER */


/* Z-INDEX */

/* Should be 1199, but content length extends */
@media (max-width:  1236px) {
	/* Dropdown menu */
	.slides-results-links-group { 
		z-index: 20;
	}
}

/* END Z-INDEX */

/* MISC TEMP */

.slides-results-label,
.slides-results-directional { 
	line-height: 0.6;
}

.slides-results-label { 
	color: var( --color-white );
}

/* FlashCard */
.diag-show { 
	color: var( --color-diagnoses-show );
}

/* slide card */
.stretched-link { 
	border: none; 
}

/* END MISC TEMP */

/* COLORS */

:root {
	/* #ffffff */ --color-white: rgb( 255, 255, 255 );
	/* #f3f3f3 */ --color-grey-5: rgb( 243, 243, 243 );
	/* #cccccc */ --color-grey-20: rgb( 204, 204, 204 );
	/* #555555 */ --color-grey-67: rgb( 85, 85, 85 );
	/* #424242 */ --color-grey-74: rgb( 66, 66, 66);
	/* #353535 */ --color-grey-79: rgb( 53, 53, 53 ); /* black alpha 0.2 */
	/* #333333 */ --color-grey-80: rgb( 51, 51, 51 );
	/* #ff0000 */ --color-red-100: rgb( 255, 0, 0 );
	/* #fcfca4 */ --color-yellow-35: rgb( 255, 255, 166 );  /* white yellow */
	/* #ffff00 */ --color-yellow-100: rgb( 255, 255, 0 );
	/* #00ff80 */ --color-green-bright: rgb( 0, 255, 128 );  /* bright green */
	/* #9ecaed */ --color-light-blue: rgb( 158, 202, 237 );
	/* #99bfbf */ --color-input-text: rgb( 153, 191, 191 );
	/* #467e99 */ --color-diagnoses-show: rgb( 70, 126, 153 ); /* middle grey-blue */
	/* #007bff */ --color-blue-primary: rgb( 0, 123, 255 );
	/* #007bff */ --color-focus: rgba( 0, 123, 255, 0.5 );
		--shadow-rgba-00015: rgba( 0, 0, 0, 0.15 );
		--shadow-rgba-00075: rgba( 0, 0, 0, 0.75 );
	/* #000000 */ --color-black: rgb( 0, 0, 0 );
}