html, body {
  max-width: 100%;
  overflow-x: hidden;
}
* {
  box-sizing: border-box;
}
@font-face {
  font-family: Droid Sans Mono;
  src: url(../font/droid-sans.rev1.ttf);
}
@keyframes spin {
  from {
    transform:rotate(0deg); 
  }
  to {
    transform:rotate(360deg); 
  }
}

a {
  color: #a3a3a3;
  cursor: pointer;
  font-weight: 400;
  text-decoration-line: none;
  text-decoration-style: solid;
  user-select: none;
}
a.active, a:hover {
  color: #fff;
}
h2 {
  color: #a3a3a3;
  font-size: 14px;
}
p#date {
  color: pink;
}
body {
  background-color: #0c0c0c;
  color: #fff;
  display: none;
  font-family: Droid Sans Mono, monospace;
  font-size: 11px;
  height: 100%;
  letter-spacing: -1px;
  margin: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
div#container_content {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: row;
  width: 100%;
  p {
    grid-column: span 12;
  }
}
div#container_footer {
  background-color: #1f1f1f;
  display: grid;
  grid-template-columns: repeat(12, 1fr); 
  & * {
    color: #bbbbbb;
    grid-column: span 3;
    text-align: center;
    &:hover {
      color: white;
    }
  }
}
div#container_login {
  text-align: center;
  background-color:red;
  font-size: 5vmin;
  grid-area: 1 / 1 / 2 / 2;
  width: 100%;
}
div#container_logo {
  align-items: center;
  height: 100vh;
  width: 100vw;
  display: grid;
  justify-items: center;
  img#logo{
    height: 100vmin;
    grid-area: 1 / 1 / 2 / 2;
    &.spin_me{
      animation: spin 2s linear infinite; 
      display: inherit; 
      position: absolute; 
      z-index: 3;
    }
  }
}
div#container_navigation {
  display: none;
  grid-template-columns: repeat(12, 1fr);
  a {
    padding: 14px 16px;
    font-size: 17px;    
  }
  a#privacy_policy {
    grid-column: span 2;    
  }
  a#risk_questionnaire {
    grid-column: span 2;
  }
  a#trigram {
    display: none;
    grid-area: 1/-1;
  }
}
form#portfolio_form { 
  color: #bbbbbb;  
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  #blurb {
    grid-column: 2/6;
    filter: brightness(.5) contrast(.5) sepia(.1);
    font: message-box;
  }
  div[class^="blank"] {
    border: none;
    min-height: 17.5px;
  }
  div.blank_1 {
    grid-column: span 1;
  }
  div.blank_3 {
    grid-column: span 3;
  }
  div.blank_5 {
    grid-column: span 5;
  }
  div.blank_6 {
    grid-column: span 6;
  }
  input {
    background-color: transparent;
    border: none;
    width: 100%;
    color-scheme: dark;
    font-family: Droid Sans Mono, monospace;
    font-size: 11px;
    letter-spacing: -1px;
    padding-right: 20px;
    text-align:right;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    &.add_row {
      color: #bbbbbb;
      &::placeholder {
        color: color: #bbbbbb;
      }
    }
    &:hover {
      color: white;
      &::placeholder {
        color: white;
      }
    }
    &::-webkit-calendar-picker-indicator {
      opacity: 0;
    }
  }
  span {
    border: none;
    &:has(input) {
      color: #a770b8;
    }
    & * {
      color: inherit;
    }
    &:hover * {
      color: #bbbbbb;
    }
    span {
      margin-left:-20px;
      border-left-width: 0px;
      border-bottom-width: 0px;
    }
    &#desired_percentage_of_portfolio {
      text-align: right;
      margin-right: 15px;
    }
    &.border_all {
      margin: -0.5px;
      border: 0.5px dotted darkgrey;
    }
    &.border_bottom {
      margin-bottom: -0.5px;
      border-bottom: 0.5px dotted darkgrey;
    }
    &.border_right {
      margin-right: -0.5px;
      border-right: 0.5px dotted darkgrey;
    }
  }
  #submit_button {
    color: #bbbbbb;
    border: dotted 0.5px #bbbbbb;
    grid-column: 6;
    &:hover {
      color: white;
    }
    padding: 1px;
    text-align: center;
    width: 50%;
  }
}
form#risk_questionnaire {
  align-items: center;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  padding-top: 5vw;
  row-gap: 20px;
  fieldset {
    grid-column: 2/12;
    border-width: 0;
    padding-block: 2 em;
    padding-inline: 0;
    margin-inline: 0;
    label {
      color: #bbbbbb;
      font-size: 11px;
      text-align: left;
      display: block;
      &:focus, &:hover {
        color: white;
        outline: none;
      }
      input {
        vertical-align: sub;
      }
    }
    legend {
      font-size: 24px;
      text-align: left;
      span {
        font-size: 40px;
      }
    }
  }
  h1 {
    font-size: 8em;
    grid-column: span 9;
  }
  img#questionmark {
    grid-column: 2; 
    justify-self: left;
  }
  input, select {
    background-color: #0c0c0c;
    border: none;
    color: #bbbbbb;
    color-scheme: dark;
    font-family: Droid Sans Mono, monospace;
    font-size: 11px;
    letter-spacing: -1px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    grid-column: 6/9;
    min-width: 0;
    padding: 8px 12px;
    &:focus, &:hover {
      color: white;
      outline: none;
    }
    &::placeholder {
      color: #bbbbbb;
      opacity: 1;
    }
    &#submit {
      color: #bbbbbb;
      border-radius: 12px;
      border: solid 1px #bbbbbb;
      grid-column: 9;
      &:hover {
        border: solid 1px #fff;
        color: white;
      }
    }
  }
}
/*Color Overrides*/
.gray {color: #bbbbbb  !important; }
.green {color: #00ff22  !important; }
.green_darker {color: green    !important; }
.purple {color: #9141b2  !important; }
.purple_darker {color: #a770b8  !important; }
.red {color: #ff0000  !important; }
.white {color: #ffffff  !important; }
.yellow {color: #ffff00 !important; }
.color_label {color: #008fff; }
/*End Color Overrides*/

@media screen and (max-width: 430px) {
  div#container_navigation {
    a#trigram {
      display: block;
    }
    a:not(#home, #trigram) {
      display: none;
    }
    &.trigram_open {
      grid-area: 1/1;
      a:not(#home, #trigram) {
        display: block;
        grid-column: span 12;
      }
      a#logout {
        grid-area: 2/1/2/12;
      }
      a#privacy_policy {
        grid-area: 3/1/3/12;
      }
      a#risk_questionnaire {
        grid-area: 4/1/4/12;
      }
    }
  }
  form#portfolio_form {
    #blurb {
      grid-column: 1/7;
      margin: 10px;
      text-align: center;
    }
    #submit_button {
      grid-column: 3/5;
      width: 100%;
    }
  }
  form#risk_questionnaire {
    h1 {
      grid-column: span 12;
      text-align: center;
      font-size: 8vw;
    }
    img#questionmark {
      grid-column: 1/-1;
      justify-self: center;
    }
    input, select {
      grid-column: 2/11;
      &#submit {
        grid-area: revert;
        grid-column: 8/11;
      }
    }
    label {
      grid-column: 2;
      text-align: left;
    }
  }
}

/*Dialog Warning*/
#dialog_warning {background-color: whitesmoke; max-width: 50vw; }
#dialog_warning_text {font-size: 20px; grid-column: span 2; padding-bottom: 20px; }
#dialog_warning:open {display: grid; grid-template-columns: repeat(2, 1fr); }
#dialog_warning:open::backdrop {backdrop-filter: blur(2px); }
#dialog_warning_button_cancel {background-color: red; color: black; font-weight: bolder; &:hover {color: #bbbbbb; background-color: white; } }
#dialog_warning_button_proceed {background-color: #00ff22; color: black; font-weight: bolder; &:hover {color: #bbbbbb; background-color: white; } }
.close {grid-column: span 1; width: 50%; justify-self: center; border: 2px solid black; }
.sure {grid-column: span 2; font-size: 24px; font-weight: bolder; text-align: center; }
#exclamation_triangle {height: 60px; }
#container_exclamation_triangle {text-align: center; grid-column: span 2; }
/*End Dialog Warning*/

/*Snackbar*/
#snackbar {visibility: hidden; min-width: 250px; margin-left: -125px; background-color: #333; color: #fff; text-align: center; border-radius: 2px; padding: 16px; position: fixed; z-index: 1; left: 50%; bottom: 30px; font-size: 17px; }
#snackbar.show {visibility: visible; -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; animation: fadein 0.5s, fadeout 0.5s 2.5s; }
@-webkit-keyframes fadein {from {bottom: 0; opacity: 0;} to {bottom: 30px; opacity: 1;} }
@keyframes fadein {from {bottom: 0; opacity: 0;} to {bottom: 30px; opacity: 1;} }
@-webkit-keyframes fadeout {from {bottom: 30px; opacity: 1;} to {bottom: 0; opacity: 0;} }
@keyframes fadeout {from {bottom: 30px; opacity: 1;} to {bottom: 0; opacity: 0;} }
/*End Snackbar*/