.sidebar {
  grid-column: col-start /span 4;
  grid-row: 2;
  align-items: stretch;
  margin-left: 15px; 
}

.sidebar-5 {
    grid-column: col-start /span 5;
    grid-row: 2;
    align-items: stretch;
    margin-left: 15px;
}

.content {
  grid-column: col-start 5 / span 12;
  grid-row: 2;
}

.content-5 {
    grid-column: col-start 6 / span 12;
    grid-row: 2;
}

.content-full {
    grid-column: 1 / span 12;
    grid-row: 2;
}

.content-full-margin15 {
    grid-column: 1 / span 12;
    grid-row: 2;
    margin-left: 15px;
    align-items: flex-start;
}

.content-full-3 {
    grid-column: 1 / span 12;
    grid-row: 3;
}

.content-full-4 {
    grid-column: 1 / span 12;
    grid-row: 4;
}


.content-full-1 {
    grid-column: col-start / span 12;
    grid-row: 1;
    align-items:stretch;
    margin-top: 5px;
    
}
.content-2-column-1 {
    grid-row: 2;
    grid-column: col-start /span 6;
}

.content-2-column-2 {
    grid-row: 2;
    grid-column: col-start 7 /span 6;
}

.content-2-column-1-row-3 {
    grid-row: 3;
    grid-column: col-start /span 6;
    margin-left: 15px;
}

.content-2-column-2-row-3 {
    grid-row: 3;
    grid-column: col-start 7 /span 6;
}

.content-2-column-full {
    grid-row: 3;
    grid-column: col-start / span 12;
}

.page-header-grid {
    grid-row: 1;
    grid-column: 1/12;
    margin-left: 15px;
}

.footer-grid {
    grid-column: 1/12;
    grid-row: 3;
    margin-left: 15px;
}

.wrapper {
      display: grid;
      grid-template-columns: repeat(12, [col-start] 1fr);
      column-gap: 15px;
      position: absolute;
      top: 150px;
      align-items: start;
    }


.row-participant {
  display: grid;
  display: -ms-grid;
  width: 500px;
  grid-template-columns: 100%;
  grid-gap: 5px;
  -ms-grid-columns: 100%;
  -ms-grid-rows: auto ;
  -ms-grid-column-align: end;
  grid-template-areas: "dashboardmessage"
                        "dashboardparticipant"
  
}

.dashboardparticipant {
    grid-area: dashboardparticipant;
    -ms-grid-column: 1;
    -ms-grid-row: 2;
    -ms-grid-row-align: stretch;
    grid-row-align: stretch
}

.dashboardmessage {
    grid-area: dashboardmessage;
    -ms-grid-column: 1;
    -ms-grid-row-align: stretch;
    grid-row-align: stretch
}

/*.contentGridPremium{
    display: grid;
      display: -ms-grid;
      grid-template-columns: 50% 50%;
      grid-gap: 5px;
      -ms-grid-columns: 50% 5px 50%;
      -ms-grid-column-align: end;
       grid-template-areas: "premiumPayroll premiumDetail"
                            
}*/

.contentGrid-full {
    display: grid;
    display: -ms-grid;
    grid-template-columns: 90%;
    align-items: center;
    justify-content: center;
    grid-column-gap: 15px;
    grid-row-gap: 10px;
    -ms-grid-columns: 10px 90% 10px;
    -ms-grid-column-align: end;
    grid-template-areas: "form-control-row" "form-control-row" "form-control-row" "form-control-row" "form-control-row" "form-control-row" "form-control-row" "actionBtnRow"
}

.contentGridResource {
    display: grid;
    display: -ms-grid;
    grid-template-columns: 90%;
    align-items: center;
    justify-content: center;
    grid-column-gap: 15px;
    grid-row-gap: 10px;
    -ms-grid-columns: 10px 90% 10px;
    -ms-grid-column-align: end;
    grid-template-areas: "fieldRepRow" 
                         "dateRangeRow" 
                         "actHoursRow"
                         "actTypeRow"
                         "actListRow"
                         "actSurveyRow"
                         "actCommentsRow"
                         "actionBtnRow"
                         
}

.form-control-row {
    grid-area: form-control-row;
    display: grid;
    display: -ms-grid;
    grid-template-columns: 20% 80%;
    grid-row: auto;
    grid-gap: 5px;
    -ms-grid-columns: 20% 5px 80%;
    -ms-grid-column-align: start;
    grid-template-areas: "controlLabel-col-1 control-col-2"
}

.form-control-row-modal {
    grid-area: form-control-row;
    display: grid;
    display: -ms-grid;
    grid-template-columns: 35% 65%;
    grid-row: auto;
    grid-gap: 5px;
    -ms-grid-columns: 35% 5px 65%;
    -ms-grid-column-align: start;
    grid-template-areas: "controlLabel-col-1 control-col-2"
}

.fieldRepRow {
    grid-area: fieldRepRow;
    display: grid;
    display: -ms-grid;
    grid-template-columns: 20% 80%;
    grid-row: auto;
    grid-gap: 5px;
    -ms-grid-columns: 20% 5px 80%;
    -ms-grid-column-align: start;
    grid-template-areas: "controlLabel-col-1 control-col-2"
}

.dateRangeRow {
    grid-area: dateRangeRow;
    display: grid;
    display: -ms-grid;
    grid-template-columns: 20% 20% 10% 30%;
    grid-row: auto;
    grid-gap: 5px;
    -ms-grid-columns: 20% 5px 20% 5px 10% 5px 30%;
    -ms-grid-column-align: start;
    grid-template-areas: "controlLabel-col-1 control-col-2 controlLabel-col-3 control-col-4"
}

.actHoursRow {
    grid-area: actHoursRow;
    display: grid;
    display: -ms-grid;
    grid-template-columns: 20% 80%;
    grid-row: auto;
    grid-gap: 5px;
    -ms-grid-columns: 20% 5px 80%;
    -ms-grid-column-align: start;
    grid-template-areas: "controlLabel-col-1 control-col-2"
}

.actTypeRow {
    grid-area: actTypeRow;
    display: grid;
    display: -ms-grid;
    grid-template-columns: 20% 80%;
    grid-row: auto;
    grid-gap: 5px;
    -ms-grid-columns: 20% 5px 80%;
    -ms-grid-column-align: start;
    grid-template-areas: "controlLabel-col-1 control-col-2"
}

.actListRow {
    grid-area: actTypeRow;
    display: grid;
    display: -ms-grid;
    grid-template-columns: 20% 80%;
    grid-row: auto;
    grid-gap: 5px;
    -ms-grid-columns: 20% 5px 80%;
    -ms-grid-column-align: start;
    grid-template-areas: "controlLabel-col-1 control-col-2"
}

.actSurveyRow {
    grid-area: actTypeRow;
    display: grid;
    display: -ms-grid;
    grid-template-columns: 20% 80%;
    grid-row: auto;
    grid-gap: 5px;
    -ms-grid-columns: 20% 5px 80%;
    -ms-grid-column-align: start;
    grid-template-areas: "controlLabel-col-1 control-col-2"
}

.actCommentsRow {
    grid-area: actTypeRow;
    display: grid;
    display: -ms-grid;
    grid-template-columns: 20% 80%;
    grid-row: auto;
    grid-gap: 5px;
    -ms-grid-columns: 20% 5px 80%;
    -ms-grid-column-align: start;
    grid-template-areas: "controlLabel-col-1 control-col-2"
}

.buildQuestionGrid {
    grid-area: buildQuestionGrid;
    display: grid;
    display: -ms-grid;
    grid-column-gap: 5px;
    grid-row-gap: 10px;
    grid-template-columns: 90%;
    -ms-grid-columns: 5px 90% 5px;
    -ms-grid-column-align: start;
    grid-template-areas: "questionRow-question" 
                         "questionRow-4-column" 
                         "questionRow-4-column"
                         "questionRow-4-column" 
                         "questionRow-2-column-1-blank"
                         "questionRow-2-column" 
                         "questionRow-2-column"
}

.questionRow-question {
    grid-area: questionRow-2-column;
    display: grid;
    display: -ms-grid;
    grid-template-columns: 20% 70%;
    grid-row: auto;
    grid-gap: 5px;
    -ms-grid-columns: 20% 5px 70%;
    -ms-grid-column-align: start;
    grid-template-areas: "controlLabel-col-1 control-col-2"
}

.questionRow-2-column-1-blank {
    grid-area: questionRow-2-column-1-blank;
    display: grid;
    display: -ms-grid;
    grid-template-columns: 20% 70%;
    grid-row: auto;
    grid-gap: 5px;
    -ms-grid-columns: 20% 5px 70%;
    -ms-grid-column-align: start;
    grid-template-areas: ". controlLabel-col-2"
}

.questionRow-4-column {
    grid-area: questionRow-4-column;
    display: grid;
    display: -ms-grid;
    grid-template-columns: 20% 25% 20% 25%;
    grid-row: auto;
    grid-gap: 5px;
    -ms-grid-columns: 20% 5px 25% 5px 20% 5px 25%;
    -ms-grid-column-align: start;
    grid-template-areas: "controlLabel-col-1 control-col-2 controlLabel-col-3 control-col-4"
}

.contentGridPremium{
    display: grid;
      display: -ms-grid;
      grid-template-columns: 90%;
      align-items:center;
      justify-content:center;
      grid-column-gap: 15px;
      grid-row-gap: 1px;
      -ms-grid-columns: 15px 90% 15px;
      -ms-grid-column-align: end;
       grid-template-areas: "quoteName"
                            "quoteDate"
                            "reportButtons"
                            "premiumPayroll"
                            "premiumDetail"
                            "premiumAudit"
                            "premiumButtons"
                            
}

.quoteName {
    grid-area: quoteName;
    display: grid;
    display: -ms-grid;
    grid-template-columns: 100%;
    -ms-grid-rows: 2;
    -ms-grid-columns: 100%;
    grid-template-rows: 1;
    grid-template-areas: "quoteNameRow"
                         "quoteDate"
}

.quoteDate {
    grid-area: quoteDate;
    display: grid;
    display: -ms-grid;
    grid-template-columns: 100%;
    -ms-grid-rows: 1;
    -ms-grid-columns: 100%;
    grid-template-rows: 1;
    grid-template-columns: 100%;
    grid-template-areas: "quoteDateRow"
}

.quoteNameRow{
    grid-area: quoteNameRow;
    display: grid;
      display: -ms-grid;
      grid-template-columns: 20% 30% 20%;
      grid-row: auto;
      grid-gap: 5px;
      -ms-grid-columns: 20% 5px 30% 5px 20%;
      -ms-grid-column-align: start;
       /*grid-template-areas: "premiumControlLabel premiumControl premiumControl2"*/
}

.premiumPayroll{
    grid-area: premiumPayroll;
    -ms-grid-column: 2;
    -ms-grid-row: 4;
}

.premiumDetail {
        grid-area: premiumDetail;
      display: grid;
      display: -ms-grid;
      grid-template-columns: 100%;
      grid-template-rows: repeat(10, [row] auto  );
      grid-gap: 5px;
      -ms-grid-columns: 100%;
      /*-ms-grid-column-align: end;*/
       grid-template-areas: "premiumDetailRow"
                           
                            
}

.quoteDateRow{
    grid-area: quoteDateRow;
    display: grid;
      display: -ms-grid;
      grid-template-columns: 20% 15% 15% 15%;
      grid-row: 2;
      grid-gap: 5px;
      -ms-grid-columns: 20% 5px 15% 5px 15% 5px 15%;
      -ms-grid-column-align: start;
       /*grid-template-areas: "premiumControlLabel premiumControl premiumControl2"*/
}

.premiumDetailRow{
    grid-area: premiumDetailRow;
    display: grid;
      display: -ms-grid;
      grid-template-columns: 33% 33% 33%;
      grid-row: auto;
      grid-gap: 5px;
      -ms-grid-columns: 33% 5px 33% 5px 33%;
      -ms-grid-column-align: end;
       /*grid-template-areas: "premiumControlLabel premiumControl premiumControl2"*/
}

.premiumControlLabel{
    grid-area: premiumControlLabel;
    -ms-grid-column: 1;
    grid-column: 1;
    /*grid-row:auto;
    -ms-grid-row:auto;*/
}

.premiumAudit {
    display:inline;
    grid-area: premiumAudit;
    grid-row: 13;
}
      
.premiumControl{
    grid-area: premiumControl;
    grid-column: 2;
    -ms-grid-column: 3;
    /*grid-row:auto;
    -ms-grid-row:auto;*/
}

.premiumControl2{
    grid-area: premiumControl2;
    grid-column: 3;
    -ms-grid-column: 5;
    /*grid-row:auto;
    -ms-grid-row:auto;*/
}
.reportButtons {
    display:grid;
    grid-area: reportButtons;
    /*grid-column-align: end;*/
    justify-content:space-between;
    grid-template-columns: 75% 10% 10%;
      grid-row: 3;
      grid-gap: 5px;
      -ms-grid-columns: 80% 1px 10% 1px 10%;
      -ms-grid-column-align: end;
    grid-template-areas: ". actionButtonsInline actionButtonsInline"
}

.premiumButtons{
    display:grid;
    grid-area: premiumButtons;
    grid-template-columns: 25% 30% 30%;
      grid-row: 14;
      grid-gap: 5px;
      -ms-grid-columns: 25% 5px 30% 5px 30%;
      -ms-grid-column-align: end;
    grid-template-areas: ". actionButtons ."
}

.actionButtonsInline {
    display: inline-block;
    grid-area: actionButtonsInline;
    
}

.actionButtons {
    display: inline-block;
    grid-area: actionButtons;
    justify-content:space-between;
    justify-self: center;
}


.actionButtons-nospace {
    display: flex;
    grid-area: actionButtons-nospace;
    justify-self: start;
}

.setupData {
    grid-area: setupData;
    display: grid;
    display: -ms-grid;
    grid-template-columns: 70%;
    grid-template-areas: "setupDetailRow"
                         "setupDetailRow"
                        "setupDetailRow"
                        "setupDetailRow" 
                        "setupDetailRow"
}

.setupDetailRow {
    grid-area: setupDetailRow;
    display: grid;
    grid-template-columns: 35% 15% 5% 15%;
    grid-row: auto;
    grid-gap: 5px;
}

.setupTableData {
    grid-area: setupData;
    display: grid;
    display: -ms-grid;
    grid-row-gap: 15px;
    grid-template-columns: 50%;
    grid-template-areas: "tableData"
                         "actionBtnRow"
}

.tableData{
    grid-area: tableData;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
}

.actionBtnRow {
    display:grid;
    grid-area: actionBtnRow;
    grid-template-columns: 90%;
      grid-gap: 5px;
      justify-content: center;
      -ms-grid-columns: 5px 90% 5px;
      -ms-grid-column-align: center;
    grid-template-areas: "actionButtons"
}

.mbrResolutionGrid {
    grid-area: mbrResolutionGrid;
    display: grid;
    display: -ms-grid;
    grid-row-gap: 15px;
    grid-column-gap: 10px;
    grid-template-columns: 100%;
    grid-template-rows: 4;
    grid-template-areas: "mbrResolutionRow"
                         "mbrResolutionRow"
                         "mbrReolutionRow"
                         "actionButtons"
}

.mbrResolutionRow {
    grid-area: mbrResolutionRow;
    display: grid;
    display: -ms-grid;
    grid-row-gap: 15px;
    grid-row: auto;
    grid-column-gap: 10px;
    grid-template-columns: 20% 15% 10% 20% 10% 20%;
    grid-column-align:start;
}

.genRenewalGrid{
    grid-area: genRenewalGrid;
    display: grid;
    display: -ms-grid;
    grid-row-gap: 15px;
    grid-template-columns: 33% 33% 33%;
    grid-template-areas: "controlLabel-col-1 control-col-2 actionButtons"
                         "controlLabel-col-1 control-col-2 ."
                         "invToGenTable invToGenTable invToGenTable"
                         "actionButtons . ."
}

.renewalHdrDetail {
      grid-area: renewalHdrDetail;
      display: grid;
      display: -ms-grid;
      grid-template-columns: 100%;
      grid-template-rows: repeat(2, [row] auto  );
      grid-gap: 5px;
      -ms-grid-columns: 100%;
      /*-ms-grid-column-align: end;*/
       grid-template-areas: "renewalHdrRow"                    
}

.renewalHdrRow {
    grid-area: renewalHdrRow;
    display: grid;
    display: -ms-grid;
    grid-template-columns: 15% 30% 55%;
      grid-row: auto;
      grid-gap: 5px;
      -ms-grid-columns: 33% 5px 33% 5px 33%;
      -ms-grid-column-align:start;
}

.postPremiumGrid{
    grid-area: postPremiumGrid;
    display: grid;
    display: -ms-grid;
    grid-row-gap: 15px;
    grid-template-columns: 50% 50%;
    grid-template-areas: "noPremPanel ."
                         "batchNbrRow batchNbrRow"
                         "premToPostTable premToPostTable"
                         "actionButtons ."
}

.noPremPanel{
    grid-area: noPremPanel;
    grid-column: 1;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
}

.genBatchNbrRow{
    grid-area: genBatchNbrRow;
    grid-column: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
}

.genInvDate{
    grid-area: genInvDate;
    grid-column: 1;
    grid-row: 2;
    -ms-grid-column: 1;
    -ms-grid-row: 2;
}

.invToGenTable{
    grid-aria: invToGenTable;
    grid-column: 1 / span 2;
    grid-column-span: 2;
    grid-row: 3;
    -ms-grid-row: 3;
    -ms-grid-column-span: 2;
    -ms-grid-row-align: stretch;
    grid-row-align:stretch;
}

.batchNbrRow{
    grid-area: batchNbrRow;
    grid-column: 1;
    grid-row: 2;
    -ms-grid-column: 1;
    -ms-grid-row: 2;
}

.premToPostTable{
    grid-aria: premToPostTable;
    grid-column: 1 / span 2;
    grid-column-span: 2;
    grid-row: 3;
    -ms-grid-row: 3;
    -ms-grid-column-span: 2;
    -ms-grid-row-align: stretch;
    grid-row-align:stretch;
}

.controlLabel-col-1{
    grid-area: controlLabel-col-1;
    -ms-grid-column: 1;
    grid-column: 1;
    /*grid-row:auto;
    -ms-grid-row:auto;*/
}

.controlLabel-col-2 {
    grid-area: controlLabel-col-2;
    -ms-grid-column: 3;
    grid-column: 2;
    /*grid-row:auto;
    -ms-grid-row:auto;*/
}

.control-col-2{
    grid-area: control-col-2;
    grid-column: 2;
    -ms-grid-column: 3;
}

.controlLabel-col-3 {
    grid-area: controlLabel-col-3;
    -ms-grid-column: 3;
    grid-column: 3;
    /*grid-row:auto;
    -ms-grid-row:auto;*/
}

.control-col-3{
    grid-area: control-col-3;
    grid-column: 3;
    -ms-grid-column: 5;
}

.control-col-3-center{
    display: flex;
    grid-area: control-col-3-center;
    grid-column: 3;
    justify-content: center;
    -ms-grid-column: 5;
    -ms-grid-column-align: center;
}

.control-col-3-right{
    display: flex;
    grid-area: control-col-3-right;
    grid-column: 3;
    justify-content: flex-end;
    -ms-grid-column: 5;
    -ms-grid-column-align: end;
}

.control-col-4{
    grid-area: control-col-4;
    grid-column: 4;
    -ms-grid-column: 6;
}

.control-col-5{
    grid-area: control-col-5;
    grid-column: 5;
    -ms-grid-column: 7;
}

.control-col-5-right{
    display: flex;
    grid-area: control-col-5-right;
    grid-column: 5;
    justify-content: flex-end;
    -ms-grid-column: 7;
    -ms-grid-column-align: end;
}


.control-col-6{
    grid-area: control-col-6;
    grid-column: 6;
    -ms-grid-column: 8;
}

.td-border-right {
    border-right: solid;
    border-color: #171d5f;
}

.input-group-addon-icon {
    background-color: #e9ecef;
}

.input-group-nowrap {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
}

@media (min-width: 768px) {
  .container, .wrapper {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container, .wrapper {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container,.wrapper {
    width: 1170px;
  }
}