.praille-carte {

    position: relative;
    width:    100%;
    height:   calc(100vh - 48px);
    margin:   0 auto;
}

@media (min-width: 1000px) {
    .praille-carte {
        height:   calc(100vh - 141px);
    }

    .admin-bar .praille-carte {
        height:   calc(100vh - 141px - 32px);
    }
}

h3.praille-carte__title {
    font-size: 1.4rem !important;
}

.praille-carte__map {

    width:  100%;
    height: 100%;
}


.praille-carte__directions {

    position:   absolute;
    top:        2em;
    left:       2em;
    width:      25%;
    max-width:  380px;
    background: white;
    padding:    1em;
    box-shadow: 0 .5em 1em rgba(0, 0, 0, 0.5);
}


.praille-carte__directions label {

    display: block;
    margin: 1em 0 .5em;
}

.praille-carte__type__select {
    display: flex;
}

.praille-carte__type__select label {

    margin:     0 1em 0 0;
    padding:    .5em;
    background: #ccc;
    cursor:     pointer;
}

    .praille-carte__type__select label: hover,
    .praille-carte__type__select label: focus {
        background: #ddd;
    }

    .praille-carte__type__select input[type=radio]:checked + label {
        background: #223377;
    }

    .praille-carte__type__select input[type=radio]:checked + label img {
        filter: invert(100%);
    }


.praille-carte__type__select img {
    display: block;
    margin: 0 !important;
}

.praille-carte__type__select input[type=radio] {
    display: none;
}


.praille-carte__directions button {

    display:     inline-block;
    border:      none;
    padding:     .5em 1em;
    margin:      2em 0 0;
    background:  #223377;
    color:       white;
    font-size:   1rem;
    font-family: 'Muli', 'Open Sans', sans-serif;
    cursor:      pointer;
}

    .praille-carte__directions button:hover,
    .praille-carte__directions button:focus {

        opacity: .8;
    }

.praille-carte__directions__result {

    margin-top: 1em;
}