/*bootstrap tweaks*/
#top #gb_jss_bootsrap_elements h1,
#top #gb_jss_bootsrap_elements h2,
#top #gb_jss_bootsrap_elements h3,
#top #gb_jss_bootsrap_elements h4{
    color: #006f99;
    font-family: quadonlight !important;
    text-transform: none;
}
#top #gb_jss_bootsrap_elements h1 strong,
#top #gb_jss_bootsrap_elements h2 strong,
#top #gb_jss_bootsrap_elements h3 strong,
#top #gb_jss_bootsrap_elements h4 strong{
    font-family: quadonextrabold !important;
}

#top #gb_jss_bootsrap_elements h3{
    color: #07739e !important;
}
#top #gb_jss_bootsrap_elements div.divider{
    border-bottom: 1px solid #005B79;

}
#top #gb_jss_bootsrap_elements + table{
    display: none;
}
#top #gb_jss_bootsrap_elements div.divider:after{
    background-color: #e7e7e8;
    content: url("../images/line-div-icon.png");
    display: table;
    margin: 0 auto;
    position: relative;
    text-align: center;
    top: 15px;
    width: 35px;
}

#top #gb_jss_bootsrap_elements input.gb_jss_input{
    background-color: #d3d4d6;
    border: 2px solid #F1F1F1;
    border-radius: 10px;
    color: #000;
    font-size: 16px;
    height: 38px;
    margin-top: 30px;
    width: 100%;
}
#top #gb_jss_bootsrap_elements input.gb_jss_input.variant2{
    background-color: #ffffff;
    color: #2c2c2c;
    display: table;
    margin: 0 auto;
    max-width: 600px;
    min-width: 200px;
    text-align: center;
    width: 50%;
}
#gb_jss_bootsrap_elements .select_container{
    background-color: #d3d4d6;
    background-image: url("../images/arrows.png");
    background-position: calc(100% - 10px) 50%;
    background-repeat: no-repeat;
    border: 2px solid #F1F1F1;
    border-radius: 10px;
    height: 38px;
    margin: 30px 0 0;
    overflow: hidden;
    width: 100%;
}
#gb_jss_bootsrap_elements .select_container select.form-control {
    background: transparent;
    width: calc(100% + 20px);
    padding: 5px;
    font-size: 16px;
    line-height: 1;
    border: 0;
    border-radius: 0;
    height: 34px;
    color: #000;
    -webkit-appearance: none;
}
#gb_jss_bootsrap_elements .select_container select.form-control.gb_jss_placeholder{
    color:#fff;
}
#gb_jss_bootsrap_elements .select_container select.form-control.gb_jss_placeholder option{
    color:#000;
}
option[disabled]{
    display: none;
}


/*placeholder color*/
body#top #gb_jss_bootsrap_elements ::-webkit-input-placeholder { /* Chrome */
    color: #626262;
}
body#top #gb_jss_bootsrap_elements :-ms-input-placeholder { /* IE 10+ */
    color: #626262;
}
body#top #gb_jss_bootsrap_elements ::-moz-placeholder { /* Firefox 19+ */
    color: #626262;
    opacity: 1;
}
body#top #gb_jss_bootsrap_elements :-moz-placeholder { /* Firefox 4 - 18 */
    color: #626262;
    opacity: 1;
}

body#top #gb_jss_bootsrap_elements input.light_placeholder::-webkit-input-placeholder { /* Chrome */
    color: #fff;
}
body#top #gb_jss_bootsrap_elements input.light_placeholder:-ms-input-placeholder { /* IE 10+ */
    color: #fff;
}
body#top #gb_jss_bootsrap_elements input.light_placeholder::-moz-placeholder { /* Firefox 19+ */
    color: #fff;
    opacity: 1;
}
body#top #gb_jss_bootsrap_elements input.light_placeholder:-moz-placeholder { /* Firefox 4 - 18 */
    color: #fff;
    opacity: 1;
}



/*slider tweaks*/
.slider.slider-horizontal{
    width: 100%;
}
.slider-tick-container > div {
    display: none;
}
.slider-handle.min-slider-handle.round {
    border: 2px solid #fff;
}
.slider-track-high {
    background-color: #9bcce4;
}
.slider-selection.tick-slider-selection {
    background-color: #ef4023;
    background-image: none;
}
.slider-track {
    border: 1px solid #fff !important;
}
#name_your_price_hourly-slider,
#current_hourly_salary{
    display:none;
}
/*checkbox as a button*/

.checkbox-button {
    background-color: transparent;
    display: block;
    height: 30px;
    margin: 4px;
    width: 100%;
}
.checkbox-button label{
    width: 100%;
}
.checkbox-button label div{
    background-color: #f3f3f4;
    border: 1px solid #a2a2a2 !important;
    border-radius: 15px;
    color: #a2a2a2;
    cursor: pointer;
    display: block;
    padding: 3px 0;
    text-align: center;
    width: 100%;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.checkbox-button label input {
    position:absolute;
    z-index: -1;
    opacity: 0;
}

.checkbox-button:hover label div,
.checkbox-button input:checked + div {
    background-color: #07739e;
    border: 1px solid #07739e !important;
    color: #fff;
}
#gb_jss_bootsrap_elements .checkbox-button input[type="text"].rounded{
    background-color: #f3f3f4;
    border: 1px solid #a2a2a2 !important;
    border-radius: 15px;
    color: #393838;
    height: 30px;
    padding: 2px 12px;
}

/*gender selector*/
label.gb_jss_gender {
    height: 150px;
    position: relative;
    width: 200px;
}
label.gb_jss_gender input[type="radio"]{
    opacity: 0;
    z-index: -1;
}
label.gb_jss_gender div{
    background-position: center bottom;
    background-repeat: no-repeat;
    cursor: pointer;
    height: 150px;
    position: absolute;
    top: 0;
    width: 200px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

label.gb_jss_gender_m div.inactive{
    background-image: url("../images/male-inactive.png");
}
label.gb_jss_gender_f div.inactive{
    background-image: url("../images/female-inactive.png");
}
label.gb_jss_gender_m div.active,
.gender_icon_m{
    background-image: url("../images/male-active.png");
}
label.gb_jss_gender_f div.active,
.gender_icon_f{
    background-image: url("../images/female-active.png");
}

label.gb_jss_gender input[type="radio"]:not(:checked) ~ div.inactive{
    opacity: 1;
}
label.gb_jss_gender input[type="radio"]:not(:checked) ~ div.active{
    opacity: 0;
}
label.gb_jss_gender input[type="radio"]:checked ~ div.inactive{
    opacity: 0;
}
label.gb_jss_gender input[type="radio"]:checked ~ div.active{
    opacity: 1;
}


/*checkbox*/
input[type=checkbox].gb_jss-checkbox {
    position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
}

input[type=checkbox].gb_jss-checkbox + label.gb_jss-checkbox-label {
    background-position: 0 0;
    background-repeat: no-repeat;
    cursor: pointer;
    font-size: 26px;
    line-height: 14px;

    text-align: left;
}
label.gb_jss-checkbox-label.size-n{
    background-size: 25px auto;
}
label.gb_jss-checkbox-label.size-l{
    background-size: 50px auto;
    height: 55px;
}
label.gb_jss-checkbox-label.flow-bottom{
    padding-top: 35px;
}
label.gb_jss-checkbox-label.flow-right{
    padding-left: 35px;
}
label.gb_jss-checkbox-label.size-l.flow-right{
    padding-left: 55px;
}
label.gb_jss-checkbox-label {
    background-image:url('../images/checkbox_deselected.png');
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input[type=checkbox].gb_jss-checkbox:checked + label.gb_jss-checkbox-label {
    background-image:url('../images/checkbox_selected.png');
}
.gb_jss-checkbox-label > div {
    width: 85%;
}
.gb_jss-checkbox-label.size-l.flow-right > div{
    margin-top: 15px;
    width: 100%;
}

#bottom_section{
    background-image: url("../images/on_your_game_bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff !important;
    left: calc(50% - 50vw + 22px);
    padding: 40px calc(50vw - 50% + 10px);
    position: relative;
    width: 100vw !important;
}
#bottom_section h4,#bottom_section h2{
    color: #fff !important;
}

/*buttons*/
.gb_jss_submit button {
    background-color: #ef4023;
    border: medium none;
    border-radius: 10px;
    color: #fff;
    height: 50px;
    width: 221px;
    border: 0;
    filter: none; /*IE6-9 */
    -moz-box-shadow:
            0px -1px 3px rgba(190,255,255,0.5), /*top external highlight*/
            2px 3px 3px rgba(0,0,0,0.2), /*bottom external shadow*/
            inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/
            inset 0 1px 1px rgba(255,255,255,1); /*top internal highlight*/
    -webkit-box-shadow:
            0px -1px 3px rgba(190,255,255,0.5), /*top external highlight*/
            2px 3px 3px rgba(0,0,0,0.2), /*bottom external shadow*/
            inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/
            inset 0 1px 1px rgba(255,255,255,1); /*top internal highlight*/
    box-shadow:
            0px -1px 3px rgba(190,255,255,0.5), /*top external highlight*/
            2px 3px 3px rgba(0,0,0,0.2), /*bottom external shadow*/
            inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/
            inset 0 1px 1px rgba(255,255,255,1); /*top internal highlight*/
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.checkbox-button div {
    font-size: 11px;
    letter-spacing: -1px;
    text-transform: uppercase;
}


/*validations*/
.gb_jss_invalid {
    box-shadow: 0 0 10px 2px #ad0a0a;
}

/*home page*/
.gb_jss_form_short #gb_jss_bootsrap_elements{
    margin: 40px 0 0;
    padding: 0;
}
.gb_jss_form_short #gb_jss_bootsrap_elements .row {
    margin: 0 0 13px;
}
.gb_jss_form_short #gb_jss_bootsrap_elements .row > div{
    padding: 0;
}
#top .gb_jss_form_short #gb_jss_bootsrap_elements .select_container,
#top .gb_jss_form_short #gb_jss_bootsrap_elements input.gb_jss_input{
    background-color: #044863;
    color: #fff !important;
    height: 55px;
    margin: 0;
    text-align: center;
}
#top .gb_jss_form_short #gb_jss_bootsrap_elements .select_container select option{
    background-color: #ffffff;
    color: #000;
}
#top .gb_jss_form_short select.form-control {
    color: #fff !important;
    height: 50px;
    text-align: center;
}
.gb_jss_form_short button[type="submit"] {
    border: 1px solid #fff;
    color: #fff !important;
    font-size: 18px;
    width: 100%;
}


#top #daterange{
    display: none;
    margin: 0 !important;
}

#top .gb_jss_refine_link {
    color: #ef4023;
    text-decoration: underline;
}
/*panel headers*/
#top span.header {
    font-family: quadonextrabold;
}

#top span.header.size-2 {
    font-size: 18px;
}

#top span.header.blue {
    color: #07739e!important;
}
#top span.header_light{
    font-family: quadonlight;
    font-weight: bolder;
}

#top span.with_tooltip{
    float: left;
}
.gb_jss_tooltip {
    cursor: pointer;
    float: left;
    left: 5px;
    position: relative;
}
.gb_jss_tooltip::before {
    background-color: #07739e;
    border-radius: 10px;
    color: #fff;
    content: "i";
    display: block;
    font-family: Times New Roman;
    font-size: 17px;
    font-weight: bold;
    height: 20px;
    line-height: 17px;
    text-align: center;
    width: 20px;
}
/*static sliders */
#upper_quartile_static_slider,
#lower_quartile_static_slider,
#avg_bouns_static_slider,
#nyp_static_slider{
    display: table;
    margin: 0 auto;
    width: 90%;
}

/*panels*/
#top .panel-heading,
#top .panel-footer{
    background-color: #e7e7e8;
}
#top .panel-body{
    background-color: #f3f3f4;
}

#chart-panel .panel-body{
    display: block;
    height: 300px !important;
    position: relative;
    width: 100%;
}

#top .panel.panel-transparent,
#top .panel.panel-transparent .panel-heading,
#top .panel.panel-transparent .panel-body {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none;
}

/* crowd*/
#crowd_indicator_bar{
    background: rgba(0, 0, 0, 0) url("../images/crowd.png") no-repeat scroll center center / contain ;
    height: 142px;
    margin-top: 20px;
}
#crowd_value {
    background-color: rgba(242, 242, 244, 0.5);
    height: 100%;
    position: absolute;
}

/*pie chart*/

.benefit_pie_container{
    display: block;
    margin: 50px auto 10px;
    max-height: 150px;
    max-width: 150px;
    width: 100%;
}
.pie_chart_value {
    color: #07739e;
    font-family: quadonextrabold;
    font-size: 26px;
    position: absolute;
    text-align: center;
    top: 49%;
    width: calc(100% - 30px);
}
.pie_chart_label {
    height: 20px;
    text-align: center;
    white-space: nowrap;
}

/* peer profiles*/
.profile_container {
    background: #eeeeee; /* Old browsers */
    background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
    background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
    background: linear-gradient(to bottom, #eeeeee 0%,#cccccc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 );
    border: 1px solid #a4a4a4 !important;
    border-radius: 10px;
    height: 150px;
    padding: 10px;
}
.profile_container .gender_icon {
    background-position: 0 center;
    background-repeat: no-repeat;
    background-size: 90% auto;
    border-right: 1px solid #5e5e5e;
    height: 100%;
    opacity: 0.5;
}
.question_mark {
    border: 1px solid #3a3a3a !important;
    border-radius: 15px;
    cursor: pointer;
    display: block;
    font-size: 20px;
    height: 30px;
    line-height: 27px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 30px;
}