body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

body, html {
  height: 100%;
  font-family: 'Roboto Condensed', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#root {
  height: 100%;
}

.body-wrapper {
  height: 100%;
}

.bg {
  position: relative;
  background-image: url(4a5984d038ea47255e442d7c7d38aab3.jpg);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.main-content {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 30%;
  transform: translate(-50%, -50%);
  width: 297px;
}

.logo-area {
  position: relative;
  width: 300px;
  /* width: 210px; */
  /* margin: 0 auto 30px auto; */
  margin-bottom: 26px;
}

.login-form {
  position: relative;
}

.tidal-logo {
  position: relative;
  display: inline-block;
  width: 300px;
}

.adobe-logo {
  position: relative;
  display: inline-block;
}

.center-pipe {
  position: relative;
  display: inline-block;
  background-color: #fff;
  width: 2px;
  height: 50px;
  opacity: .5;
  margin-left: 20px;
  margin-right: 32px;
}

.username-content {
  position: relative;
  margin-bottom: 10px;
}

.password-content {
  position: relative;
}

.username-label {
  position: relative;
  color: #fff;
  font-size: 16px;
  text-align: right;
  margin-right: 12px;
  margin-left: 32px;
}

.password-label {
  position: relative;
  color: #fff;
  font-size: 16px;
  text-align: right;
  margin-right: 12px;
  right: 2px;
}

.username,
.password {
  width: 220px;
  position: absolute;
  right: 0;
  height: 20px;
  font-size: 16px;
  top: -1px;
}

.username::placeholder {
  font-size: 10px;
  color: #d8d8d8;
}

.password::placeholder {
  font-size: 10px;
  color: #d8d8d8;
}

.button-content {
  position: relative;
  right: 0;
  bottom: 0;

}

.settings-button,
.login-button {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.settings-button {
  width: 60px;
  height: 18px;
  line-height: 18px;
  border: none;
  background-color: #16529b;
  color: #fff;
  font-size: 9px;
  font-weight: bold;
  text-transform: uppercase;
  margin-right: 16px;
}

.login-button { 
  display: block;
  position: relative;
  width: 70px;
  height: 25px;
  line-height: 18px;
  margin-left: 124px;
  margin-top: 16px;
  border: none;
  background-color: #6f54db;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}

.login-button:hover { 
  background-color: #9378ff;
}

.remember-me-content {
  position: relative;
  margin-left: 110px;
  margin-top: 6px;
}

.remember-me-label {
  display: inline-block;
  position: relative;
  color: #fff;
  font-size: 10px;
}

.remember-me-checkbox {
  display: inline-block;
  position: relative;
  width: 12px;
  height: 12px;
  vertical-align: middle;
}

.error-message {
  position: relative;
  display: none;
  border: 1px solid #b9616a;
  width: 162px;
  height: 36px;
  background-color: #ffd9d9;
  margin-left: 74px;
  border-radius: 5px;
  margin-top: 16px;
}

.error-message.show {
  display: block;
}

.error-text {
  display: block;
  position: relative;
  color: #ff0000;
  text-align: center;
  font-size: 10px;
  line-height: 12px;
  margin-top: 5px;
  padding: 0 4px;
}

.try-again {
  color: #04898d;
}

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}