:root {

    /*////////////////////*/
    /*/// Theme Colors //*/
    /*//////////////////*/

    /*/// Page Colors //*/
        --background-color: #ffffff;
        --foreground-color: #ffffff;
        --border-color: #dee2e6;
        --border-radius: 8px;

        --text-color: #212529;

    /*/// Form element Colors //*/    
        --form-element-border-color: 1px solid #858585;
        --form-element-background-color: #ffffff;

    /*/// Heading & text Colors //*/   
        --member-heading-color: var(--text-color);

        --sub-heading-color: var(--text-color);

        --label-text-transform: none;
        --label-text-weight: normal;

        --link-color: #0056B3;
        --link-decoration: underline;
        --placeholder-color: #ababab;

    /*/// Button Colors //*/ 
    /*// (CSS brightness(90%) is applied on hover/focus //*/    
        --submit-button-color: #0056B3;
        --submit-button-border-color: 1px solid #0056B3;
        --submit-button-text-color: #ffffff;
        --submit-button-font-weight: normal;

        --reset-button-color: #f8f9fa;
        --reset-button-border-color: 1px solid #212529;
        --reset-button-text-color: #212529;
        --submit-button-font-weight: normal;


        /*// Light / Dark //*/

        --light-theme-text-color: #1b1b1b;
        --light-theme-background-color: #ffffff;

        --dark-theme-text-color: #ffffff;
        --dark-theme-background-color: #1b1b1b;

        
       /*// Colors //*/

       --form-background-color: var(--background-color);

       --form-foreground-color: var(--foreground-color);
       --form-foreground-border: 1px solid var(--border-color);
       --form-foreground-border-radius: 0.33rem;
       --form-foreground-container-padding: 16px;


       --form-foreground-container-padding-mobile: 16px;
       --form-foreground-border-mobile: none;

       --alert-area-background-color: #f8d7da;
       --alert-area-border-color: #f5c6cb;
       --alert-area-text-color: #8F0000;

       --form-main-heading-color: var(--member-heading-color);
       --form-sub-heading-color: var(--sub-heading-color);

       --required-notice-color: var(--text-color);

       --form-label-color: var(--text-color);
       --privacy-text-color: var(--text-color);
       --privacy-link-color: var(--link-color);
       --privacy-link-decoration: var(--link-decoration);
       --privacy-link-hover-color: var(--link-color);

       --form-field-border-color: var(--form-element-border-color);
       --form-field-background-color: var(--form-element-background-color);
       --form-field-text-color: #495057;
       --form-field-placeholder-color: var(--placeholder-color);
       --form-field-placeholder-opacity: 1;

       --form-field-focus-border-color: 1px solid #858585;
       --form-field-focus-background-color: #ffffff;
       --form-field-focus-text-color: #495057;
       --form-field-focus-placeholder-color: var(--placeholder-color);
       --form-field-focus-placeholder-opacity: 1;

       --required-asterisk-color: #b60000;

       /*// Buttons //*/
       --button-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
       --button-font-size: 1rem;
       --button-font-weight: var(--submit-button-font-weight);
       --button-padding: 10px 35px;
       --button-border-radius: 0.5rem;

       --button-primary-background-color: var(--submit-button-color);
      
       /* --button-primary-background-color: rgb(from var(--submit-button-color) r g b / 1); */
       --button-primary-border: 1px solid var(--submit-button-border-color);
       --button-primary-text-color: var(--submit-button-text-color);

       /* --button-primary-focus-background-color: hsl(from var(--submit-button-color) h calc(s * 1.5) l); */
       /* --button-primary-focus-background-color: var(--submit-button-color) h calc(s * 1.5); */
       --button-primary-focus-background-color: var(--submit-button-color);
       --button-primary-focus-border: 1px solid var(--submit-button-border-color);
       --button-primary-focus-text-color: var(--submit-button-text-color);


       --button-secondary-background-color: var(--reset-button-color);
       --button-secondary-border: var(--reset-button-border-color);
       --button-secondary-text-color: var(--reset-button-text-color);

       --button-secondary-focus-background-color:  hsl(from var(--reset-button-color) h calc(s * 1.5) l);
       --button-secondary-focus-border: var(--reset-button-border-color);
       --button-secondary-focus-text-color: var(--reset-button-text-color);




       --comments-span-color: #b60000;

       /*// Text Syles //*/
        --main-heading-fonts: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --main-heading-font-size: 2.5rem;
        --main-heading-font-weight: 500;
        --main-heading-font-line-height: 1.2;
        --main-heading-margin: 0 0 0.5rem 0;
        --main-heading-padding: 0;
        --main-heading-text-alignment: center;

        --sub-heading-fonts: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --sub-heading-font-size: 2.5rem;
        --sub-heading-font-weight: 500;
        --sub-heading-font-line-height: 1.2;
        --sub-heading-margin: 0 0 0.5rem 0;
        --sub-heading-padding: 0;
        --sub-heading-text-alignment: center;

       
        --required-notice-fonts: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --required-notice-font-size: 1rem;
        --required-notice-font-weight: 400;
        --required-notice-line-height: 1.5;
        --required-notice-text-align: left;

        --form-label-fonts: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --form-label-font-size: 1rem;
        --form-label-font-weight: var(--label-text-weight);
        --form-label-font-line-height: 1.5;
        --form-label-margin: 0 0 0.5rem 0;
        --form-label-text-transform: var(--label-text-transform);

        --alert-area-fonts: Arial, Helvetica, sans-serif;
        --alert-area-font-size: 0.75rem;
        --alert-area-font-weight: 400;
        --alert-area-font-line-height: 1.8;

        --alert-area-link-fonts: Arial, Helvetica, sans-serif;
        --alert-area-link-font-size: 0.625rem;
        --alert-area-link-font-weight: 400;
        --alert-area-link-font-line-height: 1.5;
        --alert-area-link-text-decoration: var(--link-decoration);

        --alert-area-link-hover-font-weight: 400;
        --alert-area-link-hover-text-decoration: underline;

        --district-text-fonts: Arial, Helvetica, sans-serif;
        --district-text-font-size: 0.75rem;
        --district-text-font-weight: 400;
        --district-text-font-line-height: 400;

        --form-field-fonts: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --form-field-font-size: 0.875rem;
        --form-field-font-weight: 400;

        --subtext-fonts: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --subtext-font-size: 0.75rem;
        --subtext-font-weight: 400;
        --subtext-font-line-height: 1.5;

        --privacy-label-fonts: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --privacy-label-font-size: 0.75rem;
        --privacy-label-font-weight: 400;
        --privacy-label-font-line-height: 1.5;
        --privacy-label-text-decoration: var(--link-decoration);
        --privacy-label-text-alignment: center;


        --privacy-link-fonts: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --privacy-link-font-size: 0.75rem;
        --privacy-link-font-weight: 400;
        --privacy-link-font-line-height: 1.5;
        --privacy-link-text-alignment: center;

        --privacy-link-hover-font-weight: 400;
        --privacy-link-hover-text-decoration: underline;
       /*// Form Elements //*/

       --comments-textarea-height: 75px;

       --comments-span-font-size: 0.625rem;
       --comments-span-font-weight: 400;
 
       --comments-span-font-family: sans-serif; 



    }

    body {
        background-color: var(--form-background-color);
    }

    /* main {
		padding-right: 15px;
		padding-left: 15px;
		} */

    #main-content-container.inframe-border {
        padding: var(--form-foreground-container-padding);
        border: var(--form-foreground-border);
        border-radius: var(--form-foreground-border-radius);
    }


	#contactForm {
		font-size: var(--form-label-font-size);
		
	}

    header h1 {
        font-size: var(--main-heading-font-size);
        color:var(--member-heading-color);
        font-weight: var(--main-heading-font-weight);
        font-family: var(--main-heading-fonts);
        line-height: var(--main-heading-font-line-height);
        margin: var(--main-heading-margin);
        padding: var(--sub-heading-padding);
        text-align: var(--main-heading-text-alignment);
    }

    h1#form-heading{
        font-size: var(--sub-heading-font-size);
        color:var(--form-sub-heading-color);
        font-weight: var(--sub-heading-font-weight);
        font-family: var(--sub-heading-fonts);
        line-height: var(--sub-heading-font-line-height);
        margin: var(--sub-heading-margin);
        padding: var(--main-heading-padding);
        text-align: var(--sub-heading-text-alignment);
    }

    div.required-notice {
        font-size: var(--required-notice-font-size);
        color:var(--required-notice-color);
        font-weight: var(--required-notice-font-weight);
        font-family: var(--required-notice-fonts);
        line-height: var(--required-notice-line-height);
        text-align: var(--required-notice-text-alignment);
    } 

/*// Form Inputs //*/
	#contactForm input[type='text'],
    #contactForm input[type='number'],
    #contactForm input[type='tel'],
    #contactForm input[type='email'],
    textarea#comments
    {
		font-size: var(--form-field-font-size);
		border: var(--form-field-border-color);
        color: var(--form-field-text-color);
        background-color: var(--form-field-background-color);
       
	}
	#contactForm input[type='text']:focus,
    #contactForm input[type='number']:focus,
    #contactForm input[type='tel']:focus,
    #contactForm input[type='email']:focus,
    textarea#comments:focus {
		font-size: var(--form-field-font-size);
		border: var(--form-field-focus-border-color);
        color: var(--form-field-focus-text-color);
        background-color: var(--form-field-focus-background-color);
	}

	#contactForm select{
		font-size: var(--form-field-font-size);
		border: var(--form-field-border-color);
        color: var(--form-field-text-color);
        background-color: var(--form-field-background-color);
	}

    textarea#comments {
        height: var(--comments-textarea-height); 
        font-size: var(--form-field-font-size);
    }

	#contactForm input::placeholder,
    #contactForm textarea::placeholder { 
		color: var(--form-field-placeholder-color);
		opacity: var(--form-field-placeholder-opacity);
	}

	#contactForm input:focus::placeholder,
    #contactForm textarea:focus::placeholder { 
		color: var(--form-field-focus-placeholder-color);
		opacity: var(--form-field-focus-placeholder-opacity); 
	}


/*// Buttons //*/
 	#contactForm input[type='button'].btn.btn-primary {
        font-size: var(--button-font-size);
        border: var(--button-primary-border);
        background-color: var(--button-primary-background-color);
        color:var(--button-primary-text-color);
        padding: var(--button-padding);
        font-weight: var(--button-font-weight);
        border-radius: var(--button-border-radius);
        font-family: var(--button-font-family);
        transition: all 200ms ease-in-out;
    }   
    #contactForm input[type='button'].btn.btn-primary:hover,
    #contactForm input[type='button'].btn.btn-primary:focus,
    #contactForm input[type='button'].btn.btn-primary:active {
        border: var(--button-primary-focus-border);
        background-color: var(--button-primary-focus-background-color);
        color:var(--button-primary-focus-text-color);
        font-weight: var(--button-font-weight);
        filter:brightness(90%);
    }

    #contactForm input[type='reset'].btn.btn-light {
        font-size: var(--button-font-size);
        border: var(--button-secondary-border);
        background-color: var(--button-secondary-background-color);
        color:var(--button-secondary-text-color);
        padding: var(--button-padding);
        font-weight: var(--button-font-weight);
        border-radius: var(--button-border-radius);
        font-family: var(--button-font-family);
        transition: all 200ms ease-in-out;
    }

    #contactForm input[type='reset'].btn.btn-light:hover,
    #contactForm input[type='reset'].btn.btn-light:focus,
    #contactForm input[type='reset'].btn.btn-light:active {
        border: var(--button-secondary-focus-border);
        background-color: var(--button-secondary-focus-background-color);
        color:var(--button-secondary-focus-text-color);
        font-weight: var(--button-font-weight);
        filter:brightness(90%);
    }
    
    select.form-control {
        /* background-color: var(--form-field-background-color) ; */
        color: var(--);
    }

	:-ms-input-placeholder { /* Internet Explorer 10-11 */
		color: var(--form-field-placeholder-color);
	}

	::-ms-input-placeholder { /* Microsoft Edge */
		color: var(--form-field-placeholder-color);
	}
	

	/* Color resets for WCAG 7:1 contrast */
	span.required-asterisk {
		color: var(--required-asterisk-color);
	}

    #privacy_label {
        color: var(--privacy-text-color);
        font-family: var(--privacy-label-fonts);
        font-size:var(--privacy-label-font-size);
        font-weight: var(--privacy-label-font-weight);
        line-height: var(--privacy-label-font-line-height);
        text-align: var(--privacy-label-text-alignment);
    }

    div.policy-link-container {
        text-align: var(--privacy-link-text-alignment);
    }

    div.policy-link-container a {
        color: var(--privacy-link-color);
        text-decoration: var(--privacy-link-decoration);
    }

    div.policy-link-container a:hover,
    div.policy-link-container a:active {
        color: var(--privacy-link-hover-color);
        text-decoration: var(--privacy-link-hover-text-decoration);
        filter:brightness(90%);
    }




/* Text Styles */

	label {
        text-transform: var(--form-label-text-transform);
        color: var(--form-label-color);
        font-family: var(--form-label-fonts);
        font-size: var(--form-label-font-size);
        line-height: var(--form-label-font-line-height);
		font-weight: var(--form-label-font-weight);
        margin: var(--form-label-margin);
		}

    legend {
        text-transform: var(--form-label-text-transform);
        color: var(--form-label-color);
        font-family: var(--form-label-fonts);
        font-size: var(--form-label-font-size);
        line-height: var(--form-label-font-line-height);
        font-weight: var(--form-label-font-weight);
        margin: var(--form-label-margin);
    }

    label.custom-control-label {

    }

    .custom-radio .custom-control-label::before {
        border-radius: 50%;
    }

    .custom-control-input:checked~.custom-control-label::before {
        color: #fff;
        border-color: #007bff;
        background-color: #007bff;
    }
    .custom-control-label::before {
        position: absolute;
        top: .25rem;
        left: -1.5rem;
        display: block;
        width: 1rem;
        height: 1rem;
        pointer-events: none;
        content: "";
        background-color: #fff;
        border: #adb5bd solid 1px;
    }
    div.custom-control.custom-radio input[type='radio'] {

    }

    .custom-radio .custom-control-input:checked~.custom-control-label::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    }

    .custom-control-label::after {
        position: absolute;
        top: .25rem;
        left: -1.5rem;
        display: block;
        width: 1rem;
        height: 1rem;
        content: "";
        background: no-repeat 50% / 50% 50%;
    }



    .controls {
        margin-top: 10px;
    }
	#privacy_label {
		font-size: var(--privacy-link-font-size);
	}
	#form-heading {
		text-align: var(--main-heading-text-alignment);
	}


    .twelve-pt-text{
        font-size: var(--district-text-font-size); 
        font-family: var(district-text-fonts); 
        font-weight: var(--district-text-font-weight);
        color: var(--member-heading-color);
    }

    b h3 {
        /* font-size: var(--sub-heading-font-size);  */
        color: var(--member-heading-color);
        
    }

    .alert-text {
        display:none; 
        font-weight: normal; 
        font-size: var(--alert-area-font-size);
		font-family: var(--alert-area-fonts); 
        color: var( --alert-area-text-color);
        line-height: var(--alert-area-font-line-height);
    }

    .alert-text  a {
        text-decoration: var(--alert-area-link-text-decoration);
    }

    #form_phoneTypeListbox {
        width: 140px;
    }
    
    #spanComments {
        font-weight: var(--comments-span-font-weight); 
        font-size: var(--comments-span-font-size); 
        color: var(--comments-span-color); 
        font-family: var(--comments-span-font-family); 
        visibility: hidden;
    }



    .label-comments-span {
        font-weight: normal; 
        font-size: var(--comments-span-font-size); 
        color: var(--comments-span-color); 
        font-family: var(--comments-span-font-family);
    }

    /*// Thanks Page //*/
    #main-container.thanks-message {
        background-color: var(--form-foreground-color);
        margin: 30px auto;
        padding: 0 0 30px 0;
    }
    #main-container.thanks-message > header > .row:nth-child(1) {
        margin-bottom: 20px;
    }

    #main-container.thanks-message h1 {
        color: var(--member-heading-color);
        font-family: (--main-heading-fonts);
        font-size: var(--main-heading-font-size);
        font-weight: var(--main-heading-font-weight);
        text-align: var(---main-heading-text-alignment);
    }

    #rsvp-thanks-message p {
        color: var(--required-notice-color);
        font-family: var(--required-notice-fonts);
        font-size: var(--required-notice-font-size);
    }
    


    @media (min-width: 800px) {
        #md_screen {
            display:block !important;
        }
		#sm_screen {
            display:none !important;
        }
     
    }

    @media (max-width: 540px){
        #main-content-container {
            padding: var(--form-foreground-container-padding-mobile);
            
        }
        #main-content-container.inframe-border {
            border: var(--form-foreground-border-mobile);
        }
    }

	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
	--webkit-appearance: none;
	margin: 0;
	}

	/* Firefox */
	input[type=number] {
	--moz-appearance: textfield;
	}