/*+**************************** ACI Site Icon Styles 

    sample use : ACI orange home icon
    Note: svg adn color are required
    <div class="home-svg  aci-svg-color-sunset"> </div>   
    
    
 *********************************/

.aci-icon-inline {
    float: left;
    margin-right: 0.5em;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-cloud-upload .aci-svg-color-gray700 .aci-icon-inline-right {
    height: 10px;
    -webkit-mask-size: contain;
    mask-size: contain;
}


.aci-icon-inline-right {
    float: right;
    margin-left: 0.5em;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-button {
    border: 0;
    background-color: transparent;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/*+************************ Icons colors **********************************/

.aci-svg-color-light {
    background-color: #FFF;
}

.aci-svg-color-default {
    background-color: #CCCCCC;
}

.aci-svg-color-sunset {
    background-color: #E0582E;
}

.aci-svg-color-wine {
    background-color: #74272B;
}

.aci-svg-color-prussian-blue {
    background-color: #012F47;
}

.aci-svg-color-platinum {
    background-color: #E7E7E7;
}

.aci-svg-color-black {
    background-color: #000000;
}

.aci-svg-color-green {
    background-color: green;
}

.aci-svg-color-gray700 {
    background-color: #616161;
}

.aci-svg-color-gray500 {
    background-color: #9e9e9e;
}

.aci-hover-orange {
}

.aci-hover-orange:hover {
    background-color: #E77A35;
}

.aci-hover-red {
}

.aci-hover-red:hover {
    background-color: #B82B00;
}

.aci-svg-color-white {
    background-color: #FFFFFF;
}

.aci-svg-color-darkred {
    background-color: #6E1A00;
}

.icon-sm {
    height: 16px !important;
    width: 16px !important
}

.icon-md {
    height: 18px !important;
    width: 18px !important
}

.icon-lg {
    height: 24px !important;
    width: 24px !important
}

/*+************************ Icons **********************************/
.aci-icon-home {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/home.svg) no-repeat center;
    mask: url(../icons/common/home.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}


.aci-icon-help_clinic-svg {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/help_clinic.svg) no-repeat center;
    mask: url(../icons/common/help_clinic.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}


.aci-icon-drag-indicator-svg {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/drag_indicator.svg) no-repeat center;
    mask: url(../icons/common/drag_indicator.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-checklist-svg {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/checklist.svg) no-repeat center;
    mask: url(../icons/common/checklist.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-list-view {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/list_view.svg) no-repeat center;
    mask: url(../icons/common/list_view.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-compare-arrows-svg {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/compare_arrows.svg) no-repeat center;
    mask: url(../icons/common/compare_arrows.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-analytics {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/analytics.svg) no-repeat center;
    mask: url(../icons/common/analytics.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-grid-view {
    width: 24px;
    height: 24px;
    -webkit-mask: url(../icons/common/grid_view.svg) no-repeat center;
    mask: url(../icons/common/grid_view.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-stylus-note-svg {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/stylus_note.svg) no-repeat center;
    mask: url(../icons/common/stylus_note.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}


.aci-icon-chevron-right-svg {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/chevron_right.svg) no-repeat center;
    mask: url(../icons/common/chevron_right.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}


.aci-icon-chevron-left-svg {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/chevron_left.svg) no-repeat center;
    mask: url(../icons/common/chevron_left.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-today {
    width: 16px;
    height: 16px;
    -webkit-mask: url(../icons/common/today.svg) no-repeat center;
    mask: url(../icons/common/today.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-assignment {
    width: 16px;
    height: 16px;
    -webkit-mask: url(../icons/common/assignment.svg) no-repeat center;
    mask: url(../icons/common/assignment.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-domain-svg {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/domain.svg) no-repeat center;
    mask: url(../icons/common/domain.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-account-balance {
    width: 16px;
    height: 16px;
    -webkit-mask: url(../icons/common/account_balance.svg) no-repeat center;
    mask: url(../icons/common/account_balance.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-summarize-svg {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/summarize.svg) no-repeat center;
    mask: url(../icons/common/summarize.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}


.aci-icon-book-svg {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/book.svg) no-repeat center;
    mask: url(../icons/common/book.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}


.aci-icon-keyboard-arrow-up-svg {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/keyboard_arrow_up_gray.svg) no-repeat center;
    mask: url(../icons/common/keyboard_arrow_up_gray.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-keyboard-arrow-down-svg {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/keyboard_arrow_down_gray.svg) no-repeat center;
    mask: url(../icons/common/keyboard_arrow_down_gray.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-more-vert-svg {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/more_vert.svg) no-repeat center;
    mask: url(../icons/common/more_vert.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-search-svg {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/search.svg) no-repeat center;
    mask: url(../icons/common/search.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-search-off-svg {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/search_off.svg) no-repeat center;
    mask: url(../icons/common/search_off.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-arrow-forward {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/arrow_forward.svg) no-repeat center;
    mask: url(../icons/common/arrow_forward.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-arrow-back {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/arrow_back.svg) no-repeat center;
    mask: url(../icons/common/arrow_back.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-close {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/close.svg) no-repeat center;
    mask: url(../icons/common/close.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-calculate {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/calculate.svg) no-repeat center;
    mask: url(../icons/common/calculate.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-check-small {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/check_small.svg) no-repeat center;
    mask: url(../icons/common/check_small.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-cloud-upload {
    width: 24px;
    height: 24px;
    /*    -webkit-mask: url(../icons/common/cloud_upload.svg) no-repeat center;
*/ mask: url(../icons/common/cloud_upload.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-description {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/description.svg) no-repeat center;
    mask: url(../icons/common/description.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-done-all {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/done_all.svg) no-repeat center;
    mask: url(../icons/common/done_all.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-edit {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/edit.svg) no-repeat center;
    mask: url(../icons/common/edit.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-fiber-manual-record {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/fiber_manual_record.svg) no-repeat center;
    mask: url(../icons/common/fiber_manual_record.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-folder-open {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/folder_open.svg) no-repeat center;
    mask: url(../icons/common/folder_open.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-login {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/login.svg) no-repeat center;
    mask: url(../icons/common/login.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-login-flip {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/login_flip.svg) no-repeat center;
    mask: url(../icons/common/login_flip.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-mode-comment {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/mode_comment.svg) no-repeat center;
    mask: url(../icons/common/mode_comment.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-open-in-new {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/open_in_new.svg) no-repeat center;
    mask: url(../icons/common/open_in_new.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-download-svg {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/download.svg) no-repeat center;
    mask: url(../icons/common/download.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-play-arrow {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/play_arrow.svg) no-repeat center;
    mask: url(../icons/common/play_arrow.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}


.aci-icon-source-environment {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/source_environment.svg) no-repeat center;
    mask: url(../icons/common/source_environment.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-summarize {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/summarize.svg) no-repeat center;
    mask: url(../icons/common/summarize.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-swap-horiz {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/swap_horiz.svg) no-repeat center;
    mask: url(../icons/common/swap_horiz.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-track-changes {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/track_changes.svg) no-repeat center;
    mask: url(../icons/common/track_changes.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-zoom-out-map {
    width: 24px;
    height: 24px;
    -webkit-mask: url(../icons/common/zoom_out_map.svg) no-repeat center;
    mask: url(../icons/common/zoom_out_map.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}


.aci-icon-more-svg {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/more.svg) no-repeat center;
    mask: url(../icons/common/more.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-trash-svg {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/trash.svg) no-repeat center;
    mask: url(../icons/common/trash.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}


.aci-icon-check-box-outline-blank {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/check_box_outline_blank.svg) no-repeat center;
    mask: url(../icons/common/check_box_outline_blank.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-select-check-box {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/select_check_box.svg) no-repeat center;
    mask: url(../icons/common/select_check_box.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}


.aci-icon-notes {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/notes.svg) no-repeat center;
    mask: url(../icons/common/notes.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-check-circle {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/check_circle.svg) no-repeat center;
    mask: url(../icons/common/check_circle.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-cancel {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/cancel.svg) no-repeat center;
    mask: url(../icons/common/cancel.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-mail {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/mail.svg) no-repeat center;
    mask: url(../icons/common/mail.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}


.aci-icon-flag-circle {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/flag_circle.svg) no-repeat center;
    mask: url(../icons/common/flag_circle.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-send {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/send.svg) no-repeat center;
    mask: url(../icons/common/send.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-zoom-in {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/zoom_in.svg) no-repeat center;
    mask: url(../icons/common/zoom_in.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-zoom-out {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/zoom_out.svg) no-repeat center;
    mask: url(../icons/common/zoom_out.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-filter {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/filter.svg) no-repeat center;
    mask: url(../icons/common/filter.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-add {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/add.svg) no-repeat center;
    mask: url(../icons/common/add.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-save {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/save.svg) no-repeat center;
    mask: url(../icons/common/save.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-thumb_up {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/thumb_up.svg) no-repeat center;
    mask: url(../icons/common/thumb_up.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-thumb_down {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/thumb_down.svg) no-repeat center;
    mask: url(../icons/common/thumb_down.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-bug-report {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/bug_report.svg) no-repeat center;
    mask: url(../icons/common/bug_report.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}


.aci-icon-question-mark {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/Question-mark.svg) no-repeat center;
    mask: url(../icons/common/Question-mark.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-phone {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/phone.svg) no-repeat center;
    mask: url(../icons/common/phone.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-refresh-svg {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/refresh.svg) no-repeat center;
    mask: url(../icons/common/refresh.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-circle_notifications-svg {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/circle_notifications.svg) no-repeat center;
    mask: url(../icons/common/circle_notifications.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-chart-bar-svg {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/bar_chart.svg) no-repeat center;
    mask: url(../icons/common/bar_chart.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-notifications-svg {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/notifications.svg) no-repeat center;
    mask: url(../icons/common/notifications.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-drag-pan {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/drag_pan.svg) no-repeat center;
    mask: url(../icons/common/drag_pan.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-info-svg {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/info.svg) no-repeat center;
    mask: url(../icons/common/info.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-quickfill-svg {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/quickfill.svg) no-repeat center;
    mask: url(../icons/common/quickfill.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}


.aci-icon-splitscreen-svg {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/split_screen.svg) no-repeat center;
    mask: url(../icons/common/split_screen.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-rate-review-svg {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/rate_review.svg) no-repeat center;
    mask: url(../icons/common/rate_review.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.aci-icon-camera-svg {
    width: 20px;
    height: 20px;
    -webkit-mask: url(../icons/common/Camera_Icon.svg) no-repeat center;
    mask: url(../icons/common/Camera_Icon.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}