﻿/* lect column flexbox */
#LeftContentWrapper{
    flex: 1;
    overflow: hidden;
}
#SearchBox{
    padding: 4px;
    margin: 2px;
    position: relative;
}
.searchbox-dropdown{
    height: 40px;
    margin: 8px;
    border: 4px;
    padding: 2px;    
}
.searchbox-input{
    flex-grow: 1;
    margin: 6px;
}
.searchbox-button{
    height: 40px;
    width: 70;
    margin: 8px;
    border: 4px;
    padding: 2px;
}
#GraphContainer{
    flex-grow: 1;
    height: 96%;
    position: relative;
    border: groove;
    border-width: 1px;
}
#GraphContainer > canvas {
    height:inherit;
    flex-grow: 1;
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
}
.artist-number{
    width: 30%;
    margin-top: 6px;
    margin-right: 3px;
    margin-left: 3px;
}
.artist-name{
    width: 65%;
    margin-top: 6px;
}
.artist-image{
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.artist-image-holder{
    overflow: hidden;
    height: 79%;
}
/* right column flexbox */
#RightContentWrapper{
    width: 20%;
    border-left: solid;
    border-left-color: dodgerblue;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    padding: 4px;
    margin: 2px;
}
#InfoCol
{
    height: 70%;
    width: 100%;
    overflow: auto;
}
#Actions
{
    height: 25%;
    width: 100%;
}
