button{
    border-width: 0px;
}
body{
    font-family: 'Noto Sans Thai', serif;
}

.auto-width {
    /* 1. Fallback to normal full-width */
    max-width: 100%;
  
    /* 2. Firefox (old syntax) */
    max-width: -moz-available !important;
  
    /* 3. Chrome/Safari */
    max-width: -webkit-fill-available !important; ;
  
    /* 4. Spec-prefix (where supported) */
    max-width: fill-available !important;
  
    /* 5. Ultimate “pure CSS” fallback: clamp() or min() */
    /* ensures you never exceed viewport width */
    max-width: min(100%, 100vw);
  }
  
.c-primary {
    background-color: var(--md-sys-color-primary) !important;
    color: var(--md-sys-color-on-primary) !important;
}

.c-secondary {
    background-color: var(--md-sys-color-secondary) !important;
    color: var(--md-sys-color-on-secondary) !important;
}

.c-tertiary {
    background-color: var(--md-sys-color-tertiary) !important;
    color: var(--md-sys-color-on-tertiary) !important;
}

.c-error {
    background-color: var(--md-sys-color-error) !important;
    color: var(--md-sys-color-on-error) !important;
}
.c-ok{
    background-color: var(--md-sys-color-ok) !important;
    color: var(--md-sys-color-on-ok) !important;
}
.c-blue{
    background-color: #386aaa !important;
    color: var(--md-sys-color-on-primary) !important;
}

.c-surface {
    background-color: var(--md-sys-color-surface) !important;
    color: var(--md-sys-color-on-surface) !important;
}
.c-proherper {
    background-color: var(--color-proherper) !important;
    color: var(--color-on-proherper) !important;
}
.c-con-proherper {
    background-color: var(--color-proherper-container) !important;
    color: var(--color-on-proherper) !important;
}


.c-con-surface {
    background-color: var(--md-sys-color-surface-container) !important;
    color: var(--md-sys-color-on-surface-variant) !important;
}

.c-con-primary {
    background-color: var(--md-sys-color-primary-container) !important;
    color: var(--md-sys-color-on-primary-container) !important;
}

.c-con-secondary {
    background-color: var(--md-sys-color-secondary-container) !important;
    color: var(--md-sys-color-on-secondary-container) !important;
}

.c-con-tertiary {
    background-color: var(--md-sys-color-tertiary-container) !important;
    color: var(--md-sys-color-on-tertiary-container) !important;
}

.c-con-error {
    background-color: var(--md-sys-color-error-container) !important;
    color: var(--md-sys-color-on-error-container) !important;
}

.c-outline {
    border: 0px !important;
    box-shadow: 0px 0px 2px var(--md-sys-color-shadow) !important;
}

.c-shadow {
    box-shadow: 0px 1px 4px var(--md-sys-color-outline) !important;
    border: 0px !important;
}
.c-icon {
    vertical-align: middle;
}
.c-nooutline {
    border: 0px !important;
}

::placeholder {
    color: var(--md-sys-color-outline) !important;
}
*{
    transition: all 1s;
}

.c-text-shadow{
    text-shadow: 0px 1px 4px var(--md-sys-color-outline) !important;
}
::-webkit-scrollbar {
    width: 10px; /* Set scrollbar width */
    height: 10px; /* Set scrollbar height (for horizontal scrollbars) */
}

::-webkit-scrollbar-track {
    background: var(--md-sys-color-surface); /* Scrollbar track (background) */
    border-radius: 10px; /* Rounded background */
}

::-webkit-scrollbar-thumb {
    background: var(--md-sys-color-on-primary-container); /* Scrollbar itself */
    border-radius: 10px; /* Rounded scrollbar */
    border: 2px solid var(--md-sys-color-surface); /* Adds space around the scrollbar */
}

::-webkit-scrollbar-thumb:hover {
    background: var(--md-sys-color-on-primary-container); /* Scrollbar itself */
}

/* Remove scrollbar arrows */
::-webkit-scrollbar-button {
    display: none;
}