.cs-match { }
.cs-tournament.cs-tournament-bracket .cs-match { display: grid; grid-template-columns: 1fr 8fr 4fr 8fr 1fr 1fr; grid-template-rows: auto; gap: 4px; /*grid-template-areas: "A B C"; */}
.cs-tournament.cs-tournament-bracket .cs-match-column { display: flex; height: 100%; align-items: center; justify-content: center; }
.cs-tournament.cs-tournament-bracket .cs-match-column--separator { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cs-tournament.cs-tournament-bracket .cs-match-column--matchno { display: flex; align-items: center; justify-content: center; font-size: smaller; color: #808CAC; text-align: center; }
.cs-tournament.cs-tournament-bracket .cs-match-column--matchno > div { border-radius: 4px;  background: #808CAC88; color: #F3F3F3; padding: 4px;}
.cs-tournament.cs-tournament-bracket .cs-match-column.cs-match-column--time { justify-content: center; }
.cs-tournament.cs-tournament-bracket .cs-match-column--table .cs-table{ display: inline-block; padding: 2px 4px; border-radius: 4px; background-color: #808CAC88; color: #FFF; justify-content: center; }
/*.cs-tournament.cs-tournament-bracket .cs-match-column--time { font-size: x-small; }*/
.cs-hidden { display: none !important; }
.cs-tournament-buttons { margin: 8px 0; }
table.cs-tournament, table.cs-tournament table { border-collapse: collapse; }
.cs-tournament span.bestOf{ display: none; }
.cs-tournament .cs-menu:after { content: "-"; }
.cs-tournament.cs-team .cs-match-details-btn { min-width: 22px; height: 16px; background: transparent url(https://cuescore.com/img/arrow-down-white.svg) center center / 12px no-repeat; }
.cs-tournament .cs-match { transition: background-color 1000ms linear; position: relative; }
.cs-tournament .cs-match td { padding: 0px;} 
.cs-tournament .cs-match.waiting { background-color: rgba(64,103,209,0.10); color: #000000; }
.cs-tournament .cs-match.waiting:nth-child(even) { background-color: rgba(64,103,209,0.15); }
.cs-tournament .cs-match.playing { background-color: #467DF7; color: #FFFFFF; }
.cs-tournament .cs-match.playing:nth-child(even) { background-color: #4074E8; }
.cs-tournament .cs-match.finished { background-color: #0e2666; color: #FFFFFF; }
.cs-tournament .cs-match.finished:nth-child(even) { background-color: #0e2666f0; }

.cs-tournament .cs-match .cs-score { display: flex; white-space: nowrap; }
/*.cs-tournament .cs-match .cs-score--A { text-align: right; }
.cs-tournament .cs-match .cs-score--B { text-align: left; }*/
.cs-tournament .cs-match .cs-scoreA,
.cs-tournament .cs-match .cs-scoreB { transition: background-color 1000ms linear; cursor:pointer; padding: 0 8px; }
.cs-tournament .cs-match .cs-scoreA.cs-score-changed,
.cs-tournament .cs-match .cs-scoreB.cs-score-changed { background-color: #FF9800; }
.cs-tournament .cs-match.finished .cs-score { color: #808CAC; }
.cs-tournament .cs-match .cs-separator-col { cursor: pointer;}
.cs-tournament .cs-match .cs-winner { color: #3BB0FF; }
.cs-tournament .cs-match .cs-loser { color: #808CAC; }
.cs-tournament .cs-match .cs-loser.cs-participant-highlight { background-color: #FF5F5F; }
.cs-tournament .cs-match .cs-participant { cursor: pointer; height: 100%; width: 100%; }
.cs-tournament .cs-match .cs-participant-name { display: flex; flex-direction: column; flex-direction: column-reverse; }
.cs-tournament .cs-match .cs-participant-firstname { } 
.cs-tournament .cs-match .cs-participant-lastname { text-transform: uppercase; }
.cs-tournament .cs-match .cs-info { font-size: smaller; }
.cs-tournament .cs-match .cs-matchno { white-space: nowrap; color: #808CAC; }
.cs-tournament .cs-match .cs-videolink {display: inline-block; width: 12px; margin: 0; padding: 0; margin-right: 4px; background: transparent url(https://cuescore.com/img/video-white.svg) center center / contain no-repeat;}
.cs-tournament .cs-match .cs-starttime{ display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: x-small; color: #808CAC; }
.cs-tournament .cs-match .cs-starttime .cs-starttime--string { text-align: center;}
.cs-tournament .cs-match .cs-matchno { position: absolute; left: 0; top: 0; background: #51628F; border-radius: 0 0px 4px 0; padding: 0px 4px; color: #FFF; }
.cs-tournament .cs-match.waiting .cs-starttime { color: #808CAC; }
.cs-tournament .cs-match.playing .cs-starttime { color: #FFF; }
.cs-tournament .cs-match .cs-table { color: #808CAC; font-size: smaller; white-space: nowrap; border-collapse: collapse; }
.cs-tournament .cs-match.cs-teams .cs-participant { /*display: table-cell; */}
.cs-tournament .cs-match.cs-teams .cs-participant-lastname { display: none;}
.cs-tournament .cs-match .cs-handicap { color: #AEB5C9; margin-left: 4px; }

.cs-tournament .cs-match.walkover { display: none; }
.cs-tournament .cs-match.cs-match-highlight { background-color: #2BBB98 !important; }
.cs-tournament .cs-match .cs-participant-highlight { background-color: #2BBB98; color: #212529; }
.cs-tournament .cs-match .cs-participant-highlight .cs-participant-name { color: #0E2666;}
.cs-tournament .cs-poweredByCueScore { float: right; color: #FFF; text-shadow: 2px 2px #000; }
.cs-tournament .cs-match .cs-curSetScore { color: #CCC; }
.cs-tournament .cs-match .cs-participant { display: flex;  align-items: center;}
.cs-tournament .cs-match .cs-participant-img { position: relative;  margin-right: 8px;}
.cs-tournament .cs-match .cs-participant-img img{ height: 44px; }
.cs-tournament .cs-match .cs-participant-flag { position: absolute; right: -2px; bottom: -2px; z-index: 1; }
.cs-tournament .cs-match .cs-participant-flag img { width: 16px; height: 12px; }

.cs-tournament .cs-match .cs-match-details-btn { min-width: 22px; height: 16px; background: transparent url(https://cuescore.com/img/arrow-down-white.svg) center center / 12px no-repeat; } /*width: 20px; height: 20px; background: red;*/
.cs-tournament .cs-match.waiting .cs-match-details-btn { background-image: url(https://cuescore.com/img/arrow-down-dark.svg) }
.cs-standings .cs-standings-table { width: 100%; }
.cs-standings .cs-standings-table th { text-transform: uppercase; }

.cs-participant-profile {}
.cs-participant-profile .cs-participant-profileImg { position: relative; width: 100px; margin: auto; margin-top: 8px; }
.cs-participant-profile .cs-participant-profileImg img.cs-participant-profileImage {max-width: 100px; filter: drop-shadow(3px 6px 12px rgba(0,0,0,.2)); }
.cs-participant-profile .cs-participant-profileImg img.cs-participant-flag { position: absolute; bottom: 4px; left: calc(50% + 24px); width: 32px; }
.cs-participant-profile .cs-participant-name { font-size: initial; font-weight: 600; margin-bottom: 4px; text-align: center; }
.cs-participant-profile .cs-participant-nationality { text-align: center; font-size: smaller; color: #808CAC; }
.cs-participant-profile .cs-participant-represents { text-align: center; font-size: smaller; color: #808CAC; }
.cs-participant-profilelink { content: ""; position: absolute; right: -44px; top: 44px; width: 36px; height: 36px; background: #EAEDF4 url(https://cuescore.com/img/link-blue.svg) center center / 16px no-repeat; border-radius: 18px; }
.cs-matchdialog-participantB .cs-participant-profilelink { left: -44px; right: unset; }
.cs-participant-profile .cs-participant-matches h3 { margin-top: 16px; font-size: initial; font-weight: 600; color: #0E2666; margin-bottom: 4px; text-align: center; }

.cs-tournament .cs-match .cs-opponent{ display: flex;  align-items: center;}
.cs-tournament .cs-match .cs-opponent-img { position: relative;  margin-right: 8px;}
.cs-tournament .cs-match .cs-opponent-img img{ height: 48px; }
.cs-tournament .cs-match .cs-opponent-flag { position: absolute; right: 0; bottom: 0; z-index: 1; }
.cs-tournament .cs-match .cs-opponent-flag img { width: 21px; height: 16px; }

.cs-participant-opponents { width: 100%; }
.cs-matchdialog-opponent td { cursor: pointer; }
.cs-matchdialog-opponent-profile { display: flex; align-items:center; cursor: pointer; }
.cs-matchdialog-opponent .cs-opponent-profileImg { position: relative; width: 46px; margin-right: 8px; }
.cs-matchdialog-opponent .cs-opponent-profileImg img.cs-opponent-profileImage {max-height: 45px; filter: drop-shadow(3px 6px 12px rgba(0,0,0,.2)); }
.cs-matchdialog-opponent .cs-opponent-profileImg img.cs-opponent-flag { position: absolute; bottom: 4px; right: 0; width: 16px; }
.cs-matchdialog-opponent .cs-opponent-name { font-size: smaller; font-weight: normal; margin-bottom: 4px; text-align: left; padding-right: 16px;  }
.cs-matchdialog-opponent .cs-opponent-nationality { text-align: center;  }
.cs-matchdialog-opponent .cs-opponent-matches { margin-top: 16px; font-size: initial; font-weight: 600; margin-bottom: 4px; text-align: center; }
.cs-matchdialog-opponent .cs-matchdialog-scores { white-space: nowrap; color: #808CAC; font-weight: 600; text-align: center; }
.cs-matchdialog-opponent.cs-match-waiting { position: relative;}
.cs-matchdialog-opponent.cs-match-waiting::after{ content: ''; position: absolute; top: calc(50% - 10px); width: 20px; height: 20px; background: transparent url(https://cuescore.com/img/calendar-light.svg) center center /contain no-repeat; }
.cs-matchdialog-opponent.cs-match-playing { position: relative;}
.cs-matchdialog-opponent.cs-match-playing::after{ content: ''; position: absolute; top: calc(50% - 10px); width: 20px; height: 20px; background: transparent url(https://cuescore.com/img/live-icon.gif) center center  no-repeat; }
.cs-match-winner, .cs-set-winner { color: #467DF7; }
.cs-match-loser, .cs-set-loser { color: #FF5F5F; }
.cs-matchdialog-opponent .cs-opponent-roundname { font-size: x-small; color: #808CAC; }

.cs-matchdialog:nth-child(odd) {  }
.cs-matchdialog::backdrop { background-color: #FFFFFF; } /** For dialogs in fullscreen **/
.cs-matchdialog-footer { display: none; /*display: flex;*/ margin-top: 16px; border-radius: 18px;  justify-content: center; align-items: center; padding: 8px 0; background-color: #467DF7; border-top: 1px solid #E7E9EC; }
a.cs-matchdialog-footer-matchpagelink { color: #FFF; }

.cs-matchdialog.cs-match-waiting .cs-matchdialog-midsection .cs-matchdialog-time { background: transparent url(https://cuescore.com/img/calendar-light.svg) left center /18px no-repeat; text-indent: 24px; }
.cs-matchdialog-participants { display: flex; justify-content: space-between; align-items: top; text-align: center;}
.cs-matchdialog-participants .cs-matchdialog-participantA, 
.cs-matchdialog-participants .cs-matchdialog-participantB { flex-basis: 40%; cursor: pointer; }
.cs-matchdialog-participants .cs-matchdialog-midsection { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 32px; }
.cs-matchdialog-participants .cs-matchdialog-midsection .cs-matchdialog-time { padding: 4px 0; font-size: smaller; color: #808CAC; white-space: nowrap; }
.cs-matchdialog-participants .cs-matchdialog-midsection .cs-matchdialog-matchlength { padding: 4px 0; font-size: smaller; color: #808CAC; text-indent: 20px; background: transparent url(https://cuescore.com/img/clock-dark.svg) left center/16px no-repeat; }
.cs-matchdialog-participants .cs-matchdialog-midsection .cs-matchdialog-videolink a.cs-videolink { display: inline-block; margin: 4px 0; height: 36px; width: 36px; background: transparent url(https://cuescore.com/img/video-blue.svg) left center/cover no-repeat; }
.cs-matchdialog-participants .cs-matchdialog-midsection .cs-matchdialog-table { padding: 4px 0; font-size: smaller; color: #808CAC; }
.cs-matchdialog-participants .cs-matchdialog-midsection .cs-matchdialog-matchno { padding: 4px 0; font-size: smaller; color: #808CAC; }
.cs-matchdialog-participants .cs-matchdialog-scores { display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 600;  flex-basis: 20%; margin: 0 32px; }
.cs-matchdialog-participants .cs-matchdialog-scores .cs-winner { color: #467DF7; }
.cs-matchdialog-participants .cs-matchdialog-scores .cs-loser { color: #808CAC; }
.cs-matchdialog-participants .cs-matchdialog-scores-separator { padding: 0 4px; }
.cs-matchdialog-participants .cs-participant-profileImg { position: relative; width: 100px; height: 115px; margin: auto; margin-top: 8px; }
.cs-matchdialog-participants .cs-participant-profileImg img.cs-participant-profileImage {max-width: 100px; filter: drop-shadow(3px 6px 12px rgba(0,0,0,.2)); }
.cs-matchdialog-participants .cs-participant-profileImg img.cs-participant-flag { position: absolute; bottom: 4px; left: calc(50% + 24px); width: 32px; }
.cs-matchdialog-participants .cs-participant-name { font-size: initial; font-weight: 600; margin-bottom: 4px; text-align: center; }
.cs-matchdialog-participants .cs-participant-represents { font-size: smaller; color: #808CAC; }
.cs-matchdialog-participants .cs-participant-nationality { font-size: smaller; color: #808CAC;  }
.cs-matchdialog-participants .cs-participant-handicap { font-size: smaller; color: #808CAC; }
.cs-matchdialog-participants .cs-participant-matches { margin-top: 16px; font-size: 16px; margin-bottom: 4px; text-align: center; }

.cs-search-participant { display: flex; align-items: center; margin: 2px 0;}
.cs-search-participant:hover { cursor: pointer; background-color: #F5FBFF; }
.cs-search-participant .cs-search-participant-profileImg { position: relative; width: 46px; height: 45px; margin-right: 8px;}
.cs-search-participant .cs-search-participant-profileImg img.cs-participant-profileImage {max-height: 45px; filter: drop-shadow(3px 6px 12px rgba(0,0,0,.2)); }
.cs-search-participant .cs-search-participant-profileImg img.cs-participant-flag { position: absolute; bottom: 0; left: calc(50% + 8px); width: 16px; }
.cs-search-participant .cs-search-participant-name { font-size: initial; font-weight: 600; text-align: center; }

/* Sets information */
.cs-bestOfSets { display: flex; justify-content: center; flex-direction: column; align-items: center; }
.cs-bestOfSets h3 { margin: 0; font-weight: 500; }
.cs-bestOfSets .cs-match-set { display: flex; align-items: center; justify-content: space-around; text-align: center; width: 100%;}
.cs-bestOfSets .cs-match-set div {  }
.cs-bestOfSets .cs-match-set .cs-match-set-number { font-size: smaller; color: #808CAC; }

.cs-matchdialog .cs-match-individual { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.cs-matchdialog .cs-match-individual .cs-participantA, 
.cs-matchdialog .cs-match-individual .cs-participantB { flex-basis: 40%; cursor: pointer; }
.cs-matchdialog .cs-match-individual .cs-score { display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600;}
.cs-tournament-buttons { display: flex; justify-content: space-around; }
/*.cs-tournament-buttons *:hover { opacity: 0.8 }*/
.cs-button-flowchart { display: inline-block; background: #0E2666 url(https://cuescore.com/img/brackets-icon-white.svg) center center no-repeat; width: 48px; height: 36px; border-radius: 4px; }
.cs-button-toggle-finishedMatches { display: inline-block; background: #0E2666 url(https://cuescore.com/img/eye-white.svg) center center no-repeat; width: 48px; height: 36px; border-radius: 4px; }
.cs-button-toggle-finishedMatches--off { background-image: url(https://cuescore.com/img/eye-closed-white.svg); }

.cs-button-toggle-finishedRounds { display: flex; justify-content: center; align-items: center; padding: 0 16px; height: 42px; border-radius: 21px; background: #E7E9EC; }
.cs-button-toggle-finishedRounds .icon { background: transparent url(https://cuescore.com/img/eye-dark.svg) center center no-repeat; width: 32px; height: 42px; }
.cs-button-toggle-finishedRounds--on { color: #FFF; background: #0E2666; }
.cs-button-toggle-finishedRounds--on .icon { background-image: url(https://cuescore.com/img/eye-white.svg); }

.cs-button-toggle-compactmode { display: flex; justify-content: center; align-items: center; padding: 0 16px; height: 42px; border-radius: 21px; background: #E7E9EC;}
.cs-button-toggle-compactmode .icon { background: transparent url(https://cuescore.com/img/list-dark.svg) center center no-repeat; width: 32px; height: 42px; }
.cs-button-toggle-compactmode--on { color: #FFF; background: #0E2666; }
.cs-button-toggle-compactmode--on .icon { background: transparent url(https://cuescore.com/img/list-white.svg) center center no-repeat; }

.cs-button-toggle-more { display: flex; justify-content: center; align-items: center; padding: 0 16px; height: 42px; width: 42px; border-radius: 21px; background: #E7E9EC url(https://cuescore.com/img/options-blue.svg) center center no-repeat; position: relative; z-index: 2;}
.cs-button-toggle-more .cs-button-content { display: none; background: #E8E9EC; padding: 8px; padding-right: 16px; box-shadow: 3px 3px 6px rgba(14,38,102,0.35); white-space: nowrap; border-radius: 4px; }
.cs-button-toggle-more--on {  }
.cs-button-toggle-more--on .cs-button-content { display: block; position: absolute; top: 42px; right: 0; }
.cs-button-toggle-more .cs-button-content * {  display: flex; align-items: center;  height: 36px; text-align: left; text-indent: 32px; color: inherit; text-decoration: none !important; }
.cs-button-toggle-more .cs-button-content .cs-flowchart-link {background: transparent url(https://cuescore.com/img/brackets-icon-dark.svg) left center no-repeat; }
.cs-button-toggle-more .cs-button-content .cs-participants-searchlink { background: transparent url(https://cuescore.com/img/search-black.svg) left center/20px no-repeat; }
.cs-button-toggle-more .cs-button-content .cs-participants-link {background: transparent url(https://cuescore.com/img/pro/members-dark.svg) left center no-repeat; }
.cs-button-toggle-more .cs-button-content .cs-comments-link {background: transparent url(https://cuescore.com/img/comment-dark.svg) left center /24px no-repeat; }
/** Flowchart */
.cs-tournament.cs-flowchart .cs-round-header { border-top: 1px solid #0e2666; border-bottom: 1px solid #0e2666; padding: 8px; }
.cs-tournament.cs-flowchart .cs-round-header.cs-round-header--spacer { border: 0; padding: 8px 0; }
.cs-tournament.cs-flowchart .cs-round_separators { display: flex; height: 100%; flex-direction: column; margin: 0;justify-content: space-between; }
.cs-tournament.cs-flowchart .cs-round_separatorContainer { flex-grow: 1; }
.cs-tournament.cs-flowchart .cs-round_separator { position: relative; width: 16px; height: 100%; }
.cs-tournament.cs-flowchart .cs-round_separator:before { content:" "; height: 50%; width: 8px; display: block; position: absolute; top: 25%; left: 0; left: 0; border-top: 2px solid #0E2666; border-bottom: 2px solid #0E2666; border-right: 2px solid #0E2666; border-radius: 0 8px 8px 0; }
.cs-tournament.cs-flowchart .cs-round_separator:after { content:" "; height: 2px; width: 8px; background: #0E2666; display: block; position: absolute; top: 50%; left: 8px; }
.cs-tournament.cs-flowchart .cs-round_separator.cs-round_separator--left:before { content:" "; height: 50%; width: 8px; display: block; position: absolute; top: 25%; left: unset; right: 0; border-top: 2px solid #0E2666; border-bottom: 2px solid #0E2666; border-left: 2px solid #0E2666; border-right: 0; border-radius: 8px 0 0 8px; }
.cs-tournament.cs-flowchart .cs-round_separator.cs-round_separator--left:after { content:" "; height: 2px; width: 8px; background: #0E2666; display: block; position: absolute; top: 50%; left: 0px; }
.cs-tournament.cs-flowchart .cs-round_separators.cs-round-separator-same .cs-round_separator:before { display: none; }
.cs-tournament.cs-flowchart .cs-round_separators.cs-round-separator-same .cs-round_separator:after { width: 16px; left: 0; }

.cs-tournament.cs-flowchart .cs-match .cs-participant { width: 100%; height: 100%; }
.cs-tournament.cs-flowchart .cs-match .cs-participant-name{display: block;}
.cs-tournament.cs-flowchart .cs-match .cs-participant-img { margin-left: 4px; }
.cs-tournament.cs-flowchart .cs-match .cs-participant-img img { height: 26px; }
.cs-tournament.cs-flowchart .cs-match .cs-participant-flag img { width: 16px; height: 12px; }

/** Compact mode, hide/change some contents.. */
.cs-tournament.cs-tournament--compact { }
.cs-tournament.cs-tournament--compact .cs-match-column--A,
.cs-tournament.cs-tournament--compact .cs-match-column--B { justify-content: flex-start; }
/*.cs-tournament.cs-tournament--compact .cs-match .cs-matchno,*/
.cs-tournament.cs-tournament--compact .cs-match .cs-info,
.cs-tournament.cs-tournament--compact .cs-match .cs-participant .cs-participant-img > img { display: none; }
.cs-tournament.cs-tournament--compact .cs-match .cs-participant { flex-direction: row; text-align: left; padding: 4px; height: 100%;}
.cs-tournament.cs-tournament--compact .cs-match .cs-participant-flag { position: static; }
.cs-tournament.cs-tournament--compact .cs-match .cs-scoreA,
.cs-tournament.cs-tournament--compact .cs-match .cs-scoreB { font-size: 20px; }
.cs-tournament.cs-tournament--compact .cs-match .cs-participant-name { text-align: left; font-size: smaller;}
.cs-tournament.cs-tournament--compact .cs-match .cs-starttime--string { display: none; }

/** Modal Loader */
#cs-modal-loader .cs-modal-background { position: fixed; top: 0; left: 0; width: 100%; height: 0%; background: rgba(14, 38, 102, 0.5); display: grid; place-items: center; /*transition: all 0.3s ease-in;*/ visibility: hidden; z-index: -10; }
#cs-modal-loader .cs-open-modal { visibility: visible; z-index: 10; height: 100%; }
#cs-modal-loader .cs-modal-content { background: #FFF; border-radius: 8px; max-height: calc(100% - 100px); max-width: 960px; min-width: 250px; min-height: 100px; padding: 10px 30px 20px; box-shadow: 0px 0px 16px rgba(14, 38, 102, 0.5); position: relative; overflow-y: auto; }
#cs-modal-loader .cs-modal-background.cs-modal-background--top { padding-top: 100px; place-items: start center; }
#cs-modal-loader .cs-modal-close-btn { position: absolute; right: 8px; top: 8px; width: 16px; height: 16px; background: transparent url(https://cuescore.com/img/close-white.svg) center /12px no-repeat; cursor: pointer;}
/** END ModalLoader */

/** Tooltip */
.cs-tooltip { position:relative; border-bottom:1px dashed #000; }
.cs-tooltip--noBorder { border-bottom: none !important; }
.cs-tooltip:before { content: attr(title); white-space: nowrap; text-transform:none; position: absolute; left:50%; transform:translateX(-50%); top:-43px; padding:8px; border-radius:4px; background:#000; font-size: small !important; color: #fff; text-align:center; z-index: 1; display: none; }
.cs-tooltip.cs-tooltip--right:before {left: 100%; transform: translateX(-90%); }
.cs-tooltip.cs-tooltip--left:before {left: 0; transform: translateX(-10%); }
.cs-tooltip:hover:before { display: block;}
.cs-tooltip:after { content: ""; position:absolute; left:50%; margin-top:-5px; top:-5px; transform:translateX(-50%); border:10px solid #000; border-color: black transparent transparent transparent ; display: none; }
.cs-tooltip:hover:after { display: block; }

/** Throbber loader */
/** <div class="cs-lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div> */
.cs-lds-roller { display: inline-block; position: relative; width: 80px; height: 80px; }
.cs-lds-roller div { animation: cs-lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; transform-origin: 40px 40px; }
.cs-lds-roller div:after { content: " "; display: block; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #0E2666; margin: -4px 0 0 -4px; }
.cs-lds-roller div:nth-child(1) { animation-delay: -0.036s; }
.cs-lds-roller div:nth-child(1):after { top: 63px; left: 63px; }
.cs-lds-roller div:nth-child(2) { animation-delay: -0.072s; }
.cs-lds-roller div:nth-child(2):after { top: 68px; left: 56px; }
.cs-lds-roller div:nth-child(3) { animation-delay: -0.108s; }
.cs-lds-roller div:nth-child(3):after { top: 71px; left: 48px; }
.cs-lds-roller div:nth-child(4) { animation-delay: -0.144s; }
.cs-lds-roller div:nth-child(4):after { top: 72px; left: 40px; }
.cs-lds-roller div:nth-child(5) { animation-delay: -0.18s; }
.cs-lds-roller div:nth-child(5):after { top: 71px; left: 32px; }
.cs-lds-roller div:nth-child(6) { animation-delay: -0.216s; }
.cs-lds-roller div:nth-child(6):after { top: 68px; left: 24px; }
.cs-lds-roller div:nth-child(7) { animation-delay: -0.252s; }
.cs-lds-roller div:nth-child(7):after { top: 63px; left: 17px; }
.cs-lds-roller div:nth-child(8) { animation-delay: -0.288s; }
.cs-lds-roller div:nth-child(8):after { top: 56px; left: 12px; background: #FF9800;}
@keyframes cs-lds-roller { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
/** END Throbber loader */

/**
 * Material design for input elements etc.
 */
 .cs-material {}
 .cs-material .input-group { position: relative; margin: 30px auto; }
.cs-material input:invalid { box-shadow: none !important; }
.cs-material .input-group.error input,
.cs-material .input-group.error select { border-bottom: 1px solid #e22b5b; }
.cs-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; }
.cs-material .form-control::placeholder { color: #AEB5C9; }
.cs-material select.form-control { font-size: 14px; }
.cs-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; }
.cs-material .form-control.search { padding-left: 35px; }
.cs-material .form-control.search + label { left: 35px; }
.cs-material .form-control:focus { outline: none; border-width: 2px; border-color: #2196F3; transition: all .2s ease-out; }
.cs-material .form-control:focus + label, 
.cs-material .form-control.has-value + label,
.cs-material .form-control:valid + label,
.cs-material .form-control[type='date'] + label,
.cs-material .form-control[type='time'] + label { top: -15px; color: #467df7; font-size: 12px; }
.cs-material textarea.form-control + label, .cs-material textarea.form-control:valid + label { top: -20px; }
.cs-material .form-control:focus + label { font-weight: 600; }
.cs-material .input-group.error .form-control + label,
.cs-material .input-group.error div.message { color: #e22b5b; }
.cs-material .form-control.has-value:not(:focus) + label,
.cs-material .form-control:valid:not(:focus) + label { color: #467DF7; }
.cs-material .form-control:invalid:not(:empty) + label { color: red; top: -15px; font-size: 12px; }
.cs-material .form-control:invalid:not(:empty) ~ .bar:before,
.cs-material .form-control:invalid:not(:empty) ~ .bar:after { background: red; }
.cs-material .form-control:disabled { color: rgba(14,38,102,0.35); }
.cs-material .form-control:disabled + label { top: -15px; font-size: 12px; }
.cs-material input.form-control:read-only { color: rgba(14,38,102,0.6); }
.cs-material input.form-control:read-only + label { top: -15px; font-size: 12px; }
.cs-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; }
.cs-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; }
.cs-material textarea.form-control:disabled { background-color: #FFDFDF; }
.cs-material.dark .form-control { color: #FFF; }
.cs-material.dark .form-control option { color: #000; }

/** animated bottom bar */
.cs-material .bar { position: relative; display: block; }
.cs-material .bar:before,
.cs-material .bar:after { content: ''; height: 2px; width: 0; bottom: 1px; position: absolute; background: #467df7; transition: 0.4s ease all; }
.cs-material .bar:before { left: 50%; }
.cs-material .bar:after { right: 50%;  }
.cs-material .desc { opacity: 0.65; font-size: 12px; }
.cs-material .form-control:focus ~ .desc { color: #0e2666; opacity: 0.9;}
/** error in form input field, the line below the input should be in error color */
.cs-material .form-control.error { border-bottom: 1px solid #e22b5b; }  
.cs-material .form-control:focus { border-color: transparent; }
.cs-material .form-control:focus ~ .bar:before,
.cs-material .form-control:focus ~ .bar:after { width: 50%; }

.cs-material .radio-related { display: flex; }
.cs-material .radio-related input { display: none; }
.cs-material .radio-related input + label { padding: 6px 30px; border: 1px solid #467df7; min-height: 36px; }
.cs-material .radio-related input:first-child + label { border-radius: 18px 0 0 18px; }
.cs-material .radio-related input:nth-last-child(2) + label { border-radius: 0 18px 18px 0; }
.cs-material .radio-related input:checked + label { background-color: #467df7; font-weight: 700; color: #FFF; } 

@media only screen and (max-width: 960px) {
  #cs-modal-loader .cs-modal-content { max-width: 98vw; }
  .cs-tournament .cs-match .cs-starttime .cs-starttime--string { display: none; }
}