/* todo belongs in layout.css */
.tpControls .tpRow * {
  flex-shrink: 0;
}

.tpControls .tpRow .tpScrubber {
  flex-shrink: 1;
}

.tpPlayer {
  /* Default Skin colors */
  --control-size: 38px;
  --background-color: #000;
  --row-color: rgba(42, 49, 92, 0.7);
  --play-overlay-color: rgba(61, 66, 111, 0.8);
  --control-frame-color: rgb(150, 150, 150);
  --control-background-color: rgba(61, 66, 111, 1);
  --control-hover-color: rgba(61, 66, 111, 1);
  --scrub-track-color: rgba(255, 255, 255, 0.25);
  --play-progress-color: rgba(255, 255, 255, 1.0);
  --expander-color: rgb(26, 29, 49);
  --expander-hover-color: rgb(36, 40, 66);
  --expander-selected-color: rgb(36, 40, 66);
  --tooltip-text-only-width: 80px;
}

.tpPlayerView {
  font-family: "Source Sans Pro", Helvetica, sans-serif;
  border-radius: 4px;
  background-color: #000;
  background-color: var(--background-color);
  --control-color: rgba(255, 255, 255, 0.7);
  --control-selected-color: rgba(255, 255, 255, 0.6);
  --media-margin-left: 0;
  --media-margin-right: 0;
  --play-icon: url('data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDMyIDMyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNDkuMiAoNTExNjApIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPg0KICAgIDx0aXRsZT5QbGF5ZXIvQnV0dG9uL0ljb24vUGxheTwvdGl0bGU+DQogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+DQogICAgPGRlZnM+DQogICAgICAgIDxwb2x5Z29uIGlkPSJwYXRoLTEiIHBvaW50cz0iOSA3IDkgMjUgMjQuNzUgMTYiPjwvcG9seWdvbj4NCiAgICA8L2RlZnM+DQogICAgPGcgaWQ9IlBsYXllci9CdXR0b24vSWNvbi9QbGF5IiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4NCiAgICAgICAgPGcgaWQ9IkNvbWJpbmVkLVNoYXBlIj4NCiAgICAgICAgICAgIDx1c2UgZmlsbD0iI0ZGRkZGRiIgZmlsbC1ydWxlPSJldmVub2RkIiB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4NCiAgICAgICAgICAgIDxwYXRoIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSIyLjE5ODcxNzk1IiBkPSJNMTAuMDk5MzU5LDguODk0MzkzMDQgTDEwLjA5OTM1OSwyMy4xMDU2MDcgTDIyLjUzNDE3MTEsMTYgTDEwLjA5OTM1OSw4Ljg5NDM5MzA0IFoiPjwvcGF0aD4NCiAgICAgICAgPC9nPg0KICAgIDwvZz4NCjwvc3ZnPg==');
  --pause-icon: url('data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDMyIDMyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNDkuMiAoNTExNjApIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPg0KICAgIDx0aXRsZT5QbGF5ZXIvQnV0dG9uL0ljb24vUGF1c2U8L3RpdGxlPg0KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPg0KICAgIDxkZWZzPjwvZGVmcz4NCiAgICA8ZyBpZD0iUGxheWVyL0J1dHRvbi9JY29uL1BhdXNlIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4NCiAgICAgICAgPHBhdGggZD0iTTksNyBMMTMsNyBMMTMsMjUgTDksMjUgTDksNyBaIE0xOSw3IEwyMyw3IEwyMywyNSBMMTksMjUgTDE5LDcgWiIgaWQ9IkNvbWJpbmVkLVNoYXBlIiBmaWxsPSIjRkZGRkZGIj48L3BhdGg+DQogICAgPC9nPg0KPC9zdmc+');
  --jumpback-icon: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjQgMjkiPg0KICA8ZGVmcz4NCiAgICA8c3R5bGU+DQogICAgICAuY2xzLTEsIC5jbHMtMyB7DQogICAgICAgIGZpbGw6IG5vbmU7DQogICAgICB9DQoNCiAgICAgIC5jbHMtMSB7DQogICAgICAgIGNsaXAtcnVsZTogZXZlbm9kZDsNCiAgICAgIH0NCg0KICAgICAgLmNscy0yIHsNCiAgICAgICAgY2xpcC1wYXRoOiB1cmwoI2NsaXAtcGF0aCk7DQogICAgICB9DQoNCiAgICAgIC5jbHMtMyB7DQogICAgICAgIHN0cm9rZTogI2ZmZjsNCiAgICAgICAgc3Ryb2tlLW1pdGVybGltaXQ6IDEwOw0KICAgICAgICBzdHJva2Utd2lkdGg6IDRweDsNCiAgICAgIH0NCg0KICAgICAgLmNscy00IHsNCiAgICAgICAgY2xpcC1wYXRoOiB1cmwoI2NsaXAtcGF0aC0yKTsNCiAgICAgIH0NCg0KICAgICAgLmNscy01IHsNCiAgICAgICAgZmlsbDogI2ZmZjsNCiAgICAgIH0NCg0KICAgICAgLmNscy02IHsNCiAgICAgICAgY2xpcC1wYXRoOiB1cmwoI2NsaXAtcGF0aC0zKTsNCiAgICAgIH0NCiAgICA8L3N0eWxlPg0KICAgIDxjbGlwUGF0aCBpZD0iY2xpcC1wYXRoIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjQgLTIxKSI+DQogICAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0zNiwyOEExMCwxMCwwLDEsMSwyNiwzOCIvPg0KICAgIDwvY2xpcFBhdGg+DQogICAgPGNsaXBQYXRoIGlkPSJjbGlwLXBhdGgtMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI0IC0yMSkiPg0KICAgICAgPHBvbHlnb24gY2xhc3M9ImNscy0xIiBwb2ludHM9IjM2IDI2IDM2IDMyIDMxIDI5IDM2IDI2Ii8+DQogICAgPC9jbGlwUGF0aD4NCiAgICA8Y2xpcFBhdGggaWQ9ImNsaXAtcGF0aC0zIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjQgLTIxKSI+DQogICAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0zOS41LDM4YzAtMS4zOS0uMzgtMi4wOC0xLTIuMDgtLjkzLDAtMSwxLjQ5LTEsMi4wOCwwLDEuMzkuMzgsMi4wOSwxLDIuMDlDMzkuNDMsNDAuMDgsMzkuNSwzOC41OCwzOS41LDM4Wm0uMzQtMy4wOGEyLjY2LDIuNjYsMCwwLDEsLjg2LDEuMkE1LjM1LDUuMzUsMCwwLDEsNDEsMzhhNS4zLDUuMywwLDAsMS0uMywxLjg4LDIuNjYsMi42NiwwLDAsMS0uODYsMS4yLDIuMzUsMi4zNSwwLDAsMS0yLjY4LDAsMi42NiwyLjY2LDAsMCwxLS44Ni0xLjJBNS4zLDUuMywwLDAsMSwzNiwzOGE1LjM1LDUuMzUsMCwwLDEsLjMtMS44OSwyLjY2LDIuNjYsMCwwLDEsLjg2LTEuMiwyLjM5LDIuMzksMCwwLDEsMi42OCwwWk0zMy41LDM0LjdIMzR2Ni42SDMyLjVWMzYuMmgtMVYzNC43WiIvPg0KICAgIDwvY2xpcFBhdGg+DQogIDwvZGVmcz4NCiAgPHRpdGxlPmp1bXBiYWNrPC90aXRsZT4NCiAgPGcgY2xhc3M9ImNscy0yIj4NCiAgICA8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik0zNiwyOEExMCwxMCwwLDEsMSwyNiwzOCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI0IC0yMSkiLz4NCiAgPC9nPg0KICA8ZyBjbGFzcz0iY2xzLTQiPg0KICAgIDxyZWN0IGNsYXNzPSJjbHMtNSIgeD0iMiIgd2lkdGg9IjE1IiBoZWlnaHQ9IjE2Ii8+DQogIDwvZz4NCiAgPGcgY2xhc3M9ImNscy02Ij4NCiAgICA8cmVjdCBjbGFzcz0iY2xzLTUiIHg9IjIuNSIgeT0iOC41IiB3aWR0aD0iMTkuNSIgaGVpZ2h0PSIxNyIvPg0KICA8L2c+DQo8L3N2Zz4=');
  --jumpforward-icon: url('data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjQgMjkiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI0IDI5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzJfKTt9LnN0MXtmaWxsOm5vbmU7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLXdpZHRoOjQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fS5zdDJ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNF8pO30uc3Qze2ZpbGw6I0ZGRkZGRjt9LnN0NHtjbGlwLXBhdGg6dXJsKCNTVkdJRF82Xyk7fTwvc3R5bGU+PHRpdGxlPmp1bXBiYWNrPC90aXRsZT48Zz48Zz48ZGVmcz48cGF0aCBpZD0iU1ZHSURfMV8iIGQ9Ik0yMiwxN2MwLDUuNS00LjUsMTAtMTAsMTBTMiwyMi41LDIsMTdTNi41LDcsMTIsNyIvPjwvZGVmcz48Y2xpcFBhdGggaWQ9IlNWR0lEXzJfIj48dXNlIHhsaW5rOmhyZWY9IiNTVkdJRF8xXyIgIHN0eWxlPSJvdmVyZmxvdzp2aXNpYmxlOyIvPjwvY2xpcFBhdGg+PGcgY2xhc3M9InN0MCI+PHBhdGggY2xhc3M9InN0MSIgZD0iTTIyLDE3YzAsNS41LTQuNSwxMC0xMCwxMFMyLDIyLjUsMiwxN1M2LjUsNywxMiw3Ii8+PC9nPjwvZz48L2c+PGc+PGc+PGRlZnM+PHBvbHlnb24gaWQ9IlNWR0lEXzNfIiBwb2ludHM9IjE3LDggMTIsMTEgMTIsNSAiLz48L2RlZnM+PGNsaXBQYXRoIGlkPSJTVkdJRF80XyI+PHVzZSB4bGluazpocmVmPSIjU1ZHSURfM18iICBzdHlsZT0ib3ZlcmZsb3c6dmlzaWJsZTsiLz48L2NsaXBQYXRoPjxnIGNsYXNzPSJzdDIiPjxyZWN0IHg9IjciIGNsYXNzPSJzdDMiIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNiIvPjwvZz48L2c+PC9nPjxnPjxnPjxkZWZzPjxwYXRoIGlkPSJTVkdJRF81XyIgZD0iTTE1LjUsMTdjMC0xLjQtMC40LTIuMS0xLTIuMWMtMC45LDAtMSwxLjUtMSwyLjFjMCwxLjQsMC40LDIuMSwxLDIuMUMxNS40LDE5LjEsMTUuNSwxNy42LDE1LjUsMTd6IE0xNS44LDEzLjljMC40LDAuMywwLjcsMC43LDAuOSwxLjJjMC4yLDAuNiwwLjMsMS4yLDAuMywxLjljMCwwLjYtMC4xLDEuMy0wLjMsMS45Yy0wLjIsMC41LTAuNSwwLjktMC45LDEuMmMtMC44LDAuNi0xLjksMC42LTIuNywwYy0wLjQtMC4zLTAuNy0wLjctMC45LTEuMkMxMi4xLDE4LjMsMTIsMTcuNiwxMiwxN3MwLjEtMS4zLDAuMy0xLjljMC4yLTAuNSwwLjUtMC45LDAuOS0xLjJDMTQsMTMuNCwxNSwxMy40LDE1LjgsMTMuOUwxNS44LDEzLjl6IE05LjUsMTMuN0gxMHY2LjZIOC41di01LjFoLTF2LTEuNUM3LjUsMTMuNyw5LjUsMTMuNyw5LjUsMTMuN3oiLz48L2RlZnM+PGNsaXBQYXRoIGlkPSJTVkdJRF82XyI+PHVzZSB4bGluazpocmVmPSIjU1ZHSURfNV8iICBzdHlsZT0ib3ZlcmZsb3c6dmlzaWJsZTsiLz48L2NsaXBQYXRoPjxnIGNsYXNzPSJzdDQiPjxyZWN0IHg9IjIuNSIgeT0iOC41IiBjbGFzcz0ic3QzIiB3aWR0aD0iMTkuNSIgaGVpZ2h0PSIxNyIvPjwvZz48L2c+PC9nPjwvc3ZnPg==');
  --cc-icon: url('data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIzLjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAyOCAyOCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjggMjg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZGlzcGxheTpub25lO30KCS5zdDF7ZGlzcGxheTppbmxpbmU7fQoJLnN0MntmaWxsOiNGRkZGRkY7fQo8L3N0eWxlPgo8ZyBjbGFzcz0ic3QwIj4KCTxnIGNsYXNzPSJzdDEiPgoJCTxyZWN0IHdpZHRoPSIyOCIgaGVpZ2h0PSIyOCIvPgoJPC9nPgo8L2c+CjxnIGNsYXNzPSJzdDAiPgoJPGcgY2xhc3M9InN0MSI+CgkJPGc+CgkJCTxnPgoJCQkJPGc+CgkJCQkJPHJlY3QgeD0iOC43IiB5PSIxNy45NSIgY2xhc3M9InN0MiIgd2lkdGg9IjEwLjE0IiBoZWlnaHQ9IjEuNzgiLz4KCQkJCTwvZz4KCQkJCTxnPgoJCQkJCTxyZWN0IHg9IjUuOTEiIHk9IjE3Ljk1IiBjbGFzcz0ic3QyIiB3aWR0aD0iMS43OCIgaGVpZ2h0PSIxLjc4Ii8+CgkJCQk8L2c+CgkJCQk8Zz4KCQkJCQk8cmVjdCB4PSIxOS44NCIgeT0iMTcuOTUiIGNsYXNzPSJzdDIiIHdpZHRoPSIxLjc4IiBoZWlnaHQ9IjEuNzgiLz4KCQkJCTwvZz4KCQkJPC9nPgoJCQk8Zz4KCQkJCTxnPgoJCQkJCTxyZWN0IHg9IjUuOTEiIHk9IjE1LjE3IiBjbGFzcz0ic3QyIiB3aWR0aD0iMy4xMiIgaGVpZ2h0PSIxLjc4Ii8+CgkJCQk8L2c+CgkJCQk8Zz4KCQkJCQk8cmVjdCB4PSIxOC41IiB5PSIxNS4xNyIgY2xhc3M9InN0MiIgd2lkdGg9IjMuMTIiIGhlaWdodD0iMS43OCIvPgoJCQkJPC9nPgoJCQkJPGc+CgkJCQkJPHJlY3QgeD0iMTAuMDMiIHk9IjE1LjE3IiBjbGFzcz0ic3QyIiB3aWR0aD0iMS43OCIgaGVpZ2h0PSIxLjc4Ii8+CgkJCQk8L2c+CgkJCQk8Zz4KCQkJCQk8cmVjdCB4PSIxMi44MiIgeT0iMTUuMTciIGNsYXNzPSJzdDIiIHdpZHRoPSIxLjc4IiBoZWlnaHQ9IjEuNzgiLz4KCQkJCTwvZz4KCQkJCTxnPgoJCQkJCTxyZWN0IHg9IjE1LjYxIiB5PSIxNS4xNyIgY2xhc3M9InN0MiIgd2lkdGg9IjEuNzgiIGhlaWdodD0iMS43OCIvPgoJCQkJPC9nPgoJCQk8L2c+CgkJCTxnPgoJCQkJPGc+CgkJCQkJPHJlY3QgeD0iNS45MSIgeT0iMTIuMzgiIGNsYXNzPSJzdDIiIHdpZHRoPSIxLjc4IiBoZWlnaHQ9IjEuNzgiLz4KCQkJCTwvZz4KCQkJCTxnPgoJCQkJCTxyZWN0IHg9IjE3LjA1IiB5PSIxMi4zOCIgY2xhc3M9InN0MiIgd2lkdGg9IjEuNzgiIGhlaWdodD0iMS43OCIvPgoJCQkJPC9nPgoJCQkJPGc+CgkJCQkJPHJlY3QgeD0iMTQuMjciIHk9IjEyLjM4IiBjbGFzcz0ic3QyIiB3aWR0aD0iMS43OCIgaGVpZ2h0PSIxLjc4Ii8+CgkJCQk8L2c+CgkJCQk8Zz4KCQkJCQk8cmVjdCB4PSIxMS40OCIgeT0iMTIuMzgiIGNsYXNzPSJzdDIiIHdpZHRoPSIxLjc4IiBoZWlnaHQ9IjEuNzgiLz4KCQkJCTwvZz4KCQkJCTxnPgoJCQkJCTxyZWN0IHg9IjguNyIgeT0iMTIuMzgiIGNsYXNzPSJzdDIiIHdpZHRoPSIxLjc4IiBoZWlnaHQ9IjEuNzgiLz4KCQkJCTwvZz4KCQkJCTxnPgoJCQkJCTxyZWN0IHg9IjE5Ljg0IiB5PSIxMi4zOCIgY2xhc3M9InN0MiIgd2lkdGg9IjEuNzgiIGhlaWdodD0iMS43OCIvPgoJCQkJPC9nPgoJCQk8L2c+CgkJPC9nPgoJCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0yMi41OCwxMC4zOGgtOC4yOWMwLjA2LTAuNTEsMC4yNC0xLjIsMC42NS0xLjU1YzAuNDMtMC4zNywxLjA2LTAuNDMsMS43MS0wLjUKCQkJYzAuNjctMC4wNywxLjM2LTAuMTQsMS45MS0wLjU1YzEuMDktMC44MSwxLjA5LTIuMjUsMS4wOS0yLjg3VjQuOWMwLTAuMjItMC4xNy0wLjM5LTAuMzktMC4zOXMtMC4zOSwwLjE3LTAuMzksMC4zOXYwLjAyCgkJCWMwLDAuNTQsMCwxLjY3LTAuNzcsMi4yNGMtMC4zNywwLjI4LTAuOTMsMC4zNC0xLjUyLDAuNGMtMC43MSwwLjA3LTEuNTIsMC4xNi0yLjE0LDAuNjhjLTAuNjgsMC41OC0wLjg4LDEuNTgtMC45MywyLjE0SDUuMgoJCQljLTAuODksMC0xLjYyLDAuNzItMS42MiwxLjYydjguMTNjMCwwLjg5LDAuNzIsMS42MiwxLjYyLDEuNjJoMTcuMzhjMC44OSwwLDEuNjItMC43MiwxLjYyLTEuNjJWMTIKCQkJQzI0LjIsMTEuMTEsMjMuNDcsMTAuMzgsMjIuNTgsMTAuMzh6IE0yMy40MiwyMC4xM2MwLDAuNDYtMC4zNywwLjg0LTAuODQsMC44NEg1LjJjLTAuNDYsMC0wLjg0LTAuMzctMC44NC0wLjg0VjEyCgkJCWMwLTAuNDYsMC4zNy0wLjg0LDAuODQtMC44NGgxNy4zOGMwLjQ2LDAsMC44NCwwLjM3LDAuODQsMC44NEMyMy40MiwxMiwyMy40MiwyMC4xMywyMy40MiwyMC4xM3oiLz4KCTwvZz4KPC9nPgo8cGF0aCBjbGFzcz0ic3QyIiBkPSJNNiw3djExaDkuOTZMMTksMjEuOThWMThoM1Y3SDZ6IE03LDEwaDR2Mkg3VjEweiBNMTYsMTZIN3YtMmg5VjE2eiBNMjEsMTZoLTMuMDF2LTJIMjFWMTZ6IE0yMSwxMmgtOHYtMmg4VjEyegoJIi8+Cjwvc3ZnPgo=');
  --volume-icon: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjQuNDUgMjIuOTEiPg0KICA8ZGVmcz4NCiAgICA8c3R5bGU+DQogICAgICAuY2xzLTEsIC5jbHMtMiwgLmNscy02LCAuY2xzLTcgew0KICAgICAgICBmaWxsOiBub25lOw0KICAgICAgfQ0KDQogICAgICAuY2xzLTEgew0KICAgICAgICBjbGlwLXJ1bGU6IGV2ZW5vZGQ7DQogICAgICB9DQoNCiAgICAgIC5jbHMtMiB7DQogICAgICAgIGZpbGwtcnVsZTogZXZlbm9kZDsNCiAgICAgIH0NCg0KICAgICAgLmNscy0zIHsNCiAgICAgICAgY2xpcC1wYXRoOiB1cmwoI2NsaXAtcGF0aCk7DQogICAgICB9DQoNCiAgICAgIC5jbHMtNCB7DQogICAgICAgIGNsaXAtcGF0aDogdXJsKCNjbGlwLXBhdGgtMik7DQogICAgICB9DQoNCiAgICAgIC5jbHMtNSB7DQogICAgICAgIGZpbGw6ICNmZmY7DQogICAgICB9DQoNCiAgICAgIC5jbHMtNiwgLmNscy03IHsNCiAgICAgICAgc3Ryb2tlOiAjZmZmOw0KICAgICAgICBzdHJva2UtbWl0ZXJsaW1pdDogMTA7DQogICAgICB9DQoNCiAgICAgIC5jbHMtNiB7DQogICAgICAgIHN0cm9rZS13aWR0aDogNC45MXB4Ow0KICAgICAgfQ0KDQogICAgICAuY2xzLTcgew0KICAgICAgICBzdHJva2Utd2lkdGg6IDJweDsNCiAgICAgIH0NCiAgICA8L3N0eWxlPg0KICAgIDxjbGlwUGF0aCBpZD0iY2xpcC1wYXRoIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjguNTUgLTI0LjU1KSI+DQogICAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0zMi4yMywzMiwzMSwzMy4yM2g0LjUxbC4zNi0uMzYsNS01TDQwLDI3djEuMjNoMVYyN0gzOS43N1Y0NUg0MVY0My43N0g0MFY0NWwuODctLjg3LTUtNS0uMzYtLjM2SDMxTDMyLjIzLDQwWm0tMi40NiwwdjkuMjNIMzVsLS44Ny0uMzYsNSw1LC4zNi4zNmgyLjc0VjI1Ljc3SDM5LjQ5bC0uMzYuMzYtNSw1LC44Ny0uMzZIMjkuNzdaTTkuNzcsNS43N0g2Mi4yM1Y2Ni4yM0g5Ljc3WiIvPg0KICAgIDwvY2xpcFBhdGg+DQogICAgPGNsaXBQYXRoIGlkPSJjbGlwLXBhdGgtMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI4LjU1IC0yNC41NSkiPg0KICAgICAgPHBvbHlnb24gY2xhc3M9ImNscy0xIiBwb2ludHM9IjMxIDMyIDMxIDQwIDM1IDQwIDQwIDQ1IDQxIDQ1IDQxIDI3IDQwIDI3IDM1IDMyIDMxIDMyIi8+DQogICAgPC9jbGlwUGF0aD4NCiAgPC9kZWZzPg0KICA8dGl0bGU+dm9sdW1lPC90aXRsZT4NCiAgPGcgY2xhc3M9ImNscy0zIj4NCiAgICA8ZyBjbGFzcz0iY2xzLTQiPg0KICAgICAgPHBvbHlnb24gY2xhc3M9ImNscy01IiBwb2ludHM9IjIuNDYgNy40NiAyLjQ2IDE1LjQ2IDYuNDYgMTUuNDYgMTEuNDYgMjAuNDUgMTIuNDYgMjAuNDUgMTIuNDYgMi40NiAxMS40NiAyLjQ2IDYuNDYgNy40NiAyLjQ2IDcuNDYiLz4NCiAgICA8L2c+DQogIDwvZz4NCiAgPGcgY2xhc3M9ImNscy00Ij4NCiAgICA8cG9seWdvbiBjbGFzcz0iY2xzLTYiIHBvaW50cz0iMi40NiA3LjQ2IDIuNDYgMTUuNDYgNi40NiAxNS40NiAxMS40NiAyMC40NSAxMi40NiAyMC40NSAxMi40NiAyLjQ2IDExLjQ2IDIuNDYgNi40NiA3LjQ2IDIuNDYgNy40NiIvPg0KICA8L2c+DQogIDxwYXRoIGNsYXNzPSJjbHMtNyIgZD0iTTQ1LDQxYTcsNywwLDAsMCwwLTkuOSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI4LjU1IC0yNC41NSkiLz4NCiAgPHBhdGggY2xhc3M9ImNscy03IiBkPSJNNDguNDksMjcuNTFhMTIsMTIsMCwwLDEsMCwxNyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI4LjU1IC0yNC41NSkiLz4NCjwvc3ZnPg==');
  --muted-icon: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjMuMzcgMjIuOTEiPg0KICA8ZGVmcz4NCiAgICA8c3R5bGU+DQogICAgICAuY2xzLTEsIC5jbHMtMiwgLmNscy02LCAuY2xzLTcgew0KICAgICAgICBmaWxsOiBub25lOw0KICAgICAgfQ0KDQogICAgICAuY2xzLTEgew0KICAgICAgICBjbGlwLXJ1bGU6IGV2ZW5vZGQ7DQogICAgICB9DQoNCiAgICAgIC5jbHMtMiB7DQogICAgICAgIGZpbGwtcnVsZTogZXZlbm9kZDsNCiAgICAgIH0NCg0KICAgICAgLmNscy0zIHsNCiAgICAgICAgY2xpcC1wYXRoOiB1cmwoI2NsaXAtcGF0aCk7DQogICAgICB9DQoNCiAgICAgIC5jbHMtNCB7DQogICAgICAgIGNsaXAtcGF0aDogdXJsKCNjbGlwLXBhdGgtMik7DQogICAgICB9DQoNCiAgICAgIC5jbHMtNSB7DQogICAgICAgIGZpbGw6ICNmZmY7DQogICAgICB9DQoNCiAgICAgIC5jbHMtNiwgLmNscy03IHsNCiAgICAgICAgc3Ryb2tlOiAjZmZmOw0KICAgICAgICBzdHJva2UtbWl0ZXJsaW1pdDogMTA7DQogICAgICB9DQoNCiAgICAgIC5jbHMtNiB7DQogICAgICAgIHN0cm9rZS13aWR0aDogNC45MXB4Ow0KICAgICAgfQ0KDQogICAgICAuY2xzLTcgew0KICAgICAgICBzdHJva2UtbGluZWNhcDogc3F1YXJlOw0KICAgICAgICBzdHJva2Utd2lkdGg6IDJweDsNCiAgICAgIH0NCiAgICA8L3N0eWxlPg0KICAgIDxjbGlwUGF0aCBpZD0iY2xpcC1wYXRoIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjUuMDUgLTI0LjU1KSI+DQogICAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0yOC43MywzMiwyNy41LDMzLjIzSDMybC4zNi0uMzYsNS01TDM2LjUsMjd2MS4yM2gxVjI3SDM2LjI3VjQ1SDM3LjVWNDMuNzdoLTFWNDVsLjg3LS44Ny01LTVMMzIsMzguNzdIMjcuNUwyOC43Myw0MFptLTIuNDYsMHY5LjIzSDMxLjVsLS44Ny0uMzYsNSw1LC4zNi4zNmgyLjc0VjI1Ljc3SDM2bC0uMzYuMzYtNSw1LC44Ny0uMzZIMjYuMjdaTTYuMjcsNS43N0g1OC43M1Y2Ni4yM0g2LjI3WiIvPg0KICAgIDwvY2xpcFBhdGg+DQogICAgPGNsaXBQYXRoIGlkPSJjbGlwLXBhdGgtMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI1LjA1IC0yNC41NSkiPg0KICAgICAgPHBvbHlnb24gY2xhc3M9ImNscy0xIiBwb2ludHM9IjI3LjUgMzIgMjcuNSA0MCAzMS41IDQwIDM2LjUgNDUgMzcuNSA0NSAzNy41IDI3IDM2LjUgMjcgMzEuNSAzMiAyNy41IDMyIi8+DQogICAgPC9jbGlwUGF0aD4NCiAgPC9kZWZzPg0KICA8dGl0bGU+bXV0ZWQ8L3RpdGxlPg0KICA8ZyBjbGFzcz0iY2xzLTMiPg0KICAgIDxnIGNsYXNzPSJjbHMtNCI+DQogICAgICA8cG9seWdvbiBjbGFzcz0iY2xzLTUiIHBvaW50cz0iMi40NiA3LjQ2IDIuNDYgMTUuNDYgNi40NiAxNS40NiAxMS40NiAyMC40NSAxMi40NiAyMC40NSAxMi40NiAyLjQ2IDExLjQ2IDIuNDYgNi40NiA3LjQ2IDIuNDYgNy40NiIvPg0KICAgIDwvZz4NCiAgPC9nPg0KICA8ZyBjbGFzcz0iY2xzLTQiPg0KICAgIDxwb2x5Z29uIGNsYXNzPSJjbHMtNiIgcG9pbnRzPSIyLjQ2IDcuNDYgMi40NiAxNS40NiA2LjQ2IDE1LjQ2IDExLjQ2IDIwLjQ1IDEyLjQ2IDIwLjQ1IDEyLjQ2IDIuNDYgMTEuNDYgMi40NiA2LjQ2IDcuNDYgMi40NiA3LjQ2Ii8+DQogIDwvZz4NCiAgPGxpbmUgY2xhc3M9ImNscy03IiB4MT0iMTYuOTUiIHkxPSI4Ljk1IiB4Mj0iMjEuOTUiIHkyPSIxMy45NSIvPg0KICA8bGluZSBjbGFzcz0iY2xzLTciIHgxPSIyMS45NSIgeTE9IjguOTUiIHgyPSIxNi45NSIgeTI9IjEzLjk1Ii8+DQo8L3N2Zz4=');
  --fullscreen-icon: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjIgMjIiPg0KICA8ZGVmcz4NCiAgICA8c3R5bGU+DQogICAgICAuY2xzLTEsIC5jbHMtMyB7DQogICAgICAgIGZpbGw6IG5vbmU7DQogICAgICB9DQoNCiAgICAgIC5jbHMtMSB7DQogICAgICAgIGNsaXAtcnVsZTogZXZlbm9kZDsNCiAgICAgIH0NCg0KICAgICAgLmNscy0yIHsNCiAgICAgICAgY2xpcC1wYXRoOiB1cmwoI2NsaXAtcGF0aCk7DQogICAgICB9DQoNCiAgICAgIC5jbHMtMyB7DQogICAgICAgIHN0cm9rZTogI2ZmZjsNCiAgICAgICAgc3Ryb2tlLW1pdGVybGltaXQ6IDEwOw0KICAgICAgICBzdHJva2Utd2lkdGg6IDRweDsNCiAgICAgIH0NCiAgICA8L3N0eWxlPg0KICAgIDxjbGlwUGF0aCBpZD0iY2xpcC1wYXRoIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjUgLTI1KSI+DQogICAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0zMyw0NUgyN1YzOWgydjRoNFpNMjcsMzNWMjdoNnYySDI5djRabTE4LDZ2NkgzOVY0M2g0VjM5Wk0zOSwyN2g2djZINDNWMjlIMzlaIi8+DQogICAgPC9jbGlwUGF0aD4NCiAgPC9kZWZzPg0KICA8dGl0bGU+ZnVsbHNjcmVlbjwvdGl0bGU+DQogIDxnIGNsYXNzPSJjbHMtMiI+DQogICAgPHBhdGggY2xhc3M9ImNscy0zIiBkPSJNMzMsNDVIMjdWMzloMnY0aDRaTTI3LDMzVjI3aDZ2MkgyOXY0Wm0xOCw2djZIMzlWNDNoNFYzOVpNMzksMjdoNnY2SDQzVjI5SDM5WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI1IC0yNSkiLz4NCiAgPC9nPg0KPC9zdmc+');
  --keyboardControls-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3e%3cstyle%3e.st0%7bdisplay:none%7d.st1%7bdisplay:inline%7d.st2%7bfill:white%7d%3c/style%3e%3cg class='st0'%3e%3cpath d='M0 0h28v28H0z'/%3e%3c/g%3e%3cg class='st0'%3e%3cg class='st1'%3e%3cpath class='st2' d='M8.7 17.95h10.14v1.78H8.7zM5.91 17.95h1.78v1.78H5.91zM19.84 17.95h1.78v1.78h-1.78z'/%3e%3cg%3e%3cpath class='st2' d='M5.91 15.17h3.12v1.78H5.91zM18.5 15.17h3.12v1.78H18.5zM10.03 15.17h1.78v1.78h-1.78zM12.82 15.17h1.78v1.78h-1.78zM15.61 15.17h1.78v1.78h-1.78z'/%3e%3c/g%3e%3cg%3e%3cpath class='st2' d='M5.91 12.38h1.78v1.78H5.91zM17.05 12.38h1.78v1.78h-1.78zM14.27 12.38h1.78v1.78h-1.78zM11.48 12.38h1.78v1.78h-1.78zM8.7 12.38h1.78v1.78H8.7zM19.84 12.38h1.78v1.78h-1.78z'/%3e%3c/g%3e%3cpath class='st2' d='M22.58 10.38h-8.29c.06-.51.24-1.2.65-1.55.43-.37 1.06-.43 1.71-.5.67-.07 1.36-.14 1.91-.55 1.09-.81 1.09-2.25 1.09-2.87V4.9c0-.22-.17-.39-.39-.39s-.39.17-.39.39v.02c0 .54 0 1.67-.77 2.24-.37.28-.93.34-1.52.4-.71.07-1.52.16-2.14.68-.68.58-.88 1.58-.93 2.14H5.2c-.89 0-1.62.72-1.62 1.62v8.13c0 .89.72 1.62 1.62 1.62h17.38c.89 0 1.62-.72 1.62-1.62V12c0-.89-.73-1.62-1.62-1.62zm.84 9.75c0 .46-.37.84-.84.84H5.2c-.46 0-.84-.37-.84-.84V12c0-.46.37-.84.84-.84h17.38c.46 0 .84.37.84.84v8.13z'/%3e%3c/g%3e%3c/g%3e%3cpath class='st2' d='M7 10h1v1H7zM9 10h1v1H9zM11 10h1v1h-1zM13 10h1v1h-1zM7 13h3v1H7zM7 16h3v1H7zM11 13h1v1h-1zM13 13h1v1h-1zM15 13h1v1h-1zM17 13h3v1h-3zM17 16h3v1h-3zM15 10h1v1h-1zM17 10h1v1h-1zM19 10h1v1h-1zM11 16h5v1h-5z'/%3e%3cpath d='M22.5 18c0 .83-.6 1.5-1.35 1.5H5.85c-.74 0-1.35-.67-1.35-1.5V9c0-.82.61-1.5 1.35-1.5h15.3c.75 0 1.35.68 1.35 1.5v9z' fill='none' stroke='white' stroke-miterlimit='10'/%3e%3c/svg%3e");
  --checkmark-icon: url("data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIzLjAuMiwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAyOCAyOCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjggMjg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojQTdBOUIzO30KPC9zdHlsZT4KPGc+Cgk8cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjEzLDE4Ljc3IDguMTIsMTMuODggOS44OCwxMi4xMiAxMywxNS4yMyAxOS44NSw4LjM5IDIxLjYxLDEwLjE1IAkiLz4KPC9nPgo8L3N2Zz4=");
}

.tpPlayerView .tpAdCountdown,
.tpPlayerView .tpAdvertisementTap {
  font-family: Calibri, "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 14px;
  color: #CCC;
  background: rgba(42, 49, 92, 0.7);
  background: var(--row-color);
  text-indent: 5px;
  text-shadow: 1px 1px 1px #383838;
  height: 22px;
  line-height: 22px;
  margin: 12px;
  border-radius: 3px;
}

.tpPlayerView .tpAdvertisementTap {
  margin: 0 12px 4px;
  padding: 3px 6px;
}

.tpBufferingIndicator {
  background: transparent;
  width: 50px;
  height: 50px;
  border-top: 8px solid white;
  border-bottom: 8px solid gray;
  border-left: 8px solid white;
  border-right: 8px solid white;
  border-radius: 50%;
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px;
  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px;
  animation: 1s spin linear infinite;
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(0deg);
    /* IE 9 */
    transform: rotate(0deg);
    /* Firefox 16+, IE 10+, Opera */
  }

  100% {
    -webkit-transform: rotate(360deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(360deg);
    /* IE 9 */
    transform: rotate(360deg);
    /* Firefox 16+, IE 10+, Opera */
  }
}

@keyframes scaleUp {
  0% {
    -webkit-transform: perspective(100px) translateZ(0px);
    -ms-transform: perspective(100px) translateZ(0px);
    transform: perspective(100px) translateZ(0px);
  }

  100% {
    -webkit-transform: perspective(100px) translateZ(25px);
    -ms-transform: perspective(100px) translateZ(25px);
    transform: perspective(100px) translateZ(25px);
  }
}

@keyframes scaleDown {
  0% {
    -webkit-transform: perspective(100px) translateZ(25px);
    -ms-transform: perspective(100px) translateZ(25px);
    transform: perspective(100px) translateZ(25px);
  }

  100% {
    -webkit-transform: perspective(100px) translateZ(0px);
    -ms-transform: perspective(100px) translateZ(0px);
    transform: perspective(100px) translateZ(0px);
  }
}

.tpStandby .tpPlayOverlay {
  transform: perspective(100px) translateZ(0px);
  animation: scaleDown 0.3s cubic-bezier(0, 0, 0, 1);
  background-image: url('data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDMyIDMyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNDkuMiAoNTExNjApIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPg0KICAgIDx0aXRsZT5QbGF5ZXIvQnV0dG9uL0ljb24vUGxheTwvdGl0bGU+DQogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+DQogICAgPGRlZnM+DQogICAgICAgIDxwb2x5Z29uIGlkPSJwYXRoLTEiIHBvaW50cz0iOSA3IDkgMjUgMjQuNzUgMTYiPjwvcG9seWdvbj4NCiAgICA8L2RlZnM+DQogICAgPGcgaWQ9IlBsYXllci9CdXR0b24vSWNvbi9QbGF5IiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4NCiAgICAgICAgPGcgaWQ9IkNvbWJpbmVkLVNoYXBlIj4NCiAgICAgICAgICAgIDx1c2UgZmlsbD0iI0ZGRkZGRiIgZmlsbC1ydWxlPSJldmVub2RkIiB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4NCiAgICAgICAgICAgIDxwYXRoIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSIyLjE5ODcxNzk1IiBkPSJNMTAuMDk5MzU5LDguODk0MzkzMDQgTDEwLjA5OTM1OSwyMy4xMDU2MDcgTDIyLjUzNDE3MTEsMTYgTDEwLjA5OTM1OSw4Ljg5NDM5MzA0IFoiPjwvcGF0aD4NCiAgICAgICAgPC9nPg0KICAgIDwvZz4NCjwvc3ZnPg==');
  background-image: var(--play-icon);
  background-color: rgba(61, 66, 111, 0.7);
  background-color: var(--play-overlay-color);
  background-size: 44px 52px;
  width: 66px;
  height: 66px;
  border-radius: 3px;
}

.tpStandby .tpPlayOverlay:hover {
  transform: perspective(100px) translateZ(25px);
  animation: scaleUp 0.3s cubic-bezier(0, 0, 0, 1);
}

.tpControls button,
.tpScrubber,
.tpVolumeTrack,
.tpVolumeThumb,
.tpVolumeKnob,
.tpVolumeLevel {
  cursor: pointer;
}

.tpPlayerView .tpControls .tpScrubber {
  pointer-events: auto;
}

.tpScrubber .tpScrubberTrack {
  background: rgba(255, 255, 255, 0.25);
  background: var(--scrub-track-color);
  height: 3px;
  border-radius: 1.5px;
}

.tpScrubber .tpScrubberChapters .tpScrubberChapterMarker {
  background: white;
  width: 3px;
  height: 9px;
  border: 2px solid rgba(0, 0, 0, 0.9);
}

.tpScrubber .tpScrubberProgress {
  text-align: right;
  border-radius: 1.5px;
  background: rgba(255, 255, 255, 1.0);
  background-color: var(--play-progress-color);
}

.tpScrubber .tpScrubberThumb {
  visibility: visible;
  /* to do, shouldn't have to do this */
  width: auto;
  height: 20px;
  line-height: 20px;
  top: -24px;
  margin-right: 100px;
}

.tpScrubber .tpTimeInfo {
  position: absolute;
  bottom: 11px;
  right: 0;
  height: 20px;
  line-height: 20px;
}

.tpScrubber .tpScrubberPlayhead {
  width: 14px;
  height: 14px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 1.0);
  background: var(--play-progress-color);
  opacity: 0;
  transition: opacity 100ms linear;
}

.tpScrubber:hover .tpScrubberPlayhead,
.tpScrubber:active .tpScrubberPlayhead {
  opacity: 1;
}

.tpMute {
  pointer-events: auto;
}

.tpControls button:hover>div,
.tpControls button>div:hover {
  pointer-events: auto;
  opacity: 1;
}

.tpControls button>div {
  position: absolute;
  pointer-events: none;
  bottom: 0px;
  margin-bottom: 100%;
  opacity: 0;
}

.tpPopup > div.tpAudioTextTrackMenu {
  transition-delay: 0.3s; /* keep the menu open for a bit for a wide menu */
}

.tpPopup.tpFocus > div.tpAudioTextTrackMenu {
  transition-delay: 0s;
}

.tpVerticalVolumeSlider {
  transition: 0.10s linear;
  width: 20px;
  height: 80px;
  padding-bottom: 10px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.tpVolumeTrack {
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.25);
  background: var(--scrub-track-color);
  border-radius: 1.5px;
}

.tpRight.tpPopout>div.tpVolumeSlider {
  left: 100%;
}

.tpVolumeSlider .tpVolumeTrack {
  margin-bottom: auto;
  margin: auto 12px;
  height: 3px;
}

.tpVerticalVolumeSlider .tpVolumeTrack {
  margin: 12px auto;
  width: 3px;
}

.tpVolumeLevel {
  margin: 0px;
  background: rgba(255, 255, 255, 1.0);
  background: var(--play-progress-color);
  text-align: right;
  border-radius: 1.5px;
}

.tpVolumeSlider .tpVolumeThumb,
.tpVerticalVolumeSlider .tpVolumeThumb {
  width: 10px;
  height: 10px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 1.0);
  background: var(--play-progress-color);
  visibility: visible;
  opacity: 0;
  transition: opacity 100ms linear;
}

.tpVerticalVolumeSlider:hover .tpVolumeThumb,
.tpVerticalVolumeSlider:active .tpVolumeThumb,
.tpVolumeSlider:hover .tpVolumeThumb,
.tpVolumeSlider:active .tpVolumeThumb {
  opacity: 1;
}

.tpVerticalVolumeSlider::before {
  display: none !important;
}

.tpMenu div {
  background: rgba(0, 0, 0, 0.6);
  text-align: left;
}

.tpControls {
  line-height: 38px;
  line-height: var(--control-size);
  color: rgba(255, 255, 255, 0.6);
  color: var(--control-color);
  font-family: "Open Sans", sans-serif;
}

.tpControls a {
  color: rgba(255, 255, 255, 0.6);
  color: var(--control-color);
}

.tpBottomFloatRegion::before {
  content: '';
  pointer-events: none;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 86px;
  height: var(--overlay-margin-bottom);
  padding-top: 40px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0.7) 99%, rgba(0, 0, 0, 0.7) 100%);
  transition: opacity 0.25s linear;
  opacity: 0;
}

/* IE pseudo element isn't styled according to its parent */
.tpMouseHover:not(.tpIdle) .tpBottomFloatRegion::before,
.tpHasTabFocus:not(.tpIdle) .tpBottomFloatRegion::before,
.tpPlayerView .tpBottomFloatRegion.tpDisableFadeOut::before {
  opacity: 1;
}

.tpControls .tpSelected {
  background: rgb(36, 40, 66);
  background: var(--expander-hover-color);
}

.tpControls .tpSelected,
.tpControls .tpSelected a,
.tpControls .tpSelected div {
  color: rgba(255, 255, 255, 0.6);
  color: var(--control-selected-color);
}

.tpControls .tpRow {
  font-size: 11px;
  line-height: 42px;
  height: 38px;
  background: rgba(42, 49, 92, 0.7);
  background: var(--row-color);
  width: auto;
}

.tpControls .tpBottomFloatRegion .tpRow {
  font-size: 11px;
  line-height: 42px;
  height: 38px;
  background: rgba(42, 49, 92, 0.7);
  background: var(--row-color);
  margin-left: 12px;
  margin-right: 12px;
  width: auto;
  margin-left: 12px;
  margin-right: 12px;
}

.tpControls .tpRow hr {
  flex-shrink: 1;
}

.tpControls .tpBottomFloatRegion .tpRow:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.tpControls .tpBottomFloatRegion .tpRow:last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  margin-bottom: 10px;
}

.tpControls .tpRow>*:first-child {
  margin-left: 14px;
}

.tpControls .tpRow>*:last-child {
  margin-right: 14px;
}

.tpControls .tpRow .tpPopup,
.tpControls .tpRow .tpPopout {
  margin: 5px 0 0 5px;
}

.tpControls .tpRow .tpPopup button,
.tpControls .tpRow .tpPopout button {
  margin: 0;
}

.tpControls .tpRow button {
  color: white;
  background-color: rgba(61, 66, 111, 1);
  background-color: var(--control-background-color);
  width: 28px;
  height: 28px;
  outline: none;
  border-radius: 2px;
  padding: 0;
  margin: 5px 0 0 5px;
  opacity: 0.7;
}

.tpControls .tpRow button:hover {
  opacity: 1;
}

.tpRow .tpScrubber {
  margin-left: 12px;
  margin-right: 7px;
}

.tpControls .tpRow button::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-repeat: no-repeat;
  background-position: 4px center;
  background-color: transparent;
  background-size: 20px 20px;
}

.tpControls button {
  background-color: rgba(61, 66, 111, 1);
  background-color: var(--control-background-color);
}

.tpControls button:hover {
  color: rgba(61, 66, 111, 1);
  color: var(--control-hover-color);
}

.tpControls button:active {
  color: rgba(61, 66, 111, 1);
  color: var(--control-hover-color);
}

.tpControls button.tpPlayPause::before {
  background-image: url('data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDMyIDMyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNDkuMiAoNTExNjApIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPg0KICAgIDx0aXRsZT5QbGF5ZXIvQnV0dG9uL0ljb24vUGxheTwvdGl0bGU+DQogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+DQogICAgPGRlZnM+DQogICAgICAgIDxwb2x5Z29uIGlkPSJwYXRoLTEiIHBvaW50cz0iOSA3IDkgMjUgMjQuNzUgMTYiPjwvcG9seWdvbj4NCiAgICA8L2RlZnM+DQogICAgPGcgaWQ9IlBsYXllci9CdXR0b24vSWNvbi9QbGF5IiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4NCiAgICAgICAgPGcgaWQ9IkNvbWJpbmVkLVNoYXBlIj4NCiAgICAgICAgICAgIDx1c2UgZmlsbD0iI0ZGRkZGRiIgZmlsbC1ydWxlPSJldmVub2RkIiB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4NCiAgICAgICAgICAgIDxwYXRoIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSIyLjE5ODcxNzk1IiBkPSJNMTAuMDk5MzU5LDguODk0MzkzMDQgTDEwLjA5OTM1OSwyMy4xMDU2MDcgTDIyLjUzNDE3MTEsMTYgTDEwLjA5OTM1OSw4Ljg5NDM5MzA0IFoiPjwvcGF0aD4NCiAgICAgICAgPC9nPg0KICAgIDwvZz4NCjwvc3ZnPg==');
  background-image: var(--play-icon);
}

.tpPlaying .tpControls button.tpPlayPause::before,
.tpSeeking:not(.tpPaused) .tpControls button.tpPlayPause::before {
  background-image: url('data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDMyIDMyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNDkuMiAoNTExNjApIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPg0KICAgIDx0aXRsZT5QbGF5ZXIvQnV0dG9uL0ljb24vUGF1c2U8L3RpdGxlPg0KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPg0KICAgIDxkZWZzPjwvZGVmcz4NCiAgICA8ZyBpZD0iUGxheWVyL0J1dHRvbi9JY29uL1BhdXNlIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4NCiAgICAgICAgPHBhdGggZD0iTTksNyBMMTMsNyBMMTMsMjUgTDksMjUgTDksNyBaIE0xOSw3IEwyMyw3IEwyMywyNSBMMTksMjUgTDE5LDcgWiIgaWQ9IkNvbWJpbmVkLVNoYXBlIiBmaWxsPSIjRkZGRkZGIj48L3BhdGg+DQogICAgPC9nPg0KPC9zdmc+');
  background-image: var(--pause-icon);
}

.tpControls button.tpJumpBack::before {
  background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjQgMjkiPg0KICA8ZGVmcz4NCiAgICA8c3R5bGU+DQogICAgICAuY2xzLTEsIC5jbHMtMyB7DQogICAgICAgIGZpbGw6IG5vbmU7DQogICAgICB9DQoNCiAgICAgIC5jbHMtMSB7DQogICAgICAgIGNsaXAtcnVsZTogZXZlbm9kZDsNCiAgICAgIH0NCg0KICAgICAgLmNscy0yIHsNCiAgICAgICAgY2xpcC1wYXRoOiB1cmwoI2NsaXAtcGF0aCk7DQogICAgICB9DQoNCiAgICAgIC5jbHMtMyB7DQogICAgICAgIHN0cm9rZTogI2ZmZjsNCiAgICAgICAgc3Ryb2tlLW1pdGVybGltaXQ6IDEwOw0KICAgICAgICBzdHJva2Utd2lkdGg6IDRweDsNCiAgICAgIH0NCg0KICAgICAgLmNscy00IHsNCiAgICAgICAgY2xpcC1wYXRoOiB1cmwoI2NsaXAtcGF0aC0yKTsNCiAgICAgIH0NCg0KICAgICAgLmNscy01IHsNCiAgICAgICAgZmlsbDogI2ZmZjsNCiAgICAgIH0NCg0KICAgICAgLmNscy02IHsNCiAgICAgICAgY2xpcC1wYXRoOiB1cmwoI2NsaXAtcGF0aC0zKTsNCiAgICAgIH0NCiAgICA8L3N0eWxlPg0KICAgIDxjbGlwUGF0aCBpZD0iY2xpcC1wYXRoIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjQgLTIxKSI+DQogICAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0zNiwyOEExMCwxMCwwLDEsMSwyNiwzOCIvPg0KICAgIDwvY2xpcFBhdGg+DQogICAgPGNsaXBQYXRoIGlkPSJjbGlwLXBhdGgtMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI0IC0yMSkiPg0KICAgICAgPHBvbHlnb24gY2xhc3M9ImNscy0xIiBwb2ludHM9IjM2IDI2IDM2IDMyIDMxIDI5IDM2IDI2Ii8+DQogICAgPC9jbGlwUGF0aD4NCiAgICA8Y2xpcFBhdGggaWQ9ImNsaXAtcGF0aC0zIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjQgLTIxKSI+DQogICAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0zOS41LDM4YzAtMS4zOS0uMzgtMi4wOC0xLTIuMDgtLjkzLDAtMSwxLjQ5LTEsMi4wOCwwLDEuMzkuMzgsMi4wOSwxLDIuMDlDMzkuNDMsNDAuMDgsMzkuNSwzOC41OCwzOS41LDM4Wm0uMzQtMy4wOGEyLjY2LDIuNjYsMCwwLDEsLjg2LDEuMkE1LjM1LDUuMzUsMCwwLDEsNDEsMzhhNS4zLDUuMywwLDAsMS0uMywxLjg4LDIuNjYsMi42NiwwLDAsMS0uODYsMS4yLDIuMzUsMi4zNSwwLDAsMS0yLjY4LDAsMi42NiwyLjY2LDAsMCwxLS44Ni0xLjJBNS4zLDUuMywwLDAsMSwzNiwzOGE1LjM1LDUuMzUsMCwwLDEsLjMtMS44OSwyLjY2LDIuNjYsMCwwLDEsLjg2LTEuMiwyLjM5LDIuMzksMCwwLDEsMi42OCwwWk0zMy41LDM0LjdIMzR2Ni42SDMyLjVWMzYuMmgtMVYzNC43WiIvPg0KICAgIDwvY2xpcFBhdGg+DQogIDwvZGVmcz4NCiAgPHRpdGxlPmp1bXBiYWNrPC90aXRsZT4NCiAgPGcgY2xhc3M9ImNscy0yIj4NCiAgICA8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik0zNiwyOEExMCwxMCwwLDEsMSwyNiwzOCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI0IC0yMSkiLz4NCiAgPC9nPg0KICA8ZyBjbGFzcz0iY2xzLTQiPg0KICAgIDxyZWN0IGNsYXNzPSJjbHMtNSIgeD0iMiIgd2lkdGg9IjE1IiBoZWlnaHQ9IjE2Ii8+DQogIDwvZz4NCiAgPGcgY2xhc3M9ImNscy02Ij4NCiAgICA8cmVjdCBjbGFzcz0iY2xzLTUiIHg9IjIuNSIgeT0iOC41IiB3aWR0aD0iMTkuNSIgaGVpZ2h0PSIxNyIvPg0KICA8L2c+DQo8L3N2Zz4=');
  background-image: var(--jumpback-icon);
  background-size: 18px 18px;
}

.tpControls button.tpJumpForward::before {
  background-image: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjQgMjkiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI0IDI5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzJfKTt9LnN0MXtmaWxsOm5vbmU7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLXdpZHRoOjQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fS5zdDJ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNF8pO30uc3Qze2ZpbGw6I0ZGRkZGRjt9LnN0NHtjbGlwLXBhdGg6dXJsKCNTVkdJRF82Xyk7fTwvc3R5bGU+PHRpdGxlPmp1bXBiYWNrPC90aXRsZT48Zz48Zz48ZGVmcz48cGF0aCBpZD0iU1ZHSURfMV8iIGQ9Ik0yMiwxN2MwLDUuNS00LjUsMTAtMTAsMTBTMiwyMi41LDIsMTdTNi41LDcsMTIsNyIvPjwvZGVmcz48Y2xpcFBhdGggaWQ9IlNWR0lEXzJfIj48dXNlIHhsaW5rOmhyZWY9IiNTVkdJRF8xXyIgIHN0eWxlPSJvdmVyZmxvdzp2aXNpYmxlOyIvPjwvY2xpcFBhdGg+PGcgY2xhc3M9InN0MCI+PHBhdGggY2xhc3M9InN0MSIgZD0iTTIyLDE3YzAsNS41LTQuNSwxMC0xMCwxMFMyLDIyLjUsMiwxN1M2LjUsNywxMiw3Ii8+PC9nPjwvZz48L2c+PGc+PGc+PGRlZnM+PHBvbHlnb24gaWQ9IlNWR0lEXzNfIiBwb2ludHM9IjE3LDggMTIsMTEgMTIsNSAiLz48L2RlZnM+PGNsaXBQYXRoIGlkPSJTVkdJRF80XyI+PHVzZSB4bGluazpocmVmPSIjU1ZHSURfM18iICBzdHlsZT0ib3ZlcmZsb3c6dmlzaWJsZTsiLz48L2NsaXBQYXRoPjxnIGNsYXNzPSJzdDIiPjxyZWN0IHg9IjciIGNsYXNzPSJzdDMiIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNiIvPjwvZz48L2c+PC9nPjxnPjxnPjxkZWZzPjxwYXRoIGlkPSJTVkdJRF81XyIgZD0iTTE1LjUsMTdjMC0xLjQtMC40LTIuMS0xLTIuMWMtMC45LDAtMSwxLjUtMSwyLjFjMCwxLjQsMC40LDIuMSwxLDIuMUMxNS40LDE5LjEsMTUuNSwxNy42LDE1LjUsMTd6IE0xNS44LDEzLjljMC40LDAuMywwLjcsMC43LDAuOSwxLjJjMC4yLDAuNiwwLjMsMS4yLDAuMywxLjljMCwwLjYtMC4xLDEuMy0wLjMsMS45Yy0wLjIsMC41LTAuNSwwLjktMC45LDEuMmMtMC44LDAuNi0xLjksMC42LTIuNywwYy0wLjQtMC4zLTAuNy0wLjctMC45LTEuMkMxMi4xLDE4LjMsMTIsMTcuNiwxMiwxN3MwLjEtMS4zLDAuMy0xLjljMC4yLTAuNSwwLjUtMC45LDAuOS0xLjJDMTQsMTMuNCwxNSwxMy40LDE1LjgsMTMuOUwxNS44LDEzLjl6IE05LjUsMTMuN0gxMHY2LjZIOC41di01LjFoLTF2LTEuNUM3LjUsMTMuNyw5LjUsMTMuNyw5LjUsMTMuN3oiLz48L2RlZnM+PGNsaXBQYXRoIGlkPSJTVkdJRF82XyI+PHVzZSB4bGluazpocmVmPSIjU1ZHSURfNV8iICBzdHlsZT0ib3ZlcmZsb3c6dmlzaWJsZTsiLz48L2NsaXBQYXRoPjxnIGNsYXNzPSJzdDQiPjxyZWN0IHg9IjIuNSIgeT0iOC41IiBjbGFzcz0ic3QzIiB3aWR0aD0iMTkuNSIgaGVpZ2h0PSIxNyIvPjwvZz48L2c+PC9nPjwvc3ZnPg==);
  background-image: var(--jumpforward-icon);
  background-size: 18px 18px;
}

.tpControls button.tpLanguageSettings::before {
  background-image: url('data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIzLjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAyOCAyOCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjggMjg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZGlzcGxheTpub25lO30KCS5zdDF7ZGlzcGxheTppbmxpbmU7fQoJLnN0MntmaWxsOiNGRkZGRkY7fQo8L3N0eWxlPgo8ZyBjbGFzcz0ic3QwIj4KCTxnIGNsYXNzPSJzdDEiPgoJCTxyZWN0IHdpZHRoPSIyOCIgaGVpZ2h0PSIyOCIvPgoJPC9nPgo8L2c+CjxnIGNsYXNzPSJzdDAiPgoJPGcgY2xhc3M9InN0MSI+CgkJPGc+CgkJCTxnPgoJCQkJPGc+CgkJCQkJPHJlY3QgeD0iOC43IiB5PSIxNy45NSIgY2xhc3M9InN0MiIgd2lkdGg9IjEwLjE0IiBoZWlnaHQ9IjEuNzgiLz4KCQkJCTwvZz4KCQkJCTxnPgoJCQkJCTxyZWN0IHg9IjUuOTEiIHk9IjE3Ljk1IiBjbGFzcz0ic3QyIiB3aWR0aD0iMS43OCIgaGVpZ2h0PSIxLjc4Ii8+CgkJCQk8L2c+CgkJCQk8Zz4KCQkJCQk8cmVjdCB4PSIxOS44NCIgeT0iMTcuOTUiIGNsYXNzPSJzdDIiIHdpZHRoPSIxLjc4IiBoZWlnaHQ9IjEuNzgiLz4KCQkJCTwvZz4KCQkJPC9nPgoJCQk8Zz4KCQkJCTxnPgoJCQkJCTxyZWN0IHg9IjUuOTEiIHk9IjE1LjE3IiBjbGFzcz0ic3QyIiB3aWR0aD0iMy4xMiIgaGVpZ2h0PSIxLjc4Ii8+CgkJCQk8L2c+CgkJCQk8Zz4KCQkJCQk8cmVjdCB4PSIxOC41IiB5PSIxNS4xNyIgY2xhc3M9InN0MiIgd2lkdGg9IjMuMTIiIGhlaWdodD0iMS43OCIvPgoJCQkJPC9nPgoJCQkJPGc+CgkJCQkJPHJlY3QgeD0iMTAuMDMiIHk9IjE1LjE3IiBjbGFzcz0ic3QyIiB3aWR0aD0iMS43OCIgaGVpZ2h0PSIxLjc4Ii8+CgkJCQk8L2c+CgkJCQk8Zz4KCQkJCQk8cmVjdCB4PSIxMi44MiIgeT0iMTUuMTciIGNsYXNzPSJzdDIiIHdpZHRoPSIxLjc4IiBoZWlnaHQ9IjEuNzgiLz4KCQkJCTwvZz4KCQkJCTxnPgoJCQkJCTxyZWN0IHg9IjE1LjYxIiB5PSIxNS4xNyIgY2xhc3M9InN0MiIgd2lkdGg9IjEuNzgiIGhlaWdodD0iMS43OCIvPgoJCQkJPC9nPgoJCQk8L2c+CgkJCTxnPgoJCQkJPGc+CgkJCQkJPHJlY3QgeD0iNS45MSIgeT0iMTIuMzgiIGNsYXNzPSJzdDIiIHdpZHRoPSIxLjc4IiBoZWlnaHQ9IjEuNzgiLz4KCQkJCTwvZz4KCQkJCTxnPgoJCQkJCTxyZWN0IHg9IjE3LjA1IiB5PSIxMi4zOCIgY2xhc3M9InN0MiIgd2lkdGg9IjEuNzgiIGhlaWdodD0iMS43OCIvPgoJCQkJPC9nPgoJCQkJPGc+CgkJCQkJPHJlY3QgeD0iMTQuMjciIHk9IjEyLjM4IiBjbGFzcz0ic3QyIiB3aWR0aD0iMS43OCIgaGVpZ2h0PSIxLjc4Ii8+CgkJCQk8L2c+CgkJCQk8Zz4KCQkJCQk8cmVjdCB4PSIxMS40OCIgeT0iMTIuMzgiIGNsYXNzPSJzdDIiIHdpZHRoPSIxLjc4IiBoZWlnaHQ9IjEuNzgiLz4KCQkJCTwvZz4KCQkJCTxnPgoJCQkJCTxyZWN0IHg9IjguNyIgeT0iMTIuMzgiIGNsYXNzPSJzdDIiIHdpZHRoPSIxLjc4IiBoZWlnaHQ9IjEuNzgiLz4KCQkJCTwvZz4KCQkJCTxnPgoJCQkJCTxyZWN0IHg9IjE5Ljg0IiB5PSIxMi4zOCIgY2xhc3M9InN0MiIgd2lkdGg9IjEuNzgiIGhlaWdodD0iMS43OCIvPgoJCQkJPC9nPgoJCQk8L2c+CgkJPC9nPgoJCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0yMi41OCwxMC4zOGgtOC4yOWMwLjA2LTAuNTEsMC4yNC0xLjIsMC42NS0xLjU1YzAuNDMtMC4zNywxLjA2LTAuNDMsMS43MS0wLjUKCQkJYzAuNjctMC4wNywxLjM2LTAuMTQsMS45MS0wLjU1YzEuMDktMC44MSwxLjA5LTIuMjUsMS4wOS0yLjg3VjQuOWMwLTAuMjItMC4xNy0wLjM5LTAuMzktMC4zOXMtMC4zOSwwLjE3LTAuMzksMC4zOXYwLjAyCgkJCWMwLDAuNTQsMCwxLjY3LTAuNzcsMi4yNGMtMC4zNywwLjI4LTAuOTMsMC4zNC0xLjUyLDAuNGMtMC43MSwwLjA3LTEuNTIsMC4xNi0yLjE0LDAuNjhjLTAuNjgsMC41OC0wLjg4LDEuNTgtMC45MywyLjE0SDUuMgoJCQljLTAuODksMC0xLjYyLDAuNzItMS42MiwxLjYydjguMTNjMCwwLjg5LDAuNzIsMS42MiwxLjYyLDEuNjJoMTcuMzhjMC44OSwwLDEuNjItMC43MiwxLjYyLTEuNjJWMTIKCQkJQzI0LjIsMTEuMTEsMjMuNDcsMTAuMzgsMjIuNTgsMTAuMzh6IE0yMy40MiwyMC4xM2MwLDAuNDYtMC4zNywwLjg0LTAuODQsMC44NEg1LjJjLTAuNDYsMC0wLjg0LTAuMzctMC44NC0wLjg0VjEyCgkJCWMwLTAuNDYsMC4zNy0wLjg0LDAuODQtMC44NGgxNy4zOGMwLjQ2LDAsMC44NCwwLjM3LDAuODQsMC44NEMyMy40MiwxMiwyMy40MiwyMC4xMywyMy40MiwyMC4xM3oiLz4KCTwvZz4KPC9nPgo8cGF0aCBjbGFzcz0ic3QyIiBkPSJNNiw3djExaDkuOTZMMTksMjEuOThWMThoM1Y3SDZ6IE03LDEwaDR2Mkg3VjEweiBNMTYsMTZIN3YtMmg5VjE2eiBNMjEsMTZoLTMuMDF2LTJIMjFWMTZ6IE0yMSwxMmgtOHYtMmg4VjEyegoJIi8+Cjwvc3ZnPgo=');
  background-image: var(--cc-icon);
  background-size: 100%;
  background-position: 0;
}

.tpControls button.tpMute::before {
  background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjQuNDUgMjIuOTEiPg0KICA8ZGVmcz4NCiAgICA8c3R5bGU+DQogICAgICAuY2xzLTEsIC5jbHMtMiwgLmNscy02LCAuY2xzLTcgew0KICAgICAgICBmaWxsOiBub25lOw0KICAgICAgfQ0KDQogICAgICAuY2xzLTEgew0KICAgICAgICBjbGlwLXJ1bGU6IGV2ZW5vZGQ7DQogICAgICB9DQoNCiAgICAgIC5jbHMtMiB7DQogICAgICAgIGZpbGwtcnVsZTogZXZlbm9kZDsNCiAgICAgIH0NCg0KICAgICAgLmNscy0zIHsNCiAgICAgICAgY2xpcC1wYXRoOiB1cmwoI2NsaXAtcGF0aCk7DQogICAgICB9DQoNCiAgICAgIC5jbHMtNCB7DQogICAgICAgIGNsaXAtcGF0aDogdXJsKCNjbGlwLXBhdGgtMik7DQogICAgICB9DQoNCiAgICAgIC5jbHMtNSB7DQogICAgICAgIGZpbGw6ICNmZmY7DQogICAgICB9DQoNCiAgICAgIC5jbHMtNiwgLmNscy03IHsNCiAgICAgICAgc3Ryb2tlOiAjZmZmOw0KICAgICAgICBzdHJva2UtbWl0ZXJsaW1pdDogMTA7DQogICAgICB9DQoNCiAgICAgIC5jbHMtNiB7DQogICAgICAgIHN0cm9rZS13aWR0aDogNC45MXB4Ow0KICAgICAgfQ0KDQogICAgICAuY2xzLTcgew0KICAgICAgICBzdHJva2Utd2lkdGg6IDJweDsNCiAgICAgIH0NCiAgICA8L3N0eWxlPg0KICAgIDxjbGlwUGF0aCBpZD0iY2xpcC1wYXRoIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjguNTUgLTI0LjU1KSI+DQogICAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0zMi4yMywzMiwzMSwzMy4yM2g0LjUxbC4zNi0uMzYsNS01TDQwLDI3djEuMjNoMVYyN0gzOS43N1Y0NUg0MVY0My43N0g0MFY0NWwuODctLjg3LTUtNS0uMzYtLjM2SDMxTDMyLjIzLDQwWm0tMi40NiwwdjkuMjNIMzVsLS44Ny0uMzYsNSw1LC4zNi4zNmgyLjc0VjI1Ljc3SDM5LjQ5bC0uMzYuMzYtNSw1LC44Ny0uMzZIMjkuNzdaTTkuNzcsNS43N0g2Mi4yM1Y2Ni4yM0g5Ljc3WiIvPg0KICAgIDwvY2xpcFBhdGg+DQogICAgPGNsaXBQYXRoIGlkPSJjbGlwLXBhdGgtMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI4LjU1IC0yNC41NSkiPg0KICAgICAgPHBvbHlnb24gY2xhc3M9ImNscy0xIiBwb2ludHM9IjMxIDMyIDMxIDQwIDM1IDQwIDQwIDQ1IDQxIDQ1IDQxIDI3IDQwIDI3IDM1IDMyIDMxIDMyIi8+DQogICAgPC9jbGlwUGF0aD4NCiAgPC9kZWZzPg0KICA8dGl0bGU+dm9sdW1lPC90aXRsZT4NCiAgPGcgY2xhc3M9ImNscy0zIj4NCiAgICA8ZyBjbGFzcz0iY2xzLTQiPg0KICAgICAgPHBvbHlnb24gY2xhc3M9ImNscy01IiBwb2ludHM9IjIuNDYgNy40NiAyLjQ2IDE1LjQ2IDYuNDYgMTUuNDYgMTEuNDYgMjAuNDUgMTIuNDYgMjAuNDUgMTIuNDYgMi40NiAxMS40NiAyLjQ2IDYuNDYgNy40NiAyLjQ2IDcuNDYiLz4NCiAgICA8L2c+DQogIDwvZz4NCiAgPGcgY2xhc3M9ImNscy00Ij4NCiAgICA8cG9seWdvbiBjbGFzcz0iY2xzLTYiIHBvaW50cz0iMi40NiA3LjQ2IDIuNDYgMTUuNDYgNi40NiAxNS40NiAxMS40NiAyMC40NSAxMi40NiAyMC40NSAxMi40NiAyLjQ2IDExLjQ2IDIuNDYgNi40NiA3LjQ2IDIuNDYgNy40NiIvPg0KICA8L2c+DQogIDxwYXRoIGNsYXNzPSJjbHMtNyIgZD0iTTQ1LDQxYTcsNywwLDAsMCwwLTkuOSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI4LjU1IC0yNC41NSkiLz4NCiAgPHBhdGggY2xhc3M9ImNscy03IiBkPSJNNDguNDksMjcuNTFhMTIsMTIsMCwwLDEsMCwxNyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI4LjU1IC0yNC41NSkiLz4NCjwvc3ZnPg==');
  background-image: var(--volume-icon);
  background-size: 18px 18px;
}

.tpMuted .tpControls button.tpMute::before {
  background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjMuMzcgMjIuOTEiPg0KICA8ZGVmcz4NCiAgICA8c3R5bGU+DQogICAgICAuY2xzLTEsIC5jbHMtMiwgLmNscy02LCAuY2xzLTcgew0KICAgICAgICBmaWxsOiBub25lOw0KICAgICAgfQ0KDQogICAgICAuY2xzLTEgew0KICAgICAgICBjbGlwLXJ1bGU6IGV2ZW5vZGQ7DQogICAgICB9DQoNCiAgICAgIC5jbHMtMiB7DQogICAgICAgIGZpbGwtcnVsZTogZXZlbm9kZDsNCiAgICAgIH0NCg0KICAgICAgLmNscy0zIHsNCiAgICAgICAgY2xpcC1wYXRoOiB1cmwoI2NsaXAtcGF0aCk7DQogICAgICB9DQoNCiAgICAgIC5jbHMtNCB7DQogICAgICAgIGNsaXAtcGF0aDogdXJsKCNjbGlwLXBhdGgtMik7DQogICAgICB9DQoNCiAgICAgIC5jbHMtNSB7DQogICAgICAgIGZpbGw6ICNmZmY7DQogICAgICB9DQoNCiAgICAgIC5jbHMtNiwgLmNscy03IHsNCiAgICAgICAgc3Ryb2tlOiAjZmZmOw0KICAgICAgICBzdHJva2UtbWl0ZXJsaW1pdDogMTA7DQogICAgICB9DQoNCiAgICAgIC5jbHMtNiB7DQogICAgICAgIHN0cm9rZS13aWR0aDogNC45MXB4Ow0KICAgICAgfQ0KDQogICAgICAuY2xzLTcgew0KICAgICAgICBzdHJva2UtbGluZWNhcDogc3F1YXJlOw0KICAgICAgICBzdHJva2Utd2lkdGg6IDJweDsNCiAgICAgIH0NCiAgICA8L3N0eWxlPg0KICAgIDxjbGlwUGF0aCBpZD0iY2xpcC1wYXRoIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjUuMDUgLTI0LjU1KSI+DQogICAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0yOC43MywzMiwyNy41LDMzLjIzSDMybC4zNi0uMzYsNS01TDM2LjUsMjd2MS4yM2gxVjI3SDM2LjI3VjQ1SDM3LjVWNDMuNzdoLTFWNDVsLjg3LS44Ny01LTVMMzIsMzguNzdIMjcuNUwyOC43Myw0MFptLTIuNDYsMHY5LjIzSDMxLjVsLS44Ny0uMzYsNSw1LC4zNi4zNmgyLjc0VjI1Ljc3SDM2bC0uMzYuMzYtNSw1LC44Ny0uMzZIMjYuMjdaTTYuMjcsNS43N0g1OC43M1Y2Ni4yM0g2LjI3WiIvPg0KICAgIDwvY2xpcFBhdGg+DQogICAgPGNsaXBQYXRoIGlkPSJjbGlwLXBhdGgtMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI1LjA1IC0yNC41NSkiPg0KICAgICAgPHBvbHlnb24gY2xhc3M9ImNscy0xIiBwb2ludHM9IjI3LjUgMzIgMjcuNSA0MCAzMS41IDQwIDM2LjUgNDUgMzcuNSA0NSAzNy41IDI3IDM2LjUgMjcgMzEuNSAzMiAyNy41IDMyIi8+DQogICAgPC9jbGlwUGF0aD4NCiAgPC9kZWZzPg0KICA8dGl0bGU+bXV0ZWQ8L3RpdGxlPg0KICA8ZyBjbGFzcz0iY2xzLTMiPg0KICAgIDxnIGNsYXNzPSJjbHMtNCI+DQogICAgICA8cG9seWdvbiBjbGFzcz0iY2xzLTUiIHBvaW50cz0iMi40NiA3LjQ2IDIuNDYgMTUuNDYgNi40NiAxNS40NiAxMS40NiAyMC40NSAxMi40NiAyMC40NSAxMi40NiAyLjQ2IDExLjQ2IDIuNDYgNi40NiA3LjQ2IDIuNDYgNy40NiIvPg0KICAgIDwvZz4NCiAgPC9nPg0KICA8ZyBjbGFzcz0iY2xzLTQiPg0KICAgIDxwb2x5Z29uIGNsYXNzPSJjbHMtNiIgcG9pbnRzPSIyLjQ2IDcuNDYgMi40NiAxNS40NiA2LjQ2IDE1LjQ2IDExLjQ2IDIwLjQ1IDEyLjQ2IDIwLjQ1IDEyLjQ2IDIuNDYgMTEuNDYgMi40NiA2LjQ2IDcuNDYgMi40NiA3LjQ2Ii8+DQogIDwvZz4NCiAgPGxpbmUgY2xhc3M9ImNscy03IiB4MT0iMTYuOTUiIHkxPSI4Ljk1IiB4Mj0iMjEuOTUiIHkyPSIxMy45NSIvPg0KICA8bGluZSBjbGFzcz0iY2xzLTciIHgxPSIyMS45NSIgeTE9IjguOTUiIHgyPSIxNi45NSIgeTI9IjEzLjk1Ii8+DQo8L3N2Zz4=');
  background-image: var(--muted-icon);
  background-size: 17px 20px;
}

.tpControls button.tpFullscreen::before {
  background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjIgMjIiPg0KICA8ZGVmcz4NCiAgICA8c3R5bGU+DQogICAgICAuY2xzLTEsIC5jbHMtMyB7DQogICAgICAgIGZpbGw6IG5vbmU7DQogICAgICB9DQoNCiAgICAgIC5jbHMtMSB7DQogICAgICAgIGNsaXAtcnVsZTogZXZlbm9kZDsNCiAgICAgIH0NCg0KICAgICAgLmNscy0yIHsNCiAgICAgICAgY2xpcC1wYXRoOiB1cmwoI2NsaXAtcGF0aCk7DQogICAgICB9DQoNCiAgICAgIC5jbHMtMyB7DQogICAgICAgIHN0cm9rZTogI2ZmZjsNCiAgICAgICAgc3Ryb2tlLW1pdGVybGltaXQ6IDEwOw0KICAgICAgICBzdHJva2Utd2lkdGg6IDRweDsNCiAgICAgIH0NCiAgICA8L3N0eWxlPg0KICAgIDxjbGlwUGF0aCBpZD0iY2xpcC1wYXRoIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjUgLTI1KSI+DQogICAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0zMyw0NUgyN1YzOWgydjRoNFpNMjcsMzNWMjdoNnYySDI5djRabTE4LDZ2NkgzOVY0M2g0VjM5Wk0zOSwyN2g2djZINDNWMjlIMzlaIi8+DQogICAgPC9jbGlwUGF0aD4NCiAgPC9kZWZzPg0KICA8dGl0bGU+ZnVsbHNjcmVlbjwvdGl0bGU+DQogIDxnIGNsYXNzPSJjbHMtMiI+DQogICAgPHBhdGggY2xhc3M9ImNscy0zIiBkPSJNMzMsNDVIMjdWMzloMnY0aDRaTTI3LDMzVjI3aDZ2MkgyOXY0Wm0xOCw2djZIMzlWNDNoNFYzOVpNMzksMjdoNnY2SDQzVjI5SDM5WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI1IC0yNSkiLz4NCiAgPC9nPg0KPC9zdmc+');
  background-image: var(--fullscreen-icon);
}

.tpControls button.tpKeyboardControls::before {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3e%3cstyle%3e.st0%7bdisplay:none%7d.st1%7bdisplay:inline%7d.st2%7bfill:white%7d%3c/style%3e%3cg class='st0'%3e%3cpath d='M0 0h28v28H0z'/%3e%3c/g%3e%3cg class='st0'%3e%3cg class='st1'%3e%3cpath class='st2' d='M8.7 17.95h10.14v1.78H8.7zM5.91 17.95h1.78v1.78H5.91zM19.84 17.95h1.78v1.78h-1.78z'/%3e%3cg%3e%3cpath class='st2' d='M5.91 15.17h3.12v1.78H5.91zM18.5 15.17h3.12v1.78H18.5zM10.03 15.17h1.78v1.78h-1.78zM12.82 15.17h1.78v1.78h-1.78zM15.61 15.17h1.78v1.78h-1.78z'/%3e%3c/g%3e%3cg%3e%3cpath class='st2' d='M5.91 12.38h1.78v1.78H5.91zM17.05 12.38h1.78v1.78h-1.78zM14.27 12.38h1.78v1.78h-1.78zM11.48 12.38h1.78v1.78h-1.78zM8.7 12.38h1.78v1.78H8.7zM19.84 12.38h1.78v1.78h-1.78z'/%3e%3c/g%3e%3cpath class='st2' d='M22.58 10.38h-8.29c.06-.51.24-1.2.65-1.55.43-.37 1.06-.43 1.71-.5.67-.07 1.36-.14 1.91-.55 1.09-.81 1.09-2.25 1.09-2.87V4.9c0-.22-.17-.39-.39-.39s-.39.17-.39.39v.02c0 .54 0 1.67-.77 2.24-.37.28-.93.34-1.52.4-.71.07-1.52.16-2.14.68-.68.58-.88 1.58-.93 2.14H5.2c-.89 0-1.62.72-1.62 1.62v8.13c0 .89.72 1.62 1.62 1.62h17.38c.89 0 1.62-.72 1.62-1.62V12c0-.89-.73-1.62-1.62-1.62zm.84 9.75c0 .46-.37.84-.84.84H5.2c-.46 0-.84-.37-.84-.84V12c0-.46.37-.84.84-.84h17.38c.46 0 .84.37.84.84v8.13z'/%3e%3c/g%3e%3c/g%3e%3cpath class='st2' d='M7 10h1v1H7zM9 10h1v1H9zM11 10h1v1h-1zM13 10h1v1h-1zM7 13h3v1H7zM7 16h3v1H7zM11 13h1v1h-1zM13 13h1v1h-1zM15 13h1v1h-1zM17 13h3v1h-3zM17 16h3v1h-3zM15 10h1v1h-1zM17 10h1v1h-1zM19 10h1v1h-1zM11 16h5v1h-5z'/%3e%3cpath d='M22.5 18c0 .83-.6 1.5-1.35 1.5H5.85c-.74 0-1.35-.67-1.35-1.5V9c0-.82.61-1.5 1.35-1.5h15.3c.75 0 1.35.68 1.35 1.5v9z' fill='none' stroke='white' stroke-miterlimit='10'/%3e%3c/svg%3e");
  background-image: var(--keyboardControls-icon);
  background-position: 0;
  background-size: 100%;
}

.tpControls .tpPopup>div {
  background: rgb(26, 29, 49);
  background: var(--expander-color);
}

.tpControls .tpPopup div li {
  height: 28px;
  line-height: 28px;
  text-indent: 32px;
  padding: 1px;
}

.tpControls .tpPopup div li a,
.tpControls .tpPopup div li div {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 14px;
  text-decoration: none;
  margin-right: 28px;
}

.tpControls .tpPopup div li:hover {
  background: rgb(36, 40, 66);
  background: var(--expander-hover-color);
}

.tpControls .tpPopup div li.tpSelected::before {
  content: '\2713';
  position: absolute;
  width: 30px;
  text-indent: 0px;
  text-align: center;
  left: 2px;
  font-size: 18px;
}

.tpControls .tpRow hr {
  border: 0;
  width: 100%;
}

.tpAdvertisementPlayback .tpJumpBack {
  display: none;
}

.tpRow {
  position: relative;
  transition: bottom 0.25s linear !important;
  bottom: 0px;
  height: 5px;
  flex-shrink: 0;
}

.tpRow~.tpRow {
  height: 40px;
}

/* ie and edge rendering off by less than a pixel */
/* selector to target ie10+ and edge */
_:-ms-lang(x),
.tpRow~.tpRow {
  margin-top: -0.45px;
}

.tpPlayerView .tpBottomFloatRegion {
  top: 1000px;
  opacity: 0;
  display: block;
  visibility: visible;
  transition: opacity 0.25s linear;
}

.tpPlayerView.tpMouseHover:not(.tpIdle) .tpBottomFloatRegion,
.tpPlayerView.tpHasTabFocus:not(.tpIdle) .tpBottomFloatRegion,
.tpPlayerView .tpBottomFloatRegion.tpDisableFadeOut,
.tpPlayerView.tpKeepControlsVisible .tpBottomFloatRegion,
.tpPlayerView.tpKeepControlsVisible.tpIdle .tpBottomFloatRegion {
  opacity: 1;
}

.tpPlayerView.tpMouseHover:not(.tpIdle) .tpBottomFloatRegion .tpRow,
.tpPlayerView.tpHasTabFocus:not(.tpIdle) .tpBottomFloatRegion .tpRow {
  top: auto;
}

.tpIdle .tpBottomFloatRegion .tpRow {
  top: auto;
}

.tpPlayerView.tpMouseHover:not(.tpIdle) .tpSubtitles,
.tpPlayerView.tpHasTabFocus:not(.tpIdle) .tpSubtitles {
  margin-top: 0;
  margin-top: var(--overlay-margin-top);
  margin-left: 1em;
  margin-left: var(--overlay-margin-left);
  margin-bottom: 86px;
  margin-bottom: var(--overlay-margin-bottom);
  margin-right: 1em;
  margin-right: var(--overlay-margin-right);
}

.tpPlayerView .tpSubtitles {
  margin-top: 0;
  margin-top: var(--media-margin-top);
  margin-left: 0;
  margin-left: var(--media-margin-left);
  margin-bottom: 0;
  margin-bottom: var(--media-margin-bottom);
  margin-right: 0;
  margin-right: var(--media-margin-right);
}

.tpKeyboardControlsCard-sections::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.tpKeyboardControlsCard-sections::-webkit-scrollbar-track {
  background: #232323;
  border-radius: 5px;
}

.tpKeyboardControlsCard-sections::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 5px;
}

.tpKeyboardControlsCard-sections::-webkit-scrollbar-thumb:hover {
  background: #666;
}

.tpAudioTextTrackMenu::-webkit-scrollbar,
.tpAudioTrackMenu::-webkit-scrollbar,
.tpTextTrackMenu::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.tpAudioTextTrackMenu::-webkit-scrollbar-track,
.tpAudioTrackMenu::-webkit-scrollbar-track,
.tpTextTrackMenu::-webkit-scrollbar-track {
  background: #0e1219;
  border-radius: 5px;
}

.tpAudioTextTrackMenu::-webkit-scrollbar-thumb,
.tpAudioTrackMenu::-webkit-scrollbar-thumb,
.tpTextTrackMenu::-webkit-scrollbar-thumb {
  background: #313851;
  border-radius: 5px;
}

.tpAudioTextTrackMenu::-webkit-scrollbar-thumb:hover,
.tpAudioTrackMenu::-webkit-scrollbar-thumb:hover,
.tpTextTrackMenu::-webkit-scrollbar-thumb:hover {
  background: #455070;
}

.tpKeyboardControlsCard-sections::-webkit-scrollbar-corner,
.tpAudioTextTrackMenu::-webkit-scrollbar-corner,
.tpAudioTrackMenu::-webkit-scrollbar-corner,
.tpTextTrackMenu::-webkit-scrollbar-corner {
  background: transparent;
}

.tpAudioTextTrackMenu header {
  padding: 14px 28px 10px 10px;
  font-size: 20px;
}

.tpAudioTextTrackMenu .tpMenuLeft {
  min-width: 180px;
  border-right: 1px solid #0f131c;
}

.tpAudioTextTrackMenu .tpMenuRight {
  min-width: 180px;
  border-left: 1px solid #252f42;
}

.tpAudioTextTrackMenu .tpTextTrackMenu {
  border-bottom: 1px solid #0f131c;
}

.tpControls .tpRow div.tpTTRSettings {
  height: 36px;
  line-height: 36px;
  padding-left: 32px;
  border-top: 1px solid #252f42;
  background: rgb(26, 29, 49);
  background: var(--expander-color);
  color: #55dfff;
  font-size: 14px;
  border-radius: 0;
  text-align: left;
  cursor: pointer;
}

.tpControls .tpRow div.tpTTRSettings:hover {
  background: rgba(61, 66, 111, 1);
  background: var(--expander-hover-color);
}

.tpScrubberTooltip {
  position: absolute;
  bottom: 26px;
  border: 2px solid black;
  background: black;
}

.tpScrubberTooltipImage {
  float: left;
}

.tpScrubberTooltipImage img {
  display: block;
  float: left;
}

.tpScrubberTooltipText {
  position: absolute;
  bottom: 2px;
  line-height: 1.65;
  text-align: center;
  width: 100%;
  min-width: 80px;
}

.tpScrubberTooltip.tpShowTimeOnly .tpScrubberTooltipImage {
  display: none;
}

.tpScrubberTooltip.tpShowTimeOnly .tpScrubberTooltipText {
  position: static;
}

.tpScrubberTooltipPointer {
  display: none;
}


/* Will not work while chrome devtools is open */
/* if you add to tpBottomFloatRegion any element other than button or div, you might need to add css rule for it */
/* No need to add tpVolume elements since they are in a popup element which we do not fade */
.tpPlayerView.tpIdle .tpVideo,
.tpPlayerView.tpIdle .tpVideoClick,
.tpPlayerView.tpIdle .tpSubtitles,
.tpPlayerView.tpIdle .tpStandby,
.tpPlayerView.tpIdle .tpControls .tpBottomFloatRegion:not(.tpDisableFadeOut) div,
.tpPlayerView.tpIdle .tpControls .tpBottomFloatRegion:not(.tpDisableFadeOut) button,
.tpPlayerView.tpIdle .tpBottomFloatRegion .tpScrubber,
.tpPlayerView.tpIdle .tpStandby .tpPlayOverlay {
  cursor: none;
}

.tpPlayerView.tpIdle.tpKeepControlsVisible .tpControls .tpBottomFloatRegion:not(.tpDisableFadeOut) div,
.tpPlayerView.tpIdle.tpKeepControlsVisible .tpControls .tpBottomFloatRegion:not(.tpDisableFadeOut) button {
  cursor: pointer;
}

/* For touch devices only */
@media (-moz-touch-enabled: 1),
(any-pointer: coarse) {
  .tpControls .tpRow button {
    width: 40px;
    height: 40px;
    margin: 5px 0 0 10px;
  }

  .tpControls button.tpPlayPause::before {
    background-size: 28px 28px;
    background-position: 6px 6px;
  }

  .tpControls button.tpMute::before {
    background-size: 24px 24px;
    background-position: 8px 8px;
  }

  .tpMuted .tpControls button.tpMute::before {
    background-size: 24px 24px;
    background-position: 8px 8px;
  }

  .tpControls button.tpFullscreen::before {
    background-size: 28px 28px;
    background-position: 6px 6px;
  }

  .tpControls button.tpJumpBack::before {
    background-size: 27px 27px;
    background-position: 7px 5px;
  }

  .tpControls button.tpJumpForward::before {
    background-size: 27px 27px;
    background-position: 7px 5px;
  }

  .tpControls .tpBottomFloatRegion .tpRow,
  .tpControls .tpBottomFloatRegion .tpRow .tpScrubber {
    height: 44px;
  }

  .tpControls .tpBottomFloatRegion .tpRow:last-child,
  .tpControls .tpBottomFloatRegion .tpRow:last-child .tpScrubber {
    height: 50px;
  }

  .tpControls .tpRow .tpPopup,
  .tpControls .tpRow .tpPopout {
    margin: 5px 0 0 10px;
  }

  .tpControls .tpBottomRegion .tpRow,
  .tpControls .tpBottomRegion .tpRow .tpScrubber {
    height: 50px;
    line-height: 50px;
  }

  .tpControls .tpPopup div li {
    height: 28px;
    line-height: 28px;
    text-indent: 32px;
    padding: 1px;
  }
}

.tpAudioTextTrackMenu {
  display: flex;
}

.tpAudioTextTrackMenu.tpFlexColumn {
  flex-direction: column;
}

.tpAudioTextTrackMenu.tpFlexColumn header {
  margin-top: 8px;
  margin-bottom: 10px;
  font-size: 20px;
}

.tpAudioTextTrackMenu.tpFlexColumn .tpMenuLeft {
  border-bottom: 1px solid #0f131c;
  border-right: none;
}

.tpAudioTextTrackMenu.tpFlexColumn .tpMenuRight {
  border-top: 1px solid #252f42;
  border-left: none;
}

.tpAudioTextTrackMenu.tpFlexColumn header {
  margin-right: 12px;
}

/* on IE11 the cursor would flicker when we had a transition so we disable the transition */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .tpSubtitles {
    transition: margin-bottom 0s linear;
  }
}

/* target iPhone only */
@supports (-webkit-overflow-scrolling: touch) {
  @media (max-device-width: 736px) {
    .tpPlayerView.tpWarmed .tpFullscreen {
      visibility: hidden;
    }
  }
}