/* based on markusmaal.ee/admin/theme.php */
body {
    background: linear-gradient( -45deg, #800, #880, #080, #088, #008, #808);
    min-height: 100vh;
    overflow:hidden;
    color: whitesmoke;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

h1 {
    font-weight: normal;
    text-align: center;
}

main {
    /*margin: 4em;
    padding: 2em;
    background-color: #006;
    outline: #0078 solid 0.25em;
    height: 75vh;
    position: relative;*/
    overflow: auto;
    max-width: 90%;
    max-height: 90vh;
}

.window {
    position: fixed;
    z-index: 9;
    background-color: rgba(0, 0, 0, 0.9);
    text-align: left;
    left: 10%;
    top: 5vh;
}

.windowcontent {
    padding: 0.4em;
}
  
.windowtitle {
    position: sticky;
    top: 0;
    line-height: 1.5rem;
    width: inherit;
    padding: 5px;
    cursor: move;
    z-index: 10;
    text-align: center;
    background-color: rgba(0, 0, 170, 0.5);
    color: #fff;
}

#t_friendlyname {
    min-width: 400px;
}

input[type="color" i] {
    --webkit-appearance: square-button;
    width: 50px;
    height: 30px;
    display: inline;
    background-color: transparent;
    cursor: default;
    border-width: 0;
    border-style: solid;
    border-color: rgb(169, 169, 169);
    border-image: initial;
    padding: 0;
}

.nomargin {
    margin-right: 0;
}

p {
    float: left;
    width: 100%;
}

hr {
    float: left;
    width: 100%;
}

h2 {
    font-style: normal;
    font-weight: normal;
    text-align: left;
}

.cont {
    margin-left: auto;
    margin-right: auto;
    vertical-align: bottom;
    padding: 3em;
    padding: 3em;			width: 90%;
    background: #003;
    margin-top: 1em;
    color: #fff;
    float: left;
    margin-bottom: 4em;
}

.cont a {
    color: #088;
}

table {
    border-collapse: collapse;
    margin:0 auto;
    width: 100%;
    display: flex;
    overflow-x: auto;
}

img {
    margin: 0em;
    padding: 0em;
}

.desc {
    text-align: center;
}

td {
    margin: 1.5em;
    text-align: center;
    padding: 0.5em;
}

a {
    transition: 0.2s;
    text-decoration: none;
    color: #0ff;		}

a:hover {
    color: #0ff;
}

p.copy {
    color: #0aa;
    text-align: center;
}

p.copy:hover {
    animation: hover 1s linear infinite;
    cursor: default;
}

.blink {
    animation: blink 1s linear infinite;
}
.blink-soft {
    animation: teeter 1s linear infinite;
    color: #f00;
}
.sizable {
    animation: zoom 20s linear infinite;
}
.colorful {
    animation: colors 5s linear infinite;
}
.unlogic {
    position: fixed;
    font-family: "Comic Sans MS", "Segoe UI", "Microsoft Sans Serif", "Ubuntu", "Sans";
    animation: fun 4s linear infinite;
}

@keyframes fun {
    0%{ font-size: 1em; left: 0em; top: 0em; color: #ff0; }
    15%{ font-size: 8em; left: 1.4em; top: 0em; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); color: #0ff; }
    50%{ font-size: 0.5em; left: 18em; top: 20em; -webkit-transform: rotate(80deg); -moz-transform: rotate(80deg); color: #f0f; }
    75%{ font-size: 8em; left: 0em; top: 4em; -webkit-transform: rotate(-100deg); -moz-transform: rotate(-100deg); color: #f00; }
    100%{ font-size: 1em; left: 0em; top: 0em; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); color: #ff0; }
}

@keyframes zoom{
    0%{
        font-size: 0.5em;
    }
    50%{
        font-size: 8em;
    }
    100%{
        font-size: 0.5em;
    }
}
@keyframes colors{
    0%{
        color: #f00;
    }
    16%{
        color: #ff0;
    }
    32%{
        color: #0f0;
    }
    49%{
        color: #0ff;
    }
    66%{
        color: #00f;
    }
    84%{
        color: #f0f;
    }
    100%{
        color: #f00;
    }
}
@keyframes blink{
    0%{
        opacity: 1;
    }
    49%{
        opacity: 1;
    }
    50%{
        opacity: 0;
    }
    99%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes hover {
    50%{
        color: #0cc;
    }
    100%{
        color: #0aa;
    }
}

@keyframes teeter{
    0%{
        opacity: 1;
    }
    50%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
img[alt="www.000webhost.com"]
{
    display:none;
}

.disclaimer
{
    display:none;
}

hr {
    border: solid 0.15em;
    border-color: #555;
    margin: 0.15em;
}

div.setting {
    background: #222;			padding: 3em;			box-sizing: border-box;
    float: left;
    
    width: 100%;
    color: #fff;		}

div.button:focus, div.backbutton:focus, div.nobutton:focus, input[type="submit"]:focus, button:focus, a.listitems:focus {
    border-color: #222;
    animation-name: glow;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}
div.button, div.backbutton, div.nobutton, input[type="submit"], button, div.redbutton, div.ratebutton, a.listitems {
    background: #003;
    padding: 1em;
    margin-top: 1em;
    color: #fff;
    outline: none;
    transition: 0.5s;
    cursor: pointer;
    border: solid 0.1em;
    border-color: #0ff0;
    margin-right: 1em;
}
        
.normaltable {
            }

td.normaltable {
    text-align: left;
    padding-left: 1em;
}

th.normaltable {
    padding-left: 1em;
    font-weight: normal;
}

div.redbutton {
    background: #800;
}

div.redbutton:hover {
    background: #f00;
    border-color: #ff0f;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus, select:focus, textarea:focus, input[type="date"]:focus {
    border-color: #0027;
    animation-name: glow2;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}
input[type="text"], input[type="password"], select, input[type="number"], input[type="datetime-local"], textarea, input[type="date"] {
    background: #003;
    color: #fff;
    border: solid 0.2em #0003;
    padding: 1em;
    margin-top: 0.5em;
    transition: 0.2s;
    outline: none;
    border-color: #0023;
}

input[type="text"]:hover, input[type="password"]:hover, input[type="date"]:hover, input[type="datetime-local"]:hover, select:hover, textarea:hover {
    background: #005;
}
input[type="checkbox"] {
    -webkit-appearance:none;
    border-radius:4em;
    background-color:#003;
    height:1.5em;
    width:1.5em;
    cursor:pointer;
    position:relative;
    -webkit-transition: .10s;
    vertical-align: middle;
}
input[type="checkbox"]:hover {
    background-color:#00f;
}
input[type="checkbox"]:checked {
    background-color:blue;
}
input[type="checkbox"]:before, input[type="checkbox"]:checked:before {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    line-height:1.5em;
    text-align:center;
    color:#0f0;
}
input[type="checkbox"]:checked:before {
    content: '✔';
}

input[type="submit"]:hover, button:hover {
    background: #006;
    border-color: #002;
    animation-name: glow;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}



div.backbutton {
    padding: 0.5em;
    background: #005;
    border: solid 0.1em;
    border-color: #0ff0;
    transition: 0.4s;
}

div.backbutton:hover
{
    background: #00f;
    border-color: #0ff;
    animation-name: glow;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

table.normaltable {
    margin-left: 0px;
    text-align: left;
}

@keyframes glow {
    
    0% {border-color: #00a;}
    50% {border-color: #007;}
    100% {border-color: #00a;}		}

@keyframes glow2 {
    
    0% {border-color: #0027;}
    50% {border-color: #0024;}
    100% {border-color: #0027;}		}

div.nobutton {
    background: #0033;
    border: solid 0.1em;
    border-color: #0ff0;
    cursor: not-allowed;
            }

div.button:hover, div.backbutton:hover, a.listitems:hover {
    background: #006;
    border-color: #002;
    animation-name: glow;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

div.cut {
    width: 90%;
    max-width: 1024px;
    margin: auto;
}

div.comment_section {
    float: left;
}

div.inline-cont {
    display: inline;
    float: none;
}

div.inline-cont a, div.inline-cont p, div.inline-cont hr, div.inline-cont input, div.inline-cont textarea, div.inline-cont a.listitems {
    float: none;
    display: inline-block;
}

.inline-cont.listitems {
    display: inline-block;
}

.copyright {
    display: inline-block;
    width: 100%;
    text-align: center;
    color: #009;
margin-bottom: 50px;
}

/* to fix alignment issues */
.clearfix * {
     float: none;
     display: block;
     content: '';
}

.label {
    float: left;
    margin-top: 0.75em;
    margin-right: 1.5em;
}

.mt-2 {
    margin-top: 1em;
}

.mb-2 {
    margin-bottom: 1em;
}

.w-100 { width: 100%; }
.w-75 { width: 75%; }
.w-50 { width: 50%; }
.w-25 { width: 25%; }

.linefix {
    float: left;
    width: 100%;
}