/* Mise en page générale du site, particulièrement du front */

:root {
    --middle_blue : #037285;
    --dark_blue : #30344C;
    --light_blue: #1AA4BA;
    --orange: #F39200;
    --green: #94C11F;
    --red: #BA334E;
    --grey_blue: #94B2C3;
    --type_service : rgb(208, 227, 238);
}

html {
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    background-color: white;
    color: black;
}

.entreprise {
    text-align: center;
}

.entreprise p {
    font-size:x-large;
}

#entreprise {
    color: var(--middle_blue);
    font-weight: bold;
}

.entreprise img {
    width: auto;
    height: 150px;
}

.list_services_element {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.element_details {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    width: 60%;
    color: white;
    background-color: var(--light_blue);
    justify-content: space-between;
    padding: 5px;
    padding-top: 1px;
    padding-bottom: 1px;
    margin: 5px;
    font-size: small;
    border-radius: 10px;
}

.element_header {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    width: 100%;
}

#separation {
    border-color: white;
}

.display {
    width: 100%;
}

.display_details {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    width: 100%;
}

.display_details h3, .display_details .status {
    font-weight: normal;
    font-size: 17px;
}

.element_display_btn {
    text-decoration: none;
    text-align: center;
    color: white;
    font-weight: 700;
    font-size: x-large;
    width: 35px;
    height: 35px;
    transition: all ease 0.15s;
}

.element_display_btn:hover {
    border: 1px dashed var(--grey_blue);
    border-radius: 50%;
    background-color: var(--grey_blue);
    transition: all ease 0.15s;
}

.status_color {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    margin-right: 5px;
    gap: 5px;
}

.dot {
    height: 15px;
    width: 15px;
    border-radius: 50%;
    display: inline-block;
    background-color: var(--green);
}

.working {
    background-color: var(--green);
}

.not_working {
    background-color: var(--orange);
}

.tab_list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

.tab_list li {
    list-style-type: none;
}

.tab_header a {
    text-decoration: none;
    color: var(--middle_blue);
}

.tab_header a:hover {
    color: var(--middle_blue);
    text-shadow:0.2px 0.5px 2px;
    transition : all ease 0.1s;
}

.selected {
    font-weight:600;
    color: var(--middle_blue);
    text-shadow:0.2px 0.5px 2px;
    transition : all ease 0.1s;
}

.tab_details {
    margin: 15px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.tab_details .card {
    width: 70%;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 1px var(--dark_blue);
}

.card_title {
    padding-bottom: 10px;
}

.card_title a {
    text-decoration: none;
    font-size: larger;
    font-weight: bold;
    color: var(--middle_blue);
}

.card_subtitle .type_service { 
    border-radius: 10px;
    padding: 3px;
    margin: 3px;
    background-color: var(--type_service);

}

.card_subtitle_infos_dates p {
    font-size: smaller;
}

.comment_details {
    margin: 5px;
    padding: 2px;
    box-shadow: 5px 2px 5px rgb(123, 123, 123);
    background-color: rgb(235, 234, 234);
}

.comment_content {
    word-break: break-all;
    white-space: normal;
    width: 100%;
    text-wrap: balance;
}

.comment_date {
    font-size: smaller;
}

.date_declared, .date_resolved, .comment_date {
    color: var(--dark_blue);
}

.card_comments {
    font-weight: bold;
}

button {
    background-color: var(--middle_blue);
    border-radius: 5px;
    border-color: var(--middle_blue);
    width: max-content;
    font-size: larger;
    height: 50px;
}

#loadMoreBtn button {
    color: white;
}

button a {
    color: white;
    text-decoration: none;
}

.buttons {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 15px;
    gap: 5px;
}

button:hover {
    background-color: var(--dark_blue);
    transition: all ease 0.4s;
}

footer, .legal_links {
    text-align: center;
    color: rgb(161, 158, 158);

}

footer a {
    text-decoration: none;
    color: rgb(161, 158, 158);
    margin: 15px;
}


.hidden {
    display: none;
    transition : all ease 0.2s;
}