/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
.button {
  display: inline-block;
  margin: 0.5em 0;
  border: 0;
  border-radius: 0.5rem;
  background-color: hsl(260, 60%, 60%);
  cursor: pointer;
  padding: 1em 1.25em;
  color: hsl(0, 100%, 100%);
  font-size: 0.8rem;
  font-weight: bold;
  /* USER BUTTON STATES */
  /* DATA BUTTON STATES */
}
.button:focus {
  outline: none;
}
.button.white {
  background-color: hsl(0, 100%, 100%);
  color: hsl(260, 60%, 60%);
}
.button.pass {
  background-color: hsl(144, 45%, 36%);
}
.button.fail {
  background-color: hsl(38, 100%, 55%);
}
.button:disabled {
  box-shadow: none;
}
.button.transparent {
  background-color: transparent;
}
.button.large {
  border-radius: 0.25rem;
  font-size: 1rem;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 0.75rem 1.25rem 0.8125rem;
}
.button.icon-right img {
  height: 1.25rem;
  margin-bottom: -0.25rem;
  margin-left: 0.5rem;
  margin-right: -0.25rem;
}

.forms-close-button {
  padding: 0;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  border-radius: 1rem;
  background-color: hsla(0, 0%, 0%, 0.1);
  cursor: pointer;
  width: 2rem;
  height: 2rem;
  text-align: center;
  line-height: 2rem;
}

.forms-close-button img {
  padding-top: 0.5rem;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 480px;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 768px;
  }
}
@media only screen and (min-width : 942px) {
  .inner {
    margin: 0 auto;
    width: 942px;
  }
}
.row label {
  font-weight: 500;
}

.input {
  transition: all 0.5s ease;
  margin-bottom: 0.75rem;
  border: 1px solid hsla(0, 0%, 0%, 0.1);
  border-radius: 5px;
  background-color: hsl(0, 0%, 98%);
  padding: 0 1rem;
  height: 3rem;
  color: hsl(225, 15%, 40%);
  font-size: 0.875rem;
  /* IE10/11-specific style resets */
}
.input:focus {
  transition: all 0.5s ease;
  outline: none;
  border: 1px solid hsl(260, 60%, 60%);
}
.input.fail {
  border: 1px solid hsl(20, 100%, 40%);
}
.input.pass {
  border: 1px solid hsl(144, 45%, 36%);
}
.input::-ms-reveal, .input::-ms-clear {
  display: none;
}
/*
 * Styles for the Row component used by formsy-react-components
 * Should be imported for each component that extends one of
 * the formsy-react-components
 */
.row .required-symbol {
  display: none;
}
.row label {
  display: inline-block;
  margin-bottom: 0.75rem;
}
.row.no-label label {
  display: none;
}

/* allow elements such as validation errors to position relative to this row */
.row-with-tooltip {
  position: relative;
}

.row-label {
  margin-bottom: 0.75rem;
  line-height: 1.7rem;
}

.row-inline {
  display: flex;
}

/* override margin-bottom so placing a label next to a radio button does not
mess up vertical alignment */
.row-inline label {
  margin-bottom: 0;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 480px;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 768px;
  }
}
@media only screen and (min-width : 942px) {
  .inner {
    margin: 0 auto;
    width: 942px;
  }
}
.dropdown {
  display: none;
  position: absolute;
  right: 0;
  border: 1px solid hsla(0, 0%, 0%, 0.1);
  border-radius: 0 0 5px 5px;
  background-color: hsl(260, 60%, 60%);
  padding: 10px;
  min-width: 9rem;
  max-width: 16.25rem;
  overflow: visible;
  color: hsl(0, 100%, 100%);
  font-size: 0.8125rem;
  font-weight: normal;
}
.dropdown.open {
  display: block;
}
.dropdown a:link, .dropdown a:visited, .dropdown a:active {
  background-color: transparent;
  color: hsl(0, 100%, 100%);
}
.dropdown input {
  margin-bottom: 12px;
  width: calc(100% - 30px);
}
.dropdown label {
  display: block;
  margin-bottom: 5px;
}
.dropdown > li {
  display: block;
  line-height: 30px;
}
.dropdown > li.divider {
  margin-top: 10px;
  border-top: 1px solid hsla(0, 0%, 0%, 0.1);
}
.dropdown > li a {
  display: block;
  padding: 0 10px;
}
.dropdown > li a:hover {
  background-color: hsla(0, 0%, 0%, 0.1);
  text-decoration: none;
}
.dropdown.with-arrow {
  margin-top: 14px;
  border-radius: 5px;
  overflow: visible;
}
.dropdown.with-arrow:before {
  display: block;
  position: absolute;
  top: -7px;
  right: 10%;
  transform: rotate(45deg);
  border-top: 1px solid hsla(0, 0%, 0%, 0.1);
  border-left: 1px solid hsla(0, 0%, 0%, 0.1);
  border-radius: 5px;
  background-color: hsl(260, 60%, 60%);
  width: 14px;
  height: 14px;
  content: "";
}
.studio-status-icon-spinner {
  /* This class can be used on an icon that should spin.
  It first plays the intro animation, then spins forever. */
  animation-name: intro, spin;
  animation-duration: 0.25s, 1s;
  animation-timing-function: cubic-bezier(0.3, -3, 0.6, 3), cubic-bezier(0.4, 0.1, 0.4, 1);
  animation-delay: 0s, 0.25s;
  animation-iteration-count: 1, infinite;
  animation-direction: normal;
  width: 1.4rem; /* standard is 1.4 rem but can be overwritten by parent */
  height: 1.4rem;
  transform-origin: center;
}

@keyframes intro {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(359deg);
  }
}
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 480px;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 768px;
  }
}
@media only screen and (min-width : 942px) {
  .inner {
    margin: 0 auto;
    width: 942px;
  }
}
.flex-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}
.flex-row.column {
  flex-direction: column;
  justify-content: center;
}
.flex-row.uneven {
  align-items: flex-start;
}
.flex-row.uneven .short {
  width: 13.75em;
}
.flex-row.uneven .long {
  width: 38.75em;
  text-align: left;
}
@media only screen and (max-width : 767px) {
  .flex-row {
    flex-direction: column;
  }
  .flex-row.uneven .short,
  .flex-row.uneven .long {
    margin: auto;
    width: 90%;
  }
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
.login {
  padding: 10px;
  width: 200px;
  line-height: 1.5rem;
  white-space: normal;
  color: hsl(0, 100%, 100%);
  font-size: 0.8125rem;
}
.login .button {
  padding: 0.75em;
}
.login .row {
  margin-bottom: 1.25rem;
}
.login .input {
  margin-bottom: 12px;
  width: calc(100% - 30px);
  height: 2.25rem;
}
.login label {
  padding-top: 5px;
  font-weight: bold;
}
.login .spinner {
  margin: 0 0.8rem;
  width: 1rem;
  vertical-align: middle;
}
.login .submit-row {
  justify-content: space-between;
  flex-direction: row;
}
.login .submit-button {
  margin-top: 5px;
}
.login a {
  margin: auto 0;
  color: hsl(0, 100%, 100%);
}
.login a:link, .login a:visited, .login a:active {
  color: hsl(0, 100%, 100%);
}
.login a:hover {
  background-color: transparent;
}
.login .error {
  border: 1px solid hsla(0, 0%, 0%, 0.2);
  border-radius: 5px;
  background-color: hsl(38, 100%, 55%);
  padding: 0.75em 1em;
}

/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 480px;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 768px;
  }
}
@media only screen and (min-width : 942px) {
  .inner {
    margin: 0 auto;
    width: 942px;
  }
}
.overflow-hidden {
  /* to avoid double scroll bars this
  gets added to body while modal is open */
  overflow: hidden;
}

.modal-content {
  position: relative;
  margin: 3.75rem auto;
  border-radius: 1rem;
  box-shadow: 0 0 0 4px hsla(0, 100%, 100%, 0.15);
  background-color: hsl(0, 100%, 100%);
  padding: 0;
  width: 48.75rem;
}
.modal-content:focus {
  outline: none;
}
@media only screen and (max-width : 941px) {
  .modal-content {
    margin-top: 0;
    width: 100%;
    overflow: auto;
  }
}
@media only screen and (max-width : 479px), only screen and (max-height : 479px) {
  .modal-content {
    border-radius: 0;
    box-shadow: none;
    height: 100%;
  }
}

.modal-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 510;
  background-color: hsla(215, 100%, 65%, 0.7);
}

.modal-content-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  border-radius: 1rem;
  background-color: hsla(0, 0%, 0%, 0.2);
  cursor: pointer;
  width: 2rem;
  height: 2rem;
  text-align: center;
  line-height: 2rem;
}

.modal-content-close-img {
  padding-top: 0.5rem;
}

/* Close button, Submit button, etc. */
.action-buttons {
  display: flex;
  margin: 1.125rem 0.8275rem 0.9375rem 0.8275rem;
  line-height: 1.5rem;
  justify-content: flex-end !important;
  align-items: flex-start;
  flex-wrap: nowrap;
}
@media only screen and (max-width : 941px) {
  .action-buttons {
    justify-content: center !important;
    flex-direction: row !important;
  }
}

/* setting overall modal to contain overflow looks good, but isn't
compatible with elements (like validation popups) that need to bleed
past modal boundary. This class can be used to force modal button
row to appear to contain overflow. */
.action-buttons-overflow-fix {
  margin-bottom: 0.9375rem;
}

/* For action button row where left/right margin is handled by parent element */
.action-buttons.action-buttons-no-inset {
  margin-left: 0;
  margin-right: 0;
}

.action-button {
  margin: 0 0 0 0.54625rem;
  border-radius: 0.25rem;
  padding: 6px 1.25rem 14px 1.25rem;
  height: 36px;
}

.action-button.close-button {
  border: 1px solid hsla(0, 0%, 0%, 0.1);
}

.action-button-text {
  display: flex;
}

.action-button.disabled {
  background-color: hsla(0, 0%, 0%, 0.2);
}

.error-text {
  display: block;
  border: 1px solid hsla(0, 0%, 0%, 0.1);
  border-radius: 5px;
  background-color: hsl(38, 100%, 55%);
  padding: 1rem;
  min-height: 1rem;
  overflow: visible;
  color: hsl(0, 100%, 100%);
}

.modal-sizes * {
  box-sizing: border-box;
}

.modal-sizes {
  margin: 100px auto;
  outline: none;
  padding: 0;
  max-width: 36.25rem; /* 580px; */
  user-select: none;
}
@media only screen and (min-width : 480px) and (max-width : 767px), only screen and (min-height : 480px) and (max-height : 767px) {
  .modal-sizes {
    margin: 40px auto;
  }
}
@media only screen and (max-width : 479px), only screen and (max-height : 479px) {
  .modal-sizes {
    margin: 0 auto;
    width: auto;
  }
}
.modal-sizes .modal-header {
  padding-top: 0.75rem;
  width: 100%;
  height: 3rem;
}
@media only screen and (max-width : 479px), only screen and (max-height : 479px) {
  .modal-sizes .modal-header {
    border-radius: 0;
  }
}
.modal-sizes .modal-content {
  font-size: 0.875rem;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
#navigation {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  border-bottom: 1px solid hsla(0, 0%, 0%, 0.1);
  box-shadow: 0 0 3px hsla(0, 0%, 0%, 0.25);
  background-color: hsl(260, 60%, 60%);
  width: 100%;
  /* NOTE: Height should match offset settings in main.scss file */
  height: 50px;
}
.ie9 #navigation {
  display: table;
  table-layout: fixed;
}
#navigation .inner > ul {
  display: flex;
  margin: 0;
  padding: 0;
  height: 50px;
  list-style: none;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: flex-start;
}
.ie9 #navigation .inner > ul {
  display: table-row;
}
#navigation .inner > ul > li {
  display: inline-block;
  position: relative;
  float: left;
  margin: 0;
  height: 100%;
  align-self: flex-start;
}
#navigation .inner > ul > li.right {
  float: right;
  margin-left: auto;
  align-self: flex-end;
}
.ie9 #navigation .inner > ul > li.right {
  float: none;
}
#navigation .inner > ul > li.right a:hover {
  background-color: hsla(0, 0%, 0%, 0.1);
}
.ie9 #navigation .inner > ul > li {
  display: table-cell;
  float: none;
  height: 50px;
  vertical-align: bottom;
}
#navigation .link > a {
  display: block;
  padding: 13px 15px 4px 15px;
  height: 33px;
  text-decoration: none;
  white-space: nowrap;
  color: hsl(0, 100%, 100%);
  font-size: 0.85rem;
  font-weight: bold;
}
#navigation .link > a:hover {
  background-color: hsla(0, 0%, 0%, 0.1);
}
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 480px;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 768px;
  }
}
@media only screen and (min-width : 942px) {
  .inner {
    margin: 0 auto;
    width: 942px;
  }
}
.modal-content-iframe {
  border: 0;
}
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 480px;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 768px;
  }
}
@media only screen and (min-width : 942px) {
  .inner {
    margin: 0 auto;
    width: 942px;
  }
}
.modal-content.mod-registration {
  width: 38.125rem;
  overflow: hidden;
}

.modal-content-iframe.mod-registration {
  width: 38.125rem;
  min-height: 27.375rem;
}

.modal-content.recaptcha-open {
  min-height: 500px;
}

.modal-content-iframe.recaptcha-open {
  min-height: 500px;
}

@media only screen and (max-width : 941px) {
  .modal-content.mod-registration {
    width: 100%;
    overflow: scroll;
  }
  .modal-content-iframe.mod-registration {
    height: 27.375rem;
  }
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 480px;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 768px;
  }
}
@media only screen and (min-width : 942px) {
  .inner {
    margin: 0 auto;
    width: 942px;
  }
}
.account-nav .user-info {
  display: inline-block;
  padding: 14px 15px 4px 15px;
  max-width: 260px;
  height: 33px;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: hsl(0, 100%, 100%);
  font-size: 0.8125rem;
  font-weight: normal;
}
.account-nav .user-info .avatar {
  margin-right: 10px;
  border-radius: 3px;
  width: 24px;
  height: 24px;
  vertical-align: middle;
}
.account-nav .user-info:hover {
  background-color: hsla(0, 0%, 0%, 0.1);
}
.account-nav .user-info.open {
  background-color: hsla(0, 0%, 0%, 0.1);
}
.account-nav .user-info:after {
  display: inline-block;
  margin-left: 8px;
  background-image: url("/images/dropdown.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50%;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  content: " ";
}
.account-nav .dropdown {
  top: 50px;
  padding: 0;
  padding-top: 5px;
  width: 100%;
  box-sizing: border-box;
}

@media only screen and (max-width : 479px) {
  .account-nav {
    margin-left: 0;
  }
  .account-nav .user-info .avatar {
    margin-right: 0;
  }
  .account-nav .user-info:after {
    display: none;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  .account-nav {
    margin-left: 0;
  }
  .account-nav .user-info .avatar {
    margin-right: 0;
  }
  .account-nav .user-info:after {
    display: none;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  .account-nav {
    margin-left: 0;
  }
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 480px;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 768px;
  }
}
@media only screen and (min-width : 942px) {
  .inner {
    margin: 0 auto;
    width: 942px;
  }
}
#navigation .logo {
  margin-right: 10px;
}
#navigation .logo a {
  display: block;
  transition: 0.15s ease all;
  margin: 0 6px 0 0;
  border: 0;
  background-image: url("/images/logo_sm.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 95%;
  width: 81px;
  height: 50px;
}
#navigation .logo a:hover {
  transition: 0.15s ease all;
  background-size: 100%;
}
#navigation .inner > ul > li.search {
  margin: 0 20px;
  border-right: 0;
  color: hsl(0, 100%, 100%);
  flex-grow: 3;
}
.ie9 #navigation .inner > ul > li.search {
  width: 100%;
}
#navigation .inner > ul > li.search .form {
  margin: 0;
}
#navigation .inner > ul > li.search .row .help-block {
  display: none;
}
#navigation .inner > ul > li.search .input,
#navigation .inner > ul > li.search .button {
  display: inline-block;
  margin-top: 5px;
  outline: none;
  border: 0;
  background-color: hsla(0, 0%, 0%, 0.1);
  height: 14px;
}
#navigation .inner > ul > li.search .input[type=text],
#navigation .inner > ul > li.search .button[type=text] {
  transition: 0.15s ease background-color;
  padding: 0;
  padding-right: 10px;
  padding-left: 40px;
  width: calc(100% - 50px);
  height: 40px;
  color: hsl(0, 100%, 100%);
  font-size: 0.85em;
}
#navigation .inner > ul > li.search .input[type=text]::placeholder,
#navigation .inner > ul > li.search .button[type=text]::placeholder {
  color: rgba(255, 255, 255, 0.75);
}
#navigation .inner > ul > li.search .input[type=text]:focus,
#navigation .inner > ul > li.search .button[type=text]:focus {
  transition: 0.15s ease background-color;
  background-color: hsla(0, 0%, 0%, 0.2);
}
.ie9 #navigation .inner > ul > li.search .input[type=text],
.ie9 #navigation .inner > ul > li.search .button[type=text] {
  width: 70px;
}
#navigation .inner > ul > li.search .btn-search {
  position: absolute;
  box-shadow: none;
  background-color: transparent;
  background-image: url("/images/nav-search-glass.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 14px 14px;
  width: 40px;
  height: 40px;
}
#navigation .inner > ul > li.search .btn-search:hover {
  box-shadow: none;
}
#navigation .messages > a,
#navigation .mystuff > a {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 45%;
  padding-right: 10px;
  padding-left: 10px;
  width: 30px;
  overflow: hidden;
  text-indent: 50px;
  white-space: nowrap;
}
#navigation .messages > a:hover,
#navigation .mystuff > a:hover {
  background-size: 50%;
}
#navigation .messages > a {
  background-image: url("/images/nav-notifications.png");
}
#navigation .messages .message-count {
  display: none;
}
#navigation .messages .message-count.show {
  display: block;
  position: absolute;
  top: 0.5rem;
  right: 0.25rem;
  border-radius: 1rem;
  background-color: hsl(38, 100%, 55%);
  padding: 0 0.25rem;
  text-indent: 0;
  line-height: 1rem;
  color: hsl(0, 100%, 100%);
  font-size: 0.7rem;
  font-weight: bold;
}
#navigation .mystuff > a {
  background-image: url("/images/mystuff.png");
}

@media only screen and (max-width : 479px) {
  #navigation .inner {
    width: 18.75em;
  }
  #navigation .inner > ul > li.login-item {
    margin-left: 0;
  }
  #navigation .inner .create,
  #navigation .inner .discuss,
  #navigation .inner .explore,
  #navigation .inner .search,
  #navigation .inner .help,
  #navigation .inner .mystuff,
  #navigation .inner .profile-name {
    display: none;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  #navigation .inner {
    width: 28.75em;
  }
  #navigation .inner > ul > li.login-item {
    margin-left: 0;
  }
  #navigation .inner .discuss,
  #navigation .inner .explore,
  #navigation .inner .search,
  #navigation .inner .mystuff,
  #navigation .inner .profile-name {
    display: none;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  #navigation .inner {
    width: 38.75em;
  }
  #navigation .inner > ul > li.login-item {
    margin-left: 0;
  }
  #navigation .inner .explore,
  #navigation .inner .search,
  #navigation .inner .mystuff {
    display: none;
  }
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
#footer {
  display: block;
  background-color: hsl(0, 0%, 95%);
  padding: 10px 0;
  color: hsl(225, 15%, 40%);
  font-size: 0.85rem;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 480px;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 768px;
  }
}
@media only screen and (min-width : 942px) {
  .inner {
    margin: 0 auto;
    width: 942px;
  }
}
.select label {
  font-weight: 500;
}
.select select {
  transition: border 0.5s ease;
  margin-bottom: 0.75rem;
  border: 1px solid hsla(0, 0%, 0%, 0.1);
  border-radius: 5px;
  background: hsl(0, 0%, 98%) url("/svgs/forms/caret.svg") no-repeat right center;
  padding-right: 4rem;
  padding-left: 1rem;
  width: 100%;
  height: 3rem;
  color: hsl(225, 15%, 40%);
  font-size: 0.875rem;
  appearance: none;
  -webkit-appearance: none; /* added to fix dropdown appearance on safari */
}
.select select::-ms-expand {
  display: none;
}
.select select::-ms-value {
  background-color: inherit;
  padding-left: 1rem;
  color: inherit;
}
.select select:focus {
  outline: none;
  border: 1px solid hsl(260, 60%, 60%);
}
.select select:-moz-focusring {
  text-shadow: 0 0 0 hsl(225, 15%, 40%);
  color: transparent;
}
.select select:focus, .select select:hover {
  background: hsl(0, 0%, 98%) url("/svgs/forms/caret-hover.svg") no-repeat right center;
}
.select select > option {
  background-color: hsl(0, 100%, 100%);
  width: 100%;
}
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 480px;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 768px;
  }
}
@media only screen and (min-width : 942px) {
  .inner {
    margin: 0 auto;
    width: 942px;
  }
}
.language-chooser .select select {
  width: 13.75rem;
  /* 3 columns */
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 480px;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 768px;
  }
}
@media only screen and (min-width : 942px) {
  .inner {
    margin: 0 auto;
    width: 942px;
  }
}
#footer .lists {
  display: flex;
  text-align: center;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}
#footer .lists dl {
  display: inline-block;
  vertical-align: top;
  text-align: left;
  font-size: 0.8rem;
}
#footer .lists dt {
  display: block;
  margin-bottom: 8px;
}
#footer .lists dd {
  display: block;
  margin: 5px 0;
  line-height: 1.2rem;
}
#footer .lists dd a {
  font-weight: 400;
}
#footer .copyright {
  display: block;
  width: 100%;
  text-align: center;
}
#footer .copyright p {
  font-size: 0.7rem;
}
#footer .language-chooser {
  text-align: center;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 480px;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 768px;
  }
}
@media only screen and (min-width : 942px) {
  .inner {
    margin: 0 auto;
    width: 942px;
  }
}
#donor {
  color: hsl(225, 15%, 40%);
  font-size: 0.875rem;
  line-height: 1.5em;
  background-color: hsl(0, 0%, 95%);
  padding-bottom: 2.5rem;
  padding-top: 1rem;
}
#donor #donor-text {
  text-align: center;
  width: 58.75em;
  margin: 0 auto;
}

@media only screen and (min-width: 768px) and (max-width: 942px) {
  #donor #donor-text {
    width: 53.75em;
  }
}
@media only screen and (min-width: 480px) and (max-width: 768px) {
  #donor #donor-text {
    width: 28.75em;
  }
}
@media only screen and (max-width: 480px) {
  #donor #donor-text {
    width: 18.75em;
  }
}
.crash-container {
  /* UI Primary Colors */
  /* #FF661A */
  /* #CC4400 */
  /* UI Secondary Colors */
  /* 3.0 colors */
  /* Using www naming convention for now, should be consistent with gui */
  /* #CF63CF Sounds Primary */
  /* #BD42BD Sounds Tertiary */
  /* #BD42BD Sounds Tertiary */
  /* modals */
  /* Overlay UI Gray Colors */
  /* Typography Colors */
  /* Down Deep */
  /*
      Frameless           <http://framelessgrid.com/>
      by Joni Korpi       <http://jonikorpi.com/>
      licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
  */
  /* Media Queries */
  /* Width */
  /*
  * ... small | medium     | intermediate | big ...
  * ... medium-and-smaller |
  *          ... intermediate-and-smaller |
  */
  /* Height */
  margin: 3rem auto;
  border: 1px solid hsl(0, 0%, 85%);
  border-radius: 10px;
  background-color: hsl(0, 0%, 99%);
  width: 60%;
  overflow: hidden;
  text-align: center;
}
@media only screen and (max-width : 479px) {
  .crash-container #view {
    text-align: center;
  }
  .crash-container .inner {
    margin: 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  .crash-container #view {
    text-align: center;
  }
  .crash-container .inner {
    margin: 0 auto;
    width: 480px;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  .crash-container #view {
    text-align: center;
  }
  .crash-container .inner {
    margin: 0 auto;
    width: 768px;
  }
}
@media only screen and (min-width : 942px) {
  .crash-container .inner {
    margin: 0 auto;
    width: 942px;
  }
}
.crash-container img {
  width: 100%;
}
.crash-container .crash-message {
  margin: 2rem;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 480px;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 768px;
  }
}
@media only screen and (min-width : 942px) {
  .inner {
    margin: 0 auto;
    width: 942px;
  }
}
.title-banner {
  transition: background-image 0.5s ease, background-color 0.5s ease;
  margin-bottom: 40px;
  background-color: hsl(144, 45%, 36%);
  background-position: center;
  background-size: cover;
  padding: 20px 0;
  width: 100%;
}

.title-banner-h1,
.title-banner-p {
  margin: 0 auto;
  padding: 5px 0;
  text-align: center;
  color: hsl(0, 100%, 100%);
}

.title-banner-p {
  max-width: 500px;
}

.title-banner-strong {
  font-weight: 700;
}

.title-banner.mod-blue-bg {
  background-color: hsl(215, 100%, 65%);
}
.title-banner.mod-blue-bg a {
  color: hsl(0, 100%, 100%);
}
.title-banner.mod-blue-bg a.mod-underline {
  text-decoration: underline;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 480px;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 768px;
  }
}
@media only screen and (min-width : 942px) {
  .inner {
    margin: 0 auto;
    width: 942px;
  }
}
.privacy-aside {
  position: sticky;
}

.privacy-banner {
  display: flex;
  z-index: 8;
  background-color: hsl(260, 46%, 54%);
  padding: 0;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  margin-bottom: -50px;
  margin-top: 50px;
}
.privacy-banner .privacy-banner-container {
  display: flex;
  margin: 0.375rem auto;
  align-items: center;
}
.privacy-banner .privacy-banner-container .lightbulb-icon {
  margin: 0.6875rem;
  width: 1.75rem;
  height: 1.75rem;
}
.privacy-banner .privacy-banner-container .privacy-banner-centered {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.privacy-banner .privacy-banner-container .privacy-banner-text {
  text-align: left;
  color: hsl(0, 100%, 100%);
  font-size: 1rem;
  font-weight: bold;
  margin-right: 1rem;
  max-width: 70vw;
}
.privacy-banner .privacy-close-button {
  right: 1rem;
  top: auto;
}
.privacy-banner a {
  color: hsl(0, 100%, 100%);
  text-decoration: underline;
}

@media only screen and (max-width: 640px) {
  .privacy-banner .privacy-banner-container .privacy-banner-centered {
    flex-wrap: wrap;
  }
  .privacy-banner .privacy-banner-container .lightbulb-icon {
    padding-bottom: 2rem;
  }
  .privacy-banner .privacy-banner-container {
    margin-left: 0;
    margin-bottom: 1rem;
  }
  .privacy-banner .donate-close-button {
    top: 1rem;
  }
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
#view {
  position: relative;
  padding: 0;
  width: 100%;
}

.unsupported-browser {
  position: absolute;
  background-color: hsl(215, 100%, 65%);
  width: 100%;
  height: 100%;
  /* Confirmation buttons at the bottom of the modal */
}
.unsupported-browser h2 {
  font-size: 1.5rem;
}
.unsupported-browser .content {
  margin: 100px auto;
  outline: none;
  border: 0.25rem solid hsla(0, 100%, 100%, 0.15);
  border-radius: 0.5rem;
  padding: 0;
  width: 500px;
  overflow: hidden;
  color: hsl(225, 15%, 40%);
  user-select: none;
}
.unsupported-browser .illustration {
  background-color: hsl(215, 100%, 65%);
  background-image: url("/images/unsupported.png");
  background-size: cover;
  width: 100%;
  height: 208px;
}
.unsupported-browser [dir=rtl] .illustration {
  transform: scaleX(-1);
}
.unsupported-browser .body {
  background: hsl(0, 100%, 100%);
  padding: 1.5rem 2.25rem;
  text-align: center;
}
.unsupported-browser .button-row {
  display: flex;
  margin: 1.5rem 0;
  text-align: right;
  font-weight: bolder;
  justify-content: center;
}
.unsupported-browser .back-button {
  border: 1px solid hsl(260, 60%, 60%);
  border-radius: 0.25rem;
  background: hsl(260, 60%, 60%);
  cursor: pointer;
  padding: 0.5rem 2rem;
  color: hsl(0, 100%, 100%);
  font-size: 0.875rem;
  font-weight: bold;
}
.unsupported-browser .faq-link-text {
  margin: 2rem 0 0.5rem 0;
  color: hsl(225, 15%, 40%);
  font-size: 0.875rem;
}
.unsupported-browser .faq-link {
  text-decoration: none;
  color: hsl(260, 60%, 60%);
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
.admin-panel {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  border: 1px solid hsl(0, 0%, 95%);
  box-shadow: 0 2px 5px hsla(0, 0%, 0%, 0.25);
  background-color: hsl(0, 0%, 95%);
  padding: 1rem;
  width: 230px;
  height: 100%;
  overflow: scroll;
  text-shadow: none;
}
.admin-panel.collapsed {
  width: 10px;
}
.admin-panel .toggle {
  float: right;
  cursor: pointer;
}
.admin-panel .button-row {
  display: flex;
  font-size: small;
  align-items: center;
  justify-content: space-between;
}
.admin-panel .button-row .button {
  padding: 0.5rem 1rem;
}
.admin-panel .button-row .button.inprogress {
  background-color: hsl(0, 0%, 70%);
  color: hsl(225, 15%, 40%);
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
.commenting-status {
  border: 1px solid hsla(215, 100%, 65%, 0.1);
  border-radius: 8px;
  padding: 1.75rem 3rem 2rem;
  margin: 0.5rem 0 2rem;
  background-color: hsla(215, 100%, 65%, 0.1);
  text-align: center;
  box-sizing: border-box;
}
.commenting-status p {
  margin-bottom: 0;
  line-height: 1.75rem;
  max-width: 36rem;
}
.commenting-status .bottom-text {
  font-size: 0.875rem;
  width: 100%;
}
.commenting-status .status-icon-class {
  width: 28px;
  height: 28px;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
.banner-outer {
  display: flex;
  background-color: hsla(35, 90%, 55%, 0.25);
  width: 100%;
  min-height: 4rem;
  overflow: hidden;
  color: hsl(30, 100%, 55%);
  font-size: 0.875rem;
  font-weight: bold;
  align-self: center;
}

.banner-outer.banner-danger {
  background-color: hsla(35, 90%, 55%, 0.25);
  color: hsl(30, 100%, 55%);
}

.banner-outer.banner-success {
  background-color: rgba(126, 225, 195, 0.35);
  color: hsl(163, 69%, 44%);
}

.banner-inner {
  padding-top: 0.325rem;
  padding-bottom: 0.325rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
}

.banner-text {
  padding: 0.625rem 0;
  max-width: 50rem;
  line-height: 1.25rem;
}

.banner-button {
  border-radius: 0.25rem;
  background-color: hsl(38, 100%, 55%);
  padding-top: 0.6875rem;
  padding-bottom: 0.75rem;
  min-width: 6rem;
  max-width: 16rem;
  min-height: 2.5rem;
  max-height: 6rem;
  font-size: 0.875rem;
}

.banner-danger .banner-button {
  background-color: hsl(20, 100%, 55%);
}
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 480px;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 768px;
  }
}
@media only screen and (min-width : 942px) {
  .inner {
    margin: 0 auto;
    width: 942px;
  }
}
.mod-info-container {
  margin-bottom: 0.625rem; /* Match the extra padding below extension chips */
  flex-direction: column;
  align-items: flex-start;
}

.mod-info {
  line-height: 2rem;
  justify-content: flex-start;
}
@media only screen and (max-width : 767px) {
  .mod-info {
    margin: 0;
    width: 100%;
    justify-content: center;
    flex-direction: row;
  }
}
@media only screen and (max-width : 767px) {
  .mod-info > div {
    padding: 0 1rem;
  }
}

.mod-date,
.mod-sprites,
.mod-scripts,
.mod-username {
  display: inline;
  padding-right: 2rem;
  font-size: 0.875rem;
}
.mod-date:before,
.mod-sprites:before,
.mod-scripts:before,
.mod-username:before {
  display: inline-block;
  margin-right: 0.5rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: -0.35rem;
  content: "";
}

.mod-date:before {
  opacity: 0.5;
  background-image: url("/svgs/project/last-revised.svg");
}

.mod-sprites:before {
  opacity: 0.5;
  background-image: url("/svgs/project/sprite-count.svg");
}

.mod-scripts:before {
  opacity: 0.5;
  background-image: url("/svgs/project/block-count.svg");
}

.mod-username:before {
  opacity: 0.5;
  background-image: url("/svgs/project/username.svg");
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
.thumbnail {
  position: relative;
}
.thumbnail .thumbnail-image {
  display: block;
}
.thumbnail .thumbnail-image img {
  margin-bottom: 2px;
  border: 1px solid hsl(0, 0%, 85%);
}
.thumbnail .thumbnail-title,
.thumbnail .thumbnail-creator, .thumbnail .thumbnail-loves, .thumbnail .thumbnail-favorites, .thumbnail .thumbnail-remixes, .thumbnail .thumbnail-views {
  line-height: 1.2em;
  white-space: nowrap;
  word-wrap: break-word;
}
.thumbnail .thumbnail-title {
  margin-bottom: 1px;
  font-size: 0.923em;
  font-weight: 800;
}
.thumbnail .thumbnail-title a {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.thumbnail .thumbnail-creator, .thumbnail .thumbnail-loves, .thumbnail .thumbnail-favorites, .thumbnail .thumbnail-remixes, .thumbnail .thumbnail-views {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: hsl(225, 15%, 40%);
  font-size: 0.8462em;
}
.thumbnail .thumbnail-creator a, .thumbnail .thumbnail-loves a, .thumbnail .thumbnail-favorites a, .thumbnail .thumbnail-remixes a, .thumbnail .thumbnail-views a {
  display: inline;
}
.thumbnail .thumbnail-loves,
.thumbnail .thumbnail-favorites,
.thumbnail .thumbnail-remixes,
.thumbnail .thumbnail-views {
  display: inline;
  margin-right: 10px;
}
.thumbnail .thumbnail-loves:before,
.thumbnail .thumbnail-favorites:before,
.thumbnail .thumbnail-remixes:before,
.thumbnail .thumbnail-views:before {
  display: inline-block;
  margin-right: 0.1rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 0.93rem;
  height: 0.93rem;
  vertical-align: text-top;
  content: "";
}
.thumbnail .thumbnail-loves:before {
  background-image: url("/svgs/love/love_type-gray.svg");
}
.thumbnail .thumbnail-favorites:before {
  background-image: url("/svgs/favorite/favorite_type-gray.svg");
}
.thumbnail .thumbnail-remixes:before {
  background-image: url("/svgs/remix/remix_type-gray.svg");
}
.thumbnail .thumbnail-views:before {
  background-image: url("/svgs/view/view_type-gray.svg");
}
.thumbnail.project {
  width: 144px;
}
.thumbnail.project .thumbnail-image img {
  width: 144px;
  height: 108px;
}
.thumbnail.gallery {
  width: 170px;
}
.thumbnail.gallery img {
  width: 170px;
  height: 100px;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
.thumbnail-remove-button {
  position: absolute;
  top: -4px;
  right: -4px;
  background: hsl(0, 100%, 100%);
  border: 1px solid hsl(0, 0%, 85%);
  color: hsl(225, 15%, 40%);
  font-size: 12px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
}
.thumbnail-remove-button:hover {
  background: hsl(0, 0%, 85%);
}
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 480px;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 768px;
  }
}
@media only screen and (min-width : 942px) {
  .inner {
    margin: 0 auto;
    width: 942px;
  }
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
.thumbnail-column {
  margin: 0 auto;
  padding: 12px 0;
  justify-content: flex-start;
  flex-direction: column;
}
.thumbnail-column .thumbnail {
  margin: 7px;
  width: 220px;
}
.thumbnail-column .thumbnail .thumbnail-image {
  margin: 8px auto;
  border-radius: 4px;
  box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1);
  background-color: hsl(0, 100%, 100%);
  width: 204px;
}
.thumbnail-column .thumbnail .thumbnail-info {
  margin: 0 auto;
  width: 204px;
}
.thumbnail-column .thumbnail .thumbnail-info .creator-image {
  float: left;
}
.thumbnail-column .thumbnail .thumbnail-info .creator-image img {
  margin-right: 8px;
  border-radius: 4px;
  width: 32px;
  height: 32px;
}
.thumbnail-column .thumbnail .thumbnail-info .thumbnail-title {
  float: left;
  max-width: 164px;
  overflow: hidden;
  text-align: left;
}
.thumbnail-column .thumbnail .thumbnail-info .thumbnail-title .thumbnail-creator a {
  color: hsl(225, 15%, 40%);
}
.thumbnail-column .thumbnail .thumbnail-info .thumbnail-title a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: break-word;
}
.thumbnail-column .thumbnail.project {
  height: 208px;
}
.thumbnail-column .thumbnail.project .thumbnail-image {
  height: 152px;
}
.thumbnail-column .thumbnail.project .thumbnail-image img {
  margin: 0 auto;
  border: 0;
  border-radius: 4px;
  width: 204px;
  height: 152px;
}
.thumbnail-column .thumbnail.gallery {
  height: 164px;
}
.thumbnail-column .thumbnail.gallery .thumbnail-image {
  height: 120px;
}
.thumbnail-column .thumbnail.gallery .thumbnail-image img {
  border: 0;
  border-radius: 4px;
  width: 204px;
  height: 120px;
}
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 480px;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 768px;
  }
}
@media only screen and (min-width : 942px) {
  .inner {
    margin: 0 auto;
    width: 942px;
  }
}
.stats {
  line-height: 2rem;
  justify-content: flex-start;
}
@media only screen and (max-width : 767px) {
  .stats {
    margin: 0;
    width: 100%;
    justify-content: center;
    flex-direction: row;
  }
}
@media only screen and (max-width : 767px) {
  .stats > div {
    padding: 0 1rem;
  }
}

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.project-loves,
.project-favorites,
.project-remixes,
.project-views {
  display: flex;
  padding-right: 2rem;
  font-size: 1rem;
  font-weight: bold;
  align-items: center;
}
.project-loves:before,
.project-favorites:before,
.project-remixes:before,
.project-views:before {
  display: inline-block;
  margin-right: 0.5rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 1.75rem;
  height: 1.75rem;
  content: "";
}

.project-loves {
  cursor: pointer;
}
.project-loves:before {
  background-image: url("/svgs/project/love-gray.svg");
}

.project-loves.loved:before {
  background-image: url("/svgs/project/love-red.svg");
}

.project-favorites {
  cursor: pointer;
}
.project-favorites:before {
  background-image: url("/svgs/project/fav-gray.svg");
}

.project-favorites.favorited:before {
  background-image: url("/svgs/project/fav-yellow.svg");
}

.project-remixes:before {
  background-image: url("/svgs/project/remix-gray.svg");
}

.project-views:before {
  background-image: url("/svgs/project/views-gray.svg");
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 480px;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 768px;
  }
}
@media only screen and (min-width : 942px) {
  .inner {
    margin: 0 auto;
    width: 942px;
  }
}
.mod-addToStudio {
  min-height: 15rem;
  max-height: calc(100% - 5rem);
  /* Some value for height must be set for scrolling to work */
  height: 28rem;
  overflow: hidden;
}
@media only screen and (max-width : 479px), only screen and (max-height : 479px) {
  .mod-addToStudio {
    overflow: hidden;
    height: 100%;
    max-height: 100%;
  }
}

.addToStudio-modal-header {
  box-shadow: inset 0 -1px 0 0 hsl(215, 65%, 55%);
  background-color: hsl(215, 100%, 65%);
}

.addToStudio-modal-content {
  margin: 0 auto;
  box-shadow: none;
  width: 100%;
  height: calc(100% - 3rem);
}

.studio-list-outer-scrollbox {
  position: relative;
  background-color: hsla(215, 100%, 65%, 0.1);
  flex: 1;
  height: calc(100% - 5rem);
  /* Firefox requires min-height:0: #3775 */
  min-height: 0;
}

.studio-list-inner-scrollbox {
  margin-right: 0.5rem;
  padding-right: 0.5rem;
  height: 100%;
  overflow: scroll;
  overflow-x: hidden;
}
.studio-list-inner-scrollbox::-webkit-scrollbar {
  width: 8px;
}
.studio-list-inner-scrollbox::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: hsla(0, 0%, 0%, 0.2);
  height: 92px;
}
.studio-list-inner-scrollbox::-webkit-scrollbar-track {
  margin-top: 8px;
  margin-bottom: 10px;
}

.studio-list-container {
  display: flex;
  padding: 0.40625rem 0 0 1.46875rem;
  justify-content: flex-start;
  flex-flow: row wrap;
}

/* NOTE: force scrolling: add to above:
    min-height: 30rem;
*/
/* provides buffer at bottom of list, so that bottommost items
are not obscured by gradient overlay */
.studio-list-footer-spacer {
  height: 1.5rem;
}

.studio-list-bottom-gradient {
  position: absolute;
  right: 1rem;
  bottom: 0;
  left: 0;
  background: linear-gradient(rgba(229, 240, 254, 0), hsl(215, 100%, 95%));
  height: 32px;
  pointer-events: none; /* pass clicks through to buttons underneath */
}

.studio-selector-button {
  display: flex;
  position: relative;
  transition: all 0.5s;
  margin: 0.21875rem;
  border-radius: 0.5rem;
  background-color: hsl(0, 100%, 100%);
  cursor: pointer;
  padding: 0;
  width: 48%;
  height: 2.5rem;
  justify-content: space-between;
  align-items: center;
}
@media only screen and (max-width : 479px) {
  .studio-selector-button {
    min-width: 98%;
    flex-shrink: 1;
  }
}

.studio-selector-button-text {
  margin: auto 2.18375rem auto 0.6875rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.875rem;
  font-weight: regular;
  flex-shrink: 1;
}

.studio-selector-button-selected {
  background-color: hsl(163, 69%, 44%);
  color: hsl(0, 100%, 100%);
}

.studio-selector-button-waiting {
  background-color: hsl(163, 53%, 67%);
  color: hsl(0, 100%, 100%);
}

.studio-selector-button-text-selected {
  color: hsl(0, 100%, 100%);
}

.studio-selector-button-text-unselected {
  color: hsl(225, 15%, 40%);
}

.studio-selector-button-enabled {
  pointer-events: auto;
}

.studio-selector-button-disabled {
  pointer-events: none;
}

.studio-status-icon {
  position: absolute;
  right: 0.625rem;
  border-radius: 0.75rem;
  padding: 0.0625rem 0.075rem;
  width: 1.5rem;
  height: 1.5rem;
  color: hsl(0, 100%, 100%);
  box-sizing: border-box;
}

.studio-status-icon-unselected {
  background-color: hsl(260, 60%, 60%);
}

.submit-button {
  background-color: hsl(260, 60%, 60%);
}

.submit-button-waiting {
  background-color: hsl(260, 60%, 60%);
}

.studio-status-icon-plus-img,
.studio-status-icon-checkmark-img {
  animation-direction: normal;
  width: 1.4rem;
  height: 1.4rem;
  transform-origin: center;
}

.studio-status-icon-with-animation {
  animation-name: bump;
  animation-duration: 0.25s;
  animation-timing-function: cubic-bezier(0.3, -3, 0.6, 3);
  animation-iteration-count: 1;
}

@keyframes bump {
  0% {
    transform: scale(0);
    opacity: 0;
    -webkit-transform: scale(0);
  }
  100% {
    transform: scale(1);
    opacity: 1;
    -webkit-transform: scale(1);
  }
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
.modal-title {
  box-sizing: border-box;
  text-align: center;
  color: hsl(0, 100%, 100%);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  font-weight: bold;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 480px;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 768px;
  }
}
@media only screen and (min-width : 942px) {
  .inner {
    margin: 0 auto;
    width: 942px;
  }
}
.modal-inner-content {
  box-sizing: border-box;
  display: flex;
  border-radius: 0;
  flex-direction: column;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 480px;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 768px;
  }
}
@media only screen and (min-width : 942px) {
  .inner {
    margin: 0 auto;
    width: 942px;
  }
}
.mod-social {
  min-height: 15rem;
  max-height: calc(100% - 8rem);
  overflow: hidden;
}

.social-modal-header {
  border-radius: 1rem 1rem 0 0;
  box-shadow: inset 0 -1px 0 0 hsl(215, 65%, 55%);
  background-color: hsl(215, 100%, 65%);
}

.social-modal-content {
  box-shadow: none;
  width: 92%;
  height: calc(100% - 0rem);
  margin: 1rem auto 1.625rem;
  font-size: 0.9375rem;
}

.social-row {
  width: 100%;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  align-items: start;
}

.social-spaced-row {
  justify-content: space-between;
  align-items: flex-end;
}

.social-row-right {
  margin-left: auto;
}

.social-label-row {
  width: 100%;
  font-weight: bold;
  margin-bottom: 0.5rem;
  justify-content: space-between;
  align-items: flex-end;
}

.social-label-title {
  font-size: 1rem;
  margin-right: 1.5rem;
}

.social-label-item {
  margin-left: 1.5rem;
  margin-right: 0.25rem;
}

.social-label-result {
  color: hsla(225, 15%, 40%, 0.75);
  transition: opacity 100ms linear;
}

.link-section {
  margin-top: 0.5rem;
}

.embed-section {
  margin-top: 1rem;
}

.social-social-icon {
  width: 2.75rem;
  height: 2.75rem;
  margin-right: 0.75rem;
  background-repeat: no-repeat;
  background-size: contain;
}

.social-twitter-icon {
  background-image: url("/images/social/twitter.png");
}

.social-facebook-icon {
  background-image: url("/images/social/facebook.png");
}

.social-google-classroom-icon {
  background-image: url("/images/social/google-classroom.png");
}

.social-wechat-icon {
  background-image: url("/images/social/wechat.png");
}

.social-form {
  transition: all 0.2s ease;
  border: 2px solid hsla(0, 0%, 0%, 0.15);
  border-radius: 8px;
  background-color: hsla(215, 100%, 65%, 0.1);
  color: hsl(225, 15%, 40%);
  padding: 0.75rem 0.875rem;
  line-height: 1.25rem;
  font-size: 0.875rem;
  box-sizing: border-box;
  resize: none;
  overflow: hidden;
  width: 100%;
}
.social-form:focus {
  transition: all 0.2s ease;
  outline: none;
  border: 2px solid hsl(260, 60%, 60%);
  box-shadow: 0 0 0 4px hsla(260, 60%, 60%, 0.25);
}
.social-form.social-textarea {
  height: 6rem;
}
.social-form.social-input {
  height: 2.75rem;
}
.social-form textarea {
  min-height: 4rem;
}

.social-hidden {
  opacity: 0;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
.textarea {
  transition: all 1s ease;
  margin-bottom: 0.75rem;
  border: 1px solid hsla(0, 0%, 0%, 0.1);
  border-radius: 5px;
  background-color: hsl(0, 0%, 98%);
  padding: 0.75rem 1rem;
  width: 100%;
  min-height: 15rem;
  line-height: 1.75em;
  color: hsl(225, 15%, 40%);
  font-size: 0.875rem;
}
.textarea:focus {
  transition: all 1s ease;
  outline: none;
  border: 1px solid hsl(260, 60%, 60%);
}
.textarea.fail {
  border: 1px solid hsl(20, 100%, 40%);
}
.textarea::placeholder {
  font-style: italic;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 480px;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 768px;
  }
}
@media only screen and (min-width : 942px) {
  .inner {
    margin: 0 auto;
    width: 942px;
  }
}
.report-modal-header {
  box-shadow: inset 0 -1px 0 0 hsl(350, 100%, 60%);
  background-color: hsl(350, 100%, 70%);
}

.report-modal-content {
  margin: 1rem auto;
  width: 80%;
  font-size: 0.875rem;
}
.report-modal-content .instructions {
  line-height: 1.5rem;
}
.report-modal-content .instructions .instructions-header {
  font-weight: bold;
}
.report-modal-content .error-text {
  margin-top: 0.9375rem;
}
.report-modal-content .validation-message {
  display: block;
  position: relative;
  z-index: 1;
  margin-top: 1rem;
  border: 1px solid hsla(0, 0%, 0%, 0.1);
  border-radius: 5px;
  background-color: hsl(38, 100%, 55%);
  padding: 1rem;
  min-width: 12rem;
  min-height: 1rem;
  overflow: visible;
  color: hsl(0, 100%, 100%);
  /* arrow on box that points to the left */
}
@media only screen and (max-width : 767px) {
  .report-modal-content .validation-message {
    position: relative;
    margin-top: 0.5rem;
    max-width: 100%;
  }
}
.report-modal-content .validation-message:before {
  display: block;
  position: absolute;
  top: -0.5rem;
  left: calc(50% - 1rem / 2);
  transform: rotate(135deg);
  border-bottom: 1px solid hsla(0, 0%, 0%, 0.1);
  border-left: 1px solid hsla(0, 0%, 0%, 0.1);
  border-radius: 5px;
  background-color: hsl(38, 100%, 55%);
  width: 1rem;
  height: 1rem;
  content: "";
}
@media only screen and (max-width : 767px) {
  .report-modal-content .validation-message:before {
    display: none;
  }
}
.report-modal-content ul, .report-modal-content p {
  font-size: 0.875rem;
}

.report-modal-field {
  position: relative;
}

.form-group.has-error {
  margin-bottom: 1rem;
}
.form-group.has-error .textarea, .form-group.has-error select {
  margin: 0;
  border: 1px solid hsl(38, 100%, 55%);
}

.report-text .textarea {
  margin-bottom: 0;
  min-height: 8rem;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 480px;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 768px;
  }
}
@media only screen and (min-width : 942px) {
  .inner {
    margin: 0 auto;
    width: 942px;
  }
}
.validation-message {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(16rem, 0);
  margin-left: 1rem;
  border: 1px solid hsla(0, 0%, 0%, 0.1);
  border-radius: 5px;
  background-color: hsl(20, 100%, 40%);
  padding: 1rem;
  max-width: 18.75rem;
  min-height: 1rem;
  overflow: visible;
  color: hsl(0, 100%, 100%);
  z-index: 1;
  font-weight: 500;
}
.validation-message:before {
  display: block;
  position: absolute;
  top: 1rem;
  left: -0.5rem;
  transform: rotate(45deg);
  border-bottom: 1px solid hsla(0, 0%, 0%, 0.1);
  border-left: 1px solid hsla(0, 0%, 0%, 0.1);
  border-radius: 5px;
  background-color: hsl(20, 100%, 40%);
  width: 1rem;
  height: 1rem;
  content: "";
}

.validation-left {
  left: unset;
  right: 0;
  margin-left: unset;
  margin-right: 1rem;
  transform: translate(-16rem, 0);
}
.validation-left:before {
  left: unset;
  right: -0.5rem;
  border-top: 1px solid hsla(0, 0%, 0%, 0.1);
  border-right: 1px solid hsla(0, 0%, 0%, 0.1);
  border-bottom: none;
  border-left: none;
}

@media only screen and (max-width : 941px) {
  .validation-message {
    position: relative;
    transform: none;
    margin: inherit;
    width: 100%;
    height: inherit;
  }
  .validation-message:before {
    display: none;
  }
}
.validation-error {
  background-color: hsl(20, 100%, 40%);
}
.validation-error:before {
  background-color: hsl(20, 100%, 40%);
}

.validation-info {
  background-color: hsl(215, 65%, 55%);
  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.15);
}
.validation-info:before {
  background-color: hsl(215, 65%, 55%);
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 480px;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 768px;
  }
}
@media only screen and (min-width : 942px) {
  .inner {
    margin: 0 auto;
    width: 942px;
  }
}
.subactions {
  justify-content: flex-end;
  align-items: flex-start;
  flex: 1;
}
@media only screen and (max-width : 767px) {
  .subactions {
    margin-top: 1rem;
    width: 100%;
  }
}
.subactions .share-date {
  margin-right: 0.75rem;
  vertical-align: middle;
  line-height: 2rem;
  color: hsl(225, 15%, 40%);
  font-size: 0.875rem;
}
@media only screen and (max-width : 479px) {
  .subactions .share-date {
    margin-top: 0.5rem;
    width: 100%;
    order: 100;
  }
}
.subactions .share-date .copyleft {
  display: inline-block;
  transform: scale(-1, 1);
  margin: 0;
  text-align: right;
}
@media only screen and (max-width : 767px) {
  .subactions .share-date .copyleft {
    padding: 0;
  }
}
.subactions .action-buttons {
  display: flex;
  margin-top: 0;
  margin-bottom: 0;
  color: hsl(0, 100%, 100%);
  font-size: 0.8rem;
  font-weight: 500;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.subactions .action-buttons .action-button {
  margin: 0 0 0 0.5rem;
  border-radius: 19px;
  background-color: hsl(260, 60%, 60%);
  padding: 0 0.75rem;
  height: 2rem;
  text-decoration: none;
  line-height: 0.875rem;
  font-size: 0.75rem;
  font-weight: bold;
}
.subactions .action-buttons .action-button:active {
  filter: brightness(90%);
}
.subactions .action-buttons .action-button.studio-button:before, .subactions .action-buttons .action-button.copy-link-button:before, .subactions .action-buttons .action-button.report-button:before {
  display: inline-block;
  margin-right: 0.25rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 0.875rem;
  height: 0.875rem;
  vertical-align: bottom;
  content: "";
}
.subactions .action-buttons .action-button.studio-button:before {
  background-image: url("/svgs/project/studio-add-white.svg");
}
.subactions .action-buttons .action-button.copy-link-button:before {
  background-image: url("/svgs/project/copy-link-white.svg");
}
.subactions .action-buttons .action-button.report-button:before {
  background-image: url("/svgs/project/report-white.svg");
}

@media only screen and (max-width : 767px) {
  .subactions, .subactions .action-buttons {
    margin: 0;
    justify-content: center;
    flex-direction: row;
  }
}
@media only screen and (max-width : 767px) {
  .subactions > div, .subactions .action-button, .subactions .action-buttons > div, .subactions .action-buttons .action-button {
    padding: 0 1rem;
  }
}

.studio-button-error {
  top: auto;
  transform: none;
  width: 100%;
  margin-left: 0;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 480px;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 768px;
  }
}
@media only screen and (min-width : 942px) {
  .inner {
    margin: 0 auto;
    width: 942px;
  }
}
.inplace-input {
  transition: all 0.5s ease;
  border: 2px dashed hsla(215, 100%, 65%, 0.25);
  border-radius: 8px;
  background-color: transparent;
  padding: 0 1rem;
  width: calc(100% - 2.25rem);
  color: hsl(225, 15%, 40%);
  /* IE10/11-specific style resets */
}
.inplace-input:focus {
  transition: all 0.5s ease;
  outline: none;
  border: 2px solid hsl(260, 60%, 60%);
  box-shadow: 0 0 0 4px hsla(260, 60%, 60%, 0.25);
}
.inplace-input.fail {
  border: 1px solid hsl(20, 100%, 40%);
}
.inplace-input.pass {
  border: 1px solid hsla(0, 0%, 0%, 0.2);
}
.inplace-input::-ms-reveal, .inplace-input::-ms-clear {
  display: none;
}
.inplace-input::placeholder {
  font-style: italic;
}

.inplace-textarea {
  transition: all 0.2s ease;
  border: 2px dashed hsla(215, 100%, 65%, 0.25);
  border-radius: 8px;
  background-color: hsl(0, 0%, 98%);
  padding: 0.75rem 1rem;
  width: 100%;
  line-height: 1.75em;
  color: hsl(225, 15%, 40%);
  font-size: 1rem;
  box-sizing: border-box;
  resize: none;
}
.inplace-textarea:focus {
  transition: all 0.2s ease;
  outline: none;
  border: 2px solid hsl(260, 60%, 60%);
  box-shadow: 0 0 0 4px hsla(260, 60%, 60%, 0.25);
}
.inplace-textarea.fail {
  border: 1px solid hsl(20, 100%, 40%);
}
.inplace-textarea::placeholder {
  padding-top: 1rem;
  text-align: center;
  font-style: italic;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 24px;
  top: -0.125rem;
  margin-left: 0.625rem;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: hsl(0, 0%, 70%);
  border-radius: 12px;
  transition: 0.4s;
}

.toggle-switch .slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: hsl(0, 100%, 100%);
  border-radius: 50%;
  transition: 0.4s;
}

.toggle-switch input:checked + .slider {
  background-color: hsl(144, 45%, 36%);
}

.toggle-switch input:checked + .slider:before {
  transform: translateX(14px);
}
.emoji {
  max-width: 24px;
  vertical-align: middle;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 480px;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 768px;
  }
}
@media only screen and (min-width : 942px) {
  .inner {
    margin: 0 auto;
    width: 942px;
  }
}
.modal-mute {
  width: 30rem;
}
.modal-mute .mute-modal-header {
  box-shadow: inset 0 -1px 0 0 hsl(163, 69%, 44%);
  background-color: hsl(163, 69%, 44%);
  border-radius: 1rem 1rem 0 0;
}
.modal-mute .mute-step {
  display: flex;
  padding: 36px 16px 28px 16px;
}
.modal-mute .mute-content {
  padding-top: 16px;
  justify-content: flex-start;
}
.modal-mute .mute-inner-content {
  padding: 0 32px;
}
.modal-mute .left-column {
  align-items: flex-start;
  padding-right: 32px;
}
.modal-mute .mute-header {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 2rem;
}
.modal-mute .mute-bottom-row {
  padding-top: 12px;
}
.modal-mute .bottom-img {
  width: 380px;
}
.modal-mute .mute-side-image {
  margin-left: -49px;
}
.modal-mute .side-img {
  height: 212px;
  width: 129px;
}
.modal-mute .nav-divider {
  border-top: 1px solid hsla(215, 100%, 65%, 0.25);
}
.modal-mute .mute-nav {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  padding: 20px 0;
}
.modal-mute .feedback-nav {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: row-reverse;
  padding: 24px;
}
.modal-mute .feedback-nav button {
  margin: 0 4px;
}
.modal-mute .feedback-nav .close-button {
  background-color: hsl(0, 0%, 70%);
}
.modal-mute .back-button {
  margin-top: 0;
  margin-bottom: 0;
}
.modal-mute .next-button, .modal-mute .close-button {
  margin-left: auto;
  margin-top: 0;
  margin-bottom: 0;
}
.modal-mute .feedback-text {
  text-align: center;
}
.modal-mute #feedback-form, .modal-mute textarea {
  height: 180px;
  width: 100%;
}
.modal-mute textarea {
  padding: 1rem;
}
.modal-mute .character-limit {
  font-size: 0.75rem;
}
.modal-mute .validation-message {
  top: 52px;
  left: 36px;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
.formik-input {
  height: 2.75rem;
  border-radius: 0.5rem;
  background-color: hsl(0, 100%, 100%);
  margin-bottom: 0.5rem;
  transition: all 0.5s ease, font-size 0s;
  border: 1px solid hsla(0, 0%, 0%, 0.2);
  padding: 0 1rem;
  color: hsl(225, 15%, 40%);
  font-size: 0.875rem;
}
.formik-input:focus {
  box-shadow: 0 0 0 0.25rem hsla(260, 60%, 60%, 0.25);
  outline: none;
  border: 1px solid hsl(260, 60%, 60%);
  transition: all 0.5s ease, font-size 0s;
}
.formik-input.fail {
  border: 1px solid hsl(20, 100%, 40%);
}
.formik-input.fail:focus {
  box-shadow: 0 0 0 0.25rem hsla(20, 100%, 55%, 0.25);
  outline: none;
}
.formik-input::placeholder {
  font-style: italic;
  color: hsla(225, 15%, 40%, 0.6);
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
.compose-comment {
  margin-left: 0.5rem;
  width: 100%;
}
.compose-comment .compose-error-row {
  width: 100%;
  justify-content: flex-start;
}
.compose-comment .compose-error-row .compose-error-tip {
  margin-bottom: 0.5rem;
  border: 1px solid hsla(0, 0%, 0%, 0.1);
  border-radius: 5px;
  background-color: hsl(38, 100%, 55%);
  padding: 0.25rem;
  width: 100%;
  text-align: left;
  color: hsl(0, 100%, 100%);
  font-size: 0.85rem;
}
.compose-comment .full-width-form {
  width: 100%;
}
.compose-comment .textarea-row {
  width: 100%;
}
.compose-comment .textarea-row textarea:not(:focus) {
  border: 2px solid hsla(0, 0%, 0%, 0.2);
}
.compose-comment .compose-bottom-row {
  width: 100%;
  margin-top: 0.4rem;
  justify-content: space-between;
  flex-direction: row;
}
.compose-comment .compose-bottom-row .compose-post {
  margin-right: 0.5rem;
}
.compose-comment .compose-bottom-row .compose-cancel {
  background-color: hsl(0, 0%, 70%);
}
.compose-comment .compose-bottom-row .compose-limit {
  margin-left: auto;
  height: 100%;
  font-size: 0.75rem;
}
.compose-comment .compose-bottom-row .button {
  margin-left: 0;
  margin-top: 0;
  margin-bottom: 0;
  border-radius: 0.25rem;
}

.comment-container {
  position: relative;
  width: 100%;
  justify-content: flex-end;
}

.comment {
  position: relative;
  width: 100%;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
}
.comment.highlighted-comment:before {
  position: absolute;
  top: -0.5rem;
  left: -0.5rem;
  border-radius: 0.5rem;
  background: hsla(215, 100%, 65%, 0.1);
  width: calc(100% + 1rem);
  height: 100%;
  content: "";
  /* 
      Because this :before is absolutely positioned, it will eat clicks
      from non-absolute elements after it (like the author link).
      Prevent this by explicitly disabling pointer events on this background element.
  */
  pointer-events: none;
}
.comment .comment-top-row {
  margin-bottom: 8px;
  width: 100%;
  flex-direction: row;
}
.comment .comment-top-row .username {
  margin-right: auto;
}
.comment .comment-top-row .comment-delete,
.comment .comment-top-row .comment-report,
.comment .comment-top-row .comment-restore {
  opacity: 0.5;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 500;
}
.comment .comment-top-row .comment-delete:before,
.comment .comment-top-row .comment-report:before,
.comment .comment-top-row .comment-restore:before {
  display: inline-block;
  margin-right: 0.5rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  content: "";
}
.comment .comment-top-row .comment-visibility {
  opacity: 0.5;
  font-size: 0.75rem;
}
.comment .comment-top-row .comment-delete {
  margin-right: 1rem;
}
.comment .comment-top-row .comment-delete:before {
  background-image: url("/svgs/project/delete-gray.svg");
  width: 1rem;
  height: 1rem;
  vertical-align: -0.25rem;
}
.comment .comment-top-row .comment-report:before {
  margin-right: 0.25rem;
  background-image: url("/svgs/project/report-gray.svg");
  width: 0.75rem;
  height: 0.75rem;
  vertical-align: -0.125rem;
}
.comment .comment-top-row .comment-restore {
  margin-left: 1rem;
}
.comment .comment-top-row .comment-restore:before {
  margin-right: 0.25rem;
  background-image: url("/svgs/project/restore-gray.svg");
  width: 0.75rem;
  height: 0.75rem;
  vertical-align: -0.125rem;
}
.comment .avatar {
  margin-right: 0.5rem;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 1px rgba(77, 151, 255, 0.25);
  width: 3rem;
  height: 3rem;
}
.comment .comment-body {
  margin-bottom: 1.5rem;
  min-width: 50%;
  flex-grow: 1;
  align-items: flex-start;
}
.comment .comment-body .comment-bubble {
  position: relative;
  margin-left: 0.5rem;
  border: 1px solid hsla(0, 0%, 0%, 0.1);
  border-radius: 0 0.5rem 0.5rem 0.5rem;
  background-color: hsl(0, 100%, 100%);
  padding: 0.75rem;
  width: calc(100% - 0.5rem);
  box-sizing: border-box;
}
.comment .comment-body .comment-bubble:before {
  display: inline-block;
  position: absolute;
  top: -1px;
  left: -11px;
  border-width: 1px 0 1px 1px;
  border-style: solid;
  border-radius: 0 0 0 8px;
  border-color: hsla(0, 0%, 0%, 0.1) transparent hsla(0, 0%, 0%, 0.1) hsla(0, 0%, 0%, 0.1);
  background: hsl(0, 100%, 100%);
  width: 10px;
  height: 9px;
  content: "";
}
.comment .comment-body .comment-bubble.comment-bubble-reported {
  border-color: #ff6680;
  background-color: rgb(236, 206, 223);
}
.comment .comment-body .comment-bubble.comment-bubble-reported:before {
  border-color: #ff6680 transparent #ff6680 #ff6680;
  background: rgb(236, 206, 223);
}
.comment .comment-body .comment-bubble.comment-bubble-markedbyfilter {
  border-color: hsl(45, 100%, 50%);
  background-color: rgb(255, 254, 210);
}
.comment .comment-body .comment-bubble.comment-bubble-markedbyfilter:before {
  border-color: hsl(45, 100%, 50%) transparent hsl(45, 100%, 50%) hsl(45, 100%, 50%);
  background: rgb(255, 254, 210);
}
.comment .comment-body .comment-content {
  font-size: 1rem;
  line-height: 1.5rem;
  overflow-wrap: break-word;
  display: block;
  overflow: hidden;
}
.comment .comment-body .comment-bottom-row {
  padding-top: 1rem;
  font-size: 0.75rem;
  flex-direction: row;
  justify-content: space-between;
}
.comment .comment-body .comment-bottom-row .comment-time {
  color: hsl(0, 0%, 70%);
}
.comment .comment-body .comment-bottom-row .comment-reply {
  display: inline-flex;
  cursor: pointer;
  color: hsl(260, 60%, 60%);
  font-weight: bold;
}
.comment .comment-body .comment-bottom-row .comment-reply:after {
  margin-left: 0.25rem;
  background-image: url("/svgs/project/comment-reply.svg");
  background-size: cover;
  width: 1rem;
  height: 1rem;
  content: "";
}

.replies {
  width: calc(100% - 4rem);
}
.replies .comment-reply-row {
  margin-left: -3.5rem;
  width: calc(100% + 3.5rem);
}

.replies.collapsed > .comment:last-of-type:after {
  position: absolute;
  bottom: 0;
  background: linear-gradient(hsla(215, 100%, 95%, 0), hsl(215, 100%, 95%));
  width: 100%;
  height: 100%;
  content: "";
  pointer-events: none;
}

.thread-limit-status {
  width: calc(100% - 4rem);
  margin-left: auto;
}
.thread-limit-status .comment-status-icon {
  display: none;
}

.compose-disabled {
  opacity: 0.5;
}

.comments-root-reply {
  margin-bottom: 2rem;
}

.comment-reply-row {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  margin-left: 0.5rem;
  width: calc(100% - 0.5rem);
}

.expand-thread {
  margin-bottom: 24px;
  width: 100%;
  overflow: hidden;
  text-align: center;
}
.expand-thread:before, .expand-thread:after {
  display: inline-block;
  position: relative;
  background-color: hsla(0, 0%, 0%, 0.1);
  width: 50%;
  height: 2px;
  vertical-align: middle;
  content: "";
}
.expand-thread:before {
  right: 0.5em;
  margin-left: -50%;
}
.expand-thread:after {
  left: 0.5em;
  margin-right: -50%;
}

/* Hide the action list buttons (delete/report/restore) until hover over */
.comment .action-list {
  opacity: 0;
}

.comment:hover .action-list {
  opacity: 1;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 480px;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 768px;
  }
}
@media only screen and (min-width : 942px) {
  .inner {
    margin: 0 auto;
    width: 942px;
  }
}
.mod-report * {
  box-sizing: border-box;
}

.mod-report {
  margin: 100px auto;
  outline: none;
  padding: 0;
  width: 36.25rem; /* 580px; */
  user-select: none;
}

.report-modal-header {
  border-radius: 1rem 1rem 0 0;
  box-shadow: inset 0 -1px 0 0 hsl(20, 100%, 40%);
  background-color: hsl(20, 100%, 40%);
  padding-top: 0.75rem;
  width: 100%;
  height: 3rem;
  box-sizing: border-box;
}

.report-content-label {
  text-align: center;
  color: hsl(0, 100%, 100%);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  font-weight: bold;
}

.report-modal-content {
  margin: 1rem auto;
  width: 80%;
  font-size: 0.875rem;
}
.report-modal-content .instructions {
  line-height: 1.5rem;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
.extension-chip {
  display: flex;
  margin: 0 0.625rem 0.625rem 0;
  border-radius: 5px;
  background-color: hsla(215, 100%, 65%, 0.25);
  padding: 0.625rem;
  height: 3rem;
  flex-flow: row;
  box-sizing: border-box;
  align-items: center;
}
.extension-chip.has-status {
  background-color: hsla(35, 90%, 55%, 0.25);
}
.extension-chip .extension-icon {
  margin-right: 5px;
  width: 2rem;
  height: 2rem;
}
.extension-chip .extension-content {
  display: flex;
  margin: 0 5px;
  font-size: 0.875rem;
  justify-content: center;
  flex-flow: column;
  align-items: flex-start;
}
.extension-chip .extension-status {
  border-radius: 10px;
  background-color: hsl(38, 100%, 55%);
  padding: 0 5px;
  text-align: center;
  color: hsl(0, 100%, 100%);
  font-size: 0.675rem;
}
.extension-chip .extension-action {
  display: flex;
  justify-content: center;
  border-radius: 10px;
  background-color: hsl(215, 100%, 65%);
  padding: 0 5px;
  text-align: center;
  color: hsl(0, 100%, 100%);
  font-size: 0.675rem;
  font-weight: normal;
}
.extension-chip .extension-action img {
  width: 15px;
  height: 15px;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 480px;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 768px;
  }
}
@media only screen and (min-width : 942px) {
  .inner {
    margin: 0 auto;
    width: 942px;
  }
}
.email-confirmation-modal {
  border-radius: 4px;
  overflow: hidden;
  max-width: 500px;
}
.email-confirmation-modal h1 {
  font-size: 2rem;
  line-height: 2.5rem;
}
.email-confirmation-modal .modal-content-close {
  top: 5px;
  right: 5px;
}
.email-confirmation-modal .modal-main-content {
  display: flex;
}
.email-confirmation-modal .modal-text-content {
  margin-top: 30px;
  margin-bottom: 30px;
  margin-right: 20px;
  margin-left: 20px;
}
.email-confirmation-modal .modal-image {
  margin-left: -70px;
}
.email-confirmation-modal .top-close-bar {
  height: 44px;
  background-color: #0EBD8C;
}
.email-confirmation-modal .guide-footer {
  text-align: center;
  border-top: 1px solid rgba(77, 151, 255, 0.15);
  padding: 20px;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
.banner {
  position: sticky;
  top: 50px;
  z-index: 9;
  box-shadow: 0 1px 1px hsl(0, 0%, 70%);
  background-color: hsl(38, 100%, 55%);
  width: 100%;
  overflow: hidden;
  text-align: center;
  line-height: 50px;
}
.banner,
.banner a {
  color: hsl(0, 100%, 100%);
}
.banner a {
  text-decoration: underline;
}
.banner .close {
  float: right;
  margin-top: 12.5px;
  border-radius: 12.5px;
  background-color: hsla(0, 0%, 0%, 0.25);
  width: 25px;
  height: 25px;
  text-decoration: none;
  text-shadow: none;
  line-height: 25px;
  color: hsl(0, 100%, 100%);
  font-weight: normal;
}
.banner.warning {
  background-color: hsl(20, 100%, 40%);
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 480px;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 768px;
  }
}
@media only screen and (min-width : 942px) {
  .inner {
    margin: 0 auto;
    width: 942px;
  }
}
/* stage size constants */
/* override view padding for share banner */
#view {
  padding: 0;
  width: 100%;
}

.gui {
  position: absolute;
  top: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  /* Setting min height/width makes the UI scroll below those sizes */
  /* Copied from GUI playground index.css */
  min-width: 1024px;
  min-height: 640px; /* Min height to fit sprite/backdrop button */
}

.page-has-admin-panel {
  padding-left: 20px;
}

.page-has-admin-panel.admin-panel-open {
  padding-left: 250px;
}

.preview .inner {
  margin: 0 auto;
}
@media only screen and (max-width : 767px) {
  .preview .inner {
    max-width: calc(100% - 1rem);
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  .preview .inner {
    width: 90%;
    min-width: 640px;
  }
}
.preview .project-admin-panel {
  margin-top: 51px;
  border: 0;
  padding: 1rem;
  overflow: hidden;
}
.preview .project-admin-panel.admin-panel-open {
  padding: 0;
  width: 250px;
}
.preview .admin-iframe {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  margin: 0;
  border: 0;
  width: 250px;
  height: 100%;
}
.preview .admin-iframe.modal-open,
.preview .project-admin-panel.admin-panel-open.modal-open {
  background-color: transparent;
  width: 100%;
}
.preview .project-title {
  font-size: 1.75rem;
  font-weight: 500;
}
.preview .project-title.has-error .validation-message {
  right: 0;
}
.preview .project-title.no-edit {
  /* titles of projects you don't own should not
  show the full title if this is too long */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.preview .project-header {
  margin-right: 2rem;
  min-width: 0;
  flex-grow: 1;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
}
.preview .project-header .inplace-input {
  height: calc(3rem - 4px);
}
@media only screen and (max-width : 767px) {
  .preview .project-header {
    flex-direction: row;
  }
  .preview .project-header .inplace-input {
    width: calc(100% - 4rem);
  }
}
@media only screen and (max-width : 479px) {
  .preview .project-header {
    margin-right: 0;
  }
}
.preview img.avatar {
  border: 0;
  border-radius: 5px;
  width: 3rem;
  height: 3rem;
}
.preview img.avatar.remix {
  margin-right: 0.75em;
  width: 2rem;
  height: 2rem;
  align-self: flex-start;
}
.preview .title {
  margin-left: 1rem;
  min-width: 0;
  text-align: left;
  font-size: 0.8rem;
  flex-grow: 1;
}
@media only screen and (max-width : 767px) {
  .preview .title {
    min-width: calc(100% - 2rem - 4px);
  }
}
.preview .validation-message {
  display: block;
  position: absolute;
  z-index: 5;
  margin-top: 1rem;
  border: 1px solid hsla(0, 0%, 0%, 0.1);
  border-radius: 5px;
  padding: 1rem;
  max-width: 18.75rem;
  min-height: 1rem;
  overflow: visible;
  color: hsl(0, 100%, 100%);
  font-size: 1rem;
}
@media only screen and (max-width : 767px) {
  .preview .validation-message {
    margin-top: 0.5rem;
    width: 100%;
  }
}
.preview .validation-message:before {
  display: block;
  position: absolute;
  top: -0.5rem;
  left: calc(50% - 1rem / 2);
  transform: rotate(135deg);
  border-bottom: 1px solid hsla(0, 0%, 0%, 0.1);
  border-left: 1px solid hsla(0, 0%, 0%, 0.1);
  border-radius: 5px;
  width: 1rem;
  height: 1rem;
  content: "";
}
@media only screen and (max-width : 767px) {
  .preview .validation-message:before {
    display: none;
  }
}
.preview .row.has-error .inplace-input,
.preview .row.has-error .inplace-textarea {
  border: 1px solid hsl(38, 100%, 55%);
}
.preview .row .col-sm-9 {
  position: relative;
}
.preview .project-buttons {
  font-weight: bold;
  flex-shrink: 0;
}
.preview .button {
  margin-left: 1rem;
}
.preview .inplace-textarea::placeholder {
  padding: 0;
  text-align: start;
}
.preview .comments-container {
  padding-right: 1.5rem;
  min-width: 65%;
  max-width: 100%;
  flex: 1;
  overflow-anchor: none;
}
@media only screen and (max-width : 767px) {
  .preview .comments-container {
    padding: 0;
    width: 100%;
  }
}
.preview .comments-container .comment-bubble {
  text-align: left;
}
.preview .comments-container .comments-turned-off {
  border: 1px solid hsla(215, 100%, 65%, 0.25);
  border-radius: 0.5rem;
  background: hsla(215, 100%, 65%, 0.1);
  padding: 1.5rem 0;
  width: 100%;
  text-align: center;
}
.preview .comments-container .comments-allowed-input {
  margin-right: 3px;
}
.preview .comments-container .comment-placeholder-img {
  width: 100%;
}
.preview .remix-button,
.preview .see-inside-button {
  margin-top: 0;
  border-radius: 0.25rem;
  padding-top: 0.6875rem;
  padding-right: 0.9375rem;
  padding-bottom: 0.6875rem;
  padding-left: 0.875rem;
  height: 2.5rem;
  font-size: 0.875rem;
}
.preview .remix-button:before,
.preview .see-inside-button:before {
  display: inline-block;
  margin-top: -2px;
  margin-right: 0.4375rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 1.125rem;
  height: 1.125rem;
  vertical-align: middle;
  content: "";
}
.preview .remix-button {
  background-color: hsl(144, 45%, 36%);
}
.preview .remix-button:before {
  background-image: url("/svgs/project/remix-white.svg");
}
.preview .remix-button.disabled {
  opacity: 0.6;
}
.preview .remix-button.remixing:before {
  animation-name: remix-intro, remix-spin;
  animation-duration: 0.25s, 0.75s;
  animation-timing-function: cubic-bezier(0.3, -3, 0.6, 3), ease-out;
  animation-delay: 0s, 0.25s;
  animation-iteration-count: 1, infinite;
  animation-direction: normal;
  width: 1.25rem;
  height: 1.25rem;
  transform-origin: 55% 55%;
}
@keyframes remix-intro {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes remix-spin {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.preview .see-inside-button:before {
  background-image: url("/svgs/project/see-inside-white.svg");
}
.preview .preview-row {
  margin-top: 1rem;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
}
@media only screen and (max-width : 767px) {
  .preview .preview-row.force-row {
    flex-direction: row;
  }
}
.preview .preview-row .wrappable-item {
  margin-bottom: 0.5rem;
}
@media only screen and (max-width : 767px) {
  .preview .preview-row {
    margin-top: 0.5rem;
    align-items: center;
  }
}
.preview .guiPlayer {
  display: inline-block;
  position: relative;
  width: 482px;
  z-index: 1;
}
.preview .guiPlayer .project-info-alerts {
  position: absolute;
  z-index: 8;
  margin: 60px 15px 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.preview .guiPlayer .project-info-alert {
  border-radius: 0.25rem;
  background: rgba(255, 255, 255, 0.85);
  padding: 0.75rem;
  text-align: center;
  font-size: 0.95rem;
}
.preview .guiPlayer.fullscreen {
  z-index: 200;
}
@media only screen and (max-width : 479px) {
  .preview .guiPlayer {
    width: 100%;
  }
}
@media only screen and (max-width : 767px) {
  .preview .force-center {
    align-self: center;
  }
}
.preview .project-notes {
  margin-left: 1rem;
  height: calc(362px + 44px - 0.3125rem);
  align-items: flex-start;
  flex: 1;
  flex-flow: column;
  margin-top: 0.3125rem;
  overflow: auto;
}
@media only screen and (max-width : 767px) {
  .preview .project-notes {
    margin-top: 0.5rem;
    margin-left: 0;
    width: 100%;
  }
}
.preview .project-notes > * {
  margin-bottom: 0.75rem;
}
.preview .project-notes > .description-block:last-child {
  margin-bottom: 0;
}
.preview .remix-credit {
  margin-bottom: 1rem;
  border: 1px solid hsla(215, 100%, 65%, 0.1);
  border-radius: 8px;
  background-color: hsla(215, 100%, 65%, 0.1);
  padding: 0.75rem;
  width: calc(100% - 1.5rem - 2px);
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  /*
  Necessary to force Mac Safari to apply padding to the height of the
  child elements. See https://stackoverflow.com/a/52273082/2308190
  */
  min-height: max-content;
}
@media only screen and (max-width : 767px) {
  .preview .remix-credit {
    flex-direction: row;
    margin-bottom: 0.5rem;
  }
}
.preview .credit-text {
  font-size: 0.875rem;
  flex-shrink: 1;
  text-align: left;
  overflow: auto;
  overflow-wrap: break-word;
}
.preview .description-block {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: flex-start;
  /*
  necessary to fix flexbox sizing issue that caused instructions
  to flow over the top and bottom of the project notes section.
  see https://stackoverflow.com/a/36247448
  */
  min-height: 0;
}
.preview .project-textlabel {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  font-weight: bold;
}
.preview .project-description {
  margin-bottom: 0.75rem;
  border: 1px solid hsla(215, 100%, 65%, 0.1);
  border-radius: 8px;
  background-color: hsla(215, 100%, 65%, 0.1);
  padding: 0.5rem;
  width: calc(100% - (1rem + 2px));
  overflow: auto;
  white-space: pre-line;
  font-size: 1rem;
  line-height: 1.5rem;
  text-align: left;
  flex: 1;
  overflow-wrap: break-word;
}
@media only screen and (max-width : 767px) {
  .preview .project-description {
    text-align: center;
  }
}
.preview .project-description:last-of-type {
  margin-bottom: 0;
}
.preview .project-description-form {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 2rem;
  flex-grow: 1;
}
.preview .project-description-edit {
  display: flex;
  border: 1px solid hsla(215, 100%, 65%, 0.1);
  border-radius: 8px;
  background-color: hsla(215, 100%, 65%, 0.1);
  padding: 0.5rem;
  width: 100%;
  white-space: pre-line;
  flex: 1;
  /* Chrome <=56, Safari < 10 */
  /* FF 4-18 */
  /* FF 19-50 */
  /* IE 10+ */
  /* Modern Browsers */
}
.preview .project-description-edit.last {
  margin-bottom: 0;
}
.preview .project-description-edit.textarea-row {
  border: 0;
  background-color: inherit;
  padding: 0;
}
.preview .project-description-edit.has-error .validation-message {
  top: 100%;
  right: 0;
}
.preview .project-description-edit > .grow {
  display: flex;
  flex: 1;
}
.preview .project-description-edit .inplace-textarea {
  line-height: 1.5rem; /* Override 1.75 from form styling */
}
.preview .project-description-edit ::-webkit-input-placeholder { /* Chrome <=56, Safari < 10 */
  transition: opacity 0.25s;
  opacity: 1;
  -webkit-transition: opacity 0.25s;
}
.preview .project-description-edit :-moz-placeholder { /* FF 4-18 */
  transition: opacity 0.25s;
  opacity: 1;
  -moz-transition: opacity 0.25s;
}
.preview .project-description-edit ::-moz-placeholder { /* FF 19-51 */
  transition: opacity 0.25s;
  opacity: 1;
  -moz-transition: opacity 0.25s;
}
.preview .project-description-edit :-ms-input-placeholder { /* IE 10+ */
  transition: opacity 0.25s;
  opacity: 1;
  -ms-transition: opacity 0.25s;
}
.preview .project-description-edit ::placeholder { /* Modern Browsers */
  transition: opacity 0.25s;
  opacity: 1;
}
.preview .project-description-edit *:focus::-webkit-input-placeholder {
  opacity: 0;
}
.preview .project-description-edit *:focus:-moz-placeholder {
  opacity: 0;
}
.preview .project-description-edit *:focus::-moz-placeholder {
  opacity: 0;
}
.preview .project-description-edit *:focus:-ms-input-placeholder {
  opacity: 0;
}
.preview .project-description-edit *:focus::placeholder {
  opacity: 0;
}
.preview .comments-header {
  padding: 0 0 1rem 0;
  justify-content: space-between;
}
.preview .comments-header h4 {
  font-size: 1.25rem;
}
.preview .project-lower-container {
  margin-top: 1rem;
  background-color: hsla(215, 100%, 65%, 0.1);
  padding: 1rem 0;
  min-height: 6rem;
}
.preview .create-comment {
  margin-bottom: 2rem;
}
.preview .load-more-button {
  margin-left: 0;
  width: 100%;
}
.preview .extension-list {
  justify-content: flex-start;
  flex-direction: row;
}
@media only screen and (max-width : 767px) {
  .preview .extension-list {
    justify-content: center;
  }
}
.preview .remix-list,
.preview .studio-list {
  flex-direction: column;
  width: 14.625rem;
}
.preview .remix-list .list-header,
.preview .studio-list .list-header {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.preview .remix-list .list-header-spacer,
.preview .studio-list .list-header-spacer {
  flex: 1 0 1px;
}
.preview .remix-list .list-title,
.preview .studio-list .list-title {
  margin-left: 1rem;
  font-size: 1.2rem;
  font-weight: bold;
  align-self: flex-start;
  line-height: 110%;
  text-align: left;
}
.preview .remix-list .list-header-link,
.preview .studio-list .list-header-link {
  margin-right: 1rem;
  align-self: flex-end;
  font-size: 0.75rem;
  line-height: 110%;
  text-align: right;
}
.preview .remix-list .creator-image img,
.preview .studio-list .creator-image img {
  max-width: 2rem;
  max-height: 2rem;
}
.preview .remix-list .thumbnail-column,
.preview .studio-list .thumbnail-column {
  display: inline-block;
  width: 100%;
  max-width: 300px;
  /* TODO: the following can be transferred to
  src/components/thumbnailcolumn/thumbnailcolumn.scss
  after testing */
}
@media only screen and (max-width : 767px) {
  .preview .remix-list .thumbnail-column,
  .preview .studio-list .thumbnail-column {
    flex-direction: row;
  }
  .preview .remix-list .thumbnail-column .thumbnail,
  .preview .studio-list .thumbnail-column .thumbnail {
    display: inline-block;
  }
}
@media only screen and (max-width : 767px) {
  .preview .remix-list,
  .preview .studio-list {
    margin-top: 1rem;
    width: 100%;
  }
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
.driver-popover.tutorials-highlight,
.driver-popover.project-journey {
  display: flex !important;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  background-color: hsl(260, 60%, 60%);
  padding: 0.5rem;
}
.driver-popover.tutorials-highlight .driver-popover-close-btn,
.driver-popover.project-journey .driver-popover-close-btn {
  display: flex !important;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 2.5rem;
  width: 2.5rem;
  color: hsl(0, 100%, 100%);
}
.driver-popover.tutorials-highlight .driver-popover-close-btn .close-btn-img,
.driver-popover.project-journey .driver-popover-close-btn .close-btn-img {
  height: 1.25rem;
  width: 1.25rem;
}
.driver-popover.tutorials-highlight .driver-popover-arrow-side-left.driver-popover-arrow,
.driver-popover.project-journey .driver-popover-arrow-side-left.driver-popover-arrow {
  border-left-color: hsl(260, 60%, 60%);
}
.driver-popover.tutorials-highlight .driver-popover-arrow-side-right.driver-popover-arrow,
.driver-popover.project-journey .driver-popover-arrow-side-right.driver-popover-arrow {
  border-right-color: hsl(260, 60%, 60%);
}
.driver-popover.tutorials-highlight .driver-popover-arrow-side-top.driver-popover-arrow,
.driver-popover.project-journey .driver-popover-arrow-side-top.driver-popover-arrow {
  border-top-color: hsl(260, 60%, 60%);
}
.driver-popover.tutorials-highlight .driver-popover-arrow-side-bottom.driver-popover-arrow,
.driver-popover.project-journey .driver-popover-arrow-side-bottom.driver-popover-arrow {
  border-bottom-color: hsl(260, 60%, 60%);
}
.driver-popover.tutorials-highlight .driver-popover-description,
.driver-popover.project-journey .driver-popover-description {
  color: hsl(0, 100%, 100%);
  font-size: 1rem;
  font-weight: 700;
  font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
input[type=checkbox].formik-checkbox {
  display: block;
  float: left;
  margin-right: 0.625rem;
  border: 1px solid hsla(0, 0%, 0%, 0.2);
  border-radius: 3px;
  width: 1.25rem;
  height: 1.25rem;
  appearance: none;
}
input[type=checkbox].formik-checkbox:focus {
  transition: all 0.25s ease;
  outline: none;
  box-shadow: 0 0 0 0.25rem hsla(215, 100%, 65%, 0.25);
}
input[type=checkbox].formik-checkbox:checked {
  background-color: hsl(215, 100%, 65%);
  text-align: center;
  text-indent: 0.125rem;
  line-height: 1.25rem;
  font-size: 0.75rem;
  background-image: url("/svgs/forms/checkmark.svg");
  background-position: center;
}

.formik-checkbox-label {
  padding-top: 0.0625rem;
  display: block;
}
.formik-label {
  font-weight: 500;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 480px;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 768px;
  }
}
@media only screen and (min-width : 942px) {
  .inner {
    margin: 0 auto;
    width: 942px;
  }
}
.modal-flush-bottom-button {
  margin: 0;
  width: 100%;
  border: none;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  height: 5.1875rem;
  background-color: hsl(260, 60%, 60%);
  /* match the small window setting for modal as a whole */
}
.modal-flush-bottom-button:hover {
  transition: background-color 0.25s ease;
  background-color: hsl(260, 46%, 54%);
}
@media only screen and (max-width : 479px), only screen and (max-height : 479px) {
  .modal-flush-bottom-button {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}

.next-step-title {
  font-size: 1.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.next-step-spinner {
  width: 2.625rem;
  height: 2.625rem;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 480px;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 768px;
  }
}
@media only screen and (min-width : 942px) {
  .inner {
    margin: 0 auto;
    width: 942px;
  }
}
.join-flow-outer-content {
  /* hopefully this lets text expand the height of the modal, if need be */
  min-height: 32.5rem;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  overflow-wrap: break-word;
}

.join-flow-inner-content {
  box-shadow: none;
  width: calc(50% + 7.84375rem);
  /* must use padding for top, rather than margin, because margins will collapse */
  margin: 0 auto;
  padding: 2.3125rem 0 2.5rem;
  font-size: 0.875rem;
}

.join-flow-title {
  color: hsl(225, 15%, 40%);
  font-size: 1.875rem;
}

.join-flow-description {
  font-size: 0.875rem;
  font-weight: bold;
  line-height: 1.125rem;
  margin-top: 0.78125rem;
  margin-bottom: 1.875rem;
  text-align: center;
}

/* overflow will only work if this class is set on parent of img, not img itself */
.join-flow-header-image-wrapper {
  width: 100%;
  height: 7.5rem;
  overflow: hidden;
  margin: 0;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  /* match the small window setting for modal as a whole */
}
@media only screen and (max-width : 479px), only screen and (max-height : 479px) {
  .join-flow-header-image-wrapper {
    border-top-left-radius: 0rem;
    border-top-right-radius: 0rem;
  }
}

.join-flow-header-image {
  width: 100%;
}

.join-flow-footer-message {
  width: 100%;
  padding: 0.875rem 1.5rem;
  background-color: hsla(215, 100%, 65%, 0.25);
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
  color: hsl(215, 100%, 65%);
}

.join-flow-footer-message a {
  font-weight: 500;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 480px;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 768px;
  }
}
@media only screen and (min-width : 942px) {
  .inner {
    margin: 0 auto;
    width: 942px;
  }
}
.join-flow-input {
  width: 100%;
  height: 2.75rem;
  border-radius: 0.5rem;
  background-color: hsl(0, 100%, 100%);
  margin-bottom: 0.5rem;
}
.join-flow-input:focus {
  box-shadow: 0 0 0 0.25rem hsla(260, 60%, 60%, 0.25);
}

.join-flow-input-password {
  font-size: 1.5rem;
}

.join-flow-password-confirm {
  margin-bottom: 0.6875rem;
}

.join-flow-input-tall {
  height: 3rem;
}

.join-flow-input-title {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.join-flow-instructions {
  font-size: 0.875rem;
  font-weight: bold;
  line-height: 1.375rem;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  text-align: center;
}

.validation-full-width-input {
  transform: translate(21.8125rem, 0);
}

.validation-birthdate-month {
  transform: translate(-9.875rem, 0);
}

.validation-birthdate-year {
  transform: translate(9.375rem, 0);
}

@media only screen and (max-width : 941px) {
  .validation-full-width-input {
    transform: unset;
    margin-bottom: 0.75rem;
    max-width: 100%;
  }
  .validation-country {
    top: 0.5rem;
  }
  .validation-birthdate {
    transform: unset;
    top: 0.5rem;
    width: 19rem;
  }
  .validation-birthdate-month {
    margin-right: -9.25rem;
  }
  .validation-birthdate-year {
    margin-left: -9.625rem;
  }
}
.select .join-flow-select {
  height: 3.5rem;
  margin-bottom: 0;
  padding-right: 3.25rem;
  background-color: white;
  border-color: hsla(0, 0%, 0%, 0.15);
  font-size: 1rem;
  font-weight: 500;
}

.select .join-flow-select-month {
  margin-right: 0.5rem;
  width: 9.125rem;
}
@media only screen and (max-width : 479px) {
  .select .join-flow-select-month {
    width: 8.25rem;
  }
}

.select .join-flow-select-year {
  width: 9.125rem;
}
@media only screen and (max-width : 479px) {
  .select .join-flow-select-year {
    width: 8.25rem;
  }
}

.select .join-flow-select-country {
  width: 100%;
  margin: 0 auto;
}

.country-step-image {
  background-color: hsl(260, 100%, 70%);
}

.join-flow-password-section {
  margin-top: 1.125rem;
}

.birthdate-select-row {
  display: flex;
  margin: 0 auto;
}

.birthdate-step-image {
  background-color: hsl(300, 53%, 60%);
}

.join-flow-privacy-message {
  margin: 0.5rem auto 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: hsla(225, 15%, 40%, 0.6);
  text-align: center;
}

.join-flow-inner-username-step {
  padding-top: 2.75rem;
}

.join-flow-inner-birthdate-step {
  padding-top: 1rem;
  padding-bottom: 2.25rem;
}

.join-flow-inner-gender-step {
  padding-top: 2.625rem;
  padding-bottom: 1rem;
}

.join-flow-inner-country-step {
  padding-top: 0;
  padding-bottom: 2.5rem;
}

.join-flow-inner-email-step {
  padding-top: 0.75rem;
  padding-bottom: 0;
}

.join-flow-inner-welcome-step {
  padding-top: 0;
  padding-bottom: 1rem;
}

.join-flow-inner-error-step {
  user-select: text; /* make text selectable, so users can copy errors */
  padding-top: 5.5rem;
}

.join-flow-error-title {
  margin-bottom: 2rem;
}

.join-flow-birthdate-title {
  margin-bottom: 2.875rem;
}

.join-flow-email-title {
  margin-bottom: 2rem;
}

.join-flow-email-privacy {
  margin-top: 0;
}

.email-step-image {
  background-color: hsla(195, 72.4%, 42%, 0.65);
}

.join-flow-gender-description {
  margin-top: 0.625rem;
  margin-bottom: 1.25rem;
}

.join-flow-gender-privacy {
  margin-top: 0.5rem;
}

.join-flow-country-title {
  margin-top: 0;
  margin-bottom: 1.75rem;
}

.join-flow-welcome-title {
  margin-bottom: 1rem;
}

.welcome-step-image {
  background-color: hsl(45, 100%, 50%);
}

.gender-radio-row {
  transition: all 0.125s ease;
  width: 97%;
  min-height: 2.85rem;
  background-color: hsl(0, 0%, 95%);
  border-radius: 0.5rem;
  margin: 0 auto 0.375rem;
  padding-left: 0.8125rem;
  display: flex;
  align-items: center;
}

.gender-radio-row:hover {
  background-color: hsla(215, 100%, 65%, 0.1);
}

.gender-radio-row-selected, .gender-radio-row-selected:hover {
  transition: all 0.125s ease;
  background-color: hsla(215, 100%, 65%, 0.25);
}

.join-flow-next-button-arrow {
  width: 2rem;
  height: 2rem;
  margin-left: 0.5rem;
}

.modal-inner-content-email {
  padding-top: 2.9rem;
}

.join-flow-email-checkbox-row {
  font-size: 0.75rem;
  margin: 1.5rem 0.125rem 1rem;
}

a.join-flow-link:link, a.join-flow-link:visited, a.join-flow-link:active {
  text-decoration: underline;
}

.yesNoCheckbox {
  display: none;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
.select .fail {
  border: 1px solid hsl(260, 60%, 60%);
}
.select .fail:focus {
  box-shadow: 0 0 0 0.25rem hsla(35, 90%, 55%, 0.25);
  outline: none;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 480px;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 768px;
  }
}
@media only screen and (min-width : 942px) {
  .inner {
    margin: 0 auto;
    width: 942px;
  }
}
.info-button {
  position: relative;
  display: inline-block;
  width: 2rem;
  height: 2rem;
  margin-left: -0.125rem;
  margin-top: -0.75rem;
  background-image: url("/svgs/info-button/info-button.svg");
  background-size: cover;
  top: 0.6875rem;
}

.info-button-message {
  display: block;
  position: absolute;
  top: 0.375rem;
  left: 0.5rem;
  transform: translate(1rem, -1rem);
  width: 16.5rem;
  min-height: 1rem;
  margin-left: 1rem;
  border: 1px solid hsla(0, 0%, 0%, 0.1);
  border-radius: 5px;
  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.15);
  padding: 0.75rem;
  overflow: visible;
  background-color: hsl(215, 65%, 55%);
  color: hsl(0, 100%, 100%);
  line-height: 1.25rem;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 500;
  z-index: 2;
}
.info-button-message:before {
  display: block;
  position: absolute;
  top: 1rem;
  left: -0.5rem;
  transform: rotate(45deg);
  border-bottom: 1px solid hsla(0, 0%, 0%, 0.1);
  border-left: 1px solid hsla(0, 0%, 0%, 0.1);
  border-radius: 5px;
  background-color: hsl(215, 65%, 55%);
  width: 1rem;
  height: 1rem;
  content: "";
}

@media only screen and (max-width : 941px) {
  .info-button-message {
    position: absolute;
    transform: none;
    /* since we're positioning message relative to info-button's parent,
    we need to center this element within its width. */
    margin: 0 calc((100% - 16.5rem) / 2);
    top: 0.125rem;
    left: 0;
  }
  .info-button-message:before {
    display: none;
  }
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
.formik-radio-label {
  margin-left: 1rem;
}

input[type=radio].formik-radio-button {
  margin-top: 1px;
  border: 1px solid hsla(0, 0%, 0%, 0.15);
  border-radius: 50%;
  width: 1rem;
  min-width: 1rem; /* necessary to prevent width from being too small in 'other' case */
  height: 1rem;
  appearance: none;
  background-color: hsl(0, 100%, 100%);
}
input[type=radio].formik-radio-button:checked, input[type=radio].formik-radio-button:focus {
  outline: none;
}
input[type=radio].formik-radio-button:checked {
  transition: all 0.25s ease;
  box-shadow: 0 0 0 2px hsla(215, 100%, 65%, 0.25);
  border: 1px solid hsl(215, 100%, 65%);
  background-color: hsl(0, 100%, 100%);
}
input[type=radio].formik-radio-button:checked:after {
  display: block;
  transform: translate(0.125rem, 0.125rem);
  border-radius: 50%;
  background-color: hsl(215, 100%, 65%);
  width: 0.625rem;
  height: 0.625rem;
  content: "";
}

input.formik-radio-input, .formik-radio-input input {
  height: 2.1875rem;
  width: 100%;
  margin-bottom: 0;
  border-radius: 0.5rem;
  background-color: hsl(0, 100%, 100%);
}
input.formik-radio-input:focus, .formik-radio-input input:focus {
  box-shadow: 0 0 0 0.25rem hsla(215, 100%, 65%, 0.25);
}

.formik-radio-input-wrapper {
  margin-left: auto;
  margin-right: 0.25rem;
  width: 10.25rem;
}

.formik-radio-label-other {
  max-width: 7rem;
  margin-right: 0.25rem;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 480px;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 768px;
  }
}
@media only screen and (min-width : 942px) {
  .inner {
    margin: 0 auto;
    width: 942px;
  }
}
/* unusually for a modal, the join flow modal cares about the screen around it
being clickable, because of the standalone join view. */
.mod-join {
  width: 27.4375rem;
}
@media only screen and (max-width : 479px) {
  .mod-join {
    width: auto;
  }
}

/* enable vertical scrolling when modal showing, if page is short */
@media only screen and (max-height : 479px), only screen and (min-height : 480px) and (max-height : 767px) {
  .modal-overlay {
    overflow: auto;
  }
}

@media only screen and (max-width : 479px), only screen and (max-height : 479px) {
  .modal-content {
    height: unset;
  }
}

/* lower the modal slightly to accomodate Scratch logo above it */
@media only screen and (max-width : 479px), only screen and (max-height : 479px), only screen and (min-width : 480px) and (max-width : 767px), only screen and (min-height : 480px) and (max-height : 767px) {
  .modal-sizes {
    margin: 3.5rem auto;
  }
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
.not-available-image {
  padding: 5rem 0 2rem;
}
.alert-wrapper {
  position: absolute;
  display: flex;
  width: 100%;
  justify-content: center;
  z-index: 100;
  pointer-events: none;
}
.alert-wrapper .alert {
  display: flex;
  box-sizing: border-box;
  padding: 10px 20px;
  border-radius: 8px;
  align-items: center;
  margin-top: 1rem;
  min-height: 60px;
  pointer-events: auto;
}
.alert-wrapper .alert.alert-error {
  background: #FFF0DF;
  border: 1px solid #FF8C1A;
  box-shadow: 0px 0px 0px 2px rgba(255, 140, 26, 0.25);
}
.alert-wrapper .alert.alert-success {
  background: #CEF2E8;
  border: 1px solid #0EBD8C;
  box-shadow: 0px 0px 0px rgba(14, 189, 140, 0.25);
}
.alert-wrapper .alert .alert-msg {
  font-size: 14px;
  font-weight: bold;
}
.alert-wrapper .alert .alert-close-button {
  position: unset;
  margin-left: 1rem;
}
@charset "UTF-8";
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 480px;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 768px;
  }
}
@media only screen and (min-width : 942px) {
  .inner {
    margin: 0 auto;
    width: 942px;
  }
}
.checkbox-container {
  display: flex;
  cursor: pointer;
  align-items: center;
  gap: 0.5rem;
  color: hsl(225, 15%, 40%);
  font-size: 0.75rem;
  font-style: normal;
  line-height: 1rem;
}
.checkbox-container input[type=checkbox] {
  cursor: pointer;
  appearance: none;
  border: 2px solid hsla(0, 0%, 0%, 0.1);
  border-radius: 4px;
  width: 1.25rem;
  height: 1.25rem;
}
.checkbox-container input[type=checkbox]:checked, .checkbox-container input[type=checkbox]:focus {
  transition: all 0.25s ease;
}
.checkbox-container input[type=checkbox]:checked {
  background-color: hsl(215, 100%, 65%);
  text-align: center;
  text-indent: 0.125rem;
  line-height: 1.1rem;
}
.checkbox-container input[type=checkbox]:checked:after {
  color: hsl(0, 100%, 100%);
  content: "✔";
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 480px;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 768px;
  }
}
@media only screen and (min-width : 942px) {
  .inner {
    margin: 0 auto;
    width: 942px;
  }
}
.share-modal {
  margin-top: 15vh;
  width: 39.25rem;
  border-radius: 0.5rem;
  overflow: hidden;
}
.share-modal .title {
  display: flex;
  align-items: center;
  box-shadow: inset 0 -1px 0 0 hsl(215, 100%, 65%);
  background: hsl(215, 100%, 65%);
  width: 100%;
  height: 3rem;
  padding-left: 12px;
}
.share-modal .title-text {
  text-align: center;
  color: white;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25rem;
}
.share-modal .share-modal-inner {
  padding: 1.5rem;
  padding-bottom: 1rem;
  gap: 1.5rem;
  background: white;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75rem;
}
.share-modal .thumbnail-container {
  display: flex;
  justify-content: center;
}
.share-modal .thumbnail-img {
  border-radius: 0.5rem;
  width: 300px;
  height: 240px;
}
.share-modal .footer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.share-modal .divider {
  width: 100%;
  border-top: 1px solid hsla(215, 100%, 65%, 0.25);
}
.share-modal .button-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.share-modal .actions {
  display: flex;
  gap: 1rem;
}
.share-modal .ok-button, .share-modal .change-thumbnail-button {
  border: none;
  border-radius: 4px;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
  cursor: pointer;
}
.share-modal .ok-button {
  background: hsl(215, 100%, 65%);
  color: hsl(0, 100%, 100%);
  border: none;
}
.share-modal .change-thumbnail-button {
  background: white;
  color: hsl(215, 100%, 65%);
  border: 1px solid hsl(215, 100%, 65%);
}

.share-modal-overlay {
  background-color: hsla(0, 0%, 0%, 0.1);
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 480px;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 768px;
  }
}
@media only screen and (min-width : 942px) {
  .inner {
    margin: 0 auto;
    width: 942px;
  }
}
.update-thumbnail-info-modal {
  margin-top: 30vh;
  width: 26rem;
  border-radius: 0.5rem;
  overflow: hidden;
}
.update-thumbnail-info-modal .update-thumbnail-info-modal-title {
  display: flex;
  align-items: center;
  box-shadow: inset 0 -1px 0 0 hsl(215, 100%, 65%);
  background: hsl(215, 100%, 65%);
  width: 100%;
  height: 3rem;
  padding-left: 12px;
}
.update-thumbnail-info-modal .update-thumbnail-info-modal-title-text {
  text-align: center;
  color: white;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25rem;
}
.update-thumbnail-info-modal .update-thumbnail-info-modal-inner {
  padding: 1.5rem;
  padding-bottom: 1rem;
  gap: 1.5rem;
  background: white;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75rem;
}
.update-thumbnail-info-modal .update-thumbnail-info-modal-button-row {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.update-thumbnail-info-modal .update-thumbnail-info-modal-ok-button {
  width: 100%;
  max-width: 368px;
  background: hsl(215, 100%, 65%);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
  cursor: pointer;
}

.update-thumbnail-info-modal-overlay {
  background-color: hsla(0, 0%, 0%, 0.1);
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 480px;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 768px;
  }
}
@media only screen and (min-width : 942px) {
  .inner {
    margin: 0 auto;
    width: 942px;
  }
}
.driver-popover.gui-journey {
  max-width: unset;
  padding: 0;
  border-radius: 15px;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
}
.driver-popover.gui-journey .driver-popover-close-btn {
  display: flex !important;
  justify-content: center;
  align-items: center;
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 50%;
  margin: 0.5rem;
  color: hsl(0, 100%, 100%);
  background-color: hsl(144, 45%, 26%);
}
.driver-popover.gui-journey .driver-popover-close-btn .close-btn-img {
  height: 1.25rem;
  width: 1.25rem;
}
.driver-popover.gui-journey .driver-popover-title {
  padding: 1rem 0;
  font-size: 1rem;
  font-weight: 700;
  font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
  text-align: center;
  color: hsl(0, 100%, 100%);
  margin: 0;
  background-color: hsl(144, 45%, 36%);
  border-radius: 15px 15px 0 0;
}
.driver-popover.gui-journey .driver-popover-title[style*=block] + .driver-popover-description {
  margin: 0;
}
.driver-popover.gui-journey .driver-popover-description .title {
  padding: 1rem 0;
  font-size: 1.125rem;
  font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-weight: 400;
  text-align: center;
  color: hsl(225, 15%, 40%);
  background-color: hsl(215, 100%, 95%);
}
.driver-popover.gui-journey .driver-popover-description .description-wrapper {
  flex-direction: row;
  justify-content: space-evenly;
  gap: 3rem;
  margin: 3rem 4rem;
}
.driver-popover.gui-journey .driver-popover-description .description-wrapper .journey-option {
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}
.driver-popover.gui-journey .driver-popover-description .description-wrapper .journey-option img {
  height: 8.75em;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 480px;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 768px;
  }
}
@media only screen and (min-width : 942px) {
  .inner {
    margin: 0 auto;
    width: 942px;
  }
}
.mod-feedback-overlay {
  background-color: unset;
  pointer-events: none;
}

.mod-feedback {
  position: fixed;
  bottom: 2.5rem;
  right: 2.5rem;
  margin: unset;
  max-width: 22.5rem;
  box-shadow: 0 0 14px 4px hsla(0, 0%, 0%, 0.15);
  border-radius: 0.5rem;
  pointer-events: auto;
}
.mod-feedback .feedback-header {
  display: flex;
  align-items: center;
  padding-left: 0.75rem;
  height: 3rem;
  max-width: 22.5rem;
  border-radius: 0.5rem 0.5rem 0 0;
  background-color: hsl(215, 100%, 65%);
  line-height: 1.25rem;
}
.mod-feedback .feedback-content {
  padding: 1.5rem;
}
.mod-feedback .feedback-content .feedback-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.mod-feedback .feedback-content .feedback-form .feedback-question {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.75rem;
}
.mod-feedback .feedback-content .feedback-form .feedback-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mod-feedback .feedback-content .feedback-form .feedback-options .feedback-radio-row {
  transition: all 0.125s ease;
  background-color: hsl(0, 0%, 95%);
  border-radius: 0.5rem;
  padding: 1rem 0.5rem 1rem 1rem;
  display: flex;
  align-items: center;
}
.mod-feedback .feedback-content .feedback-form .feedback-options .feedback-radio-row label {
  margin-left: 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
}
.mod-feedback .feedback-content .feedback-form .feedback-options .feedback-radio-row:hover {
  background-color: hsla(215, 100%, 65%, 0.1);
}
.mod-feedback .feedback-content .feedback-form .feedback-options .feedback-radio-row-selected,
.mod-feedback .feedback-content .feedback-form .feedback-options .feedback-radio-row-selected:hover {
  transition: all 0.125s ease;
  background-color: hsla(215, 100%, 65%, 0.25);
}
.mod-feedback .feedback-content .feedback-form .feedback-submit {
  background-color: hsl(215, 100%, 65%);
  margin: 0;
  font-size: 1rem;
  line-height: 1.25rem;
}
@media only screen and (max-width : 479px), only screen and (max-height : 479px) {
  .mod-feedback {
    position: relative;
    bottom: unset;
    right: unset;
    margin: 3.75rem auto;
  }
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 100%;
  }
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 480px;
  }
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
  #view {
    text-align: center;
  }
  .inner {
    margin: 0 auto;
    width: 768px;
  }
}
@media only screen and (min-width : 942px) {
  .inner {
    margin: 0 auto;
    width: 942px;
  }
}
.driver-active:has(.tooltip-set-thumbnail) * {
  pointer-events: auto !important;
}

.tooltip-set-thumbnail ~ .driver-overlay {
  z-index: -1 !important;
}

.driver-popover.tooltip-set-thumbnail {
  padding: 18px;
  background-color: hsl(215, 100%, 65%);
  color: white;
  text-align: center;
  z-index: 10;
}

.driver-popover.tooltip-set-thumbnail .driver-popover-title {
  font-weight: 700;
  line-height: 1.25rem;
  font-size: 1rem;
}

.driver-popover.tooltip-set-thumbnail .driver-popover-arrow-side-bottom {
  border-bottom-color: hsl(215, 100%, 65%);
}

.thumbnail-upload-alert {
  padding: 12px !important;
  min-height: 52px !important;
}