html, body {
    height: 100%;
    margin: 0; 
    padding: 0;
  }


.app {
background-color: #f8f6f6;
width: 100%;  
height: 100%;
position: absolute;
display: flex;
flex-flow: column;
box-sizing: border-box;
}


.app .header {
    background-color: #f65f0e;
    height: 100px;
    width: 100%;  
    display: flex;
    flex-direction: row;    
    justify-content: space-between;
    align-items: center;
    position: relative;
  }
  

.app .logo {
color: #ffffff;
font-family: "Merienda", Helvetica;
font-size: 16px;
margin: 0 0 0 2%;

}

.app .menu {
width: 70%;    
position: relative;
margin: 0 2% 0 0;
display: flex;
justify-content: space-around;
align-items: center;
}

.header, .menu, .logo {
box-sizing: border-box;
}

.menu a {
color: #ffffff;
font-family: "Poppins-SemiBold", Helvetica;
font-size: 12px;    
position: relative;    
}

  
.content {
    display: block;  
    height: 100%;
    position: relative;
    margin: 0 0 0 2%;
  }
  
.app .footer {
background-color: #03D61B;
height: 10vh;  
bottom:0;
left:0;
width: 100%;
display: flex;
justify-content: center;
align-items: flex-end;
position: relative;
}

.copyright {
color: #ffffff;
font-family: "Poppins-Regular", Helvetica;
font-size: 12px;  
margin: 0;  
position: absolute;  

}

.contact-text {
color: #ffffff;
font-family: "Poppins-Regular", Helvetica;
font-size: 12px;  
line-height: 16px;
position: absolute;
right: 10px;  
top: 10%;
}

.error {
    color:red;
    box-shadow: 3px 5px 7px #532332; 
    font-size: 16px;
  }


button {
color:#fffcfc;
background-color: #380b0b;
font-family: "Segoe Print", Helvetica;
font-size: 10px;  
position: relative;
text-align: center;
white-space: nowrap;
border: none; 
outline: none;
border-radius: 10px;
padding: 0 5px;
box-sizing: border-box;
margin: 5px 5px;
}

button.sign-out {
color:#fffcfc;
background-color: #380b0b;
font-family: "Segoe Print", Helvetica;
font-size: 10px;  
position: relative;
text-align: center;
white-space: nowrap;
border: none; 
outline: none;
border-radius: 10px;
padding: 0 5px;
box-sizing: border-box;
margin: 5px 5px;
}

button:hover {
cursor: pointer;
}  


.item span {
    margin: 0 2px;
  }
  
.item-outer {
position: relative;
display: flex;
flex-direction: row;  
}

.item-header {
display: flex;
flex-direction: column;
width: 100%;  
max-width: 100vw;
padding: 2px;
border: 2px solid #ccc;  
box-shadow: 2px 1px 5px;
box-sizing: border-box;
font-size: 12px;
}
.item-header:hover {
background-color: #D8D8D8;
}

.item-header .item-no {  
color: #f65f0e;
}

.item  {  
color: grey;
}

.item .invoice-client {
font-weight: bold;
color: black;
}


.details {
    max-width: 80vw;
}

fieldset.details-panel {  
width: 100%;      
padding: 2px;
border: 2px solid #ccc;
}

fieldset.details-panel label {
display: inline-block;
width: 50vw;
text-align: left; 
margin-bottom: 5px;
}

fieldset.details-panel input,
fieldset.details-panel textarea {
width: 100%;
max-width: 80%;
margin-bottom: 5px;
padding: 2px;
text-align: left;
background-color: rgb(224, 218, 218);
}

fieldset.details-panel textarea {
resize: vertical;
height: 100px;  
}

.new {
max-width: 80vw;
}

fieldset.new-panel {
display: flex;
flex-direction: column;
width: 100%;  
max-width: 80%;  
padding: 5px;
border: 2px solid #ccc;
}

fieldset.new-panel label {
display: inline-block;  
text-align: left; 
margin-bottom: 2px;
}

fieldset.new-panel input,
fieldset.new-panel textarea {
width: 100%;
max-width: 80%;
margin-bottom: 5px;
padding: 2px;
text-align: left;  
}

fieldset.new-panel textarea {
resize: vertical;
height: 100px;  
}

.user {
    font-size: 12px;
}

.user .user-info {
    max-width: 100px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.user a
{
    color: #380b0b;  
    font-family: "Segoe Print", Helvetica;
    position: relative;   
    text-decoration: none;
}

.user span
{
    color: #380b0b;  
    font-family: "Segoe Print", Helvetica;
    position: relative;   
    text-decoration: none;
    white-space: normal; /* Allows the text to wrap */
    word-wrap: break-word;
}