#tasks-app.tasks {
  .tasks__top {

    .v-select {
      width: 212px;
    }

    .btn2 {

    }

    .controls {
      display: flex;
      align-items: center;
      gap: 20px;
      padding-top: 20px;
    }

    .custom-checkbox {
      margin-bottom: 0;
    }

    .tasks__top-checkboxes {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

  }

  .tasks__groups {
    padding: 20px 0;
  }

  .tasks__filters {
    display: flex;
    align-items: end;
    gap: 30px
  }

  .tasks__search {
    display: flex;
    flex-direction: column;

    & input {
      margin-bottom: 0;
      height: 22px;
    }
  }

  .tasks__dates-block {
    display: flex;
    gap: 20px;
  }


  .sidebar-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .isTaskPanelOpen {
    right: 0 !important;
  }

  .sidebar .sidebar-content .form-group .form-control {
    margin-bottom: 0;
  }


  .errordate {
    color: red;
  }

  .task__btn {
    padding: 5px 30px;
    font-size: 16px !important;
    color: #fff;
  }

  .task__create-btn {
    flex: 0.8 1 0%;
    background-color: #28a745;
    border-color: #28a745;
  }

  .task__save-btn {
    flex: 0.6 1 0%;
    background-color: #28a745;
    border-color: #28a745;
  }

  .task__close-btn {
    color: #000;
  }

  .vue-datepicker__input {
    margin-left: 0 !important;;
  }

  .vue-datepicker__control {
    margin-right: 0 !important;
  }

  .completed {
    opacity: 0.4;
  }
}