/*******************************************************************************************************/
/*Extra large devices (large desktops, 992px and up)*/
/* Style pour grand desktop  */
@media (min-width: 992px) {
    .bandeau-access {
        width: auto;
        margin-top: 0px;
        padding-top: 0px;
        padding-bottom: 2px;
    }

    .optprofiltar {
        width: 95% !important;
        margin-left: auto;
        margin-right: auto;
    }

    .logosncf152 {
        width: 135px;
    }

    .h2voyage {
        font-size: 1.4rem;
        color: #239ed8;
        font-style: oblique;
        font-weight: bold;
        letter-spacing: 0.1rem;
        margin-left: 0px;
        margin-right: 0px;
    }

    .accroche012sncf {
        height: 49px;
        width: 377px;
    }

    .logo_ara {
        width: 250px;
        margin-top: 16px;
    }

    .titredegrade {
        background: -webkit-gradient(linear, left top, left bottom, from(#239ed8), to(#2e648b));
        -webkit-background-clip: content-box;
        -webkit-text-fill-color: transparent;
        font-weight: bold;
    }

    /*   .containlogbg {
        margin-left: auto;
        margin-bottom: 30px;
        margin-right: auto;
        height: auto;
        width: 339px;
        background-color: blue;
        border-radius: 1.1rem;
        background-color: #f2f2f2;
        box-shadow: 1px 1px 12px #555;
        text-align: center;
        align-items: center;
    }

    .top-containlog {
        position: relative;
        background-image: url(/images/top-containlog.png);
        width: 22.4375rem;
        height: 6.0625rem;
        background-repeat: no-repeat;
        font-size: 0,8rem;
        color: white;
        text-align: center;
        align-items: center;
    }*/

    .btn-secondary.active, .btn-secondary:active, .btn-secondary:focus {
        background-color: #c6c6c6;
    }

    /*FORMULAIRE DE CONNEXION*/
    formconnect {
        position: relative;
    }

    img_contour {
        float: left;
    }

    .btn-outline-info {
        color: #239ed8;
        background-color: transparent;
        background-image: none;
        border-color: #239ed8;
        padding-left: 2rem;
        padding-right: 2rem;
    }

        .btn-outline-info:hover,
        .btn-outline-info:active,
        .btn-outline-info:visited,
        .btn-outline-info:focus {
            background-color: #239ed8;
            border-color: #239ed8;
            color: white;
        }

    .btn-outline-fermer {
        color: #239ed8;
        background-color: transparent;
        background-image: none;
        border-color: #239ed8;
        padding-left: 2rem;
        padding-right: 2rem;
    }

        .btn-outline-fermer:hover,
        .btn-outline-fermer:active,
        .btn-outline-fermer:visited,
        .btn-outline-fermer:focus {
            background-color: #fff;
            border-color: #239ed8;
            color: #239ed8;
            text-decoration: underline;
            cursor: pointer !important;
        }

    .btn-outline-accessi {
        color: #239ed8;
        background-color: transparent;
        background-image: none;
        border-color: #239ed8;
        padding-left: 2rem;
        padding-right: 2rem;
    }

        .btn-outline-accessi:hover,
        .btn-outline-accessi:active,
        .btn-outline-accessi:visited,
        .btn-outline-accessi:focus {
            background-color: #fff;
            border-color: #239ed8;
            color: #239ed8;
            text-decoration: underline;
            cursor: pointer !important;
        }

    /*.btn-retour {
        color: #239ed8;
        background-color: transparent;
        background-image: none;
        border-color: #239ed8;
        padding-left: 2rem;
        padding-right: 2rem;
    }

        .btn-retour:hover,
        .btn-retour:active,
        .btn-retour:visited,
        .btn-retour:focus {
            border-color: #239ed8;
            color: #239ed8;
            text-decoration: underline;
            cursor: pointer !important;
        }*/

    .btn-retour.a11y {
        color: #239ed8;
        background-color: transparent;
        background-image: none;
        border-color: #239ed8;
        padding: 0.5rem 1.2rem;
    }

        .btn-retour.a11y:hover,
        .btn-retour.a11y:active,
        .btn-retour.a11y:visited,
        .btn-retour.a11y:focus {
            color: #239ed8;
            text-decoration: underline;
            cursor: pointer !important;
        }

    .btn_ensavoirplus {
        position: absolute;
        font-size: 0.8rem;
        font-weight: 500;
        margin-top: 0.5rem;
        padding-left: 2rem;
        color: #239ed8;
    }
}
/*THE END Style pour grand desktop*/
/***************************************************************************************/
/*Extra large devices (medium desktops, 768px and up)*/
/* Style pour grand desktop  */
@media (min-width: 768px) {
    .titredegrade {
        background: -webkit-gradient(linear, left top, left bottom, from(#239ed8), to(#2e648b));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: bold;
    }

    /* .containlogbg {
        margin-left: auto;
        margin-bottom: 30px;
        margin-right: auto;
        height: auto;
        width: 359px;
        background-color: blue;
        border-radius: 1.1rem;
        background-color: #f2f2f2;
        box-shadow: 1px 1px 12px #555;
        text-align: center;
        align-items: center;
    }

    .top-containlog {
        position: relative;
        background-image: url(/images/top-containlog.png);
        width: 22.4375rem;
        height: 6.0625rem;
        background-repeat: no-repeat;
        font-size: 0,9rem;
        color: white;
        text-align: center;
        align-items: center;
    }*/

    .btn-secondary.active, .btn-secondary:active, .btn-secondary:focus {
        background-color: #c6c6c6;
    }

    /*FORMULAIRE DE CONNECTION*/
    formconnect {
        position: relative;
    }

    img_contour {
        float: left;
    }

    .btn-outline-info {
        color: #239ed8;
        background-color: transparent;
        background-image: none;
        border-color: #239ed8;
        padding-left: 2rem;
        padding-right: 2rem;
    }

        .btn-outline-info:hover,
        .btn-outline-info:active,
        .btn-outline-info:visited,
        .btn-outline-info:focus {
            background-color: #239ed8;
            border-color: #239ed8;
        }

    .btn_ensavoirplus {
        position: absolute;
        font-size: 0.8rem;
        font-weight: 500;
        margin-top: 0.5rem;
        color: #239ed8;
        margin: 0.1rem 0 0 0;
    }
}
/*THE END Style pour medium desktops*/
/*****************************************************************************************************/
/*Extra large devices (small screen / phone, 576px and up)*/
/* Style pour petit écran de téléphone  */
@media (min-width: 576px) {
    .margin576 {
        margin-bottom: 3rem;
    }

    .titredegrade {
        background: -webkit-gradient(linear, left top, left bottom, from(#239ed8), to(#2e648b));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: bold;
    }

    /* .containlogbg {
        margin-left: auto;
        margin-bottom: 30px;
        margin-right: auto;
        height: auto;
        width: 359px;
        background-color: blue;
        border-radius: 1.1rem;
        background-color: #f2f2f2;
        box-shadow: 1px 1px 12px #555;
        text-align: center;
        align-items: center;
    }

    .top-containlog {
        position: relative;
        background-image: url(/images/top-containlog.png);
        width: 22.4375rem;
        height: 6.0625rem;
        background-repeat: no-repeat;
        font-size: 0,9rem;
        color: white;
        text-align: center;
        align-items: center;
    }*/

    /*FORMULAIRE DE CONNECTION*/
    formconnect {
        position: relative;
    }

    img_contour {
        float: left;
    }

    .btn-outline-info.a11y, .btn-outline-info.a11y:active {
        color: #000000;
        background-color: #ffffff;
        background-image: none;
        border-color: #ffffff;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        padding-top: 0.6rem;
        padding-bottom: 0.4rem;
        border: 1px solid #000;
        FONT-SIZE: larger;
    }

    .btn-outline-info {
        color: #ffffff;
        background-color: #239ed8;
        background-image: none;
        border-color: #239ed8;
        padding-left: 2rem;
        padding-right: 2rem;
        padding-top: 0.6rem;
        padding-bottom: 0.4rem;
    }

        .btn-outline-info:hover,
        .btn-outline-info:active,
        .btn-outline-info:visited {
            background-color: #00497c;
            border-color: #00497c;
            text-decoration: underline;
        }

        .btn-outline-info:focus {
            background-color: #00497c;
            border-color: #86b7fe;
            outline: 0;
            color: #fff;
            box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
        }
}
/*THE END Style pour small desktops*/
/*IMAGE BACKGROUND DISPARAIT ENTRE 0 et 768px display*/
@media screen and (min-width: 0px) and (max-width: 768px) {
    body {
        background-color: #f2f2f2;
        background-image: none;
        text-align: center;
    }

    div.row.mb-5.mt-5 {
        display: inline-block;
        width: 78%;
    }

    #blockContainer > div {
        border: 0px dashed #f0f;
    }

    #blockContainer {
        display: -webkit-box;
        display: -moz-box;
        display: box;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        box-orient: vertical;
    }

    #blockA {
        -webkit-box-ordinal-group: 2;
        -moz-box-ordinal-group: 2;
        box-ordinal-group: 2;
    }

    #blockB {
        -webkit-box-ordinal-group: 1;
        -moz-box-ordinal-group: 1;
        box-ordinal-group: 1;
    }

    smallnumbercard {
        display: -webkit-inline-box;
    }

    .centerhimg {
        margin-left: auto;
        margin-right: auto;
    }
}
/*********************************************************************************************************/
/*********************************************************************************************************/
@media only screen and (min-width: 320px) and (max-width: 480px) {
    /* ruleset for 320px - 480px */
    body {
        font-size: 1rem !important;
        /*width: 100%!important;*/
        margin: 0 1rem !important;
    }

    #btnCompleterDemande {
        text-decoration: none;
        display: inline-block;
    }

        #btnCompleterDemande:hover, #btnCompleterDemande:focus, #btnCompleterDemande:active {
            text-decoration: underline;
            display: inline-block;
        }

    mark {
        background-color: #ffffff;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 8px;
        padding-right: 8px;
        font-size: 1rem;
        height: auto !important;
        display: inline-block;
    }

    .linedownblue {
        margin-left: auto;
        margin-right: auto;
        height: auto;
        background-color: #e6edf5;
        border: 1px solid #d6dee7;
        width: 100%;
        text-align: left;
    }

    div.bgsignature div {
        padding-left: 1rem;
    }

    .txtrsp4852 {
        width: 260px !important;
        margin: 0 auto;
        line-height: 29px;
        font-size: 1.2rem;
    }

    .respmb023 {
        margin-bottom: 2rem !important;
    }

    :focus {
        background-color: transparent !important;
        border-color: #86b7fe !important;
        outline: 0 !important;
        box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25) !important;
    }

    input[type=file] {
        width: 200px !important;
    }

    div.input-group-btn.input-group-append {
        margin: 5px auto 10px auto !important;
    }

    a.btn.btn-success.fileinput-upload.fileinput-upload-button {
        padding-top: 9px !important;
    }

    .row {
        width: 100% !important;
        margin: 0 auto !important;
    }

    .resp5678 {
        padding-left: 30px !important;
    }

    /*div.photoorigin.croppie-container {
        background-color: red;
        border-color: #86b7fe !important;
        outline: 0 !important;
        box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25) !important;
    }*/

    #modal_accessibilite_contenu {
        line-height: 4rem;
        text-align: center;
    }

    input::selection {
        color: #fff !important;
        background-color: blue;
    }

    #eligibilite.a11y {
        padding: 30px 0 30px 0;
        display: block;
        width: auto !important;
        margin: 0 auto;
        background-color: #e6edf5;
        border: 1px solid #d6dee7;
        padding: 10px 60px;
        margin-top: 1rem;
        margin-bottom: 2rem;
        color: #000;
    }

    .box {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        position: relative;
        background: transparent;
        height: 100%;
        width: 100%;
        border-width: 0px 0px 3px 0px;
        border-style: dotted dotted;
        border-color: black black;
        padding: 0;
    }

    ul.list-group.list-group-flush.text-left.mb-4.pl-3 {
        padding-left: 0 !important;
    }

    .md-form1 input[type=firstname], .md-form1 input[type=name], .md-form1 input[type=date], .md-form1 input[type=anniversary], .md-form1 input[type=datetime-local], .md-form1 input[type=email], .md-form1 input[type=number], .md-form1 input[type=password], .md-form1 input[type=search-md], .md-form input[type=search], .md-form1 input[type=tel], .md-form1 input[type=text], .md-form1 input[type=time], .md-form1 input[type=url], .md-form1 textarea.md-textarea {
        outline: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
        border: none;
        border-bottom: 1px solid #1493CF;
        -webkit-border-radius: 0;
        border-radius: 0;
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
        /* background-color: #E0E0E0; */
        font-size: 1rem;
        /*width: 201px !important;*/
        width: 15rem;
        border: 1px solid #239ed8;
    }

    .containlogbg {
        margin-bottom: 30px;
        height: auto;
        width: 100%;
        background-color: #ffffff;
        text-align: center;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        /*border: 5px solid #179dda;*/
        border: 0px solid #179dda;
    }

    .top-containlog {
        position: relative;
        /*width: 300px !important;*/
        height: 5.1rem;
        text-align: center;
        padding-top: 0.2rem;
        color: white;
        background-color: #179dda;
        margin-bottom: 1.8rem;
        text-transform: uppercase;
        font-weight: 600;
    }

    .btn-outline-info {
        color: #ffffff;
        background-color: #239ed8;
        background-image: none;
        border-color: #ffffff;
        border: 1px solid #239ed8;
        padding: 0.7rem 0rem 0.5rem 0rem;
        text-align: center;
        font-size: large;
        width: 88%;
    }

        .btn-outline-info:focus {
            background-color: #00497c !important;
            border-color: #86b7fe !important;
            outline: 0 !important;
            color: #fff;
            box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25) !important;
        }

        .btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active, .show > .btn-outline-info.dropdown-toggle {
            color: #fff;
            background-color: #239ed8;
            border-color: #239ed8;
        }

        .btn-outline-info:hover, .btn-outline-info:active, .btn-outline-info:visited {
            background-color: #00497c;
            border-color: #00497c;
            text-decoration: underline;
        }

    .bandeaubleutitre {
        text-align: center;
        background-color: #212529;
        height: 4.6875rem;
        width: 320px !important;
        text-align: center !important;
    }

        .bandeaubleutitre:focus {
            background-color: #212529 !important;
            color: #fff !important;
        }

    #modal_accessibilite {
        width: 320px !important;
    }

    div.h2titreblanc span {
        margin: unset !important;
        display: contents !important;
    }

    .container {
        width: 100%;
        padding-right: 0px;
        padding-left: 0px;
        margin-right: auto;
        margin-left: auto;
    }

    .navbar-header {
        width: 320px !important;
        margin: 0 auto;
    }

    .w320 {
        width: 320px !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .logo_ara {
        margin-top: 3rem !important;
        margin-bottom: 2rem !important;
        width: 280px !important;
    }

    #btn_deconnexion {
        margin-left: 0px !important;
        margin-top: 1rem;
    }

    .optprofiltar {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .form1-control {
        height: 54px;
        padding-left: 8px;
        padding-right: 9px;
        width: 100%;
    }

    .wraptarif485 {
        text-align: left;
    }

    div.md-form1.pb-3 img {
        margin: 0 8px 0 0px;
        padding: 0;
    }

    .h2titreblanc img {
        display: none !important;
    }

    #blockA {
        padding: 0px;
    }

    #btn_modifier_coordonnees {
        width: 95%;
    }

    /*************************************/
    /********OPTIONS ACCESSIBILITE********/
    /*************************************/
    #modal_accessibilite_contenu.a11y {
        line-height: 4rem;
        text-align: center;
    }

    .modal-dialog.a11y {
        position: relative;
        width: 304px;
        margin: 0.5rem;
        pointer-events: none;
    }

    .bgbox1245 {
        background-color: #ecf1f7;
        border: none !important;
        margin-bottom: 2rem !important;
        /*width: 320px !important;
        margin: 0 auto;*/
    }

        .bgbox1245.a11y {
            background-color: #ecf1f7;
            border: 5px solid #38404f;
            margin-bottom: 2rem !important;
            /*width: 320px !important;
            margin: 0 auto;*/
        }

    .top-containlog.a11y {
        position: relative;
        /*width: 310px;*/
        height: 5.1rem;
        text-align: center;
        padding-top: 0.2rem;
        color: white;
        background-color: #179dda;
        margin-bottom: 1.8rem;
        text-transform: uppercase;
        font-weight: 600;
    }

    .containblanc {
        border-radius: 0;
        border: 0px solid #38404f;
        background-color: none;
        width: 100% !important;
        padding: 20px 5px 20px 5px !important;
    }

        .containblanc.a11y {
            border-radius: 0;
            border: 5px solid #38404f;
            background-color: #ecf1f7;
            width: 100% !important;
            padding: 20px 5px 20px 5px !important;
        }

    .container.a11y {
        width: 100% !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .w320.a11y {
        width: 320px !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .titleblue.a11y b.a11y {
        letter-spacing: 0.07rem;
        font-weight: normal;
        color: #000 !important;
        font-weight: 600;
    }

    .col12-54848.a11y {
        -ms-flex: 0 0 100%;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    #recap_type_demande {
        background-color: #ffffff;
        padding-left: 20px;
        padding-right: 20px;
        font-size: 1.1rem;
        height: auto !important;
        display: inline-block;
    }

    #recap_categorie {
        background-color: #ffffff;
        padding-left: 20px;
        padding-right: 20px;
        font-size: 1.1rem;
        height: auto !important;
        display: inline-block;
    }

    #recap_situation {
        background-color: #ffffff;
        padding-left: 20px;
        padding-right: 20px;
        font-size: 1.1rem;
        height: auto !important;
        display: inline-block;
    }

    .col12-54848 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}
/*********************************************************************************************************/
/*IPHONE RESPONSIVE*/
/*********************************************************************************************************/
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
    body {
        font-size: 1rem !important;
        /*width: 90% !important;*/
        margin: 0 1rem !important;
        text-align: center;
    }

    #btn_continuer {
        margin-bottom: 3rem !important;
    }

    .label-certification {
        width: 20.7rem;
    }

    #modal_accessibilite {
        width: 100% !important;
    }

    .logo_ara {
        margin-top: 3rem !important;
        margin-bottom: 1rem !important;
        width: 390px !important;
    }

    .box {
        padding: 15px !important;
    }

    /*.containlogbg {
        width: 351.5px !important
    }*/

    .bgbox1245 {
        margin: 0 0;
        width: 100% !important;
    }

    .top-containlog {
        /*width: 341.5px !important;*/
        width: 100%;
    }

    .containcreacompte {
        height: 106px;
        width: 353px;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    }

    .w320 {
        width: 390px !important;
    }

    .top-containlog h2 {
        font-size: 1.4rem;
    }

    .containblanc {
         width: 100% !important; 
         padding: 16px unset !important; 
    }

    .md-form1 input[type=firstname], .md-form1 input[type=name], .md-form1 input[type=date], .md-form1 input[type=anniversary], .md-form1 input[type=datetime-local], .md-form1 input[type=email], .md-form1 input[type=number], .md-form1 input[type=password], .md-form1 input[type=search-md], .md-form input[type=search], .md-form1 input[type=tel], .md-form1 input[type=text], .md-form1 input[type=time], .md-form1 input[type=url], .md-form1 textarea.md-textarea {
        /*width: 236px !important;*/
        width: 15rem;
    }

    .btnBrowse, .btnBrowse:active, .btnBrowse:hover {
        background-color: #ff000000 !important;
        border: 0px solid red !important;
        font-size: 1rem;
        padding: 11px 0px 11px 4px;
    }

    .progress {
        zoom: 1.3;
    }
}