/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Jan 17, 2022, 10:32:25 PM
    Author     : duong
*/

.iwj-icon-remove.deleting {
    outline:none;
    font-family : inherit !important;
    font-size:12px;
    color:#000;
    font-weight:500;
}
.iwj-icon-remove.deleting:before {
    content : '';
}

.iwj-file-upload.d-none {
    display:none;
    opacity:0;
    visibility:hidden;
    position:absolute;
    top:0;
}

/* Upload Status */
.iwj-upload-status {
    align-items:center;
    position:relative;
    display: flex;
    padding: 16px;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
    border-radius: 12px;
    border: 1px solid var(--colors-primary-600, #F5CC00);
    background: var(--colors-base-white, #FFF);
}

/* Progress bar - Image */

.iwj-upload-status .iwj-upload-image {
    width:40px;
    height:40px;
    text-align:center;
    border-radius:100%;
    position:relative;
}
.iwj-upload-status .iwj-upload-image span.iwj-icon-blank-file {
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2036%2036%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%2232%22%20height%3D%2232%22%20rx%3D%2216%22%20fill%3D%22%23FFEE99%22%2F%3E%0A%3Cpath%20d%3D%22M19.3327%2011.5136V14.2673C19.3327%2014.6407%2019.3327%2014.8274%2019.4053%2014.97C19.4693%2015.0954%2019.5712%2015.1974%2019.6967%2015.2613C19.8393%2015.334%2020.026%2015.334%2020.3993%2015.334H23.153M23.3327%2016.6595V21.4673C23.3327%2022.5874%2023.3327%2023.1475%2023.1147%2023.5753C22.9229%2023.9516%2022.617%2024.2576%2022.2407%2024.4493C21.8128%2024.6673%2021.2528%2024.6673%2020.1327%2024.6673H15.866C14.7459%2024.6673%2014.1859%2024.6673%2013.758%2024.4493C13.3817%2024.2576%2013.0757%2023.9516%2012.884%2023.5753C12.666%2023.1475%2012.666%2022.5874%2012.666%2021.4673V14.534C12.666%2013.4139%2012.666%2012.8538%2012.884%2012.426C13.0757%2012.0497%2013.3817%2011.7437%2013.758%2011.552C14.1859%2011.334%2014.7459%2011.334%2015.866%2011.334H18.0072C18.4964%2011.334%2018.741%2011.334%2018.9711%2011.3892C19.1752%2011.4382%2019.3703%2011.519%2019.5493%2011.6287C19.7511%2011.7524%2019.924%2011.9253%2020.2699%2012.2712L22.3954%2014.3967C22.7413%2014.7426%2022.9143%2014.9156%2023.038%2015.1174C23.1476%2015.2964%2023.2284%2015.4914%2023.2774%2015.6955C23.3327%2015.9257%2023.3327%2016.1703%2023.3327%2016.6595Z%22%20stroke%3D%22%23F5CC00%22%20stroke-width%3D%221.33333%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%2232%22%20height%3D%2232%22%20rx%3D%2216%22%20stroke%3D%22%23FFF5C2%22%20stroke-width%3D%224%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    background-repeat: no-repeat;
    background-size: 100%;
    height: 100%;
    width: 100%;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -moz-transform : translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
.iwj-upload-status .iwj-upload-image.has-bg {
    border:0;
    transition: transform 0.3s ease;
    max-width:40px;
    width:100%;
    overflow:hidden;
    position:relative;
}
.iwj-upload-status .iwj-upload-image.has-icon{
    border:1px solid #dadada;
}
.iwj-upload-status .iwj-upload-image.has-icon span.iwj-icon-blank-file {
    height: 54px;
    width: 38px;
}
.iwj-upload-status .iwj-upload-image.has-bg img {
    max-height: 100%;
    max-width: none;
    left:50%;
    top:50%;
    position:absolute;
    transform: translate(-50%, -50%);
}
.iwj-upload-status .iwj-upload-image.has-bg:hover {
    transform: scale(1.5);
}
.iwj-upload-status .iwj-upload-image span {
    font-size:20px;
    color:#222;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    left: 50%;
}
/*.iwj-upload-status .iwj-upload-image.has-bg span { opacity:0; z-index:-200; } */

.iwj-upload-status._uploading .iwj-upload-image.has-bg:after{
    content: '';
    left:0;
    right:0;
    width:100%;
    height:100%;
    background:rgb(165 165 165 / 80%);
    position: absolute;
}

/* Progress bar - Image Details ( Name and Size ) */
.iwj-upload-status .iwj-upload-details {
    padding-left:10px;
    width: calc(100% - 40px);
}
.iwj-upload-status .iwj-upload-details .name {
    padding:4px 0;
    padding-right:25px;
    display:flex;
    flex-direction: column;
    align-items: flex-start;
}
.iwj-upload-status .iwj-upload-details .name span {
    color: var(--colors-grey-700, #344054);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    padding-right:10px;
}
.iwj-upload-status .iwj-upload-details .name em {
    color: var(--colors-grey-600, #475467);
    font-size: 14px;
    line-height: 20px;
    font-style: normal;
}

/* Remove Upload File */
.iwj-upload-status .iwj-upload-details .remove-file {
    position:absolute;
    right:5px;
    top:5px;
    text-decoration:none;
    box-shadow:none;
    outline:none;
}
.iwj-upload-status .iwj-upload-details .remove-file span:after {
    content: '';
    width:35px;
    height:35px;
    display: block;
    background-repeat:no-repeat;
    background-size:100%;
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2244%22%20height%3D%2244%22%20viewBox%3D%220%200%2044%2044%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M28%2016L16%2028M16%2016L28%2028%22%20stroke%3D%22%23667085%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E%0A");
}

.iwj-upload-status .iwj-upload-details span.has-error {
    color:#f50505;
}

/* Progress Loading */
.iwj-upload-status .iwj-upload-details .iwj-progress-bar {
    display: block;
    border-radius: 5px;
    overflow: hidden;
    height: 14px;
    border: solid 1px var(--colors-primary-500);
    margin: 5px 0;
}
.iwj-upload-status .iwj-upload-details .iwj-progress-bar span {
    background: var(--colors-primary-500);
    display: block;
    font-size: 11px;
    text-align: right;
    color: #fff;
    height: 100%;
    width:0;
    line-height:12px;
}
.iwj-upload-status .iwj-upload-details .iwj-progress-bar span.complete {
    width:100%!important;
    padding-right:5px;
}
.iwj-upload-counter {
    position:absolute;
    right:5px;
    bottom:3px;
    font-size:12px;
}

/* CodeDropz Upload Plugin */
.codedropz-upload-handler {
    border:1px solid var(--colors-grey-200);
    border-radius:12px;
    margin-bottom:10px;
    position:relative;
    background: var(--colors-base-white);
    cursor: pointer;
}
.codedropz-upload-container {
    padding:16px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.codedropz-upload-inner {
    overflow:hidden;
    width:100%;
    text-align:center;
    text-overflow: ellipsis;
    font-weight:inherit;
    margin-top: 4px;
}
.codedropz-upload-inner .codedropz-btn-wrap a.cd-upload-btn {
    text-decoration:none;
    box-shadow:none;
    color: #142542;
    font-weight: bold;
}
.codedropz-upload-inner h3 {
    margin:5px 0;
    font-size:30px;
    line-height:32px;
}

/* Add border on dragenter, drag etc */
.codedropz-dragover {
    border-color:#6b6a6a;
}

.codedropz-upload-wrapper span.has-error-msg {
    display:inline-block;
    color:#ff0000;
    padding:5px 0;
    font-style:italic;
}

/* New Image Preview */
.codedropz--preview {
    display:flex;
    flex-wrap:wrap;
    margin-left:-1%;
    margin-right:-1%;
}
.codedropz--preview .iwj-upload-status .iwj-upload-details .name em,
.codedropz--preview .iwj-upload-status .iwj-upload-details .iwj-progress-bar {
    display:none;
}
.codedropz--preview .iwj-upload-status {
    display:block;
    margin:0 1%;
    width:calc( 84% / 8 );
}

.codedropz--preview .iwj-upload-status .iwj-upload-image span.cd-ext {
    opacity: 1;
    z-index: 1;
    color: #fff;
    background: #FF630B;
    width: 60px;
    line-height: 16px;
    top: 60%;
    font-size: 12px;
    text-transform: uppercase;
}
.codedropz--preview .iwj-upload-status .iwj-upload-image.has-bg {
    height:100px;
    max-width:none;
    border-radius:0;
}
.codedropz--preview .iwj-upload-status .iwj-upload-image.has-bg img {
    border-radius:3px;
}
.codedropz--preview .iwj-upload-status .iwj-upload-image.has-bg:hover {
    transform:none;
}

.codedropz--preview .iwj-upload-status .iwj-upload-details {
    width:100%;
    padding:2px 0;
}
.codedropz--preview .iwj-upload-status .iwj-upload-details .name {
    padding:0;
    font-size:14px;
}
.codedropz--preview .iwj-upload-status .iwj-upload-details .name span {
    padding-right:0;
}

.codedropz--preview .iwj-upload-status .iwj-upload-details .remove-file {
    color:#fff;
    top:-6px;
    right:-6px;
}
.codedropz--preview .iwj-upload-status .iwj-upload-details .remove-file.deleting {
    right:auto;
    transform:translate(-40%, -50%);
    top:40%;
    left:50%;
    background-color:#424242;
    padding:0 3px;
}
.codedropz--preview .iwj-upload-status .iwj-upload-details .remove-file span {
    background-color:#8e8b8b;
    border-radius:100%;
    transition:color 1s ease-in-out;
}
.codedropz--preview .iwj-upload-status .iwj-upload-details .remove-file span:hover {
    background-color:#fb0303;
}

.file-upload-wrapper {
    margin-top: 16px;
    text-align: center;
}
.file-upload-wrapper .upload-icon{
    display: flex;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    border-radius: 28px;
}
.file-upload-wrapper .upload-text-contain{
    display: inline-block;
    padding-left: 10px;
}
.file-upload-wrapper .file-extensions{
    margin-top: 2px;
    font-size: 14px;
    color: #7C8797;
}