.centered {
    float        : none !important;
    margin-left  : auto !important;
    margin-right : auto !important;
}

.text-left { text-align : left; }
.text-center { text-align : center; }
.text-right { text-align : right; }
.text-justify { text-align : justify; }

.align-top { vertical-align : top !important; }
.align-middle { vertical-align : middle !important; }
.align-bottom { vertical-align : bottom !important; }

.ws-nowrap { white-space : nowrap !important; }
.ws-normal { white-space : normal !important; }
.ws-pre { white-space : pre-wrap !important; }

.text-light { font-weight : 300 !important; }
.text-normal { font-weight : normal !important; font-style : normal !important; }
.text-medium { font-weight : 500 !important; }
.text-bold { font-weight : bold !important; }
.text-italic { font-style : italic !important; }

.lh-inherit { line-height : inherit !important; }
.lh-small { line-height : 1 !important; }
.lh-medium { line-height : @line-height * .85 !important; }
.lh-normal { line-height : @line-height !important; }
.lh-large { line-height : @line-height * 1.25 !important; }

.cl-none { clear : none; }
.cl-both { clear : both; }

.fl-left { float : left !important; }
.fl-right { float : right !important; }
.fl-none { float : none !important; }

.scroll { overflow : auto !important; }
.wrap { overflow : hidden !important; }
.overflow-none { overflow : visible !important; }

.show { display : block !important; }
.block { display : block; }
.inline-block-wrap { .inline-block-wrap(); }
.inline-block { .inline-block(); }
.word-break {
    -ms-word-break : break-all;
    word-break     : break-all;
    // Non standard for webkit
    //word-break: break-word;
    .hyphens();
}
.hide, .ui-helper-hidden, .ui-helper-hidden-accessible { display : none; }

.pointer { cursor : pointer !important; }
.help { cursor : help !important; }

.fs12, .is12:before { font-size : 12px !important; }
.fs14, .is14:before { font-size : 14px !important; }
.fs16, .is16:before { font-size : 16px !important; }
.fs18, .is18:before { font-size : 18px !important; }
.fs24, .is24:before { font-size : 24px !important; }
.fs32, .is32:before { font-size : 32px !important; }
.fs48, .is48:before { font-size : 48px !important; }
.fs64, .is64:before { font-size : 64px !important; }
.fs-inherit, .is-inherit:before { font-size : inherit !important;; }

.inherit{
    color      : inherit;
    background : inherit;
}
.inherit-bg {
    background : inherit;
}
.inherit-color {
    color : inherit;

    a&:hover {
        color : @link-color;
    }
}

.text-overflow {
    .text-overflow();
}

// Helper classes
//==================================================
//--- Position
.position-list(none; top);
.position-list(none; bottom);
.position-list(none; right);
.position-list(none; left);

//--- Margin
.margin-list(0px);
.margin-list(30px; top);
.margin-list(30px; bottom);
.margin-list(none; right);
.margin-list(none; left);

.mtLabel { margin-top : unit(@line-height + .25, em); }
.mtInput { margin-top : unit(@button-line-height * 2, em); }
.ml-grid { margin-left : @grid-margin-width / 2 !important; }
.mr-grid { margin-right : @grid-margin-width / 2 !important; }

//--- Padding
.padding-list(0px);
.padding-list(none; top);
.padding-list(none; bottom);
.padding-list(none; right);
.padding-list(none; left);

.pl-grid{ padding-left : @grid-margin-width / 2; }
.pr-grid{ padding-right : @grid-margin-width / 2; }

.ff-text{ font-family: @font-family-text; }
.ff-header{ font-family: @font-family-headings; }

//--- Height
.h-auto{ height : auto !important; }
.maxH-none{ max-height: none !important; }
.height-list(none; 25);

//--- Width
.w-auto{ width : auto !important; }
.maxW-none{ max-width : none !important; }
.width-list(none; 25);

// -- Grays color
.gray-darker-bg {
    color            : #fff;
    background-color : @gray-darker;
}
.gray-dark-bg {
    color            : #fff;
    background-color : @gray-dark;
}
.gray-bg {
    color            : #fff;
    background-color : @gray;
}
.gray-light-bg {
    color            : #fff;
    background-color : @gray-light;
}
.gray-lighter-bg {
    color            : @gray-dark;
    background-color : @gray-lighter;
}
.white-bg {
    background : #fff;
}

.gray-darker{ color : @gray-darker; }
.gray-dark{ color : @gray-dark; }
.gray{ color : @gray; }
.gray-light{ color : @gray-light; }
.gray-lighter{ color : @gray-lighter; }
.white{ color : #fff; }

// Table classes
//==================================================
.table {
    float   : none;
    display : table;
    width   : 100%;
}

.tr {
    float   : none;
    display : table-row;
}

.td{
    float   : none;
    display : table-cell;
}

// Change style for Generator Links
//==================================================
.gl-change when (@flexkit-icons){
    font-size : 0;

    a, :before{ font-size : @font-size-base; }

    .generator-links{
        .inline-block();
        .box-sizing(content-box);
        .icon-size(@icon-size-small; true) !important;
        .button-color(@button-info-color; @button-info-bg);
        padding  : @padding-small-vertical !important;
        position : relative;

        img{
            display : none !important;
        }

        &::before{
            font-family : @font-family-icons;
            content     : "\e004";
        }

        & + .generator-links{
            margin-left : 1px;

            &::before{
                content : "\e095";
            }
        }
    }

    a.icon + .generator-links:before{
        content        : "\e095";
        border-left    : 2px solid #fff;
        border-top     : 2px solid #fff;
        margin         : 0 0 -2px -(@icon-size-small + @padding-mini-vertical * 2);
        vertical-align : bottom;
    }

    .btn ~ .generator-links{
        vertical-align : top;
    }

    .btn + .generator-links{
        & + .generator-links{
            & ~ .generator-links{
                top  : (@icon-size-small + @padding-small-vertical * 2);
                left : -(@icon-size-small + @padding-small-vertical * 2 + 1) * 2;
            }
        }
    }

    &.color{
        .generator-links{
            padding : @padding-small-vertical;
            .icon-size(@icon-size-base);

            &::before{
                content : "\e00a";
            }
        }
    }
}

.relative{ position : relative; }
.absolute{ position : absolute; }

//.flexbox{
//    .flexbox();
//}
//.flexbox-column{
//    .flexbox(column);
//}
//.flexbox-row{
//    .flexbox(row);
//}
//
//.flex-order_1{
//    .flex-box-order(1);
//}
//.flex-order_2{
//    .flex-box-order(2);
//}
//.flex-order_3{
//    .flex-box-order(3);
//}
//
//.flex-size_1{
//    .flex-box-size(1);
//}
//
//.flex-item-align-center{
//    .flex-align(center);
//    .flex-box-align(center);
//}