/* Extra Large Screens (Monitors: 2000px and above) */
@media only screen and (min-width: 2000px) {

    /*Global*/

    .nav-container {
        width: 90vw;
    }

    .home-container {
        width: 90vw;
    }

    .main-container {
        width: 90vw;
    }
    .secondary-container {
        gap: var(--space-xl);
    }

}

/* Large Screens (Wide laptops: 1300px to 1999px) */
@media only screen and (min-width: 1300px) and (max-width: 1999px) {

    /*Global*/

    .main-container {
        width: 95vw;
    }
    .secondary-container {
        gap: var(--space-lg);
    }

    /*Create Task Page*/

    .form-container {
        column-gap: var(--space-lg);

    }

}

/* Standard Laptops (1070px to 1299px) */
@media only screen and (min-width: 1070px) and (max-width: 1299px) {

    /*Global*/

    .main-container {
        padding: 0;
    }

    .form-group {
        width: 25vw;
    }
    .secondary-container {
        gap: var(--space-sm);
    }


    /* Homepage */

    .primary-data {
        font-size: 2.2em !important;
    }

    .primary-data-subheading {
        font-size: var(--font-size-sm);
        letter-spacing: 0.75px;
    }

    .table-data:first-child {
        flex: 3;
    }

    /* Hover msg in quicklinks */
    .temp-hover-msg-quicklink {
        max-width: 140px;
        left: 70px;
        top: 0;
        line-height: 1.1;
    }


    /*Sign Up Page*/
    .password-guidelines {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 25rem;
        background-color: var(--secondary-color);
    }

    /*Create Task Page*/
    .form-container {
         column-gap: var(--space-lg);

     }
      .grid-v2 {
          column-gap: var(--space-md);
     }

      .flexbox-form-fields {
         gap: space(--space-md);
      }

}

/* Tablets and Small Screens (900px to 1069px) */
@media only screen and (min-width: 900px) and (max-width: 1069px) {

    /* Global */

    .main-container {
        padding: 0;
        width: 95vw;
    }

    .form-group {
        width: 30vw;
    }


    .password-guidelines {
        position: absolute;
        top: 300%;
        left: 0%;
        font-size: var(--font-size-xs);
        width: 20rem;
        background-color: var(--secondary-color);
    }

    .btn-primary {
        font-size: var(--font-size-base);
        margin: 1px;
    }
    

    /* Homepage */

    .primary-datas-container {
        flex-wrap: wrap;
        justify-content: center;
    }

    .primary-data-container {
        flex: 0 0 auto !important;
        width: 20%;
        min-height: 120px;
    }


    .header-container-homepage {
        padding: 5px 15px;
    }

    .quick-link-list {
        padding: 15px;
    }

    .task-table-home {
        padding: 5px 15px;
    }

    .homepage-grid {
        display: grid !important;
        grid-template-areas:
        'header header'
        'primaryData primaryData'
        'quickLinks quickLinks'
        'taskOrders taskOrders'
        'tasks tasks' !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
    }

    .quick-link-list {
        flex-direction: row !important;
    }

    .quick-link-list > * {
        flex: 1;
    }

    .heat-icon {
        width: 60px;
    }

    .temp-hover-msg-quicklink {
        max-width: 120px;
        top: -5px;
        left: 70px;
        line-height: 1.1;
    }
    


    /*Create Task Page*/

    .form-container {
        column-gap: var(--space-lg);

    }

    .grid-v2 {
        column-gap: var(--space-md);
    }

    .flexbox-form-fields {
        gap: var(--space-md);
    }

}

@media only screen and (min-width: 600px) and (max-width: 899px) {

    :root {
        --font-size-base: 14px;
    }


    .form-group {
        width: 40vw;
    }
    .thermify-logo {
        width: 16%;
    }

    .main-container {
        width: 95vw;
        padding: 0;
    }
 
    /* Homepage */

    .primary-datas-container {
        flex-wrap: wrap;
        justify-content: center;
    }

    .primary-data-container {
        flex: 0 0 auto !important;
        width: 20%;
        min-height: 120px;
    }


    .header-container-homepage {
        padding: 5px 15px;
    }

    .quick-link-list {
        padding: 15px;
    }

    .task-table-home {
        padding: 5px 15px;
    }

    .homepage-grid {
        display: grid !important;
        grid-template-areas:
        'header header'
        'primaryData primaryData'
        'quickLinks quickLinks'
        'taskOrders taskOrders'
        'tasks tasks' !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
    }

    .quick-link-list {
        flex-direction: row !important;
    }

    .quick-link-list > * {
        flex: 1;
    } 

    .temp-hover-msg-quicklink {
        max-width: 120px;
        top: -5px;
        left: 70px;
        line-height: 1.1;
    }

    /*Create task Page*/
    .form-container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }

    .grid-v2 {
        column-gap: var(--space-md);
    }

    .flexbox-form-fields {
        gap: var(--space-md);
    }

}

/* Mobile Phones (350px to 599px) */
@media only screen and (min-width: 350px) and (max-width: 599px) {


    :root {
        --font-size-base: 14px;
    }


    .form-group {
        width: 70vw;
    }
    .thermify-logo {
        width: 25%;
    }

    .main-container {
        width: 95vw;

    }

        /* Login */

        .text-error {
            max-width: 350px;
        }

    
    /* Homepage */
    .primary-datas-container {
        flex-wrap: wrap;
        justify-content: center;
    }

    .primary-data-container {
        flex: 0 0 auto !important;
        width: 20%;
        min-height: 120px;
    }


    .header-container-homepage {
        padding: 5px 15px;
    }

    .quick-link-list {
        padding: 15px;
    }

    .task-table-home {
        padding: 5px 15px;
    }

    .homepage-grid {
        display: grid !important;
        grid-template-areas:
        'header header'
        'primaryData primaryData'
        'quickLinks quickLinks'
        'taskOrders taskOrders'
        'tasks tasks' !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
    }

    .quick-link-list {
        flex-direction: row !important;
    }

    .quick-link-list > * {
        flex: 1;
    } 

    .temp-hover-msg-quicklink {
        max-width: 120px;
        top: -5px;
        left: 70px;
        line-height: 1.1;
    }

    .temp-hover-msg-btn {
        display: none; /* Hide until hovered */
        position: absolute;
        top: 110%;
        right: 40%;
        border-radius: var(--border-radius) 0 var(--border-radius) var(--border-radius);
    }

    /*Create task Page*/

    .form-container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }

    .grid-v2 {
        column-gap: var(--space-md);
    }

    .flexbox-form-fields {
        gap: var(--space-md);
    }


}