.display-4 {
    font-weight: 700;
    color: #343a40;
    margin-bottom: 30px;
}
.form-label {
    font-weight: 600;
}
.form-select, .form-control {
    border-radius: 0.25rem;
}
.details-box-container {
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 0.25rem;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.details-box-container h5 {
    font-weight: 600;
    color: #343a40;
}
.card {
    border: none;
    margin-bottom: 5px;
}
.card-body {
    padding: 5px 30px 0px 30px;
    border-radius: 5px;
    /* box-shadow: 0 4px 8px rgba(0,0,0,0.1); */
}
.btn-custom {
    background-color: #007bff;
    color: #fff;
    font-weight: 500;
    border: none;
    border-radius: 0.25rem;
    padding: 10px 20px;
    transition: background-color 0.3s ease;
}
.btn-custom:hover {
    background-color: #0056b3;
}
.animation-fade {
    animation: fadeIn 1s;
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.sidebar {
    background: linear-gradient(45deg, #343a40, #002e6d);
    padding: 20px;
    border-radius: 0.25rem;
    color: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.sidebar .nav-link {
    color: white;
    font-weight: 500;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 0.25rem;
    transition: background-color 0.3s ease;
}
.sidebar .nav-link:hover {
    background-color: #007bff;
}
.sidebar .nav-link .fas {
    margin-right: 10px;
}
.sidebar .nav-link.active {
    background-color: #0056b3;
}
.form-check.form-switch {
    display: flex;
    padding: 0;
    gap: 20px;
}
input#adv_scannable {
    margin-left: 0px !important;
}
.col-md-6.d-flex.justify-content-between {
  padding: 5px;
}
/* Hide the arrows from the number input in Chrome, Safari, Edge, and Opera */
/* input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
    height: 45px;
    border-radius: 0.25rem;
    padding: 0.075rem 0.15rem .175rem .25rem !important;
    font-size: .7rem;
    font-weight: 400;
    line-height: 1.5;
    width: 100% !important;
    text-align: left !important;
} */

/* Hide the arrows from the number input in Firefox */
input[type="number"] {
    -moz-appearance: textfield;
    /* height: 45px; */
    border-radius: 0.25rem;
    padding: 0.075rem 0.15rem .175rem .25rem !important;
    font-size: .7rem;
    font-weight: 400;
    line-height: 1.5;
    width: 100% !important;
    text-align: left !important;
}
.error {
	color: #ff0606;
	padding: 5px 0px;
}

#ci_rx_data_length_value, #ci_tx_data_length_value, #adv_pdu_data_length_value {
    padding: 0px 5px;
    top: -10px !important;
    position: relative;
}
input[type="range"] {
	width: 80% !important;
}
#battery {
	margin: 0;
	/* height: 43px; */
	border-radius: 0.25rem;
	padding: 0.175rem 1.25rem .175rem .45rem !important;
	font-size: .7rem;
	font-weight: 400;
	line-height: 1.5;
}
.sidebar .form-label {
	font-size: 0.7rem !important;
}
.form-select {
   padding: 0.175rem 1.25rem .175rem .45rem !important;
   font-size: 0.7rem !important;
}
.sidebar #widget-form{
    position: relative;
}
#advSubmitButton {
	position: relative;
    padding: 0.075rem 1rem .075rem .25rem !important;
    font-size: 0.7rem;
    width: 47%!important;
    height: 27px;
    top: auto!important;
    position: absolute!important;
    bottom: 98px;
    right: 0;
    left: auto;
}
#CISubmitButton {
    position: relative;
    padding: 0.075rem 1rem .075rem .25rem !important;
    font-size: 0.7rem;
}
b, strong {
	font-size: 0.7rem;
}
th {
	font-size: 0.7rem;
}
td {
	font-size: 0.7rem;
}
label {
	font-size: .7rem;
}

 /* phase - 3 */


 .btn-config button {
	padding: 0.075rem 1rem .075rem .25rem !important;
	font-size: 0.7rem;
	width: 98% !important;
	height: 27px;
}
.btn-config .col-lg-6 {
	padding: 0px 10px;
	margin: 0;
}
.btn-config.col-lg-12.row {
	padding: 0;
}

#ci_tx_data_length::-moz-range-thumb, #ci_rx_data_length::-moz-range-thumb, #ci_connection_interval::-moz-range-thumb, #ci_slave_latency::-moz-range-thumb, #system_xtal_delta::-moz-range-thumb, #adv_pdu_data_length::-moz-range-thumb, #adv_broadcast_interval::-moz-range-thumb{
    width: 20px;
    height: 20px;
    background-color: #198754;
    border-radius: 50%;
    border: 2px solid #198754;
    cursor: pointer;
  }
  
  #ci_tx_data_length::-webkit-slider-thumb, #ci_rx_data_length::-webkit-slider-thumb, #ci_connection_interval::-webkit-slider-thumb, #ci_slave_latency::-webkit-slider-thumb, #system_xtal_delta::-webkit-slider-thumb, #adv_pdu_data_length::-webkit-slider-thumb, #adv_broadcast_interval::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background-color: #198754;
    border-radius: 50%; 
    border: 2px solid #198754;
    cursor: pointer;
  }