/************************************
 To overwrite css properties, uncomment/edit them.
 If you decide to change the size of elements,
 please keep in mind both mobile and desktop layouts (media queries)
************************************/

/************************************
        Table

 Please note the position and the width of the row labels
 are defined in the question properties.
*************************************/
.flashlight-textboxgrid  table.generic-table thead tr th{
    /*color: #2b542c;*/
}
.flashlight-textboxgrid  table.generic-table tbody tr td label{
    /*color: #da5124;*/
}
.flashlight-textboxgrid table.generic-table-alternate-row tbody tr:nth-child(odd) {
    /*background-color: rgb(255, 247, 244);*/
    /*border-bottom: 1px solid #ffd8ca;*/
    /*border-top: 1px solid #ffd8ca;*/
}

/*******************************
            Inputs
*******************************/
.flashlight-textboxgrid input.generic-input{
    /*border: 2px dashed #1b6d85;*/
}
/************************************
        Opt Out
*************************************/
.flashlight-textboxgrid table.generic-table thead tr th.optOutLabelWrapper{
    /*color: #da5124;*/
}
.flashlight-textboxgrid table .optOutWrapper .shown-when-not-selected {
    color: #7e7e7e;
}
.flashlight-textboxgrid table .optOutWrapper .shown-when-selected{
    color: #EC5D2F;
}

/************************************
        Custom question CSS rules

It is not recommended to edit this part.
*************************************/
.flashlight-textboxgrid table .optOutWrapper{
    cursor: pointer;
}
.flashlight-textboxgrid table.generic-table {
    border-collapse: collapse;
    width: 100%;
    table-layout: auto;
}
.flashlight-textboxgrid .revealOneByOneColumn tr div.wrapper,
.flashlight-textboxgrid .revealOneByOneRow tr div.wrapper{
    display:none;
}
.flashlight-textboxgrid .input-group{
    display: block;
    max-width: 1024px;
    overflow: auto;
}
.flashlight-textboxgrid .flashlight-textboxgrid-optout .shown-when-not-selected {
    display: inline;
    cursor: pointer;
    float: inherit;
}
.flashlight-textboxgrid .flashlight-textboxgrid-optout.selected .shown-when-selected{
    display: inline;
    cursor: pointer;
    float: inherit;
}
.flashlight-textboxgrid .flashlight-textboxgrid-optout{
    margin-top: 4px;
}

.flashlight-textboxgrid .column-align-left th, .flashlight-textboxgrid .column-align-left td{
    text-align: left;
}
.flashlight-textboxgrid .column-align-center th, .flashlight-textboxgrid .column-align-center td{
    text-align: center;
}
.flashlight-textboxgrid .column-align-right th, .flashlight-textboxgrid .column-align-right td{
    text-align: right;
}

.flashlight-textboxgrid input.generic-input{
    padding: 2px 3px;
    width: 100%;
    min-width: 100px;
    line-height: 1em;
}

.flashlight-textboxgrid-input-wrapper{
    position: relative;
}

.flashlight-textboxgrid-input-wrapper .percentage{
    display: inline;
    position: absolute;
    right: 6px;
    top: 3px;
    font-size: 1em;
}

@media (min-width:768px) {
    .flashlight-textboxgrid input.generic-input,
    .flashlight-textboxgrid-input-wrapper .percentage{
        font-size: 1.2em;
    }
    .flashlight-textboxgrid .flashlight-textboxgrid-optout{
        margin-top: 8px;
    }
}

@media (min-width:992px) {
    .flashlight-textboxgrid input.generic-input,
    .flashlight-textboxgrid-input-wrapper .percentage{
        font-size: 1.4em;
    }
}
@media (min-width:1200px) {
    .flashlight-textboxgrid input.generic-input,
    .flashlight-textboxgrid-input-wrapper .percentage{
        font-size: 14px;
    }
}