/* ==========================================================================
	Dashboard Page Specific Settings
========================================================================== */

/*--- Welcome User --- */
#welcome-user { margin-bottom:32px;}
#welcome-user h2 { margin-bottom:12px;}
#welcome-user p { color:#8a858d; margin-bottom:0;}

/*--- Gray Box --- */
.gray-box {border-radius: 6px; background: #f7f7f7; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12); padding:12px 16px 16px;}
.gray-box.no-shadow { box-shadow:none;}
.gray-box h6 {color:#8a858d; font-style:italic; margin-bottom:8px;}
.gray-box figure { width: 64px; height: 64px; text-align:center; border-radius: 3px; background-color: #ffffff; border: solid 1px #dadada; float:right; margin-left:16px; line-height:61px; background-size:100% 100%; background-repeat:no-repeat; text-align:center;}
.gray-box figure img { max-width:62px; max-height:62px;}
.gray-box .see-more-lnk { text-decoration:underline; font-size:12px; line-height:16px; color:#666666; display:inline-block; margin-top:12px;}

.gray-box .badges-list li { font-weight:normal; color:#4a4548; line-height:23px;}
.gray-box .badges-list li img { width:24px; height:24px;}

/*--- Problem Box --- */
.problem-box {border-radius: 6px; background-color: #ffffff; border: solid 1px #e9e9e9; padding:16px; position:relative;}
.problem-box:before { height:4px; position:absolute; left:0; width:100%; top:0; border-radius:3px 3px 0 0; content:""; display:block;}
.problem-box h5 { margin-bottom:8px;}
.problem-box .button1 { min-width:160px; }
.problem-box h6 { font-style:normal; margin-bottom:0;}
.problem-box dl.description-list dd { margin-left:90px; margin-bottom:4px;}
.problem-box .inner { height:94px;}
.problem-box .action-lnk { display:inline-block; margin-top:12px;}

.problem-box.new-skill { background:#fbf4ed;}
.problem-box.skill-problem:before {background: rgba(255,191,95,1);
background: -moz-linear-gradient(left, rgba(255,191,95,1) 0%, rgba(255,135,55,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,191,95,1)), color-stop(100%, rgba(255,135,55,1)));
background: -webkit-linear-gradient(left, rgba(255,191,95,1) 0%, rgba(255,135,55,1) 100%);
background: -o-linear-gradient(left, rgba(255,191,95,1) 0%, rgba(255,135,55,1) 100%);
background: -ms-linear-gradient(left, rgba(255,191,95,1) 0%, rgba(255,135,55,1) 100%);
background: linear-gradient(to right, rgba(255,191,95,1) 0%, rgba(255,135,55,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbf5f', endColorstr='#ff8737', GradientType=1 );}
.problem-box.practice-problem:before {background: rgba(78,181,241,1);
background: -moz-linear-gradient(left, rgba(78,181,241,1) 0%, rgba(66,120,245,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(78,181,241,1)), color-stop(100%, rgba(66,120,245,1)));
background: -webkit-linear-gradient(left, rgba(78,181,241,1) 0%, rgba(66,120,245,1) 100%);
background: -o-linear-gradient(left, rgba(78,181,241,1) 0%, rgba(66,120,245,1) 100%);
background: -ms-linear-gradient(left, rgba(78,181,241,1) 0%, rgba(66,120,245,1) 100%);
background: linear-gradient(to right, rgba(78,181,241,1) 0%, rgba(66,120,245,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4eb5f1', endColorstr='#4278f5', GradientType=1 );}
.problem-box.challenge-problem:before{
background: rgba(33,181,161,1);
background: -moz-linear-gradient(left, rgba(33,181,161,1) 0%, rgba(19,151,166,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(33,181,161,1)), color-stop(100%, rgba(19,151,166,1)));
background: -webkit-linear-gradient(left, rgba(33,181,161,1) 0%, rgba(19,151,166,1) 100%);
background: -o-linear-gradient(left, rgba(33,181,161,1) 0%, rgba(19,151,166,1) 100%);
background: -ms-linear-gradient(left, rgba(33,181,161,1) 0%, rgba(19,151,166,1) 100%);
background: linear-gradient(to right, rgba(33,181,161,1) 0%, rgba(19,151,166,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#21b5a1', endColorstr='#1397a6', GradientType=1 );
}

.problem-box.webinar-block { padding:0;}
.problem-box.webinar-block header { position:relative; padding:18px 16px; border-radius:5px 5px 0 0; background-color:rgba(25, 25, 25, 1); height:79px; background-size:cover; background-position:center center;}
.problem-box.webinar-block header:after { width: 100%; height: 100%; border-radius:5px 5px 0 0; position: absolute; left: 0; top: 0; background:rgba(25, 25, 25, 0.8); content: ""; display: block;}
.problem-box.webinar-block header h5 {color:#fff; line-height:22px; margin:0; line-height:22px; position:relative; z-index:1;}
.problem-box.webinar-block header .play-icon { float:right; margin-top:1px; width:40px; height:40px; display:block; border-radius:50%; text-align:center; margin-left:16px; line-height:40px; background:#d7263d; z-index:1; position:relative;}
.problem-box.webinar-block header .play-icon:after { width:16px; height:18px; content:""; position:absolute; left:14px; top:11px; background:url(images/tg_images_new/sprites.svg) -373px -311px no-repeat;}
.problem-box.webinar-block .content { padding:12px;}
.problem-box.webinar-block .content figure { float:left; width:54px; height:54px; line-height:51px; margin:0;}
.problem-box.webinar-block .content figure img { max-width:52px; max-height:52px; border-radius:2px;}
.problem-box.webinar-block .content .details { margin-left:66px;}
.problem-box.webinar-block .content h5 { font-weight:normal; margin-bottom:4px; padding-top:6px;}
.problem-box.webinar-block .content p { margin:0; font-size:12px; line-height:16px; color:#8a858d;}

/*--- My Skills Report --- */
#my-skills-report .tab-content { padding:12px 16px 16px;}
#my-skills-report .nav-tabs > li { width:16.66666%;}
#my-skills-report .nav-tabs > li > a { padding:16px 16px 6px;}
#my-skills-report .nav-tabs li a small { font-size:12px; text-transform:uppercase; color:#8a858d; display:block; font-weight:normal; line-height:16px; padding-top:3px;}
#my-skills-report .nav-tabs li.active > a small, #my-skills-report .nav-tabs li.active > a:hover small, #my-skills-report .nav-tabs li.active > a:focus small {color:#19171a;}
#my-skills-report .nav-tabs li.more-links .down-arrow { width:8px; height:8px; margin-left:2px; position:relative; display:inline-block; vertical-align:middle; background:url(images/tg_images_new/sprites.svg) -208px -188px no-repeat;}
#my-skills-report .nav-tabs li.more-links > a { height:56px; padding-top:23px;}
#my-skills-report .nav-tabs li.more-links.open > a { background:#fff; box-shadow: 0 6px 12px rgba(0,0,0,0.175); position:relative; border-radius:0 5px 0 0;}
#my-skills-report .nav-tabs .dropdown-menu { width:100%; height:342px; overflow:auto; border:0; border-radius:0 0 3px 3px; padding:0; box-shadow:0 11px 12px rgba(0,0,0,0.175); display:none !important;} 
#my-skills-report .nav-tabs .open .dropdown-menu { display:block !important;}
#my-skills-report .nav-tabs .dropdown-menu li a { padding:11px; text-align:center; line-height:16px; color:#8a858d;}
#my-skills-report .nav-tabs .dropdown-menu li:last-child a { border-radius:0 0 2px 2px;}
#my-skills-report .nav-tabs .dropdown-menu > li > a:hover, #skill-analysis .nav-tabs .dropdown-menu > li > a:focus { background-color:#f2f2f2; color:#4a4548;}
#my-skills-report .open > a, #my-skills-report .open > a:hover, #my-skills-report .open > a:focus {border-color:#dadada;}

/*--- Top Block --- */
.top-block  { padding:4px 0 0 6px;}
.top-block h6 { font-style:normal; margin-bottom:12px;}
.top-block figure { float:left; margin:0; border-radius:6px;}
.top-block .details { margin-left:80px; padding-right:6px; min-height:72px;}
.top-block .details h5 { margin-bottom:4px;}
.top-block dl.description-list dd { margin-bottom:4px;}
.top-block footer { padding-top:16px; clear:both; padding-left:81px;}
.top-block footer .action-lnk { float:right; line-height:24px;}

.gray-box.toppers-wrap { padding-bottom:0;}

.top-block.top-candidate { padding:16px 6px 8px 0; margin:-12px 0 0; position:relative;}
.top-block.top-candidate:after { content:""; height:100%; position:absolute; right:-10px; top:0; background:#dadada; display:block; width:1px;}
.top-block.top-candidate figure { border:0; line-height:64px;}
.top-block.top-candidate figure img { max-width:64px; max-height:64px; border-radius:5px;}

.top-block.top-company figure { line-height:54px; padding:4px;}
.top-block.top-company figure img { max-width:54px; max-height:54px;}

/*--- Performance in Coding --- */
.performance-in-coding h6 { color:#666666; font-style:normal; margin-bottom:28px;}
.performance-in-coding h6 span { color:#8a858d;}
.performance-in-coding h6.left-padding { padding-left:6px;}
.performance-in-coding .middle-content { padding:12px 16px 0; position:relative; height:224px; position:relative; margin:-12px 0 -16px;}
.performance-in-coding .middle-content:after { content:""; height:100%; position:absolute; right:0; top:0; background:#dadada; display:block; width:2px;}
.performance-in-coding .middle-content:before { content:""; height:100%; position:absolute; left:0; top:0; background:#dadada; display:block; width:2px;}
.performance-in-coding .tips { display:inline-block; position:absolute; right:16px; top:15px; z-index:2; width:16px; height:16px; background:url(images/tg_images_new/sprites.svg)-237px -240px no-repeat; vertical-align:middle; }

/*--- Aq Growth Graph --- */
.sq-growth-graph {position:relative; margin-top:-60px; margin-left:-16px; height:215px;}

/*--- Aq Distribution Graph --- */
.sq-distribution-graph {position:relative; margin:-8px 0 -8px -16px; height:162px;}

/*--- Skill Quotient Block --- */
.skill-quotient-block dl.description-list dd { margin-bottom:20px;}
.skill-quotient-block .percentage { font-size:32px; line-height:32px; color:#4a4548; display:block; margin-bottom:18px;}
.skill-quotient-block .progress { width:305px; height:8px; margin:0 0 27px; border-radius:4px; background:#e5e5e5;}
.skill-quotient-block .progress .progress-bar {border-radius:4px; background-color: #ff0000;}
.skill-quotient-block .progress.top .progress-bar {background-color: #26d974;}
.skill-quotient-block .progress.medium .progress-bar {background-color: #feb95f;}

/* SQ Growth Graph User PlotLine Tooltip */
.thetooltip {color:#fff;	border-radius: 3px;	background-color: #979797; padding:0 8px; position: absolute; float:left; margin-left:-75px; min-width:70px;	text-align:center;z-index:0; box-shadow: 1px 1px 3px #666;}
.thetooltip.left { margin-left:0; margin-right:-75px; left:-6px;}
.tooltiptext{font-size:10px; color:#fff;}
.plotline {
     &:hover {
       .thetooltip {
          display: block;
        }
     }
}