:root {
  --btn-primary: var(--anchor);
  --btn-primary-hover: var(--anchor-hover);
  --btn-primary-text: #FFF;

  --btn-highlight: #fccf00;
  --btn-highlight-hover: #FFDA55;
  --btn-highlight-text: var(--anchor);
  --btn-highlight-hover-text: #FFF;

  --btn-gradient: linear-gradient(270deg, #2A8ACF 0%, #41A0DD 100%);
  --btn-gradient-text: #FFF;
  --btn-gradient-hover-text: #FFF;

  --btn-gradient-orange: linear-gradient(90deg, #DD7453 0%, #E7AB53 100%);

  --btn-alert: #D44848;
  --btn-alert-hover: #DF5858;

  --btn-applied: var(--success);
  --btn-applied-hover: var(--success-hover);

  --btn-whatsapp: #11c246;
  --btn-whatsapp-hover: #42D46E;

  --btn-disabled: rgba(0, 0, 0, .075);
  --btn-disabled-text: rgba(0, 0, 0, .25);

  --btn-privacy-private: #aaa;
  --btn-privacy-private-hover: #bbb;

  --btn-privacy-restricted:  var(--anchor);
  --btn-privacy-restricted-hover: var(--anchor-hover);

  --btn-privacy-standard: #45C99A;
  --btn-privacy-standard-hover: #5dd7ab;
}


/* Default Button (Blue Background, White Text)
/*------------------------------------------------------------*/
.btn, 
a.btn:link,
a.btn:visited {
  width: auto;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  background-color: var(--btn-primary);
  color: var(--btn-primary-text);
  text-align: center;
  padding: 8px 16px;
  border-radius: 8px;
  border: 0;
  transition: all .3s ease-in-out;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  -webkit-appearance: none;
}

.btn:hover,
a.btn:hover {
  background-color: var(--btn-primary-hover);
}

.btn:focus {
  outline: none;
  box-shadow: none;
}


/* Button Icon */
.btn .icon--right {
  margin-left: 6px;
}

.btn .icon--left {
  margin-right: 6px;
}

.btn .fas {
  transition: transform .3s ease-in-out;
}

.btn:hover .fa-arrow-right {
  transform: translateX(3px);
}

.btn:hover .fa-arrow-left {
  transform: translateX(-3px);
}

.btn:hover .fa-chevron-down,
.btn:hover .fa-arrow-down {
  transform: translateY(3px);
}

.btn:hover .fa-chevron-up,
.btn:hover .fa-arrow-up {
  transform: translateY(-3px);
}



/* Button Size
/*------------------------------------------------------------*/
/* Extra Small */
.btn--xs,
a.btn--xs:link {
  font-size: 12px;
  padding: 4px 8px;
}

.btn--xs .icon--left,
a.btn--xs:link .icon--left {
  margin-right: 4px;
}


/* Small */
.btn--small,
a.btn--small:link {
  font-size: 13px;
  padding: 6px 12px;
}


/* Large */
.btn--large,
a.btn--large:link {
  /* font-size: 16px; */
  font-weight: 600;
  min-height: 42px;
  padding: 8px 24px;
}



/* Button Style
/*------------------------------------------------------------*/
/* Round */
.btn--round,
a.btn--round:link {
  border-radius: 48px;
}


/* Outline */
.btn--outline,
a.btn--outline:link,
a.btn--outline:visited {
  padding: 7px 15px;
  background-color: transparent;
  border: 1px solid var(--anchor);
  color: var(--anchor);
}

/* Extra Small */
.btn--xs.btn--outline,
a.btn--xs.btn--outline:link {
  padding: 3px 7px;
}

/* Small */
.btn--small.btn--outline,
a.btn--small.btn--outline:link {
  padding: 5px 11px;
}

/* Large */
.btn--large.btn--outline,
a.btn--large.btn--outline:link {
  padding: 7px 23px;
}

.btn--outline:hover,
a.btn--outline:hover {
  background-color: #FFF;
  border: 1px solid var(--anchor-hover);
  color: var(--anchor-hover);
}


/* Highlight Button */
.btn--highlight,
a.btn--highlight:link,
a.btn--highlight:visited {
  font-weight: bold;
  background: var(--btn-highlight);
  color: var(--btn-highlight-text);
}

.btn--highlight:hover,
a.btn--highlight:hover {
  background: var(--btn-highlight-hover);
}


/* Gradient Button */
.btn--gradient,
a.btn--gradient:link,
a.btn--gradient:visited {
  font-weight: bold;
  background: var(--btn-gradient);
  color: var(--btn-gradient-text);
}

a.btn--gradient:hover {
  background: var(--btn-gradient);
  color: var(--btn-gradient-hover-text);
  text-shadow: 0 2px 2px rgba(0, 0, 0, .2);
}


/* Grey Filled */
.btn--grey,
a.btn--grey:link,
a.btn--grey:visited {
  color: #333;
  background-color: rgba(51, 51, 51, .05);
}

.btn--grey:hover,
a.btn--grey:hover {
  background-color: rgba(51, 51, 51, .02);
}


/* Grey Outline */
.btn--outline.btn--grey,
a.btn--outline.btn--grey:link,
a.btn--outline.btn--grey:visited {
  background-color: transparent;
  color: #444 !important;
  border-color: #444;
}

.btn--outline.btn--grey:hover,
a.btn--outline.btn--grey:hover {
  background-color: rgba(0, 0, 0, .05);
}


/* White Filled */
.btn--white,
a.btn--white:link,
a.btn--white:visited {
  background-color: rgba(255, 255, 255, .15);
  color: #FFF !important;
}

.btn--white:hover,
a.btn--white:hover {
  background-color: rgba(255, 255, 255, .3);
}


/* White Outline */
.btn--outline.btn--white,
a.btn--outline.btn--white:link,
a.btn--outline.btn--white:visited {
  background-color: transparent;
  color: #FFF !important;
  border-color: #FFF;
}

.btn--outline.btn--white:hover,
a.btn--outline.btn--white:hover {
  background-color: rgba(255, 255, 255, .15);
}




/* Alert Button
/*------------------------------------------------------------*/
.btn--alert,
a.btn--alert:link,
a.btn--alert:visited {
  background: var(--btn-alert);
}

.btn--alert:hover,
a.btn--alert:hover {
  background: var( --btn-alert-hover);
}



/* Button with Text Only e.g. Cancel button in modal dialog
/*------------------------------------------------------------*/
.btn--text,
a.btn--text:link,
a.btn--text:visited {
  color: #666;
  border: 0;
  background: transparent !important;
}

.btn--text:hover,
a.btn--text:hover {
  color: #888;
}



/* Loading Button
/*------------------------------------------------------------*/
.btn__icon--loading {
  display: none;
}

.btn--load.spinning,
.btn--load.spinning:hover {
  border: none;
  cursor: default;
}

.btn--load.spinning .btn__icon--loading {
  display: block;
}

.btn--load.spinning .btn__text {
  display: none;
}



/* Disabled Button
/*------------------------------------------------------------*/
.btn:disabled,
.btn:disabled:hover,
a.btn.disabled:link,
a.btn.disabled:visited,
a.btn.disabled:hover,
a.btn.disabled:focus {
  background: var(--btn-disabled);
  border-color: var(--btn-disabled);
  color: var(--btn-disabled-text);
  text-shadow: none;
  cursor: default;
  pointer-events: none;
}



/* Applied Button
/*------------------------------------------------------------*/
.btn--applied,
a.btn--applied:link,
a.btn--applied:visited {
  background: var(--btn-applied);
  pointer-events: none;
}

.btn--applied:hover,
a.btn--applied:hover {
  cursor: default;
}



/* Whatsapp Button
/*------------------------------------------------------------*/
.btn--whatsapp,
a.btn--whatsapp:link,
a.btn--whatsapp:visited {
  background: var(--btn-whatsapp);
  color: #FFF;
}

.btn--whatsapp:hover,
a.btn--whatsapp:hover {
  background: var(--btn-whatsapp-hover);
}



/* Icon Button
/*------------------------------------------------------------*/
.iconBtn {
  width: 36px;
  height: 36px;
  font-size: 1.8rem;

  background-color: transparent;
  border: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  cursor: pointer;
}

.iconBtn:link, 
.iconBtn:visited {
  color: var(--anchor);
}

.iconBtn:focus {
  border: none;
  outline: none;
}

.iconBtn:hover {
  color: var(--anchor-hover);
}

.iconBtn--round {
  font-size: 1.1rem;
  border: 1px solid var(--anchor);
  border-radius: 100%;
}

.iconBtn .icon--on {
  display: none;
}



/* Floating Action Button (FAB) - Circle e.g. Search articles in mobile
/*------------------------------------------------------------*/
.floating-act-btn {
	width: 42px;
	height: 42px;
	font-size: 18px;
	border-radius: 50%;

	background: var(--gradient-blue);
	color: #FFF;
	box-shadow: 0 4px 20px 0px rgba(0,0,0,0.15);

	display: flex;
	align-items: center;
	justify-content: center;

	position: fixed;
	bottom: 12px;
	right: 12px;

	cursor: pointer;

	z-index: 100;
}

.floating-act-btn svg {
	width: 50%;
	height: 50%;
}



/* Floating Action Button (Extended) - With Text e.g. Looking for jobs?
/*------------------------------------------------------------*/
.floating-act-btn--extended:link,
.floating-act-btn--extended:visited {
  width: fit-content;

  font-size: 14px;
	background: linear-gradient(270deg,#79d3c3,#41a0dd);
	color: #FFF;
	padding: 10px 20px;
	border-radius: 42px;

	position: fixed;
	bottom: -48px;
  left: 50%;

  transform: translateX(-50%);
	transition: bottom .5s ease-in-out;
  
	box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.3);
}

.floating-act-btn--extended.on {
  bottom: 15px;
}

.floating-act-btn--extended img {
	margin-right: 6px;
}

.floating-act-btn--extended span {
  white-space: pre;
}


/* Floating Button - Incomplete Applications */
.floating-act-btn.cta--incomplete-application {
  background: var(--btn-gradient-orange);
}



/* Privacy Button e.g. Landing Page - Profile Overview
/*------------------------------------------------------------*/
.privacy-btn.private {
  background-color: var(--btn-privacy-private);
}

.privacy-btn.private:hover {
  background-color: var(--btn-privacy-private-hover);
}

.privacy-btn.restricted {
  background-color: var(--btn-privacy-restricted);
}

.privacy-btn.restricted:hover {
  background-color: var(--btn-privacy-restricted-hover);
}

.privacy-btn.standard {
  background-color: var(--btn-privacy-standard);
}

.privacy-btn.standard:hover {
  background-color: var(--btn-privacy-standard-hover);
}



@media (min-width: 1200px) {
  .btn, a.btn:link {
    font-size: 15px;
  }
  
  .btn--small, a.btn--small:link {
    font-size: 13px;
  }

  .btn--xs, a.btn--xs:link {
    font-size: 12px;
  }
}