// Unapproved use and redistribution of this code and respective product is strictly prohibited.
// Copyright© 2018 Keanu Ashwell all rights are reserved to the author, creator, registered 
// authorised and licensed owners of this product and it's content

@import "partials/_partials.scss";

a,
a:hover,
a:active,
a:visited {

    color: $exchange-white;

    text-decoration: none;

    cursor: pointer;

}

body {

    overflow-x: hidden;
    overflow-y: visible;

    height: auto;
    width: auto;

    #grid-container {

        grid-template-columns: 1fr;
        grid-template-rows: 70px 1fr 100px; 

        #grid-content__loggedin {

            display: grid; 

            grid-column: auto;
            grid-row: 2;

            grid-template-columns: 1fr 0.75fr;
            grid-template-rows: 1fr;

            background-color: $exchange-white;

            overflow: hidden;

            #content-chat {

                display: grid;

                position: relative;

                top: 0px;

                grid-column: 1;
                grid-row: auto;

                grid-template-columns: 50px 10px 1fr;
                grid-template-rows: 1fr 100px 20px;

                box-shadow: 0px 0px 5px $exchange-black;

                margin: 10px 20px 10px 20px;

                transition: top 150ms ease-in-out 0s, box-shadow 200ms ease-in-out;

                overflow: hidden;

                #chat-messages {

                    display: block;

                    grid-column: 3;
                    grid-row: 1;

                    padding: 10px 10px 10px 10px;

                    overflow: hidden;

                    &:hover {

                        top: -2.5px;

    
                        overflow-x: hidden;
                        overflow-y: auto;
    
                        ::-webkit-scrollbar {
    
                            width: 7px;
    
                        }
    
                        ::-webkit-scrollbar-thumb {
    
                            background: #888; 
    
                        }
    
                        ::-webkit-scrollbar-thumb:hover {
    
                            background: #555; 
    
                        }
    
                    }

                }

                #chat-sidebar {

                    display: grid;

                    position: relative;

                    left: 0px;

                    grid-template-columns: 1fr;
                    grid-template-rows: repeat(3, 45px);

                    grid-column: 1;
                    grid-row-start: 1;
                    grid-row-end: 4;

                    background-color: #25cc3b;
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: 24px;

                    #sidebar-account {

                        grid-row: 1;

                        background: url('../../img/materialdesign/ic_account_balance_24px.svg');
                        background-repeat: no-repeat;
                        background-position: center;
                        background-size: 24px;

                        transition: background-color 300ms ease;

                    }

                    #sidebar-users {

                        grid-row: 2;

                        background: url('../../img/materialdesign/baseline-supervised_user_circle-24px.svg');
                        background-repeat: no-repeat;
                        background-position: center;
                        background-size: 24px;

                        transition: background-color 300ms ease;

                    }

                    // #sidebar-settings {
                        
                    //     grid-row: 3;

                    //     background: url('../../img/materialdesign/ic_settings_24px.svg');
                    //     background-repeat: no-repeat;
                    //     background-position: center;
                    //     background-size: 24px;

                    //     transition: background-color 300ms ease;

                    // }

                }

                #chat-messaging {

                    display: grid;

                    grid-column: 3;
                    grid-row: 2;

                    padding: 10px 10px 5px 10px;

                    #messaging-message {

                        display: block;

                        height: 100%;
                        width: 100%;

                        outline: none;

                        resize: none;

                        overflow: auto;

                        ::-webkit-scrollbar {
    
                            width: 7px;
    
                        }
    
                        ::-webkit-scrollbar-thumb {
    
                            background: #888; 
    
                        }
    
                        ::-webkit-scrollbar-thumb:hover {
    
                            background: #555; 
    
                        }

                    }

                }

                #chat-remaining {

                    display: grid;

                    grid-column: 3;
                    grid-row: 3;

                    color: #a5a5a5;

                    font-family: Helvetica, sans-serif;
                    font-weight: 100;
                    font-size: 0.75em;

                    padding: 0px 20px 5px 0px;

                }

                #account-container {

                    display: grid;

                    position: absolute;

                    top: 5px;
                    margin-left: 55px;

                    height: 500px;
                    width: 300px;

                    background-color: $exchange-white;
                    
                    opacity: 0.5;

                    box-shadow: 0px 0px 5px $exchange-black;

                }

                #chat-sidebar-slider {

                    display: grid;

                    position: relative;

                    left: 0px;

                    height: 100%;
                    width: 10px;

                    transition: width 1s ease;

                    background-color: rgba(255, 255, 255, 0.949);

                    overflow: hidden;

                    z-index: 1;
                    
                }

            }

            #content-news {

                display: grid;

                position: relative;

                top: 0px;

                grid-column: 2;
                grid-row: auto;

                grid-template-columns: 1fr;
                grid-template-rows: 50px 1fr;

                box-shadow: 0px 0px 5px $exchange-black;

                margin: 10px 20px 10px 20px;

                transition: top 150ms ease-in-out 0s, box-shadow 200ms ease-in-out;

                overflow: hidden;

                &:hover {

                    top: -2.5px;

                    box-shadow: 0px 0px 5px #20792c;

                    overflow-y: auto;
                    overflow-x: hidden;

                    ::-webkit-scrollbar {

                        width: 7px;

                    }

                    ::-webkit-scrollbar-thumb {

                        background: #888; 

                    }

                    ::-webkit-scrollbar-thumb:hover {

                        background: #555; 

                    }

                }

                #news-header {

                    display: grid;

                    grid-template-columns: 1fr 1fr;
                    grid-template-rows: 1fr;

                    grid-column: auto;
                    grid-row: 1;

                    border-bottom: 2px solid $exchange-black;

                    #news-heading {

                        grid-column: 1;
                        grid-row: auto;

                        padding: 0px 0px 0px 10px;

                        font-family: 'Montserrat', sans-serif;
                        font-weight: 600;

                    }

                    #news-search {

                        display: grid;

                        grid-column: 2;
                        grid-row: auto;

                        justify-self: center;

                        align-self: center;

                        height: 30px;
                        width: 175px;

                        font-family: 'Montserrat', sans-serif;
                        font-weight: 300;

                        border: none;
                        border-style: none;

                        border-radius: 10px;

                        padding-left: 5px;

                        ::-webkit-input-placeholder {

                            color: #808080;

                        }

                    }

                }

                #news-content {

                    display: grid;

                    overflow: hidden;

                    &:hover {

                        overflow-y: auto;
                        overflow-x: hidden;

                        ::-webkit-scrollbar {

                            width: 7px;
    
                        }
    
                        ::-webkit-scrollbar-thumb {
    
                            background: #888; 
    
                        }
    
                        ::-webkit-scrollbar-thumb:hover {
    
                            background: #555; 
    
                        }

                    }

                }

            }

        }

        #grid-content__unregistered {

            display: grid;

            grid-column: auto;
            grid-row: 2;

            grid-template-columns: 20px 1fr 1fr 1fr 20px;
            grid-template-rows: 50px 200px 100px 1fr 1fr 1fr;

            background: url('../../img/__unregistered-background.png');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center left;

            overflow: hidden;

            #content-information {

                display: grid;

                grid-column: 2;
                grid-row-start: 2;
                grid-row-end: 6;

                grid-template-columns: 1fr;
                grid-template-rows: 80px 1fr;

                background-color: #33333380;
                border-radius: 20px;

                padding: 0 5px 0 5px;

                filter: grayscale(30%) brightness(90%);

                overflow-x: hidden;
                overflow-y: auto;

                z-index: 2;

                #information-heading {

                    font-family: 'Lato', sans-serif;

                    text-decoration: underline;

                    overflow: hidden;

                }

                #information-text {

                    font-family: 'Lato', sans-serif;
                    font-weight: 500;

                    word-spacing: 0px;

                    line-height: 20px;

                }

            }

            #content-login-container {

                display: grid;

                grid-column: 3;
                grid-row-start: 2;
                grid-row-end: 6;

                justify-self: center;

                height: auto;
                width: 80%;

                background-color: $exchange-black;

                border: 2px solid $exchange-green;

                #login-form {

                    display: grid;

                    grid-template-columns: 1fr;
                    grid-template-rows: 100px 70px 35px 40px 35px 1fr 20px;

                    margin: 0;

                    overflow: hidden;

                    #login-heading {

                        grid-column: auto;
                        grid-row: 1;

                        font-family: 'Montserrat', sans-serif;
                        font-weight: 300;

                    }

                    #login-username {

                        grid-column: auto;
                        grid-row: 3;

                        background: none;

                        background-color: #353535;

                        height: 30px;
                        width: 50%;

                        font-family: 'Montserrat', sans-serif;

                        padding-left: 10px;

                        border-top: 0px;
                        border-right: 0px;
                        border-bottom: 1px solid $exchange-green;
                        border-left: 0px;

                        transition: border-bottom 500ms ease-in-out;

                        &::placeholder {

                            transition: color 250ms ease-out;

                        }

                        &:hover::placeholder,
                        &:focus::placeholder,
                        &:active::placeholder {

                            color: $exchange-white;

                        }

                        &:focus,
                        select:focus {

                            outline: none;

                            outline-offset: none;

                            border-bottom: 1px solid #00bb19;

                        }

                    }

                    #login-password {

                        grid-column: auto;
                        grid-row: 5;

                        background: none;

                        background-color: #353535;

                        height: 30px;
                        width: 50%;

                        font-family: 'Montserrat', sans-serif;

                        padding-left: 10px;

                        border-top: 0px;
                        border-right: 0px;
                        border-bottom: 1px solid $exchange-green;
                        border-left: 0px;

                        transition: border-bottom 250ms ease-in-out;

                        &::placeholder {

                            transition: color 250ms ease-out;

                        }

                        &:hover::placeholder,
                        &:focus::placeholder,
                        &:active::placeholder {

                            color: $exchange-white;

                        }

                        &:focus,
                        select:focus {

                            outline: none;

                            outline-offset: none;

                            border-bottom: 1px solid #00bb19;

                        }

                    }

                    #login-submit {

                        grid-column: auto;
                        grid-row: 6;

                        height: 60px;
                        width: 40%;

                        color: $exchange-white;

                        font-family: 'Montserrat', sans-serif;
                        font-size: 1.5em;
                        font-weight: 300;

                        background: none;
                        background-color: #FF0000;

                        border: none;

                        transition: background-color 500ms ease;

                        cursor: pointer;

                        &:hover {

                            background-color: #af0000;

                        }

                    }

                    #option-change {

                        grid-column: auto;
                        grid-row: 7;

                        font-family: 'Montserrat', sans-serif;
                        font-size: 0.8em;
                        font-weight: 100;

                        letter-spacing: 0.5px;

                        #login-option-change {

                            color: #0ff;

                            text-decoration: underline;

                            cursor: pointer;

                        }

                    }

                }

                #register-form {

                    display: none;

                    grid-template-columns: 1fr;
                    grid-template-rows: 100px 50px 35px 20px 35px 50px 35px 50px 1fr 20px;

                    margin: 0;

                    overflow: hidden;

                    #register-heading {

                        grid-column: auto;
                        grid-row: 1;

                        font-family: 'Montserrat', sans-serif;
                        font-weight: 300;

                    }

                    #register-username {

                        grid-column: auto;
                        grid-row: 3;

                        background: none;

                        background-color: #353535;

                        height: 30px;
                        width: 50%;

                        font-family: 'Montserrat', sans-serif;

                        padding-left: 10px;

                        border-top: 0px;
                        border-right: 0px;
                        border-bottom: 1px solid $exchange-green;
                        border-left: 0px;

                        transition: border-bottom 500ms ease-in-out;

                        &::placeholder {

                            transition: color 250ms ease-out;

                        }

                        &:hover::placeholder,
                        &:focus::placeholder,
                        &:active::placeholder {

                            color: $exchange-white;

                        }

                        &:focus,
                        select:focus {

                            outline: none;

                            outline-offset: none;

                            border-bottom: 1px solid #00bb19;

                        }

                    }

                    #register-email {

                        grid-column: auto;
                        grid-row: 5;

                        background: none;

                        background-color: #353535;

                        height: 30px;
                        width: 50%;

                        font-family: 'Montserrat', sans-serif;

                        padding-left: 10px;

                        border-top: 0px;
                        border-right: 0px;
                        border-bottom: 1px solid $exchange-green;
                        border-left: 0px;

                        transition: border-bottom 500ms ease-in-out;

                        &::placeholder {

                            transition: color 250ms ease-out;

                        }

                        &:hover::placeholder,
                        &:focus::placeholder,
                        &:active::placeholder {

                            color: $exchange-white;

                        }

                        &:focus,
                        select:focus {

                            outline: none;

                            outline-offset: none;

                            border-bottom: 1px solid #00bb19;

                        }

                    }

                    #register-password {

                        grid-column: auto;
                        grid-row: 7;

                        background: none;

                        background-color: #353535;

                        height: 30px;
                        width: 50%;

                        font-family: 'Montserrat', sans-serif;

                        padding-left: 10px;

                        border-top: 0px;
                        border-right: 0px;
                        border-bottom: 1px solid $exchange-green;
                        border-left: 0px;

                        transition: border-bottom 250ms ease-in-out;

                        &::placeholder {

                            transition: color 250ms ease-out;

                        }

                        &:hover::placeholder,
                        &:focus::placeholder,
                        &:active::placeholder {

                            color: $exchange-white;

                        }

                        &:focus,
                        select:focus {

                            outline: none;

                            outline-offset: none;

                            border-bottom: 1px solid #00bb19;

                        }

                    }

                    #register-gender {

                        grid-column: auto;
                        grid-row: 8;

                        height: 20px;
                        width: 25%;

                        color: #808080;

                        font-family: 'Montserrat', sans-serif;
                        font-weight: 100;

                        background: none;
                        background-color: #353535;

                        border-top: 0px;
                        border-right: 0px;
                        border-bottom: 1px solid $exchange-green;
                        border-left: 0px;

                        &:focus,
                        select:focus {

                            outline: none;

                            outline-offset: none;

                        }

                    }

                    #register-submit {

                        grid-column: auto;
                        grid-row: 9;

                        height: 60px;
                        width: 40%;

                        color: $exchange-white;

                        font-family: 'Montserrat', sans-serif;
                        font-size: 1.5em;
                        font-weight: 300;

                        background: none;
                        background-color: #FF0000;

                        border: none;

                        transition: background-color 500ms ease;

                        cursor: pointer;

                        &:hover {

                            background-color: #af0000;

                        }

                    }

                    #option-change {

                        grid-column: auto;
                        grid-row: 11;

                        font-family: 'Montserrat', sans-serif;
                        font-size: 0.8em;
                        font-weight: 100;

                        letter-spacing: 0.5px;

                        #register-option-change {

                            color: #0ff;

                            text-decoration: underline;

                            cursor: pointer;

                        }

                    }

                }

            }

        }

    }

}

.sidebar,
div {

    &.sidebar-element {

        display: grid;

        position: relative;

        top: 0px;
        left: 0px;

        grid-column: auto;

        cursor: pointer;

        &:hover {

            background-color: #2fceff !important;

        }

        &:active {

            background-color: #0bb700 !important;

        }

    }

}

.message,
div {

    &.message-container__self {

        display: grid;

        position: relative;

        margin-left: 10%;

        grid-template-columns: 150px 1fr 50px;
        grid-template-rows: 25px 1fr;

        justify-self: end;

        align-self: center;

        background-color: $exchange-green;

        height: auto;
        width: 90%;

        margin-top: 10px;

    }

    &.message-container__user {

        display: grid;

        grid-template-columns: 150px 1fr 125px;
        grid-template-rows: 25px 1fr;

        justify-self: start;

        align-self: start;

        background-color: #e6e6e6;

        height: auto;
        width: 90%;

        margin-top: 10px;

    }

    &.message-delete__self {

        position: relative;

        top: -5%;
        right: -6.5%;

        height: 15px;
        width: 15px;

        background-color: black;

        cursor: pointer;

    }

    &.message-delete__user {

        position: relative;

        top: -5%;
        left: 91%;

        height: 15px;
        width: 15px;

        background-color: black;

        cursor: pointer;

    }

    &.message-user {

        display: grid;

        grid-column: 1;
        grid-row: 1;

        justify-self: start;

        align-self: center;

        font-family: 'Lato', sans-serif;
        font-weight: 600;
        font-size: 0.8em;

        padding: 2.5px 0px 2.5px 5px;

    }

    &.message-date {

        display: grid;

        grid-column-start: 1;
        grid-column-end: 4;
        grid-row: 1;

        justify-self: end;

        align-self: start;

        font-family: 'Lato', sans-serif;
        font-weight: 300;
        font-size: 0.8em;

        padding: 2.5px 10px 0px 0px;

    }

    &.message-contents {

        display: grid;

        grid-column-start: 1;
        grid-column-end: 4;
        grid-row: 2;

        justify-self: start;

        align-self: center;

        color: $exchange-black;

        font-family: Arial, Helvetica, sans-serif;
        font-weight: 300;
        font-size: 0.8em;

        padding: 0px 5px 2.5px 5px;

    }

}

.news,
div {

    &.news-content-container {

        display: grid;

        position: relative;

        grid-template-columns: 24px 150px 1fr;
        grid-template-rows: 24px 20px 1fr; 

        height: auto;
        width: 100%;

        padding-top: 10px;

    }

    &.news-profile-picture {

        display: grid;

        position: relative;

        grid-column: 1;
        grid-row: 1;

        height: 100%;
        width: 100%;

        background-image: url("../../img/materialdesign/ic_account_circle_24px.svg");
        background-size: contain;
        background-repeat: no-repeat;

        margin-left: 5px;

        cursor: pointer;

    }

    &.news-author {

        display: grid;

        position: relative;

        grid-column: 2;
        grid-row: 1;

        color: #a5a5a5;

        font-family: 'Lato', sans-serif;
        font-weight: 300;
        font-size: 0.85em;

        padding: 2.5px 0px 0px 10px;

        cursor: pointer;

        &:hover {

            text-decoration: underline;

        }

    }

    &.news-post-date {

        display: grid;

        position: relative;

        grid-column-start: 1;
        grid-column-end: 3;
        grid-row: 2;

        color: #a5a5a5;

        font-family: 'Lato', sans-serif;
        font-weight: 300;
        font-size: 0.70em;

        padding-left: 5px;

        cursor: pointer;

        &:hover {

            text-decoration: underline;

        }

    }

    &.news-post-content {

        display: grid;

        position: relative;

        grid-column-start: 1;
        grid-column-end: 4;
        grid-row: 3;

        font-family: 'Lato', sans-serif;
        font-weight: 300;
        font-size: 0.80em;

        text-align: left;

        padding: 0px 5px 0px 5px;

    }

}

table,
.table {

    &.users-table {

        grid-column: auto;
        grid-row: auto;

        width: 100%;

        padding: 5px 0px 0px 0px;

        a {

            p {

            color: #000000;

            }

        }

        th, td {

            width: auto;

            color: $exchange-black;

            font-family: 'Lato', sans-serif;
            font-size: 0.83em;
            font-weight: 300;

            text-align: left;

            padding: 0px 0px 0px 5px;

            &:hover {

                &.underline {

                    text-decoration: underline;

                    cursor: pointer;
    
                }

            }

        }
        
        tr {

        }

        &.profile-display {

            display: grid;

            position: relative;

            grid-template-columns: 30px 1fr;
            grid-template-rows: 30px 30px 1fr;

            top: 0px;
            left: 5px;

            height: 110px;
            width: 300px;

            background-color: transparent;

            border-bottom: 1px solid $exchange-black;

            animation-name: ProfileCardFadeIn;
            animation-iteration-count: 1;
            animation-timing-function: linear;
            animation-duration: 1s;

            .profile-image {

                grid-column: 1;
                grid-row: 1;

                justify-self: center;
                align-self: center;

                height: 24px;
                width: 24px;

                overflow: hidden;

            }

            .profile-name {

                grid-column: 2;
                grid-row: 1;

                justify-self: center;

                align-self: center;

                font-family: 'Lato', sans-serif;
                font-weight: 600;
                font-size: 0.85em;

                padding: 3px 0px 0px 10px;

                &:hover {

                    text-decoration: underline;

                }

            }

            .profile-occupation {

                grid-column-start: 1;
                grid-column-end: 3;
                grid-row: 2;

                justify-self: start;

                align-self: center;

                font-family: 'Lato', sans-serif;
                font-weight: 300;
                font-size: 0.85em;

                padding: 0px 0px 0px 5px;

            }

            .action-container {

                display: grid;

                grid-template-columns: 35px 35px 35px 1fr;
                grid-template-rows: 1fr;

                grid-column-start: 1;
                grid-column-end: 3;
                grid-row: 3;

                overflow: hidden;

            }

            .action-wrapper {

                position: relative;

                grid-column: auto;
                grid-row: auto;

                justify-self: center;

                align-self: center;

                top: -10px;

                height: 100%;
                width: 100%;

                max-height: 25px;
                max-width: 25px;

                border: 2px solid $exchange-black;

                border-radius: 50%;

                padding: 0px 0px 0px 0px;

                cursor: pointer;

                &:hover {

                    background-color: #f8f8f8;

                }

            }

            .add-user {

                position: relative;

                top: -3.5px;
                right: 0px;

            }

            .remove-user {

                position: relative;

                top: -3.5px;
                right: 0px;

            }

            .block-user {

                position: relative;

                top: -3.5px;
                right: 0px;

            }

        }

    }

}

@supports(display: grid) {

    @media only screen and (max-width: 1375px) {

        body {

            #grid-container {

                #grid-content__loggedin {

                    display: grid;

                    grid-column: auto;
                    grid-row: 2;

                    grid-template-columns: 1fr 0.75fr;
                    grid-template-rows: 1fr;

                    background-color: $exchange-white;

                    overflow: hidden;

                    #content-chat {

                        display: grid;
        
                        position: relative;
        
                        top: 0px;
        
                        grid-column: 1;
                        grid-row: auto;
        
                        grid-template-columns: 50px 10px 1fr;
                        grid-template-rows: 1fr 100px 15px;
        
                        box-shadow: 0px 0px 5px $exchange-black;
        
                        margin: 20px 20px 10px 20px;
        
                        transition: top 150ms ease-in-out 0s, box-shadow 200ms ease-in-out;
        
                        overflow: hidden;
        
                        &:hover {
        
                            top: -2.5px;
        
                            box-shadow: 0px 0px 5px #20792c;

                            overflow: hidden;

                            ::-webkit-scrollbar {
    
                                width: 7px;
        
                            }
        
                            ::-webkit-scrollbar-thumb {
        
                                background: #888; 
        
                            }
        
                            ::-webkit-scrollbar-thumb:hover {
        
                                background: #555; 
        
                            }
        
                        }
        
                    }

                    #content-news {

                        display: grid;

                        grid-column: 2;
                        grid-row: auto;

                        grid-template-columns: 1fr;
                        grid-template-rows: 50px 1fr;

                        box-shadow: 1px 1px 5px $exchange-black;

                        margin: 20px 20px 10px 20px;

                        overflow: hidden;

                        &:hover {

                            overflow-y: auto;
                            overflow-x: hidden;

                            ::-webkit-scrollbar {
    
                                width: 7px;
        
                            }
        
                            ::-webkit-scrollbar-thumb {
        
                                background: #888; 
        
                            }
        
                            ::-webkit-scrollbar-thumb:hover {
        
                                background: #555; 
        
                            }
    
                        }

                    }

                }

                #grid-content__unregistered {

                    display: grid;

                    grid-column: auto;
                    grid-row: 2;

                    grid-template-columns: 20px 1fr 1fr 20px;
                    grid-template-rows: 50px 200px 100px 1fr 1fr 1fr;

                    background: url('../../img/__unregistered-background.png');
                    background-size: cover;
                    background-repeat: no-repeat;
                    background-position: center left;
                    overflow: hidden;

                    #content-information {

                        display: grid;

                        grid-column: 2;
                        grid-row-start: 2;
                        grid-row-end: 6;

                        grid-template-columns: 1fr;
                        grid-template-rows: 80px 1fr;

                        background-color: #33333380;
                        border-radius: 20px;

                        padding: 0 5px 0 5px;

                        filter: grayscale(30%) brightness(90%);

                        overflow-x: hidden;
                        overflow-y: auto;

                        z-index: 2;

                        #information-heading {

                            font-family: 'Lato', sans-serif;
                            font-size: 2.5em;

                            text-decoration: underline;

                            overflow: hidden;

                        }

                        #information-text {

                            font-family: 'Lato', sans-serif;
                            font-weight: 500;

                            word-spacing: 0px;

                            line-height: 17px;

                        }

                    }

                    #content-login-container {

                        display: grid;

                        grid-column: 3;
                        grid-row-start: 2;
                        grid-row-end: 6;

                        justify-self: center;

                        height: auto;
                        width: 80%;

                        background-color: $exchange-black;

                        border: 2px solid $exchange-green;

                    }

                }

            }

        }

    }

}

@keyframes ProfileCardFadeIn {

    from {

        opacity: 0;

    } 

    to {

        opacity: 1;

    }

}