html,body {
   height: 100%;
   width: 100%;
}

@media screen and (min-width: 1024px) {

	/* DESKTOP */
	
	body {
		background: #E5E5E5;
		font-family: 'Ropa Sans', sans-serif;
		margin: 0px;
		padding: 0px;
		padding-bottom: 100px;
	}
	
	.header-bar {
		padding: 10px;
		background: gray;
		height: 100px;
		filter: drop-shadow(0 0 0.25rem gray);
	}

	.admin-header {
		padding: 10px;
		background: gray;
		max-height: 75px;
		filter: drop-shadow(0 0 0.25rem gray);
	}
	
	.header-left {
		text-align: left;
		float: left;
		box-sizing: border-box;
		width: 33%;
	}
	
	.header-center {
		text-align: center;
		float: left;
		box-sizing: border-box;
		color: white;
		font-size: 26px;
		width: 33%;
	}
	
	.header-right {
		text-align: right;
		float: right;
		box-sizing: border-box;
		width: 33%;
	}
	
	
	.bd-logo {
		height: 75px;
	}
	
	.mobile-message {
		display: none;
	}
	
		
	.edit-form {
		/* display: none; */
		padding: 10px;
	}

	.float-column {
		width: 50% !important;
		box-sizing: border-box !important;
		float: left !important;
	}
}

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

.highlight-maroon {
	color: maroon;
}

@media screen and (max-width: 1023px) {

	/* MOBILE */
	
	body{
		background: #E5E5E5;
		font-family: 'Ropa Sans', sans-serif;
		margin: 0px;
		padding: 0px;
	}
	
	.container {
		margin-top: 50px;
		overflow: scroll;
	}

	.header-bar {
		padding: 10px;
		background: gray;
		height: 100px;
		filter: drop-shadow(0 0 0.25rem gray);
		border-radius: 0px 0px 5px 5px;
	}

	.admin-header {
		padding: 10px;
		background: gray;
		filter: drop-shadow(0 0 0.25rem gray);
	}
	
	.header-left, .header-center, .header-right {
		text-align: center;
		box-sizing: border-box;
		margin: auto;
		color: white;
	}
	
	.bd-logo {
		height: 100px;
	}
	
	.mobile-message {
		text-align: center;
		font-size: 1em;
		display: block;
		padding-top: 10px;
		line-height: 1em;
		animation: txtColor 2s infinite linear;
	}


	.edit-form {
		padding: 10px;
	}
	
	.mobile-management {
		padding: 10px 0px;
	}
	
	.reverse-icon-drop {
		float: none !important;
		display: block !important;
		margin: auto !important;
	}
	
	.float-column {
		box-sizing: border-box !important;
		float: none !important;
	}
	
}

#paginator, #paginator a {
	font-size: 12px;
	color: white;
	text-decoration: none;
}

.no-link, .no-link a {
	text-decoration: none;
	color: white;
}

.system-icon {
	border: none;
	width: 30px;
}
	
.action-message {
	text-align: center;
	font-size: 1em;
	display: block;
	padding-top: 30px;
	line-height: 1em;
	animation: txtColor 2s infinite linear;
}


.hide-element {
	display: none;
}

.center-text {
	text-align: center;
}

/* BOOTSTRAP CUSTOMIZATION */
.form-check-input {
	width: 50px !important;
	height: 25px !important;
	margin-left: inherit !important;
	margin-right: 5px;
}
.form-group {
	padding: 5px;
}

.stop-button {
	margin: 5px 0px 0px 0px !important;
	text-transform: uppercase;
	color: white;
	transition: all .25s ease-in-out;
}

.stop-button:hover {
	margin: 5px 0px 0px 0px !important;
	text-transform: uppercase;
	background-color: #868686;
	animation: bgColor 2s infinite linear;
	transition: all .25s ease-in-out;
}
/* END BOOTSTRAP CUSTOMIZATION */


.reverse-icon {
	filter: invert(100%);
	border: none;
}

.reverse-icon-mini {
	filter: invert(100%);
	border: none;
	width: 25px;
}

.reverse-icon-drop {
	filter: drop-shadow(0 0 0.1rem white);
	border: none;
	height: 30px;
	-webkit-transition: transform 0.25s ease-in-out;
	-moz-transition: transform 0.25s ease-in-out;
	-o-transition: transform 0.25s ease-in-out;
	transition: transform 0.25s ease-in-out;
}

.reverse-icon-drop:hover {
	filter: invert(100%) drop-shadow(0 0 0.1rem black);
	border: none;
	height: 30px;
}

.reverse-icon-mobile {
	filter: drop-shadow(0 0 0.1rem white);
	border: none;
	float: right;
	height: 30px;
}

.reverse-icon-drop-type {
	filter: drop-shadow(0 0 0.1rem white);
	border: none;
	height: 30px;
	float: left;
	-webkit-transition: transform 0.25s ease-in-out;
	-moz-transition: transform 0.25s ease-in-out;
	-o-transition: transform 0.25s ease-in-out;
	transition: transform 0.25s ease-in-out;
}

.reverse-icon-drop-type:hover {
	filter: invert(100%) drop-shadow(0 0 0.1rem black);
	border: none;
	height: 30px;
}



.stop-version, .object-text, .task-text {
	font-size: .75em;
	line-height: .75em;
	padding: 0px;
	margin: 0px;
}

h1{
	color: #fff;
	font-weight: normal;
}
h2 {
	color: maroon;
	padding: 0px;
	margin: 0px;
}
h3 {
	padding: 0px 20px 15px 20px;
	margin: 0px;
	font-size: 1em;
}
form {
	padding: 0px;
}


.clear-float {
	clear: both;
}

td {
	padding: 5px;
}


.box {
	float: left;
	width: 50%;
	/*margin-right: 5%;*/
	/*border: 2px solid #333;*/
	/*border-radius: 2px;*/
}
.box:last-child{
	margin: 0px;
}


ul {
	background-color: #CDCDCD;
	border-radius: 5px;
	transition: all .5s ease-in-out;
	min-height: 116px;
}

ul:hover {
	background-color: #939393;
	transition: all .5s ease-in-out;
}

ul:target {
	background-color: #BAA8A9; 
}

ul li {
	width: inherit;
	padding: 15px 20px;
	background-color: #fff;
	border-bottom: 1px solid #c1c1c1;
	color: #000;
	font-size: 20px;
	margin-bottom: 4px;
	border-radius: 5px;
	transition: all .5s ease-in-out;
	-webkit-transition: transform 0.25s ease-in-out;
	-moz-transition: transform 0.25s ease-in-out;
	-o-transition: transform 0.25s ease-in-out;
	transition: transform 0.25s ease-in-out;
	-webkit-transition: box-shadow 0.25s ease-in-out;
	-moz-transition: box-shadow 0.25s ease-in-out;
	-o-transition: box-shadow 0.25s ease-in-out;
	transition: box-shadow 0.25s ease-in-out;
}

ul li:hover {
	cursor: grab;
	/*
	transition: all .5s ease-in-out;
	box-shadow: 0 0 8px rgba(255, 255, 255, 1);
	*/
	color: #000;
}

ul li:target {
	cursor: grabbing;
	color: #000;
}

.saveBGColor {	
	color: white;
	border: thin solid black;
	animation: bgColor 2s infinite linear;
	transition: all .25s ease-in-out;
}

.draftBGColor {	
	color: white;
	border: thin solid black;
	animation: bgColorDraft 2s infinite linear;
	transition: all .25s ease-in-out;
}

.monospace-font {
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace" !important;
}

.rollover {
transition: all .25s ease-in-out;
}

.rollover:hover {
	transition: all .25s ease-in-out;
	background-color: rgba(186,186,186,1.00);
}

@keyframes bgColor {
  0% {
    background-color: #6E0002;
  }
  50% {
    background-color: #F40004;
  }
  100% {
    background-color: #6E0002;
  }
}

@keyframes bgColorDraft {
  0% {
    background-color: #00076E;
  }
  50% {
    background-color: #323ABB;
  }
  100% {
    background-color: #00076E;
  }
}

@keyframes txtColor {
  0% {
    color: #6E0002;
  }
  50% {
    color: #F40004;
  }
  100% {
    color: #6E0002;
  }
}