.ct-meta-box-container .ct-options-root {
	> .ct-tabs {
		display: flex;
		position: relative;

		> ul {
			flex: 0 0 180px;
			position: relative;
			margin: 0;
			padding-bottom: 200px;
			background: #F7F7F7;

			&:after {
				position: absolute;
				content: '';
				width: 1px;
				height: 100%;
				top: 0;
				right: 0;
				background: #e7e9ea;
				box-shadow: -1px 0px 3px 0px rgba(0, 0, 0, 0.06);
			}

			> li {
				display: flex;
				align-items: center;
				position: relative;
				height: 45px;
				padding: 0 25px;
				font-size: 12px;
				font-weight: 500;
				color: #555;
				margin: 0;
				cursor: pointer;
				border-bottom: 1px solid #e7e9ea;

				&.active {
					color: #0074a2;
					background: #fdfdfd;

					&:after {
						position: absolute;
						content: '';
						width: 4px;
						height: calc(100% + 2px);
						top: -1px;
						left: 0;
						background: #00a0d2;
					}
				}

				&:hover {
					color: #0074a2;
					background: #fdfdfd;
				}
			}
		}

		> .ct-current-tab {
			flex: 1 1 auto;
		}

		&:before {
			position: absolute;
			content: '';
			width: 100%;
			height: 1px;
			top: -1px;
			left: 0;
			z-index: 100;
			box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
		}

		.ct-current-tab {
			> .ct-tabs {
				> ul {
					display: flex;
					margin: 0;
					background: #fdfdfd;
					border-bottom: 1px solid #eee;

					> li {
						display: flex;
						align-items: center;
						position: relative;
						height: 45px;
						padding: 0 25px;
						margin: 0;
						font-size: 12px;
						font-weight: 500;
						color: #555;
						cursor: pointer;
						border-right: 1px solid #eee;

						&.active {
							color: #000;
							background: #fff;

							&:after {
								position: absolute;
								content: '';
								left: 0;
								bottom: -1px;
								width: 100%;
								height: 1px;
								background: #fff;
							}
						}

						&:not(.active) {
							&:hover {
								color: #0074a2;
							}
						}
					}
				}
			}

			.ct-control {
				padding: 24px 24px;
			}
		}
	}
}