
body { font-family: Arial, sans-serif; }
img { max-width: 100%; height: auto; }
h1, h2 {
    font-size: 24px;
}
.title-head {
margin:10px;
}
.wrapper {
  max-width: 960px;
  margin: auto;
}
.datapaito {
    margin:auto;
    max-width: 900px;
}
#drawing-table {
    background: #FFF none repeat scroll 0 0;
    margin: 10px;
    border-collapse: collapse;
    width: 100%;
  margin:0;
    color: #000;
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  margin-bottom:20px;
}
#drawing-table td {
    border: 1px solid #646464;
    text-align: center;
    padding: 2px 0;
    width: 20px;
    font-size: 14px;
    color:#000;

}
#drawing-table tr:nth-last-child(5n+1), #drawing-table tr .nxpx {
    background: #e3e3e3;
}
#drawing-table .disabled {
    background: #afafaf; color:#7c7c7c;
}
#drawing-table td.nxpx {
    color: #c7c7c7;
    background-color: #FFF;
}

#paitocolor p {
    clear: both;
}
#paitocolor .color {
    float: left;
    height: 28px;
    position: relative;
    width: 28px;
    cursor:pointer;
    border-radius: 0;
    border:1px solid #adadad;
    margin:0 2px;
}
#paitocolor .color:first-child {
  margin-left:0;
}
#paitocolor .color.eraser {
    background: none repeat scroll 0 0 #fff;
}
#paitocolor .color.Blue {
    background: #43a2ff;
}
#paitocolor .color.Aqua {
    background: #00F5FF;
}
#paitocolor .color.Teal {
  background: #43CD80;
}
#paitocolor .color.Lime {
  background: #01FF70;
}
#paitocolor .color.Yellow {
  background: #FFDC00;
}
#paitocolor .color.Orange {
  background: #FF851B;
}
#paitocolor .color.Red {
  background: #FF4136;
}
#paitocolor .color.Pink {
  background: #F012BE;
}
#paitocolor .color.Purple {
  background: #A23BEC;
}
#paitocolor .color.Silver {
  background: #a9a9a9;
}
#paitocolor .selected {
    box-shadow: inset 0px 0px 0px 2px #000;
    border-color:#007bff;
}

#drawing-table th {
    text-transform: uppercase;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    border: 1px solid gray;
  background: black ;
  color:white;
}
#drawing-table th.dpaito {
  opacity:0.7;
}
#clear {
    margin-top:0; margin-left: 3px; height:27px; line-height:1;
  border-radius:0; background:#363636; font-size:12px;
}

#floatmenu {
    padding:10px 5px; z-index: 999999;
}
#floatmenu.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    max-width: 900px;
    margin:auto;
    z-index: 999999999;
    background: #000;
  border-bottom: 2px solid #adadad;
  box-shadow: 0px 10px 14px -5px rgba(0,0,0,0.64);
-webkit-box-shadow: 0px 10px 14px -5px rgba(0,0,0,0.64);
-moz-box-shadow: 0px 10px 14px -5px rgba(0,0,0,0.64);
}

body.hasftop #floatmenu.fixed {
    top:90px;
}
.rek { background-color:#eb1678; color: white !important; } 
.rke { background-color:#02b3c5; color: white !important; }
.rko { background-color:#20c502; color: white !important; } 
.ras { background-color:#db3908; color: white !important; }


.network-list { list-style-type: none; padding: 0; }
.network-list li { margin-bottom: 5px; }


@media (max-width: 576px) {
#paitocolor {
  display: flex;
  justify-content: space-between;
}
    #drawing-table td ,#drawing-table th { font-size: 10px; }
 
}
