aio-input/index.css

generate all input types in react j

:root {
    --aio-input-color: #0069ff;
    --aio-input-transition: 0.3s;
}
.aio-input {
    display: flex;
    position: relative;
    align-items: center;
    box-sizing: border-box;
    background: none;
    color: inherit;
    flex-shrink: 0;
    background: #fff;
    gap: 0.4em;
    font-size: inherit;
}
.ai-height{
    height:3em;
}
.ai-border-radius-md{
    border-radius:0.3em;
}
.ai-border-radius-sm{
    border-radius:0.4em;
}
.ai-padding-md{
    padding:0.8em;
}
.ai-padding-sm{
    padding:0.4em;
}
.ai-padding-h{
    padding-top:0;
    padding-bottom:0
}
.aio-input input {
    font-family: inherit;
    font-size: inherit;
}

.aio-input input,
.aio-input textarea {
    font-weight: inherit;
}

.aio-input-rtl {
    direction: rtl;
}

.aio-input-popover {
    font-size: inherit;
    background: #fff;
    background: #ddd;
}

.aio-input-popover .aio-popup-body {
    padding: 0;
}

.aio-input-popover-rtl {
    direction: rtl;
}

.aio-input-value {
    display: flex;
    width: 100%;
    position: relative;
    overflow: hidden;
    flex-direction: column;
}
.aio-input-range-value {
    overflow: visible;
}

.aio-input-subtext {
    display: flex;
    flex: 1;
    font-size: 85%;
    opacity: 0.7;
    align-items: center;
}

.aio-input-before {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    position: relative;
    height:100%;
}
.aio-input-file-option .aio-input-before{
    overflow: hidden;
}

.aio-input-after {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    white-space: nowrap;
    gap: 0.4em;
}

.aio-input-color .aio-input-after {
    padding-inline-end: .8em;
}

.aio-input-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.aio-input-caret {
    display: flex;
}

.aio-input-voice {
    display: flex;
    width: 2em;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.aio-input-popup-container {
    position: fixed;
    z-index: 1000000000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.aio-input-placeholder {
    opacity: 0.5;
}



.aio-input-options {
    display: flex;
    flex: 1;
    width: 100%;    
}
.aio-input-tag-options{
    gap:0.2em;
    border:1px solid #ddd;
    border-top:none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.aio-input-tabs-options,
.aio-input-buttons-options {
    flex-direction: row;
}
.aio-input-select-options {
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    outline: none;
    max-height: 300px;
}
.aio-input-options-wrap {
    flex-wrap: wrap;
}

.aio-input-options-nowrap {
    flex-wrap: nowrap;
    overflow-x:auto;
    overflow-y: hidden;
    display:flex;
    flex-direction:row;
}
.aio-input-options-nowrap.aio-input-select-options{
    overflow:hidden;
    flex-wrap:wrap;
}
.aio-input-options-wrap.aio-input-select-options{
    flex-wrap:unset;
}




.aio-input-buttons-options {
    gap: 0.4em;
}

.aio-input-text-options {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    outline: none;
}

.aio-input-list-options {
    position: absolute;
    left: 0;
    width:100%;
}
.aio-input-option {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    background: none;
    color: inherit;
    cursor: pointer;
    flex-shrink: 0;
    gap: 0.4em;
    user-select: none;
}
.aio-input-toggleButton-option{
    width:100%;
    border:1px solid #ddd;
    font-size:inherit;
}

.aio-input-tabs-option {
    justify-content: center;
    overflow: hidden;
    margin: 0 .8em;
    height: 100%;
    background: none;
    position: relative;
}

.aio-input-tabs-option-bar {
    content: '';
    position: absolute;
    top: calc(100% - 2px);
    width: 0%;
    height: 0;
    border-bottom: 2px solid;
}


.aio-input-buttons-option {
    border: 1px solid #ddd;
    justify-content: center;
}

.aio-input-buttons-option.active {
    color: #fff;
}
.aio-input-toggleButton-option.active {
    color: #fff;
}

.aio-input-tabs-option.active .aio-input-tabs-option-bar {
    width: 100%;
    transition: var(--aio-input-transition);
}

.aio-input-list-option {
    justify-content: center;
    align-items: center;
    padding: 0 .8em;
    position: relative;
    width:100%;
}

.aio-input-list-option.active {
    opacity: 1;
    transform: unset;
    font-weight: bold;
}

.aio-input.disabled .aio-input-option {
    cursor: not-allowed;
    opacity: 0.5;
}

.aio-input-option.disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.aio-input-dropdown-options {
    background:#fff;
}
.aio-input-dropdown-option {
    border-bottom: 1px solid #eee;
}

.aio-input-dropdown-option:last-child {
    border-bottom: none;
}

.aio-input-panels-option {
    align-items: center;
    height: 4em;
    box-sizing: border-box;
    box-shadow: 2px 2px 5px 0px rgb(0 0 0 / 24%);
    position: relative;
    transition: border-radius var(--aio-input-transition);
    background: var(--aio-input-color);
    color: #fff;
    z-index: 10;
}

.aio-input-panels-option.active {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    transition: border-radius var(--aio-input-transition);
}


.aio-input-search {
    background: #f8f8f8;
    box-sizing: border-box;
    top: 0;
    position: sticky;
    width: 100%;
    border-radius: 0;
    display: flex;
    border: none !important;
    box-shadow: none;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.aio-input-search input {
    outline: 0;
    height: 100%;
    border: none;
    color: inherit;
    background: none;
    width: 100%;
    font-size: inherit;
}

.aio-input-search-icon {
    width: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    color: inherit;
    height: 36px;
}

.aio-input-files {
    border: 1px solid #ddd;
    box-sizing: border-box;
    font-size: inherit;
}

.aio-input-file-item {
    display: flex;
    padding: 0 .8em;
    height: 36px;
    box-sizing: border-box;
    align-items: center;
    border-bottom: 1px solid #ddd;
}

.aio-input-file-item-name {
    flex: 1;
    font-size: 90%;
}

.aio-input-file-item-icon {
    height: 100%;
    overflow:hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.aio-input-file-item-icon img{
    object-fit: contain;
    height: 100%;
}

.aio-input-check-out {
    color: #0069ff;
    border: 0.1em solid;
    width: 1.2em;
    height: 1.2em;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    padding: 0.14em;
}

.aio-input-check-out.round {
    border-radius: 100%;
}


.aio-input-check-in {
    transition: .2s;
    width: 0;
    height: 0;
    opacity: 0;
    border-radius: inherit;
    background: inherit;
    background: #0069ff;
}

.aio-input-check-out.checked .aio-input-check-in {
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: .2s;
}

.aio-input-check-round {
    border-radius: 100%;
}

.aio-input-check-round .aio-input-check-in {
    border-radius: 100%;
}

.aio-input-multiselect-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}

.aio-input-tag {
    color: #fff;
    width: fit-content;
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
    cursor: pointer;
    background: #0069ff;
    flex-shrink: 0;
    gap: 0.4em;
    font-size:0.9em;
}
.aio-input-tag-icon {
    min-width: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: inherit;
    position: relative;
}

.aio-input-tag-text {
    flex: 1;
    overflow: hidden;
}


.aio-input-tabs {
    padding-bottom: 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
    width: 100%;
    border: none;
    font-size: inherit;
}

.aio-input-tabs-content,
.aio-input-buttons-content {
    overflow: hidden;
}

.aio-input-buttons {
    width: 100%;
}

.aio-input-tabs.aio-input-touch ::-webkit-scrollbar {
    width: 0px !important;
    height: 0px !important;
}

.aio-input-color {
    padding: 0;
}

.aio-input-color input[type=color] {
    min-width: 24px;
}

.aio-input-radio {
    height: unset;
}
.aio-input-text,
.aio-input-password,
.aio-input-number,
.aio-input-multiselect,
.aio-input-select,
.aio-input-date,
.aio-input-time,
.aio-input-file {
    border: 1px solid #ddd;
}
.aio-input-checkbox{
    width:fit-content;
}
.aio-input-scanner {
    padding-inline-end: 0 !important;
}

.aio-input-password-preview {
    display: flex;
    align-items: center;
    justify-content: center;
}

.aio-input-textarea {
    min-height: 72px;
    border: 1px solid #ddd;
}

.aio-input-textarea textarea {
    font-family: inherit;
    border: none;
    width: 100%;
    background: none;
    outline: none;
    width: 100%;
    color: inherit;
    box-sizing: border-box;
}

.aio-input-textarea-value {
    height: 100%;
}

.aio-input-text-value,
.aio-input-number-value {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.aio-input-text input,
.aio-input-number input,
.aio-input-password input {
    border: none;
    width: 100%;
    background: none;
    outline: none;
    height: 100%;
    color: inherit;
}

.aio-input-password input {
    text-align: center;
}

.aio-input-text-subtext,
.aio-input-password-subtext,
.aio-input-number-subtext,
.aio-input-textarea-subtext {
    top: 100%;
}



.aio-input-color input {
    width: 100%;
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.aio-input-color img {
    display: none;
}

.aio-input-color input::-webkit-color-swatch {
    border: none;
    padding: 0;
}

/* custom scrollbar */
.aio-input-scroll::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

.aio-input-scroll::-webkit-scrollbar-track {
    background-color: transparent;
}

.aio-input-scroll::-webkit-scrollbar-thumb {
    background-color: #b1b9ca;
    border-radius: 20px;
    border: 1px solid transparent;
    background-clip: content-box;
}

.aio-input-scroll::-webkit-scrollbar-thumb:hover {
    background-color: #6f7888;
}
.aio-input-options-placeholder{
    min-height:4em;
    display:flex;
    align-items: center;
    justify-content: center;
    font-size:0.8em;
}
.ai-style-1 {
    border: 1px solid #ccc;
    background: linear-gradient(to bottom, #fff, #ededed);
    border-radius: .4em;
    box-shadow: 1px 2px 7px 0 #8b8b8b59;
}

.ai-style-1:hover {
    border: 1px solid cornflowerblue;
}

.ai-style-2 {
    align-items: center;
    appearance: none;
    background-color: #3EB2FD;
    background-image: linear-gradient(1deg, #4F58FD, #149BF3 99%);
    background-size: calc(100% + 20px) calc(100% + 20px);
    border-radius: 100px;
    border-width: 0;
    box-shadow: none;
    box-sizing: border-box;
    width: 100%;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-flex;
    font-family: CircularStd, sans-serif inherit;
    font-size: 1em;
    height: auto;
    justify-content: center;
    line-height: 1.5;
    padding: 6px 20px;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: background-color .2s, background-position .2s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: top;
    white-space: nowrap;
}

.ai-style-2:active,
.ai-style-2:focus {
    outline: none;
}

.ai-style-2:hover {
    background-position: -20px -20px;
}

.ai-style-2:focus:not(:active) {
    box-shadow: rgba(40, 170, 255, 0.25) 0 0 0 .125em;
}

.ai-style-3 {
    align-items: center;
    appearance: none;
    background-image: radial-gradient(100% 100% at 100% 0, #5adaff 0, #5468ff 100%);
    border: 0;
    border-radius: .4em;
    box-shadow: rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, rgba(58, 65, 111, .5) 0 -3px 0 inset;
    box-sizing: border-box;
    color: #fff;
    width: 100%;
    cursor: pointer;
    display: inline-flex;
    font-family: "JetBrains Mono", monospace;
    height: 48px;
    justify-content: center;
    line-height: 1;
    list-style: none;
    overflow: hidden;
    padding-left: 16px;
    padding-right: 16px;
    position: relative;
    text-align: left;
    text-decoration: none;
    transition: box-shadow .15s, transform .15s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
    will-change: box-shadow, transform;
    font-size: 18px;
}

.ai-style-3:focus {
    box-shadow: #3c4fe0 0 0 0 1.5px inset, rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
}

.ai-style-3:hover {
    box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
    transform: translateY(-2px);
}

.ai-style-3:active {
    box-shadow: #3c4fe0 0 3px 7px inset;
    transform: translateY(2px);
}

.ai-style-4 {
    background-image: linear-gradient(#0dccea, #0d70ea);
    border: 0;
    border-radius: .4em;
    box-shadow: rgba(0, 0, 0, .3) 0 5px 15px;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    font-family: Montserrat, sans-serif;
    font-size: .9em;
    margin: 5px;
    padding: 10px 15px;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.ai-style-5 {
    appearance: button;
    background-color: transparent;
    background-image: linear-gradient(to bottom, #fff, #f8eedb);
    border: 0 solid #e5e7eb;
    border-radius: .4em;
    box-sizing: border-box;
    color: #482307;
    column-gap: 1em;
    cursor: pointer;
    display: flex;
    font-family: ui-sans-serif, system-ui, -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 100%;
    font-weight: 700;
    line-height: 24px;
    margin: 0;
    outline: 2px solid transparent;
    padding: 1em 1.5em;
    text-align: center;
    text-transform: none;
    transition: all .1s cubic-bezier(.4, 0, .2, 1);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    box-shadow: -6px 8px 10px rgba(81, 41, 10, 0.1), 0px 2px 2px rgba(81, 41, 10, 0.2);
}

.ai-style-5:active {
    background-color: #f3f4f6;
    box-shadow: -1px 2px 5px rgba(81, 41, 10, 0.15), 0px 1px 1px rgba(81, 41, 10, 0.15);
    transform: translateY(0.125rem);
}

.ai-style-5:focus {
    box-shadow: rgba(72, 35, 7, .46) 0 0 0 4px, -6px 8px 10px rgba(81, 41, 10, 0.1), 0px 2px 2px rgba(81, 41, 10, 0.2);
}

.ai-style-6 {
    background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
    border-radius: .4em;
    border-style: none;
    box-sizing: border-box;
    color: #FFFFFF;
    cursor: pointer;
    flex-shrink: 0;
    font-family: "Inter UI", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    font-size: 16px;
    font-weight: 500;
    height: 4rem;
    padding: 0 1.6rem;
    text-align: center;
    text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
    transition: all .5s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.ai-style-6:hover {
    box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
    transition-duration: .1s;
}

@media (min-width: 768px) {
    .ai-style-6 {
        padding: 0 2.6rem;
    }
}

.aio-input-deSelect {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
}

.aio-input-list {
    border: 1px solid #ddd;
    position: relative;
    overflow: hidden;
    user-select: none;
}


.aio-input-primary-button {
    background: #0069ff;
    color: #fff;
    border: none;
    font-family: inherit;
    font-size: inherit;
    padding: 0 0.8em;
    height: 2em;
    border: 2px solid #0069ff;
    border-radius:0.2em;
    cursor:pointer;
}
.aio-input-primary-button:disabled {
    cursor:not-allowed;
    opacity:0.6;
    color:#ddd;
}

.aio-input-secondary-button {
    color: #0069ff;
    background: #fff;
    border: none;
    font-family: inherit;
    font-size: inherit;
    padding: 0 4em;
    height: 2em;
    border: 2px solid #0069ff;
}


.aio-input.disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.aio-input:disabled {
    cursor: not-allowed;
}

.aio-input-input input:disabled,
.aio-input-input textarea:disabled {
    border: none;
    background: none;
    outline: none;
    width: 100%;
    cursor: not-allowed;
    opacity: 0.5;
}


.aio-input-justify {
    justify-content: center;
}
.aio-input-option-justify{
    flex:1;
}
.aio-input-options-justify{
    justify-content: center;
}
.aio-input-select-option-value.aio-input-value-justify{
    flex:1;
}
.aio-input-value-justify {
    width: fit-content;
    text-align: center;
    justify-content: center;
}
.aio-input-radio-option-value {
    flex: none;
    width: fit-content;
    text-align: unset;
}

.aio-input-file-value {
    justify-content: center;
}

.aio-input-panels {
    gap: 0.4em;
    width: 100%;
    height: fit-content;
    position: relative;
    display: flex;
    flex-shrink: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.aio-input-panels-vertical {
    flex-direction: column;
}

.aio-input-panels-horizontal {
    flex-direction: row;
    overflow-x: auto;
}

.aio-input-panels-item {
    position: relative;
}


.aio-input-panels-body {
    background: #eee;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    position: relative;
    padding: .8em;
    transform: scaleY(1);
    overflow: hidden;
    box-sizing: border-box;
    border-radius:0 0 .4em .4em;
}



.aio-input-range {
    padding: 0 1em;
}


.aio-input-select-value {
    display: flex;
    line-height: 16px;
    height: 100%;
    justify-content: center;
}


.aio-input-check-0 {
    position: relative;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border-radius: 3px;
    border: 1px solid;
}

.aio-input-check-0 div {
    position: absolute;
    width: 100%;
    height: 100%;
}

.aio-input-check-0 div:before {
    content: '';
    position: absolute !important;
    width: 3px !important;
    height: 9px !important;
    transform: rotate(45deg) !important;
    left: 4px !important;
    top: 0px !important;
    border: 3px solid #fff !important;
    border-width: 0px 3px 3px 0px !important;
    box-sizing: unset !important;
}

.aio-input-active-color {
    color: var(--aio-input-color);
}
.aio-input-active-bgcolor {
    color: #fff;
    background: var(--aio-input-color)
}

.aio-input-active-bg {
    background: var(--aio-input-color);
}


.aio-input-footer {
    position: absolute;
    color: red;
    top: 100%;
    width: 100%;
    right: 0;
    font-size: 11px;
}

.month-calendar {
    display: flex;
    flex-direction: column;
    padding: .8em;
    box-sizing: border-box;
    align-items: center;
}

.month-calendar-title {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
}

.month-calendar-weekdays {
    display: grid;
    grid-template-columns: 48px 48px 48px 48px 48px 48px 48px;
    background: rgba(0, 0, 0, 0.2);
    gap: 0.2em;
}

.month-calendar-days {
    display: grid;
    grid-template-columns: 48px 48px 48px 48px 48px 48px 48px;
    background: rgba(0, 0, 0, 0.2);
    gap: 0.2em;
}

.month-calendar-day {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.05);
}

.month-calendar-weekday {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
}

/*********************************************************
* Tokens
*/
.namespace {
    opacity: .7;
}

.token.doctype .token.doctype-tag {
    color: #569CD6;
}

.token.doctype .token.name {
    color: #9cdcfe;
}

.token.comment,
.token.prolog {
    color: #6a9955;
}

.token.punctuation,
.language-html .language-css .token.punctuation,
.language-html .language-javascript .token.punctuation {
    color: #d4d4d4;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.inserted,
.token.unit {
    color: #b5cea8;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.deleted {
    color: #ce9178;
}

.language-css .token.string.url {
    text-decoration: underline;
}

.token.operator,
.token.entity {
    color: #d4d4d4;
}

.token.operator.arrow {
    color: #569CD6;
}

.token.atrule {
    color: #ce9178;
}

.token.atrule .token.rule {
    color: #c586c0;
}

.token.atrule .token.url {
    color: #9cdcfe;
}

.token.atrule .token.url .token.function {
    color: #dcdcaa;
}

.token.atrule .token.url .token.punctuation {
    color: #d4d4d4;
}

.token.keyword {
    color: #569CD6;
}

.token.keyword.module,
.token.keyword.control-flow {
    color: #c586c0;
}

.token.function,
.token.function .token.maybe-class-name {
    color: #dcdcaa;
}

.token.regex {
    color: #d16969;
}

.token.important {
    color: #569cd6;
}

.token.italic {
    font-style: italic;
}

.token.constant {
    color: #9cdcfe;
}

.token.class-name,
.token.maybe-class-name {
    color: #4ec9b0;
}

.token.console {
    color: #9cdcfe;
}

.token.parameter {
    color: #9cdcfe;
}

.token.interpolation {
    color: #9cdcfe;
}

.token.punctuation.interpolation-punctuation {
    color: #569cd6;
}

.token.boolean {
    color: #569cd6;
}

.token.property,
.token.variable,
.token.imports .token.maybe-class-name,
.token.exports .token.maybe-class-name {
    color: #9cdcfe;
}

.token.selector {
    color: #d7ba7d;
}

.token.escape {
    color: #d7ba7d;
}

.token.tag {
    color: #569cd6;
}

.token.tag .token.punctuation {
    color: #808080;
}

.token.cdata {
    color: #808080;
}

.token.attr-name {
    color: #9cdcfe;
}

.token.attr-value,
.token.attr-value .token.punctuation {
    color: #ce9178;
}

.token.attr-value .token.punctuation.attr-equals {
    color: #d4d4d4;
}

.token.entity {
    color: #569cd6;
}

.token.namespace {
    color: #4ec9b0;
}

/*********************************************************
* Language Specific
*/

pre[class*="language-javascript"],
code[class*="language-javascript"],
pre[class*="language-jsx"],
code[class*="language-jsx"],
pre[class*="language-typescript"],
code[class*="language-typescript"],
pre[class*="language-tsx"],
code[class*="language-tsx"] {
    color: #9cdcfe;
}

pre[class*="language-css"],
code[class*="language-css"] {
    color: #ce9178;
}

pre[class*="language-html"],
code[class*="language-html"] {
    color: #d4d4d4;
}

.language-regex .token.anchor {
    color: #dcdcaa;
}

.language-html .token.punctuation {
    color: #808080;
}

/*********************************************************
* Line highlighting
*/
pre[class*="language-"]>code[class*="language-"] {
    position: relative;
    z-index: 1;
}

.line-highlight.line-highlight {
    background: #f7ebc6;
    box-shadow: inset 5px 0 0 #f7d87c;
    z-index: 0;
}

.aio-input-mask {
    display: flex;
    width: 100%;
    padding: 0 .8em;
    align-items: center;
    justify-content: center;
}

.aio-input-mask .aio-input {
    padding: .8em;
}

.aio-input-mask input {
    padding: 0;
    letter-spacing: 3px;
    ;
    padding: 0;
    border: none;

}

.aio-input-mask-gap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .8em;
    color: #aaa;
}


.leaflet-container {
    font-family: inherit !important;
}

.ai-map .leaflet-control-layers-overlays {
    display: flex;
    flex-direction: column;
    gap: 0.4em !important;
}


.rich-text-item {
    border: 1px solid #eee;
    margin: .8em;
}

.rich-text-item-hover {
    border: 1px dashed orange;
}

.rich-text-options {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    overflow: hidden;
    padding: .8em;
    width: 240px;
    border: 1px solid #ddd;
}

.rich-text-option-title {
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    background: #fff;
}

.rich-text-option {
    padding: 0 .8em;
    height: 36px;
    display: flex;
    align-items: center;
    background: #fff;
}

.aio-input-has-subtext:after {
    content: attr(data-subtext);
    font-size: 0.8em;
    opacity: 0.7;
}


.ai-form {
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding: .8em;
}

.ai-form-body {
    padding: 0.8em;
    flex: 1;
    overflow-y: auto;
}

.ai-form-footer {
    padding: .8em;
    width: 100%;
    display: flex;
    align-items: center;
}

.ai-form-input {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
}

.ai-form-html {
    display: flex;
}

.ai-form-input-label {
    display: flex;
    align-items: center;
    width: 100%;
    padding:0 0.4em;
    gap: 0.4em;
    margin-bottom:0.4em;
}

.ai-form-input-inline-label{
    position: absolute;
    z-index: 10;
    top: -2px;
    padding: 0 .8em;
    width:100%;
    height:4px;
    display:flex;
    align-items: center;
}

.ai-form-input-inline-label .ai-form-input-label{
    background:#fff;
    height:4px;
    width:fit-content;
    margin-bottom:0;
}


.ai-form-input-body {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
}

.ai-form-input-body-input {
    flex: 1;
    max-width:100%;
}

.ai-form-input-error {
    color: red;
    font-size: 10px;
}

.ai-form-v {
    display: flex;
    flex-direction: column;
    gap: 0.8em;
}

.ai-form-required {
    color: red;
}

.ai-form-scroll-v {
    overflow-y: auto;
}

.ai-form-scroll-h {
    overflow-x: auto;
}

.ai-form-h {
    display: flex;
    gap: 0.8em;
}

@media screen and (max-width: 768px) {
    .ai-form-hide-xs {
        display: none !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
    .ai-form-hide-sm {
        display: none !important;
    }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
    .ai-form-hide-md {
        display: none !important;
    }
}

@media screen and (min-width: 1200px) {
    .ai-form-hide-lg {
        display: none !important;
    }
}

.ai-form-items-center {
    align-items: center;
}

.ai-form-justify-center {
    justify-content: center;
}

.aio-input-plate {
    display: flex;
    direction: ltr;
    border: 1px solid #ddd;
    gap: 0.4em;
    padding: .8em;
    box-sizing: border-box;
    position: relative;
}

.aio-input-plate-label {
    position: absolute;
    top: -2px;
    right: 12px;
    background: #fff;
    height: 3px;
    padding: 0 .8em;
    display: flex;
    align-items: center;
}

.aio-input-plate-item {
    flex-shrink: 0;
}

.aio-input-plate .aio-input-plate-item:nth-child(2) {
    flex: 2 !important;
}

.aio-input-plate .aio-input-plate-item:nth-child(3) {
    flex: 3 !important;
}

.aio-input-plate .aio-input-plate-item:nth-child(4) {
    flex: 3 !important;
}

.aio-input-plate .aio-input-plate-item:nth-child(5) {
    flex: 2 !important;
}

.aio-input-plate .aio-input-plate-item .aio-input {
    height: 100%;
}

.aio-input-plate-item .aio-input {
    background: none;
    border: 1px solid #ddd !important;
    width: 100%;

}

.ai-toggle {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.ai-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.ai-indent-line {
    stroke: #c0cbd3;
    stroke-dasharray: 1, 3;
}

.ai-toggle-line {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: calc(50% - 12px);
}

.ai-indents {
    height: 100%;
    display: flex;
    position: relative;
    align-items: center;
}

.ai-indent {
    height: 100%;
    position: relative;
}

.ai-indent svg {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;

}



.ai-indent-6 {
    height: 6px;
}

.ai-indent-12 {
    height: 12px;
}

.ai-indent-18 {
    height: 18px;
}

.ai-indent-24 {
    height: 24px;
}

.ai-indent-30 {
    height: 30px;
}

.ai-indent-36 {
    height: 36px;
}

.ai-indent-42 {
    height: 42px;
}

.ai-indent-48 {
    height: 48px;
}

.ai-indent-54 {
    height: 54px;
}

.ai-indent-60 {
    height: 60px;
}

.ai-scanner-button {
    background: none;
    padding: 0 .8em;
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scan-result {
    display: flex;
    align-items: center;
    font-size: 12px;
    padding: 0 .8em;
    flex-shrink: 0;
    height: 36px;
}

.aio-input-scanner-values {
    display: flex;
    flex-direction: column;
    border: 1px solid #ddd;
    gap: 0.2em;
}

.z-index-input {
    z-index: 100000;
}

.scanner-close {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 100;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 100%;
    color: #fff;
}

.aio-input-range-round {
    width: fit-content;
    border-radius: 100%;
}



.ai-signature {
    overflow: hidden;
    width:20em;
    height:20em;
    position: relative;
    background:#eee;
    border-radius:0.8em;
    font-size:12px;
}

.ai-signature canvas {
    background: none;
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
}

.ai-signature-footer {
    padding:.8em;
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    bottom:0;
    left:0;
    width:100%;
    gap:1em;
}



.ai-signature-clear {
    background: none;
    font-weight: bold;
    color:#0069ff;
}

.ai-signature-save {
    background: #0069ff;
    color: #fff;
    border-radius:0.4em;
    font-size:inherit;
    padding:0.4em 1em;
}
.ai-form-tag-remove{
    width:24px;
    height:16px;
    display:flex;
    justify-content: center;
    align-items: center;
    cursor:pointer;
}
.ai-form-tags {
    left: 0;
    display: flex;
    box-sizing: border-box;
    flex-wrap: wrap;
    gap: 0.2em;
    background: #f8f8f8;
    display: flex;
    align-items: center;
    padding: .4em;
    width:100%;
}

.ai-form-tag {
    background: #eee;
    cursor: pointer;
    padding-inline-start:.8em;
    height: 1.8em;
    border-radius: 0.4em;
    display: flex;
    align-items: center;
    gap: 0.4em;
    flex-shrink: 0;
}
.ai-form-tag-disabled{
    padding:0 0.8em;
}

.ai-form-tag-label {
    font-weight: bold;
    font-size:0.8em;
}

.ai-form-tag-operator {
    color: #0069ff;
}

.ai-form-tag-value {
    color: orange;
    direction: ltr;
    font-size:0.8em;
}

.aio-input-switch{
    width:2.4em;
    height:1.2em;
    position: relative;
    border-radius:36px;
    display:flex;
    align-items: center;
    background:#ddd;
    overflow:hidden;
    cursor:pointer;
    user-select:none;
}

.aio-input-switch-groove{
    height:0.3em;
    width:calc(100% - 1.2em);
    position: absolute;
    background:#333;
    left:calc(0.5em + 0.1em);
    border-radius:24px;
}
.aio-input-switch-button{
    width:1em;
    height:1em;
    border-radius:100%;
    left:0.1em;
    transition:left 0.1s;
    background:#fff;
    position:absolute;
    z-index:10;
    display:flex;
    align-items: center;
    justify-content: center;   
    overflow:hidden;
}

.aio-input-switch-off-content{
    width:calc(100% - 1.2em);
    height:1em;
    left:1.1em;
    position:absolute;
    border-radius:0 36px 36px 0;
    transition:left 0.1s;
    display:flex;
    align-items: center;
    justify-content: center;   
}
.aio-input-switch-text{
    font-size:0.5em;
    font-weight:bold;
}
.aio-input-switch-on-content .aio-input-switch-text{
    color:#fff;
}
.aio-input-switch-on-content{
    width:calc(100% - 1.2em);
    height:1em;
    left:calc(-100% + 1.3em); 
    position:absolute;
    border-radius:36px 0 0 36px;
    transition:left 0.1s;
    display:flex;
    align-items: center;
    justify-content: center;
    
}
.aio-input-switch.active .aio-input-switch-off-content{
    left:calc(100% - 0.1em); 
    transition:left 0.1s;
    
}
.aio-input-switch.active .aio-input-switch-on-content{
    left:0.1em; 
    transition:left 0.1s;
    
}
.aio-input-switch.active .aio-input-switch-button{
    transition:left 0.1s;
    left:calc(100% - 1.1em);
}
.aio-input-switch.active{
    background:#0069ff;
}
.ai-form-tag-input{
    padding:0;
    height:fit-content;
    border:none;
    margin:0;
}


/*
******************************
calendar
******************************
*/
/* #region calnedar */
.aio-input-date-container {
    overflow: hidden;
    width: fit-content;
}

.aio-input-date-calendar {
    user-select: none;
    -webkit-user-select: none;
    display: flex;
    flex-direction: column;
    stroke: #333;
    color: #333;
    padding: 1em;
    flex: 1;
}

.aio-input-date-calendar svg {
    cursor: pointer;
}

.aio-input-date-popup-container.not-mounted .aio-input-date-popup {
    transform: scale(0.1);
    transition: transform 0.2s;
}

.aio-input-date-popup-container.mounted .aio-input-date-popup {
    transform: scale(1);
    transition: transform 0.2s;
}

.aio-input-date-today {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    width: fit-content;
    padding: 0.8em;
    box-sizing: border-box;
    gap: 6px;
}

.aio-input-date-today-weekday {
    font-size: 1.2em;
}

.aio-input-date-today-day {
    font-size: 3em;
}

.aio-input-date-today-month {
    font-size: 1.2em;
}

.aio-input-date-today-label {
    font-size: 1em;
    margin-bottom: 1em;
}

.aio-input-date-today-year {
    font-size: 1.2em;
}

.aio-input-date-today div {
    display: flex;
    align-items: center;
}

.aio-input-date-theme-color {
    color: #333;
    fill: #333;
    stroke: #333;
}

.aio-input-date-footer {
    display: flex;
    justify-content: flex-end;
    direction: ltr;
    font-size: 1em;
}

.aio-input-date-footer button {
    background: none;
    font-weight: bold;
    border: none;
    font-size: inherit;
    cursor: pointer;
    outline: none;
    flex: 1;
    height: 2em;
}

.aio-input-date-body {
    display: grid;
    flex: 1 1;
    position: relative;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
}

.aio-input-date-body-month {
    grid-template-columns: 5em 5em 5em;
    grid-template-rows: 2.5em 2.5em 2.5em 2.5em;
    font-size: 1em;
}

.aio-input-date-body-day {
    grid-template-columns: 1.8em 1.8em 1.8em 1.8em 1.8em 1.8em 1.8em;
    grid-template-rows: 2em 2em 2em 2em 2em 2em 2em;
    font-size: 0.9em;
}

.aio-input-date-body-hour {
    grid-template-columns: 3.5em 3.5em 3.5em 3.5em;
    grid-template-rows: 2.5em 2.5em 2.5em 2.5em 2.5em 2.5em;
    font-size: 1em;
}

.aio-input-date-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    outline: none;
    font-size: 1em;
}

.aio-input-date-cell.aio-input-date-disabled {
    box-shadow: none;
    border-radius: 0;
    background: rgba(128, 128, 128, .2);
    color: #fff;
    cursor: not-allowed !important;
}
.aio-input-date-cell:not(.aio-input-date-weekday):not(.aio-input-date-space):not(.aio-input-date-disabled):hover {
    position: relative;
    transform: scale(1.2);
    box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, .3);
    cursor: pointer;
    z-index: 100;
}
.aio-input-date-weekday {
    font-weight: bold;
    font-size: 1em;
}

.aio-input-date-theme-active {
    background: #0069ff;
    color: #fff;
}

.aio-input-date-theme-bg {
    background: #fff;
}

.aio-input-date-theme-border {
    border: 1px solid #0069ff;
}

.aio-input-date-popup {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 10;
    direction: ltr;
}

.aio-input-date-popup-header {
    display: flex;
    padding: 6px;
    box-sizing: border-box;
}

.aio-input-date-popup-body {
    display: grid;
    flex: 1;grid-template-columns: 33% 33% 33%;
    grid-template-rows: 25% 25% 25% 25%;
    padding: 0.6em;
    gap: 1px;
}

.aio-input-date-popup-footer {
    font-size: 1em;
    height: 3em;
    display: flex;
    align-items: center;
    padding: 0 1em;
}

.aio-input-date-popup-label {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aio-input-date-popup-footer button {
    border: none;
    padding: 3px 12px;
    border-radius: 4px;
    background: none;
}

.aio-input-date-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.aio-input-date-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    stroke: inherit;
    border-radius: 100%;
    box-shadow: 1px 1px 6px 0 rgba(0, 0, 0, 0.3);
}

.aio-input-date-arrow:hover {
    background: var(--aio-input-color);
    color: #fff;
    fill: #fff;
    stroke: #fff;
}

.aio-input-date-select {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    cursor: pointer;
}

.aio-input-date-dropdown {
    background: none;
    font-size: inherit;
    padding: 0 3px;
    border: none !important;
    width: unset !important;
}

.aio-input-time-popover {
    background: #fff;
    width: fit-content !important;
    font-family: inherit;
    display: flex;
    flex-direction: column;
}

.aio-input-time-popover .aio-popup-body {
    overflow: hidden;
}

.aio-input-time-popover .aio-input-list {
    border: none;
    width: 4em;
    font-size: inherit;
}

.aio-input-time-popover {
    direction: ltr;
    position: relative;
}

.aio-input-time-popover .aio-input-time-popover-body {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 1em;
}


.aio-input-time-popover .aio-input-time-popover-footer {
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    gap: 0.8em;
    padding: 1em;
}

.aio-input-time-popover .aio-input-time-popover-footer button {
    font-size: inherit;
    font-family: inherit;
    border: none;
    background: none;
    color: inherit;
}

.aio-input-time-popover .aio-input-time-popover-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.aio-input-time-popover .aio-input-time-popover-item-title {
    font-size: 1em;
    font-weight: bold;
    border-bottom: 1px solid;
    height: 1.6em;
}

.aio-input-time-popover-highlight {
    position: absolute;
    left: 0;
    top: calc(2.5em + 1.6em);
    background: rgba(0, 0, 0, 0.1);
    pointer-events: none;
    width: 100%;
    height: 2.5em;
}

/* #endregion calnedar */

/* #region tree*/
.aio-input-tree-option {
    gap: 6px;
    position: relative;
    padding: 0 6px;
}

.aio-input-tree {
    font-size: inherit;
    display: flex;
    flex-direction: column;
}

.aio-input-tree-rtl {
    direction: rtl;
}

.aio-input-tree-rtl .aio-input-toggle-icon {
    transform: scaleX(-1);
}

.aio-input-tree-header {
    background: #f2f2f2;
    padding: 6px 12px;
    position: relative;
}

.aio-input-tree-header button {
    height: 30px;
    gap: 6px;
    display: flex;
    padding: 3px 16px;
    align-items: center;
    justify-content: center;
    background: rgb(23, 105, 187);
    border: none;
    border-radius: 4px;
    color: #fff;
}


.aio-input-select.aio-input-tree-options-button {
    background: none;
    border: none;
}

.aio-input-tree-body {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.aio-input-tree-body.not-mounted .aio-input-tree-option {
    transition: height .9s, opacity .9s !important;
    transition-timing-function: cubic-bezier(.16, 2.02, .84, .96) !important;
    height: 0 !important;
    opacity: 0 !important;
}

.aio-input-tree-body.not-mounted {
    transition: padding var(--aio-input-transition) !important;
    padding: 0 !important;
}

.aio-input-tree-body.not-mounted .ai-toggle-line {
    display: none !important;
}

.aio-input-tree-body.mounted .aio-input-tree-option {
    transition-timing-function: cubic-bezier(.16, 2.02, .84, .96) !important;
    transition: height var(--aio-input-transition);
}

.aio-input-tree-body.mounted .aio-input-size-24 {
    height: 24px;
}

.aio-input-tree-body.mounted .aio-input-size-36 {
    height: 36px;
}

.aio-input-tree-body.mounted .aio-input-size-48 {
    height: 48px;
}

.aio-input-tree-body.mounted .aio-input-size-60 {
    height: 60px;
}

.aio-input-tree-body.mounted .aio-input-size-72 {
    height: 72px;
}

.aio-input-tree-body.mounted .aio-input-size-84 {
    height: 84px;
}

.aio-input-tree-body.mounted .aio-input-size-96 {
    height: 96px;
}

.aio-input-tree-body.mounted .aio-input-size-108 {
    height: 108px;
}

.aio-input-tree-body.mounted .aio-input-size-120 {
    height: 120px;
}

/* #endregion tree*/

/* #region range*/
.aio-input.aio-input-range-round{
    padding:0 !important;
    background:#f4f4f4;
}
.ai-range {
    display: flex;
    position: relative;
    user-select: none;
}


.aio-input-range-value {
    width: 100%;
    overflow: visible;
}

.ai-range-horizontal {
    height: 48px;
    align-items: center;
    width: 100%;
}

.ai-range-horizontal .ai-range-groove {
    height: 1px;
    width: 100%;
    background: #ddd;
}

.ai-range-vertical {
    width: 48px;
    height: 240px;
    justify-content: center;
    margin: 12px 0;
}

.ai-range-vertical .ai-range-groove {
    width: 1px;
    height: 100%;
    background: #ddd;
}

.ai-range-reverse {
    direction: rtl;
}

.ai-range-round {
    border-radius: 100%;
    justify-content: center;
    align-items: center;
    height: unset;
}

.ai-range-value-container {
    display: flex;
    align-items: center;
    width: 0;
    height: 0;
    justify-content: center;
    overflow: visible;
    position: absolute;
    z-index: 10;
}

.ai-range-round .ai-range-value-container {
    justify-content: flex-end;
}

.aio-input-handle {
    position: absolute;
    width: 0;
    height: 0;
}

.ai-range-label-container {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0;
    height: 0;
}

.ai-range-round .ai-range-label-container {
    justify-content: flex-end;
}

.ai-range-labels {
    position: absolute;
}

.ai-range-horizontal .ai-range-labels {
    width: 100%;
    height: 100%;
}

.ai-range-vertical .ai-range-labels {
    width: 100%;
    height: 100%;
}

.ai-range-label {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.ai-range-label>* {
    position: absolute;
}

.ai-range-value {
    padding: 0 16px;
}

.ai-range-point-container {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0;
    height: 0;
}
.ai-range-point-container > *{
    position: absolute;
}
.ai-range-point {
    height: 2em;
    width: 2em;
    font-size:0.8em;
    border-radius: 48px;
    background: #0069ff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-range-range {
    position: absolute;
}

.ai-range-scale-container {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0;
    height: 0;
}

.ai-range-round .ai-range-scale-container {
    justify-content: flex-end;
}

.ai-range-scale {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #999;
    font-size: 12px;
    width: 1px;
    height: 6px;

}

.ai-range-round .ai-range-scale {
    height: 2px;
    width: 6px;
    left: 6px;
}

.ai-range-vertical .ai-range-scale {
    height: 2px;
    width: 6px;
}

.ai-range-fill {
    background: #0069ff;
    position: absolute;
    z-index: 10;
}

.ai-range-horizontal .ai-range-fill {
    height: 4px;
}

.ai-range-vertical .ai-range-fill {
    width: 4px;
}

/* #endregion range*/

/* #region image*/
.aio-input-image {
    width: fit-content;
    padding: 6px;
    overflow: hidden;
    max-width: 100%;
    border: 1px solid #ddd;
    position: relative;
    box-sizing: border-box;
    user-select: none;
}

.aio-input-image .aio-input-file-container {
    height: 100%;
}

.aio-input-image .aio-input-file {
    border: none;
}

.aio-input-image .aio-input-file-value {
    height: 100%;
}

.aio-input-image img {
    min-width: 36px;
}

.aio-input-image-button {
    position: absolute;
    top: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    border-radius:4px;
}

.aio-input-image-preview {
    left: 0 !important;
}
.aio-input-image-deSelect {
    right:0;
}

.aio-input-image-count {
    position: absolute;
    bottom: 0;
    padding: 3px 6px;
    font-size: 16px;
    font-weight: bold;
    left: 0;
    background: rgba(255, 255, 255, 1);
}

.aio-input-image-preview-popup {
    width: 90vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aio-input-image-placeholder {
    padding: 12px;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.aio-input-image-modal {
    border: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    width: 90vw;
    padding: 12px;
    box-sizing: border-box;
    gap: 12px;
    background: #f8f8f8;
    direction: ltr;
}

.aio-input-image-modal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    background: #fff;
    padding: 0 6px;
    box-sizing: border-box;
}

.aio-input-image-thubmbnail {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow-x: auto;
    flex: 1;
    box-sizing: border-box;
    padding: 6px;
    box-sizing: border-box;
}

.aio-input-image-modal-body-item {
    border: 1px dashed #ddd;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

.aio-input-image-modal-body-item.active {
    box-shadow: 0 0 0 2px #0069ff;
}

.aio-input-image-modal-body-item-add {
    display: flex;
    align-items: center;
    justify-content: center;
}

.aio-input-image-modal-body-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;

}

.aio-input-image-modal-preview {
    display: flex;
    justify-content: center;
    height: calc(80vh - 100px);
    width: 100%;
    background: #fff;
    border: 1px dashed #ddd;
    align-items: flex-start;
    color: #ddd;
    flex: 1;
}

.aio-input-image-modal-preview .swiper {
    max-height: 100%;
}

.aio-input-image-modal-preview svg {
    f