/*New Starting CSS START*/
html {
	height: 100%;
	overflow-x: hidden;
}

body {
	margin: auto;
	padding: 0px;
	background-color: grey;
	border: 0px;
	max-width: 600px;
	height: 100%;
}
#content {
	background-color: #ffffff;
	width: 100%;
	/* Code for dynamic height START */
	height: 100%;
	display: flex;
	flex-direction: column;
	/* Code for dynamic height END */
	position: relative;
}
#main {
    padding: 4px 6px;
    clear: both;
    height: 100%;
	width: calc(100% - 30px);
	margin:	10px;
    flex: 1;
    overflow: auto;
    /*background-image: linear-gradient(transparent, white 100%);*/
    background-repeat: no-repeat;
    background-size: 65%;
    background-position: center;
	background-color: white;
	border-radius: 20px;
}
/*New Starting CSS END*/
#viewer {height: 100%;}
form {margin:0px;padding:0px;}
ul {margin-bottom:0;padding:0px;margin-left:20px;}
#banner {
    height: 70px;
    background-color: #ffffff;
}
.bannerlogo img {
    height: 30px;
    padding-top: 12px;
    padding-left: 12px;
    display: none;
}
#banner .bannerlogo
{float:left;position:relative;clear:both;}
#banner .bannertext {
    font: normal bold 24px HK Grotesk, sans-serif;
    color: #EEEEEE;
    text-align: center;
    padding-top: 0px;
}
#vwbanner
{height:69px;background-color:#9caace;}
#vwbanner .bannerlogo
{float:left;position:relative;clear:both;}
#vwbanner .bannertext
{font:normal bold 12pt HK Grotesk, sans-serif;color:#000000;text-align:center;padding-top:25px;}
#menu {
    height: 35px;
    background-color: #ee4135;
    clear: both;
    position: absolute;
    right: 5px;
    top: 15px;
    width: 270px;
}
#menu #menul {float:left;margin-top:2px;}
#menul a, #menul span {
    font: normal bold 10pt HK Grotesk, sans-serif;
    color: black;
    text-align: left;
    text-decoration: none;
    margin-left: 4px;
}
#menul .sel
{font:normal bold 10pt HK Grotesk, sans-serif;color:#00ffff;text-align:left;text-decoration:none;margin-left:4px;}
#menul img {vertical-align:text-bottom !important;}
#menul a:hover {color:#f79218;}

#menu #menur {
    float: right;
}
#menur a, #menur span {
    font: normal bold 10pt HK Grotesk, sans-serif;
    color: #6A6A6A;
    text-align: right;
    text-decoration: none;
    margin-right: 4px;
    float: right;
}
#menur .sel
{font:normal bold 10pt HK Grotesk, sans-serif;color:#00ffff;text-align:right;text-decoration:none;margin-right:4px;}
#menur img {vertical-align:text-bottom !important;}
#menur a:hover {color:#f79218;}
#menur a[title="PTO Request"] {
    border-radius: 5px;
    padding: 7px !important;
    box-shadow: 0px 0px 5px rgb(0 0 0 / 25%);
}
#menur a[title="PTO Request"]:hover {
	color: #7A133E;
}

.floatmenu
{position:absolute;top:0px;border:0px;border-bottom-width:0;font:normal bold 10pt HK Grotesk, sans-serif;z-index:100;background-color:#000000;width:200px;line-height:18px;visibility:hidden;}
.floatmenu a
{width:auto;display:block;font:normal bold 10pt HK Grotesk, sans-serif;color:#ffffff;text-decoration:none;text-indent:3px;border-bottom:1px solid #ffffff;padding:1px 0px;}
* html .floatmenu a{width:100%;}
.floatmenu a:hover {background-color:#00034a;color:#f79218;}

#lcontent {
    width: 100%;
    height: 100%;
    float: left;
    overflow: auto;
    overflow-x: hidden;
}
#rcontent {
    width: 457px;
    height: 100%;
    margin-left: 2px;
    background-color: #ffffff;
    overflow: auto;
    display: none;
}
#rcontent .iframe
{width:100%;height:100%;border:0px}
html>body #rcontent {width:457px;}
#helpfulnessvote
{background-color:#9caace !important;font:normal normal 14px HK Grotesk, sans-serif;color:#000000;text-align:center;clear:both;}
#helpfulnessvote a
{margin-left:4px;}
#helpfulnessvote input, #helpfulnessvote span
{vertical-align:middle;}
#helpfulnessvote img
{vertical-align:text-bottom !important;}
#helpfulnessvote a:active {color:#000000;}
#helpfulnessvote a:visited {color:#000000;}
#helpfulnessvote a:hover {color:#000000;}

#inplaceroute
{background-color:#ffffff;font:normal normal 10pt HK Grotesk, sans-serif;color:#000000;overflow:auto;border:0px;clear:both;}
#inplaceroute .iframe
{width:100%;height:100%;border:0px}
#inplacecontent
{background-color:#ffffff;font:normal normal 10pt HK Grotesk, sans-serif;color:#000000;overflow:auto;border:0px;clear:both;}
#inplacecontent .iframe
{width:100%;height:100%;border:0px}
#resultpane
{height:50%;background-color:#ffffff;font:normal normal 10pt HK Grotesk, sans-serif;color:#000000;overflow:auto;border:0px;margin:1px;}
#resultpane .iframe
{width:100%;height:100%;border:0px}
#resultpane .solution
{color:#000000;font:normal bold 14px HK Grotesk, sans-serif;background-color:#F2F2F2 !important;vertical-align:top;}
#routepane
{height:50%;background-color:#ffffff;font:normal normal 10pt HK Grotesk, sans-serif;color:#000000;overflow:auto;border:0px;margin:1px;}
#routepane .iframe
{width:100%;height:100%;border:0px}
#routepane .solution
{color:#000000;font:normal bold 14px HK Grotesk, sans-serif;background-color:#F2F2F2 !important;vertical-align:top;}
#vwcontent
{background-color:#ffffff !important;font:normal normal 10pt HK Grotesk, sans-serif;color:#000000;padding:4px;border:0px;clear:both;}
#vwcontent .article
{color:#000000;font:normal normal 14px HK Grotesk, sans-serif;background-color:#F2F2F2;vertical-align:top;}
#vwcontent a:link {color:#000000;}
#vwcontent a:active {color:#000000;}
#vwcontent a:visited {color:#00034a;}
#vwcontent a:hover {color:#000000;}

/*Speech Bubble Code START*/
#dialog .hosttext:nth-child(2)::after,
#dialog .hosttexthistory:nth-child(2)::after,
#dialog .continuation:nth-child(2)::after,
#dialog .solution:nth-child(2)::after,
#dialog .solutionhistory:nth-child(2)::after
{
	/* This block controls the arrow itself for host, continuation, and solution text */
	border-color: transparent #F2F2F2 transparent transparent; /* Color code position determines arrow direction */
	border-style: solid;
	border-width: 10px; /* Adjust for size */
	border-bottom: 0px; /* Remove for fat arrow */
	content: "";
	height: 0;
	width: 0;
	left: -20px; /* Adjust for position */
	top: 10px; /* Adjust for position */
	position: absolute;
	display: none;
}
#dialog .hosttext:nth-child(2)::before,
#dialog .hosttexthistory:nth-child(2)::before,
#dialog .continuation:nth-child(2)::before,
#dialog .solution:nth-child(2)::before,
#dialog .solutionhistory:nth-child(2)::before
{
	/* This block controls the arrow border for host, continuation, and solution text */
	border-color: transparent #666666 transparent transparent; /* Color code position determines arrow direction */
	border-style: solid;
	border-width: 11px; /* Adjust for size */
	border-bottom: 0px; /* Remove for fat arrow */
	content: "";
	height: 0;
	width: 0;
	left: -23px; /* Adjust for position */
	top: 10px; /* Adjust for position */
	position: absolute;
	display: none;
}
#dialog .hosttext:nth-child(2),
#dialog .hosttexthistory:nth-child(2),
#dialog .continuation:nth-child(2),
#dialog .solution:nth-child(2),
#dialog .solutionhistory:nth-child(2)
{
	/* This block handles the text container for host, continuation, and solution text */
	float: left;
    padding: 14px;
    border: none;
    border-radius: 12px 12px 12px 0px;
    box-shadow: -2px 4px 6px rgb(0 0 0 / 25%);
    position: relative;
	max-width: 80%;
}
#dialog .usertext:nth-child(2)::after,
#dialog .usertexthistory:nth-child(2)::after
{
	/* This block controls the arrow itself for user text */
	border-color: transparent transparent transparent #d5d5d4; /* Color code position determines arrow direction */
	border-style: solid;
	border-width: 10px; /* Adjust for size */
	border-bottom: 0px; /* Remove for fat arrow */
	content: "";
	height: 0;
	width: 0; 
	right: -20px; /* Adjust for position */
	top: 10px; /* Adjust for position */
	position: absolute;
	display: none;
}
#dialog .usertext:nth-child(2)::before,
#dialog .usertexthistory:nth-child(2)::before
{
	/* This block controls the arrow border for user text */
	border-color: transparent transparent transparent #666666; /* Color code position determines arrow direction */
	border-style: solid;
	border-width: 11px; /* Adjust for size */
	border-bottom: 0px; /* Remove for fat arrow */
	content: "";
	height: 0;
	width: 0;
	right: -23px; /* Adjust for position */
	top: 10px; /* Adjust for position */
	position: absolute;
	display: none;
}
#dialog .usertext:nth-child(2),
#dialog .usertexthistory:nth-child(2)
{
	/* This block handles the text container for user text */
	float: right;
    padding: 14px;
    border: none;
    box-shadow: -2px 4px 6px rgb(0 0 0 / 25%);
    border-radius: 12px 12px 0px 12px;
    position: relative;
	max-width: 80%;
}
/*Speech Bubble Code END*/

#dialog {
    font: normal normal 14px HK Grotesk, sans-serif;
    color: #000000;
    overflow: auto;
    overflow-x: hidden;
}
#dialog .hostname {
	color: #000000;
	font: normal normal 14px HK Grotesk, sans-serif;
	text-align: center;
	position: relative;
	float: left;
	margin-right: 20px;
	margin-top: 10px;
	display: none;
}

#dialog .hosttext
{color:#FFFFFF;font:normal normal 14px HK Grotesk, sans-serif;background-color:#233143 !important;vertical-align:top;}
#dialog .hosttexthistory
{color:#FFFFFF;font:normal normal 14px HK Grotesk, sans-serif;background-color:#233143 !important;vertical-align:top;}
#dialog .continuation
{color:#FFFFFF;font:normal normal 14px HK Grotesk, sans-serif;background-color:#233143 !important;vertical-align:top;}
.continuation a {text-decoration: none; font-size: 18px;}
#dialog .username {
	color: #000000;
	font: normal normal 14px HK Grotesk, sans-serif;
	text-align: center;
	position: relative;
	float: right;
	margin-left: 20px;
	margin-top: 10px;
	display: none;
}

#dialog .usertext {
    color: #000000;
    font: normal normal 14px HK Grotesk, sans-serif;
    background-color: #E0E0E0;
}
#dialog .usertexthistory {
    color: #000000;
    font: normal normal 14px HK Grotesk, sans-serif;
    background-color: #E0E0E0;
}
#dialog .hostrelinfo
{color:#FFFFFF;font:normal normal 10pt HK Grotesk, sans-serif;background-color:#233143 !important;vertical-align:top;}
#dialog .solution
{color:#FFFFFF;font:normal normal 14px HK Grotesk, sans-serif;background-color:#233143 !important;vertical-align:top;}
#dialog .solution img
{max-width: 100%; height: auto !important;}
#dialog .solution table
{width:100% !important;}
#dialog .solutionhistory
{color:#FFFFFF;font:normal normal HK Grotesk, sans-serif;background-color:#233143 !important;vertical-align:top;}
#dialog .solutionhistory img
{max-width: 100%; height: auto !important;}
#dialog .solutionhistory iframe
{display: none;}
#dialog .solutionhistory table
{width:100% !important;}
#dialog .none
{color:#ffffff;font:normal normal 10pt HK Grotesk, sans-serif;background-color:#233143 !important;vertical-align:top;}
#dialog .field
{color:#233143;font:normal normal 14px HK Grotesk, sans-serif;width:220px;vertical-align:middle;}
#dialog img, #dialog input
{vertical-align:middle;}
#dialog a:link {color:#ffffff;}
#dialog a:active {color:#ffffff;}
#dialog a:visited {color:#ffffff;}
#dialog a:hover {color:#ffffff;}

#dialog .highlight {background-color:#FFFF00 !important;}
#dialog .tooltip {position:relative;display:inline-block;}#dialog .tooltip .tooltiptext {visibility:hidden;width:150px;background-color:#f0f0f0;color:#000000;text-align:left;padding:5px;border-radius:10px;border:1px solid #111111;position:absolute;z-index:1;}#dialog .tooltip:hover .tooltiptext {visibility: visible;}
#inputfield {
    background-color: #FFFFFF;
    height: 60px;
    padding-top: 5px;
}
#inputfield td {
    color: #000000;
    font: normal normal 14px HK Grotesk, sans-serif;
    padding-left: 15px;
    padding-right: 20px;
    width: 100%;
}
/*Code for inputfield dynamic width START*/
#inputfield td:nth-child(2) {
    width: 100%;
}
#inputfield .field {
    color: #233143;
    font: normal normal 14px HK Grotesk, sans-serif;
    vertical-align: middle;
    width: 100%;
    height: 47px;
    border-radius: 25px;
	background-color: #E0E0E0;
	border-width: thin;
    outline: none;
    text-indent: 5px;
	padding-right: 25px;
	padding: 1px;
}
/*Code for inputfield dynamic width END*/
#inputfield input, #inputfield img {
    height: 60px;
    /*padding-top: 5px;*/
}
#copyright
{background-color:#000000 !important;font:normal normal 14px HK Grotesk, sans-serif;color:#ffffff;text-align:left;clear:both;}
#copyright span
{margin-left:4px;}
#poweredby {
    background-color: #FFFFFF;
    font: normal normal 9px HK Grotesk, sans-serif;
    color: #FFFFFF;
    text-align: center;
    clear: both;
    height: 20px;
    line-height: 20px;
}
#poweredby a:link {color: #FFFFFF;text-decoration: none;}
#poweredby a:active {color: #FFFFFF;}
#poweredby a:visited {color: #FFFFFF;}
#poweredby a:hover {color: #FFFFFF;text-decoration: underline;}

#log
{background-color:#ffffff;font:normal normal 14px HK Grotesk, sans-serif;color:#000000;}
#log .hostname
{color:#000000;font:normal normal 14px HK Grotesk, sans-serif;background-color:#F2F2F2 !important;vertical-align:top;}
#log .hosttexthistory
{color:#000000;font:normal normal 14px HK Grotesk, sans-serif;background-color:#F2F2F2 !important;vertical-align:top;}
#log .username
{color:#000000;font:normal normal 14px HK Grotesk, sans-serif;background-color:#d5d5d4 !important;}
#log .usertexthistory
{color:#000000;font:normal normal 14px HK Grotesk, sans-serif;background-color:#d5d5d4 !important;}
#log .hostrelinfo
{color:#000000;font:normal bold 10pt HK Grotesk, sans-serif;background-color:#F2F2F2 !important;vertical-align:top;}
#log .solutionhistory
{color:#000000;font:normal normal 14px HK Grotesk, sans-serif;background-color:#F2F2F2 !important;vertical-align:top;}
#log a:link {color:#000000;}
#log a:active {color:#000000;}
#log a:visited {color:#00034a;}
#log a:hover {color:#000000;}

#floatdiv{position:absolute;color:#000000;background-color:#ffffff;font-family:HK Grotesk, sans-serif;font-size:10px;width:700px;height:520px;top:92px;display:none;z-index:9048;border:1px solid #808080;overflow:visible;}
#floatdiv iframe{width:100%;height:500px;border:0px;overflow:visible;padding-top:4px;clear:both;}
img {border:0}
.dialogTable {
	border: 0px;
	margin: 0px;
	width: 100% !important;
	border-collapse: separate;
	border-spacing: 10px 20px;
}

.dialogTable td {border:1px; border-style:solid; border-color:#ffffff; padding: 3px 0px 3px 3px;}
.stdTable {border:0px;margin:0px;width:100%; border-collapse:collapse}
.stdTable td {border:0px; border-style:none; padding: 4px;}
.stdTableZeroBorder {border:0px;padding:0px;margin:0px;border-collapse:collapse;}
.stdTableZeroBorder td {border:0px;border-style:none;}
#restart {display:inline;}
#waiting {display:none;}

#btngo {
    height: 20px;
    padding: 7px 17px 23px 17px;
    background-color: #233143;
    color: #ffffff;
    cursor: pointer;
    outline: none;
    position: relative;
    border-radius: 5px;
    font: bold normal 14px HK Grotesk, sans-serif;
    border: none;
}