/* Background Start */

#background-front {
    width: 100%;
    height: 100%;
    top: 0;
    position: absolute;
    z-index: -1;
    backdrop-filter: blur(.599vw);
}

#background {
    width: 100%;
    height: 100%;
    top: 0;

    background-image: url(../../img/background.png);
    

    position: absolute;
    z-index: -2;

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* Background End */

/* Page Content Start */

#right-page-container {
    width: 100%;
    height: auto;
    
    display: flex;
    flex-direction: column;
}

#header-content {
    width: 100%;
    height: 9.2593vh;
    
    display: flex;
    flex-direction: row;
    align-items: center;
}


#header-content #notify-container {
    width: 4.6296vh;
    height: 4.6296vh;

    border-radius: .7292vw;
    background: rgba(255, 255, 255, 0.05);

    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 0.3s;
}

#notify-container #notify-icon {
    background-image: url(../img/notifyIcon.png);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;

    width: 1.7037vh;
    height: 1.9074vh;
}

#header-content #notify-container:hover {
    background: rgba(255, 255, 255, 0.1);
    transition: 0.3s;
}

#header-content #user-details-container {
    width: 15.2778vh;
    height: 4.6296vh;

    display: flex;
    flex-direction: row;
}

#user-details-container #text-details {
    height: 4.6296vh;
    width: 8.8889vh;

    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: center;
}

#text-details p {
    margin: 0;
}

#text-details p.rank {
    font-size: 1.1111vh; 
    font-weight: 600;
}

#user-details-container #user-icon {
    margin-left: 1.7593vh;
    width: 4.6296vh;
    height: 4.6296vh;

    border: .1042vw solid #F34240;
    border-radius: 2.6042vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

#user-icon #circle-user-icon {
    width: 3.8889vh;
    height: 3.8889vh;
    
    border-radius: 2.6042vw;
    
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#page-content-container {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;

    text-align: center;
    font-family: "SF Pro Rounded";
    display: flex;
    justify-content: center;
    align-items: center;
}

#page-content-container #panel-content {
    width: 140.3704vh;
    height: 77.7778vh;

    border-radius: .9375vw;

    /* background: linear-gradient(180deg, rgba(1, 201, 228, 0.20) 0%, rgba(0, 0, 0, 0.00) 100%), rgba(0, 0, 0, 0.01); */

    background-image: url(../img/panelLightMode.png);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;

    backdrop-filter: blur(3.3594vw);
    box-shadow: 0px 0px 2.1875vw 0px rgba(0, 0, 0, 0.31);
    display: flex;
    flex-direction: row;
    justify-content: start;
    text-align: start;

    transition: 0.2s;
}

/* Left Navbar Start */

#panel-content #left-navbar-container {
    height: 77.963vh;
    width: 22.2222vh;
    border-right: .0521vw solid rgba(255, 255, 255, 0.08);

    display: flex;
    flex-direction: column;
}

#navbar-category {
    display: flex;
    flex-direction: column;
    gap: 2.7778vh;
}

#left-navbar-container #navbar-category a {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#navbar-category #category-item {
    font-size: 1.6667vh;
    display: flex;
    flex-direction: row;
    justify-content: start;
    font-weight: 600;
    width: 100%;
    margin-left: 7.0833vw;
    cursor: pointer;
    align-items: center;
}

#category-item.active span,
#category-item.active #icon {
    opacity: 1;
    color: #01C9E4;
    stroke: #01C9E4;
    fill: #01C9E4;
}

#category-item:hover #icon,
#category-item:hover span {
    opacity: 1;
}

#category-item span {
    opacity: 0.30;
    transition: 0.3s;
}

#category-item #icon {
    position: absolute;
    left: 3.8889vh;

    object-fit: cover;
    align-items: center;
    display: flex;
    justify-content: center;
    width: auto;
    height: 1.3889vh;
    margin-top: .1042vw;
    opacity: 0.30;
    stroke: white;
    fill: #ffffff;
}

/* Left Navbar End */

/* Notify Menu Start */

#notifies-menu-container {
    z-index: 5;
    position: absolute;
    right: 0;
    top: 0;

    width: 24.0741vh;
    max-height: 71.4815vh;

    background-color: rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(3.7037vh);

    border-radius: 1.2963vh;

    display: flex;
    flex-direction: column;

    margin-right: 1.8519vh;
    margin-top: 2.3148vh;
}

#notifies-menu-container #notify-menu-header {
    width: 100%;
    height: 4.6296vh;

    display: flex;
}

#notify-menu-header img.bell {
    width: 1.7037vh;
    height: 1.9074vh;

    margin-left: 1.4815vh;
    margin-top: 1.3889vh;
}

#notify-menu-header span {
    font-size: 1.1111vh;
    font-weight: 500;

    height: 100%;

    display: flex;
    align-items: center;

    margin-left: 1.5278vh;
}

#notify-menu-header img.cancel {
    width: 1.8519vh;
    height: 1.8519vh;

    margin-left: 8.1481vh;
    margin-top: 0.6481vh;
}

#notifies-menu-container #notify-menu-line {
    width: 100%;
    height: 0.0926vh;
    
    background-color: rgba(0, 0, 0, 0.07);
}

#notifies-menu-container #notify-menu-notifies {
    width: 100%;
    max-height: 63.8889vh;

    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;

    overflow-y: auto;
}

#notify-menu-notifies #notify-menu-item {
    width: 21.1111vh;
    min-height: 7.4074vh;

    background-color: rgba(217, 217, 217, 0.10);
    border-radius: 0.8333vh;

    margin-top: 0.9259vh;
}

#notify-menu-item #notify-item-header {
    width: 100%;
    height: 3.7963vh;

    display: flex;
    align-items: center;
}

#notify-item-header img {
    width: 1.2037vh;
    height: 1.3889vh;

    margin-left: 0.9259vh;
}

#notify-item-header span {
    margin-left: 1.1111vh;
    font-size: 0.9259vh;
    font-weight: 500;
}

#notify-menu-item span.notify-content {
    font-size: 0.9259vh;
    font-weight: 500;
    opacity: 0.3;

    width: 15.6481vh;
    /* max-height: 2.5vh; */
    overflow-y: auto;

    margin-left: 0.9259vh;

    display: flex;
}

#notifies-menu-container #notify-menu-bottom {
    height: 2.963vh;
    width: 100%;

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

    font-size: 1.0185vh;
    font-weight: 400;
    color: #EB5545;
}

/* Notify Menu End */

/* New Notify Start */

#new-notify-container {
    width: 24.0741vh;
    /* height: 8.1481vh; */
    height: auto;
    padding-bottom: 1.3889vh;
    border-radius: 1.2963vh;

    position: absolute;
    right: 1.8519vh;
    top: 2.3148vh;
    z-index: 4;

    display: flex;
    flex-direction: column;

    background: rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(3.7037vh);
}

#new-notify-container #new-notify-header {
    width: 100%;
    height: 4.6296vh;
    display: flex;
}

#new-notify-header img.notifyIcon {
    width: 1.7037vh;
    height: 1.9074vh;

    margin-left: 1.4815vh;
    margin-top: 1.3889vh;
}

#new-notify-header img.cancelIcon {
    width: 1.8519vh;
    height: 1.8519vh;

    margin-left: 9.2593vh;
    margin-top: 0.6481vh;
}

#new-notify-header span {
    height: 100%;
    display: flex;
    align-items: center;

    margin-left: 1.5278vh;

    font-size: 1.1111vh;
    font-weight: 500;
}

#new-notify-container span.desc {
    width: 18.7963vh;
    /* height: 2.5vh; */

    overflow-y: auto;

    margin-left: 1.4815vh;

    display: flex;

    font-size: 1.1111vh;
    font-weight: 500;
    opacity: 0.3;
}

/* New Notify End */

img.left-navbar-icon {

}

/* New Notify Transition Start */

.newnotify-enter-active,
.newnotify-leave-active {
    transition: all 0.5s ease-out;
}

.newnotify-enter-to,
.newnotify-leave {
    transform: translateX(0);
    opacity: 1;
}

.newnotify-enter,
.newnotify-leave-to {
    transform: translateX(3.7037vh);
    opacity: 0;
}

/* New Notify Transition End */

/* Page Content End */