
.phanterpwa-widget
    position: relative
    display: block
    width: 100%
    padding: 5px
    .phanterpwa-widget-icon-wrapper
        color: $white
    .phanterpwa-widget-check
        position: absolute
        top: 30px
        right: 7px
        font-size: 0.7rem
        color: $ok
    .phanterpwa-widget-wrapper
        .phanterpwa-widget-check
            color: $ok
        &.no_pass
            .phanterpwa-widget-check
                color: $material_level04
        &.has_error
            .phanterpwa-widget-check
                color: $alert
    &.phanterpwa-widget-reference
        .phanterpwa-widget-check
            right: 21px
    &.phanterpwa-widget-select
        .phanterpwa-widget-check
            right: 21px
            cursor: pointer
    &.phanterpwa-widget-autocomplete
        .phanterpwa-widget-check
            right: 21px
            cursor: pointer
    &.phanterpwa-widget-multselect
        .phanterpwa-widget-multselect-caret
            cursor: pointer
        .phanterpwa-widget-check
            cursor: pointer
    &.phanterpwa-widget-has_icon_button
        padding-right: 40px
        .phanterpwa-widget-check
            right: 47px
        &.phanterpwa-widget-reference
            .phanterpwa-widget-check
                right: 61px
        &.phanterpwa-widget-select
            .phanterpwa-widget-check
                right: 61px
        &.phanterpwa-widget-autocomplete
            .phanterpwa-widget-check
                right: 61px
        .phanterpwa-widget-icon_button
            position: absolute
            width: 35px
            height: 35px
            border-radius: 35px
            padding: 0
            top: 20px
            right: 0
    &.phanterpwa-widget-menubox
        text-align: center
        padding: 0
    &.phanterpwa-widget-floatmenu
        position: fixed
        bottom: 20px
        right: 20px
        background-color: $components
        border-radius: 50px
        line-height: 50px
        width: 50px
        height: 50px
        text-align: center
        color: $white
        z-index: 31
        a
            color: $white
            text-decoration: none
        .phanterpwa-widget-floatmenu-wrapper
            .phanterpwa-widget-floatmenu-options-content
                position: absolute
                bottom: 50px
                height: auto
                overflow: hidden
                max-height: 0px
                border-radius: 40px
                transition: max-height linear 0.5s
                .icon_button
                    background-color: $components
                    margin-bottom: -55px
                    transition: margin-bottom linear 0.5s

            &.enabled
                .phanterpwa-widget-floatmenu-options-content
                    max-height: 600px
                    .icon_button
                        margin-bottom: 5px

    &.phanterpwa-widget-image
        padding: 0
    &.phanterpwa-widget-integermenu
        text-align: left
        overflow: auto
        .phanterpwa-widget-integermenu-wrapper
            &> label
                display: inline-block
            .phanterpwa-widget-integermenu-buttons_and_input_wrapper
                display: inline-block
                position: relative
                .phanterpwa-widget-integermenu-minusbutton
                    position: absolute
                    top: 11px
                    left: 5px
                    text-align: center
                    width: 40px
                    cursor: pointer
                    height: 40px
                    line-height: 36px
                    background-color: $components
                    color: $white
                    border-radius: 25px
                    font-weight: bold
                    font-size: 20pt
                    -webkit-user-select: none 
                    -ms-user-select: none 
                    user-select: none
                .phanterpwa-widget-integermenu-plusbutton
                    position: absolute
                    top: 11px
                    right: 5px
                    text-align: center
                    width: 40px
                    cursor: pointer
                    height: 40px
                    line-height: 36px
                    background-color: $components
                    color: $white
                    border-radius: 25px
                    font-weight: bold
                    font-size: 20pt
                    -webkit-user-select: none 
                    -ms-user-select: none 
                    user-select: none
                input
                    text-align: right

            &.tiny_input_size
                .phanterpwa-widget-integermenu-buttons_and_input_wrapper
                    width: 140px
                    padding: 0 40px 0 40px

            &.phanterpwa-widget-wear-elegant
                &.tiny_input_size
                    .phanterpwa-widget-integermenu-buttons_and_input_wrapper
                        width: 150px
                        padding: 0 40px 0 40px
                .phanterpwa-widget-integermenu-buttons_and_input_wrapper
                    .phanterpwa-widget-integermenu-minusbutton
                        top: 17px
                        border-radius: 25px 0 0 25px
                    .phanterpwa-widget-integermenu-plusbutton
                        top: 17px
                        border-radius: 0 25px 25px 0
                    input
                        text-align: right
                        padding-right: 25px

            &.phanterpwa-widget-wear-shadows
                &.tiny_input_size
                    .phanterpwa-widget-integermenu-buttons_and_input_wrapper
                        width: 150px
                        padding: 0 40px 0 40px
                .phanterpwa-widget-integermenu-buttons_and_input_wrapper
                    .phanterpwa-widget-integermenu-minusbutton
                        top: 10px
                        border-radius: 25px 0 0 25px
                        height: 36px
                        line-height: 30px
                    .phanterpwa-widget-integermenu-plusbutton
                        top: 10px
                        border-radius: 0 25px 25px 0
                        height: 36px
                        line-height: 30px
                    input
                        text-align: right
                        padding-right: 25px
                        border-radius: 0







.phanterpwa-widget
    padding-right: 5px
    input, textarea
        color: $default_font_color
        &:focus
            outline-offset: unset !important
            outline: unset !important

    .phanterpwa-widget-wrapper
        padding-bottom: 10px
        .phanterpwa-widget-message_error
            position: absolute
            width: 100%
            text-align: center
            font-size: 0.7rem
            color: $alert
            overflow: hidden
            height: 0
            transition: height 0.3s ease
        &.has_error
            .phanterpwa-widget-message_error
                height: auto
                transition: height 0.3s ease
        &.has_icon
            padding-right: 45px
            .phanterpwa-widget-check
                right: 45px

            .phanterpwa-widget-icon-wrapper
                width: 40px
                height: 40px
                position: absolute
                right: 0
                top: 4px
                background-color: $components
                text-align: center
                line-height: 40px
                border-radius: 29px
            &.has_disabled
                .phanterpwa-widget-icon-wrapper
                    background-color: #d0d0d0

        &.has_mask, &.its_numbers
            input
                font-family: "Segoe UI Mono W01 Regular"
                letter-spacing: -0.08rem

        &.its_disabled
            input[disabled]
                color: rgb(128, 128, 128)
            hr.material-widgets-animation-offfocus
                border-bottom: 1px dotted

        &.phanterpwa-widget-checkbox-wrapper
            text-align: left
            padding: 16px 0px 20px 0px
            .phanterpwa-widget-checkbox-input
                display: none
            .phanterpwa-widget-checkbox-checkbox
                cursor: pointer
                float: left
                margin-left: 10px
                margin-right: 10px
                width: 25px
                position: relative
                height: 25px
                label
                    position: relative
                    font-size: 1rem
                    top: 2px
                    left: 0

                .phanterpwa-widget-checkbox-option-container
                    position: absolute
                    width: 25px
                    height: 25px
                    border: 1px solid
                    top: 0
                    border-radius: 5px
                    border: 1px solid rgb(128, 128, 128)

                .phanterpwa-widget-checkbox-true
                    opacity: 0
                    width: 0
                    text-align: center
                    line-height: 25px
                    overflow: hidden
                    transition: width 0.5s ease, opacity 0.5s ease
            &.disabled
                color: gray
                .phanterpwa-widget-checkbox-true
                    color: black !important
                label
                    color: gray !important
        &.phanterpwa-widget-radio-wrapper
            label
                cursor: pointer
            .phanterpwa-widget-radio-input
                display: none
            .phanterpwa-widget-radio-radio
                cursor: pointer
                float: left
                margin-left: 10px
                margin-right: 10px
                width: 25px
                position: relative
                height: 25px

                .phanterpwa-widget-radio-option-container
                    position: absolute
                    width: 25px
                    height: 25px
                    top: 0

        &.has_true
            .phanterpwa-widget-checkbox-checkbox
                .phanterpwa-widget-checkbox-option-container
                    border: 1px solid $components
                .phanterpwa-widget-checkbox-true
                    opacity: 1
                    width: 100%
                    text-align: center
                    color: $components
                    transition: width 0.5s ease, opacity 0.5s ease
        &.has_none
            .phanterpwa-widget-checkbox-checkbox
                .phanterpwa-widget-checkbox-option-container
                    border: 1px solid $components
                .phanterpwa-widget-checkbox-true
                    opacity: 1
                    width: 100%
                    text-align: center
                    color: grey
                    transition: width 0.5s ease, opacity 0.5s ease
        &.has_true
            .phanterpwa-widget-radio-radio
                .phanterpwa-widget-radio-true
                    color: $components

        &.focus
            label
                color: $components
        &.phanterpwa-widget-wear-material
            .phanterpwa-widget-checkbox-checkbox
                .phanterpwa-widget-checkbox-option-container
                    border: 2px solid
                    opacity: 1
                    transition: all 0.5s ease
                    bottom: 0px
                    top: auto
                .phanterpwa-widget-checkbox-true
                    opacity: 0
                    width: 100%
                    text-align: left
                    color: $components
                    font-size: 1.4rem
                    left: -2px
                    overflow: hidden
                    transform: rotate(45deg)
                    bottom: -8px
                    transition: all 0.5s ease
                    position: absolute
            &.has_true
                .phanterpwa-widget-checkbox-checkbox
                    .phanterpwa-widget-checkbox-option-container
                        opacity: 0
                        transition: all 0.5s ease
                        transform: rotate(-45deg)
                        position: absolute
                        bottom: 7px
                        top: auto
                        left: -2px
                    .phanterpwa-widget-checkbox-true
                        font-size: 1.4rem
                        opacity: 1
                        width: 100%
                        overflow: hidden
                        text-align: left
                        transform: rotate(0deg)
                        transition: all 0.5s ease
                        bottom: 1px
                        position: absolute
                        left: 2px    

    .phanterpwa-widget-input-wrapper, .phanterpwa-widget-textarea-wrapper, .phanterpwa-widget-inert-wrapper, .phanterpwa-widget-list_string-wrapper

        .phanterpwa-widget-textarea-realtime_visualization
            display: none
            background-color: white
            margin-top: 5px
            border: 1px solid gray
            border-radius: 4px
            padding: 10px
            overflow: hidden
            min-height: 100px
            position: relative
            .phanterpwa-widget-textarea-realtime_visualization-label
                position: absolute
                top: 0
                background-color: #bdbdbd
                width: 100%
                left: 0
                padding: 5px
            .phanterpwa-widget-textarea-realtime_visualization-content
                padding: 20px 5px 5px 0

        &.has_live_visualization
            .phanterpwa-widget-textarea-realtime_visualization
                display: block
        &.phanterpwa-widget-wear-material
            position: relative
            padding-top: 10px
            input, textarea
                width: 100%
                width: calc(100% - 15px)
                padding: 5px
                background-color: transparent
                border: none
                &::placeholder
                    color: rgba(128, 128, 128, 0)
                    opacity: 0
                    transition: opacity 0.3s ease, color 0.3s ease
            textarea
                min-height: 2rem
                width: 100% !important
                transition: height 0.3s ease
                resize: none
            label
                left: 5px
                bottom: 20px
                position: absolute
                color: $grey07
                font-size: 1rem
                line-height: 1rem
                transition: bottom 0.3s ease, color 0.3s ease, font-size 0.3s ease, left 0.3s ease, line-height 0.3s ease
            .material-widgets-animation-onfocus
                width: 0
                transition: width 0.3s ease
                margin: auto
                bottom: -1px
                height: 2px
            hr.material-widgets-animation-offfocus
                border-bottom: 1px solid $grey07
                width: 100% !important
                margin: 0 !important
                transition: border-bottom 0.3s ease

            .phanterpwa-widget-check
                position: absolute
                top: 13px
                right: 5px
                font-size: 0.7rem
            &.has_icon
                .phanterpwa-widget-check
                    right: 50px
                .phanterpwa-widget-icon-wrapper
                    border-radius: 100%
            &.has_value
                label
                    left: 5px
                    bottom: 39px
                    position: absolute
                    color: $components
                    font-size: 0.8rem
                    line-height: 0.6rem
                    transition: bottom 0.3s ease, color 0.3s ease, font-size 0.3s ease, left 0.3s ease, line-height 0.3s ease
            &.focus
                input, textarea
                    &::placeholder
                        color: $material_level05
                        opacity: 1
                        transition: opacity 0.3s ease, color 0.3s ease

                label
                    left: 5px
                    bottom: 39px
                    position: absolute
                    color: $components
                    font-size: 0.8rem
                    line-height: 0.6rem
                    transition: bottom 0.3s ease, color 0.3s ease, font-size 0.3s ease, left 0.3s ease, line-height 0.3s ease
                .material-widgets-animation-onfocus
                    width: 100%
                    height: 2px
                    background-color: $components
                    transition: width 0.3s ease
                hr.material-widgets-animation-offfocus
                    border-bottom: 1px solid $components
                    transition: border-bottom 0.3s ease
            &.has_error
                label
                    color: $alert
                .material-widgets-animation-onfocus
                    width: 100%
                    height: 2px
                    background-color: $alert
                    transition: width 0.3s ease
                .phanterpwa-widget-message_error
                    height: auto
                    transition: height 0.3s ease
        &.phanterpwa-widget-wear-shadows
            position: relative
            padding-top: 5px
            input, textarea
                border-radius: 5px
                line-height: 1.5rem
                width: 100%
                padding: 5px
                background-color: $white
                border: 1px solid $grey07
                transition: box-shadow 0.3s ease, border, 0.3s ease
            label
                left: 5px
                top: 0px
                position: absolute
                color: $grey07
                font-size: 1rem
                transition: color 0.3s ease
            .phanterpwa-widget-check
                position: absolute
                top: 17px
                right: 13px
                font-size: 0.7rem
                &.has_value
                label
                    color: $components
                    transition: color 0.3s ease
            &.has_label
                padding: 22px 5px
                .phanterpwa-widget-check
                    top: 32px
            &.focus
                input, textarea
                    box-shadow: 0px 0px 5px $components
                    border: 1px solid $components
                    transition: box-shadow 0.3s ease, border, 0.3s ease

                label
                    color: $components
                    transition: color 0.3s ease
            &.has_error
                .phanterpwa-widget-message_error
                    height: auto
                    transition: height 0.3s ease
            &.has_icon
                padding-right: 50px
                .phanterpwa-widget-icon-wrapper
                    top: 20px

        &.phanterpwa-widget-wear-elegant
            position: relative
            padding-top: 5px
            &.has_label
                padding: 22px 5px
            input, textarea
                border-radius: 5px
                line-height: 2rem
                width: 100%
                padding: 10px
                background-color: $white
                border: 1px solid $grey07
                transition: border 0.3s ease
                &::placeholder
                    text-transform: uppercase
            label
                left: 5px
                top: 0px
                position: absolute
                color: $grey07
                font-size: 1rem
                transition: color 0.3s ease
            .phanterpwa-widget-check
                position: absolute
                top: 24px
                right: 11px
                font-size: 0.7rem
            &.has_value
                label
                    color: $components
                    transition: color 0.3s ease
            &.focus
                input, textarea
                    border: 1px solid $components
                    transition: box-shadow 0.3s ease, border, 0.3s ease

                label
                    color: $components
                    transition: color 0.3s ease
            &.has_error
                .phanterpwa-widget-message_error
                    height: auto
                    transition: height 0.3s ease
    .phanterpwa-widget-textarea-wrapper, .phanterpwa-widget-list_string-wrapper
        &.phanterpwa-widget-wear-material
            label
                top: 20px
                bottom: auto
                transition: top 0.3s ease, color 0.3s ease, font-size 0.3s ease, left 0.3s ease, line-height 0.3s ease
            &.focus
                label
                    top: -3px
                    bottom: auto
                    transition: top 0.3s ease, color 0.3s ease, font-size 0.3s ease, left 0.3s ease, line-height 0.3s ease
            &.has_value
                label
                    top: -3px
                    bottom: auto
                    transition: top 0.3s ease, color 0.3s ease, font-size 0.3s ease, left 0.3s ease, line-height 0.3s ease

    .phanterpwa-widget-select-wrapper
        .phanterpwa-widget-select-li-title
            color: $white

        &.phanterpwa-widget-wear-material
            position: relative
            padding-top: 10px
            .phanterpwa-widget-select-touchpad
                position: absolute
                width: 100%
                top: 0
                left: 0
                height: 100
                min-height: 50px
                cursor: pointer
                &:focus
                    outline: none
            input
                cursor: pointer
                width: 100%
                width: calc(100% - 38px)
                padding: 5px
                background-color: transparent
                border: none
                &::placeholder
                    color: $material_level05
                    opacity: 1
                    transition: opacity 0.3s ease, color 0.3s ease
                &[enabled]
                    color: $default_font_color
            label
                cursor: pointer
                left: 5px
                bottom: 20px
                position: absolute
                color: $grey07
                font-size: 1rem
                line-height: 1rem
                transition: bottom 0.3s ease, color 0.3s ease, font-size 0.3s ease, left 0.3s ease, line-height 0.3s ease
            select
                display: none
            .material-widgets-animation-onfocus
                width: 0
                transition: width 0.3s ease
                margin: auto
                bottom: -1px
                height: 2px
            hr.material-widgets-animation-offfocus
                border-bottom: 1px solid $grey07
                width: 100% !important
                margin: 0 !important
                transition: border-bottom 0.3s ease
            .phanterpwa-widget-select-caret
                position: absolute
                top: 12px
                right: 13px
                font-size: 1rem
            .phanterpwa-widget-check
                position: absolute
                top: 12px
                right: 30px
                font-size: 0.7rem
            &.has_icon
                .phanterpwa-widget-select-caret
                    right: 53px
                .phanterpwa-widget-check
                    right: 70px
                .phanterpwa-widget-select-touchpad    
                    width: calc(100% - 40px)

            &.has_value
                label
                    left: 5px
                    bottom: 39px
                    position: absolute
                    color: $components
                    font-size: 0.8rem
                    line-height: 0.6rem
                    transition: bottom 0.3s ease, color 0.3s ease, font-size 0.3s ease, left 0.3s ease, line-height 0.3s ease
            &.has_label
                input
                    &::placeholder
                        color: rgba(128, 128, 128, 0)
                        opacity: 0
                        transition: opacity 0.3s ease, color 0.3s ease
            &.focus
                input
                    &::placeholder
                        color: $material_level05
                        opacity: 1
                        transition: opacity 0.3s ease, color 0.3s ease

                label
                    left: 5px
                    bottom: 39px
                    position: absolute
                    color: $components
                    font-size: 0.8rem
                    line-height: 0.6rem
                    transition: bottom 0.3s ease, color 0.3s ease, font-size 0.3s ease, left 0.3s ease, line-height 0.3s ease
                .material-widgets-animation-onfocus
                    width: 100%
                    height: 2px
                    background-color: $components
                    transition: width 0.3s ease
                hr.material-widgets-animation-offfocus
                    border-bottom: 1px solid $components
                    transition: border-bottom 0.3s ease
            &.pre_focus
                label
                    color: $components
                .material-widgets-animation-onfocus
                    width: 100%
                    height: 2px
                    background-color: $components
                    transition: width 0.3s ease
                hr.material-widgets-animation-offfocus
                    border-bottom: 1px solid $components
                    transition: border-bottom 0.3s ease
        &.phanterpwa-widget-wear-shadows
            position: relative
            padding-top: 5px
            .phanterpwa-widget-select-touchpad
                position: absolute
                width: 100%
                top: 7px
                left: 0
                height: 100
                min-height: 36px
                cursor: pointer
                &:focus
                    outline: none
            .phanterpwa-widget-select-caret
                position: absolute
                top: 12px
                right: 13px
                font-size: 1rem
            .phanterpwa-widget-check
                position: absolute
                top: 16px
                right: 30px
                font-size: 0.7rem
            .phanterpwa-widget-icon-wrapper
                top: 4px
            &.has_label
                padding: 22px 0px 10px 5px
                .phanterpwa-widget-select-caret
                    position: absolute
                    top: 30px
                    right: 13px
                    font-size: 1rem
                .phanterpwa-widget-check
                    position: absolute
                    top: 32px
                    right: 30px
                    font-size: 0.7rem
                .phanterpwa-widget-icon-wrapper
                    top: 20px
                .phanterpwa-widget-select-touchpad
                    top: 9px
                    min-height: 50px
            &.has_icon
                padding-right: 45px
                .phanterpwa-widget-select-touchpad    
                    width: calc(100% - 40px)
                .phanterpwa-widget-icon-wrapper
                    width: 40px
                    height: 40px
                    position: absolute
                    right: 0
                    background-color: $components
                    text-align: center
                    line-height: 40px
                    border-radius: 29px
                .phanterpwa-widget-select-caret
                    right: 53px
                .phanterpwa-widget-check
                    right: 70px
                &.has_disabled
                    .phanterpwa-widget-icon-wrapper
                        background-color: #d0d0d0
            input
                border-radius: 5px
                line-height: 1.5rem
                width: 100%
                padding: 5px
                background-color: $white
                border: 1px solid $grey07
                transition: box-shadow 0.3s ease, border, 0.3s ease
            label
                left: 5px
                top: 0px
                position: absolute
                color: $grey07
                font-size: 1rem
                transition: color 0.3s ease
            select
                display: none
            &.has_value
                label
                    color: $components
                    transition: color 0.3s ease
            &.focus
                input
                    box-shadow: 0px 0px 5px $components
                    border: 1px solid $components
                    transition: box-shadow 0.3s ease, border, 0.3s ease

                label
                    color: $components
                    transition: color 0.3s ease
            &.pre_focus
                input
                    box-shadow: 0px 0px 5px $components
                    border: 1px solid $components
                    transition: box-shadow 0.3s ease, border, 0.3s ease
                label
                    color: $components
                    transition: color 0.3s ease
        &.phanterpwa-widget-wear-elegant
            position: relative
            padding-top: 5px
            .phanterpwa-widget-select-touchpad
                position: absolute
                width: 100%
                top: 6px
                left: 0
                height: 100
                min-height: 52px
                cursor: pointer
                &:focus
                    outline: none
            .phanterpwa-widget-icon-wrapper
                top: 15px
            .phanterpwa-widget-select-caret
                top: 24px
                right: 7px
            .phanterpwa-widget-check
                top: 7px
                right: 7px
            &.has_label
                padding: 22px 0px 10px 5px
                .phanterpwa-widget-select-touchpad
                    top: 7px
                    min-height: 67px
                .phanterpwa-widget-select-caret
                    top: 42px
                .phanterpwa-widget-check
                    top: 25px
                .phanterpwa-widget-icon-wrapper
                    top: 29px

            input
                border-radius: 5px
                line-height: 2rem
                width: 100%
                padding: 10px
                background-color: $white
                border: 1px solid $grey07
                transition: border 0.3s ease
                &::placeholder
                    text-transform: uppercase
            label
                left: 5px
                top: 0px
                position: absolute
                color: $grey07
                font-size: 1rem
                transition: color 0.3s ease
            select
                display: none
            .phanterpwa-widget-select-caret
                position: absolute
                font-size: 1rem
            .phanterpwa-widget-check
                position: absolute
                font-size: 0.7rem
            &.has_icon
                padding-right: 45px
                .phanterpwa-widget-select-touchpad    
                    width: calc(100% - 40px)
                .phanterpwa-widget-icon-wrapper
                    width: 40px
                    height: 40px
                    position: absolute
                    right: 0
                    
                    background-color: $components
                    text-align: center
                    line-height: 40px
                    border-radius: 29px
                .phanterpwa-widget-select-caret
                    right: 53px
                .phanterpwa-widget-check
                    right: 53px
                &.has_disabled
                    .phanterpwa-widget-icon-wrapper
                        background-color: #d0d0d0
            &.has_value
                label
                    color: $components
                    transition: color 0.3s ease
            &.focus
                input
                    border: 1px solid $components
                    transition: box-shadow 0.3s ease, border, 0.3s ease

                label
                    color: $components
                    transition: color 0.3s ease
            &.pre_focus
                input
                    border: 1px solid $components
                    transition: box-shadow 0.3s ease, border, 0.3s ease
                label
                    color: $components
                    transition: color 0.3s ease


    .phanterpwa-widget-autocomplete-wrapper
        .phanterpwa-widget-autocomplete-li-title
            color: $white

        &.phanterpwa-widget-wear-material
            position: relative
            padding-top: 10px
            .phanterpwa-widget-autocomplete-touchpad
                position: absolute
                width: 100%
                top: 0
                left: 0
                height: 100
                min-height: 50px
                cursor: pointer
                &:focus
                    outline: none
            input
                cursor: pointer
                width: 100%
                width: calc(100% - 38px)
                padding: 5px
                background-color: transparent
                border: none
                &::placeholder
                    color: $material_level05
                    opacity: 1
                    transition: opacity 0.3s ease, color 0.3s ease
                &[enabled]
                    color: $default_font_color
            label
                cursor: pointer
                left: 5px
                bottom: 20px
                position: absolute
                color: $grey07
                font-size: 1rem
                line-height: 1rem
                transition: bottom 0.3s ease, color 0.3s ease, font-size 0.3s ease, left 0.3s ease, line-height 0.3s ease
            select
                display: none
            .material-widgets-animation-onfocus
                width: 0
                transition: width 0.3s ease
                margin: auto
                bottom: -1px
                height: 2px
            hr.material-widgets-animation-offfocus
                border-bottom: 1px solid $grey07
                width: 100% !important
                margin: 0 !important
                transition: border-bottom 0.3s ease
            .phanterpwa-widget-autocomplete-caret
                position: absolute
                top: 12px
                right: 13px
                font-size: 1rem
            .phanterpwa-widget-check
                position: absolute
                top: 12px
                right: 30px
                font-size: 0.7rem
            &.has_icon
                .phanterpwa-widget-autocomplete-caret
                    right: 53px
                .phanterpwa-widget-check
                    right: 50px
                .phanterpwa-widget-autocomplete-touchpad    
                    width: calc(100% - 40px)
                .phanterpwa-widget-icon-wrapper
                    cursor: pointer

            &.has_value
                label
                    left: 5px
                    bottom: 39px
                    position: absolute
                    color: $components
                    font-size: 0.8rem
                    line-height: 0.6rem
                    transition: bottom 0.3s ease, color 0.3s ease, font-size 0.3s ease, left 0.3s ease, line-height 0.3s ease
            &.has_label
                input
                    &::placeholder
                        color: rgba(128, 128, 128, 0)
                        opacity: 0
                        transition: opacity 0.3s ease, color 0.3s ease
            &.focus
                input
                    &::placeholder
                        color: $material_level05
                        opacity: 1
                        transition: opacity 0.3s ease, color 0.3s ease

                label
                    left: 5px
                    bottom: 39px
                    position: absolute
                    color: $components
                    font-size: 0.8rem
                    line-height: 0.6rem
                    transition: bottom 0.3s ease, color 0.3s ease, font-size 0.3s ease, left 0.3s ease, line-height 0.3s ease
                .material-widgets-animation-onfocus
                    width: 100%
                    height: 2px
                    background-color: $components
                    transition: width 0.3s ease
                hr.material-widgets-animation-offfocus
                    border-bottom: 1px solid $components
                    transition: border-bottom 0.3s ease
            &.pre_focus
                label
                    color: $components
                .material-widgets-animation-onfocus
                    width: 100%
                    height: 2px
                    background-color: $components
                    transition: width 0.3s ease
                hr.material-widgets-animation-offfocus
                    border-bottom: 1px solid $components
                    transition: border-bottom 0.3s ease
        &.phanterpwa-widget-wear-shadows
            position: relative
            padding-top: 5px
            .phanterpwa-widget-autocomplete-touchpad
                position: absolute
                width: 100%
                top: 7px
                left: 0
                height: 100
                min-height: 36px
                cursor: pointer
                &:focus
                    outline: none
            .phanterpwa-widget-autocomplete-caret
                position: absolute
                top: 12px
                right: 13px
                font-size: 1rem
            .phanterpwa-widget-check
                position: absolute
                top: 16px
                right: 30px
                font-size: 0.7rem
            .phanterpwa-widget-icon-wrapper
                top: 4px
            &.has_label
                padding: 22px 0px 10px 5px
                .phanterpwa-widget-autocomplete-caret
                    position: absolute
                    top: 30px
                    right: 13px
                    font-size: 1rem
                .phanterpwa-widget-check
                    position: absolute
                    top: 32px
                    right: 30px
                    font-size: 0.7rem
                .phanterpwa-widget-icon-wrapper
                    top: 20px
                .phanterpwa-widget-autocomplete-touchpad
                    top: 9px
                    min-height: 50px
            &.has_icon
                padding-right: 45px
                .phanterpwa-widget-autocomplete-touchpad    
                    width: calc(100% - 40px)
                .phanterpwa-widget-icon-wrapper
                    width: 40px
                    height: 40px
                    position: absolute
                    right: 0
                    background-color: $components
                    text-align: center
                    line-height: 40px
                    border-radius: 29px
                .phanterpwa-widget-autocomplete-caret
                    right: 53px
                .phanterpwa-widget-check
                    right: 70px
                &.has_disabled
                    .phanterpwa-widget-icon-wrapper
                        background-color: #d0d0d0
            input
                border-radius: 5px
                line-height: 1.5rem
                width: 100%
                padding: 5px
                background-color: $white
                border: 1px solid $grey07
                transition: box-shadow 0.3s ease, border, 0.3s ease
            label
                left: 5px
                top: 0px
                position: absolute
                color: $grey07
                font-size: 1rem
                transition: color 0.3s ease
            select
                display: none
            &.has_value
                label
                    color: $components
                    transition: color 0.3s ease
            &.focus
                input
                    box-shadow: 0px 0px 5px $components
                    border: 1px solid $components
                    transition: box-shadow 0.3s ease, border, 0.3s ease

                label
                    color: $components
                    transition: color 0.3s ease
            &.pre_focus
                input
                    box-shadow: 0px 0px 5px $components
                    border: 1px solid $components
                    transition: box-shadow 0.3s ease, border, 0.3s ease
                label
                    color: $components
                    transition: color 0.3s ease
        &.phanterpwa-widget-wear-elegant
            position: relative
            padding-top: 5px
            .phanterpwa-widget-autocomplete-touchpad
                position: absolute
                width: 100%
                top: 6px
                left: 0
                height: 100
                min-height: 52px
                cursor: pointer
                &:focus
                    outline: none
            .phanterpwa-widget-icon-wrapper
                top: 15px
            .phanterpwa-widget-autocomplete-caret
                top: 24px
                right: 7px
            .phanterpwa-widget-check
                top: 7px
                right: 7px
            &.has_label
                padding: 22px 0px 10px 5px
                .phanterpwa-widget-autocomplete-touchpad
                    top: 7px
                    min-height: 67px
                .phanterpwa-widget-autocomplete-caret
                    top: 42px
                .phanterpwa-widget-check
                    top: 25px
                .phanterpwa-widget-icon-wrapper
                    top: 29px

            input
                border-radius: 5px
                line-height: 2rem
                width: 100%
                padding: 10px
                background-color: $white
                border: 1px solid $grey07
                transition: border 0.3s ease
                &::placeholder
                    text-transform: uppercase
            label
                left: 5px
                top: 0px
                position: absolute
                color: $grey07
                font-size: 1rem
                transition: color 0.3s ease
            select
                display: none
            .phanterpwa-widget-autocomplete-caret
                position: absolute
                font-size: 1rem
            .phanterpwa-widget-check
                position: absolute
                font-size: 0.7rem
            &.has_icon
                padding-right: 45px
                .phanterpwa-widget-autocomplete-touchpad    
                    width: calc(100% - 40px)
                .phanterpwa-widget-icon-wrapper
                    width: 40px
                    height: 40px
                    position: absolute
                    right: 0
                    
                    background-color: $components
                    text-align: center
                    line-height: 40px
                    border-radius: 29px
                .phanterpwa-widget-autocomplete-caret
                    right: 53px
                .phanterpwa-widget-check
                    right: 53px
                &.has_disabled
                    .phanterpwa-widget-icon-wrapper
                        background-color: #d0d0d0
            &.has_value
                label
                    color: $components
                    transition: color 0.3s ease
            &.focus
                input
                    border: 1px solid $components
                    transition: box-shadow 0.3s ease, border, 0.3s ease

                label
                    color: $components
                    transition: color 0.3s ease
            &.pre_focus
                input
                    border: 1px solid $components
                    transition: box-shadow 0.3s ease, border, 0.3s ease
                label
                    color: $components
                    transition: color 0.3s ease


    .phanterpwa-widget-multselect-wrapper
        .phanterpwa-widget-multselect-li-title
            color: $white

        &.phanterpwa-widget-wear-material
            position: relative
            padding-top: 10px
            .phanterpwa-widget-multselect-touchpad
                position: absolute
                width: 100%
                top: 0
                left: 0
                height: 100
                min-height: 50px
                cursor: pointer
                &:focus
                    outline: none
            input
                cursor: pointer
                width: 100%
                width: calc(100% - 38px)
                padding: 5px
                background-color: transparent
                border: none
                &::placeholder
                    color: rgba(128, 128, 128, 0)
                    opacity: 0
                    transition: opacity 0.3s ease, color 0.3s ease
                &[enabled]
                    color: $default_font_color
            label
                cursor: pointer
                left: 5px
                top: 15px
                position: absolute
                color: $grey07
                font-size: 1rem
                line-height: 1rem
                transition: bottom 0.3s ease, color 0.3s ease, font-size 0.3s ease, left 0.3s ease, line-height 0.3s ease
            select
                display: none
            .material-widgets-animation-onfocus
                width: 0
                transition: width 0.3s ease
                margin: auto
                bottom: -1px
                height: 2px
            hr.material-widgets-animation-offfocus
                border-bottom: 1px solid $grey07
                width: 100% !important
                margin: 0 !important
                transition: border-bottom 0.3s ease
            .phanterpwa-widget-multselect-caret
                position: absolute
                top: 12px
                right: 13px
                font-size: 1rem
            .phanterpwa-widget-check
                position: absolute
                top: 12px
                right: 30px
                font-size: 0.7rem
            &.has_icon
                .phanterpwa-widget-multselect-touchpad
                    width: calc(100% - 40px)
                .phanterpwa-widget-multselect-caret
                    right: 53px
                .phanterpwa-widget-check
                    right: 70px
            &.has_value
                label
                    left: 5px
                    top: 0px
                    position: absolute
                    color: $components
                    font-size: 0.8rem
                    line-height: 0.6rem
                    transition: top 0.3s ease, color 0.3s ease, font-size 0.3s ease, left 0.3s ease, line-height 0.3s ease
            &.focus
                input
                    &::placeholder
                        color: $material_level05
                        opacity: 1
                        transition: opacity 0.3s ease, color 0.3s ease

                label
                    left: 5px
                    top: 0px
                    bottom: auto
                    position: absolute
                    color: $components
                    font-size: 0.8rem
                    line-height: 0.6rem
                    transition: top 0.3s ease, color 0.3s ease, font-size 0.3s ease, left 0.3s ease, line-height 0.3s ease
                .material-widgets-animation-onfocus
                    width: 100%
                    height: 2px
                    background-color: $components
                    transition: width 0.3s ease
                hr.material-widgets-animation-offfocus
                    border-bottom: 1px solid $components
                    transition: border-bottom 0.3s ease
            &.pre_focus
                label
                    color: $components
                .material-widgets-animation-onfocus
                    width: 100%
                    height: 2px
                    background-color: $components
                    transition: width 0.3s ease
                hr.material-widgets-animation-offfocus
                    border-bottom: 1px solid $components
                    transition: border-bottom 0.3s ease
        &.phanterpwa-widget-wear-shadows
            position: relative
            padding-top: 5px
            .phanterpwa-widget-multselect-touchpad
                position: absolute
                width: 100%
                top: 5px
                left: 0
                height: 36px
                min-height: 36px
                cursor: pointer
                &:focus
                    outline: none
            .phanterpwa-widget-multselect-caret
                top: 15px
                right: 13px
            .phanterpwa-widget-check
                top: 17px
                right: 30px
            .phanterpwa-widget-icon-wrapper
                top: 3px
            &.has_label
                padding: 22px 0 10px 5px
                .phanterpwa-widget-multselect-touchpad
                    top: 9px
                    height: 50px
                .phanterpwa-widget-multselect-caret
                    top: 30px
                    right: 13px
                .phanterpwa-widget-check
                    top: 32px
                    right: 30px
                .phanterpwa-widget-icon-wrapper
                    top: 20px
            input
                border-radius: 5px
                line-height: 1.5rem
                width: 100%
                padding: 5px
                background-color: $white
                border: 1px solid $grey07
                transition: box-shadow 0.3s ease, border, 0.3s ease
            label
                left: 5px
                top: 0px
                position: absolute
                color: $grey07
                font-size: 1rem
                transition: color 0.3s ease
            select
                display: none
            .phanterpwa-widget-multselect-caret
                position: absolute
                font-size: 1rem
            .phanterpwa-widget-check
                position: absolute
                font-size: 0.7rem
            &.has_icon
                padding-right: 45px
                .phanterpwa-widget-multselect-touchpad
                    width: calc(100% - 40px)
                .phanterpwa-widget-icon-wrapper
                    width: 40px
                    height: 40px
                    position: absolute
                    right: 0
                    background-color: $components
                    text-align: center
                    line-height: 40px
                    border-radius: 29px
                .phanterpwa-widget-multselect-caret
                    right: 53px
                .phanterpwa-widget-check
                    right: 70px
                &.has_disabled
                    .phanterpwa-widget-icon-wrapper
                        background-color: #d0d0d0
            &.has_value
                label
                    color: $components
                    transition: color 0.3s ease
            &.focus
                input
                    box-shadow: 0px 0px 5px $components
                    border: 1px solid $components
                    transition: box-shadow 0.3s ease, border, 0.3s ease

                label
                    color: $components
                    transition: color 0.3s ease
            &.pre_focus
                input
                    box-shadow: 0px 0px 5px $components
                    border: 1px solid $components
                    transition: box-shadow 0.3s ease, border, 0.3s ease
                label
                    color: $components
                    transition: color 0.3s ease
        &.phanterpwa-widget-wear-elegant
            position: relative
            padding-top: 5px
            .phanterpwa-widget-multselect-touchpad
                position: absolute
                width: 100%
                top: 6px
                left: 0
                min-height: 54px
                cursor: pointer
                &:focus
                    outline: none
            .phanterpwa-widget-multselect-caret
                top: 24px
                right: 7px
            .phanterpwa-widget-check
                top: 7px
                right: 7px
            .phanterpwa-widget-icon-wrapper
                top: 15px
            &.has_label
                padding: 22px 0 10px 5px
                .phanterpwa-widget-multselect-caret
                    top: 40px
                    right: 7px
                .phanterpwa-widget-check
                    top: 24px
                    right: 7px
                .phanterpwa-widget-icon-wrapper
                    top: 27px
                .phanterpwa-widget-multselect-touchpad
                    top: 6px
                    height: 70px
            input
                border-radius: 5px
                line-height: 2rem
                width: 100%
                padding: 10px
                background-color: $white
                border: 1px solid $grey07
                transition: border 0.3s ease
                &::placeholder
                    text-transform: uppercase
            label
                left: 5px
                top: 0px
                position: absolute
                color: $grey07
                font-size: 1rem
                transition: color 0.3s ease
            select
                display: none
            .phanterpwa-widget-multselect-caret
                position: absolute
                font-size: 1rem
            .phanterpwa-widget-check
                position: absolute

            &.has_icon
                padding-right: 45px
                .phanterpwa-widget-multselect-touchpad
                    width: calc(100% - 40px)
                .phanterpwa-widget-icon-wrapper
                    width: 40px
                    height: 40px
                    position: absolute
                    right: 0

                    background-color: $components
                    text-align: center
                    line-height: 40px
                    border-radius: 29px
                .phanterpwa-widget-multselect-caret
                    right: 52px
                .phanterpwa-widget-check
                    right: 52px
                &.has_disabled
                    .phanterpwa-widget-icon-wrapper
                        background-color: #d0d0d0
            &.has_value
                label
                    color: $components
                    transition: color 0.3s ease
            &.focus
                input
                    border: 1px solid $components
                    transition: box-shadow 0.3s ease, border, 0.3s ease

                label
                    color: $components
                    transition: color 0.3s ease
            &.pre_focus
                input
                    border: 1px solid $components
                    transition: box-shadow 0.3s ease, border, 0.3s ease
                label
                    color: $components
                    transition: color 0.3s ease

.phanterpwa-widget
    .phanterpwa-widget-wrapper
        .phanterpwa-widget-multselect-values
            min-height: 29px
            overflow: auto
            padding-right: 40px
            padding-top: 8px
            &:focus
                outline: none
            .phanterpwa-widget-multselect-value-content
                float: left
                padding: 0px 22px 0px 10px
                position: relative
                line-height: 20px
                text-align: center
                margin: 5px 5px 2px 5px
                background-color: $components
                border-radius: 20px
                color: $fg_components
                font-size: 12pt
                &:focus
                    outline: none
                    color: $attention
                    .phanterpwa-widget-multselect-value-icon_close
                        color: $attention
                .phanterpwa-widget-multselect-value
                    padding-bottom: 2px
                .phanterpwa-widget-multselect-value-icon_close
                    position: absolute
                    top: 1px
                    right: 0px
                    width: 20px
                    color: $fg_components
                    cursor: pointer
                    height: 20px
                    line-height: 20px
                    font-size: 9pt
                    &:hover
                        color: $attention
        &.phanterpwa-widget-wear-shadows
            hr
                display: none;
            .phanterpwa-widget-multselect-values
                border-radius: 5px
                line-height: 1.5rem
                min-height: 36px
                width: 100%
                padding: 5px 37px 5px 5px
                background-color: $white
                border: 1px solid $grey07
                transition: box-shadow 0.3s ease, border, 0.3s ease
            &.focus
                .phanterpwa-widget-multselect-values
                    box-shadow: 0px 0px 5px $components
                    border: 1px solid $components
                    transition: box-shadow 0.3s ease, border, 0.3s ease
            &.pre_focus
                .phanterpwa-widget-multselect-values
                    box-shadow: 0px 0px 5px $components
                    border: 1px solid $components
                    transition: box-shadow 0.3s ease, border, 0.3s ease
        &.phanterpwa-widget-wear-elegant    
            .phanterpwa-widget-multselect-values
                border-radius: 5px
                line-height: 2rem
                min-height: 54px
                width: 100%
                padding: 10px 17px 10px 10px
                background-color: $white
                border: 1px solid $grey07
                transition: border 0.3s ease
                &::placeholder
                    text-transform: uppercase
            &.focus
                .phanterpwa-widget-multselect-values
                    border: 1px solid $components
                    transition: box-shadow 0.3s ease, border, 0.3s ease
            &.pre_focus
                .phanterpwa-widget-multselect-values
                    border: 1px solid $components
                    transition: box-shadow 0.3s ease, border, 0.3s ease


.phanterpwa-widget
    .phanterpwa-widget-list_string-wrapper
        .phanterpwa-widget-list_string-list_values
            width: 100%
            height: 32px
            overflow: hidden
            &:focus
                outline: none
            .phanterpwa-widget-list_string-value-content
                float: left
                padding: 0px 40px 0px 15px
                position: relative
                line-height: 40px
                text-align: center
                margin: 5px
                background-color: $components
                border-radius: 20px
                color: $fg_components
                &:focus
                    outline: none
                    color: $attention
                    .phanterpwa-widget-list_string-value-icon_close
                        color: $attention
                .phanterpwa-widget-list_string-value-icon_close
                    position: absolute
                    top: 0px
                    right: 0px
                    width: 40px
                    color: $fg_components
                    cursor: pointer
                    &:hover
                        color: $attention
                &.widget-liststring-fixed
                    padding: 0px 15px 0px 15px
                    background-color: $attention
                    &:focus
                        color: $fg_components
            .phanterpwa-widget-list_string-plus_icon-container
                opacity: 0
                float: left
                padding: 0px 40px 0px 0px
                position: relative
                line-height: 40px
                margin: 5px
                height: 40px
                width: 40px
                background-color: $grey03
                color: $components
                border-radius: 20px
                transition: width 0.3s ease, opacity 0.3s ease
                &.has_input
                    padding: 0px 40px 0px 15px
                    min-width: 100px
                    width: 200px
                    transition: width 0.3s ease
                .icon_button
                    position: absolute
                    position: absolute
                    top: 0px
                    right: 0px
                    width: 40px
                    cursor: pointer
                    &:hover
                        color: $attention
                &:focus
                    outline: none
                    .icon_button
                        color: $attention                    
        .phanterpwa-widget-list_string-list_predefinitions_values
            display: table
            width: 100%
            background-color: $grey02
            border-radius: 0px 0px 10px 10px
            .phanterpwa-widget-list_string-value-predefinition-content
                float: left
                padding: 0px 40px 0px 15px
                position: relative
                line-height: 40px
                text-align: center
                margin: 5px
                background-color: $grey04
                border-radius: 20px
                color: $components
                &:focus
                    outline: none
                    color: $attention
                .phanterpwa-widget-list_string-value-icon_plus_predifinition
                    position: absolute
                    top: 0px
                    right: 0px
                    width: 40px
                    color: $components
                    cursor: pointer
                    &:hover
                        color: $attention
        .phanterpwa-widget-list_string-vertical-container
            display: flex
            .phanterpwa-widget-list_string-vertical-list_values
                width: 100%
                overflow: hidden
                &:focus
                    outline: none
                .phanterpwa-widget-list_string-value-content
                    padding: 0px 40px 0px 15px
                    position: relative
                    line-height: 40px
                    text-align: center
                    margin: 5px
                    background-color: $components
                    border-radius: 20px
                    color: $fg_components
                    &:focus
                        outline: none
                        color: $attention
                        .phanterpwa-widget-list_string-value-icon_close
                            color: $attention
                    .phanterpwa-widget-list_string-value-icon_close
                        position: absolute
                        top: 0px
                        right: 0px
                        width: 40px
                        color: $fg_components
                        cursor: pointer
                        &:hover
                            color: $attention
                    &.widget-liststring-fixed
                        padding: 0px 15px 0px 15px
                        background-color: $attention
                        &:focus
                            color: $fg_components
                .phanterpwa-widget-list_string-plus_icon-container
                    opacity: 0
                    padding: 0px 40px 0px 0px
                    position: relative
                    line-height: 40px
                    margin: 5px
                    height: 40px
                    width: 40px
                    background-color: $grey03
                    color: $components
                    border-radius: 20px
                    transition: width 0.3s ease, opacity 0.3s ease
                    &.has_input
                        padding: 0px 40px 0px 15px
                        min-width: 100px
                        width: 200px
                        transition: width 0.3s ease
                    .icon_button
                        position: absolute
                        position: absolute
                        top: 0px
                        right: 0px
                        width: 40px
                        cursor: pointer
                        &:hover
                            color: $attention
                    &:focus
                        outline: none
                        .icon_button
                            color: $attention                    
            .phanterpwa-widget-list_string-vertical-list_predefinitions_values
                display: table
                width: 100%
                background-color: $grey02
                height: 100%

                .phanterpwa-widget-list_string-value-predefinition-content
                    padding: 0px 40px 0px 15px
                    position: relative
                    line-height: 40px
                    text-align: center
                    margin: 5px
                    background-color: $grey04
                    border-radius: 20px
                    color: $components
                    &:focus
                        outline: none
                        color: $attention
                    .phanterpwa-widget-list_string-value-icon_plus_predifinition
                        position: absolute
                        top: 0px
                        right: 0px
                        width: 40px
                        color: $components
                        cursor: pointer
                        &:hover
                            color: $attention
        &.focus
            .phanterpwa-widget-list_string-list_values
                min-height: 50px
                height: auto
            .phanterpwa-widget-list_string-plus_icon-container
                opacity: 1
                transition: width 0.3s ease, opacity 0.3s ease
        &.has_value
            .phanterpwa-widget-list_string-list_values
                height: auto
            .phanterpwa-widget-list_string-plus_icon-container
                opacity: 1
                transition: width 0.3s ease, opacity 0.3s ease
            &.choices
                label
                    position: relative !important
                    font-size: 1rem !important
                    top: 2px
                    left: 0
        &.choices
            label
                position: relative
                font-size: 1rem
                top: 2px
                left: 0
            hr
                display: none
            .phanterpwa-widget-list_string-choices_table
                .phanterpwa-widget.phanterpwa-widget-table-container
                    &.table
                        overflow: hidden !important
                    .phanterpwa-widget-table
                        td
                            &.phanterpwa-widget-table-data-td
                                padding: 0px

            .phanterpwa-widget
                .phanterpwa-widget-wrapper
                    &.phanterpwa-widget-checkbox-wrapper
                        padding: 0px
                        label
                            position: relative
                            font-size: 1rem
                            top: 2px
                            left: 0
                        hr
                            display: none
                        .material-widgets-animation-onfocus
                            display: none

table
    &.phanterpwa-widget-select-options-wrapper
        width: 100%
        padding: 0
        margin: 0
        border: none
        border-collapse: collapse
        border-spacing: 0
        td
            &.phanterpwa-widget-select-li-title
                text-align: center
                background-color: $components
                color: $white
                height: 2rem
                .phanterpwa-widget-select-placeholder
                    opacity: 1
                    transition: opacity 0.5s ease
                &.has_editable
                    height: 3rem
                &.editable_enabled
                    .phanterpwa-widget-select-placeholder
                        opacity: 0
                        transition: opacity 0.5s ease

            &.phanterpwa-widget-select-li-option
                cursor: pointer
                border-top: 1px solid $material_level05
                &.selected
                    color: $components
                &:hover
                    color: $attention !important
                &.empty
                    span
                        color: $material_level04
            position: relative
            padding-right: 50px
            height: 3rem
            padding-left: 20px
            &::marker
                content: ""
            .phanterpwa-widget-select-li-icon
                position: absolute
                right: 16px
                top: 0
                line-height: 3rem
                &.phanterpwa-widget-select-li-icon_plus
                    line-height: unset
            .phanterpwa-widget-select-li-icon_plus-wrapper
                position: absolute
                width: 100%
                overflow: hidden
                transition: width 0.5s ease
                top: 0
                right: 0
                .phanterpwa-widget-select-li-input-editable-wrapper
                    position: relative
                    padding-left: 35px
                    transition: width 0.5s ease
                    width: 0px
                    margin-right: 0
                    margin-left: auto
                    i
                        line-height: 3rem
                    .phanterpwa-widget-select-li-icon_plus
                        
                        left: -5px
                        position: absolute
                        line-height: 3rem
                        right: auto
                        width: 35px
                        transform: rotate(0deg)
                        transition: all 0.5s ease
                    .phanterpwa-widget-select-li-input-editable
                        width: 100%
                        margin-right: 0
                        margin-left: auto
                        position: relative
                        transition: width 0.5s ease
                        overflow: hidden
                        input
                            border: none
                            border-bottom: 1px solid $components
                            width: 100%
                            line-height: 3rem
                            height: 3rem
                        .phanterpwa-widget-select-li-icon_confirm
                            color: $white
                            line-height: 3rem
                            position: absolute
                            top: 0
                            right: 5px
                            width: 35px
                            transition: color 0.5s ease
                &.enabled

                    .phanterpwa-widget-select-li-input-editable-wrapper
                        width: 100%
                        .phanterpwa-widget-select-li-icon_plus
                            left: 0
                            color: $alert
                            transform: rotate(45deg)
                            transition: all 0.5s ease
                        .phanterpwa-widget-select-li-icon_confirm
                            color: $ok
                            position: absolute
                            top: 0
                            right: 5px
                            width: 35px
                            transition: color 0.5s ease

    &.phanterpwa-widget-autocomplete-options-wrapper
        width: 100%
        padding: 0
        margin: 0
        border: none
        border-collapse: collapse
        border-spacing: 0
        td
            &.phanterpwa-widget-autocomplete-li-title
                text-align: center
                background-color: $components
                color: $white
                height: 2rem
                .phanterpwa-widget-autocomplete-placeholder
                    opacity: 1
                    transition: opacity 0.5s ease
                &.has_editable
                    height: 3rem
                &.editable_enabled
                    .phanterpwa-widget-autocomplete-placeholder
                        opacity: 0
                        transition: opacity 0.5s ease

            &.phanterpwa-widget-autocomplete-li-option
                cursor: pointer
                border-top: 1px solid $material_level05
                &.selected
                    color: $components
                &:hover
                    color: $attention !important
                &:focus
                    color: $attention !important
                &.empty
                    span
                        color: $material_level04
            position: relative
            padding-right: 50px
            height: 3rem
            padding-left: 20px
            &::marker
                content: ""
            .phanterpwa-widget-autocomplete-li-icon
                position: absolute
                right: 16px
                top: 0
                line-height: 3rem
                &.phanterpwa-widget-autocomplete-li-icon_plus
                    line-height: unset
            .phanterpwa-widget-autocomplete-li-icon_plus-wrapper
                position: absolute
                width: 100%
                overflow: hidden
                transition: width 0.5s ease
                top: 0
                right: 0
                .phanterpwa-widget-autocomplete-li-input-editable-wrapper
                    position: relative
                    padding-left: 35px
                    transition: width 0.5s ease
                    width: 0px
                    margin-right: 0
                    margin-left: auto
                    i
                        line-height: 3rem
                    .phanterpwa-widget-autocomplete-li-icon_plus
                        
                        left: -5px
                        position: absolute
                        line-height: 3rem
                        right: auto
                        width: 35px
                        transform: rotate(0deg)
                        transition: all 0.5s ease
                    .phanterpwa-widget-autocomplete-li-input-editable
                        width: 100%
                        margin-right: 0
                        margin-left: auto
                        position: relative
                        transition: width 0.5s ease
                        overflow: hidden
                        input
                            border: none
                            border-bottom: 1px solid $components
                            width: 100%
                            line-height: 3rem
                            height: 3rem
                        .phanterpwa-widget-autocomplete-li-icon_confirm
                            color: $white
                            line-height: 3rem
                            position: absolute
                            top: 0
                            right: 5px
                            width: 35px
                            transition: color 0.5s ease
                &.enabled

                    .phanterpwa-widget-autocomplete-li-input-editable-wrapper
                        width: 100%
                        .phanterpwa-widget-autocomplete-li-icon_plus
                            left: 0
                            color: $alert
                            transform: rotate(45deg)
                            transition: all 0.5s ease
                        .phanterpwa-widget-autocomplete-li-icon_confirm
                            color: $ok
                            position: absolute
                            top: 0
                            right: 5px
                            width: 35px
                            transition: color 0.5s ease

    &.phanterpwa-widget-multselect-options-wrapper
        width: 100%
        padding: 0
        margin: 0
        border: none
        border-collapse: collapse
        border-spacing: 0
        td
            &.phanterpwa-widget-multselect-li-title
                text-align: center
                background-color: $components
                color: $white
                height: 2rem
                &.has_editable
                    height: 3rem
                &.editable_enabled
                    .phanterpwa-widget-multselect-placeholder
                        opacity: 0
                        transition: opacity 0.5s ease
            &.phanterpwa-widget-multselect-li-option
                cursor: pointer
                border-top: 1px solid $material_level05
                &.selected
                    color: $components
                &:hover
                    color: $attention !important
                &.empty
                    span
                        color: $material_level04
            position: relative
            padding-right: 50px
            height: 3rem
            padding-left: 20px
            &::marker
                content: ""
            .phanterpwa-widget-multselect-li-icon
                position: absolute
                right: 16px
                top: 0
                line-height: 3rem
                &.phanterpwa-widget-multselect-li-icon_plus
                    line-height: unset
            .phanterpwa-widget-multselect-li-icon_plus-wrapper
                position: absolute
                width: 100%
                overflow: hidden
                transition: width 0.5s ease
                top: 0
                right: 0
                .phanterpwa-widget-multselect-li-input-editable-wrapper
                    position: relative
                    padding-left: 35px
                    transition: width 0.5s ease
                    width: 0px
                    margin-right: 0
                    margin-left: auto
                    i
                        line-height: 3rem
                    .phanterpwa-widget-multselect-li-icon_plus
                        
                        left: -5px
                        position: absolute
                        line-height: 3rem
                        right: auto
                        width: 35px
                        transform: rotate(0deg)
                        transition: all 0.5s ease
                    .phanterpwa-widget-multselect-li-input-editable
                        width: 100%
                        margin-right: 0
                        margin-left: auto
                        position: relative
                        transition: width 0.5s ease
                        overflow: hidden
                        input
                            border: none
                            border-bottom: 1px solid $components
                            width: 100%
                            line-height: 3rem
                            height: 3rem
                        .phanterpwa-widget-multselect-li-icon_confirm
                            color: $white
                            position: absolute
                            top: 0
                            right: 5px
                            width: 35px
                            transition: color 0.5s ease
                &.enabled

                    .phanterpwa-widget-multselect-li-input-editable-wrapper
                        width: 100%
                        .phanterpwa-widget-multselect-li-icon_plus
                            left: 0
                            color: $alert
                            transform: rotate(45deg)
                            transition: all 0.5s ease
                        .phanterpwa-widget-multselect-li-icon_confirm
                            color: $ok
                            position: absolute
                            top: 0
                            right: 5px
                            width: 35px
                            transition: color 0.5s ease

.phanterpwa-widget-menubox-options-content
    .phanterpwa-widget-menubox-option-no_icon
        margin-right: 60px
    .phanterpwa-widget-menubox-option-icon-content
        width: 20px
        padding-right: 10px

    hr
        margin: 0
        color: $material_level05
    .phanterpwa-widget-menubox-option
        min-width: 150px
        height: 40px
        line-height: 20px
        width: 100%
        white-space: nowrap
        color: $components
        text-align: center
        margin: 0
        padding: 10px 20px
        cursor: pointer
        &:hover
            background-color: rgb(224, 224, 224)
        .phanterpwa-widget-menubox-option-icon-content
            display: none

    a.phanterpwa-widget-menubox-option
        display: block
        text-decoration: none
    ul
        margin: 0
        padding: 0
        >li
            color: $components
            text-align: center
            margin: 0
            padding: 10px 20px
            &::marker
                content: ""
            cursor: pointer
            &:hover
                background-color: rgb(224, 224, 224)
    &.menu_option_has_icon
        .phanterpwa-widget-menubox-option
            text-align: left
            .phanterpwa-widget-menubox-option-icon-content
                display: inline-block
                width: 25px
                padding-right: 10px

.phanterpwa-widget
    .phanterpwa-widget-inert-wrapper
        &.phanterpwa-widget-wear-material
            hr
                &.material-widgets-animation-offfocus
                    border-bottom-color: $warning
        &.phanterpwa-widget-wear-shadows
            hr
                display: none
    &.data_view
        .phanterpwa-widget-inert-wrapper
            &.phanterpwa-widget-wear-shadows
                padding: 22px 5px 0px 5px
                input
                    background-color: #f4f4f4
                    border: 1px solid #c6c6c6
                    color: black !important

.phanterpwa-widget
    &.phanterpwa-widget-button
        div
            &.btn
                display: inline-block
        button, div, a
            .loading2, .loading1
                display: none
                transform: rotate(29deg)
                width: 25%
                height: 300%
                position: absolute
                opacity: 0.5
                top: -100%
                left: -50%
            &.disabled
                background-color: #939191
                background-image: linear-gradient(#939191, #afafaf)

                &:hover
                    background-color: #6e6e6e
                    background-image: linear-gradient(#6e6e6e, #7e7e7e)
        &.loading
            button, div, a
                &.btn
                    background-image: linear-gradient(#9d9d9d, #d0d0d0)
                    &:hover
                        background-image: linear-gradient(#9d9d9d, #d0d0d0)

                .loading1
                    display: block

                    background-color: orange
                    -webkit-animation: button_loading 1s linear infinite -1.6s 
                    animation: button_loading 1s linear infinite -1.6s

                .loading2
                    display: block
                    background-color: red
                    -webkit-animation: button_loading 1s linear infinite -1.6s 
                    animation: button_loading 1s linear infinite -1.6s reverse


@keyframes button_loading
  0%
    left: -50%
  100%
    left: 110%


