Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(2359)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: src/site/codelabs/web-ui-writer/index.html

Issue 35913002: Try Dart 1 hour experience first draft (Closed) Base URL: https://github.com/dart-lang/dartlang.org.git@master
Patch Set: updated image of dart editor with new directory name Created 7 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « src/site/codelabs/web-ui-writer/images/image41.png ('k') | no next file » | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: src/site/codelabs/web-ui-writer/index.html
diff --git a/src/site/codelabs/web-ui-writer/index.html b/src/site/codelabs/web-ui-writer/index.html
deleted file mode 100755
index 2eb9bedc6d504ce8ab01dda07c01941d63c19388..0000000000000000000000000000000000000000
--- a/src/site/codelabs/web-ui-writer/index.html
+++ /dev/null
@@ -1 +0,0 @@
-<html><head><title>IO 2013 Dart Codelab</title><meta content="text/html; charset=UTF-8" http-equiv="content-type"><style type="text/css">@import url('https://themes.googleusercontent.com/fonts/css?kit=chteh0fSOiSrmusp8u43YAdDjahd2IAEL5IFmyNQJ7o');.lst-kix_qeukrmzdd856-8>li{counter-increment:lst-ctn-kix_qeukrmzdd856-8}ol.lst-kix_qeukrmzdd856-7.start{counter-reset:lst-ctn-kix_qeukrmzdd856-7 0}.lst-kix_jpf3cr7xe1pc-0>li{counter-increment:lst-ctn-kix_jpf3cr7xe1pc-0}.lst-kix_dblgil8t24zy-3>li:before{content:"" counter(lst-ctn-kix_dblgil8t24zy-3,decimal) ". "}.lst-kix_jpf3cr7xe1pc-4>li{counter-increment:lst-ctn-kix_jpf3cr7xe1pc-4}.lst-kix_1c0w7icorqz1-8>li:before{content:"" counter(lst-ctn-kix_1c0w7icorqz1-8,lower-roman) ". "}ol.lst-kix_qz5wp1hdd24k-6.start{counter-reset:lst-ctn-kix_qz5wp1hdd24k-6 0}ol.lst-kix_nho7sy6cpfv0-0.start{counter-reset:lst-ctn-kix_nho7sy6cpfv0-0 0}ol.lst-kix_hvjet9voiiio-4{list-style-type:none}ol.lst-kix_5f9palqqt4mm-1.start{counter-reset:lst-ctn-kix_5f9palqqt4mm-1 0}ol.lst-kix_hvjet9voiiio-5{list-style-type:none}.lst-kix_nhaic9xr6pf-6>li{counter-increment:lst-ctn-kix_nhaic9xr6pf-6}ol.lst-kix_hvjet9voiiio-2{list-style-type:none}ol.lst-kix_hvjet9voiiio-3{list-style-type:none}.lst-kix_1c0w7icorqz1-3>li{counter-increment:lst-ctn-kix_1c0w7icorqz1-3}ol.lst-kix_hvjet9voiiio-8{list-style-type:none}ol.lst-kix_32zxnvl59py3-8.start{counter-reset:lst-ctn-kix_32zxnvl59py3-8 0}ol.lst-kix_hvjet9voiiio-6{list-style-type:none}ol.lst-kix_hvjet9voiiio-7{list-style-type:none}.lst-kix_jpf3cr7xe1pc-5>li{counter-increment:lst-ctn-kix_jpf3cr7xe1pc-5}ol.lst-kix_nhaic9xr6pf-6.start{counter-reset:lst-ctn-kix_nhaic9xr6pf-6 0}.lst-kix_2uog6ch44jpu-0>li{counter-increment:lst-ctn-kix_2uog6ch44jpu-0}ol.lst-kix_hvjet9voiiio-0{list-style-type:none}ol.lst-kix_hvjet9voiiio-1{list-style-type:none}.lst-kix_qz5wp1hdd24k-5>li:before{content:"" counter(lst-ctn-kix_qz5wp1hdd24k-5,lower-roman) ". "}.lst-kix_j51xhhtple7c-8>li{counter-increment:lst-ctn-kix_j51xhhtple7c-8}.lst-kix_1gqf2s78t7o1-8>li:before{content:"" counter(lst-ctn-kix_1gqf2s78t7o1-8,lower-roman) ". "}.lst-kix_nhaic9xr6pf-1>li:before{content:"" counter(lst-ctn-kix_nhaic9xr6pf-1,lower-latin) ". "}.lst-kix_32zxnvl59py3-3>li{counter-increment:lst-ctn-kix_32zxnvl59py3-3}.lst-kix_5f9palqqt4mm-6>li:before{content:"" counter(lst-ctn-kix_5f9palqqt4mm-6,decimal) ". "}.lst-kix_nhaic9xr6pf-7>li:before{content:"" counter(lst-ctn-kix_nhaic9xr6pf-7,lower-latin) ". "}ol.lst-kix_sgsi64vug03j-2.start{counter-reset:lst-ctn-kix_sgsi64vug03j-2 0}ol.lst-kix_pza3ybm1wtg3-5.start{counter-reset:lst-ctn-kix_pza3ybm1wtg3-5 0}ol.lst-kix_60g29afx0lof-4.start{counter-reset:lst-ctn-kix_60g29afx0lof-4 0}.lst-kix_jpf3cr7xe1pc-7>li{counter-increment:lst-ctn-kix_jpf3cr7xe1pc-7}ol.lst-kix_vnvg10gwrc8t-7.start{counter-reset:lst-ctn-kix_vnvg10gwrc8t-7 0}.lst-kix_i2v077rod1nx-5>li:before{content:"\0025a0 "}ol.lst-kix_z7in7d1ar2zt-3.start{counter-reset:lst-ctn-kix_z7in7d1ar2zt-3 0}ol.lst-kix_9tkaqbe3bnu3-6.start{counter-reset:lst-ctn-kix_9tkaqbe3bnu3-6 0}ol.lst-kix_p8a3u4ougab9-4.start{counter-reset:lst-ctn-kix_p8a3u4ougab9-4 0}.lst-kix_t7any4lo9hoq-3>li:before{content:"\0025cf "}ol.lst-kix_lixznqbqiris-1.start{counter-reset:lst-ctn-kix_lixznqbqiris-1 0}.lst-kix_1g0xzctl1vi-6>li{counter-increment:lst-ctn-kix_1g0xzctl1vi-6}.lst-kix_a4uqy1hx9g3-2>li:before{content:"\0025a0 "}ol.lst-kix_5f9palqqt4mm-7.start{counter-reset:lst-ctn-kix_5f9palqqt4mm-7 0}.lst-kix_32zxnvl59py3-8>li:before{content:"" counter(lst-ctn-kix_32zxnvl59py3-8,lower-roman) ". "}.lst-kix_9tkaqbe3bnu3-6>li{counter-increment:lst-ctn-kix_9tkaqbe3bnu3-6}ol.lst-kix_j51xhhtple7c-1.start{counter-reset:lst-ctn-kix_j51xhhtple7c-1 0}.lst-kix_wzk0mdv2qg9u-1>li{counter-increment:lst-ctn-kix_wzk0mdv2qg9u-1}.lst-kix_j51xhhtple7c-3>li{counter-increment:lst-ctn-kix_j51xhhtple7c-3}.lst-kix_juntnht2kzza-4>li{counter-increment:lst-ctn-kix_juntnht2kzza-4}.lst-kix_i2v077rod1nx-4>li:before{content:"\0025cb "}.lst-kix_7kmxmbi2lsws-6>li{counter-increment:lst-ctn-kix_7kmxmbi2lsws-6}ol.lst-kix_1gqf2s78t7o1-4.start{counter-reset:lst-ctn-kix_1gqf2s78t7o1-4 0}ol.lst-kix_qeukrmzdd856-0{list-style-type:none}ol.lst-kix_qeukrmzdd856-1{list-style-type:none}ol.lst-kix_qeukrmzdd856-2{list-style-type:none}.lst-kix_p8a3u4ougab9-6>li{counter-increment:lst-ctn-kix_p8a3u4ougab9-6}.lst-kix_8uscekru9dbw-5>li:before{content:"" counter(lst-ctn-kix_8uscekru9dbw-5,lower-roman) ". "}.lst-kix_nho7sy6cpfv0-5>li{counter-increment:lst-ctn-kix_nho7sy6cpfv0-5}.lst-kix_kf08e4mo0q15-3>li:before{content:"" counter(lst-ctn-kix_kf08e4mo0q15-3,decimal) ". "}.lst-kix_pza3ybm1wtg3-5>li:before{content:"" counter(lst-ctn-kix_pza3ybm1wtg3-5,lower-roman) ". "}ol.lst-kix_8uscekru9dbw-1.start{counter-reset:lst-ctn-kix_8uscekru9dbw-1 0}ol.lst-kix_dblgil8t24zy-5.start{counter-reset:lst-ctn-kix_dblgil8t24zy-5 0}.lst-kix_60g29afx0lof-3>li:before{content:"" counter(lst-ctn-kix_60g29afx0lof-3,decimal) ". "}ol.lst-kix_5f9palqqt4mm-4.start{counter-reset:lst-ctn-kix_5f9palqqt4mm-4 0}.lst-kix_juntnht2kzza-6>li:before{content:"" counter(lst-ctn-kix_juntnht2kzza-6,decimal) ". "}ol.lst-kix_32zxnvl59py3-7.start{counter-reset:lst-ctn-kix_32zxnvl59py3-7 0}.lst-kix_dblgil8t24zy-4>li{counter-increment:lst-ctn-kix_dblgil8t24zy-4}ol.lst-kix_qeukrmzdd856-8{list-style-type:none}ol.lst-kix_qeukrmzdd856-7{list-style-type:none}ol.lst-kix_qeukrmzdd856-6{list-style-type:none}ol.lst-kix_qeukrmzdd856-5{list-style-type:none}ol.lst-kix_qeukrmzdd856-4{list-style-type:none}.lst-kix_2uog6ch44jpu-3>li:before{content:"" counter(lst-ctn-kix_2uog6ch44jpu-3,decimal) ". "}.lst-kix_ffvvlgzbuz30-3>li:before{content:"\0025cf "}ol.lst-kix_qeukrmzdd856-3{list-style-type:none}ol.lst-kix_1c0w7icorqz1-8.start{counter-reset:lst-ctn-kix_1c0w7icorqz1-8 0}ol.lst-kix_m8zky1oy6k60-7.start{counter-reset:lst-ctn-kix_m8zky1oy6k60-7 0}.lst-kix_uq748w6pjv3r-7>li{counter-increment:lst-ctn-kix_uq748w6pjv3r-7}.lst-kix_ggm78fckav5h-5>li{counter-increment:lst-ctn-kix_ggm78fckav5h-5}.lst-kix_pza3ybm1wtg3-8>li:before{content:"" counter(lst-ctn-kix_pza3ybm1wtg3-8,lower-roman) ". "}ol.lst-kix_ggm78fckav5h-5.start{counter-reset:lst-ctn-kix_ggm78fckav5h-5 0}ol.lst-kix_1gqf2s78t7o1-2.start{counter-reset:lst-ctn-kix_1gqf2s78t7o1-2 0}.lst-kix_z7in7d1ar2zt-0>li{counter-increment:lst-ctn-kix_z7in7d1ar2zt-0}ol.lst-kix_pa6lflf2amnu-4.start{counter-reset:lst-ctn-kix_pa6lflf2amnu-4 0}.lst-kix_z7in7d1ar2zt-5>li{counter-increment:lst-ctn-kix_z7in7d1ar2zt-5}ol.lst-kix_m8zky1oy6k60-5.start{counter-reset:lst-ctn-kix_m8zky1oy6k60-5 0}.lst-kix_57tjkabqizo2-5>li:before{content:"" counter(lst-ctn-kix_57tjkabqizo2-5,lower-roman) ". "}.lst-kix_opzlp0rjj486-6>li{counter-increment:lst-ctn-kix_opzlp0rjj486-6}.lst-kix_2uog6ch44jpu-7>li{counter-increment:lst-ctn-kix_2uog6ch44jpu-7}.lst-kix_sgsi64vug03j-8>li{counter-increment:lst-ctn-kix_sgsi64vug03j-8}.lst-kix_hm47sef7muk-3>li:before{content:"" counter(lst-ctn-kix_hm47sef7muk-3,decimal) ". "}.lst-kix_dblgil8t24zy-7>li{counter-increment:lst-ctn-kix_dblgil8t24zy-7}.lst-kix_jxeur1wnlj7y-1>li:before{content:"" counter(lst-ctn-kix_jxeur1wnlj7y-1,lower-latin) ". "}.lst-kix_1gqf2s78t7o1-6>li:before{content:"" counter(lst-ctn-kix_1gqf2s78t7o1-6,decimal) ". "}ol.lst-kix_kf08e4mo0q15-1.start{counter-reset:lst-ctn-kix_kf08e4mo0q15-1 0}ol.lst-kix_wzk0mdv2qg9u-5.start{counter-reset:lst-ctn-kix_wzk0mdv2qg9u-5 0}.lst-kix_p8a3u4ougab9-2>li{counter-increment:lst-ctn-kix_p8a3u4ougab9-2}.lst-kix_fr6w5z45nvx0-2>li{counter-increment:lst-ctn-kix_fr6w5z45nvx0-2}ol.lst-kix_1g0xzctl1vi-1.start{counter-reset:lst-ctn-kix_1g0xzctl1vi-1 0}.lst-kix_1g0xzctl1vi-4>li:before{content:"" counter(lst-ctn-kix_1g0xzctl1vi-4,lower-latin) ". "}.lst-kix_8dg0b92yw51r-8>li{counter-increment:lst-ctn-kix_8dg0b92yw51r-8}.lst-kix_jxeur1wnlj7y-6>li:before{content:"" counter(lst-ctn-kix_jxeur1wnlj7y-6,decimal) ". "}.lst-kix_7kmxmbi2lsws-8>li{counter-increment:lst-ctn-kix_7kmxmbi2lsws-8}.lst-kix_t9jkz28ln50j-6>li:before{content:"" counter(lst-ctn-kix_t9jkz28ln50j-6,decimal) ". "}ol.lst-kix_jpf3cr7xe1pc-8{list-style-type:none}ol.lst-kix_jpf3cr7xe1pc-7{list-style-type:none}ol.lst-kix_jpf3cr7xe1pc-6{list-style-type:none}ol.lst-kix_jpf3cr7xe1pc-5{list-style-type:none}ol.lst-kix_4s9m9sikrtm7-0.start{counter-reset:lst-ctn-kix_4s9m9sikrtm7-0 0}.lst-kix_opzlp0rjj486-6>li:before{content:"" counter(lst-ctn-kix_opzlp0rjj486-6,decimal) ". "}.lst-kix_oqqzpe3b3nud-0>li:before{content:"" counter(lst-ctn-kix_oqqzpe3b3nud-0,decimal) ". "}ol.lst-kix_opzlp0rjj486-1.start{counter-reset:lst-ctn-kix_opzlp0rjj486-1 0}ol.lst-kix_ggm78fckav5h-7.start{counter-reset:lst-ctn-kix_ggm78fckav5h-7 0}.lst-kix_dblgil8t24zy-0>li{counter-increment:lst-ctn-kix_dblgil8t24zy-0}.lst-kix_32zxnvl59py3-0>li{counter-increment:lst-ctn-kix_32zxnvl59py3-0}.lst-kix_qz5wp1hdd24k-3>li{counter-increment:lst-ctn-kix_qz5wp1hdd24k-3}ol.lst-kix_8uscekru9dbw-3.start{counter-reset:lst-ctn-kix_8uscekru9dbw-3 0}.lst-kix_9tkaqbe3bnu3-2>li:before{content:"" counter(lst-ctn-kix_9tkaqbe3bnu3-2,lower-roman) ". "}ol.lst-kix_1g0xzctl1vi-4.start{counter-reset:lst-ctn-kix_1g0xzctl1vi-4 0}ol.lst-kix_hvjet9voiiio-0.start{counter-reset:lst-ctn-kix_hvjet9voiiio-0 0}ol.lst-kix_juntnht2kzza-1.start{counter-reset:lst-ctn-kix_juntnht2kzza-1 0}.lst-kix_wzk0mdv2qg9u-6>li{counter-increment:lst-ctn-kix_wzk0mdv2qg9u-6}.lst-kix_1g0xzctl1vi-5>li:before{content:"" counter(lst-ctn-kix_1g0xzctl1vi-5,lower-roman) ". "}.lst-kix_kvgsl0s9rzo4-8>li:before{content:"" counter(lst-ctn-kix_kvgsl0s9rzo4-8,lower-roman) ". "}ol.lst-kix_dblgil8t24zy-7.start{counter-reset:lst-ctn-kix_dblgil8t24zy-7 0}.lst-kix_hvjet9voiiio-1>li:before{content:"" counter(lst-ctn-kix_hvjet9voiiio-1,lower-latin) ". "}.lst-kix_32zxnvl59py3-8>li{counter-increment:lst-ctn-kix_32zxnvl59py3-8}ol.lst-kix_jpf3cr7xe1pc-0{list-style-type:none}ol.lst-kix_jpf3cr7xe1pc-1{list-style-type:none}ol.lst-kix_jpf3cr7xe1pc-2{list-style-type:none}.lst-kix_8uscekru9dbw-3>li{counter-increment:lst-ctn-kix_8uscekru9dbw-3}.lst-kix_v454r7upbzuz-2>li:before{content:"" counter(lst-ctn-kix_v454r7upbzuz-2,lower-roman) ". "}ol.lst-kix_jpf3cr7xe1pc-3{list-style-type:none}ol.lst-kix_5f9palqqt4mm-6.start{counter-reset:lst-ctn-kix_5f9palqqt4mm-6 0}ol.lst-kix_jpf3cr7xe1pc-4{list-style-type:none}ol.lst-kix_jpf3cr7xe1pc-3.start{counter-reset:lst-ctn-kix_jpf3cr7xe1pc-3 0}.lst-kix_pyiocxf7nngd-0>li:before{content:"" counter(lst-ctn-kix_pyiocxf7nngd-0,decimal) ". "}.lst-kix_m1x0qzeeadaz-4>li{counter-increment:lst-ctn-kix_m1x0qzeeadaz-4}ol.lst-kix_m1x0qzeeadaz-8.start{counter-reset:lst-ctn-kix_m1x0qzeeadaz-8 0}.lst-kix_kf08e4mo0q15-0>li:before{content:"" counter(lst-ctn-kix_kf08e4mo0q15-0,decimal) ". "}.lst-kix_9tkaqbe3bnu3-4>li:before{content:"" counter(lst-ctn-kix_9tkaqbe3bnu3-4,lower-latin) ". "}ol.lst-kix_v454r7upbzuz-0.start{counter-reset:lst-ctn-kix_v454r7upbzuz-0 0}.lst-kix_4s9m9sikrtm7-6>li{counter-increment:lst-ctn-kix_4s9m9sikrtm7-6}.lst-kix_nhaic9xr6pf-3>li:before{content:"" counter(lst-ctn-kix_nhaic9xr6pf-3,decimal) ". "}.lst-kix_z7in7d1ar2zt-1>li{counter-increment:lst-ctn-kix_z7in7d1ar2zt-1}.lst-kix_qz5wp1hdd24k-4>li:before{content:"" counter(lst-ctn-kix_qz5wp1hdd24k-4,lower-latin) ". "}.lst-kix_jzpgxqq6fzzf-8>li{counter-increment:lst-ctn-kix_jzpgxqq6fzzf-8}.lst-kix_nhaic9xr6pf-7>li{counter-increment:lst-ctn-kix_nhaic9xr6pf-7}.lst-kix_oqqzpe3b3nud-8>li{counter-increment:lst-ctn-kix_oqqzpe3b3nud-8}.lst-kix_dblgil8t24zy-4>li:before{content:"" counter(lst-ctn-kix_dblgil8t24zy-4,lower-latin) ". "}.lst-kix_lixznqbqiris-7>li:before{content:"" counter(lst-ctn-kix_lixznqbqiris-7,lower-latin) ". "}ol.lst-kix_uq748w6pjv3r-5.start{counter-reset:lst-ctn-kix_uq748w6pjv3r-5 0}.lst-kix_oqqzpe3b3nud-3>li{counter-increment:lst-ctn-kix_oqqzpe3b3nud-3}.lst-kix_t7any4lo9hoq-1>li:before{content:"\0025cb "}.lst-kix_lixznqbqiris-5>li{counter-increment:lst-ctn-kix_lixznqbqiris-5}ol.lst-kix_pza3ybm1wtg3-2{list-style-type:none}ol.lst-kix_pza3ybm1wtg3-1{list-style-type:none}ol.lst-kix_oqqzpe3b3nud-2.start{counter-reset:lst-ctn-kix_oqqzpe3b3nud-2 0}ol.lst-kix_pza3ybm1wtg3-4{list-style-type:none}ol.lst-kix_pza3ybm1wtg3-3{list-style-type:none}.lst-kix_hm47sef7muk-6>li:before{content:"" counter(lst-ctn-kix_hm47sef7muk-6,decimal) ". "}ol.lst-kix_pza3ybm1wtg3-0{list-style-type:none}.lst-kix_5f9palqqt4mm-2>li{counter-increment:lst-ctn-kix_5f9palqqt4mm-2}.lst-kix_8dg0b92yw51r-3>li:before{content:"" counter(lst-ctn-kix_8dg0b92yw51r-3,decimal) ". "}.lst-kix_2uog6ch44jpu-6>li:before{content:"" counter(lst-ctn-kix_2uog6ch44jpu-6,decimal) ". "}.lst-kix_lgtbofvz5zxd-6>li:before{content:"" counter(lst-ctn-kix_lgtbofvz5zxd-6,decimal) ". "}ol.lst-kix_4s9m9sikrtm7-6.start{counter-reset:lst-ctn-kix_4s9m9sikrtm7-6 0}.lst-kix_wzk0mdv2qg9u-2>li:before{content:"" counter(lst-ctn-kix_wzk0mdv2qg9u-2,lower-roman) ". "}ol.lst-kix_jxeur1wnlj7y-4.start{counter-reset:lst-ctn-kix_jxeur1wnlj7y-4 0}.lst-kix_lgtbofvz5zxd-5>li{counter-increment:lst-ctn-kix_lgtbofvz5zxd-5}.lst-kix_4s9m9sikrtm7-5>li{counter-increment:lst-ctn-kix_4s9m9sikrtm7-5}ol.lst-kix_pza3ybm1wtg3-5{list-style-type:none}ol.lst-kix_pza3ybm1wtg3-6{list-style-type:none}ol.lst-kix_pza3ybm1wtg3-7{list-style-type:none}ol.lst-kix_pza3ybm1wtg3-8{list-style-type:none}ol.lst-kix_j51xhhtple7c-0.start{counter-reset:lst-ctn-kix_j51xhhtple7c-0 0}.lst-kix_5f9palqqt4mm-8>li{counter-increment:lst-ctn-kix_5f9palqqt4mm-8}.lst-kix_hvjet9voiiio-5>li:before{content:"" counter(lst-ctn-kix_hvjet9voiiio-5,lower-roman) ". "}ol.lst-kix_2uog6ch44jpu-1.start{counter-reset:lst-ctn-kix_2uog6ch44jpu-1 0}ol.lst-kix_juntnht2kzza-8.start{counter-reset:lst-ctn-kix_juntnht2kzza-8 0}.lst-kix_60g29afx0lof-4>li{counter-increment:lst-ctn-kix_60g29afx0lof-4}ol.lst-kix_8uscekru9dbw-8.start{counter-reset:lst-ctn-kix_8uscekru9dbw-8 0}.lst-kix_nho7sy6cpfv0-6>li{counter-increment:lst-ctn-kix_nho7sy6cpfv0-6}.lst-kix_pa6lflf2amnu-7>li:before{content:"" counter(lst-ctn-kix_pa6lflf2amnu-7,lower-latin) ". "}ol.lst-kix_p8a3u4ougab9-1.start{counter-reset:lst-ctn-kix_p8a3u4ougab9-1 0}ol.lst-kix_nho7sy6cpfv0-3.start{counter-reset:lst-ctn-kix_nho7sy6cpfv0-3 0}.lst-kix_iqyc5gy523tq-5>li:before{content:"\0025a0 "}.lst-kix_jxeur1wnlj7y-0>li{counter-increment:lst-ctn-kix_jxeur1wnlj7y-0}ol.lst-kix_hm47sef7muk-4.start{counter-reset:lst-ctn-kix_hm47sef7muk-4 0}ol.lst-kix_pza3ybm1wtg3-7.start{counter-reset:lst-ctn-kix_pza3ybm1wtg3-7 0}.lst-kix_dblgil8t24zy-5>li:before{content:"" counter(lst-ctn-kix_dblgil8t24zy-5,lower-roman) ". "}ol.lst-kix_pyiocxf7nngd-5.start{counter-reset:lst-ctn-kix_pyiocxf7nngd-5 0}ol.lst-kix_pa6lflf2amnu-1{list-style-type:none}ol.lst-kix_pa6lflf2amnu-2{list-style-type:none}ol.lst-kix_pa6lflf2amnu-0{list-style-type:none}.lst-kix_lixznqbqiris-0>li{counter-increment:lst-ctn-kix_lixznqbqiris-0}.lst-kix_iqyc5gy523tq-3>li:before{content:"\0025cf "}ol.lst-kix_pa6lflf2amnu-5{list-style-type:none}.lst-kix_nho7sy6cpfv0-4>li:before{content:"" counter(lst-ctn-kix_nho7sy6cpfv0-4,lower-latin) ". "}ol.lst-kix_pa6lflf2amnu-6{list-style-type:none}ol.lst-kix_pa6lflf2amnu-3{list-style-type:none}.lst-kix_57tjkabqizo2-3>li:before{content:"" counter(lst-ctn-kix_57tjkabqizo2-3,decimal) ". "}ol.lst-kix_pa6lflf2amnu-4{list-style-type:none}ol.lst-kix_1gqf2s78t7o1-5.start{counter-reset:lst-ctn-kix_1gqf2s78t7o1-5 0}ol.lst-kix_pa6lflf2amnu-7{list-style-type:none}ol.lst-kix_pa6lflf2amnu-8{list-style-type:none}.lst-kix_nho7sy6cpfv0-0>li{counter-increment:lst-ctn-kix_nho7sy6cpfv0-0}.lst-kix_kc6aimw8pnra-1>li:before{content:"\0025cb "}.lst-kix_fr6w5z45nvx0-6>li:before{content:"" counter(lst-ctn-kix_fr6w5z45nvx0-6,decimal) ". "}.lst-kix_pyiocxf7nngd-6>li{counter-increment:lst-ctn-kix_pyiocxf7nngd-6}.lst-kix_kf08e4mo0q15-7>li{counter-increment:lst-ctn-kix_kf08e4mo0q15-7}.lst-kix_jxeur1wnlj7y-5>li:before{content:"" counter(lst-ctn-kix_jxeur1wnlj7y-5,lower-roman) ". "}ol.lst-kix_j51xhhtple7c-7.start{counter-reset:lst-ctn-kix_j51xhhtple7c-7 0}ol.lst-kix_m8zky1oy6k60-8.start{counter-reset:lst-ctn-kix_m8zky1oy6k60-8 0}ol.lst-kix_juntnht2kzza-3.start{counter-reset:lst-ctn-kix_juntnht2kzza-3 0}.lst-kix_iqyc5gy523tq-1>li:before{content:"\0025cb "}.lst-kix_4s9m9sikrtm7-4>li{counter-increment:lst-ctn-kix_4s9m9sikrtm7-4}ol.lst-kix_uq748w6pjv3r-3.start{counter-reset:lst-ctn-kix_uq748w6pjv3r-3 0}.lst-kix_m1x0qzeeadaz-6>li:before{content:"" counter(lst-ctn-kix_m1x0qzeeadaz-6,decimal) ". "}ol.lst-kix_kf08e4mo0q15-4.start{counter-reset:lst-ctn-kix_kf08e4mo0q15-4 0}.lst-kix_m1x0qzeeadaz-3>li:before{content:"" counter(lst-ctn-kix_m1x0qzeeadaz-3,decimal) ". "}.lst-kix_fpxsljpyl73u-6>li:before{content:"\0025cf "}.lst-kix_1gqf2s78t7o1-5>li:before{content:"" counter(lst-ctn-kix_1gqf2s78t7o1-5,lower-roman) ". "}.lst-kix_32zxnvl59py3-4>li:before{content:"" counter(lst-ctn-kix_32zxnvl59py3-4,lower-latin) ". "}ol.lst-kix_32zxnvl59py3-7{list-style-type:none}ol.lst-kix_sgsi64vug03j-1.start{counter-reset:lst-ctn-kix_sgsi64vug03j-1 0}ol.lst-kix_32zxnvl59py3-6{list-style-type:none}ol.lst-kix_32zxnvl59py3-5{list-style-type:none}ol.lst-kix_32zxnvl59py3-4{list-style-type:none}.lst-kix_8dg0b92yw51r-6>li:before{content:"" counter(lst-ctn-kix_8dg0b92yw51r-6,decimal) ". "}ol.lst-kix_32zxnvl59py3-3{list-style-type:none}.lst-kix_hvjet9voiiio-8>li:before{content:"" counter(lst-ctn-kix_hvjet9voiiio-8,lower-roman) ". "}ol.lst-kix_32zxnvl59py3-2{list-style-type:none}ol.lst-kix_32zxnvl59py3-1{list-style-type:none}.lst-kix_pyiocxf7nngd-4>li{counter-increment:lst-ctn-kix_pyiocxf7nngd-4}ol.lst-kix_32zxnvl59py3-0{list-style-type:none}ol.lst-kix_lgtbofvz5zxd-3.start{counter-reset:lst-ctn-kix_lgtbofvz5zxd-3 0}.lst-kix_j51xhhtple7c-0>li:before{content:"" counter(lst-ctn-kix_j51xhhtple7c-0,decimal) ". "}.lst-kix_m8zky1oy6k60-5>li:before{content:"" counter(lst-ctn-kix_m8zky1oy6k60-5,lower-roman) ". "}.lst-kix_lgtbofvz5zxd-0>li{counter-increment:lst-ctn-kix_lgtbofvz5zxd-0}.lst-kix_j51xhhtple7c-2>li:before{content:"" counter(lst-ctn-kix_j51xhhtple7c-2,lower-roman) ". "}.lst-kix_pa6lflf2amnu-7>li{counter-increment:lst-ctn-kix_pa6lflf2amnu-7}.lst-kix_8dg0b92yw51r-4>li:before{content:"" counter(lst-ctn-kix_8dg0b92yw51r-4,lower-latin) ". "}.lst-kix_jzpgxqq6fzzf-7>li:before{content:"" counter(lst-ctn-kix_jzpgxqq6fzzf-7,lower-latin) ". "}.lst-kix_hm47sef7muk-5>li{counter-increment:lst-ctn-kix_hm47sef7muk-5}ol.lst-kix_t9jkz28ln50j-7.start{counter-reset:lst-ctn-kix_t9jkz28ln50j-7 0}.lst-kix_1gqf2s78t7o1-2>li:before{content:"" counter(lst-ctn-kix_1gqf2s78t7o1-2,lower-roman) ". "}ol.lst-kix_j51xhhtple7c-3.start{counter-reset:lst-ctn-kix_j51xhhtple7c-3 0}.lst-kix_z7in7d1ar2zt-5>li:before{content:"" counter(lst-ctn-kix_z7in7d1ar2zt-5,lower-roman) ". "}ol.lst-kix_nhaic9xr6pf-7.start{counter-reset:lst-ctn-kix_nhaic9xr6pf-7 0}.lst-kix_jpf3cr7xe1pc-4>li:before{content:"" counter(lst-ctn-kix_jpf3cr7xe1pc-4,lower-latin) ". "}.lst-kix_hm47sef7muk-4>li{counter-increment:lst-ctn-kix_hm47sef7muk-4}ol.lst-kix_8dg0b92yw51r-7.start{counter-reset:lst-ctn-kix_8dg0b92yw51r-7 0}.lst-kix_60g29afx0lof-1>li:before{content:"" counter(lst-ctn-kix_60g29afx0lof-1,lower-latin) ". "}.lst-kix_lixznqbqiris-5>li:before{content:"" counter(lst-ctn-kix_lixznqbqiris-5,lower-roman) ". "}.lst-kix_oqqzpe3b3nud-0>li{counter-increment:lst-ctn-kix_oqqzpe3b3nud-0}ol.lst-kix_t9jkz28ln50j-3.start{counter-reset:lst-ctn-kix_t9jkz28ln50j-3 0}ol.lst-kix_p8a3u4ougab9-7.start{counter-reset:lst-ctn-kix_p8a3u4ougab9-7 0}ol.lst-kix_lgtbofvz5zxd-7.start{counter-reset:lst-ctn-kix_lgtbofvz5zxd-7 0}.lst-kix_opzlp0rjj486-7>li:before{content:"" counter(lst-ctn-kix_opzlp0rjj486-7,lower-latin) ". "}.lst-kix_m8zky1oy6k60-4>li{counter-increment:lst-ctn-kix_m8zky1oy6k60-4}.lst-kix_57tjkabqizo2-2>li{counter-increment:lst-ctn-kix_57tjkabqizo2-2}.lst-kix_m1x0qzeeadaz-5>li{counter-increment:lst-ctn-kix_m1x0qzeeadaz-5}.lst-kix_hm47sef7muk-0>li:before{content:"" counter(lst-ctn-kix_hm47sef7muk-0,decimal) ". "}.lst-kix_hm47sef7muk-6>li{counter-increment:lst-ctn-kix_hm47sef7muk-6}ol.lst-kix_oqqzpe3b3nud-5.start{counter-reset:lst-ctn-kix_oqqzpe3b3nud-5 0}ol.lst-kix_32zxnvl59py3-1.start{counter-reset:lst-ctn-kix_32zxnvl59py3-1 0}ol.lst-kix_nho7sy6cpfv0-1{list-style-type:none}ol.lst-kix_nho7sy6cpfv0-0{list-style-type:none}ol.lst-kix_kvgsl0s9rzo4-7.start{counter-reset:lst-ctn-kix_kvgsl0s9rzo4-7 0}.lst-kix_57tjkabqizo2-8>li:before{content:"" counter(lst-ctn-kix_57tjkabqizo2-8,lower-roman) ". "}.lst-kix_juntnht2kzza-2>li:before{content:"" counter(lst-ctn-kix_juntnht2kzza-2,lower-roman) ". "}.lst-kix_pza3ybm1wtg3-7>li{counter-increment:lst-ctn-kix_pza3ybm1wtg3-7}.lst-kix_z7in7d1ar2zt-7>li{counter-increment:lst-ctn-kix_z7in7d1ar2zt-7}ol.lst-kix_5f9palqqt4mm-8{list-style-type:none}.lst-kix_wzk0mdv2qg9u-7>li:before{content:"" counter(lst-ctn-kix_wzk0mdv2qg9u-7,lower-latin) ". "}ol.lst-kix_t9jkz28ln50j-6.start{counter-reset:lst-ctn-kix_t9jkz28ln50j-6 0}ol.lst-kix_jxeur1wnlj7y-0.start{counter-reset:lst-ctn-kix_jxeur1wnlj7y-0 0}.lst-kix_4s9m9sikrtm7-4>li:before{content:"" counter(lst-ctn-kix_4s9m9sikrtm7-4,lower-latin) ". "}.lst-kix_ggm78fckav5h-3>li:before{content:"" counter(lst-ctn-kix_ggm78fckav5h-3,decimal) ". "}ol.lst-kix_5f9palqqt4mm-5{list-style-type:none}ol.lst-kix_5f9palqqt4mm-4{list-style-type:none}ol.lst-kix_5f9palqqt4mm-7{list-style-type:none}ol.lst-kix_5f9palqqt4mm-6{list-style-type:none}.lst-kix_57tjkabqizo2-2>li:before{content:"" counter(lst-ctn-kix_57tjkabqizo2-2,lower-roman) ". "}.lst-kix_pza3ybm1wtg3-1>li:before{content:"" counter(lst-ctn-kix_pza3ybm1wtg3-1,lower-latin) ". "}.lst-kix_2uog6ch44jpu-5>li:before{content:"" counter(lst-ctn-kix_2uog6ch44jpu-5,lower-roman) ". "}.lst-kix_8uscekru9dbw-8>li{counter-increment:lst-ctn-kix_8uscekru9dbw-8}.lst-kix_57tjkabqizo2-0>li{counter-increment:lst-ctn-kix_57tjkabqizo2-0}.lst-kix_dblgil8t24zy-6>li:before{content:"" counter(lst-ctn-kix_dblgil8t24zy-6,decimal) ". "}ol.lst-kix_5f9palqqt4mm-0{list-style-type:none}ol.lst-kix_5f9palqqt4mm-1{list-style-type:none}ol.lst-kix_5f9palqqt4mm-2{list-style-type:none}ol.lst-kix_nhaic9xr6pf-0.start{counter-reset:lst-ctn-kix_nhaic9xr6pf-0 0}ol.lst-kix_5f9palqqt4mm-3{list-style-type:none}.lst-kix_vnvg10gwrc8t-3>li{counter-increment:lst-ctn-kix_vnvg10gwrc8t-3}.lst-kix_p8a3u4ougab9-8>li{counter-increment:lst-ctn-kix_p8a3u4ougab9-8}.lst-kix_m8zky1oy6k60-5>li{counter-increment:lst-ctn-kix_m8zky1oy6k60-5}ol.lst-kix_z7in7d1ar2zt-1{list-style-type:none}ol.lst-kix_z7in7d1ar2zt-0{list-style-type:none}ol.lst-kix_z7in7d1ar2zt-5{list-style-type:none}.lst-kix_qeukrmzdd856-5>li:before{content:"" counter(lst-ctn-kix_qeukrmzdd856-5,lower-roman) ". "}.lst-kix_1gqf2s78t7o1-0>li:before{content:"" counter(lst-ctn-kix_1gqf2s78t7o1-0,decimal) ". "}ol.lst-kix_z7in7d1ar2zt-4{list-style-type:none}ol.lst-kix_z7in7d1ar2zt-3{list-style-type:none}ol.lst-kix_z7in7d1ar2zt-2{list-style-type:none}ol.lst-kix_z7in7d1ar2zt-8{list-style-type:none}ol.lst-kix_z7in7d1ar2zt-7{list-style-type:none}ol.lst-kix_z7in7d1ar2zt-6{list-style-type:none}.lst-kix_m8zky1oy6k60-6>li:before{content:"" counter(lst-ctn-kix_m8zky1oy6k60-6,decimal) ". "}ol.lst-kix_60g29afx0lof-8.start{counter-reset:lst-ctn-kix_60g29afx0lof-8 0}ol.lst-kix_lixznqbqiris-2.start{counter-reset:lst-ctn-kix_lixznqbqiris-2 0}ol.lst-kix_57tjkabqizo2-5.start{counter-reset:lst-ctn-kix_57tjkabqizo2-5 0}.lst-kix_3h1iswqv3l7s-0>li{counter-increment:lst-ctn-kix_3h1iswqv3l7s-0}ol.lst-kix_2uog6ch44jpu-8.start{counter-reset:lst-ctn-kix_2uog6ch44jpu-8 0}.lst-kix_fr6w5z45nvx0-0>li{counter-increment:lst-ctn-kix_fr6w5z45nvx0-0}.lst-kix_p8a3u4ougab9-6>li:before{content:"" counter(lst-ctn-kix_p8a3u4ougab9-6,decimal) ". "}.lst-kix_vnvg10gwrc8t-7>li{counter-increment:lst-ctn-kix_vnvg10gwrc8t-7}.lst-kix_v454r7upbzuz-5>li{counter-increment:lst-ctn-kix_v454r7upbzuz-5}.lst-kix_juntnht2kzza-5>li{counter-increment:lst-ctn-kix_juntnht2kzza-5}ol.lst-kix_oqqzpe3b3nud-6.start{counter-reset:lst-ctn-kix_oqqzpe3b3nud-6 0}.lst-kix_vnvg10gwrc8t-5>li:before{content:"" counter(lst-ctn-kix_vnvg10gwrc8t-5,lower-roman) ". "}.lst-kix_wzk0mdv2qg9u-8>li:before{content:"" counter(lst-ctn-kix_wzk0mdv2qg9u-8,lower-roman) ". "}.lst-kix_q1b5wk7cmirb-1>li:before{content:"\0025cb "}.lst-kix_i2v077rod1nx-3>li:before{content:"\0025cf "}ol.lst-kix_3h1iswqv3l7s-4.start{counter-reset:lst-ctn-kix_3h1iswqv3l7s-4 0}.lst-kix_v454r7upbzuz-1>li:before{content:"" counter(lst-ctn-kix_v454r7upbzuz-1,lower-latin) ". "}.lst-kix_60g29afx0lof-7>li:before{content:"" counter(lst-ctn-kix_60g29afx0lof-7,lower-latin) ". "}ol.lst-kix_nho7sy6cpfv0-6{list-style-type:none}ol.lst-kix_nho7sy6cpfv0-7{list-style-type:none}ol.lst-kix_nho7sy6cpfv0-8{list-style-type:none}ol.lst-kix_nho7sy6cpfv0-2{list-style-type:none}.lst-kix_57tjkabqizo2-1>li{counter-increment:lst-ctn-kix_57tjkabqizo2-1}ol.lst-kix_nho7sy6cpfv0-3{list-style-type:none}ol.lst-kix_nho7sy6cpfv0-4{list-style-type:none}ol.lst-kix_nho7sy6cpfv0-5{list-style-type:none}.lst-kix_uq748w6pjv3r-5>li{counter-increment:lst-ctn-kix_uq748w6pjv3r-5}.lst-kix_opzlp0rjj486-2>li:before{content:"" counter(lst-ctn-kix_opzlp0rjj486-2,lower-roman) ". "}.lst-kix_1c0w7icorqz1-8>li{counter-increment:lst-ctn-kix_1c0w7icorqz1-8}.lst-kix_iqyc5gy523tq-4>li:before{content:"\0025cb "}.lst-kix_1g0xzctl1vi-3>li:before{content:"" counter(lst-ctn-kix_1g0xzctl1vi-3,decimal) ". "}.lst-kix_oqqzpe3b3nud-4>li:before{content:"" counter(lst-ctn-kix_oqqzpe3b3nud-4,lower-latin) ". "}.lst-kix_dblgil8t24zy-5>li{counter-increment:lst-ctn-kix_dblgil8t24zy-5}ol.lst-kix_kf08e4mo0q15-5.start{counter-reset:lst-ctn-kix_kf08e4mo0q15-5 0}.lst-kix_pa6lflf2amnu-0>li:before{content:"" counter(lst-ctn-kix_pa6lflf2amnu-0,decimal) ". "}ol.lst-kix_qz5wp1hdd24k-8.start{counter-reset:lst-ctn-kix_qz5wp1hdd24k-8 0}.lst-kix_3h1iswqv3l7s-3>li{counter-increment:lst-ctn-kix_3h1iswqv3l7s-3}.lst-kix_qz5wp1hdd24k-2>li{counter-increment:lst-ctn-kix_qz5wp1hdd24k-2}.lst-kix_1g0xzctl1vi-8>li:before{content:"" counter(lst-ctn-kix_1g0xzctl1vi-8,lower-roman) ". "}.lst-kix_q1b5wk7cmirb-7>li:before{content:"\0025cb "}.lst-kix_fr6w5z45nvx0-8>li:before{content:"" counter(lst-ctn-kix_fr6w5z45nvx0-8,lower-roman) ". "}.lst-kix_sgsi64vug03j-6>li{counter-increment:lst-ctn-kix_sgsi64vug03j-6}.lst-kix_8uscekru9dbw-0>li:before{content:"" counter(lst-ctn-kix_8uscekru9dbw-0,decimal) ". "}.lst-kix_lixznqbqiris-1>li:before{content:"" counter(lst-ctn-kix_lixznqbqiris-1,lower-latin) ". "}.lst-kix_nhaic9xr6pf-3>li{counter-increment:lst-ctn-kix_nhaic9xr6pf-3}.lst-kix_fr6w5z45nvx0-4>li{counter-increment:lst-ctn-kix_fr6w5z45nvx0-4}.lst-kix_lgtbofvz5zxd-0>li:before{content:"" counter(lst-ctn-kix_lgtbofvz5zxd-0,decimal) ". "}ol.lst-kix_4s9m9sikrtm7-2.start{counter-reset:lst-ctn-kix_4s9m9sikrtm7-2 0}ol.lst-kix_lgtbofvz5zxd-8.start{counter-reset:lst-ctn-kix_lgtbofvz5zxd-8 0}.lst-kix_oqqzpe3b3nud-5>li{counter-increment:lst-ctn-kix_oqqzpe3b3nud-5}.lst-kix_1gqf2s78t7o1-5>li{counter-increment:lst-ctn-kix_1gqf2s78t7o1-5}ol.lst-kix_p8a3u4ougab9-8{list-style-type:none}.lst-kix_bnpbicbhbbru-2>li:before{content:"\0025a0 "}ol.lst-kix_p8a3u4ougab9-7{list-style-type:none}ol.lst-kix_1c0w7icorqz1-0.start{counter-reset:lst-ctn-kix_1c0w7icorqz1-0 0}ol.lst-kix_4s9m9sikrtm7-3.start{counter-reset:lst-ctn-kix_4s9m9sikrtm7-3 0}ol.lst-kix_p8a3u4ougab9-1{list-style-type:none}ol.lst-kix_p8a3u4ougab9-2{list-style-type:none}ol.lst-kix_p8a3u4ougab9-0{list-style-type:none}ol.lst-kix_jpf3cr7xe1pc-4.start{counter-reset:lst-ctn-kix_jpf3cr7xe1pc-4 0}ol.lst-kix_p8a3u4ougab9-5{list-style-type:none}ol.lst-kix_p8a3u4ougab9-6{list-style-type:none}ol.lst-kix_p8a3u4ougab9-3{list-style-type:none}ol.lst-kix_p8a3u4ougab9-4{list-style-type:none}.lst-kix_t9jkz28ln50j-3>li{counter-increment:lst-ctn-kix_t9jkz28ln50j-3}ol.lst-kix_kvgsl0s9rzo4-3.start{counter-reset:lst-ctn-kix_kvgsl0s9rzo4-3 0}.lst-kix_9tkaqbe3bnu3-8>li{counter-increment:lst-ctn-kix_9tkaqbe3bnu3-8}.lst-kix_jzpgxqq6fzzf-5>li:before{content:"" counter(lst-ctn-kix_jzpgxqq6fzzf-5,lower-roman) ". "}.lst-kix_qz5wp1hdd24k-5>li{counter-increment:lst-ctn-kix_qz5wp1hdd24k-5}.lst-kix_sgsi64vug03j-2>li:before{content:"" counter(lst-ctn-kix_sgsi64vug03j-2,lower-roman) ". "}.lst-kix_1gqf2s78t7o1-0>li{counter-increment:lst-ctn-kix_1gqf2s78t7o1-0}.lst-kix_vnvg10gwrc8t-0>li:before{content:"" counter(lst-ctn-kix_vnvg10gwrc8t-0,decimal) ". "}.lst-kix_qeukrmzdd856-7>li:before{content:"" counter(lst-ctn-kix_qeukrmzdd856-7,lower-latin) ". "}.lst-kix_kc6aimw8pnra-7>li:before{content:"\0025cb "}.lst-kix_opzlp0rjj486-5>li:before{content:"" counter(lst-ctn-kix_opzlp0rjj486-5,lower-roman) ". "}ol.lst-kix_nhaic9xr6pf-8.start{counter-reset:lst-ctn-kix_nhaic9xr6pf-8 0}.lst-kix_vvzditg8sno-4>li:before{content:"\0025cb "}ol.lst-kix_nhaic9xr6pf-2.start{counter-reset:lst-ctn-kix_nhaic9xr6pf-2 0}ol.lst-kix_4s9m9sikrtm7-4.start{counter-reset:lst-ctn-kix_4s9m9sikrtm7-4 0}ol.lst-kix_1gqf2s78t7o1-7{list-style-type:none}ol.lst-kix_1gqf2s78t7o1-8{list-style-type:none}ol.lst-kix_1gqf2s78t7o1-5{list-style-type:none}ol.lst-kix_1gqf2s78t7o1-6{list-style-type:none}.lst-kix_kvgsl0s9rzo4-4>li:before{content:"" counter(lst-ctn-kix_kvgsl0s9rzo4-4,lower-latin) ". "}.lst-kix_wzk0mdv2qg9u-2>li{counter-increment:lst-ctn-kix_wzk0mdv2qg9u-2}.lst-kix_juntnht2kzza-3>li:before{content:"" counter(lst-ctn-kix_juntnht2kzza-3,decimal) ". "}.lst-kix_8dg0b92yw51r-3>li{counter-increment:lst-ctn-kix_8dg0b92yw51r-3}.lst-kix_fpxsljpyl73u-4>li:before{content:"\0025cb "}ol.lst-kix_1gqf2s78t7o1-0{list-style-type:none}.lst-kix_kvgsl0s9rzo4-7>li:before{content:"" counter(lst-ctn-kix_kvgsl0s9rzo4-7,lower-latin) ". "}ol.lst-kix_1gqf2s78t7o1-4{list-style-type:none}.lst-kix_kc6aimw8pnra-8>li:before{content:"\0025a0 "}ol.lst-kix_1gqf2s78t7o1-3{list-style-type:none}ol.lst-kix_1gqf2s78t7o1-2{list-style-type:none}ol.lst-kix_1gqf2s78t7o1-1{list-style-type:none}.lst-kix_1c0w7icorqz1-6>li:before{content:"" counter(lst-ctn-kix_1c0w7icorqz1-6,decimal) ". "}.lst-kix_60g29afx0lof-1>li{counter-increment:lst-ctn-kix_60g29afx0lof-1}.lst-kix_sgsi64vug03j-1>li{counter-increment:lst-ctn-kix_sgsi64vug03j-1}.lst-kix_60g29afx0lof-8>li{counter-increment:lst-ctn-kix_60g29afx0lof-8}ol.lst-kix_lixznqbqiris-3.start{counter-reset:lst-ctn-kix_lixznqbqiris-3 0}.lst-kix_opzlp0rjj486-3>li{counter-increment:lst-ctn-kix_opzlp0rjj486-3}.lst-kix_iqyc5gy523tq-0>li:before{content:"\0025cf "}ol.lst-kix_p8a3u4ougab9-5.start{counter-reset:lst-ctn-kix_p8a3u4ougab9-5 0}.lst-kix_kvgsl0s9rzo4-6>li{counter-increment:lst-ctn-kix_kvgsl0s9rzo4-6}ol.lst-kix_opzlp0rjj486-0.start{counter-reset:lst-ctn-kix_opzlp0rjj486-0 0}.lst-kix_pza3ybm1wtg3-7>li:before{content:"" counter(lst-ctn-kix_pza3ybm1wtg3-7,lower-latin) ". "}.lst-kix_opzlp0rjj486-0>li:before{content:"" counter(lst-ctn-kix_opzlp0rjj486-0,decimal) ". "}.lst-kix_p8a3u4ougab9-8>li:before{content:"" counter(lst-ctn-kix_p8a3u4ougab9-8,lower-roman) ". "}ol.lst-kix_pza3ybm1wtg3-2.start{counter-reset:lst-ctn-kix_pza3ybm1wtg3-2 0}.lst-kix_dblgil8t24zy-8>li:before{content:"" counter(lst-ctn-kix_dblgil8t24zy-8,lower-roman) ". "}ol.lst-kix_32zxnvl59py3-0.start{counter-reset:lst-ctn-kix_32zxnvl59py3-0 0}.lst-kix_t9jkz28ln50j-7>li{counter-increment:lst-ctn-kix_t9jkz28ln50j-7}.lst-kix_z7in7d1ar2zt-8>li{counter-increment:lst-ctn-kix_z7in7d1ar2zt-8}.lst-kix_3h1iswqv3l7s-4>li{counter-increment:lst-ctn-kix_3h1iswqv3l7s-4}.lst-kix_bnpbicbhbbru-7>li:before{content:"\0025cb "}.lst-kix_uq748w6pjv3r-4>li{counter-increment:lst-ctn-kix_uq748w6pjv3r-4}.lst-kix_qz5wp1hdd24k-1>li:before{content:"" counter(lst-ctn-kix_qz5wp1hdd24k-1,lower-latin) ". "}ol.lst-kix_hm47sef7muk-2.start{counter-reset:lst-ctn-kix_hm47sef7muk-2 0}.lst-kix_jpf3cr7xe1pc-3>li{counter-increment:lst-ctn-kix_jpf3cr7xe1pc-3}.lst-kix_oqqzpe3b3nud-4>li{counter-increment:lst-ctn-kix_oqqzpe3b3nud-4}ol.lst-kix_lgtbofvz5zxd-1.start{counter-reset:lst-ctn-kix_lgtbofvz5zxd-1 0}ol.lst-kix_9tkaqbe3bnu3-5.start{counter-reset:lst-ctn-kix_9tkaqbe3bnu3-5 0}.lst-kix_vnvg10gwrc8t-0>li{counter-increment:lst-ctn-kix_vnvg10gwrc8t-0}ol.lst-kix_32zxnvl59py3-8{list-style-type:none}.lst-kix_lgtbofvz5zxd-8>li{counter-increment:lst-ctn-kix_lgtbofvz5zxd-8}.lst-kix_m8zky1oy6k60-2>li:before{content:"" counter(lst-ctn-kix_m8zky1oy6k60-2,lower-roman) ". "}ol.lst-kix_jxeur1wnlj7y-7{list-style-type:none}ol.lst-kix_jxeur1wnlj7y-8{list-style-type:none}ol.lst-kix_jxeur1wnlj7y-3{list-style-type:none}ol.lst-kix_jxeur1wnlj7y-4{list-style-type:none}ol.lst-kix_jxeur1wnlj7y-5{list-style-type:none}ol.lst-kix_jxeur1wnlj7y-6{list-style-type:none}.lst-kix_fr6w5z45nvx0-7>li{counter-increment:lst-ctn-kix_fr6w5z45nvx0-7}.lst-kix_qeukrmzdd856-3>li{counter-increment:lst-ctn-kix_qeukrmzdd856-3}ol.lst-kix_kf08e4mo0q15-7.start{counter-reset:lst-ctn-kix_kf08e4mo0q15-7 0}.lst-kix_vnvg10gwrc8t-4>li{counter-increment:lst-ctn-kix_vnvg10gwrc8t-4}ol.lst-kix_jxeur1wnlj7y-0{list-style-type:none}.lst-kix_jzpgxqq6fzzf-1>li{counter-increment:lst-ctn-kix_jzpgxqq6fzzf-1}ol.lst-kix_jxeur1wnlj7y-2{list-style-type:none}.lst-kix_jzpgxqq6fzzf-4>li:before{content:"" counter(lst-ctn-kix_jzpgxqq6fzzf-4,lower-latin) ". "}ol.lst-kix_jxeur1wnlj7y-1{list-style-type:none}.lst-kix_8dg0b92yw51r-8>li:before{content:"" counter(lst-ctn-kix_8dg0b92yw51r-8,lower-roman) ". "}.lst-kix_opzlp0rjj486-8>li{counter-increment:lst-ctn-kix_opzlp0rjj486-8}.lst-kix_m8zky1oy6k60-2>li{counter-increment:lst-ctn-kix_m8zky1oy6k60-2}ol.lst-kix_8dg0b92yw51r-5{list-style-type:none}ol.lst-kix_8dg0b92yw51r-6{list-style-type:none}ol.lst-kix_8dg0b92yw51r-7{list-style-type:none}ol.lst-kix_opzlp0rjj486-7.start{counter-reset:lst-ctn-kix_opzlp0rjj486-7 0}ol.lst-kix_8dg0b92yw51r-8{list-style-type:none}.lst-kix_oqqzpe3b3nud-6>li{counter-increment:lst-ctn-kix_oqqzpe3b3nud-6}ol.lst-kix_4s9m9sikrtm7-6{list-style-type:none}ol.lst-kix_4s9m9sikrtm7-7{list-style-type:none}ol.lst-kix_4s9m9sikrtm7-4{list-style-type:none}ol.lst-kix_4s9m9sikrtm7-5{list-style-type:none}ol.lst-kix_4s9m9sikrtm7-8{list-style-type:none}.lst-kix_qeukrmzdd856-2>li{counter-increment:lst-ctn-kix_qeukrmzdd856-2}ol.lst-kix_8dg0b92yw51r-2{list-style-type:none}ol.lst-kix_8dg0b92yw51r-1{list-style-type:none}ol.lst-kix_8dg0b92yw51r-4{list-style-type:none}ol.lst-kix_8dg0b92yw51r-3{list-style-type:none}ol.lst-kix_4s9m9sikrtm7-2{list-style-type:none}ol.lst-kix_4s9m9sikrtm7-3{list-style-type:none}ol.lst-kix_8dg0b92yw51r-0{list-style-type:none}ol.lst-kix_4s9m9sikrtm7-0{list-style-type:none}ol.lst-kix_8uscekru9dbw-6.start{counter-reset:lst-ctn-kix_8uscekru9dbw-6 0}ol.lst-kix_4s9m9sikrtm7-1{list-style-type:none}.lst-kix_1gqf2s78t7o1-4>li{counter-increment:lst-ctn-kix_1gqf2s78t7o1-4}.lst-kix_jzpgxqq6fzzf-2>li{counter-increment:lst-ctn-kix_jzpgxqq6fzzf-2}ol.lst-kix_kvgsl0s9rzo4-1.start{counter-reset:lst-ctn-kix_kvgsl0s9rzo4-1 0}.lst-kix_uq748w6pjv3r-8>li:before{content:"" counter(lst-ctn-kix_uq748w6pjv3r-8,lower-roman) ". "}.lst-kix_ggm78fckav5h-1>li:before{content:"" counter(lst-ctn-kix_ggm78fckav5h-1,lower-latin) ". "}.lst-kix_dblgil8t24zy-6>li{counter-increment:lst-ctn-kix_dblgil8t24zy-6}ol.lst-kix_hvjet9voiiio-4.start{counter-reset:lst-ctn-kix_hvjet9voiiio-4 0}.lst-kix_nho7sy6cpfv0-3>li:before{content:"" counter(lst-ctn-kix_nho7sy6cpfv0-3,decimal) ". "}.lst-kix_lgtbofvz5zxd-7>li{counter-increment:lst-ctn-kix_lgtbofvz5zxd-7}.lst-kix_uq748w6pjv3r-7>li:before{content:"" counter(lst-ctn-kix_uq748w6pjv3r-7,lower-latin) ". "}ol.lst-kix_jzpgxqq6fzzf-3.start{counter-reset:lst-ctn-kix_jzpgxqq6fzzf-3 0}ol.lst-kix_qeukrmzdd856-4.start{counter-reset:lst-ctn-kix_qeukrmzdd856-4 0}.lst-kix_p8a3u4ougab9-7>li:before{content:"" counter(lst-ctn-kix_p8a3u4ougab9-7,lower-latin) ". "}ol.lst-kix_pa6lflf2amnu-8.start{counter-reset:lst-ctn-kix_pa6lflf2amnu-8 0}.lst-kix_32zxnvl59py3-5>li:before{content:"" counter(lst-ctn-kix_32zxnvl59py3-5,lower-roman) ". "}.lst-kix_jpf3cr7xe1pc-7>li:before{content:"" counter(lst-ctn-kix_jpf3cr7xe1pc-7,lower-latin) ". "}.lst-kix_1c0w7icorqz1-2>li{counter-increment:lst-ctn-kix_1c0w7icorqz1-2}.lst-kix_nhaic9xr6pf-5>li{counter-increment:lst-ctn-kix_nhaic9xr6pf-5}.lst-kix_qeukrmzdd856-0>li{counter-increment:lst-ctn-kix_qeukrmzdd856-0}.lst-kix_t7any4lo9hoq-5>li:before{content:"\0025a0 "}ol.lst-kix_z7in7d1ar2zt-5.start{counter-reset:lst-ctn-kix_z7in7d1ar2zt-5 0}.lst-kix_5f9palqqt4mm-4>li{counter-increment:lst-ctn-kix_5f9palqqt4mm-4}ol.lst-kix_57tjkabqizo2-3.start{counter-reset:lst-ctn-kix_57tjkabqizo2-3 0}ol.lst-kix_oqqzpe3b3nud-4.start{counter-reset:lst-ctn-kix_oqqzpe3b3nud-4 0}.lst-kix_9tkaqbe3bnu3-8>li:before{content:"" counter(lst-ctn-kix_9tkaqbe3bnu3-8,lower-roman) ". "}ol.lst-kix_vnvg10gwrc8t-3{list-style-type:none}.lst-kix_qz5wp1hdd24k-1>li{counter-increment:lst-ctn-kix_qz5wp1hdd24k-1}ol.lst-kix_vnvg10gwrc8t-2{list-style-type:none}ol.lst-kix_vnvg10gwrc8t-5{list-style-type:none}ol.lst-kix_vnvg10gwrc8t-4{list-style-type:none}ol.lst-kix_vnvg10gwrc8t-7{list-style-type:none}ol.lst-kix_vnvg10gwrc8t-6{list-style-type:none}ol.lst-kix_vnvg10gwrc8t-8{list-style-type:none}.lst-kix_jpf3cr7xe1pc-1>li:before{content:"" counter(lst-ctn-kix_jpf3cr7xe1pc-1,lower-latin) ". "}ol.lst-kix_kf08e4mo0q15-0.start{counter-reset:lst-ctn-kix_kf08e4mo0q15-0 0}.lst-kix_fpxsljpyl73u-5>li:before{content:"\0025a0 "}ol.lst-kix_1g0xzctl1vi-5{list-style-type:none}ol.lst-kix_ggm78fckav5h-1{list-style-type:none}ol.lst-kix_1g0xzctl1vi-4{list-style-type:none}ol.lst-kix_ggm78fckav5h-2{list-style-type:none}ol.lst-kix_1g0xzctl1vi-3{list-style-type:none}.lst-kix_hvjet9voiiio-4>li{counter-increment:lst-ctn-kix_hvjet9voiiio-4}ol.lst-kix_1g0xzctl1vi-2{list-style-type:none}ol.lst-kix_ggm78fckav5h-0{list-style-type:none}ol.lst-kix_1g0xzctl1vi-1{list-style-type:none}ol.lst-kix_ggm78fckav5h-5{list-style-type:none}ol.lst-kix_ggm78fckav5h-6{list-style-type:none}ol.lst-kix_1g0xzctl1vi-0{list-style-type:none}ol.lst-kix_ggm78fckav5h-3{list-style-type:none}ol.lst-kix_ggm78fckav5h-4{list-style-type:none}.lst-kix_pa6lflf2amnu-1>li:before{content:"" counter(lst-ctn-kix_pa6lflf2amnu-1,lower-latin) ". "}ol.lst-kix_ggm78fckav5h-7{list-style-type:none}ol.lst-kix_ggm78fckav5h-8{list-style-type:none}ol.lst-kix_1g0xzctl1vi-8{list-style-type:none}.lst-kix_t9jkz28ln50j-4>li:before{content:"" counter(lst-ctn-kix_t9jkz28ln50j-4,lower-latin) ". "}ol.lst-kix_1g0xzctl1vi-7{list-style-type:none}ol.lst-kix_1g0xzctl1vi-6{list-style-type:none}.lst-kix_nho7sy6cpfv0-3>li{counter-increment:lst-ctn-kix_nho7sy6cpfv0-3}ol.lst-kix_vnvg10gwrc8t-0.start{counter-reset:lst-ctn-kix_vnvg10gwrc8t-0 0}ol.lst-kix_nho7sy6cpfv0-4.start{counter-reset:lst-ctn-kix_nho7sy6cpfv0-4 0}.lst-kix_vnvg10gwrc8t-1>li:before{content:"" counter(lst-ctn-kix_vnvg10gwrc8t-1,lower-latin) ". "}ol.lst-kix_juntnht2kzza-2.start{counter-reset:lst-ctn-kix_juntnht2kzza-2 0}.lst-kix_v454r7upbzuz-6>li{counter-increment:lst-ctn-kix_v454r7upbzuz-6}ul.lst-kix_vvzditg8sno-6{list-style-type:none}.lst-kix_i2v077rod1nx-6>li:before{content:"\0025cf "}ul.lst-kix_vvzditg8sno-5{list-style-type:none}ul.lst-kix_vvzditg8sno-4{list-style-type:none}ul.lst-kix_vvzditg8sno-3{list-style-type:none}ul.lst-kix_vvzditg8sno-8{list-style-type:none}ul.lst-kix_vvzditg8sno-7{list-style-type:none}.lst-kix_wzk0mdv2qg9u-3>li:before{content:"" counter(lst-ctn-kix_wzk0mdv2qg9u-3,decimal) ". "}ul.lst-kix_vvzditg8sno-2{list-style-type:none}ul.lst-kix_vvzditg8sno-1{list-style-type:none}.lst-kix_2uog6ch44jpu-0>li:before{content:"" counter(lst-ctn-kix_2uog6ch44jpu-0,decimal) ". "}ul.lst-kix_vvzditg8sno-0{list-style-type:none}ol.lst-kix_60g29afx0lof-6.start{counter-reset:lst-ctn-kix_60g29afx0lof-6 0}.lst-kix_v454r7upbzuz-2>li{counter-increment:lst-ctn-kix_v454r7upbzuz-2}.lst-kix_lgtbofvz5zxd-3>li:before{content:"" counter(lst-ctn-kix_lgtbofvz5zxd-3,decimal) ". "}.lst-kix_1g0xzctl1vi-8>li{counter-increment:lst-ctn-kix_1g0xzctl1vi-8}ol.lst-kix_5f9palqqt4mm-2.start{counter-reset:lst-ctn-kix_5f9palqqt4mm-2 0}ol.lst-kix_lixznqbqiris-6.start{counter-reset:lst-ctn-kix_lixznqbqiris-6 0}.lst-kix_pyiocxf7nngd-2>li{counter-increment:lst-ctn-kix_pyiocxf7nngd-2}.lst-kix_m1x0qzeeadaz-1>li{counter-increment:lst-ctn-kix_m1x0qzeeadaz-1}.lst-kix_hm47sef7muk-7>li{counter-increment:lst-ctn-kix_hm47sef7muk-7}ol.lst-kix_nho7sy6cpfv0-2.start{counter-reset:lst-ctn-kix_nho7sy6cpfv0-2 0}ol.lst-kix_57tjkabqizo2-4.start{counter-reset:lst-ctn-kix_57tjkabqizo2-4 0}.lst-kix_lixznqbqiris-8>li:before{content:"" counter(lst-ctn-kix_lixznqbqiris-8,lower-roman) ". "}.lst-kix_j51xhhtple7c-2>li{counter-increment:lst-ctn-kix_j51xhhtple7c-2}ol.lst-kix_5f9palqqt4mm-5.start{counter-reset:lst-ctn-kix_5f9palqqt4mm-5 0}ol.lst-kix_jpf3cr7xe1pc-5.start{counter-reset:lst-ctn-kix_jpf3cr7xe1pc-5 0}.lst-kix_ggm78fckav5h-0>li:before{content:"" counter(lst-ctn-kix_ggm78fckav5h-0,decimal) ". "}ol.lst-kix_z7in7d1ar2zt-6.start{counter-reset:lst-ctn-kix_z7in7d1ar2zt-6 0}.lst-kix_5f9palqqt4mm-3>li:before{content:"" counter(lst-ctn-kix_5f9palqqt4mm-3,decimal) ". "}.lst-kix_9tkaqbe3bnu3-0>li{counter-increment:lst-ctn-kix_9tkaqbe3bnu3-0}.lst-kix_oqqzpe3b3nud-1>li:before{content:"" counter(lst-ctn-kix_oqqzpe3b3nud-1,lower-latin) ". "}.lst-kix_pyiocxf7nngd-5>li{counter-increment:lst-ctn-kix_pyiocxf7nngd-5}.lst-kix_fpxsljpyl73u-0>li:before{content:"\0025cf "}.lst-kix_m8zky1oy6k60-7>li:before{content:"" counter(lst-ctn-kix_m8zky1oy6k60-7,lower-latin) ". "}.lst-kix_32zxnvl59py3-4>li{counter-increment:lst-ctn-kix_32zxnvl59py3-4}.lst-kix_wzk0mdv2qg9u-8>li{counter-increment:lst-ctn-kix_wzk0mdv2qg9u-8}.lst-kix_kvgsl0s9rzo4-0>li:before{content:"" counter(lst-ctn-kix_kvgsl0s9rzo4-0,decimal) ". "}.lst-kix_fr6w5z45nvx0-3>li:before{content:"" counter(lst-ctn-kix_fr6w5z45nvx0-3,decimal) ". "}ol.lst-kix_nho7sy6cpfv0-7.start{counter-reset:lst-ctn-kix_nho7sy6cpfv0-7 0}ol.lst-kix_fr6w5z45nvx0-6.start{counter-reset:lst-ctn-kix_fr6w5z45nvx0-6 0}ol.lst-kix_pza3ybm1wtg3-0.start{counter-reset:lst-ctn-kix_pza3ybm1wtg3-0 0}.lst-kix_fr6w5z45nvx0-1>li{counter-increment:lst-ctn-kix_fr6w5z45nvx0-1}.lst-kix_1gqf2s78t7o1-2>li{counter-increment:lst-ctn-kix_1gqf2s78t7o1-2}.lst-kix_57tjkabqizo2-6>li:before{content:"" counter(lst-ctn-kix_57tjkabqizo2-6,decimal) ". "}ol.lst-kix_9tkaqbe3bnu3-1.start{counter-reset:lst-ctn-kix_9tkaqbe3bnu3-1 0}.lst-kix_m8zky1oy6k60-3>li:before{content:"" counter(lst-ctn-kix_m8zky1oy6k60-3,decimal) ". "}.lst-kix_qz5wp1hdd24k-6>li:before{content:"" counter(lst-ctn-kix_qz5wp1hdd24k-6,decimal) ". "}ol.lst-kix_m1x0qzeeadaz-7.start{counter-reset:lst-ctn-kix_m1x0qzeeadaz-7 0}.lst-kix_ggm78fckav5h-4>li{counter-increment:lst-ctn-kix_ggm78fckav5h-4}ol.lst-kix_qz5wp1hdd24k-7.start{counter-reset:lst-ctn-kix_qz5wp1hdd24k-7 0}ol.lst-kix_kvgsl0s9rzo4-0{list-style-type:none}.lst-kix_4s9m9sikrtm7-2>li:before{content:"" counter(lst-ctn-kix_4s9m9sikrtm7-2,lower-roman) ". "}ol.lst-kix_jzpgxqq6fzzf-4.start{counter-reset:lst-ctn-kix_jzpgxqq6fzzf-4 0}ol.lst-kix_kvgsl0s9rzo4-7{list-style-type:none}.lst-kix_i2v077rod1nx-7>li:before{content:"\0025cb "}ol.lst-kix_kvgsl0s9rzo4-8{list-style-type:none}ol.lst-kix_32zxnvl59py3-2.start{counter-reset:lst-ctn-kix_32zxnvl59py3-2 0}ol.lst-kix_kvgsl0s9rzo4-5{list-style-type:none}ol.lst-kix_kvgsl0s9rzo4-6{list-style-type:none}.lst-kix_4s9m9sikrtm7-5>li:before{content:"" counter(lst-ctn-kix_4s9m9sikrtm7-5,lower-roman) ". "}.lst-kix_pza3ybm1wtg3-5>li{counter-increment:lst-ctn-kix_pza3ybm1wtg3-5}ol.lst-kix_kvgsl0s9rzo4-3{list-style-type:none}.lst-kix_j51xhhtple7c-5>li:before{content:"" counter(lst-ctn-kix_j51xhhtple7c-5,lower-roman) ". "}ol.lst-kix_kvgsl0s9rzo4-4{list-style-type:none}ol.lst-kix_kvgsl0s9rzo4-1{list-style-type:none}ol.lst-kix_kvgsl0s9rzo4-2{list-style-type:none}.lst-kix_2uog6ch44jpu-8>li:before{content:"" counter(lst-ctn-kix_2uog6ch44jpu-8,lower-roman) ". "}.lst-kix_z7in7d1ar2zt-8>li:before{content:"" counter(lst-ctn-kix_z7in7d1ar2zt-8,lower-roman) ". "}.lst-kix_wzk0mdv2qg9u-0>li{counter-increment:lst-ctn-kix_wzk0mdv2qg9u-0}.lst-kix_juntnht2kzza-8>li{counter-increment:lst-ctn-kix_juntnht2kzza-8}.lst-kix_lixznqbqiris-2>li{counter-increment:lst-ctn-kix_lixznqbqiris-2}.lst-kix_j51xhhtple7c-8>li:before{content:"" counter(lst-ctn-kix_j51xhhtple7c-8,lower-roman) ". "}.lst-kix_1c0w7icorqz1-6>li{counter-increment:lst-ctn-kix_1c0w7icorqz1-6}ol.lst-kix_jpf3cr7xe1pc-2.start{counter-reset:lst-ctn-kix_jpf3cr7xe1pc-2 0}.lst-kix_7kmxmbi2lsws-7>li{counter-increment:lst-ctn-kix_7kmxmbi2lsws-7}.lst-kix_lgtbofvz5zxd-4>li:before{content:"" counter(lst-ctn-kix_lgtbofvz5zxd-4,lower-latin) ". "}.lst-kix_z7in7d1ar2zt-2>li{counter-increment:lst-ctn-kix_z7in7d1ar2zt-2}ol.lst-kix_1gqf2s78t7o1-8.start{counter-reset:lst-ctn-kix_1gqf2s78t7o1-8 0}.lst-kix_1g0xzctl1vi-0>li{counter-increment:lst-ctn-kix_1g0xzctl1vi-0}ol.lst-kix_lixznqbqiris-7{list-style-type:none}ol.lst-kix_lixznqbqiris-8{list-style-type:none}ol.lst-kix_lixznqbqiris-5{list-style-type:none}ol.lst-kix_lixznqbqiris-6{list-style-type:none}.lst-kix_7kmxmbi2lsws-1>li{counter-increment:lst-ctn-kix_7kmxmbi2lsws-1}ol.lst-kix_lixznqbqiris-3{list-style-type:none}ol.lst-kix_lixznqbqiris-4{list-style-type:none}.lst-kix_1g0xzctl1vi-4>li{counter-increment:lst-ctn-kix_1g0xzctl1vi-4}ol.lst-kix_4s9m9sikrtm7-7.start{counter-reset:lst-ctn-kix_4s9m9sikrtm7-7 0}.lst-kix_z7in7d1ar2zt-4>li{counter-increment:lst-ctn-kix_z7in7d1ar2zt-4}ol.lst-kix_lixznqbqiris-4.start{counter-reset:lst-ctn-kix_lixznqbqiris-4 0}.lst-kix_pa6lflf2amnu-1>li{counter-increment:lst-ctn-kix_pa6lflf2amnu-1}.lst-kix_5f9palqqt4mm-1>li{counter-increment:lst-ctn-kix_5f9palqqt4mm-1}ol.lst-kix_hm47sef7muk-0.start{counter-reset:lst-ctn-kix_hm47sef7muk-0 0}.lst-kix_9tkaqbe3bnu3-3>li{counter-increment:lst-ctn-kix_9tkaqbe3bnu3-3}.lst-kix_pa6lflf2amnu-4>li{counter-increment:lst-ctn-kix_pa6lflf2amnu-4}ol.lst-kix_jzpgxqq6fzzf-1.start{counter-reset:lst-ctn-kix_jzpgxqq6fzzf-1 0}ol.lst-kix_wzk0mdv2qg9u-3.start{counter-reset:lst-ctn-kix_wzk0mdv2qg9u-3 0}.lst-kix_ffvvlgzbuz30-2>li:before{content:"\0025a0 "}.lst-kix_jxeur1wnlj7y-8>li{counter-increment:lst-ctn-kix_jxeur1wnlj7y-8}.lst-kix_vvzditg8sno-2>li:before{content:"\0025a0 "}ol.lst-kix_vnvg10gwrc8t-4.start{counter-reset:lst-ctn-kix_vnvg10gwrc8t-4 0}ol.lst-kix_lixznqbqiris-5.start{counter-reset:lst-ctn-kix_lixznqbqiris-5 0}ol.lst-kix_3h1iswqv3l7s-1.start{counter-reset:lst-ctn-kix_3h1iswqv3l7s-1 0}.lst-kix_1c0w7icorqz1-0>li:before{content:"" counter(lst-ctn-kix_1c0w7icorqz1-0,decimal) ". "}ol.lst-kix_sgsi64vug03j-8{list-style-type:none}.lst-kix_60g29afx0lof-0>li:before{content:"" counter(lst-ctn-kix_60g29afx0lof-0,decimal) ". "}.lst-kix_wzk0mdv2qg9u-4>li{counter-increment:lst-ctn-kix_wzk0mdv2qg9u-4}ol.lst-kix_sgsi64vug03j-6{list-style-type:none}ol.lst-kix_sgsi64vug03j-7{list-style-type:none}.lst-kix_t9jkz28ln50j-2>li{counter-increment:lst-ctn-kix_t9jkz28ln50j-2}ol.lst-kix_sgsi64vug03j-4{list-style-type:none}ol.lst-kix_sgsi64vug03j-5{list-style-type:none}.lst-kix_jxeur1wnlj7y-4>li{counter-increment:lst-ctn-kix_jxeur1wnlj7y-4}ol.lst-kix_sgsi64vug03j-2{list-style-type:none}ol.lst-kix_sgsi64vug03j-3{list-style-type:none}.lst-kix_wzk0mdv2qg9u-3>li{counter-increment:lst-ctn-kix_wzk0mdv2qg9u-3}ol.lst-kix_sgsi64vug03j-0{list-style-type:none}ol.lst-kix_sgsi64vug03j-1{list-style-type:none}.lst-kix_kf08e4mo0q15-0>li{counter-increment:lst-ctn-kix_kf08e4mo0q15-0}ol.lst-kix_vnvg10gwrc8t-1{list-style-type:none}ol.lst-kix_vnvg10gwrc8t-0{list-style-type:none}.lst-kix_32zxnvl59py3-1>li{counter-increment:lst-ctn-kix_32zxnvl59py3-1}.lst-kix_2uog6ch44jpu-5>li{counter-increment:lst-ctn-kix_2uog6ch44jpu-5}.lst-kix_a4uqy1hx9g3-8>li:before{content:"\0025a0 "}ol.lst-kix_60g29afx0lof-7.start{counter-reset:lst-ctn-kix_60g29afx0lof-7 0}.lst-kix_jzpgxqq6fzzf-3>li{counter-increment:lst-ctn-kix_jzpgxqq6fzzf-3}.lst-kix_jzpgxqq6fzzf-3>li:before{content:"" counter(lst-ctn-kix_jzpgxqq6fzzf-3,decimal) ". "}.lst-kix_t9jkz28ln50j-7>li:before{content:"" counter(lst-ctn-kix_t9jkz28ln50j-7,lower-latin) ". "}.lst-kix_oqqzpe3b3nud-5>li:before{content:"" counter(lst-ctn-kix_oqqzpe3b3nud-5,lower-roman) ". "}.lst-kix_7kmxmbi2lsws-2>li:before{content:"" counter(lst-ctn-kix_7kmxmbi2lsws-2,lower-roman) ". "}.lst-kix_v454r7upbzuz-3>li{counter-increment:lst-ctn-kix_v454r7upbzuz-3}ol.lst-kix_m8zky1oy6k60-3.start{counter-reset:lst-ctn-kix_m8zky1oy6k60-3 0}.lst-kix_v454r7upbzuz-5>li:before{content:"" counter(lst-ctn-kix_v454r7upbzuz-5,lower-roman) ". "}.lst-kix_jpf3cr7xe1pc-6>li:before{content:"" counter(lst-ctn-kix_jpf3cr7xe1pc-6,decimal) ". "}.lst-kix_pyiocxf7nngd-5>li:before{content:"" counter(lst-ctn-kix_pyiocxf7nngd-5,lower-roman) ". "}ol.lst-kix_lixznqbqiris-0{list-style-type:none}ol.lst-kix_lixznqbqiris-1{list-style-type:none}ol.lst-kix_lixznqbqiris-2{list-style-type:none}ol.lst-kix_wzk0mdv2qg9u-2.start{counter-reset:lst-ctn-kix_wzk0mdv2qg9u-2 0}.lst-kix_5f9palqqt4mm-5>li:before{content:"" counter(lst-ctn-kix_5f9palqqt4mm-5,lower-roman) ". "}ol.lst-kix_9tkaqbe3bnu3-4.start{counter-reset:lst-ctn-kix_9tkaqbe3bnu3-4 0}ol.lst-kix_57tjkabqizo2-0{list-style-type:none}ol.lst-kix_57tjkabqizo2-1{list-style-type:none}ol.lst-kix_wzk0mdv2qg9u-6.start{counter-reset:lst-ctn-kix_wzk0mdv2qg9u-6 0}.lst-kix_uq748w6pjv3r-6>li:before{content:"" counter(lst-ctn-kix_uq748w6pjv3r-6,decimal) ". "}.lst-kix_opzlp0rjj486-4>li:before{content:"" counter(lst-ctn-kix_opzlp0rjj486-4,lower-latin) ". "}ol.lst-kix_57tjkabqizo2-4{list-style-type:none}ol.lst-kix_57tjkabqizo2-5{list-style-type:none}ol.lst-kix_57tjkabqizo2-2{list-style-type:none}ol.lst-kix_57tjkabqizo2-3{list-style-type:none}ol.lst-kix_1c0w7icorqz1-2.start{counter-reset:lst-ctn-kix_1c0w7icorqz1-2 0}.lst-kix_hvjet9voiiio-7>li{counter-increment:lst-ctn-kix_hvjet9voiiio-7}.lst-kix_nhaic9xr6pf-0>li{counter-increment:lst-ctn-kix_nhaic9xr6pf-0}ol.lst-kix_4s9m9sikrtm7-1.start{counter-reset:lst-ctn-kix_4s9m9sikrtm7-1 0}.lst-kix_p8a3u4ougab9-4>li:before{content:"" counter(lst-ctn-kix_p8a3u4ougab9-4,lower-latin) ". "}ol.lst-kix_57tjkabqizo2-8{list-style-type:none}ol.lst-kix_57tjkabqizo2-7{list-style-type:none}ol.lst-kix_57tjkabqizo2-6{list-style-type:none}ol.lst-kix_pa6lflf2amnu-1.start{counter-reset:lst-ctn-kix_pa6lflf2amnu-1 0}.lst-kix_kc6aimw8pnra-5>li:before{content:"\0025a0 "}ol.lst-kix_jpf3cr7xe1pc-8.start{counter-reset:lst-ctn-kix_jpf3cr7xe1pc-8 0}.lst-kix_5f9palqqt4mm-0>li{counter-increment:lst-ctn-kix_5f9palqqt4mm-0}ol.lst-kix_p8a3u4ougab9-6.start{counter-reset:lst-ctn-kix_p8a3u4ougab9-6 0}ol.lst-kix_sgsi64vug03j-3.start{counter-reset:lst-ctn-kix_sgsi64vug03j-3 0}.lst-kix_ggm78fckav5h-4>li:before{content:"" counter(lst-ctn-kix_ggm78fckav5h-4,lower-latin) ". "}.lst-kix_m8zky1oy6k60-0>li{counter-increment:lst-ctn-kix_m8zky1oy6k60-0}.lst-kix_v454r7upbzuz-3>li:before{content:"" counter(lst-ctn-kix_v454r7upbzuz-3,decimal) ". "}.lst-kix_qeukrmzdd856-5>li{counter-increment:lst-ctn-kix_qeukrmzdd856-5}ol.lst-kix_pza3ybm1wtg3-6.start{counter-reset:lst-ctn-kix_pza3ybm1wtg3-6 0}.lst-kix_juntnht2kzza-5>li:before{content:"" counter(lst-ctn-kix_juntnht2kzza-5,lower-roman) ". "}ol.lst-kix_sgsi64vug03j-0.start{counter-reset:lst-ctn-kix_sgsi64vug03j-0 0}.lst-kix_8uscekru9dbw-0>li{counter-increment:lst-ctn-kix_8uscekru9dbw-0}ol.lst-kix_v454r7upbzuz-5.start{counter-reset:lst-ctn-kix_v454r7upbzuz-5 0}.lst-kix_9tkaqbe3bnu3-7>li{counter-increment:lst-ctn-kix_9tkaqbe3bnu3-7}ol.lst-kix_jzpgxqq6fzzf-5.start{counter-reset:lst-ctn-kix_jzpgxqq6fzzf-5 0}.lst-kix_5f9palqqt4mm-1>li:before{content:"" counter(lst-ctn-kix_5f9palqqt4mm-1,lower-latin) ". "}.lst-kix_ffvvlgzbuz30-7>li:before{content:"\0025cb "}.lst-kix_pza3ybm1wtg3-3>li:before{content:"" counter(lst-ctn-kix_pza3ybm1wtg3-3,decimal) ". "}ol.lst-kix_5f9palqqt4mm-0.start{counter-reset:lst-ctn-kix_5f9palqqt4mm-0 0}.lst-kix_vnvg10gwrc8t-6>li:before{content:"" counter(lst-ctn-kix_vnvg10gwrc8t-6,decimal) ". "}.lst-kix_a4uqy1hx9g3-6>li:before{content:"\0025cf "}ol.lst-kix_jzpgxqq6fzzf-1{list-style-type:none}ol.lst-kix_jzpgxqq6fzzf-0{list-style-type:none}.lst-kix_7kmxmbi2lsws-7>li:before{content:"" counter(lst-ctn-kix_7kmxmbi2lsws-7,lower-latin) ". "}.lst-kix_32zxnvl59py3-2>li{counter-increment:lst-ctn-kix_32zxnvl59py3-2}ol.lst-kix_hm47sef7muk-4{list-style-type:none}.lst-kix_qeukrmzdd856-1>li{counter-increment:lst-ctn-kix_qeukrmzdd856-1}ol.lst-kix_hm47sef7muk-3{list-style-type:none}.lst-kix_qeukrmzdd856-0>li:before{content:"" counter(lst-ctn-kix_qeukrmzdd856-0,decimal) ". "}ol.lst-kix_hm47sef7muk-6{list-style-type:none}ol.lst-kix_hm47sef7muk-5{list-style-type:none}.lst-kix_vvzditg8sno-8>li:before{content:"\0025a0 "}ol.lst-kix_hm47sef7muk-8{list-style-type:none}.lst-kix_m1x0qzeeadaz-0>li{counter-increment:lst-ctn-kix_m1x0qzeeadaz-0}ol.lst-kix_hm47sef7muk-7{list-style-type:none}ol.lst-kix_32zxnvl59py3-5.start{counter-reset:lst-ctn-kix_32zxnvl59py3-5 0}.lst-kix_pyiocxf7nngd-7>li:before{content:"" counter(lst-ctn-kix_pyiocxf7nngd-7,lower-latin) ". "}.lst-kix_ffvvlgzbuz30-4>li:before{content:"\0025cb "}.lst-kix_1g0xzctl1vi-0>li:before{content:"" counter(lst-ctn-kix_1g0xzctl1vi-0,decimal) ". "}ol.lst-kix_8uscekru9dbw-5.start{counter-reset:lst-ctn-kix_8uscekru9dbw-5 0}ol.lst-kix_hm47sef7muk-0{list-style-type:none}ol.lst-kix_qeukrmzdd856-0.start{counter-reset:lst-ctn-kix_qeukrmzdd856-0 0}ol.lst-kix_hm47sef7muk-2{list-style-type:none}ol.lst-kix_hm47sef7muk-1{list-style-type:none}.lst-kix_8uscekru9dbw-1>li{counter-increment:lst-ctn-kix_8uscekru9dbw-1}ol.lst-kix_sgsi64vug03j-4.start{counter-reset:lst-ctn-kix_sgsi64vug03j-4 0}ol.lst-kix_nhaic9xr6pf-3.start{counter-reset:lst-ctn-kix_nhaic9xr6pf-3 0}ol.lst-kix_qeukrmzdd856-3.start{counter-reset:lst-ctn-kix_qeukrmzdd856-3 0}.lst-kix_vnvg10gwrc8t-8>li{counter-increment:lst-ctn-kix_vnvg10gwrc8t-8}ul.lst-kix_iqyc5gy523tq-4{list-style-type:none}ul.lst-kix_iqyc5gy523tq-3{list-style-type:none}ol.lst-kix_uq748w6pjv3r-4.start{counter-reset:lst-ctn-kix_uq748w6pjv3r-4 0}ul.lst-kix_iqyc5gy523tq-6{list-style-type:none}.lst-kix_8uscekru9dbw-7>li:before{content:"" counter(lst-ctn-kix_8uscekru9dbw-7,lower-latin) ". "}.lst-kix_q1b5wk7cmirb-3>li:before{content:"\0025cf "}ul.lst-kix_iqyc5gy523tq-5{list-style-type:none}ul.lst-kix_iqyc5gy523tq-8{list-style-type:none}.lst-kix_iqyc5gy523tq-7>li:before{content:"\0025cb "}ul.lst-kix_iqyc5gy523tq-7{list-style-type:none}.lst-kix_pa6lflf2amnu-5>li:before{content:"" counter(lst-ctn-kix_pa6lflf2amnu-5,lower-roman) ". "}.lst-kix_57tjkabqizo2-6>li{counter-increment:lst-ctn-kix_57tjkabqizo2-6}ul.lst-kix_iqyc5gy523tq-1{list-style-type:none}.lst-kix_opzlp0rjj486-0>li{counter-increment:lst-ctn-kix_opzlp0rjj486-0}ul.lst-kix_iqyc5gy523tq-2{list-style-type:none}.lst-kix_jzpgxqq6fzzf-6>li{counter-increment:lst-ctn-kix_jzpgxqq6fzzf-6}ul.lst-kix_iqyc5gy523tq-0{list-style-type:none}.lst-kix_m1x0qzeeadaz-1>li:before{content:"" counter(lst-ctn-kix_m1x0qzeeadaz-1,lower-latin) ". "}ol.lst-kix_8dg0b92yw51r-1.start{counter-reset:lst-ctn-kix_8dg0b92yw51r-1 0}.lst-kix_t9jkz28ln50j-2>li:before{content:"" counter(lst-ctn-kix_t9jkz28ln50j-2,lower-roman) ". "}.lst-kix_kc6aimw8pnra-4>li:before{content:"\0025cb "}ol.lst-kix_m1x0qzeeadaz-0.start{counter-reset:lst-ctn-kix_m1x0qzeeadaz-0 0}.lst-kix_m8zky1oy6k60-1>li{counter-increment:lst-ctn-kix_m8zky1oy6k60-1}.lst-kix_ggm78fckav5h-2>li{counter-increment:lst-ctn-kix_ggm78fckav5h-2}ol.lst-kix_z7in7d1ar2zt-8.start{counter-reset:lst-ctn-kix_z7in7d1ar2zt-8 0}.lst-kix_1c0w7icorqz1-5>li{counter-increment:lst-ctn-kix_1c0w7icorqz1-5}ol.lst-kix_kvgsl0s9rzo4-0.start{counter-reset:lst-ctn-kix_kvgsl0s9rzo4-0 0}ol.lst-kix_opzlp0rjj486-4.start{counter-reset:lst-ctn-kix_opzlp0rjj486-4 0}ol.lst-kix_2uog6ch44jpu-0.start{counter-reset:lst-ctn-kix_2uog6ch44jpu-0 0}.lst-kix_1c0w7icorqz1-1>li:before{content:"" counter(lst-ctn-kix_1c0w7icorqz1-1,lower-latin) ". "}.lst-kix_m1x0qzeeadaz-6>li{counter-increment:lst-ctn-kix_m1x0qzeeadaz-6}ol.lst-kix_uq748w6pjv3r-2{list-style-type:none}.lst-kix_wzk0mdv2qg9u-6>li:before{content:"" counter(lst-ctn-kix_wzk0mdv2qg9u-6,decimal) ". "}ol.lst-kix_uq748w6pjv3r-3{list-style-type:none}.lst-kix_kf08e4mo0q15-8>li:before{content:"" counter(lst-ctn-kix_kf08e4mo0q15-8,lower-roman) ". "}ol.lst-kix_uq748w6pjv3r-4{list-style-type:none}ol.lst-kix_uq748w6pjv3r-5{list-style-type:none}ol.lst-kix_uq748w6pjv3r-6{list-style-type:none}ol.lst-kix_7kmxmbi2lsws-8.start{counter-reset:lst-ctn-kix_7kmxmbi2lsws-8 0}ol.lst-kix_uq748w6pjv3r-7{list-style-type:none}ol.lst-kix_uq748w6pjv3r-8{list-style-type:none}.lst-kix_v454r7upbzuz-1>li{counter-increment:lst-ctn-kix_v454r7upbzuz-1}.lst-kix_lgtbofvz5zxd-4>li{counter-increment:lst-ctn-kix_lgtbofvz5zxd-4}ol.lst-kix_uq748w6pjv3r-0{list-style-type:none}ol.lst-kix_v454r7upbzuz-4.start{counter-reset:lst-ctn-kix_v454r7upbzuz-4 0}ol.lst-kix_uq748w6pjv3r-1{list-style-type:none}ol.lst-kix_qeukrmzdd856-1.start{counter-reset:lst-ctn-kix_qeukrmzdd856-1 0}ol.lst-kix_pyiocxf7nngd-3.start{counter-reset:lst-ctn-kix_pyiocxf7nngd-3 0}ol.lst-kix_jxeur1wnlj7y-3.start{counter-reset:lst-ctn-kix_jxeur1wnlj7y-3 0}ol.lst-kix_j51xhhtple7c-8.start{counter-reset:lst-ctn-kix_j51xhhtple7c-8 0}.lst-kix_2uog6ch44jpu-4>li{counter-increment:lst-ctn-kix_2uog6ch44jpu-4}.lst-kix_v454r7upbzuz-8>li:before{content:"" counter(lst-ctn-kix_v454r7upbzuz-8,lower-roman) ". "}ul.lst-kix_fpxsljpyl73u-6{list-style-type:none}ul.lst-kix_fpxsljpyl73u-7{list-style-type:none}ul.lst-kix_fpxsljpyl73u-4{list-style-type:none}ul.lst-kix_fpxsljpyl73u-5{list-style-type:none}ol.lst-kix_3h1iswqv3l7s-3.start{counter-reset:lst-ctn-kix_3h1iswqv3l7s-3 0}ul.lst-kix_fpxsljpyl73u-2{list-style-type:none}ul.lst-kix_fpxsljpyl73u-3{list-style-type:none}ol.lst-kix_8dg0b92yw51r-2.start{counter-reset:lst-ctn-kix_8dg0b92yw51r-2 0}ul.lst-kix_fpxsljpyl73u-0{list-style-type:none}ul.lst-kix_fpxsljpyl73u-1{list-style-type:none}.lst-kix_pyiocxf7nngd-1>li:before{content:"" counter(lst-ctn-kix_pyiocxf7nngd-1,lower-latin) ". "}ul.lst-kix_fpxsljpyl73u-8{list-style-type:none}.lst-kix_bnpbicbhbbru-6>li:before{content:"\0025cf "}.lst-kix_bnpbicbhbbru-3>li:before{content:"\0025cf "}.lst-kix_bnpbicbhbbru-4>li:before{content:"\0025cb "}ol.lst-kix_jxeur1wnlj7y-1.start{counter-reset:lst-ctn-kix_jxeur1wnlj7y-1 0}.lst-kix_jxeur1wnlj7y-3>li:before{content:"" counter(lst-ctn-kix_jxeur1wnlj7y-3,decimal) ". "}ol.lst-kix_pyiocxf7nngd-2.start{counter-reset:lst-ctn-kix_pyiocxf7nngd-2 0}.lst-kix_2uog6ch44jpu-1>li:before{content:"" counter(lst-ctn-kix_2uog6ch44jpu-1,lower-latin) ". "}.lst-kix_z7in7d1ar2zt-1>li:before{content:"" counter(lst-ctn-kix_z7in7d1ar2zt-1,lower-latin) ". "}ol.lst-kix_fr6w5z45nvx0-8.start{counter-reset:lst-ctn-kix_fr6w5z45nvx0-8 0}.lst-kix_qeukrmzdd856-1>li:before{content:"" counter(lst-ctn-kix_qeukrmzdd856-1,lower-latin) ". "}ol.lst-kix_hvjet9voiiio-5.start{counter-reset:lst-ctn-kix_hvjet9voiiio-5 0}.lst-kix_a4uqy1hx9g3-5>li:before{content:"\0025a0 "}.lst-kix_57tjkabqizo2-1>li:before{content:"" counter(lst-ctn-kix_57tjkabqizo2-1,lower-latin) ". "}ol.lst-kix_uq748w6pjv3r-0.start{counter-reset:lst-ctn-kix_uq748w6pjv3r-0 0}.lst-kix_vnvg10gwrc8t-6>li{counter-increment:lst-ctn-kix_vnvg10gwrc8t-6}ol.lst-kix_1g0xzctl1vi-8.start{counter-reset:lst-ctn-kix_1g0xzctl1vi-8 0}.lst-kix_9tkaqbe3bnu3-6>li:before{content:"" counter(lst-ctn-kix_9tkaqbe3bnu3-6,decimal) ". "}ul.lst-kix_t7any4lo9hoq-1{list-style-type:none}ul.lst-kix_t7any4lo9hoq-0{list-style-type:none}ol.lst-kix_dblgil8t24zy-3.start{counter-reset:lst-ctn-kix_dblgil8t24zy-3 0}ol.lst-kix_t9jkz28ln50j-8{list-style-type:none}ul.lst-kix_t7any4lo9hoq-8{list-style-type:none}ul.lst-kix_t7any4lo9hoq-6{list-style-type:none}ol.lst-kix_j51xhhtple7c-5.start{counter-reset:lst-ctn-kix_j51xhhtple7c-5 0}ul.lst-kix_t7any4lo9hoq-7{list-style-type:none}ol.lst-kix_t9jkz28ln50j-4{list-style-type:none}ul.lst-kix_t7any4lo9hoq-4{list-style-type:none}.lst-kix_5f9palqqt4mm-7>li:before{content:"" counter(lst-ctn-kix_5f9palqqt4mm-7,lower-latin) ". "}ol.lst-kix_t9jkz28ln50j-5{list-style-type:none}ul.lst-kix_t7any4lo9hoq-5{list-style-type:none}.lst-kix_vnvg10gwrc8t-3>li:before{content:"" counter(lst-ctn-kix_vnvg10gwrc8t-3,decimal) ". "}ol.lst-kix_t9jkz28ln50j-6{list-style-type:none}ul.lst-kix_t7any4lo9hoq-2{list-style-type:none}ol.lst-kix_t9jkz28ln50j-7{list-style-type:none}ul.lst-kix_t7any4lo9hoq-3{list-style-type:none}ol.lst-kix_jzpgxqq6fzzf-5{list-style-type:none}ol.lst-kix_jzpgxqq6fzzf-4{list-style-type:none}ol.lst-kix_jzpgxqq6fzzf-3{list-style-type:none}ol.lst-kix_jzpgxqq6fzzf-2{list-style-type:none}ol.lst-kix_jzpgxqq6fzzf-8{list-style-type:none}ol.lst-kix_jzpgxqq6fzzf-7{list-style-type:none}ol.lst-kix_jzpgxqq6fzzf-6{list-style-type:none}.lst-kix_qeukrmzdd856-6>li{counter-increment:lst-ctn-kix_qeukrmzdd856-6}.lst-kix_nhaic9xr6pf-4>li{counter-increment:lst-ctn-kix_nhaic9xr6pf-4}ol.lst-kix_t9jkz28ln50j-1{list-style-type:none}ol.lst-kix_t9jkz28ln50j-0{list-style-type:none}ol.lst-kix_t9jkz28ln50j-3{list-style-type:none}.lst-kix_lgtbofvz5zxd-2>li:before{content:"" counter(lst-ctn-kix_lgtbofvz5zxd-2,lower-roman) ". "}ol.lst-kix_t9jkz28ln50j-2{list-style-type:none}.lst-kix_hvjet9voiiio-2>li{counter-increment:lst-ctn-kix_hvjet9voiiio-2}.lst-kix_juntnht2kzza-6>li{counter-increment:lst-ctn-kix_juntnht2kzza-6}.lst-kix_nho7sy6cpfv0-6>li:before{content:"" counter(lst-ctn-kix_nho7sy6cpfv0-6,decimal) ". "}.lst-kix_m8zky1oy6k60-8>li:before{content:"" counter(lst-ctn-kix_m8zky1oy6k60-8,lower-roman) ". "}ol.lst-kix_uq748w6pjv3r-6.start{counter-reset:lst-ctn-kix_uq748w6pjv3r-6 0}ul.lst-kix_q1b5wk7cmirb-3{list-style-type:none}ul.lst-kix_q1b5wk7cmirb-2{list-style-type:none}ul.lst-kix_q1b5wk7cmirb-5{list-style-type:none}ul.lst-kix_q1b5wk7cmirb-4{list-style-type:none}ul.lst-kix_q1b5wk7cmirb-7{list-style-type:none}ul.lst-kix_q1b5wk7cmirb-6{list-style-type:none}ul.lst-kix_q1b5wk7cmirb-8{list-style-type:none}.lst-kix_a4uqy1hx9g3-3>li:before{content:"\0025cf "}ol.lst-kix_hm47sef7muk-3.start{counter-reset:lst-ctn-kix_hm47sef7muk-3 0}ol.lst-kix_9tkaqbe3bnu3-3.start{counter-reset:lst-ctn-kix_9tkaqbe3bnu3-3 0}.lst-kix_nho7sy6cpfv0-2>li:before{content:"" counter(lst-ctn-kix_nho7sy6cpfv0-2,lower-roman) ". "}.lst-kix_nhaic9xr6pf-8>li{counter-increment:lst-ctn-kix_nhaic9xr6pf-8}ol.lst-kix_opzlp0rjj486-5.start{counter-reset:lst-ctn-kix_opzlp0rjj486-5 0}ol.lst-kix_opzlp0rjj486-3.start{counter-reset:lst-ctn-kix_opzlp0rjj486-3 0}.lst-kix_pa6lflf2amnu-3>li{counter-increment:lst-ctn-kix_pa6lflf2amnu-3}.lst-kix_1c0w7icorqz1-0>li{counter-increment:lst-ctn-kix_1c0w7icorqz1-0}ol.lst-kix_juntnht2kzza-8{list-style-type:none}.lst-kix_z7in7d1ar2zt-3>li:before{content:"" counter(lst-ctn-kix_z7in7d1ar2zt-3,decimal) ". "}.lst-kix_wzk0mdv2qg9u-0>li:before{content:"" counter(lst-ctn-kix_wzk0mdv2qg9u-0,decimal) ". "}.lst-kix_m1x0qzeeadaz-2>li{counter-increment:lst-ctn-kix_m1x0qzeeadaz-2}ol.lst-kix_fr6w5z45nvx0-4{list-style-type:none}ol.lst-kix_fr6w5z45nvx0-5{list-style-type:none}ol.lst-kix_fr6w5z45nvx0-6{list-style-type:none}ol.lst-kix_fr6w5z45nvx0-7{list-style-type:none}ol.lst-kix_fr6w5z45nvx0-8{list-style-type:none}ol.lst-kix_juntnht2kzza-1{list-style-type:none}ol.lst-kix_juntnht2kzza-0{list-style-type:none}ol.lst-kix_juntnht2kzza-3{list-style-type:none}ol.lst-kix_juntnht2kzza-2{list-style-type:none}ol.lst-kix_juntnht2kzza-5{list-style-type:none}ol.lst-kix_juntnht2kzza-4{list-style-type:none}ol.lst-kix_juntnht2kzza-7{list-style-type:none}ol.lst-kix_juntnht2kzza-6{list-style-type:none}ol.lst-kix_lgtbofvz5zxd-5.start{counter-reset:lst-ctn-kix_lgtbofvz5zxd-5 0}.lst-kix_32zxnvl59py3-5>li{counter-increment:lst-ctn-kix_32zxnvl59py3-5}ol.lst-kix_fr6w5z45nvx0-1{list-style-type:none}ol.lst-kix_fr6w5z45nvx0-0{list-style-type:none}ol.lst-kix_fr6w5z45nvx0-3{list-style-type:none}ol.lst-kix_fr6w5z45nvx0-2{list-style-type:none}.lst-kix_wzk0mdv2qg9u-5>li:before{content:"" counter(lst-ctn-kix_wzk0mdv2qg9u-5,lower-roman) ". "}.lst-kix_kf08e4mo0q15-5>li{counter-increment:lst-ctn-kix_kf08e4mo0q15-5}.lst-kix_8uscekru9dbw-3>li:before{content:"" counter(lst-ctn-kix_8uscekru9dbw-3,decimal) ". "}ol.lst-kix_qeukrmzdd856-2.start{counter-reset:lst-ctn-kix_qeukrmzdd856-2 0}ol.lst-kix_qz5wp1hdd24k-4.start{counter-reset:lst-ctn-kix_qz5wp1hdd24k-4 0}ul.lst-kix_q1b5wk7cmirb-0{list-style-type:none}ul.lst-kix_q1b5wk7cmirb-1{list-style-type:none}ol.lst-kix_dblgil8t24zy-4.start{counter-reset:lst-ctn-kix_dblgil8t24zy-4 0}ol.lst-kix_3h1iswqv3l7s-2.start{counter-reset:lst-ctn-kix_3h1iswqv3l7s-2 0}ol.lst-kix_lixznqbqiris-8.start{counter-reset:lst-ctn-kix_lixznqbqiris-8 0}ol.lst-kix_m1x0qzeeadaz-2.start{counter-reset:lst-ctn-kix_m1x0qzeeadaz-2 0}ol.lst-kix_1c0w7icorqz1-3.start{counter-reset:lst-ctn-kix_1c0w7icorqz1-3 0}.lst-kix_8dg0b92yw51r-1>li{counter-increment:lst-ctn-kix_8dg0b92yw51r-1}.lst-kix_a4uqy1hx9g3-4>li:before{content:"\0025cb "}ol.lst-kix_pyiocxf7nngd-8.start{counter-reset:lst-ctn-kix_pyiocxf7nngd-8 0}.lst-kix_60g29afx0lof-0>li{counter-increment:lst-ctn-kix_60g29afx0lof-0}.lst-kix_uq748w6pjv3r-2>li{counter-increment:lst-ctn-kix_uq748w6pjv3r-2}.lst-kix_jpf3cr7xe1pc-6>li{counter-increment:lst-ctn-kix_jpf3cr7xe1pc-6}ol.lst-kix_lgtbofvz5zxd-2.start{counter-reset:lst-ctn-kix_lgtbofvz5zxd-2 0}.lst-kix_jxeur1wnlj7y-0>li:before{content:"" counter(lst-ctn-kix_jxeur1wnlj7y-0,decimal) ". "}.lst-kix_fr6w5z45nvx0-1>li:before{content:"" counter(lst-ctn-kix_fr6w5z45nvx0-1,lower-latin) ". "}.lst-kix_jpf3cr7xe1pc-8>li:before{content:"" counter(lst-ctn-kix_jpf3cr7xe1pc-8,lower-roman) ". "}.lst-kix_jxeur1wnlj7y-2>li:before{content:"" counter(lst-ctn-kix_jxeur1wnlj7y-2,lower-roman) ". "}.lst-kix_4s9m9sikrtm7-1>li:before{content:"" counter(lst-ctn-kix_4s9m9sikrtm7-1,lower-latin) ". "}.lst-kix_lgtbofvz5zxd-8>li:before{content:"" counter(lst-ctn-kix_lgtbofvz5zxd-8,lower-roman) ". "}.lst-kix_5f9palqqt4mm-6>li{counter-increment:lst-ctn-kix_5f9palqqt4mm-6}ol.lst-kix_m1x0qzeeadaz-1{list-style-type:none}ol.lst-kix_m1x0qzeeadaz-0{list-style-type:none}.lst-kix_lixznqbqiris-3>li:before{content:"" counter(lst-ctn-kix_lixznqbqiris-3,decimal) ". "}ol.lst-kix_m1x0qzeeadaz-5{list-style-type:none}ol.lst-kix_m1x0qzeeadaz-4{list-style-type:none}.lst-kix_kf08e4mo0q15-8>li{counter-increment:lst-ctn-kix_kf08e4mo0q15-8}ol.lst-kix_m1x0qzeeadaz-3{list-style-type:none}ol.lst-kix_jxeur1wnlj7y-6.start{counter-reset:lst-ctn-kix_jxeur1wnlj7y-6 0}.lst-kix_9tkaqbe3bnu3-1>li{counter-increment:lst-ctn-kix_9tkaqbe3bnu3-1}ol.lst-kix_m1x0qzeeadaz-2{list-style-type:none}.lst-kix_hm47sef7muk-2>li:before{content:"" counter(lst-ctn-kix_hm47sef7muk-2,lower-roman) ". "}.lst-kix_sgsi64vug03j-5>li{counter-increment:lst-ctn-kix_sgsi64vug03j-5}ol.lst-kix_2uog6ch44jpu-4.start{counter-reset:lst-ctn-kix_2uog6ch44jpu-4 0}.lst-kix_9tkaqbe3bnu3-3>li:before{content:"" counter(lst-ctn-kix_9tkaqbe3bnu3-3,decimal) ". "}ol.lst-kix_8dg0b92yw51r-6.start{counter-reset:lst-ctn-kix_8dg0b92yw51r-6 0}ol.lst-kix_jzpgxqq6fzzf-2.start{counter-reset:lst-ctn-kix_jzpgxqq6fzzf-2 0}ol.lst-kix_1gqf2s78t7o1-6.start{counter-reset:lst-ctn-kix_1gqf2s78t7o1-6 0}.lst-kix_32zxnvl59py3-2>li:before{content:"" counter(lst-ctn-kix_32zxnvl59py3-2,lower-roman) ". "}.lst-kix_juntnht2kzza-0>li:before{content:"" counter(lst-ctn-kix_juntnht2kzza-0,decimal) ". "}.lst-kix_jpf3cr7xe1pc-0>li:before{content:"" counter(lst-ctn-kix_jpf3cr7xe1pc-0,decimal) ". "}ol.lst-kix_pza3ybm1wtg3-3.start{counter-reset:lst-ctn-kix_pza3ybm1wtg3-3 0}.lst-kix_60g29afx0lof-6>li:before{content:"" counter(lst-ctn-kix_60g29afx0lof-6,decimal) ". "}.lst-kix_j51xhhtple7c-0>li{counter-increment:lst-ctn-kix_j51xhhtple7c-0}ol.lst-kix_m1x0qzeeadaz-6{list-style-type:none}.lst-kix_pa6lflf2amnu-8>li{counter-increment:lst-ctn-kix_pa6lflf2amnu-8}.lst-kix_nho7sy6cpfv0-8>li{counter-increment:lst-ctn-kix_nho7sy6cpfv0-8}ol.lst-kix_m1x0qzeeadaz-7{list-style-type:none}ol.lst-kix_m1x0qzeeadaz-8{list-style-type:none}.lst-kix_nho7sy6cpfv0-2>li{counter-increment:lst-ctn-kix_nho7sy6cpfv0-2}ol.lst-kix_pyiocxf7nngd-4.start{counter-reset:lst-ctn-kix_pyiocxf7nngd-4 0}.lst-kix_pza3ybm1wtg3-3>li{counter-increment:lst-ctn-kix_pza3ybm1wtg3-3}ol.lst-kix_qz5wp1hdd24k-1.start{counter-reset:lst-ctn-kix_qz5wp1hdd24k-1 0}ol.lst-kix_jxeur1wnlj7y-2.start{counter-reset:lst-ctn-kix_jxeur1wnlj7y-2 0}.lst-kix_i2v077rod1nx-1>li:before{content:"\0025cb "}.lst-kix_5f9palqqt4mm-3>li{counter-increment:lst-ctn-kix_5f9palqqt4mm-3}.lst-kix_pa6lflf2amnu-4>li:before{content:"" counter(lst-ctn-kix_pa6lflf2amnu-4,lower-latin) ". "}.lst-kix_pyiocxf7nngd-7>li{counter-increment:lst-ctn-kix_pyiocxf7nngd-7}.lst-kix_kvgsl0s9rzo4-0>li{counter-increment:lst-ctn-kix_kvgsl0s9rzo4-0}.lst-kix_1g0xzctl1vi-7>li:before{content:"" counter(lst-ctn-kix_1g0xzctl1vi-7,lower-latin) ". "}.lst-kix_opzlp0rjj486-8>li:before{content:"" counter(lst-ctn-kix_opzlp0rjj486-8,lower-roman) ". "}ol.lst-kix_juntnht2kzza-6.start{counter-reset:lst-ctn-kix_juntnht2kzza-6 0}.lst-kix_uq748w6pjv3r-5>li:before{content:"" counter(lst-ctn-kix_uq748w6pjv3r-5,lower-roman) ". "}ol.lst-kix_hm47sef7muk-6.start{counter-reset:lst-ctn-kix_hm47sef7muk-6 0}.lst-kix_jxeur1wnlj7y-5>li{counter-increment:lst-ctn-kix_jxeur1wnlj7y-5}.lst-kix_vvzditg8sno-6>li:before{content:"\0025cf "}.lst-kix_5f9palqqt4mm-7>li{counter-increment:lst-ctn-kix_5f9palqqt4mm-7}ol.lst-kix_9tkaqbe3bnu3-7.start{counter-reset:lst-ctn-kix_9tkaqbe3bnu3-7 0}ol.lst-kix_32zxnvl59py3-3.start{counter-reset:lst-ctn-kix_32zxnvl59py3-3 0}.lst-kix_kc6aimw8pnra-0>li:before{content:"\0025cf "}.lst-kix_7kmxmbi2lsws-5>li:before{content:"" counter(lst-ctn-kix_7kmxmbi2lsws-5,lower-roman) ". "}.lst-kix_ggm78fckav5h-7>li{counter-increment:lst-ctn-kix_ggm78fckav5h-7}ol.lst-kix_lixznqbqiris-0.start{counter-reset:lst-ctn-kix_lixznqbqiris-0 0}ol.lst-kix_t9jkz28ln50j-5.start{counter-reset:lst-ctn-kix_t9jkz28ln50j-5 0}.lst-kix_ffvvlgzbuz30-5>li:before{content:"\0025a0 "}.lst-kix_kvgsl0s9rzo4-2>li{counter-increment:lst-ctn-kix_kvgsl0s9rzo4-2}.lst-kix_jxeur1wnlj7y-7>li:before{content:"" counter(lst-ctn-kix_jxeur1wnlj7y-7,lower-latin) ". "}ol.lst-kix_7kmxmbi2lsws-1.start{counter-reset:lst-ctn-kix_7kmxmbi2lsws-1 0}.lst-kix_dblgil8t24zy-1>li{counter-increment:lst-ctn-kix_dblgil8t24zy-1}ol.lst-kix_m8zky1oy6k60-8{list-style-type:none}ol.lst-kix_m8zky1oy6k60-7{list-style-type:none}ol.lst-kix_ggm78fckav5h-4.start{counter-reset:lst-ctn-kix_ggm78fckav5h-4 0}ol.lst-kix_m8zky1oy6k60-6{list-style-type:none}ol.lst-kix_m8zky1oy6k60-5{list-style-type:none}ol.lst-kix_m8zky1oy6k60-4{list-style-type:none}ol.lst-kix_m8zky1oy6k60-3{list-style-type:none}.lst-kix_hvjet9voiiio-7>li:before{content:"" counter(lst-ctn-kix_hvjet9voiiio-7,lower-latin) ". "}ol.lst-kix_m8zky1oy6k60-2{list-style-type:none}ol.lst-kix_m8zky1oy6k60-1{list-style-type:none}ol.lst-kix_m8zky1oy6k60-0{list-style-type:none}.lst-kix_hm47sef7muk-0>li{counter-increment:lst-ctn-kix_hm47sef7muk-0}.lst-kix_oqqzpe3b3nud-3>li:before{content:"" counter(lst-ctn-kix_oqqzpe3b3nud-3,decimal) ". "}.lst-kix_iqyc5gy523tq-6>li:before{content:"\0025cf "}.lst-kix_qz5wp1hdd24k-0>li:before{content:"" counter(lst-ctn-kix_qz5wp1hdd24k-0,decimal) ". "}.lst-kix_hm47sef7muk-4>li:before{content:"" counter(lst-ctn-kix_hm47sef7muk-4,lower-latin) ". "}.lst-kix_lixznqbqiris-0>li:before{content:"" counter(lst-ctn-kix_lixznqbqiris-0,decimal) ". "}ol.lst-kix_60g29afx0lof-1.start{counter-reset:lst-ctn-kix_60g29afx0lof-1 0}.lst-kix_sgsi64vug03j-0>li:before{content:"" counter(lst-ctn-kix_sgsi64vug03j-0,decimal) ". "}.lst-kix_q1b5wk7cmirb-5>li:before{content:"\0025a0 "}.lst-kix_uq748w6pjv3r-1>li{counter-increment:lst-ctn-kix_uq748w6pjv3r-1}.lst-kix_t9jkz28ln50j-3>li:before{content:"" counter(lst-ctn-kix_t9jkz28ln50j-3,decimal) ". "}ol.lst-kix_5f9palqqt4mm-8.start{counter-reset:lst-ctn-kix_5f9palqqt4mm-8 0}ol.lst-kix_v454r7upbzuz-2.start{counter-reset:lst-ctn-kix_v454r7upbzuz-2 0}.lst-kix_1g0xzctl1vi-3>li{counter-increment:lst-ctn-kix_1g0xzctl1vi-3}.lst-kix_t7any4lo9hoq-7>li:before{content:"\0025cb "}.lst-kix_qeukrmzdd856-4>li:before{content:"" counter(lst-ctn-kix_qeukrmzdd856-4,lower-latin) ". "}ol.lst-kix_3h1iswqv3l7s-6.start{counter-reset:lst-ctn-kix_3h1iswqv3l7s-6 0}.lst-kix_9tkaqbe3bnu3-4>li{counter-increment:lst-ctn-kix_9tkaqbe3bnu3-4}.lst-kix_4s9m9sikrtm7-1>li{counter-increment:lst-ctn-kix_4s9m9sikrtm7-1}ol.lst-kix_nhaic9xr6pf-1.start{counter-reset:lst-ctn-kix_nhaic9xr6pf-1 0}.lst-kix_t9jkz28ln50j-0>li{counter-increment:lst-ctn-kix_t9jkz28ln50j-0}.lst-kix_4s9m9sikrtm7-7>li:before{content:"" counter(lst-ctn-kix_4s9m9sikrtm7-7,lower-latin) ". "}.lst-kix_lixznqbqiris-2>li:before{content:"" counter(lst-ctn-kix_lixznqbqiris-2,lower-roman) ". "}.lst-kix_p8a3u4ougab9-3>li{counter-increment:lst-ctn-kix_p8a3u4ougab9-3}ul.lst-kix_ffvvlgzbuz30-2{list-style-type:none}ul.lst-kix_ffvvlgzbuz30-3{list-style-type:none}ul.lst-kix_ffvvlgzbuz30-0{list-style-type:none}ul.lst-kix_ffvvlgzbuz30-1{list-style-type:none}ul.lst-kix_ffvvlgzbuz30-6{list-style-type:none}.lst-kix_ffvvlgzbuz30-1>li:before{content:"\0025cb "}ul.lst-kix_ffvvlgzbuz30-7{list-style-type:none}ul.lst-kix_ffvvlgzbuz30-4{list-style-type:none}ul.lst-kix_ffvvlgzbuz30-5{list-style-type:none}ul.lst-kix_ffvvlgzbuz30-8{list-style-type:none}.lst-kix_uq748w6pjv3r-3>li:before{content:"" counter(lst-ctn-kix_uq748w6pjv3r-3,decimal) ". "}.lst-kix_q1b5wk7cmirb-0>li:before{content:"\0025cf "}.lst-kix_nhaic9xr6pf-1>li{counter-increment:lst-ctn-kix_nhaic9xr6pf-1}.lst-kix_5f9palqqt4mm-8>li:before{content:"" counter(lst-ctn-kix_5f9palqqt4mm-8,lower-roman) ". "}.lst-kix_60g29afx0lof-6>li{counter-increment:lst-ctn-kix_60g29afx0lof-6}.lst-kix_3h1iswqv3l7s-2>li{counter-increment:lst-ctn-kix_3h1iswqv3l7s-2}.lst-kix_m8zky1oy6k60-3>li{counter-increment:lst-ctn-kix_m8zky1oy6k60-3}.lst-kix_iqyc5gy523tq-2>li:before{content:"\0025a0 "}.lst-kix_fr6w5z45nvx0-3>li{counter-increment:lst-ctn-kix_fr6w5z45nvx0-3}.lst-kix_4s9m9sikrtm7-2>li{counter-increment:lst-ctn-kix_4s9m9sikrtm7-2}ol.lst-kix_7kmxmbi2lsws-7.start{counter-reset:lst-ctn-kix_7kmxmbi2lsws-7 0}.lst-kix_v454r7upbzuz-0>li:before{content:"" counter(lst-ctn-kix_v454r7upbzuz-0,decimal) ". "}.lst-kix_3h1iswqv3l7s-6>li{counter-increment:lst-ctn-kix_3h1iswqv3l7s-6}ol.lst-kix_pyiocxf7nngd-1.start{counter-reset:lst-ctn-kix_pyiocxf7nngd-1 0}.lst-kix_sgsi64vug03j-3>li{counter-increment:lst-ctn-kix_sgsi64vug03j-3}.lst-kix_hvjet9voiiio-4>li:before{content:"" counter(lst-ctn-kix_hvjet9voiiio-4,lower-latin) ". "}.lst-kix_m1x0qzeeadaz-7>li{counter-increment:lst-ctn-kix_m1x0qzeeadaz-7}.lst-kix_jxeur1wnlj7y-8>li:before{content:"" counter(lst-ctn-kix_jxeur1wnlj7y-8,lower-roman) ". "}.lst-kix_57tjkabqizo2-4>li{counter-increment:lst-ctn-kix_57tjkabqizo2-4}ol.lst-kix_lgtbofvz5zxd-6.start{counter-reset:lst-ctn-kix_lgtbofvz5zxd-6 0}ol.lst-kix_hm47sef7muk-5.start{counter-reset:lst-ctn-kix_hm47sef7muk-5 0}.lst-kix_qeukrmzdd856-2>li:before{content:"" counter(lst-ctn-kix_qeukrmzdd856-2,lower-roman) ". "}.lst-kix_57tjkabqizo2-5>li{counter-increment:lst-ctn-kix_57tjkabqizo2-5}.lst-kix_ggm78fckav5h-6>li{counter-increment:lst-ctn-kix_ggm78fckav5h-6}.lst-kix_jpf3cr7xe1pc-2>li:before{content:"" counter(lst-ctn-kix_jpf3cr7xe1pc-2,lower-roman) ". "}.lst-kix_1c0w7icorqz1-2>li:before{content:"" counter(lst-ctn-kix_1c0w7icorqz1-2,lower-roman) ". "}.lst-kix_hvjet9voiiio-6>li{counter-increment:lst-ctn-kix_hvjet9voiiio-6}ol.lst-kix_pa6lflf2amnu-3.start{counter-reset:lst-ctn-kix_pa6lflf2amnu-3 0}.lst-kix_1gqf2s78t7o1-3>li{counter-increment:lst-ctn-kix_1gqf2s78t7o1-3}ol.lst-kix_pza3ybm1wtg3-8.start{counter-reset:lst-ctn-kix_pza3ybm1wtg3-8 0}ol.lst-kix_1g0xzctl1vi-7.start{counter-reset:lst-ctn-kix_1g0xzctl1vi-7 0}.lst-kix_v454r7upbzuz-7>li:before{content:"" counter(lst-ctn-kix_v454r7upbzuz-7,lower-latin) ". "}.lst-kix_vnvg10gwrc8t-5>li{counter-increment:lst-ctn-kix_vnvg10gwrc8t-5}ol.lst-kix_kvgsl0s9rzo4-2.start{counter-reset:lst-ctn-kix_kvgsl0s9rzo4-2 0}ol.lst-kix_pza3ybm1wtg3-1.start{counter-reset:lst-ctn-kix_pza3ybm1wtg3-1 0}.lst-kix_p8a3u4ougab9-7>li{counter-increment:lst-ctn-kix_p8a3u4ougab9-7}.lst-kix_5f9palqqt4mm-5>li{counter-increment:lst-ctn-kix_5f9palqqt4mm-5}.lst-kix_8dg0b92yw51r-0>li:before{content:"" counter(lst-ctn-kix_8dg0b92yw51r-0,decimal) ". "}.lst-kix_3h1iswqv3l7s-4>li:before{content:"" counter(lst-ctn-kix_3h1iswqv3l7s-4,lower-latin) ". "}.lst-kix_fpxsljpyl73u-7>li:before{content:"\0025cb "}.lst-kix_m8zky1oy6k60-6>li{counter-increment:lst-ctn-kix_m8zky1oy6k60-6}.lst-kix_1g0xzctl1vi-5>li{counter-increment:lst-ctn-kix_1g0xzctl1vi-5}ol.lst-kix_hvjet9voiiio-8.start{counter-reset:lst-ctn-kix_hvjet9voiiio-8 0}ol.lst-kix_dblgil8t24zy-5{list-style-type:none}ol.lst-kix_dblgil8t24zy-4{list-style-type:none}ol.lst-kix_dblgil8t24zy-3{list-style-type:none}ol.lst-kix_dblgil8t24zy-2{list-style-type:none}ol.lst-kix_dblgil8t24zy-1{list-style-type:none}ol.lst-kix_dblgil8t24zy-0{list-style-type:none}.lst-kix_pza3ybm1wtg3-1>li{counter-increment:lst-ctn-kix_pza3ybm1wtg3-1}.lst-kix_qeukrmzdd856-8>li:before{content:"" counter(lst-ctn-kix_qeukrmzdd856-8,lower-roman) ". "}.lst-kix_wzk0mdv2qg9u-4>li:before{content:"" counter(lst-ctn-kix_wzk0mdv2qg9u-4,lower-latin) ". "}.lst-kix_j51xhhtple7c-5>li{counter-increment:lst-ctn-kix_j51xhhtple7c-5}.lst-kix_juntnht2kzza-8>li:before{content:"" counter(lst-ctn-kix_juntnht2kzza-8,lower-roman) ". "}.lst-kix_opzlp0rjj486-5>li{counter-increment:lst-ctn-kix_opzlp0rjj486-5}.lst-kix_kf08e4mo0q15-4>li:before{content:"" counter(lst-ctn-kix_kf08e4mo0q15-4,lower-latin) ". "}ol.lst-kix_dblgil8t24zy-8{list-style-type:none}.lst-kix_m8zky1oy6k60-1>li:before{content:"" counter(lst-ctn-kix_m8zky1oy6k60-1,lower-latin) ". "}ol.lst-kix_dblgil8t24zy-7{list-style-type:none}ol.lst-kix_dblgil8t24zy-6{list-style-type:none}.lst-kix_ggm78fckav5h-1>li{counter-increment:lst-ctn-kix_ggm78fckav5h-1}.lst-kix_ggm78fckav5h-8>li:before{content:"" counter(lst-ctn-kix_ggm78fckav5h-8,lower-roman) ". "}.lst-kix_kvgsl0s9rzo4-4>li{counter-increment:lst-ctn-kix_kvgsl0s9rzo4-4}ol.lst-kix_fr6w5z45nvx0-7.start{counter-reset:lst-ctn-kix_fr6w5z45nvx0-7 0}.lst-kix_jpf3cr7xe1pc-5>li:before{content:"" counter(lst-ctn-kix_jpf3cr7xe1pc-5,lower-roman) ". "}.lst-kix_jpf3cr7xe1pc-3>li:before{content:"" counter(lst-ctn-kix_jpf3cr7xe1pc-3,decimal) ". "}.lst-kix_7kmxmbi2lsws-4>li{counter-increment:lst-ctn-kix_7kmxmbi2lsws-4}ol.lst-kix_7kmxmbi2lsws-3.start{counter-reset:lst-ctn-kix_7kmxmbi2lsws-3 0}.lst-kix_2uog6ch44jpu-7>li:before{content:"" counter(lst-ctn-kix_2uog6ch44jpu-7,lower-latin) ". "}.lst-kix_4s9m9sikrtm7-6>li:before{content:"" counter(lst-ctn-kix_4s9m9sikrtm7-6,decimal) ". "}ol.lst-kix_9tkaqbe3bnu3-8.start{counter-reset:lst-ctn-kix_9tkaqbe3bnu3-8 0}ol.lst-kix_1gqf2s78t7o1-7.start{counter-reset:lst-ctn-kix_1gqf2s78t7o1-7 0}ol.lst-kix_hm47sef7muk-1.start{counter-reset:lst-ctn-kix_hm47sef7muk-1 0}.lst-kix_fr6w5z45nvx0-8>li{counter-increment:lst-ctn-kix_fr6w5z45nvx0-8}.lst-kix_kf08e4mo0q15-4>li{counter-increment:lst-ctn-kix_kf08e4mo0q15-4}ol.lst-kix_pa6lflf2amnu-6.start{counter-reset:lst-ctn-kix_pa6lflf2amnu-6 0}ol.lst-kix_oqqzpe3b3nud-7.start{counter-reset:lst-ctn-kix_oqqzpe3b3nud-7 0}ol.lst-kix_1c0w7icorqz1-0{list-style-type:none}ol.lst-kix_1c0w7icorqz1-1{list-style-type:none}.lst-kix_57tjkabqizo2-0>li:before{content:"" counter(lst-ctn-kix_57tjkabqizo2-0,decimal) ". "}ol.lst-kix_1c0w7icorqz1-8{list-style-type:none}.lst-kix_sgsi64vug03j-4>li{counter-increment:lst-ctn-kix_sgsi64vug03j-4}ol.lst-kix_1c0w7icorqz1-6{list-style-type:none}ol.lst-kix_1c0w7icorqz1-7{list-style-type:none}.lst-kix_juntnht2kzza-0>li{counter-increment:lst-ctn-kix_juntnht2kzza-0}ol.lst-kix_1c0w7icorqz1-4{list-style-type:none}ol.lst-kix_1c0w7icorqz1-5{list-style-type:none}ol.lst-kix_1c0w7icorqz1-2{list-style-type:none}ol.lst-kix_1c0w7icorqz1-3{list-style-type:none}ol.lst-kix_p8a3u4ougab9-3.start{counter-reset:lst-ctn-kix_p8a3u4ougab9-3 0}.lst-kix_9tkaqbe3bnu3-0>li:before{content:"" counter(lst-ctn-kix_9tkaqbe3bnu3-0,decimal) ". "}ol.lst-kix_ggm78fckav5h-3.start{counter-reset:lst-ctn-kix_ggm78fckav5h-3 0}.lst-kix_jxeur1wnlj7y-2>li{counter-increment:lst-ctn-kix_jxeur1wnlj7y-2}.lst-kix_pza3ybm1wtg3-6>li{counter-increment:lst-ctn-kix_pza3ybm1wtg3-6}.lst-kix_t9jkz28ln50j-8>li{counter-increment:lst-ctn-kix_t9jkz28ln50j-8}.lst-kix_1g0xzctl1vi-2>li:before{content:"" counter(lst-ctn-kix_1g0xzctl1vi-2,lower-roman) ". "}ol.lst-kix_8dg0b92yw51r-3.start{counter-reset:lst-ctn-kix_8dg0b92yw51r-3 0}.lst-kix_ffvvlgzbuz30-0>li:before{content:"\0025cf "}.lst-kix_pza3ybm1wtg3-2>li{counter-increment:lst-ctn-kix_pza3ybm1wtg3-2}.lst-kix_oqqzpe3b3nud-1>li{counter-increment:lst-ctn-kix_oqqzpe3b3nud-1}ol.lst-kix_1gqf2s78t7o1-0.start{counter-reset:lst-ctn-kix_1gqf2s78t7o1-0 0}.lst-kix_60g29afx0lof-2>li:before{content:"" counter(lst-ctn-kix_60g29afx0lof-2,lower-roman) ". "}ol.lst-kix_nho7sy6cpfv0-5.start{counter-reset:lst-ctn-kix_nho7sy6cpfv0-5 0}ol.lst-kix_jpf3cr7xe1pc-1.start{counter-reset:lst-ctn-kix_jpf3cr7xe1pc-1 0}.lst-kix_1gqf2s78t7o1-6>li{counter-increment:lst-ctn-kix_1gqf2s78t7o1-6}.lst-kix_60g29afx0lof-3>li{counter-increment:lst-ctn-kix_60g29afx0lof-3}.lst-kix_nhaic9xr6pf-6>li:before{content:"" counter(lst-ctn-kix_nhaic9xr6pf-6,decimal) ". "}.lst-kix_q1b5wk7cmirb-2>li:before{content:"\0025a0 "}.lst-kix_8uscekru9dbw-6>li:before{content:"" counter(lst-ctn-kix_8uscekru9dbw-6,decimal) ". "}.lst-kix_pza3ybm1wtg3-6>li:before{content:"" counter(lst-ctn-kix_pza3ybm1wtg3-6,decimal) ". "}.lst-kix_jxeur1wnlj7y-3>li{counter-increment:lst-ctn-kix_jxeur1wnlj7y-3}.lst-kix_wzk0mdv2qg9u-7>li{counter-increment:lst-ctn-kix_wzk0mdv2qg9u-7}.lst-kix_opzlp0rjj486-1>li:before{content:"" counter(lst-ctn-kix_opzlp0rjj486-1,lower-latin) ". "}ol.lst-kix_qeukrmzdd856-5.start{counter-reset:lst-ctn-kix_qeukrmzdd856-5 0}.lst-kix_8uscekru9dbw-6>li{counter-increment:lst-ctn-kix_8uscekru9dbw-6}.lst-kix_pyiocxf7nngd-0>li{counter-increment:lst-ctn-kix_pyiocxf7nngd-0}.lst-kix_juntnht2kzza-1>li:before{content:"" counter(lst-ctn-kix_juntnht2kzza-1,lower-latin) ". "}.lst-kix_5f9palqqt4mm-4>li:before{content:"" counter(lst-ctn-kix_5f9palqqt4mm-4,lower-latin) ". "}ol.lst-kix_v454r7upbzuz-7.start{counter-reset:lst-ctn-kix_v454r7upbzuz-7 0}.lst-kix_kc6aimw8pnra-2>li:before{content:"\0025a0 "}.lst-kix_nho7sy6cpfv0-7>li:before{content:"" counter(lst-ctn-kix_nho7sy6cpfv0-7,lower-latin) ". "}ol.lst-kix_m8zky1oy6k60-0.start{counter-reset:lst-ctn-kix_m8zky1oy6k60-0 0}.lst-kix_1gqf2s78t7o1-4>li:before{content:"" counter(lst-ctn-kix_1gqf2s78t7o1-4,lower-latin) ". "}.lst-kix_qeukrmzdd856-3>li:before{content:"" counter(lst-ctn-kix_qeukrmzdd856-3,decimal) ". "}ol.lst-kix_7kmxmbi2lsws-5.start{counter-reset:lst-ctn-kix_7kmxmbi2lsws-5 0}.lst-kix_m1x0qzeeadaz-4>li:before{content:"" counter(lst-ctn-kix_m1x0qzeeadaz-4,lower-latin) ". "}ol.lst-kix_kf08e4mo0q15-3.start{counter-reset:lst-ctn-kix_kf08e4mo0q15-3 0}.lst-kix_z7in7d1ar2zt-6>li:before{content:"" counter(lst-ctn-kix_z7in7d1ar2zt-6,decimal) ". "}ol.lst-kix_hvjet9voiiio-3.start{counter-reset:lst-ctn-kix_hvjet9voiiio-3 0}.lst-kix_vnvg10gwrc8t-4>li:before{content:"" counter(lst-ctn-kix_vnvg10gwrc8t-4,lower-latin) ". "}.lst-kix_juntnht2kzza-7>li:before{content:"" counter(lst-ctn-kix_juntnht2kzza-7,lower-latin) ". "}.lst-kix_ggm78fckav5h-7>li:before{content:"" counter(lst-ctn-kix_ggm78fckav5h-7,lower-latin) ". "}.lst-kix_t7any4lo9hoq-2>li:before{content:"\0025a0 "}.lst-kix_kvgsl0s9rzo4-8>li{counter-increment:lst-ctn-kix_kvgsl0s9rzo4-8}ol.lst-kix_oqqzpe3b3nud-1.start{counter-reset:lst-ctn-kix_oqqzpe3b3nud-1 0}.lst-kix_nho7sy6cpfv0-1>li{counter-increment:lst-ctn-kix_nho7sy6cpfv0-1}.lst-kix_1g0xzctl1vi-2>li{counter-increment:lst-ctn-kix_1g0xzctl1vi-2}.lst-kix_j51xhhtple7c-3>li:before{content:"" counter(lst-ctn-kix_j51xhhtple7c-3,decimal) ". "}.lst-kix_8dg0b92yw51r-5>li{counter-increment:lst-ctn-kix_8dg0b92yw51r-5}.lst-kix_vvzditg8sno-7>li:before{content:"\0025cb "}.lst-kix_8dg0b92yw51r-0>li{counter-increment:lst-ctn-kix_8dg0b92yw51r-0}.lst-kix_3h1iswqv3l7s-2>li:before{content:"" counter(lst-ctn-kix_3h1iswqv3l7s-2,lower-roman) ". "}.lst-kix_pa6lflf2amnu-5>li{counter-increment:lst-ctn-kix_pa6lflf2amnu-5}.lst-kix_hm47sef7muk-1>li:before{content:"" counter(lst-ctn-kix_hm47sef7muk-1,lower-latin) ". "}.lst-kix_32zxnvl59py3-1>li:before{content:"" counter(lst-ctn-kix_32zxnvl59py3-1,lower-latin) ". "}.lst-kix_oqqzpe3b3nud-7>li:before{content:"" counter(lst-ctn-kix_oqqzpe3b3nud-7,lower-latin) ". "}.lst-kix_uq748w6pjv3r-3>li{counter-increment:lst-ctn-kix_uq748w6pjv3r-3}ol.lst-kix_qz5wp1hdd24k-3.start{counter-reset:lst-ctn-kix_qz5wp1hdd24k-3 0}ol.lst-kix_3h1iswqv3l7s-0.start{counter-reset:lst-ctn-kix_3h1iswqv3l7s-0 0}.lst-kix_ffvvlgzbuz30-8>li:before{content:"\0025a0 "}.lst-kix_lixznqbqiris-8>li{counter-increment:lst-ctn-kix_lixznqbqiris-8}ol.lst-kix_t9jkz28ln50j-4.start{counter-reset:lst-ctn-kix_t9jkz28ln50j-4 0}.lst-kix_nhaic9xr6pf-0>li:before{content:"" counter(lst-ctn-kix_nhaic9xr6pf-0,decimal) ". "}.lst-kix_uq748w6pjv3r-6>li{counter-increment:lst-ctn-kix_uq748w6pjv3r-6}.lst-kix_3h1iswqv3l7s-0>li:before{content:"" counter(lst-ctn-kix_3h1iswqv3l7s-0,decimal) ". "}ol.lst-kix_vnvg10gwrc8t-6.start{counter-reset:lst-ctn-kix_vnvg10gwrc8t-6 0}.lst-kix_hvjet9voiiio-6>li:before{content:"" counter(lst-ctn-kix_hvjet9voiiio-6,decimal) ". "}ul.lst-kix_a4uqy1hx9g3-4{list-style-type:none}ul.lst-kix_a4uqy1hx9g3-3{list-style-type:none}ul.lst-kix_a4uqy1hx9g3-6{list-style-type:none}ul.lst-kix_a4uqy1hx9g3-5{list-style-type:none}ul.lst-kix_a4uqy1hx9g3-8{list-style-type:none}.lst-kix_hvjet9voiiio-0>li{counter-increment:lst-ctn-kix_hvjet9voiiio-0}ul.lst-kix_a4uqy1hx9g3-7{list-style-type:none}.lst-kix_v454r7upbzuz-4>li:before{content:"" counter(lst-ctn-kix_v454r7upbzuz-4,lower-latin) ". "}ol.lst-kix_z7in7d1ar2zt-4.start{counter-reset:lst-ctn-kix_z7in7d1ar2zt-4 0}ul.lst-kix_a4uqy1hx9g3-0{list-style-type:none}.lst-kix_57tjkabqizo2-8>li{counter-increment:lst-ctn-kix_57tjkabqizo2-8}ol.lst-kix_opzlp0rjj486-8.start{counter-reset:lst-ctn-kix_opzlp0rjj486-8 0}.lst-kix_ggm78fckav5h-8>li{counter-increment:lst-ctn-kix_ggm78fckav5h-8}ul.lst-kix_a4uqy1hx9g3-2{list-style-type:none}ul.lst-kix_a4uqy1hx9g3-1{list-style-type:none}.lst-kix_i2v077rod1nx-2>li:before{content:"\0025a0 "}ol.lst-kix_fr6w5z45nvx0-3.start{counter-reset:lst-ctn-kix_fr6w5z45nvx0-3 0}ol.lst-kix_2uog6ch44jpu-7.start{counter-reset:lst-ctn-kix_2uog6ch44jpu-7 0}ol.lst-kix_j51xhhtple7c-2.start{counter-reset:lst-ctn-kix_j51xhhtple7c-2 0}.lst-kix_qz5wp1hdd24k-4>li{counter-increment:lst-ctn-kix_qz5wp1hdd24k-4}.lst-kix_nhaic9xr6pf-5>li:before{content:"" counter(lst-ctn-kix_nhaic9xr6pf-5,lower-roman) ". "}ol.lst-kix_ggm78fckav5h-1.start{counter-reset:lst-ctn-kix_ggm78fckav5h-1 0}ol.lst-kix_juntnht2kzza-5.start{counter-reset:lst-ctn-kix_juntnht2kzza-5 0}.lst-kix_wzk0mdv2qg9u-1>li:before{content:"" counter(lst-ctn-kix_wzk0mdv2qg9u-1,lower-latin) ". "}.lst-kix_8uscekru9dbw-7>li{counter-increment:lst-ctn-kix_8uscekru9dbw-7}ol.lst-kix_vnvg10gwrc8t-3.start{counter-reset:lst-ctn-kix_vnvg10gwrc8t-3 0}.lst-kix_fr6w5z45nvx0-0>li:before{content:"" counter(lst-ctn-kix_fr6w5z45nvx0-0,decimal) ". "}ol.lst-kix_2uog6ch44jpu-8{list-style-type:none}ol.lst-kix_2uog6ch44jpu-2{list-style-type:none}ol.lst-kix_2uog6ch44jpu-3{list-style-type:none}ol.lst-kix_2uog6ch44jpu-0{list-style-type:none}ol.lst-kix_2uog6ch44jpu-1{list-style-type:none}ol.lst-kix_2uog6ch44jpu-6{list-style-type:none}ol.lst-kix_2uog6ch44jpu-7{list-style-type:none}ol.lst-kix_2uog6ch44jpu-4{list-style-type:none}.lst-kix_hvjet9voiiio-1>li{counter-increment:lst-ctn-kix_hvjet9voiiio-1}ol.lst-kix_2uog6ch44jpu-5{list-style-type:none}ol.lst-kix_1c0w7icorqz1-5.start{counter-reset:lst-ctn-kix_1c0w7icorqz1-5 0}.lst-kix_fr6w5z45nvx0-6>li{counter-increment:lst-ctn-kix_fr6w5z45nvx0-6}ol.lst-kix_pa6lflf2amnu-7.start{counter-reset:lst-ctn-kix_pa6lflf2amnu-7 0}.lst-kix_8uscekru9dbw-5>li{counter-increment:lst-ctn-kix_8uscekru9dbw-5}ol.lst-kix_pyiocxf7nngd-7.start{counter-reset:lst-ctn-kix_pyiocxf7nngd-7 0}.lst-kix_fr6w5z45nvx0-7>li:before{content:"" counter(lst-ctn-kix_fr6w5z45nvx0-7,lower-latin) ". "}.lst-kix_60g29afx0lof-7>li{counter-increment:lst-ctn-kix_60g29afx0lof-7}ol.lst-kix_nho7sy6cpfv0-8.start{counter-reset:lst-ctn-kix_nho7sy6cpfv0-8 0}ol.lst-kix_v454r7upbzuz-4{list-style-type:none}.lst-kix_bnpbicbhbbru-5>li:before{content:"\0025a0 "}ol.lst-kix_v454r7upbzuz-3{list-style-type:none}ol.lst-kix_v454r7upbzuz-2{list-style-type:none}ol.lst-kix_v454r7upbzuz-1{list-style-type:none}.lst-kix_vvzditg8sno-1>li:before{content:"\0025cb "}ol.lst-kix_v454r7upbzuz-0{list-style-type:none}.lst-kix_j51xhhtple7c-1>li:before{content:"" counter(lst-ctn-kix_j51xhhtple7c-1,lower-latin) ". "}.lst-kix_qz5wp1hdd24k-0>li{counter-increment:lst-ctn-kix_qz5wp1hdd24k-0}ol.lst-kix_v454r7upbzuz-8{list-style-type:none}ol.lst-kix_v454r7upbzuz-7{list-style-type:none}ol.lst-kix_v454r7upbzuz-6{list-style-type:none}ol.lst-kix_v454r7upbzuz-5{list-style-type:none}.lst-kix_sgsi64vug03j-5>li:before{content:"" counter(lst-ctn-kix_sgsi64vug03j-5,lower-roman) ". "}.lst-kix_kf08e4mo0q15-2>li:before{content:"" counter(lst-ctn-kix_kf08e4mo0q15-2,lower-roman) ". "}.lst-kix_kvgsl0s9rzo4-6>li:before{content:"" counter(lst-ctn-kix_kvgsl0s9rzo4-6,decimal) ". "}.lst-kix_1c0w7icorqz1-1>li{counter-increment:lst-ctn-kix_1c0w7icorqz1-1}.lst-kix_sgsi64vug03j-7>li{counter-increment:lst-ctn-kix_sgsi64vug03j-7}ol.lst-kix_jxeur1wnlj7y-8.start{counter-reset:lst-ctn-kix_jxeur1wnlj7y-8 0}.lst-kix_57tjkabqizo2-3>li{counter-increment:lst-ctn-kix_57tjkabqizo2-3}.lst-kix_pza3ybm1wtg3-2>li:before{content:"" counter(lst-ctn-kix_pza3ybm1wtg3-2,lower-roman) ". "}.lst-kix_pyiocxf7nngd-6>li:before{content:"" counter(lst-ctn-kix_pyiocxf7nngd-6,decimal) ". "}.lst-kix_jpf3cr7xe1pc-1>li{counter-increment:lst-ctn-kix_jpf3cr7xe1pc-1}.lst-kix_jzpgxqq6fzzf-0>li{counter-increment:lst-ctn-kix_jzpgxqq6fzzf-0}ol.lst-kix_pa6lflf2amnu-5.start{counter-reset:lst-ctn-kix_pa6lflf2amnu-5 0}.lst-kix_jxeur1wnlj7y-1>li{counter-increment:lst-ctn-kix_jxeur1wnlj7y-1}.lst-kix_pza3ybm1wtg3-4>li:before{content:"" counter(lst-ctn-kix_pza3ybm1wtg3-4,lower-latin) ". "}ol.lst-kix_57tjkabqizo2-1.start{counter-reset:lst-ctn-kix_57tjkabqizo2-1 0}.lst-kix_jzpgxqq6fzzf-2>li:before{content:"" counter(lst-ctn-kix_jzpgxqq6fzzf-2,lower-roman) ". "}.lst-kix_vnvg10gwrc8t-2>li:before{content:"" counter(lst-ctn-kix_vnvg10gwrc8t-2,lower-roman) ". "}.lst-kix_lixznqbqiris-3>li{counter-increment:lst-ctn-kix_lixznqbqiris-3}.lst-kix_sgsi64vug03j-6>li:before{content:"" counter(lst-ctn-kix_sgsi64vug03j-6,decimal) ". "}ol.lst-kix_60g29afx0lof-3.start{counter-reset:lst-ctn-kix_60g29afx0lof-3 0}ol.lst-kix_57tjkabqizo2-0.start{counter-reset:lst-ctn-kix_57tjkabqizo2-0 0}ol.lst-kix_oqqzpe3b3nud-8.start{counter-reset:lst-ctn-kix_oqqzpe3b3nud-8 0}.lst-kix_fpxsljpyl73u-1>li:before{content:"\0025cb "}.lst-kix_5f9palqqt4mm-2>li:before{content:"" counter(lst-ctn-kix_5f9palqqt4mm-2,lower-roman) ". "}ol.lst-kix_v454r7upbzuz-3.start{counter-reset:lst-ctn-kix_v454r7upbzuz-3 0}ol.lst-kix_wzk0mdv2qg9u-1.start{counter-reset:lst-ctn-kix_wzk0mdv2qg9u-1 0}ol.lst-kix_1c0w7icorqz1-1.start{counter-reset:lst-ctn-kix_1c0w7icorqz1-1 0}.lst-kix_kf08e4mo0q15-5>li:before{content:"" counter(lst-ctn-kix_kf08e4mo0q15-5,lower-roman) ". "}.lst-kix_7kmxmbi2lsws-1>li:before{content:"" counter(lst-ctn-kix_7kmxmbi2lsws-1,lower-latin) ". "}.lst-kix_kvgsl0s9rzo4-7>li{counter-increment:lst-ctn-kix_kvgsl0s9rzo4-7}ul.lst-kix_bnpbicbhbbru-8{list-style-type:none}.lst-kix_oqqzpe3b3nud-2>li{counter-increment:lst-ctn-kix_oqqzpe3b3nud-2}.lst-kix_1c0w7icorqz1-3>li:before{content:"" counter(lst-ctn-kix_1c0w7icorqz1-3,decimal) ". "}ul.lst-kix_bnpbicbhbbru-0{list-style-type:none}ol.lst-kix_nhaic9xr6pf-5.start{counter-reset:lst-ctn-kix_nhaic9xr6pf-5 0}ul.lst-kix_bnpbicbhbbru-1{list-style-type:none}ol.lst-kix_pa6lflf2amnu-0.start{counter-reset:lst-ctn-kix_pa6lflf2amnu-0 0}ul.lst-kix_bnpbicbhbbru-2{list-style-type:none}ul.lst-kix_bnpbicbhbbru-3{list-style-type:none}ul.lst-kix_bnpbicbhbbru-4{list-style-type:none}ul.lst-kix_bnpbicbhbbru-5{list-style-type:none}.lst-kix_p8a3u4ougab9-2>li:before{content:"" counter(lst-ctn-kix_p8a3u4ougab9-2,lower-roman) ". "}ul.lst-kix_bnpbicbhbbru-6{list-style-type:none}ul.lst-kix_bnpbicbhbbru-7{list-style-type:none}.lst-kix_v454r7upbzuz-0>li{counter-increment:lst-ctn-kix_v454r7upbzuz-0}ol.lst-kix_juntnht2kzza-7.start{counter-reset:lst-ctn-kix_juntnht2kzza-7 0}.lst-kix_j51xhhtple7c-4>li{counter-increment:lst-ctn-kix_j51xhhtple7c-4}.lst-kix_lgtbofvz5zxd-6>li{counter-increment:lst-ctn-kix_lgtbofvz5zxd-6}.lst-kix_j51xhhtple7c-6>li:before{content:"" counter(lst-ctn-kix_j51xhhtple7c-6,decimal) ". "}ol.lst-kix_ggm78fckav5h-0.start{counter-reset:lst-ctn-kix_ggm78fckav5h-0 0}.lst-kix_pa6lflf2amnu-2>li{counter-increment:lst-ctn-kix_pa6lflf2amnu-2}.lst-kix_1g0xzctl1vi-7>li{counter-increment:lst-ctn-kix_1g0xzctl1vi-7}ol.lst-kix_dblgil8t24zy-6.start{counter-reset:lst-ctn-kix_dblgil8t24zy-6 0}.lst-kix_lixznqbqiris-1>li{counter-increment:lst-ctn-kix_lixznqbqiris-1}ol.lst-kix_wzk0mdv2qg9u-0.start{counter-reset:lst-ctn-kix_wzk0mdv2qg9u-0 0}.lst-kix_hm47sef7muk-3>li{counter-increment:lst-ctn-kix_hm47sef7muk-3}.lst-kix_t7any4lo9hoq-0>li:before{content:"\0025cf "}.lst-kix_kf08e4mo0q15-1>li{counter-increment:lst-ctn-kix_kf08e4mo0q15-1}.lst-kix_hm47sef7muk-5>li:before{content:"" counter(lst-ctn-kix_hm47sef7muk-5,lower-roman) ". "}.lst-kix_7kmxmbi2lsws-0>li{counter-increment:lst-ctn-kix_7kmxmbi2lsws-0}.lst-kix_7kmxmbi2lsws-5>li{counter-increment:lst-ctn-kix_7kmxmbi2lsws-5}.lst-kix_vnvg10gwrc8t-8>li:before{content:"" counter(lst-ctn-kix_vnvg10gwrc8t-8,lower-roman) ". "}.lst-kix_hvjet9voiiio-0>li:before{content:"" counter(lst-ctn-kix_hvjet9voiiio-0,decimal) ". "}ol.lst-kix_p8a3u4ougab9-0.start{counter-reset:lst-ctn-kix_p8a3u4ougab9-0 0}.lst-kix_2uog6ch44jpu-2>li{counter-increment:lst-ctn-kix_2uog6ch44jpu-2}ol.lst-kix_uq748w6pjv3r-1.start{counter-reset:lst-ctn-kix_uq748w6pjv3r-1 0}.lst-kix_fpxsljpyl73u-8>li:before{content:"\0025a0 "}ol.lst-kix_oqqzpe3b3nud-0.start{counter-reset:lst-ctn-kix_oqqzpe3b3nud-0 0}.lst-kix_v454r7upbzuz-8>li{counter-increment:lst-ctn-kix_v454r7upbzuz-8}.lst-kix_8dg0b92yw51r-2>li:before{content:"" counter(lst-ctn-kix_8dg0b92yw51r-2,lower-roman) ". "}.lst-kix_fr6w5z45nvx0-5>li{counter-increment:lst-ctn-kix_fr6w5z45nvx0-5}.lst-kix_2uog6ch44jpu-3>li{counter-increment:lst-ctn-kix_2uog6ch44jpu-3}ol.lst-kix_jxeur1wnlj7y-5.start{counter-reset:lst-ctn-kix_jxeur1wnlj7y-5 0}ol.lst-kix_8uscekru9dbw-0.start{counter-reset:lst-ctn-kix_8uscekru9dbw-0 0}.lst-kix_4s9m9sikrtm7-8>li{counter-increment:lst-ctn-kix_4s9m9sikrtm7-8}.lst-kix_9tkaqbe3bnu3-5>li{counter-increment:lst-ctn-kix_9tkaqbe3bnu3-5}.lst-kix_60g29afx0lof-4>li:before{content:"" counter(lst-ctn-kix_60g29afx0lof-4,lower-latin) ". "}ol.lst-kix_fr6w5z45nvx0-0.start{counter-reset:lst-ctn-kix_fr6w5z45nvx0-0 0}ol.lst-kix_1gqf2s78t7o1-3.start{counter-reset:lst-ctn-kix_1gqf2s78t7o1-3 0}.lst-kix_z7in7d1ar2zt-2>li:before{content:"" counter(lst-ctn-kix_z7in7d1ar2zt-2,lower-roman) ". "}.lst-kix_hm47sef7muk-1>li{counter-increment:lst-ctn-kix_hm47sef7muk-1}.lst-kix_p8a3u4ougab9-5>li{counter-increment:lst-ctn-kix_p8a3u4ougab9-5}.lst-kix_iqyc5gy523tq-8>li:before{content:"\0025a0 "}ol.lst-kix_wzk0mdv2qg9u-7.start{counter-reset:lst-ctn-kix_wzk0mdv2qg9u-7 0}.lst-kix_fr6w5z45nvx0-2>li:before{content:"" counter(lst-ctn-kix_fr6w5z45nvx0-2,lower-roman) ". "}ol.lst-kix_1g0xzctl1vi-5.start{counter-reset:lst-ctn-kix_1g0xzctl1vi-5 0}ol.lst-kix_57tjkabqizo2-2.start{counter-reset:lst-ctn-kix_57tjkabqizo2-2 0}ul.lst-kix_i2v077rod1nx-8{list-style-type:none}.lst-kix_nho7sy6cpfv0-0>li:before{content:"" counter(lst-ctn-kix_nho7sy6cpfv0-0,decimal) ". "}ul.lst-kix_i2v077rod1nx-6{list-style-type:none}ul.lst-kix_i2v077rod1nx-7{list-style-type:none}.lst-kix_z7in7d1ar2zt-3>li{counter-increment:lst-ctn-kix_z7in7d1ar2zt-3}ul.lst-kix_i2v077rod1nx-4{list-style-type:none}ul.lst-kix_i2v077rod1nx-5{list-style-type:none}ol.lst-kix_hm47sef7muk-7.start{counter-reset:lst-ctn-kix_hm47sef7muk-7 0}ul.lst-kix_i2v077rod1nx-2{list-style-type:none}ul.lst-kix_i2v077rod1nx-3{list-style-type:none}ol.lst-kix_t9jkz28ln50j-8.start{counter-reset:lst-ctn-kix_t9jkz28ln50j-8 0}ul.lst-kix_i2v077rod1nx-0{list-style-type:none}ul.lst-kix_i2v077rod1nx-1{list-style-type:none}.lst-kix_uq748w6pjv3r-1>li:before{content:"" counter(lst-ctn-kix_uq748w6pjv3r-1,lower-latin) ". "}.lst-kix_4s9m9sikrtm7-0>li:before{content:"" counter(lst-ctn-kix_4s9m9sikrtm7-0,decimal) ". "}ol.lst-kix_1g0xzctl1vi-2.start{counter-reset:lst-ctn-kix_1g0xzctl1vi-2 0}ol.lst-kix_jpf3cr7xe1pc-7.start{counter-reset:lst-ctn-kix_jpf3cr7xe1pc-7 0}.lst-kix_kvgsl0s9rzo4-3>li{counter-increment:lst-ctn-kix_kvgsl0s9rzo4-3}.lst-kix_32zxnvl59py3-7>li:before{content:"" counter(lst-ctn-kix_32zxnvl59py3-7,lower-latin) ". "}ol.lst-kix_qz5wp1hdd24k-5.start{counter-reset:lst-ctn-kix_qz5wp1hdd24k-5 0}ol.lst-kix_dblgil8t24zy-2.start{counter-reset:lst-ctn-kix_dblgil8t24zy-2 0}ol.lst-kix_kf08e4mo0q15-6{list-style-type:none}ol.lst-kix_kf08e4mo0q15-7{list-style-type:none}ol.lst-kix_kf08e4mo0q15-8{list-style-type:none}ol.lst-kix_kf08e4mo0q15-2{list-style-type:none}ol.lst-kix_kf08e4mo0q15-3{list-style-type:none}ol.lst-kix_kf08e4mo0q15-4{list-style-type:none}ol.lst-kix_8uscekru9dbw-2.start{counter-reset:lst-ctn-kix_8uscekru9dbw-2 0}ol.lst-kix_kf08e4mo0q15-5{list-style-type:none}.lst-kix_m8zky1oy6k60-8>li{counter-increment:lst-ctn-kix_m8zky1oy6k60-8}.lst-kix_q1b5wk7cmirb-4>li:before{content:"\0025cb "}.lst-kix_i2v077rod1nx-8>li:before{content:"\0025a0 "}ol.lst-kix_kf08e4mo0q15-0{list-style-type:none}ol.lst-kix_kf08e4mo0q15-1{list-style-type:none}.lst-kix_ggm78fckav5h-3>li{counter-increment:lst-ctn-kix_ggm78fckav5h-3}.lst-kix_jzpgxqq6fzzf-6>li:before{content:"" counter(lst-ctn-kix_jzpgxqq6fzzf-6,decimal) ". "}.lst-kix_1gqf2s78t7o1-8>li{counter-increment:lst-ctn-kix_1gqf2s78t7o1-8}.lst-kix_j51xhhtple7c-1>li{counter-increment:lst-ctn-kix_j51xhhtple7c-1}ol.lst-kix_juntnht2kzza-0.start{counter-reset:lst-ctn-kix_juntnht2kzza-0 0}.lst-kix_dblgil8t24zy-1>li:before{content:"" counter(lst-ctn-kix_dblgil8t24zy-1,lower-latin) ". "}ol.lst-kix_qz5wp1hdd24k-0{list-style-type:none}ol.lst-kix_sgsi64vug03j-7.start{counter-reset:lst-ctn-kix_sgsi64vug03j-7 0}ol.lst-kix_qz5wp1hdd24k-1{list-style-type:none}ol.lst-kix_qz5wp1hdd24k-2{list-style-type:none}ol.lst-kix_jzpgxqq6fzzf-8.start{counter-reset:lst-ctn-kix_jzpgxqq6fzzf-8 0}ol.lst-kix_qz5wp1hdd24k-3{list-style-type:none}ol.lst-kix_qz5wp1hdd24k-4{list-style-type:none}ol.lst-kix_qz5wp1hdd24k-5{list-style-type:none}.lst-kix_nho7sy6cpfv0-5>li:before{content:"" counter(lst-ctn-kix_nho7sy6cpfv0-5,lower-roman) ". "}ol.lst-kix_qz5wp1hdd24k-6{list-style-type:none}ol.lst-kix_qz5wp1hdd24k-7{list-style-type:none}.lst-kix_pa6lflf2amnu-8>li:before{content:"" counter(lst-ctn-kix_pa6lflf2amnu-8,lower-roman) ". "}ol.lst-kix_qz5wp1hdd24k-8{list-style-type:none}.lst-kix_kvgsl0s9rzo4-2>li:before{content:"" counter(lst-ctn-kix_kvgsl0s9rzo4-2,lower-roman) ". "}ol.lst-kix_1c0w7icorqz1-4.start{counter-reset:lst-ctn-kix_1c0w7icorqz1-4 0}.lst-kix_vnvg10gwrc8t-1>li{counter-increment:lst-ctn-kix_vnvg10gwrc8t-1}.lst-kix_opzlp0rjj486-7>li{counter-increment:lst-ctn-kix_opzlp0rjj486-7}.lst-kix_8dg0b92yw51r-4>li{counter-increment:lst-ctn-kix_8dg0b92yw51r-4}.lst-kix_8uscekru9dbw-2>li{counter-increment:lst-ctn-kix_8uscekru9dbw-2}ol.lst-kix_3h1iswqv3l7s-3{list-style-type:none}ol.lst-kix_pza3ybm1wtg3-4.start{counter-reset:lst-ctn-kix_pza3ybm1wtg3-4 0}ol.lst-kix_3h1iswqv3l7s-2{list-style-type:none}ol.lst-kix_oqqzpe3b3nud-8{list-style-type:none}ol.lst-kix_3h1iswqv3l7s-1{list-style-type:none}ol.lst-kix_oqqzpe3b3nud-7{list-style-type:none}ol.lst-kix_3h1iswqv3l7s-0{list-style-type:none}ol.lst-kix_oqqzpe3b3nud-6{list-style-type:none}.lst-kix_sgsi64vug03j-7>li:before{content:"" counter(lst-ctn-kix_sgsi64vug03j-7,lower-latin) ". "}ol.lst-kix_oqqzpe3b3nud-1{list-style-type:none}.lst-kix_3h1iswqv3l7s-7>li{counter-increment:lst-ctn-kix_3h1iswqv3l7s-7}ol.lst-kix_oqqzpe3b3nud-0{list-style-type:none}ol.lst-kix_3h1iswqv3l7s-8{list-style-type:none}ol.lst-kix_jpf3cr7xe1pc-0.start{counter-reset:lst-ctn-kix_jpf3cr7xe1pc-0 0}ol.lst-kix_3h1iswqv3l7s-7{list-style-type:none}ol.lst-kix_oqqzpe3b3nud-5{list-style-type:none}ol.lst-kix_3h1iswqv3l7s-6{list-style-type:none}ol.lst-kix_9tkaqbe3bnu3-0.start{counter-reset:lst-ctn-kix_9tkaqbe3bnu3-0 0}ol.lst-kix_oqqzpe3b3nud-4{list-style-type:none}.lst-kix_3h1iswqv3l7s-7>li:before{content:"" counter(lst-ctn-kix_3h1iswqv3l7s-7,lower-latin) ". "}ol.lst-kix_3h1iswqv3l7s-5{list-style-type:none}ol.lst-kix_oqqzpe3b3nud-3{list-style-type:none}ol.lst-kix_3h1iswqv3l7s-4{list-style-type:none}ol.lst-kix_oqqzpe3b3nud-2{list-style-type:none}.lst-kix_ffvvlgzbuz30-6>li:before{content:"\0025cf "}.lst-kix_pza3ybm1wtg3-0>li:before{content:"" counter(lst-ctn-kix_pza3ybm1wtg3-0,decimal) ". "}ol.lst-kix_qeukrmzdd856-6.start{counter-reset:lst-ctn-kix_qeukrmzdd856-6 0}.lst-kix_jzpgxqq6fzzf-8>li:before{content:"" counter(lst-ctn-kix_jzpgxqq6fzzf-8,lower-roman) ". "}.lst-kix_kf08e4mo0q15-2>li{counter-increment:lst-ctn-kix_kf08e4mo0q15-2}.lst-kix_kvgsl0s9rzo4-5>li:before{content:"" counter(lst-ctn-kix_kvgsl0s9rzo4-5,lower-roman) ". "}ol.lst-kix_57tjkabqizo2-8.start{counter-reset:lst-ctn-kix_57tjkabqizo2-8 0}.lst-kix_jzpgxqq6fzzf-4>li{counter-increment:lst-ctn-kix_jzpgxqq6fzzf-4}.lst-kix_3h1iswqv3l7s-3>li:before{content:"" counter(lst-ctn-kix_3h1iswqv3l7s-3,decimal) ". "}.lst-kix_lixznqbqiris-6>li{counter-increment:lst-ctn-kix_lixznqbqiris-6}.lst-kix_8uscekru9dbw-1>li:before{content:"" counter(lst-ctn-kix_8uscekru9dbw-1,lower-latin) ". "}ol.lst-kix_kvgsl0s9rzo4-6.start{counter-reset:lst-ctn-kix_kvgsl0s9rzo4-6 0}ol.lst-kix_m1x0qzeeadaz-5.start{counter-reset:lst-ctn-kix_m1x0qzeeadaz-5 0}ol.lst-kix_fr6w5z45nvx0-5.start{counter-reset:lst-ctn-kix_fr6w5z45nvx0-5 0}ol.lst-kix_jpf3cr7xe1pc-6.start{counter-reset:lst-ctn-kix_jpf3cr7xe1pc-6 0}ol.lst-kix_wzk0mdv2qg9u-4.start{counter-reset:lst-ctn-kix_wzk0mdv2qg9u-4 0}.lst-kix_2uog6ch44jpu-6>li{counter-increment:lst-ctn-kix_2uog6ch44jpu-6}.lst-kix_8dg0b92yw51r-7>li:before{content:"" counter(lst-ctn-kix_8dg0b92yw51r-7,lower-latin) ". "}.lst-kix_p8a3u4ougab9-4>li{counter-increment:lst-ctn-kix_p8a3u4ougab9-4}.lst-kix_sgsi64vug03j-0>li{counter-increment:lst-ctn-kix_sgsi64vug03j-0}.lst-kix_m1x0qzeeadaz-2>li:before{content:"" counter(lst-ctn-kix_m1x0qzeeadaz-2,lower-roman) ". "}.lst-kix_p8a3u4ougab9-0>li{counter-increment:lst-ctn-kix_p8a3u4ougab9-0}.lst-kix_jzpgxqq6fzzf-1>li:before{content:"" counter(lst-ctn-kix_jzpgxqq6fzzf-1,lower-latin) ". "}.lst-kix_4s9m9sikrtm7-3>li:before{content:"" counter(lst-ctn-kix_4s9m9sikrtm7-3,decimal) ". "}.lst-kix_z7in7d1ar2zt-7>li:before{content:"" counter(lst-ctn-kix_z7in7d1ar2zt-7,lower-latin) ". "}ol.lst-kix_2uog6ch44jpu-6.start{counter-reset:lst-ctn-kix_2uog6ch44jpu-6 0}.lst-kix_sgsi64vug03j-1>li:before{content:"" counter(lst-ctn-kix_sgsi64vug03j-1,lower-latin) ". "}ol.lst-kix_qz5wp1hdd24k-0.start{counter-reset:lst-ctn-kix_qz5wp1hdd24k-0 0}.lst-kix_lgtbofvz5zxd-1>li{counter-increment:lst-ctn-kix_lgtbofvz5zxd-1}.lst-kix_sgsi64vug03j-4>li:before{content:"" counter(lst-ctn-kix_sgsi64vug03j-4,lower-latin) ". "}.lst-kix_dblgil8t24zy-2>li:before{content:"" counter(lst-ctn-kix_dblgil8t24zy-2,lower-roman) ". "}ol.lst-kix_hvjet9voiiio-1.start{counter-reset:lst-ctn-kix_hvjet9voiiio-1 0}.lst-kix_qz5wp1hdd24k-7>li:before{content:"" counter(lst-ctn-kix_qz5wp1hdd24k-7,lower-latin) ". "}ol.lst-kix_m8zky1oy6k60-1.start{counter-reset:lst-ctn-kix_m8zky1oy6k60-1 0}.lst-kix_p8a3u4ougab9-0>li:before{content:"" counter(lst-ctn-kix_p8a3u4ougab9-0,decimal) ". "}.lst-kix_1c0w7icorqz1-4>li{counter-increment:lst-ctn-kix_1c0w7icorqz1-4}ol.lst-kix_v454r7upbzuz-1.start{counter-reset:lst-ctn-kix_v454r7upbzuz-1 0}.lst-kix_jpf3cr7xe1pc-2>li{counter-increment:lst-ctn-kix_jpf3cr7xe1pc-2}.lst-kix_2uog6ch44jpu-2>li:before{content:"" counter(lst-ctn-kix_2uog6ch44jpu-2,lower-roman) ". "}.lst-kix_3h1iswqv3l7s-8>li:before{content:"" counter(lst-ctn-kix_3h1iswqv3l7s-8,lower-roman) ". "}.lst-kix_pa6lflf2amnu-6>li:before{content:"" counter(lst-ctn-kix_pa6lflf2amnu-6,decimal) ". "}.lst-kix_32zxnvl59py3-0>li:before{content:"" counter(lst-ctn-kix_32zxnvl59py3-0,decimal) ". "}.lst-kix_qeukrmzdd856-4>li{counter-increment:lst-ctn-kix_qeukrmzdd856-4}.lst-kix_q1b5wk7cmirb-8>li:before{content:"\0025a0 "}.lst-kix_m8zky1oy6k60-7>li{counter-increment:lst-ctn-kix_m8zky1oy6k60-7}.lst-kix_kf08e4mo0q15-6>li:before{content:"" counter(lst-ctn-kix_kf08e4mo0q15-6,decimal) ". "}ol.lst-kix_hvjet9voiiio-7.start{counter-reset:lst-ctn-kix_hvjet9voiiio-7 0}.lst-kix_vnvg10gwrc8t-2>li{counter-increment:lst-ctn-kix_vnvg10gwrc8t-2}.lst-kix_kf08e4mo0q15-3>li{counter-increment:lst-ctn-kix_kf08e4mo0q15-3}.lst-kix_1gqf2s78t7o1-7>li:before{content:"" counter(lst-ctn-kix_1gqf2s78t7o1-7,lower-latin) ". "}.lst-kix_z7in7d1ar2zt-4>li:before{content:"" counter(lst-ctn-kix_z7in7d1ar2zt-4,lower-latin) ". "}ol.lst-kix_t9jkz28ln50j-1.start{counter-reset:lst-ctn-kix_t9jkz28ln50j-1 0}.lst-kix_7kmxmbi2lsws-8>li:before{content:"" counter(lst-ctn-kix_7kmxmbi2lsws-8,lower-roman) ". "}ol.lst-kix_m1x0qzeeadaz-3.start{counter-reset:lst-ctn-kix_m1x0qzeeadaz-3 0}.lst-kix_pa6lflf2amnu-3>li:before{content:"" counter(lst-ctn-kix_pa6lflf2amnu-3,decimal) ". "}.lst-kix_dblgil8t24zy-7>li:before{content:"" counter(lst-ctn-kix_dblgil8t24zy-7,lower-latin) ". "}.lst-kix_dblgil8t24zy-8>li{counter-increment:lst-ctn-kix_dblgil8t24zy-8}ol.lst-kix_sgsi64vug03j-5.start{counter-reset:lst-ctn-kix_sgsi64vug03j-5 0}.lst-kix_m1x0qzeeadaz-7>li:before{content:"" counter(lst-ctn-kix_m1x0qzeeadaz-7,lower-latin) ". "}.lst-kix_2uog6ch44jpu-8>li{counter-increment:lst-ctn-kix_2uog6ch44jpu-8}.lst-kix_pyiocxf7nngd-8>li{counter-increment:lst-ctn-kix_pyiocxf7nngd-8}.lst-kix_4s9m9sikrtm7-3>li{counter-increment:lst-ctn-kix_4s9m9sikrtm7-3}.lst-kix_vnvg10gwrc8t-7>li:before{content:"" counter(lst-ctn-kix_vnvg10gwrc8t-7,lower-latin) ". "}.lst-kix_pyiocxf7nngd-3>li{counter-increment:lst-ctn-kix_pyiocxf7nngd-3}.lst-kix_8dg0b92yw51r-7>li{counter-increment:lst-ctn-kix_8dg0b92yw51r-7}.lst-kix_4s9m9sikrtm7-0>li{counter-increment:lst-ctn-kix_4s9m9sikrtm7-0}ol.lst-kix_kf08e4mo0q15-2.start{counter-reset:lst-ctn-kix_kf08e4mo0q15-2 0}.lst-kix_t9jkz28ln50j-6>li{counter-increment:lst-ctn-kix_t9jkz28ln50j-6}.lst-kix_uq748w6pjv3r-8>li{counter-increment:lst-ctn-kix_uq748w6pjv3r-8}.lst-kix_m1x0qzeeadaz-8>li:before{content:"" counter(lst-ctn-kix_m1x0qzeeadaz-8,lower-roman) ". "}.lst-kix_pa6lflf2amnu-2>li:before{content:"" counter(lst-ctn-kix_pa6lflf2amnu-2,lower-roman) ". "}ol.lst-kix_p8a3u4ougab9-2.start{counter-reset:lst-ctn-kix_p8a3u4ougab9-2 0}.lst-kix_pza3ybm1wtg3-0>li{counter-increment:lst-ctn-kix_pza3ybm1wtg3-0}.lst-kix_qz5wp1hdd24k-8>li{counter-increment:lst-ctn-kix_qz5wp1hdd24k-8}.lst-kix_hvjet9voiiio-8>li{counter-increment:lst-ctn-kix_hvjet9voiiio-8}.lst-kix_9tkaqbe3bnu3-2>li{counter-increment:lst-ctn-kix_9tkaqbe3bnu3-2}.lst-kix_qz5wp1hdd24k-8>li:before{content:"" counter(lst-ctn-kix_qz5wp1hdd24k-8,lower-roman) ". "}.lst-kix_p8a3u4ougab9-5>li:before{content:"" counter(lst-ctn-kix_p8a3u4ougab9-5,lower-roman) ". "}.lst-kix_hvjet9voiiio-3>li{counter-increment:lst-ctn-kix_hvjet9voiiio-3}ol.lst-kix_pyiocxf7nngd-6.start{counter-reset:lst-ctn-kix_pyiocxf7nngd-6 0}.lst-kix_uq748w6pjv3r-0>li:before{content:"" counter(lst-ctn-kix_uq748w6pjv3r-0,decimal) ". "}.lst-kix_8dg0b92yw51r-6>li{counter-increment:lst-ctn-kix_8dg0b92yw51r-6}.lst-kix_m1x0qzeeadaz-8>li{counter-increment:lst-ctn-kix_m1x0qzeeadaz-8}ol.lst-kix_32zxnvl59py3-6.start{counter-reset:lst-ctn-kix_32zxnvl59py3-6 0}ol.lst-kix_m8zky1oy6k60-2.start{counter-reset:lst-ctn-kix_m8zky1oy6k60-2 0}ol.lst-kix_jzpgxqq6fzzf-7.start{counter-reset:lst-ctn-kix_jzpgxqq6fzzf-7 0}ol.lst-kix_8uscekru9dbw-0{list-style-type:none}ol.lst-kix_9tkaqbe3bnu3-2.start{counter-reset:lst-ctn-kix_9tkaqbe3bnu3-2 0}.lst-kix_t7any4lo9hoq-4>li:before{content:"\0025cb "}.lst-kix_nhaic9xr6pf-4>li:before{content:"" counter(lst-ctn-kix_nhaic9xr6pf-4,lower-latin) ". "}ul.lst-kix_kc6aimw8pnra-3{list-style-type:none}ul.lst-kix_kc6aimw8pnra-2{list-style-type:none}ul.lst-kix_kc6aimw8pnra-1{list-style-type:none}ul.lst-kix_kc6aimw8pnra-0{list-style-type:none}.lst-kix_8uscekru9dbw-2>li:before{content:"" counter(lst-ctn-kix_8uscekru9dbw-2,lower-roman) ". "}.lst-kix_7kmxmbi2lsws-3>li:before{content:"" counter(lst-ctn-kix_7kmxmbi2lsws-3,decimal) ". "}ol.lst-kix_4s9m9sikrtm7-5.start{counter-reset:lst-ctn-kix_4s9m9sikrtm7-5 0}ol.lst-kix_8uscekru9dbw-8{list-style-type:none}ol.lst-kix_8uscekru9dbw-7{list-style-type:none}ol.lst-kix_8uscekru9dbw-6{list-style-type:none}.lst-kix_vvzditg8sno-3>li:before{content:"\0025cf "}ul.lst-kix_kc6aimw8pnra-8{list-style-type:none}ol.lst-kix_8uscekru9dbw-5{list-style-type:none}ul.lst-kix_kc6aimw8pnra-7{list-style-type:none}ol.lst-kix_8uscekru9dbw-4{list-style-type:none}ul.lst-kix_kc6aimw8pnra-6{list-style-type:none}ol.lst-kix_8uscekru9dbw-3{list-style-type:none}ul.lst-kix_kc6aimw8pnra-5{list-style-type:none}ol.lst-kix_8uscekru9dbw-2{list-style-type:none}ul.lst-kix_kc6aimw8pnra-4{list-style-type:none}ol.lst-kix_8uscekru9dbw-1{list-style-type:none}.lst-kix_bnpbicbhbbru-1>li:before{content:"\0025cb "}ol.lst-kix_7kmxmbi2lsws-6.start{counter-reset:lst-ctn-kix_7kmxmbi2lsws-6 0}ol.lst-kix_1c0w7icorqz1-7.start{counter-reset:lst-ctn-kix_1c0w7icorqz1-7 0}ol.lst-kix_m1x0qzeeadaz-4.start{counter-reset:lst-ctn-kix_m1x0qzeeadaz-4 0}.lst-kix_1gqf2s78t7o1-3>li:before{content:"" counter(lst-ctn-kix_1gqf2s78t7o1-3,decimal) ". "}ol.lst-kix_hm47sef7muk-8.start{counter-reset:lst-ctn-kix_hm47sef7muk-8 0}.lst-kix_1c0w7icorqz1-7>li{counter-increment:lst-ctn-kix_1c0w7icorqz1-7}ol.lst-kix_vnvg10gwrc8t-1.start{counter-reset:lst-ctn-kix_vnvg10gwrc8t-1 0}.lst-kix_lgtbofvz5zxd-2>li{counter-increment:lst-ctn-kix_lgtbofvz5zxd-2}.lst-kix_p8a3u4ougab9-3>li:before{content:"" counter(lst-ctn-kix_p8a3u4ougab9-3,decimal) ". "}.lst-kix_1c0w7icorqz1-5>li:before{content:"" counter(lst-ctn-kix_1c0w7icorqz1-5,lower-roman) ". "}.lst-kix_jzpgxqq6fzzf-7>li{counter-increment:lst-ctn-kix_jzpgxqq6fzzf-7}.lst-kix_8dg0b92yw51r-2>li{counter-increment:lst-ctn-kix_8dg0b92yw51r-2}.lst-kix_oqqzpe3b3nud-8>li:before{content:"" counter(lst-ctn-kix_oqqzpe3b3nud-8,lower-roman) ". "}.lst-kix_9tkaqbe3bnu3-1>li:before{content:"" counter(lst-ctn-kix_9tkaqbe3bnu3-1,lower-latin) ". "}.lst-kix_pyiocxf7nngd-1>li{counter-increment:lst-ctn-kix_pyiocxf7nngd-1}.lst-kix_kf08e4mo0q15-1>li:before{content:"" counter(lst-ctn-kix_kf08e4mo0q15-1,lower-latin) ". "}.lst-kix_8dg0b92yw51r-5>li:before{content:"" counter(lst-ctn-kix_8dg0b92yw51r-5,lower-roman) ". "}.lst-kix_1c0w7icorqz1-7>li:before{content:"" counter(lst-ctn-kix_1c0w7icorqz1-7,lower-latin) ". "}.lst-kix_fpxsljpyl73u-2>li:before{content:"\0025a0 "}.lst-kix_m1x0qzeeadaz-3>li{counter-increment:lst-ctn-kix_m1x0qzeeadaz-3}.lst-kix_a4uqy1hx9g3-1>li:before{content:"\0025cb "}ol.lst-kix_ggm78fckav5h-2.start{counter-reset:lst-ctn-kix_ggm78fckav5h-2 0}ol.lst-kix_8dg0b92yw51r-5.start{counter-reset:lst-ctn-kix_8dg0b92yw51r-5 0}ol.lst-kix_2uog6ch44jpu-2.start{counter-reset:lst-ctn-kix_2uog6ch44jpu-2 0}.lst-kix_ggm78fckav5h-6>li:before{content:"" counter(lst-ctn-kix_ggm78fckav5h-6,decimal) ". "}.lst-kix_a4uqy1hx9g3-7>li:before{content:"\0025cb "}.lst-kix_57tjkabqizo2-7>li{counter-increment:lst-ctn-kix_57tjkabqizo2-7}ol.lst-kix_lgtbofvz5zxd-1{list-style-type:none}ol.lst-kix_lgtbofvz5zxd-0{list-style-type:none}ol.lst-kix_z7in7d1ar2zt-2.start{counter-reset:lst-ctn-kix_z7in7d1ar2zt-2 0}.lst-kix_qz5wp1hdd24k-3>li:before{content:"" counter(lst-ctn-kix_qz5wp1hdd24k-3,decimal) ". "}.lst-kix_1c0w7icorqz1-4>li:before{content:"" counter(lst-ctn-kix_1c0w7icorqz1-4,lower-latin) ". "}.lst-kix_pyiocxf7nngd-2>li:before{content:"" counter(lst-ctn-kix_pyiocxf7nngd-2,lower-roman) ". "}.lst-kix_lixznqbqiris-6>li:before{content:"" counter(lst-ctn-kix_lixznqbqiris-6,decimal) ". "}ol.lst-kix_1gqf2s78t7o1-1.start{counter-reset:lst-ctn-kix_1gqf2s78t7o1-1 0}ol.lst-kix_lgtbofvz5zxd-8{list-style-type:none}ol.lst-kix_lgtbofvz5zxd-6{list-style-type:none}ol.lst-kix_lgtbofvz5zxd-7{list-style-type:none}ol.lst-kix_lgtbofvz5zxd-4{list-style-type:none}ol.lst-kix_lgtbofvz5zxd-5{list-style-type:none}ol.lst-kix_uq748w6pjv3r-8.start{counter-reset:lst-ctn-kix_uq748w6pjv3r-8 0}ol.lst-kix_lgtbofvz5zxd-2{list-style-type:none}ol.lst-kix_lgtbofvz5zxd-3{list-style-type:none}.lst-kix_32zxnvl59py3-6>li{counter-increment:lst-ctn-kix_32zxnvl59py3-6}.lst-kix_dblgil8t24zy-3>li{counter-increment:lst-ctn-kix_dblgil8t24zy-3}.lst-kix_sgsi64vug03j-8>li:before{content:"" counter(lst-ctn-kix_sgsi64vug03j-8,lower-roman) ". "}.lst-kix_m8zky1oy6k60-4>li:before{content:"" counter(lst-ctn-kix_m8zky1oy6k60-4,lower-latin) ". "}.lst-kix_opzlp0rjj486-1>li{counter-increment:lst-ctn-kix_opzlp0rjj486-1}ol.lst-kix_lgtbofvz5zxd-4.start{counter-reset:lst-ctn-kix_lgtbofvz5zxd-4 0}.lst-kix_z7in7d1ar2zt-0>li:before{content:"" counter(lst-ctn-kix_z7in7d1ar2zt-0,decimal) ". "}.lst-kix_lgtbofvz5zxd-7>li:before{content:"" counter(lst-ctn-kix_lgtbofvz5zxd-7,lower-latin) ". "}.lst-kix_t9jkz28ln50j-1>li{counter-increment:lst-ctn-kix_t9jkz28ln50j-1}ol.lst-kix_m8zky1oy6k60-4.start{counter-reset:lst-ctn-kix_m8zky1oy6k60-4 0}ol.lst-kix_z7in7d1ar2zt-1.start{counter-reset:lst-ctn-kix_z7in7d1ar2zt-1 0}ol.lst-kix_pa6lflf2amnu-2.start{counter-reset:lst-ctn-kix_pa6lflf2amnu-2 0}.lst-kix_pyiocxf7nngd-4>li:before{content:"" counter(lst-ctn-kix_pyiocxf7nngd-4,lower-latin) ". "}ol.lst-kix_7kmxmbi2lsws-0.start{counter-reset:lst-ctn-kix_7kmxmbi2lsws-0 0}.lst-kix_nho7sy6cpfv0-1>li:before{content:"" counter(lst-ctn-kix_nho7sy6cpfv0-1,lower-latin) ". "}.lst-kix_v454r7upbzuz-6>li:before{content:"" counter(lst-ctn-kix_v454r7upbzuz-6,decimal) ". "}.lst-kix_kvgsl0s9rzo4-3>li:before{content:"" counter(lst-ctn-kix_kvgsl0s9rzo4-3,decimal) ". "}.lst-kix_nho7sy6cpfv0-4>li{counter-increment:lst-ctn-kix_nho7sy6cpfv0-4}.lst-kix_7kmxmbi2lsws-3>li{counter-increment:lst-ctn-kix_7kmxmbi2lsws-3}.lst-kix_qz5wp1hdd24k-6>li{counter-increment:lst-ctn-kix_qz5wp1hdd24k-6}.lst-kix_jxeur1wnlj7y-7>li{counter-increment:lst-ctn-kix_jxeur1wnlj7y-7}ol.lst-kix_hvjet9voiiio-6.start{counter-reset:lst-ctn-kix_hvjet9voiiio-6 0}ol.lst-kix_lixznqbqiris-7.start{counter-reset:lst-ctn-kix_lixznqbqiris-7 0}.lst-kix_pyiocxf7nngd-3>li:before{content:"" counter(lst-ctn-kix_pyiocxf7nngd-3,decimal) ". "}.lst-kix_pza3ybm1wtg3-4>li{counter-increment:lst-ctn-kix_pza3ybm1wtg3-4}ol.lst-kix_57tjkabqizo2-7.start{counter-reset:lst-ctn-kix_57tjkabqizo2-7 0}ol.lst-kix_32zxnvl59py3-4.start{counter-reset:lst-ctn-kix_32zxnvl59py3-4 0}ol.lst-kix_hvjet9voiiio-2.start{counter-reset:lst-ctn-kix_hvjet9voiiio-2 0}.lst-kix_3h1iswqv3l7s-8>li{counter-increment:lst-ctn-kix_3h1iswqv3l7s-8}.lst-kix_m1x0qzeeadaz-5>li:before{content:"" counter(lst-ctn-kix_m1x0qzeeadaz-5,lower-roman) ". "}ol.lst-kix_dblgil8t24zy-0.start{counter-reset:lst-ctn-kix_dblgil8t24zy-0 0}.lst-kix_nhaic9xr6pf-2>li:before{content:"" counter(lst-ctn-kix_nhaic9xr6pf-2,lower-roman) ". "}.lst-kix_qeukrmzdd856-6>li:before{content:"" counter(lst-ctn-kix_qeukrmzdd856-6,decimal) ". "}.lst-kix_hm47sef7muk-8>li{counter-increment:lst-ctn-kix_hm47sef7muk-8}ol.lst-kix_kf08e4mo0q15-8.start{counter-reset:lst-ctn-kix_kf08e4mo0q15-8 0}ol.lst-kix_jzpgxqq6fzzf-6.start{counter-reset:lst-ctn-kix_jzpgxqq6fzzf-6 0}ol.lst-kix_wzk0mdv2qg9u-4{list-style-type:none}ol.lst-kix_wzk0mdv2qg9u-5{list-style-type:none}ol.lst-kix_wzk0mdv2qg9u-2{list-style-type:none}ol.lst-kix_wzk0mdv2qg9u-3{list-style-type:none}ol.lst-kix_wzk0mdv2qg9u-8{list-style-type:none}ol.lst-kix_wzk0mdv2qg9u-6{list-style-type:none}ol.lst-kix_wzk0mdv2qg9u-7{list-style-type:none}ol.lst-kix_wzk0mdv2qg9u-0{list-style-type:none}ol.lst-kix_4s9m9sikrtm7-8.start{counter-reset:lst-ctn-kix_4s9m9sikrtm7-8 0}ol.lst-kix_wzk0mdv2qg9u-1{list-style-type:none}.lst-kix_jxeur1wnlj7y-6>li{counter-increment:lst-ctn-kix_jxeur1wnlj7y-6}ol.lst-kix_qz5wp1hdd24k-2.start{counter-reset:lst-ctn-kix_qz5wp1hdd24k-2 0}.lst-kix_2uog6ch44jpu-1>li{counter-increment:lst-ctn-kix_2uog6ch44jpu-1}.lst-kix_lixznqbqiris-4>li:before{content:"" counter(lst-ctn-kix_lixznqbqiris-4,lower-latin) ". "}.lst-kix_jzpgxqq6fzzf-5>li{counter-increment:lst-ctn-kix_jzpgxqq6fzzf-5}.lst-kix_ggm78fckav5h-2>li:before{content:"" counter(lst-ctn-kix_ggm78fckav5h-2,lower-roman) ". "}.lst-kix_juntnht2kzza-1>li{counter-increment:lst-ctn-kix_juntnht2kzza-1}ol.lst-kix_fr6w5z45nvx0-2.start{counter-reset:lst-ctn-kix_fr6w5z45nvx0-2 0}.lst-kix_1gqf2s78t7o1-7>li{counter-increment:lst-ctn-kix_1gqf2s78t7o1-7}.lst-kix_t9jkz28ln50j-8>li:before{content:"" counter(lst-ctn-kix_t9jkz28ln50j-8,lower-roman) ". "}.lst-kix_qz5wp1hdd24k-7>li{counter-increment:lst-ctn-kix_qz5wp1hdd24k-7}.lst-kix_jxeur1wnlj7y-4>li:before{content:"" counter(lst-ctn-kix_jxeur1wnlj7y-4,lower-latin) ". "}.lst-kix_qeukrmzdd856-7>li{counter-increment:lst-ctn-kix_qeukrmzdd856-7}.lst-kix_kc6aimw8pnra-3>li:before{content:"\0025cf "}ol.lst-kix_t9jkz28ln50j-0.start{counter-reset:lst-ctn-kix_t9jkz28ln50j-0 0}.lst-kix_t9jkz28ln50j-5>li{counter-increment:lst-ctn-kix_t9jkz28ln50j-5}.lst-kix_lgtbofvz5zxd-1>li:before{content:"" counter(lst-ctn-kix_lgtbofvz5zxd-1,lower-latin) ". "}.lst-kix_oqqzpe3b3nud-7>li{counter-increment:lst-ctn-kix_oqqzpe3b3nud-7}.lst-kix_uq748w6pjv3r-4>li:before{content:"" counter(lst-ctn-kix_uq748w6pjv3r-4,lower-latin) ". "}.lst-kix_3h1iswqv3l7s-5>li:before{content:"" counter(lst-ctn-kix_3h1iswqv3l7s-5,lower-roman) ". "}ol.lst-kix_nho7sy6cpfv0-1.start{counter-reset:lst-ctn-kix_nho7sy6cpfv0-1 0}.lst-kix_kf08e4mo0q15-7>li:before{content:"" counter(lst-ctn-kix_kf08e4mo0q15-7,lower-latin) ". "}.lst-kix_oqqzpe3b3nud-6>li:before{content:"" counter(lst-ctn-kix_oqqzpe3b3nud-6,decimal) ". "}ol.lst-kix_1g0xzctl1vi-6.start{counter-reset:lst-ctn-kix_1g0xzctl1vi-6 0}.lst-kix_v454r7upbzuz-4>li{counter-increment:lst-ctn-kix_v454r7upbzuz-4}ol.lst-kix_z7in7d1ar2zt-0.start{counter-reset:lst-ctn-kix_z7in7d1ar2zt-0 0}ol.lst-kix_7kmxmbi2lsws-6{list-style-type:none}ol.lst-kix_7kmxmbi2lsws-5{list-style-type:none}ol.lst-kix_7kmxmbi2lsws-4.start{counter-reset:lst-ctn-kix_7kmxmbi2lsws-4 0}ol.lst-kix_7kmxmbi2lsws-4{list-style-type:none}.lst-kix_bnpbicbhbbru-8>li:before{content:"\0025a0 "}ol.lst-kix_7kmxmbi2lsws-3{list-style-type:none}ol.lst-kix_7kmxmbi2lsws-2{list-style-type:none}ol.lst-kix_7kmxmbi2lsws-1{list-style-type:none}ol.lst-kix_7kmxmbi2lsws-0{list-style-type:none}.lst-kix_pa6lflf2amnu-6>li{counter-increment:lst-ctn-kix_pa6lflf2amnu-6}.lst-kix_4s9m9sikrtm7-7>li{counter-increment:lst-ctn-kix_4s9m9sikrtm7-7}ol.lst-kix_dblgil8t24zy-8.start{counter-reset:lst-ctn-kix_dblgil8t24zy-8 0}.lst-kix_hm47sef7muk-7>li:before{content:"" counter(lst-ctn-kix_hm47sef7muk-7,lower-latin) ". "}ol.lst-kix_vnvg10gwrc8t-8.start{counter-reset:lst-ctn-kix_vnvg10gwrc8t-8 0}.lst-kix_vvzditg8sno-5>li:before{content:"\0025a0 "}.lst-kix_nhaic9xr6pf-2>li{counter-increment:lst-ctn-kix_nhaic9xr6pf-2}ol.lst-kix_j51xhhtple7c-4.start{counter-reset:lst-ctn-kix_j51xhhtple7c-4 0}.lst-kix_wzk0mdv2qg9u-5>li{counter-increment:lst-ctn-kix_wzk0mdv2qg9u-5}.lst-kix_j51xhhtple7c-7>li{counter-increment:lst-ctn-kix_j51xhhtple7c-7}.lst-kix_3h1iswqv3l7s-6>li:before{content:"" counter(lst-ctn-kix_3h1iswqv3l7s-6,decimal) ". "}.lst-kix_hm47sef7muk-2>li{counter-increment:lst-ctn-kix_hm47sef7muk-2}.lst-kix_3h1iswqv3l7s-1>li:before{content:"" counter(lst-ctn-kix_3h1iswqv3l7s-1,lower-latin) ". "}.lst-kix_juntnht2kzza-2>li{counter-increment:lst-ctn-kix_juntnht2kzza-2}.lst-kix_jzpgxqq6fzzf-0>li:before{content:"" counter(lst-ctn-kix_jzpgxqq6fzzf-0,decimal) ". "}.lst-kix_lgtbofvz5zxd-5>li:before{content:"" counter(lst-ctn-kix_lgtbofvz5zxd-5,lower-roman) ". "}.lst-kix_1gqf2s78t7o1-1>li:before{content:"" counter(lst-ctn-kix_1gqf2s78t7o1-1,lower-latin) ". "}ol.lst-kix_60g29afx0lof-2.start{counter-reset:lst-ctn-kix_60g29afx0lof-2 0}ol.lst-kix_9tkaqbe3bnu3-8{list-style-type:none}ol.lst-kix_9tkaqbe3bnu3-7{list-style-type:none}ol.lst-kix_9tkaqbe3bnu3-6{list-style-type:none}ol.lst-kix_9tkaqbe3bnu3-5{list-style-type:none}.lst-kix_q1b5wk7cmirb-6>li:before{content:"\0025cf "}ol.lst-kix_9tkaqbe3bnu3-0{list-style-type:none}.lst-kix_ggm78fckav5h-0>li{counter-increment:lst-ctn-kix_ggm78fckav5h-0}.lst-kix_lgtbofvz5zxd-3>li{counter-increment:lst-ctn-kix_lgtbofvz5zxd-3}.lst-kix_3h1iswqv3l7s-5>li{counter-increment:lst-ctn-kix_3h1iswqv3l7s-5}ol.lst-kix_9tkaqbe3bnu3-4{list-style-type:none}ol.lst-kix_8uscekru9dbw-4.start{counter-reset:lst-ctn-kix_8uscekru9dbw-4 0}ol.lst-kix_9tkaqbe3bnu3-3{list-style-type:none}ol.lst-kix_9tkaqbe3bnu3-2{list-style-type:none}ol.lst-kix_9tkaqbe3bnu3-1{list-style-type:none}.lst-kix_sgsi64vug03j-2>li{counter-increment:lst-ctn-kix_sgsi64vug03j-2}.lst-kix_hm47sef7muk-8>li:before{content:"" counter(lst-ctn-kix_hm47sef7muk-8,lower-roman) ". "}.lst-kix_pyiocxf7nngd-8>li:before{content:"" counter(lst-ctn-kix_pyiocxf7nngd-8,lower-roman) ". "}.lst-kix_3h1iswqv3l7s-1>li{counter-increment:lst-ctn-kix_3h1iswqv3l7s-1}.lst-kix_1g0xzctl1vi-6>li:before{content:"" counter(lst-ctn-kix_1g0xzctl1vi-6,decimal) ". "}.lst-kix_32zxnvl59py3-7>li{counter-increment:lst-ctn-kix_32zxnvl59py3-7}ol.lst-kix_1c0w7icorqz1-6.start{counter-reset:lst-ctn-kix_1c0w7icorqz1-6 0}.lst-kix_kc6aimw8pnra-6>li:before{content:"\0025cf "}.lst-kix_j51xhhtple7c-7>li:before{content:"" counter(lst-ctn-kix_j51xhhtple7c-7,lower-latin) ". "}.lst-kix_nho7sy6cpfv0-7>li{counter-increment:lst-ctn-kix_nho7sy6cpfv0-7}ol.lst-kix_v454r7upbzuz-6.start{counter-reset:lst-ctn-kix_v454r7upbzuz-6 0}.lst-kix_hvjet9voiiio-5>li{counter-increment:lst-ctn-kix_hvjet9voiiio-5}.lst-kix_nhaic9xr6pf-8>li:before{content:"" counter(lst-ctn-kix_nhaic9xr6pf-8,lower-roman) ". "}.lst-kix_i2v077rod1nx-0>li:before{content:"\0025cf "}.lst-kix_9tkaqbe3bnu3-7>li:before{content:"" counter(lst-ctn-kix_9tkaqbe3bnu3-7,lower-latin) ". "}ol.lst-kix_ggm78fckav5h-8.start{counter-reset:lst-ctn-kix_ggm78fckav5h-8 0}ol.lst-kix_8dg0b92yw51r-8.start{counter-reset:lst-ctn-kix_8dg0b92yw51r-8 0}.lst-kix_dblgil8t24zy-0>li:before{content:"" counter(lst-ctn-kix_dblgil8t24zy-0,decimal) ". "}ol.lst-kix_v454r7upbzuz-8.start{counter-reset:lst-ctn-kix_v454r7upbzuz-8 0}.lst-kix_1gqf2s78t7o1-1>li{counter-increment:lst-ctn-kix_1gqf2s78t7o1-1}ol.lst-kix_jxeur1wnlj7y-7.start{counter-reset:lst-ctn-kix_jxeur1wnlj7y-7 0}ol.lst-kix_juntnht2kzza-4.start{counter-reset:lst-ctn-kix_juntnht2kzza-4 0}ol.lst-kix_jzpgxqq6fzzf-0.start{counter-reset:lst-ctn-kix_jzpgxqq6fzzf-0 0}ol.lst-kix_ggm78fckav5h-6.start{counter-reset:lst-ctn-kix_ggm78fckav5h-6 0}.lst-kix_j51xhhtple7c-6>li{counter-increment:lst-ctn-kix_j51xhhtple7c-6}ol.lst-kix_7kmxmbi2lsws-8{list-style-type:none}ol.lst-kix_8uscekru9dbw-7.start{counter-reset:lst-ctn-kix_8uscekru9dbw-7 0}ol.lst-kix_7kmxmbi2lsws-7{list-style-type:none}.lst-kix_t9jkz28ln50j-0>li:before{content:"" counter(lst-ctn-kix_t9jkz28ln50j-0,decimal) ". "}.lst-kix_p8a3u4ougab9-1>li:before{content:"" counter(lst-ctn-kix_p8a3u4ougab9-1,lower-latin) ". "}ol.lst-kix_m1x0qzeeadaz-1.start{counter-reset:lst-ctn-kix_m1x0qzeeadaz-1 0}.lst-kix_60g29afx0lof-5>li:before{content:"" counter(lst-ctn-kix_60g29afx0lof-5,lower-roman) ". "}ol.lst-kix_opzlp0rjj486-7{list-style-type:none}ol.lst-kix_opzlp0rjj486-6{list-style-type:none}ol.lst-kix_opzlp0rjj486-5{list-style-type:none}ol.lst-kix_opzlp0rjj486-4{list-style-type:none}ol.lst-kix_sgsi64vug03j-8.start{counter-reset:lst-ctn-kix_sgsi64vug03j-8 0}ol.lst-kix_opzlp0rjj486-8{list-style-type:none}ol.lst-kix_z7in7d1ar2zt-7.start{counter-reset:lst-ctn-kix_z7in7d1ar2zt-7 0}ol.lst-kix_t9jkz28ln50j-2.start{counter-reset:lst-ctn-kix_t9jkz28ln50j-2 0}.lst-kix_8uscekru9dbw-4>li:before{content:"" counter(lst-ctn-kix_8uscekru9dbw-4,lower-latin) ". "}.lst-kix_kvgsl0s9rzo4-1>li:before{content:"" counter(lst-ctn-kix_kvgsl0s9rzo4-1,lower-latin) ". "}.lst-kix_t7any4lo9hoq-6>li:before{content:"\0025cf "}ol.lst-kix_pyiocxf7nngd-0.start{counter-reset:lst-ctn-kix_pyiocxf7nngd-0 0}.lst-kix_9tkaqbe3bnu3-5>li:before{content:"" counter(lst-ctn-kix_9tkaqbe3bnu3-5,lower-roman) ". "}ol.lst-kix_opzlp0rjj486-2{list-style-type:none}.lst-kix_bnpbicbhbbru-0>li:before{content:"\0025cf "}ol.lst-kix_opzlp0rjj486-3{list-style-type:none}.lst-kix_8uscekru9dbw-4>li{counter-increment:lst-ctn-kix_8uscekru9dbw-4}ol.lst-kix_opzlp0rjj486-0{list-style-type:none}ol.lst-kix_opzlp0rjj486-1{list-style-type:none}ol.lst-kix_m8zky1oy6k60-6.start{counter-reset:lst-ctn-kix_m8zky1oy6k60-6 0}ol.lst-kix_p8a3u4ougab9-8.start{counter-reset:lst-ctn-kix_p8a3u4ougab9-8 0}.lst-kix_oqqzpe3b3nud-2>li:before{content:"" counter(lst-ctn-kix_oqqzpe3b3nud-2,lower-roman) ". "}.lst-kix_60g29afx0lof-8>li:before{content:"" counter(lst-ctn-kix_60g29afx0lof-8,lower-roman) ". "}ol.lst-kix_qeukrmzdd856-8.start{counter-reset:lst-ctn-kix_qeukrmzdd856-8 0}ol.lst-kix_pyiocxf7nngd-0{list-style-type:none}.lst-kix_uq748w6pjv3r-2>li:before{content:"" counter(lst-ctn-kix_uq748w6pjv3r-2,lower-roman) ". "}ol.lst-kix_uq748w6pjv3r-7.start{counter-reset:lst-ctn-kix_uq748w6pjv3r-7 0}.lst-kix_8uscekru9dbw-8>li:before{content:"" counter(lst-ctn-kix_8uscekru9dbw-8,lower-roman) ". "}ol.lst-kix_kvgsl0s9rzo4-8.start{counter-reset:lst-ctn-kix_kvgsl0s9rzo4-8 0}ol.lst-kix_pyiocxf7nngd-3{list-style-type:none}ol.lst-kix_pyiocxf7nngd-4{list-style-type:none}ol.lst-kix_pyiocxf7nngd-1{list-style-type:none}ol.lst-kix_kvgsl0s9rzo4-5.start{counter-reset:lst-ctn-kix_kvgsl0s9rzo4-5 0}ol.lst-kix_pyiocxf7nngd-2{list-style-type:none}ol.lst-kix_pyiocxf7nngd-8{list-style-type:none}ol.lst-kix_pyiocxf7nngd-7{list-style-type:none}ol.lst-kix_pyiocxf7nngd-6{list-style-type:none}.lst-kix_2uog6ch44jpu-4>li:before{content:"" counter(lst-ctn-kix_2uog6ch44jpu-4,lower-latin) ". "}.lst-kix_p8a3u4ougab9-1>li{counter-increment:lst-ctn-kix_p8a3u4ougab9-1}ol.lst-kix_pyiocxf7nngd-5{list-style-type:none}.lst-kix_7kmxmbi2lsws-0>li:before{content:"" counter(lst-ctn-kix_7kmxmbi2lsws-0,decimal) ". "}ol.lst-kix_vnvg10gwrc8t-5.start{counter-reset:lst-ctn-kix_vnvg10gwrc8t-5 0}.lst-kix_60g29afx0lof-2>li{counter-increment:lst-ctn-kix_60g29afx0lof-2}.lst-kix_jpf3cr7xe1pc-8>li{counter-increment:lst-ctn-kix_jpf3cr7xe1pc-8}ol.lst-kix_sgsi64vug03j-6.start{counter-reset:lst-ctn-kix_sgsi64vug03j-6 0}.lst-kix_32zxnvl59py3-6>li:before{content:"" counter(lst-ctn-kix_32zxnvl59py3-6,decimal) ". "}ol.lst-kix_j51xhhtple7c-1{list-style-type:none}.lst-kix_ggm78fckav5h-5>li:before{content:"" counter(lst-ctn-kix_ggm78fckav5h-5,lower-roman) ". "}ol.lst-kix_j51xhhtple7c-0{list-style-type:none}ol.lst-kix_j51xhhtple7c-3{list-style-type:none}ol.lst-kix_j51xhhtple7c-2{list-style-type:none}.lst-kix_uq748w6pjv3r-0>li{counter-increment:lst-ctn-kix_uq748w6pjv3r-0}ol.lst-kix_lgtbofvz5zxd-0.start{counter-reset:lst-ctn-kix_lgtbofvz5zxd-0 0}.lst-kix_lixznqbqiris-4>li{counter-increment:lst-ctn-kix_lixznqbqiris-4}ol.lst-kix_2uog6ch44jpu-5.start{counter-reset:lst-ctn-kix_2uog6ch44jpu-5 0}ol.lst-kix_nhaic9xr6pf-1{list-style-type:none}ol.lst-kix_nhaic9xr6pf-2{list-style-type:none}ol.lst-kix_nhaic9xr6pf-3{list-style-type:none}ol.lst-kix_nhaic9xr6pf-4{list-style-type:none}ol.lst-kix_nhaic9xr6pf-5{list-style-type:none}ol.lst-kix_nhaic9xr6pf-6{list-style-type:none}ol.lst-kix_nhaic9xr6pf-7{list-style-type:none}ol.lst-kix_nhaic9xr6pf-8{list-style-type:none}ol.lst-kix_j51xhhtple7c-4{list-style-type:none}ol.lst-kix_j51xhhtple7c-5{list-style-type:none}ol.lst-kix_j51xhhtple7c-6{list-style-type:none}ol.lst-kix_j51xhhtple7c-7{list-style-type:none}ol.lst-kix_j51xhhtple7c-8{list-style-type:none}ol.lst-kix_nhaic9xr6pf-0{list-style-type:none}.lst-kix_vvzditg8sno-0>li:before{content:"\0025cf "}.lst-kix_a4uqy1hx9g3-0>li:before{content:"\0025cf "}.lst-kix_1g0xzctl1vi-1>li:before{content:"" counter(lst-ctn-kix_1g0xzctl1vi-1,lower-latin) ". "}ol.lst-kix_1g0xzctl1vi-3.start{counter-reset:lst-ctn-kix_1g0xzctl1vi-3 0}.lst-kix_fr6w5z45nvx0-5>li:before{content:"" counter(lst-ctn-kix_fr6w5z45nvx0-5,lower-roman) ". "}.lst-kix_fpxsljpyl73u-3>li:before{content:"\0025cf "}.lst-kix_7kmxmbi2lsws-2>li{counter-increment:lst-ctn-kix_7kmxmbi2lsws-2}.lst-kix_1g0xzctl1vi-1>li{counter-increment:lst-ctn-kix_1g0xzctl1vi-1}ol.lst-kix_3h1iswqv3l7s-5.start{counter-reset:lst-ctn-kix_3h1iswqv3l7s-5 0}ol.lst-kix_m1x0qzeeadaz-6.start{counter-reset:lst-ctn-kix_m1x0qzeeadaz-6 0}.lst-kix_t9jkz28ln50j-1>li:before{content:"" counter(lst-ctn-kix_t9jkz28ln50j-1,lower-latin) ". "}ol.lst-kix_5f9palqqt4mm-3.start{counter-reset:lst-ctn-kix_5f9palqqt4mm-3 0}ol.lst-kix_2uog6ch44jpu-3.start{counter-reset:lst-ctn-kix_2uog6ch44jpu-3 0}.lst-kix_nho7sy6cpfv0-8>li:before{content:"" counter(lst-ctn-kix_nho7sy6cpfv0-8,lower-roman) ". "}.lst-kix_4s9m9sikrtm7-8>li:before{content:"" counter(lst-ctn-kix_4s9m9sikrtm7-8,lower-roman) ". "}ol.lst-kix_nhaic9xr6pf-4.start{counter-reset:lst-ctn-kix_nhaic9xr6pf-4 0}.lst-kix_opzlp0rjj486-2>li{counter-increment:lst-ctn-kix_opzlp0rjj486-2}.lst-kix_57tjkabqizo2-4>li:before{content:"" counter(lst-ctn-kix_57tjkabqizo2-4,lower-latin) ". "}.lst-kix_juntnht2kzza-3>li{counter-increment:lst-ctn-kix_juntnht2kzza-3}ol.lst-kix_wzk0mdv2qg9u-8.start{counter-reset:lst-ctn-kix_wzk0mdv2qg9u-8 0}ol.lst-kix_8dg0b92yw51r-4.start{counter-reset:lst-ctn-kix_8dg0b92yw51r-4 0}.lst-kix_60g29afx0lof-5>li{counter-increment:lst-ctn-kix_60g29afx0lof-5}ol.lst-kix_60g29afx0lof-5.start{counter-reset:lst-ctn-kix_60g29afx0lof-5 0}.lst-kix_qz5wp1hdd24k-2>li:before{content:"" counter(lst-ctn-kix_qz5wp1hdd24k-2,lower-roman) ". "}.lst-kix_juntnht2kzza-7>li{counter-increment:lst-ctn-kix_juntnht2kzza-7}.lst-kix_5f9palqqt4mm-0>li:before{content:"" counter(lst-ctn-kix_5f9palqqt4mm-0,decimal) ". "}ol.lst-kix_7kmxmbi2lsws-2.start{counter-reset:lst-ctn-kix_7kmxmbi2lsws-2 0}.lst-kix_v454r7upbzuz-7>li{counter-increment:lst-ctn-kix_v454r7upbzuz-7}.lst-kix_fr6w5z45nvx0-4>li:before{content:"" counter(lst-ctn-kix_fr6w5z45nvx0-4,lower-latin) ". "}.lst-kix_kf08e4mo0q15-6>li{counter-increment:lst-ctn-kix_kf08e4mo0q15-6}ol.lst-kix_57tjkabqizo2-6.start{counter-reset:lst-ctn-kix_57tjkabqizo2-6 0}ol.lst-kix_3h1iswqv3l7s-7.start{counter-reset:lst-ctn-kix_3h1iswqv3l7s-7 0}ol.lst-kix_uq748w6pjv3r-2.start{counter-reset:lst-ctn-kix_uq748w6pjv3r-2 0}.lst-kix_opzlp0rjj486-3>li:before{content:"" counter(lst-ctn-kix_opzlp0rjj486-3,decimal) ". "}.lst-kix_kvgsl0s9rzo4-1>li{counter-increment:lst-ctn-kix_kvgsl0s9rzo4-1}.lst-kix_juntnht2kzza-4>li:before{content:"" counter(lst-ctn-kix_juntnht2kzza-4,lower-latin) ". "}ol.lst-kix_dblgil8t24zy-1.start{counter-reset:lst-ctn-kix_dblgil8t24zy-1 0}.lst-kix_7kmxmbi2lsws-4>li:before{content:"" counter(lst-ctn-kix_7kmxmbi2lsws-4,lower-latin) ". "}ol.lst-kix_oqqzpe3b3nud-3.start{counter-reset:lst-ctn-kix_oqqzpe3b3nud-3 0}ol.lst-kix_kf08e4mo0q15-6.start{counter-reset:lst-ctn-kix_kf08e4mo0q15-6 0}.lst-kix_z7in7d1ar2zt-6>li{counter-increment:lst-ctn-kix_z7in7d1ar2zt-6}.lst-kix_pza3ybm1wtg3-8>li{counter-increment:lst-ctn-kix_pza3ybm1wtg3-8}.lst-kix_32zxnvl59py3-3>li:before{content:"" counter(lst-ctn-kix_32zxnvl59py3-3,decimal) ". "}ol.lst-kix_opzlp0rjj486-6.start{counter-reset:lst-ctn-kix_opzlp0rjj486-6 0}.lst-kix_lixznqbqiris-7>li{counter-increment:lst-ctn-kix_lixznqbqiris-7}.lst-kix_j51xhhtple7c-4>li:before{content:"" counter(lst-ctn-kix_j51xhhtple7c-4,lower-latin) ". "}ol.lst-kix_8dg0b92yw51r-0.start{counter-reset:lst-ctn-kix_8dg0b92yw51r-0 0}.lst-kix_kvgsl0s9rzo4-5>li{counter-increment:lst-ctn-kix_kvgsl0s9rzo4-5}.lst-kix_8dg0b92yw51r-1>li:before{content:"" counter(lst-ctn-kix_8dg0b92yw51r-1,lower-latin) ". "}ol.lst-kix_vnvg10gwrc8t-2.start{counter-reset:lst-ctn-kix_vnvg10gwrc8t-2 0}.lst-kix_t9jkz28ln50j-4>li{counter-increment:lst-ctn-kix_t9jkz28ln50j-4}ol.lst-kix_opzlp0rjj486-2.start{counter-reset:lst-ctn-kix_opzlp0rjj486-2 0}.lst-kix_pa6lflf2amnu-0>li{counter-increment:lst-ctn-kix_pa6lflf2amnu-0}.lst-kix_dblgil8t24zy-2>li{counter-increment:lst-ctn-kix_dblgil8t24zy-2}.lst-kix_m1x0qzeeadaz-0>li:before{content:"" counter(lst-ctn-kix_m1x0qzeeadaz-0,decimal) ". "}ol.lst-kix_60g29afx0lof-0.start{counter-reset:lst-ctn-kix_60g29afx0lof-0 0}ol.lst-kix_fr6w5z45nvx0-4.start{counter-reset:lst-ctn-kix_fr6w5z45nvx0-4 0}ol.lst-kix_1g0xzctl1vi-0.start{counter-reset:lst-ctn-kix_1g0xzctl1vi-0 0}.lst-kix_m8zky1oy6k60-0>li:before{content:"" counter(lst-ctn-kix_m8zky1oy6k60-0,decimal) ". "}ol.lst-kix_nho7sy6cpfv0-6.start{counter-reset:lst-ctn-kix_nho7sy6cpfv0-6 0}.lst-kix_hvjet9voiiio-3>li:before{content:"" counter(lst-ctn-kix_hvjet9voiiio-3,decimal) ". "}ol.lst-kix_3h1iswqv3l7s-8.start{counter-reset:lst-ctn-kix_3h1iswqv3l7s-8 0}.lst-kix_57tjkabqizo2-7>li:before{content:"" counter(lst-ctn-kix_57tjkabqizo2-7,lower-latin) ". "}.lst-kix_hvjet9voiiio-2>li:before{content:"" counter(lst-ctn-kix_hvjet9voiiio-2,lower-roman) ". "}ol.lst-kix_60g29afx0lof-5{list-style-type:none}ol.lst-kix_60g29afx0lof-6{list-style-type:none}ol.lst-kix_60g29afx0lof-7{list-style-type:none}ol.lst-kix_60g29afx0lof-8{list-style-type:none}.lst-kix_t9jkz28ln50j-5>li:before{content:"" counter(lst-ctn-kix_t9jkz28ln50j-5,lower-roman) ". "}ol.lst-kix_fr6w5z45nvx0-1.start{counter-reset:lst-ctn-kix_fr6w5z45nvx0-1 0}ol.lst-kix_kvgsl0s9rzo4-4.start{counter-reset:lst-ctn-kix_kvgsl0s9rzo4-4 0}.lst-kix_sgsi64vug03j-3>li:before{content:"" counter(lst-ctn-kix_sgsi64vug03j-3,decimal) ". "}.lst-kix_7kmxmbi2lsws-6>li:before{content:"" counter(lst-ctn-kix_7kmxmbi2lsws-6,decimal) ". "}ol.lst-kix_60g29afx0lof-0{list-style-type:none}.lst-kix_opzlp0rjj486-4>li{counter-increment:lst-ctn-kix_opzlp0rjj486-4}ol.lst-kix_j51xhhtple7c-6.start{counter-reset:lst-ctn-kix_j51xhhtple7c-6 0}ol.lst-kix_60g29afx0lof-2{list-style-type:none}ol.lst-kix_60g29afx0lof-1{list-style-type:none}.lst-kix_t7any4lo9hoq-8>li:before{content:"\0025a0 "}ol.lst-kix_60g29afx0lof-4{list-style-type:none}ol.lst-kix_60g29afx0lof-3{list-style-type:none}ol{margin:0;padding:0}.c37{vertical-align:baseline;color:#000000;font-size:11pt;font-style:normal;font-family:"Arial";text-decoration:none;font-weight:normal}.c28{vertical-align:top;width:504pt;border-style:solid;background-color:#ead1dc;border-color:#000000;border-width:1pt;padding:5pt 5pt 5pt 5pt}.c20{vertical-align:top;width:648pt;border-style:solid;background-color:#f3f3f3;border-color:#000000;border-width:1pt;padding:5pt 5pt 5pt 5pt}.c25{vertical-align:top;width:144pt;border-style:solid;border-color:#000000;border-width:1pt;padding:5pt 5pt 5pt 5pt}.c4{line-height:1.0;padding-top:0pt;text-align:center;padding-bottom:0pt}.c34{color:#999999;font-size:24pt;font-family:"Open Sans"}.c19{font-size:12pt;font-family:"Consolas";text-decoration:line-through}.c41{color:#a64d79;font-size:12pt;font-family:"Trebuchet MS"}.c18{line-height:1.15;text-align:left;padding-bottom:0pt}.c39{color:#000000;font-size:11pt;font-weight:normal}.c33{color:#666666;font-size:12pt;font-family:"Trebuchet MS"}.c13{margin-right:auto;border-collapse:collapse}.c26{max-width:648pt;background-color:#ffffff;padding:72pt 72pt 72pt 72pt}.c51{font-size:36pt;font-family:"Arial"}.c45{font-size:11pt;font-family:"Arial"}.c53{margin:5px;border:1px solid black}.c40{padding-top:18pt;padding-bottom:4pt}.c44{font-size:24pt;font-family:"Open Sans"}.c29{padding-top:24pt;padding-bottom:6pt}.c42{text-align:right;padding-bottom:0pt}.c3{padding-top:10pt;height:16pt}.c21{color:#1155cc;text-decoration:underline}.c31{font-size:18pt;font-family:"Arial"}.c36{color:#ff0000;font-size:18pt}.c14{color:inherit;text-decoration:inherit}.c24{text-align:left;padding-bottom:0pt}.c10{margin:0;padding:0}.c52{font-size:36pt;font-family:"Open Sans"}.c9{padding-top:8pt}.c16{padding-left:0pt}.c47{color:#333333}.c48{text-align:right}.c30{margin-left:108pt}.c50{color:#4a86e8}.c6{height:11pt}.c8{height:16pt}.c17{margin-left:72pt}.c2{font-family:"Courier New"}.c11{margin-left:36pt}.c12{padding-top:10pt}.c46{font-size:18pt}.c32{line-height:1.5}.c27{height:12pt}.c5{line-height:1.0}.c38{color:#ff0000}.c43{text-align:center}.c35{font-family:"Consolas"}.c23{text-decoration:line-through}.c49{color:#a64d79}.c1{font-weight:bold}.c15{font-style:italic}.c0{direction:ltr}.c22{height:0pt}.c7{padding-top:0pt}.title{padding-top:0pt;line-height:1.15;text-align:left;color:#000000;font-size:21pt;font-family:"Trebuchet MS";padding-bottom:0pt}.subtitle{padding-top:0pt;line-height:1.15;text-align:left;color:#666666;font-style:italic;font-size:13pt;font-family:"Trebuchet MS";padding-bottom:10pt}li{color:#000000;font-size:11pt;font-family:"Arial"}p{color:#000000;font-size:11pt;margin:0;font-family:"Arial"}h1{padding-top:10pt;line-height:1.15;text-align:left;color:#000000;font-size:16pt;font-family:"Trebuchet MS";padding-bottom:0pt}h2{padding-top:10pt;line-height:1.15;text-align:left;color:#000000;font-size:13pt;font-family:"Trebuchet MS";font-weight:bold;padding-bottom:0pt}h3{padding-top:8pt;line-height:1.15;text-align:left;color:#666666;font-size:12pt;font-family:"Trebuchet MS";font-weight:bold;padding-bottom:0pt}h4{padding-top:8pt;line-height:1.15;text-align:left;color:#666666;font-size:11pt;text-decoration:underline;font-family:"Trebuchet MS";padding-bottom:0pt}h5{padding-top:8pt;line-height:1.15;text-align:left;color:#666666;font-size:11pt;font-family:"Trebuchet MS";padding-bottom:0pt}h6{padding-top:8pt;line-height:1.15;text-align:left;color:#666666;font-style:italic;font-size:11pt;font-family:"Trebuchet MS";padding-bottom:0pt}</style></head><body class="c26"><p class="c29 c43 c0 title"><a name="h.w7msts8n8z9n"></a><img height="268" src="images/image30.png" width="616"></p><p class="c6 c0 c43"><span class="c36"></span></p><p class="c43 c0"><span class="c36">Oct, 2013: This code lab is </span><span class="c36 c1">deprecated</span><span class="c36">.</span></p><p class="c43 c0"><span class="c36">It is based on Web UI, which is </span><span class="c1 c36">superseded</span><span class="c36">&nbsp;by </span><span class="c21 c46"><a class="c14" href="https://www.dartlang.org/polymer-dart/">Polymer</a></span><span class="c36">.</span></p><p class="c29 c6 c43 c0 title"><a name="h.mwk409ib2hvj"></a></p><p class="c6 c0"><span></span></p><p class="c6 c0"><span></span></p><p class="c29 c43 c0 title"><a name="h.umyrvsj374pd"></a><span class="c34 c1">Dart on the Modern Web</span></p><p class="c29 c43 c0 title"><a name="h.eit4v9fewd5g"></a><span class="c1 c34">Google I/O 2013 &mdash; Code lab</span></p><p class="c6 c0"><span></span></p><p class="c6 c0"><span></span></p><p class="c0 c29 title"><a name="h.kerookz5dcyr"></a><span class="c1 c52">Dart on the Modern Web</span><img height="133" src="images/image19.png" width="133"></p><p class="c0 c40 subtitle"><a name="h.lmjlnm6y08c9"></a><span class="c44">Using Dart to Build a Modern Web App</span></p><h1 class="c29 c0"><a name="h.r18vdncm6tad"></a><span class="c1 c31">Dart code lab for Google I/O 2013</span></h1><hr style="page-break-before:always;display:none;"><p class="c6 c0"><span></span></p><h1 class="c0"><a name="h.cgzc3lhbqumi"></a><span>Introduction</span></h1><p class="c6 c0"><span></span></p><p class="c0"><span>Welcome to Dart! We built Dart to help developers from all platforms build awesome apps for the modern web. Dart compiles to JavaScript to run across all modern browsers. Dart is an easy-to-learn language at the hub of &nbsp;a powerful set of tools for structured web app engineering. The Dart SDK contains a rich set of libraries, a powerful editor, a package manager, and much more.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>In this code lab, you&rsquo;ll build a simple, single-page, modern web app for desktop and mobile.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>You will learn:</span></p><p class="c6 c0"><span></span></p><ul class="c10 lst-kix_i2v077rod1nx-0 start"><li class="c16 c11 c0"><span>A bit of the Dart language and libraries</span></li><li class="c16 c11 c0"><span>Client-side templating</span></li><li class="c16 c11 c0"><span>Declarative dynamic DOM generation</span></li><li class="c16 c11 c0"><span>MDV-style data binding to sync UI elements with data</span></li><li class="c16 c11 c0"><span>How to use the Dart HTML and Web UI libraries</span></li><li class="c16 c11 c0"><span>How to store data locally in your browser</span></li><li class="c16 c11 c0"><span>Optimizing for </span><span>mobile</span><span>&nbsp;devices</span></li></ul><h2 class="c0"><a name="h.wybq4zhendq"></a><span>Prerequisites</span></h2><p class="c6 c0"><span></span></p><p class="c0"><span>This code lab assumes that you are familiar with web programming (HTML, CSS) and object-oriented programming. You do not need to be an expert in web programming to enjoy this code lab.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>This code lab requires Dart Editor, which you will download and install in Step 0</span><span>.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span class="c1">Note:</span><span>&nbsp;Dart Editor runs on Windows (Vista, 7, or 8), Linux, or Mac.</span></p><hr style="page-break-before:always;display:none;"><p class="c6 c0"><span></span></p><h2 class="c0"><a name="h.dqo0342x5tkd"></a><span>Resources</span></h2><p class="c6 c0"><span></span></p><p class="c0"><span>There are numerous </span><span>resources for the new Dart developer</span><span>. Here are some of our</span><span>&nbsp;recommendations:</span></p><p class="c6 c0"><span></span></p><ul class="c10 lst-kix_q1b5wk7cmirb-0 start"><li class="c16 c11 c0"><span class="c21"><a class="c14" href="http://www.dartlang.org/docs/tutorials/">A Game of Darts - Tutorials</a></span></li><li class="c16 c11 c0"><span class="c21"><a class="c14" href="http://www.dartlang.org/docs/tutorials/web-ui/">Target 6: Get Started with Web UI</a></span></li><li class="c16 c11 c0"><span class="c21"><a class="c14" href="http://www.dartlang.org/docs/dart-up-and-running/contents/ch02.html">Dart Language Tour</a></span></li><li class="c16 c11 c0"><span class="c21"><a class="c14" href="http://www.dartlang.org/docs/dart-up-and-running/contents/ch03.html">Dart Library Tour</a></span></li><li class="c16 c11 c0"><span class="c21"><a class="c14" href="http://www.dartlang.org/docs/">Programmer&#39;s Guide</a></span></li></ul><hr style="page-break-before:always;display:none;"><h1 class="c8 c0"><a name="h.j231q75dw9bi"></a></h1><h1 class="c0"><a name="h.gu4egoh1qqcf"></a><span>Step 0: Get the app, run it in Dart Editor, and practice debugging</span></h1><p class="c6 c0"><span></span></p><p class="c0"><span>This step sets the stage. You make sure you have the right software, can run the finished app, and know how to use Dart Editor&rsquo;s integrated debugger.</span></p><p class="c6 c0"><span></span></p><h2 class="c0"><a name="h.fp11eex6azbi"></a><span>Objectives</span></h2><ol class="c10 lst-kix_p8a3u4ougab9-0 start" start="1"><li class="c16 c11 c0"><span>Get the </span><span>latest version of Dart Editor</span></li><li class="c16 c11 c0"><span>Download the source code for the sample app</span></li><li class="c16 c11 c0"><span>Run the finished version of the app</span></li><li class="c16 c11 c0"><span>Look at debugging information for the running app</span></li></ol><p class="c6 c0"><span></span></p><h2 class="c0"><a name="h.of31fpik16gt"></a><span>Concepts overview</span></h2><ul class="c10 lst-kix_a4uqy1hx9g3-0 start"><li class="c16 c11 c0"><span class="c1">Dartium</span><span>&nbsp;(Chromium with a built-in Dart VM) and the Dart SDK are included in Dart Editor download.</span></li><li class="c16 c11 c0"><span>You can run Dart web apps in Dartium or in </span><span class="c1">any modern browser</span><span>. (Dart Editor compiles the Dart code to JavaScript, using an SDK tool called dart2js.)</span></li></ul><p class="c6 c0"><span></span></p><h2 class="c0"><a name="h.l63dnbcn7kku"></a><span>Walkthrough</span></h2><h3 class="c0"><a name="h.p74ks3s27haa"></a><span>Download or update Dart Editor</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>If you </span><span class="c1">don&rsquo;t </span><span>have a copy of Dart Editor, get it:</span></p><ol class="c10 lst-kix_m1x0qzeeadaz-0 start" start="1"><li class="c16 c11 c0"><span>Go to </span><span class="c21"><a class="c14" href="http://www.dartlang.org/tools/editor/">dartlang.org/editor/</a></span><span>.</span></li><li class="c16 c11 c0"><span>Download the version for your OS.</span></li><li class="c16 c11 c0"><span>Unzip the file. You&rsquo;re done!</span></li><li class="c16 c11 c0"><span>Launch Dart Editor by double-clicking the </span><span class="c1">DartEditor</span><span>&nbsp;executable file.</span></li></ol><p class="c17 c0"><img height="93" src="images/image37.png" width="77"></p><p class="c11 c0"><span class="c1">Note:</span><span>&nbsp;If you&rsquo;re on a Mac, you might see an &ldquo;unidentified developer&rdquo; error. Here&rsquo;s the solution: Instead of double-clicking the </span><span class="c1">DartEditor</span><span>&nbsp;executable file, right-click (or Ctl+click) it to bring up a context menu, and choose </span><span class="c1">Open</span><span>. Then, in the dialog that comes up, click </span><span class="c1">Open</span><span>. An alternative workaround is to change your security settings (see </span><span class="c21"><a class="c14" href="http://www.dartlang.org/tools/editor/troubleshoot.html">Troubleshooting Dart Editor</a></span><span>).</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>If you </span><span class="c1">do</span><span>&nbsp;already have a copy of Dart Editor, make sure you&rsquo;re on the latest build:</span></p><ol class="c10 lst-kix_jpf3cr7xe1pc-0 start" start="1"><li class="c16 c11 c0"><span>Launch Dart Editor.</span></li><li class="c16 c11 c0"><span>Close </span><span class="c1">Preferences</span><span>&nbsp;if you&rsquo;ve opened it.</span></li><li class="c16 c11 c0"><span>Open </span><span class="c1">About Dart Editor</span><span>.</span></li><li class="c16 c11 c0"><span>If the button at the bottom right (</span><span class="c1">Check for Update </span><span>or </span><span class="c1">Download Update</span><span>)</span><span class="c1">&nbsp;</span><span>is enabled, click it, and download the update.</span></li><li class="c16 c11 c0"><span>When the button says </span><span class="c1">Apply Update</span><span>, click it.</span></li></ol><p class="c6 c0"><span></span></p><h3 class="c0"><a name="h.d3pxkjuwrjf7"></a><span>Download the app&rsquo;s source code</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>You can either clone the git repo or download the ZIP file.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>To clone the repo from the command line:</span></p><p class="c6 c0"><span></span></p><p class="c11 c0"><span class="c2">git clone </span><span class="c21 c2"><a class="c14" href="https://github.com/dart-lang/io-2013-dart-codelab">https://github.com/dart-lang/io-2013-dart-codelab</a></span></p><p class="c6 c0"><span></span></p><p class="c0"><span>To get the source as a ZIP file:</span></p><p class="c6 c0"><span></span></p><ol class="c10 lst-kix_kf08e4mo0q15-0 start" start="1"><li class="c16 c11 c0"><span>Go to </span><span class="c21"><a class="c14" href="https://github.com/dart-lang/io-2013-dart-codelab">https://github.com/dart-lang/io-2013-dart-codela</a></span><span class="c21"><a class="c14" href="https://github.com/dart-lang/io-2013-dart-codelab">b</a></span></li><li class="c16 c11 c0"><span>Click the </span><span class="c1">Download </span><span class="c1">ZIP </span><span>button</span><span>&nbsp;in the right-hand column.</span></li></ol><p class="c11 c0"><img height="197" src="images/image34.png" width="200"></p><h3 class="c0"><a name="h.ygvsq0wvi55m"></a><span>Run the finished application</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>Now that you&rsquo;ve downloaded the source code, try out the finished application.</span></p><p class="c6 c0"><span></span></p><ol class="c10 lst-kix_oqqzpe3b3nud-0 start" start="1"><li class="c16 c11 c0"><span>If you haven&rsquo;t already done so, launch Dart Editor by double-clicking the </span><span class="c1">DartEditor</span><span>&nbsp;executable file.</span></li></ol><p class="c17 c0"><img height="93" src="images/image37.png" width="77"></p><p class="c11 c0"><span>If you have trouble, see </span><span class="c21"><a class="c14" href="http://www.dartlang.org/tools/editor/troubleshoot.html">Troubleshooting Dart Editor</a></span><span>.<br></span></p><ol class="c10 lst-kix_oqqzpe3b3nud-0" start="2"><li class="c16 c11 c0"><span>In Dart Editor, t</span><span>ype </span><span class="c1">Ctl+O</span><span>&nbsp;(Linux/Windows) or </span><span class="c1">Cmd+O</span><span>&nbsp;(Mac) </span><span>or choose </span><span class="c1">File &gt; </span><span class="c1">Open Existing Folder</span><span>.<br></span></li><li class="c16 c11 c0"><span>Select the </span><span class="c1">io-2013-codelab-finished</span><span>&nbsp;directory in the folder where you extracted the source code, and click </span><span class="c1">Open</span><span>.</span><span>&nbsp;</span></li></ol><p class="c11 c0"><span class="c1">IMPORTANT</span><span>: Make sure you open </span><span class="c1">io-2013-codelab-finished</span><span>&nbsp;and </span><span class="c1">not</span><span>&nbsp;its parent directory. Dart Editor analyzes all of the code in the open folder. For this code lab, it is more efficient to open just the directory for your active step rather than the top-level directory containing all of the steps.</span></p><p class="c11 c0"><img height="355" src="images/image32.png" width="800"></p><p class="c6 c11 c0"><span></span></p><p class="c11 c0"><span>Dart Editor </span><span>installs the app&rsquo;s dependenc</span><span>ies and starts building it. The progress bar is in the lower right corner of the window. Dart Editor keeps the dependencies and compiled version up-to-date. However, if you ever need or want to build the app manually, you can follow these steps:</span></p><ol class="c10 lst-kix_hvjet9voiiio-1 start" start="1"><li class="c16 c17 c0"><span>In the Files view, right-click </span><span class="c1">pubspec.yaml</span><span>&nbsp;and choose </span><span class="c1">Pub Install</span><span>.</span></li><li class="c16 c17 c0"><span>In the Tools menu, choose </span><span class="c1">Reanalyze Sources</span><span>.<br>(The editor might beat you to this, but it won&rsquo;t hurt to do it twice.)</span></li><li class="c16 c17 c0"><span>In the Files view, right-click</span><span>&nbsp;</span><span class="c1">build.da</span><span class="c1">rt</span><span>&nbsp;and choose </span><span class="c1">Run</span><span>. <br>The output should look </span><span>something</span><span>&nbsp;like the following.</span></li></ol><p class="c6 c11 c0"><span></span></p><p class="c17 c5 c0"><span class="c2">Total time spent on web/index.html &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -- 1159 ms</span></p><p class="c17 c5 c0"><span class="c2">Total time &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -- 1194 ms</span></p><p class="c17 c5 c0"><span class="c2">Build finished!</span></p><p class="c6 c0"><span></span></p><ol class="c10 lst-kix_oqqzpe3b3nud-0" start="4"><li class="c16 c11 c0"><span>Run the app in Dartium:</span></li></ol><ol class="c10 lst-kix_oqqzpe3b3nud-1 start" start="1"><li class="c16 c17 c0"><span>In the Files view, find the </span><span class="c1">web</span><span>&nbsp;directory and right-click its </span><span class="c1">index.html</span><span>&nbsp;file.</span></li><li class="c16 c17 c0"><span>Choose </span><span class="c1">Run in Dartium</span><span>. The app initially looks like this:</span></li></ol><p class="c17 c0"><img height="342" src="images/image18.png" width="660"><span><br></span><span class="c1">Note</span><span>: If you don&rsquo;t see an Untitled document, try steps 3a-3c. Also check that the </span><span class="c1">web</span><span>&nbsp;directory contains an </span><span class="c1">out</span><span>&nbsp;directory. Try running </span><span class="c1">web/out/index.html</span><span>. If it still doesn&rsquo;t work, restart Dart Editor.</span></p><p class="c6 c0"><span></span></p><ol class="c10 lst-kix_oqqzpe3b3nud-0" start="5"><li class="c16 c11 c0"><span>Play with the app</span><span>:</span></li></ol><ol class="c10 lst-kix_oqqzpe3b3nud-1" start="3"><li class="c16 c17 c0"><span>Click the + button to create an untitled document.</span></li><li class="c16 c17 c0"><span>Rename the untitled document by editing the title in the right-hand pane.</span></li><li class="c16 c17 c0"><span>Put some text in the document.</span></li><li class="c16 c17 c0"><span>Use the + button to create more documents.</span></li><li class="c16 c0 c17"><span>Use the </span><span class="c1">Filter documents</span><span>&nbsp;field to limit the documents shown to those that have a certain string in their title or contents.</span></li></ol><p class="c17 c0"><img height="320" src="images/image33.png" width="642"></p><ol class="c10 lst-kix_oqqzpe3b3nud-1" start="8"><li class="c16 c17 c0"><span>Make the window narrower, and observe how the layout changes.</span></li></ol><p class="c6 c0"><span></span></p><ol class="c10 lst-kix_oqqzpe3b3nud-0" start="6"><li class="c16 c11 c0"><span>Copy the app&rsquo;s URL from the tab that&rsquo;s running the app, then close that tab. Open another tab and navigate to the app&rsquo;s URL. Notice how all the documents you created remain, as long as you&rsquo;re using the same browser and profile.</span></li></ol><p class="c6 c0"><span></span></p><ol class="c10 lst-kix_oqqzpe3b3nud-0" start="7"><li class="c16 c11 c0"><span>Now that you&rsquo;ve see the app running in Dartium, try running it in your default browser and in another browser:</span></li></ol><ol class="c10 lst-kix_oqqzpe3b3nud-1" start="9"><li class="c16 c17 c0"><span>Quit the Dartium app, </span><span>either by closing its tab or by clicking the </span><span class="c38 c1">red square</span><span>&nbsp;in the Debugger pane.</span></li></ol><p class="c17 c0"><img height="80" src="images/image20.png" width="166"></p><ol class="c10 lst-kix_oqqzpe3b3nud-1" start="10"><li class="c16 c17 c0"><span>To </span><span>run the app in your default browser (probably </span><span class="c21"><a class="c14" href="https://www.google.com/intl/en/chrome/browser/">Chrome</a></span><span>), right-click </span><span class="c1">web/index.html </span><span>and choose </span><span class="c1">Run as JavaScript</span><span>. </span></li><li class="c16 c17 c0"><span>To run it in another browser:</span></li></ol><ol class="c10 lst-kix_hvjet9voiiio-2 start" start="1"><li class="c16 c30 c0"><span>From the </span><span class="c1">Run</span><span>&nbsp;menu, choose </span><span class="c1">Manage Launches</span><span>.</span></li><li class="c16 c30 c0"><span>Click the gray world button (to the left of the big </span><span class="c38 c1">red X</span><span>) to create a new </span><span>dart2js</span><span>&nbsp;launch.</span><span><br></span><img height="206" src="images/image13.png" width="397"></li><li class="c16 c30 c0"><span>Enter information for the launch. For example:<br>&#9656; Change &ldquo;New launch&rdquo; to </span><span class="c1">Writer in Firefox</span><span class="c1"><br></span><span>&#9656; For the HTML file, enter </span><span class="c1">/io-2013-codelab-finished/web/index.html</span></li></ol><p class="c30 c0"><span>&#9656; </span><span>Uncheck &ldquo;Use system default browser&rdquo;, and select the browser you need. For example, you might set the Browser field to </span><span class="c1">/Applications/Firefox.app</span></p><p class="c30 c0"><img height="437" src="images/image35.png" width="640"></p><ol class="c10 lst-kix_hvjet9voiiio-2" start="4"><li class="c16 c30 c0"><span>Click </span><span class="c1">Run</span><span>. Your app should look the same as it did in Dartium and your default browser:<br></span><img height="261" src="images/image24.png" width="495"><span><br>From now on, you can use the little arrow next to the Run button </span><img height="16" src="images/image04.png" width="16"><span>&nbsp;to choose the launch you want to use.</span></li></ol><p class="c0 c30"><img height="175" src="images/image27.png" width="593"></p><p class="c30 c6 c0"><span></span></p><h3 class="c0"><a name="h.yoqjazd1uxez"></a><span>Debug the running app</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>The easiest way to debug a Dart app is with Dart Editor and Dartium. Try this:</span></p><p class="c6 c0"><span></span></p><ol class="c10 lst-kix_m8zky1oy6k60-0 start" start="1"><li class="c16 c11 c0"><span>Open </span><span class="c1">web/app.dart</span><span>&nbsp;in Dart Editor. (Double-click it in the Files view.)</span></li><li class="c16 c11 c0"><span>In </span><span>app.dart</span><span>, find the </span><span>createDocument</span><span>() function (line 34).<br></span><span class="c15">Trick: </span><span class="c15">Right-click </span><span class="c15">in the Editor pane and choose </span><span class="c1 c15">Outline File</span><span class="c15">. Then click </span><span class="c1 c15">createDocument</span><span class="c15">.</span></li></ol><p class="c11 c0"><img height="271" src="images/image40.png" width="389"><span>&nbsp; &nbsp; </span><img height="218" src="images/image23.png" width="368"></p><ol class="c10 lst-kix_m8zky1oy6k60-0" start="3"><li class="c16 c11 c0"><span>Set a breakpoint in the function by double-clicking the gray bar </span><span>to the left of &ldquo;void createDocument() ...&rdquo;</span><span>.</span></li></ol><p class="c11 c0"><img height="123" src="images/image02.png" width="351"></p><ol class="c10 lst-kix_m8zky1oy6k60-0" start="4"><li class="c16 c11 c0"><span>Stop</span><span>&nbsp;the app if it&rsquo;s already running. You can close the browser window the app is running in or click the </span><span class="c1 c38">red</span><span>&nbsp;stop button in Dart Editor.</span></li></ol><p class="c11 c0"><img height="66" src="images/image11.png" width="280"></p><ol class="c10 lst-kix_m8zky1oy6k60-0" start="5"><li class="c16 c11 c0"><span>Run the app in </span><span>Dartium</span><span>. If you are using the launches menu, choose the launch with the mini </span><span class="c1 c50">blue</span><span>&nbsp;Chromium icon.</span><img height="140" src="images/image39.png" width="441"></li><li class="c16 c11 c0"><span>Get the app to hit the breakpoint.</span></li></ol><ol class="c10 lst-kix_pa6lflf2amnu-1 start" start="1"><li class="c16 c17 c0"><span>If you do not have any documents saved, the app hits the breakpoint on startup because it needs to create a new document to begin with.</span></li><li class="c16 c17 c0"><span>If the app starts up without hitting the breakpoint, c</span><span>reate a new</span><span>&nbsp;</span><span>document by clicking the + button.<br>The app hits the breakpoint.</span></li></ol><ol class="c10 lst-kix_m8zky1oy6k60-0" start="7"><li class="c16 c11 c0"><span>In the Debugger pane, open </span><span class="c1">top-level </span><span>and then click the </span><span class="c1">documents</span><span>&nbsp;variable (</span><span class="c15">not the </span><span class="c1 c15">document</span><span class="c15">&nbsp;variable)</span><span>. It&rsquo;</span><span>s an array of Document objects.</span><span>&nbsp;In the image below, the array contains three Document objects.</span></li></ol><p class="c11 c0"><img height="419" src="images/image15.png" width="345"></p><ol class="c10 lst-kix_m8zky1oy6k60-0" start="8"><li class="c16 c11 c0"><span>Use F5 or click the &ldquo;Step Into&rdquo; icon.</span></li></ol><p class="c11 c0"><img height="66" src="images/image05.png" width="280"><span><br></span><span>Whoops, now you&rsquo;re in library code!</span></p><ol class="c10 lst-kix_m8zky1oy6k60-0" start="9"><li class="c16 c11 c0"><span>Use F7 or the</span><span>&nbsp;&ldquo;Step Return&rdquo; icon</span><span>&nbsp;to get back into app.dart code.</span></li></ol><p class="c11 c0"><img height="66" src="images/image25.png" width="280"></p><ol class="c10 lst-kix_m8zky1oy6k60-0" start="10"><li class="c16 c11 c0"><span>In the Debugger pane, look at the </span><span class="c1">doc</span><span>&nbsp;variable, which is an instance of Document.</span></li><li class="c16 c11 c0"><span>Use F6 or &ldquo;Step Over&rdquo; to get to the next line of code.</span></li></ol><p class="c11 c0"><img height="66" src="images/image08.png" width="280"></p><ol class="c10 lst-kix_m8zky1oy6k60-0" start="12"><li class="c16 c11 c0"><span>Look at the top-level documents variable again. The array contains one more item than it did before.</span><img height="315" src="images/image28.png" width="277"></li><li class="c16 c11 c0"><span>Continue </span><span>playing with the debugger</span><span>.</span></li></ol><p class="c0"><span><br></span><span class="c1">Note: </span><span>Don&rsquo;t open Developer Tools in Dartium while you&rsquo;re debugging. Due to a bug, this crashes the debugger.</span></p><h1 class="c0 c3"><a name="h.m0iq4b5hbsv5"></a></h1><hr style="page-break-before:always;display:none;"><h1 class="c3 c0"><a name="h.iwp6w76ozn91"></a></h1><h1 class="c12 c0"><a name="h.mkmyy8842ats"></a><span>Overview: A visual summary of what you&rsquo;ll be doing</span></h1><p class="c6 c0"><span></span></p><a href="#" name="52d6a0f8e4829fea7de3b1d33f961a48fdaa7f9a"></a><a href="#" name="0"></a><table cellpadding="0" cellspacing="0" class="c13"><tbody><tr><td class="c25"><p class="c42 c5 c0 c7"><span>Begin with skeletal app</span></p></td><td class="c28"><p class="c4 c0"><img height="365" src="images/image31.png" width="344"><span>&nbsp;</span></p></td></tr><tr><td class="c25"><p class="c42 c5 c0 c7"><span>Add document word count to the footer</span></p></td><td class="c28"><p class="c4 c0"><img height="361" src="images/image29.png" width="341"></p></td></tr><tr><td class="c25"><p class="c42 c5 c0 c7"><span>Create side bar</span></p></td><td class="c28"><p class="c4 c0"><img height="365" src="images/image14.png" width="344"></p></td></tr><tr><td class="c25"><p class="c42 c5 c0 c7"><span>Add the ability to create, select, and </span><span>delete</span><span>&nbsp;documents</span></p></td><td class="c28"><p class="c4 c0"><img height="326" src="images/image17.png" width="359"></p></td></tr><tr><td class="c25"><p class="c42 c5 c0 c7"><span>Add search filter</span></p></td><td class="c28"><p class="c4 c0"><img height="317" src="images/image09.png" width="359"></p></td></tr><tr class="c22"><td class="c25"><p class="c5 c0 c7 c42"><span>Add local storage (provides document persistence between invocations)</span></p></td><td class="c28"><p class="c4 c0"><img height="314" src="images/image21.png" width="355"></p></td></tr><tr class="c22"><td class="c25"><p class="c42 c5 c0 c7"><span>Optimize layout for mobile devices</span></p></td><td class="c28"><p class="c0 c4"><span>Index </span><img height="197" src="images/image00.png" width="253"><span>&nbsp; Contents &nbsp; </span><img height="198" src="images/image36.png" width="254"></p></td></tr></tbody></table><p class="c6 c0"><span></span></p><h1 class="c0 c8"><a name="h.cpkpyn1nw7g"></a></h1><h1 class="c0"><a name="h.ymc534ugdysm"></a><span>Step 1: Begin with a skeletal app, add the word count to the footer using data binding</span></h1><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>Now that you have Dart Editor set up and understand how the application works, let&rsquo;s rebuild the app step-by-step, starting with a skeletal version. The code you downloaded from github contains a directory for each completed step of the code lab. So if necessary, you can begin each step with a correct version of the app. In the walkthrough portion of this step, you begin with the code in </span><span class="c1">io-2013-codelab-step1</span><span>.</span></p><h2 class="c0"><a name="h.uvnvnl2dm2ai"></a><span>What you will learn</span></h2><p class="c6 c0 c7"><span></span></p><p class="c0"><span>You can display the value of a Dart variable on your web page directly within the HTML code. When the value of the variable changes within the Dart program, the UI automatically updates.</span><span>&nbsp;This capability, called one-way data binding, is implemented by the Web UI public package. The Writer application uses one-way data binding to display the current document&rsquo;s word count in the footer of the page. </span></p><h2 class="c0"><a name="h.6jc7oqfnek9i"></a><span>Concepts overview</span></h2><p class="c6 c0"><span></span></p><ol class="c10 lst-kix_t9jkz28ln50j-0 start" start="1"><li class="c16 c11 c0 c7"><span>Import public packages.</span></li><li class="c16 c11 c0"><span>Libraries.</span></li><li class="c16 c11 c0 c7"><span>One-way data binding with Web UI.</span></li><li class="c16 c11 c0 c7"><span>Getters.</span></li></ol><h3 class="c0"><a name="h.lpjuflgo3igm"></a><span>Import public packages</span></h3><p class="c6 c0 c7"><span></span></p><p class="c0"><span>A </span><span>package</span><span>&nbsp;is a distributable bundle of code, often containing one or more libraries. The pub package manager helps you install and manage 3rd party packages. Dart&rsquo;s public repository </span><span class="c21"><a class="c14" href="http://pub.dartlang.org">pub.dartlang.org</a></span><span>&nbsp;hosts many useful packages, including the Web UI package, which you need later for this step. The code below is a </span><span class="c15">package import</span><span>, which </span><span>includes the Web UI package in a Dart file.</span></p><p class="c6 c0"><span></span></p><p class="c11 c0"><span class="c2">import &#39;package:web_ui/web_ui.dart&#39;; &nbsp;// import the Web UI package</span></p><p class="c6 c0"><span></span></p><p class="c0"><span class="c1 c33">Libraries</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Dart code can be organized into </span><span class="c15">libraries</span><span>. A library is a namespace that can contain top-level fields, top-level functions, classes, and more. A library can import other libraries, and be imported into other libraries.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>The Dart core libraries start with &quot;dart:&quot;, such as dart:core, dart:collection, and dart:async. These libraries come from the Dart SDK. For example, to import the core async library, simply add this to the top of your library:</span></p><p class="c6 c0"><span></span></p><p class="c11 c0"><span class="c2">import &#39;dart:async&#39;; &nbsp;// an </span><span class="c2">important</span><span class="c2">&nbsp;Dart core library</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>A library can be split across multiple files, also known as </span><span class="c15">parts</span><span>. We don&#39;t show an example of parts in the code lab.</span></p><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span class="c33 c1">One-way data binding with Web UI</span></p><p class="c6 c0 c7"><span></span></p><p class="c0"><span>The Web UI package implements one-way data binding, which provides dynamic and automatic synchronization between an HTML element and an observable Dart variable. The </span><span>@observable</span><span>&nbsp;meta-data annotation marks a variable to be observed. The Web UI compiler, </span><span>dwc</span><span>, generates extra code that notes changes to an observable variable and keeps the UI in sync with those changes. Here is an observable string:</span></p><p class="c6 c0"><span></span></p><p class="c11 c0"><span class="c2">@observable String aStringOfNote = &#39;Hello, World!&#39;;</span></p><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>The value of an observable variable can be embedded in an HTML page, by including the variable name between </span><span>double curly braces, {{</span><span class="c15">name_of_observable</span><span class="c15">_var</span><span>}},</span><span>&nbsp;within normal HTML code, </span><span>as shown:</span></p><p class="c6 c0 c7"><span></span></p><p class="c11 c0 c7"><span class="c2">&lt;p&gt; {{aStringOfNote}} &lt;/p&gt;</span></p><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>Later, if the value of the variable changes in the Dart code, the web page automatically updates to reflect the new value of the variable. For example, after the following line of Dart code runs, the paragraph element changes from </span><span>&ldquo;Hello, World!&rdquo;</span><span>&nbsp;to </span><span>&ldquo;Goodbye, cruel world!&rdquo;</span></p><p class="c6 c0 c7"><span></span></p><p class="c11 c0"><span class="c2">aStringOfNote = &#39;Hello, Universe!&#39;;</span></p><p class="c6 c0"><span></span></p><h3 class="c9 c0"><a name="h.2xeueasygjb"></a><span>Getters</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>Dart allows you to create getters and setters that look like fields when used. </span><span>This means your design can start with simple fields, and evolve over time to use getters and setters. No more defensive and preemptive encapsulation!</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Here is an </span><span>example</span><span>. Consider a simple </span><span>Car</span><span>&nbsp;class with a single field called </span><span>isRunning</span><span>.</span></p><p class="c6 c0"><span></span></p><p class="c11 c0"><span class="c2">class Car {</span></p><p class="c11 c0"><span class="c2">&nbsp; bool isRunning;</span></p><p class="c11 c0"><span class="c2">}</span></p><p class="c6 c11 c0"><span class="c2"></span></p><p class="c11 c0"><span class="c2">main() {</span></p><p class="c11 c0"><span class="c2">&nbsp; var car = new Car();</span></p><p class="c0 c11"><span class="c2">&nbsp; print(car.isRunning);</span></p><p class="c11 c0"><span class="c2">}</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Imagine that you later add an </span><span>Engine</span><span>&nbsp;field to </span><span>Car</span><span>. </span><span>Engine</span><span>&nbsp;knows if it&#39;s running, thereby making </span><span>Car</span><span>&#39;s </span><span>isRunning</span><span>&nbsp;field obsolete. Do you break existing users? No way! Use a getter method!</span></p><p class="c6 c0"><span></span></p><p class="c11 c0"><span class="c2">class Engine {</span></p><p class="c11 c0"><span class="c2">&nbsp; bool isRunning;</span></p><p class="c11 c0"><span class="c2">}</span></p><p class="c6 c11 c0"><span class="c2"></span></p><p class="c11 c0"><span class="c2">class Car {</span></p><p class="c11 c0"><span class="c2">&nbsp; Engine engine;</span></p><p class="c6 c11 c0"><span class="c2"></span></p><p class="c11 c0"><span class="c2">&nbsp; bool get isRunning =&gt; engine.isRunning;</span></p><p class="c11 c0"><span class="c2">}</span></p><p class="c6 c11 c0"><span class="c2"></span></p><p class="c11 c0"><span class="c2">main() {</span></p><p class="c11 c0"><span class="c2">&nbsp; var car = new Car();</span></p><p class="c11 c0"><span class="c2">&nbsp; print(car.isRunning);</span></p><p class="c11 c0"><span class="c2">}</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Notice how the usage of the </span><span>car.isRunning</span><span>&nbsp;is the same with both the getter and the field.</span><span>&nbsp;The users of the </span><span>Car</span><span>&nbsp;class did not have to update their code when you changed the implementation of </span><span>Car</span><span>.</span></p><h2 class="c0 c12"><a name="h.50b5692q1fjp"></a><span>Walkthrough</span></h2><h3 class="c9 c0"><a name="h.sv7ivpmaxg6a"></a><span>Open the code for step </span><span>1</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>Close the </span><span class="c1">io-2013-codelab-finished</span><span>&nbsp;directory: right-click on the folder in the Files view of Dart Editor and select </span><span class="c1">Close Folder </span><span>from the menu.</span></p><p class="c6 c0"><span></span></p><p class="c0"><img height="342" src="images/image12.png" width="448"></p><p class="c6 c0"><span></span></p><p class="c0"><span>Open </span><span class="c1">io-2013-codelab-step1</span><span>&nbsp;with </span><span class="c1">File &gt; Open Existing Folder</span><span>&nbsp;as you did with the finished directory in the previous step.</span></p><p class="c0"><span class="c1">IMPORTANT</span><span>: Make sure you open </span><span class="c1">io-2013-codelab-</span><span class="c1">step1</span><span>&nbsp;and </span><span class="c1">not</span><span>&nbsp;its parent directory. Dart Editor analyzes all of the code in the open folder. For this code lab, it is more efficient to open just the directory for your active step rather than the top-level directory containing all of the steps.</span></p><p class="c0"><img height="355" src="images/image38.png" width="800"></p><p class="c6 c11 c0"><span></span></p><p class="c0"><span>Dart Editor </span><span>installs</span><span class="c15">&nbsp;</span><span>the app&rsquo;s dependencies and builds it.</span></p><p class="c6 c0"><span></span></p><h3 class="c9 c0"><a name="h.wlekvj90m4yq"></a><span>Run the app</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>Right click </span><span class="c1">web/index.html</span><span>&nbsp;and choose </span><span class="c1">Run in Dartium...</span><span>. The app should initially look like this:</span></p><p class="c6 c0"><span></span></p><p class="c0"><img height="379" src="images/image03.png" width="428"></p><h3 class="c0"><a name="h.q7zj6hd0zod0"></a><span>Import the Web UI package</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>The </span><span class="c1">lib/document.dart</span><span>&nbsp;file contains the code that implements a plain text document. The Document keeps track of its creation time, has a title, and text content. In this step, you add a getter to the Document class that calculates the number of words in the document.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Double click </span><span class="c1">lib/document.dart</span><span>&nbsp;to open the file.</span></p><p class="c6 c0 c7"><span></span></p><p class="c0"><span>Near the top of the file, notice this comment. </span></p><p class="c11 c5 c0"><span class="c2">&hellip;</span></p><p class="c11 c5 c0"><span class="c2">/// STEP 1: Import the Web UI package</span></p><p class="c11 c5 c0"><span class="c2">&hellip;</span></p><p class="c6 c11 c5 c0"><span></span></p><p class="c0 c7"><span>Comments of this style appear throughout the code, clearly marking what to do for each numbered step. The </span><span class="c1">lib/document.dart</span><span>&nbsp;file has three comments for step one.</span></p><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>Beneath</span><span>&nbsp;the comment</span><span>, type in the import directive for including the Web UI package. In the gray code boxes throughout this code lab, the code you need to add is </span><span class="c35 c1">bold</span><span>. Code you need to delete is</span><span>&nbsp;</span><span class="c19">struck through</span><span>.</span></p><p class="c6 c0"><span></span></p><a href="#" name="1eb03ef741de58bf36f691312367c0d266536461"></a><a href="#" name="1"></a><table cellpadding="0" cellspacing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0"><span class="c2">// lib/document.dart</span></p><p class="c5 c0"><span class="c2">&hellip;</span></p><p class="c0"><span class="c2">/// STEP 1: Import the Web UI package.</span></p><p class="c0"><span class="c2 c1">import &#39;package:web_ui/web_ui.dart&#39;;</span></p><p class="c5 c0"><span class="c2">&hellip;</span></p></td></tr></tbody></table><p class="c6 c0"><span></span></p><h3 class="c0"><a name="h.84pihwlpka7h"></a><span>Mark the Document class with @observable</span></h3><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>Find the next </span><span>STEP 1</span><span>&nbsp;comment; it appears a few lines below the import directive you just </span><span>e</span><span>n</span><span>tered</span><span>.</span></p><p class="c11 c5 c0"><span class="c2">&hellip;</span></p><p class="c11 c0"><span class="c2">/// STEP 1: Mark the class with @observable.</span></p><p class="c11 c5 c0"><span class="c2">&hellip;</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Mark</span><span>&nbsp;the Document class with the </span><span>@observable</span><span>&nbsp;meta-data annotation. This makes all fields of an instance of the Document class observable.</span></p><p class="c6 c0"><span></span></p><a href="#" name="5c00fe5847c5c44c6a1bc33519c44743fce819af"></a><a href="#" name="2"></a><table cellpadding="0" cellspacing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0"><span class="c2">// lib/document.dart</span></p><p class="c5 c0"><span class="c2">&hellip;</span></p><p class="c0"><span class="c2">/// STEP 1: Mark the class with @observable.</span></p><p class="c0"><span class="c2 c1">@</span><span class="c2 c1">observable</span></p><p class="c0"><span class="c2">class Document {</span></p><p class="c5 c0"><span class="c2">&hellip;</span></p></td></tr></tbody></table><p class="c6 c0 c7"><span></span></p><h3 class="c0 c9"><a name="h.gbd8omocl705"></a><span>Calculate the word count for the current document</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>To find the final task for step 1 in the </span><span class="c35 c1">lib/document.dart</span><span>&nbsp;file,</span><span>&nbsp;s</span><span>earch for &ldquo;STEP 1&rdquo; and locate the comment for the wordCount method in the code. </span></p><p class="c11 c5 c0"><span class="c2">&hellip;</span></p><p class="c11 c0"><span class="c2">&nbsp; /// STEP 1: Add </span><span class="c2">wordCount</span><span class="c2">&nbsp;method.</span></p><p class="c11 c5 c0"><span class="c2">&hellip;</span></p><p class="c6 c11 c5 c0"><span></span></p><p class="c0"><span>To search in Dart Editor, go to the </span><span class="c1">Edit</span><span>&nbsp;menu and choose </span><span class="c1">Find/Replace...</span><span>. Then type &ldquo;STEP 1&rdquo; into the text field and click </span><span class="c1">Find</span><span>.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Under the comment, a</span><span>dd</span><span>&nbsp;the code for a new getter called wordCount. The getter uses the RegExp class, which is provided in the dart:core library, to calculate how many words are in the document. The return value of this getter is embedded in the </span><span>HTM</span><span>L in the next step.</span></p><p class="c6 c0"><span></span></p><a href="#" name="4f5973d69f8d5a7e7245aa340d736601c6085760"></a><a href="#" name="3"></a><table cellpadding="0" cellspacing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0"><span class="c2">// lib/document.dart</span></p><p class="c5 c0"><span class="c2">&hellip;</span></p><p class="c5 c0"><span class="c2">&nbsp; /// STEP 1: Add wordCount method.</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; /**</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp;* &nbsp;Number of words in the document.</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp;*</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp;* &nbsp;A &quot;word&quot; is a string of characters separated by a space or a newline.</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp;*/</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; String get wordCount {</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; int count = new RegExp(r&quot;(\w|\&#39;)+&quot;).allMatches(_content).length;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; if (count &gt; 1) {</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; return &#39;$count words&#39;;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; } else if (count == 1) {</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; return &#39;$count word&#39;;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; }</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; return &#39;No words - Yo, Yo write something...&#39;;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; }</span></p><p class="c5 c0"><span class="c2">&hellip;</span></p></td></tr></tbody></table><h3 class="c9 c27 c0"><a name="h.ionqzezeva8k"></a></h3><p class="c0"><span>Save the file using </span><span class="c1">File &gt; Save</span><span>. You have completed all of the step 1 tasks in the </span><span class="c1">lib/document.dart </span><span>file.</span></p><p class="c6 c0"><span></span></p><h3 class="c9 c0"><a name="h.tvdyvkmtr48d"></a><span>Embed the word count in the footer of the web page.</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>The HTML page that hosts the Writer app is </span><span class="c1">web/index.html</span><span>. Let&rsquo;s add the word count to the footer of the page.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Double click</span><span>&nbsp;</span><span class="c1">web/index.html </span><span>to open it.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Search for &ldquo;STEP 1&rdquo; and locate the code for the footer.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Add the code to d</span><span>isplay the word count in the footer of the document</span><span>, using the double curly bracket syntax.</span></p><p class="c6 c0"><span></span></p><a href="#" name="f6fe9061c4c563e8371a0634aedb78d26f02c3d1"></a><a href="#" name="4"></a><table cellpadding="0" cellspacing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0"><span class="c2">// web/index.html</span></p><p class="c5 c0"><span class="c2">&hellip;</span></p><p class="c5 c0"><span class="c2">&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;footer&quot;&gt;</span></p><p class="c6 c5 c0"><span class="c2"></span></p><p class="c5 c0"><span class="c2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- STEP 1: Show the current word count. --&gt;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{activeDocument.wordCount}}</span></p><p class="c6 c5 c0"><span class="c2"></span></p><p class="c5 c0"><span class="c2">&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;</span></p><p class="c5 c0"><span class="c2">&hellip;</span></p></td></tr></tbody></table><p class="c6 c0"><span class="c2"></span></p><p class="c0"><span>Save your changes with </span><span class="c1">File &gt; Save</span><span>. You have completed all of the step 1 tasks.</span></p><h3 class="c9 c0"><a name="h.lz56mhvll7k0"></a><span>Run the revised version of the app.</span></h3><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>Run the app again</span><span>, and type in the document. As you type, the word count updates at the bottom of the page:</span></p><p class="c0 c7"><img height="390" src="images/image22.png" width="539"></p><p class="c6 c0"><span></span></p><p class="c0"><span>Congratulations! You&rsquo;ve completed the first step.</span></p><h1 class="c8 c0"><a name="h.nxg0ahyrlxhi"></a></h1><hr style="page-break-before:always;display:none;"><h1 class="c8 c0"><a name="h.bl9vt9tueqdf"></a></h1><h1 class="c0"><a name="h.bdr5squ6r500"></a><span>Step 2: Create a sidebar to list the documents</span></h1><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>The family of Web Component specifications, such as custom elements and HTML imports, give the web developer real encapsulation of the structure, style, and behaviors of elements in the DOM. With help from the Web UI package, you can make your own tags!</span></p><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>In this step, using the </span><span>&lt;element&gt; tag,</span><span>&nbsp;you create a custom element to implement the behavior and view of a sidebar that lists the documents. Then, you use the new custom element to create a sidebar in the Writer app.</span></p><h2 class="c0"><a name="h.k74i547r3lz2"></a><span>What you will learn</span></h2><ol class="c10 lst-kix_kvgsl0s9rzo4-0 start" start="1"><li class="c16 c11 c0"><span>Define custom elements.</span></li><li class="c16 c11 c0"><span>Import HTML into HTML.</span></li><li class="c16 c11 c0"><span>Use custom elements.</span></li><li class="c16 c11 c0"><span>One-line functions.</span></li></ol><h2 class="c0"><a name="h.q4bjn1j36hoo"></a><span>Concepts overview</span></h2><h3 class="c0"><a name="h.mvtayj1q6so5"></a><span>Define c</span><span>ustom elements</span></h3><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>A custom </span><span>element </span><span>extends the lexicon of HTML</span><span>.</span><span>&nbsp;A custom element definition encapsulates the structure (the HTML), styles (CSS), and behavior (Dart or JavaScript code) of a new kind of element. For example, you can extend </span><span>&lt;button&gt;</span><span>&nbsp;to create </span><span>a</span><span>&nbsp;</span><span>&lt;fancy-button&gt;</span><span>&nbsp;tag, with new custom behaviors and appearance.</span></p><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>By convention, custom element names begin with </span><span>x-. F</span><span>or example </span><span>&lt;x-flower&gt;</span><span>. Custom element names </span><span class="c15">must</span><span>&nbsp;have a hyphen (-) in their name, such as &lt;fancy-button&gt;. Following the </span><span>x-</span><span>&nbsp;naming convention ensures that your custom element &nbsp;names always have a hyphen.</span></p><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>The new </span><span>&lt;element&gt;</span><span>&nbsp;tag allows you to declare a new element (using HTML to declare HTML, I like it!) Here is an example:</span></p><p class="c6 c0 c7"><span></span></p><p class="c11 c0 c7"><span class="c2">&lt;element name=&quot;x-comment&quot; extends=&quot;div&quot; constructor=&quot;CommentComponent&quot;&gt;</span></p><p class="c11 c0 c7"><span class="c2">&nbsp; &lt;template&gt;</span></p><p class="c11 c0 c7"><span class="c2">&nbsp; &nbsp; &lt;div class=&quot;name&quot;&gt;{{name}}&lt;/div&gt;</span></p><p class="c11 c0 c7"><span class="c2">&nbsp; &nbsp; &lt;div class=&quot;comment&quot;&gt;&lt;content&gt;&lt;/content&gt;&lt;/div&gt;</span></p><p class="c11 c0 c7"><span class="c2">&nbsp; &lt;/template&gt;</span></p><p class="c11 c0 c7"><span class="c2">&nbsp;</span><span class="c2">&nbsp;&lt;script type=&quot;application/dart&quot;&gt;</span></p><p class="c11 c0 c7"><span class="c2">&nbsp; &nbsp; import &#39;package:web_ui/web_ui.dart&#39;;</span></p><p class="c11 c0 c7"><span class="c2">&nbsp; &nbsp; class CommentComponent extends WebComponent {</span></p><p class="c11 c0 c7"><span class="c2">&nbsp; &nbsp; &nbsp; String name;</span></p><p class="c11 c0 c7"><span class="c2">&nbsp; &nbsp; &nbsp; String comment;</span></p><p class="c11 c0 c7"><span class="c2">&nbsp; &nbsp; }</span></p><p class="c11 c0 c7"><span class="c2">&nbsp; &lt;/script&gt;</span><sup><a href="#cmnt1" name="cmnt_ref1">[a]</a></sup></p><p class="c11 c0 c7"><span class="c2">&lt;/element&gt;</span></p><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>The element tag defines a new kind of HTML element. To create an instance of a custom element use the element name as you would any other HTML tag. To create an instance of the element defined above, write &lt;x-comment&gt;. A custom element instance </span><span class="c15">must</span><span>&nbsp;have a closing tag &lt;/x-comment&gt;.</span></p><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>Within the template definition above, notice the &lt;content&gt; tag. When an &lt;x-comment&gt; element is instantiated, you can use other HTML elements between </span><span>&lt;x-comment&gt; and &lt;/x-comment&gt;, a paragraph, a span, a list, for example. Those elements replace the &lt;content&gt; tag for that instantiation. </span><span>Using attributes, you can filter for specific elements to replace the &lt;content&gt; tag.</span></p><h3 class="c0"><a name="h.cu2zzp8exzxx"></a><span>Import HTML into HTML</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>To use a custom element, you often </span><span class="c15">import</span><span>&nbsp;the HTML that contains the </span><span>&lt;element&gt;</span><span>&nbsp;tag. Luckily, HTML has a method for including resources: the </span><span>&lt;link&gt;</span><span>&nbsp;tag. Here is an example:</span></p><p class="c6 c0"><span></span></p><p class="c11 c0"><span class="c2">&lt;link rel=&quot;import&quot; href=&quot;comment_component.html&quot;&gt;</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>T</span><span>he </span><span>&lt;link&gt;</span><span>&nbsp;tag must appear in the </span><span>&lt;head&gt;</span><span>&nbsp;of the document.</span></p><p class="c6 c0"><span></span></p><h3 class="c0"><a name="h.9ahc7aijhm6g"></a><span>Use custom elements</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>Once you have imported the custom element, you can use it in your document. Here is an example:</span></p><p class="c6 c0"><span></span></p><p class="c11 c0"><span class="c2">&lt;ul&gt;</span></p><p class="c11 c0"><span class="c2">&nbsp; &lt;li&gt;&lt;x-comment name=&quot;Bob&quot;&gt;I totally agree!&lt;/x-comment&gt;&lt;/li&gt;</span></p><p class="c11 c0"><span class="c2">&nbsp; &lt;li&gt;&lt;x-comment name=&quot;Alice&quot;&gt;I totally disagree!&lt;/x-comment&gt;&lt;/li&gt;</span></p><p class="c11 c0"><span class="c2">&lt;/ul&gt;</span></p><h3 class="c9 c0"><a name="h.w7is3otkoy1o"></a><span>One-line functions</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>Dart makes it easy and terse to write one-line functions with the &quot;fat arrow&quot; syntax. Here is an example:</span></p><p class="c6 c0"><span></span></p><p class="c11 c0"><span class="c2">int nextNumber() =&gt; i++;</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>The above code is syntactic sugar for:</span></p><p class="c6 c0"><span></span></p><p class="c11 c0"><span class="c2">int nextNumber() {</span></p><p class="c11 c0"><span class="c2">&nbsp; return i++;</span></p><p class="c11 c0"><span class="c2">}</span></p><h2 class="c0"><a name="h.lx7xe3hizh5u"></a><span>Walkthrough</span></h2><h3 class="c0"><a name="h.nnxh8c8g9rvf"></a><span>The custom element&#39;s file</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>First, create a new file for the custom element inside of the </span><span class="c1">web/</span><span>&nbsp;directory.</span></p><p class="c6 c0"><span></span></p><ol class="c10 lst-kix_57tjkabqizo2-0 start" start="1"><li class="c11 c0 c16"><span>Right-click on the </span><span class="c1">web</span><span>&nbsp;directory and select &quot;</span><span class="c1">New File</span><span>&quot;.</span></li><li class="c16 c11 c0"><span>Name this file &quot;document_item.html&quot;. Dart Editor provides some boilerplate code. Delete it.</span></li><li class="c16 c11 c0"><span>Open </span><span class="c1">__for_later/document_item.html</span><span>, copy its contents, and paste it into </span><span class="c1">web/document_item.html</span><span>.</span></li></ol><p class="c6 c0"><span></span></p><h3 class="c9 c0"><a name="h.kvlk5fbt87kg"></a><span>Declare the custom element</span></h3><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>Ensure you are working in </span><span class="c1">web/document_item.html</span><span>, and add the following code:</span></p><p class="c6 c0 c7"><span></span></p><a href="#" name="b009468215a0c56688786bc71c4766d48ed7b514"></a><a href="#" name="5"></a><table cellpadding="0" cellspacing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0 c7"><span class="c2">// web/document_item.html</span></p><p class="c5 c0 c7"><span class="c2">&lt;html&gt;&lt;body&gt;</span></p><p class="c5 c0 c7"><span class="c2">&nbsp; &lt;!-- STEP 2: Define a custom element. &rarr;</span></p><p class="c6 c5 c0 c7"><span class="c2"></span></p><p class="c5 c0 c7"><span class="c2 c1">&nbsp; &lt;element name=&quot;x-document-item&quot; constructor=&quot;DocumentItem&quot;</span></p><p class="c5 c0 c7"><span class="c2 c1">&nbsp; &nbsp; &nbsp; extends=&quot;div&quot; </span><span class="c2 c1">apply-author-styles</span><span class="c2 c1">&gt;</span></p><p class="c6 c5 c0 c7"><span class="c2 c1"></span></p><p class="c5 c0 c7"><span class="c2 c1">&nbsp; &nbsp; &lt;!-- STEP 2: Define the DOM template for our custom element --&gt;</span></p><p class="c5 c0 c7"><span class="c2 c1">&nbsp; &nbsp; &lt;template&gt;</span></p><p class="c6 c5 c0 c7"><span class="c2 c1"></span></p><p class="c5 c0 c7"><span class="c2 c1">&nbsp; &nbsp; &lt;/template&gt;</span></p><p class="c6 c5 c0 c7"><span class="c2 c1"></span></p><p class="c5 c0 c7"><span class="c2 c1">&nbsp; &nbsp; &lt;!-- STEP 2: Add the script tag that defines this component&#39;s behaviour. --&gt;</span></p><p class="c5 c0 c7"><span class="c2 c1">&nbsp; &nbsp; &lt;script type=&quot;application/dart&quot;&gt;</span></p><p class="c6 c5 c0 c7"><span class="c2 c1"></span></p><p class="c5 c0 c7"><span class="c2 c1">&nbsp; &nbsp; &lt;/script&gt;</span></p><p class="c5 c0 c7"><span class="c2 c1">&nbsp; &lt;/element&gt;</span></p><p class="c6 c5 c0 c7"><span class="c2"></span></p><p class="c5 c0 c7"><span class="c2">&lt;/body&gt;&lt;/html&gt;</span></p><p class="c5 c0 c7"><span class="c2">&hellip;</span></p></td></tr></tbody></table><p class="c18 c6 c0 c7"><span class="c2"></span></p><p class="c0"><span>A few notes about the code above:</span></p><p class="c6 c0"><span></span></p><ul class="c10 lst-kix_bnpbicbhbbru-0 start"><li class="c16 c11 c0"><span>The name of the element is </span><span>x</span><span>-document-item</span><span>.</span></li><li class="c16 c11 c0"><span>The custom element extends </span><span>&lt;div&gt;</span><span>. That is, </span><span>x-document-item</span><span>&nbsp;is a special kind of div.</span></li><li class="c16 c11 c0"><span>Some behavior of the </span><span>x-document-item</span><span>&nbsp;is implemented by a </span><span>Dart class named </span><span>DocumentItem</span><span>. You will create and include this class below.</span></li><li class="c16 c11 c0"><span>The </span><span>apply-author-styles</span><span>&nbsp;attribute indicates that styles from the larger HTML document apply to the contents of the custom component.</span></li></ul><p class="c6 c0"><span></span></p><p class="c0"><span>Notice the </span><span>&lt;template&gt;</span><span>&nbsp;tag inside of </span><span>&lt;element&gt;</span><span>. A custom element can define its own structure with the </span><span>&lt;template&gt;</span><span>&nbsp;tag. Fill in this template now.</span></p><h3 class="c0"><a name="h.l68l6dl0jzre"></a><span>The template</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>Add the code for the template as shown. Y</span><span>ou need to also add the comments</span><span>&nbsp;for STEP 3 just as we have them in the code. You need the comments to orient yourself later when you implement Step 3.</span></p><p class="c6 c0"><span></span></p><a href="#" name="7042cc209fcf1d47ccfc4265721fd964e76e6f4f"></a><a href="#" name="6"></a><table cellpadding="0" cellspacing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0"><span class="c2">// web/document_item.html</span></p><p class="c5 c0"><span class="c2">&hellip;</span></p><p class="c5 c0"><span class="c2">&nbsp; &nbsp; &lt;!-- STEP 2: Define the DOM template for our custom element --&gt;</span></p><p class="c5 c0"><span class="c2">&nbsp; &nbsp; &lt;template&gt;</span></p><p class="c6 c5 c0"><span class="c2"></span></p><p class="c5 c0"><span class="c1 c2">&nbsp; &nbsp; &nbsp; </span><span class="c2 c1">&lt;!-- STEP 3: On click, select the document. --&gt;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &lt;div class=&quot;item {{isActiveClass}}&quot;&gt;</span></p><p class="c6 c5 c0"><span class="c2 c1"></span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;title&quot;&gt;{{title}}&lt;/div&gt;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;modified&quot;&gt;{{modified}}&lt;/div&gt;</span></p><p class="c6 c5 c0"><span class="c2 c1"></span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- STEP 3: Add delete button. --&gt;</span></p><p class="c6 c5 c0"><span class="c2 c1"></span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &lt;/div&gt;</span></p><p class="c5 c0"><span class="c2">&nbsp; &nbsp; &lt;/template&gt;</span></p><p class="c5 c0"><span class="c2">&hellip;</span></p></td></tr></tbody></table><p class="c6 c0"><span></span></p><p class="c0"><span>You can use one-way data binding in a template. Each time a custom element is instantiated, an instance of the Dart class is created and associated with the custom element. Data bindings in the template are bound to fields in that Dart instance. For example, </span><span>{{title}}</span><span>&nbsp;binds to a field from the instance of </span><span>DocumentItem that is created when an element of this type is created. </span><span>It&#39;s a good idea to move all logic into the Dart class, and just use fields and getters for the HTML.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Speaking of the class, let&#39;s add that now!</span></p><p class="c6 c0"><span></span></p><p class="c0"><span class="c33 c1">The script</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Use a </span><span>&lt;script&gt;</span><span>&nbsp;tag to declare the Dart class that goes with the custom element. The Dart class contains any state and behavior applicable to the view.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Ensure you are still editing </span><span class="c1">web/document_item.html</span><span>, and add the following code inside the &lt;script&gt; and &lt;/script&gt; tags:</span></p><p class="c6 c0"><span></span></p><a href="#" name="38b92f10e28849103dac69976e506327495960f7"></a><a href="#" name="7"></a><table cellpadding="0" cellspacing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0"><span class="c2">// web/document_item.html</span></p><p class="c5 c0"><span class="c2">&hellip;</span></p><p class="c5 c0"><span class="c2">&nbsp; &nbsp; &lt;!-- STEP 2: Add the script tag that defines this component&#39;s behaviour. --&gt;</span></p><p class="c5 c0"><span class="c2">&nbsp; &nbsp; &lt;script type=&quot;application/dart&quot;&gt;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; import &#39;package:web_ui/web_ui.dart&#39;;</span></p><p class="c6 c5 c0"><span class="c2 c1"></span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; import &#39;package:writer/document.dart&#39;;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; import &#39;app.dart&#39; as app;</span></p><p class="c6 c5 c0"><span class="c2 c1"></span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; /**</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &nbsp;* This Dart class defines the behavior and</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &nbsp;* state of the custom element.</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &nbsp;*/</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; class DocumentItem extends WebComponent {</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &nbsp; Document </span><span class="c2 c1">doc</span><span class="c2 c1">;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &nbsp; </span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &nbsp; String get title =&gt; doc.title.isEmpty ? &#39;Untitled&#39; : doc.title;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &nbsp; </span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &nbsp; String get modified =&gt; </span><span class="c2 c1">dateFormat</span><span class="c2 c1">.format(doc.modified);</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &nbsp; </span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &nbsp; String get isActiveClass =&gt; doc == app.activeDocument ? &#39;active</span><span class="c2 c1">&#39; :</span><span class="c2 c1">&nbsp;&#39;&#39;;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; }</span></p><p class="c5 c0"><span class="c2">&nbsp; &nbsp; &lt;/script&gt;</span></p><p class="c5 c0"><span class="c2">&hellip;</span></p></td></tr></tbody></table><p class="c6 c0"><span></span></p><p class="c0"><span class="c1">Note</span><span>: Dart Editor doesn&#39;t yet fully support Dart code embedded inside of </span><span>&lt;script&gt;</span><span>&nbsp;tags. For example, you can&#39;t use code completion inside of a </span><span>&lt;script&gt;</span><span>&nbsp;tag yet. We anticipate that the editor will have this functionality in time for 1.0.</span></p><p class="c6 c0"><span class="c2"></span></p><p class="c0"><span>A few notes about the code above:</span></p><ul class="c10 lst-kix_iqyc5gy523tq-0 start"><li class="c16 c11 c0"><span>The </span><span>DocumentItem</span><span>&nbsp;class acts as a </span><span class="c15">View Model</span><span>, encapsulating any state used by the view, and linking model classes like Document to the view. We use getters for </span><span>title</span><span>, modified, and </span><span>isActiveClass</span><span>&nbsp;</span><span>because</span><span>&nbsp;calling a getter is shorter than calling a method.</span></li><li class="c16 c11 c0"><span>A </span><span>DocumentItem</span><span>&nbsp;uses a </span><span>Document</span><span>&nbsp;object, called </span><span>doc</span><span>, for its data model. The </span><span>doc</span><span>&nbsp;field gets initialized when the custom element gets instantiated. You&rsquo;ll see this later when you add the sidebar in the HTML code.</span></li><li class="c16 c11 c0"><span>The </span><span>Document</span><span>&nbsp;class defines a top-level object, called </span><span>dateFormat</span><span>, used to format the modified date. (Look at the bottom of </span><span class="c1">lib/document.dart</span><span>&nbsp;</span><span>for the code that creates </span><span>dateFormat</span><span>.) The </span><span>DateFormat</span><span>&nbsp;class is provided by the </span><span>intl</span><span>&nbsp;package.</span></li></ul><p class="c6 c0"><span></span></p><p class="c0"><span>&nbsp;Save your changes to </span><span class="c1">web/document_item.html</span><span>.</span></p><h3 class="c0"><a name="h.pg2b8doo4y91"></a><span>Import the custom element into the main HTML</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>To create instances of &lt;x-document-item&gt;, the main application&#39;s HTML needs to import the code that defines the custom &lt;x-document-item&gt; tag. Luckily, HTML already has a mechanism to link to other resources: the &lt;link&gt; tag!</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Open </span><span class="c1">web/index.html</span><span>&nbsp;and add the following code:</span></p><p class="c6 c0"><span></span></p><a href="#" name="090acfcf20bc970a0ebbc86e3935b6445f53431d"></a><a href="#" name="8"></a><table cellpadding="0" cellspacing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0"><span class="c2">// web/index.html</span></p><p class="c5 c0"><span class="c2">&hellip;</span></p><p class="c5 c0"><span class="c2">&nbsp; &nbsp; &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css.css&quot;&gt;</span></p><p class="c6 c5 c0"><span class="c2"></span></p><p class="c5 c0"><span class="c2">&nbsp; &nbsp; &lt;!-- STEP 2: Import the document item component. --&gt;</span></p><p class="c5 c0"><span class="c2">&nbsp; &nbsp; </span><span class="c2 c1">&lt;link rel=&quot;import&quot; href=&quot;document_item.html&quot;&gt;</span></p><p class="c6 c5 c0"><span class="c2"></span></p><p class="c5 c0"><span class="c2">&nbsp; &lt;/head&gt;</span></p><p class="c5 c0"><span class="c2">&hellip;</span></p></td></tr></tbody></table><p class="c6 c0"><span></span></p><h3 class="c0"><a name="h.eu70myeqpqpx"></a><span>Add the sidebar</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>With the custom element implemented, and imported, time to use &lt;x-document-item&gt;!</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Make sure you are still editing </span><span class="c1">web/index.html</span><span>. And</span><span>&nbsp;yes, </span><span>you need to write all those comments</span><span>&nbsp;just as we have them in the code. You will add more functionality in the following steps, so you need the comments to ensure you can orient yourself later.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Add the following code:</span></p><p class="c6 c0"><span></span></p><a href="#" name="d70e43e44b21a0f2da93cec4f6a9b1f60f8acb67"></a><a href="#" name="9"></a><table cellpadding="0" cellspacing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0"><span class="c2">// web/index.html</span></p><p class="c5 c0"><span class="c2">&hellip;</span></p><p class="c5 c0"><span class="c2">&nbsp; &lt;body&gt;</span></p><p class="c6 c5 c0"><span class="c2"></span></p><p class="c5 c0"><span class="c2">&nbsp; &nbsp; &lt;!-- STEP 2: Add a sidebar to the application. --&gt;</span></p><p class="c5 c0"><span class="c2">&nbsp; &nbsp; </span><span class="c2 c1">&lt;section id=&quot;sidebar&quot; class=&quot;{{sidebarClass}}&quot;&gt;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &lt;div class=&quot;toolbar&quot;&gt;</span></p><p class="c6 c5 c0"><span class="c2 c1"></span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- STEP 3: Add a button to create a new document. --&gt;</span></p><p class="c6 c5 c0"><span class="c2 c1"></span></p><p class="c6 c5 c0"><span class="c2 c1"></span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;input-wrap&quot;&gt;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- STEP 4: Add a input box to filter documents. --&gt;</span></p><p class="c6 c5 c0"><span class="c2 c1"></span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &lt;/div&gt;</span></p><p class="c6 c5 c0"><span class="c2 c1"></span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &lt;!-- Documents list --&gt;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &lt;div class=&quot;items&quot;&gt;</span></p><p class="c6 c5 c0"><span class="c2 c1"></span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- STEP 3: Iterate over list of documents. --&gt;</span></p><p class="c6 c5 c0"><span class="c2 c1"></span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- STEP 2: Add the active document to the sidebar. --&gt;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c2 c1">&lt;x-document-item doc=&quot;{{activeDocument}}&quot;&gt;&lt;/x-document-item&gt;</span></p><p class="c6 c5 c0"><span class="c2 c1"></span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &lt;/div&gt;</span></p><p class="c6 c5 c0"><span class="c2 c1"></span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &lt;!-- Also check out dartlang.org! --&gt;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &lt;div class=&quot;footer&quot;&gt;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;https://github.com/dart-lang/io-2013-dart-codelab&quot;&gt;View Source&lt;/a&gt;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &lt;/div&gt;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &lt;/section&gt;</span></p><p class="c6 c5 c0"><span class="c2"></span></p><p class="c5 c0"><span class="c2">&nbsp; &nbsp; &lt;!-- Editing window --&gt;</span></p><p class="c5 c0"><span class="c2">&nbsp; &nbsp; &lt;section id=&quot;main&quot; class=&quot;{{mainClass}}&quot;&gt;</span></p><p class="c5 c0"><span class="c2">&hellip;</span></p></td></tr></tbody></table><p class="c6 c0"><span></span></p><p class="c0"><span>Take a look at </span><span>&lt;x-document-item doc=&quot;{{activeDocument}}&quot;&gt;</span><span>. The active document is bound into the </span><span>x-document-item</span><span>&nbsp;tag via the </span><span>doc</span><span>&nbsp;attribute. </span><span>The </span><span>activeDocument</span><span>&nbsp;object is a top-level variable from app.dart.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Save your changes in </span><span class="c1">web/index.html</span><span>&nbsp;and in </span><span class="c1">web/document_item.html</span><span>, if you haven&rsquo;t already done so.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Depending on the order in which you saved the files, you might see warnings or errors in Dart Editor complaining about unknown custom elements. Try running </span><span class="c1">Tools &gt; Reanalyze Sources</span><span>.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Run </span><span>the app. On the left side of the app is a sidebar that contains a document.</span></p><p class="c6 c0"><span></span></p><p class="c0"><img height="449" src="images/image26.png" width="558"></p><p class="c6 c0"><span></span></p><hr style="page-break-before:always;display:none;"><p class="c6 c0"><span></span></p><h1 class="c0"><a name="h.yjqv0zg28trz"></a><span>Step 3: Add the ability to create, delete, and select documents in the list</span></h1><p class="c6 c0"><span></span></p><p class="c0 c7"><span>In this step, you&rsquo;ll implement support for creating, deleting, and selecting documents. Your code will use an observable list to keep track of which documents exist.</span></p><h2 class="c0"><a name="h.plhwv16qfiu3"></a><span>What you will learn</span></h2><p class="c6 c0 c7"><span></span></p><ol class="c10 lst-kix_1c0w7icorqz1-0 start" start="1"><li class="c16 c11 c0 c7"><span>Using Web UI&rsquo;s</span><span>&nbsp;toObservable()</span><span>&nbsp;function to make a list observable.</span></li><li class="c16 c11 c0 c7"><span>Using </span><span>&lt;template iterate...&gt;</span><span>&nbsp;to </span><span>create an element </span><span>for each item in a list.</span></li></ol><h2 class="c0"><a name="h.t4xdkmcfgxgs"></a><span>Concepts overview</span></h2><h3 class="c9 c0"><a name="h.9plpwum2ndhq"></a><span>The toObservable() function</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>Use the </span><span>toObservable()</span><span>&nbsp;function from the Web UI library to make a List or a Map observable. In the Writer app, making the list of documents observable enables Web UI to update your app&rsquo;s UI whenever a document is created or deleted.</span></p><h3 class="c9 c0"><a name="h.q05y2y7gn8pj"></a><span>Template iterate</span></h3><p class="c6 c0 c7"><span></span></p><p class="c0"><span>Template loops allow iteration over Iterable Dart objects, such as Collections. To create a loop that operates on each item in an Iterable object, use the iterate attribute in a &lt;template&gt; tag. The code below displays the alphabet by looping over a list of strings, of which each string contains a single character.</span></p><p class="c6 c0"><span></span></p><p class="c11 c0"><span class="c2">// in Dart code</span></p><p class="c11 c0"><span class="c2">List&lt;String&gt; alphabet = toObservable(&lsquo;abcdefghijklmnopqrstuvwxyz&rsquo;.split(&#39;&#39;));</span></p><p class="c6 c11 c0"><span class="c2"></span></p><p class="c11 c0"><span class="c2">// in HTML code</span></p><p class="c11 c0"><span class="c2">&lt;template iterate=&quot;letter in alphabet&quot;&gt; {{letter}} &lt;/template&gt;</span></p><h2 class="c0"><a name="h.k15z6n5pmnu0"></a><span>Walkthrough</span></h2><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>You&rsquo;ll be editing three files this time: </span><span class="c1">web/app.dart</span><span>, </span><span class="c1">web/</span><span class="c1">index.html</span><span>, and </span><span class="c1">web/</span><span class="c1">document_item.html</span><span>.</span></p><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>(</span><span class="c1">Optional</span><span>: Remember that if necessary, you can start with clean files for each step. If you want to, close the directory for step 2 and open the &nbsp;</span><span class="c1">io-2013-codelab-step3</span><span>&nbsp;directory now.</span><span>)</span></p><h3 class="c0"><a name="h.1jxajn4fbphg"></a><span>Add an observable list of documents</span></h3><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>Open </span><span class="c1">web/app.dart </span><span>and add the line of code shown below that creates an empty, observable list of documents.</span></p><p class="c6 c0 c7"><span></span></p><a href="#" name="003e7a132719843844266db196a529a3a66c108e"></a><a href="#" name="10"></a><table cellpadding="0" cellspacing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0 c7"><span class="c2">// web/app.dart</span></p><p class="c6 c5 c0 c7"><span class="c2"></span></p><p class="c5 c0 c7"><span class="c2">// STEP 3: Add an observed list of documents.</span></p><p class="c5 c0 c7"><span class="c2 c1">final List&lt;Document&gt; documents = toObservable([]);</span></p></td></tr></tbody></table><p class="c6 c0 c7"><span></span></p><h3 class="c9 c0"><a name="h.rcpcobm9frxp"></a><span>Add functions for creating, deleting, and selecting documents</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>First, let&rsquo;s implement </span><span>creating documents</span><span>.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Continue editing </span><span class="c1">web/app.dart</span><span>.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Add the </span><span>createDocument()</span><span>&nbsp;function to </span><span class="c1">web/app.dart </span><span>where indicated by the comments. The new function calls another function, called </span><span>selectDocument(), which</span><span>&nbsp;is not defined yet and about which Dart Editor issues warnings. You&rsquo;ll add that function just below, so ignore the warnings for now.</span></p><p class="c6 c0"><span></span></p><a href="#" name="112b879928f02a95f8bcca548aa41841e8a73a8c"></a><a href="#" name="11"></a><table cellpadding="0" cellspacing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0"><span class="c2">// web/app.dart</span></p><p class="c6 c5 c0"><span class="c2"></span></p><p class="c5 c0"><span class="c2">// STEP 3: Create a new document.</span></p><p class="c5 c0"><span class="c2 c1">void createDocument() {</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; // Create a new document.</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; var doc = new Document(&#39;Untitled&#39;, &#39;&#39;);</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; documents.add(doc);</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; selectDocument(doc);</span></p><p class="c5 c0"><span class="c2 c1">}</span></p></td></tr></tbody></table><p class="c6 c0"><span></span></p><p class="c0"><span>Next, let&rsquo;s implement deleting a document.</span></p><p class="c6 c0"><span></span></p><a href="#" name="bc8ccafb5db8bb95790c033c16fcedeb2df622ab"></a><a href="#" name="12"></a><table cellpadding="0" cellspacing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0"><span class="c2">// web/app.dart</span></p><p class="c6 c5 c0"><span class="c2"></span></p><p class="c5 c0"><span class="c2">// STEP 3: Add code to delete a document</span></p><p class="c5 c0"><span class="c2 c1">void deleteDocument(Document doc) {</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; documents.remove(doc);</span></p><p class="c6 c5 c0"><span class="c2 c1"></span></p><p class="c5 c0"><span class="c2 c1">&nbsp; // STEP 5: Also delete from local storage.</span></p><p class="c5 c0"><span class="c2 c1">}</span></p></td></tr></tbody></table><p class="c6 c0"><span></span></p><p class="c0"><span>Now</span><span>, let&rsquo;s implement setting the currently selected, or </span><span class="c15">active</span><span>,</span><span>&nbsp;document. </span></p><p class="c6 c0"><span></span></p><a href="#" name="c3a16027a88e8921f4c86fe09a9c48ae6bd5735d"></a><a href="#" name="13"></a><table cellpadding="0" cellspacing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0"><span class="c2">// web/app.dart</span></p><p class="c6 c5 c0"><span class="c2"></span></p><p class="c5 c0"><span class="c2">// STEP 3: Add code to select a document.</span></p><p class="c5 c0"><span class="c2 c1">void selectDocument(Document doc, </span><span class="c2 c1">{bool markActive: false}</span><span class="c2 c1">) {</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; if (documents.isEmpty) {</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; activeDocument = null;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; } else if (doc != null &amp;&amp; documents.contains(doc) &amp;&amp; doc != activeDocument) {</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; // Change active document.</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; activeDocument = doc;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; } else if (activeDocument != null &amp;&amp; documents.contains(activeDocument)) {</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; // Stay on the active document and display the editing window.</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; contentActive = markActive &amp;&amp; doc == activeDocument;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; } </span><span class="c2 c1">else</span><span class="c2 c1">&nbsp;{</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; // Fall back to the last document.</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; activeDocument = documents.last;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; }</span></p><p class="c5 c0"><span class="c2 c1">}</span></p></td></tr></tbody></table><p class="c6 c0"><span></span></p><p class="c0"><span>A quick note about Dart syntax. The second argument, markActive, is optional as indicated by the curly brackets. If the caller does not provide the argument, the value is </span><span>false.</span></p><p class="c6 c0"><span></span></p><p class="c0 c7"><span>Save </span><span class="c1">web/app.dart</span><span>. The Dart Editor warnings should go away.</span></p><h3 class="c9 c0"><a name="h.t585uroxp75j"></a><span>Add document initialization to main()</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>We need a little more Dart code</span><span>&nbsp;to create</span><span>&nbsp;and select the first document.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Find the </span><span>main()</span><span>&nbsp;function and add two lines of code:</span></p><p class="c6 c0"><span></span></p><a href="#" name="636d1459fe267ed85fead5b269c905a57617660a"></a><a href="#" name="14"></a><table cellpadding="0" cellspacing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0"><span class="c2">// web/app.dart</span></p><p class="c6 c5 c0"><span class="c2"></span></p><p class="c5 c0"><span class="c2">void main() {</span></p><p class="c5 c0"><span class="c2">&nbsp; // STEP 5: Initialize with all documents from local storage.</span></p><p class="c6 c5 c0"><span class="c2"></span></p><p class="c5 c0"><span class="c2">&nbsp; // STEP 3: Create a new document if there are none.</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; if (documents.isEmpty) createDocument();</span></p><p class="c6 c5 c0"><span class="c2"></span></p><p class="c5 c0"><span class="c2">&nbsp; // STEP 3: Select the first document in the list of documents.</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; selectDocument(documents.first);</span></p><p class="c5 c0"><span class="c2 c1">}</span></p></td></tr></tbody></table><p class="c6 c0"><span></span></p><p class="c0"><span>Save </span><span class="c1">web/app.dart</span><span>.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Now that we have </span><span>functions that let us create, delete, and select </span><span>documents, we can create elements that provide a UI to use that functionality.</span></p><h3 class="c9 c0"><a name="h.svl18lwba5l4"></a><span>Create new elements in web/index.html</span></h3><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>Open </span><span class="c1">web/index.html</span><span>.</span></p><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>Create a + button, and set our new </span><span>createDocument()</span><span>&nbsp;function as the button&rsquo;s mouse click callback function.</span></p><p class="c6 c0"><span></span></p><a href="#" name="7ba1693380e842805638eca678d2e0155401c2cc"></a><a href="#" name="15"></a><table cellpadding="0" cellspacing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0"><span class="c2">// web/index.html</span></p><p class="c6 c5 c0"><span class="c2"></span></p><p class="c5 c0"><span class="c2">&nbsp; &nbsp; &nbsp; &lt;div class=&quot;toolbar&quot;&gt;</span></p><p class="c6 c5 c0"><span class="c2"></span></p><p class="c5 c0"><span class="c2">&nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- STEP 3: Add a button to create a new document. --&gt;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; </span><span class="c2 c1">&nbsp; &lt;button on-click=&quot;createDocument()&quot;&gt;+&lt;/button&gt;</span></p><p class="c5 c0"><span class="c2">...</span></p></td></tr></tbody></table><p class="c6 c0"><span></span></p><p class="c0"><span>Delete the old code that created a single </span><span>&lt;x-document-item&gt;</span><span>, and replace it with code that creates one </span><span>&lt;x-document-item&gt;</span><span>&nbsp;for each item in the documents list.</span></p><p class="c6 c0"><span></span></p><a href="#" name="8e2e7b784dd6a79a105a04e54a79d0730d45d82a"></a><a href="#" name="16"></a><table cellpadding="0" cellspacing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0"><span class="c2">// web/index.html</span></p><p class="c6 c5 c0"><span class="c2"></span></p><p class="c5 c0"><span class="c2">&nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- STEP 3: Iterate over list of documents. --&gt;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &nbsp; &lt;template iterate=&quot;doc in documents&quot;&gt;</span></p><p class="c6 c5 c0"><span class="c2 c1"></span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- STEP 4: Hide documents that don&#39;t match search filter. --&gt;</span></p><p class="c6 c5 c0"><span class="c2 c1"></span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- Our custom document element! --&gt;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;x-document-item doc=&quot;{{doc}}&quot;&gt;&lt;/x-document-item&gt;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &nbsp; &lt;/template&gt;</span></p><p class="c6 c5 c0"><span class="c2 c23"></span></p><p class="c5 c0"><span class="c2 c23">&lt;!-- STEP 2: Add the active document to the sidebar. --&gt;</span></p><p class="c5 c0"><span class="c2 c23">&lt;x-document-item doc=&quot;{{activeDocument}}&quot;&gt;&lt;/x-document-item&gt;</span></p></td></tr></tbody></table><p class="c6 c0"><span></span></p><p class="c0 c7"><span>Save </span><span class="c1">web/index.html</span><span>.</span></p><h3 class="c9 c0"><a name="h.v26yzo8ksmbq"></a><span>Add code to select a document and to delete a document</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>Open </span><span class="c1">web/document_item.html</span><span>.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Now that we have </span><span>selectDocument()</span><span>&nbsp;and </span><span>deleteDocument() functions</span><span>, our custom component can use them. The following code uses the new selection function and adds an &ldquo;X&rdquo; button to </span><span>&lt;x-document-item&gt;</span><span>&nbsp;that deletes the item.</span></p><p class="c6 c0"><span></span></p><a href="#" name="e9cd1b499b5eac19bda4a5eb9b038274db4f6e03"></a><a href="#" name="17"></a><table cellpadding="0" cellspacing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0"><span class="c2">// web/document_item.html</span></p><p class="c6 c5 c0"><span class="c2"></span></p><p class="c5 c0"><span class="c2">&nbsp; &nbsp; &nbsp; &lt;!-- STEP 3: On click, select the document. --&gt;</span></p><p class="c32 c0"><span class="c2">&nbsp; &nbsp; &nbsp; </span><span class="c2">&nbsp; </span><span class="c2 c23">&lt;div</span><span class="c2 c23">&nbsp;</span><span class="c2 c23">class=</span><span class="c2 c23">&quot;item {{isActiveClass}}&quot;</span><span class="c2 c23">&gt;</span></p><p class="c0 c32"><span class="c2">&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c2 c1">&lt;div class=&quot;item {{isActiveClass}}&quot;</span></p><p class="c5 c0"><span class="c2">&nbsp; &nbsp; &nbsp; </span><span class="c2">&nbsp; &nbsp; &nbsp; </span><span class="c2 c1">&nbsp;</span><span class="c2 c1">on-click=&quot;app.selectDocument(doc, markActive: true)&quot;</span><span class="c2 c1">&gt;</span></p><p class="c5 c0"><span class="c2">&hellip;</span></p><p class="c5 c0"><span class="c2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- STEP 3: Add delete button. --&gt;</span></p><p class="c5 c0"><span class="c2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c2 c1">&lt;button class=&quot;delete&quot; on-click=&quot;</span><span class="c2 c1">app.</span><span class="c2 c1">deleteDocument</span><span class="c2 c1">(doc)&quot;&gt;&amp;times;&lt;/button&gt;</span></p></td></tr></tbody></table><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>Save </span><span class="c1">web/document_item.html</span><span>.</span></p><h3 class="c9 c0"><a name="h.1e11ugbr3dv7"></a><span>Try out the new functionality</span></h3><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>Try it out! </span><span class="c45">Run the app.</span></p><ul class="c10 lst-kix_vvzditg8sno-0 start"><li class="c16 c11 c0"><span>Click the + button to create a new document.</span></li><li class="c16 c11 c0"><span>Type in some text.</span></li><li class="c16 c11 c0"><span>Change the document name.</span></li><li class="c16 c11 c0"><span>Click on a document in the sidebar to select a document. A </span><span class="c38 c1">red</span><span>&nbsp;vertical line appears on the left and its contents appears in the text area.</span></li><li class="c16 c11 c0"><span>Hover the mouse over a document in the sidebar and an &lsquo;X&rsquo; appears. Click the &lsquo;X&rsquo; to delete the document.</span></li></ul><p class="c6 c0"><span class="c2"></span></p><p class="c0"><img height="514" src="images/image07.png" width="512"></p><p class="c6 c0"><span></span></p><h1 class="c8 c0"><a name="h.ajf00hxdo4zq"></a></h1><h1 class="c0"><a name="h.1lmhpmupb94f"></a><span>Step 4: Add a search bar</span></h1><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>In this step, you will learn how to connect an HTML input field to a Dart object, and then conditionally display DOM elements based on the contents from the input field.</span></p><h2 class="c0"><a name="h.qrimtew7kc7q"></a><span>What you will learn</span></h2><p class="c6 c0"><span></span></p><ol class="c10 lst-kix_32zxnvl59py3-0 start" start="1"><li class="c16 c11 c0 c7"><span>Instantiate DOM elements based on conditionals.</span></li><li class="c16 c11 c0 c7"><span>Bind an input field to a Dart object (aka two-way data binding).</span></li></ol><h2 class="c0"><a name="h.ps3mbo8ceq0c"></a><span>Concepts overview</span></h2><h3 class="c0"><a name="h.8ja6vc9pug1j"></a><span>Template conditionals</span></h3><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>The contents of a </span><span>&lt;template&gt;</span><span>&nbsp;tag can be added to, or removed from, the DOM based on a </span><span class="c15">conditional</span><span>. If a conditional is true, the contents of the </span><span>&lt;template&gt;</span><span>&nbsp;are added to the DOM (in other words, the contents are displayed on the page). If the conditional is false, the contents are removed from the page.</span></p><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>Here is a simple example of a conditional template:</span></p><p class="c6 c0 c7"><span></span></p><p class="c11 c0 c7"><span class="c2">&lt;template if=&quot;user.</span><span class="c2">agreedToTOS</span><span class="c2">&quot;&gt;</span></p><p class="c11 c0 c7"><span class="c2">&nbsp; Thanks for clicking agree!</span></p><p class="c11 c0 c7"><span class="c2">&lt;/template&gt;</span></p><p class="c6 c11 c0 c7"><span></span></p><p class="c0 c7"><span>Every time the conditional changes (from false to true, or from true to false), the contents are added or removed.</span></p><h3 class="c0"><a name="h.2ud8exsdflt4"></a><span>Field binding</span></h3><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>An HTML input field, such as a text input, can be bound to a Dart object. Whenever the input field&#39;s value changes, the </span><span>Dart object</span><span>&#39;s value </span><span>change</span><span>s. Whenever the Dart object&#39;s value changes, the input field changes. This is known as </span><span class="c15">two-way binding</span><span>.</span></p><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>Here is a simple User class:</span></p><p class="c6 c0 c7"><span></span></p><p class="c11 c0 c7"><span class="c2">class User {</span></p><p class="c11 c0 c7"><span class="c2">&nbsp; String username;</span></p><p class="c11 c0 c7"><span class="c2">}</span></p><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>Here is a simple example of an input field binding:</span></p><p class="c6 c0 c7"><span></span></p><p class="c11 c0 c7"><span class="c2">&lt;input type=&quot;text&quot; name=&quot;username&quot; bind-value=&quot;</span><span class="c2">user.username&quot;&gt;</span></p><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>The value property of the input field is bound to the username field of the </span><span class="c35">user</span><span>&nbsp;object&mdash;an instance of the </span><span class="c35">User</span><span>&nbsp;class.</span></p><h2 class="c0"><a name="h.7otqcta04eui"></a><span>Walkthrough</span></h2><h3 class="c0"><a name="h.gywvipbftj46"></a><span>Create a new library</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>To help you get started, we&#39;ve given you the shell for the new search library.</span></p><p class="c6 c0"><span></span></p><ol class="c10 lst-kix_nhaic9xr6pf-0 start" start="1"><li class="c16 c11 c0 c7"><span>Right-click on the </span><span class="c1">lib</span><span>&nbsp;directory and select &quot;</span><span class="c1">New File</span><span>&quot;.</span></li><li class="c16 c11 c0 c7"><span>Name this file &quot;search.dart&quot;.</span></li><li class="c16 c11 c0 c7"><span>Open </span><span class="c1">__for_later/search.dart</span><span>, copy its contents, and paste into </span><span class="c1">lib/search.dart</span><span>.</span></li></ol><h3 class="c0"><a name="h.3tpsh4ob2nhr"></a><span>Observe the search filter</span></h3><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>You need to add a top-level field that will contain the search filter.</span></p><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>Add the following code to </span><span class="c1">lib/search.dart</span><span>.</span></p><p class="c6 c0"><span></span></p><a href="#" name="a042056057108e3f45766defec5c9081e7b61fd4"></a><a href="#" name="18"></a><table cellpadding="0" cellspacing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0"><span class="c2">// lib/search.dart</span></p><p class="c6 c5 c0"><span class="c2"></span></p><p class="c5 c0"><span class="c2">import &#39;package:writer/document.dart&#39;;</span></p><p class="c6 c5 c0"><span class="c2"></span></p><p class="c5 c0"><span class="c2">// STEP 4: Add an observed string to filter documents.</span></p><p class="c5 c0"><span class="c2 c1">@observable</span></p><p class="c5 c0"><span class="c2 c1">String searchFilter = &#39;&#39;;</span></p><p class="c5 c0"><span class="c2">&hellip;</span></p></td></tr></tbody></table><p class="c6 c0"><span></span></p><h3 class="c0"><a name="h.1i3dq5f7oc85"></a><span>Filter documents</span></h3><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>Now that you have an observable </span><span>searchFilter</span><span>&nbsp;string, you can filter documents.</span></p><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>Inside of </span><span class="c1">lib/search.dart</span><span>, add the following code:</span></p><p class="c6 c0"><span></span></p><a href="#" name="dd9b7b447779506c855362f9779578a1cba8ee6f"></a><a href="#" name="19"></a><table cellpadding="0" cellspacing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0"><span class="c2">// lib/search.dart</span></p><p class="c6 c5 c0"><span class="c2"></span></p><p class="c5 c0"><span class="c2">// STEP 4: Add function to check if a document matches the search filter.</span></p><p class="c5 c0"><span class="c2 c1">bool matchesSearchFilter(Document doc) {</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; if (searchFilter.isEmpty) {</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; return </span><span class="c2 c1">true</span><span class="c2 c1">;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; }</span></p><p class="c6 c5 c0"><span class="c2 c1"></span></p><p class="c5 c0"><span class="c2 c1">&nbsp; return doc.title.toLowerCase().contains(searchFilter.toLowerCase()) ||</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;doc.content.toLowerCase().contains(searchFilter.toLowerCase());</span></p><p class="c5 c0"><span class="c2 c1">}</span></p></td></tr></tbody></table><p class="c6 c0"><span></span></p><p class="c0 c7"><span>Notice that </span><span>searchFilter.isEmpty</span><span>&nbsp;is a </span><span class="c15">getter</span><span>&mdash;it doesn&rsquo;t have trailing parentheses.</span></p><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>Save your changes.</span></p><h3 class="c0"><a name="h.obmom9hrtjt0"></a><span>Import search into app</span></h3><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>With the search library complete, you need to import it into the main application.</span></p><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>Open </span><span class="c1">web/app.dart</span><span class="c1">&nbsp;</span><span>and add the following code:</span></p><p class="c6 c0"><span></span></p><a href="#" name="6d5fb425ce24bad33322b62ea263a2e8ca1e30e2"></a><a href="#" name="20"></a><table cellpadding="0" cellspacing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0"><span class="c2">// web/app.dart</span></p><p class="c6 c5 c0"><span class="c2"></span></p><p class="c5 c0"><span class="c2">import &#39;package:writer/document.dart&#39;;</span></p><p class="c6 c5 c0"><span class="c2"></span></p><p class="c5 c0"><span class="c2">// STEP 4: Import search.dart.</span></p><p class="c5 c0"><span class="c2 c1">import &#39;package:writer/search.dart&#39;;</span></p><p class="c6 c5 c0"><span class="c2"></span></p><p class="c5 c0"><span class="c2">// STEP 5: Import storage.dart.</span></p><p class="c5 c0"><span class="c2 c1">&hellip;</span></p></td></tr></tbody></table><p class="c6 c0"><span></span></p><p class="c0 c7"><span>To keep the path to </span><span class="c1">search.dart</span><span class="c1">&nbsp;</span><span>relative to </span><span class="c1">app.dart</span><span>, we use the </span><span>package:</span><span>&nbsp;import method to import the search.dart library from the writer package. The </span><span class="c1">pubspec.yaml</span><span class="c1">&nbsp;</span><span>file declares the writer package. The </span><span>pub</span><span>&nbsp;command creates all the necessary symlinks to allow you to not have to create import paths like &#39;</span><span>../../lib/search.dart</span><span>&#39;.</span></p><p class="c6 c0 c7"><span></span></p><p class="c0"><span>Save your changes.</span></p><h3 class="c9 c0"><a name="h.uf0oq3wrab9x"></a><span>Input field for filter</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>Let&#39;s turn our attention to the HTML for the search box. You added the observable </span><span>searchFilter</span><span>&nbsp;field in </span><span>search.dart</span><span>, now let&#39;s bind that into an HTML input field.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Open </span><span class="c1">web/index.html</span><span class="c1">&nbsp;</span><span>and add the following code:</span></p><p class="c6 c0"><span></span></p><a href="#" name="4d0cc0c5260d42270a69014b961ab05e5235b5d1"></a><a href="#" name="21"></a><table cellpadding="0" cellspacing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0"><span class="c2">// web/index.html</span></p><p class="c5 c0"><span class="c2">&hellip;</span></p><p class="c5 c0"><span class="c2">&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;input-wrap&quot;&gt;</span></p><p class="c5 c0"><span class="c2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- STEP 4: Add a input box to filter documents. --&gt;</span></p><p class="c5 c0"><span class="c2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c2 c1">&lt;input type=&quot;text&quot; placeholder=&quot;Filter documents...&quot; bind-value=&quot;searchFilter&quot;&gt;</span></p><p class="c5 c0"><span class="c2">&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c2">&lt;/</span><span class="c2">div</span><span class="c2">&gt;</span></p><p class="c5 c0"><span class="c2">&hellip;</span></p></td></tr></tbody></table><p class="c6 c0"><span></span></p><p class="c0"><span>The variable name </span><span class="c15">searchFilter</span><span>&nbsp;must match the string inside of the bind-value attribute.</span></p><h3 class="c0"><a name="h.mtf4udav2d7n"></a><span>Dynamically hide or show docs based on the filter</span></h3><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>When the search filter changes, we want to dynamically update the documents displayed on the page.</span></p><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>Continue editing </span><span class="c1">web/index.html</span><span class="c1">&nbsp;</span><span>and add the following code:</span></p><p class="c6 c0"><span></span></p><a href="#" name="6d3da29ef7fd3926adfaf6eb70944e90a5d04c92"></a><a href="#" name="22"></a><table cellpadding="0" cellspacing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0"><span class="c2">// web/index.html</span></p><p class="c5 c0"><span class="c2">&hellip;</span></p><p class="c5 c0"><span class="c2">&nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- STEP 3: Iterate over list of documents. --&gt;</span></p><p class="c5 c0"><span class="c2">&nbsp; &nbsp; &nbsp; &nbsp; &lt;template iterate=&quot;doc in documents&quot;&gt;</span></p><p class="c6 c5 c0"><span class="c2"></span></p><p class="c5 c0"><span class="c2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- STEP 4: Hide documents that don&#39;t match search filter. --&gt;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;template if=&quot;matchesSearchFilter(doc)&quot;&gt;</span></p><p class="c6 c5 c0"><span class="c2"></span></p><p class="c5 c0"><span class="c2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- Our custom document element! --&gt;</span></p><p class="c5 c0"><span class="c2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;x-document-item doc=&quot;{{doc}}&quot;&gt;&lt;/x-document-item&gt;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/template&gt;</span></p><p class="c6 c5 c0"><span class="c2"></span></p><p class="c5 c0"><span class="c2">&nbsp; &nbsp; &nbsp; &nbsp; &lt;/template&gt;</span></p><p class="c5 c0"><span class="c2">&hellip;</span></p></td></tr></tbody></table><p class="c6 c0"><span></span></p><p class="c0 c7"><span>Notice that you are placing the conditional template within the template loop.</span></p><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>The Web UI library knows that </span><span>matchesSearchFilter</span><span>&nbsp;relies on </span><span>searchFilter</span><span>, so whenever </span><span>searchFilter</span><span>&nbsp;changes, it re-runs this template. Only those documents that pass </span><span>matchesSearchFilter</span><span>&nbsp;will be displayed with the custom </span><span>&lt;x-document-item&gt;</span><span>&nbsp;tag.</span></p><p class="c6 c0 c7"><span></span></p><h2 class="c0"><a name="h.j1j21dxjix9k"></a><span>Run the code</span></h2><p class="c0 c7"><span>Time to run the code! After completing this step, you should be able to search for documents by title or contents. The search results are live. </span><span class="c15">Note</span><span>: there is a known bug, if the currently opened document does not match the filter, it won&#39;t disappear.</span></p><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><img height="294" src="images/image10.jpg" width="506"></p><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>If you do not see the input field for the filter, run </span><span class="c1">Tools &gt; Reanalyze Sources</span><span>.</span></p><hr style="page-break-before:always;display:none;"><p class="c6 c0 c7"><span></span></p><h1 class="c0"><a name="h.fwk2fgwdpcgv"></a><span>Step 5: Adding local storage</span></h1><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>In this step, you learn how to save the user&rsquo;s documents in local storage, and later to remove the documents. In addition to saving the documents in local storage, the app also maintains a list of document IDs in local storage. The </span><span>main()</span><span>&nbsp;function uses </span><span>this </span><span>list to initialize the app and load the first document. The app saves the documents as JSON-formatted strings. You also learn how to use the JSON library to serialize and revive the document contents.</span></p><h2 class="c0"><a name="h.69edvk1ggsqx"></a><span>What you will learn</span></h2><p class="c6 c0"><span></span></p><ol class="c10 lst-kix_2uog6ch44jpu-0 start" start="1"><li class="c16 c11 c0"><span>Save documents in local storage.</span></li><li class="c16 c11 c0"><span>Remove documents from local storage.</span></li><li class="c16 c11 c0"><span>Maintain a list of document IDs in local storage.</span></li><li class="c16 c11 c0"><span>Use JSON to read and write the contents of the documents.</span></li></ol><h2 class="c12 c0"><a name="h.sjarbfxvehu8"></a><span>Concepts overview</span></h2><h3 class="c9 c0"><a name="h.ugi5xom80b1x"></a><span>Local storage</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>Local storage can be </span><span>use</span><span>&nbsp;to keep persistent data between invocations of your app. The data may only be accessed by the origin that created it. The Window object that hosts the web app has a localStorage object that your code can use to store and retrieve data. The local storage object is implemented as a Map&lt;String, String&gt;. </span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Save data in local storage by putting a key/value pair in the localStorage object.</span></p><p class="c0 c6"><span></span></p><p class="c18 c11 c0 c7"><span class="c2 c39">window.localStorage[&#39;key1&#39;] = &#39;val1&#39;;<br>window.localStorage[&#39;key2&#39;] = &#39;val2&#39;;<br>window.localStorage[&#39;key3&#39;] = &#39;val3&#39;;</span></p><p class="c18 c6 c0 c7"><span class="c35"></span></p><p class="c18 c0 c7"><span>Delete data from local storage by removing a key/value pair from the </span><span>localStorage</span><span>&nbsp;object.</span></p><p class="c6 c0 c7 c18"><span></span></p><p class="c18 c11 c0 c7"><span class="c2">window.localStorage.</span><span class="c2">remove</span><span class="c2">([&#39;key1&#39;]);</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>You can use </span><span><a class="c14" href="http://api.dartlang.org/dart_core/Map.html">Map</a></span><span>&nbsp;APIs such as containsValue(), clear(), and length:</span></p><p class="c6 c0"><span></span></p><p class="c18 c11 c0 c7"><span class="c2">assert(window.localStorage.containsValue(&#39;does not exist&#39;) == false);<br>window.localStorage.clear();<br>assert(window.localStorage.length == 0);</span></p><h3 class="c9 c0"><a name="h.o8ej7ha012l6"></a><span>JSON</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>JSON is a text-based, human-friendly format for representing data of different types. The dart:json library has two useful functions for converting data to/from JSON: stringify() and parse(). Here&rsquo;s a small example that converts a list of objects to JSON and back again.</span></p><p class="c6 c0"><span></span></p><p class="c18 c11 c0 c7"><span class="c2">import </span><span class="c2">&#39;</span><span class="c2">dart:json</span><span class="c2">&#39;</span><span class="c2">&nbsp;as JSON;</span></p><p class="c18 c6 c11 c0 c7"><span class="c2"></span></p><p class="c18 c11 c0 c7"><span class="c2">var list = [1, &quot;two&quot;, 3.0]; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // a list of objects</span></p><p class="c18 c11 c0 c7"><span class="c2">String listAsString = JSON.stringify(list); // convert list of objects to JSON string</span></p><p class="c18 c11 c0 c7"><span class="c2">print(listAsString); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// [1,&quot;two&quot;,3.0]</span></p><p class="c18 c11 c0 c7"><span class="c2">var revivedList = JSON.parse(listAsString); // convert JSON string to list object</span></p><p class="c18 c11 c0 c7"><span class="c2">print(revivedList); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // [1, two, 3.0]</span></p><h2 class="c0"><a name="h.36ilmen4pg0r"></a><span>Walkthrough</span></h2><h3 class="c9 c0"><a name="h.q7i5j58pkjsj"></a><span>Create a library to handle local storage.</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>This step requires you to edit three files: </span><span class="c1">lib/</span><span class="c1">storage.dart</span><span>, </span><span class="c1">web/</span><span class="c1">index.html</span><span>, and </span><span class="c1">web/</span><span class="c1">app.dart</span><span>. Let&rsquo;s begin with </span><span class="c1">storage.dart</span><span>.</span></p><h3 class="c9 c0"><a name="h.3tndkjgajsf7"></a><span>Save a document to local storage. Add the document ID to the list.</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>To help you get started, we&#39;ve given you the shell for the new local storage library.</span></p><p class="c6 c0"><span></span></p><ol class="c10 lst-kix_hm47sef7muk-0 start" start="1"><li class="c16 c11 c0"><span>Right-click on the </span><span class="c1">lib</span><span>&nbsp;directory and select &quot;</span><span class="c1">New File</span><span>&quot;.</span></li><li class="c16 c11 c0"><span>Name this file &quot;storage.dart&quot;.</span></li><li class="c16 c11 c0"><span>Open </span><span class="c1">__for_later/storage.dart, </span><span>copy its contents, and paste it into </span><span class="c1">lib/storage.dart</span><span>.</span></li></ol><p class="c6 c0"><span></span></p><p class="c0"><span>Modify the </span><span>saveDocument()</span><span>&nbsp;function. Add the code, shown in bold below,</span></p><ol class="c10 lst-kix_pza3ybm1wtg3-0 start" start="1"><li class="c16 c11 c0"><span>to convert the document to a JSON-formatted string and save it in the window&rsquo;s local storage,</span></li><li class="c16 c11 c0"><span>to add the document ID to the internal list of IDs, if necessary,</span></li><li class="c16 c11 c0"><span>and finally, to save the list of document IDs, in JSON format, to the local storage</span><span>.</span></li></ol><p class="c6 c0"><span></span></p><a href="#" name="11f012b03fe1c09376f0858633759211354f25a7"></a><a href="#" name="23"></a><table cellpadding="0" cellspacing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0"><span class="c2">// storage.dart</span></p><p class="c5 c0"><span class="c2">&hellip;</span></p><p class="c5 c0"><span class="c2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- Document title --&gt;</span></p><p class="c5 c0"><span class="c2">/// Save the document to local storage.</span></p><p class="c5 c0"><span class="c2">void saveDocument(Document doc) {</span></p><p class="c5 c0"><span class="c2">&nbsp; // STEP 5: Save the serialized version of the document to local storage.</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; window.localStorage[doc.id] = doc.toJson();</span></p><p class="c6 c5 c0"><span class="c2"></span></p><p class="c5 c0"><span class="c2">&nbsp; // STEP 5: Add the new document ID to our list of document IDs.</span></p><p class="c5 c0"><span class="c2">&nbsp; </span><span class="c2 c1">if </span><span class="c2 c1">(!_storedIds.contains(doc.id)) {</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; _storedIds.add(</span><span class="c2 c1">doc.id);</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; }</span></p><p class="c6 c5 c0"><span class="c2"></span></p><p class="c5 c0"><span class="c2">&nbsp; // STEP 5: Update local storage map of IDs.</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; window.localStorage[DOCUMENT_ID_KEY] = JSON.stringify(_storedIds);</span></p><p class="c5 c0"><span class="c2">}</span></p><p class="c6 c5 c0"><span class="c2"></span></p><p class="c5 c0"><span class="c2">&hellip;</span></p></td></tr></tbody></table><p class="c6 c0"><span></span></p><h3 class="c9 c0"><a name="h.wjjh2u48r262"></a><span>Remove the document from local storage. Remove the document ID from the list.</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>Continue editing </span><span class="c1">lib/</span><span class="c1">storage.dart</span><span>.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Modify the </span><span>removeDocument()</span><span>&nbsp;function. Add the code</span></p><ol class="c10 lst-kix_qz5wp1hdd24k-0 start" start="1"><li class="c16 c11 c0"><span>to remove the document ID from the internal list,</span></li><li class="c16 c11 c0"><span>to remove the document from local storage, </span></li><li class="c16 c11 c0"><span>and to save the list of document IDs in local storage.</span></li></ol><p class="c6 c0"><span></span></p><a href="#" name="3177dcfaa26d24b52d0428abf91f2cb328fae133"></a><a href="#" name="24"></a><table cellpadding="0" cellspacing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0"><span class="c2">// storage.dart</span></p><p class="c5 c0"><span class="c2">&hellip;</span></p><p class="c5 c0"><span class="c2">/// Removes the document from local storage.</span></p><p class="c5 c0"><span class="c2">void removeDocument(Document doc) {</span></p><p class="c5 c0"><span class="c2">&nbsp; // STEP 5: Remove the document from local storage.</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; _storedIds.remove(doc.id);</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; window.localStorage.remove(doc.id);</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; window.localStorage[DOCUMENT_ID_KEY] = JSON.stringify(_storedIds);</span></p><p class="c5 c0"><span class="c2">}</span></p><p class="c5 c0"><span class="c2">&hellip;</span></p></td></tr></tbody></table><p class="c6 c0"><span></span></p><h3 class="c9 c0"><a name="h.iu894renpog2"></a><span>Load the list of IDs from local storage. Then load the documents.</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>Continue editing </span><span class="c1">lib/storage.dart</span><span>.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Modify the </span><span>fetchDocuments()</span><span>&nbsp;function. Add the code</span></p><ol class="c10 lst-kix_8dg0b92yw51r-0 start" start="1"><li class="c16 c11 c0"><span>to get the list of document IDs</span></li><li class="c16 c11 c0"><span>to load all of the documents from local storage using the private method </span><span>_fetchDocument()</span></li><li class="c16 c11 c0"><span>and to display one of the documents.</span></li></ol><p class="c6 c0 c7"><span></span></p><a href="#" name="9828f087ea9465c35bd79ae04bfae6e8749c67e0"></a><a href="#" name="25"></a><table cellpadding="0" cellspacing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0 c7"><span class="c2">// storage.dart</span></p><p class="c5 c0 c7"><span class="c2">&hellip;</span></p><p class="c5 c0 c7"><span class="c2">// Returns a collection of all documents from local storage.</span></p><p class="c5 c0 c7"><span class="c2">Iterable&lt;Document&gt; fetchDocuments() {</span></p><p class="c5 c0 c7"><span class="c2">&nbsp; // STEP 5: Get all document IDs from local storage.</span></p><p class="c5 c0 c7"><span class="c2 c1">&nbsp; if (window.localStorage[DOCUMENT_ID_KEY] != null) {</span></p><p class="c5 c0 c7"><span class="c2 c1">&nbsp; &nbsp; _storedIds = JSON.parse(window.localStorage[DOCUMENT_ID_KEY]);</span></p><p class="c5 c0 c7"><span class="c2 c1">&nbsp; }</span></p><p class="c6 c5 c0 c7"><span class="c2"></span></p><p class="c5 c0 c7"><span class="c2">&nbsp; // STEP 5: Get all documents from local storage.</span></p><p class="c5 c0 c7"><span class="c2 c1">&nbsp; return _storedIds.map(_fetchDocument);</span></p><p class="c5 c0 c7"><span class="c2">}</span></p><p class="c6 c5 c0 c7"><span class="c2"></span></p><p class="c5 c0 c7"><span class="c2">/// Gets a document from local storage.</span></p><p class="c5 c0 c7"><span class="c2">Document _fetchDocument(String id) {</span></p><p class="c5 c0 c7"><span class="c2">&nbsp; // STEP 5: Return one deserialized document from local storage.</span></p><p class="c5 c0 c7"><span class="c2 c1">&nbsp; return new Doc</span><span class="c2 c1">ument.fromJson</span><span class="c2 c1">(window.localStorage[id]);</span></p><p class="c5 c0 c7"><span class="c2">}</span></p><p class="c5 c0 c7"><span class="c2">&hellip;</span></p></td></tr></tbody></table><p class="c6 c0 c7"><span></span></p><p class="c0"><span>Save your changes to </span><span class="c1">lib/</span><span class="c1">storage.dart</span><span>.</span></p><p class="c6 c0"><span class="c35"></span></p><h3 class="c9 c0"><a name="h.i3h5dbyw0vmu"></a><span>Add event handlers to HTML elements to save the document.</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>Now that you&rsquo;ve written the library code that saves and retrieves documents, you can use the new functions in the app. The app saves the documents based on user-generated events in the UI. So let&rsquo;s add event handlers to the HTML elements for saving the documents.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Open the </span><span class="c1">web/index.html </span><span>file.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Find the code that creates the text element for the document titles.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Add a key-up event handler to the text field. Each time the user types a character in the document title, the event handler saves the document.</span></p><p class="c6 c0 c7"><span></span></p><a href="#" name="36ceaf585c6c68044bee5323e8e8b9b547788375"></a><a href="#" name="26"></a><table cellpadding="0" cellspacing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0 c7"><span class="c2">// index.html</span></p><p class="c5 c0 c7"><span class="c2">&hellip;</span></p><p class="c5 c0 c7"><span class="c2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- Document title --&gt;</span></p><p class="c5 c0 c7"><span class="c2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;input-wrap&quot;&gt;</span></p><p class="c6 c5 c0 c7"><span class="c2"></span></p><p class="c5 c0 c7"><span class="c2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- STEP 5: Add event handler to save the active document. --&gt;</span></p><p class="c5 c0 c7"><span class="c2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c2 c23">&lt;input type=&quot;text&quot; bind-value=&quot;activeDocument.title&quot;&gt;</span></p><p class="c5 c0 c7"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type=&quot;text&quot; bind-value=&quot;activeDocument.title&quot;</span></p><p class="c5 c0 c7"><span class="c2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c2 c1">on-key-up=&quot;saveDocument(activeDocument)&quot; </span><span class="c2">/&gt;</span></p><p class="c5 c0 c7"><span class="c2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;</span></p><p class="c5 c0 c7"><span class="c2">&hellip;</span></p></td></tr></tbody></table><p class="c6 c0 c7"><span></span></p><p class="c0"><span>Now, find the textarea used to enter the contents of a document.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Add a key-up event handler to the textarea. Each time the user types a character into the document, the event handler saves the document.</span></p><p class="c6 c0 c7"><span></span></p><a href="#" name="bbf4a6a118e5f14b13909f187048196681e275a6"></a><a href="#" name="27"></a><table cellpadding="0" cellspacing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0 c7"><span class="c2">// index.html</span></p><p class="c5 c0 c7"><span class="c2">&hellip;</span></p><p class="c5 c0 c7"><span class="c2">&nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- Content box --&gt;</span></p><p class="c5 c0 c7"><span class="c2">&nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- STEP 5: Add event handler to save the active document. --&gt;</span></p><p class="c5 c0 c7"><span class="c2">&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c2 c23">&lt;textarea class=&quot;content&quot; bind-value=&quot;activeDocument.content&quot;&gt;&lt;/textarea&gt;</span></p><p class="c5 c0 c7"><span class="c2">&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="c2 c1">&lt;textarea class=&quot;content&quot; bind-value=&quot;activeDocument.content&quot;</span></p><p class="c5 c0 c7"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; on-key-up=&quot;saveDocument(activeDocument)&quot;&gt;&lt;/textarea&gt;</span></p><p class="c6 c5 c0 c7"><span class="c2"></span></p><p class="c5 c0 c7"><span class="c2">&hellip;</span></p></td></tr></tbody></table><p class="c6 c0"><span class="c1 c41"></span></p><p class="c0"><span>Save your changes to </span><span class="c1">web/index.html </span><span>.</span></p><p class="c6 c0"><span></span></p><h3 class="c0"><a name="h.yvyngs2ay112"></a><span>Import storage.dart</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>For removing documents and initializing the app, you need to edit the Dart code.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Open </span><span class="c1">web/app.dart</span><span>.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Add an import directive near the top of the file to include the </span><span>storage.dart</span><span>&nbsp;library you just wrote.</span></p><p class="c6 c0 c7"><span></span></p><a href="#" name="a92b059e6f7083b59c32c8e671b4914e90e06269"></a><a href="#" name="28"></a><table cellpadding="0" cellspacing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0 c7"><span class="c2">// app.dart</span></p><p class="c6 c5 c0 c7"><span class="c2"></span></p><p class="c5 c0 c7"><span class="c2">@observable</span></p><p class="c5 c0 c7"><span class="c2">library writer;</span></p><p class="c6 c5 c0 c7"><span class="c2"></span></p><p class="c5 c0 c7"><span class="c2">import &#39;dart:html&#39; hide Document;</span></p><p class="c6 c5 c0 c7"><span class="c2"></span></p><p class="c5 c0 c7"><span class="c2">import &#39;package:web_ui/web_ui.dart&#39;;</span></p><p class="c6 c5 c0 c7"><span class="c2"></span></p><p class="c5 c0 c7"><span class="c2">import &#39;package:writer/document.dart&#39;;</span></p><p class="c6 c5 c0 c7"><span class="c2"></span></p><p class="c5 c0 c7"><span class="c2">// STEP 4: Import search.dart.</span></p><p class="c5 c0 c7"><span class="c2">import &#39;package:writer/search.dart&#39;;</span></p><p class="c6 c5 c0 c7"><span class="c2"></span></p><p class="c5 c0 c7"><span class="c2">// STEP 5: Import storage.dart.</span></p><p class="c5 c0 c7"><span class="c2 c1">import &#39;package:writer/storage.dart&#39;;</span></p><p class="c6 c5 c0 c7"><span class="c2"></span></p><p class="c5 c0 c7"><span class="c2">// STEP 3: Add an observed list of documents.</span></p><p class="c5 c0 c7"><span class="c2">final List&lt;Document&gt; documents = toObservable([]);</span></p><p class="c5 c0 c7"><span class="c2">&hellip;</span></p></td></tr></tbody></table><p class="c6 c0 c7"><span></span></p><h3 class="c9 c0"><a name="h.s8iyjgjt4pp0"></a><span>Initialize the app with the locally stored documents.</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>Continue editing </span><span class="c1">web/app.dart</span><span>.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Modify the </span><span>main()</span><span>&nbsp;function in </span><span>app.dart</span><span>. Use the </span><span>fetchDocuments()</span><span>&nbsp;function from the </span><span>storage.dart </span><span>library to initialize the app with the saved documents.</span></p><p class="c6 c0 c7"><span></span></p><a href="#" name="6e5b6db4508be6d53f4dd8844b2b23840627fdc9"></a><a href="#" name="29"></a><table cellpadding="0" cellspacing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0 c7"><span class="c2">// app.dart</span></p><p class="c5 c0 c7"><span class="c2">&hellip;</span></p><p class="c5 c0 c7"><span class="c2">/// Starts the application.</span></p><p class="c5 c0 c7"><span class="c2">void main() {</span></p><p class="c5 c0 c7"><span class="c2">&nbsp; // STEP 5: Initialize with all documents from local storage.</span></p><p class="c5 c0 c7"><span class="c2 c1">&nbsp; documents.addAll(fetchDocuments());</span></p><p class="c6 c5 c0 c7"><span class="c2"></span></p><p class="c5 c0 c7"><span class="c2">&nbsp; // STEP 3: Create a new document if there are none.</span></p><p class="c5 c0 c7"><span class="c2">&nbsp; if (documents.isEmpty) createDocument();</span></p><p class="c6 c5 c0 c7"><span class="c2"></span></p><p class="c5 c0 c7"><span class="c2">&nbsp; // STEP 3: Select the first document in the list of documents.</span></p><p class="c5 c0 c7"><span class="c2">&nbsp; selectDocument(documents.first);</span></p><p class="c5 c0 c7"><span class="c2">}</span></p><p class="c5 c0 c7"><span class="c2">&hellip;</span></p></td></tr></tbody></table><p class="c6 c0"><span></span></p><h3 class="c9 c0"><a name="h.yxdyhxlthy8j"></a><span>Remove the document from local storage.</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>Continue editing </span><span class="c1">web/app.dart</span><span>.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Find the </span><span>deleteDocument()</span><span>&nbsp;function. Add code to remove the document from local storage when the user deletes the document from the app.</span></p><p class="c6 c0 c7"><span></span></p><a href="#" name="b03749e9a6ec5397397d6f8871b2330fb9cafeac"></a><a href="#" name="30"></a><table cellpadding="0" cellspacing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0 c7"><span class="c2">// app.dart</span></p><p class="c5 c0 c7"><span class="c2">&hellip;</span></p><p class="c5 c0 c7"><span class="c2">// STEP 3: Add code to delete a document</span></p><p class="c5 c0 c7"><span class="c2">void deleteDocument(Document doc) {</span></p><p class="c5 c0 c7"><span class="c2">&nbsp; documents.remove(doc);</span></p><p class="c6 c5 c0 c7"><span class="c2"></span></p><p class="c5 c0 c7"><span class="c2">&nbsp; </span><span class="c2">// STEP 5: Also delete from local storage.</span></p><p class="c5 c0 c7"><span class="c2 c1">&nbsp; removeDocument(doc);</span></p><p class="c5 c0 c7"><span class="c2">}</span></p><p class="c5 c0 c7"><span class="c2">&hellip;</span></p></td></tr></tbody></table><h3 class="c9 c0 c27"><a name="h.6ky98xskme83"></a></h3><p class="c0"><span>Save your changes to </span><span class="c1">web/app.dart</span><span>.</span></p><h3 class="c9 c0"><a name="h.ifs5zdb93rhi"></a><span>Run the revised version of the app.</span></h3><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>You&rsquo;ve completed the code edits for this step. Make sure all of your changes are saved.</span></p><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>Run the app again. Create and name several documents. Kill the app and start it up again. The documents you saved persist between invocations of the app.</span></p><p class="c6 c0 c7"><span></span></p><p class="c0"><img height="377" src="images/image06.png" width="588"></p><p class="c6 c0"><span></span></p><hr style="page-break-before:always;display:none;"><p class="c6 c0"><span></span></p><h1 class="c0"><a name="h.ymcy9fqorpug"></a><span>Step 6: Optimize layout for mobile devices</span></h1><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>Your app already works on mobile, since many gestures emulate mouse events, such as clicks. But we can do better. In this step, you&rsquo;ll make your app feel more native on mobile by adding some code to control layout on mobile devices and by adding some specialized CSS styles.</span></p><h2 class="c0"><a name="h.v8hspt230iyp"></a><span>What you will learn</span></h2><ol class="c10 lst-kix_wzk0mdv2qg9u-0 start" start="1"><li class="c16 c11 c0 c7"><span>Using a meta tag to control layout on mobile devices</span></li><li class="c16 c11 c0"><span>CSS styles for mobile devices</span></li></ol><h2 class="c0"><a name="h.10tsfye06kbe"></a><span>Concepts overview</span></h2><h3 class="c18 c9 c0"><a name="h.uu51nii9tdjq"></a><span class="c33 c1">Control</span><span class="c33 c1">&nbsp;layout on mobile devices</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>The &lt;meta&gt; tag, with the viewport attribute, helps to optimize your site for mobile devices. Here&rsquo;s what the Mozilla developer website has to say about mobile-optimization:</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>A typical mobile-optimized site contains something like the following:</span></p><p class="c6 c0"><span></span></p><p class="c11 c0"><span class="c2">&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, maximum-scale=1&quot;&gt;</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>The width property controls the size of the viewport. It can be set to a specific number of pixels, like width=600, or to the special value device-width, which is the width of the screen in CSS pixels at a scale of 100%. (The content attribute also supports corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.)</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.</span></p><h3 class="c9 c0"><a name="h.3q4tho2o4biu"></a><span>CSS styles for mobile devices</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>The @media rule allows different style rules for different media in the same style sheet. Shown below are two rules, one which applies when the app runs in an environment, such as a small mobile device, which has a maximum width of 500 pixels. The other applies when the app runs in an environment that allows a larger width.</span></p><p class="c6 c0"><span></span></p><p class="c11 c0"><span class="c2">@media all and (max-width: 500px) {</span></p><p class="c11 c0"><span class="c2">&nbsp; &hellip;</span></p><p class="c11 c0"><span class="c2">}</span></p><p class="c11 c0"><span class="c2">@media all and (min-width: 501px) {</span></p><p class="c11 c0"><span class="c2">&nbsp; &hellip;</span></p><p class="c11 c0"><span class="c2">} &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="c2">&nbsp;</span><span class="c2 c47">&nbsp;</span></p><h2 class="c0"><a name="h.jjv7ulrpc81s"></a><span>Walkthrough</span></h2><h3 class="c9 c0"><a name="h.xg2egxktuosa"></a><span>Run the app in a small browser window</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>Before you start changing the code, run the app in a tiny window so you can emulate the app&rsquo;s behavior on a mobile phone. You can contrast this behavior with the revised version of the app at the end of this step.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Run the app. Shrink the window down as small as you can.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>The UI is not too cluttered and has a double scroll bar. We can do better!</span></p><p class="c6 c0"><span></span></p><p class="c0"><img height="272" src="images/image01.png" width="400"></p><p class="c6 c0"><span></span></p><h3 class="c9 c0"><a name="h.vngw9eips6yz"></a><span>Add meta viewport tag to HTML code</span></h3><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>O</span><span>pen </span><span class="c1">web/index.html</span><span>.</span></p><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>At the top of the file, within the </span><span>&lt;head&gt;</span><span>&nbsp;section add this meta tag:</span></p><p class="c6 c0 c7"><span></span></p><a href="#" name="cc55c23dce922449740b2782ba379e471cf2ed0b"></a><a href="#" name="31"></a><table cellpadding="0" cellspacing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0 c7"><span class="c2">// web/index.html</span></p><p class="c5 c0 c7"><span class="c2">&hellip;</span></p><p class="c5 c0 c7"><span class="c2">&nbsp; &nbsp; &lt;!-- STEP 6: Add viewport meta tag to control layout on mobile devices --&gt;</span></p><p class="c5 c0 c7"><span class="c2 c1">&nbsp; &nbsp; &lt;meta name=&quot;viewport&quot;</span></p><p class="c5 c0 c7"><span class="c2 c1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content=&quot;width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no&quot;&gt;</span></p><p class="c5 c0 c7"><span class="c2">&hellip;</span></p></td></tr></tbody></table><p class="c6 c0"><span></span></p><p class="c0"><span>This tag fixes the size of the app to the exact size of the device.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Save your changes.</span></p><h3 class="c9 c0"><a name="h.c683e43ehs76"></a><span>Add CSS styles for mobile</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>Open </span><span class="c1">web/css.css</span><span>.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>At the bottom of the CSS file, add all of the code in bold (79 lines):</span></p><p class="c6 c0"><span></span></p><a href="#" name="8c019440a77031fbfe7e164dfc4fbe6b68f77295"></a><a href="#" name="32"></a><table cellpadding="0" cellspacing="0" class="c13"><tbody><tr class="c22"><td class="c20"><p class="c5 c0"><span class="c2">// web/css.css</span></p><p class="c5 c0"><span class="c2">&hellip;</span></p><p class="c6 c5 c0"><span class="c2"></span></p><p class="c5 c0"><span class="c2">/* STEP 6: Add styles for mobile devices */</span></p><p class="c5 c0"><span class="c2">/* Mobile styles. */</span></p><p class="c5 c0"><span class="c2 c1">@media all and (max-width: 500px) {</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; body {</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; overflow: hidden;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; }</span></p><p class="c6 c5 c0"><span class="c2 c1"></span></p><p class="c5 c0"><span class="c2 c1">&nbsp; #sidebar .touched .item {</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; background-color:rgba(250, 150, 150, .8);</span></p><p class="c6 c5 c0"><span class="c2 c1"></span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; -webkit-transition: all .7s cubic-bezier(.65,-0.50,.76,1.32);</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; -moz-transition: all .7s cubic-bezier(.65,-0.50,.76,1.32);</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; transition: all .7s cubic-bezier(.65,-0.50,.76,1.32);</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; }</span></p><p class="c6 c5 c0"><span class="c2 c1"></span></p><p class="c5 c0"><span class="c2 c1">&nbsp; #sidebar {</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; top: 0;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; left: 0;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; right: 0;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; bottom: 0;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; width: 100%;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; -webkit-transition: -webkit-transform 0.3s ease-in-out;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; -moz-transition: -moz-transform 0.3s ease-in-out;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; transition: transform 0.3s ease-in-out;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; -webkit-transform: translate3d(-20%, 0, 0);</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; -moz-transform: translate3d(-20%, 0, 0);</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; transform: translate3d(-20%, 0, 0);</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; }</span></p><p class="c6 c5 c0"><span class="c2 c1"></span></p><p class="c5 c0"><span class="c2 c1">&nbsp; #sidebar.active {</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; -webkit-transform: translate3d(0, 0, 0);</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; -moz-transform: translate3d(0, 0, 0);</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; transform: translate3d(0, 0, 0);</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; }</span></p><p class="c6 c5 c0"><span class="c2 c1"></span></p><p class="c5 c0"><span class="c2 c1">&nbsp; #sidebar .item.active .delete {</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; opacity: .7;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; }</span></p><p class="c6 c5 c0"><span class="c2 c1"></span></p><p class="c5 c0"><span class="c2 c1">&nbsp; #main {</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; top: 0;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; left: 0;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; right: 0;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; bottom: 0;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; -webkit-transition: -webkit-transform 0.3s ease-in-out;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; -moz-transition: -moz-transform 0.3s ease-in-out;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; transition: transform 0.3s ease-in-out;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; -webkit-transform: translate3d(100%, 0, 0);</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; -moz-transform: translate3d(100%, 0, 0);</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; transform: translate3d(100%, 0, 0);</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; }</span></p><p class="c6 c5 c0"><span class="c2 c1"></span></p><p class="c5 c0"><span class="c2 c1">&nbsp; #main.active {</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; -webkit-transform: translate3d(0, 0, 0);</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; -moz-transform: translate3d(0, 0, 0);</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; transform: translate3d(0, 0, 0);</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; }</span></p><p class="c6 c5 c0"><span class="c2 c1"></span></p><p class="c5 c0"><span class="c2 c1">&nbsp; #main .title button {</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; display: block;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; }</span></p><p class="c6 c5 c0"><span class="c2 c1"></span></p><p class="c5 c0"><span class="c2 c1">&nbsp; #main .title .input-wrap {</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; margin-left: 40px;</span></p><p class="c0 c5"><span class="c2 c1">&nbsp; }</span></p><p class="c6 c5 c0"><span class="c2 c1"></span></p><p class="c5 c0"><span class="c2 c1">&nbsp; /* Let&#39;s not go there. It is a silly place. */</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; #main:only-of-type {</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; -moz-transition: none;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; -webkit-transition: none;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; transition: none;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; }</span></p><p class="c6 c5 c0"><span class="c2 c1"></span></p><p class="c5 c0"><span class="c2 c1">&nbsp; #main:only-of-type button {</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; display: none;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; }</span></p><p class="c6 c5 c0"><span class="c2 c1"></span></p><p class="c5 c0"><span class="c2 c1">&nbsp; #main:only-of-type .title .input-wrap {</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; &nbsp; margin-left: 0;</span></p><p class="c5 c0"><span class="c2 c1">&nbsp; }</span></p><p class="c5 c0"><span class="c2 c1">}</span></p></td></tr></tbody></table><p class="c6 c0"><span></span></p><p class="c0"><span>This code separates the app into two panels: one for the index of documents and one for the content of the current document. Choosing a document from the index slides the content panel into view. In the contents panel, a new button slides from the documents contents back to the index.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Save your changes.</span></p><p class="c6 c0"><span></span></p><h3 class="c9 c0"><a name="h.vcike6sk25tj"></a><span>Run the revised version of the app</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>Run the new version of the app in your browser and shrink the window down as small as possible once again.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>On the document index panel, you see a list of the documents you&rsquo;ve created.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Click a document to view its contents.</span></p><p class="c6 c0"><span></span></p><p class="c0"><img height="272" src="images/image16.png" width="400"></p><p class="c6 c0"><span></span></p><p class="c0"><span>On the document contents panel, a small button with an arrow </span><span class="c35">&lsquo;</span><span class="c35">&lt;&rsquo;</span><span>&nbsp;appears to the left of the document title.</span></p><p class="c6 c0"><span></span></p><p class="c0"><span>Click it to return to the document index.</span></p><p class="c6 c0"><span></span></p><p class="c0"><img height="272" src="images/image41.png" width="400"></p><p class="c6 c0"><span></span></p><h3 class="c0"><a name="h.6wxrrse7px8b"></a><span>Run the finished app on your phone</span></h3><p class="c6 c0"><span></span></p><p class="c0"><span>You can find the deployed app at:</span></p><p class="c6 c0"><span></span></p><p class="c0"><span class="c21 c1"><a class="c14" href="http://dart-lang.github.io/io-2013-dart-codelab/deploy/out/index.html">http://dart-lang.github.io/io-2013-dart-codelab/deploy/out/index.html</a></span><span class="c1"><br></span></p><p class="c0"><span>A shortcut: </span><span class="c21 c1"><a class="c14" href="http://goo.gl/hC0NM">goo.gl/hC0NM</a></span><span class="c1">&nbsp;<br></span></p><h1 class="c0"><a name="h.itu7egiz6osy"></a><span>What next?</span></h1><p class="c6 c0 c7"><span></span></p><p class="c0 c7"><span>Congratulations, you&rsquo;ve completed the code lab! If you&rsquo;d like to do more Dart, check out our website and open-source projects:</span></p><p class="c6 c0 c7"><span></span></p><ul class="c10 lst-kix_t7any4lo9hoq-0 start"><li class="c16 c11 c0 c7"><span class="c21"><a class="c14" href="http://www.dartlang.org">www.dartlang.org</a></span><span>&nbsp;(our website)</span></li><li class="c16 c11 c0 c7"><span class="c21"><a class="c14" href="http://pub.dartlang.org">pub.dartlang.org</a></span><span>&nbsp;(packages available for you to use)</span></li><li class="c16 c11 c0 c7"><span class="c21"><a class="c14" href="http://dart.googlecode.com">dart.googlecode.com</a></span><span>&nbsp;(Dart open-source project)</span></li><li class="c16 c11 c0 c7"><span class="c21"><a class="c14" href="https://github.com/dart-lang/dartlang.org">github.com/dart-lang/dartlang.org</a></span><span><a class="c14" href="https://github.com/dart-lang/dartlang.org">&nbsp;(the so</a></span><span>urce for </span><span class="c21"><a class="c14" href="http://www.dartlang.org">www.dartlang.org</a></span><span>; pull requests welcome!)</span></li></ul><p class="c6 c0 c7"><span></span></p><div><p class="c6 c0 c48"><span></span></p></div><div class="c53"><p class="c5 c0 c7 c24"><a href="#cmnt_ref1" name="cmnt1">[a]</a><span class="c37">Chris Buckett:</span></p><p class="c24 c5 c0 c7"><span class="c37">This can also be in an external file.</span></p></div></body></html>
« no previous file with comments | « src/site/codelabs/web-ui-writer/images/image41.png ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698