// Add Compute

.c-add-model {

	.flex {
		display: flex;
	}

	.item-center {
		align-items: center;
	}

	.gap-24 {
		gap: 24px;
	}

	.gap-16 {
		gap: 16px;
	}

	.flex-col {
		flex-direction: column;
	}

	.gap-4 {
		gap: 4px;
	}

	.gap-6 {
		gap: 6px;
	}

	.w-50-12 {
		width: calc(50% - 12px);
	}

	.mb-24 {
		margin-bottom: 24px;
	}

	.h-40 {
		height: 40px;
	}

	.lead-40 {
		line-height: 40px;
	}

	.c-checkbox__label {
		font-weight: 400;
		color: #40405B;
	}

	.w-107 {
		width: 107px;
	}

	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 710px;
	margin: auto;
	padding-top: 60px;
	padding-bottom: 60px;

	&__heading {
		font-size: 16px;
		line-height: 19.5px;
		font-weight: 700;
		color: #14142A;
		margin: 0;
	}

	&__group {
		display: flex;
		gap: 24px;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-bottom: 24px;

		>div {
			width: calc(50% - 12px);

			&.full {
				width: 100%;
			}
		}

		.c-model-preview__row__wrapper {
			background: transparent;
		}

		&.gray {
			background-color: #F4F5F9;
			border-radius: 8px;

			.p-16 {
				padding: 16px;
			}

			&.mb-0 {
				margin-bottom: 0;
			}
		}
	}

	&__row {
		display: flex;
		flex-direction: row;

		&.justify {
			justify-content: space-between;
			gap: 32px;
		}

		&.mb-24 {
			margin-bottom: 24px;
		}

		>div {
			width: calc(33.33% - 10px);
		}

		.auto-provision {
			display: flex;
			align-items: center;
			gap: 6px;
			width: 100%;

			&__title {
				font-size: 14px;
				line-height: 24px;
				color: #40405B;
			}

			.c-switch__wrapper {
				gap: 6px;
				align-items: center;
			}
		}
	}

	&__item__label,
	.c-select__label,
	.c-input-base__label span {
		font-size: 12px;
		font-weight: 700;
		line-height: 14.63px;
		color: #333350;
		&.required {
			color: #e2323a;
			padding-left: 0;
		}
	}

	&__item__input {
		width: 100%;
	}

	&__item {
		display: flex;
		align-items: center;
		gap: 12px;
		position: relative;

		&.w-50-4 {
			width: 46%;
		}

		&__input-number {
			border-radius: 6px;
			background-color: #fff;
			padding: 0 10px;
			width: -webkit-fill-available;
			span {
				font-size: 12px;
				font-weight: 700;
			}
		}

		.available {
			position: absolute;
			top: auto;
			bottom: 50%;
			right: 10px;
			transform: translate(0, 50%);
			font-size: 10px;
			line-height: 16px;
			font-weight: 600;
			&.green {
				color: #27BE69;
			}
		}
	}

	&__input-column {
		display: flex;
		flex-direction: column;
		gap: 6px;
		flex: 1 1;

		.c-input-base__field {
			width: 100%;
		}
	}

	.c-upload {
		height: auto;
		padding: 16px;
		align-items: flex-start;

		&--action {
			flex-direction: row;
		}

		&__describe {
			font-size: 14px;
			color: #272E35;
		}
	}

	&__action {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 32px;

		&--cancel {
			border: 1px solid #DEDEEC;
			border-radius: 8px;
			color: #14142A;
		}

		&--add {
			background: #5050FF;
			border-radius: 8px;
			color: #fff;
		}
	}

	.c-radio__label {
		gap: 6px;
		font-size: 14px;
		line-height: 24px;
		color: #40405B;
		font-weight: 600;
	}

	.required {
		color: #e2323a;
		padding-left: 2px;
	}
}


.models-delete-modal {
	.c-modal {
		&--cancel {
			button {
				min-width: 80px;
				border-radius: 6px;
				border: 1px solid #cfd6dd;
				background-color: #fff;
				box-shadow: 0 1px 2px 0 rgba(27, 36, 44, 0.12);
				color: #4a545e;
				font-size: 14px;
				font-weight: 500;
			}
		}

		&__body {
			line-height: 25px;
		}

		&__footer {
			&>button {
				min-width: 87px;
				background-color: #e2323a;
				font-size: 14px;
				font-weight: 500;
				color: #fff;
				box-shadow: 0 1px 2px 0 rgba(27, 36, 44, 0.12);
				border-radius: 6px;
				border: 1px solid #e2323a;
			}
		}

		&__title {
			display: flex;
			align-items: center;

			svg {
				margin-right: 10px;
			}
		}
	}
}