body {
    display: flex;
    justify-content: center;
}

.btn-datatable{
    background-color: #007bff;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
}

.full-page{
    display: flex;
    flex-direction: row;
}

/* From Uiverse.io by AbanoubMagdy1 */ 
.switch {
    --circle-dim: 1.4em;
    font-size: 17px;
    position: relative;
    display: inline-block;
    width: 3.5em;
    height: 2em;
}
  
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}

/* To hide the checkbox */
#btnSwitch {
display: none;
}

.toggleSwitch {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 50px;
height: 30px;
background-color: rgb(82, 82, 82);
border-radius: 20px;
cursor: pointer;
transition-duration: .2s;
}

.toggleSwitch::after {
content: "";
position: absolute;
height: 14px;
width: 14px;
left: 5px;
background-color: transparent;
border-radius: 50%;
transition-duration: .2s;
box-shadow: 5px 2px 7px rgba(8, 8, 8, 0.26);
border: 5px solid white;
}

#btnSwitch:checked+.toggleSwitch::after {
transform: translateX(180%);
transition-duration: .2s;
background-color: white;
}
/* Switch background change */
#btnSwitch:checked+.toggleSwitch {
background-color: #2c3e50;
transition-duration: .2s;
}