/* Application-wide styles */

/* Don't display the last-pass icon */
div[data-lastpass-icon-root] {
    display: none;
}

.scrollable-menu {
    height: auto;
    max-height: 600px;
    overflow-x: hidden;
}

/* Format Pending Task Dialog */
.pending-task-row {
    display: flex;
    padding-bottom: 10px;
}

.pending-task-checkbox-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.pending-task-divider {
    border-bottom: 1px solid !important;
}
.pending-task-row:last-child div.pending-task-divider {
    border-bottom: none !important;
}

.pending-task-field-row {
    margin-bottom: 3px !important;
}

ul.contact-tag-list {
    display: inline;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li.contact-tag {
    display: inline;
    background: #693f57;
    border-radius: 6px;
    padding: 0 8px 2px 8px;
    line-height: 25px;
    color: #FFFFFF;
    white-space: nowrap;
}

/* Global search box */
#ribbon {
    display: flex;
}

#global-search-container {
    flex-grow: 1;
    margin: 0;
    padding: 7px 0px 7px 0 !important;
    vertical-align: top;
    text-align: center;
}

#global-search-icon {
    color: #bbbbbb;
    position: relative;
    top: 0px;
    left: 27px;
    z-index: 999;
}

#global-search-clear {
    display: inline-block;
    visibility: hidden;
    color: #bbbbbb;
    position: relative;
    top: 0px;
    left: -27px;
    z-index: 999;
}

#global-search {
    display: inline-block;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    border: 1px solid #bbbbbb;
    color: #bbbbbb;
    background: #474544;
    width: 350px;
    height: 27px;
    padding: 2px 23px 2px 30px;
}

#global-search:focus {
    background: #eeeeee;
    color: #111111;
}

#global-search::placeholder {
    color: #bbbbbb;
    opacity: 1;
}

/* Global Search Box - Styles for Autocomplete Dropdown and Suggestions */
.global-autocomplete-suggestions {
    text-align: left;
    border: 1px solid #999;
    background: #FFF;
    overflow: auto;
    font-size: 18px;
    line-height: 24px;
}

.global-autocomplete-suggestion {
    padding: 5px 10px;
    white-space: nowrap;
    overflow: hidden;
}

.global-autocomplete-no-suggestion {
    padding: 5px 10px;
    font-size: 12px;
    font-weight: normal;
    color: #9B9B9B;
    line-height: 16px;
}

.global-autocomplete-selected {
    background: #3399FF;
}

.global-autocomplete-suggestions strong {
    font-weight: normal;
    color: #3399FF;
}

.global-autocomplete-group {
    padding: 2px 5px;
}

.global-autocomplete-group strong {
    display: block;
    border-bottom: 1px solid #000;
}

.g-suggestion-contact-name {
    font-size: 15px;
    font-weight: bold;
    color: #333333;
    line-height: 16px;
}

.g-suggestion-user {
    font-size: 12px;
    color: #9B9B9B;
    line-height: 16px;
}

.g-suggestion-email {
    font-size: 12px;
    font-weight: normal;
    color: #9B9B9B;
    line-height: 16px;
}

.g-suggestion-created {
    font-size: 12px;
    color: #9B9B9B;
    line-height: 16px;
}

.g-archived-label {
    font-size: 12px;
    color: orange;
    line-height: 16px;
}

/* Hide the div that displays "Archived" text */
div.g-suggestion-archived + div.g-archived-label {
    display: none;
}

/* Display "Archived" div if g-suggestion-archived is not empty */
div.g-suggestion-archived:not(:empty) + div.g-archived-label {
    display: block;
}

/* Hide g-suggestion-archived div (contains archived_at value) */
div.g-suggestion-archived {
    display: none;
}

div.g-suggestion-action-bar > span {
    margin-right: 10px;
}

div.g-suggestion-action-bar .disabled {
    color: #eeeeee;
}

/* For buttons with an icon only */
.lightly-padded {
    padding-left: 6px !important;
    padding-right: 6px !important;
}

.select2-choices:before {
    color: #000;
    content: url("/img/fa-chevron-down.svg");
    float: right !important;
    margin: 7px 3px 0 0 !important;
    width: 9px !important;
    height: 9px !important;
}

/* Fix Fontawesome Content References for Select2 */
.select2-search-choice-close:before {
    font-family: "Font Awesome 5 Free";
    color: #fff;
    content: "\f057";
}

.select2-no-results:before {
    color: orangered;
    content: url("/img/fa-exclamation-triangle.svg") !important;
    width: 12px;
    height: 12px;
}

.select2-search-choice {
    border: 1px solid #430f2d !important;
    background-color: #693f57 !important;
}

.select2-hidden-accessible {
    display: none;
}

/* Quick Contact modal (#new-quick-contact): tighten the top/bottom internal
   spacing so it matches the ~15px gap used between fields. The Bootstrap
   .modal-body has 20px padding, and the form is wrapped in a redundant
   .row + .form-group whose bottom margins stack on top of the last field row's
   15px margin, leaving too much empty space before the footer's border.
   Scoped to the modal, so it applies identically on every page that opens it. */
#new-quick-contact .modal-body {
    padding-top: 15px;
    padding-bottom: 0;
}
#new-quick-contact .modal-body > .row,
#new-quick-contact .modal-body .form-group {
    margin-bottom: 0;
}

/* The "* Required" hint is the first row inside the fieldset. It only holds a
   right-aligned label, so its 15px .row bottom margin reads as empty dead space
   above the first field. Remove it so the top spacing matches the fields. */
#new-quick-contact .modal-body fieldset > .row:first-child {
    margin-bottom: 0;
}

/* The .red asterisk color is only defined in page-specific stylesheets
   (contacts.css / up_slots.css). Provide it for the Quick Contact modal so the
   required-field asterisks stay red on every page that opens it, including the
   sketcher page, whose stylesheet does not define .red. */
#new-quick-contact .red {
    color: red;
}

/* The SmartAdmin theme styles its .checkbox check glyph with the Font Awesome 4
   family name ("FontAwesome") and weight 400:
     .smart-form .checkbox input+i:after { content:'\f00c'; font:400 16px/19px FontAwesome; }
   The app now loads Font Awesome 6, which registers its solid icons only under
   the family name "Font Awesome 6 Free" at weight 900. With no font named
   "FontAwesome" on the page, checked checkboxes across the app (e.g. the
   secondary locations checkboxes on the user edit form) rendered the '\f00c'
   character in a fallback font as a missing-glyph square. Restate the glyph
   with the FA6 family name and solid weight. The extra `form` element raises
   specificity above the theme rule, which matters because application.css
   loads before smartadmin-production.min.css in the layout. */
form.smart-form .checkbox input+i:after {
    font: 900 16px/19px "Font Awesome 6 Free";
}