/*** Icons ***/

:root {
    --icon-pack-main-fill: #646464;
    --icon-pack-main-background-color: #646464;
    --icon-pack-main-background-color-hover: #646464;
    --icon-pack-second-background-color: black;
    --icon-pack-second-background-color-hover: var(--color-logo-red);
    --icon-pack-attache-background-color: var(--color-logo-red);
}

.dx-button-has-text .dx-icon {
    width: 32px;
    width: auto;
    height: 30px;
    height: 100%;
    font-size: 18px;
    -webkit-margin-end: 9px;
    margin-inline-end: 9px;
    -webkit-margin-start: 0;
    margin-inline-start: 0;
}

.icon-pack { /* not color */
    display: inline-block;
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    fill: var(--icon-pack-main-fill);
}

.icon-pack-color { /* with color */
    display: inline-block;
    width: 18px;
    height: 18px;
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    background-color: var(--icon-pack-main-background-color);
}

.icon-pack-instructions { /* for instruction page. not color */
    display: inline-block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    fill: black;
}

/* for example */
/*.icon-example {
    -webkit-mask-image: url("../icons/svg/auto.svg");
            mask-image: url("../icons/svg/auto.svg");
    background-image: url("../icons/svg/auto.svg");
}*/
.icon-attachment {
    background-image: url("../icons/svg/icon-attachment.svg");
    width: 8px;
    height: 12px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.icon-auto {
    -webkit-mask-image: url("../icons/svg/auto.svg");
            mask-image: url("../icons/svg/auto.svg");
}

.icon-auto-negative {
    -webkit-mask-image: url("../icons/svg/auto_negative.svg");
            mask-image: url("../icons/svg/auto_negative.svg");
}

.icon-avia {
    -webkit-mask-image: url("../icons/svg/avia.svg");
            mask-image: url("../icons/svg/avia.svg");
}

.icon-avia-negative {
    -webkit-mask-image: url("../icons/svg/avia_negative.svg");
        mask-image: url("../icons/svg/avia_negative.svg");
}

.icon-bills {
    -webkit-mask-image: url("../icons/svg/bills.svg");
            mask-image: url("../icons/svg/bills.svg");
}

.icon-cell-empty {
    background-image: url("../icons/svg/cell-empty.svg");
}

.icon-cell-check {
    background-image: url("../icons/svg/cell-check.svg");
}

.icon-cell-point {
    background-image: url("../icons/svg/cell-point.svg");
}

.icon-certa-sign {
    display: inline-block;
    width: 90px;
    height: 90px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("../icons/svg/certa-sign.svg");
}

.icon-change-fontsize {
    background-image: url("../icons/svg/changeFontSize.svg");
}

.icon-change-theme {
    -webkit-mask-image: url("../icons/svg/change-theme.svg");
            mask-image: url("../icons/svg/change-theme.svg");
}

.icon-clients {
    -webkit-mask-image: url("../icons/svg/clients.svg");
            mask-image: url("../icons/svg/clients.svg");
}

.icon-column-chooser {
    -webkit-mask-image: url("../icons/svg/column-chooser.svg");
            mask-image: url("../icons/svg/column-chooser.svg");
}

.icon-containers {
    -webkit-mask-image: url("../icons/svg/containers.svg");
            mask-image: url("../icons/svg/containers.svg");
}

.icon-copy {
    -webkit-mask-image: url("../icons/svg/copy.svg");
            mask-image: url("../icons/svg/copy.svg");
}

.icon-dt {
    -webkit-mask-image: url("../icons/svg/dt.svg");
            mask-image: url("../icons/svg/dt.svg");
}

.icon-email {
    -webkit-mask-image: url("../icons/svg/email.svg");
            mask-image: url("../icons/svg/email.svg");
    background-color: black;
    width: 12px;
    height: 12px;
}

    .icon-email:hover {
        background-color: var(--color-logo-red);
    }

.icon-eye {
    -webkit-mask-image: url("../icons/svg/eye2.svg");
            mask-image: url("../icons/svg/eye2.svg");
    width: 40px;
    height: 40px;
}

.icon-excel {
    -webkit-mask-image: url("../icons/svg/excel.svg");
            mask-image: url("../icons/svg/excel.svg");
}

.icon-experimental {
    -webkit-mask-image: url("../icons/svg/experimental.svg");
            mask-image: url("../icons/svg/experimental.svg");
}

.icon-fa {
    -webkit-mask-image: url("../icons/svg/eye2.svg");
            mask-image: url("../icons/svg/eye2.svg");
    width: 36px;
    height: 36px;
    background-color: #F5F5F5;
    display: flex;
    margin: auto;
}

    .icon-fa.active {
        -webkit-mask-image: url("../icons/svg/eye2.svg");
                mask-image: url("../icons/svg/eye2.svg");
        width: 50px;
        height: 26px;
        background-color: rgba(100, 100, 100, 0.8);
        display: flex;
        margin: auto;
    }

.icon-filter-dropbox {
    -webkit-mask-image: url("../icons/svg/filter-dropbox.svg");
            mask-image: url("../icons/svg/filter-dropbox.svg");
}

.icon-filter-of-cell-value {
    background-image: url("../icons/svg/filterOfCellValue.svg");
}

.icon-gridheader-filter-empty {
    background-image: url("../icons/svg/icon-gridheader-filter-empty.svg");
    width: 10px;
    height: 10px;
}

.icon-gridheader-filter-used {
    background-image: url("../icons/svg/icon-gridheader-filter-used.svg");
    width: 10px;
    height: 10px;
}

.icon-grid-options {
    background-image: url("../icons/svg/gridOptions.svg");
}

.icon-logo {
    width: 30px;
    height: 30px;
    background-image: url("../icons/svg/certa_sign.svg");
    margin-right: 10px;
}

.icon-logo_with_name {
    background-image: url("../icons/svg/logo_with_name.svg");
}

.icon-logs {
    -webkit-mask-image: url("../icons/svg/logs.svg");
            mask-image: url("../icons/svg/logs.svg");
}

.icon-message {
    -webkit-mask-image: url("../icons/svg/message.svg");
            mask-image: url("../icons/svg/message.svg");
}

.icon-money-exchange {
    -webkit-mask-image: url("../icons/svg/money-exchange.svg");
            mask-image: url("../icons/svg/money-exchange.svg");
}

.icon-moveout {
    -webkit-mask-image: url("../icons/svg/moveout.svg");
            mask-image: url("../icons/svg/moveout.svg");
}

.icon-moveout-negative {
    -webkit-mask-image: url("../icons/svg/moveout_negative.svg");
            mask-image: url("../icons/svg/moveout_negative.svg");
}

.icon-notification {
    width: 20px;
    height: 22px;
    -webkit-mask-image: url("../icons/svg/notification.svg");
            mask-image: url("../icons/svg/notification.svg");
    background-color: #646464;
}

.icon-notification-active {
    background-color: var(--color-logo-red);
}

.icon-out {
    -webkit-mask-image: url("../icons/svg/out.svg");
            mask-image: url("../icons/svg/out.svg");
}

.icon-payments {
    -webkit-mask-image: url("../icons/svg/payments.svg");
            mask-image: url("../icons/svg/payments.svg");
}

.icon-phone {
    background-image: url("../icons/svg/phone.svg");
    width: 12px;
    height: 12px;
}

.icon-rail {
    -webkit-mask-image: url("../icons/svg/rail.svg");
            mask-image: url("../icons/svg/rail.svg");
}

.icon-rail-negative {
    -webkit-mask-image: url("../icons/svg/rail_negative.svg");
            mask-image: url("../icons/svg/rail_negative.svg");
}

.icon-rail-int {
    -webkit-mask-image: url("../icons/svg/rail_int.svg");
            mask-image: url("../icons/svg/rail_int.svg");
}

.icon-refresh {
    -webkit-mask-image: url("../icons/svg/refresh.svg");
            mask-image: url("../icons/svg/refresh.svg");
}

.icon-revert {
    -webkit-mask-image: url("../icons/svg/revert.svg");
            mask-image: url("../icons/svg/revert.svg");
}

.icon-save {
    -webkit-mask-image: url("../icons/svg/save.svg");
            mask-image: url("../icons/svg/save.svg");
}

.icon-sea {
    -webkit-mask-image: url("../icons/svg/sea.svg");
            mask-image: url("../icons/svg/sea.svg");
}

.icon-sea-negative {
    -webkit-mask-image: url("../icons/svg/sea_negative.svg");
            mask-image: url("../icons/svg/sea_negative.svg");
}

.icon-search {
    -webkit-mask-image: url("../icons/svg/search.svg");
    mask-image: url("../icons/svg/search.svg");
    width: 12px;
    height: 12px;
    background-color: #FFFFFF;
}

.icon-settings {
    -webkit-mask-image: url("../icons/svg/settings.svg");
            mask-image: url("../icons/svg/settings.svg");
}

.icon-settings-panel {
    background-image: url("../icons/svg/settingsPanel.svg");
}

.icon-skype {
    background-image: url("../icons/svg/icon-skype.svg");
    vertical-align: bottom;
    width: 12px;
    height: 12px;
}

    .icon-skype:hover {
        border: 1px solid var(--color-logo-red);
    }

    .icon-skype.not-hover:hover {
        border: none;
    }

.icon-statistic {
    -webkit-mask-image: url("../icons/svg/statistic.svg");
    mask-image: url("../icons/svg/statistic.svg");
}

.icon-supplies {
    -webkit-mask-image: url("../icons/svg/supplies.svg");
            mask-image: url("../icons/svg/supplies.svg");
}

.icon-telegram {
    background-image: url("../icons/svg/icon-telegram.svg");
    width: 13px;
    height: 13px;
}

    .icon-telegram:hover {
        background-color: var(--color-logo-red);
    }

.icon-transfer {
    -webkit-mask-image: url("../icons/svg/transfer.svg");
            mask-image: url("../icons/svg/transfer.svg");
}

.icon-whatsapp {
    -webkit-mask-image: url("../icons/svg/whatsapp.svg");
            mask-image: url("../icons/svg/whatsapp.svg");
    background-color: #25D366;
    width: 18px;
    height: 18px;
    margin-left: 4px;
}

    .icon-whatsapp:hover {
        background-color: var(--color-logo-red);
    }

/* PAGE : INSTRUCTIONS */

.instructions-icon-column-chooser {
    background-image: url("../icons/svg/instructions-icon-column-chooser.svg");
}

.instructions-icon-excel {
    background-image: url("../icons/svg/instructions-icon-excel.svg");
}

.instructions-icon-filter-1 {
    background-image: url("../icons/svg/instructions-icon-filter-1.svg");
}

.instructions-icon-filter-2 {
    background-image: url("../icons/svg/instructions-icon-filter-2.svg");
}

.instructions-icon-filter-list {
    background-image: url("../icons/svg/instructions-icon-filter-list.svg");
    width: 140px;
    height: 30px;
}

.instructions-icon-mail {
    background-image: url("../icons/svg/instructions-icon-mail.svg");
}

.instructions-icon-password {
    background-image: url("../icons/svg/instructions-icon-password.svg");
}

.instructions-icon-refresh {
    background-image: url("../icons/svg/instructions-icon-refresh.svg");
}

.instructions-icon-revert {
    background-image: url("../icons/svg/instructions-icon-revert.svg");
}

.instructions-icon-save {
    background-image: url("../icons/svg/instructions-icon-save.svg");
}

.instructions-icon-settings {
    background-image: url("../icons/svg/instructions-icon-settings.svg");
}

.instructions-icon-table-view {
    background-image: url("../icons/svg/instructions-icon-table-view.svg");
}

/* Button UI */

.icon-ui {
    -webkit-mask-image: url("../icons/svg/ui.svg");
    mask-image: url("../icons/svg/ui.svg");
    width: 40px;
    height: 40px;
    background-color: var(--color-logo-red);
}

/* Attaches */

.icon-pack-attaches-color { /* with color */
    /*display: inline-block;*/
    /*width: 32px;*/
    /*height: 32px;*/
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    background-color: var(--icon-pack-attache-background-color);
}

.icon-attache-bmp {
    -webkit-mask-image: url("../icons/filepack/bmp.svg");
            mask-image: url("../icons/filepack/bmp.svg");
}
.icon-attache-csv {
    -webkit-mask-image: url("../icons/filepack/csv.svg");
            mask-image: url("../icons/filepack/csv.svg");
}
.icon-attache-doc {
    -webkit-mask-image: url("../icons/filepack/doc.svg");
            mask-image: url("../icons/filepack/doc.svg");
}
.icon-attache-docx {
    -webkit-mask-image: url("../icons/filepack/docx.svg");
            mask-image: url("../icons/filepack/docx.svg");
}
.icon-attache-file {
    -webkit-mask-image: url("../icons/filepack/file.svg");
            mask-image: url("../icons/filepack/file.svg");
}
.icon-attache-gif {
    -webkit-mask-image: url("../icons/filepack/gif.svg");
            mask-image: url("../icons/filepack/gif.svg");
}
.icon-attache-html {
    -webkit-mask-image: url("../icons/filepack/html.svg");
            mask-image: url("../icons/filepack/html.svg");
}
.icon-attache-jpeg {
    -webkit-mask-image: url("../icons/filepack/jpeg.svg");
            mask-image: url("../icons/filepack/jpeg.svg");
}
.icon-attache-jpg {
    -webkit-mask-image: url("../icons/filepack/jpg.svg");
            mask-image: url("../icons/filepack/jpg.svg");
}
.icon-attache-pdf {
    -webkit-mask-image: url("../icons/filepack/pdf.svg");
            mask-image: url("../icons/filepack/pdf.svg");
}
.icon-attache-png {
    -webkit-mask-image: url("../icons/filepack/png.svg");
            mask-image: url("../icons/filepack/png.svg");
}
.icon-attache-rar {
    -webkit-mask-image: url("../icons/filepack/rar.svg");
            mask-image: url("../icons/filepack/rar.svg");
}
.icon-attache-tiff {
    -webkit-mask-image: url("../icons/filepack/tiff.svg");
            mask-image: url("../icons/filepack/tiff.svg");
}
.icon-attache-txt {
    -webkit-mask-image: url("../icons/filepack/txt.svg");
            mask-image: url("../icons/filepack/txt.svg");
}
.icon-attache-xls {
    -webkit-mask-image: url("../icons/filepack/xls.svg");
            mask-image: url("../icons/filepack/xls.svg");
}
.icon-attache-xlsx {
    -webkit-mask-image: url("../icons/filepack/xlsx.svg");
            mask-image: url("../icons/filepack/xlsx.svg");
}
.icon-attache-xml {
    -webkit-mask-image: url("../icons/filepack/xml.svg");
            mask-image: url("../icons/filepack/xml.svg");
}
.icon-attache-zip {
    -webkit-mask-image: url("../icons/filepack/zip.svg");
            mask-image: url("../icons/filepack/zip.svg");
}