*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
 
 }
 
 .wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    width:100% ;
    min-height: 100vh;
    background:rgb(56, 90, 84) ;
    background: linear-gradient(282deg, #009dff 0% , #54bdff);
 }

 .box{
   max-width: 500px;
   background: #fff;
   padding: 30px;
   width: 100%;
   border-radius: 5px;
   -moz-border-radius: 5px;
   -ms-border-radius: 5px;
   -o-border-radius: 5px;
 }
 
.upload-area-title{
   text-align: center;
   margin-bottom: 20px;
   font-size: 20px;
   font-weight: 600;

}

.uploadlabel{
   width: 100%;
   min-height: 100px;
   background: #12314718;
   display:flex;
   flex-direction: center;
   justify-content: center;
   align-items: center;
   border: 3px dashed #18a7ff82;
   cursor: pointer;

}

.uploadlabel span{
   font-size: 40px;
   color: #18a7ff;

}

.uploadlabel p{
   color: #18a7ff;
   font-size: 20px;
   font-weight: 500;
   font-family: cursive;

}

.uploaded{
   margin: 30px 0;
   font-size: 16px;
   font-weight: 700;
   color: #a5a5a5;

}

.showfilebox{
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin: 10px 0;
   padding: 10px 15px;
   box-shadow: #0000000d 0px 0px 1px, 
   #d1d5db3d 0px 0px 0px 1px inset;

}

.showfilebox .left{
   display: file;
   align-items: center;
   flex-wrap: wrap;
   gap: 10px;

}

.filetype{
   background: #18a7ff;
   color: #fff;
   padding: 5px 15px;
   font-size: 20px;
   text-transform: capitalize;
   font-weight: 700;
   border-radius:  3px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   -ms-bporder-radius: 3px;
   -o-border-radius: 3px;
}

.left h3{
   font-weight: 400;
   font-size: 18px;
   color: #292f42;
   margin: 0%;
   
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    background: #000;
    color: #fff;
    padding: 10px 0;
    position: relative;
}

.marquee p {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 15s linear infinite;
}

@keyframes marquee {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}

.hidden {
    display: none;
}

#hiddenTopic {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
}

button {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    background-color: #007BFF;
    color: white;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}