.sizerboard{

    position : absolute;
    top : 0em;
    left : 0em;
    width : 100%;
    height : 100%;
    overflow : hidden;
    
    &,input,button,textarea{font-family : $font-family;}
    
    [data-visible=false]{display : none;}

    [data-icon]::before{
        font-family : $font-family;
        margin-right : .4em;
    }

    a[href]{text-decoration : none;}
    a[href],[onmousedown],[onmouseup],[onclick]{
        color : $color-primary;
        cursor : pointer;
        transition-property : color;
        transition-duration : $transition-out;
        &:hover,&:focus{
            color : $color-secondary;
            transition-duration : $transition-in;
        }
    }
    [type=text],[type=password],[type=date],[type=datetime],[type=time],textarea{
        width : 100%;
        box-sizing : border-box;
    }
    button,[type=button],[type=submit],[type=reset],[rol=button],[type=text],[type=password],[type=date],[type=datetime],[type=time],textarea{
        color : $color-primary;
        font-size : 1em;
        border : .1em solid $color-primary;
        box-shadow : 0em 0em .4em inset $color-primary;
        border-radius : $border-radius;
        transition-property : color,border-color,box-shadow;
        transition-duration : $transition-out;
        &:hover,&:focus{
            color : $color-secondary;
            border-color : $color-secondary;
            box-shadow : 0em 0em .4em inset $color-secondary;
            transition-duration : $transition-in;
        }
    }
    button,[type=button],[type=submit],[type=reset],[rol=button]{cursor : pointer;}
    a[href],[onmousedown],[onmouseup],[onclick]{
        outline : none;
        &[disabled],&[readonly],&[data-selected=true]{&,&:hover{
            color : $color-grey;
            cursor : default;
        }}
    }
    button,[type=button],[type=submit],[type=reset],[rol=button],[type=text],[type=password],[type=date],[type=datetime],[type=time],textarea{
        outline : none;
        box-sizing : border-box;
        &[disabled],&[readonly],&[data-selected=true]{&,&:hover,&:focus{
            color : $color-grey;
            border-color : $color-grey;
            cursor : default;
            box-shadow : 0em 0em .4em inset $color-grey;
        }}
    }

    label{
        padding : 0em .4em;
        font-weight : 900;
        white-space : nowrap;
        border : .1em solid $color-grey;
        border-radius : $border-radius;
        box-shadow : 0em 0em .4em inset $color-grey;
        &>*{font-size : .9em;}
        &::after{content : ":";}
    }

    .group{
        display : table;
        margin : 0em;
        padding : 0em;
        list-style-type : none;
        border-collapse : collapse;
        li{
            display : table-cell;
            &>*{
                border-radius : 0em;
                padding : .1em .4em;
                padding-block : none;
                padding-inline : none;
            }
        }
        &>:first-child>*{border-radius : $border-radius 0em 0em $border-radius;}
        &>:last-child>*{border-radius : 0em $border-radius $border-radius 0em;}
    }

    header,main,footer{
        position : absolute;
        left : 0em;
        width : 100%;
    }
    header,footer{
        background-color : $color-fore;
        color : $color-back;
    }

    header{
        top : 0em;
        height : $header-height;
        z-index : 20;
    }

    main{
        top : $header-height;
        bottom : $footer-height;
        background-color : $color-back;
        color : $color-fore;
        z-index : 10;
        overflow : hidden;
        &>form{
            display : block;
            position : absolute;
            top : 0em;
            height : 100%;
            overflow : hidden;
            &>fieldset{
                position : absolute;
                top : 0em;
                left : 0em;
                right : 0em;
                bottom : 0em;
                margin : $box-margin;
                padding : 0em;
                border : none;
                &>legend{
                    display : block;
                    width : 100%;
                    font-size : 1.2em;
                    font-weight : 900;
                    border-bottom : .15em solid $color-fore;
                }
                &>p{
                    margin : 0em;
                    padding : 1em 0em;
                    font-size : .85em;
                }
            }
        }
    }

    footer{
        bottom : 0em;
        height : $footer-height;
        z-index : 30;
    }

    .main-menu{
        position : absolute;
        bottom : 0em;
        left : 50%;
        margin-bottom : .2em;
        margin-left : -20em;
        width : 40em;
        text-align : center;
        ul{
            margin : 0em;
            padding : 0em;
            list-style-type : none;
        }
        li{
            display : inline-block;
            margin : 0em 1em;
        }
    }

    h1{
        margin : 0em;
    }

    .projects-menu{
        left : 0em;
        width : $projects-menu-width;
    }

    .search-box{
        position : absolute;
        top : 7.6em;
        width : 100%;
        &>:first-child>*{border-bottom-left-radius : 0em;}
        &>:last-child>*{border-bottom-right-radius : 0em;}
        &>:nth-child(2){width : 100%;}
        label{
            font-weight : 400;
            &::after{content : "";}
        }
        [data-icon]{
            &::before{margin : 0em;}
            &+[data-i18n]{display : none;}
        }
        button[data-i18n=search]{display : none;}
        &+nav{
            position : absolute;
            top : 9em;
            left : 0em;
            bottom : 0em;
            width : 100%;
            border : .1em solid $color-fore;
            background-color : $color-back;
            overflow : auto;
            box-sizing : border-box;
            border-radius : 0em 0em $border-radius $border-radius;
            box-shadow : .1em .1em .2em $color-grey;
            &>ul{
                margin : 0em;
                padding : 0em;
                list-style-type : none;
                // &>:last-child{border-radius : 0em 0em $border-radius $border-radius;}
            }
            li{
                padding : .2em .4em;
                border-radius : 0em;
                box-sizing : border-box;
            }
        }
    }

    .draw-box{
        left : $projects-menu-width;
        right : 0em;
        .group{
            position : absolute;
            top : 2.6em;
            left : 0em;
            &>:first-child>button{border-bottom-left-radius : 0em;}
            &>:last-child>button{border-bottom-right-radius : 0em;}
        }
        .fields{
            position : absolute;
            top : 4em;
            left : 0em;
            bottom : 0em;
            width  : 100%;
            border : .1em solid $color-fore;
            background-color : $color-back;
            box-sizing : border-box;
            border-radius : 0em $border-radius $border-radius $border-radius;
            box-shadow : .1em .1em .2em $color-fore;
            &>section{&,&>*{
                position : absolute;
                top : 0em;
                left : 0em;
                width : 100%;
                height : 100%;
            }}
            &>section>*{border-radius : 0em $border-radius $border-radius $border-radius;}
            textarea{
                font-family : $font-mono;
                color : $color-fore;
                resize : none;
            }
        }
        .curtain{
            position : absolute;
            top : 0em;
            left : 0em;
            width : 100%;
            height : 100%;
            background-color : $color-back;
            opacity : .8;
        }
        &:not([data-selected=null])>.curtain{display : none;}
    }

    .actions-box{
        position : absolute;
        right : 0em;
        bottom : 0em;
        border : none;
        &>legend,&>p{display : none;}
        ul{
            position : absolute;
            right : 0em;
            bottom : 0em;
            margin : .5em;
            padding : 0em;
            list-style-type : none;
            overflow : visible;
            &>li{
                display : "block";
                position : relative;
                text-align : right;
            }
        }
        li{margin : .2em 0em;}
        button{
            min-width : 2em;
            height : 2em;
            text-align : right;
            white-space : nowrap;
            box-sizing : border-box;
            border-radius : 1em;
            span{
                font-size : 1.3em;
                font-weight : 900;
            }
            [data-icon]{
                display : inline-block;
                position : absolute;
                top : 0em;
                right : 0em;
                width : 1.5em;
                text-align : center;
                margin : .2em 0em;
                &::before{margin : 0em;}
            }
            [data-i18n]{
                display : block;
                padding-right : 0em;
                width : 0em;
                overflow : hidden;
                opacity : 0;
                transition-property : padding-right,width,opacity;
                transition-duration : $transition-out;
            }
            &:hover>[data-i18n]{
                padding-right : 1.3em;
                width : 6em;
                opacity : 1;
                transition-duration : $transition-in;
            }
        }
    }

    .licences{
        display : block;
        width : 100%;
        text-align : center;
        font-size : .85em;
        font-weight : 900;
        img{
            width : auto;
            height : 1em;
        }
        a>*{vertical-align : middle;}
    }

}