/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 27 Aug, 2018, 1:24:04 PM
    Author     : manojj
*/

.demographic-contect .mobile-que-no{font-size: 12px; color: rgba(0,0,0,0.30)}
.demographic-contect  .mobile-que-no {
    font-size: 12px;
    color: rgba(0,0,0,0.30);
    float: left;
    text-align: left;
    width: 100%;
    position: relative;
    padding-bottom: 18px;
    text-transform: uppercase;

}

.demographic-contect .mdl-radio{
    height: auto;
    width: 100%;
    background: #fff;
    position: static;
    display: table-cell;
    height:calc(45vw - 20px);
    padding: 10px 0;
}
.demograchick-radio .mdl-radio.is-checked{background:#ff4e4e }

.male-image{
    background: url(../../images/man_b.png) no-repeat center center;
    height: 70px;
    width: auto;
    display: block;
    text-align: center;
    margin: 0 auto;
    background-size: auto 70px;
}
.female-image{
    background: url(../../images/women_b.png) no-repeat center center;
    height: 70px;
    width: auto;
    display: block;
    text-align: center;
    margin: 0 auto;
    background-size: auto 70px;
}
.mdl-radio.is-checked .male-image{ background: url(../../images/man_w.png) no-repeat center center; background-size: auto 70px;}
.mdl-radio.is-checked .female-image{ background: url(../../images/women_w.png) no-repeat center center; background-size: auto 70px;}


.demograchick-radio .mdl-radio__outer-circle, .demograchick-radio .mdl-radio__inner-circle {
    visibility: hidden;
}
.demographic-contect  .mdl-radio.is-upgraded {padding-left: 0px;}
.demograchick-radio {

    display: table;
    width: 100%;
    position: relative;

}
.gender-txt {
    display: inline-block;
    width: 100%;
    padding-top: 10px;
}
.demograchick-radio .mdl-radio.is-checked .gender-txt, .demograchick-radio .mdl-radio.is-checked  .age-txt{color: #fff;}
.age-group .mdl-radio{height:calc(30vw - 20px); margin-bottom: 10px;}
.age-group{margin-bottom: 10px;}
.unmarried-image{
    background: url(../../images/unmarried_b.png) no-repeat center center;
    height: 70px;
    width: auto;
    text-align: center;
    margin: 0 auto;
    background-size: auto 70px;
    display: block;
}
.married-image{
    background: url(../../images/married_b.png) no-repeat center center;
    height: 70px;
    width: auto;
    display: block;
    text-align: center;
    margin: 0 auto;
    background-size: auto 70px;
}
.mdl-radio.is-checked .unmarried-image{ background: url(../../images/unmarried_w.png) no-repeat center center; background-size: auto 70px;}
.mdl-radio.is-checked .married-image{ background: url(../../images/married_w.png) no-repeat center center; background-size: auto 70px;}

.car-image{
    background: url(../../images/car_b.png) no-repeat center center;
    width: auto;
    height: 60px;
    width: auto;
    text-align: center;
    margin: 0 auto;
    background-size: 75px auto;
    display: block;
}
.moto-image{
    background: url(../../images/moto_b.png) no-repeat center center;
    height: 60px;
    width: auto;
    display: block;
    text-align: center;
    margin: 0 auto;
    background-size: 75px auto;

}
.mdl-radio.is-checked .car-image{ background: url(../../images/car_w.png) no-repeat center center; background-size: 75px auto;}
.mdl-radio.is-checked .moto-image{ background: url(../../images/moto_w.png) no-repeat center center; background-size: 75px auto;}
.demographic-contect  .qualification  .mdl-radio{height: auto; margin-bottom: 10px;}
.qualification{margin-bottom: 10px;}
.demograchick-radio .mdl-radio__ripple-container, .demograchick-radio .mdl-checkbox__ripple-container {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 0px !important;

}

.demographic-qustion-section {
    float: left;
    width: 100%;
}

.demograchick-radio label{font-weight: 400;}
.demographic-content {
    float: left;
    width: 100%;
    overflow: auto;
    overflow-x: hidden;
    padding: 10px 0;
    -webkit-overflow-scrolling: touch;

}
.top-content.demographic-contect {
    float: left;
    width: 100%;
    padding-bottom: 20px;
}
.demographic-content .mobile-option-container{padding: 1.250em;}

.demographic-container .mdl-radio__button{visibility: hidden; top:-9999px; left: -9999px; position: absolute;}
.demographic-container {
    position: relative;
    display: none;
    height: calc(100vh - 128px);
    overflow: hidden;
    overflow-y: scroll;
}
.dempgraphictooltip span{float: left; border-radius: 20px;}
div#demoGraphicValidation{bottom: 75px;}
@media (orientation:landscape) {

    .demographic-contect  .mdl-radio{height:calc(23vw - 20px)}
    .age-group .mdl-radio{height: calc(13vw - 20px);}
    .demographic-contect{flex-direction: column; height: auto;}
    .demographic-qustion-section{display: table; float: none;}
    .demographic-contect  .header{display: table-cell; vertical-align: middle; float: none;}
    .demographic-contect  .content{float: none; display: table-cell;}
    .dempgraphictooltip span{float: none; display: inline-block; border-radius: 20px;}
}