/* 1650 */

@media (max-width: 1650px) {
    .login {
        width: 20%;
    }

    body {
        margin: 0rem 1rem;
    }

    .workflow-menu {
        width: auto;
    }

    table {
        min-width: 120%;
    }

    .modal {
        width: 35%;
    }

}

@media (max-width: 1510px) {
    .filters {
        left:2rem;
        top:0;

        flex-direction: column;
    }

    .modal {
        width: 40%;
    }

    #filtersContainer {
        flex-direction: column;
    }
}

/* 1450 */

@media (max-width: 1450px) {
    .login {
        width: 25%;
    }

    .role-card {
        flex-direction: column-reverse;
        gap:2rem;
    }

    .role-meta, .role-description {
        width: 100%;
    }

    .role-button button, #role_level {
        width: 100%;
    }
    
    .tasks {
        width: 75%;
    }

    .table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 140%;
    }

    .modal {
        width: 45%;
    }

    .dialog {
        width: 50%;
    }

}

/* 1200 */

@media (max-width: 1200px) {
    .login {
        width: 35%;
    }

    .menu {
        position: relative;
    }

    nav {
        min-width: 40%;

        left: 0;
        top: 0;

        background-color: var(--background-lg-color);

        position: absolute;
        z-index: 1;

        margin-top: 3.75rem;

        padding: .75rem 0rem;

        justify-content: center;
        gap: 1rem;

        border-radius: var(--border-radius);
        box-shadow: 0px 3px 7.5px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
    }

    .dialog {
        width: 55%;
    }

    .roles-card img {
        max-height: 250px; 
        object-fit: contain; 
        margin-bottom: 10px;
    }

    .workflow-menu {
        width: 30%;
    }

    .modal {
        width: 50%;
    }

    .tasks {
        width: 90%;
    }

    table {
        min-width: 165%;
    }
}

@media screen and (max-width: 1050px) {
    .modal {
        width: 55%;
    }
}

/* 960 */

@media screen and (max-width: 960px) {
    .login {
        width: 40%;
    }

    nav {
        min-width: 50%;
    }

    .page {
        flex-direction: column;
    }

    .page > div {
        width: 100%;
    }

    .tasks {
        width: 100%;
    }

    section {
        padding-top: 6rem;
    }

    .projects {
        gap: 2rem;
    }

    .dialog {
        width: 70%;
    }

    .workflow {
        min-height: fit-content;
    }

    .workflow-menu .team-members {
        flex-direction: row;
        flex-flow: row;
    }

    .tab-panel {
        flex-direction: column;
    }

    .tab-panel .tab {
        width: 100%;
    }

    .tab-panel .content {
        width: 100%;
    }

    .tab,
    .tab div {
        flex-direction: row;
        gap: 0.5rem !important;
    }

    .tab a {
        width: 30%;
    }

    .tab {
        flex-grow: 0 !important;
    }

    .password .label {
        display: none;
    }

    .modal {
        width: 60%;
    }
    
    .edit-card {
        min-width: 0px;
        flex-direction: row;
        bottom: 0;
        right: -150px;
    }

    .edit-card span {
        display: none;
    }

    table {
        min-width: 140%;
    }

    .card-roles  {
        position: relative;
    }

    .teams {
        width: 50%;
    }
}

/* 840 */

@media screen and (max-width: 840px) {
    .login {
        width: 45%;
    }

    nav {
        min-width: 55%;
    }

    .tab a span {
        text-align: center;
    }

    .dropdown {
        background-color: var(--background-lg-color);
    }

    table {
        min-width: 155%;
    }

    table td {
        white-space: normal;    
        word-break: break-word;
        overflow: hidden;
    }

    .modal {
        width: 70%;
    }

    .task-column {
        min-height: 150px;
    }
}

/* 768 */

@media screen and (max-width: 768px) {
    .login {
        width: 50%;
    }

    nav {
        min-width: 70%;
    }

    .user-card p {
        display: none;
    }

    .modal {
        width: 80%;
    }

    table {
        min-width: 170%;
    }
}

@media screen and (max-width: 640px) {
    h3 { font-size: 1.25rem; margin: 0 0;}

    .tab a span {
        display: none;
    }

    .tab a i {
        text-align: center;
        width: 100%;
    }

    table {
        min-width: 180%;
    }

    .table-container .task-status,
    .table-container .confirm,
    .table-container .tag {
        width: 80%;
        font-size: 0.8rem;
    }

    .modal textarea .title {
        min-height: 60px;
    }

    .modal {
        width: 90%;
    }

    .picture-container{
        width: 30%;
    }
}

/* 576 */

@media screen and (max-width: 576px) {
    .login {
        width: 70%;
    }

    nav { 
        min-width: -webkit-fill-available;
    }

    .dialog {
        width: 100%;
    }

    .modal {
        max-width: var(--max-width);
        border-radius: 0;
        box-shadow: none;
        right: 0;
        left: 0;
        width: 100%;
    }

    .message {
        width: 70%;
    }

    .edit-card {
        right: 0px;
    }

    table {
        min-width: 200%;
    }

    .table-header {
        width: 100%;
        justify-content: space-between;
    }

    #search_table {
        width: 50%;
    }

    .view-switch-wrapper {
        padding-left: .5rem;
    }

    .date {
        width: inherit;
    }

    .views-header {
        flex-direction: column;
        align-items: flex-start;
        gap: .75rem;
    }

    .board {
        grid-template-columns: 1fr;
    }

    .task-card {
        width: 45%;
    }
}

@media screen and (max-width: 520px) {
    .modal-content .sections {
        flex-direction: column;
        gap: 1rem;
    }

    .modal-content .sections div {
        width: 100%;
    }

    .rvrs-grp {
        flex-direction: column-reverse !important;
    }

    .items-action button {
        width: 50%;
    }
}

/* 480 */

@media screen and (max-width: 480px) {
    h3 { font-size: 1.1rem; margin: 0 0;}

    .login {
        width: 80%;
    }
    
    nav a { 
        font-size: 0.8rem;
        padding-left: 0rem;
    }

    .logo-inner {
        width: 180px;
    }

    .modal .modal-inner input[type="submit"] {  
        width: 55%;
    }

    .modal .modal-inner .selects {  
        flex-direction: column;
        width: 100%;
        gap: .75rem;
    }

    .modal .modal-inner .selects select {  
        width: 100%;
    }

    table {
        min-width: 225%;
    }

    .alert {
        bottom: auto;
        right: 0;
        transform: translateX(-50%);
        top: 20px;
        width: calc(100% - 2rem);
        left: 50%;
        position: fixed;
        z-index: 2000;
    }

    .task-card {
        width: 95%;
    }

    .text {
        white-space: normal;
    }

    .teams {
        width: 100%;
    }

    .teams .edit-url {
        right: 0;
        top: 1.5rem;
    }

    .tab-panel form > div {
        flex-direction: column;
    }

    #dialogAccount {
        min-height: 46vh;
    }

    .message {
        width: 80%;
    }
}

@media screen and (max-width: 430px) {
    .filters {
        left: -11rem;
        top:30px;

        flex-direction: column;
    }

    .picture-container{
        width: 35%;
    }
}


@media screen and (max-width: 410px) {
    .login {
        width: 100%;
    }

    .modal .modal-inner .dates,
    .modal .modal-inner .dates div{  
        width: 100%;
        flex-direction: column;
    }

    .modal .modal-inner .dates{
        gap:0.5rem;
    }

    .message {
        width: 90%;
    }
}
/* 360 */

@media screen and (max-width: 360px) {

    nav span {
        display: none;
    }

    table {
        min-width: 250%;
    }

    .modal textarea .title {
        min-height: 70px;
    }

    .picture-container{
        width: 40%;
    }

    .initals {
        text-align: center;
        font-size: .85rem;   
    }

    .tabs a > span p {
        display: none;
    }
}

@media screen and (max-width: 295px) {
    .background {
        display: none;
    }

    .modal textarea .title {
        min-height: 85px;
    }
}