body {
    font-family: Inter, Arial, sans-serif;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    background-color: #F8FAFC;
}

input,
textarea,
button {
    font-family: inherit;
}

input, textarea {
    font-size: 1rem;
}

p, a, h1, h2, h3, h4 {
    padding: 0;
    margin: 0;
    font-weight: normal;
    text-decoration: none;
}


.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    height: 5vh;
    margin: 0px;
    padding: 0px;
    border-bottom: 1px solid #e5ebf4;
    min-height: 60px;
    padding-left: 5px;
    padding-right: 15px;
    position: sticky;
    top: 0;
}

.logo {
    display: flex;
    align-items: center;
}

.logo a {
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    line-height: 1;
}

.logo .icon {
    width: 30px;
    height: 30px;
    display: block;
}

.links {
    display: flex;
    gap: 20px;
}

.links a, .logo a{
    text-decoration: none;
    color: #1E293B;
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 8px;
    padding-bottom: 8px;
    margin: 0px;
    border-radius: 10px;
    transition: 0.15s;

}

.links a.selected {
    background-color: #eff2f8;
    
}



/*Message*/
#message-overlay {
    position: fixed;
    top: 60px;
    align-self: center;
    opacity: 0;
    transition: 0.25s;
}

#message-overlay.show {
    opacity: 1;
    top: 70px;
}

#message-overlay .message {
    size: fit-content;
    padding: 10px;
    border: 1px solid rgb(193, 203, 215);
    border-radius: 10px;
    color: white;
}

#message-overlay .message.green {
    background-color: #49b04e;
}

#message-overlay .message.red {
    background-color: #d94646;
}


/*App*/
#app {
    color: #1E293B;
    padding: 15px;
}

.opacity {
    opacity: 0;
    pointer-events: none;
}



/*General*/
input[type = "date"], .experiment-date{
    width: 150px;
    height: 1.2rem;
    padding: 5px;
    background-color: #ffffff;
    border: 1px solid rgb(193, 203, 215);
    border-radius: 5px;
}

input[type = "text"], textarea, .textarea, .text {
    background-color: #ffffff;
    border: 1px solid rgb(193, 203, 215);
    padding: 8px;
    border-radius: 5px;
}

textarea, .textarea {
    overflow: hidden;
    resize: none;
    width: 70%;
    min-height: 96px;
}

*:focus {
    outline: none;
}

*:focus-visible {
    outline: 2px solid #2a4672;
    border-radius: 5px;
}



/*New*/
.new {
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 10px;
    margin: 0px;
    display: flex;
    flex-direction: column;
    width: clamp(300px, 55vw, 1000px);
    justify-self: center;
}

#new-header {
    align-self: center;
    margin: 10px;
}

#new-experiment-form, #experiment-page-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.remove-material, .remove-contributor, .remove-placeholder {
    background-color: rgb(255, 104, 104);
    color: #FFFFFF;
    border: 1px solid #e51e1e;
    width: 1.3rem;
    height: 1.3rem;
    font-size: 1rem;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-radius: 3px;
    
}

.hidden {
    display: none;
}

#new-add-contributor, #new-add-material, #experiment-add-contributor, #experiment-add-material {
    background-color: #8c9bb3;
    border: 1px solid #8397b5;
    color: white;
    width: fit-content;
    padding: 5px;
    border-radius: 5px;
}

button:hover {
    cursor: pointer;
}

.experiment-part {
    background-color: #f2f5fa;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 15px;
}

.component {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 5px;
}

#contributor-list, #material-list, #experiment-contributors-list, #experiment-materials-list {
    display: flex;
    flex-wrap: wrap;
    row-gap: 5px;
    column-gap: 15px;
}

.contributor, .material {
    display: flex;
    gap: 5px;
}

button[type = "submit"] {
    width: fit-content;
    align-self: center;
    padding: 7px;
    background-color: #5d87c5;
    border: 1px solid #416497;
    color: white;
    border-radius: 5px;
}

/*Experiments*/
.experiments {
    display: flex;
    flex-direction: column;
    row-gap: 15px;
}

#filter-experiments {
    display: flex;
    align-items: center;
    justify-content: center;   
    gap: 20px; 
}

#search-experiments {
    min-width: 180px;
    width: 40%;
}

#sort-div {
    display: flex;
    gap: 10px;
    min-width: fit-content;
}

#experiments-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(430px, 1fr));
    gap: 2rem;
}

.experiment-card {
    width: 450px;
    height: 200px;
    padding: 10px;
    box-sizing: border-box;
    justify-self: center;
    background-color: #FFFFFF;
    border: 1px solid #ced6e0;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    
}

#experiments-list a {
    color: inherit;
    text-decoration: none;
}

.experiment-card .info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#no-experiments {
    opacity: 0;
    display: flex;
    flex-direction: column;
    justify-self: center;
    background-color: #FFFFFF;
    border: 1px solid #ced6e0;
    border-radius: 10px;
    width: fit-content;
    align-items: center;
    gap: 15px;
    padding: 15px;

}

#no-experiments.show {
    opacity: 1;
}

#none-button {
    background-color: #8c9bb3;
    border: 1px solid #8397b5;
    color: white;
    width: fit-content;
    padding: 5px;
    border-radius: 5px;
}

/*Experiment page*/

#experiment-page {
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 10px;
    margin: 0px;
    display: flex;
    flex-direction: column;
    width: clamp(300px, 55vw, 1000px);
    justify-self: center;
}

#experiment-page-header {
    display: flex;
    justify-content: space-between;
    padding: 10px;
}

#experiment-date {
    font-size: 0.9rem;
}

.text {
    width: 180px;
}

#delete-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
    border: 1px solid #c0ccdb;
    border-radius: 10px;
    gap: 30px;
    padding: 20px;
}

#delete-container.hidden {
    display: none;
}

#delete-buttons {
    display: flex;
    gap: 10px;
    height: fit-content;
    justify-content: center;
    align-items: center;
}

#confirm-delete {
    background-color: #d92727;
    border: 1px solid #790e0e;
    color: white;
    border-radius: 5px;
    line-height: 1;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 25px;
    padding-right: 25px;
    font-size: 1rem;
}

#cancel-delete {
    background-color: #979eaf;
    border: 1px solid #777777;
    color: white;
    border-radius: 5px;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 25px;
    padding-right: 25px;
    font-size: 1rem;
    line-height: 1
}

#cancel-edit {
    background-color: #979eaf;
    border: 1px solid #777777;
    color: white;
    border-radius: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

#save-edit {
    background-color: #5d87c5;
    border: 1px solid #416497;
    color: white;
    border-radius: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

#edit-experiment {
    background-color: #849ec5;
    border: 1px solid #58739d;
    color: white;
    border-radius: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

#delete-experiment {
    background-color: #c93f3f;
    border: 1px solid #9a2e2e;
    color: white;
    border-radius: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

.experiment-page form .hidden {
    opacity: 0;
}

.remove-placeholder {
    opacity: 0;
    pointer-events: none;
}