input:not(.checkbox input, input.search),
textarea,
.selected-option,
select {
    width: 100%;
    padding: 12px 16px;
    box-sizing: border-box;
    border: var(--border);
    border-radius: var(--borderRadius);
    font-size: inherit;
    font-family: inherit;
    background-color: var(--white);
    min-height: 45px;
    color: var(--black);
}

select{
    cursor: pointer;
}

select:focus-visible{
    outline: none;
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(0.6);
}

input::placeholder,
textarea::placeholder,
.selected-option::placeholder {
    opacity: 0.4;
}

input:focus,
textarea:focus {
    outline: none;
}

input[type='checkbox']:not(.checkbox input) {
    min-height: unset !important;
}

/* hover on inputs */
input:hover,
textarea:hover,
.selected-option:hover,
.search-bar:not(.utilities .search-bar):hover,
.checkmark:hover,
.radiomark:hover,
.people-picker:hover,
.proposal-picker:hover,
.toggle-switch:hover,
.checkbox-group .item:hover .checkmark,
.radio-group .item:hover .radiomark,
.tree-item:hover .checkmark,
.tree-item:hover .radiomark,
select:hover {
    border-color: var(--mediumgrey)!important;
}

/*** Checkboxes & Radio buttons***/
.checkbox-group,
.radio-group {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    -webkit-user-select: none;
    user-select: none;
    /*margin-top: 8px;*/ /*é preciso para ter margem das labels nos formulários (ver form de criar proposta)*/
}

.section-form-container .checkbox-group,
.section-form-container .radio-group {
    background-color: var(--white);
    border: var(--border);
    border-radius: var(--borderRadius);
    padding: 12px 16px;
}

.checkbox-group .item,
.radio-group .item {
    display: flex;
    gap: 8px;
    width: fit-content;
    cursor: pointer;
}

.checkbox-group .item p {
    margin-top: 1px;
    -webkit-user-select: none;
    user-select: none;
    font-weight: 300;
}

label.checkbox,
label.radio-button{
    display: block;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;  
    display: flex;
    gap: 8px;
}

.checkbox-text {
    font-weight: 300;
    -webkit-user-select: none;
    user-select: none;
    margin-top: 1px;
}

label.checkbox input,
label.radio-button input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

label.checkbox .checkmark,
label.radio-button .radiomark {
    position: relative;
    top: 0;
    left: 0;
    height: 16px;
    width: 16px;
    background: var(--white);
    border-radius: var(--borderRadius);
    border: var(--border);
    display: block;
    cursor: pointer;
    flex-shrink: 0;
}

label.radio-button .radiomark {
    border-radius: 100%;
}

label.checkbox input:checked ~ .checkmark,
label.radio-button input:checked ~ .radiomark {
    background-color: var(--boardPrimary);
}

label.checkbox input:checked ~ .checkmark:after,
label.radio-button input:checked ~ .radiomark:after {
    display: block;
}

label.checkbox .checkmark:after {
    left: 5.5px;
    top: 2px;
    width: 3px;
    height: 7px;
    border: solid var(--alwaysWhite);
    border-width: 0 0.15em 0.15em 0;
    transform: rotate(45deg);
}

label.radio-button .radiomark:after {
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    background-color: var(--alwaysWhite);
    border-radius: 100%;
    transform: translate(-50%, -50%);
}

label.checkbox .checkmark:after,
label.radio-button .radiomark:after {
    content: "";
    position: absolute;
    display: none;
}

label.checkbox.disabled .checkmark,
label.radio-button.disabled .radiomark{
    cursor: default;
}

.form-group.disabled input[type="checkbox"],
.form-group.disabled .checkmark,
.form-group.disabled input[type="radio"],
.form-group.disabled .radiomark{
    pointer-events: none;
}

label.checkbox.disabled .checkmark,
.form-group.disabled input[type="checkbox"] ~ .checkmark,
label.radio-button.disabled .radiomark,
.form-group.disabled input[type="radio"] ~ .radiomark{
    cursor: default;
    opacity: 0.3;
}

label.checkbox.disabled .checkmark:hover,
.form-group.disabled input[type="checkbox"] ~ .checkmark:hover,
label.radio-button.disabled .radiomark:hover,
.form-group.disabled input[type="radio"] ~ .radiomark:hover{
    border-color: var(--border);
}

.checkbox-group.users > .item {
    align-items: center;
}

label.checkbox.disabled {
    opacity: 0.4;
    filter: contrast(0.7);
}

/*** Search bars ***/
.search-bar{
    padding: 8px 16px;
    border-radius: var(--borderRadius);
    display: flex;
    align-items: center;
    background-color: var(--white);
    border: var(--border);
    box-sizing: border-box;
}

.search-bar input {
    flex: 1;
    padding: 8px 8px;
    font-size: inherit;
    border: none;
    background-color: transparent;
}

.search-bar input:focus,
input.mobile-search:focus {
    border: none;
    outline: none;
}

nav .search-bar {
    border-top: none;
    border-right: none;
    border-left: none;
    border-radius: 0;
}

.titles-bar .search-bar {
    width: 100%;
    box-shadow: 0px 2px 4px #0000000a;
}

/* People Picker */
.people-picker {
    background-color: var(--white);
    border: var(--border);
    border-radius: var(--borderRadius);
    padding: 4px;
    display: flex;
    gap: 4px;
    position: relative;
    box-sizing: border-box;
    align-items: flex-start;
    flex-wrap: wrap;
    -webkit-user-select: none;
    user-select: none;
}

.people-picker .loader-wrapper,
.proposal-picker .loader-wrapper {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: var(--borderRadius);
    overflow: hidden;
}

.people-picker .loader-bar,
.proposal-picker .loader-bar {
    left: 0;
    z-index: 3;
    bottom: 0;
}

.people-picker input {
    padding: 0 0 0 8px!important;
    border: none!important;
    min-width: 230px;
    height: 40px;
    min-height: unset!important;
    flex: 1;
}

.people-picker .selected-user {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--background);
    border: var(--border);
    width: -moz-fit-content;
    width: fit-content;
    border-radius: 2px;
    padding: 0px 12px;
    flex-shrink: 0;
    height: 40px;
    box-sizing: border-box;
}

.people-picker-options,
.proposal-picker-options{
    background-color: var(--white);
    position: absolute;
    top: calc(100% + 0px);
    border: var(--border);
    border-radius: var(--borderRadius);
    left: 0;
    width: 100%;
    overflow-y: auto;
    max-height: 50vh;
    box-shadow: 0px 8px 8px #00000008;
    z-index: 2;
    box-sizing: border-box;
}

.people-picker-options.open-upward,
.proposal-picker-options.open-upward {
    top: auto;
    bottom: calc(100% + 0px);
    box-shadow: 0px -8px 8px #00000008;
}

.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: all 0.2s ease;
}

.fade-slide-enter-from,
.fade-slide-leave-to {
  opacity: 0;
  transform: translateY(-5px);
}

.fade-slide-enter-to,
.fade-slide-leave-from {
  opacity: 1;
  transform: translateY(0);
}

.people-picker-options > div,
.proposal-picker-options > div {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 10px;
}

.proposal-picker-options > div {
    padding: 8px 12px;
    max-width: 100%;
}

.people-picker-options > div:hover,
.proposal-picker-options > div:hover {
    background-color: var(--background);
}

.people-picker-empty > div,
.proposal-picker-empty p {
    padding: 14px 10px !important;
    color: grey;
    cursor: unset;
}

.people-picker-empty > div:hover,
.proposal-picker-empty > div:hover {
    background-color: var(--white);
}

.people-picker-options .user,
.proposal-picker-options .user {
    height: 32px;
    width: 32px;
    padding: 0;
    border-radius: 100%;
}

.people-picker-options .board,
.people-picker .selected-user .board,
.proposal-picker-options .board,
.proposal-picker .selected-proposal .board {
    color: var(--darkgrey);
    font-size: 0.8rem;
}

.proposal-picker-options .proposal-info > p:last-child {
    font-size: 0.8em;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.proposal-picker-options .proposal-info > p:first-child {
    word-break: break-word;
}

.proposal-info {
    max-width: calc(100% - 40px);
}

.people-picker .selected-user .board,
.proposal-picker .selected-proposal .board {
    max-width: 160px;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

.people-picker img.user,
.proposal-picker img.user {
    padding: 0;
    border-radius: 100%;
    height: 24px;
    width: 24px;
    object-fit: cover;
}

.people-picker .group-img,
.proposal-picker .group-img {
    height: 26px;
    width: 26px;
}

.form-group.error .people-picker,
.form-group.error .proposal-picker {
    border-color: var(--red);
}

.people-picker > input,
.proposal-picker > input {
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    line-clamp: 1;
}
 
/* How many proposals are connected to a search result (#358). The same pill the associations icon
   already uses for its number (.mark.has-number.secondary in styles.css), written out here instead
   of reused because that one is positioned absolutely against an icon and this one is an item in a
   flex row. Pushed to the end of the row so the proposal name keeps the width it has today. */
.proposal-picker-options .association-count {
    margin-left: auto;
    flex-shrink: 0;
    min-width: 20px;
    height: 20px;
    padding: 0px 6px;
    border-radius: 20px;
    background-color: var(--boardPrimary);
    color: var(--white);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.proposal-picker-options .proposal-icon {
    background-color: var(--white);
    height: 18px;
    width: 18px;
    border-radius: 100%;
    border: var(--border);
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.proposal-picker input {
    border: none!important;
    min-height: unset!important;
    padding: 8px!important;
}

/* proposal-picker.vue always renders this .form-group as the picker's direct parent, so this
   reaches all three mounts of the control and nothing else. It is what lets the two columns
   below be given up when the CONTROL is narrow rather than when the SCREEN is - the slider at
   .manage-associations is a 284px container on every desktop viewport. */
.form-group:has(> .proposal-picker) {
    container-type: inline-size;
}

/* The results panel is taken out of the layout flow (.proposal-picker-options above:
   position absolute, up to 50vh tall, z-index 2), so it used to be painted straight over the
   proposals already associated and hid them for as long as a search was running. Results and
   associations get a column each instead, so both stay visible at the same time.
   The panel deliberately STAYS out of the flow: laying it out as a grid item puts the two side
   by side just as well, but then everything below the picker - the attachments drop zone and
   the form buttons - is shoved down the page on every keystroke that returns results and
   springs back when the search is cleared.
   Only when there is something to keep visible: .selected-list is rendered only once proposals
   are associated, and until then the control is laid out exactly as it was. */
.proposal-picker:has(.selected-list) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
}

.proposal-picker .search-bar {
    position: relative;
    grid-column: 1;
    grid-row: 1;
}

.proposal-picker .selected-list {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    grid-column: 2;
    grid-row: 1;
}

.proposal-picker .selected-proposal {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--white);
    border: var(--border);
    width: -moz-fit-content;
    width: fit-content;
    padding: 0px 12px;
    flex-shrink: 0;
    height: 40px;
    box-sizing: border-box;
}

.selected-proposal p {
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* new user select grid */
.select-user-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: var(--border);
    border-radius: var(--borderRadius);
    box-sizing: border-box;
    padding: 0 !important;
    gap: 0;
}

.select-user-header,
.select-user-item {
    display: flex;
    cursor: default !important;
    width: 100% !important;
    gap: 0 !important;
    background-color: var(--white);
    border-bottom: var(--border);
}

.select-user-wrapper .header-cell,
.select-user-wrapper .grid-cell{
    padding: 8px;
}

.select-user-wrapper .header-cell p{
    font-weight: 400;
    color: var(--darkgrey);
    font-size: 0.8rem;
}

.select-user-item {
    min-height: 45px;
}

.select-user-item:last-child {
    border-bottom: none;
}

.select-user-wrapper .name-cell * {
    cursor: pointer;
}

.select-user-wrapper .grid-cell {
    display: flex;
    align-items: center;
}

.select-user-wrapper .grid-cell:last-child {
    border-right: none;
}

.select-user-wrapper .grid-cell .label {
    font-size: 0.8rem;
    color: var(--darkgrey);
    margin-bottom: 2px;
    display: none;
}

.select-user-wrapper .checkbox-cell {
    width: 32px;
    justify-content: center;
    flex-shrink: 0;
    padding-right: 0;
}

.select-user-wrapper .name-cell {
    display: flex;
    gap: 8px;
}

.select-user-wrapper .header-cell:not(.checkbox-cell),
.select-user-wrapper .grid-cell:not(.checkbox-cell){
    flex: 1;
}

/* .header-cell:not(:first-child, :last-child),
.grid-cell:not(:first-child, :last-child){
    max-width: 200px;
} */

.select-user-wrapper .custom-select {
    max-width: 200px;
}

.select-user-wrapper .selected-option, .select-user-wrapper input[type="text"] {
    padding: 4px 8px;
    min-height: unset;
}

/*disabled state*/
.disabled .selected-option:not(.participant-user .selected-option) {
    border-color: var(--mediumgrey);
    background-color: var(--lightgrey);
}

.disabled .selected-option > p{
    opacity: 0.6;
}

/** custom select **/
.custom-select-dropdown-enter-active,
.custom-select-dropdown-leave-active {
  transition: transform 0.2s ease, opacity 0.15s ease;
  transform-origin: top;
}

.custom-select-dropdown-enter-from,
.custom-select-dropdown-leave-to {
  transform: scaleY(0.95);
  opacity: 0;
}

.custom-select-dropdown-enter-to,
.custom-select-dropdown-leave-from {
  transform: scaleY(1);
  opacity: 1;
}


/*Graph Associated Proposals*/
#graph .selected-proposal p {
    flex: 1;
    max-width: unset;
}

#graph .selected-proposal {
    width: 100%;
    background-color: var(--background);
}

#graph .selected-list {
    flex-direction: column;
    max-height: 350px;
    flex-wrap: nowrap;
    overflow: auto;
}

.manage-associations {
    width: calc(100vw - 72px);
    max-width: 300px;
    background-color: var(--white);
    border: var(--border);
    border-radius: var(--borderRadius);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    filter: drop-shadow(rgba(0, 0, 0, 0.05) 0px 2px 10px);
}

/* The rule above is a PHONE rule - calc(100vw - 72px) is 303px at a 375px viewport and the
   max-width is what keeps it honest there - and nothing ever relaxed it, so the panel was 300px
   on a 1920px screen too. That makes the .form-group inside it a 300px query container, which
   trips `@container (max-width: 480px)` at the end of this file, which stacks the picker and puts
   the search box UNDER the associated proposals. The results panel hangs off the search bar, so it
   then descends out of the bottom of #graph - which is overflow: hidden and does not scroll. That
   is issue #358, and the container query is not the cause of it: being 300px wide inside a ~1020px
   #graph is.
   600px of content box clears the 480px threshold, so the two columns come back on their own
   (292px each, which fits both the search box's placeholder and a proposal chip), and 616px of
   border box still sits comfortably inside #graph - ~892px at the narrowest viewport this
   breakpoint covers. Below it the phone rule above is untouched, which is what keeps #299 round
   two - "The search box is squeezed and you can't read it's label in its entirety" - answered. */
@media (min-width: 992px) {
    .manage-associations {
        max-width: 600px;
    }
}

.associations-list-wrapper {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
}

.associated-proposals-wrapper {
    position: relative;
    margin-bottom: 8px;
}

.associated-proposals-wrapper .header {
  background-color: var(--white);
  border: var(--border);
  border-radius: var(--borderRadius);
  display: flex;
  padding: 12px 16px;
  gap: 16px;
  min-height: 56px;
  box-sizing: border-box;
  align-items: center;
  cursor: pointer;
  position: relative;
  z-index: 4;
}

.associated-proposals-wrapper .header:hover {
  border-color: var(--mediumgrey);
}

.associated-proposals-wrapper .header-title {
  flex: 1;
  display: flex;
  gap: 16px;
  align-items: center;
}

.associated-proposals-wrapper .content {
  background-color: var(--white);
  border: var(--border);
  border-radius: var(--borderRadius);
  padding: 8px;
  position: absolute;
  width: 100%;
  box-sizing: border-box;
  z-index: 3;
  top: calc(100% - 1px);
  box-shadow: 0 8px 16px -4px rgb(0 0 0 / 10%);
}

.zoom-controls {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  filter: blur(0px);
  transition: .4s ease filter;
}

.zoom-controls button {
    width: 50px;
    padding: 8px;
    height: 50px;
}

.manage-associations .form-group {
    margin-bottom: 0;
}

.manage-associations button {
    padding: 16px 24px !important;
    height: unset !important;
}

#graph {
  width: 100%;
  flex: 1;
  box-sizing: border-box;
  position: relative;
  border: var(--border);
  border-radius: var(--borderRadius);
  overflow: hidden;
  background-color: var(--white);
  margin-bottom: -56px;
    background-color: var(--white);
    --dot-bg: var(--lightestgrey);
    --dot-color: var(--mediumgrey);
    --dot-size: 1px;
    --dot-space: 16px;
    background: linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space), linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space), var(--dot-color);
  -webkit-user-select: none;
  user-select: none;
}

#graph svg {
  width: 100%;
  height: 100%;
}

#graph button.active:not(.secondary-btn) {
    border-color: var(--mediumgrey);
    background-color: var(--lightestgrey);
}

#graph button.secondary-btn.active {
    opacity: 0.9;
}

#graph button {
    filter: drop-shadow(0px 2px 10px rgba(0,0,0,0.05));
}

.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  color: #888;
}

.empty-graph {
  position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    width: min(300px, calc(100% - 24px)) !important;
    text-align: center;
    line-height: 1.4;
    margin-inline: auto;
}


/* new custom select */
.custom-select.new {
  position: relative;
  width: 100%;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.2;
  user-select: none;
  -webkit-user-select: none;
}

.custom-select__label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
}

.custom-select__label-mandatory {
    color: var(--darkgrey);
    font-size: var(--text-s);
}

.custom-select__trigger {
    display: flex;
    width: 100%;
    height: 48px;
    justify-content: space-between;
    gap: 12px;
    border: var(--border);
    border-radius: var(--borderRadius);
    color: inherit;
    padding: 12px 16px;
    transition: border-color 160ms ease, box-shadow 160ms ease;
    text-align: left;
}

.custom-select__trigger:focus {
    outline: none;
}

.custom-select__trigger.small-custom-select {
    padding: 4px 8px;
    height: auto;
}

.custom-select__trigger.text-custom-select {
  padding: 0;
  height: auto;
  background: none;
  border: none;
  width: auto;
  gap: 4px;
}

.custom-select__trigger.text-custom-select:hover {
  border: none!important;
  opacity: 0.7;
}

.custom-select__value {
  display: block;
  min-width: 0;
  align-items: center;
  gap: 8px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-select__value > :deep(*) {
  min-width: 0;
}

.custom-select__value--placeholder {
  color: var(--darkgrey);
}

.custom-select__chevron {
    display: inline-flex;
    transition: transform 160ms ease;
}

.custom-select--open .custom-select__chevron {
  transform: rotate(180deg);
}

.custom-select__hint,
.custom-select__error {
  margin: 6px 0 0;
  font-size: var(--text-s);
}

.custom-select__hint {
  color: var(--darkgrey);
}

.custom-select__error {
  color: var(--red);
}

.custom-select--disabled {
  color: var(--mediumgrey);
}

.custom-select--disabled .custom-select__trigger {
  background: #f3f5f8;
  cursor: not-allowed;
}

.custom-select--error .custom-select__trigger {
  border-color: var(--red);
}


/* new base dropdown */
.base-dropdown__backdrop {
  position: fixed;
  z-index: 19;
  inset: 0;
  background: rgba(15, 23, 42, 0.36);
}

.base-dropdown__content {
  position: fixed;
  z-index: 20;
  overflow-x: hidden;
  overflow-y: auto;
  border: var(--border);
  border-radius: var(--borderRadius);
  background: var(--white);
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.14);
  list-style: none;
  margin: 0;
  padding: 4px;
  box-sizing: border-box;
  display: block;
  height: auto;
  cursor: default;
}

.base-dropdown__content--mobile {
  display: flex;
  flex-direction: column;
  border-radius: 4px 4px 0 0;
  touch-action: pan-y;
  max-width: 100%;
}

.base-dropdown__mobile-header {
  position: relative;
  flex: 0 0 auto;
  padding: 32px 20px 16px 20px;
  min-height: 16px;
}

.base-dropdown__mobile-handle {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 48px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateX(-50%);
  cursor: grab;
  touch-action: none;
}

.base-dropdown__mobile-handle:active {
  cursor: grabbing;
}

.base-dropdown__mobile-handle span {
  display: block;
  width: 48px;
  height: 4px;
  margin: -8px auto 8px auto;
  border-radius: var(--borderRadius);
  background: var(--lightgrey);
}

.base-dropdown__mobile-handle:hover,
.base-dropdown__mobile-close:hover {
    border: none !important;
}

.base-dropdown__mobile-heading {
  min-width: 0;
}

.base-dropdown__mobile-title,
.base-dropdown__mobile-description {
  margin: 0 32px 0 0;
}

.base-dropdown__mobile-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
}

.base-dropdown__mobile-description {
  margin-top: 8px;
  color: var(--darkgrey);
  font-size: 0.85rem;
  line-height: 1.3;
}

.base-dropdown__mobile-close {
  position: absolute;
  top: 26px;
  right: 18px;
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mediumgrey);
  cursor: pointer;
  font: inherit;
  font-size: 28px;
  line-height: 1;
  min-width: unset !important;
}

.base-dropdown__content-list {
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-direction: column;
}

.base-dropdown__content--mobile .base-dropdown__content-list {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0px 8px 8px 8px;
}

.base-dropdown__main-wrapper .base-dropdown__option,
.base-dropdown__main-wrapper .base-dropdown__empty {
  border-radius: calc(var(--borderRadius) / 2);
  padding: 12px;
  line-height: 1.3;
}

.base-dropdown__main-wrapper .base-dropdown__option {
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.base-dropdown__main-wrapper .base-dropdown__option--active {
  background: var(--lightergrey);
}

.base-dropdown__main-wrapper .base-dropdown__option--selected {
  font-weight: 600;
}

.base-dropdown__main-wrapper .base-dropdown__option--disabled {
  color: var(--darkgrey);
  cursor: not-allowed;
  opacity: 0.5;
}

.base-dropdown__main-wrapper .base-dropdown__empty {
  color: var(--mediumgrey);
}

.base-dropdown-fade-enter-active,
.base-dropdown-fade-leave-active {
  transition: opacity 120ms ease, transform 120ms ease;
}

.base-dropdown-fade-enter-from,
.base-dropdown-fade-leave-to {
  opacity: 0;
  transform: translateY(-4px);
}

.base-dropdown-fade-mobile-enter-active,
.base-dropdown-fade-mobile-leave-active {
  transition: opacity 220ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.base-dropdown-fade-mobile-enter-from,
.base-dropdown-fade-mobile-leave-to {
  opacity: 0;
  transform: translateY(24px);
}

@media (max-width:640px) {
  .base-dropdown__main-wrapper .base-dropdown__option,
  .base-dropdown__main-wrapper .base-dropdown__empty {
    padding: 20px 12px;
    border-bottom: var(--border);
    border-radius: var(--borderRadius);
  }

  .base-dropdown__main-wrapper .base-dropdown__option:last-child {
    border-bottom: none;
  }
}

/* action menu */
.action-menu__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--borderRadius);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

.action-menu__trigger--icon {
  width: 36px;
  height: 36px;
  padding: 0;
}

.action-menu__trigger:disabled {
  color: var(--mediumgrey);
  cursor: not-allowed;
}

/* switch */
.switch {
  position: relative;
  display: inline;
  width: 35px;
  height: 22px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch .slider-input {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--white);
  -webkit-transition: 0.7s;
  transition: 0.7s;
  border: 1px solid var(--white);
}

.switch .slider-input:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: -3px;
  bottom: -2px;
  background-color: var(--boardPrimary);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border: solid 1px var(--boardPrimary);
}

.switch input:checked+.slider-input {
  background-color: transparent;
}

.switch input:focus+.slider-input {
  box-shadow: 0 0 1px var(--boardPrimary);
}

.switch input:checked+.slider-input:before {
  -webkit-transform: translateX(31px);
  -ms-transform: translateX(31px);
  transform: translateX(15px);
  background: var(--boardPrimary);
  -webkit-transition: 0.7s;
  transition: 0.7s;
  border: solid 1px var(--boardPrimary);
}

.switch .slider-input.round {
  border-radius: 24px;
  border-color: var(--boardPrimary);
}

.switch .slider-input.round:before {
  border-radius: 50%;
  border-color: var(--boardPrimary);
}







@media (max-width:600px)  {
    .select-user-header {
        display: none;
    }

    .select-user-item {
        display: grid!important;
        grid-template-columns: auto 1fr;
        padding: 4px 0;
    }

    .select-user-wrapper .checkbox-cell {
        grid-row: 1;
        grid-column: 1;
    }

    .select-user-wrapper .grid-cell:not(.checkbox-cell) {
        grid-column: 2;
    }

    .select-user-wrapper .custom-select {
        max-width: 98%;
        margin-top: 2px;
    }

    .select-user-wrapper .grid-cell.role,
    .select-user-wrapper .grid-cell.substitutes {
        flex-direction: column;
        align-items: flex-start;
    }

    .select-user-wrapper .grid-cell .label {
        display: block;
    }

    .zoom-controls.faded,
    #graph svg.faded {
        filter: blur(4px);
        opacity: 0.5;
        pointer-events: none;
    }

    /* Two columns do not fit on a phone. Stacking them back the way they were would put the
       associated proposals under the results panel again, so the list goes ABOVE the search
       box instead - the panel then hangs into empty space below everything the control owns,
       the way the people picker already works. */
    .proposal-picker:has(.selected-list) {
        grid-template-columns: minmax(0, 1fr);
    }

    .proposal-picker .selected-list {
        grid-column: 1;
        grid-row: 1;
        margin-bottom: 8px;
    }

    .proposal-picker .search-bar {
        grid-column: 1;
        grid-row: 2;
    }
}

/* Two columns do not fit in a narrow CONTROL either, and the media query above cannot see that:
   it asks about the viewport, so a 284px picker on a 1920px screen never reaches it - which is
   exactly the "Manage associations" slider on every desktop. Below 480px of container each
   column is under 232px, which fits neither the search box's own placeholder (113px of text
   plus 76px of icons and padding) nor a single associated-proposal chip (214px, and it does not
   shrink: .selected-proposal is fit-content, flex-shrink 0). So the control gives up the two
   columns and stacks, the same way it already does on a phone - list above the box, so the
   results panel still hangs into empty space below everything the control owns.

   This block belongs at the END of the file. `.proposal-picker .search-bar` and
   `.proposal-picker .selected-list` above carry the same specificity, so placed any earlier
   they would win, leave .selected-list in column 2, and collapse the search bar into a 0px
   track. */
@container (max-width: 480px) {
    .proposal-picker:has(.selected-list) {
        grid-template-columns: minmax(0, 1fr);
    }

    .proposal-picker .selected-list {
        grid-column: 1;
        grid-row: 1;
        margin-bottom: 8px;
    }

    .proposal-picker .search-bar {
        grid-column: 1;
        grid-row: 2;
    }
}