.iconpicker .iconpicker-items,.iconpicker .iconpicker-items:after,.iconpicker-popover .popover-footer:after,.iconpicker:after { clear: both } .cherry-ui-iconpicker-group { max-width: 230px; position: relative } .cherry-ui-iconpicker-group .cherry-ui-text { padding-left: 40px } .cherry-ui-iconpicker-group .input-group-addon { position: absolute; width: 32px; height: 32px; left: 1px; top: 1px; background: #e5e5e5; font-size: 16px; line-height: 32px; text-align: center; border-radius: 3px 0 0 3px; border-right: 1px solid #dddcdc } .iconpicker-popover.popover { position: absolute; top: 0; left: 0; display: none; max-width: none; padding: 1px; text-align: left; width: 242px; background: #e5e5e5; z-index: 999 } .iconpicker-popover.popover.top,.iconpicker-popover.popover.topLeft,.iconpicker-popover.popover.topLeftCorner,.iconpicker-popover.popover.topRight,.iconpicker-popover.popover.topRightCorner { margin-top: -10px } .iconpicker-popover.popover.right,.iconpicker-popover.popover.rightBottom,.iconpicker-popover.popover.rightTop { margin-left: 10px } .iconpicker-popover.popover.bottom,.iconpicker-popover.popover.bottomLeft,.iconpicker-popover.popover.bottomLeftCorner,.iconpicker-popover.popover.bottomRight,.iconpicker-popover.popover.bottomRightCorner { margin-top: 10px } .iconpicker-popover.popover.left,.iconpicker-popover.popover.leftBottom,.iconpicker-popover.popover.leftTop { margin-left: -10px } .iconpicker-popover.popover.inline { margin: 0 0 14px; position: relative; display: inline-block; opacity: 1; top: auto; left: auto; bottom: auto; right: auto; max-width: 100%; box-shadow: none; z-index: auto; vertical-align: top } .iconpicker-popover.popover.inline>.arrow { display: none } .dropdown-menu .iconpicker-popover.inline { margin: 0; border: none } .dropdown-menu.iconpicker-container { padding: 0 } .iconpicker-popover.popover .popover-title { padding: 14px; font-size: 14px; line-height: 16px; border-bottom: 1px solid #ebebeb; background-color: #e5e5e5 } .iconpicker-popover.popover .popover-title input[type=search].iconpicker-search { margin: 0 0 2px } .iconpicker-popover.popover .popover-title-text~input[type=search].iconpicker-search { margin-top: 14px } .iconpicker-popover.popover .popover-content { padding: 0; text-align: center } .iconpicker-popover .popover-footer { float: none; clear: both; padding: 14px; text-align: right; margin: 0; border-top: 1px solid #ebebeb; background-color: #e5e5e5 } .iconpicker-popover .popover-footer:after,.iconpicker-popover .popover-footer:before { content: " "; display: table } .iconpicker-popover .popover-footer .iconpicker-btn { margin-left: 10px } .iconpicker-popover .popover-footer input[type=search].iconpicker-search { margin-bottom: 14px } .iconpicker-popover.popover>.arrow,.iconpicker-popover.popover>.arrow:after { position: absolute; display: block; width: 0; height: 0; border-color: transparent; border-style: solid } .iconpicker-popover.popover>.arrow { border-width: 11px } .iconpicker-popover.popover>.arrow:after { border-width: 10px; content: "" } .iconpicker-popover.popover.top>.arrow,.iconpicker-popover.popover.topLeft>.arrow,.iconpicker-popover.popover.topRight>.arrow { left: 50%; margin-left: -11px; border-bottom-width: 0; border-top-color: #e5e5e5; bottom: -11px } .iconpicker-popover.popover.top>.arrow:after,.iconpicker-popover.popover.topLeft>.arrow:after,.iconpicker-popover.popover.topRight>.arrow:after { content: " "; bottom: 1px; margin-left: -10px; border-bottom-width: 0; border-top-color: #fff } .iconpicker-popover.popover.topLeft>.arrow { left: 14px; margin-left: 0 } .iconpicker-popover.popover.topRight>.arrow { left: auto; right: 14px; margin-left: 0 } .iconpicker-popover.popover.right>.arrow,.iconpicker-popover.popover.rightBottom>.arrow,.iconpicker-popover.popover.rightTop>.arrow { top: 50%; left: -11px; margin-top: -11px; border-left-width: 0; border-right-color: #e5e5e5 } .iconpicker-popover.popover.right>.arrow:after,.iconpicker-popover.popover.rightBottom>.arrow:after,.iconpicker-popover.popover.rightTop>.arrow:after { content: " "; left: 1px; bottom: -10px; border-left-width: 0; border-right-color: #fff } .iconpicker-popover.popover.rightTop>.arrow { top: auto; bottom: 14px; margin-top: 0 } .iconpicker-popover.popover.rightBottom>.arrow { top: 14px; margin-top: 0 } .iconpicker-popover.popover.bottom>.arrow,.iconpicker-popover.popover.bottomLeft>.arrow,.iconpicker-popover.popover.bottomRight>.arrow { left: 50%; margin-left: -11px; border-top-width: 0; border-bottom-color: #e5e5e5; top: -11px } .iconpicker-popover.popover.bottom>.arrow:after,.iconpicker-popover.popover.bottomLeft>.arrow:after,.iconpicker-popover.popover.bottomRight>.arrow:after { content: " "; top: 1px; margin-left: -10px; border-top-width: 0; border-bottom-color: #e5e5e5 } .iconpicker-popover.popover.bottomLeft>.arrow { left: 14px; margin-left: 0 } .iconpicker-popover.popover.bottomRight>.arrow { left: auto; right: 14px; margin-left: 0 } .iconpicker-popover.popover.left>.arrow,.iconpicker-popover.popover.leftBottom>.arrow,.iconpicker-popover.popover.leftTop>.arrow { top: 50%; right: -11px; margin-top: -11px; border-right-width: 0; border-left-color: #e5e5e5 } .iconpicker,.iconpicker .iconpicker-items { position: relative; margin: 0; overflow: hidden } .iconpicker-popover.popover.left>.arrow:after,.iconpicker-popover.popover.leftBottom>.arrow:after,.iconpicker-popover.popover.leftTop>.arrow:after { content: " "; right: 1px; border-right-width: 0; border-left-color: #fff; bottom: -10px } .iconpicker-popover.popover.leftBottom>.arrow { top: 14px; margin-top: 0 } .iconpicker-popover.popover.leftTop>.arrow { top: auto; bottom: 14px; margin-top: 0 } .iconpicker { text-align: left; text-shadow: none; line-height: 0; display: block } .iconpicker .iconpicker-items:after,.iconpicker .iconpicker-items:before,.iconpicker:after,.iconpicker:before { content: " "; display: table } .iconpicker * { box-sizing: content-box; position: relative } .iconpicker .iconpicker-items { float: none; padding: 10px 0 0 10px; background: #fff; overflow-y: auto; min-height: 55px; max-height: 275px } .iconpicker .iconpicker-item { float: left; width: 28px; height: 28px; line-height: 28px; margin: 0 7px 7px 0; text-align: center; cursor: pointer; border-radius: 3px; font-size: 18px; color: #444; box-shadow: 0 0 0 1px #ddd } .iconpicker .iconpicker-item:hover:not(.iconpicker-selected) { background-color: #eee } .iconpicker .iconpicker-item.iconpicker-selected { box-shadow: none; background: #ddd } .iconpicker-component { cursor: pointer } .icp-container { position: relative; } .icp { padding-left: 30px; } .icp-container .input-group-addon { position: absolute; top: 1px; left: 1px; padding: 3px; }