:root{
    --bg-color: rgba(255, 255, 255, 0.7);
    --box-shadow-active: rgba(11, 209, 167, 0.9);
    --box-shadow: rgba(255, 255, 255, 0.9);
    --border-radius: 15px;
    --bg-color-teal: rgba(11, 209, 167, 1);
    --border-color-active: rgba(255, 255, 255, 0.3);
}
*{
    all: unset;
    color: rgba(11, 209, 167, 0.3);
}

.monitor {
    font-size: 19px;
    background-color: rgba(233, 233, 234, 0.7);
    padding: 7px;
    justify-content: center;
    border-radius: 8px;
    margin: 15px;
    box-shadow: 0px 0px 7px rgba(255, 255, 255, 1);
}

.monitor:hover {

}

.monitor_active {
    /*border: var(--border-size) solid var(--border-color-active);*/
    box-shadow: 0px 0px 6px var(--box-shadow-active);
    background-color: var(--bg-color-hover);
}


.index {
    font-size: 22px;
    font-weight: bold;
    font-family: Iosevka Nerd Font;
    border-radius: var(--border-radius);
    background-color: var(--bg-color);
    /*border: var(--border-size) solid var(--index-border-color);*/
    box-shadow: 0px 0px 9px var(--box-shadow);
}

/*since this is not working I am giving here random css properties for trolling. Who knows maybe I am trolling future myself :P.*/
.workspace_active {
    box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2), 0 6px 20px 0 rgba(255, 255, 255, 0.19);
    border: 8px solid #000000 !important;
    color: #FFFFFF !important;
    opacity: 0 !important;
    border-radius: 100px !important;
}

.workspace {
    margin: 0px 0px 8px 8px;
    font-size: 24px;
    font-weight: bold;
    box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2), 0 6px 20px 0 rgba(255, 255, 255, 0.19);
    border-radius: var(--border-radius);
    background-color: var(--bg-color);
    /*border: var(--border-size) solid var(--border-color);*/
}

.workspace:hover {
}

.workspace_special {
    box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2), 0 6px 20px 0 rgba(255, 255, 255, 0.19);
    background-color: var(--bg-color-teal) !important;
    /*border: var(--border-size) solid rgba(0, 255, 0, 0.4);*/
}

.label_active {
    color: #FFFFFF;
}
.client-image {
    background-color: rgba(0,0,0,0);
    color: rgba(255, 255, 255, 1);
}

.client {
    font-size: 16px;
    font-weight: normal;

    border-radius: var(--border-radius);
    background-color: rgba(0,0,0,0);
    box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2), 0 6px 20px 0 rgba(255, 255, 255, 0.19);

    /*border: var(--border-size) solid var(--border-color);*/
}

.client:hover {
}

.client_active {
    box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2), 0 6px 20px 0 rgba(255, 255, 255, 0.19);
    background-color: rgba(11, 209, 167, 0.3);
    /*border: var(--border-size) solid var(--border-color-active);*/
}