form[class*="Retrieve"] {
    --loading-icon-width: 0.85em;
    --loading-icon-gap: 0.8rem;
    --loading-transition: 0.4s;
    --white-loading-icon: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'><path opacity='.33' d='M12,24C5.38,24,0,18.62,0,12S5.38,0,12,0s12,5.38,12,12-5.38,12-12,12ZM12,3.24C7.17,3.24,3.24,7.17,3.24,12s3.93,8.76,8.76,8.76,8.76-3.93,8.76-8.76S16.83,3.24,12,3.24Z'/><path d='M4.67,6.28c-.46,0-.91-.19-1.23-.57-.54-.64-.51-1.57.05-2.17l.02-.02s.01-.01.02-.02h0C5.8,1.24,8.8,0,12,0h0c3.2,0,6.21,1.25,8.47,3.51.63.63.63,1.66,0,2.29-.63.63-1.66.63-2.29,0-1.65-1.65-3.84-2.56-6.17-2.56h0c-2.31,0-4.49.89-6.14,2.52l-.14.13c-.31.26-.68.39-1.05.39Z'><animateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='1s' repeatCount='indefinite'/></path></svg>");

    & .button-inner {
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		transition: transform var(--loading-transition) ease-in-out 0.75s;
        transform: translateX(calc((0.85em / 2) + 0.6rem));

		&:after {
			content: var(--white-loading-icon);
			width: var(--loading-icon-width);
			height: var(--loading-icon-width);
			margin-left: var(--loading-icon-gap);
			opacity: 0;
			transition: opacity var(--loading-transition) ease-in-out 0.75s;
			display: block;
		}
	
        
    }

    & .button.loading {
        & .qsButton {
            &:hover {
                background-position: inherit !important;
                cursor: default;
            }

            &:before {
                content: "";
                display: block;
                position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: white;
				opacity: 0.35;
            }
        }

        & .button-inner {
            transform: translateX(0);

            &:after {
                opacity: 1;
            }
        }
    }
}

body .wrap {
    overflow: auto;
}
#retrieve {
    margin-top: 2em;
    overflow: auto;
    width: 80%;
}
#QuoteRetrieveForm, #QuoteRetrieveForm1 {
    width: 85%;
}
#emailRetrieve, #numberRetrieve {
    width: 45%;
    position: relative;
}
#emailRetrieve {
    float: right;
    padding-left: 8%; /*45% + 45% =90%. 100% of container - 90% = 10% remaining to fill container. "OR" text is 2em = 20%. 20% of remaining 10% of container = 8%.*/
    border-left: 1px solid #c2c2c2;
}
#emailRetrieve .or {
    background-color: #fcfcfc;
    color: #000;
    font-family: "Open Sans" , Arial, Sans-Serif;
    font-size: 2em;
    padding: 12px 0;
    position: absolute;
    top: 45%;
    left: -10px;
}
#numberRetrieve {
    float: left;
}
#retrieve h2 {
    color: #555;
    font-family: "Open Sans" , Arial, Sans-Serif;
    font-size: 2em;
    line-height: 1em;
    padding-bottom: 2em;
    padding-top: 0;
}

#retrieve .all-fields-required-msg {
    clear: both;
    font-size: 1.6em;
    margin: 0px 0px 0.5em 1px; 
}

#retrieve h2:focus,
#retrieve .all-fields-required-msg:focus {
    outline: thin dotted #0062cf !important;
    display: inline-block;
}

@keyframes fadeMove {
    0% {
        opacity: 1;
        left: 0;
        top: 43%;
    }

    25% {
        opacity: 0;
        left: 0;
        top: 43%;
    }

    50% {
        opacity: 0;
        left: 5.8em;
        top: -7px;
    }

    100% {
        opacity: 1;
        left: 5.8em;
        top: -7px;
    }
}

.content .quoteRetrieve .dob {
    margin-bottom: 0;
}
.quoteRetrieve .dobLabel, .quoteRetrieve .watermark.active .dobLabel  {
    color: #555;
    font-family: "Open Sans", Arial, Sans-Serif;
    font-size: 1.8rem;
    margin-bottom: 8px;
    padding: 0;
    position: static;
}
.quoteRetrieve .birthDateMask {
    background-color: transparent;
    font-family: "Open Sans", Arial, Sans-Serif;
    font-size: 1.8rem;
}

.quoteRetrieve .dob-mask {
    font-size: 1.8rem;
    position: absolute;
    font-family: "Open Sans", Arial, Sans-Serif;
    line-height: 1;
    padding: 0.598em;
    top: 47%;
}
.quoteRetrieve .dob-mask span {
    opacity: 0;
    visibility: hidden;
}
.quoteRetrieve .dob.active .dob-mask, .quoteRetrieve .dob.inactive .hideLabel .dob-mask {
    animation: fadeMove 0.25s linear;
    left: 5.8em;
    padding-right: 0;
    top: -7px;
}
.quoteRetrieve .dob.active .dob-mask::after, .quoteRetrieve .dob.inactive .hideLabel .dob-mask::after {
    content: ")";
}

.quoteRetrieve .dob.active .dob-mask::before, .quoteRetrieve .dob.inactive .hideLabel .dob-mask::before {
    content: "(";
}

.zipCode {
    width: 35%;
}
#numberRetrieve .zipCode {
    margin-bottom: 5.1em;
}
span.slash {
    display: none;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - max 1023 */
@media screen and (max-width: 1023px) {
    #retrieve {
       width: 85%;
    }
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - max 1000 */
@media screen and (max-width: 1000px) {
    #retrieve h2{
        font-size: 1.8em;
    }
    .zipCode {
        width: 40%;
    }
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - max 892 */
@media screen and (max-width: 892px) {
    #retrieve {
       width: 100%;
    }
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - max 773 */
@media screen and (max-width: 773px) {
    .zipCode {
        width: 55%;
    }
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - max 756 */
@media screen and (max-width: 756px) {
    #retrieve #numberRetrieve h2{
        padding-bottom: 3em;
    }
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - max 630 */
@media screen and (max-width: 630px) {
    
    #emailRetrieve, #numberRetrieve {
        width: 100%;
    }
    #numberRetrieve {
        float: none;
    }
    #retrieve #numberRetrieve h2{
        margin-bottom: 0;
        padding-bottom: 2em;
    }
    #retrieve #emailRetrieve h2{
        padding-top: 1.8em;
    }
    #numberRetrieve .zipCode {
        margin-bottom: 15px;
    }
    #emailRetrieve {
        float: none;
        padding-left: 0;
        border-left: none;
        border-top: 1px solid #c2c2c2;
        padding-top: 2.25em;
        margin-top: 4.5em;
    }
    #emailRetrieve .or {
        padding: 0 12px;
        top: -16px;
        left: 45%;
    }
}