:root {
    /* .fst_red_box */
    --fst-red-box-color: #ffffff;
    --fst-red-box-bg: #ff0000;

    /* .fst_purple_box */
    --fst-purple-box-color: #ffffff;
    --fst-purple-box-bg: #ff00ff;

    /* .fst_green_box */
    --fst-green-box-color: #000000;
    --fst-green-box-bg: #82ff82;

    /* .fst_yellow_box */
    --fst-yellow-box-color: #000000;
    --fst-yellow-box-bg: #ffff66;

    /* .fst_blue_box */
    --fst-blue-box-color: #ffffff;
    --fst-blue-box-bg: #287eff;

    /* .fst_comment_box */
    --fst-comment-box-color: #000000;

    /* .fst_comment_box a:link / a:active / a:visited */
    --fst-link-color: #000099;
    /* .fst_comment_box a:hover */
    --fst-link-hover-color: #3366cc;

    /* .fst_comment_button, input[type=submit] (comma rule) */
    --fst-comment-button-color: #000000;

    /* .fst_text_red */
    --fst-text-red-color: #ff0000;
    --fst-text-red-bg: #ffffff;

    /* .fst_text_black */
    --fst-text-black-color: #000000;

    /* .fst_text_white */
    --fst-text-white-color: #ffffff;

    /* .fst_back_red */
    --fst-back-red-bg: #ff0000;

    /* .fst_red_question::before */
    --fst-red-question-color: #ff0000;

    /* .EVIL_SPAMMER */
    --fst-evil-spammer-color: #ffffff;
    --fst-evil-spammer-bg: #ff0000;

    /* input[type=submit] */
    --fst-submit-bg: #4caf50;
    --fst-submit-color: #ffffff;
    /* input[type=submit]:hover */
    --fst-submit-hover-bg: #45a049;

    /* #submitbutton */
    --fst-submitbutton-bg: #8a8a8a;
    --fst-submitbutton-color: #ffffff;

    /* .fst_formtop_message */
    --fst-formtop-color: #0000ff;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Deepen the bright "alert box" backgrounds and lighten the colors that were
           designed for a light page background; --fst-comment-button-color is left
           unchanged because its rule's background (set via the "background" shorthand,
           not "background-color") isn't themed here, so its light backdrop stays the same. */
        --fst-red-box-bg: #b30000;

        --fst-purple-box-bg: #b300b3;

        --fst-green-box-color: #ffffff;
        --fst-green-box-bg: #2e7d32;

        --fst-yellow-box-color: #ffffff;
        --fst-yellow-box-bg: #7a6a00;

        --fst-blue-box-bg: #1a5bb8;

        --fst-comment-box-color: #e6e6e6;

        --fst-link-color: #8ab4ff;
        --fst-link-hover-color: #a9c6ff;

        --fst-text-red-bg: #eeeeee;

        --fst-text-black-color: #e6e6e6;

        --fst-back-red-bg: #b30000;

        --fst-evil-spammer-bg: #b30000;

        --fst-submit-bg: #2e7d32;
        --fst-submit-hover-bg: #245c28;

        --fst-submitbutton-bg: #5a5a5a;

        --fst-formtop-color: #6699ff;
    }
}

.fst_red_box {
    color: var(--fst-red-box-color);
    background-color: var(--fst-red-box-bg);
    padding: 0.625rem;
    border: thin solid #333;
    margin-left: 0.9375rem;
    margin-top:0.9375rem;
    margin-bottom:0.9375rem;
    text-align=center;
    }

   .fst_purple_box {
    color: var(--fst-purple-box-color);
    background-color: var(--fst-purple-box-bg);
    padding: 0.625rem;
    border: thin solid #333;
    margin-left: 0.9375rem;
    margin-top:0.9375rem;
    margin-bottom:0.9375rem;
    text-align=center;
   }

   .fst_green_box {
    color: var(--fst-green-box-color);
    background-color: var(--fst-green-box-bg);
    padding: 0.625rem;
    /*font-weight: bold;*/
    border: thin solid #333;
    margin-top:0.9375rem;
    margin-bottom:0.9375rem;
     margin-left:0.9375rem;
   }

   .fst_yellow_box {
    color: var(--fst-yellow-box-color);
    background-color: var(--fst-yellow-box-bg);
    padding: 0.625rem;
    /*font-weight: bold;*/
    border: thin solid #333;
    margin-top:0.9375rem;
    margin-bottom:0.9375rem;
    margin-left:0.9375rem;
    }

   .fst_blue_box {
    color: var(--fst-blue-box-color);
    background-color: var(--fst-blue-box-bg);
    padding: 0.625rem;
    border: thin solid #333;
    margin-top:0.9375rem;
    margin-bottom:0.9375rem;
   }

   .fst_comment_box {
    font-size: 0.6875rem;
    font-family: Verdana, Geneva, sans-serif;
    padding: 0.9375rem;
    color: var(--fst-comment-box-color);
    margin: 0rem;    width: 92%;
   }

   .fst_comment_box table tr td {
    padding: 0.75rem 1.25rem 0.75rem 1.25rem;
    vertical-align: top;
   }

   .fst_comment_box a:link {
    color: var(--fst-link-color);
    text-decoration: underline;
    outline: none;
   }

   .fst_comment_box a:hover {
    color: var(--fst-link-hover-color);
    text-decoration: underline;
    outline: none;
   }

   .fst_comment_box a:active {
    color: var(--fst-link-color);
    text-decoration: underline;
    outline: none;
   }

   .fst_comment_box a:visited {
    color: var(--fst-link-color);
    text-decoration: underline;
    outline: none;
   }

   .fst_comment_button, .fst_comment_button, input[type=submit] {
    background: none repeat scroll 0 0 #eeeeee;
    border: 0.0625rem solid #999999;
    border-radius: 0.4375rem 0.4375rem 0.4375rem 0.4375rem;
    color: var(--fst-comment-button-color);
    /*font-size: 0.6875rem;*/
    padding-bottom: 1.25rem;
   }
   /* some of these text color classes are available if you want to change text colors */

   .fst_text_red {
    color: var(--fst-text-red-color);
    background-color: var(--fst-text-red-bg);
   }

   .fst_text_black {
    color: var(--fst-text-black-color);
   }

   .fst_text_white {
    color: var(--fst-text-white-color);
   }

   .fst_small_text {
    font-size: 0.5625rem;
   }
   .fst_back_red {
       background-color: var(--fst-back-red-bg);
   }
   .fst_box {
       border: 0.0625rem solid black;
       padding:0.3125rem;
   }

   .fst_text_center {
       text-align: center;
   }
   .fst_aftermsg {
       text-align: left;
       padding-left:0.625rem;
   }
   .fst_afterfile_msg {
       text-align: left;
       /*float: left;*/
       display:none;  /* will be displayed after file selected */
   }
   .fst_red_question::before {
       color: var(--fst-red-question-color);
       margin: 0;
       font-size: 500%;
       content: "?";
       background: aliceblue;
       padding: 0.625rem 0.625rem;
   }
   .grecaptcha-badge { /*hides the recaptcha badge*/
    display: none;
   }
   .EVIL_SPAMMER{       /* for the evil spammer message div */
    color: var(--fst-evil-spammer-color);
    background-color: var(--fst-evil-spammer-bg);
    padding: 0.625rem;
    border: thin solid #333;
    margin-left: 0.9375rem;
    margin-top:0.9375rem;
    margin-bottom:0.9375rem;
    text-align=center;
    }


    .fst_comment_box * {
        box-sizing: border-box;
        }

        input[type=text], input[type=EMAIL], input[type=url], input#youremail, select, textarea  {
        width: 100%;
        padding: 0.75rem;
        border: 0.0625rem solid #ccc;
        border-radius: 0.25rem;
        resize: vertical;
        font-family: inherit;
         font-size: inherit;
         font-weight: inherit;
         }

        label {
        padding: 0.75rem 0.75rem 0.75rem 0;
        display: inline-block;
        text-align:left;
        width: 100%;
        }

        input[type=submit] {
            background-color: var(--fst-submit-bg);
            color: var(--fst-submit-color);
            padding: 0.75rem 1.25rem;
            border: none;
            border-radius: 0.25rem;
            cursor: pointer;
            margin:0.9375rem auto;
            display:block;}

        input[type=submit]:hover {
        background-color: var(--fst-submit-hover-bg);
        }

        #submitbutton, #fst_submitbutton {
            margin-top:0.625rem;
            margin-bottom: 0.625rem;
            padding: 0.5rem;
            background-color: var(--fst-submitbutton-bg);
            background-image: -webkit-linear-gradient(top, #8a8a8a, #363636);
            background-image: -moz-linear-gradient(top, #8a8a8a, #363636);
            background-image: -ms-linear-gradient(top, #8a8a8a, #363636);
            background-image: -o-linear-gradient(top, #8a8a8a, #363636);
            background-image: linear-gradient(to bottom, #8a8a8a, #363636);
            -webkit-border-radius: 3;
            -moz-border-radius: 3;
            border-radius: 0.1875rem;
            color: var(--fst-submitbutton-color);
            font-size: 1rem;
            font-weight: 400;
            text-transform: uppercase;
            padding: 0.4375rem 1.875rem 0.4375rem 1.875rem;
            text-decoration: none;
            margin-right: auto;
            margin-left: auto;
            border-top: #cbcbcb 0.125rem solid;
            border-left: #cbcbcb 0.125rem solid;
            border-right: #434343 0.125rem solid;
            border-bottom: #434343 0.125rem solid;
            cursor:pointer
        }

        #submitbutton:hover, #fst_submitbutton:hover
            {
            background: #a20025;
            background-image: -webkit-linear-gradient(top, #a20025, #70001a);
            background-image: -moz-linear-gradient(top, #a20025, #70001a);
            background-image: -ms-linear-gradient(top, #a20025, #70001a);
            background-image: -o-linear-gradient(top, #a20025, #70001a);
            background-image: linear-gradient(to bottom, #a20025, #70001a);
            text-decoration: none;
        }

        .fst_container {
        border-radius:1.5625rem;
        /*padding: 1.25rem; */
        }
        .fst_form {
            padding:0.3125rem 0.625rem;
        }

        .fst_col_25 {
        float: left;
        width: 25%;
        margin-top: 0.375rem;
        }

        .fst_col_75 {
            float: left;
            width: 75%;
            margin-top: 0.375rem;
        }

        /* Clear floats after the columns */
        .fst_row:after {
            content: "";
            display: table;
            clear: both;
        }
        input[type=checkbox], input[type=radio] {
            /* Reset to static positioning (ideally, remove the position: absolute; from Bootstrap) */
            position: static;
            align-self: center;
            /* Align in the case where flex doesn't apply (checkbox & radio addons, mostly) */
            vertical-align: middle;
            /* Setting width and height is optional; alignment works without. However, setting it allows for more predictable layouts. */
            float: left;
            margin-top: 0.75rem;
        }

        .fst_p:nth-child(0) {
            display: none;
        }
        .fst_p:nth-child(1) {
            height: 5rem;
            display: block;
            clear: both;
        }

        @media screen and (max-width: 43.75rem) {
            .fst_col_25, .fst_col_75, input[type=submit] {
            width: 100%;
            margin-top: 0;
            margin-left:0.3125rem;
            margin-right:0.3125rem
            }
            .fst_container {
                padding:0;
            }
            label {
                float:left;
            }
            input[type=checkbox], input[type=radio] {
                margin-top:0;
            }
        }
        @media (prefers-color-scheme: dark) {
        input, textarea {
            filter: invert(1) hue-rotate(180deg);
            }
            .invert {
            filter: invert(1) hue-rotate(180deg);
            }

        }



        /* an example of overriding the class of the form-top-message; note that it is after the CSS function above */
.fst_formtop_message {
	font-size:130%;
   color: var(--fst-formtop-color);
}


/* hide all of the aftermsg text */
#aftermsg_yourname, #aftermsg_youremail, #aftermsg_yoursubject, #aftermsg_message { display: none;}


/* since version 17 for optional alignment of select boxes (or other elements) */
.fst_float_left {
    float:left;
}
.fst_float_center {
    float:center;
}
.fst_float_right {
    float:right;
}

.fst_column_3 {
        display: none;
        margin-bottom: 2%;
    }

 @media only screen and (max-width: 700px) {
    /* since version 17 - removes 3rd column, adds additional margin/padding to first column to adjust for smaller screens */

    .fst_column_1 {
        margin-top: 5% !important;
        margin-bottom: 3% !important;
        padding-top: 2% !important;
    }

}

/* since version 17 - adds css for the file upload area if used */

    .fst_file_preview {
        background-color: lightcyan;
        padding: 3px;
        margin-bottom: 5px;
    }
    .fst_filelist_heading {
        border: none;
        background-color: inherit;
        font-style: italic;
    }
     .fst_filelist ol {
      padding-left: 0;
    }

   .fst_filelist li {
        background-color:lightyellow;
      display: flex;
      justify-content: space-between;
      margin:4px;
	  padding-left:10px;
      list-style-type: none;
      border: none;
	  text-align:left;
    }

   .fst_filelist_img {
      height: 64px;
      order: 1;
    }
    .fst_filelist img {
      height: 64px;
      order: 1;
        padding:4px 10px;
    }
    .fst_filelist img:hover {
      transform: scale(2); /* Increase the size by 100% (2 times) */
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Add a shadow to the image */
      transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add transitions for both properties */}

/* end CSS */