/*Overlay for making the screen gray when we submit data on a page - IE after Login or Submitting Data.*/
/* https://stackoverflow.com/questions/28931791/jquery-how-to-grey-out-the-background-while-showing-the-loading-icon-over-it */
.overlay {
    background: #e9e9e9;
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.5;
}


body {
    padding-top: 50px;
    padding-bottom: 20px;
    padding-left: 15px;
    padding-right: 15px;
    /* Form App POC */
    height: 100%;
    pointer-events: inherit;
    /*
    height: 100%;
    */
    /*display: block;*/
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/*#daBody {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
}*/


/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
/*input,
select,
textarea {
    max-width: 280px;
}*/


/* BOOTSTRAP TABS (THIS IMPACTS THE TOP NAVIGATION MENU) */
.nav-item {
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 1px;
    padding-right: 1px;
    /*border:double;*/
}

/*EXPORT EXCEL BUTTON*/
.btn {
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 1px;
    padding-right: 1px;
}

/*https://stackoverflow.com/questions/39892487/how-to-change-side-and-direction-arrow-in-dropdown-submenu*/


/*BOOTSTRAP 4 MENUS*/

/* A Per Jsfiddle https://jsfiddle.net/stefanl/rge6dzhu/2/ */

.dropdown-submenu-unknown {
    position: relative;
    z-index: 3 !important;
}

/* This crams everythiing  */
/* And still remains looking nicely */
/* 1024px wide or less*/
@media only screen and (max-width: 1024px) {
    .dropdown-item {
        min-width: 0px;
        min-height: 0px;
        padding: 0px 10px 0px 10px;
    }

}

/*600px wide or less*/
@media only screen and (max-width: 600px) {
    .dropdown-item {
        min-width: 0px;
        min-height: 0px;
        padding: 0px 10px 0px 10px;
        font-size: 80%;
    }
}

.dropdown-submenu {
    position: relative;
    padding: 0px 0px 0px 0px;
}

    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 80%;
        margin-top: -6px;
        margin-left: -1px;
        -webkit-border-radius: 0 6px 6px 6px;
        -moz-border-radius: 0 6px 6px;
        border-radius: 0 6px 6px 6px;
        /*  */
        min-width: 0px;
        min-height: 0px;
    }

    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }

    /* Menu Arrow Direction to Right  */
    .dropdown-submenu > a:after {
        display: block;
        content: " ";
        float: right;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 5px 0 5px 5px;
        border-left-color: #ccc;
        margin-top: 5px;
        margin-right: -10px;
    }

/*.dropdown-submenu:hover > a:after {
        border-left-color: #fff;
    }
    .dropdown-submenu.pull-left {
        float: none;
    }
        .dropdown-submenu.pull-left > .dropdown-menu {
            left: -100%;
            margin-left: 10px;
            -webkit-border-radius: 6px 0 6px 6px;
            -moz-border-radius: 6px 0 6px 6px;
            border-radius: 6px 0 6px 6px;
        }*/


/* LEFT MENU ADJUSTMENTS */

.dropdown-submenu-left {
    position: relative; /* Relative to the Previous Menu*/
}

    .dropdown-submenu-left > .dropdown-menu {
        border-radius: 6px 0px 6px 6px;
        left: auto; /* KEEP THIS Auto AS IS! */
        margin-left: 10px;
        right: 80%; /* Causes an overlap to the rigt edge   98%;*/
        top: -15px;
        /*padding: 0px 0px 0px 0px;*/
        margin-left: 0px;
        min-width: 0px;
        min-height: 0px;
        /*margin-top: -6px;
        margin-left: -1px;
        -webkit-border-radius: 0 6px 6px 6px;
        -moz-border-radius: 0 6px 6px;
        border-radius: 0 6px 6px 6px;*/
    }

    .dropdown-submenu-left:hover > .dropdown-menu {
        display: block;
    }

    .dropdown-submenu-left > a:after {
        display: block;
        content: " ";
        float: right; /*right;*/ /* Alligns the Arrow left*/
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 5px 5px 5px 0; /*5px 0 5px 5px;*/
        border-left-color: #ccc;
        margin-top: 5px;
        margin-right: -10px;
    }


    .dropdown-submenu-left:hover > a:after {
        border-left-color: #fff;
    }

    .dropdown-submenu-left.pull-left {
        float: none;
    }

        .dropdown-submenu-left.pull-left > .dropdown-menu {
            left: -100%;
            margin-left: 10px;
            -webkit-border-radius: 6px 0 6px 6px;
            -moz-border-radius: 6px 0 6px 6px;
            border-radius: 6px 0 6px 6px;
        }

/* FIN ADJUSTMENTS*/

/* DRILLDOWN REPORTS */
#daTreeStructure {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    overflow-x: scroll; 
    overflow-y: scroll;
    height: 70vh;  
    /*height: 500px;*/
}

/* This ensures that the Gutter resizes for the Treestrucure */
/* SL 2020-09-22 */
/* SL 2020-09-23 -> this solves the problem with the resizing Abstract Boxes */
#daTreeStructureAbstraction, #ReportContentsAbstraction {
    overflow-x: hidden;
    /*border: dashed;*/
}

#daTreeStructure, #ReportContents {
    /*border: dotted;*/
}
/*
    https://stackoverflow.com/questions/53612766/how-to-get-a-div-to-fill-the-remainder-of-the-screen-height
    https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space?page=1&tab=active#tab-top
    https://jsfiddle.net/przemcio/xLhLuzf9/3/
*/
#ReportContents thead td {
    position: sticky;
    top: 0;
}

/* Flex Layout for the drilldown and report */
.flex {
    display: flex;
    flex-direction: row;
}



#ReportContents {
    /*border:double;*/
    padding-top: 0px; /** Fixes the Scroll Issue*/
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    overflow-x: scroll;
    overflow-y: scroll;
    height: 70vh;
    /*height: 500px;*/
}

#nav-tab {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

#nav-tabContent {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.flatRow {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

#daHeader {
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 1px;
    padding-right: 1px;
}

#daHeaderAbstraction {
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 1px;
    padding-right: 1px;
    height: 100%
}

#daTabStructure {
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 1px;
    padding-right: 1px;
}

#daHeaderRow {
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 1px;
    padding-right: 1px;
    /* This is to position the Header just under the navigation Bar*/
    margin-top: 60px;
    margin-left: 15px;
    margin-right: 15px;
    z-index: 2
    /*height:100%;*/
}


/* Set Padding for the TABS for the Reports :) */
/* SL 02 October 2019 */
.nav-contact-tab {
    padding-top: 1px;
    padding-bottom: 1px;
    /*background-color: saddlebrown !important;*/
}


/* Attenpt to change the active Tab Colour */
/*
a {
    color: green !important;
    background-color: red !important;
}
*/

.yyyy {
    /*color: pink !important;*/
    text-decoration: none;
}

/* This works!*/
.nav-link:hover {
    /* color: blue !important; */
}




h2 {
    /*background-color: green;*/
    /*text-align: center;*/
}


/*.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}
.dropdown-submenu {
    position: relative;
}
    .dropdown-submenu > .dropdown-menu {
        top: 100%;
        left: 50%;
        margin-top: -6px;
    }*/