.exm-content-info > * {
	float: left;
}

.exm-content-editor {
	height: 100%;
	/* Style the tab */
	.tab {
		overflow: hidden;
		border: 1px solid #ccc;
		background-color: #f1f1f1;
	}

	/* Style the buttons inside the tab */
	.tab button {
		background-color: inherit;
		float: left;
		border: none;
		outline: none;
		cursor: pointer;
		padding: 14px 16px;
		transition: 0.3s;
		font-size: 17px;
	}

	/* Change background color of buttons on hover */
	.tab button:hover {
		background-color: #ddd;
	}

	/* Create an active/current tablink class */
	.tab button.active {
		background-color: #ccc;
	}

	/* Style the tab content */
	.tabcontent {
		display: none;
		padding: 6px 12px;
		border: 1px solid #ccc;
		border-top: none;
	}

	#html-editor, #css-editor, #js-editor{
		height: 250px;
		width: 100%;
		font-size: 14px;
	}

	.preview-container {
		margin-top: 5px;
		display: flex;
		flex-direction: column;

		.devices {
			display: flex;
			list-style: none;
			justify-content: center;
			height: 15%;
			.selected{
				box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			}
			p {
				height: 45px;
				width: 45px;
			}
			button {
				.phone {
					background-image: url(../images/phone.svg), none;
				}
				.desktop {
					background-image: url(../images/laptop.svg), none;
				}
				.tablet {
					background-image: url(../images/tablet.svg), none;
				}
			}
		}
		.preview {
			width: 100%;
			/*height: 85%;*/
			overflow: hidden;

			/*display: flex;
			justify-content: center;
			*/
			.preview-wrapper {
				border: 1px solid black;

				overflow: hidden;
				padding-top: 56.25%;
				position: relative;

				.preview-iframe {
					/*height: 100%;
					width: 100%;
					border: none;
					*/
					overflow: scroll;
					border: 0;
					height: 100%;
					left: 0;
					position: absolute;
					top: 0;
					width: 100%;
				}
			}
			.phone {
				width:335px;
				height: 100%;
			}
			.desktop {
				width:1200px;
				height: 100%;
			}
			.tablet {
				width:783px;
				height: 100%;
			}

			/* The device with borders */
			.smartphone {
				position: relative;
				width: 360px;
				height: 640px;
				margin: auto;
				border: 16px black solid;
				border-top-width: 60px;
				border-bottom-width: 60px;
				border-radius: 36px;
			}

			/* The horizontal line on the top of the device */
			.smartphone:before {
				content: '';
				display: block;
				width: 60px;
				height: 5px;
				position: absolute;
				top: -30px;
				left: 50%;
				transform: translate(-50%, -50%);
				background: #333;
				border-radius: 10px;
			}

			/* The circle on the bottom of the device */
			.smartphone:after {
				content: '';
				display: block;
				width: 35px;
				height: 35px;
				position: absolute;
				left: 50%;
				bottom: -65px;
				transform: translate(-50%, -50%);
				background: #333;
				border-radius: 50%;
			}

			/* The screen (or content) of the device */
			.smartphone .content {
				width: 360px;
				height: 640px;
				background: white;
			}

			/* The laptop with borders */
			.laptop {
				-webkit-transform-origin: 0 0;
				transform-origin: 0 0;
				-webkit-transform: scale(.6) translate(-50%); /* Scaled down for a better Try-it experience (change to 1 for full scale) */
				transform: scale(.6) translate(-50%); /* Scaled down for a better Try-it experience (change to 1 for full scale) */
				left: 50%;
				position: relative;
				margin: auto;
				width: 1366px;
				height: 800px;
				border-radius: 6px;
				border-style: solid;
				border-color: black;
				border-width: 24px 24px 80px;
				/*background-color: black;*/

			}

			/* The keyboard of the laptop */
			.laptop:after {
				content: '';
				display: block;
				position: absolute;
				width: 1600px;
				height: 60px;
				margin: 80px 0 0 -110px;
				background: black;
				border-radius: 6px;
			}

			/* The top of the keyboard */
			.laptop:before {
				content: '';
				display: block;
				position: absolute;
				width: 250px;
				height: 30px;
				bottom: -110px;
				left: 50%;
				-webkit-transform: translate(-50%);
				transform: translate(-50%);
				background: #f1f1f1;
				border-bottom-left-radius: 5px;
				border-bottom-right-radius: 5px;
				z-index: 1;
			}

			/* The screen (or content) of the device */
			.laptop .content {
				width: 1366px;
				height: 800px;
				overflow: hidden;
				border: none;
			}

			/* The device with borders */
			.tablet {
				position: relative;
				width: 768px;
				height: 1024px;
				margin: auto;
				border: 16px black solid;
				border-top-width: 60px;
				border-bottom-width: 60px;
				border-radius: 36px;
			}

			/* The horizontal line on the top of the device */
			.tablet:before {
				content: '';
				display: block;
				width: 60px;
				height: 5px;
				position: absolute;
				top: -30px;
				left: 50%;
				transform: translate(-50%, -50%);
				background: #333;
				border-radius: 10px;
			}

			/* The circle on the bottom of the device */
			.tablet:after {
				content: '';
				display: block;
				width: 35px;
				height: 35px;
				position: absolute;
				left: 50%;
				bottom: -65px;
				transform: translate(-50%, -50%);
				background: #333;
				border-radius: 50%;
			}

			/* The screen (or content) of the device */
			.tablet .content {
				width: 768px;
				height: 1024px;
				background: white;
				margin: -1px;
			}
		}

	}
}