/**
App Dashboard specific styles used in Dashboard.html
**/

/* User-defined actions that appear at the top-right side of the app dashboard */
#dashboardActions {
    text-align: right;
    margin: 0.5em 1em -1.5em 0;
    white-space: nowrap;
    z-index: 1; /* make it poke over the dashboard sections, which don't have a Z-index */
}
#dashboardActions > * {
    display: inline-block;
    vertical-align: baseline;
    max-width: 300px;
    margin: 0 0 0 1.5em;
    text-decoration: none;
    /*for really long names*/
    white-space: normal;
    word-wrap: break-word;
}
#dashboardActions a .Icon {
    display: inline-block;
}
#dashboardActions a .Icon16 {
    width: 16px;
    height: 16px;
    background-position: center center;
    margin: 0 0 3px 0;
}

/*
Two-column layout with fixed 200px left column, fluid right column, 25px space between them
*/
#dashboardSections {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
}

#dashboardSections > tbody > tr > td {
    vertical-align: top;
}

#dashboardSections.TwoColumn > tbody > tr > .RightColumn {
    padding-left: 25px;
    width: 100%;
}

/*
A generic section (left column, text, description, report) in the dashboard
*/
#dashboardSections .LeftColumn .Section {
    margin-bottom: 25px;
}
#dashboardSections .LeftColumn .Section .Title {
    padding: 4px 7px;
    color: white;
    background: #31619c;
}
#dashboardSections .WithToggleSections .ToggleSection {
    margin-top: 0;
    min-height: 0;
}

#reportsListColumn .ToggleSectionIcon {
    cursor: pointer;
    display: inline-block;
	top: 0;
	left: 0;
	margin: 0 5px 0 0;
	vertical-align: middle;
}
#dashboardSections .LeftColumn .Section .Title {
    background: transparent;
    color: black;
    padding: 0;
}

#dashboardSections .Section .Contents {
    padding: 10px;
    display: block;
    background: white;
}

/* Report sections by default are inline-block so they collapse down to right width */
#dashboardSections .Report.Section {
    clear: both;
    position: relative;
}
body.IE #dashboardSections .Report.Section {
    zoom: 1;
    *display: inline;
}
/*embedded reports are style="width:100%" ; in IE this makes the actual columns go full-width
even when not supposed to (for example, summary reports shouldn't expand) */
body.IE #dashboardSections .Report.Section > .Contents > .viewOuter {
    width: auto !important;
}
body.IE #dashboardSections .Report.Section.FullWidth > .Contents > .viewOuter {
    width: 100% !important;
}
/* Some reports are forced to full-width in the dashboard */
#dashboardSections .Report.Section.FullWidth {
    width: 100% !important;
}
#dashboardSections .Report.Section .Contents,
#dashboardSections .Text.Section .Contents {
    padding: 0 0 0 2.2em;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
body.UXV2 #dashboardSections .Report.Section .Contents {
    margin-top: 0.6em;
}
#dashboardSections .Section .Contents p {
    margin: 1em 0;
}
#dashboardSections .Section .Contents :first-child {
    margin-top: 0;
}
#dashboardSections .Section .Contents :last-child {
    margin-bottom: 0;
}
body.UXV2  #dashboardSections .Text.Section .Contents,
body.UXV2  #dashboardSections .Report.Section .Contents {
    padding-bottom: 20px;
}

#dashboardSections .Text.Section {
    color: #3d3d3d;
    word-wrap:break-word;
}
#dashboardSections .Text.Section:first-child {
    margin-top: 10px;
}
/* Application statistics, found in description sections */
#dashboardSections .AppStats {
    color: #555;
    margin-bottom: 0;
}
#dashboardSections .AppStats a {
    text-decoration: none;
    color: #00c;
}
#dashboardSections .AppStats a:hover {
    text-decoration: underline;
    color: #00f;
}


#dashboardSections .collapsed.Section {
    display: block;
}
/*
Styles specifically for the left column
*/
#dashboardSections .LeftColumn .Section {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    max-width: 300px;
}

/* Report list LHS column needs some specific changes just for it */
#dashboardSections .LeftColumn .Section#reportsListColumn {
    width: 200px;
}
/* V2 doesn't even show reports column title */
#dashboardSections .LeftColumn .Section#reportsListColumn .Title {
	display: none;
}



/*
List of reports (optional) on app dashboard
*/
.Section#reportsListColumn .Contents {
    padding: 0;
}
#reportsListColumn .TableName {
    padding: .5em;
}
body.UXV2 #reportsListColumn .TableName .sectionTitle {
    cursor: pointer;
    max-width: 100%;
    word-wrap: break-word;
}
#reportsListColumn ul {
    padding-left: 1.5em;
    padding-top: 0;
    margin: 0;
}
#reportsListColumn span.TableName {
    font-weight: bold;
    font-size: 90%;
    background-color: #EEE;
    display: block;
    margin-top: .5em;
    margin-bottom: .5em;
    /* handle extremely long names */
    overflow: hidden;
    position: relative;
}
#reportsListColumn ul {
    padding: 0 0 0 .5em;
    margin: 0;
}
#reportsListColumn ul > li {
    color: #D33E08;
    list-style: disc outside none;
    padding: .2em .2em .2em 0em;
    margin-left: 1.25em;
}
#reportsListColumn ul > li > a {
    text-decoration: none;
    color: #222;
    background: none;
    word-break: break-word;
    display: block;
    word-wrap: break-word;
}
#reportsListColumn ul > li > a:hover {
    text-decoration: underline;
    color: Blue;
}
#reportsListColumn .ui-corner-all {
    border-radius : 0;
}


/* UXV2-specific reportlist styling */

body.UXV2 #reportsListColumn .TableName,
body.UXV2 #reportsListColumn .TableName:first-child {
    font-weight: normal;
    font-size: 100%;
    background: transparent;
    padding: 0;
    margin: 0 0 0.4em 0;
}
body.UXV2 #reportsListColumn .TableName > * {
    display: inline-block;
    vertical-align: middle;
}
body.UXV2 #reportsListColumn .Wrapper {
    margin-bottom: 1em;
}
body.UXV2 #reportsListColumn ul {
    padding: 0 0 0 0.25em;
    margin-left: 18px;
}
body.UXV2 #reportsListColumn ul > li {
    color: #ddd;
    padding: 0em;
    margin: 0;
}
body.UXV2 #reportsListColumn ul > li:hover {
    color: #427CD8;
}
body.UXV2 #reportsListColumn ul > li > a {
    text-decoration: none;
    color: #555;
    padding: 0.1em;
    display: block;
	vertical-align:top;
	word-wrap: break-word;
}
body.UXV2 #reportsListColumn ul > li > a:hover {
    color: #427CD8;
}

body.UXV2 #reportsListColumn ul > li.ReportGroupName {
    color: black;
    padding: 0em;
    list-style: none;
    padding: 0.25em 0;
    margin: 0.25em 0 0.1em -1.25em;
    sfont-weight: bold;
    border-bottom: 1px solid #ccc;
}

/*
Get Started task styles
*/

#dashboardSections .LeftColumn .GettingStarted.Section {
    background: #e7f1fd;
    border-radius: 3px;
    padding: 14px;
}

#dashboardSections .LeftColumn .GettingStarted.Section .Title {
    padding: 0 0 0.8em 0;
    font-weight: bold;
}
#dashboardSections .LeftColumn .GettingStarted.Section .Contents {
    background: transparent;
    padding: 0;
    border: none;
}

/* the "% complete" progress bar, showing what portion of tasks are done */
#dashGetStartedColumn #progressbar {
    margin: 0 0 5px 0;
	height: 27px;
	border: 1px solid #D7DBE0;
	border-radius: 0;
    background: #edf1f6;
    background: -moz-linear-gradient(top,  #edf1f6 0%, #f5f9fe 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#edf1f6), color-stop(100%,#f5f9fe));
    background: -webkit-linear-gradient(top,  #edf1f6 0%,#f5f9fe 100%);
    background: -o-linear-gradient(top,  #edf1f6 0%,#f5f9fe 100%);
    background: -ms-linear-gradient(top,  #edf1f6 0%,#f5f9fe 100%);
    background: linear-gradient(to bottom,  #edf1f6 0%,#f5f9fe 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edf1f6', endColorstr='#f5f9fe',GradientType=0 );
}

#dashGetStartedColumn #progressbar .ui-progressbar-value {
    background: #f17d36;
    background: -moz-linear-gradient(top,  #f17d36 0%, #ca560f 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f17d36), color-stop(100%,#ca560f));
    background: -webkit-linear-gradient(top,  #f17d36 0%,#ca560f 100%);
    background: -o-linear-gradient(top,  #f17d36 0%,#ca560f 100%);
    background: -ms-linear-gradient(top,  #f17d36 0%,#ca560f 100%);
    background: linear-gradient(to bottom,  #f17d36 0%,#ca560f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f17d36', endColorstr='#ca560f',GradientType=0 );
    border: none;
    border-radius: 0;
    margin: 0;
}
/* After the page loads, #progressbar is given the Initialized class
which we use to turn on CSS animations for the progress bar.  We wait
until after page load so the bar doesn't animate every single time the page is loaded */
#dashGetStartedColumn #progressbar.Initialized .ui-progressbar-value {
    -webkit-transition: 0.333s linear all;
    -moz-transition: 0.333s linear all;
    transition: 0.333s linear all;
}
/* Help/prompt text below the progress bar */
#dashGetStartedColumn #progressbarText {
    color: #000;
    margin-top: 5px;
}



/* Some icons */
.GettingStarted .Icon {
    display: inline-block;
	width: 25px;
	height: 25px;
	background-image: url("./images/icons/appdash_sprite_25.png");
	background-repeat: no-repeat;
	background-position: 25px 25px;
}

/* Checkbox to-do list items */
.GettingStarted .CompletedTask a .Checkmark.Icon { background-position: 0px 0px; }
.GettingStarted li a:hover .Checkmark.Icon { background-position: 0px -25px; }
/* already completed tasks have no hover state */
.GettingStarted .CompletedTask a:hover .Checkmark.Icon { background-position: 0px 0px; }
.GettingStarted .JumpStart.Icon { background-position: -25px 0px; }
.GettingStarted .Contact.Icon { background-position: -50px 0px; }
.GettingStarted .Document.Icon { background-position: -75px 0px; }
.GettingStarted a:hover .Document.Icon { background-position: -75px -25px; }

/* A list of things for the user to do, with icons and text */
#dashboardSections .LeftColumn .GettingStarted.Section .TaskList { 
    list-style-type: none; 
    padding: 0;
    margin: 0;
} 
#dashboardSections .LeftColumn .GettingStarted.Section .TaskList li {
	margin-top: 5px;
	display: block;
}
#dashboardSections .LeftColumn .GettingStarted.Section .TaskList li a {
    position: relative;
    display: block;
    text-decoration: none;
    cursor: pointer;
    color: #427CD8;
    font-weight: bold;
    font-size: 95%;
    /* IE8 still has cell spacing on the child display:table-cell elements, this fixes it nicely */
    border-collapse: collapse;
}
#dashboardSections .LeftColumn .GettingStarted.Section .TaskList li a:hover {
    color: #fff;
}
#dashboardSections .LeftColumn .GettingStarted.Section .TaskList li a > * {
    display: table-cell;
    white-space: nowrap;
}
/* the background color for the icons */
#dashboardSections .LeftColumn .GettingStarted.Section .TaskList li a .Indicator {
    width: 35px;
    min-width: 35px;
    max-width: 35px;
    background: #888;
    position: relative;
    text-align: center;
    vertical-align: middle;
}
/* the text describing what to do */
#dashboardSections .LeftColumn .GettingStarted.Section .TaskList li a .Text {
    background: #f5f9fe;
    width: 100%;
    padding: 0.5em;
    border-left: 5px solid #E7F1FD;
}
#dashboardSections .LeftColumn .GettingStarted.Section .TaskList li a:hover .Text {
    background: #55a0ef;
    color: White;
}

/* a special case for the quick start video, which is taller and has no gap to the right of the indicator */
#playJumpStartVideoThumbnail {
    border: 2px solid #55a0ef;
    border-radius: 0;
}
#dashboardSections .LeftColumn .GettingStarted.Section .TaskList li.Video {
    background: #f5f9fe;
}
#dashboardSections .LeftColumn .GettingStarted.Section .TaskList li.Video:hover {
    background: #95c4f5;
}
/*Another div, that abuts the other two, which is full-width and has more info in it*/
#dashboardSections .LeftColumn .GettingStarted.Section .TaskList li.Video .ExtraInfo {
    display: block;
    cursor: pointer;
    margin-left: 40px;
    padding: 5px 5px 5px 0.5em;
    text-align: left;
}
#dashboardSections .LeftColumn .GettingStarted.Section .TaskList li.Video .ExtraInfo .Caption {
    color: #555;
    font-weight: normal;
    font-size: 95%;
    margin-top: 0.2em;
}
#dashboardSections .LeftColumn .GettingStarted.Section .TaskList li.Video:hover .ExtraInfo .Caption {
    color: #fff;
}
#dashboardSections .LeftColumn .GettingStarted.Section .TaskList li.Video a .Text {
    border-left-color: #f5f9fe;
}
#dashboardSections .LeftColumn .GettingStarted.Section .TaskList li.Video a:hover .Text {
    border-left-color: #55a0ef;
}

/* the different types of icon colors & hover effects */

#dashboardSections .LeftColumn .GettingStarted.Section .TaskList li a .Checkmark.Indicator {
    background: #dfe6bb;
}
#dashboardSections .LeftColumn .GettingStarted.Section .TaskList li.CompletedTask a .Checkmark.Indicator {
    background: #d2d246;
}
#dashboardSections .LeftColumn .GettingStarted.Section .TaskList li a .Resource.Indicator {
    background: #55a0ef;
}
#dashboardSections .LeftColumn .GettingStarted.Section .TaskList li a:hover .Resource.Indicator {
    background: #d2d246;
}


#watchOverviewVideoDialogCtr .Contents {
    background: #000;
    padding: 0;
    text-align: center;
}
#watchOverviewVideoDialogCtr .ui-dialog-buttonpane {
    display: none;
}