body {
	margin:0;
	padding:0;
	
    /* background by Sarah Backhouse, http://lea.verou.me/css3patterns/ */

    background-color: #fff; 
    background-image: 
    linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
    linear-gradient(#eee .1em, transparent .1em);
    background-size: 100% 1.2em;
    
    
	color: #6F7072;
	font-family: Helvetica,Arial,sans-serif;
	font-size: 75%;

    overflow-y : hidden;
    margin-left: 90px;
}


#bar {
	height: 0px;
	padding-top: 4px;
    background: transparent;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	z-index: 1000;
	padding-left: 12px;
	font-size: 16pt;
	color: black;
}

#message {
	background: white;
	color: #3875d7;
}

.verbatim {
	padding: 4px;
	border: #999999 1px solid;
    border-radius: 10px;
    font-family: Courier New, monospace;
}
		
#sidebar {
	float:left;
	width:200px;
	padding:10px;
	position: fixed;
	top: 60px;
	left: 90px;
	padding-top: 7px;
}
	
.chapter-link {
	display: block;
	padding-top: 2px;
	padding-bottom: 2px;
}

.chapter h3 {
	color: #999;
	padding-top: 15px;
}
	
.chapter a:link, .chapter a:visited, .chapter a:active {
	color: #41C0D3;
	text-decoration: none;
}

.chapter a:hover {
	text-decoration: underline;
}
	
#sidebar h2 {
	padding-top: 0px;
	padding-bottom: 10px;
}
	
h2 {
	font-weight: normal;
}
	
.chapter h2 {
	line-height: 130%;
}

#main {
	float:right;
	padding:10px;
	padding-top: 0px;
	margin-top: 7px;
	margin-right: 20px;
	margin-bottom: 40px;
	background-color: white;
	z-index: -20;
	overflow: auto;
	border: #999999 1px solid;
    border-radius: 10px;
}

.chapter {
	line-height: 140%;
	display:none;
	background-color: transparent;
	padding: 10px;
	padding-left: 0px;
	margin-left: 0px;
	margin-top: 0px;
	padding-top: 0px;
	margin-bottom: 0px;
	padding-bottom: 0px;
}
	
#scrollarea {
	height: 50%; 
	width: 200px; 
	overflow-y: auto; 
	overflow-x: hidden; 
	border: #999999 1px solid;
    border-radius: 10px;
    padding: 5px;
    padding-left: 10px;
    padding-top: 10px;
    background-color: white;
    margin-top: 0px;
}

	
#navigation a:link {
	text-decoration: none;
	padding-top:10px;
	padding-bottom: 10px;
	color: black;
}
	
#navigation a:visited, #index a:visited {
	color: black;
}
	
#navigation a:hover, #index a:hover {
	color: black;
}
	
#navigation ul {
	background-color: white;
}
	
#navigation li {
	line-height: 150%;
	list-style-type: none;
	margin-left: 0px;
}

#navigation.treeview {
	margin-top: 12px;
}

.chapter ul, .chapter ol {
	padding-top: 0px;
	margin-top: 0px;
	margin-bottom: 10px;
}
	
.treeview-gray {
	margin-left: -16px;
}

.treeview-gray li { 
	background-image: none; 
	border-bottom: white 1pt solid;
	padding-top:0px;
	padding-bottom:0px;
}

.treeview-gray li:first-child { 
	border-top: white 1pt solid;
}

.treeview-gray li li:first-child { 
	border-top: none;
}

.treeview-gray li  li {
	border-bottom: none;
}

.treeview-gray .hitarea, .treeview-gray li.lastCollapsable, .treeview-gray li.lastExpandable { 
	background-image: none; 
} 

table {
	border-collapse: collapse;
}

.table {
	margin-bottom: 30px;
}

table td {
	border: 1pt #666666 solid;
	line-height: 14pt;
}

/* Fix for comment panel table cells - remove dark background */
.comment-panel table td {
	background-color: transparent !important;
	border: none !important;
}


td p {
	margin: 0px;
	padding: 0px;
}

h4 {
	padding-bottom: 0px;
	margin-bottom: 0px;
}

#document-description-text {
    display: none;
    margin-top: 20px;
    margin-bottom: 20px;
    color: white;
}

#document-description {
    color: white;
    font-weight: bold;
}

#sidebar h2 {
    padding-bottom : 0px;
    margin-bottom : 5px;
}

.margin {
    padding-right: 50px;
    margin-left: 56px;
}

.no-margin {
    padding-right: 50px;
    margin-left: 0px;
}

 .toc-changed-marker {
     color:red;
     font-weight:bold;
     font-size: larger;
 }
 
 
 #main li p {
     margin: 0pt;
     padding: 0pt;
 }


#sidebar .toc-header {
    margin-bottom: 10px;
    margin-top: -10px;
}

.chapter-toc {
    display: block;
    font-size: 9pt;
    text-decoration: none;
    line-height: 150%;
    color: #999;
    margin-left: 55px;
}

.chapter-toc:active, .chapter-toc:link, .chapter-toc:hover, .chapter-toc:visited {
    color: #999 !important;
}

.chapter-toc:hover .text {
	text-decoration:underline !important;
}

a.info{
    position:relative; 
    z-index:24; 
    color: black;
	border: none;
	background-color: transparent;
	line-height: 100%;
}

a.info:hover{
    z-index:25; 
}

a.info span{
    display: none
}

.comment {
	cursor: pointer;
}
.comment-panel { 
    color: gray;
    display:block;
    position:fixed;
    bottom:22px; 
    left:100px; 
    border:1px solid #999;
    border-radius: 6px;
	background-color: white;
    text-align: left;
    padding: 4px;
    font-size:8pt !important;
    line-height:9pt !important;
    background-color: #f3f3f3;
 }   
 
 .comment-entry * {
 	padding-top:0px;
 	margin-top:0px;
 }
 
 .comment-entry:not(:first-child) {
 	border-top: 1pt #666 dashed;
 	padding-top:4px;	
 }

.comment-entry .content  {
	border-top: none !important;
	background-color: transparent !important;
	padding-left: 0px !important;
}

a.info.clicked .menu { 
    color: gray;
    display:block;
    position:absolute;
    top:3em; 
    right:-10px; 
    width:100px;
    border:1px solid #D8000B;
	background-color: #f3f3f3;
    text-align: left;
    padding: 4px;
    font-size:10pt;
}

a.info.clicked .tooltip { 
    display: none
}

a.info:not(.clicked):hover .tooltip { 
    color: gray;
    display:block;
    position:absolute;
    top:25px; 
    right:-8px; 
    width:180px;
    border:1px solid #D8000B;
	background-color: white;
    text-align: center;
    padding: 2px;
    padding-left: 5px;
    font-size:10pt !important;
    line-height:10pt !important;
 }   
 
.toc-line-descendant-chapter-changed .text {
    color:#03864A !important;
}

.toc-line-chapter-changed .text {
    color:#03864A !important;
}

.toc-line-chapter-deleted .text  {
    color:#B2B2B2 !important;
}    

.toc-line-chapter-new .text {
    color:#3C3CFF !important;
}

.toc-line-chapter-not-changed .text {
    color:black !important;
}

#toc-links {
    position: absolute;
    top: 5px;
    left: 10px;
    right: auto;
    z-index: 10000;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #CBD5E0;
    border-radius: 12px;
    padding: 12px 15px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    user-select: none;
    transition: all 0.3s ease;
    width: auto;
    min-width: 200px;
    max-width: calc(200px - 30px);
}

#toc-links td {
	border: none;
	padding: 0;
}

#toc-links tr {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#collapse-link, #index-link {
	text-decoration: none;
	cursor: pointer;
	color: #64748B;
	font-weight: 500;
	font-size: 9px;
	padding: 6px 9px;
	border-radius: 4.5px;
	transition: all 0.2s ease;
}

#collapse-link:hover, #index-link:hover {
	background: #F1F5F9;
	color: #1A202C;
}

/* Responsive behavior for mobile sidebar collapse */
@media (max-width: 768px) {
    #toc-links {
        display: none;
    }
    
    .design-toggle {
        display: none !important;
    }
}

.cover-link {
    font-weight: 600;
    color: #4A5568;
    line-height: 1.5;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 9px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.375px;
    padding: 6px 9px;
    border-radius: 4.5px;
    transition: all 0.2s ease;
    display: inline-block;
}

.cover-link:hover {
    color: #1A202C !important;
    background: #F1F5F9;
    text-decoration: none;
    cursor: pointer;
}

.cover-logo {
    margin-top: 50px;
}

#shown-element-index {
    padding-left: 5px;
    padding-right: 5px;
    font-size: 12pt;
    font-weight: bold;
    background-color: #f3f3f3;
}

a.info.menu:hover span { 
    color: gray;
    display:block;
    position:absolute;
    top:17px; 
    left:-100px; 
    width:120px;
    border:1px solid black;
	background-color: white;
    text-align: center;
    padding: 2px !important;
    padding-left: 5px;
    font-size:10pt;
    border-radius: 6px;
}

a.info.appendix:hover span { 
    color: gray;
    display:block;
    position:fixed;
    bottom:110px; 
    left:70px; 
    width:200px;
    border:1px solid black;
	background-color: white;
    text-align: center;
    padding: 2px !important;
    padding-left: 5px;
    font-size:10pt;
    border-radius: 6px;
}

#pdf-appendix-2.info.appendix:hover span {
	bottom:160px;
}

#pdf-appendix-3.info.appendix:hover span {
	bottom:210px;
}

#pdf-appendix-4.info.appendix:hover span {
	bottom:260px;
}

a.info.menu.bbutton:hover span { 
    color: gray;
    display:block;
    position:fixed;
    top:84px; 
    left:18px; 
    width:120px;
    border:1px solid black;
	background-color: white;
    text-align: center;
    padding: 2px !important;
    padding-left: 5px;
    font-size:10pt;
    border-radius: 6px;
}

.chapter.first {
    margin-left: -10px;
    padding-left: 10px;
    height: 100%;
    background-color: white;
}


mark {
    background-color: #AAF0D1;
}



.toc-entry span:hover {
    text-decoration: underline;
}

.buttons ul { 
	list-style-type: none; 
	padding:15px;
	padding-top: 0px; 
} 

.buttons li { 
	display : inline; 
	padding:8px; 
	margin:0px; 
}

#nav {
	position: fixed;
	right: 0px;
	top: 0px;
}

#logo-image {
	position: fixed;
	left: 4px;
	bottom: 22px;
	width: 54px;
	border: #999999 1px solid;
    border-radius: 6px;
    padding: 4px;
    margin-left: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

#pdf-appendix-1 {
	position: fixed;
	left: 24px;
	bottom: 120px;
    margin-left: 4px;
}

#pdf-appendix-2 {
	position: fixed;
	left: 24px;
	bottom: 170px;
    margin-left: 4px;
}

#pdf-appendix-3 {
	position: fixed;
	left: 24px;
	bottom: 220px;
    margin-left: 4px;
}

#pdf-appendix-4 {
	position: fixed;
	left: 24px;
	bottom: 270px;
    margin-left: 4px;
}

#attachments-label {
	transform: rotate(270deg);
	transform-origin: left bottom 0;
	position: fixed;
	left: 24px;
	bottom: 130px;
    padding-top: 40px;
	letter-spacing: 10px;
	font-weight: bold;
}

#backbutton {
	position: fixed;
	left: 22px;
	top: 60px;
}

#header-text {
	padding-left: 16px;
	font-weight:normal;
	letter-spacing: 4px;
}

#header h1 {
	background-color: #f3f3f3;
	margin-right: 10px;
	border-radius: 10px;
}

.toc-entry .number, .toc-entry .text, .chapter-toc .number, .chapter-toc .text {
	display: inline !important;
}

h2 .number, h2 .text {
	display: inline !important;
}

.CmdStep-Table td {
	border:none !important;
}

.CmdStep-Table td {
	padding-left: 10px;
}
.CmdStep-Table td:first-child {
	background-color: #999;
	font-weight: bold;
	font-size: larger;
	padding-right: 5px;
	color:white;
	padding-left: 4px;
	padding-top: 2px;
	width: 40px !important;
	max-width: 40px !important;
}

/* Specific rule for CmdStep-Icon cells */
.CmdStep-Table td.CmdStep-Icon {
	width: 40px !important;
	min-width: 40px;
	max-width: 40px !important;
}

/* Content cell takes remaining space */
.CmdStep-Table td.CmdStep-Content {
	width: auto;
	background-color: #f5f5f5;
	color: #333;
}
.CmdStep-Table {
	margin: 0;
	padding: 0;
	border-collapse: collapse;
}

.CmdStep-Icon {
	margin: 0;
	padding: 0;
}

.cover-footer {
	margin-top: 20px;
}

#main thead td {
	font-weight: bold;
}

.margin {
	margin-top: 10px;
}

#site-title {
	transform: rotate(270deg);
	transform-origin: left bottom 0;
	font-size: 18pt;
	position: fixed;
	top: 590px;	
	left: 48px;
	letter-spacing: 8px;
	z-index: -500;
}

#date-version {
	position: fixed;
	top:10px;
	left: 3px;
	font-size: 8pt;
	line-height: 70%;
	text-align: center;
	background-color: #999;
	color: white;
	padding: 5px;
}
.toc-selected { font-weight:bold; }

#page-browser-arrows {
	position: fixed;
	bottom: 146px;
	right: 38px;
	border-top: #999999 1px solid;
	border-left: #999999 1px solid;
	border-radius: 10px;
	background-color: white;
	padding-top:6px;
}

#page-browser-arrows td {
	border: none;	
	padding: 1px;
}

#page-browser-arrows td a:hover {
	background-color: #f3f3f3;	
}

.searchfield {
	border-radius:10px !important;
    -moz-border-radius:10px !important;
    -webkit-border-radius:10px !important;
    top:-8px !important;
    position: relative;
    text-align: right;
    padding-right: 10px;
    padding-left: 5px;
    background-color: white;
}

#searchpanel {
	width:382px;
	height:200px;
	position:fixed;
	background-color: #f3f3f3;
	border-left:black 1pt solid;
	border-bottom:black 1pt solid;
	border-radius:10px !important;
    -moz-border-radius:10px !important;
    -webkit-border-radius:10px !important;
    	overflow-y: auto; 
	overflow-x: hidden;
    top: 70px;
    right: 22px;
    z-index: 400;
}

#searchpanel a:link, #searchpanel a:visited, #searchpanel a:active {
	color: #41C0D3;
	text-decoration: none;
}

#searchpanel li:nth-child(odd){
    background-color: white;
    padding-top: 3px;
    padding-bottom: 3px;
}

#searchpanel a:hover {
	text-decoration: underline;
}

#searchpanel ul {
	list-style-type: none;
	padding:0px;
}

#searchpanel li {
	padding-left: 5px;
	padding-right: 5px;
}

#searchpanel p {
	padding:0px;
	line-height: 110%;
}

#text-type-switch {
	padding-top: 8px;
}

#paypal-button {
	position: fixed;
	top:85px;
	right:70px;
	display:none;
}

.attachment-list {
	margin-top: 4px;
	background-color: #fafafa;
	margin-bottom: 4px;
	padding:0px;
}

.attachment-list ul {
	margin-left: 0px;
}

.rejection-message {
	color:red;
	background: white;
	width: 99%;
	border: 1px red solid;
	padding: 2px;
	margin-top: 2px;
}

.index-group-title {
	font-weight: bold;
	font-size: larger;
	margin-top: 10px;
}

.index-first {
	
}

.index-second {
	margin-left: 10px;
}

#index a:link,#index a:active,#index a:visited {
	text-decoration: none;
	color: #41C0D3;
}

#index a:hover {
	text-decoration: underline;
}

#index {
	margin-top: 20px;
}

.info-message-logo,
.ops-message-logo  {
	background-image: url(/editor/res/images/tui_logo.png) !important;
	background-repeat: no-repeat !important;
	width: 10% !important;
	height: 100px !important;
	background-position: center center !important;
}

td .p {
	margin-bottom: 0px;
}

.code-snippet-button {
	position: absolute;
	top: 3px;
	right: 3px;
	cursor: pointer;
}

.code-snippet-button a.info.menu:hover span { 
    color: gray;
    font-family: Helvetica,Arial,sans-serif;
    display:block;
    position:absolute;
    top:-30px; 
    left:-40px; 
    width:60px;
    border:1px solid black;
	background-color: white;
    text-align: center;
    padding: 2px !important;
    padding-left: 5px;
    font-size:10pt;
    border-radius: 6px;
}

#comment-overview {
	z-index: 100;
	width: 100%;
	height: 100%;
	background-image: url(/images/overlay.png);
	position: fixed;
	top:0px;
	left:0px;
}

#comment-overview-panel {
	width: 640px;
    height: 480px;
    margin: auto auto;	
    border: #999999 1px solid;
    border-radius: 10px;
    top: 50%;
    left: 50%;
    margin-top: -240px; 
    margin-left: -320px;
    position: absolute;
	background-color: #f3f3f3;
}

#comment-overview-panel .scroll-panel {
	overflow-y: auto; 
	overflow-x: hidden; 
	height: 420px;
	background-color:white;
}

#comment-overview-panel .button {
    color: #747575;
    font-weight:normal;
    transition: background .2s ease-out, color 0.2s ease-in;
    padding: 4px;
    text-decoration: none;
    border: 0px solid;
    border-radius: 10px; 
    position: absolute;
	bottom: 2px;
	right: 10px;
	cursor: pointer;
	font-size:10pt;
}

#comment-overview-panel .content {
	width: 640px;
}
	
#comment-overview-panel .button:hover {
    color: black;
    background-color: #C8C8C8;
    text-shadow: none;
}

#comment-overview-panel .header {
	padding: 6px;
}

#comment-overview-panel .header label:hover,
#comment-overview-panel .header input:hover {
	text-decoration: underline;
	cursor:pointer;
}

#comment-overview .tree {
	list-style-type: none;
}

#comment-overview .tree li {
	line-height: 150%;
}

#comment-overview .tree .comment-entry li {
	line-height: 110%;
}

#comment-overview .tree .comment-entry p {
	line-height: 120%;
}

#comment-overview .tree .comment-entry p {
	margin: 0; padding: 0;
    padding-bottom: 4px;
}


#comment-overview .tree .comment-entry {
	padding: 0px !important;
	border: transparent 1pt solid !important;
	background-color: #F6F6F6 !important;
	box-shadow: 5px 5px 3px #888888 !important;
	margin-top:2px !important;
	color: #666666 !important;
	margin-bottom: 16px !important;
	font-weight: normal !important;
	font-family: Arial !important;
	font-size: 9pt !important;
	line-height: 110% !important;
    border-radius: 10px !important;
    width: 300px !important;
    white-space: normal !important;
}

#comment-overview .tree .comment-entry div:first-child {
	background-color: #c8ecf8 !important;  
	padding-top: 2px !important;
	padding-bottom: 3px !important;
	padding-left: 5px !important;
	margin: 0px !important;
}

#comment-overview .tree .chapter-link1 {
	font-weight: bold;
}

#comment-overview .tree .comment-entry .content {
	padding-left: 5px;
	width: 295px;
}

#comment-overview .tree .comment-entry .show-attachments {
	display: none !important;
}

#comment-overview .tree a {
	text-decoration: none;
}

.buttons .info.menu {
	text-decoration: none;
}

.diff-inserted.activated {
	color: green !important;
	text-decoration: underline;
}

.fig-inserted.activated {
	border-right: green 10px solid;
	border-left: green 10px solid;
	padding-left: 10px;
	padding-right: 10px;
}

.fig-deleted {
	border-right: red 10px solid;
	border-left: red 10px solid;
	padding-left: 10px;
	padding-right: 10px;
	display:none;
}

.diff-symbol-inserted.activated {
	padding-right: 5px;
	padding-left: 5px;
	background-color: green;
}

.diff-symbol-deleted {
	padding-right: 5px;
	padding-left: 5px;
	background-color: red;
	display:none
}

.diff-deleted {
	color: red !important;
	text-decoration: line-through;
	display:none
}

.fig-deleted.activated  {
	display:block;
}

.diff-symbol-deleted.activated, .diff-deleted.activated {
	display: inline;
} 

#toc-panel *[data-diffing='changed'].activated * {
	color: orange !important;
	text-decoration: underline;
}

#topic-version {
	position: absolute;
	right: 40px;
	top:68px;
	padding-right: 5px;
	padding-left: 5px;
	background-color: #999;
	color: white;
}