svn commit: r1824321 [2/3] - in /ofbiz/ofbiz-framework/trunk/themes/rainbowstone/webapp/rainbowstone: rainbowstone-amber.less rainbowstone-emerald.less rainbowstone-main-theme.less rainbowstone-ruby.less rainbowstone-saphir.less

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|

svn commit: r1824321 [2/3] - in /ofbiz/ofbiz-framework/trunk/themes/rainbowstone/webapp/rainbowstone: rainbowstone-amber.less rainbowstone-emerald.less rainbowstone-main-theme.less rainbowstone-ruby.less rainbowstone-saphir.less

jnicolas
Added: ofbiz/ofbiz-framework/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-main-theme.less
URL: http://svn.apache.org/viewvc/ofbiz/ofbiz-framework/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-main-theme.less?rev=1824321&view=auto
==============================================================================
--- ofbiz/ofbiz-framework/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-main-theme.less (added)
+++ ofbiz/ofbiz-framework/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-main-theme.less Thu Feb 15 15:07:22 2018
@@ -0,0 +1,3814 @@
+/* common colors */
+@black: #000;
+@white: #fff;
+@grey: #e6e6e6;
+@greydark: #929292;
+
+@color-success: #8cff8c;
+@font-color-for-success: @black;
+@color-alert: #ff8c8c;
+@font-color-for-alert: @black;
+
+@color-success-dark: #356e35;
+@font-color-for-success: @black;
+@color-alert-dark: #932f33;
+@font-color-for-alert: @black;
+
+@color-background-alert: #f2dede;
+@color-font-alert: #a94442;
+@color-border-alert: #ebccd1;
+
+@color-background-success: #dff0d8;
+@color-font-success: #3c763d;
+@color-border-success: #d6e9c6;
+
+@app-bar-height: 60px;
+@sub-app-bar-height: 40px;
+@footer-height: 20px;
+@home-btn-width: 47px;
+@color-line-height: 9px;
+
+@home-menu-tile-height: 80px;
+@home-menu-tile-min-width: 100px;
+@home-menu-tile-max-width: 100px;
+
+@third-lvl-height: 80px;
+@third-lvl-width : 100px;
+@min-screen : 1170px;
+@min-container-width: 1130px;
+
+@box-border-color: #d7d7d7;
+
+@font-face {
+  font-family: "Quicksand", Arial, "Lucida Grande", sans-serif;
+  src: url('fonts/quicksand/quicksandbold.otf');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Quicksand", Arial, "Lucida Grande", sans-serif;
+  src: url('fonts/quicksand/quicksandbold.otf');
+  font-weight: bold;
+  font-style: normal;
+}
+
+/* ---------------------------------- */
+/* Begin special checkbox type switch */
+/* ---------------------------------- */
+
+[type="checkbox"]:not(:checked).nrd-chkbox, [type="checkbox"]:checked.nrd-chkbox {
+  display: none;
+}
+
+[type="checkbox"]:not(:checked).nrd-chkbox + label,
+[type="checkbox"]:checked.nrd-chkbox + label{
+  cursor: pointer;
+}
+[type="checkbox"]:not(:checked).nrd-chkbox + label:before,
+[type="checkbox"]:checked.nrd-chkbox + label:before{
+  content: "";
+  width: 150px;
+  min-width: 150px;
+  background-color: @light-color-theme;
+  padding: 2px 20px 2px 20px;
+  border-radius: 8px 8px 8px 8px;
+
+  cursor: pointer;
+}
+
+[type="checkbox"]:not(:checked).nrd-chkbox + label:after,
+[type="checkbox"]:checked.nrd-chkbox + label:after{
+  content: "";
+  position: relative;
+  left:-35px;
+  background-color: @dark-color-theme;
+  min-height: 10px;
+  min-width: 10px;
+  padding-left: 4px;
+  padding-right: 5px;
+  border-radius: 8px 8px 8px 8px;
+  transition: all .2s;
+}
+
+[type="checkbox"]:checked.nrd-chkbox + label:after{
+  position: relative;
+  left: -15px;
+  transition: all .2s;
+}
+/* ---------------------------------- */
+/* End special checkbox type switch */
+/* ---------------------------------- */
+
+/* ---------------------------------- */
+/*  Begin square Checkbox             */
+/* ---------------------------------- */
+
+[type="checkbox"]:not(:checked).nrd-square-chkbox,
+[type="checkbox"]:checked.nrd-square-chkbox{
+  position: absolute;
+  left: -9999px;
+}
+
+[type="checkbox"]:not(:checked).nrd-square-chkbox + label,
+[type="checkbox"]:checked.nrd-square-chkbox + label{
+  content: '';
+  padding-left: 35px;
+  position: relative;
+  cursor: pointer;
+  font-family: "Quicksand", Arial, "Lucida Grande", sans-serif;
+  font-size: 12px;
+
+}
+[type="checkbox"]:not(:checked).nrd-square-chkbox + label:before,
+[type="checkbox"]:checked.nrd-square-chkbox + label:before{
+  content: '';
+  position: absolute;
+  left:10px;
+  top: -4px;
+  width: 17px;
+  height: 17px; /* dim. de la case */
+  border: 1px solid #aaa;
+  background: @light-color-theme;
+  border-radius: 2px;
+}
+
+[type="checkbox"]:not(:checked).nrd-square-chkbox + label:before {
+  background: @light-color-theme;
+}
+[type="checkbox"]:checked.nrd-square-chkbox + label:before{
+  background: @main-color-theme;
+}
+
+[type="checkbox"]:not(:checked).nrd-square-chkbox + label:after,
+[type="checkbox"]:checked.nrd-square-chkbox + label:after{
+  content: '✔';
+  position: absolute;
+  top: -4px;
+  left: 14px;
+  font-size: 16px;
+  color: @font-color-for-main;
+  transition: all .2s;
+}
+[type="checkbox"]:not(:checked).nrd-square-chkbox + label:after {
+  opacity: 0;
+  transform: scale(0);
+}
+[type="checkbox"]:checked.nrd-square-chkbox + label:after {
+  opacity: 1;
+  transform: scale(1);
+}
+/* ---------------------------------*/
+/*  End square Checkbox             */
+/* ---------------------------------*/
+
+/* ---------------------------------*/
+/*  Begin class content mgmt        */
+/* ---------------------------------*/
+
+
+.flex-row {
+  display: flex;
+  flex-direction: row !important;
+}
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.col-width-1 {
+  width: 10%;
+}
+.col-width-2 {
+  width: 20%;
+}
+.col-width-3 {
+  width: 30%;
+}
+.col-width-4 {
+  width: 40%;
+}
+.col-width-5 {
+  width: 50%;
+}
+.col-width-6 {
+  width: 60%;
+}
+.col-width-7 {
+  width: 70%;
+}
+.col-width-8 {
+  width: 80%;
+}
+.col-width-9 {
+  width: 90%;
+}
+.col-width-10 {
+  width: 100%;
+}
+
+.align-v-center {
+  display:flex;
+  align-items: center;
+}
+
+.align-h-center {
+  display:flex;
+  justify-content: center;
+}
+
+/* ---------------------------------*/
+/*    End class content mgmt        */
+/* ---------------------------------*/
+
+
+/* ---------------------------------- */
+/*  Begin btn-sort         */
+/* ---------------------------------- */
+
+.btn-sort {
+  position: relative;
+  top: -6px;
+  border:none;
+  background:none;
+  border-radius: 0;
+  margin-left:5px;
+}
+
+.btn-sort:before{
+  content: '';
+  position: absolute;
+  left: -1px;
+  width: 0;
+  height: 0;
+  border-right: 10px solid transparent;
+  border-bottom: 10px solid @greydark;
+  border-left: 10px solid transparent;
+}
+
+.btn-sort:after{
+  content: '';
+  position: absolute;
+  right: -1px;
+  width: 0;
+  height: 0;
+  border-right: 10px solid transparent;
+  border-top: 10px solid @greydark;
+  border-left: 10px solid transparent;
+  @media screen and (max-width: 1349px) {
+    right: -5px;
+  }
+}
+
+.btn-sort.btn-sort-asc:before{
+  border-bottom: 10px solid @main-color-theme;
+}
+
+.btn-sort.btn-sort-desc:after{
+  border-top: 10px solid @main-color-theme;
+}
+
+/* ---------------------------------- */
+/*  End btn-sort           */
+/* ---------------------------------- */
+
+
+/* ---------------------------------- */
+/*  Begin defaut colour class         */
+/* ---------------------------------- */
+
+.dark-color {
+  background-color: @dark-color-theme !important;
+  color: @font-color-for-dark !important;
+}
+.main-color {
+  background-color: @main-color-theme !important;
+  color: @font-color-for-main !important;
+}
+.medium-color {
+  background-color: @medium-color-theme !important;
+  color: @font-color-for-medium !important;
+}
+.light-color {
+  background-color: @light-color-theme !important;
+  color: @font-color-for-light !important;
+}
+.light2-color {
+  background-color: @light2-color-theme !important;
+  color: @font-color-for-light !important;
+}
+
+.grey-color {
+  background-color: @grey !important;
+}
+.darkgrey-color {
+  background-color: @greydark !important;
+}
+
+/* begin lookup widget */
+.ui-dialog {
+  opacity: 1;
+  z-index: 50;
+}
+
+.ui-dialog-titlebar.ui-widget-header.ui-corner-all.ui-helper-clearfix {
+  background: none !important;
+  background-color: @dark-color-theme !important;
+  button {
+    background: none;
+    background-color: @light-color-theme;
+  }
+}
+/* end lookup widget */
+
+.main-bar-label {
+  color: @light-color-theme;
+  padding-left: 3px;
+  padding-right: 6px;
+  font-size: 15px;
+  font-weight: bold;
+}
+
+#company-logo {
+  right: 10px;
+  top: 2px;
+  background: url("images/ofbiz-simple-white.svg") no-repeat left top / cover;
+  min-height: 50px;
+  min-width: 50px;
+  margin-right: 15px;
+  align-self: center;
+  @media screen and (min-width : 1232px) {
+    min-height: 50px;
+    min-width: 129px;
+    background: url("images/ofbiz_logo.svg") no-repeat left top / cover;
+  }
+}
+
+.modal-screen {
+  visibility: hidden;
+  display: flex;
+  flex-direction: column;
+  background-color: @grey;
+  opacity: .93;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 9999;
+}
+
+.modal-box{
+  background-color: @white;
+  opacity: 1;
+  margin: 10%;
+  border-radius: 10px;
+  border: solid 2px @main-color-theme;
+  padding : 10px 40px 10px 40px;
+  .modal-header {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    h2 {
+      font-size: 25px;
+      font-weight: normal;
+      color: @main-color-theme;
+    }
+    .btn-close-nrd {
+      position: absolute;
+      right: 0;
+      display: flex;
+      justify-content: center;
+      border: solid 1px @main-color-theme;
+      border-radius: 5px;
+      color: @main-color-theme;
+      font-size: 25px;
+      height: 30px;
+      width: 30px;
+      text-decoration: none !important;
+    }
+  }
+  .modal-body {
+    p {
+      font-size: 20px;
+    }
+  }
+  .modal-footer {
+    position: relative;
+    height: 35px;
+    display: flex;
+    justify-content: flex-end;
+    .btn-nrd {
+      background: none;
+      border: none;
+      text-shadow: none;
+      opacity: 1;
+      margin-right: 10px;
+      font-size: 20px;
+      padding: 5px;
+      border-radius: 8px;
+    }
+    .btn-nrd-main {
+      background-color: @main-color-theme;
+      color: @white;
+    }
+    .btn-nrd-std {
+      background-color: @white;
+      color: @main-color-theme;
+      border: solid 1px @main-color-theme !important;
+    }
+  }
+}
+.btn-nrd:hover {
+  box-shadow: 5px 5px 3px 0 @black;
+}
+
+.btn-nrd-std:hover {
+  background-color: @main-color-theme !important;
+  color: @white !important;
+  border: solid 1px @main-color-theme !important;
+}
+
+.btn-close-nrd:hover {
+  background-color: @main-color-theme !important;
+  color: @white !important;
+}
+
+.list-nrd {
+  border: solid 2px @main-color-theme;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  margin-top: 15px;
+  margin-bottom: 15px;
+  .title-list-nrd {
+    background-color: @main-color-theme;
+    color : @white;
+    font-size: 20px;
+    font-weight: bold;
+    padding-left: 5px;
+  }
+
+  li {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    font-size: 20px;
+    padding-left: 5px;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    margin-bottom: 3px;
+    a {
+      color: @main-color-theme;
+    }
+    span {
+      position: absolute;
+      right: 0;
+      color: @main-color-theme;
+      font-size: 30px;
+    }
+  }
+}
+li.line-odd {
+  background-color: @light-color-theme;
+}
+
+#user-avatar {
+  height: 40px;
+  width: 40px;
+  padding: 2px;
+
+  align-self: center;
+
+  :hover {
+    cursor: pointer;
+  }
+  img {
+    max-height: 40px;
+    max-width: 40px;
+    position: relative;
+    top: -2px;
+    padding: 2px;
+    background-color: @white;
+    border-radius: 2px;
+  }
+}
+
+#main-navigation-bar {
+  position: relative;
+  width: 100%;
+  min-width: @min-container-width;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  font-family: Quicksand,sans-serif;
+  background-color: @dark-color-theme;
+  z-index: 5;
+  height: @app-bar-height;
+}
+#main-nav-bar-left {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+#main-nav-bar-right {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding-right: 15px;
+}
+
+.app-btn{
+  height: @app-bar-height;
+  background-color: @dark-color-theme;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  margin-right: 2px;
+  margin-left: 2px;
+  a {
+    padding:10px;
+    color: @font-color-for-dark;
+    font-size: 1.4em !important;
+  }
+}
+
+.app-btn a:visited {
+  color: @font-color-for-dark;
+}
+
+.app-btn:hover{
+  position: relative;
+  top: -6px;
+  background-color: @main-color-theme;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+  box-shadow: 1px 1px 12px @shadow-color;
+  a {
+    position: relative;
+    top: 6px;
+    color : @font-color-for-main;
+  }
+}
+.app-btn.selected:hover {
+  background-color: @dark-color-theme;
+  box-shadow: none;
+  top:0;
+}
+
+.app-btn a:hover {
+  text-decoration: none;
+}
+#app-selected {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: @main-color-theme;
+  box-shadow: 1px -2px 12px @shadow-color;
+  z-index: 0;
+  opacity: .99;
+  border-top-left-radius : 8px ;
+  border-top-right-radius : 8px ;
+  a {
+    position: relative;
+    top: 3px;
+    color: @font-color-for-main;
+  }
+}
+.app-btn.selected a:hover {
+  text-decoration: none;
+}
+
+#app-bar-line {
+  position: relative;
+  width: 100%;
+  min-width: @min-container-width;
+  height: @color-line-height;
+  background-color: @main-color-theme;
+  box-shadow: 2px 2px 5px @shadow-color;
+}
+#color-add {
+  width: 150px;
+  background-color: @main-color-theme;
+  height: @color-line-height;
+  z-index: 20;
+  position: relative;
+  top: @color-line-height;
+}
+
+#more-app {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  font-size: 1.4em !important;
+  width: 40px;
+  height: @app-bar-height;
+  color: @font-color-for-dark;
+}
+#more-app:hover {
+  background-color: @main-color-theme;
+  text-decoration: none;
+}
+#more-app:hover #more-app-list {
+  display: block;
+}
+#more-app.selected {
+  background-color: @main-color-theme;
+}
+
+#more-app-list {
+  display: none;
+  position: absolute;
+  top: @app-bar-height;
+  left: -20px;
+  background-color: @dark-color-theme;
+  z-index: 10;
+  border: solid 4px @main-color-theme;
+  border-top-width: @color-line-height;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  li {
+    padding-left : 4px;
+    padding-right: 4px;
+  }
+
+  a {
+    color: @font-color-for-dark;
+    font-size: 15px;
+  }
+
+  :hover {
+    background-color: @medium-color-theme;
+    a {
+      box-shadow: none;
+      color: @dark-color-theme;
+    }
+    a:hover{
+      box-shadow: none;
+      text-decoration: none;
+      border-radius: 0;
+    }
+  }
+
+  li.selected {
+    background-color: @main-color-theme;
+    a {
+      color: @font-color-for-main;
+    }
+    a:hover {
+      color: @font-color-for-main;
+      background-color: @main-color-theme;
+    }
+  }
+}
+
+#homeButton {
+  display: flex;
+  //visibility: hidden;
+  align-items: center;
+  justify-content: center;
+  background-color:@grey;
+  border: none;
+  border-radius : 0;
+
+  height: @app-bar-height;
+  width : @home-btn-width;
+  text-decoration: none;
+  img {
+    height: 25px;
+    transition: all .2s ease-in-out;
+  }
+}
+
+#homeButton:hover img {
+  transform: scale(1.1);
+}
+
+#app-bar-list {
+  display: flex;
+}
+
+#user-details {
+  position: absolute;
+  right: 20px;
+  top : 62px;
+  background-color: @dark-color-theme;
+  color : @font-color-for-dark;
+  font-size: 15px;
+  font-weight: bold;
+  padding-top: 5px;
+  padding-bottom: 10px;
+  z-index: 15;
+  box-shadow: 3px 3px 12px @shadow-color;
+  border-radius: 3px;
+  transition: all .1s ease-in-out;
+
+  img {
+    height: 50px;
+    background-color: @white;
+    padding: 4px;
+    border-radius : 3px;
+    margin-left: 10px;
+    margin-right: 5px;
+  }
+  #logout {
+    background-color: @white;
+    color: @dark-color-theme !important;
+    border-radius: 2px;
+    :hover {
+      text-decoration: none;
+    }
+  }
+}
+
+#user-details:after{
+  content: '';
+  position: absolute;
+  top: -10px;
+  right: 5px;
+  width: 0;
+  height: 0;
+  border-right: 10px solid transparent;
+  border-bottom: 10px solid @dark-color-theme;
+  border-left: 10px solid transparent;
+}
+
+a.user-pref-btn {
+  margin-top: 15px;
+  background-color: @dark-color-theme;
+  margin-left: 10px;
+  margin-right: 10px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  display: flex;
+  justify-content: center;
+  color: @font-color-for-dark !important;
+  :hover {
+    text-decoration: none;
+  }
+}
+
+#user-name {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-content: center;
+  padding-left : 5px;
+  padding-right : 5px;
+  span {
+    min-width: 100px;
+    padding-bottom : 5px;
+    padding-top : 5px;
+  }
+}
+
+#user-row1 {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  #user-lang {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-content: center;
+    padding-left: 10px;
+    padding-right: 10px;
+    span {
+      min-width: 30px;
+      color: @font-color-for-dark;
+    }
+  }
+}
+
+.appbar-btn-img {
+  height: @app-bar-height - 40px;
+}
+
+#help-btn {
+  font-size: 10px;
+  min-width: 20px;
+  margin-right: 15px;
+}
+/* Begin sub Menu section */
+
+#app-navigation {
+  height: @sub-app-bar-height;
+  border-right: solid 1px @black;
+  border-bottom: solid 1px @black;
+  width: 100%;
+  min-width: @min-container-width;
+  h2 {
+    display: none;
+  }
+  ul {
+    display: flex;
+    flex-direction: row;
+    background-color: @grey;
+    flex-grow: 1;
+  }
+  ul li ul li {
+    border-left: solid 1px @black;
+    height: @sub-app-bar-height;
+    display: flex;
+    align-items: center;
+    justify-items: center;
+    justify-content: center;
+    min-width: 75px;
+    padding-left: 6px;
+    padding-right: 6px;
+    font-family: "Quicksand", Arial, "Lucida Grande", sans-serif;
+    border-bottom: solid 1px @black;
+    font-size: 12px;
+    @media screen and (max-width: 1500px) {
+      font-size: 10px;
+      min-width: 65px;
+    }
+    @media screen and (max-width: 1300px) {
+      font-size: 10px;
+      min-width: 50px;
+    }
+    a {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+      height: 100%;
+      width: 100%;
+      text-decoration: none;
+    }
+  }
+}
+
+#app-navigation ul li ul li:last-child {
+  border-right: solid 1px @black;
+}
+
+#app-navigation ul li ul li:hover {
+  background-color: @main-color-theme;
+  min-height: @sub-app-bar-height;
+  position: relative;
+  //top: -1px;
+  a {
+    color: @white;
+    text-decoration: none;
+  }
+}
+#app-navigation ul li ul li.selected:hover {
+  a {
+    color: @black !important;
+  }
+}
+
+#app-navigation ul li ul li.selected {
+  background-color: @white;
+  position: relative;
+  top: 1px;
+  height: @sub-app-bar-height + 1px;
+  border-top-right-radius: 2px;
+  border-top-left-radius: 2px;
+  border-bottom: none;
+
+  :after {
+    content: '';
+    position: absolute;
+    top: -2px;
+    left: 5px;
+    width: 0;
+    height: 0;
+    border-right: 10px solid transparent;
+    border-top: 10px solid @main-color-theme;
+    border-left: 10px solid transparent;
+  }
+
+}
+
+
+/* End sub Menu section */
+
+/* begin sub Menu section 3rd level */
+
+.button-bar.tab-bar {
+  ul li ul li {
+    border: solid 1px @grey;
+    border-radius: 4px;
+    a {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  li.selected{
+    background-color: @main-color-theme;
+    a{
+      color: @font-color-for-main;
+    }
+  }
+  ul li ul li:hover {
+    background-color: @main-color-theme;
+    a {
+      color: @font-color-for-main ;
+    }
+  }
+}
+
+#third-level-menu-container {
+  display: flex;
+  flex-direction: row;
+}
+#working-area {
+  width: 100%;
+}
+
+#left-column-menu {
+  width: 100px;
+}
+
+.third-lvl-menu {
+  background-color: @dark-color-theme;
+  position: relative;
+  left: -10px;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  ul {
+    li {
+      ul {
+        position: relative;
+        top: 5px;
+        width: @third-lvl-width;
+      }
+    }
+  }
+  h2 {
+    visibility: hidden;
+  }
+}
+.third-level-item:last-child {
+  border-bottom: solid 1px @main-color-theme;
+}
+
+.third-level-item {
+  min-height: @third-lvl-height;
+  background-color: @dark-color-theme;
+  padding-right: 3px;
+  border-top: solid 1px @main-color-theme;
+
+  a, a:visited {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    color: @font-color-for-dark !important;
+    min-height: @third-lvl-height;
+    max-width: @third-lvl-width;
+    text-align: center;
+  }
+}
+.third-level-item.selected {
+  position: relative;
+  border-left: solid 9px @main-color-theme;
+  a, a:visited {
+    background-color: @white;
+    color: @dark-color-theme !important;
+  }
+  :after {
+    content: '';
+    position: absolute;
+    top: 5px;
+    left: 0;
+    width: 0;
+    height: 0;
+    border-top: 10px solid transparent;
+    border-left: 10px solid @main-color-theme;
+    border-bottom: 10px solid transparent;
+  }
+}
+
+.third-level-item a:hover {
+  background-color: @main-color-theme;
+  color: @font-color-for-main ;
+  text-decoration: none;
+}
+/* End 3rd level menu */
+
+
+
+/* Begin Home Menu for IB section */
+.fixed-nav-bar {
+  position: fixed !important;
+  width: 100%;
+}
+#nav-bar-offset {
+  height: @app-bar-height ;
+}
+
+#homeGlyph {
+  margin-left: 20px;
+  height: 20px;
+}
+
+#homePageTitle {
+  color: @white;
+  font-size: 20px;
+  font-weight: bold;
+  margin-right: 20px;
+  margin-left: 20px;
+}
+.home-menu-list {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.hp-applist {
+  display: flex;
+  flex-direction: row;
+  color : @white;
+  align-items: center;
+  .app-title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: @dark-color-theme;
+    height: @home-menu-tile-height;
+    padding: 5px 10px 5px 10px;
+    border-bottom: solid 1px @black;
+    span {
+      font-family: "Quicksand", Arial, "Lucida Grande", sans-serif !important;
+      font-size: 15px;
+      font-weight: bold;
+      width: 110px;
+      a {
+        display: flex;
+        justify-content: center;
+        color : @white;
+      }
+    }
+  }
+
+  .hp-menu-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    margin-left: 5px;
+    margin-right: 5px;
+    border: solid 2px @grey;
+    border-radius: 8px;
+    height: @home-menu-tile-height - 4px;
+    min-width: @home-menu-tile-min-width;
+    max-width: @home-menu-tile-max-width;
+    .menu-link {
+      font-size: 10px;
+      color: @black;
+      padding: 10px;
+    }
+    .star-link {
+      position: absolute;
+      height: 25px;
+      top: 5px;
+      right: 5px;
+    }
+  }
+
+}
+.hp-applist .app-title span a:hover {
+  text-decoration: none;
+}
+
+.hp-menu-item.favoriteItem {
+  border: solid 2px @dark-color-theme;
+}
+
+.hp-menu-item:hover {
+  box-shadow: 3px 3px 12px @shadow-color;
+  a {
+    text-decoration: none;
+  }
+}
+
+/* End Home Menu for IB section */
+
+/* Begin Login screenlet */
+#login-container {
+  #content-messages {
+    position: relative;
+    top: @app-bar-height;
+    border-radius: 4px;
+    width: 97%;
+    &.errorMessage {
+      background-color : @color-background-alert !important;
+      color: @color-font-alert !important;
+      border : solid 1px @color-border-alert !important;
+    }
+    &.eventMessage {
+      background-color : @color-background-success !important;
+      color: @color-font-success !important;
+      border : solid 1px @color-border-success !important;
+    }
+  }
+}
+#loginBar {
+  position: fixed;
+  top:0;
+  left: 0;
+  width: 100%;
+  height: @app-bar-height;
+  background-color: @dark-color-theme;
+  span {
+    background-color: @white;
+    color: @main-color-theme;
+    border-top-right-radius: 5px;
+    border-top-left-radius: 5px;
+    font-size: 25px;
+    position: relative;
+    top: @app-bar-height - 32px;
+    left: 15px;
+    padding: 5px 10px 5px 10px;
+  }
+  #company-logo {
+    position: absolute;
+  }
+}
+
+.login-screenlet {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+  max-width: 50em;
+  border-radius: 8px !important;
+  margin-top: 15%;
+  box-shadow: 3px 3px 12px @shadow-color;
+  .screenlet-title-bar {
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    margin:0;
+    padding:0;
+    h3{
+      padding-top:2px;
+      padding-bottom:2px;
+      background-color: @dark-color-theme !important;
+      color: @font-color-for-dark;
+      height: 100%;
+      width:100%;
+      text-shadow: none;
+      font-size: 25px;
+    }
+  }
+  .screenlet-body {
+    background-color: @main-color-theme !important;
+    form {
+      .button {
+        width: 150px;
+        border-radius: 4px;
+        background: none;
+        background-color: @dark-color-theme;
+        color: @font-color-for-dark;
+        text-shadow: none;
+        margin-top: 20px;
+        margin-bottom: 10px;
+      }
+
+      table {
+        tr {
+          width: 100%;
+          .label {
+            color: @font-color-for-main;
+            width: 25%;
+            font-size: 15px;
+          }
+          input {
+            width: 100%;
+          }
+          .buttontext,
+          [type="submit"] {
+            width: 150px;
+            border-radius: 4px;
+            background: none;
+            background-color: @dark-color-theme;
+            color: @font-color-for-dark;
+            text-shadow: none;
+          }
+          [name="GET_PASSWORD_HINT"] {
+            background-color: @font-color-for-dark;
+            color: @main-color-theme;
+            border: none;
+            width: 100%;
+          }
+          [name="EMAIL_PASSWORD"] {
+            background-color: @font-color-for-dark;
+            color: @main-color-theme;
+            border: none;
+            width: 100%;
+          }
+          td {
+            padding: 5px;
+            color: @font-color-for-main;
+            font-size: 15px;
+            font-weight: bold;
+          }
+        }
+      }
+    }
+    a {
+      color: @font-color-for-main;
+    }
+  }
+}
+
+.login-screenlet .screenlet-title-bar {
+  text-align: center;
+}
+
+/* End Login screenlet */
+
+
+/* --------------------------------------------- */
+/*      Begin Screenlet style                    */
+/* --------------------------------------------- */
+.screenlet-title-bar {
+  text-decoration: none ;
+  color: @dark-color-theme;
+  background-color: @grey;
+  height: 1%; /* IE fix */
+  min-height: 1.5em;
+  padding:0.8em 0.2em;
+}
+
+.screenlet {
+  border-radius: 5px;
+  border: solid 1px @grey;
+  height: auto !important;
+  margin-bottom: 1em;
+  overflow: auto;
+}
+
+.screenlet-body {
+  background-color: #FFFFFF;
+  height: auto !important;
+  height: 1%;
+  padding: 0.4em;
+}
+
+.screenlet-body div {
+  margin: 0.8em 0.1em
+}
+
+/* Special Screenlet style for locale and timezone window */
+.lists.screenlet {
+  margin-left: 25%;
+  margin-right: 25%;
+  margin-top: 1em;
+}
+
+.lists.screenlet .basic-table tr td {
+  text-align: center;
+}
+
+.lists.screenlet .basic-table tr td a {
+  display: block;
+}
+
+/*      Alternate table header style      */
+.basic-table .header-row-2 th,
+.basic-table .header-row-2 td {
+  background-color: @greydark;
+  border-bottom: 0;
+  border-left: 0.1em solid #aaa;
+  border-right: 0.1em solid #888;
+  color: #ffffff;
+  font-weight: bold;
+}
+
+/* No padding screenlet decorator */
+.no-padding {
+  padding: 0;
+  border: none;
+}
+
+.no-padding .h1,
+.no-padding .h2,
+.no-padding .h3,
+.no-paddingr h1,
+.no-padding h2,
+.no-padding h3 {
+  padding: 0.7em;
+}
+
+.screenlet-title-bar ul a:hover {
+  color: @main-color-theme !important;
+  text-decoration: none;
+}
+
+
+/* --------------------------------------------- */
+/*      End Screenlet style                      */
+/* --------------------------------------------- */
+
+/* ---------------------- */
+/*      Table Styles      */
+/* ---------------------- */
+
+.basic-table {
+  background-color: #ffffff;
+  color: #000000;
+  margin-bottom: 1em;
+  width: 100%;
+}
+
+form table,
+form .basic-table,
+.screenlet-body .basic-table {
+  background: transparent;
+  margin-bottom: 0;
+}
+
+.basic-table tr td {
+  /* Style for all cells */
+  padding: 0.8em 0.1em;
+  vertical-align: middle;
+}
+
+.basic-table tr .align-bottom {
+  vertical-align: bottom;
+}
+
+.basic-table tr .align-top {
+  vertical-align: top;
+}
+
+.basic-table tr .label,
+.basic-table tr .group-label {
+  /* field labels for forms */
+  font-weight: bold;
+  text-align: right;
+  padding-right: 1.5em;
+  white-space: nowrap;
+  width: 1%;
+}
+
+.basic-table tr .group-label {
+  /* "header" for field label groups */
+  font-size: 1.2em;
+  padding: 2em 1.5em 0 0;
+}
+
+.basic-table tr th,
+.basic-table .header-row {
+  font-weight: bold;
+  text-align: left;
+}
+
+.basic-table .header-row td {
+  border-bottom: 0.1em solid #000000;
+}
+
+.basic-table .header-row td a {
+  color: #000000;
+}
+
+.basic-table .alternate-row {
+  /* Alternating row style */
+  background-color: #eeeeee;
+}
+
+.basic-table .selected {
+  background: #FFFCCF;
+}
+
+.basic-table .alternate-rowSelected {
+  background: #FFF55F;
+}
+
+.basic-table .Validate {
+  /*Style use by alt-row-style on list*/
+  background: #A0D5F7;
+}
+
+.basic-table .alternate-rowValidate {
+  /*Style use by alt-row-style on list*/
+  background: #72A8F2;
+}
+
+.basic-table .Warn {
+  /*Style use by alt-row-style on list*/
+  background: #f55C5C;
+}
+
+.basic-table .alternate-rowWarn {
+  /*Style use by alt-row-style on list*/
+  background: #FC7455;
+}
+
+.basic-table tr .button-col {
+  /* button column style - for the small
+  collection of buttons used in lists */
+  vertical-align: top;
+  padding: 0.3em;
+}
+.basic-table tr .button-col a,
+.basic-table tr .button-col button,
+.basic-table tr .button-col input[type="reset"],
+.basic-table tr .button-col input[type="submit"],
+.basic-table tr .button-col input[type="button"] {
+  -webkit-appearance: none;
+  -moz-border-radius: 1em;
+  -webkit-border-radius: 1em;
+  border-radius: 2px;
+  border: 0.1em solid @main-color-theme;
+  background-color: @white;
+  cursor: pointer;
+  color: @main-color-theme;
+  display:inline-block;
+  font-size: 0.9em;
+  font-weight: bold;
+  outline: 0;
+  overflow: visible;
+  padding: 0.1em 0.5em 0.2em 0.5em;
+  text-decoration: none;
+  width: auto;
+
+  &:hover {
+    background-color: @main-color-theme;
+    color: @white;
+  }
+}
+
+.basic-table .collapsed {
+  visibility: collapse;
+}
+
+/*      Sort field style      */
+.basic-table .header-row-2 th .sort-order-asc,
+.basic-table .header-row-2 td .sort-order-asc{
+  background: url(/images/arrow-gr-up.png) no-repeat right;
+  padding-left: 0.5em;
+  padding-right: 20px; /* Setting must be in px */
+}
+.basic-table .header-row-2 th .sort-order-desc,
+.basic-table .header-row-2 td .sort-order-desc{
+  background: url(/images/arrow-gr-dw.png) no-repeat right;
+  padding-left: 0.5em;
+  padding-right: 20px; /* Setting must be in px */
+}
+.basic-table .header-row-2 th .sort-order,
+.basic-table .header-row-2 td .sort-order{
+  background: url(/images/arrow-gr.png) no-repeat right;
+  padding-left: 0.5em;
+  padding-right: 20px; /* Setting must be in px */
+  color:#fff
+}
+
+
+/* --------------------------------------------- */
+/*      Begin Message Info                       */
+/* --------------------------------------------- */
+.count-message {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height:20px;
+  min-width: 20px;
+  max-height:20px;
+  max-width: 20px;
+  background: @white;
+  font-size:12px;
+  font-weight: bold;
+  border-radius: 50%;
+}
+.info-message-title {
+  min-width:150px;
+  margin: 5px;
+  font-family: "Quicksand", Arial, "Lucida Grande", sans-serif;
+  font-size: 16px;
+  font-weight: bold;
+}
+.message-list {
+  position:relative;
+  margin-top: 10px;
+  box-shadow: 1px 3px 5px @greydark;
+  border-radius: 0 5px 5px 0;
+  transition: height 2s;
+}
+.message-list-main {
+  padding: 5px 15px 5px 15px;
+}
+.message-list-alert {
+  background-color: @color-alert;
+  border-left : solid 5px @color-alert-dark;
+  .count-message {
+    color: @color-alert-dark;
+  }
+}
+.message-list-success {
+  background-color: @color-success;
+  border-left: solid 5px @color-success-dark;
+  .count-message {
+    color: @color-success-dark;
+  }
+}
+.message-list-table-container {
+  background-color: @white;
+  border-radius: 5px;
+  overflow: hidden;
+  height: 0;
+}
+.info-message-success {
+  display: none;
+}
+.info-message-alert {
+  display: none;
+}
+table.msg-list {
+  width: 100%;
+  font-size: 16px;
+  font-family: "Quicksand", Arial, "Lucida Grande", sans-serif;
+  padding: 0;
+  thead {
+    height: 100%;
+    background-color: @grey;
+    margin: 0;
+    padding: 0;
+    tr{
+      font-weight: bold;
+      border-bottom: solid 1px @black;
+      height: 100%;
+      background-color: @grey;
+      line-height: 30px;
+    }
+  }
+  tbody {
+    tr {
+      line-height: 25px;
+    }
+    tr.msg-row-success {
+      background-color: @color-success;
+    }
+    tr.msg-row-alert {
+      background-color: @color-alert;
+    }
+  }
+  td {
+    padding-left: 5px;
+  }
+}
+
+/* --------------------------------------------- */
+/*      End  Message Info                        */
+/* --------------------------------------------- */
+
+/* ---------------------- */
+/*     Paginate Style     */
+/* ---------------------- */
+
+.paginate-bar-nrd {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-size: 15px;
+  background-color: @grey;
+  padding-left: 10px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  box-shadow: 0 2px 5px @shadow-color;
+
+  ul.paginate-pg-list {
+    display: flex;
+    flex-direction: row;
+    background-color: @white;
+    color: @main-color-theme;
+    margin-right: 10px;
+    border-radius: 8px;
+    border: solid 1px @box-border-color;
+    height: 18px;
+    li {
+      display: flex;
+      justify-content: center;
+      min-width: 17px;
+      border-right: solid 1px @box-border-color;
+      padding-left: 2px;
+      padding-right: 2px;
+      height:100%;
+      a {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-family: "Quicksand", Arial, "Lucida Grande", sans-serif;
+        color: @dark-color-theme;
+        height: 100%;
+        width: 100%;
+      }
+      .paginate-disable {
+
+      }
+    }
+    li.selected {
+      background-color: @main-color-theme;
+      a {
+        color: @font-color-for-main;
+      }
+    }
+    li:first-child, li:last-child {
+      width: 20px;
+    }
+    li:first-child {
+      border-top-left-radius: 3px;
+      border-bottom-left-radius: 3px;
+    }
+    li:last-child {
+      border-right: none;
+      border-top-right-radius: 3px;
+      border-bottom-right-radius: 3px;
+    }
+  }
+
+}
+select.paginate-select {
+  position: relative;
+  background: @white;
+  font-size: 16px;
+  font-weight: bold;
+  border: 1px solid @box-border-color;
+  option {
+    display: flex;
+    justify-self: center;
+    font-size: 14px;
+  }
+}
+
+.paginate-select-label {
+  font-family: "Quicksand", Arial, "Lucida Grande", sans-serif;
+  font-size: 16px;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+.paginate-information {
+  font-family: "Quicksand", Arial, "Lucida Grande", sans-serif;
+  font-size: 16px;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+ul.paginate-pg-list li:hover{
+  background-color: @main-color-theme;
+  a {
+    text-decoration: none;
+    color: @font-color-for-main;
+  }
+}
+
+/* End of Paginate Style  */
+/* ---------------------- */
+
+/* ------------------------------- */
+/*      List Navigation Style      */
+/* ------------------------------- */
+
+.nav-pager {
+  background-color: @greydark;
+  color: @white;
+  font-family: "Quicksand", Arial, "Lucida Grande", sans-serif;
+  font-size: 9px;
+  font-weight: bold;
+  line-height: 3.5em;
+  height: 3.5em;
+  margin: 0.5em 0 0.5em 0;
+  border-radius: 3px 3px 0 0;
+}
+
+.nav-pager ul {
+  display: inline; /* IE Fix */
+}
+
+.nav-pager ul li {
+  float:left;
+  vertical-align: middle;
+}
+
+.nav-pager ul li a {
+  display: block;
+}
+
+.nav-pager ul a {
+  color: @white;
+  padding: 0 1em 0 1em;
+  text-decoration: none;
+}
+
+.nav-pager ul a:hover {
+  background-color: @main-color-theme;
+  color: @font-color-for-main;
+}
+
+.nav-pager ul .nav-pagesize,
+.nav-pager ul .nav-page-select,
+.nav-pager ul .nav-displaying {
+  padding: 0 1em 0 1em;
+}
+
+.nav-pager ul .nav-first-disabled,
+.nav-pager ul .nav-previous-disabled,
+.nav-pager ul .nav-next-disabled,
+.nav-pager ul .nav-last-disabled {
+  padding: 0 1em 0 1em;
+}
+
+.nav-pager ul .nav-first-disabled:hover,
+.nav-pager ul .nav-previous-disabled:hover,
+.nav-pager ul .nav-next-disabled:hover,
+.nav-pager ul .nav-last-disabled:hover {
+  cursor: not-allowed;
+}
+
+
+.nav-pager ul .nav-displaying {
+  border-right: none;
+}
+
+
+/* ---------------------------- */
+/*     Multi-Column Styles      */
+/* ---------------------------- */
+
+#column-container {
+  margin: auto;
+  padding: 1em;
+  position: relative;
+  min-width: @min-container-width;
+}
+
+#column-container h1,
+#column-container .h1,
+#column-container h2,
+#column-container .h2 {
+  margin-bottom: 0.5em;
+}
+
+#column-container h1,
+#column-container .h1 {
+  color: #557996;
+}
+
+#column-container .left {
+  float: left;
+  /* alt: position: absolute; top: 0px; left: 0px; */
+  width: 22em;
+  margin-right: 1em;
+}
+
+#column-container .left-larger {
+  float: left;
+  /* alt: position: absolute; top: 0px; left: 0px; */
+  width: 25em;
+  margin-right: 1em;
+}
+
+.lefthalf {
+  float: left;
+  height: 1%;
+  left: 0;
+  margin: 0% 1% 1% 0%;
+  width: 49%;
+}
+
+.righthalf {
+  float: right;
+  height: 1%;
+  margin: 0 0 1% 1%;
+  right: 0;
+  width: 49%;
+}
+
+#column-container .right {
+  float: right;
+  margin-left: 1em;
+  width: 22em;
+}
+
+#column-container .leftonly {
+  margin-left: 23em;
+  width: auto;
+}
+
+#column-container .leftonly-larger {
+  margin-left: 26em;
+  width: auto;
+}
+
+#column-container .rightonly {
+  margin-right: 23em;
+  width: auto;
+}
+
+#column-container .center {
+  margin-left: 23em;
+  margin-right: 23em;
+  width: auto;
+}
+
+#column-container .nocolumns {
+  width: auto;
+}
+
+/* ---------------------- */
+/*      Button Style      */
+/* ---------------------- */
+
+.button-bar li.buttontext a,
+a.buttontext,
+a.buttontextbig,
+.smallSubmit,
+.smallSubmit:hover,
+.mediumSubmit,
+.largeSubmit,
+.loginButton,
+.button-style-1 a,
+.button-style-1 ul a,
+.button-style-2 ul a,
+.button-style-2 a,
+.button,
+button,
+input[type="reset"],
+input[type="submit"],
+input[type="button"] {
+  -webkit-appearance: none;
+  -moz-border-radius: 1.1em;
+  -webkit-border-radius: 1.1em;
+  border-radius: 2px;
+  border: 0.1em solid @main-color-theme;
+  background-color: @white;
+  cursor: pointer;
+  color: @main-color-theme;
+  display:inline-block;
+  font-size: 1em;
+  font-weight: bold;
+  outline: 0;
+  overflow: visible;
+  padding: 0.4em 1em 0.4em;
+  text-decoration:none;
+  /*text-transform:uppercase;*/
+  width: auto;
+
+  /* IE7 */
+  *padding-top: 0.2em;
+  *padding-bottom: 0;
+  &:hover {
+    color: @font-color-for-main;
+    background-color: @main-color-theme;
+  }
+}
+
+
+/* ---------------------- */
+/*      Footer Style      */
+/* ---------------------- */
+
+#footer {
+  background: @dark-color-theme;
+  border-top: 0.1em inset #000;
+  padding: 0.5em 0 0.5em 0.5em;
+
+  height: @footer-height;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  font-family: "Quicksand", Arial, "Lucida Grande", sans-serif !important;
+  z-index: 10;
+
+  span {
+    color: @font-color-for-dark;
+    padding: 10px;
+  }
+
+  a {
+    color: @font-color-for-dark;
+    font-weight: normal;
+  }
+}
+
+#footer a:focus {
+  text-decoration: underline;
+}
+
+#footer-offset {
+  height: @footer-height + 10px;
+  width: 100%;
+}
+/* common colors */
+@black: #000;
+@white: #fff;
+@grey: #e6e6e6;
+@greydark: #929292;
+
+@color-success: #8cff8c;
+@font-color-for-success: @black;
+@color-alert: #ff8c8c;
+@font-color-for-alert: @black;
+
+@color-success-dark: #356e35;
+@font-color-for-success: @black;
+@color-alert-dark: #932f33;
+@font-color-for-alert: @black;
+
+@color-background-alert: #f2dede;
+@color-font-alert: #a94442;
+@color-border-alert: #ebccd1;
+
+@color-background-success: #dff0d8;
+@color-font-success: #3c763d;
+@color-border-success: #d6e9c6;
+
+@app-bar-height: 60px;
+@sub-app-bar-height: 40px;
+@footer-height: 20px;
+@home-btn-width: 47px;
+@color-line-height: 9px;
+
+@home-menu-tile-height: 80px;
+@home-menu-tile-min-width: 100px;
+@home-menu-tile-max-width: 100px;
+
+@third-lvl-height: 80px;
+@third-lvl-width : 100px;
+@min-screen : 1170px;
+@min-container-width: 1130px;
+
+@box-border-color: #d7d7d7;
+
+@font-face {
+  font-family: "Quicksand", Arial, "Lucida Grande", sans-serif;
+  src: url('fonts/quicksand/quicksandbold.otf');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Quicksand", Arial, "Lucida Grande", sans-serif;
+  src: url('fonts/quicksand/quicksandbold.otf');
+  font-weight: bold;
+  font-style: normal;
+}
+
+/* ---------------------------------- */
+/* Begin special checkbox type switch */
+/* ---------------------------------- */
+
+[type="checkbox"]:not(:checked).nrd-chkbox, [type="checkbox"]:checked.nrd-chkbox {
+  display: none;
+}
+
+[type="checkbox"]:not(:checked).nrd-chkbox + label,
+[type="checkbox"]:checked.nrd-chkbox + label{
+  cursor: pointer;
+}
+[type="checkbox"]:not(:checked).nrd-chkbox + label:before,
+[type="checkbox"]:checked.nrd-chkbox + label:before{
+  content: "";
+  width: 150px;
+  min-width: 150px;
+  background-color: @light-color-theme;
+  padding: 2px 20px 2px 20px;
+  border-radius: 8px 8px 8px 8px;
+
+  cursor: pointer;
+}
+
+[type="checkbox"]:not(:checked).nrd-chkbox + label:after,
+[type="checkbox"]:checked.nrd-chkbox + label:after{
+  content: "";
+  position: relative;
+  left:-35px;
+  background-color: @dark-color-theme;
+  min-height: 10px;
+  min-width: 10px;
+  padding-left: 4px;
+  padding-right: 5px;
+  border-radius: 8px 8px 8px 8px;
+  transition: all .2s;
+}
+
+[type="checkbox"]:checked.nrd-chkbox + label:after{
+  position: relative;
+  left: -15px;
+  transition: all .2s;
+}
+/* ---------------------------------- */
+/* End special checkbox type switch */
+/* ---------------------------------- */
+
+/* ---------------------------------- */
+/*  Begin square Checkbox             */
+/* ---------------------------------- */
+
+[type="checkbox"]:not(:checked).nrd-square-chkbox,
+[type="checkbox"]:checked.nrd-square-chkbox{
+  position: absolute;
+  left: -9999px;
+}
+
+[type="checkbox"]:not(:checked).nrd-square-chkbox + label,
+[type="checkbox"]:checked.nrd-square-chkbox + label{
+  content: '';
+  padding-left: 35px;
+  position: relative;
+  cursor: pointer;
+  font-family: "Quicksand", Arial, "Lucida Grande", sans-serif;
+  font-size: 12px;
+
+}
+[type="checkbox"]:not(:checked).nrd-square-chkbox + label:before,
+[type="checkbox"]:checked.nrd-square-chkbox + label:before{
+  content: '';
+  position: absolute;
+  left:10px;
+  top: -4px;
+  width: 17px;
+  height: 17px; /* dim. de la case */
+  border: 1px solid #aaa;
+  background: @light-color-theme;
+  border-radius: 2px;
+}
+
+[type="checkbox"]:not(:checked).nrd-square-chkbox + label:before {
+  background: @light-color-theme;
+}
+[type="checkbox"]:checked.nrd-square-chkbox + label:before{
+  background: @main-color-theme;
+}
+
+[type="checkbox"]:not(:checked).nrd-square-chkbox + label:after,
+[type="checkbox"]:checked.nrd-square-chkbox + label:after{
+  content: '✔';
+  position: absolute;
+  top: -4px;
+  left: 14px;
+  font-size: 16px;
+  color: @font-color-for-main;
+  transition: all .2s;
+}
+[type="checkbox"]:not(:checked).nrd-square-chkbox + label:after {
+  opacity: 0;
+  transform: scale(0);
+}
+[type="checkbox"]:checked.nrd-square-chkbox + label:after {
+  opacity: 1;
+  transform: scale(1);
+}
+/* ---------------------------------*/
+/*  End square Checkbox             */
+/* ---------------------------------*/
+
+/* ---------------------------------*/
+/*  Begin class content mgmt        */
+/* ---------------------------------*/
+
+
+.flex-row {
+  display: flex;
+  flex-direction: row !important;
+}
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.col-width-1 {
+  width: 10%;
+}
+.col-width-2 {
+  width: 20%;
+}
+.col-width-3 {
+  width: 30%;
+}
+.col-width-4 {
+  width: 40%;
+}
+.col-width-5 {
+  width: 50%;
+}
+.col-width-6 {
+  width: 60%;
+}
+.col-width-7 {
+  width: 70%;
+}
+.col-width-8 {
+  width: 80%;
+}
+.col-width-9 {
+  width: 90%;
+}
+.col-width-10 {
+  width: 100%;
+}
+
+.align-v-center {
+  display:flex;
+  align-items: center;
+}
+
+.align-h-center {
+  display:flex;
+  justify-content: center;
+}
+
+/* ---------------------------------*/
+/*    End class content mgmt        */
+/* ---------------------------------*/
+
+
+/* ---------------------------------- */
+/*  Begin btn-sort         */
+/* ---------------------------------- */
+
+.btn-sort {
+  position: relative;
+  top: -6px;
+  border:none;
+  background:none;
+  border-radius: 0;
+  margin-left:5px;
+}
+
+.btn-sort:before{
+  content: '';
+  position: absolute;
+  left: -1px;
+  width: 0;
+  height: 0;
+  border-right: 10px solid transparent;
+  border-bottom: 10px solid @greydark;
+  border-left: 10px solid transparent;
+}
+
+.btn-sort:after{
+  content: '';
+  position: absolute;
+  right: -1px;
+  width: 0;
+  height: 0;
+  border-right: 10px solid transparent;
+  border-top: 10px solid @greydark;
+  border-left: 10px solid transparent;
+  @media screen and (max-width: 1349px) {
+    right: -5px;
+  }
+}
+
+.btn-sort.btn-sort-asc:before{
+  border-bottom: 10px solid @main-color-theme;
+}
+
+.btn-sort.btn-sort-desc:after{
+  border-top: 10px solid @main-color-theme;
+}
+
+/* ---------------------------------- */
+/*  End btn-sort           */
+/* ---------------------------------- */
+
+
+/* ---------------------------------- */
+/*  Begin defaut colour class         */
+/* ---------------------------------- */
+
+.dark-color {
+  background-color: @dark-color-theme !important;
+  color: @font-color-for-dark !important;
+}
+.main-color {
+  background-color: @main-color-theme !important;
+  color: @font-color-for-main !important;
+}
+.medium-color {
+  background-color: @medium-color-theme !important;
+  color: @font-color-for-medium !important;
+}
+.light-color {
+  background-color: @light-color-theme !important;
+  color: @font-color-for-light !important;
+}
+.light2-color {
+  background-color: @light2-color-theme !important;
+  color: @font-color-for-light !important;
+}
+
+.grey-color {
+  background-color: @grey !important;
+}
+.darkgrey-color {
+  background-color: @greydark !important;
+}
+
+/* begin lookup widget */
+.ui-dialog {
+  opacity: 1;
+  z-index: 50;
+}
+
+.ui-dialog-titlebar.ui-widget-header.ui-corner-all.ui-helper-clearfix {
+  background: none !important;
+  background-color: @dark-color-theme !important;
+  button {
+    background: none;
+    background-color: @light-color-theme;
+  }
+}
+/* end lookup widget */
+
+.main-bar-label {
+  color: @light-color-theme;
+  padding-left: 3px;
+  padding-right: 6px;
+  font-size: 15px;
+  font-weight: bold;
+}
+
+#company-logo {
+  right: 10px;
+  top: 2px;
+  background: url("images/ofbiz-simple-white.svg") no-repeat left top / cover;
+  min-height: 50px;
+  min-width: 50px;
+  margin-right: 15px;
+  align-self: center;
+  @media screen and (min-width : 1232px) {
+    min-height: 50px;
+    min-width: 129px;
+    background: url("images/ofbiz_logo.svg") no-repeat left top / cover;
+  }
+}
+
+.modal-screen {
+  visibility: hidden;
+  display: flex;
+  flex-direction: column;
+  background-color: @grey;
+  opacity: .93;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 9999;
+}
+
+.modal-box{
+  background-color: @white;
+  opacity: 1;
+  margin: 10%;
+  border-radius: 10px;
+  border: solid 2px @main-color-theme;
+  padding : 10px 40px 10px 40px;
+  .modal-header {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    h2 {
+      font-size: 25px;
+      font-weight: normal;
+      color: @main-color-theme;
+    }
+    .btn-close-nrd {
+      position: absolute;
+      right: 0;
+      display: flex;
+      justify-content: center;
+      border: solid 1px @main-color-theme;
+      border-radius: 5px;
+      color: @main-color-theme;
+      font-size: 25px;
+      height: 30px;
+      width: 30px;
+      text-decoration: none !important;
+    }
+  }
+  .modal-body {
+    p {
+      font-size: 20px;
+    }
+  }
+  .modal-footer {
+    position: relative;
+    height: 35px;
+    display: flex;
+    justify-content: flex-end;
+    .btn-nrd {
+      background: none;
+      border: none;
+      text-shadow: none;
+      opacity: 1;
+      margin-right: 10px;
+      font-size: 20px;
+      padding: 5px;
+      border-radius: 8px;
+    }
+    .btn-nrd-main {
+      background-color: @main-color-theme;
+      color: @white;
+    }
+    .btn-nrd-std {
+      background-color: @white;
+      color: @main-color-theme;
+      border: solid 1px @main-color-theme !important;
+    }
+  }
+}
+.btn-nrd:hover {
+  box-shadow: 5px 5px 3px 0 @black;
+}
+
+.btn-nrd-std:hover {
+  background-color: @main-color-theme !important;
+  color: @white !important;
+  border: solid 1px @main-color-theme !important;
+}
+
+.btn-close-nrd:hover {
+  background-color: @main-color-theme !important;
+  color: @white !important;
+}
+
+.list-nrd {
+  border: solid 2px @main-color-theme;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  margin-top: 15px;
+  margin-bottom: 15px;
+  .title-list-nrd {
+    background-color: @main-color-theme;
+    color : @white;
+    font-size: 20px;
+    font-weight: bold;
+    padding-left: 5px;
+  }
+
+  li {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    font-size: 20px;
+    padding-left: 5px;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    margin-bottom: 3px;
+    a {
+      color: @main-color-theme;
+    }
+    span {
+      position: absolute;
+      right: 0;
+      color: @main-color-theme;
+      font-size: 30px;
+    }
+  }
+}
+li.line-odd {
+  background-color: @light-color-theme;
+}
+
+#user-avatar {
+  height: 40px;
+  width: 40px;
+  padding: 2px;
+
+  align-self: center;
+
+  :hover {
+    cursor: pointer;
+  }
+  img {
+    max-height: 40px;
+    max-width: 40px;
+    position: relative;
+    top: -2px;
+    padding: 2px;
+    background-color: @white;
+    border-radius: 2px;
+  }
+}
+
+#main-navigation-bar {
+  position: relative;
+  width: 100%;
+  min-width: @min-container-width;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  font-family: Quicksand,sans-serif;
+  background-color: @dark-color-theme;
+  z-index: 5;
+  height: @app-bar-height;
+}
+#main-nav-bar-left {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+#main-nav-bar-right {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding-right: 15px;
+}
+
+.app-btn{
+  height: @app-bar-height;
+  background-color: @dark-color-theme;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  margin-right: 2px;
+  margin-left: 2px;
+  a {
+    padding:10px;
+    color: @font-color-for-dark;
+    font-size: 1.4em !important;
+  }
+}
+
+.app-btn a:visited {
+  color: @font-color-for-dark;
+}
+
+.app-btn:hover{
+  position: relative;
+  top: -6px;
+  background-color: @main-color-theme;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+  box-shadow: 1px 1px 12px @shadow-color;
+  a {
+    position: relative;
+    top: 6px;
+    color : @font-color-for-main;
+  }
+}
+.app-btn.selected:hover {
+  background-color: @dark-color-theme;
+  box-shadow: none;
+  top:0;
+}
+
+.app-btn a:hover {
+  text-decoration: none;
+}
+#app-selected {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: @main-color-theme;
+  box-shadow: 1px -2px 12px @shadow-color;
+  z-index: 0;
+  opacity: .99;
+  border-top-left-radius : 8px ;
+  border-top-right-radius : 8px ;
+  a {
+    position: relative;
+    top: 3px;
+    color: @font-color-for-main;
+  }
+}
+.app-btn.selected a:hover {
+  text-decoration: none;
+}
+
+#app-bar-line {
+  position: relative;
+  width: 100%;
+  min-width: @min-container-width;
+  height: @color-line-height;
+  background-color: @main-color-theme;
+  box-shadow: 2px 2px 5px @shadow-color;
+}
+#color-add {
+  width: 150px;
+  background-color: @main-color-theme;
+  height: @color-line-height;
+  z-index: 20;
+  position: relative;
+  top: @color-line-height;
+}
+
+#more-app {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  font-size: 1.4em !important;
+  width: 40px;
+  height: @app-bar-height;
+  color: @font-color-for-dark;
+}
+#more-app:hover {
+  background-color: @main-color-theme;
+  text-decoration: none;
+}
+#more-app:hover #more-app-list {
+  display: block;
+}
+#more-app.selected {
+  background-color: @main-color-theme;
+}
+
+#more-app-list {
+  display: none;
+  position: absolute;
+  top: @app-bar-height;
+  left: -20px;
+  background-color: @dark-color-theme;
+  z-index: 10;
+  border: solid 4px @main-color-theme;
+  border-top-width: @color-line-height;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  li {
+    padding-left : 4px;
+    padding-right: 4px;
+  }
+
+  a {
+    color: @font-color-for-dark;
+    font-size: 15px;
+  }
+
+  :hover {
+    background-color: @medium-color-theme;
+    a {
+      box-shadow: none;
+      color: @dark-color-theme;
+    }
+    a:hover{
+      box-shadow: none;
+      text-decoration: none;
+      border-radius: 0;
+    }
+  }
+
+  li.selected {
+    background-color: @main-color-theme;
+    a {
+      color: @font-color-for-main;
+    }
+    a:hover {
+      color: @font-color-for-main;
+      background-color: @main-color-theme;
+    }
+  }
+}
+
+#homeButton {
+  display: flex;
+  //visibility: hidden;
+  align-items: center;
+  justify-content: center;
+  background-color:@grey;
+  border: none;
+  border-radius : 0;
+
+  height: @app-bar-height;
+  width : @home-btn-width;
+  text-decoration: none;
+  img {
+    height: 25px;
+    transition: all .2s ease-in-out;
+  }
+}
+
+#homeButton:hover img {
+  transform: scale(1.1);
+}
+
+#app-bar-list {
+  display: flex;
+}
+
+#user-details {
+  position: absolute;
+  right: 20px;
+  top : 62px;
+  background-color: @dark-color-theme;
+  color : @font-color-for-dark;
+  font-size: 15px;
+  font-weight: bold;
+  padding-top: 5px;
+  padding-bottom: 10px;
+  z-index: 15;
+  box-shadow: 3px 3px 12px @shadow-color;
+  border-radius: 3px;
+  transition: all .1s ease-in-out;
+
+  img {
+    height: 50px;
+    background-color: @white;
+    padding: 4px;
+    border-radius : 3px;
+    margin-left: 10px;
+    margin-right: 5px;
+  }
+  #logout {
+    background-color: @white;
+    color: @dark-color-theme !important;
+    border-radius: 2px;
+    :hover {
+      text-decoration: none;
+    }
+  }
+}
+
+#user-details:after{
+  content: '';
+  position: absolute;
+  top: -10px;
+  right: 5px;
+  width: 0;
+  height: 0;
+  border-right: 10px solid transparent;
+  border-bottom: 10px solid @dark-color-theme;
+  border-left: 10px solid transparent;
+}
+
+a.user-pref-btn {
+  margin-top: 15px;
+  background-color: @dark-color-theme;
+  margin-left: 10px;
+  margin-right: 10px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  display: flex;
+  justify-content: center;
+  color: @font-color-for-dark !important;
+  :hover {
+    text-decoration: none;
+  }
+}
+
+#user-name {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-content: center;
+  padding-left : 5px;
+  padding-right : 5px;
+  span {
+    min-width: 100px;
+    padding-bottom : 5px;
+    padding-top : 5px;
+  }
+}
+
+#user-row1 {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  #user-lang {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-content: center;
+    padding-left: 10px;
+    padding-right: 10px;
+    span {
+      min-width: 30px;
+      color: @font-color-for-dark;
+    }
+  }
+}
+
+.appbar-btn-img {
+  height: @app-bar-height - 40px;
+}
+
+#help-btn {
+  font-size: 10px;
+  min-width: 20px;
+  margin-right: 15px;
+}
+/* Begin sub Menu section */
+
+#app-navigation {
+  height: @sub-app-bar-height;
+  border-right: solid 1px @black;
+  border-bottom: solid 1px @black;
+  width: 100%;
+  min-width: @min-container-width;
+  h2 {
+    display: none;
+  }
+  ul {
+    display: flex;
+    flex-direction: row;
+    background-color: @grey;
+    flex-grow: 1;
+  }
+  ul li ul li {
+    border-left: solid 1px @black;
+    height: @sub-app-bar-height;
+    display: flex;
+    align-items: center;
+    justify-items: center;
+    justify-content: center;
+    min-width: 75px;
+    padding-left: 6px;
+    padding-right: 6px;
+    font-family: "Quicksand", Arial, "Lucida Grande", sans-serif;
+    border-bottom: solid 1px @black;
+    font-size: 12px;
+    @media screen and (max-width: 1500px) {
+      font-size: 10px;
+      min-width: 65px;
+    }
+    @media screen and (max-width: 1300px) {
+      font-size: 10px;
+      min-width: 50px;
+    }
+    a {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+      height: 100%;
+      width: 100%;
+      text-decoration: none;
+    }
+  }
+}
+
+#app-navigation ul li ul li:last-child {
+  border-right: solid 1px @black;
+}
+
+#app-navigation ul li ul li:hover {
+  background-color: @main-color-theme;
+  min-height: @sub-app-bar-height;
+  position: relative;
+  //top: -1px;
+  a {
+    color: @white;
+    text-decoration: none;
+  }
+}
+#app-navigation ul li ul li.selected:hover {
+  a {
+    color: @black !important;
+  }
+}
+
+#app-navigation ul li ul li.selected {
+  background-color: @white;
+  position: relative;
+  top: 1px;
+  height: @sub-app-bar-height + 1px;
+  border-top-right-radius: 2px;
+  border-top-left-radius: 2px;
+  border-bottom: none;
+
+  :after {
+    content: '';
+    position: absolute;
+    top: -2px;
+    left: 5px;
+    width: 0;
+    height: 0;
+    border-right: 10px solid transparent;
+    border-top: 10px solid @main-color-theme;
+    border-left: 10px solid transparent;
+  }
+
+}
+
+
+/* End sub Menu section */
+
+/* begin sub Menu section 3rd level */
+
+.button-bar.tab-bar {
+  ul li ul li {
+    border: solid 1px @grey;
+    border-radius: 4px;
+    a {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  li.selected{
+    background-color: @main-color-theme;
+    a{
+      color: @font-color-for-main;
+    }
+  }
+  ul li ul li:hover {
+    background-color: @main-color-theme;
+    a {
+      color: @font-color-for-main ;
+    }
+  }
+}
+
+#third-level-menu-container {
+  display: flex;
+  flex-direction: row;
+}
+#working-area {
+  width: 100%;
+}
+
+#left-column-menu {
+  width: 100px;
+}
+
+.third-lvl-menu {
+  background-color: @dark-color-theme;
+  position: relative;
+  left: -10px;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  ul {
+    li {
+      ul {
+        position: relative;
+        top: 5px;
+        width: @third-lvl-width;
+      }
+    }
+  }
+  h2 {
+    visibility: hidden;
+  }
+}
+.third-level-item:last-child {
+  border-bottom: solid 1px @main-color-theme;
+}
+
+.third-level-item {
+  min-height: @third-lvl-height;
+  background-color: @dark-color-theme;
+  padding-right: 3px;
+  border-top: solid 1px @main-color-theme;
+
+  a, a:visited {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    color: @font-color-for-dark !important;
+    min-height: @third-lvl-height;
+    max-width: @third-lvl-width;
+    text-align: center;
+  }
+}
+.third-level-item.selected {
+  position: relative;
+  border-left: solid 9px @main-color-theme;
+  a, a:visited {
+    background-color: @white;
+    color: @dark-color-theme !important;
+  }
+  :after {
+    content: '';
+    position: absolute;
+    top: 5px;
+    left: 0;
+    width: 0;
+    height: 0;
+    border-top: 10px solid transparent;
+    border-left: 10px solid @main-color-theme;
+    border-bottom: 10px solid transparent;
+  }
+}
+
+.third-level-item a:hover {
+  background-color: @main-color-theme;
+  color: @font-color-for-main ;
+  text-decoration: none;
+}
+/* End 3rd level menu */
+
+
+
+/* Begin Home Menu for IB section */
+.fixed-nav-bar {
+  position: fixed !important;
+  width: 100%;
+}
+#nav-bar-offset {
+  height: @app-bar-height ;
+}
+
+#homeGlyph {
+  margin-left: 20px;
+  height: 20px;
+}
+
+#homePageTitle {
+  color: @white;
+  font-size: 20px;
+  font-weight: bold;
+  margin-right: 20px;
+  margin-left: 20px;
+}
+.home-menu-list {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.hp-applist {
+  display: flex;
+  flex-direction: row;
+  color : @white;
+  align-items: center;
+  .app-title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: @dark-color-theme;
+    height: @home-menu-tile-height;
+    padding: 5px 10px 5px 10px;
+    border-bottom: solid 1px @black;
+    span {
+      font-family: "Quicksand", Arial, "Lucida Grande", sans-serif !important;
+      font-size: 15px;
+      font-weight: bold;
+      width: 110px;
+      a {
+        display: flex;
+        justify-content: center;
+        color : @white;
+      }
+    }
+  }
+
+  .hp-menu-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    margin-left: 5px;
+    margin-right: 5px;
+    border: solid 2px @grey;
+    border-radius: 8px;
+    height: @home-menu-tile-height - 4px;
+    min-width: @home-menu-tile-min-width;
+    max-width: @home-menu-tile-max-width;
+    .menu-link {
+      font-size: 10px;
+      color: @black;
+      padding: 10px;
+    }
+    .star-link {
+      position: absolute;
+      height: 25px;
+      top: 5px;
+      right: 5px;
+    }
+  }
+
+}
+.hp-applist .app-title span a:hover {
+  text-decoration: none;
+}
+
+.hp-menu-item.favoriteItem {
+  border: solid 2px @dark-color-theme;
+}
+
+.hp-menu-item:hover {
+  box-shadow: 3px 3px 12px @shadow-color;
+  a {
+    text-decoration: none;
+  }
+}
+
+/* End Home Menu for IB section */
+
+/* Begin Login screenlet */
+#login-container {
+  #content-messages {
+    position: relative;
+    top: @app-bar-height;
+    border-radius: 4px;
+    width: 97%;
+    &.errorMessage {
+      background-color : @color-background-alert !important;
+      color: @color-font-alert !important;
+      border : solid 1px @color-border-alert !important;
+    }
+    &.eventMessage {
+      background-color : @color-background-success !important;
+      color: @color-font-success !important;
+      border : solid 1px @color-border-success !important;
+    }
+  }
+}
+#loginBar {
+  position: fixed;
+  top:0;
+  left: 0;
+  width: 100%;
+  height: @app-bar-height;
+  background-color: @dark-color-theme;
+  span {
+    background-color: @white;
+    color: @main-color-theme;
+    border-top-right-radius: 5px;
+    border-top-left-radius: 5px;
+    font-size: 25px;
+    position: relative;
+    top: @app-bar-height - 32px;
+    left: 15px;
+    padding: 5px 10px 5px 10px;
+  }
+  #company-logo {
+    position: absolute;
+  }
+}
+
+.login-screenlet {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+  max-width: 50em;
+  border-radius: 8px !important;
+  margin-top: 15%;
+  box-shadow: 3px 3px 12px @shadow-color;
+  .screenlet-title-bar {
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    margin:0;
+    padding:0;
+    h3{
+      padding-top:2px;
+      padding-bottom:2px;
+      background-color: @dark-color-theme !important;
+      color: @font-color-for-dark;
+      height: 100%;
+      width:100%;
+      text-shadow: none;
+      font-size: 25px;
+    }
+  }
+  .screenlet-body {
+    background-color: @main-color-theme !important;
+    form {
+      .button {
+        width: 150px;
+        border-radius: 4px;
+        background: none;
+        background-color: @dark-color-theme;
+        color: @font-color-for-dark;
+        text-shadow: none;
+        margin-top: 20px;
+        margin-bottom: 10px;
+      }
+
+      table {
+        tr {
+          width: 100%;
+          .label {
+            color: @font-color-for-main;
+            width: 25%;
+            font-size: 15px;
+          }
+          input {
+            width: 100%;
+          }
+          .buttontext,
+          [type="submit"] {
+            width: 150px;
+            border-radius: 4px;
+            background: none;
+            background-color: @dark-color-theme;
+            color: @font-color-for-dark;
+            text-shadow: none;
+          }
+          [name="GET_PASSWORD_HINT"] {
+            background-color: @font-color-for-dark;
+            color: @main-color-theme;
+            border: none;
+            width: 100%;
+          }
+          [name="EMAIL_PASSWORD"] {
+            background-color: @font-color-for-dark;
+            color: @main-color-theme;
+            border: none;
+            width: 100%;
+          }
+          td {
+            padding: 5px;
+            color: @font-color-for-main;
+            font-size: 15px;
+            font-weight: bold;
+          }
+        }
+      }
+    }
+    a {
+      color: @font-color-for-main;
+    }
+  }
+}
+
+.login-screenlet .screenlet-title-bar {
+  text-align: center;
+}
+
+/* End Login screenlet */
+
+
+/* --------------------------------------------- */
+/*      Begin Screenlet style                    */
+/* --------------------------------------------- */
+.screenlet-title-bar {
+  text-decoration: none ;
+  color: @dark-color-theme;
+  background-color: @grey;
+  height: 1%; /* IE fix */
+  min-height: 1.5em;
+  padding:0.8em 0.2em;
+}
+
+.screenlet {
+  border-radius: 5px;
+  border: solid 1px @grey;
+  height: auto !important;
+  margin-bottom: 1em;
+  overflow: auto;
+}
+
+.screenlet-body {
+  background-color: #FFFFFF;
+  height: auto !important;
+  height: 1%;
+  padding: 0.4em;
+}
+
+.screenlet-body div {
+  margin: 0.8em 0.1em
+}
+
+/* Special Screenlet style for locale and timezone window */
+.lists.screenlet {
+  margin-left: 25%;
+  margin-right: 25%;
+  margin-top: 1em;
+}
+
+.lists.screenlet .basic-table tr td {
+  text-align: center;
+}
+
+.lists.screenlet .basic-table tr td a {
+  display: block;
+}
+
+/*      Alternate table header style      */
+.basic-table .header-row-2 th,
+.basic-table .header-row-2 td {
+  background-color: @greydark;
+  border-bottom: 0;
+  border-left: 0.1em solid #aaa;
+  border-right: 0.1em solid #888;
+  color: #ffffff;
+  font-weight: bold;
+}
+
+/* No padding screenlet decorator */
+.no-padding {
+  padding: 0;
+  border: none;
+}
+
+.no-padding .h1,
+.no-padding .h2,
+.no-padding .h3,
+.no-paddingr h1,
+.no-padding h2,
+.no-padding h3 {
+  padding: 0.7em;
+}
+
+.screenlet-title-bar ul a:hover {
+  color: @main-color-theme !important;
+  text-decoration: none;
+}
+
+
+/* --------------------------------------------- */
+/*      End Screenlet style                      */
+/* --------------------------------------------- */
+
+/* ---------------------- */
+/*      Table Styles      */
+/* ---------------------- */
+
+.basic-table {
+  background-color: #ffffff;
+  color: #000000;
+  margin-bottom: 1em;
+  width: 100%;
+}
+
+form table,
+form .basic-table,
+.screenlet-body .basic-table {
+  background: transparent;
+  margin-bottom: 0;
+}
+
+.basic-table tr td {
+  /* Style for all cells */
+  padding: 0.8em 0.1em;
+  vertical-align: middle;
+}
+
+.basic-table tr .align-bottom {
+  vertical-align: bottom;
+}
+
+.basic-table tr .align-top {
+  vertical-align: top;
+}
+
+.basic-table tr .label,
+.basic-table tr .group-label {
+  /* field labels for forms */
+  font-weight: bold;
+  text-align: right;
+  padding-right: 1.5em;
+  white-space: nowrap;
+  width: 1%;
+}
+
+.basic-table tr .group-label {
+  /* "header" for field label groups */
+  font-size: 1.2em;
+  padding: 2em 1.5em 0 0;
+}
+
+.basic-table tr th,
+.basic-table .header-row {
+  font-weight: bold;
+  text-align: left;
+}
+
+.basic-table .header-row td {
+  border-bottom: 0.1em solid #000000;
+}
+
+.basic-table .header-row td a {
+  color: #000000;
+}
+
+.basic-table .alternate-row {
+  /* Alternating row style */
+  background-color: #eeeeee;
+}
+
+.basic-table .selected {
+  background: #FFFCCF;
+}
+
+.basic-table .alternate-rowSelected {
+  background: #FFF55F;
+}
+
+.basic-table .Validate {
+  /*Style use by alt-row-style on list*/
+  background: #A0D5F7;
+}
+
+.basic-table .alternate-rowValidate {
+  /*Style use by alt-row-style on list*/
+  background: #72A8F2;
+}
+
+.basic-table .Warn {
+  /*Style use by alt-row-style on list*/
+  background: #f55C5C;
+}
+
+.basic-table .alternate-rowWarn {
+  /*Style use by alt-row-style on list*/
+  background: #FC7455;
+}
+
+.basic-table tr .button-col {
+  /* button column style - for the small
+  collection of buttons used in lists */
+  vertical-align: top;
+  padding: 0.3em;
+}
+.basic-table tr .button-col a,
+.basic-table tr .button-col button,
+.basic-table tr .button-col input[type="reset"],
+.basic-table tr .button-col input[type="submit"],
+.basic-table tr .button-col input[type="button"] {
+  -webkit-appearance: none;
+  -moz-border-radius: 1em;
+  -webkit-border-radius: 1em;
+  border-radius: 2px;
+  border: 0.1em solid @main-color-theme;
+  background-color: @white;
+  cursor: pointer;
+  color: @main-color-theme;
+  display:inline-block;
+  font-size: 0.9em;
+  font-weight: bold;
+  outline: 0;
+  overflow: visible;
+  padding: 0.1em 0.5em 0.2em 0.5em;
+  text-decoration: none;
+  width: auto;
+
+  &:hover {
+    background-color: @main-color-theme;
+    color: @white;
+  }
+}
+
+.basic-table .collapsed {
+  visibility: collapse;
+}
+
+/*      Sort field style      */
+.basic-table .header-row-2 th .sort-order-asc,
+.basic-table .header-row-2 td .sort-order-asc{
+  background: url(/images/arrow-gr-up.png) no-repeat right;
+  padding-left: 0.5em;
+  padding-right: 20px; /* Setting must be in px */
+}
+.basic-table .header-row-2 th .sort-order-desc,
+.basic-table .header-row-2 td .sort-order-desc{
+  background: url(/images/arrow-gr-dw.png) no-repeat right;
+  padding-left: 0.5em;
+  padding-right: 20px; /* Setting must be in px */
+}
+.basic-table .header-row-2 th .sort-order,
+.basic-table .header-row-2 td .sort-order{
+  background: url(/images/arrow-gr.png) no-repeat right;
+  padding-left: 0.5em;
+  padding-right: 20px; /* Setting must be in px */
+  color:#fff
+}
+
+
+/* --------------------------------------------- */
+/*      Begin Message Info                       */
+/* --------------------------------------------- */
+.count-message {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height:20px;
+  min-width: 20px;
+  max-height:20px;
+  max-width: 20px;
+  background: @white;
+  font-size:12px;
+  font-weight: bold;
+  border-radius: 50%;
+}
+.info-message-title {
+  min-width:150px;
+  margin: 5px;
+  font-family: "Quicksand", Arial, "Lucida Grande", sans-serif;
+  font-size: 16px;
+  font-weight: bold;
+}
+.message-list {
+  position:relative;
+  margin-top: 10px;
+  box-shadow: 1px 3px 5px @greydark;
+  border-radius: 0 5px 5px 0;
+  transition: height 2s;
+}
+.message-list-main {
+  padding: 5px 15px 5px 15px;
+}
+.message-list-alert {
+  background-color: @color-alert;
+  border-left : solid 5px @color-alert-dark;
+  .count-message {
+    color: @color-alert-dark;
+  }
+}
+.message-list-success {
+  background-color: @color-success;
+  border-left: solid 5px @color-success-dark;
+  .count-message {
+    color: @color-success-dark;
+  }
+}
+.message-list-table-container {
+  background-color: @white;
+  border-radius: 5px;
+  overflow: hidden;
+  height: 0;
+}
+.info-message-success {
+  display: none;
+}
+.info-message-alert {
+  display: none;
+}
+table.msg-list {
+  width: 100%;
+  font-size: 16px;
+  font-family: "Quicksand", Arial, "Lucida Grande", sans-serif;
+  padding: 0;
+  thead {
+    height: 100%;
+    background-color: @grey;
+    margin: 0;
+    padding: 0;
+    tr{
+      font-weight: bold;
+      border-bottom: solid 1px @black;
+      height: 100%;
+      background-color: @grey;
+      line-height: 30px;
+    }
+  }
+  tbody {
+    tr {
+      line-height: 25px;
+    }
+    tr.msg-row-success {
+      background-color: @color-success;
+    }
+    tr.msg-row-alert {
+      background-color: @color-alert;
+    }
+  }
+  td {
+    padding-left: 5px;
+  }
+}
+
+/* --------------------------------------------- */
+/*      End  Message Info                        */
+/* --------------------------------------------- */
+
+/* ---------------------- */
+/*     Paginate Style     */
+/* ---------------------- */
+
+.paginate-bar-nrd {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-size: 15px;
+  background-color: @grey;
+  padding-left: 10px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  box-shadow: 0 2px 5px @shadow-color;
+
+  ul.paginate-pg-list {
+    display: flex;
+    flex-direction: row;
+    background-color: @white;
+    color: @main-color-theme;
+    margin-right: 10px;
+    border-radius: 8px;
+    border: solid 1px @box-border-color;
+    height: 18px;
+    li {
+      display: flex;
+      justify-content: center;
+      min-width: 17px;
+      border-right: solid 1px @box-border-color;
+      padding-left: 2px;
+      padding-right: 2px;
+      height:100%;
+      a {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-family: "Quicksand", Arial, "Lucida Grande", sans-serif;
+        color: @dark-color-theme;
+        height: 100%;
+        width: 100%;
+      }
+      .paginate-disable {
+
+      }
+    }
+    li.selected {
+      background-color: @main-color-theme;
+      a {
+        color: @font-color-for-main;
+      }
+    }
+    li:first-child, li:last-child {
+      width: 20px;
+    }
+    li:first-child {
+      border-top-left-radius: 3px;
+      border-bottom-left-radius: 3px;
+    }
+    li:last-child {
+      border-right: none;
+      border-top-right-radius: 3px;
+      border-bottom-right-radius: 3px;
+    }
+  }
+
+}
+select.paginate-select {
+  position: relative;
+  background: @white;
+  font-size: 16px;
+  font-weight: bold;
+  border: 1px solid @box-border-color;
+  option {
+    display: flex;
+    justify-self: center;
+    font-size: 14px;
+  }
+}
+
+.paginate-select-label {
+  font-family: "Quicksand", Arial, "Lucida Grande", sans-serif;
+  font-size: 16px;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+.paginate-information {
+  font-family: "Quicksand", Arial, "Lucida Grande", sans-serif;
+  font-size: 16px;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+ul.paginate-pg-list li:hover{
+  background-color: @main-color-theme;
+  a {
+    text-decoration: none;
+    color: @font-color-for-main;
+  }
+}
+
+/* End of Paginate Style  */
+/* ---------------------- */
+
+/* ------------------------------- */
+/*      List Navigation Style      */
+/* ------------------------------- */
+
+.nav-pager {
+  background-color: @greydark;
+  color: @white;
+  font-family: "Quicksand", Arial, "Lucida Grande", sans-serif;
+  font-size: 9px;
+  font-weight: bold;
+  line-height: 3.5em;
+  height: 3.5em;
+  margin: 0.5em 0 0.5em 0;
+  border-radius: 3px 3px 0 0;
+}
+
+.nav-pager ul {
+  display: inline; /* IE Fix */
+}
+
+.nav-pager ul li {
+  float:left;
+  vertical-align: middle;
+}
+
+.nav-pager ul li a {
+  display: block;
+}
+
+.nav-pager ul a {
+  color: @white;
+  padding: 0 1em 0 1em;
+  text-decoration: none;
+}
+
+.nav-pager ul a:hover {
+  background-color: @main-color-theme;
+  color: @font-color-for-main;
+}
+
+.nav-pager ul .nav-pagesize,
+.nav-pager ul .nav-page-select,
+.nav-pager ul .nav-displaying {
+  padding: 0 1em 0 1em;
+}
+
+.nav-pager ul .nav-first-disabled,
+.nav-pager ul .nav-previous-disabled,
+.nav-pager ul .nav-next-disabled,
+.nav-pager ul .nav-last-disabled {
+  padding: 0 1em 0 1em;
+}
+
+.nav-pager ul .nav-first-disabled:hover,
+.nav-pager ul .nav-previous-disabled:hover,
+.nav-pager ul .nav-next-disabled:hover,
+.nav-pager ul .nav-last-disabled:hover {
+  cursor: not-allowed;
+}
+
+
+.nav-pager ul .nav-displaying {
+  border-right: none;
+}
+
+
+/* ---------------------------- */
+/*     Multi-Column Styles      */
+/* ---------------------------- */
+
+#column-container {
+  margin: auto;
+  padding: 1em;
+  position: relative;
+  min-width: @min-container-width;
+}
+
+#column-container h1,
+#column-container .h1,
+#column-container h2,
+#column-container .h2 {
+  margin-bottom: 0.5em;
+}
+
+#column-container h1,
+#column-container .h1 {
+  color: #557996;
+}
+
+#column-container .left {
+  float: left;
+  /* alt: position: absolute; top: 0px; left: 0px; */
+  width: 22em;
+  margin-right: 1em;
+}
+
+#column-container .left-larger {
+  float: left;
+  /* alt: position: absolute; top: 0px; left: 0px; */
+  width: 25em;
+  margin-right: 1em;
+}
+
+.lefthalf {
+  float: left;
+  height: 1%;
+  left: 0;
+  margin: 0% 1% 1% 0%;
+  width: 49%;
+}
+
+.righthalf {
+  float: right;
+  height: 1%;
+  margin: 0 0 1% 1%;
+  right: 0;
+  width: 49%;
+}
+
+#column-container .right {
+  float: right;
+  margin-left: 1em;
+  width: 22em;
+}
+
+#column-container .leftonly {
+  margin-left: 23em;
+  width: auto;
+}
+
+#column-container .leftonly-larger {
+  margin-left: 26em;
+  width: auto;
+}
+
+#column-container .rightonly {
+  margin-right: 23em;
+  width: auto;
+}
+
+#column-container .center {
+  margin-left: 23em;
+  margin-right: 23em;
+  width: auto;
+}
+
+#column-container .nocolumns {
+  width: auto;
+}
+
+/* ---------------------- */
+/*      Button Style      */
+/* ---------------------- */
+
+.button-bar li.buttontext a,
+a.buttontext,
+a.buttontextbig,
+.smallSubmit,
+.smallSubmit:hover,
+.mediumSubmit,
+.largeSubmit,
+.loginButton,
+.button-style-1 a,
+.button-style-1 ul a,
+.button-style-2 ul a,
+.button-style-2 a,
+.button,
+button,
+input[type="reset"],
+input[type="submit"],
+input[type="button"] {
+  -webkit-appearance: none;
+  -moz-border-radius: 1.1em;
+  -webkit-border-radius: 1.1em;
+  border-radius: 2px;
+  border: 0.1em solid @main-color-theme;
+  background-color: @white;
+  cursor: pointer;
+  color: @main-color-theme;
+  display:inline-block;
+  font-size: 1em;
+  font-weight: bold;
+  outline: 0;
+  overflow: visible;
+  padding: 0.4em 1em 0.4em;
+  text-decoration:none;
+  /*text-transform:uppercase;*/
+  width: auto;
+
+  /* IE7 */
+  *padding-top: 0.2em;
+  *padding-bottom: 0;
+  &:hover {
+    color: @font-color-for-main;
+    background-color: @main-color-theme;
+  }
+}
+
+
+/* ---------------------- */
+/*      Footer Style      */
+/* ---------------------- */
+
+#footer {
+  background: @dark-color-theme;
+  border-top: 0.1em inset #000;
+  padding: 0.5em 0 0.5em 0.5em;
+
+  height: @footer-height;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  font-family: "Quicksand", Arial, "Lucida Grande", sans-serif !important;
+  z-index: 10;
+
+  span {
+    color: @font-color-for-dark;
+    padding: 10px;
+  }
+
+  a {
+    color: @font-color-for-dark;
+    font-weight: normal;
+  }
+}
+
+#footer a:focus {
+  text-decoration: underline;
+}
+
+#footer-offset {
+  height: @footer-height + 10px;
+  width: 100%;
+}

Propchange: ofbiz/ofbiz-framework/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-main-theme.less
------------------------------------------------------------------------------
    svn:eol-style = native

Propchange: ofbiz/ofbiz-framework/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-main-theme.less
------------------------------------------------------------------------------
    svn:keywords = Date Rev Author URL Id

Propchange: ofbiz/ofbiz-framework/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-main-theme.less
------------------------------------------------------------------------------
    svn:mime-type = text/plain