html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    margin: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    color: var(--cos-color-text);
    background: var(--cos-color-bg);
    font-family: var(--cos-font-family-sans);
    font-size: var(--cos-font-size-md);
    line-height: var(--cos-line-height);
    overflow-wrap: anywhere;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--cos-color-primary);
}

a:hover,
a:focus {
    color: var(--cos-color-primary-hover);
}

button,
input,
select,
textarea {
    max-width: 100%;
    font: inherit;
}

button,
[type="button"],
[type="submit"],
[type="reset"] {
    cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--cos-ring-width) var(--cos-ring-color);
}

input:disabled,
select:disabled,
textarea:disabled,
button:disabled {
    cursor: not-allowed;
}

table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
}

th,
td {
    min-width: 0;
    vertical-align: top;
    word-break: break-word;
}

.cos-scroll-x {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.cos-nowrap-ellipsis {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}