/* * {
    font-size: 14px;
}

body {
    overflow-x: hidden;
} */

a {
    color: #18646d !important;
    text-decoration: none !important;
}

a:hover,
a:focus {
    color: #124c53 !important;
    /* darker shade on hover */
    text-decoration: underline;
    /* optional hover effect */
}

/* Apply font family and base font size to all elements */
* {
    margin: 0;
    /* Remove default margin */
    padding: 0;
    /* Remove default padding */
    font-family: 'Arial', sans-serif;
    /* Global font family (you can change this to your preferred font) */
    font-size: 14px;
    /* Global font size */
    box-sizing: border-box;
    /* Ensures padding and border don't affect width/height */
}

/* Body styling */
body {
    font-family: 'Arial', sans-serif;
    /* Ensure body uses the same font as the global one */
    font-size: 15px;
    /* Ensure body uses the same font size */
    /* color: #f4f4f4 !important; 
    background-color: #000000 !important; */
    overflow-x: hidden;
    /* Prevent horizontal scrolling */
}

.main-dashboard {
    margin-top: 15px;
    padding: 5px 5px;
}

.error-container {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 40px 50px;
    text-align: center;
    max-width: 500px;
    width: 100%;
    margin-top: 250px;

}

.error-container h1 {
    color: #dc3545;
    font-size: 2rem;
    margin-bottom: 10px;
}

.error-container p {
    color: #555;
    font-size: 1rem;
    margin-bottom: 25px;
}

.list-group-item.active {
    background-color: #18646d !important;
    border-color: #18646d !important;
    color: #fff !important;
}

.card-header {
    background-color: #18646d !important;
    color: #fff !important;
    /* makes text readable */
    padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
    margin-bottom: 0;
    border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
}

/* Normal tab button */
.nav-tabs .nav-link {
    color: #18646d !important;
}

/* Active tab button */
.nav-tabs .nav-link.active {
    color: #fff !important;
    /* text color on active tab */
    background-color: #18646d !important;
    /* background color */
    border-color: #18646d #18646d #fff !important;
    /* borders */
}

/* Hover & focus */
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    color: #fff !important;
    /* text on hover/focus */
    background-color: #124c53 !important;
    /* slightly darker shade */
}

/* Default (collapsed) accordion button */
/* .accordion-button {
    background-color: #18646d !important;
    color: white !important;
} */

.accordion-button {
    background-color: #18646d !important;
    color: white !important;
}

.custom-button {
    background-color: #18646d;
    /* main theme color */
    color: #fff;
    /* text color */
    border: none;
    /* no border, or set your own */
    padding: .5rem .5rem;
    /* adjust size */
    font-size: 1.2rem;
    /* text size */
    border-radius: 0.375rem;
    /* rounded corners like Bootstrap buttons */
    cursor: pointer;
    /* pointer on hover */
    transition: background-color 0.3s ease, transform 0.2s ease;
    text-decoration: none;
    /* if used on <a> */
    display: inline-block;
    /* works for <a> or <button> */
    min-height: 40px;
    /* all buttons will be at least 40px tall */
    line-height: 1.5;
    /* ensures text is vertically centered */
    padding: 0 1rem;
    /* horizontal padding, width adapts to content */
    display: inline-flex;
    /* allows vertical alignment */
    align-items: center;
    /* vertically center text */
    justify-content: center;
    /* horizontally center text */
}

/* Hover and focus states */
.custom-button:hover,
.custom-button:focus {
    background-color: #124c53;
    /* darker shade for hover */
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    /* subtle lift effect */
}

/* Active / pressed state */
.custom-button:active {
    background-color: #0f3b45;
    /* even darker on click */
    transform: translateY(1px);
}

/* Disabled state */
.custom-button:disabled,
.custom-button.disabled {
    background-color: #8da6a9;
    /* muted grey for disabled */
    cursor: not-allowed;
    color: #fff;
    opacity: 0.7;
}

.custom-button.cancel {
    background-color: #d9534f;
    /* Bootstrap-style red */
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border-radius: 0.375rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
    text-decoration: none;
}

/* Hover and focus */
.custom-button.cancel:hover,
.custom-button.cancel:focus {
    background-color: #c9302c;
    /* darker red on hover */
    color: #fff;
    transform: translateY(-1px);
}

/* Active / pressed state */
.custom-button.cancel:active {
    background-color: #ac2925;
    /* even darker red */
    transform: translateY(1px);
}

/* Disabled state */
.custom-button.cancel:disabled,
.custom-button.cancel.disabled {
    background-color: #e6a3a0;
    /* muted red for disabled */
    cursor: not-allowed;
    color: #fff;
    opacity: 0.7;
}

/* 
.custom-card{
    background-color: #292828 !important; 
    color: #ffffff !important; 
}

.accordion-body{
    background-color: #302f2f !important; 
    color: #ffffff !important; 
}

.custom-border {
    border: 1px solid gray !important;  
    border-radius: 0.25rem; 
}

.accordion-button{
background-color:#161616!important;
color: white !important;
}
 .form-control {
    background-color: #000000 !important; 
    color: #ffffff !important; 
    border: 1px solid #333333 !important;
} 

.custom-table {
    background-color: #000 !important;        
    color: #fff !important;                  
    border-collapse: collapse;   
    width: 100%;
}

.custom-table th,
.custom-table td {
    border: 1px solid #555 !important;      
    padding: 10px;
}

.custom-table thead {
    background-color: #111 !important;     
}

.custom-table tr:hover {
    background-color: #222 !important;      
}

.custom-table input[type="checkbox"] {
    accent-color: gray !important;          
}

.table-black {
    background-color: #000 !important;
    color: #fff !important;
}

.table-black th,
.table-black td {
    background-color: #000 !important;
    color: #fff !important;
    border: 1px solid #555 !important; 
}

.table-black thead tr{
    background-color: #111 !important; 
    color: #fff !important;
}

.table-black tbody tr:hover {
    background-color: #222 !important; 
}


.bootstrap-table .fixed-table-toolbar .search input {
    background-color: #111;
    color: #fff;
    border: 1px solid #555;
}

.bootstrap-table .pagination-detail,
.bootstrap-table .pagination-info,
.bootstrap-table .page-list {
    color: #ccc;
}

.bootstrap-table .page-list .dropdown-menu {
    background-color: #000;
    color: #fff;
}

.bootstrap-table .page-list .dropdown-menu .dropdown-item {
    color: #fff;
}

.google-visualization-tooltip {
  background-color: black !important;
  color: white !important;
  border: 1px solid #444 !important;
  padding: 8px !important;
  border-radius: 4px !important;
} */

.row>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .25) !important;
    /* Decreased multiplier */
    padding-left: calc(var(--bs-gutter-x) * .25) !important;
    /* Decreased multiplier */
}

.browser-setting {
    margin-top: 20px;
    text-align: right;
}

.container {
    width: 100% !important;
    margin-right: auto;
    margin-left: auto;
    padding-right: 0;
    padding-left: 0;
}

.form-group select,
.form-group input[type="text"] {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 4px;
}

span.required {
    color: #e02612;
    font-size: 14pt;
    font-weight: 700;
    line-height: 1;
}

.table-section-spacing {
    padding-top: 1.5em !important;
    padding-bottom: 0 !important;
    width: 350px;
}

/* .fixed-table-toolbar {
    margin-top: -10px;
} */

.card.fullscreen {
    position: fixed;
    top: 62px;
    /* Height of the navbar */
    left: 0;
    width: 100vw;
    height: calc(100vh - 62px);
    z-index: 9999;
    background-color: white;
    font-size: larger;
    transition: all 0.3s ease-in-out;
}

.card.fullscreen p {
    font-size: large;
}

.card.fullscreen h5 {
    font-size: large;
}

.fullscreen-icon {
    cursor: pointer;
}

.charts {
    width: 350px !important;
    height: 380px !important;
    margin: auto;
}

.card.fullscreen canvas {
    width: 600px !important;
    height: 650px !important;
    margin: auto;
}


/* copy to clipboard */

.copy-icon {
    cursor: pointer;
    font-size: 20px;
}

.table td {
    word-wrap: break-word;
}

.form-group label,
.form-group input {
    vertical-align: top;
}


/* for multiple select dropdown button style*/


/* Style the dropdown arrow */

.mult-select-tag .btn-container {
    color: blue !important;
    padding: .5rem;
    display: flex;
    border-left: 1px solid var(--border-color)
}


/* for default chart text on all dashboards */

.default-chart-text {
    text-align: center;
    color: gray;
}


/* for bootsrap table filter button color change */

.bootstrap-table .fixed-table-container .table thead th .both {
    color: black;
}

.bootstrap-table .fixed-table-container .table thead th .desc {
    color: black;
}

.bootstrap-table .fixed-table-container .table thead th .asc {
    color: black;
}


/* for tooltip for disabled button */


/* for access denied message */

.access-denied {
    text-align: center;
    padding: 20px;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 250px;
}

.access-denied h2 {
    color: #721c24;
    margin-bottom: 15px;
}

.access-denied p {
    font-size: 15px;
    color: red;
}

#copyCheckmark {
    opacity: 0;
    margin-left: 10px;
    color: green;
    transition: opacity 0.3s ease-in-out;
}

#copyCheckmark.show {
    opacity: 1;
}


/* for mobile phones - latest iphone screens */