/* Includes some default style for the starter application.
 * This can be safely deleted to start fresh.
 */

/* Milligram v1.4.1 https://milligram.github.io
 * Copyright (c) 2020 CJ Patoilo Licensed under the MIT license
 */

*,*:after,*:before{
    -webkit-box-sizing:inherit;
            box-sizing:inherit
}
html{
    -webkit-box-sizing:border-box;
            box-sizing:border-box;
    font-size:62.5%;
    background-color: #2f2e2c;
}
body{
    color: #fff;
    font-family:'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-size:1.6em;
    font-weight:300;
    letter-spacing:.01em;
    background-color: #2f2e2c;
}
blockquote{
    border-left:0.3rem solid #64adc2;
    margin-left:0;
    margin-right:0;
    padding:1rem 1.5rem
}
blockquote *:last-child{
    margin-bottom:0
}
.button,button,input[type='button'],input[type='reset'],input[type='submit']{
    background-color: #64adc2;
    border:0.1rem solid  #64adc2;
    border-radius:.4rem;
    color:#fff;
    cursor:pointer;
    display:inline-block;
    font-size:1.1rem;
    font-weight:700;
    height:3.8rem;
    letter-spacing:.1rem;
    line-height:3.8rem;
    padding:0 3.0rem;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
    white-space:nowrap
}
.button:focus,.button:hover,button:focus,button:hover,input[type='button']:focus,input[type='button']:hover,input[type='reset']:focus,input[type='reset']:hover,input[type='submit']:focus,input[type='submit']:hover{
    background-color:#606c76;
    border-color:#606c76;
    color:#fff;
    outline:0
}
.button[disabled],button[disabled],input[type='button'][disabled],input[type='reset'][disabled],input[type='submit'][disabled]{
    cursor:default;
    opacity:.5
}
.button[disabled]:focus,.button[disabled]:hover,button[disabled]:focus,button[disabled]:hover,input[type='button'][disabled]:focus,input[type='button'][disabled]:hover,input[type='reset'][disabled]:focus,input[type='reset'][disabled]:hover,input[type='submit'][disabled]:focus,input[type='submit'][disabled]:hover{
    /*background-color: #64adc2;
    border-color: #64adc2*/
}
.button.button-outline,button.button-outline,input[type='button'].button-outline,input[type='reset'].button-outline,input[type='submit'].button-outline{
    background-color:transparent;
    color: #64adc2
}
.button.button-outline:focus,.button.button-outline:hover,button.button-outline:focus,button.button-outline:hover,input[type='button'].button-outline:focus,input[type='button'].button-outline:hover,input[type='reset'].button-outline:focus,input[type='reset'].button-outline:hover,input[type='submit'].button-outline:focus,input[type='submit'].button-outline:hover{
    background-color:transparent;
    /* border-color:#d0d0f0;
    color: #d0d0f0*/
    border-color: #a3c0c8;
    color: #a3c0c8
}
.button.button-outline[disabled]:focus,.button.button-outline[disabled]:hover,button.button-outline[disabled]:focus,button.button-outline[disabled]:hover,input[type='button'].button-outline[disabled]:focus,input[type='button'].button-outline[disabled]:hover,input[type='reset'].button-outline[disabled]:focus,input[type='reset'].button-outline[disabled]:hover,input[type='submit'].button-outline[disabled]:focus,input[type='submit'].button-outline[disabled]:hover{
    border-color:inherit;
    /*color: #64adc2*/
    border-color: #a3c0c8;
    color: #a3c0c8
}
.button.button-clear,button.button-clear,input[type='button'].button-clear,input[type='reset'].button-clear,input[type='submit'].button-clear{
    background-color:transparent;
    border-color:transparent;
    color: #64adc2
}
.button.button-clear:focus,.button.button-clear:hover,button.button-clear:focus,button.button-clear:hover,input[type='button'].button-clear:focus,input[type='button'].button-clear:hover,input[type='reset'].button-clear:focus,input[type='reset'].button-clear:hover,input[type='submit'].button-clear:focus,input[type='submit'].button-clear:hover{
    background-color:transparent;
    border-color:transparent;
    color: #a3c0c8
}
.button.button-clear[disabled]:focus,.button.button-clear[disabled]:hover,button.button-clear[disabled]:focus,button.button-clear[disabled]:hover,input[type='button'].button-clear[disabled]:focus,input[type='button'].button-clear[disabled]:hover,input[type='reset'].button-clear[disabled]:focus,input[type='reset'].button-clear[disabled]:hover,input[type='submit'].button-clear[disabled]:focus,input[type='submit'].button-clear[disabled]:hover{
    color: #a3c0c8
}

.button.cta {
    font-size: 125%;
    height: 7.6rem; /* 2 * 3.8 rem */
    line-height: 7.6rem; /* 2 * 3.8 rem */
    margin: 0.5rem;
}

code{
    background:#3e3e3e;
    border-radius:.4rem;
    font-size:86%;
    margin:0 .2rem;
    padding:.2rem .5rem;
    white-space:nowrap
}
pre{
    background:#3e3e3e;
    border-left:0.3rem solid  #64adc2;
    overflow-y:hidden
}
pre>code{
    border-radius:0;
    display:block;
    padding:1rem 1.5rem;
    white-space:pre
}
hr{
    border:0;
    border-top:0.1rem solid #3e3e3e;
    margin:3.0rem 0
}
input[type='color'],input[type='date'],input[type='datetime'],input[type='datetime-local'],input[type='email'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='url'],input[type='week'],input:not([type]),textarea,select{
    -webkit-appearance:none;
    background-color:transparent;
    border:0.1rem solid #d1d1d1;
    border-radius:.4rem;
    -webkit-box-shadow:none;
            box-shadow:none;
    -webkit-box-sizing:inherit;
            box-sizing:inherit;
    color: #fff;
    height:3.8rem;
    padding:.6rem 1.0rem .7rem;
    width:100%
}
input[type='color']:focus,input[type='date']:focus,input[type='datetime']:focus,input[type='datetime-local']:focus,input[type='email']:focus,input[type='month']:focus,input[type='number']:focus,input[type='password']:focus,input[type='search']:focus,input[type='tel']:focus,input[type='text']:focus,input[type='url']:focus,input[type='week']:focus,input:not([type]):focus,textarea:focus,select:focus{
    border-color: #64adc2;
    outline:0
}
select{
    background:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 30 8\" width=\"30\"><path fill=\"%23d1d1d1\" d=\"M0,0l6,8l6-8\"/></svg>") center right no-repeat;
    padding-right:3.0rem
}
select:focus{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 30 8\" width=\"30\"><path fill=\"%230069d9\" d=\"M0,0l6,8l6-8\"/></svg>")
}
select[multiple]{
    background:none;
    height:auto
}
textarea{
    min-height:6.5rem
}
label,legend{
    display:block;
    font-size:1.6rem;
    font-weight:700;
    margin-bottom:.5rem
}
fieldset{
    border-width:0;
    padding:0
}
input[type='checkbox'],input[type='radio']{
    display:inline
}
.label-inline{
    display:inline-block;
    font-weight:normal;
    margin-left:.5rem
}
.container{
    margin:0 auto;
    max-width:112.0rem;
    padding:0 2.0rem;
    position:relative;
    width:100%
}
.row{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
        -ms-flex-direction:column;
            flex-direction:column;
    padding:0;
    width:100%
}
.row.row-no-padding{
    padding:0
}
.row.row-no-padding>.column{
    padding:0
}
.row.row-wrap{
    -ms-flex-wrap:wrap;
        flex-wrap:wrap
}
.row.row-top{
    -webkit-box-align:start;
        -ms-flex-align:start;
            align-items:flex-start
}
.row.row-bottom{
    -webkit-box-align:end;
        -ms-flex-align:end;
            align-items:flex-end
}
.row.row-center{
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center
}
.row.row-stretch{
    -webkit-box-align:stretch;
        -ms-flex-align:stretch;
            align-items:stretch
}
.row.row-baseline{
    -webkit-box-align:baseline;
        -ms-flex-align:baseline;
            align-items:baseline
}
.row .column{
    display:block;
    -webkit-box-flex:1;
        -ms-flex:1 1 auto;
            flex:1 1 auto;
    margin-left:0;
    max-width:100%;
    width:100%
}
.row .column.column-offset-10{
    margin-left:10%
}
.row .column.column-offset-20{
    margin-left:20%
}
.row .column.column-offset-25{
    margin-left:25%
}
.row .column.column-offset-33,.row .column.column-offset-34{
    margin-left:33.3333%
}
.row .column.column-offset-40{
    margin-left:40%
}
.row .column.column-offset-50{
    margin-left:50%
}
.row .column.column-offset-60{
    margin-left:60%
}
.row .column.column-offset-66,.row .column.column-offset-67{
    margin-left:66.6666%
}
.row .column.column-offset-75{
    margin-left:75%
}
.row .column.column-offset-80{
    margin-left:80%
}
.row .column.column-offset-90{
    margin-left:90%
}
.row .column.column-10{
    -webkit-box-flex:0;
        -ms-flex:0 0 10%;
            flex:0 0 10%;
    max-width:10%
}
.row .column.column-20{
    -webkit-box-flex:0;
        -ms-flex:0 0 20%;
            flex:0 0 20%;
    max-width:20%
}
.row .column.column-25{
    -webkit-box-flex:0;
        -ms-flex:0 0 25%;
            flex:0 0 25%;
    max-width:25%
}
.row .column.column-33,.row .column.column-34{
    -webkit-box-flex:0;
        -ms-flex:0 0 33.3333%;
            flex:0 0 33.3333%;
    max-width:33.3333%
}
.row .column.column-40{
    -webkit-box-flex:0;
        -ms-flex:0 0 40%;
            flex:0 0 40%;
    max-width:40%
}
.row .column.column-50{
    -webkit-box-flex:0;
        -ms-flex:0 0 50%;
            flex:0 0 50%;
    max-width:50%
}
.row .column.column-60{
    -webkit-box-flex:0;
        -ms-flex:0 0 60%;
            flex:0 0 60%;
    max-width:60%
}
.row .column.column-66,.row .column.column-67{
    -webkit-box-flex:0;
        -ms-flex:0 0 66.6666%;
            flex:0 0 66.6666%;
    max-width:66.6666%
}
.row .column.column-75{
    -webkit-box-flex:0;
        -ms-flex:0 0 75%;
            flex:0 0 75%;
    max-width:75%
}
.row .column.column-80{
    -webkit-box-flex:0;
        -ms-flex:0 0 80%;
            flex:0 0 80%;
    max-width:80%
}
.row .column.column-90{
    -webkit-box-flex:0;
        -ms-flex:0 0 90%;
            flex:0 0 90%;
    max-width:90%
}
.row .column .column-top{
    -ms-flex-item-align:start;
        align-self:flex-start
}
.row .column .column-bottom{
    -ms-flex-item-align:end;
        align-self:flex-end
}
.row .column .column-center{
    -ms-flex-item-align:center;
        align-self:center
}
@media (min-width: 40rem){
    .row{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;
    margin-left:-1.0rem;
    width:calc(100% + 2.0rem)}.row .column{margin-bottom:inherit;
    padding:0 1.0rem}
}
a{
    color: #64adc2;
    text-decoration:none
}
a:focus,a:hover{
    color:#d0d0f0 /*#606c76*/
}
dl,ol,ul{
    /*list-style:none;*/
    margin-top:0;
    padding-left:0
}
dl dl,dl ol,dl ul,ol dl,ol ol,ol ul,ul dl,ul ol,ul ul{
    font-size:90%;
    margin:1.5rem 0 1.5rem 3.0rem
}
ol{
    list-style: decimal /*inside*/;
    margin-left: 1.5rem;
}
ul{
    list-style: circle /*inside*/
}
.button,button,dd,dt,li{
    margin-bottom:1.0rem
}
fieldset,input,select,textarea{
    margin-bottom:1.5rem
}
blockquote,dl,figure,form,ol,p,pre,table,ul{
    margin-bottom:2.5rem
}
table{
    border-spacing:0;
    display:block;
    overflow-x:auto;
    text-align:left;
    width:100%
}
td,th{
    border-bottom:0.1rem solid #e1e1e1;
    padding:1.2rem 1.5rem
}
td:first-child,th:first-child{
    padding-left:0
}
td:last-child,th:last-child{
    padding-right:0
}
@media (min-width: 40rem){
    table{display:table;
    overflow-x:initial}
}
b,strong{
    font-weight:bold
}
p{
    margin-top:0
}
h1,h2,h3,h4,h5,h6{
    font-weight:300;
    letter-spacing:-.1rem;
    margin-bottom:2.0rem;
    margin-top:0
}
h1{
    font-size:4.6rem;
    line-height:1.2
}
h2{
    font-size:3.6rem;
    line-height:1.25
}
h3{
    font-size:2.8rem;
    line-height:1.3
}
h4{
    font-size:2.2rem;
    letter-spacing:-.08rem;
    line-height:1.35
}
h5{
    font-size:1.8rem;
    letter-spacing:-.05rem;
    line-height:1.5
}
h6{
    font-size:1.6rem;
    letter-spacing:0;
    line-height:1.4
}
img{
    max-width:100%
}
.clearfix:after{
    clear:both;
    content:' ';
    display:table
}
.float-left{
    float:left
}
.float-right{
    float:right
}


/* General style */
h1{font-size: 3.6rem; line-height: 1.25}
h2{font-size: 2.8rem; line-height: 1.3}
h3{font-size: 2.2rem; letter-spacing: -.08rem; line-height: 1.35}
h4{font-size: 1.8rem; letter-spacing: -.05rem; line-height: 1.5}
h5{font-size: 1.6rem; letter-spacing: 0; line-height: 1.4}
h6{font-size: 1.4rem; letter-spacing: 0; line-height: 1.2}
pre{padding: 1em;}

.container{
  margin: 0 auto;
  max-width: 80.0rem;
  padding: 0 2.0rem;
  position: relative;
  width: 100%
}
select {
  width: auto;
}

section {
  padding: 1em 3em 1em;
  margin-bottom: 1rem;
  font-weight: 200;
  font-size: 120%;
}

/* Phoenix promo and logo */
.phx-hero {
  text-align: center;
  border-bottom: 1px solid #303030;
  background: #3e3e3e;
  border-radius: 6px;
  padding: 3em 3em 1em;
  margin-bottom: 1rem;
  font-weight: 200;
  font-size: 120%;
}
.phx-hero input {
  background: #4e4e4e;
}
.phx-logo {
  min-width: 300px;
  margin: 1rem;
  display: block;
}
.phx-logo img {
  width: auto;
  display: block;
}

.phx-hero p {
    text-align: left;
}

/* Headers */
header {
  width: 100%;
  background-color: #5c5b55;
  border-bottom: 1px solid #b5afa1;
  margin-bottom: 2rem;
}
header section {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
header section :first-child {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}
header section :last-child {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}
header nav ul,
header nav li {
  margin: 0;
  padding: 0;
  display: block;
  text-align: right;
  white-space: nowrap;
}
header nav ul {
  margin: 1rem;
  margin-top: 0;
}
header nav a {
  display: block;
}

@media (min-width: 40.0rem) { /* Small devices (landscape phones, 576px and up) */
  header section {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  header nav ul {
    margin: 1rem;
  }
  .phx-logo {
    -ms-flex-preferred-size: 527px;
        flex-basis: 527px;
    margin: 2rem 1rem;
  }
}

/* This file is for your main application CSS */

html,body{
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  /*background-color: #2f2e2c;*/
  /* un-borks fixed position on mobile, something to do with viewport scaling.
     Maybe my code was always wrong and just happened to work before, I don't know. */
  overflow: auto;
}

/* Will be used with either position:fixed or sticky, depending on whether
  this is a main page header or zui header. */
#flyingHeader {
  top: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 3000;
  border: none;
  padding: .25rem;
}

#homelink {
  margin: .5rem;
}

#homelink img {
  display: block; /* get rid of stupid space underneath image */
  height: 45px;
}

article footer {
  color: #999;
}

.pickedUpModal {
    -webkit-box-shadow: 10px 10px #0005;
            box-shadow: 10px 10px #0005;
}

/* styles for slidey-style buttons */
.slideButton {
    /* sizing */
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    /* contents layout */
    padding: 1em;
    opacity: 0.8;
    border: 1.5px solid #be8;
    border-radius: 3px;
    background-color: #454;
    color: #fff;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.slideButton[preset=blue] {
    border-color: #8be;
    background-color: #456;
}

.slideButton[preset=yellow] {
    border-color: #fb0;
    background-color: #975;
}

/* Alerts and form errors used by phx.new */
.alert {
  padding: 15px;
  margin-bottom: 5px; /*orig 20px*/
  border: 1px solid transparent;
  border-radius: 4px;
}
.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
.alert-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}
.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}
.alert p {
  margin-bottom: 0;
}
.alert a {
  /* default link color is unreadably light in alerts (especially info)
     Rather than define all new colors, just go with underlining. */
  color: inherit;
  text-decoration: underline;
}
.alert:empty {
  display: none;
}
.invalid-feedback {
  color: #a94442;
  display: block;
  margin: -1rem 0 2rem;
}

/* LiveView specific classes for your customization */
.phx-no-feedback.invalid-feedback,
.phx-no-feedback .invalid-feedback {
  display: none;
}

.phx-click-loading {
  opacity: 0.5;
  -webkit-transition: opacity 1s ease-out;
  transition: opacity 1s ease-out;
}

.phx-loading{
  cursor: wait;
}

.phx-modal {
  opacity: 1!important;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}

.phx-modal-content {
  background-color: #fefefe;
  margin: 15vh auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.phx-modal-close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.phx-modal-close:hover,
.phx-modal-close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.fade-in-scale {
  -webkit-animation: 0.2s ease-in 0s normal forwards 1 fade-in-scale-keys;
          animation: 0.2s ease-in 0s normal forwards 1 fade-in-scale-keys;
}

.fade-out-scale {
  -webkit-animation: 0.2s ease-out 0s normal forwards 1 fade-out-scale-keys;
          animation: 0.2s ease-out 0s normal forwards 1 fade-out-scale-keys;
}

.fade-in {
  -webkit-animation: 0.2s ease-out 0s normal forwards 1 fade-in-keys;
          animation: 0.2s ease-out 0s normal forwards 1 fade-in-keys;
}
.fade-out {
  -webkit-animation: 0.2s ease-out 0s normal forwards 1 fade-out-keys;
          animation: 0.2s ease-out 0s normal forwards 1 fade-out-keys;
}

@-webkit-keyframes fade-in-scale-keys{
  0% { scale: 0.95; opacity: 0; }
  100% { scale: 1.0; opacity: 1; }
}

@keyframes fade-in-scale-keys{
  0% { scale: 0.95; opacity: 0; }
  100% { scale: 1.0; opacity: 1; }
}

@-webkit-keyframes fade-out-scale-keys{
  0% { scale: 1.0; opacity: 1; }
  100% { scale: 0.95; opacity: 0; }
}

@keyframes fade-out-scale-keys{
  0% { scale: 1.0; opacity: 1; }
  100% { scale: 0.95; opacity: 0; }
}

@-webkit-keyframes fade-in-keys{
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fade-in-keys{
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes fade-out-keys{
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes fade-out-keys{
  0% { opacity: 1; }
  100% { opacity: 0; }
}