.tags-container { width: 100%; padding: .375rem .75rem; background-color: #fff; border: 1px solid #ccc; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); display: inline-block; color: #555; vertical-align: middle; border-radius: 4px; max-width: 100%; line-height: 22px; cursor: text; } .filter .bootstrap-select{ margin-bottom: 10px; } .filter-option-inner-inner{ font-size: 12px; text-transform: uppercase; font-weight: normal; line-height: 25px; } .sorting .bootstrap-select{ margin-bottom: 10px; } .input-tag-name { border: none; box-shadow: none; outline: none; background-color: transparent; padding: 0 6px; margin: 0; width: auto; max-width: inherit; } .tag-info{ font-size: 10px; color: white; padding: 5px 15px; background-color: black; display: none; margin-left: 5px; border-radius: 5px; opacity: 0.8; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } .fa-question-circle{ font-size: 15px; color: #212529; cursor:pointer; } .fa-question-circle:hover .tag-info{ display:inline-block; } .task-row{ position: relative; } .task-row .col:hover{ background-color: #f8f9fa; } .task-row .col > a{ display: block; text-decoration: none; } .task-row .col:hover .remove-task{ visibility: visible; } .remove-task{ visibility: hidden; position: absolute; right: -20px; top: 50%; transform: translate(-50%, -50%); padding: 0 20px; } .remove-task:hover{ background-color: #ebebeb; } .tag { display: inline-block; padding: .2em .6em .3em; background-color: orange; border-radius: .25em; margin-right: 4px; margin-bottom: 4px; font-size: 75%; font-weight: 700; line-height: 1.5; color: #fff; } .tag-name span[data-role="remove"] { margin-left: 8px; cursor: pointer; } .tag-name span[data-role="remove"]:after { content: "x"; padding: 0px 2px; } .tag-name input[type="text"] { background: transparent; border: none; display: inline-flex; font-size: 100%; font-weight: 700; line-height: 1.5; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; outline: none; cursor: default; }