select#woocommerce_verifone_payment_methods {
    height: 200px;
    width: 200px;
}

textarea#woocommerce_verifone_public_key {
    resize: none;
    height: 10em;
}

p.description {
	max-width: 400px;
}

/* Hide reset field */
input#woocommerce_verifone_reset_settings,
input#woocommerce_verifone_shop_public_key_ro {
	display: none;
}

span.woocommerce_verifone_section_advanced_settings_desc {
	font-size: 14px;
	color: #646970;
	max-width: 640px;
	display: inline-block;
}

/* Hide payment methods field */
input#woocommerce_verifone_payment_methods_list {
	display: none;
}

/* make long select2 dropdown more usable */
#select2-woocommerce_verifone_payment_methods-results li[data-selected="true"] {
	display: none;
}

.success {
    color: #080;
    font-weight: bold;
}

.info {
    color: #eb5e00;
    font-weight: bold;
}

.strong {
    font-weight: bold;
}

.error {
    color: #D40707;
    font-weight: bold;
}

/* Onboarding */
.verifone-bluecommerce-onboarding {
	border: none;
	background-color: #fff;
	padding: 0 !important;
}

.verifone-bluecommerce-onboarding .top-bar {
	display: flex;
	gap: 40px;
	background: url('../img/onboarding-header.png');
	background-size: cover;
	padding: 20px;
}

.verifone-bluecommerce-onboarding .top-bar img {
	width: auto;
	max-height: 55px;
}

.verifone-bluecommerce-onboarding .top-bar p {
	margin: 0;
	padding: 0;
	font-size: 15px;
	color: #fff;
	max-width: 600px;
	font-weight: 500;
}

.verifone-bluecommerce-onboarding .steps {
	padding: 15px;
	padding-bottom: 5px;
}

.verifone-bluecommerce-onboarding .steps ol {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	gap: 40px;
	flex-wrap: wrap;
	align-items: stretch;
}

.verifone-bluecommerce-onboarding .steps ol .step {
	display: flex;
	flex: 1 1 300px;
	margin-bottom: 0;
	padding-bottom: 0;
	gap: 20px;
	opacity: .65;
	padding: 15px;
	padding-bottom: 20px;
	margin-bottom: 10px;
	border-radius: 8px;
}

.verifone-bluecommerce-onboarding .steps ol .step.step-active {
	opacity: 1;
	background-color: #F5F5F5;
}

.verifone-bluecommerce-onboarding .steps ol .step.step-active p {
	font-weight: 600;
}

.verifone-bluecommerce-onboarding .steps ol .step .icon {
	flex: 0 0 60px;
	height: 60px;
	border-radius: 50%;
	background-color: #ececec;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 60px;
}

.verifone-bluecommerce-onboarding .steps ol .step .icon svg {
	height: 30px;
	width: 30px;
	position: relative;
	overflow: visible;
	color: #004AEF;
}

.verifone-bluecommerce-onboarding .steps ol .step p:last-child {
	margin-bottom: 0;
}

.verifone-bluecommerce-onboarding .steps ol .step-done .confetti-piece {
	opacity: 0;
	transform-origin: center;
}

.verifone-bluecommerce-onboarding .steps ol .step-done.step-active .icon .confetti-piece {
	animation: verifone-bluecommerce-onboarding-confetti-burst 1.2s ease-out forwards 1;
}

.verifone-bluecommerce-onboarding .steps ol .step-done.step-active .icon .piece-1 { --transform-end: translate(-80px, -150px) rotate(-180deg); animation-delay: 2s; }
.verifone-bluecommerce-onboarding .steps ol .step-done.step-active .icon .piece-2 { --transform-end: translate(80px, -150px) rotate(180deg); animation-delay: 2.1s; }
.verifone-bluecommerce-onboarding .steps ol .step-done.step-active .icon .piece-3 { --transform-end: translate(-120px, -80px) rotate(270deg); animation-delay: 2.05s; }
.verifone-bluecommerce-onboarding .steps ol .step-done.step-active .icon .piece-4 { --transform-end: translate(120px, -80px) rotate(-270deg); animation-delay: 2.15s; }
.verifone-bluecommerce-onboarding .steps ol .step-done.step-active .icon .piece-5 { --transform-end: translate(-150px, 0) rotate(-360deg); animation-delay: 2.2s; }
.verifone-bluecommerce-onboarding .steps ol .step-done.step-active .icon .piece-6 { --transform-end: translate(150px, 0) rotate(360deg); animation-delay: 2.02s; }
.verifone-bluecommerce-onboarding .steps ol .step-done.step-active .icon .piece-7 { --transform-end: translate(-120px, 80px) rotate(120deg); animation-delay: 2.25s; }
.verifone-bluecommerce-onboarding .steps ol .step-done.step-active .icon .piece-8 { --transform-end: translate(120px, 80px) rotate(-120deg); animation-delay: 2.08s; }
.verifone-bluecommerce-onboarding .steps ol .step-done.step-active .icon .piece-9 { --transform-end: translate(-80px, 150px) rotate(400deg); animation-delay: 2.3s; }
.verifone-bluecommerce-onboarding .steps ol .step-done.step-active .icon .piece-10 { --transform-end: translate(80px, 150px) rotate(-400deg); animation-delay: 2.12s; }
.verifone-bluecommerce-onboarding .steps ol .step-done.step-active .icon .piece-11 { --transform-end: translate(0, -160px) rotate(-90deg); animation-delay: 2.04s; }

@keyframes verifone-bluecommerce-onboarding-confetti-burst {
	0% {
		opacity: 1;
		transform: translate(0, 0) rotate(0deg) scale(0.5);
	}
	100% {
		opacity: 0;
		transform: var(--transform-end) scale(1);
	}
}

/* On smaller than 1490px width */
@media (max-width: 1490px) {
	.verifone-bluecommerce-onboarding .steps ol .step .icon {
		display: none;
	}

	.verifone-bluecommerce-onboarding .steps ol {
		gap: 20px;
	}
}

@media (max-width: 800px) {
	.verifone-bluecommerce-onboarding .steps ol .step .icon {
		display: inherit;
	}

	.verifone-bluecommerce-onboarding .steps ol {
		gap: 0;
	}
}