:root{
    --vf-blue:#2B3A67;
    --vf-blue-600:#3b4f8f;
    --vf-blue-100:#f2f5ff;
    --vf-gray-900:#1f2937;
    --vf-gray-700:#374151;
    --vf-gray-600:#4b5563;
    --vf-gray-500:#6b7280;
    --vf-gray-300:#d1d5db;
    --vf-gray-200:#e5e7eb;
  }
/*

.container {
	margin-top: 10px;
}

.dz-filename {
	font-weight:bold;
}

.dz-success-mark, .dz-error-mark {
	display: none;
}

.dz-remove {
	display: block;
	text-align: center;
}

.dz-details {
	border-bottom: 1px solid LightGray;
}

.dz-progress {
	
	margin-top: 15px;
	background-color: #f5f5f5;
	border-radius: 4px;
}

.dz-upload { 
	border-radius: 4px;
    display: block; 
    background-color: #428bca; 
    height: 20px;
    width: 0%;
    text-align: center;
    color: white;
}

.dz-preview {
	display: inline-block;
	margin: 10px;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	line-height: 1.42857;
	margin-bottom: 20px;
	padding: 4px;
}

.file-dropzone {
	border: 1px dashed #ddd;
}

.file-dropzone.drag-over {
	outline: LightGreen solid 4px;
}
*/

/*
 * The MIT License
 * Copyright (c) 2012 Matias Meno <m@tias.me>
 */
@-webkit-keyframes passing-through {
0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px); }
30%, 70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); }
100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px); } }
@-moz-keyframes passing-through {
0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px); }
30%, 70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); }
100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px); } }
@keyframes passing-through {
0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px); }
30%, 70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); }
100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px); } }
@-webkit-keyframes slide-in {
0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px); }
30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); } }
@-moz-keyframes slide-in {
0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px); }
30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); } }
@keyframes slide-in {
0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px); }
30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); } }
@-webkit-keyframes pulse {
0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1); }
20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
@-moz-keyframes pulse {
0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1); }
20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
@keyframes pulse {
0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1); }
20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
.dropzone, .dropzone * {
box-sizing: border-box; }

.dropzone {
    min-height: 150px;
    padding: 20px 20px;
    border: 2px dashed #337ab7;
    border-radius: 5px;
    background: white;
    position: relative;
    margin-bottom: 20px;
}
.dropzone.dz-clickable {
    cursor: pointer; }
    .dropzone.dz-clickable * {
    cursor: default; }
    .dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
    cursor: pointer; }
.dropzone.dz-started .dz-message {
    display: none; }
.dropzone.dz-drag-hover {
    border-style: solid; }
.dropzone.dz-drag-hover .dz-message {
    opacity: 0.5; }
.dropzone .dz-message {
    text-align: center;
    margin: 2em 0; }
.dropzone .dz-preview {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 2px;
    margin-bottom: 5px;
    background-color: #f7f7f7;
    padding-right: 5px;
    border-radius: 4px;
}

.dz-image img{
    display: none;
}
.dropzone .dz-preview .dz-details .dz-size{
    display: none;
}
.dz-filename {
    width: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 12px;
}
.dz-preview div{
    display: inline-block;
}

.dropzone .dz-preview .dz-error-message, .dropzone .dz-preview .dz-error-mark {
    display: none;
}


.dropzone .dz-preview.dz-success .dz-success-mark {
    -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
    -ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
    -o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
    animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); }
.dropzone .dz-preview.dz-error .dz-error-mark {
    opacity: 1;
    -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
    -ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
    -o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
    animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); }
.dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
    pointer-events: none;
    opacity: 0;
    z-index: 500;
    position: absolute;
    right: 2px;
}
svg g {
    fill: #de5959;
}
.dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg {
    display: block;
    width: 20px;
    height: 20px; }

.removeFile{
    cursor: pointer;
}

#clearAllBtn{
    cursor: pointer;
    position: absolute;
    right: 5px;
    top: 0px;
    font-size: 20px;
}
#clearAllBtn *{
    cursor: pointer;
}
div.required label:after {
    content: " *";
    /*color: red*/;
}

/*loader*/
.lds-dual-ring {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(./img/loading.gif);
    background-repeat: no-repeat;
    background-position: center center;
    background-color: white;
    border-radius: 50%;
    margin-bottom: -4px;
}

  .dropzone{ border:2px dashed var(--vf-gray-300); border-radius:0px; text-align:center; background:#fbfbfc; transition: border-color .2s, background .2s; }
  .dropzone:hover{ border-color:var(--vf-blue); background:#f7f9ff; }
  .dropzone .vf-icon{ width:48px; height:48px; margin:0 auto 12px; display:grid; place-items:center; background:var(--vf-blue); color:#fff; }
  .dropzone h3{ margin:8px 0 6px; font-size:22px; font-weight:700; color:var(--vf-gray-900); }
  .dropzone .vf-sub{ color:var(--vf-gray-600); margin-bottom:18px; }
  .dropzone a{ color:var(--vf-blue); text-decoration:underline; font-weight:600; }
  
  .vf-bullets{ text-align:left; margin:10px auto 0; max-width:640px; color:var(--vf-gray-700); list-style-type: decimal; padding-left: 20px;}
  .vf-bullets li{ margin:4px 0; position:relative; padding-left:18px;  }
  /* Default: show desktop content, hide mobile content */
  .vf-upload .vf-mobile { display: none; }
  
  .dropzone {
    border: 2px dashed #ccc;
    border-radius: 0px;
    text-align: center;
    color: #777;
  }
  
  .dropzone:hover {
    border-color: var(--vf-blue);
    background: #f9fbff;
    cursor: pointer;
  }
  
  .dropzone-icon {
    font-size: 2rem;
    margin-bottom: 10px;
    color: var(--vf-blue);
  }
  
  /* Switch to mobile copy when viewport width ≤ 450px */
  @media (max-width: 450px) {
    .vf-upload .vf-desktop { display: none; }
    .vf-upload .vf-mobile { display: block; }
    .vf-upload h3 { margin-bottom: 6px; }
   
    .dropzone {
      padding: 10px;
    }
    .dropzone .dz-message {
      margin: 0px;
    }
    .vf-card {
      padding: 10px;
    }
    .vf-step {
      padding: 4px 2px;
      font-size: 11px;
    }
  }