@import url("https://static.synopticdata.com/style/v2.1.1/synoptic.css");
@import url("https://fonts.googleapis.com/css2?family=Karla:wght@400&family=Rubik:wght@400&display=swap");

body.unsupported:before {
    content:"Synoptic demo applications require modern browsers which have javascript running.";
    font-size:45px;
    text-align:center;
    color:#FFF;
    font-weight: bold;
    padding: 30px;
    display: block;
    position: fixed;
    background-color: #900;
    
}

th {
    font-family:var(--SynopticHeaderFontFamily);
    font-weight:500;
}
body {
    padding:10px;
    color:#555;
    min-height:100vh;
    padding-bottom:200px;
}
body.unsupported {
    background-color:#900;
    
}
div.demo a {
    width:23%;margin:1%;background-color:var(--SynopticPrimaryLightColor);
    float:left;
    height:120px;
    /* box-shadow:1px 1px 9px 0px rgba(0,0,0,.4); */
    border-radius:var(--SynopticPrimaryDarkColor),0);
    overflow:hidden;
    padding:10px;
    color:var(--SynopticPrimaryDarkColor);
}
/* div.demo a {
    display:block;
    top:50%;
    padding:10px;
    transform: translateY(-50%);
    position:relative;
    color:var(--SynopticPrimaryDarkColor);
} */
div.demo a:hover{
    background-color:var(--SynopticPrimaryColor);
    color:#FFF;
    text-decoration:none;
}
div#index {
    padding:30px;
    font-size:1.3em;
    font-weight:500;
    text-align:center;
    font-weight:400;
    margin:auto;
    max-width:600px;
}

#demos-header { 
    /* background-color:#ccc; */
    margin:-15px -15px 0px -15px;
    padding:20px;
    line-height:50px;
    font-size:18px;
}
#demos-header img {
    height:50px;
    float:left;
    margin-right:10px;
}
#demo-list {
    overflow: hidden;
}
#demos-footer {
    padding:20px;
    background-color:#f9f9ff;
    color:#293156;
    position:absolute;
    bottom:0px;
    left:0;
    width:100%;
    line-height:30px;
    /* height:180px; */
}
#demos-footer a {
    color: #293156;
    /* text-decoration: underline; */
    
}
#logo-small {
    height:30px;
    display:block;
    float:left;
}
#b-corp {
    position:absolute;
    right:10px;
    bottom:10px;
    height:calc(100% - 20px);
    max-height:120px;  
}
@media screen and (max-width:700px) {
    /* small screen footer considerations */
    #b-corp {
        position:relative;
        display:block;
        float:right;
    }
    #demos-footer {
        margin-top:30px;
        height:unset;
        position:relative;
        bottom:unset;
        overflow:hidden;
    }
    body {
        padding-bottom:0;
    }
    div.demo a {
        width:48%;
    }
}
p {
    max-width:800px;
}