.body-add-task {
  min-height: calc(100dvh - 80px);
  width: 100%;
  background-color: var(--light-gray-bg);
}

.main-add-task {
  height: 100dvh;
  margin-left: var(--margin-left-main);
  padding-top: var(--padding-top-main);
  flex: 1;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto; 
  width: auto;
}

.main-add-task::-webkit-scrollbar{
  width: var(--scollbar-width-thin);
}

.form-add-task::-webkit-scrollbar {
  width: var(--scollbar-width-thin);
}

.add-task-fetch-template{
  height: 100%;
  max-width: 976px;
}

.h1-add-task {
  font-size: var(--font-size-47-61);
  font-weight: var(--font-weight-700);
  margin-bottom: 40px;
}

.footer-add-task {
  width: 100%;
  max-width: 976px;
  display: flex;
  justify-content: space-between;
  padding-bottom: 30px;
}

.required-text {
  display: flex;
  align-items: flex-end;
}

.required-text-mobile-view{
  display: none;
}

.add-task-content {
  display: flex;
  margin-bottom: 70px;
  justify-content: space-between;
}

.left-container,
.right-container {
  flex: 1;
  position: relative;
  height: 500px;
}

.right-container {
  overflow-x: hidden;
  overflow-y: auto;
}

.right-container::-webkit-scrollbar {
  width: var(--scollbar-width-thin);
}

.form-group {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-column {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.label-text {
  color: var(--primary-color-gray);
  font-weight: var(--font-weight-400);
  font-size: var(--font-size-16-20);
}

.text {
  color: var(--primary-color-gray);
  font-weight: var(--font-weight-400);
  font-size: var(--font-size-16-20);
}

.input-container {
  position: relative;
  width: 100%;
}

.align {
  display: flex;
  flex-direction: row;
}

.align-with-gap {
  display: flex;
  gap: 10px;
  padding-right: 1px;
}

.subtask-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  transition: background-color 0.3s ease;
}

.subtask-item:hover {
  background-color: #eeeeee;
  border-radius: var(--border-radius-input-fields);
}

.subtask-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 4px;
}

.subtask-item:hover .subtask-icons {
  opacity: 1;
}

.subtask-enum {
  padding: 0 10px;
  max-height: 120px;
}

.subtask-text {
  flex-grow: 1;
  margin-right: 10px;
  cursor: pointer;
}

.subtask-icons {
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.custom-select-container {
  position: relative;
  width: 100%;
}

.custom-options {
  position: relative;
  width: 100%;
  background-color: white;
  border-radius: var(--border-radius-input-fields);
  border: var(--border-input-fields);
}

.contacts-custom-options {
  position: relative;
  width: 100%;
  background-color: white;
  border-radius: var(--border-radius-input-fields);
  border: var(--border-input-fields);
  max-height: 190px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.custom-select-option {
  padding: 12px 21px;
  cursor: pointer;
  font-weight: var(--font-weight-400);
  font-size: var(--font-size-16-20);
}

.custom-select-option:hover {
  background-color: #eeeeee;
  border-radius: var(--border-radius-input-fields);
}

.select-icon-active:hover,
.select-icon:hover {
  background-color: var(--light-gray-bg);
  border-radius: 50%;
}

.error-select-option {
  padding: 12px 21px;
  font-weight: var(--font-weight-400);
  font-size: var(--font-size-16-20);
}

.contacts-custom-select-option {
  padding: 12px 21px;
  cursor: pointer;
  font-weight: var(--font-weight-400);
  font-size: var(--font-size-16-20);
  display: flex;
  flex-direction: column;
}

.contacts-custom-select-option:hover {
  background-color: #eeeeee;
  border-radius: var(--border-radius-input-fields);
}

.circle-and-name {
  display: flex;
  align-items: center;
  gap: 10px;
}

.name-and-img {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.custom-select-focused {
  padding: 12px 21px 12px 21px;
  font-weight: var(--font-weight-400);
  font-size: var(--font-size-16-20);
  background-color: white;
  height: 48px;
  border-radius: var(--border-radius-input-fields);
  border: 1px solid var(--blue);
  color: black;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.contacts-custom-select-option-selected {
  padding: 12px 21px;
  cursor: pointer;
  font-weight: var(--font-weight-400);
  font-size: var(--font-size-16-20);
  background-color: var(--primary-color-gray) !important;
  border-radius: var(--border-radius-buttons);
  display: flex;
  flex-direction: column;
  color: white;
}

.show-selected-contacts {
  display: flex;
  gap: 5px;
  margin-top: 10px;
}

.custom-input {
  color: black;
  font-weight: var(--font-weight-400);
  font-size: var(--font-size-16-20);
  border: none;
  outline: none;
}

.custom-input::placeholder {
  color: black;
  opacity: 1;
}

.error-message-required {
  position: absolute;
  bottom: -18px;
  left: 0;
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-400);
  color: red;
}

.custom-task {
  display: flex;
  align-items: center;
  gap: 15px;
}

@media screen and (max-width: 1400px) {
  .main-add-task {
    padding-right: 80px;
  }

  .add-task-fetch-template{
    max-width: calc(900px - (1400px - 100vw) * 0.25);
  }
}

@media screen and (max-width: 1150px) {
  .main-add-task {
    margin-left: 340px;
    padding-right: 85px;
  }

  .h1-add-task {
    margin-bottom: 15px;
}

  .right-container {
    scrollbar-gutter: unset;
  }

  
  .align-with-gap {
    gap: 32px;
  }
  
  .required-text {
    display: none;
  }

  .required-text-mobile-view{
    display: flex;
  }

  .add-task-content {
    flex-direction: column;
    gap: 30px;
    margin-bottom: 30px;
  }

  .form-add-task{
  overflow-y: auto;
  height: calc(100% - 255px);
  }

  .footer-add-task {
  position: absolute;
  right: 85px;
  bottom: 20px;
  justify-content: flex-end;
  padding-bottom: 0;
  }
}

@media screen and (max-width: 992px) {
  .main-add-task {
    margin-left: 230px;
    padding-right: 80px;
    scrollbar-gutter: unset;
  }
}

@media screen and (max-width: 768px) {
  .main-add-task {
    margin-left: var(--margin-left-main-responsive);
  }

  .form-add-task{
  height: calc(100% - 243px);
  }

  .form-add-task::-webkit-scrollbar {
    display: none;
  }

  .footer-add-task {
  bottom: 100px;
  }
}

@media screen and (max-width: 600px) {
  .main-add-task {
    margin-left: calc(54px - (600px - 100vw) * 0.17); 
    padding-right: calc(60px - (600px - 100vw) * 0.19);
  }

  .footer-add-task {
    right: calc(60px - (600px - 100vw) * 0.19);
  }

  .align-with-gap {
    gap: 20px;
  }
}

@media only screen and (max-width: 450px){
  /* .footer-add-task{
    position: unset;
  } */
}