@import url('../../css/icons.css');
@import url('./wizard-styles-icons.css');
@import url('./wizard-resources-icons.css');

.piw-icon {
    width: 100%;
    background-color: currentColor;
    color: var(--piw-icon-64);
    grid-row: 2;
    grid-column: 2;
    pointer-events: none;
}

.wi-sz-1 {
    width: 40%;
    height: 100%;
}

.wi-sz-2 {
    width: 70%;
    height: 100%;
}

.wi-sz-3 {
    width: 80%;
    height: 100%;
}

.wi-backward {
    mask: url('../svg/backward.svg') no-repeat center;
    -webkit-mask: url('../svg/backward.svg') no-repeat center;
}

.wi-forward {
    mask: url('../svg/forward.svg') no-repeat center;
    -webkit-mask: url('../svg/forward.svg') no-repeat center;
}

.wi-clear {
    mask: url('../svg/clear.svg') no-repeat center;
    -webkit-mask: url('../svg/clear.svg') no-repeat center;
}

.wi-close {
    mask: url('../svg/close.svg') no-repeat center;
    -webkit-mask: url('../svg/close.svg') no-repeat center;
}

.wi-save {
    mask: url('../svg/save.svg') no-repeat center;
    -webkit-mask: url('../svg/save.svg') no-repeat center;
}

.wi-plus {
    mask: url('../svg/plus.svg') no-repeat center;
    -webkit-mask: url('../svg/plus.svg') no-repeat center;
}

.wi-subtraction {
    mask: url('../svg/subtraction.svg') no-repeat center;
    -webkit-mask: url('../svg/subtraction.svg') no-repeat center;
}

.wi-details {
    mask: url('../svg/details.svg') no-repeat center;
    -webkit-mask: url('../svg/details.svg') no-repeat center;
}

.wi-preview {
    mask: url('../svg/preview.svg') no-repeat center;
    -webkit-mask: url('../svg/preview.svg') no-repeat center;
}

.wi-style {
    mask: url('../svg/style.svg') no-repeat center;
    -webkit-mask: url('../svg/style.svg') no-repeat center;
}

.wi-club {
    mask: url('../svg/club.svg') no-repeat center;
    -webkit-mask: url('../svg/club.svg') no-repeat center;
}

.wi-viewer-4-6 {
    mask: url('../svg/wi-viewer-4-6.svg') no-repeat center;
    -webkit-mask: url('../svg/wi-viewer-4-6.svg') no-repeat center;
}

.wi-viewer-6-4 {
    mask: url('../svg/wi-viewer-6-4.svg') no-repeat center;
    -webkit-mask: url('../svg/wi-viewer-6-4.svg') no-repeat center;
}

.wi-viewer-5-5 {
    mask: url('../svg/wi-viewer-5-5.svg') no-repeat center;
    -webkit-mask: url('../svg/wi-viewer-5-5.svg') no-repeat center;
}

.wi-viewer-text {
    mask: url('../svg/wi-viewer-text.svg') no-repeat center;
    -webkit-mask: url('../svg/wi-viewer-text.svg') no-repeat center;
}

.wi-viewer-content {
    mask: url('../svg/wi-vewer-content.svg') no-repeat center;
    -webkit-mask: url('../svg/wi-vewer-content.svg') no-repeat center;
}

.wi-swipper-item {
    mask: url('../svg/wi-swipper-item.svg') no-repeat center;
    -webkit-mask: url('../svg/wi-swipper-item.svg') no-repeat center;
}

.wi-linkedin {
    mask: url('../svg/linkedin.svg') no-repeat center;
    -webkit-mask: url('../svg/linkedin.svg') no-repeat center;
}

.wi-instagram {
    mask: url('../svg/instagram.svg') no-repeat center;
    -webkit-mask: url('../svg/instagram.svg') no-repeat center;
}

.wi-x {
    mask: url('../svg/x.svg') no-repeat center;
    -webkit-mask: url('../svg/x.svg') no-repeat center;
}

.wi-threads {
    mask: url('../svg/threads.svg') no-repeat center;
    -webkit-mask: url('../svg/threads.svg') no-repeat center;
}

.wi-envelope {
    mask: url('../svg/envelope.svg') no-repeat center;
    -webkit-mask: url('../svg/envelope.svg') no-repeat center;
}

.wi-whatsapp {
    mask: url('../svg/whatsapp.svg') no-repeat center;
    -webkit-mask: url('../svg/whatsapp.svg') no-repeat center;
}

.wi-login {
    mask: url('../svg/login.svg') no-repeat center;
    -webkit-mask: url('../svg/login.svg') no-repeat center;
}

.wi-search {
    mask: url('../svg/search.svg') no-repeat center;
    -webkit-mask: url('../svg/search.svg') no-repeat center;
}