body{margin-left : 0px; margin-right : 0px; margin-top : 0px; margin-bottom : 0px; font-size: 14px; font-family: "Roboto", sans-serif; background-color : #ffffff;}
a {margin:0;padding:0;color:#026acb;text-decoration:none;outline:none;}
a:hover {color:teal;cursor:pointer;font-weight:bold; }
.footnav a {margin:0;padding:0;color:#ffffff;text-decoration:none;outline:none;}
.footnav a:hover {color:#000000;cursor:pointer;}
hr{border-top: 1px dashed teal;}
.bolder{font-weight:bold;}
.Btext {color:black;}
.Gtext{font-size: 14px; display: inline-flex; color:#009688!important}
.GtextW{font-size: 14px; display: inline-flex; color:#ffffff!important}
.padding-small{ padding:4px 8px!important; text-align: center;}
.SideList {font-size: 15px;}
.UO {color: Teal;font-size: 25px;letter-spacing: 3px;font-weight: bold;}
.UO1 {color: #616161;font-size: 25px;letter-spacing: 3px;font-weight: bold;  }
.field{ max-width:500px;padding:16px; margin:auto;border-color:teal;}
.leg{font-size: 16px;font-weight: bolder;}
.center { text-align: center;}
.FMid {vertical-align: middle;}
.OrdButt {background-color:Teal;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:1px solid #3866a3;display:inline-block;cursor:pointer;color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;padding:6px 12px;text-decoration:none;outline:0;}
.OrdButt:hover {background-color:#468ccf;outline:0;}
.OrdButt:active {position:relative;top:1px;outline:0;}
.toggle_class {display:none;border:1px solid teal;padding:5px;}
.accordion {background-color: #fff;color: #444;cursor: pointer;padding: 0px;width: 100%;border: none;text-align: left;outline: none;font-size: 15px;transition: 0.4s;}
.active, .accordion:hover {background-color: #fff;}
.accordion:after {content: '\002B';color: teal;font-weight: bold;float: right;margin-left: 5px;}
.active:after {content: "\2212";}
.panel {padding: 0 0px;display: none;background-color: white;overflow: hidden;}
.circle {width: 50px;height: 50px;border-radius: 50%;font-size: 15px;color: #fff;line-height: 50px;text-align: center;background: teal;}
.fa-facebook-square, .facebook-square {color: #3b5998;background-image: linear-gradient( to bottom, transparent 20%, white 20%, white 93%, transparent 93% );background-size: 55%;background-position: 70% 0;background-repeat: no-repeat;}
.fa-twitter, .fa-twitter-square {color: #00aced;background-image: linear-gradient( to bottom, transparent 20%, white 20%, white 93%, transparent 93% );background-size: 70%;background-position: 70% 0;background-repeat: no-repeat;}
.fa-blogger, .fa-blogger-square {color: #FF5722;background-image: linear-gradient( to bottom, transparent 20%, white 20%, white 93%, transparent 93% );background-size: 70%;background-position: 70% 0;background-repeat: no-repeat;}
.topnav {overflow: hidden;}
.topnav a {float: left;display: block;text-align: center;padding: 5px 5px;text-decoration: none;font-size: 15px;}
.topnav a:hover {background-color: teal;color: #ffffff;}
.topnav a.active {background-color: #4CAF50;color: white;}
.topnav .icon {display: none;}
.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
}

.select-css {
display: block;
font-size: 16px;
font-family: sans-serif;
font-weight: 700;
color: #444;
line-height: 1.3;
padding: .6em 1.4em .5em .8em;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin: 0;
border: 1px solid #aaa;
box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
border-radius: .5em;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-color: #fff;
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
background-repeat: no-repeat, repeat;
background-position: right .7em top 50%, 0 0;
background-size: .65em auto, 100%;}
.select-css::-ms-expand {display: none;}
.select-css:hover {border-color: #888;}
.select-css:focus {border-color: #aaa;box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);box-shadow: 0 0 0 3px -moz-mac-focusring;color: #222;outline: none;}
.select-css option {font-weight:normal;}

/* Support for rtl text, explicit support for Arabic and Hebrew */
*[dir="rtl"] .select-css, :root:lang(ar) .select-css, :root:lang(iw) .select-css {background-position: left .7em top 50%, 0 0;padding: .6em .8em .5em 1.4em;}

/* Disabled styles */
.select-css:disabled, .select-css[aria-disabled=true] {color: graytext;
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);}
.select-css:disabled:hover, .select-css[aria-disabled=true] {border-color: #aaa;}
* {box-sizing: border-box;}

.column {float: left;width: 20%;padding: 5px;height: 250px;}

.column1 {float: left;width: 40%;padding: 5px;height: 250px;}

.column2 {float: left;width: 20%;padding: 5px;height: 185px;border: 1px solid #aaa;}

.column3 {float: left;width: 80%;padding: 5px;height: 185px;border: 1px solid #aaa;text-align: left;}
.column4 {
float: left;
width: 50%;
padding: 5px;
height: 50px;
border: 1px solid #aaa;
text-align: left;
}

.column5 {
float: left;
width: 50%;
padding: 5px;
height: 50px;
border: 1px solid #aaa;
background-color: #99CCCC;
text-align: center;
}
.column6 {
float: left;
width: 33.3%;
padding: 5px;
height: 30px;
border: 1px solid #aaa;
}
.column7 {
float: left;
width: 50%;
padding: 5px;
height: 90px;
border: 1px solid #aaa;
text-align: center;
vertical-align: middle;
}
.column8 {
float: left;
width: 50%;
padding: 5px;
height: 75px;
border: 1px dotted teal;
text-align: center;
vertical-align: middle;
}
.column9 {
float: left;
overflow-wrap: break-word;
width: 20%;
padding: 5px;
height: 65px;
}
.row:after {
content: "";
display: table;
clear: both;
}

@media screen and (max-width: 700px) {
.column {
width: 100%;
height: 280px;
}
.column1 {
width: 100%;
height: 280px;
}
.column2 {
width: 100%;
}
.column3 {
width: 100%;
}
.column4 {
width: 100%;
}
.column5 {
width: 100%;
}
.column6 {
width: 100%;
}
.column7 {
width: 100%;
}
.column8 {
width: 100%;
}
.column9 {
width: 100%;
}
.UO {   color: Teal;
font-size: 20px;
letter-spacing: 3px;
font-weight: bold;  }
.UO1 {  color: #616161;
font-size: 20px;
letter-spacing: 3px;
font-weight: bold;  }
}
/* Style inputs, select elements and textareas */
input[type=text], select, textarea{
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
resize: vertical;
}

/* Style the label to display next to the inputs */
label {
padding: 12px 12px 12px 0;
display: inline-block;
}

/* Style the submit button */


/* Style the container */
.container {
border-radius: 5px;
background-color: #6EC6BA;
padding: 15px;
}

/* Floating column for labels: 25% width */
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-35 {
float: left;
width: 35%;
margin-top: 6px;
}

/* Floating column for inputs: 75% width */
.col-65 {
float: left;
width: 65%;
margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.col-25, .col-35, .col-65, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
/* Floating column for labels: 25% width */
.col-20 {
float: left;
width: 20%;
margin-top: 6px;
}

/* Floating column for inputs: 75% width */
.col-40 {
float: left;
width: 40%;
margin-top: 6px;
}
/* Floating column for inputs: 75% width */
.col-50 {
float: center;
width: 50%;
margin-top: 6px;
}
.col-80 {
float: left;
width: 80%;
margin-top: 6px;
}
.col-100 {
float: left;
width: 100%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.col-20, .col-40, .col-50, .col-80, .col-100, input[type=submit] {
width: 100%;
margin-top: 0;
}
}

.tooltip {
position: relative;
display: inline-block;
color: #026acb;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 200px;
background-color: Teal;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 5px;

/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}
.colu-container {
display: table;
width: 100%;
}
.colu {
display: table-cell;
padding: 10px;
}

@media only screen and (max-width: 600px) {
.colu {
display: block;
width: 100%;
}
}
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}

table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}

table tr {
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}

table th,
table td {
padding: .625em;
text-align: center;
}

table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}

@media screen and (max-width: 600px) {
table {
border: 0;
}

table caption {
font-size: 1.3em;
}

table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

table tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}

table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}

table td::before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}

table td:last-child {
border-bottom: 0;
}
}
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}

table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}

table tr {
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}

table th,
table td {
padding: .625em;
text-align: center;
}

table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}

@media screen and (max-width: 600px) {
table {
border: 0;
}

table caption {
font-size: 1.3em;
}

table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

table tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}

table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}

table td::before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}

table td:last-child {
border-bottom: 0;
}
}
.columns {
display: flex;
flex-flow: row wrap;
justify-content: center;
margin: 5px 0;
}

.columnA {
flex: 1;
border: 0;
margin: 2px;
padding: 10px;
&:first-child { margin-left: 0; }
&:last-child { margin-right: 0; }

}

@media screen and (max-width: 980px) {
.columns .columnA {margin-bottom: 5px;flex-basis: 40%;&:nth-last-child(2) {margin-right: 0;}&:last-child {flex-basis: 100%;margin: 0;}
}
}

@media screen and (max-width: 680px) {
.columns .columnA {flex-basis: 100%;margin: 0 0 5px 0;}
}