@font-face { /*extralight*/
  font-family: "Source Sans Pro";
  font-weight: 200;
  font-style: normal;
  src: url("../font/SourceSansPro-ExtraLight.otf") format("opentype");
}

@font-face { /*extralight italic*/
  font-family: "Source Sans Pro";
  font-weight: 200;
  font-style: italic;
  src: url("../font/SourceSansPro-ExtraLightIt.otf") format("opentype");
}

@font-face { /*light*/
  font-family: "Source Sans Pro";
  font-weight: 300;
  font-style: normal;
  src: url("../font/SourceSansPro-Light.otf") format("opentype");
}

@font-face { /*light italic*/
  font-family: "Source Sans Pro";
  font-weight: 300;
  font-style: italic;
  src: url("../font/SourceSansPro-LightIt.otf") format("opentype");
}

@font-face { /*regular*/
  font-family: "Source Sans Pro";
  font-weight: 400;
  font-style: normal;
  src: url("../font/SourceSansPro-Regular.otf") format("opentype");
}

@font-face { /*italic*/
  font-family: "Source Sans Pro";
  font-weight: 400;
  font-style: italic;
  src: url("../font/SourceSansPro-It.otf") format("opentype");
}

@font-face { /*semibold*/
  font-family: "Source Sans Pro";
  font-weight: 600;
  font-style: normal;
  src: url("../font/SourceSansPro-Semibold.otf") format("opentype");
}

@font-face { /*semibold italic*/
  font-family: "Source Sans Pro";
  font-weight: 600;
  font-style: italic;
  src: url("../font/SourceSansPro-SemiboldIt.otf") format("opentype");
}

@font-face { /*bold*/
  font-family: "Source Sans Pro";
  font-weight: 700;
  font-style: normal;
  src: url("../font/SourceSansPro-Bold.otf") format("opentype");
}

@font-face { /*bold italic*/
  font-family: "Source Sans Pro";
  font-weight: 700;
  font-style: italic;
  src: url("../font/SourceSansPro-BoldIt.otf") format("opentype");
}

@font-face { /*black*/
  font-family: "Source Sans Pro";
  font-weight: 900;
  font-style: normal;
  src: url("../font/SourceSansPro-Black.otf") format("opentype");
}

@font-face { /*black italic*/
  font-family: "Source Sans Pro";
  font-weight: 900;
  font-style: italic;
  src: url("../font/SourceSansPro-BlackIt.otf") format("opentype");
}

@property --ac-gradient-c1 {
  initial-value: black;
  inherits: true;
  syntax: '<color>';
}
@property --ac-gradient-c2 {
  initial-value: black;
  inherits: true;
  syntax: '<color>';
}
@property --ac-gradient-c3 {
  initial-value: black;
  inherits: true;
  syntax: '<color>';
}

body {
  font-family: "Source Sans Pro", Arial, sans-serif;
  color: #5B6770;
}

:root {
  --ac-gradient-c1: color-mix(in srgb, var(--primary-color), #3EACCC);
  --ac-gradient-c2: var(--primary-color);
  --ac-gradient-c3: color-mix(in srgb, var(--primary-color), #004C62);
}

a:not(.btn):not(.btn-floating) {
  color: #006F8F;
  outline-color: #0092BC;
  text-decoration: none;
}

a:not(.btn):not(.btn-floating):hover {
  color: #005D78;
  text-decoration: underline;
}

a:not(.btn):not(.btn-floating):active {
  color: #2F363A;
}

/* Title / form */

#title {
  background: linear-gradient(93.95deg, var(--ac-gradient-c1) 4%, var(--ac-gradient-c2) 48%, var(--ac-gradient-c3) 96%);
}

@media (min-width: 650px) {
  #title {
    background: linear-gradient(93.95deg, var(--ac-gradient-c1) 4%, var(--ac-gradient-c2) 48%, var(--ac-gradient-c3) 96%);
    border-top-left-radius: 1.6em;
    border-top-right-radius: 1.6em;
  }
  
  #content {
    border-radius: 1.6em;
  }
}

/* Login footer */

.acFooter {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  column-gap: 1em;
  margin-top: 2em;
  overflow: hidden;
}

.acFooter > div {
  white-space: nowrap;
  font-size: .75em;
  position: relative;
}

.acFooter > div + div::before {
  content: "|";
  position: absolute;
  left: -.8em;
}

/* Background */

#background {
  opacity: 1;
}

#background img[src="img/customerloginbackgrounds/default.jpg"] {
  content: url("/img/customerloginbackgrounds/abstract-metal-chrome.jpg");
}

#background img:nth-of-type(2) {
  filter: blur(.5em);
}

/* Buttons */

#btnSubmit,
.btn {
  background: linear-gradient(93.95deg, var(--ac-gradient-c1) 4%, var(--ac-gradient-c2) 48%, var(--ac-gradient-c3) 96%);
  
  text-transform: unset;
  box-shadow: unset;
  position: relative;
  border-radius: 3em;
  font-family: "Source Sans Pro", Arial, sans-serif;
  font-weight: bold;
  transition-duration: 500ms;
  transition-property: all, --ac-gradient-c1, --ac-gradient-c2, --ac-gradient-c3;
  outline: .08em solid transparent;
  outline-offset: .15em;
}

#btnSubmit:hover,
.btn:hover {
  box-shadow: unset;
  filter: unset;
  --ac-gradient-c1: var(--ac-gradient-c3);
  --ac-gradient-c2: var(--ac-gradient-c3);
}

#btnSubmit:active,
.btn:active {
  --ac-gradient-c1: color-mix(in srgb, var(--primary-color), #002834); /*if primary is #0092BC, should result in #005D78*/
  --ac-gradient-c2: var(--ac-gradient-c1);
  --ac-gradient-c3: var(--ac-gradient-c1);
}

#btnSubmit:active,
.btn:focus {
  outline-color: var(--ac-gradient-c1);
}

/* Checkbox */

.checkbox input ~ .checkmark,
.radiobtn input ~ .checkmark {
  outline: .08em solid transparent;
  outline-offset: .15em;
}

.checkbox input:checked ~ .checkmark,
.radiobtn input:checked ~ .checkmark {
  background-color: #5B6770;
}

.checkbox input:focus ~ .checkmark,
.radiobtn input:focus ~ .checkmark {
  outline-color: #5B6770;
}

/* Inputs */

#inner input[type="text"],
#inner input[type="password"],
#inner input[type="email"] {
  border-radius: .5em;
}

/* AC Logo */

@media (min-width: 850px) {
  #mainContainer::before {
    content: url('/img/atlas-copco_color-white_style-elevated.svg');
    position: absolute;
    left: 2em;
    top: 2em;
    width: 8em;
    z-index: 1;
  }
}