.centered{
    margin-left  : auto;
    margin-right : auto;
}

.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; }
.align-baseline{ vertical-align : baseline !important; }

.ws-nowrap{ white-space : nowrap !important; }
.ws-normal{ white-space : normal !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-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; }

.wrap{ overflow : hidden !important; }
.block, .show{ display : block !important; }
.inline-block{ .inline-block(); }
.word-break{
    -ms-word-break : break-all;
    word-break     : break-all;
}
.hide, [class*="ui-helper-hidden"]{ display : none; }

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

.scroll{ overflow : auto; }

.fixed{
    position : fixed !important;
    z-index  : 100;

    &.top{ top : 0; }
    &.left{ left : 0; }
    &.right{ right : 0; }
    &.bottom{ bottom : 0; }
}

.fs12{ font-size : 12px !important; }
.fs14{ font-size : 14px !important; }
.fs16{ font-size : 16px !important; }
.fs18{ font-size : 18px !important; }
.fs24{ font-size : 24px !important; }
.fs32{ font-size : 32px !important; }
.fs48{ font-size : 48px !important; }
.fs64{ font-size : 64px !important; }

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

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

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

// Helper classes
//==================================================
// -- color bg
.body-bg{
    background : @body-bg;
}

// Social Links
//==================================================
.social-links when (@social-links = true){
    .hide-text;

    .rss{ background : @rss; }
    .gplus{ background : @gplus; }
    .twitter{ background : @twitter; }
    .youtube{ background : @youtube; }
    .linkedin{ background : @linkedin; }
    .facebook{ background : @facebook; }

    a[class*="@{icon-prefix}-"]{
        margin-left : 5px;
        color       : #FFF;
        .inline-block();
        .button-icon-size(@social-icon-size);
        .box-sizing(content-box);

        &:hover{
            &.rss{ background : darken(@rss, 10%); }
            &.gplus{ background : darken(@gplus, 10%); }
            &.twitter{ background : darken(@twitter, 10%); }
            &.youtube{ background : darken(@youtube, 10%); }
            &.linkedin{ background : darken(@linkedin, 10%); }
            &.facebook{ background : darken(@facebook, 10%); }
        }

        &.inherit when (@social-links-inherit = true){
            color      : inherit;
            background : inherit;

            &:hover{
                color : #fff;
                &.rss{ background : @rss; }
                &.gplus{ background : @gplus; }
                &.twitter{ background : @twitter; }
                &.youtube{ background : @youtube; }
                &.linkedin{ background : @linkedin; }
                &.facebook{ background : @facebook; }
            }
        }

        &.inverse when (@social-links-inverse = true){
            background : none !important;

            &.rss{ color : @rss; }
            &.gplus{ color : @gplus; }
            &.twitter{ color : @twitter; }
            &.youtube{ color : @youtube; }
            &.linkedin{ color : @linkedin; }
            &.facebook{ color : @facebook; }

            &:hover{
                &.rss{ color : darken(@rss, 10%); }
                &.gplus{ color : darken(@gplus, 10%); }
                &.twitter{ color : darken(@twitter, 10%); }
                &.youtube{ color : darken(@youtube, 10%); }
                &.linkedin{ color : darken(@linkedin, 10%); }
                &.facebook{ color : darken(@facebook, 10%); }
            }
        }
    }
}

// Change style for Generator Links
//==================================================
.gl-change when (@social-links = true) and (@toaster-icons = true){
    font-size : 0;

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

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

        img{
            display : none !important;
        }

        &:before{
            font-family : 'toaster-icons';
            content     : "\e008";
        }

        & + .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;
            border  : 1px dashed #fff;
            .icon-size(@icon-size-base);

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

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

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

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

// User classes
//==================================================
.scroll{
    overflow   : auto;
    max-height : 100%;
    //    min-height : 100%;

    &.scroll-left{
        direction : rtl;
        & > *{ direction : ltr; }
    }
}
.background{
    .background;

    legend{
        background : #fff;
    }
}

.move{
    cursor : url("../images/openhand.cur"), default;

    &.ticon-move, & .ticon-move{
        color : darken(@gray-lighter, 15%);
    }

    &:hover{
        &.ticon-move, & .ticon-move{
            color : darken(@gray-light, 30%);
        }
    }
}

.spinner{
    position            : absolute;
    top                 : 0;
    left                : 0;
    bottom              : 0;
    right               : 0;
    z-index             : 1000;
    background-color    : rgba(255, 255, 255, 0.75);
    background-image    : url("../images/spinner.gif");
    background-position : center center;
    background-repeat   : no-repeat;
    width               : auto !important;

    //    &:before{
    //        position    : absolute;
    //        top         : -140px;
    //        left        : 0;
    //        bottom      : 0;
    //        right       : 0;
    //        margin      : auto;
    //        font-family : 'system-icons';
    //        content     : "\e054";
    //        color       : #bbb;
    //        font-size   : 100px;
    //        width       : 1em;
    //        height      : 1em;
    //        line-height : 1em;
    //    }
}

.show-right, .show-left{
    background : @body-bg;
    position   : fixed;
    top        : 0;
    bottom     : 0;
    width      : 350px;
    z-index    : 101;
    display    : none;
    .box-shadow(0 0 25px @gray);

    &.w100{
        width : 100%;
    }
}
.show-right{
    right : 0;
}

.show-left{
    left : 0;
}

.or{
    .inline-block;
    color          : #CCC;
    font-size      : @font-size-large;
    font-weight    : bold;
    text-align     : center;
    padding        : 0;
    text-transform : uppercase;

    &:after, &:before{
        .inline-block();
        content    : '';
        height     : 1px;
        width      : 0.6em;
        background : #CCC;
        margin     : 0 2px;
    }
}

.text-line{
    .inline-block;
    font-weight : bold;
    text-align  : center;

    &:after, &:before{
        content    : '';
        .inline-block;
        height     : 1px;
        width      : 1em;
        background : #CCC;
        margin     : 0 5px;
    }
}

.screen-size{
    z-index : 100;

    .show_div &{
        position : absolute;
        left     : 0;
        top      : 0;
        padding  : 5px;
    }

    &.ticon-turn{
        position : fixed;
        right    : 2%;
        top      : @header-height / 2 - 8px;
        left     : auto;
    }
}

.full-screen{
    position   : fixed !important;
    top        : 0;
    left       : 0;
    right      : 0;
    bottom     : 0;
    z-index    : 100 !important;
    max-height : none !important;
    max-width  : none !important;
    width      : auto !important;
    height     : auto !important;
    background : @body-bg;

    .header ~ &, .header ~ * &{
        top : @header-height;
    }
}