
.deal-description-form {
	
	
	
	.deal-content {
		cursor: pointer;
		/* background: var(--color-card-bg-white-25); */
		/* box-shadow: inset 0 0 0 1px var(--color-card-bg-white-35); */
		padding: 0px;
		/* border-radius: 12px; */
		margin-top: 9px;

		
		
		.option-hr {
			/* height: 1px; */
			/* background: var(--color-black-icon-black-10); */

		}
		
	}
	
	.deal-header {
		/* margin-bottom: 8px; */
		padding: 2px 0px;
		
		
		.left-block-padding {
			padding: 1px 0px 0px 6px;
		}
		.right-block-padding {
			padding: 0px 6px 0px 10px;
		}
		.tota-price-wrapper {
			padding: 1px 6px 0px 0px;
		}
		.total-price {
			color: var(--tokens-color-txt-green-txt_accent_green-34);
			font-size: 14px;
			font-weight: 700;
			line-height: 130%;
			letter-spacing: -0.28px;
			text-align: right;
			padding-bottom: 1px;
			
			span {
				font-size: 12px;
				font-weight: 550;
				line-height: 130%;
				letter-spacing: -0.24px;
				
			}
		}
		
		.balance-tooltip {
			color: var(--tokens-color-txt-black-txt-subtitle-black-40);
			font-size: 14px;
			font-weight: 600;
			line-height: 130%;
			letter-spacing: 0.14px;
			padding-right: 1px;
		}
		
		.chat-arrow-ico {
			display: block;
			margin-top: 4px;
			
			path {
				stroke: var(--color-black-icon-black-30);
				stroke-opacity: 1;
			}
		}
		
		.work-days-count-total {
			
			.label {
				color: var(--tokens-color-txt-green-txt_accent_green-34);
				font-size: 12px;
				font-weight: 600;
				line-height: 130%;
			}
			svg {
				display: block;
				transform: translateY(0.5px);
			}
		}
		
		.link {
			cursor: pointer;
			.text {
				transition: .1s;	
			}
			.chat-arrow-ico {
				path {
					transition: .1s;
				}
			}
			.status-badge {
				transition: .1s;
				outline: 1.5px solid transparent;
			}
		}
		.link:hover {
			.text {
				color: var(--tokens-color-txt-black-txt_primary_black-5);
			}
			.chat-arrow-ico {
				transform: scale(1.1);
				
				path {
					stroke: var(--tokens-color-txt-black-txt_primary_black-5);
				}
			}
			
			
			.status-badge.new {
				outline: 1.5px solid var(--color-overlay-icon-overlay-15-invert);
			}
			.status-badge.paid {
				outline: 1.5px solid #00C76F;
			}
			.status-badge.mark_as_completed {
				outline: 1.5px solid var(--color-blue-icon_blue-50);
			}
			.status-badge.completed {
				outline: 1.5px solid var(--color-overlay-icon-overlay-15-invert);
			}
			.status-badge.canceled {
				outline: 1.5px solid var(--color-red-icon_red-58);
			}
			.status-badge.overdue {
				outline: 1.5px solid var(--color-red-icon_red-58);
			}
			.status-badge.disputed {
				outline: 1.5px solid var(--color-yellow-icon_yellow-50);
			}
			
		}
		.text {
			color: var(--tokens-color-txt-gray-txt_caption_gray-28);
			font-size: 14px;
			font-weight: 600;
			line-height: 140%;
			letter-spacing: -0.14px;
			
			
			svg {
				transform: translateY(-1px);
			}
			path {
				stroke-opacity: 1;
				stroke: var(--color-black-icon-black-20);
			}
		}
		
	}

	.status-badge {
		line-height: 18px;
		box-sizing: border-box;
		padding: 1px 6px 1px 6px;
		
		color: var(--tokens-color-txt-white-txt_invert_white);
		font-size: 11px;
		font-weight: 700;
		letter-spacing: -0.11px;
		text-align: center;
		
		
		
		border-radius: 7px;
		box-shadow: inset 0 0 0 0.5px var(--color-black-icon-black-10);
		backdrop-filter: blur(5px);
		
	}


	.status-badge.new {
		background: var(--color-overlay-icon-overlay-15-invert);
	}
	.status-badge.paid {
		background: linear-gradient(90deg, #00D688 0%, #00B856 100%);
	}
	.status-badge.mark_as_completed {
		background: var(--color-blue-icon_blue-50);
	}
	.status-badge.completed {
		background: var(--color-overlay-icon-overlay-15-invert);
	}
	.status-badge.canceled {
		background: var(--color-red-icon_red-58);
	}
	.status-badge.overdue {
		background: var(--color-red-icon_red-58);
	}
	.status-badge.disputed {
		background: var(--color-yellow-icon_yellow-50);
	}
	
	.dispute-btn {
		height: 46px;
		border-radius: 10px;
		background: var(--color-bg-input-bg-hover-7);
		backdrop-filter: blur(8px);
		position: relative;
		cursor: pointer;
		transition: .1s;
		outline: 1.5px solid transparent;
		
		.label {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 100%;
			
			.text {
				color: var(--tokens-color-txt-gray-txt_caption_gray-28);
				font-size: 15px;
				font-weight: 600;
				line-height: 1;
				letter-spacing: 0.15px;
			}
			svg {
				display: block;
				transform: translateY(-1px);
			}
		}
		
	}
	
	.dispute-btn:hover {
		background: var(--color-bg-input-bg-static-5);
		outline: 1.5px solid var(--color-bg-input-bg-static-5);
	}
	
	
	
	
	
	.deal-footer {
		svg {
			display: inline-block;
		}
	}
	
	.option-item {
		padding: 8px 10px;
		margin-top: 4px;
		border-radius: 10px;
		background: var(--color-bg-input-bg-static-5);


		
		.name {
			
			color: var(--tokens-color-txt-gray-txt_caption_gray-28);
			font-size: 14px;
			font-weight: 500;
			line-height: 140%;
			letter-spacing: -0.12px;
			
			padding-left: 2px;
			
			word-wrap: break-word;
			overflow-wrap: break-word;
			word-break: break-word;
			
		}
		
		.auto-sell-item {
			margin-top: 10px;
			column-gap: 5px;
			svg {
				display: block;
			}
			.text {
				color: var(--tokens-color-txt-black-txt_primary_black-5);
				font-size: 14px;
				font-weight: 600;
				line-height: 136%;
				letter-spacing: -0.14px;
			}
			.copy-auto-sell-trigger {
				cursor: pointer;
				path {
					stroke-opacity: 1;
					stroke: var(--color-black-icon-black-25);
					transition: .1s;
				}
			}
			.copy-auto-sell-trigger:hover {
				path {
					stroke: var(--color-green-icon_green-34);
				}
			}
		}
		
		.order-added-info {
			/* margin-top: 1px; */
			display: flex;
			white-space: nowrap;
			
			.price {
				color: var(--tokens-color-txt-green-txt_accent_green-34);
				font-size: 14px;
				font-weight: 700;
				line-height: 130%;
				letter-spacing: -0.14px;
				padding-right: 5px;
				
				.currency {
					font-size: 12px;
					font-weight: 550;
					line-height: 140%;
					letter-spacing: -0.12px;
				}
			}
			.ico {
				svg {
					display: block;
					transform: translateY(3px);
				}
				path {
					stroke-opacity: 1;
					stroke: var(--color-black-icon-black-30);
				}
			}
			.quantity {
				color: var(--tokens-color-txt-black-txt-description-black-35);
				text-align: center;
				min-width: 20px;
				font-size: 14px;
				font-weight: 600;
				line-height: 130%;
				letter-spacing: -0.14px;
				display: inline-block;
				
			}
		}
		
		
		
		
	}
	
	
	
	
	.deal-footer {
		margin-top: 12px;
		
		
		.btns-padding {
			padding: 8px 0px 12px 0px;
		}
		
		.total-sum {
			width: auto;
			color: var(--tokens-color-txt-black-txt_primary_black-5);
			font-size: 22px;
			font-weight: 700;
			line-height: 24px;
		}
		
		.total-label-text {
			text-align: right;
			
			color: var(--tokens-color-txt-txt-subtitle-black-40);
			font-size: 14px;
			font-weight: 500;
			line-height: 20px;
			padding-right: 16px;
		}
		
		.payment-btn {
			height: 46px;
			border-radius: 10px;
			background: var(--color-bg-btn_bg_gray-15);
			position: relative;
			cursor: pointer;
			transition: .1s;
			outline: 1.5px solid transparent;
			
			.btn-label {
				color: var(--color-txt-btn_txt_white);
				text-align: center;
				font-size: 15px;
				font-weight: 700;
				line-height: 1;
				letter-spacing: 0.16px;
				
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 100%;
				
				
			}
			
			
			
			.timer {
				color: var(--color-txt-btn-txt-white-35);
				font-size: 14px;
				font-weight: 700;
				line-height: 130%;
				margin-left: 6px;
			}
			
			
		}
		.payment-btn:hover {
			background: var(--color-bg-btn_bg_gray-12);
			outline: 1.5px solid var(--color-bg-btn_bg_gray-12);
		}
		
		
		.cancel-order-btn {
			height: 46px;
			border-radius: 10px;
			background: var(--color-bg-input-bg-hover-7);
			position: relative;
			transition: .1s;
			cursor: pointer;
			outline: 1.5px solid transparent;
			
			.btn-label {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 100%;
				
				color: var(--color-red-icon_red-58);
				font-size: 15px;
				font-weight: 700;
				line-height: 130%;
				letter-spacing: 0.16px;
				text-align: center;
				transition: .1s;
			}
			
		}
		
		.cancel-order-btn:hover {
			background: var(--color-red-icon_red-58);
			outline: 1.5px solid var(--color-red-icon_red-58);
			
			
			.btn-label {
				color: var(--color-card_bg_white);
			}
		}
		
		.review-block {
			background: transparent!important;
			padding: 4px 14px 12px 14px;
			
			.label-review-tag {
				color: var(--tokens-color-txt-black-txt_primary_black-5);
				font-size: 14px;
				font-weight: 700;
				line-height: 140%; 
			}
				
			.edit-review-btn {
				color: var(--tokens-color-txt-gray-txt_base_gray-15);
				font-size: 14px;
				font-weight: 600;
				line-height: 120%;
				cursor: pointer;
				transform: translateY(1px);
			}
			
			.label-review { 
				color: #00121A;
				font-size: 14px;
				font-weight: 700;
				line-height: 140%;
				padding: 0px 2px;
			}
			
			
			.star-col {
				
				path {
					fill: var(--color-black-icon-black-15);
					fill-opacity: 1;
				}
				
			}
			.star-col.selected {
				
				path {
					fill: #FFAA00;
					fill-opacity: 1;
				}
				
			}
			
			
		}
		
			
		.review-block[data-is-created="false"] {
			padding: 4px 14px 12px 14px;
			margin-top: 0px;
			
			.stars-block {
				cursor: pointer;
			}
		}
		
		
		
		.wait-time-block {
			color: var(--tokens-color-txt-txt_primary_black-5);
			font-size: 16px;
			font-weight: 700;
			line-height: 136%;
			padding: 6px 8px;
			
			
			.time {
				color: var(--color-black-icon-black-30);
				font-size: 15px;
				transform: translateY(1px);
			}
		}

		
		
		
	}
	
	
	
	
	
	
	
}
	
	
#option-details-modal {
	
	.modal-content {
		border-radius: 20px;
		background: var(--color-card_bg_white);
		box-shadow: 0 6px 26px 0 rgba(0, 34, 51, 0.12);
		backdrop-filter: blur(30px);
	}
	.modal-dialog {
		max-width: 550px;
		
	}
	
	
	.deal-description-form { 
		
		.status-badge {
			font-size: 12px;
			font-weight: 700;
			line-height: 20px;
			padding: 1px 7px 1px 7px;
		}
		
		.option-item {
			background: var(--color-bg-input-bg-static-5);
		}
		
		.deal-content {
			box-shadow: none;
			/* padding: 6px 20px; */
			cursor: auto;
			/* background: var(--color-bg-input-bg-static-5); */


		}
		
		.deal-content-wrapper {
			padding: 8px 24px 16px 24px;
		}
		
		.deal-header {
			margin-bottom: 0px;
			padding: 0px;
			
			
			
			
			.total-price {
				font-size: 16px;
				font-weight: 700;
				line-height: 130%;
				letter-spacing: -0.32px;
				padding-top: 2px;
				
				.currency {
					font-size: 14px;
					font-weight: 550;
					line-height: 130%;
					letter-spacing: -0.28px;
					
				}
			}
			
			
			.header-modal-padding {
				padding: 20px 20px 10px 24px;
			}
			
			
			.work-days-count-total {
				.label {
					color: var(--tokens-color-txt-green-txt_accent_green-34);
					font-size: 16px;
					font-weight: 600;
					line-height: 130%;
				}
				svg {
					display: block;
					transform: translateY(1.5px);
				}
			}
			
			.subheader {
				padding: 0px 16px 0px 28px;
				margin-bottom: 12px;
			}
			.modal-title-tow {
				column-gap: 18px;
				padding-top: 2px;
			}
			.text {
				color: var(--tokens-color-txt-black-txt_primary_black-5);
				font-size: 22px;
				font-weight: 700;
				line-height: 140%;
				
			}
			
			.cross-ico {
				cursor: pointer; 
				transition: .1s;
				path {
					stroke-opacity: 1;
					stroke: var(--color-black-icon-black-30);
				}
			}
			.cross-ico:hover {
				opacity: .8;
			}
		}
		
		.deal-footer {
			margin-top: 0px;
			padding: 10px 26px 26px 26px;
			
			.review-block {
				margin-top: 0px;
				padding: 0px;
			}
			.wait-time-block {
				padding: 0px;
			}
			
			
			
		}
		
		
	}
	
	
}


@media (max-width: 924px) {
	
	.deal-description-form {
		
		.dispute-btn {
			border-radius: 12px;
			height: 42px;
			
			.label {
				.text {
					font-size: 12px;
					font-weight: 550;
					line-height: 130%;
					letter-spacing: 0.12px;
					padding-bottom: 3px;					
				}
			}
		}
		
		.deal-header {
			padding: 0px 0px 0px 0px;
			.right-block-padding {
				padding-top: 4px;	
			}
			.link {
				.chat-arrow-ico {
					margin-top: 7px;
				}
			}
			.balance-tooltip {
				font-size: 12px;
				font-weight: 600;
				line-height: 130%;
				letter-spacing: -0.12px;
			}
			.text {
				
				font-size: 16px;
				font-weight: 600;
				line-height: 140%;
				
			}
			
			.left-block-padding {
				padding: 3px 0px 3px 8px;
			}
			.tota-price-wrapper {
				padding-top: 6px;
			}
			.total-price {
				font-size: 16px;
				font-weight: 700;
				line-height: 1;
				
				
				span {
					font-size: 14px;
					font-weight: 550;
					line-height: 1;
					letter-spacing: -0.14px;
				}
			}
			.modal-title-tow {
				padding-top: 0px!important;
			}
		}
		
		
		
		.deal-content {
			padding: 0px!important;
			
		}
		
		.option-item {
			border-radius: 12px;
			
			.auto-sell-item {
				.text {
					/* font-size: 12px;
					font-weight: 600;
					line-height: 136%;
					letter-spacing: -0.12px;
					padding-top: 1px; */
				}
			}
			
			
			.name {
				/* font-size: 12px;
				font-weight: 500;
				line-height: 140%;  */
			}
			.order-added-info {
				margin-top: 1px;
				.ico {
					svg {
						transform: translateY(3px);
					}	
				}
				.price {
					/* font-size: 12px;
					font-weight: 700;
					line-height: 130%;
					letter-spacing: -0.14px;
					.currency {
						font-size: 10px;
						font-weight: 550;
						line-height: 140%;
						letter-spacing: -0.1px;
					} */
				}
				.quantity {
					/* color: var(--tokens-color-txt-black-txt-description-black-35);
					font-size: 12px;
					font-weight: 600;
					line-height: 130%;
					letter-spacing: -0.14px; */
				}
			}
		}
		
		
		
		
		
		.deal-footer {
			
			
			.review-block[data-is-created="false"] {
				padding-top: 4px;
				padding-bottom: 10px;
				
				.row.g-0 {
					justify-content: center;
					transform: scale(1.1);
				}
				
				svg {
				}
			}
			
			
			.cancel-order-btn {
				height: 46px;
				.btn-label {
					font-size: 15px;
					font-weight: 600;
					line-height: 130%;
					letter-spacing: -0.15px;
					padding-bottom: 2px;
				}
			}
			
			
			.payment-btn {
				border-radius: 12px;
				height: 42px;
				.btn-label {
					font-size: 12px;
					font-weight: 550;
					line-height: 130%;
					letter-spacing: -0.15px;
					padding-bottom: 2px;
				}
				.timer {
					font-size: 14px;
					font-weight: 600;
					line-height: 130%;
					letter-spacing: -0.14px;
				}
			}
			
			
			
			
			.btns-padding {
				padding: 0px 0px;
			}
	
			.wait-time-block {
				position: static;
				transform: none;
				border-radius: 8px;
				
				font-size: 14px;
				font-weight: 700;
				line-height: 1;
				
				padding: 6px 6px 8px 6px;
			}
			
			.review-block {
				padding: 3px 14px 10px 12px;
				
				.edit-review-btn {
					
				}
				
				
				.label {
					backdrop-filter: none;
					background: transparent;
					color: var(--tokens-color-txt-txt_primary_black-5);
					font-size: 14px;
					font-weight: 700;
					line-height: 140%;
					padding: 0px 2px;
				}
			}
			
			
		}
		
		
	}
	
	
	
	#option-details-modal {
		
		.modal-content {
			border-radius: 0px;
			background: var(--color-card_bg_white-96);
			min-height: 100dvh;
		}
		
		.deal-description-form {
			
			
			
			
			.status-badge {
				padding: 0px 6px 1px 6px;
			}
			
			.deal-header {
				.header-modal-padding {
					padding: 15px 12px 9px 16px;
					
					border-radius: 0 0 20px 20px;
					background: var(--color-card_bg_white);
					backdrop-filter: blur(25px);
					
				}
				.text {
					font-size: 20px;
					font-weight: 700;
					line-height: 120%;
					letter-spacing: -0.2px;
				}
				.cross-ico {
					margin-top: -4px;
				}
				
				.subheader {
					margin-bottom: 0px;
					margin-top: 8px;
					padding: 16px 16px 14px 16px;
					border-radius: 20px 20px 0px 0px;
					background: var(--color-card_bg_white);
				}
				
				.work-days-count-total {
					svg {
						max-width: 13px;
					}
					.label {
						overflow: hidden;
						font-size: 14px;
						font-weight: 600;
						line-height: 130%;
						
					}
				}
				
				.total-price {
					font-size: 14px;
					font-weight: 700;
					line-height: 130%;
				}
				
			}
			
			.deal-content-wrapper {
				padding:8px;
				border-radius: 20px;
				background: var(--color-card_bg_white);
				margin-top: 8px;
				
				.modal-deal-info {
					padding: 0px 6px 0px 6px;
				}
				.total-price {
					padding: 0px 2px;
					color: var(--tokens-color-txt-green-txt_accent_green-34);
					font-size: 16px;
					font-weight: 700;
					line-height: 140%;
					padding-top: 3px;
					text-align: right;
					
					.currency {
						color: var(--tokens-color-txt-green-txt_accent_green-34);
						font-size: 14px;
						font-weight: 600;
						line-height: 140%;
					}
				}
				.balance-tooltip {
					color: var(--tokens-color-txt-black-txt-subtitle-black-40);
					font-size: 12px;
					font-weight: 600;
					line-height: 130%;
					letter-spacing: -0.12px;
					padding-right: 3px;
				}
			}
			
			.deal-footer {
				padding: 8px;
				
				.review-block, .wait-time-block {
					padding: 8px;
				}
			}
			
		}
		
	}
	
	
}