@media (max-width: 1420px){
    .content-board {
        padding: 45px 60px;
    }
}

@media (max-width: 1300px){      
    .header-board h1 {
        font-size: 47px;
        padding-right: 15px;
    }

    .card {
        align-items: flex-start;
    }

    .content {
        overflow-x: hidden;
        width: 100%;
    }

    .content-board {
        padding: 16px 16px;
    }

    .board {
        gap: 0;
        overflow-y: auto !important;
    }

    .form-srollbar {
        padding-right: 0;
    }
    
    .header-board {
        padding-bottom: 10px;
        max-width: 900px;
    }

    .board {
        flex-direction: column;
        justify-content: normal;
    }

    .columns-content {
        display: flex;
        margin-bottom: 20px;
    }
    
    .columns-content {
        overflow-y: hidden;
        overflow-x: auto;
        width: calc(100vw - 264px);
        scrollbar-width: thin;
        scrollbar-color: #A8A8A8 transparent;
    }

    .columns {
        width: fit-content;
        height: fit-content
    }

    .bg-overlay{
        height: 600px !important;
        padding: 24px 20px 24px 20px !important;
    }

    .bg-overlay h1{
        font-size: 47px;
        padding-bottom: 20px;
    }

    .divider {
        margin: 0 20px;
    }

    #close-overlay {
        top: 30px;
        right: 30px;
    }

    .tpl-no-task{
        width: 390px;
    }

    #overlay-add-task h1 {
        padding-bottom: 15px;
    }

    .content-add-task {
        gap: 10px;
    }

    .form-add-task {
        height: 450px !important;
    }
}

@media (max-width: 1160px) {
    .header-board {
        justify-content: flex-start;
    } 

    .header-board h1{
        padding-right: 2%;
    }
}

@media (max-width: 1024px) {
   .content-board {
        width: 100vw;
   }
   
    .columns-content {
        width: calc(100vw - 192px);
   }

   .board-find-task {
        gap: 8px;
        padding: 10px 0;
    }
}

@media (max-width: 768px) {
    .header-board {
        justify-content: flex-start;
        display: contents;
    }
    
    .columns-content {
        width: calc(100vw - 32px);
        padding-bottom: 5px;
        gap: 15px;
        margin-bottom: 15px;
   }

   .content-board {
        max-width: 768px;
   }

   .card {
        touch-action: pan-x;
   }
}

@media (max-width: 520px) {
    .content {
        max-height: 100% !important;
        position: relative;
    }

    .content-board {
        padding-top: 13px !important;
        height: 100%;
        padding-left: 8px;
  
    }

    .columns-content {
        width: calc(100vw - 22px);
    }

    .header-board {
        flex-direction: column;
        align-items: start;
        padding-bottom: 60px;
    }

    #bt-add-task {
        position: absolute;
        width: 40px;
        height: 40px;
        right: 16px;
        top: 20px;
    }

    #bt-add-task p {
        display: none;
    }

    .content-select-task {
        padding: 20px 10px 30px 10px !important;
        width: clamp(250px, 85vw, 400px);
        gap: 16px;
    }

    .content-select-task p {
        font-size: 16px;
    }

    .select-tk-title {
        font-size: 36px !important;
    }

    #close-overlay-select-task {
        top: 20px;
        right: 20px;
    }

    .bts-select-task {
        bottom: 20px;
        right: 20px;
    }

    .form-task-edit input {
        width: 376px !important;
        height: 40px;
        font-size: 16px;
    }

    .form-task-edit input[type=text]{
        width: 356px !important;
        height: 40px;
        font-size: 16px;
    }

    .form-task-edit textarea {
        width: 342px !important;
        font-size: 16px !important;
    }

    form {
        padding-right: 5px;
        font-size: 16px;
    }

    .select-tk-title{
        font-size: 28px !important;
    }

    .priority {
       width: 396px;
       height: 48px;
       gap: 1px;
    }

    .bt-priority {
        width: 100px;
        height: 41px;
    }

    .tpl-no-task {
        width: 226px;
    }
}

@media (max-width: 460px) {
    .content-task-edit {
        padding: 20px 5px 70px 5px !important;
        width: clamp(250px, 95vw, 400px)  !important;
        gap: 16px;
        
    }

    .content-task-edit .form-scrollbar{
        align-items: center !important;
        margin: 0 auto;
    }

    .form-task-edit{
        gap: 10px;  
    }

    .form-task-edit input {
        width: 305px !important;
    }

    .form-task-edit input[type=text]{
        width: 285px !important;
    }

    .form-task-edit textarea {
        width: 271px !important;
    }

    .form-scrollbar {
        width: 325px;
        scrollbar-width: none !important;
    }

    .priority {
        width: 310px;
        gap: 4px;
    }

    ul {
        width: 310px;
    }

    .list-subtask {
        padding: 0 !important;
    }

    .bt-priority{
        width: 98px;
    }

    #subtask-icons{
        top: 22px;
        right: 30px;
    }
}

@media (max-height: 700px) and (max-width: 460px)  {   
    .content-select-task {
        max-height: 600px !important;
        gap: 8px;
    }
    
    .table-gap {
        gap: 8px;
    }

    .content-task-edit{
        height: 565px !important;
        gap: 8px; 
    }

    #description {
        height: auto;
    }

    .form-scrollbar {
        scrollbar-width: thin !important;
    }

    .close-task-edit{
        right: 2px !important;
    }

    .columns-content {
        max-width: 100vw;
        padding-bottom: 10px;
        gap: 15px;
        margin-bottom: 10px;
    }

    .board-find-task {
        position: relative;
        max-width: 100vw;
    }

    #bt-add-task {
        right: 16px;
        top: -45px !important;
    }

    .display-position{
        overflow-y: auto !important;
        overflow-x: hidden;
        scrollbar-width: none;
    }

    .board {
        overflow-y: unset !important;
    }
}