/* theme styles - (c) Copyright Tornbase by Nik Ahmad 2019 */

._rotate-180{transform:rotate(180deg)}

@keyframes __spin{
0% {transform:rotate(0deg)}
100% {transform:rotate(359deg)}
}
._spin{animation:__spin 1s infinite linear;}

._caps{text-transform:capitalize}

._no-focus:focus{outline:none}

._grid-box ._row{margin:0 2%}
._grid-box ._col{padding:0 2%}

/* customs */

input:-webkit-autofill{-webkit-transition-delay:9999s}

.footer {margin:0 10px}

.keyDialog button {border-radius:4px}

.home-button{position:relative}

.homeButton{
box-shadow: 1px 2px #fff inset, -1px -2px #ccc inset;
font-weight:bold;
text-transform:uppercase;
border-radius: 0 0 8px 8px;
position:absolute;
top:0;
left:10px;
}

.homeButton:active{box-shadow:0 0 3px 2px #6666 inset}

.homeButton .torn {
display:block;
font-size:20px;
}

.top-menu .torn::selection,
.top-menu button i::selection{background:none;color:inherit}

.menu-bar{
background: rgb(47,46,43);
background: linear-gradient(145deg, rgba(60,60,60,1) 10%, rgba(70,70,70,1) 50%, rgba(60,60,60,1) 90%);
box-shadow:0 1px #eee,0 0 10px #999;
color:#bbb;
padding-left:100px;
text-shadow:1px 1px 1px #000;
}
.menu-bar button{
color:inherit;
cursor:help;
}
.menu-bar button.i{
background:none;
border:none;
box-shadow:none;
height:32px;
width:32px;
}

.menu-bar button.i i{
font-size:24px;
left:0;
line-height:32px;
text-shadow:1px 1px #000;
top:0;
width:32px;
}

.menu-buttons{margin:10px 0}

.menu-buttons button {cursor:help;margin:0 5px}

.menu-buttons button.i i{
font-size:24px;
left:0;
line-height:30px;
top:0;
width:30px;
}

.menu-buttons button.i{
background:none;
border:none;
box-shadow:none;
height:30px;
width:30px;
}

.t-noties {
margin:10px auto;
max-width:250px;
}

.t-noties button{
background: none;
border: none;
box-shadow: none;
cursor:help;
height:30px;
text-align:right;
width:25%;
min-width: 60px;
}

.t-noties button.ir i{
font-size:24px;
top:3px;
}

/*  */

.t-card{
background:#fff;
border-radius:4px;
box-shadow:0 0 0 1px #bbb9,0 0 10px #3333;
padding:1em;
}

.menu-page,
.keyDialog{
margin:3% auto;
}
.menu-page,
.keyDialog{
margin:10vh auto;
padding:2em 50px;
width:225px;
}

.page-key-password:-webkit-autofill,
.page-key-password{
background: transparent;
border: 0;
border-bottom: 1px solid #888;
box-shadow: none;
margin-right: 10px;
}
.page-key-password:-webkit-autofill:focus,
.page-key-password:focus{
border-bottom-color:#1976d2;
caret-color:#1976d2;
color:#1976d2;
outline:none;
-webkit-text-fill-color:#1976d2;
}

button.ir,
button.il,
button.i{
min-height:25px;
padding-left:16px;
position:relative;
vertical-align:top;
}
button.ir{
padding-left:8px;
padding-right:16px;
}
button.ir i,
button.il i,
button.i i{
font-size:22px;
left:2px;
line-height:100%;
position:absolute;
top:1px;
}
button.ir i{left:auto;right:1px}
button.il{padding-left:32px}
button.ir{padding-right:32px}
button.il i{left:5px}
button.ir i{left:auto;right:5px}

.menu-page{text-align:center}

/*  */

.t-user-profile {min-height:240px}

.t-status{position:relative}
.t-status-message{margin-left:30px}
.t-status .t-status-icon {font-size:24px;position:absolute}

.-label{display:inline-block}
.-value{display:inline-block;font-weight:bold;text-align:right}

.t-bars{border-bottom:1px solid transparent}
.t-bar{margin:1em 0}

.t-bar .-label{width:30%}
.t-bar .-value{width:70%}

.t-bar .-bar{
background:#ccc;
height:8px;
margin:2px 0;
}

.t-bar .-bar-value{
background:#aaa;
height:100%;
transition:1s width;
width:0;
}

.t-bar-life .-bar{background:#cdf}
.t-bar-life .-bar-value{background:#49d}

.t-bar-energy .-bar{background:#bdb}
.t-bar-energy .-bar-value{background:#5b2}

.t-bar-nerve .-bar{background:#ecc}
.t-bar-nerve .-bar-value{background:#d44}

.t-bar-happy .-bar{background:#ed9}
.t-bar-happy .-bar-value{background:#db3}

.t-user-moneys{min-width:210px;max-width:240px}
.t-user-moneys .-item{margin:0.2em 0}
.t-user-moneys .-label{width:35%}
.t-user-moneys .-value{width:65%}

.t-user-moneys .-item:hover,
.menu-buttons button:hover,
.t-noties button:hover{
background:#ddd;
border-radius:4px;
}

.menu-bar button:hover{
background:#555;
}

.star {position:relative}
.star i{cursor:help;color:#e91;font-size:1.5em;left:0.25em;position:absolute;top:-0.25em}

/*  */

._grid-box{margin:0 auto;max-width:320px}
.menu-buttons{text-align:center}
.t-bars{margin:0}

@media screen and (min-width:600px){
  ._grid-box{margin:0;max-width:none;width:100%}
  .menu-buttons{text-align:initial}
  .t-bars{margin:0 auto;max-width:200px}
}

/* */