: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;
  --clrDdUltraLightGreen: #9bfd9a;
  --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);
  
  --widthSize: 80px;
  --heightSize: 40px;

  /* ! Button state */

  --opaBtnHover: 0.45;
  --opaBtnActive: 0.75;
  --opaBtnDisabled: 0.30;
}

.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 ***** */

.greenLightBtn {
  background: linear-gradient(to bottom, var(--clrDdUltraLightGreen), var(--clrDdLightGreen));
  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: var(--widthSize);
  min-height: var(--heightSize);
  &:hover {
    opacity: var(--opaBtnHover);
  }
  &:active {
    opacity: var(--opaBtnActive);
  }
  &:disabled {
    opacity: var(--opaBtnDisabled);
    cursor: not-allowed;
  }
}

.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: var(--widthSize);
  min-height: var(--heightSize);
  &:hover {
    opacity: var(--opaBtnHover);
  }
  &:active {
    opacity: var(--opaBtnActive);
  }
  &:disabled {
    opacity: var(--opaBtnDisabled);
    cursor: not-allowed;
  }
}

.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: var(--widthSize);
  min-height: var(--heightSize);
  &:hover {
    opacity: var(--opaBtnHover);
  }
  &:active {
    opacity: var(--opaBtnActive);
  }
  &:disabled {
    opacity: var(--opaBtnDisabled);
    cursor: not-allowed;
  }
}

.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: var(--widthSize);
  min-height: var(--heightSize);
  &:hover {
    opacity: var(--opaBtnHover);
  }
  &:active {
    opacity: var(--opaBtnActive);
  }
  &:disabled {
    opacity: var(--opaBtnDisabled);
    cursor: not-allowed;
  }
}

.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: var(--widthSize);
  min-height: var(--heightSize);
  &:hover {
    opacity: var(--opaBtnHover);
  }
  &:active {
    opacity: var(--opaBtnActive);
  }
  &:disabled {
    opacity: var(--opaBtnDisabled);
    cursor: not-allowed;
  }
}

.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: var(--widthSize);
  min-height: var(--heightSize);
  &:hover {
    opacity: var(--opaBtnHover);
  }
  &:active {
    opacity: var(--opaBtnActive);
  }
  &:disabled {
    opacity: var(--opaBtnDisabled);
    cursor: not-allowed;
  }
}

.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: var(--widthSize);
  min-height: var(--heightSize);
  &:hover {
    opacity: var(--opaBtnHover);
  }
  &:active {
    opacity: var(--opaBtnActive);
  }
  &:disabled {
    opacity: var(--opaBtnDisabled);
    cursor: not-allowed;
  }
}

.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: var(--widthSize);
  min-height: var(--heightSize);
  &:hover {
    opacity: var(--opaBtnHover);
  }
  &:active {
    opacity: var(--opaBtnActive);
  }
  &:disabled {
    opacity: var(--opaBtnDisabled);
    cursor: not-allowed;
  }
}

.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: var(--opaBtnHover);
  }
  &:active {
    opacity: var(--opaBtnActive);
  }
  &:disabled {
    opacity: var(--opaBtnDisabled);
    cursor: not-allowed;
  }
}

.whiteBtnInpGroup {
  background: linear-gradient(to bottom, var(--clrDdWhite), var(--clrDdLightGray));
  color: var(--clrDdColorDarkGray);
  padding: 8px 16px 8px 16px;             /* Top Right Bottom Left */
  &:hover {
    opacity: var(--opaBtnHover);
  }
  &:active {
    opacity: var(--opaBtnActive);
  }
  &:disabled {
    opacity: var(--opaBtnDisabled);
    cursor: not-allowed;
  }
  &:after {
    display: none;
  }
  >span>img {
    width: 32px !important;
    height: auto !important;
  }
}

.grayBtnInpGroup {
  background: linear-gradient(to bottom, var(--clrDdLightGray), var(--clrDdDarkGray));
  color: var(--clrDdWhite);
  padding: 8px 16px 8px 16px;             /* Top Right Bottom Left */
  &:hover {
    opacity: var(--opaBtnHover);
  }
  &:active {
    opacity: var(--opaBtnActive);
  }
  &:disabled {
    opacity: var(--opaBtnDisabled);
    cursor: not-allowed;
  }
  &:after {
    display: none;
  }
  >span>img {
    width: 32px !important;
    height: auto !important;
  }
}

.clInputGrpDd {
  border-radius: 0 6px 6px 0 !important;
}

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

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

.clIconBtn {
  width: 24px !important;
  height: auto !important;
}

.clIconBtnLg {
  width: 36px !important;
  height: auto !important;
}

/* ***** Button Table FF and Rew Style ***** */

.greenBtnTab {
  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: 8px;
  text-align: center;
  transition: 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
  min-width: 80px;
  min-height: 40px;
  &:hover {
    opacity: var(--opaBtnHover);
  }
  &:active {
    opacity: var(--opaBtnActive);
  }
  &:disabled {
    opacity: var(--opaBtnDisabled);
    cursor: not-allowed;
  }
}

.greenLightBtnTab {
  background: linear-gradient(to bottom, var(--clrDdUltraLightGreen), var(--clrDdLightGreen));
  color: var(--clrDdWhite);
  border-radius: 10px !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--clrDdBorderLightGray);
  padding: 8px;
  text-align: center;
  transition: 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
  min-width: 80px;
  min-height: 40px;
  &:hover {
    opacity: var(--opaBtnHover);
  }
  &:active {
    opacity: var(--opaBtnActive);
  }
  &:disabled {
    opacity: var(--opaBtnDisabled);
    cursor: not-allowed;
  }
}

.grayBtnTab {
  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: 8px;
  text-align: center;
  transition: 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
  min-width: 80px;
  min-height: 40px;
  &:hover {
    opacity: var(--opaBtnHover);
  }
  &:active {
    opacity: var(--opaBtnActive);
  }
  &:disabled {
    opacity: var(--opaBtnDisabled);
    cursor: not-allowed;
  }
}


/* ***** 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: var(--opaBtnHover);
  }
  &:active {
    opacity: var(--opaBtnActive);
  }
  &:disabled {
    opacity: var(--opaBtnDisabled);
    cursor: not-allowed;
  }
}

.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: var(--opaBtnHover);
  }
  &:active {
    opacity: var(--opaBtnActive);
  }
  &:disabled {
    opacity: var(--opaBtnDisabled);
    cursor: not-allowed;
  }
}

.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: var(--opaBtnHover);
  }
  &:active {
    opacity: var(--opaBtnActive);
  }
  &:disabled {
    opacity: var(--opaBtnDisabled);
    cursor: not-allowed;
  }
}

.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: var(--opaBtnHover);
  }
  &:active {
    opacity: var(--opaBtnActive);
  }
  &:disabled {
    opacity: var(--opaBtnDisabled);
    cursor: not-allowed;
  }
}

.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: var(--opaBtnHover);
  }
  &:active {
    opacity: var(--opaBtnActive);
  }
  &:disabled {
    opacity: var(--opaBtnDisabled);
    cursor: not-allowed;
  }
}

.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: var(--opaBtnHover);
  }
  &:active {
    opacity: var(--opaBtnActive);
  }
  &:disabled {
    opacity: var(--opaBtnDisabled);
    cursor: not-allowed;
  }
}

.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: var(--opaBtnHover);
  }
  &:active {
    opacity: var(--opaBtnActive);
  }
  &:disabled {
    opacity: var(--opaBtnDisabled);
    cursor: not-allowed;
  }
}

.dropdown-menu {
  max-height: 400px !important;
  overflow-y: auto !important;
}