/* Styles that apply only to non-mobile. */
@media screen and (min-width:480px) {
*.mobile_only {
 display: none;
}
div.rightblocks {
 float: left;
}
div.inputform {
 width: 60%;
 margin: 0 auto;
 text-align: center;
}
input.filter, select.filter {
 max-width: 125px;
}
}

/* Generic styles to apply to all elements */
.italic {
 font-style: italic;
}
.bold {
 font-weight: bold;
}

/* Styles that apply only to mobile. */
@media screen and (max-width:479px) {
  /* Target portrait smartphones */
*.not_mobile {
 display: none;
}
/* This is to try to keep the edge of the window from falling on the edge of the curved screen. */
div.main {
 padding-left: 3px;
 padding-right: 3px;
}
input.filter, select.filter {
 max-width: 75px;
}
}

/* Styles that apply only to print. */
@media print {
body {
 overflow: visible;
}
div.commandbuttons, img.icon.click {
 display: none;
}
*.screen {
 display: none;
}
}

/* Styles that apply only to screen. */
@media screen {
*.print {
 display: none;
}
}

/* padding and margin go top:right:bottom:left */
/* The # means match to html element id */
/* tables still need 'cellspacing="0"' in the markup */
*{
padding: 0;
margin: 0;
}

/* This sets border-box at the global level but let's us override it if needed */
html {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -ms-box-sizing: border-box;
 box-sizing: border-box;
}
*, *:before, *:after {
 -webkit-box-sizing: inherit;
 -moz-box-sizing: inherit;
 -ms-box-sizing: inherit;
 box-sizing: inherit;
}

/* Global setting to support drag and drop */
*.draggable {
 cursor: grab;
}
*.dragging {
 cursor: grabbing;
}

*.hilite {
 background-color: #FFFFB0;
}

table {
 border-collapse: collapse;
 border-spacing: 0;
}
/* The outer div needs to have text-align:center.  The inner div needs to have margin:0 auto. */
div.center, table.center {
 text-align: center;
 margin: 0 auto;
}
div.centerleft, table.centerleft {
 margin: 0 auto;
}
div.left {
 text-align: left;
}
div.indent {
 width: 90%;
}
div.std_flex {
 display: flex;
 align-items: center;
}
div.red {
 background-color: #FFE0E0;
}
div.blue {
 background-color: #E0E0FF;
}
div.inactive {
 background-color: #8F8F8F;
}
div.selected {
 border: 2px red solid;
}
body {
 font-family: arial;
 font-size: 14px;
}
u.dotted {
 border-bottom: 1px dotted #999;
 text-decoration: none; 
}
p, td, li {
 color: black;
}
p.next {
 padding-bottom: 7px;
}
p.link {
 padding-bottom: 5px;
}
p.tight {
 padding-bottom: 3px;
}
/* This is for multi-line notes like in the Loan Notes window. */
p.note.notfirst {
 padding-top: 4px;
}
ul, ol {
 margin-bottom: 2px;
}
li {
 padding-bottom: 5px;
}
ul.star {
 list-style-position: inside;
 list-style-image: url("/images/Icons/icon_redstar.gif");
}
ul.inside, ol.inside {
 list-style-position: inside;
}
tr.red, td.red_cell, th.red_cell {
 background-color: #FFE0E0;
}
tr.blue, td.blue_cell, th.blue_cell {
 background-color: #E0E0FF;
}
tr.hidden, td.hidden, th.hidden {
 background-color: #C0C0C0;
}
td.inactive, th.inactive, span.inactive {
 color: #8F8F8F;
}
tr.outline {
 outline: 2px solid black;
}
td.top {
 vertical-align: top;
}
td.middle {
 vertical-align: middle;
}
td.next {
 padding-bottom: 7px;
}
td.label {
 padding: 0px 10px 5px 0px;
}
td.labelval {
 padding: 0px 0px 5px 0px;
}
td.colhead, th.colhead {
 vertical-align: top;
 padding-bottom: 3px;
 padding-right: 5px;
}
td.lined, th.lined {
 border-bottom: 1px solid #002080;
}
td.total {
 padding-top: 10px;
 border-top: 1px solid black;
}
td.left, p.left {
 text-align: left;
}
td.center, th.center {
 text-align: center;
}
td.right, th.right {
 text-align: right;
}
td.input {
 padding: 1px 5px 2px 0px;
}
td.tight {
 padding-bottom: 3px;
}
td.padded {
 padding: 2px 5px 2px 5px;
 text-align: left;
}
td.loaninfo {
 vertical-align: top;
 padding-top: 5px;
 padding-right: 3px;
}
td.detail {
 font-size: 12px;
 vertical-align: top;
 padding-top: 5px;
 padding-right: 3px;
}
td.record, div.record {
 padding: 4px 7px 4px 0px;
 vertical-align: text-top;
}
td.flush_right {
 padding-right: 0px;
}
td.red, th.red, p.red {
 color: #F40000;
}
td.indent, p.indent {
 padding-left: 5px;
}
.indent2 {
 padding-left: 10px;
}
.indent3 {
 padding-left: 20px;
}
.indent4 {
 padding-left: 30px;
}
td.headred, th.headred {
 font-style: italic;
 font-weight: bold;
 color: #F40000;
}
h1 {
 font-size: 22px;
 padding: 10px 0px 5px 0px;
 text-align: left;
}
h1.red, h1.redcenter {
 color: #F40000;
}
h1.center, h1.redcenter {
 text-align: center;
}
h2 {
 font-size: 18px;
 padding: 10px 0px 5px 0px;
 text-align: left;
}
h2.red {
 color: #F40000;
}
h2.center, h2.red.center {
 text-align: center;
}
h2.subtitle {
 padding-top: 0px;
}
h2.level2 {
 padding-left: 15px;
}
h2.level3 {
 padding-left: 30px;
}
h2.level4 {
 padding-left: 45px;
}
h3 {
 font-size: 16px;
 padding: 10px 0px 5px 0px;
 text-align: left;
}
h3.red {
 color: #F40000;
}
h3.center, h3.red.center {
 text-align: center;
}
h4 {
 font-size: 14px;
 font-style: italic;
 padding: 10px 0px 3px 0px;
 text-align: left;
}
h4.red {
 color: #F40000;
}
h4.navy {
 color: navy;
}
h4.center, h4.red.center {
 text-align: center;
}
a.navy:visited, a.navy:link {
 color: navy;
}
a.black:visited, a.black:link {
 color: black;
}
a.white:link, a.white:visited {
 color: #FFFFFF;
}
a.navy:hover, a.black:hover, a.white:hover {
 color: #F40000;
}
a.red:visited, a.red:link {
 color: #F40000;
}
a.red:hover {
 color: black;
}
a.headred {
 color: #F40000;
}
a.headred:hover {
 color: navy;
}
a.headnavy {
 color: navy;
 text-decoration: none;
}
a.headnavy:hover {
 color: #F40000;
}
a.headnavy:visited {
 text-decoration: none;
}
a.no_show {
 text-decoration: none;
 outline: none;
 color: black;
}
a.button {
 text-decoration: none;
 outline: none;
}
a.button:hover {
 text-decoration: none;
}
a.sort, a.sort:visited, a.sort:link {
 color: black;
}
a.sort:hover {
 color: #F40000;
}

/* *** IMAGES *** */
*.disabled {
 opacity: 0.3;
}
*.disabled50 {
 opacity: 0.5;
}
img.fill_cont {
 max-height: 100%;
 max-width: 100%;
}
img.bullet {
 margin-right: 10px;
 border: none;
 float: left;
}
img.bullet.spacer {
 margin-left: 10px;
}
img.bullet.flag {
 margin-top: 2px;
 width: 16px;
}
img.top_page, img.filter {
 float: right;
 margin: 3px 0px 3px 10px;
 height: 26px;
 padding: 1px 1px 1px 1px;
 border: 1px outset #0040A0;
 background: #FFFFFF;
}
img.top_page {
 vertical-align: middle;
}
img.filter {
 vertical-align: text-top;
}
img.inline_more {
 border:1px outset #0040A0;
 padding: 1px 1px 1px 1px;
 margin-left: 15px;
 vertical-align:top;
 height: 18px;
}
img.icon {
 margin: 0px 5px 0px 5px;
 vertical-align: top;
 border: none;
 padding: 1px 1px 1px 1px;
}
img.icon.std {
 height: 18px;
}
img.icon.gototop {
 float: right;
 height: 18px;
 vertical-align: middle;
}
img.icon.expand {
 height: 18px;
 margin-left: 10px;
 vertical-align: middle;
}
img.icon.expand.right, img.icon.expand_right {
 margin-left: 0px;
 margin-right: 10px;
}
img.icon.expand_inline {
 height: 16px;
 vertical-align: middle;
 margin-right: 0px;
 margin-top: 8px;
 margin-bottom: 8px;
}
img.icon.click {
 border: 1px outset #0040A0;
 background: #FFFFFF;
}
img.icon.noclick {
 padding: 2px 2px 2px 2px;
}
img.right {
 float: right;
}
img.stack {
 margin-bottom: 7px;
}
img.icon.vert {
 margin: 5px 5px 5px 5px;
}
img.icon.clicked {
 border: 1px inset #0040A0;
 background: #FFFFFF;
}
img.icon.noclick {
 border: 1px solid #B0B0B0;
 background: #D0D0D0;
}
img.space {
 margin: 0px 20px 0px 20px;
}
img.icon.invis {
 border: none;
 padding: 2px 2px 2px 2px;
}
img.leftbody {
 border: 1px solid #707070;
 margin: 5px 10px 5px 0px;
 float: left;
}
img.rightbody {
 border: 1px solid #707070;
 margin: 5px 0px 5px 10px;
 float: right;
}
img.embed_text {
 height: 14px;
 vertical-align: top;
 padding: 0px 2px 0px 2px;
}
img.selected {
 background: #FF0000 !important;
}
img.sort_dir {
 vertical-align: middle;
 padding-left: 3px;
 padding-right: 8px;
}
@media screen and (min-width:480px) {
img.app_icon {
 margin: 0px 27px 0px 27px;
}
}
@media screen and (max-width:479px) {
img.app_icon {
 margin: 0px 16px 0px 16px;
}
}
div.app_icon {
 text-align: center;
 display: inline-block;
 margin-bottom: 7px;
}
img.app_icon {
 height: 36px;
}
div.record_select {
 overflow: hidden;
 margin-bottom: 5px;
 padding: 2px 0px 2px 0px;
}
div.record_step {
 display: inline-block;
 text-align: center;
 vertical-align: middle;
 padding: 0px 5px 0px 5px;
}

button {
 font-weight: bold;
 padding: 5px 15px;
 cursor: pointer;
 -webkit-border-radius: 15px;
 border-radius: 15px;
}
button:focus {
 outline-style: dotted;
 outline-offset: 2px;
}
button.plainsub, button.redsub, button.greensub {
 margin: 10px 25px 0px 25px;
 border: 2px solid #000000;
 -webkit-transition-duration: 0.4s; /* Safari */
 transition-duration: 0.2s;
}
button.redsub {
 background: #F40000;
 color: #FFFFFF;
}
button.redsub:hover {
 background: #FFFFFF;
 color: #F40000;
}
button.greensub {
 background: #639743;
 color: #FFFFFF;
}
button.greensub:hover {
 background: #FFFFFF;
 color: #639743;
}
div.greensub {
 background: #639743;
}

/* *** should be able to get rid of these once all mobile friendly */
span.button {
 position: relative;
 z-index: 6;
 font-family: arial;
 font-size: 14px;
 font-weight: bold;
 font-style: italic;
 text-align: center;
 color: #FFFFFF;
 top: -8px;
}
img.button, img.smbutton, img.tinybutton {
 position: relative;
 border: 0;
}
img.button {
 z-index: 1;
 width: 80px;
 height: 25px;
 left: -35px;
 margin: 0px 5px 0px 5px;
}
img.smbutton {
 z-index: 5;
 width: 60px;
 height: 20px;
 left: -10px;
 margin: 0px 15px 0px 5px;
}
img.tinybutton {
 z-index: 5;
 width: 40px;
 height: 15px;
 margin: 0px 5px 0px 5px;
}

/* *** INPUTS AND INPUT RELATED ELEMENTS *** */
input, textarea, select, div.checkbox {
 border: 1px solid gray;
 font-family: arial;
 font-size: 14px;
 color: black;
 background: white;
 margin: 1px 2px 1px 2px;
 vertical-align: middle;
 text-decoration: none;
}
input, textarea, div.checkbox {
 padding: 5px 5px 5px 5px;
}
select {
 padding: 4px 0px 4px 0px;
}
select:invalid {
 background: pink;
 color: #666;
}
input:disabled, textarea:disabled, select:disabled, input[readonly] {
 background-color: ButtonFace;
}
input.stale, select.stale {
 background-color: ButtonFace;
}

option[value=""][disabled] {
 display: none;
}
option {
 color: black;
}
option {
 padding-left: 1px;
 padding-right: 7px;
}
div.full, input.full, select.full, textarea.full {
 width: 100%;
}
div.half {
 width: 50%;
 float: left;
}
input.half, select.half {
 width: 90%;
}
span.multi {
 margin-right: 25px;
}
input.multi {
 margin-top: 5px;
 margin-bottom: 5px;
}
input:required, textarea:required, select:required {
 border: 1px solid red;
}
select.val {
 padding: 10px 5px 4px 13px;
}
input.val, textarea.val,
input.val_nocheck, textarea.val_nocheck {
 padding: 10px 5px 4px 18px;
}
div.inputwrap {
 position: relative;
}
input + label.text, textarea + label.text {
 opacity: 0.3;
 font-weight: bold;
 position: absolute;
 top: 9px;
 left: 18px;
 -webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
 transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
input:focus, select:focus, textarea:focus {
  outline: 0;
  background: #FFFFB0;
}
input:focus + label.text, input:not(:focus):not(:placeholder-shown) + label.text,
textarea:focus + label.text, textarea:not(:focus):not(:placeholder-shown) + label.text {
 opacity: 1.0;
 top: 2px;
 left: 15px;
 color: #666;
 font-size: 65%;
}
/* This is for showing remaining text under a textarea */
span.rem_chars {
 font-size: 10px;
 margin-right: 2px;
 float: right;
}
select + label.text {
 top: 2px;
 left: 15px;
 color: #666;
 font-size: 65%;
 font-weight: bold;
 position: absolute;
}
select[multiple] {
 overflow-x: scroll;
 overflow: -moz-scrollbars-horizontal;
}
input[type="file"] {
 border: none;
 background: none;
}
input.val:valid:not(:placeholder-shown), textarea.val:valid:not(:placeholder-shown) {
  background: url(https://www.lonestarlending.com/images/Icons/icon_check.png);
  background-size: 14px;
  background-repeat: no-repeat;
  background-position: 1px;
}
input:invalid:not(:focus):not(:placeholder-shown) {
 background: pink;
}
input:invalid:focus:not(:placeholder-shown) ~ div.val_error {
 max-height: 200px;
 padding: 2px 5px 10px 18px;
}
// Each key stroke does not reset the clock on the transition so this is not terribly effective.  It probably makes more sense to use type=text and use an onChange event to validate.
//input[type="email"]:invalid ~ div.val_error {
// transition-delay: 1s;
//}
img.inp {
 height: 26px;
 vertical-align: middle;
 margin-right: 0px;
 margin-top: 3px;
 margin-bottom: 3px;
}
img.alert {
 height: 18px;
 vertical-align: middle;
}
input.number {
 text-align:right;
}
input.noedit, select.noedit {
 background-color: ButtonFace;
}
input.filter, select.filter {
 padding-top: 2px;
 padding-bottom: 2px;
}
input.check {
 margin-right: 5px;
}
input.radio {
 margin-left: 5px;
}
input.space_right {
 margin-right: 10px;
}
div.val_error {
 color: #999;
 max-height: 0;
 transition: 0.28s;
 overflow: hidden;
 color: red;
 font-style: italic;
}

/* Replacement for standard checkbox */
span.check input[type="checkbox"],
span.check input[type="radio"] {
 opacity: 0;
}
span.check label::before {
 content: "";
 display: inline-block;
 height: 14px;
 width: 14px;
 border: 1px solid;
}
span.check input[type="radio"] + label::before {
 border-radius: 50%;
}
span.check label::after {
 content: "";
 display: inline-block;
 height: 4px;
 width: 9px;
 border-left: 2px solid #F40000;
 border-bottom: 2px solid #F40000;
 transform: rotate(-45deg);
}
span.check label {
 position: relative;
 padding-left: 20px;
}
span.check label::before,
span.check label::after {
 position: absolute;
}
span.check label::before {
 top: 1px;
 left: -10px;
}
span.check label::after {
 top: 5px;
 left: -7px;
}
/* This hides the checkmark by default. */
span.check input[type="checkbox"] + label::after,
span.check input[type="radio"] + label::after {
 content: none;
}
/* This unhides the checkmark when the input is checked. */
span.check input[type="checkbox"]:checked + label::after,
span.check input[type="radio"]:checked + label::after {
 content: "";
}
span.check input[type="checkbox"]:focus + label::before,
span.check input[type="radio"]:focus + label::before {
 background-color: #FFFFB0;
}
input[type="checkbox"].solo:focus {
    outline: 3px solid #FFFFB0;
}
span.check input[type="checkbox"]:required + label::before,
span.check input[type="radio"]:required + label::before {
 outline: rgb(244, 0, 0) auto 5px;
}
span.check input[type="checkbox"]:disabled + label::before,
span.check input[type="radio"]:disabled + label::before {
 background-color: ButtonFace;
}
input[type="checkbox"]:disabled + label,
input[type="radio"]:disabled + label {
 color: #8F8F8F;
}

span.blacknormal {
 font-size: 14px;
 color: black;
 font-weight: normal;
}
span.navynormal {
 font-size: 14px;
 color: navy;
 font-weight: normal;
}
span.expandtext {
 margin: 0px 0px 0px 0px;
 display: none;
}
span.collapsetext {
 margin: 0px 0px 0px 0px;
 display: block;
}
span.help {
 margin-left: 10px;
 margin-right: 10px;
}
span.red {
 color: #F40000;
}
input.linethru, span.linethru {
 text-decoration: line-through;
}
span.label {
 font-style: italic;
 color: navy;
 padding-right: 5px;
}
span.super {
 font-size: 10px;
 vertical-align: top;
}
span.indent {
 padding-left: 5px;
}
span.indent2 {
 padding-left: 10px;
}
.dotted {
 text-decoration-line: underline;
 text-decoration-style: dotted;
}
span.tag_name {
 padding-left: 15px;
}
img.tag_name {
 vertical-align: middle;
 padding-left: 2px;
}
p.exerpt {
 font-style: italic;
 padding-left: 10px;
 padding-right: 10px;
}
hr {
 border: 1px solid #002080;
 margin: 15px auto 10px auto;
 text-align: center;
}
div.clear {
 clear: both;
}

/* These are used with fade-away alert popup */
/* I'm fixing the size of the popup and centering what's in it.  If I set the offsetX of the popup, I will be able to center what is displayed in the popup inside its parent window. */
div.alert_pop {
 z-index: 10;
 position: absolute;
 text-align: center;
 width: 200px;
}
p.alert_pop {
 padding: 5px 10px 5px 10px;
 background-color: #FFFFB0;
 border: 1px solid #FB0000;
}

/* These allow for responsive embedded iframes (like Google calendar and you tube. */
/* Set the padding-top for the div.resp_div in the html file. */
div.resp_div {
 position: relative;
 overflow: hidden;
}

iframe.resp_iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border: 0;
}

/* These are a little more specialty, but I may use them on multiple pages */
p.postdate {
 font-size: 11px;
 font-style: italic;
 font-weight: normal;
 padding-top: 1px;
 text-indent: 10px;
}	
div.fb_frame {
 text-align: center;
 clear: both;
}
p.alert {
 text-align: center;
 font-style: italic;
 padding: 7px 0px 7px 0px;
}
p.readmore {
 text-align: center;
 font-style: italic;
 font-weight: bold;
 padding: 7px 0px 7px 0px;
}
p.printable {
 margin: 5px 0px 5px 0px;
 font-size: 12px;
 font-style: italic;
 text-align: right;
}
p.footnote {
 font-size: 12px;
 font-style: italic;
 padding: 10px 0px 10px 0px;
}
p.footnote.center {
 text-align: center;
}
p.return {
 font-size: 16px;
 margin: 5px 0px 10px 10px;
}
div.resourceblock {
 padding: 0px 7px 5px 7px;
 margin: 15px 0px 10px 0px;
 border: 2px ridge #002080;
 background-color: #F0F0FF;
}
div.commandbuttons {
 clear: both;
 margin: 10px 0px 0px 0px;
}
div.float_over {
 position: absolute;
 top: 35%;
 left: 50%;
 transform: translate(-50%, -50%);
 font-weight: bold;
 color: #F40000;
 font-size: 20px;
}
div.headbuttons {
 margin-top: 5px;
 float: right;
}

/* These are used on login pages */
p.forgotpwd {
 float: right;
 font-style: italic;
 font-size: 12px;
 padding-top: 7px;
 font-weight: bold;
}
div.error {
 padding-top: 10px;
 padding-bottom: 10px;
}
td.error, span.error {
 font-style: italic;
 color: #F40000;
 padding-left: 15px;
 padding-right: 15px;
 padding-top: 10px;
 text-align: center;
}

/* These are used for testimonials */
td.quote {
 vertical-align: middle;
 color: #F40000;
 font-size: 48px;
 font-weight: bold;
}
td.quote.left {
 text-align: left;
 width: 8%;
}
td.quote.right {
 text-align: center;
 margin-left: 84%;
}
td.reviewer {
 font-style: italic;
 font-size: 14px;
 padding-top: 5px;
 text-align: right;
}

/* I need these for app icons - brough them over from header.css */
a.header {
 text-decoration: none;
 outline: none;
 color: black;
}
a.header:hover {
 text-decoration: none;
 color: #F40000;
}
@media screen and (max-width:479px) {
span.head_menu {
 display: none;
}
}
@media screen and (min-width:480px) {
span.head_menu {
 font-size: 12px;
 font-weight: bold;
}
}
span.head_menu_show {
 font-size: 12px;
 font-weight: bold;
}

/* These styles are for embedding videos in pages.  The div.embedded video will make sure the video spans the entire page with the correct height. The img element assumes the img will occur as a smaller version of the video, e.g., in a sidebar.  The user may need to override the width.  Use the js function (common.js) expandVideo to make the video div/iframe displayed or hidden. */
/* delete all but the embedded_video classes when I'm sure I won't go back to putting the small version of the video in the right sidebar */
div.video_thumb {
 text-align: center;
 position: relative;
}
img.embedded_video {
 width: 200px;
 border: 2px solid black;
 position: relative;
 top: 0;
 left: 0;
}
img.video_arrow {
 position: absolute;
 top: 40px;
 left: 80px;
 width: 40px
}
div.embedded_video {
 margin-top: 10px;
 margin-bottom: 10px;
 width: 100%;
 position: relative;
/* padding-bottom: 56.25%; /* 16:9 */
/* height: 0; */
 overflow: hidden;
}
div.play_video {
 display: inherit;
}
iframe.embedded_video {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
/* @media screen and (min-width:480px) {
div.embedded_video {
 float: right;
 width: 50%;
}
} */
@media screen and (max-width:479px) {
div.embedded_video {
 margin: 15px 0px 15px 0px;
}
}

/* this is new stuff added based on this reference
https://techstacker.com/how-to-responsive-youtube-videos/ */
div.embedded_video::after {
 display: block;
 content: "";
 padding-bottom: 56.25%; /* 16:9 */
}

/* This allows a line break to have space between lines.
https://stackoverflow.com/questions/1409649/how-to-change-the-height-of-a-br */
br.spacer {
 display: block; /* makes it have a width */
 content: ""; /* clears default height */
 margin-top: 7px;
}