You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ofbiz.apache.org by jl...@apache.org on 2016/08/24 05:44:00 UTC
svn commit: r1757462 [1/4] - in /ofbiz/trunk/themes:
flatgrey/webapp/flatgrey/ rainbowstone/webapp/rainbowstone/
Author: jleroux
Date: Wed Aug 24 05:44:00 2016
New Revision: 1757462
URL: http://svn.apache.org/viewvc?rev=1757462&view=rev
Log:
Removes now useless IE7 "star html hack". I was used to prevent IE7 from applying some CCS rules: http://css-discuss.incutio.com/wiki/Star_Html_Hack
And the hack is claimed deprecated here : https://blogs.msdn.microsoft.com/ie/2005/10/12/call-to-action-the-demise-of-css-hacks-and-broken-pages/
Thanks to Florian Montalbano research at "css property name correction in flatgrey and rainbowstone themes" - https://issues.apache.org/jira/browse/OFBIZ-7960#
I checked, the IE7 market share is residual, no needs to keep this dragging down feature
Modified:
ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css
ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less
ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-emerald.less
ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-ruby.less
ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-saphir.less
ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/style.css
Modified: ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css
URL: http://svn.apache.org/viewvc/ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css?rev=1757462&r1=1757461&r2=1757462&view=diff
==============================================================================
--- ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css (original)
+++ ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css Wed Aug 24 05:44:00 2016
@@ -922,10 +922,6 @@ form .basic-table,
text-shadow: #fff 0 1px 1px; /* Setting must be in px */
/*text-transform:uppercase;*/
width: auto;
-
- /* IE7 */
- *padding-top: 0.2em;
- *padding-bottom: 0;
}
.basic-table .collapsed {
@@ -1512,16 +1508,6 @@ input[type="button"] {
text-shadow: #fff 0 1px 1px; /* Setting must be in px */
/*text-transform:uppercase;*/
width: auto;
-
- /* IE7 */
- *padding-top: 0.2em;
- *padding-bottom: 0;
-}
-
-button {
- /* IE7 */
- *padding-top: 0.1em;
- *padding-bottom: 0.1em;
}
a.disabled,
@@ -1563,11 +1549,6 @@ input[type="week"] {
padding: 0.2em 0.3em;
height: 1.8em;
-
- /* IE7 */
- *padding-top: 0.2em;
- *padding-bottom: 0.1em;
- *height: auto;
}
/*
Modified: ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less
URL: http://svn.apache.org/viewvc/ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less?rev=1757462&r1=1757461&r2=1757462&view=diff
==============================================================================
--- ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less (original)
+++ ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less Wed Aug 24 05:44:00 2016
@@ -1,1997 +1,1990 @@
-/* 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;
-
-/* Saphir colors */
-@blue-dark: #002333;
-@blue-main: #005982;
-@blue-medium: #c7dfff;
-@blue-light: #f1f7ff;
-@blue-light2: #e4f0f5;
-
-/* Ruby colors */
-@red-dark: #420000;
-@red-main: #bf1616;
-@red-medium: #f7baba;
-@red-light: #fce7e7;
-@red-light2: #fed7c9;
-
-/* Emerald colors */
-@green-dark: #197948;
-@green-main: #23af9b;
-@green-medium: #7ae3ad;
-@green-light: #e5f9ef;
-@green-light2: #d7f9ef;
-
-/* Amber colors */
-@amber-dark: #bc4216;
-@amber-main: #f08906;
-@amber-medium: #f5c4b3;
-@amber-light: #fcede8;
-@amber-light2: #fcedcd;
-
-/* Saphir theme */
-/*
-@main-color-theme : @blue-main;
-@dark-color-theme : @blue-dark;
-@medium-color-theme : @blue-medium;
-@light-color-theme : @blue-light;
-@light2-color-theme : @blue-light2;
-@font-color-for-dark : @grey;
-@font-color-for-main : @white;
-@font-color-for-medium : @dark-color-theme;
-@font-color-for-light : @dark-color-theme;
-@shadow-color : @black;
-@shadow-color-light : @greydark;
-*/
-
-/* Ruby theme */
-/*
-@main-color-theme : @red-main;
-@dark-color-theme : @red-dark;
-@medium-color-theme : @red-medium;
-@light-color-theme : @red-light;
-@light2-color-theme : @red-light2;
-@font-color-for-dark : @grey;
-@font-color-for-main : @white;
-@font-color-for-medium : @dark-color-theme;
-@font-color-for-light : @dark-color-theme;
-@shadow-color : @black;
-@shadow-color-light : @greydark;
-/*
-
-/* Emerald theme */
-/*
-@main-color-theme : @green-main;
-@dark-color-theme : @green-dark;
-@medium-color-theme : @green-medium;
-@light-color-theme : @green-light;
-@light2-color-theme : @green-light2;
-@font-color-for-dark : @white;
-@font-color-for-main : @white;
-@font-color-for-medium : @dark-color-theme;
-@font-color-for-light : @dark-color-theme;
-@shadow-color : @black;
-@shadow-color-light : @greydark;
-*/
-/* Amber theme */
-@main-color-theme : @amber-main;
-@dark-color-theme : @amber-dark;
-@medium-color-theme : @amber-medium;
-@light-color-theme : @amber-light;
-@light2-color-theme : @amber-light2;
-@font-color-for-dark : @white;
-@font-color-for-main : @white;
-@font-color-for-medium : @dark-color-theme;
-@font-color-for-light : @dark-color-theme;
-@shadow-color : @black;
-@shadow-color-light : @greydark;
-
-
-@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-white.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;
-
- /* IE7 */
- *padding-top: 0.2em;
- *padding-bottom: 0;
-
- &: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;
+
+/* Saphir colors */
+@blue-dark: #002333;
+@blue-main: #005982;
+@blue-medium: #c7dfff;
+@blue-light: #f1f7ff;
+@blue-light2: #e4f0f5;
+
+/* Ruby colors */
+@red-dark: #420000;
+@red-main: #bf1616;
+@red-medium: #f7baba;
+@red-light: #fce7e7;
+@red-light2: #fed7c9;
+
+/* Emerald colors */
+@green-dark: #197948;
+@green-main: #23af9b;
+@green-medium: #7ae3ad;
+@green-light: #e5f9ef;
+@green-light2: #d7f9ef;
+
+/* Amber colors */
+@amber-dark: #bc4216;
+@amber-main: #f08906;
+@amber-medium: #f5c4b3;
+@amber-light: #fcede8;
+@amber-light2: #fcedcd;
+
+/* Saphir theme */
+/*
+@main-color-theme : @blue-main;
+@dark-color-theme : @blue-dark;
+@medium-color-theme : @blue-medium;
+@light-color-theme : @blue-light;
+@light2-color-theme : @blue-light2;
+@font-color-for-dark : @grey;
+@font-color-for-main : @white;
+@font-color-for-medium : @dark-color-theme;
+@font-color-for-light : @dark-color-theme;
+@shadow-color : @black;
+@shadow-color-light : @greydark;
+*/
+
+/* Ruby theme */
+/*
+@main-color-theme : @red-main;
+@dark-color-theme : @red-dark;
+@medium-color-theme : @red-medium;
+@light-color-theme : @red-light;
+@light2-color-theme : @red-light2;
+@font-color-for-dark : @grey;
+@font-color-for-main : @white;
+@font-color-for-medium : @dark-color-theme;
+@font-color-for-light : @dark-color-theme;
+@shadow-color : @black;
+@shadow-color-light : @greydark;
+/*
+
+/* Emerald theme */
+/*
+@main-color-theme : @green-main;
+@dark-color-theme : @green-dark;
+@medium-color-theme : @green-medium;
+@light-color-theme : @green-light;
+@light2-color-theme : @green-light2;
+@font-color-for-dark : @white;
+@font-color-for-main : @white;
+@font-color-for-medium : @dark-color-theme;
+@font-color-for-light : @dark-color-theme;
+@shadow-color : @black;
+@shadow-color-light : @greydark;
+*/
+/* Amber theme */
+@main-color-theme : @amber-main;
+@dark-color-theme : @amber-dark;
+@medium-color-theme : @amber-medium;
+@light-color-theme : @amber-light;
+@light2-color-theme : @amber-light2;
+@font-color-for-dark : @white;
+@font-color-for-main : @white;
+@font-color-for-medium : @dark-color-theme;
+@font-color-for-light : @dark-color-theme;
+@shadow-color : @black;
+@shadow-color-light : @greydark;
+
+
+@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-white.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;
+
+ &: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%;
+}
Re: svn commit: r1757462 [1/4] - in /ofbiz/trunk/themes:
flatgrey/webapp/flatgrey/ rainbowstone/webapp/rainbowstone/
Posted by Julien NICOLAS <ju...@nereide.fr>.
On 24/08/2016 09:41, Jacques Le Roux wrote:
> Le 24/08/2016 � 09:23, Julien NICOLAS a �crit :
>> Hi Jacques,
>>
>> I don't understand what to do if we had a new file type. I understand
>> that something is wrong with the svn config but I don't know what.
>
> Simple, just add it, like I did for *.less at
> http://svn.apache.org/viewvc?rev=1757468&view=rev
>
> Then update your local one and ask other committers to do so
>
>>
>> For the 4 colors, it is only because my customer order included 4
>> theme colors and when I push the theme in trunk, I keep them.
>>
>> I like the 4 colors (and want to have more :) ) but it seems to be a
>> problem (what is exactly this problem ?).
>
> Simple, maintaining 4 similar things instead of 1
I have to upgrade the less files because I improve my customer theme
with a central less file and 4 others less only for colors. It could be
better and solve the maintaining issue.
>
>>
>> In the same idea, why do we keep more than one theme ? Just decide
>> witch one is official and then, the other will be push out of the
>> theme folder.
>
> This is a moot point (which one? :)) But indeed with plugins I agree
> we should have only 1 OOTB and others external
I dream about this <3 pluggin system <3 in OFBiz :D
which one => I think it could be a vote by the community (only issueless
themes).
>
> Jacques
>
>>
>> Julien.
>>
>>
>> On 24/08/2016 07:52, Jacques Le Roux wrote:
>>> OK, the *.less type is not in the svn config. I'll revert, add it,
>>> and commit again.
>>>
>>> So again, please committers remember to do so when you commit a new
>>> file type.
>>>
>>> While at it I really wonder if we need to have 4 colored versions of
>>> the same theme in trunk?
>>>
>>> I suggest to have only one and propose the others as external
>>> components, later plugins. We could use a third party location to
>>> propose the 3 others theme component (GitHub,
>>> https://oem.ofbizci.net/oci-2, etc.)
>>>
>>> Opinions?
>>>
>>> Jacques
>>>
>>> Le 24/08/2016 � 07:44, jleroux@apache.org a �crit :
>>>> Author: jleroux
>>>> Date: Wed Aug 24 05:44:00 2016
>>>> New Revision: 1757462
>>>>
>>>> URL: http://svn.apache.org/viewvc?rev=1757462&view=rev
>>>> Log:
>>>> Removes now useless IE7 "star html hack". I was used to prevent IE7
>>>> from applying some CCS rules:
>>>> http://css-discuss.incutio.com/wiki/Star_Html_Hack
>>>> And the hack is claimed deprecated here :
>>>> https://blogs.msdn.microsoft.com/ie/2005/10/12/call-to-action-the-demise-of-css-hacks-and-broken-pages/
>>>>
>>>> Thanks to Florian Montalbano research at "css property name
>>>> correction in flatgrey and rainbowstone themes" -
>>>> https://issues.apache.org/jira/browse/OFBIZ-7960#
>>>>
>>>> I checked, the IE7 market share is residual, no needs to keep this
>>>> dragging down feature
>>>>
>>>> Modified:
>>>> ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css
>>>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less
>>>>
>>>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-emerald.less
>>>>
>>>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-ruby.less
>>>>
>>>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-saphir.less
>>>>
>>>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/style.css
>>>>
>>>> Modified: ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css
>>>> URL:
>>>> http://svn.apache.org/viewvc/ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css?rev=1757462&r1=1757461&r2=1757462&view=diff
>>>> ==============================================================================
>>>>
>>>> --- ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css (original)
>>>> +++ ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css Wed Aug
>>>> 24 05:44:00 2016
>>>> @@ -922,10 +922,6 @@ form .basic-table,
>>>> text-shadow: #fff 0 1px 1px; /* Setting must be in px */
>>>> /*text-transform:uppercase;*/
>>>> width: auto;
>>>> -
>>>> - /* IE7 */
>>>> - *padding-top: 0.2em;
>>>> - *padding-bottom: 0;
>>>> }
>>>> .basic-table .collapsed {
>>>> @@ -1512,16 +1508,6 @@ input[type="button"] {
>>>> text-shadow: #fff 0 1px 1px; /* Setting must be in px */
>>>> /*text-transform:uppercase;*/
>>>> width: auto;
>>>> -
>>>> - /* IE7 */
>>>> - *padding-top: 0.2em;
>>>> - *padding-bottom: 0;
>>>> -}
>>>> -
>>>> -button {
>>>> - /* IE7 */
>>>> - *padding-top: 0.1em;
>>>> - *padding-bottom: 0.1em;
>>>> }
>>>> a.disabled,
>>>> @@ -1563,11 +1549,6 @@ input[type="week"] {
>>>> padding: 0.2em 0.3em;
>>>> height: 1.8em;
>>>> -
>>>> - /* IE7 */
>>>> - *padding-top: 0.2em;
>>>> - *padding-bottom: 0.1em;
>>>> - *height: auto;
>>>> }
>>>> /*
>>>>
>>>> Modified:
>>>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less
>>>> URL:
>>>> http://svn.apache.org/viewvc/ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less?rev=1757462&r1=1757461&r2=1757462&view=diff
>>>> ==============================================================================
>>>>
>>>> ---
>>>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less
>>>> (original)
>>>> +++
>>>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less
>>>> Wed Aug 24 05:44:00 2016
>>>> @@ -1,1997 +1,1990 @@
>>>> -/* 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;
>>>> -
>>>> -/* Saphir colors */
>>>> -@blue-dark: #002333;
>>>> -@blue-main: #005982;
>>>> -@blue-medium: #c7dfff;
>>>> -@blue-light: #f1f7ff;
>>>> -@blue-light2: #e4f0f5;
>>>> -
>>>> -/* Ruby colors */
>>>> -@red-dark: #420000;
>>>> -@red-main: #bf1616;
>>>> -@red-medium: #f7baba;
>>>> -@red-light: #fce7e7;
>>>> -@red-light2: #fed7c9;
>>>> -
>>>> -/* Emerald colors */
>>>> -@green-dark: #197948;
>>>> -@green-main: #23af9b;
>>>> -@green-medium: #7ae3ad;
>>>> -@green-light: #e5f9ef;
>>>> -@green-light2: #d7f9ef;
>>>> -
>>>> -/* Amber colors */
>>>> -@amber-dark: #bc4216;
>>>> -@amber-main: #f08906;
>>>> -@amber-medium: #f5c4b3;
>>>> -@amber-light: #fcede8;
>>>> -@amber-light2: #fcedcd;
>>>> -
>>>> -/* Saphir theme */
>>>> -/*
>>>> -@main-color-theme : @blue-main;
>>>> -@dark-color-theme : @blue-dark;
>>>> -@medium-color-theme : @blue-medium;
>>>> -@light-color-theme : @blue-light;
>>>> -@light2-color-theme : @blue-light2;
>>>> -@font-color-for-dark : @grey;
>>>> -@font-color-for-main : @white;
>>>> -@font-color-for-medium : @dark-color-theme;
>>>> -@font-color-for-light : @dark-color-theme;
>>>> -@shadow-color : @black;
>>>> -@shadow-color-light : @greydark;
>>>> -*/
>>>> -
>>>> -/* Ruby theme */
>>>> -/*
>>>> -@main-color-theme : @red-main;
>>>> -@dark-color-theme : @red-dark;
>>>> -@medium-color-theme : @red-medium;
>>>> -@light-color-theme : @red-light;
>>>> -@light2-color-theme : @red-light2;
>>>> -@font-color-for-dark : @grey;
>>>> -@font-color-for-main : @white;
>>>> -@font-color-for-medium : @dark-color-theme;
>>>> -@font-color-for-light : @dark-color-theme;
>>>> -@shadow-color : @black;
>>>> -@shadow-color-light : @greydark;
>>>> -/*
>>>> -
>>>> -/* Emerald theme */
>>>> -/*
>>>> -@main-color-theme : @green-main;
>>>> -@dark-color-theme : @green-dark;
>>>> -@medium-color-theme : @green-medium;
>>>> -@light-color-theme : @green-light;
>>>> -@light2-color-theme : @green-light2;
>>>> -@font-color-for-dark : @white;
>>>> -@font-color-for-main : @white;
>>>> -@font-color-for-medium : @dark-color-theme;
>>>> -@font-color-for-light : @dark-color-theme;
>>>> -@shadow-color : @black;
>>>> -@shadow-color-light : @greydark;
>>>> -*/
>>>> -/* Amber theme */
>>>> -@main-color-theme : @amber-main;
>>>> -@dark-color-theme : @amber-dark;
>>>> -@medium-color-theme : @amber-medium;
>>>> -@light-color-theme : @amber-light;
>>>> -@light2-color-theme : @amber-light2;
>>>> -@font-color-for-dark : @white;
>>>> -@font-color-for-main : @white;
>>>> -@font-color-for-medium : @dark-color-theme;
>>>> -@font-color-for-light : @dark-color-theme;
>>>> -@shadow-color : @black;
>>>> -@shadow-color-light : @greydark;
>>>> -
>>>> -
>>>> -@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-white.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;
>>>> -
>>>> - /* IE7 */
>>>> - *padding-top: 0.2em;
>>>> - *padding-bottom: 0;
>>>> -
>>>> - &: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;
>>>> +
>>>> +/* Saphir colors */
>>>> +@blue-dark: #002333;
>>>> +@blue-main: #005982;
>>>> +@blue-medium: #c7dfff;
>>>> +@blue-light: #f1f7ff;
>>>> +@blue-light2: #e4f0f5;
>>>> +
>>>> +/* Ruby colors */
>>>> +@red-dark: #420000;
>>>> +@red-main: #bf1616;
>>>> +@red-medium: #f7baba;
>>>> +@red-light: #fce7e7;
>>>> +@red-light2: #fed7c9;
>>>> +
>>>> +/* Emerald colors */
>>>> +@green-dark: #197948;
>>>> +@green-main: #23af9b;
>>>> +@green-medium: #7ae3ad;
>>>> +@green-light: #e5f9ef;
>>>> +@green-light2: #d7f9ef;
>>>> +
>>>> +/* Amber colors */
>>>> +@amber-dark: #bc4216;
>>>> +@amber-main: #f08906;
>>>> +@amber-medium: #f5c4b3;
>>>> +@amber-light: #fcede8;
>>>> +@amber-light2: #fcedcd;
>>>> +
>>>> +/* Saphir theme */
>>>> +/*
>>>> +@main-color-theme : @blue-main;
>>>> +@dark-color-theme : @blue-dark;
>>>> +@medium-color-theme : @blue-medium;
>>>> +@light-color-theme : @blue-light;
>>>> +@light2-color-theme : @blue-light2;
>>>> +@font-color-for-dark : @grey;
>>>> +@font-color-for-main : @white;
>>>> +@font-color-for-medium : @dark-color-theme;
>>>> +@font-color-for-light : @dark-color-theme;
>>>> +@shadow-color : @black;
>>>> +@shadow-color-light : @greydark;
>>>> +*/
>>>> +
>>>> +/* Ruby theme */
>>>> +/*
>>>> +@main-color-theme : @red-main;
>>>> +@dark-color-theme : @red-dark;
>>>> +@medium-color-theme : @red-medium;
>>>> +@light-color-theme : @red-light;
>>>> +@light2-color-theme : @red-light2;
>>>> +@font-color-for-dark : @grey;
>>>> +@font-color-for-main : @white;
>>>> +@font-color-for-medium : @dark-color-theme;
>>>> +@font-color-for-light : @dark-color-theme;
>>>> +@shadow-color : @black;
>>>> +@shadow-color-light : @greydark;
>>>> +/*
>>>> +
>>>> +/* Emerald theme */
>>>> +/*
>>>> +@main-color-theme : @green-main;
>>>> +@dark-color-theme : @green-dark;
>>>> +@medium-color-theme : @green-medium;
>>>> +@light-color-theme : @green-light;
>>>> +@light2-color-theme : @green-light2;
>>>> +@font-color-for-dark : @white;
>>>> +@font-color-for-main : @white;
>>>> +@font-color-for-medium : @dark-color-theme;
>>>> +@font-color-for-light : @dark-color-theme;
>>>> +@shadow-color : @black;
>>>> +@shadow-color-light : @greydark;
>>>> +*/
>>>> +/* Amber theme */
>>>> +@main-color-theme : @amber-main;
>>>> +@dark-color-theme : @amber-dark;
>>>> +@medium-color-theme : @amber-medium;
>>>> +@light-color-theme : @amber-light;
>>>> +@light2-color-theme : @amber-light2;
>>>> +@font-color-for-dark : @white;
>>>> +@font-color-for-main : @white;
>>>> +@font-color-for-medium : @dark-color-theme;
>>>> +@font-color-for-light : @dark-color-theme;
>>>> +@shadow-color : @black;
>>>> +@shadow-color-light : @greydark;
>>>> +
>>>> +
>>>> +@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-white.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;
>>>> +
>>>> + &: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%;
>>>> +}
>>>>
>>>>
>>>>
>>>>
>>>
>>>
>>>
>>>
>>
>>
>
>
Re: svn commit: r1757462 [1/4] - in /ofbiz/trunk/themes:
flatgrey/webapp/flatgrey/ rainbowstone/webapp/rainbowstone/
Posted by Jacques Le Roux <ja...@les7arts.com>.
Le 24/08/2016 � 09:23, Julien NICOLAS a �crit :
> Hi Jacques,
>
> I don't understand what to do if we had a new file type. I understand that something is wrong with the svn config but I don't know what.
Simple, just add it, like I did for *.less at http://svn.apache.org/viewvc?rev=1757468&view=rev
Then update your local one and ask other committers to do so
>
> For the 4 colors, it is only because my customer order included 4 theme colors and when I push the theme in trunk, I keep them.
>
> I like the 4 colors (and want to have more :) ) but it seems to be a problem (what is exactly this problem ?).
Simple, maintaining 4 similar things instead of 1
>
> In the same idea, why do we keep more than one theme ? Just decide witch one is official and then, the other will be push out of the theme folder.
This is a moot point (which one? :)) But indeed with plugins I agree we should have only 1 OOTB and others external
Jacques
>
> Julien.
>
>
> On 24/08/2016 07:52, Jacques Le Roux wrote:
>> OK, the *.less type is not in the svn config. I'll revert, add it, and commit again.
>>
>> So again, please committers remember to do so when you commit a new file type.
>>
>> While at it I really wonder if we need to have 4 colored versions of the same theme in trunk?
>>
>> I suggest to have only one and propose the others as external components, later plugins. We could use a third party location to propose the 3
>> others theme component (GitHub, https://oem.ofbizci.net/oci-2, etc.)
>>
>> Opinions?
>>
>> Jacques
>>
>> Le 24/08/2016 � 07:44, jleroux@apache.org a �crit :
>>> Author: jleroux
>>> Date: Wed Aug 24 05:44:00 2016
>>> New Revision: 1757462
>>>
>>> URL: http://svn.apache.org/viewvc?rev=1757462&view=rev
>>> Log:
>>> Removes now useless IE7 "star html hack". I was used to prevent IE7 from applying some CCS rules: http://css-discuss.incutio.com/wiki/Star_Html_Hack
>>> And the hack is claimed deprecated here : https://blogs.msdn.microsoft.com/ie/2005/10/12/call-to-action-the-demise-of-css-hacks-and-broken-pages/
>>>
>>> Thanks to Florian Montalbano research at "css property name correction in flatgrey and rainbowstone themes" -
>>> https://issues.apache.org/jira/browse/OFBIZ-7960#
>>>
>>> I checked, the IE7 market share is residual, no needs to keep this dragging down feature
>>>
>>> Modified:
>>> ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css
>>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less
>>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-emerald.less
>>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-ruby.less
>>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-saphir.less
>>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/style.css
>>>
>>> Modified: ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css
>>> URL: http://svn.apache.org/viewvc/ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css?rev=1757462&r1=1757461&r2=1757462&view=diff
>>> ==============================================================================
>>> --- ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css (original)
>>> +++ ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css Wed Aug 24 05:44:00 2016
>>> @@ -922,10 +922,6 @@ form .basic-table,
>>> text-shadow: #fff 0 1px 1px; /* Setting must be in px */
>>> /*text-transform:uppercase;*/
>>> width: auto;
>>> -
>>> - /* IE7 */
>>> - *padding-top: 0.2em;
>>> - *padding-bottom: 0;
>>> }
>>> .basic-table .collapsed {
>>> @@ -1512,16 +1508,6 @@ input[type="button"] {
>>> text-shadow: #fff 0 1px 1px; /* Setting must be in px */
>>> /*text-transform:uppercase;*/
>>> width: auto;
>>> -
>>> - /* IE7 */
>>> - *padding-top: 0.2em;
>>> - *padding-bottom: 0;
>>> -}
>>> -
>>> -button {
>>> - /* IE7 */
>>> - *padding-top: 0.1em;
>>> - *padding-bottom: 0.1em;
>>> }
>>> a.disabled,
>>> @@ -1563,11 +1549,6 @@ input[type="week"] {
>>> padding: 0.2em 0.3em;
>>> height: 1.8em;
>>> -
>>> - /* IE7 */
>>> - *padding-top: 0.2em;
>>> - *padding-bottom: 0.1em;
>>> - *height: auto;
>>> }
>>> /*
>>>
>>> Modified: ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less
>>> URL:
>>> http://svn.apache.org/viewvc/ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less?rev=1757462&r1=1757461&r2=1757462&view=diff
>>> ==============================================================================
>>> --- ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less (original)
>>> +++ ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less Wed Aug 24 05:44:00 2016
>>> @@ -1,1997 +1,1990 @@
>>> -/* 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;
>>> -
>>> -/* Saphir colors */
>>> -@blue-dark: #002333;
>>> -@blue-main: #005982;
>>> -@blue-medium: #c7dfff;
>>> -@blue-light: #f1f7ff;
>>> -@blue-light2: #e4f0f5;
>>> -
>>> -/* Ruby colors */
>>> -@red-dark: #420000;
>>> -@red-main: #bf1616;
>>> -@red-medium: #f7baba;
>>> -@red-light: #fce7e7;
>>> -@red-light2: #fed7c9;
>>> -
>>> -/* Emerald colors */
>>> -@green-dark: #197948;
>>> -@green-main: #23af9b;
>>> -@green-medium: #7ae3ad;
>>> -@green-light: #e5f9ef;
>>> -@green-light2: #d7f9ef;
>>> -
>>> -/* Amber colors */
>>> -@amber-dark: #bc4216;
>>> -@amber-main: #f08906;
>>> -@amber-medium: #f5c4b3;
>>> -@amber-light: #fcede8;
>>> -@amber-light2: #fcedcd;
>>> -
>>> -/* Saphir theme */
>>> -/*
>>> -@main-color-theme : @blue-main;
>>> -@dark-color-theme : @blue-dark;
>>> -@medium-color-theme : @blue-medium;
>>> -@light-color-theme : @blue-light;
>>> -@light2-color-theme : @blue-light2;
>>> -@font-color-for-dark : @grey;
>>> -@font-color-for-main : @white;
>>> -@font-color-for-medium : @dark-color-theme;
>>> -@font-color-for-light : @dark-color-theme;
>>> -@shadow-color : @black;
>>> -@shadow-color-light : @greydark;
>>> -*/
>>> -
>>> -/* Ruby theme */
>>> -/*
>>> -@main-color-theme : @red-main;
>>> -@dark-color-theme : @red-dark;
>>> -@medium-color-theme : @red-medium;
>>> -@light-color-theme : @red-light;
>>> -@light2-color-theme : @red-light2;
>>> -@font-color-for-dark : @grey;
>>> -@font-color-for-main : @white;
>>> -@font-color-for-medium : @dark-color-theme;
>>> -@font-color-for-light : @dark-color-theme;
>>> -@shadow-color : @black;
>>> -@shadow-color-light : @greydark;
>>> -/*
>>> -
>>> -/* Emerald theme */
>>> -/*
>>> -@main-color-theme : @green-main;
>>> -@dark-color-theme : @green-dark;
>>> -@medium-color-theme : @green-medium;
>>> -@light-color-theme : @green-light;
>>> -@light2-color-theme : @green-light2;
>>> -@font-color-for-dark : @white;
>>> -@font-color-for-main : @white;
>>> -@font-color-for-medium : @dark-color-theme;
>>> -@font-color-for-light : @dark-color-theme;
>>> -@shadow-color : @black;
>>> -@shadow-color-light : @greydark;
>>> -*/
>>> -/* Amber theme */
>>> -@main-color-theme : @amber-main;
>>> -@dark-color-theme : @amber-dark;
>>> -@medium-color-theme : @amber-medium;
>>> -@light-color-theme : @amber-light;
>>> -@light2-color-theme : @amber-light2;
>>> -@font-color-for-dark : @white;
>>> -@font-color-for-main : @white;
>>> -@font-color-for-medium : @dark-color-theme;
>>> -@font-color-for-light : @dark-color-theme;
>>> -@shadow-color : @black;
>>> -@shadow-color-light : @greydark;
>>> -
>>> -
>>> -@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-white.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;
>>> -
>>> - /* IE7 */
>>> - *padding-top: 0.2em;
>>> - *padding-bottom: 0;
>>> -
>>> - &: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;
>>> +
>>> +/* Saphir colors */
>>> +@blue-dark: #002333;
>>> +@blue-main: #005982;
>>> +@blue-medium: #c7dfff;
>>> +@blue-light: #f1f7ff;
>>> +@blue-light2: #e4f0f5;
>>> +
>>> +/* Ruby colors */
>>> +@red-dark: #420000;
>>> +@red-main: #bf1616;
>>> +@red-medium: #f7baba;
>>> +@red-light: #fce7e7;
>>> +@red-light2: #fed7c9;
>>> +
>>> +/* Emerald colors */
>>> +@green-dark: #197948;
>>> +@green-main: #23af9b;
>>> +@green-medium: #7ae3ad;
>>> +@green-light: #e5f9ef;
>>> +@green-light2: #d7f9ef;
>>> +
>>> +/* Amber colors */
>>> +@amber-dark: #bc4216;
>>> +@amber-main: #f08906;
>>> +@amber-medium: #f5c4b3;
>>> +@amber-light: #fcede8;
>>> +@amber-light2: #fcedcd;
>>> +
>>> +/* Saphir theme */
>>> +/*
>>> +@main-color-theme : @blue-main;
>>> +@dark-color-theme : @blue-dark;
>>> +@medium-color-theme : @blue-medium;
>>> +@light-color-theme : @blue-light;
>>> +@light2-color-theme : @blue-light2;
>>> +@font-color-for-dark : @grey;
>>> +@font-color-for-main : @white;
>>> +@font-color-for-medium : @dark-color-theme;
>>> +@font-color-for-light : @dark-color-theme;
>>> +@shadow-color : @black;
>>> +@shadow-color-light : @greydark;
>>> +*/
>>> +
>>> +/* Ruby theme */
>>> +/*
>>> +@main-color-theme : @red-main;
>>> +@dark-color-theme : @red-dark;
>>> +@medium-color-theme : @red-medium;
>>> +@light-color-theme : @red-light;
>>> +@light2-color-theme : @red-light2;
>>> +@font-color-for-dark : @grey;
>>> +@font-color-for-main : @white;
>>> +@font-color-for-medium : @dark-color-theme;
>>> +@font-color-for-light : @dark-color-theme;
>>> +@shadow-color : @black;
>>> +@shadow-color-light : @greydark;
>>> +/*
>>> +
>>> +/* Emerald theme */
>>> +/*
>>> +@main-color-theme : @green-main;
>>> +@dark-color-theme : @green-dark;
>>> +@medium-color-theme : @green-medium;
>>> +@light-color-theme : @green-light;
>>> +@light2-color-theme : @green-light2;
>>> +@font-color-for-dark : @white;
>>> +@font-color-for-main : @white;
>>> +@font-color-for-medium : @dark-color-theme;
>>> +@font-color-for-light : @dark-color-theme;
>>> +@shadow-color : @black;
>>> +@shadow-color-light : @greydark;
>>> +*/
>>> +/* Amber theme */
>>> +@main-color-theme : @amber-main;
>>> +@dark-color-theme : @amber-dark;
>>> +@medium-color-theme : @amber-medium;
>>> +@light-color-theme : @amber-light;
>>> +@light2-color-theme : @amber-light2;
>>> +@font-color-for-dark : @white;
>>> +@font-color-for-main : @white;
>>> +@font-color-for-medium : @dark-color-theme;
>>> +@font-color-for-light : @dark-color-theme;
>>> +@shadow-color : @black;
>>> +@shadow-color-light : @greydark;
>>> +
>>> +
>>> +@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-white.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;
>>> +
>>> + &: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%;
>>> +}
>>>
>>>
>>>
>>>
>>
>>
>>
>>
>
>
Re: svn commit: r1757462 [1/4] - in /ofbiz/trunk/themes:
flatgrey/webapp/flatgrey/ rainbowstone/webapp/rainbowstone/
Posted by Julien NICOLAS <ju...@nereide.fr>.
Hi Jacques,
I don't understand what to do if we had a new file type. I understand
that something is wrong with the svn config but I don't know what.
For the 4 colors, it is only because my customer order included 4 theme
colors and when I push the theme in trunk, I keep them.
I like the 4 colors (and want to have more :) ) but it seems to be a
problem (what is exactly this problem ?).
In the same idea, why do we keep more than one theme ? Just decide witch
one is official and then, the other will be push out of the theme folder.
Julien.
On 24/08/2016 07:52, Jacques Le Roux wrote:
> OK, the *.less type is not in the svn config. I'll revert, add it, and
> commit again.
>
> So again, please committers remember to do so when you commit a new
> file type.
>
> While at it I really wonder if we need to have 4 colored versions of
> the same theme in trunk?
>
> I suggest to have only one and propose the others as external
> components, later plugins. We could use a third party location to
> propose the 3 others theme component (GitHub,
> https://oem.ofbizci.net/oci-2, etc.)
>
> Opinions?
>
> Jacques
>
> Le 24/08/2016 � 07:44, jleroux@apache.org a �crit :
>> Author: jleroux
>> Date: Wed Aug 24 05:44:00 2016
>> New Revision: 1757462
>>
>> URL: http://svn.apache.org/viewvc?rev=1757462&view=rev
>> Log:
>> Removes now useless IE7 "star html hack". I was used to prevent IE7
>> from applying some CCS rules:
>> http://css-discuss.incutio.com/wiki/Star_Html_Hack
>> And the hack is claimed deprecated here :
>> https://blogs.msdn.microsoft.com/ie/2005/10/12/call-to-action-the-demise-of-css-hacks-and-broken-pages/
>>
>> Thanks to Florian Montalbano research at "css property name
>> correction in flatgrey and rainbowstone themes" -
>> https://issues.apache.org/jira/browse/OFBIZ-7960#
>>
>> I checked, the IE7 market share is residual, no needs to keep this
>> dragging down feature
>>
>> Modified:
>> ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css
>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less
>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-emerald.less
>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-ruby.less
>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-saphir.less
>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/style.css
>>
>> Modified: ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css
>> URL:
>> http://svn.apache.org/viewvc/ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css?rev=1757462&r1=1757461&r2=1757462&view=diff
>> ==============================================================================
>>
>> --- ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css (original)
>> +++ ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css Wed Aug 24
>> 05:44:00 2016
>> @@ -922,10 +922,6 @@ form .basic-table,
>> text-shadow: #fff 0 1px 1px; /* Setting must be in px */
>> /*text-transform:uppercase;*/
>> width: auto;
>> -
>> - /* IE7 */
>> - *padding-top: 0.2em;
>> - *padding-bottom: 0;
>> }
>> .basic-table .collapsed {
>> @@ -1512,16 +1508,6 @@ input[type="button"] {
>> text-shadow: #fff 0 1px 1px; /* Setting must be in px */
>> /*text-transform:uppercase;*/
>> width: auto;
>> -
>> - /* IE7 */
>> - *padding-top: 0.2em;
>> - *padding-bottom: 0;
>> -}
>> -
>> -button {
>> - /* IE7 */
>> - *padding-top: 0.1em;
>> - *padding-bottom: 0.1em;
>> }
>> a.disabled,
>> @@ -1563,11 +1549,6 @@ input[type="week"] {
>> padding: 0.2em 0.3em;
>> height: 1.8em;
>> -
>> - /* IE7 */
>> - *padding-top: 0.2em;
>> - *padding-bottom: 0.1em;
>> - *height: auto;
>> }
>> /*
>>
>> Modified:
>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less
>> URL:
>> http://svn.apache.org/viewvc/ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less?rev=1757462&r1=1757461&r2=1757462&view=diff
>> ==============================================================================
>>
>> ---
>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less
>> (original)
>> +++
>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less
>> Wed Aug 24 05:44:00 2016
>> @@ -1,1997 +1,1990 @@
>> -/* 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;
>> -
>> -/* Saphir colors */
>> -@blue-dark: #002333;
>> -@blue-main: #005982;
>> -@blue-medium: #c7dfff;
>> -@blue-light: #f1f7ff;
>> -@blue-light2: #e4f0f5;
>> -
>> -/* Ruby colors */
>> -@red-dark: #420000;
>> -@red-main: #bf1616;
>> -@red-medium: #f7baba;
>> -@red-light: #fce7e7;
>> -@red-light2: #fed7c9;
>> -
>> -/* Emerald colors */
>> -@green-dark: #197948;
>> -@green-main: #23af9b;
>> -@green-medium: #7ae3ad;
>> -@green-light: #e5f9ef;
>> -@green-light2: #d7f9ef;
>> -
>> -/* Amber colors */
>> -@amber-dark: #bc4216;
>> -@amber-main: #f08906;
>> -@amber-medium: #f5c4b3;
>> -@amber-light: #fcede8;
>> -@amber-light2: #fcedcd;
>> -
>> -/* Saphir theme */
>> -/*
>> -@main-color-theme : @blue-main;
>> -@dark-color-theme : @blue-dark;
>> -@medium-color-theme : @blue-medium;
>> -@light-color-theme : @blue-light;
>> -@light2-color-theme : @blue-light2;
>> -@font-color-for-dark : @grey;
>> -@font-color-for-main : @white;
>> -@font-color-for-medium : @dark-color-theme;
>> -@font-color-for-light : @dark-color-theme;
>> -@shadow-color : @black;
>> -@shadow-color-light : @greydark;
>> -*/
>> -
>> -/* Ruby theme */
>> -/*
>> -@main-color-theme : @red-main;
>> -@dark-color-theme : @red-dark;
>> -@medium-color-theme : @red-medium;
>> -@light-color-theme : @red-light;
>> -@light2-color-theme : @red-light2;
>> -@font-color-for-dark : @grey;
>> -@font-color-for-main : @white;
>> -@font-color-for-medium : @dark-color-theme;
>> -@font-color-for-light : @dark-color-theme;
>> -@shadow-color : @black;
>> -@shadow-color-light : @greydark;
>> -/*
>> -
>> -/* Emerald theme */
>> -/*
>> -@main-color-theme : @green-main;
>> -@dark-color-theme : @green-dark;
>> -@medium-color-theme : @green-medium;
>> -@light-color-theme : @green-light;
>> -@light2-color-theme : @green-light2;
>> -@font-color-for-dark : @white;
>> -@font-color-for-main : @white;
>> -@font-color-for-medium : @dark-color-theme;
>> -@font-color-for-light : @dark-color-theme;
>> -@shadow-color : @black;
>> -@shadow-color-light : @greydark;
>> -*/
>> -/* Amber theme */
>> -@main-color-theme : @amber-main;
>> -@dark-color-theme : @amber-dark;
>> -@medium-color-theme : @amber-medium;
>> -@light-color-theme : @amber-light;
>> -@light2-color-theme : @amber-light2;
>> -@font-color-for-dark : @white;
>> -@font-color-for-main : @white;
>> -@font-color-for-medium : @dark-color-theme;
>> -@font-color-for-light : @dark-color-theme;
>> -@shadow-color : @black;
>> -@shadow-color-light : @greydark;
>> -
>> -
>> -@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-white.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;
>> -
>> - /* IE7 */
>> - *padding-top: 0.2em;
>> - *padding-bottom: 0;
>> -
>> - &: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;
>> +
>> +/* Saphir colors */
>> +@blue-dark: #002333;
>> +@blue-main: #005982;
>> +@blue-medium: #c7dfff;
>> +@blue-light: #f1f7ff;
>> +@blue-light2: #e4f0f5;
>> +
>> +/* Ruby colors */
>> +@red-dark: #420000;
>> +@red-main: #bf1616;
>> +@red-medium: #f7baba;
>> +@red-light: #fce7e7;
>> +@red-light2: #fed7c9;
>> +
>> +/* Emerald colors */
>> +@green-dark: #197948;
>> +@green-main: #23af9b;
>> +@green-medium: #7ae3ad;
>> +@green-light: #e5f9ef;
>> +@green-light2: #d7f9ef;
>> +
>> +/* Amber colors */
>> +@amber-dark: #bc4216;
>> +@amber-main: #f08906;
>> +@amber-medium: #f5c4b3;
>> +@amber-light: #fcede8;
>> +@amber-light2: #fcedcd;
>> +
>> +/* Saphir theme */
>> +/*
>> +@main-color-theme : @blue-main;
>> +@dark-color-theme : @blue-dark;
>> +@medium-color-theme : @blue-medium;
>> +@light-color-theme : @blue-light;
>> +@light2-color-theme : @blue-light2;
>> +@font-color-for-dark : @grey;
>> +@font-color-for-main : @white;
>> +@font-color-for-medium : @dark-color-theme;
>> +@font-color-for-light : @dark-color-theme;
>> +@shadow-color : @black;
>> +@shadow-color-light : @greydark;
>> +*/
>> +
>> +/* Ruby theme */
>> +/*
>> +@main-color-theme : @red-main;
>> +@dark-color-theme : @red-dark;
>> +@medium-color-theme : @red-medium;
>> +@light-color-theme : @red-light;
>> +@light2-color-theme : @red-light2;
>> +@font-color-for-dark : @grey;
>> +@font-color-for-main : @white;
>> +@font-color-for-medium : @dark-color-theme;
>> +@font-color-for-light : @dark-color-theme;
>> +@shadow-color : @black;
>> +@shadow-color-light : @greydark;
>> +/*
>> +
>> +/* Emerald theme */
>> +/*
>> +@main-color-theme : @green-main;
>> +@dark-color-theme : @green-dark;
>> +@medium-color-theme : @green-medium;
>> +@light-color-theme : @green-light;
>> +@light2-color-theme : @green-light2;
>> +@font-color-for-dark : @white;
>> +@font-color-for-main : @white;
>> +@font-color-for-medium : @dark-color-theme;
>> +@font-color-for-light : @dark-color-theme;
>> +@shadow-color : @black;
>> +@shadow-color-light : @greydark;
>> +*/
>> +/* Amber theme */
>> +@main-color-theme : @amber-main;
>> +@dark-color-theme : @amber-dark;
>> +@medium-color-theme : @amber-medium;
>> +@light-color-theme : @amber-light;
>> +@light2-color-theme : @amber-light2;
>> +@font-color-for-dark : @white;
>> +@font-color-for-main : @white;
>> +@font-color-for-medium : @dark-color-theme;
>> +@font-color-for-light : @dark-color-theme;
>> +@shadow-color : @black;
>> +@shadow-color-light : @greydark;
>> +
>> +
>> +@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-white.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;
>> +
>> + &: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%;
>> +}
>>
>>
>>
>>
>
>
>
>
Re: svn commit: r1757462 [1/4] - in /ofbiz/trunk/themes:
flatgrey/webapp/flatgrey/ rainbowstone/webapp/rainbowstone/
Posted by Jacques Le Roux <ja...@les7arts.com>.
Thanks Pierre for the explanation, I never used it so thought it also provided storage.
Jacques
Le 24/08/2016 � 09:32, Pierre Smits a �crit :
> Please keep in mind that the OEM (https://oem.ofbizci.net/oci-2) is just a
> place to promote the components. That is why it lists both OFBiz controlled
> components and themes (in ASF SVN) and products that are controlled by
> others (and elsewhere, e.g. GitHub).
>
>
> It links through to the actual locations of:
>
> - the product description
> - the code repository
>
> of the contributor. It doesn't provide code storage.
>
> But, any contributor can have his product listed.
>
> Best regards
>
> Pierre Smits
>
> ORRTIZ.COM <http://www.orrtiz.com>
> OFBiz based solutions & services
>
> OFBiz Extensions Marketplace
> http://oem.ofbizci.net/oci-2/
>
> On Wed, Aug 24, 2016 at 7:52 AM, Jacques Le Roux <
> jacques.le.roux@les7arts.com> wrote:
>
>> OK, the *.less type is not in the svn config. I'll revert, add it, and
>> commit again.
>>
>> So again, please committers remember to do so when you commit a new file
>> type.
>>
>> While at it I really wonder if we need to have 4 colored versions of the
>> same theme in trunk?
>>
>> I suggest to have only one and propose the others as external components,
>> later plugins. We could use a third party location to propose the 3 others
>> theme component (GitHub, https://oem.ofbizci.net/oci-2, etc.)
>>
>> Opinions?
>>
>> Jacques
>>
>> Le 24/08/2016 � 07:44, jleroux@apache.org a �crit :
>>
>>> Author: jleroux
>>> Date: Wed Aug 24 05:44:00 2016
>>> New Revision: 1757462
>>>
>>> URL: http://svn.apache.org/viewvc?rev=1757462&view=rev
>>> Log:
>>> Removes now useless IE7 "star html hack". I was used to prevent IE7 from
>>> applying some CCS rules: http://css-discuss.incutio.com
>>> /wiki/Star_Html_Hack
>>> And the hack is claimed deprecated here : https://blogs.msdn.microsoft.c
>>> om/ie/2005/10/12/call-to-action-the-demise-of-css-hacks-and-broken-pages/
>>>
>>> Thanks to Florian Montalbano research at "css property name correction in
>>> flatgrey and rainbowstone themes" - https://issues.apache.org/jira
>>> /browse/OFBIZ-7960#
>>>
>>> I checked, the IE7 market share is residual, no needs to keep this
>>> dragging down feature
>>>
>>> Modified:
>>> ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css
>>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/
>>> rainbowstone-amber.less
>>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/
>>> rainbowstone-emerald.less
>>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/
>>> rainbowstone-ruby.less
>>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/
>>> rainbowstone-saphir.less
>>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/style.css
>>>
>>> Modified: ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css
>>> URL: http://svn.apache.org/viewvc/ofbiz/trunk/themes/flatgrey/web
>>> app/flatgrey/style.css?rev=1757462&r1=1757461&r2=1757462&view=diff
>>> ============================================================
>>> ==================
>>> --- ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css (original)
>>> +++ ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css Wed Aug 24
>>> 05:44:00 2016
>>> @@ -922,10 +922,6 @@ form .basic-table,
>>> text-shadow: #fff 0 1px 1px; /* Setting must be in px */
>>> /*text-transform:uppercase;*/
>>> width: auto;
>>> -
>>> - /* IE7 */
>>> - *padding-top: 0.2em;
>>> - *padding-bottom: 0;
>>> }
>>> .basic-table .collapsed {
>>> @@ -1512,16 +1508,6 @@ input[type="button"] {
>>> text-shadow: #fff 0 1px 1px; /* Setting must be in px */
>>> /*text-transform:uppercase;*/
>>> width: auto;
>>> -
>>> - /* IE7 */
>>> - *padding-top: 0.2em;
>>> - *padding-bottom: 0;
>>> -}
>>> -
>>> -button {
>>> - /* IE7 */
>>> - *padding-top: 0.1em;
>>> - *padding-bottom: 0.1em;
>>> }
>>> a.disabled,
>>> @@ -1563,11 +1549,6 @@ input[type="week"] {
>>> padding: 0.2em 0.3em;
>>> height: 1.8em;
>>> -
>>> - /* IE7 */
>>> - *padding-top: 0.2em;
>>> - *padding-bottom: 0.1em;
>>> - *height: auto;
>>> }
>>> /*
>>>
>>> Modified: ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/
>>> rainbowstone-amber.less
>>> URL: http://svn.apache.org/viewvc/ofbiz/trunk/themes/rainbowstone
>>> /webapp/rainbowstone/rainbowstone-amber.less?rev=
>>> 1757462&r1=1757461&r2=1757462&view=diff
>>> ============================================================
>>> ==================
>>> --- ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less
>>> (original)
>>> +++ ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less
>>> Wed Aug 24 05:44:00 2016
>>> @@ -1,1997 +1,1990 @@
>>> -/* 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;
>>> -
>>> -/* Saphir colors */
>>> -@blue-dark: #002333;
>>> -@blue-main: #005982;
>>> -@blue-medium: #c7dfff;
>>> -@blue-light: #f1f7ff;
>>> -@blue-light2: #e4f0f5;
>>> -
>>> -/* Ruby colors */
>>> -@red-dark: #420000;
>>> -@red-main: #bf1616;
>>> -@red-medium: #f7baba;
>>> -@red-light: #fce7e7;
>>> -@red-light2: #fed7c9;
>>> -
>>> -/* Emerald colors */
>>> -@green-dark: #197948;
>>> -@green-main: #23af9b;
>>> -@green-medium: #7ae3ad;
>>> -@green-light: #e5f9ef;
>>> -@green-light2: #d7f9ef;
>>> -
>>> -/* Amber colors */
>>> -@amber-dark: #bc4216;
>>> -@amber-main: #f08906;
>>> -@amber-medium: #f5c4b3;
>>> -@amber-light: #fcede8;
>>> -@amber-light2: #fcedcd;
>>> -
>>> -/* Saphir theme */
>>> -/*
>>> -@main-color-theme : @blue-main;
>>> -@dark-color-theme : @blue-dark;
>>> -@medium-color-theme : @blue-medium;
>>> -@light-color-theme : @blue-light;
>>> -@light2-color-theme : @blue-light2;
>>> -@font-color-for-dark : @grey;
>>> -@font-color-for-main : @white;
>>> -@font-color-for-medium : @dark-color-theme;
>>> -@font-color-for-light : @dark-color-theme;
>>> -@shadow-color : @black;
>>> -@shadow-color-light : @greydark;
>>> -*/
>>> -
>>> -/* Ruby theme */
>>> -/*
>>> -@main-color-theme : @red-main;
>>> -@dark-color-theme : @red-dark;
>>> -@medium-color-theme : @red-medium;
>>> -@light-color-theme : @red-light;
>>> -@light2-color-theme : @red-light2;
>>> -@font-color-for-dark : @grey;
>>> -@font-color-for-main : @white;
>>> -@font-color-for-medium : @dark-color-theme;
>>> -@font-color-for-light : @dark-color-theme;
>>> -@shadow-color : @black;
>>> -@shadow-color-light : @greydark;
>>> -/*
>>> -
>>> -/* Emerald theme */
>>> -/*
>>> -@main-color-theme : @green-main;
>>> -@dark-color-theme : @green-dark;
>>> -@medium-color-theme : @green-medium;
>>> -@light-color-theme : @green-light;
>>> -@light2-color-theme : @green-light2;
>>> -@font-color-for-dark : @white;
>>> -@font-color-for-main : @white;
>>> -@font-color-for-medium : @dark-color-theme;
>>> -@font-color-for-light : @dark-color-theme;
>>> -@shadow-color : @black;
>>> -@shadow-color-light : @greydark;
>>> -*/
>>> -/* Amber theme */
>>> -@main-color-theme : @amber-main;
>>> -@dark-color-theme : @amber-dark;
>>> -@medium-color-theme : @amber-medium;
>>> -@light-color-theme : @amber-light;
>>> -@light2-color-theme : @amber-light2;
>>> -@font-color-for-dark : @white;
>>> -@font-color-for-main : @white;
>>> -@font-color-for-medium : @dark-color-theme;
>>> -@font-color-for-light : @dark-color-theme;
>>> -@shadow-color : @black;
>>> -@shadow-color-light : @greydark;
>>> -
>>> -
>>> -@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: '�\u0153\u201d';
>>> - 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-white.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;
>>> -
>>> - /* IE7 */
>>> - *padding-top: 0.2em;
>>> - *padding-bottom: 0;
>>> -
>>> - &: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;
>>> +
>>> +/* Saphir colors */
>>> +@blue-dark: #002333;
>>> +@blue-main: #005982;
>>> +@blue-medium: #c7dfff;
>>> +@blue-light: #f1f7ff;
>>> +@blue-light2: #e4f0f5;
>>> +
>>> +/* Ruby colors */
>>> +@red-dark: #420000;
>>> +@red-main: #bf1616;
>>> +@red-medium: #f7baba;
>>> +@red-light: #fce7e7;
>>> +@red-light2: #fed7c9;
>>> +
>>> +/* Emerald colors */
>>> +@green-dark: #197948;
>>> +@green-main: #23af9b;
>>> +@green-medium: #7ae3ad;
>>> +@green-light: #e5f9ef;
>>> +@green-light2: #d7f9ef;
>>> +
>>> +/* Amber colors */
>>> +@amber-dark: #bc4216;
>>> +@amber-main: #f08906;
>>> +@amber-medium: #f5c4b3;
>>> +@amber-light: #fcede8;
>>> +@amber-light2: #fcedcd;
>>> +
>>> +/* Saphir theme */
>>> +/*
>>> +@main-color-theme : @blue-main;
>>> +@dark-color-theme : @blue-dark;
>>> +@medium-color-theme : @blue-medium;
>>> +@light-color-theme : @blue-light;
>>> +@light2-color-theme : @blue-light2;
>>> +@font-color-for-dark : @grey;
>>> +@font-color-for-main : @white;
>>> +@font-color-for-medium : @dark-color-theme;
>>> +@font-color-for-light : @dark-color-theme;
>>> +@shadow-color : @black;
>>> +@shadow-color-light : @greydark;
>>> +*/
>>> +
>>> +/* Ruby theme */
>>> +/*
>>> +@main-color-theme : @red-main;
>>> +@dark-color-theme : @red-dark;
>>> +@medium-color-theme : @red-medium;
>>> +@light-color-theme : @red-light;
>>> +@light2-color-theme : @red-light2;
>>> +@font-color-for-dark : @grey;
>>> +@font-color-for-main : @white;
>>> +@font-color-for-medium : @dark-color-theme;
>>> +@font-color-for-light : @dark-color-theme;
>>> +@shadow-color : @black;
>>> +@shadow-color-light : @greydark;
>>> +/*
>>> +
>>> +/* Emerald theme */
>>> +/*
>>> +@main-color-theme : @green-main;
>>> +@dark-color-theme : @green-dark;
>>> +@medium-color-theme : @green-medium;
>>> +@light-color-theme : @green-light;
>>> +@light2-color-theme : @green-light2;
>>> +@font-color-for-dark : @white;
>>> +@font-color-for-main : @white;
>>> +@font-color-for-medium : @dark-color-theme;
>>> +@font-color-for-light : @dark-color-theme;
>>> +@shadow-color : @black;
>>> +@shadow-color-light : @greydark;
>>> +*/
>>> +/* Amber theme */
>>> +@main-color-theme : @amber-main;
>>> +@dark-color-theme : @amber-dark;
>>> +@medium-color-theme : @amber-medium;
>>> +@light-color-theme : @amber-light;
>>> +@light2-color-theme : @amber-light2;
>>> +@font-color-for-dark : @white;
>>> +@font-color-for-main : @white;
>>> +@font-color-for-medium : @dark-color-theme;
>>> +@font-color-for-light : @dark-color-theme;
>>> +@shadow-color : @black;
>>> +@shadow-color-light : @greydark;
>>> +
>>> +
>>> +@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: '�\u0153\u201d';
>>> + 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-white.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;
>>
Re: svn commit: r1757462 [1/4] - in /ofbiz/trunk/themes:
flatgrey/webapp/flatgrey/ rainbowstone/webapp/rainbowstone/
Posted by Pierre Smits <pi...@gmail.com>.
Please keep in mind that the OEM (https://oem.ofbizci.net/oci-2) is just a
place to promote the components. That is why it lists both OFBiz controlled
components and themes (in ASF SVN) and products that are controlled by
others (and elsewhere, e.g. GitHub).
It links through to the actual locations of:
- the product description
- the code repository
of the contributor. It doesn't provide code storage.
But, any contributor can have his product listed.
Best regards
Pierre Smits
ORRTIZ.COM <http://www.orrtiz.com>
OFBiz based solutions & services
OFBiz Extensions Marketplace
http://oem.ofbizci.net/oci-2/
On Wed, Aug 24, 2016 at 7:52 AM, Jacques Le Roux <
jacques.le.roux@les7arts.com> wrote:
> OK, the *.less type is not in the svn config. I'll revert, add it, and
> commit again.
>
> So again, please committers remember to do so when you commit a new file
> type.
>
> While at it I really wonder if we need to have 4 colored versions of the
> same theme in trunk?
>
> I suggest to have only one and propose the others as external components,
> later plugins. We could use a third party location to propose the 3 others
> theme component (GitHub, https://oem.ofbizci.net/oci-2, etc.)
>
> Opinions?
>
> Jacques
>
> Le 24/08/2016 à 07:44, jleroux@apache.org a écrit :
>
>> Author: jleroux
>> Date: Wed Aug 24 05:44:00 2016
>> New Revision: 1757462
>>
>> URL: http://svn.apache.org/viewvc?rev=1757462&view=rev
>> Log:
>> Removes now useless IE7 "star html hack". I was used to prevent IE7 from
>> applying some CCS rules: http://css-discuss.incutio.com
>> /wiki/Star_Html_Hack
>> And the hack is claimed deprecated here : https://blogs.msdn.microsoft.c
>> om/ie/2005/10/12/call-to-action-the-demise-of-css-hacks-and-broken-pages/
>>
>> Thanks to Florian Montalbano research at "css property name correction in
>> flatgrey and rainbowstone themes" - https://issues.apache.org/jira
>> /browse/OFBIZ-7960#
>>
>> I checked, the IE7 market share is residual, no needs to keep this
>> dragging down feature
>>
>> Modified:
>> ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css
>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/
>> rainbowstone-amber.less
>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/
>> rainbowstone-emerald.less
>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/
>> rainbowstone-ruby.less
>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/
>> rainbowstone-saphir.less
>> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/style.css
>>
>> Modified: ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css
>> URL: http://svn.apache.org/viewvc/ofbiz/trunk/themes/flatgrey/web
>> app/flatgrey/style.css?rev=1757462&r1=1757461&r2=1757462&view=diff
>> ============================================================
>> ==================
>> --- ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css (original)
>> +++ ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css Wed Aug 24
>> 05:44:00 2016
>> @@ -922,10 +922,6 @@ form .basic-table,
>> text-shadow: #fff 0 1px 1px; /* Setting must be in px */
>> /*text-transform:uppercase;*/
>> width: auto;
>> -
>> - /* IE7 */
>> - *padding-top: 0.2em;
>> - *padding-bottom: 0;
>> }
>> .basic-table .collapsed {
>> @@ -1512,16 +1508,6 @@ input[type="button"] {
>> text-shadow: #fff 0 1px 1px; /* Setting must be in px */
>> /*text-transform:uppercase;*/
>> width: auto;
>> -
>> - /* IE7 */
>> - *padding-top: 0.2em;
>> - *padding-bottom: 0;
>> -}
>> -
>> -button {
>> - /* IE7 */
>> - *padding-top: 0.1em;
>> - *padding-bottom: 0.1em;
>> }
>> a.disabled,
>> @@ -1563,11 +1549,6 @@ input[type="week"] {
>> padding: 0.2em 0.3em;
>> height: 1.8em;
>> -
>> - /* IE7 */
>> - *padding-top: 0.2em;
>> - *padding-bottom: 0.1em;
>> - *height: auto;
>> }
>> /*
>>
>> Modified: ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/
>> rainbowstone-amber.less
>> URL: http://svn.apache.org/viewvc/ofbiz/trunk/themes/rainbowstone
>> /webapp/rainbowstone/rainbowstone-amber.less?rev=
>> 1757462&r1=1757461&r2=1757462&view=diff
>> ============================================================
>> ==================
>> --- ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less
>> (original)
>> +++ ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less
>> Wed Aug 24 05:44:00 2016
>> @@ -1,1997 +1,1990 @@
>> -/* 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;
>> -
>> -/* Saphir colors */
>> -@blue-dark: #002333;
>> -@blue-main: #005982;
>> -@blue-medium: #c7dfff;
>> -@blue-light: #f1f7ff;
>> -@blue-light2: #e4f0f5;
>> -
>> -/* Ruby colors */
>> -@red-dark: #420000;
>> -@red-main: #bf1616;
>> -@red-medium: #f7baba;
>> -@red-light: #fce7e7;
>> -@red-light2: #fed7c9;
>> -
>> -/* Emerald colors */
>> -@green-dark: #197948;
>> -@green-main: #23af9b;
>> -@green-medium: #7ae3ad;
>> -@green-light: #e5f9ef;
>> -@green-light2: #d7f9ef;
>> -
>> -/* Amber colors */
>> -@amber-dark: #bc4216;
>> -@amber-main: #f08906;
>> -@amber-medium: #f5c4b3;
>> -@amber-light: #fcede8;
>> -@amber-light2: #fcedcd;
>> -
>> -/* Saphir theme */
>> -/*
>> -@main-color-theme : @blue-main;
>> -@dark-color-theme : @blue-dark;
>> -@medium-color-theme : @blue-medium;
>> -@light-color-theme : @blue-light;
>> -@light2-color-theme : @blue-light2;
>> -@font-color-for-dark : @grey;
>> -@font-color-for-main : @white;
>> -@font-color-for-medium : @dark-color-theme;
>> -@font-color-for-light : @dark-color-theme;
>> -@shadow-color : @black;
>> -@shadow-color-light : @greydark;
>> -*/
>> -
>> -/* Ruby theme */
>> -/*
>> -@main-color-theme : @red-main;
>> -@dark-color-theme : @red-dark;
>> -@medium-color-theme : @red-medium;
>> -@light-color-theme : @red-light;
>> -@light2-color-theme : @red-light2;
>> -@font-color-for-dark : @grey;
>> -@font-color-for-main : @white;
>> -@font-color-for-medium : @dark-color-theme;
>> -@font-color-for-light : @dark-color-theme;
>> -@shadow-color : @black;
>> -@shadow-color-light : @greydark;
>> -/*
>> -
>> -/* Emerald theme */
>> -/*
>> -@main-color-theme : @green-main;
>> -@dark-color-theme : @green-dark;
>> -@medium-color-theme : @green-medium;
>> -@light-color-theme : @green-light;
>> -@light2-color-theme : @green-light2;
>> -@font-color-for-dark : @white;
>> -@font-color-for-main : @white;
>> -@font-color-for-medium : @dark-color-theme;
>> -@font-color-for-light : @dark-color-theme;
>> -@shadow-color : @black;
>> -@shadow-color-light : @greydark;
>> -*/
>> -/* Amber theme */
>> -@main-color-theme : @amber-main;
>> -@dark-color-theme : @amber-dark;
>> -@medium-color-theme : @amber-medium;
>> -@light-color-theme : @amber-light;
>> -@light2-color-theme : @amber-light2;
>> -@font-color-for-dark : @white;
>> -@font-color-for-main : @white;
>> -@font-color-for-medium : @dark-color-theme;
>> -@font-color-for-light : @dark-color-theme;
>> -@shadow-color : @black;
>> -@shadow-color-light : @greydark;
>> -
>> -
>> -@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-white.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;
>> -
>> - /* IE7 */
>> - *padding-top: 0.2em;
>> - *padding-bottom: 0;
>> -
>> - &: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;
>> +
>> +/* Saphir colors */
>> +@blue-dark: #002333;
>> +@blue-main: #005982;
>> +@blue-medium: #c7dfff;
>> +@blue-light: #f1f7ff;
>> +@blue-light2: #e4f0f5;
>> +
>> +/* Ruby colors */
>> +@red-dark: #420000;
>> +@red-main: #bf1616;
>> +@red-medium: #f7baba;
>> +@red-light: #fce7e7;
>> +@red-light2: #fed7c9;
>> +
>> +/* Emerald colors */
>> +@green-dark: #197948;
>> +@green-main: #23af9b;
>> +@green-medium: #7ae3ad;
>> +@green-light: #e5f9ef;
>> +@green-light2: #d7f9ef;
>> +
>> +/* Amber colors */
>> +@amber-dark: #bc4216;
>> +@amber-main: #f08906;
>> +@amber-medium: #f5c4b3;
>> +@amber-light: #fcede8;
>> +@amber-light2: #fcedcd;
>> +
>> +/* Saphir theme */
>> +/*
>> +@main-color-theme : @blue-main;
>> +@dark-color-theme : @blue-dark;
>> +@medium-color-theme : @blue-medium;
>> +@light-color-theme : @blue-light;
>> +@light2-color-theme : @blue-light2;
>> +@font-color-for-dark : @grey;
>> +@font-color-for-main : @white;
>> +@font-color-for-medium : @dark-color-theme;
>> +@font-color-for-light : @dark-color-theme;
>> +@shadow-color : @black;
>> +@shadow-color-light : @greydark;
>> +*/
>> +
>> +/* Ruby theme */
>> +/*
>> +@main-color-theme : @red-main;
>> +@dark-color-theme : @red-dark;
>> +@medium-color-theme : @red-medium;
>> +@light-color-theme : @red-light;
>> +@light2-color-theme : @red-light2;
>> +@font-color-for-dark : @grey;
>> +@font-color-for-main : @white;
>> +@font-color-for-medium : @dark-color-theme;
>> +@font-color-for-light : @dark-color-theme;
>> +@shadow-color : @black;
>> +@shadow-color-light : @greydark;
>> +/*
>> +
>> +/* Emerald theme */
>> +/*
>> +@main-color-theme : @green-main;
>> +@dark-color-theme : @green-dark;
>> +@medium-color-theme : @green-medium;
>> +@light-color-theme : @green-light;
>> +@light2-color-theme : @green-light2;
>> +@font-color-for-dark : @white;
>> +@font-color-for-main : @white;
>> +@font-color-for-medium : @dark-color-theme;
>> +@font-color-for-light : @dark-color-theme;
>> +@shadow-color : @black;
>> +@shadow-color-light : @greydark;
>> +*/
>> +/* Amber theme */
>> +@main-color-theme : @amber-main;
>> +@dark-color-theme : @amber-dark;
>> +@medium-color-theme : @amber-medium;
>> +@light-color-theme : @amber-light;
>> +@light2-color-theme : @amber-light2;
>> +@font-color-for-dark : @white;
>> +@font-color-for-main : @white;
>> +@font-color-for-medium : @dark-color-theme;
>> +@font-color-for-light : @dark-color-theme;
>> +@shadow-color : @black;
>> +@shadow-color-light : @greydark;
>> +
>> +
>> +@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-white.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;
>
>
Re: svn commit: r1757462 [1/4] - in /ofbiz/trunk/themes:
flatgrey/webapp/flatgrey/ rainbowstone/webapp/rainbowstone/
Posted by Jacques Le Roux <ja...@les7arts.com>.
OK, the *.less type is not in the svn config. I'll revert, add it, and commit again.
So again, please committers remember to do so when you commit a new file type.
While at it I really wonder if we need to have 4 colored versions of the same theme in trunk?
I suggest to have only one and propose the others as external components, later plugins. We could use a third party location to propose the 3 others
theme component (GitHub, https://oem.ofbizci.net/oci-2, etc.)
Opinions?
Jacques
Le 24/08/2016 � 07:44, jleroux@apache.org a �crit :
> Author: jleroux
> Date: Wed Aug 24 05:44:00 2016
> New Revision: 1757462
>
> URL: http://svn.apache.org/viewvc?rev=1757462&view=rev
> Log:
> Removes now useless IE7 "star html hack". I was used to prevent IE7 from applying some CCS rules: http://css-discuss.incutio.com/wiki/Star_Html_Hack
> And the hack is claimed deprecated here : https://blogs.msdn.microsoft.com/ie/2005/10/12/call-to-action-the-demise-of-css-hacks-and-broken-pages/
>
> Thanks to Florian Montalbano research at "css property name correction in flatgrey and rainbowstone themes" - https://issues.apache.org/jira/browse/OFBIZ-7960#
>
> I checked, the IE7 market share is residual, no needs to keep this dragging down feature
>
> Modified:
> ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css
> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less
> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-emerald.less
> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-ruby.less
> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-saphir.less
> ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/style.css
>
> Modified: ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css
> URL: http://svn.apache.org/viewvc/ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css?rev=1757462&r1=1757461&r2=1757462&view=diff
> ==============================================================================
> --- ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css (original)
> +++ ofbiz/trunk/themes/flatgrey/webapp/flatgrey/style.css Wed Aug 24 05:44:00 2016
> @@ -922,10 +922,6 @@ form .basic-table,
> text-shadow: #fff 0 1px 1px; /* Setting must be in px */
> /*text-transform:uppercase;*/
> width: auto;
> -
> - /* IE7 */
> - *padding-top: 0.2em;
> - *padding-bottom: 0;
> }
>
> .basic-table .collapsed {
> @@ -1512,16 +1508,6 @@ input[type="button"] {
> text-shadow: #fff 0 1px 1px; /* Setting must be in px */
> /*text-transform:uppercase;*/
> width: auto;
> -
> - /* IE7 */
> - *padding-top: 0.2em;
> - *padding-bottom: 0;
> -}
> -
> -button {
> - /* IE7 */
> - *padding-top: 0.1em;
> - *padding-bottom: 0.1em;
> }
>
> a.disabled,
> @@ -1563,11 +1549,6 @@ input[type="week"] {
> padding: 0.2em 0.3em;
>
> height: 1.8em;
> -
> - /* IE7 */
> - *padding-top: 0.2em;
> - *padding-bottom: 0.1em;
> - *height: auto;
> }
>
> /*
>
> Modified: ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less
> URL: http://svn.apache.org/viewvc/ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less?rev=1757462&r1=1757461&r2=1757462&view=diff
> ==============================================================================
> --- ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less (original)
> +++ ofbiz/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-amber.less Wed Aug 24 05:44:00 2016
> @@ -1,1997 +1,1990 @@
> -/* 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;
> -
> -/* Saphir colors */
> -@blue-dark: #002333;
> -@blue-main: #005982;
> -@blue-medium: #c7dfff;
> -@blue-light: #f1f7ff;
> -@blue-light2: #e4f0f5;
> -
> -/* Ruby colors */
> -@red-dark: #420000;
> -@red-main: #bf1616;
> -@red-medium: #f7baba;
> -@red-light: #fce7e7;
> -@red-light2: #fed7c9;
> -
> -/* Emerald colors */
> -@green-dark: #197948;
> -@green-main: #23af9b;
> -@green-medium: #7ae3ad;
> -@green-light: #e5f9ef;
> -@green-light2: #d7f9ef;
> -
> -/* Amber colors */
> -@amber-dark: #bc4216;
> -@amber-main: #f08906;
> -@amber-medium: #f5c4b3;
> -@amber-light: #fcede8;
> -@amber-light2: #fcedcd;
> -
> -/* Saphir theme */
> -/*
> -@main-color-theme : @blue-main;
> -@dark-color-theme : @blue-dark;
> -@medium-color-theme : @blue-medium;
> -@light-color-theme : @blue-light;
> -@light2-color-theme : @blue-light2;
> -@font-color-for-dark : @grey;
> -@font-color-for-main : @white;
> -@font-color-for-medium : @dark-color-theme;
> -@font-color-for-light : @dark-color-theme;
> -@shadow-color : @black;
> -@shadow-color-light : @greydark;
> -*/
> -
> -/* Ruby theme */
> -/*
> -@main-color-theme : @red-main;
> -@dark-color-theme : @red-dark;
> -@medium-color-theme : @red-medium;
> -@light-color-theme : @red-light;
> -@light2-color-theme : @red-light2;
> -@font-color-for-dark : @grey;
> -@font-color-for-main : @white;
> -@font-color-for-medium : @dark-color-theme;
> -@font-color-for-light : @dark-color-theme;
> -@shadow-color : @black;
> -@shadow-color-light : @greydark;
> -/*
> -
> -/* Emerald theme */
> -/*
> -@main-color-theme : @green-main;
> -@dark-color-theme : @green-dark;
> -@medium-color-theme : @green-medium;
> -@light-color-theme : @green-light;
> -@light2-color-theme : @green-light2;
> -@font-color-for-dark : @white;
> -@font-color-for-main : @white;
> -@font-color-for-medium : @dark-color-theme;
> -@font-color-for-light : @dark-color-theme;
> -@shadow-color : @black;
> -@shadow-color-light : @greydark;
> -*/
> -/* Amber theme */
> -@main-color-theme : @amber-main;
> -@dark-color-theme : @amber-dark;
> -@medium-color-theme : @amber-medium;
> -@light-color-theme : @amber-light;
> -@light2-color-theme : @amber-light2;
> -@font-color-for-dark : @white;
> -@font-color-for-main : @white;
> -@font-color-for-medium : @dark-color-theme;
> -@font-color-for-light : @dark-color-theme;
> -@shadow-color : @black;
> -@shadow-color-light : @greydark;
> -
> -
> -@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-white.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;
> -
> - /* IE7 */
> - *padding-top: 0.2em;
> - *padding-bottom: 0;
> -
> - &: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;
> +
> +/* Saphir colors */
> +@blue-dark: #002333;
> +@blue-main: #005982;
> +@blue-medium: #c7dfff;
> +@blue-light: #f1f7ff;
> +@blue-light2: #e4f0f5;
> +
> +/* Ruby colors */
> +@red-dark: #420000;
> +@red-main: #bf1616;
> +@red-medium: #f7baba;
> +@red-light: #fce7e7;
> +@red-light2: #fed7c9;
> +
> +/* Emerald colors */
> +@green-dark: #197948;
> +@green-main: #23af9b;
> +@green-medium: #7ae3ad;
> +@green-light: #e5f9ef;
> +@green-light2: #d7f9ef;
> +
> +/* Amber colors */
> +@amber-dark: #bc4216;
> +@amber-main: #f08906;
> +@amber-medium: #f5c4b3;
> +@amber-light: #fcede8;
> +@amber-light2: #fcedcd;
> +
> +/* Saphir theme */
> +/*
> +@main-color-theme : @blue-main;
> +@dark-color-theme : @blue-dark;
> +@medium-color-theme : @blue-medium;
> +@light-color-theme : @blue-light;
> +@light2-color-theme : @blue-light2;
> +@font-color-for-dark : @grey;
> +@font-color-for-main : @white;
> +@font-color-for-medium : @dark-color-theme;
> +@font-color-for-light : @dark-color-theme;
> +@shadow-color : @black;
> +@shadow-color-light : @greydark;
> +*/
> +
> +/* Ruby theme */
> +/*
> +@main-color-theme : @red-main;
> +@dark-color-theme : @red-dark;
> +@medium-color-theme : @red-medium;
> +@light-color-theme : @red-light;
> +@light2-color-theme : @red-light2;
> +@font-color-for-dark : @grey;
> +@font-color-for-main : @white;
> +@font-color-for-medium : @dark-color-theme;
> +@font-color-for-light : @dark-color-theme;
> +@shadow-color : @black;
> +@shadow-color-light : @greydark;
> +/*
> +
> +/* Emerald theme */
> +/*
> +@main-color-theme : @green-main;
> +@dark-color-theme : @green-dark;
> +@medium-color-theme : @green-medium;
> +@light-color-theme : @green-light;
> +@light2-color-theme : @green-light2;
> +@font-color-for-dark : @white;
> +@font-color-for-main : @white;
> +@font-color-for-medium : @dark-color-theme;
> +@font-color-for-light : @dark-color-theme;
> +@shadow-color : @black;
> +@shadow-color-light : @greydark;
> +*/
> +/* Amber theme */
> +@main-color-theme : @amber-main;
> +@dark-color-theme : @amber-dark;
> +@medium-color-theme : @amber-medium;
> +@light-color-theme : @amber-light;
> +@light2-color-theme : @amber-light2;
> +@font-color-for-dark : @white;
> +@font-color-for-main : @white;
> +@font-color-for-medium : @dark-color-theme;
> +@font-color-for-light : @dark-color-theme;
> +@shadow-color : @black;
> +@shadow-color-light : @greydark;
> +
> +
> +@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-white.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;
> +
> + &: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%;
> +}
>
>
>
>