/* CSS variables */
:root {
    --100pct-in-px: calc(100% - 0px);
}

/* Sidebar */
#sidebar{
    height: 100vh;
    z-index: 999;
    background: linear-gradient(to bottom right, rgb(10, 10, 43),rgb(5, 5, 30), rgb(0, 0, 30), rgb(10, 10, 43));
    min-width: 250px;
    color: ghostwhite;
    width: 100%;
}

.sidebar-button-style{
    border-radius: 5px;
    padding: 6px 12px;
    cursor: pointer;
    color: ghostwhite;
}
.sidebar-button-style:hover{
    color: rgb(10, 10, 43);
    background-color: ghostwhite;
    cursor: pointer;
}
.sidebar-button-style2{
    border: 1px solid ghostwhite !important;
    border-radius: 5px;
    background: none;
    padding: 6px 12px;
    cursor: pointer;
    color: ghostwhite;
}
.sidebar-button-style2:hover{
    color: black;
    background-color: ghostwhite;
    cursor: pointer;
}
.sidebar-button-style3:hover{
    color: ghostwhite;
    background: none;
    cursor: pointer;
}
.dropdown-item:hover{
    background-color: gold !important;
}
.active{
    background-color: rgb(233, 232, 232) !important;
    color: rgb(10, 10, 43) !important;
}
#btn-settings{
    background-color: ghostwhite;
    color: rgb(10, 10, 43);
}
#btn-settings:hover{
    background-color: gold;
    color: rgb(10, 10, 43);
}

.sidebar-form{
    border-radius: 5px;
    margin: 5px;
}

.icon-footer{
    height: 50px;
    opacity: 0.25;
}

.sidebar-link{
    color: ghostwhite;
}

.sidebar-link:hover{
    color: cornflowerblue;
    text-decoration: none;
}

/* Graph area */
#svg-main{
    height: var(--100pct-in-px);
    width: var(--100pct-in-px);
}
text.shadow1{
    stroke: white;
    stroke-width: 0.05px;
    opacity: 0.8;
    pointer-events: none;
    background: solid;
    background-color: rgba(100,100,100,0.5) !important;
    border-radius: 5px !important;
}
text.shadow2{
    stroke: white;
    stroke-width: 7px;
    pointer-events: none;
}
.label{
    pointer-events: none;
}

/* Legend */
.legend{
    position: absolute;
    bottom: 10;
    right: 10;
    border: 1px solid #ccc !important;
    border-radius: 10px;
    padding: 10px;
}

/* Preset settings */
.smallNode{
    font-size: 0.5rem;
    padding: 0.25rem;
}
.writtenNode{
    font-size: 0.75rem;
}

/* Advanced settings bar */
.settings{
    position: absolute;
    bottom: 10;
    width: 90%;
    background-color: rgba(248, 248, 255, 0.95);
    border-radius: 5px;
    padding: 10px;
    visibility: hidden; /* Start hidden */
}

/* Graph film */

#film-logo{
    position: absolute; 
    bottom: calc(50% - 40px); 
    right: calc(50% - 125px); 
    opacity: 0.5; 
    filter: grayscale(100%) brightness(75%); 
    max-width: 250px; 
    max-height: auto;
}
#film-text{
    position: absolute; 
    bottom: calc(50% - 40px - 2rem); 
    right: calc(50% - 125px); 
    opacity: 0.5; 
    filter: brightness(75%); 
    color: black;
}
#film-panel{
    background-color: #666;          
    -moz-box-shadow: inset 5px 6px 7px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 5px 6px 7px rgba(0, 0, 0, 0.3);
    box-shadow: inset 5px 6px 7px rgba(0, 0, 0, 0.3);
    height: 100vh;
}