/* form4.css for glassform.html */

body {margin: 0px; font-family: arial; font-size: 16px;}
input {font-size: 20px}
input[type="checkbox"] {background-color:#B2F4E2;} /* gainsboro; */
input:invalid {border-color: red;}
input:required {color: green;}
input:valid {border-color: green;}
input:optional {border-color:#000; color: #000;}
/* Hide up and down buttons with type="number" */
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button , /*  Ruleset ignored due to bad selector. */
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}/* type="number" or type="range"
    minlength="2" maxlength="10" min="2" >= 2 max="10" <= 10 */
textarea:focus, select:focus, input:focus {
  outline: 2px dashed orange;
}
div[tabindex="0"] {
  border: 1px solid black;
  display: inline-block;
  padding: 8px 16px;
  cursor: pointer;
}
div[tabindex="0"]:focus {
  outline: 4px dashed orange;
}

select {max-width: 208px; min-width: 14em;}
#btnmenu {clear: both;	text-align: center;}
#page {position: relative;} /* text-align: center; width: 320px; */
#SendMail {display: inline-block;}/* text-align: center; */
#overlay {
    display: none;
    overflow-x: auto;
    overflow-y: scroll;
    background-color: rgba(0, 0, 0, 0.8);
    bottom: 0;
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    z-index: 8010;
    height: auto;
    width: auto;
}
/* #popcal {width: 100%; max-width: 290px}
#popcal > table {max-width: 290px} */
#popcal {bottom:0.7em; z-index: 73;}/* top:30%; */
.popcalwrap {position:relative; margin: 0 auto;}
/* @media (min-width: 342px) {
    #popcal {left: 5%; right: 5%;}
} */
#popcal input {
    font-size: 1.2em;
    padding: 5px 2px 5px 3px;
} /* width: auto; MUST have! */

#private {background-color:#F2F6F2; border: 1px #000;
    box-shadow: 4px 8px 8px 0 #323232; display: none;
	max-width: 720px; padding: 4px; position:absolute; z-index: 3;}
#private p {text-align: left;}
#private .mybutton {float: right;}
#thankyou_message {
    display:none;
    background-color:#ef3; color:#000; max-width: 720px; margin: 0 auto;
}
#thankyou_message h2 {font-size: 1.25em;}
#wrapper {max-width: 728px; margin: 0 auto;margin-top: 47px}

a.close {
    color: red;
    padding: 0;
    position: absolute;
    width: 1.875rem;
    height: 1.875rem;
    top: 0;/* 1.875rem;*/
    right: 0.8rem;/* 2.8125rem;*/
    white-space: nowrap;
}/* overflow: hidden; removes underline bar text-indent: 100%; hides text */
.header {
	background: #E6E6FA;
/*	background: -moz-linear-gradient(center top , #A4CCEC, #72A6D4 25%, #3282C2 45%, #357CBD 85%, #72A6D4) repeat scroll 0 0 #E6E6FA;
	background: -ms-linear-gradient(top, #72A6D4 0%, #72A6D4 100%) repeat scroll 0 0 #E6E6FA;
	background: -o-linear-gradient(top, #72A6D4 0%, #72A6D4 100%) repeat scroll 0 0 #E6E6FA;
	background: -webkit-linear-gradient(top, #72A6D4 0%, #72A6D4 100%) repeat scroll 0 0 #E6E6FA;
*/
	margin: 0 0 0.4em 0;
	padding: 0.4em;
	text-align: center;
}/* Using CSS gradients instead of background images.
    background-image: linear-gradient (top, #111 0%, #222 100%);
	background-image: -moz-linear-gradient(top, #111 0%, #222 100%);
	background-image: -moz-linear-gradient(center top, #a4ccec, #72a6d4 25%, #3282c2 45%, #357cbd 85%, #72a6d4);
	position: relative
*/

.appfields {
	line-height: 1.0em; list-style-type: none;
	margin: 0; padding: 1em;
}
.appfields li { padding:0.4em 0; }
.aster {
	color: #000;
	font-family: Arial;
	font-size: 1.2em;
	font-weight: bolder;
}
.block {display: block;}

.boldit {font-weight: 900;}

.fs08 {font-size: 0.8em;}

.border-btn {
    box-shadow: 0px 0px 0px 5px #51FCC5;
    transition: box-shadow 0.6s linear;
    margin: 0.5em;
} /* Increased margin since the box-shade expands outside the element,
     like outline
     box-shadow: fourth value for spread-radius, set other 3 to 0px
     and use spread-radius to build the border.
     Like outline it will not affect layout.
     #51FCC5 greenish, #fc5185 pinkish */

.border-btn:hover {box-shadow: 0px 0px 0px 10px #51FCC5;}

.mybutton {
	background-color: #B2F4E2;
	border: 2px outset #DDDDDD;
	border-radius: 8px;
	box-shadow: 4px 2px 8px 0 #323232;
	color:#8B0000;/* darkred #FF0066 #FF0000 red */
	cursor: pointer;
	display: inline-block;
	font-family: Arial;
	font-size: 1.2em;
	margin: 14px 4px;
	padding: 6px;
	text-decoration: none;
}/* gray #CDCDCD; l-green #B2F4E2; */
.mybutton a {color: #FF0066; text-decoration: none;}
/*.redongrn {
	background-color: #B2F4E2;
	color: #FF0066;
	font-size: 1.5em;
}*/
.fldnam {
	color: blueviolet;
	font-size: 0.8em;
	font-weight: bold;
}/*width: 18em;*/

.shadow {box-shadow: 10px 10px 4px rgba(0,0,0,0.7);}
.txtcenter{text-align: center;}

.labelsize {display: inline-block;}

@media screen and (min-width: 40.5em) {
	#application {
    	margin: 0 auto;
	    max-width: 800px;
	}
	/* .appfields { background-color: #E0EAF7; }lite blue*/
	.appfields li { display: inline-block; }
}

/* For small screens */
@media screen and (max-width: 40.4em) {
	.appfields li > input[type="text"],
	.appfields li > input[type="email"],
	.appfields li > input[type="tel"] ,
	.appfields li > select {font-size: 1.2em; width: 276px;}
	input[type="checkbox"] ,
	input[type="radio"] {height: 1.0em; width: 1.0em;}
	.labelsize {font-size: 1.2em;}
}


#dialog-container {
    background: rgba(0, 0, 0, 0.57);
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    will-change: opacity;
    overflow-x: auto;
    overflow-y: scroll;
    overscroll-behavior: contain;
    z-index: 4747;
    -webkit-transition: opacity 0.333s cubic-bezier(0, 0, 0.21, 1);
    transition: opacity 0.333s cubic-bezier(0, 0, 0.21, 1);
}
.dialog-container-hide {
    /* opacity: 0; does not work in oldie */
    display: none;
    pointer-events: none;
}

.dialog-container--visible {
    /*opacity: 1;*/
    display: block;
    pointer-events: auto;
}
.dialog-container,
.dialog-container-view {
    position: absolute; position: fixed;
}/* position: absolute; is for old ie9 windows mobile phone 7 */

#dialog-wrap {
    position: absolute;
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.24), 0 14px 28px rgba(0, 0, 0, 0.48);
    margin: 4px;
    min-width: 280px;
    max-width: 460px;
}
.dialog-send {
    top: 20%;
}/*bottom: 3.0em;*/
.dialog-view {
    left: auto;
    top: 2em;
    bottom: auto;
    word-wrap: break-word;
    word-break: break-all;
}
.dialog-skin {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #f9f9f9;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    color: #444;
    position: relative;
    text-shadow: none;
    padding: 4px;
    height: auto;
    width: auto;
}/*border-radius: 2px;*/
#dialog-box {
    background: #FFF;
    padding: 4px;
    position: relative;
}/* position: absolute; */

/* .dialog-body {} */
#dialog-title {font-size: 2em; font-weight: bold;}
.dialog-buttons {text-align: center;}
.dialog-buttons-hide {display: none;}
.dialog-buttons-view {display: inline-block;}
/* #codetxt {display: block}
#plaintxt {display: none;}
*/

@media screen and (min-width: 500px) {
    .dialog-send {left: 10%; right: 10%}
    .dialog-view {left: 10%; right: 10%}
}
/* @media screen and (min-width: 640px) {
   .dialog-send {left: 20%; bottom: auto;}
    .dialog-view {top: 2em; bottom: 3.0em;} top: 25%;
	#popcal input {font-size:1.0em; padding: 0 1px;}
} */
@media screen and (min-width: 970px) {
    .dialog-send {left: 35%}
}
@media all and (orientation:landscape) and (max-height: 480px) {
    .dialog-send {bottom: 1.5em;}
}

/* Suppress our whole menu when not an interactive mode
	@media print, projection (when printing, etc.) */
@media print {
	.noprint, .dialog-container {display: none;}
	.appfields {font-size: 8pt; padding: 0;}
	input , select {font-size: 8pt;}
}
/*  8pt gives a 1 page output.

@media print and (color) {
	* {
      print-color-adjust: exact;
      -webkit-print-color-adjust: exact;
    }
}
*/

/* breadcrumbs ribbon */
.ribbon {
    --c0: #343435; /* blackish */
    --c1: #0fba84; /* greenish */
    --c2: #e01258; /* redish */
    --c3: #1ec9e4; /* bluegreen */
    --c4: #7FFFD4; /* aquagreen */
    --c5: #5AA4F2; /* CBC blue */
    --c6: #00FFFF; /* aqua */
    --c7: #11d205; /* brightgreen */
    --c9: #fff;
    --c10: #ef3675; /* redishpink */
    --c11: #4cd4e9; /* lightblue */
    --c12: #11d295; /* pailgreen */
    --c13: #87CEEB; /* skyblue */
    --fontSize: 12px;
    --childWidth: 96%; /* change if max-width changes */
    --lastChildW: calc(var(--childWidth) - 15 + .667em);
    
    box-sizing: border-box;
    color: #343435;
    display: grid;
    grid-gap: 1px;
    /* FF no Auto-fill 3 ribbon-elements plus 1 narrow col to fix sizing issues */
    grid-template-columns: repeat(3, 1fr) .1em;
    font-family: 'Barlow', serif;
    font-size: var(--fontSize);
    margin: 1em auto 2em auto;
    /* max-width: 1369px; */
    max-width: 357px;
}

.ribbon-element {
    cursor: pointer;
    font-size: 1.5em;
    font-weight:900;
    letter-spacing: 0.01em;
    line-height: 1.333em;
    padding: .67em .67em .67em 1.33em;
    padding: .67em;
    position: relative;
    text-align: center;
    text-decoration: none;
}
.ribbon-element:nth-child(1) {
    background-color: var(--c4);
    color: var(--c0);
    z-index: 3;
}
.ribbon-element:nth-child(2) {
    background-color: var(--c5);
    color: var(--c0);
    z-index: 2;
}
.ribbon-element:nth-child(3) {
    background-color: var(--c6);
    color: var(--c0);
    z-index: 1;
}

.ribbon-element:link ,
.ribbon-element:active ,
.ribbon-element:visited {
    color: var(--c0);
}
.ribbon-element:hover {color: var(--c9);font-weight:900;text-decoration: underline;}

/* Add shadow under each ribbon element. */
.ribbon-shadow .ribbon-element {
    box-shadow: 1px 3px 3px -3px #000;
}

/* polygon approach */
.ribbon-poly .ribbon-element {
    clip-path: polygon(
      95% 0, 100% 50%, 95% 100%, 0% 100%, 5% 50%, 0% 0%
    );
}
.ribbon-poly .ribbon-element:not(:last-child) {
    width: var(--childWidth);
}
.ribbon-poly .ribbon-element:last-child {
    width: var(--lastChildW);
    padding-left: 2rem;
}

/* border approach */
.ribbon-bor .ribbon-element:before {
    content: '';
    position: absolute;
}
.ribbon-bor .ribbon-element:after {
    content: '';
    bottom: 0;
    left: 0;
    top: 0;
    height: 0;
    width: 0;
    position: absolute;
    -webkit-tranform: translateX(0.667em);

}/* tranform: translateX(0.667em); FF Unknown property */

.ribbon-bor.ribbon-element:nth-child(1):after {
    border-left-color: #11d205;
}
.ribbon-bor.ribbon-element:nth-child(2):after {
    border-left-color: #ef3675;
}
.ribbon-bor.ribbon-element:nth-child(3):after {
    border-left-color: #4cd4e9;
}

.ribbon-element:focus {
    box-shadow: 0 -3px 0 0 #343435 inset;
    outline: none;
}/* Clear default outline style & use inset box shadow for focus state. */

/* ../css/form4.css 20220823 */