/* CSS styles file for FITstagram */
/* navigation bar buttons  */

body {
    margin: 0px;
    padding: 0;

    /* grid so the christmas tree can justify self */
    display: grid;
    /* display: flex; */
    /* flex-direction: column; */
}

.christmas-decorations-notice {
    font-family: "Bebas Neue", sans-serif;
    justify-self: center;
    font-size: smaller;
}

h2, h3, h4, label {
    font-family: "Bebas Neue", sans-serif;
}

.user {
    font-family: sans-serif;
    text-decoration: none;
    color: black;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    padding-inline: 0.5em;
}

.user img {
    height: 1em;
}

.upload-form-notice {
    font-family: sans-serif;
    font-size: smaller;
    margin-bottom: 1em;
}

.upload-form-notice p {
    margin-block: 0.1em;
}

.tag-link {
    font-family: sans-serif;
    text-decoration: blue;
    padding-inline: 0.2em;
    overflow-wrap: anywhere;
}

.page-links {
    /* display: inline; */
    display: flex;
    flex-direction: column;
    margin-top: 1em;
    text-align: center;
}

.page-count {
    font-family: sans-serif;
    font-size: larger;
    text-decoration: none;
    color: black;
    margin: 0.2em;
}


footer a {
    font-size: smaller;
    margin-inline: 0.5em;
}

.overflow-x-scroll-container {
    overflow-x: scroll;
    max-width: 100%;
}

.stats {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 500;
    border-spacing: 0;
    border-collapse: collapse;
    text-align: center;
}

.stats td {
    border: 1px solid black;
    padding: 0.5em;
    min-width: 45px;
    max-width: 450px;
    overflow-wrap: anywhere;
}

.stats-white {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 500;
    border-spacing: 0;
    border-collapse: collapse;
    text-align: center;
}

.stats-white td {
    border: 1px solid white;
    padding: 0.5em;
    min-width: 45px;
    max-width: 450px;
    overflow-wrap: anywhere;
}


.nav_bar_button {
    background-color: #30A7E4;
    /* border-radius: 50px; */
    height: 75px;
    width: 95%;
    color: white;
    padding: 5px;
    margin: 8px;
    /* border: #30A7E4; */
    border: none;
    font-family: "Bebas Neue", sans-serif;
    /* to make the "unzoom" back  */
    transition: transform 0.1s ease-in-out;
    /* alignment of the text */
    /* really helpful for understanding flexbox: */
    /* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-decoration: none;
    outline: none;
}

.nav_bar_button img {
    height: 50%;
}

.nav_bar_button:hover {
    background-color: deepskyblue;
    cursor: pointer;
    transform: scale(1.1);
    transition: transform 0.1s ease-in-out;
}

.nav_bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background-color: #30A7E4;
    width: 100%;
}

.logo_w_text {
    display: flex;
    justify-content: flex-start;
}

.bar_buttons {
    /* max-width: 80%; */
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.bar-buttons a {
    text-decoration: none;
    display: inline-block;
}

.bar-buttons b {
    text-decoration: none;
}

.log_in {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: 5px;
}

.logo {
    margin-right: 10px;
    margin-top: 10px;

    color: white;
    text-decoration: none;
    font-family: "Bebas Neue", sans-serif;
}

.image_logo {
    width: 100px;
    height: 85px;
    margin-left: 9px;
}

/* animation test */
.image_logo:hover {
    transform: rotate(30%);
    transform: rotate(-60%);
    transform: rotate(30%);
    transition: transform 1s ease-in-out;
}

.log_log {
    /* display: flex; */
    /* flex-direction: column; */
    font-family: "Bebas Neue", sans-serif;
    color: white;
    padding: 10px;

    /* i dont even know what this does */
    align-items: center;
    justify-content: center;
}

.log_log p {
    margin-block: 0.2em;
}

/* BUTTONS */
/* #group_button {
    background-image: url('../img_src/world.png');
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center center;
}

#users_button {
    background-image: url('../img_src/users-alt.png');
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center center;
} */

#my_prof_button {
    background-image: url('../img_src/portrait.png');
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center center;
}

#upload_button {
    background-image: url('../img_src/upload.png');
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center center;
}

#notif_button {
    background-image: url('/static/img_src/notif.png');
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center center;
}
#notif_new_button {
    background-image: url('/static/img_src/notif.png');
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center center;
}
#search_button {
    background-image: url('/static/icons/magnifying-glass.svg');
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center center;
}

#notif_new_button::after {
    content: "";
    position: relative;
    width: 10px; /* Size of the circle */
    height: 10px; /* Size of the circle */
    background-color: red; /* Circle color */
    border-radius: 50%; /* Make it a circle */
    bottom: 0; /* Position at the bottom */
    right: 0; /* Position at the right */
  }

#register_button {
    background-image: url('../img_src/user-add.png');
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 3px;
    margin: 8px;
}

#login_button {
    background-image: url('../img_src/sign-in-alt.png');
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 3px;
    margin: 8px;
}

#logout_button {
    background-image: url('../img_src/sign-out-alt.png');
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 3px;
    margin: 8px;
}
/*****************************************************************/

/* generated from: https://fonts.google.com/selection/embed */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
.bebas-neue-regular {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 500;
    font-style: normal;
}
/* end of: https://fonts.google.com/selection/embed */



.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: scroll;
    width: 100%;
}

.footer {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 10px; /* it was 70px but now the christmas tree is there */
    background-color: #30A7E4;
    font-family: sans-serif;
    align-items: center;
}

.footer footer {
    align-items: center;
    color: white;
    padding: 0.2em;
    margin: 0;
}

.footer hr {
    margin: 0;
}

.submit_form {
    margin-top: 30px;
    margin-bottom: 30px;
    width: min(95vw, 500px);
    padding-inline: 20px;
    height: auto;
    background-color: #30A7E4;
    color: white;
    border-radius: 10px;
    padding-bottom: 1em;
    font-family: sans-serif;
}

.submit_form p li {
}

.submit_form label {
    display: block;
    text-align: left;
}

.input {
    font-family: "Bebas Neue", sans-serif;
    border: none;
    width: 80%;
    border-radius: 5px;
    color: black;
}

.login_input {
    margin: 20px;
    min-width: 70px;
    height: 40px;
    font-family: "Bebas Neue", sans-serif;
    color: #30A7E4;
    background-color: white;
    border-radius: 20px;
    transition: transform 0.4s ease-in-out;
    border: none;
}

.login_input:hover {
    background-color: deepskyblue;
    color: white;
    cursor: pointer;
    transform: scale(1.1);
    transition: transform 0.4s ease-in-out;
}

.login_input:disabled {
    color: white;
    background-color: grey;
    transition: none;
    transform: none;
    cursor: default;
}

.submit_form_reg {
    overflow: auto;
    margin-top: 30px;
    margin-bottom: 30px;
    width: 400px;
    /* height: 400px; */
    background-color: #30A7E4;
    color: white;
    border-radius: 10px;
}

.submit_form_reg label {
    display: block;
    text-align: left;
    margin-left: 38px;
}

.radio-lbl {
    text-align: center;
    display: inline;
}

.upload_form {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
    margin-bottom: 30px;
    width: min(500px, 95vw);
    height: auto;
    background-color: #30A7E4;
    color: white;
    border-radius: 10px;
}
.upload_form form {
    width: 85%;
}

.upload_form textarea {
    width: 100%;
}

.row {
    display: flex;
    flex-direction: row;
}


.radio {
    margin-left: 110px;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 80%;
}

.user_list {
    display: inline-block;
    width: min(500px, 95vw);
    margin: 5px;
    padding: 15px;
    background-color: #30A7E4;
    color: white;
    border-radius: 20px;
    height: auto;
    text-decoration: none;
    font-family: "Bebas Neue", sans-serif;
    overflow-wrap: anywhere;
}

.user-info-for-admin {
    font-size: smaller;
    color: lightgray;
    font-family: monospace;
    position: relative;
    top: -0.6em;
}

.group_button {
    margin: 20px;
    width: 120px;
    height: 40px;
    font-family: "Bebas Neue", sans-serif;
    color: #30A7E4;
    background-color: white;
    border-radius: 20px;
    transition: transform 0.4s ease-in-out;
    border: none;
}

.group_button:hover {
    background-color: deepskyblue;
    color: white;
    cursor: pointer;
    transform: scale(1.1);
    transition: transform 0.4s ease-in-out;
}

.new_group {
    margin-top: 30px;
    margin-bottom: 30px;
    width: 450px;
    padding: 20px;
    height: auto;
    background-color: #30A7E4;
    color: white;
    border-radius: 10px;
}

.new_group label {
    display: block;
    text-align: left;
    margin-left: 45px;
}

.new_group_input {
    width: 80%;
    margin: 2px;
}

.post {
    display: flex;
    flex-direction: column;
    background-color: #D3D3D3;
    margin: 20px; /* whats this for anyway? :think: */
    height: auto;
    width: min(500px, 90vw);
    align-items: center;

    padding-left:  2%;
    padding-right: 2%;
    box-sizing: border-box; /* ensures padding doesn't affect total width */
}

.post-img-container {
    width: 100%;
    max-height: 800px;

    /* show scroll bar if image is tall */
    overflow-y: auto;
}

.post-description {
    width: 100%;
    overflow-wrap: anywhere;
    max-height: 10em;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.post-description-expanded {
    max-height: none;
}

.post hr {
    border: 1px solid gray;
    width: 100%;
}

.post-img {
    width: 100%;
}

.post-date {
    font-family: "Bebas Neue", sans-serif;
    margin-block: 0.2em;
}

.post_header {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.post_header h4 {
    margin-inline: 1em;
}

.post_name {
    margin-left: 60px;
    overflow-wrap: anywhere;
}

.private_button {
    height: 50px;
    background-color: #D3D3D3;
    background-image: url('../img_src/user-lock.png');
    background-size: 30%;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 3px;
    margin: 8px;
    transition: transform 0.4s ease-in-out;
    font-family: "Bebas Neue", sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border: none;
    /* margin-left: 60px; */
    flex: 1;
}

.private_button:hover {
    background-color: grey;
    transform: scale(1.1);
    transition: transform 0.4s ease-in-out;
}

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

.like_button {
    width: 30px;
    height: 30px;
    background-color: #D3D3D3;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 3px;
    margin: 8px;
    transition: transform 0.4s ease-in-out;
    font-family: "Bebas Neue", sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border: none;
    cursor: pointer;
}

#like {
    background-image: url('../img_src/social-network.png');
}

#unlike {
    background-image: url('../img_src/thumbs-up.png');
}

#comment {
    background-size: 80%;
    background-image: url('../img_src/comment-dots.png');
    margin-left: 0px;
}

#tag_img {
    background-image: url('../img_src/tags.png');
}

#send {
    background-image: url('../img_src/paper-plane.png');
}

#delete {
    background-image: url('../img_src/trash.png');
    width: 20px;
    height: 20px;
}
.comment_input {
    border-radius: 5px;
    border: none;
}

.like_button:hover {
    transition: transform 0.4s ease-in-out;
    transform: scale(1.1);
}

.under_post_form {
    display: inline-block;
}

.like_count {
    text-decoration: none;
    color: black;
    font-family: "Bebas Neue", sans-serif;
}

.comment_form {
    display: flex;
    align-items: center;
    height: 30px;
}

.like_div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-left: 20px;
    margin-top: 10px;
}

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

.comments_section {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-wrap: anywhere;
    width: 100%;
}

.select_order {
    margin: 10px;
    background-color: #D3D3D3;
    /* width: auto; */
    height: 25px;
    border-radius: 8px;
    border: none;
    font-family: "Bebas Neue", sans-serif;
    transition: transform 0.4s ease-in-out;
}

.select_order:hover {
    background-color: #b9bbb6;
    transition: transform 0.4s ease-in-out;
    transform: scale(1.1);
}

.refresh_button {
    margin: 10px;
    background-color: #D3D3D3;
    width: auto;
    height: 25px;
    border-radius: 8px;
    font-family: "Bebas Neue", sans-serif;
    transition: transform 0.1s ease-in-out;
    /* background-image: url('../img_src/refresh.png'); */
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    background-size: 80%;
    background-repeat: no-repeat;
    /* background-position: center center; */
}

.order-menu {
    justify-content: center;
    display: flex;
    flex-direction: row;
}

.refresh_button:hover {
    background-color: #b9bbb6;
    transition: transform 0.4s ease-in-out;
    transform: scale(1.1);
}

/* location: upload.html */
#file-size-limit-notice {
    color: red;
}

.group_buttons {
    display: flex;
    align-items: center;
    gap: 180px;
}

.group_button_view {
    /* position: absolute; */
    /* left: 10px; */
    margin-right: 20px;
    margin-left: 20px;
    width: 120px;
    height: 40px;
    font-family: "Bebas Neue", sans-serif;
    background-color: #30A7E4;
    color: white;
    border-radius: 20px;
    transition: transform 0.1s ease-in-out;
    border: none;
}

.group_button_view:hover {
    background-color: deepskyblue;
    color: white;
    cursor: pointer;
    transform: scale(1.1);
    transition: transform 0.1s ease-in-out;
}

.delete_tag {
    margin-top: 15px;
    position: absolute;
    left: 10px;
    margin-right: 20px;
    margin-left: 20px;
    width: 120px;
    height: 40px;
    font-family: "Bebas Neue", sans-serif;
    color: white;
    background-color: #FF0800;
    border-radius: 20px;
    transition: transform 0.1s ease-in-out;
    border: none;
}

.delete_tag:hover {
    background-color: #960018;
    color: white;
    cursor: pointer;
    transform: scale(1.1);
    transition: transform 0.4s ease-in-out;
}

.tag_header {
    display: inline;
}

.delete_group {
    margin-right: 20px;
    margin-left: 20px;
    width: 120px;
    height: 40px;
    font-family: "Bebas Neue", sans-serif;
    color: white;
    background-color: #FF0800;
    border-radius: 20px;
    transition: transform 0.4s ease-in-out;
    border: none;
}

.delete_group:hover {
    background-color: #960018;
    color: white;
    cursor: pointer;
    transform: scale(1.1);
    transition: transform 0.4s ease-in-out;
}

.block_sel {
    margin: 10px;
    background-color: #D3D3D3;
    /* width: auto; */
    height: 25px;
    border-radius: 8px;
    border: none;
    font-family: "Bebas Neue", sans-serif;
    transition: transform 0.4s ease-in-out;
}

.block_sel:hover {
    cursor: pointer;
    background-color: #b9bbb6;
    transition: transform 0.4s ease-in-out;
    transform: scale(1.1);
}

#repost_button {
    background-image: url('../img_src/repost.png');
    width: 20px;
    height: 20px;
}

.promote_user {
    margin-right: 20px;
    margin-left: 20px;
    width: 120px;
    height: 40px;
    font-family: "Bebas Neue", sans-serif;
    color: white;
    background-color: deepskyblue;
    border-radius: 20px;
    transition: transform 0.4s ease-in-out;
    border: none;
}

.promote_user:hover {
    background-color: #007FFF;
    color: white;
    cursor: pointer;
    transform: scale(1.1);
    transition: transform 0.4s ease-in-out;
}

.demote_user {
    margin-right: 20px;
    margin-left: 20px;
    width: 120px;
    height: 40px;
    font-family: "Bebas Neue", sans-serif;
    color: white;
    background-color: #fd5c63;
    border-radius: 20px;
    transition: transform 0.4s ease-in-out;
    border: none;
}

.demote_user:hover {
    background-color: #FF033E;
    color: white;
    cursor: pointer;
    transform: scale(1.1);
    transition: transform 0.4s ease-in-out;
}

.main_user_div {
    display: flex;
    flex-direction: column;
    width: min(90vw, 800px);
}

.delete_user_button {
    width: 30px;
    height: 30px;
    background-color: #30A7E4;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 3px;
    margin: 8px;
    transition: transform 0.4s ease-in-out;
    font-family: "Bebas Neue", sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border: none;
    cursor: pointer;
}

.delete_user_button:hover {
    transition: transform 0.4s ease-in-out;
    transform: scale(1.1);
}

.error-text {
    color: red;
    overflow-wrap: anywhere;
    max-width: 75%;
}

.post_list_nav {
    font-family: "Bebas Neue", sans-serif;
    font-size: larger;
    text-decoration: none;
    color: white;
    background-color: #30A7E4;
    padding: 5px 7px;
    border-radius: 10px;
    transition: transform 0.1s ease-in-out;
    margin: 10px;
}

.post_list_nav:hover {
    transform: scale(1.1);
    transition: transform 0.1s ease-in-out;
    cursor: pointer;
}

.totp-qrcode {
    width: min(50%, 75vw);
    height: auto;
    position: relative;
    left: 25%;
}

#description-input {
    resize: vertical;
    max-height: 100em;
}

.small-button {
    height: 1.5em;
    width: auto;
    padding: 0.1em;
    margin-inline: 0.1em;
}

.small-button img {
    height: 100%;
    width: auto;
}

.user-table-row img {
    height: 1em;
}
.user-table-row .blue-checkmark {
    background-color: white;
    padding: 0.1em;
}
.submit_form .blue-checkmark {
    background-color: white;
    padding: 0.1em;
}
.user-table-row a {
    margin-inline: 1em;
}
.small-icon {
    height: 1em;
    margin-inline: 0.4em;
}

.blue-checkmark {
    position: relative;
    top: 0.2em;
    height: 0.8em;
    margin: 0.1em;
    padding-top: 0.2em;
}

#ux-link {
    background-color: greenyellow;
    border-radius: 0.25em;
    padding: 0.5em;
    margin-right: 1em;
    font-family: sans-serif;
    text-decoration: none;
    color: darkblue;
}

.post-name-anchor {
    color: black;
    text-decoration: none;
}

.post-dimensions-and-filesize {
    font-size: small;
    font-family: sans-serif;
    color: gray;
}

.ux-surv-radio {
    display: flex;
    flex-direction: row;
}

.signed-badge {
    font-family: sans-serif;
    padding: 0.25em;
    margin: 0.25em;
    border-radius: 0.25em;
    border: 1px solid black;
    background-color: lightgreen;
}

.signed-badge a {
    text-decoration: none;
    color: black;
}

.button-sign {
    display: flex;
    flex-direction: row;
    padding: 0.25em;
    margin:  0.25em;
    border-radius: 0.5em;
    border: 1px solid black;

    text-decoration: none;
    color: black
}

.button-sign img {
    height: 1em;
    width: auto;
}

.login-qr-code {
    width: 80%;
}