@font-face { font-family: 'Lalezar';  font-style: normal; font-weight: 400; src: local('Lalezar Regular'), local('Lalezar-Regular'), url('/assets/Lalezar-Regular.ttf');font-display: swap;}

:root {
    --dark-red: #860000;
    --action: #b40000;
    --light-green: #42d3b9;
    --shadow: #868585; 
    --grey: #414141;
    --orange: #DF8816;
    --off-white: #f0f0f0;
    --white: #ffffff;
    --black: #000000;
}
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth;}
main {  display: block; }
h1 { font-size: 3.5rem;text-transform: uppercase;margin: 0;padding: 0;font-family: Lalezar, Helvetica, Arial, sans-serif;}
.print-heading { display:none;}
h2, .h2{ font-size: 2rem; margin: 1.2em 0 0.7em;text-transform: capitalize;border-bottom: solid thin var(--dark-red);font-family: Lalezar, Helvetica, Arial, sans-serif; }
@media(max-width: 600px) {
    h1 { font-size: 2.25rem;} 
    h2 { font-size: 1.5rem;}
}
h3, .h3{ font-size: 1.5rem; margin: 0.67em 0 0;font-weight: bold;text-transform: capitalize;font-family: Lalezar, Helvetica, Arial, sans-serif;color:var(--dark-red);}
hr {  box-sizing: content-box; height: 0;  overflow: visible; border: 0;height: 1px; background: #333;background-image: linear-gradient(to right, #ccc, #333, #ccc);}
pre { font-size: .9rem;width: 90%;margin: auto;color: black;}
img { max-width:100%; height:auto; display: block; }
button, input, optgroup, select, textarea { font-family: inherit; font-size: inherit; border:none; }
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; }
[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;}  

/**************  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: system-ui, sans-serif;color:var(--black);} 
.content-container { width:96%; max-width: 1280px; margin: auto; }
@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; }
.disclaimer {font-size: .8em;}
a:hover, a:active {color:var(--black);text-decoration:none;}
/*a:visited {color:var(--grey);}*/
a { background-color: transparent; color:var(--action);}
* { 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%;}

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

/**************  SYSTEM ERROR PAGE  ****************************************************/
.system_page {padding:60px 10px; text-align:center;}
.system_svg {width:45px;height:45px;margin:0 auto 35px;display:block}
.system_error {text-align: center;margin-top: 0;font-size: 2rem;}

/**************  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) {
	.grid4-2-1, .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%;}
    
	.grid3-2-1, .grid2-1 {flex-basis: calc(100% - 11px);}
}
@media screen and (max-width: 600px) {
    img {max-width:100%; height:auto;}
    .grid4-2-1 {flex-basis:100%;}
	.grid5-3-1{flex-basis: calc(50% - 11px); }
}

/**************  HEADER  ****************************************************/
header {background: var(--black);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(--white); 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{background: var(--dark-red);}
.highlight a { background-color:var(--green);}
.nav-hide {display:none!important;}
.main ul { margin: 0; padding: 0; list-style-type: none; position: relative;}
.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(--white);transition: margin .3s ease-in-out;background: inherit;margin:auto;}
.main ul li a:hover, .main ul li button:hover { background: var(--action); -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(--grey);box-shadow: 2px 2px 5px var(--shadow);} 
.main ul ul li { display: block;  }
.main ul ul li a { color: var(--white);}
.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: 1070px) {
    .scroll-img { height: 80px!important;}
}
@media(min-width: 600px) and (max-width: 1070px) {
    .scroll-img { height: 60px!important;}
}
@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;} 
.image-wrapper img { width: 100%; height: 100%; object-fit: cover;filter: brightness(0.5); }
.image-wrapper h1 { font-size: 3.5rem; text-transform: uppercase;text-align: center;position: absolute;top: 50%;left: 50%;width: 90%;margin: 0;transform: translate(-50%, -50%);padding: 0;color: var(--off-white);line-height: 1;}
.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(--dark-red);width:55%;}
blockquote::before {font-family: auto;content: "\201C";color: var(--dark-red);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  ****************************************************/
.a-btn, button[type=submit], input[type=submit]   {padding: 10px 30px;cursor: pointer;text-decoration: none;background: var(--action);color: var(--white);border-radius: 50px;font-weight: bold;display: inline-block;margin: 5px 10px;border: 2px solid var(--white);}
.report-list a {display: inline-block;background: var(--action);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);}
.a-btn:hover, button[type=submit]:hover, input[type=submit]:hover, .report-list a:hover {background-color: var(--white);text-decoration: none;color: var(--action);border: 2px solid var(--action);}
.a-btn:focus, button[type=submit]:focus, input[type=submit]:focus, .report-list a:focus {background-color: var(--black);color: var(--white);border: none;}
.a-btn:visited {color:var(--white);}
.a-btn:hover:visited {color:var(--action);}
input[type=submit]:disabled {opacity: .2;}
.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;}
.c-btn {padding: 12px 30px;cursor: pointer;text-decoration: none;background: var(--orange);color: #000000;border-radius: 5px;display: block;height: 54px;border: 2px solid var(--orange);    font-weight: bold;}
.c-btn:hover {background-color: var(--white);text-decoration: none;color: var(--orange);border: 2px solid var(--orange);}
.e-btn:hover {background-color: var(--white);text-decoration: none;color: var(--action);border: 1px solid var(--action);}

.ci-btn {display: block;
    background: var(--orange);
    border-radius: 50px;width: 40px;
    height: 40px;}
.ci-btn svg {color:#000000;}
.edi-btn {display: inline-block;
    background: var(--action);
    border-radius: 50px;}
.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(--dark-red);
    color: var(--white);
    border: 2px solid var(--white);
}
#topbutton {display: none; position: fixed; bottom: 9px;right: -27px;z-index: 1;padding: 15px 30px 15px 20px;cursor: pointer;text-decoration: none;background: var(--dark-red);color: var(--white);border-radius: 7px;font-weight: bold;margin: 5px 10px;border: 2px solid var(--white);} 
#topbutton:hover {background-color: var(--white);text-decoration: none;color: var(--action);border: 2px solid var(--action);}

/**************  MAIN PAGE  ****************************************************/
article {margin:30px auto;min-height: 65vh;; }
.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:nth-child(odd) {background-color:#ffd097; color:#000000;}
    .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;}

@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;}
@media screen and (max-width: 600px) {
    .image-right {float:none; margin:10px 0;max-width: 100%;height: auto;}
}


/**************  TABLE  ****************************************************/
.tb-responsive {overflow-x: auto;}
table {border-collapse: collapse;width: 100%;font-size: .9rem;}
table a {text-decoration:none;}
th { text-align: left; padding: 8px; text-transform: uppercase; background-color: var(--black); color: var(--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;}
.td-center {text-align:center;}
.td-action {min-width: 100px;text-align: right;}

#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;}


/**************  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;}
@media(max-width: 600px) {
    .meeting-grid { display: flex; gap:10px;}
}
/**************  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;} 
}    

.teal-btn, .regular {background:#00ccb3;color:#ffffff;}
.green-btn, .affiliate {background:#C4CB23;color:#ffffff;}
.blue-btn, .candidate {background:#5CB8EB;color:#ffffff;}
.orange-btn, .active {background:#F2B914;color:#ffffff;}
.gold-btn, .retired {background:#B9A85A;color:#ffffff;}
.dark-btn, .guest {background:var(--black);color:#ffffff;}

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



/**************  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: fit-content;}
.directory-name-wrapper {display: flex;align-items: center;gap: 20px;}
.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-status {margin: 0;text-transform: uppercase;}
.directory-title {font-weight: bold;margin: 0;text-transform: uppercase;}
.directory-text {margin: 2px 0 5px 10px;}
.directory-item a {text-decoration:none;}
@media screen and (max-width: 500px) {
    .directory-name {white-space: normal;}
}
.progress-title {display: flex;align-items: center;margin: 20px 10px 10px;}
.progress-title.highlight .progress-text {font-weight: bold;color: var(--action);}
.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(--action);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(--orange);}
.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(--orange);}
.highlight-details {border-left: solid 3px var(--action);}
.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 {display: flex;gap: 20px;}
.member-body-content {width: calc(100% - 320px);}
.member-body-details {width: 300px;}
.member-details-sticky {position: sticky;top: 130px;}
.member-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 {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;}
    .member-body-content, .member-body-details {width:100%;}
}
/**************  FOOTER  ****************************************************/
footer { padding: 10px 0 50px 0; color: var(--white); background-color: var(--black);text-align:center; }
footer p { margin-left: 2%; }
footer a {color:var(--white);text-decoration:none;}
footer a:hover {color:#ff6262;}
footer .h2 {color:var(--off-white);text-transform: uppercase;
    border-bottom: solid thin #ff6262;}
.social-icons {display: flex;column-gap: 20px;margin: 0 2%;justify-content: center;}
.social-round {border-radius: 50%;}
.social-icon {width: 30px;height: auto;}
.copyright { text-align:center; font-size: .8em; padding:20px 0 10px 0; }
@media (max-width: 500px) {
    .social-icons { justify-content: center;}
    footer {text-align:center; }
}

/**************  BREADCRUMBS  ****************************************************/
.breadcrumbs {list-style: none; display: flex; text-transform: capitalize;}
.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;}

/**************  PAGINATION  ****************************************************/
.pagination {margin: 10px;text-align: center;}
.pagination ul { padding: 0;}
.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(--action);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: 75%;box-shadow: 2px 2px 5px var(--shadow);display: flex;align-items: center;}
div:last-child .alert-wrapper {margin-bottom:30px;}
.alert-wrapper img {width:35px;height:35px;margin:5px 20px;}
.alert-wrapper span {padding:10px;}
.alert-information {background: #639fe957;border: solid thin #639fe9fc;}
.alert-important {background: #e9b76145;border: solid thin #e9b761}
.alert-urgent {background: #e9606c4a;border: solid thin #e9606c;}

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

form {margin-inline: auto;max-width: 800px;padding-block: 1rem;}

.form-flex {display: flex;column-gap: 2rem;flex-wrap: wrap;}
.form-flex > div {flex: 1 1 0;}
.form-flex-sz {display: flex;column-gap: 1rem;}
.form-flex-sz > div {flex: 1 1 0;}
@media only screen and (max-width: 700px) {
.form-flex {display: block;}
}

label:has(+ input:required):after, label:has(+ textarea:required):after, label:has(+ select:required):after, .check-list legend:has(~ div > input:required):after {content: ' *';color: red;}

input[type=text], input[type=password], input[type=email], input[type=tel], textarea { width: calc(100% - 10px);padding: 10px;margin: 2px 0 20px 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);
}
textarea { overflow: auto; height: 250px;}
select { width: calc(100% - 10px);padding: 10px;margin: 2px 0 20px 10px;border: none;border-bottom: thin solid var(--dark-red);-webkit-appearance: none;transition: border-color .5s ease-out; background: var(--off-white);color: var(--black);
}
input[type=datetime-local], input[type=date], input[type=time], input[type=number]  {width:auto; padding: 10px; margin: 2px 0 20px 10px; border: none;border-bottom: thin solid var(--dark-red); -webkit-appearance: none; transition: border-color .5s ease-out;background: var(--off-white);color: var(--black);}
input[type=file]  {width:calc(100% - 10px); padding: 7px 10px; margin: 2px 0 20px 10px; border: none;border-bottom: thin solid var(--dark-red); -webkit-appearance: none; transition: border-color .5s ease-out;background: var(--off-white);color: var(--black);}
.tiny-body {padding:10px 1%;}
.tox { margin: 2px 0 20px 10px; width: calc(100% - 10px);}
.form-note {padding-left:20px; font-size: .8rem; color: #ff0000;}
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;
}

.required {font-size: .8em; color: #ff0000; font-weight: bold;}
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;}
input:focus, textarea:focus, select:focus { outline:none; border-bottom: solid 3px #000000;}

.search-bar {display:flex;justify-content:space-between;margin: 30px auto 30px;/*flex-wrap: wrap;*/gap: 10px;}

#form-search {display:flex;width: calc(100% - 70px);margin: 0;max-width: 100%;padding: 0;flex-wrap: wrap;gap: 10px;justify-content: center;}
#form-search label {display:none;}
#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;height: 54px;border: thin solid var(--shadow);margin: 0;}
.advanced-search-group {display: flex;gap: 20px;flex-wrap: wrap;justify-content: center;}

#form-search input[type=text] { width:auto;padding: 10px;margin: 0;border: thin solid var(--shadow);border-bottom: thin solid var(--shadow);background: #ffffff;font-size: 1.2rem;height: 54px;}
#form-search select { width:auto;padding: 10px;margin: 0;border: thin solid var(--shadow);border-bottom: thin solid var(--shadow);background: #ffffff;font-size: 1.2rem;height: 54px;}
.name-search {min-width:300px;}
#form-search a {display: block;padding: 13px 10px;text-decoration: none;}
#form-search input[type="submit"] {border-radius: 5px;height: 54px;margin: 0;border: 2px solid var(--dark-red);}
.search-bar-action {display: inline-flex;}
#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 {text-align: right;margin: -10px 0 5px 0;line-height: 1rem;}
.create-bar img {max-width: 40px;}
empty-message {font-size:1.5rem;margin-left:4%;}

#form-delete {display:inline;padding: 0;}
/*#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(--action);border: 1px solid var(--action);}*/
#form-delete input {background: var(--grey);border-radius: 50px;display: inline-block;margin:0;}
#form-delete input:hover {filter: opacity(0.5);}

#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 {height: auto;background: white;}
#progress_button_add {background: var(--orange);font-size: .9rem;padding: 5px;border-radius: 5px;margin: 10px 10px 10px auto;display: block;border: 1px solid var(--orange);}
#progress_button_add:hover {background: var(--white);color: var(--orange);}

.form-section {padding: 10px;box-shadow: 2px 2px 5px var(--shadow);}
.form-gg {display: flex;flex-wrap: wrap;column-gap:40px;}
.form-g2-1 {flex-grow: 1;width: calc(50% - 20px);}
@media screen and (max-width: 700px) {
   .form-g2-1 {flex-grow: 1;width: 100%;} 
}

/**************  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-title a {color: #ffffff;text-decoration: none;width: 100%;display: block;text-align: center;background: var(--action);padding: 10px;}
.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(--action); }
.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 2% 20px;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(--dark-red);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;}
.close:hover, .close:focus { color: var(--white); background-color:var(--black); cursor: pointer; }
.animate { animation: animatezoom 0.6s }
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}