/*checkboxes zone start*/

.checkboxes-zone {
    display: flex;
    height: 40px;
    user-select: none;
    justify-content: center;
    gap: 1vw;
    flex-flow: row nowrap;
    margin-bottom: 10px;
}

.label-for-checkbox {                                                              
    transition: 0.3s;
    cursor: pointer;
}

.checkbox-zone {
    transition: 0.3s;
    display: flex;
    gap: 10px;
    align-items: center;
    text-align: center;
    cursor: pointer;
    padding: 10px;
    border-radius: 10px;
}

.checkbox-zone label {
    font-size: 15px;
}

.clear-both {
    clear: both;
}

.checkbox-zone input {
    height: 20px;
    width: 20px;
    position: relative; 
    cursor: pointer;
    accent-color: var(--surface-1);
}

@media (hover: hover) {
  .checkbox-zone:hover {
      background-color: var(--surface-1);
      color: var(--alternative-text);
  }
}

@media screen and (max-width: 700px) {
    .checkbox-zone input{
        height: 30px;
        width: 30px;
    }
    .checkbox-zone{
        justify-content: left;
        width: fit-content;
        margin: auto;
    }
    .checkboxes-zone{
        flex-flow: column nowrap;
        justify-content: center;
        height: 150px;
        width: 100%;
        margin: auto;
    }
}


.settings-checkboxes-zone {
  display: flex;
  flex-flow: column nowrap;
  gap: 10px;
}

.settings-checkbox-zone {
  display: flex;
  align-items: center;
  width: 100%;
  transition: 0.3s;
}

.settings-checkbox-zone label {
  display: flex;
  width: 100%;
  font-size: 13pt;
}

.settings-checkbox-zone input {
  height: 18px;
  width: 18px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  accent-color: var(--surface-1);
  cursor: pointer;
}