.my-sticky-header-column-table {
height: 1000px;
width: 100%;
border-collapse: collapse !important;
}

.my-sticky-header-column-table th:first-child {
position: sticky;
left: 0;
/* background: #333;
color: white; */
z-index: 3;
}

.my-sticky-header-column-table td:nth-child(1) {
position: sticky;
left: 0;
z-index: 2;
}

.my-sticky-header-column-table thead th {
position: sticky;
top: 0;
background: white ;

/* background: #333;
color: white; */
z-index: 1;
}

.my-sticky-header-column-table thead th .no-wrap{
    background: white ;
}

.q-table--bordered {
border: none !important;
}

.q-table {
border-collapse: collapse !important;
}

.my-column-selection .q-icon {
margin-left: 5px !important; /* Adjust as needed to center the icon */
}

.q-table__bottom {
border: none !important;
}

/* CSS for striped rows */
.q-table tbody .q-tr:nth-child(even) {
background-color: #ffffff;
}

.q-table tbody .q-tr:nth-child(odd) {
background-color: #f2f2f2;
}

.q-tr .header-container {
    background: #333;
    color: white;
}

.q-table__bottom .q-table__bottom-item{
margin-left: 20px !important;
}

.q-table__bottom .q-field__control-container{
margin-top: 10px !important;
}

.q-table__bottom .q-field__inner .q-icon{
margin-top: 20px !important;
margin-left: 10px !important;
}

.q-position-engine{
padding-left:30px !important;
}

main .q-py-md{
    padding-top: 0 !important;
}

.vue-datatable .row {
margin-left: 0 !important;
margin-right: 0 !important;
}

.q-td {
max-width: none !important;
min-width: auto !important;
}

/* Target the search row and set the background color to white */
.column-search {
    background-color: white !important;
}

/* Additional styles to ensure the search row remains consistent with the rest of the table */
.column-search input {
    background-color: white !important;
    color: #000; /* Ensures the text color is still readable */
}

/* .column-search .q-field__inner {
    background-color: #333 !important;
} */

.column-search .q-field__control {
    background-color: white !important;
    /* padding-left: 18px !important;
    padding-right: 18px !important;
    padding-bottom:10px !important;
    padding-top:10px !important; */
}

.column-search .q-field__control-container {
    background-color: white !important;
    padding-left: 0px;
}

.column-search .q-placeholder { /*vue table search box placeholder text i.e. Search*/
    font-weight: normal;
    /* color: #b0b0b0; */
}

.header-content{
    font-size: 1rem;
}

[v-cloak] > * { display:none }

.vue-datatable .q-pa-md {
    padding:0 !important;
}

#vue-base .q-drawer__content .q-scrollarea {
    background-color: white;
}

#vue-base .q-item:hover {
    background-color: rgba(46, 169, 226, 0.7) !important;
    color: white !important;
}

#vue-base .q-item:hover .q-icon, .q-item.selected .q-icon {
    background-color: transparent !important;
    color: white !important;
}

#vue-base .q-item.selected {
    background-color: #333;
    color: white !important;
}

#vue-base .q-item.selected .q-icon {
    background-color: #333;
    color: white !important;
}

#vue-base .q-item.selected .q-icon {
    background-color: #333;
    color: white !important;
}

.q-position-engine{
    padding:0 10px !important;

}

.q-field__inner.relative-position{ /* changes the padding of the search box*/
    padding-bottom: 8px;
    padding-left: 8px;
    padding-right: 8px;
}


.vue-header {
    width: calc(100% + 50px);
    display: inline-flexbox; /* Ensures content within the header is aligned flexibly */
  }
  
.vue-header-container {
    width: auto !important;
    /* min-width: fit-content !important; */
    white-space: nowrap !important;
    /* z-index: 500 !important; */
}

.header-container {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.vue_table_header_arrow {
    font-size: 15px !important;
    opacity: 0.3;
    transition: opacity 0.2s ease;
}

.vue_table_header_arrow.active-sort {
    opacity: 1;
}

/* Optional: Add hover effect for better UX */
.header-content:hover .vue_table_header_arrow {
    opacity: 0.85;
}

.header-content:hover .vue_table_header_arrow.active-sort {
    opacity: 1;
}

#vue-base {
    display: none;
}
#vue-base.ready {
    display: block;
} 
.q-drawer {
    transform: none !important;
    transition: none !important;
}

.q-drawer--left {
    transform: none !important;
    transition: none !important;
}

.select_all_box {
    background-color: white !important;
}

.datatable-column-menu { /* ensures header of vue table is above the column data*/
    /* z-index: 1000 !important; */
}

.my-search { /* for the search bar of the vue table*/
    border: 1px solid #ccc;
    border-radius: 5px;
}

.my-search:hover { 
    border-color: #000;
}

.header-content{ /* for the header of the vue table*/
    margin-left: 10px;
    /* vertical-align: text-top; */
}

td.q-td.text-left{ /* ensures text for vue table is aligned to the top*/
    vertical-align: top;
}

#chart-container {
    width: 100%;
    height: 400px; /* Adjust based on your needs */
}

body, html {
    height: 100% !important;
    margin: 0 !important;
    display: flex !important;
}
/* #vue-base, #vue-main {
    display: flex !important;
} */
#vue-base {
    width: 300px !important;
}
#vue-main.ready {
    display: block;
    /* opacity: 1 !important;
    transform: none !important;
    transition: none !important; */
}

#vue-main {
    display: none;
    transition: 0.3s ease !important;
    padding-right:15px;
    margin-top:86px;
    margin-left:-73px;
    width: calc(100vw - 250px);
}

#vue-main.drawer-closed {
    margin-left: 56px !important; /* Adjust to the mini-drawer width */
}

#vue-main.drawer-closed {
    margin-left: 56px; /* Adjust to the mini-drawer width */
}

#vue-main.active {
    margin-left:-300px;
    width: calc(100vw - 23px);
    transition:  0.3s ease !important;
}

.custom-no-padding-bottom .q-field__inner{
    padding-bottom: 0px !important;
}

.custom-no-padding-bottom-DT .q-field__inner.relative-position{
    padding-right: 0px !important;
    padding-bottom: 0px !important;
    padding-top: 0px !important;
}

.custom-no-padding-bottom-DT .q-field__control {
  height: 25px !important;
  /* line-height: 20px !important; */
}

.DT-font-size {
  font-size:11px;
}

.vue_table_header_arrow {
    cursor: pointer;
}

.header-content {
    cursor: pointer;
}

.template-dynamicstudies-content {
    min-height: 25px; /* adjust based on content needs */
  }

.my-sticky-header-column-table .q-table__top {
    padding: 0 16px !important;
}

.my-sticky-header-column-table th label {
    margin-bottom: 0 !important;
}

.no-padding .q-field__control {
  padding: 0 !important;
  min-height: 12px !important; /* Adjust as needed */
}
/* adds a borderline to the textarea of the editable vue datatable */
.editable-textarea textarea {
  border: 1px solid #a19d92 !important; /* or any color you like */
  border-radius: 4px;
  padding: 4px;
}

/* changes the hover for the save changes the editable vue datatable to be similar to bootstrap buttons */
.editable-table-btn:hover {
  color: #fff !important;
  background-color: #0069d9 !important;
  border-color: #0062cc !important;
}

/* fixes an issue with the save button of the popup box to confirm changes in the editable vue datatable */
.q-card-actions .editable-table-btn .row {
    justify-content: flex-start !important;

}