@keyframes modalInFromNone 
  0%
    display: none
    padding-top: 0px
    opacity: 0
  1%
    display: block
    padding-top: 0px
    opacity: 0
  100%
    display: block
    padding-top: 30px
    opacity: 1

.phanterpwa-component-modal-container
    .phanterpwa-component-modal-wrapper
        position: relative
        min-height: 190px
        max-height: 95%
        overflow: hidden
        background-color: $white
        padding-top: 80px
        padding-bottom: 80px
        .phanterpwa-component-modal-header-container
            position: absolute
            top: 0
            width: 100%
            padding: 10px 50px
            height: 80px
            box-shadow: 1px 0px 4px $grey07
            z-index: 1005
            .phanterpwa-component-modal-close
                position: absolute
                right: 0
                top: 0
                width: 50px
                height: 50px
                text-align: center
                font-size: 1.5rem
                line-height: 50px
                &:hover
                    color: $attention
            .phanterpwa-component-modal-title
                font-size: 1.5rem
                text-transform: uppercase
                text-align: center
                @media #{$width1}
                    font-size: 0.9rem
                @media #{$width2}
                    font-size: 0.95rem
                @media #{$width3}
                    font-size: 1rem
                @media #{$width4}
                    font-size: 1.2rem
        .phanterpwa-component-modal-content-container
            width: 100%
            padding: 10px 10px
            min-height: 50px
            overflow: auto
            height: 100%
            background-color: $material_level03
        .phanterpwa-component-modal-button-panel
            display: none
        &.has_buttons_panel
            padding-right: 50px
            position: relative                
            .phanterpwa-component-modal-button-panel
                padding-top: 10px
                display: block
                position: absolute
                left: auto
                right: 0
                width: 50px
                height: 100%
                background-color: $material_level01
                z-index: 1004

        .phanterpwa-component-modal-footer-container
            position: absolute
            bottom: 0
            width: 100%
            padding: 10px 10px
            height: 80px
            box-shadow: 1px 0px 4px $grey07
            z-index: 1005
            background-color: $material_level00

    &.phanterpwa-fixed-fulldisplay
        z-index: 1006
        opacity: 0
        display: none
        padding-top: 0px
        animation: modalInFromNone 0.5s
        &.enabled
            padding-top: 30px
            display: block
            opacity: 1
            transition: opacity 0.5s ease, padding-top 0.5s ease
            &.closing
                padding-top: 0px
                opacity: 0
            .phanterpwa-component-modal-wrapper
                margin-top: -30px
