$sizes: (full: 100%, threequarters: 75%, half: 50%, quarter: 25%)

input.selector-switch
    display: none

    &.rollmod:not(:checked)~.container button.rollmod,
    &.rollmod:checked~.container button.norollmod
        display: none

.sheetform
    background-color: transparent

.charsheet
    .container
        width: 850px
        padding: 0
        margin: 0

        button[type="roll"]
            width: auto
            height: 24px
            padding: 0
            margin: 0
            border-top-left-radius: 10px
            border-bottom-right-radius: 10px
            border-radius: unset
            background-image: none
            background-color: transparent
            box-sizing: border-box
            -moz-box-sizing: border-box
            -webkit-box-sizing: border-box

            label
                line-height: 24px
                font-size: 13px
                text-align: center
                font-weight: 700

            input
                line-height: 24px
                font-size: 13px
                text-align: center
                font-weight: 700

        input
            background: transparent
            width: 100%
            border: 1px solid #ddd
            border-radius: 3px

        input[type=number]
            text-align: center
            -moz-appearance: textfield
            -webkit-appearance: textfield

        textarea
            background: transparent
            margin: 0
            width: 100%
            height: 65px
            resize: vertical
            box-sizing: border-box
            border: 1px solid #ddd
            border-radius: 3px

        select
            background: transparent

        label
            width: auto

        .options-flag,
        .options-flag+span
            position: absolute
            top: -10px
            left: -10px

        .options-flag
            opacity: 0
            width: 16px
            min-height: 16px
            z-index: 2

            &+span
                white-space: nowrap
                width: 16px
                height: 16px
                font-size: 16px
                font-family: pictos
                color: #bbb
                cursor: pointer
                margin-top: 0
                display: none

            ~ .hiddenBox,
            ~ div .hiddenBox
                display: none

            &:checked ~ .hiddenBox,
            &:checked ~ div .hiddenBox
                display: inherit

        .number-20
            font-size: 20px

        .float
            float: left
            box-sizing: border-box
            width: 100%
            margin: 4px 0
            padding-right: 5px

        @each $name, $percent in $sizes
            .#{$name}
                width: $percent

        .break
            clear: both

        .textcenter
            text-align: center

        .formular
            padding: 9px
            margin-top: 15px
            border: 1px solid #ddd
            border-radius: 3px

            label
                display: block
                float: left
                height: 20px
                margin-top: -19px
                margin-bottom: 0px
                background: #fff
                padding: 2px 5px 2px 5px
                color: #b9b9b9
                font-weight: normal

            input
                box-sizing: border-box
                border: 0

        .gridplace

            .repcontainer

                select
                    border: none
                    margin: 0

                input,
                select,
                button
                    width: -webkit-fill-available
                    width: -moz-available
                    -webkit-box-shadow: none
                    -moz-box-shadow: none
                    box-shadow: none

                .repitem

                    &:nth-child(even)
                        background: #EEE

                .repcontrol_move
                    float: left

                .repcontrol_del
                    width: auto

        .header
            margin-bottom: 4px
            padding: 2px 8px
            background: black
            color: white
            font-weight: bold
            border-top-left-radius: 10px
            border-bottom-right-radius: 10px

            span
                text-transform: uppercase

            button
                border: none
                float: right
                height: unset
                color: #fff
                font-size: 15px
                text-shadow: none

                &:before
                    content: "t"
                    padding-right: 5px

        .head
            .head-logo
                width: 200px
                vertical-align: middle

            .logo
                height: 200px

            .settings

                select
                    width: -webkit-fill-available
                    width: -moz-available

            .head-info
                width: calc(100% - 200px)

                .head-info-boxes
                    width: 100%

                    >div

                        &:first-child
                            height: 36px

                    input
                        width: 100%
                        box-sizing: border-box

                    textarea
                        height: 64px
                        border: none

                    .formular
                        margin-bottom: 5px

        .head-stats
            display: flex
            width: 100%
            justify-content: space-between

            >div
                width: min-content
                height: 36px

            input
                max-width: 100px
                float: right
                text-align: center

            .formular

                >input
                    width: -webkit-fill-available
                    width: -moz-available

            button
                display: block
                float: left
                margin-top: -21px !important
                background: #fff
                padding: 2px 5px 2px 5px !important
                color: #b9b9b9
                border: 1px solid #ddd
                border-radius: 3px

            button[type="roll"]

                &:before
                    content: ""
                    display: none

            .health
                display: flex
                width: max-content
                font-size: x-large

                input
                    max-width: 80px

            .ressourcen

                >div
                    width: max-content
                    margin: 14px auto
                    line-height: 10px

                    *
                        width: auto
                        float: left

        .attribut
            display: inherit

            .attribut-stats
                display: flex
                width: 100%
                justify-content: space-evenly
                flex-flow: row wrap

                .formular
                    width: 21%
                    height: 56px

                input
                    width: -webkit-fill-available
                    width: -moz-available
                    text-align: center

                button
                    display: block
                    float: left
                    margin-top: -21px
                    background: #fff
                    padding: 2px 5px 2px 5px
                    color: #b9b9b9
                    border: 1px solid #ddd
                    border-radius: 3px

                button[type="roll"]

                    &:before
                        content: ""
                        display: none

        @mixin grid_skill
            display: grid
            grid-template-columns: 465px 120px 60px 60px 60px 55px
            grid-gap: 5px

        .skills
            display: inherit

            .grid
                @include grid_skill

                >div
                    background-color: #EEE
                    font-weight: bold
                    text-align: center

            .gridplace

                input
                    border: none
                    width: -webkit-fill-available
                    width: -moz-available

                button[type="roll"]
                    border: none
                    width: -webkit-fill-available
                    width: -moz-available

                .repcontainer

                    .repitem

                        .repeat-skill
                            @include grid_skill
                            min-height: 40px

                        input.liketextarea
                            width: 845px
                            height: 26px
                            border: 1px solid #ddd
                            border-radius: 3px

                        textarea
                            width: 845px

                        div
                            margin: auto 0
                            text-align: center

                        .repeat-weapon

                            input.options-flag
                                width: auto

                            &:hover .options-flag+span
                                display: block

        @mixin grid_weapons
            display: grid
            grid-template-columns: 465px 120px 60px 60px 60px 55px
            grid-gap: 5px

        .weapons
            display: inherit

            .grid
                @include grid_weapons

                >div
                    background-color: #EEE
                    font-weight: bold
                    text-align: center

            .gridplace

                input
                    border: none
                    width: -webkit-fill-available
                    width: -moz-available

                button[type="roll"]
                    border: none
                    width: -webkit-fill-available
                    width: -moz-available

                .repcontainer

                    .repitem

                        .repeat-weapon
                            @include grid_weapons
                            min-height: 40px

                        input.liketextarea
                            width: 845px
                            height: 26px
                            border: 1px solid #ddd
                            border-radius: 3px

                        textarea
                            width: 845px

                        div
                            margin: auto 0
                            text-align: center

                        .repeat-weapon

                            input.options-flag
                                width: auto

                            &:hover .options-flag+span
                                display: block

        @mixin grid_colums_mage
            grid-template-columns: 100px 355px 60px 60px 60px 60px 60px 55px
            grid-gap: 5px

        @mixin grid_mage
            display: grid
            @include grid_colums_mage

        .mage
            display: inherit

            input
                border: none

            button[type="roll"]
                border: none
                width: -webkit-fill-available
                width: -moz-available

                &::before
                    content: ""

                input
                    pointer-events: none

            .grid
                @include grid_mage

                >div
                    background-color: #EEE
                    font-weight: bold
                    text-align: center

            .gridplace

                .repcontainer

                    .repitem

                        .repeat-mage
                            @include grid_mage
                            min-height: 40px

                            input.options-flag
                                width: auto

                            &:hover .options-flag+span
                                display: block

                            div.select-3
                                width: 42px
                                margin: auto

                            div.select-4
                                width: 56px
                                margin: auto

                            div.hiddenBox
                                grid-template-columns: 60px 60px 60px 60px 60px 60px 60px 60px 60px 60px 60px 60px 60px
                                grid-gap: 5px
                                grid-template-rows: auto
                                grid-template-areas: ". . . . . . . . . . attribut damage healing" "textarea textarea textarea textarea textarea textarea textarea textarea textarea textarea textarea textarea textarea"

                                #attribut
                                    grid-area: attribut

                                #damage
                                    grid-area: damage

                                #healing
                                    grid-area: healing

                                #textarea
                                    grid-area: textarea

                        input[type="checkbox"]
                            width: auto
                            float: left

                        div
                            margin: auto 0
                            text-align: center

        .aspects
            display: inherit

        .stunts
            display: inherit

            .repeat-stunt:hover .options-flag+span
                display: block

        .inventar
            display: inherit

            .rustung
                padding-bottom: 4px

            input[type=text],
            input[type=number]
                width: 81px

            input[name=attr_name],
            input[name=attr_ruestungName]
                width: 250px

            .repeat-inv:hover .options-flag+span
                display: block

        .notes
            display: inherit

            .repeat-notes:hover .options-flag+span
                display: block

        .xp
            display: inherit

            .totalxp
                display: grid
                grid-auto-flow: column
                grid-gap: 50px

                input
                    width: 100%
                    text-align: end

            .repcontainer
                padding-top: 15px

                .repitem
                    display: grid
                    grid-template-columns: 210px 50px 10px 210px 50px 10px 210px 50px
                    grid-gap: 5px
                    height: 40px

                    div
                        margin: auto 0

            .brackets
                border-left: 1px solid #aaa
                border-right: 1px solid #aaa
                border-radius: 12px

                input
                    border: none
                    text-align: center

        .version
            text-align: right

.sheet-darkmode

    button,
    input,
    optgroup,
    select,
    textarea,
    .charsheet
        color: #EEE

    .btn,
    .btn.btn-default
        color: rgb(200, 195, 188)
        text-shadow: rgba(24, 26, 27, 0.75) 0px 1px 1px
        background-color: rgb(30, 32, 33)
        background-image: linear-gradient(rgb(24, 26, 27), rgb(38, 41, 43))
        border-color: rgb(62, 68, 70) rgb(62, 68, 70) rgb(67, 73, 76)
        box-shadow: rgba(24, 26, 27, 0.2) 0px 1px 0px inset, rgba(0, 0, 0, 0.05) 0px 1px 2px

    .sheetform
        background-color: transparent

    .charsheet
        
        .container

            button,
            input,
            optgroup,
            select,
            textarea
                border-color: rgb(58, 62, 65)
            
            .formular
                border-color: rgb(58, 62, 65)
                
                label,
                button
                    background-color: var(--dark-surface1)
                    color: rgb(188, 182, 173)
                
                button
                    border-color: rgb(58, 62, 65)

            .gridplace
                
                .repcontainer
                    
                    .repitem:nth-child(2n)
                        background-color: rgb(34, 36, 38)

            .skills,
            .weapons,
            .mage
                
                .grid > div
                    background-color: rgb(34, 36, 38)

.sheet-rolltemplate-butterfly

    .sheet-container
        background-color: #ffffff
        border-top-left-radius: 10px
        border-bottom-right-radius: 10px
        width: 240px

        .sheet-header
            margin-bottom: 4px
            padding: 2px 8px
            background: black
            color: white
            font-weight: bold
            border-top-left-radius: 10px
            border-bottom-right-radius: 10px

            span
                text-transform: uppercase

        .sheet-content
            text-align: initial

            p
                line-height: 14px

                &:last-child
                    margin: 0

            div
                padding: 5px

                &:nth-child(even)
                    background: #EEE

                span
                    margin-left: 15px
                    font-weight: bold

            .sheet-desc
                grid-column: span 2
                padding: 5px
                text-align: center

                span
                    right: unset
                    float: none
                    margin: 0

        .inlinerollresult,
        .sheet-fakeroll
            background-color: transparent
            border: none
            position: relative
            right: 30px
            float: right
            margin: 0
            padding: 0

            &.fullcrit
                color: #3FB315

            &.fullfail
                color: #B31515

            &.importandivoll
                color: #4A57ED

    &.sheet-rolltemplate-darkmode

        .sheet-container
            color: #EEE
            background-color: var(--dark-surface1)

            .sheet-content
                border: solid 1px var(--dark-surface1)
                border-top: none

                div

                    &:nth-child(even)
                        background: var(--dark-surface2)