#form1 {
    border: 1px solid #000;
    width: 800px;
    /* height: 600px; */
    /* width: 400px; */
    /* height: 200px; */
}

/* #form1 > div { */
/*
div.panel {
    border: 1px solid #000;
}
*/

.panelLabelName {
    grid-area: sector00;
    /* margin: 10px 0 0 10px; */
    /* margin: 20px 0 0 20px; */
    /* text-align: right; */

    display: flex;
    justify-content: right;
}

.panelTextBoxName {
    grid-area: sectors01to04;
    /* margin: 10px 10px 0 0; */
    /* margin: 20px 20px 0 0; */
}

.panelSmall {
    grid-area: sectors10to12;
    /* border: 1px solid #000; */
    /* margin: 0 0 0 10px; */
    /* margin: 0 0 0 20px; */
    margin: 0 0 10px 20px;
    /* margin: 0 0 10px 0; */
}

.panelSmaller {
    grid-area: sectors1314;
    /* border: 1px solid #000; */
    /* margin: 0 10px 0 0; */

    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */
    /* margin: 0 10px 20px 0; */
    /* margin: 0 10px 10px 0; */
    margin: 0 0 10px 0;
}


.panelBig-container {
    display: grid;
    grid-template-areas:
        'sector00 sectors01to04 sectors01to04 sectors01to04 sectors01to04'
        'sectors10to12 sectors10to12 sectors10to12 sectors1314 sectors1314';
    gap: 10px;
    /* gap: 20px; */
}

.panelBig-container > div {
    /* text-align: center; */
    /* padding: 20px 0; */
    /* padding: 10px 10px 10px 10px; */
    /* padding: 20px 20px 20px 20px; */
    padding: 0 20px 20px 0;
}

#listBoxColors {
    width: 70%;
    height: 200px;
    font-size: medium;
}

#buttonClose {
    /* width: 90%; */
    /* height: 90%; */
    width: 100%;
    height: 100%;
    font-size: 30pt;
}

.panelSmall-border {
    border: 1px solid #000;
    height: 100%;
    padding: 10px 0 0 10px;
}

.panelSmaller-border {
    border: 1px solid #000;
    height: 100%;
    padding: 10px 0 0 10px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.panelSmaller-container {
    /* width: 90%; */
    /* height: 90%; */
    /* width: 100%; */
    /* height: 100%; */
    /* width: 60%; */
    /* height: 60%; */
    width: 70%;
    height: 70%;
    /* margin: 0 0 10px 10px; */
    margin: 0 0 70px 0;
}




#labelName {
    border-style: dotted;
}

#textBoxName {
    /* font-size: medium; */
    font-size: large;
    width: 200px;
}




/* .form1-container > div { */
    /* text-align: center; */
    /* padding: 20px 0; */
    /* padding: 10px 10px 10px 10px; */
    /* padding: 20px 20px 20px 20px; */
    /* padding: 0; */
/* } */

.form1-container {
    /* text-align: center; */
    /* padding: 20px 0; */
    /* padding: 10px 10px 10px 10px; */
    padding: 20px 20px 20px 20px;
    /* padding: 0; */
}

.panelBig {
    border: 1px solid #000;
    /* padding: 20px 20px 20px 20px; */
    padding: 20px 20px 40px 20px;
}

.panelTest {
    /* border: 1px solid #000; */
    /* padding: 20px 20px 20px 20px; */
    padding: 40px 20px 20px 20px;
}

#buttonTest {
    width: 100px;
    padding: 10px 10px 10px 10px;
}




.controlName {
    font-size: x-small;
}