body{
    background-color: #333;
    color:white;
}

.config-header{
	height 			: 50px;
	width			: 100%; 
	background-color: #222;
	border-bottom	: 2px solid #888;
	padding			: 10px 30px;
	font-weight		: bold; 
	font-size		: 20px;
}

.config-body{
	height			: calc(100vh - 90px);
	width 			: 100%;
	padding			: 15px;
	overflow 		: auto;
}

.config-footer{
	height			: 40px;
	width			: 100%; 
	background-color: #222;
	border-top		: 2px solid #888;
	padding			: 5px 15px;
}

@media only screen and (max-width: 992px){
	.config-body{
		
	}
}

.input-label{
	font-size 		: 11px;
    padding			: 4px 0px;
    margin-bottom	: 0px 
}

.config-checkbox{
	height			: 15px; 
	width			: 15px; 
}


#note{
    font-weight: bold;
    font-size:20px;
    position: absolute;
}

#log_result{
	min-height: 500px;
}
#log_result > div{
	width: 100%;
	float:left;
	cursor: pointer;
	color : #AAA;
}
#log_result > div:hover{
	font-weight: 600;
}
#log_result > div.new > div{
	color:#FFF;
}

#log_result > div > div{
	float:left;
	width: 50%;
	overflow:hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
#log_result > div > div:nth-child(1){
	width: 140px;
}
#log_result > div > div:nth-child(2){
	width: calc(100% - 140px);
}
#log_result > div > div:nth-child(2):before{
	content: " : ";
}


.display-box{
	background-color: transparent;
	color			: #fff;
	border			: none;
	outline			: none;
	box-shadow		: none;
	font-weight		: bold;
	font-size		: 12px;
	width 			: 100%;
}

.display-box:before{
	content 		: ": ";
}

.min-space{
	padding 		: 3px;
}



/*MYMODAL*/
	.mymodal-main{
		background-color 	: rgba(33,33,33,0.5);
		height 				: 100%;
		width 				: 100%;
		position 			: fixed;
		top					: 0;
		left				: 0;
		z-index 			: 100;
		display 			: none;
	}
	.mymodal-main > .mymodal-content{
		margin 				: auto;
		border 				: 1px solid #fff;
		border-radius 		: 10px;
		width 				: 350px;
		margin-top 			: 10%;
		background-color 	: #666;
		display 			: none;
		animation 			: modal_active_show 0.5s;
		animation-direction : reverse;
	}
	.mymodal-main > .mymodal-content.mymodal-lg{
		width: 80%
	}
	.mymodal-main > .mymodal-content.mymodal-md{
		width: 50%;
	}
	.mymodal-main > .mymodal-content.mymodal-sm{
		width: 30%;
	}
	.mymodal-main.active{
		display 			: block;
	}
	.mymodal-main.active > .mymodal-content{
		display 	: block;
		animation 	: modal_active_show 0.5s;
	}
	.mymodal-main > .mymodal-content > .mymodal-header{
		border-bottom 		: 1px solid #999;
		width 				: calc(100% - 1px);
		margin 				: 0px;
		margin-top 			: 1px;  
		padding 			: 10px;
		min-height 			: 40px; 
		background-color 	: #333;
		color 				: #fff;
		border-top-right-radius: 10px;
		border-top-left-radius: 10px;
	}
	.mymodal-main > .mymodal-content > .mymodal-body{
		width 				: calc(100% - 1px);
		margin 				: 0px;
		min-height 			: 100px; 
		overflow-y 			: auto;
	}
	.mymodal-main > .mymodal-content > .mymodal-footer{
		border-top 			: 1px solid #999;
		width 				: calc(100% - 1px);
		margin 				: 0px;
		margin-top 			: -2px;
		min-height 			: 30px; 
		background-color 	: #333;
		color 				: #fff;
		border-bottom-right-radius: 10px;
		border-bottom-left-radius: 10px;
	}

	@media(max-width: 720px){
		.mymodal-main > .mymodal-content{
			width 		: 90% !important;
			margin-top 	: 5%;
		}
	}

	@media(max-width: 992px){
		.display-box:before{
			content 		: " > ";
		}
	}


	@keyframes modal_active_show{
		0%{
			transform: scale(0.1);
			opacity: 0;
			display: none; 
		}
		100%{
			transform: scale(1);
			opacity: 1;
			display : block;
		}
	}

#notify-error-details .error-client{
	float 		: right;
	font-weight : bold;
	padding 	: 7px 15px;
	font-size 	: 10px; 
}

#notify-error-details .error-date{
	float 		: right;
	font-weight : bold;
	padding 	: 5px 15px;
	font-size 	: 12px; 
	clear 		: both;
}

#notify-error-details .error-message{
	float 		: left;
	padding 	: 20px;
	padding-top : 10px;
}