.web-page-settings {
	align-items    : flex-start;
	display        : flex;
	flex-direction : column;
	flex-grow      : 1;
	padding        : 1.9rem 1rem;
}

.settings-label {
	align-items   : center;
	display       : flex;
	font-size     : 1.1rem;
	margin-bottom : 1rem;
	width         : 100%;
}

.settings-value-container {
	border-bottom : 1px dotted #0033cc;
	cursor        : pointer;
	display       : inline-block;
}

.settings-value {
	border-radius : 5px;
	display       : inline-block;
	min-height    : 20px;
	min-width     : 30px;
	padding       : 0.5rem;
}

.settings-value-container:hover .settings-value {
	background : #f8f8f8;
}

.settings-value-container:hover .view-lesson-color {
	filter : blur(1px);
}

.settings-value-container .view-lesson-color {
	margin : 0.2rem;
}

.settings-label .label-text {
	align-items  : center;
	align-self   : flex-start;
	background   : linear-gradient(to right,#f0f0f0,#efefff);
	border       : 1px solid #e9e9e9;
	color        : #222;
	display      : inline-flex;
	margin-right : 1rem;
	min-width    : 200px;
	padding      : 0.5rem;
	width        : 200px;
}

.settings-label .label-text.settings-popup-active {
	border        : 1px solid #0e336c;
	border-radius : 4px;
}

.settings-title {
	flex-grow : 1;
}

.settings-label .swiftbox {
	flex-grow : 1;
	width     : 0px !important;
}

.child-settings-option {
	opacity    : 1;
	transition : all 0.4s;
	transform  : translate(0,0);
}

.settings-label.web-page-invisible .web-page-help-img {
	display : none;
}

.webpage-color-picker {
	cursor : pointer;
}

.settings-section-header {
	background   : linear-gradient(to right, #f0f0f0, #efefff);
	border       : 1px solid #e9e9e9;
	border-radius: 4px;
	color        : #222;
	font-size    : 1.1rem;
	font-weight  : 600;
	margin       : 1.5rem 0 1rem;
	padding      : 0.5rem;
	width        : 100%;
}

.settings-action {
	align-items  : center;
	display      : flex;
	margin-bottom: 1rem;
	width        : 100%;
}

.duplicate-assessment {
	background-color : #f8f9fa;
	border           : 1px solid #ddd;
	border-radius    : 3px;
	color            : #222;
	font-size        : 1.1rem;
	font-weight      : normal;
	min-width        : 120px;
	padding          : 0.4rem 0.7rem;
	transition       : all 0.2s;
}

.duplicate-assessment:hover {
	background-color : #e9e9e9;
	border-color     : #ccc;
}

.duplicate-assessment svg {
	display        : inline-block;
	fill           : currentColor;
	height         : 1em;
	vertical-align : middle;
	position       : relative;
	top            : -0.05em;
	width          : auto;
}

.options-card {
	max-width : 37.5em;
	padding   : 1em 1.5em;
	width     : 100%;
}

.es-setting-duplicate-exam-cancel,
.es-setting-duplicate-exam-complete,
.es-setting-duplicate-exam-confirm {
	background-color : #f5f5f5;
	border           : 0.0625em solid #ddd;
	border-radius    : 0.25em;
	color            : #333;
	cursor           : pointer;
	font-size        : 0.875em;
	font-weight      : normal;
	margin-top       : 0.5em;
	min-width        : 6em;
	padding          : 0.8em 1em;
	transition       : background-color 0.2s ease;
	text-align       : center;
}

.es-setting-duplicate-exam-complete {
	background-color : #f5f5f5;
	border-color     : #ddd;
	color            : #333;
}

.es-setting-duplicate-exam-confirm {
	background-color : rgb(101, 153, 105);
	border-color     : rgb(101, 153, 105);
	color            : white;
}

.es-setting-duplicate-exam-confirm:hover {
	background-color: #4cae4c;
}

.es-setting-duplicate-exam-cancel:hover,
.es-setting-duplicate-exam-complete:hover {
	background-color: #e5e5e5;
}

.es-options-ui p {
	color         : #333;
	font-size     : 1em;
	line-height   : 1.4;
	margin        : 0 0 1em 0;
	max-width     : 100%;
	overflow-wrap : break-word;
	text-align    : left;
	white-space   : normal;
	word-wrap     : break-word;
}

.options-title {
	border-bottom  : 0.0625em solid #eee;
	color          : #333;
	font-size      : 1.25em;
	font-weight    : 600;
	margin         : 0 0 1em 0;
	padding-bottom : 0.5em;
}

.es-setting-item {
	display         : flex;
	gap             : 0.5em;
	justify-content : flex-end;
}

.duplicate-link {
	color           : #4290E7;
	display         : inline-block;
	font-size       : 1em;
	font-weight     : 500;
	margin-bottom   : 1.25em;
	text-decoration : none;
	transition      : color 0.2s ease;
}

.duplicate-link:hover {
	color           : #3240C3;
	text-decoration : underline;
}