// Reset css
// html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote{&:before,&:after{content:'';content:none}}q{&:before,&:after{content:'';content:none}}table{border-collapse:collapse;border-spacing:0}
// Layout

body {
	font-family: 'Roboto', monospace;
}


.app-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.el-main {
	padding: 0;
	overflow: hidden;
}

.wrapper--snippet {
	height: 19vh;
	background: #6cf2ce;
	overflow: auto;

	pre {
		padding: 20px;
		color: #6cf2ce;
		line-height: 1.3;
	}
}

// Forms

.wrapper--forms {
	padding: 30px;
	position: relative;
	height: 90%;
	overflow: auto;
}

// Sidebar

.wrapper--sidebar {
	padding: 30px;

	.el-tabs {
		min-height: 450px;
		border-bottom: 0;
	}

	.el-tabs__header {
		margin-bottom: 0;
	}

	.el-tabs__content {
		padding: 0;
	}

	.el-tabs__inner {
		padding: 20px;
	}

	.el-tabs__nav {
		float: none;

		.el-tabs__item {
			width: 33.33%;
			text-align: center;
		}
	}

	.el-tabs--border-card {
		border: 1px solid gray;
	}

	.el-form-item__label {
		line-height: 1;
	}
}

.el-input-number {
    width: auto !important;
}

.el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: auto !important;
}

// Preview
.preview__wrapper {
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

.el-form-item {
	padding: 10px;
	margin-bottom: 0;
}
