/* ------------ Google fonts ------------ */

	/* fallback */
	@font-face {
		font-family: 'Material Icons';
		font-style: normal;
		font-weight: 400;
		src: url(https://fonts.gstatic.com/s/materialicons/v31/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
	}

	.material-icons {
		font-family: 'Material Icons';
		font-weight: normal;
		font-style: normal;
		font-size: 24px;
		line-height: 1;
		letter-spacing: normal;
		text-transform: none;
		display: inline-block;
		white-space: nowrap;
		word-wrap: normal;
		direction: ltr;
		-webkit-font-feature-settings: 'liga';
		-webkit-font-smoothing: antialiased;
		margin-right: 10px;
	}
	.smart-menu-item-label-element .material-icons {
		position: relative;
		top: 6px;
	}
	
#listMenu4 td {
		padding: 0;
	}
	/* ------------ */

	

	#overviewHeading,
	#usageHeading {
		border-top: none !important;
	}

	.smart-demo-container section {
		margin-top: 80px;
	}

		.smart-demo-container section:first-of-type {
			margin-top: 0;
		}

		.smart-demo-container section div h2 {
			color: #212121;
			font-size: 20px;
			font-weight: 400;
			line-height: 32px;
			margin-bottom: 20px;
			max-width: 940px;
		}

	.smart-demo-container nav {
		display: block;
		border-left: 5px #3949ab solid;
		padding-left: 20px;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
		-webkit-font-smoothing: antialiased;
		font: inherit;
		margin-top: 60px;
	}

		.smart-demo-container nav ul {
			list-style: none;
			margin-top: 0;
			padding-left: 0;
			margin: 0;
			padding: 0;
			border: 0;
			font: inherit;
			vertical-align: baseline;
			display: block;
			list-style-type: disc;
		}

		.smart-demo-container nav li {
			list-style: none;
			margin: 0;
			padding: 0;
			border: 0;
			font-size: 100%;
			font: inherit;
			vertical-align: baseline;
			font-size: 20px;
			line-height: 40px;
		}

			.smart-demo-container nav li a {
				text-decoration: none;
			}

		.smart-demo-container nav h2 {
			font-size: 15px;
			line-height: 16px;
			padding-bottom: 12px;
			font-weight: 400;
			color: #757575;
			margin: 0;
			padding: 0;
			border: 0;
			font: inherit;
			vertical-align: baseline;
			-webkit-margin-before: 1em;
			-webkit-margin-after: 1em;
			-webkit-margin-start: 0px;
			-webkit-margin-end: 0px;
		}

	.module {
		width: calc(100% / 4);
		height: auto;
		display: inline-block;
		font: inherit;
		margin-right: 40px;
		min-width: 355px;
		vertical-align: top;
		position: relative;
	}

	.smart-demo-container .raised-demo-start {
		background-image: url(https://htmlelements.com/demos/images/raised-button-demo.png);
	}

	section .light-theme {
		background-color: #EEEEEE;
		padding: 120px 60px 120px 60px;
	}

	section .dark-theme {
		background-color: #333333;
		padding: 120px 60px 120px 60px;
	}

	.module h3 {
		margin-top: 30px;
	}

	.module p {
		margin-bottom: 20px;
	}

	.module img {
		width: 100%;
	}

	.module > div:nth-child(odd) {
		margin-top: 20px;
		margin-bottom: 20px;
		width: 360px;
		height: 640px;
		background-size: 100%;
		position: relative;
	}

	/* current demo-specific styles */
	.module-wide {
		width: calc(100% / 2);
	}

	#menu1Container,
	#menu2Container,
	#menu2,
	#menu4,
	#listMenu1Container,
	#listMenu1,
	#listMenu2Container,
	#listMenu2,
	#listMenu3Container,
	#listMenu3,
	#listMenu4 {
		position: relative;
	}

	#menu5,
	smart-button.material.menu-token {
		position: absolute;
	}

	#menu1Container {
		background-image: url(https://htmlelements.com/demos/images/components-menus-usage1.png);
	}

	smart-button.material.menu-token {
		border-radius: 50%;
		width: 30px;
		height: 30px;
		cursor: pointer;
	}

		smart-button.material.menu-token:not(#menu1Token):not(#menu7Token) {
			right: 15px;
		}

		smart-button.material.menu-token:nth-of-type(1) {
			top: 248px;
		}

		smart-button.material.menu-token:nth-of-type(2) {
			top: 312px;
		}

		smart-button.material.menu-token:nth-of-type(3) {
			top: 376px;
		}

		smart-button.material.menu-token:nth-of-type(4) {
			top: 440px;
		}

		smart-button.material.menu-token:nth-of-type(5) {
			top: 504px;
		}

		smart-button.material.menu-token:nth-of-type(6) {
			top: 568px;
		}

		smart-button.material.menu-token > button {
			padding: 3px;
		}

	#menu1Token,
	#menu7Token {
		left: 322px;
		top: 36px;
	}

		#menu1Token > button:not(.hover),
		#menu7Token > button:not(.hover) {
			color: white;
		}

	#menu1,
	#menu3,
	#menu7 {
		height: auto;
		transform-origin: 100% 0;
	}

	#menu2Container {
		background-image: url(https://htmlelements.com/demos/images/components-menus-usage3do.png);
		width: 743px;
		height: 434px;
	}

	#menu2 {
		top: 85px;
		left: 71px;
	}

	#menu3Container {
		height: 621px;
		background-image: url(https://htmlelements.com/demos/images/components-menus-usage4a.png);
	}

	#menu-items .vertical-menu-container,
	#tree-menu .vertical-menu-container {
		width: 100%;
		background-color: #EEEEEE;
	}

	#menu-items .vertical-menu-container {
		height: 800px;
	}

	#tree-menu .vertical-menu-container {
		padding: 50px;
		height: 400px;
	}

	#menu4,
	#menu5,
	#menu6 {
		box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
	}

	#menu4 {
		top: 50px;
		left: 50px;
	}

	#menu5 {
		bottom: 50px;
		right: 50px;
	}

	#menu6 {
		width: 300px;
		height: 300px;
	}

	#listMenu1Container {
		background-image: url(https://htmlelements.com/demos/images/components-menus-usage2.png);
	}

	#listMenu1,
	#listMenu2,
	#listMenu3,
	#listMenu4 {
		--smart-list-menu-filter-input-size: 40px;
		top: 80px;
		width: 360px;
		height: 512px;
	}

	#listMenu2Container {
		background-image: url(https://htmlelements.com/demos/images/components-menus-usage3.png);
	}

	#listMenu3Container {
		background-image: url(https://htmlelements.com/demos/images/components-listcontrols-expand1.png);
	}

	#listMenu4Container {
		background-image: url(https://htmlelements.com/demos/images/components-listcontrols-leave1.png);
	}

	#listMenu4 {
		height: 560px;
	}

	#plusButton {
		position: absolute;
		bottom: 20px;
		right: 20px;
	}

		#plusButton > button {
			background-color: inherit;
		}

	button > i.material-icons {
		margin-left: 9px;
	}

	#listMenu4 .mail-name,
	#listMenu4 .mail-title {
		font-weight: bold;
	}

	#listMenu4 .mail-name {
		font-size: medium;
	}

	#listMenu4 .mail-title {
		width: 180px;
	}

	#listMenu4 .mail-time {
		font-size: small;
	}

	#listMenu4 .mail-preview {
		width: 250px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	#listMenu4 i.material-icons {
		margin: 0;
		display: flex;
		justify-content: center;
		width: 50px;
	}

	table {
		white-space: initial;
	}