@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

.dashboard
{
    height:100%;
    text-align:center;
    width:100%;
}

:root
{
    --error:#ff3700;
    --primary:#2a9dd6;
    --primary-bg:#1b1529;
    --primary-hover:#2489bb;
    --primary-text:#d2d6e5;
    --secondary-bg:#1a1a1a;
    --third-bg:#383838;
}

body
{
    align-items:center;
    background:linear-gradient(127deg,var(--secondary-bg), var(--primary-bg)) no-repeat fixed;
    background-size:cover;
    color:var(--primary-text);
    display:flex;
    flex-direction:column;
    font-family:\'Poppins\', sans-serif;
    height:100%;
    margin:0;
    min-height:100vh;
    min-width:100vw;
    padding:0;
    width:100%;
}

header h1
{
    margin:0;
    padding:0;
}

header hr
{
    border-color:var(--primary);
    opacity:0.5;
    width:30%;
}

header ul li
{
    list-style:circle;
    width:fit-content;
}

header ul
{
    display:flex;
    flex-direction:column;
    gap:0;
    text-align:left;
    width:fit-content;
}

header
{
    align-items:center;
    text-align:center;
    width:100%;
}

li a
{
    color:var(--primary-text);
    padding-bottom:.45rem;
    position:relative;
    text-decoration:none;
    transition:all .3s ease;
}

li a:hover::after
{
    margin:0 auto;
    width:85%;
}

li
{
    list-style:none;
}

li.navpage_item
{
    padding-left:20px;
    padding-right:20px;
}

nav
{
    display:flex;
    flex-direction:row;
    justify-content:space-between;
}

nav,footer
{
    -moz-box-shadow:0 20px 28px 0 rgba(0,0,0,0.2);
    -webkit-box-shadow:0 20px 28px 0 rgba(0,0,0,0.2);
    background-color:rgba(0,0,0,0.2);
    box-shadow:0 20px 28px 0 rgba(0,0,0,0.2);
    padding:1.2rem 1rem;
}

table.list-table > tbody,table.list-table > tbody > th,table.list-table > tbody > tr,table.list-table > tbody > tr > td
{
    border:2px solid var(--primary);
    border-collapse:collapse;
}

ul
{
    display:flex;
    flex-direction:row;
    gap:2.5rem;
    list-style:none;
    padding-left:0;
}

ul.navpage_list
{
    gap:10px;
    background-color:var(--third-bg);
    border:0 solid transparent;
    display:none;
    flex-direction:column;
    margin-top:10px;
    max-height:0;
    overflow:hidden;
    position:relative;
    transition:max-height .3s ease, border .325s ease;
    z-index:2;
}

.back
{
    background-color:#2a9dd6;
    border-radius:15px;
    color:var(--primary-text);
    padding:.35rem .65rem;
    text-decoration:none;
    transition:all .3s ease;
}

.back:hover
{
    background-color:var(--primary-hover);
    transition:all .3s ease;
}

.feature-list
{
    display:block;
    margin:auto;
    width:fit-content;
}

.feature-list-ul ul
{
    margin: 5px auto auto 20px;
}

.navsite_item
{
    align-items:center;
    justify-content:center;
    text-align:center;
    width:120px;
}

.navsite_item:hover .navpage_list
{
    border:4px solid var(--primary-hover);
    display:flex!important;
    max-height:200px;
}

.navsite_item:not(:hover) .navpage_list
{
    border:0 solid transparent;
    max-height:0;
    transition-delay:.1s;
}
#navsite_list
{
    display:flex;
    flex-direction:row;
    gap:3.25rem;
}

@media (max-width: 500px) {
    .toggle-button {
        display: flex;
    }
    #navsite_list {
        display: none;
        flex-direction: column;
    }

    .nav-links li {
        text-align: center;
    }

    .nav-links.active {
        display: flex;
    }

    nav {
        flex-direction: column;
        align-items: flex-start;
    }
}

.status-message
{
    background-color:#dff0d8;
    border:1px solid #3c763d;
    color:#3c763d;
    margin-bottom:10px;
    opacity:1;
    padding:15px;
    transition:opacity .5s ease-in-out;
}

.status-message.failure
{
    background-color:#f2dede;
    border:1px solid #a94442;
    color:#a94442;
}

.wrapper-40x .error
{
    color:var(--error);
}

.wrapper-40x h1
{
    font-size:10rem;
    margin:0;
}

.wrapper-40x h3
{
    margin-bottom:2rem;
}

.wrapper-40x
{
    text-align:center;
}

#navbar_container
{
    height:75px!important;
    position:relative;
    z-index:500;
}

#navbar_container,#page_container,#footer_container
{
    width:100%;
}

#page_container
{
    flex-grow:1;
}

header a,.error-code
{
    color:var(--primary);
}

#loginForm input,#register_Form input
{
    background:none;
    border:2px solid var(--primary);
    border-radius:50px;
    width:175px;
}