@import url('https://fonts.googleapis.com/css2?family=Kanit&family=Prompt:wght@300;400&display=swap');

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.text-red {
    color: darkred!important;
}

.text-green {
    color: darkgreen!important;
}

.text-blue {
    color: blue !important;
}

.bg-white {
    background-color: white !important;
}

.bg-red {
    background-color: darkred!important;
}

.bg-orange {
    background-color: orange !important;
}

.bg-yellow {
    background-color: yellow !important;
}

.bg-lightgray {
    background-color: lightgray !important;
}

.bg-green {
    background-color: lawngreen !important;
}

.dflex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.dflex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    padding: 20px;
}

.c-pointer {
    cursor:pointer;
}

.p-text {
    border: 1px solid #cfd4da;
    height: 40px;
    margin: 3px;
    text-align: left;
    vertical-align: middle;
    padding: 5px;
}

.font14 {
    font-size: 14px!important;
}

/* For WebKit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 4px; /* Width of vertical scrollbar */
    height: 4px; /* Height of horizontal scrollbar */
}

::-webkit-scrollbar-thumb {
    background-color: #888; /* Color of the scrollbar thumb */
    border-radius: 4px; /* Rounded edges */
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: #555; /* Darker color when hovering */
    }

::-webkit-scrollbar-track {
    background: #f1f1f1; /* Background color of the scrollbar track */
    border-radius: 4px;
}

    /* Optional: Style for scrollbar track on hover */
    ::-webkit-scrollbar-track:hover {
        background: #e1e1e1;
    }