@font-face {
	font-family: "CiscoSansTT";
	src:
	url("https://www6.nohold.net/SkillsforAll/Uploads/CiscoSansTTRegular.ttf") format("truetype");
}

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

body {
	margin: auto;
	padding: 0px;
	background-color: #696969;
	border: 0px;
	max-width: 510px;
	height: 100%;
	font-family: 'CiscoSansTT',arial,helvetica,sans-serif;
}
#content {
	background-color: #46892F;
	width: 100%;
	/* Code for dynamic height START */
	height: 100%;
	display: flex;
	flex-direction: column;
	/* Code for dynamic height END */
}
#main {
	clear: both;
	/* Code for dynamic height START */
	height: 100%;
	flex: 1;
	/* Code for dynamic height END */
	overflow: auto;
	background-color: #46892F;
}
/*New Starting CSS END*/
#viewer {height: 100%;}
form {margin:0px;padding:0px;}
ul {margin-bottom:0;padding:0px;margin-left:20px;}
#banner {
    background: transparent linear-gradient(179deg, #6ABF4B 0%, #46892F 100%) 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    opacity: 1;
    height: 70px;
}
#banner .bannerlogo {
    float: left;
    position: relative;
    clear: both;
    padding-top: 10px;
    padding-left: 15px;
}
#banner .bannertext {
    font: normal normal 15pt 'CiscoSansTT',arial,helvetica,sans-serif;
    color: #ffffff;
    text-align: left;
    padding-top: 25px;
    padding-left: 85px;
}
#vwbanner
{height:69px;background-color:#9caace;}
#vwbanner .bannerlogo
{float:left;position:relative;clear:both;}
#vwbanner .bannertext
{font:normal bold 12pt 'CiscoSansTT',arial,helvetica,sans-serif;color:#000000;text-align:center;padding-top:25px;}
#menu {
    position: relative;
    height: 0px;
}
#menu #menul {
    float: left;
    margin-left: 22px;
}
#menul a, #menul span {
    font: normal bold 10pt 'CiscoSansTT',arial,helvetica,sans-serif;
    color: #333333;
    text-align: left;
    text-decoration: none;
    margin-left: 4px;
	opacity: 0.5;
}
#menul .sel
{font:normal bold 10pt 'CiscoSansTT',arial,helvetica,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 {
    position: absolute;
    bottom: 20px;
    right: 25px;
}
#menur a, #menur span {
    font: normal bold 10pt 'CiscoSansTT',arial,helvetica,sans-serif;
    color: #ffffff;
    text-align: right;
    text-decoration: none;
    margin-right: 25px;
    position: relative;
}
#menur .sel
{font:normal bold 10pt 'CiscoSansTT',arial,helvetica,sans-serif;color:#00ffff;text-align:right;text-decoration:none;margin-right:4px;}
#menur img {
    vertical-align: text-bottom !important;
    height: 25px;
}
#menur a:hover {color:#f79218;}

.floatmenu
{position:absolute;top:0px;border:0px;border-bottom-width:0;font:normal bold 10pt 'CiscoSansTT',arial,helvetica,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 'CiscoSansTT',arial,helvetica,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%;
    background-color: #ffffff;
    float: left;
    overflow-x: hidden;
	border-radius: 20px 20px 0px 0px;
	word-break: break-word;
}
#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 8pt 'CiscoSansTT',arial,helvetica,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:#840000;}
#helpfulnessvote a:visited {color:#840000;}
#helpfulnessvote a:hover {color:#840000;}

#inplaceroute
{background-color:#ffffff;font:normal normal 10pt 'CiscoSansTT',arial,helvetica,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 'CiscoSansTT',arial,helvetica,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 'CiscoSansTT',arial,helvetica,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 8pt 'CiscoSansTT',arial,helvetica,sans-serif;background-color:#e7e8ed !important;vertical-align:top;}
#routepane
{height:50%;background-color:#ffffff;font:normal normal 10pt 'CiscoSansTT',arial,helvetica,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 8pt 'CiscoSansTT',arial,helvetica,sans-serif;background-color:#e7e8ed !important;vertical-align:top;}
#vwcontent
{background-color:#ffffff !important;font:normal normal 10pt 'CiscoSansTT',arial,helvetica,sans-serif;color:#000000;padding:4px;border:0px;clear:both;}
#vwcontent .article
{color:#000000;font:normal normal 8pt 'CiscoSansTT',arial,helvetica,sans-serif;background-color:#e7e8ed;vertical-align:top;}
#vwcontent a:link {color:#0000ff;}
#vwcontent a:active {color:#0000ff;}
#vwcontent a:visited {color:#00034a;}
#vwcontent a:hover {color:#840000;}

/*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 #e7e8ed 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; /* If this is changed, adjust arrow positions accordingly */
    padding: 15px;
    position: relative;
    background-color: rgba(232, 232, 232, 0.5);
    border-radius: 5px;
}
#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; /* If this is changed, adjust arrow positions accordingly */
	padding: 15px;
    position: relative;
    background-color: rgba(106, 191, 75, 0.5);
    border-radius: 5px;
}
/*Speech Bubble Code END*/

#dialog {
    background-color: #ffffff;
    font: normal normal 12pt 'CiscoSansTT',arial,helvetica,sans-serif;
    color: #000000;
    overflow-x: hidden;
}
#dialog .hostname {
    color: #003399;
    font: normal normal 12pt 'CiscoSansTT',arial,helvetica,sans-serif;
    text-align: center;
    position: relative;
    float: left;
    margin-right: 20px;
    margin-top: 10px;
	display: none;
}
#dialog .username {
	color: #000000;
	font: normal normal 12pt 'CiscoSansTT',arial,helvetica,sans-serif;
	text-align: center;
	position: relative;
	float: right;
	margin-left: 20px;
	margin-top: 10px;
	display: none;
}
#dialog .hosttext,
#dialog .hosttexthistory,
#dialog .continuation,
#dialog .solution,
#dialog .solutionhistory,
#dialog .none,
#dialog .field {
    color: #333333;
    font: normal normal 12pt 'CiscoSansTT',arial,helvetica,sans-serif;
	line-height: 25px;
}
#dialog .usertext,
#dialog .usertexthistory {
    color: #333333;
    font: normal normal 12pt 'CiscoSansTT',arial,helvetica,sans-serif;
	line-height: 25px;
}
#dialog .hostrelinfo
{color:#003399;font:normal bold 10pt 'CiscoSansTT',arial,helvetica,sans-serif;background-color:#e7e8ed !important;vertical-align:top;}
#dialog img, #dialog input
{vertical-align:middle;}
#dialog a:link {color:#6ABF4B;}
#dialog a:active {color:#6ABF4B;}
#dialog a:visited {color:#6ABF4B;}
#dialog a:hover {color:#6ABF4B;}

#dialog .highlight {background-color:#FFFF00 !important;}
#inputfield {
    background-color: #ffffff !important;
    height: 69px;
    z-index: 1;
    box-shadow: 0px 3px 6px #00000029;
    border-top: 1px solid #7070704E;
    opacity: 1;
}
#inputfield td {
    color: #003399;
    font: normal normal 12pt 'CiscoSansTT',arial,helvetica,sans-serif;
    vertical-align: top;
    width: 100%;
	padding: 0px;
}
/*Code for inputfield dynamic width START*/
#inputfield td:nth-child(2) {
    width: 100%;
}
#inputfield .field {
    color: #000000;
    font: normal normal 12pt 'CiscoSansTT',arial,helvetica,sans-serif;
    vertical-align: middle;
    width: 100%;
    height: 67px;
    text-indent: 15px;
    border: none;
	outline: none;
}
/*Code for inputfield dynamic width END*/
#inputfield input, #inputfield img
{vertical-align:middle;}
#copyright
{background-color:#000000 !important;font:normal normal 8pt 'CiscoSansTT',arial,helvetica,sans-serif;color:#ffffff;text-align:left;clear:both;}
#copyright span
{margin-left:4px;}
#poweredby {
	background-color:#696969;
	font:normal normal 10px 'CiscoSansTT',arial,helvetica,sans-serif;
	color:#B9B9B9;
	text-align:left;
	padding:11px;
}
/*#poweredby span
{margin-left:4px;}*/
#poweredby a:link {
	color:#B9B9B9;
}
#poweredby a:active {
	color:#B9B9B9;
	text-decoration:none;
}
#poweredby a:visited {
	color:#B9B9B9;
}
#poweredby a:hover {
	color:#B9B9B9;
	text-decoration:none;
}

#log
{background-color:#ffffff;font:normal normal 8pt 'CiscoSansTT',arial,helvetica,sans-serif;color:#000000;}
#log .hostname
{color:#003399;font:normal normal 8pt 'CiscoSansTT',arial,helvetica,sans-serif;background-color:#e7e8ed !important;vertical-align:top;}
#log .hosttexthistory
{color:#840000;font:normal normal 8pt 'CiscoSansTT',arial,helvetica,sans-serif;background-color:#e7e8ed !important;vertical-align:top;}
#log .username
{color:#000000;font:normal normal 8pt 'CiscoSansTT',arial,helvetica,sans-serif;background-color:#d5d5d4 !important;}
#log .usertexthistory
{color:#840000;font:normal normal 8pt 'CiscoSansTT',arial,helvetica,sans-serif;background-color:#d5d5d4 !important;}
#log .hostrelinfo
{color:#003399;font:normal bold 10pt 'CiscoSansTT',arial,helvetica,sans-serif;background-color:#e7e8ed !important;vertical-align:top;}
#log .solutionhistory
{color:#840000;font:normal normal 8pt 'CiscoSansTT',arial,helvetica,sans-serif;background-color:#e7e8ed !important;vertical-align:top;}
#log a:link {color:#0000ff;}
#log a:active {color:#0000ff;}
#log a:visited {color:#00034a;}
#log a:hover {color:#840000;}

#floatdiv{position:absolute;color:#000000;background-color:#ffffff;font-family:'CiscoSansTT',arial;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;
	padding: 0px 15px;
}
.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;}

/*New CSS blocks below*/
img[alt="Close"] {
    height: 30px !important;
    position: absolute;
    top: -12px;
}

#menur a:not(:last-child):after {
    content: "";
    background-color: #ffffff;
    position: absolute;
    width: 1px;
    height: 30px;
    top: -12px;
    left: 36px;
    display: block;
    opacity: 0.3;
	pointer-events: none;
}

#waiting > .hosttext {
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

#waiting .hosttext:nth-child(2)::after,
#waiting .hosttext:nth-child(2)::before {
	display: none;
}

#btngo {
    height: 27px;
    padding: 21px 21px;
    border: none;
    color: #ffffff;
    cursor: pointer;
    outline: none;
}

#dialog a {
    display: inline-block;
    line-height: 20px;
    padding-bottom: 15px;
}

.solution a {
	padding-bottom: initial !important;
}

/* Small Size START */
@media (max-width: 380px)
{
	#banner .bannertext {
		display: none;
	}
	.bannerlogo:after {
		content: 'Skills for All - Support';
		font: normal normal 15pt 'CiscoSansTT',arial,helvetica,sans-serif;
		color: #ffffff;
		position: absolute;
		margin-left: 20px;
		top: 25px;
		width: 200px;
	}
}
/* Small Size END */

/* Smaller Size START */
@media (max-width: 376px)
{
	.bannerlogo:after {
		font-size: 13pt;
	}
}
/* Smaller Size END */

/* Smallest Size START */
@media (max-width: 351px)
{
	.bannerlogo:after {
		font-size: 10pt;
	}
}
/* Smallest Size END */