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;
	}
	
	.editName {
		font-size: 2.25vw !important;
		padding: 0 !important;
		margin: 0 !important;
		color: white;
	}

	.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;
		width: 50%;
		box-sizing: border-box;
		margin: auto;
	}
	
	.header-right {
		text-align: right;
		float: right;
		width: 50%;
		box-sizing: border-box;
		margin: auto;
	}
	
	.licenseName {
		font-size: 1.5vw;
		line-height: 1.5vw !important;
		padding: 0px;
		margin: 0px;
		color: white;
		/*line-height: 0em;*/
		transform: translate(1em, 50%);
	}
	
	.visitour-logo {
		height: 40px;
	}
	
	
	
	.admin-message {
		text-align: center;
		font-size: 1em;
		display: block;
		padding-top: 10px;
		line-height: 1em;
		animation: txtColor 2s infinite linear;
	}
	
	.mobile-message {
		display: none;
	}
	
	.draggable-main{
		margin: 0 auto;
		margin-bottom: 100px;
	}
	
	.edit-tray-container {
		background-color: #B7B5B5;
		transition: all .5s;
		border-radius: 8px;
	}
	
	.edit-tray-header {
		background-image: linear-gradient(to right, rgba(0,0,0,1) 25%, rgba(0,0,0,0));
		color: white;
		font-size: 1.5em;
		padding: 10px;
		border-radius: 8px;
	}
	
	.manage-tray-header {
		color: white;
		font-size: 1.5em;
		padding: 10px;
		border-radius: 8px;
	}
	
	.edit-header-left {
		float: left; 
		text-align: left;
		width: 50%;
	}
	
	.edit-header-right {
		float: left; 
		text-align: right;
		width: 50%;
	}
		
	.edit-form {
		display: none;
		padding: 20px;
	}
		
	.edit-tray-footer {
		border-radius: 5px;
		background-color: #868686;
	}
	
	.edit-footer-left {
		float: left; 
		text-align: left;
		width: 50%;
		font-size: 1.5em;
		color: white;
	}
	
	.edit-footer-right {
		float: left; 
		text-align: right;
		width: 50%;
	}
	
	.drop-line {
		display: none;
		visibility: hidden;
	}
	
	.mobile-management {
		display: none;
	}
	
	.float-column {
		width: 50% !important;
		box-sizing: border-box !important;
		float: left !important;
	}
	
	.hide-on-desktop {
		display: none;
	}
}

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


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

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

	.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-right {
		text-align: center;
		box-sizing: border-box;
		margin: auto;
	}
	
	.licenseName {
		font-size: 5vw !important;
		line-height: 3vw !important;
		padding: 10px;
		margin: 0px;
		color: white;
	}
	
	.visitour-logo {
		height: 40px;
	}
	
	.mobile-message {
		text-align: center;
		font-size: 1em;
		display: block;
		padding-top: 10px;
		line-height: 1em;
		animation: txtColor 2s infinite linear;
	}
	
	.draggable-main {
		display: none;
	}
	
	
	/*.box, .col-md-6 {
		float: none !important;
	}*/
	
	.edit-tray-container {
		background-color: #B7B5B5;
		border-radius: 8px 8px 8px 8px;
	}
	
	.edit-tray-header {
		color: white;
		background-image: linear-gradient(to bottom, #5B5B5B, rgba(0,0,0,0));
		font-size: 1.5em;
		padding: 10px;
		border-radius: 8px;
		filter: drop-shadow(0 0 0.25rem gray);
	}
	
	.manage-tray-header {
		color: white;
		background-image: linear-gradient(to bottom, #5B5B5B, rgba(0,0,0,0));
		font-size: 1.5em;
		padding: 10px;
		border-radius: 8px 8px 0px 0px;
		filter: drop-shadow(0 0 0.25rem gray);
	}
	
	.nav-tray-container {
		background-color: #B7B5B5;
		border-radius: 8px 8px 0px 0px;
	}
	
	.nav-tray-header {
		color: white;
		background-image: linear-gradient(to bottom, #5B5B5B, rgba(0,0,0,0));
		font-size: 1.5em;
		padding: 10px;
		text-align: center;
		border-radius: 8px 8px 0px 0px;
		filter: drop-shadow(0 0 0.25rem gray);
	}
	
	#editTrayIcon {
		display: none;
	}
	
	.edit-header-left, .edit-header-right { 
		text-align: center;
	}

	.edit-form {
		padding: 20px;
	}
	
	.mobile-management {
		padding: 10px 0px;
	}
	
	.display-mobile {
		width: inherit;
		padding: 5px 8px;
		background-color: #fff;
		border-bottom: 1px solid #c1c1c1;
		color: #000;
		font-size: 20px;
		margin-bottom: 4px;
		border-radius: 5px;
	}
	

	.hide-on-mobile {
		display: none;
	}
	
	/* ZOOM CONTAINER FOR FINDER-SEEKER MOBILE */

	.img-zoom-container {
	  position: relative;
	}

	.img-zoom-lens {
	  position: absolute;
	  border: 1px solid #d4d4d4;
	  /*set the size of the lens:*/
	  width: 40px;
	  height: 40px;
	}

	.img-zoom-result {
	  border: 1px solid #d4d4d4;
	  /*set the size of the result div:*/
	  width: 100%;
	  height: 300px;
	}
	
}

@media print {
	
	.admin-header {
		background-image: none;
		background: none;
		max-height: none;
		filter: none;
	}
	
	.header-right {
		display: none;
	}
	
	.header-left {
		float: none;
	}
	
	.licenseName {
		text-align: center;
		color: white;
		font-size: 24pt;
	}
	
	.container {
		max-width: none;
	}
	
	.edit-tray-container {
		background-color: none;
		transition: none;
		border: none;
	}
	
}

.utility-tray {
	background-color: #CDCDCD;
	border-radius: 5px;
	padding: 20px;
	margin: 0px;
}
	
.action-message {
	text-align: center;
	font-size: 1em;
	display: block;
	padding-top: 30px;
	line-height: 1em;
	animation: txtColor 2s infinite linear;
}

#showBanner {
	filter: drop-shadow(0 0 0.1rem black);
}

.con-text {
	color: white;
	font-size: 1em;
}

.tray-link {
	text-decoration: none;
	color: #6E0002;
	transition: all .25s;
}


.tray-link:a {
	text-decoration: none;
	animation: txtColor 2s infinite linear;
}

.tray-link:hover {
	text-decoration: underline;
	color: white;
	transition: all .25s;
}

.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: 20px 0px 0px 0px !important;
	text-transform: uppercase;
	color: white;
	transition: all .25s ease-in-out;
}

.stop-button:hover {
	margin: 20px 0px 0px 0px !important;
	text-transform: uppercase;
	background-color: #868686;
	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: 24px;
}

.reverse-icon-drop {
	filter: drop-shadow(0 0 0.1rem white);
	border: none;
	float: right;
	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;
	float: right;
	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 {
	padding: 15px 20px 0px 20px;
	margin: 0px;
}
h3 {
	padding: 0px 20px 15px 20px;
	margin: 0px;
	font-size: 1em;
}
form {
	padding: 10px;
}


.clear-float {
	clear: both;
}




.box {
	float: left;
	width: 50%;
	/*margin-right: 5%;*/
	/*border: 2px solid #333;*/
	/*border-radius: 2px;*/
}
.box:last-child{
	margin: 0px;
}
.connected-sortable, .connected-objects, .connected-tasks {
	list-style: none;
	padding: 20px;
	margin: 0px;
	/*overflow: scroll;
	height: 300px;*/
}

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;
}

.admin-tours {
	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;
}

.admin-tours:hover {
	cursor: initial !important;
	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;
}

ul li.ui-sortable-helper {
	background-color: #e5e5e5;
	-webkit-box-shadow: 0 0 8px rgba(53, 41, 41, 0.8);
	-moz-box-shadow: 0 0 8px rgba(53, 41, 41, 0.8);
	box-shadow: 0 0 8px rgba(53, 41, 41, 0.8);
	transform: scale(1.015);
	z-index: 100;
}

ul li.ui-sortable-placeholder {
	background-color:#B0B0B0;
	-moz-box-shadow: inset 0 0 10px #000000;
	-webkit-box-shadow: inset 0 0 10px #000000;
	box-shadow: inset 0 0 10px #000000;
}

.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;
}

.tour-indent {
	padding: 0px;
	margin: 0px;
}

.stop-indent {
	padding: 0px;
	padding-left: 15px;
	margin: 0px;
}

.item-indent {
	padding: 0px;
	padding-left: 15px;
	margin: 0px;
}

.shortcode, .shortcode a {
	color: white;
	cursor: pointer;
	transition: all .5s ease-in-out;
}

.shortcode:hover {
	animation: aColor 2s infinite linear;
	cursor: pointer;
	transition: all .5s ease-in-out;
}

#admin-footer {
	padding: 20px;
	width: 100%;
	color: white;
	animation: bgColor 2s infinite linear;
	z-index: 5000;
	position: fixed;
	bottom: 0px;
	box-shadow: 0 0 8px rgba(0, 0, 0, .75);
	border-radius: 8px 8px 0px 0px;
	text-align: center;
}

#admin-footer a {
	color: white;
	text-decoration: none;
	transition: all 1s;
}

#admin-footer a:hover {
	color: rgba(190,190,190,1.00);
	text-decoration: none;
}


@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;
  }
}

@keyframes aColor {
  0% {
    color: #FFFFFF;
  }
  50% {
    color: #6E0002;
  }
  100% {
    color: #FFFFFF;
  }
}