/* if mobile device in landscape or window less than 800px wide */
@media only screen and (((max-width: 800px) and (min-width: 600px)) or ((max-device-height: 480px) and (orientation: landscape))) {
    /* ======================================================================= */
        /* header */

    div.header div.timeblock {
        display:grid;
        grid-template-columns: auto 1fr; 
        grid-template-areas: 
            "logo running"
            "logo time"
            "buttons buttons"; 
    }

    div.header div.buttons{
        grid-area: buttons;
    }

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

    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 / 2;
        border-top:2px solid #000;
    }
    div.container div.task {
        grid-column: 2 / 3;
        border-top:2px solid #000;
        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 1fr;
        grid-template-areas: 
            "client description"
            "start stop"
            "tagdesc tagsearch"
            "tags tags"
            "buttons buttons";
    }
    div.container form.edit .clientSelect { 
        width:100%;
        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 .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;
        border-bottom: 1px solid #000;
        border-top:none;
    }
    div.container form.edit .buttons { 
        border-left: none;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    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 1fr;
    }
    .calendar .monthName{
        grid-column: 2 / 3;
    }
    .calendar .calendarDayName{
        display: none;
    }
    .calendar .calendarDayPlaceholder{
        display: none;
    }
    .calendar .calendarDay{
        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(20% - 10px);
        display:inline-block;
        margin:5px;
    }

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

    .userTable form.edit {
        grid-auto-columns: 1fr;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-areas:
            "display display 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;
    }

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

    .taskTable {
        display: grid;
        grid-auto-columns: 1fr;
        grid-template-columns: 1fr 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 / 3;
        display: grid;
        grid-auto-columns: 1fr;
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: auto;
        gap: 0px 0px;
        grid-template-areas:
            "display client"
            "tagdesc tagselect"
            "tags tags"
            "description description"
            "buttons buttons";
    }
    .taskTable form.edit .client{
        border-top: none;
        border-left: 1px solid #000;
    }
    .taskTable form.edit .tagdesc{
        border-top: 1px solid #000;
        border-left: none;
    }
    .taskTable form.edit .tagselect{
        border-top: 1px solid #000;
    }
    .taskTable form.edit .tags{
        border-left: none;
    }
    .taskTable form.edit .description{
        border-top: 1px solid #000;
        border-left: none;
    }
    
/* ======================================================================= */
    /* EVENTS */

    div.eventcontainer {
        display: grid;
        grid-template-columns: 0.5fr 1fr 0.5fr;
        grid-auto-rows: auto;
        gap: 0px 0px;
        grid-auto-flow: row;
    }






}