body {
	  min-height: 30rem;
	  padding: 0px;
	  margin-bottom:30px;
	  /**/padding-top: 15px;
	  font-family: 'Lato', sans-serif;
	}
	
	h1{margin-top:10px;}
	
	.page-title{font-size: 1.7rem;}
	
	#main-container{ }
	
	.navbar-dark .navbar-brand {
		margin-left:10px;
		color: #fff;
	}
	.bg-dark {
		background-color: #000000!important;
	}
	
	.alert{margin-bottom:0 !important; margin-top:10px !important;}
	
	.form-group {
		margin-bottom: 0.5rem;
	}
	
	.form-group p {
		margin-bottom: 0px !important;
	}
		
	/* maxlength */
	
		.bootstrap-maxlength.label {
			display: inline;
			padding: .2em .6em .3em;
			font-size: 75%;
			font-weight: 400;
			line-height: 1;
			color: #fff;
			text-align: center;
			white-space: nowrap;
			vertical-align: baseline;
			border-radius: .25em	
		}
		.bootstrap-maxlength.label-important,.bootstrap-maxlength.badge-important {
			 background-color: #d9534f
		}
		.bootstrap-maxlength.label-success,.bootstrap-maxlength.badge-success {
			background-color: #5cb85c
		}
		
	
	/* product row */
	
		#draggable-content{}
		#draggable-content .draggable-action{cursor:move !important;}
		#draggable-content .draggable-element{ }
		#draggable-content .draggable-active{  }
	
	/* gallery */
		
		#file-list-content div.document-container{
			padding:10px 0; border-bottom:1px solid #ddd;
		}
		
		#file-list-content { list-style-type: none; margin: 0; padding: 0; width: 100%; overflow:hidden; }
		#file-list-content li { float: left; width: 24%; /*height: 90px; font-size: 4em; */text-align: center; }
		
	/* slider */
	
		#file-list-content li {
			float:left;
			display:block;
			width:150px;
			height:150px;
			cursor:pointer;	
			background:#fff;
			margin:0 5px 5px 0;
			/*padding:10px;*/
			-webkit-border-radius: 7px;
			-moz-border-radius: 7px;
			border-radius: 7px; 
		}	
		#file-list-content div.image-container {
			height: 135px;
			overflow: hidden;
			margin-bottom: 10px;
			vertical-align: middle;
			text-align: center;
			position: relative;
		}
		
		#file-list-content div.image-content{
			overflow: hidden;
			cursor:move !important;
			border: 1px solid #ddd !important;
			padding-left: 10px !important;
			padding-right: 10px !important;
		
		}
		#file-list-content .image-active {
			border:1px dotted #ddd;
		}
		#file-list-content .document-active {
			border:1px dotted #ddd;
		}
		#file-list-content div.thumb-image {
			width: 100%;
			height: 100px;
			display: block;
			position: relative;
		}
		
		#file-list-content div.thumb-image a img{margin:0 auto;}
		
		#file-list-content div.thumb-text {
			padding-top:3px;
			margin-top:2px;
			margin-bottom:0px;
			overflow:hidden;
			height:25px;
			background-color:#FFF;
			
		}

	/* magnific popoup */
	
		.mfp-content {
			width: auto !important;
		}
		.mfp-close {
			/*margin-top:20px;*/
			color: #333 !important;
		}	
		.white-popup-block {
			background: #FFF;
			padding: 20px 30px;
			text-align: left;
			width: 800px;
			margin: 40px auto;
			position: relative;
		}
		
		@media only screen and (max-width: 767px) {
			.white-popup-block {
				width: auto !important;
				max-width:100% !important;
			}
		}
		
	/* signin */
			
			.form-signin {
			  max-width: 300px; 
			  display:block;
			  /*margin:0 auto;*/
			  margin-bottom:30px;
			}

			.form-signin .form-signin-heading,
			.form-signin .checkbox {
			  margin-bottom: 10px;
			}
			.form-signin .checkbox {
			  font-weight: normal;
			}

			.form-signin .form-control:focus {
			  z-index: 2;
			}
			.form-signin input[type="text"] {
			  margin-bottom: 0px;
			  border-radius: 5px;
			}
			.form-signin input[type="password"] {
			  margin-bottom: 0px;
			  border-radius: 5px;
			}
			
			.input-group {
				margin-bottom: 15px;
			}
			.mg-btm{
				margin-bottom:20px;
			}		
	
	
	/* varie */
		
		.hover:hover{background-color:#f4f4f4;}
		
		.input-sm{font-size:14px !important;}
	
		.nopadding {
		   padding: 0 !important;
		}
	
		.nopadding-horiz {
		   padding-left: 0 !important;
		   padding-right: 0 !important;
		}
	
		.nopadding-left {
		   padding-left: 0 !important;
		}
		
		.nopadding-right {
		   padding-right: 0 !important;
		}
		
		.white-popup {
		  position: relative;
		  background: #FFF;
		  padding: 20px;
		  width: auto;
		  max-width: 500px;
		  margin: 20px auto;
		}
		.mfp-wrap,
		.mfp-container, 
		.mfp-content{z-index:999999 !important;}	

		.datepicker-dropdown {z-index:999999 !important;}
		
		.datepicker.dropdown-menu {
		 visibility: visible;
		 opacity: 1;
		 width: auto;
		}
		
		.modal {
			z-index:9999999 !important;
		}	
		.modal-title {
			font-size: 1rem;
		}	
		.modal-header .close {
			padding: 1rem;
			margin: -1rem -1rem -1rem -1rem;
		}
		
		.modal .btn-primary{
			background-color: #F7AB24;
			color: #2B4C6F;
			border: none;
			cursor: pointer;
			text-align:center;
		}
	
		.modal .btn-primary:hover
		{
			background-color: #5A7392;
			color: #FFF;
		}
	
		.modal-body h2
		{
			font-size: 1rem !important;
		}
	/* pagination */
		
		.pages{}
		.pages:after{
					content:"."; clear:both; display:block; visibility:hidden; height:0;	
				}
		
		.pages-bottom{margin-top:20px;}
		.pages-bottom:after{
					content:"."; clear:both; display:block; visibility:hidden; height:0;	
				}
		.pagination-container{}
		.pagination{margin-top:0; margin-bottom:10px;}
		.pagination-totals-container{ padding-right:0 !important; text-align:right;}
		.pagination-totals{ text-align:right;}
		
		.pagination>li>a,
		.pagination>li>span {
		  border: 1px solid #d7d7d7;
		}
		.pagination>li.enabled>a {
		  background: #000;
		  color: #fff;
		  font-weight:bold;
		}
		
		.pagination>.enabled>a, 
		.pagination>.enabled>a:focus, 
		.pagination>.enabled>a:hover, 
		.pagination>.enabled>span, 
		.pagination>.enabled>span:focus, 
		.pagination>.enabled>span:hover {
		  border: 1px solid #DDD;
		}
		.pagination>li>a, .pagination>li>span {color:#000;}
		
		.pagination>li>a:hover, .pagination>li>span {
			color: #000;
		}	
		
		.pagination>.enabled>a, 
		.pagination>.enabled>a:focus, 
		.pagination>.enabled>a:hover, 
		.pagination>.enabled>span, 
		.pagination>.enabled>span:focus, 
		.pagination>.enabled>span:hover {
			z-index: 3;
			color: #fff;
			cursor: default;
			background-color: #000;
			border-color: #DDD;
		}

	@media only screen and (max-width: 420px) {
		h2{font-size:20px; text-align:center;}
		h3{font-size:16px;}
	}
	
	/* autocomplete */
	
		.ui-autocomplete-loading {
			background: white url("../js/ui-anim_basic_16x16.gif") right center no-repeat;
		}
		.ui-draggable, .ui-droppable {
			background-position: top;
		}
		.ui-autocomplete {
			cursor: default; 
			height:300px !important;
			max-height: 300px !important;
			overflow-y: scroll !important;
			/* prevent horizontal scrollbar */
			overflow-x: hidden !important;
			font-family:"Poppins", sans-serif !important; 
			font-size: 11px !important;
		}
		/* IE 6 doesn't support max-height
		* we use height instead, but this forces the menu to always be this tall
		*/
		* html .ui-autocomplete {
		   height: 300px !important;
		}	

		#modal-body-overlay {
			display:    none;
			position:   fixed;
			z-index: 999999999 !important;
			top:        0;
			left:       0;
			height:     100%;
			width:      100%;
			background-color: rgba( 221, 221, 221, .5 );
		}		
		/* When the body has the loading class, we turn
		   the scrollbar off with overflow:hidden */
		body.modal-body-overlay {
			overflow: hidden;   
		}
		
		/* Anytime the body has the loading class, our
		   modal element will be visible */
		body.modal-body-overlay #modal-body-overlay {
			display: block;
		}		
		.custom-control-label {
			margin-bottom: 0;
			cursor: pointer;
		}
		.custom-control-label::before {
			border:1px solid #000;
		}
		
	/* MODAL OVERLAY LOADING */
		
		/* Start by setting display:none to make this hidden.
		   Then we position it in relation to the viewport window
		   with position:fixed. Width, height, top and left speak
		   speak for themselves. Background we set to 80% white with
		   our animation centered, and no-repeating */
		#modal-loading-overlay {
			display:    none;
			position:   fixed;
			z-index: 999999999 !important;
			top:        0;
			left:       0;
			height:     100%;
			width:      100%;
			background: rgba( 221, 221, 221, .5 ) 
url('../js/loader.gif') 50% 50% 
						no-repeat;
		}		
		/* When the body has the loading class, we turn
		   the scrollbar off with overflow:hidden */
		body.modal-loading-overlay {
			overflow: hidden;   
		}
		
		/* Anytime the body has the loading class, our
		   modal element will be visible */
		body.modal-loading-overlay #modal-loading-overlay {
			display: block;
		}