.iconSizeExtraSmall {
    height: 16px;
    width: 16px;
}

.iconSizeSmall {
    height: 20px;
    width: 20px;
}

.iconSizeMedium {
    height: 42px;
    width: 42px;
}

.iconSizeBig {
    height: 112px;
    width: 112px;
}

@media (max-width: 1250px) {
    .iconSizeExtraSmall {
        height: 12px;
        width: 12px;
    }
}

@media (max-width: 1450px) {
    .iconSizeMedium {
        width: 22px;
        height: 22px;
    }
}

@media (max-width: 992px) {
    .iconSizeExtraSmall {
        height: 12px;
        width: 12px;
    }

    .iconSizeSmall {
        height: 14px;
        width: 14px;
    }

    .iconSizeMedium {
        height: 18px;
        width: 18px;
    }

    .iconSizeBig {
        height: 56px;
        width: 56px;
    }
}

.iconSizeNav {
    height: 22px;
    width: 22px;
}

.iconDark {
    background-color: black;
}

.iconLight {
    background-color: white;
}

.iconColorNav {
    background-color: white;
}

.ghostIconDark {
    -webkit-mask-image: url(icons/ghost-icon.svg);
    mask-image: url(icons/ghost-icon.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    display: block;
    background-color: black;
}

.ghostIconLight {
    -webkit-mask-image: url(icons/ghost-icon.svg);
    mask-image: url(icons/ghost-icon.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    display: block;
    background-color: white;
}

.ghostIcon {
    -webkit-mask-image: url(icons/ghost-icon.svg);
    mask-image: url(icons/ghost-icon.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    display: block;
}

.bulbIcon {
    -webkit-mask-image: url(icons/bulb-icon.svg);
    mask-image: url(icons/bulb-icon.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    display: block;
}

.alarmIcon {
    -webkit-mask-image: url(icons/alarm-icon.svg);
    mask-image: url(icons/alarm-icon.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    display: block;
}

.arrowRightIcon {
    -webkit-mask-image: url(icons/arrow-right.svg);
    mask-image: url(icons/arrow-right.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    display: block;
}

.auditTrailIcon {
    -webkit-mask-image: url(icons/audit-trail-icon.svg);
    mask-image: url(icons/audit-trail-icon.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    display: block;
}

.cogIcon {
    -webkit-mask-image: url(icons/cog-icon.svg);
    mask-image: url(icons/cog-icon.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    display: block;
}

.dataRecordIcon {
    -webkit-mask-image: url(icons/data-records-icon.svg);
    mask-image: url(icons/data-records-icon.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    display: block;
}

.historyIcon {
    -webkit-mask-image: url(icons/history-icon.svg);
    mask-image: url(icons/history-icon.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    display: block;
}

.homeIcon {
    -webkit-mask-image: url(icons/home-icon.svg);
    mask-image: url(icons/home-icon.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    display: block;
}

.parameterIcon {
    -webkit-mask-image: url(icons/parameter-icon.svg);
    mask-image: url(icons/parameter-icon.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    display: block;
}

.searchIcon {
    -webkit-mask-image: url(icons/search-icon.svg);
    mask-image: url(icons/search-icon.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    display: block;
}

.stepForwardIcon {
    -webkit-mask-image: url(icons/stepforward-icon.svg);
    mask-image: url(icons/stepforward-icon.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    display: block;
}

.testIcon {
    -webkit-mask-image: url(icons/test-icon.svg);
    mask-image: url(icons/test-icon.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    display: block;
}

.usersIcon {
    -webkit-mask-image: url(icons/users-icon.svg);
    mask-image: url(icons/users-icon.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    display: block;
}

.arrowLeftIcon {
    -webkit-mask-image: url(icons/arrow-left-icon.svg);
    mask-image: url(icons/arrow-left-icon.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    display: block;
}

.angleRightIcon {
    -webkit-mask-image: url(icons/angle-right-icon.svg);
    mask-image: url(icons/angle-right-icon.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    display: block;
}

.angleLeftIcon {
    -webkit-mask-image: url(icons/angle-left-icon.svg);
    mask-image: url(icons/angle-left-icon.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    display: block;
}

.backwardIcon {
    -webkit-mask-image: url(icons/backwards-icon.svg);
    mask-image: url(icons/backwards-icon.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    display: block;
}

.playIcon {
    -webkit-mask-image: url(icons/play-icon.svg);
    mask-image: url(icons/play-icon.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    display: block;
}

.forwardIcon {
    -webkit-mask-image: url(icons/forward-icon.svg);
    mask-image: url(icons/forward-icon.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    display: block;
}

.resetIcon {
    -webkit-mask-image: url(icons/reset-icon.svg);
    mask-image: url(icons/reset-icon.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    display: block;
}

.longArrowRightIcon {
    -webkit-mask-image: url(icons/long-arrow-right.svg);
    mask-image: url(icons/long-arrow-right.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    display: block;
}

.logicDiagramIcon {
    -webkit-mask-image: url(icons/logic-diagram-icon.svg);
    mask-image: url(icons/logic-diagram-icon.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    display: block;
}

.manualControlIcon {
    -webkit-mask-image: url(icons/manual-icon.svg);
    mask-image: url(icons/manual-icon.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    display: block;
}

.nextValidIcon {
    -webkit-mask-image: url(icons/next-valid-icon.svg);
    mask-image: url(icons/next-valid-icon.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    display: block;
}

.notAuthorizedIcon {
    -webkit-mask-image: url(icons/not-authorized-icon.svg);
    mask-image: url(icons/not-authorized-icon.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    display: block;
}

.gestureTapIcon {
    -webkit-mask-image: url(icons/gestureTap-icon.svg);
    mask-image: url(icons/gestureTap-icon.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    display: block;
}

.stepOverIcon {
    -webkit-mask-image: url(icons/stepOver-icon.svg);
    mask-image: url(icons/stepOver-icon.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    display: block;
}

.timerOutlineIcon {
    -webkit-mask-image: url(icons/timerOutline-icon.svg);
    mask-image: url(icons/timerOutline-icon.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    display: block;
}

.eocIcon {
    -webkit-mask-image: url(icons/eoc-icon.svg);
    mask-image: url(icons/eoc-icon.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    display: block;
}

.customPageIcon {
    -webkit-mask-image: url(icons/custom-page.svg);
    mask-image: url(icons/custom-page.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    display: block;
}