/*  ############################ Dropdown  ############################*/
.select-menu{
	min-width: 100px;
	position: relative;
	& .select-btn{
		position: relative;
		height: 30px;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 0.8125rem;
		border-radius: var(--border-radius-S360);
		background: var(--background-S360);
		border: 0.5px solid var(--color-border-S360);
		cursor: pointer;
		user-select: none;
		color: var(--color-text-S360);

		& .icon {
			font-size: 0.8125rem;
			transition: .3s;
			user-select: none;
			padding-right: 10px;
			color: var(--color-border-S360);
		}
	}
	& .options{
		z-index: 10;
		position: absolute;
		min-width: 250px;
		width: max-content;
		min-width: 100%;
		max-width: 700px;
		height: fit-content;
		margin-top: 5px;
		padding: 5px;
		border-radius: var(--border-radius-S360);
		background: var(--background-S360);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0.2s ease;
		border: 0.5px solid var(--color-border-S360);
		& .bs-searchbox{
			padding-top: 4px;

			& .filter-input {
				margin-bottom: 0;
				float: none;
				display: flex;
				width: 100%;
				height: 30px;
				padding-left: 8px;
				font-size: 0.8125rem;
				font-weight: 400;
				line-height: 1.5;
				color: var(--color-text-S360);
				background-color: var(--background-S360);
				background-clip: padding-box;
				border: 1px solid var(--color-border-S360);
				border-radius: var(--border-radius-S360);
				transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
				outline: none;

				&::placeholder {
					color: var(--color-text-secundary-S360);
				}

			}

		}
		& .bs-actionsbox {
			width: 100%;
			padding-top: 9px;
			padding-bottom: 5px;


			& .btn-group, .btn-group-vertical {
				position: relative;
				display: -ms-inline-flexbox;
				display: inline-flex;
				vertical-align: middle;
			}

			& .btn-block {
				display: flex;
				width: 100%;
				justify-content: space-between;
			}

			& .btn-group button {
				flex: 1;
				min-width: 150px;
				border-radius: var(--border-radius-S360);
				font-size: 0.8125rem;
				height: 19px;
				background: var(--background-disabled-secundary-S360);
				color: var(--color-text-S360);


			}

			& .btn:not(:disabled):not(.disabled) {
				cursor: pointer;
				border: none;
				border-radius: var(--border-radius-S360);
			}

			& .btn:not(:disabled):not(.disabled):hover {
				opacity: 0.75;
			}

			& .additional-btn-group {
				& button {
					height: 19px;
					display: flex;
					align-items: center;
					justify-content: center;
					color: white;
					text-align: center;
					overflow: hidden;
					& .icon-button {
						font-size: 16px;
					}
				}
			}
		}

		& .scroll{
			position: relative;
			display: flex;
			flex-direction: column;
			width: 100%;
			overflow-y: auto;
			padding-right: 3px;

			& .select-options, .container-options{
				&::-webkit-scrollbar-track{
					background-color: transparent;
				}

				&::-webkit-scrollbar{
					height: 6px;
					width: 6px;
				}

				&::-webkit-scrollbar-thumb
				{
					border-radius: 300px;
					background-color: #999;
				}
		}

			& .select-options{
				z-index: 1;
				top: 0;
				position: static;
				width: 100%;
				height: fit-content;
				max-height: 250px;
				overflow-y: auto;
				background-color: var(--suite-secundary-S360);
				border-radius: var(--border-radius-S360);
				& .option{
					background: var(--suite-secundary-S360);
					&:hover{
						background: var(--background-item-hover-S360);
					}
				}
			}

			& .container-options{
				width: 100%;
				height: fit-content;
				max-height: 250px;
				overflow-y: auto;
			}
		}

		& .no-results{
			color: var(--color-text-S360);
			height: 30px;
			display: flex;
			align-items: center;
			padding: 0 12px;
			border-radius: var(--border-radius-S360);
			cursor: pointer;
			background: var(--background-S360);
			font-size: 0.8125rem;
			overflow-x: hidden;
		}

	}
	& .options--right{
		right: 0% ;
	}
	& .options--left{
		left: 0% ;
	}
	& .options--top{
		bottom: 100% ;
	}
	& .options--bottom{
		top: 100% ;
	}
	& .option{
		position: relative;
		height: 30px;
		display: flex;
		align-items: center;
		padding: 0 10px;
		border-radius: var(--border-radius-S360);
		cursor: pointer;
		background: var(--background-S360);
		transition: background 0.3s ease;
		user-select: none;
		padding-right: 25px;
		color: var(--color-text-S360);


    &.filtered-off{
      display: none;
    }

		&:hover{
			background: var(--background-item-hover-secundary-S360);
		}

		&:focus-visible{
			outline: none;
			background: var(--background-item-hover-secundary-S360);
		}

		& .icon{
			font-size: 20px;
			margin-right: 12px;
			user-select: none;
		}

		& .option-text{
			font-size: 0.8125rem;
			color: var(--color-text-S360);
		}

		& .check-option {
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			border: none;
			color: var(--color-text-secundary-S360);
			font-size: 18px;
		}

	}
	&.active {
		& .options {
			opacity: 1;
			visibility: visible;
		}

		& .icon:not(.option .icon, .error .icon )  {
			transform: rotate(-180deg);
			padding-left: 10px;
		}
	}
	& .sBtn-title{
		color: var(--color-text-secundary-S360);
		display: flex;
		font-size: 0.8125rem;
		padding-left: 8px;
		color: var(--color-text-S360);
	}
	& .sBtn-text{
		display: flex;
		padding-left: 8px;
		font-size: 0.8125rem;
		padding-top: 10px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding-left: 8px;
		color: var(--color-text-S360);
	}
	& .smaller {
		position: absolute; /*Posición absolute */
		top: 1px;
		font-size: 0.6875rem; /* Tamaño de fuente más pequeño */
		color: var(--color-text-secundary-S360);
		font-weight: 700;
	}

	& .error {
		cursor: pointer;
		color: var(--color-error-S360);
		border: 1px solid var(--color-error-S360);
		border-radius: 4px;

		& .sBtn-title{
			color: var(--color-error-S360);
		}
		& .sBtn-text{
			color: var(--color-error-S360);
		}

		& .icon {
			color: var(--color-error-S360);
		}

	}

	& .disabled {
		cursor: not-allowed;
		color: var(--color-text-secundary-S360);
		border-radius: var(--border-radius-S360);
		background: var(--background-disabled-secundary-S360);
		& .sBtn-title{
			cursor: not-allowed;
			color: var(--color-text-disabled-S360);
		}
		& .sBtn-text{
			color: var(--color-text-disabled-S360);
		}

		& .icon {
			color: var(--color-text-disabled-S360);
		}

		&.error {
		  border: 1px solid var(--color-error-S360);
		}

		&.error .sBtn-title{
		  cursor: not-allowed;
		  color: var(--color-error-S360);
		}
		&.error .sBtn-text{
		  color: var(--color-error-S360);
		}

		&.error .icon{
		  color: var(--color-error-S360);
		  font-variation-settings: "FILL" 1;

		}
	}

	& .selected {
		background: var(--color-item-selected);
        & .option-text{
            color: var(--color-text-tertiary-S360);
        }
	}

	& .select-menu-spinner{
		color: #3498db !important;
		animation: select-spinner-spin 2s ease infinite;
		transform-origin: center;
		text-transform: capitalize !important;
		padding-right: 0 !important;
		margin-right: 10px;
	}

  & .limit-alert{
    height: 30px;
    font-size: calc(var(--font-size-small-S360) + 1px);
    position: absolute;
    opacity: 0;
    transition: opacity 0.5ms ease-in-out;
    left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--background-disabled-secundary-S360);
    color: var(--color-text-S360);
    pointer-events: none;

    &.show{
      opacity: 1;
    }

    .limit-content{
      display: flex;
      align-items: center;
      gap: 4px;
    }
  }
}



.bs-new-actionsbox{
  width: 100%;
  padding-top: 9px;
  padding-bottom: 5px;

  & .btn-group {

    flex: 1;
    min-width: 150px;
    border-radius: var(--border-radius-S360);
    font-size: 0.8125rem;
    height: 25px;
    background: var(--background-disabled-secundary-S360);
    color: var(--color-text-S360);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  & .option-add{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    & .add-option{
      font-size: 18px;
    }
  }

  & .btn:not(:disabled):not(.disabled) {
    cursor: pointer;
    border: none;
    border-radius: var(--border-radius-S360);
  }

  & .btn:not(:disabled):not(.disabled):hover {
    opacity: 0.75;
  }

  & .additional-btn-group {
    & button {
      height: 19px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      text-align: center;
      overflow: hidden;
      & .icon-button {
        font-size: 16px;
      }
    }
  }
}

@keyframes select-spinner-spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}