/* CSS for printing - nabyual add to print document*/
@media print {
    .noprint {
        display: none !important;
    }
    .Item_no_match {
    text-decoration: underline !important;
    }
}

.round-border-top {
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}



/* Correction size selectmenu vs buttons*/
.ui-selectmenu-button {
    padding-top: 0.2em !important;
    padding-bottom: 0.2em !important;
}

/* help bestand */
.help-text-block {
    /*position:fixed;*/
    margin-left:auto;
    margin-right:auto;
    width:75%;
    height: calc(100% - 0.2em);         /* space main footer */
    /*height:50%;*/
    /*top:25%;*/

    /*
    max-width: 40em !important;
    display: block;
    padding-left: 6em !important;
    padding-right: 6em !important;
    */
    background-color: #E3E3ED;
    overflow: auto;
}


/* Test help tab to right */
.my-help-tab {
    float:right!important;
    background-color: #8F8F8F!important;
}

.my-help-tab-a {
    color:white!important;
    /*background-color: #08BD05;*/
}


/* Test new tab to left */
.my-new-tab {
    float:left!important;
    background-color: #8F8F8F!important;
}

.my-new-tab-a {
    color:white!important;
    /*background-color: #08BD05;*/
}






/*.my-help-tab a span.ui-icon.ui-icon-closen {

(https://cntr.creatools.nl/js/jquery-ui/base/images/ui-icons_ffffff_256x240.png)
backgroun
url(images/ui-icons_ffffff_256x240.png)
*/
.my-help-tab-span {
    background-image: url(https://cntr.creatools.nl/js/jquery-ui/base/images/ui-icons_ffffff_256x240.png)!important;
}




/* Compare items */


/*
    Test check double per document voor analyse
*/
.Item_detected.Item_double {
        background-color: #D3D3D3;
}


.Item_detected{
    font-weight: bold;
}

.Item_detected_half{
    font-style: italic;
    background-color: #FAFAA3;
}


.ContLine {
    font-size: 15px;
}

.ContLine_hide {
    display: none;
}
.ItemLine_hide {
    display: none;
}


.NonContLine {
    font-size: 15px;
}


.Item_no_match_count {
    color: #F33220;
}

.ItemLine_no_match {
    font-size: 15px;
}

.Item_first {
}

.Item2_first.Item2_match,
.Item_first.Item_match {
    background-color: #72F872;
    text-decoration: underline;
}

.Item2_first.Item2_no_match,
.Item_first.Item_no_match {
    background-color: #F55243;
    text-decoration: underline;
}

.Item2_double.Item2_match,
.Item_double.Item_match {
    background-color: #BBFCBB;
}

.Item2_double.Item2_no_match,
.Item_double.Item_no_match {
    background-color: #F88277;
}

.Item_match_count {
    color: #00A800;
}

.ItemLine_match {
    font-size: 15px;
}








html,
 body {
   height: 100%;
   padding: 0;
   margin: 0;
   font-family: Arial, Helvetica, sans-serif;
 }

.MyWaitscreen {
    position: absolute;
    left: 0;
    top: 0;
    /*background: rgba(207, 207, 207, 0.5); }*/
}


hr {
    display: block;
    margin-top: 0em;
    margin-bottom: 0em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
}

.FileName {
    color: black;
    background-color: #DEDEDE;
    font-weight: bold;
    font-style: italic;
    margin-top:0.1em;
    margin-bottom: 0.1em;
}

.ReportHeader {
    padding: 0em;
    margin-top:1.5em;
    margin-bottom:0em;
}

.ReportFooter {
    padding: 0em;
    margin-top:0em;
    margin-bottom:1.5em;
}

.ReportTableCSV {
    border-style: none;   /* none, double */
    border-width: 1px;
    margin-top: 1em;
}

.ReportTableXML {
    border-style: none;   /* none, double */
    border-width: 1px;
    margin-top: 1em;
}

.ReportTableEDI {
    border-style: double;   /* none, double */
    border-width: 1px;
    margin-top: 1em;
}


#tabs {
    margin-top: 1em;
}

#tabs li .ui-icon-close {
     float: left;
     margin: 0.4em 0.2em 0 0;
     cursor: pointer;
}

.MyButton {
    padding: .2em 1em !important;
}

.MyTabs {
    padding: .15em 1em !important;
}

/* horizontal panel ==============================*/

.flex-master {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex-grow: 1;
    height: 100%;
}

.page-header {                  /*Niet gebruikt*/
    flex: 0 0 auto;
    /* no grow no shrink */
    background: #535353;
    color: white;
    padding: 25px;
    font-size: 3em;
    font-weight: bold;
}

.page-content {
    /* grow and shrink vertically */
    flex: 1 1 auto;

    /* new horizontal flex container */
    display: flex;
    flex-direction: row;

    /* IMPORTANT: Required for FireFox
      to ensure vertical sizing is constrained.
      Not sure why this is required - it should
      be inherited.
    */
    overflow: auto;
}

.sidebar-left {
    /* should stay fixed except for resizing  */
    flex: 0 0 auto;
    width: 50%;         / was 40 *25px*/
    background: #F0F0F0;
    padding: 5px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
}

.splitter {
    /* should stay fixed size */
    flex: 0 0 auto;
    width: 5px;
    cursor: col-resize;
    background: #7A7A7A url(img/vertical.png) center center no-repeat;
}

.main-content {
    /* grow & shrink horizontally */
    flex: 1 1 auto;
    overflow:auto;
    background: white;
    padding: 5px;
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
}

/* start new splitter =========================*/

.splitter_panel_container {
    display: flex;
    flex-direction: row;
    border: 1px solid silver;
    overflow: hidden;
    height: calc(100% - 0.2em);         /* space main footer */
    /* avoid browser level touch actions */
    xtouch-action: none;
}

.splitter_panel_left {
    flex: 0 0 auto;
    /* only manually resize */
    display:inline-block;
    padding: 5px;
    word-break: break-all;
    width: 50%;
    /*white-space: nowrap;*/
    background: #F0F0F0;
    background: white;
    overflow-y: hidden;
    overflow-x: hidden;
    height: calc(100% - 0.2em);         /* space main footer */
    min-width: 5em;
    /*min-height: 200px;*/
    /*min-width: 150px;*/
}

.splitter_new {
    flex: 0 0 auto;
    width: 5px;
    background: #7A7A7A url(img/vertical.png) center center no-repeat;
    /*min-height: 200px;*/
    cursor: col-resize;
}

.splitter_panel_right {
    flex: 1 1 auto;
    /* resizable */
    display:inline-block;
    padding: 5px;
    word-break: break-all;
    width: 50%;
    height: calc(100% - 0.2em);         /* space main footer */
    min-width: 5em;
   /*min-height: 200px;*/
   /* min-width: 200px;*/
    background: white;
    overflow-y: hidden;
    overflow-x: hidden;
}


/* End new splitter =========================*/


.tabs {
    height: 100%;
    max-height: calc(100% - 65px);
    border-style: solid;
    border-width: 1px;
    margin-left: 0.2em;
    margin-right: 0.2em;
}

/* compare tabs different collor */
.tabs_compare {
    /*background: DEDEDE;*/
}



.file-tabs {
    height: 100%;
    max-height: calc(100% - 40px);
    padding: 0.6em 0.6em !important;
}

.file-container {
    height: calc(100% - 0.2em);
}

.source-header,
.report-header {
    height: 60px;
    border-style: solid;
    border-width: 1px;
    background: #e9e9e9;
}

.header_line_1 {
    text-align: right;
    padding-bottom: 5px;
}


.source-container,
.report-container {
    height: calc(100% - 60px);
    border-style: solid;
    border-width: 1px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.source-spinner {
    border-style: solid;
    /* border-top: 1px; */
    /* border-bottom: 1px; */
    border-width: 1px;
    border-left: 0px;
    border-right: 0px;
}


/* Tooltip selectable text =====================================*/

.my-tooltip {
    cursor: help;           /*pointer, help*/
    /*color: green !important;*/
    /*font-weight: bold;*/
    /*font-style: italic;*/
    text-decoration: none;
    border-bottom: 1px dashed black;            /*dotted, double dashed*/
}

.my-tooltip-error {
    background-color: yellow;
}

span.nl::before {             /* Simulate line break in Tooltip */
    content: '\a';
    white-space: pre;
}


/* Tooltip CCS based ==============================================*/


/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
    cursor: help;
}

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

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 325px;                     /* was 120 */
    /*max-width: 300px;*/
    background-color: white;          /* black */
    color: black;                     /* #fff */
    text-align: left;
    padding: 8px;                   /* 5px 0; */
    border-radius: 6px;
    border-style: solid;
    border-width: 2px;
    border-color: lightgrey;
    box-shadow: 1px 1px 1px  1px grey;
    /* Position the tooltip text next */
    /*
    position: absolute;
    z-index: 1;
    */

    /* Position the tooltip: bottom*/
    position: absolute;
    z-index: 999;          /* 1 */
    top: 175%;            /* 100% */
    left: 50%;
    margin-left: -20px;   /* Use half of the width (325/2), to center the tooltip */
}

/* changed format / position tooltip right side screen */
.tooltip .right {
    margin-left: -325px;   /* Use half of the width (325/2), to center the tooltip */
}


/* Start PowerdBy panel ===================================*/

.PowerdBy {
    text-align: right;
    padding-right: 10px;
    color: #B0B0B0;
    font-size: 50%;
}

a.PowerdByLink:link {
    color:#575757;
    text-decoration: none;
}

a.PowerdByLink:visited {
    color:#B0B0B0;
}

a.PowerdByLink:hover {
    font-weight: bold;
    color:#575757;
    font-size:175%;            /* 130% */
    /*text-decoration: underline;*/
}

a.PowerdByLink:active {
    color:#575757;
    text-decoration: none;
}

.VersionNumberLeft {
    text-align: left;
    font-size: 50%;
    padding-left: 10px;
    color: #B0B0B0;
}


/* Compare SummaryTable */
.SummaryTable_red {
    background-color: #F55243;
}
.SummaryTable_green {
    background-color: #72F872;
}