* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #343a40;
    background-color: #F5F5F5;
    /* background-color: tomato; */

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* margin: 10px; */
}
a {
    color: #007bff;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
#content-container {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 1rem;
    max-width: 90%;
    padding-bottom: 20px;
    /* display: none; */
}
#loading {
                margin-top: 30px;
            animation: blinker 1s linear infinite;
}
@keyframes blinker {
    50% {
        opacity: 0;
    }
}
.divider {
    width: 7%;
    /* margin: 2rem auto; */
    border-bottom: 3px solid black;
}
.album-cover-img {
    /* width: 300px; */
    /* max-width: 90%; */
    /* width: 40%; */
    max-height: 400px;
}
button, ::file-selector-button {
    color: #fff;
    background-color: #343a40;
    border: none;
    /* border-color: #343a40; */
    border-radius: .25rem;
    padding: .25rem;
    width: 100px;
}
button:hover, ::file-selector-button:hover {
    cursor: pointer;
    background-color: hsl(210, 10%, 13%);
}
button:disabled {
    color: #343a40;
    background-color: lightgrey;
    cursor:auto;
}
i:hover {
    cursor: pointer;
}
.row {
    display: flex;
    justify-content: center;
    flex-direction: row;
    gap: 20px;
    width: 1000px;
    max-width: 90%;
}
.col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    /* justify-content: center; */
}
@media(max-width: 750px) {
    .row {
        flex-direction: column;
        align-items: center;
    }
}
.auth-form {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    /* padding: 1.5rem; */
}
.auth-form input,
.auth-form button,
.auth-form select {
        width: 300px;
        padding: 5px;
        margin: 5px;
        border-radius: .25rem;
        border: 1px solid black;
    }

/* 
    are these just used on the login page?
*/
#signup-link {
    margin-left: auto;
    padding: 5px;
}

/* 
    styles for the list page
*/

/* .summary {
    width: 200px;
}
#summary-text {
    text-align: justify;
} */





/* table styles */
.standard-table {
    max-width: 90%;
    width: 1000px;
    text-align: center;
    border-collapse: collapse;
    height: 30%;
    overflow: auto;
}
.standard-table > thead > tr > th {
    padding: 10px;
    border-top: 2px solid #dee2e6;
    border-bottom: 2px solid #dee2e6;
}
.standard-table > tbody >  tr {
    padding: 50px;
}
.standard-table > tbody > tr {
    height: 100px;
}
.standard-table > tbody > .dark {
    background-color: rgba(0,0, 0, .05);
}
.standard-table > tbody > tr > td {
    padding: 10px;
}
.link-cell {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

/* modal styles */
.modal {
    padding: 1em;
    max-width: 50ch;
    width: 350px;
}
	
dialog {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
}

dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.6);
}


.modal-row {
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    width: 100%;
    padding-left: 5px;
    padding-right: 1px;
}

.wide-input {
                width: 300px;
            padding: 5px;
            margin: 5px;
            border-radius: .25rem;
            border: 1px solid black;
            height: 31px;
            min-height: 31px;
}


/* media queries */
.mobile-show {
    display: none;
}

/* hide table columns w/ class -mobile-hide */
@media screen and (max-width: 600px) {
    .mobile-hide{
        display: none;
    }
    .mobile-show{
        display: table-cell;
    }
}

.header-button-container {
    margin-right: auto;
    display: flex;
    gap: 20px;
}

.hide {
    display: none;
}