.fields {
      display: flex;
      flex-direction: column;
    }
    
    .fields #title {
      width: 270px;
      border: none;
      border-radius: 10px 0 0 0;
      padding: 10px 20px;
    }
    
    .fields #description {
      width: 270px;
      border: none;
      border-radius: 0 0 0 10px;
      padding: 20px;
    }
    
    .input-container input[type='submit'] {
      width: 80px;
      border: none;
      background-color: rgb(250, 95, 95);
      border-radius: 0 10px 10px 0;
    }
    
    .containerer {
      overflow-x: auto;
      display: flex;
    }
    
    .column-container {
      display: flex;
      justify-content: space-around;
      align-items: stretch; 
      margin-top: 10px;
      height: 80vh;
      color: #33475b;
      font-size: 14px;

    }

    @media (max-width: 400px) {
      .column-container {
        height: 100vh; /* Full screen height for extra small screens */
      }
    }

    @media (max-width: 600px) {
      .column-container {
        height: 100vh; /* Full screen height for small screens */
      }
    }
    
    /* Media query for medium screens */
    @media (min-width: 601px) and (max-width: 1200px) {
      .column-container {
        height: 70vh; /* Set height to 70% of viewport height for medium screens */
      }
    }
    
    /* Media query for large screens */
    @media (min-width: 1201px) {
      .column-container {
        height: 80vh; /* Revert to default height of 80% of viewport height */
      }
    }

    
    .column-container .task-column {
      background-color: #fff;
      border: 0.1px solid #c2c2c2;
      margin: 1px;
      width: 40vh;
      min-width: 200px;
      max-width: 300px;
      position: relative;
      overflow-x: hidden;
      overflow-y: auto;
      scrollbar-width: thin;
      
    }

    
    .task-listi {
      width: 100%;
      height: 90%;
      overflow-x: auto;
      scrollbar-width: thin;
    }

    
    .task-container {
      background-color: rgb(255, 255, 255);
      margin: 2px 0;
      box-shadow: rgba(60, 64, 67, 0.3) 0 1px 2px,
        rgba(60, 64, 67, 0.15) 0 2px 2px 2px;
      overflow: hidden;
    }
    
    .task-container:hover {
      background-color: #f5f5f5;
      cursor: pointer;
    }
    
    .task-header {
      color: #326AFF;
      display: flex;
      justify-content: space-between;
    }
    
    .task-header h4 {
      padding:3px;
      word-break: break-all;
    }
    
    .task-description-container {
      padding: 3px;
      color: rgb(78, 78, 78);
    }
    
    .error-container {
      height: 30px;
    }
    
    .error-message {
      text-align: center;
      margin: 30px;
      background-color: rgb(143, 29, 29);
      border-radius: 10px;
      padding: 10px 20px;
      color: rgb(255, 255, 255);
    }
    .font{
          font-size: 1rem;
    }
    .kanban-header{
      border-bottom: 1px solid rgb(223, 227, 235);
      background-color: transparent;
      padding: 16px 8px;
      align-items: center;
      color: #000;
    }
    
    .kanban-footer{
      border-top: 1px solid rgb(223, 227, 235);
      z-index: 999;
      background-color: white;
      padding:10px;
      align-items: center;
      color: #000;
      position: absolute; 
      bottom: 0; 
      width: 100%;
    }
     .kanban-footer h6 span{
      color:black;
    }