﻿div.contact-form						    {  }
div.contact-form .contents					{max-width: var(--content-running-text-width); }
div.contact-form p strong					{font-size: var(--font-size-label); padding:0; margin:15px 0 2px 0; }
div.contact-form p							{padding:0; margin:25px 0 2px 0; }
div.contact-form p.desc						{font-size: var(--font-size-p); padding:0; margin:1px 0 10px 0; font-style:italic; /*font-size:95%;*/}
div.contact-form p .manditory				{color:#f00; font-weight:bold; font-size:13px;}
div.contact-form p.countChars				{}
div.contact-form .exclaimer                 {opacity:0.8;}
div.contact-form .exclaimer .privacyPolicyLink  {}

div.contact-form .flexibleLine { display: flex; }
div.contact-form .flexibleLine.countChars .left { flex: 1 1;}
div.contact-form .flexibleLine.countChars .right { flex: 0 1 auto; align-self:end; text-align:right; opacity:0.6;}

    div.contact-form textarea,
    div.contact-form select {
        color: #111;
        font: normal 12px Arial, Verdana, Sans-Serif;
        padding: 4px 3px;
        margin: 0;
    }

    
    div.contact-form textarea { /*background:#fafafa url(/gfx/webbedit/contact-tbx.gif) top left no-repeat;*/
        background-color: #fefefe;
        border: 1px solid #c8c8c8;
        outline-style: none;
        outline-width: 0pt;
    }

    .wide-puff div.contact-form input:not(.wideBtn),
    .wide-puff div.contact-form textarea {
        background-color: var(--content-bg-color);
    }

    div.contact-form input:focus,
    div.contact-form textarea:focus { /*background:#fafafa url(/gfx/webbedit/contact-tbx-on.gif) top left no-repeat;*/
        background-color: #fafafa;
        border: 1px solid #aaa;
    }


    div.contact-form .button {
        margin-top: 0 !important;
        margin-bottom: 0 !important;        
        margin-top: 1.6vw;
        border: none;
        outline: none;
        border-radius:unset;
        appearance: none;
    }
    
    div.contact-form input[type='text'] {
        display: block;
        width: 100%;
        box-sizing: border-box;
        border: none;
        font-size: var(--font-size-input);
        
        /*height: 2.0vw;*/
        margin-bottom: 1.6vw;
        padding: 1.2vw 1.0vw 1.0vw 1.0vw;;
        
    }

    div.contact-form select {
        width: 100%;
        box-sizing: border-box;
        border: none;
        font-size: var(--font-size-input);
        /* height: 2vw; */
        margin-bottom: 1.6vw;
        padding: 1.2vw 1vw 1.2vw 1vw;
        border: 1px solid #c8c8c8 !important;
    }


div.contact-form table label,
div.contact-form table input                { font-size: var(--font-size-p); }
    
div.contact-form table                      {margin-bottom: 1.6vw;}

div.contact-form input[type='text']			{}
div.contact-form input[type='file']			{
    font-size: var(--font-size-input);
    /* background-color: #adadad; */
    color: #000000;
    text-decoration: none;
    padding: 1.2vw 2vw 1vw 2vw;
    display: inline-block;
    box-sizing: border-box;
    margin-top: 1vh;
    margin: 0 auto 0.8vw auto;
    border: 1px solid #c8c8c8 !important;
    width: 100%;
    

}
div.contact-form input[type='radio'], 
div.contact-form input[type='checkbox']		{padding:2px; transform: scale(1.8); margin:7px; cursor:pointer;}

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

div.contact-form label						{padding:0 0 0 4px; margin:0; line-height:14px;}
div.contact-form textarea					{ font-size: var(--font-size-input); width:100%; -webkit-appearance: none;padding: 1.2vw 1.0vw 1.0vw 1.0vw;}

/*
div.contact-form input[type='submit']		{margin-top:15px; padding:4px 16px; border:1px solid #ccc; border-bottom:1px solid #bbb; background-color:#eee; background-image:none; color:#333; font-weight:normal; cursor:pointer; border-radius:3px; -moz-border-radius:3px; -webkit-appearance: none;}
div.contact-form input[type='submit']:active{background-color:#ddd;}
*/

div.contact-form .errorlist					{background-color:#fdefef; border:1px solid #dfc5c5; color:#c14949 !important; padding:10px; margin:10px 0 0 0; font-weight:bold;}
div.contact-form .errorlist ul				{color:#c14949 !important;}
div.contact-form .errorlist ul li			{margin-left:21px; color:#c14949 !important; font-weight:normal !important;}

div.contact-form .okmessage					{padding:10px; margin:10px 0 0 0; background-color:#f0fdef; border:1px solid #bdbdbd; border-bottom:1px solid #e6e6e6; border-right:1px solid #e6e6e6; color:#95c149 !important; padding:10px; margin:10px 0 0 0; font-weight:bold;}
div.contact-form .okmessage ul				{color:#95c149 !important;}
div.contact-form .okmessage ul li			{color:#95c149 !important; font-weight:normal !important;}

.contact-form-layout {
    display: flex;    
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

    .contact-form-layout.left,
    .contact-form-layout.right {
        flex-direction: row;
        justify-content: space-between;
    }

    .contact-form-layout.left > div,
    .contact-form-layout.right > div { flex: 0 1 48%;}

    .contact-form-layout.left > div:first-child { align-self: start; }
    .contact-form-layout.left > div:last-child { align-self: start; }

    .contact-form-layout.right > div:first-child { order:2; align-self: start; }
    .contact-form-layout.right > div:last-child { order:1;}

    .contact-form-layout.center {
        flex-direction: column;
    }
    .contact-form-layout.center > div { width: 100%; }

.wecaptcha {
    line-height: 40px;
    font-size: 20px;
}
.wecaptcha-image {
    vertical-align: middle;
    border: 1px solid #ddd;
}
.wecaptcha input[type='text'].wecaptcha-tbx{
    height: 40px;
    width: 50px;
    padding: 0 10px;
    border: 1px solid #ddd;
    text-align: center;
    font-size: 20px;
    line-height: 40px;
    vertical-align: middle;
    display: inline-block;
    margin-bottom: 0 !important;
}


@media only screen and (max-width: 1000px) {
    div.contact-form input[type='radio'], 
    div.contact-form input[type='checkbox']		{padding:2px; transform: scale(1.2); margin:3px;}
}

@media only screen and (max-width: 800px) {
    .contact-form-layout.left > div,
    .contact-form-layout.right > div { flex: 1 1 100%;}
    .contact-form-layout.right > div:first-child { order:1; }
    .contact-form-layout.right > div:last-child { order:2;}
}
