/* Icon sizes */
.bosui-icon-xs {
    font-size: 0.75rem;
}

.bosui-icon-sm {
    font-size: 1rem;
}

.bosui-icon-md {
    font-size: 1.25rem;
}

.bosui-icon-lg {
    font-size: 1.5rem;
}

.bosui-icon-xl {
    font-size: 1.75rem;
}

.bosui-icon-xxl {
    font-size: 2rem;
}

.bosui-icon-2x {
    font-size: 2em;
}

.bosui-icon-3x {
    font-size: 3em;
}

.bosui-icon-4x {
    font-size: 4em;
}

/* Set color classes */
.bosui-icon-primary {
    color: var(--bosui-primary-text);
}

.bosui-icon-secondary {
    color: var(--bosui-secondary-text);
}

.bosui-icon-danger {
    color: var(--bosui-danger-color);
}

.bosui-icon-success {
    color: var(--bosui-success-color);
}

.bosui-icon-white {
    color: var(--bosui-white-color);
}

.bosui-icon-light {
    color: var(--bosui-light-color);
}

.bosui-icon-dark {
    color: var(--bosui-dark-color);
}

/* Custom SVG icons using background images */

[class^="bosui-icon-"],
[class*=" bosui-icon-"] {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: -0.125em;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    background-color: currentColor;
}

/* SVG Icons from the icons folder */

/* UI Icons */
.bosui-icon-close {
    -webkit-mask-image: url("icons/close.svg");
    mask-image: url("icons/close.svg");
}

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

/* Standard UI Icons */
.bosui-icon-add {
    -webkit-mask-image: url("icons/add.svg");
    mask-image: url("icons/add.svg");
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.bosui-icon-chevrons-up {
    -webkit-mask-image: url("icons/chevrons-up.svg");
    mask-image: url("icons/chevrons-up.svg");
}
.bosui-icon-delete {
    -webkit-mask-image: url("icons/delete.svg");
    mask-image: url("icons/delete.svg");
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Additional common icons */
.bosui-icon-archive {
    -webkit-mask-image: url("icons/archive.svg");
    mask-image: url("icons/archive.svg");
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.bosui-loader {
    display: inline-block;
    border: 2px solid currentColor;
    border-top: 2px solid var(--primary-color);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
    position: absolute;
}

.bosui-valid-submit {
    display: inline-block;
    width: 2.2em;
    height: 2.2em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask-image: url("icons/ok.svg");
    mask-image: url("icons/ok.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
}


@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}