.{prefix}-menu-card
	.{prefix}-submenu-item
		height: 100%;

		li.{prefix}-card-content
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			&.hidden
				display: none;

			.{prefix}-card-mode
				color: #fff;
				font-size: 14px;
				flex: 0 0 200px;

			&.mode-text-image
				.{prefix}-card-field:first-child
					.{prefix}-card-box
						width: 100px;

			.{prefix}-card-field
				display: flex;
				align-items: center;

				> label
					display: inline-block;
					width: 110px;
					color: #fff;
					font-size: 13px;
					text-align: right;
					padding-right: 10px;

					&.required:after
						display: inline-block;
						color: #fff;
						font-size: 12px;
						content: '*';
				
				> .{prefix}-card-input
					width: 205px;
					height: 24px;
					vertical-align: middle;
					display: inline-table;
					border-collapse: separate;
					font-size: 0;
					line-height: 1;
					border-spacing: 0;
					transition: all .1s linear;
					border: 1px solid #dcdfe6;
					background-color: #fff;
					border-radius: 4px;

					> input
						width: 100%;
						border: none;
						outline: none;
						padding: 0;
						margin: 0;
						font-weight: 400;
						vertical-align: middle;
						background-color: transparent;
						color: #1f2633;
						height: 26px;
						line-height: 26px \0;
						padding: 0 8px;
						font-size: 12px;

				> .{prefix}-card-box
					width: 220px;
					height: 24px;
					vertical-align: middle;
					display: inline-table;
					text-align: left;

					> button
						position: relative;
						display: inline-block;
						box-shadow: none;
						text-decoration: none;
						text-align: center;
						text-transform: none;
						white-space: nowrap;
						vertical-align: middle;
						user-select: none;
						transition: all .1s linear;
						line-height: 1;
						cursor: pointer;
						-webkit-appearance: button;
						border-radius: 4px;
						padding: 0 12px;
						height: 32px;
						font-size: 14px;
						border-width: 1px;
						border-style: solid;
						background: #ff4338;
						border-color: transparent;
						color: #fff;

						&:hover,
						&:active
							background: #ea2a2a;

						> .tie-card-image-file
							opacity: 0;
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;

.{prefix}-submenu.float-mode
	.{prefix}-menu-card
		.{prefix}-submenu-item
			li.{prefix}-card-content
				display: flex;
				flex-flow: column;
				padding: 10px 10px 0;
				align-items: flex-start;

				&.hidden
					display: none;

				.{prefix}-card-mode
					flex: 0 0 auto;
					margin-bottom: 10px;

				> .{prefix}-card-row
					flex: 0 0 auto;

				.{prefix}-card-col
					.{prefix}-card-field
						flex: 0 0 100%;
						margin-bottom: 15px;
					
						&:last-child
							margin-bottom: 0;

.{prefix}-card-row
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	flex: 0 0 700px;

	&.wrap {
		flex-flow: row wrap;
	}

	> .{prefix}-card-col
		flex: 0 0 100%;
		margin-bottom: 15px;

		&:last-child
			margin-bottom: 0;