html, body {
      min-height: 100%;
      line-height: 1.2;
}
body {
      outline: none;
      font-size: 16px;
      color: black;
      font-family: Roboto, Arial, sans-serif;
      background-color:#f3f6f8;
      margin:0px;
}

*, ::after, ::before {
      box-sizing: border-box;
      border:none;
}
.col05 {width: 5%;}
.col08 {width: 8%;}
.col10 {width: 10%;}
.col15 {width: 15%;}
.col20 {width: 20%;}
.col25 {width: 25%;}
.col30 {width: 30%;}
.col35 {width: 35%;}
.col40 {width: 40%;}
.col45 {width: 45%;}
.col50 {width: 50%;}
.col55 {width: 55%;}
.col60 {width: 60%;}
.col65 {width: 65%;}
.col70 {width: 70%;}
.col75 {width: 75%;}
.col80 {width: 80%;}
.col85 {width: 85%;}
.col90 {width: 90%;}
.col95 {width: 95%;}

input, select, textarea {
      background-color:#f3f6f8;
      border:none;
      height: 30px;
}
input[type='checkbox'] {
      width:15px;
      height:15px;
      background:white;
      border:1px solid #bbb;
      margin-bottom: 5px;
}
input[type='checkbox']:checked {
      background: #401bc6;
}
input:placeholder-shown {
      font-style: italic;
      color:#666;
}
select {
      background-color:#f3f6f8;
      height:25px;
      width: fit-content;
      min-width: 100px;
      max-width: 300px;
      margin-left:10px;
}
button {
      cursor: pointer;
}
section {
      display:contents;
}
tfoot {
    background-color:white;
    position: sticky;
    bottom:0px;
}
hr {
      border: 1px solid #eee;
      margin:10px;
  }
.addbutton {
      width: fit-content;
      height: fit-content;
      border-radius: 5px;
      border: none;
      font-weight: bold;
      color:white;
      padding: 7px 14px;
      background-color: #00a3ff;
      cursor: pointer;
      margin:2px;
}
.contentbox {
    margin-left: 10px;
    box-sizing: border-box;
    white-space: nowrap;
    border-radius: 5px;
    background-color: white;
    display: inline-block;
    vertical-align: top;
}
.button-bar {
      position: relative;
      margin-left:10px;
      margin-right:10px;
      background-color:white;
      padding: 10px 20px;
      overflow:hidden;
      height:55px;
      margin-top:10px;
      border-radius:5px;
}
.button-div {
      display:inline-block;
      margin-bottom:20px;
}
.button-div-right {
      margin-bottom:20px;
      float:right;
}
.editbtn {
      width:18px;
      height:18px;
      cursor:pointer;
}
.forgotpwd {
      float:left;
      cursor:pointer;
      padding:5px;
      color:#3bb7ff;
}
/* match */
.grid {
    font-size: 0;
    margin:20px;
    position:relative;
    top:9px;
    display: inline-block;
}
.gridrow {
    margin-left: 0px;
}
.gridcell {
    width:32px;
    height:32px;
    border: 1px solid gray;
    display:inline-block;
    margin: 0;
    padding: 0;
}
.dragger {
    width:60px;
    height:60px;
    position: absolute;
    border: 2px solid black;
    background-color: antiquewhite;
    left: 880px;
    top: 0px;
    cursor:move;
}
.matchDragSrc {
    width:20px;
    height:20px;
    position: relative;
    border: 2px solid black;
    background-color: antiquewhite;
    display:inline-block;
    margin: 0 0 -7px 10px;
    cursor: pointer;
}
.trash {
      width: 50px;
      user-select: none;
      right: 25px;
      position: absolute;
      top: 10px;
}
.matchLayerBtn {
    padding:5px;
    background-color: burlywood;
    color:white;
    border-radius: 5px;
    margin: 10px;
    width: 75px;
    height: 30px;
    font-size: 16px;
    border: 1px solid gray;
}
.matchLayerBtn .budge {
  position: relative;
  top: -12px;
  right: -6px;
  width: 10px;
  height: 10px;
  background-color: white;
  border-radius: 50%;
  border: 1px solid black;
  display: inline-block;
}
.matchLayer {
    display:inline-block;
    position:absolute;
    left:32px;
    top:31px;
}
#matchLayer0 .dragger {
    background-color: red;
}
#matchLayer1 .dragger {
    background-color: blue;
}
#matchLayer2 .dragger {
    background-color: green;
}
#matchLayer3 .dragger {
    background-color: gold;
}
#matchLayer4 .dragger {
    background-color: purple;
}
#matchLayer5 .dragger {
    background-color: orange;
}
#matchLayer6 .dragger {
    background-color: brown;
}
#matchLayer7 .dragger {
    background-color: cornflowerblue
}
#matchLayer8 .dragger {
    background-color: pink;
}
#matchLayer9 .dragger {
    background-color: teal;
}
#matchLayerBtn0 {
    background-color: red;
}
#matchLayerBtn1 {
    background-color: blue;
}
#matchLayerBtn2 {
    background-color: green;
}
#matchLayerBtn3 {
    background-color: gold;
}
#matchLayerBtn4 {
    background-color: purple;
}
#matchLayerBtn5 {
    background-color: orange;
}
#matchLayerBtn6 {
    background-color: brown;
}
#matchLayerBtn7 {
    background-color: cornflowerblue
}
#matchLayerBtn8 {
    background-color: pink;
}
#matchLayerBtn9 {
    background-color: teal;
}
/* tangram */
.colorbox {
    width:25px;
    height:25px;
    margin: 5px;
    padding: 0;
}
.gridbox {
    width:40px;
    height:40px;
    border: 1px solid gray;
    display:inline-block;
    margin: 1px;
    padding: 0;
}

/* sorting */
.sorting-tile {
      position: relative;
      height:60px;
}
.sorting-column {
      width:75px;
      display:inline-block;
      vertical-align:top;
}
/* pipes */
.pipebox {
    width: 40px;
    height: 40px;
    margin: 5px;
    padding: 0;
}
.pipeimg {
    width: 40px;
    height: 40px;
}


.login-image {
      height:60px;
      width:60px;
      cursor:pointer;
}
.modalbox {
      position: absolute;
      top: 50px;
      left: 20px;
      border: 1px solid #cccccc;
      z-index: 100;
      background-color: white;
      border-radius: 5px;
      box-shadow: 2px 2px 3px rgba(0,0,0,0.1);
      padding: 65px 50px 35px 50px;
      display: none;
      width:max-content;
      height:fit-content;
      font-size:14px;
}
.modal-button {
      width: fit-content;
      height: fit-content;
      border-radius: 5px;
      border: none;
      color:white;
      padding: 4px 20px;
      background-color: #00a3ff;
      cursor: pointer;
      min-width: 85px;
      margin:1px;
}
.modal-button:focus {
      background-color: #436843;
}
.modalcloser{
      cursor: pointer;
      display: block;
      position: absolute;
      top: 5px;
      right: 10px;
}
.modalcloser span{
      width:18px;
      height:18px;
      display:inline-block;
      background:url(../images/close.png) no-repeat 0px 0px;
      background-size: 20px;
}
.modaldragger {
      width: 100%;
      height: 30px;
      top: 0px;
      position: absolute;
      left: 0px;
      cursor: grab;
      font-weight:bold;
      font-size:18px;
      padding-left:15px;
      padding-top:4px;
      font-style: italic;
      border-radius: 5px 5px 0px 0px;
      background-color: #00a3ff;
      color: white
}
.modaltext {
      display: inline-block;
      width: 250px;
      height:25px;
      vertical-align: middle;
}
.modal-row {
      display: block;
      margin-top:5px;
      margin-bottom:5px;
      width:100%;
      clear:left;
}
.modal-col {
      display: block;
      margin-top: 5px;
      margin-bottom: 5px;
      float: left;
}
.modal-row-center {
      text-align:center;
      display: block;
      margin-top:5px;
      margin-bottom:5px;
      width:100%;
      clear:left;
}
.modal-label {
      display: block;
      text-align: right;
      font-weight: bold;
      padding-right: 5px;
      position: relative;
      height:25px;
      margin-top:3px;
      margin-bottom:3px;
      padding-top:5px;
}
.modal-input {
      display: block;
      text-align: left;
      padding-left: 5px;
      position: relative;
      height:25px;
      margin-top:3px;
      margin-bottom:3px;
}
.header{
      position: relative;
      width: 100%;
      top: 0;
      height:65px;
      background-color:white;
      z-index:10;
      margin-bottom:10px;
}
.image-holder {
      max-width:50%;
      padding-left: 25%;
      padding-top: 10px;
      width:200px;
}
.item {
      position: relative;
      margin: 10px 0;
}
.item span {
      color: red;
}
.item i, input[type="date"]::-webkit-calendar-picker-indicator {
      position: absolute;
      font-size: 20px;
      color: #cc7a00;
}
.item i {
      right: 1%;
      top: 30px;
      z-index: 1;
}
.logo{
      cursor:pointer;
      left:10px;
      position:absolute;
      top:5px;
}
.menubtn {
      font-weight: bold;
      display:inline-block;
      cursor: pointer;
}
.message {
      color: red;
      text-align: center;
      font-weight: bold;
      width: 100%;
      height:fit-content;
      font-size: 18px;
}
.progress {
      width: 0px;
      height: 20px;
      background-color: #401bc6;
}
.progressholder {
      width: 302px;
      height: 22px;
      border: 1px dotted #999999;
}
.search-label {
      position:relative;
      display:inline-block;
      font-weight:bold;
      margin-left:20px;
}
.search-input {
      width:213px;
      height:28px;
      float:right;
      position:relative;
      top:5px;
}
.search-button {
      float:right;
      height:18px;
      position:relative;
      left:211px;
      cursor:pointer;
      top:10px;
}
.search-check {
      position: relative;
      top: 2px;
}
.title {
      font-weight: bold;
      margin-top: -28px;
      margin-bottom: 10px;
      border-bottom: 1px solid #00a3ff;
      color: #401bc6;
      padding-bottom: 4px;
      width:100%;
      cursor:grab;
      margin-right:6px;
}
.toplabel {
      display: inline-block;
      clear: left;
      width: 140px;
      text-align: right;
      font-weight: bold;
      padding-right: 5px;
      position: relative;
      vertical-align: top;
      padding-top: 4px;
}
.topmenu {
      padding-top:22px;
      right:20px;
      position:relative;
      float:right;
}
#content-area {
      position: relative;
      margin-top:0px;
}
.pagination {
      text-align:center;
      margin-bottom:0px;
      margin-left:10px;
      margin-right:10px;
      height:30px;
      background-color:white;
      margin-top:10px;
      border-radius:5px;
      display:block;
}
.thead {
      font-weight:bold;
      overflow:hidden;
      white-space: nowrap;
      box-sizing: border-box;
      float: left;
      padding: 3px;
      margin-left:5px;
      margin-right:5px;
      font-size:16px;
}
.thclick {
      font-weight:bold;
      overflow:hidden;
      white-space: nowrap;
      box-sizing: border-box;
      float: left;
      padding: 3px;
      margin-left:5px;
      margin-right:5px;
      cursor: pointer;
      font-size:16px;
}
.tcell {
    overflow:hidden;
    white-space: nowrap;
    box-sizing: border-box;
    float:left;
    padding: 3px;
    margin-left:5px;
    margin-right:5px;
    font-size:16px;
    min-height: 25px;
}
.listheader {
    background-color:white;
    box-sizing: border-box;
    white-space:nowrap;
    overflow:hidden;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    clear:left;
    border-radius:5px 5px 0px 0px;
}
.listrow {
      position:relative;
      box-sizing: border-box;
      white-space:nowrap;
      clear:left;
      width: 100%;
      height:31px;
      font-size:0;
      margin-top:5px;
      border: 1px solid burlywood;
      border-radius:5px;
      overflow: hidden;
  }
.listsubrow {
      position:relative;
      box-sizing: border-box;
      white-space:nowrap;
      float: left;
}
.listbody {
    background-color:white;
    position:relative;
    box-sizing: border-box;
    white-space:nowrap;
    padding-left:10px;
    padding-right:10px;
    overflow-x:clip;
}
.listbox {
      margin-top:10px;
      margin-left:10px;
      margin-right:10px;
      position:relative;
      box-sizing: border-box;
      white-space:nowrap;
      border-radius:5px;
}
.listscroll {
      position:relative;
      overflow-y:scroll;
      overflow-x:hidden;
      box-sizing: border-box;
      white-space:nowrap;
      height: calc(100vh - 225px);
      background-color:white;
      border-radius: 5px;
}
.link {
      color: blue;
      cursor: pointer;
}
.logoimg {
      height:60px;
      width:60px;
      cursor:pointer;
}
.ui-datepicker-trigger {
      background-color: transparent;
}

@media only screen and (max-width: 1200px) {
      body {
            background-color: #f3f6f8;
            font-size: 14px;
      }
      .tcell, .thead, .thclick {
            font-size: 14px;
            height:27px;
      }
      .listrow {
            height:28px;
      }
      .x1col00 {display:none;}
      .x1col05 {width: 5%;}
      .x1col10 {width: 10%;}
      .x1col15 {width: 15%;}
      .x1col20 {width: 20%;}
      .x1col25 {width: 25%;}
      .x1col30 {width: 30%;}
      .x1col35 {width: 35%;}
      .x1col40 {width: 40%;}
      .x1col45 {width: 45%;}
      .x1col50 {width: 50%;}
      .x1col55 {width: 55%;}
      .x1col60 {width: 60%;}
      .x1col65 {width: 65%;}
      .x1col70 {width: 70%;}
      .x1col75 {width: 75%;}
      .x1col80 {width: 80%;}
      .x1col85 {width: 85%;}
      .x1col90 {width: 90%;}
      .x1col95 {width: 95%;}
      .statq { min-width: 350px; }
}

@media only screen and (max-width: 800px) {
      body .thclick .tcell .thead {
        background-color: #f3f6f8;
        font-size: 12px;
      }
      .tcell, .thead, .thclick {
            font-size: 12px;
            height:24px;
      }
      .x2col00 {display:none;}
      .x2col05 {width: 5%;}
      .x2col10 {width: 10%;}
      .x2col15 {width: 15%;}
      .x2col20 {width: 20%;}
      .x2col25 {width: 25%;}
      .x2col30 {width: 30%;}
      .x2col35 {width: 35%;}
      .x2col40 {width: 40%;}
      .x2col45 {width: 45%;}
      .x2col50 {width: 50%;}
      .x2col55 {width: 55%;}
      .x2col60 {width: 60%;}
      .x2col65 {width: 65%;}
      .x2col70 {width: 70%;}
      .x2col75 {width: 75%;}
      .x2col80 {width: 80%;}
      .x2col85 {width: 85%;}
      .x2col90 {width: 90%;}
      .x2col95 {width: 95%;}
      .logoimg {
            height:30px;
            width:30px;
            position:relative;
      }
      .logo {
            top:2px;
      }
      .header {
            height:34px;
            margin-bottom:5px;
      }
      .topmenu {
            padding-top:7px;
      }
      .addbutton, .modal-button {
            font-size:10px;
            padding: 3px 8px;
            min-width:50px;
      }
      .button-bar {
            margin: 0 5px 5px 5px;
            padding: 3px 6px;
            height:30px;
      }
      .button-div-right {
            position:absolute;
            top:4px;
            right:10px;
      }
      input {
            height: 20px;
      }
      .search-input {
            top:0;
            height:22px;
            width:100px;
      }
      .search-button {
            left:95px;
            top:3px;
            height:14px;
      }
      .listbox {
            margin: 0 5px 5px 5px;
      }
      .listheader {
            padding: 0 5px 5px 5px;
      }
      .listrow {
            height:25px;
      }
      .listbody {
            padding: 0 5px 0 5px;
      }
      .modalbox {
            padding: 25px 10px 0px 10px;
      }
      .modaldragger {
            height:20px;
            padding-top: 1px;
            font-size: 15px;
      }
      .modalcloser {
            top: 1px;
            right: 5px;
      }
      .toplabel {
            width: 80px;
      }
      li {
            padding:2px;
      }
      select {
            max-width: 150px;
      }
      .editbtn {
            width:15px;
            height:15px;
      }
      .modaltext {
            width: 150px;
      }
}