@media (prefers-color-scheme: dark) {

	.color-scheme-auto,
	[data-color-scheme=auto] comment-widget {
		color-scheme: dark;
		--halo-comment-widget-base-color: #ffffff;
		--halo-comment-widget-base-info-color: #64748b;
		--halo-comment-widget-component-form-input-bg-color: #475569;
		--halo-comment-widget-component-form-input-color: #ffffff;
		--halo-comment-widget-component-form-input-border-color: #495056;
		--halo-comment-widget-component-form-input-border-color-focus: #65a3ff;
		--halo-comment-widget-component-form-input-box-shadow-focus: 0 0 0 .15em #1c3966;
		--halo-comment-widget-component-form-button-login-bg-color: #334155;
		--halo-comment-widget-component-form-button-login-bg-color-hover: #475569;
		--halo-comment-widget-component-form-button-login-border-color: #475569;
		--halo-comment-widget-component-form-button-submit-border-color: #475569;
		--halo-comment-widget-component-form-button-submit-border-color-hover: #64748b;
		--halo-comment-widget-component-form-button-emoji-color: #cbd5e1;
		--halo-comment-widget-component-comment-item-action-bg-color-hover: #475569;
		--halo-comment-widget-component-comment-item-action-color-hover: #94a3b8;
		--halo-comment-widget-component-pagination-button-bg-color-hover: #475569;
		--halo-comment-widget-component-pagination-button-bg-color-active: #475569;
		--halo-comment-widget-component-pagination-button-border-color-active: #475569;
		--halo-comment-widget-component-emoji-picker-rgb-color: 222, 222, 221;
		--halo-comment-widget-component-emoji-picker-rgb-accent: 58, 130, 247;
		--halo-comment-widget-component-emoji-picker-rgb-background: 21, 22, 23;
		--halo-comment-widget-component-emoji-picker-rgb-input: 0, 0, 0;
		--halo-comment-widget-component-emoji-picker-color-border: rgba(255, 255, 255, .1);
		--halo-comment-widget-component-emoji-picker-color-border-over: rgba(255, 255, 255, .2)
	}
}

.color-scheme-dark,
.dark,
[data-color-scheme=dark] comment-widget {
	color-scheme: dark;
	--halo-comment-widget-base-color: #ffffff;
	--halo-comment-widget-base-info-color: #64748b;
	--halo-comment-widget-component-form-input-bg-color: #475569;
	--halo-comment-widget-component-form-input-color: #ffffff;
	--halo-comment-widget-component-form-input-border-color: #495056;
	--halo-comment-widget-component-form-input-border-color-focus: #65a3ff;
	--halo-comment-widget-component-form-input-box-shadow-focus: 0 0 0 .15em #1c3966;
	--halo-comment-widget-component-form-button-login-bg-color: #334155;
	--halo-comment-widget-component-form-button-login-bg-color-hover: #475569;
	--halo-comment-widget-component-form-button-login-border-color: #475569;
	--halo-comment-widget-component-form-button-submit-border-color: #475569;
	--halo-comment-widget-component-form-button-submit-border-color-hover: #64748b;
	--halo-comment-widget-component-form-button-emoji-color: #cbd5e1;
	--halo-comment-widget-component-comment-item-action-bg-color-hover: #475569;
	--halo-comment-widget-component-comment-item-action-color-hover: #94a3b8;
	--halo-comment-widget-component-pagination-button-bg-color-hover: #475569;
	--halo-comment-widget-component-pagination-button-bg-color-active: #475569;
	--halo-comment-widget-component-pagination-button-border-color-active: #475569;
	--halo-comment-widget-component-emoji-picker-rgb-color: 222, 222, 221;
	--halo-comment-widget-component-emoji-picker-rgb-accent: 58, 130, 247;
	--halo-comment-widget-component-emoji-picker-rgb-background: 21, 22, 23;
	--halo-comment-widget-component-emoji-picker-rgb-input: 0, 0, 0;
	--halo-comment-widget-component-emoji-picker-color-border: rgba(255, 255, 255, .1);
	--halo-comment-widget-component-emoji-picker-color-border-over: rgba(255, 255, 255, .2)
}

.form-control {
    font-size: 1rem;
    padding: .5rem .875rem;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
    border-color: var(--border-color);
    background-color: #fff;
    color: var(--color-muted);
    border-radius: var(--border-radius-sm);
    transition: all .15s ease-in-out
}

.form-control:focus,.form-control:active {
    color: var(--color-dark);
    border-color: var(--color-primary);
    background-color: #fff;
    box-shadow: none
}

.form-control::-webkit-input-placeholder {
    color: var(--color-muted);
    opacity: 1
}

.form-control::-moz-placeholder {
    color: var(--color-muted);
    opacity: 1
}

.form-control:-ms-input-placeholder {
    color: var(--color-muted);
    opacity: 1
}

.form-control::-ms-input-placeholder {
    color: var(--color-muted);
    opacity: 1
}

.form-control::placeholder {
    color: var(--color-muted);
    opacity: 1
}

.form-control:disabled,.form-control[readonly] {
    color: var(--color-muted);
    background-color: #fff;
    border-color: var(--border-color);
    opacity: 1
}

textarea.form-control {
    text-align: justify;
    height: auto;
    padding: .5rem .875rem
}

.form-control-lg {
    padding: .625rem 1rem;
    font-size: 1.125rem
}

@media (max-width: 767.98px) {
    .form-control {
        font-size:.875rem;
        padding: .5rem .75rem
    }

    .form-control-lg {
        padding: .5rem 1rem;
        font-size: 1rem
    }
}

.btn {
    border-radius: var(--border-radius-sm);
    padding: .5rem 1.625rem;
    white-space: normal;
    transition: all .2s ease-in-out
}
.btn:hover,.btn:focus,.btn:active,.btn.active {
    box-shadow: none !important
}

.btn-block {
    width: 100%;
    display: block;
    padding-left: .5rem;
    padding-right: .5rem
	margin-bottom: .5rem;
	margin-top: .5rem;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-focus-box-shadow: none;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--color-primary);
    --bs-btn-active-border-color: var(--color-primary);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--color-primary);
    --bs-btn-disabled-border-color: var(--color-primary)
}

.btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary.active {
    opacity: .7
}

.btn-primary.disabled,.btn-primary:disabled {
    --bs-btn-disabled-opacity: .6;
    color: #fff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    opacity: var(--bs-btn-disabled-opacity)
}