/*
Dependencies:
	none
Required by:
	index.css
	main.css
	dashboard.css
	help.css
	
Color definitions:
	"Color name": "RGB code" "(common use)"
	
	red 1: #B32317 (Standard red)
	light red: #EE3425 (gauge, graph)
	dark red: #B12526 (gauge, graph)
	gray 1: #999999 (Font color on white background)
	gray 2: #CCCCCC (Enable textbox border, disabled link)
	black 1: #000000 (Font color on gray background)
	white 1: #FFFFFF (Font color on gray background)
*/

/*
*, *:before, *:after {
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}*/

/*------------------------------------------------------------------*/
/*ELEMENTS*/                                                                  
/*------------------------------------------------------------------*/

/*Textbox*/

input[type=text], input[type=password], input[type=number], select {
	border-color: #CCCCCC;
	border-width: 1px;
	border-style: solid;
    color: #999999;
    width: 150px;
	padding:1px;
	height:20px
}

/*Link*/
a{
	color: #000000;
    font-weight: bold;
}
a:hover{
	color: #B12526;
	border-color: #B12526;
}
.aHref{
	text-decoration: none;
	color: #B32317;
}

/*Button*/
.btnRed{
	border:none;
	box-shadow: 3px 3px rgba(0,0,0,0.3);
	background-color: #B32317;
	color: #FFFFFF;
	font-weight: normal;
	height: 40px;
	min-width: 120px;
	cursor:pointer;
	padding: 2px 6px;
	font-size:18px;
}
.btnRed:disabled{
	color: #CCCCCC;
	background-color: #999999;
}
.btnRed:active{
	background-color: #8C0E15;
	box-shadow:none;
}

.btnGray{
	border:none;
	box-shadow: 3px 3px rgba(0,0,0,0.3);
	background-color: #CCCCCC;
	color: #FFFFFF;
	font-weight: normal;
	height: 40px;
	min-width: 120px;
	cursor:pointer;
	padding: 0 20px;
	font-size:18px;
}
.btnGray:active{
	background-color: #474747;
	box-shadow:none;
}

.btnLeft{
	margin-right:100px;
}
.btnRight{
	margin-left:100px;
}

#window_firmwareModeSelect .btnLeft, #window_backupRestore .btnLeft{
	margin-right:60px;
}

/*Label*/
.lblInput{
	color: #FFFFFF;
}

.lblGray{
	color: #999999;
}

.lblDisabledGray{
	color: #CCCCCC;
}

.lblBlack{
	color: #000000;
}

.lblWhite{
	color:#FFFFFF;
}

.lblRed {
	color:#B32317;
	font-weight: bold;
	font-family: "Arial";
    font-size: 20px;
}

/*------------------------------------------------------------------*/
/*ELEMENTS - DISABLED STATE*/                                                                  
/*------------------------------------------------------------------*/
#delGroup_LDAP.disabled,
#addGroup_LDAP.disabled,
#delGroup_AD.disabled, 
#beforeDelete.disabled, 
#blacklist_removeIP.disabled, 
#blacklist_removePort.disabled,
#terminateSession.disabled,
#addNewUser.disabled,
#addGroup_AD.disabled,
#deleteEventFilter.disabled,
#addEventFilter.disabled,
#deleteLanDest.disabled,
#addLanDest.disabled,
#deleteAlertPolicy.disabled,
#addAlertPolicy.disabled,
#sendTestAlert.disabled
{
	color: #CCCCCC;
	cursor: default;
	text-decoration: none;
}

/*------------------------------------------------------------------*/
/*LAYOUT - GENERIC*/                                                                  
/*------------------------------------------------------------------*/
html, body{
    font-family: "Arial";
    font-size: 15px;
}

#wrapper{
	min-width:1024px;
}

/*------------------------------------------------------------------*/
/*LAYOUT - INPUT PAIR*/                                                                  
/*------------------------------------------------------------------*/
/*Input pair consist in a common input setup, usually containing a label followed by any input element (ex: label followed by a text input).
 */
 
.ShowUserLockMsg{
	text-align:center;
	font-size: 0.5cm;
	color: ash;
	position : relative;

}

.divIptPairCentering{
	display: table;
	margin: 0 auto;
	border-collapse: separate;
	border-spacing: 10px 8px;
}

.divIptPair{
	display: table-row;
}

.divIptPairLeft{
	display:table-cell;
	text-align: right;
}

.divIptPairRight{
	display:table-cell;
}

.divIptPairExtraDivision{
	display:inline-block;
	float:left;
	margin-right: 10px;
}

/*------------------------------------------------------------------*/
/*LAYOUT - TABLE CONTROLS*/                                                                  
/*------------------------------------------------------------------*/
.divTableControls ul .liBorder{
	display:inline; 
	border-right:grey solid thin; 
	padding-right: 5px;
}

.divTableControls ul li{
	display:inline;
}

.divTableControls ul li a{
	color:#000;
	font-weight:bold;
}

.divTableControls ul li a:hover {
	color:#B12526;
	font-weight:bold;
}

/*------------------------------------------------------------------*/
/*COMPONENT - SPINNER*/
/*------------------------------------------------------------------*/
#divSpinner{ 
}

#imgSpinner{
	width: 50px; 
}

#spnProc{
	font-size: 40px;
    padding-left: 15px;
    display: inline-block;
    vertical-align: top;
}

/*------------------------------------------------------------------*/
/*COMPONENT - MODAL*/
/*------------------------------------------------------------------*/

.divModal{
	background-color: #999999;
    color: #000000;
    /*position: fixed;*/
    /*top: 20%;*/
    width: 100%;
    z-index: 1050;
    
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

.divModal:focus {
	outline:none;
}

#window_virtualConsole {
	transform:none;
	-webkit-transform:none;
	top:17%;
	left:0%;
}

.divModal .divModalHeader{
	background-color: #B32317;
	box-shadow: 4px 4px rgba(0,0,0,0.3);
    color: #FFFFFF;
    display: block;
    height: 50px;
    margin: 0 auto;
    position: relative;
    top: -25px;
    width: 70%;
}

.divModal .divModalHelp{
    display: block;
    height: 27px;
    margin: 0 auto;
    position: relative;
    top: -18px;
    width: 70%;
}

.divModal .divModalBody{
	background-color: inherit;
    display: block;
    margin: 0 auto;
    width: 70%;
    max-height: 400px;
    min-height: 50px;
/*     overflow:hidden; */
    position: relative;
    top: -18px;
} 

.divModalBodyBase{
/*	background:#fff;  */
	max-width:92%;
	max-height:392px;
	margin:0 auto;
/* 	overflow: auto; */
	padding-bottom: 25px;
}

.divModalBodyGray {
	background:rgba(0,0,0,0);
	max-width:92%;
	max-height:392px;
	margin:0 auto;
	overflow: auto;
	padding-bottom: 0px;
}

.divModalBodyGray .pModalBodyGray{
	height:50px;
}
.divModalBodyBase label{
	color:#999;
}

.divModalBodyBase select, .divModalBody select{
	color:#999;
	border:1px solid #ccc;
	font-weight:normal;
}

.divModal .divModalFooter{
    background-color: rgba(0, 0, 0, 0);
    display: table;
    margin: 20px auto 10px;
}

.divModalHide {
	display:none;
}

.btnModalClose{
	background-color: rgba(0, 0, 0, 0);
    background-image: url("../images/gui/enabled_exit.png");
    background-size: cover;
    border:0px;
    cursor: pointer;
    display: inline-block;
    float: right;
    height: 35px;
    position: relative;
    right: -18px;
    top: -18px;
    width: 35px;
}

.btnModalClose:focus {
	outline:none;
}

.lblModalHeader{
	font-size: 18px;
	display: inline-block;
	padding: 16px 0 0 40px;
}

.modal-backdrop {
	opacity: 0.7;
    background-color: #FFFFFF;
}

/*------------------------------------------------------------------*/
/*COMPONENT - MODAL - ALERTS*/
/*------------------------------------------------------------------*/

.divModalAlert{
	background-color: #999999;
    color: #000000;
    /*position: fixed;*/
    /*top: 20%;*/
   /*width: 100%;*/
    z-index: 1050;
    
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

.divModalAlert:focus {
	outline:none;
}

#error-generic, #info-generic, #confirm-generic, #warn-generic {
	z-index: 1051;
	background:none;
	border:none;
	box-shadow:none;
	/*margin-top: 10%;*/
}

.modalAlertsClose {
	height: 30px;
    left: 545px;
    position: absolute;
    top: -16px;
    cursor:pointer;
}

.modalAlertsButtonCenter {
	left: 210px;
    position: relative;
    top: -30px;
    font-size: 18px;
}

.modalAlertsButtonLeft {
	font-size: 18px;
    left: 11px;
    position: relative;
    top: -23px;
}

.modalAlertsButtonRight {
/* 	background: none repeat scroll 0 0 #CCCCCC; */
    font-size: 18px;
    left: 305px;
    position: relative;
    top: -23px;
}

#error-generic .modal-header, #confirm-generic .modal-header, #warn-generic .modal-header, #info-generic .modal-header {
	color: #ffffff;
	-webkit-box-shadow: 4px 4px 0px 0px rgba(50, 50, 50, 0.4);
	-moz-box-shadow:    4px 4px 0px 0px rgba(50, 50, 50, 0.4);
	box-shadow:         4px 4px 0px 0px rgba(50, 50, 50, 0.4);
 	background: #B32317;
 	border:none;
 	height:40px;
 	font-size:18px;
 	font-family: arial;
 	width: 530px;
}

#error-generic .modal-header h3, #confirm-generic .modal-header h3, #warn-generic .modal-header h3, #info-generic .modal-header h3 {
	font-weight:normal;
	margin: 4px 0 0 40px;
}

#error-generic .modal-body, #confirm-generic .modal-body, #warn-generic .modal-body, #info-generic .modal-body {
	background: none repeat scroll 0 0 #FFFFFF;
    min-height: 100px;
    left: 25px;
    position: relative;
    width: 480px;
    z-index: -1;
}

.modalAlertImgs {
	height:65px;
}

.modal-figure-center{
	height:65px;
	width:65px;
	float:left;
	position:absolute;
    top:50%;
    margin-top:-45px;
	min-height:41px;
	float:left;
}

.modal-text-center{
	margin-bottom: 9%;
    margin-left: 80px;
    margin-top: 6%;
    width: 370px;
    text-align: center;
}

/*------------------------------------------------------------------*/
/*COMPONENT - HELP ICON*/
/*------------------------------------------------------------------*/
.aHelpIcon, .aModalHelpIcon {
    border: 2px solid #999999;
    border-radius: 16px;
    color: #999999;
    font-size: 13px;
    font-weight: 900;
    padding: 2px 6px;
    text-decoration: none;
}

.aModalHelpIcon{
	border: 2px solid #FFFFFF;
	color: #FFFFFF;
	display: inline-block;
    float: right;
    /*position: absolute;
    bottom: -35px;
    right: 1px;*/
}

/*------------------------------------------------------------------*/
/*COMPONENT - SWITCH*/
/*------------------------------------------------------------------*/
.onoffswitch {
    -moz-user-select: none;
    margin-top: 2px;
    position: relative;
    width: 60px;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    border: 1px solid #999;
    border-radius: 12px;
    cursor: pointer;
    display: block;
    margin-top: 3px;
    overflow: hidden;
    text-transform: uppercase;
    font-weight:bold;
    font-size: 8pt;
}
.onoffswitch-inner {
    margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
    width: 200%;
}
.onoffswitch-inner:before {
    background-color: #B32317;
    border-radius: 6px 0 0 6px;
    color: #FFFFFF;
    content: "on";
    text-align: center;
    margin-left: -8px;
/*     padding-left: 14px; */
}
.onoffswitch-inner:after {
    background-color: #ccc;
    border-radius: 0 6px 6px 0;
    color: #FFFFFF;
    content: "\00a0 \00a0 off";
    text-align: center;
    margin-left: 8px;
/*     padding-right: 12px; */
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    -moz-box-sizing: border-box;
    border-radius: 6px;
    color: #FFFFFF;
    float: left;
    height: 18px;
    line-height: 18px;
/*     padding: 0; */
    width: 50%;
}
.onoffswitch-switch {
    border: 1px solid #A6A6A6;
    border-radius: 18px;
    bottom: 0;
    margin: 0;
    position: absolute;
    right: 40px;
    top: 0;
    transition: all 0.3s ease-in 0s;
    width: 18px;
    background: #EDEDED;
    background-image: -moz-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%); 
    background-image: -webkit-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%); 
    background-image: -o-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%); 
    background-image: linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%);
}
.onoffswitch-inner[disabled]:before {
	opacity:0.3;
	cursor:not-allowed;
}
.onoffswitch-inner[disabled]:after {
	opacity:0.3;
	cursor:not-allowed;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0; 
}

.onoffswitch-box{
	clear:left;
}

/*------------------------------------------------------------------*/
/*COMPONENT - TIME SLIDER*/
/*------------------------------------------------------------------*/
.divModal .ui-slider .ui-slider-handle {
	border-radius: 0;
    width: 0.7em;
    background:#B32317;
    border:none;
}

.divModal .ui-slider .ui-slider-handle:hover {
	background:#B32317;
}

.labelTimeSlider {
	color:#999;
	display: inline-block;
	margin-top:-1px;
}

.divModal .ui-slider-horizontal {
	height:1px;
	border:none;
	margin-top:15px;
	background:#000;
}

.divModal .ui-slider-horizontal .ui-slider-handle {
	top:-10px;
}

.divModal .ui-slider .ui-slider-range {
	background:#000;
}

.labelColorFont {
	font-family: Arial, Helvetica, sans-serif;
	color:#999;
	font-size:15px;
}

.labelColorFont12 {
	font-size:12px;
}

.sessionsDiv{
	width:100%;
	float:left;
}

/*------------------------------------------------------------------*/
/*COMPONENT - INPUT*/
/*------------------------------------------------------------------*/

input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
    background-color: #CCCCCC;
    border: 1px none #CCCCCC;
    cursor: not-allowed;
    padding:2px;
}

/*------------------------------------------------------------------*/
/*COMPONENT - DATE PICKER and TIME PICKER*/
/*------------------------------------------------------------------*/
#ui-datepicker-div .ui-corner-all {
	border-radius:0px;
}

#ui-datepicker-div .ui-widget-header {
	background:#B32317;
	border:none;
	font-weight:normal;
}

.ui-datepicker {
	padding:0px;
	background:#fff;
	color:#000;
}

#ui-datepicker-div .ui-state-default, #ui-datepicker-div .ui-widget-content .ui-state-default, #ui-datepicker-div .ui-widget-header .ui-state-default {
	background:#fff;
	color:#000;
	text-align:center;
}
 
#ui-datepicker-div .ui-state-highlight, #ui-datepicker-div .ui-state-active {
	background:#B32317;
 	border:none;
 	color:#fff;
}

#ui-datepicker-div .ui-state-hover {
	border:1px solid #B32317;
}

.ui-datepicker .ui-datepicker-header {
	padding:0px;
}

#ui-datepicker-div .ui-icon-circle-triangle-w {
	background-image: url(../images/gui/enabled_jquery_arrow_left.png);
	background-position:0 0;
}

#ui-datepicker-div .ui-datepicker-prev-hover {
	background:none;
	border:none;
	opacity:1;
}

.ui-datepicker .ui-datepicker-prev {
	top:1px;
	left:1px;
	opacity:0.7;
}

#ui-datepicker-div .ui-icon-circle-triangle-e {
	background-image: url(../images/gui/enabled_jquery_arrow_right.png);
	background-position:0 0;
}

#ui-datepicker-div .ui-datepicker-next-hover {
	background:none;
	border:none;
	opacity:1;
}

.ui-datepicker .ui-datepicker-next {
	top:1px;
	right:1px;
	opacity:0.7;
}

.ui-timepicker-div dl dt {
	color:#999;
	font-weight:bold;
	margin-left:10px;
	font-size:15px;
}

.ui-timepicker-div dl dd {
	font-size:16px;
}

#ui-datepicker-div .ui-slider-horizontal {
	height:1px;
	border:none;
	background:#000;
	margin-top:11px;
}

#ui-datepicker-div .ui-slider-horizontal .ui-slider-handle {
	top: -0.4em
}

#ui-datepicker-div .ui-slider .ui-slider-handle {
	width:0.8em;
	height:0.8em;
	background:#999;
	border:none;
}

#ui-datepicker-div.ui-widget.ui-corner-all button {
	background: #B32317;
    border: medium none;
    color: #FFFFFF;
    opacity: 1;
    padding: 3px 20px;
}

.ui-datepicker .ui-datepicker-buttonpane {
	margin: 1.7em 0 0;
}

/*------------------------------------------------------------------*/
/*COMPONENT - GRAPHIC*/
/*------------------------------------------------------------------*/
#graphicSensor{
/* 	height:383px; */
	width:500px;
}

#graphicSensorEmpty{
	width:100%;
	display:none;
	text-align:center;
}

#graphicSensor .jqplot-yaxis-tick{
	display:none;
}

/*------------------------------------------------------------------*/
/*COMPONENT - DATATABLE*/
/*------------------------------------------------------------------*/
.dataTables_wrapper {
	font-family: Arial, Helvetica, sans-serif;
	font-size:15px;
	font-weight:normal;
	border: 2px solid white;
}
.dataTables_wrapper .ui-widget-header {
	background:#fff;
	border-radius:0px;
	border:none;
	color:#999;
}

.dataTables_wrapper .ui-state-default {
	background:#999;
	border:1px solid #999;
	color:#fff;
}

.dataTables_wrapper tr.odd, .dataTables_wrapper td {
	background:#fff;
	border:1px solid #999;
	color:#000;
}

.dataTables_wrapper tr.odd td.sorting_1, .dataTables_wrapper tr.even td.sorting_1 {
	background:#fff;
	color:#000;
}

.dataTables_wrapper a {
	background:#fff;
	color:#000;
	font-weight:bold;
}

.dataTables_wrapper a:hover {
	background:#fff;
	color:#B12526;
	font-weight:bold;
}

.ui-state-default .ui-icon {
	background-image: url("../webui/libs/jquery/images/gui/ui-icons_222222_256x240.png");
}

.dataTables_wrapper td {
	overflow:hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
}

.dataTables_wrapper .no-ellipsis{
	text-overflow: clip;
	-o-text-overflow: clip;
}

#sys_log_table, #audit_log_table, #event_log_table, #supplies_table, #remote_images_table {
	table-layout: fixed; 
}

label{
	cursor: default;
}

.onoffswitch-label{
	cursor: pointer;
}

.paging_full_numbers .ui-button {
	color:#ccc;
	font-weight:bold;
}

.dataTables_wrapper .first, .dataTables_wrapper .previous, .dataTables_wrapper .fg-button {
	background:#fff;
	color:#ccc;
	border:none;
	font-size:15px;
}

.dataTables_wrapper .dataTables_length select {
	border:1px solid #ccc;
	color:#999;
	font-size:12px;
	background-color: transparent;
}

div.dataTables_filter input {
/* 	border-top:0; */
/* 	border-left:0; */
/* 	border-right:0; */
/* 	border-bottom:1px solid #ccc; */
	background: white url(../images/icons/enabled_looking_glass.png) right  no-repeat;
	background-size:16px 17px;
	padding-right: 17px;
	border-top:0px;
	border-left:0px;
	border-right:0px;
	border-bottom:1px solid #CCCCCC; 
	width: 180px;
    color: #999999;
    height: 20px;
    -webkit-appearance: none;
}

.dataTables_length {
	margin-bottom: 7px;
}

.dataTables_wrapper .breakLine{
	overflow: visible;
	text-overflow: clip;
	white-space: normal;
}

/*------------------------------------------------------------------*/
/*COMPONENT - TABS*/
/*------------------------------------------------------------------*/
.nav-tabs > li {
    background-color: #CCCCCC;
    margin: 0 2px 0 0;
}

.nav {
    margin-bottom: 0px;
    margin-left: 0;
}
.nav-tabs {
    border-bottom: 0px solid #DDDDDD;
    background-color: #999999;
}

.divModalBody .default {
	/*background-color: #FFFFFF;*/
}
.nav-tabs>.active>a, .nav-tabs>.active>a:hover, .nav-tabs>.active>a:focus {
	color: #000;
	background-color: #ffffff;
	border: 1px solid white;
	cursor:pointer;
	text-decoration:none;
	font-weight:bold;
	font-size:19px;
}

.nav-tabs>li>a, .nav-pills>li>a {
	-webkit-border-radius:0;
	border-radius:0;	
	margin-right:0;
	text-decoration:none;
	font-weight:bold;
	font-size:19px;
	color:#000;
}

.divModalBody .tab-content {
	padding: 0px 50px 15px;
	overflow: auto;
	max-height:315px;
}

/*------------------------------------------------------------------*/
/*COMPONENT - ACCORDION*/
/*------------------------------------------------------------------*/
.lineFullBorderBottom{
    font-size: 17px;
    font-weight: bold;
    margin: 0 0 10px;
    padding-bottom: 2px;
}

.arrowDropDown {
	height:9px;
	width:9px;
}

.barBotton{
	border-bottom: 2px solid #000000;
    margin-left: 2%;
    width: 96%;
}

.barBottonFull {
	border-bottom: 2px solid #000000;
    width: 100%;
}

.lineFullBorderBottom a{
	color:#000000;
	text-decoration: none;
}
.upmargin {
    margin-top: 20px !important;
    margin-left: 30px;
}
.text-center {
    text-align: center;
}

label{
    display: initial;
}

p{
    margin: initial;
}
ul,li{
    box-sizing: content-box;
}