body {
    font-family: Helvetica, sans-serif;
    /*padding-left: 20px;*/
    padding-right: 20px;
    color: #4a4a4a;
}

h1 {
    /*color: #343434;*/
    /*opacity: 0.85;*/
}
div.title{
    padding-left:15px;
    /*text-align: right;*/
    /*display: inline;*/
    /*padding-right:4px;*/
    /*vertical-align: top;*/
    margin:auto;
}
.app {
    border: 1px solid gray;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /*auto auto auto;*/
    /*background-color: #2196F3;*/
    padding: 10px;
    font-family: sans-serif;
    column-gap: 10px;
    row-gap: 10px;
    padding-top:25px;
}

a {
    /*color: #343434;*/
    color: #4a4a4a;
    /*opacity: 0.85;*/
    text-decoration: none;
}
/*
a {
    color: #4a4a4a;
    text-decoration: none;
  }
  a:focus,
  a:active,
  a:hover {
      text-decoration: underline;
      color: #89bdd3;
  }
  */
  
ul.links {
    font-size: smaller;
    padding: 0px;
}

ul > li {
    display: inline-block;
    /* You can also add some margins here to make it look prettier */
    margin: 5px;
    zoom: 1;
    *display: inline;
    /* this fix is needed for IE7- */
}

.content {
    display: inline;
}

.read {
    z-index: 1000;
    padding-left: 15px;
    color: gray;
}

.hide {
    display: none;
}

input[type=text] {
    min-width: 300px;
    padding: 12px 20px;
    margin: 8px 10px;
    box-sizing: border-box;
    border-radius: 10px;
    outline: transparent;
}

#loglink {
    display: none;
}

#noneFound {
    display: none;
}

.clear {
    font-size: large;
    visibility: hidden;
    margin-left: -10px;
    cursor: pointer;
}

.grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    /*border: 1px solid rgba(0, 0, 0, 0.8);*/
    /*border: 1px solid blue;*/
    padding: 20px;
    /*display: block;*/
    /*font-size: 30px;*/
    text-align: center;
    cursor: pointer;
    min-height:200px;
    /*
    border: 2px solid #0085AD;
    border-radius: 10px;
    box-shadow: 3px 4px rgb(20 20 20 / 40%);*/
    border-radius: 6px;
    box-shadow: 0 0.5em 1em -0.125em rgb(10 10 10 / 10%), 0 0 0 1px rgb(10 10 10 / 2%);
    border-top: 1px solid #d3d3d373;
}

.grid-item .read {
    display:block;
}

a.grid-item:hover {
    background-color: #00a9e050;
    /* opacity: 0.5; */
}
.grid-item-condensed {
    margin: 0;
    /*padding: 0;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: fit-content;
}

.grid-item-condensed p {
    display: none;
}

.grid-item-condensed span a {
    display: none;
}

.grid-item-condensed ul {
    display: none;
}

.grid-item-condensed div.logo {
    height:unset;
    padding-top: 3px;
}

.grid-item-condensed h2 {
    
    /*
    font-weight: normal;
    padding-left: 10px;
    text-align: left;
    font-weight: normal;
    
    display: flex;
    align-items:center;
    min-height:40px;
    */
    /*font-size: 16px;*/
}

.grid-item-condensed .read {
    display:none;
}

.grid-item-single {
    display: grid;
    grid-template-columns: 135px auto 1fr;
    grid-column-gap: 10px;
    min-height:fit-content;
    padding:0;
}

/*used to hide entries when filtering*/
.hide-filter {
    display:none !important;
}
.hide-search {
    display:none !important;
}

.grid-item-single h2 {
    font-size: 1em;
    /*font-weight: normal;*/
    text-align: left;
    margin: 0;    
    padding-left: 10px;
    padding-right:20px;
    text-align: left;
    /*font-weight: normal;*/
    /* font-size: 16px; */
    
    display: flex;
    align-items: center;
    min-height: 40px;    
}

.grid-item-single div.logo {
    height: 48px !important;
    padding-top:5px;
}

.grid-item-single img.logo {
    max-width: 64px;
    max-height: 48px
}

.grid-item-single span {
    text-align: left !important;
    padding-top:20px;
    padding-bottom:20px;
    /*margin-left:20px;*/
}

.grid-item-single span p {
    font-size:smaller;
}

.grid-item-single span p .dots {
    display:none;
}

.grid-item-single span .read {
    display:none;
}

.grid-item-single .hide {
    display:inline;
}

.grid-item-single ul {
    grid-column: 3;
}

.condense {
    font-size: smaller;
    font-weight: 100;
    margin-left: 10px;
    cursor: pointer;
    display: inline-table;
    width: 100%;
}

label {
    cursor: pointer;
}

div.logo {
    height:48px;
}

img.logo {
    vertical-align: top;
    /*min-height:32px;*/
}

img.lock {
    width: 12px;
    padding-left: 3px;
}

.uline {
    font-size: small;
}

.uline:hover {
    text-decoration: underline
}
/*
#helplink {
    font-size: small
}
*/
a.clearcnt {
    font-size: xx-small;
}

a.clearcnt:hover {
    text-decoration: underline;
}
a.logout{
    font-size:xx-small;
    float:right;
}
#desc{
    margin-left:1px;
}
#logout {
    display:none;
}

.toplinks {
    display:inline;
    margin-left:30px;
}

span.title  {
    font-size: 200%;
    font-weight: 600;
}

span.menu{
    display:none;
}

h2 span {
    color: #818181;
}

#ai {
    min-width: 400px;
    margin-top:0;
}

#aispan {
    float: right;
    display:none;
}
#aidiv {
    display:none;
}

/* The side navigation menu */
.sidenav {
    /*height: 100%;*/ /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: white; /* #111;*/ /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
    border-bottom: 1px solid gray;

}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}
  
/* When you mouse over the navigation links, change their color */
  .sidenav a:hover {
    color: #f1f1f1;
}
  
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}
  
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
    padding: 10px;
}

#results {
    display:none;
    overflow:auto;
    /*width:100%;*/
    position:absolute;
    line-height: 200%;
    background-color: white;
    border:5px solid lightgray;
    padding:5px;
}
#results a {
    text-decoration: underline;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}
@media only screen and (max-width: 1280px) {
    .toplinks {
        display:block;
    }
    #aispan{
        float:none;
        padding-top:10px;
    }
}
@media only screen and (max-width: 1024px) {
    body {
        color: unset;
        padding-right: 0px;
    }
    h2 span {
        color: unset;
        /*font-weight: 100;*/
        font-weight: 300 !important;
    }
    .grid-item-condensed {
        flex-direction: row;
    }
            
    .grid-container {
        grid-template-columns: unset  !important; /*repeat(2, minmax(0, 1fr));*/
        
    }
    #desc{
        margin-left:10px;
        font-weight: 600;
    }
    .nomobile {display:none}
    .toplinks {
        text-decoration: underline;
        float:right;
        display: flex;
        column-gap: 18px;
    }
    span.title  {
        font-size: 4vw;
        font-weight: 300;
    }
    span.menu{
        display:unset;
    }
    .toplinks {
        display:none;
    }
    .mobile {
        visibility:hidden;
    }
    img.headerlogo {
        width:70px;
    }
    #aispan {
        display:none !important;
    }
    
}

@media only screen and (max-width: 950px) {
    /*
    .grid-item-condensed h2 {
        font-size: 28px;
    }    
    h2 {
        font-size: 28px;
    }
    */
    h1 {
        display:grid;
        grid-template-columns: unset !important; /*repeat(1, minmax(0, 1fr));*/
        text-align:center;
        margin: 0;
    }
    h2 span {
        color: unset;
        font-weight: 300 !important;
        /*font-weight: 100;*/
    }

    body {
        color: unset;
        padding-right: 0px;
    }
    .condense{
        /*display: none;*/
        /*font-size:2em;*/
        padding-top: 10px;
    }
    .grid-item-condensed {
        flex-direction: row;
    }
    
    .grid-container {
        grid-template-columns: unset !important; /*repeat(1, minmax(0, 1fr)) !important;*/

        
    }
    .grid-item {
        /*font-size:4vw;*/
        /*margin:5px;*/
        padding: 15px;
        grid-gap: 15px;
    }
    div.title {
        font-size:xx-large;
    }
    #gridlbl {
        display: none;
    }
    img.logo
    {
        /*min-width: 128px;*/
        width: auto ;
        max-width: 64px ;
        height: auto ;        
    }    
    div.logo {
        display:contents;
        min-height: 128px;
        height:auto;
    }
    input[type=checkbox] {
        /* All browsers except webkit*/
        transform: scale(2);
        /* Webkit browsers*/
        -webkit-transform: scale(2);
    }   
    select {
        /* All browsers except webkit*/
        transform: scale(2);
        /* Webkit browsers*/
        -webkit-transform: scale(2);

    }
    #user{
        float:right;
    }
    #desc{
        margin-left:10px;
        font-weight: 600;
    }
    .nomobile {display:none}
    .toplinks {
        text-decoration: underline;
        float:right;
        display: flex;
        column-gap: 18px;
    }
    span.title  {
        font-size: 8vw;
        font-weight: 300;
        font-family:Verdana, Geneva, Tahoma, sans-serif;
    }
    span.menu{
        display:unset;
    }
    .toplinks {
        display:none;
    }
    .mobile {
        visibility:hidden;
    }
    #ai {
        display:none;
    }
    #aispan {
        display:none !important;
    }
    
}

@media only screen and (max-width: 950px) {
    body {
        color: unset;
        padding-right: 0px;
    }
    h2 span {
        color: unset;
        font-weight: 300 !important;        
        /*font-weight: 100;*/
    }
    .grid-item-condensed {
        flex-direction: row;
    }
    
    #filtercont {
        display: none;
    }

    #gridlbl {
        display: none;
    }

    .gridsel {
        display: none;
    }

    .clearcnt {
        display: none;
    }

    #sortlbl {
        display: none;
    }
    /*
    #helplink{
        display: none;
    }*/
    .nomobile {display:none}
    .toplinks {
        text-decoration: underline;
        float:right;
        display: flex;
        column-gap: 18px;
    }
    span.title  {
        font-size: 5vw;
        font-weight: 300;
        font-family:Verdana, Geneva, Tahoma, sans-serif;
    }
    span.menu{
        display:unset;
    }
    .toplinks {
        display:none;
    }
    .mobile {
        visibility:hidden;
    }
    .shorttext{
        display:none;
    }
    #ai {
        display:none;
    }
    #aispan {
        display:none !important;
    }

}