.brandingHeader {
  font-size: 16px;
  /*font-weight: bold;*/
}
.brandingLayoutDialog .ngdialog-close {
  color: #227093;
}
.ngdialog.ngdialog-theme-default.advanced-branding-dialog.draggable > .ngdialog-content.ui-draggable {
  min-width: 400px;
  min-height: 420px;
  /*overflow-y:hidden;*/
  overflow-x: hidden;
}
.themeWarning {
  color: red;
  font-size: 16px;
  /*  margin-right:20px;*/
}
.ngdialog-content ui-draggable ui-draggable-handle ng-isolate-scope .ngdialog-close:after {
  height: 57px;
  width: 45px;
  font-size: 1.5em;
  font-weight: 400;
  line-height: 26px;
  position: unset;
  text-align: center;
  font-family: 'FontAwesome';
  content: '\F00D';
  background: #ff00008c;
  color: white;
  margin-top: -10px;
  padding: 20px 10px;
}
.loginWidget .captchaControls,
.loginBox .captchaControls,
.ForgotUsernamePass .captchaControls {
  display: inline-flex;
  width: 50px;
  flex-direction: column;
  margin-left: 10px;
  margin-bottom: 2px;
}
.brandingLayoutDialog .ngdialog-close {
  color: #227093;
}
.alignmentButtons h1 {
  color: black;
}
.tabcontent h2 {
  color: black;
}
.alignmentButtons h1 {
  color: black;
}
.tabcontent h2 {
  color: black;
}
.card {
  display: inline-block;
  position: relative;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  margin: 10px;
  width: 30%;
  border-radius: 10px;
  transition: height 0.6s, box-shadow 0.3s;
}
.cardLarge {
  display: none;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  margin: 10px;
  width: 30%;
  border-radius: 10px;
}
.cardImage {
  width: 100%;
  height: 100%;
}
/* button-2 */
.button-select .button .button2 {
  background-color: #efefef;
  border-radius: 17px;
  border-width: 0;
  color: black;
  cursor: pointer;
  display: inline-block;
  font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  list-style: none;
  margin: 0;
  padding: 10px 12px;
  text-align: center;
  transition: all 200ms;
  vertical-align: baseline;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
/*button-30*/
.button-select .button .button30 {
  align-items: center;
  background-color: white;
  border-radius: 4px;
  border-width: 0;
  box-sizing: border-box;
  color: black;
  cursor: pointer;
  display: inline-flex;
  box-shadow: #D6D6E7 0 3px 7px inset;
  font-family: "JetBrains Mono", monospace;
  height: 48px;
  justify-content: center;
  line-height: 1;
  list-style: none;
  overflow: hidden;
  padding-left: 16px;
  padding-right: 16px;
  position: relative;
  text-align: left;
  text-decoration: none;
  transition: box-shadow 0.15s, transform 0.15s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  will-change: box-shadow, transform;
  font-size: 18px;
}
.button-select .button .button30:focus {
  box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}
.button-select .button .button30:hover {
  transform: translateY(-2px);
  box-shadow: #D6D6E7 0 3px 7px inset;
}
.button-select .button .button30:active {
  box-shadow: #D6D6E7 0 3px 7px inset;
  transform: translateY(2px);
}
/*button-17*/
.button-select .button .button17 {
  align-items: center;
  background-color: white;
  border-radius: 24px;
  border: 2px solid #4285f4;
  box-shadow: rgba(0, 0, 0, 0.2) 0 3px 5px -1px, rgba(0, 0, 0, 0.14) 0 6px 10px 0, rgba(0, 0, 0, 0.12) 0 1px 18px 0;
  box-sizing: border-box;
  color: Black;
  cursor: pointer;
  display: inline-flex;
  fill: currentcolor;
  font-family: "Google Sans", Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  height: 48px;
  justify-content: center;
  letter-spacing: 0.25px;
  line-height: normal;
  max-width: 100%;
  overflow: visible;
  padding: 2px 24px;
  position: relative;
  text-align: center;
  text-transform: none;
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 15ms linear 30ms, transform 270ms cubic-bezier(0, 0, 0.2, 1) 0ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: auto;
  will-change: transform,opacity;
  z-index: 0;
}
.button-select .button .button17:hover {
  background-color: gray;
  color: Black;
}
.button-select .button .button17:active {
  box-shadow: 0 4px 4px 0 rgb(60 64 2.23333333%), 0 8px 12px 6px rgb(60 64 4.46666667%);
}
.button-select .button .button17:focus {
  outline: none;
}
.button-select .button .button17:not(:disabled) {
  box-shadow: rgba(60, 64, 67, 0.3) 0 1px 3px 0, rgba(60, 64, 67, 0.15) 0 4px 8px 3px;
}
.button-select .button .button17:not(:disabled):hover {
  box-shadow: rgba(60, 64, 67, 0.3) 0 2px 3px 0, rgba(60, 64, 67, 0.15) 0 6px 10px 4px;
}
.button-select .button .button17:not(:disabled):focus {
  box-shadow: rgba(60, 64, 67, 0.3) 0 1px 3px 0, rgba(60, 64, 67, 0.15) 0 4px 8px 3px;
}
.button-select .button .button17:not(:disabled):active {
  box-shadow: rgba(60, 64, 67, 0.3) 0 4px 4px 0, rgba(60, 64, 67, 0.15) 0 8px 12px 6px;
}
.button-select .button .button17:disabled {
  box-shadow: rgba(60, 64, 67, 0.3) 0 1px 3px 0, rgba(60, 64, 67, 0.15) 0 4px 8px 3px;
}
/* button-8 */
.button-select .button .button8 {
  background-color: #e1ecf4;
  border-radius: 3px;
  border: 1px solid #7aa7c7;
  border: 2px solid black;
  box-sizing: border-box;
  color: #39739d;
  cursor: pointer;
  display: inline-block;
  font-family: -apple-system, system-ui, "Segoe UI", "Liberation Sans", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.15385;
  margin: 0;
  outline: none;
  padding: 8px 0.8em;
  position: relative;
  text-align: center;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: baseline;
  white-space: nowrap;
}
.button-select .button .button8:hover {
  background-color: #efefef;
  color: black;
}
.button-select .button .button8:focus {
  box-shadow: 0 0 0 4px rgba(0, 149, 255, 0.15);
  background-color: #b3d3ea;
  color: #2c5777;
}
.button-select .button .button8:active {
  background-color: #a0c7e4;
  box-shadow: none;
  color: #2c5777;
}
/* button-6*/
.button-select .button .button6 {
  align-items: center;
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.25rem;
  box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
  box-sizing: border-box;
  color: black;
  cursor: pointer;
  display: inline-flex;
  font-family: system-ui, -apple-system, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  justify-content: center;
  line-height: 1.25;
  margin: 0;
  min-height: 3rem;
  padding: calc(0.875rem - 1px) calc(1.5rem - 1px);
  position: relative;
  text-decoration: none;
  transition: all 250ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: baseline;
  width: auto;
}
.button-select .button .button6:hover,
.button-select .button .button6:focus {
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
  color: rgba(0, 0, 0, 0.65);
}
.button-select .button .button6:hover {
  transform: translateY(-1px);
  background-color: #e1ecf4;
}
.button-select .button .button6:active {
  background-color: #efefef;
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px;
  color: rgba(0, 0, 0, 0.65);
  transform: translateY(0);
}
/* button-4*/
.button-select .button .button4 {
  background-color: white;
  border: 1px solid rgba(27, 31, 35, 0.15);
  border-radius: 6px;
  box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
  box-sizing: border-box;
  color: black;
  cursor: pointer;
  display: inline-block;
  font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  list-style: none;
  padding: 6px 16px;
  position: relative;
  transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
  white-space: nowrap;
  word-wrap: break-word;
}
.button-select .button .button4:hover {
  background-color: #efefef;
  text-decoration: none;
  transition-duration: 0.1s;
}
.button-select .button .button4:disabled {
  background-color: #d4fff8;
  border-color: rgba(27, 31, 35, 0.15);
  color: white;
  cursor: default;
}
.button-select .button .button4:active {
  background-color: #026e5d;
  box-shadow: rgba(225, 228, 232, 0.2) 0 1px 0 inset;
  transition: none 0s;
}
.button-select .button .button4:focus {
  outline: 1px transparent;
}
.button-select .button .button4:before {
  display: none;
}
/*.button-select .button .button4:-webkit-details-marker {
    display: none;
}*/
.brandingtitle {
  background-color: white;
  margin-left: -20px;
  margin-right: -30px;
  border-style: outset;
}
.brandingtitle h2 {
  font-size: 30px;
  color: #227093;
  padding-left: 20px;
  padding-right: 10px;
}
.brandingtitle p {
  color: black;
  font-size: 12px;
  padding-left: 20px;
  padding-right: 10px;
}
/*tabs css*/
.brandingdialoguebox {
  margin-top: -20px;
}
.link-branding {
  margin-left: -20px;
  width: 200%;
}
/* Style tab links */
.tablink {
  background-color: #555;
  color: white;
  float: left;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  width: 26.3%;
}
.tablink:hover {
  background-color: #777;
}
.active {
  background-color: #aeb4bb;
  /*change in html ->link-branding tablink, onclick->clr*/
}
/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
  color: black;
  display: none;
  padding: 52px 0px;
  height: 100%;
}
/* branding header logo styling*/
.brandingheaderlogo {
  display: grid;
  /* Use flexbox for horizontal alignment */
  justify-content: space-around;
  /* Distribute items evenly with space between them */
}
.box-1 {
  flex: 1;
  /* Each box takes equal width */
  /*border: 1px solid #ccc;*/
  text-align: center;
  /* Center-align the text */
  padding: 10px;
  /* Add padding for spacing */
}
.btheaderlogo {
  line-height: 50px;
  height: 50px;
  text-align: center;
  width: 100%;
  cursor: pointer;
}
.btheaderlogo {
  color: black;
  transition: all 0.3s;
  position: relative;
  height: 30px;
  width: 100%;
  justify-content: center;
  padding-top: 3px;
  align-content: center;
  display: grid;
  font-family: 'Open Sans Condensed', sans-serif;
}
.btheaderlogo span {
  transition: all 0.3s;
}
.btheaderlogo::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  transition: all 0.3s;
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-top-style: solid;
  border-bottom-style: solid;
  border-top-color: rgba(0, 0, 0, 0.5);
  border-bottom-color: rgba(0, 0, 0, 0.5);
  transform: scale(0.1, 1);
}
.btheaderlogo:hover span {
  letter-spacing: 2px;
}
.btheaderlogo:hover::before {
  opacity: 1;
  transform: scale(1, 1);
}
.btheaderlogo::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: all 0.3s;
  background-color: rgba(0, 0, 0, 0.1);
}
.btheaderlogohover::after {
  opacity: 0;
  transform: scale(0.1, 1);
}
/*toggle for brandint themes header options- logo, links and combined header*/
.d {
  position: relative;
  cursor: pointer;
  /* Visual cue that this is clickable */
  background-color: #f0f0f0;
}
.toggle {
  width: 100%;
  position: absolute;
  top: calc(100% + 10px);
  /* Position it below the corresponding span */
  left: 0;
  padding: 20px;
  /* Increase padding for height */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  display: none;
  /* Hidden by default */
  transition: all 0.3s ease;
  /* Smooth transition */
  z-index: 9999;
  /* Ensure the toggle is displayed above other elements */
}
.toggle2 {
  width: 100%;
  position: absolute;
  top: calc(100% + 10px);
  /* Position it below the corresponding span */
  left: 0;
  padding: 20px;
  /* Increase padding for height */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  display: none;
  /* Hidden by default */
  transition: all 0.3s ease;
  /* Smooth transition */
  z-index: 9999;
  /* Ensure the toggle is displayed above other elements */
}
#toggle-logo {
  background-color: #ccc;
}
#toggle-cheader {
  background-color: #ccc;
}
.expanded {
  bottom: 0;
  /* Position it under the logo */
  display: block;
  /* Show the toggle */
}
/*hamburger option inside toggle*/
.hamburger__toggle {
  display: block;
  position: relative;
  background-color: transparent !important;
  border: transparent !important;
  width: 30px;
  height: 30px;
  margin: 50px auto;
  border-radius: 50%;
  border: none;
  margin-top: -10px;
  margin-left: 96%;
}
/* give the span element and related pseudo-elements the appearance of white lines */
.hamburger__icon,
.hamburger__icon::before,
.hamburger__icon::after {
  position: absolute;
  width: 30px;
  height: 2px;
  border-radius: 4px;
  background-color: white;
}
/* center the span element in the middle of its containing button */
.hamburger__icon {
  top: calc(50% - 2px);
  left: calc(50% - 15px);
}
.ExpiredJobTitle,
.DupApplyJobTitleandExpire {
  font-weight: bold;
  display: block;
}
/* HOVER STYLES ON THE BUTTON */
/* rotate middle dash of hamburger */
.hamburger__toggle:hover .hamburger__icon {
  height: 5px;
  width: 30px;
  left: 5px;
  top: calc(50% - 2px);
  transform: rotate(-45deg);
  background-color: red;
}
/* rotate bottom dash of hamburger counter clockwise */
.hamburger__toggle:hover .hamburger__icon::after {
  width: 30px;
  height: 5px;
  top: -1px;
  transform: rotate(-270deg);
  background-color: red;
}
/* hide the top dash by scaling it to 0 */
.hamburger__toggle:hover .hamburger__icon::before {
  transform: scale(0);
}
/* TRANSITION */
/* adjust duration to see it happen slower */
.hamburger__icon,
.hamburger__icon::after {
  transition: all 0.3s linear;
}
/*logo alignment-branding settings*/
img.navlinkimg {
  width: 100%;
  padding: 1px;
  border: 0px solid grey;
  height: 35px;
}
.imgalign span {
  margin-bottom: 20px;
  padding: 10px;
}
.imgalign img {
  cursor: grab;
}
.imgalign img:hover {
  transform: scale(1.05);
  transition: 0.35s ease;
  cursor: grabbing;
}
/*nav link alignment-branding settings*/
.linkalign {
  display: flex;
  flex-direction: column;
}
.linkalign span {
  text-align: left;
  font-size: 15px;
  padding: 10px;
}
.linkalign img {
  width: 100%;
  height: 35px;
  padding: 1px;
  cursor: grab;
}
.linkalign img:hover {
  transform: scale(1.05);
  transition: 0.35s ease;
  cursor: grabbing;
}
.tab__content p.nav_disable {
  display: none;
}
/*combined header alignment-branding settings*/
.Logoalign {
  display: flex;
  flex-direction: column;
}
.Logoalign span {
  text-align: left;
  font-size: 15px;
  padding: 10px;
}
.Logoalign img {
  width: 100%;
  height: 35px;
  cursor: grab;
}
.Logoalign img:hover {
  transform: scale(1.05);
  transition: 0.35s ease;
  cursor: grabbing;
}
/*banner settings- branding settings*/
.banner-card {
  display: inline-block;
  /* Display the cards in one line */
  vertical-align: top;
  /* Align the cards to the top of the line */
  margin-right: 10px;
  /* Adjust as needed for spacing between cards */
}
.cardbanner {
  /* background-color: #eee; */
  margin-bottom: 5px;
  margin-left: 30px;
  width: 220px;
  margin-right: -5px;
}
.cardbanner img {
  width: 100%;
  height: 150px !important;
  margin: 15px 0px;
  cursor: grab;
}
.cardbanner img:hover {
  transform: scale(1.05);
  transition: 0.35s ease;
  cursor: grabbing;
}
.cardbanner p {
  text-align: center;
  color: black;
  /* Ensure text color is black */
  margin: 0;
  /* Remove default margins */
}
.tab__content p.banner_disable {
  display: none;
}
/*two column layout*/
.coloumn-card img:hover {
  transform: scale(1.05);
  transition: 0.35s ease;
  cursor: grabbing;
}
/*social media icons*/
.iconcard {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.iconcard img:hover {
  transform: scale(1.05);
  transition: 0.35s ease;
  cursor: grabbing;
}
/*corner settings- branding settigs*/
.RoundCard img:hover {
  transform: scale(1.05);
  transition: 0.35s ease;
  cursor: grabbing;
}
.RoundInput img:hover {
  transform: scale(1.05);
  transition: 0.35s ease;
  cursor: grabbing;
}
.Round img:hover {
  transform: scale(1.05);
  transition: 0.35s ease;
  cursor: grabbing;
}
.brandingdialoguebox .useme {
  margin-top: 10px;
  border: 1px double black;
  background: white;
  color: black;
  width: 70px;
  font-size: 13px;
  height: 20px;
}
.brandingdialoguebox .useme:hover {
  background: black;
  color: white;
  display: table-cell;
  vertical-align: middle;
}
.tab__content .corners .RoundCard p {
  /* margin: 0; */
  padding: -1rem;
  text-align: center;
}
.tab__content .corners .round p {
  /* margin: 0; */
  padding: -1rem;
  text-align: center;
}
.tab__content .corners .RoundInput p {
  /* margin: 0; */
  padding: -1rem;
  text-align: center;
}
.corners {
  display: flex;
}
.RoundCard.ng-scope {
  margin: 10px;
}
.Round.ng-scope {
  margin: 10px;
}
.RoundInput.ng-scope {
  margin: 10px;
}
.Round button:hover {
  background-color: Black;
  color: white !important;
}
/* Style the dropdown button */
.custom-dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
/* Dropdown container */
.custom-dropdown {
  position: relative;
  display: inline-block;
}
/* Dropdown content (hidden by default) */
.custom-dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}
/* Links inside the dropdown */
.custom-dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Change color of dropdown links on hover */
.custom-dropdown-content a:hover {
  background-color: #ddd;
}
/* Show the dropdown menu on hover */
.custom-dropdown:hover .custom-dropdown-content {
  display: block;
}
/* Style sections */
.custom-dropdown-section {
  padding: 8px 0;
}
/* Style section headings */
.custom-dropdown-section h3 {
  margin: 0;
  padding: 4px 16px;
  font-size: 16px;
  background-color: #ddd;
}
/*layout settings accordion*/
#contact {
  display: grid;
  place-content: center;
  grid-template-columns: repeat(auto-fit, minmax(100%, 30rem));
  min-height: 100vh;
  place-items: start;
  gap: 1rem;
  margin: 0;
  padding: 1rem;
  color: #227093;
  /* Primary color */
  background: #eee;
  /* Background color */
}
/* Core styles/functionality */
.tab input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.accordion .tab {
  border-bottom: 1.5px solid white;
}
input#fontstyleid {
  z-index: 999;
  position: relative;
  opacity: inherit;
}
.tab__content {
  max-height: 0;
  overflow: hidden;
  transition: all 0.35s;
  cursor: default;
}
.tabcontent .accordion .tab input:checked ~ .tab__content {
  max-height: 50rem;
  padding: 10px;
}
/* Visual styles */
.accordion {
  color: #227093;
  /* Primary color */
  border: 2px solid;
  /*border-radius: 0.5rem;*/
  overflow: hidden;
  width: 105%;
  margin-left: -20px;
}
.tab__label,
.tab__close {
  display: flex;
  color: white;
  background: #227093;
  /* Primary color */
  cursor: pointer;
}
.tab__label {
  justify-content: space-between;
  padding: 1rem;
}
.tab__label::after {
  content: "\276F";
  width: 1em;
  height: 1em;
  text-align: center;
  transform: rotate(90deg);
  transition: all 0.35s;
}
.tab input:checked + .tab__label::after {
  transform: rotate(270deg);
}
.tab__content p {
  margin: 0;
  padding: 1rem;
}
.tab__close {
  justify-content: flex-end;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
}
.accordion--radio {
  color: #ff5252;
  /* Secondary color */
}
/* Arrow animation */
.tab input:not(:checked) + .tab__label:hover::after {
  animation: bounce 0.5s infinite;
}
@keyframes bounce {
  25% {
    transform: rotate(90deg) translate(0.25rem);
  }
  75% {
    transform: rotate(90deg) translate(-0.25rem);
  }
}
.tab label {
  margin-top: 0px;
}
.font-select input[type="text"] {
  border: 2px solid black;
  color: black;
}