app.css

/******************************************
************** GENERAL  *************
**************************************** */
@font-face {
    font-family: customFont;
    /*src: url(./font/AvenirNextLTPro-Cn.otf);*/
    font-weight: lighter;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
}

body.json_documenter *:not(pre):not(.fas) {
    font-family:customFont,Arial,Helvetica;
}


body.json_documenter{
    overflow-x: hidden;
    padding:10px 20px 10px 10px;
    background-color: rgb(250,250,250);
}

body.json_documenter{
    padding:0px
}

body.json_documenter div *{
    font-size:14px;
}


body.json_documenter h1{
    /*background-color:rgb(11,121,75);*/
    background-color:#2980B9;
    color:#fcfcfc !important;
    margin-bottom:0px;
    margin-top:10px !important;
}

body.json_documenter h1 .titleText{
    font-size:30px;
}

body.json_documenter .fas:hover{
    cursor:pointer;
}

body.json_documenter h2{
    font-size:24px;
}

body.json_documenter h2, body.json_documenter h3, body.json_documenter pre{
    margin:0;
    color:#2980B9;
}

body.json_documenter .mainPage h2{
    margin-bottom: 10px;
}


body.json_documenter label{
    font-weight: bold;
    margin-bottom: 0px;
}


/* LAYOUT */

body.json_documenter .loader{
    padding:15px;
}



body.json_documenter div.sidebar{
    background:#343131;
    height:100vh;
    position: fixed;
    padding:0px;
}

body.json_documenter div.main_container,
body.json_documenter div.debug,
body.json_documenter h1,
body.json_documenter div.metadata,
body.json_documenter div.data{
    border:1px solid #ccc;
    padding:10px;
    box-shadow:4px 4px 3px #D6D6D6;
    margin-bottom: 15px;
}

body.json_documenter div.main_container{
    background-color: #ECF0F1;
    padding:10px 20px 10px 20px;
}

body.json_documenter div.metadata, div.data{
    margin-top:15px;
}

body.json_documenter div.schema{
    margin:10px 10px 0px 10px;
}

body.json_documenter div.welcome{
    background: #2980B9;
    width:100%;
    color:#fcfcfc;
}

body.json_documenter div.welcome h2{
    text-align:center;
    padding:10px;
    font-size:18px;
}

body.json_documenter div.welcome hr{
    background:#fcfcfc;
}

/* TABLE */
body.json_documenter table{
    width:100%;
    border-collapse: collapse;
    margin-top:10px;
    table-layout: fixed;
}

body.json_documenter tr{
    border-bottom:1px solid #ccc;
}

body.json_documenter th {
    padding-left:10px;
    color:#2980B9;
}

body.json_documenter td {
    border-bottom:1px solid #ccc;
    padding-left: 10px;
}

body.json_documenter tr:not(.first_line):hover{
    background-color: #2980B9;
    color:#fcfcfc;
}

body.json_documenter tr:not(.first_line):hover a{
    color:#fcfcfc;
}

body.json_documenter .firstCol{
    width: 14%;
    border-right:1px solid #ccc;
    padding-right: 10px;
}

body.json_documenter .fieldTitle{
    overflow: hidden;
    text-overflow: ellipsis;
}

body.json_documenter table  ul{
    margin-top:0px !important;
    margin-bottom:0px !important;
}

/* OTHER */
body.json_documenter .required{
    font-weight:bold;
    color:red;
}

body.json_documenter .italic{
    font-style: italic;
}

body.json_documenter a:visited{
    color:#2980B9;
    text-decoration: underline;
}

body.json_documenter .re_position{
    position: relative;
    left: 8%;
}

body.json_documenter .sidebar li,
body.json_documenter .sidebar a,
body.json_documenter .sidebar a:visited,
body.json_documenter .sidebar a:hover{
    color:#b3b3b3;
}

body.json_documenter .sidebar ul{
    margin-top:20px;
    list-style-type: none;
    padding-left:15px;
}

/* FIELD TYPES */
body.json_documenter .string{
    color:rgb(11,121,75);
    font-weight:bold;
}

body.json_documenter .number, .integer{
    color:#A9A9A9;
    font-weight:bold;
}

body.json_documenter .uri{
    color:#0000FF;
    font-weight:bold;
}

body.json_documenter .date{
    color:#003366;
    font-weight:bold;
}

body.json_documenter .object{
    color:#8b0000;
    font-weight:bold;
}

body.json_documenter md-chip:hover{
    background-color: #2980B9;
    color:#fcfcfc;
}

body.json_documenter md-chips, body.json_documenter md-chips-wrap{
    box-shadow:none;
    background-color:#ECF0F1;;
}

body.json_documenter .menuBar{
    margin-top:10px;
}

body.json_documenter .menuItem{
    margin-bottom: 10px;
}

body.json_documenter .menuItemLink:hover{
    background:#2980B9;
    color:white;
}

body.json_documenter .menuItemLink{
    padding:10px;
    width: 100%;
    display: block;
    height:100%;
}

body.json_documenter .menuBar .container-fluid{
    background-color:#2980B9;
    color:#fcfcfc;
    border-bottom:1px solid #ccc;
    width:100%
}

body.json_documenter .menuBar h2{
    background-color:#2980B9;
    color:#fcfcfc;
}

body.json_documenter .menuBar i.fa-comment {
    vertical-align: middle;
    position: relative;
    top: 30%;
    left: 80%;
    font-size: 1.4rem;
}

body.json_documenter .menuBar div.row{
    padding: 0 6px 0 25px;
}

body.json_documenter .menuBar md-toolbar div.layout-row{
    border:1px solid #ccc;
    box-shadow:4px 4px 3px #D6D6D6;
}

body.json_documenter md-toolbar.md-menu-toolbar h2.md-toolbar-tools{
    padding-top:25px;
    padding-bottom:25px;
}



body.json_documenter a,
body.json_documenter a:visited,
body.json_documenter a:hover,
body.json_documenter a:focus{
    text-decoration: none;
    color:#212529;
}

body.json_documenter .backUp{
    position: sticky;
    bottom:30px;
    left:10px;
    font-size: 32px;
    border:1px solid #ccc;
    box-shadow:4px 4px 3px #D6D6D6;
    padding:10px;
    color:#2980B9 !important;
    background-color: #fcfcfc;
    z-index:150;
}

body.json_documenter .menuBar md-menu-bar{
    padding:10px;
}

body.json_documenter .menuBar button{
    border:0px;
    color: #fcfcfc;
    background-color: #2980B9;
    box-shadow:4px 4px 3px #D6D6D6;
}


body.json_documenter .menuBar button:focus,
body.json_documenter md-menu-bar.md-altTheme-theme md-menu.md-open{
    background-color: #2980B9;
}




body.json_documenter .menuBar md-toolbar.md-menu-toolbar{
    backgound-color:rgb(250,250,250) !important;
}

body.json_documenter .md-open-menu-container a{
    text-transform: none;
}

body.json_documenter .md-open-menu-container .container{
    max-width: 710px;
}

body.json_documenter .linkToNextSpec{
    display: inline-block;
}

body.json_documenter .subSection{
    width:100%;
}


body.json_documenter .md-button{
    text-transform: lowercase !important;
    margin-left:0;
    margin-right:5px;
}

body.json_documenter .md-panel{
    opacity: 1;
}

/*
body.json_documenter .tooltip{
    padding:10px;
    border:1px solid #ccc;
}
*/

body.json_documenter .card{
    margin-top:0;
    margin-bottom:0;
    box-shadow:4px 4px 3px #D6D6D6;
    min-height:100%;
    border-radius: 30px 0 30px 0;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;
    border: 3px solid #ECF0F1;
    border-right-color: transparent;
    border-bottom-color: transparent;
}

body.json_documenter .subCard{
    border: 3px solid transparent;
    width:100%;
}


body.json_documenter .card:hover{
    border:3px solid #2980B9;
}

body.json_documenter h5{
    margin-bottom:0;
}

body.json_documenter .card-header
{
    background-color: #2980B9;
    color:white;
    border-top-left-radius: 25px;
    border-top-right-radius: 0;
}

body.json_documenter h1 .fa-file-alt
{
    color:white !important;
    font-size: 30px;
    position: relative;
}


@media only screen and (max-width:750px) {
    body.json_documenter .card-header {
        width:100.5%;
    }
    body.json_documenter h1 .fa-file-alt
    {
        left: 65%;
    }
    body.json_documenter #footer img#fairSharing{
        position:relative;
        left:14%
    }
    body.json_documenter #footer img#oerc{
        position:relative;
        left:35%
    }
    body.json_documenter #footer img#uni{
        position:relative;
        left:10%
    }
}

@media only screen and (min-width:751px) {
    body.json_documenter .card-header {
        width:101%;
    }
    body.json_documenter h1 .fa-file-alt
    {
        left: 80%;
    }
}

@media only screen and (max-width:900px) {
    body.json_documenter .container{
        max-width: 100% !important;
    }
}


body.json_documenter .definitionCard .card-header{
    width:100.3%;
}
body.json_documenter .definitionSubCard .card-header{
    width:100.5%;
}

body.json_documenter .definitionCard{
    height:auto;
    min-height:0px;
    margin-top:10px;
    margin-bottom: 10px;
}




body.json_documenter .descriptionLabel{
    color:black;
}

body.json_documenter .colMaginTop{
    margin-top:10px;
    margin-bottom:10px;
}

body.json_documenter .miniCard{
    margin-top:5px;
}

body.json_documenter .miniCard .card-body{
    padding-bottom: 5px;
}

body.json_documenter .miniPadTop{
    padding-top: 5px;
}

body.json_documenter .link{
    color:#2980B9 !important;
}

body.json_documenter .error{
    border:1px solid #ccc;
    padding:20px;
    margin-top:10px;
    box-shadow:4px 4px 3px #D6D6D6;
}

body.json_documenter .jsonDump{
    position: absolute;
    border: 1px solid #ccc;
    background: white;
    z-index: 15;
    right: 81px;
    width: 70%;
    max-height: 50vh;
}

body.json_documenter .jsonDump pre{
    color:initial;
    overflow:initial !important;
    padding: 10px;
}

body.json_documenter .jsonDump .jsonHeader{
    border-bottom:1px solid #ccc;
    font-size: 18px;
    color: #2980B9;
    padding:5px 10px;
}

body.json_documenter .jsonDump .jsonContainer{
    overflow:scroll;
    height: 49vh;
    width:100%;
    background:white;
}

body.json_documenter .jsonDump .jsonHeader .fas{
    border: 1px solid #2980B9;
    padding:5px 10px;
    margin-right:10px;
}

body.json_documenter .jsonDump .jsonHeader .fas:hover{
    color:white;
    background:#2980B9;
    border-color:#ccc;
}

body.json_documenter  #footer img{
    display:inline-block;
    max-height:90px;
    width:auto;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    transition: all 0.5s ease;
}

body.json_documenter  #footer img:hover{
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
}

body.json_documenter  #footer p{
    margin-bottom: 0;
}


body.json_documenter i.fa-cog{
    font-size: 1.6rem;
    position: relative;
    top:-35px;
}

body.json_documenter .settings{
    position: absolute;
    min-width:600px;
    min-height:80px;
    top:13px;
    left:55px;
    z-index: 42;
    display:none;
}

body.json_documenter .menuCard{
    background-color: white;
    border:1px solid #ccc;
}

body.json_documenter .cardheader{
    border-bottom:1px solid #ccc;
    font-size: 1.2rem;
    padding:10px 15px;
}

body.json_documenter .cardbody{
    padding:20px;
}

body.json_documenter .menuCard md-content{
    background-color:transparent;
}

body.json_documenter md-input-container.inputList{
    width: 100%;
}

body.json_documenter  .reloadButton {
    padding:5px 20px;
    margin-top:20px;
}

body.json_documenter .col-6{
    padding: 5px;
}


div.tooltip{
    opacity: 1 !important;
}

div.tooltip .tooltip-inner{
    padding:10px;
    color: #2980B9 !important;
    background-color:white;
    border:1px solid #2980B9;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    width: 400px !important;
}

div.requiredField .card-header{
    background-color: #45A93A;
}

div.card.requiredField:hover{
    border-color: #45A93A;
}

div.card.requiredField div.tooltip .tooltip-inner{
    color: #45A93A !important;
    border-color: #45A93A;
}


div.legend label {
    border-bottom:1px solid #2980B9;
    width:100%;
    padding:5px 0;
}

div.legend .tooltip-inner{
    padding:0 !important;
}

div.legend .legend_color{
    width:10px;
    height:10px;
    border:1px solid #ccc;
    display: inline-block;
    text-align: left !important;
}

div.legend .legend_item{
    text-align: left !important;
    padding: 0 5px;
}

div.legend .greenLeg{
    background-color:  #45A93A;
}

div.legend .blueLeg{
    background-color: #2980B9;
}

div.legend .legend_item span{
    margin-left:5px;
}

body.json_documenter i.fas{
    color:white;
}

body.json_documenter .takeTour{
    font-size: 1.2rem;
    position: relative;
    top: 5px;
    padding: 10px;
    left: 25px;
}