.flexrow {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    flex-wrap: wrap;
}

.flexcol {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    position: relative;
}

.svgok,
.svgok svg {
    stroke: olivedrab !important;
}

.svgnok,
.svgnok svg {
    stroke: salmon !important;
}

.TLicenseOverview .titleBox {
    border-bottom: solid 1px #f1f1f1;
    padding-bottom: 8px;
}

    .TLicenseOverview .titleBox h2 {
        margin: 0;
        border: 0;
    }

    .TLicenseOverview .titleBox svg {
        width: 20px;
        height: 20px;
        margin-right: 4px;
        stroke-width: 1.5pt;
        stroke: #333;
    }

.TMainLic {
    padding: 16px;
    padding-top: 40px;
}

    h2 {
        margin: 0;
        color: olivedrab;
        border: none;
        margin-bottom: 12px;
    }




    .TMainLic .body {
        /* border: solid 1px #ddd; */
    }

        .TMainLic .body > div {
            display: flex;
            align-items: center;
            /*    border-bottom: solid 1px #f1f1f1;
    background: #fff; 
    border-top: solid 1px #ddd;
    border-right: solid 1px #ddd;
    border-left: solid 1px #ddd;*/
        }

            .TMainLic .body > div:last-child {
                border-bottom: none;
            }

            .TMainLic .body > div:first-child > div:last-child {
                font-weight: bold;
                text-transform: uppercase;
            }

            .TMainLic .body > div div:first-child {
                width: 250px;
                color: #333;
                padding: 2px 8px 2px 4px;
                font-weight: 600;
                text-align: right
            }

            .TMainLic .body > div div:last-child {
                padding: 8px;
            }
/*.TMainLic .body > div:last-child { border-bottom: solid 1px #ddd; }*/

/* a license group ...*/
.TLicenseGroup {
    padding: 16px;
    margin-bottom:40px;
}

.TLicenseOverview .TLicenseGroupTitle h3 {
    color: #333;
    margin: 0;
    padding-bottom: 8px;
    display: flex;
    align-items: center;
}

    .TLicenseOverview .TLicenseGroupTitle h3 svg {
        width: 24px;
        height: 24px;
        margin-right: 4px;
        stroke-width: 1pt;
        stroke: olivedrab;
    }

.TLicenseOverview .TLicenseGroup .groupTable {
    border: none;
    font-size: 1rem;
    width: 100%;
}

    .TLicenseOverview .TLicenseGroup .groupTable tr {
        border-bottom: solid 1px #eee;
        border-collapse: collapse;
    }

    .TLicenseOverview .TLicenseGroup .groupTable th {
        border-bottom:solid 1px #999999;
        color: #333;
        padding: 8px;
        font-weight: 600;
    }
    
    .TLicenseOverview .TLicenseGroup .groupTable tr:hover th {
        background-color:white !important;
    }

    .TLicenseOverview .TLicenseGroup .groupTable tr:last-child td {
        border-bottom: none;
    }


    .TLicenseOverview .TLicenseGroup .groupTable td {
        min-width: 200px;
    }




        .TLicenseOverview .TLicenseGroup .groupTable .Element-InUse div {
            display: flex;
            align-items: center;
        }

        .TLicenseOverview .TLicenseGroup .groupTable .Element-InUse svg {
            width: 16px;
            height: 16px;
            margin-left: 8px;
        }

    .TLicenseOverview .TLicenseGroup .groupTable td:last-child {
        width: 100%;
    }

    .TLicenseOverview .TLicenseGroup .groupTable td > div {
        display: flex;
        flex-direction: row;
        align-items: center;
        stroke-width: 1pt;
    }

        .TLicenseOverview .TLicenseGroup .groupTable td > div svg {
            width: 18px;
            height: 18px;
            stroke: #111;
            stroke-width: 1.2pt;
            margin-right: 4px;
        }

    .TLicenseOverview .TLicenseGroup .groupTable td.Element-Name svg {
        padding: 2px;
    }


.TLicenseOverview .contactbox {
    text-align: left;
    display: flex;
    flex-direction: column;
    padding: 0 18px;
    box-sizing: border-box;
    align-self: center;
}

    .TLicenseOverview .contactbox a {
        color: #111;
    }

    .TLicenseOverview .contactbox h2 {
        margin: 0;
        color: olivedrab;
        border: none;
    }

    .TLicenseOverview .contactbox p {
        color: #333;
    }

    .TLicenseOverview .contactbox > .flexrow {
        margin: 4px;
    }

    .TLicenseOverview .contactbox svg {
        width: 16px;
        height: 16px;
        margin-right: 8px;
    }



.TLicenseRollupField {
    margin-bottom: 18px;
}

    .TLicenseRollupField > div > .fieldlabel {
        font-weight: 200;
        font-style: italic;
    }

    .TLicenseRollupField > div > .fieldcontent {
        padding-left: 2px;
        font-size: 16px;
        font-weight: 600;
    }

    .TLicenseRollupField > div > .fieldsubcontent {
        font-size: 12px;
        font-weight: 600;
    }

.content.TLicenseOverview.ExpiredLicense .TLicenseGroup {
    color: lightgray;
}

.content.TLicenseOverview.ExpiredLicense .CoreLicenseGroup h2 {
    color: red;
}


.TLicOverview {
    position: relative;
}

.toolkitTable svg {
    width: 16px;
    height: 16px;
}



.TLicOverview .tablebox {
    display: inline-block;
    position: relative;
    padding: 16px;
}

.toolkitTable .licexc svg {
    stroke: orangered;
}

.toolkitTable .licok svg {
    stroke: olivedrab;
}

.toolkitTable .licnone svg {
    stroke: #aaa;
    stroke-width: 1;
}

.TLicOverview .toolkitTable {
    background: none;
    border: none;
}

.TLicOverview .toolkitTable {
    margin-top: 140px;
}

    .TLicOverview .toolkitTable thead {
        border-bottom: solid 2px #ccc;
        overflow: hidden;
    }

    .TLicOverview .toolkitTable tbody td {
        font-weight: normal;
        border-bottom: solid 1px #eee;
        background: #fff;
        padding: 8px 0;
        text-align: center
    }

    .TLicOverview .toolkitTable tr:hover td {
        cursor: pointer;
        background: #f9f9f9;
    }

    .TLicOverview .toolkitTable td:first-child {
        text-align: left;
        padding-left: 8px;
    }

    .TLicOverview .toolkitTable th:first-child {
        max-width: unset;
    }

    .TLicOverview .toolkitTable th {
        white-space: nowrap;
        transform-origin: bottom left;
        transform: rotate(-75deg);
        max-width: 32px;
        padding: 0;
        left: 24px;
        bottom: 8px;
        position: relative;
    }

        .TLicOverview .toolkitTable th:first-child {
            transform: unset;
            left: 8px;
            bottom: 4px;
        }

.detailspopup label {
    font-weight: 600;
    min-width: 120px;
    display: inline-block;
}

.detaillabel {
    margin: 4px 0;
}

.detailTableBox {
    margin-top: 16px;
    background: #eee;
    display: inline-block;
}

    .detailTableBox .toolkitTable {
        border: none;
    }

        .detailTableBox .toolkitTable thead {
            display: none;
        }

        .detailTableBox .toolkitTable tbody td {
            padding: 8px 16px;
            border-bottom: solid 1px #eee;
            font-weight: normal;
        }

            .detailTableBox .toolkitTable tbody td:first-child {
                padding-left: 0;
            }

            .detailTableBox .toolkitTable tbody td:last-child {
                padding-right: 0;
            }





.licenseContent {
    background-color:white;
}


.licenseContent > table > tbody > tr > td {
}

.LicenseItemSection {
}

.sectionicon {
    display:inline-block;
    width:36px;
    height:36px;
}

.sectiontitle {
    width: 100%;
    font-size: 18px;
    color: var(--color-ui-main);
    padding-top:15px;
}

.sectioncontentholder {
}


.sectioncontainer {
    display: block;
    width: 98%;
    border-top: solid 3px var(--color-ui-main);
    padding:10px;
}

    .sectioncontainer > .item {
        display:inline-block;
        margin: 3px;
        text-align:start;
        line-height: 30px;
        font-size: 14px;
        min-width:180px;
        vertical-align:middle;
    }

    .spike {
        fill:#eee;
    }




/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 23px;
}

    /* Hide default HTML checkbox */
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #82bc00;
}

input:focus + .slider {
    box-shadow: 0 0 1px #82bc00;
}

input:checked + .slider:before {
    -webkit-transform: translateX(18px);
    -ms-transform: translateX(18px);
    transform: translateX(18px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 21px;
}

    .slider.round:before {
        border-radius: 50%;
    }

.sliderContainer > label {
    vertical-align: middle;
}

.TLicOverview td {
    padding: 5px;
}

text.small  {
    font-size:8px;
    stroke:none;
    fill:#666666;
}

.left-aligned {
    text-anchor: start;
}

.right-aligned {
    text-align:right;
    text-anchor:end;
}

.center-aligned {
    text-align: center !important;
    text-anchor: middle;
}
hr.woozy {
    opacity:0.2;
}


.cursor {
    stroke-width:2px;
    stroke:#0094ff;
}

.flow-indicator {
    padding-left:20px;
    font-size:20px;
    color:darkgreen;
}

.value-indicator {
    padding-left: 20px;
    font-size: 20px !important;
    color: #666666;
}


.hoverarea {
    cursor:ew-resize;
}

.sectioncontainer *.selected {
    fill: #0094ff;
    color: #0094ff;
}

.spike rect {
cursor:pointer;
}

.EBSBuildingList > li > ul {
    border-top: solid 1px #111;
}

.EBSSupplyPointsList > li {
    border-bottom: solid 1px #eee;
}

.EBSBuildingList > li, .EBSSupplyPointsList > li {
    list-style: none;
    font-size: 20px;
}

    .EBSBuildingList > li::before {
        content: '';
        display: inline-block;
        margin-right: 10px;
        height: 15px;
        width: 15px;
        background-image: url('/Content/icon-building.png');
        background-size: contain;
        background-repeat: no-repeat;
    }

.EBSSupplyPointsList > li::before {
    content: '';
    display: inline-block;
    margin-left: 1em;
    margin-right: 10px;
    height: 25px;
    width: 25px;
    background-image: url('/Content/icon-supplypoints.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.EBSSupplyPointsList span{
    padding-right: 3em;
}
    .EBSSupplyPointsList span > img {
        height: 20px;
        width: 20px;
    }