.logoscript {
	z-index: -1;
    position: absolute;
    bottom: 15%;
    right: 15%;
    text-align: left;
    width: max-content;
    margin: 0cm;
    font-family: cursive;
    font-size: 48px;
    font-weight: bold;
    #transform: rotate(-20deg);
    #-moz-transform: rotate(-20deg);
    #-webkit-transform: rotate(-20deg);
    padding: 5px;
    color: #3c50b4;
    text-decoration: none;
    border: 5px solid #3c60b4;
    border-radius: 10px;
}

.former {
    width: fit-content;
    text-align: left;
    margin: 4cm auto 2cm auto;
    border: 1px solid black;
    border-radius: 10px;
    padding: 10px 20px;
    background: linear-gradient(315deg, #fff,#888);
    color: #3c50b4;
    box-shadow: 5px 5px 3px 5px #eee;
}

.former label {
   width: 5em;
   display: inline-block;
}


input {
    margin: 0 0 1em 0;
    border-radius: 6px;
    font-size: large;
}

input.confirm {
    margin: 0 auto;
    display: block;
}

h1 {
    margin: 0.5vw 1vw 1vw 0;
}

.hse {
    font-size: smaller;
    font-family: sans-serif;
    text-align: right;
}
  * {
            transition: background-color 300ms ease, color 300ms ease;
        }
        *:focus {
            background-color: rgba(221, 72, 20, .2);
            outline: none;
        }
        html, body {
            color: rgba(33, 37, 41, 1);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
            font-size: 16px;
            margin: 0;
            padding: 0;
            padding-bottom: 3cm;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
        }
        header {
            background-color: rgba(247, 248, 249, 1);
            padding: .4rem 0 0;
        }
        .menu {
            padding: .4rem 2rem;
        }
        header ul {
            border-bottom: 1px solid rgba(242, 242, 242, 1);
            list-style-type: none;
            margin: 0;
            overflow: hidden;
            padding: 0;
            text-align: right;
        }
        header li {
            display: inline-block;
        }
        header li a {
            border-radius: 5px;
            color: rgba(0, 0, 0, .5);
            display: block;
            height: 44px;
            text-decoration: none;
        }
        header li.menu-item a {
            border-radius: 5px;
            margin: 5px 0;
            height: 38px;
            line-height: 36px;
            padding: .4rem .65rem;
            text-align: center;
        }
        header li.menu-item a:hover,
        header li.menu-item a:focus {
            background-color: rgba(221, 72, 20, .2);
            color: rgba(221, 72, 20, 1);
        }
        header .logo {
            float: left;
            height: 44px;
            padding: .4rem .5rem;
        }
        header .menu-toggle {
            display: none;
            float: right;
            font-size: 2rem;
            font-weight: bold;
        }
        header .menu-toggle button {
            background-color: rgba(221, 72, 20, .6);
            border: none;
            border-radius: 3px;
            color: rgba(255, 255, 255, 1);
            cursor: pointer;
            font: inherit;
            font-size: 1.3rem;
            height: 36px;
            padding: 0;
            margin: 11px 0;
            overflow: visible;
            width: 40px;
        }
        header .menu-toggle button:hover,
        header .menu-toggle button:focus {
            background-color: rgba(221, 72, 20, .8);
            color: rgba(255, 255, 255, .8);
        }
        header .heroe {
            margin: 0 auto;
            max-width: 1100px;
            padding: 1rem 1.75rem 1.75rem 1.75rem;
        }
        header .heroe h1 {
            font-size: 2.5rem;
            font-weight: 500;
        }
        header .heroe h2 {
            font-size: 1.5rem;
            font-weight: 300;
        }
        section {
            margin: 0 auto;
            padding: 0.5rem 1.75rem;
        }
        section h1 {
            margin-bottom: 2.5rem;
        }
        section h2 {
            font-size: 120%;
            line-height: 2.5rem;
            padding-top: 1.5rem;
        }
        section pre {
            background-color: rgba(247, 248, 249, 1);
            border: 1px solid rgba(242, 242, 242, 1);
            display: block;
            font-size: .9rem;
            margin: 2rem 0;
            padding: 1rem 1.5rem;
            white-space: pre-wrap;
            word-break: break-all;
        }
        section code {
            display: block;
        }
        section a {
            color: rgba(221, 72, 20, 1);
        }
        section svg {
            margin-bottom: -5px;
            margin-right: 5px;
            width: 25px;
        }
        .further {
            background-color: rgba(247, 248, 249, 1);
            border-bottom: 1px solid rgba(242, 242, 242, 1);
            border-top: 1px solid rgba(242, 242, 242, 1);
        }
        .further h2:first-of-type {
            padding-top: 0;
        }
        .svg-stroke {
            fill: none;
            stroke: #000;
            stroke-width: 32px;
        }
         footer {
                background-color: rgba(221, 72, 20, .8);
				text-align: center;
				position: fixed;
				bottom: 0;
				width: 100%;
			}

        }
        footer .environment {
            color: rgba(255, 255, 255, 1);
            padding: 2rem 1.75rem;
        }
        footer .copyrights {
            background-color: rgba(62, 62, 62, 1);
            color: rgba(200, 200, 200, 1);
            padding: .25rem 1.75rem;
        }
        @media (max-width: 629px) {
            header ul {
                padding: 0;
            }
            header .menu-toggle {
                padding: 0 1rem;
            }
            header .menu-item {
                background-color: rgba(244, 245, 246, 1);
                border-top: 1px solid rgba(242, 242, 242, 1);
                margin: 0 15px;
                width: calc(100% - 30px);
            }
            header .menu-toggle {
                display: block;
            }
            header .hidden {
                display: none;
            }
            header li.menu-item a {
                background-color: rgba(221, 72, 20, .1);
            }
            header li.menu-item a:hover,
            header li.menu-item a:focus {
                background-color: rgba(221, 72, 20, .7);
                color: rgba(255, 255, 255, .8);
            }
        }
/* CSS */

.inline {
    display: inline-block;
    width: fit-content;
    padding: 0 1em;
    }
.pagination li  a{padding: 5px 15px; border-radius:8%;text-align:center; border:1px solid  rgb(0 103 119 / 77%); }
ul.pagination,ul.pagination li {padding:5px 0; }
ul.pagination li.active {    background: #476e9e;}
ul.pagination li.active a {  color:white;}
ul.pagination li  a { text-decoration: none;}
li.logo img {  height: 2em;}

.boxdiv {width: 42%;    display: inline-block;    margin: 5px;vertical-align: top;background:#efefef;}
.boxdiv.full { width: 85%;display: block;}
.boxdiv.half { width: 20.75%;}
.boxdiv.halfplus { width: 63%;}
.boxdiv.quarter { width: 10.25%;}
.boxdiv.eighth { width: 5%;}
.boxdiv label { margin-right:5px;font-variant: small-caps;}
h1 {text-align:right;font-size:1.5em; font-variant:small-caps;border-bottom:1px dotted gray;}
th[rel=Data] {
    width: 8em;
}
.cmds {
    width: 4em;
}

@media (min-width: 320px) and (max-width: 1024px) {
  .former  {    width: 60% ;margin-top: 30%;  }
  input    {width: 100% !important;  font-size: 1.5em !important;}
  .logoscript {
    bottom: auto;
    top:2%;
    right: 15%;
}