@import url("../ThirdParty/font-awesome.min.css");


/*html, body, table, div, span{
	font-family: arial, Verdana, Helvetica, Century Gothic, Courier, sans-serif;
}*/

.main-navbar {
    top: 0;
    left: 0;
    width: 61px;
    color: #fff;
    z-index: 10;
    height: 100vh;
    position: fixed;
    background-color: #043765;
}

.main-navbar ul {
    margin:0;
    padding:0;
}

.main-navbar ul li{
    margin:1px 0;
    padding:0;
    position:relative;
}

.main-navbar ul li a{
	margin: 0 10px;
    padding:10px 0;
    color: #fff;
    display: block;
    font-size: 26px;
    text-align: center;
    text-decoration: none;
    opacity: 0.6;
	line-height: 0;
    -webkit-transition: all 0.3s ease-in-out;
 	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.main-navbar ul li.Disabled a{
	cursor: default; /*Turn off the 'pointer' cursor for disabled items */ 
}

.main-navbar ul li svg{
    width: auto;
    height: 30px;
}



.main-navbar ul li:first-child{
	transition: all 0.5s linear;
	margin-bottom:0;
}

.main-navbar ul li:first-child a{
	line-height:0;
	padding-bottom:5px;
}

.main-navbar ul li:first-child a i{
	display: block;
}

.DrawClosed .main-navbar ul li:first-child{
	padding-bottom:0px;
} 


.main-navbar ul li:last-child{
    bottom: 15px;
    width: 60px;
    position: absolute;
}
.main-navbar ul li:last-child  a {
    font-size:16px;
}

.main-navbar ul li a:hover{
    opacity: 1;
}

.main-navbar ul li.Selected a{
    opacity: 1;
}



.main-navbar ul li.Selected:after {
    content:"";
    position:absolute;
    top:35%;
    width: 0;
    height: 0px;
    right:-1px;
    border-style: solid;
    border-width: 6.5px 8px 6.5px 0;
    border-color: transparent #ffffff transparent transparent;
}

.main-navbar ul li:first-child.Selected:after {
    display:none;
}

.sidebar {
    top: 0;
    left: -330px;
    width: 330px;
    color: #4A4A4A;
    z-index: 9;
    padding: 10px;
    height: 100vh;
    position: fixed;
    box-sizing: border-box;
    background-color: #EEF5FB;
    border-right: 1px solid #B9CEDB;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.sidebar.active {
    left: 60px;
}

.nav-link {
    position: relative;
    display: inline-block;
}

.nav-link:hover .tooltiptext {
    opacity: 1;
}

/* Tooltip text */
.nav-link .tooltiptext {
    visibility: hidden;
    position: absolute;
    /*width: 120px;*/
    background-color: #FAFCFF;
    color: #4A4A4A;
    text-align: center;
	white-space: nowrap;
    padding: 5px 10px;
    border-radius: 3px;
    z-index: 1;
    opacity: 0;
	line-height: normal;
    top:50%;
    transition: opacity .6s;
    border: 1px solid #9EBEE0;
   -ms-transform: translateY(-50%); /* IE 9 */
    -webkit-transform: translateY(-50%); /* Safari */
    transform: translateY(-50%);
    -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2);
    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2);
	left: calc(100% + 10px); 
}

/* Show the tooltip text when you mouse over the tooltip container */
.nav-link:hover .tooltiptext {
    visibility: visible;
}

.tooltip-right {
    top: -5px;
    left: 90%;
}
.nav-link .tooltip-right:after, .nav-link .tooltip-right:before{ 
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.nav-link .tooltip-right:after {
	border-color: rgba(250, 252, 255, 0);
	border-right-color: #FAFCFF;
	border-width: 5px;
	margin-top: -5px;
}
.nav-link .tooltip-right:before {
	border-color: rgba(158, 190, 224, 0);
	border-right-color: #9EBEE0;
	border-width: 6px;
	margin-top: -6px;
}


.btn{
	padding: 6px 20px;
	font-size: 14px;
	cursor: pointer;
	-webkit-transition: all 0.3s ease-in-out;
 	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

/* Div styled icon buttons */

.btn-secondary{
	border: 1px solid #b9cedb;
	background-color: #fafcff;
	display: inline-block;
	border-radius: 3px;
}
.btn i{
	margin-right: 5px;
}

.btn-secondary:hover{
	background-color: #043765;
	border-color: #043765;
	color:#fff;
}

.btn-secondary:disabled, .btn-secondary[disabled], .btn-secondary.disabled
{
	cursor: not-allowed;
	color: #79868c;
	background-color: #f4f4f4;
}

.btn-secondary.remove{
	background-color: #ff4a4d;
	border-color: #ff4a4d;
	color:#fff;
}

.btn-secondary.remove:hover{
	background-color: #990000;
	border-color: #990000;

}

/*SLA Status 'pills' that are different colours for different statuses */

.sla-pills
{ padding:6px 0; font-size:12px; border-radius: 3px; color:#fff; width:57px;text-align: center;}

.sla-pills.threat 
{background-color: #fd7e14;}
.sla-pills.failure 
{background-color: #ff4a4d;}
.sla-pills.warning 
{background-color: #ffc107;}
.sla-pills.info, .sla-pills.ok
{ background-color: #4caf50; }
.sla-pills.none, .sla-pills.not-monitored
{background-color: #4d616b ;} 

.sla-pills.clickable
{ cursor: pointer; }
.sla-pills.threat.clickable:hover
{background-color: #b1580e;}
.sla-pills.failure.clickable:hover 
{background-color: #b23436;}
.sla-pills.warning.clickable:hover 
{background-color: #b28705;}
.sla-pills.info.clickable:hover, .sla-pills.ok.clickable:hover
{ background-color: #357a35;}
.sla-pills.none.clickable:hover, .sla-pills.not-monitored.clickable:hover
{background-color: #36444b ;} 

.comboboxPopUp .sla-pills, .comboboxInner .sla-pills{
	background-color: white;
	padding:0px; border-radius: 0px; width:initial; text-align: center; 
	text-align: left;
	width: 100%;
}

.comboboxPopUp .mouseover .sla-pills{
	color:#fff !Important;
}
.comboboxPopUp .mouseover .sla-pills.threat 
{background-color: #fd7e14;}
.comboboxPopUp .mouseover .sla-pills.failure
 {background-color: #ff4a4d;}
.comboboxPopUp .mouseover .sla-pills.warning 
{background-color: #ffc107;}
.comboboxPopUp .mouseover .sla-pills.info, .comboboxPopUp .mouseover .sla-pills.ok 
{background-color: #4caf50;}
.comboboxPopUp .mouseover .sla-pills.none, .comboboxPopUp .mouseover .sla-pills.not-monitored 
{background-color: #4d616b ;}

.comboboxPopUp .sla-pills.threat, .comboboxInner .sla-pills.threat
{color: #fd7e14; }
.comboboxPopUp .sla-pills.failure, .comboboxInner .sla-pills.failure
{color: #ff4a4d;}
.comboboxPopUp .sla-pills.warning, .comboboxInner .sla-pills.warning
{color: #ffc107;}
.comboboxPopUp .sla-pills.info, .comboboxPopUp .sla-pills.ok, .comboboxInner .sla-pills.info, .comboboxInner .sla-pills.ok
{color: #4caf50;}
.comboboxPopUp .sla-pills.none, .comboboxPopUp .sla-pills.not-monitored, .comboboxInner .sla-pills.none, .comboboxInner .sla-pills.not-monitored
{color: #4d616b ;}

/* Icon spans */

.nav-icon{
	text-align: center;
	font-size: 14pt;
}
.nav-icon.Legend{
	color: #17a2b8;
}
.Legend i {
    padding-right: 10px;
    padding-top: 5px;
}

/* Check boxes */
.CheckHolder{
	white-space: nowrap;
	margin-right: 4px;
	height: 18px;
}
.CheckHolder label{
	padding-left: 7px;
	vertical-align: middle;
}
.CheckHolder input{
	vertical-align: top;
}

.CheckHolder[disabled]{
	background-color: #b2b2b2;
    border-color: #818f98;
    cursor: not-allowed;
    color: #79868c;
}

.secondary-nav{
	display:block;
	margin-bottom: 8px;
	margin-top: 13px;
}


.grid-filter{
	margin-bottom:10px;
	display: block;
}

.filter-wrapper{
	position: relative; 
	overflow-x: auto;
    overflow-y: hidden;	
}
.filter-holder{
    transition: width 0.6s linear;	
}
.filter-holder table{
    padding-bottom: 8px;	
}
.ClientHolder.Closed .filter-holder{
	width: calc(100vw - 90px);
}
.ClientHolder.Open .filter-holder{
	width: calc(100vw - 340px);
	padding-top: 8px;
}

.select-trigger {
   text-align: center;
   cursor: pointer;
   padding: 2px;
}
.comboboxInnerGrey .select-trigger{
	color: #ffffff;
}

.settings-help {
	padding-Bottom: 5px;
	display:flex;
	align-items:center;
	width: 100%;
	position: relative;
}
.settings-help p {
	display: inline-block;
	margin: 5px 130px 5px 10px;
}
.settings-help .btn-secondary {
	float: right;
	position: absolute;
	right: 12px;
	top: 2px;
}

/* data Grid styles */
.cliented-grid-holder.Tickets, .cliented-grid-holder .data-panel{
	position: relative; width: 100%;
}

.ClientHolder.Open .cliented-grid-holder.Tickets .mockPannel .dataGridScroller { 
	 max-width:calc(100vw - 410px) !important; 
	 min-width:calc(100vw - 410px) !important; 
}
.ClientHolder.Closed .cliented-grid-holder.Tickets .mockPannel .dataGridScroller {
	max-width: calc(100vw - 160px) !important;
	min-width: calc(100vw - 160px) !important;
	max-height: initial !important;
}
.ClientHolder .cliented-grid-holder.Tickets .mockPannel{ 
	transition: all 0.6s linear;  
}
.ClientHolder.Open .cliented-grid-holder.Tickets .mockPannel{ 
	width: calc(100vw - 400px) !important;  
}
.ClientHolder.Closed .cliented-grid-holder.Tickets .mockPannel{ 
	width: calc(100vw - 150px) !important; 
}

.cliented-grid-holder.ServiceDesk.AutomationRules .dataGridScroller{ 
	max-height:calc(50vh - 150px) !important; 
}
.cliented-grid-holder.ServiceDesk.AutomationRules.only .dataGridScroller{ 
	max-height:calc(100vh - 275px) !important; 
}

/* Generic Grid sizes */
.ClientHolder.Open .cliented-grid-holder .dataGridScroller { 
	 width: calc(100vw - 330px) !important; 
	 max-width:calc(100vw - 330px) !important; 
	 min-width:calc(100vw - 330px) !important; 
}
.ClientHolder.Open .cliented-grid-holder .gridViewPanelCell .dataGridScroller { 
	 width: calc(100vw - 365px) !important; 
	 max-width:calc(100vw - 365px) !important; 
	 min-width:calc(100vw - 365px) !important; 
}
.ClientHolder.Closed .cliented-grid-holder .gridViewPanelCell .dataGridScroller {
	width: calc(100vw - 110px) !important;
	max-width: calc(100vw - 110px) !important;
	min-width: calc(100vw - 110px) !important;
}
.ClientHolder.Closed .cliented-grid-holder .dataGridScroller {
	width: calc(100vw - 80px) !important;
	max-width: calc(100vw - 80px) !important;
	min-width: calc(100vw - 80px) !important;
}

/* specifics for the Device Grid, eventualy this should be controlled by .ClientHolder .cliented-grid-holder.devices .dataGridScroller */

#deviceManagementPanelDetails .gridViewHeaderFloatHolder{
	box-shadow: none;
}

#deviceManagementPanelDetails .gridViewHeaderFloatHolder td.gridReportViewColumnHeader,
#deviceManagementPanelDetails .gridViewHeaderFloatHolder td.gridViewColumnHeader,
#deviceManagementPanelDetails .gridViewHeaderFloatHolder .gridReportViewColumnHeader td, 
#deviceManagementPanelDetails .gridViewHeaderFloatHolder .gridViewColumnHeader td{
	background-color: #043765;
}

#deviceManagementPanelDetails .gridViewHeaderFloatHolder .gridViewColumnHeader span{
	color: #fff;	
}

/* Landing Pages for settings overviews */
.blank-page{
	position:relative;
	text-align: center;
}

.blank-page .blank-page-message {
    display: inline-block;
    text-align: left;
    padding: 40px;
}

.blank-page .blank-page-icon {
    display: inline-block;
}

.blank-page .blank-page-title {
    font-size: 22pt;
    font-weight: normal;
    color: #043765;
}

.blank-page .blank-page-link {
    margin-top: 10px;
}

.blank-page .blank-page-link span,
.blank-page .blank-page-message {
    font-size: 11pt;
    color: #666666;
}

.blank-page .blank-page-link .clickable {
    cursor: pointer;
    text-decoration: underline;
}

.blank-page .btn-how {
    border: 2px solid #043765;
    margin-right: 10px;
    color: #043765;
    font-weight: bold;
}

.blank-page .btn-how:hover {
    color: white;
}

.blank-page .btn-create {
    background-color: #043765;
    color: white;
    font-weight: bold;
}

#overviewPanelEventsGrid .dataGridScroller {
    max-height: calc(100vh - 250px) !important;
}