/* Platform responsive template */
/* ############################################################################################## */
@media only screen and (min-width: 1440px) {
    body{
        max-width:1440px;
        margin:auto;
    }
    header, .generalContent{
        border-left:1px solid #C8C8C8;
        border-right:1px solid #C8C8C8;
    }

    header{
        margin-top:10px;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
    }

    .centerSubContent{
        padding-right:4px;
    }

    footer{
        border-left:1px solid #f8f9fa;
        border-right:1px solid #f8f9fa;
    }

    .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;
    }

    .triangle{
        top:-6px;
    }
}

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


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

    .imgLogin img{
        height:250px;
        margin-top:120px;
        display:block;
        border-radius: 6px;
    }

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

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

    div.varExplain, div.varPeriodique, div.varExplainMultiple{
        width:49.5%;
        margin-right:0.2%;
    }

    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: 939px) {
    /* ############################################################################################## */    
    #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:46px;
        background-color:#f8f9fa;
        border:1px solid #C8C8C8;
        border-top-left-radius: 3px;
        border-bottom-right-radius: 3px;
        box-shadow: 1px 1px 3px #5F5F5F;
        border-left: none;
        display:none;
        z-index: 5;
    }

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

    #accordian{
        width:95%;
    }

    .generalContent{
        overflow: auto;
    }

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

    .leftContent{
        display: none;
    }

    .centerContent{
        margin-left: 0px;
        padding-left: 4px;
        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{
        width: 50%;
    }
    
    div.col5{
        width:33.3%;
    }

    div.col7{
        width:24%;
    }

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

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

    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 30px 30px 30px;
    }

    .appparam input[type=text], .appparam input[type=password], .appparam input[type=number] {
        font-size: 0.875em;
    }

    input[type=text].inputCode{
        font-size:3em;
    }

    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{
        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:block;
        margin: 6px 6px 12px 6px;
    }

    ul.onglets, ul.subOnglets{
        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; 
    }

    div.varExplain, div.varExplainMultiple{
        width:49.5%;
        margin-right:0.2%;
    }

    div.varPeriodique{
        width:48%;
    }

    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.interviewNotes, 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%;
    }

    div.lstFilterVar div.filterVar{
        display:inline-block;
        width:49%;
    }


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

@media only screen and (max-width: 939px) {
    #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;
    }
}

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

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

    .actions_list{
        font-size: 16px;
    }

    .actions_list li{
        padding:4px;
    }

    header{
        height:46px;
    }
    
    #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{
        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:#f8f9fa;
        border:1px solid #C8C8C8;
        border-top-left-radius: 3px;
        border-bottom-right-radius: 3px;
        box-shadow: 1px 1px 3px #5F5F5F;
        border-left: none;
        display:none;
        z-index: 5;
    }

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

    #accordian {
        width:95%;
    }

    .generalContent{
        overflow: auto;
    }

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

    .leftContent{
        display: none;
    }

    .centerContent{
        margin-left: 0px;
        padding-left: 4px;
        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;
    }
    
    div.col7{
        width:49%;
    }

    #loginDiv{
        width: 100%;
        max-width:600px;
        padding: 0px;
        margin: 0px;
        float: none;
    }
    
    #loginSurvey{
        width: 100%;
        padding: 0px;
        margin: 0px;
        float: none;
    }

    .logoLogin{
        padding: 30px 60px;
    }

    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 60px 30px 60px;
    }

    .appparam input[type=text], .appparam input[type=password], .appparam input[type=number] {
        font-size: 0.875em;
    }
    
    input[type=text].inputCode{
        font-size:3em;
    }

    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{
        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:block;
        margin: 6px 6px 12px 6px;
    }

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

    ul.onglets, ul.subOnglets{
        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 0px;
        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, div.col41, div.col43{
        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%;
    }

    div.varExplain, div.varExplainMultiple{
        width:49.5%;
        margin-right:0.2%;
    }

    div.varPeriodique{
        width:48%;
    }

    #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.interviewNotes, 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;
    }

    div.lstFilterVar div.filterVar{
        display:inline-block;
        width:99%;
    }

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

/* ############################################################################################## */
@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;
        padding-left: 4px;
        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, div.col41, div.col43{
        min-width:150px;
        width:100%;
        float:none; 
    }

    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.varExplain, div.varExplainMultiple{
        width:99%;
        margin-right:0;
    }

    div.varPeriodique{
        width:98%;
    }

    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%;
    }

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

@media only screen and (max-width: 479px) {
    div.varExplain, div.varExplainMultiple{
        width:99%;
        margin-right:0;
    } 

    div.varPeriodique{
        width:48%;
    }

    div.contentFormFilter{
        padding:0px;
    }

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

    div.result_filter_analysis{
        margin:0px;
    }

    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: rotate(90deg);
        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;
    }

    .blockDashboardResumeNumberInterior,
    .blockDashboardResumeNumberIn,
    .blockDashboardResumeNumberOut
    {
        display:inline-block;
        width:100%;
        max-width:100%;
    }

    .analysis_graph{
        padding:0px;
    }

    .centerSubContent {
        padding: 4px 24px 4px 4px;
    }

    th.hide_mobile,
    td.hide_mobile{
        display:none;
    }

    table.distribution{
        font-size:0.765em;
    }

}