/*.loader {*/
    /* Loader Styles */
    /*position: relative;
    display: block;
}

    .loader:before {
        content: '';
        box-sizing: border-box;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 20px;
        margin-top: -10px;
        margin-left: -10px;
        border-radius: 50%;
        border: 2px solid #ccc;
        border-top-color: #333;
        animation: spinner 1s linear infinite;
    }

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}*/


@base:#212121;
@color:silver;
@accent:#27ae60;
@borderRadius:4px;

.twoToneCenter {
    text-align: center;
    margin: 1em 0;
}

.twoToneButton {
    display: inline-block;
    border: 1px solid darken(@base,50%);
    outline: none;
    padding: 10px 20px;
    line-height: 1.4;
    background: @base;
    background: linear-gradient(to bottom, lighten(@base,20%) 0%,lighten(@base,15%) 50%,darken(@base,5%) 51%,darken(@base,2.5%) 100%);
    border-radius: @borderRadius;
    border: 1px solid darken(@base,30%);
    color: lighten(@color,10%);
    text-shadow: darken(@color,80%) -1px -1px 0px;
    position: relative;
    transition: padding-right .3s ease;
    font-weight: 700;
    box-shadow: 0 1px 0 lighten(@base,30%) inset, 0px 1px 0 lighten(@base,10%);
}

    .twoToneButton:hover {
        box-shadow: 0 0 10px darken(@base,10%) inset, 0px 1px 0 lighten(@base,10%);
        color: lighten(@color,20%);
    }

    .twoToneButton:active {
        box-shadow: 0 0 10px darken(@base,10%) inset, 0px 1px 0 lighten(@base,10%);
        color: lighten(@color,30%);
        background: darken(@base,10%);
        background: linear-gradient(to bottom, lighten(@base,10%) 0%,lighten(@base,5%) 50%,darken(@base,5%) 51%,darken(@base,10%) 100%);
    }

    .twoToneButton.spinning {
        background-color: @base;
        padding-right: 40px;
    }

        .twoToneButton.spinning:after {
            content: '';
            position: absolute;
            right: 6px;
            top: 50%;
            width: 0;
            height: 0;
            box-shadow: 0px 0px 0 1px darken(@base,10%);
            position: absolute;
            border-radius: 50%;
            animation: rotate360 .5s infinite linear, exist .1s forwards ease;
        }

        .twoToneButton.spinning:before {
            content: "";
            width: 0px;
            height: 0px;
            border-radius: 50%;
            right: 6px;
            top: 50%;
            position: absolute;
            border: 2px solid darken(@base,40%);
            border-right: 3px solid @accent;
            animation: rotate360 .5s infinite linear, exist .1s forwards ease;
        }



@keyframes rotate360 {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes exist {
    100% {
        width: 15px;
        height: 15px;
        margin: -8px 5px 0 0;
    }
}

body {
    background: @base;
}