/*--Initial------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#dahsboard-screen{
    justify-content:flex-start;
    align-items:flex-start;
    display:flex;
}

/*--Dashboard Account--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.dashboard-account-display{
    background-color:var(--background-white);
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-2);
    position:relative;
    height:30rem;
    width:22rem;
    margin-top:1rem;
    margin-left:1rem;
    margin-right:1rem;
    margin-bottom:3rem;
}
.dashboard-account-image{
    background-image:url("../assets/icons/default user.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;

    background-color:rgb(217, 220, 225);
    border:1px solid var(--border-gray-1);
    margin-left:1rem;
    margin-top:1rem;
    aspect-ratio:1;
    width:20rem;
}
.dashboard-account-name{
    color:var(--dark-blue);
    margin-left:16%;
    margin-top:1rem;
    font-size:1.5rem;
    height:2rem;
    width:68%;

    justify-content:center;
    align-items:center;
    font-weight:bold;
    display:flex;
}
.dashboard-account-email{
    color:var(--dark-blue);
    font-size:1.2rem;
    height:2rem;
    width:100%;

    justify-content:center;
    align-items:center;
    font-weight:bold;
    display:flex;
}
.dashboard-account-desc{
    width:calc(100% - 2rem);
    color:var(--dark-blue);
    text-align:center;
    font-size:1rem;
    padding:1rem;
}
.dashboard-account-share{
    background-image:url("../assets/icons/share.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;
    position:absolute;
    user-select:none;
    cursor:pointer;

    transition:ease-in-out 0.1s;
    aspect-ratio:1;
    width:2rem;
    right:1rem;
    top:22rem;
}
.dashboard-account-share:hover{
    transform:scale(1.1);
}
.dashboard-account-share:active{
    transform:scale(1);
}

/*--Dashboard Right Side-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.dashboard-right-side{
    width:calc(100% - 26rem);
    height:90%;
    left:25rem;
    margin-top:1rem;
}
.dashboard-title{
    justify-content:flex-start;
    align-items:center;
    font-weight:bold;
    display:flex;

    color:var(--dark-blue);
    font-size:1.75rem;
    width:100%;
}
.dashboard-holder{
    color:var(--gray-1);
    margin-bottom:2rem;
    font-size:1.25rem;
    margin-top:1rem;
    min-height:5rem;
    width:100%;

    justify-content:flex-start;
    align-items:flex-start;
    flex-wrap:wrap;
    display:flex;
}

.dashboatd-event{
    background-color:var(--background-white);
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-2);
    margin-bottom:1rem;
    margin-right:1rem;
    user-select:none;
    cursor:pointer;
    height:6rem;
    width:20rem;
    transition:ease-in-out 0.1s;
}
.dashboatd-event:hover{
    transform:scale(1.025);
}
.dashboatd-event:active{
    transform:scale(1);
}
.dashboatd-event-name{
    color:var(--dark-blue);
    width:calc(100% - 2rem);
    padding-right:1rem;
    padding-left:1rem;
    height:50%;

    justify-content:flex-start;
    align-items:center;
    font-weight:bold;
    display:flex;
}
.dashboatd-event-date{
    width:calc(100% - 2rem);
    padding-right:1rem;
    padding-left:1rem;
    font-size:1rem;
    height:50%;

    justify-content:flex-start;
    align-items:center;
    display:flex;
}

/*--Mobile Dispaly-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width:768px) and (orientation:portrait){
    #dahsboard-screen{
        flex-direction:column;
    }
    .dashboard-account-display{
        transform:translate(-50%);
        margin-right:none;
        margin-left:50%;
    }
    .dashboard-right-side{
        width:calc(100% - 2rem);
        margin-left:1rem;
        margin-top:0rem;
    }
}