@import url("https://fonts.googleapis.com/css?family=Open+Sans");
@import url("font-awesome.min.css");

::-webkit-scrollbar              { width:20px; background-color:#474747; }
::-webkit-scrollbar-button       { background-size:100%; height:20px; width:10px; }
::-webkit-scrollbar-button:vertical:decrement { 
    background-image:url("img/ArrowUp.png");
    background-size:80% auto;
    background-repeat:no-repeat;
    background-position:center center;
}
::-webkit-scrollbar-button:vertical:increment { 
    background-image:url("img/ArrowDown.png");
    background-size:80% auto;
    background-repeat:no-repeat;
    background-position:center center;
}
::-webkit-scrollbar-track        { background-color:#474747; }
::-webkit-scrollbar-track-piece  { background-color:#474747; }
::-webkit-scrollbar-thumb        { border:2px solid #474747; background-color:#333; }
::-webkit-scrollbar-corner       { background-color:#474747; }
::-webkit-resizer                { background-color:#474747; }

body { 
    position:relative; 
    float:left;
    margin:0;
    max-width:100%;
    min-height:100%;
    line-height:24px;
    font-size:13px;
    font-family:'Open Sans', sans-serif;
    text-align:center;
    color:#fff;
    background:#333;
}

table {
    margin:0;
    line-height:24px;
    font-size:14px;
    font-family:'Open Sans', sans-serif;
    text-align:left;
    color:#fff;
    background:#333;
}


h1, h2, h3, h4, h5, h6 { text-align:center; box-sizing:border-box; }
h1 { position:relative; margin:0 0 30px; }
h2 { padding:0 40px; font-size:19px; font-weight:100; }
p { margin:20px 0; padding:0 40px; text-align:justify; }
a { display:inline-block; color:#428bca; text-decoration:none; }
	a:hover { color:#2a6496; text-decoration:underline; }



ol { display:inline-block; width:100%; box-sizing:border-box; }
	ol ul { margin:10px 0 0; padding:0 0 0 40px; }
ul { margin:20px 0; padding:0 40px 0 80px; }
	li { margin-bottom:10px; }
img { max-width:100%; box-sizing:border-box; }

hr { margin-top:20px; margin-bottom:20px; border:0; border-top:1px solid #eee; }

form { display:inline-block; margin:0; padding:0; width:100%; box-sizing:border-box; vertical-align:middle; }
	form a, a.Button { display:inline-block; padding:5px 0; width:160px; line-height:15px; font-size:15px; font-weight:400; color:#fff; text-align:center; text-transform:uppercase; }
    
	form.a, a.ButtonLong { display:inline-block; padding:5px 0; width:240px; line-height:15px; font-size:15px; font-weight:400; color:#fff; text-align:center; text-transform:uppercase; }
	form a:hover, a.Button:hover { color:#fff; text-decoration:none; }
	label span { padding-left:10px; vertical-align:middle; }
	input { display:inline-block; padding:5px; width:100px; }
	select { display:inline-block; padding:5px; }
	input[type="radio"], input[type="checkbox"] { width:auto; vertical-align:middle; }
	/*input[type="button"], input[type="submit"] { width:160px; }*/
    input[type="button"], input[type="submit"] { display:inline-block; padding:5px 0; width:160px; line-height:15px; font-size:15px; font-weight:400; color:#fff; background:#6C6; text-align:center; text-transform:uppercase; }
	input[type="text"], input[type="email"], input[type="password"], input[type="file"] { width:200px; } 
	a.Green { background:#6C6; }
		a.Green:hover { background:#41B041; }
		a.Green:active { background:#229722; }
	a.Blue { background:#69C; }
		a.Blue:hover { background:#447CB2; }
		a.Blue:active { background:#29649D; }
	/* DC 6/7/2016 */
	a.Red { background:#D35658; }
		a.Red:hover { background:#DE3F41; }
		a.Red:active { background:#BC1417; }
		
	form .Group { display:inline-block; }
	form .Row { display:block; margin-bottom:10px; vertical-align:middle;  }
	form .FixedHeight { margin-top:20px; }
		.FixedHeight .Row { position:relative; overflow:visible; }
		.FixedHeight label { position:absolute; left:0; bottom:100%; padding-bottom:10px; width:110px; line-height:16px; }
	form .Column { display:inline-block; padding:20px; text-align:left; vertical-align:middle; width:19%; }
	form .Column30 { display:inline-block; padding:20px; text-align:left; vertical-align:middle; width:29%; }
	form .Column10 { display:inline-block; padding:20px; text-align:left; vertical-align:middle }
	form .Column30 { display:inline-block; padding:20px; text-align:left; vertical-align:middle; width:49%; }
	form .Column60 { display:inline-block; padding:20px; text-align:left; vertical-align:middle; width:59%; }
	form .SubmitButton { text-align:right;padding-top:4px; }
	form .fa { font-size:30px; color:#ccc; vertical-align:middle; }
	form .fa-play { font-size:26px; }
	form .fa-plus { padding-top:4px; color:#69C; }
	form .fa-minus { padding-top: 4px; color:#D35658; }
input[type="Submit"] { float:right; width:50%; }

.CustomScrTbl { background-color: #fff; color: #777; }

audio { margin:20px 0; }

header, nav, section, aside { display:inline-block; position:relative; float:left; width:100%; box-sizing:border-box; text-align:left; }

nav { text-align:center; }
	nav a { display:inline-block; padding:20px; }
	
header { position:relative; float:none; height:80px; background:#474747; /* background:#526a82;  background:#A4B1F7;*/ text-align:center; z-index:5; }
	header img { padding:10px; }
	header #Logo { display:inline-block; position:absolute; top:0; left:0; padding:0; width:250px; vertical-align:middle; text-align:center; z-index:3; }
	header #Logo:hover { background:none; }
		header #Logo img { display:inline-block; }
	header #ShuffleLogo { display:inline-block;padding:0;top:0; }
    header #UserID { display:inline-block; position:absolute; top:0; right:20px; padding:0; vertical-align:middle;	text-align:center; z-index:3; }
    header #UserID img { height:80px; }
    header #UserID span { display:block; float:right; padding-top:30px; color:#fff; }
	header nav { background:#fff; }
	header #MobileNavButton { display:inline-block; position:relative; z-index:2; width:100%; background:#fff; box-shadow:0px -10px 20px 4px; -webkit-box-shadow:0px -10px 20px 4px; -moz-box-shadow:0px -10px 20px 4px; }
		header #MobileNavButton a { float:right; padding:20px; width:auto; color:#1b3766; font-size:30px; }
		header #MobileNavButton a:hover { color:#d6d6d6; background:none; }
	header #MobileNavWrapper { position:relative; width:100%; z-index:1; background:#fff; }
		header nav a { color:#1b3766; font-size:14px; line-height:30px; vertical-align:top; }
		header nav > *:first-child { margin-left:70px; }
		header nav a:hover { background:#f3f3f3; text-decoration:none; }
		a.Current { font-weight:bold; }
		header .CustomerLogin { float:right; color:#fff; background:#1B3766; }
		header .CustomerLogin:hover, .CustomerLogin:focus { background:#0A224C; }
		header .SocialIcons { display:none; padding-left:100px; }
			.SocialIcons a { padding:20px 10px; width:auto; color:#d6d6d6; font-size:30px; }
			.SocialIcons a:hover { color:#000; background:none; }
	header .HasChildren { display:inline-block; position:relative; vertical-align:top; }
		/*header .HasChildren > a:after { content:"\f0d7"; margin-left:8px; font-family:'FontAwesome'; }*/
		header .HasChildren .Sublevel { display:none; border:1px solid rgba(0, 0, 0, .15); border:1px solid #ccc; }
			header .HasChildren .Sublevel a { padding:10px 20px; width:100%; box-sizing:border-box; white-space:nowrap; text-align:left; }

aside { background:#404040; }
	aside #GroupsHeader { background:#474747; text-transform:uppercase; }
	aside h2 { margin:0; padding:20px; text-align:left; }
	aside #EditGroupsLink { position:absolute; top:0; right:0; color:#CCC; text-decoration:none; }
	aside a:hover { text-decoration:none; color:#fff; background:#4B637B; /*background:#A4B1F7;*/ }
	aside .Group a { text-decoration:none; position:relative; border-bottom:2px solid #474747; width:100%; box-sizing:border-box; font-size:16px; text-align:left; background:#404040; }
	aside .Group a:hover { text-decoration:none; color:#fff; background:#4B637B; /*background:#A4B1F7;*/ }
	aside .Group > a { text-transform:uppercase; color:#fff; }
	/*aside .Group > a:after { content:"\f105"; display:inline-block; position:absolute; top:0; right:0; padding:16px; font:normal normal normal 32px/1 FontAwesome; color:#666; }*/
	/*aside .Group > a:hover:after { color:#fff; }*/
	/*aside .Group > a.Active:after { content:"\f107"; }*/
    aside .Group .NavGreen {color:#6C6;font-size:14px;}
    aside .Group .NavGreen:hover {color:#fff;}
	aside .GroupItems a {text-decoration: none; color:#666; background:#333; }
	aside .GroupItems .link-blue a {text-decoration: none; color:#0d6efd; background:#333; }
	aside .GroupItems .fa { position:absolute; top:0; right:0; padding:20px; font-size:24px; color:#666; overflow-y:auto; }
	aside .GroupItems a:hover .fa { color:#fff; }
    aside .GroupItems .highlighted {background:#A4B1F7;color:#fff}
	
content { display:block; margin-left:250px; padding:40px; box-sizing:border-box; }

.Box { display:inline-block; position:relative; float:left; margin-bottom:40px; width:100%; background:#404040; box-sizing:border-box; }
	.Box.Thin { width:45%; }
	.Box.Wide { width:55%; }
	.Box.Wider { width:100%; }
	.Box.Tall { height:700px; overflow-y:hidden; }	
    .Box.Taller { height:1000px; overflow-y:hidden; }	

	.Box h2 { display:inline-block; margin:0; padding:10px 15px; border-bottom:3px solid #69C; width:100%; font-size:18px; line-height:18px; text-align:left; text-transform:uppercase; background:#474747; }

footer { display:block; padding:40px; color:#A7A7A7; text-align:center; text-transform:uppercase; }
	footer nav { padding-bottom:20px; }
		footer nav a { margin:20px 0 0; padding:0 10px; line-height:20px; color:#A7A7A7; font-size:12px; }
		footer nav a:hover { color:#1b3766; font-weight:bold; }
		footer .SocialIcons a { padding:0 10px; }
	footer .HasChildren { display:inline; }
		footer .HasChildren > a { display:none; }
		footer .HasChildren .Sublevel { display:inline; position:relative; }
	footer p { display:inline-block; margin:0 0 40px; padding:0 20px; line-height:20px; font-size:12px; }
	
/* Custom Classes */
.Centered, .Centered p { text-align:center; }
.Row { display:inline-block; position:relative; width:100%; overflow:hidden; }

.Label { display:inline-block; width:110px; font-weight:bold; }
	.Career p { margin:5px 0; }
	.Career strong { display:inline-block; padding-bottom:20px; }
	.Hidden { display:none; }

#FAQWrapper { display:inline-block; float:left; width:100%; box-sizing:border-box; }
	#FAQWrapper .FAQ { padding:10px 20px 60px; box-sizing:border-box; }
	#FAQWrapper .FAQ p { margin:0; padding:5px 10px; }
#SamplesWrapper { display:inline-block; padding:0; width:100%; box-sizing:border-box; }
	#SamplesWrapper > div { display:none; padding:40px; width:100%; box-sizing:border-box; text-align:center; }
	#SamplesWrapper > div h1 { margin:0; }
	
#LoginForm label { display:inline-block; float:left; width:50%; }

.GroupControls { position:absolute; top:0; right:0; width:100%; padding:3px 10px; font-size:18px; line-height:18px; text-align:right; }
.GroupControls a { padding:0 5px; font-size:32px; color:#ccc; vertical-align:top; }
.GroupControls .fa-plus { padding-top:2px; color:#69C; }
.GroupControls a:hover { color:#69C; }

.LandingPage { text-transform:uppercase; }
.LandingPage .TableWrapper { height:auto; max-height:450px; }
.LandingPage .DataTable .Cell { text-align:left; }
.LandingPage input { width:250px; max-width:100%; }

.AvatarLarge { margin:0 0 30px; }

.TableWrapper { display:inline-block; width:100%; height:450px; overflow-y:scroll; }
.TableWrapperTall { display:inline-block; width:100%; height:650px; overflow-y:scroll; }
.TableWrapperTaller { display:inline-block; width:100%; height:750px; overflow-y:scroll; }
.DataTable { display:table; position:relative; width:100%; height:auto; text-align:left; }
.DataTable .TableRow { display:table-row; width:100%; }
.DataTable .TableRow .Priority { background-color:#A7BEFF; }
.DataTable .Cell { display:table-cell; padding:5px 10px; border-bottom:4px solid #474747; font-size:11px; line-height:14px; text-align:center; }
.DataTable .Cell .Top {top:20px;}
.DataTable .Header .Cell { text-align:left; text-transform:uppercase; cursor:default; }
.DataTable .Cell p { margin:0; padding-right:20px; padding-left:0; max-width:250px; text-align:left; cursor:default; }
.DataTable .CellWide { display:table-cell; padding:5px 10px; border-bottom:4px solid #474747; font-size:11px; line-height:14px; text-align:center; }
.DataTable .Header .CellWide { text-align:left; text-transform:uppercase; cursor:default; }
.DataTable .CellWide p { margin:0; padding-right:20px; padding-left:0; max-width:500px; text-align:left; cursor:default; }
.DataTable .CellWide .Top {top:20px;}
.DataTable .CellWidest { display:table-cell; padding:5px 10px; border-bottom:4px solid #474747; font-size:11px; line-height:14px; text-align:center; }
.DataTable .Header .CellWidest { text-align:left; text-transform:uppercase; cursor:default; }
.DataTable .CellWidest p { margin:0; padding-right:20px; padding-left:0; max-width:100%; text-align:left; cursor:default; }
.DataTable .CellWidest .Top {top:20px;}
/*.DataTable .TableRow:not(.Header):hover { background:#4B637B; !*background:#A4B1F7;*! }*/
/*.DataTable .TableRow:not(.Header):hover .fa { color:#fff; }*/
/*.DataTable .Cell .fa { font-size:30px; color:#ccc; vertical-align:middle; }*/
.DataTable .Cell .fa { font-size:20px; color:#ccc; vertical-align:middle; }
.DataTable .Cell .fa-play { font-size:18px; padding-top: 4px; }
.DataTable .Cell .fa-pause { padding-top: 4px; }
.DataTable .Cell .fa-plus { padding-top:4px; }
.DataTable .Cell .fa-copy {padding-top: 4px;}
.DataTable .Cell .fa-remove {padding-top: 4px;}
.DataTable .Cell .fa-pencil {padding-top: 4px;}
.DataTable .Cell .fa-trash { padding-top:4px; }
.DataTable .Cell .fa-trash-o { padding-top:4px; }
.DataTable .Cell .fa-minus { padding-top: 4px; }
.DataTable .Cell .fa-thumbs-up { padding-top: 4px; }
.DataTable .Cell .fa-thumbs-down { padding-top: 4px; }
.DataTable .Cell .fa-star {padding-top: 4px;}
.DataTable .Cell .fa-star-o {padding-top: 4px;}
.DataTable .Cell .fa-calendar {padding-top: 4px; font-size:18px;}
.DataTable .Cell input[type="checkbox"] { margin:2px 0 0; width:14px; height:14px; border-radius:15px; border:none; cursor:pointer; }
.DataTable .ListCell .fa-check { font-size: 16px; padding-top: 2px; color:#ccc; }
.DataTable .ListCell { display:table-cell; padding:5px 10px; border-bottom:4px solid #474747; font-size:13px; line-height:14px; text-align:left; }
.DataTable .Width5 { width: 4%;text-align:right; }
.DataTable .Width10 { width: 9%;text-align:right; }
.DataTable .Width20 { width: 19%; }
.DataTable .Width30 { width: 29%; }
.DataTable .Width40 { width: 39%; }
.DataTable .Width50 { width: 49%; }
.DataTable .Width60 { width: 59%; }
.DataTable .Width70 { width: 69%; }
.DataTable .Width80 { width: 79%; }
.DataTable .Width90 { width: 89%; }
.DataTable .Width5 .Right { text-align:right; }
.DataTable .ListCell .fa { font-size:30px; color:#ccc; vertical-align:middle; }
.DataTable .ListCell .fa-play { font-size:26px; }
.DataTable .ListCell .fa-plus { padding-top:4px; }
.DataTable .ListCell .fa-minus { padding-top: 4px;color:#D35658; }
.DataTable .ListCell input[type="checkbox"] { margin:25px 0 0; width:26px; height:26px; border-radius:15px; border:none; cursor:pointer; }

@media (min-width:1201px) {
	.Box.Thin, .Box.Wide { border-right:20px solid #333; }
	.Box.Thin:not(:first-child), .Box.Wide:not(:first-child) { border-left:20px solid #333; border-right:none; }
	select { display:inline-block; padding:10px; font-size:16px; }
}
@media (max-width:1200px) {
		header nav a { padding:20px 2vw; }
		header nav .SocialIcons { padding-left:0; width:100%; background:#f3f3f3; }
			header nav .SocialIcons a { padding:10px; }
			
	.Box.Thin, .Box.Wide { width:100%; }
	aside .GroupItems { display:block; }
}
@media (max-width:1024px) {
	.GradientBox .Right { width:60%; }
}
@media (max-width:900px) {
	header nav a { padding:20px 1.3vw; }
	
	.GradientBox .Right { width:70%; }
}
@media (min-width:901px) {
	header { height:80px; }
	
	aside { position:absolute; top:80px; left:0; bottom:0; width:250px; }
		aside .GroupNavList { display:block; }
	header #MobileNavButton { display:none; }
	header #MobileNavWrapper { display:inline-block !important; }
	
/*Custom Classes*/
header .HasChildren:hover { background:#f3f3f3; }
	header .HasChildren .Sublevel { position:absolute; left:0; background:#fff; -webkit-box-shadow:0 6px 12px rgba(0, 0, 0, .175); box-shadow:0 6px 12px rgba(0, 0, 0, .175); }
	header .HasChildren:hover .Sublevel { display:inline-block; }

}
@media (max-width:900px) {
	form .Column { padding:20px 10px; }
	
	header #MobileNavWrapper { display:none; }
		header .HasChildren { width:100%; }
		header nav #Logo { position:absolute; bottom:100%; left:0; z-index:5; }
		header nav a { padding:20px; width:100%; box-sizing:border-box; }
		header nav > *:first-child { margin-left:0; }
		header nav a:hover, header .HasChildren .Sublevel a:hover { color:#fff; background:#1b3766; }
		header nav .SocialIcons { background:#fff; }
			header nav .SocialIcons a { padding:20px; }
		header .HasChildren .Sublevel { border-left:none; border-right:none; }
		header .HasChildren .Sublevel.Expanded { display:block; }
			header .HasChildren .Sublevel a { padding:20px; background:#f3f3f3; text-align:center; white-space:initial; }

	content { display:inline-block; margin-left:0; padding:20px; width:100%; }
	.Box { margin-bottom:20px; }
	
	footer { margin-left:0; padding:20px; box-sizing:border-box; }
	footer p { margin-bottom:20px; padding:0; width:100%; border-right:none; box-sizing:border-box; text-align:center; }
	
	
	
	aside { border-bottom:10px solid #474747; width:100%; box-sizing:border-box; }
		aside ~ * { width:100% !important; }
		aside .GroupNavList { display:block; }
		
	
}
@media (max-width:640px) {
    header #Logo { width: 110px; top: 10px; }
    
    header #UserID { right:10px; }
    header #UserID span { display:none; }
    
    .DataTable .Cell { padding:4px; font-size:11px; vertical-align:middle; }
    .DataTable .Cell p { padding-right:0; }
    .DataTable .Cell .fa { font-size:20px; }
    .DataTable .Cell .fa-play { font-size:16px; }
    .DataTable .Cell .fa-plus, .DataTable .Cell .fa-minus { padding-top:2px; }
}
@media (max-width:480px) {
	form .Column, form .Group { padding:20px; width:100%; box-sizing:border-box; }
	form .FixedHeight { margin:0 0 10px; padding:0; }
		form .FixedHeight label { position:relative; width:100%; }
		form .FixedHeight input { width:100%; }
    
    .DataTable .Cell { font-size:10px; }
	
	.Jukebox { margin:24px 12px 0; padding:10px; }
	.JukeboxSh { margin:24px 12px 0; padding:10px; }
	.JukeboxShMus { margin:24px 12px 0; padding:10px; }
}
/* CRANDELL - FISHEYE TOP RIGHT LOGO 5/25/2016 */
.LogoCropper {
	width: 100px;
    height: 100px;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
}

.LogoCropper img{
	display: inline;
    margin: 0 auto;
    height: 100%;
    width: auto; 
}
#Logo {
	width: 100px;
    height: 100px;
    position: relative;
}

#Logo img{
	display: inline;
    margin: 0 0;
	padding:0;
    height: 80%;
    width: auto; 
}
#JukeboxShufflePlayer ~ p { margin:0; }
#JukeboxPlayer ~ p { margin:0; }
.Jukebox { margin:24px 2px 0; padding:7px; }
.JukeboxSh { margin:24px 2px 0; padding:7px; }
.JukeboxShMus { margin:24px 2px 0; padding:7px; }
#HideJukebox { display:inline-block; text-align:center; }

#cstabs {
	width:67%;
	height:700px;
	font-size:14px;
	font-family:Verdana, Helvetica, sans-serif;
}

input.visible {
  visibility: visible !important;
}

#dlg {
	
	font-size: 24px;
}

.AltRow {
	background-color:#4B637B; /*background-color:#A4B1F7*/;
}

.err {
	color:#428bca;
}

.note {
	color:#428bca;
}

.center {text-align:left; vertical-align: top;}

.smaller {font-size:10px;}

.blueSpan { color:#447CB2; }
.greenSpan { color:#41B041; }
.redSpan { color:#D35658; }
.line24 { margin:24px 12px 0; padding:10px; }

form .GreenButton {padding:5px;background-color:#6C6;width: 200px;color:white;border-width: 0;alignment: left;}
form .BlueButton {padding:5px;background-color:#69C;width: 200px;color:white;border-width: 0;}
form .RedButton {padding:5px;background-color:#D35658;width:200px;color:white;border-width: 0;}
.Tall {line-height: 15px;}
.Long {width:240px;}

.ScrSummary {font-size:10px;}

.card {background-color: #d0d0d0}
.card .card-body {background-color: #d0d0d0}

.prod-summary {max-height: 640px; overflow: auto;}

.prod-summary-content {text-align: left; padding-right:0; padding-left:0; padding-top:0;}

.prod-summary-scroll {
	overflow-y: scroll;
	max-height: 480px;
}

.custom-scr-file {
	max-width: 240px;
	width: 100%;
}

.big {
	font-size: 16px;
}

.fa { font-size:24px; color:#ccc; vertical-align:middle; }
.fa-play { font-size:18px; color: #229722; }
.fa-plus { padding-top:4px; }
.fa-copy {padding-top: 4px;}
.fa-remove {padding-top: 4px;}
.fa-pencil {padding-top: 4px;}
.fa-trash-o { padding-top:4px; }
.fa-square-o { padding-top:4px; }
.fa-check-square { padding-top:4px; }
.fa-minus { padding-top: 4px; color:#D35658; }

.disabled-star {color:#333;opacity:0.4;}

.form-close-btn {
	max-width: 40px;
}

a .shuffle-nav:hover {
	text-decoration: none;
}

.library-nav {
	color:#b1b1b1;
}
.library-nav:hover {
	text-decoration: none;
	color:#b1b1b1;
}
.text-uppercase {text-transform: uppercase;}
.active-group {color:#ccc;}
.tiny {font-size:14px;}
.bold {font-weight:bold;}

.is-disabled {
  color: #111;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}