/*
  FONT-FACES
*/

@font-face {
  font-family: 'Open Sans';
  font-display: swap;
  src: url('../fonts/OpenSans-Regular.ttf')
    format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-display: swap;
  font-weight: 600;
  src: url('../fonts/OpenSans-SemiBold.ttf')
    format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-display: swap;
  font-weight: 700;
  src: url('../fonts/OpenSans-Bold.ttf')
    format('truetype');
}

/*
  GLOBAL RULES
*/

html, body, noscript {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

html {
  height: 100%;
  font-size: 100%;
  font-size: 14px;
}


body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

body * {
  font-family: 'Open Sans', sans-serif;
}

button {
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  outline: inherit;
}

/*
  STATIC LAYOUT
*/

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-grow: 1;
  box-sizing: border-box;
  min-width: 100vw;
  background-image: url('../images/backgrounds/organicShapeLeft.svg'),
    url('../images/backgrounds/organicShapeRight.svg');
  background-size: auto 100%;
  background-position: left center, right center;
  background-repeat: no-repeat, no-repeat;
}

.container.invisible {
  display: none;
}

.logo {
  display: block;
  width: 250px;
}

.header,
.main,
.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-sizing: border-box;
  padding: 2rem;
}

.header {
  gap: 16px;
}

.headline {
  text-align: center;
  font-weight: 700;
  font-size: 18px;
}

.main {
  width: 100%;
  font-size: 1rem;
  min-height: 280px;
  gap: 16px
}

.main p {
  margin: 0 0 1em;
}

.main p:last-child {
  margin-bottom: 0;
}

.content {
  max-width: 768px;
}

.title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
}

.link {
  color: #006fcf;
  text-decoration: none;
}

.link:focus {
  text-decoration: underline;
  outline: 2 solid #006fcf;
  outline-offset: 4;
  border-radius: 1px;
}

.link:hover {
  text-decoration: underline;
}

.amexLogo {
  display: block;
  height: 40px;
}

.amexMessage {
  width: 100%;
  max-width: 768px;
  margin: 3rem auto 0;
}

.amexMessage:after {
  white-space: normal;
  content: "GBT Travel Services UK Limited (GBT UK) and its authorized sublicensees (including Ovation Travel Group and Egencia) use certain trademarks and service marks of American Express Company or its subsidiaries (American Express) in the “American Express Global Business Travel” and “American Express GBT Meetings & Events” brands and in connection with its business for permitted uses only under a limited license from American Express (Licensed Marks). The Licensed Marks are trademarks or service marks of, and the property of, American Express. GBT UK is a subsidiary of Global Business Travel Group, Inc. (NYSE: GBTG). American Express holds a minority interest in GBTG, which operates as a separate company from American Express.";
}

@media screen and (max-width: 1280px) {
  .container {
    background: none;
  }
}

/*
  BROWSER RECOMMENDATIONS BLOCK
*/

.browserRecomendations {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  max-width: 500px;
}

.browserLinkContainer {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  align-items: center;
}

.browserLogo {
  width: 25px;
  height: 25px;
}

.browserLink {
  margin-left: 0.5rem;
}

/*
  LOADER
*/

@-webkit-keyframes load {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.loader {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #01155e;
  min-width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loading-logo {
  width: 250px;
  margin-bottom: 16px;
}

.spinner {
  width: 32px;
  height: 32px;
  border: 6px solid transparent;
  border-left: 6px solid #ffffff;
  border-radius: 50%;
  animation: spin 1s infinite linear;
}

@media (hover: hover) and (pointer: fine) {
  *::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }

  *::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 5px;
  }

  *:hover::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
  }
}