body,
.alert-primary,
.alert-secondary,
.alert-success,
.alert-warning,
.alert-danger {
    color: #000;
}

body {
    cursor: default;
    font-size: 22px;
    min-width: 320px;
}

label {
    cursor: pointer;
}

code {
    color: #000;
}

button {
    cursor: pointer;
}

button:focus {
    outline: none;
}

.alert {
    position: relative;
}

.alert:before {
    background-repeat: no-repeat;
    content: '';
    height: 50px;
    left: 0.75rem;
    position: absolute;
    top: 0.75rem;
    width: 50px;
}

.alert-primary:before {
    background-image: url(../images/important.png);
}

.alert-secondary:before {
    background-image: url(../images/note.png);
}

.alert-success:before {
    background-image: url(../images/tip.png);
}

.alert-warning:before {
    background-image: url(../images/caution.png);
}

.alert-danger:before {
    background-image: url(../images/warning.png);
}

.alert > h3 {
    margin: 0 0 1rem 50px;
}

pre {
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    padding: 0.5rem 1rem;
}
ol, ul {
    padding-left: 1.5rem;
}

ol {
    list-style: decimal inside;
}

body > ol {
    padding-left: 0;
}

ol > li:before {
    margin-right: 8px;
}

ol ol > li:before {
    margin-right: 10px;
}

ol ol {
    margin: 0.5rem 0;
}

li + li {
    margin-top: 1rem;
}

.ToC, .ToC ol {
    list-style: none none;
}

.ToC {
    padding-left: 0;
}

.ToC li {
    position: relative;
}

.ToC li + li {
    margin-top: 0;
}

.break-all {
    display: block;
    word-break: break-all;
}

dd {
    margin-left: 2em;
}

.table-box,
.inner-scroll-x {
    margin-bottom: 1rem;
    overflow-x: auto;
}

.table-box > table {
    margin-bottom: 0;
}

.props td:nth-child(2) {
    font-style: italic;
}

.tag-attrs td:first-child code,
#table-21-1 + .table-box td:nth-child(2) code,
#table-21-2 + .table-box td:nth-child(1) code,
#table-21-3 + .table-box td:nth-child(1) code,
#table-21-4 + .table-box td:nth-child(1) code,
#table-21-5 + .table-box td:nth-child(1) code {
    word-break: normal;
}

#table-18-1 + .table-box td:nth-child(2),
#table-18-1 + .table-box td:nth-child(3) {
    white-space: nowrap;
}

.example {
    background: #c8c5ac;
    margin-bottom: 1rem;
    padding: 10px;
}

.example > b {
    display: block;
    margin-bottom: 0.5rem;
}

.example > pre {
    margin-bottom: 0;
}

#btn-scroll2top,
#btn-scroll2top:before,
#btn-scroll2top:after {
    transition-duration: 0.25s;
}

#btn-scroll2top {
    background: #fff;
    border: 2px solid #000;
    border-radius: 50%;
    bottom: 10px;
    height: 30px;
    position: fixed;
    right: 10px;
    width: 30px;
}

#btn-scroll2top:before,
#btn-scroll2top:after {
    border: 10px solid transparent;
    content: '';
    display: block;
    height: 10px;
    left: 50%;
    margin-left: -10px;
    position: absolute;
    top: 50%;
    width: 10px;
}

#btn-scroll2top:before {
    border-bottom: 10px solid #000;
    margin-top: -16px;
}

#btn-scroll2top:after {
    border-bottom: 10px solid #fff;
    margin-top: -13px;
}

#btn-scroll2top:hover {
    background: #000;
}

#btn-scroll2top:hover:before {
    border-bottom-color: #fff;
}

#btn-scroll2top:hover:after {
    border-bottom-color: #000;
}

.menu-chbox-box {
    margin: 0;
}

#menu-chbox {
    height: 0;
    position: absolute;
    width: 0
}

.btn-go2hmain,
.menu-chbox-box {
    margin-bottom: 1rem;
}

.page-main .btn-go2hmain,
.page-main .menu-chbox-box,
.page-inner .ToC {
    display: none;
}

.page-inner #menu-chbox:checked + .ToC {
    display: block;
}

.menu-chbox {
    height: 0;
    margin-right: 15px;
    width: 0;
}

.menu-chbox + label {
    display: inline-block;
    height: 20px;
    left: 0;
    margin: 0;
    position: absolute;
    top: 7px;
    width: 20px;
}

.menu-chbox + label:before,
.menu-chbox + label:after {
    border: 6px solid transparent;
    content: '';
    display: block;
    position: absolute;
    top: 4px;
}

.menu-chbox + label:before {
    border-left: 6px solid #000;
    left: 4px;
}

.menu-chbox + label:after {
    border-left: 6px solid #fff;
    left: 2px;
}

.menu-chbox ~ ol {
    display: none;
}

.menu-chbox:checked ~ ol {
    display: block;
}

.menu-chbox:checked + label:before,
.menu-chbox:checked + label:after {
    border: 6px solid transparent;
    left: 0;
}

.menu-chbox:checked + label:before {
    border-top: 6px solid #000;
    top: 8px;
}

.menu-chbox:checked + label:after {
    border-top: 6px solid #fff;
    top: 6px;
}

.menu-chbox + label:hover:before{
    border-left-color: #f00;
}

.menu-chbox:checked + label:hover:before {
    border-left-color: transparent;
    border-top-color: #f00;
}

@media (min-width: 768px) {
    body {
        font-size: 20px;
    }

    .alert {
        padding-left: 4.25rem;
    }

    .alert > h3 {
        margin: 0 0.5rem 0 0;
    }
    
    .menu-chbox + label {
        top: 4px;
    }
}

@media (min-width: 1024px) {
    .container {
        font-size: 16px;
    }
    
    .menu-chbox + label {
        top: 3px;
    }
}