body
{
    /* Take up the full page */
    width: 100%;
    height: 100%;
    margin: 0px;

    background-color: #999;

    touch-action: none;
}


/* Override default container style to remove 3D effect */
.Container
{
    border: none;
    box-shadow: none;
}


/* Override default edit box style to remove 3D effect */
.EditBox
{
    border: none;
    box-shadow: none;
    width:200;
}


@font-face
{
    font-family: "LocalFiraCode";
    src:url("Fonts/FiraCode/FiraCode-Regular.ttf");
}

.ConsoleText
{
    overflow:auto;
    color: #BBB;
    font: 10px LocalFiraCode;
    margin: 3px;
    white-space: pre;
    line-height:14px;
}


.PingContainer
{
    background-color: #F55;
    border-radius: 2px;

    /* Transition from green is gradual */
    transition: background-color 0.25s ease-in;
}


.PingContainerActive
{
    background-color: #5F5;

    /* Transition to green is instant */
    transition: none;
}


.GridNameHeader
{
    position: absolute;
    display: inline-block;
	white-space: nowrap;
    overflow: hidden;
    text-align: center;

	background:rgb(48, 48, 48);

	color: #BBB;
	font: 9px Verdana;

	padding: 1px 1px 1px 2px;
	border: 1px solid;

	border-top-color:#555;
	border-left-color:#555;
	border-bottom-color:#111;
	border-right-color:#111;
}

.TimelineBox
{
    /* Following style generally copies GridRowCell.GridGroup from BrowserLib */

    padding: 1px 1px 1px 2px;
    margin: 1px;

    border: 1px solid;
    border-radius: 2px;
    border-top-color:#555;
    border-left-color:#555;
    border-bottom-color:#111;
    border-right-color:#111;

    background: #222;

    font: 9px Verdana;
    color: #BBB;
}
.TimelineRow
{
    width: 100%;
}
.TimelineRowCheckbox
{
    width: 12px;
    height: 12px;
    margin: 0px;
}
.TimelineRowCheck
{
    /* Pull .TimelineRowExpand to the right of the checkbox */
    float:left;

    width: 14px;
    height: 14px;
}
.TimelineRowExpand
{
    /* Pull .TimelineRowLabel to the right of +/- buttons */
    float:left;

    width: 14px;
    height: 14px;
}
.TimelineRowExpandButton
{
    width: 11px;
    height: 12px;

    color: #333;

    border: 1px solid;

    border-top-color:#F4F4F4;
    border-left-color:#F4F4F4;
    border-bottom-color:#8E8F8F;
    border-right-color:#8E8F8F;

    /* Top-right to bottom-left grey background gradient */
    background: #f6f6f6; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #f6f6f6 0%, #abaeb2 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#f6f6f6), color-stop(100%,#abaeb2)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  #f6f6f6 0%,#abaeb2 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  #f6f6f6 0%,#abaeb2 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  #f6f6f6 0%,#abaeb2 100%); /* IE10+ */
    background: linear-gradient(135deg,  #f6f6f6 0%,#abaeb2 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#abaeb2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

    text-align: center;
    vertical-align: center;
}
.TimelineRowExpandButton:hover
{
    border-top-color:#79C6F9;
    border-left-color:#79C6F9;
    border-bottom-color:#385D72;
    border-right-color:#385D72;

    /* Top-right to bottom-left blue background gradient, matching border */
    background: #f3f3f3; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #f3f3f3 0%, #79c6f9 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#f3f3f3), color-stop(100%,#79c6f9)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  #f3f3f3 0%,#79c6f9 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  #f3f3f3 0%,#79c6f9 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  #f3f3f3 0%,#79c6f9 100%); /* IE10+ */
    background: linear-gradient(135deg,  #f3f3f3 0%,#79c6f9 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#79c6f9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.TimelineRowExpandButtonActive
{
    /* Simple means of shifting text within a div to the bottom-right */
    padding-left:1px;
    padding-top:1px;
    width:10px;
    height:11px;
}
.TimelineRowLabel
{
    float:left;

    width: 140px;
    height: 14px;
}

.TimelineContainer
{
}
.TimelineLabels
{
    padding: 0;
    margin: 0;
    border: 0;
    overflow-y: hidden;
}
.TimelineLabelScrollClipper
{
    padding: 0;
    margin: 0;
    border: 0;
    overflow-y: hidden;
}

.DropZone
{
	/* Covers the whole page, initially hidden */
	box-sizing: border-box;
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;

	/* On top of everything possible */
	z-index: 99999;

	/* Styling for when visible */
	background: rgba(32, 4, 136, 0.25);
	border: 3px dashed white;

	/* Styling for text when visible */
	color: white;
	font-family: Arial, Helvetica, sans-serif;
	font-size: xx-large;
	align-items: center;
	justify-content: center;
}