/*
Icons

<strong>Accessibility note:</strong> icons cannot be read properly by screenreaders. Use the property <code>'aria-hidden=true'</code> on your html elements. If the icon corresponds to an action and isn't decorative, be sure to include text that describes the action (onscreen or off).

For icons that trigger an action, see Icon Button.

The following icons currently available in the pattern library:

svgicon--icons-chevron-down-grey - Settings and Help & Support down arrow
svgicon--icons-chevron-down-green - Hub paging left and right hover state
svgicon--chevron-down-dark-grey - Darker version of the chevron
svgicon--icons-chevron-down-white - Settings and Help & Support down arrow hover state
svgicon--icons-chevron-grid-down-black - Smaller black version of the chevron
svgicon--home-black - Home link for the global navigation
svgicon--home-green - Home link selected state
svgicon--icons-hamburger-grey - Hub paging home icon
svgicon--icons-hamburger-green - Hub paging home icon hover state
svgicon--search-grey - Search icon
svgicon--search-grey-hover - Search icon hover state
svgicon--checkmark-green - Green checkmark used in various places
svgicon--email - Email icon
svgicon--email-hover - Email icon hover
svgicon--pencil - Edit icon
svgicon--add - Add icon
svgicon--add-white - Add task update icon
svgicon--add-green - Add icon hover for buttons
svgicon--add-grey - Add icon static grey
svgicon--subtract - Subtract icon
svgicon--subtract-green - Subtract icon hover for buttons
svgicon--attachment - Attachment icon
svgicon--trash-can - Trash can icon
svgicon--delete - Delete icon
svgicon--calendar - Calendar icon
svgicon--calendar-grey-circle - Calendar icon with a circle
svgicon--download - Download icon
svgicon--document-grey-circle - Document icon within a circle
svgicon--excel - Excel icon
svgicon--excel-grey - Excel icon used on task summary
svgicon--gear - Gear icon
svgicon--html - HTML icon
svgicon--html-grey - HTML icon in grey
svgicon--image - Image icon
svgicon--image-grey - Image icon in grey
svgicon--move-in - Move in icon
svgicon--move-out - Move out icon
svgicon--pdf - PDF icon
svgicon--pdf-grey - PDF icon in grey
svgicon--powerpoint - Powerpoint icon
svgicon--powerpoint-grey - Powerpoint icon in grey
svgicon--print - Print icon
svgicon--text - Text icon
svgicon--text-grey - Text icon in grey
svgicon--undo - Undo icon
svgicon--redo - Redo icon
svgicon--unknown - Unknown icon
svgicon--unknown-grey - Unknown icon in grey
svgicon--upload - Upload icon
svgicon--word - Word icon
svgicon--word-grey - Word icon in grey
svgicon--zip - Zip icon
svgicon--zip-grey - Zip icon in grey
svgicon--collapse - Collapse icon
svgicon--copy - Copy icon
svgicon--ezmail - EZMail icon
svgicon--map - Map icon
svgicon--message - Message icon
svgicon--staff - Staff icon
svgicon--wrench - Wrench icon
svgicon--wrench-grey - Wrench icon (grey)
svgicon--clock - Clock icon
svgicon--clock-orange - Clock icon orange
svgicon--bell - Bell icon
svgicon--blank-profile-photo - Blank profile photo
svgicon--message-bubble - SMS message bubble used in the header
svgicon--info - SMS info icon that triggers slider
svgicon--icons-property-filter - Property filter icon
svgicon--sms-upload-image - Image upload
svgicon--close-gray - Close icon
svgicon--close-gray-hover - Close icon hover
svgicon--close-red - Close icon red
svgicon--elease - Elease addon icon
svgicon--retry - Icon used for failed messages that could be retried
svgicon--question-mark - tool tip icon used on page headers
svgicon--lock - Lock icon
svgicon--lock-green - Green lock icon

Markup:
<span class="svgicon {{modifier_class}}" aria-hidden="true"></span>

Name: icon

Styleguide 1.3
*/

@icon-default-background-position: left center;
@icon-size-small: 14px;
@icon-size-medium: 16px;
@icon-size-large: 18px;

// Helper classes to avoid duplication
.document-icon-helper {
    background-size: @icon-size-small;
}

.action-icon-helper {
    cursor: pointer;
    background-size: @icon-size-small;
}

.chevron-icon-helper {
    display: inline-block;
    height: 12px;
    width: 10px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 0 6px;
    margin-left: 5px;
}

.svgicon {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-size: 100%;
}

.svgicon--40 {
    width: 40px;
    height: 40px;
}

.svgicon--50 {
    width: 50px;
    height: 50px;
}

.svgicon--100 {
    width: 100px;
    height: 100px;
}

.svgicon--default-background-position {
    background-position: @icon-default-background-position !important;
}

.svgicon--icons-chevron-down-grey {
    background-image: url("@{icons}chevron-grey.svg");
    background-repeat: no-repeat;
}

.svgicon--chevron-down-dark-grey {
    background-image: url("@{icons}chevron-dark-grey.svg");
    background-repeat: no-repeat;
}

.svgicon--icons-property-filter {
    background: #FFFFFF url("@{icons}chevron-grey.svg") no-repeat center;
}

.btn .svgicon--icons-chevron-down-white,
.btn:hover .svgicon--icons-chevron-down-white {
    .chevron-icon-helper;
}

.svgicon--icons-chevron-grid-down-black {
    background: url("@{icons}chevron-small-black.svg") no-repeat;
}

.svgicon--icons-chevron-wide-gray {
    background-image: url("@{icons}chevron-grey.svg");
    background-repeat: no-repeat;
}

.svgicon--icons-chevron-wide-green {
    background-image: url("@{icons}chevron-green.svg");
    background-repeat: no-repeat;
}

.svgicon--home-black {
    background: url("@{icons}home-black.svg") no-repeat center;
}

.svgicon--home-green {
    background: url("@{icons}home-green.svg") no-repeat center;
}

.svgicon--home-green-hover {
    background: url("@{icons}home-green-hover.svg") no-repeat center;
}

.svgicon--sms-upload-image,
.svgicon--sms-upload-disabled {
    background-image: url("@{icons}image-grey.svg");
    background-repeat: no-repeat;
}

.svgicon--sms-upload-image {
    &:hover {
        background-image: url("@{icons}image-green.svg");
    }
}

.svgicon--info {
    background-image: url("@{icons}info.svg");
    background-repeat: no-repeat;

    &:hover {
        background-image: url("@{icons}info-hover.svg");
    }
}

.svgicon--icons-chevron-down-white,
.btn .svgicon--icons-chevron-down-white,
.btn:hover .svgicon--icons-chevron-down-white {
    background-image: url("@{icons}chevron-white.svg");
}

.svgicon--icons-chevron-down-green,
.btn:focus .icon-link-menu-pointer,
.btn:active .icon-link-menu-pointer,
.btn:hover .icon-link-menu-pointer,
.btn:active .svgicon--icons-chevron-down-white,
.btn:focus .svgicon--icons-chevron-down-white {
    background-image: url("@{icons}chevron-green.svg");
    background-repeat: no-repeat;
}

.svgicon--icons-hamburger-grey {
    background-image: url("@{icons}hamburger-grey.svg");
    background-repeat: no-repeat;
}

.svgicon--icons-hamburger-green {
    background-image: url("@{icons}hamburger-green.svg");
    background-repeat: no-repeat;
}

.svgicon--search-grey-hover {
    background-image: url("@{icons}search-grey-hover.svg");
    background-repeat: no-repeat;
}

.svgicon--search-grey,
.svgicon--search-new {
    background-image: url("@{icons}search-grey.svg");
    background-repeat: no-repeat;
}

.svgicon--search-new {
    position: absolute;
    margin: 12px 10px;
    z-index: @z-index-search-icon;
}

.svgicon--checkmark-green {
    background-image: url("@{icons}checkmark-green.svg");
    background-repeat: no-repeat;
}

.svgicon--close-gray {
    background: url("@{icons}delete-grey.svg") no-repeat center center / 75%;
}

.svgicon--close-gray-hover {
    background: url("@{icons}delete-grey-hover.svg") no-repeat center center / 75%;
}

.svgicon--close-red {
    background: url("@{icons}delete-red.svg") no-repeat center center / 75%;
}

.svgicon--checkmark-white {
    background-image: url("@{icons}checkmark-white.svg");
    background-repeat: no-repeat;
}

.svgicon--bell {
    background-image: url("@{icons}bell-grey.svg");
    background-repeat: no-repeat;
    background-position: top center;

    &:hover {
        background-image: url("@{icons}bell-white.svg");
    }
}

.svgicon--message-bubble,
.svgicon--message-bubble-static {
    width: 22px;
    height: 20px;
    background-size: 22px;
    background-image: url("@{icons}message-bubble-grey.svg");
    background-repeat: no-repeat;
    background-position: top center;
}

.svgicon--message-bubble {
    &:hover {
        background-image: url("@{icons}message-bubble-white.svg");
    }
}

.svgicon--blank-profile-photo {
    background-image: url("@{icons}empty-avatar.svg");
    background-repeat: no-repeat;
}

.svgicon--pencil,
.icon-pencil,
.icon.edit {
    height: 20px;
    .action-icon-helper;
    background-image: url("@{icons}pencil-grey.svg");
    background-repeat: no-repeat;

    &:hover {
        background-image: url("@{icons}pencil-blue.svg");
    }
}

.svgicon--add,
.icon-add,
.icon.expand,
.grid .expand,
.less .add-row,
.less .add-field,
.less a.icon.add,
.reorder-items-add-row,
.add-transaction,
#pageAccountingBankfeedmatching .adm-transaction-wrapper.addnew .expand,
#pageAccountingBankfeedcleared .adm-transaction-wrapper.addnew .expand {
    display: inline-block;
    cursor: pointer;
    background-image: url("@{icons}theme-add@3x.png");
    background-repeat: no-repeat;
    background-position: @icon-default-background-position;
    background-size: @icon-size-small;

    &:hover {
        background-image: url("@{icons}theme-add-hover.png");
    }
}

.svgicon--add-white {
    cursor: pointer;
    background-image: url("@{icons}task-update-add.svg");
    background-repeat: no-repeat;
    background-position: @icon-default-background-position;
    background-size: @icon-size-small;
}

.svgicon--add-green {
    cursor: pointer;
    background-image: url("@{icons}add-green.svg");
    background-repeat: no-repeat;
    background-position: @icon-default-background-position;
    background-size: @icon-size-small;
}

.svgicon--add-grey {
    cursor: pointer;
    background-image: url("@{icons}add-grey.svg");
    background-repeat: no-repeat;
    background-position: @icon-default-background-position;
    background-size: @icon-size-small;
}

.svgicon--subtract {
    cursor: pointer;
    background-image: url("@{icons}subtract.svg");
    background-repeat: no-repeat;
    background-position: @icon-default-background-position;
    background-size: @icon-size-small;
}

.svgicon--subtract-green {
    cursor: pointer;
    background-image: url("@{icons}subtract-green.svg");
    background-repeat: no-repeat;
    background-position: @icon-default-background-position;
    background-size: @icon-size-small;
}

.svgicon--subtract-white {
    cursor: pointer;
    background-image: url("@{icons}subtract-white.svg");
    background-repeat: no-repeat;
    background-position: @icon-default-background-position;
    background-size: @icon-size-small;
}

.svgicon--lock {
    background-image: url("@{icons}lock-grey.svg");
    background-repeat: no-repeat;
    background-position: @icon-default-background-position;
    background-size: @icon-size-small;
}

.svgicon--lock-green {
    background-image: url("@{icons}lock-green.svg");
    background-repeat: no-repeat;
    background-position: @icon-default-background-position;
    background-size: @icon-size-small;
}

.svgicon--general-inquiries {
    background-image: url("@{icons}general-inquiries.svg");
    background-repeat: no-repeat;
    background-position: @icon-default-background-position;
}

.svgicon--maintenance {
    background-image: url("@{icons}maintenance.svg");
    background-repeat: no-repeat;
    background-position: @icon-default-background-position;
}

.svgicon--trash-can,
.icon-trash-can,
.icon.delete {
    .action-icon-helper;
    background-image: url("@{icons}trash-can-grey.svg");
    background-repeat: no-repeat;

    &:hover {
        background-image: url("@{icons}trash-can-red.svg");
    }
}

.svgicon--exclamation-grey {
    background-image: url("@{icons}exclaimation-point-grey.svg");
    background-repeat: no-repeat;
}

.icon.delete.delete--less-padding {
    padding-left: 15px;
}

.svgicon--delete,
.email-search__remove-button,
.icon-delete,
.icon-deactivate,
.icon-inactivate,
.icon-deactivate-disabled,
.cancel-inline,
.icon-filter-close,
.icon.deactivate,
.icon.cancel,
.icon.void,
.icon.deleterow,
.symbol.delist,
.field-row .delete,
.less .delete-field,
.less .delete-row,
.less .inline-field .form-actions .cancel,
#manageGroupModalContent .editPanel .remove,
#pageSettingsSettingsrentalapplications2  a.reorder-items-remove-item,
#pagePropertiesApplicantsummary a.reorder-items-remove-item {
    cursor: pointer;
    background-image: url("@{icons}delete-grey.svg");
    background-repeat: no-repeat;
    background-position: @icon-default-background-position;
    background-size: @icon-size-small;

    &:hover {
        background-image: url("@{icons}delete-grey-hover.svg");
    }
}

.icon-filter-close {
    background-size: 10px;

    &:hover {
        background-image: url("@{icons}delete-red.svg");
    }
}

.svgicon--calendar-plain,
.svgicon--calendar,
.icon-end-lease,
.icon.endLease {
    background-image: url("@{icons}calender-grey.svg");
    background-repeat: no-repeat;
    background-position: @icon-default-background-position;

}

.svgicon--calendar-grey-circle {
    background-image: url("@{icons}calendar-circle.svg");
    background-repeat: no-repeat;
    background-position: @icon-default-background-position;
}

.svgicon--document-grey-circle {
	background-image: url("@{icons}document-circle.svg");
    background-repeat: no-repeat;
    background-position: @icon-default-background-position;
}

.svgicon--calendar,
.icon-end-lease,
.icon.endLease {
    .action-icon-helper;

    &:hover {
        background-image: url("@{icons}calendar-blue.svg");
    }
}

.svgicon--download,
.icon-download,
.icon.download,
.icon.export {
    .action-icon-helper;
    background-image: url("@{icons}download-grey.svg");
    background-repeat: no-repeat;
    background-position: @icon-default-background-position;

    &:hover {
        background-image: url("@{icons}download-green.svg");
    }
}

.svgicon--email,
.icon-email,
.icon-fancy-email,
.icon.email,
.icon-email-popover,
.less input.icon.email {
    background-image: url("@{icons}email-grey.svg");
    background-repeat: no-repeat;
    background-size: @icon-size-small;
}

.svgicon--email-hover,
.icon-fancy-email,
.icon-email-popover {
    background-position: @icon-default-background-position;
    &:hover {
        background-image: url("@{icons}email-blue.svg");
    }
}

.svgicon--excel-grey,
.large-file-icon--excel {
    background-image: url("@{icons}excel-grey.svg");
    background-repeat: no-repeat;
}
.svgicon--excel,
.icon-excel,
.icon.fileExcel,
.icon-excel-popover {
    .document-icon-helper;
    background-image: url("@{icons}excel-orange.svg");
    background-repeat: no-repeat;
}

.svgicon--html-grey,
.large-file-icon--html {
    background-image: url("@{icons}html-grey.svg");
    background-repeat: no-repeat;
}

.svgicon--html,
.icon-html,
.icon.fileHtml,
.icon.fileHTML {
    .document-icon-helper;
    background-image: url("@{icons}html-orange.svg");
    background-repeat: no-repeat;
}

.svgicon--image,
.icon-image,
.icon.fileImage{
    .document-icon-helper;
    background-image: url("@{icons}image-orange.svg");
    background-repeat: no-repeat;
}

.svgicon--image-grey {
    background-image: url("@{icons}image-grey.svg");
    background-repeat: no-repeat;
}

.svgicon--move-in,
.symbol.moveIn {
    .action-icon-helper;
    background-image: url("@{icons}move-in-grey.svg");
    background-repeat: no-repeat;
    background-position: @icon-default-background-position;

    &:hover {
        background-image: url("@{icons}move-in-blue.svg");
    }
}

.svgicon--move-out,
.icon-move-out,
.symbol.moveOut {
    .action-icon-helper;
    background-image: url("@{icons}move-out-grey.svg");
    background-repeat: no-repeat;
    background-position: @icon-default-background-position;

    &:hover {
        background-image: url("@{icons}move-out-blue.svg");
    }
}

.svgicon--pdf-grey,
.large-file-icon--pdf {
    background-image: url("@{icons}pdf-grey.svg");
    background-repeat: no-repeat;
}

.svgicon--pdf,
.icon-pdf,
.icon.filePDF,
.icon-pdf-popover {
    .document-icon-helper;
    background-image: url("@{icons}pdf-orange.svg");
    background-repeat: no-repeat;
}

.svgicon--powerpoint-grey,
.large-file-icon--powerpoint {
    background-image: url("@{icons}ppt-grey.svg");
    background-repeat: no-repeat;
}


.svgicon--powerpoint,
.icon-powerpoint,
.icon.filePowerPoint {
    .document-icon-helper;
    background-image: url("@{icons}ppt-orange.svg");
    background-repeat: no-repeat;
}
.svgicon--print,
.icon-print,
.icon.print {
    .action-icon-helper;
    background-image: url("@{icons}print-grey.svg");
    background-repeat: no-repeat;
    background-position: @icon-default-background-position;

    &:hover {
        background-image: url("@{icons}print-blue.svg");
    }
}

.svgicon--text-grey,
.large-file-icon--text {
    background-image: url("@{icons}text-grey.svg");
    background-repeat: no-repeat;
}

.svgicon--text,
.icon-text,
.icon.view,
.icon.fileText,
.icon.bill,
.icon-csv-popover,
.symbol.bill,
.symbol.note,
.icon-caption-overlay:after {
    .document-icon-helper;
    background-image: url("@{icons}text-orange.svg");
    background-repeat: no-repeat;
}

.svgicon--undo,
.svgicon--redo,
.icon-undo,
.icon.undo,
.flag.transaction.reversed,
#pagePropertiesApplicantsummary .completed a.reorder-items-remove-item {
    .action-icon-helper;
    background-image: url("@{icons}undo-grey.svg");
    background-repeat: no-repeat;
    background-position: @icon-default-background-position;

    &:hover {
        background-image: url("@{icons}undo-blue.svg");
    }
}

.svgicon--redo {
    transform: scaleX(-1);
}

.svgicon--undo-white,
.icon.undo.svgicon--undo-white {
    background-image: url("@{icons}undo-white.svg");
}

.svgicon--unknown-grey,
.large-file-icon--unknown {
    background-image: url("@{icons}unknown-file-grey.svg");
    background-repeat: no-repeat;
}

.svgicon--unknown,
.icon-audio,
.icon-video,
.icon-unknown,
.icon.fileAudio,
.icon.fileVideo,
.icon.fileUnknown {
    .document-icon-helper;
    background-image: url("@{icons}unknown-file-orange.svg");
    background-repeat: no-repeat;
}

.svgicon--upload,
.icon-upload,
.icon.upload {
    .action-icon-helper;
    background-image: url("@{icons}upload-grey.svg");
    background-repeat: no-repeat;
    background-position: @icon-default-background-position;

    &:hover {
        background-image: url("@{icons}upload-green.svg");
    }
}

.svgicon--word-grey,
.large-file-icon--word {
    background-image: url("@{icons}word-grey.svg");
    background-repeat: no-repeat;
}

.svgicon--word,
.icon-word,
.icon.fileWord {
    .document-icon-helper;
    background-image: url("@{icons}word-orange.svg");
    background-repeat: no-repeat;
}

.svgicon--zip-grey,
.large-file-icon--zip {
    background-image: url("@{icons}zip-grey.svg");
    background-repeat: no-repeat;
}

.svgicon--zip,
.icon-zip,
.icon.fileZip {
    .document-icon-helper;
    background-image: url("@{icons}zip-orange.svg");
    background-repeat: no-repeat;
}

.svgicon--collapse,
.icon-collapse,
.icon.collapse,
.grid .collapse {
    .action-icon-helper;
    background-image: url("@{icons}collapse-grey.svg");
    background-repeat: no-repeat;
    background-position: @icon-default-background-position;

    &:hover {
        background-image: url("@{icons}collapse-grey-hover.svg");
    }
}

.svgicon--copy,
.icon-copy,
.icon.copy {
    .action-icon-helper;
    background-image: url("@{icons}copy-grey.svg");
    background-repeat: no-repeat;
    background-position: @icon-default-background-position;

    &:hover {
        background-image: url("@{icons}copy-blue.svg");
    }
}

.svgicon--ezmail,
.icon-ezmail-popover,
.symbol.ezMail {
    .document-icon-helper;
    background-image: url("@{icons}mailbox-grey.svg");
    background-repeat: no-repeat;

    &:hover {
        background-image: url("@{icons}mailbox-grey-hover.svg");
    }
}

.svgicon--gear,
.icon-gear,
.icon-settings,
.symbol.settings {
    .action-icon-helper;
    background-image: url("@{icons}gear-grey.svg");
    background-repeat: no-repeat;
    background-position: @icon-default-background-position;

    &:hover {
        background-image: url("@{icons}gear-blue.svg");
    }
}

.svgicon--map,
.icon-map,
.symbol.map {
    .action-icon-helper;
    background-image: url("@{icons}map-grey.svg");
    background-repeat: no-repeat;
    background-position: @icon-default-background-position;

    &:hover {
        background-image: url("@{icons}map-blue.svg");
    }
}

.svgicon--message,
.icon-sms,
.icon-sms--inactive,
.symbol.sms {
    .action-icon-helper;
    background-image: url("@{icons}message-grey.svg");
    background-repeat: no-repeat;
    background-position: @icon-default-background-position;

    &:hover {
        background-image: url("@{icons}message-blue.svg");
    }
}

.svgicon--staff,
.icon-staff,
.symbol.prospect,
.symbol.staff,
.symbol.userAccount {
    .action-icon-helper;
    background-image: url("@{icons}staff-grey.svg");
    background-repeat: no-repeat;
    background-position: @icon-default-background-position;

    &:hover {
        background-image: url("@{icons}staff-blue.svg");
    }
}

.svgicon--bill-stack {
    width: 287px;
    height: 232px;
    background-image: url("@{icons}illustration-bill-stack.svg");
    background-repeat: no-repeat;
}

.svgicon--wrench,
.symbol.workOrder {
    .action-icon-helper;
    background-image: url("@{icons}wrench-orange.svg");
    background-repeat: no-repeat;
}

.svgicon--wrench-grey {
    background-image: url("@{icons}wrench-grey.svg");
    background-repeat: no-repeat;
}

.symbol.workOrder.workOrder--adjusted {
    background-position: left 13px;
}

.svgicon--attachment,
.icon-attachment,
.icon.attachment {
    cursor: pointer;
    background-image: url("@{icons}attachment-grey.svg");
    background-repeat: no-repeat;
    background-position: @icon-default-background-position;
    background-size: @icon-size-large;
}

.svgicon--clock,
.flag.transaction.pending {
    background-image: url("@{icons}clock-grey.svg");
    background-repeat: no-repeat;
    background-size: @icon-size-medium;
    background-position: @icon-default-background-position;
}

.svgicon--arrow-right {
    background-image: url("@{icons}arrow-right.svg");
    background-repeat: no-repeat;
    background-size: @icon-size-medium;
    background-position: @icon-default-background-position;
}

.svgicon--warning {
    background-image: url("@{icons}warning.svg");
    background-repeat: no-repeat;
    background-size: @icon-size-medium;
    background-position: @icon-default-background-position;
}

.svgicon--clock-orange {
    background-image: url("@{icons}clock-orange.svg");
    background-repeat: no-repeat;
    background-size: @icon-size-medium;
    background-position: @icon-default-background-position;
}

.svgicon--clipboard {
    background-image: url('@{icons}clipboard.png');
    background-repeat: no-repeat;
}

.svgicon--comment {
    background-image: url('@{icons}comment.png');
    background-repeat: no-repeat;
}

.svgicon--person {
    background-image: url('@{icons}person.svg');
    background-repeat: no-repeat;
}

.svgicon--task-file-upload {
    background-image: url('@{icons}file-upload.svg');
    background-repeat: no-repeat;
}

.svgicon--question-mark {
    display: inline-block;
    height: 15px;
    width: 15px;
    background-image: url('@{icons}question-mark.svg');
    background-repeat: no-repeat;
}

.svgicon--grid-view {
    background-image: url("@{icons}/icon_grid-view.svg");
    background-repeat: no-repeat;
}

.svgicon--list-view {
    background-image: url("@{icons}/icon_list-view.svg");
    background-repeat: no-repeat;
}

.svgicon--elease {
    background-image: url('@{icons}elease.svg');
    background-repeat: no-repeat;
}

.svgicon--survey-white{
    background-image: url('@{icons}survey-white.svg');
    background-repeat: no-repeat;
}

.svgicon--survey-blue{
    background-image: url('@{icons}survey-blue.svg');
    background-repeat: no-repeat;
}

.svgicon--retry {
    background-image: url('@{icons}retry.svg');
    background-repeat: no-repeat;
}

.svgicon--urgent-grey{
    background-image: url("@{icons}/urgent-grey.svg");
    background-repeat: no-repeat;
}

.icon-checkmark,
.icon-deactivated-checkmark,
.icon-check,
.flag.workorder.billed {
    .svgicon--checkmark-green;
    background-position: 5px center;
    background-size: @icon-size-small;
}

.icon-deactivated-checkmark {
    background-position: @icon-default-background-position;
    background-size: @icon-size-large;
    opacity: @opacity-disabled;
}

.icon-check {
    background-position: @icon-default-background-position;
}

.flag.workorder.billed {
    display: block;
    width: 20px;
    height: 20px;
}

.icon-link-menu-pointer {
    .svgicon--icons-chevron-down-grey;
    background-repeat: no-repeat;
    background-position: 0px 6px;
    margin-left: 5px;
    height: 12px;
    width: 10px;
    background-size: 100%;
    display: inline-block;
}

.icon-modal-close {
    display: block;
    height: 50px;
    background: url("@{icons}delete-grey.svg") no-repeat center center / 40%;
}

.icon-modal-close:hover,
.icon-modal-close:focus {
    background: url("@{icons}delete-grey-hover.svg") no-repeat center center / 40%;
}

.icon-notification-message {
    z-index: @z-index-notification-message-icon;
    background-image: url("@{icons}checkmark-white.svg");
    background-repeat: no-repeat;
    background-position: 1px 8px;
}

.icon-notification-message--exception {
    z-index: @z-index-notification-message-icon;
    background-image: url("@{icons}exclamation-point-white.svg");
    background-repeat: no-repeat;
    background-position: 5px 5px;
}

/*
Property filter icons

These are the icons currently used for the property filter.

icon-property--Association - Associations
icon-property--Rental - Rental properties
icon-property--Owner - Rental owners
icon-property--Groups - Groups
icon-property--Company - Company
icon-property--Default - Default

Markup:
<span style="display: block; width: 70px; height: 25px;" class="icon-property {{modifier_class}}" aria-hidden="true"></span>

Name: iconPropertyFilter

Styleguide 1.3.1
*/

// Property filter icons
.icon-property {
    background-size: 18px;
    background-position: 20px center;
    background-repeat: no-repeat;
}

.icon-property--All {
    background-image: none;
}

.icon-property--Association {
    background-image: url("@{icons}filter-association.svg");
}

.icon-property--Rental {
    background-image: url("@{icons}filter-rental.svg");
}

.icon-property--Owner {
    background-image: url("@{icons}filter-owner.svg");
}

.icon-property--Groups {
    background-image: url("@{icons}filter-groups.svg");
}

.icon-property--Company {
    background-image: url("@{icons}filter-company.svg");
}

.icon-property--Default {
    background-image: url("@{icons}filter-default.svg");
}

// Common icons used everywhere

.icon-deactivate-disabled:hover {
    cursor: not-allowed;
}

.icon-email,
.less input.icon.email {
    background-position: 10px 13px;
}

.icon-check-link,
.save-inline,
.icon.submit,
.icon.enable,
.icon.check,
.symbol.list,
.screening-enabled-icon,
.field-row .save,
.less .inline-field .form-actions .save {
    .action-icon-helper;
    .svgicon--checkmark-green;
    background-position: @icon-default-background-position;

    &:hover {
        background-image: url("@{icons}checkmark-green.svg");
    }
}

.icon-check-link,
.field-row .save,
.icon.enable {
    background-size: @icon-size-large;
}

.icon--circle-container {
    height: 40px;
    width: 40px;
    min-width: 40px;
    border-radius: 100%;
    border: 1px solid @theme-grey5;
    background: #FFFFFF no-repeat 12px center;
}

/*
Large file icons

These are the icons currently used for the task summary attachments

large-file-icon--excel - Excel
large-file-icon--html - HTML
large-file-icon--pdf - PDF
large-file-icon--powerpoint - Powerpoint
large-file-icon--text - Text
large-file-icon--unknown - Unknown
large-file-icon--word - Word
large-file-icon--zip - Zip

Markup:
<div class="large-file-icon {{modifier_class}}" aria-hidden="true"></div>

Name: iconLargeFile

Styleguide 1.3.3
*/

.large-file-icon {
    height: 50px;
    width: 50px;
    min-width: 50px;
    border-radius: @border-radius-default;
    border: 1px solid @theme-grey5;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
}

// Legacy version
.icon,
.symbol {
    line-height: 20px;
    padding-bottom: 2px;
    padding-left: 22px;
    background-position: @icon-default-background-position;
    background-repeat: no-repeat;
    word-wrap: break-word;
}

@media all and (-ms-high-contrast:none) {
    .icon--ie11-fix {
        background-position-y: top; //On weird case where icon is misaligned on IE only
    }
}

.symbol {
    height: 20px;
}

.flag.transaction {
    display: block;
    float: left;
    height: 14px;
    width: auto;
    padding: 0 0 0 20px;
}

.flag.transaction.pending {
    height: @icon-size-medium;
}

.icon-text--increased-space,
.icon-pdf--increased-space,
.icon-excel--increased-space,
.icon-pdf-popover,
.icon-email-popover,
.icon-excel-popover,
.icon-csv-popover,
.icon-ezmail-popover {
    background-position: 7px center;
}

// Legacy icons - don't reuse
.grid .expand,
.grid .collapse {
    background-position: 8px center;
}

.less {

    input.icon.email {
        padding-left: 35px;
    }

    .add-field,
    .add-row {
        padding: 2px 5px 2px 22px;
        background-position: @icon-default-background-position;
    }

    .delete-field,
    .delete-row {
        padding: 0 5px 0 22px;
    }

    a.icon.add {
        cursor: pointer;
        background-position: @icon-default-background-position;
    }
}

.reorder-items-add-row {
    background-position: @icon-default-background-position;
}

// Only used on reconciliations
.add-transaction {
    background-position: 0 8px;
    background-size: 9px;
    padding: 6px 5px 0 14px;
    float: right;
}

.icon.collapse,
#pageAccountingBankfeedmatching .adm-transaction-wrapper.addnew .expand,
#pageAccountingBankfeedcleared .adm-transaction-wrapper.addnew .expand {
    padding: 7px 7px 7px 22px;
}

#pageSettingsSettingsrentalapplications2  a.reorder-items-remove-item,
#pagePropertiesApplicantsummary a.reorder-items-remove-item {
    top: 25%;
}

/*
Search icons

Search icons for keyboard navigation

svgicon--search-up - Up
svgicon--search-down - Down
svgicon--search-enter - Enter/Return
svgicon--search-esc - Esc

Markup:
<div class="svgicon {{modifier_class}}" aria-hidden="true"></div>

Name: iconSearch

Styleguide 1.3.4
*/

@search-keyboard-icon-size: 25px;
@search-keyboard-icon-esc-width: 35px;

.svgicon--search-up {
    width: @search-keyboard-icon-size;
    height: @search-keyboard-icon-size;
    background-image: url("@{icons}search-up.svg");
    background-repeat: no-repeat;
    background-size: @search-keyboard-icon-size;
}

.svgicon--search-down {
    width: @search-keyboard-icon-size;
    height: @search-keyboard-icon-size;
    background-image: url("@{icons}search-down.svg");
    background-repeat: no-repeat;
    background-size: @search-keyboard-icon-size;
}

.svgicon--search-enter {
    width: @search-keyboard-icon-size;
    height: @search-keyboard-icon-size;
    background-image: url("@{icons}search-enter.svg");
    background-repeat: no-repeat;
    background-size: @search-keyboard-icon-size;
}

.svgicon--search-esc {
    width: @search-keyboard-icon-esc-width;
    height: @search-keyboard-icon-size;
    background-image: url("@{icons}search-esc.svg");
    background-repeat: no-repeat;
    background-size: @search-keyboard-icon-esc-width @search-keyboard-icon-size;
}