/*
--------------
1 basic styles
--------------
*/
html {
	box-sizing: border-box;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
	background-color: #FFFFFF;
	color: #000000;
	font-family: az_ea_font, "Segoe UI", wf_segoe-ui_normal, "Segoe WP", Tahoma, Arial, sans-serif;
	height: 100%;
}

#body-content .docs-IconList ul {
	margin: 0;
	margin-bottom: 20px;
	margin: 0;
	padding: 0;
}


/* 
-------------------------------------------
HTML5 display-role reset for older browsers 
-------------------------------------------
*/

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}

ol,
ul {
	list-style: inherit;
}

li {
	font-size: 90%;
}


/*
------------
placeholders
------------
*/

::-webkit-input-placeholder {
	/* Chrome/Opera/Safari */
	color: #2b77d3;
	font-style: italic;
}

::-moz-placeholder {
	/* Firefox 19+ */
	color: #2b77d3;
	font-style: italic;
}

:-ms-input-placeholder {
	/* IE 10+ */
	color: #2b77d3;
	font-style: italic;
}

:-moz-placeholder {
	/* Firefox 18- */
	color: #2b77d3;
	font-style: italic;
}

blockquote,
q {
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

address {
	font-style: normal;
	margin-top: 20px;
}

img {
	/* max-width: 100%; */
	height: auto;
	vertical-align: top;
}

.clearfix {
	height: 0pt;
	clear: both;
}

p {
	font: 100% az_ea_font, "Segoe UI", wf_segoe-ui_normal, "Segoe WP", Tahoma, Arial, sans-serif;
	font-size: 16px;
	line-height: 20px;
	margin: 0 0 20px 0;
}

[class^="icon-"],
[class*=" icon-"] {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.fullwidth {
	width: 100% !important;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
	font: 150% az_ea_font, "Segoe UI", wf_segoe-ui_normal, "Segoe WP", Tahoma, Arial, sans-serif;
	margin: 0 0 20px;
}

h1,
.h1 {
	font: 180% az_ea_font, "Segoe UI", wf_segoe-ui_normal, "Segoe WP", Tahoma, Arial, sans-serif;
	font-weight: 400;
	color: #0d0d0d;
}

h2,
.h2 {
	font: 130% az_ea_font, "Segoe UI", wf_segoe-ui_normal, "Segoe WP", Tahoma, Arial, sans-serif;
	font-weight: 400;
}

h3,
.h3 {
	font-size: 20px;
}

h4,
.h4 {
	font-size: 16px;
}

h5,
.h5 {
	font-size: 14px;
}

h6,
.h6 {
	font-size: 11px;
}

a {
	color: #333;
	text-decoration: none;
}

a:hover,
a:focus {
	text-decoration: underline;
}

/* lists */
ul,
ol {
	margin: 20px 0;
	padding-left: 40px;
}

ol {
	list-style: lower-greek;
}

ul {
	list-style: disc;

}

ul li,
ol li {
	margin: 0;
	font-size: 16px;
	line-height: 20px;
}

/* definition lists */
dl {
	border: 3px double #ccc;
	padding: 0.5em;
}

dt {
	float: left;
	clear: left;
	width: 100px;
	text-align: right;
	font-weight: bold;
	color: red;
}

dt::after {
	content: ":";
}

dd {
	margin: 0 0 0 110px;
	padding: 0 0 0.5em 0;
}

/* tables , forms */
table,
tr,
td,
tdoby,
th {
	border-collapse: collapse;
}

form,
legend,
input,
select,
textarea {}

/*
----------------
responsive video
----------------
*/
.Flexible-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.Flexible-container iframe,
.Flexible-container object,
.Flexible-container video,
/* for html5 video embeds */
.Flexible-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.shown {
	display: block !important;
}

/*
---------------
floats & blocks
---------------
*/

.float-left {
	float: left;
}

.float-right {
	float: right;
}

.inline {
	display: inline;
}

.inline-block {
	display: -moz-inline-stack;
	display: inline-block;
	zoom: 100%;
	*display: inline;
}

.block {
	display: block;
}

/*
----------------------
alignments and flexbox
----------------------
*/
.align-left {
	text-align: left;
}

.align-right {
	text-align: right;
}

.align-center {
	text-align: center;
}

.marginauto {
	margin: 0 auto !important;
}

.valign-top {
	vertical-align: top !important;
}

.valign-middle,
.valign-middle-children>* {
	vertical-align: middle !important;
}

.valign-bottom {
	vertical-align: bottom !important;
}

.fullwidth {
	width: 100%;
}

.fullheight {
	height: 100%;
}


/* Row with equal height columns -------------------------------------------------- */

.vertical-align-all {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
}

@media (min-width: 768px) {
	.vertical-align-no-xs {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
	}
}

@media (max-width: 991px) {
	.vertical-align-no-md {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
	}
}

@media (min-width: 992px) {
	.vertical-align-no-sm {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
	}

	.row-eq-height-no-sm {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
	}
}

@media (min-width: 1200px) {

	.row-eq-height,
	.row-eq-height-no-md {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
	}
}

@media(min-width:768px) {

	.vertical-align-no-xs {
		margin: 0 auto;
		/* IE9 */
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
	}
}

@media(min-width:992px) {
	.vertical-align-no-sm {
		/* NO IE9 */
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
	}
}

.only-vertical-align {
	/* NO IE9 */
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

/*
--------------------
form styles (global)
--------------------
*/
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form input[type="number"],
.form input[type="password"],
.form textarea,
.form select {
	border: 1px solid #999;
	background: #fff;
	padding: 3px 5px;
	box-sizing: border-box;
	font: 90% az_ea_font, "Segoe UI", wf_segoe-ui_normal, "Segoe WP", Tahoma, Arial, sans-serif;
}

.form h6 {
	font-weight: bold;
	margin: 5px 0;
	border-bottom: 1px dashed #ccc;
	width: 100%;
	padding-bottom: 5px;
	padding-top: 5px;
}

.form textarea {
	min-height: 100px;
}

.form select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	position: relative;
	border: 0;
}

.form .select {
	border: 1px solid #999;
	position: relative;
}

.form .select:after {
	content: '';
	position: absolute;
	top: 3px;
	right: 8px;
	pointer-events: none;
	display: inline-block;
	padding: 5px;
	box-shadow: 1px -1px 0 0 black inset;
	transform: rotate(-45deg);
}

/*
---------
form rows
---------
*/

.form .row,
.HorizontalForm .row {
	margin: 0 0 15px 0;
	float: left;
	width: 100%;
}

.HorizontalForm {
	max-width: 820px;
}

.form label+div {
	width: 70.33333333%;
	float: right;
}

.form label,
.HorizontalForm label {
	width: 250px;
	margin: 0;
	display: block;
	width: 25%;
	float: left;
}

.HorizontalForm input[type="text"],
.HorizontalForm select,
.HorizontalForm textarea {
	width: 100%;
	box-sizing: border-box;
}

/*
-----------------------------------
custom checkboxes and radio buttons
-----------------------------------
*/
.form input[type="radio"] {
	position: absolute;
	left: -9999px;
}

.form input[type="radio"]+label {
	position: relative;
	cursor: pointer;
	padding: 0 15px 0 25px;
	display: inline-block;
	vertical-align: middle;
	width: auto;
}

.form input[type="radio"]+label:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	border: 1px solid #666;
	width: 17px;
	height: 17px;
	background: #fff;
	display: inline-block;
	vertical-align: middle;
	border-radius: 50px;
}

.form input[type="radio"]+label:after {
	content: '';
	position: absolute;
	top: 4px;
	left: 4px;
	width: 9px;
	height: 9px;
	background: #0078d4;
	opacity: 0;
	transform: scale(3);
	/* scale it up for smooth animation */
	transition: transform 0.3s linear, opacity 0.3s linear;
	border-radius: 50px;
}

.form input[type="radio"]:checked+label:after {
	opacity: 1;
	transform: scale(1);
	/* scale it down fom smooth animation */
}

/* custom checkboxes */
.form input[type="checkbox"] {
	position: absolute;
	left: -9999px;
}

.form input[type="checkbox"]+label {
	position: relative;
	cursor: pointer;
	padding: 4px 0 0 40px;
	display: inline-block;
	vertical-align: middle;
}

.form input[type="checkbox"]+label:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	border: 2px solid #1cbe9d;
	width: 30px;
	height: 30px;
	background: #fff;
	display: inline-block;
	vertical-align: middle;
	border-radius: 3px;
}

.form input[type="checkbox"]+label:after {
	content: '';
	border-style: solid;
	border-width: 0 0 2px 2px;
	border-color: transparent transparent #1cbe9d #1cbe9d;
	width: 15px;
	height: 8px;
	position: absolute;
	top: 8px;
	left: 8px;
	opacity: 0;
	transform: scale(2) rotate(-45deg);
	transition: transform 0.3s linear, opacity 0.3s linear, background-color 0.3s ease;
}

.form input[type="checkbox"]:checked+label:after {
	opacity: 1;
	transform: scale(1) rotate(-45deg);
	border-color: transparent transparent #fff #fff;
}

/*
	Add this to make your checkboxes coloured :)
*/
.form input[type="checkbox"]:checked+label:before {
	background: #1cbe9d;
}

.customRadioButtons label {}

/*
-------
buttons
--------
*/
.formbuttonContainer {
	border-top: 1px solid #ccc;
	padding: 20px 0;
	width: 100%;
	margin-top: 20px !important;
}

.formbuttonContainer button {
	margin: 0 10px 0 0;
}

button {
	font-size: 13px;
	font-weight: 600;
}

.btn-primary {
	background: #0078d4;
	border: 0;
	color: #fff;
	padding: 7px 10px;
	cursor: pointer;
}

.btn-primary:hover {
	background: #015290;
}

.btn-secondary {
	background: #ffffff;
	border: 0;
	color: #0078d4;
	padding: 7px 10px;
	cursor: pointer;
	border: 1px solid #0078d4;
}

/*
--------
2 header 
--------
*/


/*
------------
main heading
------------
*/
.mainHeading {
	width: 100%;
	padding: 10px 2em;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

.mainHeading h2 {
	margin-bottom: 0;
}

#header {
	/* height: 40px; */
	z-index: 5;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;
	-webkit-flex: 0 0 auto;
	flex: 0 0 auto;
	font-size: 13px;
	box-shadow: none;
	flex-wrap: nowrap;
	margin-left: 19em;
	padding: 5px 30px;
}

#header>div.toggleMenu {
	width: 20px;
	flex: 0;
	padding: 10px;
	color: #333;
}

#header>div {
	/* flex grow, 
       flex shrink
       flex basis */
	flex: 1 1 0;
}

#header #buttonsContainer {
	display: flex;
	display: -webkit-flex;
	align-items: center;
	justify-content: flex-end;
}


/*
hidden flexbox container 
*/

.fxs-topbar-placeholder {
	/* -webkit-flex: 1 1 auto; */
	/* flex: 1 1 auto; */
	display: none;
}


/*
----
logo
----
*/

#header #logo {
	/* display: -webkit-flex; */
	/* display: flex; */
	/* -webkit-flex: 0 0 auto; */
	/* flex: 0 0 auto; */
}

#header h1 {
	margin: 0;
}

#header h1.header-logo a {
	color: #333;
	display: inline-block;
	font-size: 15px;
	padding: 0 15px;
	height: 40px;
	line-height: 40px;
	font-family: az_ea_font, "Segoe UI", wf_segoe-ui_semibold, "Segoe UI Semibold", "Segoe WP Semibold", "Segoe WP", Tahoma, Arial, sans-serif;
	font-weight: 600;
}


/*
----------
search box
----------
*/


/*
-----------
placeholder
-----------
*/

#header #searchbox {
	text-align: center;
	margin: 0 auto;
	max-width: 500px;
	flex-grow: 3;
 
}

#header #searchbox #searchForm {
	background-color: #b7d6f2;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	height: 28px;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	padding: 0 10px;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	width: 100%;
	display: none;
}

#header #searchbox #searchForm input[type="text"] {
	width: 100%;
	border: 0;
	background: none;
	color: #2b77d3;
	font-style: italic;
}

#header #searchbox #searchForm input[type="text"]:focus {
	outline: none;
}

#header #searchbox #searchForm button {
	background: none;
	border: 0;
}

#header #searchbox #searchForm button i {
	color: #2b77d3;
}


/*
-------
buttons
-------
*/

#header #buttons {
	display: -webkit-flex;
	display: flex;
	-webkit-flex: 0 0 auto;
	flex: 0 0 auto;
	text-align: right;
	margin-right: 40px;
}

#header #buttons>div {
	display: -webkit-flex;
	display: flex;
	height: 40px;
	width: 48px;
	-webkit-flex: 0 0 auto;
	flex: 0 0 auto;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}

#header #buttons>div i {
	font-size: 18px;
	color: #fff;
	font-weight: 300;
}


/*
------------
user details
------------
*/

#header #user {
	color: #fff;
	display: -webkit-flex;
	display: flex;
	-webkit-flex: 0 0 auto;
	flex: 0 0 auto;
	text-align: right;
	margin-right: 10px;
	line-height: 14px;
}

#header #user a {
	display: block;
}

#header #user .userAvatar {
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	background: #697585;
	width: 34px;
	height: 34px;
	margin-left: 10px;
	position: relative;
	vertical-align: middle;
	overflow: hidden;
}

#header #user .userAvatar .Avatar {
	background: url(./img/avatar.png) no-repeat;
	background-size: 100%;
	width: 100%;
	height: 100%;
}

#header .userDetailsLoggedIn {
	vertical-align: middle;
	display: inline-block;
	margin-top: 2px;
}

#header #user .userDetails {
	font-size: 10px;
	text-transform: uppercase;
	vertical-align: baseline;
	display: inline-block;
}


/*
----------
header alt
----------
*/

.AzureContainer {
	display: -webkit-flex;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
}

.AzureContainer>div {
	padding: 10px;
	border: 1px solid #000;
	flex: 1 1 0;
}

.AzureContainer>div form input[type="text"] {
	display: block;
	width: 100%;
}

.container>div.buttonContainer {
	display: -webkit-flex;
	display: flex;
}


/*
-----------
3. left nav
-----------
*/

#nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 19em;
	background: #f9f9f9;
	padding: 20px 0 0;
	height: 100%;
	overflow: scroll;
}

#nav.level2 {
	left: 17em;
	background: #fff;
	width: 24em;
}

/*
-------
toggled
-------
*/
#nav.shown {
	z-index: 9999;
}

#nav.shown a:link,
#nav.shown a:visited {
}

#nav.shown a:hover {
	background: #005aa0;
}

#nav.shown h2,
#nav.shown h2 span {
	display: none;
}

/*
-----------------
4 left nav shadow
-----------------
*/

#nav:before {
	content: '';
	width: 8px;
	height: 100%;
	position: absolute;
	right: 0;
	display: block;
	top: 0
}

#nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#nav li {
	font-size: 13px;
	margin: 0;
}

#nav a:link,
#nav a:visited {
	text-decoration: none;
	color: #000;
	background-color: transparent;
}

#nav a:hover {
	color: #778899;
}

#nav a {
	display: block;
	padding: 7px 0 7px 15px;
	margin: 0 9px;
}

#nav a:hover, #nav a:focus,
#nav a:active {
	background: #eee;
	border-radius:7px;
	margin:0 9px;
	color:#000;
}

#nav a:focus {
	border: 1px dashed #ccc;
}

#nav a img {
	margin: 0 7px 0 0;
	vertical-align: top;
}

#nav h2 {
	 color: #2A4F6F;
	background-color: transparent;
	padding: 0;
	color: black;
	 
	 font-size:1px;
	margin: 15px 0;
	position: relative;
	z-index: 99;
	width: 100%;
}

 

#nav h2 span i {
	color: #f7c203;
	margin-right: 5px;
	display: none;
}

/*
--------------
5 main content
--------------
*/

#content {
	margin-left: 17em;
	margin-right: 2em;
	padding: 2em;
	height:  auto;
	position: relative;
}

#content.level2 {
	margin-left: 42em;
}

#content.nopaddingArea {
	padding: 0;
}

.mainpaddingArea {
	padding: 2em;
}

#content p {
	font-size: 16px;
	line-height: 1.6em;
	FONT-FAMILY: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
	color:#0d0d0d;
}

#content ul,
#content ol {
	font-size: 90%;
}
#content ul li p,
#content ol li p,
#content ul p,
#content ol p {
	margin:0;
	padding:0;
}
#content strong {
	font-weight:600;
}


/*
------------------------
main content heading (h2)
-------------------------
*/

#content h2 {
	display: inline-block;
	vertical-align: baseline;
	color:#0d0d0d;
}


/* overflow hidden to parents */

.wt-right-column:after {
	content: '';
	background: #e5eef3;
	position: absolute;
	bottom: -9999px;
	top: 0;
	left: 0;
	width: 100%;
}


/*
-------------
6 breadcrumbs
-------------
*/

#content .breadcrumbs {
	display: inline-block;
	padding: 4px 2em;
	margin: 0;
}

#content .breadcrumbs a {}

#content .breadcrumbs a:before {
	content: '';
}

#content .breadcrumbs a>i {
	vertical-align: middle;
	font-size: 12px;
	margin: 0 5px;
}


/*
------------
7 Top Menu 1
------------
*/

#TopDashboardMenu1 {
	margin: 0 0 30px 0;
}

#TopDashboardMenu1 ul,
#TopDashboardMenu1 li,
#TopDashboardMenu1 ul li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#TopDashboardMenu1 ul {
	width: 100%;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	display: -ms-flex;
	display: -webkit-flex;
	display: flex;
}

#TopDashboardMenu1 li {
	margin-right: 20px;
	vertical-align: top;
}

#TopDashboardMenu1 li a {
	display: block;
	padding: 10px;
	text-align: center;
	max-width: 150px;
	border: 1px solid transparent;
	color: black;
	font-size: 13px;
	min-height: 70px;
}

#TopDashboardMenu1 li a:hover {
	border-color: #ddd;
	-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
}

#TopDashboardMenu1 li a span {
	display: block;
	margin: 0 0 10px 0;
}

#TopDashboardMenu1 li a:focus {
	border: 1px dashed #66aed4;
}


/*
------------
8 Top Menu 2
------------
*/

#TopDashboardMenu2 {
	margin: 0 0 30px 0;
	align-items: center;
	justify-content: center;
	display: flex;
}

#TopDashboardMenu2>div {
	display: -ms-flex;
	display: -webkit-flex;
	display: flex;
	justify-content: center;
	flex-basis: 100%;
	max-width: 740px;
}

#TopDashboardMenu2>div>div {
	border: 1px solid #ddd;
	-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
	flex: 1 1 0;
	margin: 0 20px 0 0;
	padding: 2px 14px;
	box-sizing: border-box;
	border-radius: 70px;
	display: flex;
}

#TopDashboardMenu2>div>div a {
	display: flex;
	align-items: center;
	justify-content: center;
}

#TopDashboardMenu2>div>div a:hover {
	text-decoration: none;
}

#TopDashboardMenu2>div>div a>div {
	display: table-cell;
	vertical-align: top;
}

#TopDashboardMenu2>div>div a>div.image {
	width: 30px;
}

#TopDashboardMenu2>div>div a>div.content .heading {
	displaY: block;
	margin: 0;
}

#TopDashboardMenu2>div>div a>div.content .text {
	color: black;
}

/*
-------------
9 Main Menu 3
-------------
*/

#MainDashboardMenu {
	display: -ms-flex;
	display: -webkit-flex;
	display: flex;
	max-width: 1000px;
	justify-content: center;
	margin-bottom: 20px;
}

#MainDashboardMenu>div {
	flex: 1 1 auto;
}

#MainDashboardMenu>div#Resources {
	flex-grow: 3;
	margin: 0 20px 0 0;
}


/*
---------------
10 My Resources
---------------
*/

#Resources {}


/* 
--------------------------------------------
11 DASHBOARD responsive tables used globally
--------------------------------------------
*/

.responsiveTbl table {
	text-align: center;
	width: 100%;
}

.responsiveTbl table img {
	margin: 0 auto;
	margin-right: 5px;
}

.responsiveTbl table img.thumb {
	max-width: 20px;
}

.responsiveTbl tr {
	background: #fff;
	border-bottom: 1px solid #ccc;
}

.responsiveTbl tr:hover {
	background: aliceblue;
}

.responsiveTbl tr:hover .msg {
	opacity: 1;
	top: 0;
}

.responsiveTbl th,
.responsiveTbl td {
	padding: 6px;
	vertical-align: middle;
	text-align: left;
	word-wrap: break-word;
	white-space: normal;
	color: black;
	font-weight: normal;
	font-size: 13px;
	background: transparent;
}

.responsiveTbl td a {
	color: #0078d4;
	font-weight: 600;
}

.responsiveTbl th:nth-child(2),
.responsiveTbl td:nth-child(2) {
	text-align: left;
}

.responsiveTbl td.status {
	color: darkorange;
}

.responsiveTbl td.status.rejected {
	color: red;
}

.responsiveTbl td.status.approved {
	color: green;
}

.responsiveTbl th {
	background: transparent;
	color: black;
	padding: 7px;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 13px;
}

.responsiveTbl th:nth-child(1) {
	width: 5%;
}

.responsiveTbl tr td:nth-child(1) {
	width: 5%;
}

@media only screen and (max-width: 767px) {
	.responsiveTbl .price {
		padding: 0;
		border: none;
		background: none;
	}

	.responsiveTbl .responsiveTbl {
		overflow: auto;
		word-break: normal;
	}

	.responsiveTbl .responsiveTbl table {
		width: 100% !important;
	}

	.responsiveTbl .responsiveTbl table th,
	.responsiveTbl .responsiveTbl table td {
		padding: 8px;
	}
}

/*
---------------------
left nav td th styles
---------------------
*/
#nav .responsiveTbl {
	margin: 0 20px;
}

#nav .responsiveTbl th,
#nav .responsiveTbl td {
	padding: 6px 15px;
}

#nav .responsiveTbl td a {
	padding: 0;
	color: #0078d4
}


/*
---------------
12 Useful Links
---------------
*/
#usefulLinks ul,
#usefulLinks ul li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#usefulLinks ul li a {
	font-size: 13px;
	display: block;
	margin: 0 0 10px 0;
}

/*
------------------
13 Resource Groups
------------------
*/

#ResourceGroups {
	width: 100%;
}

/*
---------------
14 Filter Forms
---------------
*/
#ResourceGroups .filterforms {
	margin: 0 0 30px 0;
}

#ResourceGroups .filterforms form {
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	flex-wrap: nowrap;
	justify-content: space-around;
}

#ResourceGroups .filterforms form>* {
	flex: 1 1 0;
}

#ResourceGroups .filterforms input[type="text"],
#ResourceGroups .filterforms select {
	width: 100%;
	padding: 2px;
	box-sizing: border-box;
	font-family: az_ea_font, "Segoe UI", wf_segoe-ui_normal, "Segoe WP", Tahoma, Arial, sans-serif;
}

#ResourceGroups .filterforms #name,
#ResourceGroups .filterforms div.locationContainer {
	flex-grow: 3;
}

#ResourceGroups .filterforms div.locationContainer {
	margin: 0 0 0 10px;
}

#ResourceGroups .filterforms div.tagsContainer {
	margin: 0 10px 0 10px;
}

/*
-------
Overlay
-------
*/

.overlay {
	display: none;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
}

/*
----------
Responsive
----------
*/
@media only screen and (max-width:991px) {
	#nav {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9;
	}

	#nav a:link,
	#nav a:visited {
	}

	#nav a:hover {
		background: #005aa0;
	}

	#header #buttons,
	#header #searchbox,
	#nav h2,
	#nav h2 span {
		display: none;
	}

	#content {
		padding: 1em;
		height: 100%;
		width: 100%;
		margin: 0 !important;
	}

	#TopDashboardMenu2>div {
	}

	#TopDashboardMenu1 ul {
		flex-wrap: wrap;
	}

	#TopDashboardMenu2>div>div {
	}
}

/* For WebKit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
	width: 12px;
	/* Width of the scrollbar */
	height: 12px;
	/* Height of the scrollbar */
}

::-webkit-scrollbar-track {
	background: #f1f1f1;
	/* Background color of the track */
	border-radius: 10px;
	/* Makes the track round */
}

::-webkit-scrollbar-thumb {
	background-color: #ccc;
	/* Color of the scrollbar thumb */
	border-radius: 10px;
	/* Makes the thumb round */
	border: 3px solid #f1f1f1;
	/* Adds space around the thumb */
	border-radius: 10px;
}

/* For Firefox */
* {
	scrollbar-width: thin;
	/* Makes the scrollbar thinner */
	scrollbar-color: #ccc #f1f1f1;
	/* Thumb and track colors */
}
	/* Container for chat */
#chat-container {
    position: relative;
    padding-bottom: 60px; /* Ensure there's space at the bottom for the sticky input */
    height: 20vh; /* Make sure the container takes full viewport height */
    overflow-y: auto; /* Allow scrolling for chat history */
    width: 100%;
}

/* Bottom chat input section */
#chat-input-container {
    position: fixed;
    bottom: 0;
    width: calc(100% - 17em);
    background-color: #fff; /* Chat input background */
    
     /* Optional shadow for effect */
    z-index: 100; /* Ensure it is on top of other content */
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
    box-sizing: border-box;
}
.chat-input-container {
	max-width: 790px;
	padding: 10px;
	margin: 0 auto;
	width: 100%;
}

.chat-input-container .input-wrapper {
	display: flex;
	align-items: center;
	background-color: #f0f0f0;
	border-radius: 45px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	padding: 1px 10px;
	position: relative;
}

.chat-input-container textarea {
	flex-grow: 1;
	height: 40px;
	border: none;
	resize: none;
	padding: 10px  10px 0;
	font-size: 16px;
	outline: none;
	box-sizing: border-box;
	background: #f0f0f0;
	font-family: 'Inter', sans-serif;
}

.chat-input-container .attachment-btn,
.send-btn {
	background: none;
	border: none;
	outline: none;
	padding: 8px;
	cursor: pointer;
}

.chat-input-container .attachment-btn {
	margin-right: 10px;
	font-size: 20px;
	color: #4d4d4d;
	transform: rotate(-45deg);
}

.chat-input-container .send-btn {
	font-size: 16px;
	color: #fff;
	background: black;
	width: 35px;
	border-radius: 50%;
}

.chat-input-container .send-btn:hover,
.attachment-btn:hover {
	opacity: 0.7;
}

.chat-input-container textarea:focus {}

.chat-input-container textarea::placeholder {
	color: #9e9e9e;
	font-family: 'Inter', sans-serif;
}

/* Chat container */
.chat-container {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  max-width: 760px;
}

/* Chat Header */
.chat-header {
  background-color: #00aaff;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
}

.chat-header h3 {
  margin-left: 10px;
  font-weight: 600;
}

.chat-icon {
  width: 30px;
  height: 30px;
  object-fit: cover;
}

/* Messages Container */
.messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 0 40px;
}

/* User message bubble */
.user-message {
  align-self: flex-end;
  padding: 20px;
  margin-bottom: 10px;
  max-width: 100%;
  background-color: #f6f6f6;
  padding: 1.25em;
  border-radius: 20px;
  margin-left: 240px;
}

.user-message .message-text {
  margin: 0;
}

/* Bot response message bubble */
.bot-message {
  align-self: flex-start;
  background-color:#fff;
  padding: 20px;
  margin-bottom: 10px;
  position:relative;
}

.bot-message:before {
	content:'';
	position:absolute;
	top:14px;
	left:-34px;
	display:inline-block;
	width:40px;
	height:40px;
	background:url(./img/chatIcon.png);
	background-repeat:no-repeat;
	
	
}

.bot-message .message-text {
  margin: 0;
}

/* Input container */
.input-container {
  display: flex;
  padding: 10px;
  background-color: #ffffff;
  border-top: 1px solid #d1d1d1;
}

.chat-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #d1d1d1;
  border-radius: 20px;
  font-size: 14px;
}

.send-btn {
  background-color: #00aaff;
  color: white;
  border: none;
  border-radius: 50%;
  padding: 10px;
  cursor: pointer;
  margin-left: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.send-btn:hover {
  background-color: #0088cc;
}

.mistakes {
	font-size:10px;
	text-align:center;
}


@media only screen and (max-width:991px) {
	#header {
		margin-left:0;
		width: 100%;
		flex-basis: 100%;
		padding: 5px;
	}
	#chat-input-container {
		left:0;
	}
	.user-message {
		/* width:100%; */
		margin:0;
		justify-content: flex-end;
		align-items: flex-end;
		margin-left: 20%;
	}
	.chat-container {
		max-width:100%!important;
	}
	#TopDashboardMenu2 {
		display:none;
	}
	.messages-container {
 
		  padding: 0 1px;
		font-family:arial, sans-serif;
	}
	.messages-container *,
	#content p{
		/* font-family:arial,sans-serif; */
		font-family: 'Inter', Arial, sans-serif;
		font-size: 14px;
		line-height: 1.5;
		color:#000;
	}
	.bot-message {
		padding:15px 5px;
	}
}
.user-message {
    background-color: #f7f8fa; /* ChatGPT uses this softer shade */
}
.bot-message {
    line-height: 1.5; /* Increases readability */
    padding: 12px 16px; /* More natural spacing */
}
.chat-message {
    max-width: 85%; /* Keeps text readable */
}