[v-cloak] {
  display: none;
}
*,
*:before,
*:after {
  box-sizing: border-box;
  outline: none;
}
body {
  background-color: #303030;
  color: white;
}
button {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 4px;
  background: gray;
  text-transform: capitalize;
  margin: auto;
}
button[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
button.selected {
  background: rgb(37, 105, 239);
}
button ~ button {
  margin-left: 10px;
}
button[large] {
  font-size: 1.25em;
  padding: 12px 25px;
  transition: 0.2s ease-out;
}
button[large]:hover:not([disabled]) {
  background: rgb(37, 105, 239);
}

#date-field-container {
  display: inline-block;
  height: auto;
  min-width: 0;
  margin: auto;
}
h1 {
  font-family: "Roboto";
  margin: auto;
  margin-bottom: 5vh;
  display: inline-block;
  max-width: 90vw;
  padding: 5% 15vw 5vh;
  position: relative;
  text-align: center;
  line-height: 1em;
}
h1:after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 0;
  border-bottom: 1px solid white;
  width: 100%;
  left: 0;
  max-width: 0;
  transition: 0.6s ease-out;
  margin-left: 50%;
}
.loaded h1:after {
  max-width: 100%;
  margin-left: 0;
}

.v-card {
  transition: 0.25s ease-out;
}
.v-card:not(.v-picker) {
  padding: calc(15px + 15 * (100vh - 500px) / 1200);
  padding-left: 0;
  padding-right: 0;
  margin-bottom: calc(20px + 30 * (100vh - 500px) / 1200);
  margin-top: -10px;
  opacity: 0;
}
.v-card:not(.v-picker):nth-child(1) {
  transition-delay: 300ms;
}
.v-card:not(.v-picker):nth-child(2) {
  transition-delay: 600ms;
}
.v-card:not(.v-picker):nth-child(3) {
  transition-delay: 900ms;
}
.v-card.no-shadow {
  margin-top: calc(-1 * (20px + 30 * (100vh - 500px) / 1200));
  box-shadow: none;
  opacity: 0;
}
.loaded .v-card {
  opacity: 1;
}
.loaded .v-card:not(.no-shadow):not(.v-picker) {
  margin-top: 0;
}

.status-msg-container {
  top: 10px;
  display: grid;
  align-items: flex-start;
  justify-content: center;
  width: 100vw;
  height: 100px;
  overflow: visible;
  margin: auto;
  position: absolute;
  z-index: 2;
}

.status-msg {
  position: relative;
  width: 90vw;
  max-width: 650px;
  background: #b1b1b1;
  padding: 10px 10px 10px 50px;
  margin: -20px auto 0;
  font-size: 0.9em;

  transition: 0.2s ease-out;
  margin-top: 20px;
  opacity: 1;
}

.status-msg:before {
  content: "";
  width: 10px;
  display: inline-block;
  margin-right: 10px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: 50%;
  background-position: center;
  background-repeat: no-repeat;
  width: 40px;
}
.status-msg[success]:before {
  background-color: rgb(83, 221, 83);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.25 8.891l-1.421-1.409-6.105 6.218-3.078-2.937-1.396 1.436 4.5 4.319 7.5-7.627z' fill='%23ffffff'/%3E%3C/svg%3E");
}
.status-msg[error]:before {
  background-color: rgb(221, 83, 83);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.5 6h3l-1 8h-1l-1-8zm1.5 12.25c-.69 0-1.25-.56-1.25-1.25s.56-1.25 1.25-1.25 1.25.56 1.25 1.25-.56 1.25-1.25 1.25z' fill='%23ffffff'/%3E%3C/svg%3E");
}

.status-msg:after {
  content: "";
  display: inline-block;
  margin-right: 10px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 10px;
}

.status-msg {
  margin-top: 20px;
  opacity: 1;
}
.hidden .status-msg {
  margin-top: 0;
  opacity: 0;
}

[elevated]:not([disabled]) {
  box-shadow: 0px 6px 9px -2px black;
}
button[elevated]:not([disabled]):hover {
  box-shadow: 0 0 0 0 transparent;
}
.capitalize {
  text-transform: capitalize;
}

.queue-list {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-left: 0 !important;
}

#request-results{
  width: 100%;
  max-width: 800px;
}

#request-results .v-card:not(.v-picker) {
  background: rgba(255, 255, 255, 0.1);
  padding: 5px!important;
}

.queue-item {
  font-size: 12px;
  padding: 5px 0 5px 100px;
  position: relative;
}

.queue-item .queue-created {
  color: gray;
  font-size: 10px;
  position: absolute;
  left: 0;
  top: 7px;
}

.queue-item .queue-processing-date {
  font-weight: bold;
}

.queue-item .queue-error ul {
  /*display: none;*/
  padding-left: 16px;
}

.queue-item:not(:first-child) div ~ div {
  opacity: 0.5;
  transition: 0.2s ease-out;
}

.queue-item:not(:first-child) div ~ div:hover {
  opacity: 1;
  cursor: default;
}

.v-application .queue-msg.success {
  background: none !important;
  color: #2def35;
}

.v-application .queue-msg.error {
  background: none !important;
  color: #ff3e3e;
}

.queue-msg a {
  display: inline-block;
  text-decoration: none;
  color: white !important;
  margin: -3px 0 -3px 5px;
  padding: 3px 5px;
  border-radius: 4px;
  background-color: #888;
}

.queue-msg a:hover {
  background-color: #aaa;
}

.queue-msg.error ul {
  color: white;
}

.queue-msg.error ul li {
  padding: 7px 0;
}

.queue-msg.error > div > a {
  background: #c70101;
}

.queue-msg.processing,
.queue-msg.waiting {
  animation: 1s pulse infinite;
}

@keyframes pulse {
  0% {
    opacity: 100%;
  }
  50% {
    opacity: 50%;
  }
  100% {
    opacity: 100%;
  }
}

.result-row {
  text-align: center;
  margin-bottom: 20px;
}
.v-application .result-row .fail {
  color: red;
}

.v-application .result-row .success {
  color: lightgreen;
  background: none !important;
}

.form-row {
  display: block;
  margin: auto;
  padding-top: 15px;
  position: relative;
  height: 60px;
  width: 300px;
}
.form-row label {
  position: absolute;
  line-height: 30px;
  margin-left: 10px;
  transition: 0.2s ease-out;
  top: 0;
  left: 0;
  margin-top: 21px;
}
.form-row input[type="text"],
.form-row input[type="password"] {
  border: 1px solid white;
  border-radius: 4px;
  background: #888;
  padding: 10px 15px;
  width: 100%;
  line-height: 20px;
}

.form-row input:focus + label,
.form-row input.filled + label {
  margin-left: 0;
  margin-top: 0;
  line-height: 15px;
  font-size: 11px;
}

#togglePassword {
  position: absolute;
  right: 10px;
  top: 20px;
  height: calc(30px);
  width: 20px;
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 489.658 489.658" style="enable-background:new 0 0 489.658 489.658;" xml:space="preserve"><path d="M194.829,244.829c0,27.57,22.43,50,50,50s50-22.43,50-50s-22.43-50-50-50S194.829,217.259,194.829,244.829z" fill="white"/><path d="M485.313,237.318c-23.974-41.44-58.446-76.197-99.691-100.511c-42.473-25.038-91.117-38.28-140.681-38.3 c-0.037,0-0.074-0.001-0.112-0.001s-0.074,0.001-0.112,0.001c-49.564,0.02-98.208,13.262-140.681,38.3 c-41.245,24.314-75.718,59.07-99.691,100.511L0,244.829l4.345,7.511c23.974,41.44,58.446,76.197,99.691,100.511 c42.473,25.038,91.117,38.28,140.681,38.3c0.037,0,0.074,0.001,0.112,0.001s0.074-0.001,0.112-0.001 c49.564-0.02,98.208-13.262,140.681-38.3c41.245-24.314,75.718-59.07,99.691-100.511l4.345-7.511L485.313,237.318z M361.152,244.829c0,64.105-52.125,116.264-116.217,116.322c-0.036,0-0.071,0.001-0.107,0.001s-0.071-0.001-0.107-0.001 c-64.092-0.058-116.217-52.217-116.217-116.322s52.125-116.264,116.217-116.322c0.036,0,0.071-0.001,0.107-0.001 s0.071,0.001,0.107,0.001C309.027,128.565,361.152,180.724,361.152,244.829z M34.839,244.829 c22.94-36.587,54.809-66.03,91.791-86.144c-17.673,24.184-28.124,53.964-28.124,86.144s10.45,61.96,28.124,86.144 C89.648,310.859,57.779,281.416,34.839,244.829z M363.029,330.973c17.673-24.184,28.124-53.964,28.124-86.144 s-10.45-61.96-28.124-86.144c36.981,20.114,68.85,49.557,91.791,86.144C431.879,281.416,400.01,310.859,363.029,330.973z" fill="white"/></svg>');
  background-size: contain;
  background-position: center;
  z-index: 10000000;
  opacity: 0.5;
}

#togglePassword:hover {
  opacity: 1;
}
#togglePassword.revealed {
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 297 297" style="enable-background:new 0 0 297 297;" xml:space="preserve"><path d="M296.287,144.916c-0.36-0.869-9.072-21.511-31.772-42.015C243.777,84.168,206.814,61.837,148.5,61.837 c-24.88,0-45.841,4.029-63.325,10.089L50.777,37.527c-3.66-3.658-9.59-3.658-13.25,0c-3.659,3.659-3.659,9.591,0,13.25 l28.951,28.951c-14.429,7.13-25.721,15.461-34.24,23.184C9.6,123.436,1.041,144.106,0.688,144.975 c-0.909,2.24-0.918,4.744-0.024,6.99c0.347,0.871,8.75,21.569,31.327,42.112c20.599,18.744,57.533,41.087,116.509,41.087 c24.73,0,45.647-4.113,63.133-10.281l34.59,34.59c1.83,1.829,4.227,2.744,6.625,2.744c2.398,0,4.795-0.915,6.625-2.744 c3.659-3.659,3.659-9.591,0-13.25l-29.22-29.22c14.124-7.06,25.278-15.267,33.768-22.88c22.823-20.466,31.843-41.054,32.215-41.92 C297.237,149.881,297.254,147.253,296.287,144.916z M45.299,180.848c-14.511-13.007-22.379-26.193-25.55-32.315 c3.216-6.126,11.183-19.332,25.764-32.359c10.402-9.294,22.08-16.777,34.965-22.445l0.505,0.505 c-11.97,14.863-19.147,33.741-19.147,54.267c0,21.131,7.605,40.515,20.217,55.571C68.425,198.32,56.148,190.574,45.299,180.848z M148.5,216.427c-37.454,0-67.926-30.471-67.926-67.926c0-15.356,5.128-29.533,13.753-40.922l19.852,19.852 c-3.78,6.135-5.966,13.351-5.966,21.07c0,22.214,18.073,40.287,40.287,40.287c7.719,0,14.936-2.186,21.07-5.966l19.852,19.852 C178.033,211.298,163.856,216.427,148.5,216.427z M155.594,168.844c-2.223,0.777-4.609,1.205-7.093,1.205 c-11.882,0-21.549-9.666-21.549-21.549c0-2.485,0.428-4.87,1.205-7.093L155.594,168.844z M141.407,128.157 c2.223-0.777,4.609-1.205,7.093-1.205c11.882,0,21.549,9.666,21.549,21.549c0,2.485-0.428,4.87-1.205,7.093L141.407,128.157z M202.673,189.423l-19.852-19.852c3.78-6.135,5.967-13.351,5.967-21.07c0-22.214-18.073-40.287-40.287-40.287 c-7.719,0-14.936,2.186-21.07,5.966l-19.852-19.852c11.39-8.625,25.566-13.753,40.922-13.753 c37.453,0,67.925,30.471,67.925,67.926C216.426,163.857,211.298,178.034,202.673,189.423z M216.164,202.915l-0.148-0.148 c11.97-14.863,19.147-33.741,19.147-54.267c0-20.964-7.484-40.212-19.918-55.217c13.277,5.723,25.308,13.365,36.026,22.91 c14.541,12.949,22.596,26.074,25.899,32.251C271.74,158.349,253.814,186.088,216.164,202.915z" fill="white"/></svg>');
  opacity: 1;
}

.form-row button {
  width: 100%;
  padding: 10px;
  border-radius: 4px;
  background-color: #888;
  color: white;
  transition: 0.3s;
}

.form-row button:hover {
  background: #f7931e;
}

#login-screen {
  height: 100%;
  width: 100%;
  display: grid;
  align-items: center;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: white;
  -webkit-box-shadow: 0 0 0px 1000px #888 inset;
  transition: background-color 5000s ease-in-out 0s;
}

:-webkit-autofill {
  animation-name: onAutoFillStart;
}
:not(:-webkit-autofill) {
  animation-name: onAutoFillCancel;
}
@keyframes onAutoFillStart {
  from {
  }
  to {
  }
}
@keyframes onAutoFillCancel {
  from {
  }
  to {
  }
}

#intention-selection,
#company-selection {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}

#company-selection > div {
}

#login-form-container {
  text-align: center;
}
#login-form-container h1 {
  margin-bottom: 30px;
}

h1 > div {
  font-size: 1rem;
  font-weight: normal;
  margin: 10px 0;
}

#request-results {
  padding: 5vw;
}

#request-results h3 {
  border-bottom: 1px white solid;
  padding-bottom: 10px;
  margin-bottom: 10px;
}