/* Global styles */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

a {
    display: inline-block;
}

/* 2-column layout styles */
.container {
  display: flex;
}

.menu {
  flex-basis: 25%; /* Set the width of the menu column */
  background-color: #f1f1f1;
  padding: 20px;
}

.main-content {
  flex-grow: 1; /* Allow the main content to grow and take the remaining space */
  padding: 20px;
}

.infoDiv {
    padding-top: 0px;
    margin-top: 0px;
    margin-bottom: 0px
}

.infoBox {
    line-height: normal;
    padding-top: 0px;
    margin-top: 0px;
    margin-bottom: 0px
}

.listings {
    background-color: #f0f0f0;
    color: #333;
    padding: 10px;
    margin: 10px;
    border: 1px solid #e5e5e5;
}

.listings p {
    margin: 0px;
}

.listings-admin {
    background-color: #f0f0f0;
    color: #333;
    padding: 0px;
    margin: 10px;
    border: 1px solid #e5e5e5;
}

.chargn-side-menu {
    display:block;
    width: 260px;
}
.chargn-side-menu-mobile {
    display:none;
}
.subheader-user {
    display:block;
}

/* ------------------------------------------------------------- */
/* Styles for mobile devices */
/*
@media (max-width: 1024px) {
    section {
        padding-left:0px !important;
        padding-right:0px !important;

    }

    .menu {
        padding:0px;
    }

    .chargn-side-menu {
        display:none;
    }

    .chargn-side-menu-mobile {
        display:block;
    }

    .subheader-user {
        display:none;
    }
}
*/
@media (max-width: 768px) {
section {
    padding-left:0px !important;
    padding-right:0px !important;
    padding-top:0px !important;

}
.menu {
    padding:0px;
}
.chargn-side-menu {
    display:none;
}

.subheader-user {
    display:none;
}

.chargn-side-menu-mobile {
    display:block;
}

  .container {
    flex-direction: column; /* Change to a single-column layout on smaller devices */

  }

  .menu {
    flex-basis: auto; /* Allow the menu to take the full width on smaller devices */
  }

/* --- Remove padding  */
  .main-content {
      padding: 0px;
  }

  .menu {
      padding: 0px;
  }

  .container {
      padding-left: 0px;
      padding-right: 0px;
  }


}


/* -------------------------------------------- */
/* Custom CSS */

.chargn-dark {
    color: #3081a3;
}

.btn-primary {
    color: black;
    background-color: #27AAE2 !important;
    text-decoration: none;
}

.btn-primary:hover {
    background-color: #39c1fb !important;

}


.btn-secondary {
    color: black;
    background-color: #ddd;
    text-decoration: none;
}

.btn-secondary:hover {
    background-color: #eee;

}


.chargn-table {

}

.chargn-table tr th {
    padding:5px;
    text-align: left;
    background: #ddd;
}

.chargn-table tr td {
    padding:5px;
    background: #eee;
}

.chargn-side-menu {
    text-decoration: none;
    width: 240px;
    min-width: 240px;
}





/* CSS code for formatting the generateFormField output */
/* Assuming the function generates a form with <div> containers */

/* Style for the container div */
.form-field-container {
  margin-bottom: 15px; /* Add some space between form fields */
}

/* Style for the labels */
.form-field-container label {
  display: block; /* Labels will take the full width of the container */
  font-weight: bold;
  margin-bottom: 5px;
}

/* Style for the text input fields */
.form-field-container input[type="text"] {
  width: 100%; /* Make the text inputs span the entire container */
  padding: 8px; /* Add some padding for better visual appearance */
  border: 1px solid #39c1fb; /* Add a simple border */
  border-radius: 5px; /* Round the corners a bit */
  font-family: Arial, sans-serif;
  color: #333;
}

/* Style for the text input fields */
.form-field-container input[type="password"] {
  width: 100%; /* Make the text inputs span the entire container */
  padding: 8px; /* Add some padding for better visual appearance */
  border: 1px solid #39c1fb; /* Add a simple border */
  border-radius: 5px; /* Round the corners a bit */
  font-family: Arial, sans-serif;
  color: #333;
}

/* Style for the required text inputs */
.form-field-container input[type="text"][required] {
  border-color: #3081a3; /* Change border color for required fields */
  font-family: Arial, sans-serif;
  color: #333;
}

.form-field-container input:active{
  background-color: #39c1fb;
  font-family: Arial, sans-serif;
  color: #333;
}


.form-field-container input:focus{
  background-color: #87dbff;
  font-family: Arial, sans-serif;
  color: #333;
}

/* Optionally, you can add some additional styling to enhance the appearance */
/* For example, you can add a background color and adjust font styles */
.form-field-container {
  background-color: #f9f9f9;
  font-family: Arial, sans-serif;
  color: #333;
}


/* Style for the text input fields */
.form-field-submit {
  width: 100%; /* Make the text inputs span the entire container */
  padding: 8px; /* Add some padding for better visual appearance */
  border: 1px solid #ccc; /* Add a simple border */
  border-radius: 5px; /* Round the corners a bit */
}

/* Maps - style for star ratings */

/* Define CSS classes for Font Awesome star icons */
.star-filled::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f005'; /* Unicode code for the solid star icon */
    color: gold !important; /* Adjust the color as needed */
    font-weight: 900;
}

.star-empty::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f005'; /* Unicode code for the regular star icon */
    color: #ccc; /* Adjust the color as needed */
}


/* Tabs for Open and Closed invoices, etc */

  .tab-container {
    display: flex;
    justify-content: space-around;
    background-color: #f0f0f0;
    padding: 10px;
  }

  .tab-link {
/*
    background-color: #3498db;
    color: #fff;
    */
    border: 1px solid #3498db;
    border-radius: 5px;
    padding: 10px 20px;
    text-decoration: none;

    cursor: pointer;
  }

  .tab {
    display: none;
    padding: 20px;
    /*border: 1px solid #3498db;*/
    border-radius: 5px;
  }

  .active {
    display: block;
  }


/* Footer on bottom fix */

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background-color:#3e3e3e !important;
    display: flex;
    flex-direction: column;
}

main {
    background-color:#ffffff;
    flex: 1; /* Fill available vertical space */
    /* Add any other styles for your main content here */
}