/* 
PAGE MAINSETUP.PHP
*/

/* ICON */
#dragDropAreaTabBar .fa-toggle-off:hover:before {
   content: "\f205";
}
#dragDropAreaTabBar .fa-toggle-on:hover:before {
	content: "\f204";
	color:#999;
}
#dragDropAreaTabBar .fa-save:hover:before, 
#dragDropAreaTabBar .fa-pencil-alt:hover:before, 
#dragDropAreaTabBar .fa-toggle-off:hover:before {
    color: #25a580;
}
#dragDropAreaTabBar .fa-toggle-off, 
#dragDropAreaTabBar .fa-toggle-off.blocked:hover, 
#dragDropAreaTabBar .fa-toggle-off.blocked:hover:before {
     color: #999;
}
#dragDropAreaTabBar .fa-toggle-on.blocked:hover:before {
	color:#25a580;
}
#dragDropAreaTabBar .fa-toggle-off.blocked:hover:before {
	content: "\f204";
}
#dragDropAreaTabBar .fa-toggle-on.blocked:hover:before {
	content: "\f205";
}
/* FIX ICON POSITION */
#jqueryupload .info-box.info-box-module .info-box-icon { display: flex; flex-direction: column-reverse; flex-wrap: nowrap; justify-content: space-evenly; }

/* 
DEBUG MESSAGE
*/
.jqueryupload.message-box {
  width: 440px;
  border-radius: 6px;
  margin: 0px auto;
  padding: auto 0;
  position: relative;
}
.jqueryupload.message-box.centpercent {
  /* width: calc(100% - 40px); */
  width: calc(100%);
}
.jqueryupload.message-box i, #resultTest.jqueryupload.message-box {
  vertical-align: middle;
  padding: 20px;
}
.jqueryupload.message-box i.exit-button {
  float: right;
  opacity: 0.4;
}
.jqueryupload.message-box i.exit-button:hover {
  opacity: 0.8;
}

.jqueryupload .message-text {
  vertical-align: middle;
}

.jqueryupload.message-box-warn {
  background-color: #f8f4d5;
  border: #e9dd7e 2px solid;
  color: #96722e;
}

.jqueryupload.message-box-info {
  background-color: #cde8f6;
  border: #2697d1 2px solid;
  color: #447eaf;
}

.jqueryupload.message-box-error {
  background-color: #ecc8c5;
  border: #d37f78 2px solid;
  color: #b83c37;
}

.jqueryupload.message-box-success {
  background-color: #ddf3d5;
  border: #9ddc86 2px solid;
  color: #597151;
}

/*
FILEPOND CSS
*/

	#formuserfile .filepond--item.extension.success .filepond--item-panel { 
		background-color:#369763!important; 
	}
	#formuserfile .filepond--item fieldset { 
		border-radius: 5px;
	}
	#formuserfile .filepond--item fieldset { 
		border: none!important;
	}

	/* use a hand cursor intead of arrow for the action buttons */
	#formuserfile .filepond--file-action-button , 
	#formuserfile .filepond--root, .filepond--browser {
		cursor: pointer;
	}

	/* the text color of the drop label*/
	#formuserfile .filepond--drop-label {
		color: #555;
	}

	/* underline color for "Browse" button */
	#formuserfile .filepond--label-action {
		text-decoration-color: #aaa;
	}

	/* the border radius of the file item */
	#formuserfile .filepond--item-panel {
		border-radius: 0.5em;
	}

	/* the background color of the file and file panel (used when dropping an image) */
	#formuserfile .filepond--item-panel {
	   background-color: #555;
	}

	/* the background color of the drop circle */
	#formuserfile .filepond--drip-blob {
		background-color: #999;
	}

	/* the background color of the black action buttons */
	#formuserfile .filepond--file-action-button {
		background-color: rgba(0, 0, 0, 0.5);
	}

	/* the icon color of the black action buttons */
	#formuserfile .filepond--file-action-button {
		color: white;
	}

	/* the color of the focus ring */
	#formuserfile .filepond--file-action-button:hover,
	#formuserfile .filepond--file-action-button:focus {
		box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.9);
	}

	/* the text color of the file status and info labels */
	#formuserfile .filepond--file {
		color: white;
	}

	/* error state color */
	#formuserfile [data-filepond-item-state*='error'] .filepond--item-panel{
		background-color: red;
	}
	#formuserfile [data-filepond-item-state*='invalid'] .filepond--item-panel {
		background-color: orange;
	}

	#formuserfile [data-filepond-item-state='processing-complete'] .filepond--item-panel {
		background-color: green;
	}
	#formuserfile .filepond--item.processing-filetype[data-filepond-item-state*='error'] .filepond--item-panel, 
	#formuserfile .filepond--item.extension.refused .filepond--item-panel { 
		background-color:orange!important; 
	}

	#formuserfile .filepond--credits {
	   display:none!important;
	}

	#formuserfile input[name=sendit] , 
	#formuserfile .fas.fa-info-circle { 
		display: none!important;
	}

@media (min-width: 30em) {
    .filepond--item {
        width: calc(50% - 0.5em);
    }
}

@media (min-width: 50em) {
    .filepond--item {
        width: calc(33.33% - 0.5em);
    }
}