@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');

body, * {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
body{
    margin:0;
}
.upload-title, .drop-text{
    text-align: center;
    position: relative;
    font-weight: 700;
    font-family: 'Merriweather';
    margin:0;
}
.upload-title::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-8px;
    width:100%;
    height:1px;
    background-color: lightgray;
}

hr{
    width:100%;
}

.view{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    font-family: 'Open Sans';
    background-color: aliceblue;

}

.main{
    background-color: white;
    width:100%;
    height:100vh;
    margin: 0 auto;
    border-radius: 5px;
    display:flex;
    flex-direction: column;
    padding:20px;
    gap:20px;
}

.content{
    display: flex;
    flex-direction: column-reverse;
    flex-grow: 1;
    width:100%;
    justify-content: space-between;
    gap:20px;
}


.upload-icon{
    width:100px;
}

.faded{
    opacity:20%; 
    filter:grayscale(100%);
}

#file-browse{
    display:none;
}

.text-small, .text-small :is(a){
    font-family: 'Open Sans';
    font-size:.75rem;
    font-weight: 500;
    color:lightgray;
}

.left-col{
    display:flex;
    flex-direction: column;
    gap:20px;
    align-items: center;
    flex-grow:1;
}

.right-col{
    display:flex;
    flex-direction: column;
    gap:20px;
    flex-basis:100%;

}



.drag-and-drop-container{
    border:2px dashed lightgray;
    border-radius:7px;
    width:100%;
    flex-grow: 0;
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    position:relative;
    height:100%;
}
.drag-hover{
    border:3px solid #003087;
}
.upload-list-container{
    overflow-y:auto;
    max-height:200px;
    overflow-x:hidden;
    padding-right:10px;
    -webkit-box-shadow: inset 0px -12px 12px -12px lightgray; 
    box-shadow: inset 0px -8px 12px -12px lightgray;
}
.upload-list{
    list-style: none;
    margin:0;
    padding:0;
}

/* progress{
    border-radius:5px;
}
::-webkit-progress-value{
    transition: width 1s ease;
    background-color:pink !important;
}
 ::-moz-progress-bar{
    transition: width 3s ease-in;
    background-color:pink !important;
    border-radius:5px;
 }
 
 ::-ms-fill   {
    transition: width 1s ease;
    background-color:pink !important;
  } */
.upload-item{
    display: flex;
    direction: row;
    gap:20px;
}

.upload-list img {
    width:35px;
}

.item-description{
    font-size:.85rem;
}
.file-size{
    font-size: 12px;
    float:right;
}
button{
    background:white;
    border:1px solid lightgray;
    border-radius:3px;
    padding:10px;
}

label, legend{
    font-size:.8rem;
    font-weight: 700;
}

#cases,#clients,#contracts{
    width:100%;
    background-color:hsl(0, 0%, 95%);
    border:1px solid hsl(0, 0%, 83%);
    border-radius:2px;
    height:2.5rem;
    overflow-y: scroll;
    font-size:.8rem;
    font-weight:700;
}



.hidden{
    display:none;
}

legend {

}

fieldset {
    display:flex;
    flex-direction: row;
    gap:5px;
}
fieldset > div {
    display:flex;
    flex-direction: column;
    width:100%;
    align-items: flex-start;
    gap:5px;
}

.radio-set{
    background-color:skyblue;
    width:100%;
    border-radius:2px;
    padding:5px;
    border:1px solid hsl(0, 0%, 83%);
    background-color: hsl(0, 0%, 95%);
    text-align: center;
}
.radio-set > * {
    background-color: transparent;
}
.radio-set > input {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
}
.selected{
    background-color: hsl(200, 100%, 95%);
    border:1px solid #003087;
    color:#003087;
}

#message-box{
    width:100%;
    height: 100px;
    vertical-align: top;
}