/* Main container */ .timeline-container { width: 100%; /*max-width: 100%;*/ padding: 45px 0 45px 0; margin-top: 10px; position: relative; border-radius: 8px; background-color: #f9f9f9; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='100' viewBox='0 0 300 100'%3E%3Crect x='0' y='46' width='2' height='8' fill='%23c4a882' opacity='0.3'/%3E%3Crect x='3' y='47' width='2' height='6' fill='%23c4a882' opacity='0.25'/%3E%3Crect x='6' y='48' width='2' height='4' fill='%23c4a882' opacity='0.2'/%3E%3Crect x='9' y='48' width='2' height='4' fill='%23c4a882' opacity='0.2'/%3E%3Crect x='12' y='49' width='2' height='2' fill='%23c4a882' opacity='0.15'/%3E%3Crect x='15' y='49' width='2' height='2' fill='%23c4a882' opacity='0.15'/%3E%3Crect x='18' y='49' width='2' height='2' fill='%23c4a882' opacity='0.15'/%3E%3Crect x='21' y='46' width='2' height='8' fill='%23c4a882' opacity='0.25'/%3E%3Crect x='24' y='43' width='2' height='14' fill='%23b89b6e' opacity='0.35'/%3E%3Crect x='27' y='38' width='2' height='24' fill='%23b89b6e' opacity='0.45'/%3E%3Crect x='30' y='32' width='2' height='36' fill='%23b89b6e' opacity='0.5'/%3E%3Crect x='33' y='26' width='2' height='48' fill='%23a8906a' opacity='0.55'/%3E%3Crect x='36' y='20' width='2' height='60' fill='%23a8906a' opacity='0.6'/%3E%3Crect x='39' y='15' width='2' height='70' fill='%239b8560' opacity='0.65'/%3E%3Crect x='42' y='10' width='2' height='80' fill='%239b8560' opacity='0.7'/%3E%3Crect x='45' y='6' width='2' height='88' fill='%238e7a56' opacity='0.75'/%3E%3Crect x='48' y='3' width='2' height='94' fill='%238e7a56' opacity='0.8'/%3E%3Crect x='51' y='1' width='2' height='98' fill='%2381704c' opacity='0.85'/%3E%3Crect x='54' y='4' width='2' height='92' fill='%238e7a56' opacity='0.78'/%3E%3Crect x='57' y='8' width='2' height='84' fill='%239b8560' opacity='0.7'/%3E%3Crect x='60' y='12' width='2' height='76' fill='%239b8560' opacity='0.65'/%3E%3Crect x='63' y='18' width='2' height='64' fill='%23a8906a' opacity='0.58'/%3E%3Crect x='66' y='24' width='2' height='52' fill='%23a8906a' opacity='0.5'/%3E%3Crect x='69' y='30' width='2' height='40' fill='%23b89b6e' opacity='0.45'/%3E%3Crect x='72' y='36' width='2' height='28' fill='%23b89b6e' opacity='0.38'/%3E%3Crect x='75' y='40' width='2' height='20' fill='%23c4a882' opacity='0.32'/%3E%3Crect x='78' y='43' width='2' height='14' fill='%23c4a882' opacity='0.28'/%3E%3Crect x='81' y='46' width='2' height='8' fill='%23c4a882' opacity='0.22'/%3E%3Crect x='84' y='47' width='2' height='6' fill='%23c4a882' opacity='0.18'/%3E%3Crect x='87' y='48' width='2' height='4' fill='%23c4a882' opacity='0.15'/%3E%3Crect x='90' y='48' width='2' height='4' fill='%23c4a882' opacity='0.15'/%3E%3Crect x='93' y='49' width='2' height='2' fill='%23c4a882' opacity='0.12'/%3E%3Crect x='96' y='49' width='2' height='2' fill='%23c4a882' opacity='0.12'/%3E%3Crect x='99' y='49' width='2' height='2' fill='%23c4a882' opacity='0.12'/%3E%3Crect x='102' y='49' width='2' height='2' fill='%23c4a882' opacity='0.12'/%3E%3Crect x='105' y='48' width='2' height='4' fill='%23c4a882' opacity='0.15'/%3E%3Crect x='108' y='46' width='2' height='8' fill='%23c4a882' opacity='0.22'/%3E%3Crect x='111' y='42' width='2' height='16' fill='%23b89b6e' opacity='0.32'/%3E%3Crect x='114' y='36' width='2' height='28' fill='%23b89b6e' opacity='0.42'/%3E%3Crect x='117' y='28' width='2' height='44' fill='%23a8906a' opacity='0.52'/%3E%3Crect x='120' y='20' width='2' height='60' fill='%239b8560' opacity='0.62'/%3E%3Crect x='123' y='14' width='2' height='72' fill='%239b8560' opacity='0.68'/%3E%3Crect x='126' y='8' width='2' height='84' fill='%238e7a56' opacity='0.75'/%3E%3Crect x='129' y='3' width='2' height='94' fill='%238e7a56' opacity='0.82'/%3E%3Crect x='132' y='0' width='2' height='100' fill='%2381704c' opacity='0.88'/%3E%3Crect x='135' y='1' width='2' height='98' fill='%2381704c' opacity='0.85'/%3E%3Crect x='138' y='5' width='2' height='90' fill='%238e7a56' opacity='0.8'/%3E%3Crect x='141' y='2' width='2' height='96' fill='%238e7a56' opacity='0.84'/%3E%3Crect x='144' y='6' width='2' height='88' fill='%238e7a56' opacity='0.78'/%3E%3Crect x='147' y='10' width='2' height='80' fill='%239b8560' opacity='0.72'/%3E%3Crect x='150' y='16' width='2' height='68' fill='%239b8560' opacity='0.65'/%3E%3Crect x='153' y='22' width='2' height='56' fill='%23a8906a' opacity='0.55'/%3E%3Crect x='156' y='28' width='2' height='44' fill='%23a8906a' opacity='0.48'/%3E%3Crect x='159' y='34' width='2' height='32' fill='%23b89b6e' opacity='0.4'/%3E%3Crect x='162' y='38' width='2' height='24' fill='%23b89b6e' opacity='0.35'/%3E%3Crect x='165' y='42' width='2' height='16' fill='%23c4a882' opacity='0.28'/%3E%3Crect x='168' y='44' width='2' height='12' fill='%23c4a882' opacity='0.22'/%3E%3Crect x='171' y='46' width='2' height='8' fill='%23c4a882' opacity='0.18'/%3E%3Crect x='174' y='47' width='2' height='6' fill='%23c4a882' opacity='0.15'/%3E%3Crect x='177' y='48' width='2' height='4' fill='%23c4a882' opacity='0.12'/%3E%3Crect x='180' y='49' width='2' height='2' fill='%23c4a882' opacity='0.1'/%3E%3Crect x='183' y='49' width='2' height='2' fill='%23c4a882' opacity='0.1'/%3E%3Crect x='186' y='48' width='2' height='4' fill='%23c4a882' opacity='0.12'/%3E%3Crect x='189' y='46' width='2' height='8' fill='%23c4a882' opacity='0.18'/%3E%3Crect x='192' y='43' width='2' height='14' fill='%23b89b6e' opacity='0.28'/%3E%3Crect x='195' y='39' width='2' height='22' fill='%23b89b6e' opacity='0.35'/%3E%3Crect x='198' y='34' width='2' height='32' fill='%23a8906a' opacity='0.42'/%3E%3Crect x='201' y='30' width='2' height='40' fill='%23a8906a' opacity='0.48'/%3E%3Crect x='204' y='26' width='2' height='48' fill='%23a8906a' opacity='0.52'/%3E%3Crect x='207' y='22' width='2' height='56' fill='%239b8560' opacity='0.58'/%3E%3Crect x='210' y='16' width='2' height='68' fill='%239b8560' opacity='0.65'/%3E%3Crect x='213' y='10' width='2' height='80' fill='%238e7a56' opacity='0.72'/%3E%3Crect x='216' y='4' width='2' height='92' fill='%238e7a56' opacity='0.8'/%3E%3Crect x='219' y='2' width='2' height='96' fill='%2381704c' opacity='0.85'/%3E%3Crect x='222' y='5' width='2' height='90' fill='%238e7a56' opacity='0.78'/%3E%3Crect x='225' y='12' width='2' height='76' fill='%239b8560' opacity='0.68'/%3E%3Crect x='228' y='8' width='2' height='84' fill='%238e7a56' opacity='0.75'/%3E%3Crect x='231' y='14' width='2' height='72' fill='%239b8560' opacity='0.68'/%3E%3Crect x='234' y='20' width='2' height='60' fill='%239b8560' opacity='0.6'/%3E%3Crect x='237' y='25' width='2' height='50' fill='%23a8906a' opacity='0.55'/%3E%3Crect x='240' y='30' width='2' height='40' fill='%23a8906a' opacity='0.48'/%3E%3Crect x='243' y='34' width='2' height='32' fill='%23b89b6e' opacity='0.4'/%3E%3Crect x='246' y='38' width='2' height='24' fill='%23b89b6e' opacity='0.35'/%3E%3Crect x='249' y='42' width='2' height='16' fill='%23c4a882' opacity='0.28'/%3E%3Crect x='252' y='45' width='2' height='10' fill='%23c4a882' opacity='0.22'/%3E%3Crect x='255' y='47' width='2' height='6' fill='%23c4a882' opacity='0.18'/%3E%3Crect x='258' y='48' width='2' height='4' fill='%23c4a882' opacity='0.15'/%3E%3Crect x='261' y='48' width='2' height='4' fill='%23c4a882' opacity='0.12'/%3E%3Crect x='264' y='49' width='2' height='2' fill='%23c4a882' opacity='0.1'/%3E%3Crect x='267' y='49' width='2' height='2' fill='%23c4a882' opacity='0.1'/%3E%3Crect x='270' y='48' width='2' height='4' fill='%23c4a882' opacity='0.12'/%3E%3Crect x='273' y='47' width='2' height='6' fill='%23c4a882' opacity='0.15'/%3E%3Crect x='276' y='46' width='2' height='8' fill='%23c4a882' opacity='0.18'/%3E%3Crect x='279' y='45' width='2' height='10' fill='%23c4a882' opacity='0.2'/%3E%3Crect x='282' y='44' width='2' height='12' fill='%23c4a882' opacity='0.22'/%3E%3Crect x='285' y='43' width='2' height='14' fill='%23c4a882' opacity='0.25'/%3E%3Crect x='288' y='45' width='2' height='10' fill='%23c4a882' opacity='0.2'/%3E%3Crect x='291' y='47' width='2' height='6' fill='%23c4a882' opacity='0.15'/%3E%3Crect x='294' y='48' width='2' height='4' fill='%23c4a882' opacity='0.12'/%3E%3Crect x='297' y='49' width='2' height='2' fill='%23c4a882' opacity='0.1'/%3E%3C/svg%3E"); background-size: 300px 100px; background-repeat: repeat; } /* Segment */ .timeline-segment { display: inline-block; height: 1px; position: absolute; top: 40%; transition: opacity 0.15s ease; vertical-align: top; } .timeline-segment::before { content: ''; position: absolute; bottom: 100%; left: 0; right: 0; height: 35px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='35' viewBox='0 0 120 35'%3E%3Crect x='0' y='5' width='1.6' height='30' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='2' y='12' width='1.6' height='23' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='4' y='22' width='1.6' height='13' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='6' y='24' width='1.6' height='11' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='8' y='27' width='1.6' height='8' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='10' y='30' width='1.6' height='5' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='12' y='30' width='1.6' height='5' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='14' y='30' width='1.6' height='5' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='16' y='23' width='1.6' height='12' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='18' y='30' width='1.6' height='5' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='20' y='22' width='1.6' height='13' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='22' y='19' width='1.6' height='16' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='24' y='28' width='1.6' height='7' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='26' y='30' width='1.6' height='5' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='28' y='30' width='1.6' height='5' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='30' y='30' width='1.6' height='5' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='32' y='30' width='1.6' height='5' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='34' y='24' width='1.6' height='11' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='36' y='15' width='1.6' height='20' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='38' y='25' width='1.6' height='10' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='40' y='18' width='1.6' height='17' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='42' y='22' width='1.6' height='13' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='44' y='12' width='1.6' height='23' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='46' y='5' width='1.6' height='30' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='48' y='2' width='1.6' height='33' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='50' y='5' width='1.6' height='30' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='52' y='1' width='1.6' height='34' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='54' y='0' width='1.6' height='35' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='56' y='2' width='1.6' height='33' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='58' y='12' width='1.6' height='23' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='60' y='17' width='1.6' height='18' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='62' y='14' width='1.6' height='21' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='64' y='14' width='1.6' height='21' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='66' y='16' width='1.6' height='19' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='68' y='22' width='1.6' height='13' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='70' y='26' width='1.6' height='9' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='72' y='26' width='1.6' height='9' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='74' y='30' width='1.6' height='5' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='76' y='30' width='1.6' height='5' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='78' y='28' width='1.6' height='7' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='80' y='30' width='1.6' height='5' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='82' y='29' width='1.6' height='6' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='84' y='28' width='1.6' height='7' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='86' y='19' width='1.6' height='16' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='88' y='21' width='1.6' height='14' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='90' y='30' width='1.6' height='5' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='92' y='26' width='1.6' height='9' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='94' y='19' width='1.6' height='16' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='96' y='26' width='1.6' height='9' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='98' y='24' width='1.6' height='11' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='100' y='30' width='1.6' height='5' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='102' y='23' width='1.6' height='12' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='104' y='24' width='1.6' height='11' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='106' y='14' width='1.6' height='21' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='108' y='5' width='1.6' height='30' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='110' y='4' width='1.6' height='31' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='112' y='0' width='1.6' height='35' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='114' y='4' width='1.6' height='31' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='116' y='12' width='1.6' height='23' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='118' y='21' width='1.6' height='14' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='35' viewBox='0 0 80 35'%3E%3Crect x='0' y='11' width='1.6' height='24' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='2' y='16' width='1.6' height='19' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='4' y='4' width='1.6' height='31' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='6' y='7' width='1.6' height='28' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='8' y='17' width='1.6' height='18' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='10' y='22' width='1.6' height='13' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='12' y='30' width='1.6' height='5' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='14' y='30' width='1.6' height='5' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='16' y='30' width='1.6' height='5' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='18' y='28' width='1.6' height='7' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='20' y='20' width='1.6' height='15' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='22' y='21' width='1.6' height='14' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='24' y='28' width='1.6' height='7' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='26' y='29' width='1.6' height='6' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='28' y='30' width='1.6' height='5' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='30' y='30' width='1.6' height='5' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='32' y='21' width='1.6' height='14' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='34' y='25' width='1.6' height='10' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='36' y='15' width='1.6' height='20' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='38' y='6' width='1.6' height='29' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='40' y='0' width='1.6' height='35' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='42' y='10' width='1.6' height='25' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='44' y='3' width='1.6' height='32' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='46' y='0' width='1.6' height='35' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='48' y='7' width='1.6' height='28' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='50' y='2' width='1.6' height='33' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='52' y='0' width='1.6' height='35' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='54' y='5' width='1.6' height='30' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='56' y='12' width='1.6' height='23' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='58' y='10' width='1.6' height='25' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='60' y='10' width='1.6' height='25' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='62' y='14' width='1.6' height='21' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='64' y='6' width='1.6' height='29' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='66' y='0' width='1.6' height='35' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='68' y='0' width='1.6' height='35' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='70' y='5' width='1.6' height='30' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='72' y='0' width='1.6' height='35' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='74' y='2' width='1.6' height='33' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='76' y='0' width='1.6' height='35' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='78' y='0' width='1.6' height='35' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='144' height='35' viewBox='0 0 144 35'%3E%3Crect x='0' y='24' width='1.6' height='11' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='2' y='25' width='1.6' height='10' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='4' y='30' width='1.6' height='5' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='6' y='28' width='1.6' height='7' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='8' y='24' width='1.6' height='11' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='10' y='24' width='1.6' height='11' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='12' y='30' width='1.6' height='5' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='14' y='30' width='1.6' height='5' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='16' y='28' width='1.6' height='7' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='18' y='30' width='1.6' height='5' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='20' y='23' width='1.6' height='12' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='22' y='19' width='1.6' height='16' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='24' y='13' width='1.6' height='22' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='26' y='17' width='1.6' height='18' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='28' y='17' width='1.6' height='18' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='30' y='21' width='1.6' height='14' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='32' y='22' width='1.6' height='13' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='34' y='22' width='1.6' height='13' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='36' y='17' width='1.6' height='18' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='38' y='13' width='1.6' height='22' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='40' y='10' width='1.6' height='25' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='42' y='11' width='1.6' height='24' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='44' y='15' width='1.6' height='20' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='46' y='7' width='1.6' height='28' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='48' y='0' width='1.6' height='35' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='50' y='6' width='1.6' height='29' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='52' y='13' width='1.6' height='22' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='54' y='18' width='1.6' height='17' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='56' y='22' width='1.6' height='13' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='58' y='25' width='1.6' height='10' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='60' y='20' width='1.6' height='15' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='62' y='26' width='1.6' height='9' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='64' y='22' width='1.6' height='13' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='66' y='18' width='1.6' height='17' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='68' y='12' width='1.6' height='23' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='70' y='4' width='1.6' height='31' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='72' y='4' width='1.6' height='31' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='74' y='12' width='1.6' height='23' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='76' y='17' width='1.6' height='18' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='78' y='17' width='1.6' height='18' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='80' y='15' width='1.6' height='20' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='82' y='20' width='1.6' height='15' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='84' y='19' width='1.6' height='16' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='86' y='14' width='1.6' height='21' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='88' y='17' width='1.6' height='18' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='90' y='11' width='1.6' height='24' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='92' y='19' width='1.6' height='16' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='94' y='19' width='1.6' height='16' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='96' y='11' width='1.6' height='24' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='98' y='14' width='1.6' height='21' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='100' y='6' width='1.6' height='29' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='102' y='11' width='1.6' height='24' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='104' y='10' width='1.6' height='25' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='106' y='2' width='1.6' height='33' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='108' y='4' width='1.6' height='31' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='110' y='8' width='1.6' height='27' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='112' y='5' width='1.6' height='30' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='114' y='8' width='1.6' height='27' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='116' y='0' width='1.6' height='35' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='118' y='8' width='1.6' height='27' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='120' y='6' width='1.6' height='29' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='122' y='0' width='1.6' height='35' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='124' y='8' width='1.6' height='27' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='126' y='13' width='1.6' height='22' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='128' y='10' width='1.6' height='25' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='130' y='9' width='1.6' height='26' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='132' y='10' width='1.6' height='25' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='134' y='17' width='1.6' height='18' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='136' y='18' width='1.6' height='17' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='138' y='24' width='1.6' height='11' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='140' y='30' width='1.6' height='5' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='142' y='23' width='1.6' height='12' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='108' height='35' viewBox='0 0 108 35'%3E%3Crect x='0' y='11' width='1.6' height='24' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='2' y='23' width='1.6' height='12' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='4' y='13' width='1.6' height='22' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='6' y='10' width='1.6' height='25' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='8' y='0' width='1.6' height='35' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='10' y='10' width='1.6' height='25' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='12' y='20' width='1.6' height='15' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='14' y='13' width='1.6' height='22' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='16' y='12' width='1.6' height='23' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='18' y='9' width='1.6' height='26' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='20' y='18' width='1.6' height='17' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='22' y='24' width='1.6' height='11' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='24' y='22' width='1.6' height='13' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='26' y='9' width='1.6' height='26' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='28' y='4' width='1.6' height='31' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='30' y='5' width='1.6' height='30' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='32' y='13' width='1.6' height='22' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='34' y='10' width='1.6' height='25' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='36' y='0' width='1.6' height='35' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='38' y='0' width='1.6' height='35' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='40' y='0' width='1.6' height='35' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='42' y='8' width='1.6' height='27' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='44' y='0' width='1.6' height='35' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='46' y='5' width='1.6' height='30' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='48' y='7' width='1.6' height='28' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='50' y='0' width='1.6' height='35' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='52' y='0' width='1.6' height='35' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='54' y='3' width='1.6' height='32' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='56' y='3' width='1.6' height='32' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='58' y='0' width='1.6' height='35' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='60' y='0' width='1.6' height='35' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='62' y='0' width='1.6' height='35' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='64' y='11' width='1.6' height='24' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='66' y='18' width='1.6' height='17' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='68' y='25' width='1.6' height='10' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='70' y='30' width='1.6' height='5' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='72' y='30' width='1.6' height='5' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='74' y='30' width='1.6' height='5' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='76' y='26' width='1.6' height='9' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='78' y='23' width='1.6' height='12' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='80' y='30' width='1.6' height='5' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='82' y='26' width='1.6' height='9' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='84' y='30' width='1.6' height='5' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='86' y='30' width='1.6' height='5' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='88' y='30' width='1.6' height='5' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='90' y='22' width='1.6' height='13' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='92' y='16' width='1.6' height='19' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='94' y='29' width='1.6' height='6' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='96' y='30' width='1.6' height='5' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='98' y='30' width='1.6' height='5' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='100' y='16' width='1.6' height='19' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='102' y='29' width='1.6' height='6' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='104' y='16' width='1.6' height='19' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3Crect x='106' y='20' width='1.6' height='15' stroke='currentColor' stroke-width='0.5' fill='currentColor'/%3E%3C/svg%3E"); background-size: 120px 35px, 80px 35px, 144px 35px, 108px 35px; background-position: 0 bottom, 7px bottom, 23px bottom, 37px bottom; background-repeat: repeat-x, repeat-x, repeat-x, repeat-x; opacity: 0.5; pointer-events: none; } .timeline-segment.first { border-radius: 8px 0 0 8px; } .timeline-segment.last { border-radius: 0 8px 8px 0; } .timeline-segment.selected { box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.8); z-index: 5; } .timeline-segment.dragging { opacity: 0.7; } /* Tick mark */ .timeline-tick { position: absolute; bottom: 100%; left: 0; width: 1px; height: 25px; background-color: black; pointer-events: none; } /* Time label */ .time-label { position: absolute; bottom: 5px; left: 5px; color: black; font-size: 15px; font-weight: bold; white-space: nowrap; pointer-events: none; } /* Controls container */ .controls-container { /*position: absolute; transform: translateX(-50%); */ bottom: 0px; left: 50%; padding-left: 10px; z-index: 1000; pointer-events: auto; } /* Resize handle */ .resize-handle { position: absolute; width: 16px; height: 16px; background-color: white; border-radius: 50%; cursor: ew-resize; z-index: 10; transition: box-shadow 0.15s ease, background-color 0.15s ease; transform: translate(-50%, -50%); top: 25%; } .resize-handle.dragging { box-shadow: 0 0 10px rgba(0,0,0,0.5); } .resize-handle:not(.dragging) { box-shadow: 0 0 8px rgba(0,0,0,0.5); } .resize-handle:not(.dragging):hover { box-shadow: 0 0 12px rgba(0,0,0,0.6); background-color: #f0f0f0; } .marked-time-line { position: absolute; width: 2px; background-color: blue; height: 100%; top: 0; z-index: 8; pointer-events: none; } .video-start-button { position: relative; width: 16px; height: 16px; background-color: blue; border-radius: 2px; cursor: ew-resize; z-index: 10; transition: box-shadow 0.15s ease, background-color 0.15s ease; transform: translate(-50%, -50%); top: 55%; } .video-start-button.dragging { box-shadow: 0 0 10px rgba(0,0,0,0.5); } .video-start-button:not(.dragging) { box-shadow: 0 0 8px rgba(0,0,0,0.5); } .video-start-button:not(.dragging):hover { box-shadow: 0 0 12px rgba(0,0,0,0.6); background-color: #0066cc; } #plyr-player { height: 30vh !important; } #plyr-player .plyr__video-embed { height: 30vh !important; } #plyr-player iframe { height: 30vh !important; }