.region_image{
  border-radius: 4px;
  padding: 5px;
  height:30px;
  width: auto;
}

.mycontainer {
  display: block;
  border: 1px solid #ccc;
  padding: 10px;
.region-image {
    height: 1.5em;
    width: auto;
    vertical-align: text-bottom;
}
}
.heading-line{
    display:grid;
    grid-template-columns: 500px 30px  auto ;
    gap: 1rem;
    align-items: center; 
    border-bottom: 1px solid black;
    padding: 5px 0;
}
.heading-line h3{
    margin: 0;
    font-size: 1.5rem;
}

/* form-grid is the TOP form*/
.form-grid{
    display: grid;
    grid-template-columns: 1fr .25fr 1fr;
    gap: 1rem;
}
.form-field.title{
    grid-column: span 3;
    font-size:25px;
    font-weight:bold
}
.form-grid.view-mode label {
    display: block;
}
.form-field-full{
    grid-column: span 3;
}
.categories-wrapper {
    display: flex !important;      /* force flex inside the grid cell */
    flex-wrap: wrap !important;    /* allow wrapping */
    gap: 10px;                     /* spacing between checkboxes */
}

.categories-wrapper .form-check {
    display: flex;                 /* inline for checkbox + label */
    align-items: center;
    margin: 0;                     /* gaps handled by container */
}

.categories-wrapper .form-check-input {
    width: 16px;
    height: 16px;
    margin-right: 5px;             /* small gap between checkbox + label */
}

.categories-wrapper .form-check-input {
    width: 16px;
    height: 16px;
}

.form-grid input, 
.form-grid textarea, 
.form-grid select {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

.form-grid.view-mode input,
.form-grid.view-mode textarea, 
.form-grid.view-mode select {
    border: none;
    background-color: transparent;

}

/*formset-table is the BOTTOM form*/

.formset-table .field-value {
    display:none;   
}
.formset-table {
    width: 100%;
    border-collapse: collapse;
}
.formset-table th {
    text-align: left;
    font-weight: 600;
    font-size: 0.85rem;
    color: #555;
    padding-bottom: 0.25rem;
}

.formset-table td {
    padding: 0.25rem 0.5rem;
    vertical-align: top;
}
.formset-table input,
.formset-table select,
.formset-table textarea {
    width: 100%;
    box-sizing: border-box;
    font-size: 0.85rem;
}
.formset-table td.wide {
    min-width: 250px;
}

.formset-table textarea {
    min-height: 4rem;
    resize: vertical;
}
.formset-table.view-mode .field-value{
    display: block;
    font-size: .9rem;
    line-height:1.3;
    max-width: 30ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.formset-table.view-mode input,
.formset-table.view-mode select,
.formset-table.view-mode textarea {
    display: none;
}
.btn view-mode {
    display: none;
}

.messages {
    list-style-type: none;
    padding: 0;
    margin: 1rem 0;
    color: red;
}
.highlight{
    background-color: aquamarine;
}
.event_title{
    border-bottom: 1px solid black;
    padding: 5px 0;
}
.event-tag {
  font-size: 0.8rem;
  padding: 2px 6px;
  border-radius: 4px;
}

.event-t { background: #f77205; }
.event-v { background: #4abe7c; }
.event-m {background:#007bff}


/* Remove boxed look */
.nav-tabs .nav-link {
    border: none;
    border-radius: 0;
    background: none;
    color: #555;
}

/* Active tab styling */
.nav-tabs .nav-link.active {
    border-bottom: 2px solid #0d6efd;
    font-weight: 500;
    color: #000;
}
.form-select-wide{
    width: 100%;
}
.mybtn {
    background-color:  #1dc72b;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease; /* Smooth hover effect */
}
.mybtn:hover{
    background-color: #0056b3;   /* Darker blue on hover */
}
a.mybutton-link {
    display: inline-block;       /* Makes it behave like a button */
    padding: 5px 10px;          /* Space inside the button */
    background-color: #1dc72b;   /* Button background color */
    color: white;                /* Text color */
    text-align: center;          /* Center text */
    text-decoration: none;       /* Remove underline */
    border-radius: 4px;          /* Rounded corners */
    font-family: Arial, sans-serif;
    font-size: 1rem;
    transition: background-color 0.3s ease; /* Smooth hover effect */
}
a.mybutton-link-2nd{
    background-color: #1d9fc773;   /* Button background color */
    display: inline-block;       /* Makes it behave like a button */
    padding: 5px 10px;          /* Space inside the button */
    color: white;                /* Text color */
    text-align: center;          /* Center text */
    text-decoration: none;       /* Remove underline */
    border-radius: 5px;          /* Rounded corners */
    font-family: Arial, sans-serif;
    font-size: 16px;
    transition: background-color 0.3s ease; /* Smooth hover effect */ 

}
/* Hover effect */
a.mybutton-link:hover {
    background-color: #0056b3;   /* Darker blue on hover */
}
a.button-link-2nd:hover {
    background-color: #0056b3;   /* Darker blue on hover */
}

.back-to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1000;

  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  border: 1px solid #ccc;
  background: white;
  cursor: pointer;
}

@media (max-width: 480px) {
  html {
    font-size: 14px;
  }
}
/* Vertical version on desktop */
@media (min-width: 768px) {
    .nav-tabs.flex-md-column .nav-link.active {
        border-bottom: none;
        border-right: 2px solid #0d6efd;
    }
}

/* Make the collapsed menu not full screen */
@media (max-width: 991.98px) {
    .navbar-collapse {
        max-width: 300px;
        background-color: #f8f9fa;
        border: 1px solid #ddd;
        padding: 10px;
        position: absolute;
        top: 100%;
        right: 0;
        z-index: 1000;
        }
 }