*
{
    /*box-sizing: border-box;
    -moz-box-sizing: border-box;*/
    padding: 0;
    margin: 0;
    border: 0;
}

html, body
{
    white-space-collapse: discard;
    white-space: nowrap;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    overflow: hidden;
}

div, iframe, body, html
{
    white-space:nowrap;
}

#root
{
    width: 100%;
    height: 100%;
    min-height: 100%;
}

#bottomFrameset
{
	width: 100%;
    /* this is just the initial value of 100%, the reportFrame taking up the whole application space
     * the value will be overridden by dynamically created rules in Layout.js
     * and will look like this calc(100%-60px), where 60px would be the height of the top frame
     */
	height: 100%; 
}

#topFrame
{
    width:100%;
    /* initial height; because the report frame will take all the available screen estate; 
     * the runtime value usually is 60px with toolbar and signout line visible
     * or 30px if only the sign-out line is visible
     */
    height:0; 
}


#leftFrame
{
	display: inline-block;
    /*
     * height is applied through the "#bottomFrameset>.frameContainer" rule
	 * height: 100%;
     */
    /*
     * initial width of the left frame is 0 (zero)
     */
	width: 0;
}

#splitter
{
	display: inline-block;
    /*
     * height is applied through the "#bottomFrameset>.frameContainer" rule
	 * height: 100%;
     */
    /*
     * initial width of the left frame is 0 (zero)
     * default width of the splitter is: 10px
     */
	width: 0;
}

#reportFrame
{
	display: inline-block;
    /*
     * height is applied through the "#bottomFrameset>.frameContainer" rule
	 * height: 100%;
     */
    /*
     * initial width is 100%, completely filling the #bottomFrameset
     * dynamic value will look like this: calc(100% - 10px - 100px);
     * where 10px would be the current width of the splitter frame
     * and 100px would be the current width of the left frame (ReportPane)
     */
	width: 100%;
}

#bottomFrameset>.frameContainer 
{
    /*
     * height is 100%, completely filling the #bottomFrameset
     */
	height:100%;
}


#historyFrame
{
	visibility: hidden;
    position:absolute;
    left:-10000px;
    top:-10000px;
    width:0;
    height:0;
    border: none;
}

#downloadHelper
{
	visibility: hidden;
    position:absolute;
    left:-10000px;
    top:-10000px;
    width:0;
    height:0;
    border: none;
}

#parentProxyFrameset
{
	visibility: hidden;
    position:absolute;
    left:-10000px;
    top:-10000px;
    width:0;
    height:0;
}

#parentProxyFrame
{
	visibility: hidden;
    position:absolute;
    left:-10000px;
    top:-10000px;
    width:0;
    height:0;
    border: none;
}

#emptyFrame
{
	visibility: hidden;
    position:absolute;
    left:-10000px;
    top:-10000px;
    width:0;
    height:0;
    border: none;
}

.frameContainer>.contentFrame
{
	width:100%;
	height:100%;
    border: none;
    overflow: hidden;
}

.frameContainerVeil {
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    position: absolute;
}