@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}

@media not print
{    
    img.print-header {
        display: none !important;
    }
}

img {
    width: auto;
    height: auto;
}

img.print-header {
    width: 200px;
}

.banner-text {
    margin-top: 30px;
}

.playlist-actions span{
    margin: 0 4px;
}

span.disabled {
    color: #BBBBBB;
}

div.player-list-team-header {
    margin-bottom: 20px;
}

table#player-list tr.disabled:hover > td {
    background-color: #FFFFFF;
}
table.rostertable {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}


select.season-selector {
    margin-top: 17px;
    margin-left: 40px;
}

#success-class {
    color: #228a00;
    padding-left: 311px;
    padding-right: 15px;
    padding-bottom: 15px;
}

#error-class {

    color: #8B0000;
    padding-left: 311px;
    padding-right: 15px;
    padding-bottom: 15px;

}


table#player-list tr.disabled td {
    color: #CCCCCC;
}

table#player-list tr.disabled img {
    opacity: 0.2;
}

.table-hover tbody tr:hover:not(.disabled) > td {
  cursor: pointer
}

td.truncate {
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    max-width: 64px;
}

.metrics-table>thead>tr:not(:last-child)>th {
    border-bottom: none;
}

.metrics-table>tbody>tr>td, .metrics-table>thead>tr>th {
    border-top: none;
    vertical-align: middle;
}

.metrics-table thead  {
    font-size: 10px;
}

.metrics-table tbody {
    font-size: 10px;
}

.metrics-table tr.subheader>td {
    font-weight: bold;
}

.metrics-table>tbody>tr.end-of-category>td, .metrics-table td.end-of-category {
    border-bottom: 2px solid #dddddd;
}

.metrics-table td.shade-column, .metrics-table th.shade-column {
    background-color: #DDDDDD;
}

.metrics-table td.successful, .metrics-table th.successful {
    background-color: #EEEEEE;
}

.metrics-table td.failed, .metrics-table th.failed {
    background-color: #FFFFFF;
}

.metrics-table td.total, .metrics-table th.total {
    background-color: #E7E7E7
}

.metrics-table td.successrate, .metrics-table th.successrate {
    background-color: #DDDDDD;
}

.metrics-table td.team-last-column, .metrics-table th.team-last-column {
    border-right: thick double #CCCCCC;
}

.metrics-table td.metric-last-column, .metrics-table th.metric-last-column {
    border-right: 2px solid #CCCCCC;
}
.metrics-table td.metric-cell {
    width: 55px;
}

div.player-card {
    margin-bottom: 250px;
}

.date-from-label{
    width: 200px; float: top; margin:0px 0px 0px -52px;

}
.date-group{
    width: 350px;
    margin-bottom: 15px;
    margin-top: 32px;
    margin-left: 51px;
}

.date-from-group{
    width: 100px;
    margin: -19px;
 }
.date-group-to{
    margin-left: 100px;
    margin-top: -43px;
    margin-bottom: 21px;
}

.date-to-label{
    width: 200px; float: top;  margin:5px 0px 0px -55px;
}

.game-details {
    text-align: center;
}

#game-header div.team-identification {
    width: 40%;
    float: left;
}

#game-header div.game-identification {
    width: 20%;
    float: left;
}

.game-header div.team-identification p.team-name {
    position: absolute;
    left: 0;
    right: 0;    
}

.game-header div.team-identification p.team-name.left {
    margin-left: auto;
    margin-right: 60%;
}

.game-header div.team-identification p.team-name.right {
    margin-left: 60%;
    margin-right: auto;
}

.game-header img.team-logo {
    max-width:65px;
    max-height:65px;
}

.game-header img.league-logo {
    max-width:30px;
    max-height:30px;
}

.game-header p.vs-text{
    margin-top: 10px;
}

.game-header-with-period-control div.team-identification {
    width: 20%;
    float: left;
}

.game-header-with-period-control div.game-identification {
    width: 100%;
    float: left;
}

.game-header-with-period-control + .refresh-control{
    margin-top: 15px;
}

.game-header-with-period-control img.team-logo {
    max-width:50px;
    max-height:50px;
}

.game-header-with-period-control img.league-logo {
    max-width:25px;
    max-height:25px;
}

.team-game-view-roster {
    width: 226px;
    margin: auto;
}

.team-game-view-roster div.logo-container {
    width:96px;
    height:96px;
    line-height: 96px;
    left: 50%;
    position: absolute;
    margin-left: -48px;
}

.team-game-view-roster img.team-logo {
    max-width:96px;
    max-height:96px;
    opacity: 0.3;
    vertical-align: middle;
}

.team-game-view-roster .nav>li>a {
    cursor: pointer;
    border-width: 2px;
    border-style: solid;
}

.team-game-view-roster .nav>li:not(.active)>a {
    background: rgba(250, 250, 250, 0.5);
    border-color: rgba(250, 250, 250, 0.0);
}

.team-game-view-roster .nav>li:not(.active)>a:hover {
    background: rgba(238, 238, 238, 0.5);
    border-color: rgba(238, 238, 238, 0.5);
}

.game-header-with-period-control p {
    margin-bottom: 5px;
}

.game-header-with-period-control div.game-identification p:not(.period-label) {
    margin-bottom: 3px;
}
label {display:block;}

p.period-label {
    font-size: smaller;
    margin-top: 4px;
    margin-bottom: 2px;
}

div.game-playback-controls {
    margin-top: 25px;
}

.game-header div.team-identification div.img-container:before
{
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
}

div.game-header div.team-identification div.img-container
{
    height: 50px;
    line-height: 50px;
}

div.game-header-with-period-control div.team-identification div.img-container
{
    height: 50px;
    line-height: 50px;
}

#game-pregame-report div.game-header div.team-identification div.img-container
{
    height: 100px;
    line-height: 100px;
}

#game-pregame-report div.game-header img.team-logo
{
    max-width: 75px;
    max-height: 75px;
}

table.metrics-table span.category-comment {
    font-style: italic;
    color: #999999;
}

span.insert-text-prompt {
    font-style: italic;
    color: #999999;
}

/*
div.report-scrollable {
  height: 690px;
  overflow: auto;
}
*/

div.summary-text-edit-controls
{
    position: absolute;
    right: 20px;
    top: 35px;
}

div.summary-text-html-content
{
    min-height: 300px;
}

div.summary-text-markdown-content textarea
{
    width: 100%;
    min-height: 300px;
}

#game-pregame-report div.summary-text
{
    margin-left: 55px;
}

#game-pregame-report div.summary-text.editor-hover
{
    background-color: #E7E7E7;
}

#game-header div.team-identification div.img-container:before
{
    height: 100px;
}

#game-header div.team-identification p.team-name
{
    bottom: -30px;
}

#game-header img.team-logo
{
    vertical-align: middle;
    display: inline-block;
}

#game-header img.team-logo {
    max-width:100px;
    max-height:100px;
}

#game-header img.league-logo {
    max-width:50px;
    max-height:50px;
}

div.team-selector {
    margin-bottom: 20px;
}

.team-selector .nav>li>a {
    padding: 0px 0px;
    cursor: pointer;
    height: 100%;
    width: 100%;
}

.team-selector .nav>li:not(.active)>a:hover {
    background: #DCECFD;
    border-color: #DCECFD;
}

.team-selector .nav>li.active>a {
    background: #CFE5FC;
    border-color: #CFE5FC;
}

.team-selector .nav>li {
    margin-left:0px;
    width:45px;
    height:45px;
    line-height:45px;
    vertical-align: middle;
}

li.team-selector-item>a>img {
    max-width:32px;
    max-height:32px;    
}

li.team-selector-item:not(.active)>a>img {
    opacity:0.4;    
}

li.team-selector-item:not(.active)>a:hover>img {
    opacity:0.7;    
}

.team-game-view-roster h4 {
    margin-top: 0;
}

.team-game-view-roster li {
    width: 30px;
    margin-left: 2px;
    margin-bottom: 2px;
}

.team-game-view-roster li a {
    font-size: smaller;
}

.team-game-view-roster .nav>li>a {
  padding: 5px 5px;
}

.game-events-row {
    margin-top: 5px;
}

.game-events-row button {
    font-size: smaller;
    padding: 4px 8px;
}

.team-game-events-section {
    width: 40%;
    margin-top: 15px;
}

div.mid-game-events-section {
    margin-top: 24px;
}

.game-row-reports button.btn, 
.player-reports button.btn, 
.player-list-team-header button.btn {
    font-size: x-small;
    padding: 2px 6px;
}

div.player-reports {
    margin-left: 100px;
    margin-top: 5px;
}

#player-heading img.player-picture {
    max-width: 175px;
    max-height: 175px;
    -webkit-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.35);
    -moz-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.35);
    box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.35);
}

img.player-picture.game-view {
    max-width: 100px;
    max-height: 100px;
    -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.35);
    -moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.35);
    box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.35);
}

h2#game-view-player-name {
    margin-top: 14px;
}

#player-heading p.birthdate {
    margin-bottom: 2px;
}
.zone-heading {
    margin-top: 27px;
    vertical-align: text-bottom;
}


#player-game-toi-display {
    margin-top: 15px;
}

#player-game-toi-display-value {
    font-weight: bold;
}

div.xy-viewer-container {
  width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
}

div.xy-viewer-container svg {
  width: 800px;
  height: 340px;
}

div.xy-viewer-container svg image#xy-team-logo {
  opacity: 0.9;
}

.rinklabel {
  fill: #B5B5B5;
  font-family: 'Droid Sans', sans-serif;
  font-size: 12px;
  pointer-events: none;
}

.rink-sllogo-label {
  fill: #606060;
  font-family: 'Droid Sans', sans-serif;
  font-size: 5px;
  pointer-events: none;
}

.eventpoint {
  stroke-width: 1.0;
}
.eventpoint.failed {
  fill: #FF5050;  
}

.eventpoint.successful {
  fill: #50FF50;  
}

.eventplayerlabel {
  stroke-width: 0.1;
  font-family: 'Droid Sans', sans-serif;
  font-size: 5px;
  pointer-events: none;
}

g#RinkBoards path {
  stroke: #909090;
}

#event-type-filter-controls .btn-primary:active, #event-type-filter-controls .btn-primary.active,
#periodfilter-control .btn-primary:active, #periodfilter-control .btn-primary.active,
.periodfilter-control .btn-primary:active, .periodfilter-control .btn-primary.active,
.manpowersituationfilter-control .btn-primary:active, .manpowersituationfilter-control .btn-primary.active,
#playerfilter-control .btn-primary:active, #playerfilter-control .btn-primary.active,
.period-viewer-controls .btn-primary:active, .period-viewer-controls .btn-primary.active,
.game-report-controls .btn-primary:active, .game-report-controls .btn-primary.active,
.report-settings .btn-primary:active, .report-settings .btn-primary.active
{
  background-color: #71B2F7;
}

.game-oz-controls .btn-primary:active, 
.game-oz-controls .btn-primary.active {
    background-color: #71B2F7;
}

.report-setting-selector .btn-primary:active, 
.report-setting-selector .btn-primary.active {
    background-color: #71B2F7;
}

#event-type-filter-controls {
    text-align: center;
}

#includefailed-control {
    margin-top: 10px;
}
/*#failed {*/
    /*margin-left: 108px;*/
    /*margin-top: 19px;*/
    /*border-bottom-left-radius: 4px;*/
    /*border-top-left-radius: 4px;*/
/*}*/
/*#allpass {*/
    /*margin-left: 33px;*/

/*}*/
/*#otr {*/
    /*border-bottom-right-radius: 4px;*/
    /*border-top-right-radius: 4px;*/
/*}*/

.periodfilter-control .btn, 
.periodview-speed-control .btn,
.refresh-control .btn,.manpowersituationfilter-control .btn {
    font-size: xx-small;
}

#playerfilter-control .btn, 
#event-type-filter-controls .btn, 
#includefailed-control .btn, 
#event-type-filter-controls .event-type-filter-group-name,
.game-eventing-section .btn,
.game-report-controls .btn,
.report-settings .btn,
.game-oz-controls .btn,
.report-setting-selector .btn
{
    font-size: smaller;
    font-style: normal;
}

.game-id {
    font-size: 12px;
    color: #999999;
    font-style: italic;
}

span.game-id {
    font-size: 8px;
    color: #999999;
    font-style: normal;
}

p.report-context .btn {
    font-size: 10px;
}

span.free-agency {
    font-size: 10px;
    font-style: italic;
}

span.free-agency.rfa {
    color: #54A7EB;
}

span.free-agency.ufa {
    color: #EB9854;
}

.zone-viewer-player-name {
    font-size: 28px;
}

.zone-heading{
    font-size: 18px;
}

div.chart-viewer-container {
    margin-bottom: 30px;
}

.all-game-report-controls p,
.all-report-settings p,
.zone-viewer-filter-controls p,
.report-setting-selector p
{
    font-size: smaller;
    margin-bottom: 2px;
    margin-top: 1px;
}

.period-view-control-section p
{
    font-size: smaller;
    margin-bottom: 1px;
}
.report-setting-selector p.subsetting {
    margin-bottom: 1px;
    margin-top: 2px;
    font-style: italic;    
}

div.report-no-data-section p,
div.players-no-team-selection p 
{
    font-style: italic;
    margin-top: 100px;
    color: #BBBBBB;
}

div.report-no-data-section p
{
    font-size: 36px;
}

div.players-no-team-selection p
{
    font-size: 18px;
}

p.report-context {
    font-style: italic;
    margin-bottom: 15px;
    color: #999999;
}

div.game-report-previous-team {
    margin-top: -28px;
}

div.game-report-previous-team p {
    font-style: italic;
    margin-top: -12px;
    color: #999999;
    font-size: smaller;
}


progress.video-progress {
    width : 100%;
}

.periodfilter-control .btn,
.periodview-speed-control .btn,
#playerfilter-control .btn, 
#event-type-filter-controls .btn, 
#includefailed-control .btn, 
.game-eventing-section .btn, 
.refresh-control .btn,
.game-report-controls .btn,
.report-settings .btn,
.manpowersituationfilter-control .btn,
.game-oz-controls .btn,
.report-setting-selector .btn

{
  padding: 4px 8px;
}

div.game-report-controls,
div.report-settings,
div.game-oz-controls,
div.report-setting-selector
{
    margin-bottom: 10px;
}

div.all-report-settings,
div.all-game-report-controls,
div.zone-viewer-filter-controls
{
    margin-bottom: 20px;
    font-size: 12px;
}

div.all-report-settings div.section-title {
    font-size: 14px;
    margin-bottom: 10px;
}

#playerfilter-control {
  margin-bottom: 10px;
}

.event-type-filter-group {
    display: inline-block;
    margin-bottom: 9px;
}

.report-setting-selector .event-type-filter-group {
    margin-bottom: 0px;
}

.report-setting-selector .event-type-filter-group-control:not(.subgroup) {
    margin-top: 0px;
}

.event-type-filter-group:not(.subgroup) {
    margin-left: 12px;
    margin-right: 12px;
}

.event-type-filter-group-control {
    margin-top: 5px;
}



.video-playback-modal.modal-dialog {
    width: 1000px;
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;    
}

/* .qa-report-sticky{
    position: sticky;
    top: 0;
    background: #fff;
}

.qa-report-sticky p{

} */

.qa-report-dialog.modal-dialog,
.game-report-league-ranking-modal.modal-dialog,
.please-wait-dialog.modal-dialog {
    position: fixed;    
    z-index: 20;
    left: 0;
    right: 0;
    border-radius: 10px;
}

.please-wait-dialog.modal-dialog {
    z-index: 21;
}

.qa-report-dialog.modal-dialog {
    width: 1200px;
    top: 26px;
}

.qa-report-dialog.modal-dialog .modal-footer div.disabled button {
    opacity: 0.65;
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
}

.game-report-league-ranking-modal.modal-dialog {
    width: 750px;
    top: 26px;
}

.qa-report-dialog.modal-dialog div.modal-body,
.game-report-league-ranking-modal.modal-dialog div.modal-body
{
    height: 600px;
    overflow: auto;
}

.qa-report-dialog.modal-dialog div.modal-body button,
.game-report-league-ranking-modal.modal-dialog div.modal-body button
 {
    font-size: smaller;
    padding: 4px 8px;    
}

.qa-report-dialog.modal-dialog table td {
    text-align: left;
}

.qa-report-dialog.modal-dialog .qa-warnings-period-filter.active, .qa-warnings-team-filter.active {
    font-weight: bold;
    color: #2e8a19;
}

.game-report-league-ranking-modal.modal-dialog table td {
    text-align: left;
}

.game-report-league-ranking-modal.modal-dialog table tr.highlight>td {
    color: #FFFFFF;
    background-color: #71B2F7;
}

.please-wait-dialog.modal-dialog {
    width: 1000px;
    top: 275px;
    z-index: 21;
    background-color: #EEEEEE;
    opacity: 0.8;
}

.qa-report-dialog.modal-dialog .btn.disabled {
    pointer-events: none;
}

table.metrics-table td.metric-cell:hover {
    color: #FFFFFF;
    background-color: #71B2F7;
}

table.metrics-table tr:hover td:not(.metric-cell).linkable {
    background-color: #C1DEFC;
}

table.metrics-table td:hover:not(.metric-cell).linkable {
    color: #04284E;
    background-color: #C1DEFC;
}

div.video-placeholder {
    width: 960px;
    height: 540px;
    margin-bottom: 5px;
    background-color: #555555;
    text-align: center;
    line-height: 540px;
}

div.video-placeholder-message {
    display: inline-block;
    line-height: 32px;
}

div.video-placeholder-message span.glyphicon, div.video-placeholder-message i.fa-spinner {
    z-index: 25;
    position: absolute;
    color: #707070;
    font-size: 120px;
    left: 44%;
    top: 35%;
}

div.video-placeholder-message span.email-address{
    color: #FFFFFF;
    text-decoration: underline;
}

div.video-placeholder div.event-description {
    z-index: 40;
    position: absolute;
    left: 50%;
    top: 260px;
    width: 960px;
}

div.video-placeholder div.event-description p {
    position: relative;
    font-size: 18px;
    color: #FFFFFF;
    left: -50%;
    animation: fadein 1s;
    top:-23px;
    margin-top: -10px;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

div.video-placeholder p.video-message {
    color: yellow;
    font-weight: bold;
    top: 50px;
    position: relative;
}

.metric-line {
    max-width: 500px;
}

.metric-view {
    margin-bottom: 2px;
}

.metric-context {
    display: inline-block;
}

.metric-context > p {
    margin-bottom: 2px;
    font-size: smaller;
}

.overview-metrics p {
    margin-bottom: 2px;
    font-size: small;
}

.overview-metric-label {
    text-align: right;
}

.strengths-and-weaknesses {
    margin-top: 9px;
}

.metric-value {
    font-weight: bold;
}

div.metric-value {
    display: inline-block;
    width: 55px;
    text-align: center;
    vertical-align: bottom;
    margin-bottom: 4px;
}

.skill-line, .tendency-line {
    float: right;
}

.tendency-line {
    margin-bottom: -10px;
}

.skill-label, .tendency-label {
    margin-right: 10px;
}

.skill-label {
    font-weight: bold;
    /*
    width: 35%;
    display: inline-block;
    text-align: right;
    */    
}

.tendency-label {
    line-height: 36px;
    vertical-align: top;
    font-size: small;
}
/*
span.tendency-value {
    float: right;
}
*/

.skill-box {
    max-width: 404px;
    margin-left: 25px;
}

.tendency-box {
    max-width: 550px;
    margin-left: -40px;
}

.percentbar-shell {
    width: 350px;
    display: inline-block;
    vertical-align: middle;
}

.percentbar-value-label {
    margin-left: 5px;
    font-size: smaller;
}


div.comparison > div.percentbar-shell > div.percentbar > .percentbar-value-label {
    margin-left: 4px;
    color: #cccccc;
    line-height: 32px;
    vertical-align: top;
}

.calendar-from{
    width: 100px;
    text-align: center;
    display:block;
    margin: 0 0 3px ;
}

.calendar-to{
    width: 100px;
text-align: center;
    display:block;
 margin: 0 0 3px ;

}

.meter {
    position: relative;

    width: 100%;
    height: 10px;
    box-shadow: 0 5px 5px -5px #bbbbbb inset;
    background-color: #eeeeee;
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
}

.percentbar {
    position: relative;

    width: 100%;
    height: 10px;
}


.level {
    position: absolute;
    width: 0;
    left: 0;
    height: 100%;
    border-radius: 5px 0px 0px 5px;
    -moz-border-radius: 5px 0px 0px 5px;

    /*
    background: #a8f4ac; 
    background: -moz-linear-gradient(top,  #a8f4ac 0%, #29f233 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a8f4ac), color-stop(100%,#29f233)); 
    background: -webkit-linear-gradient(top,  #a8f4ac 0%,#29f233 100%); 
    background: -o-linear-gradient(top,  #a8f4ac 0%,#29f233 100%); 
    background: -ms-linear-gradient(top,  #a8f4ac 0%,#29f233 100%); 
    background: linear-gradient(to bottom,  #a8f4ac 0%,#29f233 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8f4ac', endColorstr='#29f233',GradientType=0 );  */

    background: #87e0fd; /* Old browsers */
    background: -moz-linear-gradient(top,  #87e0fd 0%, #53c1ed 40%, #0694e0 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53c1ed), color-stop(100%,#0694e0)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #87e0fd 0%,#53c1ed 40%,#0694e0 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #87e0fd 0%,#53c1ed 40%,#0694e0 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #87e0fd 0%,#53c1ed 40%,#0694e0 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #87e0fd 0%,#53c1ed 40%,#0694e0 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#0694e0',GradientType=0 ); /* IE6-9 */

}

div.strength > div.meter > div.level {
    background: #a8f4ac; 
    background: -moz-linear-gradient(top,  #a8f4ac 0%, #29f233 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a8f4ac), color-stop(100%,#29f233)); 
    background: -webkit-linear-gradient(top,  #a8f4ac 0%,#29f233 100%); 
    background: -o-linear-gradient(top,  #a8f4ac 0%,#29f233 100%); 
    background: -ms-linear-gradient(top,  #a8f4ac 0%,#29f233 100%); 
    background: linear-gradient(to bottom,  #a8f4ac 0%,#29f233 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8f4ac', endColorstr='#29f233',GradientType=0 ); 
}

div.weakness > div.meter > div.level {
    background: #ff3019; /* Old browsers */
    background: -moz-linear-gradient(top,  #ff3019 0%, #cf0404 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ff3019 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ff3019 0%,#cf0404 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ff3019 0%,#cf0404 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ff3019 0%,#cf0404 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */
}

div.card-metric > div.meter > div.level {
    background: #87e0fd; /* Old browsers */
    background: -moz-linear-gradient(top,  #87e0fd 0%, #9dd4ea 40%, #6eb8dd 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#9dd4ea), color-stop(100%,#6eb8dd)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #87e0fd 0%,#9dd4ea 40%,#6eb8dd 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #87e0fd 0%,#9dd4ea 40%,#6eb8dd 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #87e0fd 0%,#9dd4ea 40%,#6eb8dd 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #87e0fd 0%,#9dd4ea 40%,#6eb8dd 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#6eb8dd',GradientType=0 ); /* IE6-9 */
}

div.card-tendency > div.percentbar-container > div.percentbar-shell > div.percentbar > div.level {
    position: initial;
    display: inline-block;
    border-radius: 0px 0px 0px 0px;
    -moz-border-radius: 0px 0px 0px 0px;
}

div.playervalue > div.percentbar-shell > div.percentbar > div.level {
    background: #a90329; /* Old browsers */
    background: -moz-linear-gradient(top,  #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}

div.comparison > div.percentbar-shell > div.percentbar > div.level {
    background: #eeeeee; /* Old browsers */
    background: -moz-linear-gradient(top,  #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #eeeeee 0%,#cccccc 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
}

div.playervalue {
    margin-top: -27px;
}


.card-skill {
    display: inline-block;
    width: 200px;
    margin-top: 6px;    
}

.card-tendency {
    display: inline-block;
    width: 350px;
    margin-top: 6px;    
}

.card-skill-chevron {
    display: inline-block;
    margin-left: 24px;
    color: #A0A0A0;    
}

.card-highlight-metric {
    width: 200px;
}

.card-metric {
    width: 200px;
}

.skillmetric {
    margin-left: 175px;
    min-width: 260px;
}

.skillmetric:last-child {
    margin-bottom: 20px;
}

.tendency-nav {
    margin: 10px auto;
    display: table;
    font-style: small;
}

.tendency-nav > li > a {
    padding: 5px 8px;
}


p.game-report-team {
    font-family: 'Cantarell', sans-serif;
    margin-top: 15px;
    font-size: 20px;
    line-height: 70px;
}

div.metric-group-view 
{
    margin-top: 30px;
}

ul#game-pregame-report-nav {
    font-size: smaller;
}

ul#game-pregame-report-nav li {
    line-height: 1.0;    
}


rect.distance-fader {
    fill: #000000;
    fill-opacity: 0.25; 
}

/* 
  Allow angular.js to be loaded in body, hiding cloaked elements until 
  templates compile.  The !important is important given that there may be 
  other selectors that are more specific or come later and might alter display.  
 */
[ng\:cloak], [ng-cloak], .ng-cloak {
  display: none !important;
}

div.time-window-filters {
    margin-top: 20px;
}

div.hiders {
    -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.35);
    -moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.35);
    box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.35);
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    font-size: x-small;
    padding: 5px;
}

div.hiders .nav>li>a {
    padding: 8px 8px;
}

div#sinceDate {
    margin-top: -6px;
    margin-bottom: 8px;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

div.all-metrics-trend-viewer-panel .axis.x path.domain {
  display : none;
}

div.all-metrics-trend-viewer-panel p.report-context {
    margin-top: 72px;
}

.basedataline {
  fill: none;
}

div.chart-viewer-container svg text {
  font-family: 'Play', sans-serif;
}

rect.fader {
    opacity: 0.75;
}

span.view-load-spinner {
   position : absolute;
}

span.view-load-spinner i {
   font-size : 36px;
}

.spinner-show-hide {
  -webkit-transition:all linear 0.3s;
  transition:all linear 0.3s;
}

.spinner-show-hide.ng-hide {
  opacity:0;
}

.spinner-show-hide:not(.ng-hide) {
  opacity:1;
}

.element-show-hide {
  -webkit-transition:all linear 0.2s;
  transition:all linear 0.2s;
}

.element-show-hide.ng-hide {
  opacity:0;
}

.element-show-hide:not(.ng-hide) {
  opacity:1;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

#allEvents{
    text-align: center;
    margin-top: 6px;
    margin-bottom: 20px;

}
#allPlayerEvents{
    text-align: center;
    margin-top: 6px;
    margin-bottom: 10px;

}
#visEventId{
    margin-left: 20px;
    margin-right: 20px;


}

/* Generic Helpers */
.row.vertical-row-space {
    margin-top: 15px;
    margin-bottom: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.always-on-top.modal-dialog {
    z-index: 999999;
}

.clickable {
    cursor: pointer;
}

div.modal-dialog.half-width {
    width: 500px;
}


input[readonly].copy-paste-manually + button[data-copytarget] {
    position: relative;
}

input[readonly].copy-paste-manually + button[data-copytarget]::before{
    opacity: 1;
    position: absolute;
    top: -40px;
    left: -30px;
    color: white;
    display: block;
    content: 'Press Ctrl/Cmd+C to Copy!';
    padding: 5px;
    background: black;
    border-radius: 5px;
}

#user-selection,
#company-selection,
[id*="user-selection"],
[id*="company-selection"] {
    max-width: 200px;
}

#exportCsvbutton{
        margin-top: 37px;
        margin-left: -40px;
        font-size: smaller;


}

/* https://github.com/tobiasahlin/SpinKit/blob/master/LICENSE */
.spinner {
  margin: 0 auto;
  width: 70px;
  text-align: center;
}

.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #333;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

.userManagementLoading {
    display: flex;
    justify-content: center;
    font-size: 24px;
}

.navbar.hockey, .btn-primary.hockey {
    background: #5a5ae6;
}
.navbar.soccer, .btn-primary.soccer {
    background: #419848;
}
.navbar.football, .btn-primary.football {
    background: #835C3B;
}
a.navbar-brand, .navbar-nav>li>a {
    color: #ffffff!important;
}

.boxscore.yellowcard {
    border: 1px solid black;
    background-color: yellow;
    width: 15px;
    height: 20px;
    margin-right: 10px;
    float: left;
}

.boxscore.redcard {
    border: 1px solid black;
    background-color: red;
    width: 15px;
    height: 20px;
    margin-right: 10px;
    float: left;
}

.boxscore.warning {
    color: red;
}

/* Filter By Warning Type */
.toggleWarningContainer {
    display: flex;
    max-width: 50%;
    margin: 8px auto;
    padding: 0;
    list-style: none;
    justify-content: center;
    white-space: nowrap;
}

.toggleWarningContainer li {
    margin: 0;
    text-align: center;
}

.toggleWarningContainer li input {
    margin-left: 8px;
}

.toggleWarningContainer li label {
    display: inline-flex;
    margin-left: 4px;
    white-space: nowrap;
}

.toggleWarningContainer li input,
.toggleWarningContainer li label {
    margin-bottom: 0;
    cursor: pointer;
}

/* START: small tweak for smaller screen size */
@media screen and (max-height: 900px) {
    .qa-report-dialog.modal-dialog div.modal-body,
    .game-report-league-ranking-modal.modal-dialog div.modal-body {
        max-height: 540px;
    }
}

@media screen and (max-width: 1200px) {
    .qa-report-dialog.modal-dialog {
        width: 1100px;
    }
}

.app-link {
    display: inline-block;
    color: #3399f3;
    text-decoration: none;
    cursor: pointer;
}

.app-link:hover {
    text-decoration: underline;
}

.cell-link {
    width: 14px;
}