html, body {
	background: #fafafa;
}

/* Loading screen */
.spinner {
	margin: 100px auto 0;
	width: 70px;
	text-align: center;
}

.spinner > div {
	width: 18px;
	height: 18px;
	background-color: #BBB;

	border-radius: 100%;
	display: inline-block;
	-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
	animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}

.spinner .bounce2 {
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
	0%, 80%, 100% { -webkit-transform: scale(0) }
	40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
	0%, 80%, 100% { 
		-webkit-transform: scale(0);
		transform: scale(0);
	} 40% { 
		-webkit-transform: scale(1.0);
		transform: scale(1.0);
	}
}

@keyframes fade-in {
	from { opacity: 0 }
	to { opacity: 1 }
}

#app-loading {
	position: fixed;
	width: 100%;
	margin: 0;
	background: #fafafa;
	color: #AAA;
	font-size: 1.5em;
	top: 47%;
	transform: translateY(-50%);
}

#app-loading div[class^="bounce"] {
	font-size: 3em;
	display: inline-block;
}

#app-loading .show-onerror {
	color: #880E4F;
}

#app-loading .show-onerror,
#app-loading.error .hide-onerror {
	display: none;
}

#app-loading .hide-onerror,
#app-loading.error .show-onerror {
	display: initial;
}

.slow-fade-in {
	animation: fade-in 1s ease-in-out;
	animation-delay: 0.3s;
	animation-fill-mode: backwards;
}

/* General */
a:not(.md-button):link {
	color: #2196f3;
}

a:not(.md-button):active {
	color: #1b7bc7;
}

a:not(.md-button):visited {
	color: #3f51b5;
}

.body-small-caps {
	font-variant: all-small-caps;
	font-weight: 500;
	font-size: 1em;
	color: #3a3f44;
}

.text-align-auto *:first-of-type {text-align: left;}
.text-align-auto * {text-align: center;}
.text-align-auto *:last-of-type {text-align: right;}

.md-button md-icon {
	color: inherit;
}

.md-button > md-progress-circular {
	margin: auto;
	margin-top: 0.6em;
}

.md-button.md-fab[disabled] {
	background: rgba(177, 177, 177, 0.50);
}

md-content md-card:first-of-type {
	margin-top: 2em;
}

md-card-title-text {
	position: relative;
}

md-card-title-text span.md-headline {
	color: rgb(33,150,243);
}

md-card-title-text .md-button {
	position: absolute;
	right: 0;
	margin: 0;
	margin-top: -2px;
}

md-slider-container md-input-container input[type="number"] {
	-moz-appearance: textfield;
    padding: 0px;
	color: black!important;
}

md-menu-content {
	max-height: none!important;
}

md-dialog-content {
	background:
		/* Shadow cover */
		linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
		/* Shadow */
		linear-gradient(rgba(0,0,0,0), rgba(0, 0, 0, 0.12) 70%) 0 100%;
		
	background-repeat: no-repeat;
	background-color: white;
	background-size: 100% 40px, 100% 5px;
	background-attachment: local, scroll;
}

.model-name {
	z-index: 2;
}

.model-name h1 {
	font-weight: normal;
	font-size: 1.8em;
	text-shadow: 0 1px 1px rgba(0,0,0,0.1);
	color: rgb(33,150,243);
	margin-top: 0.2em;
	margin-bottom: 0;
	
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: calc(100vw - 150px); /* na sztywno jak bita śmietana */
}

.separator {
	height: 60%;
	vertical-align: middle;
	margin: 5px;
	width: 2px;
	display: inline-block;
	background: rgba(255, 255, 255, 0.5);
}

.md-dark .separator {
	background: rgba(0, 0, 0, 0.5);
}

virdiamed-header md-toolbar {
	z-index: 10;
}

md-icon {
	transition: color 0.4s ease;
}

.md-icon-button.red-dot:after,
.md-icon-button.blue-dot:after {
	content: '';
	position: absolute;
	bottom: 0.5em;
	right: 0.5em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	border: 2px solid white;
}

.md-icon-button.red-dot:after { background: #ff5722; }
.md-icon-button.blue-dot:after { background: #2196f3; }

md-tooltip {
	height: auto!important;
	text-align: center;
	font-size: 1em!important;
	font-weight: normal!important;
	white-space: normal!important;
	line-height: 1.3em!important;
	max-width: 25em;
	padding: 7px;
}

.centered-message {
	color: #CCC;
	text-align: center;
}

.centered-message h2 {
	font-size: 2em;
}

.centered-message md-icon {
	color: #CCC;
	font-size: 200px;
	height: 200px;
	width: 200px;
	margin-top: 15%;
}

lang-switcher {
	margin-left: 1.5em;
}

lang-switcher md-select {
	margin: 0;
}

login-view lang-switcher md-select {
	background: #FFF;
	position: absolute;
	top: 1.5em; right: 2em;
	padding: 0.4em 0em 0.4em 0.6em;
	box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

stl-viewer md-progress-circular {
	z-index: 1;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
}

stl-viewer canvas {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 0;
}

model-panel {
	z-index: 3;
}

model-panel md-card md-card-title {
	padding-bottom: 0;
}

dicom-viewer {
	width: 50vw;
	height: 75vh;
}

.multilabel-slider {
	position: relative;
	padding-bottom: 0.5em;
}

.multilabel-slider > .layout-column .layout-row {
	margin-bottom: -2em;
}

.multilabel-slider span.md-body-1 {
	position: absolute;
    text-align: center;
	width: 80%;
	margin-top: -1em;
}

.slice-slider {
	padding: 1em 0;
	background: #000;
	color: #FFF;
	border-left: 1px solid #444;
	border-radius: 0 6px 6px 0;
}

.slice-slider md-slider .md-track {
	background-color: rgba(255, 255, 255, 0.38);
}

md-slider.md-default-theme.md-min[md-discrete] .md-thumb:after, md-slider.md-min[md-discrete] .md-thumb:after {
	background-color: #EEE;
}

md-slider .md-track-fill {
	z-index: 1;
}

md-slider .md-track-ticks {
    color: rgba(40, 50, 100, 0.70);
}

@media (max-width: 960px) {
	model-panel md-card {
		background: none;
		box-shadow: none;
		width: 100%;
	}

	model-panel md-card-content > :not(.model-controls) {
		display:none;
	}
	
	model-panel .model-controls {
		position: absolute;
		bottom: 0.5em;
		left: 1em;
		right: 1em;
	}
	
	model-panel .model-controls button {
		height: 3em;
	}
	
	model-panel md-card md-card-title {
		display: none;
	}

	dicom-viewer {
		width: 80vw;
		height: calc(100% - 170px);
		margin-left: -20px;
	}

	.headline-btn {
		position: absolute;
		top: 0.3em;
		right: 0.5em;
	}

	login-view lang-switcher md-select {
		top: 5.5em;
		right: 1em;
		box-shadow: 0 1px 6px rgba(0,0,0,0.4);
	}
}

/* MultifileUploader */

multifile-uploader input[type="file"] {
	background: #F6F8F8;
	padding: 12px;
	width: 100%;
	color: #666;
	transition: ease 0.3s background;
}

multifile-uploader input[type="file"].ngf-dragover {
	background: rgb(33,150,243);
	color: #FFF;
}

/* All Models View */

.gridListAllModels md-grid-tile {
	background: #FFF;
	box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
	border-radius: 2px;
	transition: box-shadow ease 0.2s;
}

.gridListAllModels md-grid-tile:hover {
	box-shadow: 0 4px 5px -2px rgba(0,0,0,.2), 0 7px 10px 1px rgba(0,0,0,.14), 0 2px 16px 1px rgba(0,0,0,.12);
}

.gridListAllModels md-grid-tile:before {
	content: 'warning';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	color: #ff5722;
	font-family: 'Material Icons';
	opacity: 0;
	transition: all 0.3s ease;
}

.gridListAllModels md-grid-tile.error:before {
	font-size: 5em;
	opacity: 1;
	z-index: 1;
}

.gridListAllModels md-grid-tile .thumb-img md-icon {
	color: #7F7F7F;
	opacity: 0.6;
    position: absolute;
    width: 1em; height: 1em;
    font-size: 3em;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.gridListAllModels md-grid-tile.error-remove.error-remove-active:before {
	font-size: 3.5em;
	opacity: 0;
	z-index: 1;
}

.gridListAllModels md-grid-tile .thumb-img {
	transition: filter 0.3s ease;
}

.gridListAllModels md-grid-tile.blurred .thumb-img {
	filter: blur(1px); 
}

.gridListAllModels md-grid-tile.error .thumb-img,
.gridListAllModels md-grid-tile.dimmed .thumb-img {
	filter: brightness(0.5);
}

.gridListAllModels md-grid-tile.dimmed md-grid-tile-footer {
	background: none;
}

.gridListAllModels md-grid-tile.dimmed md-progress-circular {
	z-index: 3;
}

.gridListAllModels md-grid-tile.dark {
	background: #000;
}

.gridListAllModels div.thumb-img {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

.gridListAllModels md-grid-tile md-grid-tile-footer {
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.03) 21%,rgba(0,0,0,0.6) 100%);
	height: 4em;
	z-index: 2;
	transition: ease 0.3s all;
}

.gridListAllModels md-grid-tile-footer figcaption {
	width: 100%;
}

.gridListAllModels md-grid-tile-footer figcaption h3 {
	font-weight: bold;
	text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}

.gridListAllModels md-grid-tile figcaption p {
	font-size: 0.8em;
	font-weight: normal;
	color: #ece4e0;
	margin: 0.8em 1.2em;
	opacity: 0;
	margin-bottom: -4em;
	transition: ease 0.3s all;
	
	width: 90%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gridListAllModels md-grid-tile:hover figcaption p {
	opacity: 1;
	margin-bottom: -1em;
}

.gridListAllModels md-grid-tile figcaption p em {
	opacity: 0.6
}

.gridListAllModels md-grid-tile:hover md-grid-tile-footer {
	height: 8em;
	padding-top: 2.5em;
}

.gridListAllModels md-grid-tile .model-buttons {
	position: absolute;
	top: 5px;
	right: 0;
}

.gridListAllModels md-grid-tile .md-fab {
	opacity: 0;
	transition: opacity 0.3s ease;
}

.gridListAllModels md-grid-tile:hover .md-fab {
	opacity: 1;
}

.gridListAllModels md-grid-tile.ng-leave {
	opacity: 1;
	transform: translateY(0%);
	transition: all 0.2s ease-in;
}

.gridListAllModels md-grid-tile.ng-leave.ng-leave-active {
	opacity: 0;
	transform: translateY(25%);
}

/* Table */
table {
	border-collapse: collapse;
	background: #FFF;
	width: 100%;
}

table td {
	padding: 1em 1.5em;
}

table th {
	color: #757575;
	text-align: left;
	padding: 1em 1.5em;
}

tbody tr {
	border-top: 1px solid #e1e1e1;
	border-bottom: 1px solid #e1e1e1;
	transition: ease 0.2s background-color;
}

tbody tr:hover {
	background: #eee;
}

table *[ng-click] {
	cursor: pointer;
}

md-card-content table {
	margin-left: -16px;
	margin-right: -16px;
	width: calc(100% + 32px);
}

md-card-content table:last-child {
	margin-bottom: -16px;
}

/* Aspect ratio (for video) */
[class^="aspect-ratio"] {
	position: relative;
	max-width: 100%;
	height: auto;
}

[class^="aspect-ratio"] > *:first-child {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.aspect-ratio-16-9 {
	padding-top: 56.25% !important;
}

/* virdiamedHeader */
.user-menu-item {
	background-color: #f5f2f0;
	margin-top: -8px;
	margin-bottom: -4px;
	font-size: 1.2em;
	padding: 19px;
}

.user-menu-item md-icon {
	color: #9C1919;
	float: right;
	cursor: pointer;
}

@media (max-width: 960px) {
	.logo img {
		height: 45%;
	}
	
	.logo + div {
		font-size: 0.8em;
	}
}