#family {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    border-bottom: 1px solid #000000;
}
#familyDrafts {
    margin: 20px;
    flex: 5;
}
#familyDraftPressureDrop {
}
#familyDraftVelocity,
#productDraftVelocity {
    position:relative;
    width:90%;
    height:auto;
    min-height:250px;
    margin:auto;
    margin-bottom: 75px;
    min-width:400px;
}
#familyDraftVelocity .velocityDraft{
    position:absolute;
    width:100%;
    height:auto;
    left:0;
    top:0;
}
#familyDraftVelocity .velocityDraft svg,
#productDraftVelocity  svg {
    width:100%;
    height:100%;
    padding-top:1px;
}
#familyTable {
    flex: 7;
    margin: 30px 10px;
    min-width:400px;
}
#product {
    display: flex;
    flex-wrap: wrap;
    margin-top: 100px;
}
#product > #productLeft {
    flex: 3;
    min-width:300px;
}
#product > #productCenter {
    flex: 4;
    margin: 15px;
    padding: 15px;
    background-color: #F7F7F7;
    border-radius: 10px;
    min-width:300px;
}
#product > #productRight {
    flex: 5;
    min-width:300px;
}
#productImageContener {
    position: relative;
}
#productImage {
    width: 100%;
    height: auto;
    max-width:300px;
}
#productRal {
    position: absolute;
    bottom: 0%;
    right: 10%;
    padding: 10px;
    border-radius: 20px;
    background-color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    color:#FFFFFF;
}
#productOptionMenus {
    padding: 20px;
    position: relative;
}
#product_options_remember {
    margin-bottom: 20px;
}
#productSymbol {
    font-family: din-2014-narrow, sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #000000;
}
#productSubname {
    font-size: 20px;
    font-weight: 500;
    margin-top: -8px;
}
#productOverview {
    font-size: 18px;
    font-weight: 500;
    color: #878786;
    margin: 20px 0px;
}
#productDescription > div {
    margin-bottom: 10px;
}
#productDescription .title {
    font-size: 16px;
    font-weight: 500;

}
#productWorkingPoint > h3 {
    margin-top:35px;
}
.workingPointGrid {
    display: grid;
    grid-template-columns: 200px 40px 45px 40px;
    vertical-align: bottom;
}
.workingPointGrid > div {
    display:flex;
    align-items: end;
    padding:0px;
}
.workingPointGrid .value {
    font-weight:700;
    justify-content: end;
    margin-right:5px;
}
#productDimmension {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
#productDimmension #productDimmensionImageContener {
    flex: 3 0 0;
    padding: 30px;
    text-align: center;
}
#productDimmensionImage {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    min-width:300px;
}
#productDimmensionTable {
    flex: 2 0 0;
    width: 100%;
    padding: 20px;
}
.dimmensionRow {
    display: flex;
    align-items: flex-start;
    border-bottom: 1px solid #e6e6e5;
    padding: 3px;
}
.dimmensionName {
    flex: 1;
}
.dimmensionValue {
    flex: 2;
    text-align: end;
    font-weight: 500;
    font-size: 16px;
    padding-right: 15px;
}
.dimmensionUnit {
    flex: 1;
}
.ralCircle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 10px;
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.ralColorName {
    font-size: 12px;
    margin-left: 10px;
}
#advancedDrafts {
    position:relative;
    display:flex;
    flex-wrap:wrap;
    margin-top:60px;
}
#advancedDrafts > div.draft {
    position:relative;
    flex:1;
    min-width:350px;
    height:auto;
    margin:20px;
    padding:0;
    background-color:#00000005;
}
#advancedDraftsSlot {
    position:relative;
    display:flex;
    flex-wrap:wrap;
    margin-top:60px;
}
#advancedDraftsSlot > div {
    position:relative;
    flex:1;
    min-width:350px;
    max-width:450px;
    height:auto;
    margin:20px;
    padding:0;
}
#advancedDraftsSlot > div.draft {
    background-color:#00000005;
}
#advancedDrafts > h3.title {
    position:absolute;
    top:-70px;
}
#advancedDrafts > div svg {
    width:100%;

}
#advancedDraftsSlot > div svg {
    width:100%;
}
#advancedDrafts > div > .diffuser {
    position:absolute;
    top:0;
    transform:translateY(-100%) translateX(-30%);
    width:8px;
    height:8px;
    border:0px solid #3FA93D;

}
#advancedDrafts > div > .title {
    position:absolute;
    top:-40px;
    font-weight:500;
}

#advancedDraftsSlot .diffuserIndexName {
    position: absolute;
    top:-25px;
}
#advancedDraftsSlot .diffuserIndex {
    margin-left:5px;
}
#advancedTable {
    margin-top: 50px;
}



#generator {
    display:flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    background-color: #edf1f3;
    padding:10px;
}
#generator > div {
    flex:1;
}
#generator_input_object {
    margin-left:110px;
    min-width:200px;
    flex:3;
}
#generator_input_symbol {
    margin-left:50px;
    min-width:100px;
    flex:1;
}
#generator_input_note {
    margin-left:50px;
    min-width:200px;
    flex:3;
}
#generator_butCreate {
    margin:5px;
    min-width:150px;
    flex:1;
}
.diffuserIndex {
    font-size:14px;
    width:6px;
    height:16px;
    padding: 0px 5px;
    line-height:16px;
    background-color:#000000;
    color:#FFFFFF;
    border-radius:4px;
    margin-right:2px;
}

.velocityOutOfRange {
    position:relative;
    font-size:12px;
    font-weight:300;
    width:6px;
    height:16px;
    padding: 0px 5px;
    line-height:16px;
    color:#FF0000;
    border-radius:4px;
    margin-right:2px;
    border: 1px solid #FF0000;
}

table .velocityOutOfRange {
    display: block;
    width:auto;
}