/*
 * Feuille personnalisée Key4Register corrigée et adaptée au mobile.
 * Remplacer le contenu du CSS d'origine par ce fichier.
 * Conserver son emplacement : l'import ABSTRACT-A4.css et les images
 * utilisent les mêmes chemins relatifs que dans votre feuille initiale.
 * Le correctif-mobile.css est déjà inclus : ne pas l'ajouter une seconde fois.
 */

@import url("ABSTRACT-A4.css");

/*Mise en page ABSTRACTS*/
.abstractnum {background-color: #FFFFFF !important; color: #024b7e !important; }
.abstracttitle {background-color: #FFFFFF !important; color: #024b7e !important; }
h5 {/* [TMA] commenté : font-size:1.2em; (ne visait rien en prod ; sur la TMA, vise le titre h5 des .card-header : déforme le composant TMA) */}



#ctl00_Main_Orders_ctl00_PayOnline, #ctl00_Main_Orders_ctl01_PayOnline, #ctl00_Main_Orders_ctl02_PayOnline, #ctl00_Main_Orders_ctl03_PayOnline, #ctl00_Main_Orders_ctl04_PayOnline, .ImgBtnExplorerSessionType0 { display:none; } /* BOUTON PAYER EN LIGNE MASQUE + BOUTON DEPOT DE PRESENTATION CLASSIQUE (ON NE LAISSE QUE EPOSTERS) */

/*#ctl00_Main_TblFees, #ctl00_Main_BtnDownloadProgram, .DownloadProgram, .schedulemenu { display:none; }*/
/*content.aspx?e=267&c=1506&header=0&menu=0*/
/*#ctl00_Main_TcktFront_cell_IT_14925 {padding-top:10px;width:100px}*/

.schedule .session .theme { display:inline !important; }
.schedule .session .intervention .speaker .firstname, .schedule .session .moderators .firstname { display:inline; }
.schedule .session .intervention .speaker .initiales, .schedule .session .moderators .initiales, .schedule .session .intervention .speaker .city, .schedule .session .moderators .city, .GrdVwAbsNum2 { display:none; }

div#ctl00_Main_Step1.step1 {padding-bottom:35px}
td#ctl00_Main_tdxls1.excelimport {padding-right:100px}
td#ctl00_Main_tdxls2.excelimport {line-height:300%}
td#ctl00_Main_tdcreg1.classicreg,td#ctl00_Main_tdcreg2.classicreg {padding-left:100px}
#ctl00_Main_Logout { float:right; }
.groupprofile { padding-bottom:50px; }
.schedulecontent { padding-top:30px; }

span#ctl00_Main_LblClosed {color:#F03;font: 14px "Montserrat",Helvetica,Arial,sans-serif;font-weight:bold;padding :30px}

body{
  font : 14px Tahoma,Arial, Helvetica, sans-serif;
  color: #3b4753 !important;
  line-height: 1.2;
  background-color:#0067B2;
  /*background-image:url(../key4register/images/client/359/images/raster.png);*/
  }
td.DrpDwnLbl { padding-right:0; }

table.ProfileChoice tr td {font : 14px Tahoma,Arial, Helvetica, sans-serif;}

#ctl00_Main_TcktFront_cell_IT_21311
{ width :10%}


#contenu { padding:0 10px 10px 10px;}
.tableRegistration { width:100%; max-width:1000px; }

#ctl00_mainTableRegistration
{
  width:100%;
  
}

#ctl00_Main_TcktFront_cell_IT_15187, #ctl00_Main_TcktFront_cell_IT_14761, #ctl00_Main_TcktFront_cell_IT_14767 { padding-right:4px; }


.SpeakerForm, #ctl00_Main_moreitemshrtopcontent, #ctl00_Main_moreitemshr {display:none !important;}
.smenutop {display:block; margin-top:1px; background-color:#707070;height:57px;}
#ctl00_registrationLogoTopCell,#ctl00_Main_TcktFront_BtnPrevious {display:none !important;}
.tdEnteteRegistrationTop {height: 156px;background-size:100% auto;background-position:center center;cursor:pointer; background-repeat:no-repeat;}

.menu_top ul li a {
font : 14px Tahoma,Arial, Helvetica, sans-serif;
padding: 20px 12px 19px 12px ;
background-image:url(../key4register/images/client/334/images/separateur.png);
background-repeat:no-repeat;
background-position:right 16px}

.menu_top ul li:hover a, .menu_top ul li.actif a {
    display: block;
  background-image:none;
  background-color:#f38e00;
  }
.menu_top ul li ul li {background-color: #4FC7E9;padding: 0;}

.menu_top ul li ul li a:hover, .menu_top ul li:hover ul li strong a {
    background: none repeat scroll 0% 0% #000;
}
.menu_top ul li ul li a span span {
    padding: 0px 0px 0px 10px;
   color: #FFF;
}
.CellMenu {height: auto;}
.CellMenu li ul{ box-shadow: 1px 1px 10px #000;
  -moz-box-shadow: 1px 1px 10px #000;
  -webkit-box-shadow:1px 1px 10px #000;}

td p {margin:2px;padding:0}
#ctl00_TopMenu a{color : #fff;}

#ctl00_TopMenu a:hover{color : #fff;}

div#RegistrationConfirmation {padding:20px;}

#ctl00_tdCorpsRegistration
{
  background-color:white;
  padding:0;
}
#contenu table.miseEnForme tr td {padding:0}
#contenu p {margin:3px 0 0px 0}
/*table #ctl00_Main_ProfileRdbtn {border: 1px solid #5059A8;width:100% }*/
/*label[for="ctl00_Main_ProfileRdbtn_4"],label[for="ctl00_Main_ProfileRdbtn_5"],label[for="ctl00_Main_ProfileRdbtn_0"] { display:none; }
#ctl00_Main_ProfileRdbtn_4,#ctl00_Main_ProfileRdbtn_5,#ctl00_Main_ProfileRdbtn_0 {display:none;}*/

td#ctl00_Main_TcktFront_cell_RU22066.TitreRubriqueBo {display:none}

.DrpDwn {padding:4px}

/****** STYLE **********/

strong {font-weight:bold;}
h1 {font:bold 18px Tahoma, Arial,Helvetica, sans-serif;background-color:#024b7e;color: #fff;padding:4px 0 0 4px}
h2 {font:bold 16px Tahoma,Arial,Helvetica, sans-serif;color:#226797;font-weight:bold;margin-top:20px}
h3 {color:#001987; font-size:1.1em;}
.TitreRubriqueBo {font-size:1.2em;font-weight:bold;color:#367CAF;border-bottom:1px solid #367CAF;padding:5px}
.TitreGroupe {/* [TMA] commenté : display:block;font-size:1.1em;font-weight:bold; */color:#000;/* [TMA] commenté : margin:15px 0 5px 0; (sur la TMA, .TitreGroupe est le div.card-header des cartes : marge de 15px dans la carte et police changée, déforme le composant TMA) */}
/*.TitreGroupe {font-size:1.1em;font-weight:bold;color:#EE86A1;margin:10px 0 10px 0}*/
.ItemBase100 {padding:3px}
/*td#ctl00_Main_TcktFront_cell_GR_9431 {display:none}
#ctl00_Home {display:none}*/
input, button, select, textarea {  color : #000;font-size:10pt;font-family: Tahoma,Arial}
/*alignement des 2 items pour les CGV*/
#ctl00_Main_TcktFront_cell_IT_13460.Item {padding-top:6px;padding-right:0px}
#ctl00_Main_TcktFront_cell_IT_13461.ItemBase85 {margin-left:-5px;padding-left:0}
/*cadre autour de la liste de choix des profils*/
#ctl00_Main_ProfileRdbtn td
{
  padding:10px;
  font-weight:normal;
}
/*#ctl00_Main_TcktFront_cell_RU14128,#ctl00_Main_TcktFront_row_GR_14128 {display:none}*/
a.CssButton {text-decoration:none;}

.lien {text-decoration:none}
.CssButton /* [TMA] commenté : , input#ctl00_Main_BtnSave (display, padding, bordure, rayon, ombre, graisse : déforme le composant TMA input.btn.btn-lg « Étape suivante » ; couleurs reprises dans le bloc [TMA] ajouts) */ {display:inline; padding:10px;background-color:#69A1D6;color:#fff;font-weight:bold;background-image:none;border-radius: 0;border:none; cursor: pointer; box-shadow: 1px 1px 2px #000;
  -moz-box-shadow: 1px 1px 2px #000;
  -webkit-box-shadow:1px 1px 2px #000;}
input.CssButton {background-color:#69A1D6;color:#fff;padding:0;font-weight:bold;background-image:none;border-radius: 0;border:none;box-shadow: 1px 1px 2px #000;
  -moz-box-shadow: 1px 1px 2px #000;
  -webkit-box-shadow:1px 1px 2px #000;}
a.CssButton,input.CssButton {color:#fff}
a.CssButton:hover,input.CssButton:hover /* [TMA] commenté : , input#ctl00_Main_BtnSave:hover (couleur reprise dans le bloc [TMA] ajouts, hors états focus, active et disabled qui gardent le thème TMA) */ {background-color:#FCC326;background-image:none;}

/*Dépôt des eposters*/
span.PosterAdvices{display:none}
/*tableau des distances*/

.CSSHotelList {
  margin:0px;padding:0px;
  width:100%;
  border:1px solid #fff;

}
.CSSHotelList table{
  border-collapse: collapse;
  border-spacing: 0;
  width:90%;
  height:100%;
  margin:0px;
  padding:0px;
}
.CSSHotelList tr td:first-child {
  text-align: center;
  font-size:12px;
  border-width:0px 0px 1px 0px;
}
.CSSHotelList tr:nth-child(odd){ background-color:#f4f4f4; }
.CSSHotelList tr:nth-child(even){ background-color:#fff; }
/*.CSSHotelList td{
  vertical-align:middle;
  border:0px solid #ccc;
  border-width:0px 0px 1px 0px;
  text-align:left;
  padding:4px;
  font-size:11px;
  font-family:Tahoma,Arial;
  font-weight:normal;
  color:#000000;
}*/
/*.CSSHotelList tr:last-child td{  border-width:0px 1px 0px 0px;}*/
.CSSHotelList tr td:last-child{  border-width:0px 0px 1px 0px;}
/*.CSSHotelList tr:last-child td:last-child{  border-width:0px 0px 0px 0px;}*/
.CSSHotelList tr:first-child td{
  background-color:#fff;
  border:0px solid #ccc;
  text-align:left;
  border-width:0px 0px 1px 0px;
  font-size:14px;
  font-family:Tahoma,Arial;
  font-weight:bold;
  color:#113377;
}

/*.CSSHotelList tr:first-child td:first-child{
  border-width:0px 0px 1px 0px;
}
.CSSHotelList tr:first-child td:last-child{
  border-width:0px 0px 1px 0px;
}*/
.CSSHotelList tr:hover td {
  background-color:#7799ee}

/*Paiement - Espace entre les conditions et le champs carte bancaire*/
#ctl00_Main_TcktFront_cell_IT_71889 {
padding-top: 25px;
}
/*Mise en forme programme*/
.sessionCategory::before {content: " • "; }
.sessionType::before {content: " • "; }
.sessionTheme::before {content: "  • "; }

/*Affichage programme*/
.rsHorizontalHeaderTable, .rsContentTable{width:100% !important;}
.RadScheduler th .RoomName { white-space:pre-wrap; }
.RadScheduler_Default .rsOtherMonth, .RadScheduler_Default .rsNonWorkHour, .RadScheduler_Default .rsSunCol, .RadScheduler_Default .rsSatCol { background: white; }

/*Suppression bouton previous step*/
#ctl00_Main_TcktFront_BtnPrevious {
    display: none !important;
}


/* ===== [TMA] ajouts ===== */
/* [TMA] style inline TMA @media (min-width:769px){#registration{display:grid;grid-template-columns:220px 1fr}} émis aussi sur la page de l'event, sans .form-nav : colonne vide de 220px + 32px qui décale le choix du profil de 252px ; retour au bloc comme en prod (le profil, qui a un .form-nav, n'est pas touché) */
#registration.registration:not(:has(> .form-nav)) { display: block; }
/* [TMA] bootstrap.min.css .container{padding-left/right:.75rem} (bootstrap absent en prod) : le bloc #registration est rétréci et décalé de 12px */
#ctl00_Main_UpdPnlProfile > article > .container, #ctl00_Main_UpdPnl > article > .container { padding-left: 0; padding-right: 0; }
/* [TMA] bootstrap.min.css .row{margin-left/right:-12px} et .row>*{padding-left/right:12px} sur le choix du profil et le bouton « Étape suivante » (page de l'event) : la prod n'a pas bootstrap (marge et padding 0) */
#ctl00_Main_TcktProfile .row { margin-left: 0; margin-right: 0; }
#ctl00_Main_TcktProfile .row > .col-12 { padding-left: 0; padding-right: 0; }
/* [TMA] la table radio #ctl00_Main_ProfileRdbtn de la prod devient un ul, qui reçoit Fo_Spec.css .tdCorpsRegistration ul{margin:.75em 0 .75em 32px} : liste décalée de 32px à droite et de 10.5px vers le bas (prod : table sans marge) */
#ctl00_Main_ProfileRdbtn { margin: 0; }
/* [TMA] bootstrap.min.css (reboot) hr{margin:1rem 0} : chaque séparateur du choix du profil prend 16px de marge haute et basse au lieu de 7px (marge du navigateur .5em en prod, sans bootstrap) */
#ctl00_Main_TcktProfile hr { margin: .5em 0; }
/* [TMA] bootstrap.min.css *{box-sizing:border-box} : le lien du menu (Fo_Spec.css .menu_top ul li a{height:18px} + padding 20px/19px de l'event) passe de 57px à 39px de haut ; la prod est en content-box */
.menu_top ul li a { box-sizing: content-box; }
/* [TMA] couleurs de .CssButton, input.CssButton et a.CssButton,input.CssButton (l. 137-143, restées en place) : les input.CssButton du formulaire et des fenêtres cachées sont des button.btn sur la TMA, dans ces 4 conteneurs (les 8 mêmes boutons qu'en prod) ; fond #69A1D6 et texte blanc, sans bordure visible en prod (border:none), donc bordure TMA de la couleur du fond au lieu du thème ; focus, active et disabled gardent le thème TMA */
#ctl00_Main_TcktFront_PnlConfirmVATAddress button.btn:not(:focus-visible):not(:active):not(:disabled), #ContainerSpanButtons button.btn:not(:focus-visible):not(:active):not(:disabled), #PnlRoomBody button.btn:not(:focus-visible):not(:active):not(:disabled), #confirmationsummary button.btn:not(:focus-visible):not(:active):not(:disabled) { color: #fff; background-color: #69A1D6; border-color: #69A1D6; }
/* [TMA] couleurs de input.CssButton:hover (l. 144) : fond #FCC326 au survol, bordure de la même couleur (pas de bordure visible en prod) */
#ctl00_Main_TcktFront_PnlConfirmVATAddress button.btn:hover:not(:focus-visible):not(:active):not(:disabled), #ContainerSpanButtons button.btn:hover:not(:focus-visible):not(:active):not(:disabled), #PnlRoomBody button.btn:hover:not(:focus-visible):not(:active):not(:disabled), #confirmationsummary button.btn:hover:not(:focus-visible):not(:active):not(:disabled) { background-color: #FCC326; border-color: #FCC326; }
/* [TMA] couleurs de input#ctl00_Main_BtnSave (« Étape suivante », page de l'event, sorti de la règle d'aspect l. 137) : fond #69A1D6 et texte blanc comme en prod, bordure de la couleur du fond (border:none en prod) au lieu du thème .btn-primary ; focus, active et disabled gardent le thème TMA */
#ctl00_Main_BtnSave:not(:focus-visible):not(:active):not(:disabled) { color: #fff; background-color: #69A1D6; border-color: #69A1D6; }
/* [TMA] couleurs de input#ctl00_Main_BtnSave:hover (l. 144, dont il est retiré) */
#ctl00_Main_BtnSave:hover:not(:focus-visible):not(:active):not(:disabled) { background-color: #FCC326; border-color: #FCC326; }
/* [TMA] couleur de .TitreGroupe (l. 118, color:#000) : sur la TMA, le titre de groupe est le h5 du .card-header.TitreGroupe, coloré par le thème (#0000FF) au lieu du noir de la prod */
.card-header.TitreGroupe h5 { color: #000; }
/* [TMA] listes déroulantes : Fo_Base.css .DrpDwn select{border:1px inset #C0C0C0} (0,1,1) passe devant bootstrap .form-select (0,1,0) et donne un cadre en relief aux selects TMA. Décision humaine : même style de bordure que les champs texte .form-control de l'event (1px solid). Style et épaisseur posés à tous les états, sinon Fo_Base remet inset au focus et à l'état invalide ; .plaintext-locked exclu (Ticket.Responsive.css) ; arrondi 6px TMA inchangé */
.DrpDwn select.form-select:not(.plaintext-locked) { border-style: solid; border-width: 1px; }
/* [TMA] listes déroulantes : mêmes couleurs côté par côté que les champs texte .form-control de l'event (#dee2e6 sur les 4 côtés, relevé sur le profil). Spécificité (0,5,1) > Fo_Base (0,1,1) ; :focus et .is-invalid exclus, ils gardent le thème TMA */
.DrpDwn select.form-select:not(.plaintext-locked):not(:focus):not(.is-invalid) { border-color: #dee2e6; }
/* [TMA] tableaux des tarifs (contenu de l'event, table border="1" ou "5") : bootstrap (reboot) td{border-width:0} retire les bordures des cellules ; rétablies comme en prod (relevé : 1px inset #363B29 sur chaque td). Page de l'event : tables enfants de #ctl00_Main_TcktProfile ; profil : tables dans les libellés .form-label des cartes. Les GridView des fenêtres TMA ne sont pas visées */
#ctl00_Main_TcktProfile > table[border]:not([border="0"]) > tbody > tr > td, .InnerTicketPnl .form-label > table[border]:not([border="0"]) > tbody > tr > td { border: 1px inset #363B29; }

/* ===== Adaptation responsive ===== */
/* La table extérieure ne doit pas adopter la largeur de son contenu. */
@media screen {
    .tableRegistration {
        width: 100%;
        max-width: 1000px;
        table-layout: fixed;
        margin-inline: auto;
    }

    #contenu,
    #contenuContainer,
    #contenuInner,
    #registration,
    #ctl00_Main_TcktProfile {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Garde les cartes et contrôles Bootstrap dans leur colonne. */
    #registration > *,
    #registration .card,
    #registration .card-body,
    #registration .row > * {
        min-width: 0;
    }

    #ctl00_registrationTopCell img,
    #contenu img {
        max-width: 100%;
        height: auto;
    }

    #ctl00_Main_TcktProfile,
    #registration .form-label,
    #registration .card-header {
        overflow-wrap: anywhere;
    }

    /* Tableaux éditoriaux uniquement : ne transforme pas les GridView. */
    #ctl00_Main_TcktProfile > table {
        width: 100% !important;
        max-width: 100%;
        table-layout: fixed;
        box-sizing: border-box;
    }

    #ctl00_Main_TcktProfile > table > tbody > tr > td,
    #ctl00_Main_TcktProfile > table > tbody > tr > th {
        width: auto !important;
        height: auto !important;
        white-space: normal;
        overflow-wrap: anywhere;
        vertical-align: middle;
    }

    /* Le tableau des prix conserve sa largeur habituelle sur ordinateur. */
    #ctl00_Main_TcktProfile > table[width="593"] {
        max-width: 593px;
    }

    #ctl00_Main_TcktProfile > table[width="593"] > tbody > tr > :first-child {
        width: 47% !important;
    }

    #ctl00_Main_TcktProfile :is(a, input, button):focus-visible,
    #ctl00_TopMenu a:focus-visible {
        outline: 3px solid #024b7e;
        outline-offset: 3px;
    }
}

@media screen and (max-width: 768px) {
    body {
        margin: 0;
        line-height: 1.5;
    }

    #contenu {
        padding: 0 12px 24px;
    }

    #registration.registration {
        display: block !important;
        width: 100%;
        line-height: 1.5;
    }

    /* Annule la hauteur de 156px pour une bannière qui suit sa taille. */
    #ctl00_registrationTopCell {
        height: auto;
    }

    #ctl00_registrationTopCell .tdEnteteRegistrationTopInner img {
        width: 100% !important;
        max-width: 600px;
        height: auto;
    }

    /* Navigation visible et utilisable au toucher, sans JavaScript ajouté. */
    #ctl00_icon_menu_top {
        display: none !important;
    }

    #ctl00_TopMenu .menu_top,
    #ctl00_TopMenu .smenutop {
        height: auto;
    }

    #ctl00_TopMenu .smenutop {
        display: block;
    }

    #ctl00_menu_top {
        display: flex !important;
        flex-wrap: wrap;
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #ctl00_menu_top > li {
        float: none;
        flex: 1 1 12rem;
        min-width: 0;
    }

    #ctl00_TopMenu .menu_top ul li a {
        display: block;
        box-sizing: border-box;
        min-height: 44px;
        height: auto;
        padding: 12px 16px;
        background-image: none;
        line-height: 1.4;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Les sous-menus éventuels restent accessibles sans survol. */
    #ctl00_TopMenu .menu_top ul li ul,
    #ctl00_TopMenu .menu_top ul li:hover ul li ul {
        display: block;
        position: static;
        width: auto;
        margin: 0;
        padding: 0 0 0 12px;
        box-shadow: none;
    }

    /* Le label entier reste cliquable, y compris lorsqu'il revient à la ligne. */
    #ctl00_Main_pnlProfileRdbtn .form-check {
        padding-left: 0;
    }

    ul#ctl00_Main_ProfileRdbtn {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    ul#ctl00_Main_ProfileRdbtn > li {
        display: grid;
        grid-template-columns: 24px minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        padding: 4px 0;
    }

    #ctl00_Main_ProfileRdbtn input[type="radio"] {
        width: 22px;
        height: 22px;
        margin: 0;
        accent-color: #024b7e;
    }

    #ctl00_Main_ProfileRdbtn label {
        display: flex;
        align-items: center;
        min-width: 0;
        min-height: 44px;
        padding-block: 6px;
        font-size: 16px;
        line-height: 1.4;
        overflow-wrap: anywhere;
        cursor: pointer;
    }

    /* Exclut radios, cases, champs masqués et champs verrouillés du ticket. */
    #registration input:is([type="text"], [type="email"], [type="tel"],
                           [type="password"], [type="number"], [type="search"],
                           [type="url"], [type="date"], :not([type])):not(.plaintext-locked),
    #registration select:not(.plaintext-locked),
    #registration textarea:not(.plaintext-locked) {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        min-height: 44px;
        height: auto;
        font-size: 16px;
    }

    #registration textarea {
        min-height: 120px;
        resize: vertical;
    }

    #registration .form-label {
        font-size: 16px;
        line-height: 1.4;
    }

    #ctl00_Main_BtnSave,
    #registration .CssButton,
    #registration .btn {
        box-sizing: border-box;
        max-width: 100%;
        min-height: 44px;
        padding: 12px 16px;
        font-size: 16px;
        line-height: 1.4;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    #ctl00_Main_BtnSave {
        width: 100%;
        height: auto;
    }

    /* Retire les espacements de 100px sur les anciennes pages de groupe. */
    td#ctl00_Main_tdxls1.excelimport {
        padding-right: 12px;
    }

    td#ctl00_Main_tdcreg1.classicreg,
    td#ctl00_Main_tdcreg2.classicreg {
        padding-left: 12px;
    }

    #RegistrationConfirmation {
        padding: 12px;
    }
}

@media screen and (max-width: 600px) {
    /* Défilement limité au tableau des prix, sans comprimer les dates.
       Le tbody forme la table intérieure : aucun conteneur HTML à ajouter. */
    #ctl00_Main_TcktProfile > table[width="593"] {
        display: block;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
        scrollbar-color: #69a1d6 #eef2f6;
    }

    #ctl00_Main_TcktProfile > table[width="593"] > tbody {
        display: table;
        width: 100%;
        min-width: 480px;
        table-layout: fixed;
    }

    #ctl00_Main_TcktProfile > table > tbody > tr > td,
    #ctl00_Main_TcktProfile > table > tbody > tr > th {
        padding: 8px 6px;
    }
}