/* latin-ext */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'), url(roboto-ex.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    font-display: swap;
}
/* latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'), url(roboto.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    font-display: swap;
}
/* latin-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url(opensans-ex.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    font-display: swap;
}
/* latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url(opensans.woff2) format('woff2');
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    font-display: swap;
}

td, html, body {
    font-family: 'Segoe UI','Open Sans',Calibri,Tahoma,sans-serif;
}

html, body {
    font-size: 14px
}

body {
    min-width: 320px;
    color: #335566;
    background: #eef1f3;
    position: relative
}

p {
    margin-bottom: 0
}

h1 {
    font-size: 26px;
    font-weight: normal;
}
h2 {
    font-size: 26px;
    font-weight: normal;
}

#home .t {
    background: url('images/fond-carte.jpg') no-repeat center center;
    background-size:cover
}
.t {
    background: #fff;
    text-align: center;
    padding:4em 0 8em 0
}
    .t .band {
        background: #fff;
        position: relative;
        margin: 4em auto 0 auto;
        max-width: 50em;
        padding: 3em;
        box-shadow: 0 0 20px 0 rgba(0,20,120,.09);
        border:1px solid #eee;
    }
    .t .band .tac{padding-bottom:2em}

    input[type=date].empty {
        color: transparent;
    }

input[type=date]:focus {
    color: #113f5c;
}

.form-group input {
    font-size: 1.4rem;
    padding: 1px 6px 1px 12px;
    display: block;
    width: 100%;
    height: 45px;
    border: none;
    border-bottom-color: currentcolor;
    border-bottom-style: none;
    border-bottom-width: medium;
    border-bottom: 1px solid #757575;
}
#filterByName {
    position:relative
}
.highlight {
    position: absolute;
    height: 60%;
    width: 100px;
    top: 25%;
    left: 0;
    pointer-events: none;
    opacity: 0.5;
}

.form-group label {
    color: #999;
    font-size: 1.4rem;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 10px;
    top: 0.5rem;
    margin: 0;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;

}

.form-group input:focus, .form-group textarea:focus {
    outline: none;
}

.form-group textarea {
    display: block;
    width: 100%;
    border: none;
    font-size: 1.4rem;
    padding: 6px 6px 6px 12px;
    border-bottom: 1px solid #757575;
}

    .form-group input:focus ~ label, .form-group input.not-empty ~ label, .form-group textarea:focus ~ label, .form-group textarea.not-empty ~ label {
        top: -1.4rem;
        font-size: 14px;
        color: #113f5c;
    }
        .navbar-nav .form-group input:focus ~ label, .navbar-nav .form-group input.not-empty ~ label{
            opacity:0
        }


        .bar {
            position: relative;
            display: block;
            width: 100%;
        }

    .bar:before, .bar:after {
        content: '';
        height: 2px;
        width: 0;
        bottom: 1px;
        position: absolute;
        background: #113f5c;
        transition: 0.2s ease all;
        -moz-transition: 0.2s ease all;
        -webkit-transition: 0.2s ease all;
    }

    .bar:before {
        left: 50%;
    }

    .bar:after {
        right: 50%;
    }

.form-group input:focus ~ .bar:before, .form-group input:focus ~ .bar:after, .form-group textarea:focus ~ .bar:before, .form-group textarea:focus ~ .bar:after {
    width: 50%;
}
#divZoneRdV {
    visibility: hidden;
}
#divZoneRdV .dropdown-menu {
    left: 14px;
    top: -3px;
    right: 14px;
    min-width: calc(100% - 20px);
    width: calc(100% - 20px);
}
.btn {
    padding: 0.8rem;
    cursor:pointer
}
.btn-primary {
    background: #50e3c2;
    border-color: #50e3c2;
}
.btn-secondary {
    background: #fb6682;
    border-color: #fb6682;
}
.btn {
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    transition: all 500ms;
    outline:none;
}
.btn:active {
    box-shadow: -1px 2px 10px 3px rgba(0, 0, 0, 0.3) inset
}
.btn svg {
    width: 6px;
    margin: 0 10px;
    left:0;
    top:-1px;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    position: relative;
}
    .btn:hover svg {
        left: 10px;
    }
.navbar-nav {
    background: #fff;
    padding-top:10px;
    box-shadow: 0 0 20px 0 rgba(0,0,0,.1);
    padding-left:1em;
}
.navbar-nav .title{font-size:1.4rem;padding-top:0.5rem;text-align:right}
.chapeau{
    color:#335566;
    padding-bottom:1.2rem;
    padding-left:0.5rem;
}
.dentistes > h1 {
    color: #335566;
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    padding-left: 0.5rem;
}
.chapeau-intro {
    color: #335566;
    padding-bottom: 1.2rem;
    padding-left: 0.5rem;
    margin: 0 0 1rem;
    max-width: 48rem;
}
.random{color:#757575;padding-top:2rem}
.dentistes {
    padding-top: 7rem;
    padding-bottom: 2rem;
}
    .dentistes .structure{font-style:italic;margin-bottom:0}
.card {
    margin-bottom: 1rem;
    transition: all 0.25s linear;
}
@media (min-width: 700px) {
    .card-body {
        display: flex;
        align-items: flex-start
    }
        .card-body .c {
            -webkit-flex: 1 0;
            -ms-flex: 1 0;
            flex: 1 0;
        }

        .card-body .btn {
            -webkit-flex: 0 0 auto;
            -ms-flex: 0 0 auto;
            flex: 0 0 auto;
            margin-left: auto;
            display: inline-block;
        }
    }

@media (max-width: 480px) {
    .navbar-nav .title {
        flex: 0 0 100%;
        width: 100%;
        text-align: center;
        break-after: always;
    }
}
.navbar-nav div {
    align-self: center
}
.navbar-nav .form-group {position:relative;}
.navbar-nav div {
    align-self: flex-start
}
.navbar-nav .d-flex {position:relative;margin:0 auto;flex-flow:row wrap  
}
.navbar-nav .btn {
    margin-right: 1em
}
.navbar-nav .flex-grow-1 {
    flex-flow:row nowrap;display:inline-block
}
.annuaire .a {
    color: #999
}
@media (max-width: 699px) {
    .navbar-nav {
        position: relative
    }
    .annuaire .card-body .btn{
        display:block
    }
    .dentistes{padding-top:1rem}
}

#cities-list,
#names-list {
    display: none;
    position: absolute;
    left: 15px;
    width: 100%;
    max-height: 280px;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 1031;
}
.t #cities-list,
.t #names-list {
    margin-top: -1rem;
}
#names-list .city {
    font-size: 0.9rem;
    color: #666;
}
#cities-list .dropdown-item.suggest-active,
#names-list .dropdown-item.suggest-active {
    background: #e8f0f4;
}
.suggest-match {
    font-weight: 700;
    color: #113f5c;
}
.suggest-empty {
    color: #666;
    cursor: default;
    pointer-events: none;
}
#geolocate svg { width: 20px; margin: 0; }
#geolocate:hover svg {
    left: 4px;
}
#geolocate:hover svg path {
    fill: #fff !important;
}
#geolocate.is-loading {
    opacity: 0.55;
    pointer-events: none;
}
.geolocate-status {
    color: #c0392b;
    font-size: 0.9rem;
    margin-top: 0.35rem;
    clear: both;
}
#geolocate,
#search {
    height: 3.3em;
}
/* -- Ripple effect -------------------------------- */
.ripple-effect {
    position: relative;
    overflow: hidden;
    -webkit-transform: translate3d(0,0,0);
}

    .ink {
        display: block;
        position: absolute;
        pointer-events: none;
        border-radius: 50%;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0);
        background: #fff;
        opacity: 1;
    }


    @keyframes ripple {
        100% {
            opacity: 0;
            transform: scale(2.5);
        }
    }

    @-webkit-keyframes ripple {
        100% {
            opacity: 0;
            -webkit-transform: scale(2.5);
            transform: scale(2.5);
        }
    }

    @-moz-keyframes ripple {
        100% {
            opacity: 0;
            -moz-transform: scale(2.5);
            transform: scale(2.5);
        }
    }

    @-ms-keyframes ripple {
        100% {
            opacity: 0;
            -ms-transform: scale(2.5);
            transform: scale(2.5);
        }
    }

    @-o-keyframes ripple {
        100% {
            opacity: 0;
            -o-transform: scale(2.5);
            transform: scale(2.5);
        }
    }

    .ink {
        background-color: #fff;
    }

    .btn-primary .ink {
        background-color: #4ba2ff;
    }

    .btn-outline-dark .ink {
        background: #636f7a
    }

    .ink.animate {
        -webkit-animation: ripple .5s linear;
        -moz-animation: ripple .5s linear;
        -ms-animation: ripple .5s linear;
        -o-animation: ripple .5s linear;
        animation: ripple .5s linear;
    }

    .card.hover {
        box-shadow: 0 0 22px rgba(50,51,52,0.25);
        border: 1px solid #fb6682;
    }

    .spe {
        font-weight: bold;
    }

.legal {
    background: #3f4651;color:#fff;font-size:0.9em;padding:3em 0
}
.legal a{color:#fff;text-decoration:none!important;}
@media (max-width: 992px) {
    .legal a {padding: 15px 0;}
    a.page-link {min-height: 48px;min-height: 48px}
}
.tac{text-align:center}
.alt-cities {
    color: #636f7a;
    border-top: 1px solid #757575;
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding-top: 1rem;
    width: 66%
}
.alt-cities a{color:#335566;text-decoration:none}
    .alt-cities a:hover{color:#fb6682}
.pagination {flex-wrap:wrap}
@media print{
    .card, .card-body {
        display: block;
    }

}