/* Platform responsive template */
/* ############################################################################################## */
@media only screen and (min-width: 1340px) {

}

@media only screen and (min-width: 1216px) and (max-width: 1339px) {


    .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: 960px) and (max-width: 1215px) {

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

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

    #accordian{
        width:95%;
    }

    .generalContent{
        overflow: auto;
    }

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

    .leftContent{
        display: none;
    }

    #sitadel_settings_responsive{
        display:inline;
    }

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

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

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

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

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

    div.graph{
        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{
        display: none;
    }

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

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

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

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

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

    div.header_structure, div.msgEnd, div.header_langue, div.interviewNotes, div.codeForSurveyOpen{
        margin-left: 5%;
        margin-right: 5%; 
    }
    
    ul.collectionLine li.actionCollection{
        width:18%;
    }

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

    div.divLabel{
        margin-top:8px;
    }


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

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

    .imgLogin{
        display: none;
    }

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

    div.block_cartouche{
        width:25%;
    }

    div.block_cartoucheParking{
        width:50%;
    }

    body{
        font-size:16px;
    }

    div.centerSubContent{
        padding-right: 16px;
    }

    div.contentStatsGraph{
        width:100%;
    }

    div.contentStatsDistribution{
        width:100%;
    }

}

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

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

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

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

    #accordian {
        width:95%;
    }

    .generalContent{
        overflow: auto;
    }

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

    .leftContent{
        display: none;
    }

    #sitadel_settings_responsive{
        display:inline;
    }

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

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

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

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

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

    div.graph{
        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;
    }

    .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{
        display: none;
    }

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

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

    div.col2{
        width:100%;
        padding:0px 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{
        width:100%;
        padding:2px;
        float:none;
    }

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

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

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

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

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

    div.header_structure, div.msgEnd, div.header_langue, div.interviewNotes, div.codeForSurveyOpen{
        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.content_cartouche{
        font-size:0.9000em;
    }

    div.block_cartouche{
        width:50%;
    }

    div.block_cartoucheParking{
        width:50%;
    }

    .ui-widget.ui-widget-content{
        width:98%;
    }

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

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

    body{
        font-size:15px;
    }

    div.centerSubContent{
        padding-right: 16px;
    }

    div.contentStatsGraph{
        width:100%;
    }

    div.contentStatsDistribution{
        width:100%;
    }

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

    .leftContent{
        display: none;
    }

    #sitadel_settings_responsive{
        display:inline;
    }

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

    .chooseCentre, .chooseCentreOne{
        display: none;
    }

    div.chooseCentre_mobile{
        display:inline;
    }

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

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

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

    .data-quest, .data-counter-right{
        width:100%;
        float:none;
    }
    
    ul.collectionLine li.actionCollection{
        width:28%;
    }

    ul.collectionLine li{
        display:inline-block;
        width:70%;
    }
    
    .tableDiscrete th {
        font-size: 0.875em;
    }

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

@media only screen and (max-width: 479px) {
    div.contentFormFilter{
        padding:0px;
    }

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

    div.headerRightLogo .logoSmall{
        display: inline;
    }

    div.headerRightLogo .logoBig{
        display:none;
    }
    
    .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;
    }
    
    .tableDiscrete td{
        font-size: 0.750em;
    }
    
    div.formQuestion{
        width:100%;
    }

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

    div.divQuestSurvey div.question{
        margin: 6px 0px;
    }
    
    div.col2{
        min-width:200px;
        width:100%;
        float:none;
    }

    div.content_cartouche{
        font-size:0.9000em;
    }

    div.block_cartouche{
        width:50%;
    }

    div.block_cartoucheParking{
        width:50%;
    }

}