/* Define dark and light palettes with CSS variables */

/* Light Mode */
:root[color-mode="light"] {
  --surface0: #ffffff;
  --surface2: #f2f2f2;
  --surface3: #ffffff;
  --element1: #111111;
  --element2: #222222;
  --element3: #333333;
  --elementInverse: #eee;
  --primary: #01408e;
  --secondary: #3c5d5c;
  --tertiary: #fff7d6;
}

/* Dark Mode */
:root[color-mode="dark"] {
  --surface0: #121212;
  --surface1: #171717;
  --surface2: #202020;
  --surface3: #262626;
  --element1: #eeeeee;
  --element2: #dddddd;
  --element3: #cccccc;
  --elementInverse: #111;
  --primary: #8fceff;
  --secondary: #72faca;
  --tertiary: #eee8a9;
}


* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

body, html {
    font-size: 16px;
    font-family: Segoe UI;
    width: 100%;
    height: 100%;
}

body {
    background: var(--surface0); 
}

img {
    filter: brightness(.8) contrast(1.2);
}


/*Used to hide un-compiled vue.js template until it is ready*/
[v-cloak] {
  display: none;
}






nav{
   display: flex;
   position: static;
   top:0;
   width: 100%;
   background-color: var(--surface2);
   overflow: auto;
   height: auto;
}
nav .left-links{
   color: white;
   flex:1 1 200px;
}
nav a{
   display: inline-block;
   text-align: center;
   padding: 10px;
   color: white;
   text-decoration: none;
   font-size: 27px;
   font-weight: normal;
}

nav .offline {
   color: #f74141;
}

nav .online {
   color: var(--surface2);
}



.header-container {
  position: static;
  background-color: var(--surface0);
  border-left: 4px solid var(--surface2);
  border-right: 4px solid var(--surface2);

}

.header-text {
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  background-color: var(--surface0);
  color: white;
}

/* If multiple lines*/
.header-text p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

.header-text p .brand {
  color: red;
}







.ptr--ptr {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--surface0);
}

.ptr--box {
    border-left: 4px solid var(--surface2);
    border-right: 4px solid var(--surface2);
}

.loader {
  border: 3px solid #f3f3f3;
  border-radius: 50%;
  border-top: 3px solid #3498db;
  width: 20px;
  height: 20px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  margin:auto;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}







.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: var(--surface1);
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav img{
  position: absolute;
  top: 0;
  right: 25px;
  margin-left: 40px;
  margin-top: 20px;
}

.sidenav a {
  white-space: nowrap;
  padding: 8px 8px 8px 20px;
  text-decoration: none;
  font-size: 15px;
  color: var(--element3);
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav button {
  margin-top: 40px;
  margin-left: 20px;
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 8px 8px;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;  
}


.sidenav div {
  white-space: nowrap;
  padding: 8px 8px 8px 20px;
  text-decoration: none;
  font-size: 13px;
  color: var(--element3);
  display: block;
  transition: 0.3s;
}

.sidenav .credit {
  font-size: 10px;
}









.list-items {
  margin: 0px;
}
 
.list {
    background-color : var(--surface0);
    list-style-type: none;
    width: 100%;
}

.item {
    background-color : var(--surface2);
    margin-bottom: 0px;
    padding: 10px;
    overflow: auto;
    border: solid 0px #f00;
    border-bottom: solid 1px var(--surface3);
}


.item:first-child {

}

.item span {
    color: var(--element3);
}

.item time {
    color: var(--element3);
}

.item a {
    display:block;
}

.item a:link { text-decoration: none; }

.item a:visited { text-decoration: none; }

.item a:hover { text-decoration: none; }

.item a:active { text-decoration: none; }

.item h2 {
  font: bold 20px;
  color: var(--element1);
}
 
.item img {
  float: left;
  margin: 0 15px 0 0;
  border-radius: 5px;
}
 
.item p {
    color: var(--element2);
    font-size: 100%;
    line-height: 1.5em;
    max-height: 2.75em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow:hidden
}




#error-message {
    padding: 20px;
    color: red;
}






/*###Desktops, big landscape tablets and laptops(Large, Extra large)####*/
@media screen and (min-width: 1024px){
    /*Style*/
    #app {
      position: absolute;
      left: 50%;
      /* bring your own prefixes */
      transform: translate(-50%);
    }
}

/*###Tablet(medium)###*/
@media screen and (min-width : 768px) and (max-width : 1023px){
/*Style*/
}

/*### Smartphones (portrait and landscape)(small)### */
@media screen and (min-width : 0px) and (max-width : 767px){
/*Style*/
    .item span {
      font-size: 70%;
    }

    .item time {
      font-size: 70%;
    }

    .item h2 {
        padding-top: 2px;
        padding-bottom: 5px;
        font-size: 90%;
    }
     
    .item img {
      width: 80px;
    }
     
    .item p {
        font-size: 75%;
        line-height: 1.3em;
        max-height: 2.6em;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow:hidden
    }

}