body {
    background-image: url("../background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0px;
}

.widgets-container {
    display: flex;
    flex-direction: row;
    height: 100%;
    padding-right: 5px;
}

.shortcuts-box {
    padding: 10px 5px 10px 0px;
    margin: auto auto auto 0px;
}

.shortcuts-tray {
    width: 48px;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    margin: 10px auto auto 0px;
    align-items: center;
    background-color: #eeeeeecc;
    border-radius: 0px 10px 10px 0px;
    border: 1px;
    border-color: #999999cc;
    padding-top: 10px;
    padding-bottom: 10px;
}

.shortcut {
    -webkit-transition: 0.15s linear;
    -webkit-transition-property: -webkit-transform margin;
    -webkit-transform-origin: left center;
    border-radius: 20%;
    margin-top: 48 * 0.333;
    height: 48;
    width: 48;
    border-radius: 48;
}

.shortcut:hover {
    cursor: pointer;
}

.shortcut-img {
    width: 42px;
    margin: 3;
    opacity: 1;
}

.widget-box {
    width: auto;
    height: calc(100% - 20px);
    border: none;
    border-radius: 10px;
    overflow: hidden;
    margin: 10px 5px 10px 5px;
    flex-grow: 1;
    position: relative;
}

.widget {
    width: 100%;
    height: 100%;
    border: none;
    background: #fafafa;
    transition: height 0.2s ease-out;
}

.collapsed {
    height: 64px;
}

.widget-collapser {
    background: #00000000;
    cursor: pointer;
    border-style: none;
    width: 60px;
    height: 64px;
    font-size: 15px;
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, 0%);
    left: 50%;
    opacity: 0.3;
    transition: opacity 0.15s ease-out;
}

.widget-collapser::after {
    position: absolute;
    width: 60px;
    font-size: 40px;
    content: "\2212";
    color: black;
    text-align: center;
    margin: 8px 0;
}

.collapser-collapsed::after {
    position: absolute;
    width: 60px;
    font-size: 40px;
    content: "\002B";
    color: black;
    text-align: center;
    margin: 8px 0;
}

.widget-collapser:hover {
    opacity: 1;
}