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

/*moi4e SUNONE colors */
/*
@yellow: #FFA800;
@yellow-light: #FFF4DE;
@yellow-dark: #574217;

@header-color: @yellow;
@footer-color: @yellow;
@light-color-theme: @yellow-light;
@main-color-theme: @yellow;
@dark-color-theme: @yellow-dark;
*/

@yellow: #D94F70; /* Till 26-DEC-2022 #f52549; */
@yellow-light: #FFF4DE;
@yellow-dark: #574217;

@header-color: @yellow;
@footer-color: @yellow;
@light-color-theme: @yellow-light;
@main-color-theme: #24063b ; /* Till 21-DEC-2025 rgb(72,61,139) ;/* Till 28-DEC-2022 #0f4c81; /* Till 26-DEC-2022 #00293c; */
@dark-color-theme: @yellow-dark;

/* include main less theme file */
@import (less) "moi4e-main-theme.less";

/****************************************************************************
*****************************************************************************/
/****************************************************************************
*****************************************************************************/
/* STARTS Added dynamic colors by Shraddha on 09-OCT-2022  */

/**COMMON COLOR**/

@background-page-color: rgba(200,200,200,0.5); /* #e1e1e1; */
@border-color-02: #ced4da;
@header-background-color-01 :  #24063b ; /* Till 21-DEC-2025 rgb(72,61,139) ; /* Till 28-DEC-2022 #0f4c81;  /* Till 26-DEC-2022 #00293c; */  /* #3F4790; */
@button-color-01: #D94F70; /* Till 26-DEC-2022 #f52549; */ /*#FF5757; /* #f06548; /* used for buttons */
@button-color-01-hover: #1DA1F2;
@button-color-02: #FFFFFF;
@user-icon-color: #405189;
@inner-dark-background-color-01-title: rgb(158,159,207); /* old till 25-OCT-2022 #7e7f8f;*/
@inner-dark-background-color-01-body: rgba(200,200,200,0.5); /* This makes whiter till 20-OCT-2023 was @inner-dark-background-color-01-body: rgba(200,200,200,0.25); */
@font-color-dark: #010101;


@alternate-row-grey-lighter:#f2f3f7;
@alternate-row-grey-light: #dfe0e4;

@button-background-03:#c9c1db;


/************************************************/

/* ENDS Added dynamic colors by Shraddha on 09-OCT-2022  */
/******************************************************************************
*******************************************************************************/
/******************************************************************************
*******************************************************************************/
/* STARTS Added by Shraddha on 25-SEP-2022 FOR ALL CHANGED STYLES */

input[type="submit"],
.smallSubmit,
button {
  display: inline-block;
  background-color: @button-color-01;
  border-color: @button-color-01;
  border: none;
  border-radius: 0.4rem;
  color: #fff4de;
  padding: 0.5rem 0.8rem;
  font-size: 1.2rem;
  cursor: pointer;
  border-radius:25px; /* Added on 09-Oct-2022 */
}

/* Added one line on 09-Oct-2022 */
input[type="submit"]:hover,
.smallSubmit:hover,
button:hover {
  color: @button-color-02; 
  opacity:0.8;
}

.button-bar.tab-bar,
.tab-bar.tab-bar {
  border-bottom: 1px solid #dfe0e4;
  padding-bottom: 0.8rem;
  margin-top:30px;
  margin-bottom:30px;
  padding-bottom:30px;
}


.button-bar ul li ul li.selected a,
.tab-bar ul li ul li.selected a,
.button-bar ul li ul li:hover a,
.tab-bar ul li ul li:hover a {
  color: #fff4de;
  background-color: @button-color-01-hover; /* @button-color-01; */
  border-radius: 25px; /* Added on 09-Oct-2022 */
}

/* Added on 09-Oct-2022 */
.button-bar ul li ul li a, .tab-bar ul li ul li a{
  font-size:13px;
  background: transparent;
}

/* Added on 09-Oct-2022 */
.button-bar.button-style-1 > a,.button-bar ul li ul
.tab-bar.button-style-1 > a {
  background: #fff4de;
  color: #ffa800;
  padding: 0.5rem 0.8rem;
  column-gap: 1rem;
  border-radius: 0.5rem;
  display: inline-block;
  margin-right: 0.5rem;
  font-weight: 600;
}

/*** HEADER STYLE ***/
#main-navigation-bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Quicksand', sans-serif;
  background-color: @header-background-color-01;
  height: 60px;
  position:fixed;
  z-index: 99;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

#main-navigation-bar #main-nav-bar-left #app-bar-list .app-btn a,
#main-navigation-bar #main-nav-bar-left .app-bar-list .app-btn a {
  padding: 0.2rem 0.3rem;
  color: white;
  font-size: 1.4rem;
  font-weight: 500;
  font-size:15px;
  font-family: hkgrotesk,sans-serif;
}

@media screen and (min-width: 1232px) {
  #main-navigation-bar #main-nav-bar-left #company-logo {
    /* min-height: 50px; */ /* Commented on 17-Oct-2022 as logo was getting cut */
    min-width: 80px; /* Changed from 129px; to 80 px on 17-Oct-2022 as logo was getting cut */
    /*
    background: url("/moi4e/images/ofbiz_logo_white.svg") no-repeat center center / cover;
    */
    margin-left:15px; /* Changed from 50px; to 15px on 17-Oct-2022 to move logo to left */
  }
}


#main-navigation-bar #main-nav-bar-left .container-more-app #more-app {
  display: flex;
  align-items: end;
  margin-left: 0px;
}


#app-navigation ul {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
  padding: 1rem;
  flex-wrap:wrap;
}
#app-navigation ul li li.selected a,
#app-navigation ul li li:hover a {
  background-color: rgba(10,179,156,.1);
  border-radius: 0.5rem;
  color: #0ab39c;
  display: block;
}
#app-navigation ul li li a {
  /* padding: 0.5rem 1.1rem; */
  /* Changed from above to below to accomodate second level menu on single line by reducing padding */
  padding: 0.5rem 5px; 
  color: #574217;
  font-weight: 600;
  font-size: 15px;
  display: block;
}

#column-container #content-main-section.leftonly {
  width: 79%; /* Till 27-OCT-2022 was 78%; /* Till 26-Oct-2022 was 73%; */
  float: left;
  margin-left: 0.5%; /* Till 26-OCT-2022 was 6%; */
}
#column-container .left {
  float: left; /* Till 26-OCT-2022 was right;*/
  width: 20%;
}
#column-container .left input[type="text"] {
  width: calc(100% - 2rem);
  /* margin-bottom:15px; Commented this on 26-OCT-2022 */
}

/* ----------------------------------- */
/*      Screenlet  Style      */
/* ----------------------------------- */
.screenlet {
  border-radius: 0.5rem;
  box-shadow: 0 0 15px 0 rgba(72, 90, 117, 0.05);
  margin-bottom: 2rem;
  overflow: unset;
  /* HERE REMOVED THE overflow: auto; but check how to effect it TODO::SHRADDHA */
}

.screenlet .screenlet-title-bar {
  /* position: relative;*/
	/* Changed from above to below by SHraddha on 18-APR-2023 
	as quote items - new item was not visible */
  position: inherit;

  color: #ffffff;
  background-color: @header-background-color-01;;
  padding: 1.2rem 0.8rem;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  border-bottom: 1px solid #dfe0e4;
  /* STARTS Added below 3 by Shraddha on 10-DEC-2022 for Order Info pdf and actions adjustment in screenlet */
  /* REMOVED AS CREATED misalignments in other pages
  display: flex;
  justify-content: space-between;
  align-items: center;
  */
  /* ENDS Added above 3 by Shraddha on 10-DEC-2022 for Order Info pdf and actions adjustment in screenlet */
}
.screenlet .screenlet-title-bar h1,
.screenlet .screenlet-title-bar .h1,
.screenlet .screenlet-title-bar h2,
.screenlet .screenlet-title-bar .h2,
.screenlet .screenlet-title-bar h3,
.screenlet .screenlet-title-bar .h3 {
  background: none;
  color: #ffffff;
}

.screenlet .screenlet-title-bar h3,
.screenlet .screenlet-title-bar .h3 {
  padding: 0.2rem 0.3rem;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}

.screenlet .screenlet-title-bar ul {
  margin-bottom:0;
}

/* Commented on 26-OCT-2022 as repeat of present on line 362 
.screenlet > .screenlet-body form fieldset > div label {
  color: #ffffff;
  font-weight: 500;
  font-size: 1.3rem;
}
*/

/* ----------------------------------- */
/*        Fieldgroup  Style        */
/*------------------------------------ */
.fieldgroup {
  border-bottom: 1px solid #dfe0e4;
  padding: 0.5rem;
  padding-top:10px;
  padding-bottom:10px;
}

.fieldgroup-title-bar {
  padding: 0.2rem 0.3rem;
  font-size: 1.3rem;
  font-weight: 600;
  color: #ffffff;
}

.field-lookup a {
  background: url("/moi4e/images/fieldlookup.svg") no-repeat center center / cover;
  display: inline-block;
  vertical-align: top;
  margin-top: 0.6rem;
  width: 16px;
  height: 16px;
  cursor: pointer;
  /* 
  position: absolute;
  Commented above to below by SHraddha on 08-MAY-2023 to avoid overlapping of lookup fields
  */
  position: initial;
  right: 25px;
  top:15px;
}

.field-lookup span.tooltip > p {
  /* 
  position: absolute;
  Commented above to below by SHraddha on 08-MAY-2023 to avoid overlapping of lookup fields
  */
  position: initial;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  color: black; /* Added by SHraddha on 07-FEB-2023 */
  margin-left: 9px; /* Added by SHraddha on 07-FEB-2023 */
  
  /* Commented below on 26-OCT-2022 to allow display of htmlTemplate lookup descriptions
  padding-bottom: 0.5rem;
  display:none;
  */
  /* Added all below on 26-OCT-2022 */
  /*padding-bottom: 0px; Commented by Shraddha on 07-FEB-2023 */
  margin-bottom: 0px;
  /*font-size: 120%; *//* Till 07-FEB-2023 was 160% */
  /* Changed from 120 to 160% by Shraddha on 08-JUL-2023 to make it more prominent for values like VCODE, etc  */
  font-size: 160%;
  
  top: 10px;
  
  /* Commented above and wrote below 2 by Shraddha on 03-DEC-2022 to show the values below instead of side on the smart pop up box and reset back to as is because affected all pages, used below only in required pages*/
  /*
  top: 35px;
  left: inherit;
  */
  /* Added below by Shraddha pn 04-AUG-2023 for proper Visibility of tooltips */
  padding-top:2px;
}

.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"] {
  padding: 0.2rem 0.7rem;
  color: white;
  font-size: 13px;
  font-weight: 600;
  background-color: @button-color-01;
  border-color: @button-color-01;
  border-radius: 0.3rem;
  text-transform: uppercase;
  margin: 0.5rem 0;
}

.basic-form table tr .label,
.basic-form table tr .group-label {
  text-align: left;
  padding-right: 0.5rem;
  padding-left: 0;
  max-width: 2%;
  font-weight: 600;
  color: #3f4254;
  font-family: 'Poppins', sans-serif;
  font-size:13px;
}

/* ---------------------- */
/*      Footer Style      */
/* ---------------------- */
#footer {
  background: @header-background-color-01;
  padding: 0.5rem 0;
  height: 27px; /* Till 26-OCT-2022 was 50px; */
  position: fixed; /* absolute; Changed to fixed position else this scrolls with page */
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-family: 'Quicksand', sans-serif !important;
  z-index: 9999;
}

.screenlet > .screenlet-body {
  background-color: #FFFFFF;
  padding: 0.8rem;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  padding-left:20px;
}

.screenlet > .screenlet-body form fieldset > div label {
  color: @font-color-dark; /* Till 26-Oct-2022 was #ffffff; */
  font-weight: 500;
  font-size: 1.3rem;
  display:block;
}
.screenlet > .screenlet-body #search-results {
  padding: 0.5rem;
}
.screenlet > .screenlet-body > div {
  margin: 0.8rem 0.1rem;
  color: #000000;
  font-size: 13px;
  font-weight: 500;
}

/*** FORM STYLE ***/
textarea,
select,
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"] {
  border: 1px solid @border-color-02;
  padding: 0.5rem 0.8rem;
  border-radius: 0.5rem;
}

label.has-checkbox > input[type="radio"],
.has-radio > input[type="radio"] {
  padding-right: 0.3rem;
  margin-top:-3px;
}

.field-lookup a {
  /* Uncommented on 24-OCT-2022 to let the list symbol appear in smart lookups and used helveticus image due to image issue of current theme */
  background: url("images/fieldlookup.svg") no-repeat center center / cover;
  /* */
  display: inline-block;
  vertical-align: top;
  margin-top: 0.6rem;
  width: 16px;
  height: 16px;
  cursor: pointer;
  /* 
  position: absolute;
  Commented above to below by SHraddha on 08-MAY-2023 to avoid overlapping of lookup fields
  */
  position: initial;
  right: 5px; /* 24-Oct-2022 Changed from 25px */
  top:1px;
}

.has-checkbox input[type="checkbox"] {
  margin-right: 0.3rem;
  margin-top:-3px;
}

.button-style-2 a{
  font-size:14px !important;
  padding-top:10px !important;
  padding-bottom:10px !important;
  padding-left:10px !important;
  padding-right:10px !important;
  border-radius: 0 !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight:normal !important;
  color: #ffffff !important;
  background-color: @button-color-01 !important;
  border-color: transparent !important;
  border-radius: 25px !important;
}


/* ENDS Added by Shraddha on 25-SEP-2022 FOR CHANGED STYLES */
/******************************************************************************
*******************************************************************************/
/******************************************************************************
*******************************************************************************/
/* STARTS Added by Shraddha on 25-SEP-2022 FOR ALL NEW STYLES */

#main-navigation-bar #main-nav-bar-right #user-avatar #user-details a{
  color:@user-icon-color;
  background-color: #ffffff;
  
}
#main-navigation-bar #main-nav-bar-right #user-avatar #user-details span {
  padding-left: 5px;
  background-position: left center;
}

/* Commented below by Shraddha on 25-OCT-2022 else listing was having lot of extra spaces
#screenlet_1_col{
  padding-left:40px;
  padding-right:40px;
}
*/

.button-bar ul li ul li a, .tab-bar ul li ul li a{
  font-size:13px;
}

.sidebar-toggle i{
  font-size:25px;
  color: @button-color-01;
}

.lists.screenlet .basic-table tr{
  padding-bottom:15px;
}

/* ---------------------------- */
/*     Multi-Column Styles      */
/* ---------------------------- */
#column-container{
  margin-top:80px;
}

#ProductKeywordsPanel > .screenlet-body{
  background:@header-background-color-01;
}

#ProductKeywordsPanel .field-lookup{
    display:block;
}

#keywordSearchForm{
  padding-top:20px;
}

/* ----------------------------------- */
/*        Fieldgroup  Style        */
/*------------------------------------ */
.fieldgroup , .fieldgroup-acc{
  background-color: @inner-dark-background-color-01-title;
  border-radius: 5px;
}
.fieldgroup , .fieldgroup-acc label{
  color:#ffffff;
}
.fieldgroup , .fieldgroup-acc .fieldgroup-body{
  margin-top: 10px; /* Till 25-OCT-2022 Was 20px; */
}

.fieldgroup-acc{
  background-color: @inner-dark-background-color-01-title;
  border-radius: 5px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  box-shadow: 0px 2px 5px 0px #7b7b7b54;
}

.fieldgroup-title-bar ul{
  margin-bottom:0;
}

.button-bar{
  /*
  float:left;
  */
  /*
  On 17-Oct-2022 Commented and changed to below to make all header button go right . 
  On left they get confused with screen stitle 
  */

  float: right;

}

.button-style-2 a{
  font-size:16px !important;
  padding-top:5px !important; /* Changed to 5px from 10px on 17-OCT-2022 */
  padding-bottom:5px !important; /* Changed to 5px from 10px on 17-OCT-2022 */
  padding-left:11px !important; /* Changed to 11px from 20px on 17-OCT-2022 */
  padding-right:11px !important; /* Changed to 11px from 20px on 17-OCT-2022 */
  border-radius: 0 !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight:normal !important;
  color: #0ab39c !important;
  background-color: rgba(10,179,156,.1) !important;
  border-color: transparent !important;
}

.product-header , h1{
  display:inline-block;
}


/* scroll bar css */
/*
 * Container style
 */
.ps {
  overflow: hidden !important;
  overflow-anchor: none;
  -ms-overflow-style: none;
  touch-action: auto;
  -ms-touch-action: auto;
}

/*
 * Scrollbar rail styles
 */
.ps__rail-x {
  display: none;
  opacity: 0;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  height: 15px;
  /* there must be 'bottom' or 'top' for ps__rail-x */
  bottom: 0px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-y {
  display: none;
  opacity: 0;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  width: 15px;
  /* there must be 'right' or 'left' for ps__rail-y */
  right: 0;
  /* please don't change 'position' */
  position: absolute;
}

.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
  display: block;
  background-color: transparent;
}

.ps:hover > .ps__rail-x,
.ps:hover > .ps__rail-y,
.ps--focus > .ps__rail-x,
.ps--focus > .ps__rail-y,
.ps--scrolling-x > .ps__rail-x,
.ps--scrolling-y > .ps__rail-y {
  opacity: 0.6;
}

.ps .ps__rail-x:hover,
.ps .ps__rail-y:hover,
.ps .ps__rail-x:focus,
.ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking {
  background-color: #eee;
  opacity: 0.9;
}

/*
 * Scrollbar thumb styles
 */
.ps__thumb-x {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color .2s linear, height .2s ease-in-out;
  -webkit-transition: background-color .2s linear, height .2s ease-in-out;
  height: 6px;
  /* there must be 'bottom' for ps__thumb-x */
  bottom: 2px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__thumb-y {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color .2s linear, width .2s ease-in-out;
  -webkit-transition: background-color .2s linear, width .2s ease-in-out;
  width: 6px;
  /* there must be 'right' for ps__thumb-y */
  right: 2px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
  background-color: #999;
  height: 11px;
}

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
  background-color: #999;
  width: 11px;
}

/* MS supports */
@supports (-ms-overflow-style: none) {
  .ps {
    overflow: auto !important;
  }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .ps {
    overflow: auto !important;
  }
}

/****************************************************/
/****************************************************/
/* sidebar css STARTS */
.container-wide{
    min-height:100vh;
    padding-left:280px;
    -webkit-transition:all .2s ease;
    -o-transition:all .2s ease;
    transition:all .2s ease
}
@media screen and (min-width:1200px){
    .container-wide{
        padding-left:280px
    }
}
@media screen and (max-width:991px){
    .container-wide{
        padding-left:0
    }
}
.is-expand .container-wide{
    padding-left:70px
}
@media screen and (min-width:992px){
    .sidebar:hover .sidebar-inner .sidebar-menu li.dropdown .arrow{
        opacity:1;
    }
     .is-expand .container-wide{
        padding-left:70px
    }
}
a{
    text-decoration:none
}
.sidebar{
    bottom:0;
     top:60px;
     left:0;
     overflow:hidden;
    position:fixed;
    -webkit-transition:all .2s ease;
    -o-transition:all .2s ease;
    transition:all .2s ease;
    width:280px;
    background-color:@header-background-color-01;
    color:#fff;
    z-index:9999
}
.sidebar ul{
    list-style-type:none
}
@media screen and (min-width:992px){
    .sidebar{
        width:60px
    }
    .sidebar .sidebar-inner .sidebar-logo{
        padding:0 20px
    }
    .sidebar .sidebar-inner .sidebar-logo .logo-sm{
        display:none
    }
    .sidebar .sidebar-inner .sidebar-logo>a .logo{
        background-position:0;
        width:150px
    }
    .sidebar .sidebar-inner .sidebar-menu>li>a .title{
        display:none
    }
     .sidebar:hover .sidebar-inner .sidebar-menu>li>a .title{
        display:inline-block
    }
    .sidebar .sidebar-inner .sidebar-menu li.dropdown .arrow{
        opacity:0
    }
    .is-expand .sidebar .sidebar-inner .sidebar-menu li.dropdown .arrow{
        opacity:1
    }
    .sidebar .sidebar-inner .sidebar-menu li.open>ul.dropdown-menu{
        display:block!important
    }
}
@media screen and (max-width:991px){
    .sidebar{
        left:-280px;
        width:250px
    }
}
.sidebar-inner{
    position:relative;
    height:100%
}
.sidebar-logo{
    line-height:0;
    padding:0 20px
}
.sidebar-logo a{
    display:inline-block;
    width:100%;
    color:#fff
}
.sidebar-logo a .logo{
    background-position:0;
    background-repeat:no-repeat;
    display:inline-block;
    min-height:64px;
    width:70px
}
.sidebar-logo a .logo img{
    width:30px
}
.sidebar-logo a .logo-text{
    min-height:64px
}
.sidebar-logo a .logo-text img{
    width:120px
}
.sidebar-logo .mobile-toggle{
    display:none;
    float:right;
    font-size:18px;
    line-height:64px
}
.sidebar-logo .mobile-toggle a{
    color:#fff
}
@media screen and (max-width:991px){
    .sidebar-logo .mobile-toggle{
        display:inline-block
    }
}
@media screen and (min-width:992px){
    .sidebar-logo .mobile-toggle{
        display:none
    }
}
.sidebar-menu{
    /* height:calc(100vh - 65px); */
    /* height:calc(100% - 65px); */
    height:calc(95%);
    list-style:none;
    margin:0;
    overflow:auto;
    padding:0;
    position:relative
}
.sidebar-menu .dropdown-toggle:after{
    display:none
}
.sidebar-menu .sidebar-link.actived:before{
    background:#0f9aee;
    border-radius:50%;
    content:"";
    display:block;
    height:8px;
    left:-4px;
    position:absolute;
    top:calc(50% - 4px);
    width:8px
}
.sidebar-menu li{
    position:relative
}
.sidebar-menu li.dropdown .arrow{
    font-size:10px;
    line-height:40px;
    position:absolute;
    right:30px;
    -webkit-transition:all .05s ease-in;
    -o-transition:all .05s ease-in;
    transition:all .05s ease-in
}
@media screen and (max-width:991px){
    .sidebar-menu li.dropdown .arrow{
        right:25px
    }
}
.sidebar-menu li.dropdown.open>a{
    color:#fff
}
.sidebar-menu li.dropdown.open>a .icon-holder{
    color:#0f9aee
}
.sidebar-menu li.dropdown.open>a>.arrow{
    -webkit-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg)
}
.sidebar-menu li.dropdown.open>.dropdown-menu{
    display:block
}
.sidebar-menu li.dropdown.open>.dropdown-menu .dropdown-menu{
    padding-left:20px
}
.sidebar-menu li.dropdown.open>.dropdown-menu .arrow{
    line-height:25px
}
.sidebar-menu li a{
    color:#fff;
    -webkit-transition:all .3s ease;
    -o-transition:all .3s ease;
    transition:all .3s ease
}
.sidebar-menu li a:focus,.sidebar-menu li a:hover{
    color:#fff;
    text-decoration:none;
    background-color:#668
}
.sidebar-menu>li.dropdown ul.dropdown-menu{
    background-color:rgba(0,0,0,0);
    border-radius:0;
    border:0;
    -webkit-box-shadow:none;
    box-shadow:none;
    float:none;
    padding-left:50px;
    padding-top:0;
    position:relative;
    width:100%
}
.sidebar-menu>li.dropdown ul.dropdown-menu>li>a{
    display:block;
    padding:10px 20px;
    font-size:14px
}
.sidebar-menu>li.dropdown ul.dropdown-menu>li>a:focus,.sidebar-menu>li.dropdown ul.dropdown-menu>li>a:hover{
    background-color:rgba(0,0,0,0);
    color:#fff
}
.sidebar-menu>li.dropdown ul.dropdown-menu>li.actived a{
    color:#fff
}
.sidebar-menu>li>a{
    display:block;
    font-size:15px;
    /* padding:5px 15px; Changed to below on 11-Oct-2022 */
    padding: 5px 15px 5px 3px;
    position:relative;
    white-space:nowrap
}
.sidebar-menu>li>a .icon-holder{
    border-radius:6px;
    display:inline-block;
    font-size:17px;
    height:35px;
    left:0;
    line-height:35px;
    margin-right:14px;
    position:relative;
    text-align:center;
    -webkit-transition:all .3s ease;
    -o-transition:all .3s ease;
    transition:all .3s ease;
    width:35px
}
@media screen and (min-width:992px){
    .is-expand .sidebar{
        width:280px
    }
    .is-expand .sidebar .sidebar-inner .sidebar-logo{
        padding:0
    }
    .is-expand .sidebar .sidebar-inner .sidebar-menu{
        overflow-x:hidden
    }
    .is-expand .sidebar .sidebar-inner .sidebar-menu>li>a .title{
        display:inline-block
    }
    .sidebar:hover{
        width:280px
    }
    .sidebar:hover .sidebar-inner .sidebar-logo{
        padding:0 20px
    }
    .sidebar:hover .arrow{
        opacity:1;
    }
    .is-expand .sidebar:hover .sidebar-inner .sidebar-menu>li>a .title{
        display:inline-block
    }
    .is-expand .sidebar:hover .sidebar-inner .sidebar-menu li.dropdown .arrow{
        opacity:1
    }
    .is-expand .sidebar:hover .sidebar-inner .sidebar-menu li.open>ul.dropdown-menu{
        display:block!important
    }
}
@media screen and (max-width:991px){
    .is-expand .sidebar{
        width:280px;
        left:0
    }
    .is-expand .sidebar .sidebar-inner .sidebar-logo{
        padding:0 20px
    }
    .sidebar .sidebar-inner .sidebar-logo .logo-sm{
        display:none
    }
    .sidebar .sidebar-inner .sidebar-logo>a .logo{
        background-position:0;
        width:150px
    }
    .is-expand .sidebar .sidebar-inner .sidebar-menu>li>a .title{
        display:inline-block
    }
    .is-expand .sidebar .sidebar-inner .sidebar-menu li.dropdown .arrow{
        opacity:1
    }
    .sidebar .sidebar-inner .sidebar-menu li.open>ul.dropdown-menu{
        display:block!important
    }
}
 
/* sidebar css ENDS */
/****************************************************/
/****************************************************/

#ProductKeywordsPanel_col .field-lookup, .field-lookup{ /* Added same style for .field-lookup on 24-Oct-2022 */
  padding-bottom:0;
}

.button-bar-1{
  padding-left:80px;
  padding-top:90px;
}

.button-style-2 a:hover{
  opacity:0.7;
}
.tab-bar ul li ul{
  background: @button-background-03 !important; 
  border-radius: 25px; 
  /* padding: 10px 20px 10px 20px; */
  /* Commented above and wrote below b Shraddha on 17-OCT-2022 as it was touching screenlet heading in some screens like party */
  padding: 3px 10px;
}

.basic-table tr{
  padding-bottom:15px;
}


#ProductBrowseCategoriesPanel_col{
  padding-left:0;
}
.smallSubmit{
  /* font-size:16px !important; Commented on 18-Oct-2022 to make it look uniform across for all buttons */
  background-color: @button-color-01 !important;
  color:#ffffff;
}
.smallSubmit:hover{
  color:#ffffff;
}
.basic-form table {
  width: auto;
}
.basic-form table tr > td {
  padding: 1rem;
  /* color:#ffffff; */
  /* Changed from above to below by Shraddha on 25-OCT-2022 else font-color goes white */
  color:unset;
}

/* Commented on 17-OCT-2022 and added below to change width of all styles
select{
  width:100%;
}
*/

#EditProduct_submitButton{
  margin-left:-15px;
}
@media screen and (max-width:991px){
  #column-container #content-main-section.leftonly{
    width: 77%;
    margin-left:0;
  }
  .jstree a{
    font-size:10px !important;
  }
  #dummyPage{
    width:144px;
  }
  #main-navigation-bar #main-nav-bar-left #company-logo{
    min-height: 40px;
    min-width: 85px;
    margin-left:20px;
  }
  #screenlet_1_col{
    padding-left: 10px;
    padding-right:10px;
  }
}

/* ENDS Added by Shraddha on 25-SEP-2022 FOR NEW STYLES*/
/******************************************************************************
*******************************************************************************/
/******************************************************************************
*******************************************************************************/
/* STARTS ADDED below extra by Shraddha on 26-SEP-2022 tp adjust layout */

.contentarea {
    padding: 2rem;
    /* width: 73%; */
    width: 95%; /* Reverted on 27-Oct-2022 as other screen size reduced unset; /* Till 26-Oct-2022 was 95%; /* Added back with increased width on 17-Oct-2022 */
    float: left;
    margin-left: 5%; /* Changed from 6% to 5% on 17-Oct-2022 */
    font-size: 130%; /* Added on 17-Oct-2022 by Shraddha as font-size of screenlets become much less otherwise */
    /* Added below on 17-OCT-2022 to make entire area of gray background to highlight sections */
    background-color: @background-page-color; /* rgba(200,200,200,0.5); */ 
     /* Added below on 18-OCT-2022 to make entire area of gray background and hide left whie color */
    margin-left: 2rem;
    padding-left:5%;
}

.button-bar.tab-bar, .tab-bar.tab-bar {
    /* Commented on 21-OCT-2023 as repeat
	padding-bottom: 0rem; */
     margin-top: 0px; 
     margin-bottom: 0px; 


     padding-bottom: 5px; /* till 21-OCT-2023 Was padding-bottom: 0px;  */

    /* padding-bottom: 0.8rem; */
    /* margin-top: 30px; */
    /* margin-bottom: 30px; */
    /* padding-bottom: 30px; */
	/* Added below 2 by SHraddha on 07-FEB-2023 as some sub menus were getting hidden */
	  z-index: 50;
	  position: relative;
	  border:0px; /* Added by SHraddha on 09-FEB-2023 */
}

#column-container {
     margin-top: 0px;
    /* margin-top: 80px; */
}
/* commneted on 11-oct-2022
.sidebar-menu {
    overflow: unset;
}
*/
#main-navigation-bar #main-nav-bar-left .navbar-nav{
  /* padding-left:15px; */
  /* Changed to below by Shraddha on 13-Oct-2022 */
  padding:5px;
}

/* Added on 09-Oct-2022 to adjust layout */
/* SUBMENU will merge in main navigation, hence dont change
#app-navigation {
    padding-top: 30px;
}
*/

/* ENDS ADDED below extra by Shraddha on 26-SEP-2022 tp adjust layout */
/******************************************************************************
*******************************************************************************/
/******************************************************************************
*******************************************************************************/
/* Added below by Shraddha on 09-Oct-2022 */

body {
  background: @background-page-color;
}


a.buttontext{
  background: @button-color-01;
  color:@main-color-theme;
  padding:0.5rem 0.8rem;
  column-gap:1rem;
  border-radius: 0.5rem;
  display:inline-block;
  margin-right:0.5rem;
  font-weight: 600;
  margin:0.3rem;
  &:hover{
    color: @light-color-theme;
    background: @button-color-01-hover; /* @main-color-theme; Changed on 18-OCT-2022*/
  }
}
/* Below style added on 11-Oct-2022 to highlight selected first level menu */
a.nav-link.selected{
  background: @button-color-01;
}

/* Below style added on 11-Oct-2022 to hide header of second level menu */
.shorcut div h2{
  display:none;
}

/******************************************************************************
*******************************************************************************/
/* Added below by Shraddha on 17-Oct-2022 */

input[type="submit"], .smallSubmit, button{
  display: inline-block;
  background-color:  @button-color-01; /* Changed on 18-OCT-2022 @main-color-theme; */
  border:none;
  border-radius: 15px;
  color: @light-color-theme;
  padding:5px 13px;
  font-size:1.2rem;
  cursor:pointer;
  &:hover{
    color: @main-color-theme;
    background-color: @button-color-01-hover; /* @light-color-theme; Changed on 18-OCT-2022 */
  }
}

/* Commented on 25-Oct-2022 and wrote below for input */
select{
  width:48%;
}

label {
    margin-bottom: 0px;
}

.button-bar .button-style-2 ul{
  margin-bottom: 5px;
}

.button-bar ul {
    margin-bottom: 5px;
}

.page-title {
    margin-top: 3px;
    margin-bottom: 3px;
    padding-top: 5px;
}

/* Added on 18-Oct-2022 */
/* Earlier below were yellow buttons inside screenlet header */
ul .h3 a {
    background: @button-background-03 !important;
    border-radius: 25px;
    /* padding: 10px 20px 10px 20px; */
    padding: 3px 10px;
}

/* Earlier below were yellow actions inside screenslet header */
.screenlet .screenlet-title-bar ul a {
    background: @button-background-03 !important;
    border-radius: 25px;
    /* padding: 10px 20px 10px 20px; */
    padding: 3px 10px;
}

.screenlet .screenlet-title-bar h3, .screenlet .screenlet-title-bar .h3 {
    padding-right: 5px;
    display: -webkit-inline-box;
}

.screenlet .screenlet-title-bar ul li {
    padding-right: 9px;   /* This is to avoid overwriting the collapse menu */
}

.screenlet .screenlet-title-bar ul .expanded a {
    background: transparent !important;
}

.screenlet .screenlet-title-bar ul .collapsed a {
    background: transparent !important;
}


.errorMessageJGrowl{
  color: darkred !important;
}


.eventMessageJGrowl{ /* Added on 27-Oct-2022 */
  color: darkgreen !important;
}



/******************************************************************************
*******************************************************************************/
/* Added below by Shraddha on 18-Oct-2022 for  */
/* 
Added below by Shraddha on 18-Oct-2022 to make hyperlinks appear 
same as buttons rounded, else they appear square
*/

a.buttontext{
  display: inline-block;
  background-color: @main-color-theme;
  border:none;
  border-radius: 15px;
  color: @light-color-theme;
  padding:5px 13px;
  font-size:1.2rem;
  cursor:pointer;
  &:hover{
    color: @main-color-theme;
    background-color: @button-color-01-hover; /* Changed on 18-OCT-2022 @light-color-theme; */
  }
}

a.buttontext{
  display: inline-block;
  background-color: @button-color-01;
  border-color: @button-color-01;
  border: none;
  border-radius: 0.4rem;
  color: #fff4de;
  padding: 0.5rem 0.8rem;
  font-size: 1.2rem;
  cursor: pointer;
  border-radius:25px; /* Added on 09-Oct-2022 */
}


a.buttontext:hover{
  color: @button-color-02;
  opacity:0.8;
}

/*
.basic-table tr a.buttontext {
  padding: 0.2rem 0.7rem;
  color: white;
  font-size: 13px;
  font-weight: 600;
  background-color: @button-color-01;
  border-color: @button-color-01;
  border-radius: 0.3rem;
  text-transform: uppercase;
  margin: 0.5rem 0;
}
*/

/************ ADDED on 19-OCT-2022 **************************/
/* Below makes the tooltip appear besides the text element */
.has-tooltip > span.tooltipContainer {
    position: relative;
    left: unset;
    top: unset;
    color: #111111;
}

.has-tooltip > i {
    color: #111111;
}


/************ ADDED on 25-OCT-2022 for seperating text fields **************************/
/*
.tabletext {
    margin-top: 2px;
    margin-bottom:2px;
}
*/

td{
  padding-top:2px;
  padding-bottom:2px;
}

/* Default width generated was 90% and pop ups are not seen */
/* Gets overridden with javascript.css and hence changed there only
.ui-dialog .ui-dialog-title {
    width: 1%; 
}

.ui-dialog .ui-dialog-titlebar {
    height: auto;
}
*/

/* 
Added below on 24-Oct-2022 to display all TD items in single line especially for field lookups
*/
/* COMMENTED as all table td start at left most in compaact mode 
td {
    display: inline-flex;
}
*/

/* Added below to show small gap of 2 px between items of td if they are compact diaply style*/
td select, td input {
  margin:2px;
}


.ui-dialog-content td select ,
.ui-dialog-content td input[type='text'] {
  width:35%;
}

#search-options .has-checkbox select ,
#search-options .has-checkbox input[type='text'] {
  width:35%;
}

.basic-table tr {
    padding-bottom: 2px; /* USed as earlier default this was 15px */
}

.basic-form table tr > td {
    padding: 2px; /* USed as earlier default this was 1rem */
}


.ui-dialog .screenlet > .screenlet-body {
  background-color: @background-page-color;  
}

/*
tr {
  background-color: @background-page-color;  
}
*/

/* Changed to 5 px from 8px ie 0.8rem */
.screenlet > .screenlet-body {
    padding: 5px;
}

.basic-table tr td.has-tooltip .tooltip {
    top: unset; /* Earlier this was -2.5px */
}

.has-tooltip > span.tooltipContainer {
    background: rgba(240,240,240,0.25);
}


.basic-form table tr .has-tooltip{
  font-size:13px;
}

td{
  align-items: center;
}

/* Below for Notes not appearing properly Eg: product page Miscelleneous section */
.basic-table tr td.has-tooltip .tooltip {
    left: unset;
    font-size: 13px;
}


.fieldgroup-body {
    background-color: @inner-dark-background-color-01-body;
}

.fieldgroup-body{
  margin-left: 0px; /* Till 25-OCT-2022 Was 20px; ie 2 rem */
  /* Made above 0 and adding padding to look properly */
  padding-left:20px;
}


.fieldgroup {
    padding-bottom: 0px;
}

.alert .errorMessageJGrowl{
  color:darkred;
}

/* Added below on 26-OCT-2022 to unset margin-bottom */
fieldset label {
    margin-bottom: 0px;
}

/* Added to display tooltip ie description of selected htmlTemplate value */
.field-lookup span.tooltip {
    /*
	display: inline-block;
	CHanged from above to below by SHraddha on 08-MAY-2023 */
	display: block;
}


.alternate-row {
    background-color: @alternate-row-grey-lighter;
}

.alternate-row-dark {
    background-color: @alternate-row-grey-light;
}

/* Added below on 28-OCT-2022 */
/* Added to show complete date picker on order Product select screen */
.ui-datepicker {
   z-index:99; /* but due to this the smartloopup icon get hidden on order product select screen */
}

/* Added below on 30-OCT-2022 */
td{
  padding-top:2px;
  padding-bottom:2px;
}

.highlighttext{
  /*background: @button-color-01;
  color:@main-color-theme;
  */
  background-color: rgba(10,179,156,0.9);
  border-radius: 0.5rem;
  color: #fefefe ; /* #111111; */
  display: block;

  padding:0.5rem 0.8rem;
  column-gap:1rem;
  border-radius: 0.5rem;
  display:inline-block;
  margin-right:0.5rem;
  font-size: 120%;
  margin:0.3rem;
}

.highlightblock{
  /*background: @button-color-01;
  color:@main-color-theme;
  */
  background-color: rgba(10,179,156,0.3);
  border-radius: 0.5rem;
  color: #111111;
  display: block;

  padding:0.5rem 0.8rem;
  column-gap:1rem;
  border-radius: 0.5rem;
  display:inline-block;
  margin-right:0.5rem;
  font-size: 100%;
  margin:0.3rem;
  width:100%
}

/* Added below on 25-DEC-2022 as some screens were not displayed completely till bottom */

.contentarea {
    padding-bottom: 40px;
}

/* Added below by Shraddha on 26-DEC-2022 to highlight labels */
.label {
	font-size: 100%;
	color: #004A7A; /* darkblue; */
}

.basic-table .alternate-row-2 {
  background-color: #ffffff; /* #c2c3c7; */
}

/****
Added below by SHraddha on 10-APR-2023 to display required fields in diff color
******/

.required, input.required {
    /* required style for <input> elements */
    /* background-color: #ffffdd; */
	/* Chanhed above to below by Shraddha on 21-OCT-2023  */
	background-color: #FDFD96; 
}

/*******
Added below by SHraddha on 08-MAY-2023
*/
.field-lookup .field-lookup a {
  position: absolute;
}



/******
Added below by Shraddha on 25-AUG-2023 for Form split fieldgroup layout left and right
*/

.float_left_width_50pc{
    float:left;
    width:48%;
}

.float_right_width_50pc{
    float:right;
    width:48%;
}

/** STARTS added by Shraddha on 02-OCT-2023 for Tree expand and collapse ex, gl ACCOUNTS ***/

/*     ================== */
/*      Tree Styles      */
/*     ================== */

.basic-tree {
    /* placeholder */
}

.basic-tree ul {
    padding-left: 1em;
}

.basic-tree li {
    padding-left: 1em;
    white-space: nowrap;
}

.basic-tree li .expanded {
    background: url(/images/collapse.gif) no-repeat left center;
    padding-right: 1em;
}

.basic-tree li .collapsed {
    background: url(/images/expand.gif) no-repeat left center;
    padding-right: 1em;
}

.basic-tree li .leafnode {
    background: url(/images/expand-collapse-placeholder.gif) no-repeat left center;
    padding-right: 1em;
}

.basic-tree li .treeitem {
    /* treeitem is deprecated */
    border-style: none;
    color: #333;
    font-size: 1em;
}

.basic-tree li a:hover {
    color: #0000ff;
}

/* --------------------- */
/** ENDS added by Shraddha on 02-OCT-2023 for Tree expand and collapse ex, gl ACCOUNTS ***/


/* Added by SHraddha on 21-OCT-2023 */
.ui-widget select{
	width:90%;
	position: relative;
}

/*
select{
	width:90%;
	}
*/

select{
	width:auto;
	max-width: 350px; /* Added by Shraddha on 13-MAY-2024 */
	}


/*******
Added below by SHraddha on 16-DEC-2023, however this doesn't work and hence had to add this in bootstrap.min.css
*/
.alert {
  color: red;
}


/* Added below by Shraddha on 21-JUN-2024 to highlight labels with wrap else due to line scrolling appears */
.labelzwrap {
	/*  
	font-size:13px;
	color: #3f4254;
	 */
	font-size: 100%;
	color: #004A7A; /* darkblue; */
	margin-bottom: 0px;
	
	text-align: left;
	  padding-right: 0.5rem;
	  padding-left: 0;
	  max-width: 2%;
	  font-weight: 600;
	  
	  font-family: 'Poppins', sans-serif;
	
}



/* Added below by Shraddha on 24-JUN-2025 to have same color for icon of login screen */
  .theme-icon {
    color: @button-color-01;
    font-size: 36px;
    margin: 10px 0px;
  }


/******************************************************************************
*******************************************************************************/
/* TODO:: STARTS DELETE LATER BELOW STYLE ADDED to bring second level menu below for study else keep on 11-OCT-2022 */
#app-navigation ul {
    padding-top: 35px;
    padding-left: 35px;
}
/* Check if need to delete below */
#app-navigation ul {
    margin-bottom: 0px;
    padding-bottom: 5px;
}
/* TODO:: ENDS DELETE LATER BELOW STYLE ADDED to bring second level menu below for study else keep on 11-OCT-2022 */