:root {
  --body-color: #333333;
  --header-bg: #769d73;
  --sidebar-bg: #fafafa;

  --button-bg:#ee720e;
  --button-bg-hover:#e39a0c;
  --button-text-color:#fafafa;

  --field-bg: #fff;

  --h1-color: rgb(85, 123, 34);

  --tab-background: #fab700;
  --tab-background-active: rgb(85, 123, 34);
  --tab-border-color: rgb(85, 123, 34);

  --orange: #e39a0c;

  --sb-width: 250px;


  --colorPaletteDarkRedBackground2: #d69ca5;
  --colorPaletteDarkRedForeground2: #420610;
  --colorPaletteDarkRedBorderActive: #750b1c;
  --colorPaletteCranberryBackground2: #eeacb2;
  --colorPaletteCranberryForeground2: #6e0811;
  --colorPaletteCranberryBorderActive: #c50f1f;
  --colorPalettePumpkinBackground2: #efc4ad;
  --colorPalettePumpkinForeground2: #712d09;
  --colorPalettePumpkinBorderActive: #ca5010;
  --colorPalettePeachBackground2: #ffddb3;
  --colorPalettePeachForeground2: #8f4e00;
  --colorPalettePeachBorderActive: #ff8c00;
  --colorPaletteGoldBackground2: #ecdfa5;
  --colorPaletteGoldForeground2: #6c5700;
  --colorPaletteGoldBorderActive: #c19c00;
  --colorPaletteBrassBackground2: #e0cea2;
  --colorPaletteBrassForeground2: #553e06;
  --colorPaletteBrassBorderActive: #986f0b;
  --colorPaletteBrownBackground2: #ddc3b0;
  --colorPaletteBrownForeground2: #50301a;
  --colorPaletteBrownBorderActive: #8e562e;
  --colorPaletteForestBackground2: #bdd99b;
  --colorPaletteForestForeground2: #294903;
  --colorPaletteForestBorderActive: #498205;
  --colorPaletteSeafoamBackground2: #a8f0cd;
  --colorPaletteSeafoamForeground2: #00723b;
  --colorPaletteSeafoamBorderActive: #00cc6a;
  --colorPaletteDarkGreenBackground2: #9ad29a;
  --colorPaletteDarkGreenForeground2: #063b06;
  --colorPaletteDarkGreenBorderActive: #0b6a0b;
  --colorPaletteLightTealBackground2: #a6e9ed;
  --colorPaletteLightTealForeground2: #00666d;
  --colorPaletteLightTealBorderActive: #00b7c3;
  --colorPaletteTealBackground2: #9bd9db;
  --colorPaletteTealForeground2: #02494c;
  --colorPaletteTealBorderActive: #038387;
  --colorPaletteSteelBackground2: #94c8d4;
  --colorPaletteSteelForeground2: #00333f;
  --colorPaletteSteelBorderActive: #005b70;
  --colorPaletteBlueBackground2: #a9d3f2;
  --colorPaletteBlueForeground2: #004377;
  --colorPaletteBlueBorderActive: #0078d4;
  --colorPaletteRoyalBlueBackground2: #9abfdc;
  --colorPaletteRoyalBlueForeground2: #002c4e;
  --colorPaletteRoyalBlueBorderActive: #004e8c;
  --colorPaletteCornflowerBackground2: #c8d1fa;
  --colorPaletteCornflowerForeground2: #2c3c85;
  --colorPaletteCornflowerBorderActive: #4f6bed;
  --colorPaletteNavyBackground2: #a3b2e8;
  --colorPaletteNavyForeground2: #001665;
  --colorPaletteNavyBorderActive: #0027b4;
  --colorPaletteLavenderBackground2: #d2ccf8;
  --colorPaletteLavenderForeground2: #3f3682;
  --colorPaletteLavenderBorderActive: #7160e8;
  --colorPalettePurpleBackground2: #c6b1de;
  --colorPalettePurpleForeground2: #341a51;
  --colorPalettePurpleBorderActive: #5c2e91;
  --colorPaletteGrapeBackground2: #d9a7e0;
  --colorPaletteGrapeForeground2: #4c0d55;
  --colorPaletteGrapeBorderActive: #881798;
  --colorPaletteLilacBackground2: #e6bfed;
  --colorPaletteLilacForeground2: #63276d;
  --colorPaletteLilacBorderActive: #b146c2;
  --colorPalettePinkBackground2: #f7c0e3;
  --colorPalettePinkForeground2: #80215d;
  --colorPalettePinkBorderActive: #e43ba6;
  --colorPaletteMagentaBackground2: #eca5d1;
  --colorPaletteMagentaForeground2: #6b0043;
  --colorPaletteMagentaBorderActive: #bf0077;
  --colorPalettePlumBackground2: #d696c0;
  --colorPalettePlumForeground2: #43002b;
  --colorPalettePlumBorderActive: #77004d;
  --colorPaletteBeigeBackground2: #d7d4d4;
  --colorPaletteBeigeForeground2: #444241;
  --colorPaletteBeigeBorderActive: #7a7574;
  --colorPaletteMinkBackground2: #cecccb;
  --colorPaletteMinkForeground2: #343231;
  --colorPaletteMinkBorderActive: #5d5a58;
  --colorPalettePlatinumBackground2: #cdd6d8;
  --colorPalettePlatinumForeground2: #3b4447;
  --colorPalettePlatinumBorderActive: #69797e;
  --colorPaletteAnchorBackground2: #bcc3c7;
  --colorPaletteAnchorForeground2: #202427;
  --colorPaletteAnchorBorderActive: #394146;
}


*,
*:before,
*:after {
  box-sizing: border-box;
}

.backWhite {
  background-color: #fff;
}

body {
  margin: 0px;   
  font-family: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  background-color: #fff;
  color: var(--body-color);
  font-size:0.875rem;
  /* overflow: hidden; 'Poppins', */
}

a {
	text-decoration: none;
  color: var(--body-color);
}

a:hover {
  text-decoration: none;
  color: #718daa;
}

h1 {
  margin-block-start: 0px;
  margin-block-end: 0px;
  font-size:1.5em;
  color: var(--h1-color);
}

p {
  margin-block-start: 5px;
  margin-block-end: 5px;
}

.maxHeight {
  max-width: 100%;
  max-height: calc(var(--vh) - 56px);
  overflow: auto;
}

.centerDiv {
  margin-left: auto;
  margin-right: auto;
}

.textCenter {
  text-align: center;
}

.textLeft {
  text-align: left;
}

.textRight {
  text-align: right;
}

.p15 {
  padding: 15px;
}

.p5 {
  padding: 5px;   
}

.mt15 {
  margin-top: 15px;
}

.mt25 {
  margin-top: 15px;
}

.mt40 {
  margin-top: 40px;
}

.arHide {
  display: none;
}

.arShow {
  display: block!important;
}

.page {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: var(--sb-width);
  
  width: 100%;
  

  
  /* transition: width 0.3s; */
  /* transition: transform 0.3s; */
  transition: all  0.3s;
  
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;

  width: var(--sb-width);
  height: var(--vh);
  max-height: var(--vh);
  box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);

  /* border-right-color: #f7a826; */
  /* border-right-style: solid; */
  /* border-right-width: 1px; */

  overflow-y: auto;

  background-color: var(--sidebar-bg);
  transition: all 0.3s;
  /* transition: transform 0.3s; */
  /* transition: margin-left  0.3s; */

  
}

.sidebar ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  
}

.sidebar .colapse {
  height: 0px;
  overflow: hidden;

  transition: height 1.3s;
}

.sidebar li {
  /* height: 20px; */
  height: 36px;
  line-height: 36px;
  cursor: pointer;
  
}

.sidebar div[sb-grp] {
  padding: 0 8px;
  height: 48px;
  line-height: 48px;
  font-size: 1em;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  /* margin-top: 15px; */
  color:#f7a826;
}

.sidebar div[sb-grp]:hover {
  background-color: var(--header-bg);
  color: #fff;
  cursor: pointer;
  border-radius: 5px;
}

.sidebar div[sb-grp] a {
  
  color:#f7a826;
}

.sidebar div[sb-grp] a:hover {
  background-color: var(--header-bg);
  color: #fff;
  cursor: pointer;
  border-radius: 5px;
}

.sidebar li a {
  padding: 0 24px;
  height: 36px;
  font-size: 1em;
  color: var(--sidebar-fg);
  line-height: 36px;
  width: 100%;
  display: block;
  letter-spacing: 1px;
  text-transform: capitalize;
  
  font-weight: 500;
}

.sidebar li a:hover {
  background-color: var(--header-bg);
  color: #fff;
  border-radius: 5px;
}

.sidebar li a[active] {
  background-color: var(--orange);
  color: #fff;
  border-radius: 5px;
}

.sidebar a:hover {
  background-color: var(--header-bg);
  color: #fff;
  border-radius: 5px;
}

.sidebar a[active] {
  background-color: var(--orange);
  color: #fff;
  border-radius: 5px;
}

.header {
  position: sticky; /*relative*/
  top:0px;
  z-index: 3;
  height: 56px;
  width: 100%;
  background-color: var(--header-bg);
  display: flex;
  justify-content: space-between;
  box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
  border-bottom-color: var(--orange);
  border-bottom-style: solid;
  border-bottom-width: 4px;
  color:#fff;
  
}

/* .headerSvg {
  color: #fff;
  opacity: 1;
  fill: currentColor;
  width:28px;
  height:28px;
} */

.headerMenu {
  align-self: center;
  margin-right: 15px;
  display: flex;
  gap: 20px;
}

.headerTitle {
  color: #fff;
  font-weight: 600;
  font-size: 1.2em;
  margin-left: 15px;
  align-self: center;
  display: flex;
  gap: 20px;
}

.btnHeaderBack {
  cursor: pointer;
}

.btnBurgerMenu {
  cursor: pointer;
}

.app {
  width: 100%;
  background-color: #f7f7f7;
  
  /* height: calc(var(--vh) - 56px);
  overflow: auto; */
  /* margin-top: 56px; */
  /* top:56px; */
  /* position: relative; */
  min-height: calc(var(--vh) - 56px);
}

.container {
  max-width:100%;
}

@media (max-width: 992px) {
  .sidebar {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
  }
}