.okui-breadcrumbs,
.okui-breadcrumbs-crumb,
.okui-breadcrumbs-crumb-active {
    align-items: center;
    display: flex
}

.okui-breadcrumbs-primary .okui-breadcrumbs-crumb-link {
    font-weight: var(--okd-hyperlink-medium-font-weight);
    font-weight: var(--okd-breadcrumbs-primary-default-font-weight, var(--okd-hyperlink-medium-font-weight))
}

.okui-breadcrumbs-primary .okui-breadcrumbs-crumb-link,
.okui-breadcrumbs-primary .okui-breadcrumbs-crumb-link a,
.okui-breadcrumbs-primary .okui-breadcrumbs-crumb-link a:active,
.okui-breadcrumbs-primary .okui-breadcrumbs-crumb-link a:visited {
    color: var(--okd-hyperlink-primary-default-color);
    color: var(--okd-breadcrumbs-primary-default-font-color, var(--okd-hyperlink-primary-default-color))
}

.okui-breadcrumbs-primary .okui-breadcrumbs-crumb-link:hover {
    font-weight: 500;
    font-weight: var(--okd-breadcrumbs-primary-hover-font-weight, 500)
}

.okui-breadcrumbs-primary .okui-breadcrumbs-crumb-active {
    color: var(--okd-breadcrumbs-primary-current-font-color);
    font-weight: var(--okd-breadcrumbs-common-current-font-weight);
    font-weight: var(--okd-breadcrumbs-primary-current-font-weight, var(--okd-breadcrumbs-common-current-font-weight))
}

.okui-breadcrumbs-primary .crumb-icon {
    color: var(--okd-breadcrumbs-primary-icon-color)
}

.okui-breadcrumbs-secondary .okui-breadcrumbs-crumb-link {
    font-weight: var(--okd-hyperlink-medium-font-weight);
    font-weight: var(--okd-breadcrumbs-secondary-default-font-weight, var(--okd-hyperlink-medium-font-weight))
}

.okui-breadcrumbs-secondary .okui-breadcrumbs-crumb-link,
.okui-breadcrumbs-secondary .okui-breadcrumbs-crumb-link a,
.okui-breadcrumbs-secondary .okui-breadcrumbs-crumb-link a:active,
.okui-breadcrumbs-secondary .okui-breadcrumbs-crumb-link a:visited {
    color: var(--okd-hyperlink-secondary-default-color);
    color: var(--okd-breadcrumbs-secondary-default-font-color, var(--okd-hyperlink-secondary-default-color))
}

.okui-breadcrumbs-secondary .okui-breadcrumbs-crumb-link:hover {
    font-weight: 500;
    font-weight: var(--okd-breadcrumbs-secondary-hover-font-weight, 500)
}

.okui-breadcrumbs-secondary .okui-breadcrumbs-crumb-active {
    color: var(--okd-breadcrumbs-secondary-current-font-color);
    font-weight: var(--okd-breadcrumbs-common-current-font-weight);
    font-weight: var(--okd-breadcrumbs-secondary-current-font-weight, var(--okd-breadcrumbs-common-current-font-weight))
}

.okui-breadcrumbs-secondary .crumb-icon {
    color: var(--okd-breadcrumbs-secondary-icon-color)
}

.okui-breadcrumbs-reversed .okui-breadcrumbs-crumb-link {
    font-weight: var(--okd-hyperlink-medium-font-weight);
    font-weight: var(--okd-breadcrumbs-reversed-default-font-weight, var(--okd-hyperlink-medium-font-weight))
}

.okui-breadcrumbs-reversed .okui-breadcrumbs-crumb-link,
.okui-breadcrumbs-reversed .okui-breadcrumbs-crumb-link a,
.okui-breadcrumbs-reversed .okui-breadcrumbs-crumb-link a:active,
.okui-breadcrumbs-reversed .okui-breadcrumbs-crumb-link a:visited {
    color: var(--okd-hyperlink-reversed-default-color);
    color: var(--okd-breadcrumbs-reversed-default-font-color, var(--okd-hyperlink-reversed-default-color))
}

.okui-breadcrumbs-reversed .okui-breadcrumbs-crumb-link:hover {
    font-weight: 500;
    font-weight: var(--okd-breadcrumbs-reversed-hover-font-weight, 500)
}

.okui-breadcrumbs-reversed .okui-breadcrumbs-crumb-active {
    color: var(--okd-breadcrumbs-reversed-current-font-color);
    font-weight: var(--okd-breadcrumbs-common-current-font-weight);
    font-weight: var(--okd-breadcrumbs-reversed-current-font-weight, var(--okd-breadcrumbs-common-current-font-weight))
}

.okui-breadcrumbs-reversed .crumb-icon {
    color: var(--okd-breadcrumbs-reversed-icon-color)
}

.okui-breadcrumbs-xs .okui-breadcrumbs-crumb-active {
    font-size: var(--okd-breadcrumbs-xs-current-font-size);
    line-height: var(--okd-breadcrumbs-xs-current-line-height)
}

.okui-breadcrumbs-xs .crumb-icon {
    font-size: var(--okd-breadcrumbs-xs-icon-font-size);
    margin-left: var(--okd-breadcrumbs-xs-icon-margin-left);
    margin-right: var(--okd-breadcrumbs-xs-icon-margin-right)
}

.okui-breadcrumbs-sm .okui-breadcrumbs-crumb-active {
    font-size: var(--okd-breadcrumbs-sm-current-font-size);
    line-height: var(--okd-breadcrumbs-sm-current-line-height)
}

.okui-breadcrumbs-sm .crumb-icon {
    font-size: var(--okd-breadcrumbs-sm-icon-font-size);
    margin-left: var(--okd-breadcrumbs-sm-icon-margin-left);
    margin-right: var(--okd-breadcrumbs-sm-icon-margin-right)
}

.okui-breadcrumbs-md .okui-breadcrumbs-crumb-active {
    font-size: var(--okd-breadcrumbs-md-current-font-size);
    line-height: var(--okd-breadcrumbs-md-current-line-height)
}

.okui-breadcrumbs-md .crumb-icon {
    font-size: var(--okd-breadcrumbs-md-icon-font-size);
    margin-left: var(--okd-breadcrumbs-md-icon-margin-left);
    margin-right: var(--okd-breadcrumbs-md-icon-margin-right)
}

.okui-breadcrumbs-lg .okui-breadcrumbs-crumb-active {
    font-size: var(--okd-breadcrumbs-lg-current-font-size);
    line-height: var(--okd-breadcrumbs-lg-current-line-height)
}

.okui-breadcrumbs-lg .crumb-icon {
    font-size: var(--okd-breadcrumbs-lg-icon-font-size);
    margin-left: var(--okd-breadcrumbs-lg-icon-margin-left);
    margin-right: var(--okd-breadcrumbs-lg-icon-margin-right)
}

.okui-dialog {
    --inner-okd-dialog-close-btn-padding: var(--okd-dialog-window-action-fixed-padding, 16px);
    height: 100%;
    pointer-events: none;
    width: 100%
}

.okui-dialog-float {
    left: 0;
    position: fixed;
    top: 0
}

.okui-dialog * {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box
}

.okui-dialog-window-float {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%)
}

@supports (bottom:constant(safe-area-inset-bottom)) or (bottom:env(safe-area-inset-bottom)) {
    .okui-dialog-window-safe {
        padding-bottom: env(safe-area-inset-bottom)
    }
}

.okui-dialog-window {
    border-radius: var(--okd-dialog-window-border-radius);
    box-shadow: var(--okd-dialog-window-box-shadow);
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    max-height: calc(100% - 48px);
    outline: none;
    pointer-events: auto;
    width: calc(100% - 32px)
}

.okui-dialog-window-border {
    border: 1px solid transparent;
    border: 1px solid var(--okd-dialog-window-border-color, transparent)
}

.okui-dialog-title-container {
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    justify-content: space-between
}

.okui-dialog-title-container .title-center {
    text-align: center
}

.okui-dialog-title-container .title-center .modal-title {
    justify-content: center
}

.okui-dialog-title-block {
    display: flex;
    flex-direction: column;
    flex-grow: 1
}

.okui-dialog-title-block .modal-title {
    font-size: 16px;
    font-size: var(--okd-dialog-title-font-size, 16px);
    font-weight: 700;
    font-weight: var(--okd-dialog-title-font-weight, 700);
    line-height: var(--okd-dialog-title-line-height);
    padding-top: 2px
}

.okui-dialog-title-block .modal-sub-title {
    font-size: var(--okd-dialog-sub-title-font-size);
    font-weight: 400;
    line-height: var(--okd-dialog-sub-title-line-height);
    margin-top: 2px
}

.okui-dialog-b-btn,
.okui-dialog-c-btn {
    cursor: pointer;
    display: inline-block;
    height: var(--okd-dialog-window-close-icon-size);
    justify-content: center;
    line-height: 1;
    position: relative;
    vertical-align: middle;
    width: var(--okd-dialog-window-close-icon-size);
    z-index: 1
}

.okui-dialog-b-btn.icon,
.okui-dialog-c-btn.icon {
    font-size: var(--okd-dialog-window-close-icon-size)
}

.okui-dialog-b-btn:after,
.okui-dialog-c-btn:after {
    content: " ";
    display: block;
    height: calc(var(--okd-dialog-window-close-icon-size)*1.5);
    left: -25%;
    position: absolute;
    top: -25%;
    width: calc(var(--okd-dialog-window-close-icon-size)*1.5)
}

.okui-dialog-b-btn {
    height: var(--okd-dialog-window-back-icon-size);
    margin-right: 16px;
    margin-right: var(--okd-dialog-title-icon-back-margin-right, 16px);
    width: var(--okd-dialog-window-back-icon-size)
}

.okui-dialog-b-btn.icon {
    font-size: var(--okd-dialog-window-back-icon-size)
}

.okui-dialog-c-btn {
    margin-left: 32px;
    margin-left: var(--okd-dialog-title-icon-close-margin-left, 32px)
}

.okui-dialog-top-action-fixed {
    padding: var(--inner-okd-dialog-close-btn-padding);
    position: absolute;
    top: 0
}

.okui-dialog-top-action-fixed .okui-dialog-b-btn,
.okui-dialog-top-action-fixed .okui-dialog-c-btn {
    margin: 0
}

.okui-dialog-top-l {
    align-self: flex-start;
    left: 0
}

.okui-dialog-top-r {
    align-self: flex-start;
    right: 0
}

.okui-dialog-top-hidden-for-t-center {
    pointer-events: none;
    visibility: hidden
}

.okui-dialog-top-action-hidden {
    display: none;
    pointer-events: none
}

.okui-dialog-scroll-box {
    flex-grow: 1;
    overflow-y: auto
}

.okui-dialog-scroll-box.scroll-disable {
    overflow-y: visible;
    overflow-y: initial
}

.okui-dialog-container,
.okui-dialog-customer-box {
    height: 100%
}

.okui-dialog-container.no-padding,
.okui-dialog-customer-box.no-padding {
    padding: 0
}

.okui-dialog .okui-dialog-footer-line {
    border-top: thin solid var(--okd-dialog-window-split-line-border-color)
}

.okui-dialog .okui-dialog-header-line {
    border-bottom: thin solid var(--okd-dialog-window-split-line-border-color)
}

.okui-dialog-btn-box {
    display: flex
}

.okui-dialog-btn-box.layout-right {
    justify-content: flex-end
}

.okui-dialog-btn-box.layout-left {
    justify-content: flex-start
}

.okui-dialog-btn-box.layout-full .dialog-btn {
    flex: 1 1
}

.okui-dialog .okui-dialog-window {
    background: var(--okd-dialog-window-background);
    color: var(--okd-dialog-window-default-text-color)
}

.okui-dialog .okui-dialog-window.container-mode {
    background: transparent;
    box-shadow: none
}

.okui-dialog .okui-dialog-title-container .modal-title {
    align-items: center;
    color: var(--okd-dialog-title-color);
    display: flex
}

.okui-dialog .okui-dialog-title-container .modal-sub-title {
    color: var(--okd-dialog-sub-title-color)
}

.okui-dialog .okui-dialog-c-btn {
    color: var(--okd-color-gray-400);
    color: var(--okd-dialog-title-icon-close-color, var(--okd-color-gray-400))
}

.okui-dialog .okui-dialog-c-btn:hover {
    background-color: var(--okd-color-background-hover);
    background-color: var(--okd-dialog-title-icon-hover-background-color, var(--okd-color-background-hover));
    border-radius: 4px;
    border-radius: var(--okd-dialog-title-icon-hover-border-radius, 4px);
    color: var(--okd-color-gray-900);
    color: var(--okd-dialog-title-icon-close-hover-color, var(--okd-color-gray-900))
}

.okui-dialog .okui-dialog-b-btn {
    color: var(--okd-color-gray-900);
    color: var(--okd-dialog-title-icon-back-color, var(--okd-color-gray-900))
}

.okui-dialog .okui-dialog-b-btn:hover {
    background-color: var(--okd-color-background-hover);
    background-color: var(--okd-dialog-title-icon-hover-background-color, var(--okd-color-background-hover));
    border-radius: 4px;
    border-radius: var(--okd-dialog-title-icon-hover-border-radius, 4px)
}

.okui-dialog-mask {
    background: var(--okd-dialog-window-mask-color)
}

.okui-dialog-scroll-bar-end::-webkit-scrollbar,
.okui-dialog-scroll-bar-start::-webkit-scrollbar {
    background-color: transparent
}

.okui-dialog-scroll-bar-start::-webkit-scrollbar-button:vertical:start:increment {
    background-color: transparent;
    display: block;
    height: var(--okd-dialog-window-border-radius)
}

.okui-dialog-scroll-bar-end::-webkit-scrollbar-button:vertical:end:increment {
    background-color: transparent;
    display: block;
    height: var(--okd-dialog-window-border-radius)
}

@media (min-width:768px) {
    .okui-dialog-window {
        min-width: var(--okd-dialog-window-min-width);
        width: auto
    }
    .okui-dialog-title-container {
        padding: var(--okd-dialog-title-box-md-padding-vertical) var(--okd-dialog-container-md-padding-horizontal)
    }
    .okui-dialog-container {
        padding: var(--okd-dialog-container-md-padding-vertical) var(--okd-dialog-container-md-padding-horizontal)
    }
    .okui-dialog-customer-box {
        padding: 0 var(--okd-dialog-container-md-padding-horizontal)
    }
    .okui-dialog-footer-box {
        padding: var(--okd-dialog-footer-box-md-padding-vertical) var(--okd-dialog-container-md-padding-horizontal)
    }
    .okui-dialog-btn-box .dialog-btn.double-btn {
        width: auto
    }
    .okui-dialog-btn-box.layout-full {
        flex-direction: row
    }
    .okui-dialog-btn-box .dialog-btn+.dialog-btn {
        margin-left: 16px;
        margin-left: var(--okd-dialog-footer-btn-md-margin-left, 16px)
    }
}

@media (max-width:767px) {
    .okui-dialog-title-container {
        padding: var(--okd-dialog-title-box-sm-padding-vertical) var(--okd-dialog-container-sm-padding-horizontal)
    }
    .okui-dialog-container {
        padding: var(--okd-dialog-container-sm-padding-vertical) var(--okd-dialog-container-sm-padding-horizontal)
    }
    .okui-dialog-customer-box {
        padding: 0 var(--okd-dialog-container-sm-padding-horizontal)
    }
    .okui-dialog-footer-box {
        padding: var(--okd-dialog-footer-box-sm-padding-top, 12px) var(--okd-dialog-container-sm-padding-horizontal) var(--okd-dialog-footer-box-sm-padding-bottom, 20px)
    }
    .okui-dialog-btn-box .dialog-btn {
        width: 100%
    }
    .okui-dialog-btn-box .dialog-btn+.dialog-btn {
        margin-left: 12px;
        margin-left: var(--okd-dialog-footer-btn-sm-margin-left, 12px)
    }
    .okui-dialog-btn-box.layout-full {
        flex-direction: column-reverse
    }
    .okui-dialog-btn-box.layout-full .dialog-btn+.dialog-btn {
        margin-left: 0
    }
    .okui-dialog-btn-box.layout-full .double-btn:first-child {
        margin-top: 8px;
        margin-top: var(--okd-dialog-footer-btn-full-sm-margin-top, 8px)
    }
    .okui-dialog-window {
        border-radius: 8px;
        border-radius: var(--okd-dialog-window-sm-border-radius, 8px)
    }
    .okui-dialog-window.full-page {
        height: auto !important;
        min-height: calc(100% - 48px) !important
    }
    .okui-dialog-window.full-page-with-show-header {
        height: auto !important
    }
    .okui-dialog-window.bottom-align {
        border-radius: var(--okd-dialog-window-border-radius) var(--okd-dialog-window-border-radius) 0 0;
        bottom: 0;
        top: auto;
        transform: translate(-50%)
    }
    .okui-dialog-window.no-margin {
        min-width: 0;
        min-width: auto;
        width: 100%
    }
}

.okui-dialog-mobile-mode .okui-dialog-title-container {
    padding: var(--okd-dialog-title-box-sm-padding-vertical) var(--okd-dialog-container-sm-padding-horizontal)
}

.okui-dialog-mobile-mode .okui-dialog-container {
    padding: var(--okd-dialog-container-sm-padding-vertical) var(--okd-dialog-container-sm-padding-horizontal)
}

.okui-dialog-mobile-mode .okui-dialog-customer-box {
    padding: 0 var(--okd-dialog-container-sm-padding-horizontal)
}

.okui-dialog-mobile-mode .okui-dialog-footer-box {
    padding: var(--okd-dialog-footer-box-sm-padding-top, 12px) var(--okd-dialog-container-sm-padding-horizontal) var(--okd-dialog-footer-box-sm-padding-bottom, 20px)
}

.okui-dialog-mobile-mode .okui-dialog-btn-box .dialog-btn {
    width: 100%
}

.okui-dialog-mobile-mode .okui-dialog-btn-box .dialog-btn+.dialog-btn {
    margin-left: 12px;
    margin-left: var(--okd-dialog-footer-btn-sm-margin-left, 12px)
}

.okui-dialog-mobile-mode .okui-dialog-btn-box.layout-full {
    flex-direction: column-reverse
}

.okui-dialog-mobile-mode .okui-dialog-btn-box.layout-full .dialog-btn+.dialog-btn {
    margin-left: 0
}

.okui-dialog-mobile-mode .okui-dialog-btn-box.layout-full .double-btn:first-child {
    margin-top: 8px;
    margin-top: var(--okd-dialog-footer-btn-full-sm-margin-top, 8px)
}

.okui-dialog-mobile-mode .okui-dialog-window {
    border-radius: 8px;
    border-radius: var(--okd-dialog-window-sm-border-radius, 8px)
}

.okui-dialog-mobile-mode .okui-dialog-window.full-page {
    height: auto !important;
    min-height: calc(100% - 48px) !important
}

.okui-dialog-mobile-mode .okui-dialog-window.full-page-with-show-header {
    height: auto !important
}

.okui-dialog-mobile-mode .okui-dialog-window.bottom-align {
    border-radius: var(--okd-dialog-window-border-radius) var(--okd-dialog-window-border-radius) 0 0;
    bottom: 0;
    top: auto;
    transform: translate(-50%)
}

.okui-dialog-mobile-mode .okui-dialog-window.no-margin {
    min-width: 0;
    min-width: auto;
    width: 100%
}

.okui-dialog-mobile-mode .okui-dialog-container.no-padding,
.okui-dialog-mobile-mode .okui-dialog-customer-box.no-padding {
    padding: 0
}

.okui-dialog-mobile-mode .okui-dialog-window {
    min-width: 0;
    min-width: auto;
    width: calc(100% - 32px)
}

.okui-dialog.okui-action-dialog .okui-dialog-window.no-radius {
    border-radius: 0
}

.okui-dialog-group {
    overflow: hidden
}

.okui-dialog-group-window {
    display: flex;
    flex-direction: column
}

.okui-dialog.okui-tip-dialog .okui-dialog-tip-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center
}

.okui-dialog.okui-tip-dialog .okui-dialog-tip-content .tip-title-box {
    width: 100%
}

.okui-dialog.okui-tip-dialog .okui-dialog-tip-content .tip-title {
    font-size: var(--okd-dialog-tip-title-font-size);
    font-weight: 500;
    line-height: var(--okd-dialog-tip-title-line-height);
    min-height: var(--okd-dialog-tip-title-line-height)
}

.okui-dialog.okui-tip-dialog .okui-dialog-tip-content .tip-detail {
    font-size: var(--okd-dialog-tip-detail-font-size);
    font-weight: 400;
    line-height: var(--okd-dialog-tip-detail-line-height);
    margin-top: 8px
}

.okui-dialog.okui-tip-dialog .okui-dialog-tip-content .tip-detail+.tip-detail {
    margin-top: 2px
}

.okui-dialog.okui-tip-dialog .okui-dialog-tip-content .tip-title {
    color: var(--okd-dialog-tip-title-color)
}

.okui-dialog.okui-tip-dialog .okui-dialog-tip-content .tip-detail {
    color: var(--okd-dialog-tip-detail-color)
}

.okui-dialog.okui-tip-dialog .okui-dialog-footer-box {
    border-top: none
}

@media (max-width:767px) {
    .okui-dialog.okui-tip-dialog .okui-dialog-window.bottom-align {
        border-radius: var(--okd-dialog-window-border-radius);
        bottom: 16px
    }
    .okui-dialog.okui-tip-dialog .okui-dialog-container {
        padding: var(--okd-dialog-tip-container-sm-padding-top, 20px) var(--okd-dialog-container-sm-padding-horizontal) var(--okd-dialog-tip-container-sm-padding-bottom, 24px)
    }
    .okui-dialog.okui-tip-dialog .okui-dialog-footer-box {
        padding: 0 var(--okd-dialog-container-sm-padding-horizontal) var(--okd-dialog-tip-footer-box-sm-padding-vertical) var(--okd-dialog-container-sm-padding-horizontal)
    }
}

@media (min-width:768px) {
    .okui-dialog.okui-tip-dialog .okui-dialog-tip-content {
        margin-left: auto;
        margin-right: auto;
        max-width: var(--okd-dialog-tip-window-min-width)
    }
    .okui-dialog.okui-tip-dialog .okui-dialog-tip-content.two-btn {
        max-width: var(--okd-dialog-tip-window-2btn-min-width)
    }
    .okui-dialog.okui-tip-dialog .okui-dialog-container {
        padding: var(--okd-dialog-tip-container-md-padding-top, 28px) var(--okd-dialog-container-sm-padding-horizontal) var(--okd-dialog-tip-container-md-padding-bottom, 24px)
    }
    .okui-dialog.okui-tip-dialog .okui-dialog-footer-box {
        padding: 0 var(--okd-dialog-container-md-padding-horizontal) var(--okd-dialog-tip-footer-box-md-padding-vertical) var(--okd-dialog-container-md-padding-horizontal)
    }
}

.okui-dialog-tip-icon-bg {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-bottom: 12px
}

.okui-dialog-tip-icon-bg .tip-icon {
    font-size: var(--okd-dialog-tip-icon-font-size)
}

.okui-dialog-alert-icon {
    margin-top: -6px
}

.okui-dialog .okui-dialog-window-tip {
    background-color: var(--okd-dialog-window-background);
    background-color: var(--okd-dialog-confirm-window-background, var(--okd-dialog-window-background))
}

.okui-dialog.okui-new-tip-dialog .okui-dialog-new-tip-top {
    padding: 24px 24px 0;
    padding: var(--okd-dialog-confirm-title-padding-top, 24px) var(--okd-dialog-confirm-title-padding-horizontal, 24px) var(--okd-dialog-confirm-title-padding-bottom, 0)
}

.okui-dialog.okui-new-tip-dialog .okui-dialog-container.okui-dialog-new-tip-container {
    color: #000;
    color: var(--okd-dialog-confirm-container-color, #000);
    font-size: 14px;
    font-size: var(--okd-dialog-confirm-container-font-size, 14px);
    line-height: 20px;
    line-height: var(--okd-dialog-confirm-container-line-height, 20px)
}

@media (min-width:768px) {
    .okui-dialog.okui-new-tip-dialog .okui-dialog-window {
        max-width: 520px;
        max-width: var(--okd-dialog-confirm-max-width, 520px);
        min-width: 280px;
        min-width: var(--okd-dialog-confirm-min-width, 280px)
    }
    .okui-dialog.okui-new-tip-dialog .okui-dialog-container.okui-dialog-new-tip-container {
        padding-bottom: 32px;
        padding-bottom: var(--okd-dialog-confirm-container-padding-bottom, 32px);
        padding-top: 32px;
        padding-top: var(--okd-dialog-confirm-container-padding-top, 32px)
    }
    .okui-dialog.okui-new-tip-dialog .okui-dialog-footer-box {
        padding-bottom: 24px;
        padding-bottom: var(--okd-dialog-confirm-footer-padding-bottom, 24px);
        padding-top: 0;
        padding-top: var(--okd-dialog-confirm-footer-padding-top, 0)
    }
}

@media (max-width:767px) {
    .okui-dialog.okui-new-tip-dialog .okui-dialog-window {
        width: calc(100% - 64px)
    }
    .okui-dialog.okui-new-tip-dialog .okui-dialog-container.okui-dialog-new-tip-container {
        padding: 8px 24px 24px;
        padding: var(--okd-dialog-confirm-container-sm-padding-top, 8px) var(--okd-dialog-confirm-container-sm-padding-horizontal, 24px) var(--okd-dialog-confirm-container-sm-padding-bottom, 24px)
    }
    .okui-dialog.okui-new-tip-dialog .okui-dialog-container.okui-dialog-no-title {
        padding-top: 24px;
        padding-top: var(--okd-dialog-confirm-no-title-padding-top, 24px)
    }
    .okui-dialog.okui-new-tip-dialog .okui-dialog-footer-box.okui-dialog-new-tip-footer {
        padding: 0
    }
    .okui-dialog.okui-new-tip-dialog .okui-dialog-footer-box.okui-dialog-new-tip-footer .okui-dialog-tip-button {
        border: 0;
        border-radius: 0;
        border-top: thin solid #dbdbdb;
        border-top: thin solid var(--okd-dialog-confirm-footer-sm-button-border-color, #dbdbdb)
    }
    .okui-dialog.okui-new-tip-dialog .okui-dialog-footer-box.okui-dialog-new-tip-footer .okui-dialog-tip-button-color {
        color: var(--okd-color-blue-800);
        color: var(--okd-dialog-confirm-footer-sm-button-color, var(--okd-color-blue-800))
    }
    .okui-dialog.okui-new-tip-dialog .okui-dialog-footer-box.okui-dialog-new-tip-footer .okui-dialog-tip-button-confirm {
        font-weight: 700
    }
    .okui-dialog.okui-new-tip-dialog .okui-dialog-footer-box.okui-dialog-new-tip-footer .okui-dialog-tip-button-cancel {
        font-weight: 400
    }
    .okui-dialog.okui-new-tip-dialog .okui-dialog-footer-box.okui-dialog-new-tip-footer .okui-dialog-tip-only-one {
        border-radius: 0 0 var(--okd-dialog-window-sm-border-radius) var(--okd-dialog-window-sm-border-radius)
    }
    .okui-dialog.okui-new-tip-dialog .okui-dialog-footer-box.okui-dialog-new-tip-footer .okui-dialog-tip-border-top:first-child {
        border-radius: 0 0 var(--okd-dialog-window-sm-border-radius) var(--okd-dialog-window-sm-border-radius);
        margin-top: 0
    }
    .okui-dialog.okui-new-tip-dialog .okui-dialog-footer-box.okui-dialog-new-tip-footer .okui-dialog-tip-border-left:first-child {
        border-radius: 0 0 0 var(--okd-dialog-window-sm-border-radius)
    }
    .okui-dialog.okui-new-tip-dialog .okui-dialog-footer-box.okui-dialog-new-tip-footer .okui-dialog-tip-border-left+.okui-dialog-tip-border-left {
        border-left: thin solid #dbdbdb;
        border-left: thin solid var(--okd-dialog-confirm-footer-sm-button-border-color, #dbdbdb);
        border-radius: 0 0 var(--okd-dialog-window-sm-border-radius) 0;
        margin-left: 0
    }
}

.okui-dialog-mobile-mode.okui-new-tip-dialog .okui-dialog-window {
    width: calc(100% - 64px)
}

.okui-dialog-mobile-mode.okui-new-tip-dialog .okui-dialog-container.okui-dialog-new-tip-container {
    padding: 8px 24px 24px;
    padding: var(--okd-dialog-confirm-container-sm-padding-top, 8px) var(--okd-dialog-confirm-container-sm-padding-horizontal, 24px) var(--okd-dialog-confirm-container-sm-padding-bottom, 24px)
}

.okui-dialog-mobile-mode.okui-new-tip-dialog .okui-dialog-container.okui-dialog-no-title {
    padding-top: 24px;
    padding-top: var(--okd-dialog-confirm-no-title-padding-top, 24px)
}

.okui-dialog-mobile-mode.okui-new-tip-dialog .okui-dialog-footer-box.okui-dialog-new-tip-footer {
    padding: 0
}

.okui-dialog-mobile-mode.okui-new-tip-dialog .okui-dialog-footer-box.okui-dialog-new-tip-footer .okui-dialog-tip-button {
    border: 0;
    border-radius: 0;
    border-top: thin solid #dbdbdb;
    border-top: thin solid var(--okd-dialog-confirm-footer-sm-button-border-color, #dbdbdb)
}

.okui-dialog-mobile-mode.okui-new-tip-dialog .okui-dialog-footer-box.okui-dialog-new-tip-footer .okui-dialog-tip-button-color {
    color: var(--okd-color-blue-800);
    color: var(--okd-dialog-confirm-footer-sm-button-color, var(--okd-color-blue-800))
}

.okui-dialog-mobile-mode.okui-new-tip-dialog .okui-dialog-footer-box.okui-dialog-new-tip-footer .okui-dialog-tip-button-confirm {
    font-weight: 700
}

.okui-dialog-mobile-mode.okui-new-tip-dialog .okui-dialog-footer-box.okui-dialog-new-tip-footer .okui-dialog-tip-button-cancel {
    font-weight: 400
}

.okui-dialog-mobile-mode.okui-new-tip-dialog .okui-dialog-footer-box.okui-dialog-new-tip-footer .okui-dialog-tip-only-one {
    border-radius: 0 0 var(--okd-dialog-window-sm-border-radius) var(--okd-dialog-window-sm-border-radius)
}

.okui-dialog-mobile-mode.okui-new-tip-dialog .okui-dialog-footer-box.okui-dialog-new-tip-footer .okui-dialog-tip-border-top:first-child {
    border-radius: 0 0 var(--okd-dialog-window-sm-border-radius) var(--okd-dialog-window-sm-border-radius);
    margin-top: 0
}

.okui-dialog-mobile-mode.okui-new-tip-dialog .okui-dialog-footer-box.okui-dialog-new-tip-footer .okui-dialog-tip-border-left:first-child {
    border-radius: 0 0 0 var(--okd-dialog-window-sm-border-radius)
}

.okui-dialog-mobile-mode.okui-new-tip-dialog .okui-dialog-footer-box.okui-dialog-new-tip-footer .okui-dialog-tip-border-left+.okui-dialog-tip-border-left {
    border-left: thin solid #dbdbdb;
    border-left: thin solid var(--okd-dialog-confirm-footer-sm-button-border-color, #dbdbdb);
    border-radius: 0 0 var(--okd-dialog-window-sm-border-radius) 0;
    margin-left: 0
}

.iconfont.okui-dialog-tip-icon {
    align-self: flex-start;
    font-size: 22px;
    font-size: var(--okd-dialog-confirm-icon-font-size, 22px);
    font-weight: 400;
    line-height: 22px;
    line-height: var(--okd-dialog-confirm-icon-line-height, 22px);
    margin-right: 10px;
    margin-right: var(--okd-dialog-confirm-icon-margin-right, 10px)
}

.okui-dialog-success-icon,
.okui-dialog-success-tip-icon {
    color: var(--okd-dialog-tip-success-icon-color)
}

.okui-dialog-info-icon,
.okui-dialog-info-tip-icon {
    color: var(--okd-dialog-tip-info-icon-color)
}

.okui-dialog-prompt-icon,
.okui-dialog-prompt-tip-icon {
    color: var(--okd-dialog-tip-prompt-icon-color)
}

.okui-dialog-warn-icon,
.okui-dialog-warn-tip-icon {
    color: var(--okd-dialog-tip-warn-icon-color)
}

.okui-dialog-alert-icon,
.okui-dialog-alert-tip-icon {
    color: var(--okd-dialog-tip-alert-icon-color)
}

.okui-dialog-error-icon,
.okui-dialog-error-tip-icon {
    color: var(--okd-dialog-tip-error-icon-color)
}

.okui-dialog .okui-dialog-confirmation-window {
    background-color: var(--okd-dialog-window-background);
    background-color: var(--okd-dialog-confirmation-window-background, var(--okd-dialog-window-background))
}

.okui-dialog-confirmation {
    --inner-okd-dialog-close-btn-padding: 22px
}

.okui-dialog-confirmation-header {
    font-size: 16px;
    font-size: var(--okd-dialog-title-font-size, 16px);
    font-weight: 700;
    font-weight: var(--okd-dialog-title-font-weight, 700);
    line-height: var(--okd-dialog-title-line-height);
    padding: 24px;
    padding: var(--okd-dialog-confirmation-header-padding-top, 24px) var(--okd-dialog-confirmation-padding-right, 24px) var(--okd-dialog-confirmation-header-padding-top, 24px) var(--okd-dialog-confirmation-padding-left, 24px)
}

.okui-dialog-confirmation-header-margin {
    margin-right: 36px
}

.okui-dialog-confirmation-container {
    flex-grow: 1;
    line-height: 22px;
    overflow-y: auto;
    padding-bottom: 8px;
    padding-left: 24px;
    padding-left: var(--okd-dialog-confirmation-padding-left, 24px);
    padding-right: 24px;
    padding-right: var(--okd-dialog-confirmation-padding-right, 24px);
    padding-top: 8px
}

.okui-dialog-confirmation-container-no-header {
    padding-top: 32px;
    padding-top: var(--okd-dialog-confirmation-container-padding-top, 32px)
}

.okui-dialog-confirmation-container-no-footer {
    padding-bottom: 32px;
    padding-bottom: var(--okd-dialog-confirmation-container-padding-bottom, 32px)
}

.okui-dialog-confirmation-footer {
    padding: 24px;
    padding: var(--okd-dialog-confirmation-footer-padding-bottom, 24px) var(--okd-dialog-confirmation-padding-right, 24px) var(--okd-dialog-confirmation-footer-padding-bottom, 24px) var(--okd-dialog-confirmation-padding-left, 24px)
}

.okui-btn .btn-content {
    align-items: center;
    display: flex
}

.okui-btn .okui-btn-ellipsis {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.loading .btn-content {
    opacity: 0
}

.okui-btn.loading .btn-content-position {
    display: none
}

.okui-btn.loading .okui-btn-loader {
    line-height: 0;
    position: absolute
}

.okui-btn.loading .btn-loader-position-absolute {
    position: relative
}

.okui-btn-loader-container {
    height: 100%;
    position: relative
}

.okui-btn .btn-icon+.btn-content {
    margin-left: 4px
}

.okui-btn.btn-xxs .btn-icon {
    font-size: var(--okd-button-xxs-icon-size)
}

.okui-btn.btn-xxs .btn-icon-leading {
    margin-right: var(--okd-button-xxs-icon-margin)
}

.okui-btn.btn-xxs .btn-icon-tailing {
    margin-left: var(--okd-button-xxs-icon-margin)
}

.okui-btn.btn-xxs .okui-btn-loader-size {
    border-radius: var(--okd-button-xxs-loader-size);
    height: var(--okd-button-xxs-loader-size);
    width: var(--okd-button-xxs-loader-size)
}

.okui-btn.btn-xs .btn-icon {
    font-size: var(--okd-button-xs-icon-size)
}

.okui-btn.btn-xs .btn-icon-leading {
    margin-right: var(--okd-button-xs-icon-margin)
}

.okui-btn.btn-xs .btn-icon-tailing {
    margin-left: var(--okd-button-xs-icon-margin)
}

.okui-btn.btn-xs .okui-btn-loader-size {
    border-radius: var(--okd-button-xs-loader-size);
    height: var(--okd-button-xs-loader-size);
    width: var(--okd-button-xs-loader-size)
}

.okui-btn.btn-s .btn-icon {
    font-size: var(--okd-button-s-icon-size)
}

.okui-btn.btn-s .btn-icon-leading {
    margin-right: var(--okd-button-s-icon-margin)
}

.okui-btn.btn-s .btn-icon-tailing {
    margin-left: var(--okd-button-s-icon-margin)
}

.okui-btn.btn-s .okui-btn-loader-size {
    border-radius: var(--okd-button-s-loader-size);
    height: var(--okd-button-s-loader-size);
    width: var(--okd-button-s-loader-size)
}

.okui-btn.btn-sm .btn-icon {
    font-size: var(--okd-button-sm-icon-size)
}

.okui-btn.btn-sm .btn-icon-leading {
    margin-right: var(--okd-button-sm-icon-margin)
}

.okui-btn.btn-sm .btn-icon-tailing {
    margin-left: var(--okd-button-sm-icon-margin)
}

.okui-btn.btn-sm .okui-btn-loader-size {
    border-radius: var(--okd-button-sm-loader-size);
    height: var(--okd-button-sm-loader-size);
    width: var(--okd-button-sm-loader-size)
}

.okui-btn.btn-md .btn-icon {
    font-size: var(--okd-button-md-icon-size)
}

.okui-btn.btn-md .btn-icon-leading {
    margin-right: var(--okd-button-md-icon-margin)
}

.okui-btn.btn-md .btn-icon-tailing {
    margin-left: var(--okd-button-md-icon-margin)
}

.okui-btn.btn-md .okui-btn-loader-size {
    border-radius: var(--okd-button-md-loader-size);
    height: var(--okd-button-md-loader-size);
    width: var(--okd-button-md-loader-size)
}

.okui-btn.btn-lg .btn-icon {
    font-size: var(--okd-button-lg-icon-size)
}

.okui-btn.btn-lg .btn-icon-leading {
    margin-right: var(--okd-button-lg-icon-margin)
}

.okui-btn.btn-lg .btn-icon-tailing {
    margin-left: var(--okd-button-lg-icon-margin)
}

.okui-btn.btn-lg .okui-btn-loader-size {
    border-radius: var(--okd-button-lg-loader-size);
    height: var(--okd-button-lg-loader-size);
    width: var(--okd-button-lg-loader-size)
}

.okui-btn.btn-xl .btn-icon {
    font-size: var(--okd-button-xl-icon-size)
}

.okui-btn.btn-xl .btn-icon-leading {
    margin-right: var(--okd-button-xl-icon-margin)
}

.okui-btn.btn-xl .btn-icon-tailing {
    margin-left: var(--okd-button-xl-icon-margin)
}

.okui-btn.btn-xl .okui-btn-loader-size {
    border-radius: var(--okd-button-xl-loader-size);
    height: var(--okd-button-xl-loader-size);
    width: var(--okd-button-xl-loader-size)
}

.okui-btn .okui-btn-fill-highlight-loader {
    border-color: var(--okd-button-fill-highlight-loader-track-color);
    border-top-color: var(--okd-button-fill-highlight-loader-mark-color)
}

.okui-btn {
    -webkit-tap-highlight-color: transparent;
    align-items: center;
    -webkit-appearance: none;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-weight: 500;
    justify-content: center;
    outline: none;
    position: relative;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.okui-btn:focus-visible {
    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-btn.btn-fill-highlight {
    background: var(--okd-button-fill-highlight-default-background);
    border-color: var(--okd-button-fill-highlight-default-border-color);
    border-style: solid;
    border-width: var(--okd-button-fill-highlight-border-size);
    box-shadow: var(--okd-button-fill-highlight-default-shadow);
    color: var(--okd-button-fill-highlight-default-font-color)
}

.okui-btn.btn-fill-highlight.hover,
.okui-btn.btn-fill-highlight:not(:disabled):not(.btn-disabled):not(.mobile):hover {
    background: var(--okd-button-fill-highlight-hover-background);
    border-color: var(--okd-button-fill-highlight-hover-border-color);
    box-shadow: var(--okd-button-fill-highlight-hover-shadow);
    color: var(--okd-button-fill-highlight-hover-font-color)
}

.okui-btn.btn-fill-highlight.hover .btn-icon,
.okui-btn.btn-fill-highlight:not(:disabled):not(.btn-disabled):not(.mobile):hover .btn-icon {
    color: var(--okd-button-fill-highlight-hover-icon-color)
}

.okui-btn.btn-fill-highlight.active,
.okui-btn.btn-fill-highlight:not(:disabled):active {
    background: var(--okd-button-fill-highlight-active-background);
    border-color: var(--okd-button-fill-highlight-active-border-color);
    box-shadow: var(--okd-button-fill-highlight-active-shadow);
    color: var(--okd-button-fill-highlight-active-font-color)
}

.okui-btn.btn-fill-highlight.active .btn-icon,
.okui-btn.btn-fill-highlight:not(:disabled):active .btn-icon {
    color: var(--okd-button-fill-highlight-active-icon-color)
}

.okui-btn.btn-fill-highlight:not(.loading).btn-disabled,
.okui-btn.btn-fill-highlight:not(.loading):disabled {
    background: var(--okd-button-fill-highlight-disabled-background);
    border-color: var(--okd-button-fill-highlight-disabled-border-color);
    box-shadow: var(--okd-button-fill-highlight-disabled-shadow);
    color: var(--okd-button-fill-highlight-disabled-font-color)
}

.okui-btn.btn-fill-highlight:not(.loading).btn-disabled .btn-icon,
.okui-btn.btn-fill-highlight:not(.loading):disabled .btn-icon {
    color: var(--okd-button-fill-highlight-disabled-icon-color)
}

.okui-btn.btn-fill-highlight.loading {
    cursor: pointer
}

.okui-btn.btn-fill-highlight .btn-icon {
    color: var(--okd-button-fill-highlight-default-icon-color)
}

.okui-btn.btn-fill-highlight .okui-btn-loader-text {
    color: var(--okd-button-fill-highlight-default-font-color)
}

.okui-btn.btn-fill-highlight.btn-xxs {
    padding: calc(var(--okd-button-xxs-padding-vertical) + 1px - var(--okd-button-fill-highlight-border-size)) var(--okd-button-xxs-padding-horizontal)
}

.okui-btn.btn-fill-highlight.btn-xxs.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xxs-padding-vertical)*2 + 2px - var(--okd-button-fill-highlight-border-size)*2 + var(--okd-button-xxs-line-height) + var(--okd-button-fill-highlight-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xxs-padding-vertical)*2 + 2px - var(--okd-button-fill-highlight-border-size)*2 + var(--okd-button-xxs-line-height) + var(--okd-button-fill-highlight-border-size)*2)
}

.okui-btn.btn-fill-highlight.btn-xxs.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-highlight.btn-xs {
    padding: calc(var(--okd-button-xs-padding-vertical) + 1px - var(--okd-button-fill-highlight-border-size)) var(--okd-button-xs-padding-horizontal)
}

.okui-btn.btn-fill-highlight.btn-xs.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xs-padding-vertical)*2 + 2px - var(--okd-button-fill-highlight-border-size)*2 + var(--okd-button-xs-line-height) + var(--okd-button-fill-highlight-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xs-padding-vertical)*2 + 2px - var(--okd-button-fill-highlight-border-size)*2 + var(--okd-button-xs-line-height) + var(--okd-button-fill-highlight-border-size)*2)
}

.okui-btn.btn-fill-highlight.btn-xs.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-highlight.btn-s {
    padding: calc(var(--okd-button-s-padding-vertical) + 1px - var(--okd-button-fill-highlight-border-size)) var(--okd-button-s-padding-horizontal)
}

.okui-btn.btn-fill-highlight.btn-s.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-s-padding-vertical)*2 + 2px - var(--okd-button-fill-highlight-border-size)*2 + var(--okd-button-s-line-height) + var(--okd-button-fill-highlight-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-s-padding-vertical)*2 + 2px - var(--okd-button-fill-highlight-border-size)*2 + var(--okd-button-s-line-height) + var(--okd-button-fill-highlight-border-size)*2)
}

.okui-btn.btn-fill-highlight.btn-s.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-highlight.btn-sm {
    padding: calc(var(--okd-button-sm-padding-vertical) + 1px - var(--okd-button-fill-highlight-border-size)) var(--okd-button-sm-padding-horizontal)
}

.okui-btn.btn-fill-highlight.btn-sm.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-sm-padding-vertical)*2 + 2px - var(--okd-button-fill-highlight-border-size)*2 + var(--okd-button-sm-line-height) + var(--okd-button-fill-highlight-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-sm-padding-vertical)*2 + 2px - var(--okd-button-fill-highlight-border-size)*2 + var(--okd-button-sm-line-height) + var(--okd-button-fill-highlight-border-size)*2)
}

.okui-btn.btn-fill-highlight.btn-sm.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-highlight.btn-md {
    padding: calc(var(--okd-button-md-padding-vertical) + 1px - var(--okd-button-fill-highlight-border-size)) var(--okd-button-md-padding-horizontal)
}

.okui-btn.btn-fill-highlight.btn-md.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-md-padding-vertical)*2 + 2px - var(--okd-button-fill-highlight-border-size)*2 + var(--okd-button-md-line-height) + var(--okd-button-fill-highlight-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-md-padding-vertical)*2 + 2px - var(--okd-button-fill-highlight-border-size)*2 + var(--okd-button-md-line-height) + var(--okd-button-fill-highlight-border-size)*2)
}

.okui-btn.btn-fill-highlight.btn-md.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-highlight.btn-lg {
    padding: calc(var(--okd-button-lg-padding-vertical) + 1px - var(--okd-button-fill-highlight-border-size)) var(--okd-button-lg-padding-horizontal)
}

.okui-btn.btn-fill-highlight.btn-lg.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-lg-padding-vertical)*2 + 2px - var(--okd-button-fill-highlight-border-size)*2 + var(--okd-button-lg-line-height) + var(--okd-button-fill-highlight-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-lg-padding-vertical)*2 + 2px - var(--okd-button-fill-highlight-border-size)*2 + var(--okd-button-lg-line-height) + var(--okd-button-fill-highlight-border-size)*2)
}

.okui-btn.btn-fill-highlight.btn-lg.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-highlight.btn-xl {
    padding: calc(var(--okd-button-xl-padding-vertical) + 1px - var(--okd-button-fill-highlight-border-size)) var(--okd-button-xl-padding-horizontal)
}

.okui-btn.btn-fill-highlight.btn-xl.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xl-padding-vertical)*2 + 2px - var(--okd-button-fill-highlight-border-size)*2 + var(--okd-button-xl-line-height) + var(--okd-button-fill-highlight-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xl-padding-vertical)*2 + 2px - var(--okd-button-fill-highlight-border-size)*2 + var(--okd-button-xl-line-height) + var(--okd-button-fill-highlight-border-size)*2)
}

.okui-btn.btn-fill-highlight.btn-xl.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-xxs {
    border-radius: var(--okd-button-xxs-border-radius);
    font-weight: 500;
    font-weight: var(--okd-button-xxs-font-weight, 500);
    min-width: var(--okd-button-xxs-min-width)
}

.okui-btn.btn-xxs,
.okui-btn.btn-xxs .okui-btn-loader-text {
    font-size: var(--okd-button-xxs-font-size);
    line-height: var(--okd-button-xxs-line-height)
}

.okui-btn.btn-xxs .okui-btn-loader-text {
    margin-left: var(--okd-button-xxs-loader-text-margin-left)
}

.okui-btn.btn-xxs.btn-rect {
    border-radius: 4px;
    border-radius: var(--okd-button-rect-xxs-border-radius, 4px)
}

.okui-btn.btn-xs {
    border-radius: var(--okd-button-xs-border-radius);
    font-weight: 500;
    font-weight: var(--okd-button-xs-font-weight, 500);
    min-width: var(--okd-button-xs-min-width)
}

.okui-btn.btn-xs,
.okui-btn.btn-xs .okui-btn-loader-text {
    font-size: var(--okd-button-xs-font-size);
    line-height: var(--okd-button-xs-line-height)
}

.okui-btn.btn-xs .okui-btn-loader-text {
    margin-left: var(--okd-button-xs-loader-text-margin-left)
}

.okui-btn.btn-xs.btn-rect {
    border-radius: 4px;
    border-radius: var(--okd-button-rect-xs-border-radius, 4px)
}

.okui-btn.btn-s {
    border-radius: var(--okd-button-s-border-radius);
    font-weight: 500;
    font-weight: var(--okd-button-s-font-weight, 500);
    min-width: var(--okd-button-s-min-width)
}

.okui-btn.btn-s,
.okui-btn.btn-s .okui-btn-loader-text {
    font-size: var(--okd-button-s-font-size);
    line-height: var(--okd-button-s-line-height)
}

.okui-btn.btn-s .okui-btn-loader-text {
    margin-left: var(--okd-button-s-loader-text-margin-left)
}

.okui-btn.btn-s.btn-rect {
    border-radius: 4px;
    border-radius: var(--okd-button-rect-s-border-radius, 4px)
}

.okui-btn.btn-sm {
    border-radius: var(--okd-button-sm-border-radius);
    font-weight: 500;
    font-weight: var(--okd-button-sm-font-weight, 500);
    min-width: var(--okd-button-sm-min-width)
}

.okui-btn.btn-sm,
.okui-btn.btn-sm .okui-btn-loader-text {
    font-size: var(--okd-button-sm-font-size);
    line-height: var(--okd-button-sm-line-height)
}

.okui-btn.btn-sm .okui-btn-loader-text {
    margin-left: var(--okd-button-sm-loader-text-margin-left)
}

.okui-btn.btn-sm.btn-rect {
    border-radius: 4px;
    border-radius: var(--okd-button-rect-sm-border-radius, 4px)
}

.okui-btn.btn-md {
    border-radius: var(--okd-button-md-border-radius);
    font-weight: 500;
    font-weight: var(--okd-button-md-font-weight, 500);
    min-width: var(--okd-button-md-min-width)
}

.okui-btn.btn-md,
.okui-btn.btn-md .okui-btn-loader-text {
    font-size: var(--okd-button-md-font-size);
    line-height: var(--okd-button-md-line-height)
}

.okui-btn.btn-md .okui-btn-loader-text {
    margin-left: var(--okd-button-md-loader-text-margin-left)
}

.okui-btn.btn-md.btn-rect {
    border-radius: 4px;
    border-radius: var(--okd-button-rect-md-border-radius, 4px)
}

.okui-btn.btn-lg {
    border-radius: var(--okd-button-lg-border-radius);
    font-weight: 500;
    font-weight: var(--okd-button-lg-font-weight, 500);
    min-width: var(--okd-button-lg-min-width)
}

.okui-btn.btn-lg,
.okui-btn.btn-lg .okui-btn-loader-text {
    font-size: var(--okd-button-lg-font-size);
    line-height: var(--okd-button-lg-line-height)
}

.okui-btn.btn-lg .okui-btn-loader-text {
    margin-left: var(--okd-button-lg-loader-text-margin-left)
}

.okui-btn.btn-lg.btn-rect {
    border-radius: 8px;
    border-radius: var(--okd-button-rect-lg-border-radius, 8px)
}

.okui-btn.btn-xl {
    border-radius: var(--okd-button-xl-border-radius);
    font-weight: 500;
    font-weight: var(--okd-button-xl-font-weight, 500);
    min-width: var(--okd-button-xl-min-width)
}

.okui-btn.btn-xl,
.okui-btn.btn-xl .okui-btn-loader-text {
    font-size: var(--okd-button-xl-font-size);
    line-height: var(--okd-button-xl-line-height)
}

.okui-btn.btn-xl .okui-btn-loader-text {
    margin-left: var(--okd-button-xl-loader-text-margin-left)
}

.okui-btn.btn-xl.btn-rect {
    border-radius: 8px;
    border-radius: var(--okd-button-rect-xl-border-radius, 8px)
}

.okui-btn.btn-disabled,
.okui-btn:disabled {
    cursor: not-allowed
}

.okui-btn.block {
    display: flex;
    width: 100%
}

.okui-btn.btn-circle {
    border-radius: 100px !important
}