/* Base styling for the select element */
.form-select {
    display: block;
    width: 100%;
    padding: 0.375rem 1.75rem 0.375rem 0.75rem; /* Space inside */
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057; /* Text color */
    background-color: #fff; /* Background color */
    background-clip: padding-box;
    border: 1px solid #ced4da; /* Border */
    border-radius: 0.375rem; /* Rounded corners */
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 8%); /* Subtle inner shadow */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Add caret arrow styling */
.form-select:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Disabled state */
.form-select:disabled {
    background-color: #e9ecef;
    opacity: 1;
}

/* Small and Large variations */
.form-select.form-select-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.25rem;
}

.form-select.form-select-lg {
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    border-radius: 0.5rem;
}


/* Base styling for the form-label */
.form-label {
    display: inline-block;
    margin-bottom: 0.5rem; /* Spacing between label and input */
    font-weight: 500;     /* Slightly bold font for emphasis */
    color: #212529;       /* Text color */
    font-size: 1rem;      /* Default font size */
    line-height: 1.5;     /* Comfortable line height */
}

/* Optional customization for large and small forms */
.form-label-lg {
    font-size: 1.25rem;
    font-weight: 600;
}

.form-label-sm {
    font-size: 0.875rem;
    font-weight: 400;
}


.p-3 {
  padding: 1rem;
}

.m-3 {
  margin: 1rem;
}

.me-3 {
    margin-left: 1rem;
}

.custom-btn-info {
  display: inline-block;
  font-weight: 400;
  color: #fff; /* Text color */
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-color: #17a2b8; /* Info background color */
  border: 1px solid #17a2b8; /* Info border color */
  padding: 0.375rem 0.75rem; /* Padding similar to Bootstrap buttons */
  font-size: 1rem; /* Font size */
  line-height: 1.5; /* Line height */
  border-radius: 0.25rem; /* Rounded corners */
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.custom-btn-info:hover {
  color: #fff; /* Text color on hover */
  background-color: #138496; /* Darker shade for hover */
  border-color: #117a8b; /* Darker border for hover */
}

.custom-btn-info:focus,
.custom-btn-info.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5); /* Focus shadow */
}

.custom-btn-info:disabled,
.custom-btn-info.disabled {
  opacity: 0.65;
  cursor: not-allowed;
}


.custom-btn-dark {
    color: #fff; /* White text */
    background-color: #343a40; /* Dark background */
    border: 1px solid #343a40; /* Dark border */
    padding: 0.375rem 0.75rem; /* Default padding */
    font-size: 1rem; /* Font size */
    line-height: 1.5; /* Line height */
    border-radius: 0.25rem; /* Rounded corners */
    display: inline-block; /* Ensures proper button display */
    text-align: center; /* Center-align text */
    text-decoration: none; /* No underline for links */
    cursor: pointer; /* Pointer cursor */
}

.custom-btn-dark:hover {
    color: #fff; /* Maintain white text on hover */
    background-color: #23272b; /* Slightly darker hover effect */
    border-color: #1d2124; /* Darker border on hover */
}

.custom-btn-dark:focus,
.custom-btn-dark:active {
    outline: none; /* Remove focus outline */
    box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5); /* Add focus shadow */
}

button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.button-custom-info {
    display: block;
    height: 70px;
    width: 180px;
    text-align: center;
    background: #0dcaf0;
    font-size: 2.5em;
    border: 2px solid #0dcaf0;
    border-radius: 50px;
    color: #000;
    text-transform: uppercase;
    font-family: sans-serif;
    letter-spacing: 2px;
    transition: all 0.5s ease;
}

.button-custom-info:hover {
    color: white;
}

.button-custom-warning {
    display: block;
    height: 70px;
    width: 180px;
    text-align: center;
    background: #ffc107;
    font-size: 2.5em;
    border: 2px solid #ffc107;
    border-radius: 50px;
    color: #000;
    text-transform: uppercase;
    font-family: sans-serif;
    letter-spacing: 2px;
    transition: all 0.5s ease;
}

.button-custom-warning:hover {
    color: white;
}

.loader {
    font-size: 0;
    height: 60px;
    width: 60px;
    background: transparent;
    border: 4px solid #0dcaf0;
    border-radius: 50%;
    border-top-color: transparent;
    animation: animate 1s 0.4s linear infinite;
}

.loader-w {
    font-size: 0;
    height: 60px;
    width: 60px;
    background: transparent;
    border: 4px solid #ffc107;
    border-radius: 50%;
    border-top-color: transparent;
    animation: animate 1s 0.4s linear infinite;
}

@keyframes animate {
   100% {
        transform: rotate(360deg);
   }
}

.finished {
    font-size: 0;
    height: 70px;
    width: 70px;
    border: none;
    background: #0dcaf0;
    position: relative;
    animation: special 1s ease-in;
}

.finished-w {
    font-size: 0;
    height: 70px;
    width: 70px;
    border: none;
    background: #ffc107;
    position: relative;
    animation: special 1s ease-in;
}

.finished-unsuccessful {
    font-size: 0;
    height: 70px;
    width: 70px;
    border: none;
    background: #dc3545;
    position: relative;
    animation: special 1s ease-in;
}

@keyframes special {
    10%{
        transform: scale(0.8) translateY(20px);
    }
    35%{
        transform: scale(1) translateY(0px);
    }
}

.finished::before {
    content: url('black_circle_tick.png');
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.finished-w::before {
    content: url('black_circle_tick.png');
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.finished-unsuccessful::before{
    content: url('X.png');
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.cursor-pointer {
    cursor: pointer;
    text-decoration: none;
}

.d-flex {
     display: flex;
}

.d-block {
    display: block;
}

.justify-content-center{
    justify-content: center;
}

.align-items-center{
    align-items: center;
}

.crmDocActive {
    background: #0dcaf0; /* Dark background color */
    color: black;             /* White text color */
    border-radius: 10px;      /* Rounded corners */
    padding: 10px;            /* Padding inside the element */
    text-align: center;       /* Center the text */
}

.crmDocActive:hover{
    color: white;
}

.sqlDocActive {
    background: #0dcaf0; /* Dark background color */
    color: black;             /* White text color */
    border-radius: 10px;      /* Rounded corners */
    padding: 10px;            /* Padding inside the element */
    text-align: center;       /* Center the text */
}

.sqlDocActive:hover{
    color: white;
}

.bg-dark {
    background: #343a40; /* Dark background color */
    color: white;             /* White text color */
    border-radius: 10px;      /* Rounded corners */
    padding: 10px;            /* Padding inside the element */
    text-align: center;       /* Center the text */
}

.btn-dark {
    background: #343a40; /* Dark background color */
    color: white;             /* White text color */
    border-radius: 10px;      /* Rounded corners */
    padding: 10px;            /* Padding inside the element */
    text-align: center;
}

.btn-dark:hover {
    background: #0dcaf0;
    color: black;
}

.bg-lightblue {
    background: #0dcaf0; /* Dark background color */
    color: black;             /* White text color */
    border-radius: 10px;      /* Rounded corners */
    padding: 10px;            /* Padding inside the element */
    text-align: center;       /* Center the text */
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f9f9f9; /* Custom light gray */
}

.table-striped tbody tr:hover {
    background-color: #f1f1f1; /* Custom hover color */
}

.table {
    width: 100%; /* Full width */
    margin-bottom: 1rem; /* Spacing below the table */
    color: #212529; /* Text color */
    border-collapse: collapse; /* Remove gaps between table borders */
    border-spacing: 0; /* No extra space between cells */
}

.table th,
.table td {
    padding: 0.75rem; /* Padding inside cells */
    vertical-align: top; /* Align text at the top */
    border: 1px solid #dee2e6; /* Cell borders with light gray color */
}

.table thead th {
    vertical-align: bottom; /* Align headers to the bottom */
    border-bottom: 2px solid #dee2e6; /* Thicker border for headers */
}

.table tbody + tbody {
    border-top: 2px solid #dee2e6; /* Separate multiple tbody sections */
}

.btn-dark-sm {
    background:#343a40;
    color: white;
    padding: 0.25rem 0.5rem; /* Smaller padding */
    font-size: 0.875rem; /* Smaller font size (14px) */
    line-height: 1.5; /* Line height for proper alignment */
    border-radius: 0.2rem; /* Slightly smaller border-radius for rounded corners */
}

.btn-dark-sm:hover{
    background: #0dcaf0;
    color: black;
}

.btn-info-sm {
    background:#0dcaf0;
    color: black;
    padding: 0.25rem 0.5rem; /* Smaller padding */
    font-size: 0.875rem; /* Smaller font size (14px) */
    line-height: 1.5; /* Line height for proper alignment */
    border-radius: 0.2rem; /* Slightly smaller border-radius for rounded corners */
}

.btn-info-sm:hover{
    color: white;
}