+
+.has-feedback.has-clear {
+ position: relative;
+
+ input {
+ padding-right: 1.5rem !important;
+ }
+
+ .form-control-clear {
+ color: rgba(0, 0, 0, 0.4);
+ /*
+ * Enable pointer events as they have been disabled since Bootstrap 3.3
+ * See https://github.com/twbs/bootstrap/pull/14104
+ */
+ pointer-events: all;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: absolute;
+ right: .5rem;
+ height: 95%;
+ font-size: 14px;
+
+ &:hover {
+ color: rgba(0, 0, 0, 0.7);
+ cursor: pointer;
+ }
+ }
+
+ input:placeholder-shown + .form-control-clear {
+ display: none;
+ }
+}
+
+.callout {
+ padding: 1.25rem;
+ border: 1px solid #eee;
+ border-radius: .25rem;
+
+ > label {
+ position: relative;
+ top: -5px;
+ left: -10px;
+ color: #6c757d !important;
+ }
+
+ &:not(.callout-light) {
+ border-left-width: .25rem;
+ }
+
+ &.callout-info {
+ border-color: pvar(--mainColorLightest);
+ border-left-color: pvar(--mainColor);
+ }
+}