@import url("https://fonts.googleapis.com/css2?family=Fasthand&display=swap");@import url("https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap");@import url("https://fonts.googleapis.com/css2?family=Delicious+Handrawn&display=swap");@import url("https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap");



.react-datepicker__input-container {
  position: initial !important;
}
.select-none-cls {
  -webkit-user-select: none;
  /* Disable text selection in WebKit browsers */
  user-select: none;
}
.widgets {
  -webkit-user-select: none;
  /* Disable text selection in WebKit browsers */
  user-select: none;
}
.radioButton {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  font-size: 12px;
  border: 1px solid #007bff;
  border-radius: 50px;
}
.prefillCanvas {
  width: 205px;
  height: 81px;
}
.signatureCanvas {
  width: 440px;
  height: 167px;
}
.tabWidth {
  border: 1px solid #f3f4f6;
  background-color: #f3f4f6;
  width: 440px;
}
.mysignatureCanvas {
  width: 370px;
  height: 146px;
}
.mystampCanvas {
  width: 370px;
  height: 146px;
}
.intialSignature {
  border: 2px solid #888;
  background-color: rgb(255, 255, 255);
  width: 150px;
  height: 150px;
}
[data-theme="opensigndark"] .tabWidth {
  border: 1px solid #1f2937 !important;
  background-color: #1f2937 !important;
}
.intialSignatureCanvas {
  width: 150px;
  height: 150px;
}
.checked-radio::after {
  content: "";
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  border-radius: 9999px;
  background-color: #111111;
  /* blue-500 */
}
/* Dark mode support for initials box in /managesign */
[data-theme="opensigndark"] .intialSignature {
  background-color: #1f2937 !important;
  border-color: #4b5563 !important;
}
[data-theme="opensigndark"] .intialSignatureCanvas {
  background-color: #1f2937 !important;
  border-color: #4b5563 !important;
}
/* Also support signature canvas for consistency */
[data-theme="opensigndark"] .signatureCanvas {
  background-color: #1f2937 !important;
  border-color: #4b5563 !important;
}
/* Dark mode support for initials box in /managesign */
[data-theme="opensigndark"] .intialSignature {
  background-color: #1f2937 !important;
  border-color: #4b5563 !important;
}
[data-theme="opensigndark"] .intialSignatureCanvas {
  background-color: #1f2937 !important;
  border-color: #4b5563 !important;
}
/* Also support signature canvas for consistency */
[data-theme="opensigndark"] .signatureCanvas {
  background-color: #1f2937 !important;
  border-color: #4b5563 !important;
}
/* Also support signature canvas for consistency */
[data-theme="opensigndark"] .mysignatureCanvas {
  background-color: #1f2937 !important;
  border-color: #4b5563 !important;
}
.icon {
  position: absolute;
  font-size: 14px;
  cursor: pointer;
  z-index: 2;
  filter: drop-shadow(1px 1px white) drop-shadow(1px -1px white)
    drop-shadow(1px 0px  white) drop-shadow(-1px 1px white)
}
.ScrollbarsCustom-TrackY {
  width: 4px !important;
}
.ScrollbarsCustom-TrackX {
  height: 4px !important;
}
.signYourselfBlock {
  padding: 0px;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
.sendMail {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.18);
  padding: 3px 30px;
  color: white;
  font-weight: 500 !important;
  font-size: 14px !important;
  border: none;
  margin-left: 10px;
}
.user {
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
}
.disabled {
  opacity: 0.5;
  /* Example: reduce opacity to visually indicate disabled state */
  pointer-events: none;
  /* Prevents mouse clicks and other events */
  /* background-color: #888; */
}
.signTab {
  cursor: pointer !important;
  font-weight: 400 !important;
  margin: 7px !important;
  font-size: 15px !important;
}
.signerComponent {
  /* box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; */
  /* width: 180px; */
  background-color: white;
}
.uploadImgLogo {
  font-size: 50px;
}
.DropdownMenuContent,
.DropdownMenuSubContent {
  min-width: 130px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
  padding: 5px;
  animation-duration: 400ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
  z-index: 30 !important;
}
.DropdownMenuContent[data-side="top"],
.DropdownMenuSubContent[data-side="top"] {
  animation-name: slideDownAndFade;
}
.DropdownMenuContent[data-side="right"],
.DropdownMenuSubContent[data-side="right"] {
  animation-name: slideLeftAndFade;
}
.DropdownMenuContent[data-side="bottom"],
.DropdownMenuSubContent[data-side="bottom"] {
  animation-name: slideUpAndFade;
}
.DropdownMenuContent[data-side="left"],
.DropdownMenuSubContent[data-side="left"] {
  animation-name: slideRightAndFade;
}
.DropdownMenuItem {
  font-size: 13px;
  line-height: 1;
  color: black;
  background-color: #fff;
  display: flex;
  align-items: center;
  height: 25px;
  padding: 0 5px;
  position: relative;
  padding-left: 20px;
  -webkit-user-select: none;
          user-select: none;
  outline: none;
  border: none;
}
.SelectTrigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  padding: 0 70px;
  font-size: 13px;
  line-height: 1;
  height: 35px;
  gap: 5px;
  border: none;
  background-color: #887abf;
  width: 100px;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
}
.selectEmail {
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  padding: 0 15px;
  font-size: 13px;
  line-height: 1;
  height: 35px;
  gap: 5px;
  border: none;
  background-color: #887abf;
  width: 200px;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
}
option {
  overflow-y: scroll;
}
.SelectTrigger:hover {
  border: none;
  outline: none;
}
.selectEmail:hover {
  border: none;
  outline: none;
}
.SelectTrigger:focus {
  /* box-shadow: 0 0 0 2px black; */
  border: none;
  outline: none;
}
.selectEmail:focus {
  /* box-shadow: 0 0 0 2px black; */
  border: none;
  outline: none;
}
.SelectTrigger[data-placeholder] {
  color: black;
}
.SelectIcon {
  color: Var(--violet-11);
}
.SelectContent {
  overflow: hidden;
  background-color: white;
  border-radius: 6px;
  box-shadow:
    0px 10px 38px -10px rgba(22, 23, 24, 0.35),
    0px 10px 20px -15px rgba(22, 23, 24, 0.2);
}
.SelectViewport {
  padding: 5px;
}
.SelectItem {
  font-size: 13px;
  line-height: 1;
  color: var(--violet-11);
  border-radius: 3px;
  display: flex;
  align-items: center;
  height: 25px;
  padding: 0 35px 0 25px;
  position: relative;
  -webkit-user-select: none;
          user-select: none;
  z-index: 10 !important;
}
.SelectItem[data-disabled] {
  color: var(--mauve-8);
  pointer-events: none;
}
.SelectItem[data-highlighted] {
  outline: none;
  background-color: var(--violet-9);
  color: var(--violet-1);
}
.SelectLabel {
  padding: 0 25px;
  font-size: 12px;
  line-height: 25px;
  color: var(--mauve-11);
}
.SelectSeparator {
  height: 1px;
  background-color: var(--violet-6);
  margin: 5px;
}
.SelectItemIndicator {
  position: absolute;
  left: 0;
  width: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.SelectScrollButton {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 25px;
  background-color: white;
  color: var(--violet-11);
  cursor: default;
}
.dropDownStyle {
  width: auto;
}
.autoSignScroll {
  overflow-y: auto;
}
.autoSignScroll::-webkit-scrollbar {
  display: none;
}
.validateInputText {
  width: 76%;
}
.radioGroupInput {
  width: 100%;
}
.radioGroup {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
@media screen and (max-width: 766px) {
  .validateInputText {
    width: 93%;
  }

  .dropdown-menu {
    min-width: 0rem !important;
  }

  #navbar {
    overflow: hidden;
    z-index: 49;
  }

  /* Navbar links */
  #navbar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px;
    text-decoration: none;
  }

  #navbar a.active {
    background-color: #4caf50;
    color: white;
  }

  /* Page content */
  .content {
    padding: 16px;
  }

  /* The sticky class is added to the navbar
  with JS when it reaches its scroll position */
  .stickyHead {
    top: 50px;
    left: 0.9rem;
  }

  .stickySignerHead {
    position: fixed;
  }

  /* Add some top padding to the page content
  to prevent sudden quick movement (as the
  navigation bar gets a new position at the top of the
  page (position:fixed and top:0) */
  .stickyHead + .content {
    padding-top: 60px;
  }
}
@media screen and (max-width: 487px) and (min-width: 351px) {
  .signatureCanvas {
    width: 300px;
    height: 120px;
  }

  .mysignatureCanvas {
    width: 300px;
    height: 118px;
  }

  .mystampCanvas {
    width: 300px;
    height: 118px;
  }

  .tabWidth {
    width: 300px;
  }

  .uploadImgLogo {
    font-size: 30px;
  }

  .signTab {
    font-weight: 500 !important;
    font-size: 12px !important;
  }
}
.scroll-hide::-webkit-scrollbar {
  display: none;
}
@media screen and (max-width: 350px) and (min-width: 311px) {
  .signatureCanvas {
    width: 280px;
    height: 112px;
  }

  .mysignatureCanvas {
    width: 280px;
    height: 111px;
  }
  .mystampCanvas {
    width: 280px;
    height: 111px;
  }

  .tabWidth {
    width: 280px;
  }

  .signTab {
    font-weight: 500 !important;
    font-size: 10px !important;
  }

  .uploadImgLogo {
    font-size: 25px;
  }
}
@media screen and (max-width: 310px) {
  .signatureCanvas {
    width: 230px;
    height: 92px;
  }

  .mysignatureCanvas {
    width: 230px;
    height: 91px;
  }
  .mystampCanvas {
    width: 230px;
    height: 91px;
  }

  .tabWidth {
    width: 230px;
  }

  .signTab {
    font-weight: 500 !important;
    font-size: 8px !important;
  }

  .uploadImgLogo {
    font-size: 20px;
  }
}