/******************** VISUALIZER ********************/
.header-column {
    float: left;
    margin: 8px;
}
.header-wrapper {
    display: flex;
    align-items: center;
}
#resolution-wrapper {
    opacity: 0; 
    width: 0px;
}
#resolution-wrapper.open {
    opacity: 1;
    width: 100px;
    animation-name: animateresolutionopen;
    animation-duration: 0.2s;
}
#resolution-wrapper.closed {
    opacity: 0; 
    width: 0px;
    animation-name: animateresolutionclose;
    animation-duration: 0.2s;
}
#visualizer-resolution {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 5px;
    width: 100%;
    height: 10px;
    background: #dddde2;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}
#visualizer-resolution:hover {
    opacity: 1;
}
#visualizer-resolution::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 5px;
    width: 10px;
    height: 10px;
    background: #222222;
    cursor: pointer;
}
@keyframes animateresolutionopen {
    from {width: 0;}
    to {width: 100px;}
}
@keyframes animateresolutionclose {
    from {width: 100px; opacity: 1;}
    to {width: 0; opacity: 0;}
}
#spacing-wrapper {
    opacity: 0; 
    width: 0px;
}
#spacing-wrapper.open {
    opacity: 1;
    width: 100px;
    animation-name: animatespacingopen;
    animation-duration: 0.2s;
}
#spacing-wrapper.closed {
    opacity: 0; 
    width: 0px;
    animation-name: animatespacingclose;
    animation-duration: 0.2s;
}
#visualizer-spacing {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 5px;
    width: 100%;
    height: 10px;
    background: #dddde2;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}
#visualizer-spacing:hover {
    opacity: 1;
}
#visualizer-spacing::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 5px;
    width: 10px;
    height: 10px;
    background: #222222;
    cursor: pointer;
}
@keyframes animatespacingopen {
    from {width: 0;}
    to {width: 100px;}
}
@keyframes animatespacingclose {
    from {width: 100px; opacity: 1;}
    to {width: 0; opacity: 0;}
}
.color-row-input, .color-profile, .color-row-save, .color-row-edit, .color-row-delete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 8px 0px;
}
.color-input {
    -webkit-appearance: none;
    padding: 0px;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    opacity: 0;
}
.color-input-wrapper {
    border-radius: 50%;
    background-color: black;
    box-shadow: 2px 2px 5px grey;
}
.color-profile-colors-wrapper {
    display: flex;
}
.color-profile-color {
    border-radius: 50%;
    width: 16px;
    height: 16px;
    background-color: red;
    box-shadow: 1px 1px 4px grey;
}
.profile-selected {
    background-color: #eeeef2;
}
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.modal-content {
    margin: 0px;
    top: 25vh;
    left: 25vw;
    width: 50vw;
    height: content;
    border: 1px solid #888888;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    animation-name: animatetop;
    animation-duration: 0.4s
}
.modal-header {
    padding: 0px 15px;
    display: flex;
    align-items: center;
}
.modal-close {
    color: #aaaaaa;
    float: right;
    top: 0px;
    padding: 0px 10px;
    font-size: 28px;
    font-weight: bold;
  }  
.modal-close:hover, .modal-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#colorpicker {
    margin-right: 0px;
    height: 90vh;
    min-height: 90vh;
    min-width: 20vw;
    max-width: 20vw;
    background-color: #eeeef2;
    position: absolute;
    right: -20vw;
    top: 0px;
}
#colorpicker.open {
    right: 0px;
    animation-name: colorpickeropen;
    animation-duration: 0.2s;
}
#colorpicker.closed {
    right: -20vw;
    animation-name: colorpickerclose;
    animation-duration: 0.2s;
}
@keyframes colorpickeropen {
    from {right: -20vw;}
    to {right: 0px;}
}
@keyframes colorpickerclose {
    from {right: 0px;}
    to {right: -20vw;}
}
#header-bar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   background-color: #eeeef2;
   margin: 0px;
   width: 100vw;
   max-height: 15vh;
}
#header-bar.open {
    width: 80vw;
    animation-name: headerbaropen;
    animation-duration: 0.2s;
}
#header-bar.closed {
    width: 100vw;
    animation-name: headerbarclose;
    animation-duration: 0.2s;
}
@keyframes headerbaropen {
    from {width: 100vw;}
    to {width: 80vw;}
}
@keyframes headerbarclose {
    from {width: 80vw;}
    to {width: 100vw;}
}
#file-picker {
    width: 20px;
}
#save-profile-name {
    margin: 15px;
}
#color-profile-container {
    overflow-y: scroll;
    max-height: 28vh;
    width: 100%;
    padding: 0px;
}
@keyframes animatetop {
    from {top: -50vh; opacity: 0;}
    to {top: 25vh; opacity: 1;}
}

/******************** FILE PICKER ********************/
.music-file {
    display: flex;
    width: 100vw;
    height: 15%;
}
.music-file.odd {
    background-color: #f3f3fa;
}
.select-art {
    width: 10vw;
    font-size: 42px;
}
.select-name {
    width: 70vw;
}
.select-controls {
    width: 20vw;
    font-size: 21px;
}
.controls {
    width: 60vw;
    font-size: 21px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#footer-bar {
    height: 10vh;
    width: 100vw;
    position: absolute;
    background-color: #eeeef2;
    bottom: 0;
    display: flex;
    align-items: center;
}
#music-song {
    display: flex;
    align-items: center;
    width: 40vw;
}
#current-song, #next-song {
    display: flex;
    align-items: center;
    width: 50%;
}
#music-picker {
    margin: 0px;
}
#music-time {
    font-size: 16px;
}
#music-volume-control {
    float: right;
    opacity: 0; 
    width: 0px;
}
#music-volume-control.open {
    opacity: 1;
    width: 100px;
    animation-name: animatevolumeopen;
    animation-duration: 0.25s;
}
#music-volume-control.closed {
    opacity: 0; 
    width: 0px;
    animation-name: animatevolumeclose;
    animation-duration: 0.25s;
}
#music-volume-control-slider {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 5px;
    width: 100%;
    height: 10px;
    background: #dddde2;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}
#music-volume-control-slider:hover {
    opacity: 1;
}
#music-volume-control-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 5px;
    width: 10px;
    height: 10px;
    background: #222222;
    cursor: pointer;
}
@keyframes animatevolumeopen {
    from {width: 0;}
    to {width: 100px;}
}
@keyframes animatevolumeclose {
    from {width: 100px;}
    to {width: 0;}
}
#music-progress-slider {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 5px;
    width: 100%;
    height: 10px;
    background: #dddde2;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}
#music-progress-slider:hover {
    opacity: 1;
}
#music-progress-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 5px;
    width: 10px;
    height: 10px;
    background: #222222;
    cursor: pointer;
}