
/* Custom Rule List  -- START ********************************************************************/

.rulesContainer {
	/* display: flex; */
    width: 100%;
	/* border: solid 1px rgb(255, 255, 255); */
}
.ruleMenu {
	display: table;
	width: 100%;
	margin-bottom: 10px;
	/* border: solid 1px rgb(241, 0, 0); */
}
.rulesListCol1 {
	/* flex: 0 0 100%; */
	display: none;
    width: 100%;
	padding: 10px 10px 10px 0px;
	margin-bottom: 10px;
	border-bottom: solid 1px #686767;
	border-right: solid 1px #686767;
	border-left: solid 1px #686767;
	/* border: solid 1px rgb(241, 0, 0); */
}
.rulesListCol1_Title {
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	color: #00b610;
	/* border: solid 1px rgb(253, 253, 253); */
}
.rulesListCol1_Sensors {
	display: flex;
	/* margin-top: 20px; */
	margin-left: 10px;
	border-bottom: solid 1px #686767;
	/* border: solid 1px rgb(94, 255, 0); */
}
/* .ruleListSensorLineBox {
	flex: 1;
} */
.ruleListSensorLine {
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
}
.ruleListAlertsBox {
	/* flex: 0 0 180px; */
	display: table;
    width: 100%;
	margin-left: 20px;
	/* border: solid 1px rgb(255, 51, 0); */
}
.ruleListAlerts {
	margin-top: 15px;
	margin-right:30px;
	font-size: 22px;
	/* color: #00b610; */
	overflow:none;
	float:left;
}
.rulesListCol1_Equipment {
	display: table;
	/* margin-top: 12px; */
	/* overflow: hidden; */
	/* border: solid 1px rgb(255, 255, 255); */
}
.ruleListEquipBox {
	float: left;
	margin-left: 20px;
	margin-top: 12px;
	width: 310px;
	height: 70px;
	/* border: solid 1px rgb(45, 15, 209); */
}
.ruleListIconBox {
	float: left;
	width: auto;
	height: 100%;
	text-align: center;
	/* border: solid 1px rgb(45, 15, 209); */
}
.ruleListEquipIcon {
	width: auto;
	float: left;
	margin: 0px 10px 0px 5px;
	background-color: #444444;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}
.ruleListSwitchDelay {
	text-align: left;
	padding-left: 6px;
	padding-bottom: 4px;
	font-family: Arial, Helvetica, sans-serif;
	/* border: solid 1px rgb(190, 190, 190); */
}
.ruleListOutletName {
	margin: 0px 7px 0px 7px;
	white-space: nowrap;
	overflow: hidden;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
}
.ruleList {
	padding: 5px;
	background-color: rgb(2, 38, 240);
	/* border-top: solid 1px #686767;
	border-bottom: solid 1px #686767; */
}
.ruleList:hover {
	cursor: pointer;
}
.deleteRule {
	width: 25px;
	float: right;
	margin-top: -2px;
	margin-left: 12px;
	font-size: 20px;
	color: #ffffff;
	/* border: solid 1px rgb(255, 0, 0); */
}
.enableRule {
	font-size:28px;
	color:#ffffff;
	margin-right: 7px;
	margin-top: -7px;
}

/* Custom Rule List  -- END **********************************************************************/

/* Add Custom Rule  -- START ********************************************************************/
/* .rulesContainerBox {
	border: solid 1px rgb(255, 0, 0);
} */
.ruleOptionContainer {
	display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    margin: auto;
	margin-bottom: 10px;
    position: relative;
	text-align: center;
	/* border: solid 1px rgb(255, 0, 0); */
}
.ruleOptionBox {
	display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    margin: auto;
	margin-bottom: 10px;
    position: relative;
	text-align: center;
	border-bottom: solid 1px #676768;
	/* border-bottom: solid 1px #686767; */
	/* border: solid 1px rgb(255, 0, 0); */
}
.rulesTitle {
    width: 100%; 
    margin-bottom: 10px;
    text-align: center; 
    font-size: 20px;
	font-weight: bold;
	color: #ffffff;
	line-height: 1.4;
}
.ruleAlertText {
	display: flex;
	align-items: center;
    margin: auto;
	width: 100%;
	height: 100%;
	text-align: left;
    font-size: 20px;
}
.ruleAlertText:hover {
	cursor: pointer;
	color: #707070;
}
.ruleAlertsContainer {
	display: flex;
	width: 100%;
	margin-bottom: 5px;
	color: #FFF;
	border-bottom: solid 1px #676768;
}
.ruleAlertsContainer:hover {
	cursor: pointer;
	/* color: #707070; */
}
.bootstrapIcon {
	font-size: 46px;
	padding-top: 18px;
	color: #FFFFFF;
	height: 80px
}
.ruleSensorOptionBox {
	float: left;
	width: 30%;
	margin: 10px 10px 10px 10px;
	padding: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: bold;
	color: #FFF;
	border: solid 1px rgb(2, 38, 240);
}
.ruleSensorOptionBox:hover {
	color: #00b610;
	background-color: rgb(32, 32, 32);
	cursor: pointer;
}
#rulesOpenDelay:hover {
	color: #000000;
}
.ruleGreaterLabel {
	color: #FFF;
	font-size: 14px;
	font-weight: normal;
}
.ruleSensorOptionContainer {
	float: left;
	width: 30%;
	margin: 10px 10px 10px 10px;
	padding: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: #00b610;
	border: solid 1px rgb(2, 38, 240);
}
.ruleSensorOptionContainer:hover {
	color: #ffffff;
	background-color: rgb(32, 32, 32);
	cursor: pointer;
}
.ruleSensorValueBox {
	margin-top: 30px;
}
.ruleEquipmentImage {
	background-color: #444444;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
    transition-duration: .5s;
}
.ruleEquipmentImage:hover {
	cursor: pointer;
	background-color: #707070;
    transition-duration: .5s;
}
.ruleEquipmentDelayContainer {
	display: flex;
	width: 100%;
	margin-bottom: 5px;
	border-bottom: solid 1px #676768;
}
.ruleEquipmentDelayBox {
	/* float: left; */
	flex: 1;
	width: 100%;
	margin-bottom: 5px;
	padding-left: 10px;
	/* border-bottom: solid 1px #676768; */
}
.ruleEquipmentDelayLabel {
	width: 100%;
	margin-top: 15px;
	text-align: left;
	color: #00b610;
}
.ruleEquipmentOptionBox {
	display: table;
	margin-top: 5px;
	margin-bottom: 2px;
	width: 100%;
}
.ruleEquipmentDelayInline {
	float: left;
	/* border: solid 1px rgb(17, 0, 255); */
}
.ruleEquipmentDelay {
	float: left;
	width: 59px;
	margin-top: 8px;
	/* margin-bottom: 5px; */
	text-align: left;
}
.ruleEquipmentDelay:focus {
    outline: none;
}
.ruleEquipmentIgnore {
	float: left;
	width: 150px;
	margin-top: 8px;
	padding-right: 5px;
	/* margin-bottom: 5px; */
	text-align: right;
}
.ruleEquipmentDelayIcon {
	/* float: left; */
	/* flex: 0 0 150px; */
	/* width: 150px; */
	/* min-width: 90px;
	max-width: 150px; */
	width: 150px;
	height: auto;
	padding: 5px 5px 0px;
	border: transparent;
	margin: 0px 0px 10px;
	text-align: center;
	/* -webkit-transition-duration: .6s; */
	/* transition-duration: .6s; */
	/* border: solid 1px rgb(0, 255, 34); */
}
.ruleEquipmentHeader {
    width: 100%; 
    margin-bottom: 5px;
    text-align: center; 
    font-size: 18px;
	font-weight: bold;
	color: #00b610;
}
.onOff {
	background: -webkit-linear-gradient(#00b610, #ff0000);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.offOn {
	background: -webkit-linear-gradient(#ff0000, #00b610);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
@media (max-width: 1023px) {
	.ruleSensorOptionContainer {
		width: 40%;
	}
}
@media (max-width: 799px) {
	.ruleSensorOptionBox {
		width: 40%;
	}
}
@media (max-width: 599px) {
	.ruleSensorOptionBox {
		width: 45%;
		margin-left: 5px;
		margin-right: 5px;
	}
	.ruleSensorOptionContainer {
		width: 60%;
		margin-left: 5px;
		margin-right: 5px;
	}
	.ruleEquipmentDelayLabel {
		margin-top: 8px;
	}
}
@media (max-width: 502px) {
	.ruleSensorValueBox {
		margin-top: 0px;
	}
}
@media (max-width: 479px) {
	.ruleSensorOptionContainer {
		width: 100%;
		margin-left: 5px;
		margin-right: 5px;
	}
}
@media (max-width: 429px) {
	.ruleEquipmentDelayLabel {
		margin-top: 0px;
	}
}
/* Add Custom Rule  -- END ********************************************************************/
