.md-admin-dashboard-main-layout {
	padding: 0 20px 20px;

	.cf-dashboard-layout {
		max-width: 100%;

		* {
			box-sizing: border-box;
		}

		&__header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 30px 0 0;
			padding: 15px 20px;
			background-color: #fff;
			border: 1px solid #e2e4e7;

			.better-by-default-brand {
				display: flex;
				align-items: center;
				gap: 10px;
				line-height: normal;
			}

			.better-by-default-brand-icon {
				display: block;
				width: 32px;
				height: 32px;
				flex-shrink: 0;
			}

			.better-by-default-brand-title {
				color: #0b1014;
				font-size: 18px;
				font-weight: 600;
				line-height: 1;
			}

			.better-by-default-brand-version {
				display: inline-flex;
				align-items: center;
				padding: 3px 8px;
				font-size: 12px;
				font-weight: 500;
				line-height: 1;
				color: #50575e;
				background: #f0f0f1;
				border-radius: 4px;
			}
		}

		&__tab-footer {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			gap: 16px;
			margin-top: 30px;
			padding-top: 20px;
			border-top: 1px solid #e2e4e7;
		}

		&__tabs-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: center;
			margin: 0;
			padding: 0;
			background-color: #fff;
			border: 1px solid #e2e4e7;
			border-top: none;

			.nav-tab.tab-button {
				display: inline-block;
				float: none;
				padding: 15px 0;
				margin: 0 20px;
				border: none;
				border-bottom: 2px solid transparent;
				border-radius: 0;
				background: transparent;
				box-shadow: none;
				color: #000;
				font-size: 14px;
				font-weight: 500;
				line-height: 17px;
				cursor: pointer;
				transition: 0.2s ease-in-out;

				&:hover,
				&:focus {
					background: transparent;
					color: #000;
					box-shadow: none;
				}

				&.active,
				&.nav-tab-active {
					background: transparent;
					border-bottom-color: #d45829;
					color: #000;
				}
			}
		}

		&__inner {
			.notice {
				margin: 15px 0 2px;
			}

			form {
				margin: 20px 0;
				min-height: 540px;
			}
		}

		&__form {
			position: relative;
			margin: 0;
			min-height: 100%;
			background-color: #fff;
			border: 1px solid #e2e4e7;
			padding: 20px;

			&.main-better-by-default-wrap {
				margin: 0;
				display: block;
				align-items: stretch;
				width: 100%;
			}

			&.activity-log-wrapper {
				padding: 20px;
			}

			.tab-contents {
				width: 100%;
				padding: 10px 0;
				position: relative;

				.tab-content {
					display: none;

					&.active {
						display: block;
					}
				}

				.form-table {
					padding: 0;
				}

				.tab-content .form-table .tooltip_wrap .tooltip::after {
					left: -100px;
				}

				tr.better-by-default-checkbox {
					width: 50%;
					float: left;

					@media screen and (max-width: 1100px) {
						width: 100%;
					}
				}
			}
		}

		&__outer--no-tabs {
			.cf-dashboard-layout__form {
				border-top: 1px solid #e2e4e7;
			}
		}

		.button.button-primary.better-by-default-save-button {
			background-color: #d45829;
			border: 2px solid #d45829;
			box-shadow: none;
			text-shadow: none;
			height: auto;
			padding: 10px 15px;
			line-height: normal;
			font-size: 14px;
			border-radius: 6px;
			min-width: 145px;
			text-align: center;
			font-weight: 500;
			transition: 0.2s all ease-in-out;

			&:hover,
			&:focus {
				color: #d45829;
				background-color: transparent;
				border-color: #d45829;
				box-shadow: none;
			}
		}
	}
}

.toplevel_page_better-by-default-settings {
	.md-admin-dashboard-main-layout {
		.cf-dashboard-layout__form {
			.button,
			.button-secondary,
			.button-primary {
				&.focus,
				&:focus {
					border-color: #d45829;
					box-shadow: 0 0 0 1px #d45829;
				}
			}

			select:hover {
				color: #d45829;
			}

			input[type="checkbox"]:checked::before {
				content: none;
				display: none;
				margin: 0;
				width: 0;
				height: 0;
			}

			.better-by-default-color-field-control {
				display: flex;
				align-items: center;
				gap: 12px;
				max-width: 220px;

				input[type="color"].better-by-default-color-input {
					width: 48px;
					height: 40px;
					padding: 3px;
					border: 1px solid #c3c4c7;
					border-radius: 6px;
					cursor: pointer;
					background: #fff;
					flex-shrink: 0;

					&:focus {
						border-color: #d45829;
						box-shadow: 0 0 0 1px #d45829;
						outline: none;
					}
				}

				.better-by-default-color-hex {
					flex: 1;
					min-width: 0;
					padding: 8px 12px;
					font-size: 13px;
					font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
					color: #50575e;
					background: #fff;
					border: 1px solid #dde1e7;
					border-radius: 4px;
					letter-spacing: 0.02em;
					line-height: 1.2;
				}
			}

			.form-table {
				tr.better-by-default-toggle {
					border-top: 1px solid #e2e4e7;

					&:first-child {
						border-top: none;
					}

					th {
						padding: 20px 24px 20px 0;
						width: 220px;
						max-width: 220px;
						vertical-align: top;
						font-weight: 600;
						font-size: 14px;
						line-height: 1.4;
						color: #0b1014;
					}
				}
			}

			.form-table td:has(.better-by-default-color-field-control) {
				display: block;
				align-items: unset;
			}

			.form-table tr.better-by-default-toggle td {
				display: flex;
				flex-wrap: wrap;
				align-items: flex-start;
				padding: 20px 0;
				gap: 0;

				> .better-by-default-field-checkbox_main + label {
					flex-shrink: 0;
					margin: 2px 0 0;
				}

				> .better-by-default-field-description {
					flex: 1;
					min-width: 0;
					margin-left: 12px;
					padding-right: 16px;
					line-height: 1.5;
					font-size: 14px;
					color: #3c434a;
				}

				> .better-by-default-field-with-options {
					flex-basis: 100%;
					width: 100%;
					display: block;
					position: relative;
					margin-top: 4px;

					// More/Less feature disabled.
					> .show-more-less {
						display: none !important;
					}
				}

				.better-by-default-subfields,
				.wrapper-show-more {
					width: 100%;
				}

				.better-by-default-field-with-options.is-enabled .better-by-default-subfields,
				.wrapper-show-more.opened .better-by-default-subfields,
				.admin-color-branding.opened .better-by-default-subfields,
				.site-identity-on-login-page.opened .better-by-default-subfields {
					display: grid;
					grid-template-columns: repeat(2, minmax(0, 1fr));
					gap: 10px 24px;
					margin-top: 12px;
					margin-left: 12px;
					padding-top: 16px;
					border-top: 1px solid #e2e4e7;

					@media screen and (max-width: 782px) {
						grid-template-columns: 1fr;
					}

					> tr.better-by-default-half,
					> tr.better-by-default-checkbox,
					> tr:has(.better-by-default-subfield-checkbox) {
						display: flex !important;
						align-items: center;
						width: auto !important;
						float: none !important;
						margin: 0 !important;
						padding: 4px 0;
						box-sizing: border-box;

						th {
							display: none;
						}

						td {
							display: flex !important;
							align-items: center;
							flex-wrap: nowrap;
							padding: 0 !important;
							margin: 0 !important;
							width: 100%;
						}
					}

					> tr.better-by-default-toggle[class*="admin-color-scheme"],
					> tr.better-by-default-toggle.login-highlight-color,
					> tr.better-by-default-toggle.login-highlight-color-hover,
					> tr:has(.better-by-default-color-field-control) {
						display: block !important;
						width: auto !important;
						float: none !important;
						margin: 0 !important;
						padding: 14px 16px;
						background: #f6f7f7;
						border: 1px solid #e2e4e7;
						border-radius: 6px;
						box-sizing: border-box;

						th {
							display: block;
							width: 100% !important;
							padding: 0 0 10px !important;
							margin: 0;
							font-size: 13px;
							font-weight: 600;
							line-height: 1.3;
							color: #0b1014;
						}

						td {
							display: block !important;
							width: 100% !important;
							padding: 0 !important;
							margin: 0 !important;
						}
					}

					> tr.site-identity-description,
					> tr.login-header-image-url,
					> tr.login-header-image-size,
					> tr:not(.better-by-default-half):not(.better-by-default-checkbox):not(:has(.better-by-default-subfield-checkbox)):not(:has(.better-by-default-color-field-control)) {
						grid-column: 1 / -1;
						width: 100% !important;
						float: none !important;
						display: block;
						margin: 0 !important;
					}
				}
			}
		}
	}
}