* { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: 'Open sans'; color: #0e2666; } .white { color: #FFF; } #scoreboard { height: 100vh; width: 100vw; background: transparent url(/img/scoreboard/background-blue.svg) center center / cover no-repeat; text-align: center; overflow: hidden; } #fullscreenToggle { position: fixed; bottom: 2vh;left: calc(50% - 6vh); width: 12vh; } .hide { display: none; } *.unselectable { -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .center { text-align: center; } .actions { padding: 8px 0px; display: flex; justify-content: flex-end; flex-wrap: wrap; align-items: center; } input.confirm { font-family: 'Open sans'; font-size: 14px; font-weight: 700; min-width: 0; text-transform: uppercase; color: #467DF7; background: transparent; height: 36px; border: 0; padding: 0 20px; border: 1px solid #467DF7; border-radius: 18px; } input.save { font-family: 'Open sans'; font-size: 14px; font-weight: 700; min-width: 0; text-transform: uppercase; color: #FFF; background: #467DF7; height: 36px; border: 0; padding: 0 20px; border-radius: 18px; outline: none; } input.save:hover { cursor:pointer; opacity: 0.8; } input.save:disabled, input.save[disabled] { background-color: #BFD0F5; } input.trash { font-family: 'Open sans'; font-size: 14px; font-weight: 700; min-width: 0; text-transform: uppercase; color: #ff5f5f; background: transparent url(/img/trash-red.svg) left 14px center no-repeat; height: 36px; border: 0; padding: 0 20px; padding-left: 36px; border: 1px solid #ff5f5f; border-radius: 18px; outline: none; } input.trash:hover { cursor:pointer; opacity: 0.8; } input.cancel { font-family: 'Open sans'; font-size: 14px; font-weight: 700; min-width: 0; text-transform: uppercase; color: #467DF7; background: transparent; height: 36px; border: 0; padding: 0 20px;} input.confirm:hover, input.cancel:hover { cursor: pointer; }  #statusmessage.save, #statusmessage.ok, #statusmessage.info, #statusmessage.warning, #statusmessage.error {position: fixed; top: 115px; left: 50%; width: 400px; margin-left: -200px; text-align: center; background-color: #71A33B; padding: 5px; font-size: 14px; z-index: 100; } div.message.warning { padding: 4px; background-color: #FF9800; color: #0E2666; border-radius: 4px; text-align: center; } div.message.ok { padding: 4px; background-color: #3562CB; color: #FFF; font-weight: 600; border-radius: 4px; text-align: center; } #statusmessage a { color: white; font-weight: bold; } #statusmessage h2 { text-align: center; width: 400px; z-index: 1; margin-top: 70px; margin-bottom: 0; color: #FFF; text-transform: uppercase;} #statusmessage p { text-align: center; margin-top: 0; padding: 20px; padding-top: 10px; } #statusmessage.save, #statusmessage.ok {background-color: #71A33B; color: #FFFFFF; } #statusmessage.info {background-color: #467DF7; color: #FFFFFF; } #statusmessage.warning {background-color: #FF9800; color: #000; } #statusmessage.error {background-color: #BF3636; color: #FFFFFF; } #statusmessage.error h2 { color: #FFFFFF; } #statusmessage.error div.icon {position: absolute; top: -50px; height: 120px; width: 100%; background: transparent url(/img/error-icon.svg) no-repeat center top; z-index: -1;} #statusmessage.warning div.icon {position: absolute; top: -50px; height: 120px; width: 100%; background: transparent url(/img/warning-icon.svg) no-repeat center top; z-index: -1;} #statusmessage.save div.icon, #statusmessage.ok div.icon { position: absolute; top: -50px; height: 120px; width: 100%; background: transparent url(/img/ok-icon.svg) no-repeat center top; z-index: -1; } #statusmessage.info div.icon { position: absolute; top: -50px; height: 120px; width: 100%; background: transparent url(/img/info-icon.svg) no-repeat center top; z-index: -1; } #statusmessage.save .linkbutton { display: inline-block; border: 2px solid #FFF; border-radius: 18px; font-size: 14px; height: 36px; margin: 0 10px; padding: 0 20px; text-transform: uppercase; line-height: 34px;}  .menu-icons { display: flex; align-items: center; justify-content: center; position: fixed; right: 4vw; top: 2vh; z-index: 11;} .menu-icons > div { background: #5788F6 url() center center / 50% no-repeat; margin: 0.75vw; width: 6vh; height: 6vh; max-height: 9vw; max-width: 9vw; border-radius: 100%; } .menu-icons > div:hover { opacity: 0.9; } .menu-icons > div:last-child { margin-right: 0; } .menu-icons .server-disconnected { background-image: url(/img/scoreboard/disconnected.svg); animation: disconnect 1.5s linear infinite; } .menu-icons .statistics-btn { background-image: url(/img/statistics-white.svg); } .menu-icons .fullscreen-btn { background-image: url(/img/scoreboard/fullscreen-white.svg); } @supports (-webkit-touch-callout: none) { .menu-icons .fullscreen-btn { display: none; } }  .menu-icons .more-btn { color: white; font-size: 3vh; font-weight: 700; display: flex; align-items: center; justify-content: center; }  .button { height: 36px; line-height: 36px; border: 1px solid #467DF7; border-radius: 18px;display: inline-block; padding: 0 16px; text-transform: uppercase; font-weight: 700; font-size: 14px; color: #FFF; background-color: #467DF7; text-decoration: none; } .button:active, .button:hover { background-color: #5788F6; text-decoration: none; cursor: pointer; }  .modaldialog { position: fixed; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(0,0,0,0.6); z-index: 1000; } .modal { max-height: calc(100% - 100px); max-width: 960px; min-width: 320px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #FFF; padding: 24px; padding-bottom: 8px; overflow: auto; border-radius: 16px; }  #modal-loader .modal-background { position: fixed; top: 0; left: 0; width: 100%; height: 0%; background: rgba(14, 38, 102, 0.9); display: grid; place-items: center; transition: all 0.3s ease-in; visibility: hidden; z-index: -10; } #modal-loader .open-modal { visibility: visible; z-index: 100; height: 100%; } #modal-loader .modal-content { background: #FFF; border-radius: 8px; max-height: calc(100% - 100px); max-width: 90%; min-width: 320px; min-height: 100px; padding: 10px 30px 20px; box-shadow: 0px 0px 16px rgba(14, 38, 102, 0.5); position: relative; overflow: auto; } #modal-loader .modal-close-btn { position: absolute; right: 8px; top: 8px; width: 45px; height: 45px; background: transparent url(/img/close-white.svg) center no-repeat; cursor: pointer; } #modal-loader .message.error { color: #FF5F5F; font-weight: 600; margin: 2vh 0; } #modal-loader .modal-content.timeouts { background-color: #FFD699;} #deleteSet, #trashDialog { display: none; position: fixed; background-color: #FFF; top: 20vh; left: 25vw; width: 50vw; padding: 3vh 3vw; z-index: 200; border-radius: 16px; } .finishButton, .confirmDeleteSetButton { width: 12vw; color: #31ecff; font-size: 5vh; line-height: 6.5vh; border: 2px solid #3bb0ff; border-radius: 5vh; text-align: center; } .finishFrameButton { position: absolute; top: 80vh; right: 3vh; width: 6.4vw; height: 6.4vw; min-width: 36px; min-height: 36px; border: 2px solid #FFF; border-radius: 50%; background: transparent url(/img/play-icon-white.svg) left 55% center / 33% no-repeat; box-shadow: 0 0px 12px rgba(0,56,102,0.30); } .finishFrameButton.disabled, .setButtons.disabled { display: none !important; } .deleteSetButton { display: inline-block; padding-left: 3vw; padding-right: 3vw; color: #ff5f5f; font-size: 3vh; line-height: 6vh; border: 2px solid #ff5f5f; border-radius: 5vh; text-align: center; } .finishFrameButton { display: none; bottom: 6vh; right: 3vw;} .cancelButton, #deleteSet .cancelButton { position: absolute; bottom: 3vh; right: 15vw; width: 12vw; color: #ff5f5f; font-size: 5vh; line-height: 6vh; border: 2px solid #ff5f5f; } #deleteSet h1 { font-size: 4vh; margin: 0; margin-bottom: 40px; color: #0e2666; } #deleteSet div.text { font-weight: 700; font-size: 2vh; line-height: 3vh; }  #editBG { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 150; background-color: #232a2d; opacity: 0.92; } .editBG { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 150; background-color: #232a2dDE; } #setEdit { position: fixed; top: 10vh; left: 10vw; width: 80vw; height: 80vh; overflow: hidden; overflow-y: auto; z-index: 11; background-color: #475a65; text-align: center; } #setEdit .titleline { font-size: 4.5vh; color: #FFF; margin-top: 3.5vh; } #setEdit .titleline span { color: #FF9800; } #setEdit .flagline .flag { height: 5vh; display: inline-block; } #setEdit .flagline .flag img { height: 7vh; }  #notesDebug { display: none; position: fixed; top: 0vh; left: 37.5%; width: 25%; max-height: 25vh; overflow: auto; z-index: 1000; border-radius: 16px; border: 1px dashed #467DF7; background: white; opacity: 0.5; padding: 16px; } div.notes { display: flex; flex-direction: column-reverse; } div.notes .onenote { display: flex; justify-content: space-between;}  .inactive { visibility: hidden !important; } div.playing { text-align: center; } div.playing div.header { height: 12vh; display: flex; flex-direction: column; align-items: center; justify-content: center; align-items: center; z-index: 100; } div.playing div.tournament { font-size: 3.5vh; font-weight: 500; color: #FFF; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 60vw; z-index: 100; } div.playing div.venue { display: none; font-size: 3vh; color: #BFD0F5; z-index: 100; border-bottom: 1px solid #3562CB; padding: 0 20px 10px 20px; }   div.playing div.imgline { height: 16vh; display: flex; align-items: center; justify-content: center;} div.playing div.imgline, div.playing div.flag, div.playing div.tableAndSet, div.playing .imgline .profile { position: relative; } div.playing .imgline .profile img { height: auto; max-height: 12vh; width: auto; max-width: 8vw; filter: drop-shadow(0 1px 6px rgba(0,56,102,.5));} div.playing div.imgline .flag { position:absolute; bottom: 0; left: unset; right: 40%; transform: translateX(-50%); } div.playing div.contentPlayerA div.imgline .flag { right: unset; left: 40%; transform: translateX(50%); } div.playing div.imgline .flag img { height: auto; max-height: 4vh; width: auto; max-width: 3vw; box-shadow: 0 0px 38px rgba(0,56,102,0.30);} div.playing div.tableAndSet { vertical-align: top; } div.playing div.tableAndSet div.tableInfo { font-size: 10.5vh; color: #d7dbdd; line-height: 9.9vh; margin-top: -0.2vh;} div.playing div.tableAndSet div.setInfo { font-size: 3.8vh; color: #FFF; line-height: 12vh; margin-top: -2.7vh; text-transform: uppercase; } div.playing div.scoreline div.btns { display: flex; flex-direction: column; justify-content: center; align-items: center; height: calc(100vh - 12vh - 7.8vw); } div.playing div.plus { width: 6.4vw; height: 6.4vw; min-height: 36px; min-width: 36px; background: #467df7 url(/img/scoreboard-plus.svg) center center/60% no-repeat; line-height: 10vh; color: #FFF; border: 8px solid #0E266650; background-clip: content-box; border-radius: 50%;  } div.playing div.plus:hover { opacity: 0.9; cursor: pointer; } div.playing div.minus { width: 6.4vw; height: 6.4vw; min-height: 36px; min-width: 36px; background: #ff5f5f url(/img/scoreboard-minus.svg) center center/60% no-repeat; line-height: 10vh; color: #FFF; border: 8px solid #0E266650; background-clip: content-box; border-radius: 50%; box-shadow: 0 0px 38px rgba(0,0,0,0.30); margin-top: 7vh; } div.playing div.minus:hover { opacity: 0.9; cursor: pointer; } div.playing div.break { color: #32E0A6; font-size: 8vh; font-weight: 700; margin-bottom: 1vh;}   div.playing div.caromline { display: flex; justify-content: center; align-items: flex-end; text-align: center; height: 12vh; width: 100%; color: #BFD0F5; font-size: 2vh; font-weight: normal; padding-bottom: 1vh; } div.playing.straightpool div.caromline { display: flex; } div.playing.straightpool div.caromline .average { display: none; } div.playing div.caromline.inactive { display: none; } div.playing div.caromline > div { width: 33%; }  div.playing div.caromline .number { color: #F3F3F3; font-size: 4vh; }  div.playing .btn-std { height: 100%; flex-basis: 12vw; color: #FFF; font-size: 3vh; font-weight: 600; background-color: #243A74; background-position: top 3vh center; background-size: 4.5vh; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; padding: 0 1vh 1vh 1vh; padding-bottom: 1vh; white-space: normal; z-index: 10; margin: 0 1px; line-height: 1.2; } div.playing .btn-std:hover, div.playing div.actionline .btn-std:hover { background-color: #467DF7; cursor: pointer; } div.playing .btn-save { flex-basis: 12vw; height: 7vh; color: #FFF; font-size: 3vh; font-weight: 600; background-color: #467DF7; display: flex; align-items: center; justify-content: center; padding: 1vh; white-space: nowrap; z-index: 10; border: 1.5px solid #467DF7; border-radius: 7vh; margin: 1vh 1vw; } div.playing .actionline2 .btn-save { margin-left: 5vw; padding: 1.5vw; } div.playing .btn-save:hover { background-color: #5788F6; cursor: pointer; } div.playing .btn-cancel { height: 7vh; width: 7vh; color: #FFF; font-size: 3vh; font-weight: 600; display: flex; align-items: center; justify-content: center; padding: 1vh; white-space: nowrap; z-index: 10; border: 1.5px solid #E7E9EC; border-radius: 50%; margin: 1vh 1vw; background-color: #0E2666; } div.playing .btn-cancel:hover { opacity: 0.8; cursor: pointer; } div.playing .btn-std.illegalbreak { background-image: url(/img/scoreboard/illegal-break.svg); } div.playing .btn-reset { flex-basis: 12vw; height: 7vh; color: #FFF; font-size: 3vh; font-weight: 600; background-color: transparent; display: flex; align-items: center; justify-content: center; padding: 1vh; white-space: nowrap; z-index: 10; border: 1.5px solid #FFF; border-radius: 7vh; margin: 1vh 1vw; padding: 1.5vw;}   div.playing div.actionline { display: flex; justify-content: space-between; align-items: center; height: 20vh; width: 100%; background: #0E2666; border-top: 2px solid #0E2666; z-index: 1; } div.playing div.actionline2 { position: fixed; bottom: 20vh; left: 0; display: flex; justify-content: flex-start; align-items: center; height: 0; width: 100%; background: #243A74; z-index: 100; overflow: hidden; transition: height 0.3s; } div.playing div.actionline2.active { height: 20vh; transition: height 0.3s; border-top: 1px solid #0E2666; } div.playing div.actionline2 .title {  width: 12vw; text-align: center; color: #FFF; font-size: 3vh; font-weight: 600; padding: 0 1vw; } div.playing div.actionline .undo, div.playing div.actionline2 .undo { height: 100%; flex-basis: 12vw; min-width: 12vw; color: #FFF; font-size: 3vh; font-weight: 600; background: #467DF7 url(/img/scoreboard/undo-icon.svg) top 4vh center / 7vh no-repeat; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1vh;} div.playing div.actionline .undo:hover, div.playing div.actionline2 .undo:hover { background-color: #5788F6; cursor: pointer; } div.playing div.actionline .turn { height: 100%; margin: 0 1px; flex-basis: 12vw; color: #FFF; font-size: 3vh; font-weight: 600; background: #243A74 url(/img/scoreboard/next-turn-white.svg) top 4vh center / 7vh no-repeat; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1vh; transition: background-image 0.3s ease-in-out; z-index: 10;} div.playing div.actionline .turn.inactive { display: none; } div.playing div.actionline .turn:hover { background-color: #5788F6; cursor: pointer;} div.playing div.actionline .turn.yellow { background-image: url(/img/scoreboard/next-turn-yellow.svg);transition: background-image 0.3s ease-in-out; } div.playing div.actionline .made { height: 100%; margin: 0 1px; flex-basis: 12vw; color: #FFF; font-size: 3vh; font-weight: 600; background: #243A74 url(/img/scoreboard/two-plus.svg) top 4vh center / 7vh no-repeat; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1vh; transition: background-image 0.3s ease-in-out; z-index: 10;} div.playing div.actionline .made:hover { background-color: #5788F6; cursor: pointer;} div.playing div.actionline .rack { height: 100%; margin: 0 1px; flex-basis: 12vw; color: #FFF; font-size: 3vh; font-weight: 600; background: #243A74 url(/img/scoreboard/rack-straightpool-white.svg) top 4vh center / 7vh no-repeat; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1vh; z-index: 10;} div.playing div.actionline .drybreak { height: 100%; margin: 0 1px; flex-basis: 12vw; color: #FFF; font-size: 3vh; font-weight: 600; background: #243A74 url(/img/scoreboard/dry-break.svg) top 4vh center / 7vh no-repeat; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1vh; transition: background-image 0.3s ease-in-out; z-index: 10;} div.playing div.actionline .drybreak:hover { background-color: #5788F6; cursor: pointer;} div.playing div.actionline .breakpots { height: 100%; margin: 0 1px; flex-basis: 12vw; color: #FFF; font-size: 3vh; font-weight: 600; background: #243A74 url(/img/scoreboard/one-plus.svg) top 4vh center / 7vh no-repeat; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1vh; transition: background-image 0.3s ease-in-out; z-index: 10;} div.playing div.actionline .breakpots:hover { background-color: #5788F6; cursor: pointer;} div.playing div.actionline .pots { height: 100%; margin: 0 1px; flex-basis: 12vw; color: #FFF; font-size: 3vh; font-weight: 600; background: #243A74 url(/img/scoreboard/one-plus.svg) top 4vh center / 7vh no-repeat; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1vh; transition: background-image 0.3s ease-in-out; z-index: 10;} div.playing div.actionline .pots:hover { background-color: #5788F6; cursor: pointer;} div.playing div.actionline .ballOn { height: 100%; margin: 0 auto; flex-basis: 12vw; color: #FFF; font-size: 3vh; font-weight: 600; background-color: #243A74; background-position: top 4vh center; background-size: 7vh; background-repeat: no-repeat; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1vh; transition: background-image 0.3s ease-in-out; z-index: 10;} div.playing div.actionline .ballOn:hover { background-color: #5788F6; cursor: pointer;} div.playing div.actionline .finish { height: 100%; flex-basis: 13vw; color: #5788F6; font-size: 3vh; font-weight: 600; background: #0E2666 url(/img/scoreboard/finish.svg) top 4vh center / 5vh no-repeat; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1vh; z-index: 10;} div.playing div.actionline .finish:hover { background-color: #243A74; cursor: pointer; } div.playing div.actionline .pass { height: 100%; flex-basis: 12vw; color: #FFF; font-size: 3vh; font-weight: 600; background: #243A74 url(/img/scoreboard/white-black-dot.svg?) top 4vh center / 7vh no-repeat; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1vh; z-index: 10;} div.playing div.actionline .pass:hover { background-color: #467DF7; cursor: pointer; } div.playing div.actionline .foul { height: 100%; flex-basis: 12vw; color: #FFF; font-size: 3vh; font-weight: 600; background: #243A74 url(/img/scoreboard/foul-icon.svg) top 4vh center / 4.5vh no-repeat; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1vh; z-index: 10;} div.playing div.actionline .foul:hover { background-color: #467DF7; cursor: pointer; } div.playing div.actionline .illegalbreak { height: 100%; flex-basis: 12vw; color: #FFF; font-size: 3vh; font-weight: 600; background: #243A74 url(/img/scoreboard/illegal-break.svg) top 4vh center / 7vh no-repeat; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1vh; z-index: 10;} div.playing div.actionline .illegalbreak:hover { background-color: #467DF7; cursor: pointer; } div.playing div.actionline .safe { height: 100%; flex-basis: 12vw; color: #FFF; font-size: 3vh; font-weight: 600; background: #243A74 url(/img/scoreboard/white-lock.svg) top 3.5vh center / 7vh no-repeat; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1vh; z-index: 10;} div.playing div.actionline .safe:hover { background-color: #467DF7; cursor: pointer; } div.playing div.actionline .miss{ height: 100%; flex-basis: 12vw; color: #FFF; font-size: 3vh; font-weight: 600; background: #243A74 url(/img/scoreboard/next-turn-white.svg) top 4vh center / 7vh no-repeat; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1vh; z-index: 10;} div.playing div.actionline .miss:hover { background-color: #467DF7; cursor: pointer; } div.playing div.actionline .carompoint{ height: 100%; flex-basis: 12vw; color: #FFF; font-size: 3vh; font-weight: 600; background: #243A74 url(/img/scoreboard/miss-icon.svg) top 4vh center / 7vh no-repeat; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1vh; z-index: 10;} div.playing div.actionline .carompoint:hover { background-color: #5788F6; cursor: pointer; }  div.playing div.actionline div.carom-buttons { display: flex; height: 100%; width: 100%; justify-content: flex-start; } div.playing div.actionline div.straightpool-buttons { display: flex; height: 100%; width: 100%; justify-content: flex-start; } div.playing div.actionline2 .straightpool-foul { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 1vh; border-radius: 8px; border: 1px solid #467DF7; }  div.playing div.actionline div.carom-buttons .ball.carom.white { margin-left: 6%; transition: all 0.3s ease-in-out; } div.playing div.actionline div.carom-buttons .ball.carom.yellow { margin-left: 60%; transition: all 0.3s ease-in-out; }   div.playing div.actionline div.pool2-buttons { display: flex; height: 100%; width: 100%; justify-content: flex-start; } div.playing div.actionline div.pool2-buttons .frame { transition: all 0.3s ease-in-out; } div.playing div.actionline div.pool2-buttons .frame.activeA { margin-left: 0%; transition: all 0.3s ease-in-out; } div.playing div.actionline div.pool2-buttons .frame.activeB { margin-left: calc(12vw * 4); transition: all 0.3s ease-in-out; }  div.playing div.actionline .sideballs.balls.big input.ball{ height: 12vh; width: 12vh; min-height: 6vh; font-size: 5vh; }   div.playing div.actionline div.center-buttons { display: flex; height: 100%; width: 100%; justify-content: center; } div.playing div.actionline .spacer { flex-basis: 9vw; } div.playing div.actionline .frame { margin: 0 1px; height: 100%; flex-basis: 12vw; color: #FFF; font-size: 3vh; font-weight: 600; background: #243A74 url(/img/scoreboard/plus-one.svg) top 3vh center / 7vh no-repeat; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1vh; z-index: 10;} div.playing div.actionline .frame:hover { background-color: #467DF7; cursor: pointer; } div.playing div.actionline .runout { height: 100%; flex-basis: 12vw; color: #FFF; font-size: 3vh; font-weight: 600; background: #243A74 url(/img/scoreboard/runout.svg) top 3vh center / 7vh no-repeat; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1vh; z-index: 10;} div.playing div.actionline .runout:hover { background-color: #467DF7; cursor: pointer; }  div.playing div.actionline .miss:active, div.playing div.actionline .safe:active, div.playing div.actionline .turn:active, div.playing div.actionline .finish:active, div.playing div.actionline .pass:active, div.playing div.actionline .foul:active, div.playing div.actionline .scratch:active, div.playing div.actionline .carompoint:active { transition: all .1s ease-out; background-color: #5788F6 !important;} div.playing div.actionline .undo:active { transition: all .1s ease-out; background-color: #243A74 !important;} div.playing div.actionline .scratch, div.playing div.actionline2 .scratch { height: 100%; flex-basis: 12vw; color: #FFF; font-size: 3vh; font-weight: 600; background: #243A74 url(/img/scoreboard/scratch-icon.svg) top 4vh center / 6vh no-repeat; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1vh; z-index: 10;} div.playing div.actionline .scratch:hover div.playing div.actionline2 .scratch:hover { background-color: #467DF7; cursor: pointer; }  #progressbarcontainer { position: fixed; bottom: 20vh; left: 0; height: 2.5vh; width: 50vw; } #progressbarcontainer.turnB { left: 50vw; } #progressbarcontainer.turnB .shot-time { left: auto; right: 16px; text-align: right; } #progressbarcontainer.turnB #progressbar { right: 0; } #progressbar { height: 2.5vh; width: 0%; transition: width linear 0.99s, height 0.3s, background-color 1s ease; background: #32E0A6; position: absolute; bottom: 0; } #progressbar.countdown { background-color: #FF9800; } #progressbar.countdown.imminent { background-color: #FF5F5F; color: #FF5F5F; } #progressbar.blink { height: 84vh; transition: height 0.3s; animation: blinker 1s linear infinite; } #progressbarcontainer .shot-time { color: #32E0A6; font-size: 4vh; font-weight: 600; z-index: 3; overflow: hidden; position: absolute; left: 16px; bottom: 3vh; text-align: left; background-color: transparent !important; transition: background-color 1s ease;} #progressbarcontainer .shot-time.countdown { color: #FF9800; } #progressbarcontainer .shot-time.countdown.imminent { color: #ff9f9f; }  div.setsInfo.highlightSetScores { animation: highlightSetScores 1s linear 3; } @keyframes blinker { 50% { opacity: 0; } } @keyframes disconnect{ 50% { opacity: 0.3; background-color: #FF9800; } } @keyframes highlightSetScores { 0% { background-color: #0E2666; } 50% { background-color: #467DF7; } 100% { background-color: #0E2666; } }  div.playing .matchTime { font-size: 4vh; line-height: 4vh; font-weight: 600; color: #3BB0FF; padding: 0.5vh 0; }  div.playing div.endBtns { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; width: 100%; }  div.playing div.endMatch { position: relative; background: #5788F6 url(/img/scoreboard/end-match-icon.svg) center center / 2.5vh no-repeat; border: 0; border-radius: 50%; height: 6vh; width: 6vh; margin-bottom: 3vh; } div.playing div.endMatch:hover { opacity: 0.9; cursor: pointer;} div.playing div.endMatch:after { content: "END MATCH"; color: #FFF; font-size: 1vh; white-space: nowrap; position: absolute; top: 6.5vh; left: 50%; transform: translateX(-50%); }  div.playing div.endSet { position: relative; background: #5788F6 url(/img/scoreboard/arrow-double-right-white.svg) center center / 2.5vh no-repeat; border: 0; border-radius: 50%; height: 6vh; width: 6vh; margin-bottom: 3vh; } div.playing div.endSet:hover { opacity: 0.9; cursor: pointer;} div.playing div.endSet:after { content: "NEXT SET"; color: #FFF; font-size: 1vh; white-space: nowrap; position: absolute; top: 6.5vh; left: 50%; transform: translateX(-50%); }  div.playing div.endFrame { position: relative; background: #5788F6 url(/img/scoreboard/arrow-right-white.svg) center center / 1.5vh no-repeat; border: 0; border-radius: 50%; height: 6vh; width: 6vh; margin-bottom: 3vh; } div.playing div.endFrame:hover { opacity: 0.9; cursor: pointer;} div.playing div.endFrame:after { content: "NEXT FRAME"; color: #FFF; font-size: 1vh; white-space: nowrap; position: absolute; top: 6.5vh; left: 50%; transform: translateX(-50%); }  div.playing div.timeout { position: relative; background: #5788F6 url(/img/scoreboard/pause-white.svg) center center / 1.5vh no-repeat; border: 0; border-radius: 50%; height: 6vh; width: 6vh; margin-bottom: 3vh; } div.playing div.timeout:hover { opacity: 0.9; cursor: pointer;} div.playing div.timeout:after { content: "TIMEOUT"; color: #FFF; font-size: 1vh; white-space: nowrap; position: absolute; top: 6.5vh; left: 50%; transform: translateX(-50%); }  .timeoutsContainer .line { display: flex; justify-content: space-between; align-items: flex-start; padding-top: 2vh; min-width: 60vw; } .timeoutsContainer .stoptimeoutAbtn, .timeoutsContainer .stoptimeoutBbtn { display: none; } .timeoutsContainer.activeA .participantA .starttimeoutAbtn { display: none; } .timeoutsContainer.activeA .participantA .stoptimeoutAbtn { display: block; } .timeoutsContainer.activeB .participantB .starttimeoutBbtn { display: none; } .timeoutsContainer.activeB .participantB .stoptimeoutBbtn { display: block; }  .timeoutsContainer .timeout { font-size: 10vh; font-weight: 700; text-align: center; } .timeoutsContainer .timeout.overtime { color: #ff5f5f; }  .timeoutsContainer .participant { display: flex; justify-content: center; flex-direction: column; align-items: center; flex-basis: 45%; } .timeoutsContainer .profileImage { position: relative; background: transparent url() center center / contain no-repeat; height: 12vh; width: 100%; margin-bottom: 1.5vh; filter: drop-shadow(0 1px 6px rgba(0,56,102,.5));} .timeoutsContainer .profileImage .flag {position: absolute; bottom: 0; width: 4vh; height: 3vh; left: 50%; transform: translateX(50%); background: transparent url() center center / contain no-repeat; } .timeoutsContainer .lastname { font-weight: 600; } .timeoutsContainer .firstname, .timeoutsContainer .lastname { font-size: 2.5vh; } .timeoutsContainer .centersection { text-align: center; flex-basis: 10%; } .timeoutsContainer .timeoutTitle { font-size: 4vh; font-weight: 700; } .timeoutsContainer .timeoutsAvailable { font-size: 2vh; font-weight: 600; } .timeoutsContainer input:disabled { background: #DBDEE4; color: #808CAC; }  .timeoutsContainer .timeoutsFinished { margin-top: 2vh; } .timeoutsContainer .finishedTimeoutLine { position: relative; display: flex; align-items: center; } .timeoutsContainer .finishedTimeoutLine::before { content: ""; display: block; position: absolute; left: -2vh; width: 1vh; height: 1vh; border-radius: 100%; background: #FF9800;} .timeoutsContainer .duration { color: #1C717F; margin-right: 8px; } .timeoutsContainer .duration.durationLimitExceeded { color: #FF5F5F; } .timeoutsContainer .timeoutsFinished .starttime { display: none; }   .shotclock { font-size: 2vh; color: #BFD0F5; } .shotclock-btns { display: flex; justify-content: space-between; align-items: center; z-index: 3; margin: 8px auto; } .shotclock-btns .extension, .shotclock-btns .reset, .shotclock-btns .pause { width: 6vw; height: 6vh; border: 1px solid #467DF7; border-radius: 32px; background-size: auto 4vh !important; font-size: 1.5vh; display: flex; justify-content: center; min-width: 70px; margin: 0 8px; } .shotclock-btns .pause { visibility: hidden; } .shotclock-btns .extension:hover, .shotclock-btns .reset:hover, .shotclock-btns .pause:hover { opacity: 0.8; cursor: pointer; } .shotclock-btns .extension { background: #0E2666 url(/img/scoreboard/shotclock-extension.svg) center center no-repeat; } .shotclock-btns .extension:after { content: "EXTENSION"; color: #FFF; position: relative; top: 6vh; } .shotclock-btns .pause{ background: #0E2666 url(/img/scoreboard/shotclock-pause.svg) center center no-repeat; } .shotclock-btns .pause:after { content: "PAUSE"; color: #FFF; position: relative; top: 6vh;} .shotclock-btns .reset{ background: #0E2666 url(/img/scoreboard/shotclock-reset.svg) center center no-repeat; } .shotclock-btns .reset:after { content: "RESTART"; color: #FFF; position: relative; top: 6vh;}  div.playing div.score {  font-size: 32vh; font-weight: 700; line-height: 25vh; color: #FFF; text-align: center; z-index: 3; text-shadow: 0px 0px 12px #003866;} div.playing.straightpool div.score { font-size: 28vh; line-height: 22vh; }  div.playing div.disciplineInfo { color: #BFD0F5; font-size: 3vh; line-height: 4vh; font-weight: 600; padding: 0.5vh 0; } div.playing div.tableInfo { color: #BFD0F5; font-size: 3vh; line-height: 4vh; font-weight: 600; padding: 0.5vh 0; }  div.playing div.inningBox { position: absolute; top: 19vh; left: calc(50% - 9vw); width: 18vw; height: 42vh; color: #BFD0F5; border-radius: 18px; background: #0E2666; box-shadow: 0px 0px 20px #0E2666; z-index: 100; } div.playing div.centersection{ position: absolute; top: 12vh; left: calc(50% - 9vw); width: 18vw; height: 68vh; border-radius: 18px;  z-index: 20; display:flex; align-items: center; justify-content: space-between; flex-direction: column; text-shadow: 0px 6px 16px #0E266666; padding: 3vh 0;} div.playing div.matchInfo { border-radius: 100vh; border: 1px solid #467DF7; background: #0E2666; padding: 0px 24px;  font-size: 2vh; color: #BFD0F5; text-align: center; text-shadow: 0px 0px 12px #003866; margin-bottom: 1.5vh; } div.playing div.matchInfo .infoline { display: grid; grid-template-columns: repeat(3, 33%); align-items: center; width: 100%; position: relative; padding: 8px 0px; } div.playing div.matchInfo .infoline > div { display: flex; justify-content: center; padding: 0 8px;} div.playing div.matchInfo div.raceTo { font-family: 'Open sans'; font-size: 4.5vh; line-height: 4vh; font-weight: 600; color: #FF9800; text-shadow: 0px 0px 12px #003866; } div.playing div.matchInfo .title { position: absolute; top: 4px; text-align: center; width: 100%; font-size: 2vh; } div.playing div.matchInfo div.matchScoreA, div.playing div.matchInfo div.matchScoreB { color: #BFD0F5; font-size: 9vh; line-height: 9vh; margin: 0 8px; font-weight: 600; }  #pointsLeftOnTable, #ballsLeftOnTable { color: #BFD0F5; font-weight: 500; font-size: 6vh; } #pointsLeftOnTable .points, #ballsLeftOnTable .balls { line-height: 5.5vh; font-weight: 600;} #pointsLeftOnTable .title, #ballsLeftOnTable .title { color: #BFD0F5; font-weight: 500; font-size: 2vh; } #ballsLeftOnTable { display: none; } div.playing.straightpool #ballsLeftOnTable { display: block; } div.playing.straightpool div.actionline { justify-content: flex-start; } div.playing.straightpool div.actionline2 { justify-content: space-between; }  div.playing.straightpool .actionline .turn.white { margin-left: calc(0%); transition: all 0.3s ease-in-out; } div.playing.straightpool .actionline .turn.yellow { margin-left: calc(50%); transition: all 0.3s ease-in-out; } div.playing div.playerline {  font-family: 'Open sans'; font-size: 4vh; font-weight: 600; color: #FFFFFF; text-align: left; text-overflow: ellipsis; overflow: hidden; } div.playing .contentPlayerA div.imgline { justify-content: flex-start; } div.playing .contentPlayerA div.playerline { margin-left: 2vw; padding-right: 0; } div.playing .contentPlayerB div.imgline { justify-content: flex-end; } div.playing .contentPlayerB div.playerline { margin-right: 2vw; padding-left: 0; } div.playing div.playerline div { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; text-shadow: 0px 0px 12px #003866; } div.playing div.playerline div.playerB { text-align: right; } div.playing div.playerline .firstname { color: #BFD0F5; font-weight: normal; } div.playing div.playerline .lastname { font-weight: 700; }  div.breakstarter { text-align: center; } .participantSelector { display: flex; justify-content: space-between; } .participantSelector input+label { background: #EAEDF4; border-radius: 16px; padding: 3vh; width: 30vh; height: 23vh; margin: 0 1vh; font-size: 2.5vh; color: #0E2666; display: flex; flex-direction: column; justify-content: center; align-items: center; } .participantSelector input:checked+label { background: #467DF7; color: #FFF; } .participantSelector .profileImage { position: relative; background: transparent url() center center / contain no-repeat; height: 12vh; width: 100%; margin-bottom: 1.5vh; filter: drop-shadow(0 1px 6px rgba(0,56,102,.5));} .participantSelector .profileImage .flag {position: absolute; bottom: 0; width: 4vh; height: 3vh; left: 50%; transform: translateX(50%); background: transparent url() center center / contain no-repeat; } .participantSelector .lastname { font-weight: 600; } .breakstarter .handicapSelection { display: flex; justify-content: space-around; align-items: center; } .breakstarter .handicapSelection input { text-align: center; flex-basis: 40%; background: #EAEDF4; border-radius: 16px; padding: 3vh; font-size: 2.5vh; color: #0E2666; border:none; outline: none; } .breakstarter .handicapSelection .input-group { margin: 0; } div.statistics h1 { text-align: center;} div.statistics .score { display: flex; justify-content: space-evenly; align-items: center; font-weight: 700; font-size: 6vh; } div.statistics table { width: 100%; text-align: center;} div.statistics table th { font-weight: normal; vertical-align: top; padding-bottom: 16px; } div.statistics table th:first-child, div.statistics table th:last-child { width: 10vw; } div.statistics table td:first-child, div.statistics table td:last-child { font-weight: 600; } div.statistics .profileImage { position: relative; background: transparent url() center center / contain no-repeat; height: 12vh; width: 100%; margin-bottom: 1.5vh; filter: drop-shadow(0 1px 6px rgba(0,56,102,.5));} div.statistics .profileImage .flag {position: absolute; bottom: 0; width: 4vh; height: 3vh; left: 50%; transform: translateX(50%); background: transparent url() center center / contain no-repeat; } div.statistics .lastname { font-weight: 600; }  div.playing div.breakline { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; min-height: 11vh; margin-bottom: 3vh; font-family: 'Open sans'; font-size: 2vh; color: #BFD0F5; text-align: center;  } div.playing .breaker, div.playing .ballInHand { display: flex; align-items: center; flex-direction: column; font-size: 3vh; color: #BFD0F5; } div.playing .breaker::before, div.playing .ballInHand::before { content: ''; display: block; height: 5vh; width: 5vh; background: transparent url(/img/scoreboard/white-dotted.svg) center center / cover no-repeat; } div.playing .handicap { font-size: 2vh; color: #BFD0F5; }  div.playing div.breakline .breakScore {display: flex; align-items: center; justify-content: center; } div.playing div.breakline .score { color: #FFF; font-size: 4vh; margin-left: 16px; } div.playing div.breakline .balls { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; filter: drop-shadow(0 1px 6px rgba(0,56,102,.5));} div.playing div.breakline .balls .ball { height: 4vh; width: 4vh; border: 0; background: transparent center center / contain no-repeat; margin: 8px 8px; } div.playing div.breakline .balls .ball.red { background-image: url(/img/scoreboard/red-ball.svg); } div.playing div.breakline .balls .ball.yellow { background-image: url(/img/scoreboard/yellow-ball.svg); color: #0E2666; } div.playing div.breakline .balls .ball.green { background-image: url(/img/scoreboard/green-ball.svg); } div.playing div.breakline .balls .ball.brown { background-image: url(/img/scoreboard/brown-ball.svg); } div.playing div.breakline .balls .ball.blue { background-image: url(/img/scoreboard/blue-ball.svg); } div.playing div.breakline .balls .ball.pink { background-image: url(/img/scoreboard/pink-ball.svg); color: #0E2666; } div.playing div.breakline .balls .ball.black { background-image: url(/img/scoreboard/black-ball.svg); } div.playing div.breakline .balls .ball.freeball:after { content: "Free ball"; width: 3vh; font-size: 1.2vh; line-height: 1.2vh; position: absolute; top: 50%; transform: translate(-50%,-50%);} div.playing div.breakline .balls .ball.black-striped { background-image: url(/img/scoreboard/pool-black-striped.svg); }  div.playing div.breakline .balls .ball.one { background-image: url(/img/scoreboard/pool-one.svg); } div.playing div.breakline .balls .ball.two { background-image: url(/img/scoreboard/pool-two.svg); } div.playing div.breakline .balls .ball.three { background-image: url(/img/scoreboard/pool-three.svg); } div.playing div.breakline .balls .ball.four { background-image: url(/img/scoreboard/pool-four.svg); } div.playing div.breakline .balls .ball.five { background-image: url(/img/scoreboard/pool-five.svg); } div.playing div.breakline .balls .ball.six { background-image: url(/img/scoreboard/pool-six.svg); } div.playing div.breakline .balls .ball.seven { background-image: url(/img/scoreboard/pool-seven.svg); } div.playing div.breakline .balls .ball.eight { background-image: url(/img/scoreboard/pool-eight.svg); } div.playing div.breakline .balls .ball.nine { background-image: url(/img/scoreboard/pool-nine.svg); } div.playing div.breakline .balls .ball.ten { background-image: url(/img/scoreboard/pool-ten.svg); } div.playing div.breakline .balls .ball.eleven { background-image: url(/img/scoreboard/pool-eleven.svg); } div.playing div.breakline .balls .ball.twelve { background-image: url(/img/scoreboard/pool-twelve.svg); } div.playing div.breakline .balls .ball.thirteen { background-image: url(/img/scoreboard/pool-thirteen.svg); } div.playing div.breakline .balls .ball.fourteen { background-image: url(/img/scoreboard/pool-fourteen.svg); } div.playing div.breakline .balls .ball.fifteen { background-image: url(/img/scoreboard/pool-fifteen.svg); }  div.playing div.runoutsline { height: 12vh; margin-bottom: 3vh; } div.playing div.runoutsline div.runoutsvalue { color: #32E0A6; font-weight: 700; font-size: 5.5vh; } div.playing div.runoutsline div.runoutstext { color: #FFF; font-size: 3vh; } div.playing div.runoutdesc { margin-right: 1.4vw; color: #FFF; opacity: 0.7; font-size: 3.5vh; text-shadow: 0px 0px 12px #003866; }  div.playing.positionReverse .contentMain { flex-direction: row-reverse; } div.playing.positionReverse .contentPlayerA div.imgline { justify-content: flex-start; padding-left: 5vw; padding-right: 0; flex-direction: row-reverse; } div.playing.positionReverse .contentPlayerB div.imgline { justify-content: flex-end; padding-left: 0; padding-right: 5vw; flex-direction: row-reverse; } div.playing.positionReverse div.playerline div.playerA { text-align: right; } div.playing.positionReverse div.playerline div.playerB { text-align: left; } div.playing.positionReverse .contentPlayerA .scoremenu { right: 4vw; left: unset; } div.playing.positionReverse .contentPlayerB .scoremenu { right: unset; left: 4vw; } div.playing.positionReverse .inningInfo table, div.playing.positionReverse .setsInfo table { direction: rtl; }  div.playing.positionReverse .contentPlayerA .playerline { margin-left: 0; margin-right: 2vw; } div.playing.positionReverse .contentPlayerB .playerline { margin-left: 2vw; margin-right: 0; }  div.playing.positionReverse .contentPlayerB .scoreB, div.playing.positionReverse .contentPlayerB .playerline, div.playing.positionReverse .contentPlayerB .infoline { padding-left: 0; padding-right: 5vw; } div.playing.positionReverse .contentPlayerA .scoreB, div.playing.positionReverse .contentPlayerA .playerline, div.playing.positionReverse .contentPlayerA .infoline { padding-left: 5vw; padding-right: 0; }  div.playing.positionReverse #turncover-left { left: unset; right: 0; } div.playing.positionReverse #turncover-right { left: 0; right: unset; }  div.playing div.inningInfo { display: none; } .contentMain { display: flex; width: 100%; max-width: 100%; height: 68vh; justify-content: space-between;} .scoreline { flex-basis: 12vw; max-width: 12vw; } .contentPlayerA, .contentPlayerB { position: relative; flex-basis: 50vw; max-width: 50vw; padding: 0 4vw; display: flex; flex-direction: column; justify-content: space-between; } .contentPlayerA .imgline, .contentPlayerA .scoreA, .contentPlayerA .playerline, .contentPlayerA .infoline { padding-right: 5vw; } .contentPlayerB .imgline, .contentPlayerB .scoreB, .contentPlayerB .playerline, .contentPlayerB .infoline { padding-left: 5vw; justify-content: flex-end;} .contentPlayerA .imgline { justify-content: flex-start; } .contentPlayerB .imgline { justify-content: flex-end; } .contentSeparator { flex-basis: 12vw; max-width: 12vw; display: flex; flex-direction: column; align-items: center; justify-content: center;}  div.starting { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } div.starting div.message { font-size: 3vh; font-weight: 700; color: #3bb0ff; margin-top: 5vh; }  div.waiting { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100vw; height: 100vh; z-index: 3; } div.waiting div { text-align: center; z-index: 1; } div.waiting div.table { font-size: 13vh; color: #BFD0F5; font-weight: 700; } div.waiting div.venue { font-size: 5vh; color: #FFF; } div.waiting .oldScoreboardLink { position: fixed; bottom: 4vh; left: 3vw; font-size: 1.5vh; color: #FFF; text-align: left;} div.waiting .oldScoreboardLink a { color: #FFF; } div.waiting div.message { font-size: 7vh; font-weight: 700; color: #3bb0ff; margin-top: 5vh; } div.waiting div.video { z-index: 0; position: absolute; width: 100vw; height: 100vh; overflow: hidden; } #countdown { visibility: hidden; position: fixed; bottom: 4vh; right: 3vw; display: flex; align-items: center; font-weight: 700; font-size: 2vw; color: #FFF;} #countdown .box { position: relative; top: 0; right: 0; width: 80px; height: 80px;} #countdown .seconds { position: absolute; top: 0; right: 0; display: flex; justify-content: center; align-items: center; width: 80px; height: 80px; } #countdown .cs-lds-roller { position: absolute; top: 0; right: 0; width: 80px; height: 80px; } #countdown .description { font-weight: 700; font-size: 2vh; color: #FFF; padding-right: 1vw;}  div.waiting .personal { padding: 2vh 2vw; border: 2px solid #0e2666; border-radius: 12px; box-shadow: 0px 0px 20px #0e2666;background: linear-gradient(to right, transparent, black); text-decoration: none; } div.waiting .personal:hover { cursor: pointer; } div.waiting .personal:active, div.waiting .personal:focus, div.waiting .personal:link, div.waiting .personal:active { outline: none; text-decoration: none; } div.waiting .personal .text { color: #AEB5C9; display: flex; justify-content: center; align-items: flex-start; flex-direction: column; margin-right: 4vw; margin-left: 2vw;} div.waiting .personal .player { display: flex; justify-content: flex-end; align-items: center; } div.waiting .personal .player .profile { position: relative; width: 100px; margin: auto; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; } div.waiting .personal .player .profile .image { height: 100px; width: 100px;  }  div.waiting .personal .player .name { text-align: left; color: #FFF; font-weight: 600; font-size:larger; } div.waiting .personal .player .info { font-size: smaller; } div.waiting .cs-matchdialog-participants { align-items: flex-start; } div.waiting .cs-matchdialog-participants .cs-matchdialog-midsection { padding: 0 8px; font-weight: 600; } div.waiting .cs-matchdialog-participants .cs-matchdialog-participantA, .cs-matchdialog-participants .cs-matchdialog-participantB { flex-basis: 50%; } div.waiting .cs-matchdialog-participants .cs-participant-name { margin-top: 4px; } div.waiting .cs-matchdialog-participants .cs-participant-profileImg img.cs-participant-profileImage { max-width: 64px; } div.waiting .cs-matchdialog-participants .cs-participant-profileImg img.cs-participant-flag { width: 24px; left: calc(50% + 16px); } div.waiting .cs-matchdialog-participants .cs-participant-profileImg { width: 64px; height: 75px; margin: auto; } div.waiting .cs-matchdialog-tournament { font-weight: 600; font-size: 2.5vh; text-align: center; margin-top: 16px; } div.waiting .cs-matchdialog-time { color: #51628F; padding: 4px 0; } div.waiting .cs-participant-firstname {color: #51628F; font-weight: normal; } div.waiting .scoreboard-autostart-info { background: #3562CB; color: #fff; font-weight: 600; padding: 1vh 2vw; border-radius: 4px; margin:16px 0 0 0; text-align: center; } div.waiting div.center-section { display: flex; justify-content: center; align-items: stretch; flex-direction: row;  border-radius: 12px; padding: 4vh 2vw; } div.waiting div.center-section > div { width: calc(50% - 2vw); margin: 2vw; padding: 2vh 2vw; flex-basis: 100%; flex-grow: 0; border-radius: 12px; background: #E7E9EC; box-shadow: 0px 0px 20px #0e2666; display: flex; flex-direction: column; justify-content: space-between; } div.waiting div.center-section > div h2 { margin-top: 0; } .finishDialog .finishdialog-waiting-msg { display: none; background: #3562CB; color: #fff; font-weight: 600; padding: 1vh 2vw; border-radius: 4px; margin:16px 0 0 0; text-align: center; }  div.waiting .cs-nextMatch { padding: 4vh 2vw; } #turncover-left { position: absolute; top: 0; left: 0%; height: 80vh; width: 50%; background-color: #000; opacity: 0.5; z-index: 10;transition: all 0.3s; } #turncover-right { position: absolute; top: 0; right: 0%; height: 80vh; width: 50%; background-color: #000; opacity: 0.5; z-index: 10;transition: all 0.3s; } #turncover-left.off, #turncover-right.off { width: 0;transition: left 0.3s, right 0.3s; }  .scoremenu { position: absolute; top: 20vh; z-index: 4; } .contentPlayerB .scoremenu { right: 4vw; }  div.actionline .balls { margin-left: auto; margin-right: auto; display: flex; justify-content: center; flex-wrap: wrap; align-items: center;background: transparent center center / contain no-repeat;}  input.ball { height: 7vh; width: 7vh; border: 0; background: transparent center center / contain no-repeat; margin: 0 1vw; color: #FFF; font-weight: 600; font-size: 3vh; font-family: 'Open sans'; filter: drop-shadow(0 1px 6px rgba(0,56,102,.5)); text-align: center; display: inline-block;} input.ball.white{ background-image: url(/img/scoreboard/white-dotted.svg); color: #0E2666; } .playing.snooker input.ball.white{ background-image: url(/img/scoreboard/white-black-dot.svg); color: #0E2666; } .ball.red { background-image: url(/img/scoreboard/red-ball.svg); } .ball.yellow { background-image: url(/img/scoreboard/yellow-ball.svg); color: #0E2666; } .actionline .ball.carom.yellow { background-image: url(/img/scoreboard/yellow-dotted.svg); } .actionline .ball.carom.white { background-image: url(/img/scoreboard/white-dotted.svg); } .ball.green { background-image: url(/img/scoreboard/green-ball.svg); } .ball.brown { background-image: url(/img/scoreboard/brown-ball.svg); } .ball.blue { background-image: url(/img/scoreboard/blue-ball.svg); } .ball.pink { background-image: url(/img/scoreboard/pink-ball.svg); color: #0E2666; } .ball.black { background-image: url(/img/scoreboard/black-ball.svg); } .ball.black-striped { background-image: url(/img/scoreboard/pool-black-striped.svg); } .ball.freeball { font-size: 1.5vh; white-space: normal; } .ball:disabled { opacity: 0.3;} .ball:disabled:hover { opacity: 0.5; } .ball.selected { opacity: 0.5 !important; }  .ball.generic { border: 1px solid #467DF7; border-radius: 50%; margin: 0.25vh 0.25vw; } .ball.generic:hover { border-color: #FFF; } .ball.generic.selected { border-color: #FFF; background-color: #0e2666; opacity: 1 !important; } .ball.one { background-image: url(/img/scoreboard/pool-one.png); } .ball.two { background-image: url(/img/scoreboard/pool-two.png); } .ball.three { background-image: url(/img/scoreboard/pool-three.png); } .ball.four { background-image: url(/img/scoreboard/pool-four.png); } .ball.five { background-image: url(/img/scoreboard/pool-five.png); } .ball.six { background-image: url(/img/scoreboard/pool-six.png); } .ball.seven { background-image: url(/img/scoreboard/pool-seven.png); } .ball.eight { background-image: url(/img/scoreboard/pool-eight.png); } .ball.nine { background-image: url(/img/scoreboard/pool-nine.png); } .ball.ten { background-image: url(/img/scoreboard/pool-ten.png); } .ball.eleven { background-image: url(/img/scoreboard/pool-eleven.png); } .ball.twelve { background-image: url(/img/scoreboard/pool-twelve.png); } .ball.thirteen { background-image: url(/img/scoreboard/pool-thirteen.png); } .ball.fourteen { background-image: url(/img/scoreboard/pool-fourteen.png); } .ball.fifteen { background-image: url(/img/scoreboard/pool-fifteen.png); }  input.ball:hover { opacity: 0.9; cursor: pointer; }  .material input::placeholder { font-weight: bold; opacity: 0.5; color: #FF5F5F; }    .material .input-group { position: relative; margin: 30px auto;} .material input:invalid { box-shadow: none !important; } .material .input-group.error input, .material .input-group.error select { border-bottom: 1px solid #e22b5b; } .material .form-control { position: relative; z-index: 2; width: 100%; height: 35px; font-size: 16px; border: none; border-bottom: 1px solid rgba(14,38,102,0.54); background-color: transparent; outline: 0; color: #0e2666; } .material select.form-control { font-size: 14px; } .material .form-control + label { position: absolute; top: 8px; left: 3px; font-size: 16px; color: #467DF7; transition: all .2s ease-out; white-space: nowrap; z-index: 1; } .material .form-control.search { padding-left: 35px; background: transparent url(/img/search-black.svg) left 10px center / 16px 16px no-repeat; } .material .form-control.search + label { left: 35px; } .material .form-control:focus { outline: none; border-width: 2px; border-color: #2196F3; transition: all .2s ease-out; } .material .form-control:focus + label, .material .form-control.has-value + label, .material .form-control:valid + label { top: -15px; color: #467df7; font-size: 12px; z-index: 2;} .material .handicapEdit .form-control:valid + label { font-size: 1.75vh; } .material textarea.form-control + label, .material textarea.form-control:valid + label { top: -20px; } .material .form-control:focus + label { font-weight: 600;} .material .input-group.error .form-control + label, .material .input-group.error div.message { color: #e22b5b; } .material .form-control.has-value:not(:focus) + label, .material .form-control:valid:not(:focus) + label { color: #467DF7;} .material .form-control:invalid:not(:empty) + label { color: red; top: -15px; font-size: 12px; } .material .form-control:invalid:not(:empty) ~ .bar:before, .material .form-control:invalid:not(:empty) ~ .bar:after { background: red; } .material .form-control:disabled { color: rgba(14,38,102,0.35); } .material .form-control:disabled + label { top: -15px; font-size: 12px; } .material button { background-color: #2196F3; color: white; font-size: 14px; text-transform: uppercase; font-weight: 500; border: 1px solid #2196F3; height: 36px; padding: 0 16px; border-radius: 2px; box-shadow: 0 1px 3px #999999; } .material textarea.form-control { height: 120px; border-bottom: 1px solid rgba(14,38,102,0.54); font-family: inherit; padding: 10px; font-size: 14px; border-radius: 8px 8px 0 0; background-color: #EAEDF4; } .material textarea.form-control:disabled { background-color: #FFDFDF; } .material.dark .form-control { color: #FFF;} .material.dark .form-control option { color: #000;}   .material .bar { position: relative; display: block; } .material .bar:before, .material .bar:after { content: ''; height: 2px; width: 0; bottom: 1px; position: absolute; background: #467df7; transition: 0.4s ease all; } .material .bar:before { left: 50%; } .material .bar:after { right: 50%; } .material .desc { opacity: 0.65; font-size: 12px; } .material .form-control:focus ~ .desc { color: #0e2666; opacity: 0.9;}  .material .form-control.error { border-bottom: 1px solid #e22b5b; } .material .form-control:focus { border-color: transparent;} .material .form-control:focus ~ .bar:before, .material .form-control:focus ~ .bar:after { width: 50%; } .material .radio-related { display: flex; } .material .radio-related input { display: none; } .material .radio-related input + label { padding: 6px 30px; border: 1px solid #467df7; min-height: 36px; font-weight: 700; } .material .radio-related input:first-child + label { border-radius: 18px 0 0 18px; } .material .radio-related input:nth-last-child(2) + label { border-radius: 0 18px 18px 0; } .material .radio-related input:checked + label { background-color: #467df7; font-weight: 700; color: #FFF; }  .hamburger { position: fixed; right: 4vw; top: 3vh; width: 36px; height: 24px; padding: 0 12px; z-index: 12; } .hamburger.is-active .hamburger-inner,.hamburger.is-active .hamburger-inner:after,.hamburger.is-active .hamburger-inner:before { background-color: #fff; } .hamburger-box { position: relative; display: block; width: 20px; height: 24px; } .hamburger-inner { top: 50%; display: block; margin-top: 0px; } .hamburger-inner,.hamburger-inner:after,.hamburger-inner:before {position: absolute; width: 24px; height: 2px; transition-timing-function: ease; transition-duration: .15s; transition-property: transform; border-radius: 2px; background-color: #fff; } .hamburger-inner:after,.hamburger-inner:before { display: block; content: ""; } .hamburger-inner:before { top: -10px } .hamburger-inner:after { bottom: -10px; } .hamburger .hamburger-inner { transition-timing-function: cubic-bezier(.55,.055,.675,.19); transition-duration: 75ms; } .hamburger .hamburger-inner:before { transition: top 75ms ease .12s,opacity 75ms ease; } .hamburger .hamburger-inner:after { transition: bottom 75ms ease .12s,transform 75ms cubic-bezier(.55,.055,.675,.19); } .hamburger.is-active .hamburger-inner { transition-delay: .12s; transition-timing-function: cubic-bezier(.215,.61,.355,1); transform: rotate(45deg); } .hamburger.is-active .hamburger-inner:before { top: 0; transition: top 75ms ease,opacity 75ms ease .12s; opacity: 0; } .hamburger.is-active .hamburger-inner:after { bottom: 0; transition: bottom 75ms ease,transform 75ms cubic-bezier(.215,.61,.355,1) .12s; transform: rotate(-90deg); }      .switch { position: relative; display: inline-block; width: 39px; height: 21px; vertical-align: top; }    .switch input {display:none;}     .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(14,38,102,0.35); -webkit-transition: .4s; transition: .4s; }  .slider:before { position: absolute; content: ""; height: 17px; width: 17px; left: 2px; bottom: 2px; background-color: white; -webkit-transition: .4s; transition: .4s; }  input:checked + .slider { background-color: #7bb516; }  input:focus + .slider { box-shadow: 0 0 1px #7bb516; }  input:checked + .slider:before { -webkit-transform: translateX(18px); -ms-transform: translateX(18px); transform: translateX(18px); }    .slider.round { border-radius: 21px; }  .slider.round:before { border-radius: 50%; }      div.playing.logLevel1 div.breakline,  div.playing.logLevel2 div.breakline { display: none; }     .playing.carom #pointsLeftOnTable { display: none; } .playing.carom .actionline .foul, .playing.carom .actionline .safe, .playing.carom .actionline .scratch, .playing.carom .actionline .pass, .playing.carom .actionline .miss { display: none; } .playing.carom div.endFrame { display: none; } .playing.carom .actionline .balls { display: none; } .playing.carom .carompoint { display: block; } .playing.carom .inningInfo { display: block; width: 10vw; color: #FFF; background: #0E2666; padding: 4px; border-radius: 8px; border: 1px solid #467DF7; margin-top: 2vh; } .playing.carom .inningInfo table { width: 100%; } .playing.carom .inningInfo .inningsTitle { color: #BFD0F5; font-size: 2vh; } .playing.carom .inningInfo .inningLine .inningNumber { color: #FF9800; width: 20%; } .playing.carom .inningInfo .inningLine .inningPointsA, .playing.carom .inningInfo .inningLine .inningPointsB { font-size: 3vh; font-weight: 600; width: 40%; } .playing.snooker .caromline, .playing.snooker .actionline .scratch, .playing.snooker .actionline .turn, .playing.snooker .actionline .carompoint{ display: none; } .playing.pool .caromline { display: none; } .playing.pool .actionline .pass, .playing.pool .actionline .carompoint { display: none; } .playing.pool div.endFrame{ display: none; } .playing.pool #pointsLeftOnTable { display: none; } .playing.pool .actionline .balls input.ball { height: 6vh; width: 6vh; } .playing.pool .breakScore { display: none !important; } .playing.pool.straightpool .breakScore { display: flex !important; } .playing.pool.straightpool .actionline2.active { height: 30vh; } .playing.pool.straightpool .actionline2 input.ball { min-width: 48px; min-height: 48px; margin: 1vh 1vw; } .playing.pool.straightpool .actionline2 .straightpool-foul-ball-ballsLeft input.ball, .playing.pool.straightpool .actionline2 .straightpool-foul input.ball { margin: 0.5vh 0.5vw; }   .playing .setsInfo { min-width: 10vw; color: #FFF; background: #0E2666; padding: 4px; border-radius: 8px; border: 1px solid #467DF7; margin-top: 2vh; } .playing .setsInfo table { width: 100%; } .playing .setsInfo .setsTitle { white-space: nowrap; color: #BFD0F5; font-size: 2vh; padding: 0 8px; } .playing .setsInfo .setsTitle .setsCount { color: #FF9800; font-weight: 600; } .playing .setsInfo .setLine .setNumber { color: #FF9800; width: 20%; font-size: 2vh; } .playing .setsInfo .setLine .setScoreA, .playing .setsInfo .setLine .setScoreB { font-size: 3vh; font-weight: 600; width: 40%; } .playing .setsInfo .setLine .setScoreA.winner, .playing .setsInfo .setLine .setScoreB.winner { color: #467DF7; } .playing .setsInfo .setLine .setScoreA.loser, .playing .setsInfo .setLine .setScoreB.loser { color: #AEB5C9; } .more-menu, .personal-menu { position: fixed; top: 10vh; right: 4vw; font-size: 12px; background: #243A74; z-index: 100; min-width: 200px; box-shadow: 6px 12px 24px rgba(14, 38, 102, 0.3); padding: 10px 0; border: 1px solid #0e2666; } .selector { border-radius: 8px; } .selector .option a { text-decoration: none; color: #FFF; } .selector .option a:hover { color: #FFF; text-decoration: none;} .selector .option a:active, .selector .option a:link, .selector .option a:focus, .selector .option a:visited { color: #FFF; text-decoration: none;}  .selector .option { padding: 1vh 2vw; font-size: 3vh; text-indent: 3vw; text-align: left; color: #FFF; } .selector .option.penalty { background: transparent url(/img/forfeit-blue.svg) left 11px center / 3vw no-repeat; } .selector .option.shotclock-edit { background: transparent url(/img/scoreboard/shotclock-reset-blue.svg) left 8px center / 3vw no-repeat; } .selector .option.old-scoreboard { background: transparent url(/img/scoreboard/scoreboard-icon-blue.svg) left 8px center / 3vw no-repeat; } .selector .option.profilelink { background: transparent url(/img/menu/profile.svg) left 16px center / 2vw no-repeat; } .selector .option.challengelink { background: transparent url(/img/challenge-icon-head-white.svg) left 20px center / 1.5vw no-repeat; } .selector .option.tournamentlink { background: transparent url(/img/pro/tournaments-white.svg) left 16px center / 2vw no-repeat; } .selector .option.old-scoreboard a { display: block; text-decoration: none; color: inherit; } .selector .option:hover { background-color: rgba(59,176,255,0.2); cursor: pointer; } .selector .option:first-child:hover { border-radius: 4px 4px 0 0; } .selector .option:last-child:hover { border-radius: 0 0 4px 4px; }  table.standard { border-spacing: 0; border-collapse: collapse; } table.standard td { padding: 8px; } table.standard.search tr.player .badge { display: inline-block; height: 16px; width: 12px; background: transparent url(/img/badge-orange.svg) left center / 10px no-repeat; vertical-align: middle; } table.standard.search tr.player .claimed { display: inline-block; height: 16px; width: 12px; background: transparent url(/img/claim.svg) left center / 10px no-repeat; vertical-align: middle; } table.standard.search tr.selected td.remove { min-width: 40px; background: transparent url(/img/delete.svg) center center / 28px no-repeat; } table.standard.search tr.selected td.addStatus { min-width: 45px; opacity: 1; background: transparent url(/img/checked-green.svg) center center / 24px no-repeat; transform: rotate(0deg); transition: opacity 0.5s ease-in, transform 0.6s ease-out; } table td.type.Player { display: none; } table.standard.search td.addStatus { padding-right: 10px; opacity: 0.5; transform: rotate(-360deg); } div.searchResults { overflow: hidden; margin-bottom: 16px;} .ownerIcons { position: relative; } .ownerIcons img.owner { height: 41px; } .ownerIcons img.flag { position: absolute; bottom: 0; right: 0px; width: 16px;} .bold { font-weight: 600; } .smaller { font-size: smaller; } 
@media (orientation: portrait) {    div.playing .menu-icons { top: 1vh; z-index: 101;}  div.playing div.endBtns div { max-height: 9vw; max-width: 9vw; }  div.playing div.header { justify-content: flex-end; }  div.playing div.tournament { white-space: normal; line-height: 1.2em; overflow: visible;}  div.playing div.scoreline div.btns { height: calc(100vh - 32vh - 16vw); }  div.playing div.score { font-size: 16vw; line-height: 16vw; }  div.playing.straightpool div.score { font-size: 10vh; line-height: 10vh; }  div.playing div.imgline { height: 8vh; }  div.playing div.scoremenu { top: 10vh; }  div.playing div.playerline { font-size: 4vw; }  div.playing div.tableInfo { font-size: 4vw;}  div.playing div.matchInfo { font-size: 4vw; padding: 0 8px; }  div.playing div.matchInfo div.raceTo { font-size: 7vw; line-height: normal;}  div.playing div.runoutdesc { font-size: 4vw; }  div.playing div.minus { margin-top: 4vw; }  div.playing div.centersection { left: calc(50% - 12vw); width: 24vw; }  div.playing .btn-std { flex-grow: 2; }  div.playing div.actionline .undo,  div.playing div.actionline .foul,  div.playing div.actionline .safe,  div.playing div.actionline .miss,  div.playing div.actionline .turn { flex-basis: 12vw; }  div.playing div.actionline .undo,  div.playing div.actionline .frame,  div.playing div.actionline .turn,  div.playing div.actionline .rack,  div.playing div.actionline .foul,  div.playing div.actionline .runout { background-size: 10vw; background-position: center center; font-size: 1.3vh; flex-basis: 12vw; overflow: hidden; }  div.playing div.matchInfo .infoline { padding: 0; }  div.playing div.matchInfo div.matchScoreA, div.playing div.matchInfo div.matchScoreB { font-size: 4vh; }  div.playing input.ball { margin: 1vh 1.5vw; height: 4vh; width: 4vh; font-size: 2vh; }  div.playing div.breakline .balls .ball { height: 2vh; width: 2vh; font-size: 1vh; }  div.playing div.actionline > div { background-position: center !important; font-size: 1.3vh !important; }  div.playing div.actionline2 .title { font-size: 2vh; top: 1vh; }  .finishFrameButton { bottom: 3vh; }  div.playing div.actionline div.carom-buttons div { flex-basis: 12vw; font-size: 1vh; background-size: 3vh; }  div.playing .imgline .profile { display: none; }  div.playing.positionReverse .contentPlayerB .playerline { padding: 0; }  div.playing .handicap { font-size: 2vw; }  div.playing .breaker { font-size: 2vw; }  div.playing .breaker::before { height: 2.5vh; width: 2.5vh; }  div.playing div.caromline, div.playing div.breakline { font-size: 2vw; }  div.playing div.breakline .score { font-size: 4vw; }  div.playing div.caromline .number { font-size: 4vw; }  div.playing div.contentPlayerA div.caromline { padding-right: 4vw; }  div.playing div.contentPlayerB div.caromline { padding-left: 4vw; }  div.playing.carom .inningInfo { width: 20vw; }  div.playing.carom .inningInfo .inningLine .inningNumber { font-size: 3vw; }  div.playing.carom .inningInfo .inningLine .inningPointsA, div.playing.carom .inningInfo .inningLine .inningPointsB { font-size: 5vw; }   div.waiting { justify-content: flex-start; padding-top: 1vh; overflow-y: auto; padding-bottom: 4vh;}  div.waiting .personal { width: 92vw; }  div.waiting div.center-section { flex-direction: column; padding: 0 2vw; }  div.waiting div.center-section > div { width: 90vw; margin: 8px 0; }  div.playing.straightpool .actionline .turn.yellow { margin-left: 0; }  div.waiting .oldScoreboardLink { bottom: 10vh; left: 0; width: 100vw; font-size: 1.5vh; color: #FFF; text-align: center;} }
@media (orientation: landscape) {  #mainMenu { max-width: 45%; right: 0; } }