.audiobox-container, .audiobox-container-interactive { width: 100%; height: 100%; position: inherit; display:flex; pointer-events: all; cursor:default; .audiobox-handle { width:20px; height:100%; display:inline-block; background: gray; } .audiobox-control, .audiobox-control-interactive { top:0; max-height: 32px; width: 100%; display:inline-block; pointer-events: none; } .audiobox-control-interactive { pointer-events: all; } .audiobox-record { pointer-events: all; width:100%; height:100%; position: absolute; pointer-events: none; } .audiobox-record-interactive { pointer-events: all; } .audiobox-controls { width:100%; height:100%; position: relative; display: flex; padding-left: 2px; border: gray solid 3px; .audiobox-player { margin-top:auto; margin-bottom:auto; width:100%; height: 80%; position: relative; padding-right: 5px; display: flex; .audiobox-playhead { position: relative; margin-top: auto; margin-bottom: auto; width: 25px; padding: 2px; } .audiobox-timeline { position:relative; height:100%; width:100%; background: white; border: gray solid 1px; border-radius: 3px; .audiobox-current { width: 1px; height:100%; background-color: red; position: absolute; } .audiobox-linker, .audiobox-linker-mini { position:absolute; width:15px; min-height:10px; height:15px; margin-left:-2.55px; background:gray; border-radius: 100%; background-color: transparent; box-shadow: black 2px 2px 1px; .docuLinkBox-cont { position: relative !important; height: 100% !important; width: 100% !important; left:unset !important; top:unset !important; } } .audiobox-linker-mini { width:8px; min-height:8px; height:8px; box-shadow: black 1px 1px 1px; margin-left: -1; margin-top: -2; .docuLinkBox-cont { position: relative !important; height: 100% !important; width: 100% !important; left:unset !important; top:unset !important; } } .audiobox-linker:hover, .audiobox-linker-mini:hover { transform:scale(1.5); } .audiobox-marker-container, .audiobox-marker-minicontainer { position:absolute; width:10px; height:90%; top:2.5%; background:gray; border-radius: 5px; box-shadow: black 2px 2px 1px; .audiobox-marker { position:relative; height: calc(100% - 15px); margin-top: 15px; } .audio-marker:hover { border: orange 2px solid; } } .audiobox-marker-minicontainer { width:5px; border-radius: 1px; .audiobox-marker { position:relative; height: calc(100% - 8px); margin-top: 8px; } } } } } }