.host {
    background: #f6f8fa;
    display:inline-block;
    flex-flow: column;
    font-family: 'Calibri';
   
    padding: 20;
}
.title {
    color: white;
    font-weight: bold;
    font-size: large;
    padding: 8px;
    padding-right: 40px;
    background: #144268;
    display: inline-block;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
.row {
    display: flex;
    flex-flow: row;
    margin: 0px;
    padding: 0px;
}
.column {
    display: flex;
    flex-flow: column;
    margin: 0px;
    padding: 0px;
}

.family {

    box-shadow: -7px 7px 10px -2px rgba(0,0,0,0.56);
    background-color: #15659e;
    display: flex;
    flex-flow: column;
    margin: 12px;
    padding: 14px;
}
.family-content {
    display: flex;
    flex-flow: row;
}
.family-common {
    display: flex;
    flex-flow: column;
    margin: 20px;
}

.family-application {
    display: flex;
    flex-flow: column;
    box-shadow: -7px 7px 10px -2px rgba(0,0,0,0.56);
    background-color:#4b70b6;
    margin: 10px;
    padding: 10px;
    width: 120px;
}
.wide {
    width: 210px;
}

.application-title {
    color: white;
    font-weight: bold;
    font-size: large;
    align-self: center;
}
.family-title {
    color: white;
    font-weight: bold;

}

.entity {
    color:white;
    border-color: white;
    border-style: solid;
    border-width: thin;
    font-weight: lighter;
    font-size: smaller;
    padding: 4px;
    margin: 4px;
    align-items: center;
}
.invisible {
    color:#15659e;
    border-color: #15659e;
}