themes/rainbowstone/webapp/rainbowstone/rainbowstone-main-theme.less

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
/* 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: 'quicksandregular';
  src: url('fonts/quicksand/quicksand-regular.woff2') format('woff2'),
       url('fonts/quicksand/quicksand-regular.woff') format('woff');
  font-weight: normal;
  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: "quicksandregular", 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: quicksandregular,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;
}

.more-current-app {
  margin-left: 10px;
}

#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: 200px;
  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;
    padding-top: 2px;
  }

  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;
      padding-top:4px;
    }
  }

  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;
    }
  }
}

#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-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: "quicksandregular", 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: calc(50% - 10px);
    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 ;
}

.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: "quicksandregular", 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: "quicksandregular", 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: "quicksandregular", 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: "quicksandregular", 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: "quicksandregular", Arial, "Lucida Grande", sans-serif;
  font-size: 16px;
  padding-left: 15px;
  padding-right: 15px;
}

.paginate-information {
  font-family: "quicksandregular", 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: "quicksandregular", 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: "quicksandregular", 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%;
}