﻿/*Responsive WEB CSS*/
@media screen and (max-width: 1700px) {
}

@media screen and (max-width: 1600px) {
}

@media screen and (max-width: 1500px) {
}

@media screen and (max-width: 1400px) {
}

@media screen and (max-width: 1300px) {
}

@media screen and (max-width: 1200px) {
}

@media screen and (max-width: 1100px) {
     .col-sm-6 .col-centered {
            width: 100% !important;        
        }
}

@media screen and (max-width: 1024px) {
}

@media screen and (max-width: 1000px) {
    #fig7 {
        max-width: 850px;    
    }

    .gdprContentPadding {
        margin-bottom: 250px;
    }

    .keyareatext {
        width: 100%;
        display: block;
        
    }

    .keyareaimage {
        width: 100%;
        display: block;
        
    }
}

@media screen and (max-width: 991px) {
    div.row-align-items-top.row-break-sm, div.row-align-items-center.row-break-sm, div.row-align-items-bottom.row-break-sm {
        display: block;
    }

    #content div.row-header-responsive div {
        font-size: 0.75em;
    }
}

@media screen and (max-width: 975px) {
    .visible-xs-inline.collapseRadio {
        width: 90%;
    }

    #headerImg, #headerForresterLogo, #headerForresterLogo1 {
        max-width: 100%;
        min-width: 100px;
        height: auto;
    }
}

@media screen and (max-width: 900px) {

    #fig7 {
        max-width: 750px;
    }

    .bulletCharts {
        width: 750px;
    }
}

@media screen and (max-width: 800px) {

    #fig7 {
        max-width: 650px;
    }

    .gdprFooterPadding {
        padding-bottom: 105px;
    }

    .bulletCharts {
        width: 725px;
    }

        .col-centered {
    
        float: left !important;
    }
}

@media screen and (min-width: 768px) {
    #content .checkbox-col, #content .radio-col {
        margin-top: 0;
        padding-bottom: 0;
        margin-bottom: 10px;
    }

    .bulletCharts {
        width: 700px;
    }
}

@media screen and (max-width: 767px) {

       .col-xs-8 {
        width: 100%;
    }

    .h1, h1 {
        font-size: 30px;
    }

    #content .checkbox, #content .radio {
        margin-left: 40px;
        margin-bottom: 15px;
    }

    .container {
        font-size: 16px;
    }

    .row75pct {
        width: 100%;
        margin: 0 auto;
    }

    .chart {
        width: 90% !important;
    }

    .chart-col-centered {
        padding-left: 5% !important;
        padding-right: 5% !important;
    }



    .media-left img,
    .media-right img {
        width: 150px !important;
    }

    .media-body h1 {
        font-size: 20px !important;
    }

    #content section table.output td.title, #content section table.output th.title {
        display: none;
    }

    div.row-align-items-top, div.row-align-items-center, div.row-align-items-bottom {
        display: block;
    }

    #content div.row-xs-border {
        border-top-color: #dfe5e8;
        border-top-style: solid;
        border-top-width: 0.8px;
    }

        #content div.row-xs-border:last-child {
            border-bottom-color: #dfe5e8;
            border-bottom-style: solid;
            border-bottom-width: 0.8px;
        }

    #content div.container-xs-border div.row-input {
        border-top-color: #dfe5e8;
        border-top-style: solid;
        border-top-width: 0.8px;
    }

        #content div.container-xs-border div.row-input:last-child {
            border-bottom-color: #dfe5e8;
            border-bottom-style: solid;
            border-bottom-width: 0.8px;
        }

    #content div.row-input.row-input-radio-b4 input[type=radio] {
        margin-left: 25%;
    }

    #content div.row-input-radio div:not(.row-input-text) {
        text-align: left;
    }

    #content div.row-input.row-input-radio input[type=radio] {
        margin-left: 5%;
    }

    #console {
        margin-top: 125px;
        padding: 2px 2px 2px 2px;
    }

    .multiColumnBorder {
        border-right: none !important;
        border-left: none !important;
    }

    .multiColumnContainer {
        /*border-bottom: 1px solid #34a853;*/
    }

    .mktoForm .mktoButtonWrap.mktoSimple .mktoButton {
        font-size: 14px !important;
    }

    .table-responsive > .table > tbody > tr > td, .table-responsive > .table > tbody > tr > th, .table-responsive > .table > tfoot > tr > td, .table-responsive > .table > tfoot > tr > th, .table-responsive > .table > thead > tr > td, .table-responsive > .table > thead > tr > th {
        white-space: normal;
    }

    header p.commissionedBy {
        font-size: 0.5em;
    }

    header section.desc {
        font-size: 0.8em;
    }

    header div.desc-public {
        font-size: 0.9em;
        padding: 3px 2px 3px 20px;
    }

    #headerImg, #headerForresterLogo, #headerForresterLogo1 {
        max-width: 100%;
        min-width: 100px;
        height: auto;
    }

    header div.logo {
        padding: 3px;
    }

    header.header-public div.brand p {
        padding: 3px 0 3px 0;
    }

    .nav-stacked > li {
        float: left;
    }

    .nav-pills > li + li {
        margin-left: 0;
    }

    .nav-pills li {
        margin-right: 2px;
    }

    .nav-stacked > li + li {
        margin-top: 0;
    }

    .nav-menu {
        padding-bottom: 2px;
    }

    .nav-wrap, .nav-wrap.nav-horiz {
    }

    .mainmnu,
    .nav-sm div.mainmnu,
    .nav-xsm div.mainmnu,
    .nav-xxsm div.mainmnu,
    .subNav,
    .nav-sm div.subNav,
    .nav-xsm div.subNav,
    .nav-xxsm div.subNav {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .btn-group-lg > btn, .btn-lg {
        font-size: 14px;
    }

    #content .form-group.form-group-responsive {
        margin-bottom: 10px;
        margin-left: 15px;
    }

    #content .progressbar-lg-responsive {
        padding-top: 22px;
    }

    #content div.row-input-text {
    }

    #content .checkbox, #content .radio {
    }

    #content section table[data-tableTag="E"] th.calculation, #content section table[data-tableTag="E"] td.calculation, #content section table[data-tableTag="E"] td[data-col="calculation"] {
        display: none;
    }

    #content section table.table-xs-condensed tr {
        height: auto;
    }

    #content section table.table-xs-condensed td, #content section table.table-xs-condensed th {
        font-size: 0.8em;
        min-height: auto;
        padding: 5px;
        min-width: auto;
    }

    #content div.row-header div {
        font-size: 0.8em;
    }

    /**wrap radio button labels*/
    input[type='radio'] {
        float: left;
        margin-bottom: 10px;
    }

    .visible-xs-inline {
        display: table-cell !important;
        padding-left: 10px;
        padding-top: 2px;
        padding-bottom: 2px;
    }

    .checkmark {
        float: left;
    }

    .radio .container span.visible-xs-inline {
         display: inline-block !important;
         padding-top: 4px;
     }
}

@media screen and (max-width: 700px) {

    #fig7 {
        max-width: 550px;
    }

    .bulletLegend {
        display: inline-block;
        padding-left: 10px;
        padding-right: 10px;
    }

    .bulletCharts {
        width: 625px;
    }
}

@media screen and (max-width: 650px) {

    #content div.row-input.row-input-radio.collapseRadio input[type=radio], #content div.row-input.row-input-radio.collapseRadio .checkmark {
        margin-left: 2% !important;
    }


    #content .checkbox, #content .radio {
        margin-left: 0px;
     
    }
    .bulletCharts {
        width: 575px;
    }

    .gdprFooterPadding {
        padding-bottom: 125px;
    }

    .commissionedBy {
        padding-right: 20px;
    }
}

@media screen and (max-width: 600px) {


    #fig7 {
        max-width: 450px;
    }

    .commissionedBy {
        padding-right: 10px;
    }

    .pnlWelcome {
        background: none !important;
    }

    .bulletCharts {
        width: 525px;
    }

    header.header-public div.div-public {
        font-size: 1.0em !important;
    }

    header.header-public div.brand img.float-right {
        margin-right: 0px;
    }

    .forresterAndCommissionedWrapper {
        width: auto;
    }
}

@media screen and (max-width: 550px) {
    .gdprFooterPadding {
        padding-bottom: 170px;
    }

    .bulletCharts {
        width: 475px;
    }
}

@media screen and (max-width: 500px) {

    #fig7 {
        max-width: 350px;
    }

    #content div.row-input.row-input-radio.collapseRadio input[type=radio], #content div.row-input.row-input-radio.collapseRadio .checkmark {
        margin-left: 0% !important;
    }

    .bulletCharts {
        width: 425px;
    }

    .ratingSubText {
        width: 100%;
    }

    .ratingInputContainer {
        width:100%;
    }
}

@media screen and (max-width: 450px) {
    .col-centered {
        width: 100% !important;
    }

    .bulletCharts {
        width: 375px;
    }

    .col-xs-6 {
        width: 47%;
    }

    header.header-public div.brand img.float-right {
    float: right;
    margin-right: 0px;
    }

        .ratingInputContainer span {
            width: 165px;
           
            clear: both;
            margin-bottom: 15px;
            margin-top: 15px;
            padding-top: 10px;
            height: 50px
        }

        .ratingSubText {
                display: none;        
        }
 
}

@media screen and (max-width: 400px) {

    #fig7 {
        max-width: 250px;
    }

    .gdprFooterPadding {
        padding-bottom: 190px;
    }

    .bulletCharts {
        width: 325px;
    }

    header.header-public div.brand {
            padding-right: 0px;
    }

        header.header-public div.brand img.float-right {
            margin-right: 0px;
        }

    header div.desc-public { 
        margin-left: 5px;
    }


    .radio .container span.visible-xs-inline {
        width: 85%; 
   
     }

}

@media screen and (max-width: 350px) {
    .gdprFooterPadding {
        padding-bottom: 205px;
    }

    .bulletCharts {
        width: 275px;
    }
}

@media screen and (max-width: 300px) {

    #fig7 {
        max-width: 200px;
    }

    .bulletCharts {
        width: 225px;
    }
}

@media (min-width: 37.5em) {
    button.white-btn-public {
        font-size: 1.3125em;
        padding: .547619048em 1em;
    }

    button.btn-sm-public {
        font-size: 13px;
        font-weight: normal;
        padding-top: .416666667em;
        padding-bottom: .416666667em;
    }
}
