@charset "utf-8";
:root {
--rev-white : #FFF;
--rev-black : #000;
--color-info : #0e7d91;
--color-warning : #d87213;
--color-alert : #cc0000;
} 


label { cursor: pointer;}
.wmax {width : -webkit-fill-available; width : -moz-available; }
.btn, .bton { font-size: 1rem; padding:  .75rem 1rem; text-align: center; text-decoration: none; display: inline-flex; gap: .5rem; justify-content: center; align-items: center; transition: 0.2s; border-radius: .25rem; cursor: pointer }
.btn-moyen, .bton-moyen { padding: .4rem; font-size: .85em; letter-spacing: -0.1px; text-align: center; text-decoration: none; display: inline-block; transition: 0.2s; border-radius: 2px; cursor: pointer }
.bout-admin, .bton-mini { padding: .25rem .4rem; font-size: .8em; letter-spacing: -0.1px; text-align: center; text-decoration: none; display: inline-block; transition: 0.2s; border-radius: 2px; cursor: pointer }
.bout-admin, .bton-admin { width:min-content;display: flex; justify-content: center; align-items: center; padding: .5rem 1rem; color: #000; border-radius: .25rem; color: #FFF;    border: 0;    background: rgb(160 0 148);    font-size: .7rem; cursor: pointer;    text-transform: uppercase;}
.bout-admin:hover, .bton-admin:hover {background: rgb(173, 67, 165)}
.btn-off { color: #888888;    border: 1px solid #e3e3e3;    cursor: auto;    background: rgb(239 239 239);    background: -webkit-linear-gradient(rgba(255,255,255,1) 0%, rgb(231 231 231) 100%);}
.bout-admin:active,
.bton-admin:active { border: 1px solid #259eac }
.btn-gris, .bton-gris {  color: #000; border: 1px solid #ccc; 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-gris:active, .bton-gris:active { border: 1px solid #259eac }
.bton-disable { color: #ccc; border: 1px solid #EDEDED; background: rgb(255,252,252); background: -webkit-linear-gradient(rgba(255,252,252,1) 0%, rgba(233,233,233,1) 100%); background: -o-linear-gradient(rgba(255,252,252,1) 0%, rgba(233,233,233,1) 100%); background: linear-gradient(rgba(255,252,252,1) 0%, rgba(233,233,233,1) 100%); }
.bton-gris:active { border: 1px solid #EDEDED }
.bton-pdf { color: #000; border: 1px solid #ccc; background: url("https://eleveurs.chiens-de-france.com/media/icone-pdf.png") no-repeat 3px 3px, linear-gradient(rgba(255,252,252,1) 0%, rgba(233,233,233,1) 100%); }
.bton-pdf:active { border: 1px solid #259eac }
.btn-red,
.bton-rouge { color: #000; border: 1px solid #db7171; background: rgb(255,234,234); background: -webkit-linear-gradient(rgba(255,255,255,1) 0%, rgba(255,234,234,1) 100%); background: -o-linear-gradient(rgba(255,255,255,1) 0%, rgba(255,234,234,1) 100%); background: linear-gradient(rgba(255,255,255,1) 0%, rgba(255,234,234,1) 100%); }
.btn-red:active,
.bton-rouge:active { border: 1px solid #ff1800 }
.btn-green,
.bton-vert { color: #000; border: 1px solid #5fc100; background: rgb(197,233,161); background: -webkit-linear-gradient(rgba(255,255,255,1) 0%, rgba(197,233,161,1) 100%); background: -o-linear-gradient(rgba(255,255,255,1) 0%, rgba(197,233,161,1) 100%); background: linear-gradient(rgba(255,255,255,1) 0%, rgba(197,233,161,1) 100%); }
.btn-green:active,
.bton-vert:active { border: 1px solid #8ed449 }
.btn-blue,
.bton-bleu { color: #000; border: 1px solid #5eb6d3; background: rgb(200,240,240); background: -webkit-linear-gradient(rgba(255,255,255,1) 0%, rgba(200,240,240,1) 100%); background: -o-linear-gradient(rgba(255,255,255,1) 0%, rgba(200,240,240,1) 100%); background: linear-gradient(rgba(255,255,255,1) 0%, rgba(200,240,240,1) 100%); }
.btn-blue:active,
.bton-bleu:active { border: 1px solid #00efff }
.bton-gris:hover,
.bton-rouge:hover,
.bton-vert:hover,
.bton-bleu:hover,
.bton-pdf:hover { border-color: #666; }
.btn-rose,
.bton-rose { color: #000; border: 1px solid #db7171; background: rgba(255,234,242,1.00); background: linear-gradient(rgba(255,255,255,1) 0%, rgba(255,165,195,1.00) 100%); }
.btn-rose:active,
.bton-rose:active { border: 1px solid rgba(228,114,152,1.00) }
.btn-rose:hover,
.bton-rose:hover { border: 1px solid rgba(184,47,93,1.00) }
.bton-finform { text-align: center; padding: 10px 0 20px 0 }
input::placeholder {color: #808080;}
textarea,
input[type=text],input[type=number],input[type=password],select { display: inline-block; border: 1px solid #ccc; box-shadow: inset 0 1px 3px #ddd; border-radius: 2px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding : .6rem;   }
input.error { border: 1px solid red; }
.champs { margin: auto 10px; display: inline-block; }
.aucun { margin: auto; padding: 40px 0 !important; background-color: var(--gr-0); color : var(--gr-2); text-align: center; margin-bottom: 20px }
.aucun-mini { margin: auto; padding: 10px 0 !important; background-color: #F4F4F4; text-align: center; margin-bottom: 10px }
.tab-form { 
    background-color: #c4e3e6; 
    background-color: color-mix(in oklab, var(--primary) 30%, #FFF 70%);
    padding: 5px; width: 100%; border-spacing : 1px; border-collapse: separate; margin-bottom: 10px }
.tab-form tr th { background-color: #dbeeee; padding: 10px 15px; font-size: 1.1em; text-align: left }
.tab-form tr td { background-color: #fff; padding: .75rem; vertical-align: middle;}
 
.tab-form tr td:nth-child(odd) { padding: calc(7px + .75rem) 15px; vertical-align: top; text-align: right; background-color: #f4fafa  ; color: #4d4d4d; font-weight: bold; } 
.tab-form-champs { vertical-align: top; text-align: right; background-color: #f4fafa  ; color: #4d4d4d; font-weight: bold; }
.tab-form tr td:first-child .txt-mini, .tab-form-champs  .txt-mini {font-weight: normal; }
.tab-form-img { position: relative }
.tab-form-img img { height: 40px; padding: 1px }
.tab-form-langue { background-color: rgba(255,255,255,.7); padding: 5px; width: 100%; border-spacing : 1px; border-collapse: separate; }
.tab-form-langue tr th { background-color: rgba(255,255,255,.5); padding: 10px 15px; font-size: 1.2em; text-align: left }
.tab-form-langue tr td { background-color: rgba(255,255,255,.3); padding: 10px 15px; }
.tab-form-langue tr td:first-child { vertical-align: top; text-align: right; }

.tab-form .frequence { font-size: 12px; font-weight: normal; margin-bottom: .25rem; }

.tab-precis tr td { background-color: #fff; padding: 5px 8px;     vertical-align: middle;}
.tab-precis tr td:first-child { padding: calc(5px + .6rem) 18px;}

.a-img { padding: 5px; border: 1px solid #EFEFEF; display: inline-block; background-color: #FFF; text-align: center }
.a-img img { max-height: 80px; max-width: tab-form-langue80px; }
.top,.vtop { vertical-align: top }
.vmiddle { vertical-align: middle }
.vbottom { vertical-align: bottom }

.msg { 
    text-align: center;
    padding: 1.5rem 0;
    border-radius: 0.25rem;
    margin: 0 0 2rem 0;
    background-color: #d9efd5;
    border: 1px solid #b3deab;
    color: #062c01;
    background-color: color-mix(in oklab, var(--valid) 20%, #FFF 80%);
    border: 1px solid color-mix(in oklab, var(--valid) 40%, #FFF 60%);
    color: color-mix(in oklab, var(--valid) 40%, #000 60%);
    font-size: 1.2em; 
    margin: 0 auto 2rem;
}

.msg-ok { text-align: center;  padding: 1.5rem 1rem; border-radius: .5rem; margin: 0 auto 1rem auto; font-weight: bold; color: #28a206; font-size: 1.6em; }

.alerte { background-color: #a70606 !important; border: 1px solid #a70606 !important; color:#FFF !important; font-size: 1.2em; }
.alerte-resa { text-align: center; padding: 1.5rem 1rem; border-radius: .5rem; margin: 0 auto 2rem auto; color: #fff; background-color: #a70606;font-size: 1.2em; } 

.attention-chiot-age, .alerte-chiot-age { font-weight: bold; position: relative; text-align: center; margin-bottom: 2rem;  padding: 1.5rem .75rem ; border-radius: .25rem; }
.attention-chiot-age span, .alerte-chiot-age span { position: absolute; display: flex; justify-content: center; align-items: center; height: 24px; width: 24px; top: -14px; left: calc(50% - 12px); background-color: #FFF; border-radius: 50%; }
.attention-chiot-age span svg, .alerte-chiot-age span svg { height: 20px; width: 20px; }

.alerte-chiot-age { border: 2px dashed #d64a4a;}
.alerte-chiot-age span { border: 2px solid #d64a4a;}
.alerte-chiot-age span svg { fill: #a70606; }

.attention-chiot-age { border: 2px dashed #9bd0d6;}
.attention-chiot-age span { border: 2px solid var(--primary);}
.attention-chiot-age span svg { fill: var(--primary);  }


.attention { color: #CC0000; font-weight: bold }
.txt-mini { font-size: .8em; }
.txt-gris { color: #259eac; }
.txt-vert { color: #4f9f02; }
.txt-blanc { color: #FFF; }
.txt-rouge { color: #CC0000 }
.txt-bleu { color: #5eb6d3; }
.txt-bleufonce { color: #017297; }
article { margin-bottom : 30px }
.important {     
    padding: 20px;
    margin-bottom: 10px;
    border: 2px solid #c5c5c5;
    text-align: center;
    color: #c00000;
    font-weight: bold;
    margin-bottom: 2rem;
    font-size: 1.1rem; 
}

/* LOADER */
.loader{ width: 16px;height: 16px;border-radius: 100%;position: relative;margin: 0 auto;} 
#loader-1:before, #loader-1:after{content: "";position: absolute;top: -10px;left: -10px;width: 100%;height: 100%;border-radius: 100%;border: 8px solid transparent;border-top-color: var(--primary);}
#loader-1:before{z-index: 100;animation: spin 1s infinite;}
#loader-1:after{border: 8px solid #9bd0d6;  }
@keyframes spin{
    0%{
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100%{
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.info { display: block; align-items: center; gap: .5vw; padding: .5vw; margin-bottom: 1.25rem;  border: 2px solid;   border-radius: .25rem; line-height: 1.20rem; width: -webkit-fill-available; width: -moz-available; }

.box-info, .box-warning, .box-alert{ display: flex;  box-sizing: border-box; align-items: center; gap: .5vw; padding: .5vw; margin-bottom: 1.25rem;  border: 2px solid;   border-radius: .25rem; line-height: 1.20rem; width: -webkit-fill-available; width: -moz-available; }
.box-info::before, .box-warning::before, .box-alert::before { width: 20px; height: 20px;  mask-size: 20px;-webkit-mask-size: 20px; display: block; flex-shrink: 0; content : "";    background-repeat: no-repeat; background-size: contain;    }
.box-info::before       { background-color: var(--color-info); -webkit-mask-image: url(/media/v4/ic-info.svg); mask-image: url(/media/v4/ic-info.svg) }
.box-warning::before    { background-color: var(--color-warning); -webkit-mask-image: url(/media/v4/ic-warning.svg); mask-image: url(/media/v4/ic-warning.svg) }
.box-alert::before      { background-color: var(--color-alert); -webkit-mask-image: url(/media/v4/ic-alert.svg); mask-image: url(/media/v4/ic-alert.svg) }

.box-info.sm, .box-warning.sm, .box-alert.sm, .info.sm { gap: .5rem; padding: .5rem; margin-bottom: 1rem;  }
.box-info.md, .box-warning.md, .box-alert.md, .info.md { gap: .5vw; padding: .5vw; margin-bottom: 1.5rem;  }
.box-info.lg, .box-warning.lg, .box-alert.lg, .info.lg { gap: 1vw; padding: 1vw; margin-bottom: 2rem; font-size: 1.05rem; }

.box-info.sm::before, .box-warning.sm::before, .box-alert.sm::before    { --size : 20px; width:var(--size); height:var(--size);  mask-size:var(--size);-webkit-mask-size:var(--size); }
.box-info.md::before, .box-warning.md::before, .box-alert.md::before { --size : 30px; width:var(--size); height:var(--size);  mask-size:var(--size);-webkit-mask-size:var(--size); }
.box-info.lg::before, .box-warning.lg::before, .box-alert.lg::before     { --size : 40px; width:var(--size); height:var(--size);  mask-size:var(--size);-webkit-mask-size:var(--size); }

.box-info, .info { 
    background-color: #f4f8f9;            
    border-color    : #c9dee3;
    background-color: color-mix(in oklab, var(--color-info) 5%, var(--rev-white) 95%);                
    border-color    : color-mix(in oklab, var(--color-info) 25%, var(--rev-white) 75%);
}
.box-warning     { 
    background-color: #fef8f4;            
    border-color    : #f8dcca;
    background-color: color-mix(in oklab, var(--color-warning) 5%, var(--rev-white) 95%);            
    border-color    : color-mix(in oklab, var(--color-warning) 25%, var(--rev-white) 75%);
}
.box-alert       { 
    background-color: #fff5f3;            
    border-color    : #e06051;
    background-color: color-mix(in oklab, var(--color-alert) 5%, var(--rev-white) 95%);            
    border-color    : color-mix(in oklab, var(--color-alert) 75%, var(--rev-white) 25%);
}


 


@media (max-width: 1000px) {
    .header-menu .menu .bouton  { padding: 5px 1vw;}
}

.condition { background-color: #F4F4F4; display: block; padding: 20px; margin-bottom: 10px; border: 1px solid #efeeee; overflow: auto; max-height: 300px }
.obligatoire,
h1,
h2,
h3,
h4 { margin: 0 0 10px 0; font-weight: bold; padding: 0 }
h1, #nom_rub { font-size: clamp(1.15rem,2vw,1.3rem);; border-bottom: 1px solid #eee; padding-bottom: 20px; margin-bottom: 30px; text-transform: uppercase;  }
h2 { font-size: 1.2em; color: #04a2b3; padding: .5rem 0;}
h3,
h4 { font-size: 1em }
.h1-top, #nom_onglet { display: none; color: #04a2b3; font-size: .8em; text-transform: uppercase;   }
.g { font-weight: bold }
.u { text-decoration: underline; }
.block { display: block }
.flex, .flex-between { display: flex }
.flex-align-center { align-items: center;}
.flex-direction-column {flex-direction: column;}
.flex-grow-1 {flex-grow: 1;}
.flex-start { display: flex; justify-content: flex-start }
.flex-end { display: flex; justify-content: flex-end }
.flex-wrap, .flexwrap { flex-wrap: wrap }
.flex-between { justify-content: space-between }
.flex-start { justify-content: flex-start }
.flex-center { justify-content: center }
.flex-gap-05 { gap: .5rem;}
.flex-gap-1 { gap: 1rem;}
.flex-gap-2 { gap: 2rem;}
.flex-shrink { flex-shrink: 0;}
.none { display: none }
.border { border: 1px solid #000 }
.center { text-align: center; }
.margin-auto { margin: auto;}
.auto { margin: auto }
.w100 { width: 100% }
.w75 { width: 75% }
.w50 { width: 50% }
.w49 { width: 49% }
.w45 { width: 45% }
.w40 { width: 40% }
.w25 { width: 25% }
.w10 { width: 10% }
.h25 { height: 25px }
.h50 { height: 50px }
.mt5 { margin-bottom: 5px; }
.mt10 { margin-bottom: 10px; }
.mt20 { margin-bottom: 20px; }
.mb5 { margin-bottom: 5px; }
.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mr5 { margin-right: 5px; }
.mr10 { margin-right: 10px; }
.mr20 { margin-right: 20px; }
.tab { border-collapse: collapse; width: 100%; margin-bottom: 20px; }
.tab th,
.tab td { padding: 8px 15px; border: 1px solid #CCC; vertical-align: top; }
.tab th { background-color: #F4F4F4; text-align: left; } 
.tab .btn { padding: 5px 10px; }
.tab select,
.tab textarea,
.tab input { padding: 5px; }
.tab textarea { width: 100%; min-height: 120px; }
.tab p { margin-bottom: 5px; }
.tab .int { background-color: #F0F0F0; text-align: right; padding-right: 10px; }
.tab .a-bouton { display: block; padding: 5px 0; }
.tab .a-bouton:hover { background-color: #ccc; }
.tab0 { border-collapse: collapse; width: 100%; margin-bottom: 20px; }
.tab0 th,
.tab0 td { padding: 8px 15px; vertical-align: top; }
.cadre { border: 1px solid #CCC; padding: 20px; margin-bottom: 10px; }
.tab-liste { border-spacing : 2px; width: 100%; margin-bottom: 20px; }
.tab-liste th,
.tab-liste td { background-color: #F4F4F4; padding: 8px 15px; border: 0px solid #CCC; }
.tab-liste th { background-color: #F4F4F4; text-align: left; } 
.tab-liste .int { background-color: #F0F0F0; text-align: right; padding-right: 10px; }
.tab-liste .a-bouton { display: block; padding: 5px 0; }
.tab-liste .a-bouton:hover { background-color: #ccc; }
.cursor {cursor: pointer;}

/* The switch */ 
.switch {  position: relative;    display: inline-block;    width: 69px;    height: 31px;  flex-shrink: 0;   }
.switch input {  display: none; }
.switch .slider { position: absolute; display: flex; align-items: center;cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgb(232 232 232);    transition: .4s;    border-radius: 2rem;    }
.switch .slider:before { position: absolute;    content: "";    height: 1.4em;    width: 1.4em;    border-radius: 50%;    left: 0.3em;    bottom: 0.3em;    transform: rotate(270deg);    background-color: rgb(255, 255, 255);    transition: .4s;    }
.switch input:checked + .slider {    background-color: #21cc4c;    }
.switch input:focus + .slider {    box-shadow: 0 0 1px #2196F3;    }
.switch input:checked + .slider:before {    transform: translateX(2.5em);    }
.switch .slider::after { content: "Non"; font-weight: normal;  display: block; padding-left :1.85rem; color: #000;  }
.switch input:checked + .slider::after { content: "Oui"; padding: 0 0 0 .5rem;color: #FFF;  }
  


.button-label { display: inline-block; padding: 5px 12px; margin-right: 10px; cursor: pointer; color: #292929; border-radius: 0.25em; border: 1px solid #ddd; background: #efefef; transition: 0.3s; user-select: none; }
.button-label:hover { background: #d6d6d6; color: #101010; }
.button-label:active { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0px -1px 0 rgba(0, 0, 0, 0.22); }
#yes-button:checked + .button-label { background: #2ecc71; color: #efefef; }
#yes-button:checked + .button-label:hover { background: #29b765; color: #e2e2e2; }
#no-button:checked + .button-label { background: #2ecc71; color: #efefef; }
#no-button:checked + .button-label:hover { background: #29b765; color: #e2e2e2; }
.yes-male:checked + .button-label { background: #20a3bb; color: #efefef; }
.yes-male:checked + .button-label:hover { background: #20a3bb; color: #e2e2e2; }
.yes-femelle:checked + .button-label { background: #ef278f; color: #efefef; }
.yes-femelle:checked + .button-label:hover { background: #ef278f; color: #e2e2e2; }
.hidden { display: none; }
.i-valid { display: inline-block; width: 16px; height: 14px; background : url("https://eleveurs.chiens-de-france.com/media/v4/i-valid.png") no-repeat 0 0; }
.i-pdf { display: inline-block; width: 49px; height: 49px; background : url("https://eleveurs.chiens-de-france.com/media/v4/i-pdf.png") no-repeat 0 0; }
.i-calendrier { display: inline-block; width: 20px; height: 24px; background : url("https://eleveurs.chiens-de-france.com/media/v4/i-calendrier.png") no-repeat 0 0; }
.i-lectvid {   background : url(/media/v4/i-lectvid.svg) no-repeat top center; background-size: contain; width: 25px; height: 25px; flex-shrink: 0; }
.i-warning { display: inline-block;  background : url(/media/v4/i-warning.png) no-repeat top center; background-size: contain; width: 25px; height: 25px; flex-shrink: 0; }
.form-gen-info { display: flex; gap: 1em; border-radius: 1em; background-color: #f0f8ff; color: #2a3f52 ; padding: .5em 1em; align-items: center; font-size: .85em;}