form.grid.css

h1{
    font-size: 2em;
}
h2{
    font-size: 1.6em;
}
h3 {
    font-size: 1.4em;
}
h5{
    font-size: 1.1em;
    font-weight: bold;
}


#titlebar{
    background-color: lightsteelblue;
    display: grid;
   
    grid-template-columns: repeat(2, 3fr) 2fr 1fr;
    grid-template-rows: repeat(2,1fr);
    grid-template-areas: 
    "formspec companyname companyname brand"
     "devicespec formname devicespec2 devicespec2";
}
#form-spec{
    grid-area: formspec;
}

#company-name{
    grid-area: companyname;
}

#device-spec2{
    grid-area: devicespec2;
}


.formlayout{
    display: grid;
    
}
/* form Section */

.formsection{
    display: grid;
    grid-template-columns: 1fr 2fr;
    border: 2px solid;
    margin: 10px;
    align-items: center;
    background-color: aliceblue
}
.formsectiontitle{
    grid-column: 1/2;
    justify-self: center;

}

.checkitem{
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid;
    margin: 2px;
}

.checkitemtitle{
    font-size: 1.1em;
    font-weight: bold;
    grid-column: 1/2;
}

.checkitemfield{
    grid-column: 2/3;
}

/* form section end */


/* Special form Section */

.formsectionspecial{
    display: grid;
    grid-template-columns: 2fr 7fr;
    border: 2px solid;
    margin: 10px;
    align-items: center;
    background-color: beige;

    
}
.formsectiontitle{
    grid-column: 1/2;

}

.formsubsection{
    display: grid;
    grid-template-columns: 1fr 6fr;
    border: 1px solid;
    margin: 2px 2px 2px 0;
    align-items: center;
}

.formsubsectiontitle{
    grid-column: 1/2;
    writing-mode: vertical-lr;
    vertical-align: middle;
}

.checkitem{
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid;
    margin: 2px;
}

.checkitemtitle{
    font-size: 1.1em;
    font-weight: bold;
    grid-column: 1/2;
}

.checkitemfield{
    grid-column: 2/3;
}

/* Special form section end */





#specbar{
    background-color: lightgoldenrodyellow;
}

.checkgroup{
    /* background-color: lightgrey; */
    border-style: solid;
    margin: 5px 0;
}
.checkgrouptitlefull{
    /* background-color: lightseagreen; */
    text-align: center;
    vertical-align: middle;
    width: 40%;
    height: 100%;
    display: inline-block;
    margin: 0;
}

.checkgrouptitle{
    /* background-color: lightseagreen; */
    text-align: center;
    vertical-align: middle;
    width: 20%;
    height: 100%;
    display: inline-block;
    margin: 0;
}
    .checkgroupsubtitle{
        /* background-color: lightseagreen; */
        writing-mode: vertical-lr ;
   }

   .subgroupmany{
    text-align: center;
    vertical-align: middle;
    width: 80%;
    display: inline-block;
    margin: 0;
   }
   .subgroup1{
    text-align: center;
    vertical-align: middle;
    width: 60%;
    display: inline-block;
    margin: 0;
   }

.pola{
    background-color: lightblue;
    display: inline-block;
    width: calc(100%/3);
    padding: 10px;
    margin: 0;
}
.polb{
    background-color: lightyellow;
    display: inline-block;
    width: calc(100%/3);
    padding: 10px;
    margin: 0;
}
.polc{
    background-color: lightsalmon;
    display: inline-block;
    width: calc(100%/3);
    padding: 10px;
    margin: 0;
}

.subgroupmany .pola{
    width: calc(75%/3);
    padding: 10px;

   }

   .subgroupmany .polb{
    width: calc(75%/3);
    padding: 10px;

   }

   .subgroupmany .polc{
    width: calc(75%/3);
    padding: 10px;

   }


.header{
    border-style: double;
    border-color: black;
}
#polsrow{
    position: relative;
    left: 40%;
    text-align: center;
    vertical-align: middle;
    width: 60%;
    display: inline-block;
    margin: 0;
}