/* Alap stílusok */
#twdpsc {
	min-width: 250px;
	max-width: 90%;
	margin: 10px auto;
	padding: 10px 30px 100px 30px;
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	border-radius: 6px;

	position: relative;
	font-size: 130%;
}
h2.twdpsc_title {
	text-align: center;
	font-weight: 400;
	margin: 0 0 10px 0;
	padding: 0;	
	color: #525f7f;
}

.twdpsc_input_container_check_item {
	margin: 0 0 8px 0;
	color: #525f7f;
	position: relative;
	text-align: left;
}

.twdpsc_input_container_check_item:before {
	content: "";
	width: 0%;
	height: 2px;
	background-color: #339933;
	position: absolute;
	left: 0;
	top: 50%;
	display: block;
	transition: all .6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.twdpsc_input_container {
	position: relative;
}

.twdpsc_input_container input {
	line-height: 1.5;
	display: block;
	color: #8898AA;
	font-weight: 300;
	width: calc(100% - 1.5rem);
	height: calc(2.75rem + 2px);
	padding: .625rem .75rem;
	border-radius: .25rem;
	background-color: #fff;
	transition: border-color .4s ease;
	border: 1px solid #D6008F;
	outline: 0;
	margin-bottom: 10px;
}

.twdpsc_buttons {
	display: flex;
	gap: 10px;
	margin-top: 10px;
}

.twdpsc_buttons div {
	flex: 1;
	display: block;
	background-color: #D6008F !important;
	font-weight: 300;
	padding: 10px;
	border-radius: .25rem;
	color: #fff;
	cursor: pointer;
	text-align: center;
	user-select: none;
	transition: background-color 0.3s;
}

.twdpsc_buttons div:hover {
	background-color: #FF3300;
	color: #fff;
}

.twdpsc_copymessage {
	width: 100%;
	text-align: center;
	opacity: 0;
	margin: 10px 0 0 0;
}

.twdpsc_copymessage_show {
	opacity: 1;
	transition: opacity 0.3s;
}

.twdpsc_is_valid {}
.twdpsc_is_valid:before { width: 50%; }

.twdpsc_checkmark {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 10px;
	right: 10px;
}

.twdpsc_checkmark_checked {
	background-size: cover;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='800px' height='800px' viewBox='0 0 32 32' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M280.393,1047.43 L273.461,1059.44 C273.41,1059.59 273.335,1059.73 273.213,1059.84 C272.81,1060.22 272.177,1060.2 271.8,1059.8 L267.228,1055.58 C266.85,1055.18 266.871,1054.54 267.274,1054.17 C267.677,1053.79 268.31,1053.81 268.688,1054.21 L272.266,1057.51 L278.661,1046.43 C278.937,1045.96 279.548,1045.79 280.027,1046.07 C280.505,1046.34 280.669,1046.96 280.393,1047.43 L280.393,1047.43 Z M286,1037 L262,1037 C259.791,1037 258,1038.79 258,1041 L258,1065 C258,1067.21 259.791,1069 262,1069 L286,1069 C288.209,1069 290,1067.21 290,1065 L290,1041 C290,1038.79 288.209,1037 286,1037 L286,1037 Z' fill='%23339933'/%3E%3C/svg%3E");
}

/* Reszponzív nézet */
@media (max-width: 600px) {
	#twdpsc {
		padding: 10px 20px 80px 20px;
		font-size: 90%;
	}
	.twdpsc_buttons {
		flex-direction: column;
	}
	.twdpsc_buttons div {
		width: 100%;
	}
	.twdpsc_input_container input {
		width: 100%;
	}
	.twdpsc_checkmark {
		top: 5px;
		right: 5px;
		width: 30px;
		height: 30px;
	}
}
