/* tooltip block */
.tippy-box {
	width: 450px;
	background-color: #242424; 
	color: #FFFFFF; 
	border-radius: 5px; 
	padding: 10px; 
	padding-top: 20px;
}

.modal__main .description {
	font-weight: 700;
	font-size: 20px;
	line-height: 145%;

}	

.modal__main .description span {
	color: #CC546C;
}

.modal__main .modal__price {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
	font-size: 15px;
	line-height: 160%;
	font-weight: 500;
}

.modal__main .modal__promocode {
	display: flex;
	justify-content: space-between;
	color: #CC546C;
	font-size: 15px;
}

.modal__main .modal__total {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
	font-size: 18px;
	font-weight: 600;
}

.modal__main .modal__remark {
	margin-top: 15px;
	margin-bottom: 15px;
	border-radius: 10px;
	text-align: center;
	padding: 18px;
	background-color: #fff;
	color: #000;
}

.modal__main .modal__remark a {
	color: #CC546C;
	text-decoration: underline;
}

.modal__main .modal__remark .show-promocode {
	background-color: #CC546C1A;
	color: #CC546C;
	font-size: 16px;
	margin-top: 10px;
	margin-bottom: 0px;
	font-weight: 500;
}

.modal__btn {
    background-color: #CC546C;
    color: #fff;
    font-size: 18px;
    text-align: center;
    display: block;
    margin: 0 auto;
    border-radius: 50px;
    border: none;
    padding: 10px 20px;
    width: 100%;
    margin-bottom: 8px;
}

.modal__btn:hover {
	background: #FA3C1B;
    color: #FFFFFF;	
}

.modal__remark .promocode-item {
    border-radius: 50px;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0%;
    font-variation-settings: "wght" 450;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    overflow: hidden;
    cursor: text;
    border: 1px solid #0000004D;
    padding: 0px 20px;
    background-color: #fff;
	margin-top: 10px;
	margin-bottom: 0px;
}

.modal__remark .promocode-input {
    outline: none;
    border: none;
    width: 100%;
    height: 100%;
    resize: none;
	color: #747474;
	
}

.modal__remark .copy {
    cursor: pointer;
}

.modal__remark .copy:hover {
	width: 32px;
	height: 32px;
}

.modal__status {
	text-align: center;
	font-size: 20px;
	/*margin-bottom: 20px; */
}

@media (max-width: 600px) {
	.tippy-box {
		width: 350px;
	}
}

@media (max-width: 350px) {
	.tippy-box {
		width: 300px;
	}
}

@media (max-width: 260px) {
	.tippy-box {
		width: 230px;
	}
}