.tf_hidden { display: none; } .emoji-apple { font-family: apple color emoji,segoe ui emoji,noto color emoji,android emoji,emojisymbols,emojione mozilla,twemoji mozilla,segoe ui symbol; } .cog { display: inline-block; padding: 0px 20px; } #cog table { width: 100%; } #cog .d-flex { display: flex; justify-content: space-between; } #cog .btn-minus, #cog .btn-plus, #cog .btn-change { border: 1px solid #c8c6c6; padding: 0.6rem 1rem; font-size: 1rem; line-height: 1.5rem; font-weight: 400; cursor: pointer; background: white; border-radius: 50%; } #cog .text-middle { font-weight: 600; } #cog .text-main { } .reading { font-size: 20px; font-family: "Times New Roman", Times, serif; word-wrap: break-word; } .reading a { border-style: solid; border-bottom-width: 2px; margin: 0px auto; -webkit-border-image: -webkit-linear-gradient(left,#1ebbf0 30%,#39dfaa 100%); border-image-slice: 1; border-top: 0; border-right: 0; border-left: 0; padding-top: 10px; } .reading ul li { margin-bottom: 10px; } .reading br { line-height: 40px; } .timeline .panel { position: relative; clear: both; } @media (min-width: 768px) { .reading {font-size: 24px;height: 170px; } .reading br {line-height: 50px;} .timeline .line { position: absolute; width: 4px; display: block; background: currentColor; top: 0px; bottom: 0px; margin-left: 30px; } .timeline .line::before { top: -4px; } .timeline .line::after { bottom: -4px; } .timeline .line::before, .timeline .line::after { content: ''; position: absolute; left: -4px; width: 12px; height: 12px; display: block; border-radius: 50%; background: currentColor; } .timeline .panel { margin: 10px 0px 21px 70px; } } table, tr, td { padding: 10px; } table { margin-bottom: 10px; } .continue-child { text-align: center; font-weight: bold; word-wrap: break-word; } .continue-child a{ color: teal; } .timeline { position: relative; margin-top: 4px; margin-bottom: 30px; } @media (max-width: 413px) { .timeline .panel { margin: 20px 0px; } .timeline .line::before, .timeline .line::after { width: 0px; } .timeline .line { top: unset; } } .timeline .panel::before { position: absolute; display: block; top: 8px; left: -24px; content: ''; width: 0px; height: 0px; border: inherit; border-width: 12px; border-top-color: transparent; border-bottom-color: transparent; border-left-color: transparent; } .timeline .panel .panel-heading.icon * { font-size: 20px; vertical-align: middle; line-height: 40px; } .timeline .panel .panel-heading.icon { position: absolute; left: -59px; display: block; width: 40px; height: 40px; padding: 0px; border-radius: 50%; text-align: center; float: left; background-image: linear-gradient(135deg,#1ebbf0 30%,#39dfaa 100%); color: white; } .timeline .panel-outline { border-color: transparent; background: transparent; box-shadow: none; } .timeline .panel-outline .panel-body { padding: 10px 0px; } .timeline .panel-outline .panel-heading:not(.icon), .timeline .panel-outline .panel-footer { display: none; } .panel-title { display: inline-block; } body { touch-action: manipulation; } #background li { margin-right: 1.25rem; margin-bottom: 1rem; padding-left: 0; list-style: none; } ul#background { padding: 0; margin: 0; } #background a { cursor: pointer; } .item.item--1 { background-color: #f5e4e4; border: 1px solid #ebcaca; } .item.item--2 { background-color: #f5ebcd; border: 1px solid #efdfaf; } .item.item--3 { background-color: #e2eee2; border: 1px solid #cbe1cb; } .item.item--4 { background-color: #e1e8e8; border: 1px solid #cdd9d9; } .item.item--5 { background-color: #eae4d3; border: 1px solid #ded5bb; } .item.item--6 { background-color: #e5e3df; border: 1px solid #d5d2cb; } .item.item--7 { background-color: #222; border: 1px solid #101010; } .item.item--8 { background-color: #fff; border: 1px solid #ededed; } #background>li>a.active { position: relative; } #background>li>a { width: 3.5rem; height: 3.5rem; display: block; border: 1px solid #eee; border-radius: 50%; } #background>li>a.active:after { content: ""; display: block; width: 8px; height: 14px; border: solid #a6b3b3; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); position: absolute; left: 0; right: 0; bottom: 0; top: -3px; margin: auto; } .align-middle { width: 120px; }