/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

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

@media screen and (max-width: 600px) {
    [data-balloon-pos]:after,
    [data-balloon-pos]:before { display: none; }
    .fileLabel{
        padding: 100px 20px !important
    }
}

.fileLabel{
    border: 5px solid #7a98eb;
    border-radius: 10px;
    padding: 100px;
    background-color: #262626;
    font-size: 30px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.fileLabelInvalid{
    border-color: #f87171 !important;
    color: #f87171 !important;
    cursor: not-allowed !important;
}

.infoCardError{
    padding: 15px;
    background-color: #262626;
    color: #f87171;
    border: 3px solid #f87171;
    border-radius: 7px;
    transition: 0.3s ease;
    width: fit-content;
    margin: 10px;
    font-weight: 600;
    transform-origin: center left;
    position: fixed;
    z-index: 100;
}

#title{
    height: 120%;
    background: -webkit-linear-gradient(45deg, #09009f, #00ff95 80%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#demoText{
    color: rgb(64 64 64 / var(--tw-text-opacity));
    font-weight: 700;
    font-size: 1.875rem;
}
#qrcode{
    width: fit-content;
    margin: 0;
}

.fileLabel:hover{
    background-color: #404040
}

#imgsContainer{
    padding: 20px;
    width: 100%;
    display: grid;
    place-items: center;
    gap: 1rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media screen and (max-width: 1700px) {
    #imgsContainer{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media screen and (max-width: 1270px) {
    #imgsContainer{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 900px) {
    #imgsContainer{
        grid-template-columns: repeat(1 , minmax(0, 1fr));
    }
}

.mediaCard{
    padding: 20px;
    display: grid;
    gap: 5px;
    border-radius: 10px;
    text-align: center;
    background-color: #262626;
    place-content: center;
    height: fit-content;
    width: fit-content;
    transition: 0.3s ease;
}

.removeCard{
    scale: 0;
}

.frame{
    height: fit-content;
    position: relative
}

.frame img{
    height: 400px;
    width: 400px;
    object-fit: cover;
}

.frame video{
    height: 400px;
    width: 400px;
    object-fit: cover;
    cursor: pointer
}

.frame .fa-circle-play{
    margin-bottom: 540;
}

.fs_btn_container{
    position:absolute;
    right:0px;
    top:0px;
    width:fit-content;
    height:fit-content;
    padding:6px;
    cursor:pointer;
}

.fs_btn_container{
    transition:all 0.3s;
    z-index: 1;
}

.fs_btn_container:hover{
    scale: 1.05;
}

.fs_btn_bg{ opacity: 0.5; }

.fs_btn_container:hover .fs_btn_bg{
    opacity: 0.7;
}

.imgDesc{
    font-size: 23px;
}

.btn{
    border-radius: 5px;
    font-size: 20px;
    padding: 8px 0px;
    height: 98%;
}
#connectionStatus{
    transition: all 0.3s ease;
}

#imageModal{
    position: fixed;
    display: grid;
    place-items: center;
    padding: 28px;
    width: 100%;
    left:  0px;
    top: 0px;
    height: 100%;
    scale: 0;
    z-index: 2;
}

@keyframes conLockAni {
    0%{ scale: 1; }
    50%{ scale: 0; color: #f87171; }
    100%{ scale: 1; color: #f87171;}
}

@keyframes conUnlockAni {
    0%{ scale: 1; }
    50%{ scale: 0; }
    100%{ scale: 1; }
}

.conLockAni{
    animation: conLockAni 0.5s ease forwards;
}

.conUnlockAni{
    animation: conUnlockAni 0.5s ease forwards;
}

.modalClosed{
    animation: modalClosed 0.7s ease-out forwards;
}

.modalOpen{
    animation: modalOpen 0.3s ease-out forwards;
}

@keyframes modalOpen {
    from{ scale: 0.5; opacity: 0.3; }
    to{ scale:1; opacity: 1; }
}

@keyframes modalClosed {
    0%{scale: 1; opacity: 1;}
    50%{opacity: 0;}
    100%{scale: 0; opacity: 0;}
}

#modalInner{
    padding: 28px;
    border-radius: 15px;
    background-color: #262626;
    width: 80%;
    height: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#modalInner img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

#modalInner video {
    width: 100%;
    height: 100%;
    object-fit: contain
}

#modalInner .fa-xmark{
    position: absolute;
    right: 12px;
    top: 18px;
    cursor: pointer;
    transition: 0.3s ease;
}

#modalInner .fa-xmark:hover{
    color: #ef4444;
    rotate: 90deg;
}

input[type="text"]{
    transition: 0.3s ease
}

input[type="text"]:focus{
    outline: none;
    box-shadow: 0 0 0 30px #57534e inset !important;
    -webkit-box-shadow: 0 0 0 30px #57534e inset !important;
}

#delall::before{
    content: "";
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    transform: scaleX(0);
    border-radius: 5px;
    position: absolute;
    background-color: #ef4444;
    z-index: -1;
    transition: transform 0.3s ease;
}

#delall{
    z-index: 1
}

#delall:hover::before{
    transform: scaleX(1);
}

#downloadall::before{
    content: "";
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    transform: scaleX(0);
    border-radius: 5px;
    position: absolute;
    background-color: #22c55e;
    z-index: -1;
    transition: transform 0.3s ease;
}

#downloadall{
    z-index: 1
}

#downloadall:hover::before{
    transform: scaleX(1);
}

.dl-btn::before{
    content: "";
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    transform: scaleX(0);
    border-radius: 5px;
    position: absolute;
    background-color: #22c55e;
    z-index: -1;
    transition: transform 0.3s ease;
}

.dl-btn{
    z-index: 1;
    position: relative;
}

.dl-btn:hover::before{
    transform: scaleX(1);
}

.del-btn::before{
    content: "";
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    transform: scaleX(0);
    border-radius: 5px;
    position: absolute;
    background-color: #ef4444;
    z-index: -1;
    transition: transform 0.3s ease;
}

.del-btn{
    position: relative;
    z-index: 1;
}

.del-btn:hover::before{
    transform: scaleX(1);
}

#lockConBtn::before{
    content: "";
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    transform: scaleX(0);
    transform-origin: center;
    border-radius: 5px;
    position: absolute;
    background-color: #1e40af;
    z-index: -1;
    transition: transform 0.3s ease;
}

#lockConBtn{
    z-index: 1
}

#lockConBtn:hover::before{
    transform: scaleX(1);
}

#btnCn::before{
    content: "";
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    transform: scaleX(0);
    transform-origin: left;
    border-radius: 5px;
    position: absolute;
    background-color: #525252;
    z-index: -1;
    transition: transform 0.3s ease;
}

#btnCn{
    z-index: 1
}

#btnCn:hover::before{
    transform: scaleX(1);
}

.validText{
    position: absolute;
    margin-left: 200px;
    margin-top: 2.5px;
    transition: 0.3s ease;
    opacity: 0;
}

.invalidAnimation{
    margin-left: 170px;
    color: #ef4444;
    opacity: 1;
}

.qeueCard{
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 2rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    --tw-bg-opacity: 1;
    background-color: rgb(38 38 38);
    border-radius: 0.5rem;
    gap: 1.25rem;
    width: 299px;
    display: flex;
}

.fa-solid{
    transition: scale 0.3s;
}