/*---------------------------------------------------------tooltip icon------------------------------------------------------*/
.card-back-settings label > i {
    font-size: 1.6em;
    position: absolute;
    flow-from: none;
    right: .4em;
    top: .2em;
    color: #51adf6;
}

/*------------------------------------------------------checkbox-----------------------------------------------*/
input.input-toggle {
    opacity: 0;
    position: absolute;
}

    input.input-toggle + label {
        position: relative;
        display: block;
        background: #f8f8f8;
        border: 1px solid #f0f0f0;
        -moz-border-radius: 2em;
        -webkit-border-radius: 2em;
        -khtml-border-radius: 2em;
        border-radius: 2em;
        padding: 0.5em 1em 0.5em 5em;
        box-shadow: 0 1px 2px rgba(100, 100, 100, 0.5) inset, 0 0 10px rgba(100, 100, 100, 0.1) inset;
        cursor: pointer;
        text-shadow: 0 2px 2px #fff;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

        input.input-toggle + label::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0.7em;
            width: 3em;
            height: 1.2em;
            -moz-border-radius: 0.6em;
            -webkit-border-radius: 0.6em;
            -khtml-border-radius: 0.6em;
            border-radius: 0.6em;
            background: #eee;
            transform: translateY(-50%);
            box-shadow: 0 1px 3px rgba(100, 100, 100, 0.5) inset, 0 0 10px rgba(100, 100, 100, 0.2) inset;
        }

        input.input-toggle + label::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 0.5em;
            width: 1.4em;
            height: 1.4em;
            border: 0.25em solid #fafafa;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            -khtml-border-radius: 50%;
            border-radius: 50%;
            box-sizing: border-box;
            background-color: #ddd;
            background-image: linear-gradient(to top, #fff 0%, #fff 40%, transparent 100%);
            transform: translateY(-50%);
            box-shadow: 0 3px 3px rgba(0, 0, 0, 0.5);
        }

        input.input-toggle + label, input.input-toggle + label::before, input.input-toggle + label::after {
            transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

            input.input-toggle + label:hover, input.input-toggle:focus + label {
                color: black;
            }

                input.input-toggle + label:hover::after, input.input-toggle:focus + label::after {
                    background-color: #ccc;
                    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
                }

    input.input-toggle:checked {
        counter-increment: total;
    }

        input.input-toggle:checked + label::before {
            background: #1CE;
        }

        input.input-toggle:checked + label::after {
            transform: translateX(2em) translateY(-50%);
        }