.panel {
	background-color: $color2-dark;
	@if $glassTheme {
		@include bgTranslucentDark(0.2);
	}

	border: 1px solid $color2-light;
	border-radius: $defaultRadius;
	position: relative;
	box-shadow: 0 5px 5px 0 rgba(0,0,0,.25);

	display: flex;
	flex-direction: column;

	> .header, >.footer {
		min-height: 2.2em;

		border-radius: $defaultRadius;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;

		background-color: $buttonColor;
		padding: 0.6em 1.1em;
		font-family: $fontFamilyHeader;
		font-weight: $fontLight;
		font-size: 1.2em;

		color: $textColor;

		box-shadow: 0 3px 3px 0 rgba(0,0,0,.25);

		a {
			color: lighten($secondColor, 20%);
		}

		@include clearfix;
	}

	> .footer {
		border-radius: $defaultRadius;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}

	> .body {
		border-radius: $defaultRadius;
		border-top-left-radius: 0;
		border-top-right-radius: 0;

		padding: 0.8em 1.3em;

		//height: calc(100% - 2.6em); // header size 2.4em

		overflow: auto;

		p:first-child {
			margin-top: 0;
		}

		p:last-child {
			margin-bottom: 0;
		}
	}

	// .footer ~ .body {
	// 	height: calc(100% - 5.2em);
	// }
	

	&.primary {
		> .header, > .footer {
			background-color: $secondColor;
		}
	}

	&.success {
		> .header, > .footer {
			background-color: $successColor;
		}
	}

	&.warning {
		> .header, > .footer {
			background-color: $warningColor;
		}
	}

	&.danger {
		> .header, > .footer {
			background-color: $dangerColor;
		}
	}

	&.outline {
		background-color: transparent;
		> .header, > .footer {
			border-bottom: 1px solid $color2-light;
			background-color: transparent;
		}
	}	

} // .panel