/*
    CCS FOR FILE UPLOAD
*/
.gform_wrapper .gfield_html.gfield_no_follows_desc { margin-right: 0; margin-top: 20px; max-width: 100%; }
.file-upload { clear: both; }
#upload-area { border: 2px dashed #00a9e1; border-radius: 10px; padding: 15px 17px; }
#upload-area #upload-background { background: url(./../images/file_upload/file-upload-background-dekstop.png?1520602344) no-repeat center right; background-size: contain; }

#upload-area .upload-file-monitoring { display: flex; justify-content: flex-start; flex-direction: column; align-items: center; padding: 15px 5px 5px; flex-wrap: wrap; }

#upload-area.dirty .upload-file-monitoring,
#upload-area.maxfiles .upload-file-monitoring { flex-direction: row; align-items: flex-start; }

#upload-area.maxfiles .upload-file-monitoring > *,
#upload-area.dirty .upload-file-monitoring > * { margin: 0 1% 5px 1%; width: 23%; }
#upload-area.maxfiles .upload-file-monitoring:first-child,
#upload-area.dirty .upload-file-monitoring:first-child { margin: 0; }
#upload-area .upload-file-monitoring .uploads-file-icon { background: url(./../images/file_upload/arrow_file_upload.png?1520602344) no-repeat center center; background-size: 50%; border: 2px solid #d0effb; height: 55px; width: 55px; border-radius: 50%; margin-right: 0px; margin-bottom: 15px; z-index: 1; }
#upload-area .errors-container { background-color: rgba(255, 255, 255, 0.9); border-radius: 5px; padding: 0; text-align: center; }
#upload-area .errors-container li { padding: 3px; padding-left: 10px; list-style: none !important; }
#upload-area .errors-container li { margin: 0; }
#upload-area .errors-container p { color: red; font-size: 12px; margin: 0; }
#upload-area .errors-container li:last-child { margin-bottom: 5px; }
#upload-area .errors-container *::before,
#upload-area .errors-container *::after { display: none; }
#upload-area .all-upload { display: none; background-color: rgba(255, 255, 255, 0.9); border-radius: 5px; padding: 5px; padding-left: 10px; margin-bottom: 5px; font-size: 13px; color: #00aa4f; }
#upload-area .is-uploading { display: none; background-color: rgba(255, 255, 255, 0.9); padding: 5px; padding-left: 10px; margin-bottom: 5px; border-radius: 5px; margin-bottom: 0px; font-size: 12px; color: #00a9e1; }

#upload-area .all-upload,
#upload-area .is-uploading { text-align: center; }

#upload-area.uploding .is-uploading { display: block; }
#upload-area.maxfiles .all-upload { display: block; }
#upload-area.uploding .errors-container li:last-child { margin-bottom: 5px; }
#upload-area .upload-file-monitoring .upload-file-button-wrap { display: flex; flex-direction: column; justify-content: space-between; text-transform: uppercase; margin-bottom: 0; transition: cubic-bezier(0.6, 0.04, 0.98, 0.335); }
#upload-area .upload-file-monitoring .upload-file-button-wrap label { width: 100%; margin: 0; }
#upload-area .upload-file-monitoring .upload-file-button-wrap .upload-file-button { text-transform: uppercase; padding: 15px 25px; font-size: 13px; font-family: 'roboto_slabregular'; border-radius: 5px; text-align: center; line-height: 13px; color: #fff; background-color: #00a9e1; display: inline-block; font-style: initial; cursor: pointer; }
#upload-area .upload-file-monitoring .upload-file-button-wrap .file-wrap-add-more .tumbnail { height: 45px; width: 100%; border-radius: 5px; background: #00a9e1; position: relative; }
#upload-area.maxfiles .upload-file-button-wrap { display: none; }
#upload-area.maxfiles .uploads-file-icon { display: none !important; }
#upload-area .upload-file-monitoring .upload-file-button-wrap .file-wrap-add-more .tumbnail .icon { position: absolute; display: block; height: 15px; width: 15px; top: calc(50% - 7.5px); left: calc(50% - 7.5px); background: url('./../images/file_upload/file-upload-add-more.png') no-repeat center center; background-size: cover; }
#upload-area .upload-file-monitoring .upload-file-button-wrap .file-wrap-add-more p { text-align: center; font-size: 10.5px; margin-top: 2px; }
#upload-area .upload-file-monitoring .upload-file-button-wrap p { color: #00a9e1; font-weight: bold; margin-bottom: 8px; margin-top: 0; font-size: 13px; }
#upload-area .upload-file-monitoring .file-wrap .tumbnail { height: 45px; width: 100%; border-radius: 5px; background-position: center center; background-repeat: no-repeat; background-size: cover; border: 1px solid #484848; position: relative; background-color: #00a9e1; }
#upload-area .upload-file-monitoring .file-wrap .tumbnail:hover { border: 1px solid #00a9e1; }
#upload-area .upload-file-monitoring .file-wrap.uploading .tumbnail { border: 1px solid #00a9e1; }
#upload-area .upload-file-monitoring .file-wrap .tumbnail.type-file { background-image: url('./../images/file_upload/other_file_file_upload.png'); background-color: #fff; border: 1px solid #484848; }
#upload-area .upload-file-monitoring .file-wrap.uploading .tumbnail.type-file { border: 1px solid #00a9e1; }
#upload-area .upload-file-monitoring .file-wrap .tumbnail.type-file:hover { border: 1px solid #00a9e1; }
#upload-area .upload-file-monitoring .file-wrap .tumbnail .icon { position: absolute; display: block; height: 20px; width: 20px; top: calc(50% - 10px); left: calc(50% - 10px); background-position: center center; background-repeat: no-repeat; background-size: contain; }
#upload-area .upload-file-monitoring .file-wrap .file-name { text-align: center; font-size: 11px; word-wrap: break-word; margin-top: 2px; margin-bottom: 0; color: #333; }
#upload-area .upload-file-monitoring .file-wrap.uploading .uploading-wrap { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.3); border-radius: 5px; }
#upload-area .upload-file-monitoring .file-wrap.uploading .uploading-wrap .progressbar { z-index: 1; position: absolute; bottom: 5px; left: 5px; right: 5px; height: 3px; background-color: #fff; border-radius: 15%; overflow: hidden; }
#upload-area .upload-file-monitoring .file-wrap.uploading .uploading-wrap .progressbar .progressbar-state { height: 100%; width: 0; background-color: #00a9e1; }
#upload-area .upload-file-monitoring .file-wrap .tumbnail .deleate-file { height: 20px; width: 20px; border-radius: 50%; border: 1px solid transparent; background: #fff; z-index: 2; position: absolute; top: -5.5px; right: -5.5px; cursor: pointer; }
#upload-area .upload-file-monitoring .file-wrap .tumbnail .deleate-file::before { content: ''; height: 9px; width: 1px; background-color: #484848; position: absolute; display: block; top: 4.8px; right: 8px; transform: rotate(-45deg); }
#upload-area .upload-file-monitoring .file-wrap .tumbnail .deleate-file::after { content: ''; height: 9px; width: 1px; background-color: #484848; position: absolute; display: block; top: 4.8px; right: 8px; transform: rotate(45deg); }
#upload-area .upload-file-monitoring .file-wrap .tumbnail:hover .deleate-file::before,
#upload-area .upload-file-monitoring .file-wrap .tumbnail:hover .deleate-file::after { background-color: #00a9e1; }
#upload-area .upload-file-monitoring .file-wrap.error .tumbnail { border: 1px solid red; }
#upload-area .upload-file-monitoring .file-wrap.error .file-name { color: red; }
#upload-area .upload-file-monitoring .file-wrap.uploading .file-name { color: #00a9e1; }
#upload-area .upload-file-monitoring .file-wrap.error .tumbnail .error-wrap .icon.try-again { background-image: url('./../images/file_upload/try_again_file_upload.png'); z-index: 10; height: 20px; width: 20px; top: calc(50% - 10px); left: calc(50% - 10px); }
#upload-area .upload-file-monitoring .file-wrap.error .tumbnail .error-wrap { position: absolute; left: -1px; bottom: -1px; right: -1px; top: -1px; background-color: rgba(255, 0, 0, 0.4); border-radius: 5px; }
#upload-area .upload-file-monitoring .file-wrap.error .tumbnail .deleate-file::after,
#upload-area .upload-file-monitoring .file-wrap.error .tumbnail .deleate-file::before { background-color: red; }
#upload-area .upload-file-monitoring .file-wrap.video .video-wrap { position: absolute; left: 0px; bottom: 0px; right: 0px; top: 0px; background-color: rgba(0, 0, 0, 0.1); border-radius: 5px; }
#upload-area .upload-file-monitoring .file-wrap.video .video-wrap .video-icon { background-image: url('./../images/file_upload/video_icon_file_upload.png'); z-index: 10; }
#upload-area .upload-file-monitoring .file-wrap.uploading .tumbnail .icon.loader-animation { background-image: url('./../images/file_upload/loading-animation.png'); animation: file-loader-rotate 1s infinite; z-index: 10; }
#upload-area .upload-file-monitoring .file-wrap.uploading .tumbnail .deleate-file::after,
#upload-area .upload-file-monitoring .file-wrap.uploading .tumbnail .deleate-file::before { background-color: #00a9e1; }
#upload-area.maxfiles .upload-file-information span { display: none !important; }

#upload-area .upload-file-information { font-size: 12px; display: flex; justify-content: center; margin-top: 10px; color: #484848; }
#upload-area .upload-file-information .uploaded-files-count { font-family: 'roboto_slabregular'; display: inline-block; }
#upload-area .upload-file-information .upload-file-specific { flex: 1; font-size: 12px; margin: 0; text-align: center; }
#upload-area .upload-file-information *:after { display: none; }
#upload-area .upload-file-information *:before { display: none; }
#upload-area .upload-file-information:after { display: none; }
#upload-area .upload-file-information:before { display: none; }
#upload-area.dirty .visible-on-dirty { display: block; }
#upload-area.dirty .visible-on-dirty:hover { cursor: pointer; }
#upload-area.dirty .hidden-on-dirty { display: none !important; }
#upload-area .visible-on-dirty { display: none; }
#upload-area .hidden-on-dirty { display: block; }
#upload-area .file-upload-uppercase { text-transform: uppercase; }
#upload-area .upload-file-clean-button { text-align: center; }
.mobile-hidden { display: block !important; }
.mobile-visible { display: none !important; text-align: center; }
.upload-file-specific-down { font-size: 12px;    /* text-align: center; */ }
.upload-file-specific-down *:after { display: none; }
.upload-file-specific-down *:before { display: none; }
.upload-file-specific-down:after { display: none; }
.upload-file-specific-down:before { display: none; }

/*}*/
@media only screen and (max-width:450px) {
    #upload-area.maxfiles .upload-file-monitoring > *,
    #upload-area.dirty .upload-file-monitoring > * { margin: 0 2% 5px 2%; width: 29.3%; }
}
@media only screen and (max-width:320px) {
    #upload-area.maxfiles .upload-file-monitoring > *,
    #upload-area.dirty .upload-file-monitoring > * { width: 46%; }
}
@keyframes file-loader-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}