/* if mobile device in portrait or width less than 600px wide */
@media only screen and ((max-width: 600px) or ((max-device-width: 480px) and (orientation: portrait))) {
    /* ======================================================================= */
        /* header */
    div.menu {
        display: none;
    }
    div.menu.show {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--secondary_bg);
        z-index: 100;

    }
    div.menu.show ul li {
        display: block;
        float: none;
        width: 100%;
        text-align: center;
    }
    div.menu.show ul li:nth-child(odd) {
        background-color:var(--transparent_main_bg);
    }
    div.menu.show ul li ul {
        width: 100%;
    }
    div.header div.timeblock {
        width:100%;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "logo running"
            "logo time"
            "buttons buttons";
        padding: 10px;
    }

    div.header div.running span{
        font-size: 2.8em;
        font-weight: bold;
    }
    div.header div.time span:first-child{
        vertical-align:bottom;
        color:#656565;
        display:inline-block;
        padding:0px 10px;
    }
    div.header div.time span:last-child{
        font-size: 1.2em;
        font-weight: bold;
        vertical-align:bottom;
        color: black;
        display:inline-block;
    }
    div.header div.buttons{
        grid-area: buttons;
        display: flex;
        justify-content: space-around;
        width: 100%;
        padding-bottom:20px;
        flex-direction: row;
        flex-wrap: nowrap;
    }

    div.header div.buttons form > *{
        width: calc((100% / 3) - 20px);
        height:80px;
        margin: 10px 5px;
        /* padding: 0; */
        width: auto;
    } 
    div.buttonGroup button{
        width:calc(100% - 30px);
        height:100%;
        padding: 4px;
    }
    div.buttonGroup > *{
        margin:0;
        font-size: initial;
    }
    div.buttonGroup{
        font-size:0;
        display:inline-block;
        vertical-align:middle;
    }
    div.buttonGroup > select{
        width:30px;
        font-size:0;
        padding:5px;
        height:100%;
    }
    body{
        margin-top:45px;
    }
    #mobile-menu {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        background: var(--main_bg);
        color: var(--text);
        z-index: 100;
        border-bottom:1px solid #000;
    }
    .menu > ul {
        overflow: auto;
        max-height: 98%;
    }
    #mobile-menu ul li {
        display: inline-block;
        width: 23%;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
    }
    #mobile-menu ul li a {
        width: 100%;
        display: block;
        padding: 10px;
    }
    div.menu ul li ul {
        position: relative;
        top: unset;
    }
    div.menu ul li ul ul,div.menu ul li ul ul ul {
        left: unset;
        top: unset;
    }

    /* ======================================================================= */
        /* DAY */

    div.date {
        width:100%;
        padding:10px;
        display:grid;
        place-items:center;
        font-size: 2em;
        font-weight: bold;
        display:inine-block;
    }
    div.container {
        grid-template-columns: 1fr 1fr;
    }
    div.clientTitle, div.taskTitle, div.container div.timeTitle{
        display:none !important;
    }
    div.container div.client {
        grid-column: 1 / 3;
        border-top:2px solid #000;
    }
    div.container div.task {
        grid-column: 1 / 3;
        border-left:none;
        min-height:40px;
    }
    div.container div.timer {
        grid-column: 1 / 2;
        border-left:none;
    }
    
    div.container div.time {
        grid-column: 2 / 3;
    }
    div.container div.newClient{
        grid-column: 1 / 3;
    }
    div.container div.newTags{
        display:none !important;
    }
    div.container div.newTime{
        display:none !important;
    }
    div.container form.edit {
        grid-column: 1 / 3;
        max-width:100%;
        grid-template-columns: 1fr;
        grid-template-areas: 
            "client"
            "start"
            "stop"
            "tagsearch"
            "tags"
            "description"
            "buttons";
    }
    div.container form.edit .clientSelect { 
        width:100%;
        border-right:none;
        border-bottom: 1px solid #000;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    div.container form.edit .clientSelect select{
        width:90%;
    }
    div.container form.edit .tags { 
        justify-content: space-around;
    }
    div.container form.edit .tags input{ 
        width:90%;
    }
    div.container form.edit .tagdesc{
        display:none;
    }
    div.container form.edit .start { 
        border-left: none;
        border-bottom: none;
        padding-bottom:0;
    }
    div.container form.edit .stop { 
        border-left: none;
        border-top: none;
        padding-top:0;
        border-bottom: 1px solid #000;
    }
    div.container form.edit .description { 
        border-right: none;
    }
    div.container form.edit .buttons { 
        border-left: none;
        display:grid;
        place-items:center;
        width:100%;
    }

    div.container form.edit .buttons button{
        width:100%;
        display:inline-block;
        margin:5px;
        font-size: 1.5em;
    }
    

    /* ======================================================================= */
        /* CALENDAR */

    .calendar{
        display:grid;
        grid-template-columns: 1fr 1fr;
    }
    .calendar .monthName{
        grid-column: 1 / 3;
    }
    .calendar .calendarDayName{
        display: none;
    }
    .calendar .calendarDayPlaceholder{
        display: none;
    }
    .calendar .calendarDay{
        grid-column: 1 / 3;
        margin: 5px;
        aspect-ratio: 2 / 1;
        overflow:hidden;
        position:relative;
        text-decoration:none;
        color:black;
        transition: all 0.2s;
        border-radius:3px;
    }

    .months a{
        width:calc(40% - 10px);
        display:inline-block;
        margin:5px;
    }

    /* ======================================================================= */
        /* TAGS */

    .tagTable form.edit {
        grid-auto-columns: 1fr;
        grid-template-columns: 1fr;
        grid-template-areas:
            "display"
            "billing"
            "buttons";
    }

    /* ======================================================================= */
        /* USERS */

    .userTable form.edit {
        grid-auto-columns: 1fr;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-areas:
            "display display display display"
            "reports reports reports reports"
            "clients tags users tasks"
            "password password password password"
            "buttons buttons buttons buttons";
    }
    .userTable form.edit .clients { 
        border-left: none;
        padding:20px 10px;
    }
    .userTable form.edit .tags { 
        padding:20px 10px;
    }
    .userTable form.edit .users { 
        padding:20px 10px;
    }
    .userTable form.edit .tasks { 
        padding:20px 10px;
    }
    .userTable form.edit .buttons { 
        border-left: none;
    }

    /* ======================================================================= */
        /* CLIENTS */

    .clientTable {
        display: grid;
        grid-auto-columns: 1fr;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 0px 0px;
    }

    .clientTable > div {
        border-left: none !important;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .clientTable div.title {
        display:none;
    }

    .clientTable div.newClient:not(.noline) {
        display:none !important;
    }

    .clientTable form.edit {
        grid-column: 1 / 2;
        grid-auto-columns: 1fr;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 0px 0px;
        grid-template-areas:
            "name"
            "contact"
            "website"
            "tags"
            "comments"
            "active"
            "buttons";
    }
    .clientTable form.edit > div{
        border-left: none !important;
    }

/* ======================================================================= */
    /* TASKS */

    .taskTable {
        display: grid;
        grid-auto-columns: 1fr;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 0px 0px;
    }
    .taskTable div.Title {
        display:none;
    }
    .taskTable div.endTask {
        margin: 0;
        padding: 0;
    }
    .taskTable div.noshow {
        display:none;
    }
    .taskTable form.edit {
        border-top: 5px solid #248f24 !important;
        border-bottom: 5px solid #248f24 !important;
        grid-column: 1 / 2;
        display: grid;
        grid-auto-columns: 1fr;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 0px 0px;
        grid-template-areas:
            "display"
            "client"
            "tagselect"
            "tags"
            "description"
            "buttons";
    }

    .taskTable form.edit .tagdesc{
        display:none;
    }

/* ======================================================================= */
    /* EVENTS */

    div.eventcontainer {
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 0px 0px;
        grid-auto-flow: row;
    }
    div.eventcontainer div.end{
        grid-column: 1 / 2;
        padding:0;
        margin:0;
    }
    div.eventcontainer div.eventTitle, div.eventcontainer div.detailsTitle, div.eventcontainer div.timeTitle {
        display:none;
    }
    div.eventcontainer div.newdetails, div.eventcontainer div.newTime{
        display:none;
    }
    
    div.eventcontainer form.edit {
        grid-column: 1 / 2;
        border-top: 5px solid #248f24 !important;
        border-bottom: 5px solid #248f24 !important;
        background-color:#e7f0fd;
        display: grid; 
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(100px, auto);
        gap: 0px 0px; 
        grid-template-areas: 
            "event"
            "details"
            "time"
            "buttons"
    }




}