:root{
   --xpx-form-success-color: var(--bs-success);
	--xpx-form-success-border-color: var(--bs-success);
	--xpx-form-success-bg-icon : url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
	--xpx-form-error-color: var(--bs-danger);
	--xpx-form-error-border-color: var(--bs-danger);
	--xpx-form-error-bg-icon : url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
	--xpx-form-warning-color: var(--bs-warning);
	--xpx-form-warning-border-color: var(--bs-warning);
	--xpx-form-warning-bg-icon : url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='12' height='12' fill='none' stroke='%23fd7e14'%3e%3cpath d='M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z'/%3e%3cpath stroke-linejoin='round' d='M7.9 5.6h.7L8.3 9.0z'/%3e%3ccircle cx='8.4' cy='11' r='.8' fill='%23fd7e14' stroke='none'/%3e%3c/svg%3e");
   --xpx-form-info-color: var(--bs-info);
	--xpx-form-info-border-color: var(--bs-info);
	--xpx-form-info-bg-icon : url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='12' height='12' fill='none' stroke='%230dcaf0'%3e%3cpath d='m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z'/%3e%3cpath stroke-linejoin='round' d='M7.9 5.6h.7L8.3 9.0z'/%3e%3ccircle cx='8.4' cy='11' r='.6' fill='%230dcaf0' stroke='none'/%3e%3c/svg%3e");
} 

.cosmo-is-success {
   --xpx-form-border-color: var(--xpx-form-success-border-color);
   --xpx-form-bg-icon: var(--xpx-form-success-bg-icon);
   --xpx-form-color: var(--xpx-form-success-color);
}
.cosmo-is-error {
   --xpx-form-border-color: var(--xpx-form-error-border-color);
   --xpx-form-bg-icon: var(--xpx-form-error-bg-icon);
   --xpx-form-color: var(--xpx-form-error-color);
}
.cosmo-is-warning {
	--xpx-form-border-color: var(--xpx-form-warning-border-color);
	--xpx-form-bg-icon: var(--xpx-form-warning-bg-icon);
	--xpx-form-color: var(--xpx-form-warning-color);
}
.cosmo-is-info {
	--xpx-form-border-color: var(--xpx-form-info-border-color);
	--xpx-form-bg-icon: var(--xpx-form-info-bg-icon);
	--xpx-form-color: var(--xpx-form-info-color);
}
.cosmo-is-success:focus ~ .cosmo-tooltip-success, .cosmo-is-error:focus ~ .cosmo-tooltip-error, .cosmo-is-warning:focus ~ .cosmo-tooltip-warning, .cosmo-is-info:focus ~ .cosmo-tooltip-info{
	display:block;
}

.form-control.cosmo-is-success,
.form-control.cosmo-is-error,
.form-control.cosmo-is-warning,
.form-control.cosmo-is-info {
	border-color: var(--xpx-form-border-color);
	padding-right: calc(1.5em + .75rem);
	background-image: var(--xpx-form-bg-icon);
	background-repeat: no-repeat;
	background-position-x: right calc(0.375em + 0.1875rem);
	background-position-y: center;
	background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
textarea.form-control.cosmo-is-success,
textarea.form-control.cosmo-is-error,
textarea.form-control.cosmo-is-warning,
textarea.form-control.cosmo-is-info {
	padding-right: calc(1.5em + .75rem);
	background-position-x: right calc(.375em + .1875rem);
	background-position-y: top calc(.375em + .1875rem);
}
.form-select.cosmo-is-success:not([multiple]):not([size]), 
.form-select.cosmo-is-success:not([multiple])[size="1"],
.form-select.cosmo-is-error:not([multiple]):not([size]), 
.form-select.cosmo-is-error:not([multiple])[size="1"],
.form-select.cosmo-is-warning:not([multiple]):not([size]), 
.form-select.cosmo-is-warning:not([multiple])[size="1"],
.form-select.cosmo-is-info:not([multiple]):not([size]), 
.form-select.cosmo-is-info:not([multiple])[size="1"] {
    border-color: var(--xpx-form-border-color);
    --bs-form-select-bg-icon: var(--xpx-form-bg-icon);
	padding-right: 4.125rem;
	background-position-x: right 0.75rem, right 2.25rem;
	background-position-y: center, center;
	background-size: 16px 12px, calc(.75em + .375rem) calc(.75em + .375rem);
}
.form-check-input.cosmo-is-success,
.form-check-input.cosmo-is-error,
.form-check-input.cosmo-is-warning,
.form-check-input.cosmo-is-info {
	border-color: var(--xpx-form-border-color);
}
.form-check-input.cosmo-is-success ~ .form-check-label{
    color: var(--xpx-form-success-color);
}
.form-check-input.cosmo-is-error ~ .form-check-label{
    color: var(--xpx-form-error-color);
}
.form-check-input.cosmo-is-warning ~ .form-check-label{
    color: var(--xpx-form-warning-color);
}
.form-check-input.cosmo-is-info ~ .form-check-label {
	color: var(--xpx-form-info-color);
}