body {
    margin: 10px;
    color: #474747;
/*  font-family: "Helvetica", san-serif; */
}

.depvis {
    border: 1px solid #ddd;
    padding: 2px;
}

.exgrid {
    width: 950px;
    display: grid;
    gap: 5px;
    grid-template-columns: 150px repeat(8, auto);
}

.exi {
    text-align: center;
}

.dis {
    pointer-events: none;
    cursor: default;
    background-color: lightblue;
}

.benGrid {
    width: 470px;
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: 120px 350px;
    grid-template-rows: 35px;
    column-gap: 5px;
    row-gap: 2px;
    align-items: left;
}

.ben2Grid {
    width: 1140px;
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: 120px 350px;
    grid-template-rows: 35px;
    column-gap: 5px;
    row-gap: 2px;
    align-items: left;
}

.panelgrid {
    width: 1140px;
    display: grid;
    row-gap: 5px;
    column-gap: 5px;
    grid-auto-flow: row;
    grid-template-columns: repeat(9, auto);
    align-items: center;
}

.xgrid {
	width: 1140px;
	display: grid;
	grid-auto-flow: row;
    margin-top: 5px;
	grid-template-columns: 100px 77px 70px 3px 430px 139px 4px 144px 55px 100px;
    margin-bottom: 20px;
}

.plangrid {
    width: 1201px; /* 1140px */
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: 50px 54px 64px 248px 80px 50px 85px 80px 70px 85px 50px 100px 50px 70px; /* 187px -> plus x */
    grid-template-rows: 35px;
    column-gap: 5px;
    row-gap: 2px;
    align-items: center;
}

.bold { font-weight: bold; }

.bump { padding-left: 12px; }
.debump { padding-right: 10px; }

.planhead {
    font-weight: bold;
    background-color: #fbb117;
    grid-template-rows: 25px;
    padding-top: 3px;
}

.sortplans {
    border: none;
    background-color:#fccc38;
    font-size: 0.75rem;
    font-family: "Helvetica", san-serif;
    font-weight: bold;
    padding: 4px;
    color:#333;
    border-radius: 4px;
}

.muddle { text-align: center; }
.dethead { text-align:right; padding-right:8px; }
.right8 { font-size: 0.7rem; color:gray; text-align:right; padding-right:8px; } 
.dim7 { font-size: 0.7rem; color:gray; text-align:left; }

.planchosen { background-color: #FFF8DC; }

.planchoice { background-color: #FFF5EE; }

.qgrid {
    width: max-content;
    display: grid;
    grid-column-gap: 8px;
    grid-template-rows: min-content;
}

.qnp1 { grid-template-columns: auto auto repeat(1, minmax(100px, 22em)); }
.qnp2 { grid-template-columns: auto auto repeat(2, minmax(100px, 22em)); }
.qnp3 { grid-template-columns: auto auto repeat(3, minmax(100px, 22em)); }
.qnp4 { grid-template-columns: auto auto repeat(4, minmax(100px, 22em)); }
.qnp5 { grid-template-columns: auto auto repeat(5, minmax(100px, 22em)); }

/* .qnp5 { grid-template-columns: minmax(10em, 12em) minmax(18em, 24em) repeat(5, minmax(24em, 30em)); } */

.qall { display: flex; align-items: center; padding: 5px; }
.qcenter { justify-content: center; }

.qplanname {
    font-size:110%;
    font-weight: bold;
    color: rgb(0,96,134);
    border: 1px solid #999;
}

.qtotalm {
    font-size:120%;
    font-weight: bold;
    color: rgb(33, 89, 103);
}

.qmmany {
    color: rgb(0,96,134);    
}

.qcust {
    color: rgb(0,96,134);
    font-size: 130%;
    font-weight: bold;
    width: 22em;
}

.kllogo {
    display: flex;
    width: 280px;
    justify-content: center;
    align-items: baseline;
}
  
.xyflex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.qcat, .qben, .qoff, .qkim {
    padding: 5px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
    border-right: 1px solid #999;
}

.qcat {
    font-size: 110%;
    font-weight: bold;
    color: #343434;
    display: flex;
    align-items: center;
    border-right: 0px;
}

.qben {
    margin-left: -8px; /* cancel column gap */
}

.qoff {
    padding-top:8px;
    justify-content: center;
    font-style: italic;
}

.qded { font-weight: bold; }

.qoff.qded { color: rgb(83, 141, 213); }

.qkim { font-style: italic; }

.qtop { border-top: 1px solid #999; }

.qsec1      { background-color: rgb(249, 246, 237); }
.qsec1.qben { background-color: rgb(237, 228, 201); }

.qsec2      { background-color: rgb(220, 230, 240); }
.qsec2.qben { background-color: rgb(184, 204, 224); }

.qsec3      { background-color: rgb(220, 230, 240); }
.qsec3.qben { background-color: rgb(184, 204, 224); }

.qsec4      { background-color: rgb(204, 236, 255); }
.qsec4.qben { background-color: rgb(151, 215, 255); }

.qsec5      { background-color: rgb(238, 238, 238); }
.qsec5.qben { background-color: rgb(217, 217, 217); }

.spokesmodel { position:relative; top:-287px; left:40px; }

.rspan2 { grid-row: span 2; }
.rspan3 { grid-row: span 3; }
.rspan4 { grid-row: span 4; }
.rspan5 { grid-row: span 5; }
.rspan6 { grid-row: span 6; }
.rspan7 { grid-row: span 7; }
.rspan8 { grid-row: span 8; }
.rspan9 { grid-row: span 9; }

.cspan2  { grid-column: span 2; }
.cspan3  { grid-column: span 3; }
.cspan4  { grid-column: span 4; }
.cspan5  { grid-column: span 5; }
.cspan6  { grid-column: span 6; }
.cspan7  { grid-column: span 7; }
.cspan8  { grid-column: span 8; }
.cspan9  { grid-column: span 9; }
.cspan10 { grid-column: span 10; }
.cspan11 { grid-column: span 11; }
.cspan12 { grid-column: span 12; }
.cspan13 { grid-column: span 13; }
.cspan14 { grid-column: span 14; }
.cspan15 { grid-column: span 15; }
.cspan16 { grid-column: span 16; }

.revsummarygrid {
    width: 280px;
    display: grid;
    grid-template-columns: 147px auto;
}

.dobold {
	font-weight: bold;
}

.doright {
	text-align: right;
}

.doitalic {
	font-style: italic;
}

.revchoicegrid {
	width: 1150px;
    display: grid;
	grid-template-columns: 147px 137px repeat(2, 85px) 70px 80px 16px 300px 140px 60px;
}

.line {
	border-bottom: 1px solid lightgray;
}