table
{
margin: 2em auto;
width: auto;
}

td
{
font-size: 80%;
padding: 0 .25em;
border: 1px solid silver;
width: 1.75em;
text-align: center;
}

td a
{
display: block;
text-decoration:none;
}

td a:hover
{
color: green;
}

td.currentpage
{
font-weight: bold;
color: red;
border: 1px solid red;
}

td.dots
{
width: 1em;
}

td.prev, td.next
{
width: 1.5em;
}

td.little
{
display: none;
}

.dots input::-webkit-outer-spin-button,
.dots input::-webkit-inner-spin-button
{
-webkit-appearance: none;
margin: 0;
}

.dots input[type="number"]
{
-moz-appearance: textfield;
}

.dots input[type="number"]
{
position: relative;
margin: 0;
text-align: center;
width: 1.5em;
padding: .15em 0;
height: .85em;
text-decoration: underline;
outline: none;
}

.dots input[type="number"]:focus
{
text-decoration-color: green;
}

.dots input[type="number"]:hover
{
text-decoration-color: blue;
}

input[type='number']::placeholder
{v font-size: 95%;
color:black;
font-weight:normal;
opacity: 1;
letter-spacing: .15em;
}

.dots input.numbi
{
font-size: 95%;
color: red;
font-weight: bold;
border: none;
cursor: pointer;
}

.inf_txt
{
position: absolute;
width: auto;
padding: .15em .5em;
background: white;
color: navy;
border: 2px solid navy;
font-size: 65%;
font-weight: normal;
margin: -2.2em 0 0 -3.1em;
border-radius: .25em;
}

.inf_txt:after, .inf_txt:before
{
top: 100%;
left: 50%;
border: solid transparent;
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}

.inf_txt:after
{
border-color: rgba(136, 183, 213, 0);
border-top-color: navy;
border-width: .5em;
margin-left: -.5em;
}

.inf_txt:before
{
border-color: rgba(194, 225, 245, 0);
border-top-color: navy;
border-width: .5em;
margin-left: -.5em;
}

.inf_txt
{
display:none;
}

.dots:hover > .inf_txt
{
display:block;
}

td.prevs, td.nexts
{
display:none;
}

.info_text
{
position: absolute;
width:auto;
padding: .15em .5em;
background: white;
color: navy;
border: .15em dashed maroon;
font-size: 60%;
font-weight: normal;
margin: 2.8em 0 0 -6em;
border-radius: .25em;
}

.info_text
{
display:none;
}

.dots:hover > .info_text
{
display:block;
}

.info_ktext
{
display:none;
}
.inf_ktxt
{
display:none;
}

summary::marker
{
content: "";
}

td.currentpage form
{
display:none;
}

@media screen and (max-width: 600px)
{

table
{
margin: 2em auto 5em auto;
}

td
{
font-size: 16px;
padding: 0 5px;
}

td.page
{
display: none;
}

td.dots
{
display: none;
}

td.start, td.end
{
display: none;
}

td.prevs, td.nexts
{
display: block;
width: 1.5em;
padding: 2px 0;
}

td.currentpage span
{
display:none;
}

td.currentpage form
{
display:block;
}

.currentpage input.numbi
{
font-size: 95%;
color: red;
font-weight: bold;
border: none;
cursor: pointer;
}

.currentpage input::-webkit-outer-spin-button,
.currentpage input::-webkit-inner-spin-button
{
-webkit-appearance: none;
margin: 0;
}

.currentpage input[type="number"]
{
-moz-appearance: textfield;
}

.currentpage input[type="number"]
{
position: relative;
margin: 0;
text-align: center;
width: 1.5em;
padding: .15em;
height: .85em;
text-decoration: underline;
outline: none;
}

td.currentpage
{
font-weight: bold;
color: red;
border: 1px solid red;
width: 2.75em;
}

td.little
{
display: block;
width: 70px;
padding: 3px 3px 3px 3px;
}

.info_text
{
display:none;
}

.dots:hover > .info_text
{
display:block;
}

.inf_ktxt
{
position: absolute;
width:auto;
padding: 3px 5px;
background: white;
color: navy;
border: 2px solid navy;
font-size: 14px;
letter-spacing: 0;
font-weight: normal;
margin: -40px 0 0 -37px;
border-radius: 5px;
}

.inf_ktxt:after, .inf_ktxt:before
{
top: 100%;
left: 50%;
border: solid transparent;
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}

.inf_ktxt:after
{
border-color: rgba(136, 183, 213, 0);
border-top-color: navy;
border-width: 8px;
margin-left: -8px;
}

.inf_ktxt:before
{
border-color: rgba(194, 225, 245, 0);
border-top-color: navy;
border-width: .8px;
margin-left: -8px;
}

.inf_ktxt
{
display:none;
}

.currentpage:hover > .inf_ktxt
{
display:block;
}

.info_ktext
{
position: absolute;
width:200px;
padding: 3px;
background: white;
color: navy;
border: .15em dashed red;
font-size: 14px;
font-weight: normal;
margin: 40px 0 0 -60px;
border-radius: 5px;
}

.info_ktext
{
display:none;
}

.currentpage:hover > .info_ktext
{
display:block;
}

}