.okui-empty {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 100%
}

.okui-empty-img {
    height: var(--okd-empty-img-height);
    margin-bottom: var(--okd-empty-img-margin-bottom);
    width: var(--okd-empty-img-width)
}

.okui-empty-title {
    color: var(--okd-empty-title-color);
    font-size: var(--okd-empty-title-font-size);
    font-weight: 400;
    font-weight: var(--okd-empty-title-font-weight, 400);
    line-height: var(--okd-empty-title-light-height);
    margin-bottom: var(--okd-empty-title-margin-bottom);
    text-align: center
}

.okui-empty-title:last-child {
    margin-bottom: 0
}

.okui-empty-only-title {
    margin-bottom: var(--okd-empty-desc-margin-bottom)
}

.okui-empty-only-title:last-child {
    margin-bottom: 0
}

.okui-empty-description {
    color: var(--okd-empty-desc-color);
    font-size: var(--okd-empty-desc-font-size);
    font-weight: 400;
    font-weight: var(--okd-empty-desc-font-weight, 400);
    line-height: var(--okd-empty-desc-light-height);
    margin-bottom: var(--okd-empty-desc-margin-bottom);
    text-align: center
}

.okui-empty-description:last-child {
    margin-bottom: 0
}

.okui-hyperlink-xs .okui-hyperlink-text {
    font-size: var(--okd-hyperlink-xs-font-size);
    line-height: var(--okd-hyperlink-xs-line-height)
}

.okui-hyperlink-xs .icon-arrow {
    font-size: var(--okd-hyperlink-xs-icon-font-size);
    margin-left: var(--okd-hyperlink-xs-icon-margin-left)
}

.okui-hyperlink-sm .okui-hyperlink-text {
    font-size: var(--okd-hyperlink-sm-font-size);
    line-height: var(--okd-hyperlink-sm-line-height)
}

.okui-hyperlink-sm .icon-arrow {
    font-size: var(--okd-hyperlink-sm-icon-font-size);
    margin-left: var(--okd-hyperlink-sm-icon-margin-left)
}

.okui-hyperlink-md .okui-hyperlink-text {
    font-size: var(--okd-hyperlink-md-font-size);
    line-height: var(--okd-hyperlink-md-line-height)
}

.okui-hyperlink-md .icon-arrow {
    font-size: var(--okd-hyperlink-md-icon-font-size);
    margin-left: var(--okd-hyperlink-md-icon-margin-left)
}

.okui-hyperlink-lg .okui-hyperlink-text {
    font-size: var(--okd-hyperlink-lg-font-size);
    line-height: var(--okd-hyperlink-lg-line-height)
}

.okui-hyperlink-lg .icon-arrow {
    font-size: var(--okd-hyperlink-lg-icon-font-size);
    margin-left: var(--okd-hyperlink-lg-icon-margin-left)
}

.okui-hyperlink-muted {
    font-weight: var(--okd-hyperlink-muted-font-weight)
}

.okui-hyperlink-muted:hover {
    font-weight: var(--okd-hyperlink-muted-hover-font-weight)
}

.okui-hyperlink-medium {
    font-weight: var(--okd-hyperlink-medium-font-weight)
}

.okui-hyperlink-medium:hover {
    font-weight: var(--okd-hyperlink-medium-hover-font-weight)
}

.okui-hyperlink-amplified {
    font-weight: var(--okd-hyperlink-amplified-font-weight)
}

.okui-hyperlink-amplified:hover {
    font-weight: var(--okd-hyperlink-amplified-hover-font-weight)
}

.okui-hyperlink-primary {
    color: var(--okd-hyperlink-primary-default-color)
}

.okui-hyperlink-primary .icon-arrow {
    color: var(--okd-hyperlink-primary-default-icon-color)
}

.okui-hyperlink-primary:hover {
    color: var(--okd-hyperlink-primary-hover-color)
}

.okui-hyperlink-primary:hover .okui-hyperlink-text {
    color: var(--okd-hyperlink-primary-hover-color);
    text-decoration: underline;
    text-underline-offset: 3px
}

.okui-hyperlink-primary:hover .icon-arrow {
    color: var(--okd-hyperlink-primary-hover-icon-color)
}

.okui-hyperlink-primary a,
.okui-hyperlink-primary a:active,
.okui-hyperlink-primary a:visited {
    color: var(--okd-hyperlink-primary-default-color)
}

.okui-hyperlink-secondary {
    color: var(--okd-hyperlink-secondary-default-color)
}

.okui-hyperlink-secondary .icon-arrow {
    color: var(--okd-hyperlink-secondary-default-icon-color)
}

.okui-hyperlink-secondary:hover {
    color: var(--okd-hyperlink-secondary-hover-color)
}

.okui-hyperlink-secondary:hover .okui-hyperlink-text {
    color: var(--okd-hyperlink-secondary-hover-color);
    text-decoration: underline;
    text-underline-offset: 3px
}

.okui-hyperlink-secondary:hover .icon-arrow {
    color: var(--okd-hyperlink-secondary-hover-icon-color)
}

.okui-hyperlink-secondary a,
.okui-hyperlink-secondary a:active,
.okui-hyperlink-secondary a:visited {
    color: var(--okd-hyperlink-secondary-default-color)
}

.okui-hyperlink-reversed {
    color: var(--okd-hyperlink-reversed-default-color)
}

.okui-hyperlink-reversed .icon-arrow {
    color: var(--okd-hyperlink-reversed-default-icon-color)
}

.okui-hyperlink-reversed:hover {
    color: var(--okd-hyperlink-reversed-hover-color)
}

.okui-hyperlink-reversed:hover .okui-hyperlink-text {
    color: var(--okd-hyperlink-reversed-hover-color);
    text-decoration: underline;
    text-underline-offset: 3px
}

.okui-hyperlink-reversed:hover .icon-arrow {
    color: var(--okd-hyperlink-reversed-hover-icon-color)
}

.okui-hyperlink-reversed a,
.okui-hyperlink-reversed a:active,
.okui-hyperlink-reversed a:visited {
    color: var(--okd-hyperlink-reversed-default-color)
}

.okui-hyperlink-accent {
    color: var(--okd-hyperlink-accent-default-color)
}

.okui-hyperlink-accent .icon-arrow {
    color: var(--okd-hyperlink-accent-default-icon-color)
}

.okui-hyperlink-accent:hover {
    color: var(--okd-hyperlink-accent-hover-color)
}

.okui-hyperlink-accent:hover .okui-hyperlink-text {
    color: var(--okd-hyperlink-accent-hover-color);
    text-decoration: underline;
    text-underline-offset: 3px
}

.okui-hyperlink-accent:hover .icon-arrow {
    color: var(--okd-hyperlink-accent-hover-icon-color)
}

.okui-hyperlink-accent a,
.okui-hyperlink-accent a:active,
.okui-hyperlink-accent a:visited {
    color: var(--okd-hyperlink-accent-default-color)
}

.okui-hyperlink-text {
    text-decoration: none
}

.okui-hyperlink-underline .okui-hyperlink-text {
    text-decoration: underline;
    text-underline-offset: 3px
}

.okui-hyperlink-no-hover-underline:hover .okui-hyperlink-text {
    text-decoration: none
}

.okui-hyperlink {
    align-items: center;
    cursor: pointer;
    display: inline-flex
}

.okui-hyperlink .icon-arrow {
    cursor: auto;
    font-weight: inherit
}

.okui-hyperlink a:focus-visible {
    border-radius: 2px;
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: var(--okd-color-border-focus);
    outline-offset: 2px;
    outline-style: solid;
    outline-width: 2px
}

.okui-overflow_scroll {
    position: relative;
    width: 100%
}

.okui-overflow_scroll-scroll {
    overflow-x: scroll;
    scroll-behavior: smooth;
    scrollbar-width: none;
    white-space: nowrap;
    width: 100%
}

.okui-overflow_scroll-scroll::-webkit-scrollbar {
    display: none;
    height: 0;
    width: 0
}

.okui-overflow_scroll-scroll-children {
    display: flex;
    white-space: nowrap;
    width: -moz-fit-content;
    width: fit-content
}

.okui-overflow_scroll-nav {
    cursor: pointer
}

.okui-overflow_scroll-nav-icon {
    align-items: center;
    background-image: linear-gradient(270deg, #fff 72.22%, hsla(0, 0%, 100%, 0));
    background-image: linear-gradient(270deg, var(--okd-overflowscroll-icon-bg-start-color, #fff) 72.22%, var(--okd-overflowscroll-icon-bg-end-color, hsla(0, 0%, 100%, 0)) 100%);
    color: #929292;
    color: var(--okd-overflowscroll-icon-color, #929292);
    display: flex;
    height: 100%;
    justify-content: center;
    position: absolute;
    top: 0;
    visibility: visible;
    width: 36px;
    z-index: 9
}

.okui-overflow_scroll-nav-icon:hover {
    color: #3d3d3d;
    color: var(--okd-overflowscroll-icon-hover-color, #3d3d3d)
}

.okui-overflow_scroll-nav .icon-left {
    background-image: linear-gradient(-270deg, #fff 72.22%, hsla(0, 0%, 100%, 0));
    background-image: linear-gradient(-270deg, var(--okd-overflowscroll-icon-bg-start-color, #fff) 72.22%, var(--okd-overflowscroll-icon-bg-end-color, hsla(0, 0%, 100%, 0)) 100%);
    left: 0
}

.okui-overflow_scroll-nav .icon-left-inner {
    transform: rotate(180deg)
}

.okui-overflow_scroll-nav .icon-right {
    right: 0
}

.okui-overflow_scroll-nav .icon-hide {
    visibility: hidden
}

.okui-overflow_scroll-right-alpha {
    background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0), #fff);
    background-image: linear-gradient(90deg, var(--okd-overflowscroll-icon-bg-end-color, hsla(0, 0%, 100%, 0)), var(--okd-overflowscroll-icon-bg-start-color, #fff));
    height: 100%;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    z-index: 9
}

.okui-overflow_scroll-reversed .okui-overflow_scroll-nav-icon {
    background-image: linear-gradient(270deg, var(--okd-color-gray-900) 72.22%, var(--okd-color-gray-900) 100%);
    background-image: linear-gradient(270deg, var(--okd-overflowscroll-reversed-icon-bg-start-color, var(--okd-color-gray-900)) 72.22%, var(--okd-overflowscroll-reversed-icon-bg-end-color, var(--okd-color-gray-900)) 100%);
    color: #929292;
    color: var(--okd-overflowscroll-reversed-icon-color, #929292)
}

.okui-overflow_scroll-reversed .okui-overflow_scroll-nav-icon:hover {
    color: #e4e2e2;
    color: var(--okd-overflowscroll-reversed-icon-hover-color, #e4e2e2)
}

.okui-overflow_scroll-reversed .icon-left {
    background-image: linear-gradient(-270deg, var(--okd-color-gray-900) 72.22%, var(--okd-color-gray-900) 100%);
    background-image: linear-gradient(-270deg, var(--okd-overflowscroll-reversed-icon-bg-start-color, var(--okd-color-gray-900)) 72.22%, var(--okd-overflowscroll-reversed-icon-bg-end-color, var(--okd-color-gray-900)) 100%)
}

.okui-mask {
    background: rgba(0, 0, 0, .65);
    background: var(--okd-dialog-window-mask-color, rgba(0, 0, 0, .65));
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0
}

.okui-transition-fade {
    transition: opacity .3s linear
}

.okui-transition-fade-active {
    will-change: opacity
}

.okui-transition-fade-ease-out {
    transition-timing-function: cubic-bezier(.5, 0, .52, 1)
}

.okui-transition-fade-entered,
.okui-transition-fade-entering {
    opacity: 1
}

.okui-transition-fade-exited,
.okui-transition-fade-exiting {
    opacity: 0
}

.okui-transition-slide {
    backface-visibility: hidden;
    perspective: 1000px;
    position: fixed;
    transform: translateY(100%);
    transform-style: preserve-3d;
    transition: transform .3s linear, opacity .3s linear
}

.okui-transition-slide-active {
    will-change: transform, opacity
}

.okui-transition-slide-cubic {
    transition-timing-function: ease
}

.okui-transition-slide-top {
    left: 0;
    top: 0;
    width: 100%
}

.okui-transition-slide-bottom {
    bottom: 0;
    left: 0;
    width: 100%
}

.okui-transition-slide-left {
    height: 100%;
    left: 0;
    top: 0
}

.okui-transition-slide-right {
    height: 100%;
    right: 0;
    top: 0
}

.okui-transition-slide-entered,
.okui-transition-slide-entering {
    opacity: 1;
    transform: none
}

.okui-transition-slide-exited,
.okui-transition-slide-exiting {
    opacity: 0
}

.okui-transition-slide-exited.okui-transition-slide-top,
.okui-transition-slide-exiting.okui-transition-slide-top {
    transform: translateY(-100%)
}

.okui-transition-slide-exited.okui-transition-slide-bottom,
.okui-transition-slide-exiting.okui-transition-slide-bottom {
    transform: translateY(100%)
}

.okui-transition-slide-exited.okui-transition-slide-left,
.okui-transition-slide-exiting.okui-transition-slide-left {
    transform: translateX(-100%)
}

.okui-transition-slide-exited.okui-transition-slide-right,
.okui-transition-slide-exiting.okui-transition-slide-right {
    transform: translateX(100%)
}

@media (hover:none) and (pointer:coarse) {
    .okui-transition-slide {
        transition-duration: .2s
    }
}

.okui-notification-default {
    height: 100vh;
    position: fixed;
    width: 100vw
}

.okui-notification-default,
.okui-notification-wrap {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    left: 0;
    line-height: 1;
    margin: 0;
    padding: 0;
    pointer-events: none;
    top: 0
}

.okui-notification-wrap {
    height: 100%;
    position: absolute;
    width: 100%
}

.okui-notification * {
    box-sizing: border-box
}

.okui-notification-container.container-remove {
    animation-duration: .55s;
    animation-name: NotificationOutTop
}

.okui-notification-box {
    animation-duration: .3s;
    background: var(--okd-notification-box-background);
    border: thin solid var(--okd-notification-box-border-color);
    border-radius: var(--okd-notification-box-border-radius);
    box-shadow: var(--okd-notification-box-shadow);
    display: inline-flex;
    line-height: 1;
    margin: calc(var(--okd-notification-box-each-margin)/2) 0;
    max-width: var(--okd-notification-box-max-width);
    min-width: var(--okd-notification-box-min-width);
    overflow: hidden;
    padding: var(--okd-notification-box-padding);
    pointer-events: all;
    position: relative
}

.okui-notification-box.auto-width {
    min-width: var(--okd-notification-box-auto-width-min-width)
}

.okui-notification-box .okui-notification-icon-circle-container {
    display: inline-block;
    height: 20px;
    margin-right: var(--okd-notification-box-icon-text-margin);
    vertical-align: top;
    width: 20px
}

.okui-notification-box .okui-notification-icon-new {
    font-size: 20px;
    height: 100%;
    width: 100%
}

.okui-notification-box .okui-notification-content {
    display: inline-flex;
    flex: 1 1;
    flex-direction: column;
    flex-wrap: wrap;
    word-break: break-word
}

.okui-notification-box .okui-notification-inline {
    flex-direction: row
}

.okui-notification-box .okui-notification-inline .okui-notification-action {
    margin-top: 0;
    width: auto
}

.okui-notification-box .okui-notification-title-box {
    display: inline-flex;
    flex: 1 1;
    flex-direction: column;
    flex-wrap: wrap
}

.okui-notification-box .okui-notification-title {
    color: var(--okd-notification-title-color);
    flex: 1 1;
    flex-shrink: 0;
    font-size: var(--okd-notification-title-font-size);
    font-weight: 500;
    line-height: var(--okd-notification-title-line-height);
    text-align: left
}

.okui-notification-box .okui-notification-desc,
.okui-notification-box .okui-notification-text {
    color: var(--okd-notification-text-color);
    font-size: var(--okd-notification-text-font-size);
    line-height: var(--okd-notification-text-line-height)
}

.okui-notification-box .okui-notification-desc {
    margin-top: 4px;
    text-align: left;
    width: 100%
}

.okui-notification-box .okui-notification-action {
    display: inline-block;
    margin-top: 12px;
    pointer-events: auto;
    text-align: left;
    width: 100%
}

.okui-notification-box .okui-notification-action .action-undo {
    color: var(--okd-notification-action-confirm-btn-color)
}

.okui-notification-box .okui-notification-action .action-dismiss,
.okui-notification-box .okui-notification-action .action-undo {
    cursor: pointer;
    font-size: var(--okd-notification-action-font-size);
    font-weight: 500;
    line-height: var(--okd-notification-action-line-height)
}

.okui-notification-box .okui-notification-action .action-dismiss {
    color: var(--okd-notification-action-cancel-btn-color)
}

.okui-notification-box .okui-notification-action .action-undo+.action-dismiss {
    margin-left: 16px
}

.okui-notification-box .okui-notification-close {
    -webkit-tap-highlight-color: transparent;
    color: var(--okd-notification-box-close-icon-color);
    cursor: pointer;
    font-size: 22px;
    height: 22px;
    margin-left: 15px;
    pointer-events: auto;
    position: relative;
    top: -2px;
    width: 22px
}

.okui-notification-box.success .okui-notification-icon-new {
    color: var(--okd-notification-success-icon-color)
}

.okui-notification-box.info .okui-notification-icon-new {
    color: var(--okd-notification-info-icon-color)
}

.okui-notification-box.warn .okui-notification-icon-new {
    color: var(--okd-notification-warn-icon-color)
}

.okui-notification-box.error .okui-notification-icon-new {
    color: var(--okd-notification-error-icon-color)
}

.okui-notification-box.pending .okui-notification-icon-new {
    color: var(--okd-notification-pending-icon-color)
}

.okui-notification.okui-notification-bottom,
.okui-notification.okui-notification-bottom-left,
.okui-notification.okui-notification-bottom-right {
    justify-content: flex-end
}

.okui-notification.okui-notification-bottom .container-remove,
.okui-notification.okui-notification-bottom-left .container-remove,
.okui-notification.okui-notification-bottom-right .container-remove {
    animation-name: NotificationOutBottom
}

.okui-notification.okui-notification-bottom-right .okui-notification-container,
.okui-notification.okui-notification-top-right .okui-notification-container {
    text-align: right
}

.okui-notification.okui-notification-bottom .okui-notification-container,
.okui-notification.okui-notification-top .okui-notification-container {
    text-align: center
}

.okui-notification.okui-notification-bottom-left .okui-notification-box,
.okui-notification.okui-notification-top-left .okui-notification-box {
    animation-name: NotificationInLeft
}

.okui-notification.okui-notification-bottom-right .okui-notification-box,
.okui-notification.okui-notification-top-right .okui-notification-box {
    animation-name: NotificationInRight
}

.okui-notification.okui-notification-top .okui-notification-box {
    animation-name: NotificationInTop
}

.okui-notification.okui-notification-bottom .okui-notification-box {
    animation-name: NotificationInBottom
}

@media (max-width:767px) {
    .okui-notification.okui-notification-bottom-left .okui-notification-container,
    .okui-notification.okui-notification-bottom-right .okui-notification-container,
    .okui-notification.okui-notification-top-left .okui-notification-container,
    .okui-notification.okui-notification-top-right .okui-notification-container {
        text-align: center
    }
    .okui-notification-box {
        min-width: 0;
        min-width: auto;
        width: 100%
    }
    .okui-notification-box.auto-width {
        width: auto
    }
}

@keyframes NotificationInLeft {
    0% {
        opacity: 0;
        transform: translate3d(-30px, 0, 0)
    }
    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes NotificationInRight {
    0% {
        opacity: 0;
        transform: translate3d(30px, 0, 0)
    }
    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes NotificationInTop {
    0% {
        opacity: 0;
        transform: translate3d(0, -30px, 0)
    }
    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes NotificationInBottom {
    0% {
        opacity: 0;
        transform: translate3d(0, 30px, 0)
    }
    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes NotificationOutBottom {
    0% {
        max-height: 150px;
        opacity: 1;
        transform: translateZ(0)
    }
    to {
        max-height: 0;
        opacity: 0;
        transform: translate3d(0, 30px, 0)
    }
}

@keyframes NotificationOutTop {
    0% {
        max-height: 150px;
        opacity: 1;
        transform: translateZ(0)
    }
    to {
        max-height: 0;
        opacity: 0;
        transform: translate3d(0, -30px, 0)
    }
}

.okui-image-preview-container {
    height: 100%;
    text-align: center;
    width: 100%
}

.okui-image-preview-img {
    cursor: grab;
    display: inline-block;
    max-height: 100%;
    max-width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    vertical-align: middle
}

.okui-image-preview-picture {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%
}

.okui-image-preview-close-btn {
    align-items: center;
    background-color: hsla(0, 0%, 5%, .2);
    background-color: var(--okd-imageviewer-preview-close-btn-background-color, hsla(0, 0%, 5%, .2));
    border-radius: 50%;
    color: var(--okd-color-content-inverse);
    color: var(--okd-imageviewer-preview-close-btn-color, var(--okd-color-content-inverse));
    cursor: pointer;
    display: flex;
    height: 40px;
    height: var(--okd-imageviewer-preview-close-btn-height, 40px);
    justify-content: center;
    position: absolute;
    right: 16px;
    right: var(--okd-imageviewer-preview-close-btn-right, 16px);
    top: 16px;
    top: var(--okd-imageviewer-preview-close-btn-top, 16px);
    width: 40px;
    width: var(--okd-imageviewer-preview-close-btn-width, 40px)
}

.okui-image-preview-close-btn .okui-image-preview-close-btn-icon {
    font-size: 24px;
    font-size: var(--okd-imageviewer-preview-close-btn-icon-font-size, 24px)
}

.okui-image-preview-toolbar {
    align-items: center;
    background-color: hsla(0, 0%, 5%, .2);
    background-color: var(--okd-imageviewer-preview-toolbar-background-color, hsla(0, 0%, 5%, .2));
    border-radius: 24px;
    border-radius: var(--okd-imageviewer-preview-toolbar-border-radius, 24px);
    bottom: 24px;
    bottom: var(--okd-imageviewer-preview-toolbar-bottom, 24px);
    color: var(--okd-color-content-inverse);
    color: var(--okd-imageviewer-preview-toolbar-color, var(--okd-color-content-inverse));
    display: inline-flex;
    height: 48px;
    height: var(--okd-imageviewer-preview-toolbar-height, 48px);
    left: 50%;
    padding: 0 24px;
    padding: 0 var(--okd-imageviewer-preview-toolbar-padding-horizontal, 24px);
    position: absolute;
    transform: translateX(-50%)
}

.okui-image-preview-toolbar .okui-image-preview-toolbar-action+.okui-image-preview-toolbar-action {
    margin-left: 24px;
    margin-left: var(--okd-imageviewer-preview-toolbar-margin-left, 24px)
}

.okui-image-preview-toolbar .okui-image-preview-toolbar-icon {
    cursor: pointer;
    display: inline-block;
    text-align: center
}

.okui-image-preview-toolbar .okui-image-preview-toolbar-icon .iconfont {
    font-size: 24px;
    font-size: var(--okd-imageviewer-preview-toolbar-icon-font-size, 24px)
}

.okui-image-preview-toolbar .okui-image-preview-toolbar-action-disabled .okui-image-preview-toolbar-icon {
    color: var(--okd-color-content-disabled);
    color: var(--okd-imageviewer-preview-toolbar-disabled-color, var(--okd-color-content-disabled));
    cursor: not-allowed
}

.okui-image-viewer {
    cursor: pointer;
    display: inline-block;
    position: relative
}

.okui-image-viewer-mask {
    align-items: center;
    color: var(--okd-color-content-inverse);
    color: var(--okd-imageviewer-mask-color, var(--okd-color-content-inverse));
    display: none;
    font-size: 14px;
    font-size: var(--okd-imageviewer-mask-font-size, 14px);
    font-weight: 500;
    font-weight: var(--okd-imageviewer-mask-font-weight, 500);
    height: 100%;
    justify-content: center;
    position: absolute;
    top: 0;
    width: 100%
}

.okui-image-viewer-mask .okui-image-viewer-eye {
    display: inline-block;
    font-size: 16px;
    font-size: var(--okd-imageviewer-mask-eye-font-size, 16px);
    margin-right: 8px;
    margin-right: var(--okd-imageviewer-mask-eye-margin-right, 8px)
}

@media (min-width:768px) {
    .okui-image-viewer:hover .okui-image-viewer-mask {
        display: flex
    }
}