html {
height: 100%;
}

body {
color:  #0b7bff ;
font-family: 'Kanit', sans-serif;	
background-repeat: no-repeat;
background-attachment: fixed;
min-height: 100%;
background-color: #ffffff;
}

.gradtext {
  background: -webkit-linear-gradient( #00b0ffff, #ce88ffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tabhov:hover {
    background-color: rgba(0,0,0,.075);
}

.calentask {
  font-size: 60%;
}

.halfscr {	
margin: 5px; 
padding: 5px;
margin-left: 25%;
margin-right: 25%;
}

.glowform {	
border-radius: 25px;
margin: 5px; 
padding: 5px;
margin-left: 30%;
margin-right: 30%;
background-color: #fcfcfc;
background-image: linear-gradient(62deg, #e9ecf1 0%, #e9ecf1100%);
box-shadow: -4px -4px 10px 0px #fafafa,  4px 4px 10px 0px #c8c8c8;
}

.glowform:hover {	
background-color: #ffffff;
box-shadow: -4px -4px 10px 0px #ffff85,  4px 4px 10px 0px #ffff85;
}

.glowtext {	
border-radius: 25px;
margin: 5px; 
padding: 5px;
margin-left: 30%;
margin-right: 30%;
background-color: #fcfcfc;
background-image: linear-gradient(62deg, #e9ecf1 0%, #e9ecf1100%);
box-shadow: -4px -4px 10px 0px #fafafa,  4px 4px 10px 0px #c8c8c8;
}

.headtext {	
margin-left: 30%;
margin-right: 30%;
}

.glowbutton {
border-radius: 25px;
margin: 5px; 
padding: 5px;
background-color: #fcfcfc;
background-image: linear-gradient(62deg, #e9ecf1 0%, #e9ecf1100%);
box-shadow: -4px -4px 10px 0px #fafafa,  4px 4px 10px 0px #c8c8c8;
}

.glowbutton:hover {
background-color: #ffffff;
box-shadow: -4px -4px 10px 0px #ffff85,  4px 4px 10px 0px #ffff85;
}

.backheader {
z-index: 100;	
position: fixed;
left: 0;
top: 0;
width: 100%;
text-align: center;
background-color: #fcfcfc;
background-image: linear-gradient(62deg, #e9ecf1 0%, #e9ecf1100%);
box-shadow: -4px -4px 10px 0px #fafafa,  4px 4px 10px 0px #c8c8c8;
}

.notification {
  text-decoration: none;
  position: relative;
  display: inline-block;
  border-radius: 2px;
}

.notification .badge {
  position: absolute;
  top: -5px;
  right: -5px;
  padding: 5px 5px;
  border-radius: 50%;
  background-color: red;
  color: white;
}

.product-price {
font-size: 1.2em;
font-weight: bold;
text-align: right;
color: red;
}

.product-priceleft {
font-size: 1.2em;
font-weight: bold;
text-align: left;
color: red;
}

.product-grade {
text-align: right;
}

.product-title {
font-size: 1.2em;
font-weight: bold;
text-align: left;
color: red;
}

.pressbutton {
border-radius: 25px;
margin: 5px; 
padding: 5px;
background-color: #fcfcfc;
background-image: linear-gradient(62deg, #e9ecf1 0%, #e9ecf1100%);
box-shadow: -4px -4px 10px 0px #fafafa,  4px 4px 10px 0px #c8c8c8;
}

.pressbutton:hover {
background-color: #ffffff;
box-shadow: -4px -4px 10px 0px #ffff85,  4px 4px 10px 0px #ffff85;
}

.presstable:hover {
border: 0px;
background-color: #ffffcc;
box-shadow: 0px -10px 10px -10px #fafafa, 0px 10px 10px -10px #fafafa;
}

.scrolling-wrapper-flexbox {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto; 
}

.roundbutton {
border-radius: 50%;
margin: 5px; 
padding: 5px;
background-color: #fcfcfc;
background-image: linear-gradient(62deg, #e9ecf1 0%, #e9ecf1100%);
box-shadow: -4px -4px 10px 0px #fafafa,  4px 4px 10px 0px #c8c8c8;
}

.roundbutton:hover {
background-color: #ffffff;
box-shadow: -4px -4px 10px 0px #ffff85,  4px 4px 10px 0px #ffff85;
}

.card {
  position:relative;
}
  
.card .card-badge {
  border-radius: 50%;
  position:absolute;
  min-width: 35px;
  min-height: 35px;
  text-align: center;
  vertical-align: middle;
  top:5px;
  right:5px;
  padding:5px;
  background:red;
  color:white;
}

@media only screen and (max-width: 770px) {	

.glowtext {
margin-left: 5%;
margin-right: 5%;
}

.headtext {
margin-left: 5%;
margin-right: 5%;
}

.glowform {
margin-left: 5%;
margin-right: 5%;
}

.halfscr {	
margin-left: 0%;
margin-right: 0%;
}

}

@media only screen and (max-width: 480px) {	

.calentask {
   display: none;
}

}

.circle {   
    height:40px;
	width:40px;
	padding:5px;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
}