.pretty input:not([type=checkbox]):not([type=radio]) {
    display: none
}

.pretty {
    position: relative;
    display: inline-block;
    margin-right: 1em;
    white-space: nowrap;
    line-height: 1
}

    .pretty input {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        opacity: 0;
        margin: 0;
        padding: 0;
        cursor: pointer
    }

    .pretty .state label {
        position: initial;
        display: inline-block;
        font-weight: 400;
        margin: 0;
        text-indent: 1.5em;

    }

        .pretty .state label:after, .pretty .state label:before {
            content: '';
            width: calc(1em + 2px);
            height: calc(1em + 2px);
            display: block;
            box-sizing: border-box;
            border-radius: 0;
            border: 1px solid transparent;
            z-index: 0;
            position: absolute;
            left: 0;
            top: calc((0% - (100% - 1em)) - 8%);
            background-color: transparent;
        }

        .pretty .state label:before {
            border-color: #bdc3c7
        }

    .pretty .state.p-is-hover, .pretty .state.p-is-indeterminate {
        display: none
    }



    .pretty.p-default.p-fill .state label:after {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }

    .pretty.p-default .state label:after {
        -webkit-transform: scale(.6);
        -ms-transform: scale(.6);
        transform: scale(.6)
    }

    .pretty.p-default input:checked ~ .state label:after {
        background-color: #337efd !important
    }