.dropzone,.dropzone *{box-sizing:border-box}.dropzone{position:relative}.dropzone .dz-preview{position:relative;display:inline-block;width:120px;margin:0.5em}.dropzone .dz-preview .dz-progress{display:block;height:15px;border:1px solid #aaa}.dropzone .dz-preview .dz-progress .dz-upload{display:block;height:100%;width:0;background:green}.dropzone .dz-preview .dz-error-message{color:red;display:none}.dropzone .dz-preview.dz-error .dz-error-message,.dropzone .dz-preview.dz-error .dz-error-mark{display:block}.dropzone .dz-preview.dz-success .dz-success-mark{display:block}.dropzone .dz-preview .dz-error-mark,.dropzone .dz-preview .dz-success-mark{position:absolute;display:none;left:30px;top:30px;width:54px;height:58px;left:50%;margin-left:-27px}

.dropzone {
	border-width : 3px;
	border-color    : var(--bs-primary);
	border-radius   : 8px;
	border-style    : dashed;
	height          : 150px;
	min-height      : calc(100vh - 100px);
	transition      : all .3s;
}

.dropzone .dz-default.dz-message {
	position : absolute;
	top      : 50%;
	left     : 0;
	right    : 0;
	transform: translateY(-50%);
	margin   : 0;
}

.dropzone .dz-default.dz-message img {
	height    : 50px;
	transition: all .3s;
}

body.settings-in .dropzone, body.tbl-in .dropzone {
	min-height : 0;
}

body.settings-in .dz-default.dz-message img, body.tbl-in .dz-default.dz-message img {
	height : 40px;
}

.dz-message {
	display:block!important;
	color : var(--bs-primary);
}

.dz-preview {
	display : none!important;
}

html, body {
	margin : 0;
	padding : 0;
	height : 100%;
}


body {
	background-color: #fff;
	position        : relative;
	height          : 100%;
	padding         : 30px 15px 15px 15px;
}

.bg-img {
	position         : fixed;
	inset            : -10px;
	background-image : url(../gfx/bg.jpg);
	background-size  : cover;
	background-repeat: no-repeat;
	opacity          : .55;
	filter           : blur(5px);
}

#toggleSettings {
	position                  : absolute;
	bottom                    : 100%;
	right                     : 0;
	border-bottom-right-radius: 0;
	border-bottom-left-radius : 0;
	//background-color          : rgba(255, 255, 255, .55);
	//backdrop-filter           : blur(5px);
	border                    : 0;
}

#mainWrapper {
	background-color: rgba(255, 255, 255, .55);
	backdrop-filter : blur(5px);
	padding         : 20px;
	border-radius   : 15px;
	border-top-right-radius : 0;
	border          : 1px solid rgba(0, 0, 0, .15);
}

#fileSettings {
	font-size : .9rem;
}

#fileSettings .inner {
	padding         : 10px 15px;
	border          : 1px solid #ddd;
	border-radius   : 8px;
	background-color: #fff;
	margin-bottom   : 25px;
}


.btn-group-xs > .btn, .btn-xs {
	padding      : .5rem .4rem;
	font-size    : .8rem;
	line-height  : .5;
	border-radius: .2rem;
	font-weight  : 500;
}

.disabled {
	cursor: not-allowed;
}


#fileTable  {
	margin-top: 25px;
	margin-bottom : 0;
	table-layout: fixed;
}

#fileTable thead th:first-child {
	border-top-left-radius: 8px;
}

#fileTable thead th:last-child {
	border-top-right-radius: 8px;
}

#fileTable tbody tr:last-child {
	border-color : transparent;
}

#fileTable tbody tr:last-child td:first-child {
	border-bottom-left-radius: 8px;
}

#fileTable tbody tr:last-child td:last-child {
	border-bottom-right-radius: 8px;
}

#tblSummary {
	font-size    : .9rem;
	padding      : 8px;
	border-radius: 8px;
	margin-top   : 25px;
}

#tblSummary .btn {
	font-weight : 500;
	border-radius : 4px;
}

#tblSummary .savings-total {
	font-weight : 500;
	color : #fff;
}

.table tbody td {
	vertical-align: middle;
}


.table tbody td.size-original {
	color : var(--bs-danger);
	font-weight : 700;
}

.table tbody td.status .progress {
	text-align     : center;
	justify-content: space-around;
	font-size      : .7rem;
	line-height    : 20px;
	font-weight    : 500;
	height         : 20px;
	padding  		   : 0 3px;
}

.table tbody td.filename {
	overflow     : hidden;
	white-space  : nowrap;
	text-overflow: ellipsis;
}


.form-check-label {
	font-weight: 500;
	cursor     : pointer;
}

.form-check-label .info {
	font-weight: 400;
	font-size  : .7rem;
	color      : var(--bs-gray-600);
	line-height: 1.2em;
}

.form-check-inline {
	padding-top : 6px;
}

.col-form-label {
	font-weight : 700;
}

.col-form-label .info {
	font-weight : 400;
	font-size: .8rem;
	color: var(--bs-gray-500);
}

.equal-width > * {
	flex-basis: 100%;
}

#comparison {
	position: fixed;
	inset : 0;
	background-color: rgba(0, 0, 0, .55);
}

#comparison .close {
	position        : absolute;
	top             : 5px;
	right           : 5px;
	color           : #fff;
	font-size       : 24px;
	line-height     : 28px;
	height          : 38px;
	width           : 38px;
	padding         : 2px;
	text-align      : center;
	z-index         : 1;
	opacity         : .55;
	cursor          : pointer;
	background-color: rgba(0, 0, 0, .55);
	border-radius : 50%;
}

#comparison .close:hover {
	opacity: 1;
}

#comparison .body {
	padding : 20px;
}

#beforeEffectslider {
	margin   : 0 auto;
	display  : inline-block;
	position : absolute;
	top      : 50%;
	left     : 50%;
	transform: translate(-50%, -50%);
}

.before-effect-main-div {
	margin-top : 0;
	width : auto!important;
	
	display: inline-block;

}

.before-effect-button {
	bottom: auto;
	top   : 0;
	font-size : .8rem;
}

.before-effect-line:after {
	width      : 48px;
	height     : 48px;
	margin     : -24px 0 0 -24px;
	line-height: 46px;
}



#beforeEffectslider.zoom-100 img {
	object-fit: none;
}

#zoomToggle {
	position        : absolute;
	bottom          : 5px;
	margin          : 0 auto;
	left            : 50%;
	transform       : translateX(-50%);
	background-color: #121212;
	border-radius   : 5px;
	padding         : 5px;
}

#zoomToggle .nav-link {
	background-color: var(--bs-gray-200);
	color        : var(--bs-gray-700);
	font-size    : .7rem;
	padding      : 0 6px;
	border-radius: 3px;
}

#zoomToggle .nav-item + .nav-item {
	margin-left : 3px;
}

#zoomToggle .nav-link.active {
	background-color: var(--bs-primary);
	color : #fff;
}

#zoomToggle .nav-link:not(.active) {
	cursor: pointer;
}

#zoomToggle .nav-link:not(.active):hover {
	background-color: var(--bs-gray-300);
}



@font-face {
  font-family: 'fontello';
  src: url('../fonts/fontello.eot?9713314');
  src: url('../fonts/fontello.eot?9713314#iefix') format('embedded-opentype'),
       url('../fonts/fontello.woff2?9713314') format('woff2'),
       url('../fonts/fontello.woff?9713314') format('woff'),
       url('../fonts/fontello.ttf?9713314') format('truetype'),
       url('../fonts/fontello.svg?9713314#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?9713314#fontello') format('svg');
  }
}
*/
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: .5em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;

  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}



.icon-trash-empty:before { content: '\e800'; } /* '' */
.icon-download-1:before { content: '\e801'; } /* '' */
.icon-picture:before { content: '\e802'; } /* '' */
.icon-cog:before { content: '\e803'; } /* '' */
.icon-file-archive:before { content: '\f1c6'; } /* '' */
.icon-sliders:before { content: '\f1de'; } /* '' */