.IndigoModena #layout-topbar {
	background-color: rgb(41,57,112);
}

body {
	font-family: Verdana, Geneva, sans-serif;
	    padding: 0;
    margin: 0;
}

.Padding20 {
	padding: 20px !important;
}

.PaddingLeftRight20{
	display: block;
    margin: 0px auto;
	padding-left:20px !important;
	padding-right:20px !important;
}
.PaddingLeftRight10{
	display: block;
    margin: 0px auto;
	padding-left:10px !important;
	padding-right:10px !important;
}

.Padding5 {
	padding: 5px !important;
}

.Padding0 {
	padding: 0 !important;
}

.MarginBottom20 {
	margin-bottom: 20px !important;
}

.DefaultFont {
	font-family: Verdana, Geneva, sans-serif;
}

.SubTopBar {
	padding-top: 60px;
	background-color: rgb(76,111,177);
}

.ContactCard {
	border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.ContactCard input {
	font-size: 11px !important;
	font-family: Verdana, Geneva, sans-serif !important;
	background-color: transparent !important;
	color: rgb(51,51,51) !important;
	width: 100% !important;
 	height: 30px !important; 
}

.ContactCard i {
	color: rgb(153, 153, 153);
}

.ContactCard button {
	-webkit-border-radius: 0 !important;
	border-radius: 0px !important;
    background-color: transparent;
    color: rgb(153, 153, 153);
    width: initial !important;
}

.ContactCard button.ui-state-hover, .ContactCard button.ui-state-focus,
	.ContactCard button.ui-state-active {
	color: rgb(125, 125, 125);
	background-color: transparent;
}

.ContactCard .ui-panelgrid {
	border: none;
}

.ContactCard .ui-panelgrid-cell {
	border: none;
}

.ContactCard .ui-panelgrid .ui-panelgrid-content .ui-grid-row {
	align-items: center;
}

#logo img:not(.toolbar-logo) {
	height: 40px;
	margin: auto;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.TexAlLeftImportant {
	text-align: left !important;
}

/* shawn edit: change font-family */
/* .ui-widget {
    font-family: 'Rajdhani', sans-serif !important;
} */

.ui-tabs-top {
    border: none;
    background-color: transparent;
}

.ui-tabs-top .ui-tabs-nav {
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    background-color: rgb(76,111,177);
    border-bottom: none;
}

.ui-tabs-top .ui-tabs-nav li a {
    font-size: 14px;
    font-family: Verdana, Geneva, sans-serif;
}

.ui-tabs-top .ui-tabs-panels {
    background-color: transparent;
    margin: 0;
    border: none;
    background-image: none !important;
}

.ui-tabs-top .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs-top .ui-tabs-nav li.ui-tabs-active a, .ui-tabs-top .ui-tabs-nav li.ui-state-hover a {
    color: #ffffff !important;
    opacity: 1;
}

.ui-tabs-top .ui-tabs-nav li.ui-tabs-selected, .ui-tabs-top .ui-tabs-nav li.ui-tabs-active, .ui-tabs-top .ui-tabs-nav li.ui-state-hover {
    border-bottom: 3px solid rgb(250,171,0) !important;
}

.ui-tabs-top .ui-tabs-nav li a {
    color: #ffffff !important;
    opacity: 0.5;
}

.ui-datatable table tbody tr td .data-table-control-btn {
	width: 100%;
	height: auto;
	border: 0;
	border-radius: 0;
	background: transparent;
	padding: 0;
	color: rgb(153, 153, 153);
	transition: all 0.3s ease;
}

.ui-datatable table tbody tr td .data-table-control-btn span {
	margin: 0;
	width: initial;
	height: initial;
	background-image: none !important;
	display: initial;
}

.search-box {
	padding: 5px 5px !important;
	font-family: Verdana, Geneva, sans-serif !important;
}

.search-box.ui-state-hover, .search-box.ui-state-focus, .search-box.ui-state-active
	{
	color: #546e7a !important;
	border-bottom: solid 1px #b0bec5;
}

.search-btn.ui-state-hover {
	background: rgba(153, 153, 153, 0.2) !important;
	color: #ffffff !important;
}

.search-btn.ui-state-focus {
	background: rgba(153, 153, 153, 0.2) !important;
	color: #ffffff !important;
}

.search-btn.ui-state-active {
	background: rgba(153, 153, 153, 0.2) !important;
	color: #ffffff !important;
}

.search-btn.ui-state-default {
	background: transparent;
	color: #b0bec5;
}

.top-btn span {
	margin: 0;
	width: initial;
	height: initial;
	background-image: none !important;
	display: initial;
}

.ui-datatable table tbody tr td .data-table-control-btn:disabled {
	opacity: 0.3;
}

.ui-datatable table tbody tr td .data-table-control-btn.ui-state-default
	{
	background-color: transparent;
}

.ui-datatable table tbody tr td .data-table-control-btn {
	-webkit-border-radius: 0 !important;
	border-radius: 0 !important;
}

.ui-datatable table tbody tr td .data-table-control-btn.btn-detail.ui-state-hover
	{
	color: #ffffff;
	background-color: #BBBBBB;
}

.ui-datatable table tbody tr td .data-table-control-btn.btn-detail.ui-state-active
	{
	color: #ffffff;
	background-color: #BBBBBB;
}

.ui-datatable table tbody tr td .data-table-control-btn.btn-remove.ui-state-hover
	{
	color: #ffffff;
	background-color: #283573;
}

.ui-datatable table tbody tr td .data-table-control-btn.btn-remove.ui-state-active
	{
	color: #ffffff;
	background-color: #283573;
}

.ui-datatable table tbody tr td .data-table-control-btn.btn-disable.ui-state-hover
	{
	color: #ffffff;
	background-color: #C14A57;
}

.ui-datatable table tbody tr td .data-table-control-btn.btn-disable.ui-state-active
	{
	color: #ffffff;
	background-color: #C14A57;
}

.ui-datatable table tbody tr td .data-table-control-btn.btn-enable.ui-state-hover
	{
	color: #ffffff;
	background-color: #13A672;
}

.ui-datatable table tbody tr td .data-table-control-btn.btn-enable.ui-state-active
	{
	color: #ffffff;
	background-color: #13A672;
}

.ui-datatable table tbody tr .data-table-control-col {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.ui-paginator-page.ui-state-focus, .ui-paginator .ui-paginator-first.ui-state-focus,
	.ui-paginator .ui-paginator-prev.ui-state-focus, .ui-paginator .ui-paginator-next.ui-state-focus,
	.ui-paginator .ui-paginator-last.ui-state-focus {
	background-color: transparent;
	color: transparent;
}

.ui-paginator .ui-paginator-first .ui-icon {
	background-image:
		url("#{resource['app:images/left-double-arrow-for-data.svg']}");
	background-position: center !important;
	background-size: 100%;
	background-repeat: no-repeat;
}

.ui-paginator .ui-paginator-prev .ui-icon {
	background-image:
		url("#{resource['app:images/left-one-arrow-for-data.svg']}");
	background-position: center !important;
	background-size: 100%;
	background-repeat: no-repeat;
}

.ui-paginator .ui-paginator-next .ui-icon {
	background-image:
		url("#{resource['app:images/right-one-arrow-for-data.svg']}");
	background-position: center !important;
	background-size: 100%;
	background-repeat: no-repeat;
}

.ui-paginator .ui-paginator-last .ui-icon {
	background-image:
		url("#{resource['app:images/right-double-arrow-for-data.svg']}");
	background-position: center !important;
	background-size: 100%;
	background-repeat: no-repeat;
}

.ui-paginator .ui-state-disabled {
	opacity: 0.3;
}

.ui-paginator .ui-paginator-rpp-options {
	outline: medium none;
	color: rgb(102, 102, 102) !important;
	font-family: "robotoregular";
	font-size: 18px !important;
	background-color: #FFFFFF;
	border: 1px solid transparent;
}

.ui-paginator .ui-paginator-rpp-options.ui-state-focus {
	background-color: #FFFFFF !important;
}

.ui-paginator .ui-paginator-current {
	font-size: 12px;
	padding: 15px;
	color: rgb(102, 102, 102);
	font-family: Verdana, Geneva, sans-serif;
}

.ui-paginator .ui-state-active, .ui-paginator .ui-state-hover,
	.ui-paginator .ui-paginator-pages .ui-state-active, .ui-paginator .ui-paginator-pages .ui-state-hover
	{
	color: #4B6DB3 !important;
	background-repeat: no-repeat;
	border-bottom: solid 3px #4B6DB3 !important;
	font-size: 20px;
	border-radius: 0px !important;
}

.ui-paginator-top {
	background-color: #ffffff;
	border-radius: 1px;
}

.ui-paginator-bottom {
	background-color: #ffffff;
	border-radius: 1px;
}

.ui-paginator .ui-paginator-first, .ui-paginator .ui-paginator-prev,
	.ui-paginator .ui-paginator-pages .ui-paginator-page, .ui-paginator .ui-paginator-next,
	.ui-paginator .ui-paginator-last, .ui-paginator .ui-paginator-rpp-options
	{
	font-size: 14px !important;
	padding: 10px 3px !important;
	font-weight: bold;
	border: solid 3px transparent;
	color: rgb(102, 102, 102);
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	border-radius: 0px !important;
	font-weight: normal;
	font-family: Verdana, Geneva, sans-serif;
}

.ui-datatable table thead tr th.ui-state-hover, .ui-datatable table thead tr th.ui-state-active,
	.ui-datatable .ui-datatable-sticky table thead tr th.ui-state-hover,
	.ui-datatable .ui-datatable-sticky table thead tr th.ui-state-active {
	background-color: transparent !important;
}

.ui-datatable table thead tr th.ui-state-focus {
	background-color: transparent;
	box-shadow: none;
}

.top-btn {
	height: 65px;
}

.top-btn.ui-state-default {
	background-color: #BECDE0;
	background-image: none !important;
	display: initial;
}

.top-btn.ui-state-hover {
	background-color: #4A6DB3;
	background-image: none !important;
	display: initial;
}

.top-btn.ui-state-active {
	background-color: #4A6DB3;
}

.ui-datatable-tablewrapper {
	margin: 0px;
}

.ui-datatable table thead tr th {
	padding: 20px;
	background-color: transparent;
	border: none 0px transparent;
	border-bottom: 2px solid #BDCEE1;
}

.ui-datatable table tbody tr td {
	background-color: transparent;
	border: none 0px transparent;
	border-bottom: 1px solid #E9E9E9;
	color: rgb(102, 102, 102);
	font-family: Verdana, Geneva, sans-serif;
    font-size: 13px;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* .ui-dialog .ui-dialog-titlebar {
	text-align: center;
	border-bottom: 0 !important;
	margin-top: 10%;
	padding: 0 !important;
}

.ui-dialog {
	-webkit-border-radius: 5px !important;
	border-radius: 5px !important;
}

.ui-dialog .ui-dialog-title {
	margin: 0 auto !important;
	float: none !important;
}

.ui-dialog .ui-dialog-footer {
	padding: 0 !important;
	border-top: none !important;
	background-color: #ffffff;
	margin: 0 !important;
	text-align: center !important;
}

.ui-dialog .ui-dialog-buttonpane button {
	margin: 0;
	width: 50%;
	-webkit-border-radius: 0px !important;
	border-radius: 0px !important;
}

.ui-confirmdialog-yes.ui-state-default {
	background-color: #8199CA;
}

.ui-confirmdialog-yes.ui-state-hover {
	background-color: #4A6DB3;
}

.ui-confirmdialog-yes.ui-state-focus {
	background-color: #4A6DB3;
}

.ui-confirmdialog-no.ui-state-default {
	background-color: #DBDBDB;
}

.ui-confirmdialog-no.ui-state-hover {
	background-color: #CCCCCC;
}

.ui-confirmdialog-no.ui-state-focus {
	background-color: #CCCCCC;
}

.ui-confirm-dialog .ui-dialog-content {
	display: table;
	text-align: center;
	margin: auto;
}

.ui-confirm-dialog .ui-dialog-content span {
	margin: 0;
	float: none;
	font-size: 20px;
	display: table-cell !important;
	vertical-align: middle;
}

.ui-confirm-dialog .ui-dialog-content .no-icon {
	margin: 0;
	float: none;
	font-size: 20px;
	display: none !important;
	vertical-align: middle;
} */

.ui-panel .ui-panel-content {
	font-size: 13px;
	font-family: Verdana, Geneva, sans-serif;
	color: #333;
}

.ui-panel .ui-panel-titlebar {
	padding: 10px 15px !important;
	font-size: 12px;
	background-color: #4B6CB2;
	font-family: Verdana, Geneva, sans-serif;
}

.ui-panel .ui-panel-footer {
	font-size: 12px;
	font-family: Verdana, Geneva, sans-serif;
}

.ui-datatable .ui-datatable-odd {
	background-color: #ffffff;
}

.ui-datatable .ui-datatable-even {
	background-color: #ffffff;
}

.ui-datatable-reflow .ui-datatable-data tr.ui-widget-content {
	border-bottom: 1px solid #E9E9E9;
}

.ui-datatable table thead tr th, .ui-datatable table tfoot tr td,
	.ui-datatable table thead tr th {
	font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    letter-spacing: 0pt;
    color: rgb(75,108,178);
    font-weight: 300;
}

.ui-datatable table thead tr .ui-state-default .ui-icon-carat-2-n-s,
	.ui-datatable .ui-datatable-sticky table thead tr .ui-state-default .ui-icon-carat-2-n-s
	{
	background-image: url("#{resource['app:images/updown-navy-arrow.svg']}");
}

.ui-datatable table thead tr .ui-state-active .ui-icon-triangle-1-n,
	.ui-datatable .ui-datatable-sticky table thead tr .ui-state-active .ui-icon-triangle-1-n
	{
	background-image: url("#{resource['app:images/uparrow-navy.svg']}");
}

.ui-datatable table thead tr .ui-state-active .ui-icon-triangle-1-s,
	.ui-datatable .ui-datatable-sticky table thead tr .ui-state-active .ui-icon-triangle-1-s
	{
	background-image: url("#{resource['app:images/downarrow-navy.svg']}");
}

.ui-datatable .ui-datatable-header {
	display: none;
}


.status-success {
	color: rgb(126, 212, 33);
}

.status-fail {
	color: #E94A5B;
}

.DetailCardTopic button.ui-state-hover, .DetailCardTopic button.ui-state-focus,
	.DetailCardTopic button.ui-state-active {
	color: rgb(125, 125, 125);
	background-color: transparent;
}

.ui-fluid .ui-selectonemenu .ui-selectonemenu-trigger, .ui-fluid .ui-selectcheckboxmenu-trigger
	{
	width: 38px !important;
	height: 35px !important;
}

.ui-selectonemenu .ui-selectonemenu-trigger, .ui-selectcheckboxmenu .ui-selectcheckboxmenu-trigger {
	background-color: transparent;
}

.ui-selectonemenu-trigger .ui-icon-triangle-1-s, .ui-selectcheckboxmenu-trigger .ui-icon-triangle-1-s {
	margin-top: 10px !important;
}

.ui-fluid .ui-selectonemenu, .ui-selectcheckboxmenu {
	padding: 0px 32px 0px 0px !important;
}

.DetailCardContent .ui-panelgrid {
	border: 0px none;
	background-color: transparent;
}

.DetailCardContent .ui-panelgrid .ui-panelgrid-content .ui-grid-row {
	border: 0px none;
	background-color: transparent;
}

.ui-panelgrid-cell .ui-fileupload .ui-button {
	width: initial;
}

.ui-panelgrid-cell .ui-fileupload {
	height: 42px;
}

.ui-panelgrid-cell .ui-fileupload .ui-fileupload-content .ui-fileupload-files
	{
	display: none;
}

.ui-panelgrid-cell .ui-fileupload .ui-fileupload-content .ui-fileupload-files .ui-fileupload-cancel
	{
	display: none;
}

.CardAddButton {
	background-color: #BFCEDF;
    border: none;
    border-radius: 5px;
    width: 100%;
    height: 230px; 
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    padding: 5px !important;
}

.CardAddButton.hover {
	background-color: #4A6DB3;
}

.CardAddButton.focus {
	box-shadow: inset 0px 0px 10px 0px rgba(255,255,255,0.7) !important;
}

.AssignmentButtonContainer {
	display: table;
}

.AssignmentButton {
	border-radius: 50% !important;
    border: 6px solid transparent;
    background-color: rgb(248,250,252) !important;
    width: 120px !important;
    height: 120px !important;
    overflow: hidden;
    margin: 10px;
    display: table-cell !important;
    vertical-align: middle;
}

.AssignmentButton.active {
    border: 6px solid rgb(71,141,230);
}

.AssignmentButton.active .icon{
    color: rgb(103,103,103);
}

.AssignmentButton.active .text{
    color: rgb(103,103,103);
}

.AssignmentButton.hover:enabled{
    border: 6px solid rgb(71,141,230);
}

.AssignmentButton.hover .icon:enabled{
    color: rgb(103,103,103);
}

.AssignmentButton.hover .text:enabled{
    color: rgb(103,103,103);
}

.AssignmentButton .icon {
	display: block;
	color: rgb(153,153,153);
	font-size: 24px;
	text-align: center;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.AssignmentButton .text {
	display: block;
	color: rgb(153,153,153);
	font-size: 12px;
	text-align: center;
	font-family: Verdana, Geneva, sans-serif;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.ProfilePic {
	object-fit: cover;
	border-radius: 50%;
}

.CompanyPic {
	object-fit: cover;
	border-radius: 5px;
}

.layout-menu {
	background-color: #222841;
}

.layout-menu li a {
	color: #CCC;
	font-size: 14px;
	font-family: Verdana, Geneva, sans-serif;
}

.layout-menu li ul li {
	color: #CCC;
	font-size: 14px;
	font-family: Verdana, Geneva, sans-serif;
}

#layout-menu-cover:hover .layout-menu>li>a.active-menu, .layout-menu>li>a.active-menu
	{
	background-color: #1B2034;
}

.layout-menu>li>a:hover, .layout-menu>li>a:active, .layout-menu>li>a:focus
	{
	background-color: #1B2034;
}

#layout-menu-cover ul.active-menu {
	background-color: #141827;
}

.layout-menu>li ul li a:focus {
	color: #CCC;
}

.layout-menu li ul li a:hover {
	background-color: #1B2034;
}

#top-menu li ul li a {
	color: #CCC;
	font-size: 14px;
	font-family: Verdana, Geneva, sans-serif;
}

#top-menu li ul {
	background-color: #222841;
}

#top-menu li ul li a:hover, #top-menu li ul li a:focus {
	background-color: #1B2034;
}

.UserName {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 15px;
	letter-spacing: 1pt;
	color: #fff;
	margin-left: 20px !important;
	margin-right: 20px !important;
	margin-top: 2px !important;
}

.UserRole {
	ont-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	letter-spacing: 0pt;
	color: rgb(219, 219, 234);
}

.CardTopic {
	color: #333;
	font-size: 14px;
	font-family: Verdana, Geneva, sans-serif;
}

/* shawn edit: change font-family and color */
.DetailCardContent .ui-inputfield {
	background-color: transparent;
	font-family: 'Rajdhani', sans-serif !important;
    font-size: 13px;
    color: #363636;
}

.DetailCardContent .ui-inputfield.ui-state-default {
	background-color: transparent;
	font-family: Verdana, Geneva, sans-serif !important;
    font-size: 13px;
    color: rgb(51,51,51);
}

.DetailCardContent .ui-inputfield.ui-state-hover {
	background-color: rgba(190, 206, 224, 0.3) !important;
	font-family: Verdana, Geneva, sans-serif !important;
    font-size: 13px;
    border-bottom: solid 1px #b0bec5;
    color: rgb(51,51,51) !important;
}

.DetailCardContent .ui-inputfield.ui-state-focus {
	background-color: rgba(190, 206, 224, 0.3) !important;
	font-family: Verdana, Geneva, sans-serif !important;
    font-size: 13px;
    border-bottom: solid 1px #b0bec5;
    color: rgb(51,51,51) !important;
}

.DetailCardContent .ui-inputfield.ui-state-active {
	background-color: rgba(190, 206, 224, 0.3) !important;
	font-family: Verdana, Geneva, sans-serif !important;
    font-size: 13px;
    border-bottom: solid 1px #b0bec5;
    color: rgb(51,51,51) !important;
}

.DetailCardContent .ui-selectonemenu-trigger.ui-state-hover {
	background-color: rgba(190, 206, 224, 0.3) !important;
	border-bottom: solid 1px #b0bec5 !important;
}

.DetailCardContent .ui-selectonemenu-trigger.ui-state-focus {
	background-color: rgba(190, 206, 224, 0.3) !important;
	border-bottom: solid 1px #b0bec5 !important;
}

.DetailCardContent .ui-selectonemenu-trigger.ui-state-active {
	background-color: rgba(190, 206, 224, 0.3) !important;
	border-bottom: solid 1px #b0bec5 !important;
}

.DetailCardContent .ui-selectonemenu {
	background-color: transparent;
}

.DetailCardContent .ui-selectonemenu.ui-state-hover {
	background-color: transparent;
	border-bottom: solid 1px #b0bec5 !important;
}

.DetailCardContent .ui-selectonemenu.ui-state-active {
	background-color: transparent;
	border-bottom: solid 1px #b0bec5 !important;
}

.DetailCardContent .ui-selectonemenu.ui-state-focus {
	background-color: transparent;
	border-bottom: solid 1px #b0bec5 !important;
}

.DetailCardContent .ui-selectonemenu.ui-state-hover .ui-selectonemenu-label {
	background-color: transparent !important;
}

.DetailCardContent .ui-selectonemenu.ui-state-active .ui-selectonemenu-label {
	background-color: transparent !important;
}

.DetailCardContent .ui-selectonemenu.ui-state-focus .ui-selectonemenu-label {
	background-color: transparent !important;
}

.ui-selectonemenu-panel .ui-selectonemenu-list-item {
	background-color: transparent;
	font-family: Verdana, Geneva, sans-serif !important;
    font-size: 13px;
    color: rgb(51,51,51) !important;
    /*TODO
    */
    white-space: nowrap;
}

.ui-selectonemenu-panel .ui-selectonemenu-list-item.ui-state-hover {
	background-color: rgba(190, 206, 224, 0.3) !important;
}

.ui-picklist .ui-picklist-list {
/* 	display: table;
    table-layout: fixed; */
     width: 100% !important;
     height: 200px !important;
}

.ui-picklist .ui-picklist-buttons-cell .ui-picklist-button-add .ui-icon, .ui-picklist td .ui-picklist-button-add .ui-icon {
	background-image: url("#{resource['app:images/right-arrow-blue.svg']}");
}

.ui-picklist .ui-picklist-buttons-cell .ui-picklist-button-add-all .ui-icon, .ui-picklist td .ui-picklist-button-add-all .ui-icon {
	background-image: url("#{resource['app:images/right-end-arrow-blue.svg']}");
}

.ui-picklist .ui-picklist-buttons-cell .ui-picklist-button-remove .ui-icon, .ui-picklist td .ui-picklist-button-remove .ui-icon {
	background-image: url("#{resource['app:images/left-arrow-blue.svg']}");
}

.ui-picklist .ui-picklist-buttons-cell .ui-picklist-button-remove-all .ui-icon, .ui-picklist td .ui-picklist-button-remove-all .ui-icon {
	background-image: url("#{resource['app:images/left-end-arrow-blue.svg']}");
}

.ui-picklist .ui-picklist-caption {
	background-color: rgb(41,57,112);
    line-height: 35px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    color: rgb(255,255,255);
    text-align: center;
}

.ui-picklist .ui-picklist-list .ui-picklist-item {
	font-family: Verdana, Geneva, sans-serif;
    font-size: 13px;
    color: rgb(51,51,51);
    line-height: 30px;
    padding-left: 20px !important;
    padding-right: 20px !important;
    border-bottom: 1px solid rgb(204,204,204);
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-picklist .ui-picklist-list .ui-state-highlight {
    background-color: rgba(190, 206, 224, 0.3) !important;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 13px;
    color: rgb(51,51,51);
}
/* shawn edit */

.ui-datatable table tbody .ui-state-highlight > td {
	background-color: #4569b6 !important;
}

.ui-panelgrid-content {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 17px;
    color: rgb(51,51,51);
}

.ui-panelgrid-content .SubTitle {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    color: rgb(153,153,153);
}

@media ( max-width : 960px) and (min-width: 640px) {
	#top-menu {
		background-color: #222841;
	}
	#top-menu>li>a:hover, #top-menu li a:focus {
		background-color: #1B2034;
	}
	#top-menu>li>a {
		color: #CCC;
		font-size: 14px;
		font-family: Verdana, Geneva, sans-serif;
	}
	#top-menu li ul.active-menu {
		background-color: #141827;
	}
	#top-menu>li>a.active-menu {
		background-color: #1B2034;
	}
}

@media ( max-width : 640px) and (min-width: 480px) {
	#top-menu {
		background-color: #222841;
	}
	#top-menu>li>a:hover, #top-menu li a:focus {
		background-color: #1B2034;
	}
	#top-menu>li>a {
		color: #CCC;
		font-size: 14px;
		font-family: Verdana, Geneva, sans-serif;
	}
	#top-menu li ul.active-menu {
		background-color: #141827;
	}
	#top-menu>li>a.active-menu {
		background-color: #1B2034;
	}
}

@media ( max-width : 480px) and (min-width: 320px) {
	#top-menu {
		background-color: #222841;
	}
	#top-menu>li>a:hover, #top-menu li a:focus {
		background-color: #1B2034;
	}
	#top-menu>li>a {
		color: #CCC;
		font-size: 14px;
		font-family: Verdana, Geneva, sans-serif;
	}
	#top-menu li ul.active-menu {
		background-color: #141827;
	}
	#top-menu>li>a.active-menu {
		background-color: #1B2034;
	}
}


/*  */

.ui-chkbox .ui-state-active {
    border-color: #999;
}

.ui-chkbox .ui-chkbox-box{
	background-color: transparent;
	border: solid 2px #999;
	width: 12px !important;
    height: 12px !important;
}
.ui-chkbox-box .ui-icon-check {
    border-radius: 1px;
border-bottom: solid 2px #778d9b;
    border-right: solid 2px #778d9b;
    width: 4px;
    height: 9px;
    margin-left: 4px;
    margin-top: -3px;
}
.active-label {
	color: rgb(102, 102, 102);
	font-size: 13px;
	padding-right: 20px !important;
}
.search-box.ui-inputfield {
	font-size: 13px;
	}

a{
	cursor: pointer;
}

.user-avatar{
    border-radius: 50%;
    text-transform: uppercase;
}

.user-avatar.usertable-avatar {
    text-align: center;
}
.usertable-avatar{
	width: 35px;
    height: 35px;
    margin-right: 9px;
    display: inline-block;
}
.user-avatar span{
font-family: Helvetica, Arial;
    font-weight: 300;
    color: #fff;
    font-size: 22px;
    line-height: 37px;
    display: inline-block;
    vertical-align: middle;
}

.ui-datatable table tbody tr:nth-child(6n+1) td .user-avatar,
.user-avatar.avatar-color-1 {
    background-color: #BC517C;
}
.ui-datatable table tbody tr:nth-child(6n+2) td .user-avatar,
.user-avatar.avatar-color-2 {
    background-color: #8CB164;
}
.ui-datatable table tbody tr:nth-child(6n+3) td .user-avatar,
.user-avatar.avatar-color-3 {
    background-color: #6BCDB8;
}
.ui-datatable table tbody tr:nth-child(6n+4) td .user-avatar,
.user-avatar.avatar-color-4 {
    background-color: #DAA86D;
}
.ui-datatable table tbody tr:nth-child(6n+5) td .user-avatar,
.user-avatar.avatar-color-5 {
    background-color: #AB6EDA;
}
.ui-datatable table tbody tr:nth-child(6n+6) td .user-avatar,
.user-avatar.avatar-color-6 {
    background-color: #5C82AD;
}

.ui-tooltip.ui-state-error {
    background-color: #ffffff;
    color: #e53935;
}

.ui-tooltip, .ui-tooltip-global{
	font-size:13px;
	background-color:transparent;
}  
.userTableTooltip{
	background-color: #455a64;
}
.ui-selectonemenu.ui-state-error .ui-selectonemenu-label{
	color:#e53935;
}

.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled {
    opacity: 0.7;
}

button.ui-state-disabled {
    opacity: 0.2;
}

.main{
	max-width: 1180px;
    margin: auto;
}

.ui-inputswitch{
	vertical-align: middle;
	padding: 0px !important;
	padding-bottom: 0px !important;
    height: 23px !important;
    color: white;
    margin-right: 10px;
   border: solid 1px #b0bec5;
   background-color: transparent;
}
	
.ui-inputswitch-handle {
    height: 19px !important;
    background-color: #FFFFFF;
    width: 19px !important;
    border: 2px solid #FFFFFF !important;
    margin-top: 0px !important;
    margin-left: 0px !important; 
}

.ui-inputswitch-on{
	background-color:#6BB319;
	
}
.ui-inputswitch-off{
	background-color:transparent;
}
.ui-inputswitch .ui-inputswitch-on span{
	color: #ffffff;
	text-align: start;
	padding-left: 0px;
	padding-right: 5px;
} 
.ui-inputswitch .ui-inputswitch-off span{
	color: #b0bec5;
}

.ui-inputswitch .ui-inputswitch-on, .ui-inputswitch .ui-inputswitch-off{
	padding-left: 6px;
}
.ui-inputswitch .ui-inputswitch-on span, .ui-inputswitch .ui-inputswitch-off span{
	 font-size: 13px;
	 margin-top: 0px;
}

.status-dropdown {
	width: 100px;
 	bottom: -7px;
/* 	right: 5px; */
	margin-right : 5px;
}

.FilterContent .ui-inputfield{
	background-color: transparent;
	font-family: 'Rajdhani', sans-serif !important;
    font-size: 13px;
    color: rgb(51,51,51);
    padding: 4px 5px !important;
}

.FilterContent .ui-inputfield{
	background-color: transparent;
	font-family: 'Rajdhani', sans-serif !important;
    font-size: 13px;
    color: rgb(51,51,51);
    padding: 4px 5px !important;
}

.FilterContent .ui-selectonemenu, .ui-selectcheckboxmenu {
	padding: 0px 26px 0px 0px !important;
	width: 100px !important;
	display: inline-flex !important;
	margin-right: 15px !important;
}

.FilterContent .ui-selectonemenu-trigger .ui-icon-triangle-1-s, .ui-selectcheckboxmenu-trigger .ui-icon-triangle-1-s {
/* 	margin-top: 5px !important; */
}

.FilterContent .ui-selectonemenu .ui-selectonemenu-trigger, .FilterContent .ui-selectcheckboxmenu .ui-selectcheckboxmenu-trigger {
	/* padding: 0px 5px !important; */
}

.DetailCardTopicRight .ui-button-icon-only .ui-icon {
    font-size: 20px !important;
}

.DetailCredentialCardTopicRight .ui-button-icon-only .ui-icon {
    font-size: 20px !important;
}

.service-btn {
/* 	height: 65px;
 */}

.service-btn.ui-state-default {
	background-color: #BECDE0;
	background-image: none !important;
	display: initial;
}

.service-btn.ui-state-hover {
	background-color: #4A6DB3;
	background-image: none !important;
	display: initial;
}

.service-btn.ui-state-active {
	background-color: #4A6DB3;
}

.service-btn span {
	margin: 0;
 	width: initial;
	height: initial;
	background-image: none !important;
	display: initial;
}

.AssignmentButton .ui-icon {
	color: rgb(153,153,153);
	text-align: center;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.AssignmentButton .ui-button-text {
	display: block;
	padding: 5px 5px;
	color: rgb(153,153,153);
	font-size: 12px;
	text-align: center;
	font-family: Verdana, Geneva, sans-serif;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.CredentialFont {
	font-size: 13px !important;
	font-family: Verdana, Geneva, sans-serif !important;
	background-color: transparent !important;
	color: rgb(51,51,51) !important;
	width: 100% !important;
	height: 22px !important;
}

.CredentialAddButton {
	height: 50px !important;
}

.SearchingPanel .ui-accordion-header{
	background-color: #BECDE0;
	margin-bottom:0px !important;
}

.SearchingPanel .ui-accordion-header.ui-state-hover {
	background-color: #4A6DB3;
}

.SearchingPanel .ui-accordion-header.ui-state-active {
	background-color: #4A6DB3;
}

.CredentialCard {
	border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.CredentialCard input {
	font-size: 13px !important;
	font-family: Verdana, Geneva, sans-serif !important;
	background-color: transparent !important;
	color: rgb(51,51,51) !important;
	width: 100% !important;
	/* height: 22px !important; */
}

.CredentialCard i {
	color: rgb(153, 153, 153);
}

.CredentialCard button {
	-webkit-border-radius: 0 !important;
	border-radius: 0px !important;
    background-color: transparent !important;
    color: rgb(153, 153, 153);
    width: initial !important;
}

.CredentialCard button.ui-state-hover, .ContactCard button.ui-state-focus,
	.ContactCard button.ui-state-active {
	color: rgb(125, 125, 125);
	background-color: transparent !important;
}

.CredentialCard .ui-panelgrid {
	border: none;
}

.CredentialCard .ui-panelgrid-cell {
	border: none;
}

.CredentialCard .ui-panelgrid .ui-panelgrid-content .ui-grid-row {
	align-items: center;
}

.top-add-btn .ui-state-default{
	background-color: #BECDE0;
	background-image: none !important;
	display: initial;
}

.top-add-btn span {
	margin: 0;
	width: initial;
	height: initial;
	background-image: none !important;
	display: initial;
}

.top-add-btn {
    font-size: 30px !important;
    padding-right: 20px;
}

.reset-btn.ui-state-hover {
	background: rgba(153, 153, 153, 0.2) !important;
	color: #ffffff !important;
}

.reset-btn.ui-state-focus {
	background: rgba(153, 153, 153, 0.2) !important;
	color: #ffffff !important;
}

.reset-btn.ui-state-active {
	background: rgba(153, 153, 153, 0.2) !important;
	color: #ffffff !important;
}

.reset-btn.ui-state-default {
	background: transparent;
	color: #b0bec5;
} 

.auditLogTableTooltip{
	background-color: #455a64;
	left: 400px !important;
	right: 400px !important;
	word-break: break-all;
}

.auditLogTableOverlayPanel{
	background-color: #455a64;
	left: 400px !important;
/* 	right: 400px !important;
 */	word-break: break-all;
}

   <!-- styles for chrome and safari -->
   ::-webkit-input-placeholder {
      color: #808080 !important;
      font-weight: normal !important;
   }
   <!-- styles for firefox -->
   :-moz-placeholder {
      color: #808080 !important;
      font-weight: normal !important;
   }
        <!-- styles for internet explorer -->
   .ui-watermark {
         color: #808080 !important;
         font-weight: normal !important;
   }
   
   :-ms-input-placeholder { /* IE10–11 */
    color: #808080 !important;
    font-weight: normal !important;
}

.PasswordPatternText {
	font-size: 15px;
	color: rgb(51, 51, 51);
	font-family: Verdana, Geneva, sans-serif;
}

.FilterContent .SearchingPanel .statusFilter {
	width: 100px;
    margin-right: 5px;
} 

.ui-datepicker-unselectable{
	color : #e0e0e0;
}

.dashboardTable table thead tr th {
	text-align : left;
}

.dashboardTable table tbody tr td {
	text-align : left;
}

#content .content_main .window {
    background: #FFFFFF;
    margin: auto;
    padding-top: 8px;
    padding-left: 10px;
    height: 100%;
}

.mainBody {
	background:white !important;
/* 	overflow-y:hidden;
 */}

.topbarTest {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 50px;
    z-index: 2000000000;
}
.sidebarTest {
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 244px;
    margin-top: 50px;
    background: #394563;
    z-index: 1999999999;
}
.parentTest {
    margin-top: 50px;
    margin-left: 244px;
}

/* .auditLogListDT {
	table-layout: fixed;
    word-wrap: break-word;
} */

.preformatted {
	text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.ui-tooltip {
/*     max-width: 400px;
    white-space:pre-wrap; */
    
}

.redText {
	color :red;
}









/*

for tree table
*/

.ui-treetable table tbody tr td .data-table-control-btn {
	width: 100%;
	height: auto;
	border: 0;
	border-radius: 0;
	background: transparent;
	padding: 0;
	color: rgb(153, 153, 153);
	transition: all 0.3s ease;
}

.ui-treetable table tbody tr td .data-table-control-btn span {
	margin: 0;
	width: initial;
	height: initial;
	background-image: none !important;
	display: initial;
}

.ui-treetable table tbody tr td .data-table-control-btn:disabled {
	opacity: 0.3;
}

.ui-treetable table tbody tr td .data-table-control-btn.ui-state-default
	{
	background-color: transparent;
}

.ui-treetable table tbody tr td .data-table-control-btn {
	-webkit-border-radius: 0 !important;
	border-radius: 0 !important;
}

.ui-treetable table tbody tr td .data-table-control-btn.btn-detail.ui-state-hover
	{
	color: #ffffff;
	background-color: #BBBBBB;
}

.ui-treetable table tbody tr td .data-table-control-btn.btn-detail.ui-state-active
	{
	color: #ffffff;
	background-color: #BBBBBB;
}

.ui-treetable table tbody tr td .data-table-control-btn.btn-remove.ui-state-hover
	{
	color: #ffffff;
	background-color: #283573;
}

.ui-treetable table tbody tr td .data-table-control-btn.btn-remove.ui-state-active
	{
	color: #ffffff;
	background-color: #283573;
}

.ui-treetable table tbody tr td .data-table-control-btn.btn-disable.ui-state-hover
	{
	color: #ffffff;
	background-color: #C14A57;
}

.ui-treetable table tbody tr td .data-table-control-btn.btn-disable.ui-state-active
	{
	color: #ffffff;
	background-color: #C14A57;
}

.ui-treetable table tbody tr td .data-table-control-btn.btn-enable.ui-state-hover
	{
	color: #ffffff;
	background-color: #13A672;
}

.ui-treetable table tbody tr td .data-table-control-btn.btn-enable.ui-state-active
	{
	color: #ffffff;
	background-color: #13A672;
}

.ui-treetable table tbody tr .data-table-control-col {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.ui-treetable .ui-treetable-header {
	background: #264085;
}


.ui-treetable table thead tr th {
    background: #394563;
    color: white;
    border: 1px solid #66708a;
}

.compensationTooltip{
	background-color: #cedeef;
	color : black;
}

.reset-btn.ui-button.ui-button-icon-only .ui-button-text {
	padding: 0px 0px !important;
}

.noHeaderSelection .ui-datatable .ui-selection-column .ui-chkbox-all {
    display: none;
}

.no-header .ui-panel-titlebar{
  display: none !important;
}

.DemoTable table tfoot tr td{
  color: black;
  background-color: white;
  outline: none;
  padding: 10px 20px;
  font-family: 'robotolight';
  font-size: 14px;
  font-family: 'Rajdhani', sans-serif;
}

/* .largerRowSpaceTable table{
    border-collapse: separate;
    border-spacing: 10px;
    *border-collapse: expression('separate', cellSpacing = '10px');
    color: red; 
} */

.Padding10 {
	padding: 10px !important;
}

.demoDetailCard span {
	font-size:15px;
}

.demoDetailCard .ui-panel{
	min-height: 155px;
}

.demo-main-topic {
	font-size:15px;
}

.demo-main-topic a {
	font-size:15px;
}

.DemoInputTest {
	width:60px !important;
}

.DemoTable input {
	padding-right: 1px !important;
}

.installRadioArea table tbody tr td {
	border : 0px;
}

.DemoDetailTable .ui-datatable table tbody tr td {
    padding-bottom: 20px !important;
}

.DemoDetailTable .ui-datatable table tbody tr td td {
	padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.DemoDialogForm .ui-dialog {
	width:450px!important;
}

.datalabel {
  fill: black;
  font-size: 14px !important;
  font-family: 'Rajdhani', sans-serif !important;
}

.ui-datatable .HeaderDisplayNone .ui-sortable-column-icon {
    display: none !important;
}

/*

filter drop down .

*/
.NormalSearchArea .FilterDropDownMenu {
 	width: 150px !important;
	display: block !important;
	padding: 0px 0px 0px 0px !important;
	line-height: 22px !important;
	color: #363636;
	letter-spacing: 0.24px;
	font-size: 14px !important;
	font-weight: 500;
	border: 1px solid #DFE3E9 !important;
	background: #FFFFFF;
	padding-right: 18px !important;
	-webkit-border-radius: 4px 4px 4px 4px !important;
	-moz-border-radius: 4px 4px 4px 4px !important;
	border-radius: 4px 4px 4px 4px !important;
	text-align: left;
	cursor: pointer;
	padding-left: 10px !important;
	font-family: 'Rajdhani', sans-serif !important; 
}

.NormalSearchArea .FilterDropDownMenu .ui-inputfield {
	padding: 0px 0px 0px 0px !important;
	font-size: 14px;
	font-weight: 500 !important;
	letter-spacing: 0.24px;
	color: #363636;
	background: #FFFFFF;
	font-family: 'Rajdhani', sans-serif !important;
}

.NormalSearchArea .PDropDownMenu {
 	width: 150px !important;
	display: block !important;
	padding: 0px 0px 0px 0px !important;
}

.NormalSearchArea .PDropDownMenu.ui-state-error {
	border: 1px solid #f03369 !important;
}

.NormalSearchArea .PDropDownMenu .ui-inputfield {
	padding: 0px 18px 0px 10px !important;
	font-size: 14px;
	font-weight: 500 !important;
	letter-spacing: 0.24px;
	color: #363636;
	background: #FFFFFF;
	font-family: 'Rajdhani', sans-serif !important;
}

.ui-selectonemenu-panel .ui-selectonemenu-filter-container .ui-inputfield {
   /*  height: 22px; */
    max-width: 500px;
    text-align: left !important;
    -webkit-border-radius: 4px 4px 4px 4px !important;
    -moz-border-radius: 4px 4px 4px 4px !important;
    border-radius: 4px 4px 4px 4px !important;
    border: 1px solid #DFE3E9;
    font-size: 14px;
    color: #363636;
/*     padding: 0px 18px 0px 10px !important; */
    font-weight: 500 !important;
    letter-spacing: 0.24px;
    background: #FFFFFF;
    font-family: 'Rajdhani', sans-serif !important;
}



/*     #chart text {
        fill: black;
        font: 10px sans-serif;
        text-anchor: end;
    }
    .axis text {
        font: 10px sans-serif;
    }
    .axis path, .axis line {
        fill: none;
        stroke: #fff;
        shape-rendering: crispEdges;
    }
    body {
        background: #1a1a1a;
        color: #eaeaea;
        padding: 10px;
    }
    path {
        stroke: steelblue;
        stroke-width: 2;
        fill: none;
    } */