:root {
  /* ! DropDown Color */
  --clrDdBorderLightGray: rgb(184, 182, 182);
  --clrDdWhite: #ffffff;
  --clrDdLightGray : lightgray;
  --clrDdDarkGray: rgb(66, 64, 64);
  --clrDdDarkBlue: rgb(9, 143, 233);
  --clrDdLightBlue: rgb(115, 196, 250);
  --clrDdDarkGreen: #41AF3E;
  --clrDdLightGreen: #50EE4E;
  --clrDdDarkRed: #FF0D22;
  --clrDdLightRed: #FF6B6B;
  --clrDdDarkOrange: rgb(255, 115, 0);
  --clrDdLightOrange: rgb(255, 173, 106);
  --clrDdDarkYellow: #cdb801;
  --clrDdLightYellow: #fde401;

  /* ! Button Color */
  
  --szDropShadow: 7px 7px 7px;
  --szInsetShadowBot: 0 -5px 4px;
  --szDropShadowHov: 7px 12px 7px;
  --szInsetShadowTopHovNActv: 0 -10px 10px;
  --szDropShadowActv: 3px 3px 3px;
  --szInsetShadowTopNBotActv: 0 -7px 7px;

  --szXAxisShadow: 3px;
  --szDropShadowHovDpdwn: var(--szXAxisShadow) 12px 7px;
  --clrHovDropShadowWhiteBtn: rgb(183, 232, 207);

  --szDropShadowDpdwn: var(--szXAxisShadow) 7px 7px;
  --clrDropShadowBlueBtn: rgba(0, 195, 255, 0.377);
  --clrBotInnerShadow: rgba(0, 0, 0, 0.25);
  
  
}
.clInputGroup {
  box-shadow: var(--szDropShadow) var(--clrDropShadowBlue),
  inset var(--szInsetShadowBot) var(--clrBotInnerShadow),
  inset var(--szInsetShadowTopNBotActv) var(--clrInnerShadowGreen);
  border-radius: 12px;
  transition: all 100ms ease-in-out;
  border: none;
  outline: none;
}

/* ***** Button Style ***** */

.greenBtn {
  background: linear-gradient(to bottom, var(--clrDdLightGreen), var(--clrDdDarkGreen));
  color: var(--clrDdWhite);
  border-radius: 10px !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--clrDdBorderLightGray);
  padding: 10px;
  text-align: center;
  transition: 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
  min-width: 100px;
  min-height: 50px;
  &:hover {
    opacity: 0.45;
  }
  &:active {
    opacity: 0.75;
  }
}

.redBtn {
  background: linear-gradient(to bottom, var(--clrDdLightRed), var(--clrDdDarkRed));
  color: var(--clrDdWhite);
  border-radius: 10px !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--clrDdBorderLightGray);
  padding: 10px;
  text-align: center;
  transition: 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
  min-width: 100px;
  min-height: 50px;
  &:hover {
    opacity: 0.45;
  }
  &:active {
    opacity: 0.75;
  }
}

.orangeBtn {
  background: linear-gradient(to bottom, var(--clrDdLightOrange), var(--clrDdDarkOrange));
  color: var(--clrDdDarkGray);
  border-radius: 10px !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--clrDdBorderLightGray);
  padding: 10px;
  text-align: center;
  transition: 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
  min-width: 100px;
  min-height: 50px;
  &:hover {
    opacity: 0.45;
  }
  &:active {
    opacity: 0.75;
  }
}

.yellowBtn {
  background: linear-gradient(to bottom, var(--clrDdLightYellow), var(--clrDdDarkYellow));
  color: var(--clrDdDarkGray);
  border-radius: 10px !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--clrDdBorderLightGray);
  padding: 10px;
  text-align: center;
  transition: 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
  min-width: 100px;
  min-height: 50px;
  &:hover {
    opacity: 0.45;
  }
  &:active {
    opacity: 0.75;
  }
}

.grayBtn {
  background: linear-gradient(to bottom, var(--clrDdLightGray), var(--clrDdDarkGray));
  color: var(--clrDdWhite);
  border-radius: 10px !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--clrDdBorderLightGray);
  padding: 10px;
  text-align: center;
  transition: 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
  min-width: 100px;
  min-height: 50px;
  &:hover {
    opacity: 0.45;
  }
  &:active {
    opacity: 0.75;
  }
}

.blueBtn {
  background: linear-gradient(to bottom, var(--clrDdLightBlue), var(--clrDdDarkBlue));
  color: var(--clrDdWhite);
  border-radius: 10px !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--clrDdBorderLightGray);
  padding: 10px;
  text-align: center;
  transition: 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
  min-width: 100px;
  min-height: 50px;
  &:hover {
    opacity: 0.45;
  }
  &:active {
    opacity: 0.75;
  }
}

.whiteBtn {
  background: linear-gradient(to bottom, var(--clrDdWhite), var(--clrDdLightGray));
  color: var(--clrDdColorDarkGray);
  border-radius: 10px !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--clrDdBorderLightGray);
  padding: 10px;
  text-align: center;
  transition: 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
  /* min-width: 100px;
  min-height: 50px; */
  &:hover {
    opacity: 0.45;
  }
  &:active {
    opacity: 0.75;
  }
}

.whiteBtnBase {
  background: linear-gradient(to bottom, var(--clrDdWhite), var(--clrDdLightGray));
  color: var(--clrDdColorDarkGray);
  border-radius: 10px !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--clrDdBorderLightGray);
  padding: 10px;
  text-align: center;
  transition: 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
  &:hover {
    opacity: 0.45;
  }
  &:active {
    opacity: 0.75;
  }
}

@media screen and (width > 989px) and (width < 1120px) {
  .col-9:has(>div#id_RowMenuUserPc) {
    width: 71%;
  }
}

.clBtnSpanDel {
  &:hover {
    cursor: pointer;
  }
}

.clIconBtn {
  width: 24px;
}

/* ***** Buttons Actions ***** */
.clAncElemBtn {
  &:hover {
    opacity: 0.8;
    cursor: pointer;
    margin-top: 1px;
    margin-bottom: -1px;
  }
  &:active {
    margin-top: 3px;
    margin-bottom: -3px;
  }
}
.clImgAncElemPc {
    width: 64px;
}
.clImgAncElemPh {
    width: 48px;
}

/* ***** DropDown Style ***** */

.whiteBtnDpdwn {
  background: linear-gradient(to bottom, var(--clrDdWhite), var(--clrDdLightGray));
  color: var(--clrDdColorDarkGray);
  border-radius: 10px !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--clrDdBorderLightGray);
  padding: 10px;
  text-align: center;
  transition: 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
  &:hover {
    opacity: 0.45;
  }
  &:active {
    opacity: 0.75;
  }
}

.grayBtnDpdwn {
  background: linear-gradient(to bottom, var(--clrDdLightGray), var(--clrDdDarkGray));
  color: var(--clrDdWhite);
  border-radius: 10px !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--clrDdBorderLightGray);
  padding: 10px;
  text-align: center;
  transition: 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
  &:hover {
    opacity: 0.45;
  }
  &:active {
    opacity: 0.75;
  }
}

.blueBtnDpdwn {
  background: linear-gradient(to bottom, var(--clrDdLightBlue), var(--clrDdDarkBlue));
  color: var(--clrDdWhite);
  border-radius: 10px !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--clrDdBorderLightGray);
  padding: 10px;
  text-align: center;
  transition: 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
  &:hover {
    opacity: 0.45;
  }
  &:active {
    opacity: 0.75;
  }
}

.greenBtnDpdwn {
  background: linear-gradient(to bottom, var(--clrDdLightGreen), var(--clrDdDarkGreen));
  color: var(--clrDdWhite);
  border-radius: 10px !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--clrDdBorderLightGray);
  padding: 10px;
  text-align: center;
  transition: 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
  &:hover {
    opacity: 0.45;
  }
  &:active {
    opacity: 0.75;
  }
}

.redBtnDpdwn {
  background: linear-gradient(to bottom, var(--clrDdLightRed), var(--clrDdDarkRed));
  color: var(--clrDdWhite);
  border-radius: 10px !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--clrDdBorderLightGray);
  padding: 10px;
  text-align: center;
  transition: 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
  &:hover {
    opacity: 0.45;
  }
  &:active {
    opacity: 0.75;
  }
}

.orangeBtnDpdwn {
  background: linear-gradient(to bottom, var(--clrDdLightOrange), var(--clrDdDarkOrange));
  color: var(--clrDdDarkGray);
  border-radius: 10px !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--clrDdBorderLightGray);
  padding: 10px;
  text-align: center;
  transition: 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
  &:hover {
    opacity: 0.45;
  }
  &:active {
    opacity: 0.75;
  }
}

.yellowBtnDpdwn {
  background: linear-gradient(to bottom, var(--clrDdLightYellow), var(--clrDdDarkYellow));
  color: var(--clrDdDarkGray);
  border-radius: 10px !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--clrDdBorderLightGray);
  padding: 10px;
  text-align: center;
  transition: 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
  &:hover {
    opacity: 0.45;
  }
  &:active {
    opacity: 0.75;
  }
}