/* Change the “Submit a ticket” footer button */
.Button__footerBtn {
  /* Base colour */
  background-color: #4ABEA0 !important;
  border-color:     #4ABEA0 !important;
  color:            #ffffff !important;  /* ensures white text */
  transition:       background-color .2s ease, border-color .2s ease;
}

/* Hover (and focus) state */
.Button__footerBtn:hover,
.Button__footerBtn:focus {
  background-color: #F044A0 !important;
  border-color:     #F044A0 !important;
  color:            #ffffff !important;
}


/* Back-to-top button base state */
.AppContainer__backToTop {
  background-color: #F044A0 !important;
  border-color:     #F044A0 !important;
  transition:       background-color .2s ease, border-color .2s ease;
}

/* Back-to-top hover/focus state */
.AppContainer__backToTop:hover,
.AppContainer__backToTop:focus {
  background-color: #4ABEA0 !important;
  border-color:     #4ABEA0 !important;
}

/* Keep the arrow icon white */
.AppContainer__backToTop .Icon__icon {
  fill:  #ffffff !important;
  color: #ffffff !important;
}


/* Change the little search-icon button’s background */
.SearchContainer__searchIcon {
  background-color: #F044A0 !important;
  border-color:     #F044A0 !important;
  transition:       background-color .2s ease, border-color .2s ease;
}

/* (Optional) a subtle hover effect */
.SearchContainer__searchIcon:hover,
.SearchContainer__searchIcon:focus {
  background-color: #e03593 !important;  /* slightly darker pink; tweak as desired */
  border-color:     #e03593 !important;
}

/* Keep the magnifier icon white */
.SearchContainer__searchIcon .Icon__icon {
  fill:  #ffffff !important;
  color: #ffffff !important;
}


/* Base “Follow” button – border & text */
.Button__primaryBorder.commonStyle__zt3BrandBorder {
  background-color: transparent !important;
  border: 1px solid #4ABEA0 !important;
  color: #4ABEA0 !important;
  transition: background-color .2s ease, color .2s ease;
}

/* Hover & focus – filled teal with white text */
.Button__primaryBorder.commonStyle__zt3BrandBorder:hover,
.Button__primaryBorder.commonStyle__zt3BrandBorder:focus {
  background-color: #4ABEA0 !important;
  border-color:     #4ABEA0 !important;
  color:            #ffffff !important;
}

/* 1) Keep the wrapper white/transparent */
.SearchContainer__searchBoxIcon {
  background: transparent !important;
  border-color: transparent !important;
}

/* 2) Override the “brand” colour on the SVG itself */
.SearchContainer__searchBoxIcon svg.Icon__brand {
  /* this sets currentColor for the whole SVG */
  color: #F044A0 !important;
  /* and in case any paths aren’t using currentColor */
  fill:  #F044A0 !important;
}

/* 3) Force any <path> inside that icon to pink too */
.SearchContainer__searchBoxIcon svg.Icon__brand path {
  fill: #F044A0 !important;
}


/* 1) Target the “Attach a file” text */
span.FileUpload__userLink.commonStyle__zt3Brand {
  color: #4ABEA0 !important;
}


/* 1) Make absolutely sure the wrapper span isn’t forcing orange */
span.FileUpload__attachPin {
  color: #4ABEA0 !important;
}

/* 2) Force every SVG and path under it to teal */
span.FileUpload__attachPin svg,
span.FileUpload__attachPin svg path {
  fill:   #4ABEA0 !important;
  stroke: #4ABEA0 !important;
}

span.FileUpload__attachPin {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: #4ABEA0 !important;
}


/* Recolour the “Reset” link on the Sign In page */
a.Signin__userLink.commonStyle__zt3Brand {
  color: #2A76B9 !important;
}

/* (Optional) Match hover/focus too */
a.Signin__userLink.commonStyle__zt3Brand:hover,
a.Signin__userLink.commonStyle__zt3Brand:focus {
  color: #F044A0 !important; /* slightly darker pink if you like */
}


/* Change label text to "Department" */
label[for="layoutId"]::after {
  content: "Department";
  color: #2d2d2d;
  font-size: 14px;
  font-weight: 400;
  display: inline-block;
  margin-left: 0;
}

/* Override the "Layout" label visually to match "Subject" exactly */
label[for="layoutId"]::after {
  content: "Department";
  font-family: Verdana, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: rgb(0, 0, 0) !important;
  line-height: 40px !important;
  display: inline-block;
  margin: 0;
  padding: 0;
}

/* Hide original label and asterisk */
label[for="layoutId"] {
  font-size: 0 !important;
  color: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}



/* Restyle tag (pill) with blue border + blue text on white background */
div[class*="Pill__pill"] {
  background-color: transparent !important;
  border: 1px solid #0076ba !important;
  color: #0076ba !important;
  border-radius: 4px !important;
  padding: 2px 8px !important;
  font-weight: 500;
  font-family: Verdana, sans-serif;
}

/* Style the delete (trash) icon */
div[class*="Pill__pill"] .Pill__delete {
  color: #0076ba !important;
  opacity: 0.8;
}

div[class*="Pill__pill"] .Pill__delete:hover {
  opacity: 1;
}

/* Make the tag (pill) text blue */
div[class*="Pill__pill"] a {
  color: #0076ba !important;
  font-weight: 500;
  font-family: Verdana, sans-serif;
  text-decoration: none;
}



/* Change dropdown hover highlight text colour to Optique Pink */
.MultiSelect__suggestionFocus {
  color: #ff43a1 !important;
}

/* Optional: change background highlight colour too */
.MultiSelect__suggestionFocus {
  background-color: rgba(255, 67, 161, 0.08) !important;
}