body, html {
    height: 100%;
    font-family: 'Sarabun', cursive !important;
    font-size: 0.95rem !important;
}
.bg {
    background: #272c67;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    /* clip-path: polygon(0 0, 55% 0, 45% 100%, 0% 100%); */
}
.canvas{
    height: 300px!important;
}
.toggle.ios, .toggle-on.ios, .toggle-off.ios { 
    border-radius: 10px; 
    font-weight: 100px;
}
.toggle.ios .toggle-handle { 
    border-radius: 10px; 
}
.toggle-on.btn {
    padding-right: 19px;
    font-weight: 100 !important;
}
.btn {
    font-size: inherit !important;
}

.card, .small-box, .small-box-footer{
    border-radius: 15px !important;
}
.small-box h1{
    font-size: 2rem !important;
}

.rtl{
    direction: rtl !important;
}

@media (max-width: 1200px) {
    .small-box h1 {
        font-size: 1.7rem !important;
    }
}

@media (max-width: 767px) {
    .small-box h1 {
        font-size: 1.4rem !important;
    }
}

@font-face {
    font-family: 'Sarabun';
    src: url('../fonts/Sarabun-Regular.ttf') format('truetype');
}

.main-sidebar {
    background-color: #272c67 !important  
}

table.text-overflow {
    table-layout: fixed;
}

th {
    text-align: center;
}

tbody tr.selected {
    color: #0000FF !important;
    background-color: #0000FF !important;
}

td.text-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-width060 {
    width: 60px !important;
}

.btn-width075 {
    width: 75px !important;
}

.btn-width100 {
    width: 100px !important;
}

.btn-width150 {
    width: 150px !important;
}

#logs tbody td,
#logs tbody th {
    padding: 3px 5px; /* Adjust the padding as needed */
    line-height: 1.0; /* Adjust the line height as needed */
    vertical-align: middle;
}

input[type=number][step="any"]::-webkit-inner-spin-button,
input[type=number][step="any"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}