.p-computes-supplier {
	&__container {
		max-width: 884px;
		margin: auto;
	}

	&__block {
		display: flex;
		flex-direction: row;
		gap: 8px;
		padding: 0px 12px;
		align-items: center;
		justify-content: center;
		border: solid 1px #DEDEEC;
		height: 38px;
		border-radius: 8px;
		font-size: 14px;
		&__left{
			display: flex;
			flex-direction: row;
			gap: 8px;
		}

		&__input {
			position: relative;
			display: flex;
			flex-direction: row;
			align-items: center;
			font-size: 14px;
			background-color: #F3F3F4;
		}

		&__float-icon {
			position: absolute;
			left: 10px;
			z-index: 99;
		}

	}

	&__actions {
		.btn-primary {
			flex-direction: row;
			align-items: center;
			border-radius: 6px;
			font-size: 14px;
			padding: 0px 12px;
			width: 220px;
		}
	}

	.input-text {
		padding-left: 40px;
	}

	&__float-icon {}

	&__header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;	
		margin-bottom: 24px;
		justify-content: flex-end;
	}
	&__select_wrapper{
		width: 100px;
	}
	&__select {
		// width: auto;
		.c-select__content {
			width: 100px;
		}
		.c-select__content.active svg {
			transform: rotate(0deg);
		}
	}

	&__actions {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: auto;
		gap: 8px;
	}

	&__left {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 8px;
	}

}

.computes-supplier__select--auto {
	width: auto !important;
}
.computes-list {
	display: grid;
    grid-gap: 24px;

	&__multiple-row {
		display: flex;
		flex-direction: column;

		.subtitle {
			font-size: 12px;
			color: #A1A3BB;
		}
		.compose-row {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			gap: 8px;
		}
	}

	&__model {
		border-radius: 8px;
		background-color: #F4F5F9;
		padding: 10px
	}
	&__status{
		padding: 4px 8px;
		border-radius: 8px;
		font-size: 12px;
    text-wrap: nowrap;
		
		&.available{
			background-color: #e6faee;
			color: #27be69;
		}
		&.used{
			background-color: #fef3e6;
			color: #f28705;
		}
		&.pause{
			background-color: #feecee;
			color: #f2415a;
		}
	}
}


/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1200px) {
	.p-computes-supplier__block{
		span {
			display: none;
		}
	}
}