@import "../../../_variables";

.btn-secondary:not(:disabled):not(.disabled).active {
  border-color: transparent !important;
  color:$checkBoxTextColor !important;
}

.btn-secondary:not(:disabled):not(.disabled).active span{
  color:$checkBoxTextColor !important;
}

.white {
  background-color: #fff !important;
  margin: 0px 10px 10px 10px;
  border-radius: 5px !important;
  border: 1px solid #ccc;
  color: #666;
  padding-left: 0px;
  padding-right: 0px;
  font-size: 0.8em;
  box-shadow: 0 4px 8px rgba(172, 186, 200, 0.1);
}

.white.active {
  background-color: $checkBoxBackgroundColor !important;
  border: 1px solid $checkBoxBackgroundColor;
  color: $checkBoxTextColor;
}

.green {
  background-color: #fff !important;
  border: 1px solid #ccc;
  color: #666;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 0.8em;
}

.green.active {
  background-color: $checkBoxBackgroundColor !important;
  color: $checkBoxTextColor;
  border: 1px solid $checkBoxBackgroundColor !important;
}

/* Gestion automatique des tailles */

.auto-width {
  display: flex;
}

.auto-width .btn {
  flex-basis: 100%;
  align-content: center;
  align-items: center;
  justify-content: center;
  display: flex;
  line-height: 16px;
  padding: 5px;
  min-height: 34px;
  box-shadow: 0 4px 8px rgba(172, 186, 200, 0.1);
}

.single-response {
  display: flex;
}

.single-response label,
.single-response div {
  flex-basis: 100%;
}

.btn-response {
  flex: 1 2 25%;
}

.single-response label:not(.btn) {
  display: flex;
  margin-bottom: 0px;
  align-items: center;
  padding-right:15px;
}

.single-response label.btn {
  max-height: 35px;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1;
  white-space: nowrap;
}

.single-response label.btn:not(:last-child):not(.dropdown-toggle) {
  border-radius: 0px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.single-response label.btn:not(:first-child) {
  border-radius: 0px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.btn-group-toggle .white:first-child {
  margin-left: 0px;
}

.btn-group-toggle .white:last-child {
  margin-right: 0px;
}

.error-radio-custom {
  font-size: 80%;
  color: #dc3545;
  margin-top: 0px;
}

@media (max-width: 576px) {
  .error-radio-custom {
    margin-top: 0.25rem;
  }
}

@media (max-width: 768px) {
  .auto-width {
    display: block;
  }

  .auto-width .btn {
    flex-basis: unset;
    width: 100%;
    display: block;
    padding-top: 15px;
    padding-bottom: 15px;
    line-height: 1;
    font-size: 15px;
    border-radius: 12px !important;
    box-shadow: 0 4px 8px rgba(172, 186, 200, 0.1);
  }

  .single-response {
    display: block;
  }

  .single-response label,
  .single-response div {
    flex-basis: unset;
    width: 100%
  }

  .btn-response {
    flex: 1 1 50%;
  }

  .single-response label.btn {
    max-height: 45px;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 15px;
    margin-top: 0px;
  }

  .single-response label.btn:not(:last-child):not(.dropdown-toggle) {
    border-radius: 0px;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
  }

  .single-response label.btn:not(:first-child) {
    border-radius: 0px;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
  }
  .btn-group-toggle .white:first-child {
    margin-top: 0px;
  }
}



.break{
  flex-basis: 100%;
  height: 0;
}