table {
    white-space: nowrap;
}
.dt-length{
    float: inline-start;
}
.dt-search{
    float: inline-end;
}
.min-width-200 {
    min-width: 200px !important;
}
.max-width-300 {
   /* max-width: 2% !important;
      text-wrap: balance !important;
      word-wrap: break-word !important;
          overflow-wrap: break-word !important;*/

}
.d-block{
 text-wrap: balance !important;
      word-wrap: break-word !important;
          overflow-wrap: break-word !important;
}
.logged-in {
  color: green;
}
.logged-out {
  color: red;
}
.overlay {
  position: absolute!important;
  z-index: 2!important;
  opacity:0.9!important;
  background-color: rgba(255,255,255,.3)!important;
  transform: translate(-50%, -50%)!important;
  top:50%!important;
  left:50%!important;
}
                .rideTable td {
                    border-spacing: 0;
                    border-collapse: collapse;
                    padding:unset;
                    }

            .table.dataTable.table.table-striped > tbody > tr:nth-of-type(2n+1){
               background-color: #00dcff0d !important;
            }
                div.dt-buttons {
                    position: relative;
                    float: right;
                }
                div.dt-buttons button {
                    background-color:#17a2b8 !important;
                }



                div#DataTables_Table_0_wrapper {
                       width: 100% !important;
                   }
                       .sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active, .sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active {
                               background-color:#17a2b8!important;
                      }
                       .btn-primary{
                           background-color:#17a2b8!important;
                           border-color:#17a2b8!important;
                       }
                       .card-primary:not(.card-outline)>.card-header {
                           background-color:#17a2b8!important;
                       }
                       .link-button {
                         background: none!important;
                         border: none;
                         padding: 0!important;
                         /*optional*/
                         font-family: arial, sans-serif;
                         /*input has OS specific font-family*/
                         color: #069;
                         text-decoration: underline;
                         cursor: pointer;
                       }
                       .expandColPadding{
                           padding:2rem!important;
                       }
/* Unset all previous styles */
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:after {
    content: unset; /* Unset content */
    font-size: unset; /* Unset font size */
}

/* Custom styles for DataTables control arrow when row is collapsed */
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
    content: "\25BA"; /* Unicode character for right-pointing triangle */
    font-size: 10px; /* Adjust the font size as needed */
}

/* Custom styles for DataTables control arrow when row is expanded */
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:after {
    content: "\25BC"; /* Unicode character for down-pointing triangle */
    font-size: 10px; /* Adjust the font size as needed */
}

.hidden-columns-details {
    border: 1px solid transparent;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 5px;
    margin-bottom: 20px;
}

.hidden-columns-details h3 {
    margin-top: 0;
    margin-bottom: 20px;
}

.hidden-columns-details .row {
    margin-right: -15px;
    margin-left: -15px;
    display: flex;
    flex-wrap: wrap;
}

.hidden-columns-details .column {
    padding-right: 15px;
    padding-left: 15px;
    flex: 0 0 100%;
    margin-bottom: 10px; /* Add margin between columns */
}

@media (min-width: 576px) {
    .hidden-columns-details .column {
        flex: 0 0 calc(50% - 30px); /* Adjust for 2 columns per row */
    }
}

@media (min-width: 992px) {
    .hidden-columns-details .column {
        flex: 0 0 calc(33.333% - 30px); /* Adjust for 3 columns per row */
    }
}

@media (min-width: 1200px) {
    .hidden-columns-details .column {
        flex: 0 0 calc(25% - 30px); /* Adjust for 4 columns per row */
    }
}

    div#DataTables_Table_0_wrapper {
        width: 100% !important;
    }

.datatable_column_width {
max-width: 2% !important;
     text-wrap: balance !important;
          word-wrap: break-word !important;
              overflow-wrap: break-word !important;
}
table {
    width:100%!important;
}


 /* Style for the active users list */
        .user-list {
            list-style: none;
            padding: 0;
        }

        .user-item {
            display: flex;
            align-items: center;
            padding: 1px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .user-item:hover {
            background-color: #f0f2f5;
        }

        .user-name {
            font-weight: bold;
        }

.chat-window {
    position: fixed;
    bottom: 20px;
    max-width: 300px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    z-index: 1000;
}

.chat-header {
    background-color: #4267B2;
    color: #fff;
    padding: 10px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    position: relative;
}

.chat-header-buttons {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 5px;
}

.chat-body {
    max-height: 200px;
    overflow-y: auto;
    padding: 10px;
}

.chat-input {
    width: calc(100% - 20px);
    padding: 5px;
    margin: 0 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    resize: none;
}
        .outer {
            width: 100%;
            height: auto;
              overflow-y: visible; /* Allow vertical scrolling */
             /* overflow-x: hidden;*/ /* Prevent horizontal scrolling */
            position: relative;
            z-index: 1; /* Ensure card body content is below search form */
        }

        .inner {
            transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Transition for sliding and opacity */
            width: 100%;
            height: auto!important;
            right: -100%; /* Initially off-screen */
            top: 0; /* Start from the top edge */
            background: #ffffff; /* White background for search form */
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Optional: Box shadow for search form */
            z-index: 2; /* Ensure search form is above card body content */
            display: flex; /* Use flexbox for layout */
            padding: 20px; /* Adjust padding as needed */
             /*  display: none; */ /* Initially hidden */
            position: absolute; /* Position relative to .outer */
             opacity: 0; /* Initially transparent */
             transform: translateX(100%);
        }

        .outer.show-form .inner {
            right: 0; /* Slide in the search form */
                opacity: 1; /* Fully opaque */
                    /*display: block; */ /* Show the form */
                        pointer-events: auto; /* Enable pointer events */
            transform: translateX(0);
        }
        .outer:not(.show-form) {
            overflow-x: hidden; /* Hide horizontal overflow when .outer does not have .show-form class */
        }

          .autocomplete-container {
              position: relative;
              width: 100%;
          }
          .autocomplete-suggestions {
              border: 1px solid #ccc;
              border-top: none;
              max-height: 150px;
              overflow-y: auto;
              position: absolute;
              width: 100%; /* Match the width of the container */
              background-color: white;
              z-index: 1000; /* Ensure the dropdown is on top */
              background-color: white;
          }
          .autocomplete-suggestion {
              padding: 10px;
              cursor: pointer;
          }
          .autocomplete-suggestion:hover {
              background-color: #e9e9e9;
          }
          .card {
           box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)!important; /* Adds shadow for a card-like effect */
           }

           .info-box{
                      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)!important; /* Adds shadow for a card-like effect */
           }

 .complete-span {
     border-radius: 6px;
     background-color: #49eaa6;
     margin-top: 0px;
     align-items: center;
     color: #212529;
     justify-content: center;
     padding: 8px 8px;
     border: none;
     cursor: none;
     display: flex;
     font-size: small;
     margin-bottom: 3px;
 }

 .not-found-span {
   background-color:lightgrey;
   border-radius: 6px;
   justify-content: center;
   padding: 8px 8px;
   cursor: none;
   color:#212529;
   margin-top: 7px;
   align-items: center;
   display: flex;
   margin-top: 0px;
   font-size: small;
   margin-bottom: 3px;
 }