/* Survey responsive template */
/* ############################################################################################## */
@media only screen and (min-width: 1340px) {
    .formQuestionnaire .formQuestion {
        width: 19.5%;
    }

    .formQuestionnaire .formQuestion:nth-child(2n+0) {
        margin-right: 0.5%;
    }

    .formQuestionnaire .formQuestion:nth-child(3n+0) {
        margin-right: 0.5%;
    }

    .formQuestionnaire .formQuestion:nth-child(4n+0) {
        margin-right: 0.5%;
    }

    .formQuestionnaire .formQuestion:nth-child(5n+0) {
        margin-right: 0;
    }
}

@media only screen and (min-width: 1216px) and (max-width: 1339px) {
    .formQuestionnaire .formQuestion {
        width: 24%;
    }

    .formQuestionnaire .formQuestion:nth-child(2n+0){
        margin-right: 0.5%;
    }

    .formQuestionnaire .formQuestion:nth-child(3n+0){
        margin-right: 0.5%;
    }

    .formQuestionnaire .formQuestion:nth-child(4n+0){
        margin-right: 0.5%;
    }

    .ui-menu .ui-menu-item-wrapper{
        font-size: 1.375em;
        padding-top: 5px;
        padding-bottom: 5px;
    }
}

/* ----------------------------------------------------- */
/* Tablet (Portrait) */
/* ----------------------------------------------------- */
/* Width of 768px */
/* ----------------------------------------------------- */


/* ############################################################################################## */
@media only screen and (min-width: 960px) and (max-width: 1215px) {
    div.gfxSvg{
        width: 100%;
        max-width: 100%;
    }

    div.gfxLegend, div.gfxLegendCroisee{
        width: 100%;
        min-width:200px;
        max-width:100%;
    }

    div.gfxSvgDashboard{
        width:100%;
    }

    div.gfxLegendDashboard{
        width:100%;
    }

    div.blocMemberFamily{
        width: 48%;
    }

    .formQuestionnaire .formQuestion {
        width: 24%;
    }

    .formQuestionnaire .formQuestion:nth-child(2n+0) {
        margin-right: 0.5%;
    }

    .formQuestionnaire .formQuestion:nth-child(3n+0) {
        margin-right: 0.5%;
    }

    .formQuestionnaire .formQuestion:nth-child(4n+0) {
        margin-right: 0.5%;
    }

    .ui-menu .ui-menu-item-wrapper{
        font-size: 1.375em;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    ul.collectionLine li.actionCollection{
        width:15%;
    }

    ul.collectionLine li{
        display:inline-block;
        width:84%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
    /* ############################################################################################## */    
    #back-top a {
        font-size:0.850em;
    }

    div.chooseCentre_mobile select{
        width:90%;
        margin: 10px;
        font-size: 1.000em;
    }

    #popupSettings, #popupAccount{
        top:40px;
    }

    #popupMenuMobile{
        position:absolute;
        width:80%;
        top:40px;
        background-color:#ffffff;
        border:2px solid #C8C8C8;
        border-left: none;
        display:none;
        z-index: 5;
    }

    div.popupInterviewNotes, div.popupStructure{
        min-width:400px;
    }

    #accordian{
        width:100%;
    }   
    .generalContent{
        overflow: auto;
    }

    .loginList li{
        margin-bottom:10px;
    }

    .leftContent{
        display: none;
    } 

    .centerContent{
        margin-left: 0px;
        border-left: none;
    }

    .chooseCentre, .chooseCentreOne{
        display: none;
    }

    div.chooseCentre_mobile{
        display:inline;
    }

    .menu, .chooseCentreOneTablet{
        display:inline;
    }

    div.col2, div.col2first{
        min-width:200px;
        width:100%;
        float:none;
    }

    div.col3, div.col32, div.col3first{
        min-width:150px;
        width:100%;
        float:none;
    }
    
    div.col4, div.col5{
        min-width:150px;
        width:100%;
        float:none;
    }

    #loginDiv {
        width: 600px;
        padding: 0px;
        margin: 10px 0px 0px 10px;
        float: none;
    }

    #loginSurvey {
        width: auto;
        padding: 0px;
        margin: 0px 10px;
        float: none;
    }

    div.logoLogin{
        margin: 10px 0px 10px 10px;
    }

    div.loginInfo{
        margin-left: 0px;
        width: 100%;
    }

    div.loginPara{
        padding: 10px;
    }

    div.loginPara p, div.loginPara h1, div.loginPara a{
        margin:10px;
    }

    div.formul{
        padding: 0px;
    }

    footer{
        border:none;
    }

    form.appparam input[type=text], form.appparam input[type=password], form.appparam input[type=number] {
        line-height: 35px;
        min-height: 35px;
        font-size: 0.875em;
    }

    form.appparam select {
        font-size: 0.875em;
    }

    div.helpToggle{
        top:46px;
        width:340px;
    }

    h1, h2, h3, h4{
        background: none;
        padding-left: 0px;
    }

    div.graph{
        width:100%;
    }

    div.gfxSvg, div.gfxSvgCroisee{
        width:100%;
        max-width:100%;
    }

    div.gfxLegend, div.gfxLegendCroisee{
        float:left;
        width: 100%;
        min-width:200px;
        max-width:100%;
    }

    div.graphSize{
        width: 100%;
    }

    form.formSurvey,
    div.msgPseudo{
        margin-left: 5%;
        margin-right: 5%;
    }
    
    div.sessionLinked{
        margin-left: 5%;
        margin-right: 5%;
    }
    
    .cartoucheSaisieBackOffice{
        margin-left: 5%;
        margin-right: 5%;
    }

    form.formSurvey input[type=text], form.formSurvey input[type=number], form.formSurvey input[type=email]{
        width: 100%;
    }

    form.formSurvey textarea{
        width:100%;
    }

    .logoBig{
        width:250px;
    }

    div.success, div.error, div.warning, div.info, div.notice, div.infoGenerale{
        font-weight: normal;
    }

    form.formSurvey .labelQuestion, .labelQuestion{
        margin-left: 4px;
        margin-right: 4px;
    }

    form.formSurvey .submit{
        padding:12px;
    }

    form.formSurvey label.labelQuestion {
        margin-right:0px;
        width:100%;
        font-weight: bold;
    }

    div.divQuestSurvey {
        margin: 0px 0px 10px 0px;
    }

    .submit, .button{
        white-space: normal;
        max-width:100%;
        overflow:visible;
    }

    .label_echelle_mobile, td.radio_batterie_mobile{
        display: table-cell;
        line-height: 16px;
    }

    .hide_mobile{
        display: none;
    }

    table.popup td.batterie_question_img{
        vertical-align: bottom;
        padding-bottom: 10px;
    }

    .hide_pc{
        display: inline;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice{
        white-space: normal;
    }

    div.div_mobile{
        display:inline-block;
        height:48px;
        padding-left: 12px;
    }

    ul.onglets{
        display: none;
    }

    #onglets-select,
    #sub-onglets-select{
        margin:0px;
        padding:4px;
        border:2px solid #DDDDDD;
        font-size: 18px;
        max-width:100%;
    }

    div.gfxLegendDashboard, div.gfxSvgDashboard, div.gfxSvgCroisee {
        width:100%;
        max-width: 100%;
    }

    div.introHome{
        width:100%;
    }

    .breadcrumb {
        display: none;
    }

    .data-form, .data-counter, .data-home{
        width:100%;
    }

    .data-quest, .data-counter-right{
        width:100%;
        float:none;
    }

    div.surveyInProgress{
        margin: 0px 2px 5px 2px;
        height:auto;
    }

    div.surveyInProgressLeft{
        float:left; 
        width:100%;
    }

    div.surveyInProgressRight{
        width:100%; 
        float:left; 
    }

    label.marginL16{
        margin-left:20px;
    }

    label.min-size{
        min-width: 160px;
    }

    div.header{
        margin-left: 5%;
        margin-right: 5%;
    }

    div.header_structure, div.header_infoSession, div.msgEnd, div.header_langue, div.codeForSurveyOpen, div.headerPanel, div.contentPanel{
        margin-left: 5%;
        margin-right: 5%; 
    }

    div.blocMemberFamily{
        width: 48%;
    }
    
    .formQuestionnaire .formQuestion {
        width: 24%;
    }
    
    .formQuestionnaire .formQuestion:nth-child(2n+0) {
        margin-right: 0.5%;
    }
    
    .formQuestionnaire .formQuestion:nth-child(3n+0) {
        margin-right: 0.5%;
    }
    
    .formQuestionnaire .formQuestion:nth-child(4n+0) {
        margin-right: 0.5%;
    }
    
    ul.collectionLine li.actionCollection{
        width:18%;
    }

    ul.collectionLine li{
        display:inline-block;
        width:80%;
    }


    /* ############################################################################################## */
}
/* ############################################################################################## */

@media only screen and (max-width: 959px) {
    #editAnalysisFromResults, #editAnalysisCategoryFromResults, #editFilter1FromResults{
        display: none;
    }

    label.marginL16{
        margin-left: 0px;
    }

    .imgLogin{
        display: none;
    }

    .ui-menu .ui-menu-item-wrapper{
        font-size: 1.000em;
        padding-top: 7px;
        padding-bottom: 7px;
    }

    .dataTables_wrapper{
        font-size:1.125em;
    }

    div.registrationForm{
        width:90%;
    }
}

/* ############################################################################################## */
/* Mobile Portrait */
@media only screen and (max-width: 767px) {
    /* ############################################################################################## */

    /* some CSS here */
    body{
        font-size: 18px;
    }

    .actions_list{
        font-size: 16px;
    }

    .actions_list li{
        padding:4px;
    }

    header{
        height:46px;
    }

    div.titleForSurvey{
        margin:30px 10px;
        font-size: 1.412em;
        font-weight: 600;
    }
    
    #accordian h3{
        font-size: 1.000em;
        line-height: 1.250em;
        padding: 0 5px;
        margin-right: 4px;
    }
    
    #accordian ul li {
        margin-top: 8px;
        margin-bottom: 8px;
    }
    
    #back-top a {
        font-size:0.850em;
    }

    div.chooseCentre_mobile select{
        width:90%;
        margin: 10px;
        font-size: 1.000em;
    }

    .bottomTxt{
        line-height: 1.500em;
        padding-bottom: 20px;
    }

    form.formSurvey,
    div.msgPseudo{
        margin-left:8px;
        margin-right: 8px;
    }
    
    div.sessionLinked{
        margin-left: 8px;
        margin-right: 8px;
    }
    
    .cartoucheSaisieBackOffice{
        margin-left:8px;
        margin-right: 8px;
        margin: 6px 4px;
    }

    div.panel{
        margin-left:8px;
        margin-right: 8px;
    }

    ul.listeVarStructure li{
        margin: 8px 4px 8px 4px;
        line-height: 1.375em;
    }

    ul.listeVarStructure li ul li{
        margin: 8px 4px 8px 4px;
        line-height: 1.375em;
    }

    #popupSettings, #popupAccount{
        top:46px;
    }

    #popupMenuMobile{
        position:absolute;
        width:80%;
        top:46px;
        background-color:#ffffff;
        border:2px solid #C8C8C8;
        border-left: none;
        display:none;
        z-index: 5;
    }

    div.popupInterviewNotes{
        top:148px;
        min-width:250px;
    }

    #accordian {
        width:100%;
    }

    .generalContent{
        overflow: auto;
    }

    .loginList li{
        margin-bottom:20px;
    }

    .leftContent{
        display: none;
    }

    .centerContent{
        margin-left: 0px;
        border-left: none;
    }

    .chooseCentre, .chooseCentreOne{
        display: none;
    }

    div.chooseCentre_mobile{
        display:inline;
    }

    .menu, .chooseCentreOneTablet{
        display:inline;
    }

    div.col2{
        min-width:200px;
        width:100%;
        float:none;
    }

    div.col3, div.col32, div.col4, div.col5{
        min-width:150px;
        width:100%;
        float:none;
    }

    #loginDiv{
        width: 100%;
        padding: 0px;
        margin: 0px;
        float: none;
    }
    
    #loginSurvey{
        width: 100%;
        padding: 0px;
        margin: 0px;
        float: none;
    }
    
    div.logoLogin{
        margin: 10px 0px 10px 10px;
    }

    div.loginInfo{
        margin-left: 0px;
        width: 100%;
    }

    div.loginPara{
        padding: 10px;
    }

    div.loginPara p, div.loginPara h1, div.loginPara a{
        margin:10px;
    }

    div.formul{
        padding: 0px;
    }

    footer{
        border:none;
    }
    form.appparam input[type=text], form.appparam input[type=password], form.appparam input[type=number] {
        line-height: 35px;
        min-height: 35px;
        font-size: 0.875em;
    }

    form.appparam select {
        font-size: 0.875em;
    }

    div.helpToggle{
        top:46px;
        width:340px;
    }

    h1, h2, h3, h4{
        background: none;
        padding-left: 0px;
    }

    div.graph{
        width:100%;
    }

    div.gfxSvg, div.gfxSvgDashboard, div.gfxSvgCroisee{
        width:100%;
        max-width:100%;
    }

    div.gfxLegend, div.gfxLegendDashboard, div.gfxLegendCroisee{
        float:left;
        width: 100%;
        min-width:200px;
        max-width:100%;
    }

    div.gfxContentDashboard{
        width:100%;
        max-width: 100%;
    }

    div.graphSize{
        width: 100%;
    }

    form.formSurvey,
    div.msgPseudo{
        box-shadow: none;
    }
    
    div.sessionLinked{
        box-shadow: none;
    }

    form.formSurvey input[type=radio]{
        font-size:0.850em;
    }

    form.formSurvey select{
        font-size:0.850em;
    }

    .logoBig{
        width:250px;
    }

    div.success, div.error, div.warning, div.info, div.notice{
        font-weight: normal;
        line-height: 26px;
    }

    form.formSurvey label.labelQuestion {
        margin-right:0px;
        width:100%;
        font-weight: bold;
    }

    div.divQuestSurvey {
        margin: 0px 0px 10px 0px;
    }

    .submit, .button{
        white-space: normal;
        max-width:100%;
        overflow:visible;
    }

    .withMargin{
        margin:2px 14px 2px 0px;
        font-size:1.000em;
    }

    .label_echelle_mobile, td.radio_batterie_mobile{
        display: table-cell;
        line-height: 16px;
    }

    .hide_mobile{
        display: none;
    }

    table.popup td.batterie_question_img{
        vertical-align: bottom;
        padding-bottom: 10px;
    }

    .hide_pc{
        display: inline;
    }
    
    div.div_mobile{
        display:inline-block;
        height:48px;
        padding-left: 12px;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice{
        white-space: normal;
    }

    ul.onglets{
        display: none;
    }

    #onglets-select,
    #sub-onglets-select{
        margin:0px;
        padding:4px;
        border:2px solid #DDDDDD;
        font-size: 18px;
        max-width:100%;
    }

    div.gfxLegendDashboard, div.gfxSvgDashboard, div.gfxSvgCroisee {
        width:100%;
        max-width: 100%;
    }

    div.introHome{
        width:100%;
    }

    div.col2first{
        width:100%;
        padding:2px;
        float:none;
    }

    div.col2{
        width:100%;
        padding:2px;
        float:none;
    }

    div.col3502first, div.col2502first, div.col4002first{
        width:100%;
        min-width: initial;
        max-width: initial;
        padding:2px;
        float:none;
    }

    div.col3502last, div.col2502last, div.col4002last{
        margin-left:0px;
        width:100%;
        padding:2px;
    }

    div.col6002first{
        width:100%;
        min-width: initial;
        max-width: initial;
        padding:2px;
        float:none;
    }

    div.col6002last{
        margin-left:0px;
        width:100%;
        padding:2px;
    }

    div.col3first{
        width:100%;
        padding:2px;
        float:none;
    }

    div.col3, div.col32, div.col4, div.col5{
        width:100%;
        padding:2px;
        float:none;
    }

    .breadcrumb{
        display: none;
    }

    .tblResponse{
        width:100%;
    }

    .gfxFreq{
        min-width:100%;
        height: 400px;
    }

    div.inlineBlock{
        margin-top: 4px;
    }

    div.filterComparaison{
        width:100%;
    }

    .selectCounter{
        width:170px;
    }

    .data-form, .data-counter, .data-home{
        width:100%;
    }

    .data-quest, .data-counter-right{
        width:100%;
        float:none;
    }

    div.popupInterviewNotes, div.popupStructure{
        min-width:300px;
    }

    div.contentFormFilter ul li label{
        width:100px;
    }

    a.deleteForms{
        margin-left:2px;
    }  

    div.surveyInProgress{
        margin: 0px 2px 5px 2px;
        height:auto;
    }

    div.surveyInProgressLeft{
        float:left;
        width:100%;
    }

    div.surveyInProgressRight{
        width:100%;
        float:left;
    }

    div.result_filter .select2-container{
        width: 200px;
    }

    #useFilter1{
        display:block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom:4px;
    }

    div.result_filter label.defconf{
        margin-bottom: 4px;
    }

    div.contentAddFilter{
        margin-left: 5px;
    }

    ul.ulFilter{
        margin-left: 5px;
    }

    div.contentResponseSurvey{
        padding:5px;
        width : 100%;
    }

    #editAnalysisFromResults, #editAnalysisCategoryFromResults, #editFilter1FromResults{
        display: none;
    }

    .select2-container{
        margin-top: -3px;
    }

    label.marginL16{
        margin-left:0px;
    }

    label.min-size{
        min-width: 160px;
    }

    ul.questionSurvey{
        margin: 6px 4px;
    }

    div.thumbContainer{
        width: initial;
    }

    div.header{
        margin-left: 8px;
        margin-right: 8px;
    }

    div.header_structure, div.header_infoSession, div.msgEnd, div.header_langue, div.codeForSurveyOpen, div.headerPanel, div.contentPanel{
        margin-left: 8px;
        margin-right: 8px;
    }
    
    div.blocPartSelection{
        width:100%;
    }
    div.blocPartSelection select{
        width:100%;
    }
    
    .headerNps{
        font-size: 0.875em;
    }
    
    table.tableNps label{
        font-size: 0.875em;
        padding: 12px 0px;
    }

}
/* ############################################################################################## */

/* ############################################################################################## */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    /* ############################################################################################## */

    /* some CSS here */
    .loginList li{
        margin-bottom:20px;
    }

    .leftContent{
        display: none;
    } 

    .centerContent{
        margin-left: 0px;
        border-left: none;
    }

    .chooseCentre, .chooseCentreOne{
        display: none;
    }

    div.chooseCentre_mobile{
        display:inline;
    }

    .menu, .chooseCentreOneTablet{
        display:inline;
    }

    div.col2, .freqNbIn, .freqNbOut{
        min-width:200px;
        width:100%;
        float:none;
    }

    div.col3, div.col32, div.col4, div.col5{
        min-width:150px;
        width:100%;
        float:none; 
    }

    footer{
        border:none;
    } 

    form.appparam input[type=text], form.appparam input[type=password], form.appparam input[type=number] {
        line-height: 35px;
        min-height: 35px;
    }

    div.gfxSvg{
        width:100%;
        max-width: 100%;
    }

    div.introHome{
        width:100%;
    }

    .breadcrumb {
        display: none;
    }

    .data-form, .data-counter, .data-home{
        width:100%;
    }

    .data-quest, .data-counter-right{
        width:100%;
        float:none;
    }

    div.blocMemberFamily{
        width: 98%;
    }

    .formQuestionnaire .formQuestion {
        float: left;
        margin-right: 0.5%;
        width: 48%;
    }

    .formQuestionnaire .formQuestion:nth-child(2n+0) {
        margin-right: 0;
    }
    
    ul.collectionLine li.actionCollection{
        width:28%;
    }

    ul.collectionLine li{
        display:inline-block;
        width:70%;
    }

    .checkboxElementMultiple{
        margin: 12px 0px 0px 8px;
    }


    /* ############################################################################################## */
}
/* ############################################################################################## */

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

    div.contentFormFilter{
        padding:0px;
    }

    div.contentAddFilter{
        margin-left:1px;
    }
    ul.ulFilter{
        margin-left:0px;
    }
    
    ul.ulFilter li{
        margin:10px 0px;
    }

    div.headerSurvey{
        margin-left: 8px;
        margin-right: 8px;
    }

    div.headerRightLogo .logoSmall{
        display: inline;
    }

    div.headerRightLogo .logoBig{
        display:none;
    }

    div.gfxContentDashboard{
        width:100%;
        max-width: 100%;
    }

    div.blocMemberFamily{
        width: 98%;
    }
    
    div.formQuestion{
        min-height: -moz-fit-content;
        min-height: fit-content;
    }
    
    .female{
        margin-left: 0px;
    }
    
    .radio_batterie_mobile, .formSurvey .radio_batterie_mobile select{
        width: 120px;
        padding:6px;
    }
    
    ul.ulRadio li.liLine{
        display: block;
        margin-right: 0px;
    }

    ul.collectionLine li.actionCollection{
        width:99%;
    }

    ul.collectionLine li.collection{
        width:99%;
    }
    
    .headerNps{
        font-size: 0.750em;
    }
    
    table.tableNps label{
        font-size: 0.750em;
        padding:14px 0px;
    }
    
    th.rotate{
        height:200px;
        white-space: nowrap;
        text-align: right;
        font-size: 1.000em;
    }
    
    th.rotate > div{
        transform: translate(-30px, 0px) rotate(45deg);
        width: 30px;
    }
    
    div.formQuestion{
        width:100%;
    }

    ul.ulRadio .liMultiple{
        padding: 9px 0px;
    }

    div.divQuestSurvey div.question{
        margin: 6px 0px;
    }

    div.col2, .freqNbIn, .freqNbOut{
        min-width:200px;
        width:100%;
        float:none;
    }

}