/* Custom Colors */
.has-fill-tea-rose {
    color: #d6bbc0 !important;
    stroke: #d6bbc0 !important;
    fill: #d6bbc0 !important;
}

.has-fill-paynes-grey {
    color: #666a86 !important;
    stroke: #666a86 !important;
    fill: #666a86 !important;
}

.has-fill-auburn {
    color: #a52a2a !important;
    stroke: #ac3931 !important;
    fill: #ac3931 !important;
}

.has-fill-flax {
    color: #e8db7d !important;
    stroke: #e8db7d !important;
    fill: #e8db7d !important;
}

.has-fill-cream {
    color: #f1ffc4 !important;
    stroke: #f1ffc4 !important;
    fill: #f1ffc4 !important;
}
.has-fill-primary {
    color: var(--bulma-primary);
    stroke: var(--bulma-primary);
    fill: var(--bulma-primary);
}

.has-fill-info {
    color: var(--bulma-info);
    stroke: var(--bulma-info);
    fill: var(--bulma-info);
}

.has-fill-success {
    color: var(--bulma-success);
    stroke: var(--bulma-success);
    fill: var(--bulma-success);
}

.has-fill-warning {
    color: var(--bulma-warning);
    stroke: var(--bulma-warning);
    fill: var(--bulma-warning);
}

.has-fill-danger {
    color: var(--bulma-danger);
    stroke: var(--bulma-danger);
    fill: var(--bulma-danger);
}

.has-fill-dark {
    color: var(--bulma-dark);
    stroke: var(--bulma-dark);
    fill: var(--bulma-dark);
}

.has-fill-light {
    color: var(--bulma-light);
    stroke: var(--bulma-light);
    fill: var(--bulma-light);
}


/* SVG Icon from sprite.svg */
.svg-icon {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 2;
    stroke-opacity: 1;
    fill: currentColor;
}

/* SVG Background Icons */
/* These classes are meant to be used inside Bulma's icon class */
/* Abstract icons */
.icon-abstract-3d-triangle {
    background-image: url('../icons/abstract-3d-triangle.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-abstract-circle-and-triangle {
    background-image: url('../icons/abstract-circle-and-triangle.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-abstract-circle-inside-square {
    background-image: url('../icons/abstract-circle-inside-square.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-abstract-circles {
    background-image: url('../icons/abstract-circles.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-abstract-circlular {
    background-image: url('../icons/abstract-circlular.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-abstract-cloud {
    background-image: url('../icons/abstract_cloud.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-abstract-diamond-jewelry {
    background-image: url('../icons/abstract-diamond-jewelry.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-abstract-hexagon-and-cube {
    background-image: url('../icons/abstract-hexagon-and-cube.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-abstract-home {
    background-image: url('../icons/abstract-home.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-abstract-infinity {
    background-image: url('../icons/abstract-infinity.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-abstract-leaf {
    background-image: url('../icons/abstract-leaf.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-abstract-leaves {
    background-image: url('../icons/abstract-leaves.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-abstract-line {
    background-image: url('../icons/abstract-line.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-abstract-spiral {
    background-image: url('../icons/abstract-spiral.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-abstract-square-and-lines {
    background-image: url('../icons/abstract-square-and-lines.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-abstract-squares {
    background-image: url('../icons/abstract-squares.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-abstract-square {
    background-image: url('../icons/abstract-square.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-abstract-stars {
    background-image: url('../icons/abstract-stars.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-abstract-sun {
    background-image: url('../icons/abstract-sun.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-abstract-triangle-pyramid {
    background-image: url('../icons/abstract-triangle-pyramid.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-abstract-triangle {
    background-image: url('../icons/abstract-triangle.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-abstract-triangular-lines {
    background-image: url('../icons/abstract-triangular-lines.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-abstract-water-drop {
    background-image: url('../icons/abstract-water-drop.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

/* Cartoon/Emoji icons */
.icon-cartoon-star-and-hearts {
    background-image: url('../icons/cartoon-star-and-red-hearts-emoji-black-outline-18035.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-cartoon-star-wink {
    background-image: url('../icons/cartoon-star-emoji-wink-black-outline-18032.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-cute-friend-stars {
    background-image: url('../icons/cute-cartoon-friend-stars-emoji-black-outline-18024.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-cute-night-stars {
    background-image: url('../icons/cute-cartoon-night-stars-emoji-black-outline-18025.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-cute-star-shining {
    background-image: url('../icons/cute-cartoon-star-emoji-shining-black-outline-18023.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-cute-star-smiling {
    background-image: url('../icons/cute-cartoon-star-emoji-smiling-black-outline-18021.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-cute-cool-star {
    background-image: url('../icons/cute-cool-cartoon-star-emoji-black-outline-18026.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-smiling-happy-star {
    background-image: url('../icons/smiling-happy-cute-cartoon-star-emoji-black-outline-18050.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-star-eyes {
    background-image: url('../icons/star-eyes-cartoon-emoji-black-outline-18033.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

/* UI/Functional icons */
.icon-close-circle {
    background-image: url('../icons/close-circle-black.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-data-management-cog {
    background-image: url('../icons/data-management-cog.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-data-management-file {
    background-image: url('../icons/data-management-file.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-document-startup {
    background-image: url('../icons/document-startup.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-folder-add {
    background-image: url('../icons/folder-add.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-folder-and-document {
    background-image: url('../icons/folder-and-document.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-folder-and-ribbon {
    background-image: url('../icons/folder-and-ribbon.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-folder-check-mark {
    background-image: url('../icons/folder-check-mark.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-folder-favorite {
    background-image: url('../icons/folder-favorite.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-folder-locked {
    background-image: url('../icons/folder-locked.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-folder-rocket {
    background-image: url('../icons/folder-rocket.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-folder-secure {
    background-image: url('../icons/folder-secure.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-folder-time {
    background-image: url('../icons/folder-time.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-folder-unlock {
    background-image: url('../icons/folder-unlock.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-like {
    background-image: url('../icons/like.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-medal-complete {
    background-image: url('../icons/medal-complete.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-medal-winner {
    background-image: url('../icons/medal-winner.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-menu-circle {
    background-image: url('../icons/menu-outline-circle.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-online-exam {
    background-image: url('../icons/online-exam.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-settings-gear {
    background-image: url('../icons/settings-gear-outline-circle.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-speech-bubble {
    background-image: url('../icons/speech-bubble.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.icon-trash-bin {
    background-image: url('../icons/trash-bin-outline-circle.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 100%;
    height: 100%;
}

/* Usage example:
<span class="icon">
    <span class="icon-abstract-home"></span>
</span>

<span class="icon is-small">
    <span class="icon-folder-time"></span>
</span>

<span class="icon is-medium">
    <span class="icon-medal-complete"></span>
</span>

<span class="icon is-large">
    <span class="icon-speech-bubble"></span>
</span>
*/