/*form styling is modified from lab 2*/

.complex_form {
    display: flex;
    flex-direction: column;
    background-color: #253a5e;
    border-radius: 5px;
    padding: 8px;
    align-self: center;
}

#image_form { 
    max-width: 80%;
    min-width: 80%;
    margin-top: 25px;
}

#comment_form {
    max-width: 80%;
    min-width: 80%;
    margin-top: 15px;
}

.form_header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.form_title {
    font-size: large;
}

.form_element {
    margin-top: 5px;
    background-color: #172038;
    color: #ebede9;
    border-radius: 5px;
    border-color: #1e1d39;
}

.btn {
    background-color: #4f8fba;
    color: #ebede9;
    font-size: larger;
    margin-top: 8px;
    border-radius: 5px;
    border-color: transparent;
}

.btn:hover {
    background-color:  #73bed3;
}

#collapse_btn {
    background-repeat: no-repeat;
    height: 25px;
    width: 25px;
    background-position: center;
    background-size: contain;
}

.open {
    background-image: url("../media/up_icon.png");
}

.closed {
    background-image: url("../media/down_icon.png");
}

.delete_icon {
    background-image: url("../media/delete_icon.png");
    background-repeat: no-repeat;
    height: 25px;
    width: 25px;
    background-position: center;
    background-size: contain;
}

.delete_icon:hover {
    background-image: url("../media/delete_icon_red.png");
}