/* abvos 0.0.9-6 */

/*
#abvtop { border: 2px solid blue; }
.mcard { border: 1px solid red; }
.mstat { border: 1px solid #000; }
#mbox { border: 1px solid blue; }
#tools { border: 2px solid red; }
 { border: 2px solid orange;}
.abvbox { border: 2px solid green; }
 * */

#abvtop, #tools a, #closebox, .nav .navx {
  font-size: 2em;
}
.nav a, .icon { 
  font-size: 1.4em;
}

html, 
body {
  font-size: 1.4vmax;
  width:100vw;
}

body {
  background: #fff;
  color: #008;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu, Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif; 
/*  overflow: hidden;  overflow-y: auto;*/
  padding: 0.2vmin;
}
.tab{
  width: 90vw;
  overflow: auto;
}
.tab button{
  margin: 1.5vw;
  padding: 0 1vw 0 1vw;
  width: 12vw;
  cursor:pointer;
  text-align:left;
  border:none;
  background:none;
  font-size:2.5vmin;
  color: #008;
}
.ll{ text-align:left;}

.imgbox {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 30%;
}
 a {
  color: #008;
  border-bottom: 1px solid #cdf;
  box-shadow: inset 0 -0.25vmin 0 #b4e7f8;
}
 a:hover  {
  color: #369;
}
#nodes a {
  border: none;
  box-shadow: none;
}
#abvtop #tools,#abvtop #pin {
  padding-left: 2vmin;
  overflow-x: auto;
}
#abvtop #tools {
  width: 40vw;
}
#abvtop #pin { 
/*  position: fixed;
  top: 5vmin;
  left: 4vmin;
  padding-left: 4vw;
  height: 5vmin; */
  width: 50vw;
  color:#08f;
  text-shadow: 0 0 1vmin #888;
  font-size: 3vmin;
}
#pin a {
  color:#08f;
  font-size: 3vmin;
}
#pin span {
  color:#08f;
  font-size: 3vmin;
  margin: 0 1vmin 0 1vmin;
}
#pin img {
  margin: 0 1vmin 0 1vmin;
}

#load,  .abvmod{
  z-index: 100;
  display: flex;
  justify-content: space-around;
  align-content: space-around;
/*grid-template-rows: 1fr;
grid-template-columns: auto;
grid-auto-flow: row;*/
  flex-flow: row;
  padding-top: 4vh;
}
#load{
  background:#fff;
}
.abvmod {
  position: fixed;
  left: 0;
  top: 0;
  width:100%;
  height:100vh;
  background: rgba(204,221,255,50%);
  visibility: hidden;
}
/*#eboxc h3 {
 margin:0;
 padding:0;
 text-align: right;
 cursor:pointer;
}*/
.hidden{ visibility: hidden; }
.abvbox {
  position: absolute;
  width: 97vw;
  height: 93vh;
  top: 7vmin;
  left: 0;
  overflow-y: auto;
  padding-left: 2vw;
  visibility: hidden;
/*  background-color: white;
  transition: 0.5s;
*/
  border: none;
}
#msgform {
  position: fixed;
  top: 85%;
  left: 1px;
  display: none;
}
#toast,
#bar {
  margin: auto auto;
  display: none;
  text-align: center;
  overflow: hidden;
  z-index: 140;
  position: fixed;
}
#bar {
  background: #c00;
  color: #fff;
  width: 100%;
  height: 2vmax;
  top: 0;left: 0;
  padding: 0.1vmin;
  font-weight: bold;
}
#toast {
  box-shadow: 0 0 2vmin #888;
  border-radius: 2vmin;
  background: rgba(255,165,0, 80%);
  color: #fff;
  width: 30%;
/*  height: 80px;*/
  top: 20%;left: 43%;
  transform: translate(-20%,-43%);
  padding: 0.5vmin;
}

#abvtop  {
  position: fixed;
  left: 0;
  top: 0;
  width: 98vw;
  height: 7vmin;
  background: rgba(245, 245, 245, 0%);
  z-index: 101;
  color: #58d;
  text-shadow: 0 0 0.5vmin #aaa;
  overflow: hidden;
  padding: 1vw;
  display: flex;
  flex-flow: row;
  justify-content: space-between;
}
/*#abvtop a  {
  text-align: left; 
  width: 33%;  
  padding: 0.125vmin 0; 
  transition: all 0.3s ease; 
  color: #58d; 
}
#abvtop a:hover  {
  background-color: #abf0c0; 
}*/
/*.mcard img { 
  float: left; margin: 0 2vmin 2vmin 0;
}*/
.mcard p {
	text-align: justify;
}
.clear{ 
  clear: both; 
  padding-top: 2vmin;
}
.left{ float: left; }
.w12 , .w24, .w80 { 
  margin: 0 2vmin 2vmin 0;
  box-shadow: 0 0 2vmin #888;
  border-radius: 1vmin;
/*  transition: 0.3s;*/
}
.w12 { max-width: 12vmin; }
.w24 { max-width: 24vmin; }
.w80 { max-width: 80vmin; }
blockquote { 
  background: #efefef;
  border-left: 1vmax solid #aaa; 
  padding: 2vmin 6vmin 2vmin 6vmin;
  margin-left: 6vmin;
}
.abvbox .mcard {
  margin-top: 4vmin;
  text-align: justify;
}
.mcard .mstat {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
  align-content: flex-start;
  color:#08f;
  cursor:pointer;
}
.mstat span{
  margin-left: 1.5vmin;
}
#abvtop #ropennav { text-align: right; }
/*.nav input[type=text] {
  margin-top: 0.5vmin;
  background: rgba(245, 245, 245, 0.8);
}*/
#search {
  border: 1px solid #369;
  border-radius: 0.5vmin;
  padding: 0;
  margin:0;
  position: relative;
  top: -1.8vmin;
  left:0;
}
#tools span{
  font-size: 2.5vmin;
  margin-left: 1vmin;
  position: relative;
  top: -1.2vmin;
}
#tools input[type=submit] {
  border: none;
  background: none;
  color:#fff;
  cursor: pointer;
  position: relative;
  top: -1.6vmin;
}

#lnav {left: 0; }
#rnav {
  right: 0;
  background: #fff; 
}
.rnavbody {
  padding: 1vmin;
}
.nav  {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 101;
  top: 0;
  background: #cdf; /*  #abf0c0;*/
  overflow-x: hidden;
  padding-top: 2vmin;
  transition: 0.5s;
  border: 1px solid #9cf;
}
.nav a  {
  padding: 2vmin 3vmin;
  text-decoration: none;
  color: #369; /* #080; */
  display: block;
  transition: 0.3s;
}
.nav a:hover  {
  color: #036; /*#060;*/
}
.nav .navx  {
  position: absolute;
  top: 0;
  right: 0.1vmin;
  margin-left: 2vmin;
  padding-top: 0;
}
#footer  {
	  width: 100%;
}
#footer a  {
  color: #58d;
}
#footer a:hover  {
  background-color: #555;
}
a {
  color: #008;
  text-decoration: none;
}
a:hover  {
  color: #369;
}

.stats, .name, .desc {
  margin: 0;
  padding: 0;
}
.stats {
  text-align: center;
  display: block;
}
.itemb {
  width: 80%;
  height: 32vmin;
  text-align: center;
/* float: left; */
  padding: 0.6vmin;
/* margin: 10vmin; */
  border: 1px solid #00f;
}
.item, .user {
  width: 12vmin;
  height: 15vmin;
  text-align: center;
/* float: left; */
  padding: 0.25vmin;
/* margin: 10vmin; */
}
.user {
  width: 11.875vmin;
  height: 13vmin;
  margin: 1px;
}
.icon {
  cursor: pointer;
}
.icon:hover  {
  color: #369;
}

.df {
  font-size: 0.6em; 
}
#tools a  {
 float: left; 
  color: #cdf; 
 margin: 1px;
  padding: 0.25vmin;
}
#tools a:hover  {
  color: #369; 
}
.shadow {
 box-shadow: 0 0 0.5vmin 0 rgba(0, 0, 0, 20%), 0 0.375em 1.25em 0 rgba(0, 0, 0, 19%);
}
.uppercase {
text-transform: uppercase;
}
.box {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 align-items: flex-start;
 align-content: flex-start;
 margin: -2vmin 0 0 0;
}
.box > *  {
 margin-top: 2vmin;
}
#apps, #home {
 display: flex;
 flex-flow: row wrap;
 justify-content: space-around;
 align-items: flex-start;
}
/*.abvbox .app {
  width: 32vmin;
  height: 32vmin;
}*/
.abvmod > div {
  width: 21vmax;
  height: 21vmax;
  border: 0.2vmin solid #cdf;
  border-radius: 2vmin;
  margin: 1vmin;
  padding: 0;
  box-shadow: 0 0 0.5vmin 0 rgba(0, 0, 0, 20%), 0 0.375em 1.25em 0 rgba(0, 0, 0, 19%);
  background:#fff;
}
.abvmod > div > h3  {
  margin:0;
  text-align: right;
  font-size: 1.1em;
  padding-right: 0.5vmin;
  background-image: linear-gradient(-20deg,#fff,#bce);
}
.x{
margin-left: 1vmin;
}
.x,.abvmod > div > h3{
  cursor:pointer;
}
.abvmod > div > p {
  margin:0;
  padding:0;
  width: 100%;
  height: 90%;
  overflow: auto;
}

ul {
  list-style-type: none;
  padding-left: 0.2vmin;
}
 
.tbl li  {
display: inline-block;
margin: 1px;
}

li .lcol {
  width: 11px;
}
/* modal  */
/*input {
margin: 0.25vmin;
  padding: 0.125vmin;
}*/

.imgusr  {
  box-shadow: 0 0 1vmin #888;
  border-radius: 2.5vmin;
/*  transition: 0.3s;*/
  width: 5vmin;
  margin-right: 1vmin;
  vertical-align: middle;
}
 .imgbox  {
  box-shadow: 0 0 1vmin #888;
  border-radius: 0.25vmin;
  cursor: pointer;
/*  transition: 0.3s;*/
}
 .imgbox:hover  {opacity: 0.7; }

#modal  {
  display: none;
  position: fixed;
  padding-top: 6.25vmin;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.9);
  z-index: 100; 
}
.modal-content  {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 43.75vmin;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  padding: 1vmin;
}

.modal-content select {
  margin: 1vmin;
}
.modal-content form {
  margin: 1vmin;
}
.modal-content img {
  margin: 1vmin;
}
#caption  {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 43.75vmin;
  text-align: center;
  color: #ccc;
  padding: 1px 0;
  height: 13vmin;
}
.modal-content, #caption  { 
 -webkit-animation-name: zoom;
 -webkit-animation-duration: 0.6s;
 animation-name: zoom;
 animation-duration: 0.6s;
}

@-webkit-keyframes zoom  {
 from  {-webkit-transform: scale(0); } 
 to  {-webkit-transform: scale(1); }
}

@keyframes zoom  {
 from  {transform: scale(0); } 
 to  {transform: scale(1); }
}

#closebox  {
  position: absolute;
  top: 10vmin;
  right: 30vmin;
  color: #f1f1f1;
  font-weight: bold;
  transition: 0.3s;
}
#closebox:hover,
#closebox:focus  {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/********************/
.lcol  { 
  float: left;
  width: 70%;
}
.rcol  {
  float: left;
  width: 25%;
   padding-left: 1.25vmin;
}
.card  {
  width: 100%;
  background-color: white;
  padding: 1.25vmin;
  margin-top: 1px;
}
.row:after  {
  content: "";
  display: table;
  clear: both;
}
.red { color: red; }
.blue { color: #08f; }
.green { color: green; }
#progress {
  background: red;
  height: 0.18vmin;
  width: 0;
}
/*#msgfeed, #mbox {
  width: 43.75vmin;
  height: 34.375vmin; 
  overflow-x: hidden;
  overflow-y: visible;
  text-align: justify;
}*/
.calendar {
  /*  position: fixed;top: 1.25vmin;left: 11px;*/
  width: 32vmin;
  height: 35vmin; 
  overflow: hidden;
  cursor: pointer;
  margin: 2vmin;
  /*  z-index: 110;
  border: 0.125vmin solid red;*/
}
.calendar table {
  width: 100%;
  height: 100%; 
  border: 0.1vmin solid #00f;
  border-radius: 0.25vmin;
}
.calendar td {
  text-align: center;
  background-color: #fff;
  color: #369;
  /*  border: 1px solid black;*/
}
.calendar td:hover {
  background-color: #cdf;
  color: #111;
/*  border: 1px solid black;*/
}
.calendar td.nm {
  color: #cdf;
}
.calendar td.nm:hover {
  color: #111;
}
@media screen and (orientation: portrait) 
{
/* #tools #search { width: 80%; }*/
.w80 { max-width: 95vw; }

}