* {
    box-sizing: border-box;
    
}

.header    { 
    margin: 0;   
    max-width: 100%;
    height: 100px; 
    padding-top: 0px;
    background-color:#f6faf6;
    text-align: center;
    line-height: 30px; 
    align-items: normal;
    justify-content: normal;
}
@media screen and (max-width: 768px) {
    .header {
        height: auto;
    }
}
.navbar {  
    margin: 0;  
    max-width: 100%; 
    padding-top: 10px;   
    height: 25px;
    background-color:#f6faf6;
    color: #f6faf6;
    text-align: center;
    align-content: center; 
    justify-content: center;    
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 10px;
    padding-bottom: 10px; 
}
@media screen and (max-width: 768px) {
    .navbar {
        flex-direction: column;
        font-size: 18px;
        row-gap: normal;
        height: auto;
    }
}
.title  { 
    margin:0;  
    display: block; 
    box-sizing: border-box;
    max-width: 100%; 
    background-color: #e7f5e8;
    font-style: normal; 
    font-family: Arial, sans-serif;
    font-size: 14px; 
    text-align: center;   
    align-content: center;    
    height: 50px; 
}
@media screen and (max-width: 768px) {
    .title {
        height: auto; 
        font-size: 12px;
        max-width: 100%;         
    }
}
.title > strong {font-size: 12px;}

.content  {  
    margin: 0;  
    display: block;
    width: 100%;
    box-sizing: border-box;
    background-color: #e7f5e8;
    height: auto;
    padding: 20px, 0;        
}
@media screen and (max-width: 768px) {
    .content {
        height: auto; 
    }
}
.content > div {
    padding: 0.25rem 0.25rem 0.25rem 0.25rem;
}

.footer   {
    margin: 0;    
    width: 100%;      
    height: 20px;  
    background-color:#f3dbdb;
    text-align: center;
    position: fixed;
    bottom: 0;
    align-items: center;
    justify-content: normal;
    box-sizing: border-box;
    z-index: 50;
    font-size: 11px;
} 
@media screen and (max-width: 768px) {
    .footer {
        height: auto; 
        font-size: 10px;
    }
}

.logo {
    font-size: 22px;
    display: inline-flex;
    align-items: center;
}
        
.sublogo {
    display: block;
    width: 100%;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;           
}

.sublogo p {
    margin: 0; 
}

.navbar a {
    margin: auto; 
    text-align: center;
    justify-content: center;
    text-decoration: none;   
    color: #377ba9;
    font-weight: bold;  
    padding-top: 5px;
}
.navbar a:hover  {
    background-color: #0652f634;
    color: blueviolet;
}

.menudiv {
    padding-right: 10px;
    border-right: 2px solid #377ba9;
    background-color: #f6faf6;
    text-align: center;
    align-content: center; 
    justify-content: center;
    white-space: nowrap;
    flex: 0 0 auto;
    font-size: 14px;
}
.menudiv:last-child {
    border-right: none;
}
@media screen and (max-width: 768px) {
  .menudiv {
    padding: 8px 10px;
    font-size: 12px;
    border: none;
  }
}

.subtitle  {
    background-color: #e7f5e87a;
    font-style: normal; 
    font-family: Arial, sans-serif;
    font-size: 14px;
    text-align: center;   
    align-content: center; 
    width: 100%; 
    height: 10px; 
}

@media screen and (max-width: 768px) {
    .subtitle {
        height: auto; 
        font-size: 12px;
        strong {font-size: 14px;} 
    }
}
.subtitle > strong {font-size: 12x; }

.subtitle.parent  {
    display: flex;
    flex-direction: row;
    height: 20px;
    align-items: center;    
    justify-content: center;
}
.subtitle.child  {
    width: 40%; 
    text-align: center;   
    align-content: center; 
    height: auto; 
    align-items: center;    
    justify-content: center; 
    margin-bottom: 5px;
}

          
* {
    margin: auto;
    padding: 0;
    box-sizing: border-box;
} 

html, body {
    font-family: Arial, sans-serif;
    min-height: 100%; 
    overflow-y: visible; 
    background: #f9f9f9;
    margin: 0; 
    padding: 0;
    height: 100%; 
} 

pre {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 10px; 
    border-radius: 5px;
    overflow-x: auto; 
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.blinking-eye {
    animation: blink 2.0s infinite;
}  

.eye-hover:hover {
    color: #ff0077;
    transform: scale(1.2);
    transition: transform 0.3s ease, color 0.3s ease;
}

.letter {
    color: rgb(13, 166, 226);
    font-weight: bold;
    font-family: Arial, sans-serif;            
    padding: 0;
    margin: 0;
    
}
.letter.country {
    color: rgb(75, 29, 29);
}     
                
.one-eye-container {
    display: flex; 
    margin-left: -0.05em;
    margin-right: -0.05em;  
    transform: translateY(0.1em);
}               
.one-eye {
    width: 1.25em;
    height: 2em;
    display: block;
}        
#one_eye { 
    animation: blinky 1s infinite;
}
@keyframes blinky {
    0%   { transform: scale(1.5);}
    25%  { transform: scale(1.75);}
    50%  { transform: scale(2.0);}
    75%  { transform: scale(1.75);}
    100% { transform: scale(1.5);}
}
@keyframes pupil-fade {
    0%    { opacity: 1; }
    0.1%  { opacity: 0.75; } 
    50%   { opacity: 0.5; }
    100%  { opacity: 1; }
}
#one_eye #eye-pupil {
    animation: pupil-fade 1s infinite;
}

#messageContainer {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

.message-box {
    padding: 12px 20px;
    margin-bottom: 10px;
    border-radius: 4px;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.message-box.success { background-color: #28a745; }
.message-box.error { background-color: #dc3545; }
.message-box.info { background-color: #17a2b8; }
.message-box.warning { background-color: #ffc107; color: #212529; }


.is-invalid {
border: 2px solid #dc3545 !important;
background-color: #fff8f8;
}
/* Optional: shake animation to grab attention */
@keyframes shake {
0% { transform: translateX(0); }
25% { transform: translateX(-5px); }
50% { transform: translateX(5px); }
75% { transform: translateX(-5px); }
100% { transform: translateX(0); }
}
.is-invalid {
animation: shake 0.2s ease-in-out 0s 2;
}

 
.container  { 
    width: 99.9%;
    height: 100%;
    box-sizing: border-box;

}
@media screen and (max-width: 768px) {
    .container {
        flex-direction: column;
        height: auto; /* Adjust height for smaller screens */
    }
}

.all-posts{
    padding: 20px, 0;
}
button, a, .clickable {
  cursor: pointer;
  pointer-events: auto; 
}


h1, h2 {    
    font-family: 'Arial, sans-serif';
    color: #0697f8;
    margin: 0;
}


p.subtitle {
    font-size: 16px;
    font-family: 'Roboto';      
    padding-bottom: 12px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 12px;
    text-align: center;
    border: none;
}  

p.sublogo{
    text-align: center;
    font-size: 8px;
}

p {
    font-size: 14px;
    font-family: 'Roboto';     
    padding-bottom: 2px; 
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 4px;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    word-spacing: 0.05em;
    letter-spacing: 0.01em;
}   

p.top {
    padding-top: 2px; 
}

li {
    font-size: 14px;
    font-family: 'Roboto';   
    margin-left: 40px;
    margin-right: 40px;
    margin-bottom: 8px;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    word-spacing: 0.05em;
    letter-spacing: 0.01em;
}
li.a, p.a {
    color: #01410c;
}
li.b, p.b {
    color: #010641;
}


span.Logo { 
    font-size: 24px;  
    font-style: italic;    
}
span b{
    font-size: 18px;
    color: black;
    font-family: inherit;
    font-style: italic;
}
span.sublogo {
    display: flex;
    font-size:14px;
    line-height: 16px; color: rgb(75, 29, 29);
    font-family: Arial, Helvetica, sans-serif;  
    font-style: italic;          
}

span.sublogo_two {
    display: flex;
    font-size:12px;
    line-height: 16px; color: rgb(75, 29, 29);
    font-family: Arial, Helvetica, sans-serif;  
    font-style: italic;
    white-space: pre;          
}

.underline {
  text-decoration: underline;
}

.contents {
    width: 100%;
    height: 95%;
}

@media screen and (max-width: 768px) {
    .contents {
        flex-direction: column;
        height: auto; 
    }
}

.form_header {
    width: 100%;
    height: 25px;
    text-align: center;
    align-content: center;
}
.form_parent {
    width: 100%;
    height: 100%;
}
.form_entity, .button_entity  {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;    
    width: 500px;
    height: 45px;
    margin: auto; 
    
}
.form_label{ 
    display: flex;     
    width: 200px;
    height: 45px;
    align-items: center;
    justify-content: flex-end; 
    padding-right: 5px;
    text-align: right;
    font-size: 20px;    
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #f9f9f9; 
    font-family: monospace;
    white-space: pre-wrap; 
    gap: 15px;  
}
.form_label.radio  {
    display: flex;
    flex-direction: row;  
    justify-content: flex-start;
}

.form_data  { 
    display: block;       
    width: 300px;
    height: 45px;    
    text-align: left;
    font-size: 20px; 
    align-items: left; 
}

.radiofield {  
    margin: 0px,5px, 0px, 0px;;
    width: 20%;
    height: 16px;
    font-size: 30px;    
}

.form_data.radio  {
    display: flex;
    flex-direction: row;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #f9f9f9;
    align-items: center;  
    justify-content: flex-start; 
    font-family: monospace;
    white-space: pre-wrap; 
    gap: 10px;  
}


.form_data.radio > span {
    display: flex;
    align-items: center; 
    height: 100%;
}

.radio-label-inline {
    font-family: monospace; 
    font-size: 20px;
    margin-right: 5px; 
}
    
.left_data  {  
    width : min(70%, 1000px);
    position: relative;
}

.right_data  { 
    width : min(70%, 1000px);
    position: relative;
}
.left_button  { 
    float: right;
    width: min(70%, 1000px);
    height: 45px;
    font-size: 20px;
    background-color: #ceeaf4;
    border: 2px solid; 
    border-radius: 10px;
    cursor: pointer;
    vertical-align: middle;
}
.right_button  { 
    float: left;
    width: min(70%, 1000px);
    height: 45px;
    font-size: 20px;
    background-color: #d9d9da;
    border: 2px solid; 
    border-radius: 10px;
    cursor: pointer;
    vertical-align: middle;
}
.left_button:focus, .right_button:focus {
    background-color: #f0eee8;
} 
 
input[button] { 
    font-size: 14px; 
}

input:focus {
  outline: none;
  border-left: 2px solid #007BFF; 
  animation: pulse 1s infinite;
  background-color: #eff5f0;
}

@keyframes pulse {
  0% { border-left-color: #007BFF; }
  50% { border-left-color: transparent; }
  100% { border-left-color: #007BFF; }
}

input[type="date"] {
  font-size: 18px;
  padding: 8px;
}

.modal_overlay_original {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100dvh; 
    background: rgba(250, 245, 245, 0.5); 
    pointer-events: auto;
    z-index: 9998;
    display: none;
    display: flex;         
    justify-content: center;
    align-items: center;     
}


.modal_overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100vh; 
    display: flex; 
    justify-content: center; 
    align-items: center;
    background: rgba(0,0,0,0.4);
    padding: 20px; 
    box-sizing: border-box; 
    overflow-y: auto; 
    z-index: 9999;     
}


@media screen and (max-width: 768px) {     
    .modal_overlay { 
        align-items: flex-start; 
        padding-top: 40px; 
    } 
}

.error-container {
    width: 90%;
    height: 50px;
    box-sizing: border-box;
    background-color: #ffebee; 
    color: #c62828;
    text-align: center;
    align-content: center; 
}

.show {
    display: block;
}
.hide { 
    display: none; 
}

.hidden {
    display: none !important;
}

.visible { 
    display: block;
}

.button.disabled {
  opacity: 0.75;         
  cursor: not-allowed;  
}

.frontpage_parent {
    display: flex;
    width: 100%;
    margin : 0 auto; 
    height: 100%;       
    align-items: center;
    flex-direction: column;
}


@media screen and (max-width: 768px) {
    .frontpage_parent {
        width: 100%;
        margin : 0 auto;  
        height: 100%;       
        align-items: center;
    }
}
.frontpage_modal_overlay {    
    margin : 0 auto; 
    width: 80%;
    height: auto; 
    max-height: 40%; 
    background: #b6e1f080; 
    pointer-events: auto;
    display: block; 
    padding-top: 25px;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 50px; 
    
    
}

@media screen and (max-width: 768px) {
    .frontpage_modal_overlay {
        display: flex;
        width: 100%;
        margin : 0 auto;  
        height: auto; 
        align-items: center;
    }
}

.frontpage_modal_content {  
  border: 1px solid #ccc;
  padding: 0px;
  margin: 5px auto;
  width: 100%; 
  height: 100%;
  box-shadow: inset 2px 2px 5px #ffffff, inset -2px -2px 5px #d1d1d1;
  border-radius: 12px;
  color: #333;
  opacity: 1;
  overflow-y: auto;
}

@media screen and (max-width: 768px) {
    .frontpage_modal_content {
        width: 100%;
        margin : 0 auto; 
        height: auto;     
        align-items: center;
        font-size: 12px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear,
input[type="password"]::-webkit-textfield-decoration-container,
input[type="password"]::-webkit-credentials-auto-fill-button,
input[type="password"]::-webkit-password-toggle {
    display: none !important;
    visibility: hidden !important;
}

.password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-field {
    width: 100%;
    padding-right: 50px;
}

.password-toggle {
    position: absolute;
    right: 10px;
    cursor: pointer;
    font-size: 0.8rem;
    color: #007bff;
    user-select: none;
    font-weight: bold;
}

.password-toggle:hover {
    text-decoration: underline;
}

.submit_button_spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 0.8s linear infinite;
    margin-right: 8px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.frontpage_maps_echelon  {    
    display: flex;    
    width: 80%; 
    max-height: 50%; 
    margin : 0 auto;  
    padding: 0;
    font-family: sans_serif;
}

@media screen and (max-width: 768px) {
    .frontpage_maps_echelon {
        display: flex;
        width: 100%;
        margin : 0 auto; 
        height: auto; 
        align-items: center;
    }
}

#frontpage_maps_entity {
    display: flex;
    width: 100%; 
    height: 400px; 
    margin: auto;
}

@media screen and (max-width: 768px) {
    #frontpage_maps_entity {
        display: flex;
        width: 100%;
        height: 300px;
        max-height: 100%;
        align-items: center;
        margin: 0 auto; 
    }
}

.frontpage_formsContainer{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto; 
    background: #f4e8f880;
}

.frontpage_login_data_holder  {
    position: absolute;       
    max-width: 450px; 
    height:  200px; 
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    border:#f9e508 5px solid;
    background-color: #b4b3b3; 
    z-index: 9999;    
    display: none;
    animation: login_slideUp 0.5s ease-out forwards;
    pointer-events: auto;
    row-gap: 10px;
}

@media screen and (max-width: 768px) {
    .frontpage_login_data_holder {
        display: flex;
        max-width: 100%;
        margin: 0 auto;
        height: 200px;
        align-items: center;
        top: 45%;
    }
}

@keyframes login_slideUp {
  from { 
  }
  to {
  }
}

.frontpage_login_form_header  {    
    width: 440px;
    height: 30px; 
    font-size: 16px;
    text-align: center;
    align-content: center;  
    line-height: 30px;
    background-color: #b4b3b3;
    cursor: move;      
}

@media screen and (max-width: 768px) {
    .frontpage_login_form_header {
        display: flex;
        max-width: 100%;
        margin: 0 auto;
        align-items: center;
    }
}

.frontpage_login_form_holder {  
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%; 
    max-width: 450px; 
    height: auto;  
    max-height: 200px;
}

@media screen and (max-width: 768px) {
    .frontpage_login_form_holder {
        display: flex;
        max-width: 100%;
        margin: 0 auto;
        align-items: center;
    }
}

.frontpage_login_label {
    display: flex; 
    width: 70%;     
    height: 45px;    
    background-color: #f1f6fa;
    justify-content: center;
    align-content: center;    
    text-align: center;
    outline:auto;
    outline-color:#709dbd;    
    font-size: 14px; 
}

@media screen and (max-width: 768px) {
    .frontpage_login_label {
        display: flex;
        max-width: 100%;
        margin: 0 auto;
        align-items: center;
    }
}

.frontpage_login_label.active-filter {
    background-color: green;
    color: white;
}

.frontpage_login.A {
    background-color: #d5f1c3;
}

.frontpage_login.B {
    background-color: #b6d6fa;
}

.frontpage_login.label.A {
    background-color: #e9ebdd;
}
.frontpage_login_label.A.active-filter {
    background-color: green;
    color: white;
}

.frontpage_login_data_wrapper { 
    display: flex;
    flex-direction: row;    
    flex-wrap: nowrap;
    width: 100%; 
    margin: auto;
    height: 45px;      
}

@media screen and (max-width: 768px) {
    .frontpage_login_data_wrapper {
        width: 100%;
        height: auto;        
        word-wrap: break-word; 
        font-size: 14px;
        overflow-wrap: break-word; 
        white-space: normal; 
        overflow-x: auto;
    }
}


.frontpage_login {
    display: block; 
    width: 100%; 
    height: 45px;    
    text-align: left;
    font-size: 14px;  
    align-items: left;  
    cursor: text; 
    background-color: #d3fed9;
    outline:auto;
    outline-color:#374a58;
}

@media screen and (max-width: 768px) {
    .frontpage_login {
        width: 100%;
        height: 45px;        
        word-wrap: break-word; 
        font-size: 14px;
        overflow-wrap: break-word; 
        white-space: normal; 
        background-color: #d3fed9;
    }
}

.frontpage_login.password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.frontpage_login.password-field {
    width: 100%;
    padding-right: 50px; 
} 

.frontpage_login_control_buttons_entity   { 
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    max-width: 450px;
    height: 50px;
    padding-top: 10px;
    gap: 5px;
    /*border: 3px solid rgb(9, 255, 0);  */  
}

@media screen and (max-width: 768px) {
    .frontpage_login_control_buttons_entity {
        display: flex;
        flex-direction: row;
        height: auto; 
        width: 100%;
        gap: 5px;
    }
}


.frontpage_signup_data_holder {
    position: absolute;    
    max-width: 450px;  
    height:  300px; 
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    border:#f9e508 5px solid;
    background-color: #b4b3b3; 
    z-index: 10000;    
    display: none;
    pointer-events: auto;
    row-gap: 10px;
}

@media screen and (max-width: 768px) {
    .frontpage_signup_data_holder {
        display: flex;
        max-width: 100%;
        margin: 0 auto;
        height: 260px; 
        align-items: center;
        top: 45%;
    }
}


.frontpage_signup_form_header  {    
    width: 440px;
    height: 30px; 
    font-size: 16px;
    text-align: center;
    align-content: center; 
    line-height: 30px;
    background-color: #b4b3b3;
    cursor: move;      
}

@media screen and (max-width: 768px) {
    .frontpage_signup_form_header {
        display: flex;
        max-width: 100%;
        margin: 0 auto;
        align-items: center;
    }
}

.frontpage_signup_form_holder {     
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%; 
    max-width: 450px; 
    height: auto; 
    max-height: 300px;  
}

@media screen and (max-width: 768px) {
    .frontpage_signup_form_holder {
        display: flex;
        max-width: 100%;
        margin: 0 auto;
        align-items: center;
    }
}

.frontpage_signup_data_wrapper {
    display: flex;
    flex-direction: row;    
    flex-wrap: nowrap;
    width: 100%; /* formerly, width: 500px; */ 
    margin: auto; 
    height: 45px;      
}
.frontpage_signup_data_wrapper.B{
    display: none;
}

@media screen and (max-width: 768px) {
    .frontpage_signup_data_wrapper {
        width: 100%;
        height: auto;        
        word-wrap: break-word; 
        font-size: 14px;
        overflow-wrap: break-word; 
        white-space: normal; 
        overflow-x: auto;
    }
}
.frontpage_signup {
    display: block;
    width: 100%; 
    height: 45px;   
    text-align: left;
    font-size: 14px; 
    align-items: left;  
    cursor: text; 
    background-color: #a7c8f0;
    outline:auto;
    outline-color:#374a58;
}

@media screen and (max-width: 768px) {
    .frontpage_signup {
        width: 100%;
        height: 45px;        
        word-wrap: break-word; 
        font-size: 14px;
        overflow-wrap: break-word; 
        white-space: normal; 
        background-color: #a7c8f0;
    }
}

.frontpage_signup.password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.frontpage_signup.password-field {
    width: 100%;
    padding-right: 50px; 
} 
.frontpage_signup_label {
    display: flex; 
    width: 70%;  
    height: 45px;
    background-color: #f1f6fa;
    justify-content: center;
    align-content: center;    
    text-align: center;
    outline:auto;
    outline-color:#709dbd;   
    font-size: 14px; 
} 

@media screen and (max-width: 768px) {
    .frontpage_signup_label {
        display: flex;
        max-width: 100%;
        margin: 0 auto;
        align-items: center;
    }
}


.frontpage_signup_label.active-filter {
    background-color: green;
    color: white;
}

.frontpage_signup.A {
    background-color: #d5f1c3;
}

.frontpage_signup.B {
    background-color: #b6d6fa;
}

.frontpage_signup.label.A {
    background-color: #e9ebdd;
}
.frontpage_signup_label.A.active-filter {
    background-color: green;
    color: white;
}
.frontpage_signup_control_buttons_entity   { 
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    max-width: 450px;
    height: 50px;
    gap: 5px;
}

@media screen and (max-width: 768px) {
    .frontpage_signup_control_buttons_entity {
        display: flex;
        flex-direction: row;
        height: auto; 
        width: 100%;
        gap: 5px;
    }
}
.frontpage_biodata_data_holder {
    position: absolute; 
    max-width: 450px;  
    height: 340px;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    border:#f9e508 2px solid;
    background-color: #b4b3b3;
    z-index: 10000; 
    display: block;       
    pointer-events: auto;
    row-gap: 10px;
}

@media screen and (max-width: 768px) {
    .frontpage_biodata_data_holder {
        display: flex;
        max-width: 100%;
        margin: 0 auto;
        height: 340px;
        align-items: center;
        top: 45%;
    }
}

.frontpage_biodata_form_header {   
    width: 440px;
    height: 30px; 
    font-size: 16px;
    text-align: center;
    align-content: center;
    line-height: 30px;
    background-color: #b4b3b3;
    cursor: move;     
}

@media screen and (max-width: 768px) {
    .frontpage_biodata_form_header {
        display: flex;
        max-width: 100%;
        margin: 0 auto;
        align-items: center;
    } 
}
.frontpage_biodata_form_holder { 
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 450px;  /*value swapped with max-width*/
    max-width: 100%; 
    height: auto; 
    max-height: 340px;  
}

@media screen and (max-width: 768px) {
    .frontpage_biodata_form_holder {
        display: flex;
        flex-direction: column;
        /*max-width: 100%;
        margin: 0 auto;*/        
        width: 100%;
        align-items: center;
    }
}

.frontpage_biodata_data_wrapper { 
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;    
    width: 100%; 
    height: 45px;
    margin: 0;  /* removed auto */
}
.biodata_radiofield {   
    margin: 0px, 5px, 0px, 0px;
    width: 20%;
    height: 16px;
    font-size: 14px;    
}
.frontpage_biodata_label.radio  {
    font-family: monospace;
    display: flex;
    flex-direction: row; 
    font-size: 12px; 
    justify-content: center; 
}

[data-search="gendertype"] label {
    font-size: 12px !important;
}

@media screen and (max-width: 768px) {
    .frontpage_biodata_label.radio  {
        display: flex;
        max-width: 100%;
        margin: 0 auto;
        align-items: center;
        font-size: 12px; 
    }
} 

[data-search="gendertype"] label {
    font-size: 12px !important;
}

.biodata-radio-label-inline { 
    font-family: monospace; 
    font-size: 12px;
    margin-right: 5px; 
}


.frontpage_biodata_label { 
    display: flex;     
    width: 150px;
    height: 45px;
    align-items: center;
    justify-content: center; 
    text-align: left;
    font-size: 12px;    
    border: 1px solid #ccc;    
    background-color: #f9f9f9; 
    font-family: monospace;
    flex-wrap: nowrap; 
    gap: 15px; 
    min-width: 0; 
}
.frontpage_biodata  {
    display: flex;       
    width: 300px;  
    height: 45px;    
    text-align: left;
    font-size: 12px;  
    align-items: left; 
    cursor: text;  
    background-color: #f0c550 !important;   
    min-width: 0;
}
@media screen and (max-width: 768px) {
    .frontpage_biodata_data_wrapper {
        display: flex !important;
        flex-direction: row !important; 
        flex-wrap: nowrap !important;
        width: 100% !important;
        height: 45px !important;
        margin: 0 !important;
        padding: 0 !important; 
    }    
    .frontpage_biodata_label {
        display: flex !important;
        flex: 0 0 35% !important; 
        width: 35% !important;
        max-width: 35% !important;
        justify-content: center !important;
        align-items: center !important;
        font-size: 11px !important; 
        box-sizing: border-box !important;
    }

    .frontpage_biodata {
        display: flex !important;
        flex: 0 0 65% !important; 
        width: 65% !important;
        max-width: 65% !important;
        height: 45px !important;
        align-items: center !important;        
        box-sizing: border-box !important;
        border: 1px solid #ccc !important;
        border-left: none !important; 
        background-color: #f0c550 !important;  
        word-wrap: break-word;
    }
}

.frontpage_biodata.radio  {
    display: flex;
    flex-direction: row;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #f9f9f9;
    align-items: center;  
    justify-content: flex-start; 
    font-family: monospace;
    white-space: pre-wrap; 
    gap: 10px;  
}
.frontpage_biodata.radio > span { 
    display: flex;
    align-items: center;
    height: 100%; 
} 

.frontpage_biodata.radio input[type="radio"] {
    width: 16px;
    height: 16px;
}

.frontpage_biodata_control_buttons_entity { 
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;    
    max-width: 450px;
    height: 50px; 
    gap: 5px;
}

@media screen and (max-width: 768px) {
    .frontpage_biodata_control_buttons_entity {
        display: flex;
        flex-direction: row;
        height: auto; 
        width: 100%;
        gap: 5px;
    }
}

.about_panel-header {
    color:#0697f8; 
    text-align: center; 
    font-size: 20px; 
    margin-top: 10px; 
    margin-bottom: 10px;
}
.about_parent {
    position: fixed;
    top: 50;
    left: 50; 
    width: 100%;
    height: 100%;
    background: rgba(250, 245, 245, 0.5); 
    pointer-events: auto;
    z-index: 9998;
    display: block;
}

.about_content {  
  border: 1px solid #ccc;
  padding: 0px;
  margin: 5px auto;
  max-width: 90%;
  max-height: 90%;
  box-shadow: inset 2px 2px 5px #ffffff, inset -2px -2px 5px #d1d1d1;
  border-radius: 12px;
  color: #333;
  opacity: 1;
  overflow-y: auto;
  overflow-x: auto;
} 

 
.location_map_panel-header {
    color:#0697f8; 
    text-align: center; 
    font-size: 12px; 
    margin-top: 10px; 
    margin-bottom: 10px;
}
.form_holder{ 
    display: flex;    
    flex-direction: column; 
    width: 80%; 
    height: auto;
    margin: auto;
    box-sizing: border-box;
    padding: 20px 0;
}
@media screen and (max-width: 768px) {
    .form_holder {
        width: 100%;
        max-height: 65vh; 
        padding: 20px 0;
        border: none;
    }
}

.location_map_echelon_post{    
    display: flex; 
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    height: auto; 
}

@media screen and (max-width: 768px) {
    .location_map_echelon_post {        
        max-width: 100%;
        height: auto;
    }
}

.tab_wrapper  { 
    display: flex;    
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    height: auto;
    padding: 30px, 0; 
}
@media screen and (max-width: 768px) {
    .tab_wrapper {
        display: flex; 
        flex-direction: column;
        height: auto; 
        max-width: 100%;
    }
}
.tab-set  { 
    display: flex; 
    width: 50%;
    flex-direction: column;
    overflow: hidden; 
    height: auto;   
    background-color: #f1f1f1;
    border: 1px solid #ccc;
}
@media screen and (max-width: 768px) {
    .tab-set {
        display: flex;
        flex-direction: column;
        height: auto; 
        width: 100%;
    }
}
.tab-label-1  {
    display: flex;   
    flex-direction: row;
    width: 100%;
    height: 60px;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f7ecec;
}

@media screen and (max-width: 768px) {
    .tab-label-1 {
        display: flex;
        flex-direction: column;
        width: 100%;  
        height: auto;         
    }
}

.tab-label-2  {
    display: flex;  
    flex-direction: row;
    width: 100%;
    height: 60px;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #eff1de;
}

@media screen and (max-width: 768px) {
    .tab-label-2 {
        display: flex;
        flex-direction: column;
        width: 100%;  
        height: auto;
        overflow: hidden;
    }
}

.tab-button   { 
    background-color: inherit;
    width: 33%;
    height: 60px;
    float: left;
    border: 1px solid #ccc;    
    cursor: pointer;
    padding: 0 0;  
    transition: 0.3s;
    font-size: 12px;
}

@media screen and (max-width: 768px) {
    .tab-button {        
        width: 100%; 
        font-size: 11px; 
        height: 60px;    
    }
}
.tab-button[aria-selected="true"]   {
    background-color: #eefac3;
    font-weight: bold;
}
.tab-button:hover   {
    background-color: #cfe3ff;
    font-weight: bold;
}
.tab-button:active  {
    background-color: #ccc;
    font-weight: bold;
}
.tab-button.filled  {
  background-color: #d4edda; 
  border-color: #28a745;
  color: #155724;
}

.tab-content  { 
    display: none; 
    border: 1px solid #ccc;
    background-color: #ebeed5;
    border-top: none;
    width: 100%;
    height: 60px;  
    padding: 0 0;    
}

@media screen and (max-width: 768px) {
    .tab-content  {        
        width: 100%;
        font-size: 11px; 
        height: 60px;    
    }
}
.tab-content.active  {
    display: block;
}
.issue_tab, .location_tab {   
    display: block;
    margin: auto;
    width: 100%;    
    height: 60px; 
    font-size: 12px;
    background-color: #f9f9fc;
    border: 2px solid; 
    border-radius: 10px;
}

@media screen and (max-width: 768px) {
    .issue_tab, .location_tab  {        
        width: 100%;
        font-size: 11px; 
        height: 60px;    
    }
}
.issue_tab.active, .location_tab.active   {
    display: block;
}

input[radio]   { 
    margin: auto;
    width: 33%;
    height: 20px;
    font-size: 12px;   
}

.controls_echelon  /* [location_maps.html] */ {        
    display: flex;    
    flex-direction: row;
    width: 100%; 
    height: 50px;     
    margin : 0;
    padding: 0;
    font-family: sans_serif;
    /*border: 1px solid #f7df0b;*/  /*height: 50px; flex: 5%;*/
}

@media screen and (max-width: 768px) {
    .controls_echelon {
        flex-direction: column;
        height: auto; /* Adjust height for smaller screens */
        padding: 5px;
        row-gap: 10px;
    }
}
#button_resetIssueTabs, #buttonSwitch, #button_resetLocationTabs
 { 
    cursor: pointer;
    vertical-align: middle;
    font-size: 12px;
}
@media screen and (max-width: 768px) {
    #button_resetIssueTabs, #buttonSwitch, #button_resetLocationTabs {           
        font-size: 12px;
        height:50px; 
        width: 150px;    
    }
}

.maps_echelon  {    
    display: flex; 
    flex-direction: column;
    background-color: #e7f5e8;  
    width: 80%;   
    height: 50vh; 
    margin : auto;
    padding: 0;
    
}

@media screen and (max-width: 768px) {
    .maps_echelon {  
       
        height: 600px;
        display: block;     
    }
}

#maps_entity  { 
    width: 100%;    
    height: 100%;
    min-height: 300px; 
} 

@media screen and (max-width: 768px) {
    #maps_entity {  
        height: 100%; 
        width: 100%;         
    }
}

.hint {
    width: 80%;
    font-size: 12px; 
    background-color: #f6faf6;;
    color: #0051ff;
    height: 30px;
    align-items: center;
    align-content: center;
    justify-items: center;
}

@media screen and (max-width: 768px) {
    .hint {
        width: 80%;
        font-size: 12px; 
        color: #0051ff;  
        height: 100%; 
        width: 100%;    
    }
}


.qr_code_container { 
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    margin: auto;
    width: 600px;
    height: 600px;
    border: 1px solid lightgrey;
} 
#qr_code {  
    width: 100%;
    height: 100%;
    display: block;
    border: 1px solid #4CAF50;
}
 
            
.modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex; justify-content: center; align-items: center;
}

.modal-content {
    position: absolute;     
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    width: 50%;
    max-height: 80%;
    overflow-y: auto;
}
.close {
    float: right;
    cursor: pointer;
    font-size: 24px;
}
#subscription-status-container {
    max-width: 800px; 
    margin: 0 auto;
    padding: 0 20px; 
    text-align: left;  
}
@media screen and (max-width: 768px) {
    #subscription-status-container {
        display: flex;
        width: 100%;
        flex-direction: column;
        height: auto; 
        align-items: center;
    }
}
.row_one.status-badge {
    display:flex; 
    flex-direction: row; 
    width: 90%; 
    height: 45%;
}

@media screen and (max-width: 768px) {
    .row_one.status-badge {
        flex-direction: column;
        height: auto; 
    }
}

.row_two {
    display:flex; 
    flex-direction: row; 
    width: 90%; 
    height: 45%; 
    margin-top: 5px;
}

@media screen and (max-width: 768px) {
    .row_two {
        flex-direction: column;
        height: auto; 
    }
}

.subscription-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border-left: 10px solid #0070ba; /* PayPal Blue */
    max-width: 800px;
    margin: 0 auto; 
    padding: 0 10px; 
    text-align: left;  
}

.subscription-card h4 {
    margin-top: 0;
    color: #333;
}

.status-badge {
    background: #e1f5fe;
    color: #01579b;
    padding: 0px 6px; 
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
}

.alert_success  {
    margin: auto;
    max-width: 800px; 
    height: 100px;
    background-color: #f1a00a;
    color: black;
    justify-content: center;
    align-content: center;
    font-size: 12px;
}
.alert_subscribe  {
    margin: auto;
    max-width: 800px; 
    height: 50px;
    background-color: #ffc107;
    color: black;
    justify-content: center;
    align-content: center;
    font-size: 12px;
}
.subscription-card.alert_success, .subscription-card.alert_subscribe  {
    display:flex; 
    flex-direction: column; 
    max-width: 800px; 
    font-size: 12px;
    height:100px;
}

@media screen and (max-width: 768px) {
    .subscription-card.alert_success, .subscription-card.alert_subscribe {
        display: flex;
        width: 100%;
        flex-direction: column;
        height: auto; 
        align-items: center;
        font-size: 12px;
    }
}

.banner-strip {
    display: flex;
    flex-direction: column;
    max-width: 800px; 
    margin: 0 5px;
    padding: 0;
    text-align: left;
    height: auto;
    border: none;
}

@media screen and (max-width: 768px) {
    .banner-strip {
        display: flex;
        width: 100%;
        flex-direction: column;
        height: auto; 
        align-items: center;
        border: none;
    }
}

.banner-flexdiv {
    display:flex; 
    flex-direction: column; 
    width: 25%; 
    height: 100px; 
    border: none; /* border: 0.25px #eff5f7fd, solid */  
    row-gap: 8px;  
}

@media screen and (max-width: 768px) {
    .banner-flexdiv {
        display:flex; 
        flex-direction: column;
        align-items: center;
        height: auto; 
        width: 50%; 
        border: none;
    }
}

.banner-div {
    display:block; 
    width: 25%; 
    height: 45px; 
    border: 0.25px #eff5f7fd, solid;
    text-align: center;
    font-size: 12px;
}

@media screen and (max-width: 768px) {
    .banner-div {
        display:flex; 
        flex-direction: column;
        align-items: center;
        height: auto; 
        font-size: 12px;
        width: 100%;
    }
}

.banner-unit {
    display:flex; 
    flex-direction: row; 
    width: 96.5%;
    height: auto; 
    border: none;
}

.banner-unit.A {    
    height:auto; /* formerly, height:100px; */
    border: none;
    column-gap: 8px;
}

.banner-unit.B {    
    height: 50px;
    padding: 5px, 0;
}


@media screen and (max-width: 768px) {
    .banner-unit, .banner-unit.A , .banner-unit.B {
        flex-direction: column;
        height: auto; /* Adjust height for smaller screens */
        border: none;        
        padding: 5px, 0;
        row-gap: 8px;
    }
}


.banner-button.posts {
    width: 100%; 
    height: 50%;
    background-color: #808080;  
    border-bottom: 2px dotted green;
    font-family: Arial, sans-serif; 
    font-size: 12px;
    border-right: 0.25px #eff5f7fd, solid; 
    text-align: center; 
    align-content: 
    center; cursor: pointer;        
    padding: 5px, 0;   
}

.banner-button.new-post {
    width: 100%; 
    height: 50%;
    background-color: #c7c9ca; 
    font-family: Arial, sans-serif; 
    font-size: 12px;
    border-right: 0.25px #eff5f7fd, solid; 
    text-align: center; 
    align-content: center; 
    cursor: pointer;       
    padding: 5px, 0;   
}

.banner-button.messages {
    width: 100%; 
    height: 50%;
    background-color: #808080; 
    border-bottom: 2px dotted green;
    font-family: Arial, sans-serif; 
    font-size: 12px; 
    border-right: 0.25px #eff5f7fd, solid; 
    text-align: center; 
    align-content: center; 
    cursor: pointer;          
    padding: 5px, 0;    
}

.banner-button.new-message  {
    width: 100%; 
    height: 50%;                    
    background-color: #c7c9ca; 
    font-family: Arial, sans-serif; 
    font-size: 12px; 
    border-right: 0.25px #eff5f7fd, solid; 
    text-align: center; 
    align-content: center; 
    cursor: pointer;          
    padding: 5px, 0;    
}

.banner-button.groups  {
    width: 100%; 
    height: 50%; 
    background-color: #808080;  
    border-bottom:  2px blue; 
    font-family: Arial, sans-serif; 
    font-size: 12px; 
    text-align: center; 
    align-content: center; 
    cursor: pointer;       
    padding: 5px, 0;   
}

.banner-button.new-group {
    width: 100%; 
    height: 50%; 
    background-color: #c7c9ca; 
    font-family: Arial, sans-serif; 
    font-size: 12x; 
    text-align: center; 
    align-content: center; 
    cursor: pointer;       
    padding: 5px, 0;   
}

.banner-button.donation {
    width: 100%;
    height: 50%; 
    background-color: #808080; 
    border-bottom: 2px blue;
    font-family: Arial, sans-serif; 
    font-size: 12px; 
    text-align: center;
    align-content: center;  
    cursor: pointer;       
    padding: 5px, 0;   
}

.banner-button.special-tier {
    width: 100%;
    height: 50%; 
    background-color: #c7c9ca; 
    font-family: Arial, sans-serif; 
    font-size: 12px; 
    text-align: center;      
    align-content: center;  
    cursor: pointer;       
    padding: 5px, 0;   
}
.banner-button.premium-tier {
    width: 100%;  
    height: 50%; 
    background-color: #c7c9ca; 
    font-family: Arial, sans-serif; 
    font-size: 12px;
    text-align: center;     
    align-content: center;  
    cursor: pointer;        
    padding: 5px, 0;     
}


@media screen and (max-width: 768px) {
    .banner-button.posts, .banner-button.new-post, 
    .banner-button.messages, .banner-button.new-message, 
    .banner-button.groups, .banner-button.new-group, 
    .banner-button.donation, .banner-button.special-tier, 
    .banner-button.premium-tier {
        display: block;
        width: 100%;
        text-align: center;
        font-size: 11px;
        height: auto;        
        padding: 5px, 0;   
    }
}

.myPosts {
    max-width: 800px; 
    margin: 0 auto; 
    padding: 0 20px; 
    text-align: left;
}

.myMessages {
    max-width: 800px; 
    margin: 0 auto; 
    padding: 0 20px; 
    text-align: left;
}

@media screen and (max-width: 768px) {
    .myPosts, .myMessages {        
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: auto; 
    }
}

.myprofile-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2rem 0;
}

.myprofile-spinner.init{
    display: none;
}


.myprofile-loader {
    border: 6px solid #f3f3f3;
    border-top: 6px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: none;
    /*animation: myprofile-spin 1s linear 20s;*/
}


@keyframes myprofile-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
} 


.myprofile-pagination-controls { 
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    justify-content: center; 
    align-items: center; 
    height: 50px;
    width: 100%;
    font-size: 11px;
}

.myprofile-pagination-controls.init {
    display: none;
}

#pageIndicator {
    font-size:11px;    
}
@media screen and (max-width: 768px) {
    #pageIndicator {
        flex-direction: column;
        height: auto; 
        font-size:10px;
    }
}

#jumpToPageContainer {
    font-size: 11px;
    margin-left: 40px;
    margin-bottom: 20px; 
}


#fetchedMessages {
    display: flex;
    flex-direction: column;
    gap: 15px; 
    padding: 10px 0;
}

.user_message {
    border: 1px solid #e0e0e0;
    border-left: 5px solid transparent; 
    border-radius: 8px;
    padding: 15px;
    background-color: #fcfcfc;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); 
    transition: all 0.2s ease-in-out;
}

.user_message:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.message-sent {
    border-left-color: #007bff;
}

.message-received {
    border-left-color: #28a745; 
}

.message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}

.message-sender-info {
    font-weight: bold;
    color: #333;
    font-size: 1.1em;
}

.message-title {
    font-size: 1.25em;
    font-weight: 600;
    color: #444;
    margin-bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-timestamp {
    font-size: 0.8em;
    color: #888;
}

.message-details-text {
    color: #555;
    line-height: 1.5;
    margin-top: 10px;
    white-space: pre-wrap; 
    max-height: 80px;
    overflow: hidden;
}

.placeholder-text {
    text-align: center;
    color: #999;
    padding: 30px;
    border: 1px dashed #ccc;
    border-radius: 5px;
}

.message-actions {
    margin-top: 10px;
}
.reply-btn {
    padding: 6px 12px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.2s;
}
.reply-btn:hover {
    background-color: #e0e0e0;
}
.reply-form-container {
    margin-top: 15px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background-color: #f9f9f9;
}
.replyForm textarea { 
    width: 100%;
    min-height: 80px;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
.replyForm button {
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 10px;
}
.reply-submit-btn {  
    background-color: #007bff;
    color: white;
}
.reply-cancel-btn { 
    background-color: #ccc;
    color: #333;
}

 
button:disabled {
    opacity: 0.75;
    cursor: not-allowed;
}
.disabled-feature {
    opacity: 0.6;            
    cursor: not-allowed;      
    position: relative;
    Z-index: 400;
}
.spinnerX {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid #ccc;
    border-top: 3px solid #0992ee;
    border-radius: 50%;
    animation: spinX 0.8s linear infinite;
}

@keyframes spinX {
    to { transform: rotate(360deg); }
}           


.form-header.compose_message {
    text-align: center;
    margin-bottom: 25px;
    color: #333;
    border-bottom: 2px solid #007bff; 
    padding-bottom: 10px;    
    cursor: move;        
}

#composeMessageContainer { 
    max-width: 500px; 
    margin: 20px auto;
    padding: 20px; 
    border: 1px solid #ddd;
    border-radius: 8px; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    background-color: #fff;
    font-family: Arial, sans-serif;
}

#messageForm > div {
    margin-bottom: 18px;
}

#messageForm label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
    font-size: 0.95em;
}

#messageForm input[type="text"],
#messageForm textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; 
    font-size: 1em;
    transition: border-color 0.3s, box-shadow 0.3s;
}

#messageForm input[type="text"]:focus,
#messageForm textarea:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    outline: none;
}

#details {
    resize: vertical; 
    min-height: 120px; 
}

#messageForm button[type="submit"] {
    display: block;
    width: 100%;
    padding: 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s;
}

#messageForm button[type="submit"]:hover {
    background-color: #0056b3;
}

#messageForm button[type="submit"]:active {
    transform: scale(0.99);
}

.success-message-container {
    padding: 20px; 
    border: 1px solid #28a745; 
    border-radius: 8px;
    background-color: #d4edda; 
    color: #155724;
    text-align: center;
    max-width: 500px;
    margin: 20px auto;
}
.success-message-container h3 { /*[user_profile.html] */
    margin-top: 0;
    color: #28a745;
}

.newgroup_formheader {
    width: 80%;
    text-align: center;
    margin-bottom: 25px;
    color: #333;
    border-bottom: 2px solid #007bff; 
    padding-bottom: 10px; 
    cursor: move;     
}

#createNewGroupContainer {
    max-width: 500px; 
    margin: 20px auto; 
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    background-color: #fff;
    font-family: Arial, sans-serif;
}


#newgroupForm > div {
    margin-bottom: 18px;
}

/* Styling for labels; */
#newgroupForm label {
    display: block;
    margin-left: 25px;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
    font-size: 0.95em;
}

#newgroupForm input[type="text"] {
    display: block;
    width: 80%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; 
    font-size: 1em;
    transition: border-color 0.3s, box-shadow 0.3s;
}

#newgroupForm input[type="text"]:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    outline: none; 
}

#newgroupForm button[type="submit"] {
    display: block;
    width: 80%;
    padding: 12px;
    background-color: #007bff; 
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s;
}

#newgroupForm button[type="submit"]:hover {
    background-color: #0056b3;
}

#newgroupForm button[type="submit"]:active {
    transform: scale(0.99);
}

/* Style for the Success Message (from the immediately preceding response) */
.success-group-container {
    padding: 20px; 
    border: 1px solid #28a745; 
    border-radius: 8px;
    background-color: #d4edda; 
    color: #155724;
    text-align: center;
    max-width: 500px;
    margin: 20px auto;
}
.success-group-container h3 {
    margin-top: 0;
    color: #28a745;
}

.top-panel-header {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 20px;
  background: #f9f9f9;            
  border-bottom: 1px solid #ddd;
  font-family: "Segoe UI", sans-serif;
  
}

@media screen and (max-width: 768px) {
    .top-panel-header {
        flex-direction: column;
        height: auto;
    }
}

.time {
  display: flex;  
  gap: 40px;
}

@media screen and (max-width: 768px) {
    .time {
        flex-direction: column;
        height: auto;
    }
}
.period {
  font-size: 1.1em;
  font-weight: normal;
  color: #666;
}

.date-range {
  display: flex;
  align-items: center;
  gap: 15px;                       
}


@media screen and (max-width: 768px) {
    .date-range {
        flex-direction: column;
        height: auto;
    }
}

.date-range label {
  font-size: 0.7em;
  color: #444;
  margin-right: 5px;
}

.date-range input[type="date"] {
  padding: 5px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.7em;
  transition: border-color 0.2s ease;
}

.date-range input[type="date"]:focus {
  border-color: #0078d7;             
  outline: none;
}

.action-buttons {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}

.action-buttons button {
  padding: 8px 14px;
  border: none;
  border-radius: 4px;
  font-size: 0.9em;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}

.action-buttons button:hover {
  transform: translateY(-1px);
}

.view-members-btn.active { 
  background: #007bff;
  color: #fff;
}
.view-messages-btn {
  background: #28a745;
  color: #fff;
}
.btn-manage, #set-period-btn {
  background: #ffc107;
  color: #333;
}


#set-period-btn {
  background: #ffc107;
  color: #333;
  cursor: pointer;
}

#messages-panel {
    height: 500px; 
    
    overflow-y: auto; 
    
    
    border: 1px solid #ddd;
    padding-right: 10px; 
    scrollbar-width: thin; 
}

#messages-panel::-webkit-scrollbar {
    width: 6px;
}
#messages-panel::-webkit-scrollbar-thumb {
    background-color: #0697f8;
    border-radius: 10px;
}

#management-panel {
    display: none; 
    width: 100%;   
    position: relative;
    width: 100%;
    height: 100%;   
}
#modalContent { 
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px; 
    max-width: 90%; 
    max-height: 80vh; 
    overflow-y: auto; 
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

#closeModal-management { 
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 22px;
    cursor: pointer;    
}


.groups-dashboard {
    display: flex;
    height: calc(100vh - 150px); 
    overflow: hidden; 
    border-top: 1px solid #ddd;
}

@media screen and (max-width: 768px) {
    .groups-dashboard {
        flex-direction: column;
        height: auto; 
    }
}

.group-list-panel {
    flex: 1; 
    min-width: 250px;
    max-width: 350px;
    overflow-y: auto;
    background-color: #f4f7f9;  
    padding: 15px;
}
.group-details-panel {
    flex: 3; 
    overflow-y: auto;
    padding: 20px;
    background-color: #ffffff;
    border-left: 2px solid #eaeaea; 
    position: relative; 
}
.group-list-panel, .group-details-panel {
    height: 100%;
    overflow-y: auto; 
}


.detail-panel { border-top: 1px solid #ccc; padding-top: 15px; margin-top: 15px; }
.hidden-panel { display: none; }
.active-panel { display: block; }
.group-list-panel li:hover { cursor: pointer; background-color: #f0f0f0; }
.group-list-panel li.selected { background-color: #7cf504; font-weight: bold; }   




h1 { 
    color: #333;
}

.table-scroll {
    max-height: 500px;
    overflow-y: auto;    
    overflow-x: auto; 
    width: 100%; 
}
@media screen and (max-width: 768px) {  
    .table-scroll td:first-child {
        position: sticky;
        left: 0;      
        z-index: 10; 
        background-color: #fff; 
        border-right: 2px solid #ddd; 
    }
    
    .table-scroll thead th {
        position: sticky;
        top: 0;      
        z-index: 20; 
    } 

    .table-scroll thead th:first-child {
        position: sticky;
        left: 0;   
        top: 0;     
        z-index: 30;
    }   

}

table {
    width: 80%;    
    border-collapse: separate;
    margin-top: 20px;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 20px 20px; 
}

th {
    background: #4CAF50;
    color: white;
}

th, td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

td.show_groups {
    color: #666; 
    font-size: 0.85em; 
    font-family: monospace;
}
tr:hover {
    background-color: #f1f1f1;
}
.null {
    color: #999;
    font-style: italic;
}

th.accounts_history, th.my_accounts_history {
    background:#f806f8;
    color: white;
}

th.financials_subscription, th.my_financials_subscription{
    background:#145703;
    color: white;
}

th.financials_donation, th.my_financials_donation{
    background:#0697f8;
    color: white;
}

th.financials_summary, th.my_financials_summary{
    background:#b38a05;
    color: white;
}


.managegroups_formheader {
    width: 80%;
    text-align: center;
    margin-bottom: 25px;
    color: #333;
    border-bottom: 2px solid #007bff; 
    padding-bottom: 10px;    
    cursor: move;  
}

.managegroups_form_holder{
    max-width: 600px; 
    margin: 20px auto; 
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); 
    background-color: #fff;
    font-family: Arial, sans-serif;
}


#addmemberForm > div, #groupmessageForm > div,
#listgroupmembersForm > div, #createadminForm > div,
#invitememberForm > div, #inviteresponseForm > div,
#removegroupmemberForm > div, #leavegroupForm > div{
    margin-bottom: 18px;
}

.groupstab-container  {
    display: flex;            
    flex-direction: row;     
    align-items: stretch;      
    gap: 0;                    
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f7ecec;
    width: 100%;
    height: 45px;      
    margin-bottom: 2px;
}

.groupstab-container > .groupstab-button {
    flex: 1 1 auto;
    display: flex;
    width: 100%;
    height: 100%;    
    padding: 0;              
    margin: 0;                    
    background-color: #4c585842;
    border: none;     
    font-weight: bold;
    cursor: pointer;
    align-items: center;
    justify-content: center;  
    text-align: center;
    line-height: normal;         
    gap: 10px;
   
}

.groupstab-container > .groupstab-button.b {
    background-color: #0b62e442;
}

.groups_data_wrapper{
    margin-top: 15px;    
} 

#addmemberForm label, #groupmessageForm label { 
    display: block;    
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
    font-size: 0.95em;
}

#addmemberForm input[type="text"], #groupmessageForm input[type="text"],
#listgroupmembersForm input[type="text"], #createadminForm input[type="text"],
#invitememberForm input[type="text"], #inviteresponseForm input[type="text"],
#removegroupmemberForm input[type="text"], #leavegroupForm input[type="text"],
#groupmessageForm textarea, #invitememberForm textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1em;
    transition: border-color 0.3s, box-shadow 0.3s;
}

#addmemberForm input[type="text"]:focus, #groupmessageForm input[type="text"]:focus,
#listgroupmembersForm input[type="text"]:focus, #createadminForm input[type="text"]:focus,
#invitememberForm input[type="text"]:focus, #inviteresponseForm input[type="text"]:focus,
#removegroupmemberForm input[type="text"]:focus, #leavegroupForm input[type="text"]:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    outline: none; /* Removes default browser outline */
}

#addmemberForm button[type="submit"], #groupmessageForm button[type="submit"],
#listgroupmembersForm button[type="submit"], #createadminForm button[type="submit"],
#invitememberForm button[type="submit"], #inviteresponseForm button[type="submit"],
#removegroupmemberForm button[type="submit"], #leavegroupForm button[type="submit"] {
    display: block;
    width: 80%;
    padding: 12px;
    background-color: #007bff; /* Primary brand color */
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s;
}

#addmemberForm button[type="submit"]:hover, #groupmessageForm button[type="submit"]:hover,
#listgroupmembersForm button[type="submit"]:hover, #createadminForm button[type="submit"]:hover,
#invitememberForm button[type="submit"]:hover, #inviteresponseForm button[type="submit"]:hover,
#removegroupmember button[type="submit"]:hover, #leavegroupForm button[type="submit"]:hover {
    background-color: #0056b3;
}

#addmemberForm button[type="submit"]:active, #groupmessageForm button[type="submit"]:active,
#listgroupmembersForm button[type="submit"]:active, #createadminForm button[type="submit"]:active,
#invitememberForm button[type="submit"]:active, #inviteresponseForm button[type="submit"]:active,
#removegroupmember button[type="submit"]:active, #leavegroupForm button[type="submit"]:active  {
    transform: scale(0.99);
}

.group_entity.radio {
    margin: 1rem 0;
    padding: 0.5rem;
}

.group_entity.radio > label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #333;
}

.radio-option {
    display: flex;
    align-items: center;
    margin-bottom: 0.4rem;
    cursor: pointer;
}

/* Radio input itself */
#invitememberForm input[type="radio"],
.radio-option input[type="radio"] {
    appearance: none; /* remove default browser style */
    width: 18px;
    height: 18px;
    border: 2px solid #666;
    border-radius: 50%;
    margin-right: 8px;
    position: relative;
    transition: border-color 0.2s ease-in-out;
}


#invitememberForm input[type="radio"]:checked,
.radio-option input[type="radio"]:checked {
    border-color: #007bff;
    background-color: #007bff;
}

#invitememberForm input[type="radio"]:checked::after
.radio-option input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
}

.radio-option label {
    font-size: 0.95rem;
    color: #444;
}

[id$="-submit"] {
  margin-top: 10px;
}
        
.makedonations_formheader {
    width: 80%;
    text-align: center;
    margin-bottom: 25px;
    color: #333;
    border-bottom: 2px solid #007bff; 
    padding-bottom: 10px;
    margin: 0 auto 25px auto; 
    cursor: move;      
}
.makedonations_form_holder{
    max-width: 600px; 
    margin: 20px auto; 
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); 
    background-color: #fff;
    font-family: Arial, sans-serif;
    text-align: center;
}

.donation-field {
    margin-bottom: 15px;
    text-align: left;
}
.donation-field label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}
.donation-field input #donation-amount-input{
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.specialsubscription_formheader {
    width: 80%;
    text-align: center;
    margin-bottom: 25px;
    color: #333;
    border-bottom: 2px solid #007bff;
    padding-bottom: 10px;
    margin: 0 auto 25px auto;  
    cursor: move;        
}
.specialsubscription_form_holder {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    background-color: #fff;
    font-family: Arial, sans-serif;
    text-align: center;
}


.paywall-container {
    max-width: 400px;
    margin: 50px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-align: center;
}        
.premiumsubscription_formheader {
    width: 80%;
    text-align: center;
    margin-bottom: 25px;
    color: #333;
    border-bottom: 2px solid #007bff;
    padding-bottom: 10px;
    margin: 0 auto 25px auto;  
    cursor: move;       
}
.premiumsubscription_form_holder {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    background-color: #fff;
    font-family: Arial, sans-serif;
    text-align: center;
}
.paypal-button-container { 
    margin-top: 20px;
}
.tier-card { 
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.tier-card h3 {
    margin-top: 0;
    color: #007bff;
}


.create_post_form_holder{    
    display: flex;
    flex-direction: column; 
    width: 100%;    
    box-sizing: border-box; 
    gap: 10px;
    border:#f9e508 2px solid;    
}

@media screen and (max-width: 768px) {
    .create_post_form_holder {
        flex-direction: column;
        height: auto; 
        column-gap: 10px;
    }
}

.create_post_form_holder > * {
     min-height: 0; 
}

.create_post_form_holder form { 
    display: flex; 
    flex-direction: column; 
    min-height: 0;
    height: 100%;
}

.echelon_create_post {    
    display: flex; 
    flex-direction: column; 
    width: 100%;
    box-sizing: border-box;
    min-height: 0;  
}

@media screen and (max-width: 768px) {
    .echelon_create_post {
        flex-direction: column;
        height: auto;
    }
}

.echelon_create_post > * {
     min-height: 0; 
}
.create_post_tab_wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%; 
    height: auto; 
    flex: 0 0 auto;   
    justify-content: flex-start;
    align-items: flex-start;
    background-color: rgb(225, 246, 200);
    box-sizing: border-box;
}

@media screen and (max-width: 768px) {
    .create_post_tab_wrapper {
        flex-direction: column;
        height: auto; 
    }
}
.select_category, .select_subcategory, .select_topic {  
    margin: auto;
    width: 100%;
    height: 40px;
    font-size: 16px;
    background-color: #f9f9fc;
    border: 2px solid; 
    border-radius: 10px;
}
.select_poststate, .select_postlga, .select_postward {  
    margin: auto;
    width: 100%;
    height: 40px;
    font-size: 16px;
    background-color: #fafcf9;
    border: 2px solid; 
    border-radius: 10px;
}
.create_post_controls {
    display: flex;    
    flex-direction: column;
    box-sizing: border-box; 
    height: auto; 
    flex: 0 0 auto;
} 


@media screen and (max-width: 768px) {
    .create_post_controls {
        flex-direction: column;
        height: auto;   
        row-gap: 10px;
    }
}
.create_post_controls_echelon {
    display: flex;
    flex-direction: row;
    width: 100%; 
    height: 50px;    
    margin : 0;
    padding: 0;
    font-family: sans_serif;
}

@media screen and (max-width: 768px) {
    .create_post_controls_echelon {
        flex-direction: column;
        height: auto; 
        padding: 10px;
        row-gap: 10px;
    }
}

.p_create_post {
    display: flex;
    height: auto;
    border-bottom: 2px solid grey;
    font-size: 16px;
}

@media screen and (max-width: 768px) {
    .p_create_post {
        flex-direction: column;
        height: auto;       
        row-gap: 10px;
        font-size: 12px;
    }
}
.media_echelon { 
    display: flex;     
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%; 
    height: auto; 
    flex: 0 0 auto;
} 

@media screen and (max-width: 768px) {
    .media_echelon {
        flex-direction: column;
        height: auto;
    }
}
.mediabutton_entity  {
    display:flex;
    width: 100%;
    height: 40px;
    flex-direction: column;
    flex-wrap: nowrap;
    border-bottom: 2px solid grey; 
    align-items: center;
    justify-content: center; 
    margin-top: 10px;
    padding-bottom: 10px;
}
@media screen and (max-width: 768px) {
    .mediabutton_entity {
        flex-direction: column;
        height: auto;
        
    }
}

.mediabutton_label{
    display: flex;
    width: 100%;
    height: 25px;
    align-items: center; 
    justify-content: center;
    font-size: 14px;
}  

@media screen and (max-width: 768px) {
    .mediabutton_label {
        flex-direction: column;
        height: auto; 
        font-size: 12px;
    }
}
.mediabutton_data   { 
    display: flex;     
    width : 100%;   
    height: 30px;
    align-items: center;
    justify-content: center;
    font-size: 14px;   
}

@media screen and (max-width: 768px) {
    .mediabutton_data {
        flex-direction: column;
        height: auto;
        font-size: 12px;
       
    }
}
.middle_echelon {
    display: flex;    
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%; 
    height: auto; 
    flex: 0 0 auto;
    margin-bottom: 20px;
}

@media screen and (max-width: 768px) {
    .middle_echelon {
        flex-direction: column;
        height: auto; 
    }
}

.middleechelon_entity  {    
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: min(100%, 750px);
    height: 60px;     
    margin-bottom: 20px;
    font-size: 14px;
}

@media screen and (max-width: 768px) {
    .middleechelon_entity {
        flex-direction: column;
        height: auto; 
        font-size: 12x;
    }
}
.middleechelon_label  {   
    width: 100%;
    align-items: left;     
    font-size: 14px;    
}
.middleechelon_data{
    width : 100%;
    align-items: left; 
    font-size: 14px; 
    height: 50px;    
    margin-bottom: 10px;  
} 

@media screen and (max-width: 768px) {
    .middleechelon_data {
        flex-direction: column;
        height: 50px; /* Adjust height for smaller screens */
        font-size: 12px;
    }
}

.middleechelon_textentity /* [create_post.html] */  {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: min(100%, 750px);
    height: 110px;
    font-size: 14px;
}   /* flex: 90%; height: 150px; */

@media screen and (max-width: 768px) {
    .middleechelon_textentity {
        flex-direction: column;
        height: auto; 
        font-size: 12px;
    }
}   
.middleechelon_textlabel   {   
    width: 100%;
    align-items: left;     
    font-size: 14px;       
} 
 
.middleechelon_textdata {
    width : 100%;
    align-items: left;     
    font-size: 14px;    
    margin-bottom: 0px; 
    height: 100px;
}   

@media screen and (max-width: 768px) {
    .middleechelon_textdata {
        flex-direction: column;
        height: auto; 
        font-size: 12px;
    }
}
@media screen and (max-width: 768px) {
    .middleechelon_label,.middleechelon_textlabel {
        font-size: 12px;
    }
}

.submitcancelbuttons_entity   {
    display: flex;
    flex-direction: row; 
    width: 100%; 
    height: auto; 
    flex: 0 0 auto;
    margin: auto;
    gap: 10px;  
    box-sizing: border-box;
    position: -webkit-sticky; 
    position: sticky;
    bottom: 3vh; 
    background-color: #f9f9fc; 
    z-index: 100; 
    padding: 10px;
    font-size: 14px; 
}

@media screen and (max-width: 768px) {
    .submitcancelbuttons_entity {
        flex-direction: column;
        font-size: 12px; 
    }
}
.submit_button  {
    width: 100%;
    height: 45px;
    font-size: 20px;
    background-color: #d9d9da;
    border: 2px solid; 
    border-radius: 10px;
    cursor: pointer;
    vertical-align: middle;
    box-sizing: border-box;   
} 
.cancel_button { 
    width: 100%;
    height: 45px;
    font-size: 20px;
    background-color: #773d6f;
    border: 2px solid; 
    border-radius: 10px;
    cursor: pointer;
    vertical-align: middle;
    box-sizing: border-box;
}
.submit_button:focus, .cancel_button:focus { 
    background-color: #f0eee8;
} 

#posts-container {
    padding: 20px, 0;
} 
.attribution /* [this_post] */{
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0;
    width: 100%;   
    box-sizing: border-box;
    height: 20px;
    background-color: #2ef30760;
    align-items: center;
    font-size: 16px;
    row-gap: 20px;    
}

@media screen and (max-width: 768px) {
    .attribution {
        flex-direction: column;
        height: auto; 
        font-size: 12px;        
    }
} 

.reaction_belt{
    display: flex;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 1px;   
    width : 100%;
    height: 30px; 
    background-color: #e8f0e1;     
}

@media screen and (max-width: 768px) {
    .reaction_belt {
        flex-direction: column;
        height: auto;       
        font-size: 12px;  
        flex-shrink: 1;          
    }
} 

.reaction-card  { 
    display: flex;
    width: 100%;
    font-size: 12px;       
    margin-top: auto;
    background-color: #e8f0e1;
} 

@media screen and (max-width: 768px) {
    .reaction-card {  
        width: 100%; 
        font-size: 11px;        
        height: auto; 
        column-gap: 1px;
        padding: 0px;
        margin: 0px;
        height: auto;
        flex-shrink: 1;
    }
}

.reactions_container  { 
    display: flex; 
    width: 100%;
    height:100%;
    font-size: 11px;  
    background-color: #e8f0e1;
    margin-bottom: 0px;  
}

@media screen and (max-width: 768px) {
    .reactions_container { 
        width: 100%;       
        font-size: 11px;        
        height: auto;
        column-gap: 1px;
        row-gap: 1px;
        flex-shrink: 1;
    }
}
.reactions_container i:hover {
  cursor: pointer;
}

.reaction__upvote, .upvote-icon{
    color: black;
    font-size: 11px;
    flex-shrink: 1;
}
.upvote-count { 
    color: black; 
    font-size: 11px;
    flex-shrink: 1;
}
.upvote-icon.active,
.upvote-count.active   {
    color: green;  
}

.reaction__downvote, .downvote-icon {
    color: black;    
    font-size: 11px;
    flex-shrink: 1;
}
.downvote-count {
    color: black; 
    font-size: 11px;
    flex-shrink: 1;
}
.downvote-icon.active,
.downvote-count.active   {
    color: green;  
}

.reaction__heart, .heart-icon {
    color: black;
    font-size: 11px;
}
.heart-count {
    color: black;                                
    font-size: 11px;
    flex-shrink: 1;
}
.heart-icon.active,
.heart-count.active {
    color: green;
}

.reaction__views, .views-icon {
    color: black;
    font-size: 11px;
    flex-shrink: 1;
}
.views-count {
    color: black;
    font-size: 11px;
}
.views-icon.active,
.views-count.active   {
    color: green;
}

.reaction__comments, .comments-icon {
    display: flex;
    color: black;
    font-size: 11px;
    flex-shrink: 1;
}
.comments-count {
    display: flex;
    color: black;
    font-size: 11px;
    flex-shrink: 1;
}
.comments-icon.active,
.comments-count.active /  {
    color: green;
}


.reaction__followers, .followers-icon {
    display: flex;
    color: black;
    font-size: 11px;
    flex-shrink: 1;
}
.followers-count  {
    display: flex;
    color: black; 
    font-size: 11px;
    flex-shrink: 1;
}

.followers-icon.active,
.followers-count.active /  {
    color: green;  
}

@media screen and (max-width: 768px) {
    .reaction__upvote, .reaction__downvote, .reaction__heart, 
    .reaction__views, .reaction__comments, .reaction__followers {        
        font-size: 11px;        
        column-gap: 5px;
        flex-shrink: 1;
    }
}

@media screen and (max-width: 768px) {
    .comments-count, .upvote-count, .downvote-count, 
    .heart-count, .views-count, .followers-count {
        font-size: 11px;        
        column-gap: 1px;
        flex-shrink: 1;
    }
}

.button_holder {
    display: flex;
    margin: auto;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    height: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px; 
    text-align: left;
}

@media screen and (max-width: 768px) {
    .button_holder {
        flex-direction: column;
        height: auto; 
        width: 100%; 
        row-gap: 10px;       
    }
}
#prev-btn, #next-btn, #refreshFeed-btn, 
#jumpToLatest-btn, #offset-mode-btn, #cursor-mode-btn {
    cursor: pointer;
    vertical-align: middle;
    font-size: 12px;
}

@media screen and (max-width: 768px) {
    #prev-btn, #next-btn, #refreshFeed-btn, #jumpToLatest-btn, 
    #offset-mode-btn, #cursor-mode-btn {           
        font-size: 12px;
        height: 50px; 
        width: 150px;        
    }
}

#endOfFeed{
    margin-bottom: 0 20px;
}

.btn_loadpage.active, .tab-button.active { 
    background-color: #4CAF50; 
    color: white;
}

#loader /{
  width: 50px;
  height: 50px;
  border: 5px solid rgba(0, 0, 0, 0.1);
  border-top: 5px solid #3498db; 
  border-radius: 50%;
  
}


.post, .user / {
    max-width: 800px; 
    margin: 0 auto;  
    padding: 0 20px;
    text-align: left;
    display: flex;
    border: 1px solid #ddd;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-top: 10px;
}

@media screen and (max-width: 768px) {
    .post, .user  {
        display: flex;
        width: 100%;        
        flex-direction: column;
        height: auto;
        align-items: flex-start; 
        text-align: left;
        margin-top: 10px;
        margin-left: 20px;
    }
}

.post-content-wrapper   {  
    max-width: 800px; 
    margin: 0 auto;  
    padding: 0 20px;
    text-align: left;
    
}
@media screen and (max-width: 768px) {
    .post-content-wrapper {
        display: flex;
        width: 100%;        
        flex-direction: column;
        height: auto;
        align-items: flex-start;
        padding: 0;
    }
}
.media-count-strip {
    display: flex;
    max-width: 100%; 
    margin: 0 auto;  
    padding: 0 20px; 
    text-align: center; 
    white-space: nowrap;
}

@media screen and (max-width: 768px) {
    .media-count-strip {
        display: flex;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        flex-direction: column;
        height: auto; 
        align-items: center;
        font-size: 12px;
        white-space: wrap;
    }
}
.post-media-container   {  
    width: 450px;
    max-width: 100%; 
    margin: 0 auto; 
    padding: 0 20px; 
    text-align: left; 
    margin-top: 10px;  
}

@media screen and (max-width: 768px) {
    .post-media-container {
        display: flex;
        width: 100%;
        flex-direction: column;
        height: auto; 
        align-items: flex-start; 
        text-align: left;  
        padding: 0;  
        margin-top: 10px; 
    }
}

.post.jump-highlight  { 
    background-color: #e0f7fa;
    transition: background-color 1s ease;
}


.media_unit {
    max-width: 800px; 
    margin: 0 auto; 
    padding: 0 20px; 
    text-align: center;  
    font-size: 14px; 
    font-weight: bold;
    
}

@media screen and (max-width: 768px) {
    .media_unit {
        display: flex;
        width: 100%;      
        height: auto;
        align-items: center; 
        justify-content: center; 
        min-height: 12px;
        font-size: 12px;        
        padding: 0;
        margin : 0 auto;     
    }
}

.lazy   {
    display: block;
    width: 100%;
    max-width: 800px;
    height: auto;  
}



video.lazy  {
    width: 100%;
    height: auto; 
    max-width: 100%;
    object-fit: contain;  
}

iframe.lazy   {
    width: 100%;
    height: auto;
    max-width: 100%;
    border: 1px solid #ccc; 
}

img.lazy {
    width: 100%;
    height: auto; 
    max-width: 100%;
    object-fit: contain;
}

audio.lazy {
    width: 100%;    
    height: auto; 
    max-width: 100%;
}
@media screen and (max-width: 768px) {
    .lazy, video.lazy, iframe.lazy, img.lazy, audio.lazy {
        display: flex;
        width: 100%;   
        height: auto; 
        align-items: center; 
        font-size: 12px;  
        max-width: 100%; 
        object-fit: contain;      
    }
}

.map_holder { 
    display: flex;   
    flex-direction: column; 
    width: 80%; 
    margin: auto; 
    box-sizing: border-box;
}
.map_holder, #mapholder {
    display: none;
    height: 70vh;
    padding: 20px 0;
    font-size: 11px;
    border: none;
}

@media screen and (max-width: 768px) {
    .map_holder {
        width: 100%;
        height: 75vh; 
        font-size: 11px;
        padding-bottom: 5px;
    }
}

#location-fields {
    display: flex;
    flex-direction: row;
    width: 80%;
    height: 30px;
    padding: 20px, 20px;
}

@media screen and (max-width: 768px) {
    #location-fields {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 30px;
        padding: 20px 0;
    }
}

.location_field_entity {
    display: flex;
    flex-direction: row;
    width: 30%; 
    height:100%;
}

@media screen and (max-width: 768px) {
    .location_field_entity {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 30px;
        padding-bottom: 5px;
    }
}

.location_field_label {
    width: 30%; 
    font-size: 12px;
    text-align: center;
}

.location_field_data {
    width: 70%; 
    font-size: 12px; 
    font-weight: 700;
    text-align: left;
}

@media screen and (max-width: 768px) {
    .location_field_label  {        
        width: 30%;
        font-size: 11px;
        height: 30px;
        text-align: left;
    }
    .location_field_data  {        
        width: 70%;
        font-size: 11px;
        height: 30px;
        text-align: left;
    }
}

.view-toggle-container {
    display: flex; 
    justify-content: center; 
    margin-bottom: 20px;    
}

.inner-view-toggle-container {
    display: inline-flex;
    background: #eee; 
    padding: 4px; 
    border-radius: 30px;       
}

.toggle-btn, #postViewBtn, #mapViewBtn {
    padding: 8px 20px; 
    border-radius: 25px; 
    border: none; 
    cursor: pointer; 
    font-weight: 600; 
    background: #6faf4c; 
}

#postViewBtn {
    color: white;
}

#mapViewBtn {
    background: transparent; 
    color: #666;    
}

@media screen and (max-width: 768px) {
    .toggle-btn, #postViewBtn, #mapViewBtn   {  
        font-size: 11px;
    }
}

.echelon_post{    
    display: flex; 
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    height: 750px;
    margin: auto; 
    align-items: center;
}
.playback_echelon/{
    display: flex;    
    width: 100%; 
    height: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}

.avplayback_entity  {    
    position: relative;    
    width: 100%;    
    height: 50vh;
    margin: 0;
    box-sizing: border-box;
    border: 1px solid #4ca7af; 
    overflow: hidden; 
}
 
.caption {
    width: 100%;   
    box-sizing: border-box;
    height: 20px;
    margin-top: 0px;
    margin-bottom: 0px;
    background-color: #38363620;
}

.post-body {
    width: 100%;
    height: 35px; 
    margin-top: 0px;
    margin-bottom: 0px;
}
.top_echelon {     
    width: 100%;
    max-height: 100px;
    box-sizing: border-box; 
    margin-top: 0px;
    margin-bottom: 0px;
    min-width: 0; 
    margin-left: 0;
    margin-right: 0; 
    padding-left: 0; 
    padding-right: 0; 
    background-color: rgb(225, 246, 200);
}
.post_echelon {
    margin: 0;     
    width: 100%;
    max-height: 60px;  
}

@media screen and (max-width: 768px) {
    .post_echelon {
        flex-direction: column;
        height: auto;
    }
}

.this_post_echelon, .this_post_review_echelon {
    display: flex; 
    flex-direction: column; 
    width: 100%; 
    line-height: 20px; 
    height: auto;
}

@media screen and (max-width: 768px) {
    .this_post_echelon, .this_post_review_echelon {
        width: 100%;
        flex-direction: column;
        height: auto;
    }
}
.underline.this_post_echelon, .underline.this_post_review_echelon {
    width: 100%; 
    height: 20px; 
    line-height:20px; 
    font-size: 12px; 
    font-weight: 700; 
    text-align: left;
}

@media screen and (max-width: 768px) {
    .underline.this_post_echelon, .underline.this_post_review_echelon {
        width: 100%;
        flex-direction: column;
        height: auto;
    }
}

.this_post_entity, .this_post_review_entity {
    display: flex; 
    flex-direction: row; 
    width: 100%; 
    height: 20px;  
    font-size: 12px;
}
@media screen and (max-width: 768px) {
    .this_post_entity, .this_post_review_entity {
        display: flex; 
        width: 100%;
        flex-direction: row;
        height: auto; 
        font-size: 11px;
    }
}
.this_post_tag_label, .this_post_review_tag_label {
    flex: 20%; 
    height: 100%;
    font-size: 12px;
}

@media screen and (max-width: 768px) {
    .this_post_tag_label, .this_post_review_tag_label {
        flex: 20%;
        height: auto; 
        font-size: 11px;
    }
}
.this_post_tag_data, .this_post_review_tag_data {
    flex: 80%; 
    height: 100%; 
    font-size: 12px;
}

@media screen and (max-width: 768px) {
    .this_post_tag_data, .this_post_review_tag_data{
        flex: 80%;
        height: auto; 
        font-size: 11px;
    }
}
.this_post_attribution, .this_post_review_attribution {
    width: 100%; 
    height: 20px; 
    font-size: 12px; 
    font-weight: bold;  
    color: green;
}
@media screen and (max-width: 768px) {
    .this_post_attribution, .this_post_review_attribution {
        width: 100%;
        height: auto; 
        font-size: 11px;
    }
}
.post_row{
    width: 33%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    margin-bottom: 5px;
}
.topechelon_entity  {   
    width: 100%;
    display: flex;
    flex-direction: row; 
}
.topechelon_label  /{       
    width: 33%;
    align-items: left;
    font-size: 10px;         
}     
.topechelon_data  {   
    width : 100%;   
    font-size: 10px;
    align-items: left;
    margin-left: 20px;   
}

.comments-caption {
    margin-top: 0px;
    margin-bottom: 0px;
    width: 100%; 
    height: 20px;
    background-color: #38363620;
    align-items: center;  
    box-sizing: border-box; 
    font-size: smaller; 
}

.comments-canvas {     
    flex: 1;
    position: relative;
    margin-top: 0px;
    margin-bottom: 0px;
    width: 100%; 
    flex-direction: column;
    box-sizing: border-box;
    font-size: 12px;
} 

.slide  {
    display: none;
    position: absolute; 
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%; 
    transition: opacity 0.5s ease-in-out; 
    opacity: 0;
    pointer-events: none;     
    justify-content: center; 
    align-items: center; 
}

.slide.active {
    display: block; 
    opacity: 1; 
    pointer-events: auto; 
}

.slide-content  {
    width: 100%;
    height: 100%;
    overflow: hidden; 
}

.slide-content img,
.slide-content video,
.slide-content audio,
.slide-content iframe   {
    object-fit: contain; 
    display: block;
    margin: 0; 
}

.slide-content iframe    {
    width: 100%; 
    height: 100%; 
    border: none; 
}


.slide-nav-button   {
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5); 
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 24px;
    cursor: pointer;
    z-index: 10; 
    border-radius: 5px;
    opacity: 0.7; 
    transition: opacity 0.3s ease;
}

.slide-nav-button:hover  {
    opacity: 1; 
}

.prev-slide-arrow   {
    left: 10px;
}

.next-slide-arrow {
    right: 10px;
}

.comment-form-wrapper{
    background: #fff;
    border: 1px solid #ccc;
    padding: 12px;
    border-radius: 6px;
    font-family: Arial, sans-serif;
    max-width: 600px;
    box-sizing: border-box;
    margin-top: 10px;
}

.comment-form-wrapper label {
    display: block;
    font-weight: bold;
    margin-bottom: 4px;
    font-size: 14px;
}
.comment-form-wrapper input.user_data,
.comment-form-wrapper input#input_email,
.comment-form-wrapper textarea.comment_textdata {
    width: 100%;
    padding: 8px;
    border: 1px solid #aaa;
    border-radius: 4px;
    margin-bottom: 10px;
    font-size: 14px;
    box-sizing: border-box;
}
.comment-form-wrapper textarea.comment_textdata  {
    resize: vertical;
    min-height: 60px;
} 

.comment-form-wrapper  .comment_submitbutton,
.comment-form-wrapper  .comment_cancelbutton  {
    padding: 8px 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin-bottom: 12px;
}
.comment-form-wrapper  .comment_submitbutton   {
    background-color: #007BFF;
    color: white;
}

.comment-form-wrapper .comment_cancelbutton   {
    background-color: #ccc;
    color: #333;
    margin-left: 10px;
}
@media (max-width: 480px) {
        .comment-form-wrapper {
        padding: 8px;
    }

    .comment-form-wrapper.comment_submitbutton,
    .comment-form-wrapper.comment_cancelbutton   {
        width: 100%;
        margin-top: 6px;
    }
}


.reply-form-wrapper  {
    background: #fff;
    border: 1px solid #ccc;
    padding: 12px;
    border-radius: 6px;
    font-family: Arial, sans-serif;
    max-width: 600px;
    box-sizing: border-box;
    margin-top: 10px;
    font-family: 12px;
}

.reply-form-wrapper label {
    display: block;
    font-weight: bold;
    margin-bottom: 4px;
    font-size: 14px;
}
.reply-form-wrapper input.user_data,
.reply-form-wrapper input#input_email,
.reply-form-wrapper textarea.reply_textdata  {
    width: 100%;
    padding: 8px;
    border: 1px solid #aaa;
    border-radius: 4px;
    margin-bottom: 10px;
    font-size: 14px;
    box-sizing: border-box;
}
.reply-form-wrapper textarea.reply_textdata   {
    resize: vertical;
    max-height: 60px;
} 

.reply-form-wrapper  .reply_submitbutton,
.reply-form-wrapper  .reply_cancelbutton   {
    padding: 8px 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin-bottom: 12px;
}
.reply-form-wrapper .reply_submitbutton   {
    background-color: #007BFF;
    color: white;
}
.reply-form-wrapper .reply_cancelbutton    {
    background-color: #ccc;
    color: #333;
    margin-left: 10px;
}
@media (max-width: 480px) {
        .reply-form-wrapper {
        padding: 8px;
    }

    reply-form-wrapper  .reply_submitbutton,
    .reply-form-wrapper  .reply_cancelbutton {
        width: 100%;
        margin-top: 6px;
    }
}
.slide-nav-button.comments-preview-arrow, 
.slide-nav-button.replies-collapse-arrow  {
    background: none;
    border: none;
    font-size: 24px;
    color: #333;
    cursor: pointer;
    padding: 8px;
    transition: color 0.3s ease, transform 0.2s ease;
    display: inline-block;
    visibility: visible;
}

.slide-nav-button.comments-preview-arrow:hover, 
.slide-nav-button.replies-collapse-arrow:hover  {
    color: #007BFF; 
    transform: scale(1.1);
    background-color: rgba(0, 123, 255, 0.1);
    border-radius: 50%;
}       

.comments-preview-arrow  {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
}
.replies-collapse-arrow  {
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 10;
    font-size: 20px;
    background: none;
    border: none;
    cursor: pointer;
}
.replies-canvas  {
    transition: all 0.3s ease;
}
.custom-tooltip  {
    visibility: hidden;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    padding: 4px 8px;
    position: absolute;
    z-index: 1;
    font-size: 12px;
    bottom: 100%; 
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.toggle-icon:hover.custom-tooltip  {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.custom-tooltip.visible  {
    opacity: 1;
    pointer-events: auto;
}

@media (max-width: 600px)   {
    .custom-tooltip {
        font-size: 12px;
        max-width: 90vw;
    }
}
 
.pagination-controls.search_posts {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    justify-content: center; 
    align-items: center; 
    height: 50px;
    width: 100%;
    margin-left: 40px;
}
button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.spinner.search_posts {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2rem 0;
}
.loader.search_posts {
    border: 6px solid #f3f3f3;
    border-top: 6px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin_search_posts 1s linear infinite;
}
@keyframes spin_search_posts {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
} 


.search_posts_data_holder {
    position: absolute;     
    max-width: 500px;
    max-height:  600px; 
    box-sizing: border-box;
    border:#f9e508 5px solid;
    background-color: #b4b3b3; 
    z-index: 9999;   
    display: none;
    animation: slideUp 0.5s ease-out forwards;
    overflow-x: hidden;
    overflow-y: auto; 
}

@media screen and (max-width: 768px) {
    .search_posts_data_holder {
        max-width: 350px;
        height: 100%; 
        overflow-x: hidden;
    }
}


.search_form_holder {     
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 500px;
    height: 100%; 
}

.search_form_header  {
    width: 100%;
    max-width: 500px;
    max-height: 30px;    
    background-color: #b4b3b3;
    cursor: move;      
}

@media screen and (max-width: 768px) {
    .search_form_holder {
        display: flex;
        flex-direction: column;
        height: 100%;
        max-width: 350x;
        height: 100%; 
        overflow-x: hidden;
    }
    .search_form_header  {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: auto; 
    }
}

.post_data_wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 500px;
    height: 45px;      
}

.search_post {
    display: flex; 
    width: 400px;
    height: 45px;
    background-color: #f3f7fc;
    font-size: 14px;
    outline:auto;
    outline-color:#374a58;
    outline-width: auto;
}

@media screen and (max-width: 768px) {
    .search_post {
        max-width: 250px;
        height: 100%;
        font-size: 12px; 
        overflow-x: hidden;
    }
}

.search_post_label {
    display: flex;   
    width: 100px;
    height: 45px;
    background-color: #f1f6fa;
    justify-content: center;
    font-size: 14px;
    outline:auto;
    outline-color:#709dbd;
    outline-width: auto;
}

@media screen and (max-width: 768px) {
    .search_post_label {
        max-width:100px;
        height: 100%; 
        font-size: 12px;
        overflow-x: hidden;
    }
}

.search_post_label.active-filter {
    background-color: green;
    color: white;
}

.search_post.A {
    background-color: #d5f1c3;
}

.search_post.B {
    background-color: #b6d6fa;
}

.search_post.label.A {
    background-color: #e9ebdd;
}
.search_post_label.A.active-filter {
    background-color: green;
    color: white;
}
.search_control_buttons_entity   {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    max-width: 500px;
    height: 50px;
    gap: 5px;
}


@media screen and (max-width: 768px) {
    .search_control_buttons_entity {
        display: flex;
        flex-direction: row;
        height: auto; 
        width: 100%;
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

 .btn-outline-primary.search_post_submit_button, 
 .btn-outline-primary.search_post_reset_button, 
 .btn-outline-primary.search_post_cancel_button  {
    display: flex;
        flex-direction: row;        
        font-size: 12px;          
    }


.post-gallery-content-wrapper, .post-review-content-wrapper, 
.post-search-content-wrapper, .post-profile-content-wrapper   {  
    width: 100%;
    max-width: 450px; 
    margin: 0 auto; 
    padding: 0 ; 
    text-align: left;   
    padding-bottom: 20px; 
}
@media screen and (max-width: 768px) {
    .post-gallery-content-wrapper, .post-review-content-wrapper,
    .post-search-content-wrapper, .post-profile-content-wrapper {
        display: flex;
        width: 100%;  
        max-width: 450px;       
        flex-direction: column;
        height: auto; 
        align-items: flex-start; 
        padding-bottom: 20px;
    }
}

.post-gallery-media-container, .post-review-media-container, 
.post-search-media-container, .post-profile-media-container, 
.post-details { 
    display: block;    
    width: 450px; 
    padding: 0 20px; 
    margin-top: 15px;
    font-weight: bold;  
}

@media screen and (max-width: 768px) {
    .post-gallery-media-container, .post-review-media-container,
    .post-search-media-container, .post-profile-media-container,
    .post-details {
        display: block;
        width: 100%;
        height: auto; 
        text-align: left;  
        padding: 0 20px; 
        margin-top: 15px;
        margin-left: 10px; 
        margin-right: 10px;
    }
}

.post-details-container    {
    display: flex; 
    flex-direction: column;
    width: 100%;
    max-width: 450px;   
    padding: 0 20px; 
    margin-top: 10px;
}
@media screen and (max-width: 768px) {
    .post-details-container  {
        display: flex;
        width: 100%;
        max-width: 450px; 
        flex-direction: column;
        height: auto; 
        align-items: flex-start;
    }
}

.post-details-container h3 { 
    margin-top: 0; 
    margin-bottom: 10px; 
}
.post-details-container > div A{
    font-weight: bold;    
}


.post-gallery-box, .post-review-box,
.post-search-box, .post-profile-box  { 
    display: flex;
    flex-direction: column; 
    width: 100%;    
    margin: 0 auto; 
    align-items: stretch;  
} 
@media screen and (max-width: 768px) {
    .post-gallery-box, .post-review-box,
    .post-search-box, .post-profile-box {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
}
.post-gallery-unit, .post-review-unit, 
.post-search-unit, .post-profile-unit { 
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 450px;      
    align-items: stretch;   
}
@media screen and (max-width: 768px) {
    .post-gallery-unit, .post-review-unit, 
    .post-search-unit, .post-profile-unit {    
        display: flex;
        flex-direction: row;
        align-items: stretch;    
        width: 100%;        
        margin-bottom: 2px;        
    }     
}

.tag-label, .tag-data {
    align-items: center;  
    padding: 5px 0;       
    font-size: 11px;       
    box-sizing: border-box;      
}
@media screen and (max-width: 768px) {    
    .tag-label, .tag-data {
        display: flex;
        align-items: center;
        padding: 5px 0;
        font-size: 11px;       
        box-sizing: border-box;
    } 
}
.tag-label { 
    flex: 0 0 25%;  
    max-width: 100px;
    color: black; 
    font-size: 11px;
    font-weight: 100;             
    background-color: transparent;  
    align-items: center;
    padding: 5px 0; 
}
@media screen and (max-width: 768px) {
    .tag-label {    
        font-size: 11px;   
        flex: 0 0 25%;  
        max-width: 100px;        
        align-items: center;  
    }
}
.tag-data   { 
    flex: 0 0 75%;   
    max-width: 350px; 
    color: black; 
    font-size: 11px;
    font-weight: bold;
    align-items: center;           
    background-color: transparent; 
    padding: 5px 0; 
}
@media screen and (max-width: 768px) {
    .tag-data {          
        font-size: 11px;   
        flex: 0 0 75%;  
        max-width: 350px; 
        word-break: break-word; 
        align-items: center;
        align-self: stretch;   
    }
}

.post-gallery-unit.A, .post-review-unit.A, 
.post-search-unit.A, .post-profile-unit.A {         
    background-color: #e7f5e8; 
}

.post-gallery-unit.B, .post-review-unit.B, 
.post-search-unit.B, .post-profile-unit.B {             
    background-color: #e5f50931; 
}

.posts-gallery-attribution, 
.posts-review-attribution, 
.posts-search-attribution,
.posts-profile-attribution {
    display: flex;
    margin: 0px;
    padding: 0;
    width: 100%;    
    background-color: #e7f5e8;  
    overflow: hidden;      
    box-sizing: border-box;
    height: auto; 
    color:#0056b3;
    font-weight: 600;
    align-items: left;
    font-size: 12px;
    text-align: left;
    line-height: 20px;   
}

@media screen and (max-width: 768px) {
    .posts-gallery-attribution, 
    .posts-review-attribution, 
    .posts-search-attribution,
    .posts-profile-attribution  {
        display: block;         
        width: 100%;
        height: auto; 
        font-size: 9px;
        overflow: hidden;
        text-overflow: ellipsis;   
    }
} 
.inner-attribution {
    width: 100%;   
    background-color: #e7f5e8; 
}

@media screen and (max-width: 768px) {
    .inner-attribution {         
        width: 100%;   
        background-color: #e7f5e8;  
        display: flex;
        height: auto; 
        font-size: 11px;
        margin-left: 0;        
    }
} 
.posts-gallery-media-count-strip, 
.posts-review-media-count-strip,
.posts-search-media-count-strip,
.posts-profile-media-count-strip {
    display: flex;
    width: 100%; 
    margin: 0 auto;  
    text-align: center; 
    white-space: wrap; 
    height: auto;
}

@media screen and (max-width: 768px) {
    .posts-gallery-media-count-strip, 
    .posts-review-media-count-strip,
    .posts-search-media-count-strip,
    .posts-profile-media-count-strip {
        display: flex;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        flex-direction: column;
        height: auto; 
        align-items: center; 
        font-size: 11px;
        white-space: wrap;
    }
}

.posts-gallery-media_unit, 
.posts-review-media_unit,
.posts-search-media_unit,
.posts-profile-media_unit {
    width: 25%; 
    margin: 0;  
    padding: 0; 
    text-align: center;  
    height: auto;  
    line-height: 20px;
    font-size: 12px;  
    font-weight: 600;   
    background-color: #e5f5090a; 
    color:#721c24;  
}

@media screen and (max-width: 768px) {
    .posts-gallery-media_unit, 
    .posts-review-media_unit,
    .posts-search-media_unit,
    .posts-profile-media_unit  {
        display: flex;
        width: 100%;
        height: auto; 
        align-items: left; 
        justify-content: left; 
        line-height: auto; 
        font-size: 11px;        
        padding: 0; 
        margin : 0 auto;     
    }
}


.posts-gallery-reactions_container, 
.posts-review-reactions_container,
.posts-search-reactions_container,
.posts-profile-reactions_container  { 
    display: flex; 
    width: 100%;
    height:100%;
    font-size: 12px;  
    background-color: #e8f0e1;
    margin-bottom: 0px; 
}

@media screen and (max-width: 768px) {
    .posts-gallery-reactions_container, 
    .posts-review-reactions_container,
    .posts-search-reactions_container,
    .posts-profile-reactions_container {  
        width: 100%;       
        font-size: 11px;        
        height: auto; 
        flex-wrap: wrap;
        column-gap: 0px;
        padding: 20px, 0;
        overflow: hidden;
    }
}
.posts-gallery-reactions_container i:hover,
.posts-review-reactions_container i:hover,
.posts-search-reactions_container i:hover,
.posts-profile-reactions_container i:hover {
  cursor: pointer;
}


.inline-label, .inline-label.text {     
    width: 100%;          
    background-color: #2ef30760;            
    text-align: left;
    color: black; 
    font-size: 12px; 
}
.inline-label.text{
    font-weight: bold;
}
@media screen and (max-width: 768px) {
    .inline-label, .inline-label.text {
        display: flex;
        width: 100%;
        flex-direction: column;
        height: auto; 
        align-items: center; 
        white-space: nowrap; 
        overflow: visible;
    }
    .inline-label{       
        background-color: white;
        color: black; 
        flex-wrap: nowrap;
    }
    .inline-label.text{      
        background-color: white;        
        color: rgb(2, 107, 20);
        font-weight: bold;
    }
}

.inline-label.bold, .inline-label.bold.text {
    font-weight: bold;
} 

.panel-header{
    color:#0697f8; 
    text-align: center; 
    font-size: 16px; 
    margin-top: 10px; 
    margin-bottom: 5px;
    margin-right: 10px;
}


@media screen and (max-width: 768px) {
    .panel-header {
        flex-direction: column;
        height: auto;         
        font-size: 14px; 
    }
}

#users-container {
    display: flex;
    flex-direction: column;
    max-width: 600px; 
    margin: 0 auto;  
    box-sizing: border-box;
    font-size: 12px;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 768px) {
    #users-container {
        flex-direction: column;
        width: 100%;
        height: auto;
        font-size: 11px;
    }
}

.user-content-wrapper  {  
    display: flex;
    gap: 20px;   
    align-items: flex-start; 
    flex-wrap: wrap; 
    margin-left: 0;
    margin-right: 20px;
    font-size: 12px;
    height: auto; 
}


@media screen and (max-width: 768px) {
    .user-content-wrapper {
        flex-direction: column;
        height: auto;
    font-size: 12px;
    }
}

.user-details-container   { 
    flex-grow: 1; 
}

@media screen and (max-width: 768px) {
    .user-details-container {
        flex-direction: column;
        height: auto;
    }
}

.user-details-container > .user_biodata {
    font-weight: bold;
}

.user-details-container h3 {
    margin-top: 0; 
    margin-bottom: 10px;
}

.user_bio {
    white-space: nowrap; 
    overflow-x: auto;
}
.user_bio.email {
    margin-right: 40px; 
    color: red;
    font-size: 12px;   
}
.user_bio.phone {
    margin-right: 40px; 
    color: black; 
    font-size: 12px; 
    font-weight: bold;
}
.user_bio.timestamp {
    margin-right: 40px; 
    color: black;
    font-size: 12px;
}
.user_reactions {
    white-space: nowrap; 
    overflow-x: auto;
}
.user_reactions > span {
    margin-right: 20px; 
    font-size: 12px; 
    font-weight: bold;
}
.gapp {
    height: 1em;
}

.user-content-wrapper, 
.user-details-container, 
.user_bio, 
.user_reactions, 
.user_bio span, 
.user_reactions span { 
    word-wrap: break-word; 
    overflow-wrap: break-word; 
    white-space: normal; 
}    

.this_user_modal_overlay, .update_user_modal_overlay { 
    margin : 0 auto; 
    width:100%;
    height: auto; 
    max-height: 40%;
    background: rgba(0,0,0,0.4);
    pointer-events: auto;
    display: block;    
}

@media screen and (max-width: 768px) { 
    .this_user_modal_overlay, .update_user_modal_overlay {
        display: flex;
        width: 100%;
        margin : 0 auto;  
        height: auto;    
        align-items: center;
        padding-top: 40px; 
    } 
}
.this_user_title {
    font-size: 12px;
    font-weight: bolder;
}

@media screen and (max-width: 768px) {
    .this_user_title {
        font-size: 11px; 
    }
}

.user_form_header_text, .this_user_subtitle {
    display: flex;
    font-size: 14px;
    font-weight: bold;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 100%;
    height: 30px;
    margin: auto;
}
@media screen and (max-width: 768px) {
    .user_form_header_text, .this_user_subtitle {
        font-size: 12px; 
    }
}
.user_data_holder {
    position: absolute;   
    display: flex;
    flex-direction: column;      
    top: 20%;
    left: 50%; 
    transform: translateX(-50%);    
    width: 450px; 
    height: auto; 
}

@media screen and (max-width: 768px) {
    .user_data_holder {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
        height: 460px;
        top: 60%; 
        word-wrap: break-word; 
        overflow-wrap: break-word; 
        white-space: normal; 
    }
}

.userBarHeader, #user-data-header {
    background:#f0f5aa41;
    width: 440px;         
    top: 20%; 
    cursor: move;       
    height: 30px;  
    font-size: 14px; 
}

@media screen and (max-width: 768px) {
    .userBarHeader {
        display: flex;
        max-width: 100%;
        top: 60%; 
        margin: 0 auto;
        align-items: center;
        font-size: 10px !important;  
    }
}

.userData {
    display: flex;
    flex-direction: column;
    background:#aad3f541;
    width: 100%;
    height: 275px;
}
 
.userBar {
    display: flex;
    flex-direction: row;
    background:#aad3f541;
    width: 100%;
    height: auto;   
}

.userBarA {
    background:#aad3f541;
    width: 150px;
    height: 25px;
    font-size: 14px;    
}

.userBarB {
    display: flex;
    background:#dcbaf741;   
    width: 300px;
    height: 25px;
    font-size: 14px;
    flex-wrap: nowrap;     
}

@media screen and (max-width: 768px) {
    .userBarA, .userBarB {
        display: flex;
        margin: 0 auto;
        padding: 0 10px;
        font-size: 12px;
        align-items: center;
    }
}

.userButtonBar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;    
    width: 100%;
    height: auto;
    gap: 10px;   
}

@media screen and (max-width: 768px) {
    .userButtonBar {
        display: flex;
        flex-direction: row; 
        max-width: 100%;
        margin: 0 auto;
        align-items: center; 
        gap: 0; 
        padding: 0;
        margin: 0;
        border: 0;
    }
}
.btn-outline-primary.update_user,
.btn-outline-primary.hide_user,
.btn-outline-primary.edit_user_roles,
.btn-outline-primary.delete_user {
    padding-bottom: 5px 2px 25px 2px;
}
.user_form_holder  {
    position: fixed; 
    top: 50%; 
    left: 50%; 
    transform: translateX(-50%);
    width: 450px; 
    height:   480px; 
    box-sizing: border-box;
    border:#f9e508 5px solid;
    background-color: #b4b3b3; 
    z-index: 9999;  
    display: none;
    overflow: auto;
}
@media screen and (max-width: 768px) {
    .user_form_holder {
        display: flex;
        flex-direction: column;
        height: auto;
        width: 100%; 
        word-wrap: break-word; 
        overflow-wrap: break-word; 
        white-space: normal; 
        align-items: center; 
    }
}
.user_form_header {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 440px;
    max-height: 30px; 
    line-height: 30px;
    background-color: #b4b3b3;
    cursor: move;        
}

@media screen and (max-width: 768px) {    
    .user_form_header {
        display: flex;
        flex-direction: row;
        max-height: auto;
        width: 100%;
        word-wrap: normal;
    }
}

.echelon_display_user {    
    display: flex; 
    max-width: 450px; 
    box-sizing: border-box;
    height: auto; 
}
@media screen and (max-width: 768px) {
    .echelon_display_user {        
        flex-direction: column; 
        width: 100%; 
    }
}
.user_tab_wrapper  { 
    display: flex;
    flex-direction: row; 
    max-width: 450px; 
    height: auto; 
    background-color: rgb(225, 246, 200); 
}

@media screen and (max-width: 768px) {
    .user_tab_wrapper {  
        display: flex;       
        flex-direction: column;
        width: 100%; 
        max-width: 450px;
        flex-wrap: wrap;
    }
}

.user_tab-set  { 
    flex: 1;
    flex-direction: column;      
    width: 450px;    
    height: auto; 
    background-color: #f1f1f1;
    border: 1px solid #ccc;
}

@media screen and (max-width: 768px) {
    .user_tab-set {        
        flex-direction: column;
        width: 100%; 
        align-items: center;
        justify-content: center;
    }
}

.user_tab-label-1  {
    display: flex;     
    flex-direction: row;  
    flex-wrap: nowrap;
    gap: 0; 
    padding: 0; 
    margin: 0; 
    border: 1px solid #ccc;
    background-color: #f7ecec;
    width: 440px;
    height: 60px;
    line-height: normal; 
    font-size: 12px;
}
@media screen and (max-width: 768px) {
    .user_tab-label-1 { 
        display: flex;       
        flex-direction: row;
        flex-wrap: nowrap;
        width:100%;
        max-width: 440px;
        height: 60px;
        font-size: 12px;
        white-space: nowrap;
    }
}

.user_tab-content {      
    display: none; 
    background-color: #ebeed5;
    width: 400px;  
    min-height: 45px;
    padding: 0 20px;
    flex-wrap: nowrap;      
}

@media screen and (max-width: 768px) {
    .user_tab-content {
        display: none; 
        width: 90%; 
        padding: 0;
        margin: 0; 
        border: 0;
        align-items: center;
        height: auto; 
        align-content: center;
        justify-items: center;        
    }
}

.user_tab-content.active  {
    display: block;
}

.user_select_field { 
    display: block;  
    margin-left: 20px;
    width: 100%;
    height: 40px;
    font-size: 16px;
    background-color: #d3d3f5;
    border: 2px solid; 
    border-radius: 10px;
}

@media screen and (max-width: 768px) {
    .user_select_field {
        font-size: 12px;
        width: 100%;
        min-height: 45px; 
    }
}

.populate_with_wrapper{
 display: flex; 
 flex-direction: row;
}


.user_tab-button   { 
    display: flex; 
    align-items: center; 
    justify-content: center;
    width: 100px;
    height: 60px;
    padding: 0; 
    margin: 0; 
    white-space: nowrap;
    background-color: #ebeed5;
    font-family: inherit;
    cursor: pointer;
    font-size: 12px; 
}
@media screen and (max-width: 768px) {
    .user_tab-button { 
        max-width: 90px;
        height: 60px; 
        font-size: 12px; 
        white-space: nowrap;
        border:#f9e508 1px solid;
        text-wrap: wrap;
    }
}
.user_tab-button[aria-selected="true"]   {
    background-color: #eefac3;
    font-weight: bold;
}
.user_tab-button:hover   {
    background-color: #cfe3ff;
    font-weight: bold;
}
.user_tab-button:active  {
    background-color: #ccc;
    font-weight: bold;
}
.user_tab-button.filled {
  background-color: #90f0a7; 
  border-color: #d4edda; 
  color: #155724;
}

.user_submitcancelbuttons_entity   {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    row-gap: 10px; 
    padding: 0; 
    margin: 0;
    width: 440px;
    height: 60px;    
}

@media screen and (max-width: 768px) {
    .user_submitcancelbuttons_entity {
        width: 100%; 
        height: auto;
        row-gap: 5px;

    }
}
.user_submit_buttons_entity  { 
    display: flex;     
    width : 100px; 
    height: 45px;
    padding: 0; 
    margin: 0; 
    white-space: nowrap;
    font-size: 12px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: 8px; 
}

@media screen and (max-width: 768px) {
    .user_submit_buttons_entity {
        display: flex;
        max-width: 120px; 
        width: 100%;
        height: auto;
        padding: 0; 
        margin: 0; 
        white-space: nowrap;
        font-size: 12px;  
    }
}


.user_cancel_button_entity  { 
    width : 120px;
    height: 45px;
    padding: 0; 
    margin: 0; 
    white-space: nowrap;
    font-size: 12px;
    align-items: center;
    justify-content: center;
    cursor: pointer;     
}

@media screen and (max-width: 768px) {
    .user_cancel_button_entity {
        display: flex;
        width: 120px; 
        max-width: 100%;
        height: auto;
        padding: 0; 
        margin: 0; 
        white-space: nowrap;
        font-size: 12px;  
    }
}
.user_cancel_button  { 
    display: flex;      
    width: 100%; 
    max-width: 120px;
    height: 40px;
    font-size: 12px;
    background-color: #773d6f;
    border: 2px solid; 
    cursor: pointer;
    vertical-align: middle;
}
.user_submit_button.signup, .user_submit_button.biodata {
    width: 120px;
    font-size: 12px;
    background-color: #d9d9da;
    border: 2px solid; 
    border-radius: 10px;
    cursor: pointer;
    vertical-align: middle;
} 

.user_submit_button_add_role:focus, 
.user_submit_button_remove_role:focus,
.user_cancel_button:focus, 
.cancel_button:focus{ 
    background-color: #f0eee8;
}  
.user_submit_button_add_role.filled,  .user_submit_button_remove_role.filled {
  background-color: #28a745; 
  border-color: #28a745;
  color: #155724;
}


.btn-outline-primary.user_submit_button_add_role, 
.btn-outline-primary.user_submit_button_remove_role, 
.btn-outline-primary.user_cancel_button  {
    display: flex;
    flex-direction: row;        
    font-size: 12px;          
}
    
.user_help_section, .search_help_section {
    margin-bottom: 1rem;
}

.user_help_toggle, .search_help_toggle {
    background: #eee;
    border: 1px solid #ccc;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
}

.user_help_content, .search_help_content {
    margin-top: 0.5rem;
    padding: 0.75rem;
    border: 1px solid #ddd;
    background: #fafafa;
    font-size: 0.9rem;
}
@media screen and (max-width: 768px) {
    .user_help_content, .search_help_content { 
        width: 100%;
        height: auto; 
        font-size: 11px; 
        white-space: wrap;
        border:#f9e508 1px solid;
        text-wrap: wrap;
    }
}

.update_user_title, .update_post_title {
    font-size: 13px;
}

@media screen and (max-width: 768px) {
    .update_user_title, .update_post_title {
        font-size: 12px; 
    }
}
.user_data_holder.update, .post_data_holder.update {
    position: absolute;     
    display: flex;
    flex-direction: column;      
    top: 30%; 
    left: 50%; 
    transform: translateX(-50%);        
    width: 450px;   
    height: auto; 
    padding: 0 20px; 
}
@media screen and (max-width: 768px) {
    .user_data_holder.update, .post_data_holder.update {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
        height: 460px;
        top: 80%; 
        word-wrap: break-word; 
        overflow-wrap: break-word; 
        white-space: normal; 
    }
}

.userBarHeader.update, .postBarHeader.update {
    display: flex;
    flex-direction: row;
    background:#f0f5aa41;
    top: 30%;
    width: 100%;  
    cursor: move;       
    height: 30px; 
    font-size: 14px;
}

@media screen and (max-width: 768px) {
    .userBarHeader.update, .postBarHeader.update {
        display: flex;
        width: 100%; 
        height: auto;
        top: 80%;
        margin: 0;
        align-items: center;         
    }
}
.update_user_header_text, .update_post_header_text {
    flex: 1; 
    font-size: 14px;
}
.update_user_header_button, .update_post_header_button {
    width: 10%; 
    background:#f0f5aa41;
    text-align: center; 
    cursor: pointer
}
.userData.update, .postData.update {
    display: flex;
    flex-direction: column;
    background:#aad3f541;
    width: 100%;
    height: 350px;
}
 
.userBar.update, .postBar.update {
    display: flex;
    flex-direction: row;
    background:#aad3f541;
    width: 100%;
    height: auto;   
}

.userBarA.update, .postBarA.update{
    background:#aad3f541;    
    width: 150px;  
    height: 30px; 
    font-size: 14px; 
    margin-left: 10px;     
}

.userBarB.update, .postBarB.update {
    display: flex;
    background:#dcbaf741;
    width: 300px;
    height: 30px;
    font-size: 14px;
    flex-wrap: nowrap;     
}
@media screen and (max-width: 768px) {
    .userBarA.update, .userBarB.update,
    .postBarA.update, .postBarB.update {
        display: flex;
        margin: 0 auto;
        padding: 0 10px;
        font-size: 12px;
        align-items: center;
    }
}

.userButtonBar.update, .postButtonBar.update {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;    
    width: 100%;
    height: auto;
    gap: 10px;
}

@media screen and (max-width: 768px) {
    .userButtonBar.update, .postButtonBar.update {
        display: flex;
        flex-direction: row; 
        max-width: 100%;
        margin: 0 auto;
        align-items: center; 
        gap: 0; 
        padding: 0; 
        margin: 0;
        border: 0;
    }
}

.update_user_form_holder, .update_post_form_holder {
    position: fixed; 
    top: 30%; 
    left: 50%;
    transform: translateX(-50%);
    width: 450px;  
    height:  440px; 
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    border:#f9e508 1px solid;
    background-color: #b4b3b3; 
    z-index: 9999;
    display: none;
    animation: slideUp 0.5s ease-out forwards;
    overflow: hidden;      
}
@media screen and (max-width: 768px) {
    .update_user_form_holder, .update_post_form_holder {
        display: flex;
        flex-direction: column;
        height: 440px;
        top: 20%; 
        width: 100%;
        word-wrap: break-word; 
        overflow-wrap: break-word; 
        white-space: normal; 
        align-items: center; /* new  */ 
    }
}

.user_form_header.update, .post_form_header.update {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 0;
    margin: 0;    
    height: 30px;  
    background-color: #8cf306;
    cursor: move;        
    align-items: center;
    justify-content: center;
}

@media screen and (max-width: 768px) {    
    .user_form_header.update, .post_form_header.update {
        display: flex;
        flex-direction: row;           
        width: 100%;
        word-wrap: normal;
    }
}

.echelon_display_user.update, .echelon_display_post.update {    
    display: flex; 
    flex-direction: column;
    width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    height: 460px;
}

@media screen and (max-width: 768px) {
    .echelon_display_user.update, .echelon_display_post.update {     
        flex-direction: column;
        width: 100%; 
    }   
}

.user_tab-set.antidote, .post_tab-set.antidote {
    display: flex; 
    flex-direction: column;
    width: 100%;   
    height: auto;   
    background-color: #f1f1f1;
    padding: 0;
    margin: 0;
    border: 5px solid #0936fc;
}

@media screen and (max-width: 768px) {
    .user_tab-set.antidote, .post_tab-set.antidote  {        
        flex-direction: column; 
        width: 100%; 
        align-items: center;
        justify-content: center;
    }
}

.user_tab-label-1.antidote, .post_tab-label-1.antidote  {
    display: flex;     
    flex-direction: row;  
    flex-wrap: nowrap; 
    gap: 0; 
    padding: 0; 
    margin: 0; 
    border: 1px solid #ccc;
    background-color: #f7ecec;
    width: 100%;
    height: 30px;
    font-size: 12px;
}

@media screen and (max-width: 768px) {
    .user_tab-label-1.antidote, .post_tab-label-1.antidote { 
        display: flex;       
        flex-direction: row;
        flex-wrap: nowrap; 
        width: 100%;
        height: 30px;
        font-size: 12px;
        white-space: nowrap;
        
    }
}

.user_data_wrapper, .post_update_data_wrapper {
    display: flex; 
    flex-direction: column;  
    width: 100%; 
    padding-top: 15px;
    margin: 0;
    height: 300px; 
}

@media screen and (max-width: 768px) {
    .user_data_wrapper, .post_update_data_wrapper  {        
        flex-direction: column;
        width: 100%; 
        align-items: center;
        justify-content: center;
    }
}

.userform_entity, .postform_entity, .userform_entity.radio { 
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; 
    width: 100%; 
    padding: 0;
    margin: 0;
    height: 45px;  
} 

@media screen and (max-width: 768px) {
    .userform_entity, .postform_entity {
        height: auto;   
        font-size: 14px;     
        width: 100%; 
        padding: 0; 
        margin: 0; 
        border: 0;
        align-items: center;
        height: auto; 
        align-content: center;
        justify-items: center;
    }
}
.userform_label, .postform_label  {    
    width: 30%;  
    height: 45px;  
    line-height: normal;  
    font-size: 14px; 
}

.userform_data, .postform_data {       
    width : 70%;
    height: 45px;    
    text-align: left;
    font-size: 16px; 
    align-items: left; 
    cursor: text;
} 


.user_control_buttons_entity, .post_control_buttons_entity {  
    display: flex;    
    flex-direction: row;
    flex-wrap: nowrap;    
    width: 450px; 
    height: 60px;
    margin: 0;
    padding: 0 20px; 
    text-align: left;
    align-items: center;
    justify-content: center;   
}


@media screen and (max-width: 768px) {
    .user_control_buttons_entity, .post_control_buttons_entity {
        margin-top: 10px;
        width: 100%;
        max-width: 450px;
        height: auto;
        row-gap: 5px;        
    }
}

.user_submit_buttons_entity.update, .post_submit_buttons_entity.update {
    margin-right: 25px;
}
.user_cancel_button_entity.update, .post_cancel_button_entity.update {
    margin-left: 25px;

}
.user_create_form_holder {     
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 600px;
    height: auto; 

}

.message {
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
    font-weight: bold;
}
.message.info { background-color: #e0f7fa; color: #00796b; }
.message.error { background-color: #ffebee; color: #c62828; }


.create_user_form_holder  {
    position: absolute;
    width: 90%; 
    max-width: 600px;
    height:   auto;
    max-height: 85vh;   

    box-sizing: border-box;
    border:#f9e508 5px solid;
    background-color: #b4b3b3;
    z-index: 9999;     
    display: none; 
    overflow-y: auto; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
}
.user_form_header.create {
    height: 5vh;      
    min-height: 30px;    
    display: flex;
    align-items: center;
    padding: 0 10px;
}

@media screen and (max-width: 768px) {
    .create_user_form_holder { 
        background: #fff; 
        border-radius: 6px; 
        width: 100%; 
        max-width: 500px; 
        box-sizing: border-box; 
        max-height: 90vh; 
        overflow-y: auto; 
        padding-bottom: 20px; 
    }
    
    .echelon_display_user, 
    .user_data_wrapper { 
        width: 100%; 
        box-sizing: border-box; 
    }
       
    .user_form_header.create {
        flex: 0 0 40px; 
        display: flex;
        flex-direction: row;
        max-height: auto;
        width: 100%;
        word-wrap: normal;
        align-items: center; 
    }
    
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 5px; 
    white-space: nowrap;
} 

.userform_data.radio  { 
    display: flex; 
    flex-direction: row;
    flex-wrap: wrap;  
    gap : 15px;
}

@media screen and (max-width: 768px) {
    .userform_entity.radio {
        flex-direction: column; 
        height: auto;           
        min-height: 45px;       
        padding: 10px 0;    
    }
    .userform_data.radio {
        display: flex; 
        flex-direction: column !important;
        align-items: flex-start;
        height: auto; 
        width: 100%;        
    }

    .radio-option {
        display: flex;  
        width: 100%;    
        align-items: center; 
        width: 100%;
        padding: 5px 0;
    }
}

.echelon_display_user.create {    
    display: flex; 
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    height: 330px; 
}

@media screen and (max-width: 768px) {
    .echelon_display_user.create {         
        flex-wrap: nowrap;
        width: 100%;
        overflow-x: auto; 
        white-space: nowrap;
        align-items: normal;
    }   
}

.user_tab-label-1.create  {
    display: flex;     
    flex-direction: row;  
    flex-wrap: nowrap;  
    border: 1px solid #ccc;
    background-color: #f7ecec;
    width: 100%;
    height: 45px;  
}


.user_tab-button.create { 
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 10px 10px;
    transition: 0.3s;
    font-size: 16px;  
    height: auto;  
}
.user_tab-button.create[aria-selected="true"]   {
    background-color: #eefac3;
    font-weight: bold;
}
.user_tab-button.create:hover   {
    background-color: #cfe3ff;
    font-weight: bold;
}
.user_tab-button.create:active  {
    background-color: #ccc;
    font-weight: bold;
}
.user_tab-button.create.filled {
  background-color: #90f0a7; 
  border-color: #d4edda; 
  color: #155724;
}

.radiofield.user {
    display: flex;   
    width : 50px;
    height: 15px;  
    gap: 5px;
    flex-wrap: nowrap;
    align-items: center;
    font-size: 16px;
}


.user_tab-set.create {
    flex: 1;
    flex-direction: column;
    overflow: hidden;  
    width: 100%;
    max-width: 600px; 
    height: 240px; 
    background-color: #f1f1f1;
}



.user_submittals_entity  { 
    display: flex;     
    width : 50%;   
    height: 45px;
    align-items: center;
    justify-content: center;
}


.user_submit_button.signup.filled, .user_submit_button.biodata.filled {
  background-color: #28a745; 
  border-color: #28a745;
  color: #155724;
}
.create_user_label  {
    display: block;
    width: 40%;
    height: 45px;
    line-height: 45px;
    text-align: center;
    font-size: 14px;
    
}
.create_user  { 
    display: block;   
    width : 95%;
    height: 45px;    
    text-align: left;
    font-size: 14px; 
    align-items: left; 
    line-height: 45px; 
    cursor: text;
} 
.create_user.password-field {    
    padding-left: 0px;
}

.create_user.password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

button.posts_review:disabled {
    opacity: 0.75;
    cursor: not-allowed;
}
.disabled-feature {
    opacity: 0.6;             
    cursor: not-allowed;      
    position: relative;
}
.spinnerX.posts_review {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid #ccc;
    border-top: 3px solid #0992ee;
    border-radius: 50%;
    animation: spinX 0.8s linear infinite;
}

@keyframes spinX {
    to { transform: rotate(360deg); }
}           


.modal.posts_review {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex; justify-content: center; align-items: center;
}
.modal-content.posts_review {
    position: absolute;     
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    width: 50%;
    max-height: 80%;
    overflow-y: auto;
}
.close.posts_review {
    float: right;
    cursor: pointer;
    font-size: 24px;
}
.bannerContainer  { 
    max-width: 800px;
    margin: 0 auto;  
    padding: 0 20px; 
    text-align: left;
}

@media screen and (max-width: 768px) {
    .bannerContainer {
        display: flex;
        width: 100%;
        flex-direction: column;
        height: auto;
        align-items: center; 
        
    }
}

.bannerContainer.thispost_review  { 
    width: 92%; 
    height: 100%;
    box-sizing: border-box;
    margin-left: 5%; 
}
@media screen and (max-width: 768px) {
    .bannerContainer.thispost_review {
        flex-direction: column;
        height: auto; 
        align-items: center;
        margin-left: 5%; 
        padding: 20px 0;
    }
}
.contents.thispost_review {
    width: 100%;
    height: 80%;  
    border:#f98808 3px solid;
}
@media screen and (max-width: 768px) {
    .contents.thispost_review{
        flex-direction: column;
        height: auto;
    }
}

.echelon_post.thispost_review {
    height: 750px; 
}

.form_holder.thispost_review {
    display: flex;
    flex-direction: row;
    width: 98%;
    height: auto; 
    box-sizing: border-box;
    gap: 10px;
    align-items: center;
    align-content: center;
    overflow-y: auto;
    margin: 5px 5px;
}
@media screen and (max-width: 768px) {
    .form_holder.thispost_review {
        flex-direction: column;
        height: auto;
    }
} 

.modal.thispost_review {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex; 
    justify-content: center; 
    align-items: center;
    z-index: 1050;
}
.modal-content.thispost_review {
    position: absolute;     /*  for dragging */
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    width: 50%;
    max-height: 80%;
    overflow-y: auto;
}
.close.thispost_review {
    float: right;
    cursor: pointer;
    font-size: 24px;
}

.caption > h4 {
    color: black;
}
.post-body > p {
    color: black;
    font-size:14px;
}

.post_label.version {
    color: blue;
}
.post_data.version {
    color: red;
}

.post_label.blue {
    color: blue;
}

.thispost_formheader {
    width: 80%;
    text-align: center;
    margin-bottom: 25px;
    color: #333;
    border-bottom: 2px solid #007bff; 
    padding-bottom: 10px; 
    cursor: move;       
}

#createPostReviewContainer {
    max-width: 500px; 
    margin: 20px auto; 
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); 
    background-color: #fff;
    font-family: Arial, sans-serif;
}


#postreviewForm > div {
    margin-bottom: 18px;
}

#postreviewForm label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
    font-size: 0.95em;
}

.form_dropdown {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
  font-family: inherit;
  color: #333;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;

  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* Hover */
.form_dropdown:hover {
  border-color: #888;
}

/* Focus */
.form_dropdown:focus {
  border-color: #4a90e2;
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.25);
  outline: none;
}

/* Disabled */
.form_dropdown:disabled {
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

.btn-outline-primary {
    background-color: transparent;
    color: #0070ba; /* PayPal Blue */
    border: 2.25px solid #0070ba;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 50px; 
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    cursor: pointer;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    
}

@media screen and (max-width: 768px) {
    .btn-outline-primary {
        flex-direction: column;
        height: auto;
        width: auto; 
        max-width: 100%; 
        font-size: 12px;       
    }
}

.btn-outline-primary:hover {
    background-color: #0070ba;
    color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 112, 186, 0.3);
    transform: translateY(-1px);
}

.btn-outline-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 112, 186, 0.2);
}
    
.btn-outline-primary.submit_comment{
    background-color: #007BFF;
    color: white;
}

.btn-outline-primary.cancel_comment{
    background-color: #f55e06;
    color: white;
}

.btn-outline-primary.submit_reply, .btn-outline-primary.submit_user_update, 
.btn-outline-primary.submit_post_update, .btn-outline-primary.submit_post_delete {
    background-color: #007BFF;
    color: white;
}

.btn-outline-primary.cancel_reply, .btn-outline-primary.cancel_user_update, 
.btn-outline-primary.cancel_post_update {
    background-color: #f55e06;
    color: white;
}

.btn-outline-primary.update_user.a{
    background-color: #007BFF;
    color: #ffffff; 
    cursor: pointer;
}

.btn-outline-primary.edit_user_roles {
    background-color: #f7be06;
    color: #007BFF; 
    cursor: pointer;
}

.btn-outline-primary.delete_user {
    background-color: #f36229;
    color: #007BFF; 
    cursor: pointer;
}

.btn-outline-primary.thispost_review {
    background-color: #f7be06;
    color: #ffffff; 
    cursor: pointer;
    margin:  5px 5px;
}
.btn-outline-primary.search_post_submit_button {
    background-color: #81f173; 
    color: black;
}
.btn-outline-primary.search_post_reset_button {
    background-color: #e7e7ce;
    color:black; 
}
.btn-outline-primary.search_post_cancel_button {
    background-color: #773d6f;
    color: black; 
}


.btn-outline-primary.frontpage_login_submit_button {
    background-color: #81f173; 
    color: black;
}
.btn-outline-primary.frontpage_login_reset_button {
    background-color: #e7e7ce;
    color:black; 
}
.btn-outline-primary.frontpage_login_cancel_button {
    background-color: #773d6f;
    color: black; 
}

.btn-outline-primary.frontpage_signup_submit_button {
    background-color: #81f173; 
    color: black;
}
.btn-outline-primary.frontpage_signup_reset_button {
    background-color: #e7e7ce;
    color:black; 
}
.btn-outline-primary.frontpage_signup_cancel_button {
    background-color: #773d6f;
    color: black; 
}

.btn-outline-primary.frontpage_biodata_submit_button {
    background-color: #81f173; 
    color: black;
}
.btn-outline-primary.frontpage_biodata_reset_button {
    background-color: #e7e7ce;
    color:black; 
}
.btn-outline-primary.frontpage_biodata_cancel_button {
    background-color: #773d6f;
    color: black; 
}

.btn-outline-primary.frontpage_login_submit_button, 
.btn-outline-primary.frontpage_login_reset_button, 
.btn-outline-primary.frontpage_login_cancel_button,
.btn-outline-primary.frontpage_signup_submit_button, 
.btn-outline-primary.frontpage_signup_reset_button, 
.btn-outline-primary.frontpage_signup_cancel_button,
.btn-outline-primary.frontpage_biodata_submit_button, 
.btn-outline-primary.frontpage_biodata_reset_button, 
.btn-outline-primary.frontpage_biodata_cancel_button  {
    display: flex;
    width: 100px;
    height: 40px;
    flex-direction: row;        
    font-size: 12px;
    align-items: center;
    text-align: center;
    margin-left: 0;
    padding: 5px 5px;
    margin: 0 auto;          
}


.btn-outline-primary.user_submit_button_add_role {
    background-color: #81f173; 
    color: black;
}
.btn-outline-primary.user_submit_button_remove_role {
    background-color: #e7e7ce;
    color:black; 
}
.btn-outline-primary.user_cancel_button {
    background-color: #773d6f;
    color: black;

    width: 100px;
    height: 45px;
    font-size: 12px; 
}


.btn-outline-primary.user_submit_button_signup,
.btn-outline-primary.user_submit_button_biodata {
    background-color: transparent; 
    color: black;
    width: 100px;
    height: 45px;
    font-size: 12px;
    justify-content: center;
    align-items: center;
    align-content: center;
    padding-left: 2px;
}

.btn-outline-primary.button_resetIssueTabs {
    background-color: transparent; 
    color: black;
}
.btn-outline-primary.buttonSwitch {
    background-color: transparent;
    color:black; 
}
.btn-outline-primary.button_resetLocationTabs {
    background-color: transparent;
    color: black; 
}

.btn-outline-primary.prev-btn, .btn-outline-primary.prev-btn-user {
    background-color: transparent; 
    color: #0697f8;
}
.btn-outline-primary.next-btn, .btn-outline-primary.next-btn-user {
    background-color: transparent;
    color: #0697f8; 
}
.btn-outline-primary.refreshFeed-btn, .btn-outline-primary.refreshFeed-btn-user {
    background-color: transparent;
    color: #0697f8; 
}
.btn-outline-primary.jumpToLatest-btn, .btn-outline-primary.jumpToLatest-btn-user {
    background-color: transparent; 
    color: #0697f8;
}
.btn-outline-primary.offset-mode-btn, 
.btn-outline-primary.cursor-mode-btn,
.btn-outline-primary.btn_loadpage {
    background-color: transparent;
    color:#0697f8; 
}

@media screen and (max-width: 768px) {
    .btn-outline-primary.prev-btn, .btn-outline-primary.prev-btn-user,
    .btn-outline-primary.next-btn, .btn-outline-primary.next-btn-user,
    .btn-outline-primary.refreshFeed-btn, .btn-outline-primary.refreshFeed-btn-user,
    .btn-outline-primary.jumpToLatest-btn, .btn-outline-primary.jumpToLatest-btn-user,
    .btn-outline-primary.offset-mode-btn, .btn-outline-primary.cursor-mode-btn,
    .btn-outline-primary.btn_loadpage {
        width: 150px;
        height: 45px;
        font-size: 12px;
    }
}

/* Base Outline Style */
.btn-custom-submit {
    border: 2px solid #007bff;
    color: #007bff;
    background-color: transparent;
    transition: all 0.3s ease;
    font-weight: 600;
}


.btn-custom-submit.filled {
    background-color: #007bff;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
    transform: translateY(-1px);
}


.btn-custom-submit:disabled {
    border-color: #ccc;
    color: #999;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}
 
.flash_success{
    margin: auto;
    width: 99%;
    height: 50px;
    background-color: #28a745;
    color: black;
    justify-content: center;
    align-content: center;
    font-size: 18px;
}

.flash_info  {
    margin: auto;
    width: 99%;
    height: 50px;
    background-color: #17a2b8;
    color: black;
    justify-content: center;
    align-content: center;
    font-size: 18px;
}

.flash_warning  {
    margin: auto;
    width: 99%;
    height: 50px;
    background-color: #ffc107;
    color: black;
    justify-content: center;
    align-content: center;
    font-size: 18px;
}

.flash_error  {
    margin: auto;
    width: 99%;
    height: 50px;
    background-color: #dc3545; ;
    color: black;
    justify-content: center;
    align-content: center;
    font-size: 18px;
}

.flash_danger {
    margin: auto;
    width: 99%;
    height: 50px;
    background-color: #f7e5d5;
    color: crimson;
    justify-content: center;
    align-content: center;
    font-size: 18px;
}

#addmemberFormThis label, #groupmessageFormThis label { 
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
    font-size: 0.95em;
}

#addmemberFormThis input[type="text"], #groupmessageFormThis input[type="text"],
#createadminFormThis input[type="text"], #invitememberFormThis input[type="text"], 
#inviteresponseFormThis input[type="text"],#removegroupmemberFormThis input[type="text"],
#removeadminFormThis input[type="text"], 
#groupmessageFormThis textarea, #invitememberFormThis textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; 
    font-size: 1em;
    transition: border-color 0.3s, box-shadow 0.3s;
}

#addmemberFormThis input[type="text"]:focus, #groupmessageFormThis input[type="text"]:focus,
#createadminFormThis input[type="text"]:focus,#invitememberFormThis input[type="text"]:focus, 
#inviteresponseFormThis input[type="text"]:focus, 
#removegroupmemberFormThis input[type="text"]:focus,
#removeadminFormThis input[type="text"]:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    outline: none;
}

#addmemberFormThis button[type="submit"], #groupmessageFormThis button[type="submit"],
#createadminFormThis button[type="submit"], #invitememberFormThis button[type="submit"], 
#inviteresponseFormThis button[type="submit"], #removegroupmemberFormThis button[type="submit"],
#leavegroupFormThis button[type="submit"], #removeadminFormThis button[type="submit"] {
    display: block;
    width: 80%;
    padding: 12px;
    background-color: #007bff; /* Primary brand color */
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s;
}


#addmemberFormThis button[type="submit"]:hover, #groupmessageFormThis button[type="submit"]:hover,
#createadminFormThis button[type="submit"]:hover, #invitememberFormThis button[type="submit"]:hover, 
#inviteresponseFormThis button[type="submit"]:hover, #removegroupmemberThis button[type="submit"]:hover,
#leavegroupFormThis button[type="submit"]:hover, #removeadminFormThis button[type="submit"]:hover {
    background-color: #0056b3;
}

#addmemberFormThis button[type="submit"]:active, #groupmessageFormThis button[type="submit"]:active,
#createadminFormThis button[type="submit"]:active, #invitememberFormThis button[type="submit"]:active, 
#inviteresponseFormThis button[type="submit"]:active, #removegroupmemberThis button[type="submit"]:active
#leavegroupFormThis button[type="submit"]:active, #removeadminFormThis button[type="submit"]:active {
    transform: scale(0.99);
}

#invitememberFormThis input[type="radio"],
.radio-option input[type="radio"] {
    appearance: none; 
    width: 18px;
    height: 18px;
    border: 2px solid #666;
    border-radius: 50%;
    margin-right: 8px;
    position: relative;
    transition: border-color 0.2s ease-in-out;
}

#invitememberFormThis input[type="radio"]:checked,
.radio-option input[type="radio"]:checked {
    border-color: #007bff;
    background-color: #007bff;
}

#invitememberFormThis input[type="radio"]:checked::after
.radio-option input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
}

#invitememberFormThis .radio-option label {
    font-size: 0.95rem;
    color: #444;
}

.badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: bold;
    text-transform: uppercase;
}

.badge-success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.badge-warning { background-color: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
.badge-danger  { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.badge-info    { background-color: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
.badge-secondary { background-color: #bfd1f5; color: #383d41; border: 1px solid #d6d8db; }


.text-nowrap { white-space: nowrap; }
.text-muted { color: #6c757d; }

#set-accountsperiod-btn, #set-accounts-timeperiod-btn, 
#set-donationsperiod-btn, #set-donations-timeperiod-btn,
#set-subscriptionsperiod-btn, #set-subscriptions-timeperiod-btn, 
#set-financialsummary-period-btn, #set-financialsummary-timeperiod-btn {
  background: #ffc107;
  color: #333;
  cursor: pointer;
}

.update-notification-toast {
    position: fixed;
    top: 20px; /* Shifted slightly from top for visibility */
    left: 50%;
    transform: translateX(-50%);
    background-color: #2c3e50;
    color: #ffffff;
    padding: 10px 15px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    z-index: 10001; /* Higher than almost everything */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    transition: opacity 0.3s ease;
    animation: slideDown 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.toast-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toast-button {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 6px 14px;
    cursor: pointer;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    transition: background 0.2s;
}

.toast-button:hover {
    background-color: #2980b9;
}

.toast-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.6);
    font-size: 22px;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
}

.toast-close:hover {
    color: white;
}

@media screen and (max-width: 768px) {
    .update-notification-toast {
        width: calc(100% - 30px); /* Leave 15px margin on each side */
        top: 15px;
        padding: 12px;
    }

    .toast-message {
        font-size: 14px;
    }
}

@keyframes slideDown {
    from { transform: translate(-50%, -150%); }
    to { transform: translate(-50%, 0); }
}
.btn-loading {
    position: relative;
    pointer-events: none;
    background-color: #ccc !important; /* Visual cue that it is disabled */
}

.btn-loading::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 0.8s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}