body, table, td, tr, th, thead, tbody, a, div, form, input, textarea {
  font-family: 'Quicksand', sans-serif;
}

.main {
  position: relative;
  max-width: 410px;
  margin: auto;
}

.topnavi {
  position: relative;
  max-width: 400px;
  margin: auto;
  background-color: #fff;
  padding:5px 5px 0 5px;
}

.select {
  padding: 2px 10px 2px 10px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  display: inline-block;
  cursor: pointer;
  -webkit-appearance: none !important;
  border: 1px solid #ccc;
  background-color: #f2f2f2;
  width: auto;
  font-size: 14px;
  font-weight: bold;
  outline: none;
}
body {
  background-color: #cccccc;
  margin: 0;
  padding: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  color: #666;
  background-color: #fff;
  border: 0;
}

td {
  padding: 5px 8px 5px 8px;
  vertical-align: middle;
}
tr {
  border-bottom:1px solid #e6e6e6;
}
a, a:hover, a:visited, a:active, a:checked, a:default {
  text-decoration:none;
  cursor: pointer;
}


.input {
  padding: 5px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  width: 90%;
  font-size: 16px;
  font-weight: bold;
  outline: none;
  margin-right: 5px;
}

.input:focus {
  background-color: #ffffe6;
}

.selectnpp {
  padding:5px 5px 5px 10px;
  text-align:left;
  cursor: pointer;
  border-bottom:1px solid #ededed;
}
.selectnpp:hover {
  background-color:#e6ffe6;
  color: #333;
}

.searchresult {
  width:100%;
  background-color: #fff;
  max-width: 420px;
  position: absolute;
  z-index:9999;
  margin:1px 0 0 0;
  display:none;
  right:0px;
  height:200px;
  overflow:auto;
}
.tablefixhead thead th {
  position: sticky;
  top: 105px;
  z-index:1;
  background-color: #e6ffe6;
}

.smallheadline {
  font-size: 16px;
}

.mediumheadline {
  font-size: 18px;
  font-weight: bold;
}
.bigheadline {
  font-size: 20px;
  font-weight: bold;
}

.content {
  font-size: 14px;
}

.subcontent {
  font-size: 13px;
}

.largebutton {
  padding: 5px 10px 5px 10px;
  font-size: 14px;
  font-weight: bold;
  border: 0;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  display: inline-block;
  cursor: pointer;
  -webkit-appearance: none !important;
}

.smallbutton {
  padding: 2px 8px 2px 8px;
  color: white;
  font-weight: bold;
  font-size: 13px;
  border: 0;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  -webkit-appearance: none !important;
}

.halfbutton{
  margin:0;
  padding: 5px 10px 5px 10px;
  font-size: 14px;
  font-weight: bold;
  border: 0;
  border-radius: 0;
  border-top-right-radius: 5px;
  -moz-border-top-right-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -khtml-border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  -moz-border-top-left-radius: 5px;
  -webkit-border-top-left-radius: 5px;
  -khtml-border-top-left-radius: 5px;
  display: inline-block;
  cursor: pointer;
  -webkit-appearance: none !important;
}

.roundbutton {
  width: 22px;
  height: 22px;
  padding: auto;
  color: white;
  font-weight: bold;
  font-size: 15px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  -khtml-border-radius: 50%;
  text-decoration: none;
  display: inline-block;
  border: 0px;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none !important;
}

.center {
  text-align: center;
}
.cursor {
  cursor: pointer;
}
.cursor:hover {
  background-color: #f2f2f2;
}
.tright {
  text-align: right;
}
.tleft {
  text-align: left;
}
.pointer {
  cursor: pointer;
}
.tcenter {
  text-align: center;
}
.tright {
  text-align: right;
}
.tleft {
  text-align: left;
}

.bgwhite {
  background-color: #fff;
}
.bggreen {
  background-color: #2ebd85;
  background-color: rgb(46, 189, 133);
  background-color: hsl(157, 61%, 46%);
  color: white;
}
.bgred {
  background-color: #f7556a;
  background-color: rgb(247, 85, 106);
  background-color: hsl(352, 91%, 65%);
  color: white;
}
.bggray{
  background-color: #e6e6e6;
  color: #333;
}
.bgdarkgray {
  background-color: #999999;
  color: white;
}
.bglightgray {
  background-color:#f2f2f2;
  color: #333;
}
.bgpurple {
  background-color:#ff66d9;
  color: #fff;
}
.bgblue {
  background-color:#0047b3;
  color: #fff;
}
.bgorange {
  background-color: #ff8533;
}
.bglightgreen {
  background-color:#e6ffe6;
  color: #333;
}
.bglightred {
  background-color:#ffcccc;
  color: #333;
}
.bglightyellow {
  background-color: #FFF9E5;
  color: #333;
}
.bglightblue {
  background-color: #e6f2ff;
  color: #333;
}
.green {
  color: #2ebd85;
}
.red {
  color: #f6465d;
}
.purple {
  background-color: #e600ac;
}
.darkgrey {
  color: #333;
}
.lightgrey {
  color: #666666;
}
.black {
  color: #000;
}
.white {
  color: #fff;
}
.blue {
  color: #0047b3;
}
.yellow {
  color: yellow;
}

.boldtext {
  font-weight: bold;
}

.disable_bg {
  background-color:#fff;
  opacity: 0.7;
  -moz-opacity: 0.7;
  filter: alpha(opacity=70);
  position: absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  z-index:999;
}

.notification {
  position:absolute;
  top:20%;
  left:50%;
  width:300px;
  margin-left:-150px;
  z-index:9999;
  padding: 20px 0 20px 0;
}
.progress{
    position: relative;
    height: 5px;
    width: 60px;
    border: 1px solid #cdcdcd;
    border-radius: 15px;
}
.progress .color{
    position: absolute;
    background-color: #cc99ff;
    width: 0px;
    height: 6px;
    border-radius: 15px;
    animation: progres 4s infinite linear;
}
@keyframes progres{
    0%{
      width: 0%;
    }
    25%{
        width: 50%;
    }
    50%{
        width: 75%;
    }
    75%{
        width: 85%;
    }
    100%{
        width: 100%;
    }
};