@use "sass:map";
.form-field.error input {
  border-color: #fd5548;
  color: #fd5548; }

.error-message {
  padding: 4px;
  font-size: 8pt;
  color: #fd5548; }

#hamburger {
  cursor: pointer;
  display: none; }
  @media screen and (max-width: 767px) {
    #hamburger {
      display: flex; } }

#mobile-menu {
  background: white;
  display: none;
  position: fixed; }
  #mobile-menu.open {
    top: 0px;
    z-index: 7;
    width: 100vw;
    min-height: 100vh;
    display: block; }
  #mobile-menu ul {
    margin-top: 0px;
    list-style-type: none;
    -webkit-padding-start: 0;
    border-top: #111111; }
    #mobile-menu ul li {
      font-size: 18pt;
      border-bottom: solid 1px #111111;
      border-bottom-color: #dddddd; }
      #mobile-menu ul li a {
        display: block;
        padding: 24px 40px;
        width: 100%;
        text-decoration: none;
        color: #111111; }
        #mobile-menu ul li a:hover {
          color: #111111; }
  #mobile-menu #mobile-menu-header {
    display: flex;
    padding: 8px;
    align-items: center;
    justify-content: flex-end; }
  #mobile-menu #close-icon {
    cursor: pointer; }

#desktop-menu {
  display: flex;
  list-style-type: none;
  align-items: center;
  justify-content: center;
  padding: 0; }
  #desktop-menu li a {
    color: #111111;
    text-decoration: none;
    font-size: 10pt;
    margin: 0px 10px;
    transition: all 0.3s linear;
    cursor: pointer;
    color: #111111; }
    #desktop-menu li a:hover {
      color: #515151; }
  #desktop-menu li:last-of-type a {
    margin-right: 0px; }
  @media screen and (max-width: 767px) {
    #desktop-menu {
      display: none; } }

/* TODO items

- see if shadow can be extracted into a class/variable as well, seems more like styling choice
- decide how/where to store and reference them 
- apply grid base to padding, dimensions
- Extract links into a sub-component for styling
- Make use of viewports to define media query behaviour

*/
#nav-bar {
  background: rgba(255, 255, 255, 0.8);
  border-bottom: solid 1px rgba(255, 255, 255, 0.75);
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.0375);
  -webkit-backdrop-filter: blur(8px);
  color: #111111;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  padding: 8px 0px;
  top: 0px;
  left: 0px;
  position: fixed;
  z-index: 2; }
  @media screen and (max-width: 767px) {
    #nav-bar {
      width: 100%;
      padding: 8px 0px; }
      #nav-bar .container #links {
        display: none; } }
  #nav-bar .container .withSidePadding {
    width: 100%;
    padding: 0px 8px;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between; }
    #nav-bar .container .withSidePadding #links a {
      text-decoration: none;
      font-size: 10pt;
      margin: 0px 8px;
      transition: all 0.3s linear;
      cursor: pointer;
      color: #111111; }
      #nav-bar .container .withSidePadding #links a:hover {
        color: #515151; }

@use "sass:map";
button.theme-default,
.button.theme-default {
  padding: 8px 24px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s linear;
  text-decoration: none; }
  button.theme-default.primary,
  .button.theme-default.primary {
    background-color: #fd5548;
    border: solid 1px #fd5548;
    color: white; }
    button.theme-default.primary:hover,
    .button.theme-default.primary:hover {
      background-color: white;
      border: solid 1px #fd5548;
      color: #fd5548; }
    button.theme-default.primary.alternate,
    .button.theme-default.primary.alternate {
      background-color: white;
      border: solid 1px #fd5548;
      color: #fd5548; }
      button.theme-default.primary.alternate:hover,
      .button.theme-default.primary.alternate:hover {
        background-color: #fd5548;
        border: solid 1px #fd5548;
        color: white; }
  button.theme-default.secondary,
  .button.theme-default.secondary {
    background-color: #fd9448;
    border: solid 1px #fd9448;
    color: white; }
    button.theme-default.secondary:hover,
    .button.theme-default.secondary:hover {
      background-color: white;
      border: solid 1px #fd9448;
      color: #fd9448; }
    button.theme-default.secondary.alternate,
    .button.theme-default.secondary.alternate {
      background-color: white;
      border: solid 1px #fd9448;
      color: #fd9448; }
      button.theme-default.secondary.alternate:hover,
      .button.theme-default.secondary.alternate:hover {
        background-color: #fd9448;
        border: solid 1px #fd9448;
        color: white; }
  button.theme-default.tertiary,
  .button.theme-default.tertiary {
    background-color: #ffc61a;
    border: solid 1px #ffc61a;
    color: white; }
    button.theme-default.tertiary:hover,
    .button.theme-default.tertiary:hover {
      background-color: white;
      border: solid 1px #ffc61a;
      color: #ffc61a; }
    button.theme-default.tertiary.alternate,
    .button.theme-default.tertiary.alternate {
      background-color: white;
      border: solid 1px #ffc61a;
      color: #ffc61a; }
      button.theme-default.tertiary.alternate:hover,
      .button.theme-default.tertiary.alternate:hover {
        background-color: #ffc61a;
        border: solid 1px #ffc61a;
        color: white; }
  button.theme-default.green-one,
  .button.theme-default.green-one {
    background-color: #69b65c;
    border: solid 1px #69b65c;
    color: white; }
    button.theme-default.green-one:hover,
    .button.theme-default.green-one:hover {
      background-color: white;
      border: solid 1px #69b65c;
      color: #69b65c; }
    button.theme-default.green-one.alternate,
    .button.theme-default.green-one.alternate {
      background-color: white;
      border: solid 1px #69b65c;
      color: #69b65c; }
      button.theme-default.green-one.alternate:hover,
      .button.theme-default.green-one.alternate:hover {
        background-color: #69b65c;
        border: solid 1px #69b65c;
        color: white; }
  button.theme-default.green-two,
  .button.theme-default.green-two {
    background-color: #95e388;
    border: solid 1px #95e388;
    color: white; }
    button.theme-default.green-two:hover,
    .button.theme-default.green-two:hover {
      background-color: white;
      border: solid 1px #95e388;
      color: #95e388; }
    button.theme-default.green-two.alternate,
    .button.theme-default.green-two.alternate {
      background-color: white;
      border: solid 1px #95e388;
      color: #95e388; }
      button.theme-default.green-two.alternate:hover,
      .button.theme-default.green-two.alternate:hover {
        background-color: #95e388;
        border: solid 1px #95e388;
        color: white; }
  button.theme-default.green-three,
  .button.theme-default.green-three {
    background-color: #c5fdbb;
    border: solid 1px #c5fdbb;
    color: white; }
    button.theme-default.green-three:hover,
    .button.theme-default.green-three:hover {
      background-color: white;
      border: solid 1px #c5fdbb;
      color: #c5fdbb; }
    button.theme-default.green-three.alternate,
    .button.theme-default.green-three.alternate {
      background-color: white;
      border: solid 1px #c5fdbb;
      color: #c5fdbb; }
      button.theme-default.green-three.alternate:hover,
      .button.theme-default.green-three.alternate:hover {
        background-color: #c5fdbb;
        border: solid 1px #c5fdbb;
        color: white; }
  button.theme-default.blue-one,
  .button.theme-default.blue-one {
    background-color: #279ae1;
    border: solid 1px #279ae1;
    color: white; }
    button.theme-default.blue-one:hover,
    .button.theme-default.blue-one:hover {
      background-color: white;
      border: solid 1px #279ae1;
      color: #279ae1; }
    button.theme-default.blue-one.alternate,
    .button.theme-default.blue-one.alternate {
      background-color: white;
      border: solid 1px #279ae1;
      color: #279ae1; }
      button.theme-default.blue-one.alternate:hover,
      .button.theme-default.blue-one.alternate:hover {
        background-color: #279ae1;
        border: solid 1px #279ae1;
        color: white; }
  button.theme-default.blue-two,
  .button.theme-default.blue-two {
    background-color: #7bccff;
    border: solid 1px #7bccff;
    color: white; }
    button.theme-default.blue-two:hover,
    .button.theme-default.blue-two:hover {
      background-color: white;
      border: solid 1px #7bccff;
      color: #7bccff; }
    button.theme-default.blue-two.alternate,
    .button.theme-default.blue-two.alternate {
      background-color: white;
      border: solid 1px #7bccff;
      color: #7bccff; }
      button.theme-default.blue-two.alternate:hover,
      .button.theme-default.blue-two.alternate:hover {
        background-color: #7bccff;
        border: solid 1px #7bccff;
        color: white; }
  button.theme-default.blue-three,
  .button.theme-default.blue-three {
    background-color: #c8eaff;
    border: solid 1px #c8eaff;
    color: white; }
    button.theme-default.blue-three:hover,
    .button.theme-default.blue-three:hover {
      background-color: white;
      border: solid 1px #c8eaff;
      color: #c8eaff; }
    button.theme-default.blue-three.alternate,
    .button.theme-default.blue-three.alternate {
      background-color: white;
      border: solid 1px #c8eaff;
      color: #c8eaff; }
      button.theme-default.blue-three.alternate:hover,
      .button.theme-default.blue-three.alternate:hover {
        background-color: #c8eaff;
        border: solid 1px #c8eaff;
        color: white; }

@use "sass:map";
@use "sass:map";
label {
  margin-right: 8px; }

input[type='text'],
input[type='email'],
input[type='password'],
input[type='search'] {
  padding: 8px;
  border-radius: 3px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
  border: solid 1px #cfcfcf;
  color: #414141;
  font-size: 14px; }
  input[type='text'].large,
  input[type='email'].large,
  input[type='password'].large,
  input[type='search'].large {
    padding: 16px 8px; }

input[type='checkbox'],
input[type='radio'] {
  position: absolute;
  opacity: 0;
  z-index: -1; }

.checkbox,
.radio {
  display: flex;
  align-items: center;
  cursor: pointer; }

.checkbox-element,
.radio-element {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  width: 8px;
  height: 8px;
  padding: 4px;
  margin-right: 8px;
  background: white;
  border: solid 1px #cfcfcf;
  border-radius: 3px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); }

.radio-element {
  border-radius: 16px; }

.large .checkbox-element,
.large .radio-element {
  width: 16px;
  height: 16px; }

.large .radio-element {
  border-radius: 16px; }

.large .tick {
  border-radius: 2px; }

.large .selected {
  border-radius: 8px; }

.tick,
.selected {
  width: 0px;
  height: 0px;
  border-radius: 1px;
  background-color: #69b65c;
  opacity: 0;
  transition: all 0.2s linear; }

.selected {
  border-radius: 8px; }

input[type='checkbox']:checked + .checkbox-element .tick,
input[type='radio']:checked + .radio-element .selected {
  width: 8px;
  height: 8px;
  opacity: 1; }

.large input[type='checkbox']:checked + .checkbox-element .tick,
.large input[type='radio']:checked + .radio-element .selected {
  width: 16px;
  height: 16px;
  opacity: 1; }

input[type='checkbox']:disabled + .checkbox-element,
input[type='radio']:disabled + .radio-element {
  opacity: 0.2; }

.input-group {
  display: flex;
  align-items: center;
  padding: 8px; }

/* So, grid options
  - mobile < 480px
  - small >= 481px and <= 768px
  - medium >= 769px and <= 1024px
  - large >= 1025px
*/
/* Screen size definitions */
body {
  padding: 0;
  margin: 0;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center; }

.page {
  display: flex;
  flex-direction: column;
  width: 100vw; }

.container {
  display: flex;
  flex-direction: column; }
  .container.debug {
    border: dotted 1px rgba(255, 0, 0, 0.5); }
  @media screen and (max-width: 480px) {
    .container {
      width: 100%;
      align-items: center;
      justify-content: center; } }
  @media screen and (min-width: 481px) and (max-width: 768px) {
    .container {
      width: 100%; } }
  @media screen and (min-width: 769px) and (max-width: 1024px) {
    .container {
      width: 720px; } }
  @media screen and (min-width: 1025px) {
    .container {
      width: 1024px; } }

.withSidePadding {
  padding: 0px 16px; }

.theme-default h1 {
  font-weight: bold;
  font-size: 36px; }

.theme-default h2 {
  font-weight: bold;
  font-size: 28px; }

.theme-default h3 {
  font-weight: bold;
  font-size: 24px; }

.theme-default h4 {
  font-weight: bold;
  font-size: 18px; }

.theme-default body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px; }

body {
  -webkit-font-smoothing: antialiased; }

*,
*:before,
*:after {
  box-sizing: border-box; }

label,
.checkbox-element {
  box-sizing: content-box; }


#page {
  display: flex;
  align-items: center;
  justify-content: center; }
  #page #content {
    margin-top: 100px; }

#error-message {
  display: flex;
  background: white;
  color: #f43554;
  padding: 15px;
  border-radius: 5px;
  margin-top: 30px;
  width: 80%;
  align-items: center;
  align-self: center;
  align-content: center;
  justify-content: space-between; }
  #error-message .close {
    cursor: pointer;
    color: white;
    background: #f43554;
    padding: 2px 8px 4px;
    border-radius: 20px;
    justify-content: center;
    align-content: center;
    display: flex; }
    #error-message .close:hover {
      background: #ff6a00; }

#notification-message {
  display: flex;
  color: white;
  background: #69b65c;
  padding: 16px;
  border-radius: 8px;
  margin-top: 30px;
  width: calc(100% - 32px);
  align-items: center;
  align-self: center;
  align-content: center;
  justify-content: space-between; }
  #notification-message .close {
    cursor: pointer;
    background: white;
    color: #69b65c;
    width: 24px;
    height: 24px;
    font-size: 14px;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; }
    #notification-message .close:hover {
      color: #69b65c; }

table {
  border: solid 1px rgba(255, 255, 255, 0.2);
  padding: 0px;
  border-radius: 5px;
  width: 100%; }
  table thead tr th {
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    text-align: left; }
    table thead tr th:first-of-type {
      border-top-left-radius: 5px; }
    table thead tr th:last-of-type {
      border-top-right-radius: 5px; }
  table tbody tr td {
    padding: 10px 20px;
    color: rgba(255, 255, 255, 0.8); }
    table tbody tr td a {
      color: rgba(255, 255, 255, 0.9);
      text-decoration: none; }
  table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05); }

body {
  padding: 0;
  margin: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  color: white;
  background-color: #f43554; }

@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

#background {
  position: fixed;
  background-image: radial-gradient(100% 100%, #ff6a00 20%, #ee0979 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  animation: fadeIn 2s ease-in-out forwards;
  animation-delay: 1s; }

.admin-container {
  z-index: 2;
  display: flex;
  flex-direction: column; }
  @media screen and (max-width: 480px) {
    .admin-container {
      width: 100%;
      align-items: center;
      justify-content: center; } }
  @media screen and (min-width: 481px) and (max-width: 768px) {
    .admin-container {
      width: 720px; } }
  @media screen and (min-width: 769px) and (max-width: 1024px) {
    .admin-container {
      width: 920px; } }
  @media screen and (min-width: 1025px) {
    .admin-container {
      width: 1024px; } }

form {
  text-align: center;
  padding: 40px 80px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  border: solid 1px rgba(255, 255, 255, 0.15);
  width: intrinsic;
  display: flex;
  flex-direction: column;
  align-items: center; }
  form h1 {
    margin-top: 0px; }
  form .input-group,
  form .form-field {
    padding: 10px;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between; }

.error-message {
  color: white; }

#login-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 140px); }

#new-track-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 140px); }

.heading {
  display: flex;
  align-items: center;
  justify-content: space-between; }

.page {
  position: relative; }

.withSidePadding {
  padding: 0px 10px; }

.page #nav-bar {
  background: rgba(255, 255, 255, 0.1);
  border-bottom: solid 1px rgba(255, 255, 255, 0.2);
  color: white;
  height: 48px;
  margin: 0px;
  padding: 0px; }
  .page #nav-bar .container .withSidePadding #logo a {
    color: white;
    text-decoration: none; }
  .page #nav-bar .container .withSidePadding ul#desktop-menu li a {
    color: white; }
  .page #nav-bar .container .withSidePadding #hamburger svg #iPhone-8 {
    stroke: #fff; }

.page #mobile-menu {
  position: fixed;
  top: 0px;
  background-image: radial-gradient(100% 100%, #ff6a00 20%, #ee0979 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center; }
  .page #mobile-menu #mobile-menu-header {
    border-bottom: solid 1px rgba(255, 255, 255, 0.3); }
    .page #mobile-menu #mobile-menu-header #close-icon svg path {
      stroke: #fff; }
  .page #mobile-menu ul li {
    border-bottom-color: rgba(255, 255, 255, 0.3); }
    .page #mobile-menu ul li a {
      color: white; }

.vertical-separator {
  width: 1px;
  margin: 0 50%;
  background: rgba(255, 255, 255, 0.5);
  height: 100%;
  display: flex;
  justify-content: center;
  align-self: center; }

#edit-playlist-forms {
  display: grid;
  grid-template-columns: 49% 2% 49%;
  align-items: center;
  align-content: center;
  justify-content: center; }

#delete-playlist-details-form .form-group {
  width: 320px;
  display: flex;
  flex-direction: column;
  align-content: flex-start; }
  #delete-playlist-details-form .form-group b,
  #delete-playlist-details-form .form-group p {
    text-align: left; }
  #delete-playlist-details-form .form-group p,
  #delete-playlist-details-form .form-group label {
    font-size: 10pt; }

#playlist-tracks-section {
  flex-direction: column; }

#search-form-component {
  width: 100%;
  padding-bottom: 8px;
  border-bottom: solid 1px rgba(255, 255, 255, 0.5);
  display: grid;
  grid-template-columns: 10% 80% 10%;
  align-items: center;
  justify-content: center;
  justify-items: center; }
  #search-form-component form {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
    justify-content: center;
    width: 450px; }

.section {
  margin: 24px 0px;
  width: calc(100% - 32px);
  padding: 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  border: solid 1px rgba(255, 255, 255, 0.15);
  display: flex; }
  .section form {
    padding: 0px;
    width: 100%;
    background: none;
    border: none; }
  .section .section-heading {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between; }

#search-tracks {
  width: 100%;
  display: flex;
  flex-direction: column; }
  #search-tracks table {
    width: 100%; }
    #search-tracks table tbody tr:hover td {
      background: rgba(255, 255, 255, 0.075); }
    #search-tracks table tbody tr td {
      padding: 4px 0px; }
      #search-tracks table tbody tr td:last-of-type {
        text-align: right; }

#page {
  display: flex;
  flex-direction: column; }

#tracks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 220px;
  grid-gap: 30px 10px; }
  #tracks .track {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(100% - 22px);
    height: 100%;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.1);
    padding: 0px;
    border: solid 1px rgba(255, 255, 255, 0.2);
    color: white;
    text-decoration: none; }
    #tracks .track video,
    #tracks .track img {
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      display: flex;
      width: 100%; }
    #tracks .track .title {
      display: flex;
      padding: 15px 0px 0px;
      align-items: flex-start;
      justify-content: center; }



/*# sourceMappingURL=styles.bfe4e377.chunk.css.map*/