:root {
    --primary: #aaa;
    --secondary: #777;
    --dark: #333;
    --sorted: #0053ACFF;
    --unsorted: #DD53AC;
    --pivot: #DDFF55;
    --minimum: #55BB55;
    --position: #5555DD;
    --scanner: #DD8888;
    --target: #55CC55;
    --deleted: #CC5555;
}
/*body {*/
/*    background-color: var(--primary);*/
/*}*/
.cursor-pointer {
    cursor: pointer;
}
.fa-spinner {
    -webkit-animation:spin 3s linear infinite;
    -moz-animation:spin 3s linear infinite;
    animation:spin 3s linear infinite;
}
@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform:rotate(360deg);
    }
}
/*
App
*/
.navbar-brand{
    font-weight: bold;
    font-family: sans-serif;
}
.navbar-nav{
    font-size: 15px;
}
.navbar-nav button{
    font-size: 15px;
}
.navbar-nav .nav-item .nav-link{
    color: rgba(255,255,255,.9);
}
.size-slider {
    width: 200px;
}
.graph {
    border-top: var(--primary) 1px solid;
}
.graph-body {
    min-height: 80vh;
    justify-content: center;
    border-top: var(--primary) 1px solid;
    border-bottom: var(--primary) 1px solid;
}
.bar-chart {
    justify-content: center;
}
.node {
    margin: 0 2px;
    height: 20px;
    width: 20px;
    border-bottom: var(--dark) 1px solid;
    border-left: var(--dark) 1px solid;
    border-right: var(--dark) 1px solid;
    background-color: var(--secondary);
}

.tree {
    position: absolute;
    left: 5%;
    bottom: 10%;
    width: 90%;
    display: inline-block;
    padding: 10px;
    background-color: rgba(125, 125, 125, .2);
}
.tree .node{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}
.tree .node-connector {
    margin: 0;
    height: 20px;
    width: 2px;
    border-radius: 0;
    border: none;
    background-color: var(--primary);
}
.tree-body{
    justify-content: center;
    align-items: center;
    width: 100%;
}
.tree-footer {
    width: 100%;
    padding: 5px;
    border: var(--primary) 1px solid;
}
.tree-sorted-node{
    background-color: var(--deleted);
}

.node-sorted {
    background-color: var(--sorted);
}
.node-unsorted {
    background-color: var(--unsorted);
}
.node-pivot {
    background-color: var(--pivot);
}
.node-minimum {
    background-color: var(--minimum);
}
.node-position {
    background-color: var(--position);
}
.node-scanner {
    background-color: var(--scanner);
}
.node-target {
    background-color: var(--target);
}
.node-deleted {
    background-color: var(--deleted);
}

.algorithm-info-btn{
    color: #2277DD;
}
.custom-input,
.algorithm-info {
    display: none;
    position: absolute;
    top: 125px;
    left: 50%;
    transform: translate(-50%, 0);
    min-width: 25%;
    z-index: 100;
}
.custom-input-header,
.algorithm-info-header {
    font-weight: bold;
    font-size: 20px;
}
.custom-input-cancel-btn,
.algorithm-info-cancel-btn {
    position: relative;
    float: right;
}