範囲グループを表示するかどうかを取得および設定するには、showRowOutlineまたはshowColumnOutlineメソッドを使用します。次に、例を示します。
行または列のアウトライン（範囲グループ）を展開または折りたたむには、expandGroupメソッドまたはexpandメソッド（指定のレベルの全アウトラインを展開）を使用します。アウトラインボタン（+、-）をクリックしても、アウトラインを展開または折りたたむことができます。次に、例を示します。
範囲グループの方向（アウトラインボタンの位置）を取得または設定するには、directionメソッドを使用します。次に、例を示します。
var spreadNS = GC.Spread.Sheets;
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
initSpread(spread);
};
function initSpread(spread) {
if (data.length > 0) {
spread.fromJSON(data[0]);
var sheet = spread.getActiveSheet();
sheet.suspendPaint();
sheet.rowOutlines.group(3, 4);
sheet.rowOutlines.group(8, 3);
sheet.rowOutlines.group(12, 2);
sheet.rowOutlines.group(15, 3);
sheet.rowOutlines.group(3, 18);
sheet.columnOutlines.group(1, 4);
sheet.columnOutlines.group(6, 4);
sheet.resumePaint();
}
_getElementById("btnGroup").addEventListener('click',function () {
var sheet = spread.getActiveSheet();
try {
var selections = sheet.getSelections();
if (selections && selections.length > 0) {
var cr = selections[0];
if (cr.col == -1 && cr.row == -1) { // sheet selection
}
else if (cr.col == -1) {// row selection
sheet.rowOutlines.group(cr.row, cr.rowCount);
sheet.invalidateLayout();
sheet.repaint();
}
else if (cr.row == -1) {// column selection
sheet.columnOutlines.group(cr.col, cr.colCount);
sheet.invalidateLayout();
sheet.repaint();
}
else {// cell range selection
alert("Please select row or column for group");
}
}
} catch (ex) {
alert(ex.message);
}
});
_getElementById("btnUngroup").addEventListener('click',function () {
var sheet = spread.getActiveSheet();
try {
var selections = sheet.getSelections();
if (selections && selections.length > 0) {
var cr = selections[0];
if (cr.col == -1 && cr.row == -1) { // sheet selection
}
else if (cr.col == -1) {// row selection
sheet.rowOutlines.ungroupRange(cr.row, cr.rowCount);
sheet.invalidateLayout();
sheet.repaint();
}
else if (cr.row == -1) {// column selection
sheet.columnOutlines.ungroupRange(cr.col, cr.colCount);
sheet.invalidateLayout();
sheet.repaint();
}
else {// cell range selection
alert("Please select row or column for group");
}
}
} catch (ex) {
alert(ex.message);
}
});
_getElementById("btnShowDetail").addEventListener('click',function () {
var sheet = spread.getActiveSheet();
try {
var selections = sheet.getSelections();
if (selections && selections.length > 0) {
var cr = selections[0];
if (cr.col == -1 && cr.row == -1) { // sheet selection
}
else if (cr.col == -1) {// row selection
for (var i = 0; i < cr.rowCount; i++) {
var rgi = sheet.rowOutlines.find(i + cr.row, 0);
if (rgi != null) {
sheet.rowOutlines.expandGroup(rgi, true);
}
}
sheet.invalidateLayout();
sheet.repaint();
}
else if (cr.row == -1) {// column selection
for (var i = 0; i < cr.colCount; i++) {
var rgi = sheet.columnOutlines.find(i + cr.col, 0);
if (rgi != null) {
sheet.columnOutlines.expandGroup(rgi, true);
}
}
sheet.invalidateLayout();
sheet.repaint();
}
else {// cell range selection
alert("Please select row or column for group");
}
}
} catch (ex) {
alert(ex.message);
}
});
_getElementById("btnHideDetail").addEventListener('click',function () {
var sheet = spread.getActiveSheet();
try {
var selections = sheet.getSelections();
if (selections && selections.length > 0) {
var cr = selections[0];
if (cr.col == -1 && cr.row == -1) { // sheet selection
}
else if (cr.col == -1) {// row selection
for (var i = 0; i < cr.rowCount; i++) {
var rgi = sheet.rowOutlines.find(i + cr.row, 0);
if (rgi != null) {
sheet.rowOutlines.expandGroup(rgi, false);
}
}
sheet.invalidateLayout();
sheet.repaint();
}
else if (cr.row == -1) {// column selection
for (var i = 0; i < cr.colCount; i++) {
var rgi = sheet.columnOutlines.find(i + cr.col, 0);
if (rgi != null) {
sheet.columnOutlines.expandGroup(rgi, false);
}
}
sheet.invalidateLayout();
sheet.repaint();
}
else {// cell range selection
alert("Please select row or column for group");
}
}
} catch (ex) {
alert(ex.message);
}
});
_getElementById("row_summary").addEventListener('click',function () {
var sheet = spread.getActiveSheet();
var checked = this.checked;
if (checked) {
sheet.rowOutlines.direction(spreadNS.Outlines.OutlineDirection.forward);
} else {
sheet.rowOutlines.direction(spreadNS.Outlines.OutlineDirection.backward);
}
sheet.invalidateLayout();
sheet.repaint();
});
_getElementById("col_summary").addEventListener('click',function () {
var sheet = spread.getActiveSheet();
var checked = this.checked;
if (checked) {
sheet.columnOutlines.direction(spreadNS.Outlines.OutlineDirection.forward);
} else {
sheet.columnOutlines.direction(spreadNS.Outlines.OutlineDirection.backward);
}
sheet.invalidateLayout();
sheet.repaint();
});
_getElementById("rowGroup_visibility").addEventListener('click',function () {
var sheet = spread.getActiveSheet();
sheet.showRowOutline(this.checked);
});
_getElementById("colGroup_visibility").addEventListener('click',function () {
var sheet = spread.getActiveSheet();
sheet.showColumnOutline(this.checked);
});
};
function _getElementById(id){
return document.getElementById(id);
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="ja-jp" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="data.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div class="options-container">
<div class="option-row">
<p class="desc">以下のオプションを使用して、選択したセル範囲のグループ設定を変更します。</p>
</div>
<div class="option-row">
<input type="button" value="グループ化する" id="btnGroup" />
<input type="button" value="グループ化を解除する" id="btnUngroup" />
<input type="button" value="詳細を表示する" id="btnShowDetail" />
<input type="button" value="詳細を非表示にする" id="btnHideDetail" />
</div>
<div class="option-row">
<input type="checkbox" id="row_summary" checked />
<label for="row_summary">詳細の下に集計行を表示する</label>
</div>
<div class="option-row">
<input type="checkbox" id="col_summary" checked />
<label for="col_summary">詳細の右に集計列を表示する</label>
</div>
<div class="option-row">
<input type="checkbox" id="rowGroup_visibility" checked />
<label for="rowGroup_visibility">行範囲グループを表示する</label>
</div>
<div class="option-row">
<input type="checkbox" id="colGroup_visibility" checked />
<label for="colGroup_visibility">列範囲グループを表示する</label>
</div>
</div>
</div>
</body>
</html>
var data = [{
"version": "14.0.5",
"tabStripRatio": 0.6,
"customList": [],
"sheets": {
"Sheet1": {
"name": "Sheet1",
"isSelected": true,
"rowCount": 100,
"columnCount": 100,
"activeRow": 2,
"activeCol": 2,
"theme": {
"name": "Office",
"themeColor": {
"name": "Office",
"background1": {
"a": 255,
"r": 255,
"g": 255,
"b": 255
},
"background2": {
"a": 255,
"r": 231,
"g": 230,
"b": 230
},
"text1": {
"a": 255,
"r": 0,
"g": 0,
"b": 0
},
"text2": {
"a": 255,
"r": 68,
"g": 84,
"b": 106
},
"accent1": {
"a": 255,
"r": 68,
"g": 114,
"b": 196
},
"accent2": {
"a": 255,
"r": 237,
"g": 125,
"b": 49
},
"accent3": {
"a": 255,
"r": 165,
"g": 165,
"b": 165
},
"accent4": {
"a": 255,
"r": 255,
"g": 192,
"b": 0
},
"accent5": {
"a": 255,
"r": 91,
"g": 155,
"b": 213
},
"accent6": {
"a": 255,
"r": 112,
"g": 173,
"b": 71
},
"hyperlink": {
"a": 255,
"r": 5,
"g": 99,
"b": 193
},
"followedHyperlink": {
"a": 255,
"r": 149,
"g": 79,
"b": 114
}
},
"headingFont": "Calibri Light",
"bodyFont": "Calibri"
},
"data": {
"dataTable": {
"0": {
"0": {
"value": "Income Statement 2019-2020",
"style": "__builtInStyle2"
}
},
"1": {
"0": {
"style": "__builtInStyle3"
},
"1": {
"value": "Q1",
"style": "__builtInStyle4"
},
"2": {
"value": "Q2",
"style": "__builtInStyle4"
},
"3": {
"value": "Q3",
"style": "__builtInStyle4"
},
"4": {
"value": "Q4",
"style": "__builtInStyle4"
},
"5": {
"value": 2019,
"style": "__builtInStyle5"
},
"6": {
"value": "Q1",
"style": "__builtInStyle4"
},
"7": {
"value": "Q2",
"style": "__builtInStyle4"
},
"8": {
"value": "Q3",
"style": "__builtInStyle4"
},
"9": {
"value": "Q4",
"style": "__builtInStyle4"
},
"10": {
"value": 2020,
"style": "__builtInStyle5"
}
},
"2": {
"0": {
"value": "REVENUE",
"style": "__builtInStyle6"
},
"1": {
"value": 1063908,
"style": "__builtInStyle7"
},
"2": {
"value": 932658,
"style": "__builtInStyle7"
},
"3": {
"value": 1097640,
"style": "__builtInStyle7"
},
"4": {
"value": 930181,
"style": "__builtInStyle7"
},
"5": {
"value": 4024387,
"style": "__builtInStyle8",
"formula": "SUM(B3:E3)"
},
"6": {
"value": 1120386,
"style": "__builtInStyle7"
},
"7": {
"value": 1035574,
"style": "__builtInStyle7"
},
"8": {
"value": 1000482,
"style": "__builtInStyle7"
},
"9": {
"value": 1188039,
"style": "__builtInStyle7"
},
"10": {
"value": 12300607,
"style": "__builtInStyle8"
}
},
"3": {
"0": {
"value": "Fixed COS",
"style": "__builtInStyle9"
},
"1": {
"value": 0,
"style": "__builtInStyle10"
},
"2": {
"value": 0,
"style": "__builtInStyle10"
},
"3": {
"value": 0,
"style": "__builtInStyle10"
},
"4": {
"value": 0,
"style": "__builtInStyle10"
},
"5": {
"value": 0,
"style": "__builtInStyle11",
"formula": "SUM(B4:E4)"
},
"6": {
"value": 0,
"style": "__builtInStyle10"
},
"7": {
"value": 0,
"style": "__builtInStyle10"
},
"8": {
"value": 0,
"style": "__builtInStyle10"
},
"9": {
"value": 0,
"style": "__builtInStyle10"
},
"10": {
"value": 0,
"style": "__builtInStyle11"
}
},
"4": {
"0": {
"value": "Variable COS",
"style": "__builtInStyle9"
},
"1": {
"value": 608335,
"style": "__builtInStyle10"
},
"2": {
"value": 495069,
"style": "__builtInStyle10"
},
"3": {
"value": 584449,
"style": "__builtInStyle10"
},
"4": {
"value": 512606,
"style": "__builtInStyle10"
},
"5": {
"value": 2200459,
"style": "__builtInStyle11",
"formula": "SUM(B5:E5)"
},
"6": {
"value": 606953,
"style": "__builtInStyle10"
},
"7": {
"value": 621042,
"style": "__builtInStyle10"
},
"8": {
"value": 559003,
"style": "__builtInStyle10"
},
"9": {
"value": 648405,
"style": "__builtInStyle10"
},
"10": {
"value": 6918979,
"style": "__builtInStyle11"
}
},
"5": {
"0": {
"value": "Depreciation",
"style": "__builtInStyle9"
},
"1": {
"value": 9924,
"style": "__builtInStyle10"
},
"2": {
"value": 9987,
"style": "__builtInStyle10"
},
"3": {
"value": 9632,
"style": "__builtInStyle10"
},
"4": {
"value": 9897,
"style": "__builtInStyle10"
},
"5": {
"value": 39440,
"style": "__builtInStyle11",
"formula": "SUM(B6:E6)"
},
"6": {
"value": 7395,
"style": "__builtInStyle10"
},
"7": {
"value": 13524,
"style": "__builtInStyle10"
},
"8": {
"value": 28620,
"style": "__builtInStyle10"
},
"9": {
"value": 10780,
"style": "__builtInStyle10"
},
"10": {
"value": 129195,
"style": "__builtInStyle11"
}
},
"6": {
"0": {
"value": "Cost of Sales",
"style": "__builtInStyle6"
},
"1": {
"value": 618259,
"style": "__builtInStyle7",
"formula": "SUM(B4:B6)"
},
"2": {
"value": 505056,
"style": "__builtInStyle7",
"formula": "SUM(C4:C6)"
},
"3": {
"value": 594081,
"style": "__builtInStyle7",
"formula": "SUM(D4:D6)"
},
"4": {
"value": 522503,
"style": "__builtInStyle7",
"formula": "SUM(E4:E6)"
},
"5": {
"value": 2239899,
"style": "__builtInStyle8",
"formula": "SUM(F4:F6)"
},
"6": {
"value": 614348,
"style": "__builtInStyle7",
"formula": "SUM(G4:G6)"
},
"7": {
"value": 634566,
"style": "__builtInStyle7",
"formula": "SUM(H4:H6)"
},
"8": {
"value": 587623,
"style": "__builtInStyle7",
"formula": "SUM(I4:I6)"
},
"9": {
"value": 659185,
"style": "__builtInStyle7",
"formula": "SUM(J4:J6)"
},
"10": {
"value": 7048174,
"style": "__builtInStyle8",
"formula": "SUM(K4:K6)"
}
},
"7": {
"0": {
"value": "GROSS PROFIT",
"style": "__builtInStyle6"
},
"1": {
"value": 445649,
"style": "__builtInStyle7",
"formula": "B3-B7"
},
"2": {
"value": 427602,
"style": "__builtInStyle7",
"formula": "C3-C7"
},
"3": {
"value": 503559,
"style": "__builtInStyle7",
"formula": "D3-D7"
},
"4": {
"value": 407678,
"style": "__builtInStyle7",
"formula": "E3-E7"
},
"5": {
"value": 1784488,
"style": "__builtInStyle8",
"formula": "F3-F7"
},
"6": {
"value": 506038,
"style": "__builtInStyle7",
"formula": "G3-G7"
},
"7": {
"value": 401008,
"style": "__builtInStyle7",
"formula": "H3-H7"
},
"8": {
"value": 412859,
"style": "__builtInStyle7",
"formula": "I3-I7"
},
"9": {
"value": 528854,
"style": "__builtInStyle7",
"formula": "J3-J7"
},
"10": {
"value": 5252433,
"style": "__builtInStyle8",
"formula": "K3-K7"
}
},
"8": {
"0": {
"value": "Fixed Expenses",
"style": "__builtInStyle9"
},
"1": {
"value": 308361,
"style": "__builtInStyle10"
},
"2": {
"value": 302497,
"style": "__builtInStyle10"
},
"3": {
"value": 291258,
"style": "__builtInStyle10"
},
"4": {
"value": 318776,
"style": "__builtInStyle10"
},
"5": {
"value": 1220892,
"style": "__builtInStyle11",
"formula": "SUM(B9:E9)"
},
"6": {
"value": 341003,
"style": "__builtInStyle10"
},
"7": {
"value": 314875,
"style": "__builtInStyle10"
},
"8": {
"value": 350506,
"style": "__builtInStyle10"
},
"9": {
"value": 324738,
"style": "__builtInStyle10"
},
"10": {
"value": 4020657,
"style": "__builtInStyle11"
}
},
"9": {
"0": {
"value": "Variable Expenses",
"style": "__builtInStyle9"
},
"1": {
"value": 78137,
"style": "__builtInStyle10"
},
"2": {
"value": 81905,
"style": "__builtInStyle10"
},
"3": {
"value": 117711,
"style": "__builtInStyle10"
},
"4": {
"value": 73710,
"style": "__builtInStyle10"
},
"5": {
"value": 351463,
"style": "__builtInStyle11",
"formula": "SUM(B10:E10)"
},
"6": {
"value": 92156,
"style": "__builtInStyle10"
},
"7": {
"value": 74821,
"style": "__builtInStyle10"
},
"8": {
"value": 85851,
"style": "__builtInStyle10"
},
"9": {
"value": 91929,
"style": "__builtInStyle10"
},
"10": {
"value": 956213,
"style": "__builtInStyle11"
}
},
"10": {
"0": {
"value": "Expenses",
"style": "__builtInStyle6"
},
"1": {
"value": 386498,
"style": "__builtInStyle7",
"formula": "SUM(B9:B10)"
},
"2": {
"value": 384402,
"style": "__builtInStyle7",
"formula": "SUM(C9:C10)"
},
"3": {
"value": 408969,
"style": "__builtInStyle7",
"formula": "SUM(D9:D10)"
},
"4": {
"value": 392486,
"style": "__builtInStyle7",
"formula": "SUM(E9:E10)"
},
"5": {
"value": 1572355,
"style": "__builtInStyle8",
"formula": "SUM(F9:F10)"
},
"6": {
"value": 433159,
"style": "__builtInStyle7",
"formula": "SUM(G9:G10)"
},
"7": {
"value": 389696,
"style": "__builtInStyle7",
"formula": "SUM(H9:H10)"
},
"8": {
"value": 436357,
"style": "__builtInStyle7",
"formula": "SUM(I9:I10)"
},
"9": {
"value": 416667,
"style": "__builtInStyle7",
"formula": "SUM(J9:J10)"
},
"10": {
"value": 4976870,
"style": "__builtInStyle8",
"formula": "SUM(K9:K10)"
}
},
"11": {
"0": {
"value": "OPERATING PROFIT",
"style": "__builtInStyle6"
},
"1": {
"value": 59151,
"style": "__builtInStyle7",
"formula": "B8-B11"
},
"2": {
"value": 43200,
"style": "__builtInStyle7",
"formula": "C8-C11"
},
"3": {
"value": 94590,
"style": "__builtInStyle7",
"formula": "D8-D11"
},
"4": {
"value": 15192,
"style": "__builtInStyle7",
"formula": "E8-E11"
},
"5": {
"value": 212133,
"style": "__builtInStyle8",
"formula": "F8-F11"
},
"6": {
"value": 72879,
"style": "__builtInStyle7",
"formula": "G8-G11"
},
"7": {
"value": 11312,
"style": "__builtInStyle7",
"formula": "H8-H11"
},
"8": {
"value": -23498,
"style": "__builtInStyle7",
"formula": "I8-I11"
},
"9": {
"value": 112187,
"style": "__builtInStyle7",
"formula": "J8-J11"
},
"10": {
"value": 275563,
"style": "__builtInStyle8",
"formula": "K8-K11"
}
},
"12": {
"0": {
"value": "Other Income",
"style": "__builtInStyle9"
},
"1": {
"value": 0,
"style": "__builtInStyle10"
},
"2": {
"value": 0,
"style": "__builtInStyle10"
},
"3": {
"value": 0,
"style": "__builtInStyle10"
},
"4": {
"value": 0,
"style": "__builtInStyle10"
},
"5": {
"value": 0,
"style": "__builtInStyle11",
"formula": "SUM(B13:E13)"
},
"6": {
"value": 0,
"style": "__builtInStyle10"
},
"7": {
"value": 0,
"style": "__builtInStyle10"
},
"8": {
"value": 0,
"style": "__builtInStyle10"
},
"9": {
"value": 0,
"style": "__builtInStyle10"
},
"10": {
"value": 0,
"style": "__builtInStyle11"
}
},
"13": {
"0": {
"value": "Other Expenses",
"style": "__builtInStyle9"
},
"1": {
"value": 0,
"style": "__builtInStyle10"
},
"2": {
"value": 0,
"style": "__builtInStyle10"
},
"3": {
"value": 0,
"style": "__builtInStyle10"
},
"4": {
"value": 0,
"style": "__builtInStyle10"
},
"5": {
"value": 0,
"style": "__builtInStyle11",
"formula": "SUM(B14:E14)"
},
"6": {
"value": 0,
"style": "__builtInStyle10"
},
"7": {
"value": 0,
"style": "__builtInStyle10"
},
"8": {
"value": 0,
"style": "__builtInStyle10"
},
"9": {
"value": 0,
"style": "__builtInStyle10"
},
"10": {
"value": 0,
"style": "__builtInStyle11"
}
},
"14": {
"0": {
"value": "EARNINGS BEFORE INTEREST & TAX",
"style": "__builtInStyle6"
},
"1": {
"value": 59151,
"style": "__builtInStyle7",
"formula": "B12-SUM(B13:B14)"
},
"2": {
"value": 43200,
"style": "__builtInStyle7",
"formula": "C12-SUM(C13:C14)"
},
"3": {
"value": 94590,
"style": "__builtInStyle7",
"formula": "D12-SUM(D13:D14)"
},
"4": {
"value": 15192,
"style": "__builtInStyle7",
"formula": "E12-SUM(E13:E14)"
},
"5": {
"value": 212133,
"style": "__builtInStyle8",
"formula": "F12-SUM(F13:F14)"
},
"6": {
"value": 72879,
"style": "__builtInStyle7",
"formula": "G12-SUM(G13:G14)"
},
"7": {
"value": 11312,
"style": "__builtInStyle7",
"formula": "H12-SUM(H13:H14)"
},
"8": {
"value": -23498,
"style": "__builtInStyle7",
"formula": "I12-SUM(I13:I14)"
},
"9": {
"value": 112187,
"style": "__builtInStyle7",
"formula": "J12-SUM(J13:J14)"
},
"10": {
"value": 275563,
"style": "__builtInStyle8",
"formula": "K12-SUM(K13:K14)"
}
},
"15": {
"0": {
"value": "Interest Income",
"style": "__builtInStyle9"
},
"1": {
"value": -926,
"style": "__builtInStyle10"
},
"2": {
"value": 297,
"style": "__builtInStyle10"
},
"3": {
"value": 0,
"style": "__builtInStyle10"
},
"4": {
"value": 1805,
"style": "__builtInStyle10"
},
"5": {
"value": 1176,
"style": "__builtInStyle11",
"formula": "SUM(B16:E16)"
},
"6": {
"value": 125,
"style": "__builtInStyle10"
},
"7": {
"value": 876,
"style": "__builtInStyle10"
},
"8": {
"value": 158,
"style": "__builtInStyle10"
},
"9": {
"value": 253,
"style": "__builtInStyle10"
},
"10": {
"value": -5505,
"style": "__builtInStyle11"
}
},
"16": {
"0": {
"value": "Interest Expenses",
"style": "__builtInStyle9"
},
"1": {
"value": 22622,
"style": "__builtInStyle10"
},
"2": {
"value": 22427,
"style": "__builtInStyle10"
},
"3": {
"value": 23844,
"style": "__builtInStyle10"
},
"4": {
"value": 20789,
"style": "__builtInStyle10"
},
"5": {
"value": 89682,
"style": "__builtInStyle11",
"formula": "SUM(B17:E17)"
},
"6": {
"value": 27282,
"style": "__builtInStyle10"
},
"7": {
"value": 34184,
"style": "__builtInStyle10"
},
"8": {
"value": 28150,
"style": "__builtInStyle10"
},
"9": {
"value": 25549,
"style": "__builtInStyle10"
},
"10": {
"value": 301814,
"style": "__builtInStyle11"
}
},
"17": {
"0": {
"value": "Tax Expenses",
"style": "__builtInStyle9"
},
"1": {
"value": 17442,
"style": "__builtInStyle10"
},
"2": {
"value": 3864,
"style": "__builtInStyle10"
},
"3": {
"value": 13939,
"style": "__builtInStyle10"
},
"4": {
"value": 0,
"style": "__builtInStyle10"
},
"5": {
"value": 35245,
"style": "__builtInStyle11",
"formula": "SUM(B18:E18)"
},
"6": {
"value": 0,
"style": "__builtInStyle10"
},
"7": {
"value": 0,
"style": "__builtInStyle10"
},
"8": {
"value": 0,
"style": "__builtInStyle10"
},
"9": {
"value": 0,
"style": "__builtInStyle10"
},
"10": {
"value": 58610,
"style": "__builtInStyle11"
}
},
"18": {
"0": {
"value": "EARNINGS AFTER TAX",
"style": "__builtInStyle6"
},
"1": {
"value": 20013,
"style": "__builtInStyle7",
"formula": "B15-SUM(B16:B18)"
},
"2": {
"value": 16612,
"style": "__builtInStyle7",
"formula": "C15-SUM(C16:C18)"
},
"3": {
"value": 56807,
"style": "__builtInStyle7",
"formula": "D15-SUM(D16:D18)"
},
"4": {
"value": -7402,
"style": "__builtInStyle7",
"formula": "E15-SUM(E16:E18)"
},
"5": {
"value": 86030,
"style": "__builtInStyle8",
"formula": "F15-SUM(F16:F18)"
},
"6": {
"value": 45472,
"style": "__builtInStyle7",
"formula": "G15-SUM(G16:G18)"
},
"7": {
"value": -23748,
"style": "__builtInStyle7",
"formula": "H15-SUM(H16:H18)"
},
"8": {
"value": -51806,
"style": "__builtInStyle7",
"formula": "I15-SUM(I16:I18)"
},
"9": {
"value": 86385,
"style": "__builtInStyle7",
"formula": "J15-SUM(J16:J18)"
},
"10": {
"value": -79356,
"style": "__builtInStyle8",
"formula": "K15-SUM(K16:K18)"
}
},
"19": {
"0": {
"value": "Adjustments",
"style": "__builtInStyle9"
},
"1": {
"value": 0,
"style": "__builtInStyle10"
},
"2": {
"value": 0,
"style": "__builtInStyle10"
},
"3": {
"value": 0,
"style": "__builtInStyle10"
},
"4": {
"value": 0,
"style": "__builtInStyle10"
},
"5": {
"value": 0,
"style": "__builtInStyle11",
"formula": "SUM(B20:E20)"
},
"6": {
"value": 8138,
"style": "__builtInStyle10"
},
"7": {
"value": -4495,
"style": "__builtInStyle10"
},
"8": {
"value": 11147,
"style": "__builtInStyle10"
},
"9": {
"value": 5970,
"style": "__builtInStyle10"
},
"10": {
"value": 371926,
"style": "__builtInStyle11"
}
},
"20": {
"0": {
"value": "NET INCOME",
"style": "__builtInStyle6"
},
"1": {
"value": 20013,
"style": "__builtInStyle7",
"formula": "B19-B20"
},
"2": {
"value": 16612,
"style": "__builtInStyle7",
"formula": "C19-C20"
},
"3": {
"value": 56807,
"style": "__builtInStyle7",
"formula": "D19-D20"
},
"4": {
"value": -7402,
"style": "__builtInStyle7",
"formula": "E19-E20"
},
"5": {
"value": 86030,
"style": "__builtInStyle8",
"formula": "F19-F20"
},
"6": {
"value": 37334,
"style": "__builtInStyle7",
"formula": "G19-G20"
},
"7": {
"value": -19253,
"style": "__builtInStyle7",
"formula": "H19-H20"
},
"8": {
"value": -62953,
"style": "__builtInStyle7",
"formula": "I19-I20"
},
"9": {
"value": 80415,
"style": "__builtInStyle7",
"formula": "J19-J20"
},
"10": {
"value": -451282,
"style": "__builtInStyle8",
"formula": "K19-K20"
}
},
"21": {
"0": {
"value": "Dividends",
"style": "__builtInStyle9"
},
"1": {
"value": 20088,
"style": "__builtInStyle10"
},
"2": {
"value": 25514,
"style": "__builtInStyle10"
},
"3": {
"value": 16403,
"style": "__builtInStyle10"
},
"4": {
"value": 10491,
"style": "__builtInStyle10"
},
"5": {
"value": 72496,
"style": "__builtInStyle11",
"formula": "SUM(B22:E22)"
},
"6": {
"value": 18835,
"style": "__builtInStyle10"
},
"7": {
"value": 29920,
"style": "__builtInStyle10"
},
"8": {
"value": 30576,
"style": "__builtInStyle10"
},
"9": {
"value": 12296,
"style": "__builtInStyle10"
},
"10": {
"value": 280949,
"style": "__builtInStyle11"
}
},
"22": {
"0": {
"value": "RETAINED INCOME",
"style": "__builtInStyle6"
},
"1": {
"value": -75,
"style": "__builtInStyle8",
"formula": "B21-B22"
},
"2": {
"value": -8902,
"style": "__builtInStyle8",
"formula": "C21-C22"
},
"3": {
"value": 40404,
"style": "__builtInStyle8",
"formula": "D21-D22"
},
"4": {
"value": -17893,
"style": "__builtInStyle8",
"formula": "E21-E22"
},
"5": {
"value": 13534,
"style": "__builtInStyle8",
"formula": "F21-F22"
},
"6": {
"value": 18499,
"style": "__builtInStyle8",
"formula": "G21-G22"
},
"7": {
"value": -49173,
"style": "__builtInStyle8",
"formula": "H21-H22"
},
"8": {
"value": -93529,
"style": "__builtInStyle8",
"formula": "I21-I22"
},
"9": {
"value": 68119,
"style": "__builtInStyle8",
"formula": "J21-J22"
},
"10": {
"value": -732231,
"style": "__builtInStyle8",
"formula": "K21-K22"
}
}
},
"defaultDataNode": {
"style": {
"backColor": null,
"foreColor": "Text 1 0",
"vAlign": 2,
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": false,
"diagonalDown": null,
"diagonalUp": null
}
}
},
"rowHeaderData": {
"defaultDataNode": {
"style": {
"themeFont": "Body"
}
}
},
"colHeaderData": {
"defaultDataNode": {
"style": {
"themeFont": "Body"
}
}
},
"rows": [
{
"size": 24
},
{
"size": 19
},
{
"size": 19
},
{
"size": 19
},
{
"size": 19
},
{
"size": 19
},
{
"size": 19
},
{
"size": 19
},
{
"size": 19
},
{
"size": 19
},
{
"size": 19
},
{
"size": 19
},
{
"size": 19
},
{
"size": 19
},
{
"size": 19
},
{
"size": 19
},
{
"size": 19
},
{
"size": 19
},
{
"size": 19
},
{
"size": 19
},
{
"size": 19
},
{
"size": 19
},
{
"size": 19
}
],
"columns": [
{
"size": 250
},
{
"size": 86
},
{
"size": 66
},
{
"size": 79
},
null,
{
"size": 89
},
{
"size": 79
},
{
"size": 79
},
{
"size": 72
},
{
"size": 76
},
{
"size": 82
}
],
"leftCellIndex": 0,
"topCellIndex": 0,
"selections": {
"0": {
"row": 22,
"rowCount": 1,
"col": 2,
"colCount": 1
},
"length": 1
},
"defaults": {
"colHeaderRowHeight": 20,
"colWidth": 64,
"rowHeaderColWidth": 40,
"rowHeight": 19.2,
"_isExcelDefaultColumnWidth": true
},
"autoMergeRangeInfos": [],
"index": 0
}
},
"namedStyles": [
{
"backColor": "Accent 1 80",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "20% - Accent1"
},
{
"backColor": "Accent 2 80",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "20% - Accent2"
},
{
"backColor": "Accent 3 80",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "20% - Accent3"
},
{
"backColor": "Accent 4 80",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "20% - Accent4"
},
{
"backColor": "Accent 5 80",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "20% - Accent5"
},
{
"backColor": "Accent 6 80",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "20% - Accent6"
},
{
"backColor": "Accent 1 60",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "40% - Accent1"
},
{
"backColor": "Accent 2 60",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "40% - Accent2"
},
{
"backColor": "Accent 3 60",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "40% - Accent3"
},
{
"backColor": "Accent 4 60",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "40% - Accent4"
},
{
"backColor": "Accent 5 60",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "40% - Accent5"
},
{
"backColor": "Accent 6 60",
"foreColor": "Text 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "40% - Accent6"
},
{
"backColor": "Accent 1 40",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "60% - Accent1"
},
{
"backColor": "Accent 2 40",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "60% - Accent2"
},
{
"backColor": "Accent 3 40",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "60% - Accent3"
},
{
"backColor": "Accent 4 40",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "60% - Accent4"
},
{
"backColor": "Accent 5 40",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "60% - Accent5"
},
{
"backColor": "Accent 6 40",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "60% - Accent6"
},
{
"backColor": "Accent 1 0",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "Accent1"
},
{
"backColor": "Accent 2 0",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "Accent2"
},
{
"backColor": "Accent 3 0",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "Accent3"
},
{
"backColor": "Accent 4 0",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "Accent4"
},
{
"backColor": "Accent 5 0",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "Accent5"
},
{
"backColor": "Accent 6 0",
"foreColor": "Background 1 0",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "Accent6"
},
{
"backColor": "#ffc7ce",
"foreColor": "#9c0006",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "Bad"
},
{
"backColor": "#f2f2f2",
"foreColor": "#fa7d00",
"font": "normal bold 14.7px Calibri",
"themeFont": "Body",
"borderLeft": {
"color": "#7f7f7f",
"style": 1
},
"borderTop": {
"color": "#7f7f7f",
"style": 1
},
"borderRight": {
"color": "#7f7f7f",
"style": 1
},
"borderBottom": {
"color": "#7f7f7f",
"style": 1
},
"name": "Calculation",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": "#a5a5a5",
"foreColor": "Background 1 0",
"font": "normal bold 14.7px Calibri",
"themeFont": "Body",
"borderLeft": {
"color": "#3f3f3f",
"style": 6
},
"borderTop": {
"color": "#3f3f3f",
"style": 6
},
"borderRight": {
"color": "#3f3f3f",
"style": 6
},
"borderBottom": {
"color": "#3f3f3f",
"style": 6
},
"name": "Check Cell",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": null,
"formatter": "_(* #,##0.00_);_(* (#,##0.00);_(* \"-\"??_);_(@_)",
"name": "Comma"
},
{
"backColor": null,
"formatter": "_(* #,##0_);_(* (#,##0);_(* \"-\"_);_(@_)",
"name": "Comma [0]"
},
{
"backColor": null,
"formatter": "_(\"$\"* #,##0.00_);_(\"$\"* (#,##0.00);_(\"$\"* \"-\"??_);_(@_)",
"name": "Currency"
},
{
"backColor": null,
"formatter": "_(\"$\"* #,##0_);_(\"$\"* (#,##0);_(\"$\"* \"-\"_);_(@_)",
"name": "Currency [0]"
},
{
"backColor": null,
"foreColor": "#7f7f7f",
"font": "italic normal 14.7px Calibri",
"themeFont": "Body",
"name": "Explanatory Text"
},
{
"backColor": "#c6efce",
"foreColor": "#006100",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "Good"
},
{
"backColor": null,
"foreColor": "Text 2 0",
"font": "normal bold 20px Calibri",
"themeFont": "Body",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": {
"color": "Accent 1 0",
"style": 5
},
"name": "Heading 1",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": null,
"foreColor": "Text 2 0",
"font": "normal bold 17.3px Calibri",
"themeFont": "Body",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": {
"color": "Accent 1 50",
"style": 5
},
"name": "Heading 2",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": null,
"foreColor": "Text 2 0",
"font": "normal bold 14.7px Calibri",
"themeFont": "Body",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": {
"color": "Accent 1 40",
"style": 2
},
"name": "Heading 3",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": null,
"foreColor": "Text 2 0",
"font": "normal bold 14.7px Calibri",
"themeFont": "Body",
"name": "Heading 4"
},
{
"backColor": "#ffcc99",
"foreColor": "#3f3f76",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"borderLeft": {
"color": "#7f7f7f",
"style": 1
},
"borderTop": {
"color": "#7f7f7f",
"style": 1
},
"borderRight": {
"color": "#7f7f7f",
"style": 1
},
"borderBottom": {
"color": "#7f7f7f",
"style": 1
},
"name": "Input",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": null,
"foreColor": "#fa7d00",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": {
"color": "#ff8001",
"style": 6
},
"name": "Linked Cell",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": "#ffeb9c",
"foreColor": "#9c6500",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "Neutral"
},
{
"backColor": null,
"foreColor": "Text 1 0",
"hAlign": 3,
"vAlign": 2,
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": false,
"name": "Normal",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": "#ffffcc",
"borderLeft": {
"color": "#b2b2b2",
"style": 1
},
"borderTop": {
"color": "#b2b2b2",
"style": 1
},
"borderRight": {
"color": "#b2b2b2",
"style": 1
},
"borderBottom": {
"color": "#b2b2b2",
"style": 1
},
"name": "Note",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": "#f2f2f2",
"foreColor": "#3f3f3f",
"font": "normal bold 14.7px Calibri",
"themeFont": "Body",
"borderLeft": {
"color": "#3f3f3f",
"style": 1
},
"borderTop": {
"color": "#3f3f3f",
"style": 1
},
"borderRight": {
"color": "#3f3f3f",
"style": 1
},
"borderBottom": {
"color": "#3f3f3f",
"style": 1
},
"name": "Output",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": null,
"formatter": "0%",
"name": "Percent"
},
{
"backColor": null,
"foreColor": "Text 2 0",
"font": "normal bold 24px Calibri Light",
"themeFont": "Headings",
"name": "Title"
},
{
"backColor": null,
"foreColor": "Text 1 0",
"font": "normal bold 14.7px Calibri",
"themeFont": "Body",
"borderLeft": null,
"borderTop": {
"color": "Accent 1 0",
"style": 1
},
"borderRight": null,
"borderBottom": {
"color": "Accent 1 0",
"style": 6
},
"name": "Total",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": null,
"foreColor": "#ff0000",
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"name": "Warning Text"
},
{
"backColor": null,
"foreColor": "Text 1 0",
"hAlign": 3,
"vAlign": 2,
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"formatter": "General",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": false,
"name": "__builtInStyle1",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": null,
"foreColor": "Text 1 0",
"hAlign": 3,
"vAlign": 2,
"font": "italic normal 18.7px Calibri",
"themeFont": "Body",
"formatter": "General",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": false,
"name": "__builtInStyle2",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": "Accent 6 60",
"foreColor": "#000000",
"hAlign": 0,
"vAlign": 2,
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"formatter": "General",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": false,
"name": "__builtInStyle3",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": "Accent 6 60",
"foreColor": "#000000",
"hAlign": 1,
"vAlign": 2,
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"formatter": "mmm\\ yyyy",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": false,
"name": "__builtInStyle4",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": "Accent 6 60",
"foreColor": "#000000",
"hAlign": 1,
"vAlign": 2,
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"formatter": "General",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": false,
"name": "__builtInStyle5",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": "Accent 6 60",
"foreColor": "#000000",
"hAlign": 0,
"vAlign": 2,
"font": "normal bold 14.7px Calibri",
"themeFont": "Body",
"formatter": "\"$\"#,##0;\"(\"\"$\"#,##0\")\"",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": false,
"name": "__builtInStyle6",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": null,
"foreColor": "#000000",
"hAlign": 2,
"vAlign": 2,
"font": "normal bold 14.7px Calibri",
"themeFont": "Body",
"formatter": "\"$\"#,##0;\"(\"\"$\"#,##0\")\"",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": false,
"name": "__builtInStyle7",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": "Accent 6 80",
"foreColor": "#000000",
"hAlign": 2,
"vAlign": 2,
"font": "normal bold 14.7px Calibri",
"themeFont": "Body",
"formatter": "\"$\"#,##0;\"(\"\"$\"#,##0\")\"",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": false,
"name": "__builtInStyle8",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": "Accent 6 60",
"foreColor": "#000000",
"hAlign": 0,
"vAlign": 2,
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"formatter": "\"$\"#,##0;\"(\"\"$\"#,##0\")\"",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": false,
"name": "__builtInStyle9",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": null,
"foreColor": "#000000",
"hAlign": 2,
"vAlign": 2,
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"formatter": "\"$\"#,##0;\"(\"\"$\"#,##0\")\"",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": false,
"name": "__builtInStyle10",
"diagonalDown": null,
"diagonalUp": null
},
{
"backColor": "Accent 6 80",
"foreColor": "#000000",
"hAlign": 2,
"vAlign": 2,
"font": "normal normal 14.7px Calibri",
"themeFont": "Body",
"formatter": "\"$\"#,##0;\"(\"\"$\"#,##0\")\"",
"borderLeft": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"locked": true,
"textIndent": 0,
"wordWrap": false,
"name": "__builtInStyle11",
"diagonalDown": null,
"diagonalUp": null
}
]
}];
label {
display:inline-block;
width: 210px;
}
input[type="button"] {
padding: 4px 6px;
width: 100%;
margin-bottom: 10px;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding: 5px;
/*margin-top: 10px;*/
}
.desc {
padding: 2px 10px;
background-color: #F4F8EB;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
