.contactForm {
    
    display: flex;
    /*height: 10vh;*/

    
}

 /* Used for extended style to kick in when exended is enabled.  I.e. !UseSimpleLayout */
.extendedContactForm {
   background-color: var(--form-bg-color);
   margin-left: var(--content-h-margin);
   margin-right: var(--content-h-margin);

    /* Use with :before and :after selectors.*/

   position: relative;
   /*height: 50vw;
   max-height: 50vw;*/
        
    
}

.extendedContactForm:before,
.extendedContactForm:after {
   content: "";
   background-color: var(--form-bg-color);
   top: 0px;
   height: 100%;
   width: var(--content-h-margin);
   position: absolute;
   clear:right;
}

    .extendedContactForm:before {
        left: calc(0px - var(--content-h-margin));
    }
    .extendedContactForm:after {
        right: calc(0px - var(--content-h-margin));
    }
 

.standardColors {}                /* Used for enable standard colors */
.customColors {}                  /* Used for enable custom colors */

    .contactForm.standardColors   { background-color: var(--form-bg-color); }
    
    .customColors.extendedContactForm:before,
    .customColors.extendedContactForm:after,
    .contactForm.customColors     { background-color: transparent; }

    .contactForm .leftPane,
    .contactForm .rightPane {
        flex: 1 1 50%;
        height: auto;
        display: flex;
        align-items: center;
    }

    contactForm .padding {
        padding: 3vw 0;
    }

    .contactForm .rightPane {
        display: flex;
        /*align-items: end; If you want to push the image to the bottom */
        justify-content:end;
        max-height: 100%;
        /*height: 100%;*/
    }

    .contactForm .rightPane .cont {
           
            max-height: 100%;
            /*height: 100%;*/
            /*height: 50vw;*/
            flex: 1 1 auto;
            width: 100%;
        }

            
            .contactForm .rightPane .backgroundImage {
            }
            
            .contactForm .rightPane img {
                float:right;   
                max-height: 100%;
                display: block;
            }
    .contactForm .separator {
        flex: 0 0 0.1vw; 
        /*background: var(--line-color);*/
            
        
    }

    

        .contactForm .cont {
           /* margin: auto;    */       /* Center div */
        }

        .contactForm span {
            font-size: var(--font-size-error);
        }

        

        .contactForm .leftPane .cont {
            /* width: 80%; */
            
            /* flex: 1 1 80%; */
            margin-left: auto;
            margin-right: auto;
            text-align: left;
            max-width: var(--content-running-text-width);
            padding-bottom: 10px;
        }

        .extendedContactForm .leftPane .cont {
            max-width: 90%;
            margin-left: 0;
        }

        .contactForm .leftPane h1,
        .contactForm .leftPane h2,
        .contactForm .leftPane h3, 
        .contactForm .leftPane h4 {
            margin-bottom: 2vh;
            font-size: var(--font-size-h3);         
        }

        .contactForm .leftPane span.field {
            display: block;
            width: 100%;
            position: relative;
            
        }
        
        contactForm .leftPane span.field span {
            font-size: var(--font-size-error);
        }

        .contactForm .errorMsg {

        }

       .contactForm .leftPane a.button {
           margin-top: 0 !important;
           margin-bottom: 0 !important;
        }



            .contactForm .leftPane span input {
                display: block;
                width: 100%;
                box-sizing: border-box;
                border: none;
                font-size: var(--font-size-input);
                /*height: 2.0vw;*/
                margin-top: 1.6vw;
                padding: 1.0vw 1.0vw;
                
            }

                        .contactForm.standardColors   .leftPane span input  { background-color: var(--form-input-bg-color); }
                        .contactForm.customColors     .leftPane span input  { background-color: #fff; }
            .wide-puff  .contactForm.customColors     .leftPane span input  { background-color: var(--content-bg-color); }

            .contactForm .leftPane span input:focus {
                border: 0.1vw solid black;
                outline: none;
            }

            .contactForm .leftPane span input:before {
                content: '';
            }

        
            
            .contactForm .rightPane img.hasText {
                max-width: 14vw;
            }
    
            .contactForm .rightPane p {
                text-align:left;
                font-size: var(--font-size-p);
                text-align: center;
            }

            .contactForm p.exclaimer { font-size: var(--font-size-exclaimer); 
                                       margin-top: 1.2vw; 
                                       margin-bottom: 3vw;
            }



.contactForm a.privacyPolicyLink {}
            

.contactForm input.validationerror, 
.contactForm textarea.validationerror, 
.contactForm select.validationerror     {/*background:#fdefef url(/gfx/webbedit/contact-tbx-error.gif) top left no-repeat;*/ border:1px solid #dfc5c5; padding:4px 3px; color:#c14949;}
.contactForm .errorlist .validationerror			{border:1px solid #dfc5c5; padding:2px; color:#c14949;}


.contactForm .okMessage,
.contactForm .errorMessage {
    padding: 0.5vh 0 0.5vh 1.5vh;
    margin: 1.5vh 0 0 0;
    
    border: 0.1vw solid #bdbdbd;
    border-bottom: 0.1vw solid #e6e6e6;
    border-right: 0.1vw solid #e6e6e6;
    color: #95c149 !important;
    font-weight: bold;
    font-size: var(--font-size-p);
}

.contactForm .errorMessage {
    
    color: #c14949 !important;
}


@media screen and (max-width: 800px) {
    .contactForm {
        flex-wrap: wrap;
    }

    .contactForm .leftPane { 
        
        padding-bottom: 8vw;
    }
    .contactForm .leftPane,
    .contactForm .rightPane { 
        flex: 1 1 100%;
        max-width: 100%;
        padding-top: 7vw;
    }
    .contactForm .rightPane {        
        padding-top: 8vw;
    }
    .contactForm .leftPane .cont,
    .contactForm .rightPane .cont {         
        max-width: 100%;
    }
    .contactForm .rightPane,
    .contactForm .separator { display: none; }

    .contactForm .leftPane span input {padding: 2vw 1vw; }
    .contactForm p.exclaimer { margin-top: 4.2vw; }
    .contactForm { border-bottom: none; }
}