footer {
    margin: 0px 10px;
     /*flexbox*/
     display:flex;
     justify-content: center;
}

.stepIndicator {
    height: 26px;
    width: auto;
    margin: 2px 2px;
    padding: 0px 10px;
    background-color: #bbbbbb;
    border: none;
    border-radius: 5px;
    display: inline-block;
    opacity: 0.5;
}

.stepIndicator.active {
    opacity: 1;
    background-color: blueviolet;
    color: white;
}

.stepIndicator.finish {
    background-color: #04AA6D;
}




.wizardStep {
    margin: 20px;
    
    /*flexbox*/
    display:flex;
    justify-content: center;
}

#uploadProfileStep,
#createProfileStep,
#templateProfileStep {
    margin: 10px;
    display:flex;
    justify-content: center;
}

#profileStep h3 {
    justify-self: center;
}

.vectorViewer {
    height:80vh;
    width:40vw;
    margin:15px;
    border-style: solid;
    border-width: 2px;
    border-color: #000;
    background-color: #FFF;
}

.vectorViewer svg{
    background-color: #DDD;
}

.dataTable {
    width: 40vw;
    border: 2px solid black;
    background-color: #DDD;
    overflow-y: auto;
    table-layout: fixed;
}
.dataTable th, td {
    border: 1px solid black;
    color: black;
    text-align: center;
}
.dataTable th {
    background-color: blueviolet;
    color: #FFF;
}
.dataTable tr:hover {
    background-color: #AAA;
}

.dataTable tr[selected="true"] {
    background-color: #00AAAA;
}

.dataTable td input {
    background-color: transparent;
    padding: 0px;
    margin: 0px;
    border-radius: 0px;
    border: none;
    box-shadow: none;
    font-size: 1em;
    text-align: center;
    color:#000;
    width: 100%;
}

.dataTable select {
    background-color: transparent;
    padding: 0px;
    margin: 0px;
    border-radius: 0px;
    border: none;
    box-shadow: none;
    font-size: 1em;
    text-align: center;
    color:#000;
    width: 100%;
}