/* =========================================================
   FORMULAIRE UNIQUEMENT
   ========================================================= */

#ctl00_Main_TcktFront_InnerTicketPnl {
    margin: 0 !important;
    width: 100%;
}

/* Chaque bloc du formulaire */
#ctl00_Main_TcktFront_InnerTicketPnl .block {
    width: 100%;
}

/* =========================================================
   TITRES DE RUBRIQUES
   ========================================================= */

#ctl00_Main_TcktFront_InnerTicketPnl .TblTitreRubriqueBo {
    width: 100%;
    margin: 0 0 20px !important;
}

#ctl00_Main_TcktFront_InnerTicketPnl .TitreRubriqueBo h2 {
    margin: 0 0 20px !important;

    font-size: 48px !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;

    color: #000 !important;
    letter-spacing: normal !important;
}

/* =========================================================
   TABLES DES CHAMPS
   ========================================================= */

#ctl00_Main_TcktFront_InnerTicketPnl .TblTckt {
    width: 100% !important;
    border-collapse: collapse;
    table-layout: fixed;
}

/*
 TARGET place le label et le champ dans la même cellule.
 On transforme donc cette cellule en grille :
 170 px pour le label, le reste pour le champ.
*/
#ctl00_Main_TcktFront_InnerTicketPnl td.Item {
    display: grid !important;
    grid-template-columns: 170px minmax(0, 1fr);
    align-items: center;
    column-gap: 20px;

    width: 100% !important;
    padding: 5px 0 !important;

    box-sizing: border-box;
}

/* =========================================================
   LABELS
   ========================================================= */

#ctl00_Main_TcktFront_InnerTicketPnl td.Item > label {
    grid-column: 1;

    display: block !important;
    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;

    color: #171717 !important;
}

/* Astérisques obligatoires */
#ctl00_Main_TcktFront_InnerTicketPnl td.Item > label font {
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #c00000 !important;
}

/* =========================================================
   INPUTS ET LISTES
   ========================================================= */

#ctl00_Main_TcktFront_InnerTicketPnl td.Item > input.form-control,
#ctl00_Main_TcktFront_InnerTicketPnl td.Item > select,
#ctl00_Main_TcktFront_InnerTicketPnl td.Item > textarea {
    grid-column: 2;

    display: block;
    width: 100% !important;
    max-width: none !important;
    height: 46px !important;

    margin: 0 !important;
    padding: 8px 18px !important;

    box-sizing: border-box;

    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;

    color: #555 !important;
    background-color: #fff !important;

    border: 1px solid #d3d7dc !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#ctl00_Main_TcktFront_InnerTicketPnl td.Item > textarea {
    min-height: 120px;
    height: auto !important;
}

/* Le select TARGET possède un margin-left inline */
#ctl00_Main_TcktFront_InnerTicketPnl td.Item > select {
    margin-left: 0 !important;
}

/* Focus discret */
#ctl00_Main_TcktFront_InnerTicketPnl td.Item > input.form-control:focus,
#ctl00_Main_TcktFront_InnerTicketPnl td.Item > select:focus,
#ctl00_Main_TcktFront_InnerTicketPnl td.Item > textarea:focus {
    outline: none !important;
    border-color: #9ca3ab !important;
    box-shadow: none !important;
}

/* =========================================================
   TÉLÉPHONE
   ========================================================= */

#ctl00_Main_TcktFront_InnerTicketPnl td.ItemKNumerodetelephoneportable {
    grid-template-columns: 170px 300px minmax(0, 1fr);
}

#ctl00_Main_TcktFront_InnerTicketPnl
td.ItemKNumerodetelephoneportable > label {
    grid-column: 1;
}

#ctl00_Main_TcktFront_InnerTicketPnl
td.ItemKNumerodetelephoneportable > .intl-tel-input,
#ctl00_Main_TcktFront_InnerTicketPnl
td.ItemKNumerodetelephoneportable > .iti {
    grid-column: 2;

    width: 300px !important;
    max-width: 100%;
    margin: 0 !important;
}

#ctl00_Main_TcktFront_InnerTicketPnl
td.ItemKNumerodetelephoneportable input[type="tel"] {
    width: 100% !important;
    height: 46px !important;

    margin: 0 !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;

    border: 1px solid #d3d7dc !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* =========================================================
   ÉCRANS ÉTROITS
   ========================================================= */

@media (max-width: 767px) {
    #ctl00_Main_TcktFront_InnerTicketPnl .TitreRubriqueBo h2 {
        font-size: 34px !important;
    }

    #ctl00_Main_TcktFront_InnerTicketPnl td.Item,
    #ctl00_Main_TcktFront_InnerTicketPnl
    td.ItemKNumerodetelephoneportable {
        grid-template-columns: 1fr;
        row-gap: 6px;
    }

    #ctl00_Main_TcktFront_InnerTicketPnl td.Item > label,
    #ctl00_Main_TcktFront_InnerTicketPnl td.Item > input.form-control,
    #ctl00_Main_TcktFront_InnerTicketPnl td.Item > select,
    #ctl00_Main_TcktFront_InnerTicketPnl td.Item > textarea,
    #ctl00_Main_TcktFront_InnerTicketPnl
    td.ItemKNumerodetelephoneportable > .intl-tel-input,
    #ctl00_Main_TcktFront_InnerTicketPnl
    td.ItemKNumerodetelephoneportable > .iti {
        grid-column: 1;
        width: 100% !important;
    }
}