#modal-order-history {
	
	
	.modal-content {
		border-radius: 20px;
		min-height: 147px;
		background: var(--color-card_bg_white);
	}
	
	
	.modal-header {
		position: relative;
		padding: 20px 38px 5px 38px;
		.title {
			color: var(--tokens-color-txt-txt_primary_black-5);
			font-size: 26px;
			font-weight: 700;
			line-height: 120%;
		}
		.cross {
			position: absolute;
			top: 20px;
			right: 16px;
			cursor: pointer;
			transition: .1s;
			transform: translateY(-3px);
				
			svg, svg path {
				transition: .1s;
			}
			path {
				stroke-opacity: 1;
				stroke: var(--tokens-color-txt-txt-subtitle-black-40);
			}
		}
		.cross:hover {
			svg {
				transform: scale(1.1);
			}
			path {
				stroke-opacity: .8;
			}
		}
	}
	
	.modal-body {
		padding: 0px 36px 36px 36px;
		
		.history-item {
			padding: 14px 20px 14px 20px;
			border-radius: 10px;
			background: var(--color-bg-input-bg-static-5);
			
			.title {
				color: var(--tokens-color-txt-txt_primary_black-5);
				font-size: 16px;
				font-weight: 500;
				line-height: 130%;
				
				
				word-wrap: break-word;
				overflow-wrap: break-word;
				word-break: break-word;
				
			}
			.date {
				color: var(--tokens-color-txt-txt-subtitle-black-40);
				font-size: 14px;
				font-weight: 500;
				line-height: 130%;
			}
			
		}
		
		
		.history-item.active {
			background: var(--color-bg-input_bg_done);
		}
		
		.text-center {
			text-align: center;
		}
		
		.spinner-border {
			opacity: .1;
			width: 40px;
			height: 40px;
			margin-top: 10px;
		}
		
	}
	
	
}


@media (max-width: 924px) {
	#modal-order-history.fade .modal-dialog {
		transform: translateY(100%);
		transition: transform .1s ease-out;
	}
	#modal-order-history.show .modal-dialog {
		transform: translateY(0);
	}
	#modal-order-history {
		.modal-dialog-centered {
			align-items: end;
			min-height: 100dvh;
		}
		
		
		.modal-dialog {
			max-width: 550px;
		}
		.modal-content {
			border-radius: 0px;
			/* height: 100dvh; */
			/* background: var(--color-card_bg_white-96); */
			border-radius: 20px 20px 0px 0px;
			overflow: hidden;
			background: var(--color-card_bg_white);
			min-height: 0px;
		}
		
		.modal-header {
			background: transparent;
			padding: 17px 5px 17px 16px;
			
			.title {
				font-size: 22px;
				font-weight: 700;
				line-height: 124%;
			}
			.cross {
				top: 15px;
				right: 10px;
			}
		}
		.modal-body {
			padding: 0px 8px 8px 8px;
			border-radius: 20px;
			background: var(--color-card_bg_white);
			margin-top: 0px;
			flex: initial;
			
			.history-item {
				padding: 12px 16px;
				
				.title {
					font-size: 14px;
					font-weight: 500;
					line-height: 130%;
				}
				.date {
					font-size: 12px;
					font-weight: 500;
					line-height: 130%;
				}
			}
			
		}
	}
	
	
	
	
}