.login {
    margin: 0 20%;
    background-image: url('../img/bg.jpg');
    background-size: auto;
}

.content-wrapper {
    margin: 4%;
} 

.main-menu {
    
    background: white;
    position: fixed;
    bottom: 0;
    /* for align-center to take effect */
    width: 100%;
    box-shadow: 1em 1em 20px 0px #cccccc;
}

.stopwatch-active .main-menu button
{
    animation: Timer-Active-Color-Menu 10s infinite;
}
/*
.stopwatch-active .button.hollow
{
    animation: Timer-Active-Color-Hollow 10s infinite;
}

.stopwatch-active .button
{
    animation: Timer-Active-Color-Button 10s infinite;
}
*/
@keyframes Timer-Active-Color-Menu {
    0%   {color: rgb(66, 0, 0);}
    50%  {color: red;}
    100% {color: rgb(66, 0, 0);}
  }

@keyframes Timer-Active-Color-Hollow {
    0%   {color: rgb(66, 0, 0); border-color: rgb(66, 0, 0);}
    50%  {color: red; border-color:red;}
    100% {color: rgb(66, 0, 0); border-color: rgb(66, 0, 0);}
  }

@keyframes Timer-Active-Color-Button {
    0%   {background-color: rgb(66, 0, 0);}
    50%  {background-color:red;}
    100% {background-color: rgb(66, 0, 0);}
  }



.main-menu i {

    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    margin-bottom: 0.25rem;
    text-align: center;
}


.main-menu button {
    display: flex;
    flex-flow: column nowrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    padding: 0;
    margin: 1em;
    border: none;
    font: inherit;
    color: #1779ba;
    background-color: transparent;
    cursor: pointer;
}


#stopwatch-text {
    text-align: center;
    font-size: 5em;
}

.stopwatch-control-container
{
    text-align: center;
    margin: 0 30%;
}

#stopwatch-button {
    font-size: 4em;
    color: #1779ba;
    cursor: pointer;
}

    #stopwatch-button::before {
        font-family: "foundation-icons";
        content: "\f198";
        cursor: pointer;
    }

#stopwatch-button.stop{
    color: red;
}

    #stopwatch-button.stop::before {
        font-family: "foundation-icons";
        content: "\f1ef";
        cursor: pointer;
    }

#stopwatch-form
{
    opacity: 0;
    pointer-events: none;
}

.stopwatch-active #stopwatch-form
{
    transition: ease-in-out 0.2s;
    opacity: 1;
    pointer-events: all;
}

.options-bar {
    text-align: right !important;
    position: relative;

}

    .options-bar select {
        width: 12em;
    }

    .options-bar .button {
        display: inline;
    }

        .options-bar form span {
            line-height: 2.7;
            margin: 0 0.5em;
        }

        .options-bar form button {
            display: inherit;
            margin: 0 0.5em;
        }
        
@media (max-width: 492px) {
    .main-menu {
        font-size: 2.6vw;
    }

    .main-menu i {
        font-size: 10vw;
    }

    .stopwatch-control-container
    {
        margin: 0 0;
    }
    
}
/* To account for height of main menu */
body {
    margin-bottom: 6em;
}

/* Disable native datepicker */
input[type=date]::-webkit-inner-spin-button, input[type=date]::-webkit-calendar-picker-indicator {
    display: none;
 }

 /*Table*/
 thead tr {
    background: white;
    box-shadow: 0em 0em 6px 0px #cccccc;
}

 th {
     position: sticky;
     top: 0;
     background: white;

 }

 /* Custom Icons */

 .icon-urlaub:before {
    content: url('../img/urlaub.png'); 
   
    width: 1em;
    height: 1em;
}

/* Arbeitszeitliste */

    /* Icons */

    .icon-time-entry-lock {
        font-style: normal;
        position: relative;
    }

    .icon-time-entry-lock.locked {
        color: goldenrod;
        font-size: 1.5em;
    }

    .icon-time-entry-lock.locked::before {
        font-family: "foundation-icons";
        content: "\f16a";
    }

    .icon-time-entry-lock.admin-locked {
        color: goldenrod;
        font-size: 1.5em;
    }

    .icon-time-entry-lock.admin-locked::before {
        font-family: "foundation-icons";
        content: "\f16a";
    }

    .icon-time-entry-lock.admin-locked::after {
        content: "\f126";
        font-family: "foundation-icons";
        color: green;
        position: absolute;
        top: 30%;
        left: 40%;
        font-size: 0.6em;
    }

    .icon-time-entry-lock {
        color: #cec1a1;
        font-size:1.5em;
    }
    
    .icon-time-entry-lock::before {
        font-family: "foundation-icons";
        content: "\f20a";
    }

.filter {
    font-size: 0.7em;
    display: inline-block;
    color:white;
    background:lightgray;
    border-radius: 0.5em;
    padding: 0.2em 0.4em;
}

.summen {
    font-size: 0.7em;
    color:#1779ba;
    /*background:lightsky;*/
    border-radius: 0.5em;
    padding: 0.2em 0.4em;
}