.datepick {
    position: relative
}

@media screen and (max-width: 575px) {
    .datepick {
        width: 100%;
        display: block;
        padding-right: 0
    }
}

.datepick + .datepick {
    margin-left: .3em;
    margin-right: 0;
    padding-right: 0
}

    .datepick + .datepick:before {
        content: "~";
        font-size: 1.5em;
        color: #777
    }

@media screen and (max-width: 575px) {
    .datepick + .datepick {
        margin-left: 0em
    }

        .datepick + .datepick:before {
            display: none
        }
}

.datepick i {
    position: absolute;
    padding: .37em .1em !important;
    right: 1em;
    top: .2em;
    min-width: 1em;
    background: none;
    border: none;
    width: auto;
    pointer-events: none
}

    .datepick i:hover,
    .datepick i:focus {
        box-shadow: none;
        border: none !important
    }

.datepick > input[type="text"],
.datepick > input[type="date"] {
    width: 12em
}

@media screen and (max-width: 575px) {
    .datepick > input[type="text"],
    .datepick > input[type="date"] {
        width: calc(100% - .6em)
    }
}

.datepick > input[type="text"] {
    padding-right: 2em
}