:root {
    --green-hover: rgb(69, 194, 69);
    --green: rgb(0, 155, 0);
    --white: rgb(244, 239, 239);
    --black: rgb(23, 23, 23);
    --blue: #0d6efd;
    --blue-hover: #3f8cff;
    --light-grey: #d3d3d3;
    --ur-blue: #95ddec;
    --message-height: 74.16px;
}

html,
body {
    height: 100vh;
    width: 100%
}

body {
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    font-size: 14px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blue {
    color: rgb(69, 212, 241);
    text-align: center;
}

.loriblurb {
    padding: 3% 5%;
    border-style: solid;
    border-color: black;
    border-width: 2px;
    border-radius: 20px;
}

.middle {
    text-align: center;
}

.loribox {
    background-image: url(images/.loritest);
    width: 80%;
    height: auto;
    text-align: center;
}

/* dropdown */

.dropbtn {
    background-color: #04AA6D;
    color: white;
    padding: 16px;
    margin: 10px;
    font-size: 1.5vw;
    border: none;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: white;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

/* Modal stuff*/

.button-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 20px;
}

/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
    margin-bottom: 0;
    border-radius: 0;
}

.navbar a {
    color: white !important;
}

.navbar a:hover {
    color: rgb(139, 139, 139) !important;
}

/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {
    height: 450px
}

/* Set gray background color and 100% height */
.sidenav {
    padding-top: 20px;
    background-color: #f1f1f1;
    height: 100%;
}

h1 {
    font-size: 2.5em;
}

/* Set black background color, white text and some padding */
footer {
    position: sticky;
    top: auto;
    background-color: #555;
    color: white;
    padding: 15px;
}

/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
    .sidenav {
        height: auto;
        padding: 15px;
    }

    .row.content {
        height: auto;
    }
}

.sunlogo {
    background-image: url(/images/sunlogo.jpg);
    /* The image used */
    width: 100%;
    height: auto;
    /* You must set a specified height */
    background-position: center;
    /* Center the image */
    background-repeat: no-repeat;
    /* Do not repeat the image */
    background-size: cover;
    /* Resize the background image to cover the entire container */
    padding-top: 10%;
    padding-left: 10%;
    color: white;
}

.sun-image {
    background-image: url(/images/sunwide.png);
    /* The image used */
    width: 100%;
    /* You must set a specified height */
    background-position: center;
    /* Center the image */
    background-repeat: no-repeat;
    /* Do not repeat the image */
    background-size: cover;
    /* Resize the background image to cover the entire container */
    padding-top: 10%;
    padding-left: 10%;
    color: white;
}

.ocean-image {
    background-image: url(../images/sadgirlocean.jpg);
    /* The image used */
    height: 350px;
    /* You must set a specified height */
    background-position: center;
    /* Center the image */
    background-repeat: no-repeat;
    /* Do not repeat the image */
    background-size: cover;
    /* Resize the background image to cover the entire container */
    padding: 10% 0% 10% 50%;
    color: white;
    text-shadow: 2px 2px black;

}

.vertical-center {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

ul.demo {
    list-style-type: none;
    margin: 2%;
    padding: 2%;
}

.urblack {
    color: #f1f1f1;
}

.uralert {
    margin: 5% 3%;
    border-style: solid;
    border-color: var(--black);
    border-radius: 20px;
    padding: 2% 3%;
    background-color: white;
}

.ulbluebg {
    background-color: aliceblue;
    padding: 1% 2%;
    margin: 0%;
}

.videobg {
    text-align: center;
    margin: 0%;

}

.journal-submit-btn {
    position: fixed;
    margin: 10px;
    bottom: 0;
    right: 0;
    font-size: 22px !important;
    border: none;
    background-color: #0d6efd;
    color: white;
    padding: 8px 20px;
    border-radius: 7px;
    transition: 300ms;
    opacity: 100;
    z-index: 1;
}

.journal-submit-btn:hover {
    background-color: #0961e4;
}

.hide {
    opacity: 0;
    display: none;
}

/* Modal Container */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}

/* Modal Content */
.modal-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 300px;
    text-align: center;
}

/* Buttons */
.modal-content button {
    margin: 5px;
    padding: 10px 20px;
    cursor: pointer;
}

.form-background {
    background-color: rgba(0, 0, 0, 0.086);
    box-shadow: 10px 8px 10px rgba(0, 0, 0, 0.1);
}

.textarea {
    transition: 200ms;
    animation: fadeInAnimation 300ms ease-in-out forwards;
}

@keyframes fadeInAnimation {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.hidden {
    display: none !important;
}

/* hiding navbar */
.navbar1 {
    background-color: #333;
    color: white;
    position: fixed;
    top: -50px;
    width: 100%;
    transition: top 0.3s;
}

.navbar1 a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
}

.content1 {
    padding-top: 50px;
    /* Adjust according to navbar height */
}

.section1 {
    height: 100vh;
    padding: 20px;
}

.section1:nth-child(even) {
    background-color: #f2f2f2;
}

.urblack {
    background-color: black;
}

.buy-book img {
    border: 4px solid black;
    border-radius: 10px;
    width: 95%;
    margin-bottom: 5px;
    transition: 300ms;
}

.buy-book img:hover {
    border: 4px solid #0dcaf0;
    width: 100%;
    cursor: pointer;
}

.close-button {
    background: none;
    border: none;
}

.close-button:hover {
    cursor: pointer;
}

#journal-form {
    padding: 0px 5%;
}

#journal-form>* {
    margin: 25px;
}

.user-pages-nav {
    width: 100%;
    height: 100%;
    margin-bottom: 70px !important;
    display: flex;

}

.user-pages-nav div {
    color: black;
    text-decoration: none;
    padding: 20px;
    font-size: 15px;
    border-right: 2px solid grey;
    border-bottom: 2px solid grey;
    flex-grow: 1;
    display: flex;
    justify-content: center;
}

.user-pages-nav div a {
    color: black;
    text-decoration: none;
    transition: 200ms;
}

.user-pages-nav div a:hover {
    color: #519db7;
    text-decoration: none;
    transform: translateY(-5px);
}

.user-pages-nav :last-child {
    border-right: none;
}

.active {
    color: #519db7;
}

.navbar-toggler {}

.list-button {}

.reference-userdata {
    width: 100%;
    height: 150px;
    overflow-y: scroll;
    padding: 5px;
}

table {
    width: 100%;
}

/* Chat Box in profile */

.chat-box {
    width: 100%;
    height: 700px;
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px !important;
}

.message-wrapper {
    height: calc(100% - var(--message-height));
    overflow-y: scroll;
    padding: 10px;
}

.message-container {
    width: 100%;
    height: auto;
}

.message-container.user-message {
    display: flex;
    justify-content: end;
}

.message-container.admin-message {
    display: flex;
    justify-content: start;
}

.user-message div {
    width: auto;
    height: auto;
    max-width: 500px;
    background-color: var(--blue);
    color: var(--white);
    padding: 10px;
    border: 0px solid transparent;
    border-radius: 10px;
    text-align: start;
}

.user-time-stamp {
    text-align: end;
}

.admin-message div {
    width: auto;
    height: auto;
    max-width: 500px;
    background-color: var(--light-grey);
    color: var(--black);
    padding: 10px;
    border: 0px solid transparent;
    border-radius: 10px;
    text-align: start;
}

.admin-time-stamp {
    text-align: start;
}

.send-message {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: var(--message-height);
}

.send-message textarea {
    border-radius: 0px !important;
}

.send-message button {
    border-radius: 0px !important;
}

.message-input {
    height: var(--message-height) !important;
    font-size: 18px !important;
}

.question-mark {
    background: none;
    border: none;
    transition: 300ms;
}

.question-mark svg:hover {
    fill: var(--blue);
}