#welcome-dialog {
	display: flex;
	max-width: 1000px;
	padding: 0;
}

@media all and (max-width: 700px) {
	#welcome-dialog {
		flex-direction: column;
	}
}

#welcome-dialog > div {
	display: flex;
	flex-direction: column;
}

#welcome-dialog-left {
	flex: 3;
	z-index: 1;
	box-shadow: 0 0 2em rgba(0,0,0,.3);
	background: hsl(210, 100%, 90%);
	background: radial-gradient(circle at top left, hsl(210, 100%, 98%), hsl(210, 100%, 80%));
}

#welcome-dialog-right {
	flex: 2;
	background: #efefef;
}

#welcome-dialog .main {
	padding: 2em;
}

#welcome-dialog .main ul {
	padding-left: 0;
	list-style: none;
}

#welcome-dialog .main li {
	font-size: 1.1rem;
}

#welcome-dialog .main li::before {
	content: '✓';
	font-size: 1.4rem;
	margin-right: .5rem;
}

#welcome-dialog-left li::before {
	color: hsl(210, 100%, 50%);
}

#welcome-dialog .actions {
	display: flex;
	align-items: center;
	gap: 1em;
	margin: 1em .5em;
}

.new-btn {
	font-family: 'Open Sans', sans-serif;
	color: #000 !important;
	background: rgba(255,255,255,.5);
	font-size: 1.2rem;
	padding: .5em 1em;
	border-radius: 2em;
  white-space: nowrap;
}

.new-btn.gray {
	border: 1px solid hsl(210, 0%, 50%);
  box-shadow: 0 0 0px 3px hsl(210, 0%, 80%);
}

.new-btn.blue {
	border: 1px solid hsl(210, 60%, 50%);
  box-shadow: 0 0 0px 3px hsl(210, 60%, 80%);
}

.new-btn:hover {
	background: #fff;
}

.new-btn.blue:hover {
	border-color: hsl(210, 100%, 50%);
  box-shadow: 0 0 0px 3px hsl(210, 100%, 80%);
}

#welcome-dialog .detail {
	flex: 1;
	padding: 1.3em;
	color: #666;
	background: rgba(0,0,0,.1);
	font-size: .85em;
}

#welcome-dialog-left .detail {
	color: hsl(210, 20%, 20%)
}

#welcome-dialog .detail ul {
	padding-left: 1.5em;
}

#welcome-dialog .detail li {
	margin: 5px 0;
}

.new-link {
	color: inherit !important;
	text-decoration: underline;
}

.new-link:hover {
	color: hsl(210, 100%, 50%) !important;
}