body{ background: #272727; margin:0px; padding:0px; color:#fff; font-family: 'MYRIADPROREGULAR';}
body.sscbg {	background: url(../img/ssc_bg.png) center top no-repeat #272727;}
@font-face {
    font-family: 'MYRIADPROREGULAR';
    src: url('fonts/MYRIADPROREGULAR.eot');
    src: local('MYRIADPROREGULAR'), url('fonts/MYRIADPROREGULAR.woff') format('woff'), url('fonts/MYRIADPROREGULAR.ttf') format('truetype');
}
.check_box{ width:1200px; margin:0px auto; padding:0px; max-width:100%}
.logo {	float: left;	margin-top: 20px;}
.top_header {	border-bottom: 16px solid #fff;	float: left;	width: 100%;	padding: 0 15px 15px;}
h3.safety {	float: right;	font-size: 30px;	padding-top: 40px;	margin: 20px;	font-weight: 600;	font-family:Arial, Helvetica, sans-serif}
.mycontant {	padding-top: 80px;	display: inline-block;	width: 100%;}
.text-center.mycontant h3 {	font-size: 40px;	margin: 25px 0 0;		font-family:Arial, Helvetica, sans-serif;		font-weight:600}
a.start {margin-top: 35px;display: inline-block;padding: 15px;background: #fff;color: #222;font-size: 35px;width: 560px;max-width: 100%;border-radius: 6px;font-weight: 600;font-family:Arial, Helvetica, sans-serif;text-decoration:none;
}
#myProgress {	width: 100%;	background-color: #fff;	height: 16px;	float: left;}
#myBar {    width: 1%;    height: 30px;    background-color: green;}
.top_header.noborder {	border-bottom: 0px;}
#my-bar {	background: #0061aa;	float: left;	height: 16px; transition: ease-in-out 1s}
.text-center.page2 {	max-width: 100%;	width: 100%;	margin: 0px auto;}
.text-center.page2 h3 {	font-size: 30px;	font-weight: bold;	margin: 50px 0 20px;	padding: 0;	font-family: Arial, Helvetica, sans-serif;	float: left;	text-align: center;	width: 100%;}
.back_bt {	float: left;	margin-top: 30px;	margin-bottom: 30px;}
.check_box {  display: block; position: relative; padding-left: 50px; cursor: pointer; font-size: 18px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;color:#333;font-family:'MYRIADPROREGULAR';
              line-height: 22px;color:#393939;}
.check_box input {    position: absolute;    opacity: 0;    cursor: pointer;}
.checkmark {    position: absolute;    top: 0px;    left: 0;    height: 30px;    width: 30px;    background-color: #fafafa;	border:1px solid #666;	border-radius:4px;}
/* On mouse-over, add a grey background color */
.check_box:hover input ~ .checkmark {    background-color: #fafafa;}
/* When the checkbox is checked, add a blue background */
.check_box input:checked ~ .checkmark {    background-color: #2196F3;}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {    content: "";    position: absolute;    display: none;}
/* Show the checkmark when checked */
.check_box input:checked ~ .checkmark:after {    display: block;}
/* Style the checkmark/indicator */
.check_box .checkmark:after {   left: 8px;top: 3px;width: 10px;height: 15px;    border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
.spcialcheckbox {	margin-top: 35px;	list-style: none;	padding: 0px;	text-align: left;}
.spcialcheckbox li { min-height: 100px;	padding: 20px 15px 15px;	background: #eaeaea;	border-radius: 4px;	margin-bottom: 20px;	float: left;	width: 48%; margin-right: 2%}
h1.companyname {	font-size: 50px;	text-align: left; color:efefef;	font-weight: bold;	margin:12px 0 0; padding:0px;		font-family: Arial, Helvetica, sans-serif;}
.text-center.mycontant.page3 {	padding-top: 30px;}
.result {	font-size: 22px;	font-weight: 600;	border-bottom: 2px solid #ddd;	text-transform: uppercase; margin-bottom: 10px; padding-bottom: 5px;}
ul.group {	list-style: none;	padding: 0px;	margin: 5px 0 0;}
ul.group li { float:none; display: inline-block; margin:0 5px; padding:0px;}
ul.group li a {	padding: 8px 10px;	background: #fff;	font-size: 15px;	border-radius: 20px;	min-width: 100px;	float: left;	color: #111;	font-weight: bold;	text-transform: uppercase;text-decoration:none;}
ul.listview {	text-align: left;	margin-top: 180px;	margin-left: 5%; list-style:none; padding:0}
ul.listview li { font-size:22px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; line-height:45px;}
.listview li span {	float: right;	color: #fff;}
.leftline {	width: 100%;	border-top: 3px solid #ddd;	margin-bottom: 15px;	float:left;	vertical-align:middle;	margin-top:70px;}
.rightline {	width: 100%;	border-top: 3px solid #ddd;	margin-bottom: 15px;	float:right;margin-top:70px;}
.centerbox{ width:12%; margin-left:2%; margin-right:2%; float: left;vertical-align: middle;}
img {	vertical-align: middle;	max-width: 100%;}
.leftline span {	display: inline-block;	padding-top: 13px;	font-size: 30px;font-style: italic;color: #cecece;}
.mychart {	display: inline-block;	margin-top: 40px;}
.bot_text {	font-size: 21px;	font-weight: 700; float: left; width: 100%;	font-family: Arial, Helvetica, sans-serif; color:#fff;		padding: 70px 7% 60px;}
.leftmobile ul.listview {	display:none;}
.leftcol {	width: 42%;	float: left;}
.rightcol {	width: 42%;	float: left;}
.rightmobile ul.listview {	display: none;}
.back_bt.next {	float: right;	margin-right: 20px;}
#chart_Pop1990_tooltip {     
    background: #fff;
    color: #333;
    padding: 7px;
    border-radius: 3px;
    max-width: 315px;
    word-break: break-word;}
    .selectbt {
    margin-top: 0px !important;
    float: right !important;
    background-color: #fff;
    border-radius: 25px;

}
#selectJobRole.selectbt select {
    background: transparent !important;
    position: relative;
z-index: 2;
}

#chart {	margin-top: 55px;	float: left;	text-align: left;	margin-left: -15%;}
.ptext {	position: absolute;	top: 39%;	left: 22%;	font-size: 23px;	text-align: center;	width: 165px;  height: 170px; z-index: -1; padding-top: 45px;background: rgba(124,124,124,0.5);}
.ptext strong {	color:#fff; width: 100%;display: inline-block;}
.spcialcheckbox.nameemailcustm li label.check_box {	padding-left: 3px;}
.canvasjs-chart-credit {	display: none !important;}
.canvasjs-chart-tooltip span {	color: #333 !important;}
.canvasjs-chart-tooltip div {	background: #fff !important;	border: 0px !important}
.mychart{ border: 1px solid #999; border-left: 0px; border-right: 0px; min-height: 310px; margin-top: 55px; width: 90%; position: relative;}
.mychart .linebox { position:relative;	border-bottom: 1px solid #999;	height: 77px;	border-right: 0;	border-left: 0;	margin: 0 0 0 50px; width: 95%; padding-left: 15px;}
.mychart .maxclass {text-transform: uppercase;	position: absolute;	background: #272727;	top: -20px;	padding: 0px 9px 0 0;	left: 0px;	font-size: 22px;	font-style: italic;}
.mychart .minclass {text-transform: uppercase;	position: absolute;	background: #272727;	bottom: -14px;	padding: 0px 9px 0 0;	left: 0px;	font-size: 22px;	font-style: italic;}
ul.myboxtop {    list-style: none;    text-align: left;    position: absolute;bottom: 0;z-index: 999;left: 5px;margin: 0px;}
ul.myboxtop li { background: #f00; padding: 5px; font-size: 22px; font-weight: 600; margin-right: 5%;}
ul.myboxtop li:last-child { margin-right: 0;}
#pagechart {	background: #ff722f;	float: left;}
.progress.progress-bar-vertical{ background: none; position: relative;}
.progress.vertical {    position: relative;    width: 100%;    float: left;    margin-right: 20px;    background: none;    -webkit-box-shadow: none;    -moz-box-shadow: none;    box-shadow: none;    border: none;    background: #ff722f;    margin-bottom: 0;border-radius: 0;height: auto;font-size: 22px; text-align: center; font-weight: 600;min-height: 70px;border: 2px solid #ddd;border-bottom: 0; min-height: 100px;  display: flex;  align-items: flex-end;}
.myboxtop {	position: absolute;	width: 100%;	bottom: 0px;	left: 60px;	bottom: -20px;	border-radius: 0;}
.myclass {	background: #ff722f;	font-size: 21px; bottom: 0;	padding-top: 10px;	font-weight: bold;	border: 2px solid #999; border-bottom: 0px;	font-family:Arial, Helvetica, sans-serif; text-transform: capitalize;}
.myclass:hover { background: #ee8b5c;}
.progress-bar-vertical {  width: 18.5%;  min-height: 310px;  display: flex;  align-items: flex-end;  margin-right: 5%;  float: left;  border-radius: 0;}
.progress-bar-vertical .progress-bar { position: absolute;  width: 100%;  height: 0;  -webkit-transition: height 0.6s ease;  -o-transition: height 0.6s ease;  transition: height 0.6s ease;}
.progress.progress-bar-vertical.myspace {	margin-right: 42px; }
.ui-tooltip.ui-widget.ui-corner-all.ui-widget-content {background: #fff !important;width: 250px; word-break: break-all;	position: absolute !important; text-transform: capitalize;	color: #333;	padding: 7px 15px; z-index: 9999;	border-radius: 2px;}
.top_header.noborderresultp {	border-bottom: 10px solid;}
span.outertxt {	top: -40px;	position: relative;}
ul.group li a.active {	background: #0061aa;	color: #fff;}
.sss {	position: absolute;	left: -54px;	top: 30%;	text-align:center;	width:60px;	font-size:12px;}
.sss.pop {	top: auto;	bottom: 10%;	left: 2px;	color:#ce352c;}
.sss.scthrd {	color: #2774af;}
.sss.scsec {	color: #14ab12;}
.sss.scfst{color:#ff712e}
/*label.check_box b {
        margin: 0;
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
}*/
.check_box b {	float: left;}
#load {	background-size: 250px !important;}
.myboxtop.mobilegview {
    display: none;
}
.showdiv {
    background: #fff;
    width: 250px;
    border-radius: 5px;
    color: #333;
    padding: 6px 10px;
}
.tooltipcusthide {
    position: absolute;
    top: -70px;
    font-size: 12px;
    background: #fff;
    color: #333;
    border-radius: 3px;
    text-align: left;
    padding: 5px 7px;
    width: 250px;
    right: 0;
    line-height: 18px;
    min-height: 55px;
    z-index: 99;
}
.progress.progress-bar-vertical {
    overflow: inherit;
}
.catname {

    font-weight: bold;
    font-size: 14px;

}
.catdesc {

    font-weight: 600;
    font-size: 12px;
    white-space: pre-line;
}
.fontaly{
    font-family: Arial, Helvetica, sans-serif !important;
    text-transform: capitalize !important;

}
i.fa.fa-times-circle-o.hidebox {
    cursor: pointer;
    margin-top: -9px;
    font-size: 20px;
    float: right;
    margin-right: -9px;
    color: red;
}
.alert_txt {
    color: #777;
    font-size: 21px;
    font-weight: 300;
    position: relative;
    top: -105px;
    width: 650px;
    max-width: 100%;
    margin: 0px auto;
}

@media (max-width: 1030px) {
    .container {	width: 100%;	padding: 0;}
    .text-center.mycontant.page3 .row {	padding: 0 15px;}
    ul.group li a {min-width: 120px}
    .text-center.page2 {	width: 600px;}
    .text-center.page2 h3 {	margin: 130px 0 20px;	}
    .spcialcheckbox li {	width: 100%;	margin-right: 0;}
    .check_box { font-size: 20px; padding-top: 0px; line-height: 30px;}
    .back_bt {	margin-top: 100px;}
    .naviagationbtn {	width: 600px;	margin: 0px auto; max-width: 100%}
    #chart {	margin-top: 55px;	margin-left:0%;}
    .ptext {		left: 34%;}
    .ptext strong {		width: 100%;	float: left;}
    .mychart{ min-height: 310px;}
    .text-center.mycontant.page3 {	overflow-x: hidden;}
    .mychart .linebox {	height: 77px;
    }.sss {	width: 64px;}
    #chart_Pop1990_tooltip {	width: 250px;}
    .spcialcheckbox li {	min-height: 60px;}
    .spcialcheckbox li {	padding: 10px 15px;}
    body.sscbg {	background-size: 100%;	background:cover;}
}
.selectbt select {
    padding: 9px 25px 7px 10px;
    border-radius: 25px;
    border: 0;
    color: #111;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    -webkit-appearance: none;
    text-align: left;
        outline: none;
        position: relative;
        z-index: 2;
        background: transparent;
}
.navbar.navbar-inverse.navbar-static-top.mypages {
    position: absolute;
    left: 0;
    top: 0;
}

.active.selectbt select {
    color: #fff;
}.selectbt.active {
    background-color: #0061aa !important;
    color: #fff;
}
.selectbt i {
    position: absolute;
    right: 10px;
    color: #333;
    font-size: 27px;
    top: 0;
}
.selectbt  {
    position: relative;
}

@media (max-width: 800px) {
    h1.companyname {	font-size: 35px;}
    ul.group li a {	min-width: 70px; font-size: 12px}	
    ul.listview {	margin-top: 90px;	margin-left: 0%;}
    ul.listview li {	font-size: 18px;}
    .bot_text {	font-size: 18px;	padding: 70px 5% 20px;}
    .centerbox {	margin-top: 25px;}
    .ptext {		left: 30%;}
    #chart {	margin-top: 0 !important;}
    .progress.progress-bar-vertical.myspace {	margin-right: 25px;}
    .ptext {	top: 32%; font-size: 20px;}
    .mychart .linebox {    height: 77px;}
    .mychart {    min-height: 310px;}
    .myclass {	font-size: 13px !important;	word-break: break-all;	padding: 3px; line-height: 16px;}
    .mychart .linebox {	 width: 93%;}
    .text-center.page2 {    width: 600px;}
    .selectbt select {
    font-size: 12px;
}

}


li.dropdown button {
    padding: 8px 10px;
    background: #fff;
    font-size: 15px;
    border-radius: 20px;
    min-width: 140px;
    float: left;
    color: #111;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    border: 0;
}

.backbtn_mob {
  background: #fff;
  padding: 7px;
  float: left;
  box-shadow: 0 0 3px #ddd;
  border-radius: 3px;
  margin-top: 7px;
  margin-left: 5px;
  display: none;
  position: absolute;
  top: 55px;
  z-index: 999;
  color: #F16122; text-decoration: none !important
}

.dropdown-menu.myalls li a {
    padding: 4px;
    border-bottom: 1px solid #ddd;
    border-radius: 0;
    margin: 0;
    width: 100%;
    text-transform: capitalize;
    color: #333
}
.dropdown-menu.myalls {
    padding-bottom: 0;
}

.dropdown-menu.myalls li.last a {
    border-bottom: 0;
    padding-bottom: 0;
}

.dropdown-menu {
    border-radius: 0;
}
.dropdown-menu.myalls {
    padding-bottom: 0;
    border-radius: 0px;
}


.dropdown-menu.myalls li {
    margin: 0;
    width: 100%;
    display: inline-block;
}
ul.listview li img {
    width: 35px;
}
@media (max-width: 767px) {
    .top_header {	padding: 0 5px 15px;}
    img {	max-width: 100%;}
    .mycontant span {	margin: 0 3%;	display: inline-block;}
    a.start {	font-size: 30px;	width: 350px;}
    .text-center.mycontant h3 {	font-size: 24px;	margin: 20px 0 0;}
    .text-center.page2 {	width: 94%;}
    .text-center.page2 h3 {	font-size: 20px;	margin: 40px 0 20px;}
    .check_box {	font-size: 17px;	}
    .result {	display: none;}
    ul.group {	width: 100%;	text-align: center; position: relative;z-index: 999;}
    ul.group li {	float: none;	display: inline-block;}
    h1.companyname {	font-size: 35px;	text-align: center;	margin-bottom: 25px;}
    .mychart {	float: left;	width: 100%;	clear: both;}
    .bot_text {	font-size: 16px;	padding: 30px 0 20px;	clear: both;}
    .leftline span {	display: inline-block;	padding-top: 8px;	font-size: 17px;}
    .mychart {	margin-top: 20px;}
    .leftline {	margin-top: 0px;}
    .rightline {	margin-top: 0px;}
    ul.listview {	margin-top: 0px;}
    .listview {	display: none;}
    .leftmobile ul.listview {	display: block;	width: 42%;}
    .rightmobile ul.listview {	display: block;	width: 42%;	float: right;}
    .leftmobile ul.listview {	display: block;	width: 100%; padding: 0px; list-style: none;	margin-bottom:0px;}
    .rightmobile ul.listview {	width: 100%;	margin-bottom:0px; padding: 0; list-style: none;}
    ul.listview li {	font-size: 12px;line-height: 25px;}
    ul.listview li img { width:17px; }
    .centerbox {	margin-top: 50px;}
    #my-cool-chart {	margin-left: -10%;}
    .text-center.mycontant.page3 .row {	padding: 0 5px;}
    .back_bt.prev {	float: left;	margin-left: 20px;}
    .back_bt {	margin-top: 50px;}
    #chart {	margin-top: -30px;  z-index: 1}
    .ptext {	left: 38%;	top: 145px; width: 175px; z-index: -2}
    .centerbox {    margin-top: 28px;}
    .canvasjs-chart-container canvas {
        position: relative !important;
    }#chartContainer {	height: 440px !important;}
    .bot_text {	font-size: 13px;	clear: both;	float: left;width: 100%; margin-bottom: 20px}
    .myclass {    font-size: 13px;}
    .progress.progress-bar-vertical.myspace {	margin-right: 44px;	float: right;}
    .progress-bar-vertical {	width: 18%;	margin-right: 3.5%;}
    ul.listview li {	width: 50%;	padding-right: 10px;	float: left;}
    .leftmobile {	margin-bottom: 35px;	float: left;	width: 100%; position: relative;z-index: 999;}
    .centerbox {	margin-top: -18px;}
    .text-center.mycontant.page3 {	overflow-x: hidden;}
    .mychart .linebox {	height: 76px;}
    .mychart {	min-height: 310px;}
    h3.safety {	margin: 20px 10px;	padding-top: 20px;}
    .top_header {	padding: 0 5px 0px;}
    .ui-tooltip.ui-widget.ui-corner-all.ui-widget-content { display: none }
    .mychart .linebox {	width: 85%;}
    .myboxtop {	left: 60px;}
    h3.safety {	font-size: 20px; padding-top: 25px;}
    .logo img {	width: 140px;}
    .spcialcheckbox li { min-height: 65px;
    }
    .sss {
        position: absolute;
        left: -54px;
        top: 30%;
        text-align: center;
        width: 58px;
        font-size: 11px;
        padding-left: 2px;
        margin: 0px !important;
    }.sss.pop {
        left: -3px;
    }body.sscbg {	background: url(../img/ssc_bg.png) center 50% cover; background-size:100% ; background-position: 0px 75%;}
    .myboxtop.mobilegview {
        display: block;
    }.myboxtop.mobilegview .myclass {
        font-size: 22px !important;
        line-height: 25px;
    }
    .tooltipcusthide.tooltipcust-1 {
        left: -65px;
    }
    .tooltipcusthide.tooltipcust-0 {
        left: 0px;
    }
    .tooltipcusthide.tooltipcust-2 {
        right: 0px;

    }
    .tooltipcusthide.tooltipcust-3 {
        right: 0px;

    }#chart {
        width: 70% !important;
        margin-left: 15%;
    }
    .ui-chart-tooltip.bold.fontaly {
        text-align: left;
    }
    .mycontant span {
        text-align: left;
    }
.backbtn_mob {
  display: block;
}.navbar.navbar-inverse.navbar-static-top.mypages {
    display: block;
}
}


@media (max-width: 660px) {

    .ptext {	left: 33%;}


}

@media (max-width: 440px) {
    .logo img {	width: 110px;}
    h3.safety {	font-size: 18px;	padding-top: 20px;	font-weight: 600;}
    .checkmark {	height: 32px;	width: 32px;}
    .check_box .checkmark::after {    left: 9px;    top: 5px;    width: 10px;    height: 16px;}
    .check_box {	padding-left: 42px;}
    .spcialcheckbox li:nth-child(2) {	padding-bottom: 25px;}
    .spcialcheckbox li {	padding: 15px 15px;}
    .bot_text {	font-size: 13px;}
    a.start {	padding: 8px;}
    .mycontant {	padding: 80px 25px 0;}
    ul.listview li {	font-size: 10px;}
    .text-center.mycontant.page3 {	padding-left: 0;	padding-right: 0; height: 100%;
                                   overflow-y: scroll;}
    .ptext {	font-size: 21px; font-weight: 600;
    }.ptext {	width: 155px; padding-top: 55px; left: 31%; z-index: 0}
    .myclass {	font-size: 11px !important;	word-break: break-all;	line-height: 15px;}
    span.outertxt {	top: -45px;}
    .progress-bar-vertical {	min-height: 230px;}

    .mychart {
        min-height: 230px;
    }.mychart .linebox {
        height: 57px;
    }
    .ptext {
        top: 80px;
        font-size: 11px;
        width: 94px;
        padding-top: 30px;
        left: 39%;
        height: 89px;
    }
    #chart_Pop1990_tooltip{  
        left: 10px !important;
    }
    #chart{
        text-align: center;
        margin: 0 auto !important;
        float: none;
        z-index: 1000;
        width: 65% !important; 
        height: 250px !important;
    }
}

@media (max-width: 415px) {
    body.sscbg {
        background-position: 0px 60%;
    }

}

@media (max-width: 380px) {
    body.sscbg {
        background-position: 0px 60%;
    }

}	



@media (max-width: 340px) {
    .check_box {	font-size: 16px;}
    h3.safety {	font-size: 15px;}
    .text-center.page2 h3 {	font-size: 16px;}
    .spcialcheckbox li {	padding: 8px 15px 15px;	margin-bottom: 10px;}
    h1.companyname {	font-size: 22px;	margin-bottom: 15px;}
    ul.group li a {	min-width: 70px;	border-radius: 16px;}
    ul.listview li {	font-size: 9px;	line-height: 22px;}
    ul.listview li img {	width: 15px;}
    .leftline span {	font-size: 12px;}	
    .ptext {	left: 36%;
             top: 80px}
    .progress-bar-vertical {	width: 17%;}
    body.sscbg {
        background-position: 0px 50%;
    }


}
.pnotext {  color:#fff;  position: absolute; top: 39%;   left: 22%;  font-size: 23px;    text-align: center;  height: 170px; z-index: -1; padding-top: 45px;}