:root { --bg : hsl(0, 0%, 100%); --rev-white : hsl(0, 0%, 100%); --rev-black : hsl(0, 0%, 0%); --gr-bg : hsl(204, 45%, 98%); --gr-0 : hsl(211deg 15% 95%); --gr-1 : hsl(211deg 15% 80%); --gr-2 : hsl(211deg 15% 70%); --gr-3 : hsl(211deg 15% 60%); --gr-4 : hsl(211deg 15% 40%); --male : hsl(202, 69%, 44%); --femelle : hsl(332, 69%, 44%); --primary : hsl(185deg 95% 35%); --color-1 : var(--primary); --color-2 : #027680 ; --valid : hsl(108, 83%, 36%); --alert : hsl(0, 75%, 43%); --base : 1rem; --xs : calc(var(--base) * 0.25); --sm : calc(var(--base) * 0.5); --md : calc(var(--base) * 1); --lg : calc(var(--base) * 1.5); --xl : calc(var(--base) * 3); --bg-valid: hsla(107,93%,33%,1.00); --bg-valid-h: hsla(107,93%,25%,1.00); --crv-1 : rgba(0,200,218,1); --crv-2 : #caeff4; --crv-3 : hsl(195, 46%, 95%); --radius : .25rem; --fida-primay-1 : hsl(206, 54%, 24%); --fida-primay-2 : #f25c05; --puppy-small : #137c75; --puppy-medium : #c91835; --puppy-large : #236c99; --puppy-allsize : #f28a0d; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } body { font-size: 15px; background : #fff; margin : 0 0; padding : 0 0; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 400 } /*.w, .admin_entete, #contenu { margin: auto } */ a { text-decoration: none; color: #000 } .header-menu { display: flex; justify-content: space-between; background-color: #027680 ; gap : 1vw; justify-content: center; align-items: center; } .header-menu a { text-decoration: none; } .header-menu .header-menu-info { padding: 25px; display: flex; flex-direction: column; flex: 1; position: relative; } .logo-atara { padding: 0; display: inline-block; } .logo-atara svg { fill: var(--rev-white); height: 35px;} .header-menu .header-menu-info .header-slogo { color : #FFF; text-transform: uppercase; } .header-menu .header-menu-info .header-slogo.dev {background: rgb(173,0,0); border-radius: .25rem; padding: 0 .5rem; position: absolute; left: 57px; top: 10px; font-size: 9px; width: 65px; text-align: center;} .mini{font-size: 0.9em; font-weight: normal; color: var(--primary);} .bouton-deco { background-color: #CC0000; color: #FFF; padding: 0.5rem 0; border-radius: var(--radius); width: auto; gap: 0.5rem; text-align: center; display: flex; align-items: center; justify-content: center; } .compte-valide, .compte-attente, .compte-refus { display: flex; gap: 0.25rem; color: #fff!important; width: fit-content; align-items: center; font-size: 12px; cursor: help; } .compte-attente svg, .compte-refus svg { fill: #FFF; width: 24px; height: 24px; } .compte-valide svg { fill:rgb(159 255 136); width: 28px; height: 28px } .header-menu .menu { display: flex;} .header-menu .menu .affixe { font-size: 16px; color: #FFF; display: flex; justify-content: center; flex-direction: column; margin-right: 1rem; text-align: right; } .header-menu .menu .affixe .flex { gap : .5rem; align-items: center; justify-content: end;} .header-menu .menu .entete-email { font-size: 12px; opacity: .75; letter-spacing: .75px; margin-top: 1px; } .header-menu .menu .menu-bouton { display: flex; gap : .25vw; justify-content: center } .header-menu .menu .menu-bouton .bouton { font-size: 1em; transition-duration: .5s; position: relative; display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 2px; padding: .25rem .75rem; text-align: center; border-radius: 3px; color: #FFF; min-width: 50px; } .header-menu .menu .menu-bouton .bouton:hover { background-color: rgba(255,255,255, .25); } .header-menu .menu .menu-bouton .bouton .msgok, .header-menu .bouton .menu-bouton .msgnok { border-radius: .2rem; font-size: 11px; width: 24px; height: 17px; justify-content: center; display: flex; flex-direction: column; position: absolute; top: -7px; font-weight: bold; left: calc(50% - 12px); } .header-menu .menu .bouton .msgok { color: #FFF; background-color: #3cc11c; } .header-menu .menu .bouton .msgnok { color: #FFF; background-color: #4fc2e4; } .header-menu .menu .bouton svg, .header-menu .menu .bouton-avoir svg { fill: #FFF; width: 30px; height: 30px; flex-shrink: 0;} .header-menu .menu .bouton span { font-size: 10px; text-transform: uppercase;} .bouton.afaire, .bouton.refus { background-color: #8d2424; border: 1px solid #db9292; } .bouton.attente { background-color: #009ca9; border: 1px solid #01d2e3; } .header-menu a.bouton-essayer { /*background: #ffa729 url(/media/v4/10-texture.jpg) 100% 0;*/ background-color:#49baed; border: 1px solid #0071a3; border-radius: 3px; position: relative; display: flex; justify-content: space-between; text-align: center; margin-left: 1.75rem; padding: .5rem;} .bouton-essayer .dog { width: 54px; position: absolute; left: -35px; bottom: -1px; } .bouton-essayer .inf { display: flex; align-items: center; margin-left: .75rem;} .bouton-essayer .inf div { font-size: 12px; text-align: right; line-height: 11px; border-right: 1px dashed hsla(0, 0%, 100%, 0.5); padding-right: .5rem; margin-right: .5rem; width: 120px;} .bouton-essayer-titre { font-size: 11px; font-weight: bold; text-transform: uppercase; color : #fff;text-shadow: 0px 1px rgb(0 0 0 / 63%);} .bouton-essayer-count { display: flex; justify-content: center; gap : .25rem } .bouton-essayer-count svg { width: 20px; height: 20px; fill: #FFF;} .bouton-essayer-10 { background-color: #FFF; padding: 0.5rem; padding: 0 2rem; font-size: 10px; font-weight: bold; text-transform: uppercase; border-radius: 0 0 0.4rem 0.4rem; } .bouton-essayer-grp { display: flex; align-items: center; flex-direction: column; justify-content: center; } .bouton-avoir .int { text-transform: uppercase; font-size: 12px } .bouton-avoir .valeur { font-size: 1.25rem; color: #d4fcff; text-shadow: 0 1px BLACK; font-weight: bold; } .bouton-avoir .crown { position: absolute; top: -17px;} .bouton-avoir .etat { position: absolute; bottom: -14px; border: 2px solid #ffba00; border-radius: 3px; background-color: #027680; width: 60px; height: 14px; display: flex; gap: .25rem; padding: .25rem; } .bouton-avoir .etat div { background-color: rgb(255 255 255 / 16%); flex : 1; border-radius: 2px; } .bouton-avoir .etat div.valid { background-color: #ffba00; box-shadow: 0 0 5px 1px #ff7500 inset; border: 1px solid #ffb551; } @media (max-width: 1000px) { .header-menu { flex-wrap: wrap } .header-menu .header-menu-info { padding: 10px;} .header-menu .menu.menu-change { border-top :1px solid rgb(0 100 108); width: 100%; justify-content: center; background-color: rgb(1 109 118); } .header-menu .menu .menu-bouton { width: -webkit-fill-available; width: -moz-available; padding : .5rem; gap: .75vw } .header-menu .menu .bouton span { display: block;} .header-menu .menu .bouton { padding: 5px 1vw;} .menu_general { font-size: 14px; } .menu_general a { padding: .5rem .75vw; } } .annonce-validee, .parcours-digital { display: inline-flex; gap: 0.25rem; font-size: .9rem; color: #FFF; border-radius: 2rem; width: fit-content; padding: 4px 10px 4px 4px; align-items: center; font-weight: 600; background-color: #2890CF; } .annonce-validee svg, .parcours-digital svg { fill: #FFF; height: 16px; } .logo-parcours-digital { --color-parcours : #2890CF; color: var(--color-parcours); display: flex; align-items: center; gap: .5rem; font-size: 1.5rem; font-weight: bold; } .logo-parcours-digital svg { fill: #2890CF; height: 20px; width: 20px; padding: .25rem; border-radius: 50%; border : 2px solid var(--color-parcours) } /*ACCUEIL */ .accueil-cadre { font-size: 1.05em; border :4px solid; border-radius: .5em; max-width:100%; padding: 1.75vw; margin-bottom: 2.5em; position: relative;line-height: 1.5rem; } .accueil-cadre-violet { --couleur-gen : #7c04b3; --couleur-gen-2 : #e9dbee; --couleur-gen-3 : #f7f5f7; border-color : var(--couleur-gen-2); } .accueil-cadre-bleu { --couleur-gen : #048ab3; --couleur-gen-2 : #94c7d6; --couleur-gen-3 : #effafd; border-color : var(--couleur-gen-2); } .accueil-cadre-vert { --couleur-gen : #0ab304; --couleur-gen-2 : #abdcaa; --couleur-gen-3 : #f4f9f4; border-color : var(--couleur-gen-2); } .accueil-cadre-rose { --couleur-gen : #eb00a4; --couleur-gen-2 : #ffabff; --couleur-gen-3 : #fdeff8; border-color : var(--couleur-gen-2); } .accueil-cadre .h1-titre { font-size: 1.2em; font-weight: bold; margin-bottom: 1.75vw; text-align: center; background: var(--couleur-gen3); border-radius: .25rem; padding: 1rem 0; } .accueil-cadre .h1-titre-plus { font-size: 1.5em; font-weight: bold; color: var(--couleur-gen); } .accueil-cadre .h2-titre { font-size: 1.1em; font-weight: bold; margin-bottom: var(--lg); color: var(--couleur-gen); } .accueil-cadre a { text-decoration:underline; color : var(--primary)} .accueil-cadre ul { list-style: circle; background-color: var(--couleur-gen-3); border-radius: 0.5rem; padding: 1.5rem;} .accueil-cadre ul li { display: flex; gap: 1rem; margin-bottom: var(--sm); padding: var(--xs); border-radius: var(--xs); align-items: center; } .accueil-cadre ul li svg { fill : var(--couleur-gen); width: 20px; height: 20px; flex-shrink: 0;} .accueil-webinar-herald { width: 25%;max-width: 200px; height: 200px; background: url(/media/v4/webinar-herald-1.png) no-repeat 100% 100%; background-size : contain; position: absolute; bottom: 0; right: 0; z-index: 2; } .accueil-cadre .accueil-cadre-icone {display : flex; align-items: center; justify-content: center; width: 66px; height : 36px; margin:auto; position: absolute; top:-18px; margin-left : calc(50% - 60px); background-color : #FFF;} .accueil-cadre .accueil-cadre-icone svg { height: 36px; width: 36px; fill : var(--couleur-gen); } .accueil-cadre .accueil-profil { display: flex; gap : 1em; border: 2px dashed var(--couleur-gen-2); width: fit-content; border-radius: 8rem; align-items: center; margin: 1.75vw auto; padding: var(--sm) var(--md) var(--sm) var(--sm) ; text-decoration: none; color: #000; transition: .2s ease-in-out; } .accueil-cadre .accueil-profil:hover {border-color : var(--couleur-gen);} .accueil-cadre .accueil-profil .accueil-profil-img { height: 80px; width: 80px; border-radius: 50%; overflow: hidden; } .accueil-cadre .accueil-profil .nom { font-weight: bold; font-size: 1.1em; color : var(--couleur-gen); } .accueil-cadre .accueil-profil .s1 { font-size: .8em; letter-spacing: .5px; text-transform: uppercase; color: var(--couleur-gen);} .accueil-cadre .accueil-profil .s2 { color: var(--gr-4); font-size: .9em;} .accueil-cadre .accueil-sign { font-weight: bold; font-size: 1.1rem;} .accueil-cadre .btn { display: flex; width: fit-content; align-self: center; gap: .5rem; background-color: var(--valid); padding: .75em 1.5em .75em 2.5em ; border-radius: 0.25em; margin: auto; color: #FFF; text-align: center; font-size: 1.1em; color: #FFF !important; text-decoration: none !important } .accueil-cadre .btn:hover { background-color: var(--bg-valid-h); } .accueil-cadre .btn svg { fill: #FFF; height: 30px;} .btn-attestation { display: grid; grid-gap: 1rem; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); } .btn-attestation a { display: flex; flex-direction: column; border: 1px solid #CCC; border-radius: .5rem; text-align: center; padding: .5rem 1rem; background: rgb(255,252,252); background: -webkit-linear-gradient(rgba(255,252,252,1) 60%, rgba(233,233,233,1) 100%); background: -o-linear-gradient(rgba(255,252,252,1) 60%, rgba(233,233,233,1) 100%); background: linear-gradient(rgba(255,252,252,1) 60%, rgba(233,233,233,1) 100%); } .btn-attestation a:hover { border: 1px solid #000; } .accueil-cadre-droit { padding: 1vw} .accueil-cadre.accueil-cadre-droit ul li { margin-bottom: 0; } .accueil-cadre.accueil-cadre-droit .h2-titre { margin-bottom: var(--md); } .menu-validation { font-size: .9em; transition-duration: .5s; position: relative; display: flex; justify-content: center; flex-direction: column; padding: 0 1rem; text-align: center; background-color: rgb(255, 255, 255); border-radius: 3px; } .menu-validation span { display: flex; justify-content: center; align-items: center; position: absolute; top: -18px; left: calc(50% - 14px); fill : #FFF; border-radius: 50%; font-size: 0.9em; width: 28px; height: 28px; } .menu-validation span svg { height: 80%; width : 80%; } .menu-validation > div { z-index: 10; min-width: 100px; line-height: 14px; } .menu-validation > div .refus { color : #960000 } .anim { animation: checkbb 5s ease infinite; } @keyframes checkbb { 0% { transform: rotate(35deg); } 2.5% { transform: rotate(-30deg); } 5% { transform: rotate(25deg); } 7.5% { transform: rotate(-20deg); } 10% { transform: rotate(15deg); } 12.5% { transform: rotate(-10deg); } 15% { transform: rotate(5deg); } 20% { transform: rotate(0); } 100% { transform: rotate(0); } } .clign { animation: clign 1s ease infinite; } @keyframes clign { 0% { opacity: 1; } 50% { opacity: .5; } 100% { opacity: 1; } } .menu_general { --bg-menu-general-a : #e1f1f3 ; --bg-menu-general-a-h : #65b8c2 ; position: relative; display: flex; padding: 1rem; gap: .5vw; box-shadow: 0px 3px 9px hsl(0deg 0% 0% / 5%); z-index: 1; } .menu_general > a, #menu_general_races, #menu_general_races { border : 1px solid var(--bg-menu-general-a); border-radius: 0.25rem; } .menu_general a { font-size: 1em; position: relative; padding: .75rem 1vw; text-align: center; transition-duration: .2s; min-width: 50px; } .menu-reduc { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .menu_general > a:hover, #menu_general_races:hover { border: 1px solid var(--bg-menu-general-a-h); } /*.menu_general a.achoixrace:hover { background-color: var(--primary); color: #FFF }*/ .menu_general a span { display: none;} .menu_general a:hover.menu-select-purina {background-color: #d7bb77; color: #000; border-color: #af9351; } .menu_general #menu_general_races { position:relative; display: flex;} .menu_general #menu_general_races a { border-right: 0; border-radius: var(--radius) 0 0 var(--radius);} .menu-select { background-color: var(--primary); border-color: var(--primary) !important; color: #fff; border-radius: var(--radius); flex-shrink: 0;} .menu-select a { color: #fff; } .menu-select-purina { background-color: #000; color: #d7bb77; border-radius: 0.5rem 0.5rem 0 0;} #menu_general_races-liste { border-radius: 0 var(--radius) var(--radius) var(--radius); left : -1px; top : 40px; position: absolute; background-color: var(--primary); z-index: 100 } #menu_general_races-liste .race-a-choisir { margin: 10px; max-width: 350px; display: flex; justify-content: space-around; flex-wrap: wrap; color: rgba(255,255,255,1.00); } #menu_general_races-liste .race-a-choisir a { margin-bottom: 1px; font-size: 1rem; font-weight: normal; color: #000; border-radius: 0; padding: .5rem 1.5rem; border: 0px; display: block; min-width: 280px; background-color: #FFF; text-decoration: none; } #menu_general_races-liste .race-a-choisir a:hover { background-color: rgba(255,255,255,.3); color: #FFF; border: 0px; border-radius: 0; } .race-a-choisir-fleche { display: flex; cursor: pointer; border-left: 1px solid var(--bg-menu-general-a); border-radius: 0 var(--radius) var(--radius) 0; padding: 0 .5rem;} .race-a-choisir-fleche svg { fill: var(--rev-black); width: 30px; opacity: .5;} .menu-select .race-a-choisir-fleche { border-left: 1px solid hsla(0, 0%, 100%, 0.25) } .menu-select .race-a-choisir-fleche svg { fill: var(--rev-white); } .menu_general a .menu-nouveaute { display: block; font-size: 9px; width: 66px; left: calc(50% - 33px); text-align: center; position: absolute; top: 2px; background-color: #ff9972; color: #FFF; border-radius: 0.25em; padding: 0.2rem 0; } .achoixrace:hover { border-radius: var(--radius) var(--radius) 0 0 } .race-a-choisir-fleche-trans { display: block; left: calc(50% - 51px); position: absolute; width: 102px; height: 17px; bottom: -17px } .box-renouv-image-etalon { position: relative; height: 20px; width: 20px; float: left; overflow: hidden; margin-right: 5px; } .box-renouv-image-etalon img { height: 20px; } .etat-red, .etat-orange, .etat-vert { padding: 2px 5px; border-radius: .25rem; font-size: .8rem; } .etat-red { color: #FFF; background-color: #CC0000 } .etat-orange { color: #FFF; background-color: #f18800 } .etat-vert { color: #FFF; background-color: #28a206 } .attestation_creabox_info { display: flex; margin-bottom: 10px; background-color: #F4F4F4; } .attestation_creabox_info .inf { padding: 10px; margin-right: 30px; } .attestation_creabox_info .inf p { margin-bottom: 5px} #conteneur { background-color: #d6eaed} #conteneur-purina { background-color: #ececec } #conteneur-purina, #conteneur { margin: auto; padding: 0; border: 0; } #contenu { max-width: 2200px; display: flex; gap : .75vw ; padding:.75vw ; } #page_box { border: 0; width: 100%; background-color: #FFF; } #page_box_full { border: 0; width: auto } #page_box, #page_box_full { padding: 1.5vw; border-radius: var(--radius); flex : 1; } #footer { text-align: center; color: var(--primary); padding: 20px } #menu_gauche_content { border: 0px; background-color: transparent; margin: 0 0; width: 15%; min-width: 240px; max-width: 400px; } .menu_gauche_box { margin-bottom: 10px; background-color: rgba(255,255,255,1); padding: .75rem 1rem; border-radius: var(--radius); } .menu_gauche_box .rub { font-weight: bold; text-transform: lowercase; letter-spacing: -.5px; margin: .5rem 0 .25rem 0; display: flex; gap: .5rem;} .menu_gauche_box .rub:first-child {margin-top: 0;} .menu_gauche_box .rub:first-letter { text-transform: uppercase; } .menu_gauche_box .rub, .menu_gauche_box .srub, .menu_gauche_box .srubeleveur { display: block; color: #484848} .menu_gauche_box .rub .rubnew { display: flex; justify-content: space-between; text-transform: none; align-items: center; } .menu_gauche_box .rub .rubnew span { position: relative; display: flex; gap: 2px; padding: .25rem .25rem .25rem 0; background-color: #038b37; color: #FFF; font-size: 9px; letter-spacing: normal; font-weight: normal; text-transform: uppercase; align-items: center; margin-right: -20px; flex-direction: column; } .menu_gauche_box .rub .rubnew span:after { content: ""; display: block; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 11px solid transparent; border-right: 8px solid #038b37; position: absolute; left: -8px; top: 0; } .menu_gauche_box .srub { color: var(--primary); transition-duration: .2s ease-in-out; padding: .2rem } .menu_gauche_box .srub:hover, .menu_gauche_box a.rub:hover { background-color: var(--primary); color: #FFF; border-radius: var(--radius); } .menu_gauche_box .srubeleveur { color: #ffffff; margin-bottom: 5px; text-transform: lowercase; word-wrap: break-word; display: block; padding: .25rem; background-color: var(--primary); font-size: .9em; border-radius: 4px 4px; } .menu_gauche_box .rub-open { cursor: pointer; color: var(--primary); transition-duration: .2s } .menu_gauche_box .srubeleveur:first-letter { text-transform: uppercase } .menu_gauche_box .srubeleveur:hover { background-color: #108693; } .menu-race-delais { font-size: 0.65em; color: #8a8a8a; text-align: center } .vipactif, .vipnoteactif { padding: 2px 5px; display: inline-block; color: #FFF; font-weight: normal; font-size: .8em; text-transform: uppercase; margin-top: .25rem; border-radius: var(--radius); } .vipactif { background-color: var(--valid) } .vipnoteactif { background-color: var(--alert) } #menu_gauche_content .menu_etat_site { padding: 5px 10px; margin-bottom: 10px } #menu_gauche_content .inactif, #menu_gauche_content .enattente { border-radius: var(--radius); } #menu_gauche_content .inactif { border: 4px solid #CC0000; background-color: #FFF } #menu_gauche_content .inactif p { margin-bottom: 5px } #menu_gauche_content .inactif p:first-child { text-align: center; font-size: 1.6em; letter-spacing: -1.5px; text-transform: uppercase; font-weight: bold; color: #CC0000 } #menu_gauche_content .enattente { background-color: #ff8c05; text-align: center; } #menu_gauche_content .enattente .bton { padding: .25rem .75rem;} #menu_gauche_content .enattente p { color: #FFF; } #menu_gauche_content .enattente p:first-child { font-size: 1.4em; text-transform: uppercase; font-weight: bold;} #menu_gauche_content .enattente div { font-size:12px; text-transform: uppercase; margin: .25rem 0;} #menu_gauche_content p:last-child { font-size: .9em } #menu_gauche_content .actif { background-color: #3cc11c; text-align: center; color: #FFF } #menu_gauche_content .actif p:first-child { line-height: 25px; text-align: center; font-size: 1.6em; letter-spacing: -1px; text-transform: uppercase; font-weight: bold } .m-box { background-color: transparent; } .m-box ul li { background-color: #FFF } .m-box-nbpoints { border: 0 } .m-box ul { padding: 5px; margin: 0; background-color: #FFF; } .m-box ul li { list-style: none; margin-bottom: 2px; } #nav-m-box { list-style: none; margin: 2px; padding: 0; } .m-box { margin-bottom: 10px; padding-bottom: 1px; } .m-box-support, .m-box-facebook, .m-box-parcours, .m-box-tech, .m-box-admin, .m-box-points, .m-box-dogchow, .m-box-lignee, .m-box-produits {cursor: pointer; display: block; font-family: "verdana", sans-serif; padding: 6px 0 6px 10px; color: #FFF; border-radius: var(--radius); } .m-box-support:first-letter, .m-box-facebook:first-letter, .m-box-parcours:first-letter, .m-box-tech:first-letter, .m-box-admin:first-letter, .m-box-points:first-letter, .m-box-dogchow:first-letter, .m-box-lignee:first-letter, .m-box-produits:first-letter { text-transform: uppercase } .m-box-parcours { background-color: #000; } .m-box-tech { background-color: #127a71; } .m-box-produits { background-color: #f18800; } .m-box-dogchow { background-color: #20bbad; } .pro { text-decoration: none; } .m-box-support { background-color: #3cc11c; position: relative; background : url(https://eleveurs.chiens-de-france.com/media/v4/fond-i-support.png) no-repeat top left; } .m-box-support .i-support { position: absolute; right: 0; top: -7px; background : url(https://eleveurs.chiens-de-france.com/media/v4/i-support.png) no-repeat top center; width: 43px; height: 58px } .m-box-support .l1 { font-size: 14px; color: #003f3a; text-transform: uppercase; text-shadow: none; display: block; text-decoration: none; } .m-box-support .l2 { font-size: 18px; display: block; } .m-box-lignee { background-color: #e2071d; } .m-box-facebook { background-color: #3b5998; text-decoration: none } .m-box-admin { background-color: #965908; } .m-box-points { background-color: #72337f; text-decoration: none !important; } .m-box-nbpoints { background-color: #fff; text-align: center; color: #cc0000; font-family: "Arial Black", sans-serif; letter-spacing: -0.3px; padding: 8px 0; margin: 2px } .m-box ul { padding: 2px; background-color: #FFF; margin: 0; border-radius: 0 0 var(--radius) var(--radius); } .m-box ul li { list-style: none; margin: 2px; } .m-box ul li a { display: block; padding: 5px; font-size: .9em; background-color: #F4F4F4; text-decoration: none; transition : 0.15s linear; } .m-box ul li a:hover { background-color: #E5E5E5; } .accueil-box-info { display: flex; gap : 1.5vw; justify-content: space-between; } /*.accueil-box-gauche {}*/ .accueil-box-droite { width: 35%; flex-shrink: 0; } .purina_alaune { padding: 10px; display: flex; background-color: #F4F4F4; } .purina_alaune a { transform: scale(.9); border: 5px solid #fff; display: block; box-shadow: 0 0 1px rgba(0,0,0,.1); transition-duration: .5s; } .purina_alaune a:hover { transform: scale(1); box-shadow: 0 0 5px rgba(0,0,0,.5); } .purina_alaune a img { max-height: 100px; } .purina_alaune_cont { border: 1px solid #F4F4F4; padding: 10px; margin-bottom: 20px } .purina-signature-info { background-color: #F4F4F4; padding: 20px; margin-bottom: 30px; border: 1px solid #efeeee; } .tab2bord { margin-bottom: 10px; } .tab2bord-titre { font-weight: bold; margin-bottom: 10px; text-transform: uppercase } .button-attestation-purina { max-width: auto; height: 100%; min-width: auto;} #webinar { display: flex; flex-wrap: wrap; gap : 1rem; margin-bottom: 2rem; border: 4px solid var(--primary); padding: 1rem; border-radius: 1rem; font-weight: bold; text-align: center; padding: .75rem; color: var(--primary); font-weight: bold; } #webinar-titre { font-size: 2rem; width: 100%; text-align: center; margin-bottom: .5rem; } #webinar-video { width: 68%; } #webinar-chat { width: 30%; } #webinar-video, #webinar-chat { height: 720px; } .webinar-online { color: #FFF; font-weight: bold; align-items: center; min-width: 270px; display: flex; gap: .5rem; position: relative; border : 2px solid #fff; border-radius: 6px; padding: 1rem; margin-right: 2rem;} .webinar-online span:last-child { position: absolute; display: block; background : url('/media/v4/webinar-herald-tn.png') no-repeat 0% 0%; background-size: cover; width: 90px; height: 77px; bottom: 0; right: 0; } .webinar-online span:first-child { display: block; background-color: #CC0000; width: 20px; height: 20px; border-radius:50%; -webkit-animation: 1s linear infinite condemed_blink_effect; animation: 1s linear infinite condemed_blink_effect; } @-webkit-keyframes condemed_blink_effect { 0% { visibility: hidden; } 50% { visibility: hidden; } 100% { visibility: visible; } } @keyframes condemed_blink_effect { 0% { visibility: hidden; } 50% { visibility: hidden; } 100% { visibility: visible; } } .btn-profil { border: 1px solid var(--primary); background-color: #04909c; color : #FFF; padding: .25rem .5rem; border-radius: .25rem; font-size: .9em; display: inline-block; } .list-sitevip {border-radius: .25rem; overflow: hidden; margin-bottom: 20px } .list-sitevip-titre { background-color: var(--primary); color: #FFF; padding: 5px } .list-sitevip table { width: 100%; background-color: #F4F4F4; margin-top: 2px } .list-sitevip table td { padding: 5px } .list-sitevip table td.action { text-align: right;} .tab-important { background-color: #f5c8c8 !important; color: #000 !important;} .tab-info { margin-bottom: 20px; border-collapse: 2px; } .tab-info tr td { padding: 8px 10px; } .tab-info tr td:first-child { text-align: center; background-color: #daf1f4; } .tab-info tr td:last-child { border: 1px solid #F4F4F4 } .tab-purina { margin: auto; border-collapse: collapse; width: 100%; margin-bottom: 20px; outline: 1px solid #000; border: 2px solid; overflow: hidden;border-radius: 3px;} .tab-purina th { padding: 20px 0; font-weight: bold; font-size: 1em; border: 1px solid #fff2d1; background-color: #d7bb77; color: #000 } .tab-purina td { padding: 15px ; background-color: #fff; border: 1px solid #CCC; vertical-align: top;} .tab-purina td.va { vertical-align: middle;} .tab-purina td a { color: var(--color-1); text-decoration: underline;} .tab-purina td input[type=text] {text-align: center;} .tab-purina tr td .g { color: #383838; font-size: 1.05rem; } .tab-purina tr td .min { font-size: .8rem; line-height: 1rem;} .tab-purina tr .total { font-size: 1.1rem; font-weight: bold; text-align: center; color: #CC0000;} .tab-purina tr:hover td { background-color: #f7f7f7; } .tab-purina select, .tab textarea, .tab input { padding: 5px; } .tab-purina textarea { width: 100%; min-height: 120px; } .tab-purina p { margin-bottom: 5px; font-size: .9rem; } .tab-purina .int { background-color: #F0F0F0; text-align: right; padding-right: 10px; } .tab-cdf { border-collapse: collapse; width: 100%; margin-bottom: 20px; } .tab-cdf th { text-align: left; padding: 10px; text-transform: uppercase; font-weight: bold; font-size: .9em } .tab-cdf tr { border-bottom: 5px solid #fff } .tab-cdf td { padding: 10px 10px; background-color: #f7f7f7; color: #393939; vertical-align: middle } .tab-cdf td.titre { text-align: center; background-color: #20bbad; color: #FFF; font-size: 18px; font-weight: bold;} .tab-cdf td.titre:hover {background-color: #20bbad; } .tab-cdf td .mini { font-size: 12px; color: #0b8d81; } .tab-cdf tr:hover td { background-color: #E3E1E1; } .tab-cdf select, .tab textarea, .tab input { padding: 5px; } .tab-cdf textarea { width: 100%; min-height: 120px; } .tab-cdf p { margin-bottom: 5px; } .tab-cdf .int { background-color: #F0F0F0; text-align: right; padding-right: 10px; } .rech_veto { display: flex; justify-content: space-between; margin: auto; border: 1px solid #CCC } .rech_veto_form { background-color: #F4F4F4; padding: 10px; display: flex; border: 1px solid #ededed; margin-bottom: 10px; } .rech_veto_form input { margin-right: 10px } .box-liste-abonnement { display: flex; flex-wrap: wrap } .box-abonnement { border: 1px solid #CCC; padding: 15px; width: 25%; margin: 0 20px 20px 0; text-align: center } .box-theme .theme-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); grid-gap: calc(1rem + .5vw); margin-bottom: var(--ec-1); } .box-theme { display: flex; gap: 1.5rem; flex-direction: column; } .box-theme .theme-menu { display: flex; gap: 1rem; background-color: var(--gr-0); padding: 1rem; border-radius: 16px; margin-bottom: 3rem; } .box-theme .theme-menu a { display: block; border-radius: 6px; padding: .5rem 1rem; } .box-theme .theme-menu a.yes { outline: 2px solid var(--primary); background-color: var(--primary); color: #FFF; } .box-theme .theme-menu a.no { outline: 2px solid rgb(120, 179, 184); color: var(--primary); } .box-theme .theme-menu a.no:hover {background-color: rgb(120, 179, 184); color: #FFF; } .box_charte_v2 { position: relative; outline: 1px solid #CCC; border-radius: 8px; text-align: center; padding-top: 1rem; display: flex;flex-direction: column } .box_charte_v2:hover { outline: 1px solid #555; } .box_charte_v2 .nom { padding: 1rem 0 ; font-size: 1.2em; } .box_charte_v2 .img { overflow: hidden; height: 120px; border-radius: 6px; margin: 0 1rem; } .box_charte_v2 .img img { object-fit: cover; width: 100%; } .box_charte_v2 .choisir { background-color: #ecf4f4; padding: 1rem 0; overflow: hidden; flex : 1 } .box_charte_v2 .choisir .flex-center { display: flex; gap: 1rem; padding: 0 1rem;} .box_charte_v2 .choisir .flex-center form { flex: 1; display: inline-block } .box_charte_v2 .choisir .flex-center form .bton-moyen { width: 100%; } .box_charte_old { background-color: #a50000; color:#FFF; display: flex; width: 50px; height: 50px; position: absolute; top: -1px; justify-content: center; align-items: center; right: 1rem; } .box_charte_v2 .bton-gris { padding: .5rem 1rem; font-size: 1rem; max-width: -webkit-fill-available; max-width: -moz-available; width: 50%;} /* RESAVENTE */ /* { outline : 1px dashed #000} */ .liste_doc {background-color: hsl(0deg 0% 98.65%); border: 1px solid #ccc; padding: .75rem; display: flex; flex-direction: column; gap: .5rem; border-radius: 8px; transition: border-color .2s ease-in-out; text-align: center;} .tab-resavente {width:100%;column-span: 0;border-collapse: collapse;border-spacing: 0;border:1px solid #CCC;} .tab-resavente thead tr td { padding: 1.5rem 0 ; text-align: center; font-size : 0.9rem; font-weight : bold; text-transform : uppercase; padding:1rem; border:1px solid rgb(226 238 241); } .tab-resavente tbody tr {background-color:rgb(236 245 247); transition : outline .2s easy} .tab-resavente tbody tr:nth-child(even) {background-color:rgb(245 251 252)} .tab-resavente tbody tr:hover { background-color : rgb(193 231 240)} .tab-resavente tbody tr td { padding: 1rem; font-size : 0.9rem; text-transform : uppercase; padding:1rem; border:1px solid rgb(226 238 241); align-items: center; } .tab-resavente tbody tr td a, .btn-tous { background-color : var(--primary); padding:.5rem 1rem; border-radius : 8px; display:flex;gap:.5rem; color:#FFF; width: max-content; margin:auto; border:0; align-items: center; } .btn-tous { padding: 1rem; font-size:1rem} .tab-resavente tbody tr td a:hover { background-color : #108693} .tab-resavente tbody tr td a:before { content :""; background: url(/media/v4/ic-download.svg) no-repeat 0 0; width: 28px; height: 28px; background-size: contain;} .tab-resavente tbody tr td.action {vertical-align: middle; } .tab-resavente tbody tr td.tab-aucun { padding : 1.5rem; text-align:center;} .message-ok, .message-error { padding: 2rem; margin : 0 auto 2rem; text-align: center; font-size: 1.2rem; font-weight: bold; color: #FFF; max-width: 800px; border-radius: 10px;} .message-ok { background-color: #038b37; } .message-error { background-color: #cc0000;} .aff-encours { display: flex; gap: .5rem; align-items: center; justify-content: center;} /*************/ .exemple { padding-bottom:1rem; border-bottom: 1px dashed #0000006e;} .exemple .flex-center { display : flex; gap : 1rem; padding : 0 1rem; } .exemple .flex-center a, .flex-center input { flex : 1} .active_charte { order: -2 !important} .box_charte_v2.active_charte { position: relative; outline: 2px solid var(--primary); } /*.box_charte_v2.active_charte:after { position: absolute; top: -32px; color:var(--primary); font-weight: bold; height: 30px; display: flex; justify-content: center; align-items: center; text-align: 30px; left: calc(50% - 100px); background-color: #ffffff; border: 2px solid var(--primary); border-radius: 8px 8px 0 0 ; content: "Votre thème actuel"; width: 200px; border-bottom: 0;}*/ .themeactiv { position: absolute; top: -32px; color:var(--primary); font-weight: bold; height: 30px; display: flex; justify-content: center; align-items: center; text-align: 30px; left: calc(50% - 100px); background-color: #ffffff; border: 2px solid var(--primary); border-radius: 8px 8px 0 0 ; content: "Votre thème actuel"; width: 200px; border-bottom: 0;} .vign-theme-perso { width: 70%; border: 1px solid #CCC; padding: 20px; margin: auto; background-color: #F4F4F4; } .tab-entete-facture { width: 100%; margin-bottom: 20px; border-spacing: 5px; } .tab-entete-facture td { padding: 10px 10px; background-color: var(--primary)30; border: 1px solid #b2e3e8; } .tab-corps-facture { width: 100%; margin-bottom: 20px; border-spacing: 5px; } .tab-corps-facture td:first-child { padding: 10px 10px; background-color: var(--primary)30; border: 1px solid #b2e3e8; text-align: right } .tab-corps-facture td { padding: 10px 10px; background-color: #FFF; border: 1px solid #b2e3e8; } .tab-bouton-facture { width: 100%; margin-bottom: 20px; border-spacing: 5px; } .tab-bouton-facture td { padding: 10px 10px; background-color: #FFF; border: 1px solid #b2e3e8; text-align: center } .flex-cheque-fact { display: flex; justify-content: center; margin-bottom: 20px } .flex-cheque-fact .cheque-virement { border: 1px solid #000; padding: 10px; width: 35%; margin: 0 20px; box-shadow: 0 0 14px rgba(0,0,0,.2); } .flex-cheque-fact .cheque-virement h2 { text-align: center; font-weight: bold; color: #5fc100; font-size: 1.6em } .flex-cheque-fact .cheque-virement h3 { text-align: center } .logo-gestelv { background : url(https://eleveurs.chiens-de-france.com/media/v4/logo-gestelv.jpg) no-repeat top center; background-size: 100%; width: 397px; height: 123px } .gestelv-liste { display: flex; justify-content: space-between; margin-bottom: 20px } .gestelv-liste .gestelv-box { background-color: #F4F4F4; padding: 20px; width: 45%; } .gestelv-liste .gestelv-box .st { text-align: left; text-transform: uppercase; font-weight: bold; font-size: .9em } .gestelv-liste .gestelv-box .gestelv-liste-dl { display: flex; justify-content: space-between; margin-bottom: 10px } .gestelv-liste .gestelv-box .gestelv-liste-dl div { background-color: #FFF; width: 45%; text-align: center; padding: 10px; border: 1px solid #CCC } .gestelv-liste .gestelv-box .pension-liste-dl { margin: 0 auto 10px; background-color: #FFF; width: 90%; text-align: center; padding: 10px; border: 1px solid #CCC } #langue_onglet_box { padding: 0px } #langue_onglet { border-top: 1px solid #efeeee; border-left: 1px solid #efeeee; border-right: 1px solid #efeeee; padding: 10px; display: flex } #langue_onglet_pays { display: inline-block; margin-right: 10px } #langue_onglet_pays a { display: block; background-color: #F4F4F4; padding: 15px 20px; border: 1px solid #efeeee; } #langue_onglet_pays a:hover { background-color: #FFF; } #langue_contenu_pays { padding: 5px; border-bottom: 1px solid #efeeee; border-left: 1px solid #efeeee; border-right: 1px solid #efeeee; } #langue_contenu_pays .langue-info { padding: 5px; margin-bottom: 10px } .editor { background-color: #FFF } .tab-pedigree { border-spacing: 10px; width: 100%; margin-bottom: 20px; } .tab-pedigree th, .tab-pedigree td { text-align: center; vertical-align: MIDDLE; } .tab-pedigree th { background-color: #F4F4F4; text-align: center; padding: 10px 0; color: #555 } .tab-pedigree .bton-mini { margin: 5px 0 } .tab-pedigree td div div:first-child { font-weight: bold } .box_gp_nom, .box_agp_nom, .box_aagp_nom, .box_aaagp_nom { margin-bottom: 5px; } .box_gp_img, .box_agp_img, .box_aagp_img, .box_aaagp_img { height: 50px; margin: 5px 0; display: none } .box_gp_img img, .box_agp_img img, .box_aagp_img img, .box_aaagp_img img { max-height: 100% } .box_lien { font-size: .9em; color: #555; } .box_lien a { color: #555; text-decoration: underline } .cellule_taille_enfant, .cellule_taille_parent, .cellule_taille_grd_parent, .cellule_taille_arrier_grd_parent, .cellule_taille_arrier_arrier_grd_parent { background-color : #d4e6e8; padding : 8px; } .cellule_taille_enfant_f, .cellule_taille_parent_f, .cellule_taille_grd_parent_f, .cellule_taille_arrier_grd_parent_f, .cellule_taille_arrier_arrier_grd_parent_f { background-color : #ffc4d0; padding : 8px; } .boxchoix { display: flex; justify-content: space-around; font-size: 16px; } .boxchoix .boxchoix-1, .boxchoix .boxchoix-2 { text-decoration: none; background-color: #FFF; border: 1px solid #CCC; padding: 30px; display: block; } .boxchoix-w45 { width: 45%; } .boxchoix-w70 { width: 60%; } .boxchoix .boxchoix-2 { width: 60%; margin-left: 20px } .boxchoix .boxchoix-1:hover, .boxchoix .boxchoix-2:hover { border: 1px solid #000 } .boxchoix .boxchoix-titre { font-size: 24px; color: #5890b7; font-weight: bold; text-align: center; margin-bottom: 10px } .boxchoix .boxchoixtoilettages { width: 339px; height: 210px; margin: 0 auto 10px auto; background : #eef1ee url("https://eleveurs.chiens-de-france.com/media/img-boxchoixtoilettages.png") no-repeat 0 0; } .boxchoix p { margin-bottom: 10px } .boxchoix .boxchoixboutw { width: 50%; margin-bottom: 10px; } .boxchoix-titreliste { color: #5890b7; font-weight: bold } .boxchoix-infoliste { color: #aaa; margin-bottom: 10px } .boxchoix-listerep td { padding: 5px 10px; background-color: #F4F4F4; border: 2px solid #FFF; width: 100%; text-transform: uppercase } .boxchoix-listerep input { padding: 5px; } .boxchoix-firstimg { width: 90%; margin: auto; text-align: center } .boxchoix-firstimg img { max-width: 100%; margin: auto } .boxchoixinputrecherche { width: calc(100% - 15px) } .boxchoix-aucunresult { text-align: center; color: #CC0000; } .boxchoix-plusactif { font-size: 10px; color: #CC0000; } .box_dl_img_sec { padding: 10px; background-color: #F4F4F4; margin-bottom: 10px; width: 50%; } .apercu-image .img-apercu { max-height: 100px; margin: 5px 0; padding: 4px; border: 1px solid #CCC } .tab-paiement-entete { width: 100%; margin: auto; font-size: 1.05em; margin-bottom: 1.5rem; } .tab-paiement-entete .g { font-size: 1.2rem; margin-bottom: .5rem;} .tab-paiement { border: 1px solid #CCC; padding: 10px; width: 100%; margin: auto; border-radius: .5rem; font-size: 1rem; } .tab-paiement td { padding: 1rem; background-color: #FFF;} .tab-paiement td.int {border: 1px solid #d6eaed; } .tab-paiement td.inf { background-color: #ecf6f7;text-align: right; } .tab-paiement thead td, .tab-paiement th { text-align: center; font-weight: bold; background-color: #d6126a !important; color: #FFF; font-size: 1.25rem; padding: 1rem; border-radius: .25rem; } .tab-paiement-choix thead td { background-color: #43B350 !important; color: #FFF; font-size: 16px; padding: 10px; } .tab-paiement-choix { width: 100%; margin: auto; font-size: 14px; } .tab-paiement-choix tr td { background-color: #F1F1F1; border-radius: 8px; padding: 10px; width: 25%; text-align: center; } .tab-paiement-choix tr td form .btn { width: 90%; } .tab-rib { margin: auto } .tab-rib tr td { background-color: #FFF; border: 1px solid #CCC; } .Box-portee { background-color: #ecf7f8; border: 2px solid #80adb1; padding: 1rem; border-radius: .5rem; margin-bottom: 1rem; display: flex; justify-content: space-between; max-width: 1400px; } .Box-portee:hover { border-color: #2d565a; } .Box-portee a { text-decoration: none; } .Box-portee .pere, .Box-portee .mere { display: flex; margin-bottom: 10px; align-items: center; background-color: hsla(0, 0%, 100%, 0.75); border-radius: var(--radius); padding: 0.5rem } .Box-portee .gestion { width: 50% } .Box-portee .gestion { background-color: #FFF; padding: 1.5rem; } .Box-portee .gestionactiv { gap: 1rem; background-color: #ffffff; border-radius: var(--radius); border: 1px solid #80adb161; } .Box-portee .gestioninactiv { background-color: #fff; border: 1px solid #ECECEC; } .Box-portee .gestionactiv, .Box-portee .gestioninactiv { display: flex; flex-wrap: wrap; gap: 0 2em;} .Box-portee .gris { color: #999; } .Box-portee .pere .nompere, .Box-portee .mere .nommere { display: block } .Box-portee .nompere { color: #60b0d9; } .Box-portee .nommere { color: #f00077; } .Box-portee .parentinfo { justify-content: center; display: flex; flex-direction: column; flex-grow: 1;} .Box-portee .parentimg { margin-right: 1rem; overflow: hidden; width: 40px; height: 40px; border-radius: var(--radius) } .Box-portee .parentimg img {object-fit: cover; width: 100%; height: 100%; } .Box-portee .parentimgvide { background : #c3e0e4 url("https://eleveurs.chiens-de-france.com/media/v4/i-photo.png") no-repeat 50% 50%; background-size: 40%; height: 100%; } .Box-portee .saillieinfo { height: 70px; display: table-cell; vertical-align: middle; } .Box-portee .saillieimg { width: 80px; height: 70px; float: left; margin-right: 10px; border: 1px dotted rgba(0,0,0,0.3); padding: 2px; margin-bottom: 5px; } .Box-portee .saillieimg p { width: 80px; height: 70px; display: table-cell; vertical-align: middle; text-align: center; } .Box-portee .naissanceportee { font-weight: bold; font-size: 1.05em; margin-bottom: var(--xs); } .Box-portee .nbmalfem { color : var(--gr-4); margin-bottom: 1rem;} .Box-portee .box-portee-boutg, .Box-portee .box-portee-boutd { flex : 1 } .Box-portee .box-portee-boutg a { display: block; border-radius: var(--radius);} .Box-portee-parents { width: 40% } .box-portee-active { border : 2px solid #CCC; color: #136771; text-align: center; padding: 1rem 0; margin-bottom: .5rem; border-radius: var(--radius) } .box-portee-active span:first-child { font-weight: bold; display: block; font-size: 1rem; text-transform: uppercase; color: #1DB300 } .Box-portee-inactive { border : 2px solid #CCC; background-color: hsla(0,0%,100%,0.57); color: #136771; text-align: center; padding: 10px 0; border-radius: var(--radius) } .Box-portee-inactive span:first-child { font-weight: bold; display: block; font-size: 1rem; text-transform: uppercase; color: #B70000 } .box-portee-active img, .Box-portee-inactive img { display: block; margin: 0 auto .5rem;} .box-portee-active .imgchiensdf { max-width: 230px;} .box-portee-active .imgchiotsdf, .Box-portee-inactive .imgchiotsdf {max-width: 190px} .bton_annoncer { border-radius: var(--radius); /*border : 2px solid var(--gr-2); padding: 1rem 0; */ text-align: center;} .bton_annoncer img { display: block; margin: 0 auto 1rem;} .bton_annoncer .bton, .bout-expirer-radio { border: 0; border-radius: var(--radius); background-color: #279bff; color: #FFF; font-size: 1rem; } .bton_annoncer .bton:hover {background-color: #136cbb} .bout-expirer-radio input[type="radio"] {display: none;} .bton_annoncer_chiot { border: 0; border-radius: var(--radius); cursor:pointer;background-color: #f14aa1; padding: .5rem 1rem ;color: #FFF; font-size: 1rem; } .bton_annoncer_chiot:hover {background-color: rgb(199, 11, 108)} .Box-portee-txt { color: #555; font-size: 10px; } .gest-portee-box { border-left: 1px solid #efefef; border-top: 1px solid #efefef; border-right: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; padding: 10px; } .gest-portee-tab { border-spacing : 1px; border-collapse: separate; width: 100%; margin-bottom: 10px } .gest-portee-tab tr td { background-color: #ffe9e9; padding: 10px 15px; } .gest-portee-tab tr td p { margin-bottom: 5px; font-size: .9em; } .box_dl_img { text-align: left; margin: 0 0 20px 0; } .box_dl_img .int { font-size: 14px; margin-bottom: 5px } .box_dl_img .form-input { } .box_dl_img .info { color: #093; font-size: 12px; margin-bottom: 5px; } .box_dl_img .apercu-image { text-align: center; margin: 0 0; padding: 0 0; } .box_dl_img .apercu-image .apercu { margin: 10px auto; text-align: center; max-height: 300px } .box_dl_img #apercu-image { text-align: center; margin: 5px 0; padding: 0 0; background-color: #F4F4F4; border: 1px solid #e8e8e8; } .box_dl_img #apercu-image #apercu { margin: 10px auto; text-align: center; max-height: 350px } .tabliste-parent { background-color: #dbeeee; width: 100%; border-spacing : 0px; padding: 4px; border-collapse: separate; margin-bottom: 20px } .tabliste-parent tr td { background-color: #fff; padding: 10px; vertical-align: top; border: 1px solid #dbeeee } .tabliste-parent tr .bouton { vertical-align: middle; text-align: center } .tabliste-parent tr:hover td { background-color: rgba(255,255,255,.4); } .tabliste-parent tr td:first-child { width: 20%; text-align: center } .tabliste-parent tr td:first-child img { max-height: 120px; margin: auto } .tabliste-parent tr td .nom { font-size: 1.2em; font-weight: bold; margin-bottom: 10px } .tabliste-parent tr td .info span { background-color: #81bd48 } .tabliste-parent tr td .pere span { background-color: #67C5E7 } .tabliste-parent tr td .mere span { background-color: #DD6E9E } .tabliste-parent tr td .pere span, .tabliste-parent tr td .mere span, .tabliste-parent tr td .info span { border-radius: 4px 0 0 4px; padding: 5px; margin: 0 5px 5px 0; text-align: center; min-width: 130px; display: inline-block; color: #FFF } .imgvide { width : 80px; height : 80px; margin: auto; background-color: #eaeaea; background : rgb(0 0 0 / 10%) url("/media/v4/ic-img.svg") no-repeat 50% 50%; opacity: .25; border: 1px solid var(--gr-2); } .ndc_box { border: 1px solid #CCC; padding: 10px; margin-bottom: 10px } .box-codeportee { background-color: #4C9B06; padding: 20px; margin-bottom: 20px } .affich-cdf-box { border: 1px solid #CCC; padding: 20px; margin: auto } .pres1 { font-weight: bold; color: #1ea2f2; font-size: 1.4em; text-transform: uppercase; letter-spacing: -.6px; text-align: center } .pres2 { font-weight: bold; color: #ff006b; font-size: 2em; text-align: center; margin-bottom: 20px } .affich-cdf-box-img { width: 471px; height: 256px; margin: auto; background : url("https://eleveurs.chiens-de-france.com/media/v4/fond-cdf-portee.jpg") no-repeat 0 0; } #tableporteeoption { border: 0px solid #999; margin: auto; width: 72% } #tableporteeoption td { padding: 10px; vertical-align: middle; background-color: #F4F4F4; } #tableporteeoption .vide { border: 0px solid #ccc; padding: 5px; } #tableporteeoption .offertpurina { text-align: center; color: #666; border: 0; } #tableporteeoption .produit { width: 50% } #tableporteeoption .porteecheck { width: 10%; text-align: center; } #tableporteeoption .porteetarif { width: 13%; text-align: center; padding-top: 15px; } #tableporteeoption .porteetarif .affprix { font-size: 1.15rem; color: #44b318; } #tableporteeoption .totalprix { text-align: right; border: 0px; font-size: 1.2em; font-weight: bold; color: #44b318; } #tableporteeoption .porteetarifgris { color: #666; width: 5%; text-align: center; vertical-align: top; padding-top: 15px; } #tableporteeoption .titreoption { background-color: #FFF; color: var(--primary); font-weight: bold; font-size: 1.1em; border: 0px solid #FFF; padding-top: 10px; } #tableporteeoption .icone { display: flex; justify-content: start; flex-wrap: wrap } #tableporteeoption .icone .icone_box label { } #tableporteeoption .icone .icone_box label img { background-color: #FFF; padding: 2px; margin: 0 10px 10px 0; border : 4px solid #F4F4F4; width : 40px; height : 40px; text-align: center; vertical-align: middle; } #tableporteeoption .icone .icone_box label img:hover { border : 4px solid #CCC; } #tableporteeoption .icone .icone_box label img:active { border : 4px solid var(--primary); } #tableporteeoption .icone .icone_box label input { display: none } #tableporteeoption .icone .icone_box input:checked + img { border : 4px solid var(--primary); } .tab_carte { border-collapse: collapse; width: 100%; margin-bottom: 20px;background-color: #F4F4F4;} .tab_carte td { border: 1px solid #CCC; vertical-align: top } .model_carte { border: 1px solid #000 !important; text-align: center} .model_carte td {border: 0; vertical-align: top} .fond_carte_blanc {background-color:#fff;} .fond_carte_rouge {background-color:#e2001a;} .carte_purina_noir { min-width: 100px} .carte_nom { padding: 10px} .carte_a { padding: 10px} .bton-checkbox label span { margin: auto; /*background : #E5E5E5 url("https://eleveurs.chiens-de-france.com/media/v4/i-valid-blanc.png") no-repeat 50% 50%;*/ box-shadow: 2px 2px 12px rgba(0,0,0,.2) inset; width: 15px; height: 15px; display: block; padding: 5px; border-radius: 4px; border: 1px solid #ADADAD; } .bton-checkbox label span:hover { background: rgba(71,132,9,1.00); background: -webkit-linear-gradient(rgba(100,164,36,1.00) 0%, rgba(71,132,9,1) 100%); background: -o-linear-gradient(rgba(100,164,36,1.00) 0%, rgba(71,132,9,1) 100%); background: linear-gradient(rgba(100,164,36,1.00) 0%, rgba(71,132,9,1.00) 100%); color: #FFF; } .bton-checkbox label span:active { box-shadow: 1px 2px 5px rgba(0,0,0,.5) inset } .bton-checkbox label input { display: none } .bton-checkbox input:checked + span { border: 1px solid #215100; background : #3cc11c url("https://eleveurs.chiens-de-france.com/media/v4/i-valid-blanc.png") no-repeat 50% 50%; color: #fff; } .presentation-box { display: flex; margin-bottom: 20px } .presentation-box .presentation-box-titre { max-width: 15%; background-color: #F4F4F4; border: 1px solid #CCC; margin-right: 20px; padding: 20px } .presentation-box .presentation-box-liste { width: 80%; } .portee-box-affich { display: flex; justify-content: space-between; margin-bottom: 20px } .portee-box-affich .divg { width: 45% } .portee-box-affich .divd { width: 53% } .portee-box-actif, .portee-box-inactif { border-radius: .5rem; } .portee-box-inactif { border: 3px solid #04a1b2; padding: 1rem; text-align: center; border-radius: .5rem; } .portee-box-actif { display: flex; flex-direction: column; gap : 1rem; margin-bottom: 1rem; position: relative; } .portee-box-actif .pgc_chiens > div:last-child, .portee-box-actif .pgc_chiots > div:last-child { margin: auto;} .portee-box-actif-int { font-size: 1.1em; color: #FFF; font-weight: bold; margin-bottom: 10px; text-align: center } .portee-box-option { display: flex; flex-wrap: wrap; border-radius: var(--radius); justify-content: space-between; gap: 0 1rem; margin-bottom: 1rem; } .portee-box-option-titre { width: 100%; margin-bottom: 10px; font-weight: bold } .note { border: 1px solid #CCC; padding: 5px 10px; } .list_box_liste_chien { display: grid; grid-gap: clamp(1.5rem,1vw,3rem); grid-template-columns: repeat(auto-fill,minmax(280px,1fr));} .box_liste_chien { outline: 1px solid var(--gr-1); display: flex; gap: .75rem; border-radius: var(--radius); flex-direction: column; padding: 1rem; justify-content: space-between; transition: .2s ease-in-out; } .box_liste_chien > div { width: -webkit-fill-available; } .box_liste_chien:hover { outline: 1px solid var(--gr-2); box-shadow: 0 0 6px 3px hsl(0deg 0% 0% / 10%); } .box_liste_chien .box_liste_chien_img {height: 240px; overflow: hidden; display: flex; justify-content: center; align-items: center; } .box_liste_chien .box_liste_chien_img img { object-fit: contain; width: 100%; height: 100%; background-color: #F4F4F4; } .box_liste_chien .box_liste_chien_img .imgvide { width: -webkit-fill-available; height: -webkit-fill-available; width: -moz-available; height: -moz-available; } .box_liste_chien .box_liste_chien_info { border: 0px solid #000; flex : 1 } .box_liste_chien .box_liste_chien_info p { font-size: .8rem;} .box_liste_chien .box_liste_chien_info p:first-child { margin-bottom: .5rem; font-size: 1rem; } .box_liste_chien .enligne { padding: .25rem 0; background-color: var(--valid); color:var(--rev-white); text-align: center; font-size: .75em; border-radius: var(--radius); } .box_liste_chien .box_liste_chien_bout { display: flex; gap: .5rem; flex-wrap: wrap;} .box_liste_chien .box_liste_chien_bout > form { flex : 1; flex-shrink: 0;} .box_liste_chien .box_liste_chien_bout > form input { width: -webkit-fill-available; width: -moz-available; height: -webkit-fill-available;height: -moz-available; } .box_liste_chien .box_liste_chien_bout > form label { white-space: nowrap; } .box_liste_chien .box_liste_chien_bout > form input[type=checkbox] { display: none;} .box_liste_chien #boutaction p { color: #555; font-size: 0.85em; letter-spacing: -0.5px; margin-bottom: 5px; } .box_liste_chien #boutaction input { width: 100%; margin-bottom: 10px; cursor: pointer; } .box_liste_chien .box_liste_chien_enligne { text-align: center; } .box_liste_chien .box_liste_chien_enligne input[type="checkbox"] { display: none; } .box_changement_proprio { margin-bottom: 20px; border: 1px solid #CCC; padding: 20px; background-color: #F4F4F4 } .box-rech-aff { width: 30%; padding: 10px; border: 1px solid #E9E9E9; text-align: center; } .box-rech-aff p { margin-bottom: 10px; color: var(--primary) } .box-gest-chien-male { font-size: 1.4em; font-weight: bold; color: var(--primary) } .box-gest-chien-femelle { font-size: 1.4em; font-weight: bold; color: #DF0068 } .box-gest-fich-img { height: 200px; width: 200px; border: 1px solid #CCC; display: flex; padding: 4px; margin-right: 20px } .box-gest-fich-img img { object-fit: contain; height: 100%; width: 100%} .box-gest-fich-img div { background : url("https://eleveurs.chiens-de-france.com/media/v4/i-photo.png") no-repeat 50% 50%; background-size: 50%; width: 190px; height: 140px; background-color: #F4F4F4; border: 1px solid #CCC; } .box-gest-chien { display: flex; flex-wrap: wrap; justify-content: space-between; min-width: 40%; margin-right: 20px } .box-gest-chien-options { min-width: 50%; background-color: #F4F4F4; padding: 20px; margin-bottom: 20px } .box-gest-chien-options input[type="checkbox"] { display: none; } .pgc_ajout_titre form { display: flex; gap : .5rem} .pgc_ajout_titre form .btn { padding: .25rem .5rem;} .gestbox-chien { width: 45%; margin: 0 0 20px 0; } input[type="submit"].bton-fiche { font-size: 100% } .bton-fiche-non { opacity: 0.2; padding: 10px 5px; letter-spacing: -.5px; display: block; transition: 0.2s; font-weight: bold; border-radius: 2px; cursor: pointer; text-align: center; } .bton-fiche { padding: 10px 5px; letter-spacing: -.5px; display: block; transition: 0.2s; font-weight: bold; border-radius: 2px; cursor: pointer; text-align: center; } .bton-fiche span, .bton-fiche-non span { width: 100%; display: block; font-weight: normal; color: #969696; text-transform: uppercase; font-size: .8em } .offre_strike { font-size: 12px; margin-bottom: 10px; text-decoration: line-through;} .offre { font-size: 13px; font-weight: bold;} .offre_prix { font-size: 15px; font-weight: bold; } .offre_activer { font-size: 16px; font-weight: bold;} .offre_bleu { color:#1980a2;} .offre_vert { color:#53a009;} .offre_info { font-weight: bold; color:#53a009;font-size: 17px; } .offre_souligne { text-decoration: underline;} .page_eleveur_liste { display: flex; flex-wrap: wrap; margin-bottom: 20px } .page_eleveur { position: relative; border: 1px solid #CCC; padding: 10px; width: 20%; max-width: 200px; box-shadow: 4px 4px 2px rgba(0,0,0,.05); margin: 0 3% 20px 0; text-align: center } .page_eleveur_nbpara { font-size: .8em; color: var(--primary); margin-bottom: 5px } .page_eleveur_titre { font-weight: bold; margin-bottom: 5px; letter-spacing: -.5px; font-size: .9em; } .page_eleveur_ordre { color: #CCC; position: absolute; top: 0; right: 0; padding: 2px 5px; border-left: 1px dotted #CCC; border-bottom: 1px dotted #CCC } .page_eleveur_texte { letter-spacing: -.5px; margin-bottom: 10px; font-size: .9em; text-align: left; height: 80px; background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#FFF)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .page_eleveur_img { margin-bottom: 5px; height: 50px; } .page_eleveur_img img { height: 50px } .page_eleveur_img_vide { height: 50px; width: 100%; background : #F4F4F4 url("https://eleveurs.chiens-de-france.com/media/v4/i-photo.png") no-repeat 50% 50%; background-size: 10%; } .liste_para { border: 1px solid #CCC; padding: 20px; width: 70%; box-shadow: 6px 6px 3px rgba(0,0,0,.1); margin: 0 auto 20px auto } .liste_para_box { justify-content: space-between; flex-wrap: wrap; display: flex; background-color: #FaFaFa; position: relative; border: 1px solid #E7E7E7; padding: 20px; margin-bottom: 10px } .liste_para_titre { width: 100%; font-weight: bold; font-size: 1.2em; margin-bottom: 5px } .liste_para_ordre { color: #A0A0A0; position: absolute; top: 0; right: 0; padding: 2px 5px; border-left: 1px dotted #CCC; border-bottom: 1px dotted #CCC } .liste_para_texte { width: 70%; letter-spacing: -.5px; margin-bottom: 10px; text-align: left; background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#FaFaFa)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .liste_para_img { float: left; margin: 0 10px 10px 0 } #faq-liste-question a { display: block; margin-bottom: 10px; background-color: rgb(4, 162, 179); color: #FFF; padding: 10px; } .message-content { padding: 10px; background-color: #F4F4F4; border: 1px solid #CCC; margin-bottom: 10px } .tab-portee { width: 100%; margin-bottom: 20px; } .tab-portee th { text-align: left; padding: 10px; text-transform: uppercase; font-weight: bold; font-size: .9em } .tab-portee tr { border-bottom: 5px solid #fff } .tab-portee .male { padding: 10px 10px; background-color: #dbeeee; color: #000; vertical-align: middle } .tab-portee .femelle { padding: 10px 10px; background-color: #ffcee0; color: #000; vertical-align: middle } .tab-portee tr:hover .male { background-color: #B4D7D7; } .tab-portee tr:hover .femelle { background-color: #FB7AAC; } .tab-portee select, .tab textarea, .tab input { padding: 5px; } .tab-portee textarea { width: 100%; min-height: 120px; } .tab-portee p { margin-bottom: 5px; } .tab-portee .int { background-color: #F0F0F0; text-align: right; padding-right: 10px; } .box-liste-portee-attest { border: 3px solid #666666; padding: 20px; margin-bottom: 20px; display: flex; flex-direction: column; border-radius: 8px; gap:.5rem } .box-liste-portee-attest .box-pere, .box-liste-portee-attest .box-mere { padding: 1rem; border-radius: 8px } .box-liste-portee-attest .box-pere { border: 1px solid var(--male ) } .box-liste-portee-attest .box-pere .g {color : var(--male ) } .box-liste-portee-attest .box-mere { border: 1px solid var(--femelle ) } .box-liste-portee-attest .box-mere .g {color : var(--femelle ) } .box-liste-portee-attest .tab-portee tr { border-bottom-color: #F4F4F4; } .action-image { display: flex } .apercu-image-full img { height: 150px } .apercu-image-full img { max-height: 100% } .chiot { border: 1px solid #ccc; padding: 10px; margin-bottom: 20px; background-color: #FFF } .page_attestation { } .attestation_creabox_liste { background-color: #F4F4F4; padding: 20px } .attestation_creabox_bout { background-color: #F4F4F4; padding: 0 0 20px 20px } .btninout { display: flex} .bton-vchiens { font-size: 1.2rem; } .bton-achiens { cursor: pointer;font-size: 1.2rem; border: 0 ;background-color: hsla(32,100%,41%,1.00)} .bton-vchiens, .bton-achiens { padding: 1rem; color: #FFF;} .bton-achiens:hover {background-color: hsla(32,100%,41%,0.90)} .bton-vchiens, .affinlist {background-color: hsla(186,96%,36%,1.00)} .affinou {display: flex; margin: 0 1rem; align-items: center; font-size: 1.2rem;} .affinlist { display: flex; padding: 1rem; margin-bottom: 1rem } .affinlistmale { padding: .25rem;background-color: hsla(32,100%,41%,1.00)} .btonaffin,.btonaffin-on { border-radius:1rem; padding: .5rem 1rem; margin-right: .5rem} .btonaffin { background-color: #FFF} .btonaffin:hover {background-color: hsla(0,0%,100%,0.20); } .btonaffin-on {background-color: hsla(0,0%,100%,0.72);} .bg_male, .bg_femelle, .bg_disponible, .bg_reserve, .bg_vendu, .bg_reste, .bg_decede { color: var(--rev-white);} .bg_male { background-color: var(--male); } .bg_femelle { background-color: var(--femelle)} .txt_male { color: var(--male); } .txt_femelle { color: var(--femelle)} .page_gestion_chiots { display: flex; gap:2rem; margin-bottom: 2rem; justify-content: space-between; } .page_gestion_chiots input[type=text], .page_gestion_chiots select { box-shadow: none; padding: .25rem .5rem; } .box-alert-entete a { display: flex; background: rgb(215,8,8); background: radial-gradient(circle, rgb(211 20 20), rgb(133 0 0)); font-size: .9em; text-align: center; color:var(--rev-white); padding: var(--xs) 0; align-items: center; justify-content: center; gap: .5rem; } .box-alert-entete a svg {fill :var(--rev-white); height: 20px;} .box-alert-entete a span { display: flex; align-items: center; padding: 0.25rem .25rem 0.25rem .5rem ; background-color: hsl(0deg 0% 0% / 40%); border-radius: 0.25rem; font-size: .7rem; } /* FIDANIMO */ .fida-pkoi { display: flex; margin: auto; background-color: rgba(244,247,255,1); border-radius: 4rem; border: 2px solid #afb7d1; padding: .75rem .5rem .75rem 1.5rem ; gap:.5rem; text-align: center; font-weight: bold; width: fit-content; transition: background-color .2s ease-in-out; } .fida-pkoi > div:first-child { display: flex; flex-direction: column; } .fida-pkoi svg { height: 36px; width: 36px; } .fida-pkoi:hover { background-color : rgb(220, 237, 255); } .fida-pkoi span { font-size: .8rem; color: var(--fida-primay-2); } .entete-x2 { display: flex; border-bottom: 1px solid #eee; margin-bottom: 30px; justify-content: space-between; min-width: 550px; } .entete-x2 .retour { display: flex; justify-content: center; align-items: center; border: 1px solid #eee; border-bottom: 0; padding: 0 1rem 0 0.5rem; height: 100%; margin: -1px 0 0 0; } .entete-x2 .retour::before { content: ""; height: 20px; width: 30px; background-image: url(/media/v4/ic-chevron-fleche.svg); background-repeat: no-repeat; background-position: 0 50%; background-size: cover; display: block; } .entete-x2 .retour:hover { border-color: #ccc; border-style: dashed; color: var(--primary); } .entete-x2 .retour:hover::before { animation: animretour 1s infinite; } @keyframes animretour { 0% { background-position: 0px 50%; opacity: 1; } 100% { background-position: -4px 50%; opacity: 0;} } .entete-x2 h1 { border-bottom: 0; margin-bottom: 0; } .pgc_fida { display: flex; justify-content: center; align-items: center; gap: .75rem; font-size: 1.1rem; padding: 1.25rem 0; background: rgba(244,247,255,1); text-align: center; position: relative; border-radius: 1rem var(--radius) var(--radius) 0; border-bottom: 0; transition: outline .5s ease-in-out; width: 550px; z-index: 0 ; } @media screen and (max-width: 1350px) { .entete-x2 {flex-direction: column; gap: 1rem; } .pgc_fida { font-size: 1rem; width: -webkit-fill-available; border-radius: var(--radius); padding: 1rem 1rem; border: 2px solid #afb7d1;} .pgc_fida .fleche { display: none;} } @media screen and (max-width: 1050px) { .pgc_fida .fleche { display: none;} } .pgc_fida:hover::after { background-position-y: 30px; opacity: .75; } .pgc_fida:hover { color : #000; border-color: var(--fida-primay-1);} .pgc_fida .fleche { display: inline-flex; width: 37px; height: 37px; border: 1px solid #afb7d1; background-color: #FFF; border-radius: 50%; fill: #fd5f1e; align-items: center; justify-content: center; } .pgc_fida > div { font-weight: bold;} .pgc_fida > div div { font-size: .8rem; color : var(--fida-primay-2); } .pgc_fida .pgc_fida span { color: var(--fida-primay-2) } .pgc_fida .coeur-1 { transition: .5s ease-in-out; background-size: 12px; width: 100%; height: 100%; transform: scaleX(-1); background-position-x: 20px; background-position-y: 20px; } .pgc_fida:hover .coeur-1 { background-position-x: 10px; background-position-y: 10px; animation: movecoeur1 1s ; } @keyframes movecoeur1 { 0% { background-size: 12px; } 25% { background-size: 8px;} 50% { background-size: 12px;} 75% { background-size: 8px;} 100% { background-size: 12px; } } .pgc_fida .coeur-2 { transition: .75s ease-in-out; background-size: 9px; width: 100%; height: 100%; transform: scaleX(-1); background-position-x: 90px; background-position-y: 40px; opacity: .5; } .pgc_fida:hover .coeur-2 { background-position-x: 110px; background-position-y: 15px; animation: movecoeur2 1s ; opacity: 1; } @keyframes movecoeur2 { 0% { background-size: 9px; } 12.5% { background-size: 7px;} 25% { background-size: 9px;} 37.5.5% { background-size: 7px;} 50% { background-size: 9px;} 62.5% { background-size: 7px;} 75% { background-size: 9px;} 87.5% { background-size: 7px;} 100% { background-size: 9px; } } .pgc-fida { position: relative; display: flex; flex-direction: column; border-radius:.5rem; align-items: center; border: 3px solid #afb7d1; padding: .5rem; transition: .2s ease-in-out;} .pgc-fida img { margin: auto; } .pgc-fida span:first-child { width: 100px; height: 40px; display: block; background: #FFF url(/media/v4/logo-fidanimo.svg) no-repeat 50% 50%; background-size: contain; text-align: center; position: absolute; top: -20px; left: calc(50% - 55px); padding: 0 10px; } .pgc-fida div { font-size: 1.1rem; font-weight: normal; display: flex; justify-content: center; padding: 1.75rem 1rem 1.5rem; color: #1c415e; transition: .2s ease-in-out; align-items: center; background-color: #FFF; } .pgc-fida div span { display: flex; align-items: center; } .pgc-fida:hover div { color: #ff4802;} .pgc-fida span:last-child { display: block; width: 24px; height: 24px; border: 2px solid #afb7d1; background-color: #FFF; border-radius: 50%; position: absolute; left: calc(50% - 12px); bottom: -15px; fill: #fd5f1e;} .pgc_g { flex: 1; } .pgc_d { display: flex; flex-shrink: 0; flex-direction: column; width: 25%; padding-left: 2rem; border-left: 4px dotted rgb(221 221 221); gap: 1.5rem; } .pgc_info_portee { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1rem; background-color: #d4e6e8; padding: 1rem; border-radius: .5rem; margin-bottom: 1.5rem; } .pgc_info_portee_1_3 { grid-column: 1/3; } .flex-vid { display: flex; justify-content: space-between; gap: 0 1rem; } .resa-vid { display : flex; align-items: center; gap : .5em; border : 2px solid #CCC; border-radius: 1.2em; padding: .5em 1em; cursor:pointer; position: relative; width: 100px; font-size: .9em; } .resa-vid:hover { border-color : #29b3c3; } .resa-vid::after, .resa-vid::before { position: absolute; width: 20px; rotate: 45deg; height : 3px; color: #CCC; top : -9px; content : "";background-color: #CCC; } .resa-vid::after { rotate: 45deg;right: 50px; } .resa-vid::before { rotate: -45deg;right : 30px } .list_resa_vente { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 1.5rem; padding: 1.5rem; outline: 2px solid #CCC; border-radius: 12px; --shad: 0px 8px 40px 0px rgba(0, 0, 0, .04), 0px 2px 5px 0px rgba(0, 0, 0, .05), 0px 0px 2px 0px rgba(0, 0, 0, .15); box-shadow: 0 0 var(--rev-black), 0 0 var(--rev-black), var(--shad); } .list_resa_vente .portée { font-weight: bold; } .list_resa_vente .portée { font-weight: bold; } .list_resa_vente .parents { font-weight: bold; display: flex; flex-direction: column; gap: .5rem; } .list_resa_vente .list_resa_vente_chiots { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; } .list_resa_vente .list_resa_vente_chiots a { background-color: hsl(0deg 0% 98.65%); border: 1px solid #ccc; padding: .75rem; display: flex; flex-direction: column; gap: .5rem; border-radius: 8px; transition: border-color .2s ease-in-out; text-align: center;} .list_resa_vente .list_resa_vente_chiots a:hover { border-color : #000 } .list_resa_vente .list_resa_vente_chiots a .pgc_image { background-color: var(--gr-0);} .list_resa_vente .list_resa_vente_chiots a .choix { color: var(--gr-3); background-color: var(--primary); border-radius: .5rem; padding: .5rem 1rem; width: fit-content; color: #FFF; margin: auto;} .pgc_list_chiots { margin-bottom: 1.5rem; } .pgc_box_chiots { display: flex; border: 1px solid var(--primary); border-radius: .25rem; margin-bottom: 1.4rem; } .pgc_box_chiots_plus { display: flex; flex-wrap: wrap; gap: .25em 1em; width: -webkit-fill-available; width: -moz-available; } .pgc_box_chiots:hover { border-color: var(--gr-4); box-shadow: 0 0 7px hwb(0 0% 100% / 0.15); } .pgc_box_chiots .pgc_box_chiots-g, .pgc_box_chiots .pgc_box_chiots-d { display: flex; } .pgc_box_chiots .pgc_box_chiots-g { gap : 1rem; padding: .75rem; } .pgc_box_chiots-g { flex : 3 } .pgc_box_chiots-d { border-left: 2px dotted #00818f; position: relative; flex-wrap: wrap; justify-content: center; flex: 2; gap: 0 .75rem; background-color: #29b3c3; padding: .75rem; } .pgc_box_chiots-d.inactif { opacity: .5; overflow: hidden; } .pgc_box_chiots-d.inactif::before { position: absolute; background-color: var(--primary); inset: 0 0 0 0; content: ''; z-index: 10; opacity: .6; } .pgc_box_chiots-d.inactif .pgc_vig_reservation { display: none;} .pgc_box_chiots-d .pgc_boxy { flex-grow: 1; z-index: 0; width: calc(50% - 0.4rem);} .pgc-gift { color: #FFF !important; text-shadow: 1px 1px 1px rgb(0 0 0 / 34%); text-align: center; display: flex; padding: 0.4rem 0 0 0; font-size: 1rem; gap: 0.4rem; align-items: center; text-align: center; justify-content: center; width: -webkit-fill-available; width: -moz-available; } .pgc-gift::before { fill: #FFFFFF; content: ""; background: url(/media/v4/ic-gift.png) no-repeat 0 0; display: inline-block; width: 13px; height: 12px; background-size: contain; } .pgc_btn span { font-weight: bold; color: #00565f; } .pgc_btn span.resavent-termine { color: #058d05;/* background: url(/media/v4/pgc_ic_valid.png) no-repeat 0 50%; background-size: 14px; padding-left: 20px;*/ } .pgc_btn span.resavent-encours { color: #cb7b00; display: flex; align-items: center; gap: 0.25rem; } .pgc_regroup { display: flex; flex-direction: column; flex : 1; } .pgc_regroup_haut { display: flex; flex-grow: 1; } .pgc_titre { margin-bottom: .5rem; font-size: .8rem; font-weight: 600; } .pgc_stitre { color: #31575a; margin-bottom: .25rem; font-size: .8rem; } .pgc_box { background-color: #FFF; border-radius: .5rem; position: relative; padding: 1rem; /*border : 1px solid #97c2c6; */ } .pgc_parents { font-size: .9rem; } .pgc_pere, .pgc_mere { font-size: .9em; margin-right: .5rem; padding: .5rem; width: 35px; border-radius: var(--radius); display: inline-block; text-align: center; } .pgc_pere{ border : 1px solid rgb(120 174 255); color: rgb(83, 136, 216); } .pgc_mere{ border : 1px solid rgb(230, 104, 152); color: rgb(216, 83, 134); } .pgc_commentaire {color: var(--gr-3); margin-bottom: .5rem; } .pgc_explic::before { display: inline-block; content:""; border-radius: .5rem; height: 1rem; background-color: hsl(186deg 30% 87% / 33%); width: 100%; margin-bottom: .5rem;} .pgc_explic::after { display: inline-block; content:""; border-radius: .5rem; height: 1rem; background-color: hsl(186deg 30% 87% / 33%); width: 30%;} .pgc_box input[type=submit] { width: 100px; } .pgc_img_portee { display: flex; justify-content: center; align-items: center; height: 80px; margin: 0 auto 1rem auto; background: #ecf7f8 url(/media/v4/img-vide.png) no-repeat 50% 50%; width: 110px; overflow: hidden; } .pgc_img_portee img { max-height: 100px; } .pgc_box_chiots input[type=submit], .pgc_box input[type=submit] { transition: .15s ease-in-out; box-shadow: none; border: 0; outline: 1px solid #5eb6d3; border-radius: var(--radius); padding: .25rem 0; } .pgc_btn { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; border-radius: var(--radius); min-height: 45px; min-width: 110px; font-size: .8rem; outline: 1px solid rgb(4 162 179); background: -webkit-linear-gradient(rgba(255,255,255,1) 50%, rgb(189 242 246) 100%); background: -o-linear-gradient(rgba(255,255,255,1) 50%, rgba(189 242 246,1) 100%); background: linear-gradient(rgba(255,255,255,1) 50%, rgba(189 242 246,1) 100%); } .pgc_requis { display: flex; justify-content: center; align-items: center; gap: .75rem; background-color: #ab0000; margin-bottom: 1rem; padding: 1rem; border-radius: .5rem; color: #fff; font-weight: bold } .pgc_btn_requis { position: absolute; background-color: #ab0000; outline: 1px solid #ab0000; padding: 0 0.25rem; line-height: 14px; border-radius: 0 0 var(--radius) var(--radius); bottom: -12px; color: #fff; font-weight: bold; text-transform: uppercase; font-size: 9px; width: -webkit-fill-available; } .pgc_btn:hover { outline: 1px solid rgb(0, 0, 0); } .pgc_btn.pgc_encours { outline: 1px solid rgb(179, 124, 4); background: -webkit-linear-gradient(rgba(255,255,255,1) 50%, rgb(255 237 198) 100%); background: -o-linear-gradient(rgba(255,255,255,1) 50%, rgba(255 237 198,1) 100%); background: linear-gradient(rgba(255,255,255,1) 50%, rgba(255 237 198,1) 100%); } .pgc_btn.pgc_encours span:first-child { color: rgb(179 123 0); } .pgc_btn.pgc_termine { outline: 1px solid rgb(83, 179, 4); background: -webkit-linear-gradient(rgba(255,255,255,1) 50%, rgb(198 255 201) 100%); background: -o-linear-gradient(rgba(255,255,255,1) 50%, rgba(198 255 201,1) 100%); background: linear-gradient(rgba(255,255,255,1) 50%, rgba(198 255 201,1) 100%); } .pgc_btn.pgc_termine span:first-child { color: rgb(62 134 3); } .pgc_encours:hover, .pgc_termine:hover { outline: 1px solid rgb(0, 0, 0); } .pgc_btn_d { padding: 0.5rem 0.75rem; border-radius: 0.25rem; border: 0; margin: 0.25rem; background-color: #FFF; outline: 2px solid hsl(0deg 0% 100% / 40%); width: -webkit-fill-available; width: -moz-available; } .form_kit_plus { color: #FFF; padding: .5rem; font-size: .9em; } .form_kit_plus a { color: var(--puppy-allsize); text-decoration: underline; } .pgc_box_chiots input[type=submit], .pgc_box input[type=submit] { font-size: .8rem; flex: 1 } .pgc_box_chiots input[type=submit]:hover, .pgc_box input[type=submit]:hover, .pgc_action input[type=checkbox]:checked + label:hover { outline: 1px solid var(--gr-4); cursor: pointer; box-shadow: 0 0 7px hsl(0deg 0% 0% / 30%); } .pgc_action_eff { border-radius: 1rem; padding: 0.25rem; width: 20px; border: 1px solid #ffb6b6; text-align: center; } .pgc_action_eff img { height: 16px; } .pgc_vig_reservation { position: absolute; height: 36px; width: 36px; border-radius: 50%; top: -20px; left: calc(50% - 17.5px); background: #29b3c3 url(/media/v4/ic-dossier.png) no-repeat 50% 50%; background-size: 15px; } .pgc-etat-site { gap: .75rem; display: flex; width: 100%; } .pgc-etat-site span { display: flex; align-items: center; color: #a3a3a3; font-size: 10px; gap: var(--xs); margin-bottom: .125rem; } .pgc-etat-site span.offline { color: var(--alert); fill: var(--alert); background-color: #fef5f4; opacity: .75; } .pgc-etat-site span.online { color: var(--valid); background-color: #f6fbf5 } .pgc-etat-site span svg { height: 12px; width: 12px;} .pgc-etat-site span.offline svg { fill : var(--alert);} .pgc-etat-site span.online svg { fill : var(--valid);} .pgc_ligne { font-size: 12px; padding: var(--xs); border-radius: var(--radius); } .pgc_sexe { margin-bottom: .25rem; } .pgc_sexe, .pgc_ligne { font-size: .9rem; } .pgc_image { border-radius: .4rem; width: 85px; height: 80px; overflow: hidden; position: relative; flex-shrink: 0 } .pgc_image a { display: flex; justify-content: center; align-items: center; font-size: .7rem; text-align: center; color: var(--gr-3); height: 100%; width: 100%; background-color: #ecf7f8; } .pgc_image a:hover { color: var(--gr-4); } .pgc_image img { object-fit: cover; width: 100%; height: 100%; } .pgc_info_reg { display: flex; flex-direction: column; justify-content: center; flex-grow: 1; } .select-etat-chiot { border-radius: var(--radius); font-size: .8rem; padding: .25rem; background-color: #FFF; box-shadow: none; margin-bottom: .25rem; } .select-etat-chiot-valid { display: inline-block;} .select-etat-chiot-valid svg { fill : hsl(108, 83%, 36%); height : 18px; width : 18px; } .pgc_nom { text-transform: lowercase; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; } .pgc_nom:first-letter { text-transform: uppercase; } .pgc_prix { position: absolute; bottom: 0; padding: 0.25rem 0; color: #FFF; font-weight: bold; background-color: rgb(4 162 179 / 82%); width: 100%; text-align: center; font-size: .8rem; } .pgc_prix span, .pgc_regroup span { color: var(--gr-3); } .pgc_action .int { border: 1px solid; width: 100%; top: -11px; color: var(--gr-4); text-transform: uppercase; text-align: center; border-radius: .5rem .5rem 0 0 } .pgc_action label { display: flex; text-align: center; cursor: pointer; align-items: center; justify-content: center; color: var(--gr-2); } .pgc_adm { color: #790c74; font-weight: bold;} .pgc_ajout input[type=submit] { border-radius: var(--radius); padding: .5rem 1rem; border: 0; outline: 1px solid #5eb6d3; background-color: #FFF; cursor: pointer; } .pgc_ajout input[type=submit]:hover { outline-color: #40444e; } .pgc_tab { border-collapse: collapse; width: 100%; } .pgc_tab td { border: 1px solid var(--gr-1); padding: .5rem; width: 50%; } .pgc_tab td:first-child { background-color: #ecf7f8;} .btn-radius {border-radius: var(--radius) !important; } .pgc_chiens, .pgc_chiots, .pgc_purina { position: relative; display: flex; flex-wrap: wrap; border-radius: .5rem; padding: .5rem; gap: .5rem .25rem; } .pgc_chiens .int, .pgc_chiots .int { display: flex; align-items: center; color: #FFF; font-size: 1.4rem; } .pgc_purina .int { margin : auto; padding : .5em} .pgc_purina .int img { height: 40px } .pgc_purina .kit-flx { display: flex; flex-direction: column; gap: var(--md);} .pgc_purina .kit-flx select { width: min-content;} .pgc_chiens { background-color: hsl(203deg 80% 51%); ;} .pgc_purina { background-color:rgb(0, 0, 0); color:#707070 ;} .pgc_chiots-valid { background-color: hsl(329deg 100% 63%); } .pgc_chiots div img, .pgc_chiens div img {width: 200px; } .pgc_img_valid {background : url("/media/v4/pgc_img_valid.png") no-repeat 50% 50% ; } .pgc_img_invalid {background : url("/media/v4/pgc_img_invalid.png") no-repeat 50% 50% ; } .pgc_ic_valid { background : url("/media/v4/pgc_ic_valid.png") no-repeat 50% 50% ; } .pgc_ic_invalid {background : url("/media/v4/pgc_ic_invalid.png") no-repeat 50% 50% ; } .pgc_img_valid, .pgc_img_invalid { background-size: contain; width: 35px; height: 38px; margin: 0 0.5rem 0 0.2rem; border-radius: 50%; background-size: cover ; } .pgc_ic_valid, .pgc_ic_invalid { width: 20px; height: 15px; } .pgc_cc {background : url("/media/v4/pgc_ic_cc.png") no-repeat 50% 50%; width: 283px; height: 56px; margin: 1rem auto 1rem;} .pgc_cav { padding: 1rem; border-radius: var(--radius); background-color: #ffffff; font-size: .9em; width: 100%; } .pgc_cav .int_purina {color: #CC0000; font-weight: bold; font-size: 1rem; margin-bottom: .75rem; } .pgc_cav .pgc_activ, .pgc_cav .pgc_cadre, .pgc_cav .pgc_vignette { margin-bottom: 0.5rem; display: flex; align-items: center; gap : .5rem } .peuxplus { font-size: .8rem; text-align: center; color :#cf7f7f;} .pgc_fl_promo { display: flex; gap:1rem; padding: 1rem; margin-bottom: 1rem;} .pgc_parents { background-color: #ecf7f8; padding: 0.5rem; } @media (max-width: 1500px) { .pgc_nom { width: 120px; font-size: 1rem;} .pgc_box_chiots { flex-direction: column; gap: 0; } .pgc_box_chiots-d { flex-wrap: wrap; position: relative; width: auto; background-color: #29b3c3; border-radius: 0 0; padding: 1.5rem 1rem .5rem 1rem ; justify-content: center; border: 0; } .pgc_box_chiots-g > div:last-child { display: flex; align-items: center;} .pgc_vig_reservation { height: 35px; left: calc(50% - 17.5px); width: 35px; top: -8px; background-size: 40%;} .pgc_box_chiots-d .pgc_boxy { max-width: 200px; } .pgc_box_chiots-g a { margin: 0rem;} } @media (max-width: 1300px) { .flex-vid { flex-direction: column } #page_box, #page_box_full { padding: 1.5rem; } } :root { --bg-valid: hsla(107,93%,33%,1.00); --bg-valid-h: hsla(107,93%,25%,1.00); } .resa-w {max-width: 1200px;} .type-file {text-align: center;} .none {display: none;} .btn-faq { font-weight: bold; display: flex; position: relative; gap:.5rem; align-items: center; cursor : pointer; border : 0; max-width: fit-content; border-radius : 8px; padding:1rem 90px 1rem 1rem; border:2px solid #29b3c3; transition: .1s ease-in-out;} .btn-faq::after { position: absolute; right: 0; bottom: -2px; width: 90px; height: 100px; background: url(/media/v4/min-img-faq.png) no-repeat 0 0; content: ''; display: block; background-size: contain;} .btn-faq:hover { border-color:#572c02; box-shadow: 0 0 10px rgb(0 0 0 / 33%); } .btn-annoncer { cursor : pointer; border: 0; min-width: fit-content; border-radius : 8px; font-size : 1.4em; padding:1rem 1.8rem ;color : #FFF; background-color:#ff7e00; transition: .1s ease-in-out;} .btn-annoncer:hover { background-color:#d86c01; } .flex-annonce { display: flex; gap: 1rem; } .flex-annonce > div { flex: 1 1;} .btn-v4 { padding: .75rem 2rem; border-radius: .5rem; font-size: 1.1rem; cursor: pointer } .btn-v4:hover { border-color : #000; } .aliment-color option { color: #3db3a9; } .aliment-color option:nth-child(-n + 4) { color: #65ad34; } .aliment-color option:nth-child(5) { color: #d47f8b; } input[type="text"]:disabled { border: 0; box-shadow: none; padding: 0; font-size: 1rem; background-color: transparent; } .box-resa-bg-1, .box-resa-bg-2 , .box-resa-bg-3, .box-resa-bg-4, .box-resa-bg-5 { /*background-color: hsl(186deg 96% 36%)*/ border : 1px solid hsl(186deg 96% 36%)} .box-resa-bg-fida { background-color: #b7c6e5} .box-resa-bg-supp { min-height: auto } .box-resa-bg-supp .box-resa-action { padding: 0; margin: auto;} .box-resa-info-ut .nom { font-weight: bold; margin-bottom: .2rem; } .box-resa-info-ut .naissance { font-size: .8rem; color : #0b5c8e; margin-bottom: .5rem; } .box-resa-info-ut .tel, .box-resa-info-ut .mail { display: flex; align-items: center; margin-bottom: .5rem; width: 400px ; } .box-resa-info-ut .tel span, .box-resa-info-ut .mail span { display: flex; align-items: center; justify-content: center; font-size: 16px; margin-right: .5rem; border-radius: 50%; width: 25px; height: 25px; border: 2px solid #CCC; color: #0e7abe; } .box-resa-sign { background-color: var(--gr-0); padding: 20px; margin-bottom: 1rem; border-radius: .5rem; display: flex; align-items: center; gap: 1rem; } .box-resa-dl { display: flex; align-items: center; gap: 1rem; border-radius: .5rem; border : 2px solid var(--bg-valid); padding: .5rem; color: var(--bg-valid-h); text-decoration: none; } .box-resa-choix { display: flex; gap: 1em; } .box-resa-choix > div { border : 1px solid hsl(186deg 96% 36%); border-radius: 1em; padding: 1em; width: 50%; } .box-resa-txt-disable { padding: 1em 0 0 0; color : #CC0000; text-align: center;} .disabled { opacity: .5 } #lien_reservation, #lien_vente { word-break: break-all; font-size: .8em; color: hsl(186, 85%, 22%); border: 2px solid hsl(186deg 96% 36%); text-align: center; padding: 1rem; background-color: #FFF; border-radius: .5rem; margin-bottom: 1rem;} #copy_link {display: flex; align-items: center; margin: auto; gap: .5rem; border-radius: .5rem; border : 0; padding: .5rem 1rem; color: #FFF; background-color: var(--bg-valid); text-decoration: none; cursor: pointer; min-width: auto; } #copy_link:hover { background-color: var(--bg-valid-h); } .emailrenvoiresa { font-size: .8em; color: #228008; text-align: center; margin-top: 5px; } .box-resa-dl:hover { border : 2px solid var(--bg-valid-h); color: var(--bg-valid); background-color: #ecffe7; } .form-label-res, .form-label-res-s { font-size: 1rem; width: 100%; } .form-label-res { margin-bottom: 1.2rem; } .form-radio, .form-checkbox { display: flex; flex-wrap: wrap; gap: 1rem; width: -webkit-fill-available; width: -moz-available; } .form-radio [type=checkbox], .form-radio [type=radio], .form-checkbox [type=checkbox], .form-checkbox [type=radio] { display: none; } .form-radio span::before, .form-checkbox span::before { content: "radio_button_unchecked"; font-size: 22px; opacity: .3; } .form-radio [type=radio]:checked+label span::before, .form-checkbox [type=checkbox]:checked+label span::before { content: "check_circle"; opacity: 1; } .form-radio label, .form-checkbox label, .form-file input[type=file]+label { position: relative; display: flex; align-items: center; gap: .5rem; padding: .25rem 1rem .25rem .25rem ; border-radius: var(--radius); cursor: pointer; text-align: center } .form-radio label:hover, .form-checkbox label:hover, .form-file input[type=file]:hover+label { border-color : rgb(7, 72, 112) !important; transition: .1s ease-in-out; } .listes-champs.webinar-champs .form-radio {position: relative; } .webinar-form { max-width: 100% } .webinar-flex { display: flex; gap: 1rem; justify-content: center } .webinar .title {font-weight: bold; margin-bottom: .5rem;} .webinar .description {margin-bottom: 1rem;} .form-radio .session .date { font-size: 1.2em; font-weight: bold; } .form-radio .session .heure { font-size: 1.2em; margin-bottom: .25em; color: #44656b} .form-radio .session .description { font-size: 1em; text-align: left; color: #44656b;padding:5px;} .form-radio .session .webinar-ok { position: absolute; top: 4px; right: 4px; background: var(--bg-valid) url(/media/v4/i-valid-blanc.png) no-repeat 50% 50%; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #ffffff98; background-size: 60%; } .webinar-champs .form-radio [type=radio]:checked+label .heure { color: #000;} .webinar-champs .form-radio [type=radio]:checked+label .titre { color: #000;} .session-textarea { height: 90px; width: 100%; border-radius: 0.25em; } .box-resa-affich:last-child { margin-bottom: 0;} .box-resa-affich .int { margin-bottom: 1rem; } .box-resa-affich .sint, .box-resa-action .sint { margin-bottom: 0.5rem; color: #0b5c8e; font-size: .7rem; font-weight: bold; text-transform: uppercase; } .box-resa input[type=email], .box-resa input[type=number], .box-resa input[type=date], .box-resa select, .box-resa textarea, .box-resa input[type=text] { border-radius: 0.2rem; border: 1px solid #c4d5e2; box-shadow: none; background-color: aliceblue; font-size: .95rem; font-size: 1rem; } .box-resa input[type=email], .box-resa input[type=number], .box-resa textarea, .box-resa input[type=text] { padding: 10px; } .box-resa input[type=number], .box-resa input[type=date], .box-resa select { padding: 9px; } .nom-file { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; } .form-file input[type=file] { display: none;} /* .form-file input[type=file]+label div { display: inline-flex; gap: .5rem; padding: 1rem; align-items: center; } */ .form-file input[type=file]+label span { color: #fff; border-radius: var(--radius); border : 1px solid hsla(0, 0%, 100%, .4) } @-webkit-keyframes animatedText{0%{background-position:0}to{background-position:100%}} @keyframes animatedText{0%{background-position:0}to{background-position:100%}} .resa-obligatoire { text-align: left; font-size: .6rem; color: hsla(0, 0%, 100%, .8); } #accompte-non {display: none;} .form-gen { display: flex; gap : 0.5rem 0; flex-wrap: wrap; justify-content: space-between; } .box-resa-action-supprimer { color: #FFF; border: 0; border-radius: 0.5rem; padding: 1rem; font-size: 1.1rem; background-color: #CC0000; margin: auto; cursor: pointer; min-width: 150px; } .box-resa-action-supprimer:hover { background-color: #920909; } .form-gen .fc1, .form-gen .fc1 { width: 100%; } .form-gen .fc2, .form-gen .fc2 { width: 48%; } .form-gen .fc1, .form-gen .fc1 { width: 100%; } .form-gen .fc3, .form-gen .fc3 { width: 32%; } .form-gen .fcplus, .form-gen .fcplus { width:66% } .f-affiche { background-color: #e6f5ff; border-radius: 0.5rem; padding: .75rem; min-height: 1rem; } #expirationDate { color : #CC0000; font-size: .9em ; border: 1px solid rgb(233, 159, 159); padding: .5rem; border-radius: .2rem; display: inline-flex; justify-content: center; } .form-gen-tab { width: 100%;} .form-gen-tab tr td { width: 25%; padding: .5rem; } .form-gen-tab tr td:nth-child(2n+1) { background-color: hsl(203deg 57% 55%); color: #ffffff;} .form-gen-tab tr td:nth-child(2n+0) { border: 1px dashed #b4d0e2;} .mb-xs { margin-bottom: .25rem; } .mb-sm { margin-bottom: .5rem; } .mb-md { margin-bottom: 1rem; } .mb-lg {margin-bottom: 2rem; } .mb-xl {margin-bottom: 3rem; } .mt-xs { margin-top: .25rem; } .mt-sm { margin-top: .5rem; } .mt-md { margin-top: 1rem; } .mt-lg {margin-top: 2rem; } .mt-xl {margin-top: 3rem; } .mr-xs { margin-right: .25rem; } .mr-sm { margin-right: .5rem; } .mr-md { margin-right: 1rem; } .mr-lg {margin-right: 2rem; } .mr-xl {margin-right: 3rem; } .ml-xs { margin-left: .25rem; } .ml-sm { margin-left: .5rem; } .ml-md { margin-left: 1rem; } .ml-lg {margin-left: 2rem; } .ml-xl {margin-left: 3rem; } .adm-leg-id .afaire, .adm-leg-id .attente, .adm-leg-id .refus, .adm-leg-id .valide { display: flex; gap: 2px; color: #fff!important; width: fit-content; align-items: center; cursor: help; padding: 4px 10px ; border-radius: 2rem; } .adm-leg-id .afaire { background-color: #CC0000; } .adm-leg-id .attente { background-color: #007acc; } .adm-leg-id .refus { background-color: #CC0000; } .adm-leg-id .valide { background-color: hsla(107,93%,25%,1.00); } .adm-leg-id svg { fill : #FFF} /* PAGE CHOIX OPTIONS PAIEMENTS */ .opt-tab { display: flex; flex-direction: column; max-width: 1000px; margin: 0 auto 1rem auto } .opt-tab .opt-ligne { position: relative; padding: 1rem 2rem; margin-bottom: 1rem; background-color: #ecf4f4; border-radius: .25rem; display: flex; align-items: center; gap: 1rem; } .opt-tab .opt-ligne:hover { background-color: #dde8e8; } .opt-tab .opt-ligne.mb0 { margin-bottom: 0rem; border-radius: .5rem .5rem 0 0 } .opt-ligne .opt-check { width: 10%; flex-shrink: 0; text-align: center } .opt-ligne .opt-prix { width: 20%; flex-shrink: 0; text-align: center } .opt-site { max-width: 1000px; margin: auto; margin-bottom: 1rem } .opt-ligne .opt-info { flex-grow: 1; font-size: .9em;; } .opt-ligne .opt-info > span:last-child { color: var(--primary) } .opt-ligne .opt-info > span:last-child a { color: var(--primary); text-decoration: underline; } .opt-ligne .opt-info p:first-child { font-size: 1rem; } .opt-fida { display: block; width: 90px; background-color: #FFF; padding: 0.25rem; border-radius: var(--radius); text-align: center; flex-shrink: 0; } .opt-fida img{ width: 90% } .opt-icone { position: relative; display: flex; margin-bottom: 1rem; border: 6px solid #ecf4f4; border-top: 0; gap: 0.5rem; flex-wrap: wrap; border-radius: 0 0 .5rem .5rem; padding: 1rem; justify-content: center; } .opt-icone [type="radio"] { display: none } .opt-icone .icone_box label { width: 40px; background-color: #FFF; outline: 1px solid rgb(187 211 245); border-radius: 50%; padding: .25rem; cursor: pointer; display: flex; flex-direction: column } .opt-icone .icone_box [type="radio"]:checked+label { outline: 3px solid #2AB009 } .sansprix { color: #000000; outline: 1px solid #b1caca } .opt-icone .triangle-code { top: 0px; position: absolute; display: inline-block; height: 0; width: 0; border-top: 10px solid #ecf4f4; border-right: 10px solid transparent; border-left: 10px solid transparent; } .affprix, .sansprix { border-radius: .5rem; height: 50px; display: flex; align-items: center; justify-content: center; background-color: #FFF; font-size: 1rem; } .affprix { font-size: 1.2rem; } .prixpts, .opt-total, .opt-ligne .affprix, .opt-ligne .opt-total { color: #3bbe1c; font-weight: bold } .opt-lignetotal { flex-direction: column; border: 1px dashed #CCC; display: flex; justify-content: center; align-items: center; border-radius: .5rem; padding: 1rem; max-width: 1000px } .opt-lignetotal .opt-total { font-size: 1.2rem; border: 1px solid #CCC; padding: .75rem 2rem; border-radius: .5rem; text-align: center } .opt-total input[type=text] { font-size: 1.2rem; } .prixpts { padding: 0 5px !important; font-weight: bolder; text-align: right; border: 0 !important; box-shadow: none !important; margin: 0; } .opt-purina { display: flex; overflow: hidden; align-items: center; max-width: 1000px; margin: 0 auto 2rem; border-radius: 0.5rem; text-align: center; border: 1px solid #2d2d2d } .opt-purina div:first-child { min-width: 250px; background-color: #2d2d2d; color: #FFF; font-weight: bold } .opt-purina div:last-child {} .opt-purina div { padding: 1rem; } .ofpar { font-size: .9rem; margin-bottom: .25rem } .opt-action { text-align: center; margin: 0 auto 2rem auto } .opt-action .bton { border-radius: 1rem !important; max-width: 240px } .bton-checkbox label span { width: 35px; height: 35px; border-radius: 50%; display: none; direction: none; box-shadow: none; border: 0px !important; background: #d4e6e8 url(https://eleveurs.chiens-de-france.com/media/v4/i-fleche-d-blanc.png) no-repeat 50% 50% } .bton-checkbox input:checked+span { display: block } .opt-tab label { cursor: pointer } @media screen and (max-width : 1100px) { .page_gestion_chiots { gap: .5rem;} .pgc_d { padding-left: .5rem;} }