*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-direction: column;
    height: 100vh;
    background-color: rgb(40, 40, 40);
    font-family: 'Vazirmatn', sans-serif;
}

.center{
    display: flex;
    top: 50%;
    left: 50%;
    background-position-x: center;
    background-position-y: center;
    

    align-items: center;
    justify-content: center;

    color: azure;
}

/*input[type="file"]{
    display: none;
}

label{
    color: #ddd;
    height: 4.5vh;
    width: 8vw;
    background: #5748f5;
    font-size: 18px;
    justify-content: center;
    align-items: center;
    display: flex;
    border: none;
    outline: none;
    border-radius: 10px;
}*/

.uploader{
    padding: 0px 0px 0.9259vh;
    width: 18.5vw; /*375px*/
    height: 5vh; /*211px*/
}
.uploader #image_selector{
    background: rgb(65, 65, 65);
    width: 15vw; /*375px*/
    border-radius: 12px;
    box-shadow: 2px 2px 4px black;
    outline: none;
    text-align: center;
    cursor: pointer;
}

::-webkit-file-upload-button{
    width: 5vw; /*375px*/
    height: 5vh; /*211px*/
    font-family: 'Vazirmatn', sans-serif;
    color: #ddd;
    background: #5748f5;
    border: none;
    border-radius: 12px;
    box-shadow: 1px 0 1px 1px #809ce2;
    outline: none;
    margin-right: 0.52083vw; /*10px*/
    cursor: pointer;
}

#upload_button{
    width: 6vw; /*375px*/
    height: 4vh; /*211px*/
    color: #ddd;
    background: #5748f5;
    border: none;
    outline: none;
    border-radius: 12px;
}

.padding{
    padding: 0 0 3vh;
}
.link-copier{
    
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    display: none;
}

.link-copier .copy_label{
    padding: 5px;
    margin-top: -2.5vh;
    font-size: 18px;
    color: #ddd;
    text-align: center;
}

.link-copier .copy-field{
    position: relative;
    padding: 10px 0.52vw;
    background: rgb(65, 65, 65);
    border: 1px solid #ddd;
    border-radius: 10px;
    display: flex;
    width: 25vw;
}

.link-copier .copy-field .link_text{
    padding: 10px 0.52vw;
    width: 21.5vw;
    font-size: 18px;
    color: #ddd;
    border: none;
    outline: none;
    background: rgb(65, 65, 65);
}

.link-copier .copy-field .copy-button{
    padding: 10px 0.52vw 0.4629vh;
    background: #5748f5;
    color: #fff;
    font-size: 18px;
    border: none;
    outline: none;
    border-radius: 10px;
    cursor: pointer;
}

.link-copier .copy-field .copy-button:active{
    background: #809ce2;
}

.link-copier .copy-field .copy-button:before{
    content: "Copied";
    position: absolute;
    top: -50px;
    right: 0px;
    background: #5cB1dc;
    padding: 8px 0.52vw;
    border-radius: 20px;
    font-size: 15px;
    display: none;
}

.link-copier .copy-field .copy-button:after{
    content: "";
    position: absolute;
    top: -20px;
    right: 25px;
    width: 10px;
    height: 10px;
    background: #5cB1dc;
    transform: rotate(45deg);
    display: none;
}

.link-copier .copy-field.active .copy-button:before, .link-copier .copy-field.active .copy-button:after{
    display: block;
}

.alert-container{
    
    font-weight: 400;

    padding-left: 25vw;
    padding-right: 25vw;

    margin-left: auto;
    margin-right: auto;
    text-align: center;

    /*height: 72px;*/
}

.file-previewer{
    width: 19.5312vw; /*375px*/
    height: 19.5370vh; /*211px*/
    margin-top: 0vh;
    border: 1px solid black;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

#alert_box{
    display: none;
}