/* stylelint-disable */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,
nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}html{line-height:1}body{line-height:inherit}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
/* stylelint-enable */

/*
  todo: this
  @ 16px
  109.656px  6.854em
  67.773px  4.236em
  41.887px  2.618em
  25.888px  1.618em
  16px  1em
  9.889px  0.618em

  @ 18px
  123.363px  6.854em  7.71em @ 16
  76.244px  4.236em  4.765em @ 16
  47.123px  2.618em  2.945em @ 16
  29.124px  1.618em  1.82em @ 16
  18px  1em  1.125em @ 16
  11.125px  0.618em  0.695em @ 16

  @ 21px (line-height)
  21px
  31.5px
  42px
  52.5px

*/

/* add baseline grid */
/*
html {
  background-color: #fff;
  background-size: 21px 21px;
  background-image: linear-gradient(#ccc .05em, transparent .05em),
                    linear-gradient(90deg, #ccc .05em, transparent .05em);
}
*/

body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 21px;
}

ul,
ol {
  list-style: none;
}


/* TODO: add line heights for every font-size declaration */

h1,
h2,
h3,
h4 {
  font-weight: 500;
}

h1 {
  font-size: 36px;
  line-height: 45px;
}

h2 {
  font-size: 25px;
  line-height: 31.5px;
}

h3 {
  font-size: 18px;
  line-height: 21px;
  color: #7d7d7d;
}

h4 {
  font-size: 18px;
}

h5 {
  font-size: 14px;
}

h6 {
  font-size: 14px;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: #7d7d7d;
}

main,
header,
footer {
  margin-left: 42px;
}

header {
  margin-top: 105px;
  margin-bottom: 63px;
  width: 231px;
  height: 105px;
}

header h2,
header h3 {
  margin-bottom: 21px;
}

figcaption {
  opacity: 0;
}

/* form styles */

form {
  width: 85%;
  min-width: 250px;
  max-width: 300px; /* idk */
  height: auto;
  position: absolute;
}

input {
  height: 31.5px;
  border-radius: 11px;
  border: none;
  box-sizing: border-box;
  background-color: #f2f2f2;
  padding: 10px;
  line-height: 18px;
}

input[type="radio"] {
  cursor: pointer;
}

input[type="text"],
input[type="date"] {
  width: 100%;
  font-size: 14px;
}

input[type="date"] {
  font-family: inherit;
  padding: 0;
  padding-left: 10px;
  padding-right: 10px;
  color: #7d7d7d; /* todo: add color just to placeholder text not the typed text */
}

label {
  color: #565656;
  font-size: 16px;
  line-height: 21px;
  margin-bottom: 7.875px;
  display: block;
}

form li {
  margin-bottom: 26.50px;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: 0;
  box-shadow: 0 0 1px 1px #ffc788;
}

/* reusable */

.continue input[type="submit"] {
  background-color: rgba(0, 0, 0, 0);
  text-decoration: underline;
  font-size: 16px;
  line-height: 21px;
  height: auto;
  width: auto;
  padding: 10.5px;
  margin-top: 10.5px;
  cursor: pointer;
  float: right;
}

.topLabel label {
  display: block;
}

.hidden {
  display: none;
}

.uppercase {
  text-transform: uppercase;
}

.bold {
  font-weight: bold;
}

/* page specific styles */

#home li,
#home a {
  font-size: 18px;
  color: #FF9415;
  margin-bottom: 42px;
}

.homepage {
  margin-bottom: 126px;
}

/* location selection */

.tripType {
  color: #7d7d7d;
  font-size: 14px;
  line-height: 21px;
}

.tripType li {
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 0;
}

.tripType label {
  float: right;
  cursor: pointer;
}

.tripType input[type=radio] {
  opacity: 0;
  float: right;
}

/* todo in js: when checked, appear as a black dot above the text */
.tripType input[type="radio"]:checked+label {
  color: black;
  font-weight: 500;
}

#multi-city,
#rount-trip,
#one-way {
  cursor: pointer;
}

/* passenger type and number selection */

.tickets input[type="text"]{
  text-align: center;
  width: 25%; /* 25% of parent whose max width only goes up to 300px */
}

.more,
.less {
  display: inline-block;
  text-align: center;
  background-color: #ffcf97;
  width: 26px;
  height: 26px;
  border-radius: 10.5px;
}

.more {
  margin-left: 7px;
}

.less {
  margin-right: 7px;
}

/* flight selection */

/* section */
#departingSelection,
#returnSelection {
  /* totally different than other pages? idk probably bad */
  position: absolute;
  top: 168px;
  left: 21px;
  right: 21px;
  width: auto;
}

/* figure container */
.searchResults {
  margin-bottom: 21px;
}

/* an individual result */
.flight {
  display: flex;
  justify-content: space-between;
}

.flight ul {
  display: inline-block;
  margin: 21px 10px 21px 10px;
}

/* TODO: don't know why hover isn't working. come back to it later */


/* flight result pieces */
.time,
.airport,
.duration {
  margin-right: 21px;
}

/* results form */

#departingFlight li,
#returnFlight li {
  float: left;
}

/* seat selection */

#airplane {
  margin-bottom: 21px;
}

.row {
  display: inline-block;
  width: 100%;
}

.seats li {
  float: left;
  margin-right: 10px;

  background-color: #f2f2f2;
  border-radius: 10px;
}

li .aisle {
  margin-right: 21px;
}

.seats a {
  display: block;
  padding: 10px;
}

.unavailable {
  background-color: grey;
  border-radius: 10px;
}

.selected {
  background-color: #ffcf97;
  border-radius: 10px;
}

/* form results */
#departingSeatSelection,
#returnSeatSelection {
  text-transform: uppercase;
}

#departingSeats .continue,
#returnSeats .continue {
  display: inline-block;
}

/* payment info */

/* can't figure out how to put the elements on the same line right now.
   come back to that later */

/* confirmation page */

#view {
  display: inline-block;
  margin-bottom: 21px;
}

#view li {
  float: left;
  margin-right: 21px;
}

.r-airport li,
.r-times li,
.r-info li,
.d-airport li,
.d-times li,
.d-info li {
  display: inline-block;
  margin-bottom: 21px;
  margin-right: 21px;
}

#paymentReview {
  width: 85%;
  min-width: 250px;
  max-width: 300px; /* idk */
}