.defailt-interface-elements-area {

	.select-body {
		box-sizing: border-box;
		border: 1px solid rgba(0, 51, 153, 0.15);
		border-radius: 8px;
		background: rgb(255, 255, 255);
		height: 48px;
		padding: 1px 0px 0px 16px;
		
		color: rgb(0, 9, 26);
		font-size: 15px;
		font-weight: 600;
		line-height: 140%;
		text-align: left;
		cursor: pointer;
		position: relative;
		transition: .1s;
		
	}
	.select-arrow  {
		transform: translateY(-1px);
	}
	.select-body .select-placeholder {
		color: rgba(20, 41, 82, 0.35);
	}


	.default-select .select-arrow {
		width: 48px;
		text-align: center;
	}

	.default-select {
		
	}

	.dropdown-body {
		padding: 8px;
		
		border-radius: 8px;
		box-shadow: 0px 6px 26px 0px rgba(0, 17, 51, 0.12);
		background: rgb(255, 255, 255);
		
		position: absolute;
		top: 100%;
		left: 0px;
		width: 100%;
		margin-top: 6px;
		z-index: 2;
	}

	.dropdown-body .item {
		padding: 10.5px 13px 10.5px 18px;
		
		color: rgb(0, 9, 26);
		font-size: 15px;
		font-weight: 600;
		line-height: 130%;
		text-align: left;
		transition: .1s
		
	}
	.dropdown-body .item:hover {
		opacity: .8;
		
	}

	.dropdown-inner {
		max-height: 464px;
		overflow-y: auto;
	}


	.delete-select-btn {
		box-sizing: border-box;
		border: 1px solid rgba(0, 51, 153, 0.15);
		border-radius: 8px;
		background: rgb(255, 255, 255);
		width: 48px;
		height: 48px;
		position: relative;
		cursor: pointer;
		transition: .1s;
	}
	.delete-select-btn svg {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		transition: .1s;
	}


	.delete-select-btn svg path {
		transition: .1s;
	}




	.delete-select-btn:hover {
		border: 1px solid rgb(244, 65, 52);
	}

	.delete-select-btn:hover svg {
		transform: translate(-50%, -50%) scale(1.1);
		
	}
	.delete-select-btn:hover path {
		stroke: #F44134;
		stroke-opacity: 1;
		
	}

	.price-and-categories-block {
		margin-left: -20px;
		margin-right: -20px;
	}


	.default-select.error .select-body {
		border: 1px solid rgb(244, 65, 52);
	}

	.calc-stat .suffix {
		color: rgba(0, 17, 51, 0.55);
		font-size: 15px;
		font-weight: 500;
		line-height: 130%;
		text-align: left;
		
	}
	.calc-stat .value {
		color: rgba(0, 8, 26, 0.7);
		font-size: 16px;
		font-weight: 600;
		line-height: 120%;
		text-align: right;
	}

	.checkbox-body {
		margin-left: -3px;
		margin-right: -3px;
	}

	.checkbox-item, .radio-item {
		box-sizing: border-box;
		border: 1px solid rgba(0, 51, 153, 0.15);
		border-radius: 8px;
		background: rgb(255, 255, 255);
		padding: 10.8px 18px;
		cursor: pointer;
		transition: .1s;
		position: relative;
		min-height: 48px;
	}

	.default-checkbox-input  {
		box-sizing: border-box;
		border: 1px solid rgba(41, 68, 122, 0.05);
		border-radius: 5px;
		background: rgba(41, 68, 122, 0.05);
		
		height: 21px;
		width: 21px;
		transition: .1s;
	}


	.checkbox-item.checked .default-checkbox-input {
		background-image: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect rx='4.75' width='20.5' height='20.5' transform='translate(0.25 0.25)' fill='%23172B36'/%3E%3Cpath d='M6 10.27L8.86 13.4L15 7.6' stroke='%23FFFFFF' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
		background-size: cover!important;
		background-position: center!important;
		background-repeat: no-repeat;
		border: transparent;
	}


	.checkbox-header {
		color: rgb(0, 9, 26);
		font-size: 16px;
		font-weight: 500;
		line-height: 140%;
		text-align: left;
		margin-top: 2px;
	}

	.checkbox-item.checked {
		border: 1px solid rgb(50, 79, 93);
	}


	.default-checkbox.error .checkbox-item {
		border: 1px solid rgb(244, 65, 52);
	}

	.default-radio .radio-item .radio-header {
		color: rgb(0, 9, 26);
		font-size: 16px;
		font-weight: 500;
		line-height: 140%;
		text-align: left;
		margin-top: 2px;
	}

	.default-radio-input {
		box-sizing: border-box;
		border: 1px solid rgba(41, 68, 122, 0.05);
		border-radius: 999px;
		background: rgba(41, 68, 122, 0.05);
		
		height: 21px;
		width: 21px;
		transition: .1s;
		
		margin-top: 2px;
	}

	.radio-item.checked {
		border: 1px solid rgb(50, 79, 93);
	}

	.radio-body {
		margin-left: -3px;
		margin-right: -3px;
	}



	.radio-item.checked .default-radio-input {
		background-image: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect rx='10.25' width='20.5' height='20.5' transform='translate(0.25 0.25)' fill='%23172B36'/%3E%3Cpath d='M6 10.27L8.86 13.4L15 7.6' stroke='%23FFFFFF' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
		background-size: cover!important;
		background-position: center!important;
		background-repeat: no-repeat;
		border: transparent;
		border-radius: 999px;
	}


	.default-radio .radio-description {
		color: rgba(0, 17, 51, 0.55);
		font-size: 14px;
		font-weight: 500;
		line-height: 140%;
		text-align: left;
	}

	.default-radio.error .radio-item {
		border: 1px solid rgb(244, 65, 52);
	}

	.active-status {
		background: rgb(219, 255, 240);
	}

	.active-status .label {
		color: rgb(0, 133, 77);
	}

	.disactive-status {
		background: rgb(255, 245, 224);
	}

	.disactive-status .label {
		color: rgb(199, 116, 0);
	}

	.fixed-base-data {
		position: sticky;
		top: 104px;
	}

	.width-310 {
		width: 310px;
	}

	.checkbox-ico {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 18px;
	}

	.text-in-checkbox {
		width: 100%;
		color: rgb(0, 9, 26);
		font-size: 16px;
		font-weight: 500;
		line-height: 140%;
		text-align: left;
		outline: none;
		border: none;
		background: transparent;
		border-bottom: 1px solid rgba(15, 39, 87, 0.25);
		padding: 0px 8px 2px 8px;
		box-shadow: none;
		transform: translateY(2.5px);
		border-radius: 0px;
	}

	.text-in-checkbox::placeholder {
		width: 100%;
		color: rgba(20, 41, 82, 0.35);
	}


	.block-with-tooltip svg {
		display: block;
		margin-top: .5px;
	}



	.checkbox-item[data-value="consultation"] {
		max-height: 48px;
	}


	.prefix-additional-padding {
		padding-left: 40px!important;
	}


	.input-prefix {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 31px;
		text-align: right!important;
		color: rgba(20, 41, 82, 0.35);
		font-size: 16px;
		font-weight: 500;
		line-height: 140%;
		text-align: left;
		user-select: none;
		transition: .1s;
		padding-top: .5px;
	}
	.default-input-rows:has(input:focus),
	.default-input-rows:has(input:not(:placeholder-shown)) {
		.input-prefix {
			color: rgb(0, 9, 26);
		}
	}
	.default-input-rows:has(input:not(:placeholder-shown)) {
		input {
			/* border: 1px solid rgb(0, 85, 255); */
		}
	}
	.textarea-body:has(textarea:not(:placeholder-shown)) {
		textarea {
			/* border: 1px solid rgb(0, 85, 255); */
		}
	}

	.default-select:not([data-selected-key=""]) .select-body {
		/* border: 1px solid rgb(0, 85, 255)!important; */
	}

	.textarea-body textarea {
		width: 100%;
		color: rgb(0, 9, 26);
		font-size: 16px;
		font-weight: 500;
		line-height: 150%;
		text-align: left;
		padding: 11.5px 16px;
		
		box-sizing: border-box;
		border: 1px solid rgba(0, 51, 153, 0.15);
		border-radius: 8px;
		background: rgb(255, 255, 255);
		outline: none;
		
	}
	.textarea-body textarea::placeholder {
		color: rgba(20, 41, 82, 0.35);
	}


	.textarea-body textarea:focus {
		border: 1px solid rgb(50, 79, 93);
	}

	.editable-tags-row .radio-item .radio-header {
		color: rgba(20, 41, 82, 0.35);
	}
	.editable-tags-row {
		position: relative;
	}

	.input-tags {
		color: rgb(0, 9, 26);
		height: 22px;
		font-size: 16px;
		font-weight: 500;
		line-height: 140%;
		text-align: left;
		border: none;
		background: transparent;
		outline: none;
		padding: 0;
		padding-top: 5px;
		width: 100%;
		cursor: pointer;
	}



	.input-tags::placeholder { 
		color: rgba(20, 41, 82, 0.35);
		caret-color: rgb(0, 85, 255);

	}


	.add-tag-btn {
		position: absolute;
		top: 3px;
		bottom: 3px;
		right: 3px;
		width: 40.89px;
		border-radius: 6px;
		background: rgb(23, 43, 54);
		cursor: pointer;
	}

	.add-tag-btn svg {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.plus-container {
		position: relative;
		height: 100%;
	}

	.add-tag-btn {
		opacity: 0;
		transition: opacity 0.1s ease;
		pointer-events: none; /* Запретить клики */
		
	}

	.radio-item.checked:has(input:not(:placeholder-shown)) .add-tag-btn {
		opacity: 1;
		pointer-events: auto;
	}



	.radio-item.checked .input-tags {
		cursor: text;
	}


	.tags-container:empty {
		display: none;
	}

	.tag-body {
		border-radius: 999px;
		background: rgb(243, 244, 247);
		padding: 3px 8px 3px 18px;
		
		color: rgb(0, 9, 26);
		font-size: 15px;
		font-weight: 500;
		line-height: 136%;
		text-align: center;
		
	}

	.tag-cross {
		transition: .1s;
		cursor: pointer;
	}

	.tag-cross:hover {
		transform: scale(1.1);
	}

	.calc-stat svg {
		margin-top: -4.6px;
	}

	.checkbox-item[data-disabled="true"] {
		opacity: .5;
	}





	.default-checkbox .label,
	.default-radio .label,
	.default-select .label-block { 
		color: rgba(0, 17, 51, 0.55);
		font-size: 15px;
		font-weight: 500;
		line-height: 140%;
		text-align: left;
		padding-left: 16px;
	}

	.main-label {
		color: rgba(0, 17, 51, 0.55);
		font-size: 15px;
		font-weight: 500;
		line-height: 140%;
		text-align: left;
		padding-left: 16px;
	}

	.panel-background-base-data .creation-default-input label {
		padding-left: 0px;
	}



	.creation-default-input input {
		width: 100%;
		
		box-sizing: border-box;
		border: 1px solid rgba(0, 51, 153, 0.15);
		border-radius: 8px;
		background: rgb(255, 255, 255);
		
		outline: none;
		
		
		color: rgb(0, 9, 26);
		font-size: 16px;
		font-weight: 500;
		line-height: 140%;
		text-align: left;
		
		padding: 0px 46px 0px 16px;
		transition: .1s;
		height: 48px;
	}



	.creation-default-input input::placeholder {
		color: rgba(20, 41, 82, 0.35);
	}

	.creation-default-input .main-label,
	.default-textarea .main-label,
	.label-block {
		cursor: pointer;
	}



	.small-star {
		display: inline-block;
		transform: translate(-2px, -5px);
	}

	.creation-default-input input:not(:focus) + .default-input-cross {
		display: none !important;
	}

	.default-input-cross {
		position: absolute;
		top: 50%;
		right: 15px;
		transform: translateY(-50%);
		cursor: pointer;
		transition: .1s;
	}
	.default-input-cross:hover svg {
		transform: scale(1.1);
	}
	.creation-default-input input:not(:focus) {
		padding-right: 16px!important;
	}

	
	.default-input-rows {
		position: relative;
	}
	
	
	.creation-default-input input:focus {
		border: 1px solid rgb(50, 79, 93);
		caret-color: rgb(50, 79, 93);
	}
	
	

	.creation-default-input.error input {
		border: 1px solid rgb(244, 65, 52);
	}
	
	
	
	
	
	
	
	
	
	
}
	
	
@media (max-width: 924px) {
	.defailt-interface-elements-area {
		.main-label {
			font-size: 14px;
			font-weight: 500;
			line-height: 130%;
		}
		
		.default-input-rows {
			margin-top: 6px!important;
		}
		
		.opf-selector .selector-item .label {
			font-size: 15px;
			font-weight: 600;
			line-height: 140%;
		}
		.top-20 {
			margin-top: 16px!important;
		}
		
		.creation-default-input input {
			height: 46px;
			font-size: 15px;
			font-weight: 500;
			line-height: 140%;
		}
		.select-body {
			height: 46px;
			padding-bottom: 2px;
		}
		.delete-select-btn {
			width: 46px;
			height: 46px;
		}
		.select-body, .dropdown-body .item {
			font-size: 15px;
			font-weight: 500;
			line-height: 140%;
		}
		
		.default-select .select-arrow {
			width: 46px;
			padding-bottom: 2px;
		}
		
		
		
		
		
		
		
	}
}