//
// Getting Started tab
//--------------------

.getting-started {
	@include atum-panel;
	margin: 20px 0 20px 20px;
	padding: 1.2rem;
	display: flex;
	
	.panel {
		padding: 1rem;
		border-radius: 5px;
		display: flex;
		flex-wrap: wrap;
		
		&:first-child {
			margin-right: $grid-gutter-width/1.5;
		}
		
		.panel-title {
			display: flex;
			width: 100%;
			margin-bottom: $grid-gutter-width/1.5;
			
			.atum-icon {
				font-size: 3rem;
				margin-right: $grid-gutter-width/2;
			}
			
			h2, h4 {
				margin: 0;
			}
			
			h2 {
				font-size: 26px;
			}
			
			h4 {
				font-size: 18px;
				margin-top: 10px;
			}
		}
		
		.panel-content {
			display: flex;
			width: 100%;
			
			.templates-short-list {
				width: 50%;
				color: $blue-dark;
				
				&:first-child {
					margin-right: 10px;
				}
				
				> strong {
					font-size: 14px;
				}
				
				ul {
					padding: 0;
					
					li {
						display: flex;
						list-style: none;
						padding: 5px 0 10px;
						
						&:not(:last-child) {
							border-bottom: 1px solid $gray-200;
						}
						
						> i {
							padding-top: 2px;
							font-size: 17px;
						}
						
						.template-name {
							margin: 0 5px;
							flex-grow: 1;
							
							strong {
								font-size: 14px;
								display: block;
								font-weight: 400;
								line-height: 20px;
							}
							
							.template-desc {
								font-size: 12px;
								line-height: 1.2;
								color: $gray-600;
								@include text-overflow;
								max-width: 190px;
							}
							
						}
						
						.template-controls {
							i {
								font-size: 15px;
							}
						}
						
					}
				}
				
				.alert {
					margin-top: $grid-gutter-width/2;
					margin-right: $grid-gutter-width/2;
				}
				
			}
		}
	}
	
	.panel-info {
		background-color: $blue-light-2;
		width: 70%;
		
		.panel-title {
			i, h2, h4 {
				color: $primary;
			}
		}
	}
	
	.panel-success {
		background-color: $green-light-2;
		width: 40%;
		
		.panel-title {
			i, h2, h4 {
				color: $success;
			}
		}
		
		p {
			color: $blue-dark;
		}
		
		.btn {
			margin-top: $grid-gutter-width;
		}
	}
}