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

* {
    transition: background-color 0.1s ease-in-out;
}

:hover {
    transition: background-color 0.1s ease-in-out;
}

html, body {
    min-height: 100%;
    overflow: auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 17px;
    background-color: #000;
    color: #FFF;
    accent-color: #7171FF;
}

body {
    min-height: 100vh;
    padding-top: 50px;
    display: flex;
    flex-direction: column;
}

body.containsBottomBar {
    padding-bottom: 50px;
}

.PFP {
    border-radius: 50%;
    border: 1px solid #FFF;
    aspect-ratio: 1/1;
}

.text30 {
    height: 30px;
}

.round {
    border-radius: 10px;
}

.detailsForm {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
    width: 300px;
}

.fullWidth {
    width: 100%;
}

label {
    height: 30px;
    width: 100%;
    align-content: center;
}

input {
    height: 30px;
    width: 100%;
    color: #A9A9C7;
    background-color: #121212;
    border: 1px solid #FFF;
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 17px;
}

select {
    height: 30px;
    width: 50%;
    color: #A9A9C7;
    background-color: #12121C;
    border: 1px solid #242438;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 17px;
}

textarea {
    width: 100%;
    color: #A9A9C7;
    background-color: #121212;
    border: 1px solid #FFF;
    border-radius: 10px;
    padding: 10px;
    font-size: 17px;
    resize: vertical;
}

button {
    height: 30px;
    width: 150px;
    color: #FFF;
    background-color: #121212;
    border: 1px solid #FFF;
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 17px;
}

button:hover {
    background-color: #242438;
}

button:active {
    background-color: #000;
}

button:disabled {
    background: repeating-linear-gradient(
    45deg,
    #121212,
    #121212 20px,
    #242424 20px,
    #242424 40px
    );
    cursor: not-allowed;
    color: #A9A9A9;
}

::placeholder {
    color: #555564;
}

a {
    color: #7171FF;
}

h2 {
    height: 60px;
    font-size: 28px;
    align-content: center;
}

.spaceAbove10 {
    margin-top: 10px;
}

.spaceAbove30 {
    margin-top: 30px;
}

.checkbox {
    margin: 10px;
    width: 20px;
    height: 20px;
}

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

span {
    align-content: center;
}

#read-messagesList {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;


    .read-messagesMessage {
        margin-top: 10px;
        width: 100%;
        background-color: #12121C;
        display: grid;
        grid-template-columns: 50px 1fr 1fr;
        grid-template-rows: 50px auto;


        .read-messagesSenderInfoContainer:hover {
            background-color: #242438;
        }

        .read-messagesSenderInfoContainer {
            width: 100%;
            grid-column: span 2;
            display: grid;
            grid-template-columns: 50px auto;
            border: 1px solid #242438;


            .read-messagesPFP {
                justify-self: center;
                align-self: center;
            }

            .read-messagesUsername {
                width: 100%;
                padding: 10px;
                color: #FFF;
                align-self: center;
            }
        }

        .read-messagesDate {
            width: 100%;
            height: 100%;
            border: 1px solid #242438;
            padding: 10px;
            color: #FFF;
            align-self: center;
            text-align: right;
        }

        .read-messagesRead {
            width: 100%;
            height: 100%;
            border: 1px solid #242438;
            border-radius: 0px;
            writing-mode: sideways-rl;
            text-orientation: mixed;
            font-size: 17px;
            color: #FFF;
            background-color: #00000000;
        }

        .read-messagesRead:hover {
            background-color: #242438;
        }

        .read-messagesContent {
            grid-column: span 2;
            padding: 30px;
            border: 1px solid #242438;
            background-color: #000;
            overflow: hidden;
            max-height: 84px;
            transition: max-height 0.25s ease-in-out;
            
        }
        .read-messagesContent:focus {
            overflow: auto;
            max-height: 600px;
        }
    }


}


#topBar {
    position: fixed;
    top: 0px;
    width: 100%;
    height: 50px;
    z-index: 100;


    .topBarList {
        list-style-type: none;
        width: 100%;
        height: 50px;
        border: 1px solid #242438;
        background-color: #12121C;


        .topBarItem.left {
            float: left;
        }
        .topBarItem.right {
            float: right;
        }

        .topBarItem {
            height: 100%;
            align-content: center;

            #userElement {
                width: 240px;
            }

            .topBarLink {
                display: flex;
                flex-direction: row;
                color: #FFF;
                align-items: center;
                height: 100%;
                background-color: #12121C;

            }

            .topBarLink.userMenuItem {
                display: none;
            }

            .topBarLink.bordered {
                border: 1px solid #242438;
            }

            .topBarLink:hover {
                background-color: #242438;
            }

            .topBarLink:active {
                background-color: #000;
            }

            .topBarLink * {
                pointer-events: none;
            }

            .topBarText {
                padding-left: 10px;
                padding-right: 10px;
                text-align: center;
            }

            .topBarPFP {
                margin-left: 10px;
            }

            .topBarLogo {
                padding: 10px;
            }

            .topBarLogoText {
                font-family: "Cookie", cursive;
                font-weight: 400;
                font-style: normal;
                font-size: 42px;
                padding-left: 10px;
                padding-right: 10px;
            }

            .topBarButton {
                display: grid;
                grid-auto-flow: column;
                color: #FFF;
                font-size: 17px;
                align-items: center;
                margin-left: 10px;
                margin-right: 10px;
                width: 100px;
                height: 40px;
                border: 1px solid #FFF;
                background-color: #121212;
            }

            .topBarButton:hover {
                background-color: #242438;
            }

            .topBarButton:active {
                background-color: #000;
            }
        }



    }
}

.centerPanel {
    width: 700px;
    min-height: 100%;
    height: auto;
    background-color: #12121C;
    border: 1px solid #242438;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    flex-grow: 1;
}

#bottomBar {
    position: fixed;
    bottom: 0px;
    height: 50px;
    width: 100%;
    z-index: 100;
    display: grid;
    grid-template-columns: 2fr 700px 1fr 1fr;
    column-gap: 10px;
    background-color: #12121C;
    border: 1px solid #242438;
    padding-left: 10px;
    padding-right: 10px;

    .bottomBarArea {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;

        h1 {
            width: 100%;
            text-align: end;
        }

        button {
            width: 100%;
        }
    }
}

#searchResults {
    width: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;

    .searchResult {
        width: 240px;
        height: 50px;
        margin-top: 10px;
        display: flex;
        align-items: center;
        background-color: #121212;
        border: 1px solid #242438;
        color: #FFF;


        .searchPFP {
            margin-left: 10px;
        }

        .searchUsername {
            padding-left: 10px;
            padding-right: 10px;
        }
    }

    .searchResult:hover {
        background-color: #242438;
    }

    .searchResult:active {
        background-color: #000;
    }
}

#profilePanel {
    form {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    textarea {
        height: 300px;
        min-height: 90px;
    }

    #profileDeleteButton {
        background-color: #FF0000;
        color: #000;
    }

    #profileDeleteButton:hover {
        background-color: #FF8888;
    }

    #profileDeleteButton:active {
        background-color: #FF8888;
    }

    #profilePFPContainer {
        position: relative;

        #profileEditPFPButton {
            position: absolute;
            top: 0px;
            right: 0px;
            width: 30px;
            padding: 0px;
        }
    }


}

#userPanel {


    #userAbout {
        width: 100%;
        height: 300px;
        border: 1px solid #242438;
        border-radius: 10px;
        padding: 10px;
        overflow: auto;
    }
    
}

#send-messageForm {
    width: 700px;
    min-height: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
    padding: 30px;
    flex-grow: 1;

    #send-messageMessageContent {
        width: 100%;
        height: 100%;
        resize: none;
        background-color: #12121C;
        border: 1px solid #242438;
        border-radius: 0px;
        flex-grow: 1;
    }
}