body, html{ height:100%; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
body {
  margin: 0;
  /* background-image: linear-gradient(180deg, var(--background-dark), var(--background-light)); */
  background-color: var(--main-background);
  font-family: var(--main-font);
  font-weight: var(--main-fontweight);
  color: var(--text-color);
}

div{ 
  margin:0; 
  padding:0; 
}

a{ 
  text-decoration: none; 
  color:inherit;
}

label{
  /* cursor:pointer; */
}

footer{
  text-align:center;  
  width:100%;  
  height:var(--footer-height);
  position: absolute;
  bottom:0;
}

footer a{
  color:var(--footer-fontcolor);
  letter-spacing: 1px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;    
  
}

footer a:hover{
  color:var(--footer-fontcolor-hover);  
}

div.content_container{
  position: relative;  
}

div#main_container{
  min-height: 100%;  
  position:relative;
  width:var(--ui-width);
  margin:auto;
}

div#body_container{
  padding-bottom:calc(var(--footer-height)*1.25);
  position:relative;
}


div#content_container{
  font-size:0.9em;
}

.absolute{
  position:absolute;
}

.centered{
  text-align: center;
}

.inline-block{
  display:inline-block;
}

.vertical-top{
  vertical-align: top;;
}

.relative{
  position: relative;
}

.error_msg{
  color:var(--error-color);
}

.hidden_content{
  position: absolute;
  visibility: hidden;
  left:5000%;
}

.masked{
  font-family:var(--pin-font);
}

.pin_input{
  width:var(--pin-size);
  height:var(--pin-size);
  text-align:center;
  font-size:var(--pin-fontsize);
}

.mobile_display{
  display:none !important;
}

@media(max-width:768px){
  .mobile_display{
    display:block !important;

  }
  .mobile_hide{
    display:none !important;
  }
  .pin_input{
    width:var(--pin-size-mobile);
    height:var(--pin-size-mobile);
    font-size:var(--pin-fontsize-mobile);
  }
}

.right{
  right:0;
}

.total_center{  
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

.v_center{  
  top:50%;
  transform:translateY(-50%);
}

::-webkit-scrollbar{
  width:var(--scrollbar-width);
  background-color:var(--scrollbar-background);
}

::-webkit-scrollbar-thumb{
  background-color:var(--scrollbar-thumbcolor);
  border-radius:10px;
  border:1px solid #333333;
  -webkit-box-shadow:0 0 10px 1px 006600 inset;
}

::-webkit-scrollbar-thumb:hover{
  background-color:var(--scrollbar-hovercolor);
  border:1px solid #333333;
}

::-webkit-scrollbar-track{
  border:1px #333 solid;
  border-radius:10px;
  -webkit-box-shadow:0 0 6px gray inset;
}


@media(max-width:768px){
  ::-webkit-scrollbar{
    display:none;
  }
  
}