:root {
    --form-background: #fff;
    --form-border: #ddd;
    --form-shadow-color: #ddd;
    --form-background-highlight: #BBDEFB;
    --form-background-highlight-border: #64B5F6;

    --form-error-border: #EF5350;
    --form-error-background: #FFCDD2;

    --form-padding-tiny: 5px;
    --form-padding-small: 10px;
    --form-padding-normal: 20px;

    --form-border-radius: 5px;
    --form-border-width: 1px;
}

.new-checkout-form {
    background-color: var(--form-background);
    border: var(--form-border-width) solid var(--form-border);
    margin-bottom: var(--form-padding-normal);
    padding: var(--form-padding-normal) 0;
    border-radius: var(--form-border-radius);
    box-shadow: 0 0 4px var(--form-shadow-color);
}

.new-checkout-form .form-intro,
.new-checkout-form .form-group {
    padding: var(--form-padding-tiny) var(--form-padding-normal);
} 

.form-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    background-color: var(--form-background-highlight) ;
    border: var(--form-border-width) solid var(--form-background-highlight-border);

    padding: var(--form-padding-normal);
    margin: var(--form-padding-small) 0 var(--form-padding-normal);
    border-radius: var(--form-border-radius);
    box-shadow: 0 0 4px var(--form-shadow-color);
}

.form-top h3 {
    margin: 0; padding: 0;
}

.form-top .price {
    font-weight: 700;
}

.new-checkout-form label {
    font-size: 1.1em;
}


.new-checkout-form .form-error {
    background-color: var(--form-error-background);
    border-top: var(--form-border-width) solid var(--form-error-border);
    border-bottom: var(--form-border-width) solid var(--form-error-border);
}

.new-checkout-form .button-box {
    display: flex;
    justify-content: center;
    margin: var(--form-padding-small);
}

.new-checkout-form .form-control {
    border-radius: var(--form-border-radius);
}

/* licences */
.licence-info-box {
    background-color: var(--form-background);
    padding: var(--form-padding-normal);
    margin-bottom: var(--form-padding-normal);
    box-shadow: 0 0 4px var(--form-shadow-color);
    border-radius: var(--form-border-radius);
}

.licence-box-header {
    border-bottom: var(--form-border-width) solid var(--form-background-highlight-border);
    text-align: right;
    padding: 0 calc(var(--form-padding-normal) + var(--form-padding-small));
    margin: 0 calc(var(--form-padding-normal) * -1);
}

.licence-box-header h3 {
    padding: 0;
    margin: 0;
}

.licence-box-header small {
    color: #555;
}

.licence-box {
    margin: var(--form-padding-normal) 0;
}

.licence-box-content {
    margin: 1em 0;
}

.licence-key {
    display: flex;
    align-items: center;
    padding: var(--form-padding-small) var(--form-padding-small);
}

.licence-domain {
    border-bottom: var(--form-border-width) solid var(--form-background-highlight);
}

.licence-key .title {
    font-weight: 700;
    flex-basis: 30%;
    text-align: right;
    padding-right: var(--form-padding-normal);
}

.licence-key .title > small {
    font-weight: 400;
    color: darkgray;
}

.licence-key .key {
    display: flex;
    align-items: center;
    flex-grow: 2;
    justify-content: space-between;
    font-family: 'Consolas', 'Courier New', Courier, monospace;
    background-color: var(--form-shadow-color);
    padding: var(--form-padding-normal);
    border-radius: var(--form-border-radius);
}

.licence-key .clipboard-copy {
    background-color: transparent;
    font-size: 1em;
}


/* page */

.new-checkout-page h2 {
    border-bottom: var(--form-border-width) solid var(--form-background-highlight-border);
    padding-bottom: var(--form-padding-normal);
    margin-bottom: var(--form-padding-normal);
}

.hide-vat {
    display: none;
}

/* standards */
.ch-flex {
    display: flex;
    align-items: top;
}

.ch-flex > div {
    padding: 0 10px;
}

.mb-1 { margin-bottom: 0.2em; }
.mb-2 { margin-bottom: 0.5em; }
.mb-3 { margin-bottom: 1.0em; }
.mb-4 { margin-bottom: 2em; }

.pb-1 { padding-bottom: 0.2em;}
.pb-2 { padding-bottom: 0.5em;}
.pb-3 { padding-bottom: 1.0em;}
.pb-4 { padding-bottom: 2em;}

.bb-1 { border-bottom: 1px solid #ddd;}
.bb-2 { border-bottom: 2px solid #ddd;}
.bb-3 { border-bottom: 3px solid #ccc;}

.info-box {
    border: 1px solid #ddd;
    background-color: #eee;
    padding: 0.5em;
    margin: 0.5em 0;
}

.info-box h3 {
    margin: 0.5em 0 1em;
}

.refresh {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
    flex-direction: column; 
}

.refresh > .pulses {
    display: flex;
}

.refresh-pulse {
    background: rgb(79, 128, 225);
	border-radius: 50%;
	margin: 10px;
	height: 20px;
	width: 20px;

	box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
	transform: scale(1);
	animation: pulse 2s infinite;
}

.refresh-pulse.pulse-2 {
    animation-delay: 0.5s;
    
}
.refresh-pulse.pulse-3 {
    animation-delay: 1.0s;
    
}

@keyframes pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
}