.panel-gradient, .gradient000 { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,000000+100&0.1+0,0.1+100 */
background: -moz-linear-gradient(top,  rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,0.1) 0%,rgba(0,0,0,0.1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,0.1) 0%,rgba(0,0,0,0.1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1affffff', endColorstr='#1a000000',GradientType=0 ); /* IE6-9 */}
.panel-gradient, .button.gradient000 {box-shadow: 1px 1px rgba(255,255,255,0.15) inset; border: none; border-bottom: 1px solid #000;}
.off-canvas-wrapper {overflow: hidden;}

/*Navigation Elements*/
.off-canvas-wrapper-inner.is-off-canvas-open {overflow-y: initial;}
.title-bar-left .menu-icon {transform: translateX(-20px);}
.off-canvas-wrapper-inner.is-off-canvas-open .title-bar-left .menu-icon {transform: translateX(0px);}
.svs-app .dropdown.menu .has-submenu.is-down-arrow > a {color: #fff;}
.svs-app .dropdown.menu .has-submenu.is-down-arrow > a::after {border: none; content: "\f107"; font: normal normal normal 14px/1 FontAwesome; display: inline-block; right: .5em;}
.svs-app .dropdown.menu .has-submenu.highlight {color: #fff; box-shadow: 0 1px rgba(33,153,232, 1.0), 0 -7px 5px -5px rgba(33,153,232, 0.5) inset, 0 7px 5px -5px rgba(33,153,232, 0.5);}
.menu > li > a {font-size: .8rem;}
.top-bar-left .menu > li > a i {font-size: 1.5em;}
.menu > li > a.active {color: #fff; text-shadow: 0 0 3px #2199e8;}
body strong {color: #fff; font-size: .8rem; line-height: 1.2; margin: 0;}
body span {font-size: .7em;}
.top-bar {}
.top-bar, .top-bar ul {background-color: transparent;}
.page-container {height: calc(100vh - 44px);}
.content-panel {height: 100%;}
.top-bar-right .dropdown.menu .submenu.first-sub {right: 0; left: auto;}

.page-matchups {position: relative;}
.page-matchups .content-panel a {color: #888;}
.page-matchups .content-panel .top-bar-right li.view-type.active i {color: #fff;}
.page-matchups .content-panel .top-bar-right i {font-size: 1.5em;}
.page-matchups .content-panel .top-bar-right .dropdown.menu .has-submenu.is-down-arrow > a::after {content: none;}
.page-matchups label {color: #fff;} 
.page-matchups .enter-matchup a {color: #fff; }

/*Mobile Menu*/
.off-canvas {background: #222; color: #fff;}
.off-canvas .fa-stack {font-size: 1em;}
.off-canvas .user-options {margin: 0; padding: 0;}
.off-canvas .user-options li {display: inline-block; width: 49%;}
.off-canvas .user-options li a {font-size: .8rem; color: initial;  color: #2199e8; width: 100%; text-align: center;}
.off-canvas .user-details {padding: .5em; border-bottom: 1px solid #000; box-shadow: 0 1px rgba(255,255,255,0.15); }
.off-canvas .user-details a {font-size: .8rem; margin: 0;}
.off-canvas li a {font-size: 1em; padding: 1em 0.5em; color: #fff; display: block;}
.off-canvas li a i {color: #2199e8; font-size: 1.25em; margin-right: .25em;}
.is-off-canvas-open .js-off-canvas-exit {z-index: 2;}



/*Generic Elements*/
ul, li {list-style-type: none; margin: 0; padding: 0;}
.svs-app .button.play {color: #3adb76;}



/*Filter Panel*/
.page-matchups .filter-panel {z-index: 1; position: absolute; left: 0; top: 0px; height: 100%; min-height: calc(100vh - 44px); display: block; padding-right: 44px; box-shadow: 1px 1px #555 inset; background-color: #222; font-size: 12px; position: absolute; width: 0; transition: width 0.25s ease-in-out; max-width: 1147px;}
.page-matchups .filter-panel select:after {content: "\f200"; font: normal normal normal 14px/1 FontAwesome; display: inline-block; right: .5em;}
.page-matchups .filter-panel hr {border-top: 1px solid rgba(255,255,255,0.1); border-bottom: rgba(0,0,0,0.9);}
.page-matchups .filter-panel .filter-type {width: 49%; display: inline-block;}
.page-matchups .filter-panel section {border-bottom: 1px solid #000; box-shadow: 0 1px rgba(255,255,255,0.15) inset;}
.page-matchups .filter-panel.active .panel-1 {width: 200px;}
.page-matchups .filter-panel.active.fullview {width: calc(100vw - 50px); }
.page-matchups .filter-panel.active .panel-1, .page-matchups .filter-panel.active .panel-2 {display: inline-block; position: absolute; top: 0; overflow: visible; height: 100%;}
.page-matchups .filter-panel.active .panel-1 {overflow: hidden;}
.page-matchups .panel-1, .page-matchups .panel-2 {background: #222; font-size: 12px; box-shadow: 1px 1px rgba(255,255,255,0.15) inset, 1px 0 black; overflow: hidden; transition: width 0.25s ease-in-out;}
.page-matchups .panel-1 ul *, .page-matchups .panel-2 ul * {opacity: 0; transform: translateY(3px);}
.page-matchups .filter-panel.active .panel-1 ul *, .page-matchups .filter-panel.active.fullview .panel-2 ul * {transition: all 0.15s ease-in-out; transition-delay: .25s; opacity: 1.0; transform: translateY(0px);}
.page-matchups .filter-panel.active {width: 246px; background-color: #111; display: block; height: 100%; min-height: calc(100vh - 42px); overflow: visible; border-right: 1px solid rgba(255,255,255,0.15);}
.page-matchups .filter-panel.active.fullview .panel-1 {overflow: visible;}
.page-matchups .filter-panel.active.fullview .panel-2 {margin-left: 1px; width: calc(100vw - 297px); overflow: auto; max-width: 900px;}
.page-matchups .filter-panel .toggle-button {transform: rotate(270deg) translateY(0px); right: -28px; display: inline-block; height: 44px; top: 28px; position: absolute; padding: 0 20px; line-height: 44px; width: auto; white-space: nowrap; color: #fff; font-size: 18px; box-shadow: -1px 1px #555 inset, -1px -1px #000; border: none; cursor: pointer; background: #222;}
.page-matchups .filter-panel .toggle-button:hover {background-color: #3a3a3a;}
.page-matchups .filter-panel .button { margin: 0 0 .5rem 0;}
.page-matchups .filter-panel .filter-type .button {background-color: #333;}
.page-matchups .filter-panel .filter-type .button.active {background-color: rgba(33,153,232, 1.0); box-shadow: 1px 1px rgba(0,0,0,0.15) inset; border: none; border-bottom: 1px solid rgba(255,255,255,0.05);}
.page-matchups .filter-panel h5 {background-color: #222; opacity: 0; transition: all 0.15s ease-in-out; transition-delay: .25s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; color: #fff; padding: .5em; margin: 0;}
.page-matchups .filter-panel.active h5 {opacity: 1.0;}
/*Runners on Base*/
.field-runners {background: url("../img/field_bground.png") 50% 0;width: 250px;height: 250px;background-repeat: no-repeat;background-size: contain; position: relative; margin: 1em auto;}
.field-runners li {position: absolute;}
.field-runners li.runner-1b {top: 52%; right: 20%;}
.field-runners li.runner-2b {top: 25%; left: 50%; right: 50%;}
.field-runners li.runner-3b {top: 52%; left: 20%;}
/*Button-group*/
.button-group {margin-top: 1em;}


/*Matchup List Items - GRID*/
ul.team-list, ul.player-list {padding-top: 5px;}
ul.team-list .list-item, ul.player-list .list-item {width: 12.5%; margin-bottom: 1em; float: left; padding-left: 0.4375rem; padding-right: 0.4375rem; cursor: pointer;}
ul.team-list .list-item .item-container:hover, ul.player-list .list-item .item-container:hover {background-color: #222;}
ul.team-list .list-item .item-container.selected, ul.player-list .list-item .item-container.selected {background-color: #333; box-shadow: 0 0 0 1px rgba(33,153,232, 1.0), 0 0px 5px 3px rgba(33,153,232, 0.35), 0 15px 15px -10px rgba(33,153,232, 0.5);}
ul.team-list .list-item .item-container img,
ul.team-list .list-item .item-container div,
ul.player-list .list-item .item-container div {padding: .5em;}
ul.team-list .list-item strong,
ul.team-list .list-item span,
ul.player-list .list-item strong,
ul.player-list .list-item span{margin: 0; font-weight: normal; display: block;}

/*Matchup List Items - LIST*/
.list-view ul.team-list, .list-view ul.player-list {padding-top: 5px;}
.list-view ul.team-list .list-item, .list-view ul.player-list .list-item {width: 100%; clear: both; float: left; margin-bottom: 0.25em; height: 44px !important;}
.list-view ul.team-list .item-container, .list-view ul.player-list .item-container {width: 100%; padding-left: 0.4375rem; padding-right: 0.4375rem; cursor: pointer; clear: both; height: 44px !important; float: left; display: block;}
.list-view ul.team-list .list-item .item-container img,
.list-view ul.player-list .list-item .item-container img  {float: left; max-width: 44px; padding: 0;}
.list-view ul.team-list .list-item .item-container div,
.list-view ul.player-list .list-item .item-container div {float: left; padding: 0 0 0 1em; height: 44px;}

/*Matchup Player Selected*/
/*.slick-prev, .slick-next {display: none !important;}
.slick-prev.active, .slick-next.active {display: inline-block !important;}*/
.player-selection {position: relative; float: left; width: 100%; margin-bottom: .5em;}
.player-selection .headshot {float: left; width: 115px;}
.player-selection .player-info {}
.player-selection .player-info .name {color: #fff; font-weight: 500; font-size: .9em; display: inline-block;}
.player-selection .player-info .details {font-size: 10px;}
.player-selection .player-info .details li {font-size: 10px; line-height: 1.1;}
.player-selection .player-info .field-list {font-size: 10px; width: 100%; float: left; clear: both;}
.player-selection .player-info .field-list li {width: 25%; height: 44px; line-height: 44px; font-size: 16px; text-align: center; display: inline; float: left; box-shadow: 0 1px rgba(255,255,255,0.15) inset;border-top: 1px solid black; cursor: pointer;}
.player-selection .player-info .field-list li:hover {background: rgba(100,100,100,0.1);}
.player-selection .player-info .field-list span {vertical-align: top;}
.player-selection .player-info .field-list .field-type {background-image: url("../img/icons.png"); width: 44px; height: 44px; display: inline-block;}
.player-selection .player-info .field-list .field-type.batting {background-position: 0 0px;}
.player-selection .player-info .field-list .field-type.pitching {background-position: -88px 0;}
.player-selection .player-info .field-list .field-type.fielding {background-position: -44px 0;}
.player-selection .player-info .field-list .field-type.running {background-position: -132px 0;}
.player-selection .player-info .field-list li.active {color: #2199e8; text-shadow: 0 0 3px #2199e8;}
.player-selection .player-info .field-list li.active .field-type {background-position-y: 44px; }
.player-selection .player-info > ul:first-child {padding: .5em 50px .5em .5em; font-size: 14px; line-height: 1;}
.svs-app .player-selection .button {background: none; position: absolute; top: 0px; right: 0px; margin: 0; font-size: 1.25em;}

/*Slick Slider*/
.slick-slider::-moz-selection, .slick-slider::selection {background: none;}
.slick-slider {-webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;}

/*Table Styles*/
.svs-app .table-overflow {overflow-x: auto;}
.svs-app table {width: 100%;}
.svs-app table th,
.svs-app table td {font-size: 12px;}
.svs-app table th {color: #fff;}
.svs-app table .button {margin: 0; background: none;}
.svs-app table .button:hover, .svs-app .player-selection .button:hover {background: rgba(100,100,100,0.1);}