@font-face
    font-family: "Segoe UI Mono W01 Regular"
    src: url("#{$base-url}88bdc70ec292cc29451932f9875b378a.eot")
    src: url("#{$base-url}88bdc70ec292cc29451932f9875b378a.eot?#iefix") format("embedded-opentype"), url("#{$base-url}88bdc70ec292cc29451932f9875b378a.woff2") format("woff2"), url("#{$base-url}88bdc70ec292cc29451932f9875b378a.woff") format("woff"), url("#{$base-url}88bdc70ec292cc29451932f9875b378a.ttf") format("truetype"), url("#{$base-url}88bdc70ec292cc29451932f9875b378a.svg#Segoe UI Mono W01 Regular") format("svg")

@font-face
    font-family: "Segoe UI"
    font-style: normal
    font-weight: normal
    src: local("Segoe UI Regular"), url("#{$base-url}Segoe UI.woff") format("woff")

@font-face
    font-family: "Segoe UI Italic"
    font-style: normal
    font-weight: normal
    src: local("Segoe UI Italic"), url("#{$base-url}Segoe UI Italic.woff") format("woff")

@font-face
    font-family: "Segoe UI Bold"
    font-style: normal
    font-weight: normal
    src: local("Segoe UI Bold"), url("#{$base-url}Segoe UI Bold.woff") format("woff")

@font-face
    font-family: "Segoe UI Bold Italic"
    font-style: normal
    font-weight: normal
    src: local("Segoe UI Bold Italic"), url("#{$base-url}Segoe UI Bold Italic.woff") format("woff")

/* roboto-thin - latin */
@font-face
    font-family: "Roboto Thin"
    font-style: normal
    font-weight: 400
    src: url("#{$base-url}Roboto-Thin.eot")
    src: local("Roboto Thin"), local("Roboto-Regular"), url("#{$base-url}Roboto-Thin.eot?#iefix") format("embedded-opentype"), url("#{$base-url}Roboto-Thin.woff2") format("woff2"), url("#{$base-url}Roboto-Thin.woff") format("woff"), url("#{$base-url}Roboto-Thin.ttf") format("truetype")


/* roboto-regular - latin */
@font-face
    font-family: "Roboto"
    font-style: normal
    font-weight: 400
    src: url("#{$base-url}roboto-v20-latin-regular.eot")
    src: local("Roboto"), local("Roboto-Regular"), url("#{$base-url}roboto-v20-latin-regular.eot?#iefix") format("embedded-opentype"), url("#{$base-url}roboto-v20-latin-regular.woff2") format("woff2"), url("#{$base-url}roboto-v20-latin-regular.woff") format("woff"), url("#{$base-url}roboto-v20-latin-regular.ttf") format("truetype"), url("#{$base-url}roboto-v20-latin-regular.svg#Roboto") format("svg")

/* latin-ext */
@font-face
    font-family: "Roboto Mono"
    font-style: normal
    font-weight: 400
    src: url("#{$base-url}L0x5DF4xlVMF-BfR8bXMIjhFq3-OXg.woff2") format("woff2")
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF

/* latin */
@font-face
    font-family: "Roboto Mono"
    font-style: normal
    font-weight: 400
    src: url("#{$base-url}L0x5DF4xlVMF-BfR8bXMIjhLq38.woff2") format("woff2")
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD

/* latin-ext */
@font-face
    font-family: "Cousine"
    font-style: normal
    font-weight: 400
    src: url("#{$base-url}d6lIkaiiRdih4SpP_SovzAbt.woff2") format("woff2")
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF

/* latin */
@font-face
    font-family: "Cousine"
    font-style: normal
    font-weight: 400
    src: url("#{$base-url}d6lIkaiiRdih4SpP_SQvzA.woff2") format("woff2")
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD

/* DejaVu Sans */
@font-face
    font-family: "DejaVu Sans"
    src: url("#{$base-url}DejaVuSans.eot")
    src: url("#{$base-url}DejaVuSans.eot?#iefix") format("embedded-opentype"), url("#{$base-url}DejaVuSans.woff2") format("woff2"), url("#{$base-url}DejaVuSans.woff") format("woff"), url("#{$base-url}DejaVuSans.ttf") format("truetype"), url("#{$base-url}DejaVuSans.svg#Segoe UI Mono W01 Regular") format("svg")

*
    -webkit-box-sizing: border-box
    -moz-box-sizing: border-box
    box-sizing: border-box

.p-logo
    float: left
    @media #{$width1}
        width: 70%
        text-align: center
        float: none
        margin: auto
    @media #{$width2}
        width: 70%
        text-align: center
        float: none
        margin: auto        
    @media #{$width3}
        width: 70%
        text-align: center
        float: none
        margin: auto  

.hidden_on_all_width, .hidden
    display: none

body
    background-color: $grey_lighten_2
    transition: background-color 1s
    display: flex
    min-height: 100vh
    height: 100vh
    flex-direction: column
    padding-top: 64px
    color: rgba(0, 0, 0, 0.8)
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif
    &.p-lock
        background-color: $grey_darken_3

h1, h2, h3, h4, h5, h6
    font-family: "Roboto Thin","Segoe UI","DejaVu Sans",-apple-system,BlinkMacSystemFont,Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif
    .strong
        font-family: "DejaVu Sans","Roboto Thin","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif

i
    &.phanterpwa-icon_numb
        font-style: normal
        font-weight: bold
        font-size: 1.2rem
        font-family: Roboto Thin

nav
    width: 100%
    background-color: $grey12
    color: $material_level04
    height: 64px

main
    flex: 1 0 auto

hr
    width: 100%
    border: transparent
    color: $components
    border-bottom: 1px solid
    margin: 20px 0 20px 0

.card
    h1, h2, h3, h4, h4, h5, h6
        text-align: center
        color: $components

.link
    cursor: pointer
    &:hover
        color: $attention

a
    &.link
        text-decoration: none
        color: unset
        &:visited
            color: unser

.phanterpwa-title
    text-align: center
    padding: 10px 0px
    font-size: 1.5rem
    color: $components

.phanterpwa-subtitle
    text-align: center
    padding: 10px 0px
    font-size: 1.2rem
    color: $attention


#main-container
    flex: 1 0 auto
    height: 100%
    overflow: auto
    > h2
        text-align: center

.main-nav
    position: fixed
    z-index: 1005
    top: 0
    box-shadow: 0px 2px 5px black

.masked_input, .p-monospace, .phanterpwa-monospace
    font-family: Cousine
    letter-spacing: -1px

.background-empresa
    background-image: url('/static/#{$app-version}/images/background.jpg')
    width: 100%
    min-height: 450px
    height: 100%
    background-size: 100% auto
    background-position: center
    @media #{$width1}
        background-size: auto 100%
        background-repeat: repeat
    @media #{$width2}
        background-size: auto 110%
        background-repeat: repeat

.container, .p-container, .phanterpwa-container
    width: 70%
    max-width: 1366px
    margin: auto
    @media #{$width1}
        width: 95%
    @media #{$width2}
        width: 95%
    @media #{$width3}
        width: 90%
    @media #{$width4}
        width: 80%
    @media #{$width5}
        width: 80%
    @media #{$width6}
        width: 70%
    @media #{$width7}
        width: 70%
    @media #{$width8}
        width: 70%
    &.extend, &.expand, &.expanded, &.extended
        width: 90%
        max-width: 1920px
        @media #{$width1}
            width: 97%
        @media #{$width2}
            width: 97%
        @media #{$width3}
            width: 95%
        @media #{$width4}
            width: 93%
        @media #{$width5}
            width: 93%
        @media #{$width6}
            width: 90%
        @media #{$width7}
            width: 90%
        @media #{$width8}
            width: 90%



.phanterpwa-fixed-fulldisplay
    position: fixed
    height: 100%
    width: 100%
    top: 0
    left: 0
    background-color: rgba(0,0,0, 0.7)
    z-index: 900

.phanterpwa-centralizer-wrapper
    display: table
    height: 100%
    width: 100%
    margin: auto
    .phanterpwa-centralizer-vertical
        display: table-row
        .phanterpwa-centralizer-horizontal
            display: table-cell
            vertical-align: middle
            .phanterpwa-centralizer-center
                text-align: center
                position: relative

.phanterpwa-container
    .warnings-container
        min-height: 429px
        padding: 50px 20px
        text-align: center
        margin-bottom: 30px
        .button-container
            margin-top: 20px
    .content-warnings
        text-align: center
        color: $alert
        font-size: 2rem
        h1, h2, h3, h4, h5
            color: $alert
        p
            color: $attention

    .image-warnings-container
        max-width: 256px
        height: 227px
        margin: auto
        img
            width: 100%

.main-footer, .p-footer, .phanterpwa-footer
    padding: 0
    z-index: 19
    background-color: rgb(33, 33, 33)
    padding-top: 20px
    .footer-copyright
        line-height: 3rem
        background-color: rgb(66, 65, 65)
        padding: 0 20px 0 50px
        a
            text-decoration: none
            color: $warning
