/* Task bar */
#footer {
    width: 100%;
    height: 4%;
    position: absolute;
    left: 0;
    top: calc(100% - 4%);
    display: flex;
    z-index: 3;
}

.taskbar {
    width: 90%;
    height: 100%;
    left: 0;

    /* background: linear-gradient(#1541D5, #2144E6); */
    background-color: #245DDB;
    border-top: .1vw solid #3168D5;
    border-right: .1vw solid #3168D5;

    background-color: #245EDC;

    box-shadow: 
    /* Window gradient box shadows */
        inset 0 .5vh 1vh #277dff,
        inset 0 1vh 1vh #0350f5,
        inset 0 1.5vh 1vh #0a57d5,
        inset 0 2vh 0 #0a57d5,
        inset 0 2.5vh 1vh #0a57d5,
        inset 0 3vh 1vh #0a57d5;
}

/* Start button */
.start-button {
    width: 9%;
    height: 110%;
    margin-top: -.20vw;
    border-top-right-radius: 5% 50%;
    border-bottom-right-radius: 5% 50%;
    border-right: 2px solid #1F6321;
    border-top: 1px solid #1F6321;
    background: radial-gradient(circle at 50% 175%, #259A25 75%, #124B13);
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
}

.start-button:hover {
    background: radial-gradient(circle at 50% 175%, #49e849 75%, #1b7a1b);
}

.start-button > * {
    margin-right: 10%;
    margin-bottom: 5%;
    user-select: none;
}

.start-button > img {
    height: 70%;
    margin-right: 1%;
}

.start-button > span {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 3vh;
    font-weight: bolder;
    font-style: italic;
    filter: drop-shadow(0 .1vh .3vh black);
}

/* Tasks */
.tasks {
    width: 90%;
    height: 100%;
    margin-left: 10%;
    display: flex;
    align-items: center;
    user-select: none;
}

.tasks > div {
    width: 15%;
    height: 80%;
    margin-bottom: .5vh;

    border-radius: .5vh;

    display: flex;
    align-items: center;
}

.tasks > .task {
    background-color: #3980F4;
    background: radial-gradient(circle at -100% 175%, #3980F4 90%, #5898ff);
    box-shadow: inset 0 .2vh #5898ff;
    border: solid .1vh #264FAD;
}

.tasks > .task:hover {
    background: radial-gradient(circle at -100% 175%, rgb(97, 154, 245) 90%, #5898ff);
}

.tasks > .active-task {
    background: radial-gradient(circle at -100% 100%, #1A50B8 90%, #12377d);
    background: linear-gradient(#12377d, #1A50B8);

    border: solid .2vh #102a65;
    border-left: solid .2vh#1c6bfe;
    border-top: solid .2vh#1c6bfe;
}

.tasks> .active-task:hover {
    background: linear-gradient(#2770f9, #1853c0);
}

/* Task contents */
.tasks > div > img {
    height: 65%;
    margin-right: 2%;
    pointer-events: none;
}

.tasks > div > span {
    font-family: Tahoma, sans-serif;
    font-size: 1.5vh;
    text-align: left;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* Notification area */
#notification-area {
    width: 10%;
    background-color: #1091E9;
    background: linear-gradient(#1091EB, #0F9DEC);
    border-top: .25vw solid #31B0E7;
    border-left: .25vw solid #31B0E7;
    background: radial-gradient(circle at 50% 175%, #0C8DEA 60%, #24b0e2);
    display: flex;
    justify-content: center;
    align-items: center;
}

#current-time {
    font-size: 1.5vh;
    margin-left: 10%;
}

.tray-icon {
    width: 12%;
    margin-bottom: -3%;
    margin-right: 1%;
    cursor: pointer;
}