/** Main style sheet**/
html,body,.container {
    height:100%;    
}

.vertical-center {
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */
  display: flex;
  align-items: center;
}

#sub-content-div{
    /*overflow: auto;
    height: 120%;*/
    width: 100%;
}

.container-fluid{
    padding-left: 0px !important;
    padding-right: 0px !important;
    /*background-color: black !important;*/
}

body { 
   overflow-x: hidden;
}

.first { display: table-header-group; }
.second { display: table-footer-group; }

.mainSonyLogo{
    background: #000;
    text-align: center;
    margin-left: 0;    
}

.sonyLogoDiv{
    vertical-align: middle !important;    
    text-align: center;
    align-items: center;    
    height: 65px;
    display: inline;
}

#section_steps_area {
    height: 210px;
    width: 95%;
    /*overflow-y: auto;*/
    overflow: hidden;
    border-top: .1px solid #D9D9D9;
    border-bottom: .1px solid #D9D9D9;
}

.footer {
    text-align: right;    
    bottom: 0;
    padding-left: 12px;
    padding-top: 10px;  
    padding-bottom: 30px;  
    width: 100%;
    font-style: italic; text-align: left;
}

.disclaimer{
    text-align: left !important; 
    font-style: italic; 
    font-size: 10px;
}



/*Adjust font sizes on different screens*/
@media (max-width: @screen-xs) {
    h2{
        font-size: 18px !important;
    }

    #h4_parent_topic{
        font-size: 10px !important;
    }
}

@media (max-width: @screen-sm) {
    h2{
        font-size: 25px !important;
    }

    #h4_parent_topic{
        font-size: 15px !important;
    }
}

@media print{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}

#sub_header_text{
    display: inline;    
    min-width: 30px;
}

#h4_parent_topic{
    font-size: 18px;
}

.wrap{
    overflow: hidden;
    white-space: nowrap; 
    text-overflow: ellipsis; 
    word-break: break-all; 
    word-wrap: break-word;
    display: table-cell;
}

customH2{
    font-size: 10% !important;
}

customH4{
    font-size: 18px;
}

/*=====Tooltip style======*/
#div_steps_info{
    display: none; 
    left: 10px; 
    cursor: pointer;
    height: 10px !important;
    width: 20px !important;    
}
.tooltip .tooltip-inner {
    max-width: 300px;
    /* If max-width does not work, try using width instead */
    
}
/*===============*/

.verticalBorder{
    border-left: .5px solid #d9d9d9;
    margin-left: 30px;
}

.btn-default{
    text-align: center;
    vertical-align: middle;
    margin: auto;
    padding-top: 5px;    
}

#div_main_content{    
    /*padding: 16px;*/
    margin-left: 2%;
    margin-right:2%;
    padding-top: 0px !important;
    overflow-x: hidden;
    text-align: center;
} 

#div_simulator_area{
    margin-left: 10px;
    margin-right: 10px;    
}

#div_main_list{
    padding-left: 5px;
    height: 100%; 
    /*min-height: 350px; */
    overflow-y: auto;
}

#div_main_image_view{    
    max-height: 50%;
    overflow: hidden;    
    position: relative;    
}

#main_image_view, .mainImageView{
	max-width: 85% !important;
    min-width: 240px !important;
    min-height: 389px !important;
    /*margin-top: 10px !important;    */
    /*max-height: 400px;
    max-height: 800px;*/
}

#img_main_logo{    
    min-width: 100px; 
    width: 5%;        
    text-align: center;
    vertical-align: middle;
    padding-top: 10px;
}

#section_header_text h5, h2{
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

#search, #print, #image_info, #btn_home{
	cursor: pointer;
}
#search{
    padding-right: 5px;
    /*display: inline !important;*/
}

.product .img-responsive {
    margin: 0 auto;
}

.selected{
    background-color: #eaeaea;    
    color: #0066ff ;
}
/*set the sublist color so it won't the parent's color*/
.selected > div > ul > li{
    color: black;
}

.selected > div > ul > li:hover{
    color: #0066ff ;
}

.printarea{
    width: 95%;    
    /*overflow-x: none;    */
    overflow: hidden !important;
    margin-left: 15px;
    padding-right: 5px;
    position: relative;
    
}
    .printarea > span > ol{
        padding-left: 30px;
    }

/* Custum Li*/

ul {
    margin: 0.75em 0;
    padding: 0 1em;
    list-style: none;
    cursor: pointer;
}

ul li{
    padding: 4px;
}

/*ul li:hover{
    background-color: #eaeaea;
}*/

#nav_image_info, #nav_image_tvs:hover{
    cursor: pointer;
}

.overlay {
    display: none;
}

#ul_main_list li:before {
    content: " ";    
}

#ul_main_list li:hover{
    background-color:#EAEAEA;
    color: #0066ff !important;
}

/* Step title div*/
#step_title_div {
	content: "";
	border-left: 0.3px solid gray;
	/*border-bottom: 0.3px solid gray;*/
	padding-left: 3px;
	margin-right: 10px;	
	display: none;
}

/*=========== List expand/collapse =====*/
.just-padding {
  padding: 15px;
}

.list-group.list-group-root {
  padding: 0;
  overflow: hidden;
}

.list-group.list-group-root .list-group {
  margin-bottom: 0;
}

.list-group.list-group-root .list-group-item {
  border-radius: 0;
  border-width: 1px 0 0 0;
}

.list-group.list-group-root > .list-group-item:first-child {
  border-top-width: 0;
}

.list-group.list-group-root > .list-group > .list-group-item {
  padding-left: 30px;
}

.list-group.list-group-root > .list-group > .list-group > .list-group-item {
  padding-left: 45px;
}

/*=========== end of List expand/collapse =====*/

/*=========== Side nav bar =====*/
#sony_side_nav{
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    background-color: #fff;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    /*padding: 8px 8px 8px 32px;*/
    padding-left: 1%;
    text-decoration: none;
    /*font-size: 25px;*/
    color: #818181;
    display: block;
    transition: 0.3s;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

/*======= overlay =========*/
.overlay{
    position: absolute;
    left: 300px;
    width: 340px;
    max-height: 336px;
    overflow-y: scroll;
    overflow-x: hidden;
    top: 10%;
    z-index: 50;
    background: #eaeaea;
    padding-top: 10px;
    padding-bottom: 10px;    
    /*margin-top: 80%;
    margin-left: -10%
    display: none;*/
}

.overlay > ul > li > a{
    color: black;
}

.overlay ul li:hover{
     color: #0066ff !important;
}

.overlay > ul > li > a:hover{
     color: #0066ff !important;
}

<!--[if lt IE 10]>
    <style type="text/css">
        .overlay {
             left: 25%;
             top: 20%;
        }
    </style>
<![endif]-->

.overlay>ul>li:hover{
    text-decoration: underline;
}

.div_sub_li, .div_sub_li > span {
    background-color: #fff;
    color: #4583F0;
    display: block !important;
    padding-left: 15px;
    margin: 0px !important;
}

.div_sub_li{

}

*{
    font-family: "SST W01 Medium","Helvetica Neue",Helvetica,Arial,sans-serif;
}

.div_main_ul{    
    background-color: #000; /*Black*/
    color: #fff; /*White text*/
    padding: 20px;    
    display: block !important;    
    margin-left: 10px;
    margin-right: 10px;
    vertical-align: middle !important;    
}

#mobile_list_side_nav{
    width: auto !important;
    background-color: #000; 
    padding-right: 0px;
    list-style:none !important;
    padding-left:0px !important;
}

#mobile_list_side_nav > li{    
    color: #fff;    
    border-bottom: 2px solid #252525;  
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 1px;
}

/*  */
#mobile_list_side_nav > li[aria-expanded="false"]{
    padding-bottom: 20px;
}

#mobile_list_side_nav > li[aria-expanded="true"]{
    padding-bottom: 1px;
}

#mobile_list_side_nav li ul{
     background-color: #fff !important;
     color: #4583F0;
     padding-left: 0px;
     margin-top: 20px !important;
}

#mobile_list_side_nav:before{
    content: " ";
    font-family: 'Glyphicons Halflings';
    font-size: 9px;
    float: left;
    margin-top: 4px;
    margin-left: -17px;    
}

/*full-width button*/
.block {
    display: block;
    width: 100%;
    border: none;
    color: #fff;
    background-color: #000;
    padding: 14px 28px;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
}

#side_nav_dropdown > li > a{
    font-size: 16px;
}

#step_indicator_sec{
    padding-left: 16px;
    display: none;    
}

#div_step_arrow{
    padding-left: 13px;

    vertical-align: middle !important;
}
#div_step_arrow > span{
    vertical-align: middle;
    padding-top: 5px;
}

/*steps number*/
.custom-step-num {
    background: url(/images/bg_step_num.png) center center no-repeat;
    float: left;
    margin-left: -30px;        
    width: 22px;
    height: 22px;
    line-height: 20px;    
    /*font-size: 14px;*/
    color: #fff !important;
    background: #000 !important;
    text-decoration: none !important;
     -webkit-border-radius: 100px !important;
    -moz-border-radius: 100px !important;    
    border-radius: 100px !important;
    text-align: center;
    vertical-align: middle;
    padding-top: 2px;
    display: block;

}

.custom-step-num:hover{
    text-decoration: none;
    color: #fff;
    cursor: pointer;;
}

.custom_steps_div{
    padding-bottom: 5px;    
    float: left;
    top: -10px;
    cursor: pointer;
    word-break: keep-all;
    vertical-align: middle;
}

.custom_steps_TV_font{
    font-size: 2vw;
}

.completed_step_bottom{    
    padding-left: 50px;
    padding-bottom: 30px;
    font-size: 16;  
    width: 100%;    
}

.li_step {
    margin: 0;
    padding: 8px 10px 8px 0px;
    overflow: hidden;
    zoom: 1;
    display: inline;
    width: inherit;
}

.printarea > span > ol > li{
  list-style-type: none;
}

.currentStep{    
    color: #0066ff !important;    
}

/* buffer classname to identify the dynamic elements to remove*/
.toRemove{
    /*do nothing here...*/
}

#micro_survey_container{
    padding-bottom: 30px;
    
}

#div_survey_area{
    padding-left: 11px !important;
    vertical-align: top;
}

.class-step-arrow{        
    max-width: 98%; 
    display: block; 
    padding-top: 10px; 
    padding-left: 10px;
    padding-bottom: 10px;
}

a{
    text-decoration: none !important;
}

.img-center {
    margin:0 auto;    
}


/*layuot for small screens */
@media only screen and (max-width: 600px) { 
     .currentStep{
        font-size: 14px;        
    }

    .custom-step-num {
        margin-left: 0px;
    }

    .printarea > span > ol{
        padding-left: 0px;
    }

    h2 {
        font-size: 25px !important;
    }

    #h4_parent_topic {
        font-size: 14px !important;
    }

    .custom_steps_div{
        padding-left: 10px;
    }

    .completedText{        
        font-size: 10px;        
    }
}

#mobile_android_header a h2{
    display: inline;
    white-space: nowrap;
}

@supports (-ms-ime-align:auto) {
    @media screen and (max-width: 1024px) { /* I've given 1023px but you can change to proper width */
        .overlay {
            left: 30%;
        }
    }
}

@media screen and (max-width: 1024px) { /* I've given 1023px but you can change to proper width */
       .mainSonyLogo{
            height: 45px;
        }

       #img_main_logo{ 
            padding-right: 35px;
            padding-top: 16px !important;
            width: 105px !important;
            max-width: 200px;
            
       }

       .sonyLogoDiv{
         height: 80%;
       }

       .verticalLine{
            border-right: .5px solid #787878; 
            height: 100%;
            text-align: center !important;
            vertical-align: middle !important;
        }
            .verticalLine > a{
                text-align: center;
                vertical-align: middle;
                padding-top: 7px;                
                padding-bottom: 0px;    
                padding-right: 0px !important;
                margin-left: 5px !important; 
                /*padding-left: 10px !important; */
            }

       #sub_header_text{
            font-size: 22px !important;
       }

        #div_survey_area {
            padding-left: 0px !important;
        }

        .class-step-arrow{                    
            padding-top: 20px !important; 
            padding-left: 10px;
            padding-bottom: 10px;
        }

        #div_step_arrow > span {
            padding-left: -5px;
        }

        #mobile_android_header a h2{
            font-size: 18px !important;
            display: inline !important;
            white-space: nowrap !important;
        }

        #div_main_image_view{
            height: 50% !important;
            overflow: hidden !important;    
        }

        #section_steps_area, .custom_section_steps_area{
            height: 200px !important;
            overflow-y: hidden !important;
        }

        #main_image_view, .mainImageView{
            max-height: 400px !important;
            min-height: 140px !important;
        }

        #print{
            font-size: 80% !important;
        }

        #print-search-section{
            padding-top: 20% !important;
        }
    }

    @media screen and (max-width: 1199px) { 
        #search{
            display: none !important;
        }

        .class-step-arrow{
            display: block !important;            
        }

        .hide-step-on-mobile{
            display: none;
        }

        .custom-step-num{
            margin-left: 0px !important;
            margin-right: 5px;
        }
    }