.border-radius(@radius) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

.border-radius-top-left(@radius) {
    -webkit-border-top-left-radius: @radius;
    -moz-border-radius-topleft: @radius;
    -khtml-border-top-left-radius: @radius;
    border-top-left-radius: @radius;
}

.border-radius-top-right(@radius) {
    -webkit-border-top-right-radius: @radius;
    -moz-border-radius-topright: @radius;
    -khtml-border-top-right-radius: @radius;
    border-top-right-radius: @radius;
}

.border-radius-bottom-left(@radius) {
    -webkit-border-bottom-left-radius: @radius;
    -moz-border-radius-bottomleft: @radius;
    -khtml-border-bottom-left-radius: @radius;
    border-bottom-left-radius: @radius;
}

.border-radius-bottom-right(@radius) {
    -webkit-border-bottom-right-radius: @radius;
    -moz-border-radius-bottomright: @radius;
    -khtml-border-bottom-right-radius: @radius;
    border-bottom-right-radius: @radius;
}

.opacity(@opacity: 0.5) {
    -moz-opacity: @opacity;
    -khtml-opacity: @opacity;
    -webkit-opacity: @opacity;
    opacity: @opacity;
}

.box-shadow(@arguments) {
    -webkit-box-shadow: @arguments;
    -moz-box-shadow: @arguments;
    box-shadow: @arguments;
}

.backgroundColor {
    .a {background-color:  @color_a;}
    .b {background-color:  @color_b;}
    .c {background-color:  @color_c;}
    .d {background-color:  @color_d;}
    .e {background-color:  @color_e;}
    .f {background-color:  @color_f;}
    .g {background-color:  @color_g;}
    .h {background-color:  @color_h;}
    .i {background-color:  @color_i;}
    .j {background-color:  @color_j;}
    .k {background-color:  @color_k;}
    .l {background-color:  @color_l;}
    .m {background-color:  @color_m;}
    .n {background-color:  @color_n;}
    .o {background-color:  @color_o;}
    .p {background-color:  @color_p;}
    .q {background-color:  @color_q;}
    .r {background-color:  @color_r;}
    .s {background-color:  @color_s;}
    .t {background-color:  @color_t;}
    .u {background-color:  @color_u;}
    .v {background-color:  @color_v;}
    .w {background-color:  @color_w;}
    .x {background-color:  @color_x;}
    .y {background-color:  @color_y;}
    .z {background-color:  @color_z;}
    .zz {background-color:  @color_zz;}

    .hover {
        .a {background-color: @color_a_hover;}
        .b {background-color: @color_b_hover;}
        .c {background-color: @color_c_hover;}
        .d {background-color: @color_d_hover;}
        .e {background-color: @color_e_hover;}
        .f {background-color: @color_f_hover;}
        .g {background-color: @color_g_hover;}
        .h {background-color: @color_h_hover;}
        .i {background-color: @color_i_hover;}
        .j {background-color: @color_j_hover;}
        .k {background-color: @color_k_hover;}
        .l {background-color: @color_l_hover;}
        .m {background-color: @color_m_hover;}
        .n {background-color: @color_n_hover;}
        .o {background-color: @color_o_hover;}
        .p {background-color: @color_p_hover;}
        .q {background-color: @color_q_hover;}
        .r {background-color: @color_r_hover;}
        .s {background-color: @color_s_hover;}
        .t {background-color: @color_t_hover;}
        .u {background-color: @color_u_hover;}
        .v {background-color: @color_v_hover;}
        .w {background-color: @color_w_hover;}
        .x {background-color: @color_x_hover;}
        .y {background-color: @color_y_hover;}
        .z {background-color: @color_z_hover;}
        .zz {background-color: @color_zz_hover;}
    }
}

.bg_a {.backgroundColor > .a;}
.bg_b {.backgroundColor > .b;}
.bg_c {.backgroundColor > .c;}
.bg_d {.backgroundColor > .d;}
.bg_e {.backgroundColor > .e;}
.bg_f {.backgroundColor > .f;}
.bg_g {.backgroundColor > .g;}
.bg_h {.backgroundColor > .h;}
.bg_i {.backgroundColor > .i;}
.bg_j {.backgroundColor > .j;}
.bg_k {.backgroundColor > .k;}
.bg_l {.backgroundColor > .l;}
.bg_m {.backgroundColor > .m;}
.bg_n {.backgroundColor > .n;}
.bg_o {.backgroundColor > .o;}
.bg_p {.backgroundColor > .p;}
.bg_q {.backgroundColor > .q;}
.bg_r {.backgroundColor > .r;}
.bg_s {.backgroundColor > .s;}
.bg_t {.backgroundColor > .t;}
.bg_u {.backgroundColor > .u;}
.bg_v {.backgroundColor > .v;}
.bg_w {.backgroundColor > .w;}
.bg_x {.backgroundColor > .x;}
.bg_y {.backgroundColor > .y;}
.bg_z {.backgroundColor > .z;}
.bg_zz {.backgroundColor > .zz;}

.bg_a_hover {.backgroundColor > .hover > .a;}
.bg_b_hover {.backgroundColor > .hover > .b;}
.bg_c_hover {.backgroundColor > .hover > .c;}
.bg_d_hover {.backgroundColor > .hover > .d;}
.bg_e_hover {.backgroundColor > .hover > .e;}
.bg_f_hover {.backgroundColor > .hover > .f;}
.bg_g_hover {.backgroundColor > .hover > .g;}
.bg_h_hover {.backgroundColor > .hover > .h;}
.bg_i_hover {.backgroundColor > .hover > .i;}
.bg_j_hover {.backgroundColor > .hover > .j;}
.bg_l_hover {.backgroundColor > .hover > .l;}
.bg_m_hover {.backgroundColor > .hover > .m;}
.bg_n_hover {.backgroundColor > .hover > .n;}
.bg_o_hover {.backgroundColor > .hover > .o;}
.bg_p_hover {.backgroundColor > .hover > .p;}
.bg_q_hover {.backgroundColor > .hover > .q;}
.bg_r_hover {.backgroundColor > .hover > .r;}
.bg_s_hover {.backgroundColor > .hover > .s;}
.bg_t_hover {.backgroundColor > .hover > .t;}
.bg_u_hover {.backgroundColor > .hover > .u;}
.bg_v_hover {.backgroundColor > .hover > .v;}
.bg_w_hover {.backgroundColor > .hover > .w;}
.bg_x_hover {.backgroundColor > .hover > .x;}
.bg_y_hover {.backgroundColor > .hover > .y;}
.bg_z_hover {.backgroundColor > .hover > .z;}
.bg_zz_hover {.backgroundColor > .hover > .zz;}

.center         {margin: 0 auto;}
.vcenter        {display: table-cell;vertical-align: middle;}
.left           {float: left;}
.right          {float: right;}
.hand           {cursor: pointer;}
.default-pointer {cursor: default;}
.text-center    {text-align: center;}
.display-none   {display: none;}
.nowrap         {white-space: nowrap;}
.bold           {font-weight: bold;}
.full-height    {height: 100%;}
.uppercase      {text-transform: uppercase;}
.capitalize     {text-transform: capitalize;}
.disabled       {
    //background-color: #f2f2f2;
    //border-color: #d8d8d8;
    //background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQIW2NkQAKrVq36zwjjgzhhYWGMYAEYB8RmROaABADeOQ8CXl/xfgAAAABJRU5ErkJggg==) repeat;
    //color: @color_m;
}

.font-color {
    .a {color:  @color_a;}
    .b {color:  @color_b;}
    .c {color:  @color_c;}
    .d {color:  @color_d;}
    .e {color:  @color_e;}
    .f {color:  @color_f;}
    .g {color:  @color_g;}
    .h {color:  @color_h;}
    .i {color:  @color_i;}
    .j {color:  @color_j;}
    .k {color:  @color_k;}
    .l {color:  @color_l;}
    .m {color:  @color_m;}
    .n {color:  @color_n;}
    .o {color:  @color_o;}
    .p {color:  @color_p;}
    .q {color:  @color_q;}
    .r {color:  @color_r;}
    .s {color:  @color_s;}
    .t {color:  @color_t;}
    .u {color:  @color_t;}
    .v {color:  @color_t;}
    .w {color:  @color_t;}
    .x {color:  @color_t;}
    .y {color:  @color_t;}
    .z {color:  @color_z;}
    .zz {color:  @color_zz;}
    }

.font-type {
    ._1 {
        font-family: @font-omnes-regular;
        font-size: 14px;
    }
    ._2 {
        font-family: @font-omnes-regular;
        font-size: 20px;
    }
    ._3 {
        font-family: @font-omnes-regular;
        font-size: 12px;
    }
    ._4 {
        font-family: @font-omnes-regular;
        font-size: 16px;
    }
    ._5 {
        font-family: @font-omnes-medium;
        font-size: 30px;
    }
    ._6 {
        font-family: @font-omnes-medium;
        font-size: 16px;
    }
    ._7 {
        font-family: @font-omnes-medium;
        font-size: 14px;
    }
    ._8 {
        font-family: @font-omnes-regular;
        font-size: 11px;
    }
    ._9 {
        font-family: @font-omnes-regular;
        font-size: 13px;
    }
    ._10 {
        font-family: @font-omnes-regular;
        font-size: 18px;
    }
    ._11 {
        font-family: @font-omnes-medium;
        font-size: 20px;
    }
    ._12 {
        font-family: @font-omnes-medium;
        font-size: 17px;
    }
    ._13 {
        font-family: @font-omnes-medium;
        font-size: 12px;
    }
    ._14 {
        font-family: @font-omnes-medium;
        font-size: 11px;
    }
    ._15 {
        font-family: @font-omnes-medium;
        font-size: 24px;
    }
    ._16 {
        font-family: @font-omnes-regular;
        font-size: 10px;
    }
    ._17 {
        font-family:  @font-omnes-medium;
        font-size: 15px;
    }
    ._18 {
        font-family:  @font-omnes-regular;
        font-size: 15px;
    }
    ._19 {
        font-family: @font-omnes-medium;
        font-size: 18px;
    }
}

.a_1  {.font-color > .a; .font-type > ._1;}
.a_2  {.font-color > .a; .font-type > ._2;}
.a_3  {.font-color > .a; .font-type > ._3;}
.a_4  {.font-color > .a; .font-type > ._4;}
.a_5  {.font-color > .a; .font-type > ._5;}
.a_6  {.font-color > .a; .font-type > ._6;}
.a_7  {.font-color > .a; .font-type > ._7;}
.a_8  {.font-color > .a; .font-type > ._8;}
.a_9  {.font-color > .a; .font-type > ._9;}
.a_10  {.font-color > .a; .font-type > ._10;}
.a_15 {.font-color > .a; .font-type > ._15;}

.b_1  {.font-color > .b; .font-type > ._1;}
.b_3  {.font-color > .b; .font-type > ._3;}
.b_4  {.font-color > .b; .font-type > ._4;}
.b_5  {.font-color > .b; .font-type > ._5;}
.b_6  {.font-color > .b; .font-type > ._6;}
.b_7  {.font-color > .b; .font-type > ._7;}
.b_9  {.font-color > .b; .font-type > ._9;}
.b_10  {.font-color > .b; .font-type > ._10;}
.b_11  {.font-color > .b; .font-type > ._11;}
.b_13  {.font-color > .b; .font-type > ._13;}
.b_15  {.font-color > .b; .font-type > ._15;}
.b_17  {.font-color > .b; .font-type > ._17;}
.b_19  {.font-color > .b; .font-type > ._19;}

.c_1  {.font-color > .c; .font-type > ._1;}
.c_2  {.font-color > .c; .font-type > ._2;}
.c_3  {.font-color > .c; .font-type > ._3;}
.c_4  {.font-color > .c; .font-type > ._4;}
.c_5  {.font-color > .c; .font-type > ._5;}
.c_6  {.font-color > .c; .font-type > ._6;}
.c_7  {.font-color > .c; .font-type > ._7;}
.c_8  {.font-color > .c; .font-type > ._8;}
.c_9  {.font-color > .c; .font-type > ._9;}
.c_10 {.font-color > .c; .font-type > ._10;}
.c_11 {.font-color > .c; .font-type > ._11;}
.c_15 {.font-color > .c; .font-type > ._15;}
.c_16 {.font-color > .c; .font-type > ._16;}
.c_17 {.font-color > .c; .font-type > ._17;}
.c_18 {.font-color > .c; .font-type > ._18;}

.d_1  {.font-color > .d; .font-type > ._1;}
.d_2  {.font-color > .d; .font-type > ._2;}
.d_3  {.font-color > .d; .font-type > ._3;}
.d_4  {.font-color > .d; .font-type > ._4;}
.d_5  {.font-color > .d; .font-type > ._5;}
.d_6  {.font-color > .d; .font-type > ._6;}
.d_12  {.font-color > .d; .font-type > ._12;}

.e_1  {.font-color > .e; .font-type > ._1;}
.e_2  {.font-color > .e; .font-type > ._2;}
.e_3  {.font-color > .e; .font-type > ._3;}
.e_4  {.font-color > .e; .font-type > ._4;}
.e_5  {.font-color > .e; .font-type > ._5;}
.e_6  {.font-color > .e; .font-type > ._6;}
.e_7  {.font-color > .e; .font-type > ._7;}

.f_1  {.font-color > .f; .font-type > ._1;}
.f_2  {.font-color > .f; .font-type > ._2;}

.g_1  {.font-color > .g; .font-type > ._1;}
.g_2  {.font-color > .g; .font-type > ._2;}
.g_3  {.font-color > .g; .font-type > ._3;}
.g_4  {.font-color > .g; .font-type > ._4;}
.g_5  {.font-color > .g; .font-type > ._5;}
.g_6  {.font-color > .g; .font-type > ._6;}
.g_7  {.font-color > .g; .font-type > ._7;}
.g_8  {.font-color > .g; .font-type > ._8;}
.g_9  {.font-color > .g; .font-type > ._9;}
.g_10 {.font-color > .g; .font-type > ._10;}
.g_13 {.font-color > .g; .font-type > ._13;}
.g_14 {.font-color > .g; .font-type > ._14;}

.h_1  {.font-color > .h; .font-type > ._1;}
.h_7  {.font-color > .h; .font-type > ._7;}
.h_9  {.font-color > .h; .font-type > ._9;}

.i_1  {.font-color > .i; .font-type > ._1;}
.i_6 {.font-color > .i; .font-type > ._6;}
.i_11 {.font-color > .i; .font-type > ._11;}
.i_17 {.font-color > .i; .font-type > ._17;}

.l_1  {.font-color > .l; .font-type > ._1;}
.l_9  {.font-color > .l; .font-type > ._9;}

.m_4  {.font-color > .m; .font-type > ._4;}
.m_7  {.font-color > .m; .font-type > ._7;}

.p_1  {.font-color > .p; .font-type > ._1;}
.p_3  {.font-color > .p; .font-type > ._3;}
.p_9  {.font-color > .p; .font-type > ._9;}

.q_7  {.font-color > .q; .font-type > ._7;}
.q_9  {.font-color > .q; .font-type > ._9;}
.q_11 {.font-color > .q; .font-type > ._11;}

.r_12 {.font-color > .r; .font-type > ._12;}

.t_1  {.font-color > .t; .font-type > ._1;}
.t_7  {.font-color > .t; .font-type > ._7;}
.t_15 {.font-color > .t; .font-type > ._15;}
/* Added by ikram - */
.s_12 {.font-color > .s; .font-type > ._12;}

@color_a: #3b7b9b; // product category
@color_b: #666666;
@color_c: #ffffff;
@color_d: #1d9a95; // dashboard service (S at the top left of the card)
@color_e: #cdcdcd;
@color_f: #506472; // #e0e5e9 composition right side tabs
@color_g: #263d4d; // dashboard left sidebar categories
@color_h: #da1f3d; // not valid
@color_i: #445663; // dashboard left sidebar
@color_j: #D3DBE0; // dashboard header | view left side
@color_k: #e1e7ec; // composition item | composition right side background
@color_l: #1e9a33; // valid
@color_m: #a8b3b9; // composition sub category
@color_n: #ECEFF3; // dashboard main section
@color_o: #798996; // composition category
@color_p: #8c8c8c; // composition relation tab?
@color_q: #b5b5b5; // Liz please change from b6b5b5 to b5b5b5
@color_r: #e85858; // dashboard resource (R at the top left of the card)
@color_s: #000000; // #62727f
@color_t: #3196c9; // #346d8a
@color_u: #23aa63;
@color_v: #198682;
@color_w: #384752;
@color_x: #c91d39;
@color_y: #697a87;
@color_z: #28bd6e;
@color_zz: #93deb6;

.bg_a {.backgroundColor > .a;}
.bg_b {.backgroundColor > .b;}
.bg_c {.backgroundColor > .c;}
.bg_d {.backgroundColor > .d;}
.bg_e {.backgroundColor > .e;}
.bg_f {.backgroundColor > .f;}
.bg_g {.backgroundColor > .g;}
.bg_h {.backgroundColor > .h;}
.bg_i {.backgroundColor > .i;}
.bg_j {.backgroundColor > .j;}
.bg_k {.backgroundColor > .k;}
.bg_l {.backgroundColor > .l;}
.bg_m {.backgroundColor > .m;}
.bg_n {.backgroundColor > .n;}
.bg_o {.backgroundColor > .o;}
.bg_p {.backgroundColor > .p;}
.bg_q {.backgroundColor > .q;}
.bg_r {.backgroundColor > .r;}
.bg_s {.backgroundColor > .s;}
.bg_t {.backgroundColor > .t;}
.bg_u {.backgroundColor > .u;}
.bg_v {.backgroundColor > .v;}
.bg_w {.backgroundColor > .w;}
.bg_x {.backgroundColor > .x;}
.bg_y {.backgroundColor > .y;}
.bg_z {.backgroundColor > .z;}
.bg_zz {.backgroundColor > .zz;}

.bg_a_hover {.backgroundColor > .hover > .a;}
.bg_b_hover {.backgroundColor > .hover > .b;}
.bg_c_hover {.backgroundColor > .hover > .c;}
.bg_d_hover {.backgroundColor > .hover > .d;}
.bg_e_hover {.backgroundColor > .hover > .e;}
.bg_f_hover {.backgroundColor > .hover > .f;}
.bg_g_hover {.backgroundColor > .hover > .g;}
.bg_h_hover {.backgroundColor > .hover > .h;}
.bg_i_hover {.backgroundColor > .hover > .i;}
.bg_j_hover {.backgroundColor > .hover > .j;}
.bg_l_hover {.backgroundColor > .hover > .l;}
.bg_m_hover {.backgroundColor > .hover > .m;}
.bg_n_hover {.backgroundColor > .hover > .n;}
.bg_o_hover {.backgroundColor > .hover > .o;}
.bg_p_hover {.backgroundColor > .hover > .p;}
.bg_q_hover {.backgroundColor > .hover > .q;}
.bg_r_hover {.backgroundColor > .hover > .r;}
.bg_s_hover {.backgroundColor > .hover > .s;}
.bg_t_hover {.backgroundColor > .hover > .t;}
.bg_u_hover {.backgroundColor > .hover > .u;}
.bg_v_hover {.backgroundColor > .hover > .v;}
.bg_w_hover {.backgroundColor > .hover > .w;}
.bg_x_hover {.backgroundColor > .hover > .x;}
.bg_y_hover {.backgroundColor > .hover > .y;}
.bg_z_hover {.backgroundColor > .hover > .z;}
.bg_zz_hover {.backgroundColor > .hover > .zz;}

//Variables.css
// Colors
@color_a: #3b7b9b; // product category
@color_b: #666666;
@color_c: #ffffff;
@color_d: #1d9a95; // dashboard service (S at the top left of the card)
@color_e: #cdcdcd;
@color_f: #506472; // #e0e5e9 composition right side tabs
@color_g: #263d4d; // dashboard left sidebar categories
@color_h: #da1f3d; // not valid
@color_i: #445663; // dashboard left sidebar
@color_j: #D3DBE0; // dashboard header | view left side
@color_k: #e1e7ec; // composition item | composition right side background
@color_l: #1e9a33; // valid
@color_m: #a8b3b9; // composition sub category
@color_n: #ECEFF3; // dashboard main section
@color_o: #798996; // composition category
@color_p: #8c8c8c; // composition relation tab?
@color_q: #b5b5b5; // Liz please change from b6b5b5 to b5b5b5
@color_r: #e85858; // dashboard resource (R at the top left of the card)
@color_s: #000000; // #62727f
@color_t: #3196c9; // #346d8a
@color_u: #23aa63;
@color_v: #198682;
@color_w: #384752;
@color_x: #c91d39;
@color_y: #697a87;
@color_z: #28bd6e;
@color_zz: #93deb6;


// Color hover
@color_a_hover: darken(@color_a, 10.0%);
@color_b_hover: darken(@color_b, 10.0%);
@color_c_hover: darken(@color_c, 10.0%);
@color_d_hover: darken(@color_d, 10.0%);
@color_e_hover: darken(@color_e, 10.0%);
@color_f_hover: darken(@color_f, 10.0%);
@color_g_hover: darken(@color_g, 10.0%);
@color_h_hover: darken(@color_h, 10.0%);
@color_i_hover: darken(@color_i, 10.0%);
@color_j_hover: darken(@color_j, 10.0%);
@color_k_hover: darken(@color_k, 10.0%);
@color_l_hover: darken(@color_l, 10.0%);
@color_m_hover: darken(@color_m, 10.0%);
@color_n_hover: darken(@color_n, 10.0%);
@color_o_hover: darken(@color_o, 10.0%);
@color_q_hover: darken(@color_q, 10.0%);
@color_p_hover: darken(@color_p, 10.0%);
@color_r_hover: darken(@color_r, 10.0%);
@color_s_hover: darken(@color_s, 10.0%);
@color_t_hover: darken(@color_t, 10.0%);
@color_u_hover: darken(@color_u, 10.0%);
@color_v_hover: darken(@color_v, 10.0%);
@color_w_hover: darken(@color_w, 10.0%);
@color_x_hover: darken(@color_x, 10.0%);
@color_y_hover: darken(@color_y, 10.0%);
@color_z_hover: darken(@color_z, 10.0%);
@color_zz_hover: darken(@color_zz, 10.0%);

/* to check if can delete */
@border_color_a: #1D3A52;
@border_color_c: #C1CDD5;
@border_color_d: rgba(120, 136, 148, 0.26);
@border_color_e: rgba(59, 123, 155, 0.5);
@border_color_f: #cfcfcf;
@border_color_g: @color_a;
@border_color_view-mode: #ededed;

// Fonts
@font-omnes-light: omnes-light, sans-serif;
@font-omnes-regular: omnes-regular, sans-serif;
@font-omnes-medium: omnes-medium, sans-serif;
@font-omnes-medium-italic: omnes-medium-italic, sans-serif;
@font-omnes-bold: omnes-bold, sans-serif;