/* minimal css reset */

html, body, div, form, fieldset, legend, label {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    font-size: 14px;
    color: #333;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

th, td {
    text-align: left;
    vertical-align: top;
}

h1, h2, h3, h4, h5, h6, th, td, caption {
    font-weight: normal;
    padding: 0px;
    margin-top: 0px;
    margin-left: 0px;
}

img {
    border: 0;
}

/* app styles */
    /* layout */
#results {
    padding: 0px;
    display: inline-block;
    width: 300px;
}

#details {
    padding: 0px;
    display: inline-block;
    vertical-align: top;
}

.closeapproaches {
    margin-top: 0px;
}

.closeapproach {
    margin-top: 0px;
    margin-left: 0px;
}

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
}


/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #394556;
    color: #f0f0f0;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    top: 108%;
    left: 0%;
    margin-left:calc(50% - 15px);
    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 1.6s;
    transition-delay: 0.8s;
}

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    bottom: 100%; /* At the top of the tooltip */
    left: 12%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #394556 transparent;
}

/* Tooltip container (expanding left) */
.tooltipMirrored {
    position: relative;
    display: inline-block;
}


/* Tooltip text (expanding left)*/
.tooltipMirrored .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #394556;
    color: #f0f0f0;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    top: 108%;
    left: -75%;
    margin-left: calc(-50% + 15px);
    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 1.6s;
    transition-delay: 0.8s;
}

.tooltipMirrored .tooltiptext::after {
    content: " ";
    position: absolute;
    bottom: 100%; /* At the top of the tooltip */
    left: 82%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #394556 transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltipMirrored:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.pageSection.mainSearch {
    /*border: 1px solid #EFE4B1;*/
    display: flex;
    flex-direction: row;
    height: calc(65% - 34px);
    width: 100%
}

.pageSection.articlesBody {
    height: calc(100% - 26px);
    width: 100%;
    overflow-y: scroll
}

.pageColumn {
    border: 1px solid #999999;
    border-left: 0px
    /*border: 1px solid #EFE4B1;*/
}

.probe {
    overflow-y: auto;
    /*border:6px solid #ff6a00;*/
}

.itemslist {
    overflow-y: scroll;
}

.pricelists {
    height:100%;
    width:40%;
    display:flex;
    flex-direction:column; 
    border: 1px solid #B9B9B9;
    border-bottom-style:hidden
}

.articlesHead {
    margin-top:7px; 
    margin-left:8px;
    font-size:small;
}

.qReportHead {
    margin-top: 7px;
    margin-left: 8px;
    font-size: small
}

.treeItemPassive {
    cursor: pointer;
    color: #303030;
    background-color: #f0f0f8;
    padding: 5px;
    border-bottom: 2px solid #C0C0C8;
    border-top: 2px solid #F8F8FF;
    border-right: 2px solid #E0E0E8;
    border-left: 2px solid #E0E0E8;
    font-size: 12px;
    font-weight: normal;
}

.treeItemHover {
    cursor: pointer;
    color: #303030;
    background-color: #e0e0e8;
    padding: 5px;
    border-bottom: 2px solid #C0C0C8;
    border-top: 2px solid #F8F8FF;
    border-right: 2px solid #E0E0E8;
    border-left: 2px solid #E0E0E8;
    font-size: 12px;
    font-weight: normal;
}

.treeItemPressed {
    cursor: pointer;
    color: #303030;
    background-color: #ff6068;
    padding: 5px;
    border-bottom: 2px solid #C0C0C8;
    border-top: 2px solid #F8F8FF;
    border-right: 2px solid #E0E0E8;
    border-left: 2px solid #E0E0E8;
    font-size: 12px;
    font-weight: normal;
}

.extInfoRadioButton {
    height: 20px;
    display: flex;
    flex-direction: row;
    cursor: pointer;
}

    .extInfoRadioButton .prefix {
        margin-top: 5px;
        margin-left: 10px;
        font-weight: bold;
        width: 50px;
        text-align: right;
        cursor: pointer;
        color:black;
    }

    .extInfoRadioButton .centerfix {
        height: 17px;
        width: 16px;
        background-position: 0px -136px
    }

    .extInfoRadioButton .postfix {
        margin-top: 5px;
        margin-left: 10px;
        font-weight: normal;
        width: 150px;
        text-align: left;
        color: #333844;
        cursor: pointer;
    }


    .extInfoRadioButton:hover {
        height: 20px;
        display: flex;
        flex-direction: row;
        cursor: pointer;
    }

        .extInfoRadioButton:hover .prefix {
            margin-top: 5px;
            margin-left: 10px;
            font-weight: bold;
            width: 50px;
            text-align: right;
            cursor: pointer;
            color: black;
        }

        .extInfoRadioButton:hover .centerfix {
            height: 17px;
            width: 16px;
            background-position: 0px -172px
        }

        .extInfoRadioButton:hover .postfix {
            margin-top: 5px;
            margin-left: 10px;
            font-weight: normal;
            width: 150px;
            text-align: left;
            color: #000000;
            cursor: pointer;
        }

.extInfoRadioButton.checked {
    background-position: 0px -154px;
}

    .extInfoRadioButton.checked .centerfix {
        background-position: 0px -154px;
    }

    .extInfoRadioButton.checked .postfix {
        font-weight: bold;
        color: #000000;
    }