/*
    DEMO STYLE
*/
:root {
  --color-1: #3a4660;  /*bg*/
  --color-1-light: #616B7F;  /*bg dark*/
  --color-2: #8AA899;  
  --color-3: #f9f8fd;  /*whiteText*/
  --color-3-dark: #B49D88;  
  --color-4: #FFFFFF;  
}
@import "https://fonts.googleapis.com/css2?family=B612:ital,wght@0,400;0,700;1,400;1,700&display=swap";
@import "https://fonts.googleapis.com/css2?family=Fira+Mono&display=swap";

html, body {
  height: 100%;
  margin: 0;   
  font-family: 'B612', sans-serif;
  font-size: 16px;
  font-smooth: auto;
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-1);
  box-sizing: border-box;
}
body {
    font-family: 'B612', sans-serif;
    background: #fafafa;
    color: var(--color-1);
}
body.modal-open {
    overflow: visible;
}

.bg {
background:  rgb(58,70,96);
background: linear-gradient(180deg, rgba(58,70,96,1) 0%, rgba(156,163,176,1) 52%, rgba(254,255,255,1) 100%);
height: 100%; 
}
.nowLogo
{
  color: var(--color-3);
  font-size: 84px;
  font-weight: 700;
  -webkit-text-stroke: 1px var(--color-1);
}
.tip
{
  color : var(--color-1-light);
  font-size: 18px;
}
/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

#content {
    width: 100%;
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
}

.footer {
   color:var(--color-1);
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   text-align: center;
}

.token-form-control {
  padding: 0px 10px 0 20px;
  margin-top: 10px;
  color: var(--color-1);
    border: 3px solid var(--color-1);
    -webkit-box-shadow: none;
    box-shadow: none;
    min-height:60px;
    height: auto;
}
.token-form-control :focus {
        -webkit-box-shadow: none;
        box-shadow: none;
        border-color: var(--color-2);

    }

#tokenbtn_right
{ 
  border:0;
  padding: 0px 10px;
  margin-top: 10px;
  color: var(--color-3);
  background:var(--color-1-light);
  border: 3px solid var(--color-1);
  border-left: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  min-height:100px;
  min-width:120px;
  height: auto;
  border-radius: 0 50px 50px 0 !important;
}

#tokenbtn_left
{ 
  border:0;
  padding: 0px 10px;
  margin-top: 10px;
  color: var(--color-3);
  background:var(--color-1-light);
  border: 3px solid var(--color-1);
  border-right: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  min-height:100px;
  min-width:120px;
  height: auto;
  border-radius: 50px 0 0 50px !important;
}