@import "common.scss";

#main {
	.es-message {
		@extend .box;
		font-size: large;
		border: solid 1px #ccc;
		background-color: #ddd;
		width: 80%;
		padding: 20px;
		margin-left: auto;
		margin-right: auto;
		font-family: roboto;
	}
	div.es-plans {
		ul {
			display: inline-flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: stretch;
			li.es-plan-box {
				flex-grow: 1;
				flex-basis: 100px;
				align-self: auto;
				margin: 2px;
				@extend .box;
				list-style: none;
				&>div.title {
					font-weight: bold;
				}
				div.description {
					margin: 5px;
					font-style: italic;
					display: block;
				}
			}
		}
	}
	div.es-installations {
		&>p {
			font-weight: bold;
		}
		&>p>a.note {
			float: right;
			font-weight: normal;
			font-style: italic;
			&:before { content: "("; }
			&:after { content: ")"; }
		}
		li {
			span {
				float: right;
				border: dotted 1px #bbb;
				padding: 0 5px 0 5px;
				margin-left: 10px;
				background-color: #fff;
				clear: both;
			}
			span.creation {
				font-size: smaller;
				&:before {
					content: "Installed: ";
				}
			}
			span.access {
				font-size: smaller;
				&:before {
					content: "Last-seen: ";
				}
			}
			&.session {
				margin-top: 5px;
				span.creation:before { content: "Started: "; }
				&.active {
					span { background-color: #cfc; }
					border-left: solid 5px orange;
					border-top: dotted 1px orange;
				}
				&.paused {
					span { background-color: #ccf; }
					border-left: solid 5px #009;
					border-top: dotted 1px #009;
					span.access:before { content: "Paused: "; }
				}
				&.closed {
					span { background-color: #bbb; }
					border-left: solid 5px #999;
					border-top: dotted 1px #999;
					span.access:before { content: "Closed: "; }
				}
				&.expired {
					span { background-color: #ddd; }
					border-left: solid 5px #999;
					border-top: dotted 1px #999;
					span.access:before { content: "Expired: "; }
				}
			}

			list-style: none;
			padding: 3px 5px 30px 5px;
			margin-bottom: 5px;
			&.never {
				border-left: solid 5px #ccc;
				border-top: dotted 1px #ccc;
			}
		}
	}
	div.es-subscription, div.es-licenses {
		margin-bottom: 1rem;
		&>p {
			font-weight: bold;
		}
		li {
			list-style: none;
		}
		li.status {
			padding-left: 5px;
			&.success {
				color: #0a0;
				border-left: solid 5px #090;
			}
			&.warning {
				color: #990;
				border-left: solid 5px #900;
			}
		}
	}
}

div.es-new-license {
	position: relative;
	margin-top: 4rem;
	form .button { 
		position: absolute;
		top: -4rem; right: 1rem;
		margin: 1rem;
		padding: .3rem;
		color: #fff;
		background-color: #00a6fd;
		border-radius: 20px;
		border: solid .3rem #00a6fd;
		font-size: 110%;;
		font-weight: bold;
		&:hover {
			color: #00a6fd;
			border: solid .3rem #00a6fd;
			background-color: #00a6fd20;
		}
	}
}
div.es-licenses div.es-license, 
div.es_summary div.es-license {
	color: #5b5b5b;
	padding: 1rem;
	border: solid 1px #ccc;
	background-color: #f5f5f5;
	margin-bottom: 1rem;
	div.header {
		padding: 1rem;
		background-color: #fff;
		position: relative;
		box-sizing: border-box;
		div.title {
			font-weight: bold;
			font-size: larger;
		}
		div.license-id {
			box-sizing: border-box;
			position: absolute;
			top: 0.5rem;
			right: 0.5rem;
			span.id {
				display: block;
				font-weight: bold;
			}
		}
	}
	div.details {
		div.es-installations {
			margin-top: 0.2rem;
		}
		li {
			margin-bottom: 0.2rem;
			span.title {
				font-weight: bold;
			}
		}
		li.status.warning {
			color: red !important;
			font-weight: bold;
		}
		li.es-installation {
			font-style: italic;
			button { 
				color: #c00;
				padding: 2px 4px 2px 4px;
				border-radius: 3px;
				border: solid 1px #ccc;
				&:hover {
					color: white;
					background-color: #f00;
				}
				font-size: larger;
				font-weight: bold;
				margin-left: .5rem;
				margin-right: .5rem;
			}
		}
	}
}
.es_summary {
	div.es-license {
		padding: 0;
		border: none;
		margin-bottom: .02rem;
	}
	div.header {
		border: solid 1px #ccc;
		div.details {
			color: #333;
			font-style: italic;
			font-size: smaller;
			.warning {
				color: red;
				font-weight: bold;
			}
		}
	}

}

div.cms-node div.info {
	display: none;
}