div.tabModules {
    @include col(100%, calc((100% / 2) - 5px));

    flex-wrap:wrap;

    div.dataArmure {
        @include block($sombre);
        @include titre($white, transparent);

        input[type="number"] {
            width: 100%;
            border: 0px;
            padding: 0px;
            text-align: center;
            height: 28px;
        }

        h1.titre {
            display:flex;
        }

        div.ligneTitre {
            display:flex;
            width:100%;
            justify-content: space-between;
            background:$clair;

            span {
                display:flex;
                line-height: 28px;
                font-size: 14px;
                color: $black;
                font-weight: bold;
                justify-content: center;
                align-items:center;

                &:first-of-type {
                    padding-left: 2px;
                    width: calc(31% - 2px);
                }

                &:not(:first-of-type) {
                    width: calc(23% - 1px);
                    border-left:1px solid $sombre;
                }
            }
        }

        div.ligne3 {
            width:100%;
            justify-content: space-between;
            background:$clair;
            border-top:1px solid $sombre;

            span {
                display:flex;
                line-height: 28px;
                font-size: 14px;
                color: $black;
                font-weight: bold;
                padding-left: 2px;
                width: calc(31% - 2px);
            }

            div {
                width: calc(23% - 1px);
                border-left:1px solid $sombre;
            }
        }

        div.ligne1 {
            width:100%;
            justify-content: space-between;
            background:$clair;
            border-top:1px solid $sombre;

            span {
                display:flex;
                line-height: 28px;
                font-size: 14px;
                color: $black;
                font-weight: bold;
                padding-left: 2px;
                width: calc(31% - 2px);
            }

            div {
                width: 23%;

                &:nth-of-type(1),
                &:nth-of-type(2) {
                    width: calc(23% - 1px);
                    border-left:1px solid $sombre;
                }
            }
        }
    }

    div.PES {
        @include block($sombre);
        @include titre($white);

        h1.titre {
            display:flex;
        }

        input[type="number"] {
            width: 100%;
            border: 0px;
            padding: 0px;
            text-align: center;
            height: 28px;
        }

        div.ligneTitre {
            display:flex;
            width:100%;
            justify-content: space-between;
            background:$clair;

            span {
                display:flex;
                width: calc(100% / 3);
                line-height: 28px;
                font-size: 14px;
                color: $black;
                font-weight: bold;
                justify-content: center;
                align-items:center;

                &:not(:first-of-type) {
                    border-left:1px solid $sombre;
                }
            }
        }

        div.ligne2 {
            width:100%;
            justify-content: space-between;
            background:$clair;
            border-top:1px solid $sombre;

            span {
                line-height: 28px;
                font-size: 14px;
                color: $black;
                font-weight: bold;
                width: calc((100% / 3) - 2px);
                padding-left:2px;
            }

            div {
                width: calc(100% / 3);
                border-left:1px solid $sombre;
            }
        }

        div.resilience {
            width:100%;
            justify-content: space-between;
            background:$clair;
            border-top:1px solid $sombre;

            div {
                span {
                    display:flex;
                    width: calc(100% - 70px);
                    line-height: 28px;
                    font-size: 14px;
                    color: $black;
                    font-weight: bold;
                }

                &:first-of-type {
                    width: calc((100% / 3) - 2px);
                    padding-left:2px;

                    button[type="action"] {
                        width: 68px;
                        height: 26px;
                        padding: 0px;
                        justify-content: center;
                        align-items: center;
                        background: $sombre;
                        border: 1px solid $clair;
                        font-size: 12px;
                        font-variant: small-caps;
                        font-weight: bold;
                        margin-top: auto;
                        margin-bottom: auto;
                        margin-left: auto;
                        color: $white;

                        &:hover {
                            box-shadow: inset 1px 1px 2px 2px $black;
                        }
                    }
                }   

                &:not(:first-of-type) {
                    width: calc(100% / 3);
                    border-left:1px solid $sombre;
                }
            }
        }
    }

    div.information {
        @include block($sombre);
        @include titre($white);

        display:flex;
        width:100%;
        flex-wrap: wrap;
        border-top:1px solid $clair;     
        
        h1.titre {
            display:flex;
        }

        div.autoex {
            textarea {
                background:$clair;
            }
        }
    }

    div.slots {
        @include block($sombre);
        @include titre($white);

        width:100%;
        justify-content: space-between;
        margin-top:10px;

        div.data {
            display:none;
        }

        h1.titre {
            display:flex;
        }

        div.col6,
        div.col6BL {
            justify-content: space-between;
            background:$clair;

            >span {
                width: max-content;
                font-weight: bold;
                font-variant: small-caps;
                line-height: 28px;
                padding-left: 3px;
                color:$black;
            }

            div {
                width: 45px;
                height: 28px;
                margin: 0px;
                padding: 0px;
                align-items: center;
                flex-wrap: nowrap;

                input[type="number"] {
                    background: transparent;
                    border: none;
                    line-height: 28px;
                    height: 28px;
                    padding: 0px;
                    width: 19px;
                    font-weight: bold;
                    font-size: 13px;
                    margin-left: auto;
                    text-align: right;
                    color: $black;
                }

                b {
                    font-size: 14px;
                    line-height: 28px;
                    color: RGB(55, 53, 53);
                }

                span {
                    line-height: 28px;
                    margin-left: 0px;
                    margin-top: 0px;
                    margin-bottom: 0px;
                    width: auto;
                    text-align: center;
                    font-size: 13px;
                    margin-right: 2px;
                    color: $black;
                    font-weight:bold;
                }
            }
        }

        div.col6 {
            width:calc(100% / 6);
        }

        div.col6BL {
            width:calc((100% / 6) - 1px);
            border-left:1px solid $sombre;
        }
    }

    div.modulesListe {
        @include titre($white, transparent);
        @include extendModules();

        width:100%;
        flex-wrap: wrap;
        margin-top:10px;

        h1.titre {
            display:flex;
        }

        .ligne {
            width:100%;
            justify-content: space-between;
        }

        div.repitem {
            @include block($sombre);

            display:flex;
            width: calc(50% - 10px);
            justify-content: space-between;
            align-self: flex-start;

            div.titre {
                display:flex;
                position:initial;
            }

            div.ligne {
                height:28px;
            }

            input[type="hidden"] {
                &.expandSlots {
                    &[value="1"] {
                        & ~ div button[type="action"].buttonArrow {
                            transform: rotate(-90deg);
                        }

                        & ~ .hSlots {
                            display:flex;
                        }
                    }
                }

                &.expandModule {
                    &[value="0"] {
                        & ~ div button[type="action"].buttonPlus {
                            span.plus {
                                display:flex;
                            }
                        }

                        & ~ .hModule,
                        & ~ .hSlots {
                            display:none;
                        }
                    }

                    &[value="1"] {
                        & ~ div button[type="action"].buttonPlus {
                            span.moins {
                                display:flex;
                            }
                        }

                        & ~ .hModule {
                            display:flex;
                        }
                    }
                }
            }

            div.titreModule {
                input[type="text"] {
                    width: calc(100% - 28px);
                    height:28px;
                    text-align: center;
                    background: transparent;
                    color: $white;
                    font-weight: bold;
                    font-variant: small-caps;
                    padding-top: 0px;
                    padding-bottom: 0px;
                    padding-left: 0px;
                    padding-right: 25px;
                    border:0px;
                }
            }

            label.activation {
                display:flex;
                justify-content: space-between;
                background:$clair;
                width:calc(100% - 100px);
                height:28px;

                span {
                    display:flex;
                    width:78px;
                    padding-left:2px;
                    font-size:13px;
                    line-height:28px;
                    height:28px;
                }

                input[type="text"] {
                    width:calc(100% - 80px);
                    height:28px;
                    border:0px;
                    padding-top:0px;
                    padding-bottom:0px;
                    padding-right:0px;
                    padding-left:2px;
                }
            }

            div.PE {
                width:100px;
                height:28px;
                justify-content: space-between;

                button[type="action"] {
                    width: 20px;
                    padding: 0px;
                    font-weight: bold;
                    background: $sombre;
                    color: $white;
                    border-color: $clair;
                    border-width: 1px;
                    justify-content: center;
                    align-items: center;
                    margin-left:1px;
                }
                
                input[type="number"] {
                    width:calc(100% - 23px);
                    height:28px;
                    border:0px;
                    padding:0px;
                    text-align: center;
                    color:$black;
                }
            }

            label.duree {
                justify-content: space-between;
                background:$clair;
                width:100%;
                height:28px;
                border-top:1px solid $sombre;

                span {
                    display:flex;
                    width:78px;
                    padding-left:2px;
                    font-size:13px;
                    line-height:28px;
                    height:28px;
                }

                input[type="text"] {
                    width:calc(100% - 80px);
                    height:28px;
                    border:0px;
                    padding-top:0px;
                    padding-bottom:0px;
                    padding-right:0px;
                    padding-left:2px;
                }
            }

            div.autoex {
                border-top:1px solid $sombre;
            }

            div.titreSlots {
                input[type="number"] {
                    width: 20px;
                    height: 28px;
                    margin: 0px;
                    padding: 0px;
                    background: transparent;
                    border: 0px;
                    color: $white;
                    font-size: 18px;
                    font-weight: bold;
                    text-align: center;
                }
            }

            label.slot,
            label.slotBL {
                display:flex;
                justify-content: space-between;
                background:$clair;

                span {
                    display:flex;
                    width:105px;
                    height:28px;
                    line-height:28px;
                    padding-left:2px;
                    font-size:13px;
                    font-weight:bold;
                    color:$black;
                }

                input[type="number"] {
                    width:calc(100% - 107px);
                    height: 28px;
                    border: 0px;
                    padding: 0px;
                    text-align: center;
                }
            }

            label.slot {
                width:calc(100% / 2);
            }

            label.slotBL {
                width:calc((100% / 2) - 1px);
                border-left:1px solid $sombre;
            }

            div.bTop {
                border-top:1px solid $sombre;
            }

            .hModule,
            .hSlots {
                display:none;
            }

            &:not(:nth-of-type(1)):not(:nth-of-type(2)) {
                margin-top:10px;
            }
        }

        div.repcontainer{
            width:100%;
            flex-wrap: wrap;
            justify-content: space-between;

            &.editmode {
                .repitem {
                    width:100%;

                    &:nth-of-type(2) {
                        margin-top:10px;
                    }
                }
            }
        }

        div.repcontrol {
            background:none;
            border:0px;

            .btn {
                border:1px solid $black;
            }
        }
    }
}