/* Main Doc Styling */
* {
    padding: 0;
    margin: 0;

    /* debug borders */
    /* border: 1px red dotted; */
}

@font-face {
    font-family: 'unicorn';
    src: url('/fonts/unicorn.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --highlights: #9A0EF8; 
    --lowlights: rgb(0, 0, 0);
    --background: white;
    --solidBackground: white; 
    background-color: var(--background);
    font-family: Arial, sans-serif; 
}

body {
    color: var(--lowlights);
}

a {
    color: var(--lowlights);
}

a:visited {
    color: var(--lowlights);
}

.pageTitleH1{
    text-align: center;
    width: 80%;
    margin: 30px;
}

.altBodyStyle {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
}

/* Stop Main Doc Styling */

/* Start Error Styling */
div.errContainer {
	text-align: center;
	
	p.errMsg {
		margin-top: 10px;
        margin-right: auto;
        margin-left: auto;
		width: 700px;
		font-size: 3em;
		color: var(--lowlights);
	}
	p.errCode {
		margin-top: 20px;
		font-size: 2em;
		color: var(--highlights);
	}
}
/* Stop Error Styling */

/* Start Landing Styling */
#landingPage button {
    background: linear-gradient(135deg, var(--lowlights), var(--highlights));
    color: Rgb(0, 0, 0, 60%);
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 8px 0;
    border-style: outset;
    border-width: 1px;
    box-shadow: 3px 3px 10px var(--lowlights);
}

#landingPage button:hover {
    box-shadow: none;
    color: Rgb(255, 255, 255, 70%);
}

#underline-header {
    display: inline-block;
    border-bottom: 3px inset var(--highlights);
    padding-bottom: 5px;
}


/* MEDIA QUERY FOR DESKTOP */
@media (min-width: 1366px) {
    .underline-header {
        position: absolute;
        top: 5px;
        left: 150px;
        font-size: 50px;
    }

    .login-button {
        position: absolute;
        top: 20px;
        right: 40px;
        padding: 10px 20px;
        background: var(--highlights);
        color: var(--lowlights);
        border: none;
        border-radius: 6px;
        font-size: 16px;
        cursor: pointer;
        transition: background 0.3s;
    }

    .logo-img {
        position: absolute;
        width: 90px;
        height: 100px;
        margin-left: 15px;
        margin-bottom: 520px;
    }

    .phone-img {
        position: absolute;
        width: 270px;
        height: 500px;
        margin-left: 230px;
        margin-top: 100px;
    }

    .content {
        position: absolute;
        top: 125px;
        right: 250px;
        padding: 10px 20px;
    }

    .Caption {
        font-size: 50px;
    }
}


  /* MEDIA QUERY FOR PHONES */
@media (max-width: 500px) {
    .underline-header {
        position: static;
        font-size: 25px;
        text-align: center;
        margin-top: 35px;
        margin-left: 90px;
    }

    .login-button {
        position: static;
        display: block;
        margin: 5px auto;
        margin-bottom: 0px;
        font-size: 14px;
        padding: 10px 10px;
    }

    .logo-img {
        position: absolute;
        top: 20px;    
        left: 8px;     
        width: 15vw;   
        height: auto;
        display: block;
    }

    .phone-img {
        position: static;
        width: 60vw;
        height: auto;
        display: block;
        margin: 10px auto;
    }

    .content {
        position: static;
        padding: 10px;
        text-align: center;
    }

    .removebr {
        display: none;
    }

    .Caption {
        font-size: 25px;
    }

    #landingPage button {
        width: 90%;
        font-size: 14px;
    }  
}

  /* MEDIA QUERY FOR IPAD */
  @media (min-width: 501px) and (max-width: 1365px) {
    .underline-header {
    position: static;
    font-size: 35px;
    text-align: left;
    margin-top: 30px;
    margin-left: 120px;   
  }


  .login-button {
    position: static;
    display: block;
    margin: 10px auto;
    font-size: 15px;
    padding: 10px 15px;
  }

  .logo-img {
    position: absolute;
    top: 10px;   
    left: 20px;  
    width: 80px;
    height: auto;
    display: block;
    margin: 0;   
  }


  .phone-img {
    position: static;
    width: 45vw;
    height: auto;
    display: block;
    margin: 20px auto;
  }

  .content {
    position: static;
    text-align: center;
    max-width: 90%;
    margin: 0 auto;
  }

  .Caption {
    font-size: 32px;
  }

  button {
    width: 80%;
    font-size: 15px;
  }

  .removebr {
    display: none;
  }
  }

/* Stop Landing Styling */

/* Start Signup Styling */

.signupForm {
    background-color: var(--background);
	padding: 0px 30px 20px;
	border: var(--highlights) 2px solid;
	box-shadow: 5px 5px 10px var(--lowlights);
	width: 400px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2em;
    margin-bottom: 2em;
    
}

.signupForm h2 {
    text-align: center;
    margin-bottom: 20px;
}

.signupForm label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.signupForm input, .signupForm input[type="email"], .signupForm input[type="password"] {
    width: 95%;
    padding: 10px;
    margin-bottom: 15px;
    font-size: 14px;
    border: 1px solid var(--lowlights);
    border-radius: 5px;
}

.signupForm button {
    background: linear-gradient(135deg, var(--lowlights), var(--highlights));
    color: Rgb(0, 0, 0, 60%);
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 8px 0;
    border-style: outset;
    border-width: 1px;
    box-shadow: 3px 3px 10px var(--lowlights);
}

.signupForm button:hover {
    box-shadow: none;
    color: Rgb(255, 255, 255, 70%);
}

.requirements {
    font-size: 12px;
    margin-top: 10px;
    color: red;
}

.requirements ul {
    padding-left: 20px;
    margin-top: 5px;
}

.requirements li {
    list-style: disc;
}

.requirementsSignup {
    font-size: 12px;
    color: red;
}

.requirementsSignup ul {
    padding-left: 20px;
    margin-top: 5px;
}

.requirementsSettings {
    font-size: 12px;
    color: red;
    margin-left: 170px;
}

.requirementsSettings ul {
    padding-left: 20px;
    margin-top: 5px;
}

.met {
    color: green;
}

/* Stop Signup Styling */


/* Start forgot Styling */

.forgotaccount-form {
    background-color: var(--background);
	padding: 0px 30px 20px;
	border: var(--highlights) 2px solid;
	box-shadow: 5px 5px 10px var(--lowlights);
	width: 400px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2em;
    margin-bottom: 2em;
}

.forgotaccount-form h2 {
    text-align: center;
    margin-bottom: 20px;
}

.forgotaccount-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.forgotaccount-form input {
    width: 95%;
    padding: 10px;
    margin-bottom: 15px;
    font-size: 14px;
    border: 1px solid var(--lowlights);
    border-radius: 5px;
}

.forgotaccount-form button {
    background: linear-gradient(135deg, var(--lowlights), var(--highlights));
    color: Rgb(0, 0, 0, 60%);
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 8px 0;
    border-style: outset;
    border-width: 1px;
    box-shadow: 3px 3px 10px var(--lowlights);
}

.forgotaccount-form h2 {
    padding:10px;
}

.forgotaccount-form button:hover {
    box-shadow: none;
    color: Rgb(255, 255, 255, 70%);
}

/* Stop forgot Styling */


/* Start NavPane Styling */
.navPane {
    max-width: 375px;
    border: 2px solid var(--highlights);
    margin-left: 500px;
    position: absolute;
    top: 0;
    right: 0;
    min-height: 99.5vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--background);
}

.user {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.user img {
    max-width: 75px;
    max-height: 75px;
    border-radius: 50%;
    margin: 1em;
    box-shadow: 2px 2px 5px Rgb(0, 0, 0, 50%);
}

.user a {
    font-size:larger;
    margin-right: .5em;
    color: var(--lowlights);
    text-decoration: none;
}

.headerProgress {
    margin: .5em;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.offsetListItem {
    margin-left: 1.5em;
}

.navPane ul {
    list-style: none;
    margin: 1em;
}

.navPane a {
    text-decoration: none;
    color: var(--lowlights);
}

.navPane a:hover {
    color: black;
}

.navPane a::after {
    color: var(--lowlights);
}

.navPane svg {
    fill: var(--highlights);
}

.bottomNavBit {
    margin: 1em;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.bottomNavBit a {
    margin: 1em;
}
/* Stop NavPaneStyling */


/* Start Progress Wheel Styling */
.currentlyReadingWidget p, h2 {
    color: var(--lowlights);
}

.rotate90 {
    transform: rotate(90deg);
}

.progressCircleContainer {
    height: 50px;
    width: 50px;
    position: relative;
}

.circle-progress {
    fill: none;
    stroke: var(--highlights);
    stroke-width: 5;
    /* 141 is circumference */
    stroke-dasharray: 141;
    stroke-dashoffset: 0;
}

.circle-background {
    fill: none;
    stroke: #cbc0ca;
    stroke-width: 5;
    /* 141 is circumference */
    stroke-dasharray: 141;
    stroke-dashoffset: 0;
}

.currentlyReadingPercent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: small;
    color: var(--lowlights);
}

.progress {
    display: flex;
    justify-content: space-evenly;

}
/* Stop Progress Wheel Styling */

/* Start List Styling */
.listContainer {
    border: var(--highlights) 2px solid;
    margin-top: 2em;
    margin-left: 2.5%;
    width: 80%;
    height: fit-content;    
    box-shadow: 5px 5px 10px var(--lowlights);
    background-color: var(--background);
}

.books {
    display: flex;
    margin-bottom: 2em;
}

.listContainer h2 {
    margin: .5em;
}

.listContainer a{
    text-decoration: none;
}

/* Start Search Book Pop-up Styling */

.listContainer button {
    background: linear-gradient(135deg, var(--lowlights), var(--highlights));
    color: Rgb(0, 0, 0, 60%);
    border: none;
    padding: 6px 24px;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 8px 0;
    border-style: outset;
    border-width: 1px;
    box-shadow: 3px 3px 10px var(--lowlights);
}

.listContainer button:hover {
    box-shadow: none;
    color: Rgb(255, 255, 255, 70%);
}

div.oneLineContainer
#isbnSearch,
#bookcaseName,
#bookshelfName
 {
    width: 50%;
    margin-left: 10px;
    padding: 5px;
    font-size: 14px;
    border: 1px solid var(--lowlights);
    border-radius: 5px;
}

span.xButton {
   padding: 1em 0.5em;
}

span.xButton:hover {
   padding: 1em 0.5em;
   color: var(--highlights);
}

/* Stop Search Book Pop-up Styling */

.bookContainer {
    margin-top: 1em;
    margin-left: 2em;
    margin-right: 2em;
    max-width: fit-content;
    text-align: center;
    background-color: var(--background);
    a {text-decoration: none};
}

.bookContainer img {
    max-width: 8rem;
}

.addBookIcon {
    justify-content: center;
    align-content: center;
}

.addBookIcon svg {
    min-height: 4em;
    min-width: 4em;
    fill: var(--lowlights);
}

.coverProgressContainer {
    position: relative;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.coverProgressContainer .miniProgressWheel {
    position: absolute;
    top: 0;
    right: 0;
    background-color: rgba(0,0,0,80%);
    border-radius: 50%;
}

.miniProgressWheel .currentlyReadingPercent {
    color: white;
}

/* Stop List Styling */


/* Start Stats Styling */
.statsContainer {
    border: var(--highlights) 2px solid;
    margin-top: 2em;
    margin-bottom: 1em;
    margin-left: 2.5%;
    width: 80%;
    height: fit-content;    
    box-shadow: 5px 5px 10px var(--lowlights);
    background-color: var(--background);
}


.statsContainer h2 {
    margin: .5em;
}

.textStats {
    display: flex;
    justify-content: space-around;
    max-width: 50%;
    margin-top: 1em;
    margin-bottom: 1em;
}

.generalStatsContainer {
    border: var(--highlights) 2px solid;
    background-color: var(--background);
    margin-top: 2em;
    margin-bottom: 1em;
    margin-left: 2.5%;
    width: 80%;
    height: fit-content;    
    box-shadow: 5px 5px 10px var(--lowlights);
}

.generalStatsContainer h2 {
    margin: .5em;
}

.generalStatsKeyValueContainer table {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5em;
}

.pies {
    display: flex;
    justify-content: space-around;
}

.stat {
    margin: 1em;
    display: flex;
    flex-direction: column;
    width: fit-content;
    align-items: center;
}

.stat figcaption {
    margin: .5em;
}

.chart {
    display: flex;
    place-content: center;
    flex-flow: wrap;
    gap: 2rem;
    margin: .5em;
}

.pie {
    flex: 1 0 255px;
    max-width: 200px;
    aspect-ratio: 1;
    border-radius: 50%;
    /* border: var(--lowlights) 1px solid; */
    box-shadow: 3px 3px 5px var(--lowlights);
}


/* Stop Stats Styling */


/* Start Goals Stayling */
.goalsContainer {
    border: var(--highlights) 2px solid;
    margin-top: 2em;
    margin-bottom: 1em;
    margin-left: 2.5%;
    width: 80%;
    height: fit-content;    
    box-shadow: 5px 5px 10px var(--lowlights);
    background-color: var(--background);
}

.goalsPage {
    border: var(--highlights) 2px solid;
    margin-top: 2em;
    margin-bottom: 1em;
    margin-left: 2.5%;
    width: 80%;
    height: fit-content;    
    box-shadow: 5px 5px 10px var(--lowlights);
    svg {
        fill: var(--highlights);
        max-height: 32px;
    }
}

table.goalsPage {
    max-width: 80%; 
    border-collapse: collapse;
    border: 2px solid black;
    margin-top: 2em;
    margin-bottom: 1em;
    margin-left: 2.5%;
    font-size: 0.9em; 
}

table.goalsPage th,
table.goalsPage td {
    border-bottom: 1px solid #ccc;
    border-left: none;
    border-right: none;
    border-top: none;
    padding: 6px; 
    text-align: left;
    background-color: var(--background);
}

.goalsContainer h2 {
    margin: .5em;
}

.goals {
    display: flex;
}

.rotate90 {
    transform: rotate(90deg);
}

.goalProgressContainer {
    position: relative;
    margin: 2em;
    max-width: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
} 

.goalCircleForeground {
    fill: none;
    stroke: var(--highlights);
    stroke-width: 10;
    /* 440 is circumference */
    stroke-dasharray: 565;
    stroke-dashoffset: 0;
    stroke-linecap: round;
}

.goalCircleBackground {
    fill: none;
    stroke: #cbc0ca;
    stroke-width: 10;
    /* 440 is circumference */
    stroke-dasharray: 565;
    stroke-dashoffset: 0;
}

.goalProgressPercent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: small;
    color: var(--lowlights);
}

.goalAmount {
    margin: .5em;
}

.goalsFlexContainer {
    display: flex;
    justify-content: space-around;
}
/* Stop Goals Styling */


/* start Mby List Styling */
.newListButton {
    padding: .75em;
    border-radius: 10px;
    border: 2px var(--highlights) solid;
    background-color: var(--lowlights);
    color: black;
    margin-left: 3em;
    box-shadow: 5px 5px 10px var(--lowlights);
}

/* stop Mby List Styling */


/* Start Login Styling */

.login-form {
    background-color: var(--background);
	padding: 40px 30px;
	border: var(--highlights) 2px solid;
	box-shadow: 5px 5px 10px var(--lowlights);
	width: 400px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2em;
    margin-bottom: 2em;
}

.login-form h2 {
    text-align: center;
    margin-bottom: 20px;
}

.login-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.login-form input[type="text"],
  input[type="password"],
  input[type="email"] {
    width: 95%;
    padding: 10px;
    margin-bottom: 15px;
    font-size: 14px;
    border: 1px solid var(--lowlights);
    border-radius: 5px;
}

.login-form button {
    background: linear-gradient(135deg, var(--lowlights), var(--highlights));
    color: Rgb(0, 0, 0, 60%);
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 8px 0;
    border-style: outset;
    border-width: 1px;
    box-shadow: 3px 3px 10px var(--lowlights);
}

.login-form button:hover {
    box-shadow: none;
    color: Rgb(255, 255, 255, 70%);
}

.login-form a {
    text-decoration:none;
    color:var(--lowlights);
}

.login-form a:hover {
    color: var(--highlights);
}


/* Stop Login Styling */

/* Start Loading Overlay Styling */
/* Primarily used for user login but also on bookinfo screen */

/* CSS for the loading overlay */
.loadingOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 1000;
    display: none; /* Hidden by default */
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.loadingMessage {
    font-family: Arial, sans-serif;
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 20px;
}

/* Spinner animation */
.loadingSpinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(0, 0, 0, 0.1);
    border-left-color: #337ab7;
    border-radius: 50%;
    animation: spin 1.2s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Stop Loading Overlay Styling */


/* Start Profile page Styling */
.gridContainer {
    width: 80%;
    margin-top: 1em;
    margin-left: 3%;
    display: grid;
    grid-template-columns: 30% 70%;
    grid-template-rows: 5fr 3fr 3fr 3fr;
    justify-items: center;
    align-items: center;
    text-align: center;
}

.profileStatsNestedGrid {
    width: 80%;
    margin-top: 4em;
    margin-left: 3%;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 5fr 3fr 3fr 3fr;
    justify-items: center;
    align-items: center;
    text-align: center;
    grid-column: 2 / 3;
    grid-row: 1 / span 4;
    height: 100%;
}

.gridContainer a {
    text-decoration: none;
}

.gridItem {
    height: 100%;
    width: 100%;
    align-content: center;
}


.gridItem.profileStats {
    display: flex;
    justify-content: center;
    align-items: center;
}

.gridItem.nameUserPic {
    grid-column: 1;
    grid-row: 1;
}

.gridItem.nameUserPic img {
    width: 15em;
    height: 15em;
    border-radius: 50%;
    margin-top: 1em;
    margin-bottom: 1em;
    box-shadow: 3px 3px 10px Rgb(0, 0, 0, 50%);
}

.gridItem.nameUserPic p {
    margin: 1em;
}

#editIcon svg {
    width: 40px;
    height: 40px;
}

#editPencilAboutMe {
    width: 30px;
    height: 30px;
}

.updateAboutMe h2 {
    margin-bottom: 20px;
}

.updateAboutMe textarea {
    width: 90%;
    padding: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 14px;
    border: 1px solid var(--lowlights);
    border-radius: 5px;
}

.updateAboutMe button {
   	background: linear-gradient(135deg, var(--lowlights), var(--highlights));
    color: Rgb(0, 0, 0, 60%);
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 8px 0;
    border-style: outset;
    border-width: 1px;
    box-shadow: 3px 3px 10px var(--lowlights);
}

.updateAboutMe button:hover {
    box-shadow: none;
    color: Rgb(255, 255, 255, 70%);
}

.gridItem svg {
    width: 100px;
    height: 100px;
    fill: var(--highlights);
}


.gridItem.addRemove {
    display: flex;
    justify-content: space-around;
    align-items: center;
    grid-column: 1;
    grid-row: 2;
    button {
        background: linear-gradient(135deg, var(--lowlights), var(--highlights));
        color: Rgb(0, 0, 0, 60%);
        border: none;
        padding: 12px 24px;
        font-size: 16px;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.3s ease;
        margin: 8px 0;
        border-style: outset;
        border-width: 1px;
        box-shadow: 3px 3px 10px var(--lowlights);
	}
	button:hover {
        box-shadow: none;
        color: Rgb(255, 255, 255, 70%);
	}

}

.gridItem.aboutMe{
    grid-column: 1 / 1;
    grid-row: 3 / span 2;
    justify-content: center;
}

.gridItem.aboutMe h3{
    text-align: left;
    margin-left: 1em;
    margin-bottom: 1em;
}

.gridItem.aboutMe p {
    border: 3px var(--highlights) solid;
    width: 100%;
    height: 60%;
    align-content: center;
    background-color: var(--background);
}



/* Stop Profile page Styling */

/* Start leader board Styling */

div.leaderboard {
    h2 {padding: 13px 0px 0px 13px};
    p {padding-left: 13px};
    background-color: var(--background);
	border: var(--highlights) 2px solid;
    box-shadow: 5px 5px 10px var(--lowlights);
	width: 80%;
    height: fit-content;    
    margin-top: 2em;
    margin-left: 2.5%;
}

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

.rankSort {
	display: flex;
	flex-grow: 1;					
	justify-content: right;
	margin-top: 10px;
	select {
		margin: 10;
        padding: 5px;
		border-radius: 15px;
		width: 90px;
		font-size: .75em;
		text-align: center;
	}
}

table.leaderboard {
	width: 100%;
    padding: 0px 50px 20px 50px;
	img {width: 35px; border-radius: 50%};
	#gold {color: #ffd700};
	#silver {color: #c0c0c0};
	#bronze {color: #cd7f32};
	#rose {color: #e0bfb8};
	border-spacing: 0px 30px;
    td {
        text-align: center;
		background-color: var(--solidBackground); 
		padding: 15px 5px;
	}
}

table.leaderboard tr:hover {
    cursor: pointer;
}

td.ranking {
	font-size: 1.5em;
	font-weight: 900;
	text-shadow: 1px 1px black;
}

td.rankLeader, td.rankResult {
	font-size: 14px;
}

td.rankResult {
	text-align: right;
	}

/* Stop leader board Styling */


/* Start Settings Styling */

div.settings{
    background-color: var(--background);
	padding: 40px 30px;
	border: var(--highlights) 2px solid;
	box-shadow: 5px 5px 10px var(--lowlights);
	width: 400px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2em;
    margin-bottom: 2em;
    
}

.settingsForm h2 {
    margin-bottom: 2rem;
}

settingsForm {
    background-color: var(--background);
	padding: 40px 30px;
	border-radius: 10px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
	width: 400px;
}

.settingsForm label {
    display: inline-block;
    text-align: right;
	margin-bottom: 5px;
	font-weight: bold;
	width: 150px;
	padding-right: 3px;
}

.settingsForm input, .settingsForm select {
	width: 230px;
	box-sizing: border-box;	
	padding: 10px;
    margin-bottom: 15px;
    font-size: 14px;
    border: 1px solid var(--lowlights);
    border-radius: 5px;
}

div.oneLineContainer {
	display: flex;
	align-items: center;
}


/* toggle button */
.toggleCheckbox {
	display: none;
}

#toggleLabel {
	margin: 20px;
	width: 35px;
	height: 20px;
	background-color: #ccc;
	border-radius: 25px;
	position: relative;
	transition: background-color 0.5s ease;
}

/* circle in toggle button */
#toggleLabel::after {
	content: '';
	width: 15px;
	height: 15px;
	background-color: white;
	border-radius: 50%;
	position: absolute;
	top: 2.5px;
	left: 2.5px;
	transition: transform 0.5s ease;
}

#toggleCheckbox:checked + .toggleLabel {
	background-color: var(--highlights);
}

#toggleCheckbox:checked + .toggleLabel::after {
      transform: translateX(17px);
    }

.saveSettingsBTNContainer {
    width: 100%;
    display: flex;
    align-content: center;
}

.saveSettingsBTN {
   	background: linear-gradient(135deg, var(--lowlights), var(--highlights));
    color: Rgb(0, 0, 0, 60%);
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    border-style: outset;
    border-width: 1px;
    box-shadow: 3px 3px 10px var(--lowlights);
}

.saveSettingsBTN:hover {
    box-shadow: none;
    color: Rgb(255, 255, 255, 70%);
}

/* Stop Settings Styling */


/* Start Library View Widget Styling */
div.libViewWidget {
    background-color: var(--background);
    border: var(--highlights) 2px solid;
    box-shadow: 5px 5px 10px var(--lowlights);
    margin-top: 2em;
    margin-bottom: 1em;
    margin-left: 2.5%;
    width: 80%;
    height: fit-content;    
    button {
		width: 90px;
    background-color: var(--background);
		border: 1px solid var(--highlights);
		border-bottom: 0px;
		padding: 10px;
		font-size: 12px;
		border-radius: 0px;
		transition: all 0.3s ease;
		margin: 0px;
	}
	button:hover {
		box-shadow: 1px 1px 1px;
	}
}

.searchText {
    display: flex;
    justify-content: end;
    height: 100%;
    input{
        height: 80%;
        margin-top: auto;
        margin-bottom: auto;
    }
    svg {
        margin-right: 1em;
        margin-left: 1em;
        height: 100%;
        fill: var(--highlights);
    }
    svg:hover {
        fill: var(--lowlights);
    }
}

table.libviewwidget {
	width: 100%;
	.tdBookImage {
        width: 4rem;
        margin: 1em 2em;
    };
    .tdImage {
        width: 50px;
    }
	border-spacing: 0px;
	border-style: solid;
	border-width: thin;
	td {
		height: 30px;
		padding: 1px 5px;
		border-top-style: solid;
		border-bottom-style: solid;
		border-width: thin;
		border-color: var(--highlights);
		font-size: 0.75em;
	}
}


.tabs {
	overflow: hidden;
	border: 1px solid var(--highlights);
    background-color: var(--background);
    height: 35px;
}

.tabs button {
	background-color: inherit;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	transition: 0.3s;
	font-size: 17px;
}

.tabs button:hover {
  background-color: var(--lowlights);
}

.tabs button.active {
  background-color: var(--highlights);
  color: white;
}

.tabContent {
	padding: 6px 12px;
	border: 1px solid var(--highlights);
	border-top: none;
}

/* Stop Library View Widget Styling */


/* Start searchUsers Styling */

.hidden {
    display: none;
}

.userBookSearch {
    background-color: var(--background);
	padding: 40px 30px;
	border-radius: 10px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
	width: 400px;
}

div.userBookResultsContainer {
	width: 100%;
	box-sizing: border-box;			/* ensures padding doesn't affect element size (to fix "select" size as it comes with built-in padding) */
	padding: 10px;
    margin-bottom: 15px;
    font-size: 14px;
    border-radius: 5px;
}

#text1 {
	background-image:url('images/magnifyingGlass.png');
	position: center;
	padding-left: 35px;
	background-size: 30px;
	background-repeat: no-repeat;
	width: 70%;
	margin: 7px;
}

div.buttonContainer {
	display: flex;
	flex-grow: 1;	
	justify-content: center;
	button {
        margin: 10px;
    };
}

.floating-search {
    position: fixed;
    top: 40%;
    left: 40%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background: var(--solidBackground);
    box-shadow: 0 5px 5px var(--lowlights);
    padding: 1em;
    border: 2px solid var(--highlights);
    min-width: 300px;
}
.floating-search a {
    width: 15px;
    height: 15px;
}


/* Stop searchUsers Styling */


/* Start addBookcase Styling */
.addBookcase {
    background-color: var(--background);
	padding: 40px 30px;
	border-radius: 10px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
	width: 400px;
    padding: 20px;
    h2 {
        font-size: 2em;
        margin-bottom: 20px;
    }
    label {
        font-size: 1.5em;
    }
    input {
        margin-bottom: 15px;
    }
    a {
        text-decoration: none;
        font-size: larger;
    }
}

div.buttonContainer .addBookcaseButton {
    background: linear-gradient(135deg, var(--lowlights), var(--highlights));
    color: Rgb(0, 0, 0, 60%);
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 8px 0;
    border-style: outset;
    border-width: 1px;
    box-shadow: 3px 3px 10px var(--lowlights);
}

div.buttonContainer .addBookcaseButton:hover {
    box-shadow: none;
    color: Rgb(255, 255, 255, 70%);
}

/* Stop addBookcase Styling */

/* Start addBookshelf Styling */
div.twoButton .addBookshelf {
    background-color: var(--background);
	padding: 40px 30px;
	border-radius: 10px;
    box-shadow: 5px 5px 10px var(--lowlights);
	width: 400px;
}

div.twoButton .addBookshelfButton {
    background: linear-gradient(135deg, var(--lowlights), var(--highlights));
    color: Rgb(0, 0, 0, 60%);
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 8px 0;
    border-style: outset;
    border-width: 1px;
    box-shadow: 3px 3px 10px var(--lowlights);
}

div.twoButton .addBookshelfButton:hover {
    box-shadow: none;
    color: Rgb(255, 255, 255, 70%);
}

#addBookshelf {
    label {
        display: inline-block;
        text-align: right;
        margin-bottom: 5px;
        font-weight: bold;
        width: 150px;
        padding-right: 3px;
        font-size: 1.2em;
    }
    input {
        width: 250px;
        box-sizing: border-box;	
        padding: 10px;
        margin-bottom: 15px;
        margin-left: 0px;
        font-size: 14px;
        border: 1px solid var(--lowlights);
        border-radius: 5px;
    }

    select {
        width: 250px;
        box-sizing: border-box;	
        padding: 10px;
        margin-bottom: 15px;
        font-size: 14px;
        border: 1px solid var(--lowlights);
        border-radius: 5px;
    }
    width: 470px;
}

/* Stop addBookshelf Styling */

/* Start addBook Styling */

div.buttonContainer .searchBookButton {
    background: linear-gradient(135deg, var(--lowlights), var(--highlights));
    color: Rgb(0, 0, 0, 60%);
    border: none;
    padding: 6px 20px;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 8px 0;
    border-style: outset;
    border-width: 1px;
    box-shadow: 3px 3px 10px var(--lowlights);
}

div.buttonContainer .searchBookButton:hover {
    box-shadow: none;
    color: Rgb(255, 255, 255, 70%);
}

/* Stop addBook Styling */


/* Start Bookcase Info Styling */
.bookcaseNameContainer{
    display: flex;
    svg {
        fill: var(--highlights);
        max-width: 32px;
        max-height: 32px;
    }
}

div.twoButton {
	display: flex;
	justify-content: center;
	margin-top: 20px;
	button {
        margin: 20px;
        background-color: var(--highlights);
        color: var(--lowlights); 
        border-radius: 10px; 
    };
    button:hover {
        box-shadow: 5px 5px 10px var(--lowlights);
        color: var(--lowlights);
    }
}

/* Stop Bookcase Info Styling */




/* Start Bookshelf Info Styling */
.bookshelfNameContainer{
    display: flex;
    svg {
        fill: var(--highlights);
        max-width: 32px;
        max-height: 32px;
    }
}
/* Stop Bookshelf Info Styling */

/* Start Book Info Styling */
.flexContainer {
    width: 85%;
    margin-top: 3em;
    display: flex;
    gap: .5em;
}

.bookAttribsCol {
    flex: 2;
    display: flex;
    flex-direction: column;
    img {
        width: 60%;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: .5em;
        border: 2px solid var(--highlights);
        box-shadow: 5px 5px 10px var(--lowlights);
    }
}

.updateReadingStatus {
    display: none;
    text-align: center;

    label {
        display: inline-block;
        text-align: right;
        margin-bottom: 10px;
        font-weight: bold;
        width: 70px;
        padding-right: 3px;
    }

    input {
        width: 230px;
        height: 30px;
        box-sizing: border-box;	
        padding: 10px;
        margin-bottom: 15px;
        font-size: 14px;
        border: 1px solid var(--lowlights);
        border-radius: 5px;
    }
    
}

.bookInfoCol {
    flex: 8;
}

meter {
    height: 2em;
    width: 80%;
}

.flexContainer button.disabledButton {
    background-color: grey;
}

.flexContainer button {
    background: linear-gradient(135deg, var(--lowlights), var(--highlights));
    color: Rgb(0, 0, 0, 60%);
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 8px 0;
    border-style: outset;
    border-width: 1px;
    box-shadow: 3px 3px 10px var(--lowlights);
}

.flexContainer button:hover {
    box-shadow: none;
    color: Rgb(255, 255, 255, 70%);
}

.progressContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    input {
        margin: .25em;
    }
}

.bookAttribsContainer {
    flex-direction: column;
    align-items: center;
    input {
        margin: .25em;
    }
}

.isOwnedContainer,
.isReadingContainer,
.isFinishedContainer,
.isWishListContainer,
.isToBeReadContainer,
.isFavoritesContainer {
    display: flex;
    margin: .25em;
    input[type="checkbox"] {
        display: none;
    }

    .custom-checkbox {
            display: inline-block;
            width: 15px;
            height: 15px;
            border: 2px solid var(--lowlights);
            border-radius: 50px;
            position: relative;
            cursor: pointer;
            margin-right: 5px;
            margin-left: 70px;
        }
    input[type="checkbox"]:checked + .custom-checkbox::after {
        content: "✔";
        color: var(--highlights);
        font-size: 16px;
        position: absolute;
        
        transform: translate(-50%, -50);
        background-color: var(--lowlights);
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50px;
        border-color: none;
    }
}

.locationContainer {
    margin: 1em;
    h3 {
        margin-left: 3em;
        text-decoration: underline;
    }
    p {
        margin: .25em;
        text-align: center;
    }
}

/* Stop Book Info Styling */



/* Start Friends Styling */

.friendsContainer button.disabledButton {
    background-color: grey;
}

.friendsContainer button {
    background: linear-gradient(135deg, var(--lowlights), var(--highlights));
    color: Rgb(0, 0, 0, 60%);
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 8px 16px;
    border-style: outset;
    border-width: 1px;
    box-shadow: 3px 3px 10px var(--lowlights);
}


.friendsContainer button:hover {
    box-shadow: none;
    color: Rgb(255, 255, 255, 70%);
}

.searchUsersPopup {
    display: none;
    text-align: center;
    input {
        width: 50%;
        margin-left: 10px;
        padding: 5px;
        font-size: 14px;
        border: 1px solid var(--lowlights);
        border-radius: 5px;
    }
    label {
        width: 10%;
    }

    button {
        background: linear-gradient(135deg, var(--lowlights), var(--highlights));
        color: Rgb(0, 0, 0, 60%);
        border: none;
        padding: 6px 24px;
        font-size: 16px;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.3s ease;
        margin: 8px 0;
        border-style: outset;
        border-width: 1px;
        box-shadow: 3px 3px 10px var(--lowlights);
    }

button:hover {
    box-shadow: none;
    color: Rgb(255, 255, 255, 70%);
}

a {text-decoration: none;}

h2 {margin-bottom: 20px;};

}

.friendsTable {
    margin: 2em;
    margin-top: 0.5em;
    margin-bottom: 3em;
    width: 80%;
    table-layout: fixed;
    border-spacing: 0px 5px;
    td {
        background-color: rgb(255, 255, 255, 35%);
        text-align: center;
    }
}

/* Stop Friends Styling */







/* Start sorting/Filtering Css */


.sort-widget {
    border: 2px solid var(--highlights);
    padding: 15px;
    border-radius: 8px;
    max-width: 300px;
}

.sort-widget hr {
    border: none;
    height: 2px;
    background-color: var(--highlights);
}

.sort-widget h3 {
        margin-top: 0.5em;
        margin-bottom: .5em;
        text-align: center;
}

.sort-option {
    margin-bottom: 8px;
}

.sort-option label {
    cursor: pointer;
}

.sort-option input[type="radio"] {
    margin-right: 8px;
}

.sort-widget input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    border: 2px solid var(--highlights);
    padding: 6px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    margin-right: 8px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.sort-widget input[type="radio"]:checked::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    top: 2px;
    left: 2px;
    background-color: var(--highlights);
    border-radius: 50%;
} 

.filter-widget {
    border: 1px solid var(--highlights);
    padding: 20px;
    border-radius: 10px;
    max-width: 350px;

}

.filter-widget h3 {
    margin-top: 0.5em;
    margin-bottom: .5em;
    text-align: center;
}

.filter-group {
    margin-bottom: 15px;
}

.filter-widget label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.filter-widget select {
    width: 100%;
    padding: 8px;
    border-radius: 5px;
    border: 1px solid var(--highlights);
}

.filter-widget hr {
    margin-bottom: 1em;
    border: none;
    height: 2px;
    background-color: var(--highlights);
}

div.filter-widget button{
    width: 100px;
    background-color: var(--highlights);
    color: black;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
}

div.filter-widget button:hover{
    background-color: var(--highlights);
    box-shadow: 5px 5px 10px var(--lowlights);
}

/* Stop sorting/Filtering Css */