@media only screen and (min-width:1024px) {
    #qoa_suite {
      width: 60%;
      margin: 30px 20%;
    }
    #qoa_fin {
      width: 50%;
      margin: 100px 25%;
    }
    #nav_questions {
        margin-top: 30px;
    }

    #nav_questions .B_nav {
        float: left;
        width: auto;
        height: auto;
        margin: 0;
        padding: 5px 5px;
        padding: 0 10px;
        font-size: 24px;
        cursor: pointer;
    }

    #nav_questions .B_nav span {
        margin-right: 10px;
    }

    #nav_questions .B_nav i {
        margin: 9px 0 8px 0;
        font-size: 27px;
    }

    #B_save {
        position: absolute;
        left: 330px;
    }

    #B_valid {
        float: right !important;
    }

    #B_previous {
    }

    #B_previous i {
        float: left;
        margin-right: 10px;
    }

    #B_suite {
        float: right !important;
    }

    .reponses.liste_10 .reponse {
        float: left;
        width: calc((100% - 200px) / 11);
        margin-right: 20px;
        text-align: center;
    }

    .reponses.liste_10 .reponse:last-child {
        margin-right: 0;
    }

    .relecture .reponses.liste_10 .reponse {
        float: left;
        width: 100%;
        margin-right: 0;
        text-align: left;
    }

    .tq_7 #jauge {
        position: absolute;
        width: 100%;
    }

    .tq_7 #jauge img {
        margin-top: -50px;
    }

    .tq_7 #jauge_slider img {
        margin-top: 0;
    }

    .tq_7 .reponses_choix {
        position: absolute;
        width: 65%;
        margin: 37px 17%;
    }

    .tq_7 .reponses.liste_10 .reponse {
        width: calc(100% / 11);
        height: 70px;
        margin-right: 0;
        padding: 0;
        background: transparent;
    }

    .question h3 {
        font-size: 31px !important;
    }

    .squestion h4 {
        font-size: 26px !important;
    }
    .question h3.wsurvol span {
      width: 95%;
    }
    .squestion h4.wssurvol span {
      width: 95%;
    }
    .survol_in {
      font-size:31px;
    }
    .ssurvol_in {
      font-size:26px;
    }
    .reponses {
        float: left;
        width: 100%;
    }

    .reponses.liste_10 .reponse {
        float: left;
        width: calc((100% - 200px) / 11);
        margin-right: 20px;
        text-align: center;
    }

    .reponses.liste_10 .reponse:last-child {
        margin-right: 0;
    }

    .relecture .reponses.liste_10 .reponse {
        float: left;
        width: 100%;
        margin-right: 0;
        text-align: left;
    }

    .relecture .question h3 {
        margin-bottom: 0;
        font-size: 24px !important;
    }

    #T_chapitre {
        font-size: 30px;
    }

    #z_titre_page h2 {
        font-size: 24px !important;
    }

    #z_pet .photo {
        z-index: 99999;
        width: 200px;
        height: 200px;
        margin-top: -100px;
        margin-left: -40px;
        border-radius: 200px;
        overflow: hidden;
        background: white;
        transform: scale(0.6);
    }

    #z_pet .photo span {
        display: block;
        width: 200px;
        height: 200px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }

    #z_pet .nom {
        margin: 0 !important;
        font-size: 18px;
    }

    #z_radar {
        width: 50%;
    }

    #z_radar #a_radar {
        top: 50px;
        left: 40px;
        width: 410px;
        height: 410px;
    }

    #z_radar #f_radar {
        top: 65px;
        left: 55px;
        width: 380px;
        height: 380px;
    }

    #z_radar #c_radar {
            top: 20px !important;
        left: 15px !important;
        width: 465px !important;
        height: 465px !important;
    }
    #z_radars #c_radar {
    	top: -10px !important;
        left: -20px !important;
        width: 405px !important;
        height: 405px !important;
    }
    #z_jauges {
        width: 48%;
        margin-left: 2%;
        padding: 0;
    }

    #B_previous {
        position: absolute;
    }

    #B_review {
        margin: 0;
    }

    #B_previous span {
        margin-left: 20px;
    }

    #B_review {
        width: auto;
    }

    .t_fin p {
        font-size: 24px;
        line-height: 30px;
    }

    .B_nav_conclusion {
        width: auto;
    }

    #z_give_access .B_nav_conclusion {
        width: auto;
    }

    .complement {
        position: absolute;
        top: 10px;
        right: 10px;
        margin: 0;
        padding: 0 30px;
    }
	#z_timeline #z_legende .dim_nom {
    	width: calc(100% - 40px);
    	height: 30px;
	}

    .B_yes,
    .B_no {
        z-index: 999999;
        position: absolute;
        top: 10px;
        padding: 0 30px;
        border-radius: 20px;
        color: var(--awb-color5);
        background: white;
        cursor: pointer;
    }

    .B_yes {
        right: 110px;
    }

    .B_no {
        right: 10px;
    }

    #z_timeline .survey .date {
        font-size: 16px;
    }

    .complement div {
        float: left;
        width: auto;
        font-size: 18px;
        font-size: 21px;
    }

    #z_questionnaire #closed:hover {
        position: absolute;
        width: 100%;
        height: 100%;
        background: transparent;
        cursor: not-allowed;
    }

    #z_hello:hover .debug {
        display: block;
    }

    .reponses .reponse:hover {
        color: white;
        background: var(--awb-color3);
    }

    .tq_7 .reponses .reponse:hover {
        color: transparent !important;
        background: transparent !important;
    }

    .tq_7 .reponses .reponse_choix:hover {
        color: transparent !important;
        background: transparent !important;
    }

    #nav_questions .B_nav:hover b {
        background: var(--awb-color8);
    }

    #B_valid:hover {
        color: var(--awb-color8) !important;
        background: var(--awb-color1) !important;
    }

    #B_valid:hover i {
        color: var(--awb-color8) !important;
    }

    #B_previous:hover {
        color: var(--awb-color1) !important;
        background: var(--awb-color3) !important;
    }

    #B_save:hover {
        color: var(--awb-custom_color_1) !important;
        background: transparent !important;
    }

    #B_save:hover i {
        color: var(--awb-custom_color_1) !important;
    }

    .B_nav_conclusion:hover b {
        background: var(--awb-color8);
    }

    #B_save_out:hover {
        color: var(--awb-color8) !important;
        background: transparent !important;
    }

    #B_submit:hover {
        color: var(--awb-custom_color_1) !important;
        background: transparent !important;
    }

    #B_submit:hover svg .st0 {
        fill: var(--awb-color1);
    }

    #z_timeline .survey:hover {
        background: var(--awb-color4);
    }

    #B_submit:hover b {
        background: var(--awb-custom_color_1) !important;
    }

    #B_save_out:hover svg .st0 {
        fill: var(--awb-color1);
    }

    #B_save_out:hover b {
        background: var(--awb-color8) !important;
    }

    #B_review:hover {
        color: var(--awb-color1) !important;
        background: var(--awb-color3) !important;
    }

    #B_review:hover i {
        color: var(--awb-color1) !important;
        background: var(--awb-color3) !important;
    }

    #B_review:hover {
        color: var(--awb-color1) !important;
        background: var(--awb-color3) !important;
    }

    .B_nav_conclusion:hover svg.st0 {
        fill: red;
    }

    .B_nav_conclusion:hover i {
        color: var(--awb-color1);
        background: transparent;
    }

    .B_nav_conclusion:hover {
        color: var(--awb-color3);
        background: var(--awb-color1);
    }

    #B_save:hover b {
        background: var(--awb-custom_color_1) !important;
    }

    #nav_questions #B_previous:hover i {
        color: white !important;
    }

    #nav_questions .B_nav:hover svg .st0 {
        fill: var(--awb-color1);
    }

    #nav_questions .B_nav:hover i {
        color: var(--awb-color3);
        background: transparent;
    }

    #nav_questions .B_nav:hover {
        color: var(--awb-color3);
        background: var(--awb-color1);
    }

    .reponses .reponse.choix:hover {
        background: var(--awb-color3);
    }

    .reponses .sreponse.choix:hover {
        background: var(--awb-color6);
    }

    .fnpi .reponses .reponse:hover {
        color: white;
        background: var(--awb-color4);
    }

    .reponses .sreponse:hover {
        color: white;
        background: var(--awb-color6);
    }

    #z_progress .B_nav:hover {
        color: var(--awb-color2);
        background: transparent;
    }
    #map {
	    padding: 0;
    }
    #map .vet {
    	list-style-type:none;
    	border: 1px solid gray;
    	padding: 10px;
    	float: left;
    	width: 100%;
    	margin-bottom: 20px;
    }
    #map .vet li {
    	padding:10px;
    	border:1px solid gray;
    }
    #map .vet p {
    	width:100%;
    	font-size: 20px;
    	margin-bottom: 20px;
    }
    #map .vet .nom {
        font-weight:bold;
        margin-right: 50px;
    }
    #map .vet a {
        color: white !important;
        cursor: pointer;
        background: var(--awb-color4);
        padding: 5px 10px;
        margin-left:10px;
        float:right;
    }
    #map .vet a .fa-edit {
        margin-right:10px;
    }
    #map .vet a:hover {
        background: var(--awb-color3);
    }
    #map .vet .ordo {
        float:none;
        cursor: pointer;
        background: var(--awb-color3);
        padding: 5px;
        margin-left:0;
    }
    #map .vet .ordo:hover {
        background: var(--awb-color4);
    }
    #map .pets {
    	list-style-type:none;
    	display: flow;
    	padding: 0;
    }
    #map .pets li {
    	padding: 5px 5px 0px 10px;
    	border:1px solid black;
    	margin: 0 1% 10px 0;
    	width: 24%;
    	float: left;
    	height: 165px;
    }
    #map .pets .nom {
        margin-left:10px;
        color: var(--wp--preset--color--awb-color-custom-1);
        font-weight:bold;
    }    
    #map .qoa {
        float: left;
        width: 94%;
        position: absolute;
        left:50px;
        z-index: 100;
        border: 5px solid var(--awb-color3);
        background: white;
        padding: 10px;
        margin-top: 6px;
    }    
    #map .qoa li {
    	padding: 0;
    	border:none;
    	margin: 0;
    	width: auto;
    	float: none;
    	height: auto;
    }
    .B_qoa {
        color: white !important;
        cursor: pointer;
        background: var(--awb-color4);
        padding: 5px 10px;
        float: right;
    }
    .B_qoa:hover,
    .qoa_actif {
        background: var(--awb-color3);
    }
    #B_doc_pet {
        color: white !important;
        cursor: pointer;
        font-family:Barlow, Arial, Helvetica, sans-serif;
        background: var(--awb-color3);
        padding: 10px;
    }
    #B_doc_pet:hover {
        background: var(--awb-color4);
    }
    #B_doc_pet i {
        margin-left: 10px;
    }
}