body {
    font-family: Inter,sans-serif,"Segoe UI",Tahoma,Geneva,Verdana,sans-serif!important;
    background: radial-gradient(black 15%,transparent 16%) 0 0,radial-gradient(black 15%,transparent 16%) 8px 8px,radial-gradient(rgba(255,255,255,.1) 15%,transparent 20%) 0 1px,radial-gradient(rgba(255,255,255,.1) 15%,transparent 20%) 8px 9px;
    background-color: #1d1d1d;
    background-size: 16px 16px;
    margin:0;
    padding:30px 0;
    color:#ffffff;
}
a, a:link, a:visited, a:hover, a:active{
    color: #ffffff;
}
a{
    text-decoration:none;
}
a:hover {
    text-decoration: underline;
}
table, th, td {
    border:1px solid #000000;
    border-collapse: collapse;
    font-size:14px;
    text-align:center;
    color:#000000;
}
table{
    width:100%;
    background:#ffffff;
    table-layout: fixed;
}
th, td {
    padding:5px;
    background:#cccccc;
}
th {
    font-weight:bold;
    height:36px;
    min-width:50px;
}
h2, h3{
    text-align:center;
}
.header, .footer{
    position:fixed;
    left:0;
    width:100%;
    text-align:center;
}


.menu-btn {
    display:none;
}
.header, .footer{
    margin:0 auto;
    padding:0;
    width:100%;
    min-width:1000px;
    line-height:30px;
    height:30px;
    background:#ccc;
    color:#000;
    position:fixed;
    left:50%;
    transform:translate(-50%,0);
    z-index:2;
}
.header{
    top:0;
}
.header a{
    color:#000;
    font-weight:bold;
    display:block;
    height:30px;
    line-height:30px;
}
.header .logout,
.header .user-info{
    position:fixed;
    top:0;
    height:30px;
    line-height:30px;
    padding:0 5px;
    background:#aaa;
}
.header .user-info{
    right:100px;
    min-width:400px;
    text-align:right;
    overflow:hidden;
}
.header .logout{
    right:10px;
    width:65px;
}
.header-menu{
    list-style:none;
    float:left;
    margin:0;
    padding:0;
    width:78%;
    height:30px;
}
.header-menu li{
    float:left;
    text-align:center;
    margin:0;
    padding:0 10px;
    width:auto;
    line-height:30px;
    height:30px;
}
.header-menu li:hover{
    background:#666;
}


.footer{
    bottom:0;
    text-align:center;
}


.entry{
    position:relative;
    margin:20px auto;
    padding:10px;
    width:400px;
    min-height:200px;
    overflow:hidden;
    border:1px #ccc solid;
    text-align:center;
}
.response{
    position:relative;
    margin:5px auto;
    padding:10px;
    width:1000px;
    overflow:hidden;
    text-align:center;
    font-size:1.25em;
    border:1px #cccccc solid;
}
.response h2{
    margin:0;
    padding:10px 0;
}
.entry label{
    position:relative;
    margin:0 auto;
    padding:5px 0;
    font-size:1.25em;
}
.entry .entry-text{
    position:relative;
    margin:0 auto;
    padding:5px 0;
    width:80%;
    text-align:center;
}
.entry .entry-btn{
    position:relative;
    margin:0 auto;
    padding:5px 0;
    width:60%;
    font-weight:bold;
    font-size:1.5em;
}


.main a, .main a:link, .main a:visited, .main a:hover, .main a:active{
    color: #000000;
}


.admin,
.admin-users,
.profile,
.dashboard,
.squares-list,
.edit-squares-list,
.squares,
.create_sq,
.edit_sq{
    position:relative;
    margin:0 auto;
    padding:20px 0;
    min-height:100px;
    overflow:hidden;
}
.profile,
.create_sq,
.edit_sq{
    width:500px;
}
.dashboard,
.squares-list,
.edit-squares-list,
.squares{
    width:1200px;
}

.admin{
    width:800px;
}
.admin-users{
    width:1200px;
}
.admin td{
    min-height:30px;
}
.admin h2,
.admin-users h2{
    font-size:1.25em;
    line-height:40px;
    margin:0;
}
.admin td:first-child:not([colspan="2"]){
    width:20%;
    text-align:right;
}

.admin td:last-child,
.admin-users td{
    padding:0;
}
.admin td:last-child input{
    padding:5px 2%;
    width:96%;
    height:30px;
    border:0;
}
.admin td:last-child{
    width:80%;
}
.admin textarea{
    padding:10px 2%;
    width:96%;
    height:280px;
    border:0;
}
.admin-users table input{
    padding:5px 2%;
    width:96%;
    height:20px;
    border:0;
    text-align:center;
}
.admin-users td{
    min-height:20px;
}
.admin-users thead tr:first-child td{
    font-size:1.2em;
    font-weight:bold;
    min-height:30px;
    word-wrap:break-word;
    background:#aaaaaa;
}
.admin-users td[colspan]{
    height:10px;
    background:#333333;
}
.admin-users td:nth-child(1),
.admin-users td:nth-child(5),
.admin-users td:nth-child(6),
.admin-users td:nth-child(7),
.admin-users td:nth-child(8){
    width:8%;
}
.admin-users td:nth-child(2),
.admin-users td:nth-child(3),
.admin-users td:nth-child(4){
    width:20%;
}








.profile td:first-child,
.create_sq td:first-child,
.edit_sq td:first-child{
    width:40%;
    text-align:right;
}
.profile td:last-child,
.create_sq td:last-child,
.edit_sq td:last-child{
    width:60%;
    padding:0;
}
.profile td:last-child input,
.create_sq td:last-child input,
.edit_sq td:last-child input{
    padding:5px 3%;
    width:94%;
    height:20px;
    border:0;
}
.edit_sq td:last-child select{
    padding:5px 3%;
    width:100%;
    height:30px;
    border:0;
}
.profile .update-btn,
.create_sq .create-btn,
.edit_sq .update-btn,
.admin .update-btn,
.admin-users .update-btn{
    position:relative;
    margin:0 auto;
    padding:5px 0;
    width:100%;
    font-weight:bold;
    font-size:1.5em;
}
.admin-users .update-btn{
    position:relative;
    margin:5px 0;
    padding:5px 0;
    width:20%;
    float:right;
    font-weight:bold;
    font-size:1.5em;
}
.edit_sq .a-btn{
    display:block;
    float:left;
    margin:30px 2%;
    padding:10px 0;
    width:46%;
    height:60px;
    line-height:30px;
    background:#cccccc;
    text-align:center;
    vertical-align:middle;
    font-size:1.5em;
    font-weight:bold;
}

.dashboard thead th,
.squares-list thead th,
.editsquares-list thead th,
.squares thead th{
    font-weight:bold;
    background:#aaaaaa;
}


.dashboard tbody tr:last-child{
    font-weight:bold;
    font-size:1.5em;
    background:#aaaaaa;
}
.dashboard tbody tr:last-child td:first-child{
    text-align:right;
}
.dashboard th:nth-child(1),
.dashboard th:nth-child(6),
.dashboard th:nth-child(8),
.dashboard th:nth-child(9),
.dashboard th:nth-child(10){
    width:5%;
}
.dashboard th:nth-child(2){
    width:25%;
}
.dashboard th:nth-child(3){
    width:16%;
}
.dashboard th:nth-child(4),
.dashboard th:nth-child(5){
    width:8%;
}
.dashboard th:nth-child(7){
    width:18%;
}


.squares-list th:nth-child(1),
.squares-list th:nth-child(4),
.squares-list th:nth-child(5),
.squares-list th:nth-child(6){
    width:8%;
}
.squares-list th:nth-child(2){
    width:25%;
}
.squares-list th:nth-child(3){
    width:18%;
}
.squares-list th:nth-child(7){
    width:20%;
}
.squares-list th:nth-child(8){
    width:5%;
}


.edit-squares-list th:nth-child(1),
.edit-squares-list th:nth-child(4),
.edit-squares-list th:nth-child(5),
.edit-squares-list th:nth-child(6){
    width:8%;
}
.edit-squares-list th:nth-child(2){
    width:23%;
}
.edit-squares-list th:nth-child(3){
    width:15%;
}
.edit-squares-list th:nth-child(7){
    width:20%;
}
.edit-squares-list th:nth-child(8),
.edit-squares-list th:nth-child(9){
    width:5%;
}


.squares-info,
.squares-pw{
    position:relative;
    margin:10px auto;
    padding:10px;
    width:480px;
    text-align:center;
    overflow:hidden;
}


.squares-info{
    min-height:200px;
    border:1px #cccccc solid;
}
.squares-info img{
    max-width:100%;
    height:100px;
}
.squares-pw{
    min-height:50px;
    border:1px #cccccc solid;
}
.squares-pw h3{
    margin:10px auto;
}
.squares-pw #squarepw{
    margin:10px auto;
    padding:5px 3%;
    width:94%;
    height:20px;
    border:0;
}
.squares-pw .submit-btn{
    position:relative;
    margin:0 auto;
    padding:5px 0;
    width:80%;
    font-weight:bold;
    font-size:1.5em;
}


.squares table{
    height:1200px;
    border-collapse: collapse;
}
.squares td{
    overflow:hidden;
    word-wrap: break-word;
    font-size:0.9em;
    padding:0;
}
.squares thead tr:first-child{
    height:105px;
}
.squares thead tr:nth-child(2) td{
    height:40px;
}
.squares td:nth-of-type(1){
    width:105px;
}
.squares td:nth-of-type(2){
    width:40px;
}
.squares table tbody tr{
    height:105px;
}
.squares tbody td:nth-of-type(-n+10){
    width:105px;
}
.squares .team_1{
    height:90px
}
.squares .team_2{
    width:90px;
}
.squares .checkbox{
    width:60%;
    height:60%;
    pading:0;
    margin:0;
}