:root {
    --shadow: #868585; 
    --grey: #414141;
    --off-white: #f0f0f0;
    --white: #ffffff;
    --black: #4d4d4d;
}
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 150px;}
main {min-height: calc(100vh - 174px);}
h1 { font-size: 3.5rem; font-weight: 100;text-transform: capitalize;    margin-block: .5rem;padding: 0;line-height: 1;}
.print-heading { display:none;}
h2, .h2{ font-size: 2rem; margin: 1.2em 0 0.7em;font-weight: normal;text-transform: capitalize;border-bottom: solid thin var(--primary);text-wrap:balance; }
@media(max-width: 600px) {
    h1 { font-size: 2rem;} 
    h2 { font-size: 1.5rem;}
}
:focus {outline-color: var(--primary);outline-offset: 3px;}
/*h2[id]:not([id=""]):after {content:'';}*/

h3, .h3{ font-size: 1.5rem; margin: 0.67em 0 0;font-weight: bold;text-transform: capitalize;}
.section-anchor svg {font-size: 1.5rem;}
.section-anchor svg .icon-color {fill:var(--black);}
hr {  box-sizing: content-box; height: 0;  overflow: visible; border: 0;height: 1px; background: #333;background-image: linear-gradient(to right, #ccc, #333, #ccc);    margin: 1rem;}
pre { font-size: .9rem;text-wrap: balance;width: 90%;margin: auto;color: black;}
img { max-width:100%; height:auto; display: block; }
button, input, optgroup, select { font-family: inherit; font-size: inherit; border:none;line-height: 1; }/* Line-height important*/
textarea { font-family: inherit; font-size: inherit; border:none;line-height: 1.3; field-sizing: content;}
button, input {  overflow: visible; }
button, select {  text-transform: none; }
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: none; -webkit-border-radius: 0; }
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }
[type="checkbox"], [type="radio"] {box-sizing: border-box; padding: 0;width: 1rem;}
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {  height: auto;}
[type="search"] {-webkit-appearance: textfield;  outline-offset: -2px; }
[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit;}
.print-only{display:none;}

/**************  GLOBAL BASICS  ****************************************************/
.clear:after { content: " "; display: table; clear: both; }
body { margin: 0; line-height: 1.5; font-size:1.1rem; -webkit-font-smoothing: antialiased;letter-spacing: 1px;font-family: Helvetica, Arial, sans-serif;color:var(--black);} 
.content-container { width:96%; max-width: 1280px; margin: auto; margin:2rem auto 1rem;    min-height: 65vh; }
@media(max-width: 600px) {
    .content-container { width:90%;}
}
.container-padding { width:100%; padding: 0 2%; max-width: 1280px; margin: auto; }
.image {width:100%; height:auto;}
p { margin-top: 5px; }
p, ul, ol {    max-width: 800px;text-wrap: pretty;}
li {margin: 0 0 5px 0;}
.disclaimer {font-size: .8em;}
a { background-color: transparent; color:var(--primary);}
a:hover, a:active {color:var(--black);text-decoration:none;}
/*a:visited {color:var(--grey);}*/
/*a[target="_blank"]*/
a[href^="https"].a-btn:after {content: url("data:image/svg+xml,%3Csvg class='icon-color' xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6m-7 1l9-9m-5 0h5v5'/%3E%3C/svg%3E");padding: 0 0 0 .5em;}
p a[href^="https"]:after, li a[href^="https"]:after {content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2300866E' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6m-7 1l9-9m-5 0h5v5'/%3E%3C/svg%3E");padding: 0 0 0 .25em;}

* { box-sizing: border-box; }
.scroll[id] {scroll-margin-top: 150px;}
.text-center {text-align:center;}
.text-left {text-align:left;}
.text-right {text-align:right;margin:0 0 0 auto;}
.indent {margin-left:20px;}
.left {float:left;}
.right {float:right;}
.center {margin:auto;}

iframe {border: none;width: 100%; height:auto;}

.copy-text {color:var(--primary);font-weight:bold;cursor: pointer;}

/**************  SYSTEM ERROR PAGE  ****************************************************/
.system_page {padding:30px 10px; text-align:center;}
.system_svg {width:45px;height:45px;margin:0 auto 35px;display:block}
.system_error {text-align: center;font-size: 2rem; max-width:100%}
.system_page p {margin: 1em auto;}

/**************  COMMENTS  ****************************************************/
/*.comment-list {margin: 1rem 1rem 1rem 2rem;border: thin solid var(--shadow);padding: 0 1rem 1rem 1rem;}*/
.cms_comment {
    border-bottom: thin solid var(--shadow);
    padding: 0 0 1rem 0;
    margin: 0 0 1rem 0;
}
.comment-list h3 {
    margin: 0;
    line-height: 1;
    font-size: 1.2rem;
}
.comment-list time {
    font-size: .8rem;
    margin: 0 0 0 2rem;
}
.comment-list p {
    margin: 0 0 0 1rem;
}
.cmsNoCommentsMessage {
    margin: 1rem !important;
}
.cms_comment__buttons {
    text-align: right;
}
.cms_comment__button {
    font-size: .8rem;
    color: var(--white);
    text-decoration: none;
        padding: .1rem .75rem;
    line-height: 1.4;
    background: var(--grey);
    border-radius: .25rem;
    border: thin solid var(--grey);
    display: inline-flex;
    align-items: center;
    gap: .5em;
}
.cms_comment__button:hover {
    color: var(--grey);
    background: var(--white);
}
.cms_add_comment_form {
    margin: 2rem 0 0 0;
}
.cms_comments-form__textarea {field-sizing: content;}


/**************  GRID  ****************************************************/
.grid-group { display: flex; flex-wrap:wrap; gap:20px;}
    .grid { display: flex; gap:20px;}
.gg {display: flex; flex-wrap:wrap;}
.grid-center {align-items: center;} 
.grid-justify { justify-content: center;}
.grid-end {justify-content: end;}
    .grid-evenly {justify-content: space-evenly;} 
.grid-between {justify-content: space-between;}
.grid-group img {width: 100%;height: auto;}
.grid-content {width: 75%;}
.grid-aside {width: 25%;max-width: 300px;min-width: 250px;}
.grid5-3-1{ flex-basis: calc(20% - 16px);}
.grid4-2-1{ flex-basis: calc(25% - 15px);}
    .grid3-2-1{ flex-basis: calc(33% - 11px);}
.grid2, .grid2-1{flex-basis: calc(50% - 10px);}
.feature img {width:280px; height:auto;} 
@media screen and (max-width: 950px) {
	.grid3-2-1 {flex-basis: calc(50% - 11px);}
}
@media screen and (max-width: 800px) {
    .grid5-3-1 { flex-basis: calc(33% - 13px);}
}
@media screen and (max-width: 700px) {
    .grid {flex-wrap:wrap;}
    .grid-content, .grid-aside {width:100%;max-width:100%;}
    .grid4-2-1 {flex-basis: calc(50% - 11px);}
	.grid3-2-1, .grid2-1 {flex-basis: calc(100% - 11px);}
}
@media screen and (max-width: 600px) {
    img {max-width:100%; height:auto;}
	.grid5-3-1{flex-basis: calc(50% - 11px); }
}

/**************  HEADER  ****************************************************/
header {background: var(--white);border-bottom: solid thin var(--shadow);}
.stick { position: fixed; top: 0; width: 100%; z-index:2; }
@media only screen and (max-width: 600px) {
    .stick { position: unset; } 
}

/**************  NAVIGATION  ****************************************************/
nav.main { color:var(--black); font-size:1.2rem; display: flex; align-items: center;justify-content: space-between; width:98%; max-width: 1280px; margin: auto; }
nav.main img {height: 120px;width: auto;margin:10px;transition: all 0.3s ease-in-out;}
.nav-dropdown > :first-child:after { content: "\25BE"; padding-left: 4px; }
.selected > :first-child{border-bottom:3px solid var(--primary); }
.highlight a { background-color:var(--green);}
.nav-hide {display:none!important;}
.main ul { margin: 0; padding: 0; list-style-type: none; position: relative;max-width: 100%;}
.main ul li { display: inline-block; -webkit-transition: background-color 0.4s ease-in-out ; transition: background-color 0.4s ease-in-out;  }
.main ul li a, .main ul li button { text-decoration: none; display: block; padding: 10px; color:var(--black);transition: margin .3s ease-in-out;background: inherit;margin:auto;}
.main ul li a:hover, .main ul li button:hover { background: var(--primary); -webkit-transition: background-color 0.4s ease-in-out ; transition: background-color 0.4s ease-in-out;  color: var(--white);}
.main ul ul { position: absolute; z-index:2; text-align:left; display: none; background: var(--off-white);box-shadow: 2px 2px 5px var(--shadow);} 
.main ul ul li { display: block;  }
.main ul ul li a { color: var(--black);}
.main div { font-size: 2.5rem; padding: 0 4%; cursor: pointer; display: none; } /*mobile bar menu color*/

@media(max-width: 1130px) {
    nav.main img {height: 100px;}
}
@media(max-width: 1050px) {
    nav.main img {height: 90px;}
}
@media(max-width: 1020px) {
    nav.main {flex-wrap: wrap; }
    nav.main img {height: 80px;}
    .main div {display: block; }
    .main ul { display: none; position: static; width: 100% }
    .main button {width:100%;}
    .main ul li { display: block;  text-align: center;}
    .main ul ul { position: static; text-align:inherit;width: 90%;
    margin: auto; }
}
@media(min-width: 600px) {
    .scroll-img { height: 50px!important;margin:0!important;}nav.main{font-size:1.1rem;}
}
@media(max-width: 600px) {
    nav.main img { height:60px; }
}
#form-search {scroll-margin-top: 110px;}

/**************  PAGE HEADER  ****************************************************/
.image-wrapper {position:relative; height: 250px; box-shadow: 0 5px 14px var(--shadow); margin-top:130px;overflow:hidden;} 
.image-wrapper img { width: 100%; height: 100%; object-fit: cover;filter: brightness(0.5); }
.image-wrapper h1 { font-size: clamp(2rem, 6vw - .1rem, 3.5rem);text-wrap-style: balance;font-weight: 100;text-transform: capitalize;text-align: center;position: absolute;top: 50%;left: 50%;width: 90%;margin: 0;transform: translate(-50%, -50%);padding: 0;color: var(--off-white);}
.no-image-wrapper {height: 1px;margin-top: 130px;}
.home-leader {position:relative; height: 580px; box-shadow: 0 5px 14px var(--shadow); margin:130px 0 50px 0;} 
.home-leader-left {position: absolute;left: 0;top: 0;filter: opacity(0.3);height:100%;width: auto;}
.home-leader-right {position: absolute;right: 0;bottom: 0;height:100%;transition: all 0.3s ease-in-out;width: auto;}
.home-leader-highlight {color:#ab660c;}
blockquote {position: absolute;top: 50%;left: 50%;margin: 0;transform: translate(-50%, -50%);z-index: 1;font-size: 2.5rem;font-weight: 100;color:var(--primary);width:55%;}
blockquote::before {font-family: auto;content: "\201C";color: var(--primary);font-size: 6em;position: absolute;left: -100px;top: -100px;filter: opacity(0.5);}
blockquote .cite{display: block;font-weight: bold;margin-top: 1em;font-size: 1.3rem;text-align: right;}
@media(max-width: 1170px) {
    .home-leader-right {height:90%;transition: all 0.3s ease-in-out;}
}
@media(max-width: 1130px) {
    .image-wrapper, .home-leader, .no-image-wrapper { margin-top:100px;}
    .home-leader { height: 500px;} 
    .home-leader-right {height:80%;transition: all 0.3s ease-in-out;}
}
@media(max-width: 1050px) {
    .image-wrapper, .home-leader, .no-image-wrapper { margin-top:90px;}
}
@media(max-width: 1020px) {
    .image-wrapper, .home-leader, .no-image-wrapper {margin-top:80px;}
    .home-leader { height: 400px;transition: all 0.3s ease-in-out;} 
    blockquote {font-size: 2rem;}
    blockquote::before {left:-80px;top:-80px;}
}
@media(max-width: 770px) {
    .image-wrapper, .home-leader, .no-image-wrapper {margin-top:80px;}
    .home-leader { height: 300px;} 
    blockquote {font-size: 1.5rem;}
    blockquote::before {left:-60px;top:-60px;}
}
@media(max-width: 600px) {
    .image-wrapper {position:relative; height: 250px;box-shadow: 0 5px 5px var(--shadow); margin-top:0;} 
    .no-image-wrapper {margin-top: 0;}
    .home-leader {position:relative; height: 450px;box-shadow: 0 5px 5px var(--shadow); margin-top:0;} 
    blockquote {left: 43%;width: 50%;}
    blockquote::before {left:-30px;top:-25px;font-size:4rem;}
    .home-leader-right {height:70%;transition: all 0.3s ease-in-out;}
}
@media(max-width: 480px) {
    blockquote {left: 35%;}
     .home-leader-right {height:60%;}
}


/**************  ACTION BUTTON  ****************************************************/
input[type="image"] {vertical-align: top;}
.a-btn, button[type=submit], input[type=submit]   {padding: 10px 30px;cursor: pointer;text-decoration: none;background: var(--primary);color: var(--white);border-radius: 20px;font-weight: bold;display: inline-block;margin: 5px 10px;border: 2px solid var(--white);}
.report-list a {display: inline-block;background: var(--primary);color: var(--white);text-decoration: none;padding: 10px 30px;border-radius: 50px;min-width: 300px;text-align: center;font-weight: bold;border: 2px solid var(--white);}
.back-btn {
    padding: .25rem 1rem;
    text-decoration: none;
    background: var(--primary);
    color: var(--white);
    border-radius: 20px;
    display: inline-block;
    margin: 0 1rem;
    border: 2px solid var(--white);
}
.a-btn:hover, button[type=submit]:hover, input[type=submit]:hover, .report-list a:hover, .back-btn:hover {background-color: var(--white);text-decoration: none;color: var(--primary);border: 2px solid var(--primary);}
.a-btn:focus, button[type=submit]:focus, input[type=submit]:focus, .report-list a:focus {background-color: var(--secondary);color: var(--white);border: none;}
.a-btn:visited {color:var(--white);}
.a-btn:hover:visited {color:var(--primary);}
.link {border: thin solid var(--primary);padding: 5px 10px;border-radius: 11px;text-decoration: none;color: var(--primary);background: white;font-size: .9rem;}
.link:hover {border: thin solid white;color: white;background: var(--primary);}
input[type=submit]:disabled {opacity: .2;}
.help-box {text-align: right;}
.help-btn {padding: 3px 10px;font-size: .8rem;cursor: pointer;text-decoration: none;background: var(--off-white);border-radius: 5px;display: inline-block;margin: 0;    border: 1px solid #9ac6db;}
#add_file {font-size: 1rem;
    line-height: 1;
    padding: .25rem .5rem;
    display: flex;
    gap: .25rem;
    border: 1px solid var(--off-white);    align-items: center;}
/*.e-btn {padding: 3px 10px;font-size: .8rem;cursor: pointer;text-decoration: none;background: #9ac6bd;color: #000000;border-radius: 5px;display: inline-block;margin: 0;    border: 1px solid #9ac6db;    font-weight: bold;}*/
.e-btn {padding: .1em .75em;font-size: .8rem;cursor: pointer;text-decoration: none;background: var(--black);color: var(--white);border-radius: 5px;display: inline-block;border: 1px solid var(--black);}
.a-btn-small {padding: .1em .75em;font-size: .8rem;cursor: pointer;text-decoration: none;background: var(--primary);color: var(--white);border-radius: 5px;display: inline-block;border: 1px solid var(--primary);}
.search-link-btn {width: fit-content;padding: .25em .5em;cursor: pointer;text-decoration: none;background: var(--primary);color: #000000;border-radius: 5px;display: block;border: 2px solid var(--primary);white-space: nowrap;font-size: .9em;}
.c-btn {width: fit-content;padding: .25em .5em;cursor: pointer;text-decoration: none;background: var(--secondary);color: #000000;border-radius: 5px;display: block;border: 2px solid var(--secondary);white-space: nowrap;font-size: .9em;}
.c-btn-small {padding: .1em .75em;font-size: .8rem;cursor: pointer;text-decoration: none;background: var(--secondary);color: #000000;border-radius: 5px;display: inline-block;border: 1px solid var(--secondary);}
.c-btn:hover, .c-btn-small:hover {background-color: var(--white);text-decoration: none;color: var(--secondary);border: 2px solid var(--secondary);}
.e-btn:hover, .help-btn:hover, .a-btn-small:hover, .search-link-btn:hover, #add_file:hover {background-color: var(--white);text-decoration: none;color: var(--primary);border: 1px solid var(--primary);}

.ci-btn {display: block;
    background: var(--secondary);
    border-radius: 50px;width: 40px;
    height: 40px;}
.ci-btn svg {color:#000000;}
.edi-btn {display: inline-block;
    background: var(--primary);
    border-radius: 50px;vertical-align: top;}
.edi-btn:hover,.ci-btn:hover {filter: opacity(0.5);}

.filter-bar {
    display: flex;
    justify-content: center;
    margin: 30px auto 30px;
    flex-wrap: wrap;
}
.filter-btn { padding: 5px 20px;
    text-decoration: none;
    background: var(--primary);
    color: var(--white);
    border: 2px solid var(--white);
}
#topbutton {display: none; position: fixed; bottom: 15px;right: -25px;z-index: 1;padding: 10px 20px;cursor: pointer;text-decoration: none;background: var(--primary);color: var(--white);border-radius: 20px;font-weight: bold;margin: 5px 10px;border: 2px solid var(--white);} 
#topbutton:hover {background-color: var(--white);text-decoration: none;color: var(--primary);border: 2px solid var(--primary);}

/**************  MAIN PAGE  ****************************************************/
.home { font-size: 2.25rem; font-weight: bold;position: inherit;width: auto;margin: 2.3rem 0 1rem;text-align: left;transform: none;color: var(--black);}
@media screen and (max-width: 700px) {
.home {font-size: 2rem;margin: 0 0 1rem;}
   
}
    .section-container{padding: 50px 5%;}
    .section-container-highlight {background-color:var(--secondary); color:#000000; margin: 0 -2%;}
    .section-container-highlight-prime {background-color: var(--primary);color: #ffffff;}
    .section-container-highlight-prime .section-anchor svg .icon-color {fill:var(--white);}
    .section-container h2 {border-bottom:none;font-weight:bold;    margin: 0;}
    .section-wrapper {display: flex;align-items: center;column-gap: 2%;margin: auto;max-width: 1280px;}
    .section-text {width: 50%; text-align:center;}
    .section-image { width: 50%; max-height: 400px; overflow: hidden;}
    .section-image img { width: 100%; height: 100%; object-fit: cover;}
    .section-container:nth-child(even) .section-text {-webkit-order: 1; order:1;}
    .section-container:nth-child(even) .section-image {-webkit-order: 2; order:2;}
.section-backdrop-wrapper {position: relative;}
.section-backtrop-text {position: relative;text-align: center;color: var(--black);width: 75%;margin: auto;}
.section-container p {margin: .5em auto 1em;}

@media screen and (max-width: 860px) {
    .section-wrapper {flex-wrap: wrap;}
    .section-text, .section-image  {width: 100%;}
    .section-image { margin-bottom:10px;}
    .section-container:nth-child(even) .section-text {-webkit-order: 2; order:2;}
    .section-container:nth-child(even) .section-image {-webkit-order: 1; order:1;}
}

.image-right {float:right; margin:0 0 10px 10px;max-width: 25%;height: auto;min-width:250px;transition: all 0.3s ease-in-out;}
@media screen and (max-width: 650px) {
    .image-right {float:none; margin:10px 0;max-width: 100%;height: auto;}
}


/**************  TABLE  ****************************************************/
.tb-responsive {/* overflow-x: auto;max-height:calc(100vh - 120px);*/max-width: fit-content;/*overscroll-behavior: contain;*/margin: auto;}
.tb-responsive:has(> empty-message) {
    max-width: 100%;
}
.item-counter {font-size: .8rem;margin: .5rem 0 0 .5rem;}
thead { position: sticky;top: 52px;}
table {border-collapse: collapse;max-width: 100%;min-width: 300px;font-size: .9rem;}
table a {text-decoration:none;}
th { text-align: left; padding: 8px; text-transform: uppercase; background-color: var(--black); color: var(--white);line-height:1rem;}
th span {font-size: .7rem;text-transform: none;}
tfoot {
    border: thin solid var(--black);
}
tr {border-bottom: solid thin var(--off-white);}
tr:nth-child(even){background-color: #f4f4f4}
.tb-nowrap td, .td-nowrap {white-space: nowrap;}
td { text-align: left; padding: 6px 8px; vertical-align:middle;}
th[onclick^=sortTable]:hover { background-color: var(--primary); }
.td-center {text-align:center;}
.td-action {white-space: nowrap;text-align: right;min-width:100px;}


tr.head:not(:has(+ tr.sponsor)) {background-color: #cdcdcd;border-top: none;display: none;}
tr.sponsor:has(+ .head) {border-bottom: 1rem solid white;}
.sponsor-table .head {background-color: var(--black); color: var(--white);border-top: 1rem solid white;}
.sponsor-table .head a {color: var(--white);}
.sponsor-table .sponosor {line-height: 1;background-color: white;}



#report_outer tr:nth-child(even){background-color: #ffffff;}
.report-group {break-inside: avoid;}
.report-outer {font-weight:bold;color:black;border-top:thin solid var(--shadow);}
#report_inner {width: 90%;margin: auto;}
.report_inner-header {background:var(--shadow);padding: 4px 8px;line-height: 1rem;color:var(--white);font-weight:bold;}
#report_inner tr:nth-child(even){background-color: #f4f4f4}


.report-list {display: flex;flex-wrap: wrap;gap: 20px;}

.case-list-heading {min-width:250px;width: 750px;}
.case-list-heading span {font-size: .7rem;text-transform: none;}

.paid-wrapper {display: grid;grid-template-columns: min-content max-content;column-gap: 1rem;align-items: center;}
.paid {display: inline-block;background: #afffaf;border: solid thin #027d02;    border-radius: 0.3rem;padding: .1em .75em;font-size: .8rem;}
.payment-due-btn {background: rgb(255 0 0 / 50%);border: solid thin rgb(255 0 0);color: #000000;    border-radius: 0.3rem;padding: .1em .75em;font-size: .8rem;text-decoration:none;}
.payment-due-btn:hover {background: var(--white);border: solid thin var(--primary);}
.td-a-btn {padding: .25em .5em;
    cursor: pointer;
    text-decoration: none;
    background: var(--primary);
    color: var(--white);
    border-radius: .5em;
    display: inline-block;
    border: thin solid var(--white);
}
.td-a-btn:hover {
    background: var(--white);
    color: var(--primary);
    border: thin solid var(--primary);
}
/**************  MEETING PAGE  ****************************************************/
.meeting-wrapper {margin: 0 auto 30px;width: 95%;padding: 20px;border: solid thin var(--shadow);box-shadow: 2px 2px 5px var(--shadow);background-color: var(--off-white);color: black;}
.meeting-grid { display: flex; gap:20px;}

.m-program-wrapper {border: solid thin var(--shadow);box-shadow: 2px 2px 5px var(--shadow);padding: 20px 2% 20px 20px;position: relative;}
.m-program-print-btn {position: absolute;top: 0;right: 0;font-size: .9rem;padding: .25rem .5rem;background: var(--grey);color: var(--white);text-decoration: none;border-radius: 0 0 0 .5rem;border: thin solid var(--grey);}
.m-program-print-btn:hover {background: var(--white);color: var(--grey);}
.m-program-grid {display: flex;column-gap: 20px;flex-wrap: wrap;color: inherit;text-decoration: none;padding: .5rem .5rem .5rem 1.5rem;border-bottom: thin solid var(--shadow);}
a.m-program-grid {    background: #00866e12;}
a.m-program-grid strong {color: var(--primary);}
a.m-program-grid:hover {
    background: var(--off-white);
}
.m-program-mid {flex: 1 1 400px;}

.m-program-start, .m-program-end {
    width: calc(20% - 20px);
    min-width: calc(180px + 20px);
}
.m-program-room {
    font-size: .9rem;
    padding: 0 0 0 20px;
}
.m-program-date {    position: sticky;
top: 55px;;
    background: var(--white);border-bottom: solid thin var(--shadow);margin: 40px 0 10px 0;}
@media(max-width: 600px) {
    .meeting-grid { display: flex; gap:10px;}
    .m-program-date { top: 0;}
}
@media(max-width: 700px) {
    .m-program-start, .m-program-end {width: 100%;}
    .m-program-mid {margin: 2rem 0;}
}
/**************  MEETING PROGRAM  ****************************************************/
.iframe {width: 95%;margin: 2rem auto;border: thin solid var(--shadow);box-shadow: 2px 2px 5px var(--shadow);border-radius: 5px;overflow: hidden;}
iframe#frame {padding: 0 1rem;}
.tab {
    background-color: var(--primary);
    display: flex;
    flex-wrap: wrap;
}
.tab button {
    flex: 1 1 auto;
    background-color: inherit;
    border: none;
    cursor: pointer;
    padding: .75rem 1rem;
    transition: 0.3s;
    font-size: 1rem;
    color: #ffffff;
    border-bottom: thin solid var(--shadow);
}
.tab button:hover{background: var(--black);color:var(--white);}
.tab button.active{border-bottom: 3px solid var(--black);}
.tab > .close-btn {
    margin: 0 0 0 auto;
    background: var(--off-white);
    color: var(--black);
}
.form-question {display:flex;}
.form-question > input[type="text"]{
    margin: 0 4px;
}
.form-question > input[type="submit"] {
    margin: 0;
    border-radius: 0;
    font-size: .9rem;
    padding: .5rem;
}
/**************  SURVEY QUESTIONS  ****************************************************/
.answer-flex {display: flex;column-gap: 2rem;row-gap: 1rem;flex-wrap: wrap;margin:0 0 0 2rem;align-items: end;}
.answer-flex input[type="submit"] {margin: 0;padding: .25rem .5rem;border-radius: .5rem;line-height: 1;}
.answer-flex label:has(input) {margin: 1rem 0 0 0;}
.answer-results-flex {display: flex;
    column-gap: 2rem;
    row-gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 auto;
    justify-content: center;}
@media(max-width: 480px) {
.answer-flex label {width: 100%;}
}


/**************  DASHBOARD PAGE ****************************************************/
.dashboard-container {display: flex;gap: 20px;justify-content: space-evenly;flex-wrap: wrap;}
.dashboard-wrapper {border: solid thin var(--shadow);box-shadow: 2px 2px 5px var(--shadow);flex:auto;}
.dashboard-wrapper:hover {filter: contrast(0.5);box-shadow: none;}
.dashboard-wrapper a {text-decoration:none;color:var(--black)}
.dashboard-image {position: relative;max-height: 130px;overflow: hidden;}
.dashboard-image img {width: 100%;}
.dashboard-header {color: var(--off-white);font-weight: bold;position: absolute;top: 50%;left: 50%;width: 100%;transform: translate(-50%, -50%);display: flex;justify-content: center;align-items: center;gap: 20px;font-size: 2rem;}
.dashboard-header img {max-width: 35px;max-height: 35px;display: inline-block;}
.dashboard-description {padding: 20px 5%;}
@media screen and (max-width: 1030px) {
.dashboard-container {flex-wrap: wrap;} 
}    


.dashboard-member-title {
    font-size: 1.5rem;
}

.dashboard-content-section {
    border: solid thin var(--shadow);
    box-shadow: 2px 2px 5px var(--shadow);
    margin: 40px 0;
}
.dashboard-content-section-title {
    background: var(--black);
    padding: 10px;
}
.dashboard-content-section-title h3 {
    margin: 0;
    color: var(--white);
}
.dashboard-content-section-body {
    padding: 20px 40px;
}
.dashboard-link-wrapper {border: solid thin var(--shadow);box-shadow: 2px 2px 5px var(--shadow);margin-bottom:20px;}
.dashboard-link-image {position: relative;max-height: 80px;overflow: hidden;}
.dashboard-link-image img {width: 100%;}
.dashboard-link-header {color: var(--white);font-weight: bold;position: absolute;top: 50%;left: 50%;width: 100%;transform: translate(-50%, -50%);display: flex;justify-content: center;align-items: center;gap: 20px;font-size: 2rem;}
.dashboard-link-header img {max-width: 35px;max-height: 35px;display: inline-block;}
.dashboard-link-description {padding: 20px 20px 10px 20px;}
.dashboard-link-description a {display: inline-block;margin: 0 0 10px 0;}


.teal-btn, .regular {background:#00ccb3;color:#ffffff;}
.green-btn, .affiliate {background:#C4CB23;color:#ffffff;}
.blue-btn, .prospective {background:#5CB8EB;color:#ffffff;}
.orange-btn, .active {background:#F2B914;color:#ffffff;}
.gold-btn, .retired {background:#B9A85A;color:#ffffff;}

.regular-f {color:#00ccb3;font-weight:bolder;}
.affiliate-f {color:#C4CB23;font-weight:bolder;}
.prospective-f {color:#5CB8EB;font-weight:bolder;}
.active-f {color:#F2B914;font-weight:bolder;}
.retired-f {color:#B9A85A;font-weight:bolder;}

.my-details {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: space-between;
}

.my-details-wrapper p {font-size:.9rem;}
.my-details-wrapper p strong {font-size:1rem;}
.my-details-wrapper div {min-width:200px;}
.my-details-image {width: 200px;}
.button-wrapper {text-align:center;}
.my-details-edit-btn {font-size: .7rem;padding: 3px 10px;background: var(--black);color: var(--white);text-decoration: none;border-radius: 5px;border: thin solid var(--black);display: inline-block;
    margin: 0;
    text-align: center;
    white-space: nowrap;}
.my-details-edit-btn:hover {background: var(--white);color: var(--black);}


/**************  MEMBERS DIRECTORY PAGE ****************************************************/
.directory-item {display: flex;border: thin solid var(--shadow);box-shadow: 2px 2px 5px var(--shadow);padding: 20px;row-gap: 20px;column-gap: 40px;margin-bottom: 20px;flex-wrap:wrap;}
.directory-column {flex-basis: 19%;flex-grow: 1;flex-shrink: 0;}
.directory-name-wrapper {display: flex;align-items: center;gap: 20px;flex-basis: 25%;flex-grow: 0;flex-shrink: 0;}
.directory-name {font-size: 1.5rem;font-weight: bold;margin: 0;white-space: nowrap;}
.directory-initials {font-size: 2rem;font-weight: bold;border-radius: 100%;width: 80px;height: 80px;display: flex;align-items: center;justify-content: center;}
.directory-initials img {border-radius: 50%;width: 75px;}
.directory-status {margin: 0;text-transform: uppercase;}
.directory-title {font-weight: bold;margin: 0;text-transform: uppercase;font-size:1rem;}
.directory-text {margin: 2px 0 5px 10px;font-size:.9rem;}
.directory-item a {text-decoration:none;}
@media screen and (max-width: 600px) {
    .directory-name {white-space: normal;}
    .directory-item > div {flex-basis:100%;}
}

/**************  BOARD PAGE ****************************************************/
.board-directory-wrapper {border: thin solid var(--shadow);box-shadow: 2px 2px 5px var(--shadow);padding: 20px;margin-bottom: 2rem;width: 96%;}
.board-directory-name-wrapper {display: flex;align-items: center;gap: 20px;}
.board-directory-initials{font-size: 4rem;font-weight: bold;border-radius: 100%;width: 150px;min-width: 150px;height: 150px;display: flex;align-items: center;justify-content: center;background: var(--primary);color: var(--off-white);}
.board-directory-initials img {border-radius: 50%;width: 95%;}
.board-directory-name {font-size: 1.5rem;line-height: 1;font-weight: bold;margin: 0;white-space: nowrap;}
.board-directory-status {font-size: 1.3rem;line-height: 1;color: var(--grey);margin: .5rem 0 0 0;}
.board-directory-status span {font-size: 1rem;}
.board-directory-bio {margin: 1rem 0;}
.board-directory-item {display: flex;column-gap: 2rem;flex-wrap: wrap;}
.board-directory-item > div {flex: 1 1 auto;}
.board-directory-item p {margin: 0 0 .75rem 0;line-height: 1.4;}
.board-directory-item span {margin-left: 2rem;}
.bio-btn {display: inline-block;margin: .5rem;font-size: .8rem;background: var(--primary);color: var(--white);padding: .25rem .5rem;border-radius: .5rem;text-decoration: none;}
.bio-btn:hover {background: var(--grey);color: var(--white);}
@media screen and (max-width: 800px) {
    .board-directory-name-wrapper {flex-wrap: wrap;justify-content: center;text-align: center;}
}


.progress-title {display: flex;align-items: center;margin: 20px 10px 10px;}
.progress-title.highlight .progress-text {font-weight: bold;color: var(--primary);}
.progress-dot {display: inline-block;background-color: var(--shadow);color: white;border-radius: 50px;width: 30px;height: 30px;padding: 3px 8.3px;text-align: center;line-height: 1;font-size: 1.5rem;font-weight: bold;}
.progress-dot-check {display: inline-block;background-color: var(--primary);color: white;border-radius: 50px;width: 30px;height: 30px;padding: 3px 0;text-align: center;line-height: 1;font-size: 1.5rem;font-weight: bold;}
.dot-active { background: var(--secondary);}
.progress-text {line-height: 1rem;display: inline-block;padding: 0 10px;}
.progress-complete:hover {font-weight: bold;filter: grayscale(1);}
.progress-complete.highlight:hover {filter: grayscale(1);}
.text-active {font-size: 2rem;}
.progress-details {margin: 0 0 0 24px;padding: 20px 0 20px 20px;border-left: solid 3px var(--secondary);}
.highlight-details {border-left: solid 3px var(--primary);}
.progress-notes-container {background: var(--off-white);padding: 10px;margin: 20px 0 0 20px;}
.progress-notes {font-size: .9rem;line-height: 1rem;}
.progress-note-wrapper {padding-bottom: 5px;border-bottom: thin solid var(--shadow);}
.progress-note-head {position:relative;}
.progress-note-head p {margin: 5px 0;}
.progress-note-date {font-style: italic;font-size: .7rem;}
.progress-note-body {margin-left: 20px;}

/**************  MEMBERS INFO EDIT  ****************************************************/
.member-title {font-size: 2rem;}
span.member-level {font-weight: bold;font-size: 2.5rem;text-transform: uppercase;}

/**************  MEMBERS PAGE DETAIL  ****************************************************/
.member-body-wrapper, .meeting-registration-wrapper, .meeting-body-wrapper {display: flex;gap: 20px;}
.member-body-content, .meeting-body-content {width: calc(100% - 320px);}
.member-body-details, .meeting-body-details {width: 300px;}
.member-details-sticky, .meeting-details-sticky {position: sticky;top: 100px;max-width: 500px;margin: auto;}
.member-details-wrapper, .meeting-details-wrapper {padding: 10px;border: thin solid var(--shadow);box-shadow: 2px 2px 5px var(--shadow);border-radius: 5px;margin:0 auto 20px;position: relative;}
.member-image, .meeting-image {margin: 0 auto 20px;border-radius: 5px;overflow: hidden;box-shadow: 2px 2px 5px var(--shadow);position: relative;}
.member-edit-btn {position: absolute;bottom: 0;right: 0;font-size: .7rem;padding: 3px 10px;background: var(--black);color: var(--white);text-decoration: none;border-radius: 5px 0 4px 0;border: thin solid var(--black);}
.member-edit-btn:hover {background: var(--white);color: var(--black);}

@media(max-width: 750px) {
    .member-body-wrapper {flex-wrap:wrap;flex-direction: column-reverse;}
    .meeting-registration-wrapper, .meeting-body-wrapper {flex-wrap:wrap;}
    .member-body-content, .member-body-details {width:100%;margin: 20px 0;}
    .meeting-body-content, .meeting-body-details {width:100%;}
}
/**************  FOOTER  ****************************************************/
footer { padding: 10px 0; color: var(--white); background-color: var(--grey); }
footer p { margin-left: 2%; max-width:100%}
footer a {color:var(--off-white);}
footer a:hover {color:var(--white);}
.report-issue {display: block;font-size: .9rem;text-align: center;}
.social-icons {display: flex;column-gap: 20px;margin: 0 2%;}
.social-icons img {width: 30px;height: auto;}
.copyright { text-align:center; font-size: .8em; padding:10px 0 50px 0; }
@media (max-width: 500px) {
    .social-icons { justify-content: center;}
    footer {text-align:center; }
}

/**************  BREADCRUMBS  ****************************************************/
.breadcrumbs {list-style: none; display: flex; text-transform: capitalize; margin: 0; padding: 0 0 0 2%;}
.breadcrumbs li {display: inline-block; font-size: .8rem; }
.breadcrumbs li:not(:last-child)::after { position: relative; margin: 0 0.2rem; opacity: 1; content: "/"; color: #222;}
@media (max-width: 500px) {
.breadcrumbs li:last-of-type {
    display: none;}
}

/**************  PAGINATION  ****************************************************/
.pagination {margin: 0;text-align: center;}
.pagination ul { padding: 0;margin:0;max-width: 100%;}
.pagination li {display: inline-block;margin: 5px;background-color: var(--light-grey);border-radius: 5px;}
.pagination li a {color: var(--black);padding: 5px 10px;display: inline-block;text-decoration:none;}
.pagination .active {background-color: var(--black);}
.pagination .active a { color:var(--white);text-decoration:none;}
.pagination .active a:hover, .pagination a:hover { color:var(--white);background-color:var(--primary);border-radius: 5px;}
svg.pagination-inline-next, svg.system_pagination-prev  {vertical-align: middle;margin-bottom: 1px;}

/**************  DOOCUMENTS LIST  ****************************************************/
.file-list, .file-list-b { margin: 15px auto;background: var(--off-white);padding: 20px 2% 20px 20px;display: flex;align-items: center;border: solid thin var(--shadow);box-shadow: 2px 2px 5px var(--shadow);justify-content: space-between;flex-wrap: wrap;gap: 20px;}
.file-list-link {color: var(--black);text-decoration: none;}
.file-list:hover {filter: contrast(0.5);box-shadow: none;}
.file-list-b a:hover {text-decoration: underline;}
.file-list svg, .file-list-b svg {width:40px; height:auto; margin: 0 20px 0 0;}
.file-name {display: flex;align-items: center;}
.file-update {margin: 0 0 0 20px;font-size: .8rem;font-style: italic;}
.btn-group {margin: 0 0 0 auto;white-space: nowrap;line-height: 1rem;}

/**************  DOOCUMENTS LIST  ****************************************************/
.alert-wrapper {margin: 10px auto;width: 95%;box-shadow: 2px 2px 5px var(--shadow);display: flex;align-items: center;color: black;text-decoration: none;}
.alert-wrapper img {width:35px;height:35px;margin:5px 20px;}
.alert-wrapper span {padding:10px;text-wrap: balance;}
.alert-information {background: #639fe957;border: solid thin #639fe9fc;}
.alert-important {background: #e9b76145;border: solid thin #e9b761}
.alert-urgent {background: #e9606c4a;border: solid thin #e9606c;}
.alert-wrapper:hover {filter: hue-rotate(232deg);}

/**************  FEATURRE REQUEST AND MEETING Q & A LIST  ****************************************************/
.feature-wrapper {border: thin solid var(--shadow);display: flex;justify-content: space-between;align-items: center;padding: 1rem;gap: 1rem;color: var(--black);text-decoration: none;margin: 1rem 0;}
.feature-wrapper a {text-decoration:none;}
.feature-wrapper:hover {background: var(--off-white);}
.feature-wrapper:last-of-type {margin: 0 0 1rem 0;}
.feature-wrapper:first-of-type {margin: 2rem 0 0 0;} 
.feature-details p {margin: 0;}
.feature-details p:last-of-type {margin: 0 1rem 0 0;font-size: 1rem;}
.feature-vote {text-align: center;border: thin solid var(--shadow);padding: .25rem;border-radius: .5rem;background: var(--white);}
.feature-vote span:first-of-type {font-size: .8rem;}



/**************  FORM FIELDS  ****************************************************/

.form-flex, .form-flex-auto, .form-flex-csz, .form-flex-small {display: flex;flex-wrap: wrap;column-gap: 1rem;}
.form-flex > div {flex: 1 1 300px;}
.form-flex-csz > div:first-of-type {flex: 1 1 auto;}
.form-flex-csz > div {flex: 1 1 80px;}
.form-flex-small > div {flex: 1 1 80px;}


fieldset {border: thin solid var(--shadow);box-shadow: 2px 2px 5px var(--shadow);border-radius: 5px;margin: 2rem auto;position: relative;padding: 0 1rem 1.5rem 1rem;}
legend {padding: .25rem 1rem;background: var(--primary);color: var(--white);border-radius: 5px;font-weight: normal;line-height: 1;}

label {font-weight:bold;margin: 1.5rem 0 0 1rem;display:block;font-size: 1rem;}
label:has(input) {margin: 1.5rem 0 0 0;font-size: 1.1rem;}
label > input {margin: 0 .5rem 0 0;}
label:has(+ input:required):after, label:has(+ textarea:required):after, label:has(+ select:required):after {content: ' *';color: red;}
label:has(+ input:read-only):after, label:has(+ textarea:read-only):after {content: '*Read Only';color: var(--grey);font-size: .8rem;margin: 0 0 0 1rem;font-weight: normal;}
label:has(+ input[type=file]:read-only):after {content:'';}
.form-check-list label {display: inline-block; margin-right: 1rem;}
/* effects submit button input:read-only {color: #7c7c7c!important;}*/
form {/*width: 100%;padding: 10px 0; text-align:left;*/margin: auto;max-width: 950px;}
input[type=text], input[type=password], input[type=email], input[type=tel], textarea, select, #paymentFields_payment_form_0, .stripe_payment_wrapper { width: 100%;padding: 10px;border: none;border-bottom: thin solid var(--shadow);-webkit-appearance: none;transition: border-color .5s ease-out;background: var(--off-white);color: var(--black);}
.input-width-auto {width:auto;}
option:disabled {
    color: light-dark(graytext, rgb(170, 170, 170));
}
.check-box {margin: 1.5rem 0 0;display: flex;gap: 1rem;background-color: var(--off-white);padding: 10px;}
.check-box label {margin: 0;}
input[type=datetime-local], input[type=date], input[type=time], input[type=number], input[type=file]  {width:auto; padding: 10px;border: none;border-bottom: thin solid var(--shadow); -webkit-appearance: none; transition: border-color .5s ease-out;background: var(--off-white);color: var(--black);}

.tiny-body {padding:1rem;background:var(--off-white);}
.tox {width:100%;}
.form-note {padding-left:1.25rem; font-size: .8rem; color:var(--grey);line-height: 1;}
.donate-wrapper {
    display: flex;
    gap: 1.5rem;
    margin: 2rem 1rem 1rem;
    justify-content: center;
    flex-wrap: wrap;
}
.donate-wrapper button {
    padding: 1rem 1.75rem;
    border: thin solid var(--shadow);
    font-size: 1.5rem;
    border-radius: .5rem;
}
.donate-wrapper button:hover {background:inherit;border:thin solid var(--primary)}
.donate-wrapper button.selected {
    background-color: var(--secondary);
    color: var(--white);
}

/* unknown */
details {
    font-size: 1rem;
    margin: 0 10px 10px 20px;
}
summary:hover, details[open] > summary {
    background: var(--black);
    color: var(--white);
}
summary {
    display: inline-block;
    list-style: none;
    font-size: .9rem;
    padding: 0 10px;
    color: #c40000;
}
details[open] > summary:hover {
    background: var(--white);
    color: #c40000;
}
details > div {
    border: thin solid var(--shadow);
    padding: 10px;
}
.autoupdate-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    width: 100%;
    height: 100%;
    background: #eaeaeaa3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    text-align: center;
}

.required {font-size: .8em; color: #ff0000; font-weight: bold;} /*old*/

input:invalid, select:invalid, textarea:invalid {border-bottom: 1px solid red;}
input:focus:invalid, select:focus:invalid, textarea:focus:invalid  {border-bottom: 3px solid  salmon;}

.search-bar {display:flex;justify-content:space-between;margin: 30px auto 30px;align-items: flex-end;gap: 10px;}


/** Q&A  **/
#input_file label {margin: 0;line-height: 1;}
#input_file input[type=file] {padding:8px;}
#input_file input[type=submit] {
    padding: 10px 30px;
    cursor: pointer;
    text-decoration: none;
    background: var(--primary);
    color: var(--white);
    border-radius: 0;
    font-weight: bold;
    display: inline-block;
    margin: 0;
    border: 2px solid var(--primary);}


/**Table Form Button**/ 
#form_checkin {margin:0;padding:0;}
#form_checkin input[type="submit"] {margin:0;}

#form-search {display:flex;margin: 0 auto;max-width: 100%;padding: 0;flex-wrap: wrap;gap: 10px;justify-content: center;}
#form-search label {display:none;}

/**Meeting Q&A Detail**/ 
#form_vote input[type=submit] {width: 100%;border-radius: 0;margin: 0;}



/*old*/
#advanced_search {max-width: 100%;padding: 20px;flex-wrap: wrap;gap: 10px;justify-content: center;background: var(--off-white);}
#advanced_search label {display:block;}
#advanced_search select { min-width: 300px;}
#advanced_search input[type="date"] {background: white;;border: thin solid var(--shadow);margin: 0;padding:.5em;}
.advanced-search-group {display: flex;gap: 20px;flex-wrap: wrap;justify-content: center;}
/*new*/
#advance_search {width: calc(100% - 70px);margin: 0 0 0 auto;padding: 20px;background: var(--off-white);}
#advance_search label {display:block;}
#advance_search select { min-width: 300px;}
#advance_search input[type="date"] {background: white;;border: thin solid var(--shadow);margin: 0;padding:.5em;}
.advance-search-wrapper {display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 1rem;}
.advance-search-group {display: flex;gap: 20px;}

#form-search input[type=text], #form-search select { width:auto;padding: .5em;margin: 0;border: thin solid var(--shadow);border-bottom: thin solid var(--shadow);background: #ffffff;}

.name-search {min-width:300px;}
#form-search a {padding: .5em;text-decoration: none;margin: 0 .5em;}
#form-search input[type="submit"] {border-radius: 5px;margin: 0;border: 2px solid var(--primary);padding: .5em;}
.search-bar-action {display: inline-flex; align-items: center;}
#advance_search_btn, #advance_search_btn_close {background: none;color: grey;margin: 0 10px 0 -10px;font-size: .9rem;}
@media screen and (max-width: 600px) {
    .search-bar {flex-wrap: wrap;}
    #form-search {width: 100%;justify-content: center;}
    .search-bar-create {margin: 0 0 0 auto;}
    #form-search input[type=text], #form-search select {width:100%;}
    .name-search {min-width:100%}
}

.create-bar {width: fit-content;margin: 0 0 .5rem auto;}
.create-bar img {max-width: 40px;}

empty-message {font-size:2rem;margin-left:4%;text-wrap: nowrap;width: 100% min-width:80%;display: block;}

#form-delete, #form_past_pres, #form-active {display:inline;padding: 0;}
#form_past_pres input[type=submit] {
    background: var(--primary);
    margin: 0;
    padding: .1em .75em;
    font-size: .8rem;
    cursor: pointer;
    text-decoration: none;
    color: var(--white);
    border-radius: 5px;
    font-weight: normal;
    border: 1px solid var(--primary);
}
/*#form-delete input {padding: 5px 10px;font-size: .8rem;cursor: pointer;text-decoration: none;background: var(--grey);color: var(--white);border-radius: 5px;display: inline-block;margin:0;border: 1px solid var(--grey);}
#form-delete input:hover {background-color: var(--white);text-decoration: none;color: var(--primary);border: 1px solid var(--primary);}*/

#form-delete input {
    background: #000000;
    margin: 0;
    padding: .1em .75em;
    font-size: .8rem;
    cursor: pointer;
    text-decoration: none;
    color: var(--white);
    border-radius: 5px;
    font-weight: normal;
    border: 1px solid #000000;
    line-height:inherit;
}
#form-active input {
    background: var(--primary);
    margin: 0;
    padding: .1em .75em;
    font-size: .8rem;
    cursor: pointer;
    text-decoration: none;
    color: var(--white);
    border-radius: 5px;
    font-weight: normal;
    border: 1px solid var(--primary);
    line-height: inherit;
}
#form_past_pres input {display: inline-block;margin:0;}
#form-delete input:hover, form_past_pres input:hover {background-color: var(--white);text-decoration: none;color: var(--primary);border: 1px solid var(--primary);}

#form-login {max-width:350px;}

#form-member-status-update select {width:auto;}
/*MEMBER PAGE */
#form_note_delete {display: block;position: absolute;top: 0;right: 0;text-align: right;}
#form_note_delete input[type="submit"] {padding: 5px;background: var(--black);border-radius: 5px;margin: 0;font-weight: normal;font-size: .7rem;border:thin solid var(--black)}
#form_note_delete input[type="submit"]:hover {background: var(--white); color:var(--black);}
#form_note_create textarea {background: white;}
#progress_button_add {background: var(--secondary);font-size: .9rem;padding: 5px;border-radius: 5px;margin: 10px 10px 10px auto;display: block;border: 1px solid var(--secondary);}
#progress_button_add:hover {background: var(--white);color: var(--secondary);}

.form-section {padding: 10px;box-shadow: 2px 2px 5px var(--shadow);}

.form-gg,.form-gg-auto {display: flex;flex-wrap: wrap;column-gap:2rem;}
.form-gg > div {flex: 1 1 250px;}
.form-gg-auto > div {flex: 1 1 auto;}
.form-gg-auto input, .form-gg-auto select {width:auto;}

.form-g2-1 {flex-grow: 1;width: calc(50% - 20px);}
@media screen and (max-width: 700px) {
   .form-g2-1 {flex-grow: 1;width: 100%;} 
}

kbd {background-color: #eee;border-radius: 3px;border: 1px solid #b4b4b4;box-shadow:0 1px 1px rgba(0, 0, 0, 0.2),0 2px 0 0 rgba(255, 255, 255, 0.7) inset;color: #333;display: inline-block;font-size: 0.85em;font-weight: 700;line-height: 1;padding: 2px 4px;white-space: nowrap;}


.password-form {max-width:500px;text-align: left;}
.password-view-wrapper {display: flex;justify-content: space-between;align-items: flex-end;}
.password-view-checkbox {font-size: .8rem;display: flex;gap: .5rem;margin-right: 1rem;}
#password_error_wrapper {columns: 2;max-width: 450px; margin: .25rem 0 0 1rem;font-size: .8rem;}
#password_error_match {font-size: .8rem;margin: .25rem 0 0 1rem;color: red;}
.password-error {color: red; font-weight:bold;}
.password-success {color: green;font-weight:bold;}
.password-no-break {white-space: nowrap;}



/**************  COMMENTS  ****************************************************/
.comment-wrapper {max-width: 900px;margin: auto;font-size: .9rem;}
.comment-container {padding: 20px;border-bottom: thin solid var(--shadow);}
.comment-header {margin: 0 0 10px 0;}
.comment-name {font-weight: bold;}
.comment-date {font-style: italic;font-size: .8rem;}
.comment-text {margin: 0 0 0 20px;}
.comment-form {padding: 20px;}
/*.comment-form textarea {height:70px;}*/

/**************  PHOTO GALLERY  ****************************************************/
.photo {box-shadow: 2px 2px 5px var(--shadow)}
.photo a div {text-decoration: none;
    background: var(--primary);
    text-align: center;
    font-size: .8rem;
    padding: 10px;
    color: var(--white);    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.photo:hover {box-shadow: -2px -2px 5px var(--shadow);}
.photo a:hover {
    filter: saturate(0.5);}
/*.photo img { width:100%;height:100%;object-fit:cover;}*/

/**************  HORIZONTAL SCROLL BOX GET UPDATE FORM GIFR-NEWS  ****************************************************/
.scroll-box {position: relative;width: 100%;height: 260px;}
.scroll-indicator {position: absolute;right: 0;height: 100%;z-index: 2;background: #00866e7d;color: white;padding: 100px 10px;font-size: 3rem;border: none;}
.gallery-scrolling-wrapper {display: flex;position: absolute;overflow-x: scroll;inset: 0 0 0 0;gap: 10px;}
.gallery-card img {width:auto;  max-width: max-content; max-height:220px;box-shadow: 2px 2px 6px #aaaaaa;margin: 10px;}
.gallery-scrolling-wrapper::-webkit-scrollbar { height:5px; }
.gallery-scrolling-wrapper::-webkit-scrollbar-track { background: #eee; }
.gallery-scrolling-wrapper::-webkit-scrollbar-thumb { background: var(--primary); }
.gallery-scrolling-wrapper::-webkit-scrollbar-thumb:hover { background: #333; }


/**************  MODAL  ****************************************************/
.modal { display: none;  position: fixed; z-index: 4; left: 0; top: 0; width: 100%; height: 100%; overflow: auto;  background-color: rgba(0,0,0,0.4); padding: 10vh 4%;text-align: left;}
.modal-container {position: relative;max-width: 800px;margin: auto;background-color: var(--white);padding: 40px 1rem;color: var(--black);border-radius: 10px;box-shadow: 2px 2px 10px var(--shadow);}
.modal-title {     font-size: 2rem;margin: 1rem 0 1.5rem;font-weight: normal;text-transform: capitalize;border-bottom: solid thin var(--primary);display: block;}
.imgcontainer { text-align: left;  margin: 10px 0 10px 0; position: relative; }
.close {position: absolute;right: 0;top: 0;color: var(--white);background-color: var(--grey);padding: 5px 15px;border-radius: 0 10px 0;border: thin solid var(--grey);}
.close:hover { color: var(--primary); background-color:var(--white); cursor: pointer; border: thin solid var(--primary);}
.animate { animation: animatezoom 0.6s }
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

/**************  FORUM  ****************************************************/
.forum-category {font-size: .9rem;margin-inline-start: 1rem;position: relative;}
.forum-category-cases::before {content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2342d3b9' d='M5 7h13v10H2V4h7l2 2H4v9h1z'/%3E%3C/svg%3E");display:inline-block; width:1rem;height:1rem;margin-inline-end: .5rem;}

.forum-member-wrapper {
    display: flex;
    gap: 1rem;
}
.forum-member-image {
    width: 50px;    height: 50px;    min-width: 50px;
}
.forum-member-details, .forum-response-title {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    flex: 1 1 auto;
        font-size: .9rem;
    color: var(--shadow);
}
.forum-member-name, .forum-response-user { font-size:1rem;font-weight:bold;color:var(--black);}
.forum-content {
    margin-left: 66px;
}
.forum-response-content, .forum-response-reply-wrapper {
    margin-left: 2rem;
}
.forum-action {
    display: flex;
    gap: 1rem;
    align-items: center;
}
.forum-a-btn {
    line-height: 1;
    padding: .25em .5em;
    background-color: var(--shadow);
    color: var(--white);
    text-decoration: none;
    border: thin solid var(--shadow);
}
.forum-a-btn:hover {color: var(--primary);background-color: var(--white);border: thin solid var(--primary);}

.cms_add_favorites {
    line-height: .9;
}
.added_to_favorites .cms_add_favorites_trigger path {
    fill: var(--primary);
}

.cms_add_favorites_trigger path {
    fill: var(--shadow);
}

.form-response-bottom {
    display: flex;
    gap: .75rem;
    justify-content: flex-end;
}
.forum-item-wrapper {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding-block: .75rem;
    border-bottom: thin solid var(--shadow);
}
.forum-item-detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-basis: 100%;
    flex-wrap: wrap;
}
.forum-item-wrapper h2 {
    margin-block: 0;
    font-size: 1.3rem;
    border: none;
    text-wrap: pretty;
}
.forum-item-wrapper a {
    text-decoration: none;
}
.forum-post-date, .forum-response-date {
    margin-left: auto;
    font-size: .8rem;
}
@media (max-width: 500px) {
    .forum-member-image {display:none;}
}