/* Heroicons CSS Classes */
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
}

.icon-sm {
    width: 1rem;
    height: 1rem;
}

.icon-md {
    width: 1.5rem;
    height: 1.5rem;
}

.icon-lg {
    width: 2rem;
    height: 2rem;
}

.icon-xl {
    width: 2.5rem;
    height: 2.5rem;
}

/* Server icon */
.icon-server {
    background-image: url('../icons/server.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Cloud icon */
.icon-cloud {
    background-image: url('../icons/cloud.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Code bracket icon */
.icon-code {
    background-image: url('../icons/code-bracket.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Server stack icon */
.icon-server-stack {
    background-image: url('../icons/server-stack.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}