.uo-settings {
	font-size: 15px;
	font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	background: #fff;
	border: 1px solid #d2d2d2;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);

	border-radius: 3px;

	overflow: hidden;

	display: flex;
}

.uo-settings,
.uo-settings * {
	box-sizing: border-box;
}

.uo-settings a {
	text-decoration: none;
}

.uo-settings-status {
	width: 140px;
	flex: 0 0 auto;
	padding: 40px 20px;
	text-align: center;
	background: #fff7f6;
	border-right: 1px solid #d2d2d2;
	position: relative;
}

.uo-settings--active .uo-settings-status {
	background: #f4fff4;
}

.uo-settings-status__icon {
	width: 55px;
	height: 55px;

	background: #e94b35;

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	border-radius: 50%;
}

.uo-settings-account-connected {
	background: #ecf7ed;
	color: #000;
	border-radius: 8px;
	display: inline-block;
	padding: 8px 15px;
	margin-bottom: 20px;
}

.uo-settings--active .uo-settings-status__icon {
	background: #1fce6d;
}

.uo-settings-status-icon__svg {
	max-width: 50%;
	max-height: 50%;

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.uo-settings-status-icon__svg-path {
	fill: #fef7f6;
}

.uo-settings-content {
	flex: 1 1 auto;
}

.uo-settings-content-form {
	padding: 0;
	margin: 0;
	border: 0;
}

.uo-settings-content-top {
	display: flex;
}

.uo-settings-content-title {
	width: 100%;
	display: block;
	font-size: 16px;
	color: #343434;
	margin-bottom: 10px;
}

.uo-settings-content-description ul,
.uo-settings-content-description li {
	list-style: disc !important;
	list-style-position: outside !important;
	margin-left: 10px;
}

.uo-settings-content-description p {
	font-size: inherit;
}

.uo-settings-content-description {
	color: #6b6b6b;
	margin-bottom: 10px;
}

.uo-settings-content-description a {
	color: #0790e8;
}

.uo-settings-content-info,
.uo-settings-content-faq {
	padding: 20px;
	line-height: 1.4;
}

.uo-settings-content-info {
	width: 60%;
}

.uo-settings-content-form {
	margin-top: 10px;
}

.uo-settings-content-form input[type="text"],
.uo-settings-content-form input[type="number"],
.uo-settings-content-form input[type="select"],
.uo-settings-content-form input[type="password"] {
	width: 100%;
	height: 37px;

	/* Padding. We are using this instead of the shortcut because otherwise WP will overwrite some paddings */
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 12px;
	padding-right: 12px;

	transition: border 150ms ease-in-out;

	border-radius: 3px;
	border: 1px solid #cdcdcd;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);

	outline: none;
}

.uo-settings-content-form input[type="number"]::placeholder,
.uo-license-content-form input[type="password"]::placeholder {
	color: #a4a4a4;
}

.uo-settings-content-form #uo-settings-field:valid {
	font-family: Consolas, Monaco, "Courier New", Courier, monospace;
	letter-spacing: 1px;
}

.uo-settings-content-form #uo-settings-field:hover {
	border-color: #b9b9b9;
}

.uo-settings-content-form #uo-settings-field:focus {
	border-color: #0790e8;
}

.uo-settings-content-faq {
	width: 40%;
	position: relative;
}

.uo-settings-content-faq::before {
	content: "";

	width: 1px;
	height: calc(100% - 80px);

	background: #e1e1e1;

	position: absolute;
	top: 40px;
	left: 0;
}

.uo-settings-content-faq-list {}

.uo-settings-content-faq-list-ul {
	padding: 0;
	margin: 0;
}

.uo-settings-content-faq-item {
	list-style: none;
	padding: 0;
	margin: 0;
}

.uo-settings-content-faq-item a {
	color: #848484;
	padding: 1px 0;
	display: inline-block;
}

.uo-settings-content-footer {
	background: #fafafa;
	border-top: 1px solid #e1e1e1;
	padding: 15px 20px;
}

.uo-settings-content-header {
	background: #fafafa;
	border-top: 1px solid #e1e1e1;
	padding: 15px 20px;
}

.uo-settings-content-header.uo-setting--active {
	background: #f3fff3;
	color: #008000;
}

.uo-settings-content-header.uo-setting--inactive {
	background: #fff7f6;
	color: #e94b36;
}

.uo-settings-btn {
	outline: none;
	display: inline-block;
	font-weight: 500;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	user-select: none;
	border: 1px solid transparent;
	padding: 5px 15px;
	font-size: 15px;
	line-height: 1.5;
	border-radius: 8px;
	background-color: transparent;
	transition: color 150ms ease-in-out, background-color 150ms ease-in-out, border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
	cursor: pointer;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
	position: relative;
}

.uo-settings-btn:not(:last-child) {
	margin-right: 10px;
}

.uo-settings-btn--primary {
	color: #0790e8;
	border-color: #0790e8;
}

.uo-settings-btn--primary.uo-settings-btn--loading,
.uo-settings-btn--primary.uo-settings-btn--disabled,
.uo-settings-btn--primary:disabled,
.uo-settings-btn--primary:hover,
.uo-settings-btn--primary:focus {
	color: #fff;
	background-color: #0790e8;
}

.uo-settings-btn--primary:not(.uo-settings-btn--disabled):active,
.uo-settings-btn--primary:not(.uo-settings-btn--disabled):focus {
	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

.uo-settings-btn--secondary {
	color: #6c757d;
	border-color: #b7b7b7;
}

.uo-settings-btn--secondary.uo-settings-btn--loading,
.uo-settings-btn--secondary.uo-settings-btn--disabled,
.uo-settings-btn--secondary:disabled,
.uo-settings-btn--secondary:hover,
.uo-settings-btn--secondary:focus {
	color: #fff;
	border-color: #9e9e9e;
	background-color: #9e9e9e;
}

.uo-settings-btn--secondary:not(.uo-settings-btn--disabled):active,
.uo-settings-btn--secondary:not(.uo-settings-btn--disabled):focus {
	box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.2);
}

.uo-settings-btn--error {
	color: #e94b35;
	border-color: #e94b35;
}

.uo-settings-btn--error.uo-settings-btn--loading,
.uo-settings-btn--error.uo-settings-btn--disabled,
.uo-settings-btn--error:disabled,
.uo-settings-btn--error:hover,
.uo-settings-btn--error:focus {
	color: #fff;
	border-color: #e94b35;
	background-color: #e94b35;
}

.uo-settings-btn--error:not(.uo-settings-btn--disabled):active,
.uo-settings-btn--error:not(.uo-settings-btn--disabled):focus {
	box-shadow: 0 0 0 0.2rem rgba(233, 75, 53, 0.2);
}

.uo-settings-btn--disabled,
.uo-settings-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.uo-settings-btn--loading,
.uo-settings-btn--loading:hover {
	color: transparent !important;
}

.uo-settings-btn--loading::before {
	content: "";

	width: 16px;
	height: 16px;

	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjAiIHdpZHRoPSI2NHB4IiBoZWlnaHQ9IjY0cHgiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48cGF0aCBkPSJNNzUuNCAxMjYuNjNhMTEuNDMgMTEuNDMgMCAwIDEtMi4xLTIyLjY1IDQwLjkgNDAuOSAwIDAgMCAzMC41LTMwLjYgMTEuNCAxMS40IDAgMSAxIDIyLjI3IDQuODdoLjAyYTYzLjc3IDYzLjc3IDAgMCAxLTQ3LjggNDguMDV2LS4wMmExMS4zOCAxMS4zOCAwIDAgMS0yLjkzLjM3eiIgZmlsbD0iI2ZmZiIgZmlsbC1vcGFjaXR5PSIxIi8+PGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIGZyb209IjAgNjQgNjQiIHRvPSIzNjAgNjQgNjQiIGR1cj0iMTgwMG1zIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlVHJhbnNmb3JtPjwvZz48L3N2Zz4=) center center no-repeat;
	background-size: contain;

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	color: #fff;
}

.uap-report-filters__pro-notice {
	width: 100%;

	color: #6e6e6e;
	font-weight: 500;
	font-size: 14px;

	margin-top: 3px;

	display: flex;
	align-items: center;
}

.uap-report-filters__pro-notice::before {
	content: "";

	width: 15px;
	height: 15px;

	display: inline-block;

	margin-right: 5px;

	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgYXJpYS1oaWRkZW49InRydWUiIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48ZGVmcy8+PHBhdGggZmlsbD0iIzZlNmU2ZSIgZD0iTTIyNCA0MTJhMjggMjggMCAwMS0yOC0yOHYtNjRhMjggMjggMCAxMTU2IDB2NjRhMjggMjggMCAwMS0yOCAyOHptMjI0LTE3MnYyMjRhNDggNDggMCAwMS00OCA0OEg0OGE0OCA0OCAwIDAxLTQ4LTQ4VjI0MGE0OCA0OCAwIDAxNDgtNDhoMzJ2LTQ4QzgwIDY0LjUgMTQ0LjgtLjIgMjI0LjQgMCAzMDQgLjIgMzY4IDY1LjggMzY4IDE0NS40VjE5MmgzMmE0OCA0OCAwIDAxNDggNDh6bS0zMjAtNDhoMTkydi00OGMwLTUyLjktNDMuMS05Ni05Ni05NnMtOTYgNDMuMS05NiA5NnY0OHptMjcyIDQ4SDQ4djIyNGgzNTJWMjQweiIvPjwvc3ZnPg==) no-repeat center;
	background-size: contain;
}

@media screen and (max-width: 768px) {
	.uo-settings {
		display: block;
	}

	.uo-settings-status {
		width: 100%;
		border-right: 0;
		height: 150px;
		border-bottom: 1px solid #d2d2d2;
	}

	.uo-settings-content {}

	.uo-settings-content-top {
		display: block;
	}

	.uo-settings-content-info,
	.uo-settings-content-faq {
		width: 100%;
	}

	.uo-settings-content-faq::before {
		width: calc(100% - 80px);
		height: 1px;

		top: 0;
		left: 40px;
	}
}